﻿body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

header {
    background: white;
    position: unset;
}

.menu-bottom .line-41 {
    height: 1px;
    background: #636669;
}

.body-top-left .line {
	z-index:unset;
}

.ms-rteTable-default, .ms-rteTable-default > tbody > tr > td, .ms-rteTable-default > tbody > tr > th, td.ms-rteTable-default, th.ms-rteTable-default, .ms-rtetablecells {
	border: unset;
}

tr {
	display: flex;
    gap: 32px;
}

td {
	padding: 0px!important;
}

.ms-rteTable-default {
	color: var(--Neutral-400, #B0B2B5);
	text-align: justify;
	font-family: Calibri;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.08px;
	flex: 1 0 0;
}

.ExternalClass755E8DDB3A2C42019A38647D39D9BFD8 p{
	display: none;
}

/*------------------------background----------------------*/
.background {
    display: flex;
    padding: 48px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100vw;
    background: var(--Neutral-800, #272727);
}

.content-background-top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 32px;
}

.in-content-background-top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.content-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 871px;
}

.title-background-top {
    color: var(--Neutral-300, #DFE1E1);
    text-align: center;
    font-family: Roboto;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 1.12px;
}

.highlight {
    background: linear-gradient(96deg, #F15A22 32.96%, #FDB913 100.17%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Roboto;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 1.12px;
}

.content-background {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.content-background-mobile {
	display: none;
}

.noi-dung-gioi-thieu {
	color: var(--Neutral-400, #B0B2B5);
	text-align: justify;
	font-family: Calibri;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.08px;
}

.text {
    color: var(--Neutral-400, #B0B2B5);
    text-align: justify;
    font-family: Calibri;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.08px;
    flex: 1 0 0;
}

.img-background {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.background-img {
	width:100vw;
	height:auto;
}

.item-img {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.center {
    justify-content: center;
}

.img-bottom-background {
    display: flex;
    width: 290px;
    height: 290px;
    padding: 20.622px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
}

.height {
    height: 200px;
}

.radius {
    border-radius: 24px;
}

.big-img {
    display: flex;
    width: 450px;
    height: 450px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
}

/*--------------------------------------body-------------------------------------*/

.body {
    display: flex;
    padding: 48px 0px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0px;
}

.body-bottom {
    gap: 73px;
}

.content-body-bottom-left {
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.faq-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.faq-item:nth-child(2),
.faq-item:nth-child(3) {
    gap: 24px;
}

.box-content-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.divider {
    height: 1px;
    width: 617px;
    background: var(--Neutral-200, #D9D9D9);
}

.in-box-content-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.title-in-box {
    color: var(--Neutral-800, #272727);
    font-family: Calibri;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.09px;
}

.content-in-box {
    color: var(--Neutral-700, #4A4D4F);
    font-family: Calibri;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.08px;
    display: none;
    text-align: justify;
}

.icon-wrap {
    display: flex;
    padding-top: 2px;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
}

.icon-wrap svg {
    transition: transform 0.3s;
}

.minus-icon {
    display: none;
}

.content-img-right {
    display: flex;
    width: 50%;
    height: 472px;
    padding: 39.253px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 38.069px;
}

/*------------------------------our-services------------------------*/

.our-services {
    display: flex;
    padding: 48px 0px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100vw;
    background: var(--Neutral-100, #EFF0F0);
}

.our-services-bottom {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.item-our-services {
    width: 48.6%;
}

.box-content-img {
    position: relative;
    overflow: hidden;
    height: 390px;
    border-radius: 20px;
    background: #E9E9E9;
    margin-bottom: 8px;
}

.img-our-services {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 32px;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 20px;
    transition: transform 0.5s ease-out;
}

.in-box-content-img {
    color: var(--Gray-500, #667085);
    font-family: Calibri;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.09px;
    max-height: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 32px 51px 20px 51px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #E9E9E9;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    overflow: hidden;
    text-align: justify;
}

.in-box-content-img.show {
    max-height: 100%;
    opacity: 1;
    font-size:16px;
    overflow:auto;
}

.toggle-content {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.toggle-content.active {
    transform: rotate(45deg);
}

.title-img-our-services {
    color: var(--Neutral-800, #272727);
    font-family: Calibri;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/*-----------------------mobile----------------------*/
@media screen and (max-width: 768px) {
    body {
        background: var(--Neutral-100, #EFF0F0);
    }

    header {
        position: unset;
        background: #272727;
        backdrop-filter: blur(18.70967674255371px);
        -webkit-backdrop-filter: blur(18.70967674255371px);
    }

    .safe-area {
        padding: 0px;
        width:100%;
    }

    .menu {
        padding: 0px 16px;
    }

    .box-phone {
        background: none;
        padding: 0px;
    }

    .number-menu {
        display: none;
    }

    .box-title-background-top {
        display: none;
    }

    .icon-menu-deck {
        display: none;
    }

    .icon-menu-mobile {
        display: block;
    }

    .box-footer-1 {
        margin-bottom: 16px;
    }

    .box-footer-2 {
        margin-bottom: 16px;
    }

    .column-footer {
        margin-bottom: 16px;
    }

    .text-in-box {
        display: none;
    }

    .box-footer {
        padding: 0 16px;
    }

    .box-icon-footer .in-box-icon-footer {
        display: none;
    }

    .column-footer:nth-child(4) {
        display: flex;
    }

    .menu-decktop {
        padding: 0px;
    }

    .menu-box {
        width: 100%;
        gap: 8px;
        padding: 32px 16px;
    }

    .menu-icon-top {
        width: 100%;
        justify-content: space-between;
    }

    .in-menu-icon-top {
        width: 100%;
    }

    .menu-bottom {
        gap: 6px;
    }

    .box-content-menu {
        gap: 6px;
    }
}

/*---------------------------background------------------*/
@media screen and (max-width: 768px) {
    .background {
        padding: 0;
        width:100vw;
    }
    
    .background-img {
		width: 170vw;
	}

    .content-background-top {
        margin-bottom: 40px;
    }

    .in-content-background-top {
        display: unset;
        padding: 0 16px;
    }
    
    .content-bottom {
        width: 100%;
        padding-top: 24px;
    }

    .title-background-top {
        text-align: unset;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.96px;
    }

    .highlight {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.96px;
    }

    .content-background {
        display:none;
        text-align: justify;
    }
    
    .content-background-mobile {
		display:block;
	}

    .big-img {
        width: 195.916px !important;
        height: 195.916px !important;
        padding: 13.932px !important;
    }

    .img-background {
        gap: 13.932px;
        margin-bottom: 24px;
    }

    .item-img {
        gap: 13.932px;
    }

    .img-bottom-background {
        width: 126.257px;
        height: 126.257px;
        padding: 8.978px;
    }

    .height {
        height: 87.074px;
    }
}

/*--------------------body-------------------*/
@media screen and (max-width: 768px) {
    .body {
        padding: 24px 0;
    }

    .body-bottom {
        display: unset;
    }

    .body-top-left {
        padding: 0 16px;
        gap:8px;
    }
    
    .img-our-services {
		padding: 17.59px;
	}
    
    .box-content-img {
		height: 214.375px;
	}
    
    .toggle-content {
		width: 32px;
		height: 32px;
		z-index:8;
	}

    .content-body-bottom-left {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 24px;
    }

    .content-in-box {
        width: 100%;
    }

    .divider {
        width: 100%;
    }

    .content-img-right {
        width: 100%;
    }
}

/*------------------------our-services-------------------------*/
@media screen and (max-width: 768px) {
    .our-services {
        padding: 16px 0;
    }

    .item-our-services {
        width: 100%;
        padding:0 17.59px;
    }
    
    .our-services-bottom {
	 	gap: 16px;
	}
    

    .title-img-our-services {
        padding: 0 16px;
    }
        .in-box-content-img.show {
        max-height:80%!important;
    }
}
