/* Tech Library hero effects — loaded ONLY on /thu-vien-ky-thuat/ (see inc/tech-library-hero.php). Approved demo: Aurora + Border Beam + outer frame (variant C).
 *   1) Aurora background  — React Bits "Aurora" (MIT + Commons Clause, Copyright (c) 2026 David Haz): assets/licenses/aurora-react-bits-MIT-CommonsClause.txt
 *   2) Border beam        — technique from Magic UI "Border Beam" (MIT, Copyright (c) Magic UI):         assets/licenses/border-beam-magic-ui-MIT.txt
 *   3) Outer frame        — VNT39's own CSS: a rounded-square OUTLINE behind the box, gradient blue->purple->pink, 12s linear, counter-clockwise.
 * Nothing here changes the banner's size, text, search box, chips, or the box's size / position / fixed -8deg tilt. Only transforms, offset-distance and a canvas are animated. */

/* ---- Aurora layer. The dark gradient is also the static fallback if WebGL2 is unavailable / lost (the canvas is then removed). ---- */
.tl-page .tl-hero.tl-hero--fx { background: linear-gradient(115deg, #3a0510 0%, #510713 55%, #5c0a19 100%); }
.tl-hero--fx > .tl-aurora { position: absolute; inset: 0; pointer-events: none; }
.tl-hero--fx > div:not(.tl-aurora) { position: relative; }
.tl-aurora.is-fallback { display: none; }

/* ---- Border beam + outer frame on the right box (.tl-chip keeps the theme's own rotate(-8deg), 2px border, 24px radius, size and position) ---- */
.tl-page .tl-bb-host { position: relative; }
.tl-bb-host > .tl-bb { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: 2;       /* -2px = the box's own border width: the beam rides ON its outer edge */
  --bb-radius: 24px; --bb-size: 72px; --bb-dur: 6s; --bb-w: 2px; --bb-head: #fff4f7; --bb-body: #ff86a8; }
.tl-bb-host > :not(.tl-bb):not(.tl-of) { position: relative; z-index: 1; }
.tl-bb-ring { position: absolute; inset: 0; border-radius: inherit; border: var(--bb-w) solid transparent; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; }              /* ring only: border-box minus padding-box */
.tl-bb-ring > i { position: absolute; display: block; width: var(--bb-size); aspect-ratio: 1;
  background: linear-gradient(to left, var(--bb-head), var(--bb-body), transparent);
  offset-path: rect(0 auto auto 0 round var(--bb-radius)); offset-distance: 0%; animation: tl-bb-run var(--bb-dur) linear infinite; }
@keyframes tl-bb-run { to { offset-distance: 100%; } }
.tl-bb-glow { --bb-w: 4px; filter: blur(3px); opacity: .85; }
.tl-bb-glow > i { --bb-size: 96px; }
.tl-bb.is-paused .tl-bb-ring > i { animation-play-state: paused; }

/* outer rotating frame: 118% of the box's larger side (box 201x219 -> 254px), outline only, rotating about the box's centre, behind the box's content */
.tl-bb-host > .tl-of { position: absolute; left: 50%; top: 50%; height: 118%; aspect-ratio: 1 / 1; box-sizing: border-box; z-index: -1; pointer-events: none;
  border: 2px solid transparent; border-radius: 28px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%;
  animation: tl-of-rot 12s linear infinite reverse; }                                                                      /* reverse = counter-clockwise */
@keyframes tl-of-rot { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.tl-bb-host > .tl-of.is-paused { animation-play-state: paused; }
/* the swept circle (half-diagonal ~180px) would leave the banner / touch the search box below 1150px, and cannot fit on tablets (measured in the demo) */
@media (max-width: 1149px) { .tl-bb-host > .tl-of { display: none; } }

/* reduced motion: still frame (beam highlight parked on the top-left edge, frame at 0deg) */
@media (prefers-reduced-motion: reduce) { .tl-bb-ring > i { animation: none; offset-distance: 6%; } .tl-bb-host > .tl-of { animation: none; } }
/* browsers without offset-path rect(): a still thin pink edge instead of the beam */
@supports not (offset-path: rect(0 auto auto 0 round 1px)) {
  .tl-bb-ring > i { display: none; }
  .tl-bb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 150, 180, .6), 0 0 12px rgba(255, 126, 163, .25); }
}