/* 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 .7s linear infinite;
	animation:toasang .7s linear infinite
}

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

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

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

	100% {
		-webkit-box-shadow: 0 0 0 3em rgba(255, 255, 255, 0.2), 0 0 0 5em rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 3em rgba(255, 255, 255, 0.2), 0 0 0 5em 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%
	}
}

/* Lên xuống liên tục */
.lenxuong {
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-name:lenxuong
}
.lenxuong2s {
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-name:lenxuong
}

@keyframes lenxuong {
	0% {
		transform:translateY(0);
	}

	50% {
		transform:translateY(-10%);
	}

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

/* Sang trái sang phải liên tục */
.traiphai {
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-name:traiphai
}
.traiphai2s {
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-name:traiphai
}

@keyframes traiphai {
	0% {
		transform:translateX(0);
	}

	50% {
		transform:translateX(-10%);
	}

	100% {
		transform:translateX(0);
	}
}
.phaitrai {
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-name:phaitrai
}
.phaitrai2s {
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-name:phaitrai
}

@keyframes phaitrai {
	0% {
		transform:translateX(0);
	}

	50% {
		transform:translateX(10%);
	}

	100% {
		transform:translateX(0);
	}
}

/* Lên xuống liên tục */
.tonho {
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-name:tonho
}
.tonho2s {
	animation-duration:2s;
	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 2s linear infinite;
	-moz-animation:xoay 2s linear infinite;
	-ms-animation:xoay 2s linear infinite;
	-o-animation:xoay 2s linear infinite;
	animation:xoay 2s 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
}


@-webkit-keyframes anhien {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes anhien {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

/* Layer chữ + ánh sáng */
.chutoasang {
	position: absolute;
	inset: 0;

	/* ánh sáng chạy */
	background: linear-gradient(
		120deg,
		transparent 30%,
		rgba(255,255,255,0.9) 50%,
		transparent 70%
		);
	background-size: 200% 100%;
	animation: chutoasang 3s linear infinite;

	/* MASK bằng ảnh chữ PNG, thay link ảnh text vào đây */
	-webkit-mask-image: url("../upload/1.png");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: url("../upload/1.png");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

@keyframes chutoasang {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}


/* 
<div class="heading baytungchubox">
  <h2 class="baytungchu">Tựa sơn – Hướng thủy <br>Vị thế đắc địa hiếm có</h2>
</div>

<script type=text/javascript>
	window.addEventListener('DOMContentLoaded', function() {
		(function($) {
			function anhbayvaoOnScroll() {
				$('.anhbayvao').each(function () {
					const $el = $(this);
					if ($el.hasClass('anhbayvao-active')) return;

					const elementTop = $el.offset().top;
					const windowBottom = $(window).scrollTop() + $(window).height() * 0.85;

					if (windowBottom > elementTop) {
						$el.addClass('anhbayvao-active');
					}
				});
			}

			$(window).on('scroll', anhbayvaoOnScroll);
			anhbayvaoOnScroll();


			function splitTextToWords(element) {
				const nodes = element.contents();

				nodes.each(function () {
			        // Nếu là text node
			        if (this.nodeType === 3) {
			        	const text = this.nodeValue;
			        	if (!text.trim()) return;

			        	const words = text.split(/(\s+)/);

			        	const fragment = document.createDocumentFragment();

			        	words.forEach(word => {
			        		if (word.trim() === '') {
			        			fragment.appendChild(document.createTextNode(word));
			        		} else {
			        			const span = document.createElement('span');
			        			span.className = 'word';
			        			span.textContent = word;
			        			fragment.appendChild(span);
			        		}
			        	});

			        	$(this).replaceWith(fragment);
			        }

			        // Nếu là element node → đệ quy tiếp
			        else if (this.nodeType === 1) {
			        	splitTextToWords($(this));
			        }
			      });
			}

			$('.baytungchu').each(function () {
				splitTextToWords($(this));
			});

			function animateWords() {
				$('.baytungchubox').each(function () {
					const $section = $(this);

					if ($section.hasClass('animated')) return;

					const triggerPoint =
					$(window).scrollTop() + $(window).height() * 0.8;

					if (triggerPoint > $section.offset().top) {
						$section.addClass('animated');

						$section.find('.word').each(function (i) {
							const $word = $(this);
							setTimeout(() => {
								$word.addClass('showx');
							}, i * 100);
						});
					}
				});
			}

			$(window).on('scroll', animateWords);
			animateWords();
});
</script>

*/
.baytungchu,.heading h2.baytungchu {
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
	/* text-align: left; */
	/* line-height: 1.2; */
}

.baytungchu .word {
	display: inline-block;
	white-space: pre;
	opacity: 0;
	transform: scale(2);
	filter: blur(10px);
	transition:
	transform 0.8s ease,
	opacity 0.8s ease,
	filter 0.8s ease;
	/* margin-right: -0.15em; */
}

.baytungchu .word.showx {
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
}
.anhbayvao {
	position: relative;
	overflow: hidden;
	visibility: hidden;
	transform: translateX(-100%);
}

.anhbayvao img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: left center;
	transform: translateX(100%) scale(1.3);
}

.anhbayvao.anhbayvao-active {
	visibility: visible;
	transform: translateX(0);
	transition: transform 1.2s cubic-bezier(.77,0,.175,1);
}

.anhbayvao.anhbayvao-active img {
	transform: translateX(0) scale(1);
	transition: transform 1.2s cubic-bezier(.77,0,.175,1);
}