s-platform-landing-section 0.1.36-beta.1 → 0.1.36-beta.3

package/dist/index.modern.js

@@ -7638,20 +7638,17 @@ var CategoryController = function CategoryController(props) {
 
 var Hero13 = function Hero13(props) {
   var _sectionData$, _sectionData$$srcImag, _data$data, _data$data$;
-  var listRef = useRef(null);
-  var _useState = useState(false);
   var shopConfig = props.shopConfig,
     data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var _CategoryController = CategoryController(props);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
     src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$srcImag = _sectionData$.srcImages) === null || _sectionData$$srcImag === void 0 ? void 0 : _sectionData$$srcImag[0],
     alt: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.title,
     className: "w-full object-cover"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "fixed right-6 bottom-10 md:bottom-24 z-50 flex flex-col gap-4 w-max"
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? "tel:" + (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone) : "#"
+  }, (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone) && /*#__PURE__*/React__default.createElement("a", {
+    href: "tel:" + (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-max"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -7660,9 +7657,9 @@ var Hero13 = function Hero13(props) {
     className: "relative z-10 p-2 rounded-full bg-primary text-textButton animate-bounce"
   }, /*#__PURE__*/React__default.createElement(AiOutlinePhone, {
     size: 36
-  })))), /*#__PURE__*/React__default.createElement("a", {
+  })))), (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) && /*#__PURE__*/React__default.createElement("a", {
     href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) || "#",
-    target: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? "_blank" : "_self"
+    target: "_blank"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-max"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -7671,9 +7668,9 @@ var Hero13 = function Hero13(props) {
     className: "relative z-10 p-2 rounded-full bg-primary text-textButton animate-bounce"
   }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
     size: 32
-  })))), /*#__PURE__*/React__default.createElement("a", {
-    href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage) || "#",
-    target: shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? "_blank" : "_self"
+  })))), (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) && /*#__PURE__*/React__default.createElement("a", {
+    href: "https://zalo.me/" + (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) || "#",
+    target: "_blank"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-max"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -7933,11 +7930,6 @@ var ProductController = function ProductController(props) {
             var _res$data2, _res$data3;
             setProducts(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
             setPage(res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.page);
-            var url = new URL(window.location.href);
-            if (/^(\/(danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
-              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
-              window.history.replaceState({}, '', url.pathname + url.search);
-            }
           }
           setLoading(false);
         });
@@ -10057,13 +10049,13 @@ var ServiceDetail1 = function ServiceDetail1(props) {
     product: product,
     className: "w-full aspect-square !object-contain rounded-2xl"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " \n                                                h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full rounded-md lg:rounded-lg aspect-square object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -10184,7 +10176,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-4 col-span-2"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "rounded-2xl p-2 bg-background border"
+    className: "rounded-2xl bg-background border"
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
     className: "w-full aspect-square object-contain rounded-2xl"
@@ -10192,13 +10184,13 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
     product: product,
     className: "w-full aspect-square !object-contain rounded-2xl"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " \n                                                h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full rounded-md lg:rounded-lg aspect-square object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -10320,7 +10312,7 @@ var ProductItem3 = function ProductItem3(props) {
     className: "w-full border border-stroke rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-48 md:h-60 xl:h-[304px] rounded-t-2xl"
+    className: "w-full rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 flex flex-col gap-2 md:gap-4 items-start"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10347,7 +10339,7 @@ var ProductItem4 = function ProductItem4(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-40 sm:h-56 lg:h-60 xl:h-64 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-start line-clamp-1  w-full overflow-hidden text-ellipsis text-lg"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10382,7 +10374,7 @@ var ProductItem5 = function ProductItem5(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-1 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-start line-clamp-1  w-full overflow-hidden text-ellipsis mb-2"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10415,7 +10407,7 @@ var ProductItem6 = function ProductItem6(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full h-48 md:h-60 xl:h-72 rounded-2xl"
+    className: "w-full !aspect-[3/4] rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text start line-clamp-1  w-full overflow-hidden text-ellipsis"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10450,7 +10442,7 @@ var ProductItem7 = function ProductItem7(props) {
     className: "px-2 md:px-4 xl:px-6"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full hover:scale-105 transition duration-300 ease-in-out rounded-2xl"
+    className: "w-full hover:scale-105 transition duration-300 ease-in-out rounded-2xl !object-contain"
   })), (product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.price) !== (product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.priceBeforeDiscount) && product !== null && product !== void 0 && (_product$productInfo3 = product.productInfo) !== null && _product$productInfo3 !== void 0 && _product$productInfo3.priceBeforeDiscount ? /*#__PURE__*/React__default.createElement("div", {
     className: "absolute top-4 left-0 py-1 px-4 rounded-r-2xl bg-danger text-textButton font-semibold shadow-lg"
   }, "-", Math.round(100 - (product === null || product === void 0 ? void 0 : (_product$productInfo4 = product.productInfo) === null || _product$productInfo4 === void 0 ? void 0 : _product$productInfo4.price) / (product === null || product === void 0 ? void 0 : (_product$productInfo5 = product.productInfo) === null || _product$productInfo5 === void 0 ? void 0 : _product$productInfo5.priceBeforeDiscount) * 100)) : null), /*#__PURE__*/React__default.createElement("div", {
@@ -10483,7 +10475,7 @@ var ProductItem8 = function ProductItem8(props) {
     className: "relative "
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "h-[340px] md:h-[400px] xl:h-[460px] rounded"
+    className: "!aspect-[5/8] rounded"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "absolute bottom-0 rounded-b pb-6 px-4 bg-gradient-to-t from-black/50 to-transparent flex flex-col items-center h-1/2 gap-2 w-full justify-end "
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10516,7 +10508,7 @@ var ProductItem9 = function ProductItem9(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-2 md:p-6 bg-bgSecondary " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "hover:scale-105 transition duration-300 ease-in-out w-full h-44 md:h-56 xl:h-60"
+    className: "hover:scale-105 transition duration-300 ease-in-out !object-contain !aspect-[9/8]"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-start line-clamp-2 font-medium  min-h-12 w-full overflow-hidden text-ellipsis mb-2"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10648,7 +10640,7 @@ var ProductItem11 = function ProductItem11(props) {
     className: "overflow-hidden"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "hover:scale-105 transition duration-300 ease-in-out w-full h-56 sm:h-64 lg:h-72 xl:h-[302px]"
+    className: "hover:scale-105 transition duration-300 ease-in-out"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 flex flex-col gap-4"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
@@ -10669,7 +10661,7 @@ var ProductItem11 = function ProductItem11(props) {
 };
 
 var TreatmentItem1 = function TreatmentItem1(props) {
-  var _product$productInfo;
+  var _product$productInfo, _product$productInfo2;
   var product = props.product,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
@@ -10682,7 +10674,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-1"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product === null || product === void 0 ? void 0 : product.productInfo,
-    className: "w-full w-full h-[189px] md:h-[238px] xl:h-[304px] rounded-2xl"
+    className: " rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "line-clamp-1 mb-2 font-medium text-lg"
   }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10692,7 +10684,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
     className: "flex flex-col md:flex-row gap-2 md:items-center md:gap-6 "
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "whitespace-nowrap"
-  }, "Th\u1EDDi gian: 120p"), /*#__PURE__*/React__default.createElement(Button, {
+  }, "Th\u1EDDi gian: ", getDurationValue(product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.attributes)), /*#__PURE__*/React__default.createElement(Button, {
     shopConfigStyle: shopConfigStyle,
     label: "\u0110\u1EB7t l\u1ECBch",
     className: "w-full"
@@ -11377,7 +11369,7 @@ var Products11 = function Products11(props) {
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     _props$categoryId = props.categoryId,
-    categoryId = _props$categoryId === void 0 ? 0 : _props$categoryId,
+    categoryId = _props$categoryId === void 0 ? "" : _props$categoryId,
     _props$ProductItem = props.ProductItem,
     ProductItem = _props$ProductItem === void 0 ? null : _props$ProductItem;
   var _useState = useState({
@@ -11420,13 +11412,18 @@ var Products11 = function Products11(props) {
     });
   };
   var handleChooseCategory = function handleChooseCategory(category) {
+    if (categoryId) {
+      var newUrl = getLinkProductsByCategory(category);
+      window.history.replaceState(null, '', newUrl);
+    }
     setCategorySelected(category);
     setFilterItem(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]);
     setParams(function (prev) {
-      return _extends({}, prev, {
+      return {
+        page: 0,
         categoryId: category === null || category === void 0 ? void 0 : category.categoryId,
         size: 12
-      });
+      };
     });
     window.scrollTo({
       top: 0,
@@ -11499,7 +11496,7 @@ var Products11 = function Products11(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "md:sticky top-16 self-start"
   }, (categories === null || categories === void 0 ? void 0 : categories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: " flex flex-col gap-2 rounded-2xl bg-bgSecondary p-4 max-h-96 overflow-y-auto"
+    className: " flex flex-col gap-2 rounded-2xl bg-bgSecondary p-4 max-h-96 scroll-container overflow-y-auto"
   }, categories === null || categories === void 0 ? void 0 : categories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "px-6 py-2 hover:bg-gray-100 hover:text-primary cursor-pointer rounded-lg " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (item === null || item === void 0 ? void 0 : item.categoryId) ? " bg-primary text-textButton" : ""),
@@ -12278,12 +12275,12 @@ var ProductDetail10 = function ProductDetail10(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " mt-0 md:mt-0 mb-0 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "" : "px-4 md:px-6") + " py-4 md:py-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 md:gap-6 bg-bgSecondary"
+    className: ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "" : "px-4 md:px-6") + " py-4 md:py-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 gap-3 md:gap-6 bg-bgSecondary"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-4 col-span-2 "
+    className: "flex flex-col gap-4 md:col-span-2 "
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
-    className: "w-full border rounded-2xl p-2 bg-background aspect-square object-contain rounded-2xl "
+    className: "w-full border bg-background aspect-square object-contain rounded-2xl "
   }) : /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-center items-center w-full border rounded-2xl aspect-square",
     style: {
@@ -12294,19 +12291,19 @@ var ProductDetail10 = function ProductDetail10(props) {
     height: "25%",
     fill: "#D9D9D9"
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+    className: "flex gap-2 pb-3 md:pb-0 overflow-x-auto md:w-full lg:gap-3 md:grid md:grid-cols-4 xl:grid-cols-5"
   }, product === null || product === void 0 ? void 0 : (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer h-16 w-16 rounded-lg bg-background\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 "),
+      className: "cursor-pointer h-20 w-20 md:max-h-32 md:max-w-32 md:h-full md:w-full aspect-square rounded-md lg:rounded-lg bg-background object-contain\n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 "),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
     });
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-3"
+    className: "md:col-span-3 "
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "font-semibold text-2xl"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -12320,7 +12317,7 @@ var ProductDetail10 = function ProductDetail10(props) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "min-w-24"
     }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex gap-2"
+      className: "flex flex-wrap gap-2"
     }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
       return /*#__PURE__*/React__default.createElement("button", {
         key: i,
@@ -12372,7 +12369,7 @@ var ProductDetail10 = function ProductDetail10(props) {
       __html: product === null || product === void 0 ? void 0 : product.description
     }
   }), !isSeeMore && !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
-    className: "h-10 relative -mt-10 rounded-b-lg",
+    className: "h-28 relative -mt-28 rounded-b-lg",
     style: {
       background: "linear-gradient(to top, #81818169  0%, #00000003 50%)"
     }
@@ -12517,7 +12514,7 @@ var ProductDetail11 = function ProductDetail11(props) {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer px-3 py-2 !h-24 !w-24 object-cover rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
+      className: "cursor-pointer px-3 py-2 !h-24 !w-24 object-contain aspect-square rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -12549,7 +12546,7 @@ var ProductDetail11 = function ProductDetail11(props) {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: "cursor-pointer px-2 py-1 !h-24 !w-24 object-cover rounded-lg \n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
+      className: "cursor-pointer px-2 py-1 !h-24 !w-24 object-contain rounded-lg aspect-square\n                                            " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border border-primary" : ""),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
@@ -12569,7 +12566,7 @@ var ProductDetail11 = function ProductDetail11(props) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "min-w-24 my-auto"
     }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex gap-2"
+      className: "flex flex-wrap gap-2"
     }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
       return /*#__PURE__*/React__default.createElement("button", {
         key: i,
@@ -14258,21 +14255,21 @@ var Gallery2 = function Gallery2(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$slice = _data$data.slice(0, 2)) === null || _data$data$slice === void 0 ? void 0 : _data$data$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl"
     });
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2 md:gap-4"
   }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$slice = _data$data2.slice(2, 4)) === null || _data$data2$slice === void 0 ? void 0 : _data$data2$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl odd:h-[130%]"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl odd:h-[130%]"
     });
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2 md:gap-4"
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$slice = _data$data3.slice(4, 6)) === null || _data$data3$slice === void 0 ? void 0 : _data$data3$slice.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.srcImage,
-      className: "w-full h-full object-cover rounded-xl md:rounded-2xl even:h-[130%]"
+      className: "w-full h-full object-cover rounded-lg md:rounded-2xl even:h-[130%]"
     });
   })))));
 };
@@ -15958,11 +15955,6 @@ var NewsController = function NewsController(props) {
             var _response$data2, _response$data2$data, _response$data3, _response$data3$data;
             setNewsArticles(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : (_response$data2$data = _response$data2.data) === null || _response$data2$data === void 0 ? void 0 : _response$data2$data.content);
             setPage(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : (_response$data3$data = _response$data3.data) === null || _response$data3$data === void 0 ? void 0 : _response$data3$data.totalElements);
-            var url = new URL(window.location.href);
-            if (/^(\/(tin-tuc-theo-danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
-              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
-              window.history.replaceState({}, '', url.pathname + url.search);
-            }
           }
           setLoading(false);
         });
@@ -16196,7 +16188,8 @@ var News1 = function News1(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
-    catId = props.catId;
+    _props$catId = props.catId,
+    catId = _props$catId === void 0 ? "" : _props$catId;
   var _useState = useState({
       page: 0,
       sort: "timeUpdate,DESC",
@@ -16236,6 +16229,18 @@ var News1 = function News1(props) {
       setCategorySelected(category);
     }
   }, [newsCategories]);
+  var handleSelectedCateogry = function handleSelectedCateogry(item) {
+    if (catId) {
+      var newUrl = getLinkNewsByCategory(item);
+      window.history.replaceState(null, '', newUrl);
+    }
+    setCategorySelected(item);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        catId: item === null || item === void 0 ? void 0 : item.catId
+      });
+    });
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -16256,12 +16261,7 @@ var News1 = function News1(props) {
       className: "px-6 hover:bg-gray-100 hover:text-primary cursor-pointer " + ((item === null || item === void 0 ? void 0 : item.catId) === (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catId) ? "bg-gray-100 text-primary" : "") + " ",
       key: "sdjfdh-" + index,
       onClick: function onClick() {
-        setCategorySelected(item);
-        setParams(function (prev) {
-          return _extends({}, prev, {
-            catId: item === null || item === void 0 ? void 0 : item.catId
-          });
-        });
+        handleSelectedCateogry(item);
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "border-b border-dashed py-4 " + ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) - 1 === index ? "border-b-0" : "")
@@ -16315,12 +16315,7 @@ var News1 = function News1(props) {
       className: "px-4 hover:bg-gray-100 hover:text-primary cursor-pointer " + ((item === null || item === void 0 ? void 0 : item.catId) === (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.catId) ? "bg-gray-100 text-primary" : "") + " ",
       key: "sdjfdh-" + index,
       onClick: function onClick() {
-        setCategorySelected(item);
-        setParams(function (prev) {
-          return _extends({}, prev, {
-            catId: item === null || item === void 0 ? void 0 : item.catId
-          });
-        });
+        handleSelectedCateogry(item);
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "border-b border-dashed py-4 " + ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) - 1 === index ? "border-b-0" : "")
@@ -16416,7 +16411,7 @@ var NewsDetail1 = function NewsDetail1(props) {
   }), (newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "top-6 block md:hidden"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "px-6 bg-primary rounded-t-lg text-lg text-textButton text-center"
+    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
     className: "rounded-b-lg bg-bgSecondary"
   }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {