nvis-fe-cms-libs 2.0.4 → 2.0.6

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

@@ -375,11 +375,12 @@ function ThemeIcon({
   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",
@@ -389,6 +390,7 @@ function ThemeIcon({
         className: `icon ${className}`,
         onError: (e) => {
           e.target.style.display = "none";
+          console.warn(`Icon not found: ${iconUrl}`);
         }
       }
     );
@@ -404,6 +406,7 @@ function ThemeIcon({
       },
       onError: (e) => {
         e.target.style.display = "none";
+        console.warn(`Icon not found: ${iconUrl}`);
       }
     }
   );
@@ -1496,14 +1499,14 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
   `;
   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: [
@@ -1528,7 +1531,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             }
           ),
           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
           ] })
         ] }),
@@ -1552,7 +1555,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             }
           ),
           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
           ] })
         ] })
@@ -1574,7 +1577,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             }
           ),
           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
           ] })
         ] }),
@@ -1594,7 +1597,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             }
           ),
           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
           ] })
         ] })
@@ -1616,7 +1619,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             }
           ),
           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
           ] })
         ] }),
@@ -1688,7 +1691,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
           }
         ),
         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
         ] })
       ] }),
@@ -1712,7 +1715,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
           }
         ),
         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
         ] })
       ] }),
@@ -1723,10 +1726,10 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
           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"
           ] })
         }
@@ -1741,7 +1744,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
   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: [
@@ -1754,7 +1757,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
           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 })
       ] }),
@@ -1781,7 +1784,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
                 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 })
@@ -1811,7 +1814,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
                 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 })
@@ -1836,7 +1839,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
             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" })
@@ -1894,7 +1897,7 @@ const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }
   }
   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)) })
@@ -1911,7 +1914,7 @@ const ContactCard = ({ contact, t, isDarkMode }) => {
         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ụ" })
     ] }),
@@ -1938,7 +1941,7 @@ const ContactCard = ({ contact, t, isDarkMode }) => {
               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 })
@@ -1968,7 +1971,7 @@ const ContactCard = ({ contact, t, isDarkMode }) => {
               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 })
@@ -1993,7 +1996,7 @@ const ContactCard = ({ contact, t, isDarkMode }) => {
           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" })
@@ -3388,52 +3391,18 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
     ] })
   ] });
 };
-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] = useState(false);
   const [dragStartPos, setDragStartPos] = useState(null);
   const [hasMoved, setHasMoved] = 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);
@@ -3516,45 +3485,12 @@ const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDrag
       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 })
       ]
     }
   );
@@ -3775,108 +3711,49 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
     "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" }),
@@ -3891,11 +3768,11 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
               "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(
@@ -3927,8 +3804,7 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
             delay: node.delay,
             onDragStart: handleNodeDragStart,
             isDragging: draggingNodeId === node.id,
-            onClick: handleNodeClick,
-            isDarkMode
+            onClick: handleNodeClick
           },
           node.id
         )) }),
@@ -3962,51 +3838,15 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
             },
             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") })
             ] })
           }
         ),
@@ -4026,6 +3866,7 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
           animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
           opacity: 0;
         }
+        .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
       ` })
       ]
     }
@@ -4056,7 +3897,7 @@ const FaqItem = ({ faq, index: index2, isActive, onToggle, t }) => {
                 ThemeIcon,
                 {
                   name: "icon-faqChevronDown",
-                  folder: "common",
+                  folder: "FaqSection",
                   className: `w-5 h-5 icon-muted transition-transform duration-500 ${isActive ? "rotate-180" : ""}`
                 }
               ) })
@@ -4138,7 +3979,7 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
           },
           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: [