/* ILA Showcase Slider — 1.8.1 */

/* Reset chung cho MỌI nút bấm trong plugin: một số theme WordPress áp
   box-sizing/appearance riêng lên <button>, có thể phá hình dạng các nút
   tròn (play, mũi tên điều hướng, chấm mốc thời gian...). Khai báo tường
   minh ở đây để các nút luôn đúng kích thước/hình dạng đã thiết kế, bất kể
   theme đang dùng là gì. */
.ilasc button,
.ilacs button,
.ilatl button {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
}

:where(.ilasc) {
	--ilasc-gap-main: 20px;
	--ilasc-gap-thumb: 15px;
	--ilasc-gap-block: 16px;
	--ilasc-radius: 16px;
	--ilasc-nav-size: 56px;
	--ilasc-nav-offset: 16px;
	--ilasc-nav-color: #1a1a1a;
	--ilasc-nav-bg: #fff;
	--ilasc-nav-bg-hover: #0aa64f;
	--ilasc-nav-color-hover: #fff;
	--ilasc-tip-color: #111;
	--ilasc-tip-bg: #fff;
	--ilasc-tip-radius: 12px;
	--ilasc-tip-top: 28%;
	--ilasc-thumbs-pv: 3;
	--ilasc-thumbs-pv-t: 2;
	--ilasc-thumbs-pv-m: 1.4;

	position: relative;
	width: 100%;
}

.ilasc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Sân khấu: chứa slider + nút + tooltip ---------- */
.ilasc-stage {
	position: relative;
	/* Nút & tooltip nằm absolute nên KHÔNG ảnh hưởng chiều cao khối */
	overflow: visible;
}

.ilasc-track-wrap {
	overflow: hidden;
	border-radius: var(--ilasc-radius);
}

.ilasc-track {
	display: flex;
	gap: var(--ilasc-gap-main);
	will-change: transform;
	touch-action: pan-y;
}

.ilasc-slide {
	flex: 0 0 100%;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ilasc-radius);
	overflow: hidden;
	background: #eceff1;
}

.ilasc-figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.ilasc-slide img,
.ilasc-slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Nút play ----------
   Sửa lỗi: trước đây .ilasc-play thiếu padding:0 / box-sizing / appearance
   như mọi nút tròn khác trong file (.ilasc-nav, .ilatl-nav...). Vì đây là
   thẻ <button>, trình duyệt tự thêm padding mặc định KHÔNG đối xứng
   (rộng ngang nhiều hơn cao), cộng dồn vào width/height cố định khiến
   nút bị méo thành hình trứng/oval thay vì hình tròn. Đồng thời màu icon
   mặc định (#fff) trùng màu nền mặc định (trắng mờ) nên gần như vô hình.
   Khối dưới đây khắc phục cả hai, và thêm aspect-ratio:1 làm lớp bảo hiểm
   để nút LUÔN là hình tròn tuyệt đối dù theme ngoài can thiệp CSS. */
:where(.ilasc-play) { --ilasc-play-size: 92px; }

.ilasc-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--ilasc-play-size);
	height: var(--ilasc-play-size);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	padding: 0;
	margin-block: auto;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: var(--ilasc-play-bg, #fff);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .04);
	color: var(--ilasc-play-color, #16181c);
	cursor: pointer;
	transform-origin: 50% 50%;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.ilasc-play svg {
	width: 36%;
	height: 36%;
	margin-left: 8%;
	transform-origin: 50% 50%;
	/* Viền mờ quanh mũi tên: icon vẫn thấy rõ dù người dùng đổi màu
	   trùng với nền (ví dụ icon trắng trên nền trắng). */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.ilasc-play:focus-visible { outline: 3px solid var(--ilasc-nav-bg-hover); outline-offset: 4px; }

/* Vòng sóng lan toả phía sau nút */
.ilasc-play::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: 0;
	pointer-events: none;
}

/* --- Kiểu 1: Bóp nén (squash & stretch) --- */
.ilasc.ilasc--play-squash .ilasc-play {
	animation: ilasc-squash var(--ilasc-play-dur, 1.6s) cubic-bezier(.36, .07, .19, .97) infinite;
}

@keyframes ilasc-squash {
	0%, 100% { transform: scale(1, 1); }
	18%      { transform: scale(1.14, .86); }
	34%      { transform: scale(.9, 1.12); }
	50%      { transform: scale(1.06, .95); }
	68%      { transform: scale(.97, 1.03); }
	82%      { transform: scale(1.01, .99); }
}

/* --- Kiểu 2: Nhún nhảy (bounce lên xuống) --- */
.ilasc.ilasc--play-bounce .ilasc-play {
	animation: ilasc-bounce var(--ilasc-play-dur, 1.4s) cubic-bezier(.28, .84, .42, 1) infinite;
}

@keyframes ilasc-bounce {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	25%      { transform: translateY(-14px) scale(.94, 1.08); }
	45%      { transform: translateY(0) scale(1.12, .88); }
	60%      { transform: translateY(-6px) scale(.98, 1.04); }
	80%      { transform: translateY(0) scale(1.04, .96); }
}

/* --- Kiểu 3: Nhịp tim + vòng sóng --- */
.ilasc.ilasc--play-pulse .ilasc-play {
	animation: ilasc-pulse var(--ilasc-play-dur, 2s) ease-in-out infinite;
}

.ilasc.ilasc--play-pulse .ilasc-play::before {
	animation: ilasc-ripple var(--ilasc-play-dur, 2s) ease-out infinite;
}

@keyframes ilasc-pulse {
	0%, 100% { transform: scale(1); }
	40%      { transform: scale(1.08); }
	55%      { transform: scale(.97); }
}

@keyframes ilasc-ripple {
	0%   { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.75); opacity: 0; }
}

/* Rê chuột: phóng to, mũi tên nảy nhẹ */
.ilasc-play:hover {
	background: var(--ilasc-play-bg-hover, #0aa64f);
	color: var(--ilasc-play-color-hover, #fff);
	box-shadow: 0 10px 26px rgba(10, 166, 79, .35), inset 0 0 0 1px rgba(0, 0, 0, .04);
	animation-play-state: paused;
	transform: scale(1.12);
}

.ilasc-play:hover svg { animation: ilasc-poke .45s ease-out; }

@keyframes ilasc-poke {
	0%   { transform: scale(1); }
	40%  { transform: scale(.82, 1.18); }
	70%  { transform: scale(1.1, .92); }
	100% { transform: scale(1); }
}

/* Bấm xuống: nén mạnh */
.ilasc-play:active { transform: scale(.9, .9); transition-duration: .08s; }


/* ---------- Nút điều hướng ---------- */
.ilasc-nav {
	position: absolute;
	top: 50%;
	z-index: 6;
	width: var(--ilasc-nav-size);
	height: var(--ilasc-nav-size);
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilasc-nav-bg);
	color: var(--ilasc-nav-color);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ilasc-nav svg { width: 32%; height: 32%; }
.ilasc-prev { left: var(--ilasc-nav-offset); }
.ilasc-next { right: var(--ilasc-nav-offset); }

.ilasc-nav:hover {
	background: var(--ilasc-nav-bg-hover);
	color: var(--ilasc-nav-color-hover);
}

.ilasc-nav:focus-visible { outline: 3px solid var(--ilasc-nav-bg-hover); outline-offset: 3px; }
.ilasc-nav[disabled] { opacity: .35; pointer-events: none; }

/* ---------- Tooltip bám 2 nút ---------- */
.ilasc-tip {
	position: absolute;
	top: var(--ilasc-tip-top);
	z-index: 5;
	max-width: 260px;
	padding: 12px 20px;
	border-radius: var(--ilasc-tip-radius);
	background: var(--ilasc-tip-bg);
	color: var(--ilasc-tip-color);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform-origin: 50% 50%;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	transition: opacity .3s ease, transform .3s ease;
}

.ilasc-tip.is-on { opacity: 1; }

/* Tooltip trái neo mép trái, tooltip phải neo mép phải — luôn "sát" nút */
.ilasc-tip--prev {
	left: calc(var(--ilasc-nav-offset) - 16px);
	transform: translateX(0);
}

.ilasc-tip--next {
	right: calc(var(--ilasc-nav-offset) - 16px);
	transform: translateX(0);
}

/* Kiểu 1: nhấp nhô nhẹ qua lại */
.ilasc.ilasc--tip-float .ilasc-tip.is-on { animation: ilasc-float var(--ilasc-tip-dur, 2.6s) ease-in-out infinite; }
.ilasc.ilasc--tip-float .ilasc-tip--next.is-on { animation-name: ilasc-float-rev; }

@keyframes ilasc-float {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(8px); }
}

@keyframes ilasc-float-rev {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-8px); }
}

/* Kiểu 2: đẩy ra khi rê chuột vào nút */
.ilasc--tip-nudge .ilasc-tip--prev.is-hover { transform: translateX(10px); }
.ilasc--tip-nudge .ilasc-tip--next.is-hover { transform: translateX(-10px); }

/* Kiểu 3: Bóp nén — dẹt ngang rồi giãn dọc */
.ilasc.ilasc--tip-squash .ilasc-tip.is-on {
	animation: ilasc-tip-squash var(--ilasc-tip-dur, 1.8s) cubic-bezier(.36, .07, .19, .97) infinite;
}

@keyframes ilasc-tip-squash {
	0%, 100% { transform: scale(1, 1); }
	16%      { transform: scale(1.1, .88); }
	32%      { transform: scale(.93, 1.09); }
	48%      { transform: scale(1.05, .96); }
	66%      { transform: scale(.98, 1.02); }
	82%      { transform: scale(1.01, .99); }
}

/* Kiểu 4: Nhún nhảy — nảy lên, đáp xuống bẹt ra */
.ilasc.ilasc--tip-bounce .ilasc-tip.is-on {
	animation: ilasc-tip-bounce var(--ilasc-tip-dur, 1.6s) cubic-bezier(.28, .84, .42, 1) infinite;
}

@keyframes ilasc-tip-bounce {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	22%      { transform: translateY(-12px) scale(.96, 1.07); }
	42%      { transform: translateY(0) scale(1.1, .9); }
	58%      { transform: translateY(-5px) scale(.99, 1.03); }
	78%      { transform: translateY(0) scale(1.03, .97); }
}

/* Rê chuột vào nút: tooltip nảy một nhịp rồi dừng animation nền */
.ilasc-tip.is-hover { animation-play-state: paused; }

.ilasc.ilasc--tip-squash .ilasc-tip.is-hover,
.ilasc.ilasc--tip-bounce .ilasc-tip.is-hover {
	animation: ilasc-tip-poke .5s cubic-bezier(.28, .84, .42, 1);
}

@keyframes ilasc-tip-poke {
	0%   { transform: scale(1, 1); }
	35%  { transform: scale(1.14, .86); }
	65%  { transform: scale(.95, 1.06); }
	100% { transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
	.ilasc:not(.ilasc--force-motion) .ilasc-tip,
	.ilasc:not(.ilasc--force-motion) .ilasc-track,
	.ilasc:not(.ilasc--force-motion) .ilasc-play,
	.ilasc:not(.ilasc--force-motion) .ilasc-play::before,
	.ilasc:not(.ilasc--force-motion) .ilasc-thumbs-track {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Chấm phân trang ---------- */
.ilasc-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.ilasc-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.ilasc-dot.is-active { width: 26px; border-radius: 9px; background: #fff; }

/* ---------- Dải thumbnail tự chạy ---------- */
.ilasc-thumbs {
	margin-top: var(--ilasc-gap-block);
	overflow: hidden;
}

.ilasc-thumbs-track {
	display: flex;
	gap: var(--ilasc-gap-thumb);
	will-change: transform;
}

.ilasc-thumb {
	flex: 0 0 calc((100% - (var(--ilasc-thumbs-pv) - 1) * var(--ilasc-gap-thumb)) / var(--ilasc-thumbs-pv));
	border-radius: var(--ilasc-radius);
	overflow: hidden;
	cursor: pointer;
	background: #eceff1;
}

.ilasc-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}

.ilasc-thumb:hover img { transform: scale(1.05); }

/* ---------- Lightbox ---------- */
.ilasc-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 3vh 4vw;
	background: rgba(9, 12, 15, .93);
}

.ilasc-lb.is-open { display: flex; }
.ilasc-lb-img { max-width: 100%; max-height: 82vh; border-radius: 10px; object-fit: contain; }

.ilasc-lb-close,
.ilasc-lb-nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.ilasc-lb-close:hover,
.ilasc-lb-nav:hover { background: rgba(255, 255, 255, .3); }

.ilasc-lb-close { top: 18px; right: 18px; }
.ilasc-lb-prev { left: 3vw; }
.ilasc-lb-next { right: 3vw; }
.ilasc-lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.ilasc-thumb { flex-basis: calc((100% - (var(--ilasc-thumbs-pv-t) - 1) * var(--ilasc-gap-thumb)) / var(--ilasc-thumbs-pv-t)); }
}

@media (max-width: 767px) {
	.ilasc-thumb { flex-basis: calc((100% - (var(--ilasc-thumbs-pv-m) - 1) * var(--ilasc-gap-thumb)) / var(--ilasc-thumbs-pv-m)); }
	.ilasc--tip-desktop .ilasc-tip { display: none; }
}

/* ==================================================================
   ILA Card Slider (widget thứ 2)
   ================================================================== */

:where(.ilacs) {
	--ilacs-pv: 3;
	--ilacs-gap: 30px;
	--ilacs-radius: 16px;
	--ilacs-img-ratio: 4 / 3;
	--ilacs-nav-size: 48px;
	--ilacs-nav-offset: 8px;
	--ilacs-nav-color: #1a1a1a;
	--ilacs-nav-bg: #fff;
	--ilacs-nav-color-hover: #fff;
	--ilacs-nav-bg-hover: #0aa64f;
	--ilacs-dot: #cbd5e1;
	--ilacs-dot-active: #0aa64f;
}

.ilacs { position: relative; width: 100%; }

.ilacs-stage { position: relative; }

.ilacs-viewport { overflow: hidden; }

.ilacs-track {
	display: flex;
	gap: var(--ilacs-gap);
	will-change: transform;
	touch-action: pan-y;
}

.ilacs-slide {
	flex: 0 0 calc((100% - (var(--ilacs-pv) - 1) * var(--ilacs-gap)) / var(--ilacs-pv));
	min-width: 0;
}

.ilacs-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ilacs-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.ilacs-fig { margin: 0; overflow: hidden; background: #eceff1; }

.ilacs-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--ilacs-img-ratio);
	object-fit: cover;
	transition: transform .5s ease;
}

.ilacs--zoom .ilacs-card:hover .ilacs-img { transform: scale(1.06); }

.ilacs-body { padding: 18px 18px 22px; text-align: center; }

.ilacs-name { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.ilacs-sub  { margin: 0 0 6px; font-size: 14px; }
.ilacs-text { margin: 0; font-size: 15px; line-height: 1.5; }
.ilacs-sub:empty, .ilacs-text:empty { display: none; }

/* Nút điều hướng */
.ilacs-nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: var(--ilacs-nav-size);
	height: var(--ilacs-nav-size);
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilacs-nav-bg);
	color: var(--ilacs-nav-color);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	transition: background-color .2s ease, color .2s ease;
}

.ilacs-nav svg { width: 30%; height: 30%; }
.ilacs-nav:hover { background: var(--ilacs-nav-bg-hover); color: var(--ilacs-nav-color-hover); }
.ilacs-nav:focus-visible { outline: 3px solid var(--ilacs-nav-bg-hover); outline-offset: 3px; }
.ilacs-nav[disabled] { opacity: .3; pointer-events: none; }

.ilacs--nav-inside .ilacs-prev { left: var(--ilacs-nav-offset); }
.ilacs--nav-inside .ilacs-next { right: var(--ilacs-nav-offset); }

.ilacs--nav-outside .ilacs-prev { left: calc(-1 * (var(--ilacs-nav-size) + var(--ilacs-nav-offset))); }
.ilacs--nav-outside .ilacs-next { right: calc(-1 * (var(--ilacs-nav-size) + var(--ilacs-nav-offset))); }

.ilacs--nav-bottom .ilacs-nav {
	position: static;
	transform: none;
	display: inline-grid;
}

.ilacs--nav-bottom .ilacs-stage { display: flex; flex-direction: column; }
.ilacs--nav-bottom .ilacs-viewport { order: 1; }
.ilacs--nav-bottom .ilacs-prev { order: 2; margin: 20px 6px 0 auto; }
.ilacs--nav-bottom .ilacs-next { order: 3; margin: 20px auto 0 6px; }

/* Chấm phân trang */
.ilacs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.ilacs-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilacs-dot);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.ilacs-dot.is-active { width: 26px; border-radius: 9px; background: var(--ilacs-dot-active); }

@media (prefers-reduced-motion: reduce) {
	.ilacs-track, .ilacs-img { transition: none !important; }
}

/* ---------- Card Slider: chức danh & danh sách bằng cấp ---------- */

:where(.ilacs) {
	--ilacs-bullet: #0aa64f;
	--ilacs-line-gap: 6px;
}

.ilacs-role {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.ilacs-role:empty { display: none; }

/* Kiểu "Đội ngũ" — bằng cấp dạng danh sách */
.ilacs-list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--ilacs-line-gap);
}

.ilacs-list li {
	position: relative;
	padding-left: 22px;
	line-height: 1.45;
}

.ilacs--bullet-check .ilacs-list li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: .45em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--ilacs-bullet);
	border-bottom: 2px solid var(--ilacs-bullet);
	transform: rotate(-45deg);
}

.ilacs--bullet-dot .ilacs-list li::before {
	content: '';
	position: absolute;
	left: 5px;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ilacs-bullet);
}

.ilacs--bullet-dash .ilacs-list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .7em;
	width: 11px;
	height: 2px;
	background: var(--ilacs-bullet);
}

.ilacs--bullet-none .ilacs-list li { padding-left: 0; }

/* Kiểu "Lãnh đạo" — tên và chức danh đè lên ảnh */
.ilacs--overlay .ilacs-card { position: relative; }

.ilacs--overlay .ilacs-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: left;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 12%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
}

.ilacs--overlay .ilacs-name,
.ilacs--overlay .ilacs-role,
.ilacs--overlay .ilacs-sub,
.ilacs--overlay .ilacs-text { color: inherit; }

.ilacs--overlay .ilacs-fig { height: 100%; }

.ilacs--overlay .ilacs-text {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}

.ilacs--overlay .ilacs-card:hover .ilacs-text,
.ilacs--overlay .ilacs-card:focus-within .ilacs-text {
	max-height: 260px;
	opacity: 1;
	margin-top: 8px;
}

/* Kiểu "Học viên" giữ nguyên: chữ nhiều dòng cách nhau đều */
.ilacs--classic .ilacs-text { line-height: 1.5; }

/* ---------- Card Slider: video ---------- */

.ilacs-fig { position: relative; }

/* Trước đây nút này "mượn" hình dạng từ .ilasc-play qua cách gắn 2 class
   cùng lúc (class="ilasc-play ilacs-play") — dễ gây nhầm lẫn và lỗi tương
   tự (méo hình oval, thiếu padding/box-sizing reset). Giờ tách độc lập,
   tự đủ style, không phụ thuộc widget khác. */
:where(.ilacs-play) { --ilacs-play-size: 62px; }

.ilacs-play {
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 2;
	width: var(--ilacs-play-size);
	height: var(--ilacs-play-size);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	padding: 0;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: var(--ilacs-play-bg, #fff);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .04);
	color: var(--ilacs-play-color, #16181c);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ilacs-play svg {
	width: 36%;
	height: 36%;
	margin-left: 8%;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.ilacs-play:hover {
	background: var(--ilacs-play-bg-hover, #0aa64f);
	color: var(--ilacs-play-color-hover, #fff);
	transform: scale(1.08);
}

.ilacs-play:focus-visible { outline: 3px solid var(--ilacs-nav-bg-hover); outline-offset: 3px; }

/* Sửa lỗi: class hiệu ứng do PHP gắn vào wrapper trước đây là "ilasc--play-*"
   (nhầm với tiền tố widget slider) trong khi wrapper thật của widget Cards
   mang class "ilacs" — nên 3 kiểu hiệu ứng (bóp nén / nhún nhảy / nhịp tim)
   không bao giờ áp dụng được. Dùng lại đúng @keyframes đã có sẵn phía trên. */
.ilacs.ilacs--play-squash .ilacs-play {
	animation: ilasc-squash var(--ilasc-play-dur, 1.6s) cubic-bezier(.36, .07, .19, .97) infinite;
}

.ilacs.ilacs--play-bounce .ilacs-play {
	animation: ilasc-bounce var(--ilasc-play-dur, 1.4s) cubic-bezier(.28, .84, .42, 1) infinite;
}

.ilacs.ilacs--play-pulse .ilacs-play {
	animation: ilasc-pulse var(--ilasc-play-dur, 2s) ease-in-out infinite;
}

.ilacs-play:hover { animation-play-state: paused; }

.ilacs-card.is-playing .ilacs-play,
.ilacs-card.is-playing .ilacs-img { display: none; }

.ilacs-card video,
.ilacs-card iframe {
	display: block;
	width: 100%;
	aspect-ratio: var(--ilacs-img-ratio);
	border: 0;
	background: #000;
}

/* Ở kiểu Lãnh đạo, nút play nhích lên tránh phần chữ đè dưới đáy */
.ilacs--overlay .ilacs-play { bottom: 28%; }

/* Popup video */
.ilasc-lb--video { padding: 4vh 5vw; }

.ilasc-lb-video {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.ilasc-lb-video video,
.ilasc-lb-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Slider chính: iframe nhúng YouTube/Vimeo */
.ilasc-slide iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.ilasc-slide.is-playing .ilasc-img,
.ilasc-slide.is-playing .ilasc-play { display: none; }

/* ==================================================================
   ILA Timeline — widget thứ 3
   ================================================================== */

:where(.ilatl) {
	--ilatl-step: 160px;
	--ilatl-rail-box: 108px;
	--ilatl-rail: #dfe3ea;
	--ilatl-rail-h: 2px;
	--ilatl-fill: #2f4094;
	--ilatl-dot-size: 14px;
	--ilatl-dot: #2f4094;
	--ilatl-dot-future: #c3c9d6;
	--ilatl-dot-active: #e8354e;
	--ilatl-date: #4a5568;
	--ilatl-date-active: #1a2340;
	--ilatl-year: #f2795c;
	--ilatl-year-w: 150px;
	--ilatl-chip: #aab2c0;
	--ilatl-bar: #2f4094;
	--ilatl-bar-w: 4px;
	--ilatl-marker: #2f4094;
	--ilatl-gap: 44px;
	--ilatl-img-max: 400px;
	--ilatl-img-radius: 14px;
	--ilatl-text-w: 60%;
	--ilatl-nav-size: 40px;
	--ilatl-nav-color: #2f4094;
	--ilatl-nav-bg: #fff;
	--ilatl-nav-border: #dfe3ea;
	--ilatl-nav-bg-hover: #2f4094;
	--ilatl-nav-color-hover: #fff;
}

.ilatl { position: relative; width: 100%; }

/* ------------------------------------------------------------------
   Thanh mốc — điểm nằm trên đường, nhãn so le trên/dưới
   ------------------------------------------------------------------ */

.ilatl-head {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ilatl--nav-below .ilatl-head { flex-wrap: wrap; }
.ilatl--nav-below .ilatl-rail { flex: 1 1 100%; order: 1; }
.ilatl--nav-below .ilatl-navs { order: 2; margin-left: auto; }

.ilatl-rail {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.ilatl-line {
	position: relative;
	height: var(--ilatl-rail-box);
	will-change: transform;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.ilatl--spread .ilatl-line { width: 100%; }
.ilatl--fixed  .ilatl-line { width: calc(var(--ilatl-step) * (var(--n) + 1)); }

/* Đường kẻ nằm chính giữa vùng thanh mốc */
.ilatl-track,
.ilatl-fill {
	position: absolute;
	top: 50%;
	left: 0;
	height: var(--ilatl-rail-h);
	margin-top: calc(var(--ilatl-rail-h) / -2);
	border-radius: 99px;
}

.ilatl-track { right: 0; background: var(--ilatl-rail); }

.ilatl-fill {
	width: 100%;
	background: var(--ilatl-fill);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.ilatl-dates {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilatl-dates > li { list-style: none; margin: 0; }

/* Nút mốc: grid 3 hàng, hàng giữa luôn trùng đường kẻ */
.ilatl-date {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-50%);
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	align-items: center;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none transparent;
	box-shadow: none;
	color: var(--ilatl-date);
	font-family: inherit;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ilatl-date:hover,
.ilatl-date:focus,
.ilatl-date:active,
.ilatl-date.is-active {
	background: none transparent;
	box-shadow: none;
	outline: none;
}

.ilatl--spread .ilatl-date { left: var(--pct); }
.ilatl--fixed  .ilatl-date { left: calc(var(--ilatl-step) * (var(--i) + 1)); }

.ilatl-date-txt {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	transition: color .25s ease;
}

.ilatl-date.is-up .ilatl-date-txt   { grid-row: 1; align-self: end; padding-bottom: 14px; }
.ilatl-date.is-down .ilatl-date-txt { grid-row: 3; align-self: start; padding-top: 14px; }
.ilatl-dot { grid-row: 2; }

/* Điểm mốc */
.ilatl-dot {
	display: block;
	width: var(--ilatl-dot-size);
	height: var(--ilatl-dot-size);
	border-radius: 50%;
	background: var(--ilatl-dot-future);
	transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.ilatl-date.is-past .ilatl-dot { background: var(--ilatl-dot); }

.ilatl-date:hover { color: var(--ilatl-date-active); }
.ilatl-date:hover .ilatl-dot { background: var(--ilatl-dot); transform: scale(1.15); }

.ilatl-date.is-active { color: var(--ilatl-date-active); }

/* Mốc đang chọn: vòng tròn rỗng viền màu nhấn, giống mẫu */
.ilatl-date.is-active .ilatl-dot {
	background: #fff;
	box-shadow: inset 0 0 0 3px var(--ilatl-dot-active);
	box-shadow:
		inset 0 0 0 3px var(--ilatl-dot-active),
		0 0 0 4px color-mix(in srgb, var(--ilatl-dot-active) 18%, transparent);
	transform: scale(1.35);
}

.ilatl-date:focus-visible .ilatl-date-txt {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------
   Nút điều hướng
   ------------------------------------------------------------------ */

.ilatl-navs { display: flex; flex: 0 0 auto; gap: 10px; }

.ilatl-nav {
	flex: 0 0 auto;
	width: var(--ilatl-nav-size);
	height: var(--ilatl-nav-size);
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--ilatl-nav-border);
	border-radius: 50%;
	background: var(--ilatl-nav-bg);
	color: var(--ilatl-nav-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ilatl-nav svg { width: 28%; height: 28%; }

.ilatl-nav:hover {
	background: var(--ilatl-nav-bg-hover);
	border-color: var(--ilatl-nav-bg-hover);
	color: var(--ilatl-nav-color-hover);
}

.ilatl-nav[disabled] { opacity: .35; pointer-events: none; }
.ilatl-nav:focus-visible { outline: 2px solid var(--ilatl-nav-bg-hover); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Panel — chiều cao chạy theo panel đang mở
   ------------------------------------------------------------------ */

.ilatl-panels {
	position: relative;
	margin-top: 24px;
	transition: height .45s cubic-bezier(.4, 0, .2, 1);
}

.ilatl-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--ilatl-gap);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, transform .45s cubic-bezier(.4, 0, .2, 1), visibility .4s;
}

.ilatl-panel.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 2;
}

.ilatl--anim-slide .ilatl-panel { transform: translateX(44px); }
.ilatl--anim-slide .ilatl-panel.is-from-left { transform: translateX(-44px); }
.ilatl--anim-up .ilatl-panel { transform: translateY(28px); }
.ilatl--anim-fade .ilatl-panel { transform: none; }
.ilatl--anim-none .ilatl-panel { transform: none; transition: none; }

/* Cột chữ = cột năm + nội dung */
.ilatl-col-text {
	flex: 1 1 var(--ilatl-text-w);
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

.ilatl-col-img {
	flex: 1 1 calc(100% - var(--ilatl-text-w));
	min-width: 0;
	display: flex;
	justify-content: center;
}

.ilatl--reverse .ilatl-panel { flex-direction: row-reverse; }

.ilatl--stack .ilatl-panel { flex-direction: column-reverse; align-items: stretch; }
.ilatl--stack .ilatl-col-text,
.ilatl--stack .ilatl-col-img { flex: 1 1 auto; }

.ilatl-img {
	display: block;
	width: 100%;
	max-height: var(--ilatl-img-max);
	height: auto;
	object-fit: contain;
	border-radius: var(--ilatl-img-radius);
}

/* ------------------------------------------------------------------
   Cột năm cỡ lớn
   ------------------------------------------------------------------ */

.ilatl-years {
	flex: 0 0 var(--ilatl-year-w);
	max-width: var(--ilatl-year-w);
}

.ilatl-year {
	display: flex;
	flex-direction: column;
	color: var(--ilatl-year);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.5px;
}

.ilatl-year span { display: block; }

/* Vạch dọc phân cách giữa cột năm và nội dung */
.ilatl--has-bar .ilatl-body {
	padding-left: 24px;
	border-left: var(--ilatl-bar-w) solid var(--ilatl-bar);
}

.ilatl-body { flex: 1 1 auto; min-width: 0; align-self: stretch; }

.ilatl--year-none .ilatl-col-text { gap: 0; }
.ilatl--year-none .ilatl-years { display: none; }

/* Biến thể: danh sách năm đã qua */
.ilatl-chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilatl-chip {
	color: var(--ilatl-chip);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	list-style: none;
}

.ilatl-chip.is-current { margin-top: 4px; }
.ilatl-chip.is-current .ilatl-year { font-size: 34px; }

/* ------------------------------------------------------------------
   Chữ trong panel
   ------------------------------------------------------------------ */

.ilatl-title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
}

.ilatl-text { font-size: 16px; }
.ilatl-text > :first-child { margin-top: 0; }
.ilatl-text > :last-child  { margin-bottom: 0; }
.ilatl-text p { margin: 0 0 14px; line-height: 1.7; }

.ilatl-text ul {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ilatl-text ul li {
	position: relative;
	padding-left: 22px;
	line-height: 1.65;
	list-style: none;
}

.ilatl-text ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ilatl-marker);
}

.ilatl-text ol { margin: 0 0 14px; padding-left: 22px; }
.ilatl-text ol li { margin-bottom: 10px; line-height: 1.65; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ilatl { --ilatl-gap: 28px; --ilatl-year-w: 118px; }
	.ilatl-year { font-size: 36px; }
	.ilatl-title { font-size: 20px; }
	.ilatl-col-text { gap: 18px; }
}

@media (max-width: 767px) {
	/* Nhiều mốc trên màn hẹp: chuyển sang khoảng cách cố định + cuộn ngang */
	.ilatl-line { width: calc(var(--ilatl-step) * (var(--n) + 1)) !important; }
	.ilatl-date { left: calc(var(--ilatl-step) * (var(--i) + 1)) !important; }

	.ilatl { --ilatl-rail-box: 92px; --ilatl-img-max: 280px; }
	.ilatl-head { gap: 10px; }
	.ilatl-date-txt { font-size: 14px; }

	.ilatl-panel { flex-direction: column-reverse !important; align-items: stretch; gap: 22px; }
	.ilatl-col-text, .ilatl-col-img { flex: 1 1 auto; }

	/* Năm nằm trên, nội dung xuống dưới cho dễ đọc */
	.ilatl-col-text { flex-direction: column; gap: 14px; }
	.ilatl-years { flex: 1 1 auto; max-width: none; }
	.ilatl-year { flex-direction: row; gap: 10px; font-size: 30px; }
	.ilatl-chips { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
	.ilatl-chip.is-current .ilatl-year { font-size: 28px; }

	.ilatl--has-bar .ilatl-body {
		padding-left: 0;
		padding-top: 16px;
		border-left: 0;
		border-top: var(--ilatl-bar-w) solid var(--ilatl-bar);
	}

	.ilatl--has-bar .ilatl-body { border-top-width: 3px; }
	.ilatl-title { font-size: 18px; }
	.ilatl-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.ilatl-line,
	.ilatl-fill,
	.ilatl-panels,
	.ilatl-panel { transition: none !important; }
}