/**
 * Thư viện kỹ thuật (/thu-vien-ky-thuat/) — ported 1:1 from the approved REFERENCE-DEMO.html (same values, same breakpoints 1000 / 700).
 * The demo's own header, top bar, footer and yellow "demo" note are NOT part of the page: the site's real header and footer are used.
 * Class names are the demo's with a "tl-" prefix and everything is scoped under .tl-page so Flatsome / the rest of the theme can not leak in or out.
 */
.tl-page { --red: #9d0718; --red2: #bd1026; --ink: #1c2532; --muted: #667085; --line: #e8eaf0; --bg: #f5f6f9; background: var(--bg); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.tl-page *, .tl-page *::before, .tl-page *::after { box-sizing: border-box; }
.tl-page [hidden] { display: none !important; }
.tl-page h1, .tl-page h2, .tl-page h3 { width: auto; font-family: inherit; font-weight: 700; line-height: 1.55; letter-spacing: 0; text-transform: none; color: inherit; }
.tl-page p, .tl-page ul { margin-bottom: 0; }
.tl-page small { display: inline; font-size: smaller; }
.tl-page a { text-decoration: none; color: inherit; }
.tl-page button, .tl-page input, .tl-page select, .tl-page textarea { font: inherit; letter-spacing: 0; text-transform: none; }
.tl-page button { cursor: pointer; margin: 0; min-height: 0; box-shadow: none; }
.tl-page input, .tl-page select, .tl-page textarea { box-shadow: none; margin: 0; height: auto; max-width: 100%; }

.tl-wrap { max-width: 1240px; margin: auto; padding: 24px 18px 70px; }

/* hero */
.tl-hero { background: linear-gradient(115deg, #780719, #aa1124 63%, #ce3341); color: #fff; border-radius: 18px; padding: 42px 46px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 20px; overflow: hidden; position: relative; }
.tl-hero::after { content: '⌕'; position: absolute; right: 40px; top: -135px; font-size: 360px; opacity: .08; transform: rotate(-15deg); pointer-events: none; }
.tl-eyebrow { font-size: 12px; letter-spacing: 2px; color: #ffccd2; font-weight: 800; }
.tl-page .tl-hero h1 { font-size: 35px; line-height: 1.22; margin: 12px 0; color: #fff; }
.tl-hero p { color: #ffe3e6; margin: 0 0 23px; max-width: 620px; }
.tl-search { background: #fff; display: flex; padding: 6px; border-radius: 10px; max-width: 680px; box-shadow: 0 10px 25px #52051244; position: relative; z-index: 1; margin: 0; }
.tl-page .tl-search input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 12px; color: #1c2532; background: #fff; border-radius: 0; }
.tl-page .tl-search button { background: var(--red); border: 0; color: #fff; padding: 12px 21px; border-radius: 7px; font-weight: 800; white-space: nowrap; }
/* search button: 24px magnifier (inline SVG, currentColor), 10px gap, centred on the text. The icon box has no height of its own (the 24px drawing is centred in it and overflows both ways), so the button's height is still the text line's and never changes. */
.tl-page .tl-search button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tl-page .tl-search__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 0; }
.tl-page .tl-search__ico svg { display: block; flex: none; width: 24px; height: 24px; }
.tl-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tl-page .tl-quick button { background: #ffffff1e; color: #fff; border: 1px solid #ffffff5c; padding: 5px 12px; border-radius: 20px; font-size: 12px; }
.tl-heroart { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.tl-heroart .tl-chip { border: 2px solid #ffffff77; background: #ffffff16; border-radius: 24px; padding: 25px; text-align: center; transform: rotate(-8deg); box-shadow: 18px 18px 0 #ffffff0d; }
.tl-chip .tl-symbol { font-size: 72px; line-height: 1.2; }
.tl-chip strong { display: block; font-size: 18px; }

/* stats */
.tl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0 28px; }
/* the four tiles — "Circuit Pulse": icon + name on the left, the real number (+N, big, deep red) on the right, a thin PCB trace along the bottom that carries one pulse when the number is shown or really changes */
.tl-stat { --cycle: 3.2s; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 92px; }
.tl-stat__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tl-stat .tl-emoji { font-size: 25px; line-height: 1; flex: 0 0 auto; }
.tl-page .tl-stat b { display: block; font-size: 16px; line-height: 1.3; font-weight: 750; color: #1c2532; min-width: 0; }
.tl-stat__num { display: inline-flex; align-items: baseline; font-size: 36px; line-height: 1; font-weight: 800; color: #8f0a1c; font-variant-numeric: tabular-nums; letter-spacing: -.5px; white-space: nowrap; }
.tl-stat__num .tl-plus { margin-right: 1px; }
.tl-stat__num .tl-digits { display: inline-block; min-width: calc(var(--d, 3) * 1ch); text-align: right; }
.tl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tl-circuit { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 16px; pointer-events: none; }
.tl-circuit svg { display: block; width: 100%; height: 16px; overflow: visible; }
.tl-circuit__base { fill: none; stroke: #f0d4d9; stroke-width: 1.2; }
.tl-circuit__flash { fill: none; stroke: #e0243b; stroke-width: 1.6; opacity: 0; }
.tl-circuit__pulse { fill: none; stroke: #e0243b; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 14; opacity: 0; }
.tl-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #e8c3c9; }
.tl-dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: #e0243b; box-shadow: 0 0 6px 2px rgba(224, 36, 59, .4); opacity: 0; }
/* A. AMBIENT PULSE (class .is-ambient, set by the script): runs continuously, one lap = --cycle (3.2 s), tiles offset by 300 ms.
 *    The script only PAUSES it (.is-paused → animation-play-state) when the tile is out of view or the tab is hidden; it never removes it after a count. */
.tl-stat.is-ambient .tl-circuit__pulse { opacity: 1; animation: tl-run var(--cycle) linear calc(var(--i, 0) * 300ms) infinite; }
.tl-stat.is-ambient .tl-dot::after { animation: tl-node var(--cycle) ease-in-out calc(var(--i, 0) * 300ms + var(--p, 0) * var(--cycle) * .684 - var(--cycle) * .05) infinite; }
.tl-stat.is-ambient.is-paused .tl-circuit__pulse, .tl-stat.is-ambient.is-paused .tl-dot::after { animation-play-state: paused; }
/* the head crosses the 100-unit trace during the first 78 % of the lap (so a node at fraction p glows at p × .684 × lap), then a short rest */
@keyframes tl-run { 0% { stroke-dashoffset: 14; } 78%, 100% { stroke-dashoffset: -100; } }
@keyframes tl-node { 0% { opacity: 0; } 5% { opacity: 1; } 14%, 100% { opacity: 0; } }
/* B. COUNT UPDATE (class .is-counting, set only when the number really changes): one soft flash of the whole trace; independent of A */
.tl-stat.is-counting .tl-circuit__flash { animation: tl-flash 1.2s ease-out 1 both; }
@keyframes tl-flash { 0% { opacity: 0; } 30% { opacity: .75; } 100% { opacity: 0; } }
/* the tiles are real links now: the whole tile is the target; hover/focus only change colours and shadow (no movement, no layout shift) */
.tl-page a.tl-stat { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.tl-page a.tl-stat:hover { color: inherit; border-color: #b92032; box-shadow: 0 6px 18px #9d071810; }
.tl-page a.tl-stat:focus-visible { outline: 2px solid #9d0718; outline-offset: 2px; border-color: #b92032; }
.tl-page a.tl-stat.is-active { border-color: #9d0718; background: #fff8f9; }

/* section title + categories */
.tl-sectiontitle { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 30px 0 16px; }
.tl-page .tl-sectiontitle h2 { margin: 0; font-size: 23px; }
.tl-sectiontitle p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.tl-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tl-page .tl-category { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 19px 38px 19px 19px; display: flex; gap: 13px; align-items: center; transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease, background-color .28s ease; cursor: pointer; text-align: left; color: #000; box-shadow: 0 1px 2px #1c25320a; }
@media (hover: hover) {
	.tl-page .tl-category:hover { transform: translateY(-6px); box-shadow: 0 16px 30px -8px #9d07182e, 0 6px 12px -4px #1c253214; }   /* lifts as a whole; no red border; the grid neighbours do not move (transform only) */
}
.tl-page .tl-category.is-active { background: linear-gradient(135deg, #fff 45%, #fff2f3); box-shadow: 0 12px 26px -8px #9d071838, 0 3px 8px #1c25320f; }
.tl-page .tl-category { --tl-ico: clamp(90px, 7.6vw, 100px); }   /* the 8 Main-Tab icons are self-made SVGs (assets/images/tech-library/icons/): no emoji, no tinted box behind them */
.tl-page .tl-category .tl-em { display: block; flex: 0 0 auto; width: var(--tl-ico); height: var(--tl-ico); padding: 0; background: none; border: 0; border-radius: 0; font-size: 0; line-height: 0; }
.tl-page .tl-category .tl-em img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transition: transform .2s; }
.tl-page .tl-category:hover .tl-em img, .tl-page .tl-category.is-active .tl-em img { transform: scale(1.04); }
.tl-category strong { display: block; font-size: 14px; }
.tl-category small { color: var(--muted); font-size: smaller; }
.tl-page .tl-category { min-width: 0; }
.tl-category > span:not(.tl-em) { min-width: 0; overflow-wrap: anywhere; }
.tl-page .tl-category:focus-visible { outline: 2px solid #1c2532; outline-offset: 3px; }   /* keyboard focus: neutral ring (the red border is gone) */
.tl-page .tl-category .tl-count { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; margin-top: 3px; line-height: 1.15; }
.tl-page .tl-category .tl-count__num { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: #8f0a1d; font-variant-numeric: tabular-nums; }   /* "+310": dark crimson, big and bold; the number is real data (vnt39_techlib_view total), zero shows +0 */
.tl-page .tl-category .tl-count__txt { font-size: 12px; font-weight: 500; color: var(--muted); }
/* live status bar: a slim crimson rail on the RIGHT inside the card (top "+" then the rail, a red light runs down it) */
.tl-page .tl-bar { position: absolute; top: 50%; right: 12px; width: 12px; height: 50%; transform: translateY(-50%); pointer-events: none; }   /* rail = 50% of the card height, centred on the right edge; the "+" hangs above it */
.tl-page .tl-bar__plus { position: absolute; left: 50%; top: auto; bottom: calc(100% + 5px); width: 11px; height: 11px; margin-left: -5.5px; color: #d4132f; background: linear-gradient(currentColor, currentColor) center / 100% 2.4px no-repeat, linear-gradient(currentColor, currentColor) center / 2.4px 100% no-repeat; opacity: .9; transition: opacity .28s, filter .28s; }
.tl-page .tl-bar__line { display: block; position: relative; top: 0; width: 5px; height: 100%; margin: 0 auto; border-radius: 999px; overflow: hidden; background: linear-gradient(0deg, #5c0a17, #7d0f21 50%, #5c0a17); opacity: .75; transition: opacity .28s, box-shadow .28s, width .28s; }
.tl-page .tl-bar__line::before, .tl-page .tl-bar__line::after { content: ""; position: absolute; left: 0; right: 0; will-change: transform, opacity; }
.tl-page .tl-bar__line::before { top: 0; bottom: 0; background: linear-gradient(0deg, #a3122a, #e0364a); transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; animation: tl-bar-fill 2.8s linear infinite; }   /* the light fills the rail from the BOTTOM up, then fades back to the resting colour (transform only: the real height never changes) */
.tl-page .tl-bar__line::after { top: 0; height: 42%; background: linear-gradient(180deg, #ff4d5f00, #ff6b7c 55%, #ff4d5f00); transform: translateY(167%); opacity: 0; animation: tl-bar-run 2.8s linear infinite; }   /* the bright head rides the front of the fill, upwards */
@keyframes tl-bar-run { 0% { transform: translateY(167%); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 85% { transform: translateY(-71%); opacity: 1; } 92%, 100% { transform: translateY(-71%); opacity: 0; } }
@keyframes tl-bar-fill { 0% { transform: scaleY(0); opacity: 0; } 8% { opacity: .7; } 85% { transform: scaleY(1); opacity: .7; } 100% { transform: scaleY(1); opacity: 0; } }
.tl-page .tl-category:nth-child(2n) .tl-bar__line::before, .tl-page .tl-category:nth-child(2n) .tl-bar__line::after { animation-delay: -.9s; }
.tl-page .tl-category:nth-child(3n) .tl-bar__line::before, .tl-page .tl-category:nth-child(3n) .tl-bar__line::after { animation-delay: -1.8s; }
.tl-page .tl-category:hover .tl-bar__line, .tl-page .tl-category:focus-visible .tl-bar__line { opacity: 1; box-shadow: 0 0 7px 1px #ff2d4a73; }
.tl-page .tl-category:hover .tl-bar__plus, .tl-page .tl-category:focus-visible .tl-bar__plus { opacity: 1; filter: drop-shadow(0 0 3px #ff2d4a99); }
.tl-page .tl-category.is-active .tl-bar__line { opacity: 1; width: 6px; background: linear-gradient(180deg, #8f0a1d, #c4162f 50%, #8f0a1d); box-shadow: 0 0 9px 2px #ff2d4a8c; }
.tl-page .tl-category.is-active .tl-bar__line::before, .tl-page .tl-category.is-active .tl-bar__line::after { animation-duration: 2.2s; }
.tl-page .tl-category.is-active .tl-bar__line::after { background: linear-gradient(180deg, #ff4d5f00, #ff8a98 55%, #ff4d5f00); }
.tl-page .tl-category.is-active .tl-bar__plus { opacity: 1; filter: drop-shadow(0 0 4px #ff2d4ab3); }
.tl-page .tl-filter.is-empty:not(.is-active) { opacity: .55; }   /* a chip (type or category) with no post in this view: still a working filter */
.tl-treesearch { padding: 0 2px 10px; }
.tl-page .tl-treesearch input[type=search] { width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: none; font-size: 13px; color: #1c2532; }
.tl-page .tl-treesearch input[type=search]:focus { border-color: #b92032; outline: none; }
.tl-treesearch__none { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.tl-page .is-filter-hide { display: none !important; }   /* tree search: nodes that neither match nor lead to a match */
/* multi-level Main Tab trees (techlib_cat, any depth): every level nests inside its parent's .tl-node__kids; long names wrap instead of spilling */
.tl-series[data-depth] .tl-node__name, .tl-leaf[data-depth] .tl-node__name { min-width: 0; overflow-wrap: anywhere; }
.tl-series[data-depth] > .tl-node__kids { margin: 0 0 4px 9px; padding: 0 0 0 7px; border-left-width: 1px; }   /* narrower steps than the Series tree so 5-6 levels still leave room for the names */
.tl-page .tl-cat__empty { margin: 0; padding: 4px 2px; color: var(--muted); font-size: 13px; }   /* a Main Tab with no real category tree yet */

/* layout */
.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 24px; margin-top: 28px; }
.tl-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 21px; }
.tl-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.tl-page .tl-heading h2 { font-size: 21px; margin: 0; }
.tl-heading span { font-size: 12px; color: var(--muted); }
/* THE filter bar: "Tất cả" + category chips | content-type chips — ONE row that scrolls sideways (never wraps), arrows + edge fades only when something is out of view */
.tl-layout > div:first-child, .tl-panel { min-width: 0; }   /* the list column may shrink below the bar's content (the bar scrolls inside itself) — needed where the grid track is a plain 1fr */
.tl-fb { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; min-width: 0; }
.tl-fb { max-width: 100%; contain: inline-size; }   /* its content never widens the page or the column */
.tl-fb__view { position: relative; flex: 1 1 auto; min-width: 0; }
.tl-fb__view::before, .tl-fb__view::after { content: ""; position: absolute; top: 0; bottom: 0; width: 24px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tl-fb__view::before { left: 0; background: linear-gradient(90deg, #fff 15%, #fff0); }
.tl-fb__view::after { right: 0; background: linear-gradient(270deg, #fff 15%, #fff0); }
.tl-fb.can-left .tl-fb__view::before, .tl-fb.can-right .tl-fb__view::after { opacity: 1; }
.tl-fb__scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 2px 1px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.tl-fb__scroll::-webkit-scrollbar { display: none; }
.tl-fb__group { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 0 auto; }
.tl-fb__sep { flex: 0 0 1px; width: 1px; height: 18px; margin: 0 2px; background: #dde1e8; }
.tl-page .tl-fb__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #e1e4ea; background: #fff; color: #1c2532; box-shadow: 0 1px 3px #1c25321a; cursor: pointer; transition: background-color .15s, opacity .15s; }
.tl-page .tl-fb__arrow:hover:not(:disabled) { background: #f3f4f7; }
.tl-page .tl-fb__arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tl-page .tl-fb__arrow:focus-visible, .tl-page .tl-filter:focus-visible { outline: 2px solid #1c2532; outline-offset: 2px; }
.tl-page .tl-filter { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; background: #f7f8fa; color: #495263; border: 1px solid #e8eaf0; border-radius: 8px; padding: 4px 10px; font-size: 13px; line-height: 1.35; font-weight: 650; transition: background-color .15s, border-color .15s, color .15s; }
.tl-page .tl-filter:hover:not(.is-active) { background: #eef0f4; border-color: #dde1e8; color: #1c2532; }
.tl-page .tl-filter.is-active { background: #9d0718; color: #fff; border-color: #9d0718; }
.tl-page .tl-filter--cur .tl-x { margin-left: 7px; font-size: 15px; line-height: 1; opacity: .85; }

/* THE category tree — sidebar on desktop ("Danh mục kỹ thuật": Group KT iPhone → Series → Model, + the lesson groups); a button + accordion panel on mobile */
.tl-page .tl-n { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: #eceef3; color: #667085; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; flex: 0 0 auto; }
.tl-page .tl-filter.is-active .tl-n { background: #ffffff33; color: #fff; }
.tl-cat .tl-cat__title { margin-bottom: 10px; }
.tl-page .tl-catbtn { display: none; }
.tl-node__head { display: flex; align-items: stretch; border-radius: 8px; }
.tl-page .tl-node__toggle { flex: 0 0 28px; background: transparent; border: 0; color: var(--red); padding: 0; font-size: 12px; }
.tl-node__toggle span { display: inline-block; transition: transform .15s; }
.tl-node.is-open > .tl-node__head .tl-node__toggle span { transform: rotate(90deg); }
.tl-page .tl-node__toggle--none { cursor: default; }
.tl-page .tl-node__pick, .tl-page .tl-leaf { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; text-align: left; background: transparent; border: 0; border-radius: 8px; color: #2b3445; font-size: 13px; line-height: 1.35; }
.tl-page .tl-node__pick { flex: 1; padding: 7px 8px 7px 2px; font-weight: 650; }
.tl-page .tl-node__pick:hover, .tl-page .tl-leaf:hover { background: #f7f8fa; }
.tl-node--group > .tl-node__head .tl-node__pick { font-weight: 800; color: #1c2532; }
.tl-node--group + .tl-node--group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tl-node__kids { padding: 2px 0 2px 14px; }
.tl-node--group > .tl-node__kids { padding-left: 6px; }
.tl-node__kids .tl-treeall { margin: 2px 0 6px 22px; }
.tl-series > .tl-node__kids { margin: 0 0 4px 13px; padding: 0 0 0 10px; border-left: 2px solid #f0d8dc; }
.tl-page .tl-leaf { padding: 6px 8px; font-weight: 500; }
.tl-page .tl-node__pick.is-active, .tl-page .tl-leaf.is-active { background: #fff0f1; color: #9d0718; font-weight: 800; }
.tl-page .tl-node__pick.is-active .tl-n, .tl-page .tl-leaf.is-active .tl-n { background: #9d0718; color: #fff; }
.tl-series.is-empty > .tl-node__head .tl-node__name, .tl-page .tl-leaf.is-empty .tl-node__name { color: #8a93a0; }
.tl-page .tl-treeall { background: #fff; color: var(--red); border: 1px dashed #d7a1a9; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 650; }

/* article cards */
.tl-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; transition: opacity .15s; }
.tl-articles.is-loading { opacity: .45; pointer-events: none; }
.tl-article { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.tl-page .tl-visual { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(circle at 80% 25%, #e0e4eb, #a9b2c0 55%, #576476); overflow: hidden; color: inherit; }
.tl-visual::before { content: ''; width: 108px; height: 145px; border-radius: 19px; background: linear-gradient(145deg, #101a2a, #39495b); border: 6px solid #222b37; box-shadow: 15px 16px 24px #0004; transform: rotate(-18deg); position: absolute; }
.tl-visual::after { content: '▦'; font-size: 64px; color: #c4cbd4; position: relative; transform: rotate(-18deg); }
.tl-visual.board { background: radial-gradient(circle at 70% 30%, #385f54, #0e312b 70%); }
.tl-visual.board::before { background: repeating-linear-gradient(90deg, #153f34 0 11px, #0c3028 11px 14px); border-color: #b9a56e; border-radius: 6px; width: 150px; height: 112px; transform: rotate(-12deg); }
.tl-visual.board::after { content: '▦'; color: #c2b686; transform: rotate(-12deg); }
.tl-visual.screen { background: linear-gradient(140deg, #c2d9ef, #7599bc); }
.tl-visual.screen::after { content: '◉'; color: #75b4e3; }
.tl-visual.power { background: linear-gradient(140deg, #d4dce7, #7b8999); }
.tl-visual.power::after { content: '⚡'; color: #ffd6a4; }
.tl-visual.has-img { background: #e8eaf0; }
.tl-visual.has-img::before, .tl-visual.has-img::after { display: none; }
.tl-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; }
.tl-visual .tl-tag { position: absolute; top: 12px; left: 12px; background: #fff; color: #9d0718; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 5px; z-index: 2; }
.tl-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.tl-meta { color: var(--red); font-size: 11px; font-weight: 800; margin-bottom: 7px; }
.tl-page .tl-body h3 { font-size: 16px; line-height: 1.4; margin: 0 0 8px; }
.tl-page .tl-body h3 a { color: inherit; }
.tl-page .tl-body h3 a:hover { color: var(--red); }
.tl-body p { font-size: 13px; color: var(--muted); margin: 0 0 14px; flex: 1; }
.tl-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: #7c8796; gap: 8px; }
.tl-page .tl-bottom a { color: var(--red); font-weight: 750; white-space: nowrap; }
.tl-empty { padding: 35px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.tl-page .tl-reldiv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 6px 0 2px; color: #667085; font-size: 13px; font-weight: 700; }
.tl-page .tl-reldiv::before, .tl-page .tl-reldiv::after { content: ""; flex: 1 1 24px; height: 1px; background: #dde1e8; }
.tl-page .tl-article[data-rel] { opacity: .94; }
.tl-page .tl-articles[data-rel-collapsed] .tl-article[data-rel] { display: none; }   /* related posts folded away until the divider's button opens them */
.tl-page .tl-reldiv__txt { flex: 0 1 auto; text-align: center; }
@media (max-width: 700px) { .tl-page .tl-reldiv::before, .tl-page .tl-reldiv::after { display: none; } .tl-page .tl-reldiv { padding: 8px 0 2px; border-top: 1px solid #dde1e8; } }
.tl-page .tl-reldiv__btn { flex: 0 0 auto; background: #fff; color: #9d0718; border: 1px solid #e3c6cb; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; line-height: 1.3; cursor: pointer; transition: background-color .15s; }
.tl-page .tl-reldiv__btn:hover { background: #fff3f4; }
.tl-page .tl-reldiv__btn:focus-visible { outline: 2px solid #1c2532; outline-offset: 2px; }
.tl-page .tl-more { margin: 22px auto 0; display: block; background: #fff; color: var(--red); border: 1px solid #d7a1a9; border-radius: 8px; padding: 11px 23px; font-weight: 750; }
.tl-page .tl-more:disabled { opacity: .65; cursor: wait; }
.tl-page .tl-more:focus-visible { outline: 2px solid #9d0718; outline-offset: 2px; }
.tl-end { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.tl-moreerr { margin: 16px 0 0; text-align: center; color: #b32d2e; font-size: 13px; }

/* sidebar */
.tl-side .tl-panel { margin-bottom: 17px; }
.tl-page .tl-side h3 { font-size: 17px; margin: 0 0 12px; }
.tl-lesson { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.tl-lesson:last-child { border: 0; }
.tl-lesson .tl-num { background: #fff1f3; color: var(--red); border-radius: 8px; padding: 7px 10px; height: fit-content; font-weight: 800; }
.tl-lesson strong { font-size: 13px; line-height: 1.4; display: block; }
.tl-lesson small { color: #87909e; font-size: smaller; }

/* course box */
.tl-coursebox { background: linear-gradient(160deg, #fff 0%, #fff6f7 100%); border: 1px solid #efc6cc; border-radius: 14px; padding: 19px; margin-bottom: 17px; box-shadow: 0 8px 24px #8b11200b; }
.tl-coursebox .tl-coursepill { display: inline-block; background: #ffe7eb; color: #981023; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 20px; }
.tl-page .tl-coursebox h3 { font-size: 19px; line-height: 1.3; margin: 12px 0 7px; }
.tl-coursebox p { color: #667085; font-size: 13px; margin: 0 0 14px; }
.tl-coursebox label { display: block; font-size: 12px; font-weight: 700; margin: 11px 0 5px; }
.tl-page .tl-coursebox input[type="text"], .tl-page .tl-coursebox select, .tl-page .tl-coursebox textarea { width: 100%; background: #fff; border: 1px solid #d9dce3; border-radius: 8px; padding: 10px 11px; font-size: 13px; min-width: 0; color: #000; }
.tl-page .tl-coursebox select { line-height: normal; }
.tl-page .tl-coursebox textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.tl-page .tl-coursebox input:focus, .tl-page .tl-coursebox select:focus, .tl-page .tl-coursebox textarea:focus { outline: 2px solid #d58a97; outline-offset: 1px; }
.tl-page .tl-coursebox .tl-consent { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 12px; line-height: 1.5; margin: 13px 0 0; cursor: pointer; }
.tl-page .tl-coursebox .tl-consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; accent-color: #a6081d; }
.tl-page .tl-coursebox button[type="submit"] { width: 100%; background: #a6081d; color: #fff; border: 0; border-radius: 9px; padding: 12px; margin-top: 15px; font-weight: 800; }
.tl-page .tl-coursebox button[type="submit"]:disabled { opacity: .6; cursor: progress; }
.tl-coursebox .tl-coursehelp { font-size: 11px; color: #777f8d; margin-top: 10px; line-height: 1.5; }
.tl-coursebox .tl-coursemessage { margin-top: 12px; font-size: 12px; background: #fff2dd; border: 1px solid #f1d6a2; padding: 9px; border-radius: 8px; display: none; line-height: 1.5; }
.tl-coursebox .tl-coursemessage.is-ok { background: #e8f5ea; border-color: #b8dcc0; color: #1d5a2a; }
.tl-coursebox .tl-coursemessage.is-err { background: #fdecee; border-color: #f0b9c0; color: #8f0b18; }

/* repair CTA */
.tl-cta { background: #821123; color: #fff; border-radius: 14px; padding: 22px; }
.tl-page .tl-cta h3 { margin: 0 0 9px; font-weight: 700; color: #fff; }
.tl-page .tl-cta p { color: #ffe0e5; font-size: 13px; margin: 1em 0; }
.tl-page .tl-cta a { display: block; text-align: center; background: #fff; color: #821123; border-radius: 7px; padding: 10px; font-weight: 800; }

@media (max-width: 1000px) {
	.tl-hero { grid-template-columns: 1fr .35fr; }
	.tl-page .tl-hero h1 { font-size: 29px; }
	.tl-layout { grid-template-columns: 1fr 245px; }
	.tl-categories { grid-template-columns: repeat(2, 1fr); }
	.tl-page .tl-category { --tl-ico: clamp(75px, 10vw, 90px); }
	.tl-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	/* the sidebar tree becomes ONE button ("Danh mục kỹ thuật") above the list; tapping it opens the very same tree as an accordion */
	.tl-side { display: contents; }
	.tl-layout > div { order: 1; }
	.tl-side > * { order: 2; }
	.tl-side > .tl-cat { order: 0; padding: 0; }
	.tl-cat .tl-cat__title { display: none; }
	.tl-page .tl-catbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: #fff; color: #1c2532; border: 0; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 800; }
	.tl-catbtn__chev { display: inline-block; transition: transform .15s; color: var(--red); }
	.tl-cat.is-open .tl-catbtn__chev { transform: rotate(180deg); }
	.tl-cat .tl-cat__body { display: none; padding: 0 12px 12px; border-top: 1px solid var(--line); padding-top: 10px; }
	.tl-cat.is-open .tl-cat__body { display: block; }
	.tl-page .tl-node__pick { padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; }
	.tl-page .tl-leaf { padding-top: 8px; padding-bottom: 8px; }
	.tl-page .tl-node__toggle { flex-basis: 34px; }
	.tl-wrap { padding: 14px 12px 35px; }
	.tl-hero { display: block; padding: 25px 20px; border-radius: 12px; }
	.tl-page .tl-hero h1 { font-size: 26px; }
	.tl-heroart { display: none; }
	.tl-page .tl-search input { padding: 8px; font-size: 12px; }
	.tl-page .tl-search button { padding: 10px 12px; font-size: 12px; }
	.tl-stats { gap: 8px; margin: 12px 0 24px; }
	.tl-stat { padding: 11px 10px 28px; column-gap: 6px; min-height: 96px; }
	.tl-stat__main { flex-direction: column; align-items: flex-start; gap: 3px; }
	.tl-stat .tl-emoji { font-size: 20px; }
	.tl-page .tl-stat b { font-size: 13px; }
	.tl-stat__num { font-size: 23px; letter-spacing: -.8px; }
	.tl-circuit { left: 10px; right: 10px; bottom: 5px; }
	.tl-page .tl-sectiontitle h2 { font-size: 19px; }
	.tl-categories { gap: 8px; }
	.tl-page .tl-category { padding: 11px 24px 11px 11px; gap: 8px; }
	.tl-page .tl-fb__arrow { width: 24px; height: 24px; }
	.tl-page .tl-filter { padding: 4px 9px; font-size: 12.5px; }
	.tl-fb { margin-bottom: 12px; gap: 4px; }
	.tl-page .tl-bar { right: 7px; width: 10px; }
	.tl-page .tl-bar__plus { width: 9px; height: 9px; margin-left: -4.5px; bottom: calc(100% + 4px); background-size: 100% 2px, 2px 100%; }
	.tl-page .tl-category .tl-count { margin-top: 2px; column-gap: 4px; }
	.tl-page .tl-category .tl-count__num { font-size: 18px; }
	.tl-page .tl-category .tl-count__txt { font-size: 10px; }
	.tl-page .tl-category { --tl-ico: clamp(60px, 17vw, 75px); }
	.tl-category strong { font-size: 12px; }
	.tl-category small { font-size: 10px; }
	.tl-layout { grid-template-columns: 1fr; gap: 16px; }
	.tl-panel { padding: 14px; }
	.tl-articles { grid-template-columns: 1fr; gap: 12px; }
	.tl-article { display: grid; grid-template-columns: 125px 1fr; min-height: 150px; }
	.tl-page .tl-visual { height: 100%; min-height: 150px; }
	.tl-visual::before { width: 66px; height: 100px; border-width: 4px; }
	.tl-visual.board::before { width: 95px; height: 78px; }
	.tl-visual::after { font-size: 39px; }
	.tl-body { padding: 11px; }
	.tl-page .tl-body h3 { font-size: 14px; }
	.tl-body p { font-size: 12px; margin-bottom: 6px; }
	.tl-meta { font-size: 10px; }
	.tl-bottom { font-size: 11px; }
	.tl-side .tl-panel { margin: 0; }
	.tl-page .tl-heading h2 { font-size: 19px; }
}
@media (max-width: 1000px) {
	.tl-series[data-depth] > .tl-node__kids { margin-left: 5px; padding-left: 4px; }   /* tablet: the sidebar is only ~245px wide */
}
@media (max-width: 700px) {
	.tl-series[data-depth] > .tl-node__kids { margin-left: 8px; padding-left: 6px; }   /* phone: the tree is full width again */
}
@media (max-width: 360px) {
	.tl-categories { grid-template-columns: 1fr; }   /* 320px phones: one card per row so no title is squeezed */
}
@media (prefers-reduced-motion: reduce) {
	.tl-stat .tl-circuit__pulse, .tl-stat .tl-dot::after, .tl-stat .tl-circuit__flash { animation: none !important; }
	.tl-stat .tl-circuit__pulse { opacity: 0 !important; }
	.tl-articles, .tl-page .tl-category { transition: none; }
	.tl-page .tl-category:hover { transform: none; }
	.tl-page .tl-bar__line::before, .tl-page .tl-bar__line::after { animation: none; }
	.tl-page .tl-bar__line::before { transform: scaleY(.55); opacity: .55; }
	.tl-page .tl-bar__line::after { opacity: 0; }
	.tl-page .tl-bar__line, .tl-page .tl-bar__plus { transition: none; }
	.tl-page .tl-category .tl-em img { transition: none; transform: none !important; }
}

/* hero search feedback: where the keyword is searched, and a way to the results / to clear it */
.tl-page #library { scroll-margin-top: 12px; }   /* html already has a scroll-padding-top for the sticky header: 12px more = the panel sits just under it */
.tl-page .tl-herostatus { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: #ffe3e6; }
.tl-page .tl-herostatus[hidden], .tl-page .tl-scope[hidden] { display: none; }
.tl-page .tl-herostatus button { background: #ffffff1e; color: #fff; border: 1px solid #ffffff5c; border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.tl-page .tl-herostatus button:hover { background: #ffffff33; }
.tl-page .tl-quick button.is-on { background: #fff; color: #9d0718; border-color: #fff; font-weight: 700; }
.tl-page .tl-scope { margin: -4px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: #667085; }
.tl-page .tl-scope span { overflow-wrap: anywhere; }
.tl-page .tl-scope button { background: #fff; color: #9d0718; border: 1px solid #e3c6cb; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; line-height: 1.4; cursor: pointer; }
.tl-page .tl-scope button:hover { background: #fff3f4; }
.tl-searchnote[hidden] { display: none; }
.tl-page .tl-searchnote { margin: -6px 0 14px; display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; line-height: 1.45; color: #475467; }
.tl-page .tl-searchnote span { overflow-wrap: anywhere; background: #f4f6fa; border: 1px solid #e4e7ee; border-radius: 8px; padding: 4px 10px; }
.tl-page .tl-searchnote [data-tl-note-fuzzy] { background: #fff8e6; border-color: #f0dca3; color: #6b4e00; }
.tl-page .tl-herostatus button:focus-visible, .tl-page .tl-scope button:focus-visible { outline: 2px solid #1c2532; outline-offset: 2px; }