refactor(pos): move nav from horizontal bottom bar to vertical right sidebar

- CSS: pos-bottom-nav changed from flex row (height:52px, bottom bar)
  to flex column (width:64px, right sidebar) with vertical tab layout
- Active tab indicator: top horizontal bar → left vertical bar
- Tab hover: subtle background highlight
- CafeDesktop.razor: wrap content + nav in flex row container
- Mobile responsive: compact 52px width on small screens

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

apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Pos/Cafe/CafeDesktop.razor

@@ -11,8 +11,9 @@
 @inject PosDataService DataService
 @inject IJSRuntime JS
 
-@* ═══════════════ MAIN CONTENT AREA ═══════════════ *@
-<div class="pos-content-area">
+@* ═══════════════ MAIN CONTENT AREA + VERTICAL NAV ═══════════════ *@
+<div style="display:flex;flex:1;overflow:hidden;">
+<div class="pos-content-area" style="flex:1;display:flex;overflow:hidden;">
     @switch (_activeTab)
     {
         case PosTab.Sale:
@@ -679,7 +680,7 @@
     }
 </div>
 
-@* ═══════════════ BOTTOM NAVIGATION ═══════════════ *@
+@* ═══════════════ VERTICAL NAVIGATION (right sidebar) ═══════════════ *@
 <div class="pos-bottom-nav">
     <button class="pos-bottom-nav__tab @(_activeTab == PosTab.Sale ? "pos-bottom-nav__tab--active" : "")"
             @onclick="() => SwitchTab(PosTab.Sale)">
@@ -702,6 +703,7 @@
         <span>Cài đặt</span>
     </button>
 </div>
+</div> @* close outer flex wrapper *@
 
 @code {
     // ═══════════════ TAB SYSTEM ═══════════════

apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/pos.css

@@ -351,16 +351,20 @@
    7. POS BOTTOM NAVIGATION — Tab bar for Sale / History / Dashboard
    ═════════════════════════════════════════════════════════════════════════ */
 
+/* EN: POS vertical sidebar navigation (right side)
+   VI: POS sidebar dọc (bên phải) */
 .pos-bottom-nav {
     display: flex;
-    height: 52px;
+    flex-direction: column;
+    width: 64px;
     background-color: var(--pos-bg-elevated);
-    border-top: 1px solid var(--pos-border-subtle);
+    border-left: 1px solid var(--pos-border-subtle);
     flex-shrink: 0;
+    padding: 8px 0;
+    gap: 2px;
 }
 
 .pos-bottom-nav__tab {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -371,29 +375,34 @@
     color: var(--pos-text-tertiary);
     cursor: pointer;
     font-family: var(--pos-font);
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 500;
-    transition: color 0.2s ease;
+    transition: color 0.2s ease, background 0.2s ease;
     position: relative;
+    padding: 10px 4px;
+    border-radius: 8px;
+    margin: 0 6px;
 }
 
 .pos-bottom-nav__tab:hover {
     color: var(--pos-text-secondary);
+    background: rgba(255, 255, 255, 0.04);
 }
 
 .pos-bottom-nav__tab--active {
     color: var(--pos-orange-primary);
+    background: rgba(255, 92, 0, 0.08);
 }
 
 .pos-bottom-nav__tab--active::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 25%;
-    right: 25%;
-    height: 2px;
+    left: 0;
+    top: 20%;
+    bottom: 20%;
+    width: 3px;
     background: var(--pos-orange-primary);
-    border-radius: 0 0 2px 2px;
+    border-radius: 0 3px 3px 0;
 }
 
 .pos-bottom-nav__icon {
@@ -1394,14 +1403,16 @@
         grid-template-columns: repeat(2, 1fr);
     }
 
-    /* EN: Bottom navigation — visible on mobile / VI: Nav dưới — hiện trên mobile */
+    /* EN: Sidebar nav — compact on small screens / VI: Sidebar nav — thu gọn trên màn nhỏ */
     .pos-bottom-nav {
-        height: 56px;
+        width: 52px;
+        padding: 4px 0;
     }
 
     .pos-bottom-nav__tab {
-        font-size: 10px;
-        min-height: 56px;
+        font-size: 9px;
+        padding: 8px 2px;
+        margin: 0 4px;
     }
 
     /* EN: History list compact / VI: Danh sách lịch sử thu gọn */