/*
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.   ***************/
.product_cat_sub{
	display:none;
	padding:10px;
}
.row_menu_product_cat{
	transform: translate(-100%, 0px);
	transition:all .3s;
}
.row_menu_product_cat.active{
	transform: translate(0%, 0px);
	transition:all .3s;
}
.closemenu{
	font-size: 30px;
    position: absolute;
    right: 10px;
    top: 0px;
    color: red;
    font-weight: bold;
    line-height: 1;
}
.row_menu_product_cat_inner{
	margin-top:30px;
}
.product_cat_inner{
	display: flex;
    align-items: center;
	justify-content:space-between;
	padding: 7px;
    border-radius: 99px;
    background: #f5cacb;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.row_menu_product_cat{
	position: fixed;
    top: 0;
    z-index: 999999;
    background: #f9e2e7;
    width: 100%;
    height: 100%;
}
.main-menu-overlay+.mfp-wrap .mfp-content{
	background: #f9e2e7!important;
}
.product_cat_inner .image-cover{
    height: 30px;
    width: 30px;
    border-radius: 99px;
}
.product_cat_wrap{
	display: block;
    width: 100%;
    padding-bottom: 10px;
}
.more_product_cat{
	display: flex;
    align-items: center;
    line-height: 1;
    font-size: 20px;
    margin-bottom: 10px;
	padding-right:10px;
}
.product_flex{
	display: flex;
    align-items: center;
	flex:1;
}
.box-image+span{
	display: block;
    text-align: center;
	width:100%
}
.product_cat_sub_item{
	text-align:center
}
.product_cat_inner .box-image{
	margin:0
}
.product_cat_inner span{
	padding-left:10px;
}
#billing_city_field,#shipping_city_field {
 float: none;
 width: 100%;
}
.footer_menu{
	display:none;
}

.fab-wrapper {
      bottom: 15px!important;
}
@media only screen and (max-width: 48em) {
/*css footer_2*/
	.footer_menu{
		display:flex;
	}
.hide_menu{
	display:none;
}
/*css footer_2*/
/*css footer menu*/
.active_menu>.col-inner{
	max-height:75vh;
	overflow:auto;
}
.close_menu{
	position: absolute;
    right: 10px;
    top: 0px;
}
.close_menu img{
	width:20px;
}
.sub_menu>*{
    position: fixed;
    top: 100vh;
    max-height: 85vh;
    padding-top: 40px;
    width: 95%;
    left: 50%;
	animation: slide-down 0.6s 1;
    animation-fill-mode: forwards;
	background: #fff;
	max-width: 95%;
    -ms-flex-preferred-size: 95%;
    flex-basis: 95%;
}
.sub_menu .active_menu{
    z-index: 1000;
    top: 10vh;
	animation: slide-up 0.6s 1;
    animation-fill-mode: forwards;
    transform: translate(-50%, 0);
}
@keyframes slide-up{
  0%{
    opacity:0;
	top: 100vh;
    transform: translate(-50%, 0);
  }
  100%{
    opacity:1; 
	top: 10vh;
    transform: translate(-50%, 0);
  }
}
@keyframes slide-down{
  0%{
    opacity:1; 
	top: 10vh;
    transform: translate(-50%, 0);
  }100%{
    opacity:0;
	top: 100vh;
    transform: translate(-50%, 0);
  }
}
.footer_menu {
		padding:0!important;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		flex-wrap: nowrap;
		right: unset;
		width: 100%;
		background: #fff;
		display: flex;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}
	.contact_custom>*{
		margin-bottom:0!important;
		width:calc(100%/4);
	}
	.contact_custom>* *{
		text-align:center;
		margin:auto;
	}
	.contact_custom .icon-box-img{
		margin-bottom:0!important;
	}
	.contact_custom .icon-box-text{
		margin-bottom:8px
	}
	.contact_custom h5{
		font-size:12px;
		color:#00262b;
	}
	.contact_custom .img:before{
		display:none
	}
	.contact_custom .img-inner {
		border-radius: 0%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.absolute-footer{
		padding-bottom:55px
	}
	.contact_custom img{
		padding: 10px 15px 5px;
	}
	.contact_custom img {
		width: 90%;
	}
	.filwhite img{
		filter: invert(100%);
	}
	.danhmuc-custom .icon-box-text{
		display: flex;
    	align-items: center;
		
	}
	.danhmuc-custom{
		background:#fff;

	}
	.danhmuc-custom .col{
		padding-bottom:0px;
	}
	.danhmuc-custom .col-inner{
		border: 1px solid #26a65b;
	}
/*css footer menu*/
/*************** ADD MOBILE ONLY CSS HERE  ***************/

/*Css chỉnh màu cho tiêu đề popup*/
.devvn-popup-title {
    background: #000 !important;
}
 
/*Css chỉnh màu cho button đặt mua ngay*/
.popup-customer-info-group .devvn-order-btn{
    background: #8c0101 !important;
}

a.devvn_buy_now.devvn_buy_now_ajax {
    display: inline-block;
    background: #fff;
    color: #8c0101;
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 3px;
    font-weight: 700;
}


<style>
	
/* Style The Dropdown Button */
.dropbtn {
  //background-color: #4CAF50;
  color: white;
 // padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  //position: sticky;
  display: inline-block;
	width:100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  //position: absolute;
  background-color: #f9f9f9;
  width:100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
}
.show_desc:before{
	content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -26px;
    right: 85px;
    border-width: 15px;
    border-color: transparent transparent #f9e2e7 transparent;
    border-style: solid;
}
.show_desc{
	position:relative;
	background-color:  #f9e2e7;
    padding: 10px;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
    width: 100%;
    margin-bottom: 30px;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
 // padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover*/
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #f9e2e7;

	width:100%;
}

.tiet_kiem
	{
		font-size:small;
		
	}
	
	.button {
    color: #000 !important; /* Đặt màu chữ thành đen */
    font-size: 14px !important; /* Đảm bảo kích thước chữ đủ lớn */
    visibility: visible !important; /* Buộc hiển thị */
}
	
	
	
	
</style>