/* Slider "Bài viết liên quan": cuộn ngang bằng scroll-snap, JS chỉ thêm nút/chấm/tự chạy. */
.plg-related-slider { position: relative; }

.plg-slider-viewport { position: relative; }

.plg-related-slider .plg-related-grid.plg-slider-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	position: relative;
	padding: 4px 0 8px;
	align-items: stretch;
}

.plg-related-slider .plg-slider-track::-webkit-scrollbar { display: none; }

.plg-related-slider .plg-related-item {
	flex: 0 0 calc((100% - (var(--plg-n, 3) - 1) * 16px) / var(--plg-n, 3));
	scroll-snap-align: start;
	box-sizing: border-box;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hé lộ một phần hai bên: slide giữa đầy đủ, slide kề bên bị cắt. */
.plg-related-slider.plg-slider-peek .plg-related-item {
	flex-basis: calc((100% - (var(--plg-np, 2.4) - 1) * 16px) / var(--plg-np, 2.4));
	scroll-snap-align: center;
	opacity: 0.75;
	transform: scale(0.96);
}

.plg-related-slider.plg-slider-peek .plg-related-item.is-active {
	opacity: 1;
	transform: scale(1);
}

/* Cho phép slide đầu/cuối cũng canh giữa được. */
.plg-related-slider.plg-slider-peek .plg-slider-track::before,
.plg-related-slider.plg-slider-peek .plg-slider-track::after {
	content: "";
	flex: 0 0 max(0px, calc((100% - (100% - (var(--plg-np, 2.4) - 1) * 16px) / var(--plg-np, 2.4)) / 2 - 16px));
}

.plg-related-slider .plg-related-thumb img { width: 100%; height: auto; }

/* Hàng điều khiển nằm DƯỚI slider: [‹]  ● ● ● ● ●  [›] */
.plg-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.plg-slider-arrow {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--plg-accent, #e53935);
	color: #fff;
	font-size: 20px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
}

.plg-slider-arrow:hover { filter: brightness(1.1); }
.plg-slider-arrow[disabled] { opacity: 0.35; cursor: default; }

.plg-slider-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.plg-slider-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid var(--plg-accent, #e53935);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.plg-slider-dot.is-active { background: var(--plg-accent, #e53935); }

.plg-related-slider.is-static .plg-slider-controls { display: none; }

@media (prefers-reduced-motion: reduce) {
	.plg-related-slider .plg-slider-track { scroll-behavior: auto; }
	.plg-related-slider .plg-related-item { transition: none; }
}