Upload 40 files

.gitattributes

@@ -33,3 +33,16 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-1.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-2.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-3.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-4.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-5.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-6.png filter=lfs diff=lfs merge=lfs -text
+assets/img/home-book-7.png filter=lfs diff=lfs merge=lfs -text
+assets/img/join-bg.jpg filter=lfs diff=lfs merge=lfs -text
+assets/img/QR.png filter=lfs diff=lfs merge=lfs -text
+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/css/styles.css

@@ -0,0 +1,1198 @@
+/*=============== GOOGLE FONTS ===============*/
+@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@500&family=Montserrat:wght@400;500;600&display=swap");
+
+/*=============== VARIABLES CSS ===============*/
+:root {
+  --header-height: 3.5rem;
+
+  /*========== Colors ==========*/
+  /*Color mode HSL(hue, saturation, lightness)*/
+  --first-color: #5e0011;
+  --title-color: hsl(230, 70%, 16%);
+  --text-color: hsl(230, 16%, 45%);
+  --border-color: #a67c87;
+  --white-color: hsl(0, 0%, 100%);
+  --body-color: #f2dce0;
+  --container-color: #f6d7df;
+
+  /*========== Font and typography ==========*/
+  /*.5rem = 8px | 1rem = 16px ...*/
+  --body-font: "Montserrat", sans-serif;
+  --second-font: "Montagu Slab", serif;
+  --biggest-font-size: 2rem;
+  --h1-font-size: 1.5rem;
+  --h2-font-size: 1.25rem;
+  --h3-font-size: 1rem;
+  --normal-font-size: 0.938rem;
+  --small-font-size: 0.813rem;
+  --smaller-font-size: 0.75rem;
+
+  /*========== Font weight ==========*/
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semi-bold: 600;
+
+  /*========== z index ==========*/
+  --z-tooltip: 10;
+  --z-fixed: 100;
+}
+
+/*========== Responsive typography ==========*/
+@media screen and (min-width: 1150px) {
+  :root {
+    --biggest-font-size: 3.5rem;
+    --h1-font-size: 2.25rem;
+    --h2-font-size: 1.5rem;
+    --h3-font-size: 1.25rem;
+    --normal-font-size: 1rem;
+    --small-font-size: 0.875rem;
+    --smaller-font-size: 0.813rem;
+  }
+}
+
+/*=============== BASE ===============*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body,
+input,
+button {
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+}
+
+body {
+  background-color: var(--body-color);
+  color: var(--text-color);
+  transition: background-color 0.4s;
+}
+
+input,
+button {
+  border: none;
+  outline: none;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  color: var(--title-color);
+  font-family: var(--second-font);
+  font-weight: var(--font-medium);
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/*=============== THEME ===============*/
+/*========== Variables Dark theme ==========*/
+body.dark-theme {
+  --title-color: hsl(230, 48%, 85%);
+  --text-color: hsl(230, 16%, 70%);
+  --border-color: hsl(230, 12%, 18%);
+  --body-color: hsl(230, 12%, 8%);
+  --container-color: hsl(230, 12%, 12%);
+}
+
+/*========== 
+	Color changes in some parts of 
+	the website, in dark theme
+==========*/
+.dark-theme .shadow-header {
+  box-shadow: 0 2px 16px hsla(0, 0%, 0%, 0.4);
+}
+
+.dark-theme .nav__menu {
+  box-shadow: 0 -8px 32px hsla(0, 0%, 0%, 0.4);
+}
+
+.dark-theme .scrollup {
+  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.4);
+}
+
+.dark-theme .search,
+.dark-theme .login {
+  background-color: hsla(230, 12%, 8%, 0.6);
+}
+
+.dark-theme::-webkit-scrollbar {
+  background-color: hsl(230, 16%, 15%);
+}
+
+.dark-theme::-webkit-scrollbar-thumb {
+  background-color: hsl(230, 16%, 25%);
+}
+
+.dark-theme::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(230, 16%, 35%);
+}
+
+/*=============== REUSABLE CSS CLASSES ===============*/
+.container {
+  max-width: 1220px;
+  margin-inline: 1.5rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.section {
+  padding-block: 5rem 1rem;
+}
+
+.section__title {
+  text-align: center;
+  font-size: var(--h1-font-size);
+  font-family: var(--second-font);
+  margin-bottom: 2rem;
+}
+
+.main {
+  overflow: hidden; /* For animation ScrollReveal */
+}
+
+/*=============== HEADER & NAV ===============*/
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--body-color);
+  z-index: var(--z-fixed);
+  transition: box-shadow 0.4s, background-color 0.4s;
+}
+
+.nav {
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav__logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  color: var(--first-color);
+  font-weight: var(--font-medium);
+}
+.nav__logo i {
+  font-size: 1.25rem;
+}
+
+/* Navigation for mobile devices */
+@media screen and (max-width: 1150px) {
+  .nav__menu {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background-color: var(--container-color);
+    box-shadow: 0 -8px 32px hsla(0, 0%, 0%, 0.1);
+    padding: 1.25rem 4rem;
+    transition: background-color 0.4s;
+  }
+}
+
+.nav__list {
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav__link {
+  color: var(--text-color);
+  transition: color 0.4s;
+}
+
+.nav__link span {
+  display: none;
+}
+
+.nav__link i {
+  font-size: 1.25rem;
+}
+
+.nav__link:hover {
+  color: var(--first-color);
+}
+
+.nav__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+}
+
+.nav__actions i {
+  font-size: 1.25rem;
+  color: var(--title-color);
+  cursor: pointer;
+  transition: color 0.4s;
+}
+
+.nav__actions i:hover {
+  color: var(--first-color);
+}
+
+/* Add shadow header */
+.shadow-header {
+  box-shadow: 0 2px 16px hsla(0, 0%, 0%, 0.1);
+}
+
+/* Active link */
+.active-link {
+  color: var(--first-color);
+}
+
+/*=============== SEARCH ===============*/
+.search {
+  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);
+  padding: 8rem 1.5rem;
+  transition: top 0.4s;
+}
+
+.search__form {
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  background-color: var(--container-color);
+  border: 2px solid var(--border-color);
+  padding-inline: 1rem;
+}
+
+.search__icon {
+  font-size: 1.25rem;
+  color: var(--title-color);
+}
+
+.search__input {
+  width: 100%;
+  padding-block: 1rem;
+  background-color: var(--container-color);
+  color: var(--text-color);
+}
+
+.search__close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  font-size: 2rem;
+  color: var(--title-color);
+  cursor: pointer;
+}
+
+/* Show search */
+.show-search {
+  top: 0;
+}
+
+/* =============== SHOPPING BAG =============== */
+.bag {
+  position: fixed;
+  top: -100%;
+  left: 0;
+  height: 100%;
+  width: 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: left;
+  transition: top 0.4s;
+}
+
+.bag__form {
+  background-color: var(--container-color);
+  padding: 2rem 1.5rem;
+  border: 2px solid var(--border-color);
+  row-gap: 1.25rem;
+}
+
+.bag__title {
+  font-size: var(--h2-font-size);
+}
+
+.bag__group {
+  row-gap: 1.25rem;
+}
+
+.bag__close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  font-size: 2rem;
+  color: var(--title-color);
+  cursor: pointer;
+}
+
+/* Show search */
+.show-bag {
+  top: 0;
+}
+
+.bag__qr {
+  display: flex;
+  justify-content: center;
+}
+
+.bag__qr img {
+  width: 50%;
+}
+
+/*=============== LOGIN ===============*/
+.login {
+  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;
+}
+
+.login__form {
+  background-color: var(--container-color);
+  padding: 2rem 1.5rem;
+  border: 2px solid var(--border-color);
+  row-gap: 1.25rem;
+}
+
+.login__title {
+  font-size: var(--h2-font-size);
+}
+
+.login__group {
+  row-gap: 1.25rem;
+}
+
+.login__label {
+  display: block;
+  text-align: initial;
+  color: var(--title-color);
+  font-weight: var(--font-medium);
+  margin-bottom: 0.25rem;
+}
+
+.login__input {
+  width: 100%;
+  background-color: var(--container-color);
+  border: 2px solid var(--border-color);
+  padding: 1rem;
+  color: var(--text-color);
+}
+
+.login__signup,
+.login__forgot {
+  display: block;
+  font-size: var(--small-font-size);
+}
+
+.login__signup {
+  margin-bottom: 0.5rem;
+}
+
+.login__signup a {
+  color: var(--first-color);
+  font-weight: var(--font-medium);
+}
+
+.login__forgot {
+  color: var(--first-color);
+  margin-bottom: 1.25rem;
+}
+
+.login__button {
+  width: 100%;
+  cursor: pointer;
+}
+
+.login__close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  font-size: 2rem;
+  color: var(--title-color);
+  cursor: pointer;
+}
+
+/* Show login */
+.show-login {
+  top: 0;
+}
+
+/*=============== HOME ===============*/
+.home__swiper {
+  margin: initial;
+}
+
+.home__container {
+  padding-top: 2rem;
+  row-gap: 2.5rem;
+}
+
+.home__data {
+  text-align: center;
+}
+
+.home__title {
+  font-size: var(--biggest-font-size);
+  margin-bottom: 1rem;
+}
+
+.home__description {
+  margin-bottom: 2rem;
+}
+
+.home__images {
+  display: grid;
+}
+
+.home__article,
+.home__img {
+  width: 220px;
+  transition: scale 0.4s;
+}
+
+.home__article {
+  scale: 0.8;
+}
+
+/* Swiper class */
+.swiper-slide-active,
+.swiper-slide-duplicate-active {
+  scale: 1;
+}
+
+/*=============== BUTTON ===============*/
+.button {
+  display: inline-block;
+  background-color: var(--first-color);
+  color: var(--white-color);
+  font-weight: var(--font-semi-bold);
+  padding: 1rem 1.5rem;
+  transition: box-shadow 0.4s;
+  border-radius: 10px;
+}
+
+.button:hover {
+  /* box-shadow: 0 4px 32px hsla(230, 72%, 32%, 0.4); */
+  box-shadow: 0 4px 32px #a11f37;
+}
+
+/*=============== SERVICES ===============*/
+.services__container {
+  row-gap: 3rem;
+}
+
+.services__card {
+  text-align: center;
+}
+
+.services__card i {
+  display: block;
+  font-size: 3rem;
+  color: var(--first-color);
+  margin-bottom: 1rem;
+}
+
+.services__title {
+  font-size: var(--h3-font-size);
+  margin-bottom: 0.5rem;
+}
+
+/*=============== FEATURED ===============*/
+.featured__card {
+  position: relative;
+  text-align: center;
+  background-color: var(--container-color);
+  padding: 2rem;
+  overflow: hidden;
+  border: 2px solid var(--border-color);
+  transition: border 0.4s, background-color 0.4s;
+  border-radius: 10px;
+}
+
+.featured__img {
+  width: 150px;
+  margin: 0 auto 0.75rem;
+}
+
+.featured__title {
+  font-size: var(--h2-font-size);
+  margin-bottom: 0.5rem;
+}
+
+.featured__prices {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.featured__discount {
+  color: var(--title-color);
+}
+
+.featured__price {
+  font-size: var(--small-font-size);
+  text-decoration: line-through;
+}
+
+.featured__card .button {
+  cursor: pointer;
+}
+
+.featured__actions {
+  display: inline-flex;
+  flex-direction: column;
+  row-gap: 0.75rem;
+  position: absolute;
+  top: 2rem;
+  right: -1.5rem;
+  transition: right 0.4s;
+}
+
+.featured__actions button {
+  background: none;
+  font-size: 1.25rem;
+  color: var(--first-color);
+  cursor: pointer;
+}
+
+.featured__card:hover .featured__actions {
+  right: 1.5rem;
+}
+
+/* Swiper class */
+.swiper-button-prev::after,
+.swiper-button-next::after {
+  content: "";
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  width: initial;
+  height: initial;
+  background-color: var(--container-color);
+  border: 2px solid var(--border-color);
+  padding: 0.5rem;
+  font-size: 1.5rem;
+  color: var(--first-color);
+  transition: border 0.4s, background-color 0.4s;
+  border-radius: 10px;
+}
+
+/*=============== DISCOUNT ===============*/
+.discount__container {
+  row-gap: 3.5rem;
+}
+
+.discount__data {
+  text-align: center;
+}
+
+.discount__title {
+  margin-bottom: 1rem;
+}
+
+.discount__description {
+  margin-bottom: 2rem;
+}
+
+.discount__images {
+  display: flex;
+  justify-content: center;
+}
+
+.discount__img-1,
+.discount__img-2 {
+  width: 170px;
+}
+
+.discount__img-1 {
+  transform: translateX(1rem) rotate(-10deg);
+}
+
+.discount__img-2 {
+  transform: translateX(-1rem) rotate(10deg);
+}
+
+/*=============== NEW ===============*/
+.new__card {
+  display: flex;
+  align-items: center;
+  column-gap: 2.5rem;
+  background-color: var(--container-color);
+  padding: 1.5rem 1rem;
+  color: var(--text-color);
+  border: 2px solid var(--border-color);
+  transition: border 0.4s, background-color 0.4s;
+  border-radius: 10px;
+}
+
+.new__card:hover {
+  border: 2px solid var(--text-color);
+}
+
+.new__img {
+  width: 100px;
+}
+
+.new__title {
+  font-size: var(--h2-font-size);
+  margin-bottom: 0.5rem;
+}
+
+.new__prices {
+  display: flex;
+  align-items: center;
+  column-gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.new__discount {
+  color: var(--title-color);
+}
+
+.new__price {
+  font-size: var(--small-font-size);
+  text-decoration: line-through;
+}
+
+.new__stars {
+  color: var(--first-color);
+}
+
+.new__swiper:nth-child(1) {
+  margin-bottom: 2rem;
+}
+
+/*=============== JOIN ===============*/
+.join__container {
+  position: relative;
+  padding-block: 3rem;
+}
+
+.join__bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.join__data {
+  position: relative;
+}
+
+.join__title {
+  color: var(--white-color);
+}
+
+.join__form {
+  display: grid;
+  row-gap: 1rem;
+}
+
+.join__input {
+  padding: 1.25rem 1rem;
+  background-color: var(--body-color);
+  color: var(--title-color);
+  transition: background-color 0.4s;
+  border-radius: 10px;
+}
+
+.join__input::placeholder {
+  color: var(--text-color);
+}
+
+.join__button {
+  padding-block: 1.25rem;
+  cursor: pointer;
+}
+
+/*=============== TESTIMONIAL ===============*/
+.testimonial__card {
+  text-align: center;
+  background-color: var(--container-color);
+  padding: 2rem 3rem 2.5rem;
+  border: 2px solid var(--border-color);
+  transition: border 0.4s, background-color 0.4s;
+  border-radius: 10px;
+}
+
+.testimonial__img {
+  width: 100px;
+  border-radius: 50%;
+  margin: 0 auto 1.5rem;
+}
+
+.testimonial__title {
+  font-size: var(--h2-font-size);
+  margin-bottom: 0.75rem;
+}
+
+.testimonial__description {
+  font-size: var(--small-font-size);
+  margin-bottom: 1.25rem;
+}
+
+.testimonial__stars {
+  color: var(--first-color);
+}
+
+/*=============== FOOTER ===============*/
+.footer {
+  padding-block: 4rem 6rem;
+}
+
+.footer__container {
+  row-gap: 3rem;
+}
+
+.footer__logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  color: var(--first-color);
+  font-size: var(--h3-font-size);
+  font-family: var(--second-font);
+  margin-bottom: 1.25rem;
+}
+
+.footer__logo i {
+  font-size: 1.25rem;
+}
+
+.footer__data {
+  grid-template-columns: repeat(2, max-content);
+  gap: 3rem 2rem;
+}
+
+.footer__title {
+  font-size: var(--h3-font-size);
+  margin-bottom: 1.25rem;
+}
+
+.footer__links {
+  display: grid;
+  row-gap: 0.5rem;
+}
+
+.footer__link {
+  color: var(--text-color);
+  transition: color 0.4s;
+}
+
+.footer__link:hover {
+  color: var(--first-color);
+}
+
+.footer__info {
+  font-style: normal;
+}
+
+.footer__social {
+  display: flex;
+  column-gap: 1.25rem;
+}
+
+.footer__social-link {
+  font-size: 1.25rem;
+  color: var(--first-color);
+}
+
+.footer__copy {
+  display: block;
+  margin-top: 5rem;
+  text-align: center;
+  font-size: var(--small-font-size);
+}
+
+/*=============== SCROLL BAR ===============*/
+::-webkit-scrollbar {
+  width: 0.6rem;
+  border-radius: 0.5rem;
+  background-color: hsl(230, 16%, 85%);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: hsl(230, 16%, 65%);
+  border-radius: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(230, 16%, 55%);
+}
+
+/*=============== SCROLL UP ===============*/
+.scrollup {
+  position: fixed;
+  right: 1rem;
+  bottom: -50%;
+  background-color: var(--container-color);
+  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.1);
+  display: inline-flex;
+  padding: 6px;
+  font-size: 1.25rem;
+  color: var(--title-color);
+  z-index: var(--z-tooltip);
+  transition: bottom 0.4s, transform 0.4s, background-color 0.4s;
+}
+
+.scrollup:hover {
+  transform: translateY(-0.5rem);
+}
+
+/* Show Scroll Up */
+.show-scroll {
+  bottom: 6rem;
+}
+
+/*=============== BREAKPOINTS ===============*/
+/* For small devices */
+@media screen and (max-width: 320px) {
+  .container {
+    margin-inline: 1rem;
+  }
+
+  .featured__swiper {
+    margin-bottom: 16px !important;
+  }
+
+  .nav__menu {
+    padding-inline: 3rem;
+    border-radius: 10px 10px 0px 0px;
+  }
+
+  .discount__img-1,
+  .discount__img-2 {
+    width: 140px;
+  }
+
+  .new__card {
+    flex-direction: column;
+  }
+
+  .testimonial__card {
+    padding-inline: 1rem;
+  }
+
+  .footer__data {
+    grid-template-columns: 1fr;
+    row-gap: 2rem;
+  }
+}
+
+/* For medium devices */
+@media screen and (min-width: 450px) {
+  .featured__card {
+    width: 290px;
+    margin-bottom: 16px;
+  }
+
+  .new__card {
+    width: 390px;
+  }
+
+  .testimonial__card {
+    width: 320px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .search__form,
+  .bag__form {
+    width: 500px;
+    margin-inline: auto;
+  }
+
+  .login__form {
+    width: 400px;
+    justify-self: center;
+  }
+
+  .search__close,
+  .bag__close,
+  .login__close {
+    width: max-content;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+  }
+
+  .nav__menu {
+    width: 380px;
+    margin-inline: auto;
+  }
+
+  .home__container,
+  .discount__container {
+    grid-template-columns: 420px;
+    justify-content: center;
+  }
+
+  .join__form {
+    width: 328px;
+    justify-self: center;
+  }
+
+  .footer__data {
+    grid-template-columns: repeat(3, max-content);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .home__container {
+    grid-template-columns: 580px;
+  }
+
+  .home__data {
+    width: 420px;
+    justify-self: center;
+  }
+
+  .services__container {
+    grid-template-columns: repeat(3, max-content);
+    justify-content: center;
+    column-gap: 5rem;
+  }
+
+  .footer__container {
+    grid-template-columns: repeat(2, max-content);
+    justify-content: space-between;
+  }
+}
+
+/* For large devices */
+@media screen and (min-width: 1150px) {
+  .section {
+    padding-block: 7rem 2rem;
+  }
+
+  .nav {
+    height: calc(var(--header-height) + 2rem);
+    column-gap: 4rem;
+  }
+  .nav__link i {
+    display: none;
+  }
+  .nav__link span {
+    display: block;
+  }
+  .nav__menu {
+    width: initial;
+    margin-inline: auto 0;
+  }
+  .nav__list {
+    column-gap: 4rem;
+  }
+  .nav__link {
+    font-weight: var(--font-medium);
+  }
+
+  .dark-theme .nav__menu {
+    box-shadow: none;
+  }
+
+  .home__data {
+    width: initial;
+  }
+
+  .services__container {
+    column-gap: 10rem;
+  }
+  .services__card i {
+    font-size: 3.5rem;
+  }
+
+  .featured__container {
+    padding-top: 2rem;
+  }
+  .featured__title {
+    font-size: var(--h3-font-size);
+  }
+
+  .discount__container {
+    grid-template-columns: 615px 500px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .discount__data {
+    order: 1;
+  }
+  .discount__data,
+  .discount__title {
+    text-align: initial;
+  }
+  .discount__description {
+    margin-bottom: 3.5rem;
+  }
+  .discount__img-1,
+  .discount__img-2 {
+    width: 300px;
+  }
+
+  .new__container {
+    padding-top: 2rem;
+  }
+  .new__card {
+    padding: 1.5rem;
+  }
+  .new__img {
+    width: 120px;
+  }
+  .new__title {
+    font-size: var(--h3-font-size);
+  }
+
+  .join__bg {
+    object-position: 0 -5rem;
+  }
+
+  .testimonial__container {
+    padding-top: 2rem;
+  }
+  .testimonial__card {
+    padding-inline: 2rem;
+  }
+  .testimonial__title {
+    font-size: var(--h3-font-size);
+  }
+  .testimonial__description {
+    font-size: var(--normal-font-size);
+  }
+
+  .footer {
+    padding-block: 6rem 3rem;
+  }
+  .footer__data {
+    grid-template-columns: repeat(4, max-content);
+    column-gap: 4.5rem;
+  }
+  .footer__logo,
+  .footer__title {
+    font-size: var(--h2-font-size);
+    margin-bottom: 1.5rem;
+  }
+  .footer__links {
+    row-gap: 1rem;
+  }
+  .footer__social {
+    column-gap: 1.5rem;
+  }
+  .footer__social-link {
+    font-size: 1.5rem;
+  }
+  .footer__copy {
+    margin-top: 7.5rem;
+  }
+
+  .scrollup {
+    right: 3rem;
+  }
+  .show-scroll {
+    bottom: 3rem;
+  }
+}
+
+@media screen and (min-width: 1220px) {
+  .container {
+    margin-inline: auto;
+  }
+
+  .home__container {
+    grid-template-columns: 435px 745px;
+    align-items: center;
+    padding-block: 7rem 2rem;
+  }
+  .home__data {
+    text-align: initial;
+  }
+  .home__description {
+    margin-bottom: 4rem;
+  }
+  .home__article,
+  .home__img {
+    width: 290px;
+  }
+}
+
+/* ==================== PRODUCT DETAIL ==================== */
+.product__detail {
+  flex: 1;
+  padding: 20px;
+  margin-top: 2rem;
+}
+
+.product__img img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.detail {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.product__title {
+  text-align: center;
+  width: 100%;
+}
+
+.product_info {
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .detail {
+    flex-direction: column;
+  }
+
+  .product__title {
+    text-align: center;
+  }
+}

assets/css/swiper-bundle.min.css

@@ -0,0 +1,13 @@
+/**
+ * Swiper 8.4.7
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2023 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: January 30, 2023
+ */
+
+@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}

assets/js/main.js

@@ -0,0 +1,419 @@
+/*=============== SEARCH ===============*/
+const searchButton = document.getElementById("search-button"),
+  searchClose = document.getElementById("search-close"),
+  searchContent = document.getElementById("search-content");
+
+/*===== SEARCH SHOW =====*/
+/* Validate if constant exists */
+if (searchButton) {
+  searchButton.addEventListener("click", () => {
+    searchContent.classList.add("show-search");
+  });
+}
+
+/*===== SEARCH HIDDEN =====*/
+/* Validate if constant exists */
+if (searchClose) {
+  searchClose.addEventListener("click", () => {
+    searchContent.classList.remove("show-search");
+  });
+}
+
+/*=============== SHOPPING BAG ===============*/
+const bagButton = document.getElementById("bag-button"),
+  bagClose = document.getElementById("bag-close"),
+  bagContent = document.getElementById("bag-content");
+
+/*===== CART SHOW =====*/
+/* Validate if constant exists */
+if (bagButton) {
+  bagButton.addEventListener("click", () => {
+    bagContent.classList.add("show-bag");
+  });
+}
+
+/*===== CART HIDDEN =====*/
+/* Validate if constant exists */
+if (bagClose) {
+  bagClose.addEventListener("click", () => {
+    bagContent.classList.remove("show-bag");
+  });
+}
+
+/*=============== LOGIN ===============*/
+const loginButton = document.getElementById("login-button"),
+  loginClose = document.getElementById("login-close"),
+  loginContent = document.getElementById("login-content");
+
+/*===== LOGIN SHOW =====*/
+/* Validate if constant exists */
+if (loginButton) {
+  loginButton.addEventListener("click", () => {
+    loginContent.classList.add("show-login");
+  });
+}
+
+/*===== LOGIN HIDDEN =====*/
+/* Validate if constant exists */
+if (loginClose) {
+  loginClose.addEventListener("click", () => {
+    loginContent.classList.remove("show-login");
+  });
+}
+
+/*=============== ADD SHADOW HEADER ===============*/
+const shadowHeader = () => {
+  const header = document.getElementById("header");
+  // When the scroll is greater than 50 viewport height, add the shadow-header class to the header tag
+  this.scrollY >= 50
+    ? header.classList.add("shadow-header")
+    : header.classList.remove("shadow-header");
+};
+window.addEventListener("scroll", shadowHeader);
+
+/*=============== HOME SWIPER ===============*/
+let swiperHome = new Swiper(".home__swiper", {
+  loop: true,
+  spaceBetween: -24,
+  grabCursor: true,
+  slidesPerView: "auto",
+  centeredSlides: "auto",
+
+  autoplay: {
+    delay: 3000,
+    disableOnInteraction: false,
+  },
+
+  breakpoints: {
+    1220: {
+      spaceBetween: -32,
+    },
+  },
+});
+
+/*=============== FEATURED SWIPER ===============*/
+let swiperFeatured = new Swiper(".featured__swiper", {
+  loop: true,
+  spaceBetween: 16,
+  grabCursor: true,
+  slidesPerView: "auto",
+  centeredSlides: "auto",
+
+  navigation: {
+    nextEl: ".swiper-button-next",
+    prevEl: ".swiper-button-prev",
+  },
+
+  breakpoints: {
+    1150: {
+      slidesPerView: 4,
+      centeredSlides: false,
+    },
+  },
+});
+
+/*=============== FEATURED ADD TO CART ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  const addToCartButtons = document.querySelectorAll(".featured__card .button");
+  const clearCartButton = document.getElementById("clearCart");
+  const checkoutButton = document.getElementById("checkOut");
+
+  addToCartButtons.forEach((button) => {
+    button.addEventListener("click", addToCartHandler);
+  });
+
+  clearCartButton.addEventListener("click", clearCartHandler);
+  checkoutButton.addEventListener("click", checkoutHandler);
+
+  updateCartUI();
+});
+
+function addToCartHandler(event) {
+  const featuredCard = event.target.closest(".featured__card");
+
+  const productName = featuredCard.querySelector(".featured__title").innerText;
+  const productPrice =
+    parseFloat(
+      featuredCard.querySelector(".featured__discount").dataset.price
+    ) || 0;
+
+  alert(`Đã thêm vào giỏ hàng: ${productName}`);
+
+  addToCart(productName, productPrice);
+
+  updateCartUI();
+}
+
+function addToCart(productName, productPrice) {
+  let cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
+
+  cartItems.push({ name: productName, price: productPrice });
+
+  localStorage.setItem("cartItems", JSON.stringify(cartItems));
+}
+
+function updateCartUI() {
+  const cartItemsContainer = document.getElementById("cartItemsContainer");
+  const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
+
+  cartItemsContainer.innerHTML = "";
+
+  cartItems.forEach((item) => {
+    const cartItemElement = document.createElement("div");
+    cartItemElement.innerText = `${item.name} - ${item.price} VND`;
+    cartItemsContainer.appendChild(cartItemElement);
+  });
+
+  const totalAmount = calculateTotalAmount(cartItems);
+  displayTotalAmount(totalAmount);
+}
+
+function calculateTotalAmount(cartItems) {
+  return cartItems.reduce((total, item) => total + item.price, 0);
+}
+
+function displayTotalAmount(amount) {
+  let totalAmountContainer = document.getElementById("totalAmountContainer");
+
+  if (!totalAmountContainer) {
+    totalAmountContainer = document.createElement("div");
+    totalAmountContainer.id = "totalAmountContainer";
+    const bagForm = document.querySelector(".bag__form");
+    bagForm.appendChild(totalAmountContainer);
+  }
+
+  totalAmountContainer.innerText = `Tổng cộng: ${amount} VND`;
+}
+
+function clearCartHandler() {
+  localStorage.removeItem("cartItems");
+
+  updateCartUI();
+}
+
+function checkoutHandler() {
+  alert("Đã thanh toán thành công!");
+
+  resetCart();
+
+  updateCartUI();
+}
+
+function resetCart() {
+  localStorage.removeItem("cartItems");
+}
+
+/*=============== NEW SWIPER ===============*/
+let swiperNew = new Swiper(".new__swiper", {
+  loop: false,
+  spaceBetween: 16,
+  slidesPerView: "auto",
+
+  breakpoints: {
+    1150: {
+      slidesPerView: 3,
+    },
+  },
+});
+
+/*=============== TESTIMONIAL SWIPER ===============*/
+let swiperTestimonial = new Swiper(".testimonial__swiper", {
+  loop: true,
+  spaceBetween: 16,
+  grabCursor: true,
+  slidesPerView: "auto",
+  centeredSlides: "auto",
+
+  breakpoints: {
+    1150: {
+      slidesPerView: 3,
+      centeredSlides: false,
+    },
+  },
+});
+
+/*=============== SHOW SCROLL UP ===============*/
+const scrollUp = () => {
+  const scrollUp = document.getElementById("scroll-up");
+  // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scrollup class
+  this.scrollY >= 350
+    ? scrollUp.classList.add("show-scroll")
+    : scrollUp.classList.remove("show-scroll");
+};
+window.addEventListener("scroll", scrollUp);
+
+/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
+const sections = document.querySelectorAll("section[id]");
+
+const scrollActive = () => {
+  const scrollDown = window.scrollY;
+
+  sections.forEach((current) => {
+    const sectionHeight = current.offsetHeight,
+      sectionTop = current.offsetTop - 58,
+      sectionId = current.getAttribute("id"),
+      sectionsClass = document.querySelector(
+        ".nav__menu a[href*=" + sectionId + "]"
+      );
+
+    if (scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight) {
+      sectionsClass.classList.add("active-link");
+    } else {
+      sectionsClass.classList.remove("active-link");
+    }
+  });
+};
+window.addEventListener("scroll", scrollActive);
+
+/*=============== DARK LIGHT THEME ===============*/
+const themeButton = document.getElementById("theme-button");
+const darkTheme = "dark-theme";
+const iconTheme = "ri-sun-line";
+
+// Previously selected topic (if user selected)
+const selectedTheme = localStorage.getItem("selected-theme");
+const selectedIcon = localStorage.getItem("selected-icon");
+
+// We obtain the current theme that the interface has by validating the dark-theme class
+const getCurrentTheme = () =>
+  document.body.classList.contains(darkTheme) ? "dark" : "light";
+const getCurrentIcon = () =>
+  themeButton.classList.contains(iconTheme) ? "ri-moon-line" : "ri-sun-line";
+
+// We validate if the user previously chose a topic
+if (selectedTheme) {
+  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
+  document.body.classList[selectedTheme === "dark" ? "add" : "remove"](
+    darkTheme
+  );
+  themeButton.classList[selectedIcon === "ri-moon-line" ? "add" : "remove"](
+    iconTheme
+  );
+}
+
+// Activate / deactivate the theme manually with the button
+themeButton.addEventListener("click", () => {
+  // Add or remove the dark / icon theme
+  document.body.classList.toggle(darkTheme);
+  themeButton.classList.toggle(iconTheme);
+  // We save the theme and the current icon that the user chose
+  localStorage.setItem("selected-theme", getCurrentTheme());
+  localStorage.setItem("selected-icon", getCurrentIcon());
+});
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+  origin: "top",
+  distance: "60px",
+  duration: 2500,
+  delay: 400,
+  // reset: true, // Animations repeat
+});
+
+sr.reveal(`.home__data, .featured__container, .new__container, 
+           .join__data, .testimonial__container, .footer`);
+sr.reveal(`.home__images`, { delay: 600 });
+sr.reveal(`.services__card`, { interval: 100 });
+sr.reveal(`.discount__data`, { origin: "left" });
+sr.reveal(`.discount__images`, { origin: "right" });
+
+/*=============== OPEN DETAIL TAB ===============*/
+function openDetailPage() {
+  // Đường dẫn tới trang detail.html
+  var detailPageURL = "product_detail.html";
+
+  // Mở tab mới
+  window.open(detailPageURL, "_blank");
+}
+
+/*================ CART ========================*/
+/*=============== FEATURED ADD TO CART ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  const addToCartButtons = document.querySelectorAll(".featured__card .button");
+  const clearCartButton = document.getElementById("clearCart");
+  const checkoutButton = document.getElementById("checkOut");
+
+  addToCartButtons.forEach((button) => {
+    button.addEventListener("click", addToCartHandler);
+  });
+
+  clearCartButton.addEventListener("click", clearCartHandler);
+  checkoutButton.addEventListener("click", checkoutHandler);
+
+  updateCartUI();
+});
+
+function addToCartHandler(event) {
+  const featuredCard = event.target.closest(".featured__card");
+
+  const productName = featuredCard.querySelector(".featured__title").innerText;
+  const productPrice =
+    parseFloat(
+      featuredCard.querySelector(".featured__discount").dataset.price
+    ) || 0;
+
+  alert(`Đã thêm vào giỏ hàng: ${productName}`);
+
+  addToCart(productName, productPrice);
+
+  updateCartUI();
+}
+
+function addToCart(productName, productPrice) {
+  let cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
+
+  cartItems.push({ name: productName, price: productPrice });
+
+  localStorage.setItem("cartItems", JSON.stringify(cartItems));
+}
+
+function updateCartUI() {
+  const cartItemsContainer = document.getElementById("cartItemsContainer");
+  const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
+
+  cartItemsContainer.innerHTML = "";
+
+  cartItems.forEach((item) => {
+    const cartItemElement = document.createElement("div");
+    cartItemElement.innerText = `${item.name} - ${item.price} VND`;
+    cartItemsContainer.appendChild(cartItemElement);
+  });
+
+  const totalAmount = calculateTotalAmount(cartItems);
+  displayTotalAmount(totalAmount);
+}
+
+function calculateTotalAmount(cartItems) {
+  return cartItems.reduce((total, item) => total + item.price, 0);
+}
+
+function displayTotalAmount(amount) {
+  let totalAmountContainer = document.getElementById("totalAmountContainer");
+
+  if (!totalAmountContainer) {
+    totalAmountContainer = document.createElement("div");
+    totalAmountContainer.id = "totalAmountContainer";
+    const bagForm = document.querySelector(".bag__form");
+    bagForm.appendChild(totalAmountContainer);
+  }
+
+  totalAmountContainer.innerText = `Tổng cộng: ${amount} VND`;
+}
+
+function clearCartHandler() {
+  localStorage.removeItem("cartItems");
+
+  updateCartUI();
+}
+
+function checkoutHandler() {
+  alert("Đã thanh toán thành công!");
+
+  resetCart();
+
+  updateCartUI();
+}
+
+function resetCart() {
+  localStorage.removeItem("cartItems");
+}

assets/js/scrollreveal.min.js

@@ -0,0 +1,12 @@
+/*! @license ScrollReveal v4.0.9
+
+	Copyright 2021 Fisssion LLC.
+
+	Licensed under the GNU General Public License 3.0 for
+	compatible open source projects and non-commercial use.
+
+	For commercial sites, themes, projects, and applications,
+	keep your source code private/proprietary by purchasing
+	a commercial license from https://scrollrevealjs.org/
+*/
+var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();

assets/scss/base/_base.scss

@@ -0,0 +1,49 @@
+/*=============== BASE ===============*/
+*{
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+html{
+	scroll-behavior: smooth;
+}
+
+body,
+input,
+button{
+	font-family: var(--body-font);
+	font-size: var(--normal-font-size);
+}
+
+body{
+	background-color: var(--body-color);
+	color: var(--text-color);
+	transition: background-color .4s;
+}
+
+input,
+button{
+	border: none;
+	outline: none;
+}
+
+h1,h2,h3,h4{
+	color: var(--title-color);
+	font-family: var(--second-font);
+	font-weight: var(--font-medium);
+}
+
+ul{
+	list-style: none;
+}
+
+a{
+	text-decoration: none;
+}
+
+img{
+	display: block;
+	max-width: 100%;
+	height: auto;
+}

assets/scss/components/_breakpoints.scss

@@ -0,0 +1,279 @@
+/*=============== BREAKPOINTS ===============*/
+/* For small devices */
+@media screen and (max-width: 320px){
+   .container{
+      margin-inline: 1rem;
+   }
+
+   .nav__menu{
+      padding-inline: 3rem;
+   }
+
+   .discount{
+      &__img-1,
+      &__img-2{
+         width: 140px;
+      }
+   }
+
+   .new__card{
+      flex-direction: column;
+   }
+
+   .testimonial__card{
+      padding-inline: 1rem;
+   }
+
+   .footer__data{
+      grid-template-columns: 1fr;
+      row-gap: 2rem;
+   }
+}
+
+/* For medium devices */
+@media screen and (min-width: 450px){
+   .featured__card{
+      width: 290px;
+   }
+
+   .new__card{
+      width: 390px;
+   }
+
+   .testimonial__card{
+      width: 320px;
+   }
+}
+
+@media screen and (min-width: 576px){
+   .search__form{
+      width: 500px;
+      margin-inline: auto;
+   }
+
+   .login__form{
+      width: 400px;
+      justify-self: center;
+   }
+
+   .search__close,
+   .login__close{
+      width: max-content;
+      top: 4rem;
+      left: 0;
+      right: 0;
+      margin-inline: auto;
+   }
+
+   .nav__menu{
+      width: 380px;
+      margin-inline: auto;
+   }
+
+   .home__container,
+   .discount__container{
+      grid-template-columns: 420px;
+      justify-content: center;
+   }
+
+   .join__form{
+      width: 328px;
+      justify-self: center;
+   }
+
+   .footer__data{
+      grid-template-columns: repeat(3, max-content);
+   }
+}
+
+@media screen and (min-width: 768px){
+   .home{
+      &__container{
+         grid-template-columns: 580px;
+      }
+      &__data{
+         width: 420px;
+         justify-self: center;
+      }
+   }
+
+   .services__container{
+      grid-template-columns: repeat(3, max-content);
+      justify-content: center;
+      column-gap: 5rem;
+   }
+
+   .footer__container{
+      grid-template-columns: repeat(2, max-content);
+      justify-content: space-between;
+   }
+}
+
+/* For large devices */
+@media screen and (min-width: 1150px){
+   .section{
+      padding-block: 7rem 2rem;
+   }
+
+   .nav{
+      height: calc(var(--header-height) + 2rem);
+      column-gap: 4rem;
+
+      &__link i{
+         display: none;
+      }
+      &__link span{
+         display: block;
+      }
+      &__menu{
+         width: initial;
+         margin-inline: auto 0;
+      }
+      &__list{
+         column-gap: 4rem;
+      }
+      &__link{
+         font-weight: var(--font-medium);
+      }
+   }
+
+   .dark-theme .nav__menu{
+      box-shadow: none;
+   }
+
+   .home__data{
+      width: initial;
+   }
+
+   .services{
+      &__container{
+         column-gap: 10rem;
+      }
+      &__card i{
+         font-size: 3.5rem;
+      }
+   }
+
+   .featured{
+      &__container{
+         padding-top: 2rem;
+      }
+      &__title{
+         font-size: var(--h3-font-size);
+      }
+   }
+
+   .discount{
+      &__container{
+         grid-template-columns: 615px 500px;
+         justify-content: space-between;
+         align-items: center;
+      }
+      &__data{
+         order: 1;
+      }
+      &__data,
+      &__title{
+         text-align: initial;
+      }
+      &__description{
+         margin-bottom: 3.5rem;
+      }
+      &__img-1,
+      &__img-2{
+         width: 300px;
+      }
+   }
+
+   .new{
+      &__container{
+         padding-top: 2rem;
+      }
+      &__card{
+         padding: 1.5rem;
+      }
+      &__img{
+         width: 120px;
+      }
+      &__title{
+         font-size: var(--h3-font-size);
+      }
+   }
+
+   .join__bg{
+      object-position: 0 -5rem;
+   }
+
+   .testimonial{
+      &__container{
+         padding-top: 2rem;
+      }
+      &__card{
+         padding-inline: 2rem;
+      }
+      &__title{
+         font-size: var(--h3-font-size);
+      }
+      &__description{
+         font-size: var(--normal-font-size);
+      }
+   }
+
+   .footer{
+      padding-block: 6rem 3rem;
+
+      &__data{
+         grid-template-columns: repeat(4, max-content);
+         column-gap: 4.5rem;
+      }
+      &__logo,
+      &__title{
+         font-size: var(--h2-font-size);
+         margin-bottom: 1.5rem;
+      }
+      &__links{
+         row-gap: 1rem;
+      }
+      &__social{
+         column-gap: 1.5rem;
+
+         &-link{
+            font-size: 1.5rem;
+         }
+      }
+      &__copy{
+         margin-top: 7.5rem;
+      }
+   }
+
+   .scrollup{
+      right: 3rem;
+   }
+   .show-scroll{
+      bottom: 3rem;
+   }
+}
+
+@media screen and (min-width: 1220px){
+   .container{
+      margin-inline: auto;
+   }
+
+   .home{
+      &__container{
+         grid-template-columns: 435px 745px;
+         align-items: center;
+         padding-block: 7rem 2rem;
+      }
+      &__data{
+         text-align: initial;
+      }
+      &__description{
+         margin-bottom: 4rem;
+      }
+      &__article,
+      &__img{
+         width: 290px;
+      }
+   }
+}

assets/scss/components/_button.scss

@@ -0,0 +1,13 @@
+/*=============== BUTTON ===============*/
+.button{
+   display: inline-block;
+   background-color: var(--first-color);
+   color: var(--white-color);
+   font-weight: var(--font-semi-bold);
+   padding: 1rem 1.5rem;
+   transition: box-shadow .4s;
+
+   &:hover{
+      box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4);
+   }
+}

assets/scss/components/_discount.scss

@@ -0,0 +1,29 @@
+/*=============== DISCOUNT ===============*/
+.discount{
+   &__container{
+      row-gap: 3.5rem;
+   }
+   &__data{
+      text-align: center;
+   }
+   &__title{
+      margin-bottom: 1rem;
+   }
+   &__description{
+      margin-bottom: 2rem;
+   }
+   &__images{
+      display: flex;
+      justify-content: center;
+   }
+   &__img-1,
+   &__img-2{
+      width: 170px;
+   }
+   &__img-1{
+      transform: translateX(1rem) rotate(-10deg);
+   }
+   &__img-2{
+      transform: translateX(-1rem) rotate(10deg);
+   }
+}

assets/scss/components/_featured.scss

@@ -0,0 +1,74 @@
+/*=============== FEATURED ===============*/
+.featured{
+   &__card{
+      position: relative;
+      text-align: center;
+      background-color: var(--container-color);
+      padding: 2rem;
+      overflow: hidden;
+      border: 2px solid var(--border-color);
+      transition: border .4s, background-color .4s;
+   }
+   &__img{
+      width: 150px;
+      margin: 0 auto .75rem;
+   }
+   &__title{
+      font-size: var(--h2-font-size);
+      margin-bottom: .5rem;
+   }
+   &__prices{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      column-gap: .75rem;
+      margin-bottom: 1.25rem;
+   }
+   &__discount{
+      color: var(--title-color);
+   }
+   &__price{
+      font-size: var(--small-font-size);
+      text-decoration: line-through;
+   }
+   &__card .button{
+      cursor: pointer;
+   }
+   &__actions{
+      display: inline-flex;
+      flex-direction: column;
+      row-gap: .75rem;
+      position: absolute;
+      top: 2rem;
+      right: -1.5rem;
+      transition: right .4s;
+
+      & button{
+         background: none;
+         font-size: 1.25rem;
+         color: var(--first-color);
+         cursor: pointer;
+      }
+   }
+   &__card:hover &__actions{
+      right: 1.5rem;
+   }
+}
+
+/* Swiper class */
+.swiper-button-prev::after,
+.swiper-button-next::after{
+   content: '';
+}
+
+.swiper-button-prev,
+.swiper-button-next{
+   width: initial;
+   height: initial;
+   background-color: var(--container-color);
+   border: 2px solid var(--border-color);
+   padding: .5rem;
+   font-size: 1.5rem;
+   color: var(--first-color);
+   transition: border .4s, background-color .4s;
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,59 @@
+/*=============== FOOTER ===============*/
+.footer{
+   padding-block: 4rem 6rem;
+
+   &__container{
+      row-gap: 3rem;
+   }
+   &__logo{
+      display: inline-flex;
+      align-items: center;
+      column-gap: .5rem;
+      color: var(--first-color);
+      font-size: var(--h3-font-size);
+      font-family: var(--second-font);
+      margin-bottom: 1.25rem;
+
+      & i{
+         font-size: 1.25rem;
+      }
+   }
+   &__data{
+      grid-template-columns: repeat(2, max-content);
+      gap: 3rem 2rem;
+   }
+   &__title{
+      font-size: var(--h3-font-size);
+      margin-bottom: 1.25rem;
+   }
+   &__links{
+      display: grid;
+      row-gap: .5rem;
+   }
+   &__link{
+      color: var(--text-color);
+      transition: color .4s;
+
+      &:hover{
+         color: var(--first-color);
+      }
+   }
+   &__info{
+      font-style: normal;
+   }
+   &__social{
+      display: flex;
+      column-gap: 1.25rem;
+
+      &-link{
+         font-size: 1.25rem;
+         color: var(--first-color);
+      }
+   }
+   &__copy{
+      display: block;
+      margin-top: 5rem;
+      text-align: center;
+      font-size: var(--small-font-size);
+   }
+}

assets/scss/components/_header.scss

@@ -0,0 +1,87 @@
+/*=============== HEADER & NAV ===============*/
+.header{
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   background-color: var(--body-color);
+   z-index: var(--z-fixed);
+   transition: box-shadow .4s, background-color .4s;
+}
+
+.nav{
+   height: var(--header-height);
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+
+   &__logo{
+      display: inline-flex;
+      align-items: center;
+      column-gap: .5rem;
+      color: var(--first-color);
+      font-weight: var(--font-medium);
+
+      & i{
+         font-size: 1.25rem;
+      }
+   }
+   // Navigation for mobile devices
+   @media screen and (max-width: 1150px){
+      &__menu{
+         position: fixed;
+         bottom: 0;
+         left: 0;
+         right: 0;
+         width: 100%;
+         background-color: var(--container-color);
+         box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .1);
+         padding: 1.25rem 4rem;
+         transition: background-color .4s;
+      }
+   }
+   &__list{
+      display: flex;
+      justify-content: space-between;
+   }
+   &__link{
+      color: var(--text-color);
+      transition: color .4s;
+      
+      & span{
+         display: none;
+      }
+      & i{
+         font-size: 1.25rem;
+      }
+      &:hover{
+         color: var(--first-color);
+      }
+   }
+   &__actions{
+      display: flex;
+      align-items: center;
+      column-gap: 1rem;
+
+      & i{
+         font-size: 1.25rem;
+	      color: var(--title-color);
+	      cursor: pointer;
+	      transition: color .4s;
+
+         &:hover{
+            color: var(--first-color);
+         }
+      }
+   }
+}
+
+/* Add shadow header */
+.shadow-header{
+   box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
+}
+
+/* Active link */
+.active-link{
+   color: var(--first-color);
+}

assets/scss/components/_home.scss

@@ -0,0 +1,37 @@
+/*=============== HOME ===============*/
+.home{
+   &__swiper{
+      margin: initial;
+   }
+   &__container{
+      padding-top: 2rem;
+      row-gap: 2.5rem;
+   }
+   &__data{
+      text-align: center;
+   }
+   &__title{
+      font-size: var(--biggest-font-size);
+      margin-bottom: 1rem;
+   }
+   &__description{
+      margin-bottom: 2rem;
+   }
+   &__images{
+      display: grid;
+   }
+   &__article,
+   &__img{
+      width: 220px;
+      transition: scale .4s;
+   }
+   &__article{
+      scale: .8;
+   }
+}
+
+/* Swiper class */
+.swiper-slide-active,
+.swiper-slide-duplicate-active{
+   scale: 1;
+}

assets/scss/components/_join.scss

@@ -0,0 +1,41 @@
+/*=============== JOIN ===============*/
+.join{
+   &__container{
+      position: relative;
+      padding-block: 3rem;
+   }
+   &__bg{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+   }
+   &__data{
+      position: relative;
+   }
+   &__title{
+      color: var(--white-color);
+
+   }
+   &__form{
+      display: grid;
+      row-gap: 1rem;
+   }
+   &__input{
+      padding: 1.25rem 1rem;
+      background-color: var(--body-color);
+      color: var(--title-color);
+      transition: background-color .4s;
+
+      &::placeholder{
+         color: var(--text-color);
+      }
+   }
+   &__button{
+      padding-block: 1.25rem;
+      cursor: pointer;
+   }
+}

assets/scss/components/_login.scss

@@ -0,0 +1,76 @@
+/*=============== LOGIN ===============*/
+.login{
+   position: fixed;
+   top: -100%;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   z-index: var(--z-fixed);
+   background-color: hsla(230, 62%, 96%, .6);
+   backdrop-filter: blur(16px);
+   align-items: center;
+   padding: 1.5rem;
+   text-align: center;
+   transition: top .4s;
+
+   &__form{
+      background-color: var(--container-color);
+      padding: 2rem 1.5rem;
+      border: 2px solid var(--border-color);
+      row-gap: 1.25rem;
+   }
+   &__title{
+      font-size: var(--h2-font-size);
+   }
+   &__group{
+      row-gap: 1.25rem;
+   }
+   &__label{
+      display: block;
+      text-align: initial;
+      color: var(--title-color);
+      font-weight: var(--font-medium);
+      margin-bottom: .25rem;
+   }
+   &__input{
+      width: 100%;
+      background-color: var(--container-color);
+      border: 2px solid var(--border-color);
+      padding: 1rem;
+      color: var(--text-color);
+   }
+   &__signup,
+   &__forgot{
+      display: block;
+      font-size: var(--small-font-size);
+   }
+   &__signup{
+      margin-bottom: .5rem;
+
+      & a{
+         color: var(--first-color);
+         font-weight: var(--font-medium);
+      }
+   }
+   &__forgot{
+      color: var(--first-color);
+      margin-bottom: 1.25rem;
+   }
+   &__button{
+      width: 100%;
+      cursor: pointer;
+   }
+   &__close{
+      position: absolute;
+      top: 2rem;
+      right: 2rem;
+      font-size: 2rem;
+      color: var(--title-color);
+      cursor: pointer;
+   }
+}
+
+/* Show login */
+.show-login{
+   top: 0;
+}

assets/scss/components/_new.scss

@@ -0,0 +1,43 @@
+/*=============== NEW ===============*/
+.new{
+   &__card{
+      display: flex;
+      align-items: center;
+      column-gap: 2.5rem;
+      background-color: var(--container-color);
+      padding: 1.5rem 1rem;
+      color: var(--text-color);
+      border: 2px solid var(--border-color);
+      transition: border .4s, background-color .4s;
+
+      &:hover{
+         border: 2px solid var(--text-color);
+      }
+   }
+   &__img{
+      width: 100px;
+   }
+   &__title{
+      font-size: var(--h2-font-size);
+      margin-bottom: .5rem;
+   }
+   &__prices{
+      display: flex;
+      align-items: center;
+      column-gap: .75rem;
+      margin-bottom: .75rem;
+   }
+   &__discount{
+      color: var(--title-color);
+   }
+   &__price{
+      font-size: var(--small-font-size);
+      text-decoration: line-through;
+   }
+   &__stars{
+      color: var(--first-color);
+   }
+   &__swiper:nth-child(1){
+      margin-bottom: 2rem;
+   }
+}

assets/scss/components/_scroll.scss

@@ -0,0 +1,39 @@
+/*=============== SCROLL BAR ===============*/
+::-webkit-scrollbar{
+   width: .6rem;
+   border-radius: .5rem;
+   background-color: hsl(230, 16%, 85%);
+   
+   &-thumb{
+      background-color: hsl(230, 16%, 65%);
+      border-radius: .5rem;
+
+      &:hover{
+         background-color: hsl(230, 16%, 55%);
+      }
+   }
+}
+
+/*=============== SCROLL UP ===============*/
+.scrollup {
+   position: fixed;
+   right: 1rem;
+   bottom: -50%;
+   background-color: var(--container-color);
+   box-shadow: 0 2px 8px hsla(0, 0%, 0%, .1);
+   display: inline-flex;
+   padding: 6px;
+   font-size: 1.25rem;
+   color: var(--title-color);
+   z-index: var(--z-tooltip);
+   transition: bottom .4s, transform .4s, background-color .4s;
+
+   &:hover{
+      transform: translateY(-.5rem);
+   }
+}
+
+/* Show Scroll Up */
+.show-scroll{
+   bottom: 6rem;
+}

assets/scss/components/_search.scss

@@ -0,0 +1,45 @@
+/*=============== SEARCH ===============*/
+.search{
+   position: fixed;
+   top: -100%;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   z-index: var(--z-fixed);
+   background-color: hsla(230, 62%, 96%, .6);
+   backdrop-filter: blur(16px);
+   padding: 8rem 1.5rem;
+   transition: top .4s;
+
+   &__form{
+      display: flex;
+      align-items: center;
+      column-gap: .5rem;
+      background-color: var(--container-color);
+      border: 2px solid var(--border-color);
+      padding-inline: 1rem;
+   }
+   &__icon{
+      font-size: 1.25rem;
+      color: var(--title-color);
+   }
+   &__input{
+      width: 100%;
+      padding-block: 1rem;
+      background-color: var(--container-color);
+      color: var(--text-color);
+   }
+   &__close{
+      position: absolute;
+      top: 2rem;
+      right: 2rem;
+      font-size: 2rem;
+      color: var(--title-color);
+      cursor: pointer;
+   }
+}
+
+/* Show search */
+.show-search{
+   top: 0;
+}

assets/scss/components/_services.scss

@@ -0,0 +1,20 @@
+/*=============== SERVICES ===============*/
+.services{
+   &__container{
+      row-gap: 3rem;
+   }
+   &__card{
+      text-align: center;
+
+      & i{
+         display: block;
+         font-size: 3rem;
+         color: var(--first-color);
+         margin-bottom: 1rem;
+      }
+   }
+   &__title{
+      font-size: var(--h3-font-size);
+      margin-bottom: .5rem;
+   }
+}

assets/scss/components/_testimonial.scss

@@ -0,0 +1,26 @@
+/*=============== TESTIMONIAL ===============*/
+.testimonial{
+   &__card{
+      text-align: center;
+      background-color: var(--container-color);
+      padding: 2rem 3rem 2.5rem;
+      border: 2px solid var(--border-color);
+      transition: border .4s, background-color .4s;
+   }
+   &__img{
+      width: 100px;
+      border-radius: 50%;
+      margin: 0 auto 1.5rem;
+   }
+   &__title{
+      font-size: var(--h2-font-size);
+      margin-bottom: .75rem;
+   }
+   &__description{
+      font-size: var(--small-font-size);
+      margin-bottom: 1.25rem;
+   }
+   &__stars{
+      color: var(--first-color);
+   }
+}

assets/scss/config/_variables.scss

@@ -0,0 +1,50 @@
+/*=============== GOOGLE FONTS ===============*/
+@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@500&family=Montserrat:wght@400;500;600&display=swap");
+
+/*=============== VARIABLES CSS ===============*/
+:root {
+  --header-height: 3.5rem;
+
+  /*========== Colors ==========*/
+  /*Color mode HSL(hue, saturation, lightness)*/
+  --first-color: #5e0011;
+  --title-color: hsl(230, 70%, 16%);
+  --text-color: hsl(230, 16%, 45%);
+  --border-color: #a67c87;
+  --white-color: hsl(0, 0%, 100%);
+  --body-color: #f2dce0;
+  --container-color: #f2c4d0;
+
+  /*========== Font and typography ==========*/
+  /*.5rem = 8px | 1rem = 16px ...*/
+  --body-font: "Montserrat", sans-serif;
+  --second-font: "Montagu Slab", serif;
+
+  --biggest-font-size: 2rem;
+  --h1-font-size: 1.5rem;
+  --h2-font-size: 1.25rem;
+  --h3-font-size: 1rem;
+  --normal-font-size: 0.938rem;
+  --small-font-size: 0.813rem;
+  --smaller-font-size: 0.75rem;
+
+  // Responsive typography
+  @media screen and (min-width: 1150px) {
+    --biggest-font-size: 3.5rem;
+    --h1-font-size: 2.25rem;
+    --h2-font-size: 1.5rem;
+    --h3-font-size: 1.25rem;
+    --normal-font-size: 1rem;
+    --small-font-size: 0.875rem;
+    --smaller-font-size: 0.813rem;
+  }
+
+  /*========== Font weight ==========*/
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semi-bold: 600;
+
+  /*========== z index ==========*/
+  --z-tooltip: 10;
+  --z-fixed: 100;
+}

assets/scss/layout/_layout.scss

@@ -0,0 +1,25 @@
+/*=============== REUSABLE CSS CLASSES ===============*/
+.container{
+   max-width: 1220px;
+   margin-inline: 1.5rem;
+}
+
+.grid{
+   display: grid;
+   gap: 1.5rem;
+}
+
+.section{
+   padding-block: 5rem 1rem;
+
+   &__title{
+      text-align: center;
+      font-size: var(--h1-font-size);
+      font-family: var(--second-font);
+      margin-bottom: 2rem;
+   }
+}
+
+.main{
+   overflow: hidden; /* For animation ScrollReveal */
+}

assets/scss/styles.scss

@@ -0,0 +1,18 @@
+@import 'config/variables';
+@import 'base/base';
+@import 'theme/theme';
+@import 'layout/layout';
+@import 'components/header';
+@import 'components/search';
+@import 'components/login';
+@import 'components/home';
+@import 'components/button';
+@import 'components/services';
+@import 'components/featured';
+@import 'components/discount';
+@import 'components/new';
+@import 'components/join';
+@import 'components/testimonial';
+@import 'components/footer';
+@import 'components/scroll';
+@import 'components/breakpoints';

assets/scss/theme/_theme.scss

@@ -0,0 +1,43 @@
+/*=============== THEME ===============*/
+
+/*========== Variables Dark theme ==========*/
+body.dark-theme{
+   --title-color: hsl(230, 48%, 85%);
+   --text-color: hsl(230, 16%, 70%);
+   --border-color: hsl(230, 12%, 18%);
+   --body-color: hsl(230, 12%, 8%);
+   --container-color: hsl(230, 12%, 12%);
+}
+
+/*========== 
+	Color changes in some parts of 
+	the website, in dark theme
+==========*/
+.dark-theme .shadow-header{
+	box-shadow: 0 2px 16px hsla(0, 0%, 0%, .4);
+}
+
+.dark-theme .nav__menu{
+	box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .4);
+}
+
+.dark-theme .scrollup{
+	box-shadow: 0 2px 8px hsla(0, 0%, 0%, .4);
+}
+
+.dark-theme .search,
+.dark-theme .login{
+	background-color: hsla(230, 12, 8, .6);
+}
+
+.dark-theme::-webkit-scrollbar{
+	background-color: hsl(230, 16%, 15%);
+	
+	&-thumb{
+		 background-color: hsl(230, 16%, 25%);
+		 
+		 &:hover{
+			  background-color: hsl(230, 16%, 35%);
+		 }
+	}
+}

index.html

@@ -1,19 +1,1890 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--=============== FAVICON ===============-->
+    <link
+      rel="shortcut icon"
+      href="assets/img/favicon.png"
+      type="image/x-icon"
+    />
+
+    <!--=============== REMIXICONS ===============-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
+    />
+
+    <!--=============== SWIPER CSS ===============-->
+    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
+
+    <!--=============== CSS ===============-->
+    <link rel="stylesheet" href="assets/css/styles.css" />
+
+    <title>ThuLieu Cosmetics Store</title>
+  </head>
+  <body>
+    <!--==================== HEADER ====================-->
+    <header class="header" id="header">
+      <nav class="nav container">
+        <a href="#" class="nav__logo">
+          <i class="ri-store-2-line"></i> ThuLieu Store
+        </a>
+
+        <div class="nav__menu">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a href="#home" class="nav__link active-link">
+                <i class="ri-home-line"></i>
+                <span>Trang chủ</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#featured" class="nav__link">
+                <i class="ri-fire-line"></i>
+                <span>Bán chạy</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#discount" class="nav__link">
+                <i class="ri-price-tag-3-line"></i>
+                <span>Khuyến mãi</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#new" class="nav__link">
+                <i class="ri-bookmark-line"></i>
+                <span>Hàng mới</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#testimonial" class="nav__link">
+                <i class="ri-message-3-line"></i>
+                <span>Đánh giá</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="nav__actions">
+          <!-- Search button -->
+          <i class="ri-search-line search-button" id="search-button"></i>
+
+          <!-- Login button -->
+          <i class="ri-user-line login-button" id="login-button"></i>
+
+          <!-- Shopping bag button -->
+          <i class="ri-shopping-bag-line bag-button" id="bag-button"></i>
+
+          <!-- Theme button -->
+          <i class="ri-moon-line change-theme" id="theme-button"></i>
+        </div>
+      </nav>
+    </header>
+
+    <!--==================== SEARCH ====================-->
+    <div class="search" id="search-content">
+      <form action="" class="search__form">
+        <i class="ri-search-line search__icon"></i>
+        <input
+          type="search"
+          placeholder="Nhập tên sản phẩm bạn muốn tìm..."
+          class="search__input"
+        />
+      </form>
+
+      <i class="ri-close-line search__close" id="search-close"></i>
+    </div>
+
+    <!--=============== SHOPPING BAG ===============-->
+    <div class="bag grid" id="bag-content">
+      <form action="" class="bag__form grid">
+        <h3 class="bag__title">Giỏ hàng của bạn</h3>
+
+        <div class="bag__group grid">
+          <div id="cartItemsContainer"></div>
+          <div id="totalAmountContainer"></div>
+          <button type="button" class="bag__button button" id="clearCart">
+            Reset giỏ hàng
+          </button>
+          <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>Tài khoản thụ hưởng: 0947.066.385</h4>
+            <h4>Nội dung: nguoimuahang_sanpham_ngaymuahang</h4>
+          </div>
+          <div class="bag__qr">
+            <img src="./assets/img/QR.png" alt="QR" />
+          </div>
+
+          <button type="submit" class="bag__button button" id="checkOut">
+            Thanh toán
+          </button>
+        </div>
+      </form>
+
+      <i class="ri-close-line bag__close" id="bag-close"></i>
+    </div>
+
+    <!--==================== LOGIN ====================-->
+    <div class="login grid" id="login-content">
+      <form action="" class="login__form grid">
+        <h3 class="login__title">Đăng nhập</h3>
+
+        <div class="login__group grid">
+          <div>
+            <label for="login-email" class="login__label">Email</label>
+            <input
+              type="email"
+              placeholder="Email của bạn"
+              id="login-email"
+              class="login__input"
+            />
+          </div>
+
+          <div>
+            <label for="login-pass" class="login__label">Mật khẩu</label>
+            <input
+              type="password"
+              placeholder="Mật khẩu của bạn"
+              id="login-pass"
+              class="login__input"
+            />
+          </div>
+        </div>
+
+        <div>
+          <span class="login__signup">
+            Bạn chưa có tài khoản? <a href="#">Đăng ký ngay</a>
+          </span>
+
+          <a href="#" class="login__forgot"> Quên mật khẩu </a>
+
+          <button type="submit" class="login__button button">Đăng nhập</button>
+        </div>
+      </form>
+
+      <i class="ri-close-line login__close" id="login-close"></i>
+    </div>
+
+    <!--==================== MAIN ====================-->
+    <main class="main">
+      <!--==================== HOME ====================-->
+      <section class="home section" id="home">
+        <div class="home__container container grid">
+          <div class="home__data">
+            <h1 class="home__title">
+              Tỏa sáng <br />
+              vẻ đẹp tự nhiên
+            </h1>
+
+            <p class="home__description">
+              Khám phá vẻ đẹp tự nhiên của bạn với bộ sưu tập mỹ phẩm đa dạng,
+              từ các thương hiệu uy tín hàng đầu, cùng với những ưu đãi đặc biệt
+              và trải nghiệm mua sắm tuyệt vời.
+            </p>
+
+            <a href="#" class="button">Khám phá ngay</a>
+          </div>
+
+          <div class="home__images">
+            <div class="home__swiper swiper">
+              <div class="swiper-wrapper">
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-1.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-2.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-3.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-4.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-5.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-6.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+
+                <article class="home__article swiper-slide">
+                  <img
+                    src="assets/img/home-book-7.png"
+                    alt="image"
+                    class="home__img"
+                  />
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!--==================== SERVICES ====================-->
+      <section class="services section">
+        <div class="services__container container grid">
+          <article class="services__card">
+            <i class="ri-truck-line"></i>
+            <h3 class="services__title">Miễn phí vận chuyển</h3>
+            <p class="services__description">Cho đơn hàng trên 500.000 ₫</p>
+          </article>
+
+          <article class="services__card">
+            <i class="ri-verified-badge-line"></i>
+            <h3 class="services__title">Sản phẩm chất lượng</h3>
+            <p class="services__description">Sản phẩm chính hãng 100%</p>
+          </article>
+
+          <article class="services__card">
+            <i class="ri-customer-service-2-line"></i>
+            <h3 class="services__title">Hỗ trợ 24/7</h3>
+            <p class="services__description">Chăm sóc khách hàng 24/7</p>
+          </article>
+        </div>
+      </section>
+
+      <!--==================== FEATURED ====================-->
+      <section class="featured section" id="featured">
+        <h2 class="section__title">Sản phẩm bán chạy</h2>
+
+        <div class="featured__container container">
+          <div class="featured__swiper swiper">
+            <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"
+                  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"
+                  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>
+            </div>
+
+            <div class="swiper-button-prev">
+              <i class="ri-arrow-left-s-line"></i>
+            </div>
+
+            <div class="swiper-button-next">
+              <i class="ri-arrow-right-s-line"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="featured__container container">
+          <div class="featured__swiper swiper">
+            <div class="swiper-wrapper">
+              <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>
+                </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>
+                </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>
+            </div>
+
+            <div class="swiper-button-prev">
+              <i class="ri-arrow-left-s-line"></i>
+            </div>
+
+            <div class="swiper-button-next">
+              <i class="ri-arrow-right-s-line"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="featured__container container">
+          <div class="featured__swiper swiper">
+            <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"
+                  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"
+                  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>
+            </div>
+
+            <div class="swiper-button-prev">
+              <i class="ri-arrow-left-s-line"></i>
+            </div>
+
+            <div class="swiper-button-next">
+              <i class="ri-arrow-right-s-line"></i>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!--==================== DISCOUNT ====================-->
+      <section class="discount section" id="discount">
+        <div class="discount__container container grid">
+          <div class="discount__data">
+            <h2 class="discount__title section__title">Giảm Giá Lên Đến 50%</h2>
+
+            <p class="discount__description">
+              Đừng bỏ lỡ cơ hội sở hữu những sản phẩm mỹ phẩm yêu thích với mức
+              giá ưu đãi tuyệt vời. Càng mua nhiều, càng tiết kiệm nhiều hơn.
+            </p>
+
+            <a href="#" class="button">Mua ngay</a>
+          </div>
+
+          <div class="discount__images">
+            <img
+              src="assets/img/home-book-3.png"
+              alt=""
+              class="discount__img-1"
+            />
+            <img
+              src="assets/img/home-book-4.png"
+              alt=""
+              class="discount__img-2"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!--==================== Mỹ Kphẩm mới về ====================-->
+      <section class="new section" id="new">
+        <h2 class="section__title">Hàng mới về</h2>
+
+        <div class="new__container container">
+          <div class="new__swiper swiper">
+            <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"
+                  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-4.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-5.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"
+                  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-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"
+                  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>
+            </div>
+          </div>
+
+          <div class="new__swiper swiper">
+            <div class="swiper-wrapper">
+              <a href="#" class="new__card swiper-slide">
+                <img
+                  src="assets/img/home-book-3.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-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"
+                  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-5.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-4.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"
+                  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-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>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!--==================== JOIN ====================-->
+      <section class="join section">
+        <div class="join__container">
+          <img src="assets/img/join-bg.jpg" alt="image" class="join__bg" />
+
+          <div class="join__data container grid">
+            <h2 class="join__title section__title">
+              Đăng ký để nhận thông báo <br />
+              về sản phẩm mới
+            </h2>
+
+            <form action="" class="join__form">
+              <input
+                type="email"
+                placeholder="Email của bạn"
+                class="join__input"
+              />
+              <button type="submit" class="join__button button">Đăng ký</button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <!--==================== TESTIMONIAL ====================-->
+      <section class="testimonial section" id="testimonial">
+        <h2 class="section__title">Phản hồi từ khách hàng</h2>
+
+        <div class="testimonial__container container">
+          <div class="testimonial__swiper swiper">
+            <div class="swiper-wrapper">
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-1.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Hồ Ngọc Hà</h2>
+                <p class="testimonial__description">
+                  Sản phẩm chính hãng, chất lượng tuyệt vời! Giao hàng nhanh
+                  chóng và đóng gói rất cẩn thận. Sẽ tiếp tục ủng hộ shop.
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-2.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Sơn Tùng M-TP</h2>
+                <p class="testimonial__description">
+                  Tư vấn rất nhiệt tình và chuyên nghiệp. Các cô tư vấn giúp
+                  mình chọn được sản phẩm phù hợp với da. Rất hài lòng!
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-3.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Châu Bùi</h2>
+                <p class="testimonial__description">
+                  Lần đầu mua online nhưng rất an tâm. Tư vấn tận tình, giao
+                  hàng đúng hẹn. Son môi mình mua màu đẹp lắm!
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-4.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Trấn Thành</h2>
+                <p class="testimonial__description">
+                  Shop gói hàng đẹp quá! Mua tặng bạn mà cảm giác như nhận quà
+                  cao cấp. Sản phẩm đúng như mô tả, rất ưng ý.
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!--==================== FOOTER ====================-->
+    <footer class="footer">
+      <div class="footer__container container grid">
+        <div>
+          <a href="#" class="footer__logo">
+            <i class="ri-store-2-line"></i> ThuLieu Store
+          </a>
+
+          <p class="footer__description">
+            Đồng hành cùng bạn trên<br />
+            hành trình khám phá<br />
+            vẻ đẹp tự nhiên<br />
+            và tự tin.
+          </p>
+        </div>
+
+        <div class="footer__data grid">
+          <div>
+            <h3 class="footer__title">Giới thiệu</h3>
+
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Giải thưởng</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">FAQs</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Chính sách bảo mật</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Điều khoản dịch vụ</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Về chúng tôi</h3>
+
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Tin tức</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Cộng đồng</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Đội ngũ của chúng tôi</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Trung tâm hỗ trợ</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Liên hệ</h3>
+
+            <ul class="footer__links">
+              <li>
+                <address class="footer__info">
+                  X. Phương Chiểu<br />
+                  TP. Hưng Yên, Hưng Yên
+                </address>
+              </li>
+
+              <li>
+                <address class="footer__info">
+                  dothulieu12@gmail.com <br />
+                  0947-066-385
+                </address>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Social</h3>
+
+            <div class="footer__social">
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-facebook-circle-line"></i>
+              </a>
+
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-instagram-line"></i>
+              </a>
+
+              <a
+                href="https://twitter.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-twitter-x-line"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <span class="footer__copy">
+        &#169; All Rights Reserved By ThuLieu Do
+      </span>
+    </footer>
+
+    <!--========== SCROLL UP ==========-->
+    <a href="#" class="scrollup" id="scroll-up">
+      <i class="ri-arrow-up-line"></i>
+    </a>
+
+    <!--=============== SCROLLREVEAL ===============-->
+    <script src="assets/js/scrollreveal.min.js"></script>
+
+    <!--=============== SWIPER JS ===============-->
+    <script src="assets/js/swiper-bundle.min.js"></script>
+
+    <!--=============== MAIN JS ===============-->
+    <script src="assets/js/main.js"></script>
+  </body>
+</html>

product_detail.html

@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--=============== FAVICON ===============-->
+    <link
+      rel="shortcut icon"
+      href="assets/img/favicon.png"
+      type="image/x-icon"
+    />
+
+    <!--=============== REMIXICONS ===============-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
+    />
+
+    <!--=============== SWIPER CSS ===============-->
+    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
+
+    <!--=============== CSS ===============-->
+    <link rel="stylesheet" href="assets/css/styles.css" />
+
+    <title>ThuLieu Cosmetics Store</title>
+  </head>
+  <body>
+    <!--==================== HEADER ====================-->
+    <header class="header" id="header">
+      <nav class="nav container">
+        <a href="#" class="nav__logo">
+          <i class="ri-store-2-line"></i> ThuLieu Store
+        </a>
+
+        <div class="nav__menu">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a href="#home" class="nav__link active-link">
+                <i class="ri-home-line"></i>
+                <span>Trang chủ</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#featured" class="nav__link">
+                <i class="ri-fire-line"></i>
+                <span>Bán chạy</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#discount" class="nav__link">
+                <i class="ri-price-tag-3-line"></i>
+                <span>Khuyến mãi</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#new" class="nav__link">
+                <i class="ri-bookmark-line"></i>
+                <span>Hàng mới</span>
+              </a>
+            </li>
+
+            <li class="nav__item">
+              <a href="#testimonial" class="nav__link">
+                <i class="ri-message-3-line"></i>
+                <span>Đánh giá</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="nav__actions">
+          <!-- Search button -->
+          <i class="ri-search-line search-button" id="search-button"></i>
+
+          <!-- Login button -->
+          <i class="ri-user-line login-button" id="login-button"></i>
+
+          <!-- Shopping bag button -->
+          <i class="ri-shopping-bag-line bag-button" id="bag-button"></i>
+
+          <!-- Theme button -->
+          <i class="ri-moon-line change-theme" id="theme-button"></i>
+        </div>
+      </nav>
+    </header>
+
+    <!--==================== SEARCH ====================-->
+    <div class="search" id="search-content">
+      <form action="" class="search__form">
+        <i class="ri-search-line search__icon"></i>
+        <input
+          type="search"
+          placeholder="Nhập tên sản phẩm bạn muốn tìm..."
+          class="search__input"
+        />
+      </form>
+
+      <i class="ri-close-line search__close" id="search-close"></i>
+    </div>
+
+    <!--=============== SHOPPING BAG ===============-->
+    <div class="bag grid" id="bag-content">
+      <form action="" class="bag__form grid">
+        <h3 class="bag__title">Giỏ hàng của bạn</h3>
+
+        <div class="bag__group grid">
+          <div id="cartItemsContainer"></div>
+          <div id="totalAmountContainer"></div>
+          <button type="button" class="bag__button button" id="clearCart">
+            Reset giỏ hàng
+          </button>
+          <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>Tài khoản thụ hưởng: 0947.066.385</h4>
+            <h4>Nội dung: nguoimuahang_sanpham_ngaymuahang</h4>
+          </div>
+          <div>
+            <img src="./assets/img/QR.png" alt="QR" />
+          </div>
+
+          <button type="submit" class="bag__button button" id="clearCart">
+            Thanh toán
+          </button>
+        </div>
+      </form>
+
+      <i class="ri-close-line bag__close" id="bag-close"></i>
+    </div>
+
+    <!--==================== LOGIN ====================-->
+    <div class="login grid" id="login-content">
+      <form action="" class="login__form grid">
+        <h3 class="login__title">Đăng nhập</h3>
+
+        <div class="login__group grid">
+          <div>
+            <label for="login-email" class="login__label">Email</label>
+            <input
+              type="email"
+              placeholder="Email của bạn"
+              id="login-email"
+              class="login__input"
+            />
+          </div>
+
+          <div>
+            <label for="login-pass" class="login__label">Mật khẩu</label>
+            <input
+              type="password"
+              placeholder="Mật khẩu của bạn"
+              id="login-pass"
+              class="login__input"
+            />
+          </div>
+        </div>
+
+        <div>
+          <span class="login__signup">
+            Bạn chưa có tài khoản? <a href="#">Đăng ký ngay</a>
+          </span>
+
+          <a href="#" class="login__forgot"> Quên mật khẩu </a>
+
+          <button type="submit" class="login__button button">Đăng nhập</button>
+        </div>
+      </form>
+
+      <i class="ri-close-line login__close" id="login-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" />
+          </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>
+          </div>
+        </div>
+
+        <div class="product__add2cart"></div>
+      </section>
+      <!--==================== JOIN ====================-->
+      <section class="join section">
+        <div class="join__container">
+          <img src="assets/img/join-bg.jpg" alt="image" class="join__bg" />
+
+          <div class="join__data container grid">
+            <h2 class="join__title section__title">
+              Đăng ký để nhận thông báo <br />
+              về sản phẩm mới
+            </h2>
+
+            <form action="" class="join__form">
+              <input
+                type="email"
+                placeholder="Email của bạn"
+                class="join__input"
+              />
+              <button type="submit" class="join__button button">Đăng ký</button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <!--==================== TESTIMONIAL ====================-->
+      <section class="testimonial section" id="testimonial">
+        <h2 class="section__title">Phản hồi từ khách hàng</h2>
+
+        <div class="testimonial__container container">
+          <div class="testimonial__swiper swiper">
+            <div class="swiper-wrapper">
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-1.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Hồ Ngọc Hà</h2>
+                <p class="testimonial__description">
+                  Sản phẩm chính hãng, chất lượng tuyệt vời! Giao hàng nhanh
+                  chóng và đóng gói rất cẩn thận. Sẽ tiếp tục ủng hộ shop.
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-2.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Sơn Tùng M-TP</h2>
+                <p class="testimonial__description">
+                  Tư vấn rất nhiệt tình và chuyên nghiệp. Các cô tư vấn giúp
+                  mình chọn được sản phẩm phù hợp với da. Rất hài lòng!
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-3.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Châu Bùi</h2>
+                <p class="testimonial__description">
+                  Lần đầu mua online nhưng rất an tâm. Tư vấn tận tình, giao
+                  hàng đúng hẹn. Son môi mình mua màu đẹp lắm!
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+
+              <article class="testimonial__card swiper-slide">
+                <img
+                  src="assets/img/testimonial-perfil-4.png"
+                  alt="img"
+                  class="testimonial__img"
+                />
+
+                <h2 class="testimonial__title">Trấn Thành</h2>
+                <p class="testimonial__description">
+                  Shop gói hàng đẹp quá! Mua tặng bạn mà cảm giác như nhận quà
+                  cao cấp. Sản phẩm đúng như mô tả, rất ưng ý.
+                </p>
+
+                <div class="testimonial__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>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!--==================== FOOTER ====================-->
+    <footer class="footer">
+      <div class="footer__container container grid">
+        <div>
+          <a href="#" class="footer__logo">
+            <i class="ri-store-2-line"></i> ThuLieu Store
+          </a>
+
+          <p class="footer__description">
+            Đồng hành cùng bạn trên<br />
+            hành trình khám phá<br />
+            vẻ đẹp tự nhiên<br />
+            và tự tin.
+          </p>
+        </div>
+
+        <div class="footer__data grid">
+          <div>
+            <h3 class="footer__title">Giới thiệu</h3>
+
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Giải thưởng</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">FAQs</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Chính sách bảo mật</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Điều khoản dịch vụ</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Về chúng tôi</h3>
+
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Tin tức</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Cộng đồng</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Đội ngũ của chúng tôi</a>
+              </li>
+
+              <li>
+                <a href="#" class="footer__link">Trung tâm hỗ trợ</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Liên hệ</h3>
+
+            <ul class="footer__links">
+              <li>
+                <address class="footer__info">
+                  X. Phương Chiểu<br />
+                  TP. Hưng Yên, Hưng Yên
+                </address>
+              </li>
+
+              <li>
+                <address class="footer__info">
+                  dothulieu12@gmail.com <br />
+                  0947-066-385
+                </address>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Social</h3>
+
+            <div class="footer__social">
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-facebook-circle-line"></i>
+              </a>
+
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-instagram-line"></i>
+              </a>
+
+              <a
+                href="https://twitter.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-twitter-x-line"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <span class="footer__copy">
+        &#169; All Rights Reserved By ThuLieu Do
+      </span>
+    </footer>
+
+    <!--========== SCROLL UP ==========-->
+    <a href="#" class="scrollup" id="scroll-up">
+      <i class="ri-arrow-up-line"></i>
+    </a>
+
+    <!--=============== SCROLLREVEAL ===============-->
+    <script src="assets/js/scrollreveal.min.js"></script>
+
+    <!--=============== SWIPER JS ===============-->
+    <script src="assets/js/swiper-bundle.min.js"></script>
+
+    <!--=============== MAIN JS ===============-->
+    <script src="assets/js/main.js"></script>
+  </body>
+</html>