/* =====================================================================
   CSCM FX: Drone · AI chip · AR HUD · VR holofloor · Mascot
   Chỉ animate transform/opacity → mượt; tự dừng khi ngoài màn hình (.cs-off)
   ===================================================================== */
.cs-off *, .cs-off::before, .cs-off::after { animation-play-state: paused !important; }

/* ---------- Drone tuần tra trên hero ---------- */
.cs-dark > .cs-drone-lane,
.cs-dark > .cs-holofloor,
.cs-pagehead > .cs-pagehead-art { max-width: none !important; margin: 0 !important; }
.cs-dark > .cs-drone-lane, .cs-dark > .cs-holofloor { width: 100% !important; left: 0; }
.cs-drone-lane { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cs-drone {
	position: absolute;
	top: 8%;
	left: 0;
	width: 150px;
	animation: cs-patrol 26s ease-in-out infinite;
	will-change: transform;
}
.cs-drone__svg { display: block; width: 100%; height: auto; animation: cs-bob 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(34, 211, 238, .35)); }
.cs-rotor { animation: cs-rotor .12s linear infinite; }
.cs-rotor.r2 { animation-delay: -.06s; }
.cs-drone__beam { transform-origin: 110px 70px; animation: cs-beam 4s ease-in-out infinite; }
.cs-led { animation: cs-blink 1.2s steps(1) infinite; }
.cs-led.l2 { animation-delay: .6s; }
.cs-drone__lens { animation: cs-pulse 2s ease-in-out infinite; transform-origin: 110px 62px; }
.cs-drone__tag {
	position: absolute;
	left: 50%;
	top: -8px;
	transform: translateX(-50%);
	font-family: var(--cs-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--cs-cyan);
	white-space: nowrap;
	opacity: .85;
}
@keyframes cs-patrol {
	0%    { transform: translate(-180px, 40px) rotate(4deg); }
	30%   { transform: translate(38vw, 0) rotate(4deg); }
	38%   { transform: translate(44vw, 14px) rotate(0deg); }
	46%   { transform: translate(52vw, -6px) rotate(5deg); }
	62%   { transform: translate(105vw, 30px) rotate(5deg); }
	62.1% { transform: translate(105vw, 30px) rotate(-5deg); }
	100%  { transform: translate(-180px, 40px) rotate(-5deg); }
}
@keyframes cs-bob { 50% { transform: translateY(-10px); } }
@keyframes cs-rotor { 50% { transform: scaleX(.25); } }
@keyframes cs-beam { 0%, 100% { opacity: .15; transform: scaleX(.6); } 50% { opacity: .9; transform: scaleX(1); } }
@keyframes cs-pulse { 50% { transform: scale(1.5); opacity: .6; } }

/* ---------- Sàn hologram VR (lưới phối cảnh chạy) ---------- */

.cs-holofloor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	overflow: hidden;
	perspective: 380px;
	perspective-origin: 50% 0%;
	pointer-events: none;
	mask-image: linear-gradient(to top, #000 10%, transparent 95%);
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 95%);
	opacity: .5;
	z-index: -1;
}
.cs-holofloor__grid {
	position: absolute;
	left: -250%;
	right: -250%;
	bottom: 0;
	height: 320%;
	background:
		linear-gradient(rgba(139, 92, 246, .6) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(34, 211, 238, .5) 1px, transparent 1px) 0 0 / 64px 64px;
	transform-origin: 50% 100%;
	transform: rotateX(72deg) translateY(0);
	animation: cs-floor 2.4s linear infinite;
	will-change: transform;
}
@keyframes cs-floor { to { transform: rotateX(72deg) translateY(64px); } }

/* ---------- HUD AR quanh khối 3D + tia quét AI ---------- */
.cs-hud { position: absolute; width: 290px; height: 290px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: cs-hud 4s ease-in-out infinite; }
.cs-hud i { position: absolute; width: 34px; height: 34px; border: 2px solid var(--cs-cyan); filter: drop-shadow(0 0 6px rgba(34, 211, 238, .8)); }
.cs-hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.cs-hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.cs-hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.cs-hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.cs-hud__scan {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cs-cyan), transparent);
	box-shadow: 0 0 14px 2px rgba(34, 211, 238, .6);
	animation: cs-scan 3s ease-in-out infinite;
}
.cs-hud__label, .cs-hud__val { position: absolute; left: 0; font-family: var(--cs-mono); font-size: 11px; letter-spacing: .12em; color: var(--cs-cyan); white-space: nowrap; }
.cs-hud__label { top: -22px; }
.cs-hud__val { bottom: -22px; color: #a5b4fc; animation: cs-blink 2.4s steps(1) infinite; }
@keyframes cs-hud { 50% { transform: translate(-50%, -50%) scale(1.04); } }
@keyframes cs-scan { 0%, 100% { transform: translateY(8px); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateY(280px); } }
.cs-floatcard.is-vr { top: auto; bottom: 6%; right: 0; animation-delay: -3s; }
.cs-floatcard.is-vr b { font-size: 17px; background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Chip AI: mạch điện chạy dữ liệu ---------- */
.cs-aichip { display: block; width: 100%; height: auto; overflow: visible; }
.cs-trace { stroke-dasharray: 10 14; animation: cs-flow 1.6s linear infinite; }
.cs-aichip__core { animation: cs-core 3s ease-in-out infinite; }
@keyframes cs-flow { to { stroke-dashoffset: -48; } }
@keyframes cs-core { 50% { opacity: .75; } }

/* ---------- Trang trí thẻ chương trình ---------- */
.cs-program > .wp-block-html { margin: 0 !important; }
.cs-program.is-cs::after,
.cs-program.has-mascot::after { content: none; }
.cs-program__art {
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 190px;
	opacity: .6;
	z-index: -1;
	pointer-events: none;
	transition: opacity .4s, transform .6s;
}
.cs-program:hover .cs-program__art { opacity: .95; transform: rotate(-6deg) scale(1.05); }
.cs-program__mascot {
	position: absolute;
	right: -6px;
	bottom: -8px;
	width: 190px;
	height: auto;
	z-index: -1;
	pointer-events: none;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3));
	transform: rotate(-4deg);
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.cs-program.has-mascot:hover .cs-program__mascot { transform: rotate(4deg) translateY(-14px) scale(1.06); }
.cs-program > p, .cs-program > h3 { max-width: calc(100% - 110px); }

/* ---------- Art ở page header chương trình ---------- */
@media (min-width: 1000px) {
	.cs-pagehead.has-art > .wp-block-heading {
		max-width: 62%;
		margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1240px)) / 2)) !important;
		margin-right: auto !important;
	}
}
.cs-pagehead.has-art::after { display: none; }
.cs-pagehead-art {
	position: absolute;
	right: max(24px, calc((100% - 1240px) / 2));
	top: 50%;
	transform: translateY(-50%);
	width: min(420px, 34vw);
	pointer-events: none;
}
.cs-pagehead-art.is-cs .cs-aichip.is-big { opacity: .95; }
.cs-drone-mini { position: absolute; width: 46%; left: -22%; top: -12%; animation: cs-float 5s ease-in-out infinite; }
.cs-pagehead.has-art .cs-lead { max-width: min(760px, 56%); }

/* ---------- Ngành UAS: thẻ rộng + drone + radar ---------- */
.cs-badge-new { display: inline-block; margin: 2px 0 4px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #047857; font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
.cs-uas-art { width: 230px; opacity: .95; }
.cs-program.is-uas .cs-uas-art { right: 6%; bottom: 50%; transform: translateY(50%); width: min(300px, 30%); }
.cs-program.is-uas:hover .cs-uas-art { transform: translateY(46%) rotate(-4deg); }
.cs-program.is-uas > p, .cs-program.is-uas > h3, .cs-program.is-uas > .cs-facts { max-width: 60%; }
.cs-program.is-uas { max-width: none !important; margin: 0 !important; }
.cs-uas-radar { position: absolute; left: 50%; top: 58%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.cs-uas-radar::before, .cs-uas-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: cs-radar 3.6s ease-out infinite; }
.cs-uas-radar::after { animation-delay: -1.8s; }
.cs-uas-radar.is-big { border-color: rgba(52, 211, 153, .25); }
.cs-uas-radar.is-big::before, .cs-uas-radar.is-big::after { border-color: rgba(52, 211, 153, .55); }
@keyframes cs-radar { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.cs-pagehead-art.is-uas .cs-drone__svg { position: relative; filter: drop-shadow(0 14px 26px rgba(52, 211, 153, .4)); }
.cs-uas-tag { position: absolute; padding: 4px 10px; border: 1px solid rgba(52, 211, 153, .45); border-radius: 8px; background: rgba(6, 78, 59, .45); font-family: var(--cs-mono); font-size: 11px; letter-spacing: .1em; color: #6ee7b7; white-space: nowrap; animation: cs-float 5s ease-in-out infinite; }
.cs-uas-tag.is-t1 { left: -6%; top: 6%; }
.cs-uas-tag.is-t2 { right: -4%; bottom: 4%; animation-delay: -2.5s; color: #7dd3fc; border-color: rgba(125, 211, 252, .45); }

.cs-mascot-art { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.cs-mascot-art__ring {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #3b82f6, #22c55e, #ef4444, #3b82f6);
	filter: blur(50px);
	opacity: .45;
	animation: cs-spin 16s linear infinite;
}
.cs-mascot-art__logo { position: absolute; width: 32%; right: 0; top: 2%; animation: cs-float 6s ease-in-out infinite; animation-delay: -2s; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .4)); }
.cs-mascot-art__bot { position: relative; width: 80%; height: auto; animation: cs-hover 4s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.cs-mascot-art__shadow { position: absolute; bottom: 2%; width: 46%; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(8px); animation: cs-shadow 4s ease-in-out infinite; }
.cs-mascot-art__bubble {
	position: absolute;
	left: -4%;
	top: 4%;
	max-width: 50%;
	padding: 10px 14px;
	border-radius: 16px 16px 16px 4px;
	background: #fff;
	color: var(--cs-text);
	font-family: var(--cs-font-display);
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.4;
	box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5);
	animation: cs-pop 6s ease-in-out infinite;
	transform-origin: bottom left;
}
@keyframes cs-hover { 50% { transform: translateY(-18px) rotate(-2deg); } }
@keyframes cs-shadow { 50% { transform: scaleX(.75); opacity: .6; } }
@keyframes cs-pop { 0%, 8% { transform: scale(0); opacity: 0; } 14%, 80% { transform: scale(1); opacity: 1; } 88%, 100% { transform: scale(0); opacity: 0; } }

/* ---------- Section nhận diện ngành MM ---------- */
.cs-identity .cs-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.cs-id-logo .wp-block-image img { width: min(340px, 100%); height: auto; }
.cs-id-logo .cs-chips { justify-content: center; }
.cs-id-mascot { background: radial-gradient(420px 260px at 50% 30%, rgba(59, 130, 246, .12), transparent 70%), #fff !important; }
.cs-id-mascot .wp-block-image img { width: min(300px, 100%); height: auto; animation: cs-hover 4s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(15, 23, 42, .25)); }

/* ---------- Responsive ---------- */
@media (max-width: 999.98px) {
	.cs-pagehead-art.is-cs { width: 260px; opacity: .35; }
	.cs-pagehead.has-art .cs-lead, .cs-pagehead.has-art > .wp-block-heading { max-width: 100%; }
	.cs-pagehead-art.is-mm, .cs-pagehead-art.is-uas { position: relative; right: auto; top: auto; transform: none; width: 280px; margin: 0 auto 8px; }
	.cs-plo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-program.is-uas > p, .cs-program.is-uas > h3, .cs-program.is-uas > .cs-facts { max-width: calc(100% - 150px); }
	.cs-program.is-uas .cs-uas-art { width: 200px; right: -10px; bottom: -10px; transform: none; opacity: .7; }
	.cs-program.is-uas:hover .cs-uas-art { transform: rotate(-6deg); }
	.cs-hud { width: 250px; height: 250px; }
}
@media (max-width: 689.98px) {
	.cs-drone { width: 104px; top: 3%; }
	.cs-floatcard.is-vr { display: none; }
	.cs-pagehead-art.is-cs { display: none; }
	.cs-pagehead-art.is-mm, .cs-pagehead-art.is-uas { width: 230px; }
	.cs-plo { grid-template-columns: 1fr; }
	.cs-program.is-uas > p, .cs-program.is-uas > h3, .cs-program.is-uas > .cs-facts { max-width: 100%; }
	.cs-program.is-uas .cs-uas-art { width: 130px; }
	.cs-mascot-art__bubble { display: none; }
	.cs-program__art, .cs-program__mascot { width: 130px; }
	.cs-program > p, .cs-program > h3 { max-width: 100%; }
	.cs-program { padding-bottom: 120px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-drone-lane, .cs-holofloor, .cs-hud__scan { display: none; }
}