#block-package{
    background: url(../images/bg-package.png) no-repeat center;
    background-size: cover;
}

.package-item .photo{
    border-radius: 30px;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: var(--bs-box-shadow) !important;
}

#block-registration{
    background: linear-gradient(90deg, #012166 0%, #02246E 13.86%, #08349F 100%);
}

#block-service {
    background: url(../images/bg-srv-2.png) no-repeat;
    background-size: cover;
}

#block-kol {
    background: #f8f9fa;
}

#block-kol .kol-item{
    
}

#block-kol .kol-item .avatar{

}

#block-success-stories {
    background: #f8f9fa;
}

#block-press {
    background: #f0f4f9;
}

#block-news {
    background: #f8f9fa;
}

#block-partners {
    background: #ffffff;
}

#block-certificates {
    background: #F2FAFF;
}

#block-feedback {
    background: #f8f9ff;
}

#block-banner-registration {
    background: url(../images/bg-srv4.png) no-repeat;
    background-size: cover;
}
#block-banner-registration .head-form{
    background: #ff4081;
    color: #fff;
}

/* Certificate Items */
.certificate-item {
    transition: all 0.3s ease;
}

.certificate-item:hover {
    transform: translateY(-5px);
}

.certificate-item img {
    transition: all 0.3s ease;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}

.certificate-item:hover img {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Press Cards */
.press-card {
    transition: all 0.3s ease;
}

.press-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* News Cards */
#block-news .card {
    transition: all 0.3s ease;
}

#block-news .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

#block-news .card-title {
    transition: color 0.3s ease;
}
#block-news .card-title:hover a{
    color: var(--pink) !important;
}
#block-news .small-news .card-title a{
    font-size: 1.2rem;
}
#block-news .card-title a{
    color: var(--primary);
    font-size: 1.5rem;
   text-decoration: none;
   transition: color 0.3s ease;
}
#block-news .card:hover .card-title {
    color: var(--pink) !important;
}

/* Partner Logos */
.bg-white.shadow-sm.rounded {
    transition: all 0.3s ease;
}

.bg-white.shadow-sm.rounded:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.partner-logo {
    max-height: 50px;
}

/* Rating Stars */
.rating {
    color: #ffd700;
    font-size: 0.8rem;
}

/* Swiper Pagination & Navigation */
.swiper-pagination-bullet-active {
    background: var(--primary) !important;
}

.swiper-button-next, .swiper-button-prev {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.8);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.2rem !important;
}

/* Button Registration */
.btn-registration {
    background: #ff4081 !important;
    font-size: 1rem;
    letter-spacing: 1px;
    border: none;
    transition: all 0.3s ease;
    padding: 0.35rem 2rem;
}

.btn-registration:hover {
    background: #e91e63 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 64, 129, 0.3) !important;
}

/* Package Section Styles */
#block-package h1 {
    font-size: 2.5rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-package .package-item img {
    height: 280px;
    object-fit: cover;
}

/* Registration Section Styles */
#block-registration .position-relative {
    z-index: 2;
}

#block-registration h2 {
    font-size: 1.8rem;
    letter-spacing: 1px;
}

#block-registration p {
    font-size: 1.1rem;
    line-height: 1.6;
}

#block-registration .form-control {
    background: #f1f5f9;
    font-size: 1rem;
    color: #64748b;
}

/* Service Section Styles */
#block-service h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-service .service-item img {
    height: 250px;
    object-fit: cover;
}

#block-service .name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
#block-service .name h5{
    background: #ffffffbd;
    color: var(--primary);
    padding: 10px 0;
}
#block-service .name .price strong sup{
    letter-spacing: normal;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    top: -12px;
}
#block-service .name .price strong{
    font-size: 1.4rem;
    letter-spacing: 2px;
}
#block-service .name .price{
 background: linear-gradient(90deg, #012166 0%, #08349F 48.56%, #012166 100%);
 padding: 4px;
 font-size: 1.2rem;
 color: #fff;
 font-weight: 500;
}

/* KOL Section Styles */
#block-kol h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-kol h4 {
    color: #e91e63;
    font-size: 1.3rem;
}

#block-kol .rating-label {
    font-size: 0.9rem;
    font-weight: 500;
}

#block-kol .feedbackThumbSwiper {
   
}

#block-kol .feedbackThumbSwiper .swiper-slide img {
    object-fit: cover;
}

#block-kol .feedback-thumb-next,
#block-kol .feedback-thumb-prev {
    position: absolute;
    top: 50% !important;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #FD5392 !important;
    background: #fff;
    width: 30px !important;
    height: 30px !important;
    border-radius: 5px;
    font-size: 8px !important;
    box-shadow: var(--bs-box-shadow) !important;
    margin-top: 0;
    transform: translateY(-50%);
}

#block-kol .feedback-thumb-next:hover,
#block-kol .feedback-thumb-prev:hover {
    /* background: rgba(255,255,255,0.95) !important; */
    /* transform: translateY(-50%) scale(1.1); */
}

#block-kol .feedback-thumb-next {
    right: 5px;
}

#block-kol .feedback-thumb-prev {
    left: 5px;
}

#block-kol .feedbackThumbSwiper .swiper-slide {
    cursor: pointer;
    transition: all 0.3s ease;
}

#block-kol .feedbackThumbSwiper .swiper-slide:hover {
    transform: scale(1.05);
}

#block-kol .feedbackThumbSwiper .swiper-slide img {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

#block-kol .feedbackThumbSwiper .swiper-slide.swiper-slide-active img {
}

/* Animation cho content change */
#block-kol .content-animate {
    transition: all 0.3s ease-in-out;
}

#block-kol .content-animate.fade-out {
    opacity: 0;
    transform: translateY(2px);
}

#block-kol .content-animate.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#block-kol .photo {
    transition: all 0.3s ease-in-out;
}

#block-kol .photo.fade-out {
    opacity: 0;
    
}

#block-kol .photo.fade-in {
    opacity: 1;
    
}

/* Success Stories Section Styles */
#block-success-stories h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-success-stories h3 {
    font-size: 1.8rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-success-stories .highlight-text {
    color: #e91e63;
}

/* Success Stories Gallery */
.success-stories-gallery .loader:after{
    content:"";
    background: url(../images/loading.gif) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.success-stories-gallery .loader img{opacity: 0;}
.success-stories-gallery {
    position: relative;
    margin: 3rem 0;
}

.success-stories-gallery .row {
    align-items: center;
}

/* Main Image */
.main-image-container {
    text-align: center;
    /* padding: 0 20px; */
    background: #FFFFFF;
}

.main-image {
    /* border-radius: 15px; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.main-image:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Thumbnail Columns */
.thumbnail-column {
    display: flex;
    flex-direction: column;
    /* gap: 15px; */
    height: 100%;
    justify-content: center;
}

.left-thumbnails {
    align-items: flex-end;
}

.right-thumbnails {
    align-items: flex-start;
}

/* Thumbnail Items */
.thumbnail-item {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    background: #FFFFFF;
}

.thumbnail-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.thumbnail-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    transition: all 0.3s ease;
    height: 100% !important;
}

.thumbnail-item:hover img {
    transform: scale(1.05);
}

.thumbnail-item.active {
    border: 3px solid #e91e63;
    transform: translateY(-5px);
}

.thumbnail-item.active img {
    transform: scale(1.05);
}

/* Navigation Arrows */
.success-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.success-nav-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.success-nav-arrow i {
    color: #333;
    font-size: 14px;
}

.success-nav-prev {
    left: -20px;
}

.success-nav-next {
    right: -20px;
}

/* Button Styles */
#block-success-stories .btn {
   
    font-size: 0.9rem;
    letter-spacing: 1px;
    border: none;
    transition: all 0.3s ease;
}

#block-success-stories .btn:hover {
    background: #0a1f8f;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(7, 26, 211, 0.3);
}

/* Press Section Styles */
#block-press h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

/* Press Swiper 3D Effect */
.pressSwiper {
    padding: 50px 0;
    overflow: visible;
}
.pressSwiper .read-more{
    opacity: 0;
    transition: all 0.5s ease;
}
.pressSwiper .swiper-slide-active .read-more{
    opacity: 1;
}
.pressSwiper .swiper-slide img {
    transition: all 0.5s ease;
    transform: scale(0.9) translateX(0);
    opacity: 0.6;
}

.pressSwiper .swiper-slide-active img {
    transform: scale(1) translateX(0);
    opacity: 1;
    filter: blur(0);
    z-index: 10;
}



/* Press Card Styles */
.press-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.press-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Press Header */
.press-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.press-logo {
    max-width: 120px;
}

.press-logo img {
    max-height: 40px;
    object-fit: contain;
}

.press-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.press-category {
    background: #e91e63;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.press-date {
    color: #666;
    font-size: 0.8rem;
}

/* Press Content */
.press-content {
    padding: 20px;
    flex: 1;
}

.press-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.press-excerpt {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Press Image */
.press-image {
    padding: 0 20px 20px;
}

.press-image img {
    border-radius: 10px;
    height: 200px;
    object-fit: cover;
    width: 100%;
}

/* Button Styles */
#block-press .btn {
    background: var(--primary);
    font-size: 0.9rem;
    letter-spacing: 1px;
    border: none;
    transition: all 0.3s ease;
}

#block-press .btn:hover {
    background: #0a1f8f;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(7, 26, 211, 0.3);
}

/* Pagination */
.pressSwiper .swiper-pagination {
    bottom: -30px;
}

.pressSwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ddd;
    opacity: 1;
    transition: all 0.3s ease;
}

.pressSwiper .swiper-pagination-bullet-active {
    background: var(--primary);
    transform: scale(1.2);
}
.package-item span{
    font-size: 1.4rem;
}
#block-service .name h5{}
/* Responsive */
@media (max-width: 768px) {
    #block-service .name .price{
    font-size: 1rem;
}
    #block-service .name .price strong{
    font-size: 1rem;
}
    #block-service .name .price sup{
    font-size: 0.5rem !important;
    top: -10px !important;
}
    #block-service .name h5{
    font-size: 0.8rem !important;
    padding: 6px 0;
}
    .package-item span{
        font-size: 0.9rem;
    }
    .pressSwiper .swiper-slide {
        transform: scale(0.9);
        opacity: 0.7;
    }
    
    .pressSwiper .swiper-slide-active {
        transform: scale(1);
        opacity: 1;
    }
    
    .pressSwiper .swiper-slide-prev,
    .pressSwiper .swiper-slide-next {
        transform: scale(0.8);
        opacity: 0.4;
    }
    
    .press-title {
        font-size: 1.1rem;
    }
    
    .press-excerpt {
        font-size: 0.9rem;
    }
}

/* News Section Styles */
#block-news h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-news .card-img-top {
    height: 280px;
    object-fit: cover;
}

#block-news .card-title {
    font-size: 1.2rem;
    color: var(--primary);
}

#block-news .card-text {
    font-size: 0.95rem;
    line-height: 1.6;
}
#block-news .news-small .news-link{
    font-size:0.8rem;
}
#block-news .news-link {
    color: #ff4081;
    font-size: 1rem;
}

#block-news .small-news img {
    object-fit: cover;
}

#block-news .small-news .card-title {
    font-size: 1rem;
    color: var(--primary);
}

#block-news .small-news .card-text {
    font-size: 0.85rem;
    line-height: 1.5;
}

#block-news .small-news .news-link {
    font-size: 0.85rem;
}

/* Partners Section Styles */
#block-partners h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-partners img {
    max-height: 50px;
}

/* Certificates Section Styles */
#block-certificates h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-certificates img {
    max-width: 100%;
}

/* Feedback Section Styles */
#block-feedback h2 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

#block-feedback .feedback-image {
    object-fit: cover;
    height: 100%;
}

#block-feedback .feedback-title {
    color: var(--pink);
}

#block-feedback .avatar-container {
    width: 50px;
    height: 50px;
}

#block-feedback .avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banner Registration Section Styles */
#block-banner-registration .banner-image {
    width: 100%;
    height: auto;
}

#block-banner-registration .banner-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

#block-banner-registration .registration-title {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

#block-banner-registration .registration-subtitle {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

#block-banner-registration .form-control {
    background: #f1f5f9;
    font-size: 1rem;
    color: #64748b;
}

/* Mobile - Responsive Adjustments */
@media (max-width: 768px) {
    .certificate-item:hover {
        transform: none;
    }
    
    .press-card:hover {
        transform: none;
    }
    
    #block-news .card:hover {
        transform: none;
    }
    
    .bg-white.shadow-sm.rounded:hover {
        transform: none;
    }

    .thumbnail-column {
        flex-direction: row;
        gap: 10px;
        /* margin: 15px 0; */
    }
    
    .left-thumbnails,
    .right-thumbnails {
        padding: 0;
        align-items: center;
    }
    
    .thumbnail-item {
        /* max-width: 120px; */
    }
    
    .thumbnail-item img {
        height: 80px;
    }
    
    .success-nav-arrow {
        width: 35px;
        height: 35px;
    }
    
    .success-nav-prev {
        left: 10px;
    }
    
    .success-nav-next {
        right: 10px;
    }
}

#block-feedback .feedback-item{
    transition: all 0.3s ease;
    
box-shadow: 0px 0px 12px -1px rgba(13, 64, 154, 0.1);


}



#block-press .press-pagination{
    bottom: -10px;
}
#block-press .press-pagination span{
    background: transparent;
    border: 1px solid;
}

#block-press .press-pagination span.active{}
#block-feedback .button-next,#block-feedback .button-prev{
    background: #fff;
    border-radius: 7px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pink);
    color: var(--pink);
    font-size: 1.6rem;
    transition: 0.5s ease;
}
#block-feedback .button-prev:hover,#block-feedback .button-next:hover{
    color: #fff;
    background: var(--pink);
}

#block-press .press-pagination 
#block-feedback .button-prev{
   
}

.thumb-img-wrapper {
    position: relative;
    overflow: hidden;
  }
  .thumb-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
  }
  .thumb-img-wrapper img.hidden {
    opacity: 0;
  }

/* Success Stories crossfade */
#block-success-stories .thumbnail-item {
    position: relative;
    overflow: hidden;
    transform:translateZ(0);
}
#block-success-stories .thumbnail-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    display: block;
}
#block-success-stories .thumbnail-item img.hidden {
    opacity: 0;
}
#block-success-stories img{transition: all 0.5s ease !important;}
#block-success-stories .main-image-container {
    position: relative;
    overflow: hidden;
}
#block-success-stories .main-image {
    display: block;
    transition: opacity .4s ease;
}
#block-success-stories .ratio.ratio-gallery {
    aspect-ratio: 388/298;
}
#block-success-stories .loader {
    background: #fff;
}
.thumbnail-item img,.main-image-container img{
    cursor: pointer;
}
.wpoer-next-pre {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--primary-color, #0d6efd);
    color: white;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 40px;
    z-index: 123;
}
.wpoer-next-pre:hover {
    opacity: 0.85;
    transform: scale(1.05);
}
.wpoer-next-pre.swiper-partners-prev,.wpoer-next-pre.swiper-partners-next{top: 50%;transform: translateY(-50%);position: absolute;background: #fff;border: 2px solid var(--primary);color: var(--primary);border-radius: 5px;width: 30px;height: 30px;line-height: 30px;opacity: 0.8;}


.swiper-certificates-prev,.wpoer-next-pre.swiper-partners-prev{left:0;}
.swiper-certificates-next,.wpoer-next-pre.swiper-partners-next{right: 0;}
@media(max-width:768px){
    #block-feedback .feedback-title{font-size: 1.2rem;margin-bottom: 0.2rem !important;}
    #block-news .small-news .card-title a{
        font-size: 0.9rem;
    }
    #block-news .small-news .news-link{font-size:0.7rem;}
    .mobile-line-clamp-6{
        -webkit-line-clamp: 6;
        line-clamp: 6;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    #block-success-stories h2{
    font-size: 1.6rem;
}
    #block-success-stories h3{
    font-size: 1.1rem;
}
    #block-success-stories .main-image-container{
        aspect-ratio: 374/604 !important;
    }
    
    #block-press .btn{font-size:0.8rem;padding-top:6px !important;padding-bottom:6px !important;}
    
    #block-press .press-pagination{bottom:-20px}
    #block-package h1{
        font-size: 1.2rem;
    }
    #block-registration h2,#block-service h2,#block-kol h2,#block-press h2,#block-news h2,#block-partners h2,#block-certificates h2,#block-feedback h2{
        font-size: 1.4rem;
        line-height: 1.5;
    }
    .package-item .photo{border-radius: 10px;border:2px solid #fff}
}