:root{
    --color-main: #00A75E;
    --color-font: #262A37;
    --color-border: #E9ECEE;
    --margin-section: 55px
}
@media (max-width: 768px) {
    :root{
        --margin-section: 35px!important
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
a:not(.item):focus,
a:not(.item):focus-visible,
input,
input:focus,
button,
button:focus,
select,
select:focus,
select:focus-visible,
textarea,
textarea:focus,
textarea:focus-visible {
    box-shadow: none !important;
    /* border: none; */
    outline: none;
}

.border-0{
    border: none!important;
}
body,html {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-weight: 400;
}
body{
    font-size: 14px;
    line-height: calc(17 / 14);
    color: var(--color-font);
}
/* Đẩy toàn bộ nội dung xuống dưới header cố định (chiều cao header ~110px kể cả logo) */
main#main{ padding-top: 110px; }
*,
::before,
::after {
    box-sizing: border-box;
}
ul{
    margin: 0;
    list-style: none;
    padding: 0;
}
p {
    margin-bottom: 0;
}

a {
    text-decoration: unset;
    transition: all 0.4s ease 0s;
    display: inline-block;
    color: var(--color-font);
}

a:hover {
    text-decoration: none;
    transition: all 0.4s ease 0s;
}

a:hover * {
    transition: all 0.4s ease 0s;
}

.btn {
    transition: all .4s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    border-radius: 0;
}
.btn.btn-color-main{
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    color: var(--color-font);
    border: none;
}
.btn.btn-color-main:hover{
    /* border-radius: 0 */
    box-shadow: 0px 1px 20px 0px #17B46B;
}
.btn.btn-border-white{
    background-color: transparent;
    border: 1px solid white;
    color: white;
}

.btn.btn-border-white:hover{
    border-color: var(--color-font);
    color: var(--color-font);
}
.box-image{
    overflow: hidden;
    transition: all .4s;
}
.box-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .4s;
}


.bg-pink{
    background-color: #F5EDE7;
}
.link-more{
    color: var(--color-main);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .3s;
}
.color-main{
    color: var(--color-main);
}
.color-main-gradient{
    background: linear-gradient(90deg, #008F51 0%, #47BB71 84.67%);
}
.color-white{
    color: white;
}
.container{
    max-width: 1192px;
    padding-left: 11px;
    padding-right: 11px;
}
.row{
    margin-left: -11px;
    margin-right: -11px;
}
.row [class*=col-]{
    padding-left: 11px;
    padding-right: 11px;
}
.box-image{
    width: 100%;
    display: inline-block;
}
.box-image img{
    width: 100%;
    height: 100%;
}
.line-ell{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.line-2{
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.line-3{
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.line-5{
    -webkit-line-clamp: 5;
    line-clamp: 5;
}
.is-hidden{
    display: none;
}
/* HEADER */
/* HEADER */
/* menu main */
/* menu main */
/* menu main */

header#header{
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: all .3s;
    /* Luôn có nền cố định để menu không trong suốt */
    background-color: white;
    box-shadow: 0px 1px 4px 0px #19213D14;
}
header#header.active{
    /* Giữ lại để không ảnh hưởng logic cũ, nhưng màu nền đã cố định */
    background-color: white;
    box-shadow: 0px 1px 4px 0px #19213D14;
}
header#header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header#header #nav .wrap-menu{
    display: flex;
    align-items: center;
    gap: 30px;
}
header#header #nav .box-action-header.is-mobile{
    display: none;
}
header#header #nav .wrap-menu .item-menu a{
    font-weight: 700;
    /* Mặc định dùng màu chữ tối vì header có nền trắng cố định */
    color: var(--color-font);
}
header#header.active #nav .wrap-menu .item-menu a{
    color: var(--color-font);
}
header#header #nav .wrap-menu .item-menu a:hover{
    color: var(--color-main);
}
header#header .box-action-header{
    display: flex;
    align-items: center;
    gap: 10px;
}
header#header .box-action-header .btn{
    font-size: 14px;
    border-radius: 90px;
    padding: 17px 45px;
    line-height: calc(17 / 14);
    font-weight: 700;
}
header#header .box-action-header .btn-color-main{
    border: none;
}
header#header .box-action-header .btn:hover{
    border-radius: 0;
}
header#header .box-action-header .toggle-menu{
    display: none;
}
/* Nút viền trong header luôn dùng màu chữ/nền tối để nổi bật trên nền trắng */
header#header .box-action-header .btn-border-white{
    border-color: var(--color-font);
    color: var(--color-font);
}
header#header.active .box-action-header .btn-border-white{
    border-color: var(--color-font);
    color: var(--color-font);
}
header#header .box-action-header .btn-border-white:hover{
    border-color: var(--color-main);
    color: var(--color-main);
}
header#header.active .logo img{
    width: auto;
    height: 80px;
}
.box-title-main{
    display: flex;
    gap: 18px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.box-title-main .title{
    font-size: 36px;
    line-height: calc(44 / 36);
    font-weight: 700;
    margin: 0;
    text-align: center;
}
.box-title-main .text{
    text-align: center;
}
#ecosystem{
    padding: var(--margin-section) 0;
}
.box-content-ecosystem{
    display: flex;
    margin-bottom: 24px;
    gap: 12px;
}
.box-content-ecosystem .box-image-main{
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.box-content-ecosystem .box-image-main .box-image{
    margin-bottom: 20px;
}
.box-content-ecosystem .box-image-main .color-main{
    font-weight: 700;
    margin-bottom: 10px;
}
.box-content-ecosystem .box-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.box-content-ecosystem .box-content .item-content-eco{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.box-content-ecosystem .box-content .item-content-eco .icon{
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 30px 0px #0000001A;
}
.box-content-ecosystem .box-content .item-content-eco .icon img{
    width: auto;
    max-width: 25px;
    height: auto;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-1{
    background-color: #FFFCE6;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-2{
    background-color: #EFFCFF;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-3{
    background-color: #EAF0FE;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-4{
    background-color: #D7F8FF;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-5{
    background-color: #FFF8EF;
}
.box-content-ecosystem .box-content .item-content-eco .icon.icon-6{
    background-color: #FFF2F0;
}
.box-content-ecosystem .item-content-eco .list-content{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}
.box-content-ecosystem .item-content-eco .list-content .item{
    font-size: 18px;
    font-weight: 700;
    line-height: calc(22 / 18);
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #FAFAFA;
    margin: 4px 0;
}
.box-action-section{
    text-align: center;
}
.btn-color-main.action-common{
    padding: 10px 15px;
    font-size: 20px;
    line-height: calc(24 / 20);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 90px;
}
.btn-color-main.action-common .text{
    padding: 0 47px;
}
.btn-color-main.action-common .icon{
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0px 2px 4px 0px #00000026;
    border-radius: 100%;
    
}
.btn-color-main.action-common .icon i{
    font-size: 22px;
}

.marque-bank{
    padding: 45.5px 0;
    border-top: 3px solid #FAFAFA
}
.marque-bank .list{
    display: flex;
    align-items: center;
    gap: 80px;
}
.marque-bank .list .item{
    width: auto;
    height: 40px;
}

.marque-bank .list .item-mar img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(1);       /* chuyển đen trắng */           
    transition: all 0.3s ease;  /* hiệu ứng hover mượt */
}

.banner-top-main{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.banner-top-main .bg-banner{
    width: 50%;
    height: auto;
    max-width: 100%;
}
.banner-top-main .bg-banner img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
.banner-top-main .box-content-banner .slider-content-banner-top{
    position: relative;
    width: 100%;
}
.item-box-banner{
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: auto;
    max-height: 703px;
}
.item-box-banner .wrap-container-banner{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.slider-content-banner-top .item .category{
    font-size: 18px;
    line-height: calc(22 / 18);
    text-transform: uppercase;
    color: var(--color-main);
    margin-bottom: 20px;
}
.slider-content-banner-top .item .title-banner{
    font-size: 36px;
    line-height: calc(44 / 36);
    font-weight: 700;
    margin-bottom: 30px;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.slider-content-banner-top .item .box-user{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}
.slider-content-banner-top .item{
    padding-left: 20px;
}
.slider-content-banner-top .item .box-user .list-user{
    display: flex;
    align-items: center;
    color: white;
}
.slider-content-banner-top .item .box-user .content .text{
    color: white;
    line-height: calc(17 / 14);
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.slider-content-banner-top .item .box-user .content .text.color-main{
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 5px;
}
.slider-content-banner-top .item .list-user .box-image{
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 100%;
    border: 2px solid white;
}
.slider-content-banner-top .item .list-user .box-image:not(:first-child){
    margin-left: -15px;
}
.software-about{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: var(--margin-section) 0;
}
.item-software{
    border: 2px solid #424551;
    border-radius: 20px;
    padding: 32px 14px;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 175px;
    height: 100%;
    transition: all .3s;
}
.item-software .box-image{
    width: 65px;
    min-width: 65px;
    height: 65px;
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    border-bottom-left-radius: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-software .box-image.pink{
    background: linear-gradient(90deg, #8780E8 0%, #60C6E5 84.67%);

}
.item-software .box-image img{
    width: 24px;
    height: 24px;
}
.item-software .box-content{
    color: white;
}
.item-software .box-content .title{
    font-size: 20px;
    line-height: calc(24 / 20);
    font-weight: 700;
    margin-bottom: 15px;
}
.item-software .box-content .text{
    line-height: calc(17 / 14);
}

.list-software{
    row-gap: 20px;
    margin-bottom: 30px;
}
.item-software:hover{
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    box-shadow: 0px 1px 20px 0px #17B46B;
    border-color: var(--color-main)
}
.item-software:hover .box-content{
    color: var(--color-font);

}
.item-software:hover .box-image{
    background: white!important;
}
.item-software:hover .box-image svg path{
    fill: var(--color-main);
}

.business-model{
    padding: var(--margin-section) 0;
}
.business-model .list-model{
    display: grid;
  /* 4 cột, mỗi item cố định 196px, khoảng cách tự co */
  grid-template-columns: repeat(4, 196px);
  justify-content: space-between; /* giãn đều khoảng cách */
  row-gap: 20px; /* khoảng cách giữa các hàng */
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 30px;
}
.item-model{
    text-align: center;
    width: 100%;
    max-width: 196px;
}
.item-model .box-image{
    width: 114px;
    height: 114px;
    border-radius: 100%;
    box-shadow: 0px 1px 30px 0px #0000001A;
    margin-bottom: 20px;
    transition: all .3s;
}

.item-model .title{
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 700;
    padding-bottom: 15px;
    transition: all .3s;
}
.item-model:hover .box-image{
    box-shadow: 0px 1px 20px 0px #17B46B;
}
.item-model:hover .title{
    color: var(--color-main);
}

.video-about{
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: var(--margin-section) 0;
}
.video-about .box-video-about{
    display: flex;
    align-items: flex-end;
    padding-right: 15px;
}
.video-about .box-video-about .box-title{
    margin-bottom: 77px;
}
.video-about .box-video-about .box-title .title{
    font-size: 36px;
    color: white;
    line-height: calc(44 / 36);
    font-weight: 700;
    margin-bottom: 20px;
}
.video-about .box-video-about .box-title .text{
    color: white;
}
.video-about .box-video-about .box-icon-app{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.video-about .box-video-about .box-icon-app .item-app{
    padding-inline: 10px;
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
}
.video-about .box-video-about .box-content-video{
    padding-bottom: 10px;
    margin-left: 30px;
}
.video-about .box-video-main{
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.video-about .box-video-main .wrap-iframe{
    border: 10px solid var(--color-main);
    border-radius: 20px;
    width: 100%;
    aspect-ratio: 536 / 371;
    background-color: white;
    overflow: hidden;
    box-shadow: 0px 4px 25px 0px #00000073;
}
.video-about .box-video-main .wrap-iframe iframe{
    width: 100%;
    height: 100%;
    aspect-ratio: 536 / 371;
}

.customer-used{
    padding: var(--margin-section) 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.customer-used .wrap-slider-customer{
    width: 100%;
    max-width: 848px;
    margin: 0 auto;
    position: relative;
}
.customer-used .wrap-slider-customer .slider-customer{
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    position: unset;
}
.customer-used .box-title-main{
    margin-bottom: 0;
}
.slider-customer .item{
    padding: 30px;
}
.slider-customer .item-customer{
    border: 1px solid #F1F3F7;
    box-shadow: 0px 1px 30px 0px #0000001A;
    border-radius: 30px;
    background-color: white;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.slider-customer .item-customer .box-name-customer{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 calc((250 / 572) * 100%);
    max-width: calc((250 / 572) * 100%);
}
.item-customer .box-name-customer .box-image{
    width: 48px;
    min-width: 48px;
    height:48px;
    border-radius: 100%;
}
.item-customer .box-name-customer .content-name .name{
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 700;
    margin-bottom: 10px;
}
.item-customer .box-content{
    flex: 0 0 calc((302 / 572) * 100%);
    max-width: calc((302 / 572) * 100%);
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    border-bottom-right-radius: 90px;
    padding: 30px 50px;
}
.item-customer .box-content .icon-dot{
    margin-bottom: 20px;
    height: 24px;
}
.item-customer .box-content .text-content{
    color: white;
}
.slider-customer .slick-arrow{
    border: 1px solid #E1E4ED;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FBFBFB;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s;
}
.slider-customer .slick-arrow:hover{
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    border-color: var(--color-main);
}
.slider-customer .slick-arrow:hover svg path{
    stroke: white;
}
.slider-customer .slick-prev{
    left: 0;
}
.slider-customer .slick-next{
    right: 0;
}

.customer-used .box-title-main.title-new-section{
    margin-top: 100px;
    margin-bottom: 24px;
}

.nav-tab-new{
    margin-bottom: 24px;
}
.nav-tab-new .nav-tabs{
    border: none;
    justify-content: center;
    gap: 30px;
}
.nav-tab-new .nav-tabs .nav-link{
    background-color: transparent;
    border: none;
    color: var(--color-font);
    min-width: 120px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 3px solid transparent;
}
.nav-tab-new .nav-tabs .nav-link.active{
    border-color: var(--color-main);
    color: var(--color-main);
}
.list-new-right{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.item-new{
    border: 1px solid #E1E4ED;
    box-shadow: 0px 1px 4px 0px #19213D14;
    border-radius: 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: white;
}
.item-new .box-image{
    width: 208px;
    min-width: 208px;
    aspect-ratio: 208 / 180;
}
.item-new .box-content{
    padding: 14px 14px 14px 19px;
    width: 100%;
}
.item-new .box-content .title{
   font-weight: 700;
   margin-bottom: 16px;
   font-size: 14px;
   line-height: calc(17 / 14);
   transition: all .3s;
}
.item-new .box-content .read-more{
    font-size: 16px;
    line-height: 1;
    display: flex;
    gap: 6px;
    color: var(--color-main);
    font-weight: 600;
    transition: all .3s;
}
.item-new .box-content .read-more:hover{
    gap: 10px;
}
.item-new:hover .box-image img{
    transform: scale(1.2);
}

.item-new-main{
    border: 1px solid #E1E4ED;
    box-shadow: 0px 1px 4px 0px #19213D14;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
}
.item-new-main .box-image{
    width: 100%;
    aspect-ratio: 638 / 340;
}
.item-new-main:hover .box-image img{
    transform: scale(1.2);
}
.item-new-main .box-content{
    padding: 20px 32px 32px;
}
.item-new-main .box-content .title{
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 700;
    margin-bottom: 24px;
    transition: all .3s;
}
.item-new-main .box-content .read-more{
    padding-top: 34px;
    margin-top: 24px;
    border-top: 1px solid #E1E4ED;
    display: flex;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    gap: 6px;
    font-weight: 600;
    color: var(--color-main);
}
.tab-content-new-main{
    padding-inline: 31px;
}
@media (min-width: 992px) {
    .item-new.flex-column .box-image{
        width: 100%;
        min-width: auto;
        aspect-ratio: 260 / 217;
    }
    .item-new.flex-column .box-content{
        padding: 24px 16px;
    }
    .item-new.flex-column .box-content .title{
        font-size: 18px;
        line-height: calc(22 / 18);
    }
}
.item-new:hover .box-content .title,
.item-new-main:hover .box-content .title{
    color: var(--color-main);
}
.list-new-main{
    row-gap: 22px;
}
.tab-content-new-main .box-action-section{
    margin-top: 24px;
}
/* footer base style consolidated */
footer#footer{ background-repeat:no-repeat; background-size:cover; }
footer#footer .footer-main{
    padding: var(--margin-section) 0;
    color: white;
}
footer#footer .footer-last{
    padding: 20px;
    border-top: 1px solid #3C3C3C;
    color: white;
    text-align: center;
}
.footer-main .row{
    row-gap: 30px;
}
.footer-main .title-company{
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 700;
    margin-bottom: 20px;
}
.footer-main .address{
    margin-bottom: 10px;
}
.footer-main .list-social{
    display: flex;
    gap: 8px;
}
.footer-main .list-social img{
    width: 24px;
    height: 24px;
    border-radius: 100%;
    transition: all .3s;
}
.footer-main .list-social img:hover{
    transform: scale(1.15);
}
.footer-main .box-footer-left{
    display: flex;
    gap: 30px;
}
.footer-main .box-footer-left .item-last{
    flex: 0 0 calc((229 / 581) * 100%);
    max-width: calc((229 / 581) * 100%);
}
.footer-main a{
    color: white;
}
.footer-main a:hover{
    color: var(--color-main);
}
.footer-main .title-footer{
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 700;
    margin-bottom: 20px;
}
.footer-main .list-menu-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Áp dụng cho màn hình desktop (lg) trở lên, */
@media (min-width: 992px) {
    .list-new-main > .col-lg-7 {
        display: flex; /* Biến cột bên trái thành một flex container */
    }

    .item-new-main {
        width: 100%; /* Đảm bảo thẻ a chiếm toàn bộ chiều rộng của cột */
        height: 100%; /* Kéo dài thẻ a ra bằng chiều cao của cột */
        display: flex; /* Biến thẻ a thành flex container */
        flex-direction: column; /* Sắp xếp ảnh và nội dung bên trong theo chiều dọc */
    }

    .item-new-main .box-content {
        flex-grow: 1; /* Cho phép khối nội dung tự giãn ra để lấp đầy không gian còn lại */
        display: flex; /* áp dụng flex-direction và margin-top: auto bên dưới */
        flex-direction: column;
    }

    .item-new-main .read-more {
        margin-top: auto; /* Đẩy nút "Xem chi tiết" xuống dưới cùng */
    }
}

/* ================= CSS CHO BANNER VIDEO YOUTUBE ================= */

/* 1. Thiết lập banner-top-main làm khung định vị chính */
.banner-top-main {
    position: relative; /* Quan trọng: để các phần tử con định vị theo nó */
    overflow: hidden;   /* Ẩn các phần thừa của video */
}

/* 2. Tách lớp nền (video và overlay) ra khỏi luồng nội dung */
.banner-video-background,
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-video-background {
    z-index: 1; /* Lớp video nằm dưới cùng */
    /* Không chặn tương tác của người dùng */
    pointer-events: none;
}

.banner-overlay {
    z-index: 2; /* Lớp phủ màu tối nằm trên video */
    /* Overlay nhẹ hơn để video sáng hơn vẫn giữ độ tương phản chữ */
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.08) 100%);
    /* Không chặn tương tác của người dùng */
    pointer-events: none;
}

/* 3. Phóng to và căn giữa iframe để che logo YouTube */
.banner-video-background iframe {
    /* Kỹ thuật căn giữa tuyệt đối kinh điển */
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Đảm bảo video luôn phủ đầy khung, bất kể tỷ lệ màn hình */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    
    /* Dịch chuyển tâm của video về tâm của khung và phóng to lên */
    transform: translate(-50%, -50%) scale(1.5);
    
    pointer-events: none; /* Ngăn người dùng tương tác với video */
}

/* 4. Đảm bảo lớp nội dung nằm trên cùng và không bị ảnh hưởng */
.box-content-banner {
    position: relative; /* Giữ vị trí tương đối trong luồng */
    z-index: 3; /* Đảm bảo nằm trên lớp nền và overlay */
}

/* ================= CSS CHO CONTACT WIDGET SECTION ================= */

/* --- CỤM NÚT LIÊN HỆ NỔI (Stack từ dưới lên: Zalo -> Messenger -> Call) --- */
.master-contact-widget {
    position: fixed;
    bottom: 20px; /* Điều chỉnh để tất cả nút có vị trí đồng nhất */
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* --- NÚT CHUNG --- */
.contact-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease-in-out;
}

.contact-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.contact-btn i {
    font-size: 26px;
}

.contact-btn img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* --- TỪNG LOẠI NÚT --- */
.messenger-btn {
    background-color: #0084ff;
}

.call-btn {
    background-color: #16a500;
}

.printer-btn {
    background-color: #e67e22;
}

.signing-btn {
    background-color: #6c5ce7;
}

.zalo-btn {
    background-color: #0068ff;
    display: none; /* Ẩn mặc định */
}

/* --- NỘI DUNG TRONG NÚT GỌI --- */
.call-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.call-btn-content i {
    font-size: 22px;
}

.call-btn-content span {
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
}

/* --- VỊ TRÍ WIDGET ZALO SDK (Ở DƯỚI CÙNG, bên dưới master-contact-widget) --- */
.zalo-chat-widget {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 99998 !important; /* Cao hơn để hiển thị trên cùng */
    pointer-events: auto !important;
    display: none !important; /* Ẩn Zalo SDK widget mặc định */
}

/* Hiển thị nút Zalo custom trên cả mobile và desktop */
.zalo-btn.mobile-only {
    display: flex !important; /* Hiển thị trên tất cả màn hình */
}

/* MOBILE: Ẩn Zalo SDK, hiện nút redirect */
@media (max-width: 768px) {
    .zalo-chat-widget {
        display: none !important;
    }
    
    /* .zalo-btn.mobile-only {
        display: flex !important; /* Hiển thị nút Zalo trên mobile */
    /* } */ */
    
    .master-contact-widget {
        bottom: 20px;
    }
}

/* DESKTOP: Hiện Zalo SDK, ẩn nút redirect */
@media (min-width: 769px) {
    .zalo-chat-widget {
        display: none !important; /* Hiển thị Zalo SDK trên desktop */
    }
    
    /* .zalo-btn.mobile-only {
        display: none !important; /* Ẩn nút Zalo trên desktop */
    /* } */ */
    
    /* Đẩy master-contact-widget lên cao hơn để không bị che bởi Zalo SDK */
    .master-contact-widget {
        bottom: 20px; /* Cao hơn để tránh chồng lấp với Zalo widget bên dưới */
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .master-contact-widget {
        right: 10px;
        bottom: 20px !important; /* Override trên mobile */
        gap: 10px;
    }

    .contact-btn {
        width: 48px;
        height: 48px;
    }

    .contact-btn i {
        font-size: 22px;
    }
    
    .contact-btn img {
        width: 24px;
        height: 24px;
    }
    
    /* Điều chỉnh icon trong nút Call trên mobile */
    .call-btn-content i {
        font-size: 20px;
    }
    
    .call-btn-content span {
        font-size: 11px;
    }
}

/* --- POPUP GỌI LẠI --- */
#myModalCallAuto .modal-dialog {
    max-width: 400px;
    margin: 1.75rem auto;
}

#myModalCallAuto .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: left;
}

#myModalCallAuto .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 12px;
    border-bottom: none;
}

#myModalCallAuto .title-call-1 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

#myModalCallAuto .close {
    opacity: 0.6;
    font-size: 24px;
    border: none;
    background: transparent;
}

#myModalCallAuto .close:hover {
    opacity: 1;
}

#myModalCallAuto .modal-body {
    padding: 0 24px 24px;
}

#myModalCallAuto .desc-call-1 {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
    display: block;
}

#myModalCallAuto .form-group {
    margin-bottom: 16px;
}

#myModalCallAuto .form-control {
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
    width: 100%;
}

#myModalCallAuto .form-control:focus {
    background-color: #fff;
    border-color: #ff416c;
    box-shadow: none;
}

.submit-btn-modal {
    width: 100%;
    background: linear-gradient(to right, #ff4b2b, #ff416c);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 14px;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.2s;
}

.submit-btn-modal:hover {
    opacity: 0.9;
}

.desc-call-footer {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #666;
}

.modal.fade {
    transition: opacity 0.15s linear;
}

.modal.fade:not(.show) {
    opacity: 0;
}

/* --- FIX: Backdrop mặc định không chặn click khi chưa mở modal --- */
#modal-backdrop {
    display: none;           /* Ẩn mặc định để không che trang */
    position: fixed;
    inset: 0;
    opacity: 0;              /* Trong suốt khi chưa mở */
    pointer-events: none;    /* Không bắt sự kiện chuột */
    background: #000;        /* Màu nền khi mở */
}
#modal-backdrop.show {
    display: block;          /* Hiện khi mở modal */
    opacity: .5;             /* Độ mờ backdrop */
    pointer-events: auto;    /* Cho phép chặn click nền */
}

/* Giữ hiệu ứng fade nếu dùng class .fade */
.modal-backdrop.fade {
    transition: opacity 0.15s linear;
}
.modal-backdrop.fade:not(.show) {
    opacity: 0;
}

/* CSS cho ảnh nền tạm thời trong lúc chờ video */
#youtube-video-placeholder {
    /* Đặt ảnh nền chất lượng cao của video của bạn ở đây */
    background-image: url('https://i.ytimg.com/vi/kC2Ptm2TBoE/maxresdefault.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5); /* Giữ nguyên hiệu ứng phóng to */
}

/* --- POPUP ĐĂNG KÝ  --- */
#trialRegistrationModal {
    z-index: 1055;
}

#trialRegistrationModal .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

#trialRegistrationModal .trial-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: #fff;
    overflow: hidden;
}

#trialRegistrationModal .trial-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 20px;
    border-bottom: none;
    background: #fff;
}

#trialRegistrationModal .trial-modal-logo {
    text-align: center;
    flex: 1;
}

#trialRegistrationModal .trial-logo-image {
    max-width: 120px;
    height: auto;
    margin: 0 auto 8px;
    display: block;
}

#trialRegistrationModal .trial-logo-tagline {
    font-size: 14px;
    color: var(--color-font);
    font-weight: 400;
}

#trialRegistrationModal .trial-modal-header .close {
    opacity: 0.6;
    font-size: 28px;
    border: none;
    background: transparent;
    color: #000;
    padding: 0;
    margin: 0;
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 20px;
}

#trialRegistrationModal .trial-modal-header .close:hover {
    opacity: 1;
}

#trialRegistrationModal .trial-modal-body {
    padding: 0 30px 30px;
    text-align: center;
}

#trialRegistrationModal .trial-modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
    line-height: 1.2;
}

#trialRegistrationModal .trial-modal-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

#trialRegistrationModal .trial-form-group {
    margin-bottom: 20px;
    position: relative;
}

#trialRegistrationModal .trial-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    z-index: 1;
}

#trialRegistrationModal .trial-form-control {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    height: 52px;
    padding: 0 16px;
    padding-left: 45px;
    font-size: 16px;
    width: 100%;
    transition: all 0.3s;
}

#trialRegistrationModal .trial-form-control:focus {
    background-color: #fff;
    border-color: var(--color-main);
    box-shadow: 0 0 0 3px rgba(0, 167, 94, 0.1);
    outline: none;
}

#trialRegistrationModal select.trial-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

#trialRegistrationModal .trial-submit-btn {
    width: 100%;
    background: linear-gradient(90deg, #00A75E 0%, #6FE69A 84.67%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
}

#trialRegistrationModal .trial-submit-btn:hover {
    box-shadow: 0px 1px 20px 0px #17B46B;
    transform: translateY(-1px);
}

#trialRegistrationModal .trial-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

#trialRegistrationModal .trial-modal-footer {
    margin-top: 20px;
}

#trialRegistrationModal .trial-login-link {
    font-size: 14px;
    color: #666;
    margin: 0;
}

#trialRegistrationModal .trial-login-link a {
    color: var(--color-main);
    font-weight: 500;
    text-decoration: none;
}

#trialRegistrationModal .trial-login-link a:hover {
    text-decoration: underline;
}

/* Backdrop for Trial Modal */
#trial-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: #000;
    z-index: 1050;
}

#trial-modal-backdrop.show {
    display: block;
    opacity: .5;
    pointer-events: auto;
}

/* 1. Mặc định trên PC (Desktop): ẨN nút Dùng thử */
header#header .box-action-header .btn-trial-desktop {
    display: none !important;
}

/* 2. Trên Mobile (màn hình nhỏ hơn 992px): HIỆN nút Dùng thử */
@media (max-width: 991px) {
    
    /* Đảm bảo khung chứa các nút nằm ngang */
    header#header .box-action-header {
        display: flex;
        align-items: center;
    }

    /* HIỆN nút Dùng thử & căn chỉnh */
    header#header .box-action-header .btn-trial-desktop {
        display: inline-flex !important; /* Bắt buộc hiện */
        margin-right: 10px;              /* Cách nút menu ra một chút */
        padding: 8px 20px;               /* Chỉnh lại độ lớn nút cho đẹp trên mobile */
        font-size: 13px;                 /* Chữ nhỏ lại xíu cho gọn */
        height: auto;                    /* Reset chiều cao nếu bị cố định */
    }

    /* ẨN các nút khác (Đăng ký, Đăng nhập) để chừa chỗ cho nút Dùng thử */
    /* Chỉ giữ lại nút Dùng thử và nút Toggle Menu (button) */
    /* header#header .box-action-header > a:not(.btn-trial-desktop) {
        display: none !important;
    } */
}