@import url("../css/common.css");
@import url("../css/overwrite.css");

.advertising-banner {
  background-image: url("../assest/image/banner-head.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 540px;
  margin-bottom: 100px;
  border-bottom-right-radius: 64px;
  position: relative;
}

.banner-special {
  border-top-right-radius: 64px; 
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 55% 100%;
  height: 100%;
}

.advertising-description {
  position: relative;
}

.card-about {
  position: absolute;
  max-width: 640px;
  height: 450px;
  background-color: var(--primary-orange-2);
  border-radius: 64px;
  padding: 50px;
  left: 50%;
  bottom: -50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 15px;
}

.card-about,
.solution,
.navigate-page,
.info-heathy {
  color: var(--black);
}

.detail-solution {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.card-about .breadcrumb-box a,
svg,
span {
  font-weight: 600;
}

/* Slide */
.carousel-control-prev,
.carousel-control-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ffff;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.carousel-control-prev {
  left: -25px;
}

.carousel-control-next {
  right: -25px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
  background-color: #ffffff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

.carousel_col {
  height: 430px;
}

.carousel_col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.btn_carousel_date {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color-1);
  color: white;
  height: 32px;
  width: 103px;
}

.btn_carousel_date:hover {
  background-color: #00aeee;
  color: white;
}

.btn_carousel_action {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #f26531;
  border: 1px solid #f26531;
  height: 32px;
  width: 103px;
}

.btn_carousel_action:hover {
  background-color: #f26531;
  color: white;
}

.btn_carousel_title a {
  font-size: 32px;
  font-weight: 700;
  display: block;
}

.view-detail-carousel {
  justify-content: center;
}

.description-main > a {
  color: inherit;
  text-decoration: none;
}
.description-main {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card */

.title_activities {
  font-size: 40px;
  font-weight: bolder;
  color: #232338;
}

.activities_content_card {
  height: 500px;
}

.img-wrapper {
  height: 260px;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.card-body-detail {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn_card_date {
  display: flex;
  align-items: center;
  background-color: #009dd7;
  color: white;
  height: 32px;
  width: 103px;
  justify-content: center;
}

.btn_card_date:hover {
  background-color: #00aeee;
  color: white;
}

.btn_card_action:hover {
  background-color: #f26531;
  color: white;
}

.btn_card_action {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  color: #f26531;
  border: 1px solid #f26531;
  height: 32px;
  width: 103px;
  justify-content: center;
}

.card-title-activities a {
  font-size: 18px;
  font-weight: 700;
}

.card_child {
  border: 0;
}

.wapper_filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.group_btn_activities {
  justify-content: end;
}

.btn_filter.active {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fbaf34;
  color: #000000f0;
  border: 0;
  font-weight: 600;
}

.btn_filter {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fbaf340d;
  color: #000000f0;
  border: 0;
  font-weight: 600;
}

li.page-item {
  padding-inline: 5px;
}

.card-title-activities > a {
  text-decoration: none;
  color: inherit;
}

/* Button pre next phân trang */
.pagination .btn_pre .page-link {
  border-radius: 10px;
  border: 1px solid rgb(235, 235, 235);
}

.pagination .btn_next .page-link {
  border-radius: 10px;
  border: 1px solid rgb(235, 235, 235);
}

.pagination .page-link {
  color: rgb(0, 0, 0);
  background-color: #fff;
  border: 0;
  font-weight: 600;
}

/* Nút active */
.pagination .page-item.active .page-link {
  background-color: #009dd7;
  color: #fff;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  text-align: center;
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .img-wrapper {
    height: 230px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .carousel_col {
    height: 330px;
  }

  .btn_carousel_title a {
    font-size: 18px;
  }

  .group_btn_carousel {
    margin: 10px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .carousel_col {
    height: 250px;
  }

  .carousel-control-prev,
  .carousel-control-next {
    display: none !important;
  }

  .btn_carousel_title a {
    font-size: 18px;
  }

  .activities_container {
    margin-top: 20px !important;
  }

  .title_activities {
    text-align: center;
  }

  .group_btn_activities {
    gap: 5px !important;
    justify-content: space-between;
  }

  .btn_filter {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 400;
  }
}