s-platform-landing-section 0.1.34 → 0.1.36-beta.1

package/dist/index.modern.js

@@ -6,18 +6,19 @@ import { RxCross2 } from 'react-icons/rx';
 import { PiHandHeartBold } from 'react-icons/pi';
 import { TbCategory } from 'react-icons/tb';
 import { SiZalo } from 'react-icons/si';
-import { IoIosStar, IoIosArrowBack, IoIosArrowForward, IoMdCheckmark, IoIosHeartEmpty, IoMdCheckmarkCircleOutline } from 'react-icons/io';
-import { FaMinus, FaRegEyeSlash, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
-import 'react-icons/ci';
-import { BsCurrencyDollar } from 'react-icons/bs';
+import { IoIosStar, IoMdCheckmark, IoIosHeartEmpty, IoIosArrowBack, IoIosArrowForward, IoMdCheckmarkCircleOutline } from 'react-icons/io';
+import { MdKeyboardDoubleArrowRight } from 'react-icons/md';
+import { FaMinus, FaRegEyeSlash, FaPlus, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
+import { AiOutlinePhone, AiOutlineShoppingCart, AiOutlineInfoCircle } from 'react-icons/ai';
 import { LuSearch, LuShoppingCart, LuShoppingBag } from 'react-icons/lu';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { AiOutlineShoppingCart, AiOutlineInfoCircle, AiOutlinePhone } from 'react-icons/ai';
+import { BsCurrencyDollar } from 'react-icons/bs';
 import { GoCreditCard, GoClock } from 'react-icons/go';
+import { GrPowerCycle } from 'react-icons/gr';
 import { RiMessengerFill, RiDoubleQuotesL, RiDeleteBin7Line } from 'react-icons/ri';
 import { HiOutlineLocationMarker, HiOutlineArrowNarrowLeft, HiOutlineArrowNarrowRight } from 'react-icons/hi';
 import { GiNewspaper } from 'react-icons/gi';
@@ -947,7 +948,7 @@ var SectionTitle2 = function SectionTitle2(props) {
   }), /*#__PURE__*/React__default.createElement(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);
 };
 
@@ -974,10 +975,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(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 = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1210,21 +1228,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"
-  }, /*#__PURE__*/React__default.createElement("img", {
+    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,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName,
     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"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-medium line-clamp-1 ",
+  }) : null, /*#__PURE__*/React__default.createElement("div", {
+    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)));
 };
 
@@ -1236,13 +1255,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)));
 };
 
@@ -1258,21 +1280,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, {
@@ -1319,13 +1340,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", {
@@ -1353,11 +1377,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"
+    }));
   })));
 };
 
@@ -1383,113 +1412,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 = useRef(null);
-  var _useState = useState(false),
-    canScrollLeft = _useState[0],
-    setCanScrollLeft = _useState[1];
-  var _useState2 = useState(false),
-    canScrollRight = _useState2[0],
-    setCanScrollRight = _useState2[1];
-  var _useState3 = useState({}),
-    value = _useState3[0],
-    setValue = _useState3[1];
-  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(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(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";
@@ -1509,6 +1431,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);
@@ -7600,6 +7535,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}$/
 };
@@ -7697,101 +7640,272 @@ var Hero13 = function Hero13(props) {
   var _sectionData$, _sectionData$$srcImag, _data$data, _data$data$;
   var listRef = useRef(null);
   var _useState = 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(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(FaFacebookMessenger, {
+    size: 32
+  })))), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage) || "#",
+    target: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? "_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(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 = useState([]),
-    products = _useState[0],
-    setProducts = _useState[1];
+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 = 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(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 = useState([]),
+    products = _useState[0],
+    setProducts = _useState[1];
   var _useState2 = useState(false),
     loading = _useState2[0],
     setLoading = _useState2[1];
@@ -7813,8 +7927,6 @@ var ProductController = function ProductController(props) {
       setLoading(true);
       var _temp = _catch(function () {
         var filterParams = _extends({}, defaultParams, params);
-        console.log("filterParams params", params);
-        console.log("filterParams", filterParams);
         return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, filterParams)).then(function (res) {
           var _res$data, _res$data$status;
           if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
@@ -8158,33 +8270,34 @@ var ProductPrice = function ProductPrice(props) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: className
+    className: "flex gap-4 flex-wrap " + className
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "text-primary font-semibold  mr-4 " + priceClassName,
+    className: "text-primary font-semibold " + priceClassName,
     style: style
   }, displayPrice), displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-gray3 line-through " + priceBeforeDiscountClassName + " "
-  }, "200,000\u0111") : null);
+  }, displayPriceBeforeDiscount) : null);
 };
 
 var ProductItem1 = function ProductItem1(props) {
+  var _product$productInfo, _product$productInfo2;
   var product = props.product;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
     className: "!w-20 rounded-lg"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "ml-4 border-b border-stroke flex-1"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
+  }, 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("div", {
     className: "flex mt-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex-1 text-gray3"
-  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product
-  }))));
+  }, getDurationValue(product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.attributes)), product !== null && product !== void 0 && product.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo
+  }) : null)));
 };
 
 var Dash = function Dash(props) {
@@ -8224,6 +8337,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,
@@ -8236,7 +8350,8 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
     _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
   var _useState = useState({
-      types: "1"
+      types: "1,10",
+      size: 12
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -8253,15 +8368,27 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
   var _useState2 = useState(0),
     selectedCategory = _useState2[0],
     setSelectedCategory = _useState2[1];
+  var _useState3 = useState(true),
+    isGetMore = _useState3[0],
+    setIsGetMore = _useState3[1];
   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, {
@@ -8278,25 +8405,32 @@ 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,
       href: getLinkServiceDetail(product === null || product === void 0 ? void 0 : product.productInfo)
     }, /*#__PURE__*/React__default.createElement(ProductItem1, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+      product: product
     }));
   })) : /*#__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
   }));
 };
@@ -8314,7 +8448,7 @@ var TreatmentsList6 = function TreatmentsList6(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
   var _useState = useState({
       size: 12,
-      types: "1"
+      types: "1,10"
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -8347,10 +8481,12 @@ var TreatmentsList6 = function TreatmentsList6(props) {
     return /*#__PURE__*/React__default.createElement(TreatmentItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "htrhr-" + idx
     });
-  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, {
+    text: "d\u1ECBch v\u1EE5"
+  }), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem thêm",
     onClick: handleGetMoreProducts,
     className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
@@ -8511,77 +8647,173 @@ var BookingController = function BookingController(props) {
   };
 };
 
-var Select = forwardRef(function (props, ref) {
+var DateTimePicker = 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 = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var selectRef = 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 = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
   var _useState2 = useState(""),
     error = _useState2[0],
     _setError = _useState2[1];
-  var _useState3 = useState(""),
-    inputSearch = _useState3[0],
-    setInputSearch = _useState3[1];
-  var _useState4 = useState(defaultValue),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = useState(options),
-    listOptions = _useState5[0],
-    setListOptions = _useState5[1];
-  var dropdownRef = useRef(null);
-  var _useState6 = useState('bottom'),
-    dropdownPosition = _useState6[0],
-    setDropdownPosition = _useState6[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    if (isMulti) setValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(function () {
-    setListOptions(options);
-    if (!isMulti) setValue(defaultValue);
-  }, [options]);
-  useEffect(function () {
-    var delayDebounceFn = setTimeout(function () {
-      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
-    }, 500);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
-  }, [inputSearch]);
-  useEffect(function () {
+  var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
+  var CustomInput = 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);
+  });
+  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 = 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 = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = useRef(null);
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = useRef(null);
+  var _useState6 = useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+    }, 600);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [inputSearch]);
+  useEffect(function () {
     var _inputRef$current;
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     var updateDropdownPosition = function updateDropdownPosition() {
@@ -8658,20 +8890,13 @@ var Select = 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);
@@ -8707,7 +8932,7 @@ var Select = forwardRef(function (props, ref) {
   }, 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 " + className
+    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,
@@ -8770,103 +8995,6 @@ var Select = forwardRef(function (props, ref) {
 });
 var Select$1 = memo(Select);
 
-var DateTimePicker = 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 = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = 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 = 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);
-  });
-  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 = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -9015,150 +9143,312 @@ var InputPhoneNumber = 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];
-      }
-    }
-    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 Select$2 = 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 = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = useRef(null);
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = useRef(null);
+  var _useState6 = useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = useRef(null);
+  var _useState7 = useState(12),
+    nextTrigger = _useState7[0],
+    setNextTrigger = _useState7[1];
+  var optionRef = useRef(null);
+  useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  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);
     }
-  };
-  /* 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);
+    return function () {
+      if (optionRef.current) {
+        optionRef.current.removeEventListener('scroll', handleScroll);
       }
-      if (attributes.expires) {
-        attributes.expires = attributes.expires.toUTCString();
+    };
+  }, [listOptions, nextTrigger]);
+  useEffect(function () {
+    var delayDebounceFn = setTimeout(function () {
+      handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
+      if (optionRef.current) {
+        optionRef.current.scrollTop = 0;
       }
-
-      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
+    }, 600);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [inputSearch]);
+  useEffect(function () {
+    var _inputRef$current;
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    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');
         }
-
-        // 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)
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener('resize', updateDropdownPosition);
     }
-
-    function get (name) {
-      if (typeof document === 'undefined' || (arguments.length && !name)) {
-        return
+    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);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setError: function setError(err) {
+        return _setError(err);
       }
-
-      // 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) {}
+    };
+  });
+  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;
       }
-
-      return name ? jar[name] : jar
     }
-
-    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) }
+    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);
+    }
+  };
+  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);
+    }
+  };
+  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);
+    }
+    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
+    }
+  }), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
+    onClick: function onClick(e) {
+      handleDeleteSelection(e, value);
+    }
+  }, /*#__PURE__*/React__default.createElement(RxCross2, null)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "ms-1"
+  }, /*#__PURE__*/React__default.createElement(FaAngleUp, {
+    className: "text-xs"
+  }), /*#__PURE__*/React__default.createElement(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(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(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 = memo(Select$2);
 
 var BookingForm = function BookingForm(props) {
   var _props$shopConfig = props.shopConfig,
@@ -9175,7 +9465,8 @@ var BookingForm = function BookingForm(props) {
     isModalBooking = _props$isModalBooking === void 0 ? false : _props$isModalBooking;
   var _useState = useState(false);
   var _useState2 = useState({
-      types: "1,10"
+      types: "1,10",
+      size: 16
     }),
     productsParams = _useState2[0],
     setProductsParams = _useState2[1];
@@ -9349,6 +9640,7 @@ var BookingForm = function BookingForm(props) {
   var handleSearchProducts = function handleSearchProducts(value) {
     setProductsParams(function (prev) {
       return _extends({}, prev, {
+        size: 16,
         productName: value
       });
     });
@@ -9385,7 +9677,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,
@@ -9501,6 +9794,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 = memo(BookingForm);
 
 var TreatmentsList7 = function TreatmentsList7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -9533,8 +9827,8 @@ var TreatmentsList7 = function TreatmentsList7(props) {
       params: params
     })),
     _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("treatment1:", products);
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
   var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
     try {
       var _data$productInfo, _data$productInfo2;
@@ -9591,7 +9885,9 @@ var TreatmentsList7 = function TreatmentsList7(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 w-full"
-  }, (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(Slider, {
+  }, loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center h-20 items-center"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(Slider, {
     infinite: (products === null || products === void 0 ? void 0 : products.length) > 1 ? true : false,
     slidesToShow: 1,
     slidesToScroll: 1,
@@ -9619,7 +9915,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,
@@ -9789,7 +10085,7 @@ var ServiceDetail1 = function ServiceDetail1(props) {
     }
   }), /*#__PURE__*/React__default.createElement("p", {
     className: "text-lg mt-12 text-xl pb-1 pt-6 border-t border-stroke"
-  }, "M\xF4 t\u1EA3 s\u1EA3n ph\u1EA9m"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
+  }, "M\xF4 t\u1EA3 d\u1ECBch v\u1EE5"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
     className: "h-max"
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: descriptionRef,
@@ -9814,7 +10110,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,
@@ -9924,7 +10220,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
     }
   }), /*#__PURE__*/React__default.createElement("p", {
     className: "text-lg mt-12 text-xl pb-1 pt-6 border-t border-stroke"
-  }, "M\xF4 t\u1EA3 s\u1EA3n ph\u1EA9m"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
+  }, "M\xF4 t\u1EA3 d\u1ECBch v\u1EE5"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
     className: "h-max"
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: descriptionRef,
@@ -9949,7 +10245,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,
@@ -9960,6 +10256,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
 };
 
 var ProductItem2 = function ProductItem2(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -9967,27 +10264,29 @@ var ProductItem2 = function ProductItem2(props) {
     className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-center relative group " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
     className: "max-w-[240px] rounded-full mx-auto !object-cover"
-  }), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg mt-4"
   }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "text-lg mt-4 " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg mt-2"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
+  }, 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("div", {
     className: "absolute w-full h-full rounded-2xl top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-[rgba(0,0,0,0.5)] flex flex-col items-center justify-center gap-4"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center gap-2"
     }, "Xem chi ti\u1EBFt ", /*#__PURE__*/React__default.createElement(FaArrowRight, null))
   })), /*#__PURE__*/React__default.createElement(LinkToPage, {
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center gap-2"
@@ -9997,7 +10296,7 @@ var ProductItem2 = function ProductItem2(props) {
     type: "outline",
     className: "!border-white !text-white hover:!border-gray5"
   })), /*#__PURE__*/React__default.createElement(LinkToPage, {
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center gap-2"
@@ -10008,6 +10307,7 @@ var ProductItem2 = function ProductItem2(props) {
 };
 
 var ProductItem3 = function ProductItem3(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -10015,23 +10315,24 @@ var ProductItem3 = function ProductItem3(props) {
     className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full border border-stroke rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
     className: "w-full h-48 md:h-60 xl:h-[304px] 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", {
     className: "line-clamp-1 w-full overflow-hidden text-ellipsis"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start"
+  }, 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-lg text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
   }))));
 };
 
 var ProductItem4 = function ProductItem4(props) {
+  var _product$productInfo;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     product = props.product,
@@ -10041,17 +10342,17 @@ var ProductItem4 = function ProductItem4(props) {
     className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: getLinkProductDetail(product)
+    href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
   }, /*#__PURE__*/React__default.createElement("div", {
     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,
+    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"
   }), /*#__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.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start mt-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,
+    className: "text-lg text-start mt-2 " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex pt-2 md:pt-4 gap-2 md:gap-4 border-t items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10065,7 +10366,272 @@ var ProductItem4 = function ProductItem4(props) {
   }))));
 };
 
-var ProductItem5 = function ProductItem5(props) {
+var ProductItem5 = function ProductItem5(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-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"
+  }), /*#__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, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    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(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 ProductItem6 = function ProductItem6(props) {
+  var _product$productInfo;
+  var product = props.product,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _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 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"
+  }), /*#__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, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "text-lg text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-2 md:p-[10px] text-primary rounded-lg hover:bg-primary hover:text-textButton hover:opacity-80 border border-primary h-full w-auto flex items-center justify-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) + " "
+  }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Mua ngay",
+    className: "w-full",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var ProductItem7 = function ProductItem7(props) {
+  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"
+  })), (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$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: "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: "h-[340px] md:h-[400px] xl:h-[460px] 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, {
+    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"
+  }), /*#__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 w-full h-44 md:h-56 xl:h-60"
+  }), /*#__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(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 = useState(),
+    displayPrice = _useState[0],
+    setDisplayPrice = _useState[1];
+  var _useState2 = useState(),
+    displayPriceBeforeDiscount = _useState2[0],
+    setDisplayPriceBeforeDiscount = _useState2[1];
+  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 ProductItem11 = function ProductItem11(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -10075,17 +10641,22 @@ var ProductItem5 = function ProductItem5(props) {
     className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: getLinkProductDetail(product)
+    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-1 " + className
+    className: "w-full bg-bgSecondary " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "overflow-hidden"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
-  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "hover:scale-105 transition duration-300 ease-in-out w-full h-56 sm:h-64 lg:h-72 xl:h-[302px]"
+  })), /*#__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.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start"
+  }, 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,
+    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(AiOutlineShoppingCart, {
@@ -10094,101 +10665,11 @@ var ProductItem5 = function ProductItem5(props) {
     label: "Mua ngay",
     className: "w-full",
     shopConfigStyle: shopConfigStyle
-  }))));
-};
-
-var ProductItem6 = function ProductItem6(props) {
-  var product = props.product,
-    _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _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)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "w-full h-48 md:h-60 xl:h-72 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.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-2 md:p-[10px] text-primary rounded-lg hover:bg-primary hover:text-textButton hover:opacity-80 border border-primary h-full w-auto flex items-center justify-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) + " "
-  }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(Button, {
-    label: "Mua ngay",
-    className: "w-full",
-    shopConfigStyle: shopConfigStyle
-  }))));
-};
-
-var ProductItem7 = function ProductItem7(props) {
-  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)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full bg-bgSecondary relative rounded-2xl " + className
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 flex flex-col gap-4 items-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1 w-full overflow-hidden text-ellipsis"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start"
-  })), product !== null && product !== void 0 && product.priceBeforeDiscount && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.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.price) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null));
-};
-
-var ProductItem8 = function ProductItem8(props) {
-  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;
-  return /*#__PURE__*/React__default.createElement(LinkToPage, {
-    Link: Link,
-    href: getLinkProductDetail(product)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center rounded relative group " + className
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative "
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    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.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    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 TreatmentItem1 = function TreatmentItem1(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -10196,17 +10677,17 @@ var TreatmentItem1 = function TreatmentItem1(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
-    href: getLinkServiceDetail(product)
+    href: getLinkServiceDetail(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-1"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    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"
   }), /*#__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.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "text-lg text-start"
+  }, 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-lg text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "")
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col md:flex-row gap-2 md:items-center md:gap-6 "
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10254,7 +10735,7 @@ var ProductList7 = function ProductList7(props) {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
       key: index,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+      product: product
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), (products === null || products === void 0 ? void 0 : products.length) > 4 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: "/san-pham",
@@ -10312,13 +10793,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,
@@ -10326,6 +10807,12 @@ var Products2 = function Products2(props) {
         slidesToShow: 2,
         slidesToScroll: 2
       }
+    }, {
+      breakpoint: 370,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+      }
     }]
   };
   useEffect(function () {
@@ -10359,12 +10846,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
     }
@@ -10378,15 +10865,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 === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       Link: Link,
       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"
@@ -10431,7 +10918,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;
   };
@@ -10451,7 +10938,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(IoChevronForwardOutline, {
@@ -10493,9 +10980,7 @@ var Products3 = function Products3(props) {
     loading = _ProductController.loading,
     page = _ProductController.page;
   var _CategoryController = CategoryController(_extends({}, props, {
-      params: {
-        type: "0"
-      }
+      types: "0"
     })),
     categories = _CategoryController.categories;
   useEffect(function () {
@@ -10505,118 +10990,292 @@ var Products3 = function Products3(props) {
         categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId
       }));
     }
-  }, [categorySelected]);
-  var onSelectCategory = function onSelectCategory(category) {
-    setCategorySelected(category);
+  }, [categorySelected]);
+  var onSelectCategory = function onSelectCategory(category) {
+    setCategorySelected(category);
+  };
+  var onPageChange = function onPageChange(pageNum) {
+    setProductParams(_extends({}, productParams, {
+      page: pageNum
+    }));
+  };
+  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-1 md:grid-cols-4 gap-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden md:block"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
+    className: "overflow-y-auto max-h-96 scroll-container pr-3"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + (!(categorySelected !== null && categorySelected !== void 0 && categorySelected.categoryId) ? "text-primary" : "text-textSecondary"),
+    onClick: function onClick() {
+      return onSelectCategory({
+        categoryId: undefined
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
+    size: 24
+  }), /*#__PURE__*/React__default.createElement("div", null, "T\u1EA5t c\u1EA3")), categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (category === null || category === void 0 ? void 0 : category.categoryId) ? "text-primary" : "text-textSecondary"),
+      key: index,
+      onClick: function onClick() {
+        return onSelectCategory(category);
+      }
+    }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
+      size: 24
+    }), /*#__PURE__*/React__default.createElement("div", null, category === null || category === void 0 ? void 0 : category.cateName));
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "md:hidden"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-3 text-center"
+  }, loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full justify-center items-center p-12 h-[700px]"
+  }, /*#__PURE__*/React__default.createElement(Loading, {
+    size: 32
+  })) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 mt-12"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      key: index,
+      shopConfigStyle: shopConfigStyle,
+      product: product
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), (page === null || page === void 0 ? void 0 : page.total_pages) > 1 ? /*#__PURE__*/React__default.createElement(Pagination, _extends({
+    className: "mt-12"
+  }, page, {
+    onPageChange: onPageChange
+  })) : null))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+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 = useRef(null);
+  var _useState = useState(false),
+    canScrollLeft = _useState[0],
+    setCanScrollLeft = _useState[1];
+  var _useState2 = useState(false),
+    canScrollRight = _useState2[0],
+    setCanScrollRight = _useState2[1];
+  var _useState3 = useState({}),
+    value = _useState3[0],
+    setValue = _useState3[1];
+  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 onPageChange = function onPageChange(pageNum) {
-    setProductParams(_extends({}, productParams, {
-      page: pageNum
-    }));
+  var handleOnClick = function handleOnClick(item) {
+    setValue(item);
+    onClick === null || onClick === void 0 ? void 0 : onClick(item);
   };
-  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-1 md:grid-cols-4 gap-12"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden md:block"
+  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: "text-xl"
-  }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
-    className: "overflow-y-auto max-h-96 scroll-container pr-3"
+    className: "w-full overflow-hidden "
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + (!(categorySelected !== null && categorySelected !== void 0 && categorySelected.categoryId) ? "text-primary" : "text-textSecondary"),
+    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() {
-      return onSelectCategory({
-        categoryId: undefined
-      });
+      handleOnClick({});
     }
-  }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
-    size: 24
-  }), /*#__PURE__*/React__default.createElement("div", null, "T\u1EA5t c\u1EA3")), categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
+  }, "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: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (category === null || category === void 0 ? void 0 : category.categoryId) ? "text-primary" : "text-textSecondary"),
-      key: index,
+      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() {
-        return onSelectCategory(category);
+        handleOnClick(item);
       }
-    }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
-      size: 24
-    }), /*#__PURE__*/React__default.createElement("div", null, category === null || category === void 0 ? void 0 : category.cateName));
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "md:hidden"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-3 text-center"
-  }, loading ? /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full justify-center items-center p-12 h-[700px]"
-  }, /*#__PURE__*/React__default.createElement(Loading, {
-    size: 32
-  })) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 mt-12"
-  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem, {
-      Link: Link,
-      key: index,
-      shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
-    });
-  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), (page === null || page === void 0 ? void 0 : page.total_pages) > 1 ? /*#__PURE__*/React__default.createElement(Pagination, _extends({
-    className: "mt-12"
-  }, page, {
-    onPageChange: onPageChange
-  })) : null))), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
+    }, 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(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(IoIosArrowForward, {
+    size: 24,
+    className: "inline-block text-lg "
+  }))) : null);
 };
 
 var Products9 = function Products9(props) {
-  var _Object$keys;
+  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 = useState({
+  var _useState = useState(true),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = useState({
       size: 12
     }),
-    params = _useState[0],
-    setParams = _useState[1];
-  var _CategoryController = CategoryController(_extends({}, props)),
+    params = _useState2[0];
+  var _useState3 = 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 = useState([]),
+    categoryProducts = _useState4[0],
+    setCategoryProducts = _useState4[1];
+  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;
-  }, {});
-  console.log(groupedProducts);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-4 mt-0 md:gap-6 "
+    className: SECTION_CLASS + " flex flex-col gap-4 md:!my-6 md:gap-6 "
   }, /*#__PURE__*/React__default.createElement(CarouselItem, {
     data: categories,
     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];
@@ -10637,10 +11296,12 @@ var Products9 = function Products9(props) {
       return /*#__PURE__*/React__default.createElement(ProductItem, {
         Link: Link,
         shopConfigStyle: shopConfigStyle,
-        product: product === null || product === void 0 ? void 0 : product.productInfo,
+        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));
 };
 
@@ -10658,7 +11319,9 @@ var Products10 = function Products10(props) {
     ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link;
-  var _CategoryController = CategoryController(props),
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "0"
+    })),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
   var _ProductController = ProductController(_extends({}, props, {
@@ -10689,7 +11352,7 @@ var Products10 = function Products10(props) {
       Link: Link,
       className: "border-0 bg-bgSecondary",
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "zjk-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
@@ -10709,7 +11372,6 @@ 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,
@@ -10721,24 +11383,21 @@ var Products11 = function Products11(props) {
   var _useState = useState({
       page: 0,
       size: 12,
-      categoryId: categoryId
+      categoryId: categoryId || ""
     }),
     params = _useState[0],
     setParams = _useState[1];
-  var _useState2 = useState(true),
-    firstLoading = _useState2[0],
-    setFirstLoading = _useState2[1];
-  var _useState3 = useState({}),
-    categorySelected = _useState3[0],
-    setCategorySelected = _useState3[1];
-  var _useState4 = useState([]),
-    productsFilter = _useState4[0],
-    setProductsFilter = _useState4[1];
-  var _useState5 = useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
-    filterItem = _useState5[0],
-    setFilterItem = _useState5[1];
+  var _useState2 = useState({}),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
+  var _useState3 = useState([]),
+    productsFilter = _useState3[0],
+    setProductsFilter = _useState3[1];
+  var _useState4 = useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
+    filterItem = _useState4[0],
+    setFilterItem = _useState4[1];
   var _CategoryController = CategoryController(_extends({}, props, {
-      params: params
+      types: "0"
     })),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
@@ -10750,16 +11409,18 @@ 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) {
     setCategorySelected(category);
-    setFirstLoading(true);
     setFilterItem(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]);
     setParams(function (prev) {
       return _extends({}, prev, {
@@ -10767,6 +11428,10 @@ var Products11 = function Products11(props) {
         size: 12
       });
     });
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
   };
   useEffect(function () {
     if ((categories === null || categories === void 0 ? void 0 : categories.length) > 0 && params !== null && params !== void 0 && params.categoryId) {
@@ -10777,23 +11442,42 @@ var Products11 = function Products11(props) {
     }
   }, [categories]);
   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, {
@@ -10802,19 +11486,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 !mt-0 md:grid-cols-4 gap-6"
+    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"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4 max-h-96 overflow-y-auto"
+    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-2xl bg-bgSecondary p-4 max-h-96 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" : ""),
@@ -10822,11 +11507,13 @@ var Products11 = function Products11(props) {
       onClick: function onClick() {
         handleChooseCategory(item);
       }
-    }, item === null || item === void 0 ? void 0 : item.cateName);
-  }))), /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__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", {
-    className: "flex gap-4"
+    className: "flex gap-4 flex-wrap"
   }, listFilter === null || listFilter === void 0 ? void 0 : listFilter.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: "kgkf-" + index,
@@ -10835,11 +11522,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,
@@ -10847,11 +11534,11 @@ var Products11 = function Products11(props) {
     }, /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: product === null || product === void 0 ? void 0 : product.landingShopProductId
     }));
   }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "md:col-span-2 lg:col-span-3 mt-20 m-auto"
+    className: "col-span-2 lg:col-span-3 mt-20 m-auto"
   }, /*#__PURE__*/React__default.createElement(NotFoundProduct, null)))), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full m-auto"
   }, (page === null || page === void 0 ? void 0 : page.total_pages) > 1 ? /*#__PURE__*/React__default.createElement(Pagination, {
@@ -10863,25 +11550,6 @@ var Products11 = function Products11(props) {
   }) : null)));
 };
 
-var ProductItem9 = function ProductItem9(props) {
-  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,
-    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.productName), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-2"
-  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    priceClassName: "!font-normal text-lg"
-  }))));
-};
-
 var Products12 = function Products12(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -10914,15 +11582,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"
@@ -10931,12 +11603,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, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+    }, /*#__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 = useState(false),
+    isAutoGetList = _useState[0],
+    setIsAutoGetList = _useState[1];
+  var _useState2 = 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;
+  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,
@@ -10952,7 +11682,9 @@ var ProductCategory2 = function ProductCategory2(props) {
     }),
     params = _useState[0],
     setParams = _useState[1];
-  var _CategoryController = CategoryController(_extends({}, props)),
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "0"
+    })),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
   var _ProductController = ProductController(_extends({}, props, {
@@ -10993,7 +11725,7 @@ var ProductCategory2 = function ProductCategory2(props) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "zjk-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -11031,7 +11763,7 @@ var ProductSale2 = function ProductSale2(props) {
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       key: index,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+      product: product
     });
   })), /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem tất cả",
@@ -11086,7 +11818,11 @@ var ProductSearch1 = function ProductSearch1(props) {
       isAutoGetList: isAutoGetList
     })),
     products = _ProductController.products,
-    loading = _ProductController.loading;
+    loading = _ProductController.loading,
+    page = _ProductController.page;
+  var _useState5 = useState({}),
+    filterValue = _useState5[0],
+    setFilterValue = _useState5[1];
   useEffect(function () {
     setIsAutoGetList(true);
     setParams(function (prev) {
@@ -11096,7 +11832,17 @@ var ProductSearch1 = function ProductSearch1(props) {
     });
   }, [keywordValue]);
   useEffect(function () {
-    if ((products === null || products === void 0 ? void 0 : products.length) > 0) setProductsFilter(products);
+    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() {
     setIsGetMore(false);
@@ -11107,10 +11853,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") {
@@ -11135,7 +11884,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
@@ -11146,7 +11895,7 @@ var ProductSearch1 = function ProductSearch1(props) {
   }, 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, idx) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "htrhr-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -11202,7 +11951,7 @@ var ProductHot1 = function ProductHot1(props) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "zjk-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -11251,7 +12000,7 @@ var ProductHot3 = function ProductHot3(props) {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
       key: "htjtr-" + index,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+      product: product
     });
   }))), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
@@ -11293,7 +12042,7 @@ var ProductsTop1 = function ProductsTop1(props) {
       Link: Link,
       className: "border-0",
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "htrhr-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
@@ -11343,7 +12092,7 @@ var ProductList5 = function ProductList5(props) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       key: "htrhr-" + idx
     });
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -11398,7 +12147,7 @@ var ProductHighlight1 = function ProductHighlight1(props) {
   }, 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,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      product: product,
       shopConfigStyle: shopConfigStyle,
       key: "zjk-" + idx
     });
@@ -11932,7 +12681,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"
@@ -11974,7 +12723,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"
@@ -12218,7 +12967,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, {
@@ -12235,7 +12984,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"))));
 };
@@ -12257,7 +13006,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", {
@@ -12268,13 +13017,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"
   })));
 };
 
@@ -12386,6 +13135,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,
@@ -12457,7 +13230,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
     }
@@ -12622,7 +13395,7 @@ var dataFake = [{
   title: "Đa dạng thanh toán",
   data: [{
     svgImage: "",
-    srcImage: /*#__PURE__*/React__default.createElement(FaArrowsRotate, null),
+    srcImage: /*#__PURE__*/React__default.createElement(GrPowerCycle, null),
     label: "Chuyển khoản",
     link: ""
   }, {
@@ -12659,7 +13432,7 @@ var dataFake = [{
     label: "Chính sách bảo hành",
     link: ""
   }, {
-    srcImage: /*#__PURE__*/React__default.createElement(FaArrowsRotate, null),
+    srcImage: /*#__PURE__*/React__default.createElement(GrPowerCycle, null),
     svgImage: "",
     label: "Chính sách đổi trả",
     link: ""
@@ -12896,7 +13669,6 @@ var Footer7 = function Footer7(props) {
     textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
     _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
     bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
-  console.log("Footer7 shopConfig", shopConfig);
   var _useState = useState([]),
     shopAddressList = _useState[0],
     setShopAddressList = _useState[1];
@@ -13012,7 +13784,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"
@@ -13032,23 +13806,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++) {
+  for (var i = 1; i <= star; i++) {
     res.push(/*#__PURE__*/React__default.createElement(FaStar, {
-      color: "#E2B93B"
+      color: color
     }));
+    if (i >= 5) break;
   }
   var decimalPart = star % 1;
   if (decimalPart && decimalPart >= 0.5) {
     res.push(/*#__PURE__*/React__default.createElement(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(FaRegStar, {
-      color: "#E2B93B"
+      color: color
     }));
   }
   return /*#__PURE__*/React__default.createElement("div", {
@@ -13218,9 +13995,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(RiDoubleQuotesL, {
@@ -13235,6 +14012,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,
@@ -13409,7 +14238,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,
@@ -13448,6 +14277,30 @@ var Gallery1$1 = function Gallery1(props) {
   })))));
 };
 
+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,
@@ -13478,13 +14331,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));
 };
 
@@ -13565,9 +14418,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) {
@@ -13589,7 +14442,7 @@ var About1 = function About1(props) {
     _props$SectionTitle = props.SectionTitle,
     SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-4"
+    className: SECTION_CLASS + " flex flex-col gap-6"
   }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -13609,13 +14462,14 @@ var About5 = function About5(props) {
     SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
     data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  console.log("About5 sectionData", sectionData);
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_DEFAULT_CLASS + " "
-  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement(SectionTitle, {
+  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-6"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }) : null, /*#__PURE__*/React__default.createElement("div", {
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 lg:grid-cols-2 gap-12 mt-4 md:mt-6"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
@@ -13633,25 +14487,28 @@ var About5 = function About5(props) {
 
 var About6 = function About6(props) {
   var _sectionData$, _sectionData$2;
-  var shopConfig = props.shopConfig,
-    data = props.data;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  console.log("About5 sectionData", sectionData);
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_DEFAULT_CLASS + " mt-0"
-  },  /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl md:text-4xl text-textHeading font-semibold mb-6 lg:mb-8"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle) , /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 lg:grid-cols-5 gap-6 lg:gap-10"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 lg:grid-cols-5 gap-6 lg:gap-10  " + (data !== null && data !== void 0 && data.sectionTitle ? "mt-6" : "mt-0")
   }, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
     className: "w-full h-auto object-cover lg:hidden block rounded-xl"
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), shopConfig !== null && shopConfig !== void 0 && shopConfig.shopAbout ? /*#__PURE__*/React__default.createElement("div", {
     className: "ck-content text-wrap lg:col-span-3 bg-bgSecondary p-4 lg:p-6 rounded-2xl",
     dangerouslySetInnerHTML: {
       __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
     }
-  }), /*#__PURE__*/React__default.createElement("img", {
+  }) : null, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.srcImage,
     className: "w-full h-auto object-cover lg:col-span-2 lg:block hidden rounded-xl"
   })));
@@ -14036,6 +14893,10 @@ var FormCheckout = 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) {
@@ -14471,7 +15332,7 @@ var SearchProduct1 = function SearchProduct1(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14530,9 +15391,9 @@ var SearchProduct1 = function SearchProduct1(props) {
       className: "flex flex-col px-1 gap-2 border-b w-full"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "mt-1  text-lg font-medium\t"
-    }, item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : _item$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
-      className: " text-lg font-medium\t"
-    }, formatCurrency(item === null || item === void 0 ? void 0 : (_item$productInfo2 = item.productInfo) === null || _item$productInfo2 === void 0 ? void 0 : _item$productInfo2.price))));
+    }, item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : _item$productInfo.productName), item !== null && item !== void 0 && item.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement("div", {
+      className: " text-lg font-medium"
+    }, formatCurrency(item === null || item === void 0 ? void 0 : (_item$productInfo2 = item.productInfo) === null || _item$productInfo2 === void 0 ? void 0 : _item$productInfo2.price)) : null));
   })) : /*#__PURE__*/React__default.createElement("div", {
     className: "text-center"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription));
@@ -14561,7 +15422,7 @@ var SearchBar2 = function SearchBar2(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14623,9 +15484,9 @@ var SearchBar2 = function SearchBar2(props) {
       className: "flex flex-col px-1 gap-2 border-b w-full"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "mt-1  text-lg font-medium\t"
-    }, item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : _item$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    }, item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : _item$productInfo.productName), item !== null && item !== void 0 && item.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement(ProductPrice, {
       product: item === null || item === void 0 ? void 0 : item.productInfo
-    })));
+    }) : null));
   })) : null)));
 };
 
@@ -14656,7 +15517,7 @@ var SearchBar5 = function SearchBar5(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "absolute inset-0 bg-black/45 rounded-xl md:rounded-3xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col relative gap-2 md:gap-4 items-center justify-center"
+    className: "flex flex-col relative gap-2 md:gap-4 items-center justify-center w-full sm:min-w-2/3 lg:min-w-1/2"
   }, data !== null && data !== void 0 && (_data$data2 = data.data) !== null && _data$data2 !== void 0 && _data$data2.title ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg font-semibold md:text-3xl lg:text-4xl text-textButton text-center"
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.title) : null, data !== null && data !== void 0 && (_data$data4 = data.data) !== null && _data$data4 !== void 0 && _data$data4.description ? /*#__PURE__*/React__default.createElement("div", {
@@ -14666,7 +15527,7 @@ var SearchBar5 = function SearchBar5(props) {
     icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, {
       className: "text-gray3 ps-1 text-xl md:text-2xl"
     }),
-    wrapClassName: "w-full md:w-[80%] ",
+    wrapClassName: "w-[90%] sm:w-1/2 lg:w-[40%] ",
     className: "w-full bg-bgSecondary  mb-2 md:h-12",
     onKeyDown: function onKeyDown(e) {
       handleSearch(e);
@@ -14705,7 +15566,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",
@@ -14918,7 +15779,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", {
@@ -14927,6 +15788,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,
@@ -15041,7 +15985,7 @@ var DefaultImage$1 = function DefaultImage(props) {
   var _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-center items-center max-w-full h-full aspect-video rounded-lg " + className,
+    className: "flex justify-center items-center w-full h-full aspect-video object-cover rounded-lg " + className,
     style: {
       backgroundColor: "#FAFAFA"
     }
@@ -15069,7 +16013,7 @@ var NewsImage = function NewsImage(props) {
   };
   return src ? /*#__PURE__*/React__default.createElement("img", {
     src: src,
-    className: "h-full rounded-lg max-w-full aspect-video " + className,
+    className: "h-full rounded-lg w-full aspect-video object-cover " + className,
     style: size ? {
       width: size,
       height: size
@@ -15080,8 +16024,56 @@ var NewsImage = function NewsImage(props) {
   });
 };
 
+var NewsItem2 = function NewsItem2(_ref) {
+  var newsArticle = _ref.newsArticle;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: newsArticle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "pt-3 font-medium text-lg line-clamp-3",
+    style: {
+      lineHeight: 1.6
+    }
+  }, newsArticle === null || newsArticle === void 0 ? void 0 : newsArticle.title));
+};
+
+var relativeTime = createCommonjsModule(function (module, exports) {
+!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+});
+
+var vi = createCommonjsModule(function (module, exports) {
+!function(t,n){module.exports=n(dayjs_min);}(commonjsGlobal,(function(t){function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var h=n(t),_={name:"vi",weekdays:"chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),months:"tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),weekStart:1,weekdaysShort:"CN_T2_T3_T4_T5_T6_T7".split("_"),monthsShort:"Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),weekdaysMin:"CN_T2_T3_T4_T5_T6_T7".split("_"),ordinal:function(t){return t},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM [năm] YYYY",LLL:"D MMMM [năm] YYYY HH:mm",LLLL:"dddd, D MMMM [năm] YYYY HH:mm",l:"DD/M/YYYY",ll:"D MMM YYYY",lll:"D MMM YYYY HH:mm",llll:"ddd, D MMM YYYY HH:mm"},relativeTime:{future:"%s tới",past:"%s trước",s:"vài giây",m:"một phút",mm:"%d phút",h:"một giờ",hh:"%d giờ",d:"một ngày",dd:"%d ngày",M:"một tháng",MM:"%d tháng",y:"một năm",yy:"%d năm"}};return h.default.locale(_,null,!0),_}));
+});
+
+dayjs_min.extend(relativeTime);
+dayjs_min.locale("vi");
+var NewsItem1 = function NewsItem1(_ref) {
+  var _dayjs;
+  var newsArticle = _ref.newsArticle,
+    _ref$isHidden = _ref.isHidden,
+    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4 "
+  }, /*#__PURE__*/React__default.createElement(NewsImage, {
+    news: newsArticle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 md:gap-3 pb-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-lg line-clamp-3 md:line-clamp-2 lg:line-clamp-3",
+    style: {
+      lineHeight: 1.6
+    }
+  }, newsArticle === null || newsArticle === void 0 ? void 0 : newsArticle.title), !isHidden ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-4 md:line-clamp-3 lg:line-clamp-4  font-normal min-h-6 md:min-h-20 text-gray3",
+    style: {
+      lineHeight: 1.6
+    }
+  }, newsArticle === null || newsArticle === void 0 ? void 0 : newsArticle.shortDescription), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 mt-4"
+  }, (_dayjs = dayjs_min(newsArticle === null || newsArticle === void 0 ? void 0 : newsArticle.timeUpdate)) === null || _dayjs === void 0 ? void 0 : _dayjs.fromNow())) : null));
+};
+
 var NewsHighlight1 = function NewsHighlight1(props) {
-  var _newsArticles$, _newsArticles$2, _newsArticles$3, _newsArticles$slice;
+  var _newsArticles$slice;
   var _props$SectionTitle = props.SectionTitle,
     SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
     _props$shopConfigStyl = props.shopConfigStyle,
@@ -15106,34 +16098,34 @@ var NewsHighlight1 = function NewsHighlight1(props) {
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 mb-6 grid grid-cols-1 md:grid-cols-2 gap-6 "
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[0]),
     Link: Link
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
-    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[0]
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "pt-3 font-medium text-lg"
-  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$ = newsArticles[0]) === null || _newsArticles$ === void 0 ? void 0 : _newsArticles$.title))), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(NewsItem2, {
+    newsArticle: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[0]
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-6"
-  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-4 ",
+  }, newsArticles !== null && newsArticles !== void 0 && newsArticles[1] ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1]),
     Link: Link
-  }, /*#__PURE__*/React__default.createElement(NewsImage, {
-    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1]
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-medium text-lg"
-  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$2 = newsArticles[1]) === null || _newsArticles$2 === void 0 ? void 0 : _newsArticles$2.title)), /*#__PURE__*/React__default.createElement(LinkToPage, {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+  }, newsArticles !== null && newsArticles !== void 0 && newsArticles[2] ? /*#__PURE__*/React__default.createElement(NewsItem1, {
+    newsArticle: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1],
+    isHidden: true
+  }) : /*#__PURE__*/React__default.createElement(NewsItem2, {
+    newsArticle: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[1]
+  })) : null, newsArticles !== null && newsArticles !== void 0 && newsArticles[2] ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: getLinkNewsDetail(newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[2]),
     Link: Link
-  }, /*#__PURE__*/React__default.createElement(NewsImage, {
-    news: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[2]
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "font-medium text-lg"
-  }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$3 = newsArticles[2]) === null || _newsArticles$3 === void 0 ? void 0 : _newsArticles$3.title)))), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(NewsItem1, {
+    newsArticle: newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles[2],
+    isHidden: true
+  })) : null)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full h-64 flex flex-col justify-center items-center text-gray3"
+  }, /*#__PURE__*/React__default.createElement(GiNewspaper, {
+    size: 80
+  }), " Kh\xF4ng c\xF3 tin t\u1EE9c n\xE0o"), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-3 gap-6 mt-6 "
   }, newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$slice = newsArticles.slice(3, 6)) === null || _newsArticles$slice === void 0 ? void 0 : _newsArticles$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
@@ -15142,22 +16134,12 @@ var NewsHighlight1 = function NewsHighlight1(props) {
       key: "kdjf-" + index
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "jgdfg-" + index
-    }, /*#__PURE__*/React__default.createElement(NewsImage, {
-      news: item
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-lg py-2"
-    }, item === null || item === void 0 ? void 0 : item.title)));
+    }, /*#__PURE__*/React__default.createElement(NewsItem2, {
+      newsArticle: item
+    })));
   })));
 };
 
-var relativeTime = createCommonjsModule(function (module, exports) {
-!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
-});
-
-var vi = createCommonjsModule(function (module, exports) {
-!function(t,n){module.exports=n(dayjs_min);}(commonjsGlobal,(function(t){function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var h=n(t),_={name:"vi",weekdays:"chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),months:"tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),weekStart:1,weekdaysShort:"CN_T2_T3_T4_T5_T6_T7".split("_"),monthsShort:"Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),weekdaysMin:"CN_T2_T3_T4_T5_T6_T7".split("_"),ordinal:function(t){return t},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM [năm] YYYY",LLL:"D MMMM [năm] YYYY HH:mm",LLLL:"dddd, D MMMM [năm] YYYY HH:mm",l:"DD/M/YYYY",ll:"D MMM YYYY",lll:"D MMM YYYY HH:mm",llll:"ddd, D MMM YYYY HH:mm"},relativeTime:{future:"%s tới",past:"%s trước",s:"vài giây",m:"một phút",mm:"%d phút",h:"một giờ",hh:"%d giờ",d:"một ngày",dd:"%d ngày",M:"một tháng",MM:"%d tháng",y:"một năm",yy:"%d năm"}};return h.default.locale(_,null,!0),_}));
-});
-
 var getAllNewsCategoriesApi = function getAllNewsCategoriesApi(shopId, landingShopConfigId, appId) {
   if (appId === void 0) {
     appId = "SSPA";
@@ -15268,10 +16250,10 @@ var News1 = function News1(props) {
       });
     }
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
-    className: "rounded-b-lg bg-bgSecondary"
+    className: "rounded-b-lg bg-bgSecondary overflow-y-auto scroll-container max-h-[700px]"
   }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      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);
@@ -15281,39 +16263,33 @@ var News1 = function News1(props) {
           });
         });
       }
-    }, item === null || item === void 0 ? void 0 : item.catName);
+    }, /*#__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" : "")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-3"
+    }, item === null || item === void 0 ? void 0 : item.catName)));
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "md:col-span-2 flex flex-col gap-8"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "px-6 py-3 text-textButton text-lg rounded-t-lg bg-primary w-max"
-  }, params !== null && params !== void 0 && params.catId ? categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catName : "Tin mới"), /*#__PURE__*/React__default.createElement("div", {
+    className: "px-6 py-3 text-textButton text-lg rounded-t-lg bg-primary w-max max-w-full"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-1"
+  }, params !== null && params !== void 0 && params.catId ? categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catName : "Tin mới")), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full border border-primary"
   })), loading & isSeeMore ? /*#__PURE__*/React__default.createElement("div", {
     className: "w-full h-80 flex justify-center items-center"
   }, /*#__PURE__*/React__default.createElement(Loading, null)) : /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-8"
   }, (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > 0 ? newsArticles === null || newsArticles === void 0 ? void 0 : (_newsArticles$slice = newsArticles.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _newsArticles$slice === void 0 ? void 0 : _newsArticles$slice.map(function (item, index) {
-    var _dayjs;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       href: getLinkNewsDetail(item),
       Link: Link,
       key: "kghf-" + index
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-2 gap-2 md:gap-4 cursor-pointer",
-      key: "djfsdf-" + index
-    }, /*#__PURE__*/React__default.createElement(NewsImage, {
-      news: item
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col gap-2 md:gap-3 pb-4"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-lg md:text-xl line-clamp-2"
-    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
-      className: "line-clamp-3 font-normal min-h-6 md:min-h-20 text-gray3"
-    }, item === null || item === void 0 ? void 0 : item.shortDescription), /*#__PURE__*/React__default.createElement("div", {
-      className: " text-gray3"
-    }, (_dayjs = dayjs_min(item === null || item === void 0 ? void 0 : item.timeUpdate)) === null || _dayjs === void 0 ? void 0 : _dayjs.fromNow()))));
+    }, /*#__PURE__*/React__default.createElement(NewsItem1, {
+      newsArticle: item
+    }));
   }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full h-64 flex flex-col justify-center items-center text-gray3"
+    className: "w-full h-64 flex flex-col justify-center items-center text-gray3 "
   }, /*#__PURE__*/React__default.createElement(GiNewspaper, {
     size: 80
   }), " Kh\xF4ng c\xF3 tin t\u1EE9c n\xE0o"), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -15333,10 +16309,10 @@ var News1 = function News1(props) {
       });
     }
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
-    className: "rounded-b-lg bg-bgSecondary"
+    className: "rounded-b-lg bg-bgSecondary overflow-y-auto scroll-container max-h-[700px]"
   }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      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);
@@ -15346,7 +16322,11 @@ var News1 = function News1(props) {
           });
         });
       }
-    }, item === null || item === void 0 ? void 0 : item.catName);
+    }, /*#__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" : "")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-3"
+    }, item === null || item === void 0 ? void 0 : item.catName)));
   }))));
 };
 
@@ -15395,7 +16375,7 @@ var NewsDetail1 = function NewsDetail1(props) {
     Link = _props$Link === void 0 ? null : _props$Link;
   var _useState = useState({
       catId: catId,
-      szie: 10
+      size: 10
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -15433,10 +16413,10 @@ var NewsDetail1 = function NewsDetail1(props) {
     dangerouslySetInnerHTML: {
       __html: article === null || article === void 0 ? void 0 : article.content
     }
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), (newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "top-6 block md:hidden"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
+    className: "px-6 bg-primary rounded-t-lg text-lg text-textButton text-center"
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
     className: "rounded-b-lg bg-bgSecondary"
   }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
@@ -15444,10 +16424,14 @@ var NewsDetail1 = function NewsDetail1(props) {
       href: getLinkNewsByCategory(item),
       Link: Link
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      className: "px-4 hover:bg-gray-100 hover:text-primary cursor-pointer",
       key: "sdjfdh-" + index
-    }, item === null || item === void 0 ? void 0 : item.catName));
-  }))), /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__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" : "")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-3"
+    }, item === null || item === void 0 ? void 0 : item.catName))));
+  }))) : null, (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium text-2xl mb-4"
@@ -15458,19 +16442,17 @@ var NewsDetail1 = function NewsDetail1(props) {
       href: getLinkNewsDetail(item),
       Link: Link,
       key: "kghf-" + index
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(NewsImage, {
-      news: item
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-lg line-clamp-2"
-    }, item === null || item === void 0 ? void 0 : item.title)));
+    }, /*#__PURE__*/React__default.createElement(NewsItem2, {
+      newsArticle: item
+    }));
   })), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-center mt-4 w-full"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem thêm",
     onClick: handleSeeMore,
     shopConfigStyle: shopConfigStyle
-  })) : null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky top-20 self-start hidden md:block"
+  })) : null) : null), (newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "sticky top-20 self-start hidden md:block overflow-y-auto scroll-container max-h-[700px]"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
@@ -15480,11 +16462,15 @@ var NewsDetail1 = function NewsDetail1(props) {
       href: getLinkNewsByCategory(item),
       Link: Link
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
+      className: "px-4 hover:bg-gray-100 hover:text-primary cursor-pointer",
       key: "sdjfdh-" + index
-    }, item === null || item === void 0 ? void 0 : item.catName));
-  }))));
+    }, /*#__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" : "")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "line-clamp-3"
+    }, item === null || item === void 0 ? void 0 : item.catName))));
+  }))) : null);
 };
 
-export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, BookingTable1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, CustomerRating8, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Gallery1$1 as Gallery2, Hero1, Hero10, Hero11, Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, PageTitle2, PageTitle3, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductItem8, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products12, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, SectionTitle4, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, ShopHighlights8, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
+export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner4, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, BookingTable1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, CustomerRating8, CustomerRating9, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Gallery2, Gallery3, Hero1, Hero10, Hero11, Hero12, Hero13, Hero14, Hero15, Hero16, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, PageTitle2, PageTitle3, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem10, ProductItem11, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductItem8, ProductItem9, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products12, Products14, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, SectionTitle4, SectionTitle5, Select$1 as Select, ServiceDetail1, ShopHighlights10, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, ShopHighlights8, ShopHighlights9, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map