/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
:root {--primary-color: #446084 !important;}
.tooltipster-base {--tooltip-color: #fff !important; --tooltip-bg-color: #000000 !important;}
.off-canvas-right .mfp-content, .off-canvas-left .mfp-content {--drawer-width: 300px !important;}
html {background-color: rgba(25,20,20,0) !important;}
body.framed, body.framed header, body.framed .header-wrapper, body.boxed, body.boxed header, body.boxed .header-wrapper, body.boxed .is-sticky-section {max-width: 1080px !important;}
.header-main {height: 90px !important;}
#logo img {max-height: 90px !important;}
#logo {width: 200px !important;}
.header-bottom {min-height: 55px !important;}
.header-top {min-height: 30px !important;}
.transparent .header-main {height: 90px !important;}
.transparent #logo img {max-height: 90px !important;}
.has-transparent + .page-title:first-of-type,
.has-transparent + #main > .page-title,
.has-transparent + #main > div > .page-title,
.has-transparent + #main .page-header-wrapper:first-of-type .page-title {padding-top: 140px !important;}
.header.show-on-scroll, .stuck .header-main {height: 70px !important;}
.stuck #logo img {max-height: 70px !important;}
.header-bg-color {background-color: rgba(17,63,214,0.9) !important;}
.header-bottom {background-color: rgba(33,100,183,0.96) !important;}
.header-bottom-nav > li > a {line-height: 16px !important;}
@media (max-width: 549px) {
    .header-main {height: 70px !important;}
    #logo img {max-height: 70px !important;}
}
body {color: #000000 !important;}
h1,h2,h3,h4,h5,h6,.heading-font {color: #1e73be !important;}
body {font-size: 100% !important;}
@media screen and (max-width: 549px) {body {font-size: 100% !important;}}
body {font-family: Roboto, sans-serif !important;}
body {font-weight: 400 !important; font-style: normal !important;}
.nav > li > a {font-family: Roboto, sans-serif !important;}
.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family: Roboto, sans-serif !important;}
.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a {font-weight: 700 !important; font-style: normal !important;}
h1,h2,h3,h4,h5,h6,.heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a {font-family: Roboto, sans-serif !important;}
h1,h2,h3,h4,h5,h6,.heading-font,.banner h1,.banner h2 {font-weight: 700 !important; font-style: normal !important;}
.alt-font {font-family: "Dancing Script", sans-serif !important;}
.alt-font {font-weight: 400 !important; font-style: normal !important;}
.header:not(.transparent) .header-bottom-nav.nav > li > a {color: #ffffff !important;}
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a.active,
.header:not(.transparent) .header-bottom-nav.nav > li > a.current {color: #ffffff !important;}
.header-bottom-nav.nav-line-bottom > li > a:before,
.header-bottom-nav.nav-line-grow > li > a:before,
.header-bottom-nav.nav-line > li > a:before,
.header-bottom-nav.nav-box > li > a:hover,
.header-bottom-nav.nav-box > li.active > a,
.header-bottom-nav.nav-pills > li > a:hover,
.header-bottom-nav.nav-pills > li.active > a {color:#FFF !important; background-color: #ffffff !important;}
.widget a {color: #1e73be !important;}
.widget a:hover {color: #208eee !important;}
.widget .tagcloud a:hover {border-color: #208eee !important; background-color: #208eee !important;}
.absolute-footer, html {background-color: #00107a !important;}
.nav-vertical-fly-out > li + li {border-top-width: 1px !important; border-top-style: solid !important;}
.cls-mobile-footer {display: none !important;}
.cs-content .col-inner {width:100% !important; border: 2.5px solid rgba(0, 51, 102, 0.96) !important; border-radius: 15px !important; margin-bottom: 36px !important; overflow: auto !important; box-shadow: 0 0 15px rgba(0, 51, 102, 0.8) !important;}
.cs-content .col-inner::-webkit-scrollbar {width: 0.5rem !important; border-radius: 10px !important;}
.cs-content .col-inner::-webkit-scrollbar-thumb {border-radius: 70px !important; background-color: rgba(102, 178, 255, 0.96) !important;}
.label-new.menu-item > a:after {content:"New" !important;}
.label-hot.menu-item > a:after {content:"Hot" !important;}
.label-sale.menu-item > a:after {content:"Sale" !important;}
.label-popular.menu-item > a:after {content:"Popular" !important;}
.ux-menu-link__text {color:#FFFF00 !important; font-weight:700 !important;}
.image-container {border: 3px solid #66b2ff !important; border-radius: 15px !important; height: 300px !important; width: 300px !important; overflow: hidden !important; box-shadow: 0 0 20px rgba(0, 51, 102, 0.8) !important;}
.image-container img {width: 100% !important; height: auto !important; object-fit: cover !important;}
.custblog .is-divider {display: none !important;}
.custblog .post-item {padding: 5px !important;}
.custblog .post-item>div {border: 2px solid #003366 !important; border-radius: 10px !important; padding: 5px !important;}
.custblog .box-text {padding-bottom: 0 !important;}
.custblog .post-title a, .custblog .from_the_blog_excerpt {display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; -webkit-line-clamp: 2 !important;}
.home_content>.col {border: 3px solid #003366 !important; border-radius: 15px !important; height: 700px !important; padding: 10px !important; box-shadow: 0 0 20px #003366 !important;}
.home_content>.col>.col-inner {height: 100% !important; overflow: auto !important;}
.home_content>*::-webkit-scrollbar-thumb {background-color: #003366 !important; border-radius: 20px !important; border: 3px solid #003366 !important;}
::-webkit-scrollbar-thumb {background-color: #003366 !important; border-radius: 20px !important; border: 3px solid #003366 !important;}
::-webkit-scrollbar {width: 5px !important;}
::-webkit-scrollbar-thumb:hover {background: #66b2ff !important;}
.widget-title {color: #003366 !important;}
.is-divider.small::before, .is-divider.small::after {background-color: #66b2ff !important;}
.widget.widget_pages, .widget.widget_categories, .widget.widget_ultimate_posts, .widget.widget.flatsome_recent_posts {background-color: #ffffff !important; padding: 20px !important; border-radius: 10px !important; border: 1px solid #003366 !important; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 2px #003366 !important;}
.wp-caption.aligncenter img {border: 2px solid #003366 !important; border-radius: 10px !important; box-shadow: 0 0 19px 0px #003366 !important;}
.wp-block-image figcaption, figcaption, figure>figcaption {line-height: 1.2em !important; border-left: 10px solid #003366 !important; border-bottom: 2px solid #003366 !important; margin-top: 15px !important; margin-bottom: 25px !important; border-radius: 50px 00px !important; box-shadow: 0 0 19px 0px #003366 !important;}
.header-button-1 a, .header-button-2 a {
    color: #66b2ff; /* Xanh dương nhạt */
    background: linear-gradient(to top, #003366, #66b2ff); /* Chuyển màu xanh dương đậm - nhạt */
}

.header-button-1 a:hover, .header-button-2 a:hover {
    color: #003366; /* Xanh dương đậm */
    background: linear-gradient(to top, #66b2ff, #ffffff); /* Chuyển màu nhạt - trắng */
}

.header-button-1::before, .header-button-2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #66b2ff, 0 0 4px 2px #66b2ff;
    box-shadow: 0 0 17px 3px #66b2ff, 0 0 4px 2px #66b2ff;
    z-index: -1;
    -webkit-animation-name: blue-shadow;
    animation-name: blue-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 7px;
}

@keyframes blue-shadow {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 50%;
        left: 0;
    }
    50% {
        top: 50%;
        left: 50%;
    }
    75% {
        top: 0;
        left: 50%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

.header-button-1::after, .header-button-2::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #003366, 0 0 4px 2px #003366;
    box-shadow: 0 0 17px 3px #003366, 0 0 4px 2px #003366;
    z-index: -1;
    -webkit-animation-name: dark-blue-shadow;
    animation-name: dark-blue-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 7px;
}


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