/*#region general */
main.pb-3 {
    font-family: Inter;
    padding-bottom:0 !important;
}

.new-container {
    display: flex;
    width: 1920px;
    max-width: calc(100vw - 30px);
    margin: 0 auto;
}

.only-mobi {
    display: none !important;
}
/*#endregion */
/*#region top-cover */
.top-cover {
    display: flex;
    min-height: 580px;
    background: url(/images/microsoft365/pc-bg-hero-section-banner-ldp-mcs-365_v2.0.png) bottom center no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
}

    .top-cover:after {
        content: '';
        display: block;
        width: 100%;
        height: 90px;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 98%) 10%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 0.1) 90%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        z-index: 0;
        bottom: 0;
    }

    .top-cover .container {
        display: flex;
    }

.content-left {
    width: 468px;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #091221;
    padding: 80px 0;
    text-align: left;
}

.content-right {
    width: calc(100% - 488px);
    position: relative;
}
.content-right img{
    display:block;
    margin:0 auto;
}
.content-left > b {
    display: block;
    font-size: 16px;
    line-height: 24px;
    padding-top: 68px;
    background: url(/images/microsoft365/top-microsoft.svg) top left no-repeat;
    background-size: 115px 52px;
}

.content-left h1 {
    margin-top: 12px;
    margin-bottom: 24px;
    color: #000;
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
}

.content-left h3 {
    line-height: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom:8px;
}

.content-left .desc {
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 28px;
    color: #000;
}

.content-left h3 strong {
    color: #FA540A;
    font-size: 44px;
    font-weight: 700;
    line-height: 40px;
    margin:0 8px;
}

.content-left h3 u {
    color: #6C6C6C;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.content-left .buttons {
    display: block;
    position: relative;
    margin: 32px 0 16px;
}

    .content-left .buttons .btn {
        width: 224px;
        border-radius: 8px;
        background: linear-gradient(90deg, #FC8562 -11.33%, #FA540A 109.54%);
        box-shadow: 0 8px 16px 0 #EDF2FE;
        border: none;
        color: #FFF;
        padding: 16px !important;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }
        .content-left .buttons .btn:hover {
            background: linear-gradient(90deg, #f9bba9 -11.33%, #FA540A 109.54%);
        }
        .content-left .buttons .btn + span {
            margin: 0 16px;
            font-weight: 500;
        }

    .content-left .buttons .lnk {
        text-decoration: underline;
        font-weight: 600;
        color: #091221;
        cursor: pointer;
    }

.content-left .guarantee {
    display: block;
    color: #000;
    padding-left: 32px;
    background: url(/images/microsoft365/shell.svg) left center no-repeat;
    background-size: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    position: relative;
    margin-bottom: -1px;
}
/*#endregion */
/*#region cetificate-ms365 */
.cetificate-ms365{
    padding:85px 0 136px;
}
    .cetificate-ms365 .cont-area {
        display: block;
        min-height: 400px;;
        padding: 51px 248px 51px 524px;
        border-radius: 16px;
        background: url(/branding/cloud2.jpg) 48px 28px no-repeat, url(/images/microsoft365/bg-pc-chung-nhan-mcs_email-365_v2.0.png) center no-repeat;
        background-size: auto 280px, cover;
    }
        .cetificate-ms365 .cont-area h2 {
            display: block;
            padding-top: 86px;
            color: #091221;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            margin-bottom: 12px;
            background: url(/images/microsoft365/top-microsoft.svg) top left no-repeat;
            background-size:146px 66px;
        }
        .cetificate-ms365 .cont-area .desc {
            display: block;
            color: #091221;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-bottom:28px;
        }
        .cetificate-ms365 .cont-area .btn {
            border-radius: 5px;
            background: rgba(23, 107, 251, 0.08);
            box-shadow: 0 .5px 0 #176BFB,0 -.5px 0 #176BFB,.5px 0 0 #176BFB,-.5px 0 0 #176BFB;
            padding: 8px 12px;
            color: #1E74E8;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            outline: none;
            border: none;
            margin-bottom:8px;
            margin-right: 12px;
        }
            .cetificate-ms365 .cont-area .btn:hover {
                color: #0361e0;
                box-shadow: 0 .5px 0 #0361e0,0 -.5px 0 #0361e0,.5px 0 0 #0361e0,-.5px 0 0 #0361e0;
            }
            .cetificate-ms365 .cont-area .btn:after {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-left: 4px;
                background: url(/images/microsoft365/certificate.svg) center no-repeat;
                background-size: contain;
                top: 2px;
                position: relative;
            }
        .cetificate-ms365 .cont-area .btn.lnk:after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 4px;
            background: url(/images/microsoft365/redirect.svg) center no-repeat;
            background-size: contain;
            top: 2px;
            position: relative;
        }
.certificate-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000000000;
    background: #000000b8;
}
    .certificate-popup .cont {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        min-width: 100px;
        text-align: center;
    }
        .certificate-popup .cont img {
            max-height: 90vh;
        }
        .certificate-popup .cont span {
            display: block;
            margin-top: 8px;
            color: #FFF;
            font-size: 14px;
        }
        .certificate-popup .cont .close{
            text-decoration: none;
            position:absolute;
            top:0;
            right:0;
            z-index:10;
            width:52px;
            height:52px;
            background:url(/images/microsoft365/Close.svg) center no-repeat;
            background-size:contain;
            cursor:pointer;
        }
/*#endregion */
/*#region super menu */
.super-menu {
    display: block;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 826px;
    height: 56px;
    z-index: 100;
    padding: 4px;
    border-radius: 72px;
    border: 1px solid #FFEFE5;
    background: #FFF;
    box-shadow: 0px 8px 16px 0px rgba(255, 246, 240, 0.60);
}

.super-fix {
    position: fixed;
    top: 24px;
}

    .super-fix + .after-fix {
        display: block;
        padding: 20px 0;
        height: 80px;
    }

.super-menu ul {
    display: flex;
    padding: 0;
    margin: 0;
    gap: 8px;
    position: relative;
    list-style: none;
}

    .super-menu ul li {
        cursor: pointer;
        padding: 12px 20px;
        color: #8C8C8C;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

        .super-menu ul li.active,
        .super-menu ul li:hover {
            color: #091221;
            background: linear-gradient(90deg, #FC8562 -11.33%, #FA540A 109.54%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .super-menu ul li:last-child {
            margin-right: 0;
        }

/*#endregion */
/*#region testimonial */
.wp-testimonial {
    padding: 80px 0 92px;
}

    .wp-testimonial .container {
        display: flex;
        gap: 16px;
    }

.left-panel {
    flex: 0 0 350px;
    padding: 16px 28px;
    background: url(/images/microsoft365/caro_bg.png) center;
    border-radius: 20px;
    color: #091221;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
    .left-panel:before {
        content: '';
        width: 360px;
        height: 360px;
        position: absolute;
        top: -180px;
        right: -180px;
        z-index: 200;
        border-radius: 360px;
        opacity: 0.5;
        background: #FFF;
        filter: blur(165.97938537597656px);
    }

    .left-panel:after {
        content: '';
        width: 360px;
        height: 360px;
        position: absolute;
        bottom: -180px;
        left: -180px;
        z-index: 200;
        border-radius: 360px;
        opacity: 0.5;
        background: #FFF;
        filter: blur(165.97938537597656px);
    }

    .left-panel .gradient-effect {
        content: '';
        width: 200px;
        height: 200px;
        background: radial-gradient(circle at center, #2f80ed29 0%, #006dff00 70%);
        position: absolute;
        top: -100px;
        right: -100px;
        z-index: 0;
    }

.main-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.left-panel .title {
    background: linear-gradient(90deg, #000 0%, #E3272C 49.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 2px 16px rgba(83, 157, 255, 0.19);
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -1px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.left-panel .subtitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 53px;
}

.image-placeholder {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Adjust as needed */
    position: relative;
}

    .image-placeholder img {
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: contain; /* Ensures the image fits within its container */
    }

.left-panel .footnote {
    color: #8C8C8C;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-top: 13px;
    margin-bottom: 0;
}

.right-panel {
    flex-grow: 1;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.review-card {
    padding: 3px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: none;
    box-shadow: 0 .5px 0 #D6D6D6,0 -.5px 0 #D6D6D6,.5px 0 0 #D6D6D6,-.5px 0 0 #D6D6D6;
    background: #FCFCFC;
}

.boder-hover {
    border-radius: 12px;
    padding: 32px;
    display: flex;
    position: relative;
    background-color: #FCFCFC;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
    height: 260px;
    z-index: 2;
}

.review-text {
    color: rgba(0, 0, 0, 0.60);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.reviewer {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e0e0e0;
    border: 2px solid #FFF;
    box-shadow: 0 5px 8px 0 #FCFCFC inset, 0 8px 16px 0 rgba(255, 246, 240, 0.60);
    margin-right: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

    .reviewer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.reviewer-info {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
}

.stars {
    width: 100px;
    height: 20px;
    background: url(/images/home/star-full.svg) top left repeat-x;
    background-size: 20px;
}
/*#endregion */
/*#region slick edit */
.slick-arrow.slick-disabled {
    pointer-events: none;
}

#slider_price .slick-prev {
    width: 70px;
    height: 70px;
    left: 50px;
    z-index: 200;
}

    #slider_price .slick-prev:before {
        background: url(/images/microsoft365/prev.svg) center no-repeat;
        background-size: contain;
        width: 70px;
        height: 70px;
        display: inline-block;
        content: ' ';
        opacity: 1;
    }

#slider_price .slick-next {
    width: 70px;
    height: 70px;
    right: 50px;
    z-index: 200;
}

    #slider_price .slick-next:before {
        background: url(/images/microsoft365/next.svg) center no-repeat;
        background-size: contain;
        width: 70px;
        height: 70px;
        display: inline-block;
        content: ' ';
        opacity:1;
    }

#slider_price .slick-dots li:first-child,
#slider_price .slick-dots li:last-child {
    display: none;
}

#slider_price .slick-dots li button,
.slick-dots li {
    width: 24px;
    padding: 0;
}

    #slider_price .slick-dots li button::before {
        display: inline-block;
        background: #FFD3BF;
        color: #FFF;
        border-radius: 4px;
        opacity: 1 !important;
        width: 24px;
        height: 8px;
        content: '';
    }

#slider_price li.slick-active,
#slider_price li.slick-active button {
    width: 64px;
}

    #slider_price li.slick-active button::before {
        background: #FA540A !important;
        width: 64px;
        opacity: 1 !important;
        color: #FA540A !important;
    }
/*#endregion */
/*#region price list */
.price-list:not(#lst_result_select) {
    max-width: 100%;
    width: 1460px;
    margin: 0 auto;
}

.price-list .item-list {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 0;
    align-items: center;
    justify-content: center;
}
.price-list .item-list#item_2{
    top:-40px;
}
.price-list .item-list.hidden{
    display: none;
}
.price-list .tab-title {
    display: block;
    font-family: Inter;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 16px;
}

.price-list .tab-desc {
    display: block;
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: #8c8c8c;
    margin-bottom: 24px;
}

#div_result_select {
    padding-top: 40px;
}

.price-list .item-list:not(#lst_result_select) {
    max-width: 100vw;
    margin: 0 auto 20px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}

.price-list .item-list .item {
    position: relative;
    width: 350px !important;
    min-height:950px;
    padding: 24px 20px 20px;
    border-radius: 16px;
    background: #FFF;
    color: #091221;
}
    .price-list #item_2.item-list .item{
        min-height:765px;
    }
    .price-list .item-list .item a:focus {
        outline: none;
        box-shadow: none;
    }

    .price-list .item-list .item.hot-sale {
        border-radius: 0px 0px 16px 16px;
        border-right: 1px solid #F95711;
        border-bottom: 1px solid #F95711;
        border-left: 1px solid #F95711;
        background: #FFF;
    }

        .price-list .item-list .item.hot-sale .tab {
            border-radius: 16px 16px 0px 0px;
            background: url(/images/microsoft365/star.png) left bottom no-repeat, linear-gradient(121deg, #F95711 29.27%, #ED7225 86.71%);
            background-size: contain;
            position: absolute;
            top: -40px;
            left: -1px;
            z-index: -1;
            display: flex;
            width: calc(100% + 2px);
            padding: 4px 56px 12px 72px;
            justify-content: space-between;
            align-items: flex-start;
            color: #FFF;
            font-size: 20px;
            font-weight: 600;
            line-height: 36px;
        }
    .price-list .item-list .item .addion {
        border-radius: 16px;
        padding: 12px 8px 12px 68px;
        display: flex;
        flex-direction: column;
        color: #091221;
        text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom:32px;
    }
        .price-list .item-list .item .addion.copilot {
            background: url(/images/microsoft365/Copilot_pack.svg) 8px no-repeat, #FFFAF7;
            background-size:52px;
        }
        .price-list .item-list .item .addion.teams {
            background: url(/images/microsoft365/Teams_pack.svg) 8px no-repeat, #F7F8FF;
            background-size: 52px;
        }
        .price-list .item-list .item .addion.shell {
            background: url(/images/microsoft365/Defender_pack.svg) 8px no-repeat, #F7FDFF;
            background-size: 52px;
        }
    .price-list .item-list .item .addion b{
        margin-bottom:4px;
    }
    .price-list .item-list .item .title {
        display: block;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        position: relative;
    }
        .price-list #item_2.item-list .item .title{
            font-size:20px;
            line-height:28px;
            font-weight:700;
        }
.price-list #item_2.item-list .item .brief-area .title {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}
            .price-list .item-list .item .title lottie-player {
                width: 32px;
                height: 32px;
                position: absolute;
                right: 0;
                top: -4px;
                cursor: pointer;
            }
.price-list .item-list .copilot-area {
    height: 104px;
    margin-bottom: 24px;
    background: url(/images/microsoft365/tag.svg) center no-repeat;
    background-size: cover;
    padding: 4px;
    border-radius: 20px;
    overflow: hidden;
}
    .price-list .item-list .copilot-area.empty{
        background: none;
    }
    .price-list .item-list .copilot-area span {
        display: block;
        width: 100%;
        height: 100%;
        background: url(/images/microsoft365/Copilot_round.svg) 12px 12px no-repeat, #FFF;
        border-radius: 16px;
        padding: 12px 12px 12px 36px;
    }
        .price-list .item-list .copilot-area span strong {
            display:block;
            color: #091221;
            text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            margin-bottom:8px;
        }
        .price-list .item-list .copilot-area span i {
            display: block;
            color: #6C6C6C;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }
    .price-list .item-list .copilot-area:hover span i {
        display: none;
    }
            .price-list .item-list .copilot-area span i b {
                color: #FA540A;
            }
        .price-list .item-list .copilot-area span a {
            display: none;
        }
    .price-list .item-list .copilot-area:hover span a {
        display: inline;
        padding: 4px 8px;
        border-radius: 4px;
        border: 0.5px solid #FFE8DE;
        background: rgba(250, 84, 10, 0.08);
        color: #FA540A;
        text-shadow: 0 4px 12px rgba(237, 114, 37, 0.20);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        cursor:pointer;
    }
    .price-list .item-list .item .desc {
        display: block;
        color: #8C8C8C;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        margin: 12px 0 24px;
    }
.price-list #item_2.item-list .item .desc {
    font-weight: 400;
}

        .price-list .item-list .item .price {
            margin-bottom: 24px;
        }

        .price-list .item-list .item .price b {
            font-size: 48px;
            line-height: 52px;
            font-weight: 700;
            margin-bottom: 12px;
            display: inline-block;
        }
.price-list #item_2.item-list .item .price b {
    color: #091221;
}

    .price-list .item-list .item.hot-sale .price b {
        color: #FA540A;
    }

    .price-list .item-list .item.hot-sale .desc {
        font-weight: 400;
    }

    .price-list .item-list .item .price s {
        display: block;
        color: #7b7b7b;
        font-size: 22px;
        line-height: 28px;
        font-weight: 700;
    }

    .price-list .item-list .item .price .unit {
        color: #333;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }

    .price-list .item-list .item .price + .btn {
        width: 100%;
        border-radius: 8px;
        background: linear-gradient(90deg, #86C967 -11.33%, #59A835 109.54%);
        border: none;
        font-size: 16px;
        line-height: 24px;
    }
        .price-list .item-list .item .price + .btn:hover {
            background: linear-gradient(90deg, #aadf92 -11.33%, #59A835 109.54%);
            color:#FFF;
        }
.price-list .item-list .hot-sale .price + .btn {
    border-radius: 8px;
    background: linear-gradient(90deg, #FC8562 -11.33%, #FA540A 109.54%);
}
    .price-list .item-list .hot-sale .price + .btn:hover {
        background: linear-gradient(90deg, #f9bba9 -11.33%, #FA540A 109.54%);
    }

.price-list .item-list .item .brief-area {
    display: block;
    padding: 0;
    margin: 32px 0 0;
    min-height: 530px;
}
.price-list #item_2.item-list .item .brief-area {
    min-height: 312px;
}

    .price-list .item-list .item .brief-area .title {
        color: #091221;
        text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        margin-bottom: 20px;
    }
    .price-list .item-list .item .brief-area .brief {
        width: calc(100% + 4px);
        padding-left: 32px;
        min-height: 20px;
        margin-bottom: 24px;
        background: url(/images/microsoft365/check.svg) left top no-repeat;
        background-size: 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }
        .price-list .item-list .item .brief-area .brief.icon {
            background: none;
            padding-left: 0;
            min-height: 64px;
            margin-bottom: 32px;
        }
            .price-list .item-list .item .brief-area .brief.icon img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
                margin-bottom: 8px;
                display: inline;
                border-radius: 4px;
                border: 0.5px solid #EEE;
                background: #FFF;
            }

.price-list .item-list .item .brief-area .brief .mbtooltip-normal {
    width: 16px;
    height: 16px;
    background: url(/images/microsoft365/tooltip.svg) center no-repeat;
    position: relative;
    top: 2px;
}

.price-list .item-list .item .brief-area .brief .green-bg {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 4px;
    background: rgba(237, 114, 37, 0.08);
    color: #ED7225;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.005em;
}

.price-list .item-list .item .compare {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #6C6C6C;
    padding-bottom: 32px;
    background: url(/images/microsoft365/Chevron.svg) center bottom no-repeat;
    background-size: 24px;
    cursor:pointer;
}

.price-list .item-list .slick-slide {
    margin-right: 20px;
}

.price-list .slick-list {
    padding-top: 40px !important;
    padding-bottom: 52px !important;
}
    .price-list .slick-list:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        width: 236px;
        height: 100%;
        background: linear-gradient(to right, #F5F5F6, #F5F5F600);
    }
    .price-list .slick-list:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
        width: 236px;
        height: 100%;
        background: linear-gradient(to right, #F5F5F600, #F5F5F6);
    }
.price-list .slick-dots {
    margin-bottom: 20px !important;
}

.service-main .d-flex {
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
.toggle-container {
    border-radius: 28px;
    background: #F2F2F2;
    border: none;
    box-shadow: 0 .5px 0 #D6D6D6,0 -.5px 0 #D6D6D6,.5px 0 0 #D6D6D6,-.5px 0 0 #D6D6D6;
    margin-bottom: 104px;
    padding: 4px;
    width: 332px;
    height: 52px;
}

    .toggle-container:after {
        top: 4px;
        left: 4px;
        height: calc(100% - 8px);
        border-radius: 80px;
        background: #FFF;
        box-shadow: 0 4px 8px 0 rgba(63, 61, 59, 0.11);
    }

    .toggle-container.checked:after {
        left: calc(50% - 4px);
    }

.toggle-option {
    color: #6C6C6C;
    text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
    width: 50%;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

    .toggle-option.active {
        color: #091221;
    }
.gray-note {
    display: inline-block;
    width: 100%;
    padding: 0 0 84px;
    text-align: center;
    color: #a2a2a2;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
/*#endregion */
/*#region service wordpress */
.service-main {
    background: url(/images/microsoft365/noise.png) left bottom, #F5F5F6;
    background-size: 100% 328px;
    padding: 92px 0;
}

    .service-main h2 {
        color: #091221;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 20px;
    }

        .service-main h2 + .desc {
            display: block;
            color: #8C8C8C;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
            margin-bottom: 28px;
        }
/*#endregion */
/*#region package include */
.package-include {
    display: block;
    text-align: center;
    position: relative;
}

    .package-include .tab-title {
        display: block;
        color: #091221;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 40px;
    }

    .package-include .check-list {
        display: flex;
        width: 860px;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 12px;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
        margin: 0 auto;
    }

        .package-include .check-list li {
            padding: 16px 20px 16px 44px;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            border-radius: 16px;
            border: 2px solid rgba(214, 214, 214, 0.14);
            background: url(/images/microsoft365/check.svg) 16px center no-repeat, #FFF;
            color: #091221;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
        }
/*#endregion */
/*#region features */
.gray-bg {
    background: #F8F8F8;
}

.features {
    background: linear-gradient(145deg, #FFFCFB 12.16%, rgba(255, 237, 216, 0.60) 98.63%);
    padding: 92px 0;
    margin: 0 auto;
    position: relative;
    width: 1px;
    height: 1440px;
    transform: scale(0.8);
    opacity: 0;
    transition: all 1s ease-out;
}

    .features.active {
        width: 100%;
        height: auto;
        transform: scale(1);
        opacity: 1;
        border-radius: 32px 32px 0 0;
        overflow: hidden;
    }
    .features.active .container{
        padding-left:0;
        padding-right:0;
    }
    .features:before {
        width: 100%;
        height: 5px;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, #FFF0 11%, #EC5B05 53%, #FFF0 90%);
    }

    .features h2 {
        color: #091221;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 60px;
        margin-bottom: 36px;
    }

    .features .row {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        gap: 16px;
    }

        .features .row [class*='col-md-'] {
            height: 530px;
            border-radius: 20px;
            background: #fffffff0;
            border: 1px solid #FFF2F2;
            padding: 32px;
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 100px, 0);
            opacity: 0;
            transition-property: opacity, transform;
            transition-duration: 1.2s;
            transition-timing-function: ease;
            box-shadow: 0 8px 32.397px 0 rgba(252, 133, 98, 0.11);
        }
            .features .row [class*='col-md-'] b {
                display: block;
                color: #091221;
                margin-bottom: 12px;
                font-size: 20px;
                font-weight: 700;
                line-height: 28px;
            }

            .features .row [class*='col-md-'] span {
                display: block;
                color: #6C6C6C;
                width: 510px;
                max-width: 100%;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }

            .features .row [class*='col-md-'] strong {
                display: block;
                color: #091221;
                text-align: center;
                text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
                font-size: 28px;
                font-weight: 700;
                line-height: 36px;
                margin-bottom:16px;
            }

                .features .row [class*='col-md-'] strong b {
                    display: inline;
                    color: #F95711;
                    font-size: 28px;
                    font-weight: 700;
                    line-height: 36px;
                }
            .features .row [class*='col-md-']:nth-last-child(1),
            .features .row [class*='col-md-']:nth-last-child(2),
            .features .row [class*='col-md-']:nth-last-child(3){
                height:380px;
            }
            .features .row [class*='col-md-'].feature_1 {
                background: url(/images/microsoft365/feature_1.svg?v=2) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].feature_2 {
                background: url(/images/microsoft365/feature_2.svg?v=2) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].feature_3 {
                background: url(/branding/cloud6.jpg) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].feature_3 b,
            .features .row [class*='col-md-'].feature_3 span {
                color: white;
                text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            }
            .features .row [class*='col-md-'].feature_4 {
                background: url(/branding/cloud5.jpg) center no-repeat,url(/images/microsoft365/feature_4.png?v=2) center no-repeat,url(/images/microsoft365/feature_4.svg?v=2) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].feature_4 b,
            .features .row [class*='col-md-'].feature_4 span {
                color: white;
                text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            }
            .features .row [class*='col-md-'].feature_5 {
                background: url(/images/microsoft365/feature_5.svg?v=2) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].feature_6 {
                background: url(/images/microsoft365/feature_6.svg?v=2) center no-repeat, #fffffff0;
            }
            .features .row [class*='col-md-'].feature_7 {
                background: url(/images/microsoft365/feature_7.svg?v=2) center no-repeat, #fffffff0;
                background-size: cover
            }
            .features .row [class*='col-md-'].show {
                opacity: 1;
                transform: translateZ(0);
            }

        .features .row .col-md-4 {
            width: calc(33.1% - 8.2px);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
            .features .row .top {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
        .features .row .bot {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .features .row .cen {
            text-align: center;
            padding-bottom:70px;
        }


            .features .row .col-md-6 {
                width: calc(50% - 8px);
            }

        .features .row .col-md-8 {
            width: calc(66.9% - 8px);
        }
/*#endregion */
/*#region faq */
.faqs {
    display: flex;
    padding: 92px 0;
    background: linear-gradient(180deg, rgba(255, 244, 232, 0.00) -16.15%, #FFF3EB 161.5%);
    color: #091221;
}

    .faqs h2 {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 40px;
        color:#000;
    }

.panel-default > .panel-heading {
    background: none;
    display: block;
    float: left;
    margin-top: 0;
    width: 100%;
    cursor: pointer;
}

    .panel-default > .panel-heading.active {
        border-radius: 12px;
        border: none;
        position: relative;
    }

        .panel-default > .panel-heading.active::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 12px;
            padding: 1px;
            background: linear-gradient(45deg,#c03a0010, #f9571182, #F95711);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
        }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        padding-top: 0;
        padding-left: 40px;
    }

    .panel-default > .panel-heading .panel-title {
        line-height: 26px;
    }

        .panel-default > .panel-heading .panel-title strong {
            font-weight: 600;
        }

    .panel-default > .panel-heading i {
        color: #ff4343;
        margin-right: 10px;
        float: left;
        font-size: 16px;
    }

    .panel-default > .panel-heading span {
        display: inline-block;
        width: 100%;
        float: left;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }
    .panel-default > .panel-heading:hover span {
        color: #f17147;
    }
    .panel-default > .panel-heading.active span {
        color: #F17125;
        font-size: 16px;
        font-weight:600;
    }

.panel-collapse .panel-body {
    display: none;
    float: left;
    width: 100%;
    padding: 16px 0 0;
    padding-right: 48px;
    font-size: 14px;
    line-height: 20px;
}

    .panel-collapse .panel-body ul {
        padding-left: 20px;
    }

        .panel-collapse .panel-body ul li:not(:last-child) {
            margin-bottom: 8px;
        }

    .panel-collapse .panel-body [href*='.'], #dichvudikem [href] {
        color: #2749cf;
        text-decoration: underline;
    }

.panel-heading.collapsed {
    margin-top: 0;
    padding: 20px 16px;
    border-bottom: 1px solid #FFEFE5;
    position: relative;
}

    .panel-heading.collapsed:before {
        display: block;
        content: '';
        position: absolute;
        top: 20px;
        right: 16px;
        width: 24px;
        height: 24px;
        background: url(/images/microsoft365/plus.svg) right center no-repeat;
        background-size: contain;
    }

    .panel-heading.collapsed.active:before {
        background: url(/images/microsoft365/minus.svg) right center no-repeat;
        background-size: contain;
    }

    .panel-heading.collapsed:not(.active):last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.collapse .panel-body a[href*='.'] {
    color: #2749cf;
    text-decoration: underline;
}
/*#endregion */
/*#region banner */
.banner-gan {
    display: flex;
    background: url(/images/microsoft365/Banner_Orange.png) center;
    background-size: cover;
    height: 300px;
}
    .banner-gan .container{
        padding-top:54px;
        padding-bottom:54px;
        position:relative;
    }
    .banner-gan h3 {
        display: block;
        color: #FFF;
        max-width:calc(100% - 412px);
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
        margin-top: 0;
        margin-bottom: 8px;
    }
    .banner-gan span {
        display: block;
        color: #FFF;
        max-width: calc(100% - 412px);
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        margin-bottom: 28px;
    }
    .banner-gan .btn {
        display: block;
        width:357px;
        border-radius: 8px;
        border: 2px solid #FFF;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 8px 16px 0 rgba(255, 246, 240, 0.60);
        padding: 16px;
        text-align: center;
    }
        .banner-gan .btn b {
            text-shadow: 0 4px 8px rgba(63, 61, 59, 0.11);
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            background: linear-gradient(90deg, #000000 0%, #E3272C 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    .banner-gan .container:after{
        content:'';
        display:block;
        right:0;
        bottom:0;
        width:412px;
        height:300px;
        position:absolute;
        bottom:0;
        right:0;
        background:url(/branding/cloud3.jpg) center bottom no-repeat;
        background-size: contain;
    }
.banner-support {
    display: flex;
    background: url(/images/microsoft365/Backgroud_gray.png) center;
    background-size: cover;
    align-items: center;
}
    .banner-support .container {
        position: relative;
        height: 300px;
        display: flex;
        padding-left:462px;
        flex-direction: column;
        justify-content: center;
    }
    .banner-support .container:before{
        content:'';
        position:absolute;
        left:0;
        bottom:0;
        display:block;
        width:434px;
        height:300px;
        background: 
  url(/branding/cloud4.jpg) center bottom no-repeat,
  url(/images/microsoft365/water_mark.png) center bottom no-repeat;
background-size: contain, contain;

    }
        .banner-support .container:after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width:106px;
            height:113px;
            background:url(/images/microsoft365/Certi.svg) top center no-repeat;
            background-size:contain;
        }
    .banner-support h3 {
        display: inline-block;
        width: 403px;
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 12px;
        background: linear-gradient(90deg, #000 0%, #E3272C 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .banner-support span {
        display: block;
        color: #091221;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 16px;
    }
    .banner-support i {
        display: block;
        color: #6C6C6C;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        margin-bottom: 16px;
    }
        .banner-support i b {
            font-weight: 600;
            color:#000;
        }
    .banner-support .btn {
        width:169px;
        border-radius: 12px;
        border: 2px solid #FFF;
        background: rgba(255, 255, 255, 0.85);
    }
        .banner-support .btn b {
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            background: linear-gradient(90deg, #000 0%, #E3272C 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
/*#endregion */
/*#region compare-table */
.compare-table {
    padding: 92px 0;
}

    .compare-table h2 {
        color: #091221;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
        margin-bottom: 8px;
    }

        .compare-table h2 + .desc {
            display: block;
            color: #091221;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            margin-bottom: 40px;
        }

.table-tabs {
    display: inline-block;
    width: 100%;
    position: relative;
}

    .table-tabs .tab {
        display: table;
        position: relative;
        width: 80%;
        border-radius: 12px 12px 0 0;
        border-top: 0.5px solid #D6D6D6;
        border-right: 0.5px solid #D6D6D6;
        border-left: 0.5px solid #D6D6D6;
        background: #F8F8F8;
        margin: 0;
        padding: 0;
    }

        .table-tabs .tab li:first-child {
            border-left: 0;
        }

        .table-tabs .tab li:last-child {
            border-right: 0;
        }

        .table-tabs .tab li {
            display: table-cell;
            vertical-align: middle;
            padding: 16px 20px;
            cursor: pointer;
            color: #091221;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            position: relative;
        }

            .table-tabs .tab li:not(:last-child,.active):before {
                content: '';
                display: block;
                top: 50%;
                transform: translateY(-50%);
                position: absolute;
                right: 0;
                width: 1px;
                height: 16px;
                background: #444;
            }

            .table-tabs .tab li:last-child,
            .table-tabs .tab li.near {
                border-right: none;
            }

            .table-tabs .tab li label {
                font-weight: 500;
            }

            .table-tabs .tab li.active {
                cursor: unset;
                border-radius: 12px 12px 0 0;
                background: #FFF;
            }

                .table-tabs .tab li.active:after {
                    width: 100%;
                    height: 2px;
                    background: #FFF;
                    display: block;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    content: '';
                    z-index: 10;
                }

                .table-tabs .tab li.active label {
                    background: linear-gradient(90deg, #4FAEFF -11.33%, #0070F5 109.54%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
.matbao-cancel-red,
.matbao-check-ok {
    width: 20px;
    height: 20px;
}
    .table-tabs .details {
        display: inline-block;
        width: 100%;
        position: relative;
    }

        .table-tabs .details .cont {
            display: none;
        }

            .table-tabs .details .cont.active {
                display: inline-block;
                width: 100%;
                position: relative;
            }

        .table-tabs .details .toggle-container {
            position: absolute;
            bottom: calc(100% + 8px);
            right: 0;
            margin: 0;
            width: 190px;
            height: 36px;
            padding: 4px;
            background: #EBEBEB;
        }

            .table-tabs .details .toggle-container:after {
                top: 4px;
                left: 4px;
                height: calc(100% - 8px);
            }

            .table-tabs .details .toggle-container.checked:after {
                left: calc(50% - 4px);
            }

            .table-tabs .details .toggle-container .toggle-option {
                padding: 4px 12px;
                font-size: 14px;
                font-weight: 600;
                line-height: 20px;
            }

.table tr td {
    color: #091221;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 24px 20px;
}

    .table tr td strong {
        color: #091221;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

.compare-table .table thead {
    box-shadow: .5px 0 0 #d6d6d6,-.5px 0 0 #d6d6d6, 0 -.5px 0 #d6d6d6, 0 .5px 0 #d6d6d6;
    border-radius: 20px;
}
    .compare-table .table thead.tr-fix {
        box-shadow: none;
    }
    .compare-table .table thead td {
        border-bottom: none;
    }
    .compare-table .table thead td:first-child{
        border-top-left-radius:20px;
        border-bottom-left-radius:20px;
    }
        .compare-table .table thead td:last-child {
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
.compare-table .table tbody tr td {
    border-bottom: none;
    box-shadow: 0 .5px 0 #d6d6d6;
}
.tr-treo.tr-fix tr:first-child {
    position: fixed;
    top: 20px;
    width: 1296px;
    max-width: 100%;
    padding: 0;
    z-index: 200;
    background: #FFF;
    border-radius: 20px;
    border: 1px solid #FFEFE5;
    box-shadow: 0px 8px 16px 0px rgba(255, 246, 240, 0.60);
}

.tr-treo tr + .tr-after td {
    height: 1px;
    padding: 0 !important;
    line-height: 0;
    border: none;
}

.tr-treo.tr-fix tr + .tr-after td {
    height: 212px;
}

.tr-treo tr td.col-head {
    width: 242px;
    padding: 16px 12px;
    box-shadow: -.5px 0 0 #d6d6d6;
}
.table-tabs .details .cont:first-child .tr-treo tr td.col-head {
    box-shadow: -.5px 0 0 #d6d6d6;
}

.tr-treo tr td:first-child,
.tr-treo + tbody tr td:first-child {
    width: 330px;
}
.tr-treo + tbody tr td:first-child {
    font-weight: 600;
    padding-left: 12px;
    padding-right:8px;
    padding-bottom: 24px !important;
}
.tr-treo + tbody tr td[colspan='5']:first-child {
    font-weight: 700;
    padding-left:20px;
    padding-top:32px;
    padding-bottom:16px !important;
    background:url(/images/microsoft365/up.svg) left 57% no-repeat;
    background-size:12px;
}
.tr-treo + tbody tr td[colspan='5'].hid:first-child {
    background: url(/images/microsoft365/down.svg) left 57% no-repeat;
    background-size: 12px;
}
    .tr-treo + tbody tr td:not([colspan='5']):first-child {
        padding-left: 44px;
        font-weight: 400;
    }
.tr-treo + tbody tr td.icon-1 {
    background: url(/images/microsoft365/M365.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-2 {
    background: url(/images/microsoft365/Cert.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-3 {
    background: url(/images/microsoft365/User.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-4 {
    background: url(/images/microsoft365/Outlook.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-5 {
    background: url(/images/microsoft365/Teams.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-6 {
    background: url(/images/microsoft365/OneDrive.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-7 {
    background: url(/images/microsoft365/SharePoint.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-8 {
    background: url(/images/microsoft365/Form.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-9 {
    background: url(/images/microsoft365/Planner.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-10 {
    background: url(/images/microsoft365/PowerAutomate.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-11 {
    background: url(/images/microsoft365/PowerApps.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-12 {
    background: url(/images/microsoft365/Defender.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-13 {
    background: url(/images/microsoft365/MicrosoftIntune.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-14 {
    background: url(/images/microsoft365/MicrosoftIntraId.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo + tbody tr td.icon-15 {
    background: url(/images/microsoft365/Windows11.svg) 12px 22px no-repeat;
    background-size: 24px;
}
.tr-treo tr td strong {
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.005em;
    color: #091221;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 12px;
}

.tr-treo tr td b {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.tr-treo tr td i {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    font-style: normal;
    margin-bottom: 12px;
}

.tr-treo tr td .btn {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #86C967 -11.33%, #59A835 109.54%);
    border: none;
    padding: 8px;
    width: 100%;
    margin: 0 auto;
    font-size:14px;
    line-height:20px;
    font-weight:600;
}
    .tr-treo tr td .btn:hover {
        color: #FFF;
        background: linear-gradient(90deg, #aadf92 -11.33%, #59A835 109.54%);
    }
.mbtooltip-normal {
    background: url(/images/microsoft365/tooltip.svg) center no-repeat;
    position: relative;
    top: 4px;
    width: 16px;
    height: 16px;
}

.tr-treo tr td:first-child,
.tr-treo tr td:not(:first-child),
.table tr td:not(:first-child) {
    text-align: center;
}

#div_tab_4 .table tr td:not(:first-child) {
    text-align: left;
    padding-left: 0;
}

#div_tab_4 .table tbody tr td:last-child {
    text-align: center;
}

.table tr td {
    padding-bottom: 16px !important;
}

.table tr:not(.bg-hide):last-child td {
    border: none;
    box-shadow: none;
    background: none;
}

.table tr td:first-child,
.table + tbody tr td:first-child {
    text-align: left;
    padding-left: 0;
}
.tr-treo + tbody tr:last-child td {
    box-shadow: none;
}

.matbao-check-ok {
    background-image: url(/images/microsoft365/check.svg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
}

.matbao-cancel-red {
    background-image: url(/images/microsoft365/cancel.svg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
}

#change_bg td {
    padding: 16px 0;
}

.bg-hide td {
    position: relative;
}

    .bg-hide td:before {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 137px;
        content: ' ';
        background: linear-gradient(to bottom, #ffffff00, #ffffff);
    }

.hide-more {
    display: none;
}

.show-more {
    display: block;
    border-radius: 8px;
    color: #8C8C8C;
    padding-left: 28px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.5062500834465027px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: url(/images/microsoft365/up.svg) left center no-repeat;
    background-size: 20px;
}

    .show-more.open {
        background: url(/images/microsoft365/down.svg) left center no-repeat;
        background-size: 20px;
    }

.btn-xemgoi {
    border-radius: 8px;
    background: linear-gradient(90deg, #86C967 -11.33%, #59A835 109.54%);
    color: #FFF !important;
    padding: 12px 16px !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}
/*#endregion */
@media (max-width: 1400px){
    .cetificate-ms365 .cont-area{
        padding-right:140px;
    }
    .banner-gan .container,
    .banner-support .container {
        background-size: contain;
    }
}
@media (max-width: 1200px){
    .wp-testimonial .container {
        flex-direction: column;
    }
    /*#region features */
    .features .row [class*='col-md-'] {
        background-size: contain;
        padding: 12px;
        height: 308px;
    }

    .features .row .feature-7 {
        background-size: cover;
        background-position: center;
    }

    .features .row .col-md-4 {
        width: calc(33.1% - 8.6px);
    }
    /*#endregion */
    /*#region banner */
    .banner-gan h3 {
        max-width: calc(100% - 300px);
        font-size: 28px;
        line-height: 32px;
    }
    .banner-gan span {
        max-width: calc(100% - 300px);
        font-size: 16px;
        line-height: 20px;
    }
    .banner-gan .container:after {
        width: 300px;
    }
    /*#endregion */
}
@media (max-width: 992px) {
    .super-menu, .after-fix, .super-fix {
        display: none;
    }
    /*#region cetificate-365 */
    .cetificate-ms365 {
        padding: 92px 0 8px;
        position: relative;
    }

        .cetificate-ms365:before {
            content: '';
            display: block;
            width: 150vw;
            height: 150vw;
            position: absolute;
            top: 44px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: rgba(254, 249, 243, 0.30);
            filter: blur(56px);
            z-index: 5;
        }

        .cetificate-ms365 .cont-area {
            width: 100%;
            padding: 32px 16px 184px;
            background: url(/images/microsoft365/paper_mobi.png) right bottom no-repeat, url(/images/microsoft365/mobi-chung-nhan-mcs_email-365_v2.0.png) center no-repeat;
            background-size: 264px 196px, cover;
            position: relative;
            z-index: 10;
        }

            .cetificate-ms365 .cont-area h2 {
                padding-top: 60px;
                background: url(/images/microsoft365/top-microsoft.svg) top left no-repeat;
                background-size: 88px 40px;
                font-size: 16px;
                line-height: 24px;
            }

            .cetificate-ms365 .cont-area .desc {
                font-size: 12px;
                line-height: 16px;
                margin-bottom: 20px;
            }

            .cetificate-ms365 .cont-area .btn,
            .cetificate-ms365 .cont-area .lnk {
                font-size: 12px;
                line-height: 16px;
            }
    /*#endregion */
    /*#region top-cover */
    .top-cover .container {
        display: block;
    }

    .content-left {
        padding-top: 50px;
        padding-bottom: 0;
    }

    .content-left,
    .content-right {
        max-width: 100%;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

        .content-left h3 b {
            display: block;
            color: #000;
            margin-bottom: 4px;
        }

    .content-right {
        width: 100%;
        position: relative;
    }

        .content-right:before {
            content: '';
            display: block;
            width: 24%;
            height: 20px;
            background: linear-gradient(to bottom, rgba(223, 245, 253, 1) 0%, rgba(223, 245, 253, 0.98) 10%, rgba(223, 245, 253, 0.95) 20%, rgba(223, 245, 253, 0.8) 40%, rgba(223, 245, 253, 0.6) 60%, rgba(223, 245, 253, 0.3) 80%, rgba(223, 245, 253, 0.1) 90%, rgba(223, 245, 253, 0) 100%);
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
        }

        .content-right img {
            max-width: 100vw;
        }
    /*#endregion */
    /*#region testimonial */
    .wp-testimonial {
        padding: 52px 0 100px;
    }

    .review-grid {
        display: flex;
        flex-direction: column;
    }

    .boder-hover {
        height: auto;
        padding: 52px 12px 12px;
    }

    .reviewer {
        position: absolute;
        top: 12px;
        width: calc(100% - 24px);
    }

    .reviewer-avatar {
        width: 24px;
        height: 24px;
    }

    .reviewer-info {
        flex-direction: row;
        width: calc(100% - 36px);
        position: relative;
    }

    .stars {
        width: 80px;
        height: 16px;
        background-size: 16px;
        position: absolute;
        right: 0;
        top: 4px;
    }

    .reviewer-name {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
    }

    .review-text {
        font-size: 12px;
        line-height: 16px;
    }
    /*#endregion */
    /*#region price list */
    .price-list .slick-list:before,
    .price-list .slick-list:after {
        display: none;
    }

    .service-main {
        padding: 100px 0;
    }

        .service-main h2 {
            padding-left: 16px;
            padding-right: 16px;
        }

            .service-main h2 + .desc {
                padding-left: 16px;
                padding-right: 16px;
                font-size: 14px;
                line-height: 20px;
                width: 300px;
                margin: 0 auto 28px;
            }

    .price-list .item-list .slick-slide {
        margin-right: 12px;
    }

    .price-list .item-list .item .title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .price-list .item-list .item .desc {
        font-size: 12px;
        line-height: 16px;
        margin-top: 8px;
        margin-bottom: 16px;
        min-height: 48px;
    }

    .price-list #item_2.item-list .item .desc {
        min-height: 32px;
    }

        .price-list .item-list .item .brief-area .brief {
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 20px;
        }

    .price-list .slick-list {
        padding-bottom: 0 !important;
    }

    .price-list .item-list .item {
        width: 300px !important;
        min-height: 600px;
        margin-bottom: 76px;
    }

        .price-list .item-list .item .compare {
            position: absolute;
            bottom: -76px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
        }

        .price-list .item-list .item .price {
            margin-bottom: 20px;
        }

            .price-list .item-list .item .price .unit {
                font-size: 12px;
                line-height: 16px;
            }

    .gray-note {
        font-size: 14px;
        line-height: 20px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 72px;
    }

    .package-include .slick-list {
        padding-top: 0 !important;
        height: 52px;
    }

    .package-include .check-list:not(:last-child) {
        margin-bottom: 16px;
    }

    .package-include .check-list .slick-slide {
        margin-right: 16px;
        width: 280px !important;
    }

    .package-include .check-list li {
        white-space: nowrap;
        background: #FFF;
        padding-left: 12px;
    }

        .package-include .check-list li:before {
            width: 20px;
            height: 20px;
            content: '';
            display: inline-block;
            margin-right: 8px;
            background: url(/images/microsoft365/check.svg) center no-repeat;
            position: relative;
            top: 4px;
        }

    #slider_price .slick-prev {
        left: 0;
    }

    #slider_price .slick-next {
        right: 0;
    }
    /*#endregion */
    /*#region features */
    .features {
        align-items: center;
        justify-content: center;
    }

        .features .row .col-md-8,
        .features .row .col-md-6,
        .features .row .col-md-4 {
            width: calc(50% - 8px);
        }

        .features .row [class*='col-md-'] strong,
        .features .row [class*='col-md-'] strong b {
            font-size: 20px;
            line-height: 28px;
        }

        .features .row .feature-6 {
            background-size: 120%;
            background-position: bottom left;
        }
    /*#endregion */
}
@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .only-pc {
        display: none;
    }

    .only-mobi {
        display: block !important;
    }

        .only-mobi.check-list {
            display: flex !important;
        }
    /*#region top-cover */
    .content-left > b {
        font-weight:500;
    }
    .content-left .buttons .btn + span,
    .content-left .buttons .btn + span + .lnk {
        display: none;
    }

    .top-cover {
        overflow: hidden;
    }

    .content-left h1 {
        font-size: 32px;
        line-height: 40px;
        font-weight: 700;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .content-left .desc {
        margin-bottom: 16px;
    }
    .content-left h3 strong{
        margin-left:0;
    }
    .content-left .buttons {
        margin-top: 20px;
    }
    .content-left .buttons .btn {
        width: 100%;
    }
    /*#endregion */
    /*#region testimonial */
    .left-panel {
        padding: 16px;
        flex: 0 0 250px;
    }

        .left-panel .subtitle {
            font-weight: 500;
            margin-bottom: 0;
        }

        .left-panel .footnote {
            display: none;
        }

    .main-card {
        height: 200px;
    }

    .image-placeholder {
        margin-bottom: -110px;
    }

        .image-placeholder img {
            width: 150%;
        }

    .wp-testimonial {
        padding: 60px 0;
    }
    .certificate-popup .cont img {
        max-width: calc(100vw - 20px);
    }
    .review-grid {
        display: flex;
        flex-direction: column;
    }

    .boder-hover {
        height: auto;
        padding: 52px 12px 12px;
    }

    .reviewer {
        position: absolute;
        top: 12px;
        width: calc(100% - 24px);
    }

    .reviewer-avatar {
        width: 28px;
        height: 28px;
        margin-right:8px;
    }

    .reviewer-info {
        flex-direction: row;
        width: calc(100% - 36px);
        position: relative;
    }

    .stars {
        width: 80px;
        height: 16px;
        background-size: 16px;
        position: absolute;
        right: 0;
        top: 4px;
    }

    .reviewer-name {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
    }

    .review-text {
        font-size: 12px;
        line-height: 16px;
    }
    /*#endregion */
    /*#region price list */
    .service-wordpress {
        padding: 100px 0;
    }

        .service-wordpress h2 {
            padding-left: 16px;
            padding-right: 16px;
        }

            .service-wordpress h2 + .desc {
                padding-left: 16px;
                padding-right: 16px;
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 28px;
            }

    .price-list .item-list .slick-slide {
        margin-right: 12px;
    }

    .price-list .item-list .item .title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .price-list .item-list .item .desc {
        font-size: 12px;
        line-height: 16px;
        margin-top: 8px;
        margin-bottom: 24px;
    }

    .price-list .item-list .item .brief-area {
        height: 320px;
        min-height: auto;
        overflow: hidden;
    }
        .price-list .item-list .item .brief-area.show {
            height: auto;
        }

        .price-list .item-list .item .brief-area .brief {
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 20px;
        }
    .price-list .item-list .copilot-area{
        margin-top:32px;
        margin-bottom:4px;
    }
    .toggle-container {
        width: 300px;
        height: 52px;
        padding: 4px;
        margin-bottom: 44px;
    }

    .toggle-option {
        padding: 12px;
        line-height: 20px;
    }

    .toggle-container:after {
        top: 4px;
        left: 4px;
        height: calc(100% - 8px);
    }

    .toggle-container.checked:after {
        left: calc(50% - 4px);
    }

    .price-list .slick-list {
        padding-bottom: 0 !important;
    }

    .price-list .item-list .item {
        width: 300px !important;
        min-height: 600px;
        margin-bottom: 36px;
    }

        .price-list .item-list .item .compare {
            position: absolute;
            bottom: -126px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
        }
    #slider_price .slick-dots li:first-child, #slider_price .slick-dots li:last-child{
        display:inline-block;
    }
    .price-list .slick-dots {
        margin-bottom: 20px !important;
    }
    .price-list .item-list .item .price {
        margin-bottom: 20px;
    }

            .price-list .item-list .item .price .unit {
                font-size: 14px;
                font-weight:600;
                line-height: 20px;
            }
        .price-list .item-list .item .price b {
            color: #091221;
            font-size: 36px;
            font-weight: 700;
            line-height: 40px;
        }
        .price-list .item-list .item .price b {
            margin-bottom: 8px;
            display: inline;
        }
        .price-list .item-list .item .brief-area .title{
            margin-bottom:12px;
        }
    .price-list .item-list:not(#lst_result_select){
        margin-bottom:8px;
    }
    .gray-note {
        font-size: 12px;
        line-height: 16px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 92px;
    }
            .gray-note .compare {
                display: block;
                font-size: 12px;
                font-weight: 600;
                line-height: 16px;
                text-align: center;
                color: #6C6C6C;
                margin-top:32px;
                padding-bottom: 32px;
                background: url(/images/microsoft365/Chevron.svg) center bottom no-repeat;
                background-size: 24px;
                cursor: pointer;
            }
    .price-list .toggle {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 96px;
        padding: 4px 8px;
        color: #196CDF;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
        background: url(/images/microsoft365/) right center no-repeat;
        background-size: 16px;
        cursor: pointer;
    }

    .package-include .check-list {
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
        flex-direction: column;
    }

        .package-include .check-list li {
            width: 100%;
            text-align: left;
        }

    .package-include .slick-list {
        padding-top: 0 !important;
        height: 52px;
    }

    .package-include .check-list:not(:last-child) {
        margin-bottom: 16px;
    }

    .package-include .check-list .slick-slide {
        margin-right: 16px;
        width: 280px !important;
    }
    .price-list .item-list .item .brief-area .brief.icon img{
        width:26px;
        height:26px;
        margin-bottom:8px;
    }
    .package-include .check-list li {
        white-space: nowrap;
        background: #FFF;
        padding-left: 12px;
        border-radius: 16px;
    }

        .package-include .check-list li:before {
            width: 20px;
            height: 20px;
            content: '';
            display: inline-block;
            margin-right: 8px;
            background: url(/images/microsoft365/check.svg) center no-repeat;
            position: relative;
            top: 4px;
        }
    .price-list .item-list .item .addion {
        font-size: 12px;
        line-height: 16px;
        padding: 8px 8px 8px 60px;
        margin-bottom:24px;
    }
    .price-list #item_2.item-list .item .title{
        margin-bottom:12px;
        font-size:18px;
    }
    .price-list .item-list .item .addion.copilot {
        background: url(/images/microsoft365/Copilot_pack.svg) 8px no-repeat, #FFFAF7;
        background-size: 44px;
    }

        .price-list .item-list .item .addion.teams {
            background: url(/images/microsoft365/Teams_pack.svg) 8px no-repeat, #F7F8FF;
            background-size: 44px;
        }

        .price-list .item-list .item .addion.shell {
            background: url(/images/microsoft365/Defender_pack.svg) 8px no-repeat, #F7FDFF;
            background-size: 44px;
        }
    #slider_price .slick-prev {
        left: 0;
    }

    #slider_price .slick-next {
        right: 0;
    }
    .price-list .item-list#item_2:not(.hidden) + .gray-note {
        margin-top: -40px;
    }
    .package-include .tab-title{
        font-size:32px;
        padding:0 16px;
    }
    /*#endregion */
    /*#region features */
    .features {
        padding: 80px 0;
    }

        .features.active .container {
            padding-left: 16px;
            padding-right: 16px;
        }
        .features h2 {
            font-size: 32px;
            line-height: 40px;
        }

        .features .row [class*='col-md-'] {
            width: 100%;
            height: 400px;
        }
            .features .row [class*='col-md-'].show:not(.cen){
                padding:20px;
            }
            features .row [class*='col-md-']:nth-last-child(1),
            .features .row [class*='col-md-']:nth-last-child(2),
            .features .row [class*='col-md-']:nth-last-child(3),
            .features .row [class*='col-md-']:nth-last-child(4) {
                height: 310px;
            }
            .features .row [class*='col-md-'].feature_4{
                background-size:100%;
                background-position:bottom;
            }
            .features .row [class*='col-md-'].feature_7,
            .features .row [class*='col-md-'].feature_5 {
                background-size: calc(100% - 16px);
            }
                .features .row .cen {
                    padding-bottom: 70px;
                }
            .features .row .cen strong{
                margin-bottom:12px;
            }
            .features .row .col-md-6 {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                background-position: center -52px;
            }

        .features .row [class*='col-md-'] b {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 12px;
        }

        .features .row [class*='col-md-'] span {
            font-size: 12px;
            line-height: 16px;
            color: #8C8C8C;
        }

        .features .row .feature-6 {
            height: 208px;
            padding-top: 50px;
        }

            .features .row .feature-6 strong,
            .features .row .feature-6 strong b {
                font-size: 16px;
                line-height: 24px;
            }
    /*#endregion */
    /*#region banner */
    .banner-gan {
        height: auto;
        background: url(/images/microsoft365/Banner_Orange_mb.png) left center;
        background-size: cover;
    }
    .banner-gan .container {
        padding-bottom: 176px;
        min-height: 300px;
    }
        .banner-gan .container:after {
            height: 169px;
            background: url(/branding/cloud3.jpg) center bottom no-repeat;
            background-size: contain;
        }
        .banner-gan h3 {
            max-width: 100%;
            font-size: 24px;
            line-height: 32px;
            margin-bottom: 12px;
            font-weight: 700;
        }

    .banner-gan span {
        max-width: 100%;
        font-size: 14px;
        line-height: 20px;
        font-weight:500;
        margin-bottom:24px;
    }
        .banner-gan .btn {
            font-size: 20px;
            line-height: 28px;
            font-weight: 600;
            width:100%;
        }
    .banner-support{
        position:relative;
        overflow:hidden;
    }
        .banner-support .container{
            padding-top:48px;
            padding-bottom:128px;
            padding-left:20px;
            display:block;
            height:auto;
        }
            .banner-support .container:before {
                bottom: 0;
                left: auto;
                right: 0;
                height: 400px;
                background-size: contain;
                background: url(/branding/cloud4.jpg) right bottom no-repeat, url(/images/microsoft365/MS365-bg.png) center top no-repeat;
                background-size: 377px, cover;
            }
        .banner-support h3 {
            position:relative;
            width: 234px;
            font-size: 28px;
            line-height: 36px;
            font-weight: 700;
            z-index:10;
        }
        .banner-support span {
            position: relative;
            width: 234px;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            z-index: 10;
        }
        .banner-support .btn {
            position: relative;
            width: 174px;
            padding: 16px;
            z-index: 10;
        }
        .banner-support i {
            position: relative;
            z-index: 10;
            font-size: 12px;
            line-height: 16px;
            margin-bottom:20px;
        }
            .banner-support .btn b {
                font-size: 14px;
                line-height: 20px;
            }
        .banner-support .container:after {
            width: 60px;
            height: 60px;
            right: 20px;
        }
        /*#endregion */
        /*#region compare table */
        .compare-table {
            padding: 100px 0 52px;
            position: relative;
        }
        .compare-table:before {
            content: '';
            display: block;
            width: 150vw;
            height: 150vw;
            position: absolute;
            top:44px;
            left:50%;
            transform:translateX(-50%);
            border-radius: 50%;
            background: rgba(254, 249, 243, 0.50);
            filter: blur(56px);
            z-index: 5;
        }

        .compare-table .container {
            padding: 0;
            position: relative;
            z-index: 300000000;
        }
        .compare-table .container .row{
            margin-left:0;
            margin-right:0;
            width:100vw;
        }
        .compare-table h2 {
            font-size: 32px;
            line-height: 40px;
        }

            .compare-table h2 + .desc {
                width: 238px;
                margin: 0 auto 24px;
            }
            .compare-table .table tbody tr td {
                border-block: solid .5px #d6d6d6;
                font-weight:400;
            }
            .table-tabs .details .toggle-container {
                position: relative;
                top: auto;
                right: auto;
                bottom: auto;
                margin-bottom: 16px;
            }

    .tr-treo tr td.col-head, .compare-table .table thead {
        border: none;
        border-radius:0;
    }

    .table-tabs .select-tab {
        width: calc(100% - 18px);
        height: 44px;
        display: block;
        padding: 12px 8px;
        margin-top: 8px;
        margin-left: 9px;
        margin-bottom: 16px;
        border-radius: 8px;
        border: 1px solid #D6D6D6;
        background: url(/images/microsoft365/up.svg) calc(100% - 16px) center no-repeat, #FFF;
        background-size: 20px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        position: relative;
    }

        .table-tabs .select-tab:before {
            position: absolute;
            top: -8px;
            left: -8px;
            width: calc(100% + 18px);
            height: calc(100% + 16px);
            content: '';
            z-index: -1;
            display: block;
            border: solid 1px #D6D6D6;
            border-radius: 12px;
        }

        .table-tabs .select-tab[data-tab='1']:before {
            height: calc(100% + 52px + 16px);
        }

    .table-tabs.bg:after {
        background: #0000007a;
        content: '';
        width: 100%;
        height: 100%;
        z-index: 1000000000;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
    }

    .table-tabs .tab {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 16px 16px 24px;
        z-index: 2000000000;
        margin-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: #FFF;
    }

        .table-tabs .tab li {
            display: block;
            border-right: 0;
            text-align: left;
            padding: 0;
            margin-bottom: 24px;
            color: #000;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
        }

            .table-tabs .tab li.active {
                color: #000;
                background: url(/images/microsoft365/check.svg) right top no-repeat, #FFF;
            }

            .table-tabs .tab li:last-child {
                margin-bottom: 0;
            }

            .table-tabs .tab li.subject {
                color: #000;
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                position: relative;
                padding: 0;
                padding-bottom: 12px;
                border-bottom: solid 1px #E0E0E0;
            }

                .table-tabs .tab li.subject .close {
                    text-decoration: none;
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    background: url(/images/shared/Close.svg) center no-repeat;
                    background-size: contain;
                }

    .table-tabs .details .toggle-container {
        border-radius: 8px;
        width: calc(100% - 18px);
        max-width: 350px;
        height: 44px;
        margin-left: 9px;
        margin-top: -8px;
    }

    .table-tabs .tab li:not(:last-child,.active):before {
        display: none;
    }

    .table-tabs .details .toggle-container:after {
        border-radius: 6px;
    }

    .table-tabs .details .toggle-container .toggle-option {
        padding: 8px;
    }

    .table-tabs .details .cont:first-child .tr-treo tr td.col-head {
        border-left: none;
    }
    .feature-table{
        background:#FFF;
        border-radius:20px 20px 0 0;
        overflow:hidden;
    }
    .tr-treo.tr-fix tr:first-child {
        top: 0;
        width: 100%;
        z-index: 2000000000;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .tr-treo.tr-fix tr + .tr-after td {
        height: 0;
    }

    .tr-treo tr:first-child td:first-child {
        display: none;
    }
    .tr-treo tr td.col-head:nth-child(2) {
        padding-left: 16px !important;
    }
    .tr-treo tr td.col-head:last-child {
        padding-right: 16px !important;
    }
    .tr-treo + tbody tr {
        position: relative;
    }
        .tr-treo + tbody tr td:nth-child(2) .title{
            padding-top:20px !important;
        }
        .tr-treo + tbody tr td:not(:first-child) {
            width: 25%;
            padding-top: 56px;
            padding-bottom: 20px !important;
        }

        .tr-treo + tbody tr td:not([colspan="5"]):first-child {
            display: none;
        }
        .tr-treo + tbody tr td[colspan='5']:first-child {
            padding: 16px 16px 16px 36px;
            background: url(/images/microsoft365/up.svg) 16px 50% no-repeat, #F6F6F7;
            background-size: 12px;
        }
        .tr-treo + tbody tr td[colspan='5'].hid:first-child {
            background: url(/images/microsoft365/down.svg) 16px 50% no-repeat, #F6F6F7;
            background-size: 12px;
        }
        .tr-treo + tbody tr td:nth-child(2) .title {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            padding: 16px 0 16px 44px;
            padding-bottom: 0 !important;
            border-bottom: 0;
            width: 100% !important;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
        }
            .tr-treo + tbody tr td:nth-child(2) .title.icon-1 {
                background: url(/images/microsoft365/M365.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-2 {
                background: url(/images/microsoft365/Cert.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-3 {
                background: url(/images/microsoft365/User.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-4 {
                background: url(/images/microsoft365/Outlook.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-5 {
                background: url(/images/microsoft365/Teams.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-6 {
                background: url(/images/microsoft365/OneDrive.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-7 {
                background: url(/images/microsoft365/SharePoint.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-8 {
                background: url(/images/microsoft365/Form.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-9 {
                background: url(/images/microsoft365/Planner.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-10 {
                background: url(/images/microsoft365/PowerAutomate.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-11 {
                background: url(/images/microsoft365/PowerApps.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-12 {
                background: url(/images/microsoft365/Defender.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-13 {
                background: url(/images/microsoft365/MicrosoftIntune.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-14 {
                background: url(/images/microsoft365/MicrosoftIntraId.svg) 16px 20px no-repeat;
                background-size: 20px;
            }

            .tr-treo + tbody tr td:nth-child(2) .title.icon-15 {
                background: url(/images/microsoft365/Windows11.svg) 16px 20px no-repeat;
                background-size: 20px;
            }
    .table tr:not(.bg-hide):last-child td {
        border-bottom: solid .5px #d6d6d6;
    }
    .panel-collapse .panel-body{
        padding-right:0;
    }
    .tr-treo tr td.col-head {
        padding: 16px 4px 32px !important;
        box-shadow: none;
    }

    .tr-treo + tbody tr td {
        padding: 12px 8px 8px;
    }

    .tr-treo tr td strong {
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .tr-treo tr td i {
        color: #6C6C6C;
        margin-bottom: 8px;
    }

    .tr-treo tr td .btn {
        width: auto;
        padding: 8px;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
    }

    .tr-treo tr td b, .table tr td, .table tr td strong {
        color: #091221;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }
    .tr-treo tr td b .only-mobi{
        display:inline-block !important;
    }
    .show-more.more-fix {
        position: fixed;
        bottom: 24px;
        padding: 12px 12px 12px 36px;
        background: url(/images/microsoft365/less.svg) 12px center no-repeat, #FFF;
        background-size: 20px;
        display: inline-block;
        border-radius: 24px;
        border: 1px solid #D6D6D6;
        box-shadow: 0 8px 16px 0 #EDF2FE;
    }

    .show-more:hover {
        color: #8C8C8C;
    }
    .scroll-overflow.fix-width{
        padding:0;

    }
    /*#endregion */
    /*#region faq */
    .faqs {
        padding: 60px 0;
    }

        .faqs h2 {
            font-size: 32px;
            line-height: 40px;
            margin-bottom: 24px;
        }

    .panel-default > .panel-heading span {
        width: calc(100% - 32px);
        font-size:14px;
        line-height:20px;
    }
    .panel-heading.collapsed:before {
        width: 20px;
        height: 20px;
    }
    .panel-default > .panel-heading.active span {
        font-size: 14px;
        line-height: 20px;
    }
    /*#endregion */
}