@font-face {
    font-family: "URWDIN";
    src: url("../fonts/URWDIN-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "URWDIN";
    src: url("../fonts/URWDIN-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "URWDIN";
    src: url("../fonts/URWDIN-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "URWDIN";
    src: url("../fonts/URWDIN-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "URWDIN";
    src: url("../fonts/URWDIN-Black.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-highlight: #058DC2;
    --color-main: #4ABAB9;
    --color-text: #00172E;
    --color-black: #252525;
    --white: #fff;
    --black: #000;
    --light: #F4F5F6;
}
html, body {
    font-family: "URWDIN", sans-serif;
    font-weight: 400;
    margin: 0;
    font-size: 16px;
    color: var(--color-text);
    overflow-x: hidden;
}

.rtbs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.title-section {
    font-size: 32px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase
}


.float-right {
    float: right;
}

.text-left {
    text-align: left !important;
}


html{
    scroll-behavior:smooth;
}
p{
    margin:0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}
 i{
     transform:translateY(2px);
 }

a {
    text-decoration: none;
    color: var(--color-text);
}
ul{
    list-style-type:none;
    padding:0 0;
    margin:0 0 !important;
}

a:hover,
button:hover {
    cursor: pointer;
    color:var(--color-main);
}

button {
    border: none !important;
}



.float-left {
    float: left !important
}

.float-right {
    float: right !important
}

.float-none {
    float: none !important
}
.btn-action-header {
    display: inline-block;
    height: 36px;
    line-height: 34px;
    background-color: #4abab9bf;
    border: 2px solid var(--color-main);
    border-radius: 7px;
    margin-left: 20px;
    font-size: 16px;
    white-space: nowrap;
    padding: 0 8px;
    color: #fff;
}

.btn-main {
    border-radius: 0.375em;
    text-align: center;
    color: var(--white);
    padding:0.75em 2em;

}

.btn-main:hover {
    outline: 2px solid var(--color-main);
    background-color: #fff !important;
    color: var(--color-main);
    background-image: unset !important;
    font-weight:600;
}

.btn-login:hover {
    background-color: #fff;
    color: var(--color-main);
    font-weight:500;
}

.btn-rounded1{
    border-radius:1em;
}

.btn-more {
    height: 40px;
    padding: 0 20px;
    line-height: 38px;
    border-radius: 6px;
    padding: .25em .5em;
    border: 2px solid var(--color-main);
    font-weight: 400;
    color: var(--color-main) !important;
    font-size: 1.125em;
    background-color: #fff;
}
.btn-more:hover {
    background-color: #4abab9bf;
    color: #fff !important;
}
.btn-more i {
    transform: translateY(3px);
    margin-left: .25em;
}
.bg-gradient {
    background-image: linear-gradient(left, #058DC2, #4ABAB9) !important;
    background-image: -webkit-linear-gradient(left, #058DC2, #4ABAB9) !important;
    background-image: -o-linear-gradient(left, #058DC2, #4ABAB9) !important;
    background-image: -moz-linear-gradient(left, #058DC2, #4ABAB9) !important;
}

.bg-color-main {
    background-color: var(--color-main);
}

.bg-color-hightlight {
    background-color: var(--color-highlight);
}
.btn-color-hightlight:hover {
    border: 2px solid var(--color-highlight);
    background-color: #fff !important;
    color: var(--color-highlight);
}


.form-control:focus{
    border-color:unset;
    border:unset;
}

.section {
    background-color: #fff;
    padding: 3em 0;
}

.section-header {
    text-align: center;
}

.section-title {
    font-size: 2em;
    color: var(--color-text);
}

.section-description {
    font-style: italic;
}

.title-border {
    width: 120px;
    height: 1px;
    background: var(--first-color);
    background: linear-gradient(to right, transparent, var(--first-color), transparent);
    margin: 0 auto;
}

.title-desc {
    max-width: 650px;
    margin: 0 auto;
}

.section-body{
    margin-top:2em;
}

@media (max-width:991px){
    .section-body{
        margin-top:1em !important;
    }
}



.pageName {
    background: var(--color-highlight);
    color: #fff;
}
.pageName .breadcrumb .breadcrumb-item a,
.pageName .breadcrumb .breadcrumb-item {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
    content: '>';
}


.form-control {
    border-color: #ebebeb;
}

.gray-light-bg {
    background: #f4f7fa;
}

/*======HEADER========*/
.navbar {
    padding:0 !important;
}

.navbar-brand {
    margin: 0 !important;
}

.navbar-brand img {
    max-width: 166px;
}

.nav-link {
    color: #707070;
    padding: 5px 10px !important;
    font-weight: 400;
}

.nav-link:hover {
    color: #279f9e;
    font-weight: 500;
    width: max-content;
}
.header .nav-link:hover {
    transform: scale(1.125);
}


.header-phone {
    color: var(--color-main);
}

@media (min-width:1104px) {
    .header-phone {
        display: block !important;
    }
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-collapse {
    justify-content: space-between;
}

    .navbar-collapse > ul {
        margin-left: 2em;
    }

.navbar-toggler i {
    transition: all 1s ease-out;
    color: var(--color-main);
}


/*.footer {
	background-color: #4db2b3 !important;
}*/

/*footer*/
.section-footer-top {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

.title-footer {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.item-menu-footer ul {
    padding-left: 0;
}

    .item-menu-footer ul > li {
        list-style: none;
    }

        .item-menu-footer ul > li > a {
            font-size: 14px;
            color: #000000;
            margin-bottom: 15px;
            display: block;
        }

.section-footer-top .item-list-footer {
    margin-bottom: 30px;
}

.item-menu-footer .list-img-fanpage {
    display: flex;
    flex-wrap: wrap;
}

    .item-menu-footer .list-img-fanpage > li {
        flex: 0 0 20%;
        max-width: 20%;
    }

        .item-menu-footer .list-img-fanpage > li > a > img {
            height: 24px;
            width: 24px;
        }

        .item-menu-footer .list-img-fanpage > li > a {
            margin-bottom: 20px;
        }

/*.section-footer-top:before {
	content: '';
	position: absolute;
	left: 50px;
	top: 0;
	width: 600px;
	height: 300px;
	background-image: url("../Images/footer/banner_footer_before.png");
	z-index: -1;
	background-size: contain;
	background-repeat: no-repeat;
}

.section-footer-top:after {
	content: '';
	position: absolute;
	right: 50px;
	bottom: -8px;
	width: 600px;
	height: 300px;
	background-image: url("../Images/footer/banner_footer_after.png");
	z-index: -1;
	background-size: contain;
	background-repeat: no-repeat;
}
*/
.section-footer-bottom {
    background: #EEEEEE;
    padding: 50px 0;
}

.logo-footer img {
    height: 43px;
}

.logo-footer {
    margin-bottom: 20px;
}

.info-contact-website .info p {
    font-size: 14px;
}

.item-logo-bmtt {
    background: var(--white);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 325px;
}

.logo-bottom.logo-ican img {
    height: 47px;
}

.logo-bottom.logo-vnnic img {
    height: 39px;
}

.logo-bottom.logo-google img {
    height: 25px;
}

.logo-bottom.logo-gov img {
    height: 37px;
}

.item-logo-bmtt .logo-bottom {
    margin: 0 10px;
}

footer:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F2F2F2;
    z-index: -2;
}

footer {
    position: relative;
}

.item-menu-footer .list-img-fanpage > li > a:hover > img {
    filter: invert(64%) sepia(12%) saturate(1676%) hue-rotate(131deg) brightness(99%) contrast(91%);
}

.item-menu-footer ul > li > a:hover {
    color: var(--color-main);
}

.section-connect-office .download-app .app-store-google a:hover img {
    filter: invert(64%) sepia(12%) saturate(1676%) hue-rotate(131deg) brightness(99%) contrast(91%);
}
/*footer*/

/*======================*/
.section-deco {
    background: var(--color-text);
    color: #fff;
    padding: 0.75em 0;
}




#back-to-top {
    position: fixed;
    bottom: 100px;
    right: 36px;
    transition: all .5s ease;
    display: none;
    padding: 0;
    font-size: 2.25em;
    outline: none;
    border: none;
    color: var(--color-highlight);
}

@media (max-width: 576px){
    #back-to-top{
        display:none !important;
    }
}






#arcontactus .accordion-item p {
    font-size: 1.125em;
}

#arcontactus  .accordion-item {
    border-top: 0 !important;
    border-radius: 0.5em !important;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
}

#arcontactus .accordion-button {
    border-radius: 0.5em;
    font-weight: 500;
    font-size: 20px;
}


.alert {
    --tblr-alert-color: #656d77;
    border: 1px solid rgba(101,109,119,.16);
    border-left: .25rem solid var(--tblr-alert-color);
    box-shadow: rgba(35,46,60,.04) 0 2px 4px 0;
    background-color: #fff;
}

    .alert > :last-child {
        margin-bottom: 0
    }

.alert-important {
    border-color: transparent;
    background: var(--tblr-alert-color);
    color: #fff;
    font-weight: 500
}

    .alert-important .alert-icon {
        color: inherit
    }

.alert-link, .alert-link:hover {
    color: var(--tblr-alert-color)
}

.alert-primary {
    --tblr-alert-color: #206bc4
}

.alert-secondary {
    --tblr-alert-color: #656d77
}

.alert-success {
    --tblr-alert-color: #2fb344
}

.alert-info {
    --tblr-alert-color: #4299e1
}

.alert-warning {
    --tblr-alert-color: #f76707
}

.alert-danger {
    --tblr-alert-color: #d63939
}

.alert-light {
    --tblr-alert-color: #f4f6fa
}

.alert-dark {
    --tblr-alert-color: #232e3c
}

.alert-icon {
    color: var(--tblr-alert-color);
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin: -.125rem 1rem -.125rem 0
}

.alert-title {
    font-size: .875rem;
    line-height: 1.4285714;
    font-weight: 600;
    margin-bottom: .25rem
}


.field-validation-error {
    top: 31px;
    left: 75% !important;
}

iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
}



.shake_image_promotion {
    position: relative;
}

@media (max-width: 768px) {
    span.shake_img_close {
        bottom: calc(38%);
    }
}

span.shake_img_close {
    font-size: 18px;
    color: #e30808;
    position: fixed;
    bottom: calc(60%);
    right: 1%;
    z-index: 999999999;
    font-weight: normal;
    cursor: pointer;
}

#img_bf12 img {
    position: fixed;
    max-height: 150px;
    bottom: 45%;
    right: 0;
    z-index: 99999;
    max-width: 220px;
}

.ring_ring_img {
    -webkit-animation: ring 6s 2s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s 2s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s 2s ease-in-out infinite;
    transform-origin: 50% 4px;
    margin-right: 5px;
    color: #fff;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }

    1% {
        -webkit-transform: rotateZ(30deg);
    }


    27% {
        -webkit-transform: rotateZ(-12deg);
    }

    29% {
        -webkit-transform: rotateZ(10deg);
    }

    31% {
        -webkit-transform: rotateZ(-8deg);
    }

    33% {
        -webkit-transform: rotateZ(6deg);
    }

    35% {
        -webkit-transform: rotateZ(-4deg);
    }

    37% {
        -webkit-transform: rotateZ(2deg);
    }

    39% {
        -webkit-transform: rotateZ(-1deg);
    }

    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: rotate(0);
    }

    1% {
        -moz-transform: rotate(30deg);
    }


    27% {
        -moz-transform: rotate(-12deg);
    }

    31% {
        -moz-transform: rotate(-8deg);
    }

    33% {
        -moz-transform: rotate(6deg);
    }

    35% {
        -moz-transform: rotate(-4deg);
    }

    37% {
        -moz-transform: rotate(2deg);
    }

    39% {
        -moz-transform: rotate(-1deg);
    }

    41% {
        -moz-transform: rotate(1deg);
    }

    43% {
        -moz-transform: rotate(0);
    }

    100% {
        -moz-transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@media (max-width: 768px) {
    #img_bf12 img {
        max-width: 90px !important;
    }

    #img_bf12 img {
        bottom: 26%;
    }

    span.shake_img_close {
        bottom: calc(38%);
    }
}