Upload 63 files

.gitattributes

@@ -46,3 +46,23 @@ assets/img/testimonial-perfil-1.png filter=lfs diff=lfs merge=lfs -text
 assets/img/testimonial-perfil-2.png filter=lfs diff=lfs merge=lfs -text
 assets/img/testimonial-perfil-3.png filter=lfs diff=lfs merge=lfs -text
 assets/img/testimonial-perfil-4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_1.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_2.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_3.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_5.png filter=lfs diff=lfs merge=lfs -text
+assets/img/kn_6.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_1_2.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_1_4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_1.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_2.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_3.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_5.png filter=lfs diff=lfs merge=lfs -text
+assets/img/ntt_6.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_1.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_2.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_3.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_5.png filter=lfs diff=lfs merge=lfs -text
+assets/img/s_6.png filter=lfs diff=lfs merge=lfs -text

assets/css/styles.css

@@ -1157,42 +1157,690 @@ body.dark-theme {
 }
 
 /* ==================== PRODUCT DETAIL ==================== */
-.product__detail {
-  flex: 1;
-  padding: 20px;
-  margin-top: 2rem;
+.product-detail {
+  padding-top: 8rem;
+  padding-bottom: 4rem;
 }
 
-.product__img img {
-  max-width: 100%;
+.product-detail__header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.product-detail__title {
+  font-size: var(--h1-font-size);
+  color: var(--title-color);
+  margin-bottom: 1rem;
+  line-height: 1.3;
+}
+
+.product-detail__breadcrumb {
+  font-size: var(--small-font-size);
+  color: var(--text-color);
+}
+
+.product-detail__breadcrumb a {
+  color: var(--first-color);
+  text-decoration: none;
+}
+
+.product-detail__breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+.product-detail__breadcrumb span {
+  margin: 0 0.5rem;
+  color: var(--text-color);
+}
+
+/* Product Content Layout */
+.product-detail__content {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 3rem;
+  margin-bottom: 4rem;
+  align-items: start;
+}
+
+/* Product Image Section */
+.product-detail__image {
+  position: sticky;
+  top: 2rem;
+}
+
+.product-detail__image-main {
+  background-color: white;
+  border: 2px solid var(--border-color);
+  border-radius: 15px;
+  padding: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.product-detail__image-main img {
+  width: 100%;
+  max-width: 350px;
   height: auto;
+  object-fit: contain;
+}
+
+.product-detail__image-gallery {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.gallery-thumb {
+  width: 70px;
+  height: 70px;
+  object-fit: cover;
+  border: 2px solid var(--border-color);
   border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+.gallery-thumb:hover,
+.gallery-thumb.active {
+  opacity: 1;
+  border-color: var(--first-color);
+}
+
+/* Product Info Section */
+.product-detail__info {
+  padding: 1rem 0;
+}
+
+.product-detail__brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.brand-tag {
+  background-color: var(--first-color);
+  color: var(--white-color);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: var(--small-font-size);
+  font-weight: var(--font-medium);
+}
+
+.product-code {
+  font-size: var(--small-font-size);
+  color: var(--text-color);
+}
+
+.product-detail__name {
+  font-size: var(--h2-font-size);
+  color: var(--title-color);
+  margin-bottom: 1rem;
+  line-height: 1.3;
+}
+
+.product-detail__rating {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.rating-stars {
+  color: var(--first-color);
+  font-size: 1.1rem;
+}
+
+.rating-text {
+  font-size: var(--small-font-size);
+  color: var(--text-color);
+}
+
+.product-detail__price {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.price-current {
+  font-size: 1.75rem;
+  font-weight: var(--font-semi-bold);
+  color: var(--first-color);
+}
+
+.price-original {
+  font-size: var(--normal-font-size);
+  color: var(--text-color);
+  text-decoration: line-through;
+}
+
+.price-discount {
+  background-color: #ff4757;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: var(--small-font-size);
+  font-weight: var(--font-medium);
+}
+
+.product-detail__description {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background-color: var(--container-color);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+}
+
+.product-detail__description h3 {
+  margin-bottom: 1rem;
+  color: var(--title-color);
+  font-size: var(--h3-font-size);
+}
+
+.product-detail__description ul {
+  list-style: none;
+  padding: 0;
+}
+
+.product-detail__description li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.product-detail__description li:last-child {
+  border-bottom: none;
 }
 
-.detail {
+.product-detail__description li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--first-color);
+  font-weight: bold;
+}
+
+.product-detail__quantity {
   display: flex;
-  gap: 20px;
   align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
   flex-wrap: wrap;
+}
+
+.quantity-label {
+  font-weight: var(--font-medium);
+  color: var(--title-color);
+}
+
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.qty-btn {
+  background-color: var(--container-color);
+  border: none;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: var(--title-color);
+  transition: background-color 0.3s;
+}
+
+.qty-btn:hover {
+  background-color: var(--first-color);
+  color: var(--white-color);
+}
+
+.qty-input {
+  border: none;
+  padding: 0.75rem;
+  width: 60px;
+  text-align: center;
+  font-size: var(--normal-font-size);
+  background-color: var(--body-color);
+  color: var(--title-color);
+}
+
+.stock-info {
+  color: #27ae60;
+  font-size: var(--small-font-size);
+  font-weight: var(--font-medium);
+}
+
+.product-detail__actions {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.btn-add-cart {
+  flex: 1;
+  min-width: 200px;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-buy-now {
+  flex: 1;
+  min-width: 150px;
 }
 
-.product__title {
+.button--secondary {
+  background-color: transparent;
+  border: 2px solid var(--first-color);
+  color: var(--first-color);
+}
+
+.button--secondary:hover {
+  background-color: var(--first-color);
+  color: var(--white-color);
+}
+
+.btn-wishlist {
+  width: 50px;
+  height: 50px;
+  border: 2px solid var(--border-color);
+  background-color: var(--container-color);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: all 0.3s ease;
+}
+
+.btn-wishlist:hover {
+  border-color: var(--first-color);
+  color: var(--first-color);
+}
+
+.product-detail__features {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background-color: var(--container-color);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.feature-item i {
+  color: var(--first-color);
+  font-size: 1.25rem;
+}
+
+.feature-item span {
+  font-size: var(--small-font-size);
+  color: var(--text-color);
+}
+
+/* Product Specifications */
+.product-detail__specs {
+  background-color: var(--container-color);
+  padding: 2rem;
+  border-radius: 15px;
+  border: 2px solid var(--border-color);
+}
+
+.specs-title {
+  font-size: var(--h2-font-size);
+  color: var(--title-color);
+  margin-bottom: 1.5rem;
   text-align: center;
+}
+
+.specs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.spec-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: var(--body-color);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.spec-label {
+  font-weight: var(--font-medium);
+  color: var(--title-color);
+}
+
+.spec-value {
+  color: var(--text-color);
+  text-align: right;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 1024px) {
+  .product-detail__content {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .product-detail__image {
+    position: static;
+    order: 1;
+  }
+
+  .product-detail__info {
+    order: 2;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .product-detail {
+    padding-top: 6rem;
+  }
+
+  .product-detail__title {
+    font-size: var(--h2-font-size);
+  }
+
+  .product-detail__image-main {
+    padding: 1rem;
+  }
+
+  .product-detail__image-main img {
+    max-width: 250px;
+  }
+
+  .product-detail__actions {
+    flex-direction: column;
+  }
+
+  .btn-add-cart,
+  .btn-buy-now {
+    min-width: 100%;
+  }
+
+  .specs-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .spec-item {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .spec-value {
+    text-align: left;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .product-detail__quantity {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .product-detail__price {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .gallery-thumb {
+    width: 60px;
+    height: 60px;
+  }
+}
+
+/*=============== LOGIN MESSAGE ===============*/
+.login__message {
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  border-radius: 5px;
+  font-size: var(--small-font-size);
+  text-align: center;
+  font-weight: var(--font-medium);
+  transition: all 0.3s ease;
+}
+
+.login__message--success {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.login__message--error {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+/* Dark theme cho message */
+.dark-theme .login__message--success {
+  background-color: #1e4620;
+  color: #75b798;
+  border: 1px solid #2d5a31;
+}
+
+.dark-theme .login__message--error {
+  background-color: #4a1e1e;
+  color: #f1aeb5;
+  border: 1px solid #5a2d2d;
+}
+
+/*=============== USER MENU ===============*/
+.user-menu {
+  position: fixed;
+  top: -100%;
+  left: 0;
   width: 100%;
+  height: 100%;
+  z-index: var(--z-fixed);
+  background-color: hsla(230, 62%, 96%, 0.6);
+  backdrop-filter: blur(16px);
+  align-items: center;
+  padding: 1.5rem;
+  text-align: center;
+  transition: top 0.4s;
+}
+
+.user-menu__container {
+  background-color: var(--container-color);
+  padding: 2rem 1.5rem;
+  border: 2px solid var(--border-color);
+  border-radius: 15px;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
 }
 
-.product_info {
+.user-menu__header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.user-menu__avatar {
+  width: 60px;
+  height: 60px;
+  background-color: var(--first-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
   justify-content: center;
 }
 
-@media (max-width: 768px) {
-  .detail {
-    flex-direction: column;
+.user-menu__avatar i {
+  font-size: 2rem;
+  color: var(--white-color);
+}
+
+.user-menu__info {
+  text-align: left;
+  flex: 1;
+}
+
+.user-menu__name {
+  font-size: var(--h3-font-size);
+  color: var(--title-color);
+  margin-bottom: 0.25rem;
+  font-weight: var(--font-medium);
+}
+
+.user-menu__email {
+  font-size: var(--small-font-size);
+  color: var(--text-color);
+  margin: 0;
+}
+
+.user-menu__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.user-menu__button {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-color);
+  font-size: var(--normal-font-size);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+}
+
+.user-menu__button:hover {
+  background-color: var(--first-color);
+  color: var(--white-color);
+  border-color: var(--first-color);
+}
+
+.user-menu__button--logout {
+  margin-top: 0.5rem;
+  border-color: #dc3545;
+  color: #dc3545;
+}
+
+.user-menu__button--logout:hover {
+  background-color: #dc3545;
+  color: var(--white-color);
+  border-color: #dc3545;
+}
+
+.user-menu__button i {
+  font-size: 1.25rem;
+}
+
+.user-menu__close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  font-size: 2rem;
+  color: var(--title-color);
+  cursor: pointer;
+}
+
+/* Show user menu */
+.show-user-menu {
+  top: 0;
+}
+
+/* Dark theme cho user menu */
+.dark-theme .user-menu {
+  background-color: hsla(230, 12%, 8%, 0.6);
+}
+
+/* Responsive */
+@media screen and (min-width: 576px) {
+  .user-menu__close {
+    width: max-content;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    margin-inline: auto;
   }
+}
 
-  .product__title {
-    text-align: center;
+/*=============== LOGOUT MESSAGE ===============*/
+.logout-message {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  z-index: 1000;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+}
+
+.logout-message.show {
+  transform: translateX(0);
+}
+
+.logout-message__content {
+  background-color: #28a745;
+  color: white;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-weight: var(--font-medium);
+}
+
+.logout-message__content i {
+  font-size: 1.25rem;
+}
+
+/* Dark theme */
+.dark-theme .logout-message__content {
+  background-color: #20c997;
+}
+
+/* Mobile responsive */
+@media screen and (max-width: 768px) {
+  .logout-message {
+    top: 1rem;
+    right: 1rem;
+    left: 1rem;
+    right: 1rem;
   }
 }
+
+/*=============== LOGIN BUTTON STATES ===============*/
+.nav__actions i.logged-in {
+  color: var(--first-color);
+  background-color: var(--container-color);
+  padding: 0.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--first-color);
+}
+
+.nav__actions i.logged-in:hover {
+  background-color: var(--first-color);
+  color: var(--white-color);
+}

assets/js/main.js

@@ -41,26 +41,195 @@ if (bagClose) {
 }
 
 /*=============== LOGIN ===============*/
+/*=============== LOGIN & USER MENU ===============*/
 const loginButton = document.getElementById("login-button"),
   loginClose = document.getElementById("login-close"),
-  loginContent = document.getElementById("login-content");
+  loginContent = document.getElementById("login-content"),
+  userMenuClose = document.getElementById("user-menu-close"),
+  userMenuContent = document.getElementById("user-menu-content");
 
-/*===== LOGIN SHOW =====*/
-/* Validate if constant exists */
+/*===== HANDLE LOGIN BUTTON CLICK =====*/
 if (loginButton) {
   loginButton.addEventListener("click", () => {
-    loginContent.classList.add("show-login");
+    // Kiểm tra trạng thái đăng nhập
+    const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+
+    if (isLoggedIn) {
+      // Đã đăng nhập -> hiển thị user menu
+      showUserMenu();
+    } else {
+      // Chưa đăng nhập -> hiển thị form đăng nhập
+      loginContent.classList.add("show-login");
+    }
   });
 }
 
-/*===== LOGIN HIDDEN =====*/
-/* Validate if constant exists */
+/*===== LOGIN FORM HIDDEN =====*/
 if (loginClose) {
   loginClose.addEventListener("click", () => {
     loginContent.classList.remove("show-login");
   });
 }
 
+/*===== USER MENU HIDDEN =====*/
+if (userMenuClose) {
+  userMenuClose.addEventListener("click", () => {
+    userMenuContent.classList.remove("show-user-menu");
+  });
+}
+
+/*=============== LOGIN FORM HANDLER ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  const loginForm = document.querySelector(".login__form");
+
+  if (loginForm) {
+    loginForm.addEventListener("submit", handleLogin);
+  }
+});
+
+function handleLogin(event) {
+  // Ngăn form submit mặc định (reload trang)
+  event.preventDefault();
+
+  // Lấy giá trị từ input
+  const emailInput = document.getElementById("login-email");
+  const passwordInput = document.getElementById("login-pass");
+
+  const email = emailInput.value.trim();
+  const password = passwordInput.value.trim();
+
+  // Kiểm tra thông tin đăng nhập
+  validateLogin(email, password);
+}
+
+function validateLogin(email, password) {
+  // Thông tin đăng nhập đúng
+  const VALID_EMAIL = "dothulieu12@gmail.com";
+  const VALID_PASSWORD = "lieu123";
+
+  // Kiểm tra email và password có trống không
+  if (!email || !password) {
+    showLoginMessage("Vui lòng nhập đầy đủ email và mật khẩu!", "error");
+    return;
+  }
+
+  // Kiểm tra thông tin đăng nhập
+  if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+    showLoginMessage(
+      "Đăng nhập thành công! Chào mừng bạn đến với ThuLieu Store!",
+      "success"
+    );
+    // Đóng modal sau khi đăng nhập thành công
+    setTimeout(() => {
+      closeLoginModal();
+      clearLoginForm();
+    }, 2000);
+  } else {
+    showLoginMessage(
+      "Email hoặc mật khẩu không đúng. Vui lòng thử lại!",
+      "error"
+    );
+  }
+}
+
+function showLoginMessage(message, type) {
+  // Tạo element thông báo
+  const messageDiv = document.createElement("div");
+  messageDiv.className = `login__message login__message--${type}`;
+  messageDiv.textContent = message;
+
+  // Tìm form để chèn thông báo
+  const loginForm = document.querySelector(".login__form");
+  const loginTitle = document.querySelector(".login__title");
+
+  // Xóa thông báo cũ nếu có
+  const existingMessage = loginForm.querySelector(".login__message");
+  if (existingMessage) {
+    existingMessage.remove();
+  }
+
+  // Chèn thông báo sau title
+  loginTitle.insertAdjacentElement("afterend", messageDiv);
+
+  // Tự động ẩn thông báo sau 5 giây
+  setTimeout(() => {
+    if (messageDiv.parentNode) {
+      messageDiv.remove();
+    }
+  }, 5000);
+}
+
+function closeLoginModal() {
+  const loginContent = document.getElementById("login-content");
+  if (loginContent) {
+    loginContent.classList.remove("show-login");
+  }
+}
+
+function clearLoginForm() {
+  const emailInput = document.getElementById("login-email");
+  const passwordInput = document.getElementById("login-pass");
+
+  if (emailInput) emailInput.value = "";
+  if (passwordInput) passwordInput.value = "";
+
+  // Xóa thông báo
+  const messageDiv = document.querySelector(".login__message");
+  if (messageDiv) {
+    messageDiv.remove();
+  }
+}
+
+function validateLogin(email, password) {
+  const VALID_EMAIL = "dothulieu12@gmail.com";
+  const VALID_PASSWORD = "lieu123";
+
+  // Hiển thị loading
+  showLoginMessage("Đang xử lý...", "loading");
+
+  // Giả lập thời gian xử lý
+  setTimeout(() => {
+    if (!email || !password) {
+      showLoginMessage("Vui lòng nhập đầy đủ email và mật khẩu!", "error");
+      return;
+    }
+
+    if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+      // Lưu trạng thái đăng nhập
+      localStorage.setItem("isLoggedIn", "true");
+      localStorage.setItem("userEmail", email);
+
+      showLoginMessage(
+        "Đăng nhập thành công! Chào mừng bạn đến với ThuLieu Store!",
+        "success"
+      );
+      setTimeout(() => {
+        closeLoginModal();
+        clearLoginForm();
+        updateUIAfterLogin();
+      }, 2000);
+    } else {
+      showLoginMessage(
+        "Email hoặc mật khẩu không đúng. Vui lòng thử lại!",
+        "error"
+      );
+    }
+  }, 1000);
+}
+
+function updateUIAfterLogin() {
+  // Thay đổi icon đăng nhập thành icon user đã đăng nhập
+  const loginButton = document.getElementById("login-button");
+  if (loginButton) {
+    loginButton.classList.remove("ri-user-line");
+    loginButton.classList.add("ri-user-3-fill");
+    loginButton.title = "Thông tin tài khoản";
+
+    // Thêm class để đánh dấu đã đăng nhập
+    loginButton.classList.add("logged-in");
+  }
+}
+
 /*=============== ADD SHADOW HEADER ===============*/
 const shadowHeader = () => {
   const header = document.getElementById("header");
@@ -417,3 +586,220 @@ function checkoutHandler() {
 function resetCart() {
   localStorage.removeItem("cartItems");
 }
+
+/*=============== USER MENU FUNCTIONS ===============*/
+function showUserMenu() {
+  // Cập nhật thông tin user
+  updateUserMenuInfo();
+
+  // Hiển thị menu
+  userMenuContent.classList.add("show-user-menu");
+}
+
+function updateUserMenuInfo() {
+  const userEmail = localStorage.getItem("userEmail") || "email@example.com";
+  const userName = extractNameFromEmail(userEmail);
+
+  // Cập nhật tên và email
+  const userNameElement = document.getElementById("user-name");
+  const userEmailElement = document.getElementById("user-email");
+
+  if (userNameElement) {
+    userNameElement.textContent = userName;
+  }
+
+  if (userEmailElement) {
+    userEmailElement.textContent = userEmail;
+  }
+}
+
+function extractNameFromEmail(email) {
+  // Lấy phần trước @ và format thành tên
+  const name = email.split("@")[0];
+
+  // Xử lý các trường hợp đặc biệt
+  if (name === "dothulieu12") {
+    return "Thu Liêu";
+  }
+
+  // Format tên từ email
+  return name.charAt(0).toUpperCase() + name.slice(1).replace(/[0-9]/g, "");
+}
+
+/*=============== LOGOUT FUNCTIONALITY ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  // Kiểm tra trạng thái đăng nhập khi tải trang
+  checkLoginStatus();
+
+  // Xử lý sự kiện đăng xuất
+  const logoutButton = document.getElementById("logout-button");
+  if (logoutButton) {
+    logoutButton.addEventListener("click", handleLogout);
+  }
+
+  // Xử lý các nút khác trong user menu
+  const viewProfileButton = document.getElementById("view-profile");
+  const viewOrdersButton = document.getElementById("view-orders");
+
+  if (viewProfileButton) {
+    viewProfileButton.addEventListener("click", () => {
+      alert("Chức năng thông tin cá nhân đang được phát triển!");
+    });
+  }
+
+  if (viewOrdersButton) {
+    viewOrdersButton.addEventListener("click", () => {
+      alert("Chức năng đơn hàng đang được phát triển!");
+    });
+  }
+});
+
+function checkLoginStatus() {
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+
+  if (isLoggedIn) {
+    updateUIAfterLogin();
+  }
+}
+
+function handleLogout() {
+  // Hiển thị xác nhận đăng xuất
+  const confirmLogout = confirm("Bạn có chắc chắn muốn đăng xuất?");
+
+  if (confirmLogout) {
+    // Xóa thông tin đăng nhập
+    localStorage.removeItem("isLoggedIn");
+    localStorage.removeItem("userEmail");
+
+    // Đóng user menu
+    userMenuContent.classList.remove("show-user-menu");
+
+    // Cập nhật UI về trạng thái chưa đăng nhập
+    updateUIAfterLogout();
+
+    // Hiển thị thông báo
+    showLogoutMessage();
+  }
+}
+
+function updateUIAfterLogout() {
+  const loginButton = document.getElementById("login-button");
+  if (loginButton) {
+    loginButton.classList.remove("ri-user-3-fill", "logged-in");
+    loginButton.classList.add("ri-user-line");
+    loginButton.title = "Đăng nhập";
+  }
+}
+
+function showLogoutMessage() {
+  // Tạo thông báo đăng xuất
+  const messageDiv = document.createElement("div");
+  messageDiv.className = "logout-message";
+  messageDiv.innerHTML = `
+        <div class="logout-message__content">
+            <i class="ri-check-line"></i>
+            <span>Đăng xuất thành công!</span>
+        </div>
+    `;
+
+  document.body.appendChild(messageDiv);
+
+  // Hiển thị animation
+  setTimeout(() => {
+    messageDiv.classList.add("show");
+  }, 100);
+
+  // Tự động ẩn sau 3 giây
+  setTimeout(() => {
+    messageDiv.classList.remove("show");
+    setTimeout(() => {
+      if (messageDiv.parentNode) {
+        messageDiv.remove();
+      }
+    }, 300);
+  }, 3000);
+}
+
+/*=============== PRODUCT DETAIL FUNCTIONALITY ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  // Gallery functionality
+  const galleryThumbs = document.querySelectorAll(".gallery-thumb");
+  const mainImage = document.querySelector(".product-detail__image-main img");
+
+  if (galleryThumbs.length > 0 && mainImage) {
+    galleryThumbs.forEach((thumb) => {
+      thumb.addEventListener("click", function () {
+        // Remove active class from all thumbnails
+        galleryThumbs.forEach((t) => t.classList.remove("active"));
+
+        // Add active class to clicked thumbnail
+        this.classList.add("active");
+
+        // Change main image
+        mainImage.src = this.src;
+        mainImage.alt = this.alt;
+      });
+    });
+  }
+
+  // Quantity controls
+  const qtyMinus = document.querySelector(".qty-minus");
+  const qtyPlus = document.querySelector(".qty-plus");
+  const qtyInput = document.querySelector(".qty-input");
+
+  if (qtyMinus && qtyPlus && qtyInput) {
+    qtyMinus.addEventListener("click", function () {
+      let currentValue = parseInt(qtyInput.value);
+      if (currentValue > 1) {
+        qtyInput.value = currentValue - 1;
+      }
+    });
+
+    qtyPlus.addEventListener("click", function () {
+      let currentValue = parseInt(qtyInput.value);
+      qtyInput.value = currentValue + 1;
+    });
+
+    qtyInput.addEventListener("change", function () {
+      if (this.value < 1) {
+        this.value = 1;
+      }
+    });
+  }
+
+  // Add to cart functionality
+  const addCartBtn = document.querySelector(".btn-add-cart");
+  const buyNowBtn = document.querySelector(".btn-buy-now");
+  const wishlistBtn = document.querySelector(".btn-wishlist");
+
+  if (addCartBtn) {
+    addCartBtn.addEventListener("click", function () {
+      const quantity = qtyInput ? qtyInput.value : 1;
+      alert(`Đã thêm ${quantity} sản phẩm vào giỏ hàng!`);
+    });
+  }
+
+  if (buyNowBtn) {
+    buyNowBtn.addEventListener("click", function () {
+      const quantity = qtyInput ? qtyInput.value : 1;
+      alert(`Mua ngay ${quantity} sản phẩm!`);
+    });
+  }
+
+  if (wishlistBtn) {
+    wishlistBtn.addEventListener("click", function () {
+      const icon = this.querySelector("i");
+      if (icon.classList.contains("ri-heart-line")) {
+        icon.classList.remove("ri-heart-line");
+        icon.classList.add("ri-heart-fill");
+        this.style.color = "var(--first-color)";
+        alert("Đã thêm vào danh sách yêu thích!");
+      } else {
+        icon.classList.remove("ri-heart-fill");
+        icon.classList.add("ri-heart-line");
+        this.style.color = "";
+        alert("Đã xóa khỏi danh sách yêu thích!");
+      }
+    });
+  }
+});

index.html

@@ -174,6 +174,40 @@
       <i class="ri-close-line login__close" id="login-close"></i>
     </div>
 
+    <!--==================== USER MENU ====================-->
+    <div class="user-menu grid" id="user-menu-content">
+      <div class="user-menu__container">
+        <div class="user-menu__header">
+          <div class="user-menu__avatar">
+            <i class="ri-user-3-fill"></i>
+          </div>
+          <div class="user-menu__info">
+            <h3 class="user-menu__name" id="user-name">Người dùng</h3>
+            <p class="user-menu__email" id="user-email">email@example.com</p>
+          </div>
+        </div>
+        
+        <div class="user-menu__actions">
+          <button class="user-menu__button" id="view-profile">
+            <i class="ri-user-settings-line"></i>
+            <span>Thông tin cá nhân</span>
+          </button>
+          
+          <button class="user-menu__button" id="view-orders">
+            <i class="ri-shopping-bag-2-line"></i>
+            <span>Đơn hàng của tôi</span>
+          </button>
+          
+          <button class="user-menu__button user-menu__button--logout" id="logout-button">
+            <i class="ri-logout-circle-line"></i>
+            <span>Đăng xuất</span>
+          </button>
+        </div>
+      </div>
+
+      <i class="ri-close-line user-menu__close" id="user-menu-close"></i>
+    </div>
+
     <!--==================== MAIN ====================-->
     <main class="main">
       <!--==================== HOME ====================-->
@@ -199,7 +233,7 @@
               <div class="swiper-wrapper">
                 <article class="home__article swiper-slide">
                   <img
-                    src="assets/img/home-book-1.png"
+                    src="assets/img/ntt_1.png"
                     alt="image"
                     class="home__img"
                   />
@@ -239,7 +273,7 @@
 
                 <article class="home__article swiper-slide">
                   <img
-                    src="assets/img/home-book-6.png"
+                    src="assets/img/kn_5.png"
                     alt="image"
                     class="home__img"
                   />
@@ -247,7 +281,7 @@
 
                 <article class="home__article swiper-slide">
                   <img
-                    src="assets/img/home-book-7.png"
+                    src="assets/img/ntt_3.png"
                     alt="image"
                     class="home__img"
                   />
@@ -290,128 +324,24 @@
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_1.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Bigsize - Nước tẩy trang bí đao Cocoo 500ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="295000"
+                    >295.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">599.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -420,24 +350,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_2.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Nước Tẩy Trang B5 Prettyskin Cleansing Water GC Hàn Quốc
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="245000"
+                    >245.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">400.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -446,24 +376,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_3.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Nước tẩy trang Senka All Clear Water Bright 230ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="181000"
+                    >181.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">238.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -472,24 +402,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_4.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Nước tẩy trang La Roche-Posay 50ml Minisize
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="45000"
+                    >45.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">90.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -498,24 +428,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_5.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Nước tẩy trang Garnier Micellar Cleansing 400ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="160000"
+                    >160.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">199.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -524,24 +454,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/ntt_6.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Nước Tẩy Trang L'Oréal Paris 3 In 1 400ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="180000"
+                    >180.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">240.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -564,24 +494,24 @@
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_1.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem nền CARSLAN dạng lỏng kiềm dầu 30g
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="299000"
+                    >299.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">580.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -590,24 +520,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_2.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem Nền Bắt Sáng Superstay Lumi Matte 35ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="244000"
+                    >244.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">348.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -616,24 +546,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_3.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem Nền Catrice HD Liquid Coverage Foundation 30ml
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="219000"
+                    >219.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">390.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -642,24 +572,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_4.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem nền dạng lỏng Minijumie Joco trong suốt
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="41900"
+                    >41.900 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">85.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -668,24 +598,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_5.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem Nền Colorkey Dạng Lỏng Dưỡng Ẩm Kiểm Soát Dầu
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="250000"
+                    >250.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">436.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -694,128 +624,24 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_6.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Kem Nền Maybelline New York Fit Me Tint Vitamin C & SPF50
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="190000"
+                    >190.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">228.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-4.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-4.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-4.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-4.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -838,128 +664,24 @@
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-6.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-6.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-6.png"
-                  alt="image"
-                  class="featured__img"
-                />
-
-                <h2 class="featured__title">Sản phẩm X</h2>
-                <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
-                  >
-                  <span class="featured__price">1.111.111 ₫</span>
-                </div>
-
-                <button class="button">Thêm vào giỏ hàng</button>
-
-                <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
-                  <button>
-                    <i class="ri-eye-line" onclick="openDetailPage()"></i>
-                  </button>
-                </div>
-              </article>
-
-              <article class="featured__card swiper-slide">
-                <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_1.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">
+                  Son dưỡng Dior Maximizer </br> mẫu mới
+                </h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="490000"
+                    >490.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">700.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -968,24 +690,22 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_2.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">Son dưỡng MERYTHOD Collagen Melting Lip Balm 5g</h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="237900"
+                    >237.900 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">385.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
 
                 <div class="featured__actions">
-                  <!-- <button><i class="ri-search-line"></i></button> -->
-                  <!-- <button><i class="ri-heart-3-line"></i></button> -->
                   <button>
                     <i class="ri-eye-line" onclick="openDetailPage()"></i>
                   </button>
@@ -994,17 +714,17 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_3.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">Son COLORKEY Watery Matte Lip Tint dạng lỏng</h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="258000"
+                    >258.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">636.900 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
@@ -1020,17 +740,17 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_4.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">Son Thỏi Romand New Zero Matte Lipstick 3g</h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="165000"
+                    >165.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">365.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
@@ -1046,17 +766,17 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_5.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">Son bóng dưỡng</br> môi 3CE Glazy</br> Lip Glow</h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="304000"
+                    >304.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">398.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
@@ -1072,17 +792,17 @@
 
               <article class="featured__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_6.png"
                   alt="image"
                   class="featured__img"
                 />
 
-                <h2 class="featured__title">Sản phẩm X</h2>
+                <h2 class="featured__title">Son bóng dưỡng</br> môi 3CE Glazy</br> Lip Glow</h2>
                 <div class="featured__prices">
-                  <span class="featured__discount" data-price="999999"
-                    >999.999 ₫</span
+                  <span class="featured__discount" data-price="304000"
+                    >304.000 ₫</span
                   >
-                  <span class="featured__price">1.111.111 ₫</span>
+                  <span class="featured__price">398.000 ₫</span>
                 </div>
 
                 <button class="button">Thêm vào giỏ hàng</button>
@@ -1137,7 +857,7 @@
         </div>
       </section>
 
-      <!--==================== Mỹ Kphẩm mới về ====================-->
+      <!--==================== Mỹ phẩm mới về ====================-->
       <section class="new section" id="new">
         <h2 class="section__title">Hàng mới về</h2>
 
@@ -1146,55 +866,7 @@
             <div class="swiper-wrapper">
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-2.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-3.png"
+                  src="assets/img/ntt_1.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1218,7 +890,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/kn_1.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1242,7 +914,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-5.png"
+                  src="assets/img/s_1.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1266,7 +938,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-6.png"
+                  src="assets/img/s_3.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1290,7 +962,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-7.png"
+                  src="assets/img/kn_3.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1314,55 +986,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-2.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-3.png"
+                  src="assets/img/ntt_3.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1412,78 +1036,6 @@
                 </div>
               </a>
 
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-2.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-1.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
-              <a href="#" class="new__card swiper-slide">
-                <img
-                  src="assets/img/home-book-7.png"
-                  alt="image"
-                  class="new__img"
-                />
-
-                <div>
-                  <h2 class="new__title">Mỹ phẩm mới về</h2>
-                  <div class="new__prices">
-                    <span class="new__discount">999.999</span>
-                    <span class="new__price">1.111.111</span>
-                  </div>
-
-                  <div class="new__stars">
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-fill"></i>
-                    <i class="ri-star-half-fill"></i>
-                  </div>
-                </div>
-              </a>
-
               <a href="#" class="new__card swiper-slide">
                 <img
                   src="assets/img/home-book-6.png"
@@ -1510,7 +1062,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-5.png"
+                  src="assets/img/kn_6.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1534,7 +1086,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-4.png"
+                  src="assets/img/ntt_2.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1558,7 +1110,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-3.png"
+                  src="assets/img/kn_4.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1582,7 +1134,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-2.png"
+                  src="assets/img/s_4.png"
                   alt="image"
                   class="new__img"
                 />
@@ -1606,7 +1158,7 @@
 
               <a href="#" class="new__card swiper-slide">
                 <img
-                  src="assets/img/home-book-1.png"
+                  src="assets/img/kn_1.png"
                   alt="image"
                   class="new__img"
                 />

product_detail.html

@@ -116,15 +116,15 @@
           <div>
             <h3>Thông tin người nhận</h3>
             <h4>Ngân hàng thụ hưởng: MBBank</h4>
-            <h4>Người thụ hưởng: Do THU LIEU</h4>
+            <h4>Người thụ hưởng: DO THU LIEU</h4>
             <h4>Tài khoản thụ hưởng: 0947.066.385</h4>
             <h4>Nội dung: nguoimuahang_sanpham_ngaymuahang</h4>
           </div>
-          <div>
+          <div class="bag__qr">
             <img src="./assets/img/QR.png" alt="QR" />
           </div>
 
-          <button type="submit" class="bag__button button" id="clearCart">
+          <button type="submit" class="bag__button button" id="checkOut">
             Thanh toán
           </button>
         </div>
@@ -174,35 +174,205 @@
       <i class="ri-close-line login__close" id="login-close"></i>
     </div>
 
+    <!--==================== USER MENU ====================-->
+    <div class="user-menu grid" id="user-menu-content">
+      <div class="user-menu__container">
+        <div class="user-menu__header">
+          <div class="user-menu__avatar">
+            <i class="ri-user-3-fill"></i>
+          </div>
+          <div class="user-menu__info">
+            <h3 class="user-menu__name" id="user-name">Người dùng</h3>
+            <p class="user-menu__email" id="user-email">email@example.com</p>
+          </div>
+        </div>
+
+        <div class="user-menu__actions">
+          <button class="user-menu__button" id="view-profile">
+            <i class="ri-user-settings-line"></i>
+            <span>Thông tin cá nhân</span>
+          </button>
+
+          <button class="user-menu__button" id="view-orders">
+            <i class="ri-shopping-bag-2-line"></i>
+            <span>Đơn hàng của tôi</span>
+          </button>
+
+          <button
+            class="user-menu__button user-menu__button--logout"
+            id="logout-button"
+          >
+            <i class="ri-logout-circle-line"></i>
+            <span>Đăng xuất</span>
+          </button>
+        </div>
+      </div>
+
+      <i class="ri-close-line user-menu__close" id="user-menu-close"></i>
+    </div>
+
     <!--==================== MAIN ====================-->
     <main class="main">
       <!--==================== DETAIL SECTION ====================-->
-      <section class="detail section">
-        <div class="product__title">
-          <h2 class="title">Sản phẩm X</h2>
-        </div>
-        <div style="clear: both"></div>
-        <div class="product__info">
-          <div class="product__img">
-            <img src="./assets/img/home-book-1.png" alt="image" />
+      <section class="product-detail section">
+        <div class="container">
+          <!-- Product Title -->
+          <div class="product-detail__header">
+            <h1 class="product-detail__title">
+              Bigsize - Nước tẩy trang bí đao Cocoon tẩy sạch makeup & giảm dầu
+              500ml
+            </h1>
+            <!-- <div class="product-detail__breadcrumb">
+              <a href="index.html">Trang chủ</a>
+              <span>/</span>
+              <a href="#featured">Sản phẩm</a>
+              <span>/</span>
+              <span>Chi tiết sản phẩm</span>
+            </div> -->
+          </div>
+
+          <!-- Product Content -->
+          <div class="product-detail__content">
+            <!-- Product Image -->
+            <div class="product-detail__image">
+              <div class="product-detail__image-main">
+                <img
+                  src="./assets/img/home-book-1.png"
+                  alt="Nước tẩy trang bí đao Cocoon"
+                />
+              </div>
+              <div class="product-detail__image-gallery">
+                <img
+                  src="./assets/img/ntt_1_1.png"
+                  alt="Ảnh 1"
+                  class="gallery-thumb active"
+                />
+                <img
+                  src="./assets/img/ntt_1_2.png"
+                  alt="Ảnh 2"
+                  class="gallery-thumb"
+                />
+                <img
+                  src="./assets/img/ntt_1_3.png"
+                  alt="Ảnh 3"
+                  class="gallery-thumb"
+                />
+                <img
+                  src="./assets/img/ntt_1_4.png"
+                  alt="Ảnh 4"
+                  class="gallery-thumb"
+                />
+              </div>
+            </div>
+
+            <!-- Product Info -->
+            <div class="product-detail__info">
+              <div class="product-detail__brand">
+                <span class="brand-tag">Cocoon</span>
+                <span class="product-code">Mã SP: COCOON500ML</span>
+              </div>
+
+              <h2 class="product-detail__name">Nước Tẩy Trang Bí Đao Cocoon</h2>
+
+              <div class="product-detail__rating">
+                <div class="rating-stars">
+                  <i class="ri-star-fill"></i>
+                  <i class="ri-star-fill"></i>
+                  <i class="ri-star-fill"></i>
+                  <i class="ri-star-fill"></i>
+                  <i class="ri-star-half-fill"></i>
+                </div>
+                <span class="rating-text">(4.5/5 - 127 đánh giá)</span>
+              </div>
+
+              <div class="product-detail__price">
+                <span class="price-current">199.000 ₫</span>
+                <span class="price-original">250.000 ₫</span>
+                <span class="price-discount">-20%</span>
+              </div>
+
+              <div class="product-detail__description">
+                <h3>Mô tả sản phẩm:</h3>
+                <ul>
+                  <li>Nước tẩy trang từ bí đao tự nhiên</li>
+                  <li>Làm sạch sâu, loại bỏ hoàn toàn makeup</li>
+                  <li>Kiểm soát dầu thừa, se khít lỗ chân lông</li>
+                  <li>Không gây khô da, phù hợp mọi loại da</li>
+                  <li>Dung tích: 500ml</li>
+                </ul>
+              </div>
+
+              <div class="product-detail__quantity">
+                <span class="quantity-label">Số lượng:</span>
+                <div class="quantity-controls">
+                  <button class="qty-btn qty-minus">-</button>
+                  <input type="number" value="1" min="1" class="qty-input" />
+                  <button class="qty-btn qty-plus">+</button>
+                </div>
+                <span class="stock-info">Còn 47 sản phẩm</span>
+              </div>
+
+              <div class="product-detail__actions">
+                <button class="btn-add-cart button">
+                  <i class="ri-shopping-cart-line"></i>
+                  Thêm vào giỏ hàng
+                </button>
+                <button class="btn-buy-now button button--secondary">
+                  Mua ngay
+                </button>
+                <button class="btn-wishlist">
+                  <i class="ri-heart-line"></i>
+                </button>
+              </div>
+
+              <div class="product-detail__features">
+                <div class="feature-item">
+                  <i class="ri-truck-line"></i>
+                  <span>Miễn phí vận chuyển đơn > 500k</span>
+                </div>
+                <div class="feature-item">
+                  <i class="ri-refresh-line"></i>
+                  <span>Đổi trả trong 30 ngày</span>
+                </div>
+                <div class="feature-item">
+                  <i class="ri-verified-badge-line"></i>
+                  <span>Sản phẩm chính hãng 100%</span>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="product__detail">
-            <h3 class="product__about">Thông số kỹ thuật</h3>
-            <p class="detail">
-              - Độ Cứng: Trung Bình <br />
-              - Vật liệu khung: H.M Graphite + Nanometrix + Tungsten <br />
-              - Vật liệu trục: H.M. Graphite + Namd <br />
-              - Trọng lượng: 4U 83g +/-2 <br />
-              - Chu vi cán vợt: 4U G5. <br />
-              - Chiều dài: 673mm +/-2 <br />
-              - Mức căng: 28lbs ~ 12,5kg <br />
-              - Màu sắc: Màu Xanh chuối <br />
-              - Sản xuất: Nhật Bản. <br />
-            </p>
+
+          <!-- Product Specifications -->
+          <div class="product-detail__specs">
+            <h3 class="specs-title">Thông số kỹ thuật</h3>
+            <div class="specs-grid">
+              <div class="spec-item">
+                <span class="spec-label">Thương hiệu:</span>
+                <span class="spec-value">Cocoon</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-label">Dung tích:</span>
+                <span class="spec-value">500ml</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-label">Xuất xứ:</span>
+                <span class="spec-value">Việt Nam</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-label">Loại da:</span>
+                <span class="spec-value">Mọi loại da</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-label">Hạn sử dụng:</span>
+                <span class="spec-value">3 năm kể từ ngày sản xuất</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-label">Bảo quản:</span>
+                <span class="spec-value">Nơi khô ráo, thoáng mát</span>
+              </div>
+            </div>
           </div>
         </div>
-
-        <div class="product__add2cart"></div>
       </section>
       <!--==================== JOIN ====================-->
       <section class="join section">