.wkgb-banner {
	--wkgb-overlay: rgba(0, 0, 0, .45);
	--wkgb-text: #fff;
	--wkgb-accent: var(--primary-color, #1a1a1a);
	position: relative;
}

/* Span cột: 2 col chiếm gấp đôi chiều ngang so với 1 sản phẩm.
   Theme grid (Flatsome/khối khác) tự co giãn; !important giữ ổn định giữa các theme. */
.product-small.wkgb-banner.wkgb-col-2 { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important}
.wkgb-banner.wkgb-col-1 { /* để nguyên width mặc định của 1 ô sản phẩm theo theme */ }

.wkgb-inner {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: #111;
	transform: translateZ(0);
}

/* 2 row: cao gấp ~2 lần 1 ô sản phẩm */
/* .wkgb-banner.wkgb-row-2 .wkgb-inner { height: 640px; min-height: 640px; }
.wkgb-banner.wkgb-row-1 .wkgb-inner { height: 320px; min-height: 320px; } */

.wkgb-media {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	contain: paint;
}
.wkgb-media .wkgb-image,
.wkgb-media .wkgb-video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
	transform-origin: center;
	transition: transform .35s ease;
	backface-visibility: hidden;
	will-change: transform;
}

.wkgb-banner:hover .wkgb-media .wkgb-image,
.wkgb-banner:hover .wkgb-media .wkgb-video {
	transform: scale(1);
}

.wkgb-banner-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	text-decoration: none;
}

.wkgb-overlay {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
	color: var(--wkgb-text);
	background: linear-gradient(90deg, var(--wkgb-overlay) 0%, rgba(0,0,0,.15) 100%);
	pointer-events: none;
}

.wkgb-content {
	max-width: min(520px, 100%);
	display: flex;
	flex-direction: column;
}

.wkgb-content-position-middle-left { justify-content: center; align-items: flex-start; }
.wkgb-content-position-center-center { justify-content: center; align-items: center; }
.wkgb-content-position-middle-right { justify-content: center; align-items: flex-end; }
.wkgb-content-position-bottom-left { justify-content: flex-end; align-items: flex-start; }
.wkgb-content-position-bottom-right { justify-content: flex-end; align-items: flex-end; }
.wkgb-content-position-top-left { justify-content: flex-start; align-items: flex-start; }
.wkgb-content-position-top-right { justify-content: flex-start; align-items: flex-end; }

.wkgb-content-align-left .wkgb-content { text-align: left; align-items: flex-start; }
.wkgb-content-align-center .wkgb-content { text-align: center; align-items: center; }
.wkgb-content-align-right .wkgb-content { text-align: right; align-items: flex-end; }

.wkgb-heading { color: var(--wkgb-text); margin: 0 0 12px; font-size: 1.5em; line-height: 1.2; }
.wkgb-desc    { color: var(--wkgb-text); margin: 0 0 18px; font-size: .9em; opacity: .92; margin: 0px;}
.wkgb-button  { width: fit-content; pointer-events: auto; }

.wkgb-trustpilot {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	width: min(220px, calc(100% - 24px));
	min-height: 24px;
	pointer-events: auto;
}

.wkgb-trustpilot + .wkgb-overlay {
	padding-top: 52px;
}

/* Mobile-first: banner về full-width, chiều cao gọn lại */
@media (max-width: 849px) {
	.product-small.wkgb-banner.wkgb-col-2{ width: 66.66% !important; max-width: 66.66% !important; flex: 0 0 66.66% !important; }
	.wkgb-overlay { padding: 24px; }
	.wkgb-heading { font-size: 1.3rem; }
	.wkgb-trustpilot { top: 10px; right: 10px; width: min(200px, calc(100% - 20px)); }
}
@media (max-width: 549px) {
	.product-small.wkgb-banner.wkgb-col-2{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;}
	.wkgb-banner.wkgb-row-1 .wkgb-inner { min-height: 320px;}
	.wkgb-banner.wkgb-row-2 .wkgb-inner { min-height: 460px;}
}