nvis-fe-cms-libs 2.1.13 → 2.1.15

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

@@ -50,6 +50,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import require$$0, { useRef, useState, useEffect, useMemo, forwardRef, createElement } from "react";
+import { createPortal } from "react-dom";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production = {};
 /**
@@ -547,7 +548,7 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   };
   const logoUrl = getLogoUrl(logo);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-8 bg-white", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: `relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-8 ${isDarkMode ? "bg-gray-900" : "bg-white"}`, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -596,17 +597,17 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
               }
             }
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gradient-brand", children: shortName }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 text-gradient-brand drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]", children: name })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: `text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 ${isDarkMode ? "text-white" : "text-gray-900"} drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]`, children: name })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               dangerouslySetInnerHTML: { __html: shortDescription },
-              className: "prose max-w-none mb-8 leading-relaxed text-inverse text-lg sm:text-xl md:text-2xl font-light tracking-wide"
+              className: `prose max-w-none mb-8 leading-relaxed text-lg sm:text-xl md:text-2xl font-light tracking-wide ${isDarkMode ? "text-gray-300" : "text-gray-700"}`
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-4 py-2 rounded-full border bg-white/20 border-white/40 text-inverse text-small font-medium", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `inline-flex items-center px-4 py-2 rounded-full border ${isDarkMode ? "bg-gray-800 border-gray-700 text-gray-200" : "bg-gray-100 border-gray-300 text-gray-800"} text-small font-medium`, children: [
             safeT("aboutCompany.hero.establishedYear", { year: establishedYear }),
             " - ",
             safeT("aboutCompany.hero.experience", { years: experienceYears })
@@ -645,6 +646,76 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     ] }) }) })
   ] });
 };
+const AboutCompanySection_2 = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+  var _a, _b;
+  const safeT = typeof t === "function" ? t : (key, options) => {
+    console.warn(`Translation function not provided for key: ${key}`);
+    return key;
+  };
+  const companyData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  if (!companyData) {
+    return null;
+  }
+  const name = companyData.name || safeT("aboutCompany.defaults.companyName");
+  const shortName = companyData.shortName || safeT("aboutCompany.defaults.shortName");
+  const shortDescription = companyData.shortDescription || safeT("aboutCompany.defaults.shortDescription");
+  const establishedYear = companyData.establishedYear || "----";
+  const experienceYears = companyData.experienceYears || "0";
+  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.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "section",
+    {
+      className: "relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-8 bg-cover bg-center bg-no-repeat",
+      style: {
+        backgroundImage: 'url("/image_intro_company.png")'
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-slate-950/70" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-40 h-40 mx-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full flex items-center justify-center", children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: logoUrl,
+                alt: name || shortName,
+                className: "w-full h-full object-contain",
+                onError: (e) => {
+                  e.target.style.display = "none";
+                  const fallbackDiv = document.createElement("div");
+                  fallbackDiv.className = "text-2xl font-bold text-gradient-accent";
+                  fallbackDiv.textContent = shortName;
+                  e.target.parentElement.appendChild(fallbackDiv);
+                }
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gradient-accent", children: shortName }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 text-white drop-shadow-[0_2px_6px_rgba(0,0,0,0.5)]", children: name })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                dangerouslySetInnerHTML: { __html: shortDescription },
+                className: "prose max-w-none mb-8 leading-relaxed text-lg sm:text-xl md:text-2xl font-light tracking-wide text-slate-200"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-4 py-2 rounded-full border bg-white/10 border-white/20 text-white text-small font-medium", children: [
+              safeT("aboutCompany.hero.establishedYear", { year: establishedYear }),
+              " - ",
+              safeT("aboutCompany.hero.experience", { years: experienceYears })
+            ] })
+          ] })
+        ] }) })
+      ]
+    }
+  ) });
+};
 const TimelineSection = ({ data, t, section }) => {
   var _a, _b, _c;
   const timelineData = ((_c = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))) == null ? void 0 : _c.map((item) => item.data)) || [];
@@ -1770,6 +1841,209 @@ const PartnerListSection_2 = ({ t, getPartnerList, imageBaseUrl = "", section })
     ) })
   ] }) });
 };
+const PartnerAutoSection_1 = ({ getPartnerList, t, isDarkMode, imageBaseUrl = "", section }) => {
+  const [partners, setPartners] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(0);
+  useEffect(() => {
+    const loadData = () => __async(null, null, function* () {
+      if (!getPartnerList) return;
+      setLoading(true);
+      try {
+        const result = yield getPartnerList();
+        if (result && result.success && Array.isArray(result.data)) {
+          const sorted = [...result.data].sort((a, b) => (a.order || 0) - (b.order || 0));
+          setPartners(sorted);
+        }
+      } catch (error) {
+        console.error("Error loading auto partners:", error);
+      } finally {
+        setLoading(false);
+      }
+    });
+    loadData();
+  }, [getPartnerList]);
+  const getImageUrl = (imagePath) => {
+    if (!imagePath) return "";
+    if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+      return imagePath;
+    }
+    return `${imageBaseUrl}${imagePath}`;
+  };
+  const itemsPerPage = 30;
+  const totalPages = Math.ceil(partners.length / itemsPerPage);
+  const currentPartners = partners.slice(
+    currentPage * itemsPerPage,
+    (currentPage + 1) * itemsPerPage
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 animate-pulse", children: [
+      (section == null ? void 0 : section.title) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-8 w-64 bg-gray-200 dark:bg-slate-700 mx-auto rounded-lg mb-12" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 md:gap-8", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-200 dark:bg-slate-700 rounded-xl h-28 border border-gray-150 dark:border-gray-850" }, i)) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12", children: [
+    (section == null ? void 0 : section.title) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "text-3xl font-bold mb-4",
+          style: { color: isDarkMode ? "#F8FAFC" : "#1E3888" },
+          dangerouslySetInnerHTML: { __html: section.title }
+        }
+      ),
+      section.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "text-lg",
+          style: { color: isDarkMode ? "#CBD5E1" : "#475569" },
+          dangerouslySetInnerHTML: { __html: section.description }
+        }
+      )
+    ] }),
+    currentPartners.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 md:gap-8", children: currentPartners.map((partner) => {
+      const hasUrl = !!partner.websiteUrl;
+      const CardElement = hasUrl ? "a" : "div";
+      const cardProps = hasUrl ? {
+        href: partner.websiteUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      } : {};
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CardElement,
+        __spreadProps(__spreadValues({}, cardProps), {
+          className: "flex items-center justify-center p-5 bg-white dark:bg-slate-800 rounded-xl hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-28 border border-gray-100 dark:border-gray-700 shadow-sm",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              src: getImageUrl(partner.logoUrl),
+              alt: partner.name || "Partner logo",
+              className: "max-w-full max-h-16 object-contain transition-all duration-300",
+              onError: (e) => {
+                e.target.src = "https://via.placeholder.com/150x80?text=Logo";
+              }
+            }
+          )
+        }),
+        partner.id
+      );
+    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: (t == null ? void 0 : t("partners.noData")) || "Chưa có dữ liệu đối tác." }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-center items-center gap-4 mt-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((prev) => Math.max(0, prev - 1)),
+          disabled: currentPage === 0,
+          className: "w-12 h-12 rounded-full border border-blue-600 dark:border-blue-400 flex items-center justify-center text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          "aria-label": "Trang trước",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 stroke-current fill-none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1)),
+          disabled: currentPage === totalPages - 1,
+          className: "w-12 h-12 rounded-full border border-blue-600 dark:border-blue-400 flex items-center justify-center text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          "aria-label": "Trang sau",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 stroke-current fill-none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] })
+  ] }) });
+};
+const PartnersGridSection_3 = ({ data, t, isDarkMode, imageBaseUrl = "", section }) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const extractPartners = (data2) => {
+    if (!(data2 == null ? void 0 : data2.sectionDataBindingItems) || data2.sectionDataBindingItems.length === 0) {
+      return [];
+    }
+    return data2.sectionDataBindingItems.filter((item) => item && item.data).map((item) => item.data).sort((a, b) => (a.order || 0) - (b.order || 0));
+  };
+  const getImageUrl = (imagePath) => {
+    if (!imagePath) return "";
+    if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+      return imagePath;
+    }
+    return `${imageBaseUrl}${imagePath}`;
+  };
+  const partners = extractPartners(data);
+  const itemsPerPage = 30;
+  const totalPages = Math.ceil(partners.length / itemsPerPage);
+  const currentPartners = partners.slice(
+    currentPage * itemsPerPage,
+    (currentPage + 1) * itemsPerPage
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12", children: [
+    (section == null ? void 0 : section.title) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "text-3xl font-bold mb-4",
+          style: { color: isDarkMode ? "#F8FAFC" : "#1E3888" },
+          dangerouslySetInnerHTML: { __html: section.title }
+        }
+      ),
+      section.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "text-lg",
+          style: { color: isDarkMode ? "#CBD5E1" : "#475569" },
+          dangerouslySetInnerHTML: { __html: section.description }
+        }
+      )
+    ] }),
+    currentPartners.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 md:gap-8", children: currentPartners.map((partner) => {
+      const hasUrl = !!partner.websiteUrl;
+      const CardElement = hasUrl ? "a" : "div";
+      const cardProps = hasUrl ? {
+        href: partner.websiteUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      } : {};
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CardElement,
+        __spreadProps(__spreadValues({}, cardProps), {
+          className: "flex items-center justify-center p-5 bg-white dark:bg-slate-800 rounded-xl hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-28 border border-gray-100 dark:border-gray-700 shadow-sm",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              src: getImageUrl(partner.logoUrl),
+              alt: partner.name || "Partner logo",
+              className: "max-w-full max-h-16 object-contain transition-all duration-300",
+              onError: (e) => {
+                e.target.src = "https://via.placeholder.com/150x80?text=Logo";
+              }
+            }
+          )
+        }),
+        partner.id
+      );
+    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: (t == null ? void 0 : t("partners.noData")) || "Chưa có dữ liệu đối tác." }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-center items-center gap-4 mt-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((prev) => Math.max(0, prev - 1)),
+          disabled: currentPage === 0,
+          className: "w-12 h-12 rounded-full border border-blue-600 dark:border-blue-400 flex items-center justify-center text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          "aria-label": "Trang trước",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 stroke-current fill-none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1)),
+          disabled: currentPage === totalPages - 1,
+          className: "w-12 h-12 rounded-full border border-blue-600 dark:border-blue-400 flex items-center justify-center text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          "aria-label": "Trang sau",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 stroke-current fill-none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] })
+  ] }) });
+};
 const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService }) => {
   const [formData, setFormData] = useState({
     fullName: "",
@@ -5343,8 +5617,357 @@ const HeroBannerSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     ] }) })
   ] });
 };
+const HeroBannerSection_2 = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+  var _a, _b;
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+  const extractBannerData = (data2) => {
+    if (!(data2 == null ? void 0 : data2.sectionDataBindingItems) || data2.sectionDataBindingItems.length === 0) {
+      return null;
+    }
+    const item = data2.sectionDataBindingItems[0];
+    if (!item || !item.data) {
+      return null;
+    }
+    const bannerData2 = item.data;
+    if (!bannerData2.id && !bannerData2.name) {
+      return null;
+    }
+    const extractedData = {
+      id: bannerData2.id,
+      name: bannerData2.name || "",
+      description: bannerData2.description || "",
+      images: Array.isArray(bannerData2.images) ? bannerData2.images : []
+    };
+    return extractedData;
+  };
+  const bannerData = extractBannerData(data);
+  const getImageUrl = (imagePath) => {
+    if (!imagePath) {
+      return null;
+    }
+    if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+      return imagePath;
+    }
+    return `${imageBaseUrl}${imagePath}`;
+  };
+  const slideImages = ((_a = bannerData == null ? void 0 : bannerData.images) == null ? void 0 : _a.map((img) => ({
+    id: img.id || `img-${Math.random()}`,
+    url: getImageUrl(img.url)
+  }))) || [];
+  const defaultImage = "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1920&h=1080&fit=crop&q=80";
+  const displayImages = [...slideImages].slice(0, 3);
+  if (!bannerData) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2 text-main", children: (t == null ? void 0 : t("banner.noData.title")) || "Chưa có dữ liệu" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: (t == null ? void 0 : t("banner.noData.description")) || "Hiện tại chưa có banner nào được thiết lập." })
+    ] }) });
+  }
+  const renderImages = () => {
+    if (displayImages.length === 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg aspect-[16/10] w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-400 text-sm", children: "Chưa có hình ảnh" }) });
+    }
+    const configs = [
+      { className: "banner2-img-0 dsm-float-slow", originalIndex: 0 },
+      { className: "banner2-img-1 dsm-float-medium", originalIndex: 1 },
+      { className: "banner2-img-2 dsm-float-fast", originalIndex: 2 }
+    ];
+    let mappedImages = [];
+    if (displayImages.length === 1) {
+      mappedImages = [{ img: displayImages[0], config: configs[1], originalIndex: 0 }];
+    } else if (displayImages.length === 2) {
+      mappedImages = [
+        { img: displayImages[0], config: configs[0], originalIndex: 0 },
+        { img: displayImages[1], config: configs[1], originalIndex: 1 }
+      ];
+    } else {
+      mappedImages = [
+        { img: displayImages[0], config: configs[0], originalIndex: 0 },
+        { img: displayImages[1], config: configs[1], originalIndex: 1 },
+        { img: displayImages[2], config: configs[2], originalIndex: 2 }
+      ];
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full banner2-image-container", children: mappedImages.map((item, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `absolute transition-all duration-300 hover:scale-[1.03] hover:!z-40 cursor-pointer ${item.config.className}`,
+        onClick: () => {
+          setActiveSlide(item.originalIndex);
+          setIsLightboxOpen(true);
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: item.img.url,
+            alt: `${bannerData.name} - ${idx + 1}`,
+            className: "w-full aspect-[16/10] object-cover rounded-lg shadow-[0_15px_30px_rgba(0,0,0,0.3)] border border-gray-200 dark:border-gray-800",
+            onError: (e) => {
+              e.target.src = defaultImage;
+            }
+          }
+        )
+      },
+      item.img.id
+    )) });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionWrapper, { isDarkMode, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+        @keyframes dsmFloatSlow {
+          0%, 100% { transform: translateY(0px) rotate(0.2deg); }
+          50% { transform: translateY(-12px) rotate(-0.2deg); }
+        }
+        @keyframes dsmFloatMedium {
+          0%, 100% { transform: translateY(0px) rotate(-0.1deg); }
+          50% { transform: translateY(-8px) rotate(0.1deg); }
+        }
+        @keyframes dsmFloatFast {
+          0%, 100% { transform: translateY(0px) rotate(0deg); }
+          50% { transform: translateY(-15px) rotate(0.3deg); }
+        }
+        .dsm-float-slow {
+          animation: dsmFloatSlow 6s ease-in-out infinite;
+        }
+        .dsm-float-medium {
+          animation: dsmFloatMedium 7s ease-in-out infinite;
+        }
+        .dsm-float-fast {
+          animation: dsmFloatFast 5s ease-in-out infinite;
+        }
+        
+        /* Mobile layout (default) */
+        .banner2-image-container {
+          position: relative;
+          width: 100%;
+          min-height: 280px;
+          margin-top: 1.5rem;
+        }
+        .banner2-img-0 {
+          left: 0%;
+          top: 25%;
+          width: 50%;
+          z-index: 10;
+        }
+        .banner2-img-1 {
+          left: 15%;
+          top: 5%;
+          width: 60%;
+          z-index: 20;
+        }
+        .banner2-img-2 {
+          left: 40%;
+          top: 40%;
+          width: 50%;
+          z-index: 30;
+        }
+
+        /* Desktop layout (min-width: 1024px) */
+        @media (min-width: 1024px) {
+          .banner2-image-container {
+            min-height: 480px;
+            margin-top: 0;
+          }
+          .banner2-img-0 {
+            left: 0%;
+            top: 30%;
+            width: 50%;
+          }
+          .banner2-img-1 {
+            left: 15%;
+            top: 10%;
+            width: 65%;
+          }
+          .banner2-img-2 {
+            left: 40%;
+            top: 45%;
+            width: 55%;
+          }
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute top-0 right-0 w-96 h-96 rounded-full opacity-20 blur-3xl",
+          style: {
+            background: isDarkMode ? "#1086CD" : "#1E3888"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute bottom-0 left-0 w-96 h-96 rounded-full opacity-10 blur-3xl",
+          style: {
+            background: isDarkMode ? "#1E3888" : "#1086CD"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full lg:w-1/2 lg:pr-8 lg:self-start lg:pt-8", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "leading-tight mb-6",
+            style: {
+              color: isDarkMode ? "#F8FAFC" : "#1E3888"
+            },
+            dangerouslySetInnerHTML: { __html: bannerData.name }
+          }
+        ),
+        bannerData.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "text-lg sm:text-xl leading-relaxed mb-8",
+            style: {
+              color: isDarkMode ? "#CBD5E1" : "#475569"
+            },
+            dangerouslySetInnerHTML: { __html: bannerData.description }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-1/2 py-4 md:py-4 lg:py-5", children: renderImages() })
+    ] }) }),
+    isLightboxOpen && createPortal(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "fixed inset-0 flex items-center justify-center p-4",
+          style: {
+            background: "rgba(0, 0, 0, 0.95)",
+            backdropFilter: "blur(10px)",
+            zIndex: 99999
+          },
+          onClick: () => setIsLightboxOpen(false),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setIsLightboxOpen(false),
+                className: "absolute top-4 right-4 p-3 transition-all duration-300 hover:scale-110",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  zIndex: 1e5
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    className: "w-6 h-6",
+                    fill: "none",
+                    stroke: "white",
+                    viewBox: "0 0 24 24",
+                    style: { filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))" },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+                  }
+                )
+              }
+            ),
+            displayImages.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setActiveSlide((prev) => (prev - 1 + displayImages.length) % displayImages.length);
+                  },
+                  className: "absolute left-4 p-3 transition-all duration-300 hover:scale-110",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    zIndex: 1e5
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "svg",
+                    {
+                      className: "w-6 h-6",
+                      fill: "none",
+                      stroke: "white",
+                      viewBox: "0 0 24 24",
+                      style: { filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))" },
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setActiveSlide((prev) => (prev + 1) % displayImages.length);
+                  },
+                  className: "absolute right-4 p-3 transition-all duration-300 hover:scale-110",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    zIndex: 1e5
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "svg",
+                    {
+                      className: "w-6 h-6",
+                      fill: "none",
+                      stroke: "white",
+                      viewBox: "0 0 24 24",
+                      style: { filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))" },
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: "relative max-w-7xl max-h-full",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "img",
+                    {
+                      src: ((_b = displayImages[activeSlide]) == null ? void 0 : _b.url) || defaultImage,
+                      alt: bannerData.name,
+                      className: "max-w-full max-h-[90vh] object-contain rounded",
+                      onError: (e) => {
+                        e.target.src = defaultImage;
+                      }
+                    }
+                  ),
+                  displayImages.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2", children: displayImages.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setActiveSlide(index2);
+                      },
+                      className: "w-2 h-2 rounded-full transition-all duration-300",
+                      style: {
+                        background: activeSlide === index2 ? "white" : "rgba(255, 255, 255, 0.5)",
+                        width: activeSlide === index2 ? "24px" : "8px"
+                      }
+                    },
+                    index2
+                  )) })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
 const index = {
   AboutCompanySection,
+  AboutCompanySection_2,
+  HeroBannerSection_2,
+  PartnerAutoSection_1,
+  PartnersGridSection_3,
   CompanyValues,
   TimelineSection,
   PartnerCard,
@@ -5373,6 +5996,7 @@ const index = {
 };
 export {
   AboutCompanySection,
+  AboutCompanySection_2,
   CompanyValues,
   ContactFormSection,
   ContactInfoSection,
@@ -5382,15 +6006,18 @@ export {
   DiagramSection2,
   FaqSection,
   HeroBannerSection,
+  HeroBannerSection_2,
   MilestoneSection,
   PageChildrenSelectSection,
   PageChildrenSelectSection1,
   PageChildrenSelectSection2,
   PageHighlightSection,
+  PartnerAutoSection_1,
   PartnerCard,
   PartnerListCard$1 as PartnerListCard,
   PartnerListSection,
   PartnerListSection_2,
+  PartnersGridSection_3,
   PartnersSection$1 as PartnersSection,
   PartnersSection as PartnersSection_2,
   ProductListSection,