:root {
  --color-primary: rgba(18, 18, 18, 1);
  --color-second-primary: rgba(180, 180, 180, 1);
  --color-primary-value: 18, 18, 18;
  --color-primary-light: rgba(250, 250, 250, 1);
  --color-primary-text: #1f1c17;
  --color-accent: rgba(178, 14, 14, 1);
  --color-icon-hidden: rgb(220, 220, 220, 1);

  --color-announcement: rgba(31, 28, 23, 1);

  --color-text-main: #1f1c17;
  --color-text-secondary: #ffffff;

  --color-notification-bg: #333333;
  --color-notification-text: #ffffff;

  --color-hover: rgba(51, 51, 51, 1);
  --color-hover-light: rgba(180, 180, 180, 1);
  --color-active: rgba(178, 14, 14, 1);

  --color-border: #e0e0e0;

  --color-button-text: #1f1c17;
  --color-icon: #1f1c17;

  --color-background: #f7f3ed;
  --color-white: #ffffff;
  --color-black: #000000;

  --h-announcement: 2.8125rem;
  --h-nav: 5.375rem;
}

@import url("../font/font.css");

html {
  font-size: calc((1vw + 1vh) / 2);
}

@media (max-width: 1200px) {
  html {
    font-size: 0.9375rem;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 0.875rem;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 1rem;
  font-family: Nunito;
  font-weight: 400;
  line-height: 1.5;
  background-color: var(--color-primary-light);
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.font-nunito {
  font-family: Nunito;
}

.font-vollkorn {
  font-family: "Vollkorn";
}

.font-barlow {
  font-family: Barlow;
}

.font-barlow-condensed {
  font-family: Barlow Condensed;
}

.font-barlow-semi-condensed {
  font-family: Barlow Semi Condensed;
}

.font-cormorant-garamond {
  font-family: Cormorant Garamond;
}

.text-10 {
  font-size: 0.625rem;
}

.text-32 {
  font-size: 2rem;
  line-height: 1.375;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.fs-16 {
  font-size: 1rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-30 {
  font-size: 1.875rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.text-color-white {
  color: var(--color-white);
}

.text-color-primary {
  color: var(--color-primary);
}

.mt-header {
  margin-top: 7.875rem;
}

NaNrem-base {
  padding: 0 6.875rem;
}

/* Đặt nền cho thanh thông báo */
.bg-dark {
  background-color: var(--color-primary) !important;
}

a {
  color: var(--color-primary-light);
}

p {
  margin: 0;
}

.hr-primamry {
  border-top: 0.0625rem solid var(--color-primary);
}

.hr-accent {
  border-top: 0.0625rem solid var(--color-accent);
}

.title-section {
  font-family: "Barlow Condensed";
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

header {
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9000;
}

.announcement {
  background-color: var(--color-primary-light);
  font-size: 0.875rem;
  height: var(--h-announcement);
}

.announcement__link {
  color: var(--color-primary-text);
  position: relative;
  text-decoration: none;
}

/* Hiệu ứng gạch chân tùy chỉnh */
.announcement__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.0625rem;
  background-color: var(--color-primary-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.announcement__link:hover::after {
  transform: scaleX(1);
}

.icon-plus {
  font-size: 1rem;
}

/* Main Navbar */
.main-navbar {
  height: var(--h-nav);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  width: 100%;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: var(--color-primary-light);
  border: 0.0625rem;
}

/* Main Menu */
.main-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-color: rgba(237, 224, 204, 1);
  border-bottom-width: 0.0313rem;
}

.main-menu-component {
  margin: 0 6.875rem;
}

/* Left Section */
/* .main-menu__left {
  display: flex;
  align-items: center;
  margin-left: 6.875rem;
} */

/* Center Section (Logo) */
.main-menu__center {
  width: 100%;
  position: absolute;
  justify-content: center;
  margin: 0;
}

/* Right Section */
/* .main-menu__right {
  display: flex;
  align-items: center;
  margin-right: 6.875rem;
} */

.logo-link {
  position: relative;
  display: block;
  width: 9.375rem;
  height: 5.375rem;
}

.logo {
  position: absolute;
  width: 110%;
  padding-top: calc(86 / 150 * 100%);
  object-fit: cover;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(41deg) brightness(102%)
    contrast(103%);
}

.icon-search-container {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}

.icon-search {
  font-size: 1rem;
  color: var(--color-primary-text);
  cursor: pointer;
  text-decoration: none;
  margin: 0 1rem;
  position: relative;
  display: inline-block;
}

.nav-link {
  font-size: 1rem;
  color: var(--color-primary-text);
  cursor: pointer;
  text-decoration: none;
  margin: 0 1rem;
  position: relative;
  display: inline-block;
}

/* Hiệu ứng gạch chân tùy chỉnh */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.0625rem;
  background-color: var(--color-white);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* Slider */
.slider-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: block;
  unicode-bidi: isolate;
  background-color: var(--color-primary);
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
}

.slide {
  overflow: hidden;
  align-items: center;
}

.image-block {
  position: relative;
  height: 100vh;
  width: 100%;
}

.image-block .object-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-block {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem;
}

.text-box {
  position: relative;
  width: 100%;
  max-width: 80%;
}

.subtitle {
  font-size: 2rem;
  text-transform: uppercase;
}

.slide-title {
  font-size: 3.5rem;
  margin-top: 0.5rem;
  line-height: normal;
}

.slide-description {
  font-size: 1rem;
  margin-top: 1.5rem;
  line-height: 1.5;
}

.custom-button-fill,
.custom-button-border {
  width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 1.6875rem;
  height: calc(400 / 70 * 100%);
  max-height: 4.375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.25rem;
  margin: 2.5rem 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-button-fill {
  overflow: hidden;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 1rem;
}

.custom-button-border {
  overflow: hidden;
  background-color: transparent;
  color: var(--color-primary-text);
  border: 0.0625rem solid var(--color-hover);
  font-size: 1rem;
}

.custom-button-fill:hover {
  background-color: var(--color-hover);
}

.button-icon {
  max-width: 1.5rem;
  display: inline-block;
  transition: transform 0.3s ease;
}

.button-icon img {
  width: 100%;
  filter: brightness(0) saturate(100%) invert(100%) sepia(13%) saturate(4567%) hue-rotate(190deg) brightness(107%)
    contrast(107%);
}

.custom-button-fill:hover .button-icon {
  transform: translateX(0.3125rem);
}

.dots-container {
  margin-top: 2.5rem;
  left: 0;
}

.dots-container .flex {
  list-style: none;
  display: flex;
  justify-content: left;
  margin: 0;
  padding: 0;
}

.dots {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  border-radius: 50%;
  margin-right: 1.875rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dots.active {
  background-color: var(--color-accent);
}

/* Navigation Buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.625rem;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.slider-section:hover .nav-btn {
  opacity: 1;
}

.prev-btn {
  width: 4rem;
  height: 5rem;
  left: 0;
  transform: translateX(-100%);
  border-radius: 0 0.5rem 0.5rem 0;
}

.next-btn {
  width: 4rem;
  height: 5rem;
  right: 0;
  transform: translateX(100%);
  border-radius: 0.5rem 0 0 0.5rem;
}

.slider-section:hover .prev-btn {
  transform: translateX(0%);
}

.slider-section:hover .next-btn {
  transform: translateX(0%);
}

/* News css */

.news-section {
  display: block;
  unicode-bidi: isolate;
  background-color: var(--color-white);
  color: var(--color-primary-text);
  padding: 6.875rem;
}

.news-content {
  margin-top: 5rem;
}

.news-content .news-content-component {
  opacity: 1;
  transform: translateY(1.875rem);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.news-content .news-content-component.visible {
  opacity: 1;
  margin: 5.625rem 0;
  transform: translateY(0);
}

.news-text-block {
  align-items: center;
}

.news-text-block .news-title {
  font-family: "Vollkorn", serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.news-text-block .news-description {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 2rem;
}

.news-image {
  padding: 0 3rem;
}

.custom-button-border .button-icon {
  transition: transform 0.3s ease;
}

.custom-button-border:hover {
  background-color: var(--color-hover);
  color: var(--color-white);
}

.custom-button-border:hover .button-icon {
  transform: translateX(0.3125rem);
}

.program-image {
  width: 100%;
  height: auto;
  max-height: 47.9375rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* ****************** */

.brand-box {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-color: var(--color-primary);
  padding: 5.625rem;
}

.brand-text-box {
  width: 100%;
  height: calc(847 / 467 * 100);
  max-width: 52.9375rem;
  background-color: var(--color-white);
  border-radius: 0.375rem;
  padding: 3.125rem;
}

.textbox__heading {
  font-size: 4.5rem;
  line-height: 1.125;
  text-align: center;
}

.textbox__description {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.375;
  margin-top: 1rem;
  padding: 0 2.875rem;
}

.brand-box .textbox__certifications {
  padding: 0 3.125rem;
}

.brand-box .textbox__certifications > li {
  margin-right: 0.665rem;
  margin-top: 0.665rem;
}

.brand-box .textbox__certifications > li > img {
  width: 3.5469rem;
  height: 3.5469rem;
}

.scrolling-image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 16.875rem;
}

.scrolling-images {
  display: flex;
  width: calc(400%);
  height: 100%;
  animation: scroll-horizontal 40s linear infinite;
}

.scrolling-images img {
  height: 100%;
  width: auto;
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Best Seller */
.product-main {
  padding: 6.875rem;
}
.product-container {
  overflow: hidden;
}

.best-seller-section {
  overflow: hidden;
  background-color: var(--color-white);
  padding: 3.125rem 0;
}

.best-seller-text h3 {
  font-size: 1.5rem;
  font-style: italic;
}

.best-seller-text span {
  font-weight: bold;
}

.text-best-seller {
  padding-right: 4.375rem;
}

.text-best-seller h3 {
  font-size: 5rem;
}
.text-best-seller p {
  font-size: 1rem;
}

.product-content {
  overflow: hidden;
  padding: 0;
}

.slick-track {
  margin: unset;
}

.product-item {
  margin: 0 1rem;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

.image-common {
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
  padding-top: calc(531 / 436 * 100%);
  height: calc(436 / 531 * 100%);
}

.image-common:hover .image-item:first-child {
  opacity: 0;
}

.image-common .image-item {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 0.8s ease;
}

.image-common .image-item:first-child {
  z-index: 2;
}

.product-list-component .product-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-top: 0.625rem;
}

.product-list-component .product-detail {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.625rem;
}

.product-list-component .product-price {
  font-size: 1rem;
  font-weight: bold;
  color: #e74c3c;
  margin-top: 0.625rem;
}

.product-prev-btn,
.product-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7vw;
  height: 7vw;
  max-width: 4.375rem;
  max-height: 4.375rem;
  background-color: var(--color-primary);
  border: none;
  font-size: 1.5vw;
  color: var(--color-white);
  cursor: pointer;
  z-index: 2;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.product-prev-btn {
  left: -5rem;
  transform: translateY(-50%);
  border-radius: 0 0.5rem 0.5rem 0;
}

.product-next-btn {
  right: -5rem;
  transform: translateY(-50%);
  border-radius: 0.5rem 0 0 0.5rem;
}

.product-content:hover .product-prev-btn {
  opacity: 1;
  transform: translateY(-50%) translateX(5rem);
}

.product-content:hover .product-next-btn {
  opacity: 1;
  transform: translateY(-50%) translateX(-5rem);
}

.product-prev-btn.active {
  opacity: 1;
  transform: translateY(-50%) translateX(5rem);
}

.product-next-btn.active {
  opacity: 1;
  transform: translateY(-50%) translateX(-5rem);
}

/* Custom scrollbar */
.slick-scrollbar {
  left: 0;
  right: 0;
  height: 0.375rem;
  background-color: #dcdcdc;
  border-radius: 0.1875rem;
  margin-top: 6.875rem;
}

.slick-scrollbar__track {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #dcdcdc;
}

.slick-scrollbar__dot {
  position: absolute;
  height: 100%;
  width: 25%;
  background-color: #333;
  transition: left 0.3s ease;
  border-radius: 0.1875rem;
}

.btn-cart {
  width: 4.375rem;
  height: 4.375rem;
  padding: 1.25rem;
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn-cart:hover {
  background-color: var(--color-hover);
}

.btn-cart img {
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(41deg) brightness(102%)
    contrast(103%);
}

.program-section {
  padding: 6.875rem;
}

.program-container {
  width: 100%;
  max-width: 113.1875rem;
  height: calc(767 / 1811 * 100%);
  position: relative;
  overflow: hidden;
}

.program-banner {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FOOTER */
.footer-section {
  background-color: var(--color-primary-light);
}

.footer-container {
  overflow: hidden;
}

.footer-image {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.footer-image img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-info {
  background-color: #fff;
  padding: 0;
}

.footer-content {
  padding: 3.75rem 10rem;
}

.footer-top h3 {
  font-size: 3.375rem;
  margin-bottom: 0.625rem;
}

.email-form {
  display: flex;
  align-items: center;
  border-bottom: 0.0625rem solid var(--color-primary);
  height: 3.125rem;
  margin: 0 0 0.625rem;
}

.email-form input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1rem;
  color: var(--color-text-main);
  background-color: transparent;
}

.email-form input::placeholder {
  color: var(--color-text-main);
}

.email-form span {
  color: var(--color-primary);
  font-size: 1.125rem;
  cursor: pointer;
  padding-right: 0.3125rem;
}

.email-form:hover .button-icon {
  transform: translateX(0.3125rem);
}

.footer-links {
  margin-top: 5rem;
}

.footer-column {
  margin-bottom: 1.25rem;
}

.footer-column h5 {
  font-weight: bold;
  margin-bottom: 0.625rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 0.3125rem;
  color: var(--color-primary);
}

.footer-bottom {
  height: 100%;
  background-color: var(--color-primary);
  color: #fff;
  padding: 3.125rem 10rem;
}

.footer-bottom h1 {
  font-size: 1.5rem;
}

.footer-bottom p {
  font-size: 1.125rem;
  margin: 0.9375rem 0 0;
}

.copy-right {
  color: var(--color-primary-light);
}

.underline-hover {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  padding-bottom: 0;
}
.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.0625rem;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}
.underline-hover:hover::after {
  width: 100%;
}

.underline-dark-hover {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  padding-bottom: 0;
}
.underline-dark-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.0625rem;
  background-color: var(--color-white);
  transition: width 0.3s ease;
}
.underline-dark-hover:hover::after {
  width: 100%;
}

.object-contain {
  width: 8.25rem;
  height: 3.125rem;
}

/* Product Detail */
.product-info-section {
  padding: 6rem 12rem;
}

.slide-product {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0.5rem;
}

.thumbnail-image {
  position: relative;
  width: 100%;
  padding-top: calc(800 / 692 * 100%);
}

.thumbnail-image img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Hiển thị ảnh đầu tiên trong slider */
.product-image:first-child {
  opacity: 1;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(100%); /* Đặt vị trí ngoài phạm vi ban đầu */
  z-index: 10;
  width: 4.375rem;
  height: 4.375rem;
  background-color: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0; /* Ẩn nút ban đầu */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Hiệu ứng trượt */
}

.slick-prev {
  left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

.slick-next {
  right: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}

/* Hiển thị nút và trượt vào vị trí khi hover vào slider */
.slide-product:hover .slick-prev {
  opacity: 1;
  transform: translateY(-50%) translateX(0); /* Trượt vào vị trí bên trái */
}

.slide-product:hover .slick-next {
  opacity: 1;
  transform: translateY(-50%) translateX(0); /* Trượt vào vị trí bên phải */
}

.slick-prev i,
.slick-next i {
  font-size: 1.25rem;
}

.slick-prev i:hover,
.slick-next i:hover {
  color: var(--color-white);
}

.slick-prev:before,
.slick-next:before {
  content: none;
}

.slick-dots {
  bottom: 1.25rem;
}
.slick-dots li button::before {
  color: #fff;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

.slick-list {
  padding: 0 !important;
}

.product-info {
  padding: 5.625rem 6.875rem;
}

.category-title {
  font-size: 1rem;
  color: var(--color-accent);
}

.product-name {
  margin: 1.875rem 0 0;
  font-size: 1.875rem;
}

.product-price {
  margin: 1rem 0 0;
  font-size: 1.25rem;
}

.product-detail {
  margin: 1rem 0 0;
  font-size: 1rem;
}

.product-fit p {
  margin: 0;
}

.share-text {
  margin-right: 1rem;
}

.social-icon i {
  color: var(--color-icon-hidden);
}

.social-icon i:hover {
  color: var(--color-primary);
}

.depth-detail-selection {
  background-color: var(--color-primary);
}

.depth-container {
  overflow: hidden;
  color: var(--color-white);
}

.additional-information {
  padding: 7.5rem 8.75rem;
}

.additional-information .content .description {
  overflow: hidden;
  font-size: 1.5rem;
  transition: height 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
  height: 10rem;
}

.additional-information .content .description.open {
  max-width: 62.5rem;
}

.shortcut {
  margin-top: 1.625rem;
}

.product-description-selection {
  position: relative;
}

.depth-container .object-cover {
  position: relative;
  padding-top: calc(600 / 600 * 100%);
  width: 100%;
  height: 100%;
}

.depth-container .object-cover img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-description-container {
  overflow: hidden;
  background-color: var(--color-primary-light);
}

.product-description-container .object-cover {
  position: relative;
  padding-top: calc(600 / 600 * 100%);
  width: 100%;
  height: 100%;
}

.product-description-container .object-cover img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-components {
  padding: 0 8.75rem;
  height: 100%;
  max-height: 45rem;
  align-content: center;
}

.info-components {
  margin-top: 0.9375rem;
}

.info-components span i {
  color: var(--color-accent);
}

.title-header {
  margin: 0 0 1.25rem;
  color: var(--color-accent);
}

.text-typo-header {
  font-size: 1.25rem;
}

.text-typo-body {
  margin: 0.625rem 0 1.5rem;
}

.product-sidebar {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
}

.product-sidebar.open {
  left: 0;
}

.product-sidebar .sidebar-content {
  padding: 6.875rem 13.75rem;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(118, 115, 111, 0.7);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.product-overlay.open {
  opacity: 1;
  visibility: visible;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.close-btn i {
  color: var(--color-accent);
}

.product-detail-component {
  margin-top: 1rem;
}

.review-section {
  padding: 5.625rem 6.875rem;
}

.review-section .title {
  margin-bottom: 1.875rem;
}

.btn-action {
  width: 100%;
  height: calc(400 / 70 * 100%);
  max-width: 25rem;
}

.review-section .custom-button-fill {
  margin: 0;
}

.review-section .hr-primary {
  margin-top: 5.625rem;
}

.qa-box-section {
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  padding: 5.625rem;
}

.contact-box-section {
  background-color: var(--color-primary);
  height: 100%;
  width: 100%;
  margin-top: 5rem;
  padding: 6.875rem;
}

.contact-box-section .contact-title {
  font-size: 3rem;
  text-align: center;
  color: var(--color-white);
  max-width: 56rem;
}

.contact-box-section .custom-button-fill {
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 1.5rem;
}

.contact-box-section .custom-button-fill:hover {
  background-color: var(--color-hover-light);
}

.brand-story-section {
  margin-top: calc(var(--h-nav) + var(--h-announcement));
  padding: 6rem 8rem;
  background-color: var(--color-primary-light);
}

.title-story {
  font-size: 1.75rem;
  margin-bottom: 3rem;
}

.content-component {
  margin-bottom: 1.25rem;
}

.body-content {
  margin-top: 0.75rem;
}

.title-blog {
  font-size: 3rem;
}

.blog-body {
  padding: 1.5rem 0 2rem;
}

.blog-item {
  margin: 2rem 0;
}

.blog-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: calc(576 / 576 * 100%);
  border-radius: 0.5rem;
}

.blog-image .image-item {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 0.3s;
}

.blog-image .image-item:hover {
  transform: scale(1.1);
}

.blog-item-header p {
  margin-right: 0.3rem;
}

.blog-upload-at {
  color: var(--color-accent);
}

.blog-item-title {
  margin-top: 1rem;
  font-size: 1.5rem;
}

.blog-detail {
  margin-top: 1rem;
  color: var(--color-second-primary);
}

figure {
  margin-bottom: 0 !important;
}

.ideal-for p span {
  color: var(--color-primary-light) !important;
}

.popup-form {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background-color: #fff;
  padding: 2.5rem 3.125rem;
  width: 90%;
  max-width: 41.25rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}

/* Hiển thị popup */
.popup-form.active {
  visibility: visible;
  opacity: 1;
}

.popup-content h3 {
  font-size: 1.875rem;
}

.contact-form {
  align-items: center;
  margin-top: 3.75rem;
}

.input-form {
  margin-top: 1.5625rem;
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--color-second-primary);
}

.contact-form input {
  border: none;
  outline: none;
  padding: 0 !important;
  font-size: 1rem;
  color: var(--color-primary);
  background-color: transparent;
}

.contact-form textarea {
  border: none;
  outline: none;
  padding: 0 !important;
  font-size: 1rem;
  color: var(--color-primary);
  background-color: transparent;
}

.contact-form input::placeholder {
  color: var(--color-text-main);
}

.popup-form .error-message {
  color: var(--color-accent);
  font-size: 0.75rem;
  margin-top: 0.3125rem;
  display: none;
}

/* Update */

.decor-section {
  position: relative;
  margin-top: calc(var(--h-nav) + var(--h-announcement));
  padding: 3rem 6.875rem;
}

.main-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.main-banner img {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: cover;
  border-radius: 1rem;
}

.poster-item {
  padding: 0 1rem;
}

.poster-image {
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
}

.poster-image img {
  overflow: hidden;
  width: 100%;
  height: calc(336 / 290 * 100%);
  object-fit: cover;
  transition: 0.5s;
}

.poster-image img:hover {
  transform: scale(1.1);
}

.banner-image {
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  margin: 1rem;
}

.banner-image img{
  overflow: hidden;
  width: 100%;
  height: calc(677 / 2265 * 100%);
  object-fit: cover;
}

.slider-nav {
  margin-top: 3rem;
  margin-bottom: 0 !important;
}

.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
}

.main-header.hidden {
  transform: translateY(-100%);
}