s-platform-landing-section 0.1.33 → 0.1.35

package/dist/index.modern.js

@@ -7,7 +7,7 @@ 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 { FaMinus, FaRegEyeSlash, FaPlus, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
 import 'react-icons/ci';
 import { BsCurrencyDollar } from 'react-icons/bs';
 import { LuSearch, LuShoppingCart, LuShoppingBag } from 'react-icons/lu';
@@ -18,7 +18,8 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { AiOutlineShoppingCart, AiOutlineInfoCircle, AiOutlinePhone } from 'react-icons/ai';
 import { GoCreditCard, GoClock } from 'react-icons/go';
-import { RiMessengerFill, RiDeleteBin7Line } from 'react-icons/ri';
+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';
 
@@ -425,18 +426,17 @@ var NavBar7 = function NavBar7(props) {
       position: "fixed",
       top: "-100px"
     }
-  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.defaultDomain, " | ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName), /*#__PURE__*/React__default.createElement("div", {
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-12 max-h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-primary text-wrap line-clamp-2 leading-tight"
+    className: "text-xl md:text-2xl text-primary font-headingFont text-wrap line-clamp-2 leading-tight"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
   }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
@@ -496,11 +496,10 @@ var NavBar7 = function NavBar7(props) {
     href: "/",
     className: "flex flex-1 gap-2 items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-12 max-h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap text-primary line-clamp-2"
+    className: "text-xl md:text-2xl font-headingFont text-wrap text-primary line-clamp-2"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -528,12 +527,12 @@ var NavBar7 = function NavBar7(props) {
       return setIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 items-center"
+    className: "flex gap-2 items-center mb-2"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    className: "h-14 w-14 bg-cover bg-no-repeat"
+    className: "max-h-14 w-14 object-cover"
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl font-semibold line-clamp-1"
+    className: "text-xl font-headingFont text-primary line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName))), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
     onClick: function onClick() {
@@ -727,11 +726,11 @@ var NavBar1 = function NavBar1(props) {
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
+    className: "object-cover w-12 max-h-12",
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap  font-fredoka text-primary"
+    className: "text-xl md:text-2xl text-wrap font-headingFont  text-primary"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
   }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
@@ -789,11 +788,11 @@ var NavBar1 = function NavBar1(props) {
     href: "/",
     className: "flex flex-1 gap-2 items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 h-12",
+    className: "object-cover w-12  max-h-12",
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-wrap text-primary"
+    className: "text-xl md:text-2xl text-wrap text-primary font-headingFont"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -821,12 +820,12 @@ var NavBar1 = function NavBar1(props) {
       return setIsOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 items-center"
+    className: "flex gap-2 items-center mb-2"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    className: "h-14 w-14 bg-cover bg-no-repeat"
+    className: "max-h-14 w-14 bg-cover bg-no-repeat"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl line-clamp-1"
+    className: "text-xl font-headingFont text-primary line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName))), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
     onClick: function onClick() {
@@ -962,6 +961,24 @@ var SectionTitle3 = function SectionTitle3(props) {
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
+var SectionTitle4 = function SectionTitle4(props) {
+  var _data$sectionTitle;
+  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 justify-center items-center gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "border w-32 border-primary"
+  }), /*#__PURE__*/React__default.createElement("h2", {
+    className: "font-headingFont !leading-relaxed text-primary text-center text-2xl md:text-4xl"
+  }, 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"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
+};
+
 var Input = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1197,11 +1214,10 @@ var Hero2 = function Hero2(props) {
     className: "w-full h-auto object-cover min-h-[22vh] 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", {
+  }, 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", {
+  }) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium line-clamp-1 ",
     style: {
       fontSize: "clamp(1.25rem, 4vw, 3.5rem)",
@@ -1270,7 +1286,7 @@ var Hero6 = function Hero6(props) {
 };
 
 var Hero10 = function Hero10(props) {
-  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
+  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button;
   var shopConfigStyle = props.shopConfigStyle,
     data = props.data,
     _props$Link = props.Link,
@@ -1287,7 +1303,9 @@ var Hero10 = function Hero10(props) {
     className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
-  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button, index) {
+  }, 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,
       key: "gdf-" + index,
@@ -1299,7 +1317,51 @@ 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 Hero11 = function Hero11(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data2$$title, _data$data3, _data$data3$;
+  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-bgSecondary gap-6 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-primary w-4 h-1/2 mt-6 "
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "h-[45%]"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, /*#__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: "w-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-[45%]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-primary w-4 h-1/2 mb-6"
+  }))), /*#__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 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
+  })));
+};
+
+var Hero12 = function Hero12(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
@@ -1394,7 +1456,7 @@ var CarouselItem = function CarouselItem(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full overflow-hidden "
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex overflow-x-auto gap-2 no-scrollbar items-center",
+    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",
@@ -7499,7 +7561,7 @@ var lib = {
 };
 
 var getBaseUrl = function getBaseUrl() {
-  return process.env.NEXT_PUBLIC_BASE_URL || "https://proapi.sspa.com.vn";
+  return process.env.NEXT_PUBLIC_BASE_URL || "https://test-apigateway.sfin.vn";
 };
 var request = axios.create();
 request.interceptors.request.use(function (config) {
@@ -7550,7 +7612,7 @@ var getYoutubeVideoIdByUrl = function getYoutubeVideoIdByUrl(url) {
 var linkPagePolicy = "https://sites.google.com/view/sodofin-landing-page-policy";
 var endpointLandingShop = "/landing-shop/v2";
 var endpointLanding = "/landing/v2";
-var baseURL = process.env.NEXT_PUBLIC_BASE_URL || "https://proapi.sspa.com.vn";
+var baseURL = process.env.NEXT_PUBLIC_BASE_URL || "https://test-apigateway.sfin.vn";
 
 var getShopCategoriesApi = function getShopCategoriesApi(shopId, types) {
   return api({
@@ -7645,9 +7707,6 @@ var Hero13 = function Hero13(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 Features2 = function Features2(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -7754,8 +7813,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) {
@@ -8061,7 +8118,11 @@ var ProductPrice = function ProductPrice(props) {
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
     _props$style = props.style,
-    style = _props$style === void 0 ? {} : _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];
@@ -8095,33 +8156,34 @@ var ProductPrice = function ProductPrice(props) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: className
-  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray3 line-through mr-2"
-  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
-    className: "text-primary font-semibold",
+    className: "flex gap-4 flex-wrap " + className
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-primary font-semibold " + priceClassName,
     style: style
-  }, displayPrice));
+  }, displayPrice), displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through " + priceBeforeDiscountClassName + " "
+  }, 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) {
@@ -8229,7 +8291,7 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
       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"
@@ -8284,10 +8346,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),
@@ -8513,7 +8577,7 @@ var Select = forwardRef(function (props, ref) {
   useEffect(function () {
     var delayDebounceFn = setTimeout(function () {
       handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
-    }, 500);
+    }, 600);
     return function () {
       return clearTimeout(delayDebounceFn);
     };
@@ -8644,7 +8708,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,
@@ -9470,8 +9534,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;
@@ -9528,7 +9592,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,
@@ -9726,7 +9792,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,
@@ -9861,7 +9927,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,
@@ -9897,6 +9963,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,
@@ -9904,27 +9971,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"
@@ -9934,7 +10003,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"
@@ -9945,6 +10014,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,
@@ -9952,23 +10022,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,
@@ -9978,17 +10049,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", {
@@ -10003,6 +10074,7 @@ var ProductItem4 = function ProductItem4(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,
@@ -10012,17 +10084,17 @@ 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
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    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.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 gap-2 md:gap-4 "
   }, /*#__PURE__*/React__default.createElement(AiOutlineShoppingCart, {
@@ -10035,6 +10107,7 @@ var ProductItem5 = function ProductItem5(props) {
 };
 
 var ProductItem6 = function ProductItem6(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -10044,17 +10117,17 @@ var ProductItem6 = function ProductItem6(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-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"
+  }, 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", {
@@ -10067,32 +10140,71 @@ var ProductItem6 = function ProductItem6(props) {
 };
 
 var ProductItem7 = function ProductItem7(props) {
+  var _product$productInfo, _product$productInfo2, _product$productInfo3, _product$productInfo4, _product$productInfo5, _product$productInfo6;
   var product = 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;
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$classNamePrice = props.classNamePrice,
+    classNamePrice = _props$classNamePrice === void 0 ? "text-lg" : _props$classNamePrice;
   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 bg-bgSecondary relative rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
     className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 flex flex-col gap-4 items-start"
+    className: "p-3 sm: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", {
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "text-start " + (!(product !== null && product !== void 0 && product.isShowProductPriceOnLanding) ? "invisible" : "") + " " + classNamePrice
+  })), product !== null && product !== void 0 && product.isShowProductPriceOnLanding && product !== null && product !== void 0 && (_product$productInfo2 = product.productInfo) !== null && _product$productInfo2 !== void 0 && _product$productInfo2.priceBeforeDiscount && (product === null || product === void 0 ? void 0 : (_product$productInfo3 = product.productInfo) === null || _product$productInfo3 === void 0 ? void 0 : _product$productInfo3.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.price) ? /*#__PURE__*/React__default.createElement("div", {
     className: "absolute top-5 left-0 font-semibold px-3 py-1 bg-danger text-textButton rounded-r-2xl shadow-lg v-max"
-  }, 1 - 100 * (product === null || product === void 0 ? void 0 : product.price) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null));
+  }, 1 - 100 * (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.price) / (product === null || product === void 0 ? void 0 : (_product$productInfo6 = product.productInfo) === null || _product$productInfo6 === void 0 ? void 0 : _product$productInfo6.priceBeforeDiscount)) : null));
+};
+
+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: "min-h-[360px] md:min-h-[400px] xl:min-h-[440px] !object-cover !rounded"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bottom-0 rounded-b pb-6 px-4 bg-gradient-to-t from-black/50 to-transparent flex flex-col items-center h-1/2 gap-2 w-full justify-end "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-textButton"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    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 TreatmentItem1 = function TreatmentItem1(props) {
+  var _product$productInfo;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -10100,17 +10212,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", {
@@ -10158,7 +10270,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",
@@ -10285,9 +10397,10 @@ var Products2 = function Products2(props) {
       className: "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
+      shopConfigStyle: shopConfigStyle,
+      classNamePrice: "text-base md:text-lg"
     }));
   })) : /*#__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"
@@ -10397,9 +10510,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 () {
@@ -10465,7 +10576,7 @@ var Products3 = function Products3(props) {
       Link: Link,
       key: index,
       shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
+      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"
@@ -10488,7 +10599,9 @@ var Products9 = function Products9(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, {
@@ -10512,9 +10625,8 @@ var Products9 = function Products9(props) {
     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
@@ -10541,7 +10653,7 @@ 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));
@@ -10562,7 +10674,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, {
@@ -10593,7 +10707,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));
@@ -10642,7 +10756,7 @@ var Products11 = function Products11(props) {
     filterItem = _useState5[0],
     setFilterItem = _useState5[1];
   var _CategoryController = CategoryController(_extends({}, props, {
-      params: params
+      types: "0"
     })),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
@@ -10714,10 +10828,10 @@ var Products11 = function Products11(props) {
     }
   };
   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", {
+  }, (categories === null || categories === void 0 ? void 0 : categories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4 max-h-96 overflow-y-auto"
   }, categories === null || categories === void 0 ? void 0 : categories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -10727,10 +10841,10 @@ var Products11 = function Products11(props) {
         handleChooseCategory(item);
       }
     }, item === null || item === void 0 ? void 0 : item.cateName);
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  })) : 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,
@@ -10751,11 +10865,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, {
@@ -10767,6 +10881,81 @@ var Products11 = function Products11(props) {
   }) : null)));
 };
 
+var ProductItem9 = function ProductItem9(props) {
+  var _product$productInfo;
+  var product = props.product;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex border-b border-stroke items-center py-4"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    className: "!w-24 rounded-lg"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 flex-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), product !== null && product !== void 0 && product.isShowProductPriceOnLanding ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product === null || product === void 0 ? void 0 : product.productInfo,
+    priceClassName: "!font-normal text-lg"
+  })) : null));
+};
+
+var Products12 = function Products12(props) {
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _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 _useState = useState({
+      types: "0"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "0"
+    })),
+    categories = _CategoryController.categories;
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var handleFilterByCategory = function handleFilterByCategory(category) {
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        categoryId: category === null || category === void 0 ? void 0 : category.categoryId
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-6"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(CarouselItem, {
+    isNavigateButton: false,
+    data: categories,
+    onClick: handleFilterByCategory
+  }), 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"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      key: index,
+      Link: Link,
+      href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo)
+    }, /*#__PURE__*/React__default.createElement(ProductItem9, {
+      product: product
+    }));
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)));
+};
+
 var ProductCategory2 = function ProductCategory2(props) {
   var _products$slice;
   var _props$Link = props.Link,
@@ -10782,7 +10971,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, {
@@ -10823,7 +11014,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, {
@@ -10861,7 +11052,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ả",
@@ -10926,7 +11117,9 @@ var ProductSearch1 = function ProductSearch1(props) {
     });
   }, [keywordValue]);
   useEffect(function () {
-    if ((products === null || products === void 0 ? void 0 : products.length) > 0) setProductsFilter(products);
+    if ((products === null || products === void 0 ? void 0 : products.length) > 0) setProductsFilter(products);else {
+      setProductsFilter([]);
+    }
   }, [products]);
   var handleGetMoreProducts = function handleGetMoreProducts() {
     setIsGetMore(false);
@@ -10976,7 +11169,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, {
@@ -11020,7 +11213,7 @@ var ProductHot1 = function ProductHot1(props) {
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-8"
+    className: SECTION_CLASS + " flex flex-col gap-6 md:gap-12"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -11032,7 +11225,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, {
@@ -11081,7 +11274,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
@@ -11123,7 +11316,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));
@@ -11173,7 +11366,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, {
@@ -11228,7 +11421,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
     });
@@ -11811,15 +12004,312 @@ var BookingForm6 = function BookingForm6(props) {
   })));
 };
 
-var Banner1 = function Banner1(props) {
-  var data = props.data,
-    shopConfigStyle = props.shopConfigStyle,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+var TextArea = forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    _props$textareaClassN = props.textareaClassName,
+    textareaClassName = _props$textareaClassN === void 0 ? "" : _props$textareaClassN,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
+  var _useState = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  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;
+    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' && value === '') {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var handleOnChangeValue = function handleOnChangeValue(e) {
+    var value = e.target.value;
+    _setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  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: "" + SECTION_DEFAULT_CLASS
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    className: "" + className
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1 " + labelClassName
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
+    name: "",
+    id: "",
+    className: "focus:outline-none focus:ring-0 border rounded-xl min-h-24 " + textareaClassName,
+    placeholder: placeholder,
+    value: value,
+    onChange: function onChange(e) {
+      handleOnChangeValue(e);
+    }
+  }), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
+
+var BookingFoodForm = function BookingFoodForm(props) {
+  var _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$onCloseFormBoo = props.onCloseFormBooking,
+    onCloseFormBooking = _props$onCloseFormBoo === void 0 ? function () {} : _props$onCloseFormBoo,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$isModalBooking = props.isModalBooking,
+    isModalBooking = _props$isModalBooking === void 0 ? false : _props$isModalBooking;
+  var _useState = useState(defaultValue),
+    listProductSelected = _useState[0],
+    setListProductSelected = _useState[1];
+  var inputNameRef = useRef(null);
+  var inputDateRef = useRef(null);
+  var inputPhoneNumberRef = useRef(null);
+  var inputQuantityRef = useRef(null);
+  var _useState2 = useState(false),
+    isOpenPopup = _useState2[0],
+    setIsOpenPopup = _useState2[1];
+  var _useState3 = useState(false),
+    isHiddenForm = _useState3[0],
+    setIsHiddenForm = _useState3[1];
+  var _BookingController = BookingController(props),
+    _BookingController$cr = _BookingController.createSchedule,
+    createSchedule = _BookingController$cr === void 0 ? function () {} : _BookingController$cr;
+  var checkDateBooking = function checkDateBooking() {
+    var _inputDateRef$current;
+    var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _inputDateRef$current.getValue();
+    return scheduleDate && scheduleDate >= Date.now();
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var _inputNameRef$current, _inputPhoneNumberRef$, _inputDateRef$current2, _inputQuantityRef$cur;
+      var validateName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current = inputNameRef.current) === null || _inputNameRef$current === void 0 ? void 0 : _inputNameRef$current.validateData();
+      var validatePhoneNumber = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$ = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$ === void 0 ? void 0 : _inputPhoneNumberRef$.validateData();
+      var validateDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.validateData();
+      var validateQuantity = inputQuantityRef === null || inputQuantityRef === void 0 ? void 0 : (_inputQuantityRef$cur = inputQuantityRef.current) === null || _inputQuantityRef$cur === void 0 ? void 0 : _inputQuantityRef$cur.validateData();
+      var _temp = function () {
+        if (validateName && validatePhoneNumber && validateDate && validateQuantity) {
+          var _inputPhoneNumberRef$2, _inputNameRef$current2, _inputDateRef$current3;
+          var customerPhone = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$2 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$2 === void 0 ? void 0 : _inputPhoneNumberRef$2.getValue();
+          var customerName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current2 = inputNameRef.current) === null || _inputNameRef$current2 === void 0 ? void 0 : _inputNameRef$current2.getValue();
+          var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current3 = inputDateRef.current) === null || _inputDateRef$current3 === void 0 ? void 0 : _inputDateRef$current3.getValue();
+          var services = listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item) {
+            var _item$technical;
+            return {
+              productId: item === null || item === void 0 ? void 0 : item.value,
+              technicalStaffIds: [item === null || item === void 0 ? void 0 : (_item$technical = item.technical) === null || _item$technical === void 0 ? void 0 : _item$technical.sysUserId],
+              quantity: item === null || item === void 0 ? void 0 : item.quantity,
+              oldService: item === null || item === void 0 ? void 0 : item.oldService
+            };
+          });
+          var shopId = shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId;
+          console.log("check payload:::", services);
+          return Promise.resolve(createSchedule(customerName, customerPhone, scheduleDate, services, shopId)).then(function (response) {
+            var _response$data, _response$data$status;
+            if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) === '200') {
+              var _inputPhoneNumberRef$3, _inputNameRef$current3, _inputDateRef$current4;
+              if (isModalBooking) {
+                setIsHiddenForm(true);
+              }
+              setIsOpenPopup(true);
+              inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$3 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$3 === void 0 ? void 0 : _inputPhoneNumberRef$3.setValue("");
+              inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current3 = inputNameRef.current) === null || _inputNameRef$current3 === void 0 ? void 0 : _inputNameRef$current3.setValue("");
+              inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current4 = inputDateRef.current) === null || _inputDateRef$current4 === void 0 ? void 0 : _inputDateRef$current4.setValue(new Date());
+              setListProductSelected([]);
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleClosePopup = function handleClosePopup() {
+    setIsOpenPopup(false);
+    setIsHiddenForm(false);
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isHiddenForm ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 rounded-2xl p-6 border bg-white  " + className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    ref: inputNameRef,
+    label: "Họ và tên",
+    placeholder: "Nhập họ tên",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập họ tên"
+    }],
+    className: "w-full rounded-lg bg-white",
+    inputClassName: "w-full focus:outline-none focus:ring-0"
+  }), /*#__PURE__*/React__default.createElement(InputPhoneNumber, {
+    ref: inputPhoneNumberRef,
+    name: "customerPhone",
+    label: "Số điện thoại",
+    placeholder: "Nhập số điện thoại",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số điện thoại"
+    }, {
+      type: "pattern",
+      pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
+      message: "Số điện thoại không hợp lệ!"
+    }],
+    className: "bg-bgSecondary"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    ref: inputQuantityRef,
+    label: "Số người",
+    placeholder: "Nhập số người",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số người"
+    }],
+    className: "w-full rounded-lg bg-white",
+    inputClassName: "w-full focus:outline-none focus:ring-0"
+  }), /*#__PURE__*/React__default.createElement(DateTimePicker, {
+    ref: inputDateRef,
+    label: "Thời gian",
+    className: "w-full rounded-lg",
+    placeholder: "Chọn thời gian",
+    time: true,
+    rules: [{
+      type: "required",
+      message: "Bắt buộc chọn ngày đặt"
+    }, {
+      type: "validate",
+      message: "Thời gian không hợp lệ",
+      validate: checkDateBooking
+    }]
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 gap-6"
+  }, /*#__PURE__*/React__default.createElement(TextArea, {
+    label: "Ghi ch\xFA",
+    placeholder: "Nh\u1EADp ghi ch\xFA (n\u1EBFu c\xF3)",
+    className: " w-full ",
+    textareaClassName: "px-4 py-3 w-full min-h-32"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đặt lịch ngay",
+    shopConfigStyle: shopConfigStyle,
+    onClick: handleSubmit
+  }))) : null, isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onCloseFormBooking: onCloseFormBooking,
+    onClose: handleClosePopup
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-white rounded-lg shadow-lg p-6 lg:px-16 lg:pb-10 max-w-sm flex gap-4 flex-col items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement(FaCheckCircle, {
+    className: "h-full text-green-500",
+    style: {
+      fontSize: "56px"
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium text-2xl"
+  }, "\u0110\u1EB7t l\u1ECBch 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"))));
+};
+
+var BookingTable1 = function BookingTable1(props) {
+  var _data$data, _data$data$, _data$data2, _data$data2$, _data$data3, _data$data3$, _data$data4, _data$data4$, _data$data5, _data$data5$, _data$data6, _data$data6$;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  console.log("booking data", data);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full px-4 xl:px-20 py-12"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    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"
+  }, /*#__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", {
+    className: "text-primary w-full h-auto"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: configSvg(data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.svgImage)
+    }
+  })) : /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : (_data$data5$ = _data$data5[0]) === null || _data$data5$ === void 0 ? void 0 : _data$data5$.srcImage,
+    className: "w-full h-auto"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-4 whitespace-pre-line"
+  }, data === null || data === void 0 ? void 0 : (_data$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"
+  })));
+};
+
+var Banner1 = function Banner1(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _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_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -11861,7 +12351,7 @@ var Banner2 = function Banner2(props) {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement(Slider, {
-    className: "center",
+    className: "center mt-6 lg:mt-12",
     infinite: false,
     slidesToShow: 2,
     speed: 500,
@@ -12155,7 +12645,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: ""
   }, {
@@ -12192,7 +12682,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: ""
@@ -12321,11 +12811,10 @@ var Footer1 = function Footer1(props) {
     href: "/",
     className: "flex items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-16 h-16",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-14 max-h-14",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: " text-2xl md:text-3xl font-semibold ms-2",
+    className: "text-2xl md:text-3xl ms-2 font-headingFont ",
     style: {
       color: primary
     }
@@ -12430,7 +12919,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];
@@ -12466,11 +12954,10 @@ var Footer7 = function Footer7(props) {
     href: "/",
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-14",
-    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
-    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+    className: "object-cover w-14  max-h-14",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: " text-2xl md:text-3xl ms-2",
+    className: " text-2xl md:text-3xl ms-2 font-headingFont ",
     style: {
       color: primary
     }
@@ -12570,10 +13057,11 @@ var RatingStar = function RatingStar(props) {
     _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"
     }));
+    if (i > 5) break;
   }
   var decimalPart = star % 1;
   if (decimalPart && decimalPart >= 0.5) {
@@ -12730,6 +13218,46 @@ var CustomerRating6 = function CustomerRating6(props) {
   }))));
 };
 
+var CustomerRating8 = function CustomerRating8(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_CLASS + " !my-0 py-12 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: " mt-6 md:mt-12  grid grid-cols-1 md: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", {
+      className: "flex flex-col items-center gap-2 p-4 border border-stroke rounded-2xl ",
+      key: "ht-" + index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      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"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-gray3"
+    }, item === null || item === void 0 ? void 0 : item.description), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 "
+    }, /*#__PURE__*/React__default.createElement(RiDoubleQuotesL, {
+      className: "text-gray3",
+      size: 36
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "pt-4"
+    }, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement(RiDoubleQuotesL, {
+      className: " mt-auto text-gray3",
+      size: 36
+    })));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -12904,6 +13432,45 @@ var Gallery1 = function Gallery1(props) {
   }));
 };
 
+var Gallery1$1 = function Gallery1(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,
+    _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"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$slice = _data$data.slice(0, 2)) === null || _data$data$slice === void 0 ? void 0 : _data$data$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl"
+    });
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$slice = _data$data2.slice(2, 4)) === null || _data$data2$slice === void 0 ? void 0 : _data$data2$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl odd:h-[130%]"
+    });
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$slice = _data$data3.slice(4, 6)) === null || _data$data3$slice === void 0 ? void 0 : _data$data3$slice.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-full h-full object-cover rounded-xl md:rounded-2xl even:h-[130%]"
+    });
+  })))));
+};
+
 var PageTitle1 = function PageTitle1(props) {
   var _sectionData$;
   var data = props.data,
@@ -12920,7 +13487,122 @@ var PageTitle1 = function PageTitle1(props) {
     className: "relative w-full 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"
-  }, sectionData !== null && sectionData !== void 0 && sectionData.sectionTitle ? sectionData === null || sectionData === void 0 ? void 0 : sectionData.sectionTitle : route === null || route === void 0 ? void 0 : route.label)));
+  }, 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)));
+};
+
+var PageTitle2 = function PageTitle2(props) {
+  var _sectionData$;
+  var data = props.data,
+    route = props.route;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full bg-cover bg-center bg-no-repeat ",
+    style: {
+      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"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full 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"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null));
+};
+
+var Breadcrumb1 = function Breadcrumb1(props) {
+  var shopConfigStyle = props.shopConfigStyle,
+    route = props.route,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$routeClassName = props.routeClassName,
+    routeClassName = _props$routeClassName === void 0 ? "" : _props$routeClassName;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
+    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  var _useState = useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  useEffect(function () {
+    getItems();
+  }, [route]);
+  var getItems = function getItems() {
+    var _route$route, _route$route$split, _route$route$split$fi, _items, _items2;
+    var items = 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) {
+      return e === null || e === void 0 ? void 0 : e.length;
+    })) === null || _route$route$split$fi === void 0 ? void 0 : _route$route$split$fi.slice(0, 2);
+    items = (_items = items) === null || _items === void 0 ? void 0 : _items.map(function (e) {
+      var _e, _e$replace, _e$replace$replace, _e$replace$replace$re;
+      if (e === "product") e = "products";else if (e === "service") e = "services";
+      return (routes === null || routes === void 0 ? void 0 : routes.find(function (r) {
+        return (r === null || r === void 0 ? void 0 : r.name) === e;
+      })) || {
+        label: (_e = e) === null || _e === void 0 ? void 0 : (_e$replace = _e.replace(/-{3}/g, "###")) === null || _e$replace === void 0 ? void 0 : (_e$replace$replace = _e$replace.replace(/-/g, " ")) === null || _e$replace$replace === void 0 ? void 0 : (_e$replace$replace$re = _e$replace$replace.replace(/###/g, "-")) === null || _e$replace$replace$re === void 0 ? void 0 : _e$replace$replace$re.replace(/~/g, "/")
+      };
+    });
+    (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2.unshift({
+      name: "home",
+      label: "Trang chủ",
+      route: "/"
+    });
+    console.log(items);
+    setItems(items);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2 overflow-x-auto scroll-custom " + className
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "flex gap-2 flex-shrink-0"
+    }, index ? /*#__PURE__*/React__default.createElement("div", {
+      className: "text-gray4"
+    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || "#",
+      style: {
+        color: textHeading
+      },
+      className: routeClassName
+    }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
+  }));
+};
+
+var PageTitle3 = function PageTitle3(props) {
+  var _sectionData$, _route$route, _route$route$split, _route$route$split$fi, _route$route$split$fi2, _route$route$split$fi3, _route$route$split$fi4, _route$route$split$fi5;
+  var data = props.data,
+    route = props.route,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full bg-cover bg-center bg-no-repeat mb-6 md:mb-12 ",
+    style: {
+      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"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full 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) {
+    return e === null || e === void 0 ? void 0 : e.length;
+  })) === null || _route$route$split$fi === void 0 ? void 0 : (_route$route$split$fi2 = _route$route$split$fi.at(-1)) === null || _route$route$split$fi2 === void 0 ? void 0 : (_route$route$split$fi3 = _route$route$split$fi2.replace(/-{3}/g, "###")) === null || _route$route$split$fi3 === void 0 ? void 0 : (_route$route$split$fi4 = _route$route$split$fi3.replace(/-/g, " ")) === null || _route$route$split$fi4 === void 0 ? void 0 : (_route$route$split$fi5 = _route$route$split$fi4.replace(/###/g, "-")) === null || _route$route$split$fi5 === void 0 ? void 0 : _route$route$split$fi5.replace(/~/g, "/")), /*#__PURE__*/React__default.createElement(Breadcrumb1, {
+    className: "!bg-transparent !text-gray4",
+    routeClassName: "!text-textButton",
+    shopConfigStyle: shopConfigStyle,
+    route: route,
+    routes: routes,
+    Link: Link
+  })));
 };
 
 var About1 = function About1(props) {
@@ -12930,12 +13612,12 @@ 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
   }) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-wrap",
+    className: "text-wrap ck-content",
     dangerouslySetInnerHTML: {
       __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
     }
@@ -12950,17 +13632,18 @@ 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,
-    className: "w-full hidden lg:block rounded-xl"
+    className: "w-full object-cover hidden lg:block rounded-xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "ck-content text-wrap",
     dangerouslySetInnerHTML: {
@@ -12968,31 +13651,34 @@ var About5 = function About5(props) {
     }
   }), /*#__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 block lg:hidden rounded-xl"
+    className: "w-full block object-cover lg:hidden rounded-xl"
   })));
 };
 
 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"
   })));
@@ -13047,62 +13733,6 @@ var Contact1 = function Contact1(props) {
   }) : null));
 };
 
-var Breadcrumb1 = function Breadcrumb1(props) {
-  var shopConfigStyle = props.shopConfigStyle,
-    route = props.route,
-    _props$routes = props.routes,
-    routes = _props$routes === void 0 ? [] : _props$routes,
-    _props$Link = props.Link,
-    Link = _props$Link === void 0 ? null : _props$Link;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
-    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  var _useState = useState([]),
-    items = _useState[0],
-    setItems = _useState[1];
-  useEffect(function () {
-    getItems();
-  }, [route]);
-  var getItems = function getItems() {
-    var _route$route, _route$route$split, _route$route$split$fi, _items, _items2;
-    var items = 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) {
-      return e === null || e === void 0 ? void 0 : e.length;
-    })) === null || _route$route$split$fi === void 0 ? void 0 : _route$route$split$fi.slice(0, 2);
-    items = (_items = items) === null || _items === void 0 ? void 0 : _items.map(function (e) {
-      var _e, _e$replace, _e$replace$replace, _e$replace$replace$re;
-      if (e === "product") e = "products";else if (e === "service") e = "services";
-      return (routes === null || routes === void 0 ? void 0 : routes.find(function (r) {
-        return (r === null || r === void 0 ? void 0 : r.name) === e;
-      })) || {
-        label: (_e = e) === null || _e === void 0 ? void 0 : (_e$replace = _e.replace(/-{3}/g, "###")) === null || _e$replace === void 0 ? void 0 : (_e$replace$replace = _e$replace.replace(/-/g, " ")) === null || _e$replace$replace === void 0 ? void 0 : (_e$replace$replace$re = _e$replace$replace.replace(/###/g, "-")) === null || _e$replace$replace$re === void 0 ? void 0 : _e$replace$replace$re.replace(/~/g, "/")
-      };
-    });
-    (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2.unshift({
-      name: "home",
-      label: "Trang chủ",
-      route: "/"
-    });
-    console.log(items);
-    setItems(items);
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2 overflow-x-auto scroll-custom"
-  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index,
-      className: "flex gap-2 flex-shrink-0"
-    }, index ? /*#__PURE__*/React__default.createElement("div", {
-      className: "text-gray4"
-    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
-      Link: Link,
-      href: convertURL(item === null || item === void 0 ? void 0 : item.route) || "#",
-      style: {
-        color: textHeading
-      }
-    }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
-  }));
-};
-
 var getRegionApi = function getRegionApi(parentId) {
   return api({
     method: "get",
@@ -13220,96 +13850,6 @@ var RegionController = function RegionController(props) {
   };
 };
 
-var TextArea = forwardRef(function (props, ref) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    _props$textareaClassN = props.textareaClassName,
-    textareaClassName = _props$textareaClassN === void 0 ? "" : _props$textareaClassN,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
-  var _useState = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  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;
-    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' && value === '') {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      }
-    }
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
-    }
-  };
-  var handleOnChangeValue = function handleOnChangeValue(e) {
-    var value = e.target.value;
-    _setValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-  };
-  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: "" + className
-  }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1 " + labelClassName
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
-    name: "",
-    id: "",
-    className: "focus:outline-none focus:ring-0 " + textareaClassName,
-    placeholder: placeholder,
-    value: value,
-    onChange: function onChange(e) {
-      handleOnChangeValue(e);
-    }
-  }), error ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-danger"
-  }, error) : null);
-});
-
 var FormCheckout = forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -13958,7 +14498,7 @@ var SearchProduct1 = function SearchProduct1(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14017,9 +14557,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));
@@ -14048,7 +14588,7 @@ var SearchBar2 = function SearchBar2(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14110,9 +14650,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)));
 };
 
@@ -14143,7 +14683,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", {
@@ -14153,7 +14693,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);
@@ -14383,6 +14923,37 @@ var ShopHighlights7 = function ShopHighlights7(props) {
   }));
 };
 
+var ShopHighlights8 = function ShopHighlights8(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-2 lg:grid-cols-4 gap-4 md:gap-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-3"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "object-cover"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-2xl text-textBody"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex-grow text-textBody leading-relaxed"
+    }, item === null || item === void 0 ? void 0 : item.description)));
+  })));
+};
+
 var VideoFull1 = function VideoFull1(props) {
   var _data$data, _data$data$;
   var shopConfigStyle = props.shopConfigStyle,
@@ -14497,7 +15068,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"
     }
@@ -14525,7 +15096,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
@@ -14536,8 +15107,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,
@@ -14562,34 +15181,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, {
@@ -14598,22 +15217,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";
@@ -14724,10 +15333,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);
@@ -14737,39 +15346,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, {
@@ -14789,10 +15392,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);
@@ -14802,7 +15405,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)));
   }))));
 };
 
@@ -14851,7 +15458,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];
@@ -14889,10 +15496,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) {
@@ -14900,10 +15507,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"
@@ -14914,19 +15525,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", {
@@ -14936,11 +15545,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, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
+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 };
 //# sourceMappingURL=index.modern.js.map