/* Thiết lập cơ bản cho toàn bộ trang */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container chính */
.container {
  max-width: 90rem;
  margin: 0 auto;
}

/* Sử dụng Flexbox để bố cục responsive */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f4f4f4;
}

.card-container {
  justify-content: space-evenly;
}

.banner-carousel {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
}
.video{
  padding-top: 90px;
  display: flex;
  justify-content: center;
}
.index_video{
  width: 1244px;
  height: 714px;
}

.carousel-images #banner-1 {
  background-image: url("./img/Nen 2_1440x700.webp");
  background-size: cover;
}

.carousel-images #banner-2 {
  background-image: url("./img/Banner_web.webp");
  background-size: cover;
}

.carousel-images #banner-3 {
  background-image: url("./img/Banner2_web.webp");
  background-size: cover;
}


/* Responsive cho màn hình nhỏ hơn 768px (điện thoại) */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column;
    text-align: center;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-menu a {
    font-size: 1rem;
    padding: 10px;
  }

  .profile_card {
    padding-top: 30px;
  }
}

#hinhray {
  display: none;
}

/* Responsive cho màn hình từ 768px đến 1024px (iPad, tablet) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 4px;
  }

  .header h1 {
    font-size: 2rem;
  }

  .nav-menu {
    display: flex;
    gap: 20px;
  }

  .nav-menu a {
    font-size: 1.2rem;
  }
}

/* Responsive cho màn hình lớn hơn 1024px (desktop) */
@media screen and (min-width: 1025px) {
  .header h1 {
    font-size: 2.5rem;
  }

  .nav-menu {
    display: flex;
    gap: 30px;
  }

  .nav-menu a {
    font-size: 1.3rem;
  }
}

/* Ví dụ về Grid cho nội dung chính */
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Tùy chỉnh font và kích thước chữ cho các thiết bị */
h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
}

/* p {
  font-size: clamp(1rem, 3vw, 1.2rem);
} */



.view-more {
  background-color: var(--backgroundColor);
  border: none;
  padding: 14px 19px;
  color: white;
  font-size: 16px;
}

.homepage-second-section {
  margin-bottom: 90px;
  height: 525px;
  background-color: var(--backgroundColor);
}

.content h3 {
  font-size: 40px !important;
  text-align: right;
  font-weight: 700;
  color: var(--textTitle);
}

.content .first-content-desc {
  text-align: justify;
  font-size: 1.1rem;
}

.picture.row {
  width: 39rem;
}

.pic-1 {
  width: 22rem !important;
  height: 33.063rem;
  border-radius: 30px;
  background-color: #4bc987;
  position: relative;
  padding: 0;
}

.pic-2 {
  width: 17.813rem;
  height: 19.125rem;
  border-radius: 30px;
  background-color: #4bc987;
  position: relative;
  padding: 0;
}

.pic-3 {
  width: 17.813rem;
  height: 13.375rem;
  border-radius: 30px;
  background-color: #4bc987;
  position: relative;
  margin-top: 9px;
}

.pic-1 img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.pic-2 img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.pic-3 img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.view-more-button {
  display: flex;
  justify-content: end;
}

.first-section .container .content {
  width: 737px;
  padding-left: 32px;
  align-self: bottom;
}

/* //-------- end first section --------------- */

.infos .text-desc h5,
.picture-news .container h2,
.text-title-h1 {
  color: var(--textTitle);
}

.text-content {
  text-align: justify;
  margin-right: 59px;
}

.pic-4 {
  width: 532px;
  height: 548px;
  background-color: #4bc987;
  border-radius: 30px;
}

.pic-4 img {
  width: 100%;
  height: 100%;
}

.text-content p {
  margin-bottom: 29px;
}

.agent-banner {
  background-color: var(--backgroundColor);
  height: 200px;
  border-radius: 20px;
}

.agent-content {
  color: white;
}

.agent-pic-1 {
  border-radius: 50%;
  background-color: #ffffff;
  width: 6.625rem;
  height: 6.625rem;
  margin: 0 34px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-pic-1 img {
  width: 3.188rem;
  height: 3.938rem;
}

.second-carousel-homepage {
  height: 525px;
  background-image: url("../imgs/Nen 3_1440x500.webp");
  background-size: cover;
  /* Scale the image to cover the entire area */
  background-repeat: no-repeat;
  /* Prevent the image from repeating if it's smaller than the container */
  background-position: center center;
}

.carousel-item .col-md .card {
  margin-bottom: 30px;
  background: var(--newsCardBackgroundColor);
  border: none;
  box-shadow: 1px 1px 2px 1px rgb(161 161 161 / 53%);
}

.btn.btn-link {
  text-decoration: none;
  color: var(--textTitle);
  font-size: 24px;
  padding: 0 24px;
}

.text-title-h1 {
  color: var(--textTitle);
  font-weight: 700;
  font-size: 40px;
}

.third-section .container .text-content {
  align-self: end;
}

/* .third-section .container .text-content h1 {
  color: var(--textTitle);
  font-weight: 700;
  font-size: 40px;
} */

.third-section h1 {
  color: var(--textTitle);
  font-weight: 700;
  font-size: 40px;
  display: flex;
  justify-content: center;
}

#name-gradient {
  color: var(--textTitle);
  font-weight: 700;
}

.four-section-homepage {
  padding-bottom: 83px;
}

.customer-tab-row {
  margin-top: 120px;
}

#cCarousel {
  position: relative;
  max-width: 1178px;
  padding: 0 70px 0 70px;
}

#cCarousel .arrow {
  position: absolute;
  top: 50%;
  display: flex;
  width: 45px;
  height: 45px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 26px;
  color: white;
  background: #00000072;
  cursor: pointer;
}

#cCarousel #prev {
  left: 0px;
}

#cCarousel #next {
  right: 0px;
}

#carousel-vp {
  width: 930px;
  height: 400px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: auto;
}

@media screen and (max-width: 770px) {
  #carousel-vp {
    width: 700px;
  }
}

@media (max-width: 510px) {
  #carousel-vp {
    width: 500px;
  }
}

@media (max-width: 300px) {
  #carousel-vp {
    width: 345px;
  }
}

#cCarousel #cCarousel-inner {
  display: flex;
  position: absolute;
  transition: 0.3s ease-in-out;
  gap: 10px;
  left: 0px;
}

.cCarousel-item {
  width: 223px;
  height: 374px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}

.cCarousel-item img {
  object-fit: cover;
  min-height: 188px;
  color: white;
  padding: 8px;
  margin: 12px;
}

.cCarousel-item .infos {
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  width: -moz-available;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: white;
  color: black;
}

.cCarousel-item .infos a {
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  width: -webkit-fill-available;
  padding: 12px;
  border-radius: 0 0 10px 10px;
  border: none;
  background-color: #eeffee;
  text-align: center;
  text-decoration: none;
  width: -moz-available;
}

.cCarousel-item .infos a button {
  border: none;
  background-color: #eeffee;
  color: var(--textTitle);
  font-size: 1rem;
  font-weight: bold;
}

@media screen and (max-width: 1200px) {
  .profile_card {
    width: 301px;
    /* height: 425px; */
    color: white;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    padding: 0px 12px;
    border-radius: 20px;
    position: relative;
    background: #169e50;
    z-index: -1;
  }
}

.profile_card {
  width: 30%;
  /* height: 40%; */
  color: white;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
  padding: 5% 2%;
  border-radius: 20px;
  position: relative;
  background: #169e50;
  z-index: -1;
  padding-top: 70px;
}

.user_img {
  position: absolute;
  top: -83px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_img::before {
  content: "";
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  border-radius: 50%;
  background: linear-gradient(45deg, deeppink, deepskyblue);
  box-shadow: 0px 0px 18px -6px #fff200;
  animation: animate 1s linear infinite;
}

.user_img img {
  border-radius: 50%;
  z-index: 1;
  height: 10rem;
}

.user_details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 12px 14px;
}

.user_details h5 {
  font-size: 22px;
  /* letter-spacing: 2px; */
  /* margin: 12px 0px; */

  font-weight: 600;
}

.user_details span {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: gray;
  font-size: 12px;
}

.user_details p {
  margin: 12px 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: justify;
  letter-spacing: 1px;
  color: gray;
}

.user_details a {
  text-decoration: none;
  background: linear-gradient(45deg, #ff00cc, #333399);
  color: white;
  padding: 10px 30px;
  margin: 14px 0;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 14px;
  box-shadow: 0px 6px 22px -6px gray;
  transition: 0.3s ease-in-out;
}

.user_details a:hover {
  background: transparent;
}

.text-title-h2 {
  color: var(--textTitle);
  font-weight: 700;
  font-size: 40px;
}

.second-carousel-homepage div .text-bold {
  color: white;
  font-weight: 700;
  font-size: 40px;
}

.fifth-section {
  padding-bottom: 60px;
}

.infos .text-desc p {
  font-weight: 700;
  color: var(--textTitle);
  text-align: center;
  font-size: 22px;
}

.infos .text-desc h5 {
  font-size: 18px;
  font-weight: 600;
}

.row {
  flex-wrap: nowrap;
}

.slick-prev {
  left: -11px !important;
  content: "\f053" !important;
  /* Replace with the actual Unicode value of your icon */
  font-family: "Font Awesome 5 Free";
}

.slick-next {
  right: -5px !important;
}

.slick-prev,
.slick-next {
  top: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: black !important;
  border: none;
  outline: none;
}

.slick-initialized .slick-slide {
  display: flex !important;
  justify-content: space-evenly;
}