/*
Theme Name: 94boxphone
Theme URI: https://94boxphone.com
Author: Skyserver team
Author URI: https://94boxphone.com
Description: Giao diện thương mại điện tử chuyên nghiệp được tối ưu cho thiết bị BoxPhone. Tính năng thiết kế hiện đại, responsive với slider banner, showcase sản phẩm và tích hợp WooCommerce mượt mà. Hoàn hảo cho cửa hàng trực tuyến bán thiết bị di động và phụ kiện. Bao gồm các section trang chủ có thể tùy chỉnh, hiển thị sản phẩm nổi bật và điều hướng thân thiện với thiết bị di động.

Version: 1.0.0
Yêu cầu WordPress tối thiểu: 5.8
Đã kiểm tra tới: 6.4
Yêu cầu PHP: 7.4
Giấy phép: GNU General Public License v2 hoặc mới hơn
Liên kết giấy phép: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boxphone
Tags: e-commerce, woocommerce, business, shop, responsive, modern, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* Basic reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; color: #101827; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Layout */
.container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 16px; }
.home .container, body.home .container { max-width: 1728px; }
.section { padding: 40px 0; }

/* Header */
.bp-header { background: #f2f3fb; border-bottom: 1px solid #e5e7eb; }
.bp-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; flex-wrap: nowrap; }
.bp-logo { flex-shrink: 0; }
.bp-logo a { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #101827; text-decoration: none; }
.bp-logo img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.bp-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.bp-nav-menu { display: flex !important; flex-direction: row !important; gap: 96px; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: nowrap; }
.bp-nav-menu li { margin: 0; display: inline-block; padding: 0 8px; }
.bp-nav-menu a, .bp-nav a { color: #374151; text-decoration: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
.bp-nav-menu a:hover, .bp-nav a:hover { color: #2563eb; }
.bp-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-register { background: #2563eb; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.btn-download { background: #fff; color: #2563eb; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid #2563eb; white-space: nowrap; }
.bp-lang { display: flex; align-items: center; gap: 4px; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.bp-chevron { font-size: 10px; }

/* Header Responsive */
.bp-menu-toggle { display: none; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; padding: 8px; }
.bp-menu-toggle span { width: 24px; height: 2px; background: #374151; display: block; }

@media (max-width: 1024px) {
	.bp-nav-menu { gap: 48px !important; }
	.bp-header-actions { gap: 8px; }
	.btn-register, .btn-download { padding: 8px 16px; font-size: 13px; }
}
@media (max-width: 768px) {
	.bp-menu-toggle { display: flex; }
	.bp-header-inner { flex-wrap: wrap; gap: 12px; }
	.bp-nav { order: 3; width: 100%; flex: none; margin-top: 0; display: none; }
	.bp-nav.active { display: block; }
	.bp-nav-menu { flex-direction: column !important; gap: 16px !important; align-items: flex-start; }
	.bp-nav-menu li { display: block; width: 100%; }
	.bp-nav-menu a, .bp-nav a { padding: 12px 0; font-size: 16px; display: block; width: 100%; }
	.bp-header-actions { gap: 8px; }
	.btn-register, .btn-download { padding: 8px 14px; font-size: 12px; }
	/* Hide slider arrows on mobile; use swipe instead */
	.bp-slider-prev,
	.bp-slider-next { display: none !important; }
}
@media (max-width: 480px) {
	.bp-logo a { font-size: 16px; }
	.bp-logo img { width: 32px; height: 32px; }
	.bp-nav-menu { gap: 12px !important; }
	.bp-nav-menu a, .bp-nav a { font-size: 15px; }
	.bp-header-actions { gap: 6px; flex-wrap: wrap; }
	.btn-register, .btn-download { padding: 6px 12px; font-size: 11px; }
	.bp-lang { font-size: 12px; }
}

/* Hero */
/* Slider banner */
.bp-slider { background: transparent; color: inherit; padding: 0; position: relative; overflow: hidden; margin-top: 24px; }
.bp-slider .container { position: relative; }
.bp-slider .bp-slide { display: none; }
.bp-slider .bp-slide.is-active { display: block; }
.bp-slide-content h1, .bp-slide-content p, .bp-slide-content .actions { display: none; }
.bp-slider .bp-slide img { width: 100%; height: auto; display: block; border-radius: 0; }
/* Home banner: force ~1690x612 aspect ratio like reference */
.home .bp-slider .bp-slide { aspect-ratio: 1690 / 612; }
.home .bp-slider .bp-slide img { height: 100%; object-fit: cover; }
.bp-slider-prev, .bp-slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: #111827aa; color: #fff; border: 0; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; z-index: 2; }
.bp-slider .bp-slider-prev, .bp-slider .bp-slider-next { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.bp-slider:hover .bp-slider-prev, .bp-slider:hover .bp-slider-next { opacity: 1; pointer-events: auto; }
.bp-slider-prev { left: 16px; }
.bp-slider-next { right: 16px; }
.bp-slider-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; }
.bp-slider-dots button { width: 10px; height: 10px; aspect-ratio: 1 / 1; padding: 0; line-height: 0; display: inline-block; border-radius: 50%; border: 2px solid #ffffff; background: transparent; cursor: pointer; opacity: .9; transition: background .15s ease, transform .15s ease; box-sizing: content-box; }
.bp-slider-dots button:hover { background: #ffffff; opacity: 1; }
.bp-slider-dots button.is-active { background: #fff; transform: scale(1.05); }
/* Dots for product slider - outside slider */
.bp-two-col-right .bp-slider-dots { position: static; margin-top: 12px; gap: 6px; }
.bp-two-col-right .bp-slider-dots button { border-color: #2563eb; background: transparent; }
.bp-two-col-right .bp-slider-dots button:hover { background: #2563eb; }
.bp-two-col-right .bp-slider-dots button.is-active { background: #2563eb; }

/* Two column promo + product slider */
.bp-two-col { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: 'left right'; gap: 36px; align-items: stretch; }
.bp-two-col-left { grid-area: left; }
.bp-two-col-right { grid-area: right; }
@media (max-width: 1024px) { .bp-two-col { grid-template-columns: 1fr; grid-template-areas: 'left' 'right'; } }

/* Desktop: match reference banner size ~347x650 (9:16) */
@media (min-width: 1200px) {
	.home .bp-two-col { grid-template-columns: 347px 1fr; }
	.home .bp-two-col-left .bp-banner { width: 347px; height: 650px; aspect-ratio: auto; }
}
.bp-banner { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: center; border-radius: 12px; display: block; }
.bp-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) { .bp-mini-grid { grid-template-columns: repeat(2, 1fr); } }
.bp-mini-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bp-mini-card a { position: relative; display: block; }
.bp-mini-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f8fafc; border-radius: 8px; }
.bp-mini-card h4 { font-size: 14px; margin: 0; line-height: 1.3; }
.bp-mini-card .price { color: #000000; font-weight: 400; }
.bp-two-col-right .bp-slider { padding: 0; margin-top: 0; }
.bp-two-col-right .bp-slider { overflow: visible; }
.bp-two-col-right .bp-slider-prev { left: -12px; }
.bp-two-col-right .bp-slider-next { right: -12px; }
.bp-mini-card .buy .btn { width: 100%; text-align: center; }

/* Make product cards in the right slider slightly smaller */
.bp-two-col-right .bp-mini-card { padding: 8px; gap: 6px; }
.bp-two-col-right .bp-mini-card img { aspect-ratio: 1 / 1; object-fit: contain; }
.bp-two-col-right .bp-mini-card h4 { font-size: 13px; }

/* Mid advertisement banner */
.bp-ad { display: block; width: 100%; height: auto; border-radius: 12px; }

/* Reduce vertical spacing for the middle advertisement section */
.bp-mid-ad { padding: 16px 0; }

/* Swap positions when requested */
.bp-two-col.swap { grid-template-columns: 3fr 1fr; grid-template-areas: 'right left'; }
@media (max-width: 1024px) { .bp-two-col.swap { grid-template-areas: 'left' 'right'; } }
.btn { display: inline-block; padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-outline { border: 1px solid #334155; color: #e2e8f0; }

/* Product grid */
.bp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.home #shop .bp-grid { gap: 20px; }
@media (max-width: 1280px) { .bp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .bp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .bp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bp-grid { grid-template-columns: 1fr; } }

.bp-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; height: 100%; }
.bp-card a { position: relative; display: block; }
.bp-card a img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f1f5f9; }
.home #shop .bp-card a img { aspect-ratio: 1 / 1; object-fit: cover; background: transparent; }
.bp-card .body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.bp-card h3 { font-size: 16px; margin: 0; }
.bp-card .meta { color: #6b7280; font-size: 13px; }
.bp-card .price { color: #000000; font-weight: 400; }
.bp-card .buy { margin-top: auto; }
.bp-card .buy .btn { width: 100%; text-align: center; }

/* Footer */
.bp-footer { background: #000; color: #94a3b8; padding: 40px 0; }
.bp-footer a { color: #cbd5e1; }

/* Footer redesign */
.bp-footer-cta { text-align: center; padding: 40px 0 100px; }
.bp-footer-cta h2 { color: #fff; font-size: 36px; margin: 0 0 8px; }
.bp-footer-cta p { margin: 0 0 16px; line-height: 1.6; }
.bp-footer-cta .actions { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

.bp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; gap: 24px; padding: 24px 0 16px; align-items: start; }
@media (max-width: 768px) { .bp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bp-footer-grid { grid-template-columns: 1fr; } }
.bp-footer-grid h4 { color: #e2e8f0; margin: 0 0 10px; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; }
.bp-footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bp-footer-grid a { line-height: 1.7; }
.bp-footer-grid .logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.bp-footer-grid .logo img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

.bp-newsletter { display: flex; gap: 8px; }
.bp-newsletter input { flex: 1; background: #0f172a; border: 1px solid #1f2937; border-radius: 8px; color: #e2e8f0; padding: 10px 12px; }

.bp-footer-bottom { border-top: 1px solid #1f2937; margin-top: 24px; padding-top: 16px; text-align: center; font-size: 14px; }

/* Single Product Page */
.bp-single-product { margin-top: 24px; }
/* Container cho trang chi tiết sản phẩm - kích thước tiêu chuẩn */
body.single-product .container,
body.single-product main.container,
body.woocommerce.single-product .container {
	max-width: 1200px;
}
.bp-product-grid-3col { display: grid; grid-template-columns: auto 1fr 1fr; gap: 24px; margin-bottom: 48px; align-items: start; }
@media (max-width: 1024px) { .bp-product-grid-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { 
	html, body {
		overflow-x: hidden;
		width: 100%;
		max-width: 100vw;
	}
	.bp-product-grid-3col { 
		grid-template-columns: 1fr; 
		gap: 20px;
		margin-bottom: 32px;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
	body.single-product .container,
	body.single-product main.container,
	body.woocommerce.single-product .container {
		padding: 0 12px;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}
}

/* Tablet (iPad) specific: keep 3 columns but make it fit nicely */
@media (min-width: 768px) and (max-width: 1024px) {
	.bp-product-grid-3col {
		/* Tighter first and second columns to prevent overflow */
		grid-template-columns: 0.6fr 0.9fr 1fr !important;
		gap: 16px !important;
	}
	/* Keep desktop column order on iPad */
	.bp-gallery-sidebar-col,
	.bp-product-image-col,
	.bp-product-info-col { order: initial !important; }

	/* Sidebar thumbnails back to vertical stack on iPad */
	.bp-gallery-scroll-wrapper { flex-direction: column !important; }
	.bp-gallery-sidebar { flex-direction: column !important; max-width: none !important; }
	.bp-gallery-sidebar { max-height: 400px; }
	.bp-gallery-sidebar .bp-gallery-thumb { width: 56px; height: 56px; }
	/* Make main image a bit narrower on iPad */
	.bp-product-image-container { width: 360px; height: auto; max-width: 100%; }
	.bp-product-image-main { aspect-ratio: 360 / 420; }
	.bp-product-title { font-size: 28px; }
}

/* Home on iPad: mimic desktop layout */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Featured product grid stays 5 columns like desktop */
	.home #shop .bp-grid,
	body.home #shop .bp-grid { grid-template-columns: repeat(5, 1fr) !important; }

	/* Two-column section stays side-by-side like desktop */
	.home .bp-two-col { 
		grid-template-columns: 1fr 3fr !important; 
		grid-template-areas: 'left right' !important;
	}
}

/* Column 1: Gallery Sidebar */
.bp-gallery-sidebar-col { display: flex; flex-direction: column; }
.bp-gallery-scroll-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bp-gallery-scroll-btn { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 4px; width: 32px; height: 24px; cursor: pointer; font-size: 12px; color: #6b7280; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.bp-gallery-scroll-btn:hover { background: #e5e7eb; color: #374151; }
.bp-gallery-scroll-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.bp-gallery-sidebar { display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; overflow-x: hidden; padding: 4px; scroll-behavior: smooth; }
.bp-gallery-sidebar::-webkit-scrollbar { width: 4px; }
.bp-gallery-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
.bp-gallery-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.bp-gallery-sidebar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.bp-gallery-sidebar .bp-gallery-thumb { width: 80px; height: 80px; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f8fafc; transition: all 0.2s; flex-shrink: 0; }
.bp-gallery-sidebar .bp-gallery-thumb:hover, .bp-gallery-sidebar .bp-gallery-thumb.active { border-color: #2563eb; border-width: 2px; }
.bp-gallery-sidebar .bp-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 1024px) { 
	.bp-gallery-sidebar-col { order: 2; }
	.bp-product-image-col { order: 1; }
	.bp-product-info-col { order: 3; }
	.bp-gallery-scroll-wrapper { flex-direction: row; }
	.bp-gallery-sidebar { flex-direction: row; max-height: none; max-width: 500px; }
	.bp-product-image-container { width: 100%; height: auto; max-width: 463.734px; }
	.bp-product-image-main { aspect-ratio: 463.734 / 540.406; }
}
@media (max-width: 768px) { 
	.bp-gallery-sidebar { flex-wrap: wrap; max-width: 100%; }
	.bp-gallery-sidebar .bp-gallery-thumb { width: 60px; height: 60px; }
	/* Hide gallery up/down buttons on mobile */
	.bp-gallery-scroll-btn { display: none !important; }
	.bp-product-image-col {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0;
		overflow: hidden;
		box-sizing: border-box;
	}
	.bp-product-image-container { 
		width: 100% !important; 
		height: auto; 
		max-width: 100% !important;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.bp-product-image-main { 
		aspect-ratio: 463.734 / 540.406; 
		width: 100% !important;
		height: auto;
		max-width: 100% !important;
		box-sizing: border-box;
		overflow: hidden;
	}
	.bp-product-image-main img {
		width: auto !important;
		height: auto;
		max-width: 100% !important;
		max-height: 100%;
		object-fit: contain;
		display: block;
		box-sizing: border-box;
	}
	.bp-zoom-btn {
		width: 40px;
		height: 40px;
		top: 8px;
		right: 8px;
	}
	.bp-zoom-btn svg {
		width: 18px;
		height: 18px;
	}
	.bp-dimensions-overlay {
		bottom: 8px;
		right: 8px;
	}
	.bp-dimensions-box {
		padding: 10px 12px;
		font-size: 12px;
	}
	.bp-dimensions-box strong {
		font-size: 13px;
	}
	.bp-badge-new {
		top: 8px;
		left: 8px;
		padding: 4px 10px;
		font-size: 11px;
	}
}

/* Mobile phones: show 4 thumbnails per row in gallery sidebar */
@media (max-width: 480px) {
	.bp-gallery-sidebar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		max-width: 100%;
	}
	.bp-gallery-sidebar .bp-gallery-thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* Column 2: Main Product Image */
.bp-product-image-col { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; }
.bp-product-image-container {
	position: relative;
	width: 463.734px;
	height: 420px;
	max-height: 70vh;
	max-width: 100%;
	box-sizing: border-box;
}
.bp-product-image-main {
	position: relative;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #f8fafc;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bp-product-image-main img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.bp-badge-new { position: absolute; top: 12px; left: 12px; background: #dc2626; color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; z-index: 2; }
.bp-dimensions-overlay { position: absolute; bottom: 12px; right: 12px; z-index: 2; }
.bp-dimensions-box { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); padding: 12px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 13px; line-height: 1.6; }
.bp-dimensions-box strong { display: block; color: #2563eb; margin-bottom: 4px; font-size: 14px; }
.bp-dimensions-box div { color: #374151; }

/* Zoom Button */
.bp-zoom-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	transition: all 0.2s ease;
	color: #374151;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bp-zoom-btn:hover {
	background: #fff;
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	color: #2563eb;
}
.bp-zoom-btn svg {
	width: 20px;
	height: 20px;
}

/* Image Lightbox */
.bp-image-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	cursor: pointer;
	animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.bp-image-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.bp-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10000;
}
.bp-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}
@media (max-width: 768px) {
	.bp-lightbox-close {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		font-size: 28px;
	}
}

/* Column 3: Product Info */
.bp-product-info-col { display: flex; flex-direction: column; gap: 20px; }
.bp-product-title { font-size: 32px; font-weight: 700; margin: 0 0 12px; color: #101827; line-height: 1.2; }
@media (max-width: 768px) { .bp-product-title { font-size: 24px; } }
.bp-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bp-product-rating .woocommerce-product-rating { display: flex; align-items: center; }
.bp-product-rating .rating-text { font-size: 14px; color: #6b7280; }
.bp-product-price { font-size: 28px; font-weight: 400; color: #000000; margin-bottom: 8px; }
.bp-product-price del { font-size: 20px; color: #6b7280; font-weight: 400; margin-right: 12px; }
.bp-product-short-desc { font-size: 16px; line-height: 1.6; color: #374151; }
.bp-product-stock { font-size: 14px; margin-bottom: 8px; }
.bp-product-stock .stock.in-stock { color: #059669; font-weight: 600; }
.bp-product-stock .stock.out-of-stock { color: #dc2626; font-weight: 600; }
.bp-product-cart { margin-top: 8px; margin-bottom: 8px; }
.bp-product-cart form { display: flex !important; gap: 12px; align-items: center; flex-wrap: nowrap; width: 100%; }
.bp-product-cart form > * { margin: 0 !important; }
.bp-product-cart .quantity { margin-bottom: 0 !important; display: flex; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: #f3f4f6; flex-shrink: 0; }
.bp-product-cart .quantity .qty-minus,
.bp-product-cart .quantity .qty-plus { background: #f3f4f6; border: 0; padding: 0 16px; cursor: pointer; font-size: 18px; font-weight: 600; color: #374151; user-select: none; display: flex; align-items: center; justify-content: center; transition: background 0.2s; min-height: 48px; }
.bp-product-cart .quantity .qty-minus:hover,
.bp-product-cart .quantity .qty-plus:hover { background: #e5e7eb; }
.bp-product-cart .quantity input { padding: 12px; border: 0; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; width: 60px; text-align: center; background: #fff; font-size: 16px; min-height: 48px; }
.bp-product-cart .quantity input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.bp-product-cart .quantity input[type="number"]::-webkit-inner-spin-button,
.bp-product-cart .quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.bp-product-cart .single_add_to_cart_button { background: #f472b6; color: #fff; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 16px; border: 0; cursor: pointer; flex: 1; min-width: 200px; transition: background 0.2s; white-space: nowrap; min-height: 48px; }
.bp-product-cart .single_add_to_cart_button:hover { background: #ec4899; }
@media (max-width: 480px) {
	.bp-product-cart { flex-direction: column; align-items: stretch; }
	.bp-product-cart form { flex-direction: column; }
	.bp-product-cart .quantity { width: 100%; }
	.bp-product-cart .single_add_to_cart_button { width: 100%; }
}
/* Top Information Box (Light Grey) */
.bp-info-box-top {
	background: #f3f4f6;
	padding: 20px 24px;
	border-radius: 8px;
	margin: 8px 0 12px;
	line-height: 1.8;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}
.bp-info-heading {
	font-size: 13px;
	font-weight: 700;
	color: #101827;
	margin-bottom: 12px;
}
.bp-info-delivery {
	font-size: 11px;
	color: #374151;
	margin-bottom: 8px;
}
.bp-info-delivery:last-of-type {
	margin-bottom: 12px;
}
.bp-info-payment {
	font-size: 11px;
	color: #374151;
}
.bp-info-payment strong {
	color: #101827;
	font-weight: 600;
}

/* Bottom Information Grid (2x2) */
.bp-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	margin: 0 0 16px;
	padding-top: 0;
}
.bp-info-block {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border-bottom: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
}
.bp-info-block:nth-child(2n) {
	border-right: none;
}
.bp-info-block:nth-child(n+3) {
	border-bottom: none;
}
.bp-info-block-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: #374151;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.bp-info-block-icon .bp-icon-main {
	width: 24px;
	height: 24px;
}
.bp-icon-badge {
	position: absolute;
	z-index: 1;
}
.bp-icon-badge-tl {
	top: -2px;
	left: -2px;
}
.bp-icon-badge-tr {
	top: -2px;
	right: -2px;
}
.bp-icon-badge svg {
	display: block;
}
.bp-info-block-text {
	font-size: 11px;
	color: #374151;
	line-height: 1.6;
	flex: 1;
}
.bp-info-block-text strong {
	color: #101827;
	font-weight: 600;
}
@media (max-width: 768px) {
	.bp-info-grid {
		grid-template-columns: 1fr;
	}
	.bp-info-block {
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
	}
	.bp-info-block:last-child {
		border-bottom: none;
	}
}
/* Technical Specifications Section */
.bp-specs-section {
	margin: 16px 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border-top: 1px solid #e5e7eb;
}
.bp-specs-header {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s;
}
.bp-specs-header:hover {
	background: #f9fafb;
}
.bp-specs-section.expanded .bp-specs-header {
	background: #fee2e2;
}
.bp-specs-section.expanded .bp-specs-header:hover {
	background: #fecaca;
}
.bp-specs-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #101827;
}
.bp-specs-toggle {
	font-size: 18px;
	color: #101827;
	font-weight: 600;
	transition: transform 0.3s;
	line-height: 1;
}
.bp-specs-section.expanded .bp-specs-toggle {
	transform: rotate(180deg);
}
.bp-specs-content {
	padding: 20px;
	display: none;
}
.bp-specs-section.expanded .bp-specs-content {
	display: block;
}
.bp-specs-list {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
	color: #374151;
	font-size: 14px;
	line-height: 1.8;
}
.bp-specs-list li {
	margin-bottom: 12px;
}
.bp-specs-list li:last-child {
	margin-bottom: 0;
}
.bp-specs-list strong {
	color: #101827;
	font-weight: 600;
}
.bp-specs-sublist {
	margin: 8px 0 0 20px;
	padding-left: 20px;
	list-style: disc;
}
.bp-specs-sublist li {
	margin-bottom: 8px;
}

.bp-product-meta { padding-top: 24px; border-top: 1px solid #e5e7eb; font-size: 14px; color: #6b7280; }
.bp-product-meta .sku { margin-bottom: 8px; }
.bp-product-meta .posted_in, .bp-product-meta .tagged_as { margin-top: 8px; }
.bp-product-meta a { color: #2563eb; }

/* Product Tabs */
.bp-product-tabs { margin-top: 48px; }
.bp-tab-content { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid #e5e7eb; }
.bp-tab-content:last-child { border-bottom: none; }
.bp-tab-content h2 { font-size: 24px; font-weight: 700; margin: 0 0 24px; color: #101827; }
.bp-product-description { font-size: 16px; line-height: 1.8; color: #374151; }
.bp-product-description p { margin: 0 0 16px; }
.bp-product-description ul, .bp-product-description ol { margin: 0 0 16px; padding-left: 24px; }
/* Responsive embeds (YouTube, Vimeo...) inside product description */
.bp-product-description .wp-block-embed,
.bp-product-description .wp-block-video,
.bp-product-description .wp-block-embed__wrapper,
.bp-product-description iframe,
.bp-product-description video,
.bp-product-description .wp-embed-aspect-16-9,
.bp-product-description .wp-has-aspect-ratio {
	max-width: 100% !important;
	width: 100% !important;
}
.bp-product-description .wp-block-embed.is-type-video,
.bp-product-description .wp-block-embed.is-provider-youtube,
.bp-product-description .wp-embed-aspect-16-9,
.bp-product-description .wp-has-aspect-ratio {
	position: relative;
	display: block;
}
.bp-product-description .wp-block-embed iframe,
.bp-product-description .wp-block-video video,
.bp-product-description iframe,
.bp-product-description video {
	height: auto !important;
	border: 0;
	display: block;
}

/* Gutenberg embed wrappers: enforce proper 16:9 height using padding hack */
.bp-product-description .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.bp-product-description .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.bp-product-description .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.bp-product-description .wp-block-embed.is-type-video .wp-block-embed__wrapper::before,
.bp-product-description .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before,
.bp-product-description .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper::before,
.bp-product-description .wp-block-embed.is-type-video::before {
	content: '';
	display: block;
	padding-top: 56.25%; /* 16:9 */
}
.bp-product-description .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.bp-product-description .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.bp-product-description .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper iframe,
.bp-product-description .wp-block-embed.is-type-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* Fallback for raw YouTube iframes not wrapped by Gutenberg */
.bp-product-description iframe[src*="youtube.com"],
.bp-product-description iframe[src*="youtu.be"] {
	width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
}
/* Căn giữa hình ảnh trong mô tả sản phẩm */
.bp-product-description img,
.bp-product-description figure,
.bp-product-description .aligncenter,
.bp-product-description .align-center,
.bp-product-description img.aligncenter,
.bp-product-description figure.aligncenter,
.bp-product-description .wp-block-image,
.bp-product-description .wp-block-image img,
.bp-product-description .wp-block-image figure,
.bp-product-description p.has-text-align-center,
.bp-product-description .has-text-align-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.bp-product-description figure,
.bp-product-description .wp-block-image {
	margin: 24px auto;
}
.bp-product-description figure img,
.bp-product-description .wp-block-image img {
	margin: 0 auto;
}
/* Căn giữa cho các paragraph chứa hình ảnh */
.bp-product-description p:has(img),
.bp-product-description p:has(figure) {
	text-align: center;
}
.bp-product-description p:has(img) img,
.bp-product-description p:has(figure) figure {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}
.bp-additional-info { font-size: 15px; }
.bp-additional-info table { width: 100%; border-collapse: collapse; }
.bp-additional-info table th { text-align: left; padding: 12px; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; }
.bp-additional-info table td { padding: 12px; color: #6b7280; border-bottom: 1px solid #e5e7eb; }

/* Related Products */
.bp-related-products { margin-top: 64px; padding-top: 48px; border-top: 1px solid #e5e7eb; }
.bp-related-products h2 { font-size: 28px; font-weight: 700; margin: 0 0 24px; color: #101827; }
@media (max-width: 768px) { .bp-related-products h2 { font-size: 22px; } }
/* Sản phẩm liên quan chỉ hiển thị 4 cột */
.bp-related-products .bp-grid {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1280px) { 
	.bp-related-products .bp-grid { 
		grid-template-columns: repeat(4, 1fr); 
	} 
}
@media (max-width: 1024px) { 
	.bp-related-products .bp-grid { 
		/* Default tablet: keep grid (will be overridden by iPad-specific block below) */
		grid-template-columns: repeat(3, 1fr); 
	} 
	.bp-related-products .bp-grid::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) { 
	.bp-related-products .bp-grid { 
		/* Switch to horizontal scroller on mobile */
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	} 
	.bp-related-products .bp-grid::-webkit-scrollbar { display: none; }
	.bp-related-products .bp-card { flex: 0 0 70%; scroll-snap-align: start; }
}
@media (max-width: 480px) { 
	.bp-related-products .bp-grid { display: flex; }
	.bp-related-products .bp-card { flex-basis: 85%; }
}

/* iPad: show 4 items per row (grid), not horizontal scroller */
@media (min-width: 768px) and (max-width: 1024px) {
	.bp-related-products .bp-grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 16px !important;
		overflow: visible !important;
		padding-bottom: 0 !important;
		scroll-snap-type: none !important;
	}
	.bp-related-products .bp-card { flex: 0 0 auto !important; }
}

/* Only on single product page: expand related section to its own 1600px container */
body.single-product .bp-related-products {
	width: 100dvw; /* break out of 1200px parent container; avoid scrollbar width */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50dvw;
	margin-right: -50dvw;
}
body.single-product .bp-related-products > h2,
body.single-product .bp-related-products > .bp-grid,
body.single-product .bp-related-products > .bp-slider {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* Prevent accidental horizontal scrollbar on single product due to full-bleed section */
body.single-product { overflow-x: hidden; }

/* Rating stars color (single product header and elsewhere) */
body.single-product .star-rating,
body.single-product .star-rating:before,
body.single-product .star-rating span:before {
	color: #fbbf24 !important; /* amber/yellow */
}

/* Product Reviews (WooCommerce) */
/* Reviews list stays plain; only style the form card */
.bp-product-tabs .woocommerce-Reviews { margin: 0; }
.bp-product-tabs #comments { margin: 0 0 20px; }
.bp-product-tabs .star-rating,
.bp-product-tabs .star-rating:before,
.bp-product-tabs .star-rating span:before { color: #fbbf24; }
.bp-product-tabs #review_form_wrapper,
.bp-product-tabs .comment-respond {
	border: 2px solid #e58a79;
	border-radius: 8px;
	padding: 16px 18px;
	background: #fff;
}
.bp-product-tabs .woocommerce-Reviews-title,
.bp-product-tabs #reply-title {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 14px;
}
.bp-product-tabs .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}
.bp-product-tabs .comment-form-rating,
.bp-product-tabs .comment-form-comment,
.bp-product-tabs .form-submit {
	grid-column: 1 / -1; /* full width rows */
}
.bp-product-tabs .comment-form-rating { margin-top: 4px; }
.bp-product-tabs .comment-form-rating .stars { line-height: 1; display: inline-flex; gap: 0; align-items: center; justify-content: center; width: 100%; transform: translateX(-32px); }
.bp-product-tabs .comment-form-rating .stars a {
	display: inline-block;
	width: auto;
	height: 20px;
	position: relative;
	cursor: pointer;
	text-indent: -9999px; /* hide text like "1", "2" ... */
	padding-right: 64px;
	margin-right: 64px;
	border-right: 1px solid #e5e7eb;
}
.bp-product-tabs .comment-form-rating .stars a:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.bp-product-tabs .comment-form-rating .stars a:before {
	/* Show 1-5 clustered stars per option */
	content: '★';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 18px;
	line-height: 20px;
	color: #d1d5db;
}
.bp-product-tabs .comment-form-rating .stars a:nth-child(1):before { content: '★'; }
.bp-product-tabs .comment-form-rating .stars a:nth-child(2):before { content: '★★'; }
.bp-product-tabs .comment-form-rating .stars a:nth-child(3):before { content: '★★★'; }
.bp-product-tabs .comment-form-rating .stars a:nth-child(4):before { content: '★★★★'; }
.bp-product-tabs .comment-form-rating .stars a:nth-child(5):before { content: '★★★★★'; }
.bp-product-tabs .comment-form-rating .stars a:hover:before,
.bp-product-tabs .comment-form-rating .stars a:focus:before,
.bp-product-tabs .comment-form-rating .stars a.active:before { color: #fbbf24; }
/* When selected, WooCommerce adds star-N on .stars; color up to N */
.bp-product-tabs .comment-form-rating .stars.selected.star-1 a:nth-child(-n+1):before,
.bp-product-tabs .comment-form-rating .stars.selected.star-2 a:nth-child(-n+2):before,
.bp-product-tabs .comment-form-rating .stars.selected.star-3 a:nth-child(-n+3):before,
.bp-product-tabs .comment-form-rating .stars.selected.star-4 a:nth-child(-n+4):before,
.bp-product-tabs .comment-form-rating .stars.selected.star-5 a:nth-child(-n+5):before { color: #f59e0b; }
.bp-product-tabs .comment-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.bp-product-tabs .comment-form textarea,
.bp-product-tabs .comment-form input[type="text"],
.bp-product-tabs .comment-form input[type="email"] {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 16px;
	background: #fff;
}
.bp-product-tabs .comment-form textarea:focus,
.bp-product-tabs .comment-form input[type="text"]:focus,
.bp-product-tabs .comment-form input[type="email"]:focus {
	outline: none;
	border-color: var(--bp-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.bp-product-tabs .comment-form textarea { min-height: 150px; resize: vertical; }
.bp-product-tabs .comment-form .comment-form-author,
.bp-product-tabs .comment-form .comment-form-email { margin: 0; }
.bp-product-tabs .comment-form .comment-form-author { grid-column: 1 / 2; }
.bp-product-tabs .comment-form .comment-form-email { grid-column: 2 / 3; }

.bp-product-tabs .comment-form .form-submit { margin-top: 4px; }
.bp-product-tabs .comment-form .form-submit .submit {
	background: #e48a79;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	padding: 10px 18px;
	text-transform: uppercase;
	cursor: pointer;
}
.bp-product-tabs .comment-form .form-submit .submit:hover { background: #d6725f; }

@media (max-width: 768px) {
	.bp-product-tabs .comment-form { grid-template-columns: 1fr; }
	.bp-product-tabs .comment-form .comment-form-email { grid-column: 1 / -1; }
}

/* Hide cookie consent if present (fallback) */
.bp-product-tabs .comment-form .comment-form-cookies-consent { display: none !important; }