/* ═══════════════════════════════════════════════════════════════════════
   site.css — KHUNG CHUNG của mọi trang livedima.com: thanh trên (.sx-bar),
   menu Sản phẩm, menu điện thoại, chân trang (.sx-foot) + các khối trang phụ
   (.sx-page / .sx-hero / .sx-section / .sx-card …).

   Markup thanh trên + chân trang KHÔNG viết tay ở từng trang: chúng được
   "đóng dấu" từ MỘT mẫu bởi `node _tools/chrome.js` (giữa hai mốc
   <!--SX:HEADER--> / <!--SX:FOOTER-->). Sửa mẫu ở đó rồi chạy lại script.
   Đóng dấu tĩnh (không dựng bằng JS) có chủ đích: Google duyệt thương hiệu
   đọc HTML thô của trang chủ để tìm link Privacy/Terms ở chân trang.

   Nạp SAU stylesheet riêng của trang (index.html <style>, legal.css,
   tools.css…) để thắng. Mọi selector có tiền tố .sx- nên không đụng gì cũ.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --sx-bg:#07070B;
  --sx-paper:#111119;
  --sx-paper-2:#16161F;
  --sx-ink:#fff;
  --sx-soft:rgba(255,255,255,.68);
  --sx-dim:rgba(255,255,255,.44);
  --sx-line:rgba(255,255,255,.08);
  --sx-line-2:rgba(255,255,255,.16);
  --sx-pink:#FF2D8F;
  --sx-violet:#7A3CFF;
  --sx-amber:#FFB828;
  --sx-font:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
  --sx-mono:'JetBrains Mono',Consolas,monospace;
  --sx-ease:cubic-bezier(.22,1,.36,1);
  --sx-bar-h:64px;
  /* Một bộ phông cho MỌI trang (trang chủ đã dùng đúng bộ này). legal.css
     khai Bricolage + Manrope cho hai trang pháp lý — ghi đè ở đây chứ không
     sửa legal.css, vì cả trang pháp lý lẫn tools.css đều đọc phông qua hai
     biến này. */
  --font-display:'Be Vietnam Pro','Segoe UI',sans-serif;
  --font-primary:'Be Vietnam Pro','Segoe UI',sans-serif;
}

/* ───────────────────────── THANH TRÊN ───────────────────────── */
.sx-bar{
  position:sticky;top:0;z-index:60;
  height:var(--sx-bar-h);
  display:flex;align-items:center;justify-content:flex-start;gap:22px;
  padding:0 clamp(16px,4vw,44px);
  background:rgba(9,9,15,.80);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--sx-line);
  font-family:var(--sx-font);
}
/* Trang chủ: thanh nổi đè lên màn đầu (khung viền 6px của trang chủ). */
.sx-bar.sx-fixed{position:fixed;top:6px;left:6px;right:6px}
@media(max-width:600px){ .sx-bar.sx-fixed{top:4px;left:4px;right:4px} }

.sx-bar .brand,.sx-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.sx-brand img{height:34px;width:auto;display:block}
.sx-brand span{font-family:var(--sx-font);font-weight:800;letter-spacing:.4px;font-size:17px;color:#fff;white-space:nowrap}
.sx-brand span b{color:var(--sx-pink);font-weight:800}

.sx-menu{display:flex;align-items:center;gap:2px}
.sx-link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:10px;border:0;background:none;cursor:pointer;
  font:600 14px/1.2 var(--sx-font);color:var(--sx-soft);text-decoration:none;white-space:nowrap;
  transition:color .18s,background .18s;
}
/* [hidden] là rule của TRÌNH DUYỆT — `.sx-link{display:inline-flex}` thắng nó,
   thiếu dòng này là mục "Nội bộ" (ẩn sẵn cho khách) hiện với MỌI người. */
.sx-link[hidden]{display:none}
.sx-link:hover,.sx-dd.is-open>.sx-link{color:#fff;background:rgba(255,255,255,.06)}
.sx-link:focus-visible{outline:2px solid var(--sx-pink);outline-offset:2px}
.sx-link[aria-current="page"],.sx-link.is-active{color:#fff}
.sx-link[aria-current="page"]::after,.sx-link.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sx-pink),var(--sx-violet));
}
.sx-caret{width:13px;height:13px;opacity:.65;transition:transform .2s}
.sx-dd.is-open .sx-caret{transform:rotate(180deg)}

/* menu Sản phẩm */
.sx-dd{position:relative}
.sx-dd-panel{
  position:absolute;left:-8px;top:calc(100% + 10px);width:420px;z-index:70;
  padding:8px;border-radius:16px;background:var(--sx-paper);border:1px solid var(--sx-line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s var(--sx-ease),visibility 0s .18s;
}
.sx-dd.is-open .sx-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s var(--sx-ease)}
.sx-prod{
  display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:center;
  padding:11px;border-radius:12px;text-decoration:none;color:#fff;transition:background .15s;
}
.sx-prod:hover,.sx-prod:focus-visible{background:rgba(255,255,255,.06);outline:none}
.sx-prod-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--sx-line-2);
}
.sx-prod-ico img{width:26px;height:26px;display:block}
.sx-prod-ico svg{width:21px;height:21px;color:#fff}
.sx-prod-ico.is-ld{background:linear-gradient(135deg,rgba(255,45,143,.22),rgba(122,60,255,.22));border-color:rgba(255,45,143,.35)}
.sx-prod-ico.is-jc{background:rgba(255,184,40,.10);border-color:rgba(255,184,40,.35)}
.sx-prod b{display:block;font:700 14.5px/1.3 var(--sx-font)}
.sx-prod i{display:block;font:500 12.5px/1.45 var(--sx-font);font-style:normal;color:var(--sx-dim);margin-top:2px}
.sx-dd-foot{
  margin:6px 4px 2px;padding:10px 8px 4px;border-top:1px solid var(--sx-line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:600 13px var(--sx-font);color:var(--sx-dim);
}
.sx-dd-foot a{color:#fff;text-decoration:none}
.sx-dd-foot a:hover{color:var(--sx-pink)}

/* bên phải */
.sx-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.sx-right .lda{margin:0}
.sx-right .ldl{margin:0}
.sx-bar .ldl-btn{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:10px;cursor:pointer;
  border:1px solid var(--sx-line-2);background:rgba(255,255,255,.04);color:var(--sx-soft);
  font:600 11.5px var(--sx-mono);letter-spacing:.3px;
}
.sx-bar .ldl-btn:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.sx-bar .lda-btn,.sx-bar .lda-me{height:36px;border-radius:10px}
.sx-bar .lda-btn{padding:0 13px}
/* Nút tham gia máy chủ Discord — ĐẶC màu Discord (#5865F2) để tách hẳn khỏi hai
   nút viền mảnh bên cạnh (ngôn ngữ, đăng nhập); cao 36px cho thẳng hàng với chúng. */
.sx-discord{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 11px;border-radius:10px;
  background:#5865F2;color:#fff;text-decoration:none;white-space:nowrap;flex:0 0 auto;
  font:700 13px var(--sx-font);letter-spacing:.2px;
  box-shadow:0 6px 18px -8px rgba(88,101,242,.8);
  transition:background .15s,transform .15s var(--sx-ease),box-shadow .15s;
}
.sx-discord svg{width:19px;height:19px;flex:0 0 auto}
.sx-discord:hover{background:#4752C4;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(88,101,242,.95)}
.sx-discord:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sx-burger{
  display:none;width:40px;height:38px;border-radius:10px;cursor:pointer;
  border:1px solid var(--sx-line-2);background:rgba(255,255,255,.04);color:#fff;
  align-items:center;justify-content:center;
}
.sx-burger svg{width:20px;height:20px}
.sx-burger .sx-x{display:none}
.sx-bar.is-menu .sx-burger .sx-x{display:block}
.sx-bar.is-menu .sx-burger .sx-3{display:none}
.sx-burger:focus-visible{outline:2px solid var(--sx-pink);outline-offset:2px}

/* ── màn vừa / nhỏ: menu thành ngăn kéo xổ xuống dưới thanh ── */
@media(max-width:980px){
  .sx-burger{display:inline-flex}
  /* absolute (không fixed): .sx-bar mang backdrop-filter nên nó ĐÃ là khối
     chứa của mọi con fixed — khai fixed thì top/left vẫn tính theo thanh,
     chỉ là đọc code thì tưởng tính theo cửa sổ. */
  .sx-menu{
    position:absolute;left:0;right:0;top:100%;z-index:59;
    flex-direction:column;align-items:stretch;gap:4px;
    max-height:calc(100vh - var(--sx-bar-h));overflow:auto;
    padding:14px clamp(16px,4vw,44px) 22px;
    background:#0B0B12;border-bottom:1px solid var(--sx-line-2);
    box-shadow:0 30px 60px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s,transform .2s var(--sx-ease),visibility 0s .2s;
  }
  .sx-bar.is-menu .sx-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s var(--sx-ease)}
  .sx-link{padding:13px 12px;font-size:15.5px;border-radius:12px}
  .sx-link[aria-current="page"]::after{left:12px;right:auto;width:22px;bottom:6px}
  /* Trong ngăn kéo: hai sản phẩm bày SẴN, không cần bấm mở */
  .sx-dd>.sx-link{display:none}
  .sx-dd-panel{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;
    padding:4px;margin-bottom:6px;background:rgba(255,255,255,.03);border-color:var(--sx-line)}
}
@media(max-width:600px){
  :root{--sx-bar-h:58px}
  .sx-bar{gap:10px}
  .sx-brand img{height:30px}
  .sx-brand span{font-size:15px}
  .sx-right{gap:7px}
  .sx-bar .ldl-btn{padding:0 8px;height:34px}
  .sx-burger{width:38px;height:34px}
  .sx-bar .lda-btn,.sx-bar .lda-me{height:34px}
  /* Điện thoại: chỉ còn logo Discord — chữ "Discord" chiếm chỗ của tên thương hiệu. */
  .sx-discord{width:34px;height:34px;padding:0;justify-content:center}
  .sx-discord span{display:none}
  .sx-dd-panel .sx-prod i{display:none}
}
/* Màn rất hẹp (iPhone SE/mini 375px): thương hiệu 125px + 4 nút bên phải
   (Discord · ngôn ngữ · đăng nhập · ☰) cần ≥384px với lề 16px — siết lề + khe
   cho vừa thay vì giấu chữ LIVEDIMA’; dưới 370px mới giấu chữ. */
@media(max-width:400px){
  .sx-bar{gap:8px;padding:0 12px}
  .sx-right{gap:5px}
}
@media(max-width:370px){ .sx-brand span{display:none} }

/* ───────────────────────── CHÂN TRANG ───────────────────────── */
.sx-foot{
  position:relative;
  border-top:1px solid var(--sx-line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 60%);
  padding:52px clamp(16px,4vw,44px) 26px;
  font-family:var(--sx-font);text-align:left;color:var(--sx-soft);
}
.sx-foot-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.sx-foot-brand p{margin:14px 0 18px;max-width:30ch;font-size:14px;line-height:1.65;color:var(--sx-dim)}
.sx-foot h4{margin:2px 0 14px;font:700 11.5px var(--sx-font);letter-spacing:1.6px;text-transform:uppercase;color:var(--sx-dim)}
.sx-foot nav,.sx-foot .sx-col{display:flex;flex-direction:column;gap:2px}
.sx-foot a{color:var(--sx-soft);text-decoration:none;font-size:14px;line-height:1.5;padding:4px 0;transition:color .15s;border:0}
.sx-foot a:hover{color:#fff}
.sx-foot a:focus-visible{outline:2px solid var(--sx-pink);outline-offset:2px;border-radius:4px}
.sx-contact{display:flex;gap:8px;flex-wrap:wrap}
.sx-foot .sx-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--sx-line-2);background:rgba(255,255,255,.03);font-size:13px;font-weight:600;color:#fff;
}
.sx-foot .sx-chip svg{width:15px;height:15px;opacity:.8}
.sx-foot .sx-chip:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.sx-community{display:flex;margin-bottom:8px}
.sx-foot .sx-chip-dc{border-color:rgba(88,101,242,.55);background:rgba(88,101,242,.16)}
.sx-foot .sx-chip-dc svg{opacity:1;color:#A5ADFF}
.sx-foot .sx-chip-dc:hover{border-color:#5865F2;background:rgba(88,101,242,.30)}
.sx-foot-bot{
  max-width:1160px;margin:38px auto 0;padding-top:18px;border-top:1px solid var(--sx-line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--sx-dim);
}
.sx-foot-bot b{color:var(--sx-pink);font-weight:800}
@media(max-width:820px){
  .sx-foot-in{grid-template-columns:repeat(3,1fr);gap:28px 22px}
  .sx-foot-brand{grid-column:1/-1}
  .sx-foot-brand p{max-width:none}
}
@media(max-width:480px){
  .sx-foot{padding-top:40px}
  .sx-foot-in{grid-template-columns:1fr 1fr}
  .sx-foot-bot{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ───────────────────────── KHỐI TRANG PHỤ ───────────────────────── */
.sx-page{font-family:var(--sx-font);color:var(--sx-ink)}
.sx-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,44px)}
.sx-narrow{max-width:900px}

.sx-hero{padding:clamp(48px,8vw,92px) 0 clamp(30px,5vw,54px);position:relative}
.sx-crumb{display:flex;align-items:center;gap:8px;margin:0 0 18px;font:600 12.5px var(--sx-font);color:var(--sx-dim)}
.sx-crumb a{color:var(--sx-dim);text-decoration:none;border:0}
.sx-crumb a:hover{color:#fff}
.sx-crumb svg{width:12px;height:12px;opacity:.6}
.sx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px 12px 5px 10px;border-radius:100px;
  font:700 11.5px var(--sx-mono);letter-spacing:1.4px;text-transform:uppercase;color:#ffd1e6;
  background:rgba(255,45,143,.10);border:1px solid rgba(255,45,143,.32);
}
.sx-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sx-pink);box-shadow:0 0 10px var(--sx-pink)}
.sx-eyebrow.is-jc{color:#ffe2a8;background:rgba(255,184,40,.10);border-color:rgba(255,184,40,.38)}
.sx-eyebrow.is-jc::before{background:var(--sx-amber);box-shadow:0 0 10px var(--sx-amber)}
.sx-h1{margin:0 0 16px;font:800 clamp(34px,5.4vw,58px)/1.06 var(--sx-font);letter-spacing:-1.6px}
.sx-h1 .sx-grad{background:linear-gradient(100deg,#FF5CB0 0%,#B86BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-h1 .sx-gold{background:linear-gradient(100deg,#FFD66B 0%,#FF9A2E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-lead{margin:0 0 28px;max-width:58ch;font:500 clamp(15.5px,1.6vw,17.5px)/1.7 var(--sx-font);color:var(--sx-soft)}
.sx-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  min-height:48px;padding:0 22px;border-radius:13px;border:1px solid transparent;
  font:700 15px var(--sx-font);text-decoration:none;color:#fff;white-space:nowrap;
  transition:transform .2s var(--sx-ease),box-shadow .2s,background .2s,border-color .2s;
}
.sx-btn svg{width:19px;height:19px;flex:0 0 auto}
.sx-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sx-btn-pink{background:linear-gradient(115deg,#FF5CB0,#FF2D8F 60%,#F01870);box-shadow:0 12px 32px rgba(240,24,112,.34)}
.sx-btn-pink:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(240,24,112,.5)}
.sx-btn-gold{background:linear-gradient(115deg,#FFD66B,#FFB02E 55%,#FF8A1F);color:#1d1306;box-shadow:0 12px 32px rgba(255,150,30,.3)}
.sx-btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(255,150,30,.46)}
.sx-btn-ghost{background:rgba(255,255,255,.04);border-color:var(--sx-line-2)}
.sx-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34)}
.sx-btn-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.sx-btn-txt i{font:600 11px var(--sx-mono);font-style:normal;opacity:.78;margin-top:3px;letter-spacing:.2px}

.sx-section{padding:clamp(34px,6vw,70px) 0}
.sx-section+.sx-section{border-top:1px solid var(--sx-line)}
.sx-h2{margin:0 0 10px;font:800 clamp(24px,3.2vw,34px)/1.15 var(--sx-font);letter-spacing:-.8px}
.sx-sub{margin:0 0 30px;max-width:62ch;font:500 15.5px/1.7 var(--sx-font);color:var(--sx-soft)}
.sx-kicker{margin:0 0 10px;font:700 11.5px var(--sx-mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--sx-pink)}

.sx-grid{display:grid;gap:16px}
.sx-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){ .sx-grid.c3,.sx-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .sx-grid.c2,.sx-grid.c3,.sx-grid.c4{grid-template-columns:1fr} }

.sx-card{
  position:relative;padding:22px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--sx-line-2);
}
.sx-card h3{margin:14px 0 6px;font:700 17px/1.35 var(--sx-font);color:#fff}
.sx-card p{margin:0;font:500 14.5px/1.65 var(--sx-font);color:var(--sx-soft)}
.sx-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,rgba(255,45,143,.24),rgba(122,60,255,.24));border:1px solid rgba(255,92,176,.32);
}
.sx-ico svg{width:22px;height:22px}
.sx-ico.is-gold{background:rgba(255,184,40,.12);border-color:rgba(255,184,40,.38);color:#FFD66B}

/* dải số liệu */
.sx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--sx-line-2);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.02)}
.sx-stat{padding:20px 22px;border-left:1px solid var(--sx-line)}
.sx-stat:first-child{border-left:0}
.sx-stat b{display:block;font:800 clamp(22px,2.6vw,28px)/1.1 var(--sx-font);letter-spacing:-.6px}
.sx-stat span{display:block;margin-top:6px;font:500 13px/1.45 var(--sx-font);color:var(--sx-dim)}
@media(max-width:760px){
  .sx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-stat:nth-child(3){border-left:0}
  .sx-stat:nth-child(n+3){border-top:1px solid var(--sx-line)}
}

/* các bước */
.sx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:sxstep}
.sx-step{position:relative;padding:22px;border-radius:18px;border:1px solid var(--sx-line-2);background:rgba(255,255,255,.02)}
.sx-step::before{
  counter-increment:sxstep;content:counter(sxstep);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:14px;
  font:800 15px var(--sx-font);color:#fff;background:linear-gradient(135deg,var(--sx-pink),var(--sx-violet));
}
.sx-step.is-gold::before{background:linear-gradient(135deg,#FFD66B,#FF8A1F);color:#1d1306}
.sx-step h3{margin:0 0 6px;font:700 16.5px/1.35 var(--sx-font)}
.sx-step p{margin:0;font:500 14.5px/1.65 var(--sx-font);color:var(--sx-soft)}
.sx-step code{font:600 .9em var(--sx-mono);background:rgba(255,255,255,.07);border:1px solid var(--sx-line);padding:1px 6px;border-radius:5px;color:#fff}
.sx-step b{color:#fff}
@media(max-width:860px){ .sx-steps{grid-template-columns:1fr} }

/* hộp ghi chú */
.sx-note{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 22px;border-radius:18px;border:1px solid rgba(255,184,40,.28);background:rgba(255,184,40,.05)}
.sx-note ul{margin:0;padding-left:18px;color:var(--sx-soft);font:500 14.5px/1.7 var(--sx-font)}
.sx-note li{margin-bottom:4px}
.sx-note li::marker{color:var(--sx-amber)}
.sx-note h3{margin:0 0 8px;font:700 16px var(--sx-font)}

/* dải kêu gọi cuối trang */
.sx-band{
  margin:clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(24px,4vw,40px);border-radius:24px;border:1px solid var(--sx-line-2);
  background:radial-gradient(70% 140% at 0% 0%,rgba(255,45,143,.22),transparent 60%),radial-gradient(70% 140% at 100% 100%,rgba(122,60,255,.2),transparent 60%),var(--sx-paper);
}
.sx-band.is-gold{background:radial-gradient(70% 140% at 0% 0%,rgba(255,184,40,.2),transparent 60%),radial-gradient(70% 140% at 100% 100%,rgba(255,45,143,.14),transparent 60%),var(--sx-paper)}
.sx-band h2{margin:0 0 6px;font:800 clamp(22px,2.8vw,30px)/1.2 var(--sx-font);letter-spacing:-.6px}
.sx-band p{margin:0;font:500 15px/1.6 var(--sx-font);color:var(--sx-soft)}
.sx-help{margin:0 0 50px;font:500 14px/1.7 var(--sx-font);color:var(--sx-dim)}
.sx-help a{color:#ff8fc6;text-decoration:none;border-bottom:1px solid rgba(255,143,198,.35)}
.sx-help a:hover{color:#fff;border-bottom-color:#fff}

@media (prefers-reduced-motion:reduce){
  .sx-dd-panel,.sx-menu,.sx-btn,.sx-caret,.sx-discord{transition:none}
  .sx-discord:hover{transform:none}
}

/* Neo trong trang (#cai-dat, #gia-han, #fix-re-tieng-cubase…) không được chui
   dưới thanh trên dính. Chỉ áp trong <main>: trang chủ không có <main>, và ở đó
   scroll-margin sẽ dời luôn mốc scroll-snap của từng màn. */
main [id]{scroll-margin-top:calc(var(--sx-bar-h) + 18px)}