/*
Theme Name: Flastsome Child
Theme URI: https://example.com/
Description: Child theme for the Flatsome theme
Author: Your Name
Author URI: https://example.com/
Template: flatsome
Version: 1.0.0
*/

.d-flex {
	display: flex;
}
.d-al-center {
	align-items: center;
}
.d-wrap {
	flex-wrap: wrap;
}
.d-center {
	justify-content: center;
}
.d-space {
	justify-content: space-between;
}
.mrb-0 {
	margin-bottom: 0;
}
.pdb-0{
	padding-bottom: 0;
}
.gap-5 {
	gap: 5px;
}
.gap-15 {
	gap: 15px;
}
.gap-10 {
	gap: 10px;
}
.gap-20 {
	gap: 20px;
}
.bdr-10 {
	border-radius: 10px;
}
.w-100 {
	width: 100%;
}
.w-24 {
	width: 24% !important;
}
.d-block {
	display: block;
}
.mrb-0 {
	margin-bottom: 0;
}
.box-top-custom {
    display: flex;
    width: 100%;
	height: 100%;
    margin: 0 auto;
}

/* Mỗi ô */
.box-item {
    flex: 1;
    padding: 18px 10px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1.3;
	transition: all 0.3s ease-in;
}
.box-item:hover {
	color: #FFF;
	transform: translateY(-6px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);
	transition: all 0.3s ease-in;
}
.box-item:hover span {
	color: #FFF;
}
/* Màu từng ô */
.box-1 { background: #009900; }  /* xanh lá */
.box-2 { background: #228bcc; }  /* xanh dương */
.box-3 { background: #ff6600; }  /* cam */
.header-nav.nav li {
	margin: 0 !important;
}
.header-nav.nav.nav-center > li > a{
	padding: 15px 30px;
	color: var(--fs-color-primary);
	transition: all 0.3s ease-in;
}
.header-nav.nav.nav-center > li.current_page_item > a {
	background-color: var(--fs-color-primary);
	color: #FFF;
}
.header-nav.nav.nav-center > li:hover > a {
	background-color: var(--fs-color-primary);
	color: #FFF;
	transition: all 0.3s ease-in;
}
.nav-dropdown-default .nav-column li>a, .nav-dropdown.nav-dropdown-default>li>a {
	margin: 0;
	padding: 10px 15px;
	border-radius: 10px;
	border-bottom: unset;
	transition: all 0.3s ease-in;
}
.nav-dropdown-default .nav-column li:hover>a, .nav-dropdown.nav-dropdown-default>li:hover>a {
	background-color: var(--fs-color-primary);
	color: #FFF;
	transition: all 0.3s ease-in;
}
.btn-center {
	margin: 0 auto;
	border-radius: 10px !important;
	display: block;
	width: max-content;
}
.box-about .col-inner,
.box-about-right .col-inner{
	background-color: rgb(228, 228, 228);
	padding: 20px !important;
	border-radius: 25px;
}
.box-about-right .col-inner {
	background-color: #FFF;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);
}
.box-about-right a {
	color: var(--fs-color-primary);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}
.box-about-right p {
	margin-bottom: 10px;
}
.box-about-right a:hover {
	text-decoration: underline;
}
.mask-arrow {
	background-color: rgb(245, 245, 245);
	margin-top: 30px;
    -webkit-clip-path: polygon(0 0, calc(50% - 30px) 0, 50% calc(0% + 30px), calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(50% - 30px) 0, 50% calc(0% + 30px), calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
	border-radius: 10px;
}
.mask-arrow > .col:last-child .col-inner {
	padding-left: 30px;
	padding-top: 20px;
}
.col-4-custom .col-inner {
	display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.col-4-custom .col-inner .icon-box {
    width: 48%;
}
.mg-top-30 {
    margin-top: 30px;
}
.box-img-custom .box-text {
    width: 100%;
}
.box-img-custom:hover .box-text {
    background-color: var(--fs-color-primary);
    
}
.box-img-custom:hover .box-text p {
    color: #FFF;
}
.row-bdr .col-inner,
.box-img-custom {
    border-radius: 5%;
}
.row-qtrinh .col:nth-child(even) .col-inner{
    background-color:  rgb(177, 177, 177);
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    height: 100%;
}
.row-qtrinh .col:nth-child(odd) .col-inner{
    background-color:  rgb(223, 223, 223);
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    height: 100%;
}
.row-qtrinh .col .col-inner:hover {
   box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .22); 
}   
.custom-blog-post .col-inner,
.custom-blog-post .col-inner .box,
.post-item .col-inner,
.post-item .col-inner .box {
    border-radius: 10px;
}

.custom-blog-post .col-inner .box .box-image,
.custom-blog-post .col-inner .box  .box-image img,
.post-item .col-inner .box .box-image,
.post-item .col-inner .box  .box-image img {
    border-radius: 10px 10px 0 0;
}
.from_the_blog_comments,
#comments{
    display: none;
}
.title-ft h2 {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 700;
	color: var(--fs-color-primary);
    text-transform: capitalize;
    position: relative;
}
.title-ft h2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 2px;
    background-color: var(--fs-color-primary);
}
.box-form form input{
    width: 100% !important;
    padding: 25px 20px !important;
    border-radius: 50px !important;
    border: 1px solid var(--fs-color-primary) !important;
    color: #404041 !important;
}
.box-form form textarea {
	width: 100% !important;
    padding: 25px 20px !important;
    border-radius: 15px !important;
    border: 1px solid var(--fs-color-primary) !important;
    color: #404041 !important;
}
.box-form form input[type="submit"] {
	line-height: 1 !important;
	background-color: var(--fs-color-primary) !important;
	color: #FFF !important;
	padding: 15px !important;
	transition: var(--fs-transtion);
}
.box-form  form input[type="submit"]:hover {
	box-shadow: unset !important;
	background-color: var(--fs-color-secondary) !important;
	transition: var(--fs-transtion);
}
.header-bottom {
    min-height: 50px !important;
}
.box-qtrinh {
	text-align: center;
}
.left-floating {
    position: fixed;
    left: 20px;
    bottom: 85px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

.left-floating a {
    background: #2f80ff;
    color: #fff;
    padding: 6px 18px;
    font-size: 14px;
    width: max-content;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 400;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.left-floating .hotline {
    background: red;
}
.footer-vr {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #d9d9d9;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 9999;
}

.footer-vr a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    border: 2px solid #FFFF;
    font-weight: 600;
    text-decoration: none;
}
.footer-vr img {
	width: 20px;
}
.btn-call     { background: #f7941d; }
.btn-msg      { background: #00a2ff; }
.btn-zalo     { background: #0068ff; }
.btn-email   { background: #6bc530; }
body {
	padding: 0 0 72px 0;
}
@media (max-width: 849px) {
	.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
		background-color: #FFF !important;
	}
	.off-canvas .nav-vertical>li>a {
		color: #000 !important;
	}
	.col-4-custom .col-inner .icon-box {
		width: 45%;
	}
	.section-all .col {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}
	.section-all .row-bdr .col,
	.section-all .row .gallery-col {
		flex-basis: 50%;
		width: 50%;
		max-width: 50%;
	}
	.section {
		padding: 30px 0 !important;
	}
	.col-100 {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.section-all .row-qtrinh .col {
		flex-basis: 50%;
		width: 50%;
		max-width: 50%;
	}
	#footer .section .col {
		flex-basis: 50%;
		width: 50%;
		max-width: 50%;
	}
	.box-item a span br {
		display: none;
	}
	#logo {
		width: 125px !important;
		margin-right: 0 !important;
	}
	.medium-logo-left .flex-left {
		flex: unset !important;
		width: 100%;
	}
	.box-item {
		padding: 10px;
		font-size: 12px;
	}
	.mask-arrow > .col:first-child .col-inner {
		padding-top: 20px;
	}
	#masthead > div:nth-child(1),
	.header-main{
		height: 94px !important;
	}
	.box-top-custom {
		align-items: stretch !important;
	}
}
/* Cho đẹp hơn trên mobile */
@media (max-width: 768px) {
    .service-bar {
        flex-direction: column;
    }
    .service-item {
        margin-bottom: 5px;
    }
	.section-all .row-qtrinh .col {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}
	.footer-vr a span {
		display: none;
	}
}
@media (max-width: 600px){
	.box-item {
		padding: 8px;
		font-size: 14px;
		display: flex;
        align-items: center;
        justify-content: center;
	}
	#footer .section .col {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}
	.section-all .row-bdr .col {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}
	.header-bottom-nav.mobile-nav > li {
        width: 33%;
        margin: 0;
        text-align: center;
	}
	li.current-dropdown>.nav-dropdown {
		left: -165px !important;
	}
}