s-platform-landing-section 0.1.18 → 0.1.20

package/dist/index.modern.js

@@ -16,8 +16,9 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { AiOutlineShoppingCart } from 'react-icons/ai';
-import { GoCreditCard } from 'react-icons/go';
+import { GoCreditCard, GoClock } from 'react-icons/go';
 import { RiDeleteBin7Line } from 'react-icons/ri';
+import { GiNewspaper } from 'react-icons/gi';
 
 var Button = function Button(props) {
   var _props$label = props.label,
@@ -108,18 +109,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) {
@@ -130,6 +132,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,
@@ -336,9 +345,9 @@ var NavBar7 = function NavBar7(props) {
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
     shopConfigStyle: shopConfigStyle
-  })), /*#__PURE__*/React__default.createElement(LinkToPage, {
-    Link: Link,
-    href: "/account"
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: "https://sodofin.vn/account",
+    target: "_blank"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng ký",
     shopConfigStyle: shopConfigStyle,
@@ -554,9 +563,9 @@ var NavBar1 = function NavBar1(props) {
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
     shopConfigStyle: shopConfigStyle
-  })), /*#__PURE__*/React__default.createElement(LinkToPage, {
-    Link: Link,
-    href: "/account"
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: "https://sodofin.vn/account",
+    target: "_blank"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng ký",
     shopConfigStyle: shopConfigStyle,
@@ -872,12 +881,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
@@ -911,7 +923,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", {
@@ -931,7 +943,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", {
@@ -952,7 +964,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", {
@@ -973,7 +985,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 ",
@@ -986,8 +1000,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,
@@ -7354,7 +7370,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,
@@ -7849,12 +7865,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(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) {
@@ -7919,28 +7937,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();
     }
   };
-  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(RxCross2, null))));
 };
@@ -8111,6 +8135,14 @@ var Select = forwardRef(function (props, ref) {
     setListOptions(options);
     if (!isMulti) setValue(defaultValue);
   }, [options]);
+  useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+    }, 500);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [inputSearch]);
   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();
@@ -8187,11 +8219,9 @@ var Select = 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;
@@ -8279,7 +8309,7 @@ var Select = 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", {
@@ -9074,9 +9104,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,
@@ -9099,33 +9130,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);
     },
@@ -9139,6 +9159,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, {
@@ -9616,11 +9638,14 @@ var ProductList7 = function ProductList7(props) {
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
-  })), /*#__PURE__*/React__default.createElement(Button, {
+  })), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: "/products",
+    Link: Link
+  }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem tất cả",
     shopConfigStyle: shopConfigStyle,
     className: "mt-12"
-  })), /*#__PURE__*/React__default.createElement(Dash, {
+  })) : null), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
@@ -10668,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", {
@@ -10786,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,
@@ -11066,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", {
@@ -11180,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(IoLocationOutline, {
       size: 24,
@@ -11205,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));
@@ -11328,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 = useState(0),
-    currentIndex = _useState[0],
-    setCurrentIndex = _useState[1];
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var _useState2 = useState(0),
-    startX = _useState2[0],
-    setStartX = _useState2[1];
-  var _useState3 = useState(0),
-    endX = _useState3[0],
-    setEndX = _useState3[1];
-  var sliderRef = 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 = 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, " ")));
   }))));
 };
 
@@ -11673,6 +11677,7 @@ var Breadcrumb1 = function Breadcrumb1(props) {
       label: "Trang chủ",
       route: "/"
     });
+    console.log(items);
     setItems(items);
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -11685,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
       }
@@ -12671,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(IoSearchOutline, {
       className: "text-gray3"
@@ -12724,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(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"
     },
@@ -12751,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 = useState(""),
@@ -12768,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(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
@@ -12784,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 "
   }))));
 };
 
@@ -12803,12 +12807,12 @@ 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
     }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary w-16 h-16 rounded-full",
+      className: "bg-primary p-3 text-textButton w-16 h-16 rounded-full",
       dangerouslySetInnerHTML: {
         __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
       }
@@ -12831,13 +12835,13 @@ 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",
       key: "kdf-" + index
     }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-16 h-16 rounded-full text-primary ",
+      className: "w-16 h-16 rounded-full bg-primary p-3 text-textButton ",
       dangerouslySetInnerHTML: {
         __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
       }
@@ -12865,7 +12869,7 @@ var ShopHighlights6 = function ShopHighlights6(props) {
       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", {
-      className: "text-primary w-16 h-16 rounded-full",
+      className: "text-primary w-16 h-16 p-3 text-textButton rounded-full",
       dangerouslySetInnerHTML: {
         __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
       }
@@ -12877,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
@@ -12905,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", {
@@ -12918,7 +12921,7 @@ var ShopHighlights7 = function ShopHighlights7(props) {
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
     }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
+      className: "w-12 text-textButton h-16 w-16 z-20 m-auto"
     }, /*#__PURE__*/React__default.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
@@ -12966,5 +12969,483 @@ var VideoFull1 = function VideoFull1(props) {
   })) : null);
 };
 
-export { About1, About5, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
+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 = useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = useState([]),
+    newsArticles = _useState2[0],
+    setNewsArticles = _useState2[1];
+  var _useState3 = useState(),
+    setPage = _useState3[1];
+  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 = useState(""),
+    src = _useState[0],
+    setSrc = _useState[1];
+  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 = 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 = useState([]),
+    newsCategories = _useState[0],
+    setNewsCategories = _useState[1];
+  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 = useState({
+      page: 0,
+      sort: "timeUpdate,DESC",
+      size: 10,
+      catId: catId
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = useState({}),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
+  var _useState3 = 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
+      });
+    });
+  };
+  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(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 = useState(),
+    article = _useState[0],
+    setArticle = _useState[1];
+  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 = 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(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));
+  }))));
+};
+
+export { About1, About5, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map