nvis-fe-cms-libs 1.1.42 → 2.0.0

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

@@ -382,8 +382,7 @@ var __async = (__this, __arguments, generator) => {
         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();
       }
     };
@@ -395,41 +394,28 @@ var __async = (__this, __arguments, generator) => {
     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 = require$$0.useRef([]);
     const [visible, setVisible] = require$$0.useState([]);
     require$$0.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) => {
@@ -449,152 +435,43 @@ var __async = (__this, __arguments, generator) => {
         { 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",
@@ -672,7 +549,7 @@ var __async = (__this, __arguments, generator) => {
             ] }),
             /* @__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"}`,
@@ -690,16 +567,10 @@ var __async = (__this, __arguments, generator) => {
                           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(
@@ -728,32 +599,20 @@ var __async = (__this, __arguments, generator) => {
       ),
       /* @__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"
             }
           )
         ] }),
@@ -774,12 +633,12 @@ var __async = (__this, __arguments, generator) => {
       ] }) }) })
     ] });
   };
-  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] = require$$0.useState([]);
     const timelineRefs = require$$0.useRef([]);
-    const sectionTitle = (section == null ? void 0 : section.title) || "...";
+    const sectionTitle = (section == null ? void 0 : section.title) || "Timeline";
     require$$0.useEffect(() => {
       setTimelineVisible(new Array(timelineData.length).fill(false));
     }, [timelineData.length]);
@@ -788,73 +647,38 @@ var __async = (__this, __arguments, generator) => {
         (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",
           {
@@ -862,64 +686,12 @@ var __async = (__this, __arguments, generator) => {
             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" })
             ]
           },
@@ -931,6 +703,7 @@ var __async = (__this, __arguments, generator) => {
   const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
     const itemRef = require$$0.useRef(null);
     const [visible, setVisible] = require$$0.useState(false);
+    const [isHovered, setIsHovered] = require$$0.useState(false);
     require$$0.useEffect(() => {
       const observer = new IntersectionObserver(
         (entries) => {
@@ -952,93 +725,82 @@ var __async = (__this, __arguments, generator) => {
         /* @__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
-        }
-      ),
-      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);
+          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",
+            " →"
+          ]
         }
-      ` })
+      )
     ] });
+    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",
@@ -1047,10 +809,12 @@ var __async = (__this, __arguments, generator) => {
           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
         }
       );
@@ -1059,10 +823,10 @@ var __async = (__this, __arguments, generator) => {
       "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
       }
     );
@@ -1079,14 +843,14 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     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] = require$$0.useState(0);
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.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;
@@ -1129,17 +893,11 @@ var __async = (__this, __arguments, generator) => {
       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",
         {
@@ -1155,8 +913,7 @@ var __async = (__this, __arguments, generator) => {
                     partner,
                     idx,
                     t,
-                    getLogoUrl,
-                    isDarkMode
+                    getLogoUrl
                   },
                   partner.id || idx
                 )) })
@@ -1167,7 +924,8 @@ var __async = (__this, __arguments, generator) => {
               "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
             )) })
@@ -1189,12 +947,9 @@ var __async = (__this, __arguments, generator) => {
           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);
@@ -1215,67 +970,39 @@ var __async = (__this, __arguments, generator) => {
         (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",
           {
@@ -1283,35 +1010,12 @@ var __async = (__this, __arguments, generator) => {
             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" })
             ]
           },
@@ -1320,105 +1024,81 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] }) });
   };
-  const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
-    var _a;
+  const TestimonialsSection = ({ data, t, section }) => {
+    var _a, _b;
     const [currentIndex, setCurrentIndex] = require$$0.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] = require$$0.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;
     require$$0.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
         )) })
@@ -1426,54 +1106,82 @@ var __async = (__this, __arguments, generator) => {
     ] }) });
   };
   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 })
+        ] })
       }
     );
   };
@@ -1488,7 +1196,7 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     return width;
   }
-  const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "", section }) => {
+  const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
     const [partnersData, setPartnersData] = require$$0.useState([]);
     const [error, setError] = require$$0.useState(null);
     const [loading, setLoading] = require$$0.useState(true);
@@ -1496,7 +1204,7 @@ var __async = (__this, __arguments, generator) => {
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.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;
@@ -1541,9 +1249,7 @@ var __async = (__this, __arguments, generator) => {
       }
     }, [partners.length]);
     require$$0.useEffect(() => {
-      const fallbackTimer = setTimeout(() => {
-        setPartnersVisible(true);
-      }, 500);
+      const fallbackTimer = setTimeout(() => setPartnersVisible(true), 500);
       const observer = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
@@ -1556,54 +1262,46 @@ var __async = (__this, __arguments, generator) => {
         },
         { 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}`
@@ -1611,11 +1309,34 @@ var __async = (__this, __arguments, generator) => {
               },
               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
@@ -2372,24 +2093,30 @@ var __async = (__this, __arguments, generator) => {
         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",
               " *"
             ] }),
@@ -2401,18 +2128,19 @@ var __async = (__this, __arguments, generator) => {
                 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",
               " *"
             ] }),
@@ -2424,12 +2152,13 @@ var __async = (__this, __arguments, generator) => {
                 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
             ] })
@@ -2437,7 +2166,7 @@ var __async = (__this, __arguments, generator) => {
         ] }),
         /* @__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",
               {
@@ -2446,17 +2175,18 @@ var __async = (__this, __arguments, generator) => {
                 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",
               {
@@ -2465,11 +2195,12 @@ var __async = (__this, __arguments, generator) => {
                 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
             ] })
@@ -2477,7 +2208,7 @@ var __async = (__this, __arguments, generator) => {
         ] }),
         /* @__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",
               {
@@ -2486,17 +2217,18 @@ var __async = (__this, __arguments, generator) => {
                 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",
               {
@@ -2505,6 +2237,7 @@ var __async = (__this, __arguments, generator) => {
                 value: formData.businessType || "",
                 onChange: handleInputChange,
                 className: inputBaseClasses,
+                style: { borderColor: "var(--border-color)" },
                 placeholder: t("form.fields.businessType")
               }
             )
@@ -2512,7 +2245,7 @@ var __async = (__this, __arguments, generator) => {
         ] }),
         /* @__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",
               {
@@ -2521,12 +2254,13 @@ var __async = (__this, __arguments, generator) => {
                 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",
               {
@@ -2535,13 +2269,14 @@ var __async = (__this, __arguments, generator) => {
                 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",
             " *"
           ] }),
@@ -2553,18 +2288,19 @@ var __async = (__this, __arguments, generator) => {
               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",
             " *"
           ] }),
@@ -2576,48 +2312,32 @@ var __async = (__this, __arguments, generator) => {
               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"
+            ] })
+          }
+        ) })
       ] })
     ] }) }) }) }) });
   };
@@ -2627,65 +2347,110 @@ var __async = (__this, __arguments, generator) => {
     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 }) => {
@@ -2713,89 +2478,136 @@ var __async = (__this, __arguments, generator) => {
       }
     });
     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] = require$$0.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] = require$$0.useState([]);
@@ -2879,7 +2691,7 @@ var __async = (__this, __arguments, generator) => {
         /* @__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
@@ -2890,37 +2702,19 @@ var __async = (__this, __arguments, generator) => {
           /* @__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 })
                   ] })
                 ] })
               ]
@@ -2931,8 +2725,11 @@ var __async = (__this, __arguments, generator) => {
             "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
           )) })
@@ -3186,28 +2983,12 @@ var __async = (__this, __arguments, generator) => {
     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
@@ -3216,19 +2997,10 @@ var __async = (__this, __arguments, generator) => {
   };
   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
@@ -3275,25 +3047,23 @@ var __async = (__this, __arguments, generator) => {
       };
       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) => {
@@ -3303,12 +3073,13 @@ var __async = (__this, __arguments, generator) => {
     };
     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 + "%",
@@ -3329,26 +3100,38 @@ var __async = (__this, __arguments, generator) => {
             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((module2, index2) => {
           const Icon2 = getIconComponent(module2.icon);
-          const colors = getColorClasses(index2);
+          const colors = getColorStyles(index2);
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "a",
             {
               href: module2.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: module2.name }),
-                  module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white/70 text-xs", children: module2.description })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-small tracking-wide mb-1", children: module2.name }),
+                  module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-caption", children: module2.description })
                 ] })
               ]
             },
@@ -3357,12 +3140,13 @@ var __async = (__this, __arguments, generator) => {
         }) })
       ] });
     }
-    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 + "%",
@@ -3373,11 +3157,26 @@ var __async = (__this, __arguments, generator) => {
         },
         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" } }),
@@ -3386,20 +3185,20 @@ var __async = (__this, __arguments, generator) => {
         /* @__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 } })
           ] })
         ] })
       ] }),
@@ -3460,41 +3259,77 @@ var __async = (__this, __arguments, generator) => {
           }
         }
       ` }),
-      /* @__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((module2, 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)`,
@@ -3507,7 +3342,7 @@ var __async = (__this, __arguments, generator) => {
           ] })
         ] }),
         /* @__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((module2, index2) => {
-          const colors = getColorClasses(index2);
+          const colors = getColorStyles(index2);
           const angle = angles[index2] * Math.PI / 180;
           const circleRadius = 132;
           const moduleRadius = 360;
@@ -3548,7 +3383,7 @@ var __async = (__this, __arguments, generator) => {
         }) }),
         modules.map((module2, index2) => {
           const Icon2 = getIconComponent(module2.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;
@@ -3570,19 +3405,11 @@ var __async = (__this, __arguments, generator) => {
               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",
@@ -3590,14 +3417,49 @@ var __async = (__this, __arguments, generator) => {
                   },
                   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: module2.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: module2.name }),
-                      module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs mt-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: module2.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: module2.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: module2.name }),
+                          module2.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module2.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)"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    )
                   ]
                 }
               )
@@ -3605,24 +3467,82 @@ var __async = (__this, __arguments, generator) => {
             module2.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] = require$$0.useState(false);
     const [dragStartPos, setDragStartPos] = require$$0.useState(null);
     const [hasMoved, setHasMoved] = require$$0.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);
@@ -3705,12 +3625,45 @@ var __async = (__this, __arguments, generator) => {
         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
+            }
+          )
         ]
       }
     );
@@ -3931,49 +3884,108 @@ var __async = (__this, __arguments, generator) => {
       "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" }),
@@ -3988,11 +4000,11 @@ var __async = (__this, __arguments, generator) => {
                 "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(
@@ -4024,7 +4036,8 @@ var __async = (__this, __arguments, generator) => {
               delay: node.delay,
               onDragStart: handleNodeDragStart,
               isDragging: draggingNodeId === node.id,
-              onClick: handleNodeClick
+              onClick: handleNodeClick,
+              isDarkMode
             },
             node.id
           )) }),
@@ -4058,15 +4071,52 @@ var __async = (__this, __arguments, generator) => {
               },
               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")
+                  }
+                )
               ] })
             }
           ),
@@ -4086,13 +4136,12 @@ var __async = (__this, __arguments, generator) => {
           animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
           opacity: 0;
         }
-        .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
       ` })
         ]
       }
     );
   };
-  const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
+  const FaqItem = ({ faq, index: index2, isActive, onToggle, t }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -4101,79 +4150,69 @@ var __async = (__this, __arguments, generator) => {
           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" }) })
                         ]
                       }
                     )
-                  ] })
+                  ]
                 }
               )
-            ]
-          }
-        )
+            }
+          )
+        ] })
       }
     );
   };
@@ -4191,22 +4230,39 @@ var __async = (__this, __arguments, generator) => {
     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,
@@ -4215,7 +4271,6 @@ var __async = (__this, __arguments, generator) => {
             index: index2,
             isActive: activeIndex === index2,
             onToggle: () => toggleFaq(index2),
-            isDarkMode,
             t
           },
           faq.id || index2
@@ -4232,7 +4287,6 @@ var __async = (__this, __arguments, generator) => {
             transform: translateY(0);
           }
         }
-
         @keyframes slide-up {
           from {
             opacity: 0;
@@ -4243,11 +4297,9 @@ var __async = (__this, __arguments, generator) => {
             transform: translateY(0);
           }
         }
-
         .animate-fade-in {
           animation: fade-in 0.8s ease-out;
         }
-
         .animate-slide-up {
           animation: slide-up 0.6s ease-out;
         }
@@ -4288,141 +4340,147 @@ var __async = (__this, __arguments, generator) => {
       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);
@@ -4459,7 +4517,9 @@ var __async = (__this, __arguments, generator) => {
           background-size: 50px 50px;
         }
       ` })
-    ] });
+        ]
+      }
+    );
   };
   const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
     var _a;
@@ -4484,23 +4544,9 @@ var __async = (__this, __arguments, generator) => {
       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",
@@ -4513,30 +4559,13 @@ var __async = (__this, __arguments, generator) => {
           "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: {
@@ -4557,13 +4586,7 @@ var __async = (__this, __arguments, generator) => {
                   }
                 }
               ) }),
-              /* @__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
@@ -4627,44 +4650,25 @@ var __async = (__this, __arguments, generator) => {
       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",
@@ -4684,33 +4688,10 @@ var __async = (__this, __arguments, generator) => {
                   }
                 }
               ) }),
-              /* @__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",
@@ -4720,10 +4701,7 @@ var __async = (__this, __arguments, generator) => {
                 ChevronRight,
                 {
                   size: 20,
-                  style: {
-                    color: isDarkMode ? "#9ca3af" : "#d1d5db",
-                    transition: "color 0.2s"
-                  }
+                  className: "card-text"
                 }
               ) })
             ]
@@ -4735,6 +4713,7 @@ var __async = (__this, __arguments, generator) => {
         "button",
         {
           onClick: handleLoadMore,
+          className: "btn-primary",
           style: {
             display: "inline-flex",
             alignItems: "center",
@@ -4743,20 +4722,9 @@ var __async = (__this, __arguments, generator) => {
             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"),
@@ -4788,12 +4756,7 @@ var __async = (__this, __arguments, generator) => {
       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))",
@@ -4807,24 +4770,12 @@ var __async = (__this, __arguments, generator) => {
           "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: {
@@ -4851,26 +4802,13 @@ var __async = (__this, __arguments, generator) => {
                   }
                 }
               ) }),
-              /* @__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 })
               ] })
             ]
@@ -4885,6 +4823,7 @@ var __async = (__this, __arguments, generator) => {
         "button",
         {
           onClick: handleLoadMore,
+          className: "btn-primary",
           style: {
             display: "inline-flex",
             alignItems: "center",
@@ -4893,22 +4832,9 @@ var __async = (__this, __arguments, generator) => {
             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"),