@font-face {
    font-family: 'Futura Cyrillic';
    src: url('./wp-content/uploads/fonts/chinese.msyh.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root{
    --main-font-family: "Microsoft Yahei", Arial, "simsun", HELVETICA;
}
body{
    font-family: var(--main-font-family) !important;
}
#main{
    min-height: 55vh;
}
.nav-left {
    justify-content: space-evenly !important;
    
}
.header-nav-main.nav-line-bottom > li > a:before{
    background-color: #17b8e8 !important;
}
.fa-rocketchat{
    font-size: 20px;
}
.icon-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.qr-popup {
    display: none;
    position: absolute;
    top: 30px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 150px;
    height: 150px;
}
.slider-banner img{
	min-height: calc(100vh - 90px );
}
.icon-container:hover .qr-popup {
    display: block;
}

.qr-popup img {
    width: 300px; 
    height: auto;
}

.header-full-width .container{
    max-width: 1700px !important;
}

.absolute-footer {
    display: none;
}
.col-cat-home{
    cursor: pointer;
}
.col-cat-home .img-cat-home img{
    border: 8px solid #ffffff82;
}
.col-cat-home .col-inner{
    transition: .3s ease-in;
	height:450px;
}

.col-cat-home:hover .col-inner{
    background-image: linear-gradient(90deg, #016cb7cc, #19acd991);
}
.title-cat-home p{
        height: 70px;
}
.col-cat-home:hover .title-cat-home p{
    color: #fff !important;
}

#particles-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Đảm bảo particles nằm phía sau nội dung */
    pointer-events: none; /* Để không ảnh hưởng đến các sự kiện nhấp chuột */
}

.section {
    position: relative; /* Đặt relative để particles nằm trong vùng của section */
    z-index: 2; /* Đảm bảo nội dung nằm phía trên particles */
}
.row-cat-home{
    position: relative;
    z-index: 999;
}

.title-about-home{
    float: left;
    width: 100%;
    position: relative;
    padding: 25px 0;
    margin-bottom: 20px;
}
.title-about-home h1{
    float: left;
    width: 399px;
    color: #333;
    font-size: 2.157em;
    padding-bottom: 5px;
    line-height: 40px;
    letter-spacing: 5px;
    background: #f5f5f5;
    position: relative;
    z-index: 6;
    font-family: Arial;
    text-transform: uppercase;
    margin-bottom: 0px;
    font-family: var(--main-font-family);
}
.title-about-home p{
    float: left;
    width: 399px;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 3px;
    background: #f5f5f5;
    position: relative;
    z-index: 6;
    color: #333333;
    font-family: var(--main-font-family);
}
.title-about-home .line{
    float: left;
    width: 399px;
    height: 100%;
    border: 5px solid #016cb7;
    position: absolute;
    left: 83px;
    top: 0;
    z-index: 1
}
.description-about p{
    font-family: var(--main-font-family);
}
.btn-about{
    background-color: #016cb7 !important;
    font-size: 16px;
    font-weight: 500;
}
.title-model-home h1, .title-partner-home h1{
    float: left;
    width: 100%;
    color: #333333;
    font-size: 2.1257em;
    line-height: 36px;
}
.title-model-home p, .title-partner-home p{
    float: left;
    width: 100%;
    color: #999999;
    font-size: 16px;
    line-height: 26px;
    text-transform: uppercase;
    margin: 13px 0;
}
.row-list-model .img-inner{
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.6);
}

.row-list-model .col-inner .img-inner img{
    transition: .3s ease-in;
}
.row-list-model .col-inner:hover .img-inner img{
    transform: scale(1.1);
}
.title-products-home h2, .title-products-home p{
    position: relative;
    z-index: 10;
}
.icon-menu{
    color:#016cb7;
}
.contact-footer p{
    margin-bottom: 10px;
}
.qr_code_footer img{
    width: 185px;
}
.list_qr_code_footer{
        display: flex;
        gap: 10px;
        align-items: center;
}
.title-page p{
    margin-bottom: 5px;
    font-size: 38px;
}
.title-page span{
    font-size: 14px;
    background: -webkit-linear-gradient(right bottom, #17b8e8, #016cb7);
    padding: 5px 21px;
}
.col-breadcrumb{
    padding: 0px;
}
.col-philosophy{
    background-image: url('http://localhost/mutto/wp-content/uploads/2024/09/1vomPsrMVKFBfLJsCZaSNzXjIFRToAyFMDhzktRV.jpg');
    padding: 10px;
    background-position: center right;
}
.col-philosophy-content p {
    margin-bottom: 20px;
    
}

/* Ghi đè margin-bottom cho thẻ p cuối cùng */
.col-philosophy-content p:last-of-type {
    margin-bottom: 0;
}

.col-philosophy-content{
    padding: 0px 10px 0px 10px;
}
.main-content span{
    font-size: 13px;
}
.row-partner .col-inner{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
	grid-gap:10px;
}
.row-partner .col-inner img{
    border: 1px solid #ddd;
	
}

.row-partner .col-inner .img-inner:hover{
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease;
}

.contact-info-page{
    margin-top: 30px;
}
.row-contact-page .col-inner{
    height: 400px;
}

.form-contact-page{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
}
.form-contact-page .submit-group {
    text-align: end;
}
.form-contact-page .submit-group input{
    margin: 0;
}
.form-contact-page input, .form-contact-page textarea{
    box-shadow: none;
}
.wpcf7-submit{
    background-color: #17b8e8 !important;
}
.wpcf7-spinner{
    display: none;
}
#post-list{
    padding: 17px;
    background: #f3f3f3;
}
.product-small .col-inner {
    background: #f5f5f5;
    padding: 3%;
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 2;
	min-height:360px;
}

.product-small .col-inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 0;
    top: 50%;
    left: 0;
    transition: all 0.5s;
    background: linear-gradient(90deg, #016cb7, #19acd9);
    opacity: 0;
}

.product-small .col-inner:hover .product-title a{
    color: #fff;
}

.product-small .col-inner:hover::after {
    height: 100%;
    top: 0;
    opacity: 1;
}
.custom-contact{
    color: #014099;
    font-size: 20px;
    margin-bottom: 10px;
}
.fixed-buttons {
    position: fixed;
    bottom: 155px;
    right: 0px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.button-phone {
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    background-color: #3a79b2;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
    transition: all 0.3s ease;
}
.buttons{
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    background-color: #3a79b2;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all 0.3s ease;
}
.button-phone.phone {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #3a79b2;
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.3s ease;
    margin: 0;
}

.button-phone.phone .button-content {
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #ffffff;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.button-phone.phone:hover {
    width: 160px;
}

.button-phone.phone:hover .button-content {
    width: auto; 
    opacity: 1;
}

.button-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.button-phone.phone .button-icon i {
    color: #ffffff;
}

.buttons.qr-code:hover .qr-content {
    display: grid;
    opacity: 1;
    width: 100px;
	text-align:center;
}

.buttons.qr-code .qr-content {
    position: absolute;
    top: 0;
    right: 100%; 
    background-color: #ffffff; 
    color: #000000;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    opacity: 0;
    width: 0;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.qr-code .qr-content img {
    width: 100px; 
    margin: 0 auto;
    display: block;
}
.flickity-page-dots .dot{
	height: 6px;
    width: 24px;
    background: #17b8e8;
	border: unset;
    border-radius: unset;
}
.slider-nav-light .flickity-page-dots .dot {
    border-color: #17b8e8;
}
.slider-nav-light .flickity-page-dots .dot.is-selected{
	    background-color: #016cb7;
}
.flickity-prev-next-button{
	opacity:1;
	width:50px;
}
.slider-nav-circle .flickity-prev-next-button svg{
	border: unset;
    border-radius: unset;
    background: #7f7f7f4a;
	height: 45px;
    padding: 15px;
}
.lswssp-design-1 .lswssp-slide .lswssp-logo-img-wrap{
	border:1px solid #ddd;
}
.btn-about-home{
	float: left;
    width: 175px;
    height: 48px;
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    background: #016cb7;
    border-radius: 54px;
    text-transform: uppercase;
    text-align: center;
}
.btn-about-home:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: #17b8e8;
	color: #fff;
}
.flickity-prev-next-button.previous{
	left: 0%;
    transform: translateX(0%);
	width: 110px;
}
.flickity-prev-next-button.next{
	right: 0%;
    transform: translateX(0%);
	width: 110px;
}
.gr_qr_footer{
	display:flex;
	align-items:center;
}
.col-bottom-footer{
	padding-bottom:0px;
}
.nav-dropdown{
    background: #016cb7;
	color:#fff;
	border:none;
}
.nav-dropdown li a{
	color:#fff;
}
.nav-dropdown li:hover{
	background: #17b8e8;
	color:#fff;
}
.nav-dropdown li:hover a{
	color:#fff;
}
.nav-dropdown li.active>a{
	color:#fff;
}
.nav-dropdown-has-border .nav-dropdown{
	border:none;
	padding: 0px;
}
.nav-dropdown.nav-dropdown-default>li>a{
	border-bottom: 1px solid #0162a6;
}
.wpcf7-form textarea{
	height:150px;
}
.product-tabs{
	justify-content: start !important;
	border-bottom:2px solid #ddd;
	height:50px;
}
.nav-line>li>a:before{
	background-color:unset !important;
}
.product-footer .woocommerce-tabs{
	border-top:none;
}
.description_tab.active{
	color: #000;
    border-bottom: 2px solid #ffaa29;
	float: left;
    height: 50px
}
.product-tabs li a{
	font-size:20px;
}
.tab-panels .woocommerce-Tabs-panel{
	font-size:16px;
	color:#666666;
}
.breadcrumb-custom{
	display:flex;
	gap:5px;
	flex-wrap:wrap;
}
.back-to-top{
	right: 0px;
	bottom: 110px;
}
.shop-page-title {
	display:none;
}
.shop-container{
	margin-top:50px;
}
.polylang_langswitcher li{
	display:inline;
	padding-left:5px;
	list-style:none;
}
.nav-right{
	gap:25px;
}
.blog-post .col-inner{
	 box-shadow: none;;
}
.blog-post .box-blog-post{
	 background-color: #f3f3f3 !important;
	margin-top:15px;
}
.blog-post .post-item{
	background-color: #f3f3f3 !important;
	margin-bottom:10px;
}
.blog-post .box-blog-post .blog-post-inner .is-link::before {
    content: "→";
    font-weight: 900;
    margin-right: 8px;
	font-size: 15px;
}
.search-wrapper-header {
    position: relative;
}

.search-icon-header {
    cursor: pointer;
    padding: 10px;
}

.ux-block-custom {
    position: absolute;
    top: -105px;
    left: -24px;
    width: 105%;
    z-index: 1000;
	transition: top 0.5s ease-in-out;
}

 .search-wrapper-header:hover + .ux-block-custom {
    top: 0px;
}

.header-bottom {
    min-height: 1px !important;
}

.header-bottom .flex-center {
    width: 100%;
}

.header-bottom .html_nav_position_text_top {
    width: 100%;
}

.header-bottom .container {
    max-width: 100% !important;
}

.ux-block-custom .row-search {
    margin: 0 auto !important;
    width: 30% !important;
}

.ux-block-custom .col-search {
    padding-bottom: 0px !important;
}

.search-header {
    display: flex;
}

.search-header input[type="search"] {
    padding: 20px;
}
.header-main{
	background:white;
}
.ux-search-submit{
	background: #17b8e8;
	min-width:10% !important;
}
.off-canvas-left.mfp-ready .mfp-content{
    width: 100%;
	background: #333333db;
}
.off-canvas:not(.off-canvas-center) .nav-vertical li>a{
	color:white;
}
.nav-sidebar.nav-vertical>li+li{
	border-top:1px solid #222 !important;
}