:root {
    --d-transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

html::-webkit-scrollbar {
    width: 8px;
    background-color: #16203F;
}

html::-webkit-scrollbar-thumb {
    background-color: #C02646;
    border-radius: 4px;
}
/*FOR IE*/
html {
    scrollbar-base-color: #C02646;
    scrollbar-face-color: #C02646;
    scrollbar-3dlight-color: #C02646;
    scrollbar-highlight-color: #C02646;
    scrollbar-track-color: #16203F;
    scrollbar-arrow-color: #C02646;
    scrollbar-shadow-color: #C02646;
    scrollbar-dark-shadow-color: #C02646;
}
/*FOR FF*/
html {
    scrollbar-color: #C02646 #16203F;
    scrollbar-width: 8px;
}

body {
    font-family: 'Be Vietnam', sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    line-height: 1.625;
    overflow-x: hidden;
    font-weight: 400;
    color: #1A1A1A;
}


      
/*----------------------
1.1. Typography
------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Be Vietnam', sans-serif;
    margin: 0 auto 15px;
    font-weight: 700;
    line-height: 1.4;
}

h1 {
    font-size: 48px;
}

    h2, h1.sm {
        font-size: 48px;
    }

        h2.lg, h3.xxl {
            font-size: 32px;
        }

        h3, h2.md {
            font-size: 20px;
        }

        h4, h3.md, h2.sm {
            font-size: 18px;
            margin-bottom: 15px;
        }

h5 {
    font-size: 16px;
    margin-bottom: 15px;
}

h6 {
    font-size: 14px;
    margin-bottom: 10px;
}

p { /*font-size: 15px;
margin-bottom: 20px;*/
}

a {
    transition: var(--d-transition);
    text-decoration: none;
    color: #000;
}

    a:hover, a:focus {
        text-decoration: none;
        outline: none;
        color: #C02646
    }

ul, ol {
    margin: 0 auto 20px;
}

    ul li, ol li {
        margin: 0 auto 10px;
    }

blockquote {
    background: #f5f5f5;
}

*:focus, button:focus {
    outline: none;
}

.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text p,
.white-text.section-header p {
    color: #fff;
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.divider {
    border-bottom: 1px solid #dcd9d9;
    clear: both;
    margin: 40px auto;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.gutter-10 {
    margin-left: -10px;
    margin-right: -10px;
}

    .gutter-10 > [class*='col-'] {
        padding-right: 10px;
        padding-left: 10px;
    }

.gutter-5 {
    margin-left: -5px;
    margin-right: -5px;
}

    .gutter-5 > [class*='col-'] {
        padding-right: 5px;
        padding-left: 5px;
    }

.gutter-2 {
    margin-left: -2px;
    margin-right: -2px;
}

    .gutter-2 > [class*='col-'] {
        padding-right: 2px;
        padding-left: 2px;
    }

.gutter-0 {
    margin-left: 0px;
    margin-right: 0px;
}

    .gutter-0 > [class*='col-'] {
        padding-right: 0px;
        padding-left: 0px;
    }

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.overflow-hide {
    overflow: hidden;
}


.editor-content img {
    max-width: 100%;
    height: auto;
}

    .editor-content img.media-object {
        max-width: none;
    }

.editor-content h2, .editor-content h3, .editor-content h4 {
    font-weight: 700;
    color: #fff;
}

.editor-content h4 {
    font-size: 16px;
}

.editor-content h3 {
    font-size: 18px;
}

.editor-content h2 {
    font-size: 20px;
    color: #fff;
}


/*-----------------
1.2. Button
-------------------------*/
.btn {
    border-radius: 0px;
    background: transparent;
    border: 0px;
    color: #fff;
    font-size: 18px;
    margin: auto;
    padding: 10px 35px 8px;
    transition: var(--d-transition);
    text-decoration: none;
    font-weight: 600;
}

    .btn.btn-icon {
        padding-left: 60px;
    }

    .btn.btn-primary,
    .btn.btn-default {
        border-radius: 25px;
        background: var(--d-gradient2);
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
    }

        .btn.btn-primary:hover {
            background: var(--d-gradient);
        }

    .btn.btn-default {
        background: #C02646;
    }

        .btn.btn-default:hover {
            background: #414042;
            color: #fff;
        }

    .btn.btn-primary.md {
        padding: 10px 35px 8px;
    }

    .btn .fa {
        font-size: 22px;
        margin-right: 5px;
        vertical-align: text-top;
    }

    .btn.btn-lg {
        font-size: 24px;
        line-height: 30px;
        padding: 22px 50px;
    }

    .btn.btn-sm {
        font-size: 16px;
        padding: 8px 25px;
    }

    .btn:hover, .btn:focus {
        color: #C02646;
        outline: none;
        box-shadow: none; /*background: transparent;*/
    }

    .btn.btn-icon:hover {
    }

.btn-link {
    font-weight: 800;
    font-size: 17px;
    color: #602314;
}

.btn.outline-btn {
    background: none;
    color: #006838;
    border: #602314 solid 1px;
    padding: 5px 25px 5px 10px;
    font-weight: 400;
    position: relative;
}

    .btn.outline-btn:after {
        position: absolute;
        right: 6px;
        top: 12px;
        content: "\f103";
        font: normal normal normal 14px/1 FontAwesome;
    }

    .btn.outline-btn:hover {
        background: #602314;
        color: #F3BE4F;
    }

.btn-transparent {
    background: transparent;
    border: solid 1px #602314;
    color: #602314;
    font-size: 14px;
}

    .btn-transparent:hover {
        background: #f7e5cb;
        border: solid 1px #f7e5cb;
    }

.btn-back-home {
}


.section-title{font-size: 48px; color: #C02646; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; }
.section-title.sm{font-size: 32px;}
.section-sub-title{font-size: 32px; font-weight: 700; margin-bottom: 30px;}

.ellips{    text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical;    overflow: hidden;}

.primary-bg { background: #C02646; color: #fff; }
.primary-bg a{color:#fff;}
.primary-bg a:hover{color:#414042;}
.secondary-bg { background: #414042; color: #fff; }
.secondary-bg a{color:#fff;}
.secondary-bg a:hover{color:#C02646;}
.section-padding { padding: 100px 0; }
.section-padding-sm { padding: 50px 0; }

.element-pl {padding-left: var(--bs-gutter-x,0.75rem);}
.element-pr {padding-right: var(--bs-gutter-x,0.75rem);}
.element-px {padding-left: var(--bs-gutter-x,0.75rem);    padding-right: var(--bs-gutter-x,0.75rem);}



.header-bottom{background:#C02646; position:relative; z-index:2;}



header.open .header-thumbs {
    background-color: #e2e3e4;
}


.popover-menu {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 100%;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
    transition: var(--d-transition);
}

    .popover-menu::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        opacity: 0;
        transition: all ease .4s;
    }

    .popover-menu .menu-img {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .popover-menu .menu-container {
        width: 30%;
        min-width: 320px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 80px;
        margin-left:auto;
    }

    .popover-menu .menu-img .img-container {
        position: relative;
        height: 100%;
    }

    .popover-menu .menu-img .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0.8;
    }

    .popover-menu .menu-img-inner {
        position: relative;
        background: #000;
        opacity: 0;
        height: 100%;
        overflow: hidden;
        transition: all cubic-bezier(0, 0.27, 0.25, 1) 0.5s;
    }

    .popover-menu .menu-container > * {
        position: relative
    }

    .popover-menu .menu-container .btn-close {
        position: absolute;
        right: 115px;
        top: 35px;
        color: #fff;
        font-size: 36px;
        opacity: 0;
        z-index: 2;
    }

    .popover-menu .menu {
        list-style-type: none;
        padding: 0;
        margin: 0;
        padding-right: 7.5vw;
        padding-top: 10vh;
        padding-bottom: 10vh;
        text-align:right;
        width:100%;

    }

        .popover-menu .menu .menu-item {
            position: relative;
            opacity: 0;
            transform: translateY(8rem)
        }

        .popover-menu .menu li a {
            display: block;
            padding: 15px 0px;
            font-size: 32px;
            text-transform: uppercase;
            outline: none;
            text-decoration: none;
            color: #fff;
            line-height: 1.1;
            transition: all ease .4s
        }

        .popover-menu .menu .menu-item.current-menu-item > a,
        .popover-menu .menu .menu-item:hover > a {
            color: #000;
        }


    .popover-menu .menu-footer {
        padding-left: 9.6rem;
        padding-bottom: 4.4rem;
        opacity: 0;
        transform: translateY(8rem);
    }

header{position:fixed; top:0px; left:0px; width:100%;    z-index: 2;}
header .navbar-brand{  display: flex; align-items: center;}
header .navbar-brand .slogan{font-weight: 800; font-size: 24px; text-transform:uppercase; color:#fff; margin-left:70px;}
header .header-right{display:flex;}
    header .header-right .lang-items{color:#fff; margin-right:80px; display:flex; align-items:center;}
    header .header-right .lang-items a{display:flex; color:#fff;}
    header .header-right .lang-items a:before{content:"/"; margin:0px 3px;}
    header .header-right .lang-items a:first-child:before{display:none;}
    header .header-right .lang-items a.active{font-weight:700;}
    header .header-right .icon-items{display:flex; align-items:center;}
    header .header-right .icon-items a{margin-left:40px;}
    header.open .popover-menu {
        pointer-events: all;
        left:0;
    }

    header.open .popover-menu::before,
    header.open .popover-menu .menu-img-inner,
    header.open .popover-menu .menu-container .btn-close {
        opacity: 1;
    }


    header.open .popover-menu .menu .menu-item {
        transform: translateY(0);
        opacity: 1;
    }

    header.open .popover-menu .menu .menu-item {
        transition: all cubic-bezier(0, 0.24, 0.25, 1) 1s;
    }

        header.open .popover-menu .menu .menu-item:nth-of-type(1) {
            transition-delay: 0.5s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(2) {
            transition-delay: 0.6s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(3) {
            transition-delay: 0.7s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(4) {
            transition-delay: 0.8s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(5) {
            transition-delay: 0.9s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(6) {
            transition-delay: 1.0s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(7) {
            transition-delay: 1.1s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(8) {
            transition-delay: 1.2s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(9) {
            transition-delay: 1.3s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(10) {
            transition-delay: 1.4s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(11) {
            transition-delay: 1.5s;
        }

        header.open .popover-menu .menu .menu-item:nth-of-type(12) {
            transition-delay: 1.6s;
        }



.section-footer .footer-left {
    display: flex;
    align-items: flex-start;
}
    .section-footer .footer-left .logo-icon{margin-right:30px;max-width:12vw;}
    .section-footer .footer-left .item{font-size:24px; font-weight:300; margin-bottom:5px;}
    .section-footer .footer-left a {
       
        display: block;
    }
.footer-right{padding-left:15vw;}
.footer-right ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.footer-right ul li a{font-size:24px; text-transform:uppercase; font-weight:700;}
.footer-right .items a{margin-right:30px;}


.thumb.fitres {
    position: relative;
    padding-top: calc(100% * 9 / 16);
    height: 0px;
}
.thumb.fitres img{position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit:cover;}
.btn-detail{text-transform:uppercase; display:flex; align-items:center;}
.btn-detail:before{content:""; width:62px; height:15px; background:#C02646;  margin-right:15px;}


/*Video*/
.section-video {
    height: calc(var(--vh, 1vh) * 100); position:relative;
}
.section-video .bgvideo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11.2vw; height:auto; cursor:pointer;}
.section-video .bgvideo svg{width:100%; height:auto; opacity:0.5; transition:var(--d-transition);}
.section-video .bgvideo:hover svg path{opacity:1;}

    .section-video .plyr,
    .section-video .plyr__video-wrapper,
    .section-video .plyr__poster {
        width: 100%;
        height: 100%;
    }

        .section-video .plyr video,
        .section-video .plyr iframe,
        .section-video .plyr__video-wrapper video,
        .section-video .plyr__video-wrapper iframe,
        .section-video .plyr__poster video,
        .section-video .plyr__poster iframe {
            position: absolute;
            height: calc(100vw * .5625);
            top: 50%;
            left: 0;
            width:100%;
            transform: translateY(-50%);
        }
.plyr--full-ui.plyr--video .plyr__control--overlaid {
    width: 11.2vw;
    height: 11.2vw;
    background:url("../images/icon-video.svg") no-repeat center center;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid svg{display:none;}


.section-activities .items {
    margin-top: 25px;
}
.section-activities .item{padding:50px 20px 20px; position:relative; transition:var(--d-transition); transition-duration:0.2s;}
.section-activities .items .item .inner{position:relative; z-index:1;}
.section-activities .item .icon{max-height:115px; margin-bottom:60px;}
.section-activities .item h3{text-transform:uppercase; margin-bottom:40px; color:#C02646;}
.section-activities .item .thumb{padding-top:calc(100% * 325 / 486);}
.section-activities .item .description{position:absolute;}
.section-activities .item:before{content:''; position:absolute; left:0px; top:0px; width:0; height:100%; background:#C02646; opacity:0; transition:var(--d-transition); transition-duration:0.2s;}

.section-activities .item:hover:before{opacity:1; width:100%;}
.section-activities .item:hover{color:#fff; padding-left:40px;}
.section-activities .item:hover .icon{mix-blend-mode: soft-light;}
.section-activities .item:hover h3{color:#fff;}
.section-activities .item:hover .thumb {
    opacity: 0;
}
.section-activities .item:hover .description{}
.section-activities .btn-detail{margin-top:25px; }
.section-activities .btn-detail:before{background:#fff;}

.section-number .items {
    display: flex;
    margin-bottom: 50px;
}
.section-number .items .item{flex:0 0 20%; width:20%;text-align:center; padding-bottom:20px;}

.section-number .items .item .icon{margin-top:25px;}
.section-number .items .item .title{font-size:40px;font-weight: bold; color: #C02646; margin-bottom:0;}

.section-projects .items .thumb{padding-top:calc(100% * 783 / 482); }
.section-projects .swiper-slide{position:relative;}
.section-projects .swiper-slide .content{position:absolute; bottom:0px; left:0px; text-transform:uppercase; color:#fff; margin:0; padding:30px 10px; width:100%;
                                       background:rgba(192, 38, 70, 0.8);
                                       height:100px;
                                       transition:var(--d-transition);
                                       text-align:center;
}
.section-projects .swiper-slide .content .title{margin:0;}
.section-projects .swiper-slide .content p{display:none;}
.section-projects .swiper-slide:hover .content {padding-top:90%; height:100%; }
.section-projects .swiper-slide:hover .content p{display:block;}
.section-projects .swiper-slide:hover .content .title{margin:25px 0px;}

.section-news .items .thumb {
    padding-top: calc(100% * 397 / 526);
}

.section-news .date{color: #AEAEAD; margin:25px 0px;}
.section-news  h3.title{font-size:16px; text-transform:uppercase; margin:0;}
.section-news .btn-detail{margin-top:25px; }
.section-news .btn-detail:before{}

.section-partner .text-slide-wrapper {
    font-size: 32px;
    font-weight: 700;
    align-items: center;
    margin: 0px auto 5px;
    display: inline-flex;
}
    .section-partner .text-slide-wrapper .text-slide {
        width: 205px;
        height: 65px;
        display: inline-block;
        margin: 0px 10px;
    }
    .section-partner .text-slide-wrapper .text-slide .swiper-slide {
        background: #C02646;
        color: #fff;
    }
section-partner .description {
    font-size: 20px;
}
/*=======================
11. Responsive-CSS
==============================*/
@media (min-width:1201px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px;
    }

    .container-fluid {
        padding-left: 40px;
        padding-right: 40px;
    }
    .element-pl {padding-left: 40px;}
    .element-pr {padding-right: 40px;}
    .element-px {padding-left: 40px;    padding-right: 40px;}
}

@media (min-width:1601px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
    .container-fluid {
        padding-left: 140px;
        padding-right: 140px;
    }
    .element-pl {padding-left: 140px;}
    .element-pr {padding-right: 140px;}
    .element-px {padding-left: 140px;    padding-right: 140px;}
}