﻿@media(min-width: 768px)and (max-width: 991.98px) {
    .col-md-4 {
        -ms-flex: 0 0 33.333334%;
        flex: 0 0 33.333334%;
        max-width: 33.333334%
    }
}

@font-face {
    font-family: "UTM Akashi";
    src: url("fonts/UTM Akashi.ttf");
    font-display: auto;
    font-display: swap
}

@font-face {
    font-family: "UTM Avo";
    src: url("fonts/UTMAvo.ttf");
    font-display: auto;
    font-display: swap
}

@font-face {
    font-family: "UTM Avo Bold";
    src: url("fonts/UTMAvoBold.ttf");
    font-display: auto;
    font-display: swap
}

.utm {
    font-family: "UTM Avo Bold"
}

html {
    overflow-x: hidden
}

body {
    font-size: 14px;
    line-height: 1.7;
    font-family: "Open Sans",sans-serif;
}

a {
    color: #333;
}

    a:hover {
        text-decoration: none;
        color: #be6700
    }

.lazyload {
    opacity: 0
}

.lazyloading {
    opacity: 1;
    transition: opacity 300ms;
    background: url("../css/images/loading.gif") no-repeat center !important;
    background-size: 50px
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms
}


header {
    background: green;
}


    header h1 {
        display: none
    }

    header .container > div {
        align-items: center
    }

    header .hot-line {
        color: #ffff00;
        font-size: 14pt;
        font-weight: bold;
        padding-left: 5px;
    }

menu {
    background: green none repeat scroll 0 0;
    margin: 0;
    padding: 0;
}

    menu .mnu-item {
        position: relative;
        overflow: visible;
		white-space: nowrap;
    }

        menu .mnu-item > a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
        }

        menu .mnu-item:hover > a {
            background-color: #035735 !important;
        }

        menu .mnu-item .sub-menu {
            display: block;
            padding: 0;
            min-width: 150px;
            position: absolute;
            top: 100%;
            border: 1px solid #ccc;
            background: #fff;
            z-index: 100;
			opacity: 0;
			transition: opacity 150ms ease;
			pointer-events: none;
        }

            menu .mnu-item .sub-menu.align-right {
                right: 100%;
            }

        menu .mnu-item:hover .sub-menu {
			opacity: 1;
			transition-delay: opacity 500ms ease;
			pointer-events: auto;
        }

            menu .mnu-item .sub-menu a {
                white-space: nowrap;
                color: #333;
                font-size: 11pt;
                padding: 5px 15px;
				display: block;
				transition: 'color, background' 150ms ease;
            }

                menu .mnu-item:hover .sub-menu a:hover {
                    color: #006603;
					background: #ceffc5;
                }

                menu .mnu-item:hover .sub-menu a + a {
                    margin-top: 5px
                }


.navbar-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative
}

    .navbar-banner .breadcrumbs-box {
        background: #fff
    }

@media(min-width: 992px) {
    .navbar-banner .breadcrumbs-box {
        padding-top: 12px !important;
        padding-bottom: 12px !important
    }
}

.navbar-banner .breadcrumbs-box .breadcrumb {
    position: relative;
    margin: 0;
    border: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px
}

    .navbar-banner .breadcrumbs-box .breadcrumb > li::after {
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-weight: 900;
        content: "";
        padding: 0 10px
    }

    .navbar-banner .breadcrumbs-box .breadcrumb > li:last-child::after {
        content: "";
        display: none
    }



.content .content-style p {
    margin: 0 0 15px 0
}

.content .content-style img {
    height: auto !important
}

    .content .content-style img.with-100 {
        width: 100%
    }

.content .content-style iframe, .content .content-style img {
    max-width: 100% !important
}

.content .content-style table td {
    padding: 10px;
    border: 1px solid #ddd
}

    .content .content-style table td p {
        margin: 0
    }

.content .content-style h1 {
    font-size: 1.8rem;
    line-height: 1.5
}

    .content .content-style h1.title {
        font-size: 1.8rem;
        line-height: 1.5
    }

.content .content-style h2 {
    font-size: 130%;
    line-height: 180%
}

.content .content-style h3 {
    font-size: 120%;
    line-height: 170%
}

.content .content-style h4 {
    font-size: 100%;
    line-height: 160%
}

.content .content-style h5 {
    font-size: 100%;
    line-height: 150%
}

.content .content-style .goback {
    font-weight: bold
}

.content .content-style blockquote {
    background: #f8f4e8;
    padding: 5px 20px;
    border: 1px dashed #c90002
}

    .content .content-style blockquote > * {
        margin: 15px 0
    }

.content .pagination {
    margin: 1rem 0 2rem 0
}

    .content .pagination > li {
        color: #000;
        border: 1px solid #dee2e6;
        text-align: center;
        font-size: 1rem;
        background-color: #fff;
        margin-left: -1px
    }

        .content .pagination > li a, .content .pagination > li span {
            padding: 0 .75rem;
            height: 40px;
            line-height: 38px;
            font-weight: 600;
            display: block;
            color: #000;
            text-decoration: none
        }

        .content .pagination > li.active {
            background-color: #bbbfc2 !important;
            border-color: #bbbfc2 !important;
            cursor: pointer;
            text-decoration: none
        }

            .content .pagination > li.active * {
                color: #fff
            }

        .content .pagination > li:hover {
            background-color: #dee2e6;
            cursor: pointer;
            text-decoration: none
        }

.content .header-title {
    font-weight: bold;
    font-size: 18px;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    line-height: 30px
}

@media(min-width: 992px) {
    .content .header-title {
        padding-top: 12px
    }
}

.content .list-news .item {
    height: 100%;
    background: #fff;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(50,50,50,.16);
    -moz-box-shadow: 0px 10px 30px 0px rgba(50,50,50,.16);
    box-shadow: 0px 10px 30px 0px rgba(50,50,50,.16);
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out
}

    .content .list-news .item .img-box {
        position: relative
    }

        .content .list-news .item .img-box .image_inner {
            position: relative;
            display: block;
            overflow: hidden;
            height: 250px;
            width: 100%
        }

            .content .list-news .item .img-box .image_inner img {
                min-width: 100%;
                height: 100%;
                transform: scale(1);
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                -o-transition: all .5s ease
            }

            .content .list-news .item .img-box .image_inner .overlay {
                position: absolute;
                width: 100%;
                height: 100%;
                background: #000;
                background: transparent\9;
                background: rgba(0,0,0,.5);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
                top: 0;
                left: 0;
                padding: 10px 8px;
                cursor: pointer;
                transform: scale(0, 0);
                -webkit-transform: scale(0, 0);
                -moz-transform: scale(0, 0);
                -o-transform: scale(0, 0);
                -ms-transform: scale(0, 0);
                transition: all .5s ease-out;
                -webkit-transition: all .5s ease-out;
                -moz-transition: all .5s ease-out;
                -ms-transition: all .5s ease-out;
                -o-transition: all .5s ease-out
            }

                .content .list-news .item .img-box .image_inner .overlay .icon_position_table {
                    border: 1px dashed rgba(255,255,255,.5);
                    display: -webkit-flex;
                    display: flex;
                    height: 100%;
                    align-items: center;
                    -webkit-align-items: center;
                    justify-content: center;
                    -webkit-justify-content: center
                }

                    .content .list-news .item .img-box .image_inner .overlay .icon_position_table .icon_container {
                        width: 40px;
                        height: 40px;
                        padding: 5px;
                        background: #fff;
                        display: table;
                        text-align: center;
                        border-radius: 100%;
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        transition: all .5s ease;
                        -webkit-transition: all .5s ease;
                        -moz-transition: all .5s ease;
                        -ms-transition: all .5s ease;
                        -o-transition: all .5s ease
                    }

                        .content .list-news .item .img-box .image_inner .overlay .icon_position_table .icon_container a {
                            border: 1px dashed #cfcfcf;
                            display: table-cell;
                            vertical-align: middle;
                            color: #2e307a;
                            font-size: 13px;
                            border-radius: 100%;
                            -webkit-border-radius: 100%;
                            -moz-border-radius: 100%
                        }

                        .content .list-news .item .img-box .image_inner .overlay .icon_position_table .icon_container:hover {
                            background: #000
                        }

                            .content .list-news .item .img-box .image_inner .overlay .icon_position_table .icon_container:hover a {
                                color: #f78600
                            }

@media(min-width: 768px) {
    .content .list-news .item .img-box {
        background: #fff
    }
}

.content .list-news .item .item-body .item-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: inherit
}

.content .list-news .item .item-body .cat-date {
    font-size: 13px;
    color: #888
}

    .content .list-news .item .item-body .cat-date a {
        color: #888
    }

.content .list-news .item .item-body .content {
    line-height: 25px;
    height: 75px;
    overflow: hidden
}

@media(min-width: 768px) {
    .content .list-news .item .item-body {
        background: #fff
    }
}

.content .list-news .item:hover {
    -webkit-box-shadow: 0px 10px 30px 0px #7e7e7e;
    -moz-box-shadow: 0px 10px 30px 0px #7e7e7e;
    box-shadow: 0px 10px 30px 0px #7e7e7e
}

    .content .list-news .item:hover .img-box .image_inner .overlay {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }



.home-product .header-wrap {
    background: #f78600;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0
}

    .home-product .header-wrap .header a {
        display: inline-block;
        line-height: 45px;
        background: #2e307a;
        border-radius: 10px 0 10px 0;
        -webkit-border-radius: 10px 0 10px 0;
        -moz-border-radius: 10px 0 10px 0;
        -webkit-box-shadow: 7px 0 1px -1px #be6700;
        -moz-box-shadow: 7px 0 1px -1px #be6700;
        box-shadow: 7px 0 1px -1px #be6700;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px
    }

        .home-product .header-wrap .header a:hover {
            color: #f78600
        }

@media(min-width: 1200px) {
    .home-product .header-wrap .header a {
        line-height: 60px;
        font-size: 18px
    }
}

.home-product .header-wrap .link-to {
    padding-right: 20px
}

    .home-product .header-wrap .link-to a {
        color: #fff
    }

        .home-product .header-wrap .link-to a:hover {
            color: #2e307a
        }

.home-product .seemore-product {
    border-top: 1px solid #e8e8e8
}

    .home-product .seemore-product a {
        border: 1px solid #e8e8e8;
        padding: 10px 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 3px;
        color: #000;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -o-transition: all .5s ease-out
    }

        .home-product .seemore-product a:hover {
            background: #f78600;
            color: #fff
        }

.home-product .list-products .item.cat-img-box {
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8
}

    .home-product .list-products .item.cat-img-box img {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        width: 100%
    }

@media(min-width: 768px) {
    .home-product .list-products .item.cat-img-box .img-box {
        height: 354px;
        overflow: hidden
    }

        .home-product .list-products .item.cat-img-box .img-box img {
            height: 100%;
            min-width: 100%;
            object-fit: cover;
            width: auto
        }
}

@media(min-width: 992px) {
    /*.home-product .list-products .item {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }*/

        .home-product .list-products .item.cat-img-box {
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%
        }
}

.list-products .item {
    height: 100%
}

.list-products .product-box {
    height: 100%;
    position: relative;
    background: #fff;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    /*border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8*/
}

    .list-products .product-box .img-box {
        height: 220px;
        background: #fff;
        overflow: hidden;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        /*border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px*/
    }

        .list-products .product-box .img-box img {
            height: 100%;
            min-width: 100%;
            object-fit: cover;
            transition: all .5s ease-out;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            width: auto;
            /*border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px*/
        }

@media screen and (max-width: 450px) {
    .list-products .product-box .img-box {
        height: 200px
    }
}

@media screen and (max-width: 350px) {
    .list-products .product-box .img-box {
        height: 170px
    }
}

.list-products .product-box .info-box {
    position: relative;
    z-index: 6;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out
}

    .list-products .product-box .info-box .product-name {
        line-height: 1;
        position: relative
    }

        .list-products .product-box .info-box .product-name a {
            font-size: 14px;
            line-height: 1em;
            color: #000;
            
            font-weight: 700;
            word-wrap: break-word;
            /*overflow: hidden;
            height: 46px;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;text-transform: uppercase;*/
            height: inherit
        }

            .list-products .product-box .info-box .product-name a:hover {
                color: #f78600
            }

    .list-products .product-box .info-box .brief {
        word-wrap: break-word;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        height: inherit;
        font-style: italic
    }

    .list-products .product-box .info-box .more {
        color: #f78600;
        text-decoration: underline;
        font-weight: 600
    }

        .list-products .product-box .info-box .more:hover {
            color: #2e307a
        }

.list-products .product-box:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}


@media(min-width: 992px) {
    .content .slidebar .sidebar-fix {
        position: -webkit-sticky;
        position: sticky;
        top: 70px
    }
}

.content .slidebar .box-layer {
    position: relative;
    padding: 5px 10px;
    background: #fff;
    -webkit-box-shadow: 2px 2px 20px #00000017;
    -moz-box-shadow: 2px 2px 20px #00000017;
    box-shadow: 2px 2px 20px #00000017
}

    .content .slidebar .box-layer .title_block {
        font-size: 18px;
        margin-bottom: 0;
        position: relative;
        font-weight: bold;
        line-height: 45px;
        color: #000;
        border-bottom: 2px solid #e1e1e1
    }

        .content .slidebar .box-layer .title_block:before {
            content: "";
            display: block;
            width: 100px;
            position: absolute;
            left: 0;
            bottom: -2px;
            border-bottom: 2px solid #2e307a
        }

    .content .slidebar .box-layer .list-news-latest {
        padding: 10px 0;
        counter-reset: popular-counter
    }

        .content .slidebar .box-layer .list-news-latest .col-12 {
            border-bottom: 1px #e1e1e1 dotted
        }

            .content .slidebar .box-layer .list-news-latest .col-12:last-child {
                border-bottom: 0
            }

        .content .slidebar .box-layer .list-news-latest .item-article {
            border-bottom: 1px #d3d3d3 dotted;
            padding: 10px 0;
            margin: 0;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
            flex-direction: row
        }

            .content .slidebar .box-layer .list-news-latest .item-article:last-child {
                border-bottom: 0
            }

            .content .slidebar .box-layer .list-news-latest .item-article:before {
                display: table;
                content: " "
            }

            .content .slidebar .box-layer .list-news-latest .item-article .post-image {
                -ms-flex: 0 1 90px;
                flex: 0 1 90px;
                max-width: 90px;
                position: relative
            }

                .content .slidebar .box-layer .list-news-latest .item-article .post-image a {
                    display: block;
                    height: 75px;
                    overflow: hidden
                }

                    .content .slidebar .box-layer .list-news-latest .item-article .post-image a img {
                        min-width: 100%;
                        height: 75px
                    }

                    .content .slidebar .box-layer .list-news-latest .item-article .post-image a.d-flex img.m-auto {
                        max-width: 90%;
                        max-height: 90%;
                        height: auto;
                        min-width: 0
                    }

            .content .slidebar .box-layer .list-news-latest .item-article .post-content {
                padding-left: 15px;
                overflow: hidden;
                -ms-flex: 1 1;
                flex: 1 1
            }

                .content .slidebar .box-layer .list-news-latest .item-article .post-content .title {
                    margin: 0 0 5px;
                    font-size: 14px;
                    line-height: 22px;
                    overflow: hidden;
                    max-height: 44px
                }

                .content .slidebar .box-layer .list-news-latest .item-article .post-content .date {
                    font-size: 12px
                }

                    .content .slidebar .box-layer .list-news-latest .item-article .post-content .date i {
                        color: #a6a6a6;
                        font-size: 12px;
                        margin-right: 5px;
                        vertical-align: 1px
                    }

                .content .slidebar .box-layer .list-news-latest .item-article .post-content .price-more .price {
                    color: #ea0000
                }

    .content .slidebar .box-layer .list-news-social ul {
        margin: 0;
        padding: 0
    }

        .content .slidebar .box-layer .list-news-social ul li {
            font-weight: bold;
            list-style: none
        }

            .content .slidebar .box-layer .list-news-social ul li a {
                display: block
            }

    .content .slidebar .box-layer.cat-menu ul {
        list-style: none
    }

    .content .slidebar .box-layer.cat-menu .list > ul {
        padding: 0
    }

        .content .slidebar .box-layer.cat-menu .list > ul > li {
            position: relative
        }

            .content .slidebar .box-layer.cat-menu .list > ul > li > a {
                color: #333
            }

            .content .slidebar .box-layer.cat-menu .list > ul > li > i {
                position: absolute;
                right: 0;
                top: 15px
            }

                .content .slidebar .box-layer.cat-menu .list > ul > li > i.fa-angle-up {
                    display: none
                }

            .content .slidebar .box-layer.cat-menu .list > ul > li ul {
                display: none
            }

            .content .slidebar .box-layer.cat-menu .list > ul > li.expand > i.fa-angle-up {
                display: inline-block
            }

            .content .slidebar .box-layer.cat-menu .list > ul > li.expand > i.fa-angle-down {
                display: none
            }

            .content .slidebar .box-layer.cat-menu .list > ul > li.expand ul {
                display: block
            }

    .content .slidebar .box-layer.cat-menu .red {
        color: #2e307a !important
    }

.content .slidebar .retail {
    text-decoration: line-through;
    color: #ccc;
    font-size: 13px
}


.footer-wrapper {
    background-color: #f5f5f5;
    border-top: 4px solid #035735
}

    .footer-wrapper .gdlr-widget-title, .footer-wrapper .gdlr-widget-title a {
        color: #353535;
    }

.footer-wrapper {
    color: #353535;
}

.textwidget {
    color: #666;
    margin-bottom: -10px;
}

.footer-wrapper a {
    color: #666;
}

    .footer-wrapper a:hover {
        color: #666;
    }

.footer-wrapper * {
    border-color: #363636;
}

.footer-wrapper input[type="text"], .footer-wrapper input[type="email"], .footer-wrapper input[type="password"], .footer-wrapper textarea {
    background-color: #141414;
}

.footer-wrapper input[type="text"], .footer-wrapper input[type="email"], .footer-wrapper input[type="password"], .footer-wrapper textarea {
    color: #828282;
}

.footer-wrapper input[type="text"], .footer-wrapper input[type="email"], .footer-wrapper input[type="password"], .footer-wrapper textarea {
    border-color: #313131;
}

.footer-wrapper .gdlr-button, .footer-wrapper .gdlr-button:hover, .footer-wrapper input[type="button"], .footer-wrapper input[type="submit"] {
    color: #ffffff;
}

.footer-wrapper .gdlr-button, .footer-wrapper input[type="button"], .footer-wrapper input[type="submit"] {
    background-color: #cd9f7a;
}

.footer-wrapper .tagcloud a {
    background-color: #cd9f7a;
}

    .footer-wrapper .tagcloud a, .footer-wrapper .tagcloud a:hover {
        color: #ffffff;
    }

.copyright-wrapper {
    background-color: #035735;
}

.copyright-wrapper {
    color: #828282;
}

.footer-wrapper .copyright-wrapper {
    border-color: #333333;
}


/*--- footer ---*/
.footer-wrapper {
    position: relative;
    background-repeat: no-repeat;
    background-position: right top;
}

    .footer-wrapper a {
        cursor: pointer;
    }

    .footer-wrapper .widget.gdlr-widget {
        margin-bottom: 10px;
    }

    .footer-wrapper .gdlr-widget-title {
        margin-bottom: 10px;
    }

.footer-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.ie7 .footer-wrapper {
    overflow: hidden;
}

.copyright-left {
    margin: 0px 20px;
    float: left;
}

.copyright-right {
    margin: 0px 20px;
    float: right;
}

.copyright-wrapper {
    border-top-width: 1px;
    border-top-style: solid;
}

.copyright-container {
    padding: 0px 0px;
}


.gdlr-widget-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hotline-phone-ring-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 199;
}

.hotline-phone-ring {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}

.hotline-phone-ring-circle {
    width: 85px;
    height: 85px;
    top: 10px;
    left: 10px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid #e60808;
    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    opacity: 0.5;
}

.hotline-phone-ring-circle-fill {
    width: 55px;
    height: 55px;
    top: 25px;
    left: 25px;
    position: absolute;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.hotline-phone-ring-img-circle {
    background-color: #e60808;
    width: 33px;
    height: 33px;
    top: 37px;
    left: 37px;
    position: absolute;
    background-size: 20px;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hotline-phone-ring-img-circle .pps-btn-img {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

        .hotline-phone-ring-img-circle .pps-btn-img img {
            width: 20px;
            height: 20px;
        }

.hotline-bar {
    position: absolute;
    background: rgba(230, 8, 8, 0.75);
    height: 40px;
    width: 180px;
    line-height: 40px;
    border-radius: 3px;
    padding: 0 10px;
    background-size: 100%;
    cursor: pointer;
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    z-index: 9;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50px !important;
    /* width: 175px !important; */
    left: 33px;
    bottom: 37px;
}
    .hotline-bar > a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: bold;
        text-indent: 50px;
        display: block;
        letter-spacing: 1px;
        line-height: 40px;
        font-family: Arial;
    }

        .hotline-bar > a:hover,
        .hotline-bar > a:active {
            color: #fff;
        }

.contact-list {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 99999;
    
}

.bottom-contact-list {
    display: none;
}

@media (max-width: 767px) {
    .contact-list {
       
    }
}

@media (max-width: 767px) {
    .bottom-contact-list {
        display: block;
        position: fixed;
        bottom: 0;
        background: white;
        width: 100%;
        z-index: 99;
        box-shadow: 2px 1px 9px #dedede;
        border-top: 1px solid #eaeaea;
    }
}

@media (max-width: 767px) {
    .bottom-contact-list ul li {
        width: 19%;
        float: left;
        list-style: none;
        text-align: center;
        font-size: 13.5px;
    }
}

.chat-face {
    background: #125c9e;
    border-radius: 20px;
    padding: 0 18px;
    color: white;
    display: block;
    margin-bottom: 6px;
    z-index: 999999;
}

.contact-list .hotline {
    background: #d11a59 !important;
    border-radius: 20px;
    padding: 0 18px;
    color: white;
    display: block;
    margin-bottom: 6px;
}
.module-title {
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    margin: 10px 0 15px;
    color: #222;
}
.nhap-nhay {
    text-decoration: blink;
    color: #dd127b;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

.blink,
.nhap-nhay {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
      }
@keyframes blink-animation {
	to {
	  visibility: hidden;
	}
}
@-webkit-keyframes blink-animation {
	to {
	  visibility: hidden;
	}
}