:root {
	--root-font-size: 1vw;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	/* Ẩn hiệu ứng trên trình duyệt WebKit (Chrome, Safari) */
	-webkit-touch-callout: none;
	/* Vô hiệu menu chọn văn bản trên iOS */
	font-family: "Open Sans", sans-serif;
	border: 0;
	outline: 0;
}

html {
	font-size: var(--root-font-size);
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}

html::-webkit-scrollbar {
	display: none;
}


.container {
	max-width: 75rem;
	margin-inline: auto;
}

@media screen and (max-width: 639.98px) {
	:root {
		--root-font-size: 4.267vw;
	}

	.container {
		max-width: 100%;
		padding-inline: 1.25rem;
	}
}

@media screen and (min-width: 1920px) {
	:root {
		--root-font-size: 17px;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
}

section {
	position: relative;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

input[type="checkbox"] {
	transform: scale(1, 1);
}

.scroll-bar-hide::-webkit-scrollbar {
	display: none;
}

.no-scroll {
	overflow: hidden;
}

.loading>* {
	position: relative;
	border-radius: unset !important;
}

.loading>*::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #dddbdd;
	content: "";
	z-index: 10;
	cursor: progress;
}

.loading>*::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.2) 20%,
			rgba(255, 255, 255, 0.5) 60%,
			rgba(255, 255, 255, 0) 100%);
	border-radius: 0.75rem;
	animation: shimmer 5s infinite;
	content: "";
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* Button chung */
.compound-avian-button {
	position: relative;
	overflow: hidden;
	border-radius: 0.25rem;
	background: #630f3f;
	padding: 0 0.5rem;
	min-width: 8.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.625rem;
	cursor: pointer;

}

.compound-avian-button.compound-avian-button--md {
	height: 2.625rem;
}

.compound-avian-button.compound-avian-button--lg {
	height: 3.125rem;
}

.compound-avian-button::before {
	content: "";
	position: absolute;
	top: 0.5625rem;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/wp-content/uploads/2026/01/icon-trong-dong.png");
	pointer-events: none;
	z-index: 1;
}

.compound-avian-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(45deg, #f6ec51 -3.88%, #630f3f 27.57%, #630f3f 70.42%, #f6ec51 102.57%);
	opacity: 0;
	z-index: 0;
}

.compound-avian-button__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;

}

.compound-avian-button__content-text {
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	text-transform: uppercase;
	flex-shrink: 0;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both;
}

.compound-avian-button__content-icon {
	width: 1.125rem;
	height: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 0.75rem;
}

@media screen and (min-width: 1024px) {

	.compound-avian-button::after,
	.compound-avian-button::before {
		transition: all 0.8s cubic-bezier(0.48, 0, 0, 1.01);
	}

	.compound-avian-button:hover::after {
		opacity: 1;
	}

	.compound-avian-button:hover::before {
		rotate: 45deg;
	}
}

@media screen and (max-width: 639.98px) {
	.compound-avian-button {
		padding: 0 1.125rem;
		border-radius: 0.125rem;
	}

	.compound-avian-button.compound-avian-button--lg {
		height: 2.375rem;
	}

	.compound-avian-button::before {
		width: 8.883rem;
		height: 8.883rem;
	}

	.compound-avian-button__content-text {
		text-align: center;
		font-size: 0.75rem;
		line-height: 130%;
	}
}


@keyframes up-down {
	0% {
		transform: translateY(-1px);
	}

	10% {
		transform: translateY(-4px);
	}

	20% {
		transform: translateY(-1px);
	}

	30% {
		transform: translateY(-2px);
	}

	40% {
		transform: translateY(-1px);
	}

	100% {
		transform: translateY(-1px);
	}
}

@keyframes shine-x {
	0% {
		transform: translate(-100%);
	}

	100% {
		transform: translate(100%);
	}
}

.icon-location {
	position: relative;
	width: 0.9375rem;
	height: 1.125rem;
}

.icon-location-top,
.icon-location-bottom {
	position: absolute;
	left: 0;
	width: 100%;
}

.icon-location-top {
	top: 0;
}

.icon-location-bottom {
	bottom: 0;
}

.animate-shine-x {
	animation: 1s linear infinite shine-x;
}

.animate-up-down {
	animation: 3s cubic-bezier(0.74, -0.01, 0.27, 0.98) infinite up-down;
}