nvis-fe-cms-libs 1.1.42 → 2.0.0

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

@@ -379,8 +379,7 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
       tempDiv.innerHTML = html;
       let cleanText = tempDiv.textContent || tempDiv.innerText || "";
       return cleanText.replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\s+/g, " ").trim();
-    } catch (error) {
-      console.error("Error cleaning HTML content:", error);
+    } catch (e) {
       return String(html || "").replace(/<[^>]*>/g, "").replace(/\s+/g, " ").trim();
     }
   };
@@ -392,41 +391,28 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
   const items = [
     {
       icon: "💡",
-      gradient: "bg-gradient-blue-soft",
-      textGradient: "text-gradient-blue-soft",
-      iconBg: isDarkMode ? "bg-blue-900/40" : "bg-blue-100",
-      iconColor: isDarkMode ? "text-blue-300" : "text-blue-600",
       title: t("about.companyValues.vision") || "Tầm nhìn",
-      text: cleanHtmlContent(safeCompanyData.vision) || "Tầm nhìn của chúng tôi sẽ được cập nhật trong thời gian tới."
+      text: cleanHtmlContent(safeCompanyData.vision) || "Tầm nhìn của chúng tôi sẽ được cập nhật trong thời gian tới.",
+      bgClass: "bg-gradient-brand"
     },
     {
       icon: "🚀",
-      gradient: "bg-gradient-emerald-teal",
-      textGradient: "text-gradient-emerald-teal",
-      iconBg: isDarkMode ? "bg-emerald-900/40" : "bg-emerald-100",
-      iconColor: isDarkMode ? "text-emerald-300" : "text-emerald-600",
       title: t("about.companyValues.mission") || "Sứ mệnh",
-      text: cleanHtmlContent(safeCompanyData.mission) || "Sứ mệnh của chúng tôi sẽ được cập nhật trong thời gian tới."
+      text: cleanHtmlContent(safeCompanyData.mission) || "Sứ mệnh của chúng tôi sẽ được cập nhật trong thời gian tới.",
+      bgClass: "bg-gradient-accent"
     },
     {
       icon: "💎",
-      gradient: "bg-gradient-purple-soft",
-      textGradient: "text-gradient-purple-soft",
-      iconBg: isDarkMode ? "bg-purple-900/40" : "bg-purple-100",
-      iconColor: isDarkMode ? "text-purple-300" : "text-purple-600",
       title: t("about.companyValues.coreValues") || "Giá trị cốt lõi",
-      text: cleanHtmlContent(safeCompanyData.coreValues) || "Giá trị cốt lõi của chúng tôi sẽ được cập nhật trong thời gian tới."
+      text: cleanHtmlContent(safeCompanyData.coreValues) || "Giá trị cốt lõi của chúng tôi sẽ được cập nhật trong thời gian tới.",
+      bgClass: "bg-gradient-brand"
     }
   ];
-  const validItems = items.filter((item) => {
-    const originalText = item === items[0] ? safeCompanyData.vision : item === items[1] ? safeCompanyData.mission : safeCompanyData.coreValues;
-    return originalText || true;
-  });
   const refs = useRef([]);
   const [visible, setVisible] = useState([]);
   useEffect(() => {
-    setVisible(new Array(validItems.length).fill(false));
-    if (validItems.length === 0) return;
+    setVisible(new Array(items.length).fill(false));
+    if (items.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -446,152 +432,43 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
       { threshold: 0.2 }
     );
     refs.current.forEach((el) => el && observer.observe(el));
-    return () => {
-      refs.current.forEach((el) => el && observer.unobserve(el));
-    };
-  }, [validItems.length]);
-  if (!companyData || validItems.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "text-center py-8 px-4 rounded-lg border",
-        style: {
-          backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
-          borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center",
-              style: {
-                backgroundColor: isDarkMode ? "var(--bg-tertiary)" : "var(--bg-tertiary)"
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "svg",
-                {
-                  className: "w-8 h-8",
-                  style: { color: isDarkMode ? "var(--text-tertiary)" : "var(--text-tertiary)" },
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "h3",
-            {
-              className: "text-lg font-semibold mb-2",
-              style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
-              children: "Thông tin công ty"
-            }
-          ),
+    return () => refs.current.forEach((el) => el && observer.unobserve(el));
+  }, [items.length]);
+  if (!companyData) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto mb-4 flex items-center justify-center rounded-full bg-gradient-brand text-white text-2xl", children: "🏢" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-lg mb-2", children: "Thông tin công ty" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: items.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: (el) => refs.current[index2] = el,
+      className: `card transition-all duration-700 ease-out transform ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
+      style: { transitionDelay: `${index2 * 200}ms` },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start space-x-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `w-10 h-10 rounded-lg flex items-center justify-center text-white text-xl flex-shrink-0 ${item.bgClass}`,
+            children: item.icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-lg mb-1", children: item.title }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "p",
             {
-              className: "text-sm",
-              style: { color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)" },
-              children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm."
+              className: `card-text leading-relaxed ${item.text.includes("sẽ được cập nhật") ? "italic opacity-75" : ""}`,
+              children: item.text
             }
           )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: validItems.map((item, index2) => {
-    try {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          ref: (el) => refs.current[index2] = el,
-          className: `
-                flex items-start space-x-4 rounded-2xl p-6 
-                transform transition-all duration-700 ease-out 
-                border backdrop-blur-sm
-                ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}
-              `,
-          style: __spreadValues({
-            transitionDelay: `${index2 * 200}ms`,
-            borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)",
-            backgroundColor: isDarkMode ? "var(--bg-secondary)" : "transparent"
-          }, isDarkMode && {
-            backgroundImage: `linear-gradient(to bottom right, 
-                    ${index2 === 0 ? "var(--gradient-blue-soft-start)" : index2 === 1 ? "var(--gradient-emerald-start)" : "var(--gradient-purple-soft-start)"}15, 
-                    ${index2 === 0 ? "var(--gradient-blue-soft-end)" : index2 === 1 ? "var(--gradient-emerald-end)" : "var(--gradient-purple-soft-end)"}10)`
-          }),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: `w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${item.iconBg} ${item.iconColor}`,
-                children: item.icon
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "h3",
-                {
-                  className: `text-lg font-bold mb-1 ${item.textGradient}`,
-                  children: item.title
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "p",
-                {
-                  className: `leading-relaxed ${// Style khác nhau cho placeholder vs real content
-                  item.text.includes("sẽ được cập nhật") ? "italic opacity-75" : ""}`,
-                  style: {
-                    color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)"
-                  },
-                  children: item.text
-                }
-              )
-            ] })
-          ]
-        },
-        index2
-      );
-    } catch (error) {
-      console.error("Error rendering company value item:", item, error);
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: "flex items-start space-x-4 rounded-lg p-4 border opacity-50",
-          style: {
-            backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
-            borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "w-10 h-10 rounded-lg flex items-center justify-center",
-                style: {
-                  backgroundColor: isDarkMode ? "#7f1d1d40" : "#fee2e2",
-                  color: isDarkMode ? "#fca5a5" : "#dc2626"
-                },
-                children: "❌"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "h3",
-                {
-                  className: "text-lg font-bold mb-1",
-                  style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
-                  children: "Lỗi hiển thị"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)" }, children: "Không thể hiển thị mục này do vấn đề dữ liệu." })
-            ] })
-          ]
-        },
-        `error-${index2}`
-      );
-    }
-  }) });
+        ] })
+      ] })
+    },
+    index2
+  )) });
 };
 const SectionWrapper = ({
   variant = "softLight",
@@ -669,7 +546,7 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gradient-to-r from-blue-500 to-purple-600 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gradient-brand p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
                   className: `w-full h-full rounded-full flex items-center justify-center overflow-hidden ${isDarkMode ? "bg-gray-900" : "bg-white"}`,
@@ -687,16 +564,10 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
                         e.target.parentElement.appendChild(fallbackDiv);
                       }
                     }
-                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", children: shortName })
+                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gradient-brand", children: shortName })
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "h1",
-                {
-                  className: `text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 ${isDarkMode ? "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-300 to-purple-400 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]" : "text-transparent bg-clip-text bg-gradient-to-r from-blue-100 via-indigo-50 to-purple-100 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]"}`,
-                  children: name
-                }
-              )
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 text-gradient-brand drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]", children: name })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -725,32 +596,20 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     ),
     /* @__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.jsxs("div", { className: "grid lg:grid-cols-2 gap-12 items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-blue-900/40 text-blue-300 border border-blue-700" : "bg-blue-100 text-blue-800"}`,
-            children: [
-              "📖 ",
-              safeT("aboutCompany.story.badge")
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "h2",
-          {
-            className: `text-3xl lg:text-4xl font-bold mb-6 ${isDarkMode ? "text-white" : "text-gray-800"}`,
-            children: [
-              safeT("aboutCompany.story.title"),
-              " ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", children: shortName })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 bg-surface text-brand-primary border border-[var(--border-color)]", children: [
+          "📖 ",
+          safeT("aboutCompany.story.badge")
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-3xl lg:text-4xl font-bold mb-6 text-main", children: [
+          safeT("aboutCompany.story.title"),
+          " ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-gradient-brand", children: shortName })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             dangerouslySetInnerHTML: { __html: description },
-            className: `prose max-w-none transition-colors ${isDarkMode ? "prose-invert text-gray-300" : "text-gray-600"}`
+            className: "prose max-w-none transition-colors text-muted"
           }
         )
       ] }),
@@ -771,12 +630,12 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     ] }) }) })
   ] });
 };
-const TimelineSection = ({ data, t, isDarkMode, section }) => {
-  var _a;
-  const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => item.data)) || [];
+const TimelineSection = ({ data, t, section }) => {
+  var _a, _b;
+  const timelineData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
   const [timelineVisible, setTimelineVisible] = useState([]);
   const timelineRefs = useRef([]);
-  const sectionTitle = (section == null ? void 0 : section.title) || "...";
+  const sectionTitle = (section == null ? void 0 : section.title) || "Timeline";
   useEffect(() => {
     setTimelineVisible(new Array(timelineData.length).fill(false));
   }, [timelineData.length]);
@@ -785,73 +644,38 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
+            const index2 = timelineRefs.current.findIndex(
+              (el) => el === entry.target
+            );
             if (index2 !== -1) {
               setTimelineVisible((prev) => {
-                const newVisible = [...prev];
-                newVisible[index2] = true;
-                return newVisible;
+                const updated = [...prev];
+                updated[index2] = true;
+                return updated;
               });
+              observer.unobserve(entry.target);
             }
-            observer.unobserve(entry.target);
           }
         });
       },
       { threshold: 0.1 }
     );
     timelineRefs.current.forEach((el) => el && observer.observe(el));
-    return () => {
-      timelineRefs.current.forEach((el) => el && observer.unobserve(el));
-    };
+    return () => timelineRefs.current.forEach((el) => el && observer.unobserve(el));
   }, [timelineData.length]);
   if (!timelineData.length) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: t("timeline.noData.title") || "Chưa có dữ liệu" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: t("timeline.noData.description") || "Hiện tại chưa có milestone nào được thiết lập." })
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-subtitle font-semibold mb-2 text-main", children: t("timeline.noData.title") || "Chưa có dữ liệu" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("timeline.noData.description") || "Hiện tại chưa có milestone nào được thiết lập." })
     ] }) });
   }
-  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: `relative inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
-        children: [
-          "📈 ",
-          sectionTitle,
-          isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute w-12 h-12 bg-white/5 rounded-full",
-                style: { left: "10%", top: "20%" }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute w-10 h-10 bg-white/5 rounded-full",
-                style: { right: "30%", bottom: "10%" }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute w-14 h-14 bg-white/5 rounded-md",
-                style: { left: "20%", bottom: "30%" }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: 'absolute inset-0 bg-[url("data:image/svg+xml,%3Csvg width=\\\\\\"60\\\\\\" height=\\\\\\"60\\\\\\" viewBox=\\\\\\"0 0 60 60\\\\\\" xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"%3E%3Cg fill=\\\\\\"none\\\\\\" fill-rule=\\\\\\"evenodd\\\\\\"%3E%3Cg fill=\\\\\\"%23ffffff\\\\\\" fill-opacity=\\\\\\"0.05\\\\\\"%3E%3Ccircle cx=\\\\\\"30\\\\\\" cy=\\\\\\"30\\\\\\" r=\\\\\\"2\\\\\\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")] opacity-20'
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { 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-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm hover:shadow-md transition-all duration-300", children: [
+      "📈 ",
+      sectionTitle
+    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-600 rounded-full" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-brand rounded-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: timelineData.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
@@ -859,64 +683,12 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
           className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
           style: { transitionDelay: `${index2 * 200}ms` },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
-              {
-                className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
-                children: [
-                  isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "absolute w-12 h-12 bg-white/5 rounded-full",
-                        style: { left: "10%", top: "20%" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "absolute w-10 h-10 bg-white/5 rounded-full",
-                        style: { right: "30%", bottom: "10%" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "absolute w-14 h-14 bg-white/5 rounded-md",
-                        style: { left: "20%", bottom: "30%" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: 'absolute inset-0 bg-[url("data:image/svg+xml,%3Csvg width=\\\\\\"60\\\\\\" height=\\\\\\"60\\\\\\" viewBox=\\\\\\"0 0 60 60\\\\\\" xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"%3E%3Cg fill=\\\\\\"none\\\\\\" fill-rule=\\\\\\"evenodd\\\\\\"%3E%3Cg fill=\\\\\\"%23ffffff\\\\\\" fill-opacity=\\\\\\"0.05\\\\\\"%3E%3Ccircle cx=\\\\\\"30\\\\\\" cy=\\\\\\"30\\\\\\" r=\\\\\\"2\\\\\\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")] opacity-20'
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "h3",
-                    {
-                      className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-                      children: milestone.title
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "p",
-                    {
-                      className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
-                      children: milestone.description
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
-              }
-            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title text-brand-primary", children: milestone.time }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-main mb-1", children: milestone.title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: milestone.description })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 bg-gradient-brand rounded-full border-4 border-[var(--bg-body)] shadow-[0_0_10px_5px_rgba(37,99,235,0.4)] flex-shrink-0 z-10 animate-pulse" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
           ]
         },
@@ -928,6 +700,7 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
 const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
   const itemRef = useRef(null);
   const [visible, setVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -949,93 +722,82 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: "absolute w-12 h-12 bg-white/5 rounded-full",
-          style: { left: "10%", top: "20%" }
+          className: "absolute w-12 h-12 rounded-full",
+          style: { left: "10%", top: "20%", background: "rgba(255,255,255,0.05)" }
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: "absolute w-10 h-10 bg-white/5 rounded-full",
-          style: { right: "30%", bottom: "10%" }
+          className: "absolute w-10 h-10 rounded-full",
+          style: { right: "30%", bottom: "10%", background: "rgba(255,255,255,0.05)" }
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: "absolute w-14 h-14 bg-white/5 rounded-md",
-          style: { left: "20%", bottom: "30%" }
+          className: "absolute w-14 h-14 rounded-md",
+          style: { left: "20%", bottom: "30%", background: "rgba(255,255,255,0.05)" }
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: 'absolute inset-0 bg-[url("data:image/svg+xml,%3Csvg width=\\\\\\"60\\\\\\" height=\\\\\\"60\\\\\\" viewBox=\\\\\\"0 0 60 60\\\\\\" xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"%3E%3Cg fill=\\\\\\"none\\\\\\" fill-rule=\\\\\\"evenodd\\\\\\"%3E%3Cg fill=\\\\\\"%23ffffff\\\\\\" fill-opacity=\\\\\\"0.05\\\\\\"%3E%3Ccircle cx=\\\\\\"30\\\\\\" cy=\\\\\\"30\\\\\\" r=\\\\\\"2\\\\\\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")] opacity-20'
+          className: "absolute inset-0 opacity-20",
+          style: {
+            backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\\"60\\" height=\\"60\\" viewBox=\\"0 0 60 60\\" xmlns=\\"http://www.w3.org/2000/svg\\"%3E%3Cg fill=\\"none\\" fill-rule=\\"evenodd\\"%3E%3Cg fill=\\"%23ffffff\\" fill-opacity=\\"0.05\\"%3E%3Ccircle cx=\\"30\\" cy=\\"30\\" r=\\"2\\"/\\%3E%3C/g\\%3E%3C/g\\%3E%3C/svg\\%3E")'
+          }
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "logo-container w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden", children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "img",
-      {
-        src: logoSrc,
-        alt: partner.name,
-        className: "logo-image max-w-full max-h-full object-contain"
-      }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "h4",
+      "div",
       {
-        className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-        children: partner.name
+        className: "w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden bg-surface",
+        style: {
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: isHovered ? "var(--brand-primary)" : "var(--border-color)",
+          backgroundColor: isHovered ? "var(--bg-body)" : "var(--bg-surface)",
+          transition: "all 0.3s ease"
+        },
+        children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: logoSrc,
+            alt: partner.name,
+            className: "max-w-full max-h-full object-contain",
+            style: {
+              filter: isHovered ? "grayscale(0) opacity(1)" : isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)",
+              transform: isHovered ? "scale(1.05)" : "scale(1)",
+              transition: "all 0.3s ease"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-brand flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-small px-1", children: partner.name }) })
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "p",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "card-title text-center mb-2", children: partner.name }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text text-center mb-2", children: partner.description }),
+    partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
       {
-        className: `text-sm text-center mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
-        children: partner.description
+        className: "card-link justify-center",
+        style: {
+          opacity: isHovered ? 1 : 0,
+          transform: isHovered ? "translateY(0)" : "translateY(4px)",
+          transition: "all 0.3s ease"
+        },
+        children: [
+          t("partners.viewDetails") || "Xem chi tiết",
+          " →"
+        ]
       }
-    ),
-    partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "website-hint", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-blue-600 font-medium", children: [
-      t("partners.viewDetails") || "Xem chi tiết",
-      " →"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
-        .partner-card {
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .partner-card:hover {
-          transform: translateY(-3px);
-          box-shadow: 0 8px 20px ${isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"};
-        }
-        .logo-container {
-          background: ${isDarkMode ? "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"};
-          border: 1px solid ${isDarkMode ? "#4b5563" : "#e2e8f0"};
-          transition: all 0.3s ease;
-        }
-        .partner-card:hover .logo-container {
-          border-color: #3b82f6;
-          background: ${isDarkMode ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)"};
-        }
-        .logo-image {
-          filter: ${isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)"};
-          transition: all 0.3s ease;
-        }
-        .partner-card:hover .logo-image {
-          filter: grayscale(0) opacity(1);
-          transform: scale(1.05);
-        }
-        .website-hint {
-          opacity: 0;
-          transform: translateY(4px);
-          transition: all 0.3s ease;
-        }
-        .partner-card:hover .website-hint {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      ` })
+    )
   ] });
+  const baseClasses = `card items-center justify-center transition-all duration-700 ease-out overflow-hidden ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`;
+  const dynamicStyles = {
+    transitionDelay: `${idx * 150}ms`
+  };
   if (partner.websiteUrl) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
@@ -1044,10 +806,12 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
         href: partner.websiteUrl,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: `partner-card relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden
-    ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-500" : "bg-white border border-gray-200 hover:border-blue-300"}
-    ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
-        style: { transitionDelay: `${idx * 150}ms`, textDecoration: "none" },
+        className: `${baseClasses} cursor-pointer`,
+        style: __spreadProps(__spreadValues({}, dynamicStyles), {
+          textDecoration: "none"
+        }),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
         children: cardContent
       }
     );
@@ -1056,10 +820,10 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
     "div",
     {
       ref: itemRef,
-      className: `partner-card relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out overflow-hidden
-    ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800" : "bg-white border border-gray-200"}
-    ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
-      style: { transitionDelay: `${idx * 150}ms` },
+      className: baseClasses,
+      style: dynamicStyles,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       children: cardContent
     }
   );
@@ -1076,14 +840,14 @@ function useWindowSize$1() {
   }, []);
   return width;
 }
-const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) => {
+const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
   var _a, _b;
   const partnersData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
   const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
   const windowWidth = useWindowSize$1();
-  const sectionTitle = (section == null ? void 0 : section.title) || "...";
+  const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
   const getLogoUrl = (logoUrl) => {
     if (!logoUrl) return null;
     if (logoUrl.startsWith("http")) return logoUrl;
@@ -1126,17 +890,11 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
     return () => partnersRef.current && observer.unobserve(partnersRef.current);
   }, []);
   if (!partnersData.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-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
-        children: [
-          "🤝 ",
-          sectionTitle
-        ]
-      }
-    ) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { 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-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
+      "🤝 ",
+      sectionTitle
+    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -1152,8 +910,7 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
                   partner,
                   idx,
                   t,
-                  getLogoUrl,
-                  isDarkMode
+                  getLogoUrl
                 },
                 partner.id || idx
               )) })
@@ -1164,7 +921,8 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
             "button",
             {
               onClick: () => setCurrentPartnerSlide(index2),
-              className: `w-3 h-3 rounded-full transition-all ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`
+              className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-muted hover:bg-brand-primary/70"}`,
+              "aria-label": `Slide ${index2 + 1}`
             },
             index2
           )) })
@@ -1186,12 +944,9 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
         try {
           setLoading(true);
           const res = yield getMilestoneTimeline();
-          if (res.success) {
-            setMilestones(res.data || []);
-          } else {
-            setMilestones([]);
-          }
-        } catch (error) {
+          if (res.success) setMilestones(res.data || []);
+          else setMilestones([]);
+        } catch (e) {
           setMilestones([]);
         } finally {
           setLoading(false);
@@ -1212,67 +967,39 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            const index2 = timelineRefs.current.findIndex(
-              (el) => el === entry.target
-            );
+            const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
             if (index2 !== -1) {
               setTimelineVisible((prev) => {
-                const newVisible = [...prev];
-                newVisible[index2] = true;
-                return newVisible;
+                const updated = [...prev];
+                updated[index2] = true;
+                return updated;
               });
+              observer.unobserve(entry.target);
             }
-            observer.unobserve(entry.target);
           }
         });
       },
       { threshold: 0.1 }
     );
     timelineRefs.current.forEach((el) => el && observer.observe(el));
-    return () => {
-      timelineRefs.current.forEach((el) => el && observer.unobserve(el));
-    };
+    return () => timelineRefs.current.forEach((el) => el && observer.unobserve(el));
   }, [milestones.length]);
   if (loading) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("milestone.status.loadingData") }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-main", children: t("milestone.status.loadingData") }) });
   }
   if (!milestones.length) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "section",
-      {
-        className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "h3",
-            {
-              className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-              children: t("milestone.status.noData")
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "p",
-            {
-              className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
-              children: t("milestone.noDataDescription")
-            }
-          )
-        ] })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2 text-main", children: t("milestone.status.noData") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: t("milestone.noDataDescription") })
+    ] }) });
   }
   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: `relative inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
-        children: [
-          "📈 ",
-          sectionTitle
-        ]
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border border-[var(--border-color)] bg-surface text-main shadow-sm hover:shadow-md transition-all duration-300", children: [
+      "📈 ",
+      sectionTitle
+    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-600 rounded-full" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-brand rounded-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
@@ -1280,35 +1007,12 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
           className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
           style: { transitionDelay: `${index2 * 200}ms` },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
-              {
-                className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "h3",
-                    {
-                      className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-                      children: milestone.title
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "p",
-                    {
-                      className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
-                      children: milestone.description
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
-              }
-            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-brand-primary font-bold text-xl mb-2", children: milestone.time }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title", children: milestone.title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: milestone.description })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 bg-gradient-brand rounded-full border-4 border-[var(--bg-body)] shadow-[0_0_10px_5px_rgba(37,99,235,0.4)] flex-shrink-0 z-10 animate-pulse" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
           ]
         },
@@ -1317,105 +1021,81 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
     ] })
   ] }) });
 };
-const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
-  var _a;
+const TestimonialsSection = ({ data, t, section }) => {
+  var _a, _b;
   const [currentIndex, setCurrentIndex] = useState(0);
-  const sectionTitle = (section == null ? void 0 : section.title) || "...";
-  const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => {
-    var _a2, _b, _c, _d;
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const sectionTitle = (section == null ? void 0 : section.title) || t("testimonials.sectionTitle") || "Cảm nhận khách hàng";
+  const testimonials = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => {
+    var _a2, _b2, _c, _d;
     return {
       quote: ((_a2 = item.data) == null ? void 0 : _a2.content) || "",
-      author: ((_b = item.data) == null ? void 0 : _b.customerName) || "",
-      position: ((_c = item.data) == null ? void 0 : _c.customerTitle) || t("testimonials.fallback.defaultPosition"),
+      author: ((_b2 = item.data) == null ? void 0 : _b2.customerName) || "",
+      position: ((_c = item.data) == null ? void 0 : _c.customerTitle) || "",
       company: ((_d = item.data) == null ? void 0 : _d.customerCompany) || ""
     };
   })) || [];
-  const fallbackTestimonials = [
-    {
-      quote: t("testimonials.fallback.testimonial1.quote"),
-      author: t("testimonials.fallback.testimonial1.author"),
-      position: t("testimonials.fallback.testimonial1.position"),
-      company: t("testimonials.fallback.testimonial1.company")
-    },
-    {
-      quote: t("testimonials.fallback.testimonial2.quote"),
-      author: t("testimonials.fallback.testimonial2.author"),
-      position: t("testimonials.fallback.testimonial2.position"),
-      company: t("testimonials.fallback.testimonial2.company")
-    },
-    {
-      quote: t("testimonials.fallback.testimonial3.quote"),
-      author: t("testimonials.fallback.testimonial3.author"),
-      position: t("testimonials.fallback.testimonial3.position"),
-      company: t("testimonials.fallback.testimonial3.company")
-    }
-  ];
-  const displayTestimonials = testimonials.length > 0 ? testimonials : fallbackTestimonials;
   useEffect(() => {
-    if (displayTestimonials.length > 1) {
+    if (testimonials.length > 1) {
       const interval = setInterval(() => {
-        setCurrentIndex((prev) => (prev + 1) % displayTestimonials.length);
+        setIsTransitioning(true);
+        setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+          setIsTransitioning(false);
+        }, 300);
       }, 5e3);
       return () => clearInterval(interval);
     }
-  }, [displayTestimonials.length]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: `inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300 border border-indigo-800" : "bg-indigo-100 text-indigo-800"}`,
-        children: [
-          "💬 ",
-          sectionTitle
-        ]
-      }
-    ),
+  }, [testimonials.length]);
+  const handleIndicatorClick = (index2) => {
+    if (index2 !== currentIndex) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentIndex(index2);
+        setIsTransitioning(false);
+      }, 300);
+    }
+  };
+  if (testimonials.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold mb-8 text-brand-primary shadow-sm", children: [
+      "💬 ",
+      sectionTitle
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white"}`,
+          style: {
+            opacity: isTransitioning ? 0 : 1,
+            transform: isTransitioning ? "translateY(10px)" : "translateY(0)",
+            transition: "opacity 0.3s ease-in-out, transform 0.3s ease-in-out"
+          },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "blockquote",
-              {
-                className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
-                children: [
-                  '"',
-                  displayTestimonials[currentIndex].quote,
-                  '"'
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("blockquote", { className: "card-text text-body italic mb-6", children: [
+              '"',
+              testimonials[currentIndex].quote,
+              '"'
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-                    children: displayTestimonials[currentIndex].author
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: displayTestimonials[currentIndex].position }),
-                displayTestimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
-                    children: displayTestimonials[currentIndex].company
-                  }
-                )
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title", children: testimonials[currentIndex].author }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text", children: testimonials[currentIndex].position }),
+                testimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link", children: testimonials[currentIndex].company })
               ] })
             ] })
           ]
-        },
-        currentIndex
-      ),
-      displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        }
+      ) }),
+      testimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: testimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
-          onClick: () => setCurrentIndex(index2),
-          className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`
+          onClick: () => handleIndicatorClick(index2),
+          className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-brand-secondary" : "bg-surface hover:bg-brand-primary"}`,
+          "aria-label": `Slide ${index2 + 1}`
         },
         index2
       )) })
@@ -1423,54 +1103,82 @@ const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
   ] }) });
 };
 const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
-  const logoUrl = getLogoUrl(partner.logo);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const logoUrl = getLogoUrl(partner.logoUrl);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      href: partner.website || partner.url || "#",
-      target: partner.website || partner.url ? "_blank" : "_self",
-      rel: partner.website || partner.url ? "noopener noreferrer" : "",
-      className: `group relative overflow-hidden rounded-2xl transition-all duration-500 hover:-translate-y-2 hover:scale-105 ${isDarkMode ? "bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 hover:border-blue-500/50" : "bg-gradient-to-br from-white to-gray-50 border border-gray-200 hover:border-blue-400/50"} shadow-lg hover:shadow-2xl`,
+      href: partner.websiteUrl || "#",
+      target: partner.websiteUrl ? "_blank" : "_self",
+      rel: partner.websiteUrl ? "noopener noreferrer" : "",
+      className: "card",
       style: {
         animationDelay: `${idx * 0.1}s`,
-        textDecoration: "none"
+        textDecoration: "none",
+        overflow: "hidden",
+        minHeight: "280px",
+        padding: "1.5rem",
+        display: "flex",
+        flexDirection: "column"
       },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500/0 via-purple-500/0 to-pink-500/0 group-hover:from-blue-500/10 group-hover:via-purple-500/10 group-hover:to-pink-500/10 transition-all duration-700" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative p-6 flex flex-col items-center justify-center min-h-[180px]", children: [
-          logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-24 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "img",
-            {
-              src: logoUrl,
-              alt: partner.name || t("partners.logoAlt") || "Partner logo",
-              className: "max-w-full max-h-full object-contain filter grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-110",
-              loading: "lazy"
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: `w-20 h-20 rounded-full flex items-center justify-center mb-4 ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-3xl", children: "🤝" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "h3",
-            {
-              className: `text-base font-bold text-center line-clamp-2 ${isDarkMode ? "text-white" : "text-gray-800"} group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:bg-clip-text transition-all duration-300`,
-              children: partner.name || t("partners.unnamed") || "Partner"
-            }
-          ),
-          partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "p",
-            {
-              className: `text-xs text-center mt-2 line-clamp-2 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
-              children: partner.description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-0 left-0 w-20 h-20 bg-gradient-to-tr from-purple-500/20 to-pink-500/20 rounded-tr-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" })
-      ]
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1
+      }, children: [
+        logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+          width: "100%",
+          height: "100px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1rem"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: logoUrl,
+            alt: partner.name || t("partners.logoAlt") || "Partner logo",
+            style: {
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
+              transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.05)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+            },
+            loading: "lazy"
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-surface", style: {
+          width: "5rem",
+          height: "5rem",
+          borderRadius: "9999px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1rem"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1.875rem" }, children: "🤝" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-main", style: {
+          fontSize: "1rem",
+          textAlign: "center",
+          marginBottom: "0.5rem",
+          lineHeight: "1.4"
+        }, children: partner.name || t("partners.unnamed") || "Partner" }),
+        partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", style: {
+          textAlign: "center",
+          marginTop: "0.5rem",
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          display: "-webkit-box",
+          WebkitLineClamp: 3,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden"
+        }, children: partner.description })
+      ] })
     }
   );
 };
@@ -1485,7 +1193,7 @@ function useWindowSize() {
   }, []);
   return width;
 }
-const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "", section }) => {
+const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
   const [partnersData, setPartnersData] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -1493,7 +1201,7 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
   const windowWidth = useWindowSize();
-  const sectionTitle = (section == null ? void 0 : section.title) || "...";
+  const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle");
   const getLogoUrl = (logoUrl) => {
     if (!logoUrl) return null;
     if (logoUrl.startsWith("http")) return logoUrl;
@@ -1538,9 +1246,7 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
     }
   }, [partners.length]);
   useEffect(() => {
-    const fallbackTimer = setTimeout(() => {
-      setPartnersVisible(true);
-    }, 500);
+    const fallbackTimer = setTimeout(() => setPartnersVisible(true), 500);
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -1553,54 +1259,46 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
       },
       { threshold: 0.1, rootMargin: "50px" }
     );
-    if (partnersRef.current) {
-      observer.observe(partnersRef.current);
-    } else {
+    if (partnersRef.current) observer.observe(partnersRef.current);
+    else {
       clearTimeout(fallbackTimer);
       setPartnersVisible(true);
     }
     return () => {
       clearTimeout(fallbackTimer);
-      if (partnersRef.current) {
-        observer.unobserve(partnersRef.current);
-      }
+      if (partnersRef.current) observer.unobserve(partnersRef.current);
     };
   }, []);
   if (loading) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-brand-secondary", children: t("partners.error") || error }) });
   }
   if (!partnersData.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-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
-        children: [
-          "🤝 ",
-          sectionTitle
-        ]
-      }
-    ) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { 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-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
+      "🤝 ",
+      sectionTitle
+    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[220px]", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "320px" }, children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: `absolute inset-0 w-full transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
-              style: { zIndex: slideIndex === currentPartnerSlide ? 10 : 1 },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              style: {
+                zIndex: slideIndex === currentPartnerSlide ? 10 : 1
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                 PartnerListCard,
                 {
                   partner,
                   idx,
                   t,
-                  isDarkMode,
                   getLogoUrl
                 },
                 partner.id || `${slideIndex}-${idx}`
@@ -1608,11 +1306,34 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
             },
             slideIndex
           )) }) }),
-          partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", style: { zIndex: 50 }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-3", style: {
+            position: "relative",
+            zIndex: 100,
+            paddingTop: "1rem"
+          }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               onClick: () => setCurrentPartnerSlide(index2),
-              className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125 shadow-lg" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`,
+              style: {
+                width: "12px",
+                height: "12px",
+                borderRadius: "50%",
+                border: "none",
+                cursor: "pointer",
+                transition: "all 0.3s ease",
+                backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(255, 255, 255, 0.3)",
+                transform: index2 === currentPartnerSlide ? "scale(1.3)" : "scale(1)"
+              },
+              onMouseEnter: (e) => {
+                if (index2 !== currentPartnerSlide) {
+                  e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (index2 !== currentPartnerSlide) {
+                  e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+                }
+              },
               "aria-label": `Slide ${index2 + 1}`
             },
             index2
@@ -2369,24 +2090,30 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
       setIsSubmitting(false);
     }
   });
-  const inputBaseClasses = `w-full px-4 py-3 rounded-xl border transition-all duration-200 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none ${isDarkMode ? "bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:border-indigo-500" : "bg-white border-slate-300 text-slate-900 placeholder-slate-500 focus:border-indigo-500"}`;
-  const labelClasses = `block text-sm font-semibold mb-2 ${isDarkMode ? "text-gray-300" : "text-slate-700"}`;
-  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: `rounded-2xl p-8 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
+  const inputBaseClasses = `
+    w-full px-4 py-3 rounded-xl border 
+    transition-all duration-200 
+    focus:ring-2 focus:outline-none
+    bg-surface
+    text-main
+    placeholder-text-muted
+  `;
+  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-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "text-white" }) }),
+      /* @__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(Send, { size: 20, className: "text-white" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-2xl font-bold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("form.title") || "Gửi yêu cầu tư vấn" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("form.subtitle") || "Điền thông tin để nhận tư vấn miễn phí từ chuyên gia" })
+        /* @__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" ? isDarkMode ? "bg-emerald-900/50 border-emerald-700 text-emerald-300" : "bg-emerald-50 border-emerald-200 text-emerald-800" : isDarkMode ? "bg-red-900/50 border-red-700 text-red-300" : "bg-red-50 border-red-200 text-red-800"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+    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(CircleCheckBig, { size: 20, className: "mr-2 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 20, className: "mr-2 flex-shrink-0" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: submitMessage })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small font-medium", children: submitMessage })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
             t("form.fields.fullName") || "Họ và tên",
             " *"
           ] }),
@@ -2398,18 +2125,19 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.fullName || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.fullName ? "border-red-500" : ""}`,
+              className: inputBaseClasses,
+              style: { borderColor: formErrors.fullName ? "#ef4444" : "var(--border-color)" },
               placeholder: t("contact.form.namePlaceholder"),
               required: true
             }
           ),
-          formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+          formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
             formErrors.fullName
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
             t("form.fields.workEmail") || "Email",
             " *"
           ] }),
@@ -2421,12 +2149,13 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.workEmail || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.workEmail ? "border-red-500" : ""}`,
+              className: inputBaseClasses,
+              style: { borderColor: formErrors.workEmail ? "#ef4444" : "var(--border-color)" },
               placeholder: "email@company.com",
               required: true
             }
           ),
-          formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+          formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
             formErrors.workEmail
           ] })
@@ -2434,7 +2163,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.phoneNumber") || "Số điện thoại" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.phoneNumber") || "Số điện thoại" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2443,17 +2172,18 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.phoneNumber || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.phoneNumber ? "border-red-500" : ""}`,
+              className: inputBaseClasses,
+              style: { borderColor: formErrors.phoneNumber ? "#ef4444" : "var(--border-color)" },
               placeholder: "0901 234 567"
             }
           ),
-          formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+          formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
             formErrors.phoneNumber
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.companyName") || "Công ty/Tổ chức" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.companyName") || "Công ty/Tổ chức" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2462,11 +2192,12 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.companyName || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.companyName ? "border-red-500" : ""}`,
+              className: inputBaseClasses,
+              style: { borderColor: formErrors.companyName ? "#ef4444" : "var(--border-color)" },
               placeholder: t("contact.form.fields.company")
             }
           ),
-          formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+          formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
             formErrors.companyName
           ] })
@@ -2474,7 +2205,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.jobTitle") || "Chức vụ" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.jobTitle") || "Chức vụ" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2483,17 +2214,18 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.jobTitle || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.jobTitle ? "border-red-500" : ""}`,
+              className: inputBaseClasses,
+              style: { borderColor: formErrors.jobTitle ? "#ef4444" : "var(--border-color)" },
               placeholder: t("contact.form.positionPlaceholder")
             }
           ),
-          formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+          formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
             formErrors.jobTitle
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.businessType") || "Loại hình kinh doanh" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.businessType") || "Loại hình kinh doanh" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2502,6 +2234,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.businessType || "",
               onChange: handleInputChange,
               className: inputBaseClasses,
+              style: { borderColor: "var(--border-color)" },
               placeholder: t("form.fields.businessType")
             }
           )
@@ -2509,7 +2242,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedBudget") || "Ngân sách dự kiến" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.expectedBudget") || "Ngân sách dự kiến" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2518,12 +2251,13 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.expectedBudget || "",
               onChange: handleInputChange,
               className: inputBaseClasses,
+              style: { borderColor: "var(--border-color)" },
               placeholder: t("form.fields.expectedBudget")
             }
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedTimeline") || "Thời gian dự kiến" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.expectedTimeline") || "Thời gian dự kiến" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -2532,13 +2266,14 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
               value: formData.expectedTimeline || "",
               onChange: handleInputChange,
               className: inputBaseClasses,
+              style: { borderColor: "var(--border-color)" },
               placeholder: t("form.fields.expectedTimeline")
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
           t("form.fields.requestTitle") || "Tiêu đề yêu cầu",
           " *"
         ] }),
@@ -2550,18 +2285,19 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             value: formData.requestTitle || "",
             onChange: handleInputChange,
             onBlur: handleBlur,
-            className: `${inputBaseClasses} ${formErrors.requestTitle ? "border-red-500" : ""}`,
+            className: inputBaseClasses,
+            style: { borderColor: formErrors.requestTitle ? "#ef4444" : "var(--border-color)" },
             placeholder: t("contact.form.placeholders.subject"),
             required: true
           }
         ),
-        formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+        formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
           formErrors.requestTitle
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
           t("form.fields.requestDescription") || "Mô tả yêu cầu",
           " *"
         ] }),
@@ -2573,48 +2309,32 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
             onChange: handleInputChange,
             onBlur: handleBlur,
             rows: "5",
-            className: `${inputBaseClasses} resize-none ${formErrors.requestDescription ? "border-red-500" : ""}`,
+            className: `${inputBaseClasses} resize-none`,
+            style: { borderColor: formErrors.requestDescription ? "#ef4444" : "var(--border-color)" },
             placeholder: t("contact.form.placeholders.message"),
             required: true
           }
         ),
-        formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+        formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
           formErrors.requestDescription
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: isSubmitting,
-            className: "flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 px-6 rounded-xl hover:from-indigo-700 hover:to-purple-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center font-semibold shadow-lg",
-            children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "animate-spin h-5 w-5 mr-2" }),
-              t("form.submitting") || "Đang gửi..."
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "mr-2" }),
-              t("form.submit") || "Gửi yêu cầu"
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            type: "button",
-            className: `px-6 py-4 rounded-xl border-2 font-semibold transition-all hover:scale-105 ${isDarkMode ? "border-gray-600 text-gray-300 hover:bg-gray-700" : "border-slate-300 text-slate-700 hover:bg-slate-50"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 20, className: "inline mr-2" }),
-              t("form.callNow") || "Gọi ngay"
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center space-x-2 text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { size: 16, className: "text-emerald-500" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("form.privacy") || "Cam kết bảo mật thông tin và phản hồi trong 24 giờ" })
-      ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "submit",
+          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(LoaderCircle, { className: "animate-spin h-5 w-5 mr-2" }),
+            t("form.submitting") || "Đang gửi..."
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "mr-2" }),
+            t("form.submit") || "Gửi yêu cầu"
+          ] })
+        }
+      ) })
     ] })
   ] }) }) }) }) });
 };
@@ -2624,65 +2344,110 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
   const sectionTitle = (section == null ? void 0 : section.title) || "...";
   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 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, className: "mr-2" }),
-      sectionTitle
+    /* @__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(User, { size: 22, className: "mr-2 text-brand-primary" }),
+      /* @__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) => {
-      var _a2;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: `rounded-2xl p-8 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600", children: ((_a2 = contact.name) == null ? void 0 : _a2.charAt(0)) || "A" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block px-3 py-1 rounded-full text-sm font-semibold ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: contact.position })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "a",
-                {
-                  href: `tel:${contact.phone}`,
-                  className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-green-900/50 text-green-400" : "bg-green-50 text-green-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18 }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.phone") || "Điện thoại" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.phone })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "a",
-                {
-                  href: `mailto:${contact.email}`,
-                  className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-indigo-900/50 text-indigo-400" : "bg-indigo-50 text-indigo-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18 }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: "Email" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.email })
-                    ] })
-                  ]
-                }
-              ),
-              contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center p-3 rounded-xl ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 ${isDarkMode ? "bg-purple-900/50 text-purple-400" : "bg-purple-50 text-purple-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18 }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.workingHours") || "Giờ làm việc" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.workingHours || t("contact.info.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
-                ] })
+    /* @__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: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+          width: "5rem",
+          height: "5rem",
+          borderRadius: "9999px",
+          margin: "0 auto 1rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 32, style: { color: "white" } }) }),
+        /* @__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 })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: `tel:${contact.phone}`,
+            className: "card-link",
+            style: {
+              padding: "0.75rem",
+              borderRadius: "0.75rem",
+              backgroundColor: "var(--bg-body)",
+              borderWidth: "1px",
+              borderColor: "var(--border-color)",
+              transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+                width: "2.5rem",
+                height: "2.5rem",
+                borderRadius: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "0.75rem"
+              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, style: { color: "white" } }) }),
+              /* @__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 })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: `mailto:${contact.email}`,
+            className: "card-link",
+            style: {
+              padding: "0.75rem",
+              borderRadius: "0.75rem",
+              backgroundColor: "var(--bg-body)",
+              borderWidth: "1px",
+              borderColor: "var(--border-color)",
+              transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-accent", style: {
+                width: "2.5rem",
+                height: "2.5rem",
+                borderRadius: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "0.75rem"
+              }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18, style: { color: "white" } }) }),
+              /* @__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 })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "w-full py-3 px-4 rounded-xl font-semibold transition-all transform hover:scale-105 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg", children: t("contact.buttons.contactNow") || "Liên hệ ngay" }) })
-          ]
-        },
-        contact.id || index2
-      );
-    }) })
+            ]
+          }
+        ),
+        contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "0.75rem",
+          borderRadius: "0.75rem",
+          backgroundColor: "var(--bg-body)",
+          borderWidth: "1px",
+          borderColor: "var(--border-color)"
+        }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+            width: "2.5rem",
+            height: "2.5rem",
+            borderRadius: "0.5rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginRight: "0.75rem"
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18, style: { color: "white" } }) }),
+          /* @__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" })
+          ] })
+        ] })
+      ] })
+    ] }, contact.id || index2)) })
   ] }) });
 };
 const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }) => {
@@ -2710,89 +2475,136 @@ const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }
     }
   });
   if (loading) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `inline-block w-10 h-10 border-4 ${isDarkMode ? "border-gray-600 border-t-blue-500" : "border-gray-300 border-t-blue-500"} rounded-full animate-spin` }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `mt-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("contactList.status.loading") || "Đang tải danh sách liên hệ..." })
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-block w-10 h-10 border-4 border-color rounded-full animate-spin", style: { borderTopColor: "var(--brand-primary)" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-4 text-muted", children: t("contactList.status.loading") || "Đang tải danh sách liên hệ..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${isDarkMode ? "text-red-400" : "text-red-500"} text-base mb-2`, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-base mb-2", style: { color: "#ef4444" }, children: [
         "⚠️ ",
         t("contactList.error.title") || "Lỗi tải dữ liệu"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: error })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: error })
     ] });
   }
   if (!contacts || contacts.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-5xl mb-5", children: "📞" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-2`, children: t("contactList.status.noData.title") || "Chưa có thông tin liên hệ" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-500" : "text-gray-500"}`, children: t("contactList.status.noData.description") || "Danh sách liên hệ sẽ hiển thị tại đây" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-muted mb-2", children: t("contactList.status.noData.title") || "Chưa có thông tin liên hệ" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted opacity-75", children: t("contactList.status.noData.description") || "Danh sách liên hệ sẽ hiển thị tại đây" })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto px-5", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-16", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold ${isDarkMode ? "text-white" : "text-gray-900"} mb-4`, children: sectionTitle }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10", children: contacts.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContactCard, { contact, t, isDarkMode }, contact.id || index2)) })
+  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(User, { size: 22, className: "mr-2 text-brand-primary" }),
+      /* @__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)) })
   ] }) });
 };
 const ContactCard = ({ contact, t, isDarkMode }) => {
-  var _a, _b;
-  const [isHovered, setIsHovered] = useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: `
-        ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} rounded-2xl p-8 border cursor-pointer transition-all duration-300
-        ${isHovered ? `shadow-xl ${isDarkMode ? "shadow-gray-900/40" : "shadow-gray-500/20"} -translate-y-2` : `shadow-lg ${isDarkMode ? "shadow-gray-900/20" : "shadow-gray-500/10"}`}
-      `,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-15 h-15 rounded-full ${isDarkMode ? "bg-blue-600" : "bg-blue-500"} flex items-center justify-center text-white text-2xl font-bold mr-4`, children: ((_b = (_a = contact.name) == null ? void 0 : _a.charAt(0)) == null ? void 0 : _b.toUpperCase()) || "?" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-semibold ${isDarkMode ? "text-white" : "text-gray-900"} mb-1`, children: contact.name || t("contactList.card.noName") || "Không có tên" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-base ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: contact.position || t("contactList.card.noPosition") || "Chưa có chức vụ" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContactInfo,
-            {
-              icon: "📧",
-              label: t("contactList.card.email") || "Email",
-              value: contact.email,
-              href: `mailto:${contact.email}`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContactInfo,
-            {
-              icon: "📱",
-              label: t("contactList.card.phone") || "Điện thoại",
-              value: contact.phone,
-              href: `tel:${contact.phone}`
-            }
-          )
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+        width: "5rem",
+        height: "5rem",
+        borderRadius: "9999px",
+        margin: "0 auto 1rem",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 32, style: { color: "white" } }) }),
+      /* @__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ụ" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+      contact.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "a",
+        {
+          href: `tel:${contact.phone}`,
+          className: "card-link",
+          style: {
+            padding: "0.75rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "var(--bg-body)",
+            borderWidth: "1px",
+            borderColor: "var(--border-color)",
+            transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+              width: "2.5rem",
+              height: "2.5rem",
+              borderRadius: "0.5rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginRight: "0.75rem"
+            }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, style: { color: "white" } }) }),
+            /* @__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 })
+            ] })
+          ]
+        }
+      ),
+      contact.email && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "a",
+        {
+          href: `mailto:${contact.email}`,
+          className: "card-link",
+          style: {
+            padding: "0.75rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "var(--bg-body)",
+            borderWidth: "1px",
+            borderColor: "var(--border-color)",
+            transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-accent", style: {
+              width: "2.5rem",
+              height: "2.5rem",
+              borderRadius: "0.5rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginRight: "0.75rem"
+            }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18, style: { color: "white" } }) }),
+            /* @__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 })
+            ] })
+          ]
+        }
+      ),
+      contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "0.75rem",
+        borderRadius: "0.75rem",
+        backgroundColor: "var(--bg-body)",
+        borderWidth: "1px",
+        borderColor: "var(--border-color)"
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
+          width: "2.5rem",
+          height: "2.5rem",
+          borderRadius: "0.5rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "0.75rem"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18, style: { color: "white" } }) }),
+        /* @__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" })
         ] })
-      ]
-    }
-  );
-};
-const ContactInfo = ({ icon, label, value, href, isDarkMode }) => {
-  if (!value) return null;
-  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center py-3 border-b ${isDarkMode ? "border-gray-600" : "border-gray-100"} last:border-b-0`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg mr-3 w-6 text-center", children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-0.5`, children: label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-base font-medium ${href ? `${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-500 hover:text-blue-600"}` : `${isDarkMode ? "text-white" : "text-gray-900"}`} transition-colors duration-200`, children: value })
+      ] })
     ] })
   ] });
-  if (href) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, className: `no-underline text-inherit block ${isDarkMode ? "hover:bg-gray-700/50" : "hover:bg-gray-50"} rounded-lg -mx-2 px-2 transition-colors duration-200`, children: content });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mx-2 px-2", children: content });
 };
 const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback, section }) => {
   const [feedbacks, setFeedbacks] = useState([]);
@@ -2876,7 +2688,7 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300 border border-indigo-800" : "bg-indigo-100 text-indigo-800"}`,
+          className: "\r\n          inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 \r\n          border shadow-sm \r\n          section-badge\r\n        ",
           children: [
             "💬 ",
             sectionTitle
@@ -2887,37 +2699,19 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white shadow-lg"}`,
+            className: "card",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "blockquote",
-                {
-                  className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 leading-relaxed ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
-                  children: [
-                    '"',
-                    currentFeedback.content,
-                    '"'
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("blockquote", { className: "card-text text-lg lg:text-xl italic mb-6 leading-relaxed", children: [
+                '"',
+                currentFeedback.content,
+                '"'
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-                      children: currentFeedback.customerName
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: currentFeedback.customerTitle }),
-                  currentFeedback.customerCompany && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
-                      children: currentFeedback.customerCompany
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title text-base mb-1", children: currentFeedback.customerName }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link text-sm", children: currentFeedback.customerTitle }),
+                  currentFeedback.customerCompany && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text text-xs mt-1", children: currentFeedback.customerCompany })
                 ] })
               ] })
             ]
@@ -2928,8 +2722,11 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
           "button",
           {
             onClick: () => setCurrentIndex(index2),
-            className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`,
-            "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`
+            "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`,
+            className: `
+            w-2.5 h-2.5 rounded-full transition-all duration-300
+            ${index2 === currentIndex ? "bg-brand-secondary" : "bg-surface hover:bg-brand-primary"}
+          `
           },
           index2
         )) })
@@ -3183,28 +2980,12 @@ const TextWithTitleSection = ({ section, data, isDarkMode }) => {
   const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
   const title = ((_a = textItems[0]) == null ? void 0 : _a.value) || "";
   const descriptions = textItems.slice(1);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
-    title && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
-      fontSize: "36px",
-      fontWeight: "700",
-      color: isDarkMode ? "#ffffff" : "#000000",
-      marginBottom: "16px",
-      lineHeight: "1.2",
-      textAlign: "left",
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-    }, children: title }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto", children: [
+    title && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title font-black mb-4 leading-tight text-left text-main", children: title }),
     descriptions.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        style: {
-          fontSize: "16px",
-          lineHeight: "1.6",
-          color: isDarkMode ? "#9ca3af" : "#6b7280",
-          textAlign: "left",
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-          fontWeight: "400",
-          marginBottom: index2 < descriptions.length - 1 ? "16px" : "0"
-        },
+        className: `text-body leading-relaxed text-left font-normal text-muted ${index2 < descriptions.length - 1 ? "mb-4" : ""}`,
         children: item.value
       },
       item.id || index2
@@ -3213,19 +2994,10 @@ const TextWithTitleSection = ({ section, data, isDarkMode }) => {
 };
 const TextSection = ({ data, isDarkMode }) => {
   const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-3xl mx-auto", children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      style: {
-        padding: "0",
-        marginBottom: "20px",
-        fontSize: "28px",
-        fontWeight: "700",
-        lineHeight: "1.3",
-        color: isDarkMode ? "#f9fafb" : "#111827",
-        textAlign: "left",
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-      },
+      className: "mb-5 text-subtitle font-black leading-snug text-left text-main",
       children: item.value
     },
     item.id || index2
@@ -3272,25 +3044,23 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
     };
     return icons[iconName] || Settings;
   };
-  const getColorClasses = (index2) => {
+  const getColorStyles = (index2) => {
     const isCyan = index2 % 2 === 0;
     if (isCyan) {
       return {
-        border: "border-cyan-400/40",
-        bg: "bg-gradient-to-r from-blue-900/90 to-cyan-900/90",
-        glow: "shadow-cyan-500/20",
-        hoverGlow: "hover:shadow-cyan-400/50",
-        line: "#22d3ee",
-        iconBg: "bg-cyan-500/20"
+        gradient: "linear-gradient(to right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
+        border: "var(--gradient-brand-soft-start)",
+        line: "var(--gradient-brand-soft-start)",
+        iconBg: "var(--gradient-brand-soft-start)",
+        shadow: "rgba(59, 130, 246, 0.2)"
       };
     }
     return {
-      border: "border-purple-400/40",
-      bg: "bg-gradient-to-r from-purple-900/90 to-pink-900/90",
-      glow: "shadow-purple-500/20",
-      hoverGlow: "hover:shadow-purple-400/50",
-      line: "#c084fc",
-      iconBg: "bg-purple-500/20"
+      gradient: "linear-gradient(to right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
+      border: "var(--gradient-accent-soft-start)",
+      line: "var(--gradient-accent-soft-start)",
+      iconBg: "var(--gradient-accent-soft-start)",
+      shadow: "rgba(139, 92, 246, 0.2)"
     };
   };
   const calculateAngles = (count) => {
@@ -3300,12 +3070,13 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
   };
   const angles = calculateAngles(modules.length);
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} p-4 relative overflow-hidden`, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full p-4 relative overflow-hidden bg-section-soft", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none opacity-20", children: [...Array(50)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full opacity-20`,
+          className: "absolute rounded-full bg-brand-primary",
           style: {
+            opacity: 0.2,
             width: Math.random() * 3 + 1 + "px",
             height: Math.random() * 3 + 1 + "px",
             top: Math.random() * 100 + "%",
@@ -3326,26 +3097,38 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
             to { opacity: 1; transform: translateY(0); }
           }
         ` }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `mb-6 ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500"} backdrop-blur-md rounded-2xl border-2 ${isDarkMode ? "border-cyan-400/40" : "border-white/40"} p-6 shadow-2xl text-center`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-1 tracking-wide", children: diagramName }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg text-white/90", children: diagramDescription })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 backdrop-blur-md rounded-2xl border-2 p-6 shadow-2xl text-center bg-gradient-brand border-brand-primary", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-inverse mb-1 tracking-wide", children: diagramName }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-inverse", children: diagramDescription })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: modules.map((module, index2) => {
         const Icon2 = getIconComponent(module.icon);
-        const colors = getColorClasses(index2);
+        const colors = getColorStyles(index2);
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "a",
           {
             href: module.url || "#",
-            className: `block ${colors.bg} backdrop-blur-md rounded-2xl border-2 ${colors.border} p-4 flex items-center gap-3 shadow-lg active:scale-95 transition-all duration-200`,
+            className: "block backdrop-blur-md rounded-2xl border-2 p-4 flex items-center gap-3 shadow-lg active:scale-95 transition-all duration-200",
             style: {
+              background: colors.gradient,
+              borderColor: colors.border,
               animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
             },
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-3 rounded-xl ${colors.border} border`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-white", strokeWidth: 2 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "flex-shrink-0 p-3 rounded-xl border",
+                  style: {
+                    backgroundColor: `${colors.iconBg}33`,
+                    borderColor: colors.border
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2 })
+                }
+              ),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white font-semibold text-sm tracking-wide mb-1", children: module.name }),
-                module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white/70 text-xs", children: module.description })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-small tracking-wide mb-1", children: module.name }),
+                module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-caption", children: module.description })
               ] })
             ]
           },
@@ -3354,12 +3137,13 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
       }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} py-12 px-4 sm:px-8 relative overflow-hidden transition-colors duration-300`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "section-wrapper w-full py-24 px-4 sm:px-8 relative overflow-visible bg-section-soft", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [...Array(100)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full ${isDarkMode ? "opacity-20" : "opacity-10"}`,
+        className: "absolute rounded-full bg-brand-primary",
         style: {
+          opacity: isDarkMode ? 0.2 : 0.1,
           width: Math.random() * 4 + 1 + "px",
           height: Math.random() * 4 + 1 + "px",
           top: Math.random() * 100 + "%",
@@ -3370,11 +3154,26 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
       },
       i
     )) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("pattern", { id: "grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: isDarkMode ? "cyan" : "blue", strokeWidth: "0.5" }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: `absolute inset-0 w-full h-full pointer-events-none ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: { opacity: isDarkMode ? 0.1 : 0.05 },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("pattern", { id: "grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              d: "M 40 0 L 0 0 0 40",
+              fill: "none",
+              stroke: "var(--brand-primary)",
+              strokeWidth: "0.5"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { opacity: isDarkMode ? 0.3 : 0.2 }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "20%", x2: "100%", y2: "20%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "10 5", className: "animate-pulse" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "40%", x2: "100%", y2: "40%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "60%", x2: "100%", y2: "60%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1s" } }),
@@ -3383,20 +3182,20 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "35%", y1: "0", x2: "35%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.8s" } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "65%", y1: "0", x2: "65%", y2: "100%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1.3s" } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "85%", y1: "0", x2: "85%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "8 4", className: "animate-pulse", style: { animationDelay: "1.8s" } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15%", cy: "20%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "35%", cy: "40%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "65%", cy: "60%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1s" } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "85%", cy: "80%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15%", cy: "20%", r: "3", fill: "var(--gradient-brand-soft-start)", opacity: "0.6", className: "animate-pulse" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "35%", cy: "40%", r: "3", fill: "var(--gradient-accent-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "65%", cy: "60%", r: "3", fill: "var(--gradient-brand-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1s" } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "85%", cy: "80%", r: "3", fill: "var(--gradient-accent-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad1", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#22d3ee", stopOpacity: 0 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#22d3ee", stopOpacity: 1 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#22d3ee", stopOpacity: 0 } })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 1 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0 } })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad2", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#c084fc", stopOpacity: 0 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#c084fc", stopOpacity: 1 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#c084fc", stopOpacity: 0 } })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 0 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 1 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 0 } })
         ] })
       ] })
     ] }),
@@ -3457,41 +3256,77 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
           }
         }
       ` }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "diagram-container relative w-full max-w-5xl mx-auto h-[700px] flex items-center justify-center transition-transform duration-300", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "diagram-container relative w-full max-w-5xl mx-auto h-[800px] flex items-center justify-center transition-transform duration-300", style: { paddingTop: "80px", paddingBottom: "80px" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 w-[320px] h-[320px] -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-pulse-ring" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-4 rounded-full border-2 border-purple-500/30 animate-pulse-ring", style: { animationDelay: "0.5s" } })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full border-2 animate-pulse-ring",
+              style: { borderColor: "var(--brand-primary)", opacity: 0.3 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute inset-4 rounded-full border-2 animate-pulse-ring",
+              style: {
+                borderColor: "var(--brand-secondary)",
+                opacity: 0.3,
+                animationDelay: "0.5s"
+              }
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative animate-float", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-64 h-64 rounded-full border-8 ${isDarkMode ? "border-slate-600/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50" : "border-gray-300/50 bg-gradient-to-br from-white/50 to-gray-100/50"} flex items-center justify-center backdrop-blur-sm shadow-2xl`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full", style: { animation: "rotate 20s linear infinite" }, children: [0, 90, 180, 270].map((angle) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute w-3 h-3 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50",
-                style: {
-                  top: "50%",
-                  left: "50%",
-                  transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-125px)`
-                }
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: "w-64 h-64 rounded-full border-8 flex items-center justify-center backdrop-blur-sm shadow-2xl bg-surface",
+              style: {
+                borderColor: "var(--border-color)"
               },
-              angle
-            )) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-52 h-52 rounded-full ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90 border-cyan-400/40" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500 border-white/40"} flex items-center justify-center shadow-2xl relative overflow-hidden border-2 backdrop-blur-md`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center relative z-10 px-4", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-2 tracking-wide", children: diagramName }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-white/90", children: diagramDescription })
-              ] })
-            ] })
-          ] }),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full", style: { animation: "rotate 20s linear infinite" }, children: [0, 90, 180, 270].map((angle) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute w-3 h-3 rounded-full shadow-lg bg-brand-primary",
+                    style: {
+                      boxShadow: "0 0 10px var(--brand-primary)",
+                      top: "50%",
+                      left: "50%",
+                      transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-125px)`
+                    }
+                  },
+                  angle
+                )) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    className: "w-52 h-52 rounded-full flex items-center justify-center shadow-2xl relative overflow-hidden border-2 backdrop-blur-md bg-gradient-brand",
+                    style: {
+                      borderColor: isDarkMode ? "var(--gradient-brand-soft-start)" : "rgba(255, 255, 255, 0.4)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center relative z-10 px-4", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-inverse mb-2 tracking-wide", children: diagramName }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-inverse", children: diagramDescription })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
           modules.map((module, i) => {
             const angle = angles[i];
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: `absolute w-4 h-4 ${isDarkMode ? "bg-slate-400 border-slate-600" : "bg-gray-400 border-gray-600"} rounded-full border-2 shadow-lg animate-pulse`,
+                className: "absolute w-4 h-4 rounded-full border-2 shadow-lg animate-pulse bg-muted",
                 style: {
+                  borderColor: "var(--border-color)",
                   top: "50%",
                   left: "50%",
                   transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-132px)`,
@@ -3504,7 +3339,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", width: "1000", height: "900", style: { overflow: "visible" }, children: modules.map((module, index2) => {
-        const colors = getColorClasses(index2);
+        const colors = getColorStyles(index2);
         const angle = angles[index2] * Math.PI / 180;
         const circleRadius = 132;
         const moduleRadius = 360;
@@ -3545,7 +3380,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
       }) }),
       modules.map((module, index2) => {
         const Icon2 = getIconComponent(module.icon);
-        const colors = getColorClasses(index2);
+        const colors = getColorStyles(index2);
         const angle = angles[index2] * Math.PI / 180;
         const radius = 360;
         const x = Math.cos(angle) * radius;
@@ -3567,19 +3402,11 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
-                className: `
-                ${colors.bg} backdrop-blur-md rounded-full 
-                border-2 ${colors.border} ${colors.glow}
-                px-5 py-3 flex items-center gap-3
-                shadow-xl ${colors.hoverGlow}
-                transition-all duration-300
-                group-hover:scale-110 group-hover:-translate-y-3 group-hover:shadow-2xl
-                cursor-pointer
-                relative
-                ${isRightSide ? "flex-row-reverse" : "flex-row"}
-              `,
+                className: `backdrop-blur-md rounded-full border-2 px-5 py-3 flex items-center gap-3 shadow-xl transition-all duration-300 group-hover:scale-110 group-hover:-translate-y-3 group-hover:shadow-2xl cursor-pointer relative ${isRightSide ? "flex-row-reverse" : "flex-row"}`,
                 style: {
-                  boxShadow: "0 10px 40px rgba(0, 0, 0, 0.3)",
+                  background: colors.gradient,
+                  borderColor: colors.border,
+                  boxShadow: `0 10px 40px ${colors.shadow}`,
                   width: "240px",
                   height: "56px",
                   minWidth: "240px",
@@ -3587,14 +3414,49 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colors.border} opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110 blur-sm` }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-2.5 rounded-lg ${colors.border} border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-white", strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-white font-semibold text-sm tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 ${isDarkMode ? "bg-slate-800 border-slate-600" : "bg-white border-gray-300"} ${isDarkMode ? "text-white" : "text-gray-800"} text-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs`, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: module.name }),
-                    module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs mt-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: module.description }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent ${isDarkMode ? "border-t-slate-800" : "border-t-white"}` })
-                  ] })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0 rounded-full border-2 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110 blur-sm",
+                      style: { borderColor: colors.border }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: "flex-shrink-0 p-2.5 rounded-lg border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10",
+                      style: {
+                        backgroundColor: `${colors.iconBg}33`,
+                        borderColor: colors.border
+                      },
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-inverse", strokeWidth: 2 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-inverse text-small tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs ${isDarkMode ? "bg-surface" : "bg-body"}`,
+                      style: {
+                        borderColor: "var(--border-color)",
+                        maxHeight: "120px",
+                        overflowY: "auto"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-main", children: module.name }),
+                        module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module.description }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "div",
+                          {
+                            className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent",
+                            style: {
+                              borderTopColor: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
                 ]
               }
             )
@@ -3602,24 +3464,82 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
           module.id
         );
       }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-12 right-12 sm:bottom-16 sm:right-20", style: { animation: "rotate 10s linear infinite" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "80", height: "80", viewBox: "0 0 60 60", className: `${isDarkMode ? "text-purple-300" : "text-purple-400"} opacity-40`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30 L25 25 Z", fill: "currentColor" }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-12 left-12 w-16 h-16 border-2 border-cyan-400/30 rounded-lg animate-pulse", style: { animation: "rotate 8s linear infinite reverse" } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-20 right-16 w-12 h-12 border-2 border-purple-400/30 rounded-full animate-pulse" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute bottom-12 right-12 sm:bottom-16 sm:right-20 opacity-40 text-brand-secondary",
+          style: { animation: "rotate 10s linear infinite" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "80", height: "80", viewBox: "0 0 60 60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30 L25 25 Z", fill: "currentColor" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute top-12 left-12 w-16 h-16 border-2 rounded-lg animate-pulse border-brand-primary",
+          style: {
+            opacity: 0.3,
+            animation: "rotate 8s linear infinite reverse"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute top-20 right-16 w-12 h-12 border-2 rounded-full animate-pulse border-brand-secondary",
+          style: {
+            opacity: 0.3
+          }
+        }
+      )
     ] })
   ] });
 };
-const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description }) => {
+const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description, isDarkMode }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [dragStartPos, setDragStartPos] = useState(null);
   const [hasMoved, setHasMoved] = useState(false);
-  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 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 colorStyle = getColorStyles(color);
   const handleMouseDown = (e) => {
     setDragStartPos({ x: e.clientX, y: e.clientY });
     setHasMoved(false);
@@ -3702,12 +3622,45 @@ const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDrag
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
       children: [
-        /* @__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 })
+        /* @__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 ${colorStyle.shadowColor}4D`,
+              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
+          }
+        )
       ]
     }
   );
@@ -3928,49 +3881,108 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
     "div",
     {
       ref: containerRef,
-      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" },
+      className: "mind-map-container relative w-full h-screen overflow-hidden bg-section-soft",
+      style: {
+        touchAction: "none"
+      },
       children: [
-        /* @__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(
+        /* @__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(
           "div",
           {
-            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"
-        } }) }),
+            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 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(
+            "div",
+            {
+              className: "absolute inset-0 blur-3xl w-20 h-20 sm:w-32 sm:h-32 bg-gradient-brand",
+              style: {
+                opacity: 0.2
+              }
+            }
+          ),
           /* @__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%", 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.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.jsxs("linearGradient", { id: "sparkle-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-              /* @__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.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.jsxs("filter", { id: "glow", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
@@ -3985,11 +3997,11 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
               "path",
               {
                 d: line.path,
-                stroke: "rgba(167, 139, 250, 0.2)",
+                stroke: "var(--gradient-brand-soft-start)",
                 strokeWidth: "6",
                 fill: "none",
                 className: "transition-all duration-200",
-                style: { filter: "blur(8px)" }
+                style: { filter: "blur(8px)", opacity: 0.2 }
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4021,7 +4033,8 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
             delay: node.delay,
             onDragStart: handleNodeDragStart,
             isDragging: draggingNodeId === node.id,
-            onClick: handleNodeClick
+            onClick: handleNodeClick,
+            isDarkMode
           },
           node.id
         )) }),
@@ -4055,15 +4068,52 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
             },
             onTouchEnd: () => setIsDragging(false),
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-              /* @__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") })
+              /* @__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: "var(--brand-primary)",
+                    borderOpacity: 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")
+                }
+              )
             ] })
           }
         ),
@@ -4083,13 +4133,12 @@ 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; }
       ` })
       ]
     }
   );
 };
-const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
+const FaqItem = ({ faq, index: index2, isActive, onToggle, t }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -4098,79 +4147,69 @@ const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
         animationFillMode: "both"
       },
       className: "animate-slide-up",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: `
-          rounded-xl border transition-all duration-500 ease-out transform
-          ${isDarkMode ? "bg-gradient-to-br from-gray-800 to-gray-800/50 border-gray-700/50" : "bg-white border-gray-200"}
-          ${isActive ? `scale-[1.02] ${isDarkMode ? "shadow-2xl shadow-blue-500/20 border-blue-500/30" : "shadow-xl shadow-blue-100 border-blue-200"}` : "shadow-md hover:shadow-lg"}
-          hover:scale-[1.01]
-        `,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                onClick: onToggle,
-                className: `
-            w-full px-6 py-5 text-left flex items-start justify-between gap-4
-            transition-all duration-300
-            ${isDarkMode ? "hover:bg-gray-700/30" : "hover:bg-gray-50/50"}
-            rounded-xl
-            group
-          `,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
-            text-lg font-semibold flex-1 transition-colors duration-300
-            ${isActive ? isDarkMode ? "text-blue-400" : "text-blue-600" : isDarkMode ? "text-white group-hover:text-blue-300" : "text-gray-900 group-hover:text-blue-600"}
-          `, children: faq.question }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", style: { padding: 0 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: onToggle,
+            className: "w-full px-6 py-5 text-left flex items-start justify-between gap-4 rounded-xl group",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "card-title flex-1", children: faq.question }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
             flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center
             transition-all duration-500 transform
-            ${isActive ? `bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg ${isDarkMode ? "shadow-blue-500/50" : "shadow-blue-300"} rotate-180 scale-110` : `${isDarkMode ? "bg-gray-700/50 text-gray-400 group-hover:bg-gray-600" : "bg-gray-100 text-gray-500 group-hover:bg-gray-200"} group-hover:scale-110`}
+            ${isActive ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg shadow-blue-500/50 rotate-180 scale-110" : "bg-gray-700/50 text-gray-400 group-hover:bg-gray-600 group-hover:scale-110"}
           `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-5 h-5 transition-transform duration-500 ${isActive ? "rotate-180" : ""}` }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              maxHeight: isActive ? "500px" : "0",
+              opacity: isActive ? "1" : "0",
+              overflow: "hidden",
+              transition: "all 500ms ease-in-out"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
-                className: `
-            overflow-hidden transition-all duration-500 ease-in-out
-            ${isActive ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}
-          `,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `
-            px-6 pb-6 pt-2
-            ${isDarkMode ? "text-gray-300" : "text-gray-600"}
-            transition-all duration-500
-            ${isActive ? "translate-y-0" : "-translate-y-4"}
-          `, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-px w-full mb-4 ${isDarkMode ? "bg-gradient-to-r from-transparent via-gray-700 to-transparent" : "bg-gradient-to-r from-transparent via-gray-200 to-transparent"}` }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `prose prose-sm max-w-none leading-relaxed ${isDarkMode ? "prose-invert" : ""}`, children: faq.answer }),
+                className: "px-6 pb-6 pt-2",
+                style: {
+                  transform: isActive ? "translateY(0)" : "translateY(-10px)",
+                  transition: "transform 500ms ease-in-out"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: "h-px w-full mb-4",
+                      style: {
+                        background: "linear-gradient(to right, transparent, var(--border-color), transparent)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text leading-relaxed", children: faq.answer }),
                   faq.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "a",
                     {
                       href: faq.url,
                       target: "_blank",
                       rel: "noopener noreferrer",
-                      className: `
-                  inline-flex items-center gap-2 mt-5 px-4 py-2 rounded-lg text-sm font-medium
-                  transition-all duration-300 transform hover:scale-105
-                  ${isDarkMode ? "text-blue-400 hover:text-blue-300 bg-blue-500/10 hover:bg-blue-500/20" : "text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100"}
-                  group/link
-                `,
+                      className: "card-link mt-4",
                       children: [
                         (t == null ? void 0 : t("faq.learn_more")) || "Learn more",
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
                       ]
                     }
                   )
-                ] })
+                ]
               }
             )
-          ]
-        }
-      )
+          }
+        )
+      ] })
     }
   );
 };
@@ -4188,22 +4227,39 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
   const sectionTitle = (section == null ? void 0 : section.title) || "...";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionWrapper, { isDarkMode, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mb-6 animate-fade-in", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `
-            w-10 h-10 rounded-lg flex items-center justify-center
-            ${isDarkMode ? "bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg shadow-blue-500/20" : "bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-200"}
-            transform hover:scale-110 transition-all duration-300
-          `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "svg",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mb-6 animate-fade-in", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
         {
-          className: "w-6 h-6 text-white",
-          fill: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" })
+          className: "w-10 h-10 rounded-lg flex items-center justify-center",
+          style: {
+            background: "linear-gradient(to bottom right, var(--brand-primary), var(--brand-secondary))",
+            boxShadow: "0 10px 15px -3px var(--card-shadow)",
+            transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
+          onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "svg",
+            {
+              className: "w-6 h-6 text-white",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" })
+            }
+          )
         }
-      ) }) }),
+      ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold mb-3 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: sectionTitle }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-1 w-20 mx-auto rounded-full ${isDarkMode ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-600 to-indigo-600"}` })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-3", children: sectionTitle }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "h-1 w-20 mx-auto rounded-full",
+            style: {
+              background: "linear-gradient(to right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))"
+            }
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: faqs.map((faq, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         FaqItem,
@@ -4212,7 +4268,6 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
           index: index2,
           isActive: activeIndex === index2,
           onToggle: () => toggleFaq(index2),
-          isDarkMode,
           t
         },
         faq.id || index2
@@ -4229,7 +4284,6 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
             transform: translateY(0);
           }
         }
-
         @keyframes slide-up {
           from {
             opacity: 0;
@@ -4240,11 +4294,9 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
             transform: translateY(0);
           }
         }
-
         .animate-fade-in {
           animation: fade-in 0.8s ease-out;
         }
-
         .animate-slide-up {
           animation: slide-up 0.6s ease-out;
         }
@@ -4285,141 +4337,147 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     return () => clearInterval(interval);
   }, [highlightData.length]);
   const gradientClasses = [
-    "from-blue-600 to-purple-600",
-    "from-purple-600 to-pink-600",
-    "from-blue-500 to-purple-500",
-    "from-purple-500 to-pink-500",
-    "from-emerald-600 to-teal-600",
-    "from-orange-500 to-red-500"
+    "btn-primary"
   ];
   const defaultImage = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop&q=80";
   if (!highlightData.length) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-slate-950" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: t("highlight.noData.title") || "Chưa có dữ liệu" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: t("highlight.noData.description") || "Hiện tại chưa có sản phẩm nào được thiết lập." })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 text-main`, children: t("highlight.noData.title") || "Chưa có dữ liệu" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: t("highlight.noData.description") || "Hiện tại chưa có sản phẩm nào được thiết lập." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: `relative overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950" : "bg-gradient-to-br from-white via-blue-50/30 to-purple-50/30"}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none opacity-30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-0 left-0 w-full h-full ${isDarkMode ? "bg-grid-white" : "bg-grid-slate"}` }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `absolute top-20 right-10 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob ${isDarkMode ? "bg-blue-500" : "bg-blue-400"}`
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `absolute top-40 -left-20 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-2000 ${isDarkMode ? "bg-purple-500" : "bg-purple-400"}`
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `absolute -bottom-20 right-40 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000 ${isDarkMode ? "bg-pink-500" : "bg-pink-400"}`
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", children: highlightData.map((item, index2) => {
-        const color = gradientClasses[index2 % gradientClasses.length];
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${isDarkMode ? "bg-gradient-to-br from-slate-900/30 to-slate-950/30 border-slate-700/20" : "bg-white/40 border-white/30"} backdrop-blur-md rounded-3xl shadow-lg overflow-hidden border transition-colors duration-500`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[420px] lg:h-auto", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "img",
-                  {
-                    src: item.image || defaultImage,
-                    alt: item.title,
-                    className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
-                    onError: (e) => {
-                      e.target.src = defaultImage;
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "h1",
-                  {
-                    className: `text-3xl lg:text-4xl font-black mb-3 bg-gradient-to-r ${color} bg-clip-text text-transparent`,
-                    children: item.title
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-description mb-6", children: item.description }),
-                item.features && item.features.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-6", children: item.features.map((feature, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 group", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-0.5 w-4 h-4 rounded-full bg-gradient-to-r ${color} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-2.5 h-2.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `${isDarkMode ? "text-gray-300 group-hover:text-white" : "text-gray-700 group-hover:text-gray-900"} font-medium text-xs transition-colors`, children: feature })
-                ] }, idx)) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "a",
-                  {
-                    href: item.slug,
-                    rel: "noopener noreferrer",
-                    className: `group relative px-6 py-3 rounded-xl font-bold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden bg-gradient-to-r ${color} text-white shadow-xl w-full text-center`,
-                    onClick: (e) => {
-                      if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
-                        e.preventDefault();
-                        window.location.href = item.slug;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "section",
+    {
+      className: "relative overflow-hidden",
+      style: {
+        background: isDarkMode ? "linear-gradient(to bottom right, var(--color-gray-950), var(--color-gray-900), var(--color-gray-950))" : "linear-gradient(to bottom right, var(--bg-primary), #eff6ff50, #f3e8ff50)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute top-20 right-10 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob",
+              style: {
+                backgroundColor: isDarkMode ? "var(--gradient-brand-soft-start)" : "var(--gradient-brand-soft-start)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute top-40 -left-20 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-2000",
+              style: {
+                backgroundColor: isDarkMode ? "var(--gradient-accent-soft-start)" : "var(--gradient-accent-soft-start)",
+                animationDelay: "2s"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute -bottom-20 right-40 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000",
+              style: {
+                backgroundColor: isDarkMode ? "var(--gradient-accent-soft-end)" : "var(--gradient-accent-soft-end)",
+                animationDelay: "4s"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", children: highlightData.map((item, index2) => {
+            const color = gradientClasses[index2 % gradientClasses.length];
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${isDarkMode ? "bg-gradient-to-br from-slate-900/30 to-slate-950/30 border-slate-700/20" : "bg-white/40 border-white/30"} backdrop-blur-md rounded-3xl shadow-lg overflow-hidden border transition-colors duration-500`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[420px] lg:h-auto", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "img",
+                      {
+                        src: item.image || defaultImage,
+                        alt: item.title,
+                        className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
+                        onError: (e) => {
+                          e.target.src = defaultImage;
+                        }
                       }
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
-                        t("highlight.cta") || "Khám phá",
-                        " ",
-                        item.title,
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          "svg",
-                          {
-                            className: "w-5 h-5 group-hover:translate-x-1 transition-transform",
-                            fill: "none",
-                            viewBox: "0 0 24 24",
-                            stroke: "currentColor",
-                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                              "path",
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl lg:text-4xl font-black mb-3 text-gradient-brand", children: item.title }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-6 text-muted", children: item.description }),
+                    item.features && item.features.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-6", children: item.features.map((feature, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 group", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 w-4 h-4 rounded-full bg-gradient-accent flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-2.5 h-2.5 text-inverse", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted group-hover:text-main font-medium text-xs transition-colors", children: feature })
+                    ] }, idx)) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "a",
+                      {
+                        href: item.slug,
+                        rel: "noopener noreferrer",
+                        className: `group relative px-6 py-3 rounded-xl font-bold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden bg-gradient-to-r ${color} text-white shadow-xl w-full text-center`,
+                        onClick: (e) => {
+                          if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
+                            e.preventDefault();
+                            window.location.href = item.slug;
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
+                            t("highlight.cta") || "Khám phá",
+                            " ",
+                            item.title,
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(
+                              "svg",
                               {
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
-                                strokeWidth: 2,
-                                d: "M17 8l4 4m0 0l-4 4m4-4H3"
+                                className: "w-5 h-5 group-hover:translate-x-1 transition-transform",
+                                fill: "none",
+                                viewBox: "0 0 24 24",
+                                stroke: "currentColor",
+                                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                  "path",
+                                  {
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    strokeWidth: 2,
+                                    d: "M17 8l4 4m0 0l-4 4m4-4H3"
+                                  }
+                                )
                               }
                             )
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
-                    ]
-                  }
-                )
-              ] })
-            ] }) })
-          },
-          index2
-        );
-      }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
-        const color = gradientClasses[index2 % gradientClasses.length];
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            onClick: () => setActiveTab(index2),
-            className: `group relative px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 transform hover:scale-105 overflow-hidden ${activeTab === index2 ? `bg-gradient-to-r ${color} text-white shadow-xl` : isDarkMode ? "bg-gray-800/50 text-gray-300 hover:shadow-xl shadow-lg border border-gray-700/50 backdrop-blur-sm" : "bg-white text-gray-700 hover:shadow-xl shadow-lg"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
-              activeTab !== index2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-r ${color} opacity-0 group-hover:opacity-100 transition-opacity duration-300` })
-            ]
-          },
-          index2
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+                          ] }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }) })
+              },
+              index2
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
+            const color = gradientClasses[index2 % gradientClasses.length];
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => setActiveTab(index2),
+                className: `group relative px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 transform hover:scale-105 overflow-hidden ${activeTab === index2 ? `bg-gradient-to-r ${color} text-white shadow-xl` : isDarkMode ? "bg-gray-800/50 text-gray-300 hover:shadow-xl shadow-lg border border-gray-700/50 backdrop-blur-sm" : "bg-white text-gray-700 hover:shadow-xl shadow-lg"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
+                  activeTab !== index2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-r ${color} opacity-0 group-hover:opacity-100 transition-opacity duration-300` })
+                ]
+              },
+              index2
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
         @keyframes blob {
           0%, 100% {
             transform: translate(0px, 0px) scale(1);
@@ -4456,7 +4514,9 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
           background-size: 50px 50px;
         }
       ` })
-  ] });
+      ]
+    }
+  );
 };
 const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
   var _a;
@@ -4481,23 +4541,9 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
     maxWidth: "1400px",
     margin: "0 auto"
   }, children: [
-    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
-      marginBottom: "50px",
-      textAlign: "center"
-    }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
-        fontSize: "36px",
-        fontWeight: "700",
-        marginBottom: "16px",
-        color: isDarkMode ? "#f9fafb" : "#4b5563"
-      }, children: sectionTitle }),
-      sectionDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
-        fontSize: "16px",
-        lineHeight: "1.6",
-        color: isDarkMode ? "#d1d5db" : "#6b7280",
-        maxWidth: "900px",
-        margin: "0 auto"
-      }, children: sectionDescription })
+    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-4", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted max-w-3xl mx-auto", children: sectionDescription })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
       display: "grid",
@@ -4510,30 +4556,13 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
         "a",
         {
           href: page.slug,
+          className: "card",
           style: {
-            backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
-            borderRadius: "12px",
-            padding: "32px 20px",
-            cursor: "pointer",
-            transition: "all 0.3s",
-            border: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
-            boxShadow: isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-            display: "flex",
-            flexDirection: "column",
             alignItems: "center",
             textAlign: "center",
             gap: "16px",
-            textDecoration: "none"
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.transform = "translateY(-8px)";
-            e.currentTarget.style.boxShadow = isDarkMode ? "0 20px 25px -5px rgba(0, 0, 0, 0.5)" : "0 20px 25px -5px rgba(0, 0, 0, 0.15)";
-            e.currentTarget.style.borderColor = "#361985ff";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.transform = "translateY(0)";
-            e.currentTarget.style.boxShadow = isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
-            e.currentTarget.style.borderColor = isDarkMode ? "#374151" : "#e5e7eb";
+            textDecoration: "none",
+            padding: "32px 20px"
           },
           children: [
             iconUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
@@ -4554,13 +4583,7 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
-              fontSize: "16px",
-              fontWeight: "600",
-              color: isDarkMode ? "#f9fafb" : "#4b5563",
-              margin: 0,
-              lineHeight: "1.4"
-            }, children: page.title })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-body", style: { margin: 0 }, children: page.title })
           ]
         },
         page.id
@@ -4624,44 +4647,25 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
     maxWidth: "1280px",
     margin: "0 auto"
   }, children: [
-    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
-      fontSize: "28px",
-      fontWeight: "700",
-      marginBottom: "40px",
-      color: isDarkMode ? "#f9fafb" : "#1e40af",
-      textTransform: "uppercase",
-      letterSpacing: "0.5px"
-    }, children: sectionTitle }),
+    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-10 uppercase tracking-wide", children: sectionTitle }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: "24px"
     }, children: visiblePages.map((page) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       const mainImage = ((_b = (_a2 = page.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || page.icon;
       const imageUrl = getImageUrl(mainImage);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "a",
         {
           href: page.slug,
+          className: "card",
           style: {
-            display: "flex",
+            flexDirection: "row",
             gap: "20px",
-            backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
-            borderRadius: "8px",
-            overflow: "hidden",
-            cursor: "pointer",
-            transition: "all 0.2s",
-            border: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
-            padding: "16px",
             textDecoration: "none"
           },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = isDarkMode ? "#374151" : "#f9fafb";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.backgroundColor = isDarkMode ? "#1f2937" : "#ffffff";
-          },
           children: [
             imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
               width: "200px",
@@ -4681,33 +4685,10 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
-              flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center"
-            }, children: [
-              page.tagKeys && page.tagKeys.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-                fontSize: "12px",
-                fontWeight: "600",
-                color: isDarkMode ? "#60a5fa" : "#2563eb",
-                marginBottom: "8px",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px"
-              }, children: page.tagKeys[0].key }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
-                fontSize: "18px",
-                fontWeight: "700",
-                marginBottom: "8px",
-                color: isDarkMode ? "#f9fafb" : "#1f2937",
-                lineHeight: "1.4"
-              }, children: page.title }),
-              page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
-                fontSize: "14px",
-                lineHeight: "1.6",
-                color: isDarkMode ? "#d1d5db" : "#6b7280",
-                margin: 0
-              }, children: page.description })
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-center flex-1", children: [
+              ((_c = page.tagKeys) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link ", children: page.tagKeys[0].key }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title mb-2 leading-snug", children: page.title }),
+              page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text m-0", children: page.description })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
               display: "flex",
@@ -4717,10 +4698,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
               ChevronRight,
               {
                 size: 20,
-                style: {
-                  color: isDarkMode ? "#9ca3af" : "#d1d5db",
-                  transition: "color 0.2s"
-                }
+                className: "card-text"
               }
             ) })
           ]
@@ -4732,6 +4710,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
       "button",
       {
         onClick: handleLoadMore,
+        className: "btn-primary",
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -4740,20 +4719,9 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
           fontSize: "16px",
           fontWeight: "600",
           color: "#fff",
-          backgroundColor: "#361985ff",
           border: "none",
           borderRadius: "9999px",
-          cursor: "pointer",
-          transition: "all 0.3s",
-          boxShadow: "0 4px 6px -1px rgba(37, 99, 235, 0.3)"
-        },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "#361985ff";
-          e.currentTarget.style.transform = "translateY(-2px)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = "#361985ff";
-          e.currentTarget.style.transform = "translateY(0)";
+          cursor: "pointer"
         },
         children: [
           t("pageChildrenSelect.moreInsights"),
@@ -4785,12 +4753,7 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
     maxWidth: "1400px",
     margin: "0 auto"
   }, children: [
-    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
-      fontSize: "36px",
-      fontWeight: "700",
-      marginBottom: "50px",
-      color: isDarkMode ? "#f1f5f9" : "#1e293b"
-    }, children: sectionTitle }),
+    sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title mb-12 text-main", children: sectionTitle }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
@@ -4804,24 +4767,12 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
         "a",
         {
           href: page.slug,
+          className: "card",
           style: {
-            backgroundColor: isDarkMode ? "#1e293b" : "#ffffff",
-            borderRadius: "16px",
-            overflow: "hidden",
-            cursor: "pointer",
-            transition: "all 0.3s",
-            boxShadow: isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.5)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-            border: `1px solid ${isDarkMode ? "#334155" : "#e2e8f0"}`,
             textDecoration: "none",
-            display: "block"
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.transform = "translateY(-8px)";
-            e.currentTarget.style.boxShadow = isDarkMode ? "0 20px 25px -5px rgba(0, 0, 0, 0.6)" : "0 20px 25px -5px rgba(0, 0, 0, 0.15)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.transform = "translateY(0)";
-            e.currentTarget.style.boxShadow = isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.5)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+            display: "block",
+            padding: "0",
+            overflow: "hidden"
           },
           children: [
             imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
@@ -4848,26 +4799,13 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
-              padding: "24px"
-            }, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
-                fontSize: "20px",
-                fontWeight: "700",
-                marginBottom: "12px",
-                color: isDarkMode ? "#f1f5f9" : "#1e293b",
-                lineHeight: "1.4",
-                minHeight: "56px"
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { padding: "1.5rem" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle", style: {
+                minHeight: "56px",
+                marginBottom: "0.75rem"
               }, children: page.title }),
-              page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
-                fontSize: "14px",
-                lineHeight: "1.6",
-                color: isDarkMode ? "#cbd5e1" : "#64748b",
-                marginBottom: "16px",
-                display: "-webkit-box",
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden"
+              page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text line-clamp-2", style: {
+                marginBottom: "1rem"
               }, children: page.description })
             ] })
           ]
@@ -4882,6 +4820,7 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
       "button",
       {
         onClick: handleLoadMore,
+        className: "btn-primary",
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -4890,22 +4829,9 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
           fontSize: "16px",
           fontWeight: "600",
           color: "#ffffff",
-          backgroundColor: "#361985ff",
           border: "none",
           borderRadius: "50px",
-          cursor: "pointer",
-          transition: "all 0.3s",
-          boxShadow: "0 4px 6px -1px rgba(239, 68, 68, 0.3)"
-        },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "#361985ff";
-          e.currentTarget.style.transform = "translateY(-2px)";
-          e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(239, 68, 68, 0.4)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = "#361985ff";
-          e.currentTarget.style.transform = "translateY(0)";
-          e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(239, 68, 68, 0.3)";
+          cursor: "pointer"
         },
         children: [
           t("pageChildrenSelect.moreInsights"),