/*
 * Hiệu ứng tải trang (25/09/2026): ảnh hiện dần, khối trượt lên khi cuộn tới, thanh tiến trình khi chuyển trang.
 * Mọi hiệu ứng chỉ bật khi JS đã gắn lớp (js/hieu-ung.js) và máy không bật "giảm chuyển động" - JS lỗi thì nội dung
 * vẫn hiện bình thường.
 */

/* 1. Khối trượt lên + hiện dần khi cuộn tới (chỉ khối nằm dưới màn hình đầu tiên). */
.ccn-hu-an {
	opacity: 0;
	transform: translateY(18px);
}
.ccn-hu-hien {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease-out, transform .5s ease-out;
	transition-delay: var(--ccn-tre, 0ms);
}

/* 2. Ảnh sản phẩm hiện dần; khung ảnh nhấp nháy xám nhạt trong lúc chờ. */
.ccn-the .p-img.ccn-hu-cho {
	background: linear-gradient(100deg, #f1f2f4 30%, #f8f9fa 50%, #f1f2f4 70%) 0 0 / 200% 100%;
	animation: ccn-hu-nhap 1.2s linear infinite;
}
.ccn-the .p-img.ccn-hu-cho img {
	opacity: 0;
}
.ccn-the .p-img img {
	transition: opacity .35s ease-out;
}
@keyframes ccn-hu-nhap {
	to { background-position: -200% 0; }
}

/* 3. Thanh tiến trình mảnh trên đầu trang khi bấm sang trang khác. */
#ccn-hu-thanh {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483600;
	width: 0;
	height: 3px;
	background: #e30019;
	box-shadow: 0 0 6px rgba(227, 0, 25, .5);
	opacity: 0;
	pointer-events: none;
}
#ccn-hu-thanh.chay {
	opacity: 1;
	width: 85%;
	transition: width 8s cubic-bezier(.08, .8, .2, 1), opacity .2s;
}

@media (prefers-reduced-motion: reduce) {
	.ccn-hu-an { opacity: 1; transform: none; }
	.ccn-the .p-img.ccn-hu-cho { animation: none; }
	.ccn-the .p-img.ccn-hu-cho img { opacity: 1; }
	#ccn-hu-thanh { display: none; }
}