@charset "UTF-8";

/* Main */

:root {
    --color-red: #ec2d3f;
    --color-medium-red: #cc2c32;
    --color-dark-red: #c31829;
    --color-green: #28a745;
    --color-dark-green: #207d36;
    --color-black: #212529;
    --color-gray: #6c757d;
    --color-site: #5C91FF;
    --color-subsite: #00CAC5;
}

body {
    font-size: 15px;
    line-height: 1.6;
    margin: 0px auto;
    background: url('../images/bg_body.svg') no-repeat center top;
    background-size: 100% auto;
}

section.registers {
    padding: 100px 0px 10px;
}
section.registers h2{
    font-size: 52px;
    font-weight: 600;
    color: var(--color-site);
}
section.registers p{
    margin: 10px 10px 25px;
    font-size: 16px;
}

section.registers .form-control, section.registers .btn{
    height: auto;
    padding: 15px 25px;
}

section.services{
    background-color: transparent
}
section.services .service{
    position: relative;
}

section.services .service a:after{
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 170px;
    background: url('../images/bg_service_shadow.png') repeat-x left bottom;
}

section.services .service a{
    position: relative;
    color: var(--color-site);
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    display: block;
}
section.services .service:hover a{
    color: #fff;
}

section.services .service span{
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    display: block;
    padding: 10px 20px;
}
section.services .service span:before{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    margin-bottom: 5px;
    background-color: var(--color-site);
}

section.services .service-list{
    text-align: center;
}
section.services .service-list div{
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    padding: 30px 20px;
}
section.services .service-list span {
    position: absolute;
    font-size: 50px;
    right: 5%;
    top: 15%;
    color: #00CAC5;
    opacity: .3;
}

section.services .service-list h2{
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    padding-top: 10px;
}

section.cloud{
    background: url('../images/bg_body2.svg') no-repeat right top;
}
section.cloud .cloud-list{
    cursor: pointer;
    padding: 1rem 0;
    border: 1px solid #f3f3f3;
}
section.cloud .cloud-list .image{
    width: 65px;
}

section.cloud .cloud-list h3{

}
section.cloud .cloud-list:not(:first-child) .desc{
    display: none;
}
section.cloud .cloud-list.active{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
section.cloud .trans{
    position: relative;
    width: 75px;
}
section.cloud .title{
    font-size: 1.55rem;
    padding: 15px 10px;
    margin: 30px 0px 0px;
    background-color: var(--color-subsite);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

section.trienkhai .trienkhai-list{
    text-align: center;
}
section.trienkhai .trienkhai-list div{
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 20px;
}

section.trienkhai .trienkhai-list h2{
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 15px 0px 10px;
}
section.banggia .nav-pills .nav-link.active{
    color: #fff;
    background-color: var(--color-site);
}
section.banggia .banggia-list {
    position: relative;
    border-radius: 17px;
    border: 1px solid #ccc;
    text-align: center;
}
section.banggia .banggia-list button{
    border-radius: 50px;
    box-shadow: 5px 5px 0px #ccc;
}
section.banggia .banggia-list .name{
    margin-top: -2rem;
    font-size: 1.2rem;
}
section.banggia .banggia-list .icon {
    position: absolute;
    left: 50%;
    top: -65px;
    margin-left: -90px;
}

section.why-us {
    position: relative;
}

section.why-us .why-us-list{
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    padding: 20px 10px;
}
section.why-us .why-us-list span {
    position: absolute;
    font-size: 50px;
    right: 5%;
    top: 15%;
    color: #00CAC5;
    opacity: .3;
}

section.why-us .why-us-list h2{
    font-size: 1.2rem;
    font-weight: 600;
}

.btn-detail {
    display: inline-block;
    padding: 11px 40px;
    color: #111511;
    font-weight: 600;
    background-color: #bedc7a;
}

section.about-us{
}
section.about-us .container{
}
.about-list h3{
    font-size: 1.15em;
    font-weight: 600;
}

section.tinhnang{
    background-color: #F0FCFE;
}
section.tinhnang .tinhnang-list{
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    padding: 20px 10px;
}
section.tinhnang .tinhnang-list h3{
    font-size: 17px;
    font-weight: 400;
}

section.khachhang {
    position: relative;
    background-color: #F6F4FF;
}

section.khachhang .khachhang-list{
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    padding: 20px;
}
section.khachhang .khachhang-list h3{
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
}

section.why-us{
    background-color: #F0FCFE;
}

section.why-us .card{
    border: 0px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

section.why-us .card-header{
    background-color: #fff;
}

section.why-us .card-header .col-auto{
    color: var(--color-site);
}

section.why-us .chevron{
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    color: #fff !important;
    background-color: var(--color-site);
}
section.why-us .chevron svg{
    margin-top: 5px;
    margin-left: -8px;
}

section.why-us .collapsed .chevron{
    transform: rotate(180deg) !important;
}

section.news{
    background-color: #F6F4FF;
}

.news-item{
    border-radius: 10px;
    box-shadow: 0px 0px 6px #ccc;
    background-color: #fff;
}
.news-item .wrap-news{
    display: block;
}

.news-item .pic-news,
.news-item .info-news{
    position: relative;
}
.news-item .pic-news img {
    border-radius: 10px;
}
.news-item .name-news{
    min-height: 42px;
    font-size: 1.1rem;
    font-weight: 600;
}
.news-item .desc-news{
    padding: 0px 20px 15px;
    margin-bottom: 0px;
    font-size: .875rem;
    color: gray;
}


/* Responsive */

@media(min-width:1400px) {
    .container {
        max-width: 1300px;
    }
    section.banggia .col-edit{
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media(min-width:768px) {
    section.tinhnang .col-lg-7 .row:nth-child(even){
        padding-right: 3rem;
    }
    section.tinhnang .col-lg-7 .row:nth-child(odd){
        padding-left: 3rem;
    }
}

@media(max-width: 1399px) {
    
}

@media(max-width:991px) {
    .menu {
        display: none;
    }
    .menu-res {
        display: block;
    }
    section.counter .col-md-6{
        margin-top: 1rem;
        margin-bottom: 1rem;
        justify-content: start !important;
        border: none !important;
    }
}

@media(max-width:767px) {
    .title-main .title {
        font-size: 1.8rem;
    }
}

@media(max-width:576px) {
    .news-image {
        margin-bottom: 1rem;
    }
}

@media(max-width:369px) {

    .cart-pro-detail a {
        width: 100%;
    }
    .cart-pro-detail a:first-child {
        margin-right: 0px;
        margin-bottom: 0.5rem;
    }
    .cart-pro-detail a i {
        display: none;
    }
}