nvis-fe-cms-libs 1.1.28 → 1.1.30

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

@@ -457,7 +457,7 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
         "div",
         {
           ref: (el) => refs.current[index2] = el,
-          className: `flex items-start space-x-4 rounded-lg p-4 transform transition-all duration-700 ease-out border ${isDarkMode ? "border-gray-700" : "border-gray-300"} ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
+          className: `flex items-start space-x-4 rounded-2xl p-6 transform transition-all duration-700 ease-out border backdrop-blur-sm ${isDarkMode ? "border-blue-800/40 bg-gradient-to-br from-blue-900/30 via-indigo-900/20 to-purple-900/30 hover:from-blue-800/40 hover:to-purple-800/40" : "border-gray-200 bg-transparent hover:border-gray-300"} ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
           style: { transitionDelay: `${index2 * 200}ms` },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -507,6 +507,76 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
     }
   }) });
 };
+const SectionWrapper = ({
+  variant,
+  isDarkMode,
+  className = "",
+  children
+}) => {
+  const defaultVariant = "neutral";
+  const currentVariant = variant || defaultVariant;
+  const variants = {
+    blue: {
+      light: "bg-gradient-to-b from-white via-blue-100 to-white",
+      dark: "bg-gradient-to-b from-gray-950 via-blue-900 to-gray-950",
+      lightDecor1: "bg-blue-200/30",
+      lightDecor2: "bg-blue-300/30",
+      darkDecor1: "bg-blue-500/10",
+      darkDecor2: "bg-blue-600/10"
+    },
+    purple: {
+      light: "bg-gradient-to-b from-white via-purple-100 to-white",
+      dark: "bg-gradient-to-b from-gray-950 via-purple-900 to-gray-950",
+      lightDecor1: "bg-purple-200/30",
+      lightDecor2: "bg-pink-200/30",
+      darkDecor1: "bg-purple-500/10",
+      darkDecor2: "bg-pink-500/10"
+    },
+    green: {
+      light: "bg-gradient-to-b from-white via-emerald-100 to-white",
+      dark: "bg-gradient-to-b from-gray-950 via-emerald-900 to-gray-950",
+      lightDecor1: "bg-emerald-200/30",
+      lightDecor2: "bg-teal-200/30",
+      darkDecor1: "bg-emerald-500/10",
+      darkDecor2: "bg-teal-500/10"
+    },
+    neutral: {
+      light: "bg-gradient-to-b from-white via-gray-100 to-white",
+      dark: "bg-gradient-to-b from-gray-950 via-gray-800 to-gray-950",
+      lightDecor1: "bg-gray-200/30",
+      lightDecor2: "bg-gray-300/30",
+      darkDecor1: "bg-gray-600/10",
+      darkDecor2: "bg-gray-700/10"
+    },
+    softLight: {
+      light: "bg-gradient-to-b from-white via-blue-50 to-white",
+      dark: "bg-gradient-to-b from-gray-950 via-blue-950 to-gray-950",
+      lightDecor1: "bg-blue-100/25",
+      lightDecor2: "bg-purple-100/25",
+      darkDecor1: "bg-blue-500/10",
+      darkDecor2: "bg-purple-500/10"
+    }
+  };
+  const current = variants[currentVariant] || variants[defaultVariant];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: `relative py-32 ${isDarkMode ? current.dark : current.light} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute top-10 left-1/4 w-72 h-72 ${isDarkMode ? current.darkDecor1 : current.lightDecor1} rounded-full blur-3xl animate-pulse`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute bottom-10 right-1/4 w-80 h-80 ${isDarkMode ? current.darkDecor2 : current.lightDecor2} rounded-full blur-3xl animate-pulse`,
+          style: { animationDelay: "2s" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10", children })
+  ] });
+};
 const AboutCompanySection = ({ data, t, isDarkMode }) => {
   var _a, _b;
   const safeT = typeof t === "function" ? t : (key, options) => {
@@ -573,7 +643,7 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "h1",
                 {
-                  className: `text-4xl lg:text-5xl font-bold ${isDarkMode ? "text-white" : "text-gray-100"}`,
+                  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
                 }
               )
@@ -583,7 +653,7 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
                 "div",
                 {
                   dangerouslySetInnerHTML: { __html: shortDescription },
-                  className: `prose max-w-none transition-colors mb-6 ${isDarkMode ? "prose-invert text-gray-300" : "text-gray-800"}`
+                  className: `prose max-w-none mb-8 leading-relaxed transition-colors ${isDarkMode ? "prose-invert text-gray-200" : "text-gray-100"} text-lg sm:text-xl md:text-2xl font-light tracking-wide`
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -603,58 +673,52 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "section",
-      {
-        className: `py-20 transition-colors duration-300 ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`,
-        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: name })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                dangerouslySetInnerHTML: { __html: description },
-                className: `prose max-w-none transition-colors ${isDarkMode ? "prose-invert text-gray-300" : "text-gray-600"}`
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
+    /* @__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: name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            dangerouslySetInnerHTML: { __html: description },
+            className: `prose max-w-none transition-colors ${isDarkMode ? "prose-invert text-gray-300" : "text-gray-600"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `transition-colors ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CompanyValues,
             {
-              className: `transition-colors ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CompanyValues,
-                {
-                  companyData,
-                  t: safeT,
-                  isDarkMode
-                }
-              )
+              companyData,
+              t: safeT,
+              isDarkMode
             }
           )
-        ] }) })
-      }
-    )
+        }
+      )
+    ] }) }) })
   ] });
 };
 const TimelineSection = ({ data, t, isDarkMode, section }) => {
@@ -696,7 +760,7 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
       /* @__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 ${isDarkMode ? "bg-gray-800" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+  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",
       {
@@ -995,70 +1059,64 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     return () => partnersRef.current && observer.unobserve(partnersRef.current);
   }, []);
   if (!partnersData.length) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "section",
-    {
-      className: `py-12 lg:py-20 transition-colors duration-300 ${isDarkMode ? "bg-gradient-to-b from-gray-950 via-gray-900 to-gray-800" : "bg-gradient-to-b from-white via-gray-50 to-gray-100"}`,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  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.jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `inline-block px-4 py-2 rounded-full text-sm 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: [
+            "🤝 ",
+            t("partners.header.badge")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "h2",
+        {
+          className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
+          children: [
+            t("partners.header.title"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.header.subtitle") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", 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 h-56 md:h-64 lg:h-72 xl:h-80 mb-8", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `inline-block px-4 py-2 rounded-full text-sm 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: [
-                "🤝 ",
-                t("partners.header.badge")
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "h2",
-            {
-              className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
-              children: [
-                t("partners.header.title"),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.header.subtitle") })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", 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 h-56 md:h-64 lg:h-72 xl:h-80 mb-8", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
+              className: `absolute inset-0 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"}`,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 h-full px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                PartnerCard,
                 {
-                  className: `absolute inset-0 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"}`,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 h-full px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    PartnerCard,
-                    {
-                      partner,
-                      idx,
-                      t,
-                      getLogoUrl,
-                      isDarkMode
-                    },
-                    partner.id || idx
-                  )) })
-                },
-                slideIndex
-              )) }),
-              partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "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"}`
+                  partner,
+                  idx,
+                  t,
+                  getLogoUrl,
+                  isDarkMode
                 },
-                index2
+                partner.id || idx
               )) })
-            ]
-          }
-        ) })
-      ] })
-    }
-  );
+            },
+            slideIndex
+          )) }),
+          partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "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"}`
+            },
+            index2
+          )) })
+        ]
+      }
+    ) })
+  ] }) });
 };
 const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }) => {
   const [milestones, setMilestones] = useState([]);
@@ -1147,68 +1205,62 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "section",
-    {
-      className: `py-20 ${isDarkMode ? "bg-gray-800" : "bg-white"}`,
-      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.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: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              ref: (el) => timelineRefs.current[index2] = el,
-              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" })
-              ]
-            },
-            milestone.id
-          )) })
-        ] })
-      ] })
-    }
-  );
+  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.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: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          ref: (el) => timelineRefs.current[index2] = el,
+          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" })
+          ]
+        },
+        milestone.id
+      )) })
+    ] })
+  ] }) });
 };
 const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
   var _a;
@@ -1252,74 +1304,68 @@ const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
       return () => clearInterval(interval);
     }
   }, [displayTestimonials.length]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "section",
-    {
-      className: `py-20 transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-gray-50"}`,
-      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
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", 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"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "blockquote",
+  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
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", 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"}`,
+          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.jsx("div", { className: "text-3xl", children: "👤" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
                   {
-                    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,
-                      '"'
-                    ]
+                    className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                    children: displayTestimonials[currentIndex].author
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", 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
-                      }
-                    )
-                  ] })
-                ] })
-              ]
-            },
-            currentIndex
-          ),
-          displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.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"}`
-            },
-            index2
-          )) })
-        ] })
-      ] })
-    }
-  );
+                /* @__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
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        currentIndex
+      ),
+      displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.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"}`
+        },
+        index2
+      )) })
+    ] })
+  ] }) });
 };
 const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
   const itemRef = useRef(null);
@@ -1531,72 +1577,66 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
   }
   if (!partnersData.length) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "section",
-    {
-      className: `py-12 lg:py-20 transition-colors duration-300 ${isDarkMode ? "bg-gradient-to-b from-gray-950 via-gray-900 to-gray-800" : "bg-gradient-to-b from-white via-gray-50 to-gray-100"}`,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  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.jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `inline-block px-4 py-2 rounded-full text-sm 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: [
+            "🤝 ",
+            t("partners.badge") || "ĐỐI TÁC CHIẾN LƯỢC"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "h2",
+        {
+          className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
+          children: [
+            t("partners.title.part1") || "Đồng hành cùng",
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.title.part2") || "Những thương hiệu hàng đầu" })
+          ]
+        }
+      )
+    ] }),
+    /* @__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(
             "div",
             {
-              className: `inline-block px-4 py-2 rounded-full text-sm 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: [
-                "🤝 ",
-                t("partners.badge") || "ĐỐI TÁC CHIẾN LƯỢC"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "h2",
-            {
-              className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
-              children: [
-                t("partners.title.part1") || "Đồng hành cùng",
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.title.part2") || "Những thương hiệu hàng đầu" })
-              ]
-            }
-          )
-        ] }),
-        /* @__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(
-                "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(
+                PartnerListCard,
                 {
-                  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(
-                    PartnerListCard,
-                    {
-                      partner,
-                      idx,
-                      t,
-                      isDarkMode,
-                      getLogoUrl
-                    },
-                    partner.id || `${slideIndex}-${idx}`
-                  )) })
+                  partner,
+                  idx,
+                  t,
+                  isDarkMode,
+                  getLogoUrl
                 },
-                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(
-                "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"}`,
-                  "aria-label": `Slide ${index2 + 1}`
-                },
-                index2
+                partner.id || `${slideIndex}-${idx}`
               )) })
-            ]
-          }
-        ) })
-      ] })
-    }
-  );
+            },
+            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(
+            "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"}`,
+              "aria-label": `Slide ${index2 + 1}`
+            },
+            index2
+          )) })
+        ]
+      }
+    ) })
+  ] }) });
 };
 /**
  * @license lucide-react v0.536.0 - ISC
@@ -2379,7 +2419,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
   });
   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("section", { className: `py-16 transition-colors duration-200 ${isDarkMode ? "bg-gray-950" : "bg-white"}`, 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-3 gap-12", children: [
+  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.jsxs("div", { className: "grid lg:grid-cols-3 gap-12", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-2", 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: [
       /* @__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" }) }),
@@ -2695,7 +2735,7 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
   const contactData = ((_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 sectionTitle = (section == null ? void 0 : section.title) || "...";
   if (!contactData.length) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-16 ${isDarkMode ? "bg-gray-900" : "bg-slate-50"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+  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
@@ -2803,7 +2843,7 @@ const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }
       /* @__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" })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-900" : "bg-gray-50"} transition-colors duration-300`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto px-5", children: [
+  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)) })
   ] }) });
@@ -2943,75 +2983,71 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
     );
   }
   const currentFeedback = feedbacks[currentIndex];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "section",
-    {
-      className: `py-20 transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-gray-50"}`,
-      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
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", 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 shadow-lg"}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "blockquote",
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(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
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", 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 shadow-lg"}`,
+            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.jsx("div", { className: "text-3xl", children: "👤" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
                     {
-                      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,
-                        '"'
-                      ]
+                      className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                      children: currentFeedback.customerName
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", 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
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              },
-              currentIndex
-            ),
-            feedbacks.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: feedbacks.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"}`,
-                "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`
-              },
-              index2
-            )) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+                  /* @__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
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          currentIndex
+        ),
+        feedbacks.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: feedbacks.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"}`,
+            "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`
+          },
+          index2
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
         .animate-fadeIn {
           animation: fadeIn 0.5s ease-in-out;
         }
@@ -3026,9 +3062,7 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
           }
         }
       ` })
-      ]
-    }
-  );
+  ] });
 };
 const ProductListSection = ({ data, t, isDarkMode, getProductList }) => {
   const [products, setProducts] = useState([]);
@@ -3256,164 +3290,12 @@ const ProductCard = ({ product, t, isDarkMode }) => {
     }
   );
 };
-const ImageItem = ({ item, index: index2, isDarkMode, t, getObjectUrl: getObjectUrl2 }) => {
-  var _a;
-  const media = (_a = item.medias) == null ? void 0 : _a[0];
-  const getImageUrl = () => {
-    if (!(media == null ? void 0 : media.url)) return null;
-    if (media.url instanceof File) {
-      return URL.createObjectURL(media.url);
-    }
-    if (typeof media.url === "string" && getObjectUrl2) {
-      return getObjectUrl2(media.url);
-    }
-    return media.url;
-  };
-  const imageUrl = getImageUrl();
-  require$$0.useEffect(() => {
-    return () => {
-      if (imageUrl && imageUrl.startsWith("blob:")) {
-        URL.revokeObjectURL(imageUrl);
-      }
-    };
-  }, [imageUrl]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: {
-        borderRadius: "8px",
-        overflow: "hidden",
-        boxShadow: isDarkMode ? "0 4px 8px rgba(0,0,0,0.3)" : "0 4px 8px rgba(0,0,0,0.1)"
-      },
-      children: imageUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "img",
-        {
-          src: imageUrl,
-          alt: `Image ${index2 + 1}`,
-          style: {
-            width: "100%",
-            height: "250px",
-            objectFit: "cover"
-          },
-          onError: (e) => {
-            e.currentTarget.parentElement.style.display = "none";
-          }
-        }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          style: {
-            width: "100%",
-            height: "250px",
-            backgroundColor: isDarkMode ? "#374151" : "#f3f4f6",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: isDarkMode ? "#9ca3af" : "#6b7280",
-            fontSize: "14px"
-          },
-          children: t("imageSection.noImage") || "No image available"
-        }
-      )
-    },
-    item.id || index2
-  );
-};
-const ImageSection = ({ data, t, isDarkMode, getObjectUrl: getObjectUrl2 }) => {
-  const imageItems = useMemo(() => (data == null ? void 0 : data.sectionDataBindingItems) || [], [data]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-    padding: "40px 20px",
-    backgroundColor: isDarkMode ? "#111827" : "white"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
-        gap: "20px"
-      },
-      children: imageItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ImageItem,
-        {
-          item,
-          index: index2,
-          isDarkMode,
-          t,
-          getObjectUrl: getObjectUrl2
-        },
-        item.id || index2
-      ))
-    }
-  ) }) });
-};
-const SingleImageItem = ({ item, index: index2, isDarkMode }) => {
-  var _a;
-  const media = (_a = item.medias) == null ? void 0 : _a[0];
-  const getImageUrl = () => {
-    if (!(media == null ? void 0 : media.url)) return null;
-    if (media.url instanceof File) {
-      return URL.createObjectURL(media.url);
-    }
-    if (getObjectUrl && typeof media.url === "string") {
-      return getObjectUrl(media.url);
-    }
-    return media.url;
-  };
-  const imageUrl = getImageUrl();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: {
-        borderRadius: "12px",
-        overflow: "hidden",
-        boxShadow: isDarkMode ? "0 8px 24px rgba(0,0,0,0.4)" : "0 8px 24px rgba(0,0,0,0.15)",
-        marginBottom: "30px"
-      },
-      children: imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "img",
-        {
-          src: imageUrl,
-          alt: `Single Image ${index2 + 1}`,
-          style: {
-            width: "100%",
-            height: "400px",
-            objectFit: "cover",
-            display: "block"
-          },
-          onError: (e) => {
-            e.currentTarget.style.display = "none";
-          }
-        }
-      )
-    },
-    item.id || index2
-  );
-};
-const ImageSingleSection = ({ data, t, isDarkMode, getObjectUrl: getObjectUrl2 }) => {
-  const imageItems = useMemo(() => (data == null ? void 0 : data.sectionDataBindingItems) || [], [data]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-    padding: "40px 20px",
-    backgroundColor: isDarkMode ? "#111827" : "white"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: imageItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SingleImageItem,
-    {
-      item,
-      index: index2,
-      isDarkMode,
-      getObjectUrl: getObjectUrl2
-    },
-    item.id || index2
-  )) }) });
-};
 const TextWithTitleSection = ({ section, data, isDarkMode }) => {
   var _a;
   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("div", { style: {
-    padding: "40px 20px",
-    backgroundColor: isDarkMode ? "#111827" : "#ffffff"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
+  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",
@@ -3443,32 +3325,23 @@ const TextWithTitleSection = ({ section, data, isDarkMode }) => {
 };
 const TextSection = ({ data, isDarkMode }) => {
   const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  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(
     "div",
     {
       style: {
-        padding: "40px 20px",
-        backgroundColor: isDarkMode ? "#111827" : "#ffffff"
+        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'
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 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'
-          },
-          children: item.value
-        },
-        item.id || index2
-      )) })
-    }
-  );
+      children: item.value
+    },
+    item.id || index2
+  )) }) });
 };
 const DiagramSection = ({ data, t, isDarkMode }) => {
   var _a, _b;
@@ -4424,7 +4297,7 @@ const FaqSection = ({ data, t, isDarkMode }) => {
   const toggleFaq = (index2) => {
     setActiveIndex(activeIndex === index2 ? -1 : index2);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-4 ${isDarkMode ? "bg-gradient-to-b from-gray-900 via-gray-900 to-gray-800" : "bg-gradient-to-b from-gray-50 to-white"}`, children: [
+  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
@@ -4620,15 +4493,7 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
           },
           index2
         );
-      }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center gap-3 mt-8", children: highlightData.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: () => setActiveTab(index2),
-          className: `transition-all duration-300 rounded-full ${activeTab === index2 ? "w-12 h-3 bg-gradient-to-r from-blue-600 to-purple-600" : isDarkMode ? "w-3 h-3 bg-gray-600 hover:bg-gray-500" : "w-3 h-3 bg-gray-300 hover:bg-gray-400"}`
-        },
-        index2
-      )) })
+      }) })
     ] })
   ] });
 };
@@ -4654,11 +4519,7 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
     if (url.startsWith("http://") || url.startsWith("https://")) return url;
     return `${imageBaseUrl}${url}`;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { style: {
-    padding: "80px 16px",
-    backgroundColor: isDarkMode ? "#111827" : "#f5f5f5",
-    transition: "background-color 0.3s"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
     maxWidth: "1400px",
     margin: "0 auto"
   }, children: [
@@ -4803,11 +4664,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
     if (url.startsWith("http://") || url.startsWith("https://")) return url;
     return `${imageBaseUrl}${url}`;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { style: {
-    padding: "60px 16px",
-    backgroundColor: isDarkMode ? "#111827" : "#ffffff",
-    transition: "background-color 0.3s"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
     maxWidth: "1280px",
     margin: "0 auto"
   }, children: [
@@ -4970,11 +4827,7 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
   };
   const visiblePages = pages.slice(0, visibleCount);
   const hasMore = visibleCount < pages.length;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { style: {
-    padding: "80px 16px",
-    backgroundColor: isDarkMode ? "#0f172a" : "#f8fafc",
-    transition: "background-color 0.3s"
-  }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
     maxWidth: "1400px",
     margin: "0 auto"
   }, children: [
@@ -5121,8 +4974,6 @@ const index = {
   ContactListAutoSection,
   CustomerFeedbackAutoSection,
   ProductListSection,
-  ImageSection,
-  ImageSingleSection,
   TextWithTitleSection,
   TextSection,
   DiagramSection,
@@ -5143,8 +4994,6 @@ export {
   DiagramSection,
   DiagramSection2,
   FaqSection,
-  ImageSection,
-  ImageSingleSection,
   MilestoneSection,
   PageChildrenSelectSection,
   PageChildrenSelectSection1,