/* Article cover art (scripts/pages/cover-art.mjs): inline SVG drawn with theme tokens, so it follows dark / ice / aurora / ocean and the card's data-accent.
   Used by the home "Kiến thức" cards, the /blog/ magazine and the article head. Generated markup: <span class="cv-wrap"><svg class="cv">…</svg></span>. */
.cv-wrap{position:relative;display:block;overflow:hidden;background:radial-gradient(90% 85% at 50% 118%,color-mix(in srgb,var(--accent) 28%,#0000),#0000 72%),radial-gradient(60% 70% at 8% 0,color-mix(in srgb,var(--accent) 12%,#0000),#0000 70%),var(--bg-alt)}
.cv-wrap>.cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.cv{font-family:inherit}

.cv-f1{fill:color-mix(in srgb,var(--text) 5%,#0000)}
.cv-f2{fill:color-mix(in srgb,var(--text) 10%,#0000)}
.cv-f3{fill:color-mix(in srgb,var(--text) 22%,#0000)}
.cv-s1{stroke:color-mix(in srgb,var(--text) 22%,#0000);stroke-width:1.2}
.cv-fa{fill:var(--accent)}
.cv-fa2{fill:color-mix(in srgb,var(--accent) 22%,#0000)}
.cv-sa{stroke:var(--accent);stroke-width:1.6}
.cv-ring{fill:none;stroke:color-mix(in srgb,var(--text) 14%,#0000);stroke-width:7}
.cv-ring-a{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.cv-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cv-line-s{fill:none;stroke:color-mix(in srgb,var(--text) 55%,#0000);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-track{stroke:color-mix(in srgb,var(--text) 18%,#0000);stroke-width:6;stroke-linecap:round}
.cv-track-a{stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.cv-hole{fill:var(--bg-alt)}
.cv-dash{fill:none;stroke:color-mix(in srgb,var(--text) 45%,#0000);stroke-width:1.6;stroke-dasharray:3 5;stroke-linecap:round}
.cv-ico{fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cv-mark{fill:var(--bg-alt);stroke:var(--accent);stroke-width:1.6}
.cv-check{fill:none;stroke:var(--bg-alt);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv-t{font-size:11px;font-weight:500;fill:var(--text-2)}
.cv-ta{font-size:11px;font-weight:600;fill:var(--accent)}
.cv-tn{font-size:11px;font-weight:600;fill:var(--text)}

/* the lines draw themselves once when the card reveals; nothing moves with reduced motion */
@media (prefers-reduced-motion:no-preference){
  .cv-line,.cv-dash{transition:stroke-dashoffset .9s var(--ease,ease)}
  html.pw-js .rv:not(.in) .cv-line{stroke-dasharray:420;stroke-dashoffset:420}
  .rv.in .cv-line{stroke-dasharray:420;stroke-dashoffset:0}
}

/* cover inside the other card shells */
.hm-post-art{position:relative}
.hm-post-art .cv-wrap{position:absolute;inset:0}
.hm-post-art .cv{transition:transform .5s var(--ease,ease)}
.hm-post:hover .hm-post-art .cv{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.hm-post:hover .hm-post-art .cv{transform:none}}