npm - s-platform-landing-section - Versions diffs - 0.1.17 → 0.1.19 - Mend

s-platform-landing-section 0.1.17 → 0.1.19

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

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -21,6 +21,7 @@ require('slick-carousel/slick/slick-theme.css');
 var ai = require('react-icons/ai');
 var go = require('react-icons/go');
 var ri = require('react-icons/ri');
+var gi = require('react-icons/gi');
 var Button = function Button(props) {
   var _props$label = props.label,
@@ -36,7 +37,7 @@ var Button = function Button(props) {
     _props$type = props.type,
     type = _props$type === void 0 ? "primary" : _props$type;
   var _className = type === "primary" ? "text-textButton bg-primary" : "text-primary border border-primary";
-  _className = "font-medium rounded-lg text-sm px-3 py-2 md:px-4 md:py-2.5 hover:text-textButton hover:bg-primary hover:opacity-80 " + _className + " " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
+  _className = "font-medium rounded-lg text-sm px-3 py-2 md:px-4 md:py-2.5 hover:text-textButton hover:bg-primary hover:opacity-80 " + _className + " " + className + " " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "");
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: _className,
@@ -111,18 +112,19 @@ var getDurationValue = function getDurationValue(attributes) {
   return durationAtt ? ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$value = durationAtt.value) === null || _durationAtt$value === void 0 ? void 0 : _durationAtt$value[0]) || "0") + " p" : "";
 };
 var genProductSlug = function genProductSlug(productName, id) {
+  var _slug, _slug2, _slug3, _slug4, _slug5, _slug6, _slug7, _slug8, _slug9, _slug10, _slug11;
   var slug = productName === null || productName === void 0 ? void 0 : productName.toLowerCase();
-  slug = slug.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, "a");
-  slug = slug.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, "e");
-  slug = slug.replace(/(ì|í|ị|ỉ|ĩ)/g, "i");
-  slug = slug.replace(/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/g, "o");
-  slug = slug.replace(/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/g, "u");
-  slug = slug.replace(/(ỳ|ý|ỵ|ỷ|ỹ)/g, "y");
-  slug = slug.replace(/(đ)/g, "d");
-  slug = slug.replace(/([^0-9a-z-\s])/g, "");
-  slug = slug.replace(/(\s+)/g, "-");
-  slug = slug.replace(/^-+/g, "");
-  slug = slug.replace(/-+$/g, "");
+  slug = (_slug = slug) === null || _slug === void 0 ? void 0 : _slug.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, "a");
+  slug = (_slug2 = slug) === null || _slug2 === void 0 ? void 0 : _slug2.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, "e");
+  slug = (_slug3 = slug) === null || _slug3 === void 0 ? void 0 : _slug3.replace(/(ì|í|ị|ỉ|ĩ)/g, "i");
+  slug = (_slug4 = slug) === null || _slug4 === void 0 ? void 0 : _slug4.replace(/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/g, "o");
+  slug = (_slug5 = slug) === null || _slug5 === void 0 ? void 0 : _slug5.replace(/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/g, "u");
+  slug = (_slug6 = slug) === null || _slug6 === void 0 ? void 0 : _slug6.replace(/(ỳ|ý|ỵ|ỷ|ỹ)/g, "y");
+  slug = (_slug7 = slug) === null || _slug7 === void 0 ? void 0 : _slug7.replace(/(đ)/g, "d");
+  slug = (_slug8 = slug) === null || _slug8 === void 0 ? void 0 : _slug8.replace(/([^0-9a-z-\s])/g, "");
+  slug = (_slug9 = slug) === null || _slug9 === void 0 ? void 0 : _slug9.replace(/(\s+)/g, "-");
+  slug = (_slug10 = slug) === null || _slug10 === void 0 ? void 0 : _slug10.replace(/^-+/g, "");
+  slug = (_slug11 = slug) === null || _slug11 === void 0 ? void 0 : _slug11.replace(/-+$/g, "");
   return slug + "-" + id;
 };
 var getLinkProductDetail = function getLinkProductDetail(product) {
@@ -133,6 +135,13 @@ var getLinkServiceDetail = function getLinkServiceDetail(product) {
   var slug = genProductSlug(product === null || product === void 0 ? void 0 : product.productName, product === null || product === void 0 ? void 0 : product.productId);
   return "/service/" + slug + "/" + (product === null || product === void 0 ? void 0 : product.shopId);
 };
+var getLinkNewsDetail = function getLinkNewsDetail(news) {
+  var slug = genProductSlug(news === null || news === void 0 ? void 0 : news.title, news === null || news === void 0 ? void 0 : news.articleId);
+  return "/news_detail/" + slug + "/" + (news === null || news === void 0 ? void 0 : news.catId) + "/" + (news === null || news === void 0 ? void 0 : news.shopId);
+};
+var getLinkNewsByCategory = function getLinkNewsByCategory(news) {
+  return "/news_by_category/" + (news === null || news === void 0 ? void 0 : news.catId) + "/" + (news === null || news === void 0 ? void 0 : news.shopId);
+};
 var LinkToPage = function LinkToPage(props) {
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -376,20 +385,38 @@ var NavBar7 = function NavBar7(props) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: "flex w-full justify-end text-gray4",
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-between"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 items-center"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/",
+    onClick: function onClick() {
+      return setIsOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
+    className: "h-14 w-14 bg-cover bg-no-repeat"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl font-semibold line-clamp-1"
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
+    className: "text-gray4",
     onClick: function onClick() {
       setIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(rx.RxCross2, {
     size: 24
-  })), /*#__PURE__*/React__default.createElement("div", null, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB3 = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB3 === void 0 ? void 0 : (_shopConfigStyle$navB4 = _shopConfigStyle$navB3.filter(function (e) {
+  }))), /*#__PURE__*/React__default.createElement("div", null, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB3 = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB3 === void 0 ? void 0 : (_shopConfigStyle$navB4 = _shopConfigStyle$navB3.filter(function (e) {
     return e === null || e === void 0 ? void 0 : e.isShow;
   })) === null || _shopConfigStyle$navB4 === void 0 ? void 0 : _shopConfigStyle$navB4.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
-      key: index
+      key: index,
+      onClick: function onClick() {
+        return setIsOpen(false);
+      }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "py-2 " + ((item === null || item === void 0 ? void 0 : item.name) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
     }, item === null || item === void 0 ? void 0 : item.label));
@@ -580,10 +607,16 @@ var NavBar1 = function NavBar1(props) {
     className: "flex justify-between"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-2 items-center"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/",
+    onClick: function onClick() {
+      return setIsOpen(false);
+    }
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     className: "h-14 w-14 bg-cover bg-no-repeat"
-  }), /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl font-semibold line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
@@ -598,7 +631,10 @@ var NavBar1 = function NavBar1(props) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
-      key: index
+      key: index,
+      onClick: function onClick() {
+        return setIsOpen(false);
+      }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "py-2 " + ((item === null || item === void 0 ? void 0 : item.name) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
     }, item === null || item === void 0 ? void 0 : item.label));
@@ -787,7 +823,7 @@ var Input = React.forwardRef(function (props, ref) {
       setTypeInput("text");
     }
   };
-  var _className = "h-9 md:h-10 py-1 px-2 border border-stroke rounded-lg   " + className;
+  var _className = "h-10 py-1 px-2 border border-stroke rounded-lg   " + className;
   var _inputClassName = (isQuantity ? "text-center w-12" : "") + " focus:outline-none focus:ring-0 bg-transparent\t " + inputClassName;
   var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
     return (e === null || e === void 0 ? void 0 : e.type) === "required";
@@ -831,7 +867,7 @@ var Input = React.forwardRef(function (props, ref) {
 });
 var Hero1 = function Hero1(props) {
-  var _sectionData$, _sectionData$$srcImag, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button, _sectionData$4$button2, _sectionData$5, _sectionData$5$button, _sectionData$5$button2;
+  var _sectionData$, _sectionData$$srcImag, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button, _sectionData$4$button2, _sectionData$5, _sectionData$5$button, _sectionData$5$button2, _sectionData$6, _sectionData$6$button, _sectionData$6$button2;
   var shopConfigStyle = props.shopConfigStyle,
     data = props.data,
     _props$Link = props.Link,
@@ -848,14 +884,17 @@ var Hero1 = function Hero1(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-[80%] md:w-2/3 xl:w-1/2 md:h-2/3 flex flex-col gap-2 md:gap-8 justify-center items-center bg-background opacity-90 absolute top-5 md:top-10 px-6 py-4 rounded-tr-[40px] rounded-bl-[40px] md:rounded-tr-[80px] md:rounded-bl-[80px]"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl text-center md:text-4xl lg:text-[40px] text-primary font-medium"
+    className: "text-xl text-center md:text-4xl lg:text-[40px] text-primary font-medium ",
+    style: {
+      lineHeight: "normal"
+    }
   }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.title), /*#__PURE__*/React__default.createElement("div", {
     className: "text-center md:text-2xl lg:text-3xl font-medium"
   }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$3 = sectionData[0]) === null || _sectionData$3 === void 0 ? void 0 : _sectionData$3.description), /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$4 = sectionData[0]) === null || _sectionData$4 === void 0 ? void 0 : (_sectionData$4$button = _sectionData$4.buttons) === null || _sectionData$4$button === void 0 ? void 0 : (_sectionData$4$button2 = _sectionData$4$button[0]) === null || _sectionData$4$button2 === void 0 ? void 0 : _sectionData$4$button2.link
+    href: (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$4 = sectionData[0]) === null || _sectionData$4 === void 0 ? void 0 : (_sectionData$4$button = _sectionData$4.buttons) === null || _sectionData$4$button === void 0 ? void 0 : (_sectionData$4$button2 = _sectionData$4$button[0]) === null || _sectionData$4$button2 === void 0 ? void 0 : _sectionData$4$button2.route) || (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$5 = sectionData[0]) === null || _sectionData$5 === void 0 ? void 0 : (_sectionData$5$button = _sectionData$5.buttons) === null || _sectionData$5$button === void 0 ? void 0 : (_sectionData$5$button2 = _sectionData$5$button[0]) === null || _sectionData$5$button2 === void 0 ? void 0 : _sectionData$5$button2.link) || "#"
   }, /*#__PURE__*/React__default.createElement(Button, {
-    label: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$5 = sectionData[0]) === null || _sectionData$5 === void 0 ? void 0 : (_sectionData$5$button = _sectionData$5.buttons) === null || _sectionData$5$button === void 0 ? void 0 : (_sectionData$5$button2 = _sectionData$5$button[0]) === null || _sectionData$5$button2 === void 0 ? void 0 : _sectionData$5$button2.label,
+    label: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$6 = sectionData[0]) === null || _sectionData$6 === void 0 ? void 0 : (_sectionData$6$button = _sectionData$6.buttons) === null || _sectionData$6$button === void 0 ? void 0 : (_sectionData$6$button2 = _sectionData$6$button[0]) === null || _sectionData$6$button2 === void 0 ? void 0 : _sectionData$6$button2.label,
     shopConfigStyle: shopConfigStyle
   })), "            "), /*#__PURE__*/React__default.createElement("div", {
     className: "w-[90%] md:w-2/3 xl:w-1/2 bg-background flex gap-2 md:gap-4 lg:gap-6 p-2 md:p-4 lg:p-6 rounded-xl absolute bottom-[-40px] shadow-lg"
@@ -887,7 +926,7 @@ var Hero2 = function Hero2(props) {
     className: "relative"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
-    className: "w-full object-cover min-h-[25vh] md:min-h-[30vh] max-h-[100vh]"
+    className: "w-full object-cover min-h-[30vh] md:min-h-[50vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "absolute flex flex-col gap-1 md:gap-4 absolute w-1/2 lg:w-1/3  top-2 sm:top-[20%] xl:top-1/4 right-[2%] lg:right-[15%]"
   }, /*#__PURE__*/React__default.createElement("img", {
@@ -907,7 +946,7 @@ var Hero5 = function Hero5(props) {
     className: "relative"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
-    className: "w-full min-h-[25vh] md:min-h-[30vh] max-h-[100vh]"
+    className: "w-full min-h-[30vh] md:min-h-[50vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2 md:gap-4 absolute top-5 md:top-[20%] w-1/2 lg:w-1/3 left-4 xl:left-20"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -920,13 +959,15 @@ var Hero5 = function Hero5(props) {
 var Hero6 = function Hero6(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$, _sectionData$, _sectionData$$buttons;
   var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
+    data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
-    className: "w-full h-auto min-h-[25vh md:min-h-[30vh] max-h-[100vh]"
+    className: "w-full h-auto min-h-[30vh] md:min-h-[50vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "absolute top-0 md:top-14 lg:top-20 w-full p-3 md:p-6  lg:p-12 z-10 flex flex-col gap-2 md:gap-4 lg:gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -934,7 +975,8 @@ var Hero6 = function Hero6(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title), /*#__PURE__*/React__default.createElement("div", {
     className: "md:text-xl"
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$buttons = _sectionData$.buttons) === null || _sectionData$$buttons === void 0 ? void 0 : _sectionData$$buttons.map(function (button) {
-    return /*#__PURE__*/React__default.createElement("a", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
       href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
     }, /*#__PURE__*/React__default.createElement(Button, {
       label: button === null || button === void 0 ? void 0 : button.label,
@@ -946,7 +988,9 @@ var Hero6 = function Hero6(props) {
 var Hero10 = function Hero10(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
   var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
+    data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-full bg-cover bg-center bg-no-repeat ",
@@ -959,8 +1003,10 @@ var Hero10 = function Hero10(props) {
     className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
-  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button) {
-    return /*#__PURE__*/React__default.createElement("a", {
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      key: "gdf-" + index,
       href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
     }, /*#__PURE__*/React__default.createElement(Button, {
       label: button === null || button === void 0 ? void 0 : button.label,
@@ -1060,13 +1106,13 @@ var CarouselItem = function CarouselItem(props) {
   })))), isNavigateButton ? /*#__PURE__*/React__default.createElement("div", {
     className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "p-2 h-full w-10 md:w-12 rounded-full " + (isScrolledToRight ? "bg-gray5" : "bg-primary"),
+    className: "p-2 h-full w-10 h-10 md:h-12 md:w-12 rounded-full " + (isScrolledToRight ? "bg-gray5" : "bg-primary"),
     onClick: handleClickPrevImg
   }, /*#__PURE__*/React__default.createElement(io.IoIosArrowBack, {
     size: 32,
     className: "inline-block text-lg text-textButton"
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: " p-2 h-full w-10 md:w-12 rounded-full  " + (isScrolledToRight ? "bg-primary" : "bg-gray5"),
+    className: " p-2 h-full w-10 h-10 md:h-12 md:w-12 rounded-full  " + (isScrolledToRight ? "bg-primary" : "bg-gray5"),
     onClick: handleClickNextImg
   }, /*#__PURE__*/React__default.createElement(io.IoIosArrowForward, {
     size: 32,
@@ -7327,7 +7373,7 @@ var Features3 = function Features3(props) {
   }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: (item === null || item === void 0 ? void 0 : item.link) || (item === null || item === void 0 ? void 0 : item.route)
+      href: (item === null || item === void 0 ? void 0 : item.link) || (item === null || item === void 0 ? void 0 : item.route) || "#"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "grid grid-cols-2 p-3 rounded-lg font-semibold",
       key: "dfsdfj-" + index,
@@ -7822,12 +7868,14 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
   }));
 };
-var NotFoundProduct = function NotFoundProduct() {
+var NotFoundProduct = function NotFoundProduct(props) {
+  var _props$text = props.text,
+    text = _props$text === void 0 ? "sản phẩm" : _props$text;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
   }, /*#__PURE__*/React__default.createElement(fa.FaBoxOpen, {
     size: 80
-  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 ", text));
 };
 var TreatmentsList6 = function TreatmentsList6(props) {
@@ -7892,28 +7940,34 @@ var ModalNotification = function ModalNotification(props) {
   var onClose = props.onClose,
     onCloseFormBooking = props.onCloseFormBooking,
     _props$isButtonClose = props.isButtonClose,
-    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose;
+    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$buttonClassNam = props.buttonClassName,
+    buttonClassName = _props$buttonClassNam === void 0 ? "" : _props$buttonClassNam;
   var handleClickOutside = function handleClickOutside(event) {
-    if (modalRef.current && !modalRef.current.contains(event.target)) {
-      if (onClose) onClose();
-      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
-        onCloseFormBooking();
-      }
+    event.stopPropagation();
+    if (onClose) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+    if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
+      onCloseFormBooking();
     }
   };
-  React.useEffect(function () {
-    document.addEventListener('click', handleClickOutside);
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 "
+    className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 ",
+    onClick: handleClickOutside
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: " flex items-center justify-center relative bg-red",
+    className: "flex items-center justify-center relative " + className,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    style: style,
     ref: modalRef
   }, props === null || props === void 0 ? void 0 : props.children, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
-    className: "absolute top-4 right-4",
+    className: "absolute top-4 right-4 " + buttonClassName,
     onClick: onClose
   }, /*#__PURE__*/React__default.createElement(rx.RxCross2, null))));
 };
@@ -8084,6 +8138,14 @@ var Select = React.forwardRef(function (props, ref) {
     setListOptions(options);
     if (!isMulti) setValue(defaultValue);
   }, [options]);
+  React.useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+    }, 500);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [inputSearch]);
   React.useEffect(function () {
     var _inputRef$current;
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
@@ -8160,11 +8222,9 @@ var Select = React.forwardRef(function (props, ref) {
       return true;
     }
   };
-  var handleSearch = function handleSearch(e) {
-    var searchValue = e.target.value;
-    setInputSearch(searchValue);
+  var handleSearch = function handleSearch(searchValue) {
     if (handleSearchOption && typeof handleSearchOption === 'function') {
-      handleSearchOption(searchValue);
+      handleSearchOption === null || handleSearchOption === void 0 ? void 0 : handleSearchOption(searchValue);
     } else {
       var listFilterOptions = options.filter(function (item) {
         var _item$label;
@@ -8252,7 +8312,7 @@ var Select = React.forwardRef(function (props, ref) {
     placeholder: "T\xECm ki\u1EBFm",
     value: inputSearch,
     onChange: function onChange(e) {
-      handleSearch(e);
+      setInputSearch(e.target.value);
     }
   })) : null, /*#__PURE__*/React__default.createElement("div", null, (listOptions === null || listOptions === void 0 ? void 0 : listOptions.length) > 0 ? listOptions === null || listOptions === void 0 ? void 0 : listOptions.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -9047,9 +9107,10 @@ var TreatmentsList7 = function TreatmentsList7(props) {
   var renderItemSlide = function renderItemSlide(product, index) {
     var _product$productInfo, _product$productInfo2;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "w-full"
+      className: "w-full",
+      key: "shshf-" + index
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
+      className: "grid grid-cols-1 md:grid-cols-2 gap-6",
       key: index
     }, /*#__PURE__*/React__default.createElement(ProductImage, {
       product: product === null || product === void 0 ? void 0 : product.productInfo,
@@ -9072,33 +9133,22 @@ var TreatmentsList7 = function TreatmentsList7(props) {
       }
     }))));
   };
-  function RenderArrow(props) {
-    var className = props.className,
-      style = props.style,
-      onClick = props.onClick;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className,
-      style: _extends({}, style, {
-        display: "none"
-      }),
-      onClick: onClick
-    });
-  }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement(Slider, {
-    className: "center",
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-12 w-full"
+  }, (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(Slider, {
     infinite: true,
     slidesToShow: 1,
+    slidesToScroll: 1,
     speed: 500,
     autoplay: true,
     autoplaySpeed: 4000,
     pauseOnHover: true,
-    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
-    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    arrows: false,
     beforeChange: function beforeChange(oldIndex, newIndex) {
       return setCurrentSlide(newIndex);
     },
@@ -9112,6 +9162,8 @@ var TreatmentsList7 = function TreatmentsList7(props) {
     }
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
     return renderItemSlide(product, index);
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, {
+    text: "d\u1ECBch v\u1EE5"
   }))), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
@@ -9358,7 +9410,6 @@ var ProductItem2 = function ProductItem2(props) {
     Link = _props$Link === void 0 ? null : _props$Link,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className;
-  console.log("checkkkkkkkk:::::::", className);
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: getLinkProductDetail(product)
@@ -9390,9 +9441,9 @@ var ProductItem3 = function ProductItem3(props) {
     product: product,
     className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 flex flex-col gap-4 items-start"
+    className: "p-4 flex flex-col gap-2 md:gap-4 items-start"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1"
+    className: "line-clamp-1 text-lg"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
     className: "text-lg text-start"
@@ -9414,14 +9465,14 @@ var ProductItem4 = function ProductItem4(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full h-40 sm:h-56 lg:h-60 xl:h-64 bg-cover bg-no-repeat rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-start line-clamp-1"
+    className: "text-start line-clamp-1 text-lg"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
     className: "text-lg text-start mt-2"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
+    className: "flex pt-2 md:pt-4 gap-2 md:gap-4 border-t items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "p-2 md:p-[10px] rounded-full hover:opacity-80 border border-primary h-full w-auto flex items-center justify-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
   }, /*#__PURE__*/React__default.createElement(fi.FiShoppingCart, {
@@ -9480,7 +9531,7 @@ var ProductItem6 = function ProductItem6(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full h-40 sm:h-56 lg:h-60 xl:h-64 bg-cover bg-no-repeat rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text start line-clamp-1"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10355,12 +10406,14 @@ var ProductHighlight1 = function ProductHighlight1(props) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       product: product === null || product === void 0 ? void 0 : product.productInfo,
+      shopConfigStyle: shopConfigStyle,
       key: "zjk-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem thêm",
     onClick: handleGetMoreProducts,
-    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    shopConfigStyle: shopConfigStyle,
+    className: "mx-auto",
     type: "outline"
   }) : null);
 };
@@ -10622,7 +10675,7 @@ var Booking1 = function Booking1(props) {
 };
 var BookingForm6 = function BookingForm6(props) {
-  var _data$data, _data$data$, _data$data2, _data$data2$;
+  var _data$data, _data$data$, _data$data2, _data$data2$, _data$data3, _data$data3$, _data$data4, _data$data4$, _data$data5, _data$data5$, _data$data6, _data$data6$;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$shopConfig = props.shopConfig,
@@ -10639,14 +10692,20 @@ var BookingForm6 = function BookingForm6(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.route) || (data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.link) || "#"
+  }, data !== null && data !== void 0 && (_data$data3 = data.data) !== null && _data$data3 !== void 0 && (_data$data3$ = _data$data3[0]) !== null && _data$data3$ !== void 0 && _data$data3$.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary w-full h-auto"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.srcImage,
+    dangerouslySetInnerHTML: {
+      __html: configSvg(data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.svgImage)
+    }
+  })) : /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : (_data$data5$ = _data$data5[0]) === null || _data$data5$ === void 0 ? void 0 : _data$data5$.srcImage,
     className: "w-full h-auto"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-4 whitespace-pre-line"
-  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.description)), /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description)), /*#__PURE__*/React__default.createElement(BookingForm, {
     shopConfigStyle: shopConfigStyle,
     shopConfig: shopConfig,
     className: "col-span-2"
@@ -10743,15 +10802,21 @@ var Banner2 = function Banner2(props) {
 };
 var Banner3 = function Banner3(props) {
-  var data = props.data;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-5"
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("img", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: (item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      key: "djsd-" + index
+    }, /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
       className: "bg-cover bg-no-repeat h-full rounded-xl"
-    });
+    }));
   }));
 };
@@ -10944,13 +11009,11 @@ var Links1 = function Links1(props) {
 };
 var Footer1 = function Footer1(props) {
-  var _routes$filter;
+  var _shopConfigStyle$navB, _shopConfigStyle$navB2;
   var shopConfig = props.shopConfig,
     shopConfigStyle = props.shopConfigStyle,
     _props$Link = props.Link,
-    Link = _props$Link === void 0 ? null : _props$Link,
-    _props$routes = props.routes,
-    routes = _props$routes === void 0 ? [] : _props$routes;
+    Link = _props$Link === void 0 ? null : _props$Link;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
     primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
@@ -10982,7 +11045,9 @@ var Footer1 = function Footer1(props) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " !md:my-0 !my-0 pt-12 bg-bgSecondary"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/",
     className: "flex items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
     className: "object-cover w-16 h-16",
@@ -11021,12 +11086,13 @@ var Footer1 = function Footer1(props) {
     className: "mb-3 font-semibold text-lg"
   }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
     className: "leading-10 flex flex-col "
-  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+  }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (route, index) {
+  })) === null || _shopConfigStyle$navB2 === void 0 ? void 0 : _shopConfigStyle$navB2.map(function (route, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: route === null || route === void 0 ? void 0 : route.route
+      href: (route === null || route === void 0 ? void 0 : route.route) || "#",
+      key: "dfjg-" + index
     }, /*#__PURE__*/React__default.createElement("div", null, route === null || route === void 0 ? void 0 : route.label));
   }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "font-semibold mb-4 text-lg"
@@ -11074,11 +11140,11 @@ var Footer1 = function Footer1(props) {
 };
 var Footer7 = function Footer7(props) {
-  var _routes$filter;
+  var _shopConfigStyle$navB, _shopConfigStyle$navB2;
   var shopConfig = props.shopConfig,
     shopConfigStyle = props.shopConfigStyle,
-    _props$routes = props.routes,
-    routes = _props$routes === void 0 ? [] : _props$routes;
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
     primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
@@ -11119,7 +11185,9 @@ var Footer7 = function Footer7(props) {
       background: bgSecondary,
       color: textBody
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
     className: "object-cover w-14",
@@ -11137,7 +11205,9 @@ var Footer7 = function Footer7(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4 font-semibold text-md md:text-lg"
   }, "Th\xF4ng tin li\xEAn h\u1EC7"), shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF ", index + 1), /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: "dlkhg-" + index
+    }, /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF ", index + 1), /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-1"
     }, /*#__PURE__*/React__default.createElement(io5.IoLocationOutline, {
       size: 24,
@@ -11158,11 +11228,13 @@ var Footer7 = function Footer7(props) {
     className: "mb-4 font-semibold text-md md:text-lg"
   }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
     className: "leading-10 flex flex-col "
-  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+  }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (route, index) {
-    return /*#__PURE__*/React__default.createElement("a", {
-      href: route === null || route === void 0 ? void 0 : route.route
+  })) === null || _shopConfigStyle$navB2 === void 0 ? void 0 : _shopConfigStyle$navB2.map(function (route, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: (route === null || route === void 0 ? void 0 : route.route) || "#",
+      Link: Link,
+      key: "fiddf-" + index
     }, /*#__PURE__*/React__default.createElement("div", null, route === null || route === void 0 ? void 0 : route.label));
   }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "font-semibold mb-4 text-md md:text-lg"
@@ -11283,71 +11355,48 @@ var CustomerRating1 = function CustomerRating1(props) {
 var CustomerRating5 = function CustomerRating5(props) {
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  var _useState = React.useState(0),
-    currentIndex = _useState[0],
-    setCurrentIndex = _useState[1];
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var _useState2 = React.useState(0),
-    startX = _useState2[0],
-    setStartX = _useState2[1];
-  var _useState3 = React.useState(0),
-    endX = _useState3[0],
-    setEndX = _useState3[1];
-  var sliderRef = React.useRef();
-  var handleTouchStart = function handleTouchStart(e) {
-    var touchStart = e.touches[0].clientX;
-    setStartX(touchStart);
-  };
-  var handleTouchMove = function handleTouchMove(e) {
-    var touchMove = e.touches[0].clientX;
-    setEndX(touchMove);
-  };
-  var handleTouchEnd = function handleTouchEnd() {
-    var diff = startX - endX;
-    var threshold = sliderRef.current.offsetWidth / 3;
-    if (diff > threshold && currentIndex < sectionData.length - 1) {
-      setCurrentIndex(currentIndex + 1);
-    } else if (diff < -threshold && currentIndex > 0) {
-      setCurrentIndex(currentIndex - 1);
-    }
-  };
+  var _useState = React.useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " mx-0 md:mx-4 xl:mx-20 rounded-xl relative"
+    className: SECTION_CLASS + " mx-0 md:mx-4 xl:mx-20 rounded-xl pb-6 relative"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "absolute mt-16 inset-0 bg-bgSecondary [clip-path:polygon(0%_0%,_100%_30%,_100%_100%,_0%_100%)] z-0 rounded-3xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full relative z-10 border border-textHeading rounded-3xl flex overflow-hidden",
-    ref: sliderRef,
-    onTouchStart: handleTouchStart,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-start transition-transform duration-300",
-    style: {
-      transform: "translateX(-" + currentIndex * 100 + "%)"
+    className: "w-full relative z-10 border border-textHeading rounded-3xl"
+  }, /*#__PURE__*/React__default.createElement(Slider, {
+    infinite: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    arrows: false,
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
     }
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col  px-2 py-2 md:px-6 lg:px-12 md:py-6 items-center md:flex-row gap-6 md:gap-12 min-w-full overflow-hidden",
+      className: "p-6 !flex !flex-col md:!flex-row gap-4 xl:gap-6",
       key: "lpky-" + index
     }, /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.avatar,
-      className: "w-80 h-96 object-cover rounded-3xl"
+      className: "w-full md:w-80 h-96 object-cover rounded-3xl"
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col items-center md:items-start gap-6 justify-center"
+      className: "flex flex-col items-center md:items-start gap-4 lg:gap-6 justify-center"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "text-4xl font-semibold"
-    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description)));
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute bottom-2 md:bottom-20 lg:bottom-[30%] left-1/2 md:left-2/3 xl:left-1/2 transform -translate-x-1/2 flex gap-2"
-  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (_, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "dot-" + index,
-      onClick: function onClick() {
-        setCurrentIndex(index);
-      },
-      className: (currentIndex === index ? "w-6 bg-primary" : "w-3 bg-gray4") + " h-3 rounded-full hover:opacity-80 cursor-pointer "
-    });
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description, " ")));
   }))));
 };
@@ -11516,21 +11565,19 @@ var PageTitle1 = function PageTitle1(props) {
 };
 var About1 = function About1(props) {
+  var shopConfig = props.shopConfig,
+    data = props.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " flex flex-col gap-4"
-  }, /*#__PURE__*/React__default.createElement("div", null, "Tr\xE1i c\xE2y s\u1EA1ch - an to\xE0n cho s\u1EE9c kho\u1EBB ng\u01B0\u1EDDi ti\xEAu d\xF9ng. C\u1EEDa h\xE0ng ORGANIC FOOD c\u1EE7a ch\xFAng t\xF4i t\u1EEBng b\u01B0\u1EDBc \u0111i v\xE0o th\u1ECB tr\u01B0\u1EDDng v\xE0 ni\u1EC1m tin c\u1EE7a kh\xE1ch h\xE0ng. Ho\u1EA1t \u0111\u1ED9ng v\xE0o th\xE1ng 5/2020, ORGANIC FOOD \u0111\xE3 tr\u1EDF th\xE0nh c\xE1i t\xEAn quen thu\u1ED9c trong l\u0129nh v\u1EF1c cung c\u1EA5p tr\xE1i c\xE2y s\u1EA1ch, an to\xE0n, cam k\u1EBFt ch\xEDn t\u1EF1 nhi\xEAn 100% v\xE0 h\u01B0\u1EDBng \u0111\u1EBFn s\u1EE9c kho\u1EBB ng\u01B0\u1EDDi ti\xEAu d\xF9ng qua 3 ti\xEAu ch\xED:"), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-semibold"
-  }, "T\u1EA7m Nh\xECn"), /*#__PURE__*/React__default.createElement("div", null, "S\u1EA3n ph\u1EA9m t\u01B0\u0300 ORGANIC FOOD se\u0303 tr\u1EDF tha\u0300nh thu\u031Bo\u031Bng hi\u1EB9\u0302u quen thu\u1ECD\u0302c va\u0300 h\u01B0\u1EDBng \u0111\u1EBFn ch\u1EA5t l\u01B0\u1EE3ng t\u1ED1t nh\u1EA5t."), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-semibold"
-  }, "S\u1EE9 m\u1EC7nh"), /*#__PURE__*/React__default.createElement("li", {
-    className: "ps-4"
-  }, " \u0110\u1ECD\u0302i ngu\u0303 ba\u0301n ha\u0300ng s\u0103\u0303n sa\u0300ng l\u0103\u0301ng nghe va\u0300 t\u1EA1\u0302n ta\u0302m nhi\u1EB9\u0302t huy\xEA\u0301t trong co\u0302ng vi\u1EB9\u0302c."), /*#__PURE__*/React__default.createElement("li", {
-    className: "ps-4"
-  }, " Sa\u0309n ph\xE2\u0309m th\u01B0\u0301c u\xF4\u0301ng \u0111a da\u0323ng, \u0111a\u0309m ba\u0309o t\xF4\u0301t s\u01B0\u0301c kho\u0309e va\u0300 \u0111a\u0301p \u01B0\u0301ng \u0111u\u031B\u01A1\u0323c mong \u0111\u01A1\u0323i cu\u0309a kha\u0301ch ha\u0300ng."), /*#__PURE__*/React__default.createElement("li", {
-    className: "ps-4"
-  }, " Tr\xE1i c\xE2y \u0111a d\u1EA1ng, cam k\u1EBFt h\xE0ng s\u1EA1ch \u0111\u1EA3m b\u1EA3o ch\u1EA5t l\u01B0\u1EE3ng t\u1ED1t nh\u1EA5t v\xE0 an to\xE0n tuy\u1EC7t \u0111\u1ED1i cho ng\u01B0\u1EDDi ti\xEAu d\xF9ng"), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-semibold"
-  }, "Gi\xE1 Tr\u1ECB C\u1ED1t L\xF5i"), /*#__PURE__*/React__default.createElement("div", null, "ORGANIC FOOD s\u1EBD lu\xF4n l\xE0 ng\u01B0\u1EDDi b\u1EA1n tin c\u1EADy nh\u1EA5t c\xF9ng kh\xE1ch h\xE0ng, tr\xE1i c\xE2y s\u1EA1ch lu\xF4n \u0111\u1EA3m b\u1EA3o ch\u1EA5t l\u01B0\u1EE3ng v\xE0 mang l\u1EA1i ngu\u1ED3n dinh d\u01B0\u1EE1ng c\u0169ng nh\u01B0 s\u1EF1 an to\xE0n cho kh\xE1ch h\xE0ng, g\xF3p ph\u1EA7n mang \u0111\u1EBFn cu\u1ED9c s\u1ED1ng xanh kho\u1EBB m\u1EA1nh cho m\u1ECDi nh\xE0."));
+  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("h1", {
+    className: "text-4xl font-semibold"
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
+    }
+  }));
 };
 var About5 = function About5(props) {
@@ -11630,6 +11677,7 @@ var Breadcrumb1 = function Breadcrumb1(props) {
       label: "Trang chủ",
       route: "/"
     });
+    console.log(items);
     setItems(items);
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -11642,7 +11690,7 @@ var Breadcrumb1 = function Breadcrumb1(props) {
       className: "text-gray4"
     }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: item === null || item === void 0 ? void 0 : item.route,
+      href: (item === null || item === void 0 ? void 0 : item.route) || "#",
       style: {
         color: textHeading
       }
@@ -12501,7 +12549,7 @@ var SearchProduct1 = function SearchProduct1(props) {
     setSearchValue = _useState2[1];
   React.useEffect(function () {
     if (valueSearch === "") {
-      setProducts([]);
+      setListProducts([]);
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
@@ -12573,6 +12621,7 @@ var SearchProduct1 = function SearchProduct1(props) {
 };
 var SearchBar2 = function SearchBar2(props) {
+  var _data$data;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     data = props.data;
@@ -12618,12 +12667,21 @@ var SearchBar2 = function SearchBar2(props) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-[100vw] md:w-[50vw] py-6 mx-auto px-6 flex flex-col gap-4"
+    className: SECTION_CLASS + " md:mt-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: " w-full flex flex-col justify-center px-6 gap-2 md:gap-4 items-center rounded-xl md:rounded-3xl ",
+    style: {
+      background: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.srcImage) + ")",
+      backgroundPosition: "center",
+      backgroundSize: "cover"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full md:w-1/2 py-6 mx-auto px-6 flex flex-col h-full gap-4"
   }, /*#__PURE__*/React__default.createElement(Input, {
     icons: /*#__PURE__*/React__default.createElement(io5.IoSearchOutline, {
       className: "text-gray3"
     }),
-    className: "w-full",
+    className: "w-full h-12",
     inputClassName: "w-full",
     placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
     onChange: setSearchValue
@@ -12648,14 +12706,13 @@ var SearchBar2 = function SearchBar2(props) {
     })));
   })) : /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto"
-  }, data === null || data === void 0 ? void 0 : data.sectionDescription));
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription))));
 };
 var SearchBar5 = function SearchBar5(props) {
-  var _data$data, _data$data2, _data$data3;
+  var _data$data, _data$data2, _data$data3, _data$data4, _data$data5;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
-    shopConfigStyle = props.shopConfigStyle,
     data = props.data;
   var _useState = React.useState(""),
     value = _useState[0],
@@ -12669,14 +12726,17 @@ var SearchBar5 = function SearchBar5(props) {
       backgroundPosition: "center",
       backgroundSize: "cover"
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, data !== null && data !== void 0 && (_data$data2 = data.data) !== null && _data$data2 !== void 0 && _data$data2.title ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl font-semibold md:text-3xl lg:text-4xl text-textButton text-center"
-  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.title), /*#__PURE__*/React__default.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.description), /*#__PURE__*/React__default.createElement(Input, {
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.title) : null, data !== null && data !== void 0 && (_data$data4 = data.data) !== null && _data$data4 !== void 0 && _data$data4.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center text-textButton"
+  }, data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : _data$data5.description) : null, /*#__PURE__*/React__default.createElement(Input, {
     onChange: setValue,
     icons: /*#__PURE__*/React__default.createElement(io5.IoSearchOutline, {
-      className: "text-gray3 text-xl md:text-2xl"
+      className: "text-gray3 ps-1 text-xl md:text-2xl"
     }),
-    className: "w-full bg-bgSecondary w-full md:w-[50vw] lg:w-[35vw] mb-2 md:h-12",
+    wrapClassName: "w-full sm:w-[60%] md:w-[50%] lg:w-[40%]",
+    className: "w-full bg-bgSecondary  mb-2 md:h-12",
     style: {
       borderRadius: "32px"
     },
@@ -12687,20 +12747,17 @@ var SearchBar5 = function SearchBar5(props) {
       href: genLinkSearch(value)
     }, /*#__PURE__*/React__default.createElement(Button, {
       label: "T\xECm ki\u1EBFm",
-      className: "whitespace-nowrap h-full ",
-      shopConfigStyle: shopConfigStyle
+      className: "whitespace-nowrap h-full !rounded-3xl "
     })) : /*#__PURE__*/React__default.createElement(Button, {
       label: "T\xECm ki\u1EBFm",
-      className: "whitespace-nowrap ",
-      shopConfigStyle: shopConfigStyle
+      className: "whitespace-nowrap !rounded-3xl py-1.5 md:py-2.5"
     }))
   })));
 };
 var SearchBar6 = function SearchBar6(props) {
-  var _data$data, _data$data2, _data$data3;
-  var shopConfigStyle = props.shopConfigStyle,
-    _props$Link = props.Link,
+  var _data$data, _data$data2, _data$data3, _data$data4, _data$data5;
+  var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     data = props.data;
   var _useState = React.useState(""),
@@ -12713,15 +12770,18 @@ var SearchBar6 = function SearchBar6(props) {
       backgroundPosition: "center",
       backgroundSize: "cover"
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, data !== null && data !== void 0 && (_data$data2 = data.data) !== null && _data$data2 !== void 0 && _data$data2.title ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg font-semibold text-textBody md:text-2xl lg:text-3xl text-center"
-  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.title), /*#__PURE__*/React__default.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.description), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 md:gap-4 lg:gap-6 mb-2 md:mb-0"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.title) : null, data !== null && data !== void 0 && (_data$data4 = data.data) !== null && _data$data4 !== void 0 && _data$data4.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center text-textBody"
+  }, data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : _data$data5.description) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 md:gap-4 lg:gap-6 mb-2 md:mb-0 w-full md:w-[70%] h-10 lg:h-12 lg:w-1/2"
   }, /*#__PURE__*/React__default.createElement(Input, {
     icons: /*#__PURE__*/React__default.createElement(io5.IoSearchOutline, {
       className: "text-gray3"
     }),
-    className: "w-full h-full md:h-12 w-full md:w-[70vw] bg-background lg:w-[50vw]",
+    className: "w-full h-full",
+    wrapClassName: " w-full h-full",
     inputClassName: "w-full",
     placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
     onChange: setValue
@@ -12730,22 +12790,25 @@ var SearchBar6 = function SearchBar6(props) {
     href: genLinkSearch(value)
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "T\xECm ki\u1EBFm",
-    className: "whitespace-nowrap h-full",
-    shopConfigStyle: shopConfigStyle
+    className: "whitespace-nowrap h-full"
   })) : /*#__PURE__*/React__default.createElement(Button, {
     label: "T\xECm ki\u1EBFm",
-    className: "whitespace-nowrap ",
-    shopConfigStyle: shopConfigStyle
+    className: "whitespace-nowrap "
   }))));
 };
 var ShopHighlights2 = function ShopHighlights2(props) {
-  var data = props.data;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " my-0 md:my-0 py-6 grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6"
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: (item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#"
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col items-center text-center lg:px-3 gap-3",
       key: "kdf-" + index
     }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
@@ -12759,17 +12822,22 @@ var ShopHighlights2 = function ShopHighlights2(props) {
       className: "w-16 h-16 p-3 rounded-full bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "font-medium text-lg"
-    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description));
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description)));
   }));
 };
 var ShopHighlights5 = function ShopHighlights5(props) {
-  var data = props.data;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid md:grid-cols-3 py-6 gap-4 lg:gap-6 bg-bgSecondary"
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: (item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      Link: Link
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col items-center text-center md:px-3 lg:px-6 gap-3",
       key: "kdf-" + index
     }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
@@ -12783,7 +12851,7 @@ var ShopHighlights5 = function ShopHighlights5(props) {
       className: "w-16 h-16 rounded-full bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "font-medium text-xl text-textHeading pt-2 border-t border-textHeading"
-    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description));
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description)));
   }));
 };
@@ -12813,7 +12881,7 @@ var ShopHighlights6 = function ShopHighlights6(props) {
       className: " w-44 h-0.5 rounded-full bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description), /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: (item === null || item === void 0 ? void 0 : item.link) || (item === null || item === void 0 ? void 0 : item.route)
+      href: (item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#"
     }, /*#__PURE__*/React__default.createElement(Button, {
       shopConfigStyle: shopConfigStyle,
       label: item === null || item === void 0 ? void 0 : item.title
@@ -12828,7 +12896,9 @@ var ShopHighlights7 = function ShopHighlights7(props) {
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
@@ -12839,7 +12909,9 @@ var ShopHighlights7 = function ShopHighlights7(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: (it === null || it === void 0 ? void 0 : it.route) || (it === null || it === void 0 ? void 0 : it.link) || "#",
       key: index,
       className: "pt-6 col-span-3 md:col-span-1"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -12897,6 +12969,484 @@ var VideoFull1 = function VideoFull1(props) {
   })) : null);
 };
+var getAllArticleNewsApi = function getAllArticleNewsApi(shopId, appId, landingShopConfigId, params) {
+  if (params === void 0) {
+    params = {};
+  }
+  return api({
+    method: "get",
+    url: "/landing/news/article/get-all-filter",
+    params: _extends({
+      shopId: shopId,
+      appId: appId,
+      landingShopConfigId: landingShopConfigId
+    }, params)
+  });
+};
+var getNewsDetailApi = function getNewsDetailApi(articleId, shopId, landingShopConfigId) {
+  return api({
+    method: "get",
+    url: "/landing/news/article/" + articleId,
+    params: {
+      shopId: shopId,
+      landingShopConfigId: landingShopConfigId,
+      articleId: articleId
+    }
+  });
+};
+var NewsController = function NewsController(props) {
+  var shopConfig = props.shopConfig,
+    params = props.params;
+  var _useState = React.useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = React.useState([]),
+    newsArticles = _useState2[0],
+    setNewsArticles = _useState2[1];
+  var _useState3 = React.useState(),
+    setPage = _useState3[1];
+  React.useEffect(function () {
+    if (shopConfig !== null && shopConfig !== void 0 && shopConfig.shopId && shopConfig !== null && shopConfig !== void 0 && shopConfig.landingShopConfigId) {
+      getAllArticleNews();
+    } else {
+      setNewsArticles([]);
+      setPage(null);
+    }
+  }, [shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingShopConfigId, params]);
+  var getAllArticleNews = function getAllArticleNews() {
+    try {
+      setLoading(true);
+      var _temp = _catch(function () {
+        var defaultParams = {
+          page: 0,
+          size: 10,
+          active: true
+        };
+        var filterParams = _extends({}, defaultParams, params);
+        return Promise.resolve(getAllArticleNewsApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.appId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingShopConfigId, filterParams)).then(function (response) {
+          var _response$data, _response$data$status;
+          if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) == 200) {
+            var _response$data2, _response$data2$data, _response$data3, _response$data3$data;
+            setNewsArticles(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : (_response$data2$data = _response$data2.data) === null || _response$data2$data === void 0 ? void 0 : _response$data2$data.content);
+            setPage(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : (_response$data3$data = _response$data3.data) === null || _response$data3$data === void 0 ? void 0 : _response$data3$data.totalElements);
+          }
+          setLoading(false);
+        });
+      }, function (error) {
+        console.log(error);
+        setLoading(false);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    newsArticles: newsArticles,
+    loading: loading
+  };
+};
+var DefaultImage$1 = function DefaultImage(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center items-center max-w-full h-full aspect-video rounded-lg " + className,
+    style: {
+      backgroundColor: "#FAFAFA"
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgImageGallery, {
+    width: "25%",
+    height: "25%",
+    fill: "#D9D9D9"
+  }));
+};
+var NewsImage = function NewsImage(props) {
+  var _props$size2 = props.size,
+    size = _props$size2 === void 0 ? 0 : _props$size2,
+    _props$className2 = props.className,
+    className = _props$className2 === void 0 ? "" : _props$className2,
+    news = props.news;
+  var _useState = React.useState(""),
+    src = _useState[0],
+    setSrc = _useState[1];
+  React.useEffect(function () {
+    getNewsImage();
+  }, [news]);
+  var getNewsImage = function getNewsImage() {
+    var src = news === null || news === void 0 ? void 0 : news.thumbnail;
+    setSrc(src);
+  };
+  return src ? /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    className: "h-full rounded-lg max-w-full aspect-video " + className,
+    style: size ? {
+      width: size,
+      height: size
+    } : null
+  }) : /*#__PURE__*/React__default.createElement(DefaultImage$1, {
+    className: className,
+    size: size
+  });
+};
+var NewsHighlight1 = function NewsHighlight1(props) {
+  var _newsArticles$, _newsArticles$2, _newsArticles$3, _newsArticles$slice;
+  var _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data;
+  var _useState = React.useState({
+      tags: "HIGHLIGHT",
+      page: 0,
+      size: 6,
+      sort: "timeUpdate,DESC"
+    }),
+    params = _useState[0];
+  var _NewsController = NewsController(_extends({}, props, {
+      params: params
+    })),
+    _NewsController$newsA = _NewsController.newsArticles,
+    newsArticles = _NewsController$newsA === void 0 ? [] : _NewsController$newsA;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-12 mb-6 grid grid-cols-1 md:grid-cols-2 gap-6 "
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[0]),
+    Link: Link
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[0]
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "pt-3 font-medium text-lg"
+  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$ = newsArticles[0]) === null || _newsArticles$ === void 0 ? void 0 : _newsArticles$.title))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-6"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4 ",
+    href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1]),
+    Link: Link
+  }, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1]
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-lg"
+  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$2 = newsArticles[1]) === null || _newsArticles$2 === void 0 ? void 0 : _newsArticles$2.title)), /*#__PURE__*/React__default.createElement(LinkToPage, {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+    href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[2]),
+    Link: Link
+  }, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[2]
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-lg"
+  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$3 = newsArticles[2]) === null || _newsArticles$3 === void 0 ? void 0 : _newsArticles$3.title)))), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-3 gap-6 mt-6 "
+  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$slice = newsArticles.slice(3, 6)) === null || _newsArticles$slice === void 0 ? void 0 : _newsArticles$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: getLinkNewsDetail(item),
+      Link: Link,
+      key: "kdjf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "jgdfg-" + index
+    }, /*#__PURE__*/React__default.createElement(NewsImage, {
+      news: item
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-lg py-2"
+    }, item === null || item === void 0 ? void 0 : item.title)));
+  })));
+};
+var relativeTime = createCommonjsModule(function (module, exports) {
+!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+});
+var vi = createCommonjsModule(function (module, exports) {
+!function(t,n){module.exports=n(dayjs_min);}(commonjsGlobal,(function(t){function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var h=n(t),_={name:"vi",weekdays:"chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),months:"tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),weekStart:1,weekdaysShort:"CN_T2_T3_T4_T5_T6_T7".split("_"),monthsShort:"Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),weekdaysMin:"CN_T2_T3_T4_T5_T6_T7".split("_"),ordinal:function(t){return t},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM [năm] YYYY",LLL:"D MMMM [năm] YYYY HH:mm",LLLL:"dddd, D MMMM [năm] YYYY HH:mm",l:"DD/M/YYYY",ll:"D MMM YYYY",lll:"D MMM YYYY HH:mm",llll:"ddd, D MMM YYYY HH:mm"},relativeTime:{future:"%s tới",past:"%s trước",s:"vài giây",m:"một phút",mm:"%d phút",h:"một giờ",hh:"%d giờ",d:"một ngày",dd:"%d ngày",M:"một tháng",MM:"%d tháng",y:"một năm",yy:"%d năm"}};return h.default.locale(_,null,!0),_}));
+});
+var getAllNewsCategoriesApi = function getAllNewsCategoriesApi(shopId, landingShopConfigId, appId) {
+  if (appId === void 0) {
+    appId = "SSPA";
+  }
+  return api({
+    method: "get",
+    url: "/landing/news/category/get-all",
+    params: {
+      shopId: shopId,
+      landingShopConfigId: landingShopConfigId,
+      appId: appId,
+      active: true
+    }
+  });
+};
+var NewsCategoryController = function NewsCategoryController(props) {
+  var params = props.params,
+    shopConfig = props.shopConfig;
+  var _useState = React.useState([]),
+    newsCategories = _useState[0],
+    setNewsCategories = _useState[1];
+  React.useEffect(function () {
+    if (shopConfig !== null && shopConfig !== void 0 && shopConfig.shopId && shopConfig !== null && shopConfig !== void 0 && shopConfig.landingShopConfigId) getAllNewsCategories();
+  }, [shopConfig, params]);
+  var getAllNewsCategories = function getAllNewsCategories() {
+    try {
+      var _temp = _catch(function () {
+        return Promise.resolve(getAllNewsCategoriesApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingShopConfigId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.appId)).then(function (res) {
+          var _res$data, _res$data$status;
+          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
+            var _res$data2;
+            setNewsCategories(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
+          }
+        });
+      }, function (error) {
+        console.log(error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    newsCategories: newsCategories
+  };
+};
+dayjs_min.extend(relativeTime);
+dayjs_min.locale("vi");
+var News1 = function News1(props) {
+  var _newsArticles$slice;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$catId = props.catId,
+    catId = _props$catId === void 0 ? "" : _props$catId;
+  var _useState = React.useState({
+      page: 0,
+      sort: "timeUpdate,DESC",
+      size: 10,
+      catId: catId
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = React.useState({}),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
+  var _useState3 = React.useState(true),
+    isSeeMore = _useState3[0],
+    setIsSeeMore = _useState3[1];
+  var _NewsController = NewsController(_extends({}, props, {
+      params: params
+    })),
+    _NewsController$newsA = _NewsController.newsArticles,
+    newsArticles = _NewsController$newsA === void 0 ? [] : _NewsController$newsA,
+    loading = _NewsController.loading;
+  var _NewsCategoryControll = NewsCategoryController(props),
+    _NewsCategoryControll2 = _NewsCategoryControll.newsCategories,
+    newsCategories = _NewsCategoryControll2 === void 0 ? [] : _NewsCategoryControll2;
+  var handleSeeMoreNews = function handleSeeMoreNews() {
+    setIsSeeMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
+  React.useEffect(function () {
+    if ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) > 0 && params !== null && params !== void 0 && params.catId) {
+      var category = newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.find(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.catId) == catId;
+      });
+      setCategorySelected(category);
+    }
+  }, [params === null || params === void 0 ? void 0 : params.catId, newsCategories]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "md:col-span-2 flex flex-col gap-8"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "px-6 py-3 text-textButton text-lg rounded-t-lg bg-primary w-max"
+  }, params !== null && params !== void 0 && params.catId ? categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catName : "Tin mới"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full border border-primary"
+  })), loading & isSeeMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full h-80 flex justify-center items-center"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-8"
+  }, (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > 0 ? newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$slice = newsArticles.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _newsArticles$slice === void 0 ? void 0 : _newsArticles$slice.map(function (item, index) {
+    var _dayjs;
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: getLinkNewsDetail(item),
+      Link: Link,
+      key: "kghf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-2 gap-2 md:gap-4 cursor-pointer",
+      key: "djfsdf-" + index
+    }, /*#__PURE__*/React__default.createElement(NewsImage, {
+      news: item
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-2 md:gap-3 pb-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-lg md:text-xl line-clamp-2"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-3 font-normal min-h-6 md:min-h-20 text-gray3"
+    }, item === null || item === void 0 ? void 0 : item.shortDescription), /*#__PURE__*/React__default.createElement("div", {
+      className: " text-gray3"
+    }, (_dayjs = dayjs_min(item === null || item === void 0 ? void 0 : item.timeUpdate)) === null || _dayjs === void 0 ? void 0 : _dayjs.fromNow()))));
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full h-64 flex flex-col justify-center items-center text-gray3"
+  }, /*#__PURE__*/React__default.createElement(gi.GiNewspaper, {
+    size: 80
+  }), " Kh\xF4ng c\xF3 tin t\u1EE9c n\xE0o"), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem th\xEAm",
+    shopConfigStyle: shopConfigStyle,
+    onClick: handleSeeMoreNews,
+    className: "w-max mx-auto"
+  }) : null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sticky top-20 self-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
+  }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
+    className: "rounded-b-lg bg-bgSecondary"
+  }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: getLinkNewsByCategory(item),
+      Link: Link,
+      key: "fjhnfg-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      key: "sdjfdh-" + index
+    }, item === null || item === void 0 ? void 0 : item.catName));
+  }))));
+};
+var NewsDetailController = function NewsDetailController(props) {
+  var shopConfig = props.shopConfig,
+    _props$articleId = props.articleId,
+    articleId = _props$articleId === void 0 ? 0 : _props$articleId;
+  var _useState = React.useState(),
+    article = _useState[0],
+    setArticle = _useState[1];
+  React.useEffect(function () {
+    if (articleId) {
+      getProductDetail();
+    }
+  }, [articleId]);
+  var getProductDetail = function getProductDetail() {
+    try {
+      var _temp = _catch(function () {
+        return Promise.resolve(getNewsDetailApi(articleId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingShopConfigId)).then(function (res) {
+          var _res$data, _res$data$status;
+          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
+            var _res$data2;
+            setArticle(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
+          }
+        });
+      }, function (e) {
+        console.log(e);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    article: article
+  };
+};
+dayjs_min.extend(relativeTime);
+dayjs_min.locale("vi");
+var NewsDetail1 = function NewsDetail1(props) {
+  var shopConfigStyle = props.shopConfigStyle,
+    _props$catId = props.catId,
+    catId = _props$catId === void 0 ? 0 : _props$catId,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _useState = React.useState({
+      catId: catId,
+      szie: 10
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _NewsDetailController = NewsDetailController(props),
+    _NewsDetailController2 = _NewsDetailController.article,
+    article = _NewsDetailController2 === void 0 ? {} : _NewsDetailController2;
+  var _NewsCategoryControll = NewsCategoryController(props),
+    _NewsCategoryControll2 = _NewsCategoryControll.newsCategories,
+    newsCategories = _NewsCategoryControll2 === void 0 ? [] : _NewsCategoryControll2;
+  var _NewsController = NewsController(_extends({}, props, {
+      params: params
+    })),
+    _NewsController$newsA = _NewsController.newsArticles,
+    newsArticles = _NewsController$newsA === void 0 ? [] : _NewsController$newsA;
+  var handleSeeMore = function handleSeeMore() {
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 mt-0 md:mt-0 gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "md:col-span-2 flex flex-col gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-2xl font-medium"
+  }, article === null || article === void 0 ? void 0 : article.title), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 text-gray3 mt-2"
+  }, /*#__PURE__*/React__default.createElement(go.GoClock, null), dayjs_min(article === null || article === void 0 ? void 0 : article.timeUpdate).fromNow())), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray2"
+  }, article === null || article === void 0 ? void 0 : article.shortDescription), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: article
+  })), /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: article === null || article === void 0 ? void 0 : article.content
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-2xl mb-4"
+  }, "Tin c\xF9ng chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-6"
+  }, newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: getLinkNewsDetail(item),
+      Link: Link,
+      key: "kghf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
+      news: item
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-lg line-clamp-2"
+    }, item === null || item === void 0 ? void 0 : item.title)));
+  })), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center mt-4 w-full"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem thêm",
+    onClick: handleSeeMore,
+    shopConfigStyle: shopConfigStyle
+  })) : null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sticky top-20 self-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
+  }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
+    className: "rounded-b-lg bg-bgSecondary"
+  }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      href: getLinkNewsByCategory(item),
+      Link: Link
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      key: "sdjfdh-" + index
+    }, item === null || item === void 0 ? void 0 : item.catName));
+  }))));
+};
 exports.About1 = About1;
 exports.About5 = About5;
 exports.Address1 = Address1;
@@ -12936,6 +13486,9 @@ exports.Links1 = Links1;
 exports.ModalNotification = ModalNotification;
 exports.NavBar1 = NavBar1;
 exports.NavBar7 = NavBar7;
+exports.News1 = News1;
+exports.NewsDetail1 = NewsDetail1;
+exports.NewsHighlight1 = NewsHighlight1;
 exports.PageTitle1 = PageTitle1;
 exports.Partner1 = Partner1;
 exports.ProductCategory2 = ProductCategory2;