style: group sidebar navigation links into clean logical sections using uppercase category headers

static/theme.css

@@ -87,6 +87,10 @@ body {
     border-right: 1px solid var(--color-border);
     padding: var(--spacing-lg) calc(var(--spacing-lg) * 0.8);
     flex-shrink: 0;
+    overflow-y: auto;
+    height: 100vh;
+    position: sticky;
+    top: 0;
 }
 
 /* --- Brand / Logo --- */

templates/layout.html

@@ -20,46 +20,13 @@
         <span class="brand-name">PUM'S TOOLKIT</span>
     </div>
     <nav class="nav flex-column">
+        <!-- 🏠 TRANG CHỦ -->
         <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="/">
             <i class="fas fa-th-large"></i> Dashboard
         </a>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}"
-           href="/translator/text"
-           data-bs-toggle="collapse"
-           data-bs-target="#translator-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-language"></i> AI Translator</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text">
-                <i class="fas fa-font"></i> Văn bản
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file">
-                <i class="fas fa-file-alt"></i> Tài liệu
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image">
-                <i class="fas fa-image"></i> Dịch ảnh
-            </a>
-        </div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}"
-           href="/image-studio/remove-bg"
-           data-bs-toggle="collapse"
-           data-bs-target="#image-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}"
-           onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-image"></i> Image Studio</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i>
-        </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
-                <i class="fas fa-cut"></i> Xóa nền
-            </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale">
-                <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
-            </a>
-        </div>
+
+        <!-- 🎙️ ÂM THANH & LỒNG TIẾNG -->
+        <div class="nav-section-label">ÂM THANH & LỒNG TIẾNG</div>
         <a class="nav-link nav-link-collapsible {% if request.path.startswith('/tts') %}active{% endif %}"
            href="/tts/vieneu"
            data-bs-toggle="collapse"
@@ -80,26 +47,44 @@
                 <i class="fab fa-microsoft"></i> Edge TTS
             </a>
         </div>
-        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}"
-           href="/pdf/summarize"
+        <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio">
+            <i class="fas fa-podcast"></i> AI Audio Story Studio
+        </a>
+        <a class="nav-link {% if request.path.startswith('/podcast-studio') %}active{% endif %}" href="/podcast-studio">
+            <i class="fas fa-microphone"></i> AI Podcast Studio
+        </a>
+
+        <!-- 🎬 HÌNH ẢNH & VIDEO AI -->
+        <div class="nav-section-label">HÌNH ẢNH & VIDEO AI</div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}"
+           href="/image-studio/remove-bg"
            data-bs-toggle="collapse"
-           data-bs-target="#pdf-sub"
-           aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}"
+           data-bs-target="#image-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}"
            onclick="return handleNavCollapse(event, this)">
-            <span><i class="fas fa-file-pdf"></i> Smart PDF</span>
-            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i>
+            <span><i class="fas fa-image"></i> Image Studio</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i>
         </a>
-        <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub">
-            <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize">
-                <i class="fas fa-align-left"></i> Tóm tắt
+        <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
+                <i class="fas fa-cut"></i> Xóa nền
             </a>
-            <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract">
-                <i class="fas fa-table"></i> Trích xuất dữ liệu
+            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale">
+                <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
             </a>
         </div>
+        <a class="nav-link {% if request.path.startswith('/comic-creator') %}active{% endif %}" href="/comic-creator">
+            <i class="fas fa-book-open"></i> AI Comic Creator
+        </a>
         <a class="nav-link {% if request.path.startswith('/video-ai') %}active{% endif %}" href="/video-ai">
             <i class="fas fa-video"></i> Video AI
         </a>
+        <a class="nav-link {% if request.path.startswith('/shorts-generator') %}active{% endif %}" href="/shorts-generator">
+            <i class="fas fa-mobile-alt"></i> AI Shorts Generator
+        </a>
+
+        <!-- ✍️ TRỢ LÝ NỘI DUNG -->
+        <div class="nav-section-label">TRỢ LÝ NỘI DUNG</div>
         <a class="nav-link nav-link-collapsible {% if request.path.startswith('/prompt-generator') %}active{% endif %}"
            href="/prompt-generator/code"
            data-bs-toggle="collapse"
@@ -147,21 +132,49 @@
                 <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô
             </a>
         </div>
-        <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio">
-            <i class="fas fa-podcast"></i> AI Audio Story Studio
-        </a>
-        <a class="nav-link {% if request.path.startswith('/podcast-studio') %}active{% endif %}" href="/podcast-studio">
-            <i class="fas fa-microphone"></i> AI Podcast Studio
-        </a>
-        <a class="nav-link {% if request.path.startswith('/shorts-generator') %}active{% endif %}" href="/shorts-generator">
-            <i class="fas fa-mobile-alt"></i> AI Shorts Generator
-        </a>
-        <a class="nav-link {% if request.path.startswith('/comic-creator') %}active{% endif %}" href="/comic-creator">
-            <i class="fas fa-book-open"></i> AI Comic Creator
-        </a>
         <a class="nav-link {% if request.path.startswith('/omnichannel-writer') %}active{% endif %}" href="/omnichannel-writer">
             <i class="fas fa-paper-plane"></i> AI Omnichannel Writer
         </a>
+
+        <!-- 💼 DỊCH THUẬT & TÀI LIỆU -->
+        <div class="nav-section-label">DỊCH THUẬT & TÀI LIỆU</div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}"
+           href="/translator/text"
+           data-bs-toggle="collapse"
+           data-bs-target="#translator-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-language"></i> AI Translator</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text">
+                <i class="fas fa-font"></i> Văn bản
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file">
+                <i class="fas fa-file-alt"></i> Tài liệu
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image">
+                <i class="fas fa-image"></i> Dịch ảnh
+            </a>
+        </div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}"
+           href="/pdf/summarize"
+           data-bs-toggle="collapse"
+           data-bs-target="#pdf-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-file-pdf"></i> Smart PDF</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize">
+                <i class="fas fa-align-left"></i> Tóm tắt
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract">
+                <i class="fas fa-table"></i> Trích xuất dữ liệu
+            </a>
+        </div>
     </nav>
 </div>