/* ============================================================
   MIMIR TECH — faithful homage styling
   Light-first landing, dark product zone, cosmic download.
   ============================================================ */

:root {
  --paper: #ffffff;
  --paper-2: #f2f3f6;
  --ink: #121317;
  --ink-2: #4b4f58;
  --ink-3: #676a72;

  --night: #0b0c10;
  --night-2: #121317;
  --night-3: #191b21;
  --snow: #eff0f3;
  --snow-2: #b6bac4;

  --blue: #3186ff;
  --violet: #7a5cff;
  --red: #fc413d;
  --amber: #fbbc04;
  --yellow: #ffe432;
  --green: #00b95c;

  --font: "Google Sans Flex", "Segoe UI", system-ui, sans-serif;
  --wrap: 1240px;
  --header-h: 52px;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

.h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.h2 .thin { font-weight: 350; color: var(--snow-2); }
.dark-sec .h2 { color: var(--snow); }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 450; color: var(--snow-2);
  transition: color .2s ease, gap .2s ease;
}
.text-link:hover { color: var(--snow); gap: 10px; }
.mini-arrow { width: 15px; height: 15px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; font-weight: 450; letter-spacing: .01em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn .ic { width: 19px; height: 19px; }

.btn-black {
  position: relative;
  background: var(--ink); color: #fff;
  overflow: hidden;
  z-index: 1;
}
.btn-black::before {
  content: "";
  position: absolute; inset: 0;
  background-size: 400% 100%;
  background-image: linear-gradient(to right,
    var(--green) 0%, var(--blue) 25%,
    var(--green) 50%, var(--blue) 75%,
    var(--green) 100%);
  animation: btnColorLoop 20s linear infinite;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: -1;
  border-radius: inherit;
}
@keyframes btnColorLoop {
  from { background-position: 0% 0; }
  to   { background-position: 400% 0; }
}
.btn-soft { background: #e8eaee; color: var(--ink); }
.btn-soft:hover { background: #f0f1f5; }
.btn-white { background: var(--snow); color: var(--ink); }
.btn-white:hover { box-shadow: 0 10px 30px rgba(239, 240, 243, .22); }
.btn-outline-dark {
  border: 1px solid rgba(239, 240, 243, .24); color: var(--snow);
  background: rgba(239, 240, 243, .03);
}
.btn-outline-dark:hover { border-color: rgba(239, 240, 243, .5); background: rgba(239, 240, 243, .07); }
/* Ban vien cho nen sang — doi cua .btn-outline-dark. */
.btn-outline {
  border: 1px solid rgba(18, 19, 23, .18); color: var(--ink);
  background: rgba(18, 19, 23, .02);
}
.btn-outline:hover { border-color: rgba(18, 19, 23, .42); background: rgba(18, 19, 23, .05); }

.btn-sm { padding: 9px 20px; font-size: 14px; }
.btn-md { padding: 12px 26px; font-size: 15px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--header-h);
  transition: background .35s ease, color .35s ease, backdrop-filter .35s ease;
}
/* Trang tinh nen sang: can mot lop kinh trang de thanh dieu huong con doc duoc
   khi noi dung truot ben duoi. Dat TRUOC .on-dark de neu ca hai cung co mat
   thi .on-dark van thang. */
.site-header.on-light {
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  border-bottom: 1px solid rgba(18, 19, 23, .07);
}
.site-header.on-dark {
  background: rgba(11, 12, 16, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--snow);
  /* Tren trang tinh, header mang san ca .on-light; khi cuon toi footer toi thi
     script them .on-dark de len tren, nhung duong ke chan cua .on-light van con
     lai. Xoa mau di la xong — trang chinh khong co vien nen o do la lenh rong. */
  border-bottom-color: transparent;
}
.header-inner {
  max-width: none; margin: 0 auto; height: 100%;
  padding: 0 72px;
  display: flex; align-items: center; gap: 26px;
}

.logo { display: flex; align-items: center; gap: 9px; font-weight: 450; font-size: 16px; letter-spacing: .01em; }
.logo-mark { width: 24px; height: 24px; }
.logo-name {
  color: var(--ink);
}
.on-dark .logo-name { color: var(--snow); }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 1; }

.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 450; letter-spacing: 0.11px;
  color: #45474d;
  background: rgba(183, 191, 217, .09);
  transition: background .2s ease, color .2s ease;
}
a.nav-link { text-decoration: none; }
.nav-link:hover, .nav-dd.open .nav-link { background: rgba(183, 191, 217, .22); color: #000; }
.on-dark .nav-link { color: var(--snow-2); background: rgba(239, 240, 243, .09); }
.on-dark .nav-link:hover, .on-dark .nav-dd.open .nav-link { background: rgba(239, 240, 243, .2); color: #fff; }

.caret { width: 15px; height: 15px; transition: transform .25s ease; }
.nav-dd.open .caret { transform: rotate(180deg); }

.nav-dd { position: relative; }
.dd-panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 300px; padding: 16px;
  background: #fff; color: var(--ink);
  border-radius: var(--r-lg);
  border: 1px solid rgba(18, 19, 23, .08);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .16);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.nav-dd.open .dd-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }

.dd-grid { display: grid; gap: 4px; }
.dd-grid.two { grid-template-columns: 1fr 1fr; }
.dd-grid.four { grid-template-columns: 1fr 1fr; }
.dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 450; color: var(--ink-2);
  transition: background .18s ease, color .18s ease;
}
.dd-item:hover { background: #eff2f7; color: #3279f9; }
.dd-ic { font-size: 12.5px; width: 22px; text-align: center; color: var(--blue); font-weight: 500; }

.header-right { display: flex; align-items: center; gap: 12px; }

.burger { display: none; width: 42px; height: 42px; border-radius: 50%; position: relative; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .3s ease, top .3s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 24px; }
.burger.open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* ============================================================
   HERO (light)
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#fff, #f4f5f8);
  overflow: hidden;
}
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  padding: calc(var(--header-h) + 40px) 24px 60px;
  display: flex; flex-direction: column; align-items: center;
}
.hero-logo { margin-bottom: 30px; }
.hero-title {
  font-size: clamp(42px, 6.2vw, 80px);
  font-weight: 450; line-height: 1.06; letter-spacing: -0.02em;
  max-width: 21ch;
  color: var(--ink);
  position: relative;
}
.hero-title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background-size: 400% 100%;
  background-image: linear-gradient(to right,
    var(--blue) 0%, var(--green) 12.5%,
    var(--blue) 25%, var(--green) 37.5%,
    var(--blue) 50%, var(--green) 62.5%,
    var(--blue) 75%, var(--green) 87.5%,
    var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
  z-index: 1;
}
.hero.sweeping .btn-black::before,
.hero.sweeping .hero-title::after {
  opacity: 1;
  animation: btnColorLoop 20s linear infinite;
}

/* Tieu de hero hien tung ky tu khi mo trang (script.js muc 11 bo cac span nay).
   .ht-w bo tung TU va giu nowrap: moi ky tu la inline-block nen neu khong chan,
   trinh duyet duoc phep ngat dong o giua tu — tieu de se vo thanh tung chu roi.
   Cac ky tu tieng Viet o dang NFC nen moi chu cai co dau van la MOT ky tu,
   khong bi tach dau ra khoi chu. */
.hero-title .ht-w { white-space: nowrap; }
.hero-title .ht-c {
  display: inline-block;
  opacity: 0;
  transform: translateY(.16em);
  transition: opacity .3s ease, transform .3s ease;
}
.hero-title .ht-c.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-title .ht-c { opacity: 1; transform: none; transition: none; }
}
.hero-cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   AGENT-FIRST (light gray, typed text + mock)
   ============================================================ */
.agent-first { background: var(--paper-2); padding: 130px 0 150px; position: relative; overflow: hidden; }
.af-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.af-copy .typed-line {
  margin-top: 22px; font-size: 18.5px; color: var(--ink-2);
  min-height: 84px; max-width: 46ch;
}
.caret-blink {
  display: inline-block; width: 2px; height: 1.05em; background: var(--ink);
  vertical-align: text-bottom; margin-left: 3px;
  animation: blink 1s steps(1) infinite;
}
.caret-blink.small { height: 1em; }
.caret-blink.rainbow {
  width: 4px; border-radius: 3px; height: .9em; margin-left: 10px;
  background: linear-gradient(180deg, var(--red), var(--amber), var(--green), var(--blue), var(--violet));
}
@keyframes blink { 50% { opacity: 0; } }

.af-mock {
  background: #fff; border-radius: var(--r-xl);
  border: 1px solid rgba(18, 19, 23, .08);
  box-shadow: 0 40px 90px rgba(18, 19, 23, .14);
  padding: 20px;
  transform: rotate(.6deg);
  animation: mockFloat 7s ease-in-out infinite;
}
@keyframes mockFloat {
  0%, 100% { transform: rotate(.6deg) translateY(0); }
  50% { transform: rotate(.6deg) translateY(-12px); }
}

.mock-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(18,19,23,.09); border-radius: 999px; }
.mock-chip { font-size: 12.5px; color: var(--ink-3); flex: 1; }
.mock-chip.ghost { flex: 0; padding: 5px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.mock-send {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 14px;
}
.mock-project { margin: 14px 4px 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mock-head { display: flex; align-items: center; gap: 10px; margin: 6px 4px 12px; }
.mock-title { font-size: 15px; font-weight: 500; }
.mock-pending { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.mock-switch { width: 30px; height: 18px; border-radius: 999px; background: #d6d9de; position: relative; }
.mock-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

.mock-cards { display: flex; flex-direction: column; gap: 12px; }
.mock-card {
  border-radius: var(--r-md); padding: 14px 16px; position: relative;
  background: var(--paper-2); overflow: hidden;
}
.mock-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, var(--red), var(--amber), var(--green), var(--blue), var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.mock-card p { font-size: 13.5px; font-weight: 450; color: var(--ink); }
.mock-card .mock-body { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.mock-meta { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 11.5px; color: var(--ink-3); }
.mock-meta .run { color: var(--blue); font-weight: 450; margin-left: auto; }
.mock-meta .idle { color: var(--green); font-weight: 450; margin-left: auto; }
.mock-review {
  background: #e5eeff; color: var(--blue); border-radius: 999px; padding: 4px 12px; font-weight: 500;
}

/* ============================================================
   INTRO PANEL (dark rounded)
   ============================================================ */
.intro-sec { background: var(--paper-2); padding: 0 32px 110px; }
.intro-panel {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  min-height: 560px; border-radius: var(--r-xl);
  background: var(--night);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  overflow: hidden;
}
.star-field { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Cac khoi toi mang truong sao nen. .star-field la absolute/inset:0 nen khoi
   chua no BAT BUOC phai duoc dinh vi, khong thi canvas nhay len phu ca trang.
   makeStarField() do kich thuoc bang parentElement.getBoundingClientRect(),
   nen canvas phai la con truc tiep cua section. .wrap phai noi len tren canvas,
   neu khong thi chu bi canvas che va khong bam duoc vao link nao. */
.products, .usecases, .blog { position: relative; }
.products > .wrap, .usecases > .wrap, .blog > .wrap { position: relative; z-index: 2; }
.intro-play { position: relative; z-index: 2; }
.intro-brand {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
  color: var(--snow); font-size: 22px; font-weight: 500; letter-spacing: .02em;
}

/* ============================================================
   PRODUCTS (dark)
   ============================================================ */
.products { background: var(--night); padding: 130px 0 60px; }
.sec-head { margin-bottom: 90px; }

.product-block {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: center;
  padding: 80px 0; border-top: 1px solid rgba(239, 240, 243, .09);
}
.product-block.flip .pb-copy { order: 2; }
.product-block.flip .pb-media { order: 1; }

.pb-copy h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 450; color: var(--snow); letter-spacing: -0.01em; }
.pb-copy p { margin-top: 18px; color: var(--snow-2); font-size: 16.5px; max-width: 48ch; }
.pb-copy .btn { margin-top: 28px; }

.pb-media {
  border-radius: var(--r-xl); min-height: 330px;
  display: flex; align-items: center; justify-content: center;
  padding: 34px; overflow: hidden;
}

/* 2.0 inbox visual */
.inbox-media { background: linear-gradient(150deg, #14161c, #0e0f14); border: 1px solid rgba(239,240,243,.08); }
.mini-inbox { width: 100%; max-width: 430px; display: flex; flex-direction: column; gap: 10px; }
.mi-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(239, 240, 243, .05); border: 1px solid rgba(239,240,243,.08);
  border-radius: 12px; padding: 12px 16px; font-size: 13.5px; color: var(--snow-2);
}
.mi-row b { margin-left: auto; font-weight: 450; font-size: 12px; }
.mi-dot { width: 8px; height: 8px; border-radius: 50%; }
.mi-dot.run { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
.mi-dot.idle { background: var(--amber); }
.mi-dot.ok { background: var(--green); }
.mi-row b { color: var(--snow-2); }
@keyframes pulse { 50% { opacity: .35; } }

/* CLI terminal */
.terminal-media { background: radial-gradient(120% 140% at 20% 0%, #171a22, #0b0c10); border: 1px solid rgba(239,240,243,.08); }
.term { width: 100%; max-width: 470px; background: #0d0e12; border: 1px solid rgba(239,240,243,.1); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(239,240,243,.07); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c2f37; }
.term-bar i:nth-child(1) { background: #fc413d99; }
.term-bar i:nth-child(2) { background: #fbbc0499; }
.term-bar i:nth-child(3) { background: #00b95c99; }
.term-bar span { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.term-body { padding: 18px 18px 22px; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.75; color: var(--snow-2); white-space: pre-wrap; }
.t-p { color: var(--green); }
.t-c { color: var(--snow); }
.t-o { color: var(--amber); }
.t-ok { color: var(--green); }

/* SDK */
.sdk-media { background: radial-gradient(90% 110% at 50% 50%, #3d8bff 0%, #2a63cf 45%, #101a33 100%); }
.sdk-label { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: .06em; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.35); }

/* IDE code card */
.code-media { background: linear-gradient(150deg, #1a1c23, #101116); border: 1px solid rgba(239,240,243,.08); }
.code-card { width: 100%; max-width: 480px; background: #fdfcf9; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.code-head { display: flex; justify-content: space-between; padding: 11px 16px; font-size: 12px; color: #8a8f98; border-bottom: 1px solid #eceae4; }
.code-body { padding: 18px 20px; font-family: "Cascadia Code", Consolas, monospace; font-size: 12.8px; line-height: 1.7; color: #3c4043; white-space: pre; overflow-x: auto; }
.c-kw { color: #9334e6; }
.c-str { color: #d93025; }
.c-tag { color: #e37400; }
.c-attr { color: #188038; }
.c-fn { color: #1a73e8; }

/* ============================================================
   USE CASES (dark)
   ============================================================ */
.usecases { background: var(--night); padding: 90px 0 130px; }
.uc-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: end; margin-bottom: 60px; }
.uc-lede { color: var(--snow-2); font-size: 16.5px; max-width: 52ch; }

.uc-carousel { overflow: hidden; }
.uc-track { display: flex; gap: 26px; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.uc-card {
  flex: 0 0 calc(50% - 13px);
  background: var(--night-3); border: 1px solid rgba(239,240,243,.08);
  border-radius: var(--r-xl); overflow: hidden;
}
.uc-media { position: relative; height: 300px; display: flex; align-items: flex-end; padding: 24px; }
.uc-media.m1 { background: radial-gradient(130% 130% at 80% 10%, #7a5cff 0%, #2b2150 55%, #14102a 100%); }
.uc-media.m2 { background: radial-gradient(130% 130% at 80% 10%, #00b95c 0%, #0d3d46 55%, #0b1a24 100%); }
.uc-media.m3 { background: radial-gradient(130% 130% at 80% 10%, #fc413d 0%, #4d1d33 55%, #1c0f1a 100%); }
.uc-role { color: #fff; font-size: 20px; font-weight: 450; padding-right: 18px; border-right: 1px solid rgba(255,255,255,.5); }
.uc-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(11, 12, 16, .55); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .25s ease, background .25s ease;
}
.uc-card:hover .uc-play { transform: translate(-50%, -50%) scale(1.1); background: rgba(11, 12, 16, .75); }
.uc-body { padding: 24px 26px 28px; }
.uc-tag { font-size: 12.5px; color: var(--ink-3); color: #8b909b; }
.uc-body p { margin: 10px 0 16px; font-size: 15px; color: var(--snow-2); min-height: 66px; }

.uc-controls { display: flex; gap: 10px; margin-top: 34px; }
.ctrl {
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--snow); color: var(--ink);
  display: grid; place-items: center;
  transition: transform .2s ease, opacity .2s ease;
}
.ctrl svg { width: 19px; height: 19px; }
.ctrl:hover { transform: scale(1.07); }
.ctrl[disabled] { opacity: .35; pointer-events: none; }

/* ============================================================
   AVAILABILITY (light dotted)
   ============================================================ */
.avail {
  padding: 130px 0;
  background-image: radial-gradient(rgba(18, 19, 23, .16) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
}
/* auto-fit thay vi "1fr 1fr" chot cung: con MOT cot thi no chiem tron be ngang
   thay vi nam lech nua trai bo trong nua phai. Them cot moi van tu chia deu. */
.avail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 60px; }
.avail-badge {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: #e9ebef; font-size: 13px; font-weight: 450; color: var(--ink);
}
.avail-title { margin-top: 22px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 450; letter-spacing: -0.015em; }
.avail-sub { margin: 8px 0 26px; color: var(--ink-2); font-size: 17px; }

/* ============================================================
   BLOG (dark)
   ============================================================ */
.blog { background: var(--night); padding: 120px 0; }
.blog-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 46px; }

.blog-rail {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: none;
}
.blog-rail::-webkit-scrollbar { display: none; }

.blog-card {
  flex: 0 0 340px; scroll-snap-align: start;
  background: var(--night-3); border: 1px solid rgba(239,240,243,.08);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.blog-card:hover { transform: translateY(-6px); border-color: rgba(239,240,243,.2); }
.blog-art { height: 190px; display: grid; place-items: center; font-size: 22px; font-weight: 500; color: #fff; letter-spacing: .02em; }
.blog-art.a1 { background: radial-gradient(120% 130% at 20% 0%, #3186ff, #123a75 70%); }
.blog-art.a2 { background: linear-gradient(135deg, #fc413d, #fbbc04 45%, #00b95c 90%); }
.blog-art.a3 { background: radial-gradient(120% 130% at 80% 10%, #7a5cff, #1d1640 70%); }
.blog-art.a4 { background: radial-gradient(120% 130% at 30% 100%, #00b95c, #0e2a33 70%); }
.blog-art.a5 { background: radial-gradient(120% 130% at 70% 0%, #ffe432, #6b5200 85%); color: #1c1c1c; }
.blog-body { padding: 20px 22px 24px; }
.blog-body h3 { font-size: 17px; font-weight: 450; color: var(--snow); line-height: 1.4; min-height: 48px; }
.blog-meta { margin: 8px 0 14px; font-size: 12.5px; color: #8b909b; }
.blog-controls { display: flex; gap: 10px; margin-top: 30px; }

/* ============================================================
   DOWNLOAD (dark starry)
   ============================================================ */
.download { position: relative; background: var(--night); padding: 150px 0 130px; overflow: hidden; }
.dl-inner { position: relative; z-index: 2; text-align: center; }
.dl-title {
  font-size: clamp(38px, 5.4vw, 72px); font-weight: 450; letter-spacing: -0.02em;
  color: var(--snow); display: inline-flex; align-items: center;
}
.dl-actions { display: flex; gap: 14px; justify-content: center; margin-top: 42px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #17181d; position: relative; overflow: hidden; }
.footer-links {
  display: flex; gap: 90px; padding-top: 42px; padding-bottom: 24px;
}
.f-col { display: flex; flex-direction: column; gap: 10px; }
.f-col h4 { font-size: 14px; font-weight: 500; color: var(--snow); margin-bottom: 4px; }
.f-col a, .f-col span { font-size: 14px; color: #8b909b; transition: color .2s ease; }
.f-col a:hover { color: var(--snow); }
/* Cot phap nhan: dia chi dai nen can chan be ngang, khong thi no day hai cot
   con lai ra sat mep phai. line-height rong hon vi day la van ban, khong phai
   danh sach link. */
.f-col-co { max-width: 300px; }
.f-col-co span { line-height: 1.5; }

.giant-word {
  font-size: 7.5vw; line-height: .95; font-weight: 500; letter-spacing: .01em;
  text-align: center; color: rgba(239, 240, 243, .055);
  user-select: none; white-space: nowrap;
  margin-top: 10px;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 20px;
  border-top: 1px solid rgba(239, 240, 243, .08);
  margin-top: -8px; position: relative;
}
.fb-brand { font-size: 13px; font-weight: 450; color: #9aa0aa; }
.fb-links { display: flex; gap: 26px; }
.fb-links a { font-size: 13px; color: #8b909b; }
.fb-links a:hover { color: var(--snow); }

/* Mock cho MorVoi: song am + cau vua nghe duoc. Cac cot dung bien --h dat inline
   trong HTML de moi cot mot chieu cao, khong phai viet 17 luat rieng. */
.voice-media { background: radial-gradient(110% 130% at 30% 0%, #1d2030, #0b0c11); border: 1px solid rgba(239, 240, 243, .08); }
.voice-card { width: 100%; max-width: 430px; display: flex; flex-direction: column; gap: 20px; }
.voice-wave { display: flex; align-items: center; gap: 5px; height: 92px; }
.voice-wave i { flex: 1; height: var(--h); min-height: 4px; border-radius: 99px; background: linear-gradient(180deg, #7a5cff, #3186ff); }
.voice-line { margin: 0; font-size: 18px; line-height: 1.5; color: var(--snow); }
.voice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--ink-3); }
.voice-meta span { color: #5fd6a4; }

/* ============================================================
   CHUNG TOI + LIEN HE
   ============================================================ */
/* Hai muc nay cung mang canvas .star-field nen BAT BUOC position: relative,
   va .wrap phai noi len tren canvas — xem ghi chu o muc .products. */
.about, .contact { position: relative; background: var(--night); padding: 100px 0; }
.about > .wrap, .contact > .wrap { position: relative; z-index: 2; }

.about-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: rgba(239, 240, 243, .09);
  border: 1px solid rgba(239, 240, 243, .09); border-radius: var(--r-lg); overflow: hidden;
}
.about-facts > div { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; background: var(--night); }
.about-facts span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.about-facts strong { font-size: 16px; font-weight: 450; color: var(--snow); }

/* Trang lien he: ban do lon ben trai, thong tin ben phai — tron mot man hinh.
   align-items: stretch de cot ban do cao bang cot chu, khong phai chot cung
   chieu cao. Chieu cao thuc lay tu min-height cua .contact-map. */
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
  align-items: stretch;
}

.contact-map {
  display: flex; flex-direction: column;
  min-height: clamp(380px, 58vh, 600px);
  background: var(--paper-2);
  border: 1px solid rgba(18, 19, 23, .11); border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18, 19, 23, .09);
}
/* min-height: 0 de iframe co the co lai duoi ap luc cua flex; thieu no thi
   iframe giu chieu cao mac dinh 150px va day dai dia chi rot khoi khung. */
.contact-map iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; }

.map-addr {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--paper);
  border-top: 1px solid rgba(18, 19, 23, .1);
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.map-addr > svg { width: 19px; height: 19px; flex: none; color: var(--blue); }
.map-addr > span { flex: 1; }
.map-addr > a { flex: none; font-size: 13.5px; font-weight: 450; color: var(--blue); white-space: nowrap; }
.map-addr > a:hover { text-decoration: underline; }

.contact-panel { display: flex; flex-direction: column; justify-content: center; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Xep doc thi dat khoi chu len truoc — tren dien thoai khong con trai phai,
   nguoi doc can thay tieu de "Lien he" chu khong phai nhay thang vao ban do. */
@media (max-width: 1020px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-map { min-height: clamp(360px, 48vh, 480px); order: 2; }
  .contact-panel { order: 1; }
}
@media (max-width: 640px) {
  /* Dia chi xuong 2-3 dong o be ngang nay, nen ghim bieu tuong theo dong dau
     thay vi de no troi ra giua khoi. */
  .map-addr { align-items: flex-start; gap: 10px; padding: 14px 16px; font-size: 13.5px; }
  .map-addr > svg { margin-top: 1px; }
  .contact-actions .btn { width: 100%; }
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }



/* Dropdown theo nhóm */
.dd-panel.wide { min-width: 320px; padding: 10px; }
.dd-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 5px; }
.dd-group + .dd-group { border-top: 1px solid rgba(18, 19, 23, .08); margin-top: 6px; padding-top: 4px; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .af-grid, .product-block, .uc-head, .avail-grid { grid-template-columns: 1fr; gap: 44px; }
  .product-block.flip .pb-copy { order: 1; }
  .product-block.flip .pb-media { order: 2; }
  .uc-card { flex: 0 0 100%; }
  .footer-links { gap: 60px; }
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255, 255, 255, .98); color: var(--ink);
    backdrop-filter: blur(16px);
    padding: 16px 24px 26px;
    border-bottom: 1px solid rgba(18,19,23,.08);
    transform: translateY(-120%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    margin-left: 0;
  }
  .main-nav.open { transform: translateY(0); }
  .site-header.on-dark .main-nav { background: rgba(15, 16, 21, .98); color: var(--snow); border-bottom-color: rgba(239,240,243,.1); }
  .nav-link { width: 100%; justify-content: space-between; padding: 13px 12px; color: inherit; }
  .dd-panel { position: static; box-shadow: none; border: 0; background: rgba(18,19,23,.04); display: none; min-width: 0; }
  .site-header.on-dark .dd-panel { background: rgba(239,240,243,.06); color: var(--snow); }
  .nav-dd.open .dd-panel { display: block; opacity: 1; transform: none; pointer-events: auto; }
  .site-header.on-dark .dd-item { color: var(--snow-2); }
  .burger { display: block; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-inner { padding: 0 20px; gap: 14px; }
  .hero-cta, .dl-actions { flex-direction: column; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .btn-lg { width: 100%; }
  .intro-panel { min-height: 420px; border-radius: var(--r-lg); }
  .intro-sec { padding: 0 20px 80px; }
  .blog-card { flex-basis: 280px; }
  .giant-word { font-size: 12vw; }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .fb-links { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   STANDALONE PAGES — white background with full-page sparkle field.
   ============================================================ */
.page-light {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.page-light > .page-particles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* Footer giu nguyen nen toi #17181d cua no nen khoi nay che kin canvas sao —
   dung nhu trang chinh. Vi vay z-index: 1 o day la bat buoc, khong thi sao se
   noi len tren chan trang. */
.page-light > * {
  position: relative; z-index: 1;
}
.page-light .about,
.page-light .contact {
  background: transparent;
}

/* Mo trang ra la thay tron mot man hinh noi dung, footer phai cuon moi toi.
   Dung flex cot + justify-content thay vi align-items: con .wrap van la mot
   khoi tran be ngang nhu cu, khong bi flex bop lai theo be rong noi dung.
   100svh de tren dien thoai thanh dia chi cua trinh duyet khong an lem. */
.page-light .about:first-of-type,
.page-light .contact:first-of-type {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 80px;
}
/* .wrap co san margin: 0 auto. Le auto theo truc ngang cua mot flex item lam
   no thoi gian ra theo noi dung thay vi tran het be ngang, nen khoi bi hut lai
   hep hon luoi 1240px cua ca trang. width: 100% keo no ve dung co. */
.page-light .about:first-of-type > .wrap,
.page-light .contact:first-of-type > .wrap {
  width: 100%;
}

/* Chu va vien: cac muc duoi day duoc to san cho nen toi (--snow / --snow-2),
   dat len nen trang thi mo gan nhu khong doc duoc — lat het ve thang --ink. */
.page-light .h2 { color: var(--ink); }
.page-light .h2 .thin { color: var(--ink-3); }
.page-light .uc-lede { color: var(--ink-2); }

.page-light .about-facts {
  background: rgba(18, 19, 23, .11);
  border-color: rgba(18, 19, 23, .11);
}
.page-light .about-facts > div { background: var(--paper); }
.page-light .about-facts strong { color: var(--ink); }

/* Footer khong co luat rieng o day: no dung y nguyen bo mau toi cua trang chinh. */

/* ============================================================
   MUC NOI DUNG TREN TRANG TINH — chung tôi / liên hệ
   ============================================================ */
/* Cac muc nay co nen dac, nen chung che kin truong sao dang position: fixed
   phia sau. Chu y day la co y: sao chi con thay o man hinh dau tien, giong
   trang chinh chi rai sao o hero va cac khoi toi. */
.page-sec { position: relative; background: var(--paper); padding: 110px 0; }
.page-sec.sec-alt { background: var(--paper-2); }
.page-sec > .wrap { position: relative; z-index: 2; }

.sec-label {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sec-title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 450; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
.sec-title .thin-ink { font-weight: 350; color: var(--ink-3); }
.sec-lede { margin-top: 18px; max-width: 58ch; font-size: 16.5px; color: var(--ink-2); }

/* --- Ba nguyen tac --- */
.principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px; margin-top: 56px;
}
.principle {
  padding: 30px 28px 32px; background: var(--paper);
  border: 1px solid rgba(18, 19, 23, .11); border-radius: var(--r-lg);
}
.principle .p-no { font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--blue); }
.principle h3 { margin-top: 16px; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.principle p { margin-top: 12px; font-size: 15px; line-height: 1.62; color: var(--ink-2); }

/* --- Bon san pham --- */
.prod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 20px; margin-top: 52px;
}
.prod-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 28px 26px 26px; background: var(--paper);
  border: 1px solid rgba(18, 19, 23, .11); border-radius: var(--r-lg);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.prod-card:hover {
  transform: translateY(-4px); border-color: rgba(18, 19, 23, .26);
  box-shadow: 0 20px 44px rgba(18, 19, 23, .09);
}
.prod-card h3 { font-size: 18.5px; font-weight: 500; color: var(--ink); }
.prod-card p { flex: 1; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.card-link { font-size: 13.5px; font-weight: 450; color: var(--blue); }

/* --- Loi moi lien he --- */
.cta-sec { border-top: 1px solid rgba(18, 19, 23, .09); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-inner .sec-title { margin-top: 0; }

/* --- Khoi thong tin lien he --- */
.contact-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 26px 32px; margin-top: 42px;
}
.contact-list dt {
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.contact-list dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.contact-list dd a { border-bottom: 1px solid rgba(18, 19, 23, .22); transition: border-color .2s ease; }
.contact-list dd a:hover { border-bottom-color: var(--ink); }

@media (max-width: 900px) {
  .cta-inner { align-items: flex-start; }
}
@media (max-width: 640px) {
  .page-sec { padding: 78px 0; }
  .cta-inner .btn { width: 100%; }
}

/* ============================================================
   MIMIR AI PAGES — mockup riêng cho từng tính năng
   ============================================================ */
/* --- SISY: chat có căn cứ --- */
.chat-card { width: 100%; max-width: 480px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 12.5px; color: var(--ink-3); background: #fafafa; border-bottom: 1px solid #eceae4; }
.chat-dots { display: flex; gap: 6px; }
.chat-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.chat-dots i:nth-child(2) { background: #febc2e; }
.chat-dots i:nth-child(3) { background: #28c840; }
.chat-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: #fdfcf9; }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.chat-msg.user { align-self: flex-end; background: #121317; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.ai { align-self: flex-start; background: #fff; border: 1px solid #eceae4; border-bottom-left-radius: 4px; color: var(--ink); }
.chat-src { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chat-src span { font-size: 11px; color: #5b6472; background: #f3f4f7; border: 1px solid #e4e6ec; border-radius: 8px; padding: 5px 9px; }
.chat-src .ok { color: #0a7d33; }
.chat-input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e4e6ec; border-radius: 12px; padding: 10px 13px; font-size: 12.5px; color: #9aa1ad; background: #fff; }
.chat-input b { width: 24px; height: 24px; border-radius: 50%; background: #121317; color: #fff; display: grid; place-items: center; font-size: 13px; }

/* --- TẠO ẢNH: bộ sinh ảnh --- */
.gen-card { width: 100%; max-width: 480px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.gen-head { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid #eceae4; }
.gen-model { color: #7b5cff; font-weight: 600; }
.gen-prompt { display: flex; align-items: center; gap: 10px; margin: 14px 14px 0; border: 1px solid #e4e6ec; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink); background: #fdfcf9; }
.gen-prompt .p-icon { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #0a84ff, #7b5cff); color: #fff; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.gen-prompt p { flex: 1; }
.gen-prompt .go { width: 26px; height: 26px; border-radius: 50%; background: #121317; color: #fff; display: grid; place-items: center; font-size: 14px; }
.gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.gen-img { aspect-ratio: 4 / 3; border-radius: 10px; position: relative; overflow: hidden; }
.gen-img::after { content: "✦"; position: absolute; right: 8px; top: 6px; color: rgba(255,255,255,.85); font-size: 13px; }
.g1 { background: linear-gradient(135deg, #0a84ff, #4e6bff 60%, #7b5cff); }
.g2 { background: linear-gradient(135deg, #ff9f0a, #ff6b5c 60%, #ff3b6b); }
.g3 { background: linear-gradient(135deg, #30d158, #0aa8a0 60%, #0a6bff); }
.g4 { background: linear-gradient(135deg, #bf5af2, #7b5cff 55%, #5c8aff); }
.gen-bar { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-top: 1px solid #eceae4; font-size: 11.5px; color: var(--ink-3); }
.gen-bar b { color: #0a7d33; font-weight: 600; }

/* --- AI GIỌNG NÓI: trợ lý giọng nói --- */
.voice-card2 { width: 100%; max-width: 460px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.v-stage { padding: 34px 26px 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: linear-gradient(180deg, #fafbff, #fdfcf9); }
.v-mic { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0a84ff, #7b5cff); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(0,113,227,.35); }
.v-mic svg { width: 26px; height: 26px; }
.v-wave { display: flex; align-items: center; gap: 4px; height: 42px; }
.v-wave i { width: 4px; border-radius: 2px; background: #0a84ff; animation: vw 1.1s ease-in-out infinite; }
.v-wave i:nth-child(odd) { animation-delay: .3s; }
.v-wave i:nth-child(3n) { animation-delay: .55s; }
@keyframes vw { 0%, 100% { height: 8px; } 50% { height: 36px; } }
.v-text { font-size: 14.5px; font-style: italic; text-align: center; color: var(--ink); }
.v-lines { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.v-line { font-size: 12px; border-radius: 10px; padding: 9px 12px; }
.v-line.ok { color: #0a7d33; background: #eefaf2; border: 1px solid #d5f0e0; }
.v-line.run { color: #5b6472; background: #f3f4f7; border: 1px solid #e4e6ec; }
.v-bar { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-top: 1px solid #eceae4; font-size: 11.5px; color: var(--ink-3); }
.v-live { color: #ff3b30; font-weight: 600; }

/* --- SCAN VĂN BẢN: máy scan tài liệu --- */
.scan-card2 { width: 100%; max-width: 470px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.s-stage { position: relative; padding: 26px; background: #f3f4f7; display: grid; place-items: center; }
.s-doc { position: relative; width: 100%; max-width: 320px; background: #fff; border: 1px solid #e4e6ec; border-radius: 6px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.s-doc::before, .s-doc::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid #0a84ff; }
.s-doc::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.s-doc::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.s-line { height: 10px; border-radius: 5px; background: #e6e8ee; }
.s-line.title { width: 55%; height: 14px; background: #d9dbe3; }
.s-line.w90 { width: 90%; } .s-line.w80 { width: 80%; } .s-line.w70 { width: 70%; } .s-line.w60 { width: 60%; }
.s-badge { position: absolute; right: 8px; bottom: 8px; background: #0a84ff; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 16px rgba(10,132,255,.4); }
.s-panel { padding: 16px; border-top: 1px solid #eceae4; }
.s-panel-head { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #9aa1ad; margin-bottom: 8px; }
.s-panel-text { font-size: 12.5px; color: var(--ink); line-height: 1.6; font-family: "Cascadia Code", Consolas, monospace; }
.s-chip { display: inline-block; margin-top: 10px; font-size: 11px; color: #0a7d33; background: #eefaf2; border: 1px solid #d5f0e0; padding: 4px 10px; border-radius: 999px; }