/* VectorIS — "Ommatidia Lab" design system */
:root{
  --ink:#0a1410; --ink-2:#12211b; --ink-3:#1b3029;
  --paper:#f4f1e6; --paper-2:#ebe6d4; --card:#fffdf6;
  --lime:#c8f23a; --amber:#ffb627; --teal:#4fd1b5; --coral:#ff6b4a;
  --text:#18231f; --muted:#56635d; --line:#d8d1ba;
  --on-dark:#e9f0ea; --on-dark-muted:#a9bab1;
  --r:18px; --r-sm:10px;
  --shadow:0 1px 0 rgba(10,20,16,.06),0 10px 30px -12px rgba(10,20,16,.25);
  --f-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-head:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-serif:"Noto Serif",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-sans);color:var(--text);background:var(--paper);line-height:1.65;font-size:1.02rem}
img,svg{max-width:100%;display:block}
a{color:#0d6b52;text-underline-offset:3px}
a:hover{color:#0a4d3b}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.22;letter-spacing:-.015em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.1rem,6vw,4.1rem)}
h2{font-size:clamp(1.6rem,3.8vw,2.6rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--ink);padding:10px 14px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#0d6b52;display:inline-flex;align-items:center;gap:.5em;margin-bottom:.9em}
.eyebrow::before{content:"";width:10px;height:11px;background:currentColor;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.dark .eyebrow{color:var(--lime)}
.lede{font-size:1.15rem;color:var(--muted);max-width:62ch}
.dark .lede{color:var(--on-dark-muted)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,20,16,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(200,242,58,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand svg{width:34px;height:34px}
.brand b{color:var(--lime);font-weight:800}
.brand:hover{color:#fff}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--on-dark);text-decoration:none;padding:8px 12px;border-radius:999px;font-size:.93rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:rgba(200,242,58,.14);color:var(--lime)}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;width:44px;height:40px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;transition:.2s}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--ink);padding:10px 16px 18px;border-bottom:1px solid rgba(200,242,58,.15);display:none}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:12px 14px;border-radius:10px}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.35em;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:.98rem;font-family:inherit;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#d9ff5c;color:var(--ink)}
.btn-ghost{border-color:rgba(233,240,234,.35);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{color:var(--lime)}

/* Sections */
section{padding:84px 0}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.dark a{color:var(--lime)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.section-head p{margin:0}
.hexbg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64l28 16v32M28 64L0 80v32' fill='none' stroke='%23c8f23a' stroke-opacity='.07'/%3E%3C/svg%3E")}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 96px;background:radial-gradient(1200px 600px at 80% 20%,#173a2c 0%,transparent 60%),radial-gradient(800px 500px at 0% 100%,#1b2f12 0%,transparent 60%),var(--ink);color:var(--on-dark)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{color:#fff}
.hero h1 em{font-family:var(--f-serif);font-style:italic;font-weight:700;color:var(--lime)}
.hero h1 .amber{color:var(--amber)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;color:var(--on-dark-muted)}
.hero-meta span{display:inline-flex;gap:.5em;align-items:center}
.hero-meta i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.eye{width:100%;max-width:520px;margin-left:auto;aspect-ratio:1}
.eye .cell{fill:#12241d;stroke:rgba(200,242,58,.35);stroke-width:.6;animation:pulse 5s ease-in-out infinite}
.eye .cell.l{fill:#1d3a2e}
.eye .cell.h{fill:var(--lime);fill-opacity:.55}
.eye .cell.a{fill:var(--amber);fill-opacity:.5}
@keyframes pulse{0%,100%{fill-opacity:1}50%{fill-opacity:.35}}
.flyer{position:absolute;z-index:3;width:70px;color:var(--on-dark);opacity:.9;offset-rotate:auto}
.flyer.f1{top:18%;left:52%;animation:fly1 16s linear infinite}
.flyer.f2{top:70%;left:8%;width:46px;animation:fly2 22s linear infinite;opacity:.55}
@keyframes fly1{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(120px,-40px) rotate(6deg)}50%{transform:translate(40px,60px) rotate(-12deg)}75%{transform:translate(-80px,10px) rotate(4deg)}100%{transform:translate(0,0) rotate(-8deg)}}
@keyframes fly2{0%{transform:translate(0,0)}33%{transform:translate(160px,-50px) rotate(10deg)}66%{transform:translate(60px,-120px) rotate(-10deg)}100%{transform:translate(0,0)}}
.wing{transform-origin:50% 50%;animation:buzz .08s linear infinite alternate}
@keyframes buzz{from{opacity:.25}to{opacity:.7}}
.scanline{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(200,242,58,.06) 50%,transparent 100%);height:120px;animation:scan 7s linear infinite;z-index:1;pointer-events:none}
@keyframes scan{from{transform:translateY(-120px)}to{transform:translateY(900px)}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:36px}}

/* Page hero (subpages) */
.page-hero{padding:64px 0 56px;background:radial-gradient(900px 400px at 90% 0,#1a3b2d,transparent 60%),var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem)}
.page-hero .lede{color:var(--on-dark-muted)}
.crumbs{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:18px}
.crumbs a{color:var(--on-dark-muted);text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.page-hero .hero-ill{position:absolute;right:4%;bottom:-10px;width:min(300px,38vw);color:var(--lime);opacity:.9}
@media (max-width:700px){.page-hero .hero-ill{position:static;width:150px;margin-top:18px}}

/* Specimen cards */
.specimens{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1050px){.specimens{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.specimens{grid-template-columns:repeat(2,1fr)}}
.specimen{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;overflow:hidden}
.specimen:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow);color:var(--text)}
.specimen::before{content:"";position:absolute;top:12px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(255,107,74,.2);transform:translateX(-50%)}
.specimen .no{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);letter-spacing:.1em}
.specimen svg{width:100%;height:auto;aspect-ratio:1;color:var(--ink);margin:8px 0 6px;transition:transform .4s}
.specimen:hover svg{transform:scale(1.06) rotate(4deg)}
.specimen h3{margin:0;font-size:1.35rem}
.specimen .latin{font-family:var(--f-serif);font-style:italic;color:var(--muted);font-size:.9rem}
.specimen .tag{margin-top:10px;font-size:.84rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}

/* Category tiles */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:1fr}}
.cat{background:var(--ink-2);border:1px solid rgba(200,242,58,.14);border-radius:var(--r);padding:22px;color:var(--on-dark);text-decoration:none;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.cat:hover{border-color:var(--lime);transform:translateY(-3px);color:var(--on-dark)}
.cat .ic{width:46px;height:46px;color:var(--lime);margin-bottom:14px}
.cat h3{font-size:1.15rem;margin-bottom:.35em}
.cat p{color:var(--on-dark-muted);font-size:.92rem;margin:0}
.cat .n{position:absolute;right:14px;top:12px;font-family:var(--f-mono);font-size:.7rem;color:rgba(200,242,58,.5)}

/* Article cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-3{grid-template-columns:1fr}}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--text)}
.acard .thumb{aspect-ratio:16/8;background:var(--ink);position:relative;overflow:hidden;color:var(--lime)}
.acard .thumb svg{width:100%;height:100%}
.acard .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.acard .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.chip{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.chip.c-nghien-cuu{background:#e3f1ff;border-color:#bcd8f5}
.chip.c-nhan-biet{background:#fff1d6;border-color:#f2d59b}
.chip.c-phong-tru{background:#e4f7e9;border-color:#b8e2c3}
.chip.c-sang-tao{background:#f0e8ff;border-color:#d5c4f5}
.chip.c-khao-nghiem{background:#ffe7e0;border-color:#f5c3b5}
.acard h3{font-size:1.2rem;margin-bottom:.4em}
.acard p{color:var(--muted);font-size:.94rem;flex:1}
.acard .more{font-weight:700;color:#0d6b52;font-size:.9rem}
.overview{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* Filter chips */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{font:inherit;font-size:.9rem;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.filters button:hover{border-color:var(--ink)}

/* Services teaser & list */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}
.svc-item{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:24px;position:relative}
.svc-item .ic{width:44px;height:44px;color:#0d6b52;margin-bottom:12px}
.svc-item h3{font-size:1.15rem}
.svc-item p{color:var(--muted);font-size:.94rem;margin:0}
.svc-item .k{position:absolute;top:18px;right:18px;font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}

/* News */
.news-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start}
@media (max-width:900px){.news-wrap{grid-template-columns:1fr}}
.news-list{display:grid;gap:14px}
.news-empty{border:1.5px dashed rgba(200,242,58,.4);border-radius:var(--r);padding:28px;text-align:center;color:var(--on-dark-muted)}
.news-empty strong{display:block;color:var(--lime);font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.news-item{background:var(--ink-2);border:1px solid rgba(200,242,58,.14);border-radius:var(--r-sm);padding:16px 18px}
.news-item time{font-family:var(--f-mono);font-size:.72rem;color:var(--lime)}
.news-item h3{font-size:1.08rem;margin:.3em 0}
.news-item p{margin:0;color:var(--on-dark-muted);font-size:.92rem}
.news-item .src{font-size:.82rem;margin-top:8px;display:block}
.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:620px){.explain{grid-template-columns:1fr}}
.explain div{background:var(--ink-2);border-radius:var(--r-sm);padding:16px;border:1px solid rgba(255,255,255,.06)}
.explain b{display:block;color:#fff;margin-bottom:4px;font-size:.95rem}
.explain span{color:var(--on-dark-muted);font-size:.88rem}
.explain .lbl{font-family:var(--f-mono);font-size:.65rem;color:var(--amber);letter-spacing:.1em;text-transform:uppercase}

/* CTA */
.cta{background:var(--lime);color:var(--ink);border-radius:28px;padding:48px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
.cta h2{margin-bottom:.3em}
.cta p{margin:0;font-size:1.08rem}
.cta .actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta .mail{font-family:var(--f-mono);font-weight:700;color:var(--ink);font-size:1.02rem}
.cta::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;opacity:.18;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3l41 23.5v47L50 97 9 73.5v-47z' fill='none' stroke='%230a1410' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:32px 24px}}

/* Intro split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
.stats-ph{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pill-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.pill-card b{font-family:var(--f-head);font-size:1.3rem;display:block;margin-bottom:4px}
.pill-card span{color:var(--muted);font-size:.9rem}

/* Content / article pages */
.content-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
@media (max-width:900px){.content-grid{grid-template-columns:1fr}.toc{position:static!important}}
.toc{position:sticky;top:88px;border-left:2px solid var(--line);padding-left:16px;font-size:.9rem}
.toc b{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.toc li{margin:0 0 8px;counter-increment:t}
.toc a{color:var(--text);text-decoration:none}
.toc a::before{content:counter(t,decimal-leading-zero) " ";font-family:var(--f-mono);font-size:.72rem;color:#0d6b52}
.toc a:hover{color:#0d6b52}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.45rem,3vw,1.95rem);margin-top:1.8em;padding-top:.2em;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose .note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-sm);padding:14px 18px;margin:1.4em 0;font-size:.96rem}
.prose .warn{border-left-color:var(--coral)}
.prose .tip{border-left-color:var(--teal)}
.src-ph{font-family:var(--f-mono);font-size:.72rem;color:#8a8672;background:rgba(0,0,0,.035);padding:1px 6px;border-radius:4px;white-space:nowrap}
.dark .src-ph{color:#7f8f87;background:rgba(255,255,255,.05)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.2em 0 1.6em}
.kv div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px}
.kv b{display:block;font-family:var(--f-head);font-size:1.08rem;margin-bottom:4px}
.kv i{font-family:var(--f-serif);color:var(--muted)}
.kv span{font-size:.93rem;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:1.2em 0 1.6em}
table{border-collapse:collapse;width:100%;font-size:.94rem;background:var(--card)}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--paper-2);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}

/* Lifecycle timeline */
.life{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0;margin:1.4em 0 1.8em;counter-reset:s;position:relative}
.life::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px)}
.life .st{text-align:center;padding:0 8px;position:relative}
.life .dot{width:68px;height:68px;margin:0 auto 10px;background:var(--ink);color:var(--lime);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;position:relative;z-index:1}
.life .dot svg{width:34px;height:34px}
.life b{display:block;font-family:var(--f-head);font-size:1.05rem}
.life span{font-size:.86rem;color:var(--muted);display:block}
@media (max-width:620px){
  .life{grid-template-columns:1fr;gap:14px}
  .life::before{top:0;bottom:0;left:33px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--ink) 0 8px,transparent 8px 14px)}
  .life .st{display:grid;grid-template-columns:68px 1fr;gap:14px;text-align:left;align-items:center}
  .life .dot{margin:0}
}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--ink-2);border:1px solid rgba(200,242,58,.15);border-radius:var(--r);padding:22px;counter-increment:step;position:relative}
.step::before{content:counter(step,decimal-leading-zero);font-family:var(--f-mono);font-size:2rem;font-weight:700;color:var(--lime);display:block;margin-bottom:8px}
.step h3{font-size:1.08rem}
.step p{margin:0;font-size:.9rem;color:var(--on-dark-muted)}

/* Service detail */
.svc-detail{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:36px 0;border-top:1px solid var(--line)}
.svc-detail:first-child{border-top:0}
.svc-detail .ic{width:72px;height:72px;color:#0d6b52;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px}
.svc-detail ul{columns:2;column-gap:32px;padding-left:1.1em;margin:0}
.svc-detail li{break-inside:avoid;margin-bottom:.4em}
@media (max-width:640px){.svc-detail{grid-template-columns:1fr}.svc-detail ul{columns:1}}

/* Contact */
.form{display:grid;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form .row{grid-template-columns:1fr}}
label{font-weight:600;font-size:.92rem;display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:#0d6b52;outline:none;box-shadow:0 0 0 3px rgba(13,107,82,.15)}
textarea{min-height:150px;resize:vertical}
.form small{color:var(--muted)}

/* Footer */
.site-footer{background:var(--ink);color:var(--on-dark-muted);padding:56px 0 28px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:6px}
.site-footer a{color:var(--on-dark);text-decoration:none}
.site-footer a:hover{color:var(--lime)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem}
.contact-line{color:var(--on-dark)}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .flyer,.scanline{display:none}
}

/* contrast fixes on dark heroes */
.hero .lede,.page-hero .lede{color:var(--on-dark-muted)}
.hero .eyebrow,.page-hero .eyebrow{color:var(--lime)}
.page-hero .lede a{color:var(--lime)}
.life .dot svg{width:38px;height:38px}
@media (max-width:900px){.eye{max-width:300px;margin:8px auto 0}}

/* ===== v2: zones, mega menu, ticker, counter ===== */
.nav-links{align-items:center}
.has-mega{position:relative}
.mega-btn{font:inherit;font-size:.93rem;color:var(--on-dark);background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.mega-btn:hover,.has-mega.open .mega-btn,.mega-btn[aria-current="page"]{background:rgba(200,242,58,.14);color:var(--lime)}
.mega-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.has-mega.open .mega-btn::after{transform:rotate(-135deg)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(760px,92vw);background:var(--ink);border:1px solid rgba(200,242,58,.22);border-radius:18px;padding:16px;display:none;grid-template-columns:repeat(3,1fr);gap:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.has-mega.open .mega{display:grid}
@media (hover:hover) and (min-width:901px){.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}}
.has-mega:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.mega a{display:block;padding:10px 12px;border-radius:12px;color:var(--on-dark);text-decoration:none}
.mega a:hover{background:rgba(200,242,58,.1);color:var(--lime)}
.mega a b{display:block;font-size:.92rem}
.mega a span{display:block;font-size:.78rem;color:var(--on-dark-muted);line-height:1.35}
.mega .all{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:12px;color:var(--lime);font-weight:700}
@media (max-width:900px){
  .nav-links{max-height:calc(100vh - 64px);overflow:auto;align-items:stretch}
  .mega-btn{width:100%;justify-content:space-between;padding:12px 14px;border-radius:10px}
  .mega{position:static;transform:none;width:auto;grid-template-columns:1fr;box-shadow:none;border:0;padding:4px 0 8px 10px;background:transparent}
  .mega a span{display:none}
}
.ticker{background:var(--lime);color:var(--ink);font-size:.86rem;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.1)}
.ticker .wrap{display:flex;align-items:center;gap:14px;height:38px}
.ticker .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--ink);color:var(--lime);padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none}
.ticker .track{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker .items{display:inline-flex;gap:36px;white-space:nowrap;animation:tick 60s linear infinite;padding-left:10px}
.ticker:hover .items{animation-play-state:paused}
.ticker a{color:var(--ink);text-decoration:none;font-weight:600}
.ticker a:hover{text-decoration:underline}
.ticker a::before{content:"⬢ ";color:#0d6b52}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{overflow-x:auto}}
.views{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;padding:5px 11px;border-radius:999px;border:1px solid rgba(200,242,58,.35);color:var(--lime);background:rgba(200,242,58,.06);margin-top:6px}
.views svg{width:15px;height:15px}
.views[hidden]{display:none}
.site-footer .views{margin-top:0}
.art-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.art-meta .m{font-family:var(--f-mono);font-size:.76rem;color:var(--on-dark-muted);letter-spacing:.04em}
.badge-new{display:inline-block;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;background:var(--coral);color:#fff;padding:3px 8px;border-radius:999px}
.zone-sec{padding:44px 0;border-top:1px solid var(--line)}
.zone-sec:first-of-type{border-top:0}
.zone-sec .section-head{margin-bottom:22px}
.zone-sec h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0}
.zone-dot{display:inline-block;width:14px;height:16px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);margin-right:10px;vertical-align:middle;border:0}
.zone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.zone-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.zone-grid{grid-template-columns:1fr}}
.zone-card{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s;position:relative}
.zone-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--text)}
.zone-card b{font-family:var(--f-head);font-size:1.08rem}
.zone-card span{font-size:.86rem;color:var(--muted)}
.zone-card .cnt{position:absolute;top:14px;right:14px;font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}
.dark .zone-card{background:var(--ink-2);border-color:rgba(200,242,58,.14);color:var(--on-dark)}
.dark .zone-card span,.dark .zone-card .cnt{color:var(--on-dark-muted)}
.empty-zone{border:1.5px dashed var(--line);border-radius:var(--r);padding:30px;text-align:center;color:var(--muted)}
.empty-zone strong{display:block;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#0d6b52;margin-bottom:4px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.pn a{display:block;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--text)}
.pn a:hover{border-color:var(--ink)}
.pn small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pn b{font-family:var(--f-head)}
.pn .next{text-align:right}
@media (max-width:620px){.pn{grid-template-columns:1fr}.pn .next{text-align:left}}
.refs{font-size:.93rem}
.refs li{word-break:break-word}
.disclaimer{background:#fff4f1;border:1px solid #f5c3b5;border-radius:var(--r-sm);padding:14px 18px;margin:1.4em 0;font-size:.95rem}
.acard .rt{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}
.acard .thumb{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='44' viewBox='0 0 26 44'%3E%3Cpath d='M13 0l13 7.5v15L13 30 0 22.5v-15zM13 30v14' fill='none' stroke='%23c8f23a' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E")}

/* ===== v3: mobile panel, compact grids, magazine blocks, illustrations ===== */
body.menu-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}
.site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,20,16,.97)}
.nav-toggle{position:relative;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mnav{position:fixed;inset:0;z-index:1000;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mnav[hidden]{display:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;border-bottom:1px solid rgba(200,242,58,.15);position:sticky;top:0;background:var(--ink);flex:none}
.mnav-close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;touch-action:manipulation}
.mnav-body{padding:12px 16px 40px}
.mnav a{color:var(--on-dark);text-decoration:none}
.mnav-main{list-style:none;margin:0;padding:0}
.mnav-main>li>a,.mnav-acc>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 12px;font:inherit;font-size:1.08rem;font-weight:600;border-radius:12px;color:var(--on-dark);background:none;border:0;text-align:left;cursor:pointer}
.mnav-main>li>a[aria-current="page"]{color:var(--lime);background:rgba(200,242,58,.1)}
.mnav-acc>button::after{content:"+";font-family:var(--f-mono);font-size:1.3rem;color:var(--lime)}
.mnav-acc>button[aria-expanded="true"]::after{content:"–"}
.mnav-sub{list-style:none;margin:0 0 8px;padding:4px 0 4px 14px;border-left:2px solid rgba(200,242,58,.25)}
.mnav-sub a{display:block;padding:10px 12px;border-radius:10px;font-size:.98rem}
.mnav-sub a small{display:block;color:var(--on-dark-muted);font-size:.8rem}
.mnav-sub a:active,.mnav-main>li>a:active{background:rgba(200,242,58,.12)}
.mnav-foot{margin-top:18px;padding:14px 12px;border-top:1px solid rgba(255,255,255,.08);font-size:.9rem;color:var(--on-dark-muted)}
@media (max-width:900px){.site-header .nav-links{display:none!important}}
@media (min-width:901px){.mnav{display:none!important}}

/* compact card grids 5/4/3/2 */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:1180px){.grid-5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:920px){.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.grid-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:360px){.grid-5{grid-template-columns:1fr}}
.acard.sm{border-radius:14px}
.acard.sm .thumb{aspect-ratio:16/10}
.acard.sm .body{padding:12px 13px 14px}
.acard.sm .meta{gap:6px;margin-bottom:6px}
.acard.sm h3{font-size:.98rem;line-height:1.32;margin-bottom:.35em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard.sm p{font-size:.84rem;line-height:1.5;margin-bottom:.6em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard.sm .chip{font-size:.6rem;padding:3px 7px}
.acard.sm .overview,.acard.sm .rt{font-size:.62rem}
.acard.sm .more{display:none}
@media (max-width:680px){.acard.sm p{display:none}.acard.sm h3{font-size:.92rem}}
.acard .thumb .ill{width:100%;height:100%}
.acard.kid .thumb{background:#e7f6ff}

/* pagination + archive */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:32px;font-family:var(--f-mono);font-size:.82rem}
.pager a,.pager span{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;color:var(--text);background:var(--card)}
.pager .cur{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.pager a:hover{border-color:var(--ink)}
.feed-count{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.arch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.arch-list a{display:flex;justify-content:space-between;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:var(--text);font-weight:700}
.arch-list a span{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);font-weight:500}
.more-row{display:flex;justify-content:center;margin-top:26px}

/* magazine blocks */
.blk{padding:56px 0}
.blk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.blk-head h2{font-size:clamp(1.35rem,2.8vw,1.9rem);margin:0}
.blk-head p{margin:.3em 0 0;color:var(--muted);max-width:60ch}
.link-more{font-weight:700;text-decoration:none;white-space:nowrap}
.kids{background:linear-gradient(180deg,#e7f6ff,#f4fbff);border-top:4px dashed #8fd3ff;border-bottom:4px dashed #8fd3ff}
.kids .eyebrow{color:#1f6fb2}
.kids h2{color:#153a5b}
.kid-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.kid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.kid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kcard{background:#fff;border-radius:22px;border:3px solid #cfeaff;overflow:hidden;text-decoration:none;color:#153a5b;display:flex;flex-direction:column;transition:transform .2s}
.kcard:hover{transform:translateY(-4px) rotate(-.6deg);color:#153a5b}
.kcard .ill{width:100%;aspect-ratio:16/10;height:auto}
.kcard b{display:block;padding:12px 14px 4px;font-size:1rem;line-height:1.3}
.kcard span{padding:0 14px 14px;font-size:.84rem;color:#3d6280}
.tips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:tip;list-style:none;margin:0;padding:0}
@media (max-width:980px){.tips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tips{grid-template-columns:1fr}}
.tips li{counter-increment:tip;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;position:relative}
.tips li::before{content:counter(tip,decimal-leading-zero);font-family:var(--f-mono);font-weight:700;font-size:1.5rem;color:#0d6b52;display:block;margin-bottom:4px}
.tips b{display:block;margin-bottom:2px}
.tips span{font-size:.9rem;color:var(--muted)}
.src-line{font-size:.8rem;color:var(--muted);margin-top:12px}
.src-line a{color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.quick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qcard{background:var(--ink-2);border:1px solid rgba(200,242,58,.16);border-radius:16px;padding:14px;text-decoration:none;color:var(--on-dark);display:flex;flex-direction:column;gap:6px}
.qcard svg{width:64px;height:64px;color:var(--lime)}
.qcard b{font-size:1.02rem;color:#fff}
.qcard ul{margin:0;padding-left:1.1em;font-size:.82rem;color:var(--on-dark-muted)}
.qcard:hover{border-color:var(--lime);color:var(--on-dark)}
.season{display:grid;grid-template-columns:1fr 1.2fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
@media (max-width:820px){.season{grid-template-columns:1fr}}
.season .ill-wrap{min-height:220px;height:100%}
.season .ill-wrap .ill{height:100%;width:100%}
.season .txt{padding:26px 28px}
.season ul{padding-left:1.1em;margin:.4em 0 0}
.season li{margin-bottom:.35em}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.qa{grid-template-columns:1fr}}
.qa details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.qa summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--f-mono);color:#0d6b52;font-size:1.2rem}
.qa details[open] summary::after{content:"–"}
.qa details p{color:var(--muted);font-size:.94rem}
.jobs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.jobs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.job{border-radius:16px;padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;min-height:110px;border:1px solid rgba(0,0,0,.06)}
.job b{font-size:.95rem;line-height:1.3}
.job span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:auto}
.job:hover{transform:translateY(-3px);color:var(--ink)}
.rlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (max-width:760px){.rlist{grid-template-columns:1fr}}
.rlist li{border-top:1px solid var(--line);padding:12px 0}
.rlist a{text-decoration:none;color:var(--text);font-weight:700;display:block}
.rlist a:hover{color:#0d6b52}
.rlist small{display:block;font-family:var(--f-mono);font-size:.68rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.toplist{list-style:none;margin:0;padding:0;counter-reset:tp;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.toplist li{counter-increment:tp;display:flex;gap:12px;align-items:flex-start;background:var(--ink-2);border-radius:14px;padding:12px 14px;border:1px solid rgba(200,242,58,.12)}
.toplist li::before{content:counter(tp);font-family:var(--f-mono);font-weight:700;font-size:1.4rem;color:var(--lime);min-width:1.4em}
.toplist a{color:#fff;text-decoration:none;font-weight:600;line-height:1.35}
.toplist small{display:block;color:var(--on-dark-muted);font-family:var(--f-mono);font-size:.7rem;margin-top:3px}
.top-empty{color:var(--on-dark-muted);font-size:.92rem;border:1.5px dashed rgba(200,242,58,.3);border-radius:14px;padding:16px}

/* article hero with illustration */
.art-hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center}
@media (max-width:860px){.art-hero .wrap{grid-template-columns:1fr;gap:18px}}
.art-hero .ill-wrap{border-radius:20px;overflow:hidden;border:1px solid rgba(200,242,58,.2);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.art-hero .ill-wrap .ill{width:100%;height:auto;aspect-ratio:16/10}
.art-hero h1{font-size:clamp(1.7rem,4vw,2.8rem)}
.kidbox{background:#eef8ff;border:2px dashed #8fd3ff;border-radius:18px;padding:16px 20px;margin:1.6em 0;color:#153a5b}
.kidbox h3{margin:0 0 .4em;font-size:1.1rem;color:#153a5b}
.kidbox ul{margin:0;padding-left:1.2em}
.kidbox .who{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#1f6fb2;display:block;margin-bottom:4px}
.upd{display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;background:#e4f7e9;border:1px solid #b8e2c3;color:#0d6b52;border-radius:999px;padding:4px 10px;margin:0 0 1em}
.kid-prose{font-size:1.1rem;line-height:1.75}
.kid-prose h2{color:#153a5b}

/* illustration animations (only inside .ill-anim; thumbnails stay static) */
.ill-anim .wg{animation:ibuzz .08s linear infinite alternate}
.ill-anim .wg2{animation-delay:.04s}
@keyframes ibuzz{from{opacity:.25}to{opacity:.9}}
.ill-anim .flyA,.ill-anim .flyB,.ill-anim .bounceL,.ill-anim .bounceR,.ill-anim .shuttle,.ill-anim .orbit,.ill-anim .spin,.ill-anim .pulse,.ill-anim .dash,.ill-anim .rise,.ill-anim .drop,.ill-anim .flip,.ill-anim .seq,.ill-anim .grow,.ill-anim .draw,.ill-anim .wave,.ill-anim .march,.ill-anim .wiggle,.ill-anim .sway,.ill-anim .ripple,.ill-anim .breath,.ill-anim .shoo,.ill-anim .rub,.ill-anim .away,.ill-anim .crawl,.ill-anim .flutter{transform-box:fill-box;transform-origin:center}
.ill-anim .flyA{animation:iflyA 6s ease-in-out infinite}
@keyframes iflyA{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(-18px,-10px) rotate(3deg)}50%{transform:translate(-6px,10px) rotate(-6deg)}75%{transform:translate(14px,-4px) rotate(2deg)}}
.ill-anim .flyB{animation:iflyB 4.5s ease-in-out infinite}
@keyframes iflyB{0%,100%{transform:translate(0,0)}30%{transform:translate(20px,-12px)}60%{transform:translate(-16px,-4px)}80%{transform:translate(0,8px)}}
.ill-anim .bounceL{animation:ibL 2.6s ease-in-out infinite}
@keyframes ibL{0%,100%{transform:translate(0,0)}45%{transform:translate(26px,6px)}55%{transform:translate(18px,4px)}}
.ill-anim .bounceR{animation:ibR 2.6s ease-in-out infinite}
@keyframes ibR{0%,100%{transform:translate(0,0)}45%{transform:translate(-26px,-6px)}55%{transform:translate(-18px,-4px)}}
.ill-anim .shuttle{animation:ishut 5s ease-in-out infinite}
@keyframes ishut{0%,100%{transform:translate(-80px,40px)}50%{transform:translate(80px,40px) scaleX(-1)}50.1%{transform:translate(80px,40px)}}
.ill-anim .orbit{animation:iorb 9s linear infinite;transform-box:view-box;transform-origin:150px 96px}
@keyframes iorb{to{transform:rotate(360deg)}}
.ill-anim .spin{animation:iorb 14s linear infinite}
.ill-anim .pulse{animation:ipul 2.4s ease-in-out infinite}
@keyframes ipul{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}
.ill-anim .dash{animation:idash 1.4s linear infinite}
@keyframes idash{to{stroke-dashoffset:-22}}
.ill-anim .rise{animation:irise 2.8s ease-in infinite}
@keyframes irise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.ill-anim .drop{animation:idrop 1.5s ease-in infinite}
@keyframes idrop{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.ill-anim .flip{animation:iflip 5s ease-in-out infinite}
@keyframes iflip{0%,20%{transform:rotate(0)}45%,85%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.ill-anim .seq{animation:iseq 4s ease-in-out infinite;opacity:.3}
@keyframes iseq{0%,100%{opacity:.3}10%,30%{opacity:1}45%{opacity:.3}}
.ill-anim .grow{animation:igrow 3s ease-out infinite;transform-origin:bottom}
@keyframes igrow{0%{transform:scaleY(.1)}40%,100%{transform:scaleY(1)}}
.ill-anim .draw{stroke-dasharray:420;animation:idraw 4s ease-in-out infinite}
@keyframes idraw{0%{stroke-dashoffset:420}60%,100%{stroke-dashoffset:0}}
.ill-anim .wave{animation:iwave 3s ease-out infinite;opacity:0}
@keyframes iwave{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.ill-anim .march{animation:imarch 5s linear infinite}
@keyframes imarch{from{transform:translateX(-10px)}to{transform:translateX(330px)}}
.ill-anim .wiggle{animation:iwig .8s ease-in-out infinite alternate}
@keyframes iwig{from{transform:rotate(-12deg)}to{transform:rotate(12deg) translateY(3px)}}
.ill-anim .sway{animation:isway 3s ease-in-out infinite alternate;transform-origin:bottom}
@keyframes isway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.ill-anim .ripple{animation:irip 2s linear infinite}
@keyframes irip{from{transform:translateX(0)}to{transform:translateX(-24px)}}
.ill-anim .breath{animation:ibre 3s ease-out infinite;opacity:0}
@keyframes ibre{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(70px);opacity:0}}
.ill-anim .shoo{animation:ishoo 3s ease-in-out infinite}
@keyframes ishoo{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-8px) rotate(8deg)}}
.ill-anim .rub{animation:irub 1s ease-in-out infinite alternate}
.ill-anim .rub2{animation-direction:alternate-reverse}
@keyframes irub{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
.ill-anim .away{animation:iaway 4s ease-in infinite}
@keyframes iaway{0%{transform:translate(0,0);opacity:1}70%{opacity:1}100%{transform:translate(60px,-50px);opacity:0}}
.ill-anim .crawl{animation:icrawl 6s ease-in-out infinite alternate}
@keyframes icrawl{from{transform:translateX(0)}to{transform:translateX(60px)}}
.ill-anim .flutter{animation:iflut .5s ease-in-out infinite alternate}
@keyframes iflut{from{transform:scaleX(1)}to{transform:scaleX(.45) translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ill-anim *{animation:none!important}.ill-anim .seq,.ill-anim .wave,.ill-anim .breath{opacity:1}}
@media (max-width:680px){
  .acard.sm .chip{display:none}
  .acard.sm .rt{display:none}
  .tips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tips li{padding:12px}
  .tips li::before{font-size:1.1rem}
  .tips span{font-size:.82rem}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .svc-item{padding:14px}
  .svc-item p{font-size:.82rem}
  .svc-item h3{font-size:1rem}
  .svc-item .k{display:none}
  .blk{padding:40px 0}
}
.zone-head{align-items:flex-end}
.zone-head>div{max-width:60ch}
.zone-intro{margin:.5em 0 0;max-width:60ch;font-size:1.05rem;line-height:1.6;color:var(--on-dark-muted);text-wrap:balance}
@media (max-width:680px){.zone-head{flex-direction:column;align-items:flex-start;gap:10px}.zone-intro{font-size:.98rem}}
@media (max-width:520px){.zone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.zone-card{padding:14px 12px}.zone-card b{font-size:.95rem;padding-right:34px}.zone-card span{font-size:.78rem}.zone-card .cnt{top:12px;right:10px;font-size:.62rem}}
.dark .zone-intro{color:#c3d2ca}

/* ===== v4 (turn 4): topbar, search, identifier, today, doors, tips icons, trust ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{background:#06100c;color:var(--on-dark-muted);font-size:.78rem;border-bottom:1px solid rgba(200,242,58,.08)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:30px;flex-wrap:wrap}
.topbar a{color:var(--on-dark);text-decoration:none}
.topbar a:hover{color:var(--lime)}
.tb-mail{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-weight:600}
.tb-mail svg{width:15px;height:15px;color:var(--lime)}
.tb-links{display:flex;gap:16px}
@media (max-width:560px){.tb-links a:last-child{display:none}.topbar{font-size:.74rem}}
.nav-links{margin-left:auto}
.search-btn{order:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);color:#fff;margin-left:10px;flex:none}
.search-btn svg{width:19px;height:19px}
.search-btn:hover{border-color:var(--lime);color:var(--lime)}
.nav-links{order:2}.nav-toggle{order:4;margin-left:8px}
@media (max-width:900px){.search-btn{margin-left:auto}}
/* identifier */
.idf-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.idf-chips button{font:inherit;font-size:.9rem;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;min-height:40px}
.idf-chips button[aria-pressed="true"]{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.idf-chips small{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin-left:4px}
.idf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.idf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.idf-grid{grid-template-columns:1fr}}
.idf-card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s}
.idf-card[hidden]{display:none}
.idf-card:hover{transform:translateY(-3px);border-color:var(--ink);color:var(--text)}
.idf-card svg{width:58px;height:58px;flex:none;color:#0d6b52}
.idf-card b{font-size:1.02rem;display:block}
.idf-card ul{margin:4px 0 6px;padding-left:1.05em;font-size:.82rem;color:var(--muted)}
.ctx-tags{display:inline-flex;flex-wrap:wrap;gap:4px}
.ctx-tags span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;background:var(--paper-2);border-radius:999px;padding:3px 8px;color:var(--ink)}
.page-hero .ctx-tags span{background:rgba(200,242,58,.15);color:var(--lime)}
.idf-note{margin-top:14px;font-size:.9rem;color:var(--muted)}
.idf-empty{color:var(--muted)}
/* today */
.today-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
@media (max-width:860px){.today-grid{grid-template-columns:1fr}}
.tside{display:grid;gap:16px}
.tcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s}
.tcard:hover{transform:translateY(-3px);color:var(--text)}
.tcard .thumb{background:var(--ink);aspect-ratio:16/8;overflow:hidden}
.tcard .thumb svg{width:100%;height:100%;display:block}
.tcard:not(.big){flex-direction:row}
.tcard:not(.big) .thumb{width:40%;aspect-ratio:auto;flex:none}
.tcard .body{padding:14px 16px}
.tcard h3{font-size:1.02rem;margin:.2em 0 .3em;line-height:1.3}
.tcard.big h3{font-size:1.35rem}
.tcard p{font-size:.88rem;color:var(--muted);margin:0 0 6px}
.tcard:not(.big) p{display:none}
.ttype{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:3px 8px;border-radius:999px}
.tcard .meta{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
@media (max-width:520px){.tcard:not(.big){flex-direction:column}.tcard:not(.big) .thumb{width:100%;aspect-ratio:16/8}}
/* doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:18px;background:var(--ink);color:var(--on-dark);text-decoration:none;border:1px solid rgba(200,242,58,.15);transition:transform .2s,border-color .2s}
.door:hover{transform:translateY(-3px);border-color:var(--lime);color:var(--on-dark)}
.door .ic{width:34px;height:34px;color:var(--lime);margin-bottom:6px}
.door b{font-size:1.08rem;color:#fff}
.door span{font-size:.88rem;color:var(--on-dark-muted)}
.door em{font-style:normal;font-family:var(--f-mono);font-size:.72rem;color:var(--lime);margin-top:8px}
.door-hero .ic{width:100%;height:auto;color:var(--lime);opacity:.85}
/* tips with icons */
.tips li{display:flex;gap:12px;align-items:flex-start}
.tips li::before{display:none}
.tip-ic{width:52px;height:52px;flex:none}
@media (max-width:700px){.tip-ic{width:40px;height:40px}}
/* trust */
.art-mail{margin:10px 0 0;font-size:.85rem;color:var(--on-dark-muted)}
.art-mail a{color:var(--lime)}
.art-meta .byline{color:var(--lime)}
.art-foot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;margin:0 0 28px;font-size:.92rem;color:var(--muted)}
.art-foot p{margin:.3em 0}
.btn-ghost-ink{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost-ink:hover{background:var(--ink);color:var(--lime)}
/* library hero animation */
.spec-anim svg{animation:ispec 5s ease-in-out infinite;transform-origin:center}
@keyframes ispec{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-6px,-4px) rotate(-3deg)}60%{transform:translate(5px,2px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.spec-anim svg{animation:none}}
/* search */
.search-wrap{max-width:760px}
#search-box{display:flex;gap:8px}
#search-box[hidden]{display:none}
#search-box input{flex:1;font:inherit;font-size:1.05rem;padding:12px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);min-width:0}
#search-box input:focus{outline:2px solid var(--lime);border-color:var(--ink)}
#search-box .btn svg{width:20px;height:20px}
.sresults{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sresults a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-decoration:none;color:var(--text)}
.sresults a:hover{border-color:var(--ink)}
.sresults small{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:#0d6b52}
.sresults b{display:block;margin:2px 0}
.sresults span{font-size:.88rem;color:var(--muted)}
.idf-chips[hidden]{display:none}
.idf-card{flex-direction:column;gap:6px}
.idf-card svg{width:52px;height:52px}
@media (max-width:640px){.idf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.idf-card{padding:12px}.idf-card svg{width:42px;height:42px}.idf-card ul{font-size:.78rem;padding-left:.95em}.idf-card ul li:nth-child(3){display:none}}
@media (max-width:520px){.tips li{flex-direction:column;gap:6px}}
/* v4.1 mixed-zone magazine block */
.mix-grid{display:grid;gap:16px}
.mcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
.mcard:hover{transform:translateY(-3px);color:var(--text);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.mcard .thumb{background:var(--ink);aspect-ratio:16/9;overflow:hidden}
.mcard .thumb svg{width:100%;height:100%;display:block}
.mcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.mcard .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mcard .chip{font-size:.6rem;padding:3px 8px}
.mcard h3{font-size:.98rem;line-height:1.3;margin:0}
.mcard p{font-size:.84rem;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcard .rt{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);margin-top:auto}
.mcard.big{display:grid;grid-template-columns:1.25fr 1fr}
.mcard.big .thumb{aspect-ratio:auto;min-height:300px}
.mcard.big .body{padding:26px 28px;justify-content:center;gap:10px}
.mcard.big h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.mcard.big p{font-size:1rem;-webkit-line-clamp:5}
.mix-small{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
@media (min-width:900px){.mix-small{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.mcard.big{grid-template-columns:1fr}.mcard.big .thumb{min-height:0;aspect-ratio:16/9}.mcard.big .body{padding:16px 18px}}
@media (max-width:560px){
  .mix-small{grid-template-columns:1fr;gap:10px}
  .mix-small .mcard{flex-direction:row}
  .mix-small .mcard .thumb{width:36%;flex:none;aspect-ratio:auto;min-height:110px}
  .mix-small .mcard .body{padding:10px 12px;gap:4px}
  .mix-small .mcard p{display:none}
  .mix-small .mcard h3{font-size:.92rem}
}
/* v5: contact, portrait, kids series */
.tb-contact{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:560px){.tb-em{display:none}}
.cta .actions .mail+.mail{margin-top:-4px}
.portrait{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:40px;align-items:center}
@media (max-width:760px){.portrait{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}}
.hexframe{margin:0;width:100%;max-width:340px;aspect-ratio:1;position:relative;filter:drop-shadow(0 18px 30px rgba(10,20,16,.28))}
.hexframe::before{content:"";position:absolute;inset:-8px;background:var(--lime);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hexframe picture,.hexframe img{position:relative;display:block;width:100%;height:100%;object-fit:cover;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.portrait-txt h2{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.portrait-txt .hotline{font-family:var(--f-mono);font-weight:700;font-size:1.2rem;color:var(--ink);background:var(--lime);padding:6px 14px;border-radius:999px;text-decoration:none;display:inline-block}
.comic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:1em 0}
@media (max-width:760px){.comic{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.comic{grid-template-columns:1fr}}
.comic .panel{background:#fff;border:3px solid #153a5b;border-radius:14px;padding:12px 14px;position:relative;box-shadow:4px 4px 0 #8fd3ff}
.comic .no{position:absolute;top:-12px;left:-10px;background:#ffd166;border:2px solid #153a5b;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.comic p{margin:.2em 0;font-size:1rem}
.comic .say{background:#eef8ff;border-radius:12px;padding:6px 10px;font-style:italic}
.myths{display:grid;gap:10px}
.myth{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.myth p{margin:0;padding:10px 14px}
.myth .m{background:#ffe7e0;color:#9b2c1b;font-weight:600}
.myth .f{background:#e4f7e9}
.warnlist{columns:2;column-gap:24px}
@media (max-width:520px){.warnlist{columns:1}}
.hotgame{background:#fff;border:3px solid #8fd3ff;border-radius:18px;padding:14px;margin:1em 0}
.hotgame svg{width:100%;height:auto;display:block;border-radius:12px;touch-action:manipulation}
.hotgame .spot{cursor:pointer;outline:none}
.hotgame .spot .found{opacity:0;transition:opacity .2s}
.hotgame .spot.ok .found{opacity:1}
.hotgame .spot:focus-visible circle:first-child{stroke:#1f6fb2}
.hg-count{font-family:var(--f-mono);font-weight:700;background:#ffd166;border-radius:999px;padding:2px 10px;margin-left:6px}
.hg-tip{min-height:1.6em;font-weight:600;color:#1f6b3a}
table.checklist td:first-child{font-size:1.2rem;text-align:center;width:36px}
/* v8: leaders group */
.leaders{display:grid;grid-template-columns:1fr;gap:56px;margin-top:32px;align-items:start}
.leader{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.leader .hexframe{max-width:300px}
.leader .portrait-txt h3{font-size:clamp(1.15rem,2.1vw,1.5rem);margin:.3em 0 .4em}
.leader .portrait-txt p{margin:.3em 0}
@media (max-width:760px){.leaders{grid-template-columns:1fr;gap:40px}.leader .hexframe{max-width:260px}}
/* v10: in-article photo figures, "Bạn có biết?" box, quizzes */
.prose .afig{margin:1.6em 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.prose .afig img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#f1efe6}
.prose .afig figcaption{padding:10px 14px 12px;font-size:.9rem;line-height:1.5}
.prose .afig .credit{display:block;margin-top:4px;font-size:.76rem;color:var(--muted);font-family:var(--f-mono)}
.prose .afig .credit a{color:inherit}
.prose .dyk{border-left-color:#b28dff;background:#f6f2ff}
.prose .quiz{display:grid;gap:10px;margin:1em 0 1.4em}
.prose .quiz summary{cursor:pointer;font-weight:600;padding:10px 0}
.prose .quiz details p{margin:0 0 12px}
.checklist-kid{list-style:none;padding-left:0!important}
.checklist-kid li{background:#fff8e1;border-radius:12px;padding:8px 12px}

/* v11: homepage "Vùng kiến thức" knowledge map — this block only */
.kzone .kmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.kzone .kmap::before{content:"";position:absolute;inset:-6px;border-radius:22px;pointer-events:none;
  background-image:radial-gradient(rgba(200,242,58,.22) 1px,transparent 1.5px);background-size:18px 18px;
  mask-image:linear-gradient(#000,transparent 92%);-webkit-mask-image:linear-gradient(#000,transparent 92%)}
.kcard{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0;
  padding:14px 14px 16px;border-radius:16px;text-decoration:none;color:var(--on-dark);
  background:#101c17;border:1px solid rgba(200,242,58,.16);
  box-shadow:inset 3px 0 0 var(--ka),0 10px 24px -18px rgba(0,0,0,.8);
  overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.kcard::after{content:"";position:absolute;right:-16px;bottom:-22px;width:78px;height:86px;
  background:var(--ka);opacity:.11;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);pointer-events:none}
.kcard:hover{transform:translateY(-3px);color:var(--on-dark);border-color:var(--ka);
  box-shadow:inset 3px 0 0 var(--ka),0 16px 28px -16px rgba(0,0,0,.85)}
.kcard-top{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.kico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:var(--ka);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.kico svg{width:20px;height:20px;display:block;animation:kico-float 3.8s ease-in-out infinite}
.kcard:nth-child(3n+2) .kico svg{animation-delay:.45s}
.kcard:nth-child(3n) .kico svg{animation-delay:.9s}
.kcard:hover .kico svg{animation:none;transform:translateY(-2px)}
.kcnt{margin-left:auto;font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.01em;
  line-height:1.35;color:#0a1410;background:var(--ka);border-radius:999px;padding:3px 8px;white-space:nowrap}
.ktitle{position:relative;z-index:1;font-family:var(--f-head);font-weight:800;font-size:1.05rem;
  line-height:1.28;letter-spacing:-.02em;color:#fff}
.kdesc{position:relative;z-index:1;font-size:.84rem;line-height:1.4;color:var(--on-dark-muted)}
@keyframes kico-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@media (max-width:1000px){.kzone .kmap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (max-width:520px){
  .kcard{padding:12px 11px 13px;gap:6px;border-radius:14px}
  .kico{width:32px;height:32px;border-radius:10px}
  .kico svg{width:18px;height:18px}
  .kcnt{font-size:.64rem;padding:2px 7px}
  .ktitle{font-size:.92rem;line-height:1.25}
  .kdesc{font-size:.75rem;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){
  .kico svg{animation:none}
  .kcard,.kcard:hover{transition:none;transform:none}
}