/* =========================================================================
   Component: nút .button-ui
   Nguồn: Uiverse.io by marcelodolza — giữ nguyên thiết kế.

   Mọi selector con đều được bọc trong .button-ui: các tên như .bg, .wrap,
   .content, .icon, .path rất phổ biến, để trần sẽ đè lên phần tử khác của
   site (WordPress, plugin, block editor đều dùng những tên này).
   ====================================================================== */

.button-ui {
	--white: #fff4f2;

	--red-100: #ffb8b0;
	--red-200: #ff8d80;
	--red-300: #ff6758;
	--red-400: #ee3523;
	--red-500: #b81f12;

	--radius: 999px;

	position: relative;
	display: inline-block;

	width: 320px;
	max-width: 100%;

	height: 54px;

	border: 0;
	border-radius: var(--radius);

	outline: none;
	background: transparent;

	cursor: pointer;

	/* Dùng phông của theme thay vì Arial cứng */
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;

	letter-spacing: .2px;

	text-decoration: none;
	color: inherit;

	box-sizing: border-box;

	-webkit-tap-highlight-color: transparent;
}

/* =========================
   BACKGROUND SHADOW
========================= */

.button-ui .bg {
	position: absolute;
	inset: 0;

	border-radius: inherit;

	filter: blur(1px);
}

.button-ui .bg::before,
.button-ui .bg::after {
	content: "";

	position: absolute;
	inset: 0;

	border-radius: inherit;

	background: var(--red-500);
}

.button-ui .bg::before {
	filter: blur(5px);

	transition:
		box-shadow .3s ease,
		opacity .3s ease;

	box-shadow:
		-6px 5px 0 rgba(238, 53, 35, .38),
		-12px 10px 0 rgba(238, 53, 35, .25),
		-18px 15px 5px rgba(238, 53, 35, .16),
		-25px 20px 12px rgba(238, 53, 35, .08);
}

/* =========================
   WRAP
========================= */

.button-ui .wrap {
	position: relative;

	width: 100%;
	height: 100%;

	padding: 3px;

	box-sizing: border-box;

	border-radius: inherit;

	overflow: hidden;

	/* Bóng 3D nhẹ, không dịch quá xa để mobile không bị tràn */
	transform: translate(5px, -5px);

	background: linear-gradient(
		180deg,
		var(--red-100) 0%,
		var(--red-400) 100%
	);

	transition:
		transform .3s ease,
		filter .3s ease;
}

/* =========================
   CONTENT
========================= */

.button-ui .content {
	position: relative;
	z-index: 1;

	pointer-events: none;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	box-sizing: border-box;

	gap: 15px;

	padding: 0 28px;

	border-radius: inherit;

	font-weight: 700;

	background: linear-gradient(
		180deg,
		#ff6557 0%,
		#ee3523 52%,
		#dc2919 100%
	);

	box-shadow:
		inset 0 8px 10px -7px rgba(255, 255, 255, .55),
		inset 0 -5px 10px rgba(120, 15, 5, .25);

	transition:
		filter .3s ease,
		box-shadow .3s ease;
}

/* Ánh sáng trên bề mặt */
.button-ui .content::before {
	content: "";

	position: absolute;

	left: 12%;
	right: 12%;
	top: 8%;

	height: 40%;

	border-radius: 999px;

	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, .28),
		rgba(255, 255, 255, 0)
	);

	filter: blur(3px);

	opacity: .8;
}

/* =========================
   TEXT
========================= */

.button-ui .char {
	position: relative;
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;

	white-space: nowrap;

	line-height: 1;
}

.button-ui .char span {
	position: relative;

	display: block;

	color: transparent;
}

.button-ui .char.state-1 span {
	animation:
		charAppear 1.2s ease backwards
		calc(var(--i) * .03s);
}

.button-ui .char.state-1 span::before,
.button-ui .char span::after {
	content: attr(data-label);

	position: absolute;
	left: 0;

	color: var(--white);

	text-shadow: 0 1px 2px rgba(120, 15, 5, .45);
}

.button-ui .char span::before {
	opacity: 0;

	transform: translateY(-100%);
}

/*
 * Khoảng cách giữa các từ.
 * Bản gốc dùng :nth-child(2)/(5)/(9) — chỉ đúng với đúng câu
 * "TƯ VẤN MIỄN PHÍ". Ở đây PHP sinh hẳn một <span class="space">
 * cho mỗi dấu cách nên đổi chữ gì cũng canh đúng.
 */
.button-ui .char .space {
	flex: 0 0 7px;
	width: 7px;
}

/* =========================
   ARROW
========================= */

.button-ui .icon {
	position: relative;

	z-index: 20;

	flex: 0 0 auto;
}

.button-ui .icon div,
.button-ui .icon div::before,
.button-ui .icon div::after {
	height: 3px;

	border-radius: 20px;

	background-color: var(--white);
}

.button-ui .icon div {
	position: relative;

	width: 25px;

	background: linear-gradient(
		to bottom,
		#fff,
		var(--red-100)
	);

	box-shadow: -2px 2px 5px rgba(120, 15, 5, .35);

	animation: swingArrow 1s ease-in-out infinite;
}

.button-ui .icon div::before,
.button-ui .icon div::after {
	content: "";

	position: absolute;

	right: 0;

	width: 13px;

	transform-origin: center right;
}

.button-ui .icon div::before {
	top: 1px;

	transform: rotate(44deg);

	animation: rotateArrowLine 1s linear infinite;
}

.button-ui .icon div::after {
	bottom: 1px;

	transform: rotate(316deg);

	animation: rotateArrowLine2 1s linear infinite;
}

/* =========================
   OUTLINE SÁNG
========================= */

.button-ui .outline {
	position: absolute;
	inset: 0;

	overflow: hidden;

	opacity: 1;

	border-radius: inherit;

	pointer-events: none;
}

.button-ui .outline::before {
	content: "";

	position: absolute;

	width: 100px;
	height: 400px;

	left: 50%;
	top: 50%;

	transform-origin: center;

	margin-left: -50px;
	margin-top: -200px;

	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(255, 255, 255, .95) 50%,
		transparent 100%
	);

	animation: spin 3s linear infinite;
}

/* =========================
   PATH
========================= */

.button-ui .path {
	position: absolute;

	z-index: 12;

	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;

	pointer-events: none;

	stroke-dasharray: 150 480;
	stroke-dashoffset: 150;
}

/* =========================
   SPLASH
========================= */

.button-ui .splash {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 420px;
	height: 220px;

	transform: translate(-50%, -50%);

	pointer-events: none;

	stroke-dasharray: 60 60;
	stroke-dashoffset: 60;

	stroke: var(--red-300);
}

/* =========================
   HOVER
========================= */

.button-ui:hover .wrap {
	transform: translate(7px, -7px);
}

.button-ui:hover .content {
	filter: brightness(1.08);

	box-shadow:
		inset 0 8px 11px -7px rgba(255, 255, 255, .65),
		inset 0 -5px 10px rgba(120, 15, 5, .25);
}

/* =========================
   ACTIVE
========================= */

.button-ui:active .wrap {
	transform: translate(2px, -2px);
}

.button-ui:active .content {
	filter: brightness(.96);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

	.button-ui {
		/* Không dùng 100vw sát mép; mobile sẽ co tự động */
		width: min(310px, calc(100vw - 40px));

		height: 62px;

		font-size: 16px;
	}

	.button-ui .wrap {
		transform: translate(4px, -4px);
	}

	.button-ui .content {
		gap: 11px;

		padding: 0 20px;
	}

	.button-ui .char .space {
		flex-basis: 5px;
		width: 5px;
	}

	.button-ui .icon div {
		width: 21px;
	}

	.button-ui .icon div::before,
	.button-ui .icon div::after {
		width: 11px;
	}

	/* Giảm bóng trên mobile để nút không có cảm giác lệch khỏi container */
	.button-ui .bg::before {
		box-shadow:
			-4px 4px 0 rgba(238, 53, 35, .3),
			-8px 8px 0 rgba(238, 53, 35, .18),
			-12px 12px 8px rgba(238, 53, 35, .1);
	}
}

/* =========================
   MOBILE NHỎ
========================= */

@media (max-width: 480px) {

	.button-ui {
		width: 64vw;
		height: 48px;
		font-size: 14px;
	}

	.button-ui .content {
		gap: 8px;
		padding: 0 10px;
	}

	.button-ui .char .space {
		flex-basis: 4px;
		width: 4px;
	}

	.button-ui .icon div {
		width: 18px;
	}

	.button-ui .icon div::before,
	.button-ui .icon div::after {
		width: 9px;
	}
}

/* =========================
   KEYFRAMES
========================= */

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes charAppear {
	0% {
		transform: translateY(50%);
		opacity: 0;
		filter: blur(15px);
	}

	50% {
		transform: translateY(-10%);
		opacity: 1;
		filter: blur(0);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes swingArrow {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}
}

@keyframes rotateArrowLine {
	50% {
		transform: rotate(30deg);
	}

	80% {
		transform: rotate(55deg);
	}
}

@keyframes rotateArrowLine2 {
	50% {
		transform: rotate(330deg);
	}

	80% {
		transform: rotate(300deg);
	}
}

/* =========================
   GIẢM CHUYỂN ĐỘNG
========================= */

@media (prefers-reduced-motion: reduce) {

	.button-ui .char.state-1 span,
	.button-ui .icon div,
	.button-ui .icon div::before,
	.button-ui .icon div::after,
	.button-ui .outline::before {
		animation: none;
	}

	.button-ui .wrap,
	.button-ui .content,
	.button-ui .bg::before {
		transition: none;
	}
}