@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  font-family: "Manrope", sans-serif;
  background-color: #FFF;
  width: 100%;
  height: 100%;
}

.bg-header {
  background-image: url("../img/background.png");
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

.bg-mau-nen {
  background-image: url("../img/mau_nen.png");
  width: 100%;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top left;
}

/* Container của pagination */
.swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 8px; /* khoảng cách giữa các dot */
  align-items: center;
  margin-top: 20px;
}

/* Dot mặc định */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #FDDCDC; /* hồng nhạt */
  opacity: 1; /* bỏ mờ mặc định */
  border-radius: 50%; /* tròn */
  transition: all 0.3s ease;
}

/* Dot active */
.swiper-pagination-bullet-active {
  width: 32px; /* dài hơn */
  height: 12px;
  background-color: #F43334; /* đỏ */
  border-radius: 999px; /* viên thuốc */
}

@media (max-width: 640px) {
  .bg-header {
    background-image: url("../img/background.png");
    width: 100%;
    max-height: 701px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
  }
}

footer.new_background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F433341A;
  width: 100%;
  height: 100px;
  display: block;
  z-index: -1;
}