update

src/assets/css/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --color-global: #462f91;
   --color-title: #0d0d9c;
@@ -135,6 +136,11 @@ span {
   height: 14.5px;
   background-position: -188px -147.5px;
 }
+.icon_2025.time-gray {
+  width: 16px;
+  height: 16px;
+  background-position: -34px -73px;
+}
 .icon_2025.mouse {
   width: 20px;
   height: 20px;
@@ -180,6 +186,22 @@ span {
   height: 25px;
   background-position: -152px -69px;
 }
+.icon_2025.link-review {
+  width: 18px;
+  height: 18px;
+  background-position: -27px -104px;
+}
+.icon_2025.angle-bottom {
+  width: 15px;
+  height: 12px;
+  background-position: -190px -133px;
+}
+.icon_2025.angle-top {
+  width: 15px;
+  height: 12px;
+  background-position: -190px -133px;
+  transform: rotate(180deg);
+}
 
 .icon-star {
   background: url(../images/icon_star.png) no-repeat;
@@ -435,7 +457,7 @@ span {
   font-family: "Shopee Bold";
   font-size: 18px;
   color: #000;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 .product-item .name-product:hover {
   color: var(--color-title);
@@ -465,6 +487,11 @@ span {
   background-size: 160px 125px;
   filter: brightness(0) invert(1);
 }
+.product-item .summary {
+  font-family: "Shopee medium";
+  margin-bottom: 5px;
+  color: #595959;
+}
 
 .box-best-rated-products .swiper-button-next {
   right: -20px;
@@ -734,4 +761,141 @@ span {
 }
 .box-product-detail .box-summary li {
   list-style: inside;
+}
+.box-product-detail .btn-more-review {
+  font-family: "Shopee Bold";
+}
+.box-product-detail .box-desc .content {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+.box-product-detail .box-desc .content::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100px;
+  background: linear-gradient(transparent, #fff);
+}
+.box-product-detail .box-desc .content.active {
+  height: auto !important;
+}
+.box-product-detail .box-desc .content.active::after {
+  display: none;
+}
+.box-product-detail .box-spec .content {
+  width: 100%;
+  height: 580px;
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+.box-product-detail .box-spec .content::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100px;
+  background: linear-gradient(transparent, #fff);
+}
+.box-product-detail .box-spec .content.active {
+  height: auto !important;
+}
+.box-product-detail .box-spec .content.active::after {
+  display: none;
+}
+.box-product-detail .more-all {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ff7a00;
+}
+.box-product-detail .more-all i {
+  margin-bottom: 4px;
+  margin-left: 5px;
+}
+
+.nd p,
+.nd span {
+  line-height: 23px;
+  margin-bottom: 10px;
+}
+.nd ul {
+  margin-top: 10px;
+}
+.nd li {
+  list-style: inside;
+}
+
+.table table {
+  width: 100%;
+}
+
+.table td {
+  padding: 14px 20px;
+  font-family: "Shopee medium";
+}
+
+.table td:first-child {
+  width: 230px;
+  font-family: "Shopee Bold";
+  font-weight: inherit;
+}
+
+.table tr {
+  background: #f3f3f3;
+}
+
+.table tr:nth-child(2n+1) {
+  background: #fff;
+}
+
+#backgroundPopup {
+  display: none;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2784313725);
+  border: 1px solid #cecece;
+  z-index: 99;
+}
+#backgroundPopup.active {
+  display: block;
+}
+
+.star-rating {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.star-rating input {
+  display: none; /* Ẩn các input radio */
+}
+
+.star-rating label {
+  cursor: pointer;
+  width: 45px;
+  height: 45px;
+  margin: 0 5px;
+  background-size: cover;
+  transition: background-image 0.3s ease-in-out;
+  background-image: url("../images/icon-star-gray.png");
+}
+
+/* Sao đã chọn, sử dụng hình ảnh ngôi sao màu vàng */
+.star-rating input:checked ~ label {
+  background-image: url("../images/icon-star-active.png"); /* Đặt hình sao màu vàng khi chọn */
+}
+
+/* Sao khi hover, thay đổi màu sắc của sao */
+.star-rating label:hover,
+.star-rating input:checked ~ label:hover {
+  background-image: url("../images/icon-star-active.png"); /* Thay đổi hình sao khi hover */
 }/*# sourceMappingURL=style.css.map */