guma2k2 · guma2k2 · Sep 5, 2025 · Sep 5, 2025
diff --git a/index.html b/index.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
-<!-- <html lang="en" class="dark"> -->
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Elearning</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
-            rel="stylesheet"
-        />
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
+<html lang="en" class="dark">
+  <!-- <html lang="en"> -->
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Elearning</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "2.2.0",
     "@stomp/stompjs": "^7.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@videosdk.live/react-sdk": "^0.1.103",
     "antd": "^5.13.1",
     "axios": "^1.6.7",
@@ -38,8 +38,6 @@
     "recharts": "^2.12.7",
     "redux-persist": "^6.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.69.7",
-    "slick-carousel": "^1.8.1",
     "sockjs-client": "^1.6.1",
     "stompjs": "^2.3.3"
   },
@@ -55,7 +53,8 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "sass-embedded": "^1.92.0",
     "typescript": "^5.5.4",
-    "vite": "^5.0.8"
+    "vite": "^6.3.5"
   }
 }
diff --git a/src/components/button/Button.module.scss b/src/components/button/Button.module.scss
@@ -1,100 +1,96 @@
 .btn {
-    min-width: 40px;
-    height: 40px;
-    display: inline-flex;
+  min-width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #032e32;
+  text-align: center;
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 175%;
+  cursor: pointer;
+  transition: background color;
+  transition-duration: 0.25s;
+  gap: 10px;
+  position: relative;
+
+  &.disabled {
+    opacity: 0.5;
+    user-select: none;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 6px;
-    background: #032E32;
-    text-align: center;
-    font-size: 1.6rem;
-    font-weight: 500;
-    line-height: 175%;
-    cursor: pointer;
-    transition: background color;
-    transition-duration: 0.25s;
-    gap: 10px;
-    position: relative;
 
-
-
-
-    &.disabled {
-        opacity: 0.5;
-        user-select: none;
-        pointer-events: none;
-        cursor: not-allowed;
-    }
-
-    .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-            width: 22px;
-            height: 22px;
-            object-fit: cover;
-        }
+    img {
+      width: 22px;
+      height: 22px;
+      object-fit: cover;
     }
+  }
 
+  &.primary {
+    background: #ff6934;
+    color: #fff;
 
-    &.primary {
-        background: #FF6934;
-        color: #fff;
-
-        &:hover {
-            background: #FF4401;
-        }
+    &:hover {
+      background: #ff4401;
     }
+  }
 
-    &.outline {
-        background: transparent;
-        border: 1px solid #FF6934;
-        color: #FF6934;
+  &.outline {
+    background: transparent;
+    border: 1px solid #ff6934;
+    color: #ff6934;
 
-        &:hover {
-            background: rgb(255, 180, 153, 0.3)
-        }
+    &:hover {
+      background: rgb(255, 180, 153, 0.3);
     }
+  }
 
-    &.text {
-        background: transparent;
-        font-weight: normal;
-        padding: 0 15px;
+  &.text {
+    background: transparent;
+    font-weight: normal;
+    padding: 0 15px;
 
-        &:hover {
-            color: #FF6934;
-            background: #FFB499;
-        }
+    &:hover {
+      color: #ff6934;
+      background: #ffb499;
     }
+  }
 
-    &.circle {
-        background: var(--header-bg);
-        border-radius: 50%;
-        border: none;
+  &.circle {
+    background: var(--header-bg);
+    border-radius: 50%;
+    border: none;
 
-        &:hover {
-            background: #FFB499;
-        }
+    &:hover {
+      background: #ffb499;
     }
+  }
 }
 
 .spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid rgba(0, 0, 0, 0.1); // vòng ngoài mờ
-    border-top: 4px solid #3498db; // phần trên có màu chính
-    border-radius: 50%;
-    animation: spin 1s linear infinite; // xoay liên tục
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1); // vòng ngoài mờ
+  border-top: 4px solid #3498db; // phần trên có màu chính
+  border-radius: 50%;
+  animation: spin 1s linear infinite; // xoay liên tục
 }
 
 @keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
 
-    100% {
-        transform: rotate(360deg);
-    }
-}
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/course/index.tsx b/src/components/course/index.tsx
@@ -1,29 +1,28 @@
 import { Divider, Rate } from "antd";
-import './Course.style.scss'
+import "./Course.style.scss";
 import { CartType } from "../../types/CartType";
 import { useAppDispatch } from "../../redux/hooks";
 import { deleteCart, updateCart } from "../../redux/slices/CartSlice";
 import { deleteCartById, updateCartBuyLaterById } from "../../services/CartService";
 import { formatCurrency } from "../../utils/Format";
 type PropType = {
-    cart: CartType
-}
+    cart: CartType;
+};
 function Course(props: PropType) {
     const { cart } = props;
     const course = cart.course;
     const dispatch = useAppDispatch();
     const handleDeleteCart = async () => {
         const cartId = cart.id as number;
         const res = await deleteCartById(cartId);
-        dispatch(deleteCart(cartId))
-    }
-
+        dispatch(deleteCart(cartId));
+    };
 
     const handleSaveForLater = async () => {
         const cartId = cart.id as number;
         const res = await updateCartBuyLaterById(cartId);
-        dispatch(updateCart(cartId))
-    }
+        dispatch(updateCart(cartId));
+    };
     return (
         <>
             <Divider />
@@ -44,16 +43,28 @@ function Course(props: PropType) {
                     </div>
                 </div>
                 <div className="course-action">
-                    <div className="delete" onClick={handleDeleteCart}>Xóa</div>
-                    <div className="save-for-later" onClick={handleSaveForLater}>{cart.buyLater == false ? "Lưu lại để mua sau" : "Chuyển vào giỏ hàng"}</div>
+                    <div className="delete" onClick={handleDeleteCart}>
+                        Xóa
+                    </div>
+                    <div className="save-for-later" onClick={handleSaveForLater}>
+                        {cart.buyLater == false ? "Lưu lại để mua sau" : "Chuyển vào giỏ hàng"}
+                    </div>
                 </div>
                 <div className="course-price">
-                    <span>{course.free == true ? "Miễn phí" : course.price != course.discountedPrice ? formatCurrency(course.discountedPrice) : formatCurrency(course.price)}</span>
-                    {course.free == false && course.price != course.discountedPrice && <span className='course-discountPrice'>{formatCurrency(course.price)}</span>}
+                    <span>
+                        {course.free == true
+                            ? "Miễn phí"
+                            : course.price != course.discountedPrice
+                            ? formatCurrency(course.discountedPrice)
+                            : formatCurrency(course.price)}
+                    </span>
+                    {course.free == false && course.price != course.discountedPrice && (
+                        <span className="course-discountPrice">{formatCurrency(course.price)}</span>
+                    )}
                 </div>
             </div>
         </>
-    )
+    );
 }
 
-export default Course
+export default Course;
diff --git a/src/components/curriculum/index.tsx b/src/components/curriculum/index.tsx
@@ -7,7 +7,7 @@ import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io"
 import { MdModeEdit } from "react-icons/md"
 import { FaTrash } from "react-icons/fa"
 import { ChangeEvent, Fragment, useRef, useState } from "react"
-import ReactQuill from "react-quill"
+import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import InputFile from "../inputFile"
 import { LiaTimesSolid } from "react-icons/lia"