/*
Theme Name: Cosmetics
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4.7
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*
  Cấu trúc file (nguồn duy nhất cho form + footer + Woo globals):
  - :root, footer .absolute-footer
  - Contact + newsletter CF7 (.contact-form, .form-email, .footer1)
  - FAQ tabs (.faq-container) — panel 3/4 trống
  - Marketing blocks → Additional CSS.css
  - Header/shop/archive → Custom CSS - All screens.css
*/

:root {
	--fp-accent: #f48021;
	--fp-accent-light: #ff9a3d;
	--fp-accent-deep: #e06a10;
	--fp-accent-glow: 244, 128, 33;
}

#yith-wcwl-icon-heart, .widget_shopping_cart .wcpa_cart_meta img{
	display: none;
}
ul.product_list_widget li{
	min-height: unset !important;
}
.sales-booster-safe-checkout span.subtitle{
	font-size: 14px;
}
.sales-booster-safe-checkout fieldset{
	margin-bottom: 0 !important;
}
.absolute-footer{
	position: relative;
	padding: 0px 15px !important;
	color: rgb(0, 0, 0);
	font-size: 14px;
}
/* .footer-primary.pull-left{
    float: left;
    position: absolute;
    top: 30%;
} */
 .footer-primary.pull-left {
	float: left;
	position: static;
	top: auto;
	left: auto;
	right: auto;
}
.footer-secondary.pull-right {
	float: right;
	position: static;
}
.absolute-footer .container::after {
	content: "";
	display: table;
	clear: both;
}
@media screen and (min-width: 1025px) {
	.absolute-footer .container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px 24px;
	}

	.absolute-footer .container::after {
		display: none;
	}

	.footer-primary.pull-left {
		float: none !important;
		position: static;
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		text-align: left !important;
	}

	.footer-secondary.pull-right {
		float: none !important;
		position: static;
		order: 2;
		flex: 0 0 auto;
		margin: 0;
		text-align: right !important;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* Tablet + mobile: xếp dọc, căn giữa */
@media screen and (max-width: 1024px) {
	.absolute-footer .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.absolute-footer .container::after {
		display: none;
	}

	.footer-primary.pull-left,
	.footer-secondary.pull-right {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
		clear: both !important;
	}

	.footer-primary.pull-left {
		margin-top: 0;
	}

	/* Gom nội dung cột phải (text + icon) theo chiều dọc, tránh inline chồng chữ */
	.footer-secondary.pull-right {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.absolute-footer .copyright-footer {
		display: block;
		width: 100%;
	}
}
.woocommerce-Price-currencySymbol{
	font-size: 1em !important;
	color: var(--primary-color) !important;
}
.woocommerce-Price-amount{
	color: #ff5b22 !important;
}
.qua-tang-box{
	display:none !important;
}
.estimated-delivery-date {
    font-size: 14px;
    color: #333;
    padding: 10px 0;
    margin-bottom: 20px !important;
}
.sales-booster-safe-checkout{
    background-color: #F5F5F6;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.sales-booster-safe-checkout fieldset img {
    display: inline-block;
    max-width: 50px;
    border: 1px solid var(--et_border-color);
    border-radius: 4px;
    margin: 0 calc(var(--image-spacing, 4px) / 2) var(--image-spacing, 4px);
}
.wishlist-popup.dark{
	display:none;
}
/* Testimonial slider */
.flickity-viewport {
	overflow: hidden;
}

.testimonial-slider-wrapper {
	padding: 0 15px;
}

.testimonial-slide {
	padding: 20px;
	width: 33.33%;
	flex: 0 0 33.33%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin: 0 10px;
}

.testimonial-rating {
    color: #FFA800;
    margin: 10px 0;
}

.testimonial-author {
    font-weight: 600;
    margin-top: 15px;
    color: var(--primary-color);
}


.comment-form-phone{
    display:none;
}
button#devvn_cmt_submit{
    height: 40px !important;
}
.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single{
    background-color: #f48021 !important;
}
.irs--round .irs-handle{
    border: 4px solid #f48021 !important;
}
.html_topbar_left{
    width: 100%;
}
.irs--round .irs-bar{
    background-color: #f48021 !important;
}
label.woof_checkbox_label, legend.woof_checkbox_label  {
    font-weight: 500 !important;
}
.woof_products_top_panel{
    z-index: 0 !important;
}
.product-tabs-wrapper{
	display: flex;
    flex-direction: column-reverse;
}
.woocommerce-product-gallery__image img, .option-slide img{
	height: 600px;
	object-fit: cover;
}
.product-video-container{
	height: 600px;
}
.col.vertical-thumbnails {
    
}
.option-slide, .tab-content#tab-video{
	margin-bottom: 0;
    padding: 0 9.8px 19.6px !important;
}
.woocommerce-Reviews .woocommerce-product-rating{
	align-items: center !important;
	gap: 5px;
}
.yith-wfbt-submit-block .yith-wfbt-submit-button{
	border-radius: 5px;
}
figure.image{
    text-align: center;
}
.sticky-add-to-cart--active .single_add_to_cart_button:before{
		content: "";
    width: 40px;
    height: 40px;
    top: 0px;
    position: inherit;
}
.sticky-add-to-cart--active .single_add_to_cart_button {
    hanging-punctuation: 55px;
    background: #000 !important;
    border: 1px solid black !important;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 0;
    padding: 5px 50px;
    border-radius: 45px;
    display: flex;
    align-items: center;
}
.header-cart-icon:after{
	    top: -5px !important;
}
/* =============================================================================
   FORMS — Contact page (CF7) + newsletter (footer / fp-newsletter-banner)
   Nguồn duy nhất: style.css (không đặt trong Additional CSS)
   ============================================================================= */

/* --- Contact page layout --- */
.section-contact-header {
	background: linear-gradient(180deg, #faf5ee 0%, #ffffff 100%);
	padding: 60px 0 40px;
	border-bottom: 1px solid #eee;
}

#contact-form {
	scroll-margin-top: 150px;
}

.contact-form-box {
	background: #fff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-form-box .form-trust {
	font-size: 13px;
	color: #777;
	margin-top: 15px;
	line-height: 1.6;
	text-align: center;
}

.section-contact-header .icon-box {
	cursor: pointer;
	transition: all 0.2s ease;
}

.section-contact-header .icon-box:hover {
	transform: translateY(-3px);
}

/* --- Contact page CF7 (scoped — không áp grid lên newsletter) --- */
.contact-form .wpcf7-form,
.contact-form-box .wpcf7-form {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.contact-form .wpcf7-form p,
.contact-form-box .wpcf7-form p {
	margin: 0;
}

.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form input[type="number"],
.contact-form .wpcf7-form input[type="date"],
.contact-form .wpcf7-form textarea,
.contact-form .wpcf7-form select,
.contact-form-box .wpcf7-form input[type="text"],
.contact-form-box .wpcf7-form input[type="email"],
.contact-form-box .wpcf7-form input[type="tel"],
.contact-form-box .wpcf7-form input[type="number"],
.contact-form-box .wpcf7-form input[type="date"],
.contact-form-box .wpcf7-form textarea,
.contact-form-box .wpcf7-form select {
	width: 100%;
	padding: 15px 20px;
	border: none;
	border-radius: 15px;
	background-color: #f8f8f8;
	font-size: 16px;
	color: #333;
	box-sizing: border-box;
}

.contact-form .wpcf7-form label,
.contact-form-box .wpcf7-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: #4b4b4b;
}

.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form textarea:focus,
.contact-form-box .wpcf7-form input:focus,
.contact-form-box .wpcf7-form textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(var(--fp-accent-glow), 0.3);
	background: #fff;
}

.contact-form .wpcf7-form textarea,
.contact-form-box .wpcf7-form textarea {
	min-height: 160px;
}

.contact-form .full-width-field,
.contact-form-box .full-width-field {
	grid-column: 1 / -1;
}

.contact-form .submit-container,
.contact-form-box .submit-container {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 10px;
}

.contact-form .wpcf7-form .wpcf7-response-output,
.contact-form-box .wpcf7-form .wpcf7-response-output,
.contact-form-box .wpcf7 > .wpcf7-response-output,
.contact-form .wpcf7 > .wpcf7-response-output {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
	margin: 1rem auto 0 !important;
	text-align: center;
	justify-self: center;
	box-sizing: border-box;
}

.contact-form .wpcf7-submit,
.contact-form button[type="submit"],
.contact-form input[type="submit"],
.contact-form-box .wpcf7-submit,
.contact-form-box button[type="submit"],
.contact-form-box input[type="submit"] {
	width: auto;
	min-width: 180px;
	text-transform: none !important;
	background: linear-gradient(135deg, var(--fp-accent-light), var(--fp-accent));
	border: none;
	border-radius: 10px;
	padding: 0 28px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(var(--fp-accent-glow), 0.22);
	transition: all 0.25s ease;
}

.contact-form .wpcf7-submit:hover,
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.contact-form-box .wpcf7-submit:hover,
.contact-form-box button[type="submit"]:hover,
.contact-form-box input[type="submit"]:hover {
	background: var(--fp-accent-light);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(var(--fp-accent-glow), 0.18);
}

.contact-form .wpcf7-not-valid-tip,
.contact-form-box .wpcf7-not-valid-tip {
	font-size: 12px;
	margin-top: 5px;
}

@media (max-width: 768px) {
	.contact-form .wpcf7-form,
	.contact-form-box .wpcf7-form {
		grid-template-columns: 1fr;
	}
}

/* --- Newsletter (footer1 / form-email / fp-newsletter-banner)
   CF7 thường gộp email + submit trong MỘT <p> + <br> → dùng flex trên .form-email > p, không grid form
--- */
.footer1 .large-12 .col-inner {
	background: linear-gradient(90deg, #ffd400 0%, #f48021 50.52%, rgb(199, 49, 48) 99.61%);
	border: none;
	color: #fff !important;
	padding: clamp(18px, 2.5vw, 22px) clamp(16px, 5vw, 80px);
	border-radius: 14px;
}

.footer1 .large-12 .col-inner .col-inner {
	background: none;
	padding: 0;
	border-radius: 0;
}

.footer1 .large-12 .col p,
.footer1 .large-12 .col-inner > .row > .col p {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.96) !important;
}

.footer1 h2,
.footer1 h3 {
	font-size: clamp(1.05rem, 2.1vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	margin-bottom: 4px;
	color: #fff !important;
}

.footer1 {
	padding-bottom: 0 !important;
}

.footer1 .large-12 {
	padding-bottom: 17px;
}

.footer1 .large-12 .col {
	padding-bottom: 0;
}

/* Form wrapper full width cột phải */
.footer1 .wpcf7,
.footer1 .wpcf7-form,
.form-email {
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
}

.footer1 .wpcf7-form:has(.form-email),
.fp-newsletter-banner .wpcf7-form:has(.form-email) {
	display: block !important;
	max-width: none !important;
}

/* Một dòng: [ email ........ ] [ SUBSCRIBE ] */
.form-email > p {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	width: 100% !important;
}

.form-email > p br {
	display: none !important;
}

.form-email .wpcf7-form-control-wrap {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	display: block !important;
	margin: 0 !important;
}

.form-email input[type="email"],
.form-email input[type="text"] {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: 46px !important;
	margin: 0 !important;
	box-sizing: border-box;
	border-radius: 999px !important;
	background: #fff !important;
	color: #111827 !important;
	border: 1px solid rgba(17, 24, 39, 0.1) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 0 18px !important;
	font-size: 15px !important;
}

.form-email input::placeholder {
	color: #6b7280 !important;
	font-size: 14px;
	opacity: 1;
}

.form-email input[type="submit"],
.form-email .wpcf7-submit {
	flex: 0 0 auto !important;
	position: static !important;
	right: auto !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	float: none !important;
	display: inline-block !important;
	height: 46px !important;
	width: auto !important;
	min-width: 120px;
	margin: 0 !important;
	padding: 0 20px !important;
	border: none !important;
	border-radius: 999px !important;
	background: #111827 !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	vertical-align: middle;
}

.form-email input[type="submit"]:hover,
.form-email .wpcf7-submit:hover {
	background: #0b1220 !important;
}

.form-email input[type="email"]:focus,
.form-email input[type="text"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
	border-color: rgba(255, 255, 255, 0.85) !important;
	background: #fff !important;
}

.wpcf7-form:has(.form-email) > .wpcf7-response-output {
	margin: 10px 0 0 !important;
	padding: 8px 12px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.form-email .wpcf7-spinner,
.footer1 .wpcf7-spinner {
	display: none !important;
}

/* fp-newsletter-banner — cùng cấu trúc .form-email */
.fp-newsletter-banner .form-email > p {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	width: 100% !important;
}

.fp-newsletter-banner .form-email > p br {
	display: none !important;
}

.fp-newsletter-banner .form-email .wpcf7-form-control-wrap {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.fp-newsletter-banner .form-email input[type="submit"] {
	position: static !important;
	flex: 0 0 auto !important;
}

/* Grid chỉ khi CF7 tách 2 <p> riêng (email | submit) */
.fp-newsletter-banner .wpcf7-form:not(:has(.form-email)),
.footer1 .wpcf7-form:not(:has(.form-email)) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 12px;
	max-width: min(100%, 520px);
}

.fp-newsletter-banner .wpcf7-form:not(:has(.form-email)) > p,
.footer1 .wpcf7-form:not(:has(.form-email)) > p {
	margin: 0 !important;
}

@media (max-width: 768px) {
	.form-email > p,
	.fp-newsletter-banner .form-email > p {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.form-email input[type="submit"],
	.form-email .wpcf7-submit,
	.fp-newsletter-banner .form-email input[type="submit"] {
		width: 100% !important;
		min-width: 0;
	}
}

/* FAQ page — tab Flatsome: panel 3/4 nằm trong panel 2 (HTML lỗi) */
.faq-container .tab-panels > .panel:not(.active) .panel.active {
	display: block !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	padding-top: 1em;
}

.faq-container .tab-panels > .panel:not(.active) .panel:not(.active) {
	display: none !important;
	height: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.social-icons a[data-label]:after {
    display: none !important;
}
.social-icons a[data-label]:hover:after {
    display: none !important;
}

.faq-container {
	max-width: 900px !important;
	margin: 0 auto !important;
}

.star-rating--inline {
    height: 16px !important;
}