/*
Theme Name: sonha Child
Description: Đây là Child Theme của Flatsome.
Author: Tên bạn hoặc công ty
Template: flatsome
Version: 3.0
Text Domain: flatsome-child
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');
.font__spline h2{
	font-family: 'Spline Sans Mono', sans-serif !important;
}
:root {
	--main-color: #3E4095;
	--sc-color: #3E4095;
    --color-black: #1e1e1e;
	--color-sc-bl: #333333;
    --color-white: #ffffff;
    --color-grey: #6B7280;
	 --promo-height: 2.5rem;
     --menu-height: 6.25rem;
	--w-container: 100vw
}
	
* {
    scroll-behavior: smooth !important;
}
body {
	line-height: 1.5;
}
html {
	font-size: 3.5vw
	} 
h1, h2, h3, h4, h5, h6 {
	 
}

.fs-18 {
	font-size: 1.125rem
}
.fs-20 {
	font-size: 1.25rem
}
.fs-24 {
	font-size: 1.5rem
}
.fs-16 {
	font-size: 1rem
}
.fs-14 {
	font-size: 0.875rem
}
.fw-400 {
	font-weight: 400
}
.fw-100 {
	font-weight: 100
}
.m-0 {
	margin: 0;
}
.mb-0 {
	margin-bottom: 0;
}
.p-0 {
	padding: 0 !important
}
.h-full, .h-full-img {
	height: 100%
}
.h-full-img * {
	height: 100%
}
.h-full-img img {
	object-fit: cover;
	objec-position: center;
}
.w-full {
	width: 100%
}
.mb-1 {
	margin-bottom: 1rem
}
.pb-1 {
	padding-bottom: 1rem !important
}
.pt-1 {
	padding-top: 1rem !important
}
.ptb-1 {
	padding: 1rem 0 !important
}
.pb-2 {
	padding-bottom: 2rem !important
}
.pt-2 {
	padding-top: 2rem !important
}
.ptb-2 {
	padding: 2rem 0 !important
}
.pb-3 {
	padding-bottom: 3rem !important
}
.pt-3 {
	padding-top: 3rem !important
}
.ptb-3 {
	padding: 3rem 0 !important
}
.pb-4 {
	padding-bottom: 4rem !important
}
.pt-4 {
	padding-top: 4rem !important
}
.ptb-4 {
	padding: 4rem 0 !important
}
.pb-5 {
	padding-bottom: 5rem !important
}
.pt-5 {
	padding-top: 5rem !important
}
.ptb-5 {
	padding: 5rem 0 !important
}
.ml-0, .mx-0 {
    margin-left: 0 !important;
}
.mr-0, .mx-0 {
    margin-right: 0 !important;
}
.mp-0 p {
	margin: 0 !important;
}
.row {
	max-width: initial !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.flex__row {
	display: -ms-flexbox;
    display: flex;
}
.flex-1 {
	flex: 1;
}
.z--1 {
	z-index: -1
}
.z-1 {
	z-index: 1
}
.z-2 {
	z-index: 2
}
.z-3 {
	z-index: 3
}
.z-4 {
	z-index: 4
}
.z-5 {
	z-index: 5
}
.z-6 {
	z-index: 6
}
.z-7 {
	z-index: 7
}
.z-8 {
	z-index: 8
}
.z-9 {
	z-index: 9
}
.container {
	max-width: var(--w-container) !important
}
.container__fluid {
    width: 90vw;
    margin: 0 auto;
}
.page-wrapper {
    padding-bottom: 0;
    padding-top: 0;
}
.header-main .nav li{
	margin: 0 !important
}
.header-main .nav {

}

.header-nav-main > li >  .sub-menu  {
	
}
.header-nav-main .sub-menu .sub-menu {

}

.header-inner.container {
	max-width: 100vw !important;
}
#header  .nav-dropdown li {
	
}

#header  .nav-dropdown li:hover .sub-menu {
	
}


#header  .nav-dropdown li.left .sub-menu {
	
}


#header .nav-dropdown li  a{
	
}

.header-main .nav > li > a {
    font-size: 1.25rem;
    text-transform: capitalize;
    font-weight: 600;
    padding: 1.125rem;
}
.header-search-lightbox a.icon {
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
	background-color: #E0E0E0 !important;
}
.header-search-lightbox a.icon i.icon-search {
    color: #000;
    font-size: 0.675rem !important;
    top: 0 !important;
}
.header-main .nav > li.menu-item > a:before {
	
}
.header-main .nav > li.menu-item > a:hover:before, .header-main .nav > li.menu-item.current-menu-item > a:before {
	height: 2px !important;
}
.nav:hover>li:not(:hover)>a:before {
  
}
.absolute-footer {
	display: none;
}
.header-main .nav li.header-search {
    margin-left: 1.875rem !important;
}
.header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
}
.single__post .col__content__single #ez-toc-container {
	display: none;
}
@media screen and (min-width: 564px) {
	html {
	font-size: 1.93333vw;
	} 


}
@media screen and (min-width: 850px) {
	html {
	font-size: 1.6vw;
	} 
:root {
        --w-container: 97vw
    }
	.container {
		max-width: var(--w-container) !important
	}
}
@media screen and (min-width: 998px) {
	html {
	font-size: 1.3333vw;
	} 
:root {
        --w-container: 69rem
    }
	.container {
		max-width: var(--w-container) !important
	}
	.ss__mb {
		display: none
	}
}
@media screen and (min-width: 1024px) {

}
@media screen and (min-width: 1240px) {
	html {
	font-size: 1.11333vw;
	} 
	:root {
        --w-container: 80rem
    }
	.container {
		max-width: var(--w-container) !important
	}

}

@media screen and (min-width: 1440px) {
	html {
	font-size: 1vw;
	} 	
	:root {
        --w-container: 88.88rem;
    }
	.container {
		max-width: var(--w-container) !important
	}
}
@media screen and (min-width: 1600px) {
	:root {eem 
        --w-container: 90rem
    }
	html {
	font-size: 0.83333vw;
	} 
	.container {
		max-width: var(--w-container) !important
	}
	
}

@media screen and (max-width: 1599px) { 

}
@media screen and (max-width: 1439px) {
	
}

@media screen and (max-width: 1239px) {
	.fs-20 {
        font-size: 1rem;
    }
	.header-main .nav > li > a {
		font-size: 1.125rem;
	}
	.header-main .nav li.header-search {
		margin-left: 1rem !important;
	}
}
@media screen and (max-width: 1025px) {
	.header-main .nav > li > a {
		font-size: 1rem;
	}
	#logo img {
		max-height: 45px !important;
	}
	#logo {
		width: 10rem !important;
	}
	.header-main .nav > li > a {
		padding: 0.75rem;
	}
}
@media screen and (max-width: 997px) {
	.container__fluid {
        width: 100vw;
        padding: 0 15px;
    }
}
@media screen and (max-width: 849px) {
	
}

@media screen and (max-width: 563px) {
	.fs-20 {
		font-size: 1.125rem;
	}
	.fs-18 {
		font-size: 1rem;
	}
}