/* Nghimmo sub pages (/check, /huongdan, /guide) — same tokens & look as site.css, static (no canvas, no scroll JS) */
:root{
  --bg:#000; --fg:#f5f7fa;
  --t2:rgba(245,247,250,.74); --t3:rgba(245,247,250,.54);
  --mut:var(--t2); --dim:var(--t3);
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.07);
  --acc:#5eead4; --card:#0a0c0f; --card2:#0e1115;
  --pad:clamp(16px,1.8vw,32px);
  --fd:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --fs:'Fraunces',Georgia,'Times New Roman',serif;
  --ez:cubic-bezier(.2,.7,.1,1);
  --h2:clamp(34px,4.3vw,74px); --h3:clamp(20px,1.5vw,24px);
  --lead:clamp(17px,1.25vw,19px); --body:16px; --meta:12px;
  --r:14px; --r2:18px;
  /* status colours tuned to the palette */
  --ok:#5eead4; --ok-bg:rgba(94,234,212,.08); --ok-ln:rgba(94,234,212,.28);
  --warn:#fbbf6a; --warn-bg:rgba(251,191,106,.08); --warn-ln:rgba(251,191,106,.3);
  --err:#ff8a8a; --err-bg:rgba(255,120,120,.08); --err-ln:rgba(255,120,120,.3);
  --info:#8cc2ff; --info-bg:rgba(140,194,255,.07); --info-ln:rgba(140,194,255,.26);
}
*{box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:#000;color:var(--fg);font-family:var(--fd);font-optical-sizing:auto;font-feature-settings:"cv05";font-weight:400;font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh}
::selection{background:var(--acc);color:#000}
a{color:inherit}
img,svg{max-width:100%}
b,strong{font-weight:600;color:#fff}
.u{text-transform:uppercase;font-size:var(--meta);font-weight:600;letter-spacing:.08em;line-height:1.5}
.sx-mut{color:var(--t2)} .sx-dim{color:var(--t3)}
.sx-mono{font-family:var(--fm);font-size:.9em;font-weight:500}
.sx-link{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:color .2s,border-color .2s}
.sx-link:hover{color:var(--acc);border-color:var(--acc)}

/* page shell: aura sits behind everything inside .sx-page */
.sx-page{position:relative;min-height:100vh;display:flex;flex-direction:column;isolation:isolate}
.sx-page>:not(.sx-aura){position:relative;z-index:1}
.sx-aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='1' fill='rgb(150,200,255)' fill-opacity='.13'/%3E%3C/svg%3E") 0 0/34px 34px,
    url("aura.webp") 0 0/100% 100% no-repeat}
.sx-main{flex:1 0 auto}
.sx-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.sx-wrap--narrow{max-width:860px}

/* header (static, scrolls away) */
.sx-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad);border-bottom:1px solid var(--line2)}
.sx-logo{display:inline-flex;align-items:center;gap:10px;flex:none;font-size:16px;letter-spacing:.1em;font-weight:700;white-space:nowrap;text-decoration:none;color:#fff}
.sx-logo img{width:26px;height:26px;border-radius:7px;display:block}
.sx-logo sup{font-size:8px;align-self:flex-start;margin:2px 0 0 -8px;letter-spacing:0;font-weight:500}
.sx-links{display:flex;align-items:center;gap:4px;min-width:0}
.sx-links a{display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--t2);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.sx-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.sx-links a.on,.sx-links a[aria-current=page]{color:#fff;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sx-links a.sx-tg{color:var(--acc)}
.sx-links a.sx-tg:hover{background:rgba(94,234,212,.08)}

/* section heading (mirrors landing .sec-head / .sec-title) */
.sx-head{padding:clamp(48px,9vh,104px) 0 clamp(28px,5vh,56px)}
.sx-eyebrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;margin-bottom:clamp(24px,5vh,52px);border-top:1px solid var(--line);color:var(--t2)}
.sx-num{font-family:var(--fm);font-size:12px;font-weight:500;padding:3px 9px;background:rgba(255,255,255,.09);border-radius:999px;color:#e8edf2;letter-spacing:0;text-transform:none}
.sx-title{margin:0;font-size:var(--h2);line-height:1.06;letter-spacing:-.045em;font-weight:500;max-width:15em}
.sx-title em,.sx-h3 em{font-family:var(--fs);font-style:italic;font-weight:350;letter-spacing:-.025em;font-variation-settings:"opsz" 144;padding-right:.08em;
  background:linear-gradient(100deg,#fff 0%,#d6f1ff 38%,#7fe8da 78%,#5eead4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-sub{margin:20px 0 0;max-width:36em;color:var(--t2);font-size:var(--lead);line-height:1.6}
.sx-h3{margin:0 0 12px;font-size:var(--h3);line-height:1.25;letter-spacing:-.02em;font-weight:600}
.sx-sec{padding:clamp(28px,5vh,56px) 0;border-top:1px solid var(--line2)}

/* cards */
.sx-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:clamp(18px,2.2vw,28px)}
.sx-card--flat{background:rgba(255,255,255,.025);border-color:var(--line2);border-radius:var(--r)}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}

/* buttons */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 22px;border-radius:999px;background:#fff;color:#000;border:1px solid #fff;font:500 15px/1 var(--fd);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.sx-btn:hover{background:var(--acc);border-color:var(--acc)}
.sx-btn:disabled,.sx-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;background:#fff;border-color:#fff}
.sx-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.16)}
.sx-btn--ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.sx-btn--sm{min-height:40px;padding:0 15px;font-size:13.5px}

/* inputs */
.sx-input{width:100%;min-height:48px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#fff;font:500 15px/1.4 var(--fm);outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
textarea.sx-input{border-radius:var(--r);min-height:96px;resize:vertical}
.sx-input::placeholder{color:var(--t3);font-family:var(--fd);font-weight:400}
.sx-input:focus{border-color:rgba(94,234,212,.55);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(94,234,212,.1)}
.sx-row{display:flex;gap:10px;flex-wrap:wrap}
.sx-row>.sx-input{flex:1 1 240px}

/* badges / status */
.sx-badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font:600 11.5px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--t2);white-space:nowrap}
.sx-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sx-badge--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-ln)}
.sx-badge--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-ln)}
.sx-badge--err{color:var(--err);background:var(--err-bg);border-color:var(--err-ln)}
.sx-note{padding:14px 18px;border-radius:var(--r);background:var(--info-bg);border:1px solid var(--info-ln);color:var(--t2);font-size:15px}
.sx-note b,.sx-note strong{color:#fff}
.sx-note--ok{background:var(--ok-bg);border-color:var(--ok-ln)}
.sx-note--warn{background:var(--warn-bg);border-color:var(--warn-ln)}
.sx-note--err{background:var(--err-bg);border-color:var(--err-ln)}

/* tables: wrap in .sx-scroll so wide tables scroll inside their box */
.sx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sx-table{width:100%;border-collapse:collapse;font-size:14.5px}
.sx-table th{text-align:left;padding:10px 14px;font:600 11.5px/1.4 var(--fd);letter-spacing:.07em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--line);white-space:nowrap}
.sx-table td{padding:12px 14px;border-bottom:1px solid var(--line2);color:var(--t2);vertical-align:top}
.sx-table tr:last-child td{border-bottom:0}
.sx-table td.n,.sx-table .sx-mono{font-family:var(--fm);font-size:13px;color:#dfe6ec}

/* code */
.sx-code,pre.sx-code{position:relative;margin:12px 0;padding:14px 16px;border-radius:12px;background:rgba(8,12,18,.82);border:1px solid rgba(255,255,255,.1);font:400 13px/1.75 var(--fm);color:#dfe6ec;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-width:100%}
.sx-code .k{color:#8cc2ff} .sx-code .s{color:var(--acc)} .sx-code .c{color:var(--t3)}
code.sx-ic,.sx-ic{font-family:var(--fm);font-size:.86em;font-weight:500;color:var(--acc);background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.2);padding:.1em .42em;border-radius:6px;word-break:break-word}

/* tabs (pill segmented) */
.sx-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line2);overflow-x:auto;scrollbar-width:none;max-width:100%;width:max-content}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tab{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:0;background:none;color:var(--t2);font:500 14px/1 var(--fd);white-space:nowrap;cursor:pointer;transition:color .2s,background .2s}
.sx-tab:hover{color:#fff}
.sx-tab.on,.sx-tab.active,.sx-tab[aria-selected=true]{background:#fff;color:#000}

/* footer (landing .foot, condensed) */
.sx-foot{margin-top:clamp(56px,10vh,110px);border-top:1px solid var(--line);padding:36px var(--pad) 26px}
.sx-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.sx-foot p{margin:0;color:var(--t2);max-width:32em;font-size:15px}
.sx-foot-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line2);color:var(--t3);font-size:13px}
.sx-foot-bot a{color:var(--t2);text-decoration:none}
.sx-foot-bot a:hover{color:#fff}
.sx-foot .sx-logo,.sx-nav .sx-logo{padding-block:7px}
.sx-foot-bot{align-items:center}
.sx-foot-bot a{display:inline-flex;align-items:center;min-height:40px}

/* embedded in admin iframe: no chrome */
.sx-embed .sx-nav,.sx-embed .sx-foot{display:none}
.sx-embed .sx-head{padding-top:28px}

@media (max-width:760px){
  .sx-nav{flex-direction:column;align-items:stretch;gap:4px;padding:6px 0 8px}
  .sx-nav .sx-logo{padding-inline:var(--pad)}
  .sx-links{overflow-x:auto;scrollbar-width:none;padding:0 var(--pad);-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .sx-links::-webkit-scrollbar{display:none}
  .sx-links a{padding:0 12px;font-size:14px}
  .sx-links a:first-child{margin-left:-12px}
  .sx-links::after{content:"";flex:0 0 16px}
}
@media (max-width:600px){
  .sx-head{padding:40px 0 24px}
  .sx-title{font-size:clamp(32px,9vw,44px)}
  .sx-sub{font-size:16px}
  .sx-row>.sx-btn{flex:1 1 100%}
  .sx-code{font-size:12.5px;padding:12px 14px}
  .sx-table{font-size:14px} .sx-table th,.sx-table td{padding:10px}
  .sx-foot-bot{flex-direction:column;align-items:flex-start;gap:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* accent words: solid mint, a touch heavier (gradient read too pale) */
.sx-title em,.sx-h3 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--acc);font-weight:420}
/* slow drifting colour fields over the static aura: transform-only on a fixed layer (composited, no repaint while scrolling) */
.sx-page::after{content:"";position:fixed;left:-25vw;top:-25vh;width:150vw;height:150vh;z-index:0;pointer-events:none;
  background:radial-gradient(28% 24% at 32% 34%,rgba(56,140,255,.17),rgba(56,140,255,0) 70%),
             radial-gradient(24% 22% at 70% 62%,rgba(94,234,212,.13),rgba(94,234,212,0) 70%),
             radial-gradient(20% 18% at 55% 20%,rgba(120,90,255,.10),rgba(120,90,255,0) 70%);
  animation:sxDrift 24s ease-in-out infinite alternate;will-change:transform}
@keyframes sxDrift{0%{transform:translate3d(-6vw,-4vh,0) rotate(0deg)}50%{transform:translate3d(5vw,5vh,0) rotate(10deg) scale(1.08)}100%{transform:translate3d(-3vw,8vh,0) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.sx-page::after{animation:none}}
/* head: no hairline above the eyebrow, tighter top gap */
.sx-head{padding-top:clamp(28px,4.5vh,52px)}
.sx-eyebrow{border-top:0;padding-top:0;margin-bottom:clamp(18px,3.5vh,36px)}
@media (max-width:760px){.sx-head{padding-top:24px}}
.sx-embed .sx-head{padding-top:20px}
/* scroll-driven line art (like the landing's section decos): fixed layers, sub.js moves them with transform only */
.sx-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sx-fx img,.sx-fx i{position:absolute;display:block;will-change:transform}
.sx-fx .f1{width:min(120vh,1150px);aspect-ratio:1;right:-26vw;top:-8vh;opacity:.48}
.sx-fx .f2{width:min(95vw,1100px);height:auto;left:-22vw;top:38vh;opacity:.32}
.sx-fx .f3{width:70vw;height:70vh;left:15vw;top:20vh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(56,140,255,.13),rgba(56,140,255,0));opacity:1}
.sx-embed .sx-fx .f1{opacity:.22}
@media (max-width:760px){.sx-fx .f1{width:150vw;right:-70vw;top:4vh}.sx-fx .f2{width:180vw;left:-60vw}}
.sx-page>.sx-fx{position:fixed;z-index:0}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* page-open entrance (CSS only, plays once): header drops in, title block rises line by line, content follows */
@keyframes sxDown{from{opacity:0;transform:translate3d(0,-14px,0)}}
@keyframes sxUp{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes sxFade{from{opacity:0}}
.sx-nav{animation:sxDown .7s var(--ez) both}
.sx-aura,.sx-fx{animation:sxFade 1.4s ease both}
.sx-head>*{animation:sxUp .9s var(--ez) both}
.sx-head>:nth-child(1){animation-delay:.12s}.sx-head>:nth-child(2){animation-delay:.2s}.sx-head>:nth-child(3){animation-delay:.3s}.sx-head>:nth-child(n+4){animation-delay:.38s}
.sx-wrap>:not(.sx-head){animation:sxUp .9s var(--ez) both;animation-delay:.42s}
.sx-wrap>:not(.sx-head)~:not(.sx-head){animation-delay:.52s}
.sp-main>*,.rd-main>*{animation:sxUp .9s var(--ez) .18s both}
.sx-foot{animation:sxFade 1s ease .5s both}
@media (prefers-reduced-motion:reduce){.sx-nav,.sx-aura,.sx-fx,.sx-head>*,.sx-wrap>*,.sp-main>*,.rd-main>*,.sx-foot{animation:none}}
/* refined background: no spinning art, no drifting orbs. Static aura + dots, plus one very soft glow that follows the scroll position (translate only) */
.sx-page::after{display:none!important;animation:none!important}
.sx-fx .f1,.sx-fx .f2{display:none!important}
.sx-fx .f3{width:90vw;height:60vh;left:5vw;top:-10vh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,130,255,.10),rgba(70,130,255,0));opacity:1}
.sx-fx::before{content:"";position:absolute;left:0;right:0;top:0;height:46vh;z-index:0;
  background:linear-gradient(180deg,rgba(94,234,212,.045),rgba(94,234,212,0))}

/* 3D globe canvas (assets/sub3d.js): fixed behind the content, fades in */
.sx-fx{display:none!important}
.sx-page>.sx-3d{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.sx-page>.sx-3d.on{opacity:.85}
body.logged .sx-3d{display:none}
@media (max-width:760px){.sx-page>.sx-3d.on{opacity:.4}}
/* tablets (761-980px): header stays one row, the links scroll sideways instead of pushing the page wider */
@media (min-width:761px) and (max-width:980px){
  .sx-nav .sx-logo{flex:none}
  .sx-links{flex:1 1 auto;min-width:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent)}
  .sx-links::-webkit-scrollbar{display:none}
  .sx-links a{flex:none;padding:0 11px;font-size:14px}
}