/* ===== Snera Timeline – frontend =====
 * Canvas thiết kế: 1440 x 1024 (theo mockup)
 * Scale bằng JS: --snera-scale, stage transform: scale()
 * Màu: vàng #B18F4F, xanh #152B1C
 */

.snera-tl {
	--gold:   #B18F4F;
	--green:  #152B1C;
	--badge:  #FDB022;
	--snera-scale: 1;
	/* Full-bleed: thoát khỏi giới hạn body/content width của theme */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

/* Wrapper scale: JS đặt height = (1024 - TRIM_TOP) * scale.
   Fallback thuần CSS: cao theo tỉ lệ (1024-40)/1440 của viewport width */
.snera-tl-scale {
	position: relative;
	height: 68.333vw;
	margin: 0 auto;
}

/* Sân khấu cố định 1440x1024 */
.snera-tl-stage {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1440px;
	height: 1024px;
	transform: translateX(-50%) scale(var(--snera-scale));
	transform-origin: top center;
}

/* ---------- Reset cứng: vô hiệu hoá CSS của theme can thiệp ----------
   Chỉ reset các thuộc tính phá layout (margin/padding/float/max-width)
   trên các phần tử định vị tuyệt đối và text bên trong. */
.snera-tl .stl-photo,
.snera-tl .stl-text,
.snera-tl .stl-conn,
.snera-tl .stl-node,
.snera-tl .stl-badge,
.snera-tl .stl-axis-line,
.snera-tl .snera-tl-title,
.snera-tl .snera-tl-start,
.snera-tl .snera-tl-logo {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	max-width: none;
	box-sizing: border-box;
}
.snera-tl .stl-text h3,
.snera-tl .stl-text p {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	text-transform: none;
	letter-spacing: normal;
}
.snera-tl .stl-photo img {
	margin: 0;
	max-width: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Tiêu đề ---------- */
.snera-tl-title {
	position: absolute;
	left: 72px;
	top: 78px;
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: 54px;
	line-height: 1;
	color: var(--green);
}
.snera-tl-title .t2 {
	font-style: italic;
	color: var(--gold);
}

/* ---------- Điểm bắt đầu ---------- */
.snera-tl-start {
	position: absolute;
	left: 86px;
	top: 240px;
}
.snera-tl-start .start-label {
	font-family: var(--font-body, inherit);
	font-size: 20px;
	color: var(--gold);
}
.snera-tl-start .start-year {
	font-family: var(--font-display, serif);
	font-size: 48px;
	font-weight: 400;
	color: var(--gold);
	line-height: 1.15;
}

/* ---------- Logo ---------- */
.snera-tl-logo {
	position: absolute;
	left: 55px;
	top: 562px;
	height: 40px;
}
.snera-tl-logo img {
	display: block;
	height: 40px;
	width: auto;
}

/* ---------- Trục thời gian & đường nối ---------- */
.snera-tl-axis {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.snera-tl-axis .stl-axis-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 552px;
	height: 1px;
	background: var(--green);
}

/* Đường nối dọc (giữ độ dày 1px) */
.snera-tl-axis .stl-conn {
	position: absolute;
	width: 1px;
	background: var(--green);
}
.snera-tl .stl-conn.c-2024     { left: 149.5px;  top: 352px; height: 201px; }
.snera-tl .stl-conn.c-staurant { left: 360.5px;  top: 405px; height: 148px; }
.snera-tl .stl-conn.c-mienxa   { left: 824.5px;  top: 515px; height: 38px;  }
.snera-tl .stl-conn.c-sunique  { left: 1125.5px; top: 505px; height: 48px;  }
.snera-tl .stl-conn.c-tauhoa   { left: 197.5px;  top: 552px; height: 379px; }
.snera-tl .stl-conn.c-railway  { left: 661.5px;  top: 552px; height: 123px; }
.snera-tl .stl-conn.c-hocvien  { left: 1288.5px; top: 552px; height: 90px;  }

/* 7 nút kim cương trên trục */
.snera-tl-axis .stl-node {
	position: absolute;
	top: 547.5px;
	width: 10px;
	height: 10px;
	background: var(--green);
	transform: rotate(45deg);
}
.snera-tl .stl-node.n-2024    { left: 145px;  }
.snera-tl .stl-node.n-staurant{ left: 356px;  }
.snera-tl .stl-node.n-railway { left: 657px;  }
.snera-tl .stl-node.n-sunique { left: 1121px; }
.snera-tl .stl-node.n-hocvien { left: 1284px; }
.snera-tl-axis .stl-node.gold {
	top: 548.5px;
	width: 8px;
	height: 8px;
	background: var(--gold);
}
.snera-tl .stl-node.n-tauhoa { left: 194px; }
.snera-tl .stl-node.n-mienxa { left: 821px; }

/* Badge năm */
.snera-tl-axis .stl-badge {
	position: absolute;
	width: 78px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--badge);
	color: var(--green);
	font-family: var(--font-display, serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
}
.snera-tl .stl-badge.b-2026 { left: 272px;  top: 505px; }
.snera-tl .stl-badge.b-2028 { left: 1032px; top: 505px; }
.snera-tl .stl-badge.b-2027 { left: 576px;  top: 568px; }
.snera-tl .stl-badge.b-2029 { left: 1203px; top: 568px; }

/* ---------- Item: photo + text đặt toạ độ tuyệt đối ---------- */
.snera-tl-item { display: contents; }

.snera-tl-item .stl-photo {
	position: absolute;
	box-sizing: border-box;
}
.snera-tl .stl-photo img,
.snera-tl .stl-photo .stl-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.snera-tl .stl-photo .stl-ph {
	background: repeating-linear-gradient(45deg, #f0eee7, #f0eee7 10px, #e8e5db 10px, #e8e5db 20px);
}

.snera-tl-item .stl-text {
	position: absolute;
	box-sizing: border-box;
}
.snera-tl .stl-text .stl-title {
	font-family: var(--font-display, serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--green);
	margin: 0 0 8px;
	line-height: 1.25;
}
.snera-tl .stl-text .stl-desc {
	font-family: var(--font-body, inherit);
	/* 14px cố định, không override theo breakpoint; thu phóng đồng nhất theo canvas */
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.01em;
	color: rgba(21, 43, 28, 0.7);
	margin: 0;
	text-align: justify;
}

/* --- 2024 Tàu hỏa cao cấp Việt Nam --- */
.snera-tl .slot-tauhoa .stl-photo { left: 213px; top: 568px; width: 307px; height: 228px; }
.snera-tl .slot-tauhoa .stl-text  { left: 213px; top: 800px; width: 307px; }

/* --- 2026 Staurant --- */
.snera-tl .slot-staurant .stl-photo { left: 330px; top: 163px; width: 310px; height: 228px; }
.snera-tl .slot-staurant .stl-text  { left: 376px; top: 402px; width: 264px; }

/* --- 2027 Miền xa xăm riêng biệt --- */
.snera-tl .slot-mienxa .stl-photo { left: 700px; top: 165px; width: 190px; height: 350px; }
.snera-tl .slot-mienxa .stl-text  { left: 915px; top: 168px; width: 168px; }

/* --- 2027 Railway Retreat --- */
.snera-tl .slot-railway .stl-photo { left: 572px; top: 715px; width: 263px; height: 268px; }
.snera-tl .slot-railway .stl-text  { left: 676px; top: 568px; width: 335px; }

/* --- 2028 SUnique DMC --- */
.snera-tl .slot-sunique .stl-photo { left: 1105px; top: 165px; width: 240px; height: 235px; }
.snera-tl .slot-sunique .stl-text  { left: 930px;  top: 398px; width: 395px; }

/* --- 2029 Học viện du lịch cao cấp Việt Nam --- */
.snera-tl .slot-hocvien .stl-photo { left: 1075px; top: 645px; width: 225px; height: 238px; }
.snera-tl .slot-hocvien .stl-text  { left: 875px;  top: 826px; width: 432px; }

/* ================================================================
   MOBILE (<= 767px): timeline dọc bên trái theo mockup
   ================================================================ */
.snera-tl-mobile { display: none; }

@media (max-width: 767px) {
	.snera-tl-scale { display: none; }

	.snera-tl-mobile {
		display: block;
		padding: 32px 28px 48px 47px;
		box-sizing: border-box;
	}

	.snera-tl-mobile .stl-m-heading {
		font-family: var(--font-display, serif);
		font-weight: 400;
		font-size: 32px;
		line-height: 1.1;
		color: var(--green);
		margin: 0 0 28px;
		padding: 0;
	}
	.snera-tl-mobile .stl-m-heading .t2 {
		font-style: italic;
		color: var(--gold);
	}

	/* Trục dọc bên trái (x = 24px, nội dung thụt 47px) */
	.snera-tl-mobile .stl-m-items {
		position: relative;
	}
	.snera-tl-mobile .stl-m-items::before {
		content: '';
		position: absolute;
		left: -23px;              /* 47 - 23 = 24px từ mép */
		top: 6px;
		bottom: 0;
		width: 1px;
		background: #D7C6A4;
	}

	.snera-tl-mobile .stl-m-item {
		margin: 0 0 30px;
		padding: 0;
	}
	.snera-tl-mobile .stl-m-item:last-child { margin-bottom: 0; }

	/* Hàng marker: diamond trên trục + đoạn nối + năm + đường kéo dài */
	.snera-tl-mobile .stl-m-marker {
		position: relative;
		display: flex;
		align-items: center;
		margin: 0 0 18px -27px;   /* kéo node ra đúng trục x=24 */
		padding: 0;
	}
	.snera-tl-mobile .stl-m-node {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		background: var(--green);
		transform: rotate(45deg);
		margin: 0;
	}
	.snera-tl-mobile .stl-m-node.gold {
		width: 7px;
		height: 7px;
		background: var(--gold);
	}
	.snera-tl-mobile .stl-m-seg {
		flex: 0 0 14px;
		height: 1px;
		background: #D7C6A4;
		margin: 0;
	}
	.snera-tl-mobile .stl-m-tail {
		flex: 1 1 auto;
		height: 1px;
		background: #D7C6A4;
		margin: 0;
	}
	.snera-tl-mobile .stl-m-year {
		font-family: var(--font-display, serif);
		font-size: 40px;
		font-weight: 400;
		line-height: 1;
		color: var(--gold);
		margin: 0 14px 0 0;
		padding: 0;
	}
	.snera-tl-mobile .stl-m-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--badge);
		color: var(--green);
		font-family: var(--font-display, serif);
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
		padding: 6px 16px;
		margin: 0 14px 0 0;
		border: 0;
		border-radius: 0;
	}

	/* Ảnh: giữ tỉ lệ gốc */
	.snera-tl-mobile .stl-m-photo {
		margin: 0 0 16px;
		padding: 0;
		line-height: 0;
	}
	.snera-tl-mobile .stl-m-photo img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.snera-tl-mobile .stl-m-mienxa  .stl-m-photo { width: 62%; }
	.snera-tl-mobile .stl-m-sunique .stl-m-photo { width: 80%; }
	.snera-tl-mobile .stl-m-hocvien .stl-m-photo { width: 85%; }

	.snera-tl-mobile .stl-m-title {
		font-family: var(--font-display, serif);
		font-size: 20px;
		font-weight: 400;
		line-height: 1.25;
		color: var(--green);
		margin: 0 0 8px;
		padding: 0;
		text-transform: none;
		letter-spacing: normal;
	}
	.snera-tl-mobile .stl-m-desc {
		font-family: var(--font-body, inherit);
		font-size: 14px;
		line-height: 18px;
		letter-spacing: -0.01em;
		color: rgba(21, 43, 28, 0.7);
		margin: 0;
		padding: 0;
		max-width: none;
		text-align: justify;
	}
}