/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
@font-face {
    font-family: 'SVN-Taken';
    src: url('/wp-content/themes/flatsome-child/fonts/SVN-TakenbyVultures.eot');
    src: url('/wp-content/themes/flatsome-child/fonts/SVN-TakenbyVultures.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/themes/flatsome-child/fonts/SVN-TakenbyVultures.woff2') format('woff2'),
        url('/wp-content/themes/flatsome-child/fonts/SVN-TakenbyVultures.woff') format('woff'),
        url('/wp-content/themes/flatsome-child/fonts/SVN-TakenbyVultures.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	--eras-primary : #032551;
	--eras-second : #fdc235;
	--eras-third: #d45f62;
}

.section-linh-vuc .col, .row-testimonial .col {padding-bottom: 0}

#top-bar {display: none;}
.copyright-footer {
	color: #fff;
}

ul.header-nav.nav {align-items: baseline}
ul.header-nav.nav li {margin: 0}
.header-button a {background-color: #F3F3F3}
.header-button a i{ padding: 13px 15px; color: #555}
.jet-mxh-footer {    display:  flex;    margin-bottom: 10px;	justify-content: end;}
.jet-mxh-footer a {    width: 6%;    border:3px solid #fff;    border-radius: 99px;}
.jet-mxh-footer img {    width: 100%;    padding: 1px; transition : transform .3s ease-in-out}
.jet-mxh-footer a:hover img {transform: scale(.9)}
.is-selected .home-title{
    animation: moveIn 1.75s forwards;
	position: absolute;
    font-size: 4em !important;
}
.is-selected .slogan-content {
    animation: typing 2.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
    overflow: hidden;
    border-right: 3px solid #B41317;
    white-space: nowrap;
    width: 0;
	
}
.is-selected .slogan-content .slogan {
    padding: 0 1rem;
	font-size: 6rem;
	font-family: 'SVN-Taken';
	line-height: 1.5
}
.section-banner {z-index: 999 }
.section-banner .row {position: absolute; bottom: -20px; }
.section-banner .row .icon-box-text, .section-banner h3 {color: #fff}
.section-banner .row h3 {margin-bottom: 0; font-size: 1.5rem}
.section-banner .row .icon-box {align-items: center}
.section-banner .row .col-inner {border: 1px solid #424242; padding: 20px ; border-radius: 10px}
.section-banner .row .col-inner:hover {background: vaR(--eras-primary); cursor: pointer; border-color: var(--eras-primary)}

.home-col-right {padding: 10% 5%; text-align: justify; background: var(--eras-primary)}
.home-bieu-mau img, .eras-bieu_mau img {border-radius:10px;}
.home-bieu-mau .box-text, .eras-bieu_mau .box-text {position: absolute; bottom: 0; padding: 20px;  transform: translateY(30%);     transition: transform 0.4s ease-in-out;}
.home-bieu-mau .box-text h5 , .eras-bieu_mau .box-text h5 {color: #fff; text-align: center}
.home-bieu-mau .box-text-inner > div, .eras-bieu_mau .box-text-inner > div {margin-top: 10px; display: block; opacity:0; text-align: center; transition: opacity 0.4s ease-in-out }

.home-bieu-mau .col-inner:hover .box-text, .eras-bieu_mau .col-inner:hover .box-text {transform: translateY(-50%);}
.home-bieu-mau .col-inner:hover .box-text-inner > div, .eras-bieu_mau .col-inner:hover .box-text-inner > div {opacity: 1; }
.home-bieu-mau .eras-overlay, .eras-bieu_mau .eras-overlay {background: #000; border-radius: 10px;}
.home-bieu-mau .col-inner:hover img, .eras-bieu_mau .col-inner:hover img {opacity: .6; }

.home-linh-vuc .col-inner {background: #fff; border:1px solid #ccc; border-radius: 10px; padding: 50px 15px}
.home-linh-vuc h5 {font-weight: 600; margin-bottom: 30px; font-size: 22px;}
.home-linh-vuc a i {font-size: 16px}
.home-linh-vuc .lv-image {    width: max-content;    background: var(--eras-third);    padding: 20px;
    border-radius: 99px;    position: relative;    transform: translate(-50%, -50%);    left: 50%;
    bottom: -70px;	z-index: 9999}
.home-linh-vuc .col:nth-child(2n+1) .col-inner {    margin-top: 20px}
.home-linh-vuc .col:nth-child(2n+1) .lv-image{	bottom: -90px}

.home-thanh-vien .box-text {position: absolute; bottom: 0; padding: 20px;  transform: translateY(30%); 
    transition: transform 0.4s ease-in-out; background: rgb(3 37 81 / 81%); border-radius: 10px 10px 0 0}
.home-thanh-vien .box-text h5 {color: #fff; text-align: left; font-size: 20px;}
.home-thanh-vien .eras-chucvu {color: #fff; font-size: 16px}
.home-thanh-vien .box-text-inner > div {margin-top: 10px; display: block; opacity:0; text-align: left; transition: opacity 0.4s ease-in-out }
.home-thanh-vien .col-inner:hover .box-text {transform: translateY(20%);}
.home-thanh-vien .col-inner:hover .box-text-inner > div {opacity: 1; }

.home-dich-vu .col-inner {	border: 1px solid #ccc; border-radius: 10px; padding: 30px 10px; margin-bottom: 50px}
.home-dich-vu .dv-image {    background: var(--eras-third);    padding: 20px;
    border-radius: 99px;    position: relative;    transform: translate(-50%, -50%);    left: 50%;
    bottom: 30px;	z-index: 9999;     width: 70px;}


.jet-breadcums{padding:0; background: #efefef}
.jet-breadcums .col {padding-bottom:0;padding-left: 15px}
.jet-breadcums .rank-math-breadcrumb {padding: 1rem 0 0; }

.eras-title-cat {color: var(--eras-primary); font-size: 25px; font-weight: 600}
.eras-archive .post-item .col-inner {border-radius: 10px; border: 1px solid #ededed}
.eras-archive .post-item:first-child .box-image {width: 100%!important;}
.eras-archive .post-item:first-child .box-vertical .box-text,
.eras-archive .post-item:first-child .box-vertical .box-image{display: block}

.eras-archive .post-item:first-child .box-text h5 a {font-size: 25px; font-weight: 600; color: var(--eras-primary)}
.eras-archive .post-item .box-text h5 a:hover {color : var(--eras-second)}
.eras-archive .from_the_blog_excerpt {font-size: 16px; padding: .8rem 0}
.eras-archive .post-item:first-child .box-image {border-radius: 10px 10px 0 0}
.eras-archive .post-item .box-image {border-radius: 10px 0 0 10px}
.eras-archive .post-meta , .eras-new-post .post-meta {background: var(--eras-primary); display: inline-block; color: #fff;position: absolute;    top: 0;    z-index: 9; font-weight: 600; padding: 5px;}
.eras-archive .post-meta .eras-date, .eras-new-post .post-meta .eras-date {font-size: 25px; display: block;}
.eras-archive .post-meta .eras-month, .eras-new-post .post-meta .eras-month  {font-size: 20px; display: block;}

.eras-post-sidebar h5 {font-size: 18px;font-weight: 600; color: var(--eras-primary)}
.eras-post-sidebar h5:hover {color : var(--eras-second)}
.eras-post-sidebar .box-text {padding: 1rem}

.nav-pagination li span, .nav-pagination li a{height: 2.75em;    line-height: 2.5em;    min-width: 2.75em; border: 0}
.nav-pagination li a {background: #efefef}

.share-post-title, .share-post-title span {display: flex; align-items: center; justify-content: space-between}
.share-post-title span {width: 20%;  align-items: baseline}

.eras-section-news {background: #efefef}
.eras-new-post .col-inner .box-image{border-radius: 10px 10px 0 0}
.eras-new-post .col-inner .box-text {border-radius: 0 0 10px 10px ; background: #fff; padding: 10px}
.eras-new-post h5.post-title a {display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eras-row-news h2 {color: var(--eras-primary); font-weight: 600; margin-bottom: 20px}

.row-testimonial .col-inner{	background: rgb(3 37 81 / 72%);	border-radius: 10px;	padding: 40px}
.row-testimonial .testimonial-meta {color: #fff}

.form-lh .col {padding-bottom: 0}
.form-lh input[type=text], .form-lh input[type=tel], .form-lh input[type=email], .form-lh select {
	height: 50px; border-radius: 10px}
.form-lh textarea, .form-lh input[type=submit] {border-radius: 10px;}

.title-image {
	position: absolute;
    transform: translate(0%, -100%);
    top: 50%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.col-tamnhin .icon-box {display: flex; align-items: center;}
.col-tamnhin{
    counter-reset: tamnhin;
}
.col-tamnhin .icon-box:before {
	counter-increment: tamnhin;
    content: counter(tamnhin, decimal-leading-zero);
	font-size: 6rem;
    line-height: 1.2;
    font-weight: 700;
    color: #B41317;
}

.col-tamnhin .icon-box-text {padding-left: 20px}

.col-dichvu .col-inner{display:flex; align-items: center}
.col-dichvu .image-rotate {
    transform: rotate(45deg);
}
.col-dichvu .image-rotate .img-inner img{
        width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(-45deg) scale(1.45);
}

.col-dichvu .img-inner{
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    max-width: 20rem;
    max-height: 20rem;
    width: 20vw;
    height: 20vw;
}

.col-dichvu .img-1 {
    bottom: -1.5rem;
    left: 4.2rem;
    z-index: 10;
}

.col-dichvu .img-2 {
    z-index: 10;
    right: 81%;
    top: -110px;
}

.col-dichvu .decor-1 {
    background: #19226D;
    max-width: 23rem;
    max-height: 23rem;
    width: 13vw;
    height: 13vw;
    top: 22%;
    left: 37%;
    z-index: 3;
}

.col-dichvu .decor-2 {
    background: #B41317;
    max-width: 17rem;
    max-height: 17rem;
    top: 21.5%;
    left: 42%;
    z-index: 2;
    width: 13vw;
    height: 13vw;
}

.col-dichvu .decor {
    position: absolute;
    transform: rotate(45deg);
    border-radius: 6px;
}

#footer .jet-mxh-footer {justify-content: flex-start;}
#footer .jet-mxh-footer a {border:0; width: 10%; margin-right: 1%}
#footer a {color :#fff}
#footer p {margin-bottom: 5px}

.row-lienhe .col-inner {border:1px solid #ededed; padding: 50px 10px; border-radius: 10px;}
.row-lienhe .col-inner:hover {background: vaR(--eras-primary)}
.row-lienhe .col-inner:hover .icon-box-text, .row-lienhe .col-inner:hover h3 {color: #fff}
.row-lienhe .icon-box-img svg path {fill: vaR(--eras-primary)}
.row-lienhe .col-inner:hover .icon-box-img svg path {fill: #fff}
.row-lienhe .col-inner a {font-size: 20px; font-weight: 600; color: var(--eras-primary)}
.row-lienhe .col-inner:hover a {color: #fff}

.col-lienhe .accordion-item .accordion-title  { border: 0; padding: .6em 1em; border-radius: 10px; font-size:20px; font-weight: 600; background: #ededed; margin-bottom: 10px}
.col-lienhe .accordion-item .accordion-inner {padding: 1em}
.col-lienhe .accordion-item .accordion-title.active {background: var(--eras-primary); color: #fff; }
.col-lienhe .accordion-item .toggle {left: auto; right: 0}

.eras-tv .col .col-inner{ padding: 5px 20px;box-shadow:0 0 3px 2px #ccc; margin-bottom: 10px; border-radius: 10px;} 
.eras-tv p {margin-bottom: 5px}
.eras-tv a {font-weight: 600; color: vaR(--eras-primary)}
.eras-tv a:hover {color: var(--eras-second)}
.eras-tv i {color: vaR(--eras-primary)}

.danh_muc_bm .accordion .toggle {	left: auto;	right: 0;}
.danh_muc_bm .accordion-title, .danh_muc_bm .accordion-title.active {padding:.4em 0; border:0; background: transparent; font-weight: 600; font-size: 16px}
.danh_muc_bm .accordion-title:hover, .danh_muc_bm .accordion-inner ul li a:hover {color: var(--eras-second); }
.danh_muc_bm .accordion .toggle i {font-size: 16px}
.danh_muc_bm .accordion-inner {padding : 5px 0 }
.danh_muc_bm .accordion-inner ul li::marker {color: var(--eras-primary);}
.danh_muc_bm .accordion-inner ul li a{color: #000; margin-bottom: 5px; }

.pswp__bg, .mfp-bg.mfp-ready {
    background-color: #1d1d1d!important;
}

#logo {width: auto!important;}
.logo-left .logo {margin-right: 5px!important;}
.title-header {font-size: 27px; font-weight: 600; color: var(--eras-primary); line-height: 30px;}





/* CSS LICH SU PHAT TRIEN*/
.timeline{
    position:relative;
    max-width:1000px;
    margin:auto;
    padding:50px 0;
}

/* Đường giữa */
.timeline::before {
    content: '';
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #d9d9d9;
    transform: translateX(-50%);
    height: 86%;
}

.timeline-item{
    position:relative;
    min-height:150px;
    display:flex;
    align-items:center;
}

/* Khối năm */
.timeline-year{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:110px;
    height:110px;
    border-radius:50%;
    background:#fff;
    border:2px solid #c5161d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-weight:700;
    color:#333;
    z-index:3;
}

/* Vòng ngoài */
.timeline-year::before{
    content:'';
    position:absolute;
    inset:-10px;
    border:1px dashed #4054b2;
    border-radius:50%;
}

/* Nội dung */
.timeline-content{
    width:40%;
    font-size:15px;
    line-height:1.6;
    color:#333;
    position:relative;
}

/* Trái */
.timeline-item.left .timeline-content{
    margin-left:auto;
    padding-left:120px;
}

/* Phải */
.timeline-item.right .timeline-content{
    margin-right:auto;
    text-align:right;
    padding-right:120px;
}

/* Chấm đỏ */
.timeline-content::before{
    content:'';
    position:absolute;
    top:50%;
    width:10px;
    height:10px;
    background:#c5161d;
    border-radius:50%;
    transform:translateY(-50%);
}

/* Đường nối */
.timeline-content::after{
    content:'';
    position:absolute;
    top:50%;
    height:1px;
    background:#999;
    transform:translateY(-50%);
}

.timeline-item.left .timeline-content::before{
    left:-5px;
}

.timeline-item.left .timeline-content::after{
    left:0;
    width:90px;
}

.timeline-item.right .timeline-content::before{
    right:-5px;
}

.timeline-item.right .timeline-content::after{
    right:0;
    width:90px;
}

/* Mobile */
@media(max-width:768px){

    .timeline::before{
        left:60px;
    }

    .timeline-year{
        left:60px;
        width:80px;
        height:80px;
        font-size:28px;
    }

    .timeline-content{
        width:calc(100% - 140px);
        margin-left:140px !important;
        text-align:left !important;
        padding:0 0 0 40px !important;
    }

    .timeline-content::before{
        left:0 !important;
        right:auto !important;
    }

    .timeline-content::after{
        left:0 !important;
        right:auto !important;
        width:30px;
    }
}

/*CSS BUTTON CUSTOME SLIDE*/
.eras-custome-btn-slider {margin: 20px 0 ;text-align: center}
.eras-custome-btn-slider .news-prev , .eras-custome-btn-slider .news-next {	margin-bottom: 0; background-color: #fff; border-radius: 10px; height: 2rem; transform: rotate(45deg);   width: 2rem;    line-height: 1.5;    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);}
.eras-custome-btn-slider .news-prev i, .eras-custome-btn-slider .news-next i { transform: rotate(315deg); width: 2rem; height: 2rem; font-size: 18px; right: -5%; position:absolute;    top: 20%;}
.eras-custome-btn-slider button:hover {background: var(--eras-primary); color: #fff}

/*CSS ERAS TABBED CONTENT TV*/
.tv-tabbed-content ul li{width: 32%; text-align: center;	margin: 1%; border: 1px solid var(--eras-primary); border-radius: 10px;}
.tv-tabbed-content  ul li a{font-size: 15px}
.tv-tabbed-content  ul li.active, .tv-tabbed-content  ul li:hover {background: var(--eras-primary) }
.tv-tabbed-content  ul li.active a, .tv-tabbed-content ul li:hover a {	color: #fff; }

/*CSS ERRAS TABBED Content*/
.eras-tabbed-content ul li {	width: 48%; text-align: center;	margin: 1%; border: 1px solid var(--eras-primary); border-radius: 10px;}
.eras-tabbed-content ul li a{font-size: 15px}
.eras-tabbed-content ul li.active, .eras-tabbed-content ul li:hover {background: var(--eras-primary) }
.eras-tabbed-content ul li.active a, .eras-tabbed-content ul li:hover a {	color: #fff; }

/*CSS ERAS DOWNLOAD*/
.eras-btn-download { background: var(--eras-second); border-radius: 5px;padding: 9px;    color: #fff;    font-weight: 600;}
.eras-btn-download:hover {background: var(--eras-primary); color: #fff}
/*CSS HOVER BUTTON*/
.eras-btn{
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    z-index: 1;
	margin-bottom:0;
	border-radius: 10px;
	text-transform: capitalize
}
.eras-btn:hover {
	background-color: var(--eras-second)
}

.eras-btn::before,
.eras-btn::after{
    content: '';
    position: absolute;
    top: 0;
    left: -55%;
    width: 120%;
    height: 100%;
    z-index: -1;
    transition: all .4s ease;
}

.eras-btn::before{
    background: var(--eras-primary);
    transform: skew(30deg) translateX(-100%);
}

.eras-btn::after{
    background: var(--eras-second);
    transform: skew(30deg) translateX(-120%);
}

.eras-btn:hover::before{
    transform: skew(30deg) translateX(20%);
}

.eras-btn:hover::after{
    transform: skew(30deg) translateX(40%);
}

/*CSS CUSTOME FLICKY*/
.flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button, 
.slider:hover .flickity-prev-next-button {
    opacity: 1;
}
.flickity-prev-next-button .arrow, .flickity-prev-next-button svg {
    fill: #fff!important;
}

.flickity-prev-next-button svg, 
.flickity-prev-next-button:hover .arrow, 
.flickity-prev-next-button:hover svg {
    background-color: var(--eras-primary);
    border-color: var(--eras-primary)!important;
    padding: 12px;
    fill: #fff!important;
    border-radius: 99px
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: calc(100%)
    }
}

@keyframes moveIn {
	0% {
		transform: translateX(100vw);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: transparent;
    }
}