npm - nvis-fe-cms-libs - Versions diffs - 1.1.35 → 1.1.37 - Mend

nvis-fe-cms-libs 1.1.35 → 1.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/nvis-fe-cms-libs.es.js +417 -557
package/dist/nvis-fe-cms-libs.es.js.map +1 -1
package/dist/nvis-fe-cms-libs.umd.js +417 -557
package/dist/nvis-fe-cms-libs.umd.js.map +1 -1
package/package.json +1 -1

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

@@ -577,7 +577,7 @@ const SectionWrapper = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10", children })
   ] });
 };
-const AboutCompanySection = ({ data, t, isDarkMode }) => {
+const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   var _a, _b;
   const safeT = typeof t === "function" ? t : (key, options) => {
     console.warn(`Translation function not provided for key: ${key}`);
@@ -593,6 +593,13 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
   const establishedYear = companyData.establishedYear || "----";
   const experienceYears = companyData.experienceYears || "0";
   const description = companyData.description || "";
+  const logo = companyData.logo || null;
+  const getLogoUrl = (logoUrl2) => {
+    if (!logoUrl2) return null;
+    if (logoUrl2.startsWith("http")) return logoUrl2;
+    return `${imageBaseUrl}${logoUrl2}`;
+  };
+  const logoUrl = getLogoUrl(logo);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
@@ -636,8 +643,22 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
               /* @__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(
                 "div",
                 {
-                  className: `w-full h-full rounded-full flex items-center justify-center ${isDarkMode ? "bg-gray-900" : "bg-white"}`,
-                  children: /* @__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 })
+                  className: `w-full h-full rounded-full flex items-center justify-center overflow-hidden ${isDarkMode ? "bg-gray-900" : "bg-white"}`,
+                  children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "img",
+                    {
+                      src: logoUrl,
+                      alt: name || shortName,
+                      className: "w-full h-full object-cover rounded-full",
+                      onError: (e) => {
+                        e.target.style.display = "none";
+                        const fallbackDiv = document.createElement("div");
+                        fallbackDiv.className = "text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent";
+                        fallbackDiv.textContent = shortName;
+                        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(
@@ -692,7 +713,7 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
             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("span", { className: "block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", children: shortName })
             ]
           }
         ),
@@ -894,72 +915,63 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
     return () => itemRef.current && observer.unobserve(itemRef.current);
   }, []);
   const logoSrc = getLogoUrl(partner.logoUrl);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "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 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` },
-      onClick: () => partner.websiteUrl && window.open(partner.websiteUrl, "_blank"),
-      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: "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",
-          {
-            className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-            children: partner.name
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "p",
-          {
-            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: `
+  const cardContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { 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: "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",
+      {
+        className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+        children: partner.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        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);
         }
@@ -994,7 +1006,32 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
           transform: translateY(0);
         }
       ` })
-      ]
+  ] });
+  if (partner.websiteUrl) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        ref: itemRef,
+        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" },
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "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` },
+      children: cardContent
     }
   );
 };
@@ -1010,13 +1047,14 @@ function useWindowSize$1() {
   }, []);
   return width;
 }
-const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) => {
   var _a, _b;
   const partnersData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
   const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
   const windowWidth = useWindowSize$1();
+  const sectionTitle = (section == null ? void 0 : section.title) || "...";
   const getLogoUrl = (logoUrl) => {
     if (!logoUrl) return null;
     if (logoUrl.startsWith("http")) return logoUrl;
@@ -1060,28 +1098,16 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   }, []);
   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.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", { 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
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -1367,114 +1393,54 @@ const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
     ] })
   ] }) });
 };
-const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
-  const itemRef = useRef(null);
-  const [visible, setVisible] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  if (!partner) return null;
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setVisible(true);
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.2 }
-    );
-    if (itemRef.current) observer.observe(itemRef.current);
-    return () => itemRef.current && observer.unobserve(itemRef.current);
-  }, []);
-  const logoSrc = getLogoUrl ? getLogoUrl(partner.logoUrl) : null;
-  const handleImageError = (e) => {
-    e.target.style.display = "none";
-    e.target.nextSibling.style.display = "flex";
-  };
-  const handleClick = () => {
-    if (partner.websiteUrl) {
-      window.open(partner.websiteUrl, "_blank", "noopener,noreferrer");
-    }
-  };
+const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
+  const logoUrl = getLogoUrl(partner.logo);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
+    "a",
     {
-      ref: itemRef,
-      className: `relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden min-h-[180px] w-full
-        ${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" : "opacity-0"}
-        ${isHovered ? isDarkMode ? "border-blue-500 shadow-lg shadow-blue-500/20" : "border-blue-300 shadow-lg shadow-blue-500/20" : ""}`,
+      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`,
       style: {
-        transitionDelay: `${idx * 150}ms`,
-        transform: `translateY(${isHovered ? "-4px" : "0px"}) scale(${visible ? "1" : "0.75"})`,
-        position: "relative",
-        zIndex: isHovered ? 10 : 1
+        animationDelay: `${idx * 0.1}s`,
+        textDecoration: "none"
       },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      onClick: handleClick,
       children: [
-        isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-12 h-12 bg-white/5 rounded-full pointer-events-none", style: { left: "10%", top: "20%", zIndex: -1 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-10 h-10 bg-white/5 rounded-full pointer-events-none", style: { right: "30%", bottom: "10%", zIndex: -1 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-14 h-14 bg-white/5 rounded-md pointer-events-none", style: { left: "20%", bottom: "30%", zIndex: -1 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 opacity-20 pointer-events-none", style: { zIndex: -1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__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",
             {
-              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")`,
-                backgroundSize: "60px 60px"
-              },
-              className: "w-full h-full"
+              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: `relative w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden border transition-all duration-300
-          ${isDarkMode ? "border-gray-600" : "border-gray-200"}
-          ${isHovered ? "border-blue-500" : ""}
-        `,
-            style: {
-              background: isDarkMode ? isHovered ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : isHovered ? "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"
-            },
-            children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "img",
-                {
-                  src: logoSrc,
-                  alt: partner.name || (t == null ? void 0 : t("partners.logoAlt")) || "Partner logo",
-                  className: "max-w-full max-h-full object-contain transition-all duration-300",
-                  style: {
-                    filter: isDarkMode ? isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.3) opacity(0.8)" : isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.2) opacity(0.9)",
-                    transform: isHovered ? "scale(1.05)" : "scale(1)"
-                  },
-                  onError: handleImageError,
-                  loading: "lazy"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", style: { display: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) })
-            ] }) : /* @__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", { className: `font-bold text-center mb-2 text-sm leading-tight ${isDarkMode ? "text-white" : "text-gray-900"}`, children: partner.name }),
-        partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs text-center mb-3 line-clamp-2 px-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: partner.description }),
-        partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "transition-all duration-300 absolute bottom-4",
-            style: {
-              opacity: isHovered ? 1 : 0,
-              transform: `translateY(${isHovered ? "0px" : "4px"})`
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-blue-600 font-medium", children: [
-              (t == null ? void 0 : t("partners.viewDetails")) || "Xem chi tiết",
-              " →"
-            ] })
-          }
-        )
+        /* @__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" })
       ]
     }
   );
@@ -1490,7 +1456,7 @@ function useWindowSize() {
   }, []);
   return width;
 }
-const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }) => {
+const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "", section }) => {
   const [partnersData, setPartnersData] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -1498,6 +1464,7 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
   const windowWidth = useWindowSize();
+  const sectionTitle = (section == null ? void 0 : section.title) || "...";
   const getLogoUrl = (logoUrl) => {
     if (!logoUrl) return null;
     if (logoUrl.startsWith("http")) return logoUrl;
@@ -1578,28 +1545,16 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }
   }
   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.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", { 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
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -1753,42 +1708,42 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$B = [
+const __iconNode$z = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$B);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$z);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$A = [
+const __iconNode$y = [
   ["path", { d: "M2 4v16", key: "vw9hq8" }],
   ["path", { d: "M2 8h18a2 2 0 0 1 2 2v10", key: "1dgv2r" }],
   ["path", { d: "M2 17h20", key: "18nfp3" }],
   ["path", { d: "M6 8v9", key: "1yriud" }]
 ];
-const Bed = createLucideIcon("bed", __iconNode$A);
+const Bed = createLucideIcon("bed", __iconNode$y);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$z = [
+const __iconNode$x = [
   ["path", { d: "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16", key: "jecpp" }],
   ["rect", { width: "20", height: "14", x: "2", y: "6", rx: "2", key: "i6l2r4" }]
 ];
-const Briefcase = createLucideIcon("briefcase", __iconNode$z);
+const Briefcase = createLucideIcon("briefcase", __iconNode$x);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$y = [
+const __iconNode$w = [
   ["path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", key: "1b4qmf" }],
   ["path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", key: "i71pzd" }],
   ["path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", key: "10jefs" }],
@@ -1797,14 +1752,14 @@ const __iconNode$y = [
   ["path", { d: "M10 14h4", key: "kelpxr" }],
   ["path", { d: "M10 18h4", key: "1ulq68" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$y);
+const Building2 = createLucideIcon("building-2", __iconNode$w);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$x = [
+const __iconNode$v = [
   ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
   ["path", { d: "M9 22v-4h6v4", key: "r93iot" }],
   ["path", { d: "M8 6h.01", key: "1dz90k" }],
@@ -1817,14 +1772,14 @@ const __iconNode$x = [
   ["path", { d: "M8 10h.01", key: "19clt8" }],
   ["path", { d: "M8 14h.01", key: "6423bh" }]
 ];
-const Building = createLucideIcon("building", __iconNode$x);
+const Building = createLucideIcon("building", __iconNode$v);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$w = [
+const __iconNode$u = [
   ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", key: "1nb95v" }],
   ["line", { x1: "8", x2: "16", y1: "6", y2: "6", key: "x4nwl0" }],
   ["line", { x1: "16", x2: "16", y1: "14", y2: "18", key: "wjye3r" }],
@@ -1836,86 +1791,86 @@ const __iconNode$w = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M8 18h.01", key: "lrp35t" }]
 ];
-const Calculator = createLucideIcon("calculator", __iconNode$w);
+const Calculator = createLucideIcon("calculator", __iconNode$u);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
+const __iconNode$t = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$t);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
+const __iconNode$s = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$s);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [
+const __iconNode$r = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$t);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [
+const __iconNode$q = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$s);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$q);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$p = [
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$r);
+const Clock = createLucideIcon("clock", __iconNode$p);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$o = [
   ["path", { d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z", key: "p7xjir" }]
 ];
-const Cloud = createLucideIcon("cloud", __iconNode$q);
+const Cloud = createLucideIcon("cloud", __iconNode$o);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$n = [
   ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
   ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
   ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
 ];
-const Database = createLucideIcon("database", __iconNode$p);
+const Database = createLucideIcon("database", __iconNode$n);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$m = [
   ["path", { d: "M12 16h.01", key: "1drbdi" }],
   ["path", { d: "M16 16h.01", key: "1f9h7w" }],
   [
@@ -1927,40 +1882,40 @@ const __iconNode$o = [
   ],
   ["path", { d: "M8 16h.01", key: "18s6g9" }]
 ];
-const Factory = createLucideIcon("factory", __iconNode$o);
+const Factory = createLucideIcon("factory", __iconNode$m);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$l = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$n);
+const FileText = createLucideIcon("file-text", __iconNode$l);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [
+const __iconNode$k = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ];
-const Globe = createLucideIcon("globe", __iconNode$m);
+const Globe = createLucideIcon("globe", __iconNode$k);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$j = [
   [
     "path",
     {
@@ -1971,14 +1926,14 @@ const __iconNode$l = [
   ["path", { d: "M22 10v6", key: "1lu8f3" }],
   ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
 ];
-const GraduationCap = createLucideIcon("graduation-cap", __iconNode$l);
+const GraduationCap = createLucideIcon("graduation-cap", __iconNode$j);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$i = [
   [
     "path",
     {
@@ -1987,14 +1942,14 @@ const __iconNode$k = [
     }
   ]
 ];
-const Heart = createLucideIcon("heart", __iconNode$k);
+const Heart = createLucideIcon("heart", __iconNode$i);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$h = [
   ["path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8", key: "5wwlr5" }],
   [
     "path",
@@ -2004,33 +1959,33 @@ const __iconNode$j = [
     }
   ]
 ];
-const House = createLucideIcon("house", __iconNode$j);
+const House = createLucideIcon("house", __iconNode$h);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$i);
+const __iconNode$g = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$g);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$f = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-const Mail = createLucideIcon("mail", __iconNode$h);
+const Mail = createLucideIcon("mail", __iconNode$f);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -2041,39 +1996,7 @@ const __iconNode$g = [
   ["path", { d: "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14", key: "1853fq" }],
   ["path", { d: "M8 6v8", key: "15ugcq" }]
 ];
-const Megaphone = createLucideIcon("megaphone", __iconNode$g);
-/**
- * @license lucide-react v0.536.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$f = [
-  [
-    "path",
-    {
-      d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
-      key: "1sd12s"
-    }
-  ]
-];
-const MessageCircle = createLucideIcon("message-circle", __iconNode$f);
-/**
- * @license lucide-react v0.536.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$e = [
-  [
-    "path",
-    {
-      d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
-      key: "18887p"
-    }
-  ]
-];
-const MessageSquare = createLucideIcon("message-square", __iconNode$e);
+const Megaphone = createLucideIcon("megaphone", __iconNode$e);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
@@ -2419,316 +2342,252 @@ 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(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" }) }),
-        /* @__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" })
-        ] })
-      ] }),
-      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 === "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.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: [
-              t("form.fields.fullName") || "Họ và tên",
-              " *"
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                type: "text",
-                name: "fullName",
-                value: formData.fullName || "",
-                onChange: handleInputChange,
-                onBlur: handleBlur,
-                className: `${inputBaseClasses} ${formErrors.fullName ? "border-red-500" : ""}`,
-                placeholder: "Nguyễn Văn A",
-                required: true
-              }
-            ),
-            formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm 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: [
-              t("form.fields.workEmail") || "Email",
-              " *"
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                type: "email",
-                name: "workEmail",
-                value: formData.workEmail || "",
-                onChange: handleInputChange,
-                onBlur: handleBlur,
-                className: `${inputBaseClasses} ${formErrors.workEmail ? "border-red-500" : ""}`,
-                placeholder: "email@company.com",
-                required: true
-              }
-            ),
-            formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
-              formErrors.workEmail
-            ] })
-          ] })
-        ] }),
-        /* @__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(
-              "input",
-              {
-                type: "tel",
-                name: "phoneNumber",
-                value: formData.phoneNumber || "",
-                onChange: handleInputChange,
-                onBlur: handleBlur,
-                className: `${inputBaseClasses} ${formErrors.phoneNumber ? "border-red-500" : ""}`,
-                placeholder: "0901 234 567"
-              }
-            ),
-            formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm 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(
-              "input",
-              {
-                type: "text",
-                name: "companyName",
-                value: formData.companyName || "",
-                onChange: handleInputChange,
-                onBlur: handleBlur,
-                className: `${inputBaseClasses} ${formErrors.companyName ? "border-red-500" : ""}`,
-                placeholder: "ABC Company"
-              }
-            ),
-            formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
-              formErrors.companyName
-            ] })
-          ] })
-        ] }),
-        /* @__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(
-              "input",
-              {
-                type: "text",
-                name: "jobTitle",
-                value: formData.jobTitle || "",
-                onChange: handleInputChange,
-                onBlur: handleBlur,
-                className: `${inputBaseClasses} ${formErrors.jobTitle ? "border-red-500" : ""}`,
-                placeholder: "Giám đốc công nghệ"
-              }
-            ),
-            formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm 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(
-              "input",
-              {
-                type: "text",
-                name: "businessType",
-                value: formData.businessType || "",
-                onChange: handleInputChange,
-                className: inputBaseClasses,
-                placeholder: "Công nghệ thông tin"
-              }
-            )
-          ] })
-        ] }),
-        /* @__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(
-              "input",
-              {
-                type: "text",
-                name: "expectedBudget",
-                value: formData.expectedBudget || "",
-                onChange: handleInputChange,
-                className: inputBaseClasses,
-                placeholder: "500,000,000 - 1,000,000,000 VNĐ"
-              }
-            )
-          ] }),
-          /* @__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(
-              "input",
-              {
-                type: "text",
-                name: "expectedTimeline",
-                value: formData.expectedTimeline || "",
-                onChange: handleInputChange,
-                className: inputBaseClasses,
-                placeholder: "3-6 tháng"
-              }
-            )
-          ] })
-        ] }),
+  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: [
+    /* @__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.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" })
+      ] })
+    ] }),
+    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 === "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.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: [
-            t("form.fields.requestTitle") || "Tiêu đề yêu cầu",
+            t("form.fields.fullName") || "Họ và tên",
             " *"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
               type: "text",
-              name: "requestTitle",
-              value: formData.requestTitle || "",
+              name: "fullName",
+              value: formData.fullName || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              className: `${inputBaseClasses} ${formErrors.requestTitle ? "border-red-500" : ""}`,
-              placeholder: "Phát triển hệ thống quản lý bán hàng",
+              className: `${inputBaseClasses} ${formErrors.fullName ? "border-red-500" : ""}`,
+              placeholder: t("contact.form.namePlaceholder"),
               required: true
             }
           ),
-          formErrors.requestTitle && /* @__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-sm text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
-            formErrors.requestTitle
+            formErrors.fullName
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
-            t("form.fields.requestDescription") || "Mô tả yêu cầu",
+            t("form.fields.workEmail") || "Email",
             " *"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "textarea",
+            "input",
             {
-              name: "requestDescription",
-              value: formData.requestDescription || "",
+              type: "email",
+              name: "workEmail",
+              value: formData.workEmail || "",
               onChange: handleInputChange,
               onBlur: handleBlur,
-              rows: "5",
-              className: `${inputBaseClasses} resize-none ${formErrors.requestDescription ? "border-red-500" : ""}`,
-              placeholder: "Vui lòng mô tả chi tiết về nhu cầu của bạn...",
+              className: `${inputBaseClasses} ${formErrors.workEmail ? "border-red-500" : ""}`,
+              placeholder: "email@company.com",
               required: true
             }
           ),
-          formErrors.requestDescription && /* @__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-sm text-red-500 flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
-            formErrors.requestDescription
+            formErrors.workEmail
           ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
+        ] })
+      ] }),
+      /* @__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(
-            "button",
+            "input",
             {
-              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"
-              ] })
+              type: "tel",
+              name: "phoneNumber",
+              value: formData.phoneNumber || "",
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              className: `${inputBaseClasses} ${formErrors.phoneNumber ? "border-red-500" : ""}`,
+              placeholder: "0901 234 567"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
+          formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm 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(
+            "input",
             {
-              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"
-              ]
+              type: "text",
+              name: "companyName",
+              value: formData.companyName || "",
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              className: `${inputBaseClasses} ${formErrors.companyName ? "border-red-500" : ""}`,
+              placeholder: t("contact.form.fields.company")
             }
-          )
-        ] }),
-        /* @__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ờ" })
+          ),
+          formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+            formErrors.companyName
+          ] })
         ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg text-white transition-colors duration-200 ${isDarkMode ? "bg-gradient-to-br from-indigo-900 to-purple-900" : "bg-gradient-to-br from-indigo-600 to-purple-600"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-bold mb-3", children: t("sidebar.quickContact.title") || "Cần hỗ trợ ngay?" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-indigo-100 text-sm mb-4", children: t("sidebar.quickContact.description") || "Liên hệ trực tiếp để được tư vấn nhanh chóng" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "a",
+      ] }),
+      /* @__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(
+            "input",
             {
-              href: "tel:19005588",
-              className: "flex items-center justify-center w-full bg-white/20 backdrop-blur-sm hover:bg-white/30 py-3 rounded-xl transition-all font-semibold",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, className: "mr-2" }),
-                "1900 5588"
-              ]
+              type: "text",
+              name: "jobTitle",
+              value: formData.jobTitle || "",
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              className: `${inputBaseClasses} ${formErrors.jobTitle ? "border-red-500" : ""}`,
+              placeholder: t("contact.form.positionPlaceholder")
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "flex items-center justify-center w-full border border-white/30 hover:bg-white/10 py-3 rounded-xl transition-all font-semibold", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { size: 18, className: "mr-2" }),
-            "Live Chat"
+          formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm 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(
+            "input",
+            {
+              type: "text",
+              name: "businessType",
+              value: formData.businessType || "",
+              onChange: handleInputChange,
+              className: inputBaseClasses,
+              placeholder: "Công nghệ thông tin"
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold mb-4 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.contactInfo.title") || "Thông tin liên hệ" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-indigo-900/50 text-indigo-400" : "bg-indigo-50 text-indigo-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18 }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "1900 5588" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "Hotline 24/7" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-emerald-900/50 text-emerald-400" : "bg-emerald-50 text-emerald-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18 }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "support@asasystems.vn" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "Email hỗ trợ" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-purple-900/50 text-purple-400" : "bg-purple-50 text-purple-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircle, { size: 18 }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: "Live Chat" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: "T2-T6: 8:00-18:00" })
-            ] })
-          ] })
+      /* @__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(
+            "input",
+            {
+              type: "text",
+              name: "expectedBudget",
+              value: formData.expectedBudget || "",
+              onChange: handleInputChange,
+              className: inputBaseClasses,
+              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(
+            "input",
+            {
+              type: "text",
+              name: "expectedTimeline",
+              value: formData.expectedTimeline || "",
+              onChange: handleInputChange,
+              className: inputBaseClasses,
+              placeholder: t("form.fields.expectedTimeline")
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-6 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold mb-4 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.title") || "Câu hỏi thường gặp" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded-lg transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-medium text-sm transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.responseTime.question") || "Thời gian phản hồi?" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm mt-1 transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("sidebar.faq.responseTime.answer") || "Trong vòng 24 giờ làm việc" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded-lg transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-medium text-sm transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("sidebar.faq.consultationFree.question") || "Tư vấn có miễn phí?" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm mt-1 transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("sidebar.faq.consultationFree.answer") || "Hoàn toàn miễn phí" })
-          ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+          t("form.fields.requestTitle") || "Tiêu đề yêu cầu",
+          " *"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            name: "requestTitle",
+            value: formData.requestTitle || "",
+            onChange: handleInputChange,
+            onBlur: handleBlur,
+            className: `${inputBaseClasses} ${formErrors.requestTitle ? "border-red-500" : ""}`,
+            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: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
+          formErrors.requestTitle
         ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
+          t("form.fields.requestDescription") || "Mô tả yêu cầu",
+          " *"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            name: "requestDescription",
+            value: formData.requestDescription || "",
+            onChange: handleInputChange,
+            onBlur: handleBlur,
+            rows: "5",
+            className: `${inputBaseClasses} resize-none ${formErrors.requestDescription ? "border-red-500" : ""}`,
+            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: [
+          /* @__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ờ" })
       ] })
     ] })
-  ] }) }) });
+  ] }) }) }) }) });
 };
 const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
   var _a, _b;
@@ -4286,7 +4145,7 @@ const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
     }
   );
 };
-const FaqSection = ({ data, t, isDarkMode }) => {
+const FaqSection = ({ data, t, isDarkMode, section }) => {
   const [activeIndex, setActiveIndex] = useState(-1);
   const faqs = useMemo(() => {
     if ((data == null ? void 0 : data.sectionDataBindingItems) && Array.isArray(data.sectionDataBindingItems)) {
@@ -4297,6 +4156,7 @@ const FaqSection = ({ data, t, isDarkMode }) => {
   const toggleFaq = (index2) => {
     setActiveIndex(activeIndex === index2 ? -1 : index2);
   };
+  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: `
@@ -4313,7 +4173,7 @@ const FaqSection = ({ data, t, isDarkMode }) => {
         }
       ) }) }),
       /* @__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: (t == null ? void 0 : t("faq.title")) || "Frequently Asked Questions" }),
+        /* @__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("div", { className: "space-y-4", children: faqs.map((faq, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(