feat(docs): Update Mermaid diagrams and enhance Vietnamese architecture documentation

- Changed the Mermaid theme from 'default' to 'base' for improved visual consistency.
- Expanded the architecture documentation by adding new sections on caching, data consistency, and observability patterns.
- Enhanced existing diagrams with clearer color coding and class definitions for better readability.
- Removed outdated service communication documentation to streamline content.
- Included quick tips and common issues sections to assist users in navigating the documentation effectively.

apps/web-docs/src/components/mdx/Mermaid.tsx

@@ -18,7 +18,7 @@ const Mermaid: React.FC<MermaidProps> = ({ chart }) => {
         // Initialize mermaid
         mermaid.initialize({
             startOnLoad: false,
-            theme: 'default',
+            theme: 'base',
             securityLevel: 'loose',
             fontFamily: 'inherit',
         });

apps/web-docs/src/lib/docs-generator.ts

@@ -48,7 +48,12 @@ const ITEM_ORDER: Record<string, string[]> = {
     ],
     'architecture': [
         'system-design',        // EN: Overview first / VI: Overview trước
-        'service-communication', // EN: Then communication / VI: Sau đó là communication
+        'microservices-communication',
+        'caching-architecture',
+        'data-consistency-patterns',
+        'event-driven-architecture',
+        'security-architecture',
+        'observability-architecture',
     ],
     'skills': [
         'project-rules',        // EN: Project rules first / VI: Project rules trước