@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
/* Trang chào mừng — phong cách hạ tầng CNTT: sơ đồ mạng + terminal */
.welcome{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:var(--bg);color:var(--ink);overflow:hidden;will-change:transform,opacity;
  transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity 1s cubic-bezier(.22,.61,.36,1)}
.wl-on .welcome{display:flex}
.wl-on body{overflow:hidden}
.welcome.out{transform:translateY(-32px);opacity:0;pointer-events:none}
.wl-grid{position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:linear-gradient(color-mix(in srgb,var(--blue) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--blue) 8%,transparent) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 60% 50%,#000 15%,transparent 72%)}
.wl-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(480px circle at var(--wx,72%) var(--wy,40%),color-mix(in srgb,var(--blue) 9%,transparent),transparent 70%)}
.wl-main{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:820px;width:100%;margin:0 auto;padding:0 32px}
/* boot: sơ đồ mạng + terminal */
.wl-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.wl-topo{border:1px solid var(--line);border-radius:var(--r-l);background:color-mix(in srgb,var(--paper) 70%,transparent);padding:14px 16px 10px;backdrop-filter:blur(4px)}
.wl-topo h3{font-size:12.5px;font-weight:500;color:var(--mut);margin-bottom:2px;display:flex;justify-content:space-between}
.wl-topo svg{width:100%;height:auto;display:block;max-height:290px}
.tn{fill:var(--paper);stroke:var(--line-2);stroke-width:1.2}
.tt{fill:var(--ink);font:600 12.5px 'IBM Plex Sans',sans-serif}.ts{fill:var(--mut);font:400 10.5px 'IBM Plex Sans',sans-serif}
.tl{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:3 4}
.tp{fill:var(--blue)}
.tled{fill:var(--ok);animation:tled 2.4s ease-in-out infinite}.tled.b{animation-delay:.8s}.tled.c{animation-delay:1.6s}
@keyframes tled{50%{opacity:.25}}
.tn.core{stroke:var(--blue);stroke-width:1.6}
.wl-term{background:#0d131c;border:1px solid #243041;border-radius:var(--r-l);overflow:hidden;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;box-shadow:0 24px 50px -30px rgba(8,14,24,.55)}
.wl-term-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #1d2837;font-size:12.5px;color:#7e8da3}
.wl-term-bar i{width:8px;height:8px;border-radius:50%;background:#e0a526;transition:background .3s}.welcome.ready .wl-term-bar i{background:#3ddc84}
.wl-term-bar em{margin-left:auto;font-style:normal;color:#5cc4cc}
.wl-term-body{padding:14px 16px 16px;font-size:13px;line-height:1.7;color:#cfd8e6;min-height:178px}
.wl-term .p{color:#5cc4cc;margin-right:8px}.wl-term .c{color:#e8eef7}
.wl-term .ok{color:#8d9db3;padding-left:16px}.wl-term .ok b{color:#3ddc84;font-weight:500;margin-right:8px}
.wl-term .cur{display:inline-block;width:7px;height:14px;background:#5cc4cc;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.wl-on .wl-topo,.wl-on .wl-term{animation:wlin .8s cubic-bezier(.2,.7,.2,1) both}
.wl-on .wl-topo{animation-delay:.2s}.wl-on .wl-term{animation-delay:.34s}
@keyframes wlin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.wl-on .hero-title,.wl-on .hero-role,.wl-on .hero-intro,.wl-on .hero-cta,.wl-on .hero-visual{animation-play-state:paused}
@media(max-width:1000px){
  .welcome{overflow-y:auto}.wl-main{justify-content:flex-start;padding-top:8px;padding-bottom:12px}
  .wl-topo svg{max-height:230px}.wl-term-body{min-height:0}
}
@media(max-width:640px){.wl-main{padding-left:20px;padding-right:20px}.wl-term-body{font-size:12px}}
@media(prefers-reduced-motion:reduce){.welcome,.welcome *{animation:none!important;transition:none!important}}
