@import url("responsive/full.css");
@import url("responsive/1400.css") (max-width: 1400px);
@import url("responsive/1200.css") (max-width: 1200px);
@import url("responsive/1024.css") (max-width: 1024px);
@import url("responsive/992.css") (max-width: 992px);
@import url("responsive/834.css?v=1.0") (max-width: 834px);
@import url("responsive/768.css") (max-width: 768px);
@import url("responsive/576.css") (max-width: 576px);
@import url("responsive/476.css") (max-width: 476px);/*iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus*/
@import url("responsive/428.css") (max-width: 428px);/*iPhone 12 Pro Max*/
@import url("responsive/414.css") (max-width: 414px);/*iPhone 8 Plus iPhone XS Max iPhone XR iPhone 11 Pro Max iPhone 11*/
@import url("responsive/390.css") (max-width: 390px);/*iPhone 12 iPhone 12 Pro*/
@import url("responsive/375.css") (max-width: 375px);/*iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone X iPhone XS iPhone 11 Pro iPhone 12 mini*/
@import url("responsive/375.css") (max-width: 320px);/* < iPhone 6*/

/* font-size */
.fs-8 { font-size: 0.5rem; }
.fs-10 { font-size: 0.625rem !important; }
.fs-12 { font-size: 0.75rem; }
.fs-14 { font-size: 0.875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.5rem; }
.fs-24 { font-size: 1.375rem; }
.fs-28 { font-size: 1.75rem; }
.fs-32 { font-size: 2rem; }
.fs-34 { font-size: 2.125rem; }
.fs-36 { font-size: 2.25rem; }
.fs-40 { font-size: 2.5rem; }
.fs-42 { font-size: 2.625rem; }
.fs-44 { font-size: 2.75rem; }
.fs-48 { font-size: 3rem; }
.fs-56 { font-size: 3.5rem; }
.fs-64 { font-size: 4rem; }

/* font weight */
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* text color */
.text-cc { color: #CCCCCC; }
.text-sec7 { color: #757575; }
.text-sec9 { color: #999999; }
.text-sec { color: #AAAAAA; }
.text-orange { color: #E45526; }
.text-pp-le, .text-purple { color: #5E4481; }
.text-pp88 { color: #8862B0;}
.text-scc { color: #10CA39; }
.text-mooc { color: #A2D169; }
.text-ct { color: #53BDCA; }
.text-js { color: #EB7942; }
.text-js-gn { color: #A2D169; }
.text-js-sec { color: #E86F35; }
.text-gold { color: #B7A27C; }
.text-silver { color: #A4A4A4; }
.text-sk4l{ color: #3B589E; }
.text-data-sci{ color: #3773B5; }
.text-data-sci-hv:hover{ color: #2f5a8f; }
.text-data-sci-sub{ color: #DB5C1E; }
.text-nwtc{ color: #F26723; }
.text-swc{ color: #9E1F63; }
.text-swc-sec{ color: #00A8B0; }
.text-swc-sec-or{ color: #F89733; }
.text-etn-acdm{ color: #691018; }
.text-etn-acdm-sec{ color: #192463; }
.text-etn-acdm-sub{ color: #1A1B1D; }
.text-edso-bl{ color: #17c5e9; }
.text-edso-gn{ color: #9cd04f; }
.text-edso-gd, .text-advc-gd{ 
    background: linear-gradient(45deg, rgba(23,197,233,1) 0%, rgba(156,208,79,1) 45%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-stem { color: #2BCCE4; }
.text-shadow-b{ text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
.text-advc { color: #124398; }

.bg-le-color{ background-color: #5E4481; }
.bg-mooc-color{ background-color: #A2D169; }
.bg-ct-color{ background-color: #53BDCA; }
.bg-js-color{ background-color: #EB7942; }
.bg-medee-color{ background-color: #E8284D; }
.bg-sk4l-color{ background-color: #3B589E; }
.bg-idp-color{ background-color: #7bb7b2; }
.bg-dt-sci-color{ background-color: #3773B5; }
.bg-etn-acdm-color{ background-color: #691018; }
.bg-nwtk-color{ background-color: #F26723; }

.cursor-pt {  cursor: pointer; }

.display-none { display: none; }
.display-block { display: block; }
.display-none-im { display: none !important; }
.display-block-im { display: block !important; }

.btn-border-black{
    padding: 8px 16px;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 8px !important;
}
.btn-border-black:hover{
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16);
}
/* --------------------- fix tag small in card ------------------ */
.course-card-hv .card-text{
    border-radius: 12px;
    text-align: unset !important;
}
/* --------------------- fix tag small in card ------------------ */
/* ---------------------  start sweetalert2 ------------------ */
.swal2-popup.swal2-modal{
    border-radius: 16px;
}
/* ---------------------  end sweetalert2 ------------------ */
body, .navbar {
    padding-right: 0px !important;
}
/* Start Custom Header */
.home-page {
    position: relative;
    background-color: black;
    height: 85vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

.home-page video {
    opacity: 0.95;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
/* .home-page nav {
    background-color: transparent;
    transition: 1.5s;
} */
.menu-mobile .nav-link {
    padding: .5rem 1rem .5rem 1rem;
}
.home-page .navbar-scroll{
    background-color: transparent;
    transition: all 0.5s linear;
}
.navbar-toggler .navbar-toggler-icon{
    background-image: url("../images/icons/navbar-toggler-icon-white.png");
}
.navbar {
    padding-top: 0.5rem;
}

.navbar-toggler {
    border: 0px !important;
    color: #5E4481 !important;
}

.navbar-toggler-icon {
    border: 0px !important;
    color: #5E4481 !important;
}

.navbar-scroll-custom {
    /* background-color: rgb(94, 68, 129, 0.9) !important; */
    background-color: rgba(255, 255, 255, 0.959) !important;
    /* box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08); */
    border-bottom:  1px solid #D5DEE7;
    /* transition: 1.5s; */
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
}
.other-pages nav {
    background-color: rgba(255, 255, 255, 0.9);
}
.btn-show-menu-search-bar{
    cursor: pointer;
    padding: 13px 14px;
    color: #5E4481;
    background: #F5F2FA;
    border-radius: 6.5px;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.btn-hide-menu-search-bar{
    cursor: pointer;
    padding: 12.5px 17px;
    color: #5E4481;
    background: #F5F2FA;
    border-radius: 6.5px;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.btn-show-menu-search-bar:hover, .btn-hide-menu-search-bar:hover{
    background: #784BB5;
    color: #F5F2FA;
}
.btn-hide-menu-search-bar{
    display: none;
}
.btn-input-group-pp-le{
    color: #fff;
    background: #5E4481;
    border: none;
    border-radius: 0px 8px 8px 0px;
}
.btn-input-group-pp-le:hover{
    color: #fff;
    background: rgb(72, 51, 99);
}
/* .from-search-bar-close{
    display: none;
} */
/* .from-search-bar-open{
    display: inline-block;
} */

.carousel-item {
    height: 50vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-banner {
    margin-top: 4.7rem;
    position: relative;
}

.carousel-banner-text {
    top: 30%;
    left: 10%;
    position: absolute;
    z-index: 1;
    /* height: 38vh; */
}
.carousel-banner-text-banner-etn-acdm {
    top: 30%;
    left: 10%;
    right: 10%;
    position: absolute;
    z-index: 1;
    width: 100%;
    /* height: 38vh; */
}

.dropdown.has-megamenu {
    position: static;
}

.btn-register {
    color: #fff;
    height: 42px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 8px;
    /* transition: all 0.2s linear; */
}

.btn-register:hover {
    color: #fff;
    background-color: #784BB5;
    border-color: #784BB5;
}

.btn-register-scroll-down {
    color: #fff !important;
    background-color: #5E4481 !important;
    /* transition: all 0.2s linear; */
}
.btn-register-scroll-down:hover {
    color: #Fff !important;
    background-color: #784BB5 !important;
}

.other-pages .btn-register {
    color: #fff;
    background-color: #5E4481;
}

.other-pages .btn-register:hover {
    color: #fff;
    background-color: #784BB5;
}

#alert-header-pf {
    position:relative;
    background: rgba(250, 247, 255, 0.946);
    border: 1px solid #5E4481;
    box-sizing: border-box; 
}

#btn-link-alert-pf{
    width: 80px;
    height: 35px;
    color: #fff;
    background-color: #5E4481;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

#close-header-alert {
    position: absolute;
    top: 10px;
    right: 15px;
}
.text-title-home-page,
.box-watch-our-video {
    transform: scale(0.94);
    animation: scaleText 4s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scaleText {
    100% {
        transform: scale(1);
    }
}
.text-title-home-page div,
.text-title-home-page p ,
.box-watch-our-video{
    opacity: 0;
    filter: blur(4px);
}

.text-title-home-page .tthp1 {
    animation: fade-in-text 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.text-title-home-page .tthp2 {
    animation: fade-in-text 0.8s 0.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-title-home-page .tthp3 {
    animation: fade-in-text 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.box-watch-our-video {
    animation: fade-in-text 0.8s 1.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
  
@keyframes fade-in-text {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}
  
/* End Custom Header */
.splide__pagination__page {
    width: 32px !important;
    height: 5px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    background: #F1F1F1 !important;
}

.splide__pagination__page.is-active {
    transform: scale(1) !important;
    background: #5E4481 !important;
}
.section-2-home .splide__pagination,
.section-3-profile .splide__pagination,
.section-3-profile-short-term-training .splide__pagination{
    bottom: -2em !important;
}
.home-page .container {
    position: relative;
    z-index: 2;
}

.btn-regis {
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}

.create-learning-le-bg {
    background: #F2F5F8;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.page-link {
    color: #5E4481;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0px 8px;
}
.page-item.active .page-link{
    color: #fff;
    border-color: #5E4481;
    background-color : #5E4481;
}
.page-link:hover{
    color: #5E4481;
    border: 1px solid #5E4481;
}

/* start custom form*/
.form-select, .form-control {
    height: 48px;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.btn-search {
    border-radius: 8px;
    width: 48px;
    background-color: #5E4481;
    color: #fff;
}
.btn-search:hover {
    border-radius: 8px;
    background: #8D3CE1;
    box-shadow: 0px 4px 16px 0px rgba(168, 111, 227, 0.64);
    color: #fff;
}
.btn-search-advc {
    border-radius: 8px;
    width: 48px;
    background-color: #124398;
    color: #fff;
}
.form-check-input.checkbox-le-sec8:checked{
    background-color: #864bd7 !important;
    border-color: #864bd7 !important;
}
/* end custom form*/

/* start custom menu */
.menu-bar-fixtop {
    top: 75px;
    position: fixed;
    display: none !important;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.9);
}
.menu-bar-fixtop-pf {
    top: 73.5px;
    position: fixed;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.9);
}

.menu-bar-fixtop-show {
    display: block !important;
}

.menu-mobile {
    display: none;
}
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* header .menu-bar{
    animation: MenuSlideDown 0.3s linear;
} */
/* @keyframes MenuSlideDown{
    from {
        height: 0px;
    }
    to {
        height: 72px;
    }
  } */
.menu-bar{
    height: 72px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 0px 0px 20px 20px;
}

.menu-bar ul {
    height: 100%;
    width: 100%;
    list-style: none;
    position: relative;
    display: inline-table;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 0px 0px 20px 20px;
}
.menu-bar ul ul {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.btn-main-menu {
    margin: 0;
    padding: 0;
    max-width: 180px;
    width: 100%;
    border: 1px solid #F2F5F8;
}

.btn-main-menu:hover {
    background-color: #F5F2FA;
}

.btn-main-menu a:hover {
    font-weight: 500 ;
    color: #5E4481;
}

.btn-main-menu img {
    width: 100%;
    max-height: 189px;
    height: 100%;
    object-fit: cover;
}

.menu-bar ul li:hover>ul{
    display: block !important
}

.menu-bar ul li a{
    height: 100%;
    text-align: center;
    display: block;
    padding: 20px 20px;
    color: #222;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
}

.menu-bar ul ul{
    display: none !important;
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 237px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    border-radius: 20px 20px 0px 0px;
}

.menu-bar ul ul li a {
    text-align: left;
    width: 188px;
    height: 100%;
    font-weight: 400;
    font-size: 0.875rem;
    color: #999999;
    padding: 5px 10px;
} 

.sub-menu {
    min-height: 30px;
    /* width: 188px; */
}
@media only screen and (min-width: 992px) {
    .navbar-sec.menu-bar .dropdown:hover .dropdown-menu {
        display: block;
    }
}
.menu-bar ul ul li a:hover{
    color: #573C73;
    font-weight: 500;
    background-color: #F1F1F1;
}

.menu-bar .active-1,
.navbar-sec .nav-item .active-1{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #5E4481;
}

.menu-bar .active-2,
.navbar-sec .nav-item .active-2{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #E8284D;
}

.menu-bar .active-3,
.navbar-sec .nav-item .active-3{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #FFD530;
}

.menu-bar .active-4,
.navbar-sec .nav-item .active-4{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #A4CE57;
}

.menu-bar .active-5,
.navbar-sec .nav-item .active-5{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #98E5E5;
    
}

.menu-bar .active-6,
.navbar-sec .nav-item .active-6{
    color: #5E4481 !important;
    background-color: #F5F2FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 4px solid #DB5C1E;
}

.btn-profile-scroll-down{
    color: #5E4481 !important;
    background: #F5F2FA !important;
    border-color: #F5F2FA !important;
}
.btn-profile-scroll-down:hover{
    color: #fff !important;
    background: #784BB5 !important;
    border-color: #784BB5 !important;
}
.other-pages .btn-profile{
    color: #5E4481;
    background: #F5F2FA;
    border: 1px solid #F5F2FA;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.btn-profile {
    height: 42px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    border: 1px solid white;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.btn-profile:hover { 
    color: #fff;
    border: 1px solid #784BB5;
    background: #784BB5;
}

.btn-profile img {
    border: 1px solid #ffffff;
}

.btn-profile img{
   width: 28px;
   height: 28px;
   border-radius: 50%;
}
.btn-select-lg-scroll-down {
    border-color: #DDDDDD !important;
}
.btn-select-lg-scroll-down button:hover{
    color: #fff !important;
}

.btn-select-lg{
    height: 42px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 8px;
}

.btn-select-lg:hover{
    color: #fff;
    border-color: #fff;
    background-color: #784BB5;
    border-color: #784BB5;
}
.btn-select-lg:hover:after{
    color: #fff !important;
}

.btn-select-lg img{
   width: 20px;
   height: 20px;
   border-radius: 50%;
}
.btn-select-lg.dropdown-toggle::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 500;
    transition: all 0.3s linear;
    border: 0 !important;
}

.btn-select-lg.show::after{
    transform: rotate(-180deg);
} 

.home-page .li-lang .dropdown-toggle::after {
    color: #fff;
}
.home-page .toggle-dark .dropdown-toggle::after {
    color: #000;
}

.loginli a:hover, .qnali a:hover{
    font-weight: 500 !important;
    color: #5E4481 !important;
}

.box-watch-our-video {
    padding: auto;
    height: 130px;
    width: 100;
}

.box-circle {
    cursor: pointer;
    position: relative;
    color: #fff;
    max-width: 92px;
    max-height: 92px;
    transition: 0.5;
}

.box-circle:hover {
    max-width: 86px;
    max-height: 86px;
    padding: 3px;
    transition: 0.5;
}

.icon-play {
    position: absolute;
    z-index: 1;
    top: 33%;
    left: 42%;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #ffffff;
}

.icon-play:hover {
    top: 33%;
    left: 42%; 
    border-width: 14px 0 14px 24px;
}

.box-circle svg circle{
    fill: rgba(0,0,0,0.2);
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 25,200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}

.box-circle svg circle:hover{
    stroke-dasharray: 200,200;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 5s linear infinite;
    -moz-animation: rotating 5s linear infinite;
    -ms-animation: rotating 5s linear infinite;
    -o-animation: rotating 5s linear infinite;
    animation: rotating 5s linear infinite;
}
.nav-img-link-hv:hover img{
    box-shadow: 2px 4px 14px rgb(0 0 0 / 20%);
}
.navbar-nav a:active,
.navbar-nav a:hover,
.navbar-nav a:focus{
    color: #5E4481;
}
.btn-select-lg-mobile {
    font-size: 1rem;
    font-weight: 400;
}

.btn-select-lg-mobile img {
    width: 20px;
    height: 20px;
}

.nav-for-mobile .dropdown-toggle::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 500;
    color: #000;
    transition: all 0.3s linear;
    border: 0 !important;
}
.nav-for-mobile .show::after{
    transform: rotate(-180deg);
} 
.nav-for-mobile ul {
    min-width: 0px;
}

.search-course-rs-sm input{
    margin: 20px 0px 20px 0px;
    width: 100%;
    height: 42px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.27%, rgba(0, 0, 0, 0.036) 100%), #F7F7F7;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.06);
    border-radius: 21px;
}
.search-course-rs-md-lg input{
    width: 100%;
    height: 42px;
    background: transparent;
    border: 1px solid white;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 10%), 0px 4px 14px rgb(0 0 0 / 8%);
    border-radius: 8px;
}

/* .web_key_search_course::-webkit-input-placeholder{ 
    color: #fff;
    opacity: 1t; 
} */

.web_key_search_course::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #fff;
}
.web_key_search_course:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity:  1;
}
.web_key_search_course::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
    opacity:  1;
}
.web_key_search_course:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}
.web_key_search_course::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}
::placeholder { /* Most modern browsers support this now. */
    color: #fff;
}
.search-course-rs-sm .form-group,
.search-course-rs-md-lg .form-group{
    position: relative;
}
.search-course-rs-sm .form-group button,
.search-course-rs-md-lg .form-group button{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    color: #5E4481;
    background: #F5F2FA;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.search-course-rs-md-lg .form-group button{
    border-radius: 0px 6.5px 6.5px 0px;
}
.search-course-rs-md-lg .form-group button:hover{
    background: #784BB5;
    color: #F5F2FA;
}
.btn-register-mobile {
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #5E4481;
    border-radius: 4px;
}
.btn-register-mobile:hover, 
.btn-register-mobile:active, 
.btn-register-mobile:focus{
    color: #fff !important;
    background-color: #5E4481 !important;
}
/* end custom menu */

/* start custom Home Page */
.splide__arrow {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    width: 2.1875em !important;
    height: 2.1875em !important;
}
.splide__arrow:hover {
    color: #5E4481 !important;
    border-color: #5E4481 !important;
}
.embed-responsive {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.btn-outline-red {
    width: 135px;
    height: 40px;
    border: 1px solid #000;
    color: #000;
}

.btn-outline-red:hover {
    border: 1px solid #E8284D;
    color: #E8284D;
}

.card-container-btn-regis {
    position: absolute;
    z-index: 1;
    width: 50%;
    padding: 61% 0 0 0.5%;
}

.home-box-video1 {
    position: relative;
    /* top: -60px; */
    /* left: -100px; */
    margin: 0;
    padding: 0;
    height: 100%;
}

@media only screen and (max-width: 600px) {
    .home-box-video1 {
        top: 0;
        left: 0;
    }
}
.home-box-video1 .plyr{
    position: absolute;
    z-index: 3;
    margin-top: 16% !important;
    width: 80% !important;
    /* height: 100% !important; */
    margin-top: 5% !important;
    margin-left: 0% !important;
    border-radius: 20px !important;
}
@media only screen and (max-width: 992px) {
    .home-box-video1 .plyr {
        width: 35% !important;
    }
}
@media only screen and (max-width: 576px) {
    .home-box-video1 .plyr {
        width: 92% !important;
    }
}
#bg-video1 { 
    position: absolute;
    z-index: 2;
    top: 6px;
    left: -27px;
}

#bg-video2 { 
    position: absolute;
    z-index: 1;
    top: 270px;
    /* left: 380px; */
    right: 100px;
}

.section-8-home .container .course-slide-show .card {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.btn-show-course-detail{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    color: #757575;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) -1.52%, rgba(244, 244, 244, 0.2) 101.52%);
    border: 1px solid #E1E1E1;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.btn-show-course-detail:hover {
    /* color: #000;
    border-color: #000; */
    color: #fff;
    background: linear-gradient(180deg, rgba(167, 103, 253, 0) 10.42%, #5E4481 70.31%), #5E4481;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.2));
    border-color: #9068C6;
}

.course-card-hv:hover {
    /* border: 1px solid #9A63D2 !important; */
    box-shadow: 2px 4px 14px rgb(154 99 210 / 40%) !important;
}
.course-card-hv:active {
    border: 1px solid #9A63D2 !important;
    /* box-shadow: 2px 4px 14px rgb(154 99 210 / 40%) !important; */
}
.course-card-hv-stem {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card-hv-stem:hover {
    box-shadow: 2px 4px 14px rgb(186 236 255 / 50%) !important;
    transform: translateY(-6px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.12);
}
.course-card-hv-stem:active {
    border: 1px solid #BAECFF !important;
}
.course-card-hv-advc:hover {
    /* border: 1px solid #9A63D2 !important; */
    box-shadow: 2px 4px 14px rgba(99, 116, 210, 0.4) !important;
}
.course-card-hv-advc:active {
    border: 1px solid #5861dd !important;
    /* box-shadow: 2px 4px 14px rgb(154 99 210 / 40%) !important; */
}
.btn-show-course-detail:active {
    background: #976AD5;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.btn-show-course-detail:hover .fal.fa-arrow-right{
    font-size: 18px;
    font-weight: 500;
    /* transition: all 0.5s; */
}

.card-img-box {
    position: relative;
    max-height: 190px;
    height: auto;
}

.card-img-box .card-img-top {
    z-index: -1;
    height: 100%;
}
.card-img-box img{
    height: auto;
    object-fit: cover;
    object-position: 0px 0%;
}

.card-container-tag-new {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
}

.tag-new {
    color: #11D13B;
    background-color: #E6F8EA;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    border-radius: 0px 10px;
    padding: 10px;
    width: 50px;
}

.btn-regis-in-card {
    position: absolute;
    z-index: 3;
    width: 100%;
    left: 20px;
    bottom: 20px;
    max-width: 150px;
}

.btn-small-regis {
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}

.section-4-home .btn-purple-regis {
    width: 144px;
    height: 42px;
    background-color: #5E4481;
    color: #Fff;
    border-radius: 8px;
}

.section-4-home .btn-purple-regis:hover {
    background-color: #784BB5;
}

.section-4-home .bg-blur {
    backdrop-filter: blur(4px);
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-5-home .card-img-top {
    border-radius: 8px;
}
#play-main-video .modal-dialog{
    position: relative;
}
#play-main-video .modal-content{
    background-color: #000000ad !important;
    border-radius: 0px !important;
}
#play-main-video .modal-body{
    padding: 0.5rem 2rem 2rem 2rem;
}
#play-main-video .btn-close-modal{
    display: flex;
    justify-content: end;
    color: #fff;
    padding-top: 0.5rem;
    padding-right: 2rem;
}
#play-main-video .btn-close-modal:hover{
    color: #fff !important;
}
.section-3-home .plyr__control--overlaid{
    background-color: transparent !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.06)) !important;
    backdrop-filter: blur(1px) !important;
}
.section-3-home .plyr--full-ui input[type=range]{
    color: #b478ff !important;
}
.section-3-home .plyr__controls [data-plyr=play]:hover,
.section-3-home .plyr__controls [data-plyr=mute]:hover,
.section-3-home .plyr__controls [data-plyr=settings]:hover,
.section-3-home .plyr__controls [data-plyr=pip]:hover,
.section-3-home .plyr__controls [data-plyr=fullscreen]:hover,
.section-3-home .plyr__control--overlaid:hover{
    background-color: #b478ff !important;
}
.css-position{
    position: static;
    z-index:3;
}
/* end custom Home Page */

.footer-text-li:hover {
    color: blue;
}

.checked {
    color: rgb(255, 208, 0);
}

.bg-img-blur {
    background-blend-mode: saturation;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-text-blur {
    backdrop-filter: blur(3px);
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}


/* calendar start */

.main-calendar-img {
    margin-top: 0px;
    position: relative;
    z-index: 1;
}

.div1-calendar {
    margin-top: 0px;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 14px;
}

.div2-calendar {
    position: absolute;
    margin-top: 18px;
    margin-left: 16.5px;
    z-index: 3;
    width: 100%;
    height: 100%;
    width: 40px;
    height: 40px;
    border: 1px solid #CBCBCB;
    box-sizing: border-box;
    border-radius: 5px;
}

.div3-calendar {
    position: absolute;
    z-index: 4;
    margin-top: 13px;
    margin-left: 15px;
    width: 42.5px;
    height: 7.53px;
    background: #DB351E;
    border-radius: 2px;
}


/* calendar end*/

.tag-Webinar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    background: #E6F3F3;
    border-radius: 2px;
    width: 61px;
    height: 22px;
    color: #1A8C93;
}

.tag-joint-study {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    background: #FEF3EE;
    border-radius: 2px;
    width: 61px;
    height: 22px;
    color: #EB7942;
}

#nav-tabs-discount .nav-link.active{
    font-weight: 600;
    color: #5E4481 !important;
}
#nav-tabs-discount .nav-link:hover {
    color: #5E4481 !important;
}

#myTab .nav-link.active,
#myTab .show>.nav-link {
    color: #5E4481;
    background-color: #F5F2FA;
    border-radius: 8px;
}

.nav-link {
    color: #BDBDBD;
}

.tag-say {
    font-family: Hiragino Mincho Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 96px;
    line-height: 25px;
    color: #E6F3F3;
}

.tag-say2 {
    width: 25px;
    height: 51px;
    font-family: Kanit;
    font-style: normal;
    font-weight: 300;
    font-size: 64px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: justify;
    letter-spacing: 0.01em;
    color: #E1E1E1;
}

/* This is purely for the demo */

.video-preview {
    max-width: 500px;
    margin: 0 auto;
}

/* This is purely for the demo */

.btn-hover-purple {
    border: 1px solid #000;
}

.btn-hover-purple:hover {
    border: 1px solid #fff;
    background-color: #5E4481;
    color: #fff;
}

.btn-hover-red {
    border: 1px solid #fff;
}

.btn-hover-red:hover {
    border: 1px solid #E8284D;
    background-color: #E8284D;
}

.overflow-x-container {
    overflow: auto;
}

.content-overflow-x {
    padding-right: 60px;
    min-width: 1350px;
    overflow-x: scroll;
}


/* Hide scrollbar for Chrome, Safari and Opera */

.overflow-x-container::-webkit-scrollbar {
    display: none;
}

.content-overflow-x::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */

.overflow-x-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.content-overflow-x {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.box-scroll li>.nav-link:hover {
    color: #5E4481
}


/* start custom About Page */
.section-1-about .img-1 {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.section-1-about .img-2 {
    width: 100%;
    max-height: 140px;
    border-radius: 16px;
    object-fit: cover;
}

.section-1-about .img-3 {
    width: 100%;
    max-height: 140px;
    border-radius: 16px;
    object-fit: cover;
}

.section-1-about .img-4 {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.section-3-about .img-1 {
    width: 100%;
    max-width: 462px;
    border-radius: 16px;
}
.section-4-about .img-1 {
    width: 100%;
    max-width: 462px;
    border-radius: 16px;
}

/* end custom About Page */

/* start custom Activity News Page */
.section-1-activity-news .splide__pagination{
    bottom: -1em !important;
}
/* .section-1-activity-news .splide__arrow--prev{
    margin-left: -5em;
}
.section-1-activity-news .splide__arrow--next{
    margin-right: -5em;
} */
#iFormActivityNews{
    width: 50%;
}
#navTabActivityNews .slick-track {
    transform: translate3d(340px, 0px, 0px) !important;
}
#navTabActivityNews .tablistt .nav-item button.active,
#navTabActivityNews .tablistt .nav-item .nav-link:hover{
    color: #fff !important;
    background: #5E4481 !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 24px !important;
    border: 0;
}

#navTabActivityNews .tablistt .nav-item .nav-link{
    color: #AAAAAA;
    border-radius: 24px !important;
    border: 0;
    background: 0 0;
}

#navTabActivityNews .nav-item button.active,
#navTabActivityNews .nav-item .nav-link:hover{
    color: #fff !important;
    background: #5E4481 !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 24px !important;
}

#navTabActivityNews .nav-item .nav-link{
    color: #AAAAAA;
    border-radius: 24px !important;
}
#navTabActivityNews #iFormActivityNews .input-group{
    width: 100%;
    height: 100%;
    /* max-width: 243px; */
    max-height: 48px;
}
#navTabActivityNews #iFormActivityNews .input-group{
    box-shadow: 0px 4px 14px rgb(0 0 0 / 8%);
}
#navTabActivityNews #iFormActivityNews input{
    border-left: 0px;
    background: #fff;
    background-color: #fff;
    box-shadow: none;
    padding-left: 0px;
}
#btn-form-search-activity-news{
    cursor: pointer;
    background: #fff;
    background-color: #fff;
    color: #767676;
    border-radius: 8px 0px 0px 8px;
    border-right: 0px;
}
#btn-form-search-activity-news:hover > i{
    color: #5E4481;
    font-weight: 600;
}
.btn-view-detail-activity-news{
    cursor: pointer;
    display: inline-block;
    padding: 8px 40px;
    color: #5E4481;
    background: #FFFFFF;
    border: 1px solid #5E4481;
    border-radius: 8px;
}
.btn-view-detail-activity-news:hover{
    color: #fff;
    background: #5E4481;
    border: 1px solid #5E4481;
}
.set-table-td{
    display: flex;
    height: 72px;
    align-items: center;
    justify-content: center;
}
.btn-tags-category{
    padding: 8px 16px;
    background: #F7F7F7;
    border: 1px solid #EBEBEB;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.04);
    border-radius: 100px;
}
.btn-tags-category:hover{
    color: #5E4481;
    background: #F5F2FA;
    border: 1px solid #5E4481;
}

#activity_show_tinymce_detail img{
    width: 100% !important;
    height: auto !important;
}
/* end custom Activity News Page */

/* start custom OIT Page */
.banner-pb-info {
    background-position: center center;
    background-size: cover;
}

#pb-info .head-title{
    border-radius: 8px 8px 0px 0px;
    /* border: 1px solid #E1E1E1; */
    border-bottom: 0px;
    padding: 0;
    margin: 0;
}

#pb-info .head-title div{
    padding: 0.875em;
    color: #fff;
    background: #5E4481;
    box-sizing: border-box;
    border-radius: 8px;
}

.list-group-pb-info {
    border: 1px solid #E1E1E1;
    border-radius: 8px;
}

.head-title-btn, .head-title-btn-no-drop {
    width: 100%;
    padding: 00.875em;   
    cursor: pointer;
    background: inherit;
    border: none;
    outline: none;
    text-align: left;
    /* transition: all 0.5s linear; */
    border-top: 1px solid #E1E1E1;
}

.head-title-btn:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}

.head-title-btn.is-open:after {
    transform: rotate(-180deg);
}

.head-title-btn:hover,
.head-title-btn-no-drop a:hover,
.head-title-btn.is-open {
    color: #5E4481;
}

.head-title-content {
    max-height: 0;
    font-size: 0.875rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.head-title-content .content {
    padding-left: 36px;
    padding-right: 36px;
    
}
.sub-list-first{
    border-top: 0px;
}
.list-link-navigate {
    background: rgba(250, 246, 255, 0.95);
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid #E1E1E1;
}

.list-link-navigate ul a:hover {
    color: #784BB5;
}

.btn-oit-year-active{
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    color: #5E4481;
    background: rgba(250, 247, 255, 0.946);
    border: 1px solid #5E4481;
    border-radius: 8px;
}
.btn-oit-year{
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    color: #000;
    background: rgba(255, 255, 255, 0.946);
    border: 1px solid #DDDDDD;
    border-radius: 8px;
}
.btn-oit-year:hover, .btn-oit-year-active:hover{
    color: #fff;
    background: #5E4481;
    border: 1px solid #5E4481;
    border-radius: 8px;
}
.div-bar-square-pp {
    width: 6px;
    height: 32px;
    background: #5E4481;
}
.div-bar-square-pp-sm {
    width: 4px;
    height: 20px;
    background: #5E4481;
}
.div-download-icon-circle{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    color: #5E4481;
    border-radius: 50%;
    background: #F2F1F1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.tap-div-download-oit{
    cursor: pointer;
}
.tap-div-download-oit:hover div div,
.tap-div-download-oit:hover i{
    color: #784BB5;
}

.oit_complaints_suggestions{
    cursor: pointer;
    width: 100%;
    height: 100%;
    max-height: 56px;
    border: 1px solid #000;
    border-radius: 12px;
    padding: 16px 0px;
    text-align: center;
    transition: all 0.5ms;
}
.oit_complaints_suggestions:hover{
    color:#fff;
    background-color: #5E4481;
    border-color: #5E4481;
    transition: all 0.5ms;
}
/* end custom OIT Page */

/* start custom Our Team */
.img-person-admin {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    width: 215px;
    height: 271px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: opacity 0.5s;
    opacity: 1;
}
.img-person-admin-2 {
    position: absolute;
    z-index: 1;
    width: 215px;
    height: 271px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: opacity 0.5s;
    opacity: 1;
}
.img-person {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    width: 254px;
    height: 254px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: opacity 0.5s;
    opacity: 1;
}
.img-person-2 {
    position: absolute;
    z-index: 1;
    width: 254px;
    height: 254px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: opacity 0.5s;
    opacity: 1;
}

.img-person:hover,.img-person-admin:hover{
    transition: 0.5s;
    opacity: 0;
}
/* end custom Our Team */

/* strat custom Knowledge Page */

.section-1-knowledge .img-1 {
    width: 100%;
    max-width: 558px;
    border-radius: 16px;
}
/* end custom Knowledge Page */

/* start custom Life Skills Page */
@media only screen and (min-width: 1025px){
    .life-section-2{
        margin-left: 15%;
    }
}
.btn-le-color,
.btn-mooc-color,
.btn-ct-color,
.btn-adv-color,
.btn-dt-sci-color,
.btn-etn-acdm-color,
.btn-nwtk-color,
.btn-sk4l-color,
.btn-idp-color,
.btn-medee-color,
.btn-adte-color{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 114px;
    height: 42px;
    color: #fff;
    border-radius: 4px;
}
.btn-le-color{ background: #5E4481; }
.btn-mooc-color{ background: #A2D169; }
.btn-ct-color{ background: #53BDCA; }
.btn-adv-color{ background: #EB7942; }
.btn-dt-sci-color{ background: #3773B5; }
.btn-etn-acdm-color{ background: #691018; }
.btn-nwtk-color{ background: #F26723; }
.btn-medee-color{ background: #E8284D; }
.btn-sk4l-color{ background: #3B589E; }
.btn-idp-color{ background: #7bb7b2; }
.btn-adte-color{ background: #777; }

.btn-le-color:hover,
.btn-mooc-color:hover,
.btn-ct-color:hover,
.btn-adv-color:hover,
.btn-dt-sci-color:hover,
.btn-etn-acdm-color:hover,
.btn-nwtk-color:hover,
.btn-sk4l-color:hover,
.btn-idp-color:hover,
.btn-medee-color:hover,
.btn-adte-color:hover{
    color: #fff;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
}
.btn-assessment-sk4l{
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    padding: 8px 40px;
    background-color: #3FABF5;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 2px 0px rgb(63 173 243), 0px 4px 10px rgb(63 173 243);
    transform: scale(1);
    transition: transform 0.2s;
}
.btn-assessment-sk4l:hover{
   color: #fff;
   transform: scale(0.98);
   transition: transform 0.2s;
}
.section-3-life-skills .container .tab-content .card-body>h5 {
    color: #5E4481;
}

.section-3-life-skills #myTab li button:hover {
    color: #5E4481;
}

/* Modified Image Carousel Slider  */
.section-2-life-skills .card{
    padding: 24px;  
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.12);
    border-radius: 24px;
}
.section-2-life-skills img{
    width: 100%;
    height: 100%;
    max-width: 80px;
    max-height: 80px;
    filter: drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.04));
    border-radius: 8px;
}
.card-text-lm:hover {
    color: #784BB5;
    font-weight: 600;
}
/* Modified Image Carousel Slider */

/* end custom Life Skills Page */

/*start custom Career Skills Page */
.box-gallery {
    max-width: 470px;
    margin-right: 10px;
}

.section-1-career-skills .img-gallery {
    max-width: 147px;
    width: 100%;
}

#overflow-fb-x {
    overflow-x: scroll;
}

#overflow-fb-x .card {
    width: 324px !important;
}

/* only scrollbar */
/* width */
#overflow-fb-x::-webkit-scrollbar {
    height: 6px;
    border-radius: 4px;
}

/* Track */
#overflow-fb-x::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
#overflow-fb-x::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

/* Handle on hover */
#overflow-fb-x::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}
/* only scrollbar */

.section-2-career li>.nav-link:hover {
    color: #5E4481
}

.section-2-career-skills .btn-search {
    border-radius: 8px;
    background-color: #5E4481;
    color: #fff;
}

.section-2-career-skills .container .tab-content .card-body>h5 {
    color: #5E4481;
}

.section-2-career-skills #myTab li button:hover {
    color: #5E4481;
}

.section-3-career-skills .container {
    margin-top: 100px;
}

.section-3-career-skills .row .box-img {
    position: relative;
}

.section-3-career-skills .row .box-img img {
    position: absolute;
    width: 100%;
    max-width: 558px;
    border-radius: 20px;
    top: -100px;
}

/* .section-1-course-detail .plyr {
    width: 100% !important;
    height: 100% !important;
    max-width: 480px !important;
    max-height: 334px !important;
    border-radius: 20px !important;
} */
.section-1-course-detail .plyr{
    margin: 0px !important;
    padding: 0px !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
}
/*end custom Career Skills Page */


/* start custom Joint Study Page */
.bg-pp-le {
    background-color: #5E4481;
}
.bg-pp-pale-le {
    background-color: #EEE9F3;
}
/* start fullcalendar */
.fc-daygrid-day-number:hover {
    color: #5E4481 !important;
}
.fc .fc-highlight {
    background: rgb(220 191 245 / 30%) !important;
}
.fc .fc-button-primary {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.fc .fc-button-primary:hover {
    color: #ffffff !important;
    background-color: #5E4481 !important;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #5e448173 !important;
}

.fc-event-title-container, .fc-event-time{
    font-size: 0.75em !important;
    font-weight: 600 !important;
}

/* end fullcalendar */

.section-1-joint-study .btn-purple-regis {
    height: 42px;
    background-color: #5E4481;
    color: #Fff;
    border-radius: 4px;
}

.section-1-joint-study .btn-purple-regis:hover {
    background-color: #784BB5;
    color: #Fff;
}

.section-1-joint-study .btn-outline-dark {
    height: 42px;
}

.fix-css-video-js {
    border-radius: 16px !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.fix-css-video-js .plyr{
    margin: 0px !important;
    padding: 0px !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
}
.section-2-joint-study .btn-search {
    border-radius: 8px;
    background-color: #5E4481;
    color: #fff;
}

.sub-section-3-joint-study .text-sec{
    color: #AAAAAA;
}
.sub-section-3-joint-study .icon-slide{
    height: 27px;
    position: absolute;
    left: 0px;
    top: 15px;
    z-index: 1;
}
.btn-list, .btn-list-before{
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: #F7F7F7;
    border: 1px solid #B1BECB;
    color: #B1BECB;
    box-sizing: border-box;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.btn-card,.btn-card-after {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: #F7F7F7;
    border: 1px solid #B1BECB;
    color: #B1BECB;
    box-sizing: border-box;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.list-card-active {
    color: #5E4481 !important;
    border-color: #5E4481 !important;
}

.list-card-not-active:hover{
    color: #ffffff !important;
    background-color: #5E4481;
    cursor: pointer;
}
/* start table */
.sub-section-3-joint-study .table>:not(:last-child)>:last-child>*{
   border-bottom-color: #E7E7E7 !important;
}

/* .sub-section-3-joint-study .table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #ffffffcb;
 } */

.sub-section-3-joint-study .thead-title {
    background-color: #5E4481;
    line-height: 48px;
}
.sub-section-3-joint-study .thead-title tr th {
    padding-left: 40px;
}
.sub-section-3-joint-study .thead-sub-title {
    background-color: #EEE9F3;
    line-height: 27px;
}

.sub-section-3-joint-study .thead-sub-title tr th{
    padding-left: 40px;
    color: #5E4481;
    border-bottom-width: 0px !important;
}

.sub-section-3-joint-study tbody tr td {
    padding-left: 40px;
    font-size: 14px;
    font-weight: 400;
}

.sub-section-3-joint-study tbody tr td .text-detail{
    display: flex;
    height: 72px;
    align-items: center;
}

.sub-section-3-joint-study .text-detail div{
    display: block;
}

.code-subject{
    font-size: 14px;
    font-weight: 600;
    color: #5E4481;
}

.qualification{
    color: #A4CE57;
}

.qualification-2{
    color: #EB7942;
}

.btn-more-detail{
    font-size: 12px;
    font-weight: 500;
    max-width: 110px;
    height: 40px;
    color: #5E4481;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    border-radius: 8px;
}

.btn-more-detail:hover{
    color: #fff;
    background-color: #5E4481;
    border: 1px solid #fff;
}

/* end table */
/* start card */
#faculty-title {
    height: 55px;
    background-color: #5E4481;
    display: flex;
    align-items: center;
    padding-left: 40px;
}
/* end card */

.section-4-joint-study .row .box-img {
    position: relative;
}
.sub-section-3-joint-study .ds-none{
    opacity: 0;
    display: none;
}

.sub-section-3-joint-study .ds-opacity {
    opacity: 1;
    -webkit-animation: opacity-transition 1s both;
    animation: opacity-transition 1s both;
}
@-webkit-keyframes opacity-transition {
    0% {
        opacity: 0;
    }
}
@keyframes opacity-transition {
    0% {
        opacity: 0;
    }
}

.overflow-x-table {
    overflow-x: scroll;
}

/* only scrollbar */
/* width */
.overflow-x-table::-webkit-scrollbar {
    height: 6px;
    border-radius: 4px;
}

/* Track */
.overflow-x-table::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
.overflow-x-table::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

/* Handle on hover */
.overflow-x-table::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}
/* only scrollbar */

.section-4-joint-study .row .box-img img {
    position: absolute;
    width: 100%;
    max-width: 558px;
    border-radius: 20px;
    top: -100px;
}

#overflow-feedback-s-t {
    overflow-x: scroll;
}

#overflow-feedback-s-t .card{
    width: 324px !important;
}

/* only scrollbar */
/* width */
#overflow-feedback-s-t::-webkit-scrollbar {
    height: 6px;
    border-radius: 4px;
}

/* Track */
#overflow-feedback-s-t::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
#overflow-feedback-s-t::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

/* Handle on hover */
#overflow-feedback-s-t::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}
/* only scrollbar */

.box-calendar-schedule {
    width: 72px !important;
    height: 72px;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0.2) 0%, rgba(245, 245, 245, 0) 100%), #F5F5F5;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    margin-right: 24px;
}

.box-calendar-schedule .day{ 
    width: 100%;
    height: 13px;
    color: #AAAAAA;
}

.box-calendar-schedule .date{
    height: 35px;
    width: 100%;
}

.box-calendar-schedule .month-year{
    width: 100%;
    height: 15px;
    color: #AAAAAA;
}

.box-schedule-start {
    position: relative;
    width: 48px;
    max-height: 36px;
    color: #1A8C93;
    background: #E6F8EA;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-right: 10px;
}

.box-schedule-detail .date-time-start {
    color: #1A8C93;
}

.box-schedule-end {
    position: relative;
    width: 48px;
    max-height: 36px;
    color: #E24F49;
    background: #FDE4E8;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-right: 10px;
    margin-left: 40px;
    padding-left: 0;
    padding-right: 0;
}

.box-schedule-detail .date-time-end {
    color: #E24F49;
}

.overflow-y-container {
    overflow: auto;
}

.content-overflow-y {
    max-height: 560px;
    overflow-y: scroll;
}

/* only scrollbar */
/* width */
.content-overflow-y::-webkit-scrollbar {
    width: 6px;
    border-radius: 4px;
}

/* Track */
.content-overflow-y::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
.content-overflow-y::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

/* Handle on hover */
.content-overflow-y::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}
/* only scrollbar */

.box-grade-s,.box-grade-w,.box-grade-d,.box-grade-b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38.77px;
    height: 38.77px;
    color: #10CA39;
    background: #E6F8EA;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 11px;
}
.box-grade-w {color: #caae10 !important; background: #f8f8e6 !important;}
.box-grade-d {color: #ca1010 !important; background: #f8e6e6 !important;}
.box-grade-b {color: #070707 !important; background: #96908b !important;}

.btn-bg-js{
    background-color: #EB7942;
    color: #Fff;
    border-radius: 4px;
}

.btn-bg-js:hover {
    color: #Fff;
    background-color: #ff7837;
}
/* end custom Joint Study Page */

/* start custom About Joint Study Page */
.section-1-about_joint_study .splide__arrow svg{
    fill: #DDDDDD !important;
}

.section-1-about_joint_study .splide__arrow svg:hover{
    fill: #5E4481 !important;
}
.section-1-about_joint_study .splide__arrow{
    background-color: transparent !important;
    border: none !important;
}

.section-1-about_joint_study .splide--nav>.splide__track>.splide__list>.splide__slide ,
.splide--fade>.splide__track>.splide__list>.splide__slide{
    border-radius: 12px;;
}
.section-1-about_joint_study .splide--nav>.splide__track>.splide__list>.splide__slide.is-active{
    border-color: #DDDDDD;
}

.section-1-about_joint_study .splide__pagination__page.is-active{
    background: #5E4481;
}

.section-1-about_joint_study .splide__pagination__page:hover{
    background: #5E4481;
}

.section-2-about_joint_study .box-icon{
    display: block;
    width: 100%;
    max-width: 155px;
    height: 163px;
    background: #FDFDFD;
    border: 0.5px solid #F2F5F8;
    box-sizing: border-box;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
}

.section-2-about_joint_study .box-icon img{
    max-width: 100px;
}

.section-4-about_joint_study .b-icon {
    width: 100%;
    height: 100%;
    max-width: 140px;
    max-height: 150px;
    background: #FDFDFD;
    border: 0.5px solid #F2F5F8;
    box-sizing: border-box;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.section-4-about_joint_study .b-icon2 {
    width: 100%;
    height: 100%;
    padding: 8px 32px;
    /* max-width: 140px; */
    max-height: 91px;
    background: #FDFDFD;
    border: 0.5px solid #F2F5F8;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
}

.section-4-about_joint_study .icon,
.section-4-about_joint_study .icon2 {
    text-align:center;
}

/* start subject detail */
.section-1-subject_detail .joint-study {
    color: #EB7942;
    height: 32px;
    background: #FEF3EE;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
/* start subject detail */
/* end custom About Joint Study Page */

/* start course detail */

.section-1-course-detail .short-term-training {
    color: #53BDCA;
    height: 32px;
    background: #F2F5F8;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}

.share-btn , .print-btn, .share-btn-drak {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(244, 244, 244, 0.2) 100%), #F7F7F7;
    border: 1px solid #E1E1E1;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.share-btn:hover, .print-btn:hover{
    border: 1px solid #000 !important;
    color: #000 !important;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08)) !important;
}
.rs-sm .share-btn ,.rs-sm .print-btn{
    color: #fff !important;
    background-color: transparent !important;
    border-color: #fff !important;
}
.rs-sm .share-btn-drak {
    color: #000 !important;
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(244, 244, 244, 0.2) 100%), #F7F7F7;
    border: 1px solid #E1E1E1;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.section-1-course-detail .btn-detail button {
    width: 100%;
    height: 48px;
    background: #F8F8F8;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}

.section-1-course-detail .btn-detail .detail-1 {
    animation: fadeDown 0.3s ease-in both;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.detail-hide {
    display: none;
}

.box-icon {
    margin-top: -10px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.box-icon i {
    font-size: 1.25rem;
    color: #98E5E5;
    width: 17.5px !important;
    height: 19.25px !important;
}

.btn-enroll {
    width: 100%;
    max-width: 368px;
    line-height: 46px;
    border: 0px;
    color: #fff;
    background: #5E4481;
    box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.12), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
}

.btn-deadline {
    width: 100%;
    cursor: no-drop !important;
    /* max-width: 368px; */
    height: 56px;
    background: #ABABAB;
    border-radius: 100px;
    color: #fff;
    border: none;
    box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.12), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
}
.btn-st-study{
    width: 100%;
    /* max-width: 368px; */
    height: 56px;
    background: #5E4481;
    border-radius: 100px;
    color: #fff;
    border: none;
    box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.12), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
}
.btn-st-study:hover,
.btn-enroll:hover {
    background: #784BB5;
    color: #fff;
}
.addboxicon {
    background: #F7F7F7;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.btn-drop-show {
    width: 100%;
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
    background: #F8F8F8;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
    outline: none;
    text-align: left;
    /* transition: all 0.5s linear; */
}

.section-1-subject_detail .btn-drop-show:after,
.section-1-course-detail .btn-drop-show:after ,
.section-1-package-detail .btn-drop-show:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}

.btn-drop-show.is-open:after {
    transform: rotate(-180deg);
}

.btn-drop-show:hover,
.btn-drop-show.is-open {
    color: #5E4481;
    background: #F8F4FC;
    border-color: #5E4481;
}

.drop-content {
    max-height: 0;
    font-size: 0.875rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.drop-content .content {
    padding-left: 24px;
    padding-right: 24px;
}
/* end course detail */

/* start FAQ */

.acc-btn {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
    background: inherit;
    border: none;
    outline: none;
    text-align: left;
    /* transition: all 0.5s linear; */
    /* border-top: 1px solid #E1E1E1; */
    border-bottom: 1px solid #E1E1E1;
}

.acc-btn:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}

.acc-btn.is-open:after {
    transform: rotate(-180deg);
}

.acc-btn:hover,
.acc-btn.is-open {
    color: #5E4481;
}
.section-5-about_joint_study .acc-btn:hover,
.section-5-about_joint_study .acc-btn.is-open {
    color: #E86F35 !important;
}

.acc-content {
    max-height: 0;
    font-size: 0.875rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.acc-content .content {
    padding-left: 48px;
    padding-right: 48px;
}

/* end FAQ */

/* start custom profile */
#btn_guideline_before_sending_information{
    color: red;
}
#btn_guideline_before_sending_information:hover{
    color: rgb(255, 187, 0);
}
#pf-mg-top {
    margin-top: 146px;
}

.card-pf{
    /* max-width: 270px; */
    width: 100%;
    padding: 16px;
}

#edit_profile_img .form-check-input:checked{
    background-color: #5E4481;
    border-color: #5E4481;
}

.btn-cmu-le-card {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #5E4481;
    margin: 24px 0px 16px 0px;
    width: 100%;
    height: 42px; 
    background: #F5F2FA; 
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px; 
}
.btn-cmu-le-card:hover {
    color: #fff;
    background-color: #5E4481;
    border-color: #5E4481;
    box-shadow: 1px 2px 2px #000
}
.btn-savelecard{
    color: #fff;
    background-color: transparent;
    width: 130px;
    height: 42px;
    border: 1px solid #fff;
}
.btn-savelecard-small{
    display: flex;
    color: #fff;
    background-color: transparent;
    width: 130px;
    height: 24px;
    border: 1px solid #fff;
    border-radius: 4px;
    justify-content: center;
}
.btn-savelecard:hover, .btn-savelecard-small:hover{
    color: #5E4481;
    background-color: #fff;
}
.btn-pen-edit {
    cursor: pointer;
    color: #AAAAAA;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(244, 244, 244, 0.2) 100%), #F7F7F7;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.btn-pen-edit:hover {
    color: #fff;
    background-color: #5E4481;
    border: 0px;
    box-shadow: 1px 2px 2px #000
}

.btn-pf-login-fb {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 42px; 
    color: #fff;
    background-color: #3B589E;
    border: 1px solid #999999;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 8px;
}
.btn-pf-login-fb:hover, .btn-pf-login-fb:active, .btn-pf-login-fb:focus{ color: white; }

.btn-pf-login-gg, .btn-pf-login-cmu, .btn-pf-login-line {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 42px; 
    background-color: #fff;
    border: 1px solid #999999;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 8px;
}

.btn-pf-login-other {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 42px; 
    color: #757575;
    background-color: #fff;
    border: 1px solid #999999;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 8px;
}

.btn-login-active {
    border-color: #10CA39;
    color: #10CA39;
    cursor: default;
    pointer-events: none;
}

.btn-login-active:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f058";
    font-weight: 900;
    font-size: 1rem;
    transition: all 0.3s linear;
    color: #10CA39;
    position: absolute;
    right: -8px;
}

#pf-login-fb, #pf-login-gg, #pf-login-cmu, #pf-login-line {
    width: 25px;
    height: 25px;
    margin: 0px 16px 0px 16px;
}

.btn-pf-login-other:hover {
    color: #5E4481;
    border-color: #5E4481;
    background-color: #F4ECFC;
}
.btn-check-claim, .btn-pf-change-password, .btn-pf-delete-account, .btn-pf-discount {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    height: 42px;
    border: 1px solid #000;
    border-radius: 4px;
}

.btn-check-claim:hover, .btn-pf-change-password:hover, .btn-pf-discount:hover {
    color: #fff;
    background-color: #5E4481;
}
.btn-pf-delete-account:hover {
    color: #fff !important;
    background-color: red;
}

.btn-badge-detail {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 38px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}

.btn-badge-detail:hover {
    color: #fff;
    background-color: #5E4481;
    border: 0px;
    box-shadow: 1px 2px 2px #000
}

.row-achivement {
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    box-sizing: border-box;
    border-radius: 14px;
}

.achivement1 {
    padding: 8px 0px 8px 0px;
    background: #F5FFE2;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.1);
    border-radius: 14px 8px 8px 0px;
}
.achivement2 {
    padding: 8px 0px 8px 0px;
    background: #F2F5F8;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.1);
    border-radius: 0px 8px 8px 0px;
}
.achivement3 {
    padding: 8px 0px 8px 0px;
    background: #FEF3EE;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.1);
    border-radius: 0px 8px 8px 14px;
}

.img-badge-lg {
    max-width: 54px;  
    width: 100%;   
}

.box-tracking-am1, .box-tracking-am2, .box-tracking-am3 {
    position: relative;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    min-height: 50px;
}

.line-tc-am1 {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 3px;
    background-color: #A4CE57;
    top: 50%;
}

.tc-circle {
    z-index: 2;
    width: 24px;
    height: 24px;
    background: #F5F5F5;
    border-radius: 50%;
    border: 8px solid #FFFFFF;
}

.box-img-am{
    position: absolute;
    z-index: 3;
    right: -8px;
}
.box-img-am1{
    position: absolute;
    z-index: 3;
    right: -16px;
}

.img-tc {
    width: 100%;
    height: 100%;
    max-width: 35px;
    max-height: 35px;
}

.icon-check-am1 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #A4CE57;
    width: 12px;
    height: 12px;
}

.not-yet {
    background-color: #F5F5F5 !important;
}

.line-tc-am2 {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 3px;
    background-color: #53BDCA;
    top: 50%;
}

.icon-check-am2 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #53BDCA;
    width: 12px;
    height: 12px;
}

.line-tc-am3 {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 3px;
    background-color: #EB7942;
    top: 50%;
}

.icon-check-am3 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #EB7942;
    width: 12px;
    height: 12px;
}

.row-tt-menu .dropdown-toggle::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 500;
    font-size: 1.5rem;
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 30px;
    transition: all 0.3s linear;
    border: 0;
}
.row-tt-menu .dropdown-toggle.show::after{
    color: #fff;
    transform: rotate(-180deg);
} 
.row-tt-menu .dropdown-toggle.show,
.row-tt-menu .dropdown-toggle.show i,
.row-tt-menu .dropdown-toggle.show div{
    color: #fff;
    background-color: #5E4481 !important;
    border-color: #5E4481;
    border-radius: 15px 15px 0px 0px !important; 
} 

.row-tt-menu .dropdown-menu[data-bs-popper]{
    right: 0px;
    margin-top: -1px;
}

.row-tt-menu .dropdown-menu{
    border: 0px;
    border-radius: 0px 0px 15px 15px;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.20);
}

.row-tt-menu .dropdown-menu li {
    border-bottom: 1px solid #D5DEE7;
    box-sizing: border-box;
}
.row-tt-menu .dropdown-menu li a{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}
.row-tt-menu .dropdown-menu li a:hover{
    background-color: #F5F2FA;
}
.btn-col-my-journey {
    width: 100%;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px;
    margin-right: 8px;
    color: #5E4481;
    background: #F5F2FA;
    border-radius: 15px;
    border: 1px solid #ebebeb;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-col-my-journey:hover { 
    color: #fff;
    background: #5E4481;
    border-color: #5E4481;
}

.btn-col-guide-me {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px;
    margin-left: 8px;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid #ebebeb;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.col-not-active:hover {
    color: #fff !important;
    background: #5E4481 !important;
    border-color: #5E4481
}

.c-year {
    display: flex;
    justify-content: center;
    border-radius: 8px 8px 0px 0px;
    background: #F5F2FA;
    border-bottom: 3px solid #5E4481;
}

.tap-nav-toggle li button {
    margin-right: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #BDBDBD;
    border-radius: 8px !important;
}

.tap-nav-toggle li button:hover {
    color: #fff;
    background: #5E4481;
    border-radius: 8px;
    box-shadow: 1px 2px 2px #000
}

.tap-nav-toggle .nav-item .active{
    color: #5E4481 !important;
    background: #F5F2FA;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

#btnPaymentSolvedTab:hover {  color: #fff;  background: #b94a48;   border-radius: 8px;   box-shadow: 1px 2px 2px #000 }

/* .courselist {

} */

.box-cours-tc, .box-course-tc {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.line-cours-tc, .line-course-tc {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #E1E1E1;
}

.circle-cours-tc-wb, .circle-course-tc-wb,
.circle-cours-tc-mooc, .circle-course-tc-mooc,
.circle-cours-tc-dt-sci, .circle-course-tc-dt-sci,
.circle-cours-tc-sk4l, .circle-course-tc-sk4l,
.circle-cours-tc-medee, .circle-course-tc-medee,
.circle-cours-tc-hr, .circle-course-tc-hr,
.circle-cours-tc-edso, .circle-course-tc-edso,
.circle-cours-tc-webinar, .circle-course-tc-webinar,
.circle-cours-tc-advc, .circle-course-tc-advc,
.circle-cours-tc-advc-webinar, .circle-course-tc-advc-webinar,
.circle-cours-tc-stem, .circle-course-tc-stem,
.circle-cours-tc-adte, .circle-course-tc-adte,
.circle-cours-tc-st, .circle-course-tc-st,
.circle-cours-tc-js, .circle-course-tc-js,
.circle-cours-tc-start, .circle-course-tc-start {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 45%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFD52E;
}

.circle-cours-tc-mooc, .circle-course-tc-mooc {    background-color: #A4CE57 !important; }
.circle-cours-tc-dt-sci , .circle-course-tc-dt-sci {    background-color: #3773B5 !important;}
.circle-cours-tc-sk4l, .circle-course-tc-sk4l {    background-color: #4790ff !important;}
.circle-cours-tc-medee, .circle-course-tc-medee {    background-color: #e8284d !important;}
.circle-cours-tc-hr, .circle-course-tc-hr {    background-color: #7b28e8 !important;}
.circle-cours-tc-edso, .circle-course-tc-edso {     background-color: #4ec9b5 !important;}
.circle-cours-tc-webinar, .circle-course-tc-webinar {    background-color: rgba(156, 208, 79, 1) !important;}
.circle-cours-tc-advc, .circle-course-tc-advc {    background-color: rgba(18,67,152,1) !important;}
.circle-cours-tc-advc-webinar, .circle-course-tc-advc-webinar {    background-color: #4ec9b5 !important;}
.circle-cours-tc-stem, .circle-course-tc-stem {    background-color: #00bdc8 !important;}
.circle-cours-tc-adte, .circle-course-tc-adte {    background-color: #777 !important;}
.circle-cours-tc-st , .circle-course-tc-st {     background-color: #53BDCA !important; }
.circle-cours-tc-js, .circle-course-tc-js {     background-color: #EB7942 !important; }
.circle-cours-tc-start , .circle-course-tc-start {    background-color: #5E4481 !important; }

.circle-year-section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    position: absolute;
    z-index: 2;
    color: #5E4481;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #F5F2FA;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-wb, .btn-mooc, .btn-st, .btn-js, .btn-badge-dt-sci, .btn-badge-sk4l, .btn-badge-medee, .btn-badge-hr, .btn-badge-edso, .btn-badge-webinar, .btn-badge-advc, .btn-badge-advc-webinar, .btn-badge-adte, .btn-badge-stem{
    display: flex;     justify-content: center;    align-items: center;    font-size: 0.875rem;    font-weight: 500;    width: 84px;
    height: 30px;    color: #FFD52E;    background: #FFFBEA;    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);    border-radius: 16px;
}
.btn-mooc {    color: #A4CE57 !important;     background: #F5FFE2 !important; }
.btn-badge-dt-sci {     font-size: 0.75rem !important;    color: #3773B5 !important;    background: #E4F1FF !important; }
.btn-badge-sk4l {     color: #4790ff !important;    background: #e8f9ff !important; }
.btn-badge-medee {     color: #e8284d !important;     background: #fee4e9 !important; }
.btn-badge-hr {     font-weight: 600;    color: #7b28e8 !important;    background: #f4e4fe !important;}
.btn-badge-edso {     font-weight: 600;    color: #fff !important;    background: linear-gradient(45deg, rgba(23,197,233,1) 25%, rgba(156,208,79,1) 75%) !important; }
.btn-badge-webinar {    font-weight: 600;    color: #fff !important;    background: linear-gradient(45deg, rgba(156,208,79,1) 25%, rgba(156,208,79,1) 75%) !important; }
.btn-badge-advc {    font-weight: 600;    color: #fff !important;    background: linear-gradient(18deg, rgba(18,67,152,1) 0%, rgba(82,199,163,1) 100%) !important; }
.btn-badge-advc-webinar {    font-weight: 600;    color: #fff !important;    background: linear-gradient(18deg, rgba(82, 199, 163, 1) 0%, rgba(82,199,163,1) 100%) !important; }
.btn-badge-adte {     color: #fff !important;     background: #777 !important; }
.btn-badge-stem {     font-size: 0.75rem !important; color: #fff !important;    background: linear-gradient(90deg,rgba(0, 181, 206, 1) 0%, rgba(120, 219, 184, 1) 100%) !important; }
.btn-st {    font-size: 0.625rem !important;    color: #53BDCA !important;    background: #F2F5F8 !important; }
.btn-js {     color: #EB7942 !important;    background: #FEF3EE !important;}
.btn-wb:hover, .btn-mooc:hover, .btn-st:hover, .btn-js:hover,.btn-badge-sk4l:hover,.btn-badge-medee:hover,.btn-badge-hr:hover,.btn-badge-edso:hover,.btn-badge-webinar:hover, .btn-badge-advc-webinar:hover, .btn-badge-advc:hover ,.btn-badge-adte:hover, .btn-badge-stem:hover{    box-shadow: 1px 2px 2px #000; }

.btn-ready-to-watch {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 35px;
    color: #5E4481;
    background: #FFFFFF;
    border: 1px solid #5E4481;
    box-sizing: border-box;  
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.btn-go-to-class{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 35px;
    color: #5E4481;
    /* color: #ffffff; */
    /* background: #5E4481; */
    border: 1px solid #5E4481;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.btn-join-meeting-pf{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 35px;
    color: #fff;
    /* color: #ffffff; */
    background: #5E4481;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.btn-watch-certificate, .btn-see-grades{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 35px;
    color: #ffffff;
    background: #5E4481;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.btn-cancle-regis-course{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    color: #ffffff;
    background: #dc3545;
    border: 1px solid #dc3545;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.btn-pay-for, .btn-onsite{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 35px;
    color: #5E4481;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    border-radius: 4px;
}

.btn-ready-to-watch:hover,
.btn-pay-for:hover, 
/* .btn-onsite:hover {
    color: #784BB5;
    border: 1px solid #784BB5;
    box-shadow: 0px 4px 14px rgb(0 0 0 / 20%);
}  */

.btn-go-to-class:hover, 
.btn-watch-certificate:hover, 
.btn-see-grades:hover{
    color: #fff;
    background-color: #784BB5;
    border-color: #784BB5;
    box-shadow: 0px 4px 14px rgb(0 0 0 / 20%);
}
.btn-join-meeting-pf:hover{
    color: #fff;
    background-color: #784BB5;
    box-shadow: 0px 4px 14px rgb(0 0 0 / 20%);
}
.overflow-y-tc {
    overflow-y: scroll;
    overflow-x: scroll;
    max-height: 850px;
    padding-left: 10px;
}

/* only scrollbar */
/* width */
.overflow-y-tc::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    border-radius: 4px;
}

/* Track */
.overflow-y-tc::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
.overflow-y-tc::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

/* Handle on hover */
.overflow-y-tc::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}
/* only scrollbar */
.modal {
    overflow-y: hidden !important;
}

.btn-close-modal {
    color: #999999;
    cursor: pointer;
}

.btn-close-modal:hover {
    color: #000 !important;
}

#cmu_le_card .btn-close-modal {
    position: absolute;
    z-index: 999;
    top: 1rem;
    right: 1rem;
}
.modal-content {
    background: #FFFFFF;
    border: 1px solid #E1E1E1 !important;
    box-sizing: border-box !important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 15px !important;
}

.modal .btn-close {
    border-radius: 50%;
    border: 1px solid #999999;
}

.btn-boder-pp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 42px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    border-radius: 4px;
}

.btn-bg-pp {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 120px; */
    /* height: 42px; */

    padding-left: 1.5rem;
    padding-right: 1.5rem;

    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #5E4481;
    border-radius: 4px;
}

.btn-boder-pp:hover {
    color: #fff;
    background-color: #5E4481;
}

.btn-bg-pp:hover {
    background-color: #784BB5;
    color: #fff;
}

#check_claim .modal-content{
    border-color: #5E4481 !important;
}

#check_claim .modal-content input{
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #E1E1E1;
}

#check_claim input,
#check_claim input::-webkit-input-placeholder {
    color: #fff !important;
}

input,
input::-webkit-input-placeholder {
    font-size: 0.875rem;
    line-height: 4;
}

.btn-confirm-check-claim {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 120px; */
    /* height: 42px; */

    padding-left: 1.5rem;
    padding-right: 1.5rem;

    font-size: 1rem;
    font-weight: 500;
    color: #5E4481;
    background: #FDFDFD;
    border-radius: 4px;
}

.btn-confirm-check-claim:hover { 
    color: #5E4481;
    background-color: #eeeeee;
    box-shadow: 1px 2px 2px rgb(0, 0, 0)
}

.btn-cancle {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 120px; */
    /* height: 42px; */

    padding-left: 1.5rem;
    padding-right: 1.5rem;

    font-size: 1rem;
    font-weight: 500;
    color: #E8284D;
    background: #FDF2F4;
    border-radius: 4px;
}

.btn-cancle:hover {
    color: #fff;
    background: #E8284D;
}

.btn-cancle-check-claim {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 42px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 4px;
}

.btn-cancle-check-claim:hover {
    color: #ffffff !important;
    background-color: #E8284D;
    border-color: #FDFDFD;
    box-shadow: 1px 2px 2px rgb(0, 0, 0)
}
.modal-cmu-le-card{
    max-width: 413px;
    height: 616px;
    background-position: center center;
     background-repeat: no-repeat; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     border: 0px !important;
}
/* st for size sm */
.card-pf-rs-sm {
    padding: 15px;
    background: #F7F7F7;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}

.icon-dt {
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 9px;
    color: #999999;
}
.icon-dt:hover{
    color: #000;
}
.img-badge-rs-sm{
    width: 48px;
    height: 48px;
}
.btn-more-badge{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 61px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}
.btn-persenal-info {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    font-size: 1rem;
    font-weight: 500;
    color: #5E4481;
    background: #FBF7FF;
    border: 1px solid #E5D8F1;
    border-radius: 8px;
}

.btn-guide-me, .btn-cmu-le-card-re-sm{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    font-size: 1rem;
    font-weight: 500;
    color: #5E4481;
    background: #FFFFFF;
    border: 1px solid #E5D8F1;
    border-radius: 8px;
}

.btn-persenal-info:hover, 
.btn-guide-me:hover,
.btn-cmu-le-card-re-sm:hover
{
    color: #5E4481;
    background: #FBF7FF;
}

.btn-active-pp-le{
    color: #fff;
    background-color: #5E4481;
    border-color: #5E4481;
}
.container-menu-mobile .menu-mobile{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 500;
    width: 100%;
    height: 64px;
    color: #fff;
    background-color: #5E4481;
}

.container-menu-mobile .dropdown-menu{
    position: relative !important;
    transform: none !important;
    width: 100%;
    padding: 0 !important;
    margin: -2px 0px 0px 0px !important;
    opacity: 0;
    animation: ulfadeIn 0.5s ease-in both;
    border: 0px;
}
@keyframes ulfadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -1%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.container-menu-mobile ul li{
    width: 100%;
    height: 48px;
    background: linear-gradient(180deg, rgba(214, 214, 214, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
    border: 1px solid #D5DEE7;
    box-sizing: border-box;
}
.container-menu-mobile ul li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    color: #5E4481;   
}
.container-menu-mobile ul .bg-active{
    background: linear-gradient(0deg, #F4F2F9, #F4F2F9), #FFFFFF;
}
.container-menu-mobile .dropdown-toggle::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 500;
    position: absolute;
    z-index: 1;
    right: 30px;
    transition: all 0.3s linear;
    border: 0;
}
.container-menu-mobile .menu-mobile.show::after{
    transform: rotate(-180deg);
} 
/* end for size sm */
.overflow-x-tap-nav-toggle{
    overflow-x: auto;
}

.overflow-x-tap-nav-toggle .nav {
    min-width: 800px;
}

.overflow-x-tap-nav-toggle::-webkit-scrollbar {
    height: 6px;
    border-radius: 4px;
}

.overflow-x-tap-nav-toggle::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

.overflow-x-tap-nav-toggle::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;

}

.overflow-x-tap-nav-toggle::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;

}

.btn-back-psn-info {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid #5E4481;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.remove-border {
    border-radius: 0% !important;
    border: 0px !important;
    box-shadow: none !important;
}

.btn-select-active{
    cursor: default;
    color: #fff;
    background-color: #5E4481;
}
.btn-select-active:hover{
    color: #fff;
    background-color: #5E4481;
}
/* page-badge-detail */
.page-badge-detail {
    display: none;
}
.page-badge-detail .tc-circle{
    border: 4px solid #FFFFFF;
}
.acm-mooc,
.acm-ct,
.acm-js {
    height: 90px;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 16px;
}
.acm-mooc .img-tc,
.acm-ct .img-tc,
.acm-js .img-tc{
   max-width: 60px;
   max-height: 60px;
}
.tb-all-badges {
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 22px;
}
.page-badge-detail .img-all-bages{
    max-height: 75px;
    height: 100%;
    width: auto;
}
/* page-badge-detail */

#my-joueney .icon-slide{
    height: 27px;
    position: absolute;
    left: -30px;
    top: 95px;
    z-index: 1;
}
.toggle-password {
    /* float: right; */
    cursor: pointer;
    margin-right: -5px;
    margin-top: -32px;
    color: #999999;
    position: absolute;
    z-index: 1;
    right: 40px;
}
.modal ul .active,.modal ul .active{
    color: #10CA39 !important;
}
.modal .invalid-active {
    border: 1px solid #F61B3E !important;
}
.invalid-active {
    border: 1px solid #F61B3E !important;
}

#btn-add-citizenid, #btn-save-citizenid{
    width: 100%;
    max-width: 104px;
    color: #5E4481;
    background: #FBF7FF;
    border: 1px solid #EBE5F1;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
#btn-add-citizenid:hover, #btn-save-citizenid:hover{
    color: #5E4481;
    font-weight: 600;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-conf-pf-img{
    cursor: pointer;
    height: 42px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #5E4481;
}

#adv_modal_alert_payment .form-check-input:checked {
    background-color: #5E4481 !important;
}

.assessment_score > .title{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.2px;
}
.assessment_score > .detail{
    background: #FFFFFF;
    border: 1px solid #E0E0E0;

    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
.assessment_score > .detail > .totaldetail > .scoretotal > p{
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.2px;
}

.assessment_score > .detail > .totaldetail > .scoretotal > div > p{
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    color: #3B589E;
}
.assessment_score > .detail > .totaldetail > .scoretotal > div > i{
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    color: #C7C9CD;
}
.assessment_score > .detail > .totaldetail > .top3score > p{
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.2px;
}

.assessment_score > .detail > .totaldetail > .top3score > div > div > p{
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    color: #3B589E;
}
.assessment_score > .detail > .totaldetail > .top3score > div > div > i{
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    color: #C7C9CD;
}

.assessment_score > .detail > .totaldetail > .btnviewsumary{
    padding-top: 20%;
}

.btn-filter-dt-sci-pack {
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgb(235, 235, 235);
    background: #fff;
    color: #000;
    box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-filter-dt-sci-pack:hover,
.btn-filter-dt-sci-pack.active {
    color: #fff;
    background-color: #0244A2;
}
/* end custom profile */

/* start custom Profile join study*/
.pf-banner {
    width: 100%;
    height: 100%;
    min-height: 113px;
    max-height: 140px;
    object-fit: cover;
    background-size: cover;
}

.box-pf-img {
    position: absolute;
    top: -60px;
}

.pf-img {
    position: relative;
    max-width: 174px;
    max-height: 174px;
    width: 100%;
    height: 100%;
}

.profile-img {
    min-width: 174px;
    max-width: 174px;
    min-height: 174px;
    max-height: 174px;
    width: 100%;
    height: 100%;
    border: 8px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
}

.btn-change-img-pf {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#757575;
    background: #F7F7F7;
    border-radius: 50%;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.btn-change-img-pf:hover ,
.btn-back-to-index-pf:hover ,
.btn-back-to-index-pf-mm:hover ,
.btn-back-to-pf:hover{
    color: #000;
    border: 1px solid #000000;
    box-sizing: border-box;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
.pf-img-edit{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit: cover;
}

.btn-back-to-pf,.btn-back-to-index-pf,.btn-back-to-index-pf-mm {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    color: #757575;
    border: 1px solid #E1E1E1;
    border-radius: 50%;
}

.section-2-profile-joint-study .btn-drop-show {
    width: 100%;
    height: 58px;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #F7F7F7;
    border: 1px solid #5E4481;
    box-sizing: border-box;
    border-radius: 8px;
    outline: none;
    text-align: left;
    /* transition: all 0.5s linear; */
}

.section-3-joint-study .btn-drop-show:after,
.section-2-profile-joint-study .btn-drop-show:after{
    font-family: "Font Awesome 5 Pro";
    content: "\f0fe";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}
.section-3-joint-study .btn-drop-show.is-open::after,
.section-2-profile-joint-study .btn-drop-show.is-open::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f146" !important;
    font-weight: 900;
    font-size: 24px;
    float: right;
    transition: all 0.3s linear;
}

/* .btn-drop-show.is-open:after {
    transform: rotate(-180deg);
} */

.btn-drop-show:hover,
.btn-drop-show.is-open {
    color: #5E4481;
    background: #F8F4FC;
    border-color: #5E4481;
}

.section-2-profile-joint-study .content-overflow-y {
    max-height: 520px;
}

.section-2-profile-joint-study .drop-content .content {
    padding-left: 0px;
    padding-right: 0px;
}
.circle-icon-section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: #5E4481;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #F5F2FA;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.circle-icon-section img {
    width: 20.5px;
    height: auto;
}

.line-y {
    margin: auto;
    width: 2px;
    height: 70%;
    background-color: #E1E1E1;
}

.circle-icon-payment-receipt, .circle-icon-certificate {
    margin: auto;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    width: 42px;
    height: 42px;
    border: 1px solid #000000; 
    border-radius: 50%; 
    box-sizing: border-box;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}

.circle-icon-payment-receipt:hover, .circle-icon-certificate:hover {
    color: #fff;
    border-color: #5E4481;
    background-color: #5E4481;
}

.btn-disable {
    pointer-events: none !important;
    cursor: default !important;
    color: #E3E3E3 !important;
    background: #FFFFFF !important;
    border: 1px solid #E1E1E1 !important;
}

.section-3-profile-joint-study .overflow-y-tc {
    max-height: 600px !important;
}
/* end custom Profile join study*/

/* start custom Profile short term training*/
.btn-grade{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 105px;
    height: 35px;
    color: #5E4481;
    background-color: #FBF6FF;
    border: 1px solid #EBE5F1;
    box-sizing: border-box;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    border-radius: 4px;
}
.btn-grade:hover{
    color: #fff;  
    background: #5E4481;
    border: #5E4481;
}
.btn-grade-detail {
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #757575;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(244, 244, 244, 0.2) 100%), #F7F7F7;
    border: 1px solid #E1E1E1;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}

.modal-grade-detail {
    position: absolute !important;
    z-index: 2000 !important;
    width: 500px !important;
    height: 400px !important;
}

.modal-grade-detail .btn-close {
    border-radius: 50%;
    border: 1px solid #999999;
}
/* end custom Profile short term training*/

/* start custom Profile mooc*/
#box-progress
{
    width: 200px;
    height: 6px;
    background-color: #CCCCCC;
}

.progress
{
    width: 0%;
    height: 100%;
    background-color: #A4CE57;
}
/* end custom Profile mooc*/

/* start custom Payment*/
.row-header{
    border-bottom: 0px !important;
    border-radius: 8px 8px 0px 0px;
}
.row-header-sub{
    background: #F4ECFC;
    border-radius: 8px;
}
.row-footer{
    border-radius: 0px 0px 8px 8px;
}
.btn-pymt, .btn-payment {   width: 104px; color: #fff; background: #5E4481; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);   border-radius: 8px; }
.btn-pymt:hover, .btn-payment:hover{   color: #fff; }

.btn-view-receipt {
    font-weight: 500;
    width: 114px;
    color: #5E4481;
    border: 1px solid #E5D8F1;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.btn-view-receipt:hover{
    color: #fff;
    background: #5E4481;
}
.form-rdo .form-check-input:checked{
    background-color: #5E4481;
    border-color: #5E4481;

}
/* end custom Payment*/

/* end custom Payment Show*/
.section-payment-show .card{
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.btn-pymt-show-edit{
    color: #5E4481;
    background: #FBF7FF;
    border: 1px solid #EBE5F1;
    box-sizing: border-box;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}
.btn-pymt-show-edit:hover{
    color: #fff;
    background: #5E4481;
}
.card-medthods{
    background: #ffffff;
    border: 1px solid #E1E1E1;
    border-top: 0px;
    box-sizing: border-box;
    border-radius: 8px;
    min-height: 419px;
}
.card-medthods .head-medthods{
    display: flex;
    align-items: center;
    height: 42px;
    background: #F7F7F7;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}
.r-table {
    background: #FBF9F1;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 8px;
}
.c-head {
    border: 1px solid #E1E1E1;
    border-top: 0px;
    border-radius: 8px;
}
.container-loading-wait {    width: 100%;    height: 20vh;    display:grid;    place-items: center;  }
.loading-wait {    display: flex;    transform: scale(4); }
.loading-wait .ball {     width: 0.4rem;     height: 0.4rem;     border-radius: 0.5rem;     transition: transform 0.3s infinite; }
.ball + .ball {    margin-left: 0.4rem; }
.loading-wait .ball.one {    animation: loading-wait-ball 0.5s infinite alternate;    background: #5E448130; }
.loading-wait .ball.two {     animation: loading-wait-ball2 0.5s infinite 0.2s alternate;    background: #5E448130;}
.loading-wait .ball.three {     animation: loading-wait-ball3 0.5s infinite 0.35s alternate;    background: #5E448130; }
.loading-wait .ball.four {     animation: loading-wait-ball4 0.5s infinite 0.5s alternate;    background: #5E448130; }
@keyframes loading-wait-ball {
    0% {   transform: translateY(0);    }
    0% {   transform: translateY(-10px) scale(1.2);   background: #5E4481;   box-shadow: 0 0 2px #5E4481aa;    }
    100% {   transform: translateY(5px);   }
}
@keyframes loading-wait-ball2 {
    0% {      transform: translateY(0);     }
    0% {     transform: translateY(-10px) scale(1.2);     background: #5E4481;     box-shadow: 0 0 2px #5E4481aa;    }
    100% {      transform: translateY(5px);    }
}
  @keyframes loading-wait-ball3 {
    0% {      transform: translateY(0);    }
    0% {      transform: translateY(-10px) scale(1.2);      background: #5E4481;      box-shadow: 0 0 2px #5E4481aa;    }
    100% {      transform: translateY(5px);    }
}
@keyframes loading-wait-ball4 {
    0% {  transform: translateY(0);    }
    0% {  transform: translateY(-10px) scale(1.2);      background: #5E4481;      box-shadow: 0 0 2px #5E4481aa;    }
    100% {        transform: translateY(5px);    }
}
/* end custom Payment Show*/

.text-border-white{ text-shadow: -1px -1px 0 #FFF,  1px -1px 0 #FFF,  -1px 1px 0 #FFF,  1px 1px 0 #FFF; }

/* start custom menu mobile profile */
.menu-bar-pf-overflow-x {
    overflow-x: auto;
}
.menu-bar-pf-overflow-x::-webkit-scrollbar {
    display: none;
}
.menu-bar-pf {
    display: flex;
    min-height: 64px;
    background: #FFFFFF;
    border: 1px solid #D5DEE7;
}
.menu-bar-pf .dropdown-list-menu {
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
}

/* .menu-bar-pf .dropdown-menu{
    width: 100%;
} */

.menu-bar-pf .dropdown-menu li{
    border-bottom: 1px solid #F2F5F8;
}
/* end custom menu mobile profile */

/* start custom guide me */
.section-2-guide-me .card-title{
    color: #5E4481;
}
.sl-choice {
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.sl-choice input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.sl-choice .checkmark {
    color:#000;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding: 11px;
    margin-bottom: 16px;
    width: auto;
    height: 48px;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    border-radius: 100px;
    background: #FFF;
}

/* On mouse-over, add a grey background color */
.sl-choice:hover input ~ .checkmark {
    color: #5E4481;
    background-color: #fff;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
}

/* When the checkbox is checked, add a blue background */
.sl-choice input:checked ~ .checkmark {
    background: #FBF6FF;  
    border-color: #5E4481;      
}

/* Create the checkmark/indicator (hidden when not checked) */

/* Show the checkmark when checked */
.sl-choice input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.sl-choice .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn-confirm-search-gm{ 
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    max-width: 405px;
    height: 42px;
    margin-top: 8px;
    margin-bottom: 64px;
    color: #5E4481;
    background-color: #FBF6FF;
    border: 1px solid #EBE5F1;
    box-sizing: border-box;
    border-radius: 8px;
}
.btn-confirm-search-gm:hover{
    color: #fff;
    background-color: #5E4481;
    border-color: #5E4481;
}

.section-2-guide-me .icon-slide{
    height: 27px;
    position: absolute;
    left: -7px;
    top: 30px;
    z-index: 1;
}

@media only screen and (min-width: 750px) {
    .padding-md-lg{
        padding-left: 50px;
        padding-right: 50px;
    }
}
.take-the-questionnaire-again {
    margin-top: 32px;
    max-width: 351px;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5E4481;
    background: #FBF7FF;
    border: 1px solid #EBE5F1;
    box-sizing: border-box;
    border-radius: 8px;
}
.take-the-questionnaire-again:hover{
    color: #fff;
    background: #5E4481;
    border-color: #5E4481;
}
/* end custom guide me */

/* start menu menu-bar dropdown */
.menu-bar-overflow{
    overflow-x: auto;
}
.menu-bar-overflow::-webkit-scrollbar {
    display: none;
}
.navbar-sec{
    height: 72px;
    width: 100%;
    min-width: 1070px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 0px 0px 20px 20px;
}
.navbar-sec .dropdown-menu[data-bs-popper]{
    top: auto !important;
}
.navbar-sec .nav-item{
   /* min-width: 178px; */
   min-width: 215px;
}
.navbar-sec .nav-item .show{
    color: #5E4481 !important;
    font-weight: 500;
    /* background-color: #F6F6F6; */
}
/* for data science */
.nav-dt-sci.navbar-sec .nav-item:hover,
.nav-dt-sci.navbar-sec .nav-item .nav-link:hover,
.nav-dt-sci.navbar-sec .nav-item .nav-link:active, 
.nav-dt-sci.navbar-sec .nav-item .nav-link:focus {
    color: #3773B5 !important;
    font-weight: 500;
    background-color: #E4F1FF;
}
.nav-dt-sci .sub-menu a:hover {
    font-weight: 500;
    color: #3773B5 !important;
    /* background-color: #F5F2FA; */
}
/* for data science */

/* for nakwittidcook */
.nav-nwtc.navbar-sec .nav-item:hover,
.nav-nwtc.navbar-sec .nav-item .nav-link:hover,
.nav-nwtc.navbar-sec .nav-item .nav-link:active, 
.nav-nwtc.navbar-sec .nav-item .nav-link:focus {
    color: #F26723 !important;
    font-weight: 500;
    background-color: #FEF0E9;
}
.nav-nwtc .sub-menu a:hover {
    font-weight: 500;
    color: #F26723 !important;
    /* background-color: #F5F2FA; */
}
/* for nakwittidcook */

/* for swc */
.nav-swc.navbar-sec .nav-item:hover,
.nav-swc.navbar-sec .nav-item .nav-link:hover,
.nav-swc.navbar-sec .nav-item .nav-link:active, 
.nav-swc.navbar-sec .nav-item .nav-link:focus {
    color: #9E1F63 !important;
    font-weight: 500;
    background-color: #F7E2ED;
}
.nav-swc .sub-menu a:hover {
    font-weight: 500;
    color: #9E1F63 !important;
    /* background-color: #F5F2FA; */
}
/* for swc */

/* for etn-acdm */
.nav-etn-acdm.navbar-sec .nav-item:hover,
.nav-etn-acdm.navbar-sec .nav-item .nav-link:hover,
.nav-etn-acdm.navbar-sec .nav-item .nav-link:active, 
.nav-etn-acdm.navbar-sec .nav-item .nav-link:focus {
    color: #691018 !important;
    font-weight: 500;
    background-color: #FCF4F5;
}
.nav-etn-acdm .sub-menu a:hover {
    font-weight: 500;
    color: #691018 !important;
    /* background-color: #F5F2FA; */
}
/* for etn-acdm */

/* for stem */
.nav-stem.navbar-sec .nav-item:hover,
.nav-stem.navbar-sec .nav-item .nav-link:hover,
.nav-stem.navbar-sec .nav-item .nav-link:active, 
.nav-stem.navbar-sec .nav-item .nav-link:focus {
    color: #2BCCE4 !important;
    font-weight: 500;
    background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(203,242,255,1) 100%);;
}
.nav-stem .sub-menu a:hover {
    font-weight: 500;
    color: #2BCCE4 !important;
    /* background-color: #F5F2FA; */
}
/* for stem */
.navbar-sec .nav-item:hover,
.navbar-sec .nav-item .nav-link:hover,
.navbar-sec .nav-item .nav-link:active, 
.navbar-sec .nav-item .nav-link:focus {
    color: #5E4481 !important;
    font-weight: 500;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,242,250,1) 100%);
}

.navbar-sec .nav-item .nav-link {
    color: #000;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}
.btn-card-read-more{
    border-radius: 12px;
    border: 1px solid #E1E1E1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(244, 244, 244, 0.20) 100%), #F7F7F7;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
}
.btn-card-read-more:hover{
    border: 1px solid #000;
    color: #000 !important;
}
.footer-card-stem-activity{
    position: absolute;
    z-index: 1;
    bottom: 1.5rem;
    left: 0;
    width: 100%;
}
.splide_stem_activity_1 button.splide__arrow.splide__arrow--prev{
    left: -1em !important;
}
.splide_stem_activity_1 button.splide__arrow.splide__arrow--next{
    right: -1em !important;
}
.splide_stem_activity_1 button.splide__arrow.splide__arrow--prev,
.splide_stem_activity_1 button.splide__arrow.splide__arrow--next{
    opacity: 1 !important;
    background-color: #fff !important;
    border: 1px solid #E1E1E1 !important;
}
.splide_stem_activity_1 button.splide__arrow.splide__arrow--prev:hover,
.splide_stem_activity_1 button.splide__arrow.splide__arrow--next:hover{
    color: #2BCCE4 !important;
    /* border: 1px solid #2BCCE4 !important; */
    border: 1px solid #000 !important;
}
.splide_stem_activity_1 ul.splide__pagination{
    bottom: -1em !important;
}
.splide_stem_activity_1 .splide__pagination__page.is-active{
    background: #2BCCE4 !important;
}
.act1:hover{
    border-bottom: 4px solid #5E4481;
    transition:  border-bottom 0.2s ease-in;
}
.act2:hover,.navbar-sec .nav-item .nav-link.act2.show{
    border-bottom: 4px solid #E8284D;
    transition:  border-bottom 0.2s ease-in;
}
.act3:hover,.navbar-sec .nav-item .nav-link.act3.show{
    border-bottom: 4px solid #FFD530;
    transition:  border-bottom 0.2s ease-in;
}
.act4:hover,.navbar-sec .nav-item .nav-link.act4.show{
    border-bottom: 4px solid #A4CE57;
    transition:  border-bottom 0.2s ease-in;
}
.act5:hover,.navbar-sec .nav-item .nav-link.act5.show{
    border-bottom: 4px solid #98E5E5;
    transition:  border-bottom 0.2s ease-in;
}
.act6:hover,.navbar-sec .nav-item .nav-link.act6.show{
    border-bottom: 4px solid #DB5C1E;
    transition:  border-bottom 0.2s ease-in;
}
.navbar-full .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 1px solid #CCCCCC !important;
    margin-top: -0.5px !important;
}

.navbar-full .dropdown, .navbar-full .nav-item.dropdown {
    position: static !important;
}

.navbar-sec .sub-menu a{
    padding: 5px;
    margin-bottom: 8px;
    /* font-size: 0.875rem; */
    /* font-weight: 400; */
    height: 30px;
    width: 188px;
    /* color: #999999; */
}
.navbar-sec .sub-menu a i {
    font-size: 16px;
}
.navbar-sec .sub-menu a:hover {
    font-weight: 500;
    color: #5E4481;
    /* background-color: #F5F2FA; */
}

.navbar-sec .dropdown-menu img{
    width: 100%;
    max-height: 189px;
    height: 100%;
    object-fit: cover;
}

.navbar-sec .nav-item .dropdown-toggle::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    font-weight: 500;
    transition: all 0.3s linear;
    border: 0;
    margin-left: 8px;
}
.navbar-sec .nav-item .dropdown-toggle.show::after{
    transform: rotate(-180deg);
} 

.cl-list{
    width: 8px;
    height: 8px;
    background-color: #999999;
    border-radius: 50%;
    margin-right: 5px;
}
/* end menu menu-bar dropdown */

/* start custom footer */
.card-select-admin,
.card-select-officer{ 
    text-align: center;
    max-width: 220px;
    cursor: pointer;
    padding: 1.25rem;
    background: #FFFFFF;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    transition: transform .2s;
}
.card-select-officer{ 
    max-width: 360px;
}
.card-select-admin:hover, 
.card-select-officer:hover{ 
   background-color: #5E4481;
   color: #fff;
   transform: scale(0.95);
}
.contact-chat, .contect-fb, .contect-line{
    cursor: pointer;
    position: fixed;
    z-index: 999;
    right: 16px;
    bottom: 100px;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: #5E4481;
    background-color: #f1f1f1;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
.contect-fb, .contect-line{
    background-color: transparent !important;
}

.contact-chat:hover, .contect-fb:hover, .contect-line:hover{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}

.contect-fb img, .contect-line img{
    width: 40px;
    height: 40px;
}

.con-open {
    color: #fff;
    background-color: #5E4481;
}

.icon-wrap-ck{
    cursor: pointer;
    position: fixed;
    z-index: 10000;
    left: 16px;
    bottom: 40px;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: #5E4481;
    background-color: #f1f1f1;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
.icon-wrap-ck:hover{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
.icon-wrap-ck-nav-footer{
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    color: #5E4481;
    background-color: #f1f1f1;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
.sm-modal-ck{
    position: fixed;
    z-index: 10000;
    width: 100%;
    max-width: 300px;
    left: 16px;
    bottom: 100px;
    margin-right: 16px;
    background-color: #F5F2FA;
    border-radius: 8px;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
    animation: fadeInUP 0.5s ease-in-out;
}
.sm-modal-ck-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    border-bottom: 1px solid #ccc;
}
.sm-modal-ck-body{
    padding: 1em;
}
.sm-modal-ck-close{
    font-size: 24px;
    cursor: pointer;
}
.sm-modal-ck-close:hover{
    font-weight: 600;
    color: red;
}

#setting-ck-consent .form-check-input:checked{
    background-color: #5E4481 !important;
    border-color: #5E4481 !important;
}
@keyframes fadeInUP {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
    }
}

@media only screen and (min-width: 768px) {
    .cl-fx-drt-r-al-itm-ct{
        display: inline-flex; 
        align-items: center;
    }
}

.btn-pp-le-ck {
    background: #5E4481;
    border-radius: 8px;
    color: #fff;
}
.btn-pp-le-ck:hover {
    color: #fff;
    background: #784BB5;
}
.btn-bd-cl-pp-le {
    background: transparent;
    border-radius: 8px;
    color: #5E4481;
    border: 1px solid #5E4481;
}
.btn-bd-cl-pp-le:hover {
    background: #5E4481;
    color: #fff;
    border: 1px solid #5E4481;
}

.btn-white-pp-le-nav-footer{
    color: #5E4481;
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
.btn-white-pp-le-nav-footer:hover{
    color: #5E4481;
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}

#div-card-satisfaction{
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    padding: 0.75rem;
    right: 0.875vw;
    /* top: 96px; */
    bottom: 18vh;
    width: auto;
    height: auto;
    max-width: 400px;
    max-height: 180px;
    /* background: #F5F2FA; */
    background-color: #FFF;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    transition: all 0.25s ;
}
#div-card-satisfaction:hover{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
#div-card-satisfaction #btn-icon-exit-stft:hover{
    font-weight: 500;
    cursor: pointer;
    color: #5E4481;
}

#div-card-satisfaction .form-check-input{
    text-align: center;
    background-color: transparent !important;
    border: none !important;
    width: 56px;
    height: 40px;
}
#div-card-satisfaction .form-check-input:checked[type=radio]::after{
    background-image: none !important;
    color: #5E4481 !important;
    border-color: #5E4481 !important;
}
#div-card-satisfaction .form-check-input:checked{
    background-color: transparent !important;
    border-color: transparent !important;
    accent-color: none !important;
}

#div-card-satisfaction .form-check-input{
  cursor: pointer;
  outline:0 !important;
}
#div-card-satisfaction input[type="radio"]:focus {
    box-shadow: none !important;
}
#div-card-satisfaction .form-check-input::after{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    /* font-size: 1.5rem; */
    font-size: 2rem;
    /* transition: all 0.3s linear; */
    color: #AAAAAA;
    line-height: initial;
    background-color: #fff;
    /* border: 2px solid #EBEBEB; */
    border-radius: 8px;
    padding: 0px 8px;
}
#div-card-satisfaction .radio-icon-1::after{
    content: "\f5c8" !important;
    /* color: red; */
    color: #c6ccd0;
    font-weight: 900;
}
#div-card-satisfaction .radio-icon-2::after{
    content: "\f119" !important;
    /* color: orange; */
    color: #c6ccd0;
    font-weight: 900;
}
#div-card-satisfaction .radio-icon-3::after{
    content: "\f11a" !important;
    /* color: #fef01d; */
    color: #c6ccd0;
    font-weight: 900;
}
#div-card-satisfaction .radio-icon-4::after{
    content: "\f118" !important;
    /* color: #56cb25; */
    color: #c6ccd0;
    font-weight: 900;
}
#div-card-satisfaction .radio-icon-5::after{
    content: "\f599" !important;
    /* color: green; */
    color: #c6ccd0;
    font-weight: 900;
}
#div-card-satisfaction .radio-icon-1:hover.form-check-input::after{    color: red;    font-size: 2.5rem;    transition: all 0.2s; }
#div-card-satisfaction .radio-icon-2:hover.form-check-input::after{    color: orangered;    font-size: 2.5rem;    transition: all 0.2s; }
#div-card-satisfaction .radio-icon-3:hover.form-check-input::after{    color: #ffd68a;    font-size: 2.5rem;    transition: all 0.2s; }
#div-card-satisfaction .radio-icon-4:hover.form-check-input::after{    color: greenyellow;    font-size: 2.5rem;    transition: all 0.2s;  }
#div-card-satisfaction .radio-icon-5:hover.form-check-input::after{    color: green;    font-size: 2.5rem;    transition: all 0.2s; }
#div-card-satisfaction .radio-icon-1:hover + #subtitle-icon-1,
#div-card-satisfaction .radio-icon-2:hover + #subtitle-icon-2,
#div-card-satisfaction .radio-icon-3:hover + #subtitle-icon-3,
#div-card-satisfaction .radio-icon-4:hover + #subtitle-icon-4,
#div-card-satisfaction .radio-icon-5:hover + #subtitle-icon-5{
    /* padding-top: 4px; */
    color: #000 !important;
    /* font-size: 0.875rem; */
    font-weight: 600;
    transition: all 0.2s;
}

/* .df-messenger-wrapper{
    bottom: 96px !important;
    right: 16px !important;
}
.df-messenger-wrapper button#widgetIcon{
   background: #fff !important;
} */
/* df-messenger {
    --df-messenger-bot-message: #878fac;
    --df-messenger-button-titlebar-color: #5c4580;
    --df-messenger-chat-background-color: #fafafa;
    --df-messenger-font-color: white;
    --df-messenger-send-icon: #878fac;
    --df-messenger-user-message: #479b3d;
} */

/* .fb_mpn_mobile_bounce_out {
    max-height: 0px !important;
    display: none !important;
}
.fb_mpn_mobile_bounce_out #facebook{
    max-height: 0px !important;
    display: none !important;
} */
/* #fb-root .fb_mpn_mobile_bounce_out{
    background-color: #cbbbdb;
} */
/* #fb-root iframe #facebook .fb_mpn_mobile_bounce_out ._92bp{
    display: none !important;
    height: 0px !important;
    max-height: 0px !important;
}
.fb_mpn_mobile_bounce_out,
.fb_mpn_mobile_bounce_out_v2{
    display: none !important;
    height: 0px !important;
    max-height: 0px !important;
} */


#div-alert-system-payment{
    /* cursor: pointer; */
    position: fixed;
    z-index: 9999;
    /* padding: 0.75rem; */
    right: 0.875vw;
    /* top: 96px; */
    /* bottom: 19vh; */
    bottom: 200px;
    width: auto;
    height: auto;
    max-width: 250px;
    /* max-height: 180px; */
    /* background: #F5F2FA; */
    background-color: #FFF;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    transition: all 0.25s ;
}
@media only screen and (max-width: 576px) {
    #div-alert-system-payment{
        /* bottom: 18vh; */
        bottom: 160px;
        max-width: 240px !important;
    }
}
#div-alert-system-payment:hover{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
#div-alert-system-payment .btn-close-modal{
    position: absolute;
    z-index: 1;
    top: 2px;
    right: 6px;
    color: #000;
    font-size: 20px;
}
#div-alert-system-payment .btn-close-modal:hover{
    color: red !important;
}
#div-alert-system-payment img{
    border-radius: 16px;
}

#div-card-net-promoter-score{
    /* cursor: pointer; */
    position: fixed;
    z-index: 9999;
    padding: 0.75rem;
    padding-top: 0.50rem !important;
    right: 0.875vw;
    /* top: 96px; */
    bottom: 20vh;
    width: auto;
    height: auto;
    /* max-width: 400px; */
    /* max-height: 300px; */
    /* background: #F5F2FA; */
    background-color: #FFF;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    transition: all 0.25s;
    margin-left: 5px;

    /* เพิ่มตรงนี้เข้าไป */
    max-height: 70vh; /* สูงสุดไม่เกิน 80% ของจอ */
    overflow-y: auto; /* ถ้าสูงเกินก็ให้เลื่อน scroll bar เฉพาะแนวตั้ง */
}
#div-card-net-promoter-score:hover{
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
    transition: all 0.25s ;
}
#div-card-net-promoter-score .icon-improve-group{
    max-height: 30px;
}

#div-card-net-promoter-score .nps-scale label {
    margin: 5px;
}
#div-card-net-promoter-score .nps-scale input[type="radio"] {
    display: none;
}
#div-card-net-promoter-score .nps-scale label span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 10px 15px;
    border-radius: 50%;
    background: #dee2e6;
    cursor: pointer;
    transition: 0.3s;
}
#div-card-net-promoter-score .nps-scale label span:hover {
    background: #9762dd;
    color: #fff;
    transition: 0.1s;
}
#div-card-net-promoter-score .nps-scale input[type="radio"]:checked + span {
    background-color: #9762dd;
    color: #fff;
    font-weight: bold;
}
#div-card-net-promoter-score .btn-sbm-pp{
    background-color: #5E4481;
    color: #fff;
    border-radius: 8px;
}
#div-card-net-promoter-score .btn-sbm-pp:hover{
    background-color: #9762dd;
    color: #fff;
}

#div-card-net-promoter-score .btn-card-button{
    background-color: #9762dd;
    color: #fff;
}
#div-card-net-promoter-score .improve-group-option {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
}
#div-card-net-promoter-score .improve-group-option:hover,
#div-card-net-promoter-score .improve-group-option.op-checked-active {
    background-color: #9762dd;
    color: white;
    border-radius: 999px;
    transform: scale(1.02);
}
#div-card-net-promoter-score .improve-group-option.op-checked-active i{
    color: #fff;
}
#div-card-net-promoter-score .improve-group-option input[type="radio"] {
    display: none; /* ซ่อน radio จริง */
}
#div-card-net-promoter-score .improve-group-option label {
    width: 100%;
    margin-bottom: 0; /* กัน label เด้ง */
    cursor: pointer;
}

#div-card-net-promoter-score .imp-choice-wrapper {
    /* background-color: #0d6efd; */
    padding: 1.5rem;
    border-radius: 1rem;
}
#div-card-net-promoter-score .imp-choice-checkbox {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    cursor: pointer;
    gap: 0.5rem;
    transition: background 0.2s ease;
}
#div-card-net-promoter-score .imp-choice-checkbox input[type="checkbox"] {
    accent-color: #0d6efd;
    width: 1rem;
    height: 1rem;
    margin: 0;
}
#div-card-net-promoter-score .imp-choice-checkbox:hover {
    background: #9762dd;
    color: #fff;
    border-color: #9762dd;
}
/* #div-card-net-promoter-score .imp-choice-checkbox input[type="checkbox"]:checked + span {
    font-weight: 600;
    background: #9762dd;
    color: #fff;
    border-color: #9762dd;
    padding: 0.5rem 1rem;
    border-radius: 999px;
} */
#div-card-net-promoter-score .imp-choice-checkbox.checked-css {
    background: #9762dd;
    color: #fff;
    font-weight: 500;
    border-color: #9762dd;
}
#div-card-net-promoter-score .imp-choice-checkbox span {
    white-space: nowrap;
    font-size: 1rem;
}
@media (max-width: 576px) {
    #div-card-net-promoter-score {
        padding: 0.5rem;
    }

    #div-card-net-promoter-score .imp-choice-wrapper {
        padding: 1rem;
    }

    #div-card-net-promoter-score .imp-choice-checkbox {
        padding: 0.4rem 0.8rem;
    }

    #div-card-net-promoter-score .imp-choice-checkbox span {
        font-size: 0.95rem;
    }
}
#div-card-net-promoter-score .animate-icon {
    animation: popIn 0.6s ease forwards;
}
@keyframes popIn {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    80% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
}
.btn-nps-success, .btn-nps-secondary{
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: 99rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-nps-success {
    color: #fff;
    background-color: #9862d8;
    border-color: #9862d8;
}
.btn-nps-success:hover {
    color: #fff;
    background-color: #8a38eb;
    border-color: #8a38eb;
}
.btn-nps-secondary {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.btn-nps-secondary:hover {
    cursor: wait;
    color: #fff;
    background-color: #000;
    border-color: #000;
}
#div-card-net-promoter-score #btn-icon-back-nps:hover{
    cursor: pointer;
    color: #000 !important;;
}
#div-card-net-promoter-score #btn-icon-exit-nps:hover{
    cursor: pointer;
    color: #000 !important;
}
/* end custom footer */

/* start custom QA */
.section-1-qa #myTab .nav-link{
    width: 167px;
    height: 179px;
    background: #fff;
    border: 0.5px solid #F2F5F8;
    box-sizing: border-box;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
}
.section-1-qa #myTab .nav-link img{
    height: 86px;
}
.section-1-qa #myTab .nav-link.active{
    background-color: rgba(247, 242, 255, 0.946);;
}
.section-1-qa #myTab .nav-link:hover{
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
}
.section-1-qa .icon-slide{
    height: 27px;
    position: absolute;
    z-index: 1;
    top: 190px;
    left: 45%;
}
.ac-js .active, .ac-js .nav-link:hover{ background-color: #FEF3EE !important; border-color: #FEF3EE !important;}
.ac-ct .active, .ac-ct .nav-link:hover{ background-color: #F2F5F8 !important;border-color: #F2F5F8 !important;}
.ac-mooc .active, .ac-mooc .nav-link:hover{ background-color: #F5FFE2 !important;border-color: #F5FFE2 !important;}
.ac-pay .active, .ac-pay .nav-link:hover{ background-color: #FDE4F4 !important;border-color: #FDE4F4 !important;}
.ac-cf .active, .ac-cf .nav-link:hover{ background-color: #C6E8F8 !important;border-color: #C6E8F8 !important;}

.ac-js .acc-btn.is-open,.ac-js .acc-btn:hover{ color: #EB7942 !important;}
.ac-ct .acc-btn.is-open,.ac-ct .acc-btn:hover{ color: #53BDCA !important;}
.ac-mooc .acc-btn.is-open,.ac-mooc .acc-btn:hover{ color: #A2D169 !important;}
.ac-pay .acc-btn.is-open,.ac-pay .acc-btn:hover{ color: #ED7CF3 !important;}
.ac-cf .acc-btn.is-open,.ac-cf .acc-btn:hover{ color: #3194ef !important;}
.text-pay{color: #ED7CF3 ;}
.text-cf{color: #3194ef;}
/* end custom QA */

/* start custom navigate */
.navigate {
    position: relative;
    display: flex;
    align-items: center;
    color: #5E4481;
    height: 40px;  
    background: #FAF7FF;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #FAF7FF;
     z-index: 10;
}
.navigate.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #E3D8F1;
    z-index: 10;
}
.navigate:hover{
    color: #5E4481;
    font-weight: 500;
}
.nav-for-web .btn-pf:hover>.dropdown-menu {
    display: block;
}
.btn-profile.dropdown-toggle::after{
    content: none;
    border: 0;
}
.dropdown-btn-profile, .dropdown-btn-lang{
    border-radius: 8px;
}
.dropdown-btn-profile .dropdown-item:active,
.dropdown-btn-profile .dropdown-item:hover{
    color: #000;
    font-weight: 500;
}
.dropdown-btn-lang {
    min-width: 6rem;
}
/* end custom navigate */

.circle {
    background-color: #fff;
    line-height: 0;
    display: inline-block;
    margin: 0px;
    border: 8px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    transition: linear 0.25s;
    height: 20vh;
    width: 20vh;
}
.form-control::file-selector-button{ height: 48px; }

/* mc-calendar */
.mc-calendar--modal {
    z-index: 9999 !important;
}
/* mc-calendar */
.cursorPointer{ cursor: pointer !important; }
.cursorWait{ cursor: wait !important; }
.alertMessageWarning{ background-color: yellow; border-radius: 10px; border: 1px dashed grey; padding: 15px; font-size: small; color: black; vertical-align: middle; text-align: center; }
#idOtpCountDown{ margin-left: 5px; }

#contact-social-main a i{
    color: #000;
}

#contact-social-main a .fa-facebook:hover{
    color: #4267B2;
}
#contact-social-main a .fa-line:hover{
    color: #00c300;
}
#contact-social-main a .fa-twitter-square:hover{
    color: #1DA1F2;
}
#contact-social-main a .fa-instagram:hover{
    background: -webkit-linear-gradient(15deg, rgba(255,220,128,1) 0%, rgba(252,175,69,1) 10%, rgba(247,119,55,1) 21%, rgba(245,96,64,1) 34%, rgba(245,96,64,1) 46%, rgba(253,29,29,1) 56%, rgba(225,48,108,1) 67%, rgba(193,53,132,1) 78%, rgba(131,58,180,1) 89%, rgba(88,81,219,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* start custom contact */
.section-1-contact .contact-main i{
    cursor: pointer;
    transition: 0.25s;
} 
.section-1-contact .contact-main i:hover{
    transition: 0.25s;
    font-size: 60px;
} 
/* end custom contact */

/* --------------------------start custom data science------------------- */
.section-1-data-science .plyr--video{
    border-radius: 20px;
}
/* .data-sci-card{
    height: 480px;
} */
.data-sci-card .card-body{
    padding-bottom: 3rem !important;
}
.data-sci-card-box-img{
    position: relative;
    max-height: 300px;
    height: auto;
}
.section-card-box1{
    width: 100%;
    max-width: 488px;
    text-align: center;
    padding: 42px 32px;
    color: #fff;
    background: #3773B5;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
} 
.section-card-box2{
    width: 100%;
    max-width: 488px;
    text-align: center;
    padding: 42px 32px;
    color: #fff;
    background: #222D5A;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
} 

.btn-link-select-course,
.btn-link-select-course-small,
.btn-link-select-course-small-white{
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: #DB5C1E;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    transition: transform .2s;
}
.btn-link-select-course-small{
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
    padding: 8px 48px;
    border-radius: 4px;
}
.btn-link-select-course-small-white{
    padding: 8px 48px;
    background: #fff;
    color: #DB5C1E;
    border-radius: 4px;
}
.section-card-box1:hover,
.section-card-box2:hover,
.btn-link-select-course:hover,
.btn-link-select-course-small:hover{
    color: #fff;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
    transform: scale(0.95);
} 
.btn-link-select-course-small-white:hover{
    color: #DB5C1E;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
    transform: scale(0.95);
}
.data-sci#myTab .nav-link.active, #myTab .show>.nav-link{
    color: #3773B5;
    background-color: #E4F1FF;
    border-radius: 8px;
}
.data-sci#myTab .nav-link:hover{
    color: #3773B5;
    background-color: #E4F1FF;
    border-radius: 8px;
}
.data-sci-btn-search{
    width: 48px;
    /* background-color: #192453; */
    background: linear-gradient(180deg, #3F5DD7 0%, #222D5A 100%);
    color: #fff;
}
.data-sci-btn-search:hover{
    background-color: #3773B5;
}
.data-sci-btn-search:hover > i{
   color: #fff;
}
.btn-border-w-hv-w{
    color: #fff;
    padding: 8px 72px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 4px;
}
.btn-border-w-hv-w:hover{
    color: #000;
    background-color: #fff;
}

.btn-bg-r-hv-w{
    color: #fff;
    background-color: #DF2946;
    padding: 8px 72px;
    border: 1px solid #DF2946;
    box-sizing: border-box;
    border-radius: 4px;
}
.btn-bg-r-hv-w:hover{
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
}

.pagination-data-science .page-link {
    color: #3773B5;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0px 8px;
}
.pagination-data-science .page-item.active .page-link{
    color: #fff;
    border-color: #3773B5;
    background-color : #3773B5;
}
.pagination-data-science .page-link:hover{
    color: #3773B5;
    border: 1px solid #3773B5;
}

.navigate-dt-sci {
    position: relative;
    display: flex;
    align-items: center;
    color: #3773B5;
    height: 40px;  
    background: #E4F1FF;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-dt-sci.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-dt-sci::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #E4F1FF;
     z-index: 10;
}
.navigate-dt-sci.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-dt-sci.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #3773B5;
    z-index: 10;
}
.navigate-dt-sci:hover{
    color: #3773B5;
    font-weight: 500;
}

.card-video-slide .carousel-indicators{
    -ms-transform: rotate(20deg); /* IE 9 */
    transform: rotate(90deg);
    right: -85% !important;
    bottom: 40% !important;
}

.section-1-data-science .splide__arrow svg{
    fill: #DDDDDD !important;
}

.section-1-data-science .splide__arrow svg:hover{
    fill: #3773B5 !important;
}
.section-1-data-science .splide__arrow{
    background-color: transparent !important;
    border: none !important;
}

.section-1-data-science .splide--nav>.splide__track>.splide__list>.splide__slide ,
.splide--fade>.splide__track>.splide__list>.splide__slide{
    border-radius: 12px;;
}
.section-1-data-science .splide--nav>.splide__track>.splide__list>.splide__slide.is-active{
    border-color: #DDDDDD;
}

.section-1-data-science .splide__pagination__page.is-active{
    background: #3773B5 !important;
}

.section-1-data-science .splide__pagination__page:hover{
    background: #3773B5 !important;
}

.section-2-1-data-science .bg-lf{
    width: 100%;
    background: linear-gradient(180deg, #2C3E85 0%, #222D5A 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    transform: matrix(1, 0, 0, 1, 0, -11.5);
}
.section-2-1-data-science .bg-ct{
    width: 100%;
    background: linear-gradient(180deg, #3F5DD7 0%, #222D5A 96.35%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* -webkit-transform: skew(20deg); 

    -moz-transform: skew(20deg); 
    
    -o-transform: skew(20deg);
    
    transform: skew(20deg); */
    transform: matrix(1, 0.3, 0, 1, 0, 0);
}
.section-2-1-data-science .bg-rt{
    width: 100%;
    background: linear-gradient(180deg, #ED7D1B 14.58%, #DB5C1E 84.9%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    transform: matrix(1, 0, 0, 1, 0, 11.5);
}

.section-2-1-data-science .plyr{
    border-radius: 20px !important;
}

.data-sci-card-package{
    border: 0px !important;
    /* box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.14); */
    box-shadow: 0px 0px 50px 8px rgb(247 247 247 / 25%);
}
.data-sci-card-package:hover{
    transition: 0.1s;
    outline: #f88c2f solid 2px;
    /* box-shadow: 0px 4px 24px rgb(219 92 30 / 32%), 0px 4px 14px rgb(255 255 255); */
}
.data-sci-card-package .card-body{
    padding-bottom: 3rem !important;
}
.dt-sci-bg-hd-ai{
    position: relative;
    padding: 8px 16px 8px 16px;
    background: rgb(34,57,150);
    background: linear-gradient(0deg, rgba(34,57,150,1) 25%, rgba(35,65,189,1) 75%);
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.14);
}
.dt-sci-hd-cl{
    margin-top: 2px;
    width: 24px;
    height: 24px;
    background-color: #182c7a;
    border-radius: 50%;
}
.dt-sci-bg-hd-anlt{
    padding: 8px 16px 8px 16px;
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.14);
}
.dt-sci-bg-hd-ai-anlt{
    padding: 8px 16px 8px 16px;
    background: rgb(8,44,145);
    background: linear-gradient(45deg, rgba(8,44,145,1) 16.6%, rgba(2,67,161,1) 33.2%, rgba(2,68,162,1) 50%, rgba(249,146,25,1) 50%, rgba(247,121,60,1) 75%);
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.14);
}

.btn-dt-sci-ai-bg-wh{
    cursor: pointer;
    width: 100%;
    padding: 8px 0px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    border: 1px solid #3F5DD7;
    color: #3F5DD7;
    transition: 0.5s;
}
.btn-dt-sci-ai-bg-wh:hover{
    border-color: transparent;
    background: linear-gradient(0deg, rgba(34,57,150,1) 25%, rgba(35,65,189,1) 75%);
    color: #fff;
    transition: 0.5s;
}
.btn-dt-sci-anlt-bg-wh{
    cursor: pointer;
    width: 100%;
    padding: 8px 0px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    border: 1px solid #F99219 ;
    color: #F99219 ;
    transition: 0.5s;
}
.btn-dt-sci-anlt-bg-wh:hover{
    border-color: transparent;
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
    color: #fff;
    transition: 0.5s;
}
.btn-dt-sci-ai-anlt-bg{
    cursor: pointer;
    width: 100%;
    padding: 8px 0px;
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    color: #fff;
    transition: 0.5s;
    border-color: transparent;
}
.btn-dt-sci-ai-anlt-bg:hover{
    background: linear-gradient(45deg, rgba(8,44,145,1) 16.6%, rgba(2,67,161,1) 33.2%, rgba(2,68,162,1) 50%, rgba(249,146,25,1) 50%, rgba(247,121,60,1) 75%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.1);
}

.text-gd-dt-sci-ai{
    background: linear-gradient(180deg, #3F5DD7 0%, #222D5A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gd-dt-sci-anlt{
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* only scrollbar */
/* width */
.overflow-y-package::-webkit-scrollbar {
    width: 6px;
    border-radius: 4px;
}

/* Track */
.overflow-y-package::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;

}

/* Handle */
.overflow-y-package::-webkit-scrollbar-thumb {
    background: #C4C4C4;; 
    border-radius: 4px;
}

/* Handle on hover */
.overflow-y-package::-webkit-scrollbar-thumb:hover {
    background: rgb(121, 120, 120); 
    border-radius: 4px;
}
/* only scrollbar */
/* .section-2-data-science .img-gear1{ position: absolute; z-index: 1; left: 5%; top: -15%; max-width: 42px; height: auto;}
.section-2-data-science .img-gear2{ position: absolute; z-index: 1; left: 4%; bottom: 8%; max-width: 72px; height: auto;}
.section-2-data-science .img-gear3{ position: absolute; z-index: 1; left: 8%; bottom: -10%; max-width: 40px; height: auto;} */
.section-2-data-science .img-gear1{ position: absolute; z-index: 1; left: 64px; top: -88px; max-width: 42px; height: auto;}
.section-2-data-science .img-gear2{ position: absolute; z-index: 1; left: 48px; bottom: 32px; max-width: 72px; height: auto;}
.section-2-data-science .img-gear3{ position: absolute; z-index: 1; left: 112px; bottom: -56px; max-width: 40px; height: auto;}
.section-2-data-science .img-gear3{ position: absolute; z-index: 1; left: 112px; bottom: -56px; max-width: 40px; height: auto;}
.section-2-data-science .img-app1{ position: absolute; z-index: 1; left: 10%; top: -56px; max-width: 117px; height: auto;}
.section-2-data-science .img-plane{ position: absolute; z-index: 1; right: 5%; top: -40px; max-width: 120px; height: auto;}

.section-4-data-science .img-gear1{ position: absolute; z-index: 1; left: 24px; bottom: 32px; max-width: 122px; height: auto;}
.section-4-data-science .img-gear2{ position: absolute; z-index: 1; right: 40px; bottom: 150px; max-width: 56px; height: auto;}
.section-4-data-science .img-gear3{ position: absolute; z-index: 1; left: 32px; bottom: 45%; max-width: 56px; height: auto;}
.section-4-data-science .img-gear4{ position: absolute; z-index: 1; left: 88px; top: 72px; max-width: 48px; height: auto;}
.section-4-data-science .img-gear5{ position: absolute; z-index: 1; right: 88px; top: 72px; max-width: 26px; height: auto;}
.section-4-data-science .img-gear6{ position: absolute; z-index: 1; left: 30%; top: 23%; max-width: 26px; height: auto;}
.section-4-data-science .img-gear7{ position: absolute; z-index: 1; right: 30%; top: 23%; max-width: 26px; height: auto;}
.section-4-data-science .img-plane-line{ position: absolute; z-index: 1; right: 23%; top: 6.5%; max-width: 400px; height: auto;}
.section-4-data-science .img-app1{ position: absolute; z-index: 1; left: 10%; top: 80px; max-width: 80px; height: auto;}
.section-4-data-science .img-app2{ position: absolute; z-index: 1; left: 0; top: 20%; max-width: 104px; height: auto;}
.section-4-data-science .img-app3{ position: absolute; z-index: 1; right: 0; top: 22%; max-width: 104px; height: auto;}
/* -----------------------end custom data science ------------------------*/

/* -----------------------start custom nakwittidcook ------------------------*/
/* ------ st navigate nakwittidcook ------- */
.navigate-nwtc {
    position: relative;
    display: flex;
    align-items: center;
    color: #F26723;
    height: 40px;  
    background: #FEF0E9;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-nwtc.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-nwtc::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #FEF0E9;
     z-index: 10;
}
.navigate-nwtc.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-nwtc.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #F26723;
    z-index: 10;
}
.navigate-nwtc:hover{
    color: #F26723;
    font-weight: 500;
}
/* ------ end navigate nakwittidcook ------- */
.banner-carousel-nwtc .active{
    background-color: #F26723 !important;
}
.carousel-indicators [data-bs-target]{
    background-color: #000;
}
.btn-nwtc{
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 100%; */
    max-width: 217px;
    height: 56px;
    background: #F26723;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    transition: transform .2s;
}
.btn-nwtc:hover{
    color: #fff;
    transform: scale(0.95);
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
}
.section-1-nwtc .card-box{
    background: #FFFFFF;
    box-shadow: 2px 3px 16px rgba(202, 198, 181, 0.32);
    border-radius: 24px;
}

.section-3-nwtc .splide__arrow {
    border-radius: 50% !important;
    background-color: #fff !important;
    /* border: 1px solid #ccc !important; */
    border: 0.5px solid #ccc !important;
    width: 2.1875em !important;
    height: 2.1875em !important;
    filter: drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08)) !important;
}
.section-3-nwtc .splide__arrow svg {
    fill: #F26723 !important;
    width: 1.5em !important;
    height: 1.5em !important;
}
.section-3-nwtc .splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    border-color: #F26723 !important;
}
.section-3-nwtc .splide__pagination{
    display: none !important;
}

.card-img-box-nwtc {
    position: relative;
    /* max-height: 190px; */
    height: auto;
    cursor: pointer;

}

.card-img-box-nwtc .card-img-top {
    z-index: -1;
    height: 100%;
}
.card-img-box-nwtc img{
    height: auto;
    object-fit: cover;
    object-position: 0px 0%;
}
.btn-time-video-in-card {
    display: flex;
    justify-content: center;    
    align-items: center;
    position: absolute;
    z-index: 3;
    width: 100%;
    /* max-width: 50px; */
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
    height: 25px;
    bottom: 10px;
    right: 15px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
}
.i-bg{
    position: absolute;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
.i-circle{
    animation: zoom-in-zoom-out 2s ease-out infinite;
    position: absolute;
    background-color: transparent;
    border: 3px solid rgba(255, 255,255, 0.9);
    border-radius: 50%;
    z-index: 5;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 96.88px;
    height: 96.88px;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.08)) drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.04));
}
.i-triangle{
    animation: zoom-in-zoom-out 2s ease-out infinite;
    position: absolute;
    z-index: 6;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 35px solid rgba(255, 255,255, 0.9);
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.08)) drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.04));
}
.card-img-box-nwtc:hover .i-bg,
.card-img-box-nwtc:hover .i-circle,
.card-img-box-nwtc:hover .i-triangle{
    transition: opacity 0.5s;
    opacity: 1;
}
.i-triangle, .i-circle, .i-bg{
    transition: opacity 0.5s;
    opacity: 0;
}
@keyframes zoom-in-zoom-out {
    0% {
    transform: scale(0.8, 0.8);
    }
    50% {
    transform: scale(1, 1);
    }
    100% {
    transform: scale(0.8, 0.8);
    }
}

.section-3-nwtc .plyr{
    width: 100% !important;
    height: 100% !important;
    max-width: 480px !important;
    max-height: 334px !important;
    /* max-width: 400px !important; */
    /* max-height: 334px !important; */
    border-radius: 20px !important;
}
/* .section-3-nwtc .plyr__control--overlaid{
    background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#F26723))) !important;
} */
.section-3-nwtc .plyr__control:hover{
    background: #F26723 !important;
}
.section-3-nwtc .plyr--full-ui input[type=range]{
    color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#F26723))) !important;
}
.section-3-nwtc .plyr__controls__item.plyr__control:hover{
    background: #F26723 !important;
}

.section-1-cilp-nwtc .responsive-iframe {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.section-3-nwtc .plyr__control--overlaid {
    background : none !important;
    border: 2px solid #FFFFFF !important;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #f5f5f5; 
}
.section-3-nwtc .plyr__control--overlaid:hover {
    /* background : none !important; */
    background: #eee;
    padding: 20px;
}
.section-3-nwtc .splide--nav>.splide__track>.splide__list>.splide__slide {
    border-radius: 12px !important;
}
/* -----------------------end custom nakwittidcook ------------------------*/

/* -----------------------start custom SWC ------------------------*/
.banner-carousel-swc .active{
    background-color: #fff !important;
}
.carousel-indicators [data-bs-target]{
    background-color: #DBDBDB;
}
.btn-swc{
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 100%; */
    /* height: 100%; */
    padding: 16px 48px;
    background: #9E1F63;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    transition: transform .2s;
}
.btn-swc:hover{
    transform: scale(0.95);
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
}
.btn-swc-see-more{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}
.btn-swc-see-more:hover{
    color: #fff;
    background: #9E1F63;
    border-color: #9E1F63; 
}
.swc-btn-search{
    width: 48px;
    background-color: #9E1F63;
    color: #fff;
}
.swc-btn-search:hover{
    background-color: #f3a9d0;
}
.swc-btn-search:hover > i{
   color: #9E1F63;
}
.section-3-swc .card, 
.section-3-swc .swc-bg-gradient {
    border-radius: 16px;
}
.section-3-swc .swc-bg-gradient {
    background: linear-gradient(0deg, rgba(158,31,99,1) 0%, rgba(158,31,99,0.3617822128851541) 0%, rgba(255,255,255,0) 50%);
}
.section-4-swc .fc .fc-daygrid-day.fc-day-today{
    background-color: #9e1f63a1 !important;
}
.section-4-swc .fc-prev-button:hover,
.section-4-swc .fc-next-button:hover,
.section-4-swc .fc-today-button:hover {
    background-color: #9e1f63b8 !important;
}
.section-4-swc .fc-scrollgrid thead td ,
.section-4-swc .fc-scrollgrid thead td th {
    border: none !important;
}
.section-4-swc .fc-theme-standard .fc-scrollgrid {
    border: none !important;
}
.section-4-swc .fc-theme-standard td, 
.section-4-swc .fc-theme-standard th {
    border: 1px dashed #E1E1E1 !important;
}
.section-4-swc .fc-event .fc-event-main {
    height: 40px !important;
}
.section-4-swc .box-schedule-start {
    position: relative;
    width: 48px;
    max-height: 36px;
    color: #1A8C93;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0.4) 0%, rgba(245, 245, 245, 0) 100%), linear-gradient(0deg, #F5F5F5, #F5F5F5), #E6F8EA;
    /* เงาปุ่ม */
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border-radius: 8px;
    margin-right: 10px;
} 
.section-4-swc .box-schedule-detail .date-time-start {
    color: #757575;
}

.section-4-swc .box-calendar-schedule .day{ 
    width: 100%;
    height: 13px;
    color: #fff;
}

.section-4-swc .box-calendar-schedule .date{
    height: 35px;
    width: 100%;
    color: #fff;
}
.section-4-swc .box-calendar-schedule .month-year{
    width: 100%;
    height: 15px;
    color: #fff;
}
.section-4-swc .fc-event-title-container{
    font-size: 1.25em !important;
}

.section-5-swc .page-item.active .page-link{
    color: #fff;
    border-color: #9E1F63;
    background-color: #9E1F63;
}
.section-5-swc .page-item .page-link{
    color: #9E1F63;
}
.section-5-swc .page-link:hover{
    color: #9E1F63;
    border: 1px solid #9E1F63;
}
.img-banner-zoom-in-out {
    animation: zoominoutsinglefeatured 20s infinite;
}
.img-zoom-in-out-6 {
    animation: zoominoutsinglefeatured 6s infinite;
}
.img-zoom-in-out-5 {
    animation: zoominoutsinglefeatured 5s infinite;
}
.img-zoom-in-out-3 {
    animation: zoominoutsinglefeatured 3s infinite;
}

.fadeInRight {
    animation: fadeInRight 1s ease-in-out;
}

.btn-white-pp-le{
    color: #5E4481;
    background-color: #fff;
    border-color: #fff;
}
@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(300px);
    }
    to {
        opacity: 1;
    }
}
.navigate-swc {
    position: relative;
    display: flex;
    align-items: center;
    color: #9E1F63;
    height: 40px;  
    background: #F7E2ED;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-swc.now {
    color: #9E1F63;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-swc::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F7E2ED;
     z-index: 10;
}
.navigate-swc.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-swc.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #9E1F63;
    z-index: 10;
}
.navigate-swc:hover{
    color: #9E1F63;
    font-weight: 500;
}
/* -----------------------end custom SWC ------------------------*/

/* -----------------------start custom Entaneer Academy ------------------------*/
.text-etn-acdm-font-npk{
    font-family: 'NPK-Sumalee14';
    font-style: normal;
}
.banner-carousel-etn-acdm .active{
    background-color: #fff !important;
}
/* ------ st navigate Entaneer Academy ------- */
.navigate-etn-acdm {
    position: relative;
    display: flex;
    align-items: center;
    color: #691018;
    height: 40px;  
    background: #FCF4F5;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-etn-acdm.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-etn-acdm::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #FCF4F5;
     z-index: 10;
}
.navigate-etn-acdm.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-etn-acdm.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #691018;
    z-index: 10;
}
.navigate-etn-acdm:hover{
    color: #691018;
    font-weight: 500;
}
/* ------ end navigate Entaneer Academy ------- */
.section-banner-etn-acdm{
    padding: 215px 0px 250px 0px;
}
.btn-link-select-course-etn-acdm{
    padding: 10px 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: #691018;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    transition: transform .2s;
}

.btn-link-select-course-etn-acdm:hover{
    color: #fff;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
    transform: scale(0.95);
} 
.btn-link-select-course-etn-acdm-banner{
    padding: 10px 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: #94141F;
    box-shadow: 0px 2px 10px rgba(251, 73, 101, 0.24), 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    transition: transform .2s;
}

.btn-link-select-course-etn-acdm-banner:hover{
    color: #fff;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
    transform: scale(0.95);
} 
.btn-page-detail-etn-acdm{
    padding: 10px 22px;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    background: #fff;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    transition: transform .2s;
}

.btn-page-detail-etn-acdm:hover{
    color: #fff;
    background: #000;
    cursor: pointer;
    box-shadow: 2px 4px 14px rgb(0 0 0 / 50%);
    transform: scale(0.95);
} 
.section-1-entaneer-academy .plyr--video,
.section-1-entaneer-academy-detail .plyr--video{
    border-radius: 20px !important;
}
.section-1-entaneer-academy .plyr__control--overlaid,
.section-1-entaneer-academy-detail .plyr__control--overlaid{
    background: rgba(255, 255, 255, 0.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(2px) !important;
}
.section-1-entaneer-academy .plyr__control:hover,
.section-1-entaneer-academy-detail .plyr__control:hover{
    background: #691018 !important;
}
.section-1-entaneer-academy .plyr--full-ui input[type=range],
.section-1-entaneer-academy-detail .plyr--full-ui input[type=range]{
    color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#691018))) !important;
}
.section-1-entaneer-academy .plyr__controls__item.plyr__control:hover,
.section-1-entaneer-academy-detail .plyr__controls__item.plyr__control:hover{
    background: #691018 !important;
}

.section-1-entaneer-academy .img-gear1{
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    max-width: 80px;
    animation: rotateLeft 20s linear infinite;
}
.section-2-entaneer-academy .img-gear1{
    position: absolute;
    z-index: 1;
    bottom: 24px;
    left: 0;
    max-width: 60px;
    animation: rotateRight 20s linear infinite;
}
.section-3-entaneer-academy .img-gear1{
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -100px;
    max-width: 120px;
    animation: rotateLeft 10s linear infinite;
}
.section-3-entaneer-academy .img-gear2{
    position: absolute;
    z-index: 1;
    bottom: -50px;
    right: -100px;
    max-width: 120px;
    animation: rotateRight 12s linear infinite;
}
.section-4-entaneer-academy .img-gear1{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    max-width: 90px;
    animation: rotateLeft 13s linear infinite;
}
.section-4-entaneer-academy .img-gear2{
    position: absolute;
    z-index: 1;
    top: 400px;
    left:-50px;
    max-width: 60px;
    animation: rotateRight 20s linear infinite;
}
.section-4-entaneer-academy .img-gear3{
    position: absolute;
    z-index: 1;
    bottom: 50px;
    right: 0;
    max-width: 120px;
    animation: rotateLeft 16s linear infinite;
}
.section-5-entaneer-academy .icon1{
    position: absolute;
    z-index: 1;
    bottom: 50%;
    right: 0;
    max-width: 120px;
}
.section-5-entaneer-academy .icon2{
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 100px;
    max-width: 100px;
}
.section-5-entaneer-academy .icon3{
    position: absolute;
    z-index: 1;
    bottom: -50px;
    right: 250px;
    max-width: 90px;
}
.section-5-entaneer-academy .tag-say-st,
.section-5-entaneer-academy .tag-say-en {
    font-family: League Spartan;
    font-weight: 400;
    font-size: 144px;
    line-height: 25px;
    color: #84262F;
}
.section-5-entaneer-academy #footer-entaneer-academy-contact img:hover {
    transition-delay: all 0.5;
    transform: scale(0.90);
}

.text-read-more{
    display: flex;
    align-items: center;
    justify-content: end;
}
.text-read-more:hover{
   color: #192463;
   font-weight: 600;
}
.btn-white-etn-acdm{
    padding: 8px 24px;
    background-color: #fff;
    color: #691018;
    border-radius: 8px;
    transition: transform .2s;
}
.btn-white-etn-acdm:hover{
    color: #84262F !important;
    background: #fff !important;
    transform: scale(0.95);
}
.btn-bd-white-etn-acdm{
    padding: 8px 24px;
    background-color: transparent;
    color: #fff;
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    transition: transform .2s;
}
.btn-bd-white-etn-acdm:hover{
    color: #84262F !important;
    background: #fff !important;
    transform: scale(0.95);
}
.etn-acdm-btn-search{
    width: 48px;
    background-color: #691018;
    color: #fff;
}
.etn-acdm-btn-search:hover{
    background-color: #FCF4F5;
}
.etn-acdm-btn-search:hover > i{
   color: #691018;
}
.etn-acdm#myTab .nav-link.active, #myTab .show>.nav-link{
    color: #691018;
    background-color: #FCF4F5;
    border-radius: 8px;
}
.etn-acdm#myTab .nav-link:hover{
    color: #691018;
    background-color: #FCF4F5;
    border-radius: 8px;
}
.pagination-etn-acdm .page-item.active .page-link{
    color: #fff;
    border-color: #691018;
    background-color : #691018;
}
.pagination-etn-acdm .page-link:hover{
    color: #691018;
    border: 1px solid #691018;
}
.pagination-etn-acdm .page-link{
    color: #691018;
}
@keyframes rotateLeft {
    0% { 
        transform: rotate(360deg);
    }
    100% { 
        transform: rotate(0); 
    }
}
@keyframes rotateRight {
    0% { 
        transform: rotate(0); 
    }
    100% { 
        transform: rotate(360deg);
    }
}
.box-sm-card-etn{
    width: 240px;
    padding: 0.75rem;
    background: #FFFFFF;
    opacity: 0.88;
    box-shadow: 0px 4px 4px rgba(25, 36, 99, 0.24);
    border-radius: 12px;
}

.card-board{
    position: relative;
    padding: 1.25rem;
    background: #FFFFFF;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.16);
    border-radius: 16px;
}
.card-hanging-board1{
    position: absolute;
    width: 51px;
    height: 72px;
    left: 20px;
    top: -30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.38%, rgba(216, 216, 216, 0.2) 100%), #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.card-hanging-board2{
    position: absolute;
    width: 51px;
    height: 72px;
    right: 20px;
    top: -30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.38%, rgba(216, 216, 216, 0.2) 100%), #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.section-3-entaneer-academy-detail .img-gear1{
    position: absolute;
    z-index: 1;
    top: -20px;
    right: -20px;
    max-width: 90px;
    animation: rotateLeft 13s linear infinite;
}
.section-3-entaneer-academy-detail .img-gear2{
    position: absolute;
    z-index: 1;
    bottom: -40px;
    left: -40px;
    max-width: 60px;
    animation: rotateRight 13s linear infinite;
}
/* -----------------------end custom Entaneer Academy ------------------------*/

/* -----------------------start custom Package ------------------------*/
.section-1-package-detail .package-badge {
    color: #5E4481;
    height: 32px;
    background: #F8F4FC;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
/* -----------------------end custom Package ------------------------*/

/* -----------------------start custom Edsociate ------------------------*/
.zoom-bg {
    position: relative;
    /* width: 474px;
    height: 474px; */
    max-width: 474px; 
    max-height: 474px;
    /* border-radius: 50%; */
    overflow: hidden;
}

.zoom-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F2FAFE;
    border-radius: 50%;
    z-index: 0;
    animation: zoomBackground 5s infinite ease-in-out;
}

@keyframes zoomBackground {
    0% {
        transform: scale(0.90);
        box-shadow: 0 0 10px rgba(212, 233, 247, 0.95);
    }
    50% {
        transform: scale(0.95); /* ขยายมากขึ้น */
        box-shadow: 0 0 20px rgba(212, 233, 247, 1); /* เพิ่มเงาให้ชัดเจน */
    }
    100% {
        transform: scale(0.90);
        box-shadow: 0 0 10px rgba(212, 233, 247, 0.95);
    }
}


.border-left-md-lg{
    border-left: 1px solid #ededed;
}
.splide-edso-live .splide__pagination,
.splide-edso-iss .splide__pagination,
.splide-edso-review .splide__pagination{
    bottom: -1em;
}
.splide-edso-live .splide__pagination,
.splide-edso-iss .splide__pagination,
.splide-edso-review .splide__pagination {
   max-height: 30px;
   overflow: auto;
}
/* ------ st navigate ------- */
.navigate-edso {
    position: relative;
    display: flex;
    align-items: center;
    color: #F26723;
    height: 40px;  
    background: #FEF0E9;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-edso.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-edso::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #FEF0E9;
     z-index: 10;
}
.navigate-edso.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-edso.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #F26723;
    z-index: 10;
}
.navigate-edso:hover{
    color: #F26723;
    font-weight: 500;
}
/* ------ end navigate ------- */
.btn-edso-green{
    color: #fff;
    border-radius: 8px;
    border: none !important;
    background: linear-gradient(0deg, #67C244 4%, #97CF3E 43.23%, #9ECE4B 56.25%, #A2CE54 72.4%, #A4CE57 91.67%, #C3DF90 100%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 10px 0px rgba(251, 73, 101, 0.24);
    backdrop-filter: blur(4px);
}
.btn-edso-green:hover{
    color: #fff;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
}
.btn-edso-bd-wh{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #FFF;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-edso-bd-wh:hover{
    color: #000;
    background: #fff;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-edso-bd-black{
    /* display: flex; */
    /* align-items: center; */
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-edso-bd-black:hover{
    color: #fff;
    background: #000;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-edso-black{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #000;
    background-color: #000;
    transition: all 0.25s;
}
.btn-edso-black:hover{
    color: #fff;
    background: #000;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-edso-pp-le{
    display: flex;
    align-items: center;
    color: #fff;
    border-radius: 8px;
    border: 1px solid #5E4481;
    background-color: #5E4481;
    transition: all 0.25s;
}
.btn-edso-pp-le:hover{
    color: #fff;
    border-radius: 8px;
    background: #8D3CE1;
    box-shadow: 0px 4px 16px 0px rgba(168, 111, 227, 0.64);
    transition: all 0.25s;
}

.card-edso {
    padding: 1.5rem;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 1px 24px rgb(0 0 0 / 12%);
    border-radius: 24px !important;
}

.card-logo-edso {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

img.card-logo-edso:hover {
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
}

.edso-btn-search {
    width: 48px;
    background: linear-gradient(45deg, rgba(23,197,233,1) 25%, rgba(156,208,79,1) 75%);
    color: #fff;
}
.edso-btn-search:hover {
    background: linear-gradient(45deg, rgba(156,208,79,1) 25%, rgba(23,197,233,1) 75%);
    color: #fff;
    transition:  5ms;
}
.tag-new-lg{
    position: absolute;
    top: 0;
    right: 0;
    color: #11D13B;
    font-size: 24px;
    background-color: #E6F8EA;
    border-left: 6px solid white;
    border-bottom: 6px solid white;
    border-radius: 50%;
    padding: 12px 10px 10px 10px;
    height: 64px;
    width: 68px;
}
.edso-card-top{
    border-radius: 24px; 
    background: #FFF; 
    box-shadow: 2px 3px 16px 0px rgba(202, 198, 181, 0.32);
}
.badge-edso-new{
    cursor: default;
    padding: 8px 16px 8px 16px;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 500;
    color: #11D13B;
    background-color: #E6F8EA;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.badge-edso-new:hover{
    cursor: default;
    color: #11D13B;
}
.poster-webinar-img{
    border-radius: 16px;
}

.bg-hv-bg-opct{
    position: absolute;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    transition: opacity 0.5s;
    opacity: 0;
}
.bg-hv-bg-opct:hover{
    transition: opacity 0.5s;
    opacity: 1;
}
/* +-+-+-+-+ st edsociate live +-+-+-+-+ */
#edso-banner {
    margin-top: 4.7rem; 
}
@media only screen and (min-width: 428px) {
    #edso-banner{
        padding: 2rem 4rem 2rem 4rem ;
    }
    #edso-text-banner{
        padding-left: 4rem;
    }
}
@media only screen and (max-width: 427px) {
    #edso-banner{
        padding: 1rem 2rem 1rem 2rem ;
    }
    #edso-text-banner{
        padding-left: 0rem;
    }
    #edso-text-banner {
        display: flex;
        justify-content: center;
    }
}
#splide-edso-banner .splide__pagination__page.is-active{
    background: #86be4c !important;
}
#splide-edso-banner .splide__slide.is-active img{
    border: 6px solid #fff;
    transform: scale(1, 1) !important;
    transition: transform 500ms;
    box-shadow: 0px 4px 8px rgb(196 196 196 / 50%) !important;
}
#splide-edso-banner .splide__slide.is-active .tag-new-lg{
    transform: scale(1, 1) !important;
    transition: transform 500ms;
    border-radius: 0px 24px;
}
#splide-edso-banner .splide__slide img:hover{
    box-shadow: 0px 4px 8px rgb(196 196 196 / 25%) !important;
}
.card-img-box-edso-live {
    position: relative;
    /* max-height: 190px; */
    height: auto;
    cursor: pointer;
}
.card-img-box-edso-live .card-img-top {
    z-index: -1;
    height: 100%;
}
.card-img-box-edso-live img{
    height: auto;
    object-fit: cover;
    object-position: 0px 0%;
}
.card-img-box-edso-live:hover .i-bg,
.card-img-box-edso-live:hover .i-circle,
.card-img-box-edso-live:hover .i-triangle{
    transition: opacity 0.5s;
    opacity: 1;
}
/* +-+-+-+-+ end edsociate live +-+-+-+-+ */

.text-edso-pp {
    color: #7F3BC6;
}
.section-testimonial-edso{
    background: #F2FAFE;
}
.splide-testimonial-edso .card{
    border-radius: 24px !important;
    border: 1px solid #E6E6E7;
    background: #FDFDFD;
    min-height: 240px;
    max-width: 390px;
}

.fade-container-edso {
    position: relative;
    overflow: hidden;
}
.fade-container-edso::before,
.fade-container-edso::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* ความกว้างของ fade */
    pointer-events: none;
    z-index: 1;
}
.fade-container-edso::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.fade-container-edso::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.splide-edso-bpt .splide__arrow {
    width: 3em !important;
    height: 3em !important;
}
.splide-edso-bpt .splide__arrow--prev {
    left: -5em;
}
.splide-edso-bpt .splide__arrow--next {
    right: -5em;
}

.splide-edso-bpt .splide__pagination {
    bottom: -2em !important;
    counter-reset: pagination-num;
}
.splide-edso-bpt .splide__pagination__page:before{
    counter-increment: pagination-num;
    content: counter( pagination-num );
}
.splide-edso-bpt .splide__pagination__page{
    color: #fff !important;
    width: 28px !important;
    height: 28px !important;
    opacity: 1 !important;
    border-radius: 2px !important;
    border: 1px solid #FFF !important;
    background: transparent !important;
}
.splide-edso-bpt .splide__pagination__page.is-active {
    background: rgba(255, 255, 255, 0.40) !important;
}

.splide-navi .splide__pagination {
    bottom: -2em !important;
    counter-reset: pagination-num;
    padding-bottom: 2rem;
    overflow: hidden !important;
}
.splide-navi .splide__pagination__page:before{
    counter-increment: pagination-num;
    content: counter( pagination-num );
}
.splide-navi .splide__pagination__page {
    color: #000 !important;
    width: 28px !important;
    height: 28px !important;
    opacity: 1 !important;
    border-radius: 2px !important;
    border: 1px solid #E1E1E1 !important;
    background: transparent !important;
}
.splide-navi .splide__pagination__page.is-active {
    border: 1px solid #5E4481 !important;
}

.btn-edso-pp {
    color: #fff;
    border-radius: 8px;
    background: #7F3BC6;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn-edso-pp:hover{
    color: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.80);
}
.edso-bpt-section .img-star-1,
.edso-bpt-section .img-star-2,
.edso-bpt-section .img-star-3,
.edso-bpt-section .img-star-4,
.edso-bpt-section .img-wb-1{
    position: absolute;
    z-index: 2;
}
.edso-bpt-section .img-star-1{
    top: 150px;
    right: 200px;
    animation: spinLeftRight 1.8s infinite ease-in-out;
}
.edso-bpt-section .img-star-2{
    top: 80px;
    right: 250px;
    animation: spinLeftRight 0.5s infinite ease-in-out;
}
.edso-bpt-section .img-star-3{
    top: 480px;
    left: 230px;
    animation: spinLeftRight 1s infinite ease-in-out;
}
.edso-bpt-section .img-star-4{
    top: 60px;
    left: 200px;
    animation: spinLeftRight 1.5s infinite ease-in-out;
}
.edso-bpt-section .img-wb-1{
    top: 350px;
    right: 180px;
}
@keyframes spinLeftRight {
    0% {
      transform: rotate(-10deg); /* หันซ้าย */
    }
    50% {
      transform: rotate(10deg); /* หันขวา */
    }
    100% {
      transform: rotate(-10deg); /* กลับมาหันซ้าย */
    }
}
.btn-border-black-edso{
    padding: 9px 46px 9px 46px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
}
.btn-border-black-edso:hover{
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
}
/* -----------------------end custom Edsociate ------------------------*/

/* -----------------------start custom Webinar ------------------------*/
.section-1-course-detail .bg-edso-webinar {
    color: #5E4481;
    height: 32px;
    background: #F8F4FC;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
/* -----------------------end custom Webinar ------------------------*/


.cursorDisabled{ cursor: not-allowed; }
.cursorProgress{ cursor: progress; }


@media screen and (max-width: 991px) {
    .card-course-title {
        overflow: hidden !important;
        display: block !important;
        max-height: 2.6em !important;
        line-height: 1.3em !important;
    }
}
@media screen and (min-width: 992px) {
    .card-course-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
}

.card-course-title3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.limit-text-3r {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.limit-text-4r {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#modal-course-page .modal-header {   border-top-left-radius: 15px; border-top-right-radius: 15px; background: #5E4481; }
#modal-course-page .btn-purple, .btn-purple:focus, .btn-purple:active { color: white; background-color: #5e4481; }
#modal-course-page .btn-purple:hover, .btn-purple:disabled {  color: #fff; background-color: #784BB5;   border-color: #784BB5; }
#modal-course-page .modal .btn-close {  border-radius: 50%;  border: 0px solid #999999; color: white; background: transparent; }
#modal-course-page .modal-header .btn-close {  margin: -1.5rem -.1rem -.5rem auto; }
#modal-course-page .modal-dialog-wh { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; max-width:none !important; }
#modal-course-page .modal-header-wh { color: #fff; background: rgb(65, 46, 92); border-bottom: 1px solid #9ea2a2 !important; border-top-left-radius: 0px; border-top-right-radius: 0px; }
#modal-course-page .modal-content-wh { height: auto !important; min-height: 100% !important; border-radius: 0 !important; background-color: #ececec !important }
#modal-course-page .modal-body-wh { padding: 0;  }

#logoutModal .modal-content {  background: #5e4481;  border: 0 solid transparent !important; border-radius: 8px !important; }
#logoutModal .modal-header {  text-align: center; color: #FFFFFF !important; }
#logoutModal .modal-footer {  background: #FFFFFF; display: block; flex-wrap: nowrap; flex-shrink: 0; align-items: normal; justify-content: normal;  }
#logoutModal .modal-footer .form-check-input { margin-top: .4em; }
#logoutModal #btnLogout {  background: #5e4481;  color: #FFFFFF !important; }
#logoutModal #btnLogout:hover {  background: #784BB5;}
#logoutModal #btnLogoutCancel {  background: #999999;  color: #FFFFFF !important; }
#logoutModal #btnLogoutCancel:hover {  background: #9ea2a2;  color: #FFFFFF !important; }

.btn-purple {  background-color: #5E4481; color: #FFF;    padding: .375rem .75rem;  font-size: 1rem;    border-radius: .25rem; }
.btn-purple:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:after, .btn-purple:before {  background-color: #784BB5;   color: #FFF; }
.btn-purple-small {  background-color: #5E4481; color: #FFF;   padding: .12rem .3rem;  font-size: 0.7rem;  border-radius: .25rem; }
.btn-purple-small:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:after, .btn-purple:before {  background-color: #784BB5;   color: #FFF; }
.btn-gray {  background-color: #999999; color: #FFF;    padding: .375rem .75rem;  font-size: 1rem;    border-radius: .25rem; }
.btn-gray:hover, .btn-gray:active, .btn-gray:focus, .btn-gray:after, .btn-gray:before {  background-color: #7a7a7a;   color: #FFF; }
.text-success{ color: green !important; }
.text-danger{ color: red !important; }
.text-secondary{ color: grey !important; }
.text-bold{ font-weight: bold; }
.text-small { font-size: small; }
.link-hv-pp:hover{
    color: #784BB5;
}
.link-hv-sk4l:hover{
    color: #3B589E;
}
.link-hv-idp:hover{
    color: #7bb7b2;
}
.link-hv-medee:hover{
    color: #E8284D;
}

.badge{
    color: #999999;
}
.badge-le{
    color: #fff;
    background-color: #5E4481;
    padding: 0px 6px;
    border-radius: 4px;
}

.btn-pp-le{
    color: #fff;
    background-color: #5E4481;
    border-color: #5E4481;
}
.btn-pp-le:hover{
    color: #fff;
    background-color: #784BB5;
    border-color: #784BB5;
}
.btn-le {
    cursor: pointer;
    padding: 6px 28px;
    color: #fff!important;
    background: #5E4481 !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}
.btn-le:hover {
    color: #fff!important;
    background: #4c356b !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1) !important;
}
.modal-content-purple{ background-color: #5E4481; }
.modal-header-transparent{ background-color: transparent; color: white; text-align: center; }
.modal-body-white{ background-color: white; }
.modal-footer-white{ background-color: white; border-bottom-right-radius: 13px;  border-bottom-left-radius: 13px; }

/* ========== ========== */
.section-2-form-working-status .select2-container--default .select2-selection--single{
    height: 48px;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 4px 14px rgb(0 0 0 / 8%);
    border-radius: 8px;
}
.section-2-form-working-status .select2-container .select2-selection--single .select2-selection__rendered{
    padding-top: 8px;
}
.section-2-form-working-status .select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 10px;
}


#modalPDPA .form-check-input:checked{
    background-color: #5E4481 !important;
    border-color: #5E4481 !important;
}

/* ======================= modal แบบสอบถาม ============================ */
.nvgt-bar-step .row{
    height: 7px;
}
.nvgt-bar-step .row .col-4 div{
    height: 7px;
    border-radius: 8px;;
}

.btn-wbq-next{
    color: #fff;
    width: 100%;
    height:42px;
    background: #5E4481; 
    border-radius: 4px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.1);
}
.btn-wbq-next:hover{
    color: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.5);
}

#modal_website_questionnaire .form-check-input{
    background-color: transparent !important;
    border: none !important;
    width: 56px;
    height: 56px;
}
#modal_website_questionnaire .form-check-input:checked[type=radio]::after{
    background-image: none !important;
    color: #5E4481 !important;
    border-color: #5E4481 !important;
}
#modal_website_questionnaire .form-check-input:checked{
    background-color: transparent !important;
    border-color: transparent !important;
    accent-color: none !important;
}

#modal_website_questionnaire .form-check-input{
  cursor: pointer;
  outline:0 !important;
}

#modal_website_questionnaire input[type="radio"]:focus {
    box-shadow: none !important;
}
#modal_website_questionnaire .form-check-input::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f5c8";
    font-weight: 350;
    font-size: 2.5rem;
    /* transition: all 0.3s linear; */
    color: #AAAAAA;
    line-height: initial;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 4px 8px;
}
#modal_website_questionnaire .radio-icon-2::after{
    content: "\f119" !important;
}
#modal_website_questionnaire .radio-icon-3::after{
    content: "\f11a" !important;
}
#modal_website_questionnaire .radio-icon-4::after{
    content: "\f118" !important;
}
#modal_website_questionnaire .radio-icon-5::after{
    content: "\f599" !important;
}
/* ======================= modal แบบสอบถาม ============================ */

/* ======================= start หน้ารายละเอียก mooc หรือ data science ============================ */
.section-1-course-detail .bg-data-sci {
    color: #3773B5;
    height: 32px;
    background: #E6F2FF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}

#course-detail-data-science .box-icon i {
    color: #573C73 !important;
}
.btn-register-pp-le {
    cursor: pointer;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    color: #fff;
    background: #573C73;
    box-shadow: 0px 4px 8px -6px rgba(136, 98, 176, 0.38), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
    border: 1px solid #573C73;
}
.btn-register-pp-le:hover {
   background: #F5F2FA;
   color: #5E4481;
}
.btn-register-border-pp-le {
    cursor: pointer;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    color: #573C73;
    background: #fff;
    box-shadow: 0px 4px 8px -6px rgba(136, 98, 176, 0.38), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
    border: 1px solid #573C73;
}
.btn-register-border-pp-le:hover {
   background: #573C73;
   color: #fff;
}
.btn-register-bd-pp-le {
    cursor: pointer;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    color: #5E4481;
    background: #F5F2FA;
    box-shadow: 0px 4px 8px -6px rgba(136, 98, 176, 0.38), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
    border: 1px solid #573C73;
}
.btn-register-bd-pp-le:hover {
   background: #573C73;
   color: #fff;
}

.btn-register-package {
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    box-shadow: 0px 4px 8px -6px rgba(136, 98, 176, 0.38), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
}
.btn-register-package::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: #fff;
    border-radius: 100px;
}
.btn-register-package::after {
    content: attr(data-after);
    position: absolute;
    z-index: 3;
    left: 0px;
    right: 0px;
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.btn-register-package:hover {
    background: #fff !important;
}
.btn-register-package:hover::before {
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%) !important;
}
.btn-register-package:hover::after {
    color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.btn-register-package-all {
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    box-shadow: 0px 4px 8px -6px rgba(136, 98, 176, 0.38), 0px 18px 88px -4px rgba(0, 0, 0, 0.14);
    border-radius: 100px;
    background: linear-gradient(74.78deg, #09236C -0.75%, #0244A2 26.3%, rgba(219, 92, 30, 0) 80.87%), linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
}
.btn-register-package-all::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: #fff;
    border-radius: 100px;
}
.btn-register-package-all::after {
    content: attr(data-after);
    position: absolute;
    z-index: 3;
    left: 0px;
    right: 0px;
    background: linear-gradient(74.78deg, #09236C -0.75%, #0244A2 26.3%, rgba(219, 92, 30, 0) 80.87%), linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.btn-register-package-all:hover {
    background: #fff !important;
}
.btn-register-package-all:hover::before {
    background: linear-gradient(74.78deg, #09236C -0.75%, #0244A2 26.3%, rgba(219, 92, 30, 0) 80.87%), linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%) !important;
}
.btn-register-package-all:hover::after {
    color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.text-gd-orgen {
    background: linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-gd-blue-orgen {
    background: linear-gradient(74.78deg, #09236C -0.75%, #0244A2 26.3%, rgba(219, 92, 30, 0) 80.87%), linear-gradient(180deg, #F99219 13.54%, #DB5C1E 77.6%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.btn-confm-dt-sci{
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    padding: 1rem 0rem 1rem 0rem;
    margin: 5px;
    background: linear-gradient(180deg, #3F5DD7 0%, #222D5A 100%);
    border-radius: 4px;
}
.btn-cl-dt-sci{
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #223996;
    background-color: #fff;
    padding: 0.875rem 0rem 0.875rem 0rem;
    margin: 5px;
    border: 1px solid #223996;
    border-radius: 4px;
}
.btn-confm-dt-sci:hover{
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-cl-dt-sci:hover{
    border-color: #992e38;
    background: linear-gradient(180deg, #ff5060 0%, #992e38 100%);
    color: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
/* ======================= end หน้ารายละเอียก mooc หรือ data science ============================ */

/* ======================= start หน้า Certificate ============================ */
.section-1-certificate .select2-search input, 
.section-1-certificate .select2-search input::-webkit-input-placeholder {
    font-size: 0.875rem;
    line-height: 2 !important;
}
.section-1-certificate .select2-container--default .select2-selection--single{
    height: 48px !important;
    border: 1px solid #E1E1E1;
    box-sizing: border-box !important;
    box-shadow: 0px 4px 14px rgb(0 0 0 / 8%) !important;
    border-radius: 8px !important;
}
.section-1-certificate .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 48px !important;
}
.section-1-certificate .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 48px !important;
}

.section-1-certificate .select2-container{
    width: 100% !important;
}
.section-1-certificate #courseCode input{
    line-height: 2.5 !important;
}
.container-1-certificate {
    border: 2.5px solid #5E4481;
    border-radius: 24px;
}
/* ======================= end หน้า Certificate ============================ */

.section-1-search-web #myTab .nav-link.active, #myTab .show>.nav-link{
    color: #5E4481;
}
.section-1-search-web #myTab .nav-link{
    color: #000;
    border: 1px solid #f5f5f5;
    margin-left: 8px;
    margin-bottom: 8px;
}
.section-1-search-web #myTab .nav-link:hover{
    color: #5E4481;
    border-color: #5E4481;
}
.wk-html-bg-img{
    background-image: none !important;
    background-color :#5E4481 !important;
}
.wk-body-set-bg{
    width: 100%;
    height: 100%;
    background-image: none !important;
    background-color: transparent !important;
}

.magazine-viewport .container{
	/* position:absolute;
	top:40%;
	left:50%;*/
	width:100%;
	height:720px;
	margin:auto; 
    /* height: 100%; */
    /* width: 100%; */
}

.magazine-viewport .magazine{
	/* width:1150px;
	height:720px;*/
	/* left:-152px; */
	/* top:16px;  */
    height: 100%;
    transition: margin-left 0.25s ease-out;
    width: 90%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .magazine-viewport .magazine{
        /* left:-80px; */
        top:0px; 
        height: 80%;
    }
}
@media screen and (min-width: 1367px) and (max-width: 1400px) {
    .magazine-viewport .magazine{
        /* left:-6px; */
        top:0px; 
        height: 80%;
    }
}
@media screen and (min-width: 1401px) and (max-width: 1600px) {
    .magazine-viewport .magazine{
        /* left:-98px; */
        top:0px; 
    }
}

.magazine-viewport .page{
	/* width:80%; */
	/* height:600px; */
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.magazine-viewport .zoomer .region{
	display:none;
}

.magazine-viewport .zoom-in .region{
	display:none;
}

.magazine .region{
	position:absolute;
	overflow:hidden;
	background:#0066FF;
	opacity:0.2;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.magazine .region:hover{
	opacity:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.magazine .region.zoom{
	opacity:0.01;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

.magazine .region.zoom:hover{
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.magazine .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.magazine-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.magazine .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.magazine .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient{
	display:none;
}

.magazine-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.magazine-viewport .next-button,
.magazine-viewport .previous-button{
	width:22px;
	height:720px;
	position:absolute;
	top:0;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .magazine-viewport .next-button,
    .magazine-viewport .previous-button{
        height:577px;
    }
    .magazine-viewport .previous-button-hover,
    .magazine-viewport .previous-button-down{
        background-position:-4px 261px !important;
    }

    .magazine-viewport .next-button-hover,
    .magazine-viewport .next-button-down{
        background-position:-38px 261px !important;
    }
}

.magazine-viewport .next-button{
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
    cursor: pointer;
}

.magazine-viewport .previous-button{
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
    cursor: pointer;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
	background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
	background-image:url(../images/arrows.png);
	background-position:-4px 350px;
	background-repeat:no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
	background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
	background-image:url(../images/arrows.png);
	background-position:-38px 350px;
	background-repeat:no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
	display:none;
}

.animated{
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

.made{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	font: 14px arial;
	line-height:40px;
	color:#666;
	text-align:center;
	z-index:10;
}

/* .card-show-detail {
    position: absolute;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 0px;
    background: rgb(80 80 80 / 80%);
    overflow-y: hidden;
    transition: height 1s;
    border-radius: 16px;
}

.btn-show-card-detail {
    position: absolute;
    z-index: 4;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: #00c300;
    border-radius: 0 0 100% 100%;
    transform: translate(0, -50%);
    transition: width 1s, height 1s, transform 0.5s, background-color 3s;
}
.btn-show-card-detail:hover{
    background-color: transparent;
    cursor: pointer;
    height: 100%;
    width: 100%;
    transform: translate(0,0);
    transition: background-color 0.1s
}
.btn-show-card-detail:hover .card-show-detail{
    height: 100%;
} */

.badge-success{ color: #fff; background-color: green; }
.badge-danger{ color: #fff; background-color: red; }
.text-normal{ font-weight: normal; }
.bg-disabled{ background-color: lightgrey; }

/* ======== start stem  custom ======== */
.btn-stem-red{
    font-size: 1.125rem;
    font-weight: 500;
    /* padding: 16px 8px; */
    color: #fff;
    border-radius: 8px;
    background: #DC1C67;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 24px 0px rgba(51, 211, 235, 0.24);
    backdrop-filter: blur(4px);
    transform: scale(1);
    transition: transform 0.25s;
}
.btn-stem-red:hover{
    transform: scale(0.98);
    transition: transform 0.25s;
    color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.20), 0px 2px 24px 0px rgba(51, 211, 235, 0.40);
}
.card-countdown-black{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 45px;
    color: #fff;
    border-radius: 6px;
    background: #000;
}

.circle-out{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    width: 134px;
    height: 134px;
    background: #fff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    animation: morph-radius 2s infinite alternate ease-in-out;
}
div.line-border-dashed{
    position: absolute;
    z-index: 1;
    top: 64px;
    left: 10%;
    width: 1050px;
    height: 4px;
    border-top: 4px dashed #30D2EB;
}

/* .circle-out-after-arrow::after{
    display: inline;
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    width: 160px !important;
    height: 4px;
    border-top: 4px dashed #30D2EB !important;
    right: -160px !important;
} */
.circle-in {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    width: 104px;
    height: 104px;
    background: #fff;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.24);
    border-radius: 50%;
    animation: morph-radius 2s infinite alternate ease-in-out;
}
@keyframes morph-radius {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 40px;
  }
}
table.table-stem.table-striped>tbody>tr:nth-of-type(even)>*{
    background: #EDF8FA;
}
table.table-stem.table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-accent-bg: rgb(255 255 255);
}
.img_research_lecturer_stem{
    width: 100%;
    max-width: 200px;
    border-radius: 50%;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16);
}
.card-img-top-zoom {
    transition: transform 0.4s ease, border-radius 0.4s ease;
    will-change: transform, border-radius;
    backface-visibility: hidden;
}
.card-img-top-zoom:hover {
    border: 1px solid #EDEDED;
    border-radius: 24px;
    transform: scale(1.02);
}

.text-hv-stem:hover {
    color: #30D2EB;;
}
.btn-show-course-detail-hv-stem:hover {
    /* color: #000;
    border-color: #000; */
    color: #fff;
    background: #30D2EB;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.2));
    border-color: #30D2EB;
}
.btn-show-course-detail-hv-stem:active {
    /* color: #000;
    border-color: #000; */
    color: #fff;
    background: #30D2EB;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.2));
    border-color: #30D2EB;
}

.img-zoom-shake {
  animation: zoom-shake 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}
@keyframes zoom-shake {
  0% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(1.05) translateX(1px);
  }
  50% {
    transform: scale(1) translateX(0);
  }
  75% {
    transform: scale(1.05) translateX(-1px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
/* ======== end stem custom ======== */

.text-left{ text-align: left; }
.text-right{ text-align: right; }

/* -----------------------start custom Advocate ------------------------*/
@media only screen and (max-width: 1700px) { .advc-banner-img{ height: 600px !important; } }
@media only screen and (max-width: 1550px) { .advc-banner-img{ height: 560px !important; } }
@media only screen and (max-width: 1440px) { .advc-banner-img{ height: 520px !important; } }
@media only screen and (max-width: 1330px) { .advc-banner-img{ height: 480px !important; } }
@media only screen and (max-width: 1200px) { .advc-banner-img{ height: 400px !important; } }

.border-left-md-lg{
    border-left: 1px solid #ededed;
}
.splide-advc-live .splide__pagination,
.splide-advc-iss .splide__pagination,
.splide-advc-review .splide__pagination{
    bottom: -1em;
}
/* ------ st navigate ------- */
.navigate-advc {
    position: relative;
    display: flex;
    align-items: center;
    color: #124398;
    height: 40px;  
    background: #d2e9f5;
    border-radius: 4px 0px 0px 4px;
    padding-left: 21px;
    padding-right: 10px;
}

.navigate-advc.now {
    color: #757575;
    background: #F2F7FB;
    border-radius: 0px;
}

.navigate-advc::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #d2e9f5;
     z-index: 10;
}
.navigate-advc.now::after {
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     right: -13px;
     border-style: solid;
     border-width: 20px 0 20px 13px;
     border-color: transparent  #F2F7FB;
     z-index: 10;
}

.navigate-advc.bf::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -14.5px;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent #124398;
    z-index: 10;
}
.navigate-advc:hover{
    color: #124398;
    font-weight: 500;
}
/* ------ end navigate ------- */
.btn-advc-blue{
    color: #fff;
    border-radius: 8px;
    border: none !important;
    /* background: linear-gradient(0deg, #67C244 4%, #97CF3E 43.23%, #9ECE4B 56.25%, #A2CE54 72.4%, #A4CE57 91.67%, #C3DF90 100%); */
    background: #124398;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 10px 0px rgba(251, 73, 101, 0.24);
    backdrop-filter: blur(4px);
}
.btn-advc-blue:hover{
    color: #fff;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
}
.btn-advc-pp{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #7F3BC6;
    /* background: linear-gradient(0deg, #67C244 4%, #97CF3E 43.23%, #9ECE4B 56.25%, #A2CE54 72.4%, #A4CE57 91.67%, #C3DF90 100%); */
    background: #7F3BC6;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 10px 0px rgba(251, 73, 101, 0.24);
    backdrop-filter: blur(4px);
}
.btn-advc-pp:hover{
    color: #fff;
    border-color: #8D3CE1;
    box-shadow: 0px 4px 16px 0px rgba(168, 111, 227, 0.64);
}
.btn-advc-bd-wh{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #FFF;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-advc-bd-wh:hover{
    color: #000;
    background: #fff;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-advc-bd-wh-hv-pp{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #FFF;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-advc-bd-wh-hv-pp:hover{
    color: #fff;
    background: #8D3CE1;
    border-color: #8D3CE1;
    box-shadow: 0px 4px 16px 0px rgba(168, 111, 227, 0.64);
    transition: all 0.25s;
}
.btn-advc-bd-black{
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-advc-bd-black:hover{
    color: #fff;
    background: #000;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-advc-black{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #000;
    background-color: #000;
    transition: all 0.25s;
}
.btn-advc-black:hover{
    color: #fff;
    background: #000;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-advc-pp-le{
    color: #fff;
    border-radius: 8px;
    border: 1px solid #5E4481;
    background-color: #5E4481;
    transition: all 0.25s;
}
.btn-advc-pp-le:hover{
    color: #fff;
    transition: all 0.25s;
    border-radius: 8px;
    background: #8D3CE1;
    box-shadow: 0px 4px 16px 0px rgba(168, 111, 227, 0.64);
}

.card-advc {
    padding: 1.5rem;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 1px 24px rgb(0 0 0 / 12%);
    border-radius: 24px !important;
}

.card-logo-advc {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

img.card-logo-advc:hover {
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
}

.advc-btn-search {
    width: 48px;
    background: linear-gradient(45deg, rgba(23,197,233,1) 25%, rgba(156,208,79,1) 75%);
    color: #fff;
}
.advc-btn-search:hover {
    background: linear-gradient(45deg, rgba(156,208,79,1) 25%, rgba(23,197,233,1) 75%);
    color: #fff;
    transition:  5ms;
}
.tag-new-lg{
    position: absolute;
    top: 0;
    right: 0;
    color: #11D13B;
    font-size: 24px;
    background-color: #E6F8EA;
    border-left: 6px solid white;
    border-bottom: 6px solid white;
    border-radius: 50%;
    padding: 12px 10px 10px 10px;
    height: 64px;
    width: 68px;
}
.advc-card-top{
    border-radius: 24px;
    background: #FFF;
    box-shadow: 2px 3px 16px 0px rgba(202, 198, 181, 0.32);
}
.badge-advc-new{
    cursor: default;
    padding: 8px 16px 8px 16px;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 500;
    color: #11D13B;
    background-color: #E6F8EA;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.badge-advc-new:hover{
    cursor: default;
    color: #11D13B;
}
.poster-webinar-img{
    border-radius: 16px;
}

.advc-bg-hv-bg-opct{
    position: absolute;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    transition: opacity 0.5s;
    opacity: 0;
}
.advc-bg-hv-bg-opct:hover{
    transition: opacity 0.5s;
    opacity: 1;
}
/* +-+-+-+-+ st advcciate live +-+-+-+-+ */
#advc-banner {
    margin-top: 4.7rem; 
}
@media only screen and (min-width: 428px) {
    #advc-banner{
        padding: 2rem 4rem 2rem 4rem ;
    }
    #advc-text-banner{
        padding-left: 4rem;
    }
}
@media only screen and (max-width: 427px) {
    #advc-banner{
        padding: 1rem 2rem 1rem 2rem ;
    }
    #advc-text-banner{
        padding-left: 0rem;
    }
    #advc-text-banner {
        display: flex;
        justify-content: center;
    }
}
#splide-advc-banner .splide__pagination__page.is-active{
    background: #86be4c !important;
}
#splide-advc-banner .splide__slide.is-active img{
    border: 6px solid #fff;
    transform: scale(1, 1) !important;
    transition: transform 500ms;
    box-shadow: 0px 4px 8px rgb(196 196 196 / 50%) !important;
}
#splide-advc-banner .splide__slide.is-active .tag-new-lg{
    transform: scale(1, 1) !important;
    transition: transform 500ms;
    border-radius: 0px 24px;
}
#splide-advc-banner .splide__slide img:hover{
    box-shadow: 0px 4px 8px rgb(196 196 196 / 25%) !important;
}
.card-img-box-advc-live {
    position: relative;
    /* max-height: 190px; */
    height: auto;
    cursor: pointer;
}
.card-img-box-advc-live .card-img-top {
    z-index: -1;
    height: 100%;
}
.card-img-box-advc-live img{
    height: auto;
    object-fit: cover;
    object-position: 0px 0%;
}
.card-img-box-advc-live:hover .i-bg,
.card-img-box-advc-live:hover .i-circle,
.card-img-box-advc-live:hover .i-triangle{
    transition: opacity 0.5s;
    opacity: 1;
}
/* +-+-+-+-+ end advcciate live +-+-+-+-+ */
.pagination-advocate .page-link {
    color: #124398;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0px 8px;
}
.pagination-advocate .page-item.active .page-link{
    color: #fff;
    border-color: #124398;
    background-color : #124398;
}
.pagination-advocate .page-link:hover{
    color: #124398;
    border: 1px solid #124398;
}
.btn-advocate-bd-black{
    /* display: flex; */
    /* align-items: center; */
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
    background-color: transparent;
    transition: all 0.25s;
}
.btn-advocate-bd-black:hover{
    color: #fff;
    background: #000;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 8px 28px rgba(0, 0, 0, 0.1);
    transition: all 0.25s;
}
.btn-drop-show-advc.is-open,
.btn-drop-show-advc:hover{
    color: #112551 !important;
    background: #d0e9f4 !important;
    border-color: #5E4481 !important;
}
@media only screen and (max-width: 1024px) {
    .advc-footer-logo-sp{
        max-height: 50px !important;
    }
}
@media only screen and (max-width: 768px) {
    .advc-footer-logo-sp{
        max-height: 30px !important;
    }
}
@media only screen and (max-width: 476px) {
    .advc-footer-logo-sp{
        margin-right: 0.25rem;
        margin-left: 0.25rem;
        max-height: 20px !important;
    }
}
/* -----------------------end custom Advocate ------------------------*/

/* -----------------------start custom Webinar Advocate ------------------------*/
.section-1-course-detail .bg-advc-webinar {
    color: #124398;
    height: 32px;
    background: #d0e9f4;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
/* -----------------------end custom Webinar Advocate ------------------------*/

p.tel a{
    color: #d3d3d3 !important
}
/* -----------------------start custom LEAP ------------------------*/
.btn.btn-primary.startlearn{
    border: none !important;
}
.btn.btn-primary.startlearn:hover{
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .9), 0px 4px 10px 0px rgba(0, 0, 0, .5) !important;
}
/* -----------------------end custom LEAP ------------------------*/