s-platform-landing-section 0.1.18 → 0.1.19

package/dist/index.js

@@ -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,
@@ -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,
@@ -875,12 +884,15 @@ 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.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)
+    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$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
@@ -914,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", {
@@ -934,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", {
@@ -955,7 +967,7 @@ var Hero6 = function Hero6(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 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", {
@@ -976,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 ",
@@ -989,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,
@@ -7357,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,
@@ -7852,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) {
@@ -7922,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))));
 };
@@ -8114,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();
@@ -8190,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;
@@ -8282,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", {
@@ -9077,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,
@@ -9102,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);
     },
@@ -9142,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, {
@@ -10671,7 +10693,7 @@ var BookingForm6 = function BookingForm6(props) {
   }), /*#__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)
+    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", {
@@ -10789,7 +10811,7 @@ var Banner3 = function Banner3(props) {
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
     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),
+      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,
@@ -11069,7 +11091,7 @@ var Footer1 = function Footer1(props) {
   })) === 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", {
@@ -11183,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,
@@ -11208,7 +11232,7 @@ var Footer7 = function Footer7(props) {
     return e === null || e === void 0 ? void 0 : e.isShow;
   })) === 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,
+      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));
@@ -11331,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 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, " ")));
   }))));
 };
 
@@ -11676,6 +11677,7 @@ var Breadcrumb1 = function Breadcrumb1(props) {
       label: "Trang chủ",
       route: "/"
     });
+    console.log(items);
     setItems(items);
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -11688,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
       }
@@ -12674,7 +12676,7 @@ var SearchBar2 = function SearchBar2(props) {
       backgroundSize: "cover"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-[100vw] md:w-[50vw] py-6 mx-auto px-6 flex flex-col h-full gap-4"
+    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"
@@ -12727,13 +12729,14 @@ var SearchBar5 = function SearchBar5(props) {
   }, 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$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"
+    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 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"
     },
@@ -12754,8 +12757,7 @@ var SearchBar5 = function SearchBar5(props) {
 
 var SearchBar6 = function SearchBar6(props) {
   var _data$data, _data$data2, _data$data3, _data$data4, _data$data5;
-  var shopConfigStyle = props.shopConfigStyle,
-    _props$Link = props.Link,
+  var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     data = props.data;
   var _useState = React.useState(""),
@@ -12771,14 +12773,15 @@ var SearchBar6 = function SearchBar6(props) {
   }, 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$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"
+    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"
+    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
@@ -12787,12 +12790,10 @@ 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 "
   }))));
 };
 
@@ -12806,7 +12807,7 @@ var ShopHighlights2 = function ShopHighlights2(props) {
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
     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)
+      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
@@ -12834,7 +12835,7 @@ var ShopHighlights5 = function ShopHighlights5(props) {
     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(LinkToPage, {
-      href: (item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link),
+      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",
@@ -12880,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.route) || (item === null || item === void 0 ? void 0 : item.link)
+      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
@@ -12908,10 +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) {
-    var _item, _item2;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: ((_item = item) === null || _item === void 0 ? void 0 : _item.route) || ((_item2 = item) === null || _item2 === void 0 ? void 0 : _item2.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", {
@@ -12969,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;
@@ -13008,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;