/* ===========================================================================
   SigmaCloud — hệ thống thiết kế Genesis
   Bám sát genesis-DESIGN.md: bảng màu, thang chữ, thang khoảng cách 4px,
   bán kính bo góc, quy tắc đổ bóng (chỉ dùng cho hover/focus).
   =========================================================================== */

:root {
  /* màu */
  --primary:       #6366F1;
  --primary-hover: #4F46E5;
  --neutral:       #9C9C9C;
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --text:          #0A0A0A;
  --text-2:        #6B6B6B;
  --border:        #E8E8EC;
  --success:       #10B981;
  --warning:       #F59E0B;
  --error:         #EF4444;

  /* Chữ.
     LƯU Ý DẤU TIẾNG VIỆT: General Sans (Fontshare) KHÔNG có glyph tiếng Việt.
     Nếu để nó đứng đầu, trình duyệt phải ghép chữ từ font khác và dấu bị đặt
     lệch sang chữ bên cạnh ("cầu" thành "câù"). Vì vậy mọi ngăn xếp font đều
     ưu tiên font hệ thống có đủ dấu tiếng Việt trước, hoặc dùng Be Vietnam Pro
     cho phần hiển thị. */
  --display: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --body:    "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

  /* bo góc */
  --r-chip: 4px;
  --r-ctl:  6px;
  --r-pane: 8px;
  --r-card: 12px;

  /* đổ bóng — chỉ dùng khi hover/focus */
  --sh-card:  0 8px 30px rgba(0,0,0,.08);
  --sh-prim:  0 4px 12px rgba(99,102,241,.35);
  --ring:     0 0 0 3px rgba(99,102,241,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* lưới chấm trang trí — phần tử trang trí duy nhất */
#dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- chữ ---- */
.display {
  font: 700 68px/1.12 var(--display);
  letter-spacing: -.035em;
  margin: 0 0 20px;
}
.display em { font-style: normal; color: var(--primary); }

.h-section {
  font: 700 32px/1.25 var(--display);
  letter-spacing: -.025em;
  margin: 0 0 8px;
}

h3 {
  font: 600 18px/1.4 var(--display);
  letter-spacing: -.015em;
  margin: 0 0 8px;
}

.overline {
  display: inline-block;
  font: 500 11px/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 20px;
}

.lede    { font-size: 17px; color: var(--text-2); max-width: 620px; margin: 0 0 32px; }
.sub     { font-size: 15px; color: var(--text-2); margin: 0; }
.muted   { color: var(--text-2); font-size: 13px; }

/* --------------------------------------------------------------- nav ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in { height: 56px; display: flex; align-items: center; gap: 24px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 16px/1 var(--display);
  letter-spacing: -.015em;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--primary);
}

.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font: 500 14px/1 var(--body);
  color: var(--text-2);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--r-ctl);
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: var(--bg); color: var(--text); }

/* ------------------------------------------------------------- nút ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 14px/1 var(--body);
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-sm { height: 32px; padding: 0 14px; }
.btn-md { height: 38px; padding: 0 18px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--sh-prim); }

.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--neutral); }

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ------------------------------------------------------------ hero ------- */
.hero { padding: 96px 0 80px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* nút mạng xã hội — thứ cấp, không tranh nhấn với nút tải */
.hero-social { display: flex; gap: 8px; flex-wrap: wrap; }

/* icon trong nút */
.ic { width: 16px; height: 16px; margin-right: 8px; flex: none; }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}
.hero-meta b { color: var(--text); font-weight: 500; }
.hero-meta .dot {
  width: 3px; height: 3px;
  border-radius: 9999px;
  background: var(--border);
}

/* ----------------------------------------------------------- section ----- */
.section { padding: 80px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.sec-head { margin-bottom: 48px; max-width: 620px; }

/* ------------------------------------------------------------- thẻ ------- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }
.card p { margin: 0; color: var(--text-2); font-size: 14px; }

.ico {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pane);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------ bước ------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: none; }
.step-n {
  font: 400 12px/1 var(--mono);
  color: var(--neutral);
  padding-top: 5px;
  min-width: 28px;
}
.steps p { margin: 0; color: var(--text-2); font-size: 14px; }
.steps a { color: var(--primary); text-decoration: none; }
.steps a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ giá -------- */
.price { display: flex; flex-direction: column; }
.price.featured { border-color: var(--primary); }
.price-note { margin: 0 0 20px !important; }

.chip {
  align-self: flex-start;
  font: 500 12px/1 var(--body);
  padding: 4px 12px;
  border-radius: 9999px;
  background: #F1F1F4;
  color: #55555F;
  margin-bottom: 16px;
}
.chip-on { background: var(--primary); color: #fff; }

.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.ticks li {
  font-size: 14px;
  color: var(--text-2);
  padding-left: 22px;
  position: relative;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--success);
}
.price .btn { margin-top: auto; align-self: flex-start; }

/* ----------------------------------------------------------- footer ------ */
.foot { border-top: 1px solid var(--border); padding: 32px 0; background: var(--surface); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s;
}
.foot-links a:hover { color: var(--text); }

/* ============================ trang lấy key ============================== */
.key-wrap { max-width: 560px; margin: 0 auto; padding: 64px 24px 96px; position: relative; z-index: 1; }
.key-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px;
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font: 500 13px/1 var(--body);
  margin-bottom: 8px;
}
.hint { font-size: 13px; color: var(--text-2); margin: 6px 0 0; }

.input {
  width: 100%;
  font: 400 14px/1.4 var(--body);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--neutral); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.input.mono { font-family: var(--mono); letter-spacing: .04em; }
.input.err { border-color: var(--error); }

/* ô hiện key sau khi lấy */
.keybox {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pane);
  padding: 18px 20px;
}
.keybox code {
  font: 700 22px/1.3 var(--mono);
  letter-spacing: .08em;
  flex: 1;
  min-width: 240px;
  word-break: break-all;
  color: var(--text);
}

.key-out {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pane);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.key-out code {
  font: 400 15px/1 var(--mono);
  letter-spacing: .06em;
  flex: 1;
  word-break: break-all;
}

.alert {
  border-radius: var(--r-pane);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alert-ok   { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert-warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.alert-err  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.status-row:last-child { border-bottom: none; }

.pill {
  font: 500 12px/1 var(--body);
  padding: 4px 12px;
  border-radius: 9999px;
}
.pill-ok   { background: #ECFDF5; color: #047857; }
.pill-warn { background: #FFFBEB; color: #B45309; }
.pill-err  { background: #FEF2F2; color: #B91C1C; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 24px;
}
.back:hover { color: var(--text); }

.spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: sp .7s linear infinite;
  margin-right: 8px;
}
/* spinner tren nen sang */
.spin-dark {
  border-color: var(--border);
  border-top-color: var(--primary);
  width: 18px; height: 18px;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- đáp ứng ------- */
@media (max-width: 900px) {
  .display   { font-size: 44px; }
  .h-section { font-size: 26px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero { padding: 64px 0 56px; }
  .section { padding: 56px 0; }
  .key-wrap { padding-top: 40px; }
  .key-card { padding: 24px; }
}