nvis-fe-cms-libs 2.0.4 → 2.0.6

package/dist/nvis-fe-cms-libs.umd.js

@@ -378,11 +378,12 @@ var __async = (__this, __arguments, generator) => {
     name,
     className = "",
     color,
+    folder = "common",
+    // ← Thêm prop folder, mặc định là "common"
     useOriginalColor = false
-    // ← Prop mới để chọn chế độ
   }) {
     if (!name) return null;
-    const iconUrl = `/icons/${name}.svg`;
+    const iconUrl = `/icons/${folder}/${name}.svg`;
     if (useOriginalColor) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "img",
@@ -392,6 +393,7 @@ var __async = (__this, __arguments, generator) => {
           className: `icon ${className}`,
           onError: (e) => {
             e.target.style.display = "none";
+            console.warn(`Icon not found: ${iconUrl}`);
           }
         }
       );
@@ -407,6 +409,7 @@ var __async = (__this, __arguments, generator) => {
         },
         onError: (e) => {
           e.target.style.display = "none";
+          console.warn(`Icon not found: ${iconUrl}`);
         }
       }
     );
@@ -1499,14 +1502,14 @@ var __async = (__this, __arguments, generator) => {
   `;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid lg:grid-cols-3 gap-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-surface rounded-2xl p-8 shadow-lg border transition-colors duration-200", style: { borderColor: "var(--border-color)" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gradient-brand flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormSend", className: "w-4 h-4 icon-gradient" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gradient-brand flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormSend", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-subtitle font-bold text-main", children: t("form.title") || "Gửi yêu cầu tư vấn" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", children: t("form.subtitle") || "Điền thông tin để nhận tư vấn miễn phí từ chuyên gia" })
         ] })
       ] }),
       submitStatus && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mb-6 p-4 rounded-xl border transition-colors duration-200 ${submitStatus === "success" ? "bg-emerald-50 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300" : "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300"}`, style: { borderColor: submitStatus === "success" ? "#10b981" : "#ef4444" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-        submitStatus === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormCheck", className: "w-4 h-4 icon-gradient" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+        submitStatus === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormCheck", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small font-medium", children: submitMessage })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
@@ -1531,7 +1534,7 @@ var __async = (__this, __arguments, generator) => {
               }
             ),
             formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               formErrors.fullName
             ] })
           ] }),
@@ -1555,7 +1558,7 @@ var __async = (__this, __arguments, generator) => {
               }
             ),
             formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               formErrors.workEmail
             ] })
           ] })
@@ -1577,7 +1580,7 @@ var __async = (__this, __arguments, generator) => {
               }
             ),
             formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               formErrors.phoneNumber
             ] })
           ] }),
@@ -1597,7 +1600,7 @@ var __async = (__this, __arguments, generator) => {
               }
             ),
             formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               formErrors.companyName
             ] })
           ] })
@@ -1619,7 +1622,7 @@ var __async = (__this, __arguments, generator) => {
               }
             ),
             formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               formErrors.jobTitle
             ] })
           ] }),
@@ -1691,7 +1694,7 @@ var __async = (__this, __arguments, generator) => {
             }
           ),
           formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
             formErrors.requestTitle
           ] })
         ] }),
@@ -1715,7 +1718,7 @@ var __async = (__this, __arguments, generator) => {
             }
           ),
           formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", className: "w-4 h-4 icon-gradient" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormAlertCircle", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
             formErrors.requestDescription
           ] })
         ] }),
@@ -1726,10 +1729,10 @@ var __async = (__this, __arguments, generator) => {
             disabled: isSubmitting,
             className: "flex-1 btn-primary text-white py-4 px-6 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center font-semibold",
             children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormLoader2", className: "w-4 h-4 icon-muted" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-ContactFormLoader2", folder: "ContactFormSection", className: "w-4 h-4 icon-muted" }),
               t("form.submitting") || "Đang gửi..."
             ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormSend", className: "w-4 h-4 icon-gradient" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactFormSend", folder: "ContactFormSection", className: "w-4 h-4 icon-gradient" }),
               t("form.submit") || "Gửi yêu cầu"
             ] })
           }
@@ -1744,7 +1747,7 @@ var __async = (__this, __arguments, generator) => {
     if (!contactData.length) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-4 py-2 rounded-full text-lg font-semibold mb-4 bg-surface", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", className: "w-4 h-4 icon-gradient" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-main", children: sectionTitle })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
@@ -1757,7 +1760,7 @@ var __async = (__this, __arguments, generator) => {
             display: "flex",
             alignItems: "center",
             justifyContent: "center"
-          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", className: "w-4 h-4 icon-gradient" }) }),
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle mb-2", children: contact.name }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block px-3 py-1 rounded-full text-small font-semibold bg-surface text-brand-primary", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: contact.position })
         ] }),
@@ -1784,7 +1787,7 @@ var __async = (__this, __arguments, generator) => {
                   alignItems: "center",
                   justifyContent: "center",
                   marginRight: "0.75rem"
-                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoPhone", className: "w-4 h-4 icon-gradient" }) }),
+                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoPhone", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contact.info.phone") || "Điện thoại" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.phone })
@@ -1814,7 +1817,7 @@ var __async = (__this, __arguments, generator) => {
                   alignItems: "center",
                   justifyContent: "center",
                   marginRight: "0.75rem"
-                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoEmail", className: "w-4 h-4 icon-gradient" }) }),
+                }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoEmail", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: "Email" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.email })
@@ -1839,7 +1842,7 @@ var __async = (__this, __arguments, generator) => {
               alignItems: "center",
               justifyContent: "center",
               marginRight: "0.75rem"
-            }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoClock", className: "w-4 h-4 icon-muted" }) }),
+            }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoClock", folder: "ContactInfoSection", className: "w-4 h-4 icon-muted" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contact.info.workingHours") || "Giờ làm việc" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.workingHours || t("contact.info.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
@@ -1897,7 +1900,7 @@ var __async = (__this, __arguments, generator) => {
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-4 py-2 rounded-full text-lg font-semibold mb-4 bg-surface", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", className: "w-4 h-4 icon-gradient" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-main", children: sectionTitle })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contacts.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContactCard, { contact, t, isDarkMode }, contact.id || index2)) })
@@ -1914,7 +1917,7 @@ var __async = (__this, __arguments, generator) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
-        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", className: "w-4 h-4 icon-gradient" }) }),
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoUser", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle mb-2", children: contact.name || t("contactList.card.noName") || "Không có tên" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block px-3 py-1 rounded-full text-small font-semibold bg-surface text-brand-primary", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: contact.position || t("contactList.card.noPosition") || "Chưa có chức vụ" })
       ] }),
@@ -1941,7 +1944,7 @@ var __async = (__this, __arguments, generator) => {
                 alignItems: "center",
                 justifyContent: "center",
                 marginRight: "0.75rem"
-              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoPhone", className: "w-4 h-4 icon-gradient" }) }),
+              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoPhone", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contactList.card.phone") || "Điện thoại" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.phone })
@@ -1971,7 +1974,7 @@ var __async = (__this, __arguments, generator) => {
                 alignItems: "center",
                 justifyContent: "center",
                 marginRight: "0.75rem"
-              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoEmail", className: "w-4 h-4 icon-gradient" }) }),
+              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoEmail", folder: "ContactInfoSection", className: "w-4 h-4 icon-gradient" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: "Email" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.email })
@@ -1996,7 +1999,7 @@ var __async = (__this, __arguments, generator) => {
             alignItems: "center",
             justifyContent: "center",
             marginRight: "0.75rem"
-          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoClock", className: "w-4 h-4 icon-muted" }) }),
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-contactInfoClock", folder: "ContactInfoSection", className: "w-4 h-4 icon-muted" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contactList.card.workingHours") || "Giờ làm việc" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.workingHours || t("contactList.card.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
@@ -3391,52 +3394,18 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] });
   };
-  const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description, isDarkMode }) => {
+  const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description }) => {
     const [isHovered, setIsHovered] = require$$0.useState(false);
     const [dragStartPos, setDragStartPos] = require$$0.useState(null);
     const [hasMoved, setHasMoved] = require$$0.useState(false);
-    const getColorStyles = (colorName) => {
-      const styles = {
-        blue: {
-          gradient: "linear-gradient(to bottom right, var(--brand-primary), var(--brand-primary))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
-          border: "var(--brand-primary)",
-          shadowColor: "var(--brand-primary)"
-        },
-        teal: {
-          gradient: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
-          border: "var(--gradient-brand-soft-start)",
-          shadowColor: "var(--gradient-brand-soft-start)"
-        },
-        purple: {
-          gradient: "linear-gradient(to bottom right, var(--brand-secondary), var(--gradient-accent-soft-start))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
-          border: "var(--brand-secondary)",
-          shadowColor: "var(--brand-secondary)"
-        },
-        orange: {
-          gradient: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
-          border: "var(--gradient-accent-strong-start)",
-          shadowColor: "var(--gradient-accent-strong-start)"
-        },
-        cyan: {
-          gradient: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
-          border: "var(--gradient-brand-strong-start)",
-          shadowColor: "var(--gradient-brand-strong-start)"
-        },
-        indigo: {
-          gradient: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
-          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
-          border: "var(--gradient-accent-soft-start)",
-          shadowColor: "var(--gradient-accent-soft-start)"
-        }
-      };
-      return styles[colorName] || styles.blue;
+    const colorClasses = {
+      blue: "bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 border-blue-400/50 shadow-blue-500/30",
+      teal: "bg-gradient-to-br from-teal-600 to-teal-700 hover:from-teal-500 hover:to-teal-600 border-teal-400/50 shadow-teal-500/30",
+      purple: "bg-gradient-to-br from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 border-purple-400/50 shadow-purple-500/30",
+      orange: "bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-400 hover:to-orange-500 border-orange-300/50 shadow-orange-500/30",
+      cyan: "bg-gradient-to-br from-cyan-600 to-cyan-700 hover:from-cyan-500 hover:to-cyan-600 border-cyan-400/50 shadow-cyan-500/30",
+      indigo: "bg-gradient-to-br from-indigo-600 to-indigo-700 hover:from-indigo-500 hover:to-indigo-600 border-indigo-400/50 shadow-indigo-500/30"
     };
-    const colorStyle = getColorStyles(color);
     const handleMouseDown = (e) => {
       setDragStartPos({ x: e.clientX, y: e.clientY });
       setHasMoved(false);
@@ -3519,45 +3488,12 @@ var __async = (__this, __arguments, generator) => {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: "backdrop-blur-md px-4 py-2.5 rounded-2xl shadow-2xl border-2 flex items-center gap-2.5 cursor-pointer transform transition-all duration-300",
-              style: {
-                background: isHovered || isDragging ? colorStyle.gradientHover : colorStyle.gradient,
-                borderColor: colorStyle.border + "80",
-                boxShadow: `0 10px 40px rgba(var(--brand-primary), 0.3)`,
-                transform: isHovered || isDragging ? "scale(1.1)" : "scale(1)",
-                filter: isHovered || isDragging ? "brightness(1.1)" : "brightness(1)",
-                rotate: isDragging ? "2deg" : "0deg"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 flex-shrink-0 text-inverse" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-inverse text-small whitespace-nowrap", children: text })
-              ]
-            }
-          ),
-          isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "absolute inset-0 rounded-2xl blur-xl animate-pulse",
-              style: {
-                background: "rgba(255, 255, 255, 0.1)",
-                transform: "scale(1.5)"
-              }
-            }
-          ),
-          (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: `absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 text-caption rounded-lg shadow-xl border whitespace-nowrap z-50 max-w-xs ${isDarkMode ? "bg-surface text-inverse" : "bg-body text-main"}`,
-              style: {
-                borderColor: "var(--border-color)",
-                opacity: 0.95
-              },
-              children: description
-            }
-          )
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${colorClasses[color]} backdrop-blur-md px-4 py-2.5 rounded-2xl shadow-2xl border-2 flex items-center gap-2.5 cursor-pointer transform transition-all duration-300 ${isHovered || isDragging ? "scale-110 shadow-2xl brightness-110" : ""} ${isDragging ? "rotate-2" : ""}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 text-white flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-medium whitespace-nowrap text-xs sm:text-sm", children: text })
+          ] }),
+          isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/10 rounded-2xl blur-xl animate-pulse", style: { transform: "scale(1.5)" } }),
+          (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 bg-slate-900/95 text-white text-xs rounded-lg shadow-xl border border-slate-700 whitespace-nowrap z-50 max-w-xs", children: description })
         ]
       }
     );
@@ -3778,108 +3714,49 @@ var __async = (__this, __arguments, generator) => {
       "div",
       {
         ref: containerRef,
-        className: "mind-map-container relative w-full h-screen overflow-hidden bg-section-soft",
-        style: {
-          touchAction: "none"
-        },
+        className: `mind-map-container relative w-full h-screen ${isDarkMode ? "bg-gradient-to-br from-slate-950 via-indigo-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} overflow-hidden transition-colors duration-300`,
+        style: { touchAction: "none" },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: "absolute inset-0",
-              style: { opacity: isDarkMode ? 0.3 : 0.2 },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0 bg-gradient-brand",
-                    style: {
-                      opacity: 0.2
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0 bg-gradient-accent",
-                    style: {
-                      opacity: 0.1
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "absolute inset-0 pointer-events-none",
-              style: { opacity: isDarkMode ? 0.6 : 0.4 },
-              children: [...Array(150)].map((_, i) => {
-                const colors = ["bg-brand-primary", "bg-brand-secondary"];
-                const randomColor = colors[Math.floor(Math.random() * colors.length)];
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `absolute rounded-full ${randomColor}`,
-                    style: {
-                      left: `${Math.random() * 100}%`,
-                      top: `${Math.random() * 100}%`,
-                      width: `${Math.random() * 3 + 1}px`,
-                      height: `${Math.random() * 3 + 1}px`,
-                      animationName: "twinkle",
-                      animationDelay: `${Math.random() * 5}s`,
-                      animationDuration: `${4 + Math.random() * 6}s`,
-                      animationIterationCount: "infinite",
-                      animationTimingFunction: "ease-in-out"
-                    }
-                  },
-                  i
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "bg-gradient-to-tr from-blue-600/20 via-purple-600/20 to-pink-600/20" : "bg-gradient-to-tr from-blue-400/20 via-purple-400/20 to-pink-400/20"}` }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-cyan-500/10 via-transparent to-transparent" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-purple-500/10 via-transparent to-transparent" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 pointer-events-none ${isDarkMode ? "opacity-60" : "opacity-40"}`, children: [...Array(150)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: "absolute inset-0 pointer-events-none",
-              style: { opacity: isDarkMode ? 0.1 : 0.05 },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "absolute inset-0",
-                  style: {
-                    backgroundImage: isDarkMode ? "radial-gradient(circle at 1px 1px, var(--text-inverse) 1px, transparent 0)" : "radial-gradient(circle at 1px 1px, var(--text-main) 1px, transparent 0)",
-                    backgroundSize: "40px 40px",
-                    opacity: 0.15
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-4 sm:right-16 bottom-4 sm:bottom-16 z-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute inset-0 blur-3xl w-20 h-20 sm:w-32 sm:h-32 bg-gradient-brand",
-                style: {
-                  opacity: 0.2
-                }
+              className: "absolute rounded-full animate-twinkle",
+              style: {
+                left: `${Math.random() * 100}%`,
+                top: `${Math.random() * 100}%`,
+                width: `${Math.random() * 3 + 1}px`,
+                height: `${Math.random() * 3 + 1}px`,
+                background: isDarkMode ? ["#60a5fa", "#818cf8", "#a78bfa", "#c084fc", "#e879f9"][Math.floor(Math.random() * 5)] : ["#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef"][Math.floor(Math.random() * 5)],
+                animationDelay: `${Math.random() * 5}s`,
+                animationDuration: `${4 + Math.random() * 6}s`
               }
-            ),
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"} pointer-events-none`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0", style: {
+            backgroundImage: `radial-gradient(circle at 1px 1px, ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)"} 1px, transparent 0)`,
+            backgroundSize: "40px 40px"
+          } }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-4 sm:right-16 bottom-4 sm:bottom-16 z-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 blur-3xl w-20 h-20 sm:w-32 sm:h-32" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "60", height: "60", viewBox: "0 0 80 80", className: "relative sm:w-24 sm:h-24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M40 0 L45 35 L80 40 L45 45 L40 80 L35 45 L0 40 L35 35 Z", fill: "url(#sparkle-gradient)", opacity: "0.4" }) })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { zIndex: 1 }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "circuit-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)", stopOpacity: 0.6 } }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0.9 } }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)", stopOpacity: 0.6 } })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0.6" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa", stopOpacity: "0.9" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc", stopOpacity: "0.6" })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "sparkle-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)" } }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)" } }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)" } })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc" })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("filter", { id: "glow", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
@@ -3894,11 +3771,11 @@ var __async = (__this, __arguments, generator) => {
                 "path",
                 {
                   d: line.path,
-                  stroke: "var(--gradient-brand-soft-start)",
+                  stroke: "rgba(167, 139, 250, 0.2)",
                   strokeWidth: "6",
                   fill: "none",
                   className: "transition-all duration-200",
-                  style: { filter: "blur(8px)", opacity: 0.2 }
+                  style: { filter: "blur(8px)" }
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3930,8 +3807,7 @@ var __async = (__this, __arguments, generator) => {
               delay: node.delay,
               onDragStart: handleNodeDragStart,
               isDragging: draggingNodeId === node.id,
-              onClick: handleNodeClick,
-              isDarkMode
+              onClick: handleNodeClick
             },
             node.id
           )) }),
@@ -3965,51 +3841,15 @@ var __async = (__this, __arguments, generator) => {
               },
               onTouchEnd: () => setIsDragging(false),
               children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0 rounded-full blur-2xl bg-brand-primary",
-                    style: {
-                      opacity: 0.3,
-                      transform: "scale(1.5)"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "div",
-                  {
-                    className: "relative px-6 sm:px-10 py-3 sm:py-5 rounded-3xl shadow-2xl border-4 flex items-center gap-3 sm:gap-4 backdrop-blur-md bg-gradient-brand",
-                    style: {
-                      borderColor: "rgba(var(--brand-primary-rgb), 0.5)",
-                      transform: isDragging ? "scale(1.1)" : "scale(1)",
-                      transition: "transform 0.3s ease"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "div",
-                        {
-                          className: "p-2 sm:p-3 rounded-xl backdrop-blur-sm",
-                          style: { backgroundColor: "rgba(255, 255, 255, 0.25)" },
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-inverse" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-inverse text-body sm:text-subtitle", children: diagramName }),
-                        diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-inverse text-caption sm:text-small opacity-90", children: diagramDescription })
-                      ] })
-                    ]
-                  }
-                ),
-                !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-caption whitespace-nowrap ${isDarkMode ? "text-brand-primary" : "text-brand-secondary"}`,
-                    style: {
-                      opacity: 0.6
-                    },
-                    children: safeT("diagram.dragToMove")
-                  }
-                )
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-indigo-400/30 rounded-full blur-2xl", style: { transform: "scale(1.5)" } }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative bg-gradient-to-br from-indigo-500 via-blue-500 to-cyan-500 px-6 sm:px-10 py-3 sm:py-5 rounded-3xl shadow-2xl border-4 border-indigo-300/50 flex items-center gap-3 sm:gap-4 transition-transform backdrop-blur-md ${isDragging ? "scale-110" : ""}`, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/25 p-2 sm:p-3 rounded-xl backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-white" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-white font-bold text-sm sm:text-xl leading-tight tracking-wide", children: diagramName }),
+                    diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-white/90 font-medium text-xs sm:text-base leading-tight", children: diagramDescription })
+                  ] })
+                ] }),
+                !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 ${isDarkMode ? "text-indigo-300/60" : "text-indigo-600/60"} text-xs whitespace-nowrap`, children: safeT("diagram.dragToMove") })
               ] })
             }
           ),
@@ -4029,6 +3869,7 @@ var __async = (__this, __arguments, generator) => {
           animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
           opacity: 0;
         }
+        .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
       ` })
         ]
       }
@@ -4059,7 +3900,7 @@ var __async = (__this, __arguments, generator) => {
                   ThemeIcon,
                   {
                     name: "icon-faqChevronDown",
-                    folder: "common",
+                    folder: "FaqSection",
                     className: `w-5 h-5 icon-muted transition-transform duration-500 ${isActive ? "rotate-180" : ""}`
                   }
                 ) })
@@ -4141,7 +3982,7 @@ var __async = (__this, __arguments, generator) => {
             },
             onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
             onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-faqQuestion", className: "w-4 h-4 icon-gradient" })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-faqQuestion", folder: "FaqSection", className: "w-4 h-4 icon-gradient" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [