.bottom--why ul,
.btn--lnik {
    z-index: 9999;
    position: relative
}

.bottom--why ul,
.btn--lnik,
.footer_light,
.logo_center .logo a,
.post_wrap .image_wrap {
    position: relative
}

.post_wrap .intro_wrap .decs,
.post_wrap .intro_wrap .title {
    text-overflow: ellipsis;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.f-700,
.footer-menu .title h3,
.image-cat .info .title h3,
.section h2 {
    font-weight: 700
}

.center--footer *,
.sub-menu-wrap .container .decs h2,
.top--header *,
.top_menu_pc a {
    color: #fff
}

.danhmuc ul,
.footer-menu .menu .content ul,
.sidebar .widget_recent_post {
    list-style-type: none;
    padding-left: 0
}

a,
a:hover {
    text-decoration: none
}

.btn-duan a,
.category-name button,
.middle-header {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11)
}

.d-grid {
    display: grid
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr)
}

.grid-col-4 {
    grid-template-columns: repeat(4, 1fr)
}

.grid-col-6 {
    grid-template-columns: repeat(6, 1fr)
}

.grid-col-2 {
    grid-template-columns: repeat(2, 1fr)
}

.grid-col-600 {
    grid-template-columns: 40% 60%
}

.grid-col-1-3-1 {
    grid-template-columns: 2fr 1fr 2fr
}

.grid-col-1-2-1 {
    grid-template-columns: 1fr 1.5fr 0.8fr
}

.grid-col-2-1 {
    grid-template-columns: 2fr 1fr
}

.grid-col-3-1 {
    grid-template-columns: 3fr 1fr
}

.grid-col-4-1 {
    grid-template-columns: 4fr 1fr
}

.grid-col-6-1 {
    grid-template-columns: 6fr 1fr
}

.grid-col-1-2 {
    grid-template-columns: 1fr 2fr
}

.grid-col-1-15 {
    grid-template-columns: 1fr 1.5fr
}

.grid-col-1-3 {
    grid-template-columns: 1fr 3fr
}

.grid-col-1-8 {
    grid-template-columns: 1fr 8fr
}

.gap-10 {
    gap: 10px
}

.dmca-badge {
    display: none;
}

.dmca-badge-copy {
    margin-top: 20px;
    display: block;
}

.gap-20 {
    gap: 20px
}

.gap-30 {
    gap: 30px
}

.gap-40 {
    gap: 40px
}

.gap-50 {
    gap: 50px
}

.gap-100 {
    gap: 100px
}

.section h2 {
    font-size: 40px
}

.link-ul li,
.post_chothue .text-post .icon i,
.sidebar .post_footer,
.sub--child-child li a {
    font-size: 14px
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out
}

    .fade-in.loaded,
    .hero-slider .swiper-pagination-bullet-active {
        opacity: 1
    }

.menu--fixed,
.moblie_header {
    display: none
}

.middle-header {
    background: #003596
}

.dropdown-top-header ul,
.menu_left ul,
.menu_right ul {
    list-style-type: none
}

.copyright,
.top--header {
    background: var(--color-1st)
}

.logo_center .logo a {
    display: block
}

    .logo_center .logo a img {
        position: relative;
        z-index: 1
    }

    .logo_center .logo a::before {
        position: absolute;
        left: 0;
        bottom: -20px;
        width: 100%;
        background: #fff;
        border-radius: 50%;
        content: '';
        height: 100%;
        z-index: 0;
        display: block
    }

.btn-sign-btn,
.footer_light {
    background: var(--color-1st)
}

.btn--lnik {
    margin-top: 30px
}

    .btn--lnik img {
        max-width: 80px
    }

.sticky-top {
    z-index: 99999
}

.post_wrap {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .15), 0 4px 15px rgba(0, 0, 0, .13);
    overflow: hidden
}

    .post_wrap:hover .image_wrap img {
        transform: scale(1.2);
        transition: .2s ease-in-out;
        overflow: hidden
    }

    .post_wrap .image_wrap img {
        transition: .2s ease-in-out
    }

.product,
.product_img,
.product_img .product_hover_img,
.product_img a,
.product_wrap,
.right-blog .item {
    overflow: hidden;
    border-radius: 10px
}

.rf-post .image_wrap {
    max-width: 323px;
    max-height: 181px
}

.post-child img,
figure img {
    display: block;
    margin: auto
}

.post_wrap .image_wrap {
    overflow: hidden
}

.post_wrap .intro_wrap .title {
    -webkit-line-clamp: 2;
    height: 50px
}

.post_wrap .intro_wrap,
.slider-doitac .item {
    padding: 10px
}

    .post_wrap .intro_wrap .decs {
        -webkit-line-clamp: 3;
        height: 75px;
        font-size: 16px
    }

.center--footer .contant--footer {
    padding-left: 20px;
    border-left: 1px solid #dddddd47
}

.top--footer {
    border-bottom: 1px solid #dddddd47
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.danhmuc ul li a,
.post_content {
    display: flex;
    gap: 10px
}

.sidebar {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 5px 0 #ddd;
    position: sticky;
    top: 182px
}

    .sidebar .post_header h4 {
        font-size: 24px;
        font-weight: 700;
        color: var(--color-1st)
    }

.ps-list--categories .last {
    border-bottom: 0
}

.shop_container {
    margin-bottom: 40px
}

#product-brand {
    flex-wrap: wrap
}

.btn-sign-btn {
    color: #ffff;
    border-radius: 20px;
    padding: 10px 30px;
    border: 0;
    white-space: nowrap
}

.btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid var(--color-1st);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.card-video .video-play-button {
    position: absolute;
    z-index: 10;
    inset: 0;
    margin: auto;
    box-sizing: content-box;
    display: block;
    cursor: pointer;
    width: 32px;
    height: 44px;
    border: none;
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
    top: 45px;
    display: flex;
    align-items: center
}

    .card-video .video-play-button:after,
    .card-video .video-play-button:before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 80px;
        height: 80px;
        background: linear-gradient(45deg, #4bc5e091 15%, var(--color-1st) 70%);
        border-radius: 50%;
        display: block
    }

    .card-video .video-play-button:before {
        z-index: 0;
        -webkit-animation: 1.5s ease-out infinite pulse-border;
        animation: 1.5s ease-out infinite pulse-border
    }

    .card-video .video-play-button:after {
        z-index: 1;
        transition: .2s;
        box-shadow: 0 2px 7px #131b49
    }

    .card-video .video-play-button:hover:after {
        background-color: var(--color-1st)
    }

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 30px solid #fff;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-radius: 4px
}

.nav-bottom ul li:hover > a,
.section .title h4,
.section h2.title_lon {
    color: var(--color-1st)
}

.menu_right .active {
    color: var(--color-1st);
    box-shadow: inset 0 1px 0 var(--color-1st);
}



.btn-xemthem {
    display: flex;
    align-items: center;
    gap: 10px
}

    .btn-xemthem span {
        font-weight: 600;
        font-size: 16px
    }

@-webkit-keyframes pulse-border {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0
    }
}

@keyframes pulse-border {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0
    }
}

.section {
    padding: 100px 0
}

    .section.section-intro {
        padding: 60px 0;
        margin-top: -10px
    }

.header_wrap .middle-header {
    padding: 0
}

.lienhe_contact {
    position: relative;
    z-index: 1;
    margin: 50px 0 100px
}

.suppot-hotline span {
    font-size: 15px
}

.suppot-hotline img {
    width: 20px
}

.lienhe_contact .contant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 20px;
    position: relative;
    background: #fff;
    z-index: 1
}

.lienhe_contact::after,
.lienhe_contact::before {
    background-color: rgba(128, 128, 128, .12);
    backdrop-filter: blur(4.6px);
    z-index: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
    left: 0;
    top: 0
}

.lienhe_contact::before {
    border: 1px solid;
    border-radius: 30px;
    transform: rotate3d(1, 1, 1, 8deg)
}

.lienhe_contact::after {
    border: 1px solid;
    border-radius: 30px;
    transform: rotate3d(1, 1, 1, -8deg)
}

@media (max-width:767.98px) {

    .section .grid-col-2,
    .section--news .grid-col-3,
    .section--number .number--home {
        grid-template-columns: 1fr !important
    }

        .section--number .number--home .image .link--catalogue {
            left: 0
        }
}

.select-css {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right 20px top 50%, 0 0;
    background-size: .65em auto, 100%
}

    .select-css::-ms-expand {
        display: none
    }

    .select-css:hover {
        border-color: #888
    }

    .select-css:focus {
        border-color: #aaa;
        box-shadow: 0 0 0 0 rgba(59, 152, 252, 0);
        box-shadow: 0 0 0 0 -moz-mac-focusring;
        color: #222;
        outline: 0
    }

    .select-css option {
        font-weight: 400;
        display: block;
        padding: 20px 0
    }

.contact--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #204fa0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden
}

    .contact--fixed.shop {
        opacity: 1;
        visibility: visible
    }

    .contact--fixed .contact .form-contact {
        background: #fff;
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 20px;
        border-radius: 20px;
        overflow: hidden;
        position: relative
    }

.hero-slider .swiper-button-next:before,
.hero-slider .swiper-button-prev:before {
    font-size: 15px;
    color: #d4d3d3;
    font-style: normal;
    display: inline-block vertical-align middle;
    font-weight: 900
}

.contact--fixed .form-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-1st);
    border-radius: 20px;
    overflow: hidden;
    padding: 0 20px
}

    .contact--fixed .form-group .form-control {
        border: 0
    }

.contact--fixed .contact {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

    .contact--fixed .contact .right-contact {
        background: #edf2f9
    }

.contact--fixed .title h4 {
    color: var(--color-1st);
    font-weight: 700
}

.nav-fixed .middle-header {
    padding: 0 !important
}

.danhmuc ul svg {
    width: 15px
}

.blog-media-chothue .left-dichvu .categories .image {
    max-width: 658px;
    max-height: 447px;
    overflow: hidden
}

    .blog-media .image img,
    .blog-media-chothue .left-dichvu .categories .image img,
    .blog-media-new .item img {
        width: 100%
    }

.blog-media-chothue .right-dichvu .categories .image {
    max-width: 319px;
    max-height: 202px;
    overflow: hidden;
    width: 100%
}

.section-products .header-title.grid-col-2-1 a {
    justify-content: flex-end
}

.blog-media-project .title_lop h3 {
    position: relative;
    padding-bottom: 10px
}

    .blog-media-project .title_lop h3::before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        background: var(--color-1st);
        width: 50%;
        height: 1px
    }

@media(max-width:1200px) {
    .section-news .posts .image {
        max-height: 140px !important
    }
}

@media (max-width:991.98px) {

    .cat_name h5,
    .left-blog .intro .title_news_lon h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical
    }

    .left-blog .intro .title_news_lon h4 {
        -webkit-line-clamp: 3
    }

    .center--footer .warth {
        margin-bottom: 40px
    }

    .section-news .posts .image {
        max-height: unset !important
    }

    .moblie_header .background {
        width: 30px !important;
        height: 30px !important
    }

        .moblie_header .background i {
            font-size: 14px
        }

    .item-blog-noibat {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important
    }

    .left-blog {
        height: 262px !important;
        margin-bottom: 90px
    }

        .left-blog .image {
            background-size: cover
        }

    .hinh-doitac {
        grid-template-columns: 1fr 1fr !important
    }

    .blog-media-project .title_lop {
        display: block !important
    }

    .banlanhdao.grid-col-600,
    .menu--fixed,
    .tool {
        display: block
    }

    .blog-media-project .title_lop .btn-duan {
        margin: 20px 0
    }

    .section-products .header-title.grid-col-2-1 a {
        justify-content: flex-start
    }

    .blog-media-new .item-blog-noibat,
    .blog-media-new .right-blog,
    .dichvu_con,
    .post_chothue .d-grid,
    .section--number .number--home,
    .section-intro .intro,
    .section-news .content,
    .section-news .header-title,
    .section_post .section_content .item-blog,
    .section-news .right-news-home {
        grid-template-columns: 1fr !important
    }

    .blog--details .botton-content,
    .blog--details .top-title,
    .blog-media .item-blog.grid-col-2,
    .blog-media .item-blog.grid-col-3,
    .blog-media-dichvu .category_child,
    .categories_child.grid-col-2,
    .contact--fixed .contact .form-contact,
    .cumgoi.grid-col-3,
    .datdiemchinh,
    .duan-lienquan .grid-col-3,
    .duan_noibat .header-title.grid-col-2-1,
    .products-wtach.grid-col-3,
    .section-news .content,
    .trietly {
        grid-template-columns: 1fr
    }

    .title_news {
        text-align: right
    }

    .decs-pro {
        height: 75px !important
    }

    .right-news-home {
        justify-items: center
    }

    .section.section-intro {
        padding: 50px 0
    }

    .section-intro .intro,
    .section-news .header-title {
        gap: 20px !important
    }

        .section-intro .intro .decs {
            margin-bottom: 0 !important
        }

    .slider-dautrang .image {
        height: 50vh !important
    }

    .cat_name h5 {
        -webkit-line-clamp: 1;
        height: 32px
    }

    .tamnhin .noidung {
        position: unset !important;
        width: 100% !important
    }

    .dropdown-menu .sub-menu {
        padding-left: 20px
    }

        .dropdown-menu .sub-menu a {
            font-size: 14px;
            padding: 5px 0;
            display: inline-block
        }

    .section_header .breadcrumb {
        margin-bottom: 20px
    }

    .copyright .copy,
    .logo--footer {
        text-align: center
    }

    .center--footer {
        padding: 20px 0 !important
    }

    .contact--fixed .contact {
        overflow-y: scroll;
        height: 100vh;
        flex-wrap: wrap
    }

    .tool .right-tool {
        margin-top: 30px
    }

    .lienhe_contact .contant {
        flex-wrap: wrap;
        text-align: center;
        gap: 20px;
        justify-content: center
    }

    .bottom--why ul,
    .footer-menu,
    .link--support .d-flex {
        flex-wrap: wrap
    }

    .footer_light .container,
    .menu--footer.grid-col-2 {
        display: grid !important;
        justify-items: center;
        gap: 20px
    }

    .section-slow {
        padding: 100px 0
    }

    .tool.even .left-tool::before {
        right: 0 !important
    }

    .navbar.show .navbar-collapse.mobile_side_menu {
        right: 0;
        width: 70%
    }

    .menu--fixed {
        padding: 10px 0;
        background: var(--color-1st);
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999
    }

        .menu--fixed ul li * {
            color: #fff;
            fill: #fff
        }

        .menu--fixed button {
            border: none;
            background: 0 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-family: inherit
        }

    .moblie_header .background * {
        color: #ffff
    }

    .menu--fixed .background,
    .moblie_header .background {
        position: relative;
        border-radius: 50%;
        border: 1px solid #fff;
        background: rgba(74, 74, 74, .39);
        mix-blend-mode: luminosity;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
        backdrop-filter: blur(15px);
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .menu--fixed .menu__icon {
        width: 22px;
        height: 22px;
        padding: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform .4s
    }

        .menu--fixed .menu__icon span {
            width: 100%;
            height: .25rem;
            border-radius: .125rem;
            background-color: #fff;
            box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
            transition: width .4s, transform .4s, background-color .4s
        }

    .dropdown-toggle,
    .support-moidle .support img {
        width: 30px;
        height: 30px
    }

    .menu--fixed .menu__icon :first-child {
        width: 75%
    }

    .menu--fixed .menu__icon :nth-child(2) {
        width: 50%
    }

    .menu--fixed .menu_fixed-ul {
        display: flex;
        list-style-type: none;
        padding-left: 0;
        align-items: center;
        justify-content: space-around
    }

    .support-moidle {
        position: absolute;
        bottom: 140%;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: .2s;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15), 0 4px 15px rgba(0, 0, 0, .13)
    }

    .dropdown-toggle {
        position: absolute;
        top: 15px;
        right: 20px
    }

    .support-moidle.show {
        opacity: 1;
        visibility: visible;
        transition: .2s
    }

    .support-moidle .support {
        list-style-type: none;
        background-color: var(--color-1st);
        width: 180px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding: 10px
    }

    .moblie_header {
        display: block;
        background: #003596
    }

        .moblie_header .container {
            display: grid;
            justify-content: space-between;
            align-items: center;
            grid-template-columns: 1fr 2fr 1fr
        }

        .moblie_header .center_header {
            text-align: center;
            position: relative
        }

    .timkiem {
        position: absolute;
        left: 0;
        top: 80px;
        z-index: 999
    }

    .section .grid-col-2,
    .section--news .grid-col-3,
    .shop_container.grid-col-3 {
        grid-template-columns: 1fr 1fr
    }

    .section h2 {
        font-size: 20px;
        width: 100% !important
    }

    .addThis_listSharing {
        display: none
    }

    .blog-media .container.grid-col-3-1,
    .footer_light .container,
    .menu--footer.grid-col-2 {
        grid-template-columns: 1fr
    }

    .mobile_side_menu .menu-title {
        border-bottom: 1px solid var(--color-1st);
        background: #fff
    }

    .info_slider .text {
        width: 90%
    }

    .order-first {
        order: 0 !important
    }

    .product_header .product_header_left,
    .product_header_right samll {
        font-size: 10px
    }

    #filter_categories {
        margin-bottom: 30px
    }
}

.cat_name h5,
.sub--child > li > a {
    border-bottom: 1px solid #ffff
}

.hero-slider {
    width: 100%;
    height: 700px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 0
}

    .hero-slider .swiper-slide {
        overflow: hidden;
        color: #fff
    }

    .hero-slider .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0
    }

    .hero-slider .slide-inner {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left
    }

    .hero-slider .swiper-button-next,
    .hero-slider .swiper-button-prev {
        background: 0 0;
        width: 55px;
        height: 55px;
        line-height: 53px;
        margin-top: -30px;
        text-align: center;
        border: 2px solid #d4d3d3;
        border-radius: 55px;
        opacity: 0;
        visibility: hidden;
        transition: .3s
    }

    .hero-slider:hover .swiper-button-next,
    .hero-slider:hover .swiper-button-prev {
        transform: translateX(0);
        opacity: 1;
        visibility: visible
    }

    .hero-slider .swiper-button-prev {
        left: 25px;
        transform: translateX(50px)
    }

        .hero-slider .swiper-button-prev:before {
            content: "\276C"
        }

    .hero-slider .swiper-button-next {
        right: 25px;
        transform: translateX(-50px)
    }

        .hero-slider .swiper-button-next:before {
            content: "\276D"
        }

    .hero-slider .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        text-align: left;
        line-height: 12px;
        font-size: 12px;
        color: #000;
        opacity: .3;
        background: #fff;
        transition: .2s
    }

    .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
    .hero-slider .swiper-pagination-custom,
    .hero-slider .swiper-pagination-fraction {
        bottom: 30px
    }

.dropdown .sub-menu-wrap {
    position: absolute;
    width: 100%;
    background: #003596;
    top: 100%;
    opacity: 0;
    transform: translateY(40px);
    transition: .3s;
    visibility: hidden;
    left: 0;
    border-top: 1px solid #fff;
    padding: 20px 0
}

.dropdown:hover .sub-menu-wrap {
    opacity: 1;
    transform: translateY(0);
    transition: .3s;
    visibility: visible
}

.sub-menu-wrap .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 100px;
    justify-items: center
}

.sub-menu-wrap ul li {
    position: relative !important
}



.dropdown .sub-menu-wrap .sub-menu {
    padding-left: 0
}

.dropdown .sub-menu-wrap .menu-item {
    padding: 0 20px !important
}

.swiper-pagination {
    text-align: left
}

.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 50px;
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%)
}

.counter-container .counter-number::before {
    position: absolute;
    content: '+';
    right: -30px
}

.counter-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-around;
    align-items: center;
    background-color: #4173c8;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 50px;
    padding: 20px;
    color: #fff;
    text-align: center;
    margin-top: 50px;
    margin-bottom: -120px
}

.bottom--categories .categories,
.theme-btn,
.theme-btn-s2 {
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    text-align: center
}

.bottom--categories .categories,
.categories-child .sub--child,
.sub--child-child {
    padding-left: 0;
    list-style-type: none
}

.counter-item {
    flex: 1
}

.counter-number {
    position: relative;
    font-size: 50px;
    font-weight: 700;
    display: inline
}

.circle,
.play {
    position: absolute
}

.theme-btn,
.theme-btn-s2,
.theme-btn-s3 {
    font-weight: 500;
    text-transform: uppercase
}

.counter-title {
    margin-top: 10px;
    font-size: 18px
}

@media (min-width:767px) {
    .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 30px
    }
}

.hero-style {
    height: 90vh;
    transition: .4s
}

@media screen and (min-width:992px) {
    .hero-style .container {
        padding-top: 95px
    }

    .sub-menu-wrap .sub-menu {
        display: flex;
        column-gap: 10px;
        flex-wrap: wrap
    }
}

.copy,
.menu-footer a,
.nav-bottom ul > li > a,
.sub-menu-wrap .sub-menu a,
.title_news h4 {
    font-size: 16px
}

.hero-style .slide-btns,
.hero-style .slide-text,
.hero-style .slide-title {
    max-width: 550px
}

    .hero-style .slide-title h2 {
        font-size: 45px;
        font-weight: 600;
        color: var(--color-1st);
        margin: 0 0 30px;
        text-transform: capitalize;
        transition: .4s
    }

.play {
    z-index: 1
}

.circle {
    stroke-dasharray: 52;
    animation: 3s linear infinite rotate;
    transition: color 1s linear, stroke-dasharray 1s linear;
    z-index: 0
}

.bottom--categories .categories {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    background: var(--color-1st);
    transform: translateY(20px);
    margin-top: -20px;
    position: relative
}

    .bottom--categories .categories li {
        padding: 10px
    }

        .bottom--categories .categories li a {
            color: #fff
        }

.categories .category-first {
    border-bottom-left-radius: 30px
}

.categories > li:hover {
    background: #ed892f;
    border-radius: 0 30px
}

.categories-child:hover .sub--child {
    opacity: 11;
    visibility: visible;
    transform: translateX(0);
    transition: .2s
}

.categories-child .sub--child {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-1st);
    text-align: left;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: .2s;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.logo-pro {
    position: absolute;
    bottom: 90%;
    right: 40px
}

.card-video,
.categories-child a,
.image-cat,
.lien-he a,
.nav-bottom .sub-menu-wrap ul li,
.nav-bottom ul li a,
.post_chothue .post .image {
    position: relative
}

.categories-child > a::before {
    position: absolute;
    content: '+';
    right: -10px
}

.lien-he a::before {
    font-family: Linearicons !important;
    position: absolute;
    content: '\ec44';
    right: -20px
}

.bottom--categories .categories .sub--child > li a:hover {
    color: #ed892f
}

.sub--child > li > a {
    padding: 10px;
    display: block
}

.header_wrap.nav-fixed .top--header,
.section_post_news {
    display: none
}

.header_wrap.nav-fixed .top_menu_pc {
    padding: 5px 0 !important
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media (max-width:1199px) {
    .hero-style .slide-title h2 {
        font-size: 75px
    }
}

.hero-style .slide-text p {
    opacity: .8;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--color-1st);
    margin: 0 0 40px;
    transition: .4s
}

.hero-style .slide-btns > a:first-child {
    margin-right: 10px
}

.theme-btn,
.theme-btn-s2 {
    background-color: #ed892f;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
    padding: 9px 32px;
    display: inline-block;
    line-height: initial;
    transition: .4s
}

.blog-media .image,
.blog-media-new .item .image,
.danhmuc,
.duan_noibat .post_wrap .image_wrap {
    border-radius: 10px
}

.blog-news .info .decs-post,
.decs-pro,
.title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

a {
    transition: .2s
}

.theme-btn-s2:active,
.theme-btn-s2:focus,
.theme-btn-s2:hover,
.theme-btn:active,
.theme-btn:focus,
.theme-btn:hover {
    background-color: #2b3b95;
    color: #fff
}

.theme-btn-s3 {
    font-size: 16px;
    line-height: 1.5;
    color: #fff
}

i.fa-chevron-circle-right {
    height: 22px;
    width: 22px
}

@media (max-width:991px) {

    .hero-slider,
    .hero-style {
        height: 600px
    }

        .hero-style .slide-title h2 {
            font-size: 50px;
            margin: 0 0 35px
        }

    .theme-btn,
    .theme-btn-s2,
    .theme-btn-s3 {
        font-size: 13px;
        padding: 15px 25px
    }
}

@media (max-width:767px) {

    .hero-slider,
    .hero-style {
        height: 500px
    }

        .hero-slider .swiper-button-next,
        .hero-slider .swiper-button-prev {
            display: none
        }

        .hero-style .slide-title h2 {
            font-size: 35px;
            margin: 0 0 30px
        }

        .hero-style .slide-text p {
            font-size: 1rem;
            font-weight: 400;
            margin: 0 0 30px
        }

    .theme-btn,
    .theme-btn-s2 {
        padding: 13px 20px;
        font-size: 13px
    }
}

.nav-bottom ul li > a,
.section_post_news.active {
    display: block
}

.sub-menu-wrap .btn-a a {
    padding: 10px 20px
}

.nav-bottom ul li a {
    padding: 10px 0
}

.nav-bottom ul li.active > a,
.nav-bottom ul li:hover > a,
.section_title h4,
.section h2.title_lon {
    color: var(--color-1st);
}

.nav-bottom ul > li {
    position: unset
}

.nav-bottom > ul {
    border-top: 1px solid #dddddd3f
}

    .nav-bottom ul li::before,
    .nav-bottom > ul > li > a::before {
        position: absolute;
        width: 0;
        background: var(--color-1st);
        transition: .2s;
        content: '';
        height: 1px;
        bottom: 100%;
        left: 0
    }

    .nav-bottom ul li.active::before,
    .nav-bottom ul li:hover::before,
    .nav-bottom > ul > li > a:hover::before {
        width: 100%;
        transition: .2s
    }

.nav-bottom ul li.active::before {
    transform: scaleX(1);
}

.nav-bottom ul li.active::before,
.nav-bottom ul li:hover::before {
    width: 100%;
}

.nav-bottom ul li.active > a,
.nav-bottom ul li:hover > a {
    color: var(--color-1st);
}

.blog-media .image,
.blog-media-new .item .image,
.blog-media-new .right-blog .item,
.blog-news,
.image-cat {
    overflow: hidden
}

    .blog-news .info {
        padding: 0 20px 20px
    }

        .blog-news .info .decs-post {
            line-height: 25px;
            -webkit-line-clamp: 3;
            height: 75px
        }

        .blog-news .info .category span {
            padding: 5px 30px;
            background: var(--color-1st);
            color: #fff;
            display: inline-flex;
            margin: 10px 0;
            border-radius: 30px
        }

.slide-btns span {
    font-weight: 700;
    font-size: 18px
}

.section-products .product {
    background: 0 0
}

    .blog-media-new .right-blog .title a,
    .blog-media-new .right-blog .title h5,
    .copyright *,
    .image-cat .info *,
    .post_chothue .text-post *,
    .section-products .decs-pro,
    .section-products .product .intro .decs-pro *,
    .section-products .product .intro .title h3 a,
    .sub-menu-wrap .intro .decs * {
        color: #fff
    }

.blog-media-project .section-products .product .intro .decs-pro * {
    color: #000;
    font-size: 16px
}

.categories .product_img {
    aspect-ratio: 1200/800
}

.section-products .product .project:hover {
    border-bottom: 3px solid var(--color-1st)
}

.menu-footer ul {
    display: grid;
    gap: 10px;
    padding-left: 17px
}

.blog_text table,
.image_video img,
figure.table table {
    margin: auto
}

.center--footer {
    padding: 20px 0
}

    .center--footer .warth .title_footer h3 {
        font-weight: 700;
        margin: 0 0 20px;
        position: relative;
        padding: 0 0 20px
    }

        .center--footer .warth .title_footer h3::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--color-1st)
        }

.btn-contact a {
    background: var(--color-1st);
    padding: 5px 30px;
    border-radius: 20px;
    color: #fff;
    display: inline-flex;
    margin: 20px 0
}

.danhmuc {
    padding: 10px;
    box-shadow: 0 0 5px 0 #ddd
}

.blog--details h1 {
    font-size: 24px
}

.botton-content .title {
    border-bottom: 1px solid #ddd
}

    .botton-content .title h3 {
        border-bottom: 1px solid var(--color-1st);
        display: inline-block;
        padding: 10px 0;
        margin-bottom: 0
    }

.tamnhin .noidung .title,
.thongtin .title h3,
.trietly .left_trietly .title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px
}

.blog-media-project .section-products .decs-pro {
    color: #000
}

.decs-pro {
    -webkit-line-clamp: 3;
    height: 75px;
    line-height: 25px
}

.product_wrap .title {
    height: 55px
}

.title {
    -webkit-line-clamp: 2;
    height: 48px;
    line-height: 25px;
    margin-bottom: 15px
}

.blog-media-project {
    background: #fff
}

    .blog-media .section_header,
    .blog-media-project .section_header {
        background: #dddd
    }

    .blog-media-project .project .title h3 a {
        color: var(--color-1st) !important
    }

.banlanhdao .lanhdao .item {
    margin: 10px;
    text-align: center
}

.solieu_ul {
    list-style-type: none;
    padding-left: 0;
    display: grid;
    justify-content: end
}

    .solieu_ul .solieu_li {
        display: grid;
        gap: 50px;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #dddd;
        padding: 15px
    }

.tamnhin .noidung {
    position: absolute;
    background: #fff;
    width: 25%;
    top: 100px;
    padding: 20px
}

.trietly .left_trietly .title {
    display: flex;
    justify-content: center;
    text-align: center
}

.trietly .left_trietly .btn-a {
    text-align: center
}

.tamnhin .noidung .title::before,
.trietly .left_trietly .title::before {
    position: absolute;
    bottom: 0;
    width: 100px;
    content: '';
    height: 1px;
    background: var(--color-1st)
}

.trietly .left_trietly {
    padding: 40px
}

.btn-a {
    margin: 20px 0
}

    .btn-a a {
        background: var(--color-1st);
        padding: 10px 30px;
        border-radius: 20px;
        color: #fff
    }

.menu-footer iframe {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ffff
}

.detail-decs ul {
    list-style-type: none;
    padding-left: 0;
    display: grid;
    gap: 10px
}

.name_lanhdao h4,
.section-news .title_news h4,
.title_chothue h4,
.title_news_nho h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.datdiemchinh .datdiem {
    justify-items: center
}

.thongtin .title h3 {
    border-bottom: 1px solid #ddd
}

    .thongtin .title h3::before {
        content: '';
        position: absolute;
        background: var(--color-1st);
        width: 100px;
        height: 1px;
        bottom: 0;
        left: 0
    }

.project .image {
    border-radius: 20px;
    overflow: hidden
}

.pr_detail .name .title {
    font-size: 1.4rem
}

.blog-media-new .right-blog .title {
    background: var(--color-1st);
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 2;
    height: 47px;
    display: -webkit-box-orient;
    -webkit-box-orient: vertical
}

.blog-news .image {
    height: 245px;
    overflow: hidden
}

.blog-media-new .right-blog .image {
    max-height: 185px
}

.blog-media-chothue .post .image,
.image-cat {
    max-width: 439px;
    max-height: 277px;
    overflow: hidden
}

.blog-media-new .left-blog .item .image {
    overflow: hidden;
    height: 100%;
    border-radius: 10px
}

.blog-media-new .left-blog .item {
    height: 100%
}

.blog-media .image img,
.blog-media-new .item img,
.image-cat img {
    transform: scale(1);
    transition: .2s
}

.blog-media .image:hover img,
.blog-media-new .item:hover img,
.image-cat:hover img {
    transform: scale(1.5);
    transition: .2s
}

.cat_name {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(180deg, #ffffff00, #000);
    padding: 20px
}

.duan .item-duan,
.item-tuvan,
.slider-cacbuoc .item_cac .item {
    background-color: rgba(128, 128, 128, .12);
    backdrop-filter: blur(4.6px)
}

.cat_name h5 {
    color: #fff;
    padding: 10px 0;
    margin: 10px 0
}

.slider-cacbuoc .item_cac .item {
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    padding: 20px
}

.blog-media-chothue .section-products .product .intro .title h3 a,
.duan-noibat .title h3 a {
    color: #fff !important
}

.duan .item-duan {
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden
}

.datdiem .item .image img {
    max-width: 80px;
    max-height: 80px
}

.category-name {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0
}

    .category-name button {
        border: 0;
        background: #fff;
        padding: 10px 20px
    }

        .button-line.active,
        .category-name button:hover {
            background: var(--color-1st);
            color: #fff
        }

.item-tuvan {
    border: 1px solid;
    border-radius: 10px;
    padding: 20px
}

.image-cat .info {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    align-content: center;
    height: 100%;
    padding: 50px
}

    .image-cat .info::before {
        position: absolute;
        left: 0;
        width: 0;
        top: 0;
        background: 0;
        height: 0;
        content: '';
        z-index: 0
    }

.image-cat:hover .info::before {
    background: 0;
    width: 100%;
    height: 100%;
    background: #000000c2
}

.image-cat .info .decs-pro,
.image-cat .info .title_cat,
.image-cat .info h4 {
    position: relative;
    z-index: 1;
    text-align: center
}

.duan_noibat {
    margin-top: 50px;
    border-top: 1px solid var(--color-1st);
    padding-top: 50px
}

.post_chothue .text-post {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff00, #000)
}

    .post_chothue .text-post .icon {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        border: 1px solid #ffff;
        justify-content: center;
        align-items: center;
        margin-bottom: 0
    }

.left-blog {
    height: 460px
}

.title_news_nho {
    padding: 0 0 10px;
    overflow: hidden
}

    .title_news_nho h5 {
        padding: 10px;
        -webkit-line-clamp: 2;
        height: 49px
    }

.title_chothue h4 {
    -webkit-line-clamp: 2;
    height: 49px
}

.section-news .posts .image {
    max-height: 213px;
    overflow: hidden;
    border-radius: 10px
}

.section-news .card-video {
    max-height: 517px;
    overflow: hidden;
    border-radius: 10px
}

.section-news .title_news h4 {
    -webkit-line-clamp: 2;
    margin-bottom: 15px;
    text-align: center;
    padding: 0 20px
}

.cat_name.show {
    background: linear-gradient(180deg, #ffffff00, var(--color-1st))
}

.slider-dautrang .image {
    width: 100%;
    height: 90vh
}

.dichvu_con {
    margin: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    align-content: center
}

    .dichvu_con .line {
        background: #ececec;
        padding: 10px 20px;
        color: #000;
        font-size: 14px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px
    }

        .dichvu_con .line.shop {
            background: var(--color-1st);
            color: #ffff
        }

.btn-duan a {
    padding: 5px 20px;
    background: 0 0;
    font-size: 14px
}

.related-post .post_wrap,
.rf-post .post_wrap {
    margin: 10px
}

.cacbuoc .post_wrap .intro_wrap .title,
.section_post .post_wrap .intro_wrap .title {
    height: unset
}

.section-products .project {
    border-bottom: 3px solid #dddd
}

.item-blog .slider-pro .project {
    margin: 10px;
    border-bottom: 3px solid #dddd
}

.product-image .slick-track {
    margin-left: auto;
    margin-right: auto
}

.name_lanhdao h4 {
    line-height: 25px;
    height: 26px
}

.table td, .table th {
    border-top: 0;
}

.datdiemchinh .right-item iframe {
    width: 100%;
}