body{
   font-family: 'Be Vietnam Pro',Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5 !important;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.5;
}
p{
    font-size: 16px;
}
/* title  */
.title h2{
    margin-bottom: 20px;
    font-size: 36px;
}
.title-small h2{
    font-size: 28px;
}

.title-small.has-border h2::after{
    width: 150px;
    height: 1px;
    background: currentColor;
    display: block;
    margin: 5px auto;
    content: "";
}

@media (max-width: 991px) {
    .title h2{
        font-size: 30px;
    }
    .title-small h2{
       font-size: 25px;
    }

}
@media (max-width: 768px) {
    .title h2{
        font-size: 25px;
    }
    .title-small h2{
       font-size: 23px;
    }

}

/* btn  */
.btn-dk {
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 100px;
    font-size: 15px;
    padding: 12px 32px;
    -webkit-box-pack: center;
    justify-content: center;
    align-self: flex-start;
    border: none;
    background-color: #d42027;
    margin-bottom: 16px;
    -webkit-transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
    transition: 300ms all cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-dk:hover { 
   color: #fff;
   box-shadow: 0 12px 24px -6px rgba(55, 118, 255, 0.2); -webkit-transform: translateY(-1px); transform: translateY(-1px); 
}
/* breadcrumbs */

.breadcrumb-ss{
   padding: 60px 0;
}
.breadcrumb-ss a{
   color: #fff;
}
.breadcrumb-ss p{
    text-shadow: 1px 1px 3px#000;
    margin-bottom: 0;
}
.breadcrumb-ss h1{
   font-size: 40px;
   margin-bottom: 0;
}

/* Giới thiệu chung */
.about_main{
   padding: 100px 0;
}

@media (max-width: 768px) {
   .about_main{
     padding: 40px 0;
   }
}

/* about_ser */
.about_ser{
    padding: 100px 0;
    position: relative;
}
@supports not (-webkit-touch-callout: none) {
    .about_ser{
        background-attachment: fixed !important;
    }
}
.about_ser::before{
    content: "";
    background: url(/wp-content/themes/hazo/assets/images/bg-shape.png) center /cover no-repeat;
    position: absolute;

    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.about_ser-desc img{
    display: block;
    margin: 0 auto;

}
@media (max-width: 991px) {
    .about_ser::before{
        display: none;
    }
}
@media (max-width: 768px) {
   .about_ser{
     padding: 40px 0;
   }
}

/* ser_advantages */
.ser_advantages{
    padding:  0 0 40px;
}

.ser_advantages-item{
    overflow: hidden;
    position: relative;
    margin-bottom: 35px;
}
.ser_advantages-img{
    float: left;
    width: 120px;
    margin-right: 15px;
}
.ser_advantages-desc{
    float: left;
    width: calc(100% - 135px);
}
.ser_advantages .title-small{
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .ser_advantages{
        padding: 40px 0;
    }
    .ser_advantages-desc{
        width: calc(100% - 95px);
    }
    .ser_advantages-img{
        width: 80px;
        margin-right: 15px;
    }
}

/* about_hazo */

.about_hazo{
    padding: 100px 0;
}

.about_hazo-img{
    float: left;
    width: 71px;
}
.about_hazo-desc{
    width: calc(100% - 71px);
    float: left;
    padding: 0 15px;
}
.about_hazo-item{
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .about_hazo{
        padding: 40px 0;
    }
}

/* reason_ss */

.reason_ss{
    padding: 100px 0 60px;
}

.reason_ss-item{
    margin-bottom: 30px;
}
.reason_ss-img{
    float: left;
    width: 50px;
}

.reason_ss-desc{
        float: left;
    width: calc(100% - 51px);
    padding-left: 15px;
    padding-right: 5px;
    text-align: justify;
}
@media (max-width: 768px) {
    .reason_ss-item{
       margin-bottom: 20px;
    }
    .reason_ss{
        padding: 40px 0;
    }
}

.commit_ss{
    padding: 100px 0 80px;
}

@media (max-width: 768px) {
    .commit_ss{
        padding: 40px 0;
    }
}


.commit_ss{
    padding: 100px 0 80px;
}

@media (max-width: 768px) {
    .commit_ss{
        padding: 40px 0;
    }
}

.company_field{
    padding: 60px 0;
}
.company_field .title-small {
    max-width: 600px;
    margin: 0 auto;
}
.company_field-img{
    width: 25px;
    float: left;
    margin-right: 15px;
}

.company_field-desc {
    float: left;
    width: calc(100% - 46px);
}
.company_field-desc h3{
    font-size: 13px;
    color: #7b7d80;
    font-weight: 600;
    text-transform: uppercase;
    margin: 10px 0 10px;
}
@media (max-width: 768px) {
    .company_field{
        padding: 40px 0;
    }   
    .company_field-desc h3{
        font-size: 11px;
    }
}

.num_ss{
    padding: 100px 0 80px;
}
.num_ss h3{
    font-size: 55px;
}


@media (max-width: 768px) {
    .num_ss h3{
        font-size: 30px;
    }

    .num_ss{
        padding: 40px 0;
    }  
}

.procedure_ss{
    padding: 100px 0 60px;
    background-color: #e2e9f3 !important;
}

.procedure_ss-img img{
    margin: 0 auto;
    display: block;
    width: 413px;
    height: 413px;
    object-fit: cover;
    border-radius: 50%;
    border: 20px solid #d42027;
}

.procedure_ss-item .crv-wrap{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    display: block;
    padding: 8px;
}

.procedure_ss-item .crv-ch{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #d42027;
    font-weight: 700;
    border: 8px solid #d42027;
}
.procedure_ss-wrap{
    position: relative;
}

.procedure_ss-item{
    display: flex;
    column-gap: 20px;
    align-items: center;
}
.procedure_ss-item  h3 {
    width: calc(100% - 120px);
    font-weight: 600;
    font-size: 18px;
    color: #404040;
    text-transform: uppercase;
    margin: 10px 0;
}

@media (min-width: 1200px){
    .procedure_ss-item{
        position: absolute;
    }
    .procedure_ss-item:nth-child(2){
        top: 0;
        left: 112px;
        flex-direction: row-reverse;
    }
    .procedure_ss-item:nth-child(3){
        top: 0;
        right: 112px;
    }
    .procedure_ss-item:nth-child(4){
        top: 35%;
        right: 30px;
    }
    .procedure_ss-item:nth-child(5){
        bottom: 0;
        right: 14px;
    }
    .procedure_ss-item:nth-child(6){
        bottom: 0;
        left: 94px;
        flex-direction: row-reverse;
    }
    .procedure_ss-item:nth-child(7){
        top: 35%;
        left: 40px;
        flex-direction: row-reverse;
    }
}
@media (min-width: 991px) and (max-width: 1200px){
    .procedure_ss-item{
        position: absolute;
        column-gap: 10px;
    }
    .procedure_ss-item:nth-child(2){
        top: 0;
        left: 50px;
        flex-direction: row-reverse;
    }
    .procedure_ss-item:nth-child(3){
        top: 0;
        right: 50px;
    }
    .procedure_ss-item:nth-child(4){
        top: 35%;
        right: -10px;
    }
    .procedure_ss-item:nth-child(5){
        bottom: 0;
        right: -32px;
    }
    .procedure_ss-item:nth-child(6){
        bottom: 0;
        left: 45px;
        flex-direction: row-reverse;
    }
    .procedure_ss-item:nth-child(7){
        top: 35%;
        left: 2px;
        flex-direction: row-reverse;
    }
}
@media ( max-width: 1200px){
    .procedure_ss-img img{
        width: 300px;
        height: 300px;
    }
    .procedure_ss-item .crv-wrap{
        width: 80px;
        height: 80px;
    }
    .procedure_ss-item .crv-ch{
        font-size: 25px;
    }
    .procedure_ss-item h3{
        width: calc(100% - 90px);
    }
}
@media ( max-width: 991px){
    .procedure_ss{
        padding: 40px 0;
    }
    .procedure_ss-item{
        margin-bottom: 20px;
    }
}
@supports not (-webkit-touch-callout: none) {
    .procedure_ss{
        background-attachment: fixed !important;
    }
}

/* project_ss */

.project_ss{
    padding: 100px 0;
}

.project_ss-item{
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    z-index: 1;
    background-color: #000;
    background-image: -webkit-linear-gradient(315deg, #cf6468 , #d42027);
    background-image: linear-gradient(135deg, #cf6468  , #d42027);
    cursor: pointer;
    margin-bottom: 5px;
    box-shadow: 2px 4px 17px 8px #d4202714;
    margin-bottom: 30px;
}

.project_ss-desc {
    position: absolute;
    left: 0px;
    bottom: 10%;
    z-index: 10;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    transform-style: preserve-3d;
    transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transform: translateX(0px) translateY(150%) translateZ(0px);
}

.project_ss-desc {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.project_ss-desc h3{
    font-size: 16px;
}

.project_ss-img img{
    object-fit: contain;
    padding: 10px;
    transform-style: preserve-3d;
    transition: opacity 200ms ease 0s, transform 200ms ease 0s;
    opacity: 1;
    transform: scaleX(1.02) scaleY(1.02) scaleZ(1);
    background-color: #fff;
}
.project_ss-item:hover img {
    transform-style: preserve-3d;
    transition: opacity 200ms ease 0s, transform 200ms ease 0s;
    opacity: 0.2;
    transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
}

.project_ss-item:hover .project_ss-desc {
    transform-style: preserve-3d;
    transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transform: translateX(0px) translateY(0px) translateZ(0px);
}

@media ( max-width: 991px){
    .project_ss{
        padding: 40px 0;
    }

}