s-platform-landing-section 0.1.10-alpha.9 → 0.1.11

package/dist/index.modern.js

@@ -1,17 +1,18 @@
-import React__default, { useState, useRef, useEffect, createElement, forwardRef, useImperativeHandle, memo, useCallback } from 'react';
-import { IoCartOutline, IoChevronDownOutline, IoInformationCircleOutline, IoLogOutOutline, IoLocationOutline, IoChevronBackOutline, IoChevronForwardOutline, IoCallOutline } from 'react-icons/io5';
-import { FaUserCircle, FaPhone, FaChevronLeft, FaChevronRight, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowLeft, FaArrowRight as FaArrowRight$1, FaFacebookSquare, FaFacebookMessenger, FaFacebookF } from 'react-icons/fa';
-import { FiMenu } from 'react-icons/fi';
+import React__default, { useState, useRef, useEffect, forwardRef, useImperativeHandle, createElement, memo } from 'react';
+import { IoCartOutline, IoChevronDownOutline, IoInformationCircleOutline, IoLogOutOutline, IoBagOutline, IoSearchOutline, IoChevronBackOutline, IoChevronForwardOutline, IoLocationOutline, IoCallOutline } from 'react-icons/io5';
+import { FaUserCircle, FaFacebookF, FaFacebookMessenger, FaAngleUp, FaAngleDown, FaCheckCircle, FaBoxOpen, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FiMenu, FiShoppingCart, FiSearch } from 'react-icons/fi';
 import { RxCross2 } from 'react-icons/rx';
-import { PiHandbagSimpleLight } from 'react-icons/pi';
-import { CiSearch } from 'react-icons/ci';
-import { BsFilterLeft, BsCurrencyDollar } from 'react-icons/bs';
-import { FaMinus, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
+import { SiZalo, SiVisa } from 'react-icons/si';
+import { IoIosStar, IoIosArrowBack, IoIosArrowForward, IoMdCheckmark, IoIosHeartEmpty, IoMdQuote } from 'react-icons/io';
+import { FaMinus, FaRegEyeSlash, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
+import 'react-icons/pi';
+import 'react-icons/ci';
+import { BsCurrencyDollar } from 'react-icons/bs';
 import { LuSearch } from 'react-icons/lu';
-import { IoMdCheckmark, IoIosHeartEmpty } from 'react-icons/io';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { SiVisa, SiZalo } from 'react-icons/si';
+import { AiOutlineShoppingCart } from 'react-icons/ai';
 import { GoCreditCard } from 'react-icons/go';
 import { RiDeleteBin7Line } from 'react-icons/ri';
 
@@ -28,8 +29,8 @@ var Button = function Button(props) {
     onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
     _props$type = props.type,
     type = _props$type === void 0 ? "primary" : _props$type;
-  var _className = type === "primary" ? "text-textButton bg-primary" : "text-primary bg-transparent border border-primary";
-  _className = "font-medium rounded-lg text-sm px-4 py-2.5 hover:text-textButton hover:bg-primary hover:opacity-80 " + _className + " " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
+  var _className = type === "primary" ? "text-textButton bg-primary" : "text-primary border border-primary";
+  _className = "font-medium rounded-lg text-sm px-3 py-2 md:px-4 md:py-2.5 hover:text-textButton hover:bg-primary hover:opacity-80 " + _className + " " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: _className,
@@ -91,7 +92,7 @@ function _unsupportedIterableToArray(r, a) {
 
 var _excluded = ["Link"];
 var getDurationValue = function getDurationValue(attributes) {
-  var _durationAtt$value, _durationAtt$unit;
+  var _durationAtt$value;
   if (!attributes) {
     return "";
   }
@@ -99,12 +100,12 @@ var getDurationValue = function getDurationValue(attributes) {
     attributes = JSON.parse(attributes || "[]");
   }
   var durationAtt = attributes.find(function (attr) {
-    return attr.name === "Thời lượng (phút) / buổi";
+    return (attr === null || attr === void 0 ? void 0 : attr.name) === "Thời lượng (phút) / buổi";
   });
-  return durationAtt ? ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$value = durationAtt.value) === null || _durationAtt$value === void 0 ? void 0 : _durationAtt$value[0]) || "0") + " " + ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$unit = durationAtt.unit) === null || _durationAtt$unit === void 0 ? void 0 : _durationAtt$unit[0]) || "") : "";
+  return durationAtt ? ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$value = durationAtt.value) === null || _durationAtt$value === void 0 ? void 0 : _durationAtt$value[0]) || "0") + " p" : "";
 };
 var genProductSlug = function genProductSlug(productName, id) {
-  var slug = productName.toLowerCase();
+  var slug = productName === null || productName === void 0 ? void 0 : productName.toLowerCase();
   slug = slug.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, "a");
   slug = slug.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, "e");
   slug = slug.replace(/(ì|í|ị|ỉ|ĩ)/g, "i");
@@ -122,12 +123,24 @@ var getLinkProductDetail = function getLinkProductDetail(product) {
   var slug = genProductSlug(product === null || product === void 0 ? void 0 : product.productName, product === null || product === void 0 ? void 0 : product.productId);
   return "/product/" + slug + "/" + (product === null || product === void 0 ? void 0 : product.shopId);
 };
+var getLinkServiceDetail = function getLinkServiceDetail(product) {
+  var slug = genProductSlug(product === null || product === void 0 ? void 0 : product.productName, product === null || product === void 0 ? void 0 : product.productId);
+  return "/service/" + slug + "/" + (product === null || product === void 0 ? void 0 : product.shopId);
+};
 var LinkToPage = function LinkToPage(props) {
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return Link ? /*#__PURE__*/React__default.createElement(Link, otherProps, props.children) : /*#__PURE__*/React__default.createElement("a", otherProps, props.children);
 };
+var SSHOP_SPA_TOKEN = "sshop-spa-token";
+var genLinkSearch = function genLinkSearch(keyword) {
+  return "/search?keyword=" + keyword;
+};
+var configSvg = function configSvg(data) {
+  var _data$replace, _data$replace$replace;
+  return data === null || data === void 0 ? void 0 : (_data$replace = data.replace(/<path(?![^>]*fill=")[^>]*>/g, "<path fill=\"currentColor\" $&")) === null || _data$replace === void 0 ? void 0 : (_data$replace$replace = _data$replace.replace(/width="[^"]*"/, '')) === null || _data$replace$replace === void 0 ? void 0 : _data$replace$replace.replace(/height="[^"]*"/, '');
+};
 
 var Options = function Options(props) {
   var _props$className = props.className,
@@ -213,15 +226,17 @@ var NavBar7 = function NavBar7(props) {
     _props$logout = props.logout,
     logout = _props$logout === void 0 ? function () {} : _props$logout;
   var cartItems = useSelector === null || useSelector === void 0 ? void 0 : useSelector(function (state) {
-    return state.cart.items;
+    var _state$cart;
+    return state === null || state === void 0 ? void 0 : (_state$cart = state.cart) === null || _state$cart === void 0 ? void 0 : _state$cart.items;
   });
   var userInfo = useSelector === null || useSelector === void 0 ? void 0 : useSelector(function (state) {
-    return state.user.info;
+    var _state$user;
+    return state === null || state === void 0 ? void 0 : (_state$user = state.user) === null || _state$user === void 0 ? void 0 : _state$user.info;
   });
   var _useState2 = useState(""),
     totalItem = _useState2[0],
     setTotalItem = _useState2[1];
-  var profileRoute = (_routes$find = routes.find(function (e) {
+  var profileRoute = routes === null || routes === void 0 ? void 0 : (_routes$find = routes.find(function (e) {
     return (e === null || e === void 0 ? void 0 : e.name) === "profile";
   })) === null || _routes$find === void 0 ? void 0 : _routes$find.route;
   var profileOptions = [{
@@ -240,9 +255,19 @@ var NavBar7 = function NavBar7(props) {
     })
   }];
   useEffect(function () {
-    console.log("NavBar7 cartItems", cartItems);
-    var totalItem = cartItems.reduce(function (total, item) {
-      return total + item.quantity;
+    if ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "cafe_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "grocery_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "fashion_1") {
+      routes === null || routes === void 0 ? void 0 : routes.forEach(function (route) {
+        if ((route === null || route === void 0 ? void 0 : route.name) === "home" || (route === null || route === void 0 ? void 0 : route.name) === "products" || (route === null || route === void 0 ? void 0 : route.name) === "about") {
+          route.isShow = true;
+        } else {
+          route.isShow = false;
+        }
+      });
+    }
+  }, [shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode]);
+  useEffect(function () {
+    var totalItem = cartItems === null || cartItems === void 0 ? void 0 : cartItems.reduce(function (total, item) {
+      return total + (item === null || item === void 0 ? void 0 : item.quantity);
     }, 0);
     if (totalItem > 9) {
       totalItem = "9+";
@@ -288,7 +313,7 @@ var NavBar7 = function NavBar7(props) {
     }, (item === null || item === void 0 ? void 0 : item.name) === (route === null || route === void 0 ? void 0 : route.name) ? /*#__PURE__*/React__default.createElement("div", {
       className: "py-1 border-b text-textHeading border-textHeading"
     }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", {
-      className: "py-1"
+      className: "py-1 text-textBody"
     }, item === null || item === void 0 ? void 0 : item.label));
   })), cart(), userInfo ?
   /*#__PURE__*/
@@ -376,6 +401,226 @@ var NavBar7 = function NavBar7(props) {
   })))) : null));
 };
 
+var NavBar1 = function NavBar1(props) {
+  var _routes$find, _routes$filter, _routes$filter2;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$route = props.route,
+    route = _props$route === void 0 ? null : _props$route,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$useSelector = props.useSelector,
+    useSelector = _props$useSelector === void 0 ? null : _props$useSelector,
+    _props$logout = props.logout,
+    logout = _props$logout === void 0 ? function () {} : _props$logout;
+  var cartItems = useSelector === null || useSelector === void 0 ? void 0 : useSelector(function (state) {
+    var _state$cart;
+    return state === null || state === void 0 ? void 0 : (_state$cart = state.cart) === null || _state$cart === void 0 ? void 0 : _state$cart.items;
+  });
+  var userInfo = useSelector === null || useSelector === void 0 ? void 0 : useSelector(function (state) {
+    var _state$user;
+    return state === null || state === void 0 ? void 0 : (_state$user = state.user) === null || _state$user === void 0 ? void 0 : _state$user.info;
+  });
+  var _useState2 = useState(""),
+    totalItem = _useState2[0],
+    setTotalItem = _useState2[1];
+  var profileRoute = routes === null || routes === void 0 ? void 0 : (_routes$find = routes.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.name) === "profile";
+  })) === null || _routes$find === void 0 ? void 0 : _routes$find.route;
+  var profileOptions = [{
+    label: "Thông tin cá nhân",
+    href: profileRoute,
+    icon: /*#__PURE__*/React__default.createElement(IoInformationCircleOutline, {
+      size: 24,
+      className: "text-gray3"
+    })
+  }, {
+    label: "Đăng xuất",
+    onClick: logout,
+    icon: /*#__PURE__*/React__default.createElement(IoLogOutOutline, {
+      size: 24,
+      className: "text-gray3"
+    })
+  }];
+  useEffect(function () {
+    if ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "cafe_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "grocery_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "fashion_1") {
+      routes === null || routes === void 0 ? void 0 : routes.forEach(function (route) {
+        if ((route === null || route === void 0 ? void 0 : route.name) === "home" || (route === null || route === void 0 ? void 0 : route.name) === "products" || (route === null || route === void 0 ? void 0 : route.name) === "about") {
+          route.isShow = true;
+        } else {
+          route.isShow = false;
+        }
+      });
+    }
+  }, [shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode]);
+  useEffect(function () {
+    var totalItem = cartItems === null || cartItems === void 0 ? void 0 : cartItems.reduce(function (total, item) {
+      return total + (item === null || item === void 0 ? void 0 : item.quantity);
+    }, 0);
+    if (totalItem > 9) {
+      totalItem = "9+";
+    }
+    setTotalItem(totalItem);
+  }, [cartItems]);
+  var cart = function cart() {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: "/carts"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "relative cursor-pointer"
+    }, /*#__PURE__*/React__default.createElement(IoBagOutline, {
+      className: "text-primary",
+      size: 30
+    }), totalItem ? /*#__PURE__*/React__default.createElement("small", {
+      className: "absolute aspect-square flex items-center justify-center bg-danger w-5 text-xs rounded-full text-white -top-1 -right-1 pb-px ps-px"
+    }, totalItem) : null));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden lg:flex justify-end items-center gap-6 px-20 py-2 bg-primary"
+  }, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? /*#__PURE__*/React__default.createElement("div", {
+    className: "font-medium border-r pr-6 text-background"
+  }, "Hotline: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-start items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage) || "#"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
+    size: 24,
+    className: "p-1 rounded bg-background text-primary"
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) || "#"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
+    size: 24,
+    className: "p-1 rounded bg-background text-primary"
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) || "#"
+  }, /*#__PURE__*/React__default.createElement(SiZalo, {
+    size: 24,
+    className: "p-1 rounded bg-background text-primary"
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20 sticky top-0 z-50 bg-background shadow "
+  }, /*#__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
+  }), /*#__PURE__*/React__default.createElement("h3", {
+    className: "text-xl md:text-2xl whitespace-nowrap font-semibold 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"
+  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+    return e === null || e === void 0 ? void 0 : e.isShow;
+  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: item === null || item === void 0 ? void 0 : item.route,
+      key: index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "py-1 " + ((item === null || item === void 0 ? void 0 : item.name) === (route === null || route === void 0 ? void 0 : route.name) ? "border-b text-primary border-primary" : "text-textBody") + " "
+    }, item === null || item === void 0 ? void 0 : item.label));
+  })), cart(), userInfo ?
+  /*#__PURE__*/
+  React__default.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React__default.createElement(FaUserCircle, {
+    className: "text-primary",
+    size: 48
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-2"
+  }, /*#__PURE__*/React__default.createElement("label", null, "Xin ch\xE0o!"), /*#__PURE__*/React__default.createElement(Options, {
+    Link: Link,
+    options: profileOptions,
+    dropdownClassName: "right-0 top-8",
+    className: "flex gap-4 items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "font-semibold"
+  }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name), /*#__PURE__*/React__default.createElement(IoChevronDownOutline, {
+    className: "text-gray3",
+    size: 24
+  })))) :
+  /*#__PURE__*/
+  React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/account"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đăng nhập",
+    shopConfigStyle: shopConfigStyle
+  })), /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: "/account"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đăng ký",
+    shopConfigStyle: shopConfigStyle,
+    type: 'outline'
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
+  }, /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    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
+  }), /*#__PURE__*/React__default.createElement("h3", {
+    className: "text-xl md:text-2xl font-semibold text-primary"
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(FiMenu, {
+    size: 32,
+    className: "text-primary"
+  })), isOpen ? /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bg-[rgba(0,0,0,0.5)] h-screen w-full top-0 left-0 z-50 flex justify-end",
+    onClick: function onClick() {
+      setIsOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-full w-[80vw] max-w-[320px] p-4 bg-bgSecondary",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-between"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 items-center"
+  }, /*#__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"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl font-semibold line-clamp-1"
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
+    className: "text-gray4",
+    onClick: function onClick() {
+      setIsOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(RxCross2, {
+    size: 24
+  }))), /*#__PURE__*/React__default.createElement("div", null, routes === null || routes === void 0 ? void 0 : (_routes$filter2 = routes.filter(function (e) {
+    return e === null || e === void 0 ? void 0 : e.isShow;
+  })) === null || _routes$filter2 === void 0 ? void 0 : _routes$filter2.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: item === null || item === void 0 ? void 0 : item.route,
+      key: index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "py-2 " + ((item === null || item === void 0 ? void 0 : item.name) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
+    }, item === null || item === void 0 ? void 0 : item.label));
+  })))) : null));
+};
+
 var SvgIcon = function SvgIcon(_ref) {
   var className = _ref.className,
     style = _ref.style;
@@ -416,65 +661,364 @@ var SectionTitle1 = function SectionTitle1(props) {
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
-var Hero10 = function Hero10(props) {
-  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
-  var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+var SectionTitle2 = function SectionTitle2(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full bg-cover bg-center bg-no-repeat ",
-    style: {
-      backgroundImage: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0]) + ")"
-    }
+    className: "flex flex-col gap-2"
+  }, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 justify-center items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
+    className: " w-32 h-0.5 rounded-full bg-stroke"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
-  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button) {
-    return /*#__PURE__*/React__default.createElement("a", {
-      href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      label: button === null || button === void 0 ? void 0 : button.label,
-      shopConfigStyle: shopConfigStyle
-    }));
-  })));
+    className: "text-center whitespace-nowrap text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
+    className: " w-32 h-0.5 rounded-full bg-stroke"
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 justify-center"
+  }, /*#__PURE__*/React__default.createElement(IoIosStar, {
+    className: "w-4 h-4 text-warning"
+  }), /*#__PURE__*/React__default.createElement(IoIosStar, {
+    className: "w-6 h-6 text-warning"
+  }), /*#__PURE__*/React__default.createElement(IoIosStar, {
+    className: "w-4 h-4 text-warning"
+  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl text-center leading-relaxed text-textSecondary"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
-var Dash = function Dash(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? "#ccc" : _props$color,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
-    style: {
-      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
-      height: "1px"
-    }
-  });
+var SectionTitle3 = function SectionTitle3(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h3", {
+    className: "font-headingFont leading-relaxed text-textHeading text-2xl md:text-4xl font-semibold"
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("p", {
+    className: "text-xl font-medium leading-relaxed text-textSecondary mt-4 lg:mt-6"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
-var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
-
-var Hero11 = function Hero11(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;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  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", {
+var Input = 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$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$inputClassName = props.inputClassName,
+    inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "text" : _props$type,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    _props$isQuantity = props.isQuantity,
+    isQuantity = _props$isQuantity === void 0 ? false : _props$isQuantity,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? null : _props$max,
+    _props$isHidden = props.isHidden,
+    isHidden = _props$isHidden === void 0 ? false : _props$isHidden,
+    icons = props.icons,
+    suffix = props.suffix;
+  var _useState = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = useState(type),
+    typeInput = _useState3[0],
+    setTypeInput = _useState3[1];
+  var refInput = useRef();
+  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, _e$validate;
+      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;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === "validate" && e !== null && e !== void 0 && e.validate && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var handleOnChange = function handleOnChange(event) {
+    var value = event.target.value;
+    if (isQuantity) {
+      value = parseInt(value) || 1;
+    }
+    _setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  var changeQuantity = function changeQuantity(quantity) {
+    var newValue = parseInt(value) + quantity;
+    if (newValue > min && (max === null || newValue <= max)) {
+      _setValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }
+  };
+  var changeHidden = function changeHidden() {
+    if (typeInput === "text") setTypeInput("password");else {
+      setTypeInput("text");
+    }
+  };
+  var _className = "h-9 md:h-10 py-1 px-2 border border-stroke rounded-lg   " + className;
+  var _inputClassName = (isQuantity ? "text-center w-12" : "") + " focus:outline-none focus:ring-0 bg-transparent\t " + inputClassName;
+  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: wrapClassName
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1 " + labelClassName
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 items-center bg-white " + _className,
+    style: style
+  }, isQuantity ? /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick() {
+      return changeQuantity(-1);
+    }
+  }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, icons ? /*#__PURE__*/React__default.createElement("div", null, icons) : null, /*#__PURE__*/React__default.createElement("input", {
+    type: typeInput,
+    name: name,
+    value: value,
+    placeholder: placeholder,
+    onChange: handleOnChange,
+    required: required,
+    className: _inputClassName,
+    ref: refInput
+  }), suffix ? /*#__PURE__*/React__default.createElement("div", null, suffix) : null, isHidden ? /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick() {
+      changeHidden();
+    }
+  }, /*#__PURE__*/React__default.createElement(FaRegEyeSlash, {
+    className: "font-semibold"
+  })) : null, isQuantity ? /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick() {
+      return changeQuantity(1);
+    }
+  }, /*#__PURE__*/React__default.createElement(FaPlus, null)) : null), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
+
+var Hero1 = function Hero1(props) {
+  var _sectionData$, _sectionData$$srcImag, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button, _sectionData$4$button2, _sectionData$5, _sectionData$5$button, _sectionData$5$button2;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _useState = useState(""),
+    value = _useState[0],
+    setValue = _useState[1];
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$srcImag = _sectionData$.srcImages) === null || _sectionData$$srcImag === void 0 ? void 0 : _sectionData$$srcImag[0]) + ")"
+    },
+    className: "relative w-full h-[200px] md:h-[320px] lg:h-[400px] xl:h-[480px] bg-cover bg-center bg-no-repeat z-0 flex flex-col items-center justify-center mb-24"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-[80%] md:w-2/3 xl:w-1/2 md:h-2/3 flex flex-col gap-2 md:gap-8 justify-center items-center bg-background opacity-90 absolute top-5 md:top-10 px-6 py-4 rounded-tr-[40px] rounded-bl-[40px] md:rounded-tr-[80px] md:rounded-bl-[80px]"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl md:text-4xl lg:text-[40px] text-primary font-medium"
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.title), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center md:text-2xl lg:text-3xl font-medium"
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$3 = sectionData[0]) === null || _sectionData$3 === void 0 ? void 0 : _sectionData$3.description), /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$4 = sectionData[0]) === null || _sectionData$4 === void 0 ? void 0 : (_sectionData$4$button = _sectionData$4.buttons) === null || _sectionData$4$button === void 0 ? void 0 : (_sectionData$4$button2 = _sectionData$4$button[0]) === null || _sectionData$4$button2 === void 0 ? void 0 : _sectionData$4$button2.link
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$5 = sectionData[0]) === null || _sectionData$5 === void 0 ? void 0 : (_sectionData$5$button = _sectionData$5.buttons) === null || _sectionData$5$button === void 0 ? void 0 : (_sectionData$5$button2 = _sectionData$5$button[0]) === null || _sectionData$5$button2 === void 0 ? void 0 : _sectionData$5$button2.label,
+    shopConfigStyle: shopConfigStyle
+  })), "            "), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-[90%] md:w-2/3 xl:w-1/2 bg-background flex gap-2 md:gap-4 lg:gap-6 p-2 md:p-4 lg:p-6 rounded-xl absolute bottom-[-40px] shadow-lg"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    placeholder: "Tìm kiếm sản phẩm",
+    icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, null),
+    wrapClassName: "w-full",
+    inputClassName: "w-full",
+    onChange: setValue
+  }), value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: genLinkSearch(value)
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap h-full ",
+    shopConfigStyle: shopConfigStyle
+  })) : /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap ",
+    shopConfigStyle: shopConfigStyle
+  })));
+};
+
+var Hero2 = function Hero2(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
+  var shopConfig = props.shopConfig,
+    data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
+    className: "w-full object-cover min-h-[25vh] md:min-h-[30vh] max-h-[100vh]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute flex flex-col gap-1 md:gap-4 absolute w-1/2 lg:w-1/3  top-2 sm:top-[20%] xl:top-1/4 right-[2%] lg:right-[15%]"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
+    className: "h-6 w-6 md:h-16 md:w-16 lg:h-20 lg:w-20"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg md:text-3xl lg:text-4xl  font-medium"
+  }, 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), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-sm 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)));
+};
+
+var Hero5 = function Hero5(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
+    className: "w-full min-h-[25vh] md:min-h-[30vh] max-h-[100vh]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 md:gap-4 absolute top-5 md:top-[20%] w-1/2 lg:w-1/3 left-4 xl:left-20"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl md:text-3xl lg:text-4xl text-textHeading font-medium"
+  }, 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), /*#__PURE__*/React__default.createElement("div", {
+    className: "md:text-xl lg:text-2xl text-primary line-clamp-3 md:line-clamp-none"
+  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description)));
+};
+
+var Hero6 = function Hero6(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$, _sectionData$, _sectionData$$buttons;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0],
+    className: "w-full h-auto min-h-[25vh md:min-h-[30vh] max-h-[100vh]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 md:top-14 lg:top-20 w-full p-3 md:p-6  lg:p-12 z-10 flex flex-col gap-2 md:gap-4 lg:gap-6 items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary text-xl md:text-3xl lg:text-5xl leading-[1.6] md:leading-[1.6] text-center font-headingFont"
+  }, 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), /*#__PURE__*/React__default.createElement("div", {
+    className: "md:text-xl"
+  }, 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), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$buttons = _sectionData$.buttons) === null || _sectionData$$buttons === void 0 ? void 0 : _sectionData$$buttons.map(function (button) {
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      label: button === null || button === void 0 ? void 0 : button.label,
+      shopConfigStyle: shopConfigStyle
+    }));
+  })));
+};
+
+var Hero10 = function Hero10(props) {
+  var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data;
+  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(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : (_data$data$$srcImages = _data$data$.srcImages) === null || _data$data$$srcImages === void 0 ? void 0 : _data$data$$srcImages[0]) + ")"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
+  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button) {
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      label: button === null || button === void 0 ? void 0 : button.label,
+      shopConfigStyle: shopConfigStyle
+    }));
+  })));
+};
+
+var Dash = function Dash(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? "#ccc" : _props$color,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
+    style: {
+      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
+      height: "1px"
+    }
+  });
+};
+
+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;
+  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;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-2"
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
     var _it$srcImages;
@@ -510,6 +1054,89 @@ var Hero11$1 = function Hero11(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description)));
 };
 
+var CarouselItem = function CarouselItem(props) {
+  var _Object$keys;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isAll = props.isAll,
+    isAll = _props$isAll === void 0 ? true : _props$isAll,
+    _props$isNavigateButt = props.isNavigateButton,
+    isNavigateButton = _props$isNavigateButt === void 0 ? true : _props$isNavigateButt,
+    _props$itemClassName = props.itemClassName,
+    itemClassName = _props$itemClassName === void 0 ? "" : _props$itemClassName;
+  var listRef = useRef(null);
+  var _useState = useState(true),
+    isScrolledToRight = _useState[0],
+    setIsScrolledToRight = _useState[1];
+  var _useState2 = useState({}),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleClickPrevImg = function handleClickPrevImg() {
+    if (listRef.current) {
+      setIsScrolledToRight(false);
+      listRef.current.scrollBy({
+        left: -150,
+        behavior: "smooth"
+      });
+    }
+  };
+  var handleClickNextImg = function handleClickNextImg() {
+    setIsScrolledToRight(true);
+    if (listRef.current) {
+      listRef.current.scrollBy({
+        left: 150,
+        behavior: "smooth"
+      });
+    }
+  };
+  var handleOnClick = function handleOnClick(item) {
+    setValue(item);
+    onClick === null || onClick === void 0 ? void 0 : onClick(item);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-12 h-10 md:h-12 " + className,
+    style: style
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-12 lg:col-span-10 md:col-span-9 overflow-hidden "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex overflow-x-auto gap-2 hide-scrollbar items-center",
+    ref: listRef
+  }, isAll ? /*#__PURE__*/React__default.createElement("div", {
+    className: " " + ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0 ? "bg-primary text-textButton" : "bg-background") + " w-max border border-primary p-1 md:p-2 rounded-lg cursor-pointer whitespace-nowrap",
+    onClick: function onClick() {
+      handleOnClick({});
+    }
+  }, "T\u1EA5t c\u1EA3") : null, data && (data === null || data === void 0 ? void 0 : data.length) > 0 && (data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: ((value === null || value === void 0 ? void 0 : value.value) === (item === null || item === void 0 ? void 0 : item.value) ? "bg-primary text-textButton" : "bg-background") + " w-max border border-primary py-1 px-2 md:py-2 md:px-3 rounded-lg cursor-pointer whitespace-nowrap " + itemClassName,
+      key: "carousel-" + index,
+      onClick: function onClick() {
+        handleOnClick(item);
+      }
+    }, item === null || item === void 0 ? void 0 : item.label);
+  })))), isNavigateButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "p-2 h-full w-10 md:w-12 rounded-full " + (isScrolledToRight ? "bg-gray5" : "bg-primary"),
+    onClick: handleClickPrevImg
+  }, /*#__PURE__*/React__default.createElement(IoIosArrowBack, {
+    size: 32,
+    className: "inline-block text-lg text-textButton"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    className: " p-2 h-full w-10 md:w-12 rounded-full  " + (isScrolledToRight ? "bg-primary" : "bg-gray5"),
+    onClick: handleClickNextImg
+  }, /*#__PURE__*/React__default.createElement(IoIosArrowForward, {
+    size: 32,
+    className: "inline-block text-lg text-textButton"
+  }))) : null);
+};
+
 // A type of promise-like that resolves synchronously and supports only one observer
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
@@ -6599,362 +7226,109 @@ request.interceptors.response.use(function (response) {
   });
 });
 var api = function api(options) {
-  var config = _extends({
-    baseURL: getBaseUrl()
-  }, options, {
-    paramsSerializer: function paramsSerializer(params) {
-      return lib.stringify(params, {
-        arrayFormat: "repeat"
-      });
-    },
-    headers: _extends({}, options.headers)
-  });
-  return request(config);
-};
-
-var getShopCategoriesApi = function getShopCategoriesApi(shopId, types) {
-  return api({
-    method: "get",
-    url: "/landing-shop/get-product-category-on-landing",
-    params: {
-      shopId: shopId,
-      types: types,
-      isShowOnLanding: true
-    },
-    headers: {
-      shopId: shopId
-    }
-  });
-};
-var getProductListApi = function getProductListApi(shopId, params) {
-  if (params === void 0) {
-    params = {};
-  }
-  return api({
-    method: "get",
-    url: "/landing-shop/get-product-on-landing",
-    params: _extends({
-      shopId: shopId,
-      isShowOnLanding: true
-    }, params),
-    headers: {
-      shopId: shopId
-    }
-  });
-};
-var getDetailProductApi = function getDetailProductApi(shopId, productId) {
-  return api({
-    method: "get",
-    url: "/products/" + productId + "/shops/" + shopId + "/info",
-    headers: {
-      shopId: shopId
-    }
-  });
-};
-
-var CategoryController = function CategoryController(props) {
-  var shopConfig = props.shopConfig,
-    _props$types = props.types,
-    types = _props$types === void 0 ? "" : _props$types;
-  var _useState = useState([]),
-    categories = _useState[0],
-    setCategories = _useState[1];
-  useEffect(function () {
-    getCategoryList();
-  }, []);
-  var getCategoryList = function getCategoryList() {
-    try {
-      var _temp = _catch(function () {
-        return Promise.resolve(getShopCategoriesApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, types)).then(function (res) {
-          var _res$data, _res$data$status;
-          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
-            var _res$data2;
-            setCategories(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
-          }
-        });
-      }, function (e) {
-        console.log(e);
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  return {
-    categories: categories
-  };
-};
-
-var Hero13 = function Hero13(props) {
-  var listRef = useRef(null);
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var _CategoryController = CategoryController(props),
-    _CategoryController$c = _CategoryController.categories,
-    categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
-    primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
-    bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
-    _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
-  var handleClickPrevImg = function handleClickPrevImg() {
-    if (listRef.current) {
-      listRef.current.scrollBy({
-        left: -90,
-        behavior: "smooth"
-      });
-    }
-  };
-  var handleClickNextImg = function handleClickNextImg() {
-    if (listRef.current) {
-      listRef.current.scrollBy({
-        left: 90,
-        behavior: "smooth"
-      });
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      background: background
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "lg:block hidden lg:flex lg:flex-row justify-between h-20 items-center px-4 md:px-8 lg:px-12 xl:px-20",
-    style: {
-      background: bgSecondary,
-      color: textBody
-    }
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: "/",
-    className: "flex items-center"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-14 ",
-    src: "https://s3-alpha-sig.figma.com/img/05e9/1165/8608d0a8b864cc9e15fa74b32f8bfabc?Expires=1730073600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=qkNnTVXTSs7-CbaDRo5jFJm9a5drVP9BvVPKX8ToQS4fi0lKL0atq45SIxxzXQV21dgoMvHvNZwO5-lsnrq6hbeedSkTWSWLrU65pUy7X9W0d20kGMLnP5KH3RWdZ0bfgJ9ZvRBbsqMz1bIucbLNeAt8PLaHvLl4HLKz5qvKVbWb6j098vwScj6LI51qG2y01N9qu051QWzOj5ijYS7qWNXT1PTlf4o07xAThnGObDdatBIaocIQPno6srkWK~agAdBrW9IdE~l3UP5XBP~pR~zvLGiniYloQoDvAscoaYr2aTTjf6z9DQLl35WBbNGKrWcKFA80WAE69QdpNJxckQ__",
-    alt: ""
-  }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl whitespace-nowrap font-semibold ms-2",
-    style: {
-      color: primary
-    }
-  }, data !== null && data !== void 0 && data.sectionTitle ? data.sectionTitle : "Điện thoại Hải Anh")), /*#__PURE__*/React__default.createElement("div", {
-    className: " hidden lg:flex items-center py-8"
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: "/"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "border-b-2",
-    style: {
-      color: primary,
-      borderColor: primary
-    }
-  }, "Trang ch\u1EE7")), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative group  "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " mx-4  "
-  }, "Danh m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute hidden grid group-hover:grid grid-cols-3  lg:w-[400px] 2xl:w-[600px] ms-4 py-2 px-2 gap-2 leading-10 rounded-xl z-50",
-    style: {
-      background: bgSecondary
-    }
-  }, categories && categories.length > 0 && categories.map(function (item) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "hover-" + item.categoryId,
-      className: "hover:bg-gray4 hover:text-white mx-auto px-6"
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "#"
-    }, /*#__PURE__*/React__default.createElement("div", null, item.cateName)));
-  }))), /*#__PURE__*/React__default.createElement("a", {
-    href: "/introduction"
-  }, /*#__PURE__*/React__default.createElement("div", null, "Gi\u1EDBi thi\u1EC7u"))), /*#__PURE__*/React__default.createElement("div", {
-    className: "  hidden xl:flex group "
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(FaPhone, {
-    className: "inline-block mb-1 me-2",
-    style: {
-      color: primary
-    }
-  }), "  0123456789"), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " ms-5"
-  }, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
-    className: " inline-block\ttext-xl mb-1",
-    style: {
-      color: primary
-    }
-  }), " \u0110\u1ECBa ch\u1EC9 c\u1EEDa h\xE0ng"), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute grid grid-cols-1 hidden group-hover:grid  w-[420px] ms-6  leading-6 rounded-xl z-50"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default.createElement(PiHandbagSimpleLight, {
-    style: {
-      fontSize: "30px",
-      color: primary
-    }
-  }), /*#__PURE__*/React__default.createElement("small", {
-    className: " border leading-3 absolute flex items-center bg-red-500 px-[1px] text-sm rounded-full",
-    style: {
-      color: textButton,
-      fontSize: "10px",
-      width: "50%",
-      top: "1px",
-      right: "2px"
-    }
-  }, "11"))), 
-  /*#__PURE__*/
-  React__default.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: "me-3 p-2 rounded-lg ",
-    style: {
-      background: primary,
-      color: textButton
-    }
-  }, "\u0110\u0103ng nh\u1EADp"), /*#__PURE__*/React__default.createElement("button", {
-    className: "border rounded-lg p-2",
-    style: {
-      color: primary,
-      borderColor: primary
-    }
-  }, "\u0110\u0103ng k\xFD"))), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative lg:hidden block flex justify-between items-center h-12 items-center px-4 md:px-8"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: ""
-  }, isOpen === false ? /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/React__default.createElement(FiMenu, {
-    className: "text-3xl mt-2"
-  })) : /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute h-screen top-0 -ms-4 md:-ms-8 lg:-ms-12 xl:-ms-20 py-4  w-[60vw] z-50 ",
-    style: {
-      background: bgSecondary
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-between items-center px-2 mb-6"
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: "/",
-    className: "flex items-center"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-14 ",
-    src: "https://s3-alpha-sig.figma.com/img/05e9/1165/8608d0a8b864cc9e15fa74b32f8bfabc?Expires=1730073600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=qkNnTVXTSs7-CbaDRo5jFJm9a5drVP9BvVPKX8ToQS4fi0lKL0atq45SIxxzXQV21dgoMvHvNZwO5-lsnrq6hbeedSkTWSWLrU65pUy7X9W0d20kGMLnP5KH3RWdZ0bfgJ9ZvRBbsqMz1bIucbLNeAt8PLaHvLl4HLKz5qvKVbWb6j098vwScj6LI51qG2y01N9qu051QWzOj5ijYS7qWNXT1PTlf4o07xAThnGObDdatBIaocIQPno6srkWK~agAdBrW9IdE~l3UP5XBP~pR~zvLGiniYloQoDvAscoaYr2aTTjf6z9DQLl35WBbNGKrWcKFA80WAE69QdpNJxckQ__",
-    alt: ""
-  }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl font-semibold ms-2",
-    style: {
-      color: primary
-    }
-  }, data !== null && data !== void 0 && data.sectionTitle ? data.sectionTitle : "Điện thoại Hải Anh")), /*#__PURE__*/React__default.createElement("button", {
-    className: "text-4xl text-gray3",
-    onClick: function onClick() {
-      setIsOpen(false);
+  var config = _extends({
+    baseURL: getBaseUrl()
+  }, options, {
+    paramsSerializer: function paramsSerializer(params) {
+      return lib.stringify(params, {
+        arrayFormat: "repeat"
+      });
+    },
+    headers: _extends({}, options.headers)
+  });
+  return request(config);
+};
+
+var getShopCategoriesApi = function getShopCategoriesApi(shopId, types) {
+  return api({
+    method: "get",
+    url: "/landing-shop/get-product-category-on-landing",
+    params: {
+      shopId: shopId,
+      types: types,
+      isShowOnLanding: true
+    },
+    headers: {
+      shopId: shopId
     }
-  }, /*#__PURE__*/React__default.createElement(RxCross2, null))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-4"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "lg:hidden flex flex-col gap-4"
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: "/"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " border-2 rounded-lg p-4"
-  }, "Trang ch\u1EE7")), /*#__PURE__*/React__default.createElement("a", {
-    href: "/product/category"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "border-2 rounded-lg p-4"
-  }, "Danh m\u1EE5c")), /*#__PURE__*/React__default.createElement("a", {
-    href: "/introduction"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "border-2 rounded-lg p-4"
-  }, "Gi\u1EDBi thi\u1EC7u"))))))), /*#__PURE__*/React__default.createElement("a", {
-    href: "/",
-    className: "flex items-center"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-12 md:w-14 ",
-    src: "https://s3-alpha-sig.figma.com/img/05e9/1165/8608d0a8b864cc9e15fa74b32f8bfabc?Expires=1730073600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=qkNnTVXTSs7-CbaDRo5jFJm9a5drVP9BvVPKX8ToQS4fi0lKL0atq45SIxxzXQV21dgoMvHvNZwO5-lsnrq6hbeedSkTWSWLrU65pUy7X9W0d20kGMLnP5KH3RWdZ0bfgJ9ZvRBbsqMz1bIucbLNeAt8PLaHvLl4HLKz5qvKVbWb6j098vwScj6LI51qG2y01N9qu051QWzOj5ijYS7qWNXT1PTlf4o07xAThnGObDdatBIaocIQPno6srkWK~agAdBrW9IdE~l3UP5XBP~pR~zvLGiniYloQoDvAscoaYr2aTTjf6z9DQLl35WBbNGKrWcKFA80WAE69QdpNJxckQ__",
-    alt: ""
-  }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl font-semibold ",
-    style: {
-      color: primary
+  });
+};
+var getProductListApi = function getProductListApi(shopId, params) {
+  if (params === void 0) {
+    params = {};
+  }
+  return api({
+    method: "get",
+    url: "/landing-shop/get-product-on-landing",
+    params: _extends({
+      shopId: shopId,
+      isShowOnLanding: true
+    }, params),
+    headers: {
+      shopId: shopId
     }
-  }, data !== null && data !== void 0 && data.sectionTitle ? data.sectionTitle : "Điện thoại Hải Anh")), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default.createElement(PiHandbagSimpleLight, {
-    style: {
-      fontSize: "30px",
-      color: primary
+  });
+};
+var getDetailProductApi = function getDetailProductApi(shopId, productId) {
+  return api({
+    method: "get",
+    url: "/products/" + productId + "/shops/" + shopId + "/info",
+    headers: {
+      shopId: shopId
     }
-  }), /*#__PURE__*/React__default.createElement("small", {
-    className: " border leading-3 absolute flex items-center bg-red-500 px-[1px] text-sm rounded-full",
-    style: {
-      color: textButton,
-      fontSize: "10px",
-      width: "50%",
-      top: "1px",
-      right: "2px"
-    }
-  }, "11"))), /*#__PURE__*/React__default.createElement("div", {
-    div: true,
-    className: "grid grid-cols-12 flex items-center px-4 md:px-8 lg:px-12 xl:px-20  ",
-    style: {
-      background: primary,
-      color: textButton
+  });
+};
+
+var CategoryController = function CategoryController(props) {
+  var shopConfig = props.shopConfig,
+    _props$types = props.types,
+    types = _props$types === void 0 ? "" : _props$types;
+  var _useState = useState([]),
+    categories = _useState[0],
+    setCategories = _useState[1];
+  useEffect(function () {
+    getCategoryList();
+  }, []);
+  var getCategoryList = function getCategoryList() {
+    try {
+      var _temp = _catch(function () {
+        return Promise.resolve(getShopCategoriesApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, types)).then(function (res) {
+          var _res$data, _res$data$status;
+          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
+            var _res$data2, _res$data2$data;
+            var mappingCategory = res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$data = _res$data2.data) === null || _res$data2$data === void 0 ? void 0 : _res$data2$data.map(function (item) {
+              return _extends({}, item, {
+                label: item === null || item === void 0 ? void 0 : item.cateName,
+                value: item === null || item === void 0 ? void 0 : item.categoryId
+              });
+            });
+            setCategories(mappingCategory);
+          }
+        });
+      }, function (e) {
+        console.log(e);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden md:grid md:grid-cols-12 flex items-center  col-span-9 h-12 "
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "lg:col-span-2 "
-  }, /*#__PURE__*/React__default.createElement(BsFilterLeft, {
-    className: "inline-block\t text-3xl"
-  }), " ", /*#__PURE__*/React__default.createElement("span", {
-    className: "hidden lg:inline-block whitespace-nowrap "
-  }, "Danh m\u1EE5c")), /*#__PURE__*/React__default.createElement("div", {
-    className: "overflow-hidden col-span-10 lg:col-span-9 lg:pe-6  w-full relative  "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " flex my-auto h-full overflow-x-auto hide-scrollbar",
-    ref: listRef
-  }, categories && categories.length > 0 && categories.map(function (item) {
-    return /*#__PURE__*/React__default.createElement("button", {
-      key: "cateN-" + item.categoryId,
-      className: "items whitespace-nowrap border-r-2 border-r-white px-6 "
-    }, /*#__PURE__*/React__default.createElement("a", {
-      href: "/products/category?id=" + item.categoryId
-    }, item.cateName));
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "lg:block hidden lg:col-span-1 my-auto flex "
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: "",
-    onClick: handleClickPrevImg
-  }, /*#__PURE__*/React__default.createElement(FaChevronLeft, {
-    className: "inline-block\t text-2xl lg:me-2 xl:me-4 2xl:me-6"
-  })), /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleClickNextImg
-  }, /*#__PURE__*/React__default.createElement(FaChevronRight, {
-    className: "inline-block\t text-2xl"
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-12 sm:col-span-3  my-auto relative py-2"
-  }, /*#__PURE__*/React__default.createElement("input", {
-    type: "text",
-    placeholder: "T\xECm ki\u1EBFm...",
-    className: "w-full sm:v-max md:h-10 h-8 lg:ms-6 ps-12 pb-1 border text-gray3 rounded-lg"
-  }), /*#__PURE__*/React__default.createElement(CiSearch, {
-    className: "absolute text-gray3 text-2xl left-4 lg:left-10 top-1/4 "
-  }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
-    className: "h-max",
-    src: sectionData && sectionData.length > 0 && sectionData[0].srcImages && sectionData[0].srcImages.length > 0 ? sectionData[0].srcImages[0] : "",
-    alt: ""
-  })));
+  };
+  return {
+    categories: categories
+  };
+};
+
+var Hero13 = function Hero13(props) {
+  var _sectionData$, _sectionData$$srcImag;
+  var listRef = useRef(null);
+  var _useState = useState(false);
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _CategoryController = CategoryController(props);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
+    src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$srcImag = _sectionData$.srcImages) === null || _sectionData$$srcImag === void 0 ? void 0 : _sectionData$$srcImag[0],
+    className: "w-full"
+  }));
 };
 
 var Features1 = function Features1(props) {
@@ -6984,7 +7358,13 @@ var Features1 = function Features1(props) {
       className: "absolute w-40 h-24 rounded-2xl z-10 bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
+      }
+    })) : /*#__PURE__*/React__default.createElement("div", {
       className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
       style: {
         backgroundImage: "url(" + it.srcImage + ")"
@@ -7007,13 +7387,18 @@ var Features2 = function Features2(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 grid grid-cols-4 gap-8 rounded-xl bg-bgSecondary"
+    className: "p-6 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 lg:gap-8 rounded-xl bg-bgSecondary"
   }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2 items-center text-sm lg:text-lg font-semibold text-center",
       key: "dfgg-" + index
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: item === null || item === void 0 ? void 0 : item.svgImage,
+    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary md:w-16 lg:w-20 xl:w-24 h-24",
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    }) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
       className: "w-12 md:w-16 lg:w-20 xl:w-24 text-primary",
       alt: "logo"
     }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title));
@@ -7021,11 +7406,16 @@ var Features2 = function Features2(props) {
 };
 
 var Features3 = function Features3(props) {
+  var _data$sectionTitle;
   var shopConfigStyle = props.shopConfigStyle,
     shopConfig = props.shopConfig,
-    data = props.data;
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  data.sectionTitle = data.sectionTitle.replace("{shopName}", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName);
+  data.sectionTitle = data === null || data === void 0 ? void 0 : (_data$sectionTitle = data.sectionTitle) === null || _data$sectionTitle === void 0 ? void 0 : _data$sectionTitle.replace("{shopName}", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName);
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
     textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
@@ -7034,28 +7424,37 @@ var Features3 = function Features3(props) {
     _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
     bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: " w-full pt-10 px-4 xl:px-20",
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-4 lg:gap-6",
     style: {
       background: background,
       color: textBody
     }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl md:text-3xl lg:text-4xl font-semibold mb-6"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("p", {
-    className: "text-gray3 text-lg sm:text-xl md:text-2xl"
-  }, data === null || data === void 0 ? void 0 : data.sectionDescription), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 sm:grid-cols-4 gap-6 mt-6 text-sm md:text-base"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-4 gap-6 text-sm md:text-base"
   }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: (item === null || item === void 0 ? void 0 : item.link) || (item === null || item === void 0 ? void 0 : item.route)
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "grid grid-cols-2 p-3 rounded-lg font-semibold",
       key: "dfsdfj-" + index,
       style: {
         background: bgSecondary
       }
-    }, /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("img", {
+    }, /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title), item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 h-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    })) : /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "w-12 text-primary md:w-20 lg:w-24 xl:w-32 object-cover",
       alt: ""
-    }));
+    })));
   })));
 };
 
@@ -7085,8 +7484,8 @@ var ProductController = function ProductController(props) {
   }, [params, isAutoGetList]);
   var getProductList = function getProductList() {
     try {
+      setLoading(true);
       var _temp = _catch(function () {
-        setLoading(true);
         var filterParams = _extends({}, defaultParams, params);
         console.log("filterParams params", params);
         console.log("filterParams", filterParams);
@@ -7100,6 +7499,7 @@ var ProductController = function ProductController(props) {
           setLoading(false);
         });
       }, function (e) {
+        setLoading(false);
         console.log(e);
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
@@ -7107,10 +7507,35 @@ var ProductController = function ProductController(props) {
       return Promise.reject(e);
     }
   };
+  var getProductListSearch = function getProductListSearch(data) {
+    try {
+      setLoading(true);
+      return Promise.resolve(_catch(function () {
+        var filterParams = _extends({}, defaultParams, data);
+        return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, filterParams)).then(function (res) {
+          var _res$data4, _res$data4$status;
+          if ((res === null || res === void 0 ? void 0 : (_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$status = _res$data4.status) === null || _res$data4$status === void 0 ? void 0 : _res$data4$status.code) == 200) {
+            var _res$data5;
+            setLoading(false);
+            return res === null || res === void 0 ? void 0 : (_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : _res$data5.data;
+          } else {
+            setLoading(false);
+            return [];
+          }
+        });
+      }, function (e) {
+        setLoading(false);
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return {
     products: products,
     loading: loading,
-    page: page
+    page: page,
+    getProductListSearch: getProductListSearch
   };
 };
 
@@ -7293,156 +7718,32 @@ var BookingController = function BookingController(props) {
   var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
     try {
       return Promise.resolve(_catch(function () {
+        var _Date;
         var data = {
           appId: "SSPA",
           customerName: customerName,
-          customerPhone: customerPhone.replace("+", ""),
+          customerPhone: customerPhone === null || customerPhone === void 0 ? void 0 : customerPhone.replace("+", ""),
           isSellService: true,
-          scheduleDate: new Date(scheduleDate).getTime(),
+          scheduleDate: (_Date = new Date(scheduleDate)) === null || _Date === void 0 ? void 0 : _Date.getTime(),
           services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
             var productName = _ref.productName,
-              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-            return rest;
-          }),
-          shopId: shopId
-        };
-        return Promise.resolve(createSpaScheduleApi(shopId, data));
-      }, function (e) {
-        console.log(e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  return {
-    createSchedule: createSchedule
-  };
-};
-
-var Input = 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$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$inputClassName = props.inputClassName,
-    inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "text" : _props$type,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    _props$isQuantity = props.isQuantity,
-    isQuantity = _props$isQuantity === void 0 ? false : _props$isQuantity,
-    _props$min = props.min,
-    min = _props$min === void 0 ? 0 : _props$min,
-    _props$max = props.max,
-    max = _props$max === void 0 ? null : _props$max;
-  var _useState = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  var refInput = useRef();
-  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 handleOnChange = function handleOnChange(event) {
-    var value = event.target.value;
-    if (isQuantity) {
-      value = parseInt(value) || 1;
+              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+            return rest;
+          }),
+          shopId: shopId
+        };
+        return Promise.resolve(createSpaScheduleApi(shopId, data));
+      }, function (e) {
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
     }
-    _setValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
   };
-  var changeQuantity = function changeQuantity(quantity) {
-    var newValue = parseInt(value) + quantity;
-    if (newValue > min && (max === null || newValue <= max)) {
-      _setValue(newValue);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    }
+  return {
+    createSchedule: createSchedule
   };
-  var _className = "h-10 py-1 px-2 border border-stroke rounded  " + className;
-  var _inputClassName = (isQuantity ? "text-center w-12" : "") + " " + inputClassName + " focus:outline-none focus:ring-0";
-  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: wrapClassName
-  }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1 " + labelClassName
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 " + _className
-  }, isQuantity ? /*#__PURE__*/React__default.createElement("button", {
-    onClick: function onClick() {
-      return changeQuantity(-1);
-    }
-  }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, /*#__PURE__*/React__default.createElement("input", {
-    type: type,
-    name: name,
-    value: value,
-    placeholder: placeholder,
-    onChange: handleOnChange,
-    required: required,
-    className: _inputClassName,
-    ref: refInput
-  }), isQuantity ? /*#__PURE__*/React__default.createElement("button", {
-    onClick: function onClick() {
-      return changeQuantity(1);
-    }
-  }, /*#__PURE__*/React__default.createElement(FaPlus, null)) : null), error ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-danger"
-  }, error) : null);
-});
+};
 
 var Select = forwardRef(function (props, ref) {
   var _props$label = props.label,
@@ -7453,14 +7754,18 @@ var Select = forwardRef(function (props, ref) {
     placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
     _props$rules = props.rules,
     rules = _props$rules === void 0 ? [] : _props$rules,
     options = props.options,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
     handleSearchOption = props.handleSearchOption,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
     _props$isMulti = props.isMulti,
     isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
     _props$onClick = props.onClick,
@@ -7470,7 +7775,8 @@ var Select = forwardRef(function (props, ref) {
     _props$funcDelete = props.funcDelete,
     funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
     _props$isSearch = props.isSearch,
-    isSearch = _props$isSearch === void 0 ? true : _props$isSearch;
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -7492,21 +7798,12 @@ var Select = forwardRef(function (props, ref) {
     dropdownPosition = _useState6[0],
     setDropdownPosition = _useState6[1];
   var inputRef = useRef(null);
-  useEffect(function () {
-    if (isMulti) return;else {
-      setIsOpen(false);
-      setInputSearch("");
-      setListOptions(options);
-    }
-  }, [value]);
   useEffect(function () {
     if (isMulti) setValue(defaultValue);
   }, [defaultValue]);
   useEffect(function () {
     setListOptions(options);
-    if (!isMulti) {
-      setValue({});
-    }
+    if (!isMulti) setValue(defaultValue);
   }, [options]);
   useEffect(function () {
     var _inputRef$current;
@@ -7611,8 +7908,12 @@ var Select = forwardRef(function (props, ref) {
     });
     return (value === null || value === void 0 ? void 0 : value.value) == valueId;
   };
-  var handleSelection = function handleSelection(item) {
-    if (isMulti === false) setValue(item);
+  var handleSelection = function handleSelection(item, e) {
+    e.stopPropagation();
+    if (!isMulti) {
+      setValue(item);
+      setIsOpen(false);
+    }
     onClick === null || onClick === void 0 ? void 0 : onClick(item);
   };
   var handleDeleteSelection = function handleDeleteSelection(e, item) {
@@ -7628,21 +7929,24 @@ var Select = forwardRef(function (props, ref) {
   }, " *") : null;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: selectRef,
-    className: wrapClassName + " relative "
+    className: "relative " + wrapClassName
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: labelClassName + " mb-1"
+    className: "mb-1 " + labelClassName
   }, label, " ", labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: className + " flex flex-col gap-2 rounded-lg"
+    className: "flex flex-col gap-2 rounded-lg w-full bg-white border " + className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "w-full h-10 bg-transparent flex justify-between items-center px-3 py-2",
+    className: "w-full h-10 bg-transparent flex justify-between items-center px-3 py-2 " + selectClassName,
     onClick: handleToggleSelect
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-between items-center w-full"
   }, isEmpty(value) || isMulti ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-gray3 line-clamp-1"
   }, placeholder) : /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1"
-  }, value === null || value === void 0 ? void 0 : value.label), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full text-start pointer-events-none line-clamp-1",
+    dangerouslySetInnerHTML: {
+      __html: value === null || value === void 0 ? void 0 : value.label
+    }
+  }), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick(e) {
       handleDeleteSelection(e, value);
     }
@@ -7657,7 +7961,7 @@ var Select = forwardRef(function (props, ref) {
     style: {
       background: "#FFFFFF"
     },
-    className: className + " overflow-y-auto max-h-72  absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2')
+    className: "overflow-y-auto max-h-72  absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2') + " " + optionClassName
   }, /*#__PURE__*/React__default.createElement("div", null, isSearch ? /*#__PURE__*/React__default.createElement("div", {
     className: "px-3 flex items-center border-b-[1px]"
   }, /*#__PURE__*/React__default.createElement(LuSearch, {
@@ -7675,12 +7979,12 @@ var Select = forwardRef(function (props, ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: "gjfd-" + index,
       className: "px-2 cursor-default py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
-      onClick: function onClick() {
-        handleSelection(item);
+      onClick: function onClick(e) {
+        handleSelection(item, e);
       }
     }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
       className: (checkSelection(item === null || item === void 0 ? void 0 : item.value) ? "" : 'invisible') + " inline me-2 w-4"
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), renderItem ? renderItem(item) : /*#__PURE__*/React__default.createElement("div", {
       className: " whitespace-nowrap line-clamp-1"
     }, item === null || item === void 0 ? void 0 : item.label));
   }) : /*#__PURE__*/React__default.createElement("div", {
@@ -7696,6 +8000,8 @@ var DateTimePicker = forwardRef(function (props, ref) {
     label = _props$label === void 0 ? "" : _props$label,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
     rules = props.rules;
@@ -7734,7 +8040,7 @@ var DateTimePicker = forwardRef(function (props, ref) {
   });
   var _validateData = function _validateData() {
     var count = 0;
-    rules.forEach(function (e) {
+    rules === null || rules === void 0 ? void 0 : rules.forEach(function (e) {
       var _e$pattern;
       if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
         _setError(e === null || e === void 0 ? void 0 : e.message);
@@ -7762,7 +8068,7 @@ var DateTimePicker = forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
     selected: value,
     onChange: function onChange(date) {
@@ -7795,12 +8101,22 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
     rules = _props$rules === void 0 ? [] : _props$rules,
     _props$wrapClassName = props.wrapClassName,
     wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    inputClassName = props.inputClassName;
-  var _useState = useState(defaultValue),
+    _props$inputClassName = props.inputClassName,
+    inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [{
+      label: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--twemoji\" preserveAspectRatio=\"xMidYMid meet\"><path fill=\"#DA251D\" d=\"M32 5H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z\"></path><path fill=\"#FF0\" d=\"M19.753 16.037L18 10.642l-1.753 5.395h-5.672l4.589 3.333l-1.753 5.395L18 21.431l4.589 3.334l-1.753-5.395l4.589-3.333z\"></path></svg>",
+      country: "Việt Nam",
+      value: "+84"
+    }] : _props$options;
+  var _useState = useState(""),
     value = _useState[0],
     _setValue = _useState[1];
   var _useState2 = useState({
-      label: "+84",
+      label: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--twemoji\" preserveAspectRatio=\"xMidYMid meet\"><path fill=\"#DA251D\" d=\"M32 5H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z\"></path><path fill=\"#FF0\" d=\"M19.753 16.037L18 10.642l-1.753 5.395h-5.672l4.589 3.333l-1.753 5.395L18 21.431l4.589 3.334l-1.753-5.395l4.589-3.333z\"></path></svg>",
+      country: "Việt Nam",
       value: "+84"
     }),
     countryCode = _useState2[0],
@@ -7808,6 +8124,11 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   var _useState3 = useState(""),
     error = _useState3[0],
     _setError = _useState3[1];
+  useEffect(function () {
+    if (defaultValue) {
+      _setValue("+" + defaultValue);
+    }
+  }, []);
   var handleOnChange = function handleOnChange(event) {
     var value = event.target.value;
     _setValue(value);
@@ -7822,8 +8143,10 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
         return _setValue(text);
       },
       getValue: function getValue() {
-        var phoneNumber = (countryCode === null || countryCode === void 0 ? void 0 : countryCode.value) + (value === null || value === void 0 ? void 0 : value.slice(1));
-        return phoneNumber;
+        if (!(value !== null && value !== void 0 && value.startsWith(countryCode === null || countryCode === void 0 ? void 0 : countryCode.value))) {
+          return (countryCode === null || countryCode === void 0 ? void 0 : countryCode.value) + (value === null || value === void 0 ? void 0 : value.replace(/^0/, ''));
+        }
+        return value;
       },
       setError: function setError(err) {
         return _setError(err);
@@ -7858,25 +8181,37 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-danger"
   }, " *") : null;
-  var _inputClassName = "h-10 px-2 focus:outline-none focus:ring-0 " + inputClassName;
-  var data = useCallback([{
-    label: "+84",
-    value: "+84"
-  }], []);
+  var _inputClassName = "h-full w-full px-2 focus:outline-none focus:ring-0 " + inputClassName;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapClassName + " flex flex-col"
+    className: "flex flex-col " + wrapClassName
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center h-10 rounded-lg  px-2 py-1 " + className
+    className: "flex items-center h-10 rounded-lg border " + className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "flex items-center border-r-2"
+    className: "border-r-2 "
   }, /*#__PURE__*/React__default.createElement(Select$1, {
-    className: 'w-max',
+    className: 'w-max border-0 !rounded-none !rounded-l-lg',
     defaultValue: countryCode,
-    options: data,
+    options: options,
+    optionClassName: "w-max",
     placeholder: "+84",
-    onClick: setCountryCode
+    onClick: setCountryCode,
+    selectClassName: "h-full !rounded-none py-[7px] ps-2 pr-1",
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex gap-3 items-center w-full"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: item === null || item === void 0 ? void 0 : item.label
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "text-start flex-1 text-sm"
+      }, item === null || item === void 0 ? void 0 : item.country), /*#__PURE__*/React__default.createElement("div", {
+        className: "text-gray3"
+      }, item === null || item === void 0 ? void 0 : item.value));
+    },
+    wrapClassName: "w-full"
   })), /*#__PURE__*/React__default.createElement("input", {
     type: type,
     name: name,
@@ -7884,7 +8219,7 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
     placeholder: placeholder,
     onChange: handleOnChange,
     required: required,
-    className: _inputClassName
+    className: "bg-white rounded-r-lg " + _inputClassName
   })), error ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-danger"
   }, error) : null);
@@ -7899,7 +8234,7 @@ var formatCurrency = function formatCurrency(amount) {
   return formattedAmount + " \u20AB";
 };
 var pattern = {
-  phoneNumberPattern: /^0[0-9]{9}$/
+  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
 };
 var numberPattern = /^\d+$/;
 
@@ -7907,6 +8242,147 @@ var dayjs_min = createCommonjsModule(function (module, exports) {
 !function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
 });
 
+var js_cookie = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+   module.exports = factory() ;
+})(commonjsGlobal, (function () {
+  /* eslint-disable no-var */
+  function assign (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        target[key] = source[key];
+      }
+    }
+    return target
+  }
+  /* eslint-enable no-var */
+
+  /* eslint-disable no-var */
+  var defaultConverter = {
+    read: function (value) {
+      if (value[0] === '"') {
+        value = value.slice(1, -1);
+      }
+      return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
+    },
+    write: function (value) {
+      return encodeURIComponent(value).replace(
+        /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+        decodeURIComponent
+      )
+    }
+  };
+  /* eslint-enable no-var */
+
+  /* eslint-disable no-var */
+
+  function init (converter, defaultAttributes) {
+    function set (name, value, attributes) {
+      if (typeof document === 'undefined') {
+        return
+      }
+
+      attributes = assign({}, defaultAttributes, attributes);
+
+      if (typeof attributes.expires === 'number') {
+        attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+      }
+      if (attributes.expires) {
+        attributes.expires = attributes.expires.toUTCString();
+      }
+
+      name = encodeURIComponent(name)
+        .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
+        .replace(/[()]/g, escape);
+
+      var stringifiedAttributes = '';
+      for (var attributeName in attributes) {
+        if (!attributes[attributeName]) {
+          continue
+        }
+
+        stringifiedAttributes += '; ' + attributeName;
+
+        if (attributes[attributeName] === true) {
+          continue
+        }
+
+        // Considers RFC 6265 section 5.2:
+        // ...
+        // 3.  If the remaining unparsed-attributes contains a %x3B (";")
+        //     character:
+        // Consume the characters of the unparsed-attributes up to,
+        // not including, the first %x3B (";") character.
+        // ...
+        stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+      }
+
+      return (document.cookie =
+        name + '=' + converter.write(value, name) + stringifiedAttributes)
+    }
+
+    function get (name) {
+      if (typeof document === 'undefined' || (arguments.length && !name)) {
+        return
+      }
+
+      // To prevent the for loop in the first place assign an empty array
+      // in case there are no cookies at all.
+      var cookies = document.cookie ? document.cookie.split('; ') : [];
+      var jar = {};
+      for (var i = 0; i < cookies.length; i++) {
+        var parts = cookies[i].split('=');
+        var value = parts.slice(1).join('=');
+
+        try {
+          var found = decodeURIComponent(parts[0]);
+          jar[found] = converter.read(value, found);
+
+          if (name === found) {
+            break
+          }
+        } catch (e) {}
+      }
+
+      return name ? jar[name] : jar
+    }
+
+    return Object.create(
+      {
+        set,
+        get,
+        remove: function (name, attributes) {
+          set(
+            name,
+            '',
+            assign({}, attributes, {
+              expires: -1
+            })
+          );
+        },
+        withAttributes: function (attributes) {
+          return init(this.converter, assign({}, this.attributes, attributes))
+        },
+        withConverter: function (converter) {
+          return init(assign({}, this.converter, converter), this.attributes)
+        }
+      },
+      {
+        attributes: { value: Object.freeze(defaultAttributes) },
+        converter: { value: Object.freeze(converter) }
+      }
+    )
+  }
+
+  var api = init(defaultConverter, { path: '/' });
+  /* eslint-enable no-var */
+
+  return api;
+
+}));
+});
+
 var BookingForm = function BookingForm(props) {
   var _props$shopConfig = props.shopConfig,
     shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
@@ -7919,8 +8395,8 @@ var BookingForm = function BookingForm(props) {
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
+    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
   var _useState = useState(false);
   var _useState2 = useState({
       types: "1,10"
@@ -7950,11 +8426,11 @@ var BookingForm = function BookingForm(props) {
   var _EmployeeController = EmployeeController(_extends({}, props)),
     _EmployeeController$l = _EmployeeController.listEmployment,
     listEmployment = _EmployeeController$l === void 0 ? [] : _EmployeeController$l;
+  var token = js_cookie === null || js_cookie === void 0 ? void 0 : js_cookie.get(SSHOP_SPA_TOKEN);
   var _ProductController = ProductController(_extends({}, props, {
       params: productsParams
     })),
     products = _ProductController.products;
-  console.log("BookingForm products", products);
   var _BookingController = BookingController(props),
     _BookingController$cr = _BookingController.createSchedule,
     createSchedule = _BookingController$cr === void 0 ? function () {} : _BookingController$cr;
@@ -8055,9 +8531,9 @@ var BookingForm = function BookingForm(props) {
           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$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.getValue();
           var services = listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item) {
-            var _item$productInfo6, _item$technical;
+            var _item$technical;
             return {
-              productId: item === null || item === void 0 ? void 0 : (_item$productInfo6 = item.productInfo) === null || _item$productInfo6 === void 0 ? void 0 : _item$productInfo6.productId,
+              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
@@ -8095,9 +8571,9 @@ var BookingForm = function BookingForm(props) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid gap-4 rounded-lg p-6 " + className,
+    className: "grid gap-4 rounded-2xl p-6 border  " + className,
     style: {
-      backgroundColor: secondary
+      backgroundColor: background
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-4"
@@ -8123,8 +8599,7 @@ var BookingForm = function BookingForm(props) {
       pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
       message: "Số điện thoại không hợp lệ!"
     }],
-    className: "w-full rounded-lg rounded-lg bg-bgSecondary",
-    inputClassName: "w-full"
+    className: "bg-bgSecondary"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -8135,7 +8610,7 @@ var BookingForm = function BookingForm(props) {
     defaultValue: listProductSelected,
     onClick: handleSelectedProduct,
     handleSearchOption: handleSearchProducts,
-    className: "bg-bgSecondary rounded-lg",
+    className: "bg-bgSecondary",
     rules: [{
       type: "required",
       message: "Bắt buộc chọn dịch vụ"
@@ -8155,9 +8630,8 @@ var BookingForm = function BookingForm(props) {
   })), (listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1"
   }, /*#__PURE__*/React__default.createElement("div", null, "D\u1ECBch v\u1EE5 \u0111\xE3 ch\u1ECDn"), listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item, optionIndex) {
-    var _item$productInfo7;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "w-full bg-transparent border-b-2 py-3 grid grid-col-12 gap-2",
+      className: "w-full bg-transparent border-b py-3 grid grid-col-12 gap-2",
       key: "ohoihtr-" + optionIndex
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "col-span-12 grid grid-cols-12"
@@ -8167,7 +8641,7 @@ var BookingForm = function BookingForm(props) {
       className: "col-span-10"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "col-span-10 font-semibold "
-    }, item === null || item === void 0 ? void 0 : (_item$productInfo7 = item.productInfo) === null || _item$productInfo7 === void 0 ? void 0 : _item$productInfo7.productName)), /*#__PURE__*/React__default.createElement("div", {
+    }, item === null || item === void 0 ? void 0 : item.label)), /*#__PURE__*/React__default.createElement("div", {
       className: "col-span-1 flex justify-center px-2"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center justify-center cursor-pointer",
@@ -8213,8 +8687,8 @@ var BookingForm = function BookingForm(props) {
       options: listEmploymentMapping,
       isButtonDelete: true,
       funcDelete: function funcDelete(technical) {
-        var _item$productInfo8;
-        removeTechnicalSelected(item === null || item === void 0 ? void 0 : (_item$productInfo8 = item.productInfo) === null || _item$productInfo8 === void 0 ? void 0 : _item$productInfo8.productId);
+        var _item$productInfo6;
+        removeTechnicalSelected(item === null || item === void 0 ? void 0 : (_item$productInfo6 = item.productInfo) === null || _item$productInfo6 === void 0 ? void 0 : _item$productInfo6.productId);
       }
     }))));
   })) : null, /*#__PURE__*/React__default.createElement("div", {
@@ -8227,7 +8701,7 @@ var BookingForm = function BookingForm(props) {
     onCloseFormBooking: onCloseFormBooking,
     onClose: handleClosePopup
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "bg-white rounded-lg shadow-lg p-6 max-w-sm text-center md:min-w-[650px] min-h-[420px] md:min-h-[380px] lg:h-auto "
+    className: "bg-white rounded-lg shadow-lg p-6 max-w-sm flex flex-col items-center justify-center min-w-[320px] md:min-w-[650px] min-h-[420px] md:min-h-[380px] lg:h-auto "
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "h-20 mb-4 flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement(FaCheckCircle, {
@@ -8241,12 +8715,14 @@ var BookingForm = function BookingForm(props) {
     className: "mb-2"
   }, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerPhone), /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
-  }, "Th\u1EDDi gian: ", dayjs_min(dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.scheduleDate).format("DD/MM/YYYY")), /*#__PURE__*/React__default.createElement("p", {
-    className: "mb-4"
+  }, "Th\u1EDDi gian: ", dayjs_min(dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.scheduleDate).format("DD/MM/YYYY")), token ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "mb-4 text-center"
   }, "B\u1EA1n \u0111\xE3 c\xF3 t\xE0i kho\u1EA3n, vui l\xF2ng \u0111\u0103ng nh\u1EADp \u0111\u1EC3 xem chi ti\u1EBFt c\xE1c s\u1EA3n ph\u1EA9m, d\u1ECBch v\u1EE5 li\u1EC7u tr\xECnh m\xE0 b\u1EA1n \u0111ang s\u1EDF h\u1EEFu"), /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
     shopConfigStyle: shopConfigStyle
-  }))));
+  })))));
 };
 
 var Treatments1 = function Treatments1(props) {
@@ -8341,7 +8817,7 @@ var Treatments1 = function Treatments1(props) {
   }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
   }, /*#__PURE__*/React__default.createElement(BookingForm, {
-    className: "overflow-y-auto hide-scrollbar max-h-[80vh]",
+    className: "overflow-y-auto hide-scrollbar max-h-[80vh] !bg-bgSecondary",
     onCloseFormBooking: handleCloseModal,
     defaultValue: dataBooking,
     shopConfig: shopConfig,
@@ -8521,11 +8997,14 @@ var ProductPrice = function ProductPrice(props) {
       }
       setDisplayPrice(_displayPrice);
       setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
+    } else {
+      var _displayPrice2 = formatCurrency(product === null || product === void 0 ? void 0 : product.price);
+      setDisplayPrice(_displayPrice2);
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, displayPriceBeforeDiscount !== displayPrice ? /*#__PURE__*/React__default.createElement("span", {
+  }, 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",
@@ -8638,6 +9117,71 @@ var Treatments1$1 = function Treatments1(props) {
   }));
 };
 
+var NotFoundProduct = function NotFoundProduct() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
+  }, /*#__PURE__*/React__default.createElement(FaBoxOpen, {
+    size: 80
+  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+};
+
+var TreatmentsList6 = function TreatmentsList6(props) {
+  var _products$slice;
+  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,
+    _props$TreatmentItem = props.TreatmentItem,
+    TreatmentItem = _props$TreatmentItem === void 0 ? null : _props$TreatmentItem,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  var _useState = useState({
+      size: 12,
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = useState(true),
+    isGetMore = _useState2[0],
+    setIsGetMore = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    products = _ProductController.products,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-8 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, params.size - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(TreatmentItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      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, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    type: "outline"
+  }) : null);
+};
+
 var ProductDetailController = function ProductDetailController(props) {
   var shopConfig = props.shopConfig,
     _props$productId = props.productId,
@@ -8706,17 +9250,176 @@ var ServiceDetail1 = function ServiceDetail1(props) {
     dangerouslySetInnerHTML: {
       __html: product === null || product === void 0 ? void 0 : product.description
     }
-  }) : /*#__PURE__*/React__default.createElement("div", {
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 mt-2"
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
+};
+
+var CartController = function CartController(props) {
+  var addToCart = props.addToCart,
+    dispatch = props.dispatch;
+  useEffect(function () {}, []);
+  var addProductToCart = function addProductToCart(product, variant, quantity) {
+    try {
+      try {
+        dispatch(addToCart({
+          product: product,
+          variant: variant,
+          quantity: quantity
+        }));
+      } catch (e) {
+        console.log(e);
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    addProductToCart: addProductToCart
+  };
+};
+
+var TreatmentDetail1 = function TreatmentDetail1(props) {
+  var _product$images;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig;
+  var _ProductDetailControl = ProductDetailController(props),
+    product = _ProductDetailControl.product;
+  var _useState = useState(),
+    displayImage = _useState[0],
+    setDisplayImage = _useState[1];
+  var _useState2 = useState(false),
+    isSeeMore = _useState2[0],
+    setIsSeeMore = _useState2[1];
+  var _useState3 = useState(true),
+    hiddenButton = _useState3[0],
+    setHiddenButton = _useState3[1];
+  var descriptionRef = useRef();
+  var _useState4 = useState(false),
+    isBooking = _useState4[0],
+    setIsBooking = _useState4[1];
+  var _useState5 = useState([]),
+    dataBooking = _useState5[0],
+    setDataBooking = _useState5[1];
+  useEffect(function () {
+    if (product) {
+      if (descriptionRef.current) {
+        var descriptionHeight = descriptionRef.current.offsetHeight;
+        if (descriptionHeight >= 700) {
+          setHiddenButton(false);
+        }
+      }
+    }
+  }, [product]);
+  var handleDisplayImage = function handleDisplayImage(item) {
+    setDisplayImage(item);
+  };
+  var handleOpenModalBooking = function handleOpenModalBooking(event) {
+    try {
+      event.stopPropagation();
+      setDataBooking([_extends({}, product, {
+        quantity: 1,
+        technical: {},
+        oldService: false,
+        label: product === null || product === void 0 ? void 0 : product.productName,
+        value: product === null || product === void 0 ? void 0 : product.productId
+      })]);
+      setIsBooking(true);
+    } catch (error) {
+      console.log("::::::::::errrorrrrr::::::", error);
+    }
+  };
+  var handleCloseModal = function handleCloseModal() {
+    setIsBooking(false);
+    setDataBooking([]);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " mt-6 mb-12 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 gap-6 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 col-span-2"
+  }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
+    src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
+    className: "w-full aspect-square rounded-2xl"
+  }) : /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full aspect-square rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+  }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.imageUrl,
+      key: item === null || item === void 0 ? void 0 : item.imageId,
+      alt: "",
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      onClick: function onClick() {
+        handleDisplayImage(item);
+      }
+    });
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-3"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "font-semibold text-2xl"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "mt-6 text-[22px]"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: " text-lg py-3"
+  }, "Th\u1EDDi gian: " + getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(Button, {
+    label: "ĐẶT LỊCH NGAY",
+    shopConfigStyle: shopConfigStyle,
+    onClick: function onClick(e) {
+      return handleOpenModalBooking(e);
+    }
+  }), /*#__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", {
+    className: "h-max"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: descriptionRef,
+    className: "" + (isSeeMore && !hiddenButton ? "h-full mb-4" : "max-h-[700px] overflow-hidden"),
+    dangerouslySetInnerHTML: {
+      __html: product === null || product === void 0 ? void 0 : product.description
+    }
+  }), !isSeeMore && !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "h-10 relative -mt-10 rounded-b-lg",
+    style: {
+      background: "linear-gradient(to top, #81818169  0%, #00000003 50%)"
+    }
+  }) : null, !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex justify-center mt-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: isSeeMore ? "Thu nhỏ" : "Xem thêm",
+    className: " bottom-0 z-50",
+    onClick: function onClick() {
+      setIsSeeMore(!isSeeMore);
+    }
+  })) : null) : /*#__PURE__*/React__default.createElement("div", {
     className: "text-gray3 mt-2"
-  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))), isBooking ? /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onClose: handleCloseModal
+  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    className: "overflow-y-auto hide-scrollbar max-h-[80vh]",
+    onCloseFormBooking: handleCloseModal,
+    defaultValue: dataBooking,
+    shopConfig: shopConfig,
+    shopConfigStyle: shopConfigStyle
+  })) : null);
 };
 
 var ProductItem2 = function ProductItem2(props) {
-  var product = props.product;
-  return /*#__PURE__*/React__default.createElement("a", {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
     href: getLinkProductDetail(product)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center relative group"
+    className: "text-center relative group " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "max-w-[240px] rounded-full mx-auto"
@@ -8728,13 +9431,168 @@ var ProductItem2 = function ProductItem2(props) {
   }, product === null || product === void 0 ? void 0 : product.productName)));
 };
 
+var ProductItem3 = function ProductItem3(props) {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full border rounded-2xl " + className
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 flex flex-col gap-4 justify-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-1"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "text-lg text-start"
+  }))));
+};
+
+var ProductItem4 = function ProductItem4(props) {
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full border flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-1"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "text-lg text-start"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-2 md:p-[10px] rounded-full hover:opacity-80 border border-primary h-full w-auto flex items-center justify-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
+  }, /*#__PURE__*/React__default.createElement(FiShoppingCart, {
+    className: "text-primary "
+  })), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Mua ngay",
+    className: "!rounded-3xl w-full",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var ProductItem5 = function ProductItem5(props) {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__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,
+    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: "line-clamp-1 mb-2"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "text-lg text-start"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 md:gap-4 "
+  }, /*#__PURE__*/React__default.createElement(AiOutlineShoppingCart, {
+    className: "text-primary p-2.5 h-10 w-12 border border-primary rounded-lg hover:bg-primary hover:text-textButton " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass)
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Mua ngay",
+    className: "w-full",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var ProductItem6 = function ProductItem6(props) {
+  var product = props.product,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full border flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-1"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "text-lg text-start"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-2 md:p-[10px] text-primary rounded-lg hover:bg-primary hover:text-textButton hover:opacity-80 border border-primary h-full w-auto flex items-center justify-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) + " "
+  }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Mua ngay",
+    className: "w-full",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var TreatmentItem1 = function TreatmentItem1(props) {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkServiceDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex flex-col gap-4 rounded-2xl p-1"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    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"
+  })), /*#__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", {
+    className: "whitespace-nowrap"
+  }, "Th\u1EDDi gian: 120p"), /*#__PURE__*/React__default.createElement(Button, {
+    shopConfigStyle: shopConfigStyle,
+    label: "\u0110\u1EB7t l\u1ECBch",
+    className: "w-full"
+  }))));
+};
+
 var Products1 = function Products1(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;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    ProductItem = props.ProductItem;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
@@ -8756,7 +9614,9 @@ var Products1 = function Products1(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem2, {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
@@ -8769,43 +9629,14 @@ var Products1 = function Products1(props) {
   }));
 };
 
-var ItemProduct = function ItemProduct(props) {
-  var product = props.product;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "pb-4 rounded-2xl w-full bg-bgSecondary"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative pt-2 flex justify-center h-32 sm:h-40 lg:h-52"
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: "#"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "aspect-w-1 aspect-h-1 max-h-32 sm:max-h-40 lg:max-h-52 object-cover"
-  })), product && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && +(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price) && /*#__PURE__*/React__default.createElement("label", {
-    className: "absolute bg-red-600 rounded-r-lg sm:px-2 text-textButton",
-    style: {
-      top: "10%"
-    }
-  }, ((product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) - (product === null || product === void 0 ? void 0 : product.price)) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) * 100, "%")), /*#__PURE__*/React__default.createElement("div", {
-    className: "px-4 h-[100px] mt-6"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "line-clamp-2 lg:h-12 lg:block"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-3 md:flex md:justify-between flex-col"
-  }, /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product
-  }))));
-};
-
 var Carousel = function Carousel(props) {
   var carouselRef = useRef(null);
   var _useState = useState(false),
     isScrolledToLeft = _useState[0],
     setIsScrolledToLeft = _useState[1];
-  var _useState2 = useState(true),
-    isScrolledToRight = _useState2[0],
-    setIsScrolledToRight = _useState2[1];
-  var _props$datas = props.datas,
-    datas = _props$datas === void 0 ? [] : _props$datas,
+  var _useState2 = useState(0);
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
     _props$style = props.style,
@@ -8815,21 +9646,20 @@ var Carousel = function Carousel(props) {
     _props$renderItem = props.renderItem,
     renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
   var handleClickPrevImg = function handleClickPrevImg() {
-    if (carouselRef.current) {
+    if (carouselRef !== null && carouselRef !== void 0 && carouselRef.current) {
       setIsScrolledToLeft(true);
-      setIsScrolledToRight(false);
       carouselRef.current.scrollBy({
-        left: -300,
+        left: -carouselRef.current.offsetWidth / 4,
         behavior: "smooth"
       });
     }
   };
   var handleClickNextImg = function handleClickNextImg() {
-    setIsScrolledToRight(true);
     setIsScrolledToLeft(false);
-    if (carouselRef.current) {
-      carouselRef.current.scrollBy({
-        left: 300,
+    if (carouselRef !== null && carouselRef !== void 0 && carouselRef.current) {
+      var _carouselRef$current, _carouselRef$current2;
+      carouselRef === null || carouselRef === void 0 ? void 0 : (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollBy({
+        left: (carouselRef === null || carouselRef === void 0 ? void 0 : (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.offsetWidth) / 4,
         behavior: "smooth"
       });
     }
@@ -8837,13 +9667,13 @@ var Carousel = function Carousel(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative " + className + " ",
     style: style
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: " w-full pe-2 h-full flex gap-2 md:gap-4 xl:gap-6  overflow-x-auto hide-scrollbar",
     ref: carouselRef
-  }, datas && datas.length > 0 && datas.map(function (item, index) {
+  }, data && (data === null || data === void 0 ? void 0 : data.length) > 0 ? data === null || data === void 0 ? void 0 : data.map(function (item, index) {
     return renderItem(item, index);
-  })), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
-    className: " hidden md:block bg-gray3 p-3 rounded-full absolute top-[45%] left-[-8px] lg:left-[-1%]",
+  }) : null)), data && (data === null || data === void 0 ? void 0 : data.length) > 4 ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
+    className: " hidden lg:block bg-gray3 p-3 rounded-full absolute top-[45%] left-[-8px] lg:left-[-2%]",
     style: {
       backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
     },
@@ -8851,19 +9681,23 @@ var Carousel = function Carousel(props) {
   }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
     className: "text-sm lg:text-lg text-white"
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: " hidden md:block p-3 rounded-full absolute top-[45%] right-[-2%] lg:right-0",
+    className: " hidden lg:block p-3 rounded-full absolute top-[45%] right-[-2%] ",
     style: {
-      backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
+      backgroundColor: !isScrolledToLeft ? primaryColor : "#BDBDBD"
     },
     onClick: handleClickNextImg
-  }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
+  }, /*#__PURE__*/React__default.createElement(FaArrowRight, {
     className: "text-sm lg:text-lg text-white"
-  }))));
+  }))) : null);
 };
 
 var Products2 = function Products2(props) {
   var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
+    data = props.data,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
+    _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$colo2 = _shopConfigStyle$colo.primary,
     primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
@@ -8896,15 +9730,17 @@ var Products2 = function Products2(props) {
       color: textButton
     }
   }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
-    datas: products,
+    data: products,
     primaryColor: primary,
     renderItem: function renderItem(item, index) {
       return /*#__PURE__*/React__default.createElement("div", {
         key: "carousel-" + index,
-        className: " min-w-[40vw] object-cover sm:min-w-[25vw] lg:min-w-[22vw] xl:min-w-[20vw] pe-4 xl:pe-6"
-      }, /*#__PURE__*/React__default.createElement(ItemProduct, {
+        className: "flex-shrink-0 w-[calc(50%-2px)]  md:w-[calc(34%-16px)] lg:w-[calc(25%-12px)] xl:w-[calc(25%-19px)]"
+      }, /*#__PURE__*/React__default.createElement(ProductItem, {
         product: item.productInfo,
-        shopConfigStyle: shopConfigStyle
+        Link: Link,
+        shopConfigStyle: shopConfigStyle,
+        className: "border-0 bg-bgSecondary"
       }));
     }
   })));
@@ -8955,7 +9791,11 @@ var Products3 = function Products3(props) {
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
@@ -9036,8 +9876,10 @@ var Products3 = function Products3(props) {
   })) : /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 mt-12"
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem2, {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
       key: index,
+      shopConfigStyle: shopConfigStyle,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
   })), /*#__PURE__*/React__default.createElement(Pagination, _extends({
@@ -9049,162 +9891,123 @@ var Products3 = function Products3(props) {
   }));
 };
 
-var CarouselItem = function CarouselItem(props) {
-  var listRef = useRef(null);
-  var _useState = useState(false),
-    isScrolledToLeft = _useState[0],
-    setIsScrolledToLeft = _useState[1];
-  var _useState2 = useState(true),
-    isScrolledToRight = _useState2[0],
-    setIsScrolledToRight = _useState2[1];
-  var _props$datas = props.datas,
-    datas = _props$datas === void 0 ? [] : _props$datas,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$primaryColor = props.primaryColor,
-    primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
-    _props$textButtonColo = props.textButtonColor,
-    textButtonColor = _props$textButtonColo === void 0 ? "" : _props$textButtonColo,
-    _props$renderItem = props.renderItem,
-    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
-  var handleClickPrevImg = function handleClickPrevImg() {
-    if (listRef.current) {
-      setIsScrolledToLeft(true);
-      setIsScrolledToRight(false);
-      listRef.current.scrollBy({
-        left: -80,
-        behavior: "smooth"
-      });
-    }
-  };
-  var handleClickNextImg = function handleClickNextImg() {
-    setIsScrolledToRight(true);
-    setIsScrolledToLeft(false);
-    if (listRef.current) {
-      listRef.current.scrollBy({
-        left: 80,
-        behavior: "smooth"
-      });
-    }
-  };
-  console.log("check propsss::::::::", datas);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-12 h-12 " + className,
-    style: style
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-12 lg:col-span-10 md:col-span-9 overflow-hidden "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex overflow-x-auto gap-2 hide-scrollbar items-center",
-    ref: listRef
-  }, datas && datas.length > 0 && datas.map(function (item, index) {
-    return renderItem(item, index);
-  }))), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: " px-4 py-3 rounded-full",
-    onClick: handleClickPrevImg,
-    style: {
-      backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
-    }
-  }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
-    className: "inline-block mb-1 text-lg",
-    style: {
-      color: textButtonColor
-    }
-  })), /*#__PURE__*/React__default.createElement("button", {
-    className: "bg-gray2 px-4 py-3 rounded-full",
-    style: {
-      backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
-    },
-    onClick: handleClickNextImg
-  }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
-    className: "inline-block mb-1 text-lg",
-    style: {
-      color: textButtonColor
-    }
-  }))));
-};
-
-var ListProduct = function ListProduct(props) {
-  var _props$datas = props.datas,
-    datas = _props$datas === void 0 ? [] : _props$datas,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$className = props.className,
-    className = _props$className === void 0 ? {} : _props$className,
-    _props$renderItem = props.renderItem,
-    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
+var Products10 = function Products10(props) {
+  var _useState = useState({
+      size: 8
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _CategoryController = CategoryController(props),
+    _CategoryController$c = _CategoryController.categories,
+    categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var handleChooseCategory = function handleChooseCategory(item) {
+    setParams(_extends({}, params, {
+      categoryId: item === null || item === void 0 ? void 0 : item.categoryId
+    }));
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 mt-6 " + className,
-    style: style
-  }, datas && datas.length > 0 && datas.map(function (item, index) {
-    return renderItem(item, index);
-  }));
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-4 md:gap-6 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(CarouselItem, {
+    data: categories,
+    onClick: handleChooseCategory
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      className: "border-0 bg-bgSecondary",
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      key: "zjk-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
 };
 
-var Products10 = function Products10(props) {
-  var _useState = useState(""),
-    selectCategory = _useState[0],
-    setSelectCategory = _useState[1];
-  var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
-    primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
-    _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
-    bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
-  var _CategoryController = CategoryController(props),
+var ProductCategory2 = function ProductCategory2(props) {
+  var _products$slice;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
+  var _useState = useState({
+      size: 12
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _CategoryController = CategoryController(_extends({}, props)),
     _CategoryController$c = _CategoryController.categories,
     categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
-  var _ProductController = ProductController(props),
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
     _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("Products10 products");
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var _useState2 = useState(true),
+    isFilter = _useState2[0],
+    setIsFilter = _useState2[1];
+  var handleChooseCategory = function handleChooseCategory(item) {
+    setIsFilter(true);
+    setParams(_extends({}, params, {
+      categoryId: item === null || item === void 0 ? void 0 : item.categoryId,
+      size: 12
+    }));
+  };
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsFilter(false);
+    setParams(_extends({}, params, {
+      size: (params === null || params === void 0 ? void 0 : params.size) + 4
+    }));
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20",
-    style: {
-      background: background,
-      color: textBody
-    }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl lg:text-3xl xl:text-4xl font-semibold mb-6"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(CarouselItem, {
-    datas: categories,
-    primaryColor: primary,
-    textButtonColor: textButton,
-    renderItem: function renderItem(item, index) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: item.categoryId + "-" + index,
-        className: "border-2 items whitespace-nowrap p-2 rounded-lg cursor-pointer ",
-        style: {
-          borderColor: primary,
-          color: selectCategory === item.categoryId ? textButton : primary,
-          background: selectCategory === item.categoryId ? primary : bgSecondary
-        },
-        onClick: function onClick() {
-          setSelectCategory(item.categoryId);
-        }
-      }, item.cateName);
-    }
-  }), /*#__PURE__*/React__default.createElement(ListProduct, {
-    datas: products,
-    renderItem: function renderItem(item, index) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: "productfsd-" + index
-      }, /*#__PURE__*/React__default.createElement(ItemProduct, {
-        product: item.productInfo,
-        shopConfigStyle: shopConfigStyle
-      }));
-    }
-  }));
+    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-6 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(CarouselItem, {
+    data: categories,
+    onClick: handleChooseCategory
+  }), loading && isFilter ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      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, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto",
+    type: "outline",
+    shopConfigStyle: shopConfigStyle
+  }) : null);
 };
 
 var ProductSale2 = function ProductSale2(props) {
@@ -9213,7 +10016,8 @@ var ProductSale2 = function ProductSale2(props) {
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    ProductItem = props.ProductItem;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
@@ -9230,7 +10034,7 @@ var ProductSale2 = function ProductSale2(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem2, {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
@@ -9243,13 +10047,171 @@ var ProductSale2 = function ProductSale2(props) {
   })) : null;
 };
 
+var ProductSearch1 = function ProductSearch1(props) {
+  var _window, _window$location;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
+    shopConfigStyle = props.shopConfigStyle;
+  var queryParams = new URLSearchParams((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.search);
+  var keywordValue = queryParams === null || queryParams === void 0 ? void 0 : queryParams.get('keyword');
+  var _useState = useState(0),
+    length = _useState[0],
+    setLength = _useState[1];
+  var _useState2 = useState({
+      productName: keywordValue,
+      size: 24
+    }),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _useState3 = useState(true),
+    isGetMore = _useState3[0],
+    setIsGetMore = _useState3[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    products = _ProductController.products,
+    loading = _ProductController.loading;
+  useEffect(function () {
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        productName: keywordValue
+      });
+    });
+  }, [keywordValue]);
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setLength(function (prev) {
+      return prev + 4;
+    });
+  };
+  var listFilter = [{
+    label: "Khuyến mãi",
+    value: "discount",
+    filter: {
+      isDiscount: true
+    }
+  }, {
+    label: "Nổi bật",
+    value: "highlight",
+    filter: {
+      isHighlight: true
+    }
+  }];
+  var handleFilter = function handleFilter(item) {
+    setParams(function (prev) {
+      var _Object$keys;
+      var newParams = _extends({}, prev);
+      Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(newParams)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (key) {
+        if (key !== 'productName' && key !== 'size') {
+          delete newParams[key];
+        }
+      });
+      return _extends({}, newParams, item === null || item === void 0 ? void 0 : item.filter);
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-6 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: {
+      sectionTitle: "Kết quả tìm kiếm"
+    },
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg"
+  }, "T\u1EEB kh\xF3a \"", keywordValue, "\" (", products === null || products === void 0 ? void 0 : products.length, " s\u1EA3n ph\u1EA9m)"), /*#__PURE__*/React__default.createElement(CarouselItem, {
+    data: listFilter,
+    isNavigateButton: false,
+    onClick: handleFilter
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products.slice(0, 8 + length).map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      key: "htrhr-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > 8 + length ? /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    type: "outline"
+  }) : null);
+};
+
+var ProductHot1 = function ProductHot1(props) {
+  var _products$slice;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
+  var _useState = useState({
+      sort: "ranked,DESC",
+      size: 12
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = useState(true),
+    isGetMore = _useState2[0],
+    setIsGetMore = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(_extends({}, params, {
+      size: (params === null || params === void 0 ? void 0 : params.size) + 4
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-8"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      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, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto",
+    type: "outline",
+    shopConfigStyle: shopConfigStyle
+  }) : null);
+};
+
 var ProductHot3 = function ProductHot3(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;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
@@ -9272,8 +10234,10 @@ var ProductHot3 = function ProductHot3(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem2, {
-      key: index,
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      key: "htjtr-" + index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
   }))), /*#__PURE__*/React__default.createElement(Dash, {
@@ -9283,61 +10247,159 @@ var ProductHot3 = function ProductHot3(props) {
 
 var ProductsTop1 = function ProductsTop1(props) {
   var data = props.data,
-    shopConfigStyle = props.shopConfigStyle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo2 === void 0 ? "#fff" : _shopConfigStyle$colo2;
-  var _ProductController = ProductController(props),
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _useState = useState({
+      size: 8
+    }),
+    params = _useState[0];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
     _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
   console.log("ProductsTop1 products");
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20",
-    style: {
-      background: background
-    }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl md:text-3xl lg:text-4xl font-semibold mb-6"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(ListProduct, {
-    datas: products,
-    renderItem: function renderItem(item, index) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: "productfsd-" + index
-      }, /*#__PURE__*/React__default.createElement(ItemProduct, {
-        product: item.productInfo,
-        shopConfigStyle: shopConfigStyle
-      }));
-    }
-  }));
+    className: SECTION_DEFAULT_CLASS + " flex flex-col gap-8 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      className: "bg-bgSecondary border-0",
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      key: "htrhr-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
 };
 
-var CartController = function CartController(props) {
-  var addToCart = props.addToCart,
-    dispatch = props.dispatch;
-  useEffect(function () {}, []);
-  var addProductToCart = function addProductToCart(product, variant, quantity) {
-    try {
-      try {
-        dispatch(addToCart({
-          product: product,
-          variant: variant,
-          quantity: quantity
-        }));
-      } catch (e) {
-        console.log(e);
-      }
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
+var ProductList5 = function ProductList5(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,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  var _useState = useState({
+      size: 12
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = useState(true),
+    isGetMore = _useState2[0],
+    setIsGetMore = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    products = _ProductController.products,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
   };
-  return {
-    addProductToCart: addProductToCart
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-8 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products.slice(0, params.size - 4).map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      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, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto",
+    type: "outline",
+    shopConfigStyle: shopConfigStyle
+  }) : null);
+};
+
+var ProductHighlight1 = function ProductHighlight1(props) {
+  var _products$slice;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$ProductItem = props.ProductItem,
+    ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
+  var _useState = useState(true),
+    isGetMore = _useState[0],
+    setIsGetMore = _useState[1];
+  var _useState2 = useState({
+      size: 8,
+      isHighlight: true
+    }),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(_extends({}, params, {
+      size: (params === null || params === void 0 ? void 0 : params.size) + 4
+    }));
   };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-4 md:gap-6 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(ProductItem, {
+      Link: Link,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      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, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    type: "outline"
+  }) : null);
 };
 
 var ProductDetail10 = function ProductDetail10(props) {
-  var shopConfigStyle = props.shopConfigStyle;
+  var _product$images;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig;
   var _ProductDetailControl = ProductDetailController(props),
     product = _ProductDetailControl.product;
   var _useState = useState(),
@@ -9346,18 +10408,34 @@ var ProductDetail10 = function ProductDetail10(props) {
   var _useState2 = useState([]),
     options = _useState2[0],
     setOptions = _useState2[1];
+  var _useState3 = useState(),
+    displayImage = _useState3[0],
+    setDisplayImage = _useState3[1];
+  var _useState4 = useState(false),
+    isSeeMore = _useState4[0],
+    setIsSeeMore = _useState4[1];
+  var _useState5 = useState(true),
+    hiddenButton = _useState5[0],
+    setHiddenButton = _useState5[1];
   var _CartController = CartController(props),
     addProductToCart = _CartController.addProductToCart;
   var refInputQuantity = useRef();
+  var descriptionRef = useRef();
   useEffect(function () {
     if (product) {
       initVariant();
+      if (descriptionRef.current) {
+        var descriptionHeight = descriptionRef.current.offsetHeight;
+        if (descriptionHeight >= 700) {
+          setHiddenButton(false);
+        }
+      }
     }
   }, [product]);
   var initVariant = function initVariant() {
-    var _product$variants;
+    var _product$variants, _variant$index;
     var variant = product === null || product === void 0 ? void 0 : (_product$variants = product.variants) === null || _product$variants === void 0 ? void 0 : _product$variants[0];
-    var indexOptions = variant.index.split(",");
+    var indexOptions = variant === null || variant === void 0 ? void 0 : (_variant$index = variant.index) === null || _variant$index === void 0 ? void 0 : _variant$index.split(",");
     setVariant(variant);
     var options = (product === null || product === void 0 ? void 0 : product.optionValues) || [];
     options = options.map(function (e, i) {
@@ -9411,21 +10489,41 @@ var ProductDetail10 = function ProductDetail10(props) {
     }
   };
   var buyNow = function buyNow() {};
+  var handleDisplayImage = function handleDisplayImage(item) {
+    setDisplayImage(item);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " mb-0"
+    className: SECTION_CLASS + " mt-6 md:mt-6 mb-0 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-3 gap-6 bg-bgSecondary"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 gap-6 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 col-span-2"
+  }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
+    src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
+    className: "w-full aspect-square rounded-2xl "
+  }) : /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "w-full aspect-square rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-2"
+    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+  }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.imageUrl,
+      key: item === null || item === void 0 ? void 0 : item.imageId,
+      alt: "",
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " cursor-pointer h-16 w-16 rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      onClick: function onClick() {
+        handleDisplayImage(item);
+      }
+    });
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-3"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "font-semibold text-2xl"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
     variant: variant,
-    className: "mt-6"
+    className: "mt-6 text-[22px]"
   }), options.map(function (option, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-2 mt-6",
@@ -9445,7 +10543,7 @@ var ProductDetail10 = function ProductDetail10(props) {
     })));
   }), /*#__PURE__*/React__default.createElement(Input, {
     label: "Số lượng",
-    wrapClassName: "flex items-center gap-6 mt-6",
+    wrapClassName: "flex items-center gap-6 mt-6 ",
     rules: [{
       type: "required",
       message: "Bắt buộc nhập số lượng"
@@ -9456,7 +10554,8 @@ var ProductDetail10 = function ProductDetail10(props) {
     }],
     defaultValue: 1,
     isQuantity: true,
-    min: 1,
+    min: 0,
+    className: "bg-background",
     ref: refInputQuantity
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-4 mt-6"
@@ -9474,13 +10573,29 @@ var ProductDetail10 = function ProductDetail10(props) {
       return buyNow();
     }
   })), /*#__PURE__*/React__default.createElement("p", {
-    className: "text-lg mt-12 pt-6 border-t border-stroke"
+    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", {
-    className: "mt-6",
+    className: "h-max"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: descriptionRef,
+    className: "" + (isSeeMore && !hiddenButton ? "h-full mb-4" : "max-h-[700px] overflow-hidden"),
     dangerouslySetInnerHTML: {
       __html: product === null || product === void 0 ? void 0 : product.description
     }
-  }) : /*#__PURE__*/React__default.createElement("div", {
+  }), !isSeeMore && !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "h-10 relative -mt-10 rounded-b-lg",
+    style: {
+      background: "linear-gradient(to top, #81818169  0%, #00000003 50%)"
+    }
+  }) : null, !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex justify-center mt-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: isSeeMore ? "Thu nhỏ" : "Xem thêm",
+    className: " bottom-0 z-50",
+    onClick: function onClick() {
+      setIsSeeMore(!isSeeMore);
+    }
+  })) : null) : /*#__PURE__*/React__default.createElement("div", {
     className: "text-gray3 mt-2"
   }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
 };
@@ -9511,7 +10626,8 @@ var Booking1 = function Booking1(props) {
     className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-12"
   }, /*#__PURE__*/React__default.createElement(BookingForm, {
     shopConfigStyle: shopConfigStyle,
-    shopConfig: shopConfig
+    shopConfig: shopConfig,
+    className: "!bg-bgSecondary"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl"
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.title), /*#__PURE__*/React__default.createElement("div", {
@@ -9519,15 +10635,51 @@ var Booking1 = function Booking1(props) {
   }, 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$.description))));
 };
 
+var BookingForm6 = function BookingForm6(props) {
+  var _data$data, _data$data$, _data$data2, _data$data2$;
+  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 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.srcImage,
+    className: "w-full h-auto"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-4 whitespace-pre-line"
+  }, 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$.description)), /*#__PURE__*/React__default.createElement(BookingForm, {
+    shopConfigStyle: shopConfigStyle,
+    shopConfig: shopConfig,
+    className: "col-span-2"
+  })));
+};
+
 var Banner1 = function Banner1(props) {
-  var data = props.data;
+  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: "w-full pt-10 px-4 xl:px-20 bg-background"
-  }, /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-2xl lg:text-3xl xl:text-4xl font-semibold"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 sm:grid-cols-3 gap-6 mt-6"
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6 mt-6"
   }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
@@ -9538,9 +10690,44 @@ var Banner1 = function Banner1(props) {
   })));
 };
 
+var Banner3 = function Banner3(props) {
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-5"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      className: "bg-cover bg-no-repeat h-full rounded-xl"
+    });
+  }));
+};
+
+var BannerFull1 = function BannerFull1(props) {
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_CLASS
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: sectionData === null || sectionData === void 0 ? void 0 : sectionData.srcImages,
+    className: "bg-cover bg-no-repeat w-full rounded-xl"
+  }));
+};
+
+var BannerFull2 = function BannerFull2(props) {
+  var _data$data;
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__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.srcImages,
+    className: "w-full h-auto object-cover "
+  }));
+};
+
 var Partner1 = function Partner1(props) {
   var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
     background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
@@ -9548,14 +10735,15 @@ var Partner1 = function Partner1(props) {
     bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20",
+    className: "" + SECTION_DEFAULT_CLASS,
     style: {
       background: background
     }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl lg:text-3xl xl:text-4xl font-semibold"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-4 md:grid-cols-6 gap-4 mt-6  p-6 rounded-xl",
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-4 md:grid-cols-6 gap-6 mt-4 md:mt-6 p-6 rounded-xl",
     style: {
       background: bgSecondary
     }
@@ -9571,7 +10759,12 @@ var Partner1 = function Partner1(props) {
 
 var Address1 = function Address1(props) {
   var shopConfigStyle = props.shopConfigStyle,
-    data = props.data;
+    shopConfig = props.shopConfig,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
     textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
@@ -9579,18 +10772,42 @@ var Address1 = function Address1(props) {
     background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
     _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
     bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState = useState([]),
+    shopAddressList = _useState[0],
+    setShopAddressList = _useState[1];
+  useEffect(function () {
+    genShopAddress();
+  }, [shopConfig]);
+  var genShopAddress = function genShopAddress() {
+    try {
+      var addressJson = JSON.parse(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress);
+      if (addressJson) {
+        setShopAddressList(addressJson);
+      } else {
+        setShopAddressList([{
+          address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
+          phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
+        }]);
+      }
+    } catch (e) {
+      setShopAddressList([{
+        address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
+        phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
+      }]);
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20 ",
+    className: "" + SECTION_DEFAULT_CLASS,
     style: {
       background: background,
       color: textBody
     }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "text-2xl lg:text-3xl xl:text-4xl font-semibold"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 sm:grid-cols-3 gap-4 mt-6 "
-  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 gap-4 lg:gap-6 mt-6 "
+  }, shopAddressList && shopAddressList.length > 0 && (shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "lg:leading-6 p-4 rounded-xl",
       key: "fyfoy-" + index,
@@ -9599,30 +10816,39 @@ var Address1 = function Address1(props) {
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "font-semibold mb-3"
-    }, item.city), /*#__PURE__*/React__default.createElement("div", null, item.address), /*#__PURE__*/React__default.createElement("div", {
+    }, item !== null && item !== void 0 && item.city ? item === null || item === void 0 ? void 0 : item.city : "Hà Nội"), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.address), /*#__PURE__*/React__default.createElement("div", {
       className: "sm:flex justify-between mt-3"
-    }, /*#__PURE__*/React__default.createElement("small", null, item.open), /*#__PURE__*/React__default.createElement("a", {
+    }, /*#__PURE__*/React__default.createElement("small", null, "M\u1EDF c\u1EEDa 08:00-21:00"), /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
       href: "#"
     }, /*#__PURE__*/React__default.createElement("small", {
       className: "text-primary block"
     }, "Ch\u1EC9 \u0111\u01B0\u1EDDng ", /*#__PURE__*/React__default.createElement(FaArrowRight, {
       className: "inline-block\t text-primary"
     }), " "))));
-  })));
+  }))));
 };
 
 var Links1 = function Links1(props) {
-  var data = props.data;
-  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full pt-10 px-4 xl:px-20 bg-background"
-  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8 w-full bg-background"
+  }, [1, 2, 3].map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: "qwikf-" + index
+      key: "qwikf-" + index + " "
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "text-lg md:text-xl lg:text-2xl font-semibold mb-4"
     }, "\u0110a d\u1EA1ng thanh to\xE1n"), /*#__PURE__*/React__default.createElement("div", {
-      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl h-72 "
+      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl bg-bgSecondary "
     }, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(FaArrowsRotate, {
       className: "inline-block\t text-primary text-2xl mb-1 me-3"
     }), "  Chuy\u1EC3n kho\u1EA3n"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(BsCurrencyDollar, {
@@ -9632,93 +10858,126 @@ var Links1 = function Links1(props) {
     }), " Th\u1EBB ATM"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(SiVisa, {
       className: "inline-block\t text-primary text-2xl mb-1 me-3"
     }), " Th\u1EBB Qu\u1ED1c t\u1EBF")));
-  }));
+  })));
 };
 
 var Footer1 = function Footer1(props) {
-  var shopConfigStyle = props.shopConfigStyle;
+  var _routes$filter;
+  var shopConfig = props.shopConfig,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
     primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
     _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
-    bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "footer px-4 py-10 xl:px-20 ",
-    style: {
-      background: bgSecondary,
-      color: textBody
+    textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4;
+  var _useState = useState([]),
+    shopAddressList = _useState[0],
+    setShopAddressList = _useState[1];
+  useEffect(function () {
+    genShopAddress();
+  }, [shopConfig]);
+  var genShopAddress = function genShopAddress() {
+    try {
+      var addressJson = JSON.parse(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress);
+      if (addressJson) {
+        setShopAddressList(addressJson);
+      } else {
+        setShopAddressList([{
+          address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
+          phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
+        }]);
+      }
+    } catch (e) {
+      setShopAddressList([{
+        address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
+        phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
+      }]);
     }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " !md:my-0 !my-0 pt-12 bg-bgSecondary"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center"
   }, /*#__PURE__*/React__default.createElement("img", {
-    className: "object-cover w-14 ",
-    src: "https://s3-alpha-sig.figma.com/img/05e9/1165/8608d0a8b864cc9e15fa74b32f8bfabc?Expires=1730073600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=qkNnTVXTSs7-CbaDRo5jFJm9a5drVP9BvVPKX8ToQS4fi0lKL0atq45SIxxzXQV21dgoMvHvNZwO5-lsnrq6hbeedSkTWSWLrU65pUy7X9W0d20kGMLnP5KH3RWdZ0bfgJ9ZvRBbsqMz1bIucbLNeAt8PLaHvLl4HLKz5qvKVbWb6j098vwScj6LI51qG2y01N9qu051QWzOj5ijYS7qWNXT1PTlf4o07xAThnGObDdatBIaocIQPno6srkWK~agAdBrW9IdE~l3UP5XBP~pR~zvLGiniYloQoDvAscoaYr2aTTjf6z9DQLl35WBbNGKrWcKFA80WAE69QdpNJxckQ__",
+    className: "object-cover w-16 h-16",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: ""
   }), /*#__PURE__*/React__default.createElement("h3", {
     className: " text-2xl md:text-3xl font-semibold ms-2",
     style: {
       color: primary
     }
-  }, "\u0110i\u1EC7n m\xE1y H\u1EA3i Anh")), /*#__PURE__*/React__default.createElement("div", {
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6 grid grid-cols-1 sm:grid-cols-4 mb-12"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: " col-span-2 flex flex-col leading-8 mb-10 sm:mb-0 "
+    className: " col-span-2 flex flex-col mb-10 leading-8  sm:mb-0 "
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "mb-3 font-semibold text-md md:text-lg"
-  }, "Th\xF4ng tin li\xEAn h\u1EC7"), /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF 1"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
-    className: " inline-block\t text-2xl",
-    style: {
-      color: primary
-    }
-  }), " S\u1ED1 18 Tam Trinh, Hai B\xE0 Tr\u01B0ng, H\xE0 N\u1ED9i"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(FaPhone, {
-    className: "inline-block ms-1 me-2 mb-2",
-    style: {
-      color: primary
-    }
-  }), /*#__PURE__*/React__default.createElement("span", null, "0123456789")), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6"
-  }, "C\u01A1 s\u1EDF 2"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
-    className: "inline-block text-2xl",
-    style: {
-      color: primary
-    }
-  }), " S\u1ED1 18 Tam Trinh, Hai B\xE0 Tr\u01B0ng, H\xE0 N\u1ED9i"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(FaPhone, {
-    className: "inline-block ms-1 me-2 mb-2",
-    style: {
-      color: primary
-    }
-  }), /*#__PURE__*/React__default.createElement("span", null, "0123456789"))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 font-semibold text-lg"
+  }, "Th\xF4ng tin li\xEAn h\u1EC7"), shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF ", index + 1), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-1 items-center"
+    }, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
+      size: 24,
+      className: "inline-block",
+      style: {
+        color: primary
+      }
+    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.address)), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 items-center"
+    }, /*#__PURE__*/React__default.createElement(IoCallOutline, {
+      size: 24,
+      className: "inline-block",
+      style: {
+        color: primary
+      }
+    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.phone)));
+  })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-3 font-semibold text-lg"
   }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
     className: "leading-10 flex flex-col "
-  }, /*#__PURE__*/React__default.createElement("label", null, "D\u1ECBch v\u1EE5"), /*#__PURE__*/React__default.createElement("label", null, "S\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("label", null, "\u0110\u1EB7t l\u1ECBch"), /*#__PURE__*/React__default.createElement("label", null, "Gi\u1EDBi thi\u1EC7u"))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+    return e === null || e === void 0 ? void 0 : e.isShow;
+  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (route, index) {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: route === null || route === void 0 ? void 0 : route.route
+    }, /*#__PURE__*/React__default.createElement("div", null, route === null || route === void 0 ? void 0 : route.label));
+  }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "font-semibold mb-4 text-lg"
   }, "H\u1ED7 tr\u1EE3"), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-start items-center"
-  }, /*#__PURE__*/React__default.createElement(FaFacebookSquare, {
+    className: "flex justify-start items-center gap-4"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage) || "#"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
+    size: 40,
+    color: textButton,
+    className: "p-2 rounded-lg",
     style: {
-      fontSize: "43px",
-      color: primary
+      background: primary
     }
-  }), /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
-    className: " p-2 rounded-lg mx-2",
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) || "#"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
+    size: 40,
+    color: textButton,
+    className: "p-2 rounded-lg",
     style: {
-      fontSize: "40px",
-      color: textButton,
       background: primary
     }
-  }), /*#__PURE__*/React__default.createElement(SiZalo, {
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) || "#"
+  }, /*#__PURE__*/React__default.createElement(SiZalo, {
+    size: 40,
+    color: textButton,
     className: "p-2 rounded-lg",
     style: {
-      fontSize: "40px",
-      color: textButton,
       background: primary
     }
-  })))), /*#__PURE__*/React__default.createElement("hr", null), /*#__PURE__*/React__default.createElement("div", {
+  }))))), /*#__PURE__*/React__default.createElement("hr", null), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6"
   }, /*#__PURE__*/React__default.createElement("small", {
     className: "me-5"
@@ -9898,6 +11157,157 @@ var RatingStar = function RatingStar(props) {
   }, res);
 };
 
+var CustomerRating1 = function CustomerRating1(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;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 xl:gap-6"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "border rounded-lg bg-bgSecondary p-3 md:p-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-end gap-2"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.avatar,
+      className: "w-20 h-20 rounded-full object-cover object-center"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "ml-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "mb-1 font-medium"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement(RatingStar, {
+      star: (item === null || item === void 0 ? void 0 : item.rate) || 5
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "mt-4"
+    }, "\"", item === null || item === void 0 ? void 0 : item.content, "\""));
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+var CustomerRating5 = function CustomerRating5(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data;
+  var _useState = useState(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState2 = useState(0),
+    startX = _useState2[0],
+    setStartX = _useState2[1];
+  var _useState3 = useState(0),
+    endX = _useState3[0],
+    setEndX = _useState3[1];
+  var sliderRef = useRef();
+  var handleTouchStart = function handleTouchStart(e) {
+    var touchStart = e.touches[0].clientX;
+    setStartX(touchStart);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    var touchMove = e.touches[0].clientX;
+    setEndX(touchMove);
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    var diff = startX - endX;
+    var threshold = sliderRef.current.offsetWidth / 3;
+    if (diff > threshold && currentIndex < sectionData.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+    } else if (diff < -threshold && currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " mx-0 md:mx-4 xl:mx-20 rounded-xl relative"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute mt-16 inset-0 bg-bgSecondary [clip-path:polygon(0%_0%,_100%_30%,_100%_100%,_0%_100%)] z-0 rounded-3xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full relative z-10 border border-textHeading rounded-3xl flex overflow-hidden",
+    ref: sliderRef,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-start transition-transform duration-300",
+    style: {
+      transform: "translateX(-" + currentIndex * 100 + "%)"
+    }
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col  px-2 py-2 md:px-6 lg:px-12 md:py-6 items-center md:flex-row gap-6 md:gap-12 min-w-full overflow-hidden",
+      key: "lpky-" + index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.avatar,
+      className: "w-80 h-96 object-cover rounded-3xl"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col items-center md:items-start gap-6 justify-center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-4xl font-semibold"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.content), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description)));
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bottom-2 md:bottom-20 lg:bottom-[30%] left-1/2 md:left-2/3 xl:left-1/2 transform -translate-x-1/2 flex gap-2"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (_, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "dot-" + index,
+      onClick: function onClick() {
+        setCurrentIndex(index);
+      },
+      className: (currentIndex === index ? "w-6 bg-primary" : "w-3 bg-gray4") + " h-3 rounded-full hover:opacity-80 cursor-pointer "
+    });
+  }))));
+};
+
+var CustomerRating6 = function CustomerRating6(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-12  grid grid-cols-1 md:grid-cols-2 gap-6"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "relative bg-primary rounded-lg text-textButton px-6 py-4"
+    }, /*#__PURE__*/React__default.createElement(IoMdQuote, {
+      size: 30,
+      className: "absolute text-textButton top-[-15px] right-8"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-end gap-2"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.avatar,
+      className: "w-24 h-24 rounded-full object-cover"
+    }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-xl md:text-2xl mt-2"
+    }, 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("hr", {
+      className: "mt-4"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "mt-2 md:text-lg"
+    }, item === null || item === void 0 ? void 0 : item.content));
+  }))));
+};
+
 var CustomerRating10 = function CustomerRating10(props) {
   var _data$data;
   var _props$shopConfigStyl = props.shopConfigStyle,
@@ -10020,7 +11430,25 @@ 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("div", {
     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.label)));
+  }, 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)));
+};
+
+var About1 = function About1(props) {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", null, "Tr\xE1i c\xE2y s\u1EA1ch - an to\xE0n cho s\u1EE9c kho\u1EBB ng\u01B0\u1EDDi ti\xEAu d\xF9ng. C\u1EEDa h\xE0ng ORGANIC FOOD c\u1EE7a ch\xFAng t\xF4i t\u1EEBng b\u01B0\u1EDBc \u0111i v\xE0o th\u1ECB tr\u01B0\u1EDDng v\xE0 ni\u1EC1m tin c\u1EE7a kh\xE1ch h\xE0ng. Ho\u1EA1t \u0111\u1ED9ng v\xE0o th\xE1ng 5/2020, ORGANIC FOOD \u0111\xE3 tr\u1EDF th\xE0nh c\xE1i t\xEAn quen thu\u1ED9c trong l\u0129nh v\u1EF1c cung c\u1EA5p tr\xE1i c\xE2y s\u1EA1ch, an to\xE0n, cam k\u1EBFt ch\xEDn t\u1EF1 nhi\xEAn 100% v\xE0 h\u01B0\u1EDBng \u0111\u1EBFn s\u1EE9c kho\u1EBB ng\u01B0\u1EDDi ti\xEAu d\xF9ng qua 3 ti\xEAu ch\xED:"), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-semibold"
+  }, "T\u1EA7m Nh\xECn"), /*#__PURE__*/React__default.createElement("div", null, "S\u1EA3n ph\u1EA9m t\u01B0\u0300 ORGANIC FOOD se\u0303 tr\u1EDF tha\u0300nh thu\u031Bo\u031Bng hi\u1EB9\u0302u quen thu\u1ECD\u0302c va\u0300 h\u01B0\u1EDBng \u0111\u1EBFn ch\u1EA5t l\u01B0\u1EE3ng t\u1ED1t nh\u1EA5t."), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-semibold"
+  }, "S\u1EE9 m\u1EC7nh"), /*#__PURE__*/React__default.createElement("li", {
+    className: "ps-4"
+  }, " \u0110\u1ECD\u0302i ngu\u0303 ba\u0301n ha\u0300ng s\u0103\u0303n sa\u0300ng l\u0103\u0301ng nghe va\u0300 t\u1EA1\u0302n ta\u0302m nhi\u1EB9\u0302t huy\xEA\u0301t trong co\u0302ng vi\u1EB9\u0302c."), /*#__PURE__*/React__default.createElement("li", {
+    className: "ps-4"
+  }, " Sa\u0309n ph\xE2\u0309m th\u01B0\u0301c u\xF4\u0301ng \u0111a da\u0323ng, \u0111a\u0309m ba\u0309o t\xF4\u0301t s\u01B0\u0301c kho\u0309e va\u0300 \u0111a\u0301p \u01B0\u0301ng \u0111u\u031B\u01A1\u0323c mong \u0111\u01A1\u0323i cu\u0309a kha\u0301ch ha\u0300ng."), /*#__PURE__*/React__default.createElement("li", {
+    className: "ps-4"
+  }, " Tr\xE1i c\xE2y \u0111a d\u1EA1ng, cam k\u1EBFt h\xE0ng s\u1EA1ch \u0111\u1EA3m b\u1EA3o ch\u1EA5t l\u01B0\u1EE3ng t\u1ED1t nh\u1EA5t v\xE0 an to\xE0n tuy\u1EC7t \u0111\u1ED1i cho ng\u01B0\u1EDDi ti\xEAu d\xF9ng"), /*#__PURE__*/React__default.createElement("div", {
+    className: "font-semibold"
+  }, "Gi\xE1 Tr\u1ECB C\u1ED1t L\xF5i"), /*#__PURE__*/React__default.createElement("div", null, "ORGANIC FOOD s\u1EBD lu\xF4n l\xE0 ng\u01B0\u1EDDi b\u1EA1n tin c\u1EADy nh\u1EA5t c\xF9ng kh\xE1ch h\xE0ng, tr\xE1i c\xE2y s\u1EA1ch lu\xF4n \u0111\u1EA3m b\u1EA3o ch\u1EA5t l\u01B0\u1EE3ng v\xE0 mang l\u1EA1i ngu\u1ED3n dinh d\u01B0\u1EE1ng c\u0169ng nh\u01B0 s\u1EF1 an to\xE0n cho kh\xE1ch h\xE0ng, g\xF3p ph\u1EA7n mang \u0111\u1EBFn cu\u1ED9c s\u1ED1ng xanh kho\u1EBB m\u1EA1nh cho m\u1ECDi nh\xE0."));
 };
 
 var About5 = function About5(props) {
@@ -10090,7 +11518,9 @@ var Breadcrumb1 = function Breadcrumb1(props) {
   var shopConfigStyle = props.shopConfigStyle,
     route = props.route,
     _props$routes = props.routes,
-    routes = _props$routes === void 0 ? [] : _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;
@@ -10101,18 +11531,19 @@ var Breadcrumb1 = function Breadcrumb1(props) {
     getItems();
   }, [route]);
   var getItems = function getItems() {
-    var _route$route, _route$route$split, _route$route$split$fi;
+    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.map(function (e) {
+    items = (_items = items) === null || _items === void 0 ? void 0 : _items.map(function (e) {
+      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
       };
     });
-    items.unshift({
+    (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2.unshift({
       name: "home",
       label: "Trang chủ",
       route: "/"
@@ -10127,7 +11558,8 @@ var Breadcrumb1 = function Breadcrumb1(props) {
       className: "flex gap-2"
     }, index ? /*#__PURE__*/React__default.createElement("div", {
       className: "text-gray4"
-    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement("a", {
+    }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
       style: {
         color: textHeading
@@ -10266,6 +11698,8 @@ var TextArea = forwardRef(function (props, ref) {
     className = _props$className === void 0 ? "" : _props$className,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
   var _useState = useState(defaultValue),
@@ -10326,11 +11760,11 @@ var TextArea = forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "" + className
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
     name: "",
     id: "",
-    className: textareaClassName + "  focus:outline-none focus:ring-0",
+    className: "focus:outline-none focus:ring-0 " + textareaClassName,
     placeholder: placeholder,
     value: value,
     onChange: function onChange(e) {
@@ -10794,7 +12228,7 @@ var Carts1 = function Carts1(props) {
     label: /*#__PURE__*/React__default.createElement("a", {
       href: "#",
       className: "flex items-center justify-center bg-primary text-Button gap-2"
-    }, "\u0110\u1EB7t h\xE0ng ", /*#__PURE__*/React__default.createElement(FaArrowRight$1, null)),
+    }, "\u0110\u1EB7t h\xE0ng ", /*#__PURE__*/React__default.createElement(FaArrowRight, null)),
     onClick: function onClick() {
       setIsCheckout(false);
     }
@@ -10877,7 +12311,7 @@ var Carts1 = function Carts1(props) {
         setIsOpenModal(false);
         setOrderSuccessInfo({});
       }
-    }, "Ti\u1EBFp t\u1EE5c mua s\u1EAFm ", /*#__PURE__*/React__default.createElement(FaArrowRight$1, null)),
+    }, "Ti\u1EBFp t\u1EE5c mua s\u1EAFm ", /*#__PURE__*/React__default.createElement(FaArrowRight, null)),
     shopConfigStyle: shopConfigStyle
   }))));
 };
@@ -10966,5 +12400,309 @@ var CartItem = function CartItem(props) {
   }, /*#__PURE__*/React__default.createElement(RiDeleteBin7Line, null), /*#__PURE__*/React__default.createElement("span", null, "X\xF3a"))));
 };
 
-export { About5, Address1, Banner1, Booking1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Input, InputPhoneNumber, Links1, NavBar7, PageTitle1, Partner1, ProductDetail10, ProductHot3, ProductSale2, Products1, Products10, Products2, Products3, ProductsTop1, SectionTitle1, Select$1 as Select, ServiceDetail1, Treatments1, Treatments1$1 as Treatments2 };
+var SearchProduct1 = function SearchProduct1(props) {
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    data = props.data;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
+    bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fffff" : _shopConfigStyle$colo6;
+  var _useState = useState([]),
+    listProducts = _useState[0],
+    setListProducts = _useState[1];
+  var _ProductController = ProductController(_extends({}, props)),
+    getProductListSearch = _ProductController.getProductListSearch;
+  var handleSearch = function handleSearch(productName) {
+    try {
+      var _temp = function () {
+        if (productName) {
+          return Promise.resolve(getProductListSearch({
+            productName: productName
+          })).then(function (data) {
+            setListProducts(data);
+          });
+        } else {
+          setListProducts([]);
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 px-6 md:w-[720px] rounded-lg mx-auto mt-12 "
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "flex items-center  w-full h-9 md:h-14",
+    style: {
+      backgroundColor: bgSecondary
+    },
+    inputClassName: "w-full h-full p-2 text-lg",
+    placeholder: (data === null || data === void 0 ? void 0 : data.sectionTitle) || "Tìm kiếm sản phẩm",
+    onChange: handleSearch,
+    icons: /*#__PURE__*/React__default.createElement("div", {
+      className: "px-2"
+    }, /*#__PURE__*/React__default.createElement(FiSearch, {
+      style: {
+        color: "#828282"
+      }
+    }))
+  }), (listProducts === null || listProducts === void 0 ? void 0 : listProducts.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "max-h-64 overflow-y-auto flex flex-col gap-2 pr-3"
+  }, listProducts === null || listProducts === void 0 ? void 0 : listProducts.map(function (item) {
+    var _item$productInfo, _item$productInfo2;
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: getLinkProductDetail(item === null || item === void 0 ? void 0 : item.productInfo),
+      className: "flex gap-2 text-Body"
+    }, /*#__PURE__*/React__default.createElement(ProductImage, {
+      product: item,
+      className: "h-20 max-w-20 rounded-lg border"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      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))));
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription));
+};
+
+var SearchBar2 = function SearchBar2(props) {
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data;
+  var _useState = useState([]),
+    products = _useState[0],
+    setProducts = _useState[1];
+  var _ProductController = ProductController(_extends({}, props)),
+    getProductListSearch = _ProductController.getProductListSearch;
+  var handleSearch = function handleSearch(productName) {
+    if (productName === void 0) {
+      productName = "";
+    }
+    try {
+      var _temp = function () {
+        if (productName === "") setProducts([]);else {
+          return Promise.resolve(getProductListSearch({
+            productName: productName
+          })).then(function (productList) {
+            setProducts(productList);
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-[100vw] md:w-[50vw] py-6 mx-auto px-6 flex flex-col gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, {
+      className: "text-gray3"
+    }),
+    className: "w-full",
+    inputClassName: "w-full",
+    placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
+    onChange: handleSearch
+  }), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "max-h-64 overflow-y-auto flex flex-col gap-2"
+  }, products === null || products === void 0 ? void 0 : products.map(function (item, index) {
+    var _item$productInfo;
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: getLinkProductDetail(item === null || item === void 0 ? void 0 : item.productInfo),
+      key: "jkgr-" + index,
+      className: "flex gap-2 text-Body"
+    }, /*#__PURE__*/React__default.createElement(ProductImage, {
+      product: item,
+      className: "h-20 max-w-20 rounded-lg border"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      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, {
+      product: item === null || item === void 0 ? void 0 : item.productInfo
+    })));
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto"
+  }, data === null || data === void 0 ? void 0 : data.sectionDescription));
+};
+
+var SearchBar5 = function SearchBar5(props) {
+  var _data$data, _data$data2, _data$data3;
+  var _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    shopConfigStyle = props.shopConfigStyle,
+    data = props.data;
+  var _useState = useState(""),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " md:mt-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: " w-full flex flex-col justify-center px-6 gap-2 md:gap-4 items-center h-32 md:h-48 lg:h-56 rounded-xl md:rounded-3xl ",
+    style: {
+      background: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.srcImage) + ")",
+      backgroundPosition: "center",
+      backgroundSize: "cover"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl font-semibold md:text-3xl lg:text-4xl text-textButton text-center"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.title), /*#__PURE__*/React__default.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.description), /*#__PURE__*/React__default.createElement(Input, {
+    onChange: setValue,
+    icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, {
+      className: "text-gray3 text-xl md:text-2xl"
+    }),
+    className: "w-full bg-bgSecondary w-full md:w-[50vw] lg:w-[35vw] mb-2 md:h-12",
+    style: {
+      borderRadius: "32px"
+    },
+    inputClassName: "w-full",
+    placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
+    suffix: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: genLinkSearch(value)
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      label: "T\xECm ki\u1EBFm",
+      className: "whitespace-nowrap h-full ",
+      shopConfigStyle: shopConfigStyle
+    })) : /*#__PURE__*/React__default.createElement(Button, {
+      label: "T\xECm ki\u1EBFm",
+      className: "whitespace-nowrap ",
+      shopConfigStyle: shopConfigStyle
+    }))
+  })));
+};
+
+var SearchBar6 = function SearchBar6(props) {
+  var _data$data, _data$data2, _data$data3;
+  var shopConfigStyle = props.shopConfigStyle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    data = props.data;
+  var _useState = useState(""),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex flex-col justify-center px-3 md:px-6 gap-2 lg:gap-3 items-center h-32 lg:h-44 ",
+    style: {
+      background: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.srcImage) + ")",
+      backgroundPosition: "center",
+      backgroundSize: "cover"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg font-semibold text-textBody md:text-2xl lg:text-3xl text-center"
+  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.title), /*#__PURE__*/React__default.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.description), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 md:gap-4 lg:gap-6 mb-2 md:mb-0"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, {
+      className: "text-gray3"
+    }),
+    className: "w-full h-full md:h-12 w-full md:w-[70vw] bg-background lg:w-[50vw]",
+    inputClassName: "w-full",
+    placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
+    onChange: setValue
+  }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: genLinkSearch(value)
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap h-full",
+    shopConfigStyle: shopConfigStyle
+  })) : /*#__PURE__*/React__default.createElement(Button, {
+    label: "T\xECm ki\u1EBFm",
+    className: "whitespace-nowrap ",
+    shopConfigStyle: shopConfigStyle
+  }))));
+};
+
+var ShopHighlights2 = function ShopHighlights2(props) {
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " my-0 md:my-0 py-6 grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col items-center text-center lg:px-3 gap-3",
+      key: "kdf-" + index
+    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary w-16 h-16 rounded-full",
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    }) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "logo",
+      className: "w-16 h-16 p-3 rounded-full bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-lg"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description));
+  }));
+};
+
+var ShopHighlights5 = function ShopHighlights5(props) {
+  var data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid md:grid-cols-3 py-6 gap-4 lg:gap-6 bg-bgSecondary"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col items-center text-center md:px-3 lg:px-6 gap-3",
+      key: "kdf-" + index
+    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-16 h-16 rounded-full text-primary ",
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    }) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "logo",
+      className: "w-16 h-16 rounded-full bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-xl text-textHeading pt-2 border-t border-textHeading"
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description));
+  }));
+};
+
+var ShopHighlights6 = function ShopHighlights6(props) {
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " grid md:grid-cols-3 py-6 gap-8 md:gap-4 lg:gap-6"
+  }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col items-center text-center md:px-3 lg:px-6 gap-3",
+      key: "kdf-" + index
+    }, item !== null && item !== void 0 && item.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "text-primary w-16 h-16 rounded-full",
+      dangerouslySetInnerHTML: {
+        __html: configSvg(item === null || item === void 0 ? void 0 : item.svgImage)
+      }
+    }) : /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "logo",
+      className: "w-16 h-16 rounded-full bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: " w-44 h-0.5 rounded-full bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.description), /*#__PURE__*/React__default.createElement(LinkToPage, {
+      Link: Link,
+      href: (item === null || item === void 0 ? void 0 : item.link) || (item === null || item === void 0 ? void 0 : item.route)
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      shopConfigStyle: shopConfigStyle,
+      label: item === null || item === void 0 ? void 0 : item.title
+    })));
+  }));
+};
+
+export { About1, About5, Address1, Banner1, Banner3, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductList5, ProductSale2, ProductSearch1, Products1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, TextArea, TreatmentDetail1, TreatmentItem1, Treatments1, Treatments1$1 as Treatments2, TreatmentsList6 };
 //# sourceMappingURL=index.modern.js.map