@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-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}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-vietnamese-700-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-latin-ext-700-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-latin-700-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/be-vietnam-pro-vietnamese-800-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/be-vietnam-pro-latin-ext-800-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:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/be-vietnam-pro-latin-800-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-display:swap;font-weight:400;src:url(../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-display:swap;font-weight:400;src:url(../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-display:swap;font-weight:500;src:url(../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-display:swap;font-weight:500;src:url(../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}

:root{
  --paper:#fff;--mist:#f2f6fd;--ink:#0c2340;--ink-2:#4b5f78;
  --accent:#a21313;--accent-d:#7d0e0e;--tint:#fbeceb;--line:#cdd8e8;--seal:#a21313;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);--max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
[id]{scroll-margin-top:84px}

/* header */
.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:17px}
.seal{width:32px;height:32px;display:grid;place-items:center;background:var(--seal);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:2px}
.nav{display:flex;gap:28px;height:100%}
.nav a{display:flex;align-items:center;height:100%;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* hero */
.hero{background:var(--mist);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(40px,7vw,88px)}
.hero h1{margin:0 0 20px;font-size:clamp(1.95rem,1rem + 3vw,3.25rem);line-height:1.12;font-weight:800;letter-spacing:-.015em}
.ln{display:inline-block}
.lead{margin:0 0 32px;max-width:50ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:700 15px/1 var(--font);text-decoration:none;border:2px solid var(--accent);border-radius:2px;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-line{background:transparent;color:var(--accent)}
.btn-line:hover{background:var(--accent);color:#fff}

/* chart */
.chart{width:100%;max-width:470px;justify-self:end}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font)}
.paper{fill:#f5e9c8}
.g{fill:none;stroke:#b9a066;stroke-width:1.25}
.tint{fill:#eedca6}
.tint.tk{fill:#e6cc88}
.star{fill:#cdb06a}
.lbl-n{font-size:16px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#f5e9c8;stroke-width:5px;stroke-linejoin:round}
.lbl-n.k{stroke:#eedca6}
.lbl-n.k0{stroke:#e6cc88}
.lbl-b{font-size:13px;fill:#6b5a2e;text-anchor:end;paint-order:stroke;stroke:#f5e9c8;stroke-width:4px;stroke-linejoin:round}
.lbl-b.k{stroke:#eedca6}
.lbl-b.k0{stroke:#e6cc88}
.tp{fill:none;stroke:var(--accent);stroke-width:2}
.flow{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:5 11;opacity:0}
.plate-bg{fill:#fff;stroke:var(--accent);stroke-width:1.5}
.p-small{font-size:13px;fill:#5d7390}
.p-name{font-size:24px;font-weight:800;fill:var(--accent)}
.p-mono{font-family:var(--mono)!important;font-size:13px;fill:var(--ink)}
#scan{fill:rgba(162,19,19,.08);stroke:var(--accent);stroke-width:2;opacity:0;transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .4s}
.is-live #scan{opacity:1}
.is-live .flow{opacity:1;animation:flow 1.4s linear infinite}
.paused .flow{animation-play-state:paused}
@keyframes flow{to{stroke-dashoffset:-16}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
.anim .g{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--i,0)*60ms)}
.anim .lbl{opacity:0;animation:appear .5s ease forwards;animation-delay:calc(1.1s + var(--i,0)*70ms)}
.anim .tint{opacity:0;animation:appear .7s ease forwards;animation-delay:2.4s}
.anim .tp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s ease forwards;animation-delay:calc(2.7s + var(--i,0)*300ms)}
.anim .plate{opacity:0;animation:appear .6s ease forwards;animation-delay:2.3s}

/* main band */
.band{padding:clamp(48px,7vw,96px) 0}
.cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,88px);align-items:start}
h2{margin:0 0 16px;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.2;font-weight:800;letter-spacing:-.01em}
h3{margin:0 0 6px;font-size:1.0625rem;line-height:1.4;font-weight:700}
.prose p{max-width:64ch;margin:0 0 12px}
.prose .en{color:var(--ink-2)}

.registry{margin:28px 0 0;border-top:3px solid var(--ink)}
.registry .row{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.registry dt{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.registry dt small{display:block;font-size:12.5px;opacity:.85}
.registry dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.registry a{color:var(--accent);text-underline-offset:3px}
.todo{background:#fff3c4;outline:1px dashed #d4a72c;padding:1px 6px;font-weight:400}

.contact{margin-top:44px;max-width:64ch}
.contact p{margin:0 0 8px}
.contact a{color:var(--accent);font-weight:500;text-underline-offset:3px}

.plist{list-style:none;margin:8px 0 36px;padding:0;border-top:1px solid var(--ink)}
.prow{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,box-shadow .2s}
.prow:hover{background:var(--tint);box-shadow:inset 3px 0 0 var(--accent)}
.prow img{width:116px;height:34px;object-fit:contain;object-position:left center}
.prow .name{display:block;font-weight:700;line-height:1.35}
.prow:hover .name{color:var(--accent)}
.prow .desc{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.soon{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.soon strong{color:var(--ink);font-weight:700}
.note{max-width:52ch;margin:-16px 0 36px;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* footer */
.foot{background:var(--ink);color:#c9d6ea;padding:28px 0;font-size:14px;line-height:1.6}
.foot p{margin:0}
.foot strong{color:#fff}

@media (max-width:991px){
  .cols{grid-template-columns:minmax(0,1fr)}
  #san-pham{order:-1}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .chart{justify-self:center;max-width:440px}
}
@media (max-width:640px){
  .nav{gap:0}
  .nav a:not(.nav-contact){display:none}
  .brand{font-size:16px}
  .registry .row{grid-template-columns:minmax(0,1fr)}
  .actions .btn{flex:1 1 100%}
}
@media (max-width:420px){
  .prow,.soon{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .prow img{width:96px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}