.service-3 .number {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   width: 20px;
   min-width: 20px;
   height: 50px;
   color: #fff;
 }
 .service-3 .number,
 .service-3 .tabslet-tab {
   -webkit-box-align: center;
   -ms-flex-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   align-items: center;
 }
 .service-3 .tabslet-tab {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   max-width: 100%;
 }
 .service-3 .tabslet-tab .title {
   -webkit-transition: color 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   -o-transition: color 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   transition: color 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   padding-right: 10px;
   padding-left: 10px;
 }
 .service-3 .tabslet-tab a {
   -webkit-box-align: center;
   -ms-flex-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   align-items: center;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
   font-size: 34px;
 }
 .service-3 .tabslet-tab li {
   position: relative;
   background: var(--tabslet-li-background-color);
   width: 100%;
   margin-bottom: 1px;
 }
 .service-3 .tabslet-tab li a:hover {
   color: var(--hover-color);
 }
 .service-3 .tabslet-tab li:last-child {
   margin-bottom: 0;
 }

 .service-3 .tabslet-tab li:before {
   -webkit-transition: width 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   -o-transition: width 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   transition: width 0.6s cubic-bezier(0.61, 1, 0.88, 1);
   width: 0;
   height: 100%;
   content: "";
 }
 .service-3 .tabslet-tab li > * {
   position: relative;
   z-index: 11;
 }
 .service-3 .tabslet-tab li.green .number,
 .service-3 .tabslet-tab li.green:before {
   background-color: #098b47;
 }
 .service-3 .tabslet-tab li.light-green .number,
 .service-3 .tabslet-tab li.light-green:before {
   background-color: #29a788;
 }
 .service-3 .tabslet-tab li.orange .number,
 .service-3 .tabslet-tab li.orange:before {
   background-color: #cc5733;
 }
 .service-3 .tabslet-tab li.yellow .number,
 .service-3 .tabslet-tab li.yellow:before {
   background-color: #f48320;
 }
 .service-3 .tabslet-content.yellow,
 .service-3 .tabslet-content.yellow .accordion-item.active .title:before {
   background-color: #f48320;
 }
 .service-3 .tabslet-content.yellow .accordion-item.active .title em {
   color: #f48320;
 }
 .service-3 .tabslet-content.yellow:before {
   background-color: #f48320;
 }



 /* Màu nền từng tab */
 .service-3 .tabslet-tab li.tab-1-color .number,
 .service-3 .tabslet-tab li.tab-1-color:before {
   background-color: var(--tab-1-color);
 }
 .service-3 .tabslet-content.tab-1-color,
 .service-3 .tabslet-content.tab-1-color .accordion-item.active .title:before {
   background-color: var(--tab-1-color);
 }
 .service-3 .tabslet-content.tab-1-color .accordion-item.active .title em {
   color: var(--tab-1-color);
 }
 .service-3 .tabslet-content.tab-1-color:before {
   background-color: var(--tab-1-color);
 }

 .service-3 .tabslet-tab li.tab-2-color .number,
 .service-3 .tabslet-tab li.tab-2-color:before {
   background-color: var(--main-color);
 }


 
 .service-3 .tabslet-content.tab-2-color,
 .service-3 .tabslet-content.tab-2-color .accordion-item.active .title:before {
   background-color: var(--main-color);
 }
 .service-3 .tabslet-content.tab-2-color .accordion-item.active .title em {
   color: var(--main-color);
 }
 .service-3 .tabslet-content.tab-2-color:before {
   background-color: var(--main-color);
 }

 .service-3 .tabslet-tab li.tab-3-color .number,
 .service-3 .tabslet-tab li.tab-3-color:before {
   background-color: var(--main-color);
 }
 .service-3 .tabslet-content.tab-3-color,
 .service-3 .tabslet-content.tab-3-color .accordion-item.active .title:before {
   background-color: var(--main-color);
 }
 .service-3 .tabslet-content.tab-3-color .accordion-item.active .title em {
   color: var(--main-color);
 }
 .service-3 .tabslet-content.tab-3-color:before {
   background-color: var(--main-color);
 }


 .service-3 .tabslet-tab li.tab-4-color .number,
 .service-3 .tabslet-tab li.tab-4-color:before {
   background-color: var(--tab-4-color);
 }
 .service-3 .tabslet-content.tab-4-color,
 .service-3 .tabslet-content.tab-4-color .accordion-item.active .title:before {
   background-color: var(--tab-4-color);
 }
 .service-3 .tabslet-content.tab-4-color .accordion-item.active .title em {
   color: var(--tab-4-color);
 }
 .service-3 .tabslet-content.tab-4-color:before {
   background-color: var(--tab-4-color);
 }


 .service-3 .tabslet-tab li.tab-5-color .number,
 .service-3 .tabslet-tab li.tab-5-color:before {
   background-color: var(--tab-5-color);
 }
 .service-3 .tabslet-content.tab-5-color,
 .service-3 .tabslet-content.tab-5-color .accordion-item.active .title:before {
   background-color: var(--tab-5-color);
 }
 .service-3 .tabslet-content.tab-5-color .accordion-item.active .title em {
   color: var(--tab-5-color);
 }
 .service-3 .tabslet-content.tab-5-color:before {
   background-color: var(--tab-5-color);
 }

 .service-3 .tabslet-tab li.tab-6-color .number,
 .service-3 .tabslet-tab li.tab-6-color:before {
   background-color: var(--tab-6-color);
 }
 .service-3 .tabslet-content.tab-6-color,
 .service-3 .tabslet-content.tab-6-color .accordion-item.active .title:before {
   background-color: var(--tab-6-color);
 }
 .service-3 .tabslet-content.tab-6-color .accordion-item.active .title em {
   color: var(--tab-6-color);
 }
 .service-3 .tabslet-content.tab-6-color:before {
   background-color: var(--tab-6-color);
 }

 .service-3 .tabslet-tab li.tab-7-color .number,
 .service-3 .tabslet-tab li.tab-7-color:before {
   background-color: var(--tab-7-color);
 }
 .service-3 .tabslet-content.tab-7-color,
 .service-3 .tabslet-content.tab-7-color .accordion-item.active .title:before {
   background-color: var(--tab-7-color);
 }
 .service-3 .tabslet-content.tab-7-color .accordion-item.active .title em {
   color: var(--tab-7-color);
 }
 .service-3 .tabslet-content.tab-7-color:before {
   background-color: var(--tab-7-color);
 }

 .service-3 .tabslet-tab li.tab-8-color .number,
 .service-3 .tabslet-tab li.tab-8-color:before {
   background-color: var(--tab-8-color);
 }
 .service-3 .tabslet-content.tab-8-color,
 .service-3 .tabslet-content.tab-8-color .accordion-item.active .title:before {
   background-color: var(--tab-8-color);
 }
 .service-3 .tabslet-content.tab-8-color .accordion-item.active .title em {
   color: var(--tab-8-color);
 }
 .service-3 .tabslet-content.tab-8-color:before {
   background-color: var(--tab-8-color);
 }


 .service-3 .tabslet-tab li.tab-9-color .number,
 .service-3 .tabslet-tab li.tab-9-color:before {
   background-color: var(--tab-9-color);
 }
 .service-3 .tabslet-content.tab-9-color,
 .service-3 .tabslet-content.tab-9-color .accordion-item.active .title:before {
   background-color: var(--tab-9-color);
 }
 .service-3 .tabslet-content.tab-9-color .accordion-item.active .title em {
   color: var(--tab-9-color);
 }
 .service-3 .tabslet-content.tab-9-color:before {
   background-color: var(--tab-9-color);
 }


 .service-3 .tabslet-tab li.tab-10-color .number,
 .service-3 .tabslet-tab li.tab-10-color:before {
   background-color: var(--tab-10-color);
 }
 .service-3 .tabslet-content.tab-10-color,
 .service-3 .tabslet-content.tab-10-color .accordion-item.active .title:before {
   background-color: var(--tab-10-color);
 }
 .service-3 .tabslet-content.tab-10-color .accordion-item.active .title em {
   color: var(--tab-10-color);
 }
 .service-3 .tabslet-content.tab-10-color:before {
   background-color: var(--tab-10-color);
 }



 .service-3 .tabslet-content,
 .service-3 .tabslet-content .accordion-item.active .title:before {
   background-color: var(--tabslet-background-color);
 }
 .service-3 .tabslet-content .accordion-item.active .title em {
   color: var(--tabslet-background-color);
 }
 .service-3 .tabslet-content:before {
   background-color: var(--tabslet-background-color);
 }


/* End Màu nền từng tab */



 .service-3 .tabslet-tab li.blue .number,
 .service-3 .tabslet-tab li.blue:before {
   background-color: #233a7a;
 }
 .service-3 .tabslet-tab li.active:before {
   width: 100%;
 }
 .service-3 .tabslet-tab li.active .title {
   color: #fff;
 }
 /* .service-3 .tabslet-content {
   padding: 30px 0 75px;
 } */
 .service-3 .tabslet-content.green,
 .service-3 .tabslet-content.green .accordion-item.active .title:before {
   background-color: #098b47;
 }
 .service-3 .tabslet-content.green .accordion-item.active .title em {
   color: #098b47;
 }
 .service-3 .tabslet-content.light-green,
 .service-3 .tabslet-content.light-green .accordion-item.active .title:before {
   background-color: #29a788;
 }
 .service-3 .tabslet-content.light-green .accordion-item.active .title em {
   color: #29a788;
 }
 .service-3 .tabslet-content.orange,
 .service-3 .tabslet-content.orange .accordion-item.active .title:before {
   background-color: #cc5733;
 }
 .service-3 .tabslet-content.orange .accordion-item.active .title em {
   color: #cc5733;
 }




 .service-3 .tabslet-content.blue,
 .service-3 .tabslet-content.blue .accordion-item.active .title:before {
   background-color: #233a7a;
 }
 .service-3 .tabslet-content.blue .accordion-item.active .title em {
   color: #233a7a;
 }
 @media (min-width: 1280px) {
   .service-3 {
     overflow: hidden;
   }
   /* .service-3 .number {
     width: 60px;
     min-width: 60px;
     height: 50px;
   } */
   .service-3 .main-tabslet-accordion {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
   .service-3 .tabslet-tab {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 35%;
     display: block;
     flex: 0 0 35%;
     width: 100%;
     max-width: 35%;
     overflow: hidden;
   }
   .service-3 .tabslet-tab .title {
     padding-right: 15px;
     padding-left: 15px;
   }
   .service-3 .tabslet-tab li {
     margin-right: 1px;
   }

   .service-3 .tabslet-tab a {
     width: 100%;
   }
   .service-3 .tabslet-content-wrap {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 65%;
     flex: 0 0 65%;
     width: 100%;
     max-width: 65%;
   }
   .service-3 .tabslet-content {
     position: relative;
     /* padding: 50px 50px 50px 30px; */
   }
   .service-3 .tabslet-content:before {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     width: 1000%;
     height: 100%;
     pointer-events: none;
     content: "";
   }
   .service-3 .tabslet-content.green:before {
     background-color: #098b47;
   }
   .service-3 .tabslet-content.light-green:before {
     background-color: #29a788;
   }
   .service-3 .tabslet-content.orange:before {
     background-color: #cc5733;
   }

   .service-3 .tabslet-content.blue:before {
     background-color: #233a7a;
   }
 }
 @media (min-width: 1440px) {
   .service-3 {
     padding-bottom: 0;
   }
 }
 .service-tab-intro-wrapper {
   position: relative;
   /* width: 100%;
   aspect-ratio: 1/1.5; */
   /* padding: 0 20px 30px 20px; */
   height: 100%;
   /* background-color: #cc5733; */
 }
.service-tab-intro-wrapper .bg-title-container {
   overflow: hidden;
   border-top-left-radius: 25px;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%);
}
.service-tab-intro-wrapper .bg-title-container.bottom {
   bottom: 0;
   left: 20px;
   right: 20px;
}
.service-tab-intro-wrapper .bg-title {
   padding: 20px;
}
.service-tab-intro-wrapper .bg-title-inner:after {
   opacity: 0.65;
}

.service-tab-intro-wrapper::before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background-color: #000;
   opacity: 0.5;
   border-top-left-radius: 25px;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%);
}