.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba }
.section_slider { margin-bottom: 0px }
    .section_slider .home-slider .slider-text { position: absolute; top: 50%; transform: translate(0, -50%); left: 0px; right: 0; text-align: left; border-radius: 5px; color: #fff; z-index: 2; transition: 2s all; opacity: 0 }
        .section_slider .home-slider .slider-text .slider-content { max-width: 767px }
            .section_slider .home-slider .slider-text .slider-content .title { color: #fff; font-size: 46px; line-height: 1.2; position: relative; transition: 1.4s all; margin-bottom: 15px }
            .section_slider .home-slider .slider-text .slider-content .sup-title { color: #fff; font-size: 18px; transition: 1.4s all; margin-bottom: 15px; display: block }
            .section_slider .home-slider .slider-text .slider-content .button { background-color: var(--mainColor); color: #fff; padding: 15px 35px; border: 0; display: inline-block; font-size: 16px; text-transform: uppercase; font-weight: 600; margin-top: 20px; border-radius: 5px; overflow: hidden; position: relative; z-index: 2 }
                .section_slider .home-slider .slider-text .slider-content .button:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--mainColor2); z-index: -1; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.8s cubic-bezier(1, 0, 0, 1); -webkit-transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1),-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); vertical-align: top }
                .section_slider .home-slider .slider-text .slider-content .button:hover { color: #fff }
                    .section_slider .home-slider .slider-text .slider-content .button:hover:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1); transform: scale(1); opacity: 1 }
    .section_slider .home-slider .swiper-slide { position: relative; text-align: center }
        .section_slider .home-slider .swiper-slide img { display: block; margin: 0 auto }
        .section_slider .home-slider .swiper-slide.swiper-slide-active .slider-text { opacity: 1 }
    /*.section_slider .home-slider .swiper-slide:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(31,31,31,0.5) }*/
    .section_slider .home-slider .swiper-button-next:after, .section_slider .home-slider .swiper-button-prev:after { font-size: 20px; color: #000 }
    .section_slider .swiper-pagination { bottom: 50px; position: absolute }

@media (max-width: 767px) {
    .section_slider .swiper-pagination { bottom: 10px }
}

@keyframes wave-animate {
    0% { transform: scale(0); opacity: 1; transform-origin: center }
    100% { transform: scale(3); opacity: 0; transform-origin: center }
}

.section_about { padding: 50px 0px }
    .section_about .about-image { position: relative; text-align: center }
        .section_about .about-image img { max-width: 100%; border-radius: 5px }
        /*.section_about .about-image:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 7; border-radius: 5px; background-color: rgba(18,18,18,0.5) }*/
        .section_about .about-image .block_video_play { position: absolute; left: 50%; top: 50%; z-index: 8; border-radius: 5px; background-color: var(--mainColor); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transition: all .3s ease-in-out }
            .section_about .about-image .block_video_play .popup-youtube { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center }
                .section_about .about-image .block_video_play .popup-youtube .video-icon { height: 16px; display: flex }
                    .section_about .about-image .block_video_play .popup-youtube .video-icon svg { width: 14px; height: 16px }
            .section_about .about-image .block_video_play:hover { background-color: var(--mainColor2) }
        .section_about .about-image .video-waves .waves { position: absolute; top: 50%; background: transparent; left: 50%; width: 25px; height: 25px; margin-left: -12px; margin-top: -12px; border-radius: 5px; -webkit-backface-visibility: hidden }
            .section_about .about-image .video-waves .waves:before { position: absolute; background: var(--mainColor); margin-left: -12px; margin-top: -12px; width: 50px; height: 50px; content: ""; display: block; border-radius: 5px; -webkit-backface-visibility: hidden; animation: wave-animate 3s infinite ease-out }
            .section_about .about-image .video-waves .waves:after { position: absolute; background: var(--mainColor); margin-left: -12px; margin-top: -12px; width: 50px; height: 50px; content: ""; display: block; border-radius: 5px; -webkit-backface-visibility: hidden; opacity: 0; animation: wave-animate 3s 1.5s infinite ease-out }

@media (max-width: 991px) {
    .section_about .about-image { margin-top: 20px }
}

.section_about .about-content .top-title { color: var(--mainColor2); font-size: 30px; font-weight: 600; display: block; margin-bottom: 10px; text-transform: uppercase }
.section_about .about-content .title { color: var(--textColor); font-size: 38px; font-weight: bold; margin-bottom: 20px }

@media (max-width: 767px) {
    .section_about .about-content .title { font-size: 32px }
}

.section_about .about-content .desc { color: var(--textColor); font-size: 16px; margin-bottom: 15px; line-height: 24px }
.section_about .about-content .single-about { margin-top: 10px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); padding: 15px; border-radius: 10px; }
    .section_about .about-content .single-about .icon { display: block; margin-bottom: 25px }
        .section_about .about-content .single-about .icon img { height: 50px }
    .section_about .about-content .single-about h3 { color: var(--textColor); font-size: 24px; font-weight: bold; margin-bottom: 10px }
    .section_about .about-content .single-about p { color: var(--textColor); font-size: 16px; line-height: 24px; margin-bottom: 20px; text-align: justify; }
    .section_about .about-content .single-about .read-more { font-weight: 500; font-size: 15px; color: var(--textColor) }
        .section_about .about-content .single-about .read-more:hover { color: var(--mainColor) }
            .section_about .about-content .single-about .read-more:hover svg { fill: var(--mainColor) }

@media (max-width: 991px) {
    .section_about .col-right { order: -1 }
}

.section_statistic { padding-bottom: 80px }
    .section_statistic .item { display: flex; align-items: center; gap: 30px }
        .section_statistic .item .icon img { max-height: 60px }
        .section_statistic .item .content .counter-number-wrapper { color: var(--mainColor); font-size: 48px; font-weight: bold; line-height: 1.1em }
        .section_statistic .item .content .static-title { color: var(--textColor); font-size: 14px; font-weight: 600; text-transform: uppercase }

@media (max-width: 991px) {
    .section_statistic .item { margin-bottom: 20px }
}

.section_banner { position: relative; padding: 80px 0px; background-image: url(background_banner-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover }
    .section_banner .banner-content { width: 100%; max-width: 768px; position: relative; margin: 0px auto; text-align: center }
        .section_banner .banner-content h2 { color: #fff; font-size: 38px; font-weight: 500; margin-bottom: 20px }

@media (max-width: 500px) {
    .section_banner .banner-content h2 { font-size: 33px }
        .section_banner .banner-content h2 br { display: none }
}

.section_banner .banner-content .banner-ctas .cta { background-color: var(--mainColor); color: #fff; padding: 15px 35px; border: 0; display: inline-block; font-size: 16px; text-transform: uppercase; font-weight: 600; margin-top: 20px; border-radius: 5px; overflow: hidden; position: relative; z-index: 2 }
    .section_banner .banner-content .banner-ctas .cta:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--mainColor2); z-index: -1; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.8s cubic-bezier(1, 0, 0, 1); -webkit-transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1),-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); vertical-align: top }
    .section_banner .banner-content .banner-ctas .cta:hover { color: #fff }
        .section_banner .banner-content .banner-ctas .cta:hover:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1); transform: scale(1); opacity: 1 }
.section_banner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1F1F1F; opacity: 0.8 }
.section_progress { position: relative; padding: 80px 0px 0px }

@media (max-width: 991px) {
    .section_progress { padding: 60px 0px }
}

.section_progress .block-title { text-align: left }
    .section_progress .block-title .top-title { color: var(--mainColor) }
    .section_progress .block-title h2 { color: #fff }
    .section_progress .block-title p { color: #fff; font-size: 16px; margin-bottom: 15px }
.section_progress:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #007dc2; opacity: 0.8 }
.section_progress .all-skill-bar { margin-bottom: 20px }
    .section_progress .all-skill-bar .progress { vertical-align: baseline; -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; border: 0; background-color: #f8f8f8; margin-bottom: 10px; height: 18px; border-radius: 500px; overflow: hidden }
        .section_progress .all-skill-bar .progress .progress-bar { color: #fff; height: 100%; line-height: 18px; text-align: center; background-color: var(--mainColor); transition: width .6s ease }
    .section_progress .all-skill-bar .progress-title { color: #fff; font-size: 16px; font-weight: bold }
.section_whychoose { padding: 80px 0px }
    .section_whychoose .block-title { text-align: left }
        .section_whychoose .block-title p { color: var(--textColor); font-size: 16px }
    .section_whychoose .whychoose-content .why-box { display: table; width: 100%; position: relative; margin-bottom: 20px }
        .section_whychoose .whychoose-content .why-box .box-icon { display: table-cell; vertical-align: top; width: 50px }
            .section_whychoose .whychoose-content .why-box .box-icon img { width: 50px }
        .section_whychoose .whychoose-content .why-box .box-content { display: table-cell; vertical-align: top; padding-left: 15px }
            .section_whychoose .whychoose-content .why-box .box-content h3 { color: var(--textColor); font-size: 20px; font-weight: bold; margin-bottom: 7px }
            .section_whychoose .whychoose-content .why-box .box-content p { color: var(--textColor); font-size: 16px; text-align: justify; }
    .section_whychoose .whychoose-image { position: relative }
        .section_whychoose .whychoose-image img { max-width: 100% }
.section_team { position: relative; padding: 80px 0px; background-image: url(background_team-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover }
    .section_team .container-fluid { padding: 0px 40px }

@media (max-width: 767px) {
    .section_team .container-fluid { padding: 0px 15px }
}

.section_team .block-content .swiper-slide { padding-bottom: 30px }
.section_team .team-item { position: relative; z-index: 1; transition: 0.3s; padding-bottom: 30px }
    .section_team .team-item .team-image { position: relative }
        .section_team .team-item .team-image .thumb { display: block; position: relative; padding-bottom: 111% }
            .section_team .team-item .team-image .thumb img { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; position: absolute; transition: all .4s ease; border-radius: 10px }
    .section_team .team-item .team-info { padding: 15px; background: #fff; position: absolute; z-index: 1; left: 30px; bottom: 0px; width: calc(100% - 50px); border-radius: 5px; box-shadow: 6px 5px 16px 0px rgba(0,0,0,0.15); transition: 0.5s }
        .section_team .team-item .team-info .name a { color: var(--textColor); font-size: 20px; font-weight: bold }

@media (max-width: 1199px) {
    .section_team .team-item .team-info .name a { font-size: 18px }
}

@media (max-width: 767px) {
    .section_team .team-item .team-info .name a { font-size: 15px }
}

.section_team .team-item .team-info .name a:hover { color: var(--mainColor) }
.section_team .team-item .team-info .department { font-size: 14px; color: #989898; padding-top: 6px; text-transform: uppercase }

@media (max-width: 1199px) {
    .section_team .team-item .team-info .department { font-size: 13px }
}

@media (max-width: 1199px) {
    .section_team .team-item .team-info { left: 15px; padding: 10px; width: calc(100% - 30px) }
}

.section_team .team-item .social { display: flex; flex-direction: column; position: absolute; top: 15px; right: 15px; transition: 0.4s; pointer-events: none }
    .section_team .team-item .social a { width: 35px; height: 35px; border-radius: 50%; text-align: center; pointer-events: auto; margin-bottom: 10px; box-shadow: 6px 5px 16px 0px rgba(0,0,0,0.15); transition-property: all, transform; transition-duration: 0.5s; opacity: 0; transform: translateX(10px); display: flex; align-items: center; justify-content: center; background-color: #fff }
        .section_team .team-item .social a img { width: 15px }
        .section_team .team-item .social a:nth-child(2) { transition-delay: 0s, 0.1s }
        .section_team .team-item .social a:nth-child(3) { transition-delay: 0s, 0.2s }
        .section_team .team-item .social a:nth-child(4) { transition-delay: 0s, 0.3s }
        .section_team .team-item .social a:nth-child(5) { transition-delay: 0s, 0.4s }
        .section_team .team-item .social a:hover { background-color: var(--mainColor) }
            .section_team .team-item .social a:hover img { filter: brightness(0) invert(1) }
.section_team .team-item:hover .team-info { bottom: 60px }

@media (max-width: 1199px) {
    .section_team .team-item:hover .team-info { bottom: 40px }
}

.section_team .team-item:hover .social a { opacity: 1; transform: translate(0); pointer-events: auto; visibility: visible }
.section_view_product { position: relative; padding: 60px 0px; background-image: url(background_view_product-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover }

@media (max-width: 767px) {
    .section_view_product .col-left { text-align: center }
}

.section_view_product .col-left p { margin: 0; color: #fff; font-size: 32px; font-weight: bold }

@media (max-width: 767px) {
    .section_view_product .col-left p { font-size: 28px }
}

.section_view_product .col-right { text-align: right }

@media (max-width: 767px) {
    .section_view_product .col-right { text-align: center; margin-top: 10px }
}

.section_view_product .col-right a { color: var(--mainColor); font-size: 16px; font-weight: 600; padding: 15px 30px; border: 0; display: inline-block; text-transform: uppercase; border-radius: 5px; overflow: hidden; position: relative; z-index: 2; background-color: #fff }
    .section_view_product .col-right a:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--mainColor); z-index: -1; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.8s cubic-bezier(1, 0, 0, 1); -webkit-transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1),-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1); vertical-align: top }
    .section_view_product .col-right a:hover { color: #fff }
        .section_view_product .col-right a:hover:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1); transform: scale(1); opacity: 1 }
.section_view_product:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1F1F1F; opacity: 0.8 }
.section_blog { padding: 80px 0px }
    .section_blog .item-blog { position: relative }
        .section_blog .item-blog .block-thumb { position: relative }
            .section_blog .item-blog .block-thumb .thumb { display: block; position: relative; padding-bottom: 70% }
                .section_blog .item-blog .block-thumb .thumb img { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; position: absolute; transition: all .4s ease }
        .section_blog .item-blog .block-content { padding: 10px 0px }
            .section_blog .item-blog .block-content h3 { margin: 0 0 6px }
                .section_blog .item-blog .block-content h3 a { font-size: 17px; font-weight: bold; color: var(--mainColor2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: initial; overflow: hidden; line-height: 1.4; min-height: 42px; word-wrap: break-word }
                    .section_blog .item-blog .block-content h3 a:hover { color: var(--mainColor) }
            .section_blog .item-blog .block-content .time-post { position: relative; font-size: 14px; font-weight: 600; color: var(--textColor); margin: 0 0 10px }
                .section_blog .item-blog .block-content .time-post .author-post { display: inline-block; vertical-align: middle; margin-right: 5px }
                .section_blog .item-blog .block-content .time-post .date-post { display: inline-block; vertical-align: middle }
                .section_blog .item-blog .block-content .time-post svg { width: 15px; height: 15px; margin-top: -3px; margin-right: 2px; fill: var(--mainColor) }
            .section_blog .item-blog .block-content .article-content { color: #535353; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: initial; overflow: hidden; text-align: justify; }

@media (max-width: 991px) {
    .section_blog .item-blog { margin-bottom: 30px }
}

@media (max-width: 767px) {
    .section_blog { padding: 40px 0px }
}

.swiper-button-next:after, .swiper-button-prev:after { font-size: 16px; font-weight: bold; color: #333 }
.text-white { color: white !important; }

.section_values .desc { font-size: 15px; }

/* Wave Background Utility Classes */
/* Wave Orange - Top */
.wave-orange-top {
    position: relative;
}

.wave-orange-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-orange.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Wave Orange - Bottom */
.wave-orange-bottom {
    position: relative;
}

.wave-orange-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-orange.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Wave White - Top */
.wave-white-top {
    position: relative;
}

.wave-white-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-white.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Wave White - Bottom */
.wave-white-bottom {
    position: relative;
}

.wave-white-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-white.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Wave Blue - Top */
.wave-blue-top {
    position: relative;
}

.wave-blue-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-blue.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Wave Blue - Bottom */
.wave-blue-bottom {
    position: relative;
}

.wave-blue-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url(wave-blue.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

#block2-section, #block4-section {
    position: relative;
    background-color: #42c1c7;
    padding-top: 120px;
    padding-bottom: 120px;
  }
  #block2-section{
    margin-top: 100px;
    padding-top: 0px;
  }
  #block4-section{
    padding-top: 0px;
  }
  
  /* Wave trên */
  
  /* Wave dưới (xoay ngược ảnh) */
  #block2-section::after, #block4-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    background: url("wave-blue.jpg") no-repeat top center;
    background-size: cover;
    transform: scaleY(-1);
  }
  #block9-section{
    padding-bottom: 120px;
  }
  #block9-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* tùy chỉnh độ cao của sóng */
    background: url("wave-blue.png") no-repeat top center;
    background-size: cover;
  }

.section_slider{
    position: relative;
}
/* .section_slider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    background: url("wave-white.png") no-repeat top center;
    background-size: cover;
    animation: waveAnimationTop 10s linear infinite;
} */
#section-form{
    position: relative;
    background-color: #f8ac1b;
    padding-top: 0;
    padding-bottom: 120px;
 }
 #block7-section{
    padding-bottom: 140px;
 }
 #block7-section::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 120px;
     background: url("wave-orange.png") no-repeat top center;
     background-size: cover;
     z-index: 1;
     pointer-events: none;
 }
 #section_orange{
     position: relative;
     background-color: #f8ac1b;
     padding: 150px 0px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     flex-wrap: wrap;
     margin-top: 50px;
 }
 #section_orange .container{
    padding: 0 100px;
}
 
 #section_orange::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 120px;
     background: url("wave-orange.jpg") no-repeat top center;
     background-size: cover;
     z-index: 1;
     pointer-events: none;
     animation: waveAnimationTop 10s linear infinite;
 }
 
 #section_orange::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 120%;
     height: 120px;
     background: url("wave-orange.jpg") no-repeat bottom center;
     background-size: cover;
     transform: scaleY(-1);
     z-index: 1;
     pointer-events: none;
     animation: waveAnimationBottom 12s linear infinite;
 }

 @keyframes waveAnimationTop {
     0% {
         background-position: 0% 50%;
     }
     100% {
         background-position: 100% 50%;
     }
 }

 @keyframes waveAnimationBottom {
     0% {
         background-position: 0% 50%;
         transform: scaleY(-1);
     }
     100% {
         background-position: 100% 50%;
         transform: scaleY(-1);
     }
 }
 
 #section_orange > * {
     position: relative;
     z-index: 2;
 }
 
 /* Nhóm p và h3 bên trái */
 #section_orange p {
     margin: 0 0 10px 0;
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     flex: 0 0 100%;
 }
 
 #section_orange h3 {
     margin: 0;
     color: #fff;
     font-size: 30px;
     font-weight: 700;
     flex: 1;
     min-width: 300px;
     text-transform: uppercase;
 }
 
/* Nút đăng ký bên phải */
#section_orange a {
    display: inline-block;
    padding: 15px 40px;
    background-color: #fff;
    color: #ff8c00;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-end;
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 0.6s ease-out, buttonFloat 3s ease-in-out infinite, buttonGlow 2s ease-in-out infinite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Shine effect overlay - tự động chạy */
#section_orange a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.5s;
    animation: buttonShine 3s ease-in-out infinite;
    z-index: 1;
}

/* Glow effect overlay */
#section_orange a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.3);
    transform: translate(-50%, -50%);
    animation: buttonRipple 2s ease-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* Hover effects */
#section_orange a:hover {
    background-color: #ff8c00;
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 140, 0, 0.4);
    animation: buttonPulse 2s ease-in-out infinite, buttonEntrance 0.6s ease-out;
}

#section_orange a:hover::before {
    animation: buttonShine 1.5s ease-in-out infinite;
}

#section_orange a:hover::after {
    animation: buttonRipple 1.5s ease-out infinite;
}

/* Active effect */
#section_orange a:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3);
}

/* Entrance animation */
@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Float animation - nổi lên xuống nhẹ */
@keyframes buttonFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Glow animation - hiệu ứng phát sáng */
@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(255, 140, 0, 0.4);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 15px 5px rgba(255, 140, 0, 0.3);
    }
}

/* Shine animation - ánh sáng quét qua */
@keyframes buttonShine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Ripple animation - hiệu ứng gợn sóng */
@keyframes buttonRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* Pulse animation on hover */
@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 8px 16px rgba(255, 140, 0, 0.4);
    }
    50% {
        box-shadow: 0 8px 20px rgba(255, 140, 0, 0.6);
    }
}
 
 /* Responsive cho mobile */
 @media (max-width: 767px) {
     #section_orange {
         flex-direction: column;
         align-items: flex-start;
         text-align: left;
         padding: 90px 20px;
     }
     
     #section_orange p {
         flex: 0 0 100%;
         font-size: 16px;
     }
     
     #section_orange h3 {
         flex: 0 0 100%;
         font-size: 16px;
     }
     
     #section_orange a {
         width: 100%;
         text-align: center;
         margin-left: 0;
         align-self: stretch;
         max-width: 200px;
         margin-top: 15px;
     }
 }

 #sectiontest .wave span {
    content: "";
    position: absolute;
    width: 325vh;
    height: 325vh;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: #000;
  }
  #sectiontest .content {
    position: relative;
    z-index: 1;
    font-size: 4em;
    letter-spacing: 2px;
    color: #fff;
  }
  #sectiontest .wave span:nth-child(1) {
    border-radius: 45%;
    background: rgba(20, 20, 20, 1);
    animation: animate 5s linear infinite;
  }
  
  #sectiontest .wave span:nth-child(2) {
    border-radius: 40%;
    background: rgba(20, 20, 20, 0.5);
    animation: animate 10s linear infinite;
  }
  #sectiontest .wave span:nth-child(3) {
    border-radius: 42.5%;
    background: rgba(20, 20, 20, 0.5);
    animation: animate 15s linear infinite;
  }
  @keyframes animate {
    0% {
      transform: translate(-50%, -75%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -75%) rotate(360deg);
    }
  }

  .button-detail{
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    background-color: #fc9c26;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .button-detail.btn-sm{
    padding: 5px 15px;
    font-size: 13px;
  }

  .waves .wave {
    position:absolute;
    top:-99px;
    width: 100%;
    height: 100px;
    background: url('/assets/wave2-blue.png');
    background-size: 1000px 100px;
}
.sliderwaves .wave {
    position:absolute;
    bottom: -1px!important;
    width: 100%;
    height: 100px;
    background: url('/assets/wave2-white.png');
    background-size: 1000px 100px;
}

.wave.wave1{
    z-index:4;
    opacity: 0.9;
    bottom: 10px;
    animation: animate 10s linear infinite;
}
.wave.wave3{
    z-index:3;
    opacity: 0.2;
    bottom: 15px;
    animation: animate 7s linear infinite;
}
 .wave.wave2{
    z-index:2;
    opacity: 0.4;
    bottom: 10px;
    animation: animate2 12s linear infinite;
}
 .wave.wave4{
    z-index:3;
    opacity: 0.6;
    bottom: 20px;
    animation: animate2 9s linear infinite;
}
@keyframes animate {
    0% { background-position: 1000px }
    100% { background-position: 0; }
}
@keyframes animate2 {
    0% { background-position: 0 }
    100% { background-position: 1000px; }
}
footer #wave3{
    opacity: 0.4;
}
footer #wave2{
    opacity: 0.6;
}
footer #wave4{
    opacity: 0.7;
}

.page-about, .blog_wrapper, .layout-contact, .blog-lienquan,.layout-blog{
    padding-bottom: 120px!important;
}
#section-form-page{
    position: relative;
    background-color: #f8ac1b;
    padding-top: 90px;
    padding-bottom: 120px;
}
#section-form-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: url("wave-orange.jpg") no-repeat top center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
    animation: waveAnimationTop 10s linear infinite;
}
@media (max-width: 767px) {
    .sliderwaves .wave, .waves .wave {
        height: 50px;
        background-size: 600px 50px;
    }
    footer .wave, .waves .wave{
        top: -50px;
    }
    #section_orange .container{
        padding: 0;
    }
}
.text-whs{
    color:#42c1c7;
}
#pillar-container{
    padding-top: 20px;
}