s-platform-landing-section 0.1.12 → 0.1.15

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useRef, useEffect, forwardRef, useImperativeHandle, createElement, memo } from 'react';
 import { IoCartOutline, IoChevronDownOutline, IoInformationCircleOutline, IoLogOutOutline, IoBagOutline, IoSearchOutline, IoChevronBackOutline, IoChevronForwardOutline, IoLocationOutline, IoCallOutline } from 'react-icons/io5';
-import { FaUserCircle, FaFacebookF, FaFacebookMessenger, FaAngleUp, FaAngleDown, FaCheckCircle, FaBoxOpen, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FaUserCircle, FaFacebookF, FaFacebookMessenger, FaBoxOpen, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { FiMenu, FiShoppingCart, FiSearch } from 'react-icons/fi';
 import { RxCross2 } from 'react-icons/rx';
 import { SiZalo, SiVisa } from 'react-icons/si';
@@ -12,6 +12,9 @@ import { BsCurrencyDollar } from 'react-icons/bs';
 import { LuSearch } from 'react-icons/lu';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 import { AiOutlineShoppingCart } from 'react-icons/ai';
 import { GoCreditCard } from 'react-icons/go';
 import { RiDeleteBin7Line } from 'react-icons/ri';
@@ -646,9 +649,9 @@ var SvgIcon = function SvgIcon(_ref) {
 var SectionTitle1 = function SectionTitle1(props) {
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     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", {
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-32 h-0.5 rounded-full bg-secondary"
@@ -656,7 +659,7 @@ var SectionTitle1 = function SectionTitle1(props) {
     className: "w-9 h-9 text-secondary"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: " w-32 h-0.5 rounded-full bg-secondary"
-  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
@@ -985,54 +988,7 @@ var Hero10 = function Hero10(props) {
   })));
 };
 
-var Dash = function Dash(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? "#ccc" : _props$color,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
-    style: {
-      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
-      height: "1px"
-    }
-  });
-};
-
-var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
-var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
-
 var Hero11 = function Hero11(props) {
-  var _data$data;
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "" + SECTION_DEFAULT_CLASS
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-2"
-  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
-    var _it$srcImages;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: it === null || it === void 0 ? void 0 : (_it$srcImages = it.srcImages) === null || _it$srcImages === void 0 ? void 0 : _it$srcImages[0]
-    }));
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
-
-var Hero11$1 = function Hero11(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
@@ -7331,55 +7287,8 @@ var Hero13 = function Hero13(props) {
   }));
 };
 
-var Features1 = function Features1(props) {
-  var _data$data;
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " relative"
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    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) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index,
-      className: "pt-6 col-span-3 md:col-span-1"
-    }, /*#__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 bg-primary"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
-    }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
-      }
-    })) : /*#__PURE__*/React__default.createElement("div", {
-      className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
-      style: {
-        backgroundImage: "url(" + it.srcImage + ")"
-      }
-    })), /*#__PURE__*/React__default.createElement("p", {
-      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 bg-secondary"
-    }), /*#__PURE__*/React__default.createElement("p", {
-      className: "text-base mx-auto md:mx-0 text-center md:text-start"
-    }, it.description));
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
+var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
+var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
 
 var Features2 = function Features2(props) {
   var data = props.data;
@@ -7539,7 +7448,7 @@ var ProductController = function ProductController(props) {
   };
 };
 
-var _path, _path2, _path3;
+var _path;
 function _extends$1() {
   return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -7549,13 +7458,130 @@ function _extends$1() {
     return n;
   }, _extends$1.apply(null, arguments);
 }
-function SvgImageGallery(props) {
+function SvgAngleSmallLeft(props) {
   return /*#__PURE__*/createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 512,
+    height: 512
+  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+    d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
+  })));
+}
+
+var _path$1;
+function _extends$2() {
+  return _extends$2 = 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$2.apply(null, arguments);
+}
+function SvgAngleSmallRight(props) {
+  return /*#__PURE__*/createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 512,
+    height: 512
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
+    d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
+  })));
+}
+
+var ScrollHorizontal = function ScrollHorizontal(props) {
+  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$renderItem = props.renderItem,
+    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
+  var scrollContainerRef = useRef(null);
+  var _useState = useState(true),
+    isScrolledToLeft = _useState[0],
+    setIsScrolledToLeft = _useState[1];
+  var _useState2 = useState(false),
+    isScrolledToRight = _useState2[0],
+    setIsScrolledToRight = _useState2[1];
+  var checkScrollPosition = function checkScrollPosition() {
+    if (scrollContainerRef.current) {
+      var _scrollContainerRef$c = scrollContainerRef.current,
+        _scrollLeft = _scrollContainerRef$c.scrollLeft,
+        scrollWidth = _scrollContainerRef$c.scrollWidth,
+        clientWidth = _scrollContainerRef$c.clientWidth;
+      setIsScrolledToLeft(_scrollLeft === 0);
+      setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
+    }
+  };
+  var scrollLeft = function scrollLeft() {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({
+        left: -200,
+        behavior: "smooth"
+      });
+      setTimeout(checkScrollPosition, 300);
+    }
+  };
+  var scrollRight = function scrollRight() {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({
+        left: 200,
+        behavior: "smooth"
+      });
+      setTimeout(checkScrollPosition, 300);
+    }
+  };
+  useEffect(function () {
+    checkScrollPosition();
+  }, [datas]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex " + className,
+    style: style
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full overflow-x-hidden",
+    ref: scrollContainerRef,
+    onScroll: checkScrollPosition
+  }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
+    return renderItem(item, index);
+  })), /*#__PURE__*/React__default.createElement("div", {
+    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 " + (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 " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
+  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
+    width: 24,
+    height: 24,
+    fill: "#fff"
+  }))));
+};
+
+var _path$2, _path2, _path3;
+function _extends$3() {
+  return _extends$3 = 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$3.apply(null, arguments);
+}
+function SvgImageGallery(props) {
+  return /*#__PURE__*/createElement("svg", _extends$3({
     height: 512,
     viewBox: "0 0 24 24",
     width: 512,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
     d: "M17.453 24c-.168 0-.34-.021-.51-.066L1.48 19.793a2.018 2.018 0 01-1.414-2.45l1.951-7.272a.5.5 0 01.966.258l-1.95 7.27c-.139.53.179 1.082.71 1.229L17.2 22.967a.995.995 0 001.217-.704l.781-2.894a.499.499 0 11.966.26l-.78 2.89A1.997 1.997 0 0117.453 24z"
   })), _path2 || (_path2 = /*#__PURE__*/createElement("path", {
     d: "M22 18H6c-1.103 0-2-.897-2-2V4c0-1.103.897-2 2-2h16c1.103 0 2 .897 2 2v12c0 1.103-.897 2-2 2zM6 3c-.551 0-1 .449-1 1v12c0 .551.449 1 1 1h16c.551 0 1-.449 1-1V4c0-.551-.449-1-1-1z"
@@ -7608,233 +7634,290 @@ var ProductImage = function ProductImage(props) {
   });
 };
 
-var ModalNotification = function ModalNotification(props) {
-  var modalRef = useRef(null);
-  var onClose = props.onClose,
-    onCloseFormBooking = props.onCloseFormBooking,
-    _props$isButtonClose = props.isButtonClose,
-    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose;
-  var handleClickOutside = function handleClickOutside(event) {
-    if (modalRef.current && !modalRef.current.contains(event.target)) {
-      if (onClose) onClose();
-      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
-        onCloseFormBooking();
-      }
-    }
-  };
-  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, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
-    className: "absolute top-4 right-4",
-    onClick: onClose
-  }, /*#__PURE__*/React__default.createElement(RxCross2, 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 getEmployeeListApi = function getEmployeeListApi(shopId) {
-  return api({
-    method: "get",
-    url: "/chain-employment-profile/filter-employ-by-customer",
-    params: {
-      shopIds: shopId
-    },
-    headers: {
-      shopId: shopId
-    }
-  });
+var pattern = {
+  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
+};
+var numberPattern = /^\d+$/;
+var getYoutubeVideoIdByUrl = function getYoutubeVideoIdByUrl(url) {
+  var regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/;
+  var match = url === null || url === void 0 ? void 0 : url.match(regex);
+  return match ? match[1] : null;
 };
 
-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];
+function getMinMax(array, field) {
+  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
+    return null;
+  }
+  var _array$reduce = array.reduce(function (acc, obj) {
+      var value = obj[field];
+      return {
+        min: value < acc.min ? value : acc.min,
+        max: value > acc.max ? value : acc.max
+      };
+    }, {
+      min: array[0][field],
+      max: array[0][field]
+    }),
+    min = _array$reduce.min,
+    max = _array$reduce.max;
+  return {
+    min: min,
+    max: max
+  };
+}
+var 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 (isAutoGetList) {
-      getListEmployee();
+    if (variant) {
+      genProductPrice([variant]);
+    } else if (product) {
+      genProductPrice(product.variants);
     }
-  }, [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);
+  }, [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);
+    } else {
+      var _displayPrice2 = formatCurrency(product === null || product === void 0 ? void 0 : product.price);
+      setDisplayPrice(_displayPrice2);
     }
   };
-  return {
-    listEmployment: listEmployment,
-    getListEmployee: getListEmployee
-  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through mr-2"
+  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-primary font-semibold",
+    style: style
+  }, displayPrice));
 };
 
-var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
-  return api({
-    method: "post",
-    url: "/spa-schedule/customer/create",
-    data: data,
-    headers: {
-      shopId: shopId
-    }
-  });
+var ProductItem1 = function ProductItem1(props) {
+  var product = props.product;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "!w-20 rounded-lg"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 border-b border-stroke flex-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex mt-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-1 text-gray3"
+  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product
+  }))));
 };
-var draftOrderWithoutLoginApi = function draftOrderWithoutLoginApi(shopId, data) {
-  return api({
-    method: "post",
-    url: "/spa/orders/draft-online-without-login",
-    params: {
-      shopId: shopId
-    },
-    data: data,
-    headers: {
-      shopId: shopId
+
+var Dash = function Dash(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? "#ccc" : _props$color,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
+    style: {
+      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
+      height: "1px"
     }
   });
 };
 
-var _excluded$1 = ["productName"];
-var BookingController = function BookingController(props) {
-  _objectDestructuringEmpty(props);
-  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
-    try {
-      return Promise.resolve(_catch(function () {
-        var _Date;
-        var data = {
-          appId: "SSPA",
-          customerName: customerName,
-          customerPhone: customerPhone === null || customerPhone === void 0 ? void 0 : customerPhone.replace("+", ""),
-          isSellService: true,
-          scheduleDate: (_Date = new Date(scheduleDate)) === null || _Date === void 0 ? void 0 : _Date.getTime(),
-          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
-            var productName = _ref.productName,
-              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-            return rest;
-          }),
-          shopId: shopId
-        };
-        return Promise.resolve(createSpaScheduleApi(shopId, data));
-      }, function (e) {
-        console.log(e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
+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
     }
-  };
-  return {
-    createSchedule: createSchedule
-  };
+  });
 };
 
-var Select = forwardRef(function (props, ref) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$optionClassNam = props.optionClassName,
-    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    _props$selectClassNam = props.selectClassName,
-    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    options = props.options,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
-    handleSearchOption = props.handleSearchOption,
-    _props$isMulti = props.isMulti,
-    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-    _props$isButtonDelete = props.isButtonDelete,
-    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
-    _props$funcDelete = props.funcDelete,
-    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
-    _props$isSearch = props.isSearch,
-    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
-    renderItem = props.renderItem;
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var selectRef = useRef(null);
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  var _useState3 = useState(""),
-    inputSearch = _useState3[0],
-    setInputSearch = _useState3[1];
-  var _useState4 = useState(defaultValue),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = useState(options),
-    listOptions = _useState5[0],
-    setListOptions = _useState5[1];
-  var dropdownRef = useRef(null);
-  var _useState6 = useState('bottom'),
-    dropdownPosition = _useState6[0],
-    setDropdownPosition = _useState6[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    if (isMulti) setValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(function () {
-    setListOptions(options);
-    if (!isMulti) setValue(defaultValue);
-  }, [options]);
-  useEffect(function () {
-    var _inputRef$current;
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    var updateDropdownPosition = function updateDropdownPosition() {
-      if (selectRef.current && dropdownRef.current) {
-        var _selectRef$current, _window;
-        var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
-        var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
-        var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
-        if (spaceBelow < spaceAbove) {
-          setDropdownPosition('top');
-        } else {
-          setDropdownPosition('bottom');
+var TreatmentsCategory7 = function TreatmentsCategory7(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$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,
+    loading = _ProductController.loading;
+  var _useState2 = useState(0),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  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
+  }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
+    datas: [{
+      categoryId: 0,
+      cateName: "Tất cả"
+    }].concat(categories),
+    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 " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
+        onClick: function onClick() {
+          return setSelectedCategory(item.categoryId);
         }
-      }
-    };
-    if (isOpen) {
-      updateDropdownPosition();
-      window.addEventListener('resize', updateDropdownPosition);
+      }, item === null || item === void 0 ? void 0 : item.cateName);
     }
-    return function () {
-      window.removeEventListener('resize', updateDropdownPosition);
-    };
-  }, [isOpen]);
+  }), 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("div", {
+    className: "text-gray3 text-center p-12"
+  }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+var NotFoundProduct = function NotFoundProduct() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
+  }, /*#__PURE__*/React__default.createElement(FaBoxOpen, {
+    size: 80
+  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+};
+
+var TreatmentsList6 = function TreatmentsList6(props) {
+  var _products$slice;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$TreatmentItem = props.TreatmentItem,
+    TreatmentItem = _props$TreatmentItem === void 0 ? null : _props$TreatmentItem,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  var _useState = useState({
+      size: 12,
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = useState(true),
+    isGetMore = _useState2[0],
+    setIsGetMore = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    products = _ProductController.products,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-8 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, params.size - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(TreatmentItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      key: "htrhr-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    type: "outline"
+  }) : null);
+};
+
+var ModalNotification = function ModalNotification(props) {
+  var modalRef = useRef(null);
+  var onClose = props.onClose,
+    onCloseFormBooking = props.onCloseFormBooking,
+    _props$isButtonClose = props.isButtonClose,
+    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose;
   var handleClickOutside = function handleClickOutside(event) {
-    var _selectRef$current2;
-    if (selectRef !== null && selectRef !== void 0 && selectRef.current && !(selectRef !== null && selectRef !== void 0 && (_selectRef$current2 = selectRef.current) !== null && _selectRef$current2 !== void 0 && _selectRef$current2.contains(event.target))) {
-      setIsOpen(false);
-      setInputSearch("");
-      setListOptions(options);
+    if (modalRef.current && !modalRef.current.contains(event.target)) {
+      if (onClose) onClose();
+      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
+        onCloseFormBooking();
+      }
     }
   };
   useEffect(function () {
@@ -7843,42 +7926,257 @@ var Select = forwardRef(function (props, ref) {
       document.removeEventListener('click', handleClickOutside);
     };
   }, []);
-  useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
+  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, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
+    className: "absolute top-4 right-4",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(RxCross2, null))));
+};
+
+var getEmployeeListApi = function getEmployeeListApi(shopId) {
+  return api({
+    method: "get",
+    url: "/chain-employment-profile/filter-employ-by-customer",
+    params: {
+      shopIds: shopId
+    },
+    headers: {
+      shopId: shopId
+    }
   });
-  var isEmpty = function isEmpty(value) {
-    var _Object$keys;
-    if (Array !== null && Array !== void 0 && Array.isArray(value)) return (value === null || value === void 0 ? void 0 : value.length) <= 0;
-    if (typeof value === 'object') return (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0;
-    return false;
-  };
-  var _validateData = function _validateData() {
-    var count = 0;
-    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
-      var _e$pattern;
-      var e = _step.value;
-      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && isEmpty(value)) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      }
+};
+
+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();
     }
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
+  }, [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 draftOrderWithoutLoginApi = function draftOrderWithoutLoginApi(shopId, data) {
+  return api({
+    method: "post",
+    url: "/spa/orders/draft-online-without-login",
+    params: {
+      shopId: shopId
+    },
+    data: data,
+    headers: {
+      shopId: shopId
+    }
+  });
+};
+
+var _excluded$1 = ["productName"];
+var BookingController = function BookingController(props) {
+  _objectDestructuringEmpty(props);
+  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
+    try {
+      return Promise.resolve(_catch(function () {
+        var _Date;
+        var data = {
+          appId: "SSPA",
+          customerName: customerName,
+          customerPhone: customerPhone === null || customerPhone === void 0 ? void 0 : customerPhone.replace("+", ""),
+          isSellService: true,
+          scheduleDate: (_Date = new Date(scheduleDate)) === null || _Date === void 0 ? void 0 : _Date.getTime(),
+          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
+            var productName = _ref.productName,
+              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+            return rest;
+          }),
+          shopId: shopId
+        };
+        return Promise.resolve(createSpaScheduleApi(shopId, data));
+      }, function (e) {
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    createSchedule: createSchedule
+  };
+};
+
+var Select = forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    options = props.options,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
+    handleSearchOption = props.handleSearchOption,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isButtonDelete = props.isButtonDelete,
+    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
+    _props$funcDelete = props.funcDelete,
+    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
+    _props$isSearch = props.isSearch,
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = useRef(null);
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = useRef(null);
+  var _useState6 = useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  useEffect(function () {
+    var _inputRef$current;
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    var updateDropdownPosition = function updateDropdownPosition() {
+      if (selectRef.current && dropdownRef.current) {
+        var _selectRef$current, _window;
+        var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
+        var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
+        var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
+        if (spaceBelow < spaceAbove) {
+          setDropdownPosition('top');
+        } else {
+          setDropdownPosition('bottom');
+        }
+      }
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener('resize', updateDropdownPosition);
+    }
+    return function () {
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen]);
+  var handleClickOutside = function handleClickOutside(event) {
+    var _selectRef$current2;
+    if (selectRef !== null && selectRef !== void 0 && selectRef.current && !(selectRef !== null && selectRef !== void 0 && (_selectRef$current2 = selectRef.current) !== null && _selectRef$current2 !== void 0 && _selectRef$current2.contains(event.target))) {
+      setIsOpen(false);
+      setInputSearch("");
+      setListOptions(options);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var isEmpty = function isEmpty(value) {
+    var _Object$keys;
+    if (Array !== null && Array !== void 0 && Array.isArray(value)) return (value === null || value === void 0 ? void 0 : value.length) <= 0;
+    if (typeof value === 'object') return (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0;
+    return false;
+  };
+  var _validateData = function _validateData() {
+    var count = 0;
+    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
+      var _e$pattern;
+      var e = _step.value;
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && isEmpty(value)) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
     }
   };
   var handleSearch = function handleSearch(e) {
@@ -8225,19 +8523,6 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   }, 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: /^(?:\+84|0)\d{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}));
 });
@@ -8721,465 +9006,142 @@ var BookingForm = function BookingForm(props) {
     className: "mb-4 text-center"
   }, "B\u1EA1n \u0111\xE3 c\xF3 t\xE0i kho\u1EA3n, vui l\xF2ng \u0111\u0103ng nh\u1EADp \u0111\u1EC3 xem chi ti\u1EBFt c\xE1c s\u1EA3n ph\u1EA9m, d\u1ECBch v\u1EE5 li\u1EC7u tr\xECnh m\xE0 b\u1EA1n \u0111ang s\u1EDF h\u1EEFu"), /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
-    shopConfigStyle: shopConfigStyle
-  })))));
-};
-
-var Treatments1 = function Treatments1(props) {
-  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 {
-      var _data$productInfo, _data$productInfo2;
-      event.stopPropagation();
-      setDataBooking([_extends({}, data, {
-        quantity: 1,
-        technical: {},
-        oldService: false,
-        label: data === null || data === void 0 ? void 0 : (_data$productInfo = data.productInfo) === null || _data$productInfo === void 0 ? void 0 : _data$productInfo.productName,
-        value: data === null || data === void 0 ? void 0 : (_data$productInfo2 = data.productInfo) === null || _data$productInfo2 === void 0 ? void 0 : _data$productInfo2.productId
-      })]);
-      setIsOpenModal(true);
-    } catch (error) {
-      console.log("::::::::::errrorrrrr::::::", error);
-    }
-  };
-  var handleCloseModal = function handleCloseModal() {
-    setIsOpenModal(false);
-    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);
-      }
-    })), /*#__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-auto hide-scrollbar max-h-[80vh] !bg-bgSecondary",
-    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++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$2.apply(null, arguments);
-}
-function SvgAngleSmallLeft(props) {
-  return /*#__PURE__*/createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: 512,
-    height: 512
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
-    d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
-  })));
-}
-
-var _path$2;
-function _extends$3() {
-  return _extends$3 = 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$3.apply(null, arguments);
-}
-function SvgAngleSmallRight(props) {
-  return /*#__PURE__*/createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: 512,
-    height: 512
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
-    d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
-  })));
-}
-
-var ScrollHorizontal = function ScrollHorizontal(props) {
-  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$renderItem = props.renderItem,
-    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
-  var scrollContainerRef = useRef(null);
-  var _useState = useState(true),
-    isScrolledToLeft = _useState[0],
-    setIsScrolledToLeft = _useState[1];
-  var _useState2 = useState(false),
-    isScrolledToRight = _useState2[0],
-    setIsScrolledToRight = _useState2[1];
-  var checkScrollPosition = function checkScrollPosition() {
-    if (scrollContainerRef.current) {
-      var _scrollContainerRef$c = scrollContainerRef.current,
-        _scrollLeft = _scrollContainerRef$c.scrollLeft,
-        scrollWidth = _scrollContainerRef$c.scrollWidth,
-        clientWidth = _scrollContainerRef$c.clientWidth;
-      setIsScrolledToLeft(_scrollLeft === 0);
-      setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
-    }
-  };
-  var scrollLeft = function scrollLeft() {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: -200,
-        behavior: "smooth"
-      });
-      setTimeout(checkScrollPosition, 300);
-    }
-  };
-  var scrollRight = function scrollRight() {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: 200,
-        behavior: "smooth"
-      });
-      setTimeout(checkScrollPosition, 300);
-    }
-  };
-  useEffect(function () {
-    checkScrollPosition();
-  }, [datas]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex " + className,
-    style: style
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full overflow-x-hidden",
-    ref: scrollContainerRef,
-    onScroll: checkScrollPosition
-  }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
-    return renderItem(item, index);
-  })), /*#__PURE__*/React__default.createElement("div", {
-    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 " + (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 " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
-  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
-    width: 24,
-    height: 24,
-    fill: "#fff"
-  }))));
-};
-
-function getMinMax(array, field) {
-  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
-    return null;
-  }
-  var _array$reduce = array.reduce(function (acc, obj) {
-      var value = obj[field];
-      return {
-        min: value < acc.min ? value : acc.min,
-        max: value > acc.max ? value : acc.max
-      };
-    }, {
-      min: array[0][field],
-      max: array[0][field]
-    }),
-    min = _array$reduce.min,
-    max = _array$reduce.max;
-  return {
-    min: min,
-    max: max
-  };
-}
-var 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);
-    } else {
-      var _displayPrice2 = formatCurrency(product === null || product === void 0 ? void 0 : product.price);
-      setDisplayPrice(_displayPrice2);
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className
-  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray3 line-through mr-2"
-  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
-    className: "text-primary font-semibold",
-    style: style
-  }, displayPrice));
-};
-
-var ProductItem1 = function ProductItem1(props) {
-  var product = props.product;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "!w-20 rounded-lg"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "ml-4 border-b border-stroke flex-1"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-lg"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex mt-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex-1 text-gray3"
-  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product
-  }))));
-};
-
-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,
-    _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$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,
-    loading = _ProductController.loading;
-  var _useState2 = useState(0),
-    selectedCategory = _useState2[0],
-    setSelectedCategory = _useState2[1];
-  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
-  }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
-    datas: [{
-      categoryId: 0,
-      cateName: "Tất cả"
-    }].concat(categories),
-    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 " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
-        onClick: function onClick() {
-          return setSelectedCategory(item.categoryId);
-        }
-      }, item === null || item === void 0 ? void 0 : item.cateName);
-    }
-  }), 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("div", {
-    className: "text-gray3 text-center p-12"
-  }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
-
-var NotFoundProduct = function NotFoundProduct() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
-  }, /*#__PURE__*/React__default.createElement(FaBoxOpen, {
-    size: 80
-  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+    shopConfigStyle: shopConfigStyle
+  })))));
 };
 
-var TreatmentsList6 = function TreatmentsList6(props) {
-  var _products$slice;
-  var data = props.data,
-    _props$Link = props.Link,
-    Link = _props$Link === void 0 ? null : _props$Link,
+var TreatmentsList7 = function TreatmentsList7(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,
-    _props$TreatmentItem = props.TreatmentItem,
-    TreatmentItem = _props$TreatmentItem === void 0 ? null : _props$TreatmentItem,
-    _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+    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: 12,
-      types: "1"
+      size: 10,
+      types: "1,10",
+      isHighlight: true
     }),
-    params = _useState[0],
-    setParams = _useState[1];
-  var _useState2 = useState(true),
-    isGetMore = _useState2[0],
-    setIsGetMore = _useState2[1];
+    params = _useState[0];
+  var _useState2 = useState(false),
+    isOpenModal = _useState2[0],
+    setIsOpenModal = _useState2[1];
+  var _useState3 = useState([]),
+    dataBooking = _useState3[0],
+    setDataBooking = _useState3[1];
+  var _useState4 = useState(0),
+    currentSlide = _useState4[0],
+    setCurrentSlide = _useState4[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: params
     })),
-    products = _ProductController.products,
-    loading = _ProductController.loading;
-  var handleGetMoreProducts = function handleGetMoreProducts() {
-    setIsGetMore(false);
-    setParams(function (prev) {
-      return _extends({}, prev, {
-        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
-      });
-    });
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("treatment1:", products);
+  var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
+    try {
+      var _data$productInfo, _data$productInfo2;
+      event.stopPropagation();
+      setDataBooking([_extends({}, data, {
+        quantity: 1,
+        technical: {},
+        oldService: false,
+        label: data === null || data === void 0 ? void 0 : (_data$productInfo = data.productInfo) === null || _data$productInfo === void 0 ? void 0 : _data$productInfo.productName,
+        value: data === null || data === void 0 ? void 0 : (_data$productInfo2 = data.productInfo) === null || _data$productInfo2 === void 0 ? void 0 : _data$productInfo2.productId
+      })]);
+      setIsOpenModal(true);
+    } catch (error) {
+      console.log("::::::::::errrorrrrr::::::", error);
+    }
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-8 "
+  var handleCloseModal = function handleCloseModal() {
+    setIsOpenModal(false);
+    setDataBooking([]);
+  };
+  var renderItemSlide = function renderItemSlide(product, index) {
+    var _product$productInfo, _product$productInfo2;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
+      key: index
+    }, /*#__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: ''
+    }, /*#__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);
+      }
+    }))));
+  };
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  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
-  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
-    className: "m-auto mt-20 min-h-32"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
-  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, params.size - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
-    return /*#__PURE__*/React__default.createElement(TreatmentItem, {
-      Link: Link,
-      shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      key: "htrhr-" + idx
-    });
-  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
-    label: "Xem thêm",
-    onClick: handleGetMoreProducts,
-    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
-    type: "outline"
-  }) : null);
+  }), /*#__PURE__*/React__default.createElement(Slider, {
+    className: "center",
+    infinite: true,
+    slidesToShow: 1,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    }
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return renderItemSlide(product, index);
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onClose: handleCloseModal
+  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    className: "overflow-y-auto hide-scrollbar max-h-[80vh] !bg-bgSecondary",
+    onCloseFormBooking: handleCloseModal,
+    defaultValue: dataBooking,
+    shopConfig: shopConfig,
+    shopConfigStyle: shopConfigStyle
+  })) : null);
 };
 
 var ProductDetailController = function ProductDetailController(props) {
@@ -9610,7 +9572,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
   }))));
 };
 
-var Products1 = function Products1(props) {
+var ProductsList7 = function ProductsList7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
@@ -10733,6 +10695,72 @@ var Banner1 = function Banner1(props) {
   })));
 };
 
+var Banner2 = function Banner2(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState = useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(Slider, {
+    className: "center",
+    infinite: false,
+    slidesToShow: 2,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    },
+    centerPadding: "20px",
+    responsive: [{
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 1
+      }
+    }]
+  }, (sectionData === null || sectionData === void 0 ? void 0 : sectionData.length) > 0 && (sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: 'px-2'
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "",
+      className: "rounded-2xl",
+      key: index
+    }));
+  }))));
+};
+
 var Banner3 = function Banner3(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -10746,6 +10774,36 @@ var Banner3 = function Banner3(props) {
   }));
 };
 
+var Banner7 = function Banner7(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-2"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
+    var _it$srcImages;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: it === null || it === void 0 ? void 0 : (_it$srcImages = it.srcImages) === null || _it$srcImages === void 0 ? void 0 : _it$srcImages[0]
+    }));
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
 var BannerFull1 = function BannerFull1(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -12747,5 +12805,81 @@ var ShopHighlights6 = function ShopHighlights6(props) {
   }));
 };
 
-export { About1, About5, Address1, Banner1, Banner3, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductSale2, ProductSearch1, Products1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, TextArea, TreatmentDetail1, TreatmentItem1, Treatments1, Treatments1$1 as Treatments2, TreatmentsList6 };
+var ShopHighlights7 = function ShopHighlights7(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " relative"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    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) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "pt-6 col-span-3 md:col-span-1"
+    }, /*#__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 bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
+    }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
+      }
+    })) : /*#__PURE__*/React__default.createElement("div", {
+      className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
+      style: {
+        backgroundImage: "url(" + it.srcImage + ")"
+      }
+    })), /*#__PURE__*/React__default.createElement("p", {
+      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 bg-secondary"
+    }), /*#__PURE__*/React__default.createElement("p", {
+      className: "text-base mx-auto md:mx-0 text-center md:text-start"
+    }, it.description));
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+var VideoFull1 = function VideoFull1(props) {
+  var _data$data, _data$data$;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  console.log("VideoFull1 data", data);
+  var youtubeVideoId = getYoutubeVideoIdByUrl(data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.link);
+  console.log("VideoFull1 youtubeVideoId", youtubeVideoId);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), youtubeVideoId ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full aspect-video"
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    className: "w-full h-full",
+    src: "https://www.youtube.com/embed/" + youtubeVideoId,
+    title: "YouTube video player",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true
+  })) : null);
+};
+
+export { About1, About5, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsList7, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map