/**
 * HNQ Gọi Báo Giá — giao diện nút.
 *
 * Nguyên tắc: mọi selector đều nằm trong .hnq-gbg-wrap để không ảnh hưởng
 * tới bất kỳ thành phần nào khác của theme. Chỉ dùng !important ở đúng ba
 * thuộc tính mà theme (đặc biệt Flatsome) hay ghi đè lên thẻ <a>: màu chữ,
 * màu nền và viền.
 */

.hnq-gbg-wrap {
	display: block;
	margin: 10px 0 0;
	line-height: 1.2;
}

.hnq-gbg-wrap--has-zalo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hnq-gbg-wrap .hnq-gbg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 11px 16px;
	min-height: 40px;
	border: 0 !important;
	border-radius: var( --hnq-gbg-radius, 3px );
	background-color: var( --hnq-gbg-bg, #e02b20 ) !important;
	color: var( --hnq-gbg-text, #fff ) !important;
	font-size: var( --hnq-gbg-font-size, 14px );
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-transform: var( --hnq-gbg-transform, uppercase );
	letter-spacing: 0.02em;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.hnq-gbg-wrap .hnq-gbg-btn:hover,
.hnq-gbg-wrap .hnq-gbg-btn:focus {
	background-color: var( --hnq-gbg-bg-hover, #b81f16 ) !important;
	color: var( --hnq-gbg-text, #fff ) !important;
	text-decoration: none !important;
}

.hnq-gbg-wrap .hnq-gbg-btn:focus-visible {
	outline: 2px solid var( --hnq-gbg-bg-hover, #b81f16 );
	outline-offset: 2px;
}

/* Nút chiếm hết chiều ngang của ô sản phẩm — giống mẫu thiết kế. */
.hnq-gbg-wrap .hnq-gbg-btn--full {
	display: flex;
	width: 100%;
}

.hnq-gbg-wrap--has-zalo .hnq-gbg-btn--full {
	flex: 1 1 140px;
	width: auto;
}

/* Icon SVG: khóa kích thước để không bị theme kéo giãn, không phụ thuộc font icon. */
.hnq-gbg-wrap .hnq-gbg-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.hnq-gbg-wrap .hnq-gbg-btn__icon .hnq-gbg-svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
	max-width: none;
	vertical-align: middle;
	fill: currentColor;
}

.hnq-gbg-wrap .hnq-gbg-btn__icon .hnq-gbg-svg[stroke] {
	fill: none;
	stroke: currentColor;
}

.hnq-gbg-wrap .hnq-gbg-btn__text {
	display: inline-block;
	white-space: normal;
}

/* Nút Zalo dùng màu xanh thương hiệu, không phụ thuộc màu nút chính. */
.hnq-gbg-wrap .hnq-gbg-btn--zalo {
	background-color: #0068ff !important;
	color: #fff !important;
}

.hnq-gbg-wrap .hnq-gbg-btn--zalo:hover,
.hnq-gbg-wrap .hnq-gbg-btn--zalo:focus {
	background-color: #0055cc !important;
	color: #fff !important;
}

/* Chữ thay cho giá khi bật tùy chọn ẩn giá. */
.hnq-gbg-price-note {
	font-weight: 600;
}

/* Màn hình nhỏ: giảm padding và cỡ chữ để không vỡ ô sản phẩm 2 cột trên mobile. */
@media screen and ( max-width: 549px ) {

	.hnq-gbg-wrap .hnq-gbg-btn {
		padding: 9px 10px;
		min-height: 36px;
		font-size: calc( var( --hnq-gbg-font-size, 14px ) - 1px );
		gap: 6px;
	}

	.hnq-gbg-wrap--has-zalo {
		gap: 6px;
	}

	.hnq-gbg-wrap--has-zalo .hnq-gbg-btn--full {
		flex: 1 1 100%;
	}
}