/*
Theme Name: quannguyenphat.com
Theme URI: https://www.quannguyenphat.com/
Description: Đây là giao diện OceanWP child, được tùy biến và bổ sung một số chức năng để phù hợp với yêu cầu khách hàng. Những chức năng nhỏ có sẵn trong giao diện: + Vô hiệu hóa Gutenberg - trình soạn thảo *tầm bậy * của wordpress + Seting page full width mặc định + Thêm meta box của oceanwp cho CTP + Vô hiệu hóa chức năng upload video +  chỉnh tương thích oceanwp với các tool tạo template cho archive CTP, Single CTP + Custom local font(nếu có). Mọi hành vi nhân bản, copy giao diện này đều là ... sai và tất nhiên cũng không được pháp luật nào bảo vệ cả.
Author: Quan Nguyên Phát
Author URI: https://www.quannguyenphat.com
Template: oceanwp
Version: 1.1
*/

/* Parent stylesheet should be loaded from functions.php not using @import */
li.clr
{
display: block;
margin-bottom: 30px;}

.grecaptcha-badge {display: none !important;}

.gia-km-xd{display: grid; grid-template-columns: 50px auto; margin-top: 10px;}

.giam-gia{display: grid; justify-items: center;align-items: center; background:#ea1010;color:white;
  font-size:16px; font-weight:600;}
  
.hop-gia{background:#ececec;padding: 5px 12px;}

.gia-goc, .gia-km{font-size:15px;}

.gia-goc span, .gia-km span{font-size: 18px;color:#ea1010;}

.gia-km span{font-size:20px !important;font-weight: 600 !important;}

 .woocommerce ul.products li.product .price {    text-align: left !important;}
 .woocommerce del {opacity:1 !important;color:#ea1010 !important;}
 .woocommerce span.onsale {display:none;}
  .woocommerce ul.products li.product .price del .amount {    color:     #ea1010;    margin-left: 10px;}
  
  .sale-perc{position: absolute;bottom: 18px;right: 15px;background:#ec0f0f;
color:white;font-size: 13px;padding: 0px 5px;}
 
 .woocommerce ul.products li.product li.title a {    font-weight: 600;margin-top: 10px;}
 .woocommerce ul.products li.product .woo-entry-inner li {    text-align: left;}
 
 .custom-menu-widget .oceanwp-custom-menu > ul > li > a {
    text-transform: uppercase;
    font-weight: 600;
}
 .formxd  .wpcf7-form-control  {border-radius:100px;}
 .formxd .wpcf7 .wpcf7-form-control:not(.wpcf7-submit){min-width:250px;}
 
 .woocommerce-product-details__short-description li::before {
    font-family: 'simple-line-icons';
    content: "\e028";
    margin-right: 8px;
    font-size: 110%;
}
.woocommerce-product-details__short-description li {
    list-style: none;
    border-bottom: 1px solid 
#F1F5F8;
padding-bottom: 3px;}
.footxd{color:white;padding:2px;font-size:12px;text-align:center;background: #CC914B; }

.woo-dropdown-cat .widget_product_categories li a {     padding: 2px !important;}

.elementxd:hover .titxd {  background: linear-gradient(200deg, rgba(247,190,22,0.83) 0%, rgba(247,156,29,0.46) 100%);   }
 .woocommerce ul.products li.product li.category {display:none;}
 

.titxd{background:  rgba(255,255,255,0);  transition: background 1s ease-in-out;  }

.elementxd .elementor-widget:not(:last-child) {margin-bottom:2px!important;}
.widget-area .sidebar-box {    border-radius: 6px;}
.widget-area .sidebar-box {
    border-radius: 3px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
}
 .widget-title {    padding: 10px;  background: #f3f3f3;  
 margin: 0 -10px 15px;  color: #404040 !important;  text-align: center;}

.btnx span {background: #002c5f;padding: 4px;  border-radius: 2px;color:#ffffff;}
.xdblog .jet-posts__inner-box { border-bottom: 4px solid #D28C0E;    border-radius: 0px 0px 4px 4px;
    background: white;    margin-bottom: 20px;    overflow: hidden;}
.elementxd .elementor-widget:not(:last-child) {margin-bottom:2px!important;}



/* form 7 style */
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  text-indent: 30px;
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa,.wpcf7 p .fa{
  position: absolute;
  color: #cdcac3;
  z-index: 100;
  font-size: 18px;
  top: 22%;
  left: 14px;
}
.but-cen{display: flex!important;justify-content: center;align-items: center;margin: 0 auto!important;}

  
/* call XD */
			.sodt{position: fixed;bottom: 35px;left: 50px;padding: 5px 20px;background: #E3342F;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.sozalo{position: fixed;bottom: 91px;left: 51px;padding: 5px 20px;background: #018fe5;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.somess{position: fixed;bottom: 144px;left: 49px;padding: 5px 20px;background: #0076e4;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.somess a {
				text-decoration: none;
				color: #ffffff;
			}
			.sozalo a {
				text-decoration: none;
				color: #ffffff;
			}
			.callxd{ position: fixed; bottom: 145px; right: 10px;z-index: 999;}
			.zaloxd{ position: fixed; bottom: 340px; right: 10px;z-index: 999;}
			/* .zaloxd img{box-shadow: 0 2px 5px 0 rgba(0,0,0,0.50);border-radius: 7px;} */
			.mess{ position: fixed; bottom: 400px; right: 10px;z-index: 999;}

			.pulse i{position: absolute; top: 10px; left: 14px; font-size: 30px;  color: white;}
			.pulse {

				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #E3342F;
				cursor: pointer;
				box-shadow: 0 0 0 rgba(227,52,47,0.63);
				animation: pulse 2s infinite;
			}
			.pulse:hover {
				animation: none;
			}

			@-webkit-keyframes pulse {
				0% {
					-webkit-box-shadow: 0 0 0 0 rgba(227,52,47,0.63);
				}
				70% {
					-webkit-box-shadow: 0 0 0 20px rgba(227,52,47,0.63);
				}
				100% {
					-webkit-box-shadow: 0 0 0 0 rgba(227,52,47,0.63);
				}
			}
			@keyframes pulse {
				0% {
					-moz-box-shadow: 0 0 0 0 rgba(227,52,47,0.63);
					box-shadow: 0 0 0 0rgba(227,52,47,0.63);
				}
				70% {

					box-shadow: 0 0 0 10px rgba(227,52,47,0.4);
				}
				100% {

					box-shadow: 0 0 0 0 rgba(227,52,47,0.4);
				}
			}
			@media only screen and (max-width: 500px) {
				.somess, .sodt, .sozalo{display:none;}
			}





			/* call XD */
			.sodt2{position: fixed;bottom: 85px;left: 50px;padding: 5px 20px;background: #0ea120;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.sozalo2{position: fixed;bottom: 280px;left: 51px;padding: 5px 20px;background: #018fe5;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.somess2{position: fixed;bottom: 194px;left: 49px;padding: 5px 20px;background: #0076e4;color: white;
				border-radius: 0px 40px 40px 0px;font-size: 120%;  font-weight: bold;z-index: -1;}
			.somess2 a {
				text-decoration: none;
				color: #ffffff;
			}
			.sozalo2 a {
				text-decoration: none;
				color: #ffffff;
			}
			.callxd2{ position: fixed; bottom: 220px; right: 10px;z-index: 999;}
			.zaloxd2{ position: fixed; bottom: 285px; right: 10px;z-index: 999;}
			/* .zaloxd2 img{box-shadow: 0 2px 5px 0 rgba(0,0,0,0.50);border-radius: 7px;} */
			.mess2{ position: fixed; bottom: 315px; right: 10px;z-index: 999;}

			.pulse2 i{position: absolute; top: 10px; left: 14px; font-size: 30px;  color: white;}
			.pulse2 {

				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #0ea120;
				cursor: pointer;
				box-shadow: 0 0 0 rgba(39,183,19,0.63);
				animation: pulse2 2s infinite;
			}
			.pulse2:hover {
				animation: none;
			}

			@-webkit-keyframes pulse2 {
				0% {
					-webkit-box-shadow: 0 0 0 0 rgba(39,183,19,0.63);
				}
				70% {
					-webkit-box-shadow: 0 0 0 20px rgba(39,183,19,0.63);
				}
				100% {
					-webkit-box-shadow: 0 0 0 0 rgba(39,183,19,0.63);
				}
			}
			@keyframes pulse2 {
				0% {
					-moz-box-shadow: 0 0 0 0 rgba(39,183,19,0.4);
					box-shadow: 0 0 0 0rgba(39,183,19,0.4);
				}
				70% {

					box-shadow: 0 0 0 10px rgba(39,183,19,0.4);
				}
				100% {

					box-shadow: 0 0 0 0 rgba(39,183,19,0.4);
				}
			}
			@media only screen and (max-width: 500px) {
				.somess2, .sodt2, .sozalo2{display:none;}
			}



/** Form **/
.cf-container {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}
.cf-col-1, .cf-col-2, .cf-col-3, .cf-col-4, .cf-col-5, .cf-col-6, .cf-col-7, .cf-col-8, .cf-col-9, .cf-col-10, .cf-col-11, .cf-col-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 5px;
	padding-left: 5px;
}
@media ( min-width: 576px ) {
	.cf-col-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.cf-push-1 { margin-left: 8.333333%; }
	.cf-col-2 {
		-ms-flex: 0 0 16.66667%;
		flex: 0 0 16.66667%;
		max-width: 16.66667%;
	}
	.cf-push-2 { margin-left: 16.66667%; }
	.cf-col-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.cf-push-3 { margin-left: 25%; }
	.cf-col-4 {
		-ms-flex: 0 0 33.33333%;
		flex: 0 0 33.33333%;
		max-width: 33.33333%;
	}
	.cf-push-4 { margin-left: 33.33333%; }
	.cf-col-5 {
		-ms-flex: 0 0 41.66667%;
		flex: 0 0 41.66667%;
		max-width: 41.66667%;
	}
	.cf-push-5 { margin-left: 41.66667%; }
	.cf-col-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.cf-push-6 { margin-left: 50%; }
	.cf-col-7 {
		-ms-flex: 0 0 58.33333%;
		flex: 0 0 58.33333%;
		max-width: 58.33333%;
	}
	.cf-push-7 { margin-left: 58.33333%; }
	.cf-col-8 {
		-ms-flex: 0 0 66.66667%;
		flex: 0 0 66.66667%;
		max-width: 66.66667%;
	}
	.cf-push-8 { margin-left: 66.66667%; }
	.cf-col-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.cf-push-9 { margin-left: 75%; }
	.cf-col-10 {
		-ms-flex: 0 0 83.33333%;
		flex: 0 0 83.33333%;
		max-width: 83.33333%;
	}
	.cf-push-10 { margin-left: 83.33333%; }
	.cf-col-11 {
		-ms-flex: 0 0 91.66667%;
		flex: 0 0 91.66667%;
		max-width: 91.66667%;
	}
	.cf-push-11 { margin-left: 91.66667%; }
	.cf-col-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}



@media only screen and (max-width: 500px) {
    .xdbot{display:none;}
.xdtable  td { padding:1px !important; font-size:60%;}
aside{display:none;}
}
@media only screen and (min-width: 500px) {
    #site-logo{display:none;}
  
}

.contact-text{
	padding: 0px !important;
}
.contact-phone{
	padding: 0px !important;
}
.contact-email{
	padding: 0px 0px 0px 5px !important;
}
.contact-menu{
	padding: 0px 0px 0px 30px !important;
}
.contact-pen{
	padding: 0px 0px 0px 0px !important;
}
.contact-textlong{
	padding: 0px 0px 0px 0px !important;
}
form textarea {
    height: 100px !important;
}