/* Homematic Pre-order – đổi màu bằng cách ghi đè biến trong theme:
   .hpo-box-wrap{ --hpo-accent:#fcb800; --hpo-ink:#000; } */
.hpo-box-wrap{
	--hpo-accent:#fcb800;      /* màu chủ đạo mặc định của Martfury */
	--hpo-ink:#1f1f1f;
	--hpo-muted:#6b6b6b;
	--hpo-track:#ececec;
	margin:14px 0 18px;
}
.hpo-box-wrap[hidden]{display:none!important}
.hpo-box{
	border:1px solid #e6e6e6;
	border-top:3px solid var(--hpo-accent);
	padding:14px 16px 12px;
	color:var(--hpo-ink);
	font-size:14px;
	line-height:1.55;
	background:#fff;
}
.hpo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hpo-badge{
	display:inline-block;
	background:var(--hpo-accent);
	color:var(--hpo-ink);
	font-weight:700;
	font-size:13px;
	padding:3px 10px;
	border-radius:2px;
}
.hpo-batch{color:var(--hpo-muted);font-size:13px}
.hpo-box p{margin:0 0 8px}
.hpo-count strong{font-size:16px}
.hpo-bar{
	position:relative;
	height:12px;
	background:var(--hpo-track);
	border-radius:6px;
	overflow:hidden;
	margin:4px 0 12px;
}
.hpo-bar-fill{
	display:block;
	height:100%;
	width:var(--hpo-p,0%);
	min-width:12px;
	border-radius:6px;
	background-color:var(--hpo-accent);
	background-image:linear-gradient(135deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
	background-size:16px 16px;
	animation:hpo-grow 1.1s cubic-bezier(.22,.8,.3,1) both, hpo-stripes 1s linear infinite;
}
@keyframes hpo-grow{from{width:0}}
@keyframes hpo-stripes{to{background-position:16px 0}}
.hpo-eta,.hpo-history,.hpo-note{font-size:13px}
.hpo-process{font-size:12.5px;color:var(--hpo-muted);border-top:1px dashed #e2e2e2;padding-top:8px;margin-top:4px!important;margin-bottom:0!important}

/* Form/nút Đặt trước */
.hpo-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 20px}
.hpo-form .quantity{flex:0 0 auto}
/* Giá ngay trên ô số lượng (giống vị trí giá của sản phẩm biến thể) */
.hpo-form .hpo-price{flex:0 0 100%;margin:0 0 3px}
.hpo-form .hpo-price .price{display:inline-block;margin-bottom:0!important}

/* Ô số lượng của form đặt trước: dùng lại style của theme (theme chỉ áp cho form.cart) */
.woocommerce div.product form.hpo-form div.quantity .label{font-size:12px;display:block;line-height:1;margin-bottom:3px}
.woocommerce div.product form.hpo-form div.quantity .qty-box{border:1px solid rgba(0,0,0,.25);padding:0 20px;transition:.5s;position:relative}
.woocommerce div.product form.hpo-form div.quantity .qty-box:hover{border-color:#000}
.woocommerce div.product form.hpo-form div.quantity .decrease,
.woocommerce div.product form.hpo-form div.quantity .increase{font-size:24px;width:30px;cursor:pointer;color:#999;transition:.5s;display:inline-block;position:absolute;top:50%;left:10px;transform:translateY(-50%)}
.woocommerce div.product form.hpo-form div.quantity .decrease:hover,
.woocommerce div.product form.hpo-form div.quantity .increase:hover{color:#000}
.woocommerce div.product form.hpo-form div.quantity .increase{right:10px;left:auto;text-align:right}
.hpo-form .quantity{margin:0!important;float:none!important}
.hpo-btn.button{
	background:var(--hpo-accent,#fcb800);
	color:#000;
	font-weight:700;
	min-height:46px;
	padding:0 32px;
	border:0;
	cursor:pointer;
}
.hpo-btn.button:hover{filter:brightness(.95)}
.hpo-btn.button:focus-visible{outline:2px solid #000;outline-offset:2px}
.hpo-btn.loading{opacity:.6;pointer-events:none}
.hpo-hidden{display:none!important}

@media (prefers-reduced-motion:reduce){
	.hpo-bar-fill{animation:none}
}
@media (max-width:480px){
	.hpo-box{padding:12px}
	.hpo-btn.button{flex:1 1 auto}
}

/* ===== Martfury (homematic): khi chọn biến thể đặt trước ===== */
body.hpo-preorder-active div.product form.cart.hpo-preorder-active .single_add_to_cart_button,
body.hpo-preorder-active div.product form.cart.hpo-preorder-active .single_add_to_cart_button1,
body.hpo-preorder-active div.product form.cart.hpo-preorder-active .variation_add_to_cart_button,
body.hpo-preorder-active div.product form.cart.hpo-preorder-active .buy_now_button,
body.hpo-preorder-active div.product form.cart.hpo-preorder-active .custom-buy-now-trigger{
	display:none!important;
}
/* Dải nền trắng của thanh nút cố định trên mobile */
body.hpo-preorder-active.mobile-version div.product form.cart.hpo-preorder-active::before{
	display:none!important;
}
/* Nút Đặt trước cùng kích thước nút "Thêm vào giỏ" của theme */
.woocommerce div.product form.cart .hpo-var-btn.button,
.woocommerce div.product form.hpo-form .hpo-btn.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:52px;
	line-height:52px;
	min-width:200px;
	padding:0 24px;
	font-size:18px;
	font-weight:600;
	border-radius:3px;
	margin-top:1px;
	vertical-align:bottom;
	float:none!important; /* theme đặt float:left cho mọi .button trong form.cart, làm nút nhảy lên trước ô số lượng */
}
/* Khối thông tin nằm trong form biến thể, trên phần giá */
form.variations_form .hpo-box-wrap{margin:4px 0 14px;font-size:14px}
.mobile-version.woocommerce div.product form.cart .hpo-var-btn.button,
.mobile-version.woocommerce div.product form.hpo-form .hpo-btn.button{
	flex:1 1 auto;
	min-width:0;
	height:44px;
	line-height:44px;
	font-size:15px;
	padding:0 10px;
}

/* ===== Popup chọn biến thể trên mobile (#sheet-form-container – header-v2.php) =====
   Giữ nguyên toàn bộ nội dung, chỉ thu gọn khoảng cách/cỡ chữ để popup hiện đủ không cần cuộn */
#sheet-form-container .hpo-box-wrap{margin:4px 0 10px}
#sheet-form-container .hpo-box{padding:10px 12px 8px;font-size:13px;line-height:1.45}
#sheet-form-container .hpo-head{margin-bottom:6px}
#sheet-form-container .hpo-badge{font-size:12px;padding:2px 8px}
#sheet-form-container .hpo-batch{font-size:12px}
#sheet-form-container .hpo-box p{margin:0 0 5px}
#sheet-form-container .hpo-count strong{font-size:14px}
#sheet-form-container .hpo-bar{height:8px;margin:2px 0 7px}
#sheet-form-container .hpo-eta,
#sheet-form-container .hpo-history,
#sheet-form-container .hpo-note{font-size:12.5px}
#sheet-form-container .hpo-process{font-size:12px;line-height:1.4;padding-top:6px}
/* Nút Đặt trước nằm CÙNG HÀNG với ô số lượng (căn đáy) để không bị khuất ở màn hình thấp.
   Lưu ý: khi vào popup, form bị chuyển ra ngoài div.product nên rule flex của style.css
   (.mobile-version.woocommerce div.product .woocommerce-variation-add-to-cart) KHÔNG còn áp dụng
   -> phải tự khai báo display:flex ở đây. */
.mobile-version #sheet-form-container form.cart.hpo-preorder-active .woocommerce-variation-add-to-cart{
	display:flex!important;
	flex-wrap:nowrap!important;
	align-items:flex-end!important;
	gap:10px;
}
.mobile-version #sheet-form-container form.cart.hpo-preorder-active .woocommerce-variation-add-to-cart>.quantity{
	flex:0 0 auto;
	margin-right:0;
}
.mobile-version #sheet-form-container form.cart .hpo-var-btn.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:1 1 0;
	width:auto;
	min-width:0;
	height:44px;
	line-height:44px;
	margin:0 0 10px; /* bằng margin-bottom của ô số lượng trong popup */
	padding:0 10px;
	font-size:16px;
	white-space:nowrap;
	float:none!important;
}

/* ===== Thanh cố định đáy màn hình (mobile): Đặt trước | Yêu cầu gọi lại ===== */
#hpo-mbar{display:none}
body.mobile-version.hpo-mbar-on #hpo-mbar{
	display:flex;
	position:fixed;
	left:0;right:0;bottom:0;
	height:66px;
	padding:8px;
	gap:8px;
	box-sizing:border-box;
	background:#fff;
	box-shadow:0 -2px 10px rgba(0,0,0,.08);
	z-index:10000; /* dưới overlay popup (10001) */
}
#hpo-mbar .hpo-mbar-pre,
#hpo-mbar .hpo-mbar-call{
	height:50px;
	border-radius:5px;
	box-shadow:0 1px 3px rgba(0,0,0,.18);
	overflow:hidden;
}
#hpo-mbar .hpo-mbar-pre{
	flex:2 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:0;
	padding:0 10px;
	background:#0071df;
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
}
#hpo-mbar .hpo-mbar-pre .icon-bag2{font-size:22px;line-height:1}
#hpo-mbar .hpo-mbar-pre:focus-visible{outline:2px solid #000;outline-offset:2px}
#hpo-mbar .hpo-mbar-call{flex:1 1 0;background:#0082df}
#hpo-mbar .hpo-mbar-call a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;height:100%;
	color:#fff;
	text-decoration:none;
}
#hpo-mbar .hpo-mbar-call .icon-phone-wave{font-size:24px;line-height:1}
#hpo-mbar .hpo-mbar-call-text{font-size:10px;font-weight:600;margin-top:3px;white-space:nowrap}

/* Biến thể đặt trước: ẩn thanh nút của theme (nút Yêu cầu gọi lại + dải nền) – thanh của plugin thay thế */
body.hpo-preorder-active.mobile-version div.product form.cart.hpo-preorder-active .chatbutton{display:none!important}

/* ===== Popup sản phẩm đơn giản (form đặt trước trong #sheet-form-container) ===== */
#sheet-form-container form.hpo-form{margin:0}
#sheet-form-container form.hpo-form .hpo-price{display:none}
#sheet-form-container form.hpo-form .quantity{margin:0 0 10px!important;width:fit-content}
#sheet-form-container form.hpo-form .quantity .label{font-weight:bold;display:block;margin-bottom:4px}
#sheet-form-container form.hpo-form .quantity .qty-box{border:1px solid rgba(0,0,0,.25);padding:0;position:relative;display:flex;align-items:stretch}
#sheet-form-container form.hpo-form .quantity .qty-box .input-text{width:50px;text-align:center}
#sheet-form-container form.hpo-form .quantity .qty-box .decrease,
#sheet-form-container form.hpo-form .quantity .qty-box .increase{background-color:#f5f5f5;padding:10px;font-weight:600;cursor:pointer;display:flex;align-items:center}
#sheet-form-container form.hpo-form .hpo-btn.button{
	flex:1 1 0;
	min-width:0;
	margin:0 0 10px;
	padding:0 10px;
	font-size:16px;
	white-space:nowrap;
	background:#0071df;
	color:#fff;
}