/*
 * Nút "ĐĂNG KÝ NHẬN THÔNG TIN →" (Figma component 77:487)
 *
 * Dùng:
 *   - HTML: <a class="vg-btn vg-btn--arrow" href="#">Đăng ký nhận thông tin</a>
 *   - Gutenberg: khối Nút → Kiểu "Vin Giảng Võ" (is-style-vg)
 *
 * Hover: chỉ có vệt sáng chéo quét từ trái sang phải — nền và màu chữ giữ nguyên.
 */

.vg-btn,
.wp-block-button.is-style-vg .wp-block-button__link {
	position: relative;
	isolation: isolate; /* vệt sáng z-index âm vẫn nằm trên nền nút, dưới chữ */
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vg-btn-gap);
	padding: var(--vg-btn-padding);
	border: 0;
	border-radius: var(--vg-btn-radius);
	background-color: var(--vg-color-button);
	color: #fff;
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: var(--vg-line-height);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* Giữ nguyên màu khi hover — chặn a:hover / button hover của Blocksy */
.vg-btn:hover,
.vg-btn:focus-visible,
.wp-block-button.is-style-vg .wp-block-button__link:hover,
.wp-block-button.is-style-vg .wp-block-button__link:focus-visible {
	background-color: var(--vg-color-button);
	color: #fff;
}

/* Vệt sáng chéo quét qua khi hover */
.vg-btn::before,
.wp-block-button.is-style-vg .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: -50px;
	left: -75px;
	z-index: -1;
	width: 50px;
	height: 155px;
	background: #fff;
	opacity: 0.2;
	transform: rotate(35deg);
	transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
	pointer-events: none;
}

.vg-btn:hover::before,
.vg-btn:focus-visible::before,
.wp-block-button.is-style-vg .wp-block-button__link:hover::before,
.wp-block-button.is-style-vg .wp-block-button__link:focus-visible::before {
	left: 120%;
}

/* Mũi tên */
.vg-btn--arrow::after,
.wp-block-button.is-style-vg .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	/* Dùng mask để mũi tên ăn theo màu chữ */
	background-color: currentColor;
	-webkit-mask: url("../icons/move-right.svg") center / 16px 16px no-repeat;
	mask: url("../icons/move-right.svg") center / 16px 16px no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.vg-btn::before,
	.wp-block-button.is-style-vg .wp-block-button__link::before {
		transition: none;
	}
}