/* HaLim "Đang thịnh hành" trending slider */
.halim-trending-slider {
	/* 12px between cards (10px on phones); cards fill the row exactly. */
	--ht-gap: 12px;
	--ht-per-view: 5;
	--ht-card: calc((100% - (var(--ht-per-view) - 1) * var(--ht-gap)) / var(--ht-per-view));
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 15px;
	padding: 0;
}
/* Title uses the theme's .section-bar/.section-title like every other widget */
.halim-trending-slider .section-title .halim-trending-icon {
	display: inline-block;
	color: #ff8a00;
	-webkit-text-fill-color: #ff8a00;
	animation: halim-trending-pulse 1.5s infinite;
}
@keyframes halim-trending-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

.halim-trending-container {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.halim-trending-track {
	display: flex;
	gap: var(--ht-gap);
	width: 100%;
	padding-bottom: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
}
.halim-trending-track::-webkit-scrollbar { display: none; }
.halim-trending-track.grabbing {
	cursor: grabbing !important;
	scroll-behavior: auto;
	scroll-snap-type: none;
}
.halim-trending-track.grabbing .halim-trending-link { pointer-events: none; }

/* Prev / next: hidden off-edge, slide in when hovering the slider */
.halim-trending-nav-button {
	position: absolute;
	top: calc(50% - 50px - .75rem);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100px;
	padding: 0;
	border: 0;
	color: #6c757d;
	font-size: 22px;
	background: #1a1d24;
	opacity: 0;
	cursor: pointer;
	transition: all .3s ease;
}
.halim-trending-prev-button { left: -40px; border-radius: 0 4px 4px 0; }
.halim-trending-next-button { right: -40px; border-radius: 4px 0 0 4px; }
.halim-trending-container:hover .halim-trending-nav-button { opacity: .85; }
.halim-trending-container:hover .halim-trending-prev-button { left: 0; }
.halim-trending-container:hover .halim-trending-next-button { right: 0; }
.halim-trending-nav-button:hover,
.halim-trending-nav-button:focus-visible { color: #fff; opacity: 1 !important; outline: none; }
.halim-trending-nav-button[disabled] { opacity: 0 !important; pointer-events: none; }

.halim-trending-card {
	position: relative;
	flex: 0 0 auto;
	width: var(--ht-card);
	scroll-snap-align: start;
}
.halim-trending-link,
.halim-trending-link:hover,
.halim-trending-link:focus { display: block; color: inherit; text-decoration: none; }

.halim-trending-poster-container {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #2a2b31;
}
/* Slanted top edge: odd cards rise to the left, even cards to the right */
.halim-trending-clip-path-odd {
	-webkit-clip-path: polygon(94.239% 100%,5.761% 100%,4.826% 99.95%,3.94% 99.803%,3.113% 99.569%,2.358% 99.256%,1.687% 98.87%,1.111% 98.421%,.643% 97.915%,.294% 97.362%,.075% 96.768%,0 96.142%,0 3.858%,.087% 3.185%,.338% 2.552%,.737% 1.968%,1.269% 1.442%,1.92% .984%,2.672% .602%,3.512% .306%,4.423% .105%,5.391% .008%,6.4% .024%,94.879% 6.625%,95.731% 6.732%,96.532% 6.919%,97.272% 7.178%,97.942% 7.503%,98.533% 7.887%,99.038% 8.323%,99.445% 8.805%,99.747% 9.326%,99.935% 9.88%,100% 10.459%,100% 96.142%,99.925% 96.768%,99.706% 97.362%,99.357% 97.915%,98.889% 98.421%,98.313% 98.87%,97.642% 99.256%,96.887% 99.569%,96.06% 99.803%,95.174% 99.95%);
	clip-path: polygon(94.239% 100%,5.761% 100%,4.826% 99.95%,3.94% 99.803%,3.113% 99.569%,2.358% 99.256%,1.687% 98.87%,1.111% 98.421%,.643% 97.915%,.294% 97.362%,.075% 96.768%,0 96.142%,0 3.858%,.087% 3.185%,.338% 2.552%,.737% 1.968%,1.269% 1.442%,1.92% .984%,2.672% .602%,3.512% .306%,4.423% .105%,5.391% .008%,6.4% .024%,94.879% 6.625%,95.731% 6.732%,96.532% 6.919%,97.272% 7.178%,97.942% 7.503%,98.533% 7.887%,99.038% 8.323%,99.445% 8.805%,99.747% 9.326%,99.935% 9.88%,100% 10.459%,100% 96.142%,99.925% 96.768%,99.706% 97.362%,99.357% 97.915%,98.889% 98.421%,98.313% 98.87%,97.642% 99.256%,96.887% 99.569%,96.06% 99.803%,95.174% 99.95%);
}
.halim-trending-clip-path-even {
	-webkit-clip-path: polygon(5.761% 100%,94.239% 100%,95.174% 99.95%,96.06% 99.803%,96.887% 99.569%,97.642% 99.256%,98.313% 98.87%,98.889% 98.421%,99.357% 97.915%,99.706% 97.362%,99.925% 96.768%,100% 96.142%,100% 3.858%,99.913% 3.185%,99.662% 2.552%,99.263% 1.968%,98.731% 1.442%,98.08% .984%,97.328% .602%,96.488% .306%,95.577% .105%,94.609% .008%,93.6% .024%,5.121% 6.625%,4.269% 6.732%,3.468% 6.919%,2.728% 7.178%,2.058% 7.503%,1.467% 7.887%,.962% 8.323%,.555% 8.805%,.253% 9.326%,.065% 9.88%,0 10.459%,0 96.142%,.075% 96.768%,.294% 97.362%,.643% 97.915%,1.111% 98.421%,1.687% 98.87%,2.358% 99.256%,3.113% 99.569%,3.94% 99.803%,4.826% 99.95%);
	clip-path: polygon(5.761% 100%,94.239% 100%,95.174% 99.95%,96.06% 99.803%,96.887% 99.569%,97.642% 99.256%,98.313% 98.87%,98.889% 98.421%,99.357% 97.915%,99.706% 97.362%,99.925% 96.768%,100% 96.142%,100% 3.858%,99.913% 3.185%,99.662% 2.552%,99.263% 1.968%,98.731% 1.442%,98.08% .984%,97.328% .602%,96.488% .306%,95.577% .105%,94.609% .008%,93.6% .024%,5.121% 6.625%,4.269% 6.732%,3.468% 6.919%,2.728% 7.178%,2.058% 7.503%,1.467% 7.887%,.962% 8.323%,.555% 8.805%,.253% 9.326%,.065% 9.88%,0 10.459%,0 96.142%,.075% 96.768%,.294% 97.362%,.643% 97.915%,1.111% 98.421%,1.687% 98.87%,2.358% 99.256%,3.113% 99.569%,3.94% 99.803%,4.826% 99.95%);
}

/* Loading spinner until the poster has decoded */
.halim-trending-poster-container::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid rgba(255, 255, 255, .12);
	border-top-color: rgba(255, 255, 255, .62);
	border-radius: 50%;
	pointer-events: none;
	animation: halim-trending-spin .65s linear infinite;
	transition: opacity .35s ease;
}
.halim-trending-poster-loaded::after { opacity: 0; visibility: hidden; animation: none; }
@keyframes halim-trending-spin { to { transform: rotate(1turn); } }

.halim-trending-poster-image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease, opacity .35s ease;
}
.halim-trending-poster-mask {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: rgba(255, 255, 255, .05);
	transition: background-color .3s ease;
}
.halim-trending-link:hover .halim-trending-poster-mask,
.halim-trending-link:focus-visible .halim-trending-poster-mask { background-color: rgba(255, 193, 7, .1); }
.halim-trending-link:hover .halim-trending-poster-image,
.halim-trending-link:focus-visible .halim-trending-poster-image { transform: scale(1.05); }

.halim-trending-rating {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 20px;
	background: rgba(0, 0, 0, .7);
}
.halim-trending-rating-value {
	color: #ffc107;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.halim-trending-info {
	display: flex;
	align-items: center;
	height: 70px;
	margin-top: 1rem;
	overflow: hidden;
}
.halim-trending-number {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 60px;
	margin-right: .5rem;
	font-size: 4.6rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	background: linear-gradient(39deg, #fecf59, #fff1cc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.halim-trending-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.halim-trending-title-text,
.halim-trending-original-title {
	display: block;
	margin: 0 0 .25rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.halim-trending-title-text {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	transition: color .2s ease;
}
.halim-trending-link:hover .halim-trending-title-text { color: #ffc107; }
.halim-trending-original-title {
	color: #9ca3af;
	font-size: 1.1rem;
	line-height: 1.4;
}

/* Light mode */

body.halim-light-mode .halim-trending-title-text { color: #1f2430; }
body.halim-light-mode .halim-trending-original-title { color: #6b7280; }
body.halim-light-mode .halim-trending-number { background: linear-gradient(39deg, #f0a500, #ffcf59); -webkit-background-clip: text; background-clip: text; }
body.halim-light-mode .halim-trending-nav-button { background: #fff; color: #555; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

@media (max-width: 999px) {
	.halim-trending-slider { --ht-per-view: 4; }
}
@media (max-width: 768px) {
	.halim-trending-slider { --ht-per-view: 3; --ht-gap: 10px; }

	.halim-trending-nav-button { display: none; }
	.halim-trending-number { width: 45px; }
	.halim-trending-title-text { font-size: 1.3rem; }
	.halim-trending-info { height: 60px; }
}
@media (max-width: 480px) {
	.halim-trending-slider { --ht-per-view: 2; }
	.halim-trending-number { width: 38px; font-size: 3.8rem; }
	.halim-trending-title-text { font-size: 1.25rem; }
	.halim-trending-info { height: 50px; margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.halim-trending-slider .halim-trending-icon,
	.halim-trending-poster-container::after { animation: none; }
	.halim-trending-track { scroll-behavior: auto; }
}

/* Prev / next buttons hidden: the track is scrolled by dragging (mouse) or swiping (touch) */
.halim-trending-slider .halim-trending-nav-button { display: none !important; }