.appointment-map_gg {
  width: 23.125rem;
  height: 20.0625rem;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem;
  overflow: hidden;
}
.appointment-map_gg iframe {
  width: 100%;
  height: 100%;
}


.appointment-map .address {
   color: var(--Text-Body-DarkBlue-100, #08354a);
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: 160%;
}
.appointment-map .appointment-map__lock {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.38rem;
  color: var(--Text-Body-DarkBlue-100, #08354a);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin: 0.5rem 0 1.25rem 0;
}
.appointment-map .appointment-map__lock span.sub {
   color: var(--Text-Title-Blue, #0897d8);
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
   line-height: 160%;
   letter-spacing: -0.00875rem;
}

.make-appointment__field-error {
  margin: 0.375rem 0 0;
  padding-left: 0.25rem;
  color: #df2020;
  font-family: "Google Sans";
  font-size: 0.75rem;
  line-height: 1.4;
}

/*Bài viết nổi bật*/

.tab-panel {
   display: none;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.4s ease-in-out;
}

.tab-panel.active {
   display: flex; /* Hoặc display theo class gốc technological-equipment */
   opacity: 1;
   transform: translateY(0);
}

/* Giả lập hiệu ứng hover/active của menu giống framer-motion */
.device__page--imported-equipment__menu--item {
   transition: transform 0.3s ease;
   cursor: pointer;
}

.device__page--imported-equipment__menu--item.active {
   transform: translateY(-30px);
}

/* Tiện ích cho mobile article */
.flex-center-gap {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.dot-separator {
   width: 0.3125rem;
   height: 0.3125rem;
   background-color: #d9d9d9;
   border-radius: 9999px;
}
.btn-more-container {
   margin: 1.15rem auto 3rem auto;
   display: flex;
   justify-content: center;
}

.article {
   position: relative;
   width: 100%;
   margin-top: 3rem;
   overflow: hidden;
}

.article-deco3 {
   position: absolute;
   top: 10px;
   right: 0;
   left: 15px;
   width: 100%;
   z-index: 0;
   display: none !important;
}
.article-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.25rem;
}
.article-title .title {
   text-transform: uppercase;
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 130%;
   color: #0897d8;
}
.article-content {
   position: relative;
   margin-top: 1.5rem !important;
}

.article-content-sub {
   display: none;
}

.swiper-article-container .swiperSlide-item {
   min-height: 358px;
   border-radius: 16px;
   border: 1px solid #5a697014;
   overflow: hidden;
   height: 100%;
   position: relative;
   cursor: pointer;
}
.swiper-article-container .swiperSlide-item img {
   height: 280px;
   object-position: center;
   transition: all 0.2s ease;
}
.swiper-article-container .swiperSlide-item:hover .image {
   transform: scale(1.1);
}

.swiperSlide-item__content {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 1rem;

   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;

   height: 8rem !important;
   background-color: #ffffff;

   transition: all 0.2s ease;
}

.swiper-article-container .swiperSlide-item:hover .swiperSlide-item__content {
   background-color: #f1f9fc;
}

.swiperSlide-item__content--left {
   width: 99px;
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
   padding-top: 0.75rem !important;
   padding-bottom: 0.75rem !important;
   background-color: #fcca45;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.swiperSlide-item__content--left-day {
   text-align: center;
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 120%;
}
.wiperSlide-item__content--left-moth {
   text-align: center;
   font-size: 0.875rem;
   line-height: 150%;
}
.swiperSlide-item__content--right {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-around;

   height: 100%;
   gap: 0.38rem;

   padding-top: 0.5rem !important;
   padding-right: 1rem !important;
   padding-bottom: 0.62rem !important;
}
.swiperSlide-item__content--right-title {
   color: var(--color-primary);
   line-height: 120%;
   font-size: 0.75rem;
}
.swiperSlide-item__content--right-name {
   color: #08354a;
   font-size: 1rem;
   line-height: 120%;
   font-weight: 600;

   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.swiperSlide-item__content--right-context {
   color: #08354ab2;
   font-size: 0.75rem;
   line-height: 150%;

   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.button-left {
   position: absolute;
   left: 2rem;
   top: 33.333333%;
   z-index: 100;
}
.button-left .icon {
   color: #04182166;
   width: 1rem;
   height: 1rem;
   transform: rotate(90deg);
}
.button-right {
   position: absolute;
   right: 2rem;
   top: 33.333333%;
   z-index: 100;
}
.button-right .icon {
   color: #04182166;
   width: 1rem;
   height: 1rem;
   transform: rotate(-90deg);
}
.bg-custom-button {
   border: 1.2px solid #e4e4e4 !important;
}
.article-content__mobile {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.article-content__mobile--item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 1rem;
   height: 87px;
}
.article-content__mobile--item img {
   width: 125px;
   height: 100%;
   border-radius: 0.75rem;
   object-fit: cover;
}
.article-content__mobile--item-sub {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
}
.article-content__mobile--item-sub--name {
   font-size: 1rem;
   color: #08354a;
   line-height: 150%;
   font-weight: 600;

   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.article-content__mobile--item-sub--title {
   color: #1991c7;
   font-size: 0.75rem;
   line-height: 120%;
   padding-top: 0.25rem !important;
   text-transform: uppercase;
}
.article-content__mobile--item-sub--day {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 0.38rem;
}
.article-content__mobile--item-sub--day-detail {
   color: #08354ab2;
   line-height: 120%;
   font-size: 0.75rem;
   text-transform: uppercase;
}

.button.button-article-view {
   border-width: 0;
   padding: 0;
}

.icon-clock {
      display: none
   }
   
   @media (max-width: 640px) {
       .appointment-map_gg {
        width:100%;
    }
   }

@media (min-width: 640px) {
    
   .button.button-article-view {
      border-width: 1px !important;
      padding: 0.875rem 1.75rem;
   }
   .article-content__mobile {
      display: none;
   }
   .article-content-sub {
      display: block;
   }
   .article-title .title {
      font-size: 2.5rem;
   }
   .article-content {
      margin-top: 2.5rem;
   }
   .article-deco3 {
      display: block !important;
   }
   .article {
      margin-top: 6.25rem;
   }
   .appointment-map .address {
      color: var(--Text-Body-DarkBlue-100, #08354a);
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;
      align-self: stretch;
   }
   
   .appointment-map .appointment-map__lock span.sub {
      color: var(--Text-Title-Blue, #0897d8);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 150%;
   }
   
   .icon-clock {
      display: block;
      width: 1.125rem;
      height: 1.125rem;
   }
}