/*
Theme Name: Máy lọc khí
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.product-section-title-related{display:none !important;}
/************************CSS san pham vua xem***********************/
/* CSS cho sản phẩm vừa xem */
.viewed-products {
    margin-top: 20px;
    padding: 0 40px; /* Cách bên trái và bên phải 40px */
}

.viewed-products h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.viewed-products ul.products {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px; /* Thêm khoảng cách giữa các sản phẩm */
    justify-content: flex-start; /* Đẩy các sản phẩm về bên trái */
}

.viewed-products ul.products li {
    flex: 1 1 calc(25% - 20px); /* Mỗi sản phẩm chiếm khoảng 25% chiều rộng, trừ đi khoảng cách */
    max-width: calc(25% - 20px); /* Đảm bảo sản phẩm không vượt quá 25% */
    box-sizing: border-box;
    text-align: center;
    margin: 0; /* Xóa bỏ margin */
    margin-bottom: 10px;
}

.viewed-products ul.products li a {
    text-decoration: none;
    color: inherit;
}

.viewed-products ul.products li img {
    max-width: 100%;
    height: auto;
}

.viewed-products ul.products li h3 {
    font-size: 16px;
    margin: 10px 0 0 0;
    color: #333;
}

.viewed-products ul.products li .price {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #000;
}

@media (max-width: 768px) {
    .viewed-products ul.products li {
        flex: 1 1 calc(50% - 10px); /* Trên màn hình nhỏ, mỗi sản phẩm chiếm khoảng 50% chiều rộng */
        max-width: calc(50% - 10px); /* Đảm bảo sản phẩm không vượt quá 50% */
    }
}


/********************CSS san pham dong gia************************/
.row-spdonggia{
	background:#c6d9d659;
	padding:10px;
	border-radius:10px;
	margin-bottom: 40px;
	margin-top: 20px;
	
}
.title-sp-cunggia{
	font-size:20px;
	color:#083061;
	font-weight:bold;
	text-align:center;
	margin-bottom:15px;
}
.row-spdonggia ..product-small{
	border:none !important;
	
}
/***********An table fix trong san pham *************/
@media (max-width: 600px) {
  .after-archive>.right {
 	display:none;
  }
 .after-archive .left {
  
  	 flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}



/******css review*******/
div#reviews.woocommerce-Reviews{
  max-width: 90% !important;
            width: 90% !important;
margin:0px !important;

}
/******Css ten san pham lien quan*****/
.product-footer .related .product-section-title {
   
  
    text-transform: uppercase !important;
    font-size: 24px !important;
   
}
/****** Ẩn nút tính phần trăm trên sản phẩm  ****/
.badge-container {
 	display:none;
}
/******************* Fix Icon Khuyen Mai*******************/
.noidung_khuyenmai {
  border: 1px solid #fac100;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  padding: 25px 10px 10px;
  margin-top: 30px;
  margin-bottom:20px;
}
.noidung_khuyenmai_title {
  font-weight: 600;
  font-size: 16px;
  background: #fac100;
  padding: 5px 16px;
  border-radius: 20px;
  display: inline-block;
  position: absolute;
  top: -16px;
  left: 10px;
}
.noidung_khuyenmai_title svg {
  width: 16px;
  height: 16px;
}
.noidung_khuyenmai_title {
 font-weight: 500 !important;
  font-size: 16px;
  color:red;
}
span.amount {
  white-space: nowrap;
  color: red;
  font-size: 18px;
}
.detail_product .info-section .commit .title .site-name {
  color: red;
}
/* css icon trang home */
.moi span{
    padding-left: 20px;
}
.moi:before{
    content: '';
    height: 65px;
    position: absolute;
    width: 65px;
    background-image: url(/wp-content/uploads/2024/08/icon-spmoi.png);
    background-size: cover;
    top: -18px;
    left: -10px;
}
.gg span{
    padding-left: 20px;
}
.gg:before{
    content: '';
    height: 35px;
    position: absolute;
    width: 35px;
    background-image: url(/wp-content/uploads/2024/08/icon-giam-gia.png);
    background-size: cover;
    top: -10px;
    left: -10px;
}
.km span{
    padding-left: 15px;
}
.km:before{
    content: '';
    height: 35px;
    position: absolute;
    width: 35px;
    background-image: url(/wp-content/uploads/2024/08/khuyen-mai-icon.png);
    background-size: cover;
    top: -10px;
    left: -10px;
}
.bcn span{
    padding-left:20px;
}
.bcn:before{
    content: '';
    height: 35px;
    position: absolute;
    width: 35px;
    background-image: url(/wp-content/uploads/2024/08/icon-ban-chay-ok.png);
    background-size: cover;
    top: -10px;
    left: -10px;
}
.label-custom{
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    padding: 3px 8px;
    height: 26px;
    background-color: #EA6423;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px -5px #333;
    z-index:2;
}
.label-custom.km{
    background-color:red;
}
.label-custom.bcn{
    background-color: #7b1c68;
}
/***************************Custom lai gia SALE hien thi dep mat***********************************/
.nbw_single_price {
    margin-bottom: 10px;
}
.product-info .price ins bdi, .product-info .price bdi, .nbw_single_price bdi {
    font-size: 30px;
    color: #E5322D;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333;
}
.nbw_single_price .gia-chinh-hang, .nbw_single_price .gia-chinh-hang bdi {
    font-size: 14px;
    color: #565656;
    text-shadow: none;
}
del span.amount {
    opacity: 1;
}
.gia-chinh-hang .label-km {
    background: #da0000;
    padding: 3px 7px;
    color: white;
    border-radius: 3px;
}
.nbw_single_price .tiet-kiem-box {
    margin-top: 5px;
}
/***************************Custom form nhan tu van trong san pham***********************/
.custom-form-container {
  width: 380px; /* Limit the form's width */
  margin: 0 auto; /* Center the form horizontally */
  background-color: #f3f4f6; /* Adjust the background color if needed */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  border-radius: 5px;
  border: 1px solid #ccc; /* Add a border around the form */
}

.custom-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-description {
  text-align: center;
  margin-bottom: 10px; /* Space between description and input fields */
  font-size: 13px;
}

.form-fields {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.custom-form input[type="text"],
.custom-form input[type="tel"] {
 width:115px;
  padding: 15px;
 margin-bottom: 0;
    font-size: 13px;
    height: 33px;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: unset;
    margin-right: 10px;
    border-radius: 6px;
}
.custom-form input[type="text"]{
	margin-right:10px !important;
}
.custom-form input[type="submit"] {
background: #204c73;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    border: unset;
    height: 33px;
    margin-right: 0;
    border-radius: 4px;
    letter-spacing: 0;
    width: 100px;
}

.custom-form input[type="submit"]:hover {
  background-color: #002e56; /* Adjust hover background color if needed */
}
@media (max-width: 600px) {
  .custom-form-container {
    width: 100%; /* Full width on mobile */
    padding: 10px;
  }

  .form-fields {
    flex-direction: row; /* Keep fields in a row on mobile */
    flex-wrap: wrap;
  }
	.custom-form input[type="text"], .custom-form input[type="tel"] {
    width: 150px;
    padding: 15px;
    margin-bottom: 0;
    font-size: 13px;
    height: 33px;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: unset;
    margin-right: 10px;
    border-radius: 6px;
}

  .custom-form input[type="submit"] {
    width: 100%;
    margin-top: 10px; /* Space above submit button */
  }
}
//form tu van 2
.custom-form-container2 {
    width: 100%; /* Full width on mobile */
    padding: 10px;
  }

  .form-fields2 {
    flex-direction: row; /* Keep fields in a row on mobile */
    flex-wrap: wrap;
  }
  .custom-form2 > input[type="submit"] {
    width: 100% !important;
    
  }
  .custom-form-container2 {
  
  margin: 0 auto; /* Center the form horizontally */
  background-color: #f3f4f6; /* Adjust the background color if needed */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  border-radius: 5px;
  border: 1px solid #ccc; /* Add a border around the form */
}

.custom-form2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-description2 {
  text-align: center;
  margin-bottom: 10px; /* Space between description and input fields */
  font-size: 13px;
}

.form-fields2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.custom-form2 input[type="text"],
.custom-form2 input[type="tel"] {
  padding: 15px;
 margin-bottom: 10px;
    font-size: 12px;
    height: 33px;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: unset;
    margin-right: 20px;
    border-radius: 6px;
    
}
.custom-form2 input[type="text"]{
	margin-right:10px !important;
}
.custom-form2 input[type="submit"] {
background: #204c73;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    border: unset;
    height: 33px;
    margin-right: 0;
    border-radius: 4px;
    letter-spacing: 0;
    width:100% !important;
    margin-left:5px;
}
/*************Css cho 2 cot trong noi dung san pham****************/
 .after-archive {
 display: flex;
    flex-wrap: wrap;
    }
.after-archive .left{
flex: 0 0 75%; /* Chiếm 75% độ rộng */
    max-width: 75%;
}
.after-archive .right{
 flex: 0 0 25%; /* Chiếm 25% độ rộng */
    max-width: 25%; /* Đảm bảo không vượt quá 25% */
}

//CSS khung san pham Fix trong noi dung san pham
     .product-card{
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
       
        }

        .product-header1 {
            display: flex;
            align-items: center;
        }

        .product-card img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            margin-right: 16px;
        }

        .product-info1 {
            flex: 1;
        }

        .product-info1 h2 {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        .product-info1 p {
            font-size: 14px;
            color: #666;
            margin: 8px 0;
        }

        .product-price1 {
            font-size: 20px;
            color: #E53935;
            font-weight: bold;
            margin-top:18px;
        }

        .product-old-price1 {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
        }

        .button-container1 {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
        }

        .button-container1 button {
            padding: 8px 16px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .buy-now1 {
            background-color: #E53935;
            color: #fff;
        }

        .add-to-cart1 {
            background-color: #ddd;
            color: #333;
        }
         .fixed {
            position: fixed;
            top: 50px; /* fixed 20px from the top */
            width: 300px;
        }
        
/*******************CSS menu footer 1 cham********************/
.menu-foter {
    width: 100%;
    padding: 10px;
}

.menu-foter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-foter ul li {
    margin-bottom: 10px;
}
.menu-foter ul li:hover {
    color:red;
}

.menu-foter ul li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.menu-foter ul li a:before {
    content: "•";
    color: #FFD700; /* Yellow color for the bullet point */
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

/**************************CSS tin tuc********************************/
/ ********************************** CSS 2 cot 2 bai dau - 1bai to o giua*****************************************************************/
.custom-category-posts2 {
    display: flex;
    justify-content: space-between;
 
}

.column-1b{
    width: 45%;
   float:left;
   margin-right: 30px;
}
.column-2b {
    width: 50%;
     float:left; 

}
.sub-posts {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.sub-post {
   width: 45%;
    float: left;
    margin: 5px;
}
.main-post-thumbnail img, .sub-post-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* Tỷ lệ 16:9 để tạo hình chữ nhật */
    object-fit: cover;
    border-radius: 8px;
}

.sub-post-title2{
	    font-size: 18px;
    margin-top: 5px;
    font-family: Helvetica Neue, Arial;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Hiển thị tối đa 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em; /* Điều chỉnh chiều cao dòng */
    max-height: 3.9em; /* line-height * 2 */
    
}
.main-post-title {
    font-size:19px;
    margin-top: 10px;
     font-family: Helvetica Neue, Arial;
}

.list-post-excerpt2{
	 font-size: 16px;
    margin-top: 5px;
    font-family: Helvetica Neue, Arial;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* Hiển thị tối đa 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em; /* Điều chỉnh chiều cao dòng */
    max-height: 5.2em; /* line-height * 2 */
}
/* CSS cho thiết bị di động */
@media (max-width: 768px) {
    .custom-category-posts2 {
        flex-direction: column;
    }

    .column-1b, .column-2b {
        width: 100%;
        float:left;
    }
	
.column-1b{
	margin-right: none;
}
}
/**************************** category list chon bai bat dau********************************************/
.category-posts {
	
    padding-right:2px;

}
ul.category-posts >li {

	list-style: none;
	border-bottom: 1px dashed #ccc;
	padding-bottom:6px;
}
ul.category-posts >li> a {
		font-size:14px;
		  font-family: Helvetica Neue, Arial;
		font-weight:bold;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

	.hotline-footer{display:none !important;
}


.footer-section > ul.menu>li, .widget>ul>li{
	color:#5d1717 !important;
}