update

src/assets/css/style.scss

@@ -131,6 +131,11 @@ span {
         height: 14.5px;
         background-position: -188px -147.5px;
     }
+    &.time-gray {
+        width: 16px;
+        height: 16px;
+        background-position: -34px -73px;
+    }
     &.mouse {
         width: 20px;
         height: 20px;
@@ -177,6 +182,22 @@ span {
         height: 25px;
         background-position: -152px -69px;
     }
+    &.link-review {
+        width: 18px;
+        height: 18px;
+        background-position: -27px -104px;
+    }
+    &.angle-bottom {
+        width: 15px;
+        height: 12px;
+        background-position: -190px -133px;
+    }
+    &.angle-top {
+        width: 15px;
+        height: 12px;
+        background-position: -190px -133px;
+        transform: rotate(180deg);
+    }
 }
 
 .icon-star {
@@ -463,7 +484,7 @@ span {
         font-family: "Shopee Bold";
         font-size: 18px;
         color: #000;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         &:hover {
             color: var(--color-title);
         }
@@ -493,6 +514,11 @@ span {
             filter: brightness(0) invert(1);
         }
     }
+    .summary {
+        font-family: "Shopee medium";
+        margin-bottom: 5px;
+        color: #595959;
+    }
 }
 
 .box-best-rated-products {
@@ -780,4 +806,144 @@ span {
             list-style: inside;
         }
     }
+    .btn-more-review {
+        font-family: "Shopee Bold";
+    }
+    .box-desc {
+        .content {
+            width: 100%;
+            display: block;
+            overflow: hidden;
+            position: relative;
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 100px;
+                background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
+                background: linear-gradient(transparent, #fff);
+            }
+            &.active {
+                height: auto !important;
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+    .box-spec {
+        .content {
+            width: 100%;
+            height: 580px;
+            display: block;
+            overflow: hidden;
+            position: relative;
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 100px;
+                background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
+                background: linear-gradient(transparent, #fff);
+            }
+            &.active {
+                height: auto !important;
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+    .more-all {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ff7a00;
+        i {
+            margin-bottom: 4px;
+            margin-left: 5px;
+        }
+    }
+}
+
+.nd {
+    p,
+    span {
+        line-height: 23px;
+        margin-bottom: 10px;
+    }
+    ul {
+        margin-top: 10px;
+    }
+    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: #00000047;
+    border: 1px solid #cecece;
+    z-index: 99;
+    &.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 */
 }