/* Hiệu ứng thay đổi nền liên tục */
@-webkit-keyframes laplanh {
	0% {
		background-position: -4rem top
	}

	70% {
		background-position: 12.5rem top
	}

	100% {
		background-position: 12.5rem top
	}
}

.laplanh {
	display: inline-block;
	color: #fff;
	background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #fff), to(#acacac));
	background-position: -4rem top;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation-name: laplanh;
	-webkit-animation-duration: 2.2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-background-size: 4rem 100%
}

/* Nút play tỏa sáng */
.toasang {
	width: 80px;
	height: 80px;
	display: block;
	border-radius: 17px;
	background: #b81c3a;
	/* background-image: url('./upload/18x.png'); */
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: auto;
	-webkit-animation: toasang 1s linear infinite;
	animation: toasang 1s linear infinite
}

@-webkit-keyframes toasang {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 2em rgba(255, 255, 255, 0.2);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 2em rgba(255, 255, 255, 0.2);
	}

	100% {
		-webkit-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0.2), 0 0 0 3em rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 2em rgba(255, 255, 255, 0.2), 0 0 0 3em rgba(255, 255, 255, 0);
	}
}

@keyframes toasang {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 2em rgba(255, 255, 255, 0.2);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 2em rgba(255, 255, 255, 0.2);
	}

	100% {
		-webkit-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0.2), 0 0 0 3em rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 2em rgba(255, 255, 255, 0.2), 0 0 0 3em rgba(255, 255, 255, 0);
	}
}

.shine .img__,
.shine .img_ {
	position: relative;
	z-index: 0;
	overflow: hidden
}

.shine .img__::before,
.shine .img_::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, #fff0 0%, #ffffff4d 100%);
	background: linear-gradient(to right, #fff0 0%, #ffffff4d 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg)
}

.shine .img__:hover::before,
.shine .img_:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s
}

@-webkit-keyframes shine {
	100% {
		left: 125%
	}
}

@keyframes shine {
	100% {
		left: 125%
	}
}

/* To nhỏ liên tục */
.tonho {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: tonho
}

@keyframes tonho {
	0% {
		transform: scale(1)
	}

	25% {
		transform: scale(1.02)
	}

	50% {
		transform: scale(1)
	}

	75% {
		transform: scale(1.02)
	}

	100% {
		transform: scale(1)
	}
}

/* Xoay vô hạn */
@-webkit-keyframes xoay {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes xoay {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

.xoay {
	-webkit-animation: xoay 40s linear infinite;
	-moz-animation: xoay 40s linear infinite;
	-ms-animation: xoay 40s linear infinite;
	-o-animation: xoay 40s linear infinite;
	animation: xoay 40s linear infinite
}

/* Xoay vô hạn ngược lại */

@-webkit-keyframes xoaynguoc {
	from {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}

	to {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes xoaynguoc {
	from {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}

	to {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

.xoaynguoc {
	-webkit-animation: xoaynguoc 2s linear infinite;
	-moz-animation: xoaynguoc 2s linear infinite;
	-ms-animation: xoaynguoc 2s linear infinite;
	-o-animation: xoaynguoc 2s linear infinite;
	animation: xoaynguoc 2s linear infinite
}