s-platform-landing-section 0.1.35 → 0.1.36-beta.2

package/dist/index.js

@@ -10,16 +10,16 @@ var pi = require('react-icons/pi');
 var tb = require('react-icons/tb');
 var si = require('react-icons/si');
 var io = require('react-icons/io');
+var md = require('react-icons/md');
 var fa6 = require('react-icons/fa6');
-require('react-icons/ci');
-var bs = require('react-icons/bs');
+var ai = require('react-icons/ai');
 var lu = require('react-icons/lu');
 var DatePicker = _interopDefault(require('react-datepicker'));
 require('react-datepicker/dist/react-datepicker.css');
 var Slider = _interopDefault(require('react-slick'));
 require('slick-carousel/slick/slick.css');
 require('slick-carousel/slick/slick-theme.css');
-var ai = require('react-icons/ai');
+var bs = require('react-icons/bs');
 var go = require('react-icons/go');
 var gr = require('react-icons/gr');
 var ri = require('react-icons/ri');
@@ -951,7 +951,7 @@ var SectionTitle2 = function SectionTitle2(props) {
   }), /*#__PURE__*/React__default.createElement(io.IoIosStar, {
     className: "w-4 h-4 text-warning"
   })) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl text-center leading-relaxed text-textSecondary"
+    className: "text-xl text-center leading-relaxed text-textSecondary pb-4"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
@@ -978,10 +978,27 @@ var SectionTitle4 = function SectionTitle4(props) {
   }, data === null || data === void 0 ? void 0 : (_data$sectionTitle = data.sectionTitle) === null || _data$sectionTitle === void 0 ? void 0 : _data$sectionTitle.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
     className: "border w-32 border-primary"
   })) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("p", {
-    className: "text-xl text-center font-medium leading-relaxed text-secondary mt-2"
+    className: "text-xl text-center leading-relaxed text-secondary mt-2"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
+var SectionTitle5 = function SectionTitle5(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: true
+  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex  items-start gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-secondary text-4xl md:text-5xl"
+  }, /*#__PURE__*/React__default.createElement(md.MdKeyboardDoubleArrowRight, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-2xl md:text-4xl text-textHeading font-medium font-fontHeading"
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("p", {
+    className: "text-lg md:text-2xl leading-relaxed text-textSecondary"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null)) : null);
+};
+
 var Input = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1214,20 +1231,22 @@ var Hero2 = function Hero2(props) {
   }, /*#__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],
     alt: data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title,
-    className: "w-full h-auto object-cover min-h-[22vh] max-h-[100vh]"
+    className: "w-full h-auto object-cover min-h-[35vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute inset-y-0 right-[1%] md:right-[8%] w-[58%] md:w-1/2 flex flex-col gap-2 md:gap-4 xl:gap-6 justify-center items-start px-4 pt-4 pb-2 md:px-8 md:pt-8 md:pb-6 xl:p-8"
+    className: "absolute inset-y-0 right-[2%] md:right-[4%] w-[58%] md:w-[54%] flex flex-col gap-2 md:gap-4 xl:gap-6 justify-center items-start px-4 pt-4 pb-2 md:px-8 md:pt-8 md:pb-6 xl:p-8"
   }, shopConfig !== null && shopConfig !== void 0 && shopConfig.logoUrl ? /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     className: "h-6 w-6 sm:h-10 sm:w-10 md:h-12 md:w-12 lg:w-14 lg:h-14 xl:h-20 xl:w-20"
   }) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "font-medium line-clamp-1 ",
+    className: "font-medium line-clamp-2 lg:line-clamp-1 text-2xl md:text-3xl lg:text-4xl xl:text-6xl",
     style: {
-      fontSize: "clamp(1.25rem, 4vw, 3.5rem)",
       lineHeight: "1.5"
     }
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.title), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xs line-clamp-2 md:line-clamp-3 text-ellipsis sm:text-base md:text-xl lg:text-2xl"
+    className: "line-clamp-3 text-ellipsis text-base md:text-lg lg:text-xl xl:text-2xl",
+    style: {
+      lineHeight: 1.625
+    }
   }, data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.description)));
 };
 
@@ -1239,13 +1258,16 @@ var Hero5 = function Hero5(props) {
   }, /*#__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],
     alt: data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title,
-    className: "w-full min-h-[22vh] max-h-[100vh] object-cover"
+    className: "w-full min-h-[35vh] max-h-[100vh] object-cover"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute inset-0 flex flex-col top-[5%] md:top-[10%] gap-1 md:gap-4 p-4 lg:p-10 w-3/5 md:w-1/2 lg:w-[45%] max-w-[90%] left-1 lg:left-10 xl:left-20"
+    className: "absolute inset-0 flex flex-col top-[8%] md:top-[10%] gap-1 md:gap-4 p-4 lg:p-10 w-3/5 md:w-1/2 max-w-[90%] left-1 lg:left-10 xl:left-20"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl sm:text-2xl md:text-3xl lg:text-4xl text-textHeading pt-2 pb-1 overflow-hidden text-ellipsis font-medium line-clamp-1"
+    className: "text-xl sm:text-2xl md:text-3xl lg:text-4xl text-textHeading overflow-hidden text-ellipsis font-medium line-clamp-2 xl:line-clamp-1",
+    style: {
+      lineHeight: 1.5
+    }
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.title), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-sm md:text-xl lg:text-2xl text-primary line-clamp-3 md:line-clamp-4 overflow-hidden text-ellipsis "
+    className: "text-sm md:text-xl lg:text-2xl text-primary line-clamp-3 overflow-hidden text-ellipsis"
   }, data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.description)));
 };
 
@@ -1261,21 +1283,20 @@ var Hero6 = function Hero6(props) {
   }, /*#__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],
     alt: data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title,
-    className: "object-cover w-full h-auto"
+    className: "object-cover w-full min-h-[30vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute inset-0 flex flex-col items-center justify-center md:gap-1 lg:gap-2 text-center py-1 md:py-4 px-16 md:px-20 "
+    className: "absolute inset-0 flex flex-col items-center justify-center md:gap-1 lg:gap-2 text-center py-1 md:py-4 px-10 md:px-20 "
   }, 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$.title ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-primary font-headingFont text-center line-clamp-1 text-ellipsis pt-2 md:pt-3",
+    className: "text-primary font-headingFont text-center line-clamp-1 text-2xl md:text-4xl xl:text-6xl text-ellipsis",
     style: {
-      fontSize: "clamp(1rem, 4vw, 3rem)",
       lineHeight: "2"
     }
   }, data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.title) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-1 md:gap-4 lg:gap-6 "
+    className: "flex flex-col gap-2 md:gap-4 lg:gap-6 "
   }, data !== null && data !== void 0 && (_data$data5 = data.data) !== null && _data$data5 !== void 0 && (_data$data5$ = _data$data5[0]) !== null && _data$data5$ !== void 0 && _data$data5$.description ? /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1 md:line-clamp-2 pb-1",
+    className: "line-clamp-2 lg:line-clamp-3 md:text-xl xl:text-2xl",
     style: {
-      fontSize: "clamp(0.75rem, 3vw, 1.5rem)"
+      lineHeight: 1.5
     }
   }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description) : null, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$buttons = _sectionData$.buttons) === null || _sectionData$$buttons === void 0 ? void 0 : _sectionData$$buttons.map(function (button) {
     return button !== null && button !== void 0 && button.label && (button !== null && button !== void 0 && button.route || button !== null && button !== void 0 && button.link) ? /*#__PURE__*/React__default.createElement(LinkToPage, {
@@ -1322,13 +1343,16 @@ var Hero10 = function Hero10(props) {
 
 var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
 var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
+var SECTION_CLASS_PADDING = "py-6 md:py-12 px-4 xl:px-20 bg-background";
 
 var Hero11 = function Hero11(props) {
-  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$title, _data$data3, _data$data3$;
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$title, _data$data3, _data$data3$, _data$data4, _data$data4$, _data$data4$$buttons;
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-2 py-12 !bg-bgSecondary gap-6 md:gap-12"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1356,11 +1380,16 @@ var Hero11 = function Hero11(props) {
     className: "text-2xl md:text-4xl !leading-[1.6] font-headingFont w-max text-center text-primary"
   }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : (_data$data2$$title = _data$data2$.title) === null || _data$data2$$title === void 0 ? void 0 : _data$data2$$title.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg md:text-xl lg:text-2xl"
-  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description), /*#__PURE__*/React__default.createElement(Button, {
-    label: "\u0110\u1EB7t b\xE0n ngay",
-    shopConfigStyle: shopConfigStyle,
-    className: "!font-normal w-max",
-    sho: true
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description), data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : (_data$data4$$buttons = _data$data4$.buttons) === null || _data$data4$$buttons === void 0 ? void 0 : _data$data4$$buttons.map(function (button, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      key: "gdf-" + index,
+      href: convertURL(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,
+      shopConfigStyle: shopConfigStyle,
+      className: "!font-normal w-max"
+    }));
   })));
 };
 
@@ -1386,113 +1415,6 @@ var Hero12 = function Hero12(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description)));
 };
 
-var CarouselItem = function CarouselItem(props) {
-  var _Object$keys;
-  var _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-    _props$isAll = props.isAll,
-    isAll = _props$isAll === void 0 ? true : _props$isAll,
-    _props$isNavigateButt = props.isNavigateButton,
-    isNavigateButton = _props$isNavigateButt === void 0 ? true : _props$isNavigateButt,
-    _props$itemClassName = props.itemClassName,
-    itemClassName = _props$itemClassName === void 0 ? "" : _props$itemClassName;
-  var listRef = React.useRef(null);
-  var _useState = React.useState(false),
-    canScrollLeft = _useState[0],
-    setCanScrollLeft = _useState[1];
-  var _useState2 = React.useState(false),
-    canScrollRight = _useState2[0],
-    setCanScrollRight = _useState2[1];
-  var _useState3 = React.useState({}),
-    value = _useState3[0],
-    setValue = _useState3[1];
-  React.useEffect(function () {
-    var _listRef$current;
-    checkScroll();
-    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.addEventListener("scroll", checkScroll);
-    return function () {
-      var _listRef$current2;
-      return (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.removeEventListener("scroll", checkScroll);
-    };
-  }, [data]);
-  var checkScroll = function checkScroll() {
-    if (listRef.current) {
-      var _listRef$current3 = listRef.current,
-        scrollLeft = _listRef$current3.scrollLeft,
-        scrollWidth = _listRef$current3.scrollWidth,
-        clientWidth = _listRef$current3.clientWidth;
-      setCanScrollLeft(scrollLeft > 0);
-      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
-    }
-  };
-  var handleClickPrevImg = function handleClickPrevImg() {
-    if (listRef.current) {
-      checkScroll();
-      listRef.current.scrollBy({
-        left: -300,
-        behavior: "smooth"
-      });
-    }
-  };
-  var handleClickNextImg = function handleClickNextImg() {
-    if (listRef.current) {
-      checkScroll();
-      listRef.current.scrollBy({
-        left: 300,
-        behavior: "smooth"
-      });
-    }
-  };
-  var handleOnClick = function handleOnClick(item) {
-    setValue(item);
-    onClick === null || onClick === void 0 ? void 0 : onClick(item);
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "h-10 md:h-12 flex justify-between items-center " + className,
-    style: style
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full overflow-hidden "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex overflow-x-auto gap-2 " + (isNavigateButton ? "no-scrollbar" : "scroll-custom pb-2") + " items-center",
-    ref: listRef
-  }, isAll ? /*#__PURE__*/React__default.createElement("div", {
-    className: " " + ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0 ? "bg-primary text-textButton" : "bg-background") + " w-max border border-primary p-1 md:p-2 rounded-lg cursor-pointer whitespace-nowrap",
-    onClick: function onClick() {
-      handleOnClick({});
-    }
-  }, "T\u1EA5t c\u1EA3") : null, data && (data === null || data === void 0 ? void 0 : data.length) > 0 && (data === null || data === void 0 ? void 0 : data.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: ((value === null || value === void 0 ? void 0 : value.value) === (item === null || item === void 0 ? void 0 : item.value) ? "bg-primary text-textButton" : "bg-background") + " w-max border border-primary py-1 px-2 md:py-2 md:px-3 rounded-lg cursor-pointer whitespace-nowrap " + itemClassName,
-      key: "carousel-" + index,
-      onClick: function onClick() {
-        handleOnClick(item);
-      }
-    }, item === null || item === void 0 ? void 0 : item.label);
-  })))), isNavigateButton ? /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden my-auto gap-4 md:flex justify-end ps-10"
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: "h-full w-9 h-9 md:h-11 md:w-11 items-center justify-center rounded-full " + (canScrollLeft ? "bg-primary cursor-pointer text-textButton" : "bg-gray5 text-gray3 cursor-not-allowed"),
-    onClick: handleClickPrevImg,
-    disabled: !canScrollLeft
-  }, /*#__PURE__*/React__default.createElement(io.IoIosArrowBack, {
-    size: 24,
-    className: "inline-block text-lg"
-  })), /*#__PURE__*/React__default.createElement("button", {
-    className: "h-full w-9 h-9 md:h-11 md:w-11 flex items-center justify-center rounded-full  " + (canScrollRight ? "bg-primary cursor-pointer text-textButton" : "bg-gray5 text-gray3 cursor-not-allowed"),
-    onClick: handleClickNextImg,
-    disabled: !canScrollRight
-  }, /*#__PURE__*/React__default.createElement(io.IoIosArrowForward, {
-    size: 24,
-    className: "inline-block text-lg "
-  }))) : null);
-};
-
 // A type of promise-like that resolves synchronously and supports only one observer
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
@@ -1512,6 +1434,19 @@ function _catch(body, recover) {
 	return result;
 }
 
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
 function bind(fn, thisArg) {
   return function wrap() {
     return fn.apply(thisArg, arguments);
@@ -7603,6 +7538,14 @@ var formatCurrency = function formatCurrency(amount) {
   var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
   return formattedAmount + " \u20AB";
 };
+var formatCurrency2 = function formatCurrency2(amount) {
+  if (isNaN(amount)) {
+    return 'đ 0';
+  }
+  var roundedAmount = Math.round(amount);
+  var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  return "\u0111 " + formattedAmount;
+};
 var pattern = {
   phoneNumberPattern: /^(?:\+84|0)\d{9}$/
 };
@@ -7700,102 +7643,273 @@ var Hero13 = function Hero13(props) {
   var _sectionData$, _sectionData$$srcImag, _data$data, _data$data$;
   var listRef = React.useRef(null);
   var _useState = React.useState(false);
-  var data = props.data;
+  var shopConfig = props.shopConfig,
+    data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   var _CategoryController = CategoryController(props);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$srcImag = _sectionData$.srcImages) === null || _sectionData$$srcImag === void 0 ? void 0 : _sectionData$$srcImag[0],
     alt: 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$.title,
     className: "w-full object-cover"
-  }));
-};
-
-var Features2 = function Features2(props) {
-  var data = props.data;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "" + SECTION_DEFAULT_CLASS
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "fixed right-6 bottom-10 md:bottom-24 z-50 flex flex-col gap-4 w-max"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? "tel:" + (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone) : "#"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 lg:gap-8 rounded-xl bg-bgSecondary"
-  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col gap-2 items-center text-sm lg:text-lg font-semibold text-center",
-      key: "dfgg-" + index
-    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary md:w-16 lg:w-20 xl:w-24 h-24",
-      dangerouslySetInnerHTML: {
-        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
-      }
-    }) : /*#__PURE__*/React__default.createElement("img", {
-      src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-12 md:w-16 lg:w-20 xl:w-24 text-primary",
-      alt: "logo"
-    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title));
-  })));
+    className: "relative w-max"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "absolute inset-0 rounded-full bg-primary opacity-30 animate-ping"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative z-10 p-2 rounded-full bg-primary text-textButton animate-bounce"
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePhone, {
+    size: 36
+  })))), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) || "#",
+    target: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? "_blank" : "_self"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-max"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "absolute inset-0 rounded-full bg-primary opacity-30 animate-ping"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative z-10 p-2 rounded-full bg-primary text-textButton animate-bounce"
+  }, /*#__PURE__*/React__default.createElement(fa.FaFacebookMessenger, {
+    size: 32
+  })))), /*#__PURE__*/React__default.createElement("a", {
+    href: "https://zalo.me/" + (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) || "#",
+    target: "_blank"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-max"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "absolute inset-0 rounded-full bg-primary opacity-30 animate-ping"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative z-10 p-2 rounded-full bg-primary text-textButton animate-bounce"
+  }, /*#__PURE__*/React__default.createElement(si.SiZalo, {
+    size: 32
+  }))))));
 };
 
-var Features3 = function Features3(props) {
-  var _data$sectionTitle;
+var Hero14 = function Hero14(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button;
   var shopConfigStyle = props.shopConfigStyle,
-    shopConfig = props.shopConfig,
     data = props.data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  data.sectionTitle = data === null || data === void 0 ? void 0 : (_data$sectionTitle = data.sectionTitle) === null || _data$sectionTitle === void 0 ? void 0 : _data$sectionTitle.replace("{shopName}", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName);
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
-    bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-4 lg:gap-6",
+    className: "relative w-full bg-cover bg-center bg-no-repeat ",
     style: {
-      background: background,
-      color: textBody
+      backgroundImage: "url(" + (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]) + ")"
     }
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 sm:grid-cols-4 gap-6 text-sm md:text-base"
-  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
+    className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-end bg-gradient-to-t from-black/50 to-transparent"
+  }, /*#__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 && (_sectionData$2 = sectionData[0]) !== null && _sectionData$2 !== void 0 && _sectionData$2.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-center text-white md:text-2xl"
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$3 = sectionData[0]) === null || _sectionData$3 === void 0 ? void 0 : _sectionData$3.description) : null, 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$button.map(function (button, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
-      href: (item === null || item === void 0 ? void 0 : item.link) || convertURL(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,
-      style: {
-        background: bgSecondary
-      }
-    }, /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title), item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 h-auto"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
-      }
-    })) : /*#__PURE__*/React__default.createElement("img", {
-      src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 object-cover",
-      alt: ""
-    })));
+      key: "gdf-" + index,
+      href: convertURL(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,
+      className: "!bg-secondary",
+      shopConfigStyle: shopConfigStyle
+    }));
   })));
 };
 
-var ProductController = function ProductController(props) {
-  var shopConfig = props.shopConfig,
-    params = props.params,
-    _props$isAutoGetList = props.isAutoGetList,
-    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList;
-  var _useState = React.useState([]),
-    products = _useState[0],
-    setProducts = _useState[1];
-  var _useState2 = React.useState(false),
+var Hero15 = function Hero15(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$title, _data$data3, _data$data3$, _data$data4, _data$data4$, _data$data4$$buttons, _data$data5, _data$data5$, _data$data5$$buttons, _data$data5$$buttons$, _data$data6, _data$data6$, _data$data6$$buttons, _data$data6$$buttons$, _data$data7, _data$data7$, _data$data7$$buttons, _data$data7$$buttons$, _data$data8, _data$data8$, _data$data8$$srcImage;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-2 py-12 !bg-primary gap-6 md:gap-10"
+  }, /*#__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: "object-cover max-w-full h-auto border-4 border-secondary block md:hidden"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative flex flex-col justify-center gap-6 lg:gap-10"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-2xl md:text-4xl !leading-[1.6] font-headingFont text-textSecondary"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : (_data$data2$$title = _data$data2$.title) === null || _data$data2$$title === void 0 ? void 0 : _data$data2$$title.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-textButton"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description), /*#__PURE__*/React__default.createElement("hr", {
+    className: "w-1/3"
+  }), (data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : (_data$data4$$buttons = _data$data4$.buttons) === null || _data$data4$$buttons === void 0 ? void 0 : _data$data4$$buttons.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: (data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : (_data$data5$ = _data$data5[0]) === null || _data$data5$ === void 0 ? void 0 : (_data$data5$$buttons = _data$data5$.buttons) === null || _data$data5$$buttons === void 0 ? void 0 : (_data$data5$$buttons$ = _data$data5$$buttons[0]) === null || _data$data5$$buttons$ === void 0 ? void 0 : _data$data5$$buttons$.route) || (data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : (_data$data6$$buttons = _data$data6$.buttons) === null || _data$data6$$buttons === void 0 ? void 0 : (_data$data6$$buttons$ = _data$data6$$buttons[0]) === null || _data$data6$$buttons$ === void 0 ? void 0 : _data$data6$$buttons$.link) || "#"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: data === null || data === void 0 ? void 0 : (_data$data7 = data.data) === null || _data$data7 === void 0 ? void 0 : (_data$data7$ = _data$data7[0]) === null || _data$data7$ === void 0 ? void 0 : (_data$data7$$buttons = _data$data7$.buttons) === null || _data$data7$$buttons === void 0 ? void 0 : (_data$data7$$buttons$ = _data$data7$$buttons[0]) === null || _data$data7$$buttons$ === void 0 ? void 0 : _data$data7$$buttons$.label,
+    shopConfigStyle: shopConfigStyle,
+    className: "!font-normal w-max !bg-secondary"
+  })) : null), /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data8 = data.data) === null || _data$data8 === void 0 ? void 0 : (_data$data8$ = _data$data8[0]) === null || _data$data8$ === void 0 ? void 0 : (_data$data8$$srcImage = _data$data8$.srcImages) === null || _data$data8$$srcImage === void 0 ? void 0 : _data$data8$$srcImage[0],
+    className: "object-cover max-w-full h-auto border-4 border-secondary hidden md:block"
+  }));
+};
+
+var Hero16 = function Hero16(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$srcImage;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _useState = React.useState(""),
+    value = _useState[0],
+    setValue = _useState[1];
+  var handleSearch = function handleSearch(e) {
+    if ((e === null || e === void 0 ? void 0 : e.key) === "Enter" && value && value.length > 0) {
+      router === null || router === void 0 ? void 0 : router.push(genLinkSearch(value));
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "min-h-[480px] w-full h-full 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: "object-cover max-w-full h-auto"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 left-0 z-0 bg-secondary opacity-80 w-full h-full"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full md:w-2/3 absolute top-[10%] md:top-1/3 left-0 z-10 px-4 xl:px-20 flex flex-col gap-6 text-textButton my-auto"
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: "font-medium text-2xl lg:text-4xl"
+  }, "Thu\u1ED1c t\u1ED1t, gi\xE1 t\u1ED1t - V\xEC s\u1EE9c kh\u1ECFe c\u1EE7a b\u1EA1n"), /*#__PURE__*/React__default.createElement("div", {
+    className: " text-lg lg:text-2xl"
+  }, "Ch\xFAng t\xF4i lu\xF4n n\u1ED5 l\u1EF1c h\u1EBFt m\xECnh cung c\u1EA5p s\u1EA3n ph\u1EA9m v\xE0 d\u1ECBch v\u1EE5 \u0111\xFAng v\u1EDBi gi\xE1 tr\u1ECB m\xE0 kh\xE1ch h\xE0ng mong \u0111\u1EE3i."), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col md:flex-row gap-4 w-full"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    wrapClassName: "w-full md:w-2/3 xl:w-[85%]",
+    icons: /*#__PURE__*/React__default.createElement(lu.LuSearch, {
+      className: "text-gray3",
+      size: 18
+    }),
+    placeholder: "Nh\u1EADp t\xEAn s\u1EA3n ph\u1EA9m",
+    inputClassName: "w-full text-textBody",
+    className: "h-12",
+    onKeyDown: function onKeyDown(e) {
+      handleSearch(e);
+    },
+    onChange: setValue
+  }), value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: genLinkSearch(value)
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap h-12 w-max",
+    shopConfigStyle: shopConfigStyle
+  })) : /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap w-max h-12",
+    shopConfigStyle: shopConfigStyle
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bottom-0 right-0 text-primary w-[45%] z-10"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 480 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M75.1847 149.804C55 189.553 14.9932 204.532 0 212H480V0C424.514 20.7319 393 94.1529 216.361 62.1956C120.186 44.7957 96.1405 108.537 75.1847 149.804Z",
+    fill: "currentColor"
+  }))), /*#__PURE__*/React__default.createElement("img", {
+    src: 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$$srcImage = _data$data2$.srcImages) === null || _data$data2$$srcImage === void 0 ? void 0 : _data$data2$$srcImage[1],
+    className: "object-cover w-[28%] h-auto absolute right-10 opacity-100 bottom-0 z-10"
+  }));
+};
+
+var Features2 = function Features2(props) {
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-6 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 lg:gap-8 rounded-xl bg-bgSecondary"
+  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-2 items-center text-sm lg:text-lg font-semibold text-center",
+      key: "dfgg-" + index
+    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary md:w-16 lg:w-20 xl:w-24 h-24",
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    }) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-12 md:w-16 lg:w-20 xl:w-24 text-primary",
+      alt: "logo"
+    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title));
+  })));
+};
+
+var Features3 = function Features3(props) {
+  var _data$sectionTitle;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  data.sectionTitle = data === null || data === void 0 ? void 0 : (_data$sectionTitle = data.sectionTitle) === null || _data$sectionTitle === void 0 ? void 0 : _data$sectionTitle.replace("{shopName}", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName);
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
+    textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
+    _shopConfigStyle$colo4 = _shopConfigStyle$colo.background,
+    background = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
+    _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
+    bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-4 lg:gap-6",
+    style: {
+      background: background,
+      color: textBody
+    }
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-4 gap-6 text-sm md:text-base"
+  }, 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) || convertURL(item === null || item === void 0 ? void 0 : item.route) || "#"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-2 p-3 h-full w-full rounded-lg font-semibold",
+      key: "dfsdfj-" + index,
+      style: {
+        background: bgSecondary
+      }
+    }, /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title), item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 h-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    })) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 object-cover",
+      alt: ""
+    })));
+  })));
+};
+
+var ProductController = function ProductController(props) {
+  var shopConfig = props.shopConfig,
+    params = props.params,
+    _props$isAutoGetList = props.isAutoGetList,
+    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList;
+  var _useState = React.useState([]),
+    products = _useState[0],
+    setProducts = _useState[1];
+  var _useState2 = React.useState(false),
     loading = _useState2[0],
     setLoading = _useState2[1];
   var _useState3 = React.useState(),
@@ -7822,11 +7936,6 @@ var ProductController = function ProductController(props) {
             var _res$data2, _res$data3;
             setProducts(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
             setPage(res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.page);
-            var url = new URL(window.location.href);
-            if (/^(\/(danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
-              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
-              window.history.replaceState({}, '', url.pathname + url.search);
-            }
           }
           setLoading(false);
         });
@@ -8226,6 +8335,7 @@ var NotFoundProduct = function NotFoundProduct(props) {
 };
 
 var TreatmentsCategory7 = function TreatmentsCategory7(props) {
+  var _products$slice;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
@@ -8238,7 +8348,8 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
     _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
   var _useState = React.useState({
-      types: "1"
+      types: "1,10",
+      size: 12
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -8255,15 +8366,27 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
   var _useState2 = React.useState(0),
     selectedCategory = _useState2[0],
     setSelectedCategory = _useState2[1];
+  var _useState3 = React.useState(true),
+    isGetMore = _useState3[0],
+    setIsGetMore = _useState3[1];
   React.useEffect(function () {
     var newParams = _extends({}, params, {
-      categoryId: selectedCategory
+      categoryId: selectedCategory,
+      size: 12
     });
     if (!selectedCategory) {
       delete newParams.categoryId;
     }
     setParams(newParams);
   }, [selectedCategory]);
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_DEFAULT_CLASS + " relative"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
@@ -8280,15 +8403,16 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
         key: index,
         className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
         onClick: function onClick() {
-          return setSelectedCategory(item.categoryId);
+          setSelectedCategory(item.categoryId);
+          setIsGetMore(true);
         }
       }, item === null || item === void 0 ? void 0 : item.cateName);
     }
-  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-full justify-center p-12"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
-  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       key: index,
       Link: Link,
@@ -8298,7 +8422,13 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
     }));
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, {
     text: "d\u1ECBch v\u1EE5"
-  })), /*#__PURE__*/React__default.createElement(Dash, {
+  }), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex justify-center mt-6"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "" + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
+  })) : null), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
@@ -8316,7 +8446,7 @@ var TreatmentsList6 = function TreatmentsList6(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
   var _useState = React.useState({
       size: 12,
-      types: "1"
+      types: "1,10"
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -8515,82 +8645,178 @@ var BookingController = function BookingController(props) {
   };
 };
 
-var Select = React.forwardRef(function (props, ref) {
+var DateTimePicker = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
-    _props$optionClassNam = props.optionClassName,
-    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    _props$selectClassNam = props.selectClassName,
-    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    options = props.options,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
     _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
-    handleSearchOption = props.handleSearchOption,
-    _props$isMulti = props.isMulti,
-    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-    _props$isButtonDelete = props.isButtonDelete,
-    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
-    _props$funcDelete = props.funcDelete,
-    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
-    _props$isSearch = props.isSearch,
-    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
-    renderItem = props.renderItem;
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var selectRef = React.useRef(null);
+    defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
+    _props$time = props.time,
+    time = _props$time === void 0 ? false : _props$time,
+    rules = props.rules;
+  var _useState = React.useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
   var _useState2 = React.useState(""),
     error = _useState2[0],
     _setError = _useState2[1];
-  var _useState3 = React.useState(""),
-    inputSearch = _useState3[0],
-    setInputSearch = _useState3[1];
-  var _useState4 = React.useState(defaultValue),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = React.useState(options),
-    listOptions = _useState5[0],
-    setListOptions = _useState5[1];
-  var dropdownRef = React.useRef(null);
-  var _useState6 = React.useState('bottom'),
-    dropdownPosition = _useState6[0],
-    setDropdownPosition = _useState6[1];
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    if (isMulti) setValue(defaultValue);
-  }, [defaultValue]);
-  React.useEffect(function () {
-    setListOptions(options);
-    if (!isMulti) setValue(defaultValue);
-  }, [options]);
-  React.useEffect(function () {
-    var delayDebounceFn = setTimeout(function () {
-      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
-    }, 600);
-    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();
-    var updateDropdownPosition = function updateDropdownPosition() {
-      if (selectRef.current && dropdownRef.current) {
-        var _selectRef$current, _window;
+  var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
+  var CustomInput = React.forwardRef(function (_ref, ref) {
+    var value = _ref.value,
+      onClick = _ref.onClick,
+      className = _ref.className;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      onClick: onClick,
+      ref: ref
+    }, value);
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setValue: function setValue(text) {
+        return _setValue(text);
+      },
+      getValue: function getValue() {
+        return value;
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var _validateData = function _validateData() {
+    var count = 0;
+    rules === null || rules === void 0 ? void 0 : rules.forEach(function (e) {
+      var _e$pattern, _e$validate;
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        return false;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        return false;
+      } else if (value !== "" && (e === null || e === void 0 ? void 0 : e.type) === "validate" && e !== null && e !== void 0 && e.validate && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        return false;
+      }
+    });
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  }));
+  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-danger"
+  }, " *") : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1 " + labelClassName
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
+    selected: value,
+    onChange: function onChange(date) {
+      _setValue(date);
+    },
+    customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
+      className: _className
+    }),
+    dateFormat: time ? "dd/MM/yyyy HH:mm" : "dd/MM/yyyy",
+    showTimeSelect: time,
+    timeIntervals: 15,
+    wrapperClassName: "w-full"
+  }), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
+
+var Select = React.forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    options = props.options,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isButtonDelete = props.isButtonDelete,
+    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
+    _props$funcDelete = props.funcDelete,
+    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
+    _props$isSearch = props.isSearch,
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = React.useRef(null);
+  var _useState2 = React.useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = React.useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = React.useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = React.useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = React.useRef(null);
+  var _useState6 = React.useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  React.useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  React.useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+    }, 600);
+    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();
+    var updateDropdownPosition = function updateDropdownPosition() {
+      if (selectRef.current && dropdownRef.current) {
+        var _selectRef$current, _window;
         var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
         var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
         var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
@@ -8662,20 +8888,13 @@ var Select = React.forwardRef(function (props, ref) {
     }
   };
   var handleSearch = function handleSearch(searchValue) {
-    if (handleSearchOption && typeof handleSearchOption === 'function') {
-      handleSearchOption === null || handleSearchOption === void 0 ? void 0 : handleSearchOption(searchValue);
-    } else {
-      var listFilterOptions = options.filter(function (item) {
-        var _item$label;
-        return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
-      });
-      setListOptions(listFilterOptions);
-    }
+    var listFilterOptions = options.filter(function (item) {
+      var _item$label;
+      return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
+    });
+    setListOptions(listFilterOptions);
   };
   var handleToggleSelect = function handleToggleSelect() {
-    if (!isOpen && handleSearchOption && typeof handleSearchOption === 'function') {
-      handleSearchOption("");
-    }
     setIsOpen(!isOpen);
     setInputSearch("");
     setListOptions(options);
@@ -8774,103 +8993,6 @@ var Select = React.forwardRef(function (props, ref) {
 });
 var Select$1 = React.memo(Select);
 
-var DateTimePicker = React.forwardRef(function (props, ref) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
-    _props$time = props.time,
-    time = _props$time === void 0 ? false : _props$time,
-    rules = props.rules;
-  var _useState = React.useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = React.useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
-  var CustomInput = React.forwardRef(function (_ref, ref) {
-    var value = _ref.value,
-      onClick = _ref.onClick,
-      className = _ref.className;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className,
-      onClick: onClick,
-      ref: ref
-    }, value);
-  });
-  React.useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setValue: function setValue(text) {
-        return _setValue(text);
-      },
-      getValue: function getValue() {
-        return value;
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
-  });
-  var _validateData = function _validateData() {
-    var count = 0;
-    rules === null || rules === void 0 ? void 0 : rules.forEach(function (e) {
-      var _e$pattern, _e$validate;
-      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        return false;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        return false;
-      } else if (value !== "" && (e === null || e === void 0 ? void 0 : e.type) === "validate" && e !== null && e !== void 0 && e.validate && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        return false;
-      }
-    });
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
-    }
-  };
-  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
-    return (e === null || e === void 0 ? void 0 : e.type) === "required";
-  }));
-  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-danger"
-  }, " *") : null;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1 " + labelClassName
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
-    selected: value,
-    onChange: function onChange(date) {
-      _setValue(date);
-    },
-    customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
-      className: _className
-    }),
-    dateFormat: time ? "dd/MM/yyyy HH:mm" : "dd/MM/yyyy",
-    showTimeSelect: time,
-    timeIntervals: 15,
-    wrapperClassName: "w-full"
-  }), error ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-danger"
-  }, error) : null);
-});
-
 var InputPhoneNumber = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -9019,150 +9141,312 @@ var InputPhoneNumber = React.forwardRef(function (props, ref) {
   }, error) : null);
 });
 
-var dayjs_min = createCommonjsModule(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
-});
-
-var js_cookie = createCommonjsModule(function (module, exports) {
-(function (global, factory) {
-   module.exports = factory() ;
-})(commonjsGlobal, (function () {
-  /* eslint-disable no-var */
-  function assign (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        target[key] = source[key];
+var Select$2 = React.forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    options = props.options,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
+    handleSearchOption = props.handleSearchOption,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isButtonDelete = props.isButtonDelete,
+    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
+    _props$funcDelete = props.funcDelete,
+    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
+    setParams = props.setParams,
+    _props$isSearch = props.isSearch,
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = React.useRef(null);
+  var _useState2 = React.useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = React.useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = React.useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = React.useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = React.useRef(null);
+  var _useState6 = React.useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = React.useRef(null);
+  var _useState7 = React.useState(12),
+    nextTrigger = _useState7[0],
+    setNextTrigger = _useState7[1];
+  var optionRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  React.useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  React.useEffect(function () {
+    if (typeof setParams !== 'function') return;
+    var handleScroll = function handleScroll() {
+      if (!optionRef.current) return;
+      var children = optionRef.current.querySelectorAll('div.option');
+      var parentRect = optionRef.current.getBoundingClientRect();
+      children.forEach(function (child, index) {
+        var rect = child.getBoundingClientRect();
+        if (rect.top >= parentRect.top && rect.bottom <= parentRect.bottom) {
+          if (index === nextTrigger) {
+            setParams === null || setParams === void 0 ? void 0 : setParams(function (prev) {
+              return _extends({}, prev, {
+                size: (prev === null || prev === void 0 ? void 0 : prev.size) + 8
+              });
+            });
+            setNextTrigger(function (prev) {
+              return prev + 8;
+            });
+          }
+        }
+      });
+    };
+    if (optionRef.current) {
+      optionRef.current.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (optionRef.current) {
+        optionRef.current.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [listOptions, nextTrigger]);
+  React.useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+      if (optionRef.current) {
+        optionRef.current.scrollTop = 0;
+      }
+    }, 600);
+    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();
+    var updateDropdownPosition = function updateDropdownPosition() {
+      if (selectRef.current && dropdownRef.current) {
+        var _selectRef$current, _window;
+        var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
+        var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
+        var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
+        if (spaceBelow < spaceAbove) {
+          setDropdownPosition('top');
+        } else {
+          setDropdownPosition('bottom');
+        }
+      }
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener('resize', updateDropdownPosition);
+    }
+    return function () {
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen]);
+  var handleClickOutside = function handleClickOutside(event) {
+    var _selectRef$current2;
+    if (selectRef !== null && selectRef !== void 0 && selectRef.current && !(selectRef !== null && selectRef !== void 0 && (_selectRef$current2 = selectRef.current) !== null && _selectRef$current2 !== void 0 && _selectRef$current2.contains(event.target))) {
+      setIsOpen(false);
+      setInputSearch("");
+      setListOptions(options);
+    }
+  };
+  React.useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setError: function setError(err) {
+        return _setError(err);
       }
+    };
+  });
+  var isEmpty = function isEmpty(value) {
+    var _Object$keys;
+    if (Array !== null && Array !== void 0 && Array.isArray(value)) return (value === null || value === void 0 ? void 0 : value.length) <= 0;
+    if (typeof value === 'object') return (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0;
+    return false;
+  };
+  var _validateData = function _validateData() {
+    var count = 0;
+    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
+      var _e$pattern;
+      var e = _step.value;
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && isEmpty(value)) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var handleSearch = function handleSearch(searchValue) {
+    if (handleSearchOption && typeof handleSearchOption === 'function') {
+      handleSearchOption === null || handleSearchOption === void 0 ? void 0 : handleSearchOption(searchValue);
+      setNextTrigger(12);
+    } else {
+      var listFilterOptions = options.filter(function (item) {
+        var _item$label;
+        return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
+      });
+      setListOptions(listFilterOptions);
     }
-    return target
-  }
-  /* eslint-enable no-var */
-
-  /* eslint-disable no-var */
-  var defaultConverter = {
-    read: function (value) {
-      if (value[0] === '"') {
-        value = value.slice(1, -1);
-      }
-      return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
-    },
-    write: function (value) {
-      return encodeURIComponent(value).replace(
-        /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
-        decodeURIComponent
-      )
+  };
+  var handleToggleSelect = function handleToggleSelect() {
+    setIsOpen(!isOpen);
+    setInputSearch("");
+    setListOptions(options);
+    if (typeof setParams === 'function') {
+      setParams === null || setParams === void 0 ? void 0 : setParams(function (prev) {
+        return _extends({}, prev, {
+          size: 16
+        });
+      });
+      setNextTrigger(12);
     }
   };
-  /* eslint-enable no-var */
-
-  /* eslint-disable no-var */
-
-  function init (converter, defaultAttributes) {
-    function set (name, value, attributes) {
-      if (typeof document === 'undefined') {
-        return
-      }
-
-      attributes = assign({}, defaultAttributes, attributes);
-
-      if (typeof attributes.expires === 'number') {
-        attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
-      }
-      if (attributes.expires) {
-        attributes.expires = attributes.expires.toUTCString();
-      }
-
-      name = encodeURIComponent(name)
-        .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
-        .replace(/[()]/g, escape);
-
-      var stringifiedAttributes = '';
-      for (var attributeName in attributes) {
-        if (!attributes[attributeName]) {
-          continue
-        }
-
-        stringifiedAttributes += '; ' + attributeName;
-
-        if (attributes[attributeName] === true) {
-          continue
-        }
-
-        // Considers RFC 6265 section 5.2:
-        // ...
-        // 3.  If the remaining unparsed-attributes contains a %x3B (";")
-        //     character:
-        // Consume the characters of the unparsed-attributes up to,
-        // not including, the first %x3B (";") character.
-        // ...
-        stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
-      }
-
-      return (document.cookie =
-        name + '=' + converter.write(value, name) + stringifiedAttributes)
+  var checkSelection = function checkSelection(valueId) {
+    if (isMulti) return value === null || value === void 0 ? void 0 : value.some(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.value) === valueId;
+    });
+    return (value === null || value === void 0 ? void 0 : value.value) == valueId;
+  };
+  var handleSelection = function handleSelection(item, e) {
+    e.stopPropagation();
+    if (!isMulti) {
+      setValue(item);
+      setIsOpen(false);
     }
-
-    function get (name) {
-      if (typeof document === 'undefined' || (arguments.length && !name)) {
-        return
-      }
-
-      // To prevent the for loop in the first place assign an empty array
-      // in case there are no cookies at all.
-      var cookies = document.cookie ? document.cookie.split('; ') : [];
-      var jar = {};
-      for (var i = 0; i < cookies.length; i++) {
-        var parts = cookies[i].split('=');
-        var value = parts.slice(1).join('=');
-
-        try {
-          var found = decodeURIComponent(parts[0]);
-          jar[found] = converter.read(value, found);
-
-          if (name === found) {
-            break
-          }
-        } catch (e) {}
-      }
-
-      return name ? jar[name] : jar
+    onClick === null || onClick === void 0 ? void 0 : onClick(item);
+  };
+  var handleDeleteSelection = function handleDeleteSelection(e, item) {
+    e.stopPropagation();
+    if (isMulti === false) setValue({});
+    funcDelete === null || funcDelete === void 0 ? void 0 : funcDelete(item);
+  };
+  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  }));
+  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-danger"
+  }, " *") : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: selectRef,
+    className: "relative " + wrapClassName
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1 " + labelClassName
+  }, label, " ", labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 rounded-lg w-full bg-white " + (disabled ? "!bg-gray6" : "") + " border border-stroke " + className
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: " w-full h-10 bg-transparent flex justify-between items-center px-3 py-2 " + selectClassName,
+    onClick: handleToggleSelect,
+    disabled: disabled
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-between items-center w-full"
+  }, isEmpty(value) || isMulti ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 line-clamp-1"
+  }, placeholder) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full text-start pointer-events-none line-clamp-1",
+    dangerouslySetInnerHTML: {
+      __html: value === null || value === void 0 ? void 0 : value.label
     }
-
-    return Object.create(
-      {
-        set,
-        get,
-        remove: function (name, attributes) {
-          set(
-            name,
-            '',
-            assign({}, attributes, {
-              expires: -1
-            })
-          );
-        },
-        withAttributes: function (attributes) {
-          return init(this.converter, assign({}, this.attributes, attributes))
-        },
-        withConverter: function (converter) {
-          return init(assign({}, this.converter, converter), this.attributes)
-        }
-      },
-      {
-        attributes: { value: Object.freeze(defaultAttributes) },
-        converter: { value: Object.freeze(converter) }
+  }), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
+    onClick: function onClick(e) {
+      handleDeleteSelection(e, value);
+    }
+  }, /*#__PURE__*/React__default.createElement(rx.RxCross2, null)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "ms-1"
+  }, /*#__PURE__*/React__default.createElement(fa.FaAngleUp, {
+    className: "text-xs"
+  }), /*#__PURE__*/React__default.createElement(fa.FaAngleDown, {
+    className: "text-xs"
+  })))), isOpen ? /*#__PURE__*/React__default.createElement("div", {
+    ref: dropdownRef,
+    style: {
+      background: "#FFFFFF"
+    },
+    className: "absolute p-1 my-2 rounded-2xl w-full z-40 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2') + " " + optionClassName
+  }, /*#__PURE__*/React__default.createElement("div", null, isSearch ? /*#__PURE__*/React__default.createElement("div", {
+    className: "px-3 flex items-center border-b-[1px]"
+  }, /*#__PURE__*/React__default.createElement(lu.LuSearch, {
+    className: "inline text-gray3 me-2"
+  }), /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    ref: inputRef,
+    className: "py-2 w-full border-0 focus:outline-none focus:ring-0",
+    placeholder: "T\xECm ki\u1EBFm",
+    value: inputSearch,
+    onChange: function onChange(e) {
+      setInputSearch(e.target.value);
+    }
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "overflow-y-auto max-h-72 scroll-container",
+    ref: optionRef
+  }, (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", {
+      key: "gjfd-" + index,
+      className: "option px-2 cursor-default py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
+      onClick: function onClick(e) {
+        handleSelection(item, e);
       }
-    )
-  }
-
-  var api = init(defaultConverter, { path: '/' });
-  /* eslint-enable no-var */
-
-  return api;
-
-}));
+    }, /*#__PURE__*/React__default.createElement(io.IoMdCheckmark, {
+      className: (checkSelection(item === null || item === void 0 ? void 0 : item.value) ? "" : 'invisible') + " inline me-2 w-4"
+    }), renderItem ? renderItem(item) : /*#__PURE__*/React__default.createElement("div", {
+      className: " whitespace-nowrap line-clamp-1"
+    }, item === null || item === void 0 ? void 0 : item.label));
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "py-6 text-center"
+  }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3")))) : null), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
 });
+var SelectDynamic = React.memo(Select$2);
 
 var BookingForm = function BookingForm(props) {
   var _props$shopConfig = props.shopConfig,
@@ -9179,7 +9463,8 @@ var BookingForm = function BookingForm(props) {
     isModalBooking = _props$isModalBooking === void 0 ? false : _props$isModalBooking;
   var _useState = React.useState(false);
   var _useState2 = React.useState({
-      types: "1,10"
+      types: "1,10",
+      size: 16
     }),
     productsParams = _useState2[0],
     setProductsParams = _useState2[1];
@@ -9353,6 +9638,7 @@ var BookingForm = function BookingForm(props) {
   var handleSearchProducts = function handleSearchProducts(value) {
     setProductsParams(function (prev) {
       return _extends({}, prev, {
+        size: 16,
         productName: value
       });
     });
@@ -9389,7 +9675,8 @@ var BookingForm = function BookingForm(props) {
     className: "grid grid-cols-1 gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative"
-  }, /*#__PURE__*/React__default.createElement(Select$1, {
+  }, /*#__PURE__*/React__default.createElement(SelectDynamic, {
+    setParams: setProductsParams,
     ref: inputSelectedRef,
     isMulti: true,
     defaultValue: listProductSelected,
@@ -9505,6 +9792,7 @@ var BookingForm = function BookingForm(props) {
     className: "text-center"
   }, "Ch\xFAng t\xF4i \u0111\xE3 ghi nh\u1EADn th\xF4ng tin c\u1EE7a b\u1EA1n v\xE0 s\u1EBD li\xEAn h\u1EC7 l\u1EA1i ngay"))));
 };
+var BookingForm$1 = React.memo(BookingForm);
 
 var TreatmentsList7 = function TreatmentsList7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -9625,7 +9913,7 @@ var TreatmentsList7 = function TreatmentsList7(props) {
     color: secondary
   }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
-  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, /*#__PURE__*/React__default.createElement(BookingForm$1, {
     className: "overflow-y-auto no-scrollbar w-[85vw]  sm:w-[70vw] md:w-[60vw] lg:w-[50vw] max-h-[80vh] !bg-bgSecondary",
     onCloseFormBooking: handleCloseModal,
     defaultValue: dataBooking,
@@ -9767,13 +10055,13 @@ var ServiceDetail1 = function ServiceDetail1(props) {
     product: product,
     className: "w-full aspect-square !object-contain rounded-2xl"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " \n                                                h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full rounded-md lg:rounded-lg aspect-square object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -9820,7 +10108,7 @@ var ServiceDetail1 = function ServiceDetail1(props) {
     className: "text-gray3 mt-2"
   }, "Kh\xF4ng c\xF3 th\xF4ng tin"))), isBooking ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
-  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, /*#__PURE__*/React__default.createElement(BookingForm$1, {
     isModalBooking: isBooking,
     className: "overflow-y-auto no-scrollbar w-[85vw]  sm:w-[70vw] md:w-[60vw] lg:w-[50vw] max-h-[80vh]",
     onCloseFormBooking: handleCloseModal,
@@ -9894,7 +10182,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-4 col-span-2"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "rounded-2xl p-2 bg-background border"
+    className: "rounded-2xl bg-background border"
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
     className: "w-full aspect-square object-contain rounded-2xl"
@@ -9902,13 +10190,13 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
     product: product,
     className: "w-full aspect-square !object-contain rounded-2xl"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " \n                                                h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full rounded-md lg:rounded-lg aspect-square object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -9955,7 +10243,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
     className: "text-gray3 mt-2"
   }, "Kh\xF4ng c\xF3 th\xF4ng tin"))), isBooking ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
-  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, /*#__PURE__*/React__default.createElement(BookingForm$1, {
     isModalBooking: isBooking,
     className: "overflow-y-auto no-scrollbar w-[85vw]  sm:w-[70vw] md:w-[60vw] lg:w-[50vw] max-h-[80vh]",
     onCloseFormBooking: handleCloseModal,
@@ -10030,7 +10318,7 @@ var ProductItem3 = function ProductItem3(props) {
     className: "w-full border border-stroke rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-48 md:h-60 xl:h-[304px] rounded-t-2xl"
+    className: "w-full rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 flex flex-col gap-2 md:gap-4 items-start"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10057,7 +10345,7 @@ var ProductItem4 = function ProductItem4(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-40 sm:h-56 lg:h-60 xl:h-64 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-start line-clamp-1  w-full overflow-hidden text-ellipsis text-lg"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10092,7 +10380,7 @@ var ProductItem5 = function ProductItem5(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-1 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-start line-clamp-1  w-full overflow-hidden text-ellipsis mb-2"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10125,7 +10413,7 @@ var ProductItem6 = function ProductItem6(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-48 md:h-60 xl:h-72 rounded-2xl"
+    className: "w-full !aspect-[3/4] rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text start line-clamp-1  w-full overflow-hidden text-ellipsis"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10143,66 +10431,238 @@ var ProductItem6 = function ProductItem6(props) {
 };
 
 var ProductItem7 = function ProductItem7(props) {
-  var _product$productInfo, _product$productInfo2, _product$productInfo3, _product$productInfo4, _product$productInfo5, _product$productInfo6;
+  var _product$productInfo, _product$productInfo2, _product$productInfo3, _product$productInfo4, _product$productInfo5, _product$productInfo6, _product$productInfo7, _product$productInfo8, _product$productInfo9, _product$productInfo10, _product$productInfo11;
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full bg-bgSecondary relative p-2 md:p-4 rounded-2xl " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "px-2 md:px-4 xl:px-6"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "w-full hover:scale-105 transition duration-300 ease-in-out rounded-2xl !object-contain"
+  })), (product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.price) !== (product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.priceBeforeDiscount) && product !== null && product !== void 0 && (_product$productInfo3 = product.productInfo) !== null && _product$productInfo3 !== void 0 && _product$productInfo3.priceBeforeDiscount ? /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-4 left-0 py-1 px-4 rounded-r-2xl bg-danger text-textButton font-semibold shadow-lg"
+  }, "-", Math.round(100 - (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.price) / (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.priceBeforeDiscount) * 100)) : null), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col mt-4 gap-4 items-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-2 min-h-12 w-full overflow-hidden text-ellipsis"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo6 = product.productInfo) === null || _product$productInfo6 === void 0 ? void 0 : _product$productInfo6.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
+  })), product !== null && product !== void 0 && product.isShowProductPriceOnLanding && product !== null && product !== void 0 && (_product$productInfo7 = product.productInfo) !== null && _product$productInfo7 !== void 0 && _product$productInfo7.priceBeforeDiscount && (product === null || product === void 0 ? void 0 : (_product$productInfo8 = product.productInfo) === null || _product$productInfo8 === void 0 ? void 0 : _product$productInfo8.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo9 = product.productInfo) === null || _product$productInfo9 === void 0 ? void 0 : _product$productInfo9.price) ? /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-5 left-0 font-semibold px-3 py-1 bg-danger text-textButton rounded-r-2xl shadow-lg v-max"
+  }, 1 - 100 * (product === null || product === void 0 ? void 0 : (_product$productInfo10 = product.productInfo) === null || _product$productInfo10 === void 0 ? void 0 : _product$productInfo10.price) / (product === null || product === void 0 ? void 0 : (_product$productInfo11 = product.productInfo) === null || _product$productInfo11 === void 0 ? void 0 : _product$productInfo11.priceBeforeDiscount)) : null));
+};
+
+var ProductItem8 = function ProductItem8(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
-    _props$classNamePrice = props.classNamePrice,
-    classNamePrice = _props$classNamePrice === void 0 ? "text-lg" : _props$classNamePrice;
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full bg-bgSecondary relative rounded-2xl " + className
+    className: "text-center rounded relative group " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative "
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
+    className: "!aspect-[5/8] rounded"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "p-3 sm:p-4 flex flex-col gap-4 items-start"
+    className: "absolute bottom-0 rounded-b pb-6 px-4 bg-gradient-to-t from-black/50 to-transparent flex flex-col items-center h-1/2 gap-2 w-full justify-end "
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1 w-full overflow-hidden text-ellipsis"
+    className: "text-lg text-textButton"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "") + " " + classNamePrice
-  })), product !== null && product !== void 0 && product.isShowProductPriceOnLanding && product !== null && product !== void 0 && (_product$productInfo2 = product.productInfo) !== null && _product$productInfo2 !== void 0 && _product$productInfo2.priceBeforeDiscount && (product === null || product === void 0 ? void 0 : (_product$productInfo3 = product.productInfo) === null || _product$productInfo3 === void 0 ? void 0 : _product$productInfo3.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.price) ? /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute top-5 left-0 font-semibold px-3 py-1 bg-danger text-textButton rounded-r-2xl shadow-lg v-max"
-  }, 1 - 100 * (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.price) / (product === null || product === void 0 ? void 0 : (_product$productInfo6 = product.productInfo) === null || _product$productInfo6 === void 0 ? void 0 : _product$productInfo6.priceBeforeDiscount)) : null));
+    className: !(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "",
+    priceClassName: "text-textButton !font-normal",
+    priceBeforeDiscountClassName: "text-textButton !font-normal"
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Th\xEAm v\xE0o gi\u1ECF",
+    shopConfigStyle: shopConfigStyle,
+    className: "hidden group-hover:block transition-all duration-300 !font-normal"
+  })))));
+};
+
+var ProductItem9 = function ProductItem9(props) {
+  var _product$productInfo;
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex flex-col gap-4 rounded-2xl p-2 md:p-6 bg-bgSecondary " + className
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "hover:scale-105 transition duration-300 ease-in-out !object-contain !aspect-[9/8]"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-start line-clamp-2 font-medium  min-h-12 w-full overflow-hidden text-ellipsis mb-2"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    priceClassName: "!text-secondary !text-base !font-normal",
+    className: "text-lg text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 md:gap-4 "
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, {
+    className: "text-primary p-2.5 h-10 w-12 border border-primary rounded-lg hover:bg-primary hover:text-textButton " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Mua ngay",
+    className: "w-full",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var ProductItem10 = function ProductItem10(props) {
+  var _product$productInfo;
+  var product = props.product;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex border-b border-stroke items-center py-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-auto"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "!w-24 rounded-lg"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 flex-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), product !== null && product !== void 0 && product.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    priceClassName: "!font-normal text-lg"
+  })) : null));
+};
+
+function getMinMax$1(array, field) {
+  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
+    return null;
+  }
+  var _array$reduce = array.reduce(function (acc, obj) {
+      var value = obj[field];
+      return {
+        min: value < acc.min ? value : acc.min,
+        max: value > acc.max ? value : acc.max
+      };
+    }, {
+      min: array[0][field],
+      max: array[0][field]
+    }),
+    min = _array$reduce.min,
+    max = _array$reduce.max;
+  return {
+    min: min,
+    max: max
+  };
+}
+var ProductPrice2 = function ProductPrice2(props) {
+  var product = props.product,
+    variant = props.variant,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$priceClassName = props.priceClassName,
+    priceClassName = _props$priceClassName === void 0 ? "" : _props$priceClassName,
+    _props$priceBeforeDis = props.priceBeforeDiscountClassName,
+    priceBeforeDiscountClassName = _props$priceBeforeDis === void 0 ? "" : _props$priceBeforeDis;
+  var _useState = React.useState(),
+    displayPrice = _useState[0],
+    setDisplayPrice = _useState[1];
+  var _useState2 = React.useState(),
+    displayPriceBeforeDiscount = _useState2[0],
+    setDisplayPriceBeforeDiscount = _useState2[1];
+  React.useEffect(function () {
+    if (variant) {
+      genProductPrice([variant]);
+    } else if (product) {
+      genProductPrice(product.variants);
+    }
+  }, [product, variant]);
+  var genProductPrice = function genProductPrice(variants) {
+    var mPrice = getMinMax$1(variants, 'price');
+    var mPriceBeforeDiscount = getMinMax$1(variants, 'priceBeforeDiscount');
+    if (mPrice && mPriceBeforeDiscount) {
+      var _displayPriceBeforeDiscount = formatCurrency2(mPriceBeforeDiscount.min);
+      var _displayPrice = formatCurrency2(mPrice.min);
+      if (mPrice.min !== mPrice.max) {
+        _displayPrice += " - " + formatCurrency2(mPrice.max);
+      }
+      if (mPriceBeforeDiscount.min !== mPriceBeforeDiscount.max) {
+        _displayPriceBeforeDiscount += " - " + formatCurrency2(mPriceBeforeDiscount.max);
+      }
+      setDisplayPrice(_displayPrice);
+      setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
+    } else {
+      var _displayPrice2 = formatCurrency2(product === null || product === void 0 ? void 0 : product.price);
+      setDisplayPrice(_displayPrice2);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 flex-wrap " + className
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-primary font-semibold " + priceClassName,
+    style: style
+  }, displayPrice), displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through " + priceBeforeDiscountClassName + " "
+  }, displayPriceBeforeDiscount) : null);
 };
 
-var ProductItem8 = function ProductItem8(props) {
+var ProductItem11 = function ProductItem11(props) {
   var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
     _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center rounded relative group " + className
+    className: "w-full bg-bgSecondary " + className
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative "
+    className: "overflow-hidden"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "min-h-[360px] md:min-h-[400px] xl:min-h-[440px] !object-cover !rounded"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute bottom-0 rounded-b pb-6 px-4 bg-gradient-to-t from-black/50 to-transparent flex flex-col items-center h-1/2 gap-2 w-full justify-end "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-lg text-textButton"
-  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    className: "hover:scale-105 transition duration-300 ease-in-out"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 flex flex-col gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-start line-clamp-1  w-full overflow-hidden text-ellipsis mb-2"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice2, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: !(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "",
-    priceClassName: "text-textButton !font-normal",
-    priceBeforeDiscountClassName: "text-textButton !font-normal"
+    priceClassName: "!font-normal",
+    className: "text-lg text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 md:gap-4 "
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, {
+    className: "text-primary p-2.5 h-10 w-12 border border-primary rounded-lg hover:bg-primary hover:text-textButton " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
   }), /*#__PURE__*/React__default.createElement(Button, {
-    label: "Th\xEAm v\xE0o gi\u1ECF",
-    shopConfigStyle: shopConfigStyle,
-    className: "hidden group-hover:block transition-all duration-300 !font-normal"
+    label: "Mua ngay",
+    className: "w-full",
+    shopConfigStyle: shopConfigStyle
   })))));
 };
 
@@ -10220,7 +10680,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-1"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full w-full h-[189px] md:h-[238px] xl:h-[304px] rounded-2xl"
+    className: " rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "line-clamp-1 mb-2 font-medium text-lg"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10331,13 +10791,13 @@ var Products2 = function Products2(props) {
       breakpoint: 1024,
       settings: {
         slidesToShow: 4,
-        slidesToScroll: 4
+        slidesToScroll: 1
       }
     }, {
       breakpoint: 1023,
       settings: {
         slidesToShow: 3,
-        slidesToScroll: 3
+        slidesToScroll: 1
       }
     }, {
       breakpoint: 635,
@@ -10345,6 +10805,12 @@ var Products2 = function Products2(props) {
         slidesToShow: 2,
         slidesToScroll: 2
       }
+    }, {
+      breakpoint: 370,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+      }
     }]
   };
   React.useEffect(function () {
@@ -10378,12 +10844,12 @@ var Products2 = function Products2(props) {
       color: textBody
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
+    className: "relative rounded-3xl w-full py-6 md:py-10 md:px-6 px-3 xl:px-10",
     style: {
       background: secondary
     }
   }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "font-semibold text-2xl md:text-4xl lg:text-4xl ps-5 pb-4",
+    className: "font-semibold text-2xl md:text-4xl lg:text-4xl ps-5 pb-6",
     style: {
       color: textButton
     }
@@ -10397,16 +10863,15 @@ var Products2 = function Products2(props) {
     beforeChange: handleBeforeChange
   }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "px-2 lg:px-3",
+      className: "px-1 md:px-2 lg:px-3",
       key: "dfg-" + index
     }, /*#__PURE__*/React__default.createElement(ProductItem, {
       product: product,
       Link: Link,
-      shopConfigStyle: shopConfigStyle,
-      classNamePrice: "text-base md:text-lg"
+      shopConfigStyle: shopConfigStyle
     }));
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute left-0 top-1/2 w-full flex justify-between px-2 md:px-4 lg:px-6"
+    className: "absolute left-0 top-[45%] w-full flex justify-between px-2 md:px-4 lg:px-6"
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: goToPrev,
     className: (canGoPrev ? "bg-primary" : "bg-gray5 cursor-not-allowed") + " p-2 rounded-full"
@@ -10451,7 +10916,7 @@ var Pagination = function Pagination(_ref) {
     for (var i = start; i <= end; i++) {
       pages.push(i);
     }
-    if (current_page < total_pages - 2) pages.push("...");
+    if (current_page < total_pages - 3) pages.push("...");
     pages.push(total_pages);
     return pages;
   };
@@ -10471,7 +10936,7 @@ var Pagination = function Pagination(_ref) {
       onClick: function onClick() {
         return typeof page === "number" && handlePageChange(page - 1);
       },
-      className: "px-4 py-1 rounded-md " + (page === current_page + 1 ? "bg-primary text-white" : "bg-transparent text-primary") + " hover:opacity-80 " + (page === "..." ? "cursor-default text-gray-500" : ""),
+      className: "px-2 md:px-4 py-1 rounded-md " + (page === current_page + 1 ? "bg-primary text-white" : "bg-transparent text-primary") + " hover:opacity-80 " + (page === "..." ? "cursor-default text-gray-500" : ""),
       disabled: page === "..."
     }, page);
   })), /*#__PURE__*/React__default.createElement(io5.IoChevronForwardOutline, {
@@ -10590,44 +11055,217 @@ var Products3 = function Products3(props) {
   }));
 };
 
-var Products9 = function Products9(props) {
+var CarouselItem = function CarouselItem(props) {
   var _Object$keys;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isAll = props.isAll,
+    isAll = _props$isAll === void 0 ? true : _props$isAll,
+    _props$isNavigateButt = props.isNavigateButton,
+    isNavigateButton = _props$isNavigateButt === void 0 ? true : _props$isNavigateButt,
+    _props$itemClassName = props.itemClassName,
+    itemClassName = _props$itemClassName === void 0 ? "" : _props$itemClassName;
+  var listRef = React.useRef(null);
+  var _useState = React.useState(false),
+    canScrollLeft = _useState[0],
+    setCanScrollLeft = _useState[1];
+  var _useState2 = React.useState(false),
+    canScrollRight = _useState2[0],
+    setCanScrollRight = _useState2[1];
+  var _useState3 = React.useState({}),
+    value = _useState3[0],
+    setValue = _useState3[1];
+  React.useEffect(function () {
+    var _listRef$current;
+    checkScroll();
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.addEventListener("scroll", checkScroll);
+    return function () {
+      var _listRef$current2;
+      return (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.removeEventListener("scroll", checkScroll);
+    };
+  }, [data]);
+  var checkScroll = function checkScroll() {
+    if (listRef.current) {
+      var _listRef$current3 = listRef.current,
+        scrollLeft = _listRef$current3.scrollLeft,
+        scrollWidth = _listRef$current3.scrollWidth,
+        clientWidth = _listRef$current3.clientWidth;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+    }
+  };
+  var handleClickPrevImg = function handleClickPrevImg() {
+    if (listRef.current) {
+      checkScroll();
+      listRef.current.scrollBy({
+        left: -300,
+        behavior: "smooth"
+      });
+    }
+  };
+  var handleClickNextImg = function handleClickNextImg() {
+    if (listRef.current) {
+      checkScroll();
+      listRef.current.scrollBy({
+        left: 300,
+        behavior: "smooth"
+      });
+    }
+  };
+  var handleOnClick = function handleOnClick(item) {
+    setValue(item);
+    onClick === null || onClick === void 0 ? void 0 : onClick(item);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "h-10 md:h-12 flex justify-between items-center " + className,
+    style: style
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full overflow-hidden "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex overflow-x-auto gap-2 " + (isNavigateButton ? "no-scrollbar" : "scroll-custom pb-2") + " items-center",
+    ref: listRef
+  }, isAll ? /*#__PURE__*/React__default.createElement("div", {
+    className: " " + ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0 ? "bg-primary text-textButton" : "bg-background") + " text-primary w-max border border-primary p-1 md:p-2 rounded-lg cursor-pointer whitespace-nowrap",
+    onClick: function onClick() {
+      handleOnClick({});
+    }
+  }, "T\u1EA5t c\u1EA3") : null, data && (data === null || data === void 0 ? void 0 : data.length) > 0 && (data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: ((value === null || value === void 0 ? void 0 : value.value) === (item === null || item === void 0 ? void 0 : item.value) ? "bg-primary text-textButton" : "bg-background") + " w-max border text-primary border-primary py-1 px-2 md:py-2 md:px-3 rounded-lg cursor-pointer whitespace-nowrap " + itemClassName,
+      key: "carousel-" + index,
+      onClick: function onClick() {
+        handleOnClick(item);
+      }
+    }, item === null || item === void 0 ? void 0 : item.label);
+  })))), isNavigateButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden my-auto gap-4 md:flex justify-end ps-10"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "h-full w-9 h-9 md:h-11 md:w-11 items-center justify-center rounded-full " + (canScrollLeft ? "bg-primary cursor-pointer text-textButton" : "bg-gray5 text-gray3 cursor-not-allowed"),
+    onClick: handleClickPrevImg,
+    disabled: !canScrollLeft
+  }, /*#__PURE__*/React__default.createElement(io.IoIosArrowBack, {
+    size: 24,
+    className: "inline-block text-lg"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    className: "h-full w-9 h-9 md:h-11 md:w-11 flex items-center justify-center rounded-full  " + (canScrollRight ? "bg-primary cursor-pointer text-textButton" : "bg-gray5 text-gray3 cursor-not-allowed"),
+    onClick: handleClickNextImg,
+    disabled: !canScrollRight
+  }, /*#__PURE__*/React__default.createElement(io.IoIosArrowForward, {
+    size: 24,
+    className: "inline-block text-lg "
+  }))) : null);
+};
+
+var Products9 = function Products9(props) {
+  var _Object$keys2;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     shopConfigStyle = props.shopConfigStyle,
     _props$ProductItem = props.ProductItem,
     ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
-  var _useState = React.useState({
+  var _useState = React.useState(true),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = React.useState({
       size: 12
     }),
-    params = _useState[0],
-    setParams = _useState[1];
+    params = _useState2[0];
+  var _useState3 = React.useState(false),
+    isAutoGetList = _useState3[0];
   var _CategoryController = CategoryController(_extends({}, props, {
       types: "0"
     })),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
   var _ProductController = ProductController(_extends({}, props, {
-      params: params
+      params: params,
+      isAutoGetList: isAutoGetList
     })),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
-    loading = _ProductController.loading;
+    getProductListSearch = _ProductController.getProductListSearch;
+  var _useState4 = React.useState([]),
+    categoryProducts = _useState4[0],
+    setCategoryProducts = _useState4[1];
+  React.useEffect(function () {
+    if ((categories === null || categories === void 0 ? void 0 : categories.length) > 0) {
+      fetchAll();
+    }
+  }, [categories]);
+  var fetchAll = function fetchAll() {
+    try {
+      setLoading(true);
+      var _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          var _categories$slice;
+          var result = {};
+          return Promise.resolve(Promise.all(categories === null || categories === void 0 ? void 0 : (_categories$slice = categories.slice(0, 4)) === null || _categories$slice === void 0 ? void 0 : _categories$slice.map(function (cat) {
+            try {
+              return Promise.resolve(getProductListSearch({
+                categoryId: cat === null || cat === void 0 ? void 0 : cat.categoryId,
+                size: 4
+              })).then(function (products) {
+                if ((products === null || products === void 0 ? void 0 : products.length) > 0) {
+                  result[cat === null || cat === void 0 ? void 0 : cat.cateName] = products;
+                }
+              });
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          }))).then(function () {
+            setCategoryProducts(result);
+          });
+        }, function (error) {
+          console.log(error);
+        });
+      }, function (_wasThrown, _result) {
+        setLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   var handleChooseCategory = function handleChooseCategory(item) {
-    setParams(_extends({}, params, {
-      categoryId: item === null || item === void 0 ? void 0 : item.categoryId,
-      size: 12
-    }));
+    var _Object$keys;
+    if ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(item)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0) {
+      fetchAll();
+    } else {
+      fetchOne(item);
+    }
   };
-  var groupedProducts = products === null || products === void 0 ? void 0 : products.reduce(function (acc, product) {
-    var _product$productInfo = product === null || product === void 0 ? void 0 : product.productInfo,
-      categoryName = _product$productInfo.categoryName;
-    if (!acc[categoryName]) {
-      acc[categoryName] = [];
+  var fetchOne = function fetchOne(item) {
+    try {
+      setLoading(true);
+      var _temp2 = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(getProductListSearch({
+            categoryId: item === null || item === void 0 ? void 0 : item.categoryId,
+            size: 12
+          })).then(function (products) {
+            var _setCategoryProducts, _console$log;
+            setCategoryProducts((_setCategoryProducts = {}, _setCategoryProducts[item === null || item === void 0 ? void 0 : item.cateName] = products, _setCategoryProducts));
+            console.log("check::::", (_console$log = {}, _console$log[item === null || item === void 0 ? void 0 : item.cateName] = products, _console$log));
+          });
+        }, function (error) {
+          console.log(error);
+        });
+      }, function (_wasThrown2, _result2) {
+        setLoading(false);
+        if (_wasThrown2) throw _result2;
+        return _result2;
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
     }
-    acc[categoryName].push(product);
-    return acc;
-  }, {});
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " flex flex-col gap-4 md:!my-6 md:gap-6 "
   }, /*#__PURE__*/React__default.createElement(CarouselItem, {
@@ -10635,7 +11273,7 @@ var Products9 = function Products9(props) {
     onClick: handleChooseCategory
   }), loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "m-auto mt-20 min-h-32"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(groupedProducts)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0 ? Object.entries(groupedProducts).map(function (_ref, index) {
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (Object === null || Object === void 0 ? void 0 : (_Object$keys2 = Object.keys(categoryProducts)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) > 0 ? Object.entries(categoryProducts).map(function (_ref, index) {
     var _products$;
     var categoryName = _ref[0],
       products = _ref[1];
@@ -10659,7 +11297,9 @@ var Products9 = function Products9(props) {
         product: product,
         key: product === null || product === void 0 ? void 0 : product.landingShopProductId
       });
-    }) : null));
+    }) : /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-2 sm:col-span-3 lg:col-span-4"
+    }, /*#__PURE__*/React__default.createElement(NotFoundProduct, null))));
   }) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
 };
 
@@ -10730,34 +11370,30 @@ var listFilter = [{
   value: "sortPriceDESC"
 }];
 var Products11 = function Products11(props) {
-  var _productsFilter$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$categoryId = props.categoryId,
-    categoryId = _props$categoryId === void 0 ? 0 : _props$categoryId,
+    categoryId = _props$categoryId === void 0 ? "" : _props$categoryId,
     _props$ProductItem = props.ProductItem,
     ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
   var _useState = React.useState({
       page: 0,
       size: 12,
-      categoryId: categoryId
+      categoryId: categoryId || ""
     }),
     params = _useState[0],
     setParams = _useState[1];
-  var _useState2 = React.useState(true),
-    firstLoading = _useState2[0],
-    setFirstLoading = _useState2[1];
-  var _useState3 = React.useState({}),
-    categorySelected = _useState3[0],
-    setCategorySelected = _useState3[1];
-  var _useState4 = React.useState([]),
-    productsFilter = _useState4[0],
-    setProductsFilter = _useState4[1];
-  var _useState5 = React.useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
-    filterItem = _useState5[0],
-    setFilterItem = _useState5[1];
+  var _useState2 = React.useState({}),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
+  var _useState3 = React.useState([]),
+    productsFilter = _useState3[0],
+    setProductsFilter = _useState3[1];
+  var _useState4 = React.useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
+    filterItem = _useState4[0],
+    setFilterItem = _useState4[1];
   var _CategoryController = CategoryController(_extends({}, props, {
       types: "0"
     })),
@@ -10771,22 +11407,33 @@ var Products11 = function Products11(props) {
     loading = _ProductController.loading,
     page = _ProductController.page;
   var handleOnChangePage = function handleOnChangePage(pageIndex) {
-    setFirstLoading(false);
     setParams(function (prev) {
       return _extends({}, prev, {
         page: pageIndex
       });
     });
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
   };
   var handleChooseCategory = function handleChooseCategory(category) {
+    if (categoryId) {
+      var newUrl = getLinkProductsByCategory(category);
+      window.history.replaceState(null, '', newUrl);
+    }
     setCategorySelected(category);
-    setFirstLoading(true);
     setFilterItem(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]);
     setParams(function (prev) {
-      return _extends({}, prev, {
+      return {
+        page: 0,
         categoryId: category === null || category === void 0 ? void 0 : category.categoryId,
         size: 12
-      });
+      };
+    });
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
     });
   };
   React.useEffect(function () {
@@ -10798,23 +11445,42 @@ var Products11 = function Products11(props) {
     }
   }, [categories]);
   React.useEffect(function () {
-    setProductsFilter(products);
+    if ((filterItem === null || filterItem === void 0 ? void 0 : filterItem.value) === "sortPriceDESC") {
+      var productsCopy = [].concat(products);
+      productsCopy === null || productsCopy === void 0 ? void 0 : productsCopy.sort(function (a, b) {
+        var _a$productInfo, _b$productInfo;
+        return (a === null || a === void 0 ? void 0 : (_a$productInfo = a.productInfo) === null || _a$productInfo === void 0 ? void 0 : _a$productInfo.price) - (b === null || b === void 0 ? void 0 : (_b$productInfo = b.productInfo) === null || _b$productInfo === void 0 ? void 0 : _b$productInfo.price);
+      });
+      setProductsFilter(productsCopy);
+    } else if ((filterItem === null || filterItem === void 0 ? void 0 : filterItem.value) === "discount") {
+      var _productsCopy2;
+      var _productsCopy = [].concat(products);
+      _productsCopy = (_productsCopy2 = _productsCopy) === null || _productsCopy2 === void 0 ? void 0 : _productsCopy2.filter(function (product) {
+        var _product$productInfo, _product$productInfo2, _product$productInfo3;
+        return (product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo3 = product.productInfo) === null || _product$productInfo3 === void 0 ? void 0 : _product$productInfo3.price);
+      });
+      setProductsFilter(_productsCopy);
+    } else {
+      setProductsFilter(products);
+    }
   }, [products, categorySelected]);
   var handleFilter = function handleFilter(item) {
     setFilterItem(item);
-    if ((item === null || item === void 0 ? void 0 : item.value) === "sortPriceDESC") {
+    if ((item === null || item === void 0 ? void 0 : item.value) === "sortPriceDESC" && !(params !== null && params !== void 0 && params.isHighlight)) {
       var productsCopy = [].concat(products);
       productsCopy === null || productsCopy === void 0 ? void 0 : productsCopy.sort(function (a, b) {
-        var _b$productInfo, _a$productInfo;
-        return +(b === null || b === void 0 ? void 0 : (_b$productInfo = b.productInfo) === null || _b$productInfo === void 0 ? void 0 : _b$productInfo.price) - (a === null || a === void 0 ? void 0 : (_a$productInfo = a.productInfo) === null || _a$productInfo === void 0 ? void 0 : _a$productInfo.price);
+        var _a$productInfo2, _b$productInfo2;
+        return (a === null || a === void 0 ? void 0 : (_a$productInfo2 = a.productInfo) === null || _a$productInfo2 === void 0 ? void 0 : _a$productInfo2.price) - (b === null || b === void 0 ? void 0 : (_b$productInfo2 = b.productInfo) === null || _b$productInfo2 === void 0 ? void 0 : _b$productInfo2.price);
       });
       setProductsFilter(productsCopy);
-    } else if ((item === null || item === void 0 ? void 0 : item.value) === "discount") {
-      var _productsCopy = [].concat(products);
-      _productsCopy === null || _productsCopy === void 0 ? void 0 : _productsCopy.filter(function (product) {
-        return (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price);
+    } else if ((item === null || item === void 0 ? void 0 : item.value) === "discount" && !(params !== null && params !== void 0 && params.isHighlight)) {
+      var _productsCopy4;
+      var _productsCopy3 = [].concat(products);
+      _productsCopy3 = (_productsCopy4 = _productsCopy3) === null || _productsCopy4 === void 0 ? void 0 : _productsCopy4.filter(function (product) {
+        var _product$productInfo4, _product$productInfo5, _product$productInfo6;
+        return (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo6 = product.productInfo) === null || _product$productInfo6 === void 0 ? void 0 : _product$productInfo6.price);
       });
-      setProductsFilter(_productsCopy);
+      setProductsFilter(_productsCopy3);
     } else if ((item === null || item === void 0 ? void 0 : item.value) === "isHighlight") {
       setParams(function (prev) {
         return _extends({}, prev, {
@@ -10823,19 +11489,20 @@ var Products11 = function Products11(props) {
       });
     } else {
       setParams(function (prev) {
-        return _extends({}, prev, {
+        return {
+          page: 0,
           categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId,
           size: 12
-        });
+        };
       });
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 !my-6 !md:my-6 md:grid-cols-4 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "md:sticky top-0 self-start"
+    className: "md:sticky top-16 self-start"
   }, (categories === null || categories === void 0 ? void 0 : categories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4 max-h-96 overflow-y-auto"
+    className: " flex flex-col gap-2 rounded-2xl bg-bgSecondary p-4 max-h-96 scroll-container overflow-y-auto"
   }, categories === null || categories === void 0 ? void 0 : categories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "px-6 py-2 hover:bg-gray-100 hover:text-primary cursor-pointer rounded-lg " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (item === null || item === void 0 ? void 0 : item.categoryId) ? " bg-primary text-textButton" : ""),
@@ -10843,7 +11510,9 @@ var Products11 = function Products11(props) {
       onClick: function onClick() {
         handleChooseCategory(item);
       }
-    }, item === null || item === void 0 ? void 0 : item.cateName);
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-2"
+    }, item === null || item === void 0 ? void 0 : item.cateName));
   })) : null), /*#__PURE__*/React__default.createElement("div", {
     className: "md:col-span-3 flex flex-col gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10856,11 +11525,11 @@ var Products11 = function Products11(props) {
         handleFilter(item);
       }
     }, item === null || item === void 0 ? void 0 : item.label);
-  })), loading && firstLoading ? /*#__PURE__*/React__default.createElement("div", {
+  })), loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "w-full h-96 mb-1 flex justify-center items-center"
   }, /*#__PURE__*/React__default.createElement(Loading, null)) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6 lg:gap-8"
-  }, (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.length) > 0 ? productsFilter === null || productsFilter === void 0 ? void 0 : (_productsFilter$slice = productsFilter.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _productsFilter$slice === void 0 ? void 0 : _productsFilter$slice.map(function (product, index) {
+    className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6 xl:gap-8"
+  }, (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.length) > 0 ? productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo),
       Link: Link,
@@ -10884,26 +11553,6 @@ var Products11 = function Products11(props) {
   }) : null)));
 };
 
-var ProductItem9 = function ProductItem9(props) {
-  var _product$productInfo;
-  var product = props.product;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex border-b border-stroke items-center py-4"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "!w-24 rounded-lg"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "ml-4 flex-1"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl"
-  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), product !== null && product !== void 0 && product.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-2"
-  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product === null || product === void 0 ? void 0 : product.productInfo,
-    priceClassName: "!font-normal text-lg"
-  })) : null));
-};
-
 var Products12 = function Products12(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -10936,15 +11585,19 @@ var Products12 = function Products12(props) {
     });
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-6"
+    className: SECTION_CLASS + " w-full flex flex-col gap-6"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement(CarouselItem, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "!overflow-hidden max-w-[80%] md:max-w-[67%] pt-2"
+  }, /*#__PURE__*/React__default.createElement(CarouselItem, {
     isNavigateButton: false,
     data: categories,
     onClick: handleFilterByCategory
-  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+  }))), loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-full justify-center p-12"
   }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-x-12"
@@ -10953,12 +11606,70 @@ var Products12 = function Products12(props) {
       key: index,
       Link: Link,
       href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
-    }, /*#__PURE__*/React__default.createElement(ProductItem9, {
+    }, /*#__PURE__*/React__default.createElement(ProductItem10, {
       product: product
     }));
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)));
 };
 
+var Products14 = function Products14(props) {
+  var _products$slice;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
+  var _ProductDetailControl = ProductDetailController(props),
+    product = _ProductDetailControl.product;
+  var _useState = React.useState(false),
+    isAutoGetList = _useState[0],
+    setIsAutoGetList = _useState[1];
+  var _useState2 = React.useState({
+      size: 12,
+      categoryId: product === null || product === void 0 ? void 0 : product.categoryId
+    }),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params,
+      isAutoGetList: isAutoGetList
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  React.useEffect(function () {
+    if (product !== null && product !== void 0 && product.categoryId) {
+      setParams(function (prev) {
+        return _extends({}, prev, {
+          categoryId: product === null || product === void 0 ? void 0 : product.categoryId
+        });
+      });
+      setIsAutoGetList(true);
+    }
+  }, [product]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-6 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product,
+      key: "zjk-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
+};
+
 var ProductCategory2 = function ProductCategory2(props) {
   var _products$slice;
   var _props$Link = props.Link,
@@ -11110,7 +11821,11 @@ var ProductSearch1 = function ProductSearch1(props) {
       isAutoGetList: isAutoGetList
     })),
     products = _ProductController.products,
-    loading = _ProductController.loading;
+    loading = _ProductController.loading,
+    page = _ProductController.page;
+  var _useState5 = React.useState({}),
+    filterValue = _useState5[0],
+    setFilterValue = _useState5[1];
   React.useEffect(function () {
     setIsAutoGetList(true);
     setParams(function (prev) {
@@ -11120,8 +11835,16 @@ var ProductSearch1 = function ProductSearch1(props) {
     });
   }, [keywordValue]);
   React.useEffect(function () {
-    if ((products === null || products === void 0 ? void 0 : products.length) > 0) setProductsFilter(products);else {
-      setProductsFilter([]);
+    if ((filterValue === null || filterValue === void 0 ? void 0 : filterValue.value) === "discount") {
+      var _productsCopy;
+      var productsCopy = [].concat(products);
+      productsCopy = (_productsCopy = productsCopy) === null || _productsCopy === void 0 ? void 0 : _productsCopy.filter(function (product) {
+        var _product$productInfo, _product$productInfo2, _product$productInfo3;
+        return (product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo3 = product.productInfo) === null || _product$productInfo3 === void 0 ? void 0 : _product$productInfo3.price);
+      });
+      setProductsFilter(productsCopy);
+    } else {
+      setProductsFilter(products);
     }
   }, [products]);
   var handleGetMoreProducts = function handleGetMoreProducts() {
@@ -11133,10 +11856,13 @@ var ProductSearch1 = function ProductSearch1(props) {
     });
   };
   var handleFilter = function handleFilter(item) {
-    if ((item === null || item === void 0 ? void 0 : item.value) === "discount") {
+    setFilterValue(item);
+    if ((item === null || item === void 0 ? void 0 : item.value) === "discount" && !(params !== null && params !== void 0 && params.isHighlight)) {
+      var _productsCopy2;
       var productsCopy = [].concat(products);
-      productsCopy === null || productsCopy === void 0 ? void 0 : productsCopy.filter(function (product) {
-        return (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price);
+      productsCopy = (_productsCopy2 = productsCopy) === null || _productsCopy2 === void 0 ? void 0 : _productsCopy2.filter(function (product) {
+        var _product$productInfo4, _product$productInfo5, _product$productInfo6;
+        return (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo6 = product.productInfo) === null || _product$productInfo6 === void 0 ? void 0 : _product$productInfo6.price);
       });
       setProductsFilter(productsCopy);
     } else if ((item === null || item === void 0 ? void 0 : item.value) === "isHighlight") {
@@ -11161,7 +11887,7 @@ var ProductSearch1 = function ProductSearch1(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg"
-  }, "T\u1EEB kh\xF3a \"", keywordValue, "\" (", products === null || products === void 0 ? void 0 : products.length, " s\u1EA3n ph\u1EA9m)"), /*#__PURE__*/React__default.createElement(CarouselItem, {
+  }, "T\u1EEB kh\xF3a \"", keywordValue, "\" (", page === null || page === void 0 ? void 0 : page.total_elements, " s\u1EA3n ph\u1EA9m)"), /*#__PURE__*/React__default.createElement(CarouselItem, {
     data: listFilter$1,
     isNavigateButton: false,
     onClick: handleFilter
@@ -11555,12 +12281,12 @@ var ProductDetail10 = function ProductDetail10(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " mt-0 md:mt-0 mb-0 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "" : "px-4 md:px-6") + " py-4 md:py-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 md:gap-6 bg-bgSecondary"
+    className: ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "" : "px-4 md:px-6") + " py-4 md:py-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 gap-3 md:gap-6 bg-bgSecondary"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-4 col-span-2 "
+    className: "flex flex-col gap-4 md:col-span-2 "
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
-    className: "w-full border rounded-2xl p-2 bg-background aspect-square object-contain rounded-2xl "
+    className: "w-full border bg-background aspect-square object-contain rounded-2xl "
   }) : /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-center items-center w-full border rounded-2xl aspect-square",
     style: {
@@ -11571,19 +12297,19 @@ var ProductDetail10 = function ProductDetail10(props) {
     height: "25%",
     fill: "#D9D9D9"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer h-16 w-16 rounded-lg bg-background\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 "),
+      className: "cursor-pointer h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full aspect-square rounded-md lg:rounded-lg bg-background object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 "),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
     });
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-3"
+    className: "md:col-span-3 "
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "font-semibold text-2xl"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -11597,7 +12323,7 @@ var ProductDetail10 = function ProductDetail10(props) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "min-w-24"
     }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex gap-2"
+      className: "flex flex-wrap gap-2"
     }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
       return /*#__PURE__*/React__default.createElement("button", {
         key: i,
@@ -11649,7 +12375,7 @@ var ProductDetail10 = function ProductDetail10(props) {
       __html: product === null || product === void 0 ? void 0 : product.description
     }
   }), !isSeeMore && !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
-    className: "h-10 relative -mt-10 rounded-b-lg",
+    className: "h-28 relative -mt-28 rounded-b-lg",
     style: {
       background: "linear-gradient(to top, #81818169  0%, #00000003 50%)"
     }
@@ -11794,7 +12520,7 @@ var ProductDetail11 = function ProductDetail11(props) {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer px-3 py-2 !h-24 !w-24 object-cover rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
+      className: "cursor-pointer px-3 py-2 !h-24 !w-24 object-contain aspect-square rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -11826,7 +12552,7 @@ var ProductDetail11 = function ProductDetail11(props) {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer px-2 py-1 !h-24 !w-24 object-cover rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
+      className: "cursor-pointer px-2 py-1 !h-24 !w-24 object-contain rounded-lg aspect-square\n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -11846,7 +12572,7 @@ var ProductDetail11 = function ProductDetail11(props) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "min-w-24 my-auto"
     }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex gap-2"
+      className: "flex flex-wrap gap-2"
     }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
       return /*#__PURE__*/React__default.createElement("button", {
         key: i,
@@ -11958,7 +12684,7 @@ var Booking1 = function Booking1(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-12"
-  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, /*#__PURE__*/React__default.createElement(BookingForm$1, {
     shopConfigStyle: shopConfigStyle,
     shopConfig: shopConfig,
     className: "!bg-bgSecondary"
@@ -12000,7 +12726,7 @@ var BookingForm6 = function BookingForm6(props) {
     className: "w-full h-auto"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-4 whitespace-pre-line"
-  }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description)), /*#__PURE__*/React__default.createElement(BookingForm, {
+  }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description)), /*#__PURE__*/React__default.createElement(BookingForm$1, {
     shopConfigStyle: shopConfigStyle,
     shopConfig: shopConfig,
     className: "col-span-2"
@@ -12244,7 +12970,7 @@ var BookingFoodForm = function BookingFoodForm(props) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "text-center"
   }, /*#__PURE__*/React__default.createElement(Button, {
-    label: "Đặt lịch ngay",
+    label: "Đặt bàn ngay",
     shopConfigStyle: shopConfigStyle,
     onClick: handleSubmit
   }))) : null, isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
@@ -12261,7 +12987,7 @@ var BookingFoodForm = function BookingFoodForm(props) {
     }
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium text-2xl"
-  }, "\u0110\u1EB7t l\u1ECBch th\xE0nh c\xF4ng"), /*#__PURE__*/React__default.createElement("div", {
+  }, "\u0110\u1EB7t b\xE0n th\xE0nh c\xF4ng"), /*#__PURE__*/React__default.createElement("div", {
     className: "text-center"
   }, "Ch\xFAng t\xF4i \u0111\xE3 ghi nh\u1EADn th\xF4ng tin c\u1EE7a b\u1EA1n v\xE0 s\u1EBD li\xEAn h\u1EC7 l\u1EA1i ngay"))));
 };
@@ -12283,7 +13009,7 @@ var BookingTable1 = function BookingTable1(props) {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 md:mt-12 grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-12"
+    className: "mt-6 md:mt-12 grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-12"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: convertURL(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", {
@@ -12294,13 +13020,13 @@ var BookingTable1 = function BookingTable1(props) {
     }
   })) : /*#__PURE__*/React__default.createElement("img", {
     src: data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : (_data$data5$ = _data$data5[0]) === null || _data$data5$ === void 0 ? void 0 : _data$data5$.srcImage,
-    className: "w-full h-auto"
+    className: "w-full h-full lg:h-auto object-cover rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-4 whitespace-pre-line"
   }, data === null || data === void 0 ? void 0 : (_data$data6 = data.data) === null || _data$data6 === void 0 ? void 0 : (_data$data6$ = _data$data6[0]) === null || _data$data6$ === void 0 ? void 0 : _data$data6$.description)), /*#__PURE__*/React__default.createElement(BookingFoodForm, {
     shopConfigStyle: shopConfigStyle,
     shopConfig: shopConfig,
-    className: "col-span-2"
+    className: "md:col-span-2"
   })));
 };
 
@@ -12412,6 +13138,30 @@ var Banner3 = function Banner3(props) {
   }));
 };
 
+var Banner4 = function Banner4(props) {
+  var _data$data, _data$data$, _data$data2, _data$data2$slice;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS_PADDING + " grid grid-cols-1 bg-bgSecondary md:grid-cols-3 gap-6"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.srcImage,
+    className: "md:col-span-2 object-cover w-full h-full rounded-[10px]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-6"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$slice = _data$data2.slice(1, 3)) === null || _data$data2$slice === void 0 ? void 0 : _data$data2$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      key: "djsd-" + index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "object-cover w-full h-full rounded-xl"
+    }));
+  })));
+};
+
 var Banner7 = function Banner7(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -12483,7 +13233,7 @@ var Partner1 = function Partner1(props) {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-4 md:grid-cols-6 gap-6 mt-4 md:mt-6 p-6 rounded-xl",
+    className: "grid grid-cols-4 md:grid-cols-6 gap-6 mt-4 md:mt-6 p-4 md:p-6 rounded-xl",
     style: {
       background: bgSecondary
     }
@@ -13037,7 +13787,9 @@ var Footer7 = function Footer7(props) {
     style: {
       background: primary
     }
-  }))))), /*#__PURE__*/React__default.createElement("hr", null), /*#__PURE__*/React__default.createElement("div", {
+  }))))), /*#__PURE__*/React__default.createElement("hr", {
+    className: "mt-12"
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "py-4"
   }, /*#__PURE__*/React__default.createElement("small", {
     className: "me-5"
@@ -13057,24 +13809,26 @@ var RatingStar = function RatingStar(props) {
     star = _props$star === void 0 ? 5 : _props$star,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "#E2B93B" : _props$color,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className;
   var res = [];
   for (var i = 1; i <= star; i++) {
     res.push(/*#__PURE__*/React__default.createElement(fa6.FaStar, {
-      color: "#E2B93B"
+      color: color
     }));
-    if (i > 5) break;
+    if (i >= 5) break;
   }
   var decimalPart = star % 1;
   if (decimalPart && decimalPart >= 0.5) {
     res.push(/*#__PURE__*/React__default.createElement(fa6.FaRegStarHalfStroke, {
-      color: "#E2B93B"
+      color: color
     }));
   }
   for (var _i = res === null || res === void 0 ? void 0 : res.length; _i < 5; _i++) {
     res.push(/*#__PURE__*/React__default.createElement(fa6.FaRegStar, {
-      color: "#E2B93B"
+      color: color
     }));
   }
   return /*#__PURE__*/React__default.createElement("div", {
@@ -13244,9 +13998,9 @@ var CustomerRating8 = function CustomerRating8(props) {
       src: item === null || item === void 0 ? void 0 : item.avatar,
       className: "w-40 h-40 rounded-full object-cover border-8 border-stroke"
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "text-xl text-primary"
+      className: "text-xl text-primary text-center"
     }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", {
-      className: "text-gray3"
+      className: "text-gray3 text-center"
     }, item === null || item === void 0 ? void 0 : item.description), /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-2 "
     }, /*#__PURE__*/React__default.createElement(ri.RiDoubleQuotesL, {
@@ -13261,6 +14015,58 @@ var CustomerRating8 = function CustomerRating8(props) {
   }))));
 };
 
+var CustomerRating9 = function CustomerRating9(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  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("div", {
+    className: "mt-12 grid grid-cols-1 lg:grid-cols-3 gap-6"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "flex bg-primary pt-16 px-6 pb-6"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "bg-background relative"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex justify-between items-center pr-4 w-full absolute top-[-40px]"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-[#A85A09]"
+    }, /*#__PURE__*/React__default.createElement("svg", {
+      width: "39",
+      height: "28",
+      viewBox: "0 0 39 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M34.5852 25.8793C34.9242 26.5446 34.4409 27.3333 33.6942 27.3333H27.7867C27.4106 27.3333 27.0664 27.1223 26.8957 26.7873L21.7391 16.6666V3.66663C21.7391 2.00977 23.0822 0.666626 24.7391 0.666626H35.0435C36.7003 0.666626 38.0435 2.00977 38.0435 3.66663V16.6666H29.8913L34.5852 25.8793ZM12.8461 25.8793C13.185 26.5446 12.7017 27.3333 11.955 27.3333H6.0475C5.67146 27.3333 5.3272 27.1223 5.15649 26.7873L-0.000110626 16.6666V3.66663C-0.000110626 2.00977 1.34304 0.666626 2.99989 0.666626H13.3043C14.9611 0.666626 16.3043 2.00977 16.3043 3.66663V16.6666H8.15208L12.8461 25.8793Z",
+      fill: "currentColor"
+    }))), /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.avatar,
+      className: " w-20 object-cover h-20 rounded-full"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "p-4 flex flex-col gap-2"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-lg text-textHeading md:text-2xl"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", {
+      className: "w-full border border-secondary"
+    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement("div", {
+      className: "ms-auto"
+    }, /*#__PURE__*/React__default.createElement(RatingStar, {
+      star: (item === null || item === void 0 ? void 0 : item.rate) || 5,
+      color: "#A85A09"
+    })))));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -13435,7 +14241,7 @@ var Gallery1 = function Gallery1(props) {
   }));
 };
 
-var Gallery1$1 = function Gallery1(props) {
+var Gallery2 = function Gallery2(props) {
   var _data$data, _data$data$slice, _data$data2, _data$data2$slice, _data$data3, _data$data3$slice;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -13455,25 +14261,49 @@ var Gallery1$1 = function Gallery1(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$slice = _data$data.slice(0, 2)) === null || _data$data$slice === void 0 ? void 0 : _data$data$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl"
     });
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2 md:gap-4"
   }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$slice = _data$data2.slice(2, 4)) === null || _data$data2$slice === void 0 ? void 0 : _data$data2$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl odd:h-[130%]"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl odd:h-[130%]"
     });
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2 md:gap-4"
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$slice = _data$data3.slice(4, 6)) === null || _data$data3$slice === void 0 ? void 0 : _data$data3$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl even:h-[130%]"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl even:h-[130%]"
     });
   })))));
 };
 
+var Gallery3 = function Gallery3(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  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("div", {
+    className: "grid grid-cols-3 gap-2 md:gap-6 mt-6 md:mt-12"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      key: "iggdf-" + index,
+      className: (index === 1 || index === 5 ? "col-span-2" : "") + " w-full h-full object-cover"
+    });
+  }))));
+};
+
 var PageTitle1 = function PageTitle1(props) {
   var _sectionData$;
   var data = props.data,
@@ -13504,13 +14334,13 @@ var PageTitle2 = function PageTitle2(props) {
       backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
+    className: "absolute top-0 w-full h-full bg-black/60 z-0"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full p-20 z-10 flex flex-col gap-6 items-center justify-center"
+    className: "relative w-full p-10 lg:p-20 z-10 flex flex-col gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("h2", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
   }, data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : route === null || route === void 0 ? void 0 : route.label), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-lg md:text-2xl text-white"
+    className: "text-lg md:text-2xl text-white text-center"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null));
 };
 
@@ -13591,9 +14421,9 @@ var PageTitle3 = function PageTitle3(props) {
       backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute top-0 w-full h-full bg-black opacity-60 z-0"
+    className: "absolute top-0 w-full h-full bg-black/60 z-0"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full p-20 z-10 flex flex-col items-center justify-center"
+    className: "relative w-full pt-8 md:p-2 md:p-12 lg:p-20 z-10 flex flex-col items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("h2", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
   }, route === null || route === void 0 ? void 0 : (_route$route = route.route) === null || _route$route === void 0 ? void 0 : (_route$route$split = _route$route.split("/")) === null || _route$route$split === void 0 ? void 0 : (_route$route$split$fi = _route$route$split.filter(function (e) {
@@ -14066,6 +14896,10 @@ var FormCheckout = React.forwardRef(function (props, ref) {
   })));
 });
 
+var dayjs_min = createCommonjsModule(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
+});
+
 var OrderControllerWithoutLogin = function OrderControllerWithoutLogin(props) {
   _objectDestructuringEmpty(props);
   var draftOrderWithoutLogin = function draftOrderWithoutLogin(shopId, dataOrder) {
@@ -14735,7 +15569,7 @@ var SearchBar6 = function SearchBar6(props) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full flex flex-col justify-center px-3 md:px-6 gap-2 md:gap-4 lg:gap-6 items-center h-40 lg:h-52 ",
+    className: "w-full flex flex-col justify-center px-3 md:px-6 gap-2 md:gap-4 lg:gap-6 items-center py-6 md:py-12 lg:px-20",
     style: {
       background: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.srcImage) + ")",
       backgroundPosition: "center",
@@ -14948,7 +15782,7 @@ var ShopHighlights8 = function ShopHighlights8(props) {
       className: "flex flex-col h-full gap-3"
     }, /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "object-cover"
+      className: "object-cover rounded-lg"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "text-2xl text-textBody"
     }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
@@ -14957,6 +15791,89 @@ var ShopHighlights8 = function ShopHighlights8(props) {
   })));
 };
 
+var ShopHighlights9 = function ShopHighlights9(props) {
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-6 md:gap-10"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-x-12 lg:gap-y-6"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      key: "kdf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col md:flex-row h-full gap-4"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "object-cover rounded-lg w-full md:min-w-60 md:max-w-60"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-2"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-lg font-semibold text-textHeading"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "w-1/3 border border-stroke"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex-grow text-textBody leading-relaxed"
+    }, item === null || item === void 0 ? void 0 : item.description))));
+  })));
+};
+
+var ShopHighlights10 = function ShopHighlights10(props) {
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "pt-10"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative overflow-hidden w-full"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 1440 105",
+    className: "text-[#FFE7CC] w-[105%]",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M439.5 55.3739C216.5 71.3734 77 37.8735 0 0.747667V104.606H1440C1410.56 83.7584 1313.93 35.6959 1162.92 10.2239C974.151 -21.6161 726.714 34.7672 439.5 55.3739Z",
+    fill: "currentColor"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary w-[105%] absolute top-2"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 1440 104",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M439.5 54.6864C216.5 70.6859 77 37.186 0 0.0601582V103.918H1440C1410.56 83.0709 1313.93 35.0084 1162.92 9.53638C974.151 -22.3036 726.714 34.0797 439.5 54.6864Z",
+    fill: "currentColor"
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " mt-0 md:mt-0 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-4 bg-primary py-10"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
+      key: "kdf-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col h-full gap-6"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-3 items-center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-2xl text-center text-textButton"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex-grow text-lg leading-relaxed  text-center text-textSecondary"
+    }, item === null || item === void 0 ? void 0 : item.description)), /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "h-56 lg:h-72 object-cover mt-auto border-4 border-secondary"
+    })));
+  })));
+};
+
 var VideoFull1 = function VideoFull1(props) {
   var _data$data, _data$data$;
   var shopConfigStyle = props.shopConfigStyle,
@@ -15044,11 +15961,6 @@ var NewsController = function NewsController(props) {
             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);
-            var url = new URL(window.location.href);
-            if (/^(\/(tin-tuc-theo-danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
-              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
-              window.history.replaceState({}, '', url.pathname + url.search);
-            }
           }
           setLoading(false);
         });
@@ -15282,7 +16194,8 @@ var News1 = function News1(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
-    catId = props.catId;
+    _props$catId = props.catId,
+    catId = _props$catId === void 0 ? "" : _props$catId;
   var _useState = React.useState({
       page: 0,
       sort: "timeUpdate,DESC",
@@ -15322,6 +16235,18 @@ var News1 = function News1(props) {
       setCategorySelected(category);
     }
   }, [newsCategories]);
+  var handleSelectedCateogry = function handleSelectedCateogry(item) {
+    if (catId) {
+      var newUrl = getLinkNewsByCategory(item);
+      window.history.replaceState(null, '', newUrl);
+    }
+    setCategorySelected(item);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        catId: item === null || item === void 0 ? void 0 : item.catId
+      });
+    });
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15342,12 +16267,7 @@ var News1 = function News1(props) {
       className: "px-6 hover:bg-gray-100 hover:text-primary cursor-pointer " + ((item === null || item === void 0 ? void 0 : item.catId) === (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catId) ? "bg-gray-100 text-primary" : "") + " ",
       key: "sdjfdh-" + index,
       onClick: function onClick() {
-        setCategorySelected(item);
-        setParams(function (prev) {
-          return _extends({}, prev, {
-            catId: item === null || item === void 0 ? void 0 : item.catId
-          });
-        });
+        handleSelectedCateogry(item);
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "border-b border-dashed py-4 " + ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) - 1 === index ? "border-b-0" : "")
@@ -15401,12 +16321,7 @@ var News1 = function News1(props) {
       className: "px-4 hover:bg-gray-100 hover:text-primary cursor-pointer " + ((item === null || item === void 0 ? void 0 : item.catId) === (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catId) ? "bg-gray-100 text-primary" : "") + " ",
       key: "sdjfdh-" + index,
       onClick: function onClick() {
-        setCategorySelected(item);
-        setParams(function (prev) {
-          return _extends({}, prev, {
-            catId: item === null || item === void 0 ? void 0 : item.catId
-          });
-        });
+        handleSelectedCateogry(item);
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "border-b border-dashed py-4 " + ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) - 1 === index ? "border-b-0" : "")
@@ -15565,6 +16480,7 @@ exports.Address1 = Address1;
 exports.Banner1 = Banner1;
 exports.Banner2 = Banner2;
 exports.Banner3 = Banner3;
+exports.Banner4 = Banner4;
 exports.Banner7 = Banner7;
 exports.BannerFull1 = BannerFull1;
 exports.BannerFull2 = BannerFull2;
@@ -15580,6 +16496,7 @@ exports.CustomerRating10 = CustomerRating10;
 exports.CustomerRating5 = CustomerRating5;
 exports.CustomerRating6 = CustomerRating6;
 exports.CustomerRating8 = CustomerRating8;
+exports.CustomerRating9 = CustomerRating9;
 exports.DateTimePicker = DateTimePicker;
 exports.Employees1 = Employees1;
 exports.Features2 = Features2;
@@ -15587,12 +16504,16 @@ exports.Features3 = Features3;
 exports.Footer1 = Footer1;
 exports.Footer7 = Footer7;
 exports.Gallery1 = Gallery1;
-exports.Gallery2 = Gallery1$1;
+exports.Gallery2 = Gallery2;
+exports.Gallery3 = Gallery3;
 exports.Hero1 = Hero1;
 exports.Hero10 = Hero10;
 exports.Hero11 = Hero11;
 exports.Hero12 = Hero12;
 exports.Hero13 = Hero13;
+exports.Hero14 = Hero14;
+exports.Hero15 = Hero15;
+exports.Hero16 = Hero16;
 exports.Hero2 = Hero2;
 exports.Hero5 = Hero5;
 exports.Hero6 = Hero6;
@@ -15616,6 +16537,8 @@ exports.ProductHighlight1 = ProductHighlight1;
 exports.ProductHot1 = ProductHot1;
 exports.ProductHot3 = ProductHot3;
 exports.ProductImage = ProductImage;
+exports.ProductItem10 = ProductItem10;
+exports.ProductItem11 = ProductItem11;
 exports.ProductItem2 = ProductItem2;
 exports.ProductItem3 = ProductItem3;
 exports.ProductItem4 = ProductItem4;
@@ -15623,6 +16546,7 @@ exports.ProductItem5 = ProductItem5;
 exports.ProductItem6 = ProductItem6;
 exports.ProductItem7 = ProductItem7;
 exports.ProductItem8 = ProductItem8;
+exports.ProductItem9 = ProductItem9;
 exports.ProductList5 = ProductList5;
 exports.ProductList7 = ProductList7;
 exports.ProductSale2 = ProductSale2;
@@ -15630,6 +16554,7 @@ exports.ProductSearch1 = ProductSearch1;
 exports.Products10 = Products10;
 exports.Products11 = Products11;
 exports.Products12 = Products12;
+exports.Products14 = Products14;
 exports.Products2 = Products2;
 exports.Products3 = Products3;
 exports.Products9 = Products9;
@@ -15642,13 +16567,16 @@ exports.SectionTitle1 = SectionTitle1;
 exports.SectionTitle2 = SectionTitle2;
 exports.SectionTitle3 = SectionTitle3;
 exports.SectionTitle4 = SectionTitle4;
+exports.SectionTitle5 = SectionTitle5;
 exports.Select = Select$1;
 exports.ServiceDetail1 = ServiceDetail1;
+exports.ShopHighlights10 = ShopHighlights10;
 exports.ShopHighlights2 = ShopHighlights2;
 exports.ShopHighlights5 = ShopHighlights5;
 exports.ShopHighlights6 = ShopHighlights6;
 exports.ShopHighlights7 = ShopHighlights7;
 exports.ShopHighlights8 = ShopHighlights8;
+exports.ShopHighlights9 = ShopHighlights9;
 exports.TextArea = TextArea;
 exports.TreatmentDetail1 = TreatmentDetail1;
 exports.TreatmentItem1 = TreatmentItem1;