.py-50 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.py-100 {
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.color-text-secondary {
    color: var(--color-text-secondary);
}
.fw-600 {
    font-weight: 600;
}

.split-section.split-about-us .description {
    text-align: justify;
}

/*--------------------------------------------------------------------------
|  Header
--------------------------------------------------------------------------*/

header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    background-color: var(--white);
    border-bottom: 1px solid #f5f5f7;
    animation: headerFadeDown .5s ease;
}
@keyframes headerFadeDown{
    from{
        opacity: 0;
        transform: translateY(-100%);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.header-top .container > .row > div:last-child,
.header-top .row.no-gutters > div:last-child {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 2.5rem;
}
.section-language {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}
.section-language:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 4.4rem;
    width: 1px;
    height: 3rem;
    background-color: var(--light);
}
.section-language a {
    background-color: #F5F5F7;
    border-radius: 5px;
    display: inline-block;
    padding: 2px;
}
.section-language a.active {
    padding: 6px;
}
.section-language img {
    border-radius: 4px;
}

.eoffice {
    background-color: #CE171F;
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}
.eoffice:hover {
    color: #fff;
}

.box-search {
    border: 1px solid #1E232D;
    border-radius: 8px;
    overflow: hidden;
}
.box-search .btn-submit {
    background: transparent;
    padding: 0.65rem 1rem;
    border: 0;
}

.is-mobile .btn-search {
    display: block !important;
    text-align: right;
}
.is-mobile .box-search {
    position: absolute;
    top: 100%;
    right: 15px;
    width: calc(100% - 30px);
    padding: 10px 15px;
    background-color: var(--white);
    z-index: 10;
    border: 0;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
    opacity: 0;
    transition: .3s;
 }
 .is-mobile .box-search.show {
    opacity: 1;
 } 
 .is-mobile .box-search.show .wrap-suggestion {
     position: unset;
 }
 .is-mobile .box-search.show .wrap-suggestion .row > div:first-child {
    flex: 0 0 10%;
    max-width: 10%;
 }
 .is-mobile .box-search.show .wrap-suggestion .row > div:last-child {
    flex: 0 0 90%;
    max-width: 90%;
 }

/*--------------------------------------------------------------------------
|  Main
--------------------------------------------------------------------------*/

.banner-home .content-highlight {
    position: absolute;
    overflow: hidden;
    bottom: 20px;
    right: calc((100% - var(--width-container)) / 2);
    padding: 25px 30px;
    color: var(--white);
    width: 40%;
    border-radius: 15px;
    z-index: 1;
    background: linear-gradient(90deg, rgba(229, 45, 39, 0.6) -7.75%, rgba(163, 9, 13, 0.6) 95.71%);
}

.banner-home .content-highlight .text-top {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
    transform: translateX(-150px);
    opacity: 0;
    padding-bottom: 10px;
    transition: all 1s ease;
}
.banner-home .content-highlight .text-main {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    transform: translateX(150px);
    opacity: 0;
    transition: all 1s ease;
    line-height: 1.2;
}

.banner-home .content-highlight.active .title > * {
    transform: translateX(0);
    opacity: 1;
}

.is-mobile .banner-home .content-highlight {
    left: 15px;
    right: 15px;
    width: calc(100% - 30px);
}
.is-mobile .banner-home .content-highlight .text-top {
    font-size: 20px;
}
.is-mobile .banner-home .content-highlight .text-main {
    font-size: 25px;
    margin-bottom: 10px;
}

.ratio-category {
    padding-top: 30%;
}

.title-category {
    position: absolute;
    top: 5%;
    left: calc((100% - 1170px) / 2);
    right: calc((100% - 1170px) / 2);
    color: white;
    font-size: clamp(2rem, 3vw + 1rem, 5rem);
    text-transform: uppercase;
    font-weight: 600;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
}

.breadcrumbs-article {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 0;
}

.name-page {
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 600;
}

.item-2-art .inner-content {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    background: transparent;
    background: -moz-linear-gradient(top, transparent 0%, #000000 100%);
    background: -webkit-linear-gradient(top, transparent 0%, #000000 100%);
    background: linear-gradient(to bottom, transparent 0%, #000000 100%);
    padding: 3rem;
}

.ratio-item-3-art {
    padding-top: 44.44%;
}

.article-only-title {
    padding: 0;
    list-style: none;
    margin: 0;
}

.article-only-title li.article-title {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ECECEC;
}

.article-only-title li.article-title:last-child {
    border: 0;
}

li.article-title a {
    color: black;
}

li.article-title a:hover {
    color: var(--color-highlight);
}

.recruitment table {
    width: 100%;
}

.recruitment tr:first-child {
    background-color: #0192c9;
    background-image: -webkit-linear-gradient(#0192c9, #0188bb);
    background-image: -o-linear-gradient(#0192c9, #0188bb);
    background-image: linear-gradient(#0192c9, #0188bb);
}

.recruitment th {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 10px;
    border-right: 1px solid #fff;
    text-align: center;
}

.recruitment tr td {
    padding: 8px 0;
    font-weight: bold;
    font-size: 16px;
}

.recruitment tr:nth-child(n+2) {
    border-bottom: 1px solid #ddd;
}

.recruitment-title {
    color: black;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recruitment-title i {
    font-size: 5rem;
    color: var(--color-highlight);
}

.item-attr {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #cccc;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1.6rem;
}

.item-attr i {
    font-size: 4rem;
    width: 5rem;
    text-align: center;
}

.item-attr:last-child {
    margin: 0;
    padding: 0;
    border: 0;
}



/*css main thai tran*/
.title-section {
    font-family: 'Work Sans';
}
.banner .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: var(--width-container);
    /*max-width: 1200px;*/
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    padding: 15px;
}
.banner .title {
    font-weight: 700;
    font-size: 96px;
    line-height: 112.99999999999999%;
    letter-spacing: -5%;
    vertical-align: middle;
    text-transform: uppercase;
    font-family: 'Work Sans';
}
.banner .text-red{
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -3%;
    color: #FF353E;
}
.banner .description {
    max-width: 1035px;
}
.banner .btn-action {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 1.5rem;
}
.banner .btn-action a {
    display: flex;
    align-items: center;
    min-width: 220px;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    padding: 1.25rem 3rem;
    transition: .3s;
    border: 1px solid var(--white);
    font-size: 1.6rem;
}
.banner .btn-action a:hover {
    box-shadow: 0 2px 5px var(--red);
}

.btn.btn-contact {
    background-color: var(--white);
    color: #820E14;
    font-weight: 600;
    padding: 1.25rem 3rem;
    border-radius: 8px;
    font-size: 1.6rem;
    transition: .3s;
}
.btn.btn-contact:hover {
    background-color: var(--red);
    color: var(--white);
    border: 1px solid var(--white);
    box-shadow: 0 2px 5px var(--red);
}
.btn.btn-view-more {
    border: 1px solid var(--white);
    color: var(--white);
}
.btn.btn-view-more:hover {
    color: var(--black);
    background-color: var(--white);
}

.banner .certificate {
    border-radius: 8px;
    background-color: #CE171F;
    padding: 2.6rem;
    color: #fff;
    float: right;
    max-width: 310px;
}
.title-certificate {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 18px;
}

.is-mobile .banner {
    position: relative;
    overflow: hidden;
    padding: 5rem 15px;
}
.is-mobile .banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    max-width: max-content;
    background-size: cover;
    z-index: 1;
}
.is-mobile .banner .content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 15px;
    top: unset;
    left: unset;
    transform: none;
}
.is-mobile .banner .title {
    font-size: 4rem;
}
.is-mobile .banner .title .text-red {
    font-size: 3.5rem;
}
.is-mobile .banner .certificate {
    max-width: 100%; 
    margin-top: 20px;
}



.fs-14 {
    font-size: 14px;
}

/*block tin tuc trang chu*/
.swiper-center .swiper-wrapper {
    align-items: center;
}
.swiper-center .swiper-slide {
    height: 420px;
    transition: all .5s ease;
    opacity: 0.5;
    transform: scaleX(1.1);
    border-radius: 15px;
    overflow: hidden;
}
.swiper-center .swiper-slide.swiper-slide-next, 
.swiper-center .swiper-slide.swiper-slide-prev {
    height: 530px;
    opacity: 1;
    transform: scaleX(0.9);
}
.swiper-center .swiper-slide.swiper-slide-active {
    height: 654px;
    opacity: 1;
    transform: scaleX(1.1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}

.swiper-center .swiper-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 15px;
    height: 100%;
}
.swiper-center .swiper-slide .inner-content {
    border-radius: 0px 20px 0px 15px;
    width: 90%;
    padding: 30px 20px;
    opacity: 0;
    pointer-events: none;
    transition: all .5s ease;
    bottom: 0;
    position: absolute;
    left: 0;
    z-index: 0;
}
.swiper-center .swiper-slide.swiper-slide-active .inner-content {
    opacity: 1;
    pointer-events: auto;
}
.swiper-center .swiper-slide .inner-content::before {
    width: 0;
    content: '';
    position: absolute;
    left: 4px;
    bottom: 0;
    transition: all .5s ease;
    border-radius: 0px 0px 0px 15px;
    height: 10px;
    z-index: 11;
    background: linear-gradient(269deg, #E52D27 1.25%, #A3090D 97.54%);
}
.swiper-center .swiper-slide .inner-content:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0px 20px 0px 15px;
    opacity: 0.8;
    background: linear-gradient(269deg, #E52D27 1.25%, #A3090D 97.54%);
}
.swiper-center .swiper-slide.swiper-slide-active .inner-content::before {
    width: calc(100% - 4px);
}
.swiper-center .swiper-slide .inner-content .article-title {
    -webkit-line-clamp: 5;
    color: var(--white);
}
.swiper-center .swiper-slide .inner-content .article-title a {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
}
.swiper-center .swiper-slide .inner-content .post-date {
    display: flex;
    align-items: center;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
.swiper-center .see-more {
    height: 40px;
    display: flex;
    align-items: center;
    width: max-content;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 70px;
    padding: 0 16px;
    background: #fff;
    border-radius: 24.8px;
    border: 1px solid #B50007;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.swiper-center .swiper-slide .inner-content .see-more {
    position: absolute;
    bottom: 30px;
    right: -48px;
}

.swiper-slider-main .swiper-pagination .swiper-pagination-bullet,
.swiper-center .swiper-pagination .swiper-pagination-bullet{
    width: 14px !important;
    height: 14px !important;
    background:  #FFF !important;
    margin: 0 13px !important;
    position: relative;
    opacity: 1 !important;
    border: 1px solid #E3E4E6;
}
.swiper-slider-main .swiper-pagination .swiper-pagination-bullet:after ,
.swiper-center .swiper-pagination .swiper-pagination-bullet:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 0;
    height: 0;
    border-radius: 50%;
    border: #fff solid 1px;
    transition: all .5s ease;
}

.swiper-slider-main .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-center .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #ED1B24 !important;
    border: none;
}
.swiper-slider-main .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after ,
.swiper-center .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    border: #ED1B24 solid 1px;
}
@media (min-width: 1441px) and (max-width: 1600px) {
    .company-name {
        font-size: 22px !important;
    }
}
@media (min-width: 1280px) and (max-width: 1440px) {
    .company-name {
        font-size: 20px !important;
    }
}
@media (max-width: 1440px) {
    .business-field .info {
        padding: 40px 0 40px 40px !important;
    }
}
@media (max-width: 1366px) {
    .banner-home .content-highlight .text-main {
        font-size: 35px;
    }
    .business-field .info {
        padding: 20px 0 20px 20px !important;
    }
    .business-field .num {
        font-size: 200px !important;
    }
    .business-field .title {
        font-size: 40px !important;
        line-height: 50px !important;
    }
    
    .section-statistics .list-statistics {
        width: 75% !important;
    }
}
@media (max-width: 1280px) {
    .business-field .desc {
        font-size: 14px;
        line-height: 22px;
        padding: 20px 20px 30px 20px !important;
    }
    .business-field .item .left .num{
        font-size: 120px !important;
        margin-right: 20px !important;
    }
    .business-field .item .left .title{
        font-size: 25px !important;
        line-height: 30px !important;
        margin-bottom: 10px !important;
    }
    
    .swiper-center .swiper-slide .inner-content {
        padding: 15px;
    }
    .swiper-center .swiper-slide .inner-content .article-title a {
        font-size: 14px;
        line-height: 22px;
        padding: 0;
    }
    .swiper-center .swiper-slide .inner-content .post-date {
        font-size: 14px;
    }
    .swiper-center .btn-view-more {
        padding: 5px 10px !important;
        font-size: 13px !important;
    }
    .swiper-center .swiper-pagination .swiper-pagination-bullet{
        margin: 0 6px !important;
        width: 10px !important;
        height: 10px !important;
    }
    .swiper-center .swiper-slide.swiper-slide-active {
        height: 370px;
    }
    .swiper-center .swiper-slide.swiper-slide-next, 
    .swiper-center .swiper-slide.swiper-slide-prev {
        height: 300px;
    }
    .swiper-center .swiper-slide {
        height: 220px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .company-name {
        font-size: 16px !important;
    }
}

@media (max-width: 1200px) {
    .section-statistics .content {
        left: 40px !important;
        width: 40% !important;
    }
}
@media (max-width: 768px) {
    .business-field .item .left .info {
        padding: 20px !important;
    }
    .business-field .desc {
        padding: 20px 17px !important;
    }
    .business-field .item .btn-see-more {
        height: 35px !important;
    }
    .business-field .ratio-8-5 {
        padding-top: 100%;
    }
}
@media (max-width: 576px) {
    .swiper-center .swiper-slide.swiper-slide-next, 
    .swiper-center .swiper-slide.swiper-slide-prev {
        height: 250px;
    }
    
    .business-field .item {
        flex-direction: column !important;
    }
    .business-field .item > div {
        width: 100% !important;
    }
    .business-field .btn-next-prev > div {
        width: 35px !important;
        height: 35px !important;
    }
    .business-field .btn-next-prev > div i{
        font-size: 2rem;
    }
    .business-field .ratio-8-5 {
        padding-top: 62.5% !important;
    }
}
/*block tin tuc trang chu*/



/*block welcome trang chu*/
/* Container bọc ngoài cùng có border đỏ bao quanh giống ảnh mẫu */
.viettronics-banner-container {
    display: flex;
    width: 100%;
    min-height: 450px;
}

.is-mobile .viettronics-banner-container {
    padding-top: 30px;
}

/* Base style cho cả 2 khối */
.banner-block {
    flex: 1;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 50%;
}

/* Khối bên trái: Nền trắng */
.block-left {
    background-color: #ffffff;
    display: block; /* Đẩy nội dung sát về phía giữa */
}

.left-content-wrapper {
    padding-right: 40px;
    padding-left: calc(100% - var(--width-container) / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Khối chứa Tiêu đề + Logo bên trái */
.brand-identity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 25px;
}
.brand-identity .info img {
    height: 47px;
}

.brand-title {
    color: #1a2a40; /* Màu chữ xanh đen đậm của chữ 'Tổng công ty...' */
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-top: 1.5rem;
    font-family: 'Work Sans';
}

.brand-logo-wrapper {
    width: 120px;
    height: auto;
}

.brand-logo-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    opacity: .5;
}

/* Khối bên phải: Nền đỏ mận */
.block-left {
    padding-left: 15px;
}
.block-left .banner-desc {
    /* float: right; */
}
.block-right {
    justify-content: flex-start; /* Đẩy nội dung sát về phía giữa */
}

.right-content-wrapper.no-image {
    background-color: #7b0d11; /* Màu đỏ mận (Maroon) đặc trưng */
    padding-left: 40px;
    padding-right: calc(100% - var(--width-container) / 2);
}

.right-content-wrapper.no-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome-title {
    color: #ffffff;
    font-size: 10.8rem;
    font-weight: 900;
    line-height: 1;
    height: 120px;
    letter-spacing: -3%;
    margin-bottom: 25px;
}




/*block loai 2 cho linh vuc hoat dong*/
.business-field .item {
    display: flex;
    margin-bottom: 30px;
}
.business-field .item:nth-child(2n) {
    flex-direction: row-reverse;
}
.business-field .item > div{
    width: 50%;
}
.business-field .item .left .info {
    display: flex;
    align-items: center;
    background: linear-gradient(269deg, #E52D27 1.25%, #A3090D 97.54%);
    padding: 56px 95px;
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
}
.business-field .item .left .num {
    text-align: center;
    /*font-size: 250px;*/
    font-size: 20rem;
    line-height: 1;
    margin-right: 30px;
}
.business-field .item .left .title {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 20px;
    font-weight: 600;
}
/*.business-field .item .left ul {*/
/*    display: none;*/
/*}*/
.business-field .item .btn-see-more {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: 20px;
    background-color: var(--white);
    color: var(--color-highlight);
    height: 40px;
    padding: 0 15px;
    font-weight: 600;
    text-transform: none;
    border: 0;
    overflow: hidden;
    position: relative;
}
.business-field .item .btn-see-more i {
    font-size: 2rem;
}
.business-field .item .btn-see-more:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -1;
}
.business-field .item .btn-see-more:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(269deg, #E52D27 1.25%, #A3090D 97.54%);
    transition: all .5s ease;
}
.business-field .item .btn-see-more:hover:after {
    width: 100%;
}

.business-field .desc {
    padding: 40px 30px;
    font-weight: 500;
    text-align: justify;
}
.business-field .desc ul {
    padding-left: 0;
}
.business-field .desc ul li{
    list-style: none;
    margin-bottom: 5px;
}
.business-field .desc ul li img {
    margin-right: 5px;
}

.business-field .btn-next-prev {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 2rem;
    margin: 20px 0;
}
.business-field .btn-next-prev > div {
    position: unset;
    transform: none;
    width: 50px;
    height: 50px;
    border: 1px solid  #E2E2E2;
    border-radius: 50%;
    opacity: 1;
    display: inline-flex;
}
.business-field .btn-next-prev > div i {
    color: var(--color-highlight);
}


/*end block loai 2 cho linh vuc hoat dong*/







/* Định dạng chung cho đoạn văn mô tả */
.banner-desc {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    text-align: justify;
}

.brand-identity .banner-desc {
    float: right;
}

/* Thừa hưởng cho đoạn văn bản màu trắng bên khối đỏ */
.desc-white {
    color: #e0e0e0;
}

.is-mobile .banner-block {
    justify-content: center !important;
    width: 100%;
    padding: 0 15px;
}
.is-mobile .banner-desc {
    margin: auto;
    text-align: justify;
    
}

/* Responsive tối giản cho Mobile nếu cần */
@media (max-width: 768px) {
    .viettronics-banner-container {
        flex-direction: column;
    }
    .left-content-wrapper, .right-content-wrapper {
        max-width: 100%;
        padding: 0;
    }
    .right-content-wrapper {
        text-align: center;
    }
    .brand-identity {
        justify-content: center;
    }
    .welcome-title {
        font-size: 50px;
        height: auto;
    }
    
    .checkerboard-grid-container,
    .grid-feature-container {
        gap: 15px !important;
    }
    .grid-cell,
    .grid-item {
        border-radius: 5px;
    }
}
@media (max-width: 576px) {
    .banner-block.block-right {
        padding: 0;
    }
    .banner-block .no-image,
    .banner-block {
        padding: 30px 15px;
    }
    .brand-title {
        font-size: 2rem;
    }
    .brand-logo-wrapper {
        width: 70px;
    }
    .left-content-wrapper .info img {
        height: 25px;
    }
}
/*end block welcome trang chu*/

/*block linh vuc kinh doanh - trang chu*/
/* Container chính dùng CSS Grid */
.grid-feature-container {
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.5fr; /* Cột lớn chiếm 50%, 2 cột nhỏ mỗi cột 25% */
    grid-template-rows: repeat(2, 360px); /* Gồm 2 hàng, mỗi hàng cao 300px */
    gap: 3px;
    width: 100%;
}

/* Base style cho tất cả các ô */
.grid-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #111; /* Nền tối khi chưa có ảnh */
    background-size: cover;
    background-position: center;
    transition: background-image 0.4s ease;
}

/* ĐỊNH VỊ CÁC Ô THEO THIẾT KẾ GRID */
/* Ô 0: Chiếm toàn bộ 2 hàng của cột đầu tiên */
.grid-item-0 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    border-radius: 10px 0 0 10px;
}
.grid-item-2 {
    border-radius: 0 10px 0 0;
}
.grid-item-4 {
    border-radius: 0 0 10px 0 ;
}

.grid-item-1 { grid-column: 2 / 3; grid-row: 1 / 2; }
.grid-item-2 { grid-column: 3 / 4; grid-row: 1 / 2; }
.grid-item-3 { grid-column: 2 / 3; grid-row: 2 / 3; }
.grid-item-4 { grid-column: 3 / 4; grid-row: 2 / 3; }

/* HOVER LOGIC: CHƯA HOVER THÌ CHƯA CÓ BACKGROUND ẢNH (Ngoại trừ ô 0) */
.grid-item:not(.grid-item-0):hover {
    background-image: var(--bg-image);
}

/* Cấu trúc lớp phủ màu đỏ mận */
.item-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
    z-index: 1;
    transition: 0.3s ease;
}

/* Ô số 1 mặc định theo ảnh đang ở trạng thái Hover (Hiện nền đỏ sẵn) */
.grid-item-1 {
    background-image: var(--bg-image);
}

/* Khi hover vào bất kỳ ô nào: chuyển sang nền đỏ mận */
.grid-item:hover .item-overlay {
    background-image: linear-gradient(0deg, var(--red), transparent);
}

/* Khối nội dung chữ nằm trên Overlay */
.item-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.text-group {
    max-width: 80%;
}

.item-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Xử lý phần mô tả (Description) */
.item-desc {
    color: #fff;
    font-weight: 500;
    line-height: 1.5;
    margin: 10px 0 0 0;
    display: none; /* Mặc định ẩn mô tả */
}

.grid-item:hover .overlay {
    /*opacity: 0;*/
}
.grid-item:hover:before {
    
}
.grid-item:hover .text-group {
    animation: fadeIn 0.3s ease forwards;
}

/* Ô 0 luôn hiện mô tả, ô 1 hiển thị sẵn mô tả theo ảnh mẫu */
.grid-item-0 .item-desc.default-visible {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Khi hover vào các ô khác, nếu có mô tả thì mượt mà hiện lên */
.grid-item:hover .item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Style cho các nút icon mũi tên */
.action-btn {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Loại nút trắng (Dành cho ô 0 và ô 1) */
.btn-white {
    background-color: #ffffff;
    color: #8b1418;
}

/* Loại nút tối (Dành cho các ô còn lại khi chưa hover) */
.btn-dark {
    background-color: rgba(26, 38, 57, 0.7);
    color: #ffffff;
}

/* Khi hover vào các ô có nút tối -> nút tự động biến thành màu trắng */
.grid-item:hover .action-btn {
    background-color: #ffffff;
    color: #8b1418;
}

/* Animation bổ trợ hiện chữ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive cho màn hình máy tính bảng và mobile */
@media (max-width: 992px) {
    .grid-feature-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-item.grid-item-0 {
        grid-column: unset;
        grid-row: unset;
        height: 350px;
        grid-row: span 2 !important;
        grid-column: 1 / -1 !important;
    }
    .grid-item {
        grid-column: unset !important;
        grid-row: unset !important;
        height: 350px;
    }
}
@media (max-width: 767px) {
    .grid-feature-container {
        grid-template-columns: 1fr;
    }
}
/*end block linh vuc kinh doanh - trang chu*/

/*block so lieu trang chu*/
.section-statistics {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;
}

.section-statistics .content {
    position: absolute;
    top: 50%;
    left: calc((100% - var(--width-container)) / 2);
    /*left: calc((100% - 1200px) / 2);*/
    transform: translateY(-50%);
    width: 25%;
}

.section-statistics .content .title{
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    font-family: 'Work Sans';
    line-height: 1.2;
}
.section-statistics .content .btn.btn-contact{
    padding: 10px 30px;
    color: var(--white);
    background-color: var(--red);
    transition: .3s;
    font-weight: 600;
    border-radius: 8px;
}
.section-statistics .content .btn.btn-contact:hover{
    background-color: var(--red-bold);
}

.section-statistics .list-statistics {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    display: flex;
}

/* Style chữ số */
.list-statistics .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 15px 20px;
    text-align: center;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    transition: .3s;
}

.list-statistics .stat-value {
    font-size: 56px; /* Chữ số to đậm, sắc nét */
    font-weight: 700;
    color: #1e252d; 
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -1px;
    transition: .3s;
    display: flex;
}

/* Style chữ mô tả phía dưới số */
.list-statistics .stat-label {
    font-size: 18px;
    font-weight: 700;
    color: #6d7a88; /* Màu chữ xám xanh đặc trưng của ảnh */
    letter-spacing: 0.5px;
    line-height: 1.4;
    transition: .3s;
}

/* Ô ĐẶC BIỆT: Nền đỏ nổi bật (Dự án đã triển khai) */
.list-statistics .stat-item:hover,
.list-statistics .stat-item.stat-item-highlight {
    background-color: #cb1c24; /* Màu đỏ trùng màu nút bấm */
    border-right: none;
    transition: .3s;
    border-right: 1px solid var(--red);
}

.stat-item:hover .stat-value ,
.stat-item.stat-item-highlight .stat-value {
    color: transparent; /* Giúp ruột chữ rỗng */
    -webkit-text-stroke: 2px #ffffff; /* Tạo đường viền trắng chạy quanh chữ */
    font-weight: 800;
}

.stat-item:hover .stat-label ,
.stat-item.stat-item-highlight .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.is-mobile .section-statistics {
    padding: 5rem 0;
}
.is-mobile .section-statistics > img {
    max-width: 200%;
    transform: translateX(-50%);
}
.is-mobile .section-statistics .content {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    width: 100% !important;
    left: 0 !important;
    padding: 0 20px;
    margin-bottom: 3rem;
}
.is-mobile .section-statistics .list-statistics {
    position: relative;
    width: 100% !important;
    flex-wrap: wrap;
}
.is-mobile .list-statistics .stat-value {
    font-size: 3.5rem;
}
.is-mobile .list-statistics .stat-label {
    font-size: 16px;
}

.is-mobile .py-100 {
    padding-top: 5rem; 
    padding-bottom: 5rem;
}

/* Xử lý hiển thị responsive mượt mà trên Mobile */
@media (max-width: 991px) {
    .hero-overlay-fade {
        background: rgba(255, 255, 255, 0.9); /* Trên mobile phủ trắng hoàn toàn để đọc chữ */
    }
}
@media (max-width: 576px) {
    .list-statistics .stat-item {
        width: 50%;
        flex: auto;
        height: auto;
        border: 0;
    }
}
/*end block so lieu trang chu*/


/*block giai phap trang chu*/
.solution-section .list-group-item {
    border: 0;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: .3s;
    position: relative;
    margin-bottom: 15px;
    background-color: transparent;
    padding: 0;
}
.solution-section .list-group-item:before {
    background-color: transparent;
}
.solution-section .list-group-item.active {
    border-left: 5px solid var(--red);
    color: var(--red);
    
}
.solution-section .list-group-item.active:before {
    background-color: var(--red);
}
.solution-section .list-group-item.active .title-solution {
    background-color: var(--white);
    box-shadow: 0px 0px 50px 0px #0000001A;
}

.solution-section .title-solution {
    padding: 2rem 1.5rem;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 2rem;
}

.solution-section .title-solution i {
    margin-left: auto;
    opacity: 0;
}
.solution-section .list-group-item.active .title-solution {
    background-color: var(--white);
    box-shadow: 0px 0px 50px 0px #0000001A;
    margin-left: 10px;
}
.solution-section .list-group-item.active .title-solution i {
    opacity: 1;
}

.solution-section .list-group-item img {
    max-width: 48px;
}

.solution-section .solutions {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 40%;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 3rem 1.5rem;
}
.solution-section .solutions:hover,
.solution-section .solutions.highlight {
    background-color: var(--red);
    color: #fff;
}
.solution-section .solutions:hover .number ,
.solution-section .solutions.highlight .number {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    font-weight: 800;
}
.solution-section .solutions .number {
    font-size: 5.6rem;
    font-weight: 600;
    line-height: 1.3;
    transition: .3s;
}
.solution-section .favicon {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 7.5rem;
    opacity: .75;
}
.solution-section .cate-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    background-color: var(--light);
    border-radius: 4px;
    padding: 2.5rem;
}
.solution-section .cate-info .title-small { 
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
.solution-section .cate-info .title { 
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -4%;
    margin-bottom: 2rem;
}
.solution-section .cate-info .description { 
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}
.solution-section .cate-info .description ul { 
    list-style: none;
    padding-left: 0;
}
.solution-section .cate-info .description ul li{ 
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.solution-section .tab-content > .tab-pane {
    display: unset;
    z-index: 0;
    opacity: 0;
    transition: .5s;
    position: absolute;
}
.solution-section .tab-content > .active {
    opacity: 1;
    z-index: 1;
}
.solution-section .tab-content .row { 
    margin-right: -5px;
    margin-left: -5px;
}
.solution-section .tab-content .row > div { 
    padding-right: 5px;
    padding-left: 5px;
}
.btn-outline-red {
    border-radius: 8px;
    border: 1px solid var(--red-bold);
    color: var(--red-bold);
    font-weight: 600;
    transition: .3;
    padding: 1rem 3rem;
}
.btn-outline-red:hover {
    background-color: var(--red-bold);
    color: var(--white);
    box-shadow: 0 2px 5px var(--red-bold);
}

.is-mobile .list-group {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 3rem;
}
.is-mobile .solution-section .list-group-item {
    width: calc(50% - 10px);
}
.is-mobile .solution-section .tab-content > .tab-pane {
    position: relative;
    opacity: 1;
    display: none;
}
.is-mobile .solution-section .tab-content > .active {
    display: block;
}
.is-mobile .solution-section .list-group-item img {
    max-width: 30px;
}
.is-mobile .solution-section .title-solution {
    gap: 1rem;
}

@media (min-width: 1024px) {
    .solution-section .tab-content .row > div:first-child {
        flex: 0 0 40%;
        max-width: 40%;
    }
    .solution-section .tab-content .row > div:last-child {
        flex: 0 0 60%;
        max-width: 60%;
    }
}
@media (max-width: 576px) {
    .is-mobile .solution-section .list-group-item {
        width: 100%;
    }
}
/*end block giai phap trang chu*/

/*block 8 item trang chu*/
.bg-light-bold {
    background-color: var(--light-bold);
}
.pb-100 {
    padding-bottom: 10rem;
}
.mb-50 {
    margin-bottom: 5rem;
}

.checkerboard-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Chia đều thành 4 cột bằng nhau */
    width: 100%;
    box-sizing: border-box;
}

/* Base style chung cho toàn bộ các ô */
.grid-cell {
    min-height: 350px; /* Chiều cao cố định tạo thành các khối vuông/chữ nhật tỉ lệ đẹp */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 0px 50px 0px #0000001A;
    transition: .3s;
}
.grid-cell.bg-white:hover {
    background-color: var(--red) !important;
}
.grid-cell.bg-white:hover img {
    filter: brightness(0) invert(1);
}
.grid-cell.bg-white:hover .cell-btn-submit {
    background-color: var(--white);
    color: var(--red);
}
.grid-cell.bg-white:hover * {
    color: var(--white);
}

/* Ô chỉ chứa ảnh nền (Khi description rỗng) */
.cell-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ô chứa nội dung đầy đủ chữ */
.cell-content {
    padding: 35px 40px;
    align-items: flex-start;
}

.cell-wrapper {
    width: 100%;
}

/* Khu vực hiển thị icon nét mảnh */
.cell-icon {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.cell-icon img {
    height: 100%;
    width: 50%;
    object-fit: contain;
    max-width: 150px;
}

/* Tiêu đề danh mục sản phẩm */
.cell-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.15;
}

/* Hiển thị TOÀN BỘ mô tả không bị ẩn/cắt bớt text */
.cell-desc {
    line-height: 1.6;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Link "Xem chi tiết sản phẩm >>" */
.cell-link {
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.cell-link:hover {
    opacity: 0.85;
}

/* ======================================================= */
/* ĐỊNH DẠNG MÀU SẮC ĐAN XEN THEO THEME ẢNH MẪU               */
/* ======================================================= */

/* 1. Ô Đỏ Tươi (Ví dụ ô Cơ điện tòa nhà) */
.bg-red-bright {
    background-color: #cb1c24;
}
.bg-red-bright .cell-title,
.bg-red-bright .cell-desc,
.bg-red-bright .cell-link {
    color: #ffffff;
}
.bg-red-bright .cell-icon img {
    filter: brightness(0) invert(1); /* Tự động đổi màu icon sang trắng nếu là ảnh đen gốc */
}

/* 2. Ô Đỏ Mận Đậm (Ví dụ ô Thiết bị y tế) */
.bg-red-dark {
    background-color: #7b0d11;
}
.bg-red-dark .cell-title,
.bg-red-dark .cell-desc,
.bg-red-dark .cell-link {
    color: #ffffff;
}
.bg-red-dark .cell-icon img {
    filter: brightness(0) invert(1);
}

/* 3. Ô Nền Trắng (Mặc định cho các ô còn lại) */
.bg-white {
    background-color: #ffffff;
}
.bg-white .cell-title { color: #1c2430; }
.bg-white .cell-desc { color: #555555; }
.bg-white .cell-link { color: #1c2430; }

/* ======================================================= */
/* ĐỊNH DẠNG RIÊNG CHO Ô SUBMIT CUỐI CÙNG (INDEX 7)         */
/* ======================================================= */
.cell-btn-submit {
    display: inline-block;
    background-color: #cb1c24;
    color: #ffffff;
    padding: 12px 28px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.cell-btn-submit:hover {
    background-color: #a31218;
}

/* ======================================================= */
/* RESPONSIVE TRÊN TABLET & MOBILE                          */
/* ======================================================= */
@media (max-width: 1024px) {
    .checkerboard-grid-container {
        grid-template-columns: repeat(2, 1fr); /* Về layout 2 cột trên Máy tính bảng */
    }
}

@media (max-width: 600px) {
    .checkerboard-grid-container {
        grid-template-columns: 1fr; /* Xếp dọc 1 cột hoàn toàn trên Điện thoại */
    }
    .grid-cell {
        min-height: 300px;
    }
}
/* end block 8 item trang chu*/


/*block quan he co dong - trang chu*/
.split-section {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.split-half {
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}
.split-section .split-content {
    background-color: var(--red-bold);
}
.split-section .wrap-content {
    color: #fff;
    padding-top: 60px; 
    padding-bottom: 60px; 
    padding-left: 40px; 
    padding-right: calc(100% - var(--width-container) / 2 + 20px);
    position: relative;
    z-index: 2;
}
.list-strengths {
    margin-bottom: 2rem;
}
.item-strength {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/*dung dao nguoc lai split*/
.split-reverse .split-section {
    flex-direction: row-reverse;
}
.split-reverse .split-media {
    background-size: cover;
}
.split-reverse .split-section .wrap-content {
    padding-right: 40px;
    padding-left: calc(100% - var(--width-container) / 2 + 20px);
}
.split-section .wrap-content .title-section {
    color: var(--white);
}

.is-mobile .split-section {
    flex-direction: column;
}
.is-mobile .split-half {
    width: 100%;
}
.is-mobile .split-half.split-media {
    padding-top: 50%;
}
.is-mobile .split-section .wrap-content {
    width: 100%;
    padding: 20px !important;
}


.section-file-home .wrap-content .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-file-home .wrap-content .files-list a {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: 5px;
    transition: .5s;
    font-weight: 600;
}
.section-file-home .wrap-content .files-list .file-name-link {
    margin-bottom: 10px;
}
.section-file-home .wrap-content .files-list .file-date-stamp {
    font-size: 14px;
    font-weight: 400;
}
.section-file-home .wrap-content .files-list a:hover {
    background-color: var(--white);
    color: var(--red);
}
.section-file-home .wrap-content .files-list a:hover .file-date-stamp {
    color: var(--color-text);
}
.section-file-home .wrap-content .files-list a:hover .file-action-download svg *{
    /*stroke: var(--red);*/
    fill: var(--red);
}
.section-file-home .wrap-content .file-action-download {
    margin-left: auto;
}
/*end block quan he co dong - trang chu*/

.mb-60 {
    margin-bottom: 6rem;
}
.background-section {
    padding: 15rem 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.background-section.content-center:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(130, 14, 20, .85);
}
.background-section.content-center .content {
    text-align: center;
    max-width: 1000px;
    margin: auto;
    color: var(--white);
    position: relative;
}
.background-section.content-center .content .title-section {
    font-family: 'Work Sans';
    font-size: 64px;
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: uppercase;
    border-bottom: 5px solid var(--white);
    padding-bottom: 2rem;
}

.is-mobile .background-section {
    padding: 10rem 2rem;
}
.is-mobile .background-section.content-center .content .title-section {
    font-size: 3.5rem;
    line-height: 1.2;
}

.cooperate-section {
    padding: 15rem 2rem;
}
.cooperate-section .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.swiper-brand {
    padding: 1rem 0;
}
.swiper-brand .swiper-wrapper{
    transition-timing-function: linear !important;
}
.swiper-brand img {
    filter: grayscale(100%);
    opacity: .8;
}

/*End trang chu*/


/*trang ve chung toi*/
.banner-about-us .banner {
    position: relative;
}
.banner-about-us .banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 19.37%, rgba(0, 0, 0, 0) 64.01%);
}
.banner-about-us .banner img {
    width: 100%;
    max-height: 70rem;
    object-fit: cover;
}

.banner-about-us .description {
    margin-top: 10px;
    max-width: 870px;
}


.is-mobile .split-about-us {
    flex-direction: column-reverse;
}
.is-mobile .banner-about-us .banner img {
    max-width: 100%;
}
.is-mobile .banner-about-us .banner:before {
    z-index: 2;
}

.history-section{
    position:relative;
    margin:auto;
    padding:40px 0 30px;
}

/* LINE CENTER */

.history-section .process {
    position: relative;
    width: 80%;
    max-width: 1055px;
    margin: auto;
}
.history-section .process::before{
    content:"";
    position:absolute;
    top: 5%;
    bottom:0;
    left: 50%;
    width: 2px;
    height: 95%;
    background-color: #C7D8F0;
    transform:translateX(-50%);
}

/* ITEM */

.item-history{
    position:relative;
    width: calc(50% - 15px);
    margin-bottom: 5px;
    background:#fff;
    border-radius:3px;
    padding: 2.5rem 3rem;
    box-shadow:
        0 4px 18px rgba(0,0,0,.06);
    transition:.25s ease;
}

/* LEFT */

.item-history.text-left{
    margin-right:auto;
    text-align:right !important;
    border-right: 5px solid var(--red);
}

/* RIGHT */

.item-history.text-right{
    margin-left:auto;
    text-align:left !important;
    border-left: 5px solid var(--red);
}

/* DOT */

.item-history::before{
    content:"";
    position:absolute;
    top:50%;
    width: 20px;
    height: 20px;
    border-radius:50%;
    background-color: #d90f1c;
    transform:translateY(-50%);
    z-index:3;
    border: 5px solid #EEF3F8;
    box-shadow: 0px 2px 4px -2px #0000001A;
    box-shadow: 0px 4px 6px -1px #0000001A;
    display: block;
}

/* LEFT DOT */

.item-history.text-left::before{
    right: -30px;
}

/* RIGHT DOT */

.item-history.text-right::before{
    left: -30px;
}

/* RED LINE */

.item-history::after{
    content:"";
    position:absolute;
    top:20px;
    bottom:20px;
    width:2px;
    background:#d90f1c;
    opacity: 0;
}

/* LEFT LINE */

.item-history.text-left::after{
    right:-1px;
}

/* RIGHT LINE */

.item-history.text-right::after{
    left:-1px;
}

/* YEAR */

.item-history .year{
    font-size: 32px;
    font-weight: 700;
    line-height:1;
    color: var(--red);
    margin-bottom: 5px;
    font-family: 'Work Sans';
}

/* TITLE */

.item-history .title{
    font-size: 2rem;
    line-height: 1.2;
    font-weight:700;
    color: #1E232D;
    margin-bottom: 5px;
}

/* DESC */

.item-history .description{
    font-size: 14px;
    line-height: 1.5;
    color: #64748B;
}

/* LAST ITEM */

.item-history:last-child{
    background:#d90f1c;
    color:#fff;
}

.item-history:last-child .title,
.item-history:last-child .description,
.item-history:last-child .year{
    color:#fff;
}

.item-history .logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(calc(-100% - 40px));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HOVER */

.item-history:hover{
    transform:translateY(-4px);
    box-shadow:
        0 12px 30px rgba(0,0,0,.1);
}

/* MOBILE */
.is-mobile .history-section .process {
    width: 100%;
}
@media(max-width: 767px){

    .history-section{
        padding: 3rem 0;
    }
    .history-section .process::before {
        left: 23px;
        height: 90%;
    }

    .history-section::after{
        display:none;
    }
    .item-history.text-left {
        border-right: 0;
        border-left: 5px solid var(--red);
        text-align: left !important;
    }
    .item-history{
        width: calc(100% - 40px);
        margin-left: 40px !important;
        text-align: left !important;
    }

    .item-history::before{
        left: -32px !important;
        right:auto !important;
    }

    .item-history::after{
        left:-1px !important;
        right:auto !important;
    }
    .item-history .logo {
        display: none;
    }
}

.wrap-vision-mission {
    display: flex;
    gap: 2px;
}
.item-vision-mission {
    position: relative;
    width: 50%;
}
.item-vision-mission::before ,
.item-vision-mission::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    transition: .3s;
}
.item-vision-mission::after {
    opacity: 0;
    background: linear-gradient(0deg, var(--red) 0%, rgba(0, 0, 0, 0) 100%);
}
.item-vision-mission:hover:before {
    opacity: 0;
    background: linear-gradient(0deg, var(--red) 0%, rgba(0, 0, 0, 0) 100%);
}
.item-vision-mission:hover:after {
    opacity: 1;
    background: linear-gradient(0deg, var(--red) 0%, rgba(0, 0, 0, 0) 100%);
}
.item-vision-mission .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 5rem;
    color: #fff;
    z-index: 2;
}
.item-vision-mission .title {
    font-size: 64px;
    font-weight: 700;
    font-family: 'Work Sans';
    letter-spacing: -3%;
}
.item-vision-mission .description {
    font-weight: 600;
}

.is-mobile .item-vision-mission .title {
    font-size: 3rem;
}

@media (max-width: 576px) {
    .is-mobile .wrap-vision-mission {
        flex-direction: column;
    }
    .item-vision-mission {
        width: 100%;
    }
}



.affiliated-company .list-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}
.affiliated-company .list-group .list-group-item {
    border: 1px solid #dee2e6 !important;
    border: 0;
    padding: 15px 25px;
    color: #1E232D;
    background-color: var(--white);
    border-radius: 5px;
    transition: .5s;
}
.affiliated-company .list-group .list-group-item img {
    transition: .5s;
}
.affiliated-company .list-group .list-group-item:hover,
.affiliated-company .list-group .list-group-item.active {
    border: 1px solid var(--color-highlight) !important;
    color: var(--color-highlight);
    box-shadow: 0px 0px 10px 0px var(--color-highlight);
}
.affiliated-company .list-group .list-group-item:hover img,
.affiliated-company .list-group .list-group-item.active img {
    padding: 5px;
    background-color: var(--white);
}
.title-affiliated {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    font-weight: 600;
    align-items: center;
}

.title-affiliated img {
    height: 62px;
}

.affiliated-company .tab-content {
    box-shadow: 0px 0px 20px 0px #0000001A;
    background-color: var(--white);
    border-radius: 5px;
    height: 100%;
}
.affiliated-company .tab-content > .active ,
.affiliated-company .tab-content > .active .item-affiliated {
    height: 100%;
    background-color: var(--red);
    color: var(--white);
    border-radius: 5px;
}
.affiliated-company .tab-content > .active .item-affiliated {
    display: flex;
    flex-direction: column;
}
.affiliated-company .tab-content > .active .item-affiliated .name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.affiliated-company .tab-content > .active .item-affiliated img.img-contain {
    object-fit: contain;
    padding: 3rem;
}

.is-mobile .affiliated-company .tab-content > .active .ratio-4-3 {
    padding-top: 56.25%;
}
.is-mobile .affiliated-company .tab-content > .active .ratio-4-3 img {
    object-fit: contain
}

@media (max-width: 576px) {
    .affiliated-company .list-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .affiliated-company .list-group .list-group-item {
        padding: 10px;
    }
    .title-affiliated {
        gap: 5px;
    }
    .title-affiliated img {
        height: 45px;
    }
}

/*end trang ve chung toi*/



/*Page giai phap*/
.solution-statistics .item-statistic {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 30px;
}
.solution-statistics .item-statistic .number {
    font-family: "Work Sans";
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
    letter-spacing: -3%;
    color: var(--red);
}
.solution-statistics .item-statistic .title {
    font-weight: 700;
    font-size: 20px;
}
.solution-statistics .item-statistic .description {
    color: #5A6D84;
    font-weight: 600;
}
.is-mobile .solution-statistics .item-statistic {
    padding: 0;
    margin-bottom: 30px;
    gap: 5px;
}
.is-mobile .solution-statistics .item-statistic .number {
    font-size: 4rem;
    line-height: 4rem;
}
.is-mobile .solution-statistics .item-statistic .title {
    font-size: 18px;
}

.item-cate-solution {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 5rem;
}
.list-solution .item-cate-solution:nth-child(2n) {
    direction: rtl;
}
.list-solution .item-cate-solution:nth-child(2n) .content {
    direction: ltr;
}
.list-solution .item-cate-solution .content {
    text-align: left;
    padding: 5rem;
    border-radius: 5px;
    background-color: var(--white);
    transition: .5s;
}
.list-solution .item-cate-solution .content:hover {
    background-color: var(--red);
}
.list-solution .item-cate-solution .content:hover .title,
.list-solution .item-cate-solution .content:hover * {
    color: var(--white);
}
.list-solution .item-cate-solution .content:hover img {
    filter: brightness(0) invert(1);
    transition: all 0.25s ease;
}
.list-solution .item-cate-solution .content:hover .btn-outline-red {
    background-color: var(--white);
    color: var(--red);
    border-color: var(--red);
}
.list-solution .item-cate-solution .content .title {
    font-weight: 700;
    font-family: "Work Sans";
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -3%;
    color: var(--red);
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
}
.list-solution .item-cate-solution .content ul {
    list-style: none;
    padding-left: 0;
}
.list-solution .item-cate-solution .content ul li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.is-mobile .list-solution .item-cate-solution .content {
    padding: 1.5rem;
}
.is-mobile .list-solution .item-cate-solution:nth-child(2n) .content {
    /*padding: 0;*/
    /*padding-left: 20px;*/
}
.is-mobile .list-solution .item-cate-solution .content .title {
    font-size: 3rem;
}
.list-solution .item-cate-solution .content .description {
    margin-bottom: 2.5rem;
    transition: all 0.25s ease;
}

.deployment-process {
    position: relative;
}
.deployment-process:before {
    content: '';
    position: absolute;
    top: 50px;
    width: 80%;
    height: 2px;
    background: #E6ECF0;
    left: 50%;
    transform: translateX(-50%);
}
.process-item {
    text-align: center;
    padding: 0 30px;
}
.process-item .stt {
    color: var(--red);
    border: 1px solid rgba(230, 236, 240, 1);
    width: 96px;
    height: 96px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-family: 'Work Sans';
    font-weight: 700;
    line-height: 1;
    background-color: #F5F5F7;
    margin: auto;
}
.process-item .title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: #0F2238;
    margin: 15px 0;
}
.process-item .description {
    color: #5A6D84;
}

.is-mobile .process-item {
    padding: 0;
}
.is-mobile .process-item .title{
    font-size: 16px;
}
.is-mobile .solution-section .solutions .number {
    font-size: 3.5rem;
}

@media (max-width: 576px) {
    .item-cate-solution {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .list-solution .item-cate-solution .content {
        padding: 1.5rem !important;
        margin-bottom: 20px;
    }
    
    .deployment-process:before {
        display: none;
    }
    .is-mobile .process-item .stt {
        width: 70px;
        height: 70px;
        font-size: 25px;
    }
    .is-mobile .process-item {
        margin-bottom: 20px;
    }
    .is-mobile .process-item .title {
        margin: 10px 0;
    }
}
/*End Page giai phap*/

/*CHi tiet giai phap*/
.detail-solution .split-content {
    position: relative;
    background-size: cover;
}
.detail-solution .split-content {
    position: relative;
}
.detail-solution .split-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--red);
    opacity: .85;
}
.detail-solution .split-section .title-section {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -3%;
}



.challenge-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    gap: 30px;
    width: 80%;
    margin: auto;
}

/* ITEM */
.challenge-item{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    background: var(--color-white);
    border: 1px solid #D4DFEB;
    transition: all .35s ease;
    box-shadow: 0px 0px 60px 0px #0000001A;
    border-radius: 4px;
}

/* đảm bảo các item bằng nhau */
.challenge-grid > *{
    height: 100%;
}

.challenge-item:hover {
    background-color: var(--red);
    color: #fff;
}
.challenge-item:hover .challenge-title:before {
    background-color: var(--white);
}
.challenge-item:hover .challenge-icon {
    border-radius: 50%;
    background-color: #fff;
    padding: 15px;
}
.challenge-item:hover .challenge-desc {
    color: #fff;
}

/* ICON */
.challenge-icon{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: .3s;
    border-radius: 50%;
}

.challenge-icon img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* CONTENT */
.challenge-content{
    position: relative;
    flex: 1;
}

/* line đỏ */
.challenge-content .challenge-title::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-highlight);
    transition: .4s;
}

/* TITLE */
.challenge-title{
    margin: 0 0 16px;
    color: var(--color-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;
}

/* DESC */
.challenge-desc{
    color: var(--color-text-secondary);
    transition: .4s;
}

.is-mobile .detail-solution .split-section .title-section {
    font-size: 3.5rem;
}
.is-mobile .challenge-title {
    font-size: 2rem;
}

/* RESPONSIVE */
@media(max-width: 991px){
    .challenge-grid{
        width: 100%;
        gap: 15px;
    }
}

@media(max-width: 767px){
    .challenge-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .challenge-section{
        padding: 40px 0;
    }
    .challenge-icon {
        width: 50px;
        height: 50px;
    }
    .challenge-item{
        padding: 15px;
    }
    .is-mobile .challenge-title {
        font-size: 16px !important;
    }
    .challenge-item:hover .challenge-icon {
        padding: 7px;
    }
}

.solution-grid .grid-cell {
    justify-content: end;
    padding: 2rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.solution-grid .grid-cell:not(.cell-content) .cell-title ,
.solution-grid .grid-cell:not(.cell-content) .cell-desc {
    color: var(--white);
}
.solution-grid .grid-cell .cell-desc {
    margin-bottom: 0;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 80%;
    margin: auto;
    text-align: center;
    gap: 25px;
}
.benefit-grid .benefit-item {
    background-color: var(--white);
    border-radius: 16px;
    padding: 25px;
}
.benefit-grid .benefit-item {
    background-color: var(--white);
    border-radius: 16px;
    padding: 25px;
}
.benefit-grid .benefit-item .title {
    font-weight: 700;
    color: var(--red);
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.benefit-grid .benefit-item .sub-title {
    font-weight: 700;
    color: #0F2238;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.benefit-grid .benefit-item .description {
    color: #5A6D84;
    font-size: 14px;
}

.is-mobile .benefit-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}
.is-mobile .benefit-grid .benefit-item {
    padding: 15px;
}
.is-mobile .benefit-grid .benefit-item .title {
    font-size: 18px;
}
.is-mobile .benefit-grid .benefit-item .sub-title {
    font-size: 16px;
}
/*End chi tiet giai phap*/


/*Page linh vuc hoat dong*/
.business-categories .list-cate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    gap: 10px;
    padding: 35px 0;
}
.business-categories .list-cate .link-cate {
    padding: 1.5rem;
    border-radius: 4px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    transition: .3s;
    color: var(--black);
}
.business-categories .list-cate .link-cate svg * {
    transition: .3s;
}
.business-categories .list-cate .link-cate:hover {
    background-color: var(--red);
    color: var(--white);
}
.business-categories .list-cate .link-cate.active {
    background-color: var(--red-bold);
    color: var(--white);
}
.business-categories .list-cate .link-cate:hover svg *,
.business-categories .list-cate .link-cate.active svg * {
    stroke:#fff !important;
}

.business-info .content img {
    max-width: 128px;
}
.business-info .title-section {
    color: var(--red);
}
.business-info .description {
    color: var(--color-text-secondary);
    font-size: 18px;
    text-align: justify;
}
.business-info .description ul {
    padding-left: 0;
    font-size: 16px;
    margin-top: 2rem;
}
.business-info .description ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.business-info .description ul li img{
    width: 24px;
    height: 24px;
}
.ratio-border-right {
    border-radius: 5px;
    overflow: hidden;
}
.ratio-border-right:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: var(--red);
    z-index: 1;
}

.is-mobile .business-categories .list-cate {
    flex-wrap: wrap;
}
.is-mobile .business-categories .list-cate .link-cate {
    width: calc(50% - 5px);
}
/*Page linh vuc hoat dong*/

.product .solution-grid .grid-cell {
    position: relative;
}
.product .solution-grid .grid-cell:not(.cell-content):before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 75%));
}
.product .cell-wrapper {
    position: relative;
    z-index: 1;
}
.product .checkerboard-grid-container {
    gap: 5px;
}

/*Chi tiet san pham*/
.fix-logo {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    opacity: .5;
}
.list-thumb-image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.list-thumb-image .thumb-image {
    border-radius: 5px;
    position: relative;
    padding: 3px;
    overflow: hidden;
}
.list-thumb-image .thumb-image.active{
    border: 2px solid var(--red);
}
.list-thumb-image .thumb-image .number-hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    display: flex;
    align-items: center;    
    justify-content: center;
    font-size: 48px;
    color: #fff;
    font-family: "Work Sans";
    letter-spacing: -3%;
    font-weight: 500;
}

.btn-action-detail {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.btn.btn-outline-light,
.btn.btn-highlight {
    display: flex;
    align-items: center;
    min-width: 220px;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600 !important;
    padding: 1.25rem 3rem;
    background-color: var(--color-highlight);
    color: var(--white);
    transition: .3s;
    gap: 1rem;
}
.btn.btn-highlight:hover {
    background-color: var(--red-bold);
}

.btn.btn-outline-light {
    background-color: var(--light);
    color: var(--black);
    border-color: #D4DFEB;
}
.btn.btn-outline-light:hover {
    background-color: var(--gray);
}

.attribute-info {
    margin-bottom: 30px;
}
.attribute-info .title-info {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -4%;
    margin-bottom: 20px;
}
.attribute-info.tnnb .content ul {
    padding-left: 1rem;
}
.attribute-info.tnnb .content ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    list-style: none;
    color: var(--color-text-secondary);
}
.attribute-info.tnnb .content ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f5eeee;
}
.attribute-info.tnnb .content ul li:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(-45deg);
    border-radius: 0 0 0 3px; 
}

.attribute-info.app table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}
.attribute-info.app table td {
    position: relative;
    z-index: 2;
    padding: 19px 16px 19px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #1E232D;
    border: 0;
}
.attribute-info.app table td:before {
    content: '';
    position: absolute;
    inset: 6px;
    background: #f3f3f5;
    border-radius: 4px;
    z-index: -1;
}
.attribute-info.app table td:after {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #d71920;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.item-product-info {
    margin-bottom: 0;
}
.item-product-info .title-info {
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    padding-left: 12px;
    border-left: 5px solid var(--red);
    margin-bottom: 30px;
}
.item-product-info .content {
    overflow: auto;
}
.double-table table {
    box-shadow: 0px 1px 2px -1px #0000001A !important;
    box-shadow: 0px 1px 3px 0px #0000001A !important;
    margin-bottom: 15px !important;
}
.double-table table tbody tr:nth-child(2n) {
    background-color: var(--light);
}
.double-table table tbody tr:first-child td {
    border-top: 0;
}
.double-table table tbody tr td:first-child {
    border-right: 0 !important;
}
/*End chi tiet san pham*/

/*Trang danh sach bai viet*/
.tab-scroll {
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 25px;
} 
.tab-scroll::-webkit-scrollbar {
    height: 4px; /* Chiều cao của thanh scroll */
}
.tab-scroll::-webkit-scrollbar-thumb {
    background: #f5f6f8; /* Màu của thanh scroll */
}
.tab-scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #f5f6f8; /* Màu của thanh scroll khi cửa sổ không active */
}

.tab-scroll .list-categories {
    width: max-content;
    display: flex;
    align-items: center;
}
.tab-scroll .list-categories a {
    color: #040404;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 5rem;
    transition: all .5s ease;
}
.tab-scroll .list-categories a:last-child {
    margin-right: 0;
}
.tab-scroll .list-categories a:hover,
.tab-scroll .list-categories a.active {
    color: var(--red);
}
.tab-scroll .list-categories a.active {
    font-weight: 600;
}

.is-mobile .tab-scroll .list-categories a {
    margin-right: 3rem;
}

.swiper-article-highlight .article-item {
    margin-bottom: 0;
}
.swiper-article-highlight .swiper-button-prev, 
.swiper-article-highlight  .swiper-button-next {
    color: var(--white);
}


.big-article .inner-image > div {
    padding-top: 36.3%;
}
.article-item .inner-content {
    background: #EEEDED;
    padding: 20px 40px 40px;
    transition: all .5s ease;
}

.article-item .inner-image img {
    transition: all .5s ease;
}
.article-item .article-title {
    font-weight: 600;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
    transition: all .5s ease;
}

.list-custom .article-item .inner-content {
    min-height: 22rem;
}
.post-date {
    transition: all .5s ease;
}
.post-date i {
    margin-right: 5px;
}
.article-item:hover .inner-content {
    background: linear-gradient(90deg, #E52D27 0%, #A3090D 95.71%);
}
.article-item:hover .inner-image img{
    transform: scale(1.2);
}
.article-item:hover .article-title,
.article-item:hover .article-title a,
.article-item:hover .post-date {
    color: var(--white) !important;
}

.article-item .btn-view-more {
    background-color: var(--white);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--red);
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
}

.article-highlight .inner-content {
    background-color: transparent;
    padding: 12px 0;
    color: var(--white);
}
.article-highlight .article-title {
    -webkit-line-clamp: 2;
}
.article-highlight .article-title a {
    color: var(--white);
}
.article-highlight .text-highlight{
    color: var(--white);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.article-highlight:hover .inner-content {
    background: transparent !important;
}
.article-highlight:hover .article-title,
.article-highlight:hover .article-title a {
    color: var(--white) !important;
}
/*End Trang danh sach bai viet*/

/*Trang quan he co dong*/
.list-cate-files {
    border: 1px solid #D1D5DB;
    border-radius: 5px;
    margin-bottom: 3rem;
}
.list-cate-files .item-cate {
    padding: 20px;
    display: block;
    border-bottom: 1px solid #E6ECF0;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}
.list-cate-files .item-cate.active {
    background-color: #CE171F33;
    color: var(--red);
}

.list-files {
    border: 1px solid #D1D5DB;
    border-radius: 5px;
}
.list-files .title-list {
    border-top: 0 !important;
    font-weight: 700;
    font-size: 14px;
}
.list-files .title-list,
.list-files .file-item-row {
    padding: 15px;
    border-top: 1px solid #D1D5DB;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.list-files .file-name-link {
    font-weight: 700;
    color: #0F1F3D;
}
.list-files .file-date-stamp {
    color: #6B7280;
    font-size: 12px;
}
.list-files .icon {
    padding: 6px 8px;
    border-radius: 3px;
    background-color: var(--red);
    color: var(--white);
}
.list-files .file-action-download {
    margin-left: auto;
    border-radius: 5px;
    background-color: var(--red);
    color: var(--white);
    font-size: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    white-space: nowrap;
}
.is-mobile .list-cate-files .item-cate {
    padding: 10px;
}
/*Trang quan he co dong*/


/*CHI tiet bai viet*/
.article-related .title-section {
    font-size: 3rem;
}
/*CHI tiet bai viet*/

/*--------------------------------------------------------------------------
|  Footer
--------------------------------------------------------------------------*/
footer {
    background-color: #00172F;
    padding-top: 8rem;
}
.checkout-payment .btn-submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.company-name {
    font-weight: 700;
    font-size: 24px;
}
.is-mobile .company-name {
    font-size: 2rem;
}
.is-mobile .menu-section > ul > li:hover > a,
.is-mobile .menu-section .active {
    border-bottom: 0;
}
/*--------------------------------------------------------------------------
|  Responsive
--------------------------------------------------------------------------*/

.is-mobile .header-top .row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}
.is-mobile .eoffice {
    padding: 6px 15px;
    border-radius: 5px;
    font-weight: 500;
}

.is-mobile .title-section {
    font-size: 3.5rem;
}

.is-mobile .list-custom {
    margin-right: -5px;
    margin-left: -5px;
}
.is-mobile .list-custom > div {
    padding-right: 5px;
    padding-left: 5px;
}
.is-mobile .list-custom .article-item {
    margin-bottom: 1.5rem;
}
.is-mobile .article-item .btn-view-more {
    padding: 7px 14px;
}
.is-mobile .article-item .inner-content {
    padding: 10px;
}

@media (min-width: 1366px) and (max-width: 1600px) {
    .menu-section > ul > li > a{
        padding: 0 8px;
    }
    
    .banner-home .content-highlight .text-main {
        font-size: 38px;
    }
}
@media (min-width: 1024px) and (max-width: 1300px) {
    .banner-home .content-highlight {
        width: 50%;
    }
    
    .banner-home .content-highlight .text-top {
        font-size: 25px;
    }
    .banner-home .content-highlight .text-main {
        font-size: 30px;
        margin-bottom: 10px;
    }
}
@media (min-width: 1024px) and (max-width: 1600px) {
    .menu-section > ul > li {
        margin-right: .5rem !important;
        padding-right: .5rem !important;
    }
    
    .banner .title {
        font-size: 6rem;
    }
    .banner .text-red {
        font-size: 5rem;
    }
    .banner .certificate {
        max-width: 50%;
    }
    
    .benefit-grid {
        width: 90%;
    }
    
    .solution-grid .grid-cell {
        min-height: 300px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    :root{
        --width-container: 1000px;
    }
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1000px;
    }
    
    .menu-section > ul > li {
        margin-right: .5rem;
        padding-right: .5rem;
    }
    
    .py-100 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .menu-section > ul > li > a {
        font-size: 14px;
        padding: 0 4px;
    }
    .banner .title {
        font-size: 4rem;
    }
    .banner .text-red {
        font-size: 3.5rem;
    }
    
    .brand-logo-wrapper {
        width: 90px;
        height: auto;
    }
    .brand-title {
        font-size: 2.2rem;
    }
    .brand-identity .info img {
        height: 33px;
        width: auto;
    }
    
    .cell-content {
        padding: 20px;
    }
    .cell-icon img {
        width: 30%;
    }
    
    .section-statistics {
        min-height: 300px;
    }
    .section-statistics .content {
        width: 40%;
    }
    .list-statistics .stat-item {
        height: auto;
    }
    .list-statistics .stat-value {
        font-size: 3rem;
    }
    .list-statistics .stat-label {
        font-size: 15px;
    }
    .detail-solution .split-section .title-section {
        font-size: 4.5rem;
    }
    
    .challenge-title {
        font-size: 20px;
    }
    
    .grid-feature-container {
        grid-template-rows: repeat(2, 240px);
    }
    
    .benefit-grid {
        width: 100%;
    }
    .checkerboard-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-cell {
        min-height: 250px;
    }
    .file-icon-type svg {
        width: 50px;
    }
    .welcome-title {
        font-size: 9rem;
        height: 90px;
    }
    
    .solution-grid .grid-cell {
        min-height: 250px;
    }
    .solution-grid .grid-cell .cell-title {
        font-size: 18px;
    }
}

@media (min-width: 1025px) and (max-width: 1300px) {
    .brand-identity .info img {
        height: 44px;
    }
    .brand-title {
        font-size: 26px;
    }
}

@media (min-width: 1600px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: var(--width-container);
        /*max-width: 1440px;*/
    }
    .banner .content {
        max-width: var(--width-container);
        /*max-width: 1440px;*/
    }
    .section-statistics .content {
        left: calc((100% - var(--width-container)) / 2);
        /*left: calc((100% - 1440px) / 2);*/
    }
}

@media (max-width: 576px) {
    .banner .btn-action a {
        min-width: auto;
        padding: 1.25rem 1.8rem;
    }
    .tab-scroll::-webkit-scrollbar {
        height: 2px; /* Chiều cao của thanh scroll khi màn hình nhỏ hơn 576px */
    }
    
    .list-files .file-action-download span {
        display: none;
    }
    
    .is-mobile .btn-action-detail {
        flex-direction: column;
    }
    .product-image-detail .swiper-thumbs .btn-expand {
        font-size: 20px;
    }
    .is-mobile .product-content-detail .product-title-detail {
        font-size: 25px;
    }
    .is-mobile .attribute-info .title-info {
        font-size: 20px;
    }
    .is-mobile .attribute-info.app table td {
        padding: 10px 15px 10px 25px;
        font-size: 14px;
    }
    .is-mobile .attribute-info.app table td:after {
        left: 12px;
    }
    
    .is-mobile .fix-logo {
        max-width: 50px;
    }
    
    .is-mobile .big-article .inner-image > div {
        padding-top: 75%;
    }
    .is-mobile .article-item .btn-view-more {
        display: none;
    }
}