/* Intro 3 giây khi vào trang chủ */
html.intro-on{overflow:hidden}
html.intro-on body>*:not(.intro){opacity:0}
.intro{position:fixed;inset:0;z-index:9999;background:var(--color-bg);cursor:pointer;overflow:hidden}
.intro-bg{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--color-border) 1px,transparent 0);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);opacity:.7}
.intro-title{position:fixed;margin:0;transform-origin:0 0;isolation:isolate;will-change:transform}
.intro-title .iw{display:inline-block;opacity:0}
.intro-title em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.intro-mark{position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:-.03em;height:.32em;border-radius:999px;background:var(--color-brand-a50);opacity:.72;transform:scaleX(0);transform-origin:left center}
.intro-flow{position:fixed;opacity:0}
.intro-track{position:relative;height:44px;margin:0 52px}
.intro-line,.intro-fill{position:absolute;left:0;top:21px;height:2px;border-radius:2px}
.intro-line{right:0;background:var(--color-border)}
.intro-fill{width:0;background:var(--color-brand);box-shadow:0 0 12px var(--color-brand-a50)}
.intro-dot{position:absolute;left:0;top:16px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--color-brand);box-shadow:0 0 0 5px var(--color-brand-a15),0 0 18px var(--color-brand)}
.intro-node{position:absolute;top:0;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);transition:none}
.intro-node svg{width:20px;height:20px}
.intro-node.on{border-color:var(--color-brand);color:var(--color-brand);box-shadow:0 0 0 4px var(--color-brand-a15)}
.intro-ok{position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--color-brand);color:var(--color-on-brand);transform:scale(0)}
.intro-ok svg{width:11px;height:11px}
.intro-node small{position:absolute;top:54px;left:50%;width:110px;margin-left:-55px;text-align:center;font-size:12px;line-height:1.35;color:var(--color-text-secondary);font-family:var(--font-sans);font-weight:600}
.intro-status{display:flex;align-items:center;gap:8px;margin:62px 0 0 30px;font-size:12px;color:var(--color-text-muted)}
.intro-status i{width:7px;height:7px;border-radius:50%;background:var(--color-brand)}
.intro-status.done{color:var(--color-brand-text)}
.intro-skip{position:absolute;right:20px;bottom:18px;font-size:11px;letter-spacing:.06em;color:var(--color-text-muted);opacity:.7}
@media(max-width:600px){.intro-track{margin:0 40px}.intro-node small{width:84px;margin-left:-42px;font-size:11px}.intro-status{margin-left:12px}}