nvis-fe-cms-libs 1.1.36 → 1.1.38

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 })
               ]
             }
           ),
@@ -1690,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" }],
@@ -1734,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" }],
@@ -1754,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" }],
@@ -1773,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" }],
     [
@@ -1864,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",
       {
@@ -1908,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",
       {
@@ -1924,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",
@@ -1941,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",
       {
@@ -1978,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
    *
@@ -2356,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: t("form.fields.businessType")
+              }
+            )
           ] })
         ] }),
-        /* @__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;
@@ -4333,11 +4258,6 @@ var __async = (__this, __arguments, generator) => {
       }, 5e3);
       return () => clearInterval(interval);
     }, [highlightData.length]);
-    const handleNavigate = (slug) => {
-      if (slug) {
-        window.location.href = slug;
-      }
-    };
     const gradientColors = [
       "from-blue-600 to-purple-600",
       "from-purple-600 to-pink-600",
@@ -4396,8 +4316,7 @@ var __async = (__this, __arguments, generator) => {
                     }
                   ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-8 left-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block bg-gradient-to-r ${color} text-white px-6 py-3 rounded-full text-sm font-bold shadow-xl`, children: item.tag }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: `text-3xl lg:text-4xl font-black mb-3 bg-gradient-to-r ${color} bg-clip-text text-transparent`, children: item.title }),
@@ -4415,16 +4334,40 @@ var __async = (__this, __arguments, generator) => {
                     idx
                   )) }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "button",
+                    "a",
                     {
-                      onClick: () => handleNavigate(item.slug),
-                      className: `group relative px-6 py-3 rounded-xl font-bold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden bg-gradient-to-r ${color} text-white shadow-xl w-full`,
+                      href: item.slug,
+                      rel: "noopener noreferrer",
+                      className: `group relative px-6 py-3 rounded-xl font-bold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden bg-gradient-to-r ${color} text-white shadow-xl w-full text-center`,
+                      onClick: (e) => {
+                        if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
+                          e.preventDefault();
+                          window.location.href = item.slug;
+                        }
+                      },
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
                           t("highlight.cta") || "Khám phá",
                           " ",
                           item.title,
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 group-hover:translate-x-1 transition-transform", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 8l4 4m0 0l-4 4m4-4H3" }) })
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "svg",
+                            {
+                              className: "w-5 h-5 group-hover:translate-x-1 transition-transform",
+                              fill: "none",
+                              viewBox: "0 0 24 24",
+                              stroke: "currentColor",
+                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                "path",
+                                {
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2,
+                                  d: "M17 8l4 4m0 0l-4 4m4-4H3"
+                                }
+                              )
+                            }
+                          )
                         ] }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
                       ]