/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
    font-family: vnt-header;
    src: url('fonts/UTM-Bebas.ttf');
}

#button-contact-vr {
    position: fixed;
    bottom: 100px;
    z-index: 999;
    right: 0;
}

    /*phone*/
    #button-contact-vr .button-contact {
        position: relative;
        margin-top: -5px;
    }

        #button-contact-vr .button-contact .phone-vr {
            position: relative;
            visibility: visible;
            background-color: transparent;
            width: 90px;
            height: 90px;
            cursor: pointer;
            z-index: 11;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
            transition: visibility .5s;
            left: 0;
            bottom: 0;
            display: block;
        }

.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: #cf203170;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}

.phone-vr-img-circle {
    background-color: #CF2031;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

    .phone-vr-img-circle a {
        display: block;
        line-height: 37px;
    }

    .phone-vr-img-circle img {
        max-height: 25px;
        max-width: 27px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
    }

@-webkit-keyframes phone-vr-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}

.phone-bar a {
    position: fixed;
    bottom: 25px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 8px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}

    .phone-bar a:hover {
        opacity: 0.8;
        color: #fff;
    }

#zalo-vr .phone-vr-img-circle {
    background-color: #1F5E9D;
}

#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #1f5e9da3;
    background-color: #1f5e9d7a;
}

#masthead {
    background: -webkit-radial-gradient(top left, circle farthest-side, #f4f4f4 0%, #cecece 100%);
}

.header-nav-main {
}

    .header-nav-main > li.menu-item {
    }

        .header-nav-main > li.menu-item > a {
            display: block;
            /* padding: 0 24px; */
            color: #555;
            text-decoration: none;
            font-size: 22px;
            font-family: vnt-header !important;
            font-weight: 400;
            padding-left: 24px;
            padding-right: 24px;
        }

.banner-gt {
}

    .banner-gt:hover .text-box {
        height: 100%;
    }

    .banner-gt .text-box {
        /* bottom: 0; */
        width: 100%;
        height: 55px;
        background: rgba(0, 0, 0, 0.3);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        overflow: hidden;
    }

        .banner-gt .text-box h3 {
            font-family: vnt-header !important;
            font-size: 24px;
            color: #fff;
            font-weight: normal;
        }

        .banner-gt .text-box p {
            color: #fff;
            font-weight: normal;
            margin-top: 15px;
            font-size: 13px;
            line-height: 1.8em;
        }

        .banner-gt .text-box .text-box-content {
            padding: 10px;
        }

.showView-itemMenu {
    background: url(images/showView.png) right no-repeat;
    line-height: 2em;
    padding-right: 30px !important;
    color: #fff !important;
    font-size: 14px;
    display: block;
    text-align: right;
    font-weight: 400;
}

@media screen and (min-width: 850px) {
    .wap-x30 {
        flex-basis: 30%;
        max-width: 30%;
    }

    .wap-x40 {
        flex-basis: 40%;
        max-width: 40%;
    }
}

h3.projectx {
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #e00201;
    padding: 5px 0;
    font-family: vnt-header !important;
}

.box-blog-post {
    background: #e5e5e5;
    padding: 10px;
}

    .box-blog-post:hover {
        background: #ccc;
    }

    .box-blog-post h5.post-title {
    }

        .box-blog-post h5.post-title a {
            color: #000;
            font-size: 16px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* số dòng muốn cắt */
            overflow: hidden;
            height: 45px;
            line-height: 22px;
        }

            .box-blog-post h5.post-title a:hover {
                color: #000300;
            }

        .box-blog-post h5.post-title p {
            color: #000;
            font-size: 14px;
        }

.news {
    background: #e5e5e5;
    padding: 10px;
}

    .news:hover {
        background: #ccc;
    }

    .news .img {
        position: relative;
    }

        .news .img img {
        }

.mar-mid {
    margin: 10px 0;
}

.news h3 a {
    color: #000;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 45px;
}

    .news h3 a:hover {
        color: #000300;
    }

.news .mar-2btm {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 65px;
    font-size: 14px;
    margin-bottom: 0;
}

.h3-project {
}

    .h3-project h3 {
        display: block;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        word-spacing: 2px;
        letter-spacing: 1px;
        color: #e00201;
        background: #f2f2f2;
        padding: 5px 15px 5px 15px;
        font-family: vnt-header !important;
    }

.project-mar p {
    padding: 5px 0;
    font-weight: none;
    border-bottom: 1px dotted #e5e5e5;
    margin-bottom: 0;
    line-height: 1.5em;
}

.project-mar a {
    text-decoration: none;
    color: #000000;
    font-size: 15px;
    line-height: 16px;
    line-height: 1.5em;
}

.form-lienhe {
}

    .form-lienhe input {
        margin-bottom: 5px;
        box-shadow: unset;
        height: 35px;
    }

.box-blog-post p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 65px;
    font-size: 14px;
    margin-bottom: 0;
}

.page-new .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
}

.page-new .col {
    padding: 0 5px 30px;
}

.pageBreamBox {
    background-color: rgb(242, 242, 242);
    padding: 10px 0;
    margin-bottom: 15px;
}

.page-new h1 {
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #e00201;
    padding: 5px 0;
    font-family: vnt-header !important;
}

.entry-header-text h1 {
    font-size: 26px;
    /* line-height: 1.5em; */
    font-weight: 500;
    padding-bottom: 0;
    text-align: left;
}

.entry-header-text-top {
    padding-bottom: 0;
}

.relate-post {
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #e00201;
    background: #f2f2f2;
    padding: 5px 15px 5px 15px;
    font-family: vnt-header !important;
}

.item-relate {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

    .item-relate h3 a {
        font-size: 16px;
        color: #000000;
    }

    .item-relate .wap-x25 {
        width: 20% !important;
        float: left;
        margin-right: 10px;
    }

    .item-relate p {
        font-size: 14px;
        line-height: 1.5em;
        color: #000000;
    }

#comments {
    display: none;
}

.lt-image img {
    max-height: 150px
}

h3.title {
    font-size: 16px;
    margin-top: 5px;
}

.fah {
    float: left;
    width: 50px;
    height: 50px;
    color: #e00201;
    margin-top: 6px;
    margin-right: 14px;
    text-align: center;
    font-size: 60px;
    line-height: 46px;
    background-size: 100% 100%;
}

.sharaholder-us-content {
    float: left;
    position: relative;
    width: calc(100% - 64px);
    padding-bottom: 10px;
    /* border-bottom: 1px solid #d8d8d8; */
    padding-right: 100px;
}

.sharaholder-us-title {
    font-size: 18px;
    color: #000000;
}

    .sharaholder-us-title a {
        font-size: 18px;
        color: #000000;
    }

.sharaholder-us-date {
    font-size: 13px;
    color: #bfbfbf;
}

.fls {
    list-style: none
}

.fls {
    line-height: 20px
}

    .fls li {
        margin: 10px 0px
    }

.sharaholder-us-down {
    position: absolute;
    height: 28px;
    top: 10px;
    right: 0;
}

    .sharaholder-us-down a {
        cursor: pointer;
        width: 95px;
        font-size: 14px;
        border: 1px solid #000300;
        line-height: 28px;
        text-align: center;
        color: #000300;
        border-radius: 6px;
        height: 28px;
        display: block;
    }

.sharaholder-us-items {
    border-bottom: 1px solid #09b89d;
    padding-bottom: 10px;
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.post-content1 h1 {
    font-size: 26px;
    line-height: 1.5em;
    font-weight: 500;
    padding-bottom: 0;
    text-align: left;
}

.sharaholder-us-down1 {
    margin-top: 15px;
}

    .sharaholder-us-down1 a {
        cursor: pointer;
        width: 140px;
        font-size: 24px;
        border: 1px solid #000300;
        line-height: 40px;
        text-align: center;
        color: #000300;
        border-radius: 6px;
        height: 40px;
        display: block;
    }

.project-file {
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #e00201;
    background: #f2f2f2;
    padding: 5px 15px 5px 15px;
    font-family: vnt-header !important;
}

.chkhac .item {
}

    .chkhac .item a {
        font-size: 16px;
        color: #000000;
    }

.nav-dropdown-has-border .nav-dropdown {
    padding: 5px;
}

.item-relate .wap-x25 .img {
}

    .item-relate .wap-x25 .img img {
    }

.pageBreamBox a {
    color: #000;
}

@media(max-width:549px) {
    .banner-gt .text-box h3 {
        font-size: 20px;
    }

    .item-relate .wap-x25 {
        width: 100% !important;
    }

        .item-relate .wap-x25 .img {
            margin-bottom: 10px;
        }

    .sharaholder-us-down {
        position: relative;
    }

    .sharaholder-us-content {
        padding-right: 0;
    }

    .chkhac {
        margin-bottom: 30px;
    }
}