npm - s-platform-landing-section - Versions diffs - 0.1.10-alpha.2 → 0.1.10-alpha.3 - Mend

s-platform-landing-section 0.1.10-alpha.2 → 0.1.10-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.css +479 -0
package/dist/index.js +2558 -1161
package/dist/index.js.map +1 -1
package/dist/index.modern.js +2405 -1019
package/dist/index.modern.js.map +1 -1
package/package.json +2 -1
package/dist/no-photo~QhcVGlPG.svg +0 -7

package/dist/index.modern.js CHANGED Viewed

@@ -1,43 +1,20 @@
-import React__default, { useRef, useState, useEffect, createElement, forwardRef, useImperativeHandle } from 'react';
-import { IoCartOutline, IoLocationOutline } from 'react-icons/io5';
-import { FaUserCircle, FaPhone, FaChevronLeft, FaChevronRight, FaArrowLeft, FaArrowRight as FaArrowRight$1, FaFacebookSquare, FaFacebookMessenger } from 'react-icons/fa';
+import React__default, { useState, useEffect, useRef, createElement, forwardRef, useImperativeHandle, memo } from 'react';
+import { IoCartOutline, 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 { 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 { LuSearch } from 'react-icons/lu';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
-import 'react-icons/lu';
-import 'react-icons/io';
+import { IoMdCheckmark, IoIosHeartEmpty } from 'react-icons/io';
 import { SiVisa, SiZalo } from 'react-icons/si';
 import { GoCreditCard } from 'react-icons/go';
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
 var Button = function Button(props) {
-  var _shopConfigStyle$colo;
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
     _props$className = props.className,
@@ -47,21 +24,21 @@ var Button = function Button(props) {
     _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick;
-  var _className = "text-white font-medium rounded-lg text-sm px-4 py-2.5 " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
-  var _style = _extends({
-    backgroundColor: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.primary
-  }, style);
+    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;
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: _className,
-    style: _style,
+    style: style,
     onClick: onClick
   }, label);
 };
 var NavBar7 = function NavBar7(props) {
-  var listRef = useRef(null);
+  var _routes$filter;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -75,27 +52,8 @@ var NavBar7 = function NavBar7(props) {
     _props$userInfo = props.userInfo,
     userInfo = _props$userInfo === void 0 ? null : _props$userInfo,
     _props$cartItems = props.cartItems,
-    cartItems = _props$cartItems === void 0 ? [] : _props$cartItems,
-    _props$navToLogin = props.navToLogin,
-    navToLogin = _props$navToLogin === void 0 ? function () {} : _props$navToLogin,
-    _props$navToRegister = props.navToRegister,
-    navToRegister = _props$navToRegister === void 0 ? function () {} : _props$navToRegister;
-  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.textHeading,
-    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _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,
-    _shopConfigStyle$colo7 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo7 === void 0 ? "#fff" : _shopConfigStyle$colo7;
-  console.log("NavBar7 routes", routes);
-  console.log("NavBar7 userInfo", userInfo);
-  console.log("NavBar7 cartItems", cartItems);
+    cartItems = _props$cartItems === void 0 ? [] : _props$cartItems;
+  console.log("cartItems", cartItems);
   var totalItem = cartItems.reduce(function (total, item) {
     return total + item.quantity;
   }, 0);
@@ -103,34 +61,21 @@ var NavBar7 = function NavBar7(props) {
     totalItem = "9+";
   }
   var cart = function cart() {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex"
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: "/carts"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "relative cursor-pointer"
     }, /*#__PURE__*/React__default.createElement(IoCartOutline, {
-      style: {
-        fontSize: "30px",
-        color: primary
-      }
+      className: "text-primary",
+      size: 30
     }), totalItem ? /*#__PURE__*/React__default.createElement("small", {
-      className: "absolute aspect-square flex items-center bg-danger px-[2px] text-xs rounded-full",
-      style: {
-        color: textButton,
-        top: 0,
-        right: 0
-      }
+      className: "absolute aspect-square flex items-center justify-center bg-danger w-5 text-xs rounded-full text-white -top-1 -right-1"
     }, totalItem) : null));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full sticky top-0 shadow z-50",
-    style: {
-      background: background
-    }
+    className: "w-full sticky top-0 shadow z-50 bg-background"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20",
-    style: {
-      color: textBody
-    }
+    className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
   }, /*#__PURE__*/React__default.createElement("a", {
     href: "/",
     className: "flex items-center gap-2"
@@ -139,58 +84,46 @@ var NavBar7 = function NavBar7(props) {
     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",
-    style: {
-      color: primary
-    }
+    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.map(function (route, index) {
+  }, 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("a", {
       href: route === null || route === void 0 ? void 0 : route.route
     }, (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? /*#__PURE__*/React__default.createElement("div", {
-      className: "py-1 border-b",
-      style: {
-        color: textHeading,
-        borderColor: textHeading
-      }
+      className: "py-1 border-b text-textHeading border-textHeading"
     }, route === null || route === void 0 ? void 0 : route.label) : /*#__PURE__*/React__default.createElement("div", {
       className: "py-1"
     }, route === null || route === void 0 ? void 0 : route.label));
-  })), cart(), !userInfo ?
+  })), cart(), userInfo ?
   /*#__PURE__*/
   React__default.createElement("div", {
     className: "flex justify-center"
   }, /*#__PURE__*/React__default.createElement(FaUserCircle, {
-    color: "#fff",
+    className: "text-bgSecondary",
     size: 48
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col ml-2"
   }, /*#__PURE__*/React__default.createElement("label", null, "Xin ch\xE0o!"), /*#__PURE__*/React__default.createElement("label", {
     className: "font-semibold"
-  }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, "Nguyen Thanh Tung"))) :
+  }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name))) :
   /*#__PURE__*/
   React__default.createElement("div", {
     className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: "/account"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
-    shopConfigStyle: shopConfigStyle,
-    onClick: function onClick() {
-      return navToLogin();
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
+    shopConfigStyle: shopConfigStyle
+  })), /*#__PURE__*/React__default.createElement("a", {
+    href: "/account"
+  }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng ký",
     shopConfigStyle: shopConfigStyle,
-    style: {
-      backgroundColor: "transparent",
-      borderColor: primary,
-      color: primary
-    },
-    className: "border",
-    onClick: function onClick() {
-      return navToRegister();
-    }
-  }))), /*#__PURE__*/React__default.createElement("div", {
+    type: 'outline'
+  })))), /*#__PURE__*/React__default.createElement("div", {
     className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
   }, /*#__PURE__*/React__default.createElement("a", {
     href: "/",
@@ -200,28 +133,22 @@ var NavBar7 = function NavBar7(props) {
     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",
-    style: {
-      color: primary
-    }
-  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
+    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,
-    color: primary
+    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",
-    style: {
-      background: bgSecondary
-    },
+    className: "h-full w-[80vw] max-w-[320px] p-4 bg-bgSecondary",
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
@@ -236,12 +163,9 @@ var NavBar7 = function NavBar7(props) {
     return /*#__PURE__*/React__default.createElement("a", {
       href: route === null || route === void 0 ? void 0 : route.route
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "py-2",
-      style: (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? {
-        color: textHeading
-      } : null
+      className: "py-2 " + ((section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
     }, route === null || route === void 0 ? void 0 : route.label));
-  })))) : null, cart()));
+  })))) : null));
 };
 var SvgIcon = function SvgIcon(_ref) {
@@ -267,44 +191,20 @@ var SvgIcon = function SvgIcon(_ref) {
   }));
 };
 var SectionTitle1 = function SectionTitle1(props) {
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
+  var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
-    textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textSecondary,
-    textSecondary = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4;
   return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center text-2xl md:text-4xl font-merienda font-semibold leading-relaxed",
-    style: {
-      color: textHeading
-    }
+    className: "text-center text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
   }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-32 h-0.5 rounded-full",
-    style: {
-      backgroundColor: secondary
-    }
+    className: "w-32 h-0.5 rounded-full bg-secondary"
   }), /*#__PURE__*/React__default.createElement(SvgIcon, {
-    className: "w-9 h-9",
-    style: {
-      color: secondary
-    }
+    className: "w-9 h-9 text-secondary"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: " w-32 h-0.5 rounded-full",
-    style: {
-      backgroundColor: secondary
-    }
+    className: " w-32 h-0.5 rounded-full bg-secondary"
   })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl font-medium text-center leading-relaxed",
-    style: {
-      color: textSecondary
-    }
+    className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
@@ -323,12 +223,14 @@ var Hero10 = function Hero10(props) {
   }), /*#__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 " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont)
+    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(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
-    });
+    }));
   })));
 };
@@ -346,6 +248,8 @@ var Dash = function Dash(props) {
   });
 };
+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,
@@ -356,14 +260,9 @@ var Hero11 = function Hero11(props) {
     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,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
+    className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -383,14 +282,8 @@ var Hero11 = function Hero11(props) {
 var Hero11$1 = function Hero11(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
+  var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
-    textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
-  console.log("Hero11 data", data);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-full bg-cover bg-center bg-no-repeat grid grid-cols-1 md:grid-cols-2",
     style: {
@@ -403,10 +296,7 @@ var Hero11$1 = function Hero11(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "relative p-12 z-1"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-2xl md:text-4xl leading-[1.6] " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont),
-    style: {
-      color: textHeading
-    }
+    className: "text-2xl md:text-4xl leading-[1.6] font-headingFont text-textHeading"
   }, 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: "pt-6"
   }, 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)));
@@ -431,6 +321,57 @@ function _catch(body, recover) {
 	return result;
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 function bind(fn, thisArg) {
   return function wrap() {
     return fn.apply(thisArg, arguments);
@@ -1751,12 +1692,12 @@ const hasStandardBrowserWebWorkerEnv = (() => {
 const origin = hasBrowserEnv && window.location.href || 'http://localhost';
 var utils$1 = {
-  __proto__: null,
-  hasBrowserEnv: hasBrowserEnv,
-  hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
-  hasStandardBrowserEnv: hasStandardBrowserEnv,
-  navigator: _navigator,
-  origin: origin
+    __proto__: null,
+    hasBrowserEnv: hasBrowserEnv,
+    hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
+    hasStandardBrowserEnv: hasStandardBrowserEnv,
+    navigator: _navigator,
+    origin: origin
 };
 var platform$1 = {
@@ -4895,8 +4836,8 @@ var callBound = function callBoundIntrinsic(name, allowMissing) {
 var _nodeResolve_empty = {};
 var _nodeResolve_empty$1 = {
-  __proto__: null,
-  'default': _nodeResolve_empty
+    __proto__: null,
+    'default': _nodeResolve_empty
 };
 var utilInspect = getCjsExportFromNamespace(_nodeResolve_empty$1);
@@ -6544,21 +6485,30 @@ var getProductListApi = function getProductListApi(shopId, params) {
     }
   });
 };
+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,
-    params = props.params;
+    _props$types = props.types,
+    types = _props$types === void 0 ? "" : _props$types;
   var _useState = useState([]),
     categories = _useState[0],
     setCategories = _useState[1];
-  var defaultParams = {};
   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, _extends({}, defaultParams, params))).then(function (res) {
+        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;
@@ -6859,22 +6809,12 @@ var Features1 = function Features1(props) {
     _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$colo2 = _shopConfigStyle$colo.primary,
-    primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
+    className: SECTION_DEFAULT_CLASS + " relative"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
+    data: data
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
@@ -6884,35 +6824,20 @@ var Features1 = function Features1(props) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "relative w-40 h-24 flex items-center justify-center m-auto md:m-0"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "absolute w-40 h-24 rounded-2xl z-10",
-      style: {
-        backgroundColor: primary
-      }
+      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",
-      style: {
-        backgroundColor: secondary
-      }
+      className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
     }), /*#__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 + ")"
       }
     })), /*#__PURE__*/React__default.createElement("p", {
-      className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg",
-      style: {
-        color: textBody
-      }
+      className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg"
     }, it.title), /*#__PURE__*/React__default.createElement("div", {
-      className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full",
-      style: {
-        backgroundColor: secondary
-      }
+      className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full bg-secondary"
     }), /*#__PURE__*/React__default.createElement("p", {
-      className: "text-base mx-auto md:mx-0 text-center md:text-start",
-      style: {
-        color: textBody
-      }
+      className: "text-base mx-auto md:mx-0 text-center md:text-start"
     }, it.description));
   }))), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
@@ -6920,43 +6845,20 @@ var Features1 = function Features1(props) {
 };
 var Features2 = function Features2(props) {
-  var data = props.data,
-    shopConfigStyle = props.shopConfigStyle;
-  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;
+  var data = props.data;
   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",
-    style: {
-      background: background,
-      color: textBody
-    }
+    className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 grid grid-cols-4 gap-8 rounded-xl",
-    style: {
-      background: bgSecondary
-    }
+    className: "p-6 grid grid-cols-4 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,
-      style: {
-        color: textBody
-      }
+      key: "dfgg-" + index
     }, /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.svgImage,
-      className: "w-12 md:w-16 lg:w-20 xl:w-24",
-      alt: "logo",
-      style: {
-        color: primary
-      }
+      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));
   })));
 };
@@ -7008,6 +6910,12 @@ var ProductController = function ProductController(props) {
   var _useState = useState([]),
     products = _useState[0],
     setProducts = _useState[1];
+  var _useState2 = useState(true),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(),
+    page = _useState3[0],
+    setPage = _useState3[1];
   var defaultParams = {
     page: 0,
     size: 8,
@@ -7021,12 +6929,18 @@ var ProductController = function ProductController(props) {
   var getProductList = function getProductList() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, _extends({}, defaultParams, params))).then(function (res) {
+        setLoading(true);
+        var filterParams = _extends({}, defaultParams, params);
+        console.log("filterParams params", params);
+        console.log("filterParams", filterParams);
+        return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, filterParams)).then(function (res) {
           var _res$data, _res$data$status;
           if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
-            var _res$data2;
+            var _res$data2, _res$data3;
             setProducts(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
+            setPage(res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.page);
           }
+          setLoading(false);
         });
       }, function (e) {
         console.log(e);
@@ -7037,7 +6951,9 @@ var ProductController = function ProductController(props) {
     }
   };
   return {
-    products: products
+    products: products,
+    loading: loading,
+    page: page
   };
 };
@@ -7110,75 +7026,1083 @@ var ProductImage = function ProductImage(props) {
   });
 };
-var Treatments1 = function Treatments1(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;
-  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$colo4 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
-  var _useState = useState({
-      size: 1
-    }),
-    params = _useState[0];
-  var _ProductController = ProductController(_extends({}, props, {
-      params: params
-    })),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("Treatments1 products 1", products);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    var _product$productInfo, _product$productInfo2;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
-      key: index
-    }, index % 2 ? null : /*#__PURE__*/React__default.createElement(ProductImage, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "" + (index % 2 ? "text-right" : "text-left")
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-2xl",
-      style: {
-        color: textBody
-      }
-    }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-4",
-      style: {
-        color: textBody
-      },
-      dangerouslySetInnerHTML: {
-        __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
+var ModalNotification = function ModalNotification(props) {
+  var modalRef = useRef(null);
+  var onClose = props.onClose,
+    onCloseFormBooking = props.onCloseFormBooking;
+  var handleClickOutside = function handleClickOutside(event) {
+    if (modalRef.current && !modalRef.current.contains(event.target)) {
+      onClose();
+      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
+        console.log("đóng nhá");
+        onCloseFormBooking();
       }
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      label: "Đặt lịch ngay",
-      shopConfigStyle: shopConfigStyle,
-      className: "mt-4"
-    })), index % 2 ? /*#__PURE__*/React__default.createElement(ProductImage, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
-    }) : null);
-  })), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: " flex items-center justify-center relative bg-red",
+    ref: modalRef
+  }, props === null || props === void 0 ? void 0 : props.children, /*#__PURE__*/React__default.createElement("button", {
+    className: "absolute top-4 right-4",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(RxCross2, null))));
 };
-var _path$1;
+var getEmployeeListApi = function getEmployeeListApi(shopId) {
+  return api({
+    method: "get",
+    url: "/chain-employment-profile/filter-employ-by-customer",
+    params: {
+      shopIds: shopId
+    },
+    headers: {
+      shopId: shopId
+    }
+  });
+};
+var EmployeeController = function EmployeeController(props) {
+  var _props$isAutoGetList = props.isAutoGetList,
+    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
+    shopConfig = props.shopConfig;
+  var _useState = useState([]),
+    listEmployment = _useState[0],
+    setListEmployment = _useState[1];
+  useEffect(function () {
+    if (isAutoGetList) {
+      getListEmployee();
+    }
+  }, [isAutoGetList]);
+  var getListEmployee = function getListEmployee() {
+    try {
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).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;
+            setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
+          }
+          return res;
+        });
+      }, function (e) {
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    listEmployment: listEmployment,
+    getListEmployee: getListEmployee
+  };
+};
+var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
+  return api({
+    method: "post",
+    url: "/spa-schedule/customer/create",
+    data: data,
+    headers: {
+      shopId: shopId
+    }
+  });
+};
+var _excluded = ["productName"];
+var BookingController = function BookingController(props) {
+  _objectDestructuringEmpty(props);
+  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
+    try {
+      return Promise.resolve(_catch(function () {
+        var data = {
+          appId: "SSPA",
+          customerName: customerName,
+          customerPhone: customerPhone.replace("+", ""),
+          isSellService: true,
+          scheduleDate: new Date(scheduleDate).getTime(),
+          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
+            var productName = _ref.productName,
+              rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+            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;
+    }
+    _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 _className = "h-10 py-1 px-2 border border-stroke rounded focus:outline-none focus:ring-0 " + className;
+  var _inputClassName = (isQuantity ? "text-center w-12" : "") + " " + 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 " + _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 _Object$keys;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = useState([]),
+    listOptions = _useState2[0],
+    setListOptions = _useState2[1];
+  var selectRef = useRef(null);
+  var _useState3 = useState(""),
+    error = _useState3[0],
+    _setError = _useState3[1];
+  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$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    _props$renderItem = props.renderItem,
+    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem,
+    displayItem = props.displayItem,
+    searchOption = props.searchOption,
+    handleSearchOption = props.handleSearchOption;
+  var dropdownRef = useRef(null);
+  var _useState4 = useState('bottom'),
+    dropdownPosition = _useState4[0],
+    setDropdownPosition = _useState4[1];
+  useEffect(function () {
+    var updateDropdownPosition = function updateDropdownPosition() {
+      if (selectRef.current && dropdownRef.current) {
+        var selectRect = selectRef.current.getBoundingClientRect();
+        var spaceBelow = window.innerHeight - selectRect.bottom;
+        var spaceAbove = selectRect.top;
+        if (spaceBelow < spaceAbove) {
+          setDropdownPosition('top');
+        } else {
+          setDropdownPosition('bottom');
+        }
+      }
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener('resize', updateDropdownPosition);
+    }
+    return function () {
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen]);
+  var handleClickOutside = function handleClickOutside(event) {
+    if (selectRef.current && !selectRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  useEffect(function () {
+    setListOptions(options);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [options]);
+  useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      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 === null || value === void 0 ? void 0 : value.length) <= 0) {
+        console.log("chưa chọn gì");
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var handleSearch = function handleSearch(e) {
+    var listOptions = handleSearchOption(e);
+    setListOptions(listOptions);
+  };
+  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  }));
+  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-danger"
+  }, " *") : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: selectRef,
+    className: className + " relative "
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1"
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: className + " bg-white rounded-lg"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "w-full  h-10 bg-transparent flex justify-between items-center px-3 py-2",
+    onClick: function onClick() {
+      setIsOpen(!isOpen);
+    }
+  }, displayItem && (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0 && typeof displayItem === "function" ? displayItem(value) : /*#__PURE__*/React__default.createElement("div", {
+    className: "flex justify-between items-center w-full"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 line-clamp-1"
+  }, placeholder), /*#__PURE__*/React__default.createElement("div", {
+    className: "ms-1"
+  }, /*#__PURE__*/React__default.createElement(FaAngleUp, {
+    className: "text-xs"
+  }), /*#__PURE__*/React__default.createElement(FaAngleDown, {
+    className: "text-xs"
+  })))), isOpen ? /*#__PURE__*/React__default.createElement("div", {
+    ref: dropdownRef,
+    style: {
+      background: "#FFFFFF"
+    },
+    className: className + " absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2')
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "px-3 flex items-center border-b-[1px]"
+  }, /*#__PURE__*/React__default.createElement(LuSearch, {
+    className: "inline text-gray3 me-2"
+  }), /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    className: "py-2 w-full border-0 focus:outline-none focus:ring-0",
+    placeholder: "T\xECm ki\u1EBFm",
+    value: searchOption,
+    onChange: function onChange(e) {
+      handleSearch(e);
+    }
+  })), /*#__PURE__*/React__default.createElement("div", null, listOptions && listOptions.length > 0 ? listOptions.map(function (item, index) {
+    return renderItem(item, index);
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "py-6 text-center"
+  }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3")))) : null), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
+var Select$1 = memo(Select);
+var DateTimePicker = forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
+    rules = props.rules;
+  var _useState = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
+  var CustomInput = forwardRef(function (_ref, ref) {
+    var value = _ref.value,
+      onClick = _ref.onClick,
+      className = _ref.className;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      onClick: onClick,
+      ref: ref
+    }, value);
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setValue: function setValue(text) {
+        return _setValue(text);
+      },
+      getValue: function getValue() {
+        return value;
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var _validateData = function _validateData() {
+    var count = 0;
+    rules.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);
+        count++;
+        return false;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        return false;
+      }
+    });
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
+    }
+  };
+  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
+    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  }));
+  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-danger"
+  }, " *") : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-1"
+  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
+    selected: value,
+    onChange: function onChange(date) {
+      _setValue(date);
+      console.log("check date: ", date);
+    },
+    customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
+      className: _className
+    }),
+    wrapperClassName: "w-full"
+  }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
+});
+var InputPhoneNumber = 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$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;
+  var _useState = useState(defaultValue),
+    value = _useState[0],
+    _setValue = _useState[1];
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var handleOnChange = function handleOnChange(event) {
+    var value = event.target.value;
+    _setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setValue: function setValue(text) {
+        return _setValue(text);
+      },
+      getValue: function getValue() {
+        return value;
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var _validateData = function _validateData() {
+    var count = 0;
+    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 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;
+  var _className = "h-10 px-2 focus:outline-none focus:ring-0 " + className;
+  var data = [{
+    country: "Việt Nam",
+    code: "+84"
+  }];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col px-2 py-1"
+  }, label ? /*#__PURE__*/React__default.createElement("label", null, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center h-10 bg-white rounded-lg"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "flex items-center border-r-2"
+  }, /*#__PURE__*/React__default.createElement(Select$1, {
+    className: 'w-max',
+    options: data,
+    placeholder: "+84",
+    renderItem: function renderItem(item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: "dd\u01B0vhu-" + index,
+        className: "px-2 flex items-center hover:bg-gray-200 rounded-lg whitespace-nowrap v-max"
+      }, item === null || item === void 0 ? void 0 : item.code, "-", item === null || item === void 0 ? void 0 : item.country);
+    }
+  })), /*#__PURE__*/React__default.createElement("input", {
+    type: type,
+    name: name,
+    value: value,
+    placeholder: placeholder,
+    onChange: handleOnChange,
+    required: required,
+    className: _className
+  })), error ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-danger"
+  }, error) : null);
+});
+var formatCurrency = function formatCurrency(amount) {
+  if (isNaN(amount)) {
+    return '0 ₫';
+  }
+  var roundedAmount = Math.round(amount);
+  var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  return formattedAmount + " \u20AB";
+};
+var pattern = {
+  phoneNumberPattern: /^0[0-9]{9}$/
+};
+var numberPattern = /^\d+$/;
+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 BookingForm = function BookingForm(props) {
+  var _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$onCloseFormBoo = props.onCloseFormBooking,
+    onCloseFormBooking = _props$onCloseFormBoo === void 0 ? function () {} : _props$onCloseFormBoo,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  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;
+  var _useState = useState(false);
+  var _useState2 = useState({
+      types: "1,10"
+    }),
+    productsParams = _useState2[0];
+  var _useState3 = useState(false);
+  var _useState4 = useState(new Date());
+  var _useState5 = useState(defaultValue),
+    listProductSelected = _useState5[0],
+    setListProductSelected = _useState5[1];
+  var _useState6 = useState(""),
+    searchOption = _useState6[0],
+    setSearchOption = _useState6[1];
+  var inputNameRef = useRef(null);
+  var inputDateRef = useRef(null);
+  var inputPhoneNumberRef = useRef(null);
+  var inputSelectedRef = useRef(null);
+  var _useState7 = useState(false),
+    isOpenPopup = _useState7[0],
+    setIsOpenPopup = _useState7[1];
+  var _useState8 = useState({}),
+    dataBooking = _useState8[0],
+    setDataBooking = _useState8[1];
+  var _EmployeeController = EmployeeController(_extends({}, props)),
+    _EmployeeController$l = _EmployeeController.listEmployment,
+    listEmployment = _EmployeeController$l === void 0 ? [] : _EmployeeController$l;
+  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;
+  var handleSelectedProduct = function handleSelectedProduct(event, productSelected) {
+    event.stopPropagation();
+    console.log("check:", listProductSelected);
+    var isExist = listProductSelected.some(function (item) {
+      var _item$product;
+      return (item === null || item === void 0 ? void 0 : (_item$product = item.product) === null || _item$product === void 0 ? void 0 : _item$product.productId) === (productSelected === null || productSelected === void 0 ? void 0 : productSelected.productId);
+    });
+    if (isExist) {
+      setListProductSelected(function (prev) {
+        return prev.filter(function (item) {
+          var _item$product2;
+          return (item === null || item === void 0 ? void 0 : (_item$product2 = item.product) === null || _item$product2 === void 0 ? void 0 : _item$product2.productId) !== (productSelected === null || productSelected === void 0 ? void 0 : productSelected.productId);
+        });
+      });
+    } else {
+      setListProductSelected(function (prev) {
+        return [].concat(prev, [{
+          product: productSelected,
+          quantity: 1,
+          technical: {},
+          oldService: false
+        }]);
+      });
+    }
+  };
+  var checkProductSelected = function checkProductSelected(productId) {
+    if (listProductSelected && listProductSelected.length > 0) return listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.some(function (item) {
+      var _item$product3;
+      return (item === null || item === void 0 ? void 0 : (_item$product3 = item.product) === null || _item$product3 === void 0 ? void 0 : _item$product3.productId) === productId;
+    });
+  };
+  var handleChooseTechnical = function handleChooseTechnical(technicalSelected, index) {
+    setListProductSelected(function (prev) {
+      var updateListSelected = [].concat(prev);
+      updateListSelected[index] = _extends({}, updateListSelected[index], {
+        technical: technicalSelected
+      });
+      return updateListSelected;
+    });
+  };
+  var handleOnChangeQuantity = function handleOnChangeQuantity(index, value) {
+    if (!isNaN(value) && value >= 0) {
+      setListProductSelected(function (prev) {
+        var updateListSelected = [].concat(prev);
+        updateListSelected[index] = _extends({}, updateListSelected[index], {
+          quantity: value
+        });
+        return updateListSelected;
+      });
+    }
+  };
+  var checkTechnicalSelected = function checkTechnicalSelected(technicalStaffIds, index) {
+    var _listProductSelected$, _listProductSelected$2;
+    if (listProductSelected && (listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.length) > 0) return (listProductSelected === null || listProductSelected === void 0 ? void 0 : (_listProductSelected$ = listProductSelected[index]) === null || _listProductSelected$ === void 0 ? void 0 : (_listProductSelected$2 = _listProductSelected$.technical) === null || _listProductSelected$2 === void 0 ? void 0 : _listProductSelected$2.sysUserId) === technicalStaffIds;
+  };
+  var removeTechnicalSelected = function removeTechnicalSelected(event, index) {
+    event.stopPropagation();
+    setListProductSelected(function (prev) {
+      var updateListSelected = [].concat(prev);
+      updateListSelected[index] = _extends({}, updateListSelected[index], {
+        technical: {}
+      });
+      return updateListSelected;
+    });
+  };
+  var handleSearchService = function handleSearchService(e) {
+    var searchValue = e.target.value;
+    setSearchOption(searchValue);
+    var listCopy = products.filter(function (item) {
+      var _item$productInfo, _item$productInfo$pro;
+      return item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : (_item$productInfo$pro = _item$productInfo.productName) === null || _item$productInfo$pro === void 0 ? void 0 : _item$productInfo$pro.toLowerCase().includes(searchValue.toLowerCase());
+    });
+    return listCopy;
+  };
+  var handleSearchTechnical = function handleSearchTechnical(e) {
+    var searchValue = e.target.value;
+    setSearchOption(searchValue);
+    var listCopy = listEmployment.filter(function (item) {
+      var _item$name;
+      return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(searchValue.toLowerCase());
+    });
+    return listCopy;
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var _inputNameRef$current, _inputPhoneNumberRef$, _inputDateRef$current, _inputSelectedRef$cur;
+      var validateName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current = inputNameRef.current) === null || _inputNameRef$current === void 0 ? void 0 : _inputNameRef$current.validateData();
+      var validatePhoneNumber = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$ = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$ === void 0 ? void 0 : _inputPhoneNumberRef$.validateData();
+      var validateDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _inputDateRef$current.validateData();
+      var validateService = inputSelectedRef === null || inputSelectedRef === void 0 ? void 0 : (_inputSelectedRef$cur = inputSelectedRef.current) === null || _inputSelectedRef$cur === void 0 ? void 0 : _inputSelectedRef$cur.validateData();
+      var _temp = function () {
+        if (validateName && validatePhoneNumber && validateDate && validateService) {
+          var _inputPhoneNumberRef$2, _inputNameRef$current2, _inputDateRef$current2;
+          var customerPhone = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$2 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$2 === void 0 ? void 0 : _inputPhoneNumberRef$2.getValue();
+          var customerName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current2 = inputNameRef.current) === null || _inputNameRef$current2 === void 0 ? void 0 : _inputNameRef$current2.getValue();
+          var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$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$product4, _item$technical;
+            return {
+              productId: item === null || item === void 0 ? void 0 : (_item$product4 = item.product) === null || _item$product4 === void 0 ? void 0 : _item$product4.productId,
+              technicalStaffIds: [item === null || item === void 0 ? void 0 : (_item$technical = item.technical) === null || _item$technical === void 0 ? void 0 : _item$technical.sysUserId],
+              quantity: item === null || item === void 0 ? void 0 : item.quantity,
+              oldService: item === null || item === void 0 ? void 0 : item.oldService
+            };
+          });
+          var shopId = shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId;
+          console.log("check payload:::", services);
+          return Promise.resolve(createSchedule(customerName, customerPhone, scheduleDate, services, shopId)).then(function (response) {
+            var _response$data, _response$data$status;
+            if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) === '200') {
+              var _response$data2, _inputPhoneNumberRef$3, _inputNameRef$current3;
+              setDataBooking(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.data);
+              setIsOpenPopup(true);
+              inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$3 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$3 === void 0 ? void 0 : _inputPhoneNumberRef$3.setValue("");
+              inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current3 = inputNameRef.current) === null || _inputNameRef$current3 === void 0 ? void 0 : _inputNameRef$current3.setValue("");
+              setListProductSelected([]);
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleClosePopup = function handleClosePopup() {
+    setIsOpenPopup(false);
+    setDataBooking({});
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "grid gap-4 rounded-lg p-6 " + className,
+    style: {
+      backgroundColor: secondary
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    ref: inputNameRef,
+    label: "Họ tên",
+    placeholder: "Nhập họ tên",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập họ tên"
+    }],
+    className: "w-full rounded-lg bg-white",
+    inputClassName: "w-full focus:outline-none focus:ring-0"
+  }), /*#__PURE__*/React__default.createElement(InputPhoneNumber, {
+    ref: inputPhoneNumberRef,
+    label: "Số điện thoại",
+    placeholder: "Nhập số điện thoại",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số điện thoại"
+    }, {
+      type: "pattern",
+      pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
+      message: "Số điện thoại không hợp lệ!"
+    }],
+    className: "w-full rounded-lg"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement(Select$1, {
+    ref: inputSelectedRef,
+    searchOption: searchOption,
+    handleSearchOption: handleSearchService,
+    value: listProductSelected,
+    rules: [{
+      type: "required",
+      message: "Bắt buộc chọn dịch vụ"
+    }],
+    label: "Dịch vụ",
+    placeholder: "Chọn dịch vụ",
+    options: products,
+    renderItem: function renderItem(item, index) {
+      var _item$productInfo2, _item$productInfo3;
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: "dfjsvsjvhu-" + index,
+        className: "px-2 py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
+        onClick: function onClick(event) {
+          handleSelectedProduct(event, item === null || item === void 0 ? void 0 : item.productInfo);
+        }
+      }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
+        className: (checkProductSelected(item === null || item === void 0 ? void 0 : (_item$productInfo2 = item.productInfo) === null || _item$productInfo2 === void 0 ? void 0 : _item$productInfo2.productId) ? "" : "invisible") + " inline me-2 w-4"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: " whitespace-nowrap line-clamp-1"
+      }, item === null || item === void 0 ? void 0 : (_item$productInfo3 = item.productInfo) === null || _item$productInfo3 === void 0 ? void 0 : _item$productInfo3.productName));
+    }
+  })), /*#__PURE__*/React__default.createElement(DateTimePicker, {
+    ref: inputDateRef,
+    label: "Thời gian",
+    className: "w-full rounded-lg",
+    placeholder: "Chọn thời gian",
+    rules: [{
+      type: "required",
+      message: "Bắt buộc chọn ngày đặt"
+    }]
+  })), (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$product5;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "w-full bg-transparent border-b-2 py-3 grid grid-col-12 gap-2",
+      key: "ohoihtr-" + optionIndex
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-12 grid grid-cols-12"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-1 "
+    }, /*#__PURE__*/React__default.createElement("div", null, optionIndex + 1, ".")), /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-10"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-10 font-semibold "
+    }, item === null || item === void 0 ? void 0 : (_item$product5 = item.product) === null || _item$product5 === void 0 ? void 0 : _item$product5.productName)), /*#__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",
+      onClick: function onClick(event) {
+        handleSelectedProduct(event, item === null || item === void 0 ? void 0 : item.product);
+      }
+    }, /*#__PURE__*/React__default.createElement(RxCross2, {
+      className: "text-base ",
+      style: {
+        color: "rgb(220, 38, 38)"
+      }
+    })))), /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-12 grid grid-cols-12 gap-6"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-4  lg:col-start-2 lg:col-end-5 flex flex-col gap-2"
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      isQuantity: true,
+      labelClassName: "text-sm font-semibold ",
+      wrapClassName: "w-full flex flex-col gap-2",
+      label: "Số lượng",
+      placeholder: "Nhập số lượng",
+      rules: [{
+        type: "required",
+        message: "Bắt buộc nhập số lượng"
+      }],
+      defaultValue: item === null || item === void 0 ? void 0 : item.quantity,
+      className: "w-full rounded-lg bg-bgSecondary ",
+      inputClassName: "w-full focus:outline-none focus:ring-0",
+      onChange: function onChange(value) {
+        handleOnChangeQuantity(optionIndex, value);
+      }
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "col-end-13 col-span-8 flex flex-col gap-2 "
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "font-semibold text-sm mb-1"
+    }, "K\u1EF9 thu\u1EADt vi\xEAn"), /*#__PURE__*/React__default.createElement(Select$1, {
+      placeholder: "Ch\u1ECDn k\u1EF9 thu\u1EADt vi\xEAn",
+      searchOption: searchOption,
+      handleSearchOption: handleSearchTechnical,
+      value: item === null || item === void 0 ? void 0 : item.technical,
+      className: "w-full  border rounded-lg",
+      displayItem: function displayItem(technicalSelected) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "flex justify-between items-center w-full"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-clamp-1 text-start "
+        }, technicalSelected === null || technicalSelected === void 0 ? void 0 : technicalSelected.name, "(", technicalSelected === null || technicalSelected === void 0 ? void 0 : technicalSelected.roleName, ")"), /*#__PURE__*/React__default.createElement("div", {
+          onClick: function onClick(event) {
+            removeTechnicalSelected(event, optionIndex);
+          }
+        }, /*#__PURE__*/React__default.createElement(RxCross2, {
+          className: "text-xs"
+        })));
+      },
+      options: listEmployment,
+      renderItem: function renderItem(employee, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: "dds32vsjvhu-" + index,
+          className: (checkTechnicalSelected(employee === null || employee === void 0 ? void 0 : employee.sysUserId, optionIndex) ? "bg-gray-100" : "") + " px-2 py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
+          onClick: function onClick() {
+            handleChooseTechnical(employee, optionIndex);
+          }
+        }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
+          className: (checkTechnicalSelected(employee === null || employee === void 0 ? void 0 : employee.sysUserId, optionIndex) ? "" : "invisible") + " inline me-2  min-w-2 md:min-w-4 h-auto"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "hover:bg-gray-100 rounded-lg text-wrap md:text-base text-xs"
+        }, employee === null || employee === void 0 ? void 0 : employee.name, "(", employee === null || employee === void 0 ? void 0 : employee.roleName, ")"));
+      }
+    }))));
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đặt lịch ngay",
+    shopConfigStyle: shopConfigStyle,
+    onClick: handleSubmit
+  })), isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
+    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 "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-20 mb-4 flex items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement(FaCheckCircle, {
+    className: "h-full text-green-500",
+    style: {
+      fontSize: "150px"
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2"
+  }, "Kh\xE1ch h\xE0ng: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerName), /*#__PURE__*/React__default.createElement("div", {
+    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"
+  }, "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) {
+  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;
+  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;
+  var _useState = useState({
+      size: 10,
+      types: "1,10",
+      isHighlight: true
+    }),
+    params = _useState[0];
+  var _useState2 = useState(false),
+    isOpenModal = _useState2[0],
+    setIsOpenModal = _useState2[1];
+  var _useState3 = useState([]),
+    dataBooking = _useState3[0],
+    setDataBooking = _useState3[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("treatment1:", products);
+  var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
+    try {
+      event.stopPropagation();
+      setDataBooking([{
+        product: data,
+        quantity: 1,
+        technical: {},
+        oldService: false
+      }]);
+      setIsOpenModal(true);
+    } catch (error) {
+      console.log("::::::::::errrorrrrr::::::", error);
+    }
+  };
+  var handleCloseModal = function handleCloseModal() {
+    setIsOpenModal(false);
+    console.log("đóng::::");
+    setDataBooking([]);
+  };
+  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
+  }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    var _product$productInfo, _product$productInfo2;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
+      key: "rthirr-" + index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "block " + (index % 2 ? "md:hidden" : "")
+    }, /*#__PURE__*/React__default.createElement(ProductImage, {
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      className: "aspect-video rounded-2xl"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "text-left " + (index % 2 ? "md:text-right" : "")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-2xl"
+    }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
+      className: "mt-4 text-textBody",
+      dangerouslySetInnerHTML: {
+        __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
+      }
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      label: "Đặt lịch ngay",
+      shopConfigStyle: shopConfigStyle,
+      className: "mt-4",
+      onClick: function onClick(event) {
+        handleOpenModalBooking(event, product === null || product === void 0 ? void 0 : product.productInfo);
+      }
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "hidden " + (index % 2 ? "md:block" : "")
+    }, /*#__PURE__*/React__default.createElement(ProductImage, {
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      className: "aspect-video rounded-2xl"
+    })));
+  })), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onClose: handleCloseModal
+  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    className: "overflow-y-scroll hide-scrollbar max-h-[80vh]",
+    onCloseFormBooking: handleCloseModal,
+    defaultValue: dataBooking,
+    shopConfig: shopConfig,
+    shopConfigStyle: shopConfigStyle
+  })) : null);
+};
+var _path$1;
 function _extends$2() {
   return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -7227,8 +8151,6 @@ var ScrollHorizontal = function ScrollHorizontal(props) {
     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$renderItem = props.renderItem,
     renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
   var scrollContainerRef = useRef(null);
@@ -7282,20 +8204,14 @@ var ScrollHorizontal = function ScrollHorizontal(props) {
     className: "flex gap-2 items-center px-4"
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: scrollLeft,
-    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
-    style: {
-      backgroundColor: isScrolledToLeft ? "#BDBDBD" : primaryColor
-    }
+    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToLeft ? "bg-gray4" : "bg-primary")
   }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
     width: 24,
     height: 24,
     fill: "#fff"
   })), /*#__PURE__*/React__default.createElement("div", {
     onClick: scrollRight,
-    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
-    style: {
-      backgroundColor: isScrolledToRight ? "#BDBDBD" : primaryColor
-    }
+    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
   }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
     width: 24,
     height: 24,
@@ -7304,36 +8220,103 @@ var ScrollHorizontal = function ScrollHorizontal(props) {
 };
 var getDurationValue = function getDurationValue(attributes) {
-  var _parsedAttributes$fin;
-  var parsedAttributes = JSON.parse(attributes || "[]");
-  return ((_parsedAttributes$fin = parsedAttributes.find(function (attr) {
+  var _durationAtt$value, _durationAtt$unit;
+  if (!attributes) {
+    return "";
+  }
+  if (typeof attributes === "string") {
+    attributes = JSON.parse(attributes || "[]");
+  }
+  var durationAtt = attributes.find(function (attr) {
     return attr.name === "Thời lượng (phút) / buổi";
-  })) === null || _parsedAttributes$fin === void 0 ? void 0 : _parsedAttributes$fin.value[0]) || "0";
-};
-var formatCurrency = function formatCurrency(amount) {
-  if (isNaN(amount)) {
-    return '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") + " " + ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$unit = durationAtt.unit) === null || _durationAtt$unit === void 0 ? void 0 : _durationAtt$unit[0]) || "") : "";
+};
+var genProductSlug = function genProductSlug(productName, id) {
+  var slug = productName.toLowerCase();
+  slug = slug.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, "a");
+  slug = slug.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, "e");
+  slug = slug.replace(/(ì|í|ị|ỉ|ĩ)/g, "i");
+  slug = slug.replace(/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/g, "o");
+  slug = slug.replace(/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/g, "u");
+  slug = slug.replace(/(ỳ|ý|ỵ|ỷ|ỹ)/g, "y");
+  slug = slug.replace(/(đ)/g, "d");
+  slug = slug.replace(/([^0-9a-z-\s])/g, "");
+  slug = slug.replace(/(\s+)/g, "-");
+  slug = slug.replace(/^-+/g, "");
+  slug = slug.replace(/-+$/g, "");
+  return slug + "-" + id;
+};
+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);
+};
+function getMinMax(array, field) {
+  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
+    return null;
   }
-  var roundedAmount = Math.round(amount);
-  var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-  return formattedAmount + " \u20AB";
-};
+  var _array$reduce = array.reduce(function (acc, obj) {
+      var value = obj[field];
+      return {
+        min: value < acc.min ? value : acc.min,
+        max: value > acc.max ? value : acc.max
+      };
+    }, {
+      min: array[0][field],
+      max: array[0][field]
+    }),
+    min = _array$reduce.min,
+    max = _array$reduce.max;
+  return {
+    min: min,
+    max: max
+  };
+}
 var ProductPrice = function ProductPrice(props) {
   var product = props.product,
+    variant = props.variant,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style;
+  var _useState = useState(),
+    displayPrice = _useState[0],
+    setDisplayPrice = _useState[1];
+  var _useState2 = useState(),
+    displayPriceBeforeDiscount = _useState2[0],
+    setDisplayPriceBeforeDiscount = _useState2[1];
+  useEffect(function () {
+    if (variant) {
+      genProductPrice([variant]);
+    } else if (product) {
+      genProductPrice(product.variants);
+    }
+  }, [product, variant]);
+  var genProductPrice = function genProductPrice(variants) {
+    var mPrice = getMinMax(variants, 'price');
+    var mPriceBeforeDiscount = getMinMax(variants, 'priceBeforeDiscount');
+    if (mPrice && mPriceBeforeDiscount) {
+      var _displayPriceBeforeDiscount = formatCurrency(mPriceBeforeDiscount.min);
+      var _displayPrice = formatCurrency(mPrice.min);
+      if (mPrice.min !== mPrice.max) {
+        _displayPrice += " - " + formatCurrency(mPrice.max);
+      }
+      if (mPriceBeforeDiscount.min !== mPriceBeforeDiscount.max) {
+        _displayPriceBeforeDiscount += " - " + formatCurrency(mPriceBeforeDiscount.max);
+      }
+      setDisplayPrice(_displayPrice);
+      setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, product !== null && product !== void 0 && product.priceBeforeDiscount ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray3 line-through"
-  }, formatCurrency(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null, /*#__PURE__*/React__default.createElement("span", {
+  }, displayPriceBeforeDiscount !== displayPrice ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through mr-2"
+  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "text-primary font-semibold",
     style: style
-  }, formatCurrency(product === null || product === void 0 ? void 0 : product.price)));
+  }, displayPrice));
 };
 var ProductItem1 = function ProductItem1(props) {
@@ -7351,11 +8334,23 @@ var ProductItem1 = function ProductItem1(props) {
     className: "flex mt-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex-1 text-gray3"
-  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes), " ph\xFAt"), /*#__PURE__*/React__default.createElement(ProductPrice, {
+  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product
   }))));
 };
+var Loading = function Loading(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 24 : _props$size;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "border-4 boder-[rgba(255, 255, 255, 0.2)] rounded-full border-t-4 border-t-primary animate-spin",
+    style: {
+      width: size,
+      height: size
+    }
+  });
+};
 var Treatments1$1 = function Treatments1(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -7364,34 +8359,37 @@ var Treatments1$1 = function Treatments1(props) {
     _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$colo2 = _shopConfigStyle$colo.primary,
-    primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
-    _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
-  var _useState = useState({}),
-    params = _useState[0];
-  var _CategoryController = CategoryController(_extends({}, props)),
+    _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
+  var _useState = useState({
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "1"
+    })),
     categories = _CategoryController.categories;
   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;
   var _useState2 = useState(0),
     selectedCategory = _useState2[0],
     setSelectedCategory = _useState2[1];
-  console.log("Treatments2 products");
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
+  useEffect(function () {
+    var newParams = _extends({}, params, {
+      categoryId: selectedCategory
+    });
+    if (!selectedCategory) {
+      delete newParams.categoryId;
     }
+    setParams(newParams);
+  }, [selectedCategory]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " relative"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -7400,40 +8398,111 @@ var Treatments1$1 = function Treatments1(props) {
       categoryId: 0,
       cateName: "Tất cả"
     }].concat(categories),
-    style: {
-      backgroundColor: secondary
-    },
-    className: "mt-6 rounded-lg overflow-hidden",
-    primaryColor: primary,
+    className: "mt-6 rounded-lg overflow-hidden bg-bgSecondary",
     renderItem: function renderItem(item, index) {
       return /*#__PURE__*/React__default.createElement("div", {
         key: index,
-        className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base",
+        className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
         onClick: function onClick() {
           return setSelectedCategory(item.categoryId);
-        },
-        style: {
-          backgroundColor: selectedCategory === item.categoryId ? primary : "inherit",
-          color: selectedCategory === item.categoryId ? textButton : textBody
         }
       }, item === null || item === void 0 ? void 0 : item.cateName);
     }
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full justify-center p-12"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
   }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(ProductItem1, {
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 text-center p-12"
+  }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
+var ProductDetailController = function ProductDetailController(props) {
+  var shopConfig = props.shopConfig,
+    _props$productId = props.productId,
+    productId = _props$productId === void 0 ? 0 : _props$productId;
+  var _useState = useState(),
+    product = _useState[0],
+    setProduct = _useState[1];
+  useEffect(function () {
+    if (productId) {
+      getProductDetail();
+    }
+  }, [productId]);
+  var getProductDetail = function getProductDetail() {
+    try {
+      var _temp = _catch(function () {
+        return Promise.resolve(getDetailProductApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, productId)).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;
+            setProduct(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 {
+    product: product
+  };
+};
+var ServiceDetail1 = function ServiceDetail1(props) {
+  var shopConfigStyle = props.shopConfigStyle;
+  var _ProductDetailControl = ProductDetailController(props),
+    product = _ProductDetailControl.product;
+  console.log('product', product);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " !py-0"
+  }, /*#__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, {
+    product: product,
+    className: "w-full aspect-square rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-2"
+  }, /*#__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"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 mt-6"
+  }, /*#__PURE__*/React__default.createElement("div", null, "Th\u1EDDi l\u01B0\u1EE3ng: "), /*#__PURE__*/React__default.createElement("div", null, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 mt-6"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "ĐẶT LỊCH",
+    shopConfigStyle: shopConfigStyle
+  })), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-lg mt-12 pt-6 border-t border-stroke"
+  }, "M\xF4 t\u1EA3"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6",
+    dangerouslySetInnerHTML: {
+      __html: product === null || product === void 0 ? void 0 : product.description
+    }
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 mt-2"
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
+};
 var ProductItem2 = function ProductItem2(props) {
   var product = props.product;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center"
+  return /*#__PURE__*/React__default.createElement("a", {
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center relative group"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "max-w-[240px] rounded-full mx-auto"
@@ -7442,7 +8511,7 @@ var ProductItem2 = function ProductItem2(props) {
     className: "text-lg mt-4"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg mt-2"
-  }, product === null || product === void 0 ? void 0 : product.productName));
+  }, product === null || product === void 0 ? void 0 : product.productName)));
 };
 var Products1 = function Products1(props) {
@@ -7454,9 +8523,7 @@ var Products1 = function Products1(props) {
     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,
-    _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   var _useState = useState({
       size: 4
     }),
@@ -7468,10 +8535,7 @@ var Products1 = function Products1(props) {
     products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
   console.log("Products1 products");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full py-12 px-4 xl:px-20 text-center",
-    style: {
-      backgroundColor: background
-    }
+    className: SECTION_DEFAULT_CLASS + " text-center"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -7487,162 +8551,39 @@ var Products1 = function Products1(props) {
     shopConfigStyle: shopConfigStyle,
     className: "mt-12"
   })), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
-var ItemProduct = function ItemProduct(props) {
-  var _shopConfigStyle$colo, _shopConfigStyle$colo2, _shopConfigStyle$colo3;
-  var product = props.product,
-    shopConfigStyle = props.shopConfigStyle;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "pb-4 rounded-2xl w-full",
-    style: {
-      background: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.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",
-    style: {
-      top: "10%",
-      color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo2 = shopConfigStyle.color) === null || _shopConfigStyle$colo2 === void 0 ? void 0 : _shopConfigStyle$colo2.textButton
-    }
-  }, ((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,
-    style: {
-      color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo3 = shopConfigStyle.color) === null || _shopConfigStyle$colo3 === void 0 ? void 0 : _shopConfigStyle$colo3.primary
-    }
-  }))));
-};
-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,
-    _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$renderItem = props.renderItem,
-    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
-  var handleClickPrevImg = function handleClickPrevImg() {
-    if (carouselRef.current) {
-      setIsScrolledToLeft(true);
-      setIsScrolledToRight(false);
-      carouselRef.current.scrollBy({
-        left: -300,
-        behavior: "smooth"
-      });
-    }
-  };
-  var handleClickNextImg = function handleClickNextImg() {
-    setIsScrolledToRight(true);
-    setIsScrolledToLeft(false);
-    if (carouselRef.current) {
-      carouselRef.current.scrollBy({
-        left: 300,
-        behavior: "smooth"
-      });
-    }
-  };
-  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",
-    ref: carouselRef
-  }, datas && datas.length > 0 && datas.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%]",
-    style: {
-      backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
-    },
-    onClick: handleClickPrevImg
-  }, /*#__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",
-    style: {
-      backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
-    },
-    onClick: handleClickNextImg
-  }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
-    className: "text-sm lg:text-lg text-white"
-  }))));
-};
-var Products2 = function Products2(props) {
-  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.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
-    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
-    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
-    _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
-    textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
-  var _ProductController = ProductController(props),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("Products2 products");
+    color: secondary
+  }));
+};
+var ItemProduct = function ItemProduct(props) {
+  var product = props.product;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "pt-10 px-4 xl:px-20",
-    style: {
-      background: background,
-      color: textBody
-    }
+    className: "pb-4 rounded-2xl w-full bg-bgSecondary"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
-    style: {
-      background: secondary
-    }
-  }, /*#__PURE__*/React__default.createElement("h2", {
-    className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5  pb-4",
+    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: {
-      color: textButton
-    }
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
-    datas: 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, {
-        product: item.productInfo,
-        shopConfigStyle: shopConfigStyle
-      }));
+      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 CarouselItem = function CarouselItem(props) {
-  var listRef = useRef(null);
+var Carousel = function Carousel(props) {
+  var carouselRef = useRef(null);
   var _useState = useState(false),
     isScrolledToLeft = _useState[0],
     setIsScrolledToLeft = _useState[1];
@@ -7657,16 +8598,14 @@ var CarouselItem = function CarouselItem(props) {
     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) {
+    if (carouselRef.current) {
       setIsScrolledToLeft(true);
       setIsScrolledToRight(false);
-      listRef.current.scrollBy({
-        left: -80,
+      carouselRef.current.scrollBy({
+        left: -300,
         behavior: "smooth"
       });
     }
@@ -7674,541 +8613,657 @@ var CarouselItem = function CarouselItem(props) {
   var handleClickNextImg = function handleClickNextImg() {
     setIsScrolledToRight(true);
     setIsScrolledToLeft(false);
-    if (listRef.current) {
-      listRef.current.scrollBy({
-        left: 80,
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({
+        left: 300,
         behavior: "smooth"
       });
     }
   };
-  console.log("check propsss::::::::", datas);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-12 h-12 " + className,
+    className: "relative " + 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
+    className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
+    ref: carouselRef
   }, 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,
+  })), 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%]",
     style: {
       backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
-    }
+    },
+    onClick: handleClickPrevImg
   }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
-    className: "inline-block mb-1 text-lg",
-    style: {
-      color: textButtonColor
-    }
+    className: "text-sm lg:text-lg text-white"
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: "bg-gray2 px-4 py-3 rounded-full",
+    className: " hidden md:block p-3 rounded-full absolute top-[45%] right-[-2%] lg:right-0",
     style: {
       backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
     },
     onClick: handleClickNextImg
   }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
-    className: "inline-block mb-1 text-lg",
-    style: {
-      color: textButtonColor
-    }
+    className: "text-sm lg:text-lg text-white"
   }))));
 };
-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;
-  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);
-  }));
-};
-var Products10 = function Products10(props) {
-  var _useState = useState(""),
-    selectCategory = _useState[0],
-    setSelectCategory = _useState[1];
+var Products2 = function Products2(props) {
   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$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
+    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
+    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _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),
-    _CategoryController$c = _CategoryController.categories,
-    categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
+    _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
+    textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
   var _ProductController = ProductController(props),
     _ProductController$pr = _ProductController.products,
     products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("Products10 products");
+  console.log("Products2 products");
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20",
+    className: "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
-      }));
-    }
-  }));
-};
-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),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("ProductsTop1 products");
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full pt-10 px-4 xl:px-20",
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
     style: {
-      background: background
+      background: secondary
     }
   }, /*#__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
-      }));
-    }
-  }));
-};
-var getEmployeeListApi = function getEmployeeListApi(shopId) {
-  return api({
-    method: "post",
-    url: "/chain-employment-profile/filter-employ-by-customer",
-    headers: {
-      shopId: shopId
-    }
-  });
-};
-var EmployeeController = function EmployeeController(props) {
-  var _props$isAutoGetList = props.isAutoGetList,
-    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
-    shopConfig = props.shopConfig;
-  var _useState = useState([]),
-    listEmployment = _useState[0],
-    setListEmployment = _useState[1];
-  useEffect(function () {
-    if (isAutoGetList) {
-      getListEmployee();
-    }
-  }, [isAutoGetList]);
-  var getListEmployee = function getListEmployee() {
-    try {
-      return Promise.resolve(_catch(function () {
-        return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).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;
-            setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
-          }
-          return res;
-        });
-      }, function (e) {
-        console.log(e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  return {
-    listEmployment: listEmployment,
-    getListEmployee: getListEmployee
-  };
-};
-var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
-  return api({
-    method: "post",
-    url: "/spa-schedule/customer/create",
-    data: data,
-    headers: {
-      shopId: shopId
+    className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5  pb-4",
+    style: {
+      color: textButton
     }
-  });
-};
-var _excluded = ["productName"];
-var BookingController = function BookingController(props) {
-  _objectDestructuringEmpty(props);
-  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
-    try {
-      return Promise.resolve(_catch(function () {
-        var data = {
-          appId: "SSPA",
-          customerName: customerName,
-          customerPhone: customerPhone.replace("+", ""),
-          isSellService: true,
-          scheduleDate: new Date(scheduleDate).getTime(),
-          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
-            var productName = _ref.productName,
-              rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-            return rest;
-          }),
-          shopId: shopId
-        };
-        return Promise.resolve(createSpaScheduleApi(shopId, data));
-      }, function (e) {
-        console.log(e);
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
+    datas: 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, {
+        product: item.productInfo,
+        shopConfigStyle: shopConfigStyle
       }));
-    } 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,
+var Pagination = function Pagination(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 24 : _props$size,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
-    _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;
-  var _useState = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setValue: function setValue(text) {
-        return _setValue(text);
-      },
-      getValue: function getValue() {
-        return value();
+    _props$total_pages = props.total_pages,
+    total_pages = _props$total_pages === void 0 ? 0 : _props$total_pages,
+    _props$has_next = props.has_next,
+    has_next = _props$has_next === void 0 ? true : _props$has_next,
+    _props$has_previous = props.has_previous,
+    has_previous = _props$has_previous === void 0 ? false : _props$has_previous,
+    _props$current_page = props.current_page,
+    current_page = _props$current_page === void 0 ? 0 : _props$current_page,
+    _props$onPageChange = props.onPageChange,
+    onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange;
+  var handlePageChange = function handlePageChange(page) {
+    onPageChange(page);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 items-center justify-self-center " + className
+  }, /*#__PURE__*/React__default.createElement(IoChevronBackOutline, {
+    className: has_previous ? "text-primary" : "text-gray3",
+    size: size
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-1"
+  }, Array(total_pages).fill().map(function (_, index) {
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: index,
+      onClick: function onClick() {
+        return handlePageChange(index);
       },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
-  });
-  var _validateData = function _validateData() {
-    var count = 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);
-        count++;
-        return false;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        return false;
+      className: "px-4 py-1 rounded-md " + (index === current_page ? 'bg-primary text-textButton' : 'bg-transparent text-primary') + " hover:opacity-80"
+    }, index + 1);
+  })), /*#__PURE__*/React__default.createElement(IoChevronForwardOutline, {
+    className: has_next ? "text-primary" : "text-gray3",
+    size: size
+  }));
+};
+var Products3 = function Products3(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;
+  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;
+  var _useState = useState({
+      size: 6
+    }),
+    productParams = _useState[0],
+    setProductParams = _useState[1];
+  var _useState2 = useState(false),
+    isAutoGetList = _useState2[0],
+    setIsAutoGetList = _useState2[1];
+  var _useState3 = useState(),
+    categorySelected = _useState3[0],
+    setCategorySelected = _useState3[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: productParams,
+      isAutoGetList: isAutoGetList
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading,
+    page = _ProductController.page;
+  var _CategoryController = CategoryController(_extends({}, props, {
+      params: {
+        type: "0"
       }
-    });
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
+    })),
+    categories = _CategoryController.categories;
+  useEffect(function () {
+    setCategorySelected(categories === null || categories === void 0 ? void 0 : categories[0]);
+  }, [categories]);
+  useEffect(function () {
+    if (categorySelected) {
+      setProductParams(_extends({}, productParams, {
+        page: 0,
+        categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId
+      }));
+      setIsAutoGetList(true);
     }
+  }, [categorySelected]);
+  var onSelectCategory = function onSelectCategory(category) {
+    setCategorySelected(category);
   };
-  var handleOnChange = function handleOnChange(event) {
-    var value = event.target.value;
-    _setValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  var onPageChange = function onPageChange(pageNum) {
+    setProductParams(_extends({}, productParams, {
+      page: pageNum
+    }));
   };
-  var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
-  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
-    return (e === null || e === void 0 ? void 0 : e.type) === "required";
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-4 gap-12"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden md:block"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-xl"
+  }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (category === null || category === void 0 ? void 0 : category.categoryId) ? "text-primary" : "text-textSecondary"),
+      key: index,
+      onClick: function onClick() {
+        return onSelectCategory(category);
+      }
+    }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
+      size: 24
+    }), /*#__PURE__*/React__default.createElement("div", null, category === null || category === void 0 ? void 0 : category.cateName));
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "md:hidden"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-3 text-center"
+  }, loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full justify-center p-12"
+  }, /*#__PURE__*/React__default.createElement(Loading, {
+    size: 32
+  })) : /*#__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, {
+      key: index,
+      product: product === null || product === void 0 ? void 0 : product.productInfo
+    });
+  })), /*#__PURE__*/React__default.createElement(Pagination, _extends({
+    className: "mt-12"
+  }, page, {
+    onPageChange: onPageChange
+  }))))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
   }));
-  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-danger"
-  }, " *") : null;
-  return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("input", {
-    type: type,
-    name: name,
-    value: value,
-    placeholder: placeholder,
-    onChange: handleOnChange,
-    required: required,
-    className: _className
-  }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
-});
+};
-var Select = 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,
+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$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 ? null : _props$defaultValue,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    _props$options = props.options,
-    options = _props$options === void 0 ? [] : _props$options,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required;
-  var _useState = useState(defaultValue),
-    value = _useState[0],
-    _setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setValue: function setValue(text) {
-        return _setValue(text);
-      },
-      getValue: function getValue() {
-        return value();
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
-  });
-  var _validateData = function _validateData() {
-    var count = 0;
-    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);
-        count++;
-        return false;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        return false;
-      }
-    });
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
+    _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"
+      });
     }
   };
-  var handleOnChange = function handleOnChange(event) {
-    var value = event.target.value;
-    _setValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-  };
-  var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
-  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-danger"
-  }, " *") : null;
-  return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("select", {
-    name: name,
-    value: value,
-    onChange: handleOnChange,
-    required: required,
-    className: _className
-  }, /*#__PURE__*/React__default.createElement("option", {
-    value: "",
-    disabled: true,
-    selected: true,
-    hidden: true
-  }, placeholder), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      value: option.value,
-      key: index
-    }, option === null || option === void 0 ? void 0 : option.label);
-  })), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
-});
+  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 DateTimePicker = function DateTimePicker(props) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
+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$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required;
-  var _useState = useState(defaultValue),
-    value = _useState[0],
-    setValue = _useState[1];
-  var _useState2 = useState(""),
-    error = _useState2[0];
-  var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
-  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-danger"
-  }, " *") : null;
-  var CustomInput = forwardRef(function (_ref, ref) {
-    var value = _ref.value,
-      onClick = _ref.onClick,
-      className = _ref.className;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className,
-      onClick: onClick,
-      ref: ref
-    }, value);
-  });
+    className = _props$className === void 0 ? {} : _props$className,
+    _props$renderItem = props.renderItem,
+    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
-  }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
-    selected: value,
-    onChange: function onChange(date) {
-      return setValue(date);
-    },
-    customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
-      className: _className
-    }),
-    wrapperClassName: "w-full"
-  }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
+    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);
+  }));
 };
-var BookingForm = function BookingForm(props) {
+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),
+    _CategoryController$c = _CategoryController.categories,
+    categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
+  var _ProductController = ProductController(props),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("Products10 products");
+  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
+      }));
+    }
+  }));
+};
+var ProductSale2 = function ProductSale2(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+    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;
-  var _useState = useState(false),
-    isAutoGetListProduct = _useState[0];
-  var _useState2 = useState({
-      types: "1,10"
+  var _useState = useState({
+      size: 4
+    });
+  var products = [];
+  console.log("Products1 products");
+  return products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " text-center"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__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,
+      product: product === null || product === void 0 ? void 0 : product.productInfo
+    });
+  })), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem tất cả",
+    shopConfigStyle: shopConfigStyle,
+    className: "mt-12"
+  })), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  })) : 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;
+  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;
+  var _useState = useState({
+      size: 4,
+      isHighlight: true
     }),
-    productsParams = _useState2[0];
-  var _useState3 = useState(false),
-    isAutoGetListEmployee = _useState3[0];
-  var _useState4 = useState(new Date());
-  var _EmployeeController = EmployeeController(_extends({}, props, {
-      isAutoGetList: isAutoGetListEmployee
-    }));
+    params = _useState[0];
   var _ProductController = ProductController(_extends({}, props, {
-      isAutoGetList: isAutoGetListProduct,
-      params: productsParams
-    }));
-  console.log("BookingForm products");
-  var _BookingController = BookingController(props);
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("Products1 products");
+  return products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " text-center"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__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,
+      product: product === null || product === void 0 ? void 0 : product.productInfo
+    });
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  })) : null;
+};
+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),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("ProductsTop1 products");
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "grid gap-4 rounded-lg p-6",
+    className: "w-full pt-10 px-4 xl:px-20",
     style: {
-      backgroundColor: secondary
+      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
+      }));
     }
+  }));
+};
+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 ProductDetail10 = function ProductDetail10(props) {
+  var shopConfigStyle = props.shopConfigStyle;
+  var _ProductDetailControl = ProductDetailController(props),
+    product = _ProductDetailControl.product;
+  var _useState = useState(),
+    variant = _useState[0],
+    setVariant = _useState[1];
+  var _useState2 = useState([]),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _CartController = CartController(props),
+    addProductToCart = _CartController.addProductToCart;
+  var refInputQuantity = useRef();
+  useEffect(function () {
+    if (product) {
+      initVariant();
+    }
+  }, [product]);
+  var initVariant = function initVariant() {
+    var _product$variants;
+    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(",");
+    setVariant(variant);
+    var options = (product === null || product === void 0 ? void 0 : product.optionValues) || [];
+    indexOptions.map(function (value, index) {
+      return options[index].valueIndex = value;
+    });
+    setOptions(options);
+  };
+  var selectOption = function selectOption(optionIndex, valueIndex) {
+    console.log("selectOption optionIndex valueIndex", optionIndex, valueIndex);
+    var newOptions = [].concat(options);
+    newOptions[optionIndex].valueIndex = valueIndex;
+    setOptions(newOptions);
+    console.log("newOptions", newOptions);
+    var variant = getVariantFromOption(newOptions);
+    console.log("getVariantFromOption variant", variant);
+    setVariant(variant);
+  };
+  var getVariantFromOption = function getVariantFromOption(_options) {
+    console.log("getVariantFromOption options", _options);
+    var listOptionIndexSelected = _options.map(function (e) {
+      return e.valueIndex;
+    }).filter(function (e) {
+      return e !== undefined;
+    });
+    var variantIndex = listOptionIndexSelected.join(",");
+    return ((product === null || product === void 0 ? void 0 : product.variants) || []).find(function (e) {
+      return e.index === variantIndex;
+    });
+  };
+  var validateData = function validateData() {
+    var _refInputQuantity$cur;
+    return (refInputQuantity === null || refInputQuantity === void 0 ? void 0 : (_refInputQuantity$cur = refInputQuantity.current) === null || _refInputQuantity$cur === void 0 ? void 0 : _refInputQuantity$cur.validateData()) && variant;
+  };
+  var addToCart = function addToCart() {
+    try {
+      var _temp = function () {
+        if (validateData()) {
+          var _refInputQuantity$cur2;
+          var quantity = refInputQuantity === null || refInputQuantity === void 0 ? void 0 : (_refInputQuantity$cur2 = refInputQuantity.current) === null || _refInputQuantity$cur2 === void 0 ? void 0 : _refInputQuantity$cur2.getValue();
+          return Promise.resolve(addProductToCart(product, variant, quantity)).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var buyNow = function buyNow() {};
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " mb-0"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    label: "Họ tên",
-    placeholder: "Nhập họ tên",
-    rules: [{
-      type: "required",
-      message: "Bắt buộc nhập họ tên"
-    }],
-    className: "w-full rounded-lg"
+    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-3 gap-6 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full aspect-square rounded-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-2"
+  }, /*#__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"
+  }), options.map(function (option, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2 mt-6",
+      key: index
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "min-w-24"
+    }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex gap-2"
+    }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
+      return /*#__PURE__*/React__default.createElement("button", {
+        key: i,
+        onClick: function onClick() {
+          return selectOption(index, i);
+        },
+        className: "rounded py-1 px-2 " + (i == option.valueIndex ? "bg-primary text-textButton" : "border bg-gray6")
+      }, v);
+    })));
   }), /*#__PURE__*/React__default.createElement(Input, {
-    label: "Họ tên",
-    placeholder: "Nhập họ tên",
+    label: "Số lượng",
+    wrapClassName: "flex items-center gap-6 mt-6",
     rules: [{
       type: "required",
-      message: "Bắt buộc nhập họ tên"
-    }],
-    className: "w-full rounded-lg"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    label: "Dịch vụ",
-    options: [{
-      label: "123",
-      value: "456"
+      message: "Bắt buộc nhập số lượng"
     }, {
-      label: "1235",
-      value: "4567"
+      type: "pattern",
+      pattern: numberPattern,
+      message: "Số lượng không đúng"
     }],
-    className: "w-full rounded-lg",
-    placeholder: "Chọn dịch vụ"
-  }), /*#__PURE__*/React__default.createElement(DateTimePicker, {
-    label: "Thời gian",
-    className: "w-full rounded-lg",
-    placeholder: "Chọn thời gian"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center"
+    defaultValue: 1,
+    isQuantity: true,
+    min: 1,
+    ref: refInputQuantity
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 mt-6"
   }, /*#__PURE__*/React__default.createElement(Button, {
-    label: "Đặt lịch ngay",
-    shopConfigStyle: shopConfigStyle
-  })));
+    label: "THÊM VÀO GIỎ",
+    shopConfigStyle: shopConfigStyle,
+    type: "outline",
+    onClick: function onClick() {
+      return addToCart();
+    }
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "MUA NGAY",
+    shopConfigStyle: shopConfigStyle,
+    onClick: function onClick() {
+      return buyNow();
+    }
+  })), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-lg mt-12 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",
+    dangerouslySetInnerHTML: {
+      __html: product === null || product === void 0 ? void 0 : product.description
+    }
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 mt-2"
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
 };
 var Booking1 = function Booking1(props) {
@@ -8458,6 +9513,142 @@ var Footer1 = function Footer1(props) {
   }, "Xem \u0111i\u1EC1u kho\u1EA3n v\xE0 ch\xEDnh s\xE1ch"))));
 };
+var Footer7 = function Footer7(props) {
+  var _routes$filter;
+  var shopConfig = props.shopConfig,
+    shopConfigStyle = props.shopConfigStyle,
+    _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;
+  console.log("Footer7 shopConfig", shopConfig);
+  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: "footer px-4 pt-10 xl:px-20",
+    style: {
+      background: bgSecondary,
+      color: textBody
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "object-cover w-14",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
+    alt: ""
+  }), /*#__PURE__*/React__default.createElement("h3", {
+    className: " text-2xl md:text-3xl font-semibold ms-2",
+    style: {
+      color: primary
+    }
+  }, 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 gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: " col-span-2 flex flex-col leading-8 mb-10 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"), 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"
+    }, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
+      size: 24,
+      className: "inline-block mt-1",
+      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-1"
+    }, /*#__PURE__*/React__default.createElement(IoCallOutline, {
+      size: 24,
+      className: "inline-block mt-1",
+      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-4 font-semibold text-lg"
+  }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
+    className: "leading-10 flex flex-col "
+  }, 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("a", {
+      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 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: {
+      background: primary
+    }
+  })), /*#__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: {
+      background: primary
+    }
+  })), /*#__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: {
+      background: primary
+    }
+  }))))), /*#__PURE__*/React__default.createElement("hr", null), /*#__PURE__*/React__default.createElement("div", {
+    className: "py-4"
+  }, /*#__PURE__*/React__default.createElement("small", {
+    className: "me-5"
+  }, "B\u1EA3n quy\u1EC1n thu\u1ED9c c\xF4ng ty c\u1ED5 ph\u1EA7n c\xF4ng ngh\u1EC7 th\xF4ng minh SFIN."), /*#__PURE__*/React__default.createElement("a", {
+    href: "#"
+  }, /*#__PURE__*/React__default.createElement("small", {
+    className: "underline decoration-solid",
+    style: {
+      color: primary
+    }
+  }, "Xem \u0111i\u1EC1u kho\u1EA3n v\xE0 ch\xEDnh s\xE1ch"))));
+};
 var RatingStar = function RatingStar(props) {
   var _props$star = props.star,
     star = _props$star === void 0 ? 5 : _props$star,
@@ -8498,14 +9689,9 @@ var CustomerRating10 = function CustomerRating10(props) {
     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,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
+    className: SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -8542,18 +9728,12 @@ var Employees1 = function Employees1(props) {
     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,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   console.log("Employee data", data);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
+    className: SECTION_DEFAULT_CLASS + " relative"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
+    data: data
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 lg:gap-12"
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
@@ -8585,15 +9765,10 @@ var Gallery1 = function Gallery1(props) {
     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,
-    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
-    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   console.log("Gallery1 data", data);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "relative w-full py-12 px-4 xl:px-20",
-    style: {
-      backgroundColor: background
-    }
+    className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -8610,5 +9785,216 @@ var Gallery1 = function Gallery1(props) {
   }));
 };
-export { Address1, Banner1, Booking1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Links1, NavBar7, Partner1, Products1, Products10, Products2, ProductsTop1, SectionTitle1, Treatments1, Treatments1$1 as Treatments2 };
+var PageTitle1 = function PageTitle1(props) {
+  var _sectionData$;
+  var data = props.data,
+    route = props.route;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full bg-cover bg-center bg-no-repeat ",
+    style: {
+      backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full p-20 z-10 flex flex-col gap-6 items-center justify-center"
+  }, /*#__PURE__*/React__default.createElement("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)));
+};
+var About5 = function About5(props) {
+  var _sectionData$, _sectionData$2;
+  var shopConfig = props.shopConfig,
+    data = props.data;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  console.log("About5 sectionData", sectionData);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " grid grid-cols-1 lg:grid-cols-2 gap-12"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
+    className: "w-full hidden lg:block rounded-xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ck-content",
+    dangerouslySetInnerHTML: {
+      __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
+    }
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.srcImage,
+    className: "w-full block lg:hidden rounded-xl"
+  }));
+};
+var Contact1 = function Contact1(props) {
+  var _sectionData$;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 lg:grid-cols-2 gap-12 mt-6"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "Trong qu\xE1 tr\xECnh gh\xE9 th\u0103m website, n\u1EBFu qu\xFD kh\xE1ch c\xF3 b\u1EA5t k\u1EF3 th\u1EAFc m\u1EAFc hay c\u1EA7n s\u1EF1 h\u1ED7 tr\u1EE3 n\xE0o, h\xE3y li\xEAn h\u1EC7 v\u1EDBi ch\xFAng t\xF4i theo c\xE1c k\xEAnh sau: "), shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
+    size: 40,
+    className: "p-2 text-textButton bg-primary"
+  }), /*#__PURE__*/React__default.createElement("div", null, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopZalo ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
+  }, /*#__PURE__*/React__default.createElement(SiZalo, {
+    size: 40,
+    className: "p-2 text-textButton bg-primary"
+  }), /*#__PURE__*/React__default.createElement("div", null, "Zalo: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
+    size: 40,
+    className: "p-2 text-textButton bg-primary"
+  }), /*#__PURE__*/React__default.createElement("div", null, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
+  }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
+    size: 40,
+    className: "p-2 text-textButton bg-primary"
+  }), /*#__PURE__*/React__default.createElement("div", null, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger)) : null), /*#__PURE__*/React__default.createElement("img", {
+    src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
+    className: "w-full rounded-xl border-white border-8 shadow-lg"
+  })));
+};
+var Breadcrumb1 = function Breadcrumb1(props) {
+  var shopConfigStyle = props.shopConfigStyle,
+    route = props.route,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
+    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  var _useState = useState([]),
+    items = _useState[0],
+    setItems = _useState[1];
+  useEffect(function () {
+    getItems();
+  }, [route]);
+  var getItems = function getItems() {
+    var _route$route, _route$route$split, _route$route$split$fi;
+    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) {
+      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({
+      name: "home",
+      label: "Trang chủ",
+      route: "/"
+    });
+    setItems(items);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2"
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      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", {
+      href: item === null || item === void 0 ? void 0 : item.route,
+      style: {
+        color: textHeading
+      }
+    }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
+  }));
+};
+var Carts1 = function Carts1(props) {
+  var _props$cartItems = props.cartItems,
+    cartItems = _props$cartItems === void 0 ? [] : _props$cartItems;
+  var _useState = useState(false),
+    checkAll = _useState[0],
+    setCheckAll = _useState[1];
+  var handleCheckAll = function handleCheckAll(event) {
+    var _event$target = event.target,
+      checked = _event$target.checked;
+    setCheckAll(checked);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " mt-0 rounded-2xl bg-bgSecondary p-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4 pb-4"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    checked: checkAll,
+    onChange: handleCheckAll
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-1"
+  }, "S\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-right"
+  }, "\u0110\u01A1n gi\xE1"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-center"
+  }, "S\u1ED1 l\u01B0\u1EE3ng"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-right"
+  }, "Th\xE0nh ti\u1EC1n"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-center"
+  }, "H\xE0nh \u0111\u1ED9ng")), cartItems.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(CartItem, {
+      item: item,
+      key: index
+    });
+  }));
+};
+var CartItem = function CartItem(props) {
+  var item = props.item;
+  var _useState2 = useState(item.quantity),
+    quantity = _useState2[0],
+    setQuantity = _useState2[1];
+  var refInputQuantity = useRef();
+  var handleCheckItem = function handleCheckItem(event) {};
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-4 border-t py-4"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    checked: false,
+    onChange: handleCheckItem
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-1"
+  }, "S\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-right"
+  }, formatCurrency(item.price)), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-right"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    rules: [{
+      type: "required",
+      message: "Bắt buộc nhập số lượng"
+    }, {
+      type: "pattern",
+      pattern: numberPattern,
+      message: "Số lượng không đúng"
+    }],
+    defaultValue: quantity,
+    isQuantity: true,
+    min: 1,
+    onChange: function onChange(text) {
+      return setQuantity(parseInt(text));
+    },
+    ref: refInputQuantity,
+    wrapClassName: "w-fit mx-auto"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-right"
+  }, formatCurrency(item.price * quantity)), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-32 text-center"
+  }, "H\xE0nh \u0111\u1ED9ng"));
+};
+export { About5, Address1, Banner1, Booking1, Breadcrumb1, Carts1, Contact1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Links1, NavBar7, PageTitle1, Partner1, ProductDetail10, ProductHot3, ProductSale2, Products1, Products10, Products2, Products3, ProductsTop1, SectionTitle1, ServiceDetail1, Treatments1, Treatments1$1 as Treatments2 };
 //# sourceMappingURL=index.modern.js.map