/* Square Matrix background for /thu-vien-ky-thuat/ — loaded ONLY when "Hiệu ứng nền Thư viện kỹ thuật" is ON (Admin → VNT39 → Nền Thư viện kỹ thuật).
 * Effect: "Square Animated Background" by zagmodius (https://codepen.io/zagmodius/pen/mdLGjJY), MIT, Copyright (c) 2026 by zagmodius.
 * Full MIT licence text: assets/licenses/square-animated-background-zagmodius-MIT.txt (keep it with this code).
 * Optimised port approved from vnt39-demo/square-matrix: grid of 60px cells, a square grows to fill its cell (1s), stays (1s), shrinks (1s), rests (1s); a new random set every 4s.
 * Markup is built ONCE on the server (each square has a 4-bit mask = which of 4 consecutive cycles it is lit in); one CSS keyframe set per mask runs a 16s loop.
 * Only transform: scale is animated. No timers and no per-frame JS (tech-library-matrix.js only pauses the loop off-screen / in a hidden tab). */
.tl-page .tl-zone { position: relative; }
.tl-page .tl-zone > :not(.tl-sm) { position: relative; z-index: 1; }
.tl-page .tl-sm { --tl-sq: #f0eaee; position: absolute; top: -14px; bottom: -20px; left: -10px; right: -10px; z-index: 0; overflow: hidden; pointer-events: none; contain: paint;
	container: tlsm / size; display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); grid-auto-rows: 60px; }
.tl-sm .tl-sq { display: block; width: calc(100% + .5px); height: calc(100% + .5px); background: var(--tl-sq); transform: scale(0); transform-origin: 50% 50%;
	animation: 16s ease infinite both; animation-play-state: paused; }
@media (max-width: 700px) { .tl-page .tl-sm { top: -10px; bottom: -16px; left: -8px; right: -8px; } }
.tl-sm.is-running .tl-m1{animation-name:tl-sm-m1}
.tl-sm.is-running .tl-m2{animation-name:tl-sm-m2}
.tl-sm.is-running .tl-m3{animation-name:tl-sm-m3}
.tl-sm.is-running .tl-m4{animation-name:tl-sm-m4}
.tl-sm.is-running .tl-m5{animation-name:tl-sm-m5}
.tl-sm.is-running .tl-m6{animation-name:tl-sm-m6}
.tl-sm.is-running .tl-m7{animation-name:tl-sm-m7}
.tl-sm.is-running .tl-m8{animation-name:tl-sm-m8}
.tl-sm.is-running .tl-m9{animation-name:tl-sm-m9}
.tl-sm.is-running .tl-m10{animation-name:tl-sm-m10}
.tl-sm.is-running .tl-m11{animation-name:tl-sm-m11}
.tl-sm.is-running .tl-m12{animation-name:tl-sm-m12}
.tl-sm.is-running .tl-m13{animation-name:tl-sm-m13}
.tl-sm.is-running .tl-m14{animation-name:tl-sm-m14}
.tl-sm.is-running .tl-m15{animation-name:tl-sm-m15}
.tl-sm.is-running.is-playing .tl-sq { animation-play-state: running; }
@keyframes tl-sm-m1{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m2{0%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m3{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m4{0%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m5{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m6{0%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m7{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m8{0%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m9{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m10{0%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m11{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m12{0%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m13{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m14{0%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
@keyframes tl-sm-m15{0%{transform:scale(0)}6.25%{transform:scale(1)}12.5%{transform:scale(1)}18.75%{transform:scale(0)}25%{transform:scale(0)}31.25%{transform:scale(1)}37.5%{transform:scale(1)}43.75%{transform:scale(0)}50%{transform:scale(0)}56.25%{transform:scale(1)}62.5%{transform:scale(1)}68.75%{transform:scale(0)}75%{transform:scale(0)}81.25%{transform:scale(1)}87.5%{transform:scale(1)}93.75%{transform:scale(0)}100%{transform:scale(0)}}
/* cell positions */
.tl-sm .tl-r1{grid-row:1}
.tl-sm .tl-r2{grid-row:2}
.tl-sm .tl-r3{grid-row:3}
.tl-sm .tl-r4{grid-row:4}
.tl-sm .tl-r5{grid-row:5}
.tl-sm .tl-r6{grid-row:6}
.tl-sm .tl-r7{grid-row:7}
.tl-sm .tl-r8{grid-row:8}
.tl-sm .tl-c1{grid-column:1}
.tl-sm .tl-c2{grid-column:2}
.tl-sm .tl-c3{grid-column:3}
.tl-sm .tl-c4{grid-column:4}
.tl-sm .tl-c5{grid-column:5}
.tl-sm .tl-c6{grid-column:6}
.tl-sm .tl-c7{grid-column:7}
.tl-sm .tl-c8{grid-column:8}
.tl-sm .tl-c9{grid-column:9}
.tl-sm .tl-c10{grid-column:10}
.tl-sm .tl-c11{grid-column:11}
.tl-sm .tl-c12{grid-column:12}
.tl-sm .tl-c13{grid-column:13}
.tl-sm .tl-c14{grid-column:14}
.tl-sm .tl-c15{grid-column:15}
.tl-sm .tl-c16{grid-column:16}
.tl-sm .tl-c17{grid-column:17}
.tl-sm .tl-c18{grid-column:18}
.tl-sm .tl-c19{grid-column:19}
.tl-sm .tl-c20{grid-column:20}
.tl-sm .tl-c21{grid-column:21}
/* cells that do not exist at the current width / height are not rendered or animated */
@container tlsm (max-width:119px){.tl-sm .tl-c2{display:none}}
@container tlsm (max-width:179px){.tl-sm .tl-c3{display:none}}
@container tlsm (max-width:239px){.tl-sm .tl-c4{display:none}}
@container tlsm (max-width:299px){.tl-sm .tl-c5{display:none}}
@container tlsm (max-width:359px){.tl-sm .tl-c6{display:none}}
@container tlsm (max-width:419px){.tl-sm .tl-c7{display:none}}
@container tlsm (max-width:479px){.tl-sm .tl-c8{display:none}}
@container tlsm (max-width:539px){.tl-sm .tl-c9{display:none}}
@container tlsm (max-width:599px){.tl-sm .tl-c10{display:none}}
@container tlsm (max-width:659px){.tl-sm .tl-c11{display:none}}
@container tlsm (max-width:719px){.tl-sm .tl-c12{display:none}}
@container tlsm (max-width:779px){.tl-sm .tl-c13{display:none}}
@container tlsm (max-width:839px){.tl-sm .tl-c14{display:none}}
@container tlsm (max-width:899px){.tl-sm .tl-c15{display:none}}
@container tlsm (max-width:959px){.tl-sm .tl-c16{display:none}}
@container tlsm (max-width:1019px){.tl-sm .tl-c17{display:none}}
@container tlsm (max-width:1079px){.tl-sm .tl-c18{display:none}}
@container tlsm (max-width:1139px){.tl-sm .tl-c19{display:none}}
@container tlsm (max-width:1199px){.tl-sm .tl-c20{display:none}}
@container tlsm (max-width:1259px){.tl-sm .tl-c21{display:none}}
@container tlsm (max-height:60px){.tl-sm .tl-r2{display:none}}
@container tlsm (max-height:120px){.tl-sm .tl-r3{display:none}}
@container tlsm (max-height:180px){.tl-sm .tl-r4{display:none}}
@container tlsm (max-height:240px){.tl-sm .tl-r5{display:none}}
@container tlsm (max-height:300px){.tl-sm .tl-r6{display:none}}
@container tlsm (max-height:360px){.tl-sm .tl-r7{display:none}}
@container tlsm (max-height:420px){.tl-sm .tl-r8{display:none}}
/* reduced motion: one still picture (cycle-0 pattern fully grown), no animation */
@media (prefers-reduced-motion: reduce) { .tl-sm .tl-sq { animation: none !important; } .tl-sm .tl-sq.tl-f { transform: scale(1); } }