{"id":14459,"date":"2026-06-10T16:56:49","date_gmt":"2026-06-10T14:56:49","guid":{"rendered":"https:\/\/cukcuk.eu\/?page_id=14459"},"modified":"2026-06-13T10:17:36","modified_gmt":"2026-06-13T08:17:36","slug":"so-do-van-hanh-cung-cukcuk","status":"publish","type":"page","link":"https:\/\/cukcuk.eu\/vi\/so-do-van-hanh-cung-cukcuk\/","title":{"rendered":"Gi\u1ea3i ph\u00e1p qu\u1ea3n l\u00fd c\u00f9ng CUKCUK"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"14459\" class=\"elementor elementor-14459\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e948a3b e-con-full e-flex e-con e-parent\" data-id=\"e948a3b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f3b048 elementor-widget elementor-widget-html\" data-id=\"8f3b048\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Elementor HTML Widget: isolated iframe version -->\n<!-- This isolates the POS widget from WordPress\/Elementor global CSS and JS. -->\n<div id=\"pos-ecosystem-iframe-wrapper\" style=\"width:100%; max-width:100%; margin:0; padding:0; overflow:hidden; isolation:isolate;\">\n  <iframe\n    title=\"POS Ecosystem Interactive Map\"\n    srcdoc=\"&lt;!DOCTYPE html&gt;&lt;html lang=&quot;vi&quot;&gt;&lt;head&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;    &lt;title&gt;H\u1ec7 Th\u1ed1ng Kassen Nh\u00e0 H\u00e0ng Hi\u1ec7n \u0110\u1ea1i&lt;\/title&gt;    &lt;!-- Tailwind CSS --&gt;    &lt;script src=&quot;https:\/\/cdn.tailwindcss.com&quot;&gt;&lt;\/script&gt;    &lt;!-- Lucide Icons --&gt;    &lt;script src=&quot;https:\/\/unpkg.com\/lucide@latest&quot;&gt;&lt;\/script&gt;    &lt;style&gt;        @import url(&#x27;https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap&#x27;);        body {            font-family: &#x27;Plus Jakarta Sans&#x27;, sans-serif;        }        .glow-line {            stroke-dasharray: 8;            animation: dash 30s linear infinite;        }        @keyframes dash {            to {                stroke-dashoffset: -1000;            }        }        .pulse-active {            animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;        }        @keyframes pulse-ring {            0%, 100% {                opacity: 1;                transform: scale(1);            }            50% {                opacity: .5;                transform: scale(1.05);            }        }    &lt;\/style&gt;&lt;\/head&gt;&lt;body class=&quot;bg-slate-950 text-slate-100 min-h-screen overflow-x-hidden selection:bg-emerald-500 selection:text-slate-950&quot;&gt;    &lt;!-- Container ch\u00ednh --&gt;    &lt;div class=&quot;flex flex-col lg:flex-row min-h-screen&quot;&gt;                &lt;!-- SIDEBAR TR\u00c1I: Ph\u00e2n t\u00edch &amp; \u00dd t\u01b0\u1edfng c\u1ea3i ti\u1ebfn (\u0110\u00e3 h\u1ed7 tr\u1ee3 thu g\u1ecdn m\u01b0\u1ee3t m\u00e0) --&gt;        &lt;div id=&quot;sidebar-container&quot; class=&quot;relative w-full lg:w-96 bg-slate-900 border-b lg:border-b-0 lg:border-r border-slate-800 p-6 lg:p-6 flex flex-col justify-between shrink-0 transition-all duration-300 ease-in-out sticky top-0 h-auto lg:h-screen z-40 overflow-visible&quot;&gt;                        &lt;!-- N\u00fat thu g\u1ecdn \/ m\u1edf r\u1ed9ng cho m\u00e1y t\u00ednh (Desktop Toggle Handle) --&gt;            &lt;button id=&quot;toggle-sidebar-btn&quot; onclick=&quot;toggleSidebar()&quot; class=&quot;hidden lg:flex absolute top-1\/2 -right-4 -translate-y-1\/2 w-8 h-12 bg-slate-900 border border-slate-800 text-slate-400 hover:text-emerald-400 rounded-r-xl items-center justify-center cursor-pointer transition-all duration-300 z-50 shadow-lg hover:shadow-emerald-500\/10 focus:outline-none&quot;&gt;                &lt;i id=&quot;collapse-icon&quot; data-lucide=&quot;chevron-left&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;            &lt;\/button&gt;            &lt;!-- Wrapper \u0111\u1ec3 ch\u1ed1ng v\u1ee1 ch\u1eef khi \u0111ang th\u1ef1c hi\u1ec7n animation co gi\u00e3n --&gt;            &lt;div id=&quot;sidebar-content&quot; class=&quot;flex flex-col justify-between h-full w-full transition-opacity duration-300&quot;&gt;                &lt;div&gt;                    &lt;!-- Header (C\u00f3 n\u00fat toggle cho mobile) --&gt;                    &lt;div class=&quot;flex items-center justify-between w-full mb-6&quot;&gt;                        &lt;div class=&quot;flex items-center gap-3&quot;&gt;                            &lt;div class=&quot;bg-emerald-500\/10 p-2.5 rounded-xl border border-emerald-500\/20 text-emerald-400&quot;&gt;                                &lt;i data-lucide=&quot;layout-grid&quot; class=&quot;w-6 h-6&quot;&gt;&lt;\/i&gt;                            &lt;\/div&gt;                            &lt;div&gt;                                &lt;h1 class=&quot;font-extrabold text-lg text-white leading-tight&quot;&gt;POS Ecosystem&lt;\/h1&gt;                                &lt;p class=&quot;text-xs text-slate-400 font-medium&quot;&gt;B\u1ea3n \u0111\u1ed3 t\u01b0\u01a1ng t\u00e1c&lt;\/p&gt;                            &lt;\/div&gt;                        &lt;\/div&gt;                        &lt;!-- N\u00fat thu g\u1ecdn cho di \u0111\u1ed9ng (Mobile Toggle Button) --&gt;                        &lt;button onclick=&quot;toggleMobileSidebar()&quot; class=&quot;lg:hidden p-2 text-slate-400 hover:text-emerald-400 focus:outline-none bg-slate-950 rounded-lg border border-slate-800&quot;&gt;                            &lt;i id=&quot;mobile-toggle-icon&quot; data-lucide=&quot;menu&quot; class=&quot;w-5 h-5&quot;&gt;&lt;\/i&gt;                        &lt;\/button&gt;                    &lt;\/div&gt;                    &lt;!-- Ph\u1ea7n n\u1ed9i dung c\u00f3 th\u1ec3 thu g\u1ecdn tr\u00ean di \u0111\u1ed9ng --&gt;                    &lt;div id=&quot;mobile-collapsible-section&quot; class=&quot;hidden lg:block space-y-4&quot;&gt;                        &lt;!-- Tabs \u00fd t\u01b0\u1edfng --&gt;                        &lt;div class=&quot;bg-slate-950\/60 rounded-xl p-4 border border-slate-800&quot;&gt;                            &lt;h2 class=&quot;text-sm font-bold text-emerald-400 flex items-center gap-2 mb-2&quot;&gt;                                &lt;i data-lucide=&quot;lightbulb&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                                S\u01a1 \u0111\u1ed3                            &lt;\/h2&gt;                            &lt;ul class=&quot;text-xs text-slate-300 space-y-2 list-disc list-inside&quot;&gt;                                &lt;li&gt;&lt;span class=&quot;font-semibold text-slate-100&quot;&gt;Lu\u1ed3ng m\u00f4 ph\u1ecfng \u0111a k\u00eanh:&lt;\/span&gt; \u0110\u01a1n h\u00e0ng ch\u1ea1y \u0111\u1ed3ng th\u1eddi t\u1eeb Kh\u00e1ch \u0111\u1ebfn 3 c\u1ee5c (QR, E-Shop, \u0110\u1eb7t b\u00e0n), sau \u0111\u00f3 \u0111\u1ed3ng lo\u1ea1t b\u1eafn v\u1ec1 POS Core qua 3 \u0111\u01b0\u1eddng ch\u1ec9 c\u1eaft xanh n\u01b0\u1edbc bi\u1ec3n tr\u01b0\u1edbc khi ch\u1ebf bi\u1ebfn.&lt;\/li&gt;                            &lt;\/ul&gt;                        &lt;\/div&gt;                        &lt;!-- T\u01b0\u01a1ng t\u00e1c \u0111i\u1ec1u khi\u1ec3n --&gt;                        &lt;div class=&quot;space-y-3&quot;&gt;                            &lt;label class=&quot;text-xs font-bold text-slate-400 uppercase tracking-wider block&quot;&gt;Ng\u00f4n ng\u1eef hi\u1ec3n th\u1ecb&lt;\/label&gt;                            &lt;div class=&quot;grid grid-cols-3 gap-1 bg-slate-950 p-1 rounded-lg border border-slate-800&quot;&gt;                                &lt;button onclick=&quot;setLang(&#x27;vi&#x27;)&quot; id=&quot;btn-lang-vi&quot; class=&quot;text-xs py-1.5 rounded font-medium transition-all bg-emerald-500 text-slate-950 font-bold&quot;&gt;Ti\u1ebfng Vi\u1ec7t&lt;\/button&gt;                                &lt;button onclick=&quot;setLang(&#x27;de&#x27;)&quot; id=&quot;btn-lang-de&quot; class=&quot;text-xs py-1.5 rounded font-medium transition-all text-slate-400 hover:text-white&quot;&gt;Deutsch&lt;\/button&gt;                                &lt;button onclick=&quot;setLang(&#x27;bi&#x27;)&quot; id=&quot;btn-lang-bi&quot; class=&quot;text-xs py-1.5 rounded font-medium transition-all text-slate-400 hover:text-white&quot;&gt;Song ng\u1eef&lt;\/button&gt;                            &lt;\/div&gt;                        &lt;\/div&gt;                        &lt;!-- Gi\u1edbi thi\u1ec7u lu\u1ed3ng m\u00f4 ph\u1ecfng --&gt;                        &lt;div class=&quot;space-y-3 pt-2&quot;&gt;                            &lt;label class=&quot;text-xs font-bold text-slate-400 uppercase tracking-wider block&quot;&gt;\u0110i\u1ec1u khi\u1ec3n m\u00f4 ph\u1ecfng&lt;\/label&gt;                            &lt;button onclick=&quot;startFullSimulation()&quot; id=&quot;btn-simulate&quot; class=&quot;w-full bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-slate-950 font-bold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-emerald-500\/10 hover:shadow-emerald-500\/20 active:scale-[0.98]&quot;&gt;                                &lt;i data-lucide=&quot;play&quot; class=&quot;w-4 h-4 fill-current&quot;&gt;&lt;\/i&gt;                                Ch\u1ea1y To\u00e0n B\u1ed9 Quy Tr\u00ecnh                            &lt;\/button&gt;                            &lt;p class=&quot;text-[11px] text-slate-400 text-center italic leading-tight&quot;&gt;Ch\u1ea1y chu\u1ed7i V\u1eadn h\u00e0nh \u0111\u1ed3ng th\u1eddi &amp;rarr; \u0110\u1ed3ng b\u1ed9 POS &amp;rarr; B\u1ebfp n\u1ea5u &amp;rarr; Ph\u1ee5c v\u1ee5 b\u01b0ng l\u00ean &amp;rarr; T\u1ef1 \u0111\u1ed9ng \u0111\u1ed3ng b\u1ed9 b\u00e1o c\u00e1o v\u00e0 k\u1ebf to\u00e1n \u0110\u1ee9c&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- Detail Card (\u0110\u01b0\u1ee3c c\u1eadp nh\u1eadt khi hover\/click v\u00e0o node) - C\u0169ng n\u1eb1m trong kh\u1ed1i collapsible mobile --&gt;                &lt;div id=&quot;detail-card-section&quot; class=&quot;hidden lg:block mt-6 bg-slate-950\/80 border border-slate-800 rounded-xl p-4 min-h-[160px] flex flex-col justify-between&quot;&gt;                    &lt;div id=&quot;detail-empty&quot; class=&quot;text-center py-6&quot;&gt;                        &lt;i data-lucide=&quot;info&quot; class=&quot;w-8 h-8 text-slate-600 mx-auto mb-2&quot;&gt;&lt;\/i&gt;                        &lt;p class=&quot;text-xs text-slate-500&quot;&gt;R\u00ea chu\u1ed9t ho\u1eb7c click v\u00e0o b\u1ea5t k\u1ef3 m\u00f4-\u0111un n\u00e0o trong s\u01a1 \u0111\u1ed3 \u0111\u1ec3 xem vai tr\u00f2 v\u00e0 k\u1ebft n\u1ed1i c\u1ee7a n\u00f3.&lt;\/p&gt;                    &lt;\/div&gt;                    &lt;div id=&quot;detail-content&quot; class=&quot;hidden&quot;&gt;                        &lt;div class=&quot;flex items-start justify-between gap-2 mb-1.5&quot;&gt;                            &lt;span id=&quot;detail-badge&quot; class=&quot;text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider&quot;&gt;&lt;\/span&gt;                            &lt;span id=&quot;detail-tech&quot; class=&quot;text-[10px] text-slate-500 font-mono&quot;&gt;&lt;\/span&gt;                        &lt;\/div&gt;                        &lt;h3 id=&quot;detail-title&quot; class=&quot;text-sm font-bold text-white mb-1&quot;&gt;&lt;\/h3&gt;                        &lt;p id=&quot;detail-desc&quot; class=&quot;text-xs text-slate-400 leading-relaxed&quot;&gt;&lt;\/p&gt;                    &lt;\/div&gt;                    &lt;div class=&quot;text-[10px] text-slate-600 border-t border-slate-900 pt-2 mt-2 flex justify-between&quot;&gt;                        &lt;span&gt;E-Concept v3.5&lt;\/span&gt;                        &lt;span class=&quot;text-emerald-400 font-semibold&quot;&gt;M\u00f4 Ph\u1ecfng&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;            &lt;\/div&gt;        &lt;\/div&gt;        &lt;!-- PANEL PH\u1ea2I: S\u01a1 \u0111\u1ed3 t\u01b0\u01a1ng t\u00e1c th\u1ef1c t\u1ebf (T\u1ef1 \u0111\u1ed9ng chi\u1ebfm 100% kh\u00f4ng gian khi Sidebar \u0111\u00f3ng) --&gt;        &lt;div class=&quot;flex-1 bg-slate-950 p-4 lg:p-8 flex flex-col items-center justify-center relative overflow-auto&quot;&gt;                        &lt;!-- Grid n\u1ec1n huy\u1ec1n \u1ea3o --&gt;            &lt;div class=&quot;absolute inset-0 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:3rem_3rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-40 pointer-events-none&quot;&gt;&lt;\/div&gt;            &lt;!-- Header s\u01a1 \u0111\u1ed3 --&gt;            &lt;div class=&quot;w-full max-w-[1100px] mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 z-10 relative&quot;&gt;                &lt;div&gt;                    &lt;h2 class=&quot;text-xl font-bold text-white tracking-tight flex items-center gap-2&quot;&gt;                        &lt;span&gt;H\u1ec7 Th\u1ed1ng V\u1eadn H\u00e0nh Nh\u00e0 H\u00e0ng V\u1edbi CUKCUK&lt;\/span&gt;                    &lt;\/h2&gt;                    &lt;p class=&quot;text-xs text-slate-400&quot;&gt;C\u00e1c v\u00f9ng ch\u1ee9c n\u0103ng \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp khoa h\u1ecdc, t\u1ef1 \u0111\u1ed9ng h\u00f3a lu\u1ed3ng th\u00f4ng tin b\u00e1n h\u00e0ng v\u00e0 ph\u00e1p l\u00fd \u0110\u1ee9c&lt;\/p&gt;                &lt;\/div&gt;                &lt;!-- Ch\u00fa th\u00edch m\u00e0u s\u1eafc --&gt;                &lt;div class=&quot;flex flex-wrap gap-3 text-xs&quot;&gt;                    &lt;span class=&quot;flex items-center gap-1.5&quot;&gt;&lt;span class=&quot;w-2.5 h-2.5 rounded bg-blue-500\/20 border border-blue-500\/40&quot;&gt;&lt;\/span&gt; Kh\u00e1ch&lt;\/span&gt;                    &lt;span class=&quot;flex items-center gap-1.5&quot;&gt;&lt;span class=&quot;w-2.5 h-2.5 rounded bg-amber-500\/20 border border-amber-500\/40&quot;&gt;&lt;\/span&gt; Vai tr\u00f2 ch\u00ednh&lt;\/span&gt;                    &lt;span class=&quot;flex items-center gap-1.5&quot;&gt;&lt;span class=&quot;w-2.5 h-2.5 rounded bg-emerald-500\/20 border border-emerald-500\/40&quot;&gt;&lt;\/span&gt; POS &amp; B\u1ebfp&lt;\/span&gt;                    &lt;span class=&quot;flex items-center gap-1.5&quot;&gt;&lt;span class=&quot;w-2.5 h-2.5 rounded bg-purple-500\/20 border border-purple-500\/40&quot;&gt;&lt;\/span&gt; Qu\u1ea3n l\u00fd &amp; Ph\u00e1p l\u00fd&lt;\/span&gt;                &lt;\/div&gt;            &lt;\/div&gt;            &lt;!-- KHUNG S\u01a0 \u0110\u1ed2 (T\u01b0\u01a1ng t\u00e1c \u0111\u1ed9ng) --&gt;            &lt;div class=&quot;relative w-[1100px] h-[680px] border border-slate-800\/80 rounded-2xl bg-slate-900\/40 backdrop-blur-sm p-4 shadow-2xl overflow-hidden shrink-0&quot;&gt;                                &lt;!-- N\u00daT PLAY L\u01a0 L\u1eecNG (Floating Play Button - V\u00f4 c\u00f9ng ti\u1ec7n l\u1ee3i khi Sidebar b\u1ecb \u0111\u00f3ng) --&gt;                &lt;div class=&quot;absolute right-6 top-14 z-30&quot;&gt;                    &lt;button onclick=&quot;startFullSimulation()&quot; id=&quot;btn-simulate-floating&quot; class=&quot;bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-slate-950 font-bold py-2.5 px-4 rounded-xl flex items-center gap-2 transition-all shadow-lg shadow-emerald-500\/10 hover:shadow-emerald-500\/25 active:scale-[0.98] focus:outline-none&quot;&gt;                        &lt;i data-lucide=&quot;play&quot; class=&quot;w-4 h-4 fill-current&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-xs uppercase tracking-wider font-extrabold&quot;&gt;Ch\u1ea1y quy tr\u00ecnh&lt;\/span&gt;                    &lt;\/button&gt;                &lt;\/div&gt;                &lt;!-- SVG CONNECTIONS &amp; FLOW ANIMATIONS --&gt;                &lt;svg id=&quot;connection-svg&quot; class=&quot;absolute inset-0 w-full h-full pointer-events-none z-0&quot;&gt;                    &lt;defs&gt;                        &lt;!-- Glow filters --&gt;                        &lt;filter id=&quot;glow&quot; x=&quot;-20%&quot; y=&quot;-20%&quot; width=&quot;140%&quot; height=&quot;140%&quot;&gt;                            &lt;feGaussianBlur stdDeviation=&quot;4&quot; result=&quot;blur&quot; \/&gt;                            &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;blur&quot; operator=&quot;over&quot; \/&gt;                        &lt;\/filter&gt;                    &lt;\/defs&gt;                    &lt;!-- V\u00f9ng FOH (N\u1ec1n xanh d\u01b0\u01a1ng nh\u1ea1t) --&gt;                    &lt;rect x=&quot;15&quot; y=&quot;15&quot; width=&quot;230&quot; height=&quot;650&quot; rx=&quot;16&quot; fill=&quot;url(#foh-grad)&quot; stroke=&quot;#3b82f6&quot; stroke-opacity=&quot;0.1&quot; stroke-dasharray=&quot;4 4&quot; \/&gt;                    &lt;!-- V\u00f9ng CORE POS &amp; BOH (N\u1ec1n xanh l\u00e1 nh\u1ea1t) --&gt;                    &lt;rect x=&quot;265&quot; y=&quot;15&quot; width=&quot;410&quot; height=&quot;650&quot; rx=&quot;16&quot; fill=&quot;url(#core-grad)&quot; stroke=&quot;#10b981&quot; stroke-opacity=&quot;0.1&quot; stroke-dasharray=&quot;4 4&quot; \/&gt;                    &lt;!-- V\u00f9ng QU\u1ea2N L\u00dd &amp; PH\u00c1P L\u00dd (N\u1ec1n t\u00edm nh\u1ea1t) --&gt;                    &lt;rect x=&quot;695&quot; y=&quot;15&quot; width=&quot;390&quot; height=&quot;650&quot; rx=&quot;16&quot; fill=&quot;url(#admin-grad)&quot; stroke=&quot;#8b5cf6&quot; stroke-opacity=&quot;0.1&quot; stroke-dasharray=&quot;4 4&quot; \/&gt;                    &lt;!-- Gradients cho c\u00e1c v\u00f9ng --&gt;                    &lt;linearGradient id=&quot;foh-grad&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;1&quot;&gt;                        &lt;stop offset=&quot;0%&quot; stop-color=&quot;#3b82f6&quot; stop-opacity=&quot;0.01&quot;\/&gt;                        &lt;stop offset=&quot;100%&quot; stop-color=&quot;#3b82f6&quot; stop-opacity=&quot;0.04&quot;\/&gt;                    &lt;\/linearGradient&gt;                    &lt;linearGradient id=&quot;core-grad&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;1&quot;&gt;                        &lt;stop offset=&quot;0%&quot; stop-color=&quot;#10b981&quot; stop-opacity=&quot;0.01&quot;\/&gt;                        &lt;stop offset=&quot;100%&quot; stop-color=&quot;#10b981&quot; stop-opacity=&quot;0.04&quot;\/&gt;                    &lt;\/linearGradient&gt;                    &lt;linearGradient id=&quot;admin-grad&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;1&quot;&gt;                        &lt;stop offset=&quot;0%&quot; stop-color=&quot;#8b5cf6&quot; stop-opacity=&quot;0.01&quot;\/&gt;                        &lt;stop offset=&quot;100%&quot; stop-color=&quot;#8b5cf6&quot; stop-opacity=&quot;0.04&quot;\/&gt;                    &lt;\/linearGradient&gt;                    &lt;!-- C\u00c1C \u0110\u01af\u1edcNG K\u1ebeT N\u1ed0I T\u01af\u01a0NG T\u00c1C T\u0128NH N\u1ec0N --&gt;                    &lt;!-- Customer to Channels --&gt;                    &lt;path d=&quot;M 130 340 L 130 195&quot; stroke=&quot;#475569&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 130 340 L 130 485&quot; stroke=&quot;#475569&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 130 340 L 130 595&quot; stroke=&quot;#475569&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                                        &lt;!-- FOH to POS (Kh\u00e1ch t\u1ef1 order truy\u1ec1n th\u00f4ng tin v\u00e0o POS qua \u0111\u01b0\u1eddng n\u00e9t \u0111\u1ee9t xanh bi\u1ec3n) --&gt;                    &lt;path d=&quot;M 195 195 C 280 195, 340 270, 420 340&quot; stroke=&quot;#3b82f6&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; stroke-dasharray=&quot;4&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 195 485 C 280 485, 340 370, 420 340&quot; stroke=&quot;#3b82f6&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; stroke-dasharray=&quot;4&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 195 595 C 280 595, 340 400, 420 340&quot; stroke=&quot;#3b82f6&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; stroke-dasharray=&quot;4&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- POS to Table Map &amp; Waiter --&gt;                    &lt;path d=&quot;M 470 340 L 470 200&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 470 200 L 470 95&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 470 200 L 375 200&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- POS to Kitchen (KDS \/ K\u00fcche) --&gt;                    &lt;path d=&quot;M 470 380 L 470 485&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2.5&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 470 485 L 470 595&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- POS to Chef \/ Admin --&gt;                    &lt;path d=&quot;M 520 340 L 760 340&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 810 340 L 810 205&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 810 205 L 715 205&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- Chef\/Admin to Reports &amp; Compliance --&gt;                    &lt;path d=&quot;M 810 340 L 810 485&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 810 485 L 810 595&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- \u0110\u01af\u1edcNG K\u1ebeT N\u1ed0I H\u1ed6 TR\u1ee2: --&gt;                    &lt;!-- 1. Ch\u1ee7 nh\u00e0 h\u00e0ng (Chef) -&gt; Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1 (HR) qua n\u00e9t \u0111\u1ee9t m\u00e0u cam --&gt;                    &lt;path d=&quot;M 810 340 L 638 200&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; stroke-dasharray=&quot;4 4&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- 2. Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1 (HR) -&gt; Nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 qua n\u00e9t \u0111\u1ee9t m\u00e0u cam --&gt;                    &lt;path d=&quot;M 638 200 L 470 80&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; stroke-dasharray=&quot;4 4&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- 3. Ch\u1ee7 nh\u00e0 h\u00e0ng (Chef) -&gt; Qu\u1ea3n l\u00fd kho qua n\u00e9t \u0111\u1ee9t m\u00e0u cam ch\u00e9o d\u1ecdc c\u1ed9t m\u1edbi --&gt;                    &lt;path d=&quot;M 810 340 L 638 595&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; stroke-dasharray=&quot;4 4&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- 4. Nh\u00e0 b\u1ebfp (K\u00fcche) -&gt; Qu\u1ea3n l\u00fd kho qua n\u00e9t \u0111\u1ee9t m\u00e0u cam ch\u00e9o d\u1ecdc c\u1ed9t m\u1edbi --&gt;                    &lt;path d=&quot;M 470 600 L 638 595&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.8&quot; stroke-dasharray=&quot;4 4&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- Compliance to Sub-modules (TSE, etc) --&gt;                    &lt;path d=&quot;M 870 595 L 945 595&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2.5&quot; stroke-opacity=&quot;0.7&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 595 L 1005 515&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 515 L 945 515&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 515 L 1005 435&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 435 L 945 435&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 435 L 1005 355&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;path d=&quot;M 1005 355 L 945 355&quot; stroke=&quot;#ef4444&quot; stroke-width=&quot;2&quot; stroke-opacity=&quot;0.6&quot; fill=&quot;none&quot; \/&gt;                    &lt;!-- ================= C\u00c1C \u0110\u01af\u1edcNG CH\u1ea0Y M\u00d4 PH\u1eceNG D\u1eee LI\u1ec6U \u0110\u1ed8NG ================= --&gt;                    &lt;!-- GIAI \u0110O\u1ea0N 1: V\u1eacN H\u00c0NH (FOH &amp; BOH) --&gt;                    &lt;!-- B\u01b0\u1edbc 1: Kh\u00e1ch h\u00e0ng \u0111\u1ed3ng lo\u1ea1t ch\u1ea1y ra 3 k\u00eanh FOH --&gt;                    &lt;path id=&quot;simulation-path-1a&quot; d=&quot;M 130 340 L 130 195&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-1b&quot; d=&quot;M 130 340 L 130 485&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-1c&quot; d=&quot;M 130 340 L 130 595&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                                        &lt;!-- B\u01b0\u1edbc 2: T\u1eeb 3 k\u00eanh FOH \u0111\u1ed3ng lo\u1ea1t b\u1eafn v\u1ec1 POS CORE --&gt;                    &lt;path id=&quot;simulation-path-2a&quot; d=&quot;M 195 195 C 280 195, 340 270, 420 340&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-2b&quot; d=&quot;M 195 485 C 280 485, 340 370, 420 340&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-2c&quot; d=&quot;M 195 595 C 280 595, 340 400, 420 340&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;!-- Tr\u00ecnh t\u1ef1 v\u1eadn h\u00e0nh ti\u1ebfp theo (Kh\u00f4ng \u0111\u1ed5i) --&gt;                    &lt;path id=&quot;simulation-path-3&quot; d=&quot;M 470 340 L 470 600&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-4&quot; d=&quot;M 470 600 C 560 500, 560 180, 470 80&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-5&quot; d=&quot;M 470 80 C 300 80, 200 200, 130 350&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;!-- GIAI \u0110O\u1ea0N 2: QU\u1ea2N TR\u1eca &amp; PH\u00c1P L\u00dd (Kh\u00f4ng \u0111\u1ed5i) --&gt;                    &lt;path id=&quot;simulation-path-6&quot; d=&quot;M 470 340 L 810 340&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-7&quot; d=&quot;M 810 340 L 810 185&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-8&quot; d=&quot;M 810 340 L 810 475&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;path id=&quot;simulation-path-9&quot; d=&quot;M 810 340 L 810 585&quot; fill=&quot;none&quot; stroke=&quot;transparent&quot; stroke-width=&quot;4&quot; \/&gt;                    &lt;!-- H\u1ea0T S\u00c1NG NEON M\u00d4 PH\u1eceNG --&gt;                    &lt;!-- H\u1ea1t Giai \u0111o\u1ea1n 1 - Ch\u1eb7ng 1 (\u0110\u1ed3ng th\u1eddi t\u1eeb Kh\u00e1ch \u0111i 3 h\u01b0\u1edbng) --&gt;                    &lt;circle id=&quot;sim-dot-1a&quot; r=&quot;6&quot; fill=&quot;#60a5fa&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-1b&quot; r=&quot;6&quot; fill=&quot;#60a5fa&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-1c&quot; r=&quot;6&quot; fill=&quot;#60a5fa&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                                        &lt;!-- H\u1ea1t Giai \u0111o\u1ea1n 1 - Ch\u1eb7ng 2 (\u0110\u1ed3ng th\u1eddi t\u1eeb 3 h\u01b0\u1edbng b\u1eafn v\u1ec1 POS CORE) --&gt;                    &lt;circle id=&quot;sim-dot-2a&quot; r=&quot;6&quot; fill=&quot;#3b82f6&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-2b&quot; r=&quot;6&quot; fill=&quot;#3b82f6&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-2c&quot; r=&quot;6&quot; fill=&quot;#3b82f6&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;!-- H\u1ea1t Giai \u0111o\u1ea1n 1 - C\u00e1c ch\u1eb7ng v\u1eadn h\u00e0nh sau \u0111\u00f3 --&gt;                    &lt;circle id=&quot;sim-dot-3&quot; r=&quot;6&quot; fill=&quot;#10b981&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-4&quot; r=&quot;6&quot; fill=&quot;#f59e0b&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-5&quot; r=&quot;6&quot; fill=&quot;#3b82f6&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                                        &lt;!-- H\u1ea1t Giai \u0111o\u1ea1n 2 (T\u00edm \/ H\u1ed3ng \/ \u0110\u1ecf qu\u1ea3n tr\u1ecb &amp; ph\u00e1p l\u00fd) --&gt;                    &lt;circle id=&quot;sim-dot-6&quot; r=&quot;6&quot; fill=&quot;#c084fc&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-7&quot; r=&quot;6&quot; fill=&quot;#e879f9&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-8&quot; r=&quot;6&quot; fill=&quot;#6366f1&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                    &lt;circle id=&quot;sim-dot-9&quot; r=&quot;6&quot; fill=&quot;#ef4444&quot; class=&quot;hidden&quot; filter=&quot;url(#glow)&quot;&gt;&lt;\/circle&gt;                &lt;\/svg&gt;                &lt;!-- V\u00f9ng text nh\u00e3n \u1edf g\u00f3c tr\u00ean c\u00e1c ph\u00e2n khu --&gt;                &lt;div class=&quot;absolute left-6 top-6 text-[11px] font-bold tracking-widest text-blue-400 opacity-60 uppercase pointer-events-none&quot;&gt;FRONT OF HOUSE (GUEST EXPERIENCE)&lt;\/div&gt;                &lt;div class=&quot;absolute left-[715px] top-6 text-[11px] font-bold tracking-widest text-purple-400 opacity-60 uppercase pointer-events-none&quot;&gt;MANAGEMENT &amp; FISCAL COMPLIANCE (DE)&lt;\/div&gt;                &lt;!-- ---------------- NODE LEVEL ---------------- --&gt;                &lt;!-- 1. KH\u00c1CH H\u00c0NG (Kunden) - Diamond Center FOH --&gt;                &lt;div id=&quot;node-customer&quot; class=&quot;absolute left-[70px] top-[290px] w-[120px] h-[120px] flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 group z-10&quot; onclick=&quot;showDetails(&#x27;customer&#x27;)&quot;&gt;                    &lt;div class=&quot;absolute inset-0 bg-slate-900 border-2 border-blue-500 rounded-2xl rotate-45 group-hover:bg-blue-950\/40 transition-colors shadow-lg shadow-blue-500\/10&quot;&gt;&lt;\/div&gt;                    &lt;div class=&quot;relative z-10 text-center flex flex-col items-center p-2&quot;&gt;                        &lt;i data-lucide=&quot;users&quot; class=&quot;w-5 h-5 text-blue-400 mb-1&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-vi&quot;&gt;Kh\u00e1ch h\u00e0ng&lt;\/span&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-de hidden&quot;&gt;Kunden&lt;\/span&gt;                        &lt;span class=&quot;text-[10px] font-bold text-white block select-none lang-bi hidden&quot;&gt;Kh\u00e1ch \/ Kunden&lt;\/span&gt;                        &lt;span class=&quot;text-[9px] text-blue-400 font-semibold uppercase tracking-wider mt-0.5&quot;&gt;Guest&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 2. G\u1ecdi m\u00f3n QR \/ Mobile --&gt;                &lt;div id=&quot;node-qr&quot; class=&quot;absolute left-[45px] top-[160px] w-[170px] bg-slate-900\/90 border border-slate-700 hover:border-blue-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;qr&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-blue-500\/10 p-1.5 rounded-lg border border-blue-500\/20 text-blue-400 group-hover:bg-blue-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;qr-code&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-vi&quot;&gt;G\u1ecdi m\u00f3n QR \/ Mobile&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-de hidden&quot;&gt;QR \/ Mobile&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-bi hidden&quot;&gt;Qu\u00e9t QR \/ Mobile&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Customer self-order&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 3. E-Shop \/ Giao t\u1eadn nh\u00e0 --&gt;                &lt;div id=&quot;node-eshop&quot; class=&quot;absolute left-[45px] top-[450px] w-[170px] bg-slate-900\/90 border border-slate-700 hover:border-blue-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;eshop&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-blue-500\/10 p-1.5 rounded-lg border border-blue-500\/20 text-blue-400 group-hover:bg-blue-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;shopping-bag&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-vi&quot;&gt;H\u1ec7 th\u1ed1ng E-Shop&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-de hidden&quot;&gt;E-Shop &lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-bi hidden&quot;&gt;E-Shop &lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Order Online&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 4. Online Reservierung --&gt;                &lt;div id=&quot;node-reserv&quot; class=&quot;absolute left-[45px] top-[560px] w-[170px] bg-slate-900\/90 border border-slate-700 hover:border-blue-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;reserv&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-blue-500\/10 p-1.5 rounded-lg border border-blue-500\/20 text-blue-400 group-hover:bg-blue-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;calendar-range&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-vi&quot;&gt;\u0110\u1eb7t b\u00e0n Online&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-de hidden&quot;&gt;Online Reservierung&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-blue-300 truncate lang-bi hidden&quot;&gt;\u0110\u1eb7t b\u00e0n \/ Reservierung&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Real-time table booking&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- --- ZONE 2: CORE POS &amp; BOH --- --&gt;                &lt;!-- 5. POS CORE (Trung t\u00e2m t\u00ednh ti\u1ec1n) - Diamond Center POS --&gt;                &lt;div id=&quot;node-pos&quot; class=&quot;absolute left-[410px] top-[290px] w-[120px] h-[120px] flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 group z-10&quot; onclick=&quot;showDetails(&#x27;pos&#x27;)&quot;&gt;                    &lt;div class=&quot;absolute inset-0 bg-slate-900 border-2 border-emerald-500 rounded-2xl rotate-45 group-hover:bg-emerald-950\/40 transition-colors shadow-lg shadow-emerald-500\/15&quot;&gt;&lt;\/div&gt;                    &lt;div class=&quot;relative z-10 text-center flex flex-col items-center p-2&quot;&gt;                        &lt;i data-lucide=&quot;monitor&quot; class=&quot;w-5 h-5 text-emerald-400 mb-1 animate-pulse&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-xs font-extrabold text-white block select-none&quot;&gt;POS CORE&lt;\/span&gt;                        &lt;span class=&quot;text-[9px] text-emerald-400 font-semibold uppercase tracking-wider mt-0.5&quot;&gt;Central Hub&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 6. Ph\u1ee5c v\u1ee5 (Kellner \/ Kellnerinnen) - Diamond Top --&gt;                &lt;div id=&quot;node-waiter&quot; class=&quot;absolute left-[410px] top-[20px] w-[120px] h-[120px] flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 group z-10&quot; onclick=&quot;showDetails(&#x27;waiter&#x27;)&quot;&gt;                    &lt;div class=&quot;absolute inset-0 bg-slate-900 border-2 border-amber-500 rounded-2xl rotate-45 group-hover:bg-amber-950\/40 transition-colors shadow-lg shadow-amber-500\/10&quot;&gt;&lt;\/div&gt;                    &lt;div class=&quot;relative z-10 text-center flex flex-col items-center p-2&quot;&gt;                        &lt;i data-lucide=&quot;contact&quot; class=&quot;w-5 h-5 text-amber-400 mb-1&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-[11px] font-bold text-white block select-none lang-vi leading-tight&quot;&gt;Nh\u00e2n vi\u00ean&lt;br&gt;Ph\u1ee5c v\u1ee5&lt;\/span&gt;                        &lt;span class=&quot;text-[11px] font-bold text-white block select-none lang-de hidden leading-tight&quot;&gt;Kellner \/&lt;br&gt;Kellnerinnen&lt;\/span&gt;                        &lt;span class=&quot;text-[10px] font-bold text-white block select-none lang-bi hidden leading-tight&quot;&gt;Ph\u1ee5c v\u1ee5 \/&lt;br&gt;Kellner&lt;\/span&gt;                        &lt;span class=&quot;text-[9px] text-amber-400 font-semibold uppercase tracking-wider mt-0.5&quot;&gt;Wait Staff&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 7. S\u01a1 \u0111\u1ed3 b\u00e0n &amp; \u0110\u1eb7t b\u00e0n Offline\/Online --&gt;                &lt;div id=&quot;node-sodobanh&quot; class=&quot;absolute left-[280px] top-[160px] w-[115px] bg-slate-900\/90 border border-slate-700 hover:border-emerald-500 p-2.5 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;table&#x27;)&quot;&gt;                    &lt;div class=&quot;text-center&quot;&gt;                        &lt;div class=&quot;mx-auto w-fit bg-emerald-500\/10 p-1.5 rounded-lg text-emerald-400 group-hover:bg-emerald-500\/20 mb-1&quot;&gt;                            &lt;i data-lucide=&quot;map&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-emerald-300 lang-vi leading-tight&quot;&gt;S\u01a1 \u0111\u1ed3 b\u00e0n&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-emerald-300 lang-de hidden leading-tight&quot;&gt;Tischplan&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-emerald-300 lang-bi hidden leading-tight&quot;&gt;S\u01a1 \u0111\u1ed3 b\u00e0n \/&lt;br&gt;Tischplan&lt;\/h4&gt;                        &lt;p class=&quot;text-[9px] text-slate-500 mt-0.5&quot;&gt;Table Map&lt;\/p&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 8. M\u00e0n h\u00ecnh b\u1ebfp (KDS) --&gt;                &lt;div id=&quot;node-kds&quot; class=&quot;absolute left-[385px] top-[450px] w-[170px] bg-slate-900\/90 border border-slate-700 hover:border-emerald-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;kds&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-emerald-500\/10 p-1.5 rounded-lg border border-emerald-500\/20 text-emerald-400 group-hover:bg-emerald-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;chef-hat&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-emerald-300 truncate lang-vi&quot;&gt;M\u00e0n h\u00ecnh B\u1ebfp&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-emerald-300 truncate lang-de hidden&quot;&gt;KDS Monitor&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-emerald-300 truncate lang-bi hidden&quot;&gt;M\u00e0n h\u00ecnh B\u1ebfp \/ KDS&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Kitchen Display System&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 9. Nh\u00e0 b\u1ebfp (K\u00fcche) - Diamond Bottom Core --&gt;                &lt;div id=&quot;node-kuche&quot; class=&quot;absolute left-[410px] top-[540px] w-[120px] h-[120px] flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 group z-10&quot; onclick=&quot;showDetails(&#x27;kuche&#x27;)&quot;&gt;                    &lt;div class=&quot;absolute inset-0 bg-slate-900 border-2 border-amber-500 rounded-2xl rotate-45 group-hover:bg-amber-950\/40 transition-colors shadow-lg shadow-amber-500\/10&quot;&gt;&lt;\/div&gt;                    &lt;div class=&quot;relative z-10 text-center flex flex-col items-center p-2&quot;&gt;                        &lt;i data-lucide=&quot;utensils-crossed&quot; class=&quot;w-5 h-5 text-amber-400 mb-1&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-vi&quot;&gt;Nh\u00e0 B\u1ebfp&lt;\/span&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-de hidden&quot;&gt;K\u00fcche&lt;\/span&gt;                        &lt;span class=&quot;text-[10px] font-bold text-white block select-none lang-bi hidden&quot;&gt;B\u1ebfp \/ K\u00fcche&lt;\/span&gt;                        &lt;span class=&quot;text-[9px] text-amber-400 font-semibold uppercase tracking-wider mt-0.5&quot;&gt;Kitchen Operation&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 10. Qu\u1ea3n l\u00fd Kho --&gt;                &lt;div id=&quot;node-kho&quot; class=&quot;absolute left-[580px] top-[560px] w-[115px] bg-slate-900\/90 border border-slate-700 hover:border-purple-500 p-2.5 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;kho&#x27;)&quot;&gt;                    &lt;div class=&quot;text-center&quot;&gt;                        &lt;div class=&quot;mx-auto w-fit bg-purple-500\/10 p-1.5 rounded-lg text-purple-400 group-hover:bg-purple-500\/20 mb-1&quot;&gt;                            &lt;i data-lucide=&quot;boxes&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-vi leading-tight&quot;&gt;Qu\u1ea3n l\u00fd kho&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-de hidden leading-tight&quot;&gt;Warenwirtschaft&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-bi hidden leading-tight&quot;&gt;Qu\u1ea3n l\u00fd kho&lt;\/h4&gt;                        &lt;p class=&quot;text-[9px] text-slate-500 mt-0.5&quot;&gt;Inventory&lt;\/p&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- --- ZONE 3: MANAGEMENT &amp; FISCAL COMPLIANCE --- --&gt;                &lt;!-- 11. Ch\u1ee7 \/ Qu\u1ea3n l\u00fd (Chef\/Chefin) - Diamond Center Right --&gt;                &lt;div id=&quot;node-chef&quot; class=&quot;absolute left-[750px] top-[290px] w-[120px] h-[120px] flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-105 group z-10&quot; onclick=&quot;showDetails(&#x27;chef&#x27;)&quot;&gt;                    &lt;div class=&quot;absolute inset-0 bg-slate-900 border-2 border-amber-500 rounded-2xl rotate-45 group-hover:bg-amber-950\/40 transition-colors shadow-lg shadow-amber-500\/10&quot;&gt;&lt;\/div&gt;                    &lt;div class=&quot;relative z-10 text-center flex flex-col items-center p-2&quot;&gt;                        &lt;i data-lucide=&quot;crown&quot; class=&quot;w-5 h-5 text-amber-400 mb-1&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-vi&quot;&gt;Ch\u1ee7 nh\u00e0 h\u00e0ng&lt;\/span&gt;                        &lt;span class=&quot;text-xs font-bold text-white block select-none lang-de hidden&quot;&gt;Chef \/ Chefin&lt;\/span&gt;                        &lt;span class=&quot;text-[10px] font-bold text-white block select-none lang-bi hidden&quot;&gt;Ch\u1ee7 \/ Chef&lt;\/span&gt;                        &lt;span class=&quot;text-[9px] text-amber-400 font-semibold uppercase tracking-wider mt-0.5&quot;&gt;Management&lt;\/span&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 12. B\u00e1o c\u00e1o &amp; \u0110i\u1ec1u h\u00e0nh t\u1eeb xa --&gt;                &lt;div id=&quot;node-reports&quot; class=&quot;absolute left-[715px] top-[160px] w-[190px] bg-slate-900\/90 border border-slate-700 hover:border-purple-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;reports&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-purple-500\/10 p-1.5 rounded-lg border border-purple-500\/20 text-purple-400 group-hover:bg-purple-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;trending-up&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-vi&quot;&gt;B\u00e1o c\u00e1o &amp; \u0110i\u1ec1u h\u00e0nh&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-de hidden&quot;&gt;Remote Dashboard&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-bi hidden&quot;&gt;H\u1ec7 th\u1ed1ng B\u00e1o c\u00e1o&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Realtime Cloud Analytics&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 13. Nh\u00e2n s\u1ef1 --&gt;                &lt;div id=&quot;node-hr&quot; class=&quot;absolute left-[580px] top-[160px] w-[115px] bg-slate-900\/90 border border-slate-700 hover:border-purple-500 p-2.5 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;hr&#x27;)&quot;&gt;                    &lt;div class=&quot;text-center&quot;&gt;                        &lt;div class=&quot;mx-auto w-fit bg-purple-500\/10 p-1.5 rounded-lg text-purple-400 group-hover:bg-purple-500\/20 mb-1&quot;&gt;                            &lt;i data-lucide=&quot;users-round&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-vi leading-tight&quot;&gt;Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-de hidden leading-tight&quot;&gt;Personalwesen&lt;\/h4&gt;                        &lt;h4 class=&quot;text-[11px] font-bold text-slate-200 group-hover:text-purple-300 lang-bi hidden leading-tight&quot;&gt;Nh\u00e2n s\u1ef1&lt;\/h4&gt;                        &lt;p class=&quot;text-[9px] text-slate-500 mt-0.5&quot;&gt;HR&lt;\/p&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 14. T\u00edch h\u1ee3p k\u1ebf to\u00e1n (DATEV \/ GoBD) --&gt;                &lt;div id=&quot;node-datev&quot; class=&quot;absolute left-[715px] top-[450px] w-[190px] bg-slate-900\/90 border border-slate-700 hover:border-purple-500 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;datev&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-purple-500\/10 p-1.5 rounded-lg border border-purple-500\/20 text-purple-400 group-hover:bg-purple-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;file-spreadsheet&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-vi&quot;&gt;T\u00edch h\u1ee3p K\u1ebf to\u00e1n (DATEV)&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-de hidden&quot;&gt;DATEV-Export&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-200 group-hover:text-purple-300 truncate lang-bi hidden&quot;&gt;K\u1ebf to\u00e1n DATEV&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-slate-500 truncate&quot;&gt;Tax advisor auto-export&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 15. Ph\u00e1p l\u00fd \u0110\u1ee9c (Ph\u00e1p l\u00fd ch\u00ednh) --&gt;                &lt;div id=&quot;node-phaply&quot; class=&quot;absolute left-[715px] top-[560px] w-[190px] bg-slate-900\/90 border-2 border-red-500\/50 hover:border-red-400 p-3 rounded-xl cursor-pointer transition-all hover:-translate-y-0.5 group z-10&quot; onclick=&quot;showDetails(&#x27;phaply&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2.5&quot;&gt;                        &lt;div class=&quot;bg-red-500\/10 p-1.5 rounded-lg border border-red-500\/20 text-red-400 group-hover:bg-red-500\/20&quot;&gt;                            &lt;i data-lucide=&quot;gavel&quot; class=&quot;w-4 h-4&quot;&gt;&lt;\/i&gt;                        &lt;\/div&gt;                        &lt;div class=&quot;flex-1 min-w-0&quot;&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-100 group-hover:text-red-300 truncate lang-vi&quot;&gt;Tu\u00e2n th\u1ee7 Ph\u00e1p l\u00fd \u0110\u1ee9c&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-100 group-hover:text-red-300 truncate lang-de hidden&quot;&gt;Deutsches Finanzrecht&lt;\/h4&gt;                            &lt;h4 class=&quot;text-xs font-bold text-slate-100 group-hover:text-red-300 truncate lang-bi hidden&quot;&gt;Ph\u00e1p l\u00fd \u0110\u1ee9c \/ Gesetzlich&lt;\/h4&gt;                            &lt;p class=&quot;text-[9px] text-red-400\/90 font-medium truncate&quot;&gt;KassenSichV &amp; TSE Compliance&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- 16 -&gt; 19. SUB-NODES PH\u00c1P L\u00dd \u0110\u1ee8C --&gt;                &lt;!-- TSE --&gt;                &lt;div id=&quot;node-tse&quot; class=&quot;absolute left-[920px] top-[335px] w-[140px] bg-slate-950\/90 border border-slate-800 hover:border-red-500 p-2 rounded-lg cursor-pointer transition-all hover:scale-102 z-10&quot; onclick=&quot;showDetails(&#x27;tse&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;                        &lt;span class=&quot;w-2 h-2 rounded-full bg-red-500&quot;&gt;&lt;\/span&gt;                        &lt;div&gt;                            &lt;h5 class=&quot;text-[11px] font-bold text-slate-200&quot;&gt;TSE Cloud\/HW&lt;\/h5&gt;                            &lt;p class=&quot;text-[8px] text-slate-500&quot;&gt;K\u00fd s\u1ed1 b\u1ea3o m\u1eadt&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- KassenSichV --&gt;                &lt;div id=&quot;node-kassensichv&quot; class=&quot;absolute left-[920px] top-[415px] w-[140px] bg-slate-950\/90 border border-slate-800 hover:border-red-500 p-2 rounded-lg cursor-pointer transition-all hover:scale-102 z-10&quot; onclick=&quot;showDetails(&#x27;kassensichv&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;                        &lt;span class=&quot;w-2 h-2 rounded-full bg-red-500&quot;&gt;&lt;\/span&gt;                        &lt;div&gt;                            &lt;h5 class=&quot;text-[11px] font-bold text-slate-200&quot;&gt;KassenSichV&lt;\/h5&gt;                            &lt;p class=&quot;text-[8px] text-slate-500&quot;&gt;Lu\u1eadt b\u1ea3o m\u1eadt POS&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- DSFinV-K --&gt;                &lt;div id=&quot;node-dsfinvk&quot; class=&quot;absolute left-[920px] top-[495px] w-[140px] bg-slate-950\/90 border border-slate-800 hover:border-red-500 p-2 rounded-lg cursor-pointer transition-all hover:scale-102 z-10&quot; onclick=&quot;showDetails(&#x27;dsfinvk&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;                        &lt;span class=&quot;w-2 h-2 rounded-full bg-red-500&quot;&gt;&lt;\/span&gt;                        &lt;div&gt;                            &lt;h5 class=&quot;text-[11px] font-bold text-slate-200&quot;&gt;DSFinV-K&lt;\/h5&gt;                            &lt;p class=&quot;text-[8px] text-slate-500&quot;&gt;Chu\u1ea9n xu\u1ea5t d\u1eef li\u1ec7u thu\u1ebf&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;                &lt;!-- Kassennachschau --&gt;                &lt;div id=&quot;node-kassennachschau&quot; class=&quot;absolute left-[920px] top-[575px] w-[140px] bg-slate-950\/90 border border-slate-800 hover:border-red-500 p-2 rounded-lg cursor-pointer transition-all hover:scale-102 z-10&quot; onclick=&quot;showDetails(&#x27;kassennachschau&#x27;)&quot;&gt;                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;                        &lt;span class=&quot;w-2 h-2 rounded-full bg-red-500&quot;&gt;&lt;\/span&gt;                        &lt;div&gt;                            &lt;h5 class=&quot;text-[11px] font-bold text-slate-200&quot;&gt;Kassennachschau&lt;\/h5&gt;                            &lt;p class=&quot;text-[8px] text-slate-500&quot;&gt;Thanh tra s\u1ed5 s\u00e1ch \u0111\u1ed9t xu\u1ea5t&lt;\/p&gt;                        &lt;\/div&gt;                    &lt;\/div&gt;                &lt;\/div&gt;            &lt;\/div&gt;            &lt;!-- FOOTER TI\u1ec6N \u00cdCH D\u01af\u1edaI --&gt;            &lt;div class=&quot;w-full max-w-[1100px] mt-6 bg-slate-900\/60 border border-slate-800 p-4 rounded-xl flex flex-wrap gap-4 items-center justify-between z-10 relative&quot;&gt;                &lt;div class=&quot;text-xs text-slate-400 font-medium&quot;&gt;Ti\u1ec7n \u00edch t\u00edch h\u1ee3p:&lt;\/div&gt;                &lt;div class=&quot;flex flex-wrap gap-3&quot;&gt;                    &lt;span class=&quot;text-xs bg-slate-950\/80 px-3 py-1.5 rounded-lg border border-slate-800\/80 flex items-center gap-1.5&quot; onclick=&quot;showDetails(&#x27;gutschein&#x27;)&quot;&gt;                        &lt;i data-lucide=&quot;ticket&quot; class=&quot;w-3.5 h-3.5 text-amber-400&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;lang-vi&quot;&gt;Gutschein (Voucher)&lt;\/span&gt;                        &lt;span class=&quot;lang-de hidden&quot;&gt;Gutschein (Gutscheine)&lt;\/span&gt;                        &lt;span class=&quot;lang-bi hidden&quot;&gt;Gutschein (Voucher)&lt;\/span&gt;                    &lt;\/span&gt;                    &lt;span class=&quot;text-xs bg-slate-950\/80 px-3 py-1.5 rounded-lg border border-slate-800\/80 flex items-center gap-1.5&quot; onclick=&quot;showDetails(&#x27;loyalty&#x27;)&quot;&gt;                        &lt;i data-lucide=&quot;id-card&quot; class=&quot;w-3.5 h-3.5 text-blue-400&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;lang-vi&quot;&gt;Th\u1ebb th\u00e0nh vi\u00ean&lt;\/span&gt;                        &lt;span class=&quot;lang-de hidden&quot;&gt;Kundenkarte (Loyalty)&lt;\/span&gt;                        &lt;span class=&quot;lang-bi hidden&quot;&gt;Th\u1ebb th\u00e0nh vi\u00ean \/ Loyalty&lt;\/span&gt;                    &lt;\/span&gt;                    &lt;span class=&quot;text-xs bg-slate-950\/80 px-3 py-1.5 rounded-lg border border-slate-800\/80 flex items-center gap-1.5&quot; onclick=&quot;showDetails(&#x27;bewirtung&#x27;)&quot;&gt;                        &lt;i data-lucide=&quot;receipt&quot; class=&quot;w-3.5 h-3.5 text-emerald-400&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;lang-vi&quot;&gt;Bewirtungsbeleg&lt;\/span&gt;                        &lt;span class=&quot;lang-de hidden&quot;&gt;Bewirtungsbeleg&lt;\/span&gt;                        &lt;span class=&quot;lang-bi hidden&quot;&gt;Bewirtungsbeleg&lt;\/span&gt;                    &lt;\/span&gt;                    &lt;span class=&quot;text-xs bg-slate-950\/80 px-3 py-1.5 rounded-lg border border-slate-800\/80 flex items-center gap-1.5&quot; onclick=&quot;showDetails(&#x27;offline&#x27;)&quot;&gt;                        &lt;i data-lucide=&quot;wifi-off&quot; class=&quot;w-3.5 h-3.5 text-rose-400&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;lang-vi&quot;&gt;Ch\u1ebf \u0111\u1ed9 Offline&lt;\/span&gt;                        &lt;span class=&quot;lang-de hidden&quot;&gt;Offline-Modus&lt;\/span&gt;                        &lt;span class=&quot;lang-bi hidden&quot;&gt;Offline-Modus&lt;\/span&gt;                    &lt;\/span&gt;                    &lt;span class=&quot;text-xs bg-emerald-500\/10 px-3 py-1.5 rounded-lg border border-emerald-500\/20 text-emerald-400 flex items-center gap-1.5&quot; onclick=&quot;showDetails(&#x27;support&#x27;)&quot;&gt;                        &lt;i data-lucide=&quot;phone-call&quot; class=&quot;w-3.5 h-3.5 animate-bounce&quot;&gt;&lt;\/i&gt;                        &lt;span class=&quot;font-bold lang-vi&quot;&gt;H\u1ed7 tr\u1ee3 24\/7&lt;\/span&gt;                        &lt;span class=&quot;font-bold lang-de hidden&quot;&gt;Support 24\/7&lt;\/span&gt;                        &lt;span class=&quot;font-bold lang-bi hidden&quot;&gt;Support 24\/7&lt;\/span&gt;                    &lt;\/span&gt;                &lt;\/div&gt;            &lt;\/div&gt;        &lt;\/div&gt;    &lt;\/div&gt;    &lt;!-- Script T\u01b0\u01a1ng t\u00e1c &amp; D\u1eef li\u1ec7u chi ti\u1ebft --&gt;    &lt;script&gt;        \/\/ Kh\u1edfi t\u1ea1o icons Lucide        lucide.createIcons();        \/\/ Database n\u1ed9i dung chi ti\u1ebft c\u1ee7a t\u1eebng Node (Bilingual)        const nodeDatabase = {            customer: {                badge: &#x27;V\u1ecb tr\u00ed&#x27;, color: &#x27;bg-blue-500\/20 text-blue-400&#x27;, tech: &#x27;Actor: Guest&#x27;,                title_vi: &#x27;Kh\u00e1ch h\u00e0ng (Kunden)&#x27;,                title_de: &#x27;Der Gast (Kunden)&#x27;,                desc_vi: &#x27;Trung t\u00e2m c\u1ee7a m\u1ecdi tr\u1ea3i nghi\u1ec7m d\u1ecbch v\u1ee5. Kh\u00e1ch h\u00e0ng ti\u1ebfp c\u1eadn nh\u00e0 h\u00e0ng th\u00f4ng qua c\u00e1c k\u00eanh s\u1ed1 h\u00f3a: g\u1ecdi m\u00f3n t\u1ea1i b\u00e0n b\u1eb1ng QR, \u0111\u1eb7t h\u00e0ng tr\u01b0\u1edbc qua E-shop ho\u1eb7c \u0111\u1eb7t b\u00e0n tr\u1ef1c tuy\u1ebfn tr\u01b0\u1edbc khi \u0111\u1ebfn.&#x27;,                desc_de: &#x27;Zentrum aller Serviceerlebnisse. G\u00e4ste interagieren \u00fcber digitale Kan\u00e4le: QR-Bestellungen am Tisch, Vorbestellungen im E-Shop oder Online-Reservierungen.&#x27;            },            qr: {                badge: &#x27;FOH Channel&#x27;, color: &#x27;bg-blue-500\/20 text-blue-400&#x27;, tech: &#x27;Web\/App BYOD&#x27;,                title_vi: &#x27;G\u1ecdi m\u00f3n qua QR &amp; Di \u0111\u1ed9ng&#x27;,                title_de: &#x27;QR-Code &amp; Mobile Bestellung&#x27;,                desc_vi: &#x27;Kh\u00e1ch h\u00e0ng t\u1ef1 qu\u00e9t m\u00e3 QR t\u1ea1i b\u00e0n \u0111\u1ec3 xem th\u1ef1c \u0111\u01a1n th\u1ef1c t\u1ebf (bao g\u1ed3m Happy Hour, Sonderw\u00fcnsche - m\u00f3n th\u00eam\/y\u00eau c\u1ea7u \u0111\u1eb7c bi\u1ec7t) v\u00e0 \u0111\u1eb7t m\u00f3n. Order l\u1eadp t\u1ee9c \u0111\u1ed3ng b\u1ed9 th\u1eb3ng v\u1ec1 POS trung t\u00e2m m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ee5c v\u1ee5 b\u1ea5m m\u00e1y.&#x27;,                desc_de: &#x27;G\u00e4ste scannen den QR-Code am Tisch, um das Men\u00fc einzusehen (inkl. Sonderw\u00fcnsche) und selbst zu bestellen. Bestellungen werden sofort mit della Hauptkasse synchronisiert.&#x27;            },            eshop: {                badge: &#x27;FOH Channel&#x27;, color: &#x27;bg-blue-500\/20 text-blue-400&#x27;, tech: &#x27;Webshop Integration&#x27;,                title_vi: &#x27;H\u1ec7 th\u1ed1ng E-Shop &amp; Delivery&#x27;,                title_de: &#x27;E-Shop &amp; Lieferservice&#x27;,                desc_vi: &#x27;K\u00eanh \u0111\u1eb7t m\u00f3n tr\u1ef1c tuy\u1ebfn tr\u1ef1c ti\u1ebfp t\u1eeb Website nh\u00e0 h\u00e0ng d\u00e0nh cho kh\u00e1ch mua mang \u0111i (Takeaway) ho\u1eb7c \u0111\u1eb7t giao t\u1eadn nh\u00e0. Gi\u1ea3m chi\u1ebft kh\u1ea5u t\u1eeb b\u00ean th\u1ee9 ba (nh\u01b0 Lieferando) v\u00e0 t\u1ef1 \u0111\u1ed9ng \u0111\u1ed3ng b\u1ed9 doanh thu v\u00e0o POS.&#x27;,                desc_de: &#x27;Online-Bestellkanal direkt auf der Restaurant-Website f\u00fcr Au\u00dferhausverkauf (Takeaway) oder Lieferung. Vermeidet teure Drittanbieter-Geb\u00fchren.&#x27;            },            reserv: {                badge: &#x27;FOH Channel&#x27;, color: &#x27;bg-blue-500\/20 text-blue-400&#x27;, tech: &#x27;Online Booking widget&#x27;,                title_vi: &#x27;\u0110\u1eb7t b\u00e0n Tr\u1ef1c tuy\u1ebfn&#x27;,                title_de: &#x27;Online Reservierungs-Widget&#x27;,                desc_vi: &#x27;Kh\u00e1ch \u0111\u1eb7t b\u00e0n tr\u01b0\u1edbc qua m\u1ea1ng. L\u1ecbch \u0111\u1eb7t \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng ki\u1ec3m tra v\u00e0 kh\u00f3a v\u1ecb tr\u00ed tr\u00ean S\u01a1 \u0111\u1ed3 b\u00e0n th\u1eddi gian th\u1ef1c (Table Map) c\u1ee7a h\u1ec7 th\u1ed1ng POS, t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t l\u1ea5p \u0111\u1ea7y b\u00e0n c\u1ee7a nh\u00e0 h\u00e0ng.&#x27;,                desc_de: &#x27;Erm\u00f6glicht Online-Tischreservierungen in Echtzeit. Buchungen werden direkt in den digitalen Tischplan des Kassensystems \u00fcbertragen.&#x27;            },            pos: {                badge: &#x27;Core Platform&#x27;, color: &#x27;bg-emerald-500\/20 text-emerald-400&#x27;, tech: &#x27;Master POS Terminal&#x27;,                title_vi: &#x27;POS CORE (M\u00e1y t\u00ednh ti\u1ec1n trung t\u00e2m)&#x27;,                title_de: &#x27;Kassensystem Haupt-Terminal (POS)&#x27;,                desc_vi: &#x27;Tr\u00e1i tim c\u1ee7a to\u00e0n b\u1ed9 nh\u00e0 h\u00e0ng. POS Core nh\u1eadn m\u1ecdi order t\u1eeb FOH (QR, E-shop) v\u00e0 x\u1eed l\u00fd thanh to\u00e1n t\u1eeb ph\u1ee5c v\u1ee5, t\u1ef1 \u0111\u1ed9ng c\u1eadp nh\u1eadt s\u01a1 \u0111\u1ed3 b\u00e0n, b\u1eafn m\u00f3n xu\u1ed1ng b\u1ebfp (KDS), tr\u1eeb \u0111\u1ecbnh l\u01b0\u1ee3ng nguy\u00ean li\u1ec7u kho, v\u00e0 ghi nh\u1eadn d\u1eef li\u1ec7u thu\u1ebf.&#x27;,                desc_de: &#x27;Das Herzst\u00fcck des Betriebs. Verarbeitet alle Transaktionen, synchronisiert FOH-Kan\u00e4le, steuert den K\u00fcchendrucker\/KDS und speichert finanzrelevante Daten.&#x27;            },            waiter: {                badge: &#x27;V\u1ecb tr\u00ed&#x27;, color: &#x27;bg-amber-500\/20 text-amber-400&#x27;, tech: &#x27;Staff Role&#x27;,                title_vi: &#x27;Ph\u1ee5c v\u1ee5 (Kellner\/Kellnerinnen)&#x27;,                title_de: &#x27;Servicepersonal (Kellner\/innen)&#x27;,                desc_vi: &#x27;Nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 nh\u1eadn ca tr\u1ef1c v\u00e0 \u0111i\u1ec1u ph\u1ed1i l\u1ecbch l\u00e0m vi\u1ec7c \u0111\u01b0\u1ee3c ph\u00e2n c\u00f4ng t\u1eeb m\u00f4-\u0111un Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1 (HR), nh\u1eadn t\u00edn hi\u1ec7u b\u00e1o m\u00f3n t\u1eeb b\u1ebfp \u0111\u1ec3 ph\u1ee5c v\u1ee5 kh\u00e1ch, in h\u00f3a \u0111\u01a1n t\u1ea1m t\u00ednh v\u00e0 thanh to\u00e1n.&#x27;,                desc_de: &#x27;Das Servicepersonal erh\u00e4lt Dienstpl\u00e4ne von der HR-Abteilung, wird \u00fcber fertige Speisen aus der K\u00fcche benachrichtigt und wickelt die Bezahlung am Gast ab.&#x27;            },            table: {                badge: &#x27;BOH Operational&#x27;, color: &#x27;bg-emerald-500\/20 text-emerald-400&#x27;, tech: &#x27;Interactive Floorplan&#x27;,                title_vi: &#x27;S\u01a1 \u0111\u1ed3 b\u00e0n t\u01b0\u01a1ng t\u00e1c&#x27;,                title_de: &#x27;Visueller Tischplan&#x27;,                desc_vi: &#x27;Giao di\u1ec7n tr\u1ef1c quan m\u00f4 ph\u1ecfng m\u1eb7t b\u1eb1ng nh\u00e0 h\u00e0ng. Hi\u1ec3n th\u1ecb tr\u1ea1ng th\u00e1i b\u00e0n b\u1eb1ng m\u00e0u s\u1eafc: B\u00e0n tr\u1ed1ng (Xanh), \u0110ang c\u00f3 kh\u00e1ch (\u0110\u1ecf), \u0110ang ch\u1edd m\u00f3n (V\u00e0ng), Gi\u00fap nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 qu\u1ea3n l\u00fd hi\u1ec7u qu\u1ea3 h\u01a1n.&#x27;,                desc_de: &#x27;Grafische Oberfl\u00e4che des Restaurant-Layouts. Zeigt den aktuellen Tisch-Status (Frei, Besetzt, Rechnung angefordert) in Echtzeit.&#x27;            },            kds: {                badge: &#x27;BOH Operational&#x27;, color: &#x27;bg-emerald-500\/20 text-emerald-400&#x27;, tech: &#x27;Kitchen Display System&#x27;,                title_vi: &#x27;M\u00e0n h\u00ecnh ch\u1ebf bi\u1ebfn \u0111i\u1ec7n t\u1eed (KDS)&#x27;,                title_de: &#x27;K\u00fcchenmonitor (KDS)&#x27;,                desc_vi: &#x27;Thay th\u1ebf ho\u00e0n to\u00e0n h\u00f3a \u0111\u01a1n gi\u1ea5y truy\u1ec1n th\u1ed1ng d\u1ec5 th\u1ea5t l\u1ea1c. M\u00e0n h\u00ecnh b\u1ebfp hi\u1ec3n th\u1ecb danh s\u00e1ch m\u00f3n c\u1ea7n l\u00e0m theo th\u1eddi gian th\u1ef1c, t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp theo th\u1ee9 t\u1ef1 \u0111\u1eb7t ho\u1eb7c th\u1eddi gian ch\u1ebf bi\u1ebfn, t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 ra m\u00f3n.&#x27;,                desc_de: &#x27;Ersetzt den klassischen K\u00fcchendrucker. Zeigt Bestellungen \u00fcbersichtlich an, berechnet Zubereitungszeiten und vermeidet Zettelwirtschaft.&#x27;            },            kuche: {                badge: &#x27;V\u1ecb tr\u00ed&#x27;, color: &#x27;bg-amber-500\/20 text-amber-400&#x27;, tech: &#x27;Kitchen Staff&#x27;,                title_vi: &#x27;Nh\u00e0 b\u1ebfp (K\u00fcche)&#x27;,                title_de: &#x27;K\u00fcchenteam (K\u00fcche)&#x27;,                desc_vi: &#x27;Khu v\u1ef1c ch\u1ebf bi\u1ebfn ch\u00ednh. Nh\u1eadn order t\u1eeb h\u1ec7 th\u1ed1ng KDS, khi ch\u1ebf bi\u1ebfn ho\u00e0n th\u00e0nh s\u1ebd thao t\u00e1c x\u00e1c nh\u1eadn \u0111\u1ec3 h\u1ec7 th\u1ed1ng l\u1eadp t\u1ee9c b\u1eafn t\u00edn hi\u1ec7u th\u00f4ng b\u00e1o \u0111\u1ea9y \u0111\u1ebfn \u0111\u1ed3ng h\u1ed3\/thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u1ee7a Nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 \u0111\u1ebfn nh\u1eadn m\u00f3n.&#x27;,                desc_de: &#x27;Ort der Speisenzubereitung. Meldet fertiggestellte Gerichte per Knopfdruck an die mobilen Ger\u00e4te des Servicepersonals.&#x27;            },            kho: {                badge: &#x27;Management Office&#x27;, color: &#x27;bg-purple-500\/20 text-purple-400&#x27;, tech: &#x27;Stock Management&#x27;,                title_vi: &#x27;Qu\u1ea3n l\u00fd kho &amp; \u0110\u1ecbnh l\u01b0\u1ee3ng m\u00f3n \u0103n&#x27;,                title_de: &#x27;Warenwirtschaft &amp; Inventur&#x27;,                desc_vi: &#x27;H\u1ec7 th\u1ed1ng t\u1ef1 \u0111\u1ed9ng tr\u1eeb nguy\u00ean li\u1ec7u trong kho (th\u1ecbt, rau, bia...) d\u1ef1a tr\u00ean c\u00f4ng th\u1ee9c \u0111\u1ecbnh l\u01b0\u1ee3ng c\u1ee7a m\u00f3n \u0103n \u0111\u00e3 b\u00e1n ra t\u1ea1i POS Core. \u0110\u1ed3ng th\u1eddi li\u00ean k\u1ebft tr\u1ef1c ti\u1ebfp v\u1edbi Nh\u00e0 b\u1ebfp \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng h\u00f3a \u0111\u1ecbnh l\u01b0\u1ee3ng nguy\u00ean li\u1ec7u th\u00f4 v\u00e0 nh\u1eadn ch\u1ec9 th\u1ecb \u0111i\u1ec1u ph\u1ed1i t\u1eeb Ch\u1ee7 nh\u00e0 h\u00e0ng.&#x27;,                desc_de: &#x27;Echtzeit-Lagerbestandskontrolle. Zieht Zutaten automatisch ab, sobald ein Gericht an der Kasse gebongt wird. Direkt mit der K\u00fcche und dem Management networked.&#x27;            },            chef: {                badge: &#x27;V\u1ecb tr\u00ed&#x27;, color: &#x27;bg-amber-500\/20 text-amber-400&#x27;, tech: &#x27;Management Role&#x27;,                title_vi: &#x27;Ch\u1ee7 \/ Qu\u1ea3n l\u00fd (Chef\/Chefin)&#x27;,                title_de: &#x27;Inhaber (Chef\/Chefin)&#x27;,                desc_vi: &#x27;Ng\u01b0\u1eddi \u0111i\u1ec1u h\u00e0nh qu\u1ea3n tr\u1ecb c\u1ea5p cao nh\u1ea5t. Tr\u1ef1c ti\u1ebfp ph\u00ea duy\u1ec7t c\u00e1c k\u1ebf ho\u1ea1ch nh\u00e2n s\u1ef1 v\u00e0 l\u1ecbch ph\u00e2n ca th\u00f4ng qua h\u1ec7 th\u1ed1ng Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1 (HR), qu\u1ea3n tr\u1ecb h\u1ec7 th\u1ed1ng v\u00e0 ki\u1ec3m tra c\u00e1c s\u1ed1 li\u1ec7u t\u00e0i ch\u00ednh, qu\u1ea3n l\u00fd kho h\u00e0ng.&#x27;,                desc_de: &#x27;Der Administrator. Genehmigt Dienstpl\u00e4ne \u00fcber das HR-Modul, \u00fcberwacht Live-Ums\u00e4tze, Lagerbest\u00e4nde und exportiert Finanzberichte.&#x27;            },            reports: {                badge: &#x27;Management Office&#x27;, color: &#x27;bg-purple-500\/20 text-purple-400&#x27;, tech: &#x27;Cloud Backoffice&#x27;,                title_vi: &#x27;H\u1ec7 th\u1ed1ng B\u00e1o c\u00e1o &amp; \u0110i\u1ec1u h\u00e0nh t\u1eeb xa&#x27;,                title_de: &#x27;Live-Berichte &amp; Cloud Dashboard&#x27;,                desc_vi: &#x27;\u1ee8ng d\u1ee5ng di \u0111\u1ed9ng ho\u1eb7c c\u1ed5ng Web gi\u00fap ch\u1ee7 nh\u00e0 h\u00e0ng xem chi ti\u1ebft bi\u1ec3u \u0111\u1ed3 doanh thu, s\u1ed1 l\u01b0\u1ee3ng h\u00f3a \u0111\u01a1n, l\u01b0\u1ee3ng kh\u00e1ch, m\u00f3n \u0103n b\u00e1n ch\u1ea1y nh\u1ea5t t\u1ea1i m\u1ecdi th\u1eddi \u0111i\u1ec3m t\u1eeb xa m\u00e0 kh\u00f4ng c\u1ea7n c\u00f3 m\u1eb7t t\u1ea1i qu\u00e1n.&#x27;,                desc_de: &#x27;Erm\u00f6glicht den Fernzugriff auf alle Kennzahlen (Umsatz, Personalstunden, Renner-Penner-Listen) per Smartphone oder PC.&#x27;            },            hr: {                badge: &#x27;Management Office&#x27;, color: &#x27;bg-purple-500\/20 text-purple-400&#x27;, tech: &#x27;HR &amp; Shift Scheduling&#x27;,                title_vi: &#x27;Qu\u1ea3n l\u00fd Nh\u00e2n s\u1ef1 &amp; Ch\u1ea5m c\u00f4ng&#x27;,                title_de: &#x27;Personalverwaltung &amp; Zeiterfassung&#x27;,                desc_vi: &#x27;C\u1ea7u n\u1ed1i \u0111i\u1ec1u h\u00e0nh v\u00e0 ph\u00e2n ca tr\u1ef1c ti\u1ebfp t\u1eeb Ch\u1ee7 nh\u00e0 h\u00e0ng (Chef) xu\u1ed1ng \u0111\u1ed9i ng\u0169 Nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 (Kellner). H\u1ed7 tr\u1ee3 ch\u1ea5m c\u00f4ng check-in\/out tr\u00ean m\u00e1y POS, qu\u1ea3n tr\u1ecb gi\u1edd c\u00f4ng v\u00e0 l\u1eadp l\u1ecbch bi\u1ec3u th\u00f4ng minh.&#x27;,                desc_de: &#x27;Die Schnittstelle f\u00fcr Personalplanung zwischen Inhaber (Chef) und Servicekr\u00e4ften (Kellner). Unterst\u00fctzt Zeiterfassung direkt an der Kasse und optimiert Dienstpl\u00e4ne.&#x27;            },            datev: {                badge: &#x27;Management Office&#x27;, color: &#x27;bg-purple-500\/20 text-purple-400&#x27;, tech: &#x27;DATEV Format Export&#x27;,                title_vi: &#x27;T\u00edch h\u1ee3p K\u1ebf to\u00e1n (DATEV \/ GoBD)&#x27;,                title_de: &#x27;DATEV-Schnittstelle &amp; GoBD&#x27;,                desc_vi: &#x27;T\u1ef1 \u0111\u1ed9ng t\u1ed5ng h\u1ee3p doanh thu, ph\u00e2n lo\u1ea1i thu\u1ebf su\u1ea5t (7%, 19%) v\u00e0 xu\u1ea5t file chu\u1ea9n DATEV \u0111\u1ec3 g\u1eedi tr\u1ef1c ti\u1ebfp cho v\u0103n ph\u00f2ng k\u1ebf to\u00e1n thu\u1ebf t\u1ea1i \u0110\u1ee9c, gi\u1ea3m thi\u1ec3u chi ph\u00ed nh\u1eadp tay.&#x27;,                desc_de: &#x27;Reibungsloser Datenexport f\u00fcr den Steuerberater. Entspricht den strengen Richtlinien c\u1ee7a GoBD.&#x27;            },            phaply: {                badge: &#x27;Fiscal Compliance&#x27;, color: &#x27;bg-red-500\/20 text-red-400&#x27;, tech: &#x27;German Fiscal Standard&#x27;,                title_vi: &#x27;B\u1ed9 gi\u1ea3i ph\u00e1p Ph\u00e1p l\u00fd \u0110\u1ee9c kh\u00e9p k\u00edn&#x27;,                title_de: &#x27;Gesetzliche Konformit\u00e4t (Finanzamt)&#x27;,                desc_vi: &#x27;H\u1ec7 th\u1ed1ng POS cam k\u1ebft tu\u00e2n th\u1ee7 100% lu\u1eadt thu\u1ebf nh\u00e0 h\u00e0ng kh\u1eaft khe t\u1ea1i \u0110\u1ee9c, \u0111\u01b0\u1ee3c b\u1ea3o v\u1ec7 t\u00edch h\u1ee3p b\u1eb1ng ph\u1ea7n c\u1ee9ng\/ph\u1ea7n m\u1ec1m ch\u00ednh h\u00e3ng, s\u1eb5n s\u00e0ng cho c\u00e1c \u0111\u1ee3t thanh tra t\u00e0i ch\u00ednh b\u1ea5t ng\u1edd.&#x27;,                desc_de: &#x27;Garantiert absolute Rechtssicherheit f\u00fcr deutsche Betriebe nach den Vorgaben von KassenSichV und GoBD.&#x27;            },            tse: {                badge: &#x27;Fiscal Module&#x27;, color: &#x27;bg-red-500\/20 text-red-400&#x27;, tech: &#x27;Technische Sicherheitseinrichtung&#x27;,                title_vi: &#x27;TSE (Thi\u1ebft b\u1ecb b\u1ea3o m\u1eadt k\u1ef9 thu\u1eadt)&#x27;,                title_de: &#x27;TSE (Cloud \/ Hardware)&#x27;,                desc_vi: &#x27;B\u1eaft bu\u1ed9c t\u1ea1i \u0110\u1ee9c. Thi\u1ebft b\u1ecb m\u00e3 h\u00f3a ch\u1eef k\u00fd s\u1ed1 m\u1ecdi giao d\u1ecbch ngay khi b\u1ea5m order t\u1ea1i POS, ng\u0103n ch\u1eb7n vi\u1ec7c can thi\u1ec7p x\u00f3a hay s\u1eeda \u0111\u1ed5i l\u1ecbch s\u1eed h\u00f3a \u0111\u01a1n.&#x27;,                desc_de: &#x27;Gesetzlich vorgeschrieben. Signiert jede Transaktion kryptografisch und unver\u00e4nderbar auf einem Sicherheitsmodul.&#x27;            },            kassensichv: {                badge: &#x27;Fiscal Module&#x27;, color: &#x27;bg-red-500\/20 text-red-400&#x27;, tech: &#x27;Verordnung&#x27;,                title_vi: &#x27;KassenSichV (Lu\u1eadt b\u1ea3o m\u1eadt POS)&#x27;,                title_de: &#x27;KassenSichV Richtlinie&#x27;,                desc_vi: &#x27;Ngh\u1ecb \u0111\u1ecbnh qu\u1ea3n l\u00fd an to\u00e0n h\u1ec7 th\u1ed1ng t\u00ednh ti\u1ec1n c\u1ee7a \u0110\u1ee9c c\u00f3 hi\u1ec7u l\u1ef1c t\u1eeb 2020, y\u00eau c\u1ea7u m\u1ecdi h\u1ec7 th\u1ed1ng POS ph\u1ea3i c\u00f3 TSE ho\u1ea1t \u0111\u1ed9ng li\u00ean t\u1ee5c.&#x27;,                desc_de: &#x27;Die Kassensicherungsverordnung regelt die manipulationssichere Aufzeichnung von Gesch\u00e4ftsvorf\u00e4llen.&#x27;            },            dsfinvk: {                badge: &#x27;Fiscal Module&#x27;, color: &#x27;bg-red-500\/20 text-red-400&#x27;, tech: &#x27;Standard Export Format&#x27;,                title_vi: &#x27;DSFinV-K (Chu\u1ea9n xu\u1ea5t d\u1eef li\u1ec7u thu\u1ebf)&#x27;,                title_de: &#x27;DSFinV-K Schnittstelle&#x27;,                desc_vi: &#x27;\u0110\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u th\u1ed1ng nh\u1ea5t b\u1eaft bu\u1ed9c ph\u1ea3i xu\u1ea5t ra khi c\u01a1 quan thu\u1ebf ti\u1ebfn h\u00e0nh ki\u1ec3m tra ph\u1ea7n m\u1ec1m b\u00e1n h\u00e0ng c\u1ee7a b\u1ea1n.&#x27;,                desc_de: &#x27;Einheitliche Strukturierung von Kassendaten cho vi\u1ec7c thanh tra b\u1edfi s\u1edf t\u00e0i ch\u00ednh \u0110\u1ee9c.&#x27;            },            kassennachschau: {                badge: &#x27;Fiscal Module&#x27;, color: &#x27;bg-red-500\/20 text-red-400&#x27;, tech: &#x27;Finanzamt Audit&#x27;,                title_vi: &#x27;Kassennachschau (Thanh tra b\u1ea5t ng\u1edd)&#x27;,                title_de: &#x27;Kassennachschau-Pr\u00fcfung&#x27;,                desc_vi: &#x27;C\u01a1 quan thu\u1ebf \u0110\u1ee9c c\u00f3 quy\u1ec1n v\u00e0o qu\u00e1n ki\u1ec3m tra s\u1ed5 s\u00e1ch v\u00e0 h\u1ec7 th\u1ed1ng POS b\u1ea5t k\u1ef3 l\u00fac n\u00e0o m\u00e0 kh\u00f4ng c\u1ea7n b\u00e1o tr\u01b0\u1edbc. S\u1eb5n s\u00e0ng xu\u1ea5t file b\u00e1o c\u00e1o ngay l\u1eadp t\u1ee9c.&#x27;,                desc_de: &#x27;Unangek\u00fcndigte Kassenpr\u00fcfung durch das Finanzamt. Unser System liefert alle Daten blitzschnell per Knopfdruck.&#x27;            },            \/\/ Footer items            gutschein: {                badge: &#x27;Add-on&#x27;, color: &#x27;bg-amber-500\/20 text-amber-400&#x27;, tech: &#x27;Voucher Engine&#x27;,                title_vi: &#x27;Qu\u1ea3n l\u00fd Th\u1ebb Qu\u00e0 T\u1eb7ng (Gutschein)&#x27;,                title_de: &#x27;Gutscheinverwaltung&#x27;,                desc_vi: &#x27;T\u00ednh n\u0103ng ph\u00e1t h\u00e0nh, theo d\u00f5i v\u00e0 thanh to\u00e1n b\u1eb1ng phi\u1ebfu qu\u00e0 t\u1eb7ng (Voucher), gi\u00fap t\u0103ng doanh thu tr\u1ea3 tr\u01b0\u1edbc v\u00e0 gi\u1eef ch\u00e2n kh\u00e1ch h\u00e0ng.&#x27;,                desc_de: &#x27;Erm\u00f6glicht Verkauf und Einl\u00f6sung von Restaurant-Gutscheinen zur Umsatzsteigerung.&#x27;            },            loyalty: {                badge: &#x27;Add-on&#x27;, color: &#x27;bg-blue-500\/20 text-blue-400&#x27;, tech: &#x27;CRM Module&#x27;,                title_vi: &#x27;Th\u1ebb th\u00e0nh vi\u00ean \u0111i\u1ec7n t\u1eed (Loyalty)&#x27;,                title_de: &#x27;Digitale Kundenkarte &amp; Treuesystem&#x27;,                desc_vi: &#x27;Kh\u00e1ch h\u00e0ng t\u00edch \u0111i\u1ec3m sau m\u1ed7i l\u1ea7n chi ti\u00eau th\u00f4ng qua m\u00e3 s\u1ed1 c\u00e1 nh\u00e2n t\u00edch h\u1ee3p tr\u00ean Wallet \u0111i\u1ec7n tho\u1ea1i, gia t\u0103ng t\u1ea7n su\u1ea5t quay l\u1ea1i qu\u00e1n.&#x27;,                desc_de: &#x27;Kunden sammeln Punkte bei jedem Besuch. Integriert in Apple Wallet \/ Google Pay.&#x27;            },            bewirtung: {                badge: &#x27;Add-on&#x27;, color: &#x27;bg-emerald-500\/20 text-emerald-400&#x27;, tech: &#x27;Invoicing Tool&#x27;,                title_vi: &#x27;H\u00f3a \u0111\u01a1n ti\u1ebfp kh\u00e1ch (Bewirtungsbeleg)&#x27;,                title_de: &#x27;Bewirtungsbeleg-Drucker&#x27;,                desc_vi: &#x27;In h\u00f3a \u0111\u01a1n c\u00f3 \u0111\u1ea7y \u0111\u1ee7 th\u00f4ng tin t\u00ean c\u00f4ng ty, l\u00fd do ti\u1ebfp kh\u00e1ch \u0111\u1ec3 kh\u00e1ch h\u00e0ng doanh nghi\u1ec7p khai b\u00e1o kh\u1ea5u tr\u1eeb thu\u1ebf h\u1ee3p l\u1ec7 t\u1ea1i \u0110\u1ee9c.&#x27;,                desc_de: &#x27;Erstellt finanzamtskonforme Bewirtungsbelege f\u00fcr Gesch\u00e4ftsessen mit Angabe der Bewirteten.&#x27;            },            offline: {                badge: &#x27;Feature&#x27;, color: &#x27;bg-rose-500\/20 text-rose-400&#x27;, tech: &#x27;Failover Mode&#x27;,                title_vi: &#x27;Ch\u1ebf \u0111\u1ed9 Ngo\u1ea1i tuy\u1ebfn (Offline-mode)&#x27;,                title_de: &#x27;Ausfallsicherer Offline-Modus&#x27;,                desc_vi: &#x27;H\u1ec7 th\u1ed1ng ho\u1ea1t \u0111\u1ed9ng v\u00e0 l\u01b0u tr\u1eef d\u1eef li\u1ec7u b\u00e1n h\u00e0ng n\u1ed9i b\u1ed9 b\u00ecnh th\u01b0\u1eddng ngay c\u1ea3 khi m\u1ea5t k\u1ebft n\u1ed1i m\u1ea1ng Internet \u0111\u1ed9t ng\u1ed9t. Khi c\u00f3 m\u1ea1ng l\u1ea1i, h\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u1ed3ng b\u1ed9.&#x27;,                desc_de: &#x27;Kassieren Sie ohne Unterbrechung weiter, auch wenn das Internet ausf\u00e4llt. Automatische Synchronisation nach Reconnect.&#x27;            },            support: {                badge: &#x27;Feature&#x27;, color: &#x27;bg-emerald-500\/20 text-emerald-400&#x27;, tech: &#x27;Support Hotline&#x27;,                title_vi: &#x27;\u0110\u1ed9i ng\u0169 h\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt 24\/7&#x27;,                title_de: &#x27;Technischer Support (24\/7)&#x27;,                desc_vi: &#x27;Lu\u00f4n c\u00f3 nh\u00e2n vi\u00ean h\u1ed7 tr\u1ee3 x\u1eed l\u00fd s\u1ef1 c\u1ed1 kh\u1ea9n c\u1ea5p v\u1ec1 ph\u1ea7n c\u1ee9ng ho\u1eb7c ph\u1ea7n m\u1ec1m b\u00e1n h\u00e0ng b\u1ea5t k\u1ec3 th\u1eddi gian, \u0111\u1ea3m b\u1ea3o vi\u1ec7c kinh doanh kh\u00f4ng gi\u00e1n \u0111o\u1ea1n.&#x27;,                desc_de: &#x27;Rund-um-die-Uhr Notfallsupport bei Kassenst\u00f6rungen oder Ausf\u00e4llen, um den Betrieb sichen.&#x27;            }        };        let currentLang = &#x27;vi&#x27;; \/\/ Default language state        let isSidebarCollapsed = false;        let isMobileContentCollapsed = true; \/\/ M\u1eb7c \u0111\u1ecbnh \u1ea9n tr\u00ean Mobile \u0111\u1ec3 t\u1eadp trung s\u01a1 \u0111\u1ed3        \/\/ H\u00e0m thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i Sidebar m\u1ed9t c\u00e1ch ch\u1ee7 \u0111\u1ed9ng (Nh\u1eadn tham s\u1ed1 boolean)        function setSidebarState(collapse) {            const container = document.getElementById(&#x27;sidebar-container&#x27;);            const content = document.getElementById(&#x27;sidebar-content&#x27;);            const icon = document.getElementById(&#x27;collapse-icon&#x27;);            const btn = document.getElementById(&#x27;toggle-sidebar-btn&#x27;);            isSidebarCollapsed = collapse;            if (isSidebarCollapsed) {                \/\/ Thu g\u1ecdn                container.classList.remove(&#x27;lg:w-96&#x27;, &#x27;p-6&#x27;, &#x27;lg:p-6&#x27;, &#x27;lg:border-r&#x27;);                container.classList.add(&#x27;lg:w-0&#x27;, &#x27;p-0&#x27;, &#x27;lg:p-0&#x27;, &#x27;lg:border-r-0&#x27;);                content.classList.add(&#x27;lg:opacity-0&#x27;, &#x27;lg:pointer-events-none&#x27;);                                \/\/ \u0110\u1ee3i slide h\u1eb9p l\u1ea1i r\u1ed3i \u1ea9n h\u1eb3n n\u1ed9i dung \u0111\u1ec3 kh\u00f4ng b\u1ecb tr\u00e0n                setTimeout(() =&gt; {                    if (isSidebarCollapsed) content.classList.add(&#x27;hidden&#x27;);                }, 200);                \/\/ D\u1ecbch chuy\u1ec3n n\u00fat b\u1ea5m s\u00e1t m\u00e9p m\u00e0n h\u00ecnh                btn.classList.remove(&#x27;-right-4&#x27;);                btn.classList.add(&#x27;-right-8&#x27;);                icon.setAttribute(&#x27;data-lucide&#x27;, &#x27;chevron-right&#x27;);            } else {                \/\/ M\u1edf r\u1ed9ng                content.classList.remove(&#x27;hidden&#x27;);                setTimeout(() =&gt; {                    container.classList.add(&#x27;lg:w-96&#x27;, &#x27;p-6&#x27;, &#x27;lg:p-6&#x27;, &#x27;lg:border-r&#x27;);                    container.classList.remove(&#x27;lg:w-0&#x27;, &#x27;p-0&#x27;, &#x27;lg:p-0&#x27;, &#x27;lg:border-r-0&#x27;);                    content.classList.remove(&#x27;lg:opacity-0&#x27;, &#x27;lg:pointer-events-none&#x27;);                }, 10);                btn.classList.remove(&#x27;-right-8&#x27;);                btn.classList.add(&#x27;-right-4&#x27;);                icon.setAttribute(&#x27;data-lucide&#x27;, &#x27;chevron-left&#x27;);            }            lucide.createIcons();        }        \/\/ H\u00e0m toggle Sidebar khi b\u1ea5m th\u1ee7 c\u00f4ng t\u1eeb n\u00fat tab desktop        function toggleSidebar() {            setSidebarState(!isSidebarCollapsed);        }        \/\/ H\u00e0m thu g\u1ecdn \/ m\u1edf r\u1ed9ng n\u1ed9i dung tr\u00ean Mobile        function toggleMobileSidebar() {            const collapsibleSection = document.getElementById(&#x27;mobile-collapsible-section&#x27;);            const detailCardSection = document.getElementById(&#x27;detail-card-section&#x27;);            const icon = document.getElementById(&#x27;mobile-toggle-icon&#x27;);                        isMobileContentCollapsed = !isMobileContentCollapsed;                        if (isMobileContentCollapsed) {                collapsibleSection.classList.add(&#x27;hidden&#x27;);                detailCardSection.classList.add(&#x27;hidden&#x27;);                icon.setAttribute(&#x27;data-lucide&#x27;, &#x27;menu&#x27;);            } else {                collapsibleSection.classList.remove(&#x27;hidden&#x27;);                detailCardSection.classList.remove(&#x27;hidden&#x27;);                icon.setAttribute(&#x27;data-lucide&#x27;, &#x27;x&#x27;);            }            lucide.createIcons();        }        \/\/ H\u00e0m chuy\u1ec3n \u0111\u1ed5i ng\u00f4n ng\u1eef        function setLang(lang) {            currentLang = lang;                        \/\/ C\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i active c\u1ee7a n\u00fat b\u1ea5m            [&#x27;vi&#x27;, &#x27;de&#x27;, &#x27;bi&#x27;].forEach(l =&gt; {                const btn = document.getElementById(`btn-lang-${l}`);                if (l === lang) {                    btn.classList.add(&#x27;bg-emerald-500&#x27;, &#x27;text-slate-950&#x27;, &#x27;font-bold&#x27;);                    btn.classList.remove(&#x27;text-slate-400&#x27;, &#x27;hover:text-white&#x27;);                } else {                    btn.classList.remove(&#x27;bg-emerald-500&#x27;, &#x27;text-slate-950&#x27;, &#x27;font-bold&#x27;);                    btn.classList.add(&#x27;text-slate-400&#x27;, &#x27;hover:text-white&#x27;);                }            });            \/\/ C\u1eadp nh\u1eadt c\u00e1c nh\u00e3n tr\u00ean s\u01a1 \u0111\u1ed3 d\u1ef1a v\u00e0o class            document.querySelectorAll(&#x27;.lang-vi&#x27;).forEach(el =&gt; {                if (lang === &#x27;vi&#x27;) el.classList.remove(&#x27;hidden&#x27;);                else el.classList.add(&#x27;hidden&#x27;);            });            document.querySelectorAll(&#x27;.lang-de&#x27;).forEach(el =&gt; {                if (lang === &#x27;de&#x27;) el.classList.remove(&#x27;hidden&#x27;);                else el.classList.add(&#x27;hidden&#x27;);            });            document.querySelectorAll(&#x27;.lang-bi&#x27;).forEach(el =&gt; {                if (lang === &#x27;bi&#x27;) el.classList.remove(&#x27;hidden&#x27;);                else el.classList.add(&#x27;hidden&#x27;);            });            \/\/ Refresh panel chi ti\u1ebft n\u1ebfu \u0111ang m\u1edf            const activeNode = window.currentActiveNode;            if (activeNode) {                showDetails(activeNode);            }        }        \/\/ Hi\u1ec3n th\u1ecb th\u00f4ng tin chi ti\u1ebft v\u00e0o card b\u00ean tr\u00e1i (B\u1ed5 sung tham s\u1ed1 preventAutoExpand m\u1edbi)        function showDetails(nodeId, preventAutoExpand = false) {            window.currentActiveNode = nodeId;            const nodeInfo = nodeDatabase[nodeId];            if (!nodeInfo) return;            \/\/ N\u1ebfu kh\u00f4ng y\u00eau c\u1ea7u ch\u1eb7n m\u1edf r\u1ed9ng (preventAutoExpand = false), t\u1ef1 \u0111\u1ed9ng m\u1edf Sidebar            if (!preventAutoExpand) {                if (isSidebarCollapsed &amp;&amp; window.innerWidth &gt;= 1024) {                    setSidebarState(false); \/\/ T\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng Sidebar                }                if (isMobileContentCollapsed &amp;&amp; window.innerWidth &lt; 1024) {                    toggleMobileSidebar();                }            }            \/\/ \u1ea8n th\u00f4ng b\u00e1o r\u1ed7ng            document.getElementById(&#x27;detail-empty&#x27;).classList.add(&#x27;hidden&#x27;);            const content = document.getElementById(&#x27;detail-content&#x27;);            content.classList.remove(&#x27;hidden&#x27;);            \/\/ Set badge            const badge = document.getElementById(&#x27;detail-badge&#x27;);            badge.innerText = nodeInfo.badge;            badge.className = `text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider ${nodeInfo.color}`;            \/\/ Set tech \/ metadata            document.getElementById(&#x27;detail-tech&#x27;).innerText = nodeInfo.tech;            \/\/ Set Title &amp; Desc based on language            const titleEl = document.getElementById(&#x27;detail-title&#x27;);            const descEl = document.getElementById(&#x27;detail-desc&#x27;);            if (currentLang === &#x27;vi&#x27;) {                titleEl.innerText = nodeInfo.title_vi;                descEl.innerText = nodeInfo.desc_vi;            } else if (currentLang === &#x27;de&#x27;) {                titleEl.innerText = nodeInfo.title_de;                descEl.innerText = nodeInfo.desc_de;            } else {                \/\/ Song ng\u1eef                titleEl.innerText = `${nodeInfo.title_vi} \/ ${nodeInfo.title_de.split(&#x27; (&#x27;)[0]}`;                descEl.innerText = nodeInfo.desc_vi + &#x27;\\n\\n\ud83c\udde9\ud83c\uddea &#x27; + nodeInfo.desc_de;            }            \/\/ Highlight node v\u1eeba click v\u00e0 x\u00f3a highlight c\u00e1c node c\u0169            document.querySelectorAll(&#x27;[id^=&quot;node-&quot;]&#x27;).forEach(el =&gt; {                el.classList.remove(&#x27;pulse-active&#x27;);            });            const clickedNode = document.getElementById(`node-${nodeId}`);            if (clickedNode) {                clickedNode.classList.add(&#x27;pulse-active&#x27;);            }        }        \/\/ H\u00e0m g\u1ed1c di chuy\u1ec3n m\u1ed9t h\u1ea1t d\u1ecdc theo SVG path b\u1eb1ng Promise (Gi\u00fap l\u1eadp tr\u00ecnh \u0111\u1ed3ng b\u1ed9 tu\u1ea7n t\u1ef1 v\u00e0 song song)        function animateDot(dotId, pathId, duration) {            return new Promise((resolve) =&gt; {                const dotEl = document.getElementById(dotId);                const pathEl = document.getElementById(pathId);                if (!dotEl || !pathEl) return resolve();                dotEl.classList.remove(&#x27;hidden&#x27;);                const pathLength = pathEl.getTotalLength();                let start = null;                function step(timestamp) {                    if (!start) start = timestamp;                    const progress = timestamp - start;                    const percentage = Math.min(progress \/ duration, 1);                                        const currentLength = percentage * pathLength;                    const point = pathEl.getPointAtLength(currentLength);                                        dotEl.setAttribute(&#x27;cx&#x27;, point.x);                    dotEl.setAttribute(&#x27;cy&#x27;, point.y);                    if (percentage &lt; 1) {                        requestAnimationFrame(step);                    } else {                        dotEl.classList.add(&#x27;hidden&#x27;); \/\/ \u1ea8n khi ch\u1ea1y xong                        resolve(); \/\/ B\u00e1o hi\u1ec7u ho\u00e0n th\u00e0nh ch\u1eb7ng                    }                }                requestAnimationFrame(step);            });        }        \/\/ T\u1ef1 \u0111\u1ed9ng Highlight kh\u1ed1i ph\u1ee5c v\u1ee5 tr\u1ef1c quan        function highlightBlock(nodeId, duration = 1200) {            const el = document.getElementById(`node-${nodeId}`);            if (el) {                el.classList.add(&#x27;pulse-active&#x27;);                setTimeout(() =&gt; {                    el.classList.remove(&#x27;pulse-active&#x27;);                }, duration);            }        }        \/\/ CH\u1ea0Y TO\u00c0N B\u1ed8 CHU TR\u00ccNH END-TO-END (Promise-based, \u0111\u1ed3ng b\u1ed9 tr\u1ea1ng th\u00e1i gi\u1eefa 2 n\u00fat b\u1ea5m Play)        async function startFullSimulation() {            const btn = document.getElementById(&#x27;btn-simulate&#x27;);            const btnFloating = document.getElementById(&#x27;btn-simulate-floating&#x27;);                        \/\/ Kh\u00f3a v\u00e0 c\u1eadp nh\u1eadt giao di\u1ec7n c\u1ee7a c\u1ea3 2 n\u00fat c\u00f9ng l\u00fac            if (btn) {                btn.disabled = true;                btn.innerHTML = &#x27;&lt;i data-lucide=&quot;loader-2&quot; class=&quot;w-4 h-4 animate-spin&quot;&gt;&lt;\/i&gt; \u0110ang ch\u1ea1y lu\u1ed3ng...&#x27;;            }            if (btnFloating) {                btnFloating.disabled = true;                btnFloating.innerHTML = &#x27;&lt;i data-lucide=&quot;loader-2&quot; class=&quot;w-4 h-4 animate-spin&quot;&gt;&lt;\/i&gt; \u0110ang ch\u1ea1y...&#x27;;            }            lucide.createIcons();            \/\/ Clear m\u1ecdi highlight c\u0169 tr\u01b0\u1edbc khi ch\u1ea1y            document.querySelectorAll(&#x27;[id^=&quot;node-&quot;]&#x27;).forEach(el =&gt; el.classList.remove(&#x27;pulse-active&#x27;));            try {                \/\/ --- GIAI \u0110O\u1ea0N 1: V\u1eacN H\u00c0NH PH\u1ee4C V\u1ee4 (OPERATIONS) ---                \/\/ B\u01b0\u1edbc 1: Kh\u00e1ch h\u00e0ng (Kunden) truy\u1ec1n t\u00edn hi\u1ec7u \u0110\u1ed2NG TH\u1edcI \u0111\u1ebfn 3 k\u00eanh \u0111\u1ea7u v\u00e0o FOH                highlightBlock(&#x27;customer&#x27;, 1200);                await Promise.all([                    animateDot(&#x27;sim-dot-1a&#x27;, &#x27;simulation-path-1a&#x27;, 1000),                    animateDot(&#x27;sim-dot-1b&#x27;, &#x27;simulation-path-1b&#x27;, 1000),                    animateDot(&#x27;sim-dot-1c&#x27;, &#x27;simulation-path-1c&#x27;, 1000)                ]);                                \/\/ B\u01b0\u1edbc 2: T\u1eeb 3 k\u00eanh n\u00e0y, b\u1eafn t\u00edn hi\u1ec7u \u0110\u1ed2NG TH\u1edcI v\u1ec1 POS CORE qua c\u00e1c \u0111\u01b0\u1eddng n\u00e9t \u0111\u1ee9t xanh bi\u1ec3n                highlightBlock(&#x27;qr&#x27;, 1500);                highlightBlock(&#x27;eshop&#x27;, 1500);                highlightBlock(&#x27;reserv&#x27;, 1500);                await Promise.all([                    animateDot(&#x27;sim-dot-2a&#x27;, &#x27;simulation-path-2a&#x27;, 1400),                    animateDot(&#x27;sim-dot-2b&#x27;, &#x27;simulation-path-2b&#x27;, 1400),                    animateDot(&#x27;sim-dot-2c&#x27;, &#x27;simulation-path-2c&#x27;, 1400)                ]);                \/\/ B\u01b0\u1edbc 3: POS CORE b\u1eafn m\u00f3n xu\u1ed1ng Nh\u00e0 b\u1ebfp (K\u00fcche) &amp; M\u00e0n h\u00ecnh KDS                highlightBlock(&#x27;pos&#x27;, 1200);                highlightBlock(&#x27;kds&#x27;, 1200);                await animateDot(&#x27;sim-dot-3&#x27;, &#x27;simulation-path-3&#x27;, 1000);                \/\/ B\u01b0\u1edbc 4: Nh\u00e0 b\u1ebfp (K\u00fcche) ho\u00e0n th\u00e0nh v\u00e0 ph\u00e1t t\u00edn hi\u1ec7u cho nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 (Kellner)                highlightBlock(&#x27;kuche&#x27;, 1800);                await animateDot(&#x27;sim-dot-4&#x27;, &#x27;simulation-path-4&#x27;, 1600);                \/\/ B\u01b0\u1edbc 5: Nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5 b\u01b0ng m\u00f3n \u0103n \u0111\u01b0a t\u1edbi cho Kh\u00e1ch h\u00e0ng (Kunden)                highlightBlock(&#x27;waiter&#x27;, 1800);                await animateDot(&#x27;sim-dot-5&#x27;, &#x27;simulation-path-5&#x27;, 1600);                highlightBlock(&#x27;customer&#x27;, 1000);                \/\/ --- GIAI \u0110O\u1ea0N 2: QU\u1ea2N TR\u1eca &amp; PH\u00c1P L\u00dd T\u00c0I CH\u00cdNH (ADMIN &amp; COMPLIANCE) ---                \/\/ Ch\u1ea1y n\u1ed1i ti\u1ebfp ngay l\u1eadp t\u1ee9c: D\u1eef li\u1ec7u h\u00f3a \u0111\u01a1n t\u1eeb POS CORE truy\u1ec1n sang Ch\u1ee7 nh\u00e0 h\u00e0ng (Chef\/Chefin)                highlightBlock(&#x27;pos&#x27;, 1500);                await animateDot(&#x27;sim-dot-6&#x27;, &#x27;simulation-path-6&#x27;, 1400);                highlightBlock(&#x27;chef&#x27;, 1500);                \/\/ T\u1eeb Ch\u1ee7 nh\u00e0 h\u00e0ng, b\u1eafn t\u00edn hi\u1ec7u \u0110\u1ed2NG TH\u1edcI \u0111\u1ebfn 3 h\u01b0\u1edbng qu\u1ea3n tr\u1ecb                highlightBlock(&#x27;reports&#x27;, 1500);                highlightBlock(&#x27;datev&#x27;, 1500);                highlightBlock(&#x27;phaply&#x27;, 1500);                await Promise.all([                    animateDot(&#x27;sim-dot-7&#x27;, &#x27;simulation-path-7&#x27;, 1200), \/\/ L\u00ean B\u00e1o c\u00e1o &amp; \u0110i\u1ec1u h\u00e0nh                    animateDot(&#x27;sim-dot-8&#x27;, &#x27;simulation-path-8&#x27;, 1200), \/\/ Xu\u1ed1ng k\u1ebf to\u00e1n DATEV                    animateDot(&#x27;sim-dot-9&#x27;, &#x27;simulation-path-9&#x27;, 1200)  \/\/ Xu\u1ed1ng Tu\u00e2n th\u1ee7 Ph\u00e1p l\u00fd \u0110\u1ee9c                ]);                \/\/ K\u00edch ho\u1ea1t nh\u00e1y nh\u1ecf \u1edf c\u00e1c nh\u00e1nh con Ph\u00e1p l\u00fd (TSE, GoBD, DSFinV-K)                highlightBlock(&#x27;tse&#x27;, 1000);                highlightBlock(&#x27;kassensichv&#x27;, 1000);                highlightBlock(&#x27;dsfinvk&#x27;, 1000);            } catch (error) {                console.error(&quot;L\u1ed7i m\u00f4 ph\u1ecfng:&quot;, error);            } finally {                \/\/ Tr\u1ea3 l\u1ea1i tr\u1ea1ng th\u00e1i b\u00ecnh th\u01b0\u1eddng cho c\u1ea3 2 n\u00fat b\u1ea5m                if (btn) {                    btn.disabled = false;                    btn.innerHTML = &#x27;&lt;i data-lucide=&quot;play&quot; class=&quot;w-4 h-4 fill-current&quot;&gt;&lt;\/i&gt; Ch\u1ea1y To\u00e0n B\u1ed9 Quy Tr\u00ecnh&#x27;;                }                if (btnFloating) {                    btnFloating.disabled = false;                    btnFloating.innerHTML = &#x27;&lt;i data-lucide=&quot;play&quot; class=&quot;w-4 h-4 fill-current&quot;&gt;&lt;\/i&gt; Ch\u1ea1y quy tr\u00ecnh&#x27;;                }                                \/\/ T\u1ef0 \u0110\u1ed8NG THU G\u1eccN SIDEBAR KHI K\u1ebeT TH\u00daC M\u00d4 PH\u1eceNG (Theo y\u00eau c\u1ea7u)                setSidebarState(true);                \/\/ Thu g\u1ecdn collapsible mobile n\u1ebfu \u0111ang \u1edf tr\u00ean Mobile                if (!isMobileContentCollapsed &amp;&amp; window.innerWidth &lt; 1024) {                    toggleMobileSidebar();                }                lucide.createIcons();                \/\/ T\u1ef1 \u0111\u1ed9ng xem l\u1ea1i chi ti\u1ebft Kh\u00e1ch h\u00e0ng sau khi ho\u00e0n t\u1ea5t chu tr\u00ecnh m\u00e0 KH\u00d4NG l\u00e0m m\u1edf Sidebar ra l\u1ea1i                showDetails(&#x27;customer&#x27;, true);            }        }        \/\/ T\u1ef1 \u0111\u1ed9ng ch\u1ecdn th\u00f4ng tin Kh\u00e1ch h\u00e0ng khi t\u1ea3i trang        window.onload = function() {            showDetails(&#x27;customer&#x27;);        };    &lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\"\n    style=\"display:block; width:100%; height:100vh; border:0; margin:0; padding:0; background:#020617; overflow:hidden;\"\n    loading=\"eager\"\n    referrerpolicy=\"no-referrer-when-downgrade\"\n  ><\/iframe>\n<\/div>\n<script>\n(function() {\n  function resizePosIframe() {\n    var wrapper = document.getElementById('pos-ecosystem-iframe-wrapper');\n    if (!wrapper) return;\n    var iframe = wrapper.querySelector('iframe');\n    if (!iframe) return;\n    var w = wrapper.clientWidth || window.innerWidth;\n    if (w < 768) iframe.style.height = '1120px';\n    else if (w < 1200) iframe.style.height = '980px';\n    else iframe.style.height = '100vh';\n  }\n  resizePosIframe();\n  window.addEventListener('resize', resizePosIframe);\n  document.addEventListener('DOMContentLoaded', resizePosIframe);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14459","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/pages\/14459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/comments?post=14459"}],"version-history":[{"count":10,"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/pages\/14459\/revisions"}],"predecessor-version":[{"id":14490,"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/pages\/14459\/revisions\/14490"}],"wp:attachment":[{"href":"https:\/\/cukcuk.eu\/vi\/wp-json\/wp\/v2\/media?parent=14459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}