nvis-fe-cms-libs 1.1.35 → 1.1.37

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

@@ -580,7 +580,7 @@ var __async = (__this, __arguments, generator) => {
       /* @__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}`);
@@ -596,6 +596,13 @@ var __async = (__this, __arguments, generator) => {
     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",
@@ -639,8 +646,22 @@ var __async = (__this, __arguments, generator) => {
                 /* @__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(
@@ -695,7 +716,7 @@ var __async = (__this, __arguments, generator) => {
               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 })
               ]
             }
           ),
@@ -897,72 +918,63 @@ var __async = (__this, __arguments, generator) => {
       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);
         }
@@ -997,7 +1009,32 @@ var __async = (__this, __arguments, generator) => {
           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
       }
     );
   };
@@ -1013,13 +1050,14 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     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] = require$$0.useState(0);
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.useRef(null);
     const windowWidth = useWindowSize$1();
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     const getLogoUrl = (logoUrl) => {
       if (!logoUrl) return null;
       if (logoUrl.startsWith("http")) return logoUrl;
@@ -1063,28 +1101,16 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     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",
         {
@@ -1370,114 +1396,54 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] }) });
   };
-  const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
-    const itemRef = require$$0.useRef(null);
-    const [visible, setVisible] = require$$0.useState(false);
-    const [isHovered, setIsHovered] = require$$0.useState(false);
-    if (!partner) return null;
-    require$$0.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" })
         ]
       }
     );
@@ -1493,7 +1459,7 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     return width;
   }
-  const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }) => {
+  const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "", section }) => {
     const [partnersData, setPartnersData] = require$$0.useState([]);
     const [error, setError] = require$$0.useState(null);
     const [loading, setLoading] = require$$0.useState(true);
@@ -1501,6 +1467,7 @@ var __async = (__this, __arguments, generator) => {
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.useRef(null);
     const windowWidth = useWindowSize();
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     const getLogoUrl = (logoUrl) => {
       if (!logoUrl) return null;
       if (logoUrl.startsWith("http")) return logoUrl;
@@ -1581,28 +1548,16 @@ var __async = (__this, __arguments, generator) => {
     }
     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",
         {
@@ -1756,42 +1711,42 @@ var __async = (__this, __arguments, generator) => {
    * 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" }],
@@ -1800,14 +1755,14 @@ var __async = (__this, __arguments, generator) => {
     ["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" }],
@@ -1820,14 +1775,14 @@ var __async = (__this, __arguments, generator) => {
     ["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" }],
@@ -1839,86 +1794,86 @@ var __async = (__this, __arguments, generator) => {
     ["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" }],
     [
@@ -1930,40 +1885,40 @@ var __async = (__this, __arguments, generator) => {
     ],
     ["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",
       {
@@ -1974,14 +1929,14 @@ var __async = (__this, __arguments, generator) => {
     ["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",
       {
@@ -1990,14 +1945,14 @@ var __async = (__this, __arguments, generator) => {
       }
     ]
   ];
-  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",
@@ -2007,33 +1962,33 @@ var __async = (__this, __arguments, generator) => {
       }
     ]
   ];
-  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",
       {
@@ -2044,39 +1999,7 @@ var __async = (__this, __arguments, generator) => {
     ["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
    *
@@ -2422,316 +2345,252 @@ var __async = (__this, __arguments, generator) => {
     });
     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;
@@ -4289,7 +4148,7 @@ var __async = (__this, __arguments, generator) => {
       }
     );
   };
-  const FaqSection = ({ data, t, isDarkMode }) => {
+  const FaqSection = ({ data, t, isDarkMode, section }) => {
     const [activeIndex, setActiveIndex] = require$$0.useState(-1);
     const faqs = require$$0.useMemo(() => {
       if ((data == null ? void 0 : data.sectionDataBindingItems) && Array.isArray(data.sectionDataBindingItems)) {
@@ -4300,6 +4159,7 @@ var __async = (__this, __arguments, generator) => {
     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: `
@@ -4316,7 +4176,7 @@ var __async = (__this, __arguments, generator) => {
           }
         ) }) }),
         /* @__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(