/*
CTC Separate Stylesheet
Updated: 2026-06-11 09:22:00
*/

.dn-grid-item {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
}

.dn-grid-item__title,
.dn-grid-item__content {
    transition: opacity .3s ease;
}

/* Mặc định */
.dn-grid-item__content {
    display: none;
}

/* Hover */
.dn-grid-item:hover {
    background: #000;
}

.dn-grid-item:hover .dn-grid-item__title {
    display: block;
}

/* Active (click) */
.dn-grid-item.active:before {
	background-color: var(--e-global-color-text) !important;
    opacity: 1;
}

.dn-grid-item.active .dn-grid-item__title {
    display: none;
}

.dn-grid-item.active .dn-grid-item__content {
    display: block;
}

.scroll-horizontal {
                overflow: hidden;
            }

/* Bọc bên ngoài gallery nếu cần (đảm bảo overflow) */
.scroll-horizontal .elementor-gallery__container {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	/*   width: 100%; */
	animation: scrollGallery 10s linear infinite;
}

/* Mỗi item hiển thị ngang */
.scroll-horizontal .elementor-gallery-item {
	flex: 0 0 auto;
	width: calc(100vw / 3);
	/* vẫn 5 cột hiển thị mỗi lượt */
}

/* Giữ height theo aspect-ratio của Elementor */
.scroll-horizontal .elementor-gallery-item__image {
	background-size: cover;
	background-position: center;
}

/* Keyframes để trượt ngang */
@keyframes scrollGallery {
	from {
		transform: translateX(0);
	}

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

@media screen and (max-width: 768px) {
	.scroll-horizontal .elementor-gallery-item {
		width: calc(100vw / 3);
	}
}