s-platform-landing-section 0.1.33 → 0.1.35

package/dist/index.js

@@ -21,6 +21,7 @@ require('slick-carousel/slick/slick.css');
 require('slick-carousel/slick/slick-theme.css');
 var ai = require('react-icons/ai');
 var go = require('react-icons/go');
+var gr = require('react-icons/gr');
 var ri = require('react-icons/ri');
 var hi = require('react-icons/hi');
 var gi = require('react-icons/gi');
@@ -428,18 +429,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) {
@@ -499,11 +499,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() {
@@ -531,12 +530,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() {
@@ -730,11 +729,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) {
@@ -792,11 +791,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() {
@@ -824,12 +823,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() {
@@ -965,6 +964,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 = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -1200,11 +1217,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)",
@@ -1273,7 +1289,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,
@@ -1290,7 +1306,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,
@@ -1302,7 +1320,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;
@@ -1397,7 +1459,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",
@@ -7502,7 +7564,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) {
@@ -7553,7 +7615,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({
@@ -7648,9 +7710,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;
@@ -7757,8 +7816,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) {
@@ -8064,7 +8121,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 = React.useState(),
     displayPrice = _useState[0],
     setDisplayPrice = _useState[1];
@@ -8098,33 +8159,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) {
@@ -8232,7 +8294,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"
@@ -8287,10 +8349,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),
@@ -8516,7 +8580,7 @@ var Select = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     var delayDebounceFn = setTimeout(function () {
       handleSearch === null || handleSearch === void 0 ? void 0 : handleSearch(inputSearch);
-    }, 500);
+    }, 600);
     return function () {
       return clearTimeout(delayDebounceFn);
     };
@@ -8647,7 +8711,7 @@ var Select = React.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,
@@ -9473,8 +9537,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;
@@ -9531,7 +9595,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,
@@ -9729,7 +9795,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,
@@ -9864,7 +9930,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,
@@ -9900,6 +9966,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,
@@ -9907,27 +9974,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(fa.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"
@@ -9937,7 +10006,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"
@@ -9948,6 +10017,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,
@@ -9955,23 +10025,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,
@@ -9981,17 +10052,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", {
@@ -10006,6 +10077,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,
@@ -10015,17 +10087,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(ai.AiOutlineShoppingCart, {
@@ -10038,6 +10110,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,
@@ -10047,17 +10120,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", {
@@ -10070,32 +10143,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,
@@ -10103,17 +10215,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", {
@@ -10161,7 +10273,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",
@@ -10288,9 +10400,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"
@@ -10400,9 +10513,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;
   React.useEffect(function () {
@@ -10468,7 +10579,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"
@@ -10491,7 +10602,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, {
@@ -10515,9 +10628,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
@@ -10544,7 +10656,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));
@@ -10565,7 +10677,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, {
@@ -10596,7 +10710,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));
@@ -10645,7 +10759,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;
@@ -10717,10 +10831,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", {
@@ -10730,10 +10844,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,
@@ -10754,11 +10868,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, {
@@ -10770,6 +10884,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 = React.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,
@@ -10785,7 +10974,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, {
@@ -10826,7 +11017,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, {
@@ -10864,7 +11055,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ả",
@@ -10929,7 +11120,9 @@ var ProductSearch1 = function ProductSearch1(props) {
     });
   }, [keywordValue]);
   React.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);
@@ -10979,7 +11172,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, {
@@ -11023,7 +11216,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
@@ -11035,7 +11228,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, {
@@ -11084,7 +11277,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
@@ -11126,7 +11319,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));
@@ -11176,7 +11369,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, {
@@ -11231,7 +11424,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
     });
@@ -11814,15 +12007,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 = React.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 = React.useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = React.useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setValue: function setValue(text) {
+        return _setValue(text);
+      },
+      getValue: function getValue() {
+        return value;
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var _validateData = function _validateData() {
+    var count = 0;
+    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 = React.useState(defaultValue),
+    listProductSelected = _useState[0],
+    setListProductSelected = _useState[1];
+  var inputNameRef = React.useRef(null);
+  var inputDateRef = React.useRef(null);
+  var inputPhoneNumberRef = React.useRef(null);
+  var inputQuantityRef = React.useRef(null);
+  var _useState2 = React.useState(false),
+    isOpenPopup = _useState2[0],
+    setIsOpenPopup = _useState2[1];
+  var _useState3 = React.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(fa.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", {
@@ -11864,7 +12354,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,
@@ -12158,7 +12648,7 @@ var dataFake = [{
   title: "Đa dạng thanh toán",
   data: [{
     svgImage: "",
-    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    srcImage: /*#__PURE__*/React__default.createElement(gr.GrPowerCycle, null),
     label: "Chuyển khoản",
     link: ""
   }, {
@@ -12195,7 +12685,7 @@ var dataFake = [{
     label: "Chính sách bảo hành",
     link: ""
   }, {
-    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    srcImage: /*#__PURE__*/React__default.createElement(gr.GrPowerCycle, null),
     svgImage: "",
     label: "Chính sách đổi trả",
     link: ""
@@ -12324,11 +12814,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
     }
@@ -12433,7 +12922,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 = React.useState([]),
     shopAddressList = _useState[0],
     setShopAddressList = _useState[1];
@@ -12469,11 +12957,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
     }
@@ -12573,10 +13060,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(fa6.FaStar, {
       color: "#E2B93B"
     }));
+    if (i > 5) break;
   }
   var decimalPart = star % 1;
   if (decimalPart && decimalPart >= 0.5) {
@@ -12733,6 +13221,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(ri.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(ri.RiDoubleQuotesL, {
+      className: " mt-auto text-gray3",
+      size: 36
+    })));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -12907,6 +13435,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,
@@ -12923,7 +13490,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 = React.useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  React.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) {
@@ -12933,12 +13615,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
     }
@@ -12953,17 +13635,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: {
@@ -12971,31 +13654,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"
   })));
@@ -13050,62 +13736,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 = React.useState([]),
-    items = _useState[0],
-    setItems = _useState[1];
-  React.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",
@@ -13223,96 +13853,6 @@ var RegionController = function RegionController(props) {
   };
 };
 
-var TextArea = React.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 = React.useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = React.useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  React.useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setValue: function setValue(text) {
-        return _setValue(text);
-      },
-      getValue: function getValue() {
-        return value;
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
-  });
-  var _validateData = function _validateData() {
-    var count = 0;
-    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 = React.forwardRef(function (props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
@@ -13961,7 +14501,7 @@ var SearchProduct1 = function SearchProduct1(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14020,9 +14560,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));
@@ -14051,7 +14591,7 @@ var SearchBar2 = function SearchBar2(props) {
     } else {
       var delayDebounceFn = setTimeout(function () {
         handleSearch(valueSearch);
-      }, 500);
+      }, 600);
       return function () {
         return clearTimeout(delayDebounceFn);
       };
@@ -14113,9 +14653,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)));
 };
 
@@ -14146,7 +14686,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", {
@@ -14156,7 +14696,7 @@ var SearchBar5 = function SearchBar5(props) {
     icons: /*#__PURE__*/React__default.createElement(io5.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);
@@ -14386,6 +14926,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,
@@ -14500,7 +15071,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"
     }
@@ -14528,7 +15099,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
@@ -14539,8 +15110,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,
@@ -14565,34 +15184,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(gi.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, {
@@ -14601,22 +15220,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";
@@ -14727,10 +15336,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);
@@ -14740,39 +15349,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(gi.GiNewspaper, {
     size: 80
   }), " Kh\xF4ng c\xF3 tin t\u1EE9c n\xE0o"), (newsArticles === null || newsArticles === void 0 ? void 0 : newsArticles.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
@@ -14792,10 +15395,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);
@@ -14805,7 +15408,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)));
   }))));
 };
 
@@ -14854,7 +15461,7 @@ var NewsDetail1 = function NewsDetail1(props) {
     Link = _props$Link === void 0 ? null : _props$Link;
   var _useState = React.useState({
       catId: catId,
-      szie: 10
+      size: 10
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -14892,10 +15499,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) {
@@ -14903,10 +15510,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"
@@ -14917,19 +15528,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", {
@@ -14939,10 +15548,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", {
+      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);
 };
 
 exports.About1 = About1;
@@ -14957,6 +15570,7 @@ exports.BannerFull1 = BannerFull1;
 exports.BannerFull2 = BannerFull2;
 exports.Booking1 = Booking1;
 exports.BookingForm6 = BookingForm6;
+exports.BookingTable1 = BookingTable1;
 exports.Breadcrumb1 = Breadcrumb1;
 exports.Button = Button;
 exports.Carts1 = Carts1;
@@ -14965,6 +15579,7 @@ exports.CustomerRating1 = CustomerRating1;
 exports.CustomerRating10 = CustomerRating10;
 exports.CustomerRating5 = CustomerRating5;
 exports.CustomerRating6 = CustomerRating6;
+exports.CustomerRating8 = CustomerRating8;
 exports.DateTimePicker = DateTimePicker;
 exports.Employees1 = Employees1;
 exports.Features2 = Features2;
@@ -14972,9 +15587,11 @@ exports.Features3 = Features3;
 exports.Footer1 = Footer1;
 exports.Footer7 = Footer7;
 exports.Gallery1 = Gallery1;
+exports.Gallery2 = Gallery1$1;
 exports.Hero1 = Hero1;
 exports.Hero10 = Hero10;
-exports.Hero12 = Hero11;
+exports.Hero11 = Hero11;
+exports.Hero12 = Hero12;
 exports.Hero13 = Hero13;
 exports.Hero2 = Hero2;
 exports.Hero5 = Hero5;
@@ -14989,6 +15606,8 @@ exports.News1 = News1;
 exports.NewsDetail1 = NewsDetail1;
 exports.NewsHighlight1 = NewsHighlight1;
 exports.PageTitle1 = PageTitle1;
+exports.PageTitle2 = PageTitle2;
+exports.PageTitle3 = PageTitle3;
 exports.Partner1 = Partner1;
 exports.ProductCategory2 = ProductCategory2;
 exports.ProductDetail10 = ProductDetail10;
@@ -15003,12 +15622,14 @@ exports.ProductItem4 = ProductItem4;
 exports.ProductItem5 = ProductItem5;
 exports.ProductItem6 = ProductItem6;
 exports.ProductItem7 = ProductItem7;
+exports.ProductItem8 = ProductItem8;
 exports.ProductList5 = ProductList5;
 exports.ProductList7 = ProductList7;
 exports.ProductSale2 = ProductSale2;
 exports.ProductSearch1 = ProductSearch1;
 exports.Products10 = Products10;
 exports.Products11 = Products11;
+exports.Products12 = Products12;
 exports.Products2 = Products2;
 exports.Products3 = Products3;
 exports.Products9 = Products9;
@@ -15020,12 +15641,14 @@ exports.SearchProduct1 = SearchProduct1;
 exports.SectionTitle1 = SectionTitle1;
 exports.SectionTitle2 = SectionTitle2;
 exports.SectionTitle3 = SectionTitle3;
+exports.SectionTitle4 = SectionTitle4;
 exports.Select = Select$1;
 exports.ServiceDetail1 = ServiceDetail1;
 exports.ShopHighlights2 = ShopHighlights2;
 exports.ShopHighlights5 = ShopHighlights5;
 exports.ShopHighlights6 = ShopHighlights6;
 exports.ShopHighlights7 = ShopHighlights7;
+exports.ShopHighlights8 = ShopHighlights8;
 exports.TextArea = TextArea;
 exports.TreatmentDetail1 = TreatmentDetail1;
 exports.TreatmentItem1 = TreatmentItem1;