/* ==========================================================================
   X3SALES Logo Divider — UX Builder element
   Dải logo giữa 2 đường kẻ ngang, nền tối.
   TẤT CẢ CSS được scope dưới .vhm-logo-divider để KHÔNG ảnh hưởng Flatsome/Woo.
   ========================================================================== */

.vhm-logo-divider {
	/* Chỉ còn bề rộng logo tuỳ biến qua field; nền trong suốt, kẻ trắng cố định. */
	--vhm-logo-w: 220px;

	width: 100%;
	
	background: transparent;
	box-sizing: border-box;
}

.vhm-logo-divider__inner {
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.vhm-logo-divider__line {
	flex: 1;
	height: 2px;
	background: #fff;
	display: block;
}

.vhm-logo-divider__logo {
	width: var(--vhm-logo-w);
	max-width: 35vw;
	height: auto;
	display: block;
	flex-shrink: 0;
}

/* Khi logo bọc trong link. */
.vhm-logo-divider__link {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

/* Placeholder khi chưa chọn ảnh. */
.vhm-logo-divider__placeholder {
	flex-shrink: 0;
	color: #fff;
	font-size: 14px;
	opacity: 0.7;
	white-space: nowrap;
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 768px) {
	.vhm-logo-divider {
		padding: 22px 12px;
	}
	.vhm-logo-divider__inner {
		gap: 15px;
	}
	.vhm-logo-divider__logo {
		width: var(--vhm-logo-w);
		max-width: 45vw;
	}
	.vhm-logo-divider__line {
		height: 1px;
	}
}
