@font-face {
    font-family: Font-Regular;
    src: url("./fonts/GOOGLESANS-REGULAR.TTF") format("truetype");
}

@font-face {
    font-family: Font-Bold;
    src: url("./fonts/GOOGLESANS-BOLD.TTF") format("truetype");
}

@font-face {
    font-family: Font-Medium;
    src: url("./fonts/GOOGLESANS-MEDIUM.TTF") format("truetype");
}

:root {
    --font-normal: "Font-Regular";
    --font-bold: "Font-Bold";
    --font-medium: "Font-Medium";
    --color-main: rgb(0, 88, 147);
    --color-main-yellow: rgb(248, 153, 83);
    --color-text: #333333;
    --height-image-service: 240px;
}


* {
    margin: 0px;
    padding: 0px;
    line-height: 1.5;
}

*,
::before,
::after {
    box-sizing: border-box;
}

p {
    margin-bottom: 0px;
}

a {
    color: var(--color-text);
    transition: all 0.4s ease 0s;
    display: inline-block;
}

a:hover {
    text-decoration: none;
    color: var(--color-main-yellow);
    transition: all 0.4s ease 0s;
}

a:hover *:not(p, .view-count span) {
    color: var(--color-main-yellow);
    transition: all 0.4s ease 0s;
}

a:hover p {
    color: var(--color-text);
}

ul {
    list-style: none;
    margin-bottom: 0px;
}

.mh-auto {
    min-height: auto !important;
}

.mw-auto {
    min-width: auto !important;
}

body {
    font-family: var(--font-normal);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

img {
    max-width: 100%;
    object-fit: cover;
    transition: all .4s;
}

/* img:hover {
    opacity: .8;
} */
strong *,
strong{
    font-family: var(--font-bold);
}

main.overflow {
    overflow-x: hidden;
}
.owl-carousel.owl-drag .owl-item{
    line-height: 0;
}

a:not(.item):focus,
a:not(.item):focus-visible,
input,
input:focus,
button,
button:focus,
select,
select:focus,
select:focus-visible,
textarea,
textarea:focus,
textarea:focus-visible {
    box-shadow: none !important;
    /* border: none; */
    outline: none;
}

.container {
    width: 100%;
    max-width: 1630px;
}

.font-bold {
    font-family: var(--font-bold);
}

.font-black {
    font-family: var(--font-black);
}

.bg-white {
    background-color: white;
}

.bg-blue {
    background-color: var(--text-main);
}

.bg-gray {
    background-color: var(--background-gray-main);
}

.color-gray {
    color: var(--color-text);
}

.bg-color-main {
    background-color: var(--color-main)
}

.color-main {
    color: var(--color-main) !important
}

body.overflow {
    overflow: hidden;
}

.btn {
    transition: all .4s;
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    justify-content: center;
    min-width: max-content;
}

.btn.btn-color-main {
    background: var(--color-main);
    color: #000000;
    border: 1px solid var(--color-main)
}

.btn-color-main:hover {
    background-color: transparent;
    color: var(--color-text);
}

.btn.btn-color-yellow-main {
    background: var(--color-main-yellow);
    color: #FFF;
    border: 1px solid var(--color-main-yellow)
}

.btn-color-yellow-main:hover {
    background-color: transparent;
    color: #fff;
}

.btn.btn-border-color-yellow-main {
    background: transparent;
    color: #FFF;
    border: 1px solid var(--color-main-yellow)
}

.btn-border-color-yellow-main:hover {
    background-color: var(--color-main-yellow);
    color: #fff;
}

.btn.btn-border-color-main {
    border: 1px solid var(--color-main)
}

.text-custom * {
    color: #FFF;
}

.box-image img{
    width: 100%;
    height: 100%;
}
.color-main-yellow{
    color: var(--color-main-yellow);
}
/*scroll top*/
.fixe-wrap-main {
    position: fixed;
    bottom: 30px;
    right: 5px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fixe-wrap-main li {
    margin-top: 5px;
    line-height: 1;
}

.fixe-wrap-main li:not(:first-child) {
    width: 45px;
    height: 45px;
    border-radius: 100%;
}

.scroll-top {
    /* position: fixed; */
    width: 45px;
    height: 45px;
    background-color: var(--color-main-yellow);
    z-index: 18;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFF;
}

.scroll-top i {
    font-size: 18px;
    color: #FFF;
    transition: all .4s;
}

.scroll-top:hover {
    background: var(--color-main);
}

/*  */
.coccoc-alo-ph-circle {
    width: 60px;
    height: 60px;
    top: 0;
    left: 0;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid rgba(30, 30, 30, 0.4);
    opacity: .1;
    -webkit-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.coccoc-alo-phone {
    background-color: transparent;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px;
    top: 30px;
    margin-bottom: -10px;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle-fill {
    background-color: #ed0101;
    opacity: .75 !important;
}

.coccoc-alo-ph-circle-fill {
    width: 45px;
    height: 45px;
    top: 7.5px;
    left: 7.5px;
    position: absolute;
    background-color: #000;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid transparent;
    opacity: .1;
    -webkit-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.coccoc-alo-ph-img-circle {
    width: 45px;
    height: 45px;
    top: 7.5px;
    left: 7.5px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid transparent;
    opacity: .7;
    -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-img-circle {
    background-color: #ed0101;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle {
    border-color: #ed0101;
    opacity: .5;
}
@keyframes moreslide {
    0%,100%{
        transform: translateX(0);
    }

    50% {
        transform: translateX(15px);
    }

  }

@-moz-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }

    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-webkit-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }

    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-o-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }

    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }

    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-moz-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-o-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-moz-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

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

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

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

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

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

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

@-webkit-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

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

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

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

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

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

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

@-o-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

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

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

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

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

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

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

@keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

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

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

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

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

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

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


/* HEADER */
header#header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1400;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(0 98 163 / 90%);
}

header#header .logo {
    min-width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

main {
    margin-top: -75px;
}

header#header.active {
    background-color: var(--color-main);
}

header#header.active .menu #nav>ul li.box-logo a {
    border-color: #a9801a;
}

header#header .header-top {
    padding: 4px 0;
    background-color: #00000033;
}

header#header *:not(input) {
    color: #FFF;
}

header#header .form {
    background-color: transparent;
    border-radius: 18px;
    width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    transition: all .3s;
    position: absolute;
    right: 0;
}

header#header .form input {
    height: 34px;
    width: 100%;
    transition: all .3s;
    color: #000;
    border: none;
    padding-left: 15px;
}

header#header .form input::placeholder {
    color: #000;
}

header#header .form .btn {
    float: right;
    padding-right: 10px;
    margin-right: 0;
    margin: 0;
    height: 34px;
    width: 40px;
    border-radius: 100%;
    background-color: var(--color-main-yellow);
    padding: 0;
}

header#header .header-top ul li a {
    transition: all .4s;
}

header#header .wrap-search-header.active {
    width: 267px;
    background-color: #FFF;
}

/* menu  */
header#header .menu {
    width: 100%;
}

header#header .menu #nav>ul li a {
    font-family: var(--font-bold);
    text-transform: uppercase;
    padding: 27px 25px;
}

header#header .menu #nav>ul>li:first-child a {
    padding-left: 0;
}

header#header .menu #nav>ul>li.active a i,
header#header .menu #nav>ul li a:hover i {
    color: var(--color-main-yellow);
}

header#header .menu #nav>ul li a:hover {
    color: var(--color-main-yellow);
}

header#header .menu #nav>ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header#header .menu #nav>ul li {
    position: relative;
}

header#header .menu #nav>ul>li::before {
    content: "/";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0.102;
    font-size: 18px;
}

.wrap-menu li .wrapper_naviga {
    position: absolute;
    list-style: none;
    min-width: 300px;
    background: rgb(0, 98, 163, 0.702);
    top: 100%;
    transition: all .3s ease-in;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.wrap-menu>li.item-nav:nth-last-child(2) .wrapper_naviga {
    left: auto;
    right: 0
}

.wrap-menu li .wrapper_naviga li:last-child,
.wrap-menu li .wrapper_naviga li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.menu li .wrapper_naviga li a {
    padding: 6px 12px;
    text-transform: uppercase;
    display: block;
    font-size: 14px;
    transition: all .3s ease-in;
    line-height: 1;
}

header#header .menu #nav .wrapper_naviga li.actve,
.wrap-menu li .wrapper_naviga li:hover {
    background: var(--color-main-yellow);
}

.wrapper_naviga li {
    transition: all .4s;
    border-bottom: 1px solid rgb(255, 255, 255, 0.102);
}


.wrapper_naviga li.active,
.wrapper_naviga li:hover>a {
    background: var(--color-main-yellow);
}

header#header .menu #nav .wrapper_naviga li a {
    display: block;
    padding: 15px 20px;
    transition: all .4s;
    color: #FFF;
    padding: 13px 20px 13px 35px;
    text-transform: none;
    position: relative;
    font-size: 15px;
}

header#header .menu #nav .wrapper_naviga li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 1px solid #fff;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.wrapper_naviga .wrapper_recursive {
    position: absolute;
    list-style: none;
    min-width: 230px;
    background: transparent;
    top: 0;
    left: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all .3s ease-in
}

ul.wrapper_naviga li:hover>.wrapper_recursive,
.wrap-menu li:hover>.wrapper_naviga {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wrap-menu li .wrapper_naviga li .wrapper_naviga{
    left: 100%;
    top: 0;
}
header#header .menu #nav .wrapper_naviga li:hover a,
header#header .menu #nav .wrapper_naviga li.active a {
    color: #FFF;
}

.icon-toggleSubmenu {
    display: none;
}

.box-search {
    padding: 10px 0 10px 15px;
    display: flex;
    align-items: center;
    margin-right: 40px;
    position: relative;
}

.box-search img {
    cursor: pointer;
}

.toggle-search-header.active {
    opacity: 0;
}




/* slide main  */
#banner-main {
    position: relative;
}
#banner-main> a{display: block; width: 100%;}
#banner-main> a>img{display: block; width: 100%;}
#banner-main>img{
    width: 100%;
    max-height: 450px;
}

#banner-main img:hover {
    opacity: 1;
}

#banner-main .owl-carousel .owl-stage {
    display: block !important;
}

#banner-main .owl-carousel .owl-item .item {
    width: 100%;
}

#banner-main .owl-carousel .owl-item .item img {
    width: 100%;
}




.banner-main .owl-theme .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.owl-theme .owl-dots {
    margin-top: 15px;
    display: none;
}

.owl-theme .owl-nav {
    margin: 0;
    height: 0;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #028740;
}

section.wrap-box-main .owl-theme .owl-dots {
    height: 0px;
    margin: 0px;
}

.owl-carousel .owl-nav button span,
.owl-carousel .owl-nav button span {
    font-size: 30px;
}

.owl-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    margin-top: -35px;
    background: transparent !important;
    opacity: 1 !important;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
}

.owl-carousel .owl-nav button {
    top: 50%;
    transform: translateY(-50%);
    margin: 0!important;
}

.owl-carousel .owl-nav button.owl-prev {
    left: 0px;
}

.owl-carousel .owl-nav button.owl-next {
    right: 0px;
}
#slide-index.owl-carousel .owl-nav button.owl-prev {
    left: 10px;
}

#slide-index.owl-carousel .owl-nav button.owl-next {
    right: 10px;
}

.owl-carousel .owl-nav button::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    border: 2px solid transparent;
    background-color: rgb(242, 242, 242);
}
#slide-index.owl-carousel .owl-nav button::before {
    opacity: 0.552;
    border: 2px solid #fff;
    background: rgb(0, 0, 0, 40%) !important;
}
.owl-carousel .owl-nav button.owl-prev::before {
    content: url(../images/icon-prev-gray.png);
    padding-right: 3px;
}
.owl-carousel .owl-nav button.owl-next::before {
    content:  url(../images/icon-next-gray.png);
    padding-right: 0px;
    padding-left: 3px;
}
#slide-index.owl-carousel .owl-nav button.owl-prev::before {
    content: url(../images/icon-prev.png);
}
#slide-index.owl-carousel .owl-nav button.owl-next::before {
    content:  url(../images/icon-next.png);
}
.owl-carousel .owl-nav button:hover::before,
#slide-index.owl-carousel .owl-nav button:hover::before{
    border-color: var(--color-main-yellow);
}
  

.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
    display: none;
}


/* pagination  */
.paging {
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 20px;
}

.paging a {
    display: flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid rgb(205, 205, 205);
    transition: all .4s;
    margin: 0 3px;
    line-height: 1;
    padding-top: 1px;
}
.paging a.dau,
.paging a.truoc,
.paging a.sau,
.paging a.cuoi{
    font-size: 0;
    position: relative;
}
.paging a.dau:before,
.paging a.truoc:before,
.paging a.sau:before,
.paging a.cuoi:before{
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 50%;
    display: block;
    font-size: 16px;
    transform: translateY(-50%);
    line-height: 1;
    margin-top: 1px;
}
.paging a.dau:before{
    content: "\f100";
}
.paging a.truoc:before{
    content: "\f104";
}
.paging a.sau:before{
    content: "\f105";
}
.paging a.cuoi:before{
    content: "\f101";
}

.paging i {
    margin-bottom: -4px;
}

.paging a:hover,
.paging a:hover i,
.paging a.hientai {
    background-color: var(--color-main);
    color: #FFF!important;
    border-color: var(--color-main)
}




/* berma  */
section#burmerrus{
    padding: 0!important;
}
#burmerrus ul{
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: rgb(255, 255, 255, 0.949);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: -50px;
    position: relative;
    z-index: 2
}
#burmerrus ul li{
    margin-right: 10px;
    font-size: 14px;
    font-family: var(--font-normal);
    min-width: max-content;
}
#burmerrus ul li *{
    color: rgb(51, 51, 51);
}
#burmerrus ul li i{
    margin-right: 10px;
    color: rgb(51, 51, 51);
}
#burmerrus ul li:first-child i{
    margin-right: 2px;
}
#burmerrus ul li a:hover, #burmerrus ul li a:hover *{
    color: var(--color-main-yellow);
}
/* footer  */
footer#footer {
    background: url(../images/bg-footer.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    padding-top: 55px;
}

footer#footer a {
    color: #FFF;
}

footer#footer a:hover {
    color: var(--color-main-yellow);
}

footer#footer .title-footer {
    font-size: 16px;
    text-transform: uppercase;
    font-family: var(--font-bold);
    margin-bottom: 20px;
}

footer#footer .box-lacainfo {}

footer#footer .box-lacainfo li {
    margin-bottom: 10px;
}

footer#footer .box-lacainfo.box-location {
    margin-bottom: 20px;
}

footer#footer .box-lacainfo.box-location li {
    margin-bottom: 2px;
}

footer#footer .box-lacainfo li i {
    margin-right: 5px;
}

footer#footer .box-lacainfo li .box-img {
    min-width: 16px;
    margin-right: 5px;
    display: inline-block;
    line-height: 0;
}

footer#footer .btn {
    font-size: 13px;
    padding-bottom: 3px;
    margin:0;
    margin-right: 10px;
}

footer#footer .btn:hover {
    color: #FFF;
}

footer#footer .btn img {
    margin-top: -3px;
    margin-right: 3px;
}

footer#footer .footer-last {
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding: 24px 0;
    margin-top: 10px;
    display: none;
    text-align: left!important;
}

footer#footer .footer-last a {
    opacity: .7;
}

footer#footer .footer-last a:hover {
    opacity: 1;
}

footer#footer .form {
    margin-top: 15px;
}

footer#footer .form .btn {
    padding-bottom: 6px;
    margin-left: 0;
    margin-top: 5px;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

footer#footer .form .form-group .form-control {
    border: none;
    font-size: 16px;
}

footer#footer .form .form-group .form-control::placeholder {
    color: rgb(153, 153, 153);
}

footer#footer .form .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

footer#footer .form .form-group input {
    flex: 0 0 calc(50% - 2.5px);
    max-width: calc(50% - 2.5px);
    margin-bottom: 5px;
}

footer#footer .form .form-group input:nth-child(odd) {
    margin-right: 5px;
}

footer#footer .footer-last-mobile{
    display: block
}
@media (min-width:991px) {
    footer#footer .footer-last-mobile{
        display: none;
    }
    footer#footer .footer-last-pc{
        display: block;
    }
}





/*  */
/*  */
/*  */
/*  */

/* service-index */
#service-index {
    padding-top: 55px;
    background: #F2F2F2;
    padding-bottom: 165px;
}

.title-section,
.title-section a{
    font-size: 36px;
    font-family: var(--font-bold);
    color: var(--color-main);
}
.title-section:hover a{
    color: var(--color-main-yellow);
}
.box-title-section{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.box-title-section .view-more{
    color: rgb(153, 153, 153);
    display: flex;
    align-items: center;
}
.box-title-section .title-section{
    margin-bottom: 0;
}
.box-title-section .view-more i{
    margin-bottom: -2px;
    margin-left: 5px;
}
.box-title-section .view-more:hover{
    color: var(--color-main-yellow);
}

  

#service-index .content-service {
    font-size: 16px;
    color: rgb(51, 51, 51);
}

.box-title-service {
    padding-bottom: 50px;
}

.box-item-service {
    background-color: #ffffff;
    height: 100%;
}

.box-item-service .title-content{
    display: flex;
    align-items: flex-start;
    padding: 25px 20px 25px 30px;
    /* height: calc(100% - var(--height-image-service) + 50px ); */
}
.box-item-service .title-content .img{
    min-width: max-content;
    margin-right: 28px;
}
.box-item-service .title-content .img img{
    min-width: max-content;
}
.box-item-service .title-content .content-title-service{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box-item-service .title-content .content-title-service h3{
    font-size: 22px;
    line-height: 1.364;
    text-transform: uppercase;
    color: var(--color-main);
    min-height: 60px;
}
.box-item-service .title-content .content-title-service h3:hover{
    color: var(--color-main-yellow);
}
.box-item-service .title-content .content-title-service p{
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.box-item-service .box-image{
    margin-bottom: -55px;
    width: calc(100% - 20px);
    margin-right: 20px;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /* height: var(--height-image-service); */
}
.box-item-service .box-image img{
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

}
.row.wrap-item-service{
    margin-left: -10px;
    margin-right: -10px;
}
.row.wrap-item-service [class*="col-"]{
    padding-left: 10px;
    padding-right: 10px;
}



/* blogs  */
section#blogs{
    padding: 60px 0 20px;
}
section#blogs .box-title-section{
    margin-bottom: 20px;
}
.wrap-blog-main{}
.wrap-blog-main [class*="col-"]{
    margin-bottom: 40px;
}
.item-blog-index{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.item-blog-index .title-blog h3{
    font-size: 18px;
    font-family: var(--font-bold);
    color: #333333;
    margin-bottom: 10px;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-blog-index .title-blog h3:hover{
    color: var(--color-main-yellow);
}
.item-blog-index .wrap-blog{
    display: flex;
}
.item-blog-index .wrap-blog .box-image{
    width: 200px;
    min-width: 200px;
    height: 133px;
    margin-right: 15px;
    border-radius: 5px;
}
.item-blog-index .wrap-blog p{
    font-size: 16px;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: 95px;
    text-align: justify;
}

/* ABOUT INDEX */
section#about-index{
    background: url(../images/bg-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 65px 0;
}
.box-about-index{
    padding-bottom: 50px;
}
.box-about-index .title,
.box-about-index .title a{
    font-size: 20px;
    color: #FFF;
    font-family: var(--font-bold);
    margin-bottom: 10px;
    line-height: 1.5;
    text-transform: uppercase;
}
.box-about-index .title:hover a{
    color: var(--color-main-yellow);
}
.box-about-index p{
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    color: #FFF;
}
.wrap-number-about{
    text-align: center;
    height: 100%;
}
.wrap-number-about .item-why-about{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: calc(100% / 3);
}
.wrap-number-about .item-why-about h4{
    font-size: 50px;
    color: var(--color-main-yellow);
    font-family: var(--font-bold);
    margin-bottom: 5px;
    line-height: 1;
}
.wrap-number-about .item-why-about .counter{
    line-height: 1;
}
.wrap-number-about .item-why-about p{
    font-size: 18px;
    color: #FFF;
}
  
.wrap-about-left .box-about-index:last-child{
    padding-bottom: 0;
}


/* document  */
.wrap-document-index{}
.wrap-document-index .title-section,
.wrap-document-index .title-section a{
    font-size: 28px;
    color: #FFF;
}
.wrap-document-index .title-section:hover a{
    color: var(--color-main-yellow);
}
.wrap-document-index .view-more{
    color: var(--color-main-yellow);
}
.wrap-document-index .view-more:hover,
.wrap-document-index .view-more:hover *{
    color: #FFF;
}
.wrap-document-index .box-title-section{
    margin-bottom: 25px;
}
.box-item-document{
}
.box-item-document .item:first-child{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.box-item-document .item:last-child{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.box-item-document .item{
    display: flex;
    align-items: center;
    border:1px solid rgb(0, 75, 125);
    padding: 14px 20px;
} 
.box-item-document .item:nth-child(even){
    background-color: rgba(0, 85, 141, 0.702);

}
.box-item-document .item:nth-child(odd){
    background-color: rgba(0, 76, 126, 0.702);

}
  
.box-item-document .item .number{
    font-size: 28px;
    color: var(--color-main-yellow);
    font-family: var(--font-bold);
    position: relative;
    padding-right: 20px;
    margin-right: 20px;
}
.box-item-document .item .number:before{
    content: "";
    width: 1px;
    height: 85%;
    background-color: rgb(30 30 30 / 45%);
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotate(10deg) translateY(-50%);
}
.box-item-document .item h3{
    font-size: 15px;
    color: #FFF;
    margin-bottom: 0;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#list-customer{
    padding: 44px 0 40px;
}
#list-customer .owl-carousel .item img{
    width: max-content;
}

#list-customer .owl-carousel .owl-stage{
    display: flex;
}
#list-customer .owl-carousel .item{
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* view count  */
.view-count {
    display: flex;
    align-items: center;
}

.view-count div {
    display: flex;
    align-items: center;
}

.view-count div:first-child {
    margin-right: 30px;
}

.view-count div img {
    width: auto !important;
    max-width: max-content;
    height: max-content!important;
}

.view-count div span {
    font-size: 14px;
    display: inline-block;
    margin-left: 5px;
    line-height: 1;
    margin-bottom: -2px;
    color: rgb(153, 153, 153);
}
  

/* about  */
.wrap-blog-main-index{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    padding:50px 30px 30px;
    margin-bottom: 60px;
}
.wrap-blog-main-index .title-section{
    margin-bottom: 20px;
}
.wrap-blog-main-index .col-main-left{
    flex: 0 0 79%;
    max-width: 79%;
}
.wrap-blog-main-index .col-right{
    flex: 0 0 21%;
    max-width: 21%;
}
.item-about .box-title{}
.item-about .box-title .title h3{
    text-transform: uppercase;
    font-size: 18px;
    font-family: var(--font-bold);
    text-transform: uppercase;
    margin: 15px 0;
    line-height: 1.5;

    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 54px;
}
.item-about .box-title .content-blog{
    margin-top: 15px;
    color: rgb(51, 51, 51);
    font-size: 16px;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.item-about{
    height: 100%;
}
.item-about .box-image{
    width: 100%;
    max-width: 362px;
}
  

/*  */
.wrap-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgb(231, 231, 231);
    border-bottom: 1px solid rgb(231, 231, 231);
    margin-top: 35px;
    margin-bottom: 20px;
    width: 100%;
}

.wrap-share ul {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0;
    justify-content: center;
}

.wrap-share ul li {
    margin-right: 5px;
    display: flex;
    align-items: center;
}
.wrap-share .right ul li:first-child{
    margin-right: -10px;
}
.wrap-share .left li a {
    background-color: #F2F2F2;
    color: #b2b2b2;
    border-radius: 5px;
    height: 25px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    transition: all .4s;
    font-family: var(--font-Myriadpro);
}

.wrap-share li i {
    color: #b2b2b2;
    margin-right: 5px;
    transition: all .4s;
}

.wrap-share .left li a:hover {
    background-color: var(--color-main);
    color: #FFF;
}

.wrap-share .left li a:hover i {
    color: #FFF;
}
.view-header{
    margin-top: 0;
}
.view-header *:not(i){
    font-family: var(--font-Myriadpro)!important;
}

.view-count {
    display: flex;
    align-items: center;
}

.view-count div {
    display: flex;
    align-items: center;
}

.view-count div:first-child {
    margin-right: 40px;
}

.view-count div img {
    width: auto !important;
    max-width: max-content;
    height: max-content!important;
}

.view-count div span {
    font-size: 14px;
    display: inline-block;
    margin-left: 5px;
    font-family: var(--font-Myriadpro)!important;
    color: #b4b4b4;
    line-height: 1;
    margin-bottom: -5px;
}
.cover-size{
    padding: 8px 0;
    color: #707070;
}
.cover-size span:first-child{
    cursor: pointer;
    font-size: 14px;
}
.cover-size .cover{
    background:#f6f6f6;
    display: inline-flex;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    transition: all .4s;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    cursor: pointer;
}
.cover-size .cover:hover{
    background-color: var(--color-main);
}
.cover-size .cover:hover i{
    color: #FFF;
}
.cover-size .cover i{
    color: #999999;
}
.box-title-main .title-content{
    margin-bottom: 15px;
}
.box-title-main .title-content h3{
    font-size: 24px;
    font-family: var(--font-bold);
    color: var(--color-main);
}
.box-title-main .title-content p{
    font-size: 17px;
}
.wrap-blog-detail-main{
    font-size: 16px;
} 
.wrap-blog-detail-main p{
    margin-bottom: 25px;
    text-align: justify;
}

.wrap-blog-detail-main img{
    max-width: 100%!important;
    height: auto!important;
    margin: 10px auto;
    display: block;
}
.wrap-blog-detail-main ul{
    padding: 10px 0 0;
}
.wrap-blog-detail-main ul li{
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}
.wrap-blog-detail-main ul li::before{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: var(--color-text);
    position: absolute;
    left: 0;
    top: 9px;
}

.wrap-blog-detail-main table{width: 100%;}
.wrap-blog-detail-main table tr td{
    padding: 10px;
    border: 1px solid var(--color-text)
}


.wrap-main-right .wrap-blog-list .title,
.wrap-main-right .wrap-blog-list .title a,
.wrap-main-right .wrap-blog-list a .title{
    font-size: 24px;
    color: var(--color-main);
    font-family: var(--font-bold);
    margin-bottom: 15px;
    text-transform: uppercase;
}
.wrap-main-right .wrap-blog-list .title:hover,
.wrap-main-right .wrap-blog-list .title a:hover,
.wrap-main-right .wrap-blog-list a .title:hover{
    color: var(--color-main-yellow);
}
.wrap-image{
    margin-top: 30px;
    margin-bottom: 30px;
}
.wrap-image img{
    width: 100%;
}

.wrap-main-right .wrap-list .item-blog-right{
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 13px;
    width: 100%;
}
.wrap-main-right .wrap-list .item-blog-right .img-blog{
    overflow: hidden;
    width: 100%;
}
.wrap-main-right .wrap-list .item-blog-right .img-blog img{
    border-radius: 5px;
}
.wrap-main-right .wrap-list .item-blog-right .title-blog{
    font-size: 16px;
    color: #FFF;
    font-family: var(--font-bold);
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    width: 100%;
    left: 0;
    text-align: center;
    padding: 0 10px;
    padding-bottom: 15px;
    padding-top: 15px;
    background-image: linear-gradient(transparent, rgb(0 0 0 / 84%));
    transition: all .3s;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wrap-main-right .wrap-list .item-blog-right:hover .title-blog{
    color: var(--color-main-yellow);
}
.wrap-box-list-orther{
    margin-top: 25px;
}
.wrap-box-list-orther .box-title-section{
    margin-bottom: 15px;
}
.wrap-box-list-orther .box-title-section .title-section{
    font-size: 22px;
    color: var(--text-main);
    margin-bottom: 0;
    text-transform: uppercase;
}

  


#service-main .wrap-item-service [class*="col-"]{
    margin-bottom: 55px;
}
#service-main .box-item-service{
background-color: rgb(255, 255, 255);
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
#service-main .box-item-service .box-image{
    margin-right: 0;
    width: 100%;
}
#service-main .row.wrap-item-service{
    margin-left: -15px;
    margin-right: -15px;
}
#service-main .row.wrap-item-service [class*="col-"]{
    padding-left: 15px;
    padding-right: 15px;
}
#service-main-list .wrap-list-service .item-about{
    padding: 20px 0;
    border-bottom: 1px solid rgb(0, 0, 0, 10.2%);
}
#service-main-list .wrap-list-service .item-about:first-child{
    padding-top: 0;
}
#service-main-list .item-about .box-image{
    min-width: 300px;
    max-width: 300px;
    margin-right: 20px;
    border-radius: 5px;
}

#service-main-list .item-about .box-title .title h3{
    margin-top: 0;
    min-height: auto;
}


  .wrap-contact-body-service{
      background-image: url(../images/bg-form.png);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 20px;
      padding: 40px 0 50px;
  }
  .wrap-contact-body-service .form-main{
      max-width: 918px;
      width: 100%;
      margin: 0 55px 0 auto;
      padding: 0 15px;
    }
    .wrap-contact-body-service .form-main .wrap-title{
        text-align: center;
        margin-bottom: 15px;
    }
    .wrap-contact-body-service .form-main .wrap-title h2{
        font-size: 22px;
        font-family: var(--font-bold);
        color: #FFF;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    .wrap-contact-body-service .form-main .wrap-title p{
        color: #FFF;
        font-size: 16px;
    }
    .wrap-contact-body-service .form-main .form-row{
        margin-left: -2.5px;
        margin-right: -2.5px;
    }
    .wrap-contact-body-service .form-main .form-row [class*="col-"]{
        padding-left: 2.5px;
        padding-right: 2.5px;
    }
    .wrap-contact-body-service .form-main .form-group{
        margin-bottom: 5px;
    }
    .wrap-contact-body-service .form-main .form-control{
        min-height: 42px;
    }
    .wrap-contact-body-service .form-main .form-control::placeholder{
        color: var(--color-text);
    }
    .wrap-button-captcha{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .wrap-button-captcha .wrap-code-captcha{
        display: flex;
        align-items: center;
    }
    .wrap-button-captcha .wrap-code-captcha .form-group{
        margin-bottom: 0;
    }
    .wrap-button-captcha .wrap-code-captcha .form-group .form-control{
        max-width: 230px;
    }
    .wrap-button-captcha .wrap-code-captcha .code-capcha{
        display: flex;
        align-items: center;
        height: 42px;
        border-radius: 5px;
        background: #FFF;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
        padding-left: 15px;
        margin-left: -5px;
    }
      
    .wrap-button-captcha .wrap-code-captcha .code-capcha .box-image-capcha{}
    .wrap-button-captcha .wrap-code-captcha .code-capcha .reload-code-capcha{
        margin: 0;
    }
    .wrap-button-captcha .wrap-code-captcha .code-capcha .reload-code-capcha i{
        color: #0099d2;
    }
    .wrap-button-captcha .box-button-submit{
        display: flex;
        align-items: center;
    }
    .wrap-button-captcha .box-button-submit p{
        font-size: 16px;
        color: #FFF;
        margin: 0;
        padding-right: 15px;
        padding-left: 15px;
    }
    .wrap-button-captcha .box-button-submit .btn{
        width: 200px;
        border: 1px solid #FFF;
        border-radius: 5px;
        background-color: var(--color-main-yellow);
        color: #FFF;
    }
    .wrap-button-captcha .box-button-submit .btn:hover{
        background-color: var(--color-main);
    }
  

/* service success */
.wrap-contact-susess {
    padding: 15px 0 35px;
}

.wrap-contact-susess .title-contact-sucess {
    font-size: 35px;
    color: var(--color-main);
    font-family: var(--font-normal);
    margin-bottom: 5px;
}

.wrap-contact-susess .btn {
    text-transform: uppercase;
    font-family: var(--font-bold);
    padding:8px 18px 6px
}
.wrap-contact-susess .btn:hover{
background-color: var(--color-main);
border-color: var(--color-main);
}
.wrap-contact-susess .color-main-yellow:hover{
    color: var(--color-main);
}
.wrap-contact-susess .mt-4.mb-4{
    margin: 30px 0!important;
}


/* contact  */
#contact.wrap-contact-body{
    border: none;
    border-radius: none;
    box-shadow: none;
    background-color: transparent;
}
.wrap-contact-body .wrap-address-footer h3{
    font-size: 18px;
    font-family: var(--font-bold);
    color: var(--color-main);
}
.wrap-contact-body .wrap-address-footer>p{
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
}
.wrap-contact-body .wrap-address-footer>p img{
    margin-right: 10px;
}
.wrap-contact-body .wrap-address-footer .wrap-button .btn{
    color: #FFF;
    padding-top: 7px;
}
.wrap-contact-body .wrap-address-footer .wrap-button .btn:first-child{
    margin-left: 0;
}
.wrap-contact-body .wrap-address-footer .wrap-button .btn:hover{
    background-color: var(--color-main-yellow);
    border-color: var(--color-main-yellow);
}
.wrap-contact-body .wrap-address-footer .wrap-button .btn-border-color-main{
    border-color: #ababab8f;
    color: var(--color-text);
}
.wrap-contact-body .wrap-address-footer .wrap-button .btn-border-color-main:hover{
    background-color: #ababab8f;
    color: #fff;
}
.wrap-contact-body .wrap-address-footer .form-group{
    margin-bottom: 10px;
}

.wrap-contact-body .form .form-group{
    position: relative;
}
.wrap-contact-body .form .form-group .form-control{
    padding-left: 45px;
}
.wrap-contact-body .form .form-group .form-control::placeholder{
    color: var(--color-text);
}
.wrap-contact-body .form .form-group .span-image-position {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 39px;
    background-color: rgb(0, 98, 163, .102);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrap-contact-body .form .form-group.wrap-height-100{
    margin-bottom: 10px;
}

.wrap-contact-body .form .form-group[class*="col-"] .span-image-position {
    left: 5px;
}

.wrap-contact-body .form .form-group.wrap-height-100 .span-image-position {
    height: 100%;
    align-items: flex-start;
    padding-top: 8px;
}


/*  */
.wrap-image-detail-fancybox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px -30px
}

.wrap-image-detail-fancybox a[class*="col-"] {
    width: 100%;
    margin-bottom: 30px;
    padding: 0 15px;
}

.wrap-image-detail-fancybox a>div {
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 5px;
}

.wrap-image-detail-fancybox a img {
    width: 100%;
}

.wrap-image-detail-fancybox a div .icon-plus {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .4s;
}

.wrap-image-detail-fancybox a div .icon-plus img {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
}

.wrap-image-detail-fancybox a div:hover .icon-plus {
    background-color: rgb(0 89 148 / 65%);
}

.wrap-image-detail-fancybox a div:hover .icon-plus img {
    opacity: 1;
    visibility: visible
}


.item-project {
    background-color: rgb(248, 248, 248);
    height: 100%;
    transition: all .4s;
    width: 100%;
    border: 1px solid rgb(226, 226, 226);
    border-top: 0;
    border-bottom: 3px solid var(--color-main-yellow);
}

.item-project:hover {
    border-bottom-color: var(--color-main);
}
.item-project .box-image{
    position: relative;
    width: calc(100% + 2px);
    margin-left: -1px;
}
.item-project .content-project {
    border-top: none;
    padding-bottom: 0;
}
.item-project .content-project a{
    width: 100%;
    padding: 15px 20px 20px;
}
.item-project .title-project {
    margin-bottom: 0 !important;
    font-size: 16px;
    font-family: var(--font-bold);
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-project .box-image .icon-images {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.item-project .box-image .icon-images img {
    width: auto;
}
.wrap-image{
    position: relative;
}
.wrap-image .icon-images{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.wrap-image .icon-images img{
    width: max-content;
    max-width: max-content;
    height: max-content;
}

/* modal video  */
.active-video{
    cursor: pointer;
}
.modal-dialog {
    max-width: 990px;
    width: 100%;
    padding: 0 15px;
}
.modal-content{
    background-color: transparent;
    border: none;
}
.modal-content .close{
    opacity: 1;
    text-shadow: none;
    color: #FFF;
    text-align: right;
}
.tab-controls.nav-tabs{
    border:none;
    justify-content: center;
    margin-bottom: 30px;
}
.tab-controls.nav-tabs .nav-item{
    margin:0 3px 10px
}
.tab-controls.nav-tabs .nav-link{
    border: 1px solid rgb(211, 211, 211);
    border-radius: 5px;
    color: var(--color-text);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 16px;
}
.tab-controls.nav-tabs .nav-link.active,
.tab-controls.nav-tabs .nav-link:hover{
    color: #FFF;
    background-color: rgb(0, 98, 163);
    border-color: rgb(0, 98, 163);
}

  

   /* tools   */
   .wrap-tool{
       padding-bottom: 40px;
   }
   .wrap-tool [class*="col-"]{
       margin-bottom: 30px;
   }
.item-tool{
    display: flex;
    align-items: flex-start;
    height: 100%;
}
.item-tool .box-image{
    min-width: 150px;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 15px;
}
.item-tool .box-content-tool .title{
    font-size: 16px;
    font-family: var(--font-bold);
    color: var(--color-text);
    margin-bottom: 5px;
    line-height: 1.375;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all .3s;
}
.item-tool .box-content-tool .title:hover{
    color: var(--color-main-yellow);
}
.item-tool .box-content-tool .download-file{
    font-size: 15px;
    display: flex;
    align-items: center;
    color: var(--color-main);
    margin-top: 10px;
}
.item-tool .box-content-tool .download-file span{
    font-size: 15px;
    display: inline-block;
    margin-right: 8px;
}

.download-file-tool{
    border-radius: 5px;
    background-image: -moz-linear-gradient( 0deg, rgb(0,98,163) 0%, rgb(248,153,83) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(0,98,163) 0%, rgb(248,153,83) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(0,98,163) 0%, rgb(248,153,83) 100%);
    color: #FFF;
    font-family: var(--font-bold);
    font-size: 16px;
    min-width: 185px;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    margin-top: 15px;
}
.download-file-tool span{
    margin-right: 5px;
}

/* staff */
.wrap-staff [class*="col-"]{
    margin-bottom: 30px;
}
@media (min-width: 1200px){
.wrap-staff [class*="col-"]{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
}
.item-staff{
    height: 100%;
    background-color: #E9E9E9;
    overflow: hidden;
    border-radius: 5px;
}
.item-staff .box-image{
    background-color: rgb(129,130,134);
    background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(222,222,222) 0%, rgb(129,130,134) 87%);
    background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(222,222,222) 0%, rgb(129,130,134) 87%);
    background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(222,222,222) 0%, rgb(129,130,134) 87%);
    width: 100%;
}

.item-staff .content-title-staff{
    padding: 20px 10px 16px;
    text-align: center;
}
  
.item-staff .name-staff{
    font-size: 18px;
    font-family: var(--font-bold);
    color: var(--color-main);
    margin-bottom: 5px;
}
.item-staff p{
    font-size: 18px;
    color: var(--color-text);
    margin: 0;
}

  .wrap-staff-image-detail{
      min-width: max-content;
      margin-bottom: 30px;
      float: left;
      padding-right: 20px;
    }
    .wrap-staff-image-detail img{
        max-width: 353px;
        width: 100%;
        float: left;
    }


/* blog  */
.wrap-item-blog-main {
    width: 100%;
    height: auto;
    line-height: unset;
    position: relative;
}

.blog-top.wrap-item-blog-main img {
    height: 100%;
    width: 100%;
}

.wrap-item-blog-main a {
    display: inline-block;
    height: 100%;
    width: 100%;
}


.wrap-blog-item-hot [class*="col-"]{
    margin-bottom: 30px;
}
.wrap-blog-item-hot #slide-hot-blog-list{
    height: 100%;
    background-color: #FFF;
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 15%);
    border-radius: 5px;
}
.wrap-blog-item-hot .owl-carousel .owl-stage-outer{
    height: 100%;
}
.wrap-blog-item-hot .owl-carousel .owl-stage{
    height: 100%;
}
.wrap-blog-item-hot .owl-carousel.owl-drag .owl-item{
    height: 100%;
}
.wrap-blog-item-hot .owl-carousel.owl-drag .owl-item .item .box-image{
    height: 100%;
}
/* .wrap-blog-item-hot .owl-carousel.owl-drag .owl-item .item{overr} */
.wrap-item-blog-main .box-detail-blog {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.85882), transparent);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.wrap-item-blog-main .box-image img{
    border-radius: 8px;
}
.wrap-item-blog-main .box-detail-blog  h4{
    font-size: 20px;
    font-family: var(--font-bold);
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wrap-item-blog-main .box-detail-blog h4 {
    color: #FFF;
    margin-bottom: 10px;
}

.wrap-item-blog-main .view-count div span {
    color: rgb(198, 198, 198);
}

.wrap-list-blog-right-top{
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
    padding: 25px 20px 20px;
    height: 100%;
}

.wrap-list-blog-right-top .title{
    color: var(--color-main);
    font-family: var(--font-bold);
    font-size: 20px;
    margin-bottom: 20px;
}
.item-blog-right-hot{
    display: flex;
    align-items: flex-start;
    padding: 19px 0;
    border-bottom: 1px solid rgb(235, 235, 235);
}

.wrap-list-blog-right-top .list .item-blog-right-hot:first-child{
    padding-top: 0;
}
.item-blog-right-hot .box-image{
    min-width: 122px;
    width: 122px;
    height: 83px;
    margin-right: 13px;
}
.item-blog-right-hot h4{
    font-size: 16px;
    color: var(--color-text);
    font-family: var(--font-bold);
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#slide-hot-blog-list.owl-carousel .owl-nav button::before{
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    border:2px solid rgb(255 255 255 / 30%);
    padding:0
}
#slide-hot-blog-list.owl-carousel .owl-nav button.owl-prev::before{
    left: 10px;
    content: url(../images/icon-prev-blog.png);
}
#slide-hot-blog-list.owl-carousel .owl-nav button.owl-next::before{
    right: 10px;
    left: auto;
    content: url(../images/icon-next-blog.png);
}
.item-blog{
    border-radius: 5px;
    background-color: rgb(255, 255, 255, 0.71);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
    border: 2px solid rgb(218, 218, 218);
    border-top: 0;
    height: 100%;
}

  .blog-item-main [class*="col-"]{
      margin-bottom: 30px;
  }
.item-blog .box-image{
    position: relative;
    width: calc(100% + 4px);
    margin-left: -2px;
}
.item-blog .content-item-bolg{
    padding: 20px;
}
.item-blog .content-item-bolg .title{
    font-size: 17px;
    font-family: var(--font-bold);
    color: var(--color-text);
    margin-bottom: 20px;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-blog .content-item-bolg .title:hover{
    color: var(--color-main-yellow);
}
.item-blog .content-item-bolg .view-more{
    color: var(--color-main);
    font-size: 15px;
    display: flex;
    align-items: center;
}
.item-blog .content-item-bolg .view-more:hover{
    color: var(--color-main-yellow);
}
.item-blog .content-item-bolg .view-more img{
    margin-left: 5px;
}

.item-blog .box-image .box-calenda {
    position: absolute;
    bottom: 0;
    left: 0;
}
.box-calenda {
    background-color: var(--color-main);
    text-align: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    min-width: 60px;
    padding-top: 7px;
}

.box-calenda .day {
    font-size: 24px;
    line-height: 1.167;
    color: rgb(147, 184, 229);
    font-family: var(--font-bold);
    margin-bottom: 2px;
}

.box-calenda .date-year {
    font-size: 13px;
    padding-bottom: 4px;
    color: rgb(147, 184, 229);
}

  /* libary */
  .wrap-list-libary-tab [class*="col-"]{
      margin-bottom: 30px;
  }

  .wrap-search-form{
      text-align: center;
      margin-bottom: 40px;
  }
  .wrap-search-form>p{
      font-size: 26px;
      margin-bottom: 10px;
    }
    .wrap-search-form .form{
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
        border-radius: 3px;
    }
    .wrap-search-form .form input{
        border: 2px solid rgb(218, 218, 218);
        width: 100%;
        border-right:none;
        padding:7px 20px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .wrap-search-form .form a{
        width: 40px;
        min-width: 40px;
        background: var(--color-main);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

/* 404 */

section#page-404 {
    background-image: url(../images/bg-404.png);
    background-position: center;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
}

section#page-404 .container {
    text-align: center;
}

section#page-404 .container {
}

section#page-404 p{
    font-size: 20px;
    color: #FFF;
}
section#page-404 .title-page-404 {
    font-size: 32px;
    margin-bottom: 15px;
    margin-top: 50px;
    color: #FFF;
    font-family: var(--font-normal);
}

section#page-404 .wrap-button {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
section#page-404 .wrap-button .btn{
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 8px;
}
section#page-404 .wrap-button .btn i{
    font-size: 20px;
    margin-left: 10px;
}
section#page-404 .wrap-button .border-color-main{
    border:1px solid #FFF;
    transition: all .4s;
    color: #FFF;
}
section#page-404 .wrap-button .border-color-main:hover{
    opacity: .7;
}




@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
.hover-image, .box-image{
    position: relative;
    overflow: hidden;
}
.hover-image::before, .box-image:before{
    position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover-image:hover::before, .box-image:hover::before{
    -webkit-animation: shine .75s;
	animation: shine .75s;
}

.wrap-main-right{
    position: sticky;
    top: 80px;
}

.wrap-item-scroll .row{
    flex-wrap: nowrap;
    width: auto;
    /* overflow-x: scroll; */
}
.wrap-map{
    height: calc(100% - 30px);
}
.wrap-map iframe{
    height: 100%;
}


.wrap-icon-control{
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 100%;
    position: absolute;
    top: calc(50% - 50px);
    transform: translateY(-calc(50% - 50px));
    z-index: 1;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid var(--color-main-yellow);
    -webkit-animation: moreslide 1s ease-in-out infinite;
    -moz-animation: moreslide 1s ease-in-out infinite;
    -ms-animation: moreslide 1s ease-in-out infinite;
    -o-animation: moreslide 1s ease-in-out infinite;
    animation: moreslide 1s ease-in-out infinite;
    animation-delay: 0s;
    z-index: 1;
}
.wrap-icon-control:before{
    content: "\f101";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 50%;
    display: block;
    font-size: 24px;
    transform: translateY(-50%);
    line-height: 1;
    color: var(--color-main-yellow);
    margin-top: 1px;
    margin-left: 3px;
    display: block;
}

/*  */
.wrap-box-list-orther .wrap-tool{
    padding-bottom: 0;
    margin-bottom: -30px;
}
.wrap-blog-detail-main iframe{max-width: 100%!important;}