/*
 * BLOCK 65 — Xu hướng (timeline)
 * Nội dung trái | ảnh phải — marker + hiệu ứng sao chổi hover
 */

.bs-listing.bs-listing-listing-block-65 {
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

.listing-block-65 {
	margin: 0 !important;
	padding: 0 !important;
}

.listing-block-65 .b65-timeline {
	position: relative;
	padding-left: var(--b65-timeline-pad, 28px);
}

.listing-block-65 .b65-timeline:not(.has-timeline) {
	padding-left: 0;
}

/* Kích thước marker theo kiểu */
.listing-block-65 .b65-marker-mode-dot {
	--b65-active-marker-size: var(--b65-dot-size, 9px);
}

.listing-block-65 .b65-marker-mode-number {
	--b65-active-marker-size: var(--b65-number-size, 28px);
}

.listing-block-65 .b65-marker-mode-icon,
.listing-block-65 .b65-marker-mode-icon_custom {
	--b65-active-marker-size: var(--b65-icon-size, 18px);
}

/* Đường kẻ dọc timeline */
.listing-block-65 .b65-timeline.has-timeline::before {
	content: '';
	position: absolute;
	top: 8px;
	left: var(--b65-line-left, 8px);
	width: 0;
	border-left: var(--b65-timeline-w, 1px) var(--b65-timeline-style, dashed) var(--b65-line-color, #1455a3);
	pointer-events: none;
}

.listing-block-65 .b65-timeline.has-timeline:not(.has-timeline-end)::before {
	bottom: 8px;
}

.listing-block-65 .b65-timeline.has-timeline.has-timeline-end::before {
	bottom: calc(var(--b65-end-h, 20px) + 1px);
}

.listing-block-65 .b65-item {
	position: relative;
	margin-bottom: var(--b65-row-gap, 25px);
	padding: 0;
	width: 100%;
	float: none !important;
	clear: both !important;
	overflow: visible;
	border-radius: 6px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.listing-block-65.b65-has-hover-lift .b65-item::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	transition: box-shadow 0.35s ease, background 0.35s ease, left 0.35s ease;
	z-index: 0;
	pointer-events: none;
}

.listing-block-65.b65-has-hover-lift .b65-item:hover::before {
	left: calc(-1 * var(--b65-hover-card-extend, 10px));
	background: var(--b65-hover-card-bg, #ffffff);
	box-shadow: var(--b65-hover-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.listing-block-65.b65-has-hover-lift .b65-item:hover {
	transform: translateY(var(--b65-hover-lift-y, -3px));
	box-shadow: none;
	z-index: 4;
}

.listing-block-65.b65-has-hover-lift .b65-item:hover .b65-item-body {
	padding-left: var(--b65-hover-card-pad-left, 16px);
}

.listing-block-65 .b65-item:last-child {
	margin-bottom: 0;
}

/* Marker — căn giữa trên trục timeline */
.listing-block-65 .b65-timeline.has-timeline .b65-marker {
	position: absolute;
	left: calc(
		var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px)
		+ (var(--b65-timeline-w, 1px) - var(--b65-active-marker-size, 9px)) / 2
	);
	width: var(--b65-active-marker-size, 9px);
	height: var(--b65-active-marker-size, 9px);
	box-sizing: border-box;
	z-index: 3;
	transform: translateY(-50%);
}

/* Căn marker: theo tiêu đề — giữa dòng tiêu đề đầu tiên */
.listing-block-65 .b65-item.b65-marker-align-title .b65-marker,
.listing-block-65 .b65-item.b65-marker-align-title .b65-comet-trail {
	top: calc(var(--b65-title-size, 18px) * 1.35 / 2);
}

/* Căn marker: theo dòng meta */
.listing-block-65 .b65-item.b65-marker-align-meta .b65-marker,
.listing-block-65 .b65-item.b65-marker-align-meta .b65-comet-trail {
	top: calc(
		var(--b65-title-size, 18px) * 1.35
		+ 6px
		+ var(--b65-meta-size, 13px) * 1.4 / 2
	);
}

/* Căn marker: giữa chiều cao item */
.listing-block-65 .b65-item.b65-marker-align-center .b65-marker,
.listing-block-65 .b65-item.b65-marker-align-center .b65-comet-trail {
	top: 50%;
}

/* Kiểu chấm tròn */
.listing-block-65 .b65-marker-style-dot {
	border-radius: 50%;
	background: var(--b65-marker-color, #1455a3);
}

/* Kiểu số thứ tự — vòng tròn đẹp, không méo */
.listing-block-65 .b65-marker-style-number {
	width: var(--b65-number-size, 28px);
	height: var(--b65-number-size, 28px);
	min-width: var(--b65-number-size, 28px);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(var(--b65-number-size, 28px) * 0.4);
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	letter-spacing: -0.02em;
	border: 2px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	padding: 0;
}

.listing-block-65 .b65-marker-mode-number .b65-marker-style-number {
	left: calc(
		var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px)
		+ (var(--b65-timeline-w, 1px) - var(--b65-number-size, 28px)) / 2
	);
}

/* Số 2 chữ số — hơi rộng nhưng vẫn tròn */
.listing-block-65 .b65-marker-style-number.b65-marker-wide {
	width: auto;
	min-width: var(--b65-number-size, 28px);
	padding: 0 6px;
	border-radius: 999px;
}

/* Kiểu biểu tượng — danh sách hoặc FA tùy chỉnh */
.listing-block-65 .b65-marker-style-icon,
.listing-block-65 .b65-marker-style-icon_custom {
	width: var(--b65-icon-size, 18px);
	height: var(--b65-icon-size, 18px);
	background: transparent !important;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--b65-marker-color, #1455a3);
}

.listing-block-65 .b65-marker-style-icon .bf-icon,
.listing-block-65 .b65-marker-style-icon .b65-marker-i,
.listing-block-65 .b65-marker-style-icon_custom .bf-icon,
.listing-block-65 .b65-marker-style-icon_custom .b65-marker-i,
.listing-block-65 .b65-marker-style-icon_custom i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--b65-icon-size, 18px);
	line-height: 1;
	color: inherit;
}

.listing-block-65 .b65-marker-style-icon .bf-icon img {
	max-width: var(--b65-icon-size, 18px);
	max-height: var(--b65-icon-size, 18px);
}

.listing-block-65 .b65-marker-mode-icon .b65-marker-style-icon,
.listing-block-65 .b65-marker-mode-icon_custom .b65-marker-style-icon,
.listing-block-65 .b65-marker-mode-icon_custom .b65-marker-style-icon_custom {
	left: calc(
		var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px)
		+ (var(--b65-timeline-w, 1px) - var(--b65-icon-size, 18px)) / 2
	);
}

/* Hiệu ứng sao chổi — vệt sáng (chấm / số) */
.listing-block-65 .b65-comet-trail {
	position: absolute;
	left: calc(
		var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px)
		+ var(--b65-active-marker-size, 9px) / 2
	);
	width: 0;
	height: var(--b65-comet-size, 3px);
	z-index: 8;
	pointer-events: none;
	transform: translateY(-50%);
	border-radius: var(--b65-comet-size, 3px);
	overflow: visible;
	--b65-comet-active: var(--b65-comet-color, var(--b65-comet-item-color, var(--b65-marker-color, #1455a3)));
}

.listing-block-65 .b65-comet-mode-line {
	height: var(--b65-comet-size, 3px);
	overflow: visible;
}

.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-line {
	animation: b65-comet-sweep var(--b65-comet-duration, 0.72s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item:hover .b65-comet-mode-line {
	animation: none;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item.b65-comet-active .b65-comet-mode-line {
	animation: b65-comet-sweep-pingpong calc(var(--b65-comet-duration, 0.72s) * 2) ease-in-out infinite;
}

.listing-block-65 .b65-comet-mode-line::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--b65-comet-active) 25%, transparent) 8%,
		var(--b65-line-color, #1455a3) 55%,
		#ffffff 92%,
		var(--b65-comet-active) 100%
	);
	box-shadow:
		0 0 8px 1px color-mix(in srgb, var(--b65-comet-active) 45%, transparent),
		0 0 16px 2px color-mix(in srgb, var(--b65-line-color, #1455a3) 25%, transparent);
}

.listing-block-65 .b65-comet-mode-line::after {
	content: '';
	position: absolute;
	right: -2px;
	top: 50%;
	width: calc(var(--b65-comet-size, 3px) + 4px);
	height: calc(var(--b65-comet-size, 3px) + 4px);
	margin-top: calc((var(--b65-comet-size, 3px) + 4px) / -2);
	border-radius: 50%;
	background: #ffffff;
	box-shadow:
		0 0 6px 2px var(--b65-comet-active),
		0 0 12px 4px color-mix(in srgb, var(--b65-line-color, #1455a3) 50%, transparent);
	opacity: 0;
}

.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-line::after {
	animation: b65-comet-head var(--b65-comet-duration, 0.72s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item:hover .b65-comet-mode-line::after {
	animation: none;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item.b65-comet-active .b65-comet-mode-line::after {
	animation: b65-comet-head-pingpong calc(var(--b65-comet-duration, 0.72s) * 2) ease-in-out infinite;
}

/* Hiệu ứng sao chổi — icon bay (kiểu marker = biểu tượng) */
.listing-block-65 .b65-comet-mode-icon {
	width: 100%;
	height: var(--b65-icon-size, 18px);
	left: calc(
		var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px)
		+ var(--b65-active-marker-size, 18px) / 2
	);
	background: transparent;
}

.listing-block-65 .b65-comet-mode-icon::before,
.listing-block-65 .b65-comet-mode-icon::after {
	display: none;
}

.listing-block-65 .b65-comet-fly {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) scaleX(1);
	opacity: 0;
	line-height: 1;
	color: var(--b65-comet-active);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--b65-comet-active) 55%, transparent));
}

.listing-block-65 .b65-comet-fly .bf-icon,
.listing-block-65 .b65-comet-fly .b65-comet-fly-i {
	font-size: var(--b65-icon-size, 18px);
	line-height: 1;
	color: inherit;
}

.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-icon .b65-comet-fly {
	animation: b65-icon-fly-once var(--b65-comet-duration, 0.72s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item:hover .b65-comet-mode-icon .b65-comet-fly {
	animation: none;
}

.listing-block-65 .b65-comet-repeat.b65-has-hover-comet .b65-item.b65-comet-active .b65-comet-mode-icon .b65-comet-fly {
	animation: b65-icon-fly-pingpong calc(var(--b65-comet-duration, 0.72s) * 2) ease-in-out infinite;
}

@keyframes b65-comet-sweep {
	0% {
		width: 0;
		opacity: 0;
	}
	10% {
		opacity: 0.95;
	}
	70% {
		opacity: 0.9;
	}
	100% {
		width: calc(100% - (var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px) + var(--b65-active-marker-size, 9px) / 2));
		opacity: 0;
	}
}

@keyframes b65-comet-head {
	0% {
		opacity: 0;
		right: 100%;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		right: -2px;
	}
}

@keyframes b65-comet-sweep-pingpong {
	0% {
		width: 0;
		opacity: 0;
	}
	8% {
		opacity: 0.95;
	}
	42% {
		width: calc(100% - (var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px) + var(--b65-active-marker-size, 9px) / 2));
		opacity: 0.92;
	}
	50% {
		width: calc(100% - (var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px) + var(--b65-active-marker-size, 9px) / 2));
		opacity: 0.92;
	}
	58% {
		opacity: 0.95;
	}
	92% {
		width: 0;
		opacity: 0.9;
	}
	100% {
		width: 0;
		opacity: 0;
	}
}

@keyframes b65-comet-head-pingpong {
	0% {
		opacity: 0;
		right: 100%;
	}
	8% {
		opacity: 1;
	}
	42% {
		opacity: 1;
		right: -2px;
	}
	50% {
		opacity: 1;
		right: -2px;
	}
	58% {
		opacity: 1;
	}
	92% {
		opacity: 0.8;
		right: 100%;
	}
	100% {
		opacity: 0;
		right: 100%;
	}
}

@keyframes b65-icon-fly-once {
	0% {
		left: 0;
		opacity: 0;
		transform: translateY(-50%) scaleX(1);
	}
	12% {
		opacity: 1;
	}
	78% {
		opacity: 1;
	}
	100% {
		left: calc(100% - var(--b65-icon-size, 18px));
		opacity: 0;
		transform: translateY(-50%) scaleX(1);
	}
}

@keyframes b65-icon-fly-pingpong {
	0% {
		left: 0;
		opacity: 0;
		transform: translateY(-50%) scaleX(1);
	}
	8% {
		opacity: 1;
	}
	42% {
		left: calc(100% - var(--b65-icon-size, 18px));
		opacity: 1;
		transform: translateY(-50%) scaleX(1);
	}
	50% {
		left: calc(100% - var(--b65-icon-size, 18px));
		opacity: 1;
		transform: translateY(-50%) scaleX(-1);
	}
	58% {
		opacity: 1;
	}
	92% {
		left: 0;
		opacity: 1;
		transform: translateY(-50%) scaleX(-1);
	}
	100% {
		left: 0;
		opacity: 0;
		transform: translateY(-50%) scaleX(1);
	}
}

.listing-block-65 .b65-timeline-items {
	position: relative;
}

.listing-block-65 .b65-item-body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--b65-item-gap, 13px);
	width: 100%;
	position: relative;
	z-index: 1;
}

.listing-block-65 .b65-content {
	flex: 1 1 auto;
	min-width: 0;
}

.listing-block-65 .b65-media {
	flex: 0 0 var(--b65-thumb-w, 38%);
	width: var(--b65-thumb-w, 38%);
	max-width: var(--b65-thumb-w, 38%);
	line-height: 0;
}

.listing-block-65 .b65-img-holder {
	display: block !important;
	width: 100% !important;
	border-radius: var(--b65-img-radius, 10px);
	overflow: hidden;
	margin: 0 !important;
	float: none !important;
}

.listing-block-65 .b65-img-holder:before {
	padding-top: 62%;
}

.listing-block-65 .b65-img-holder.b-loaded,
.listing-block-65 .b65-img-holder.b-error {
	-webkit-background-size: cover !important;
	background-size: cover !important;
	background-position: center center !important;
}

/* Đuôi timeline */
.listing-block-65 .b65-timeline-end {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	width: 100%;
	height: var(--b65-end-h, 20px);
	position: relative;
	pointer-events: none;
	box-sizing: border-box;
}

.listing-block-65 .b65-timeline-hook {
	flex: 0 0 var(--b65-end-hook, 22px);
	width: var(--b65-end-hook, 22px);
	height: var(--b65-end-h, 20px);
	margin-left: calc(var(--b65-line-left, 8px) - var(--b65-timeline-pad, 28px));
	box-sizing: border-box;
	border-left: var(--b65-timeline-w, 1px) var(--b65-timeline-style, dashed) var(--b65-line-color, #1455a3);
	border-bottom: var(--b65-timeline-w, 1px) var(--b65-timeline-style, dashed) var(--b65-line-color, #1455a3);
	border-bottom-left-radius: var(--b65-end-radius, 14px);
	background: transparent;
}

.listing-block-65 .b65-timeline-run {
	flex: 1 1 auto;
	align-self: flex-end;
	height: 0;
	margin-left: -1px;
	border-bottom: var(--b65-timeline-w, 1px) var(--b65-timeline-style, dashed) var(--b65-line-color, #1455a3);
}

.listing-block-65 .title,
.listing-block-65 .title a,
.listing-block-65 .post-summary {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
}

.listing-block-65 .title a {
	text-decoration: none;
	color: inherit;
}

.listing-block-65 .post-meta.b65-meta-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: var(--b65-meta-size, 13px);
	color: #888;
	margin: 0 0 4px;
	line-height: 1.4;
}

.listing-block-65 .post-meta.b65-meta-container a {
	color: #888;
	text-decoration: none;
}

.listing-block-65 .post-meta.b65-meta-container a:hover {
	opacity: 0.85;
}

.listing-block-65 .b65-meta-sep {
	opacity: 0.65;
}

@media (max-width: 600px) {
	.listing-block-65 .b65-item-body {
		flex-direction: column-reverse;
	}

	.listing-block-65 .b65-media {
		flex: 0 0 auto;
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	.listing-block-65 .b65-timeline {
		--b65-timeline-pad: 22px;
		--b65-line-left: 6px;
	}

	.listing-block-65 .b65-timeline.has-timeline::before {
		left: var(--b65-line-left, 6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-line,
	.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-line::after,
	.listing-block-65 .b65-has-hover-comet .b65-item:hover .b65-comet-mode-icon .b65-comet-fly,
	.listing-block-65 .b65-comet-repeat .b65-item.b65-comet-active .b65-comet-mode-line,
	.listing-block-65 .b65-comet-repeat .b65-item.b65-comet-active .b65-comet-mode-line::after,
	.listing-block-65 .b65-comet-repeat .b65-item.b65-comet-active .b65-comet-mode-icon .b65-comet-fly {
		animation: none !important;
		opacity: 0 !important;
	}
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.listing-block-65 .b65-comet-trail::before {
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(20, 85, 163, 0.25) 8%,
			var(--b65-line-color, #1455a3) 55%,
			#ffffff 92%,
			var(--b65-comet-active, #1455a3) 100%
		);
		box-shadow: 0 0 8px 1px rgba(20, 85, 163, 0.35);
	}
}