﻿@media (min-width: 992px) {
    #main {
        margin-top: 140px;
    }
}

@media (max-width: 992px) {
    #main {
        margin-top: 100px;
    }
}

/*css for call phone*/
.hotline-phone-ring-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999;
}

.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: 86px;
    height: 86px;
    top: 10px;
    left: 11px;
    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: .5
}

.hotline-phone-ring-circle-fill {
    width: 56px;
    height: 56px;
    top: 25px;
    left: 26px;
    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: 34px;
    height: 34px;
    top: 36px;
    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;
    line-height: 40px;
    border-radius: 3px;
    padding: 0 10px;
    background-size: 100%;
    cursor: pointer;
    transition: all .8s;
    -webkit-transition: all .8s;
    z-index: 9;
    border-radius: 50px !important;
    width: 40px !important;
    left: 34px;
    bottom: 37px;
}

    .hotline-bar > a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        text-indent: 50px;
        display: block;
        letter-spacing: 1px;
        line-height: 40px
    }

        .hotline-bar > a:hover, .hotline-bar > a:active {
            color: #fff
        }

    .hotline-phone-ring-wrap:hover .hotline-bar, .hotline-bar:hover {
        width: 210px !important;
        left: 20px;
    }

.text-hotline {
    opacity: 0;
    transition: all .8s;
}

.hotline-phone-ring-wrap:hover .hotline-bar .text-hotline, .hotline-bar:hover .text-hotline {
    opacity: 1;
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.5) skew(1deg);
        -webkit-opacity: .1;
    }

    30% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        -webkit-opacity: .5
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: .1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: .6
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        opacity: .6
    }

    100% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: .6
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    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)
    }
}
/*end css for call phone*/

/*start css for tin bài*/
.tin-bai section {
    text-align: justify;
}

.tin-bai ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tin-bai .list-icon li {
    font-size: 15px;
    margin: 0;
}

.tin-bai .list-border li {
    border-bottom: 1px dashed #d3d3d3;
    padding: 10px 0;
}

.text-theme-colored {
    color: rgba(var(--palette-color-lit-2), 1) !important;
}

.tin-bai .custom-author {
    float: right;
}

.tin-bai .entry-title.text-white.pt-0.mt-0 {
    font-size: 18px;
}

.tin-bai .font-13 {
    font-size: 13px !important;
}

.hover-danger:hover {
    color: #f36746 !important;
}

.tin-bai img {
    max-width: 100%;
    height: auto !important;
}
/*end css for tin bài*/

.custom-news-right {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .custom-news-right .text-uppercase {
        font-size: 18px;
    }

    .custom-news-right p {
        font-size: 13px;
    }

.post-item {
    border-bottom: 1px dashed #d3d3d3;
    padding: 5px 0px;
}

    .post-item:hover {
        color: #f36746;
    }

.img-thumb-right {
    width: 75px;
    height: 60px;
}
/*end css for  trang tin chi tiết*/
#trang-tin-chi-tiet .row.gy-4 p {
    text-align: justify;
}

#trang-tin-chi-tiet .row.gy-4 img {
    /*height: 100vh;*/
}
/*end css for  trang tin chi tiết*/

button.generic-button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px;
    border-radius: 4px;
    transition: 0.5s;
    color: #fff;
    background: rgba(var(--palette-color-lit-2), 1);
    border: 0;
}

    button.generic-button:hover {
        background: rgba(var(--palette-color-lit-2), 0.8);
    }


.split-bar-1 {
    border-top: rgba(var(--palette-color-lit-2), 0.3) solid 3px;
    opacity: 1;
    color: white;
    margin: 2px 0px;
    width: 100%;
}

.split-bar-2 {
    border-top: rgba(var(--palette-color-lit-2), 0.2) solid 3px;
    opacity: 1;
    color: white;
    margin: 2px 0px;
    width: 50%;
}

.split-bar-3 {
    border-top: rgba(var(--palette-color-lit-2), 0.1) solid 3px;
    opacity: 1;
    color: white;
    margin: 2px 0px;
    width: 25%;
}

body {
    background-color: white !important;
}

[class^="common-box-"], [class*=" common-box-"] {
    border-top: rgba(var(--palette-color-lit-2), 1) 5px solid;
    background: white;
    padding: 20px;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
}

.common-box-15 {
    border-radius: 15px;
}

.common-box-20 {
    border-radius: 20px;
}

.common-box-25 {
    border-radius: 25px;
}

.file-button {
    text-align: center;
    cursor: pointer;
}

    .file-button > * {
        vertical-align: middle;
    }

    .file-button .fa-file-word::before,
    .file-button .fa-file-excel::before,
    .file-button .fa-file-archive::before,
    .file-button .fa-file-alt::before,
    .file-button .fa-file-pdf::before,
    .file-button .fa-file-powerpoint::before {
        font-size: 30px;
    }

.pdf-button {
    color: #cb0606;
}

    .pdf-button:hover {
        color: #cb0606BB;
    }

.word-button {
    color: #0606cb;
}

    .word-button:hover {
        color: #0606cbBB;
    }

.excel-button {
    color: #06cb06;
}

    .excel-button:hover {
        color: #06cb06BB;
    }

.powerpoint-button {
    color: #cb6806;
}

    .powerpoint-button:hover {
        color: #cb6806BB;
    }

.archive-button {
    color: #cb06cb;
}

    .archive-button:hover {
        color: #cb06cbBB;
    }


.alt-button {
    color: #222222;
}

    .alt-button:hover {
        color: #222222BB;
    }

.section-title.sole {
    padding-bottom: 10px;
}

    .section-title.sole > h3 {
        margin: 0px;
    }

.common-top-border-slide {
    /*border: none;*/
    position: relative;
    /*overflow: hidden;*/
}

    .common-top-border-slide::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 10px;
        background-color: rgba(var(--palette-color-lit-2), 1);
        transform-origin: left;
        transition: width 0.5s, transform 0.5s;
    }

    .common-top-border-slide:hover::after {
        width: 100%;
        transform: scaleX(1);
    }

.list-awesome-pagination {
    text-align: center;
    margin-top: 40px;
}

    .list-awesome-pagination li {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

        .list-awesome-pagination li button {
            width: 100%;
            height: 100%;
            outline: none !important;
            padding: 0px;
            border: none;
            color: rgba(var(--palette-color-lit-2), 1);
            background: white;
            border: 1px solid #dee2e6;
        }

        .list-awesome-pagination li.page-disabled button {
            color: #6c757d;
            cursor: default;
        }

        .list-awesome-pagination li:first-child button {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .list-awesome-pagination li:last-child button {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .list-awesome-pagination li:hover:not(.page-disabled) button,
        .list-awesome-pagination li.page-active button {
            background: rgba(var(--palette-color-lit-2), 1);
            color: white;
            border: 1px solid rgba(var(--palette-color-lit-2), 1);
        }

.neo-pagination {
    text-align: center;
    margin-top: 40px;
}

    .neo-pagination ul {
        padding: 0px;
    }

    .neo-pagination li {
        width: min(60px, max(45px, calc(1vw + 40.8px)));
        height: min(60px, max(45px, calc(1vw + 40.8px)));
        display: inline-block;
        border-radius: 9999px;
    }

        .neo-pagination li:not(:first-child) {
            margin-left: min(20px, max(15px, calc(0.3vw + 14.24px)));
        }

        .neo-pagination li button {
            width: 100%;
            height: 100%;
            outline: none !important;
            padding: 0px;
            border: none;
            color: rgba(var(--palette-color-lit-2), 1);
            background: white;
            /*border: 1px solid #dee2e6;*/
            border-radius: 9999px;
            font-size: min(17px, max(15px, calc(0.2vw + 13.16px)));
        }

        .neo-pagination li.page-disabled button {
            background: #555555;
            cursor: default;
        }

        .neo-pagination li:hover:not(.page-disabled) button,
        .neo-pagination li.page-active button {
            background: rgba(var(--palette-color-lit-2), 1);
            color: white;
            /*border: 1px solid rgba(var(--palette-color-lit-2), 1);*/
        }


#topbar .contact-info .topbar-icon {
    padding-left: 30px;
    position: relative;
    margin-right: 10px;
}

    #topbar .contact-info .topbar-icon::after {
        left: 12px;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        content: '';
    }

    #topbar .contact-info .topbar-icon.icon-location::after {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none"><path d="M7.92857 0C10.0314 0 12.048 0.835329 13.5349 2.32222C15.0218 3.80912 15.8571 5.82578 15.8571 7.92857C15.8571 11.211 13.3552 14.6502 8.45714 18.3238C8.30465 18.4382 8.11918 18.5 7.92857 18.5C7.73796 18.5 7.55249 18.4382 7.4 18.3238C2.5019 14.6502 0 11.211 0 7.92857C0 5.82578 0.835329 3.80912 2.32222 2.32222C3.80912 0.835329 5.82578 0 7.92857 0ZM7.92857 5.28571C7.22764 5.28571 6.55542 5.56416 6.05979 6.05979C5.56416 6.55542 5.28571 7.22764 5.28571 7.92857C5.28571 8.6295 5.56416 9.30172 6.05979 9.79735C6.55542 10.293 7.22764 10.5714 7.92857 10.5714C8.6295 10.5714 9.30172 10.293 9.79735 9.79735C10.293 9.30172 10.5714 8.6295 10.5714 7.92857C10.5714 7.22764 10.293 6.55542 9.79735 6.05979C9.30172 5.56416 8.6295 5.28571 7.92857 5.28571Z" fill="white"/></svg>') no-repeat;
        width: 16px;
        height: 19px;
        content: '';
    }

    #topbar .contact-info .topbar-icon.icon-phone::after {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill="none"><path d="M20.6325 11.5346C20.5174 10.7843 19.8999 10.1993 19.1051 10.0249C16.0154 9.34538 15.2409 7.67588 15.1102 5.82413C14.5623 5.7285 13.5876 5.625 11.933 5.625C10.2785 5.625 9.30377 5.7285 8.75585 5.82413C8.62517 7.67588 7.85066 9.34538 4.76101 10.0249C3.96611 10.2004 3.34866 10.7843 3.23356 11.5346L2.63769 15.4069C2.42788 16.7704 3.49493 18 4.97921 18H18.8868C20.3699 18 21.4382 16.7704 21.2284 15.4069L20.6325 11.5346ZM11.933 15.1785C10.2605 15.1785 8.90452 13.9185 8.90452 12.366C8.90452 10.8135 10.2605 9.5535 11.933 9.5535C13.6055 9.5535 14.9615 10.8135 14.9615 12.366C14.9615 13.9185 13.6043 15.1785 11.933 15.1785ZM23.8624 4.5C23.8337 2.8125 19.2561 0.001125 11.933 0C4.60874 0.001125 0.0312102 2.8125 0.00363467 4.5C-0.0239408 6.1875 0.0288124 8.3835 3.04293 8.01787C6.569 7.58925 6.35199 6.43388 6.35199 4.78237C6.35199 3.63037 9.21984 3.3525 11.933 3.3525C14.6462 3.3525 17.5129 3.63037 17.5141 4.78237C17.5141 6.43388 17.2971 7.58925 20.8231 8.01787C23.8361 8.3835 23.89 6.1875 23.8624 4.5Z" fill="white"/></svg>') no-repeat;
        width: 24px;
        height: 18px;
        content: '';
    }

    #topbar .contact-info .topbar-icon.icon-mail::after {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none"><path d="M6.97514e-09 5.124L10.654 10.665C10.7609 10.7206 10.8795 10.7496 11 10.7496C11.1205 10.7496 11.2391 10.7206 11.346 10.665L22 5.125V14.75C22.0001 15.5801 21.6824 16.3788 21.1123 16.9822C20.5422 17.5856 19.7628 17.948 18.934 17.995L18.75 18H3.25C2.41986 18.0001 1.62117 17.6824 1.01777 17.1123C0.414367 16.5422 0.0519987 15.7628 0.00500012 14.934L6.97514e-09 14.75V5.124ZM3.25 6.97582e-09H18.75C19.5801 -5.43467e-05 20.3788 0.317554 20.9822 0.887671C21.5856 1.45779 21.948 2.23719 21.995 3.066L22 3.25V3.434L11 9.154L6.97514e-09 3.434V3.25C-5.43467e-05 2.41986 0.317554 1.62117 0.887672 1.01777C1.45779 0.414367 2.23719 0.0519987 3.066 0.00500012L3.25 6.97582e-09Z" fill="white"/></svg>') no-repeat;
        width: 22px;
        height: 18px;
        content: '';
    }

#topbar .contact-info {
    line-height: 26px;
}

#topbar .social-link-icons a {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: white;
    font-size: 14px;
    color: var(--palette-color-2);
    text-align: center;
    display: inline-block;
    line-height: 26px;
    transition: 0.3s;
    margin-left: 10px;
}

#hero .btn-watch-video2 {
    color: #212529;
    background-color: #e0e8ef;
    border-color: #e0e8ef;
}
    #hero .btn-watch-video2:hover {
        color: #007fff;
        background-color: #f3f6ff;
/*        border-color: #007fff;*/
    }
