/* ─────────────────────────────────────────────────────────────────────
   Landing GiftCodeBox

   Nền sáng, điểm tím–xanh. Đổi màu thì sửa đúng khối :root dưới đây,
   không phải lục cả file — mọi chỗ khác đều dùng lại biến từ đây.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --card: #ffffff;
  --line: #e4e9f2;
  --line-soft: #eef1f7;

  --ink: #0b1220;
  --body: #3d4b63;
  --muted: #6b7890;

  --brand: #6d4aff;
  --brand-2: #0ea5c4;
  --brand-ink: #fff;

  --ok: #0f9d63;
  --bad-bg: #fef3f2;
  --bad-line: #fdc9c4;
  --bad-ink: #b42318;

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lift: 0 18px 44px rgba(31, 41, 76, 0.13);

  --radius: 16px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

.shell { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* Link bỏ qua: ẩn cho tới khi bấm Tab. Người dùng bàn phím nhấn một phát là
   tới thẳng form, không phải lần qua cả thanh điều hướng. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}

.skip:focus { left: 0; }

/* ─── Thanh trên cùng ────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid;
  place-items: center;
  flex: none;
}

.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14.5px; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }

/* ─── Hero ───────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: 76px 0 84px; }

/* Vệt sáng sau tiêu đề. pointer-events none để không chắn chuột lên form. */
.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 640px;
  background: radial-gradient(circle, rgba(109, 74, 255, 0.10), transparent 62%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  /* start chứ KHÔNG phải center: cột trái cao hơn form 240px, căn giữa thì
     form bị đẩy tụt xuống và hở một mảng trắng cả trên lẫn dưới. Cho hai cột
     cùng bắt đầu một mốc thì tiêu đề và form thẳng hàng nhau. */
  align-items: start;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--body);
  margin-bottom: 22px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.16);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--ink);
}

.grad {
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede { margin: 0 0 4px; font-size: clamp(15.5px, 1.8vw, 17.5px); color: var(--body); max-width: 46ch; }

/* Nằm dưới form, xếp dọc — ba dòng ngắn đọc lướt một nhịp là xong. */
.trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 0 4px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}

.trust li { display: flex; align-items: center; gap: 9px; }
.trust svg { flex: none; color: var(--ok); }

/* ─── Ảnh sản phẩm trong hero ────────────────────────────────────── */

.form-side { position: relative; }

.hero-shot {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 18px 0 -30px -34px;
  /* Nhạt đi một chút: ảnh và form đứng cạnh nhau mà cùng đậm thì mắt
     không biết nhìn vào đâu trước. Form phải là thứ nổi nhất. */
  opacity: 0.92;
  /*
    Ảnh JPEG nền trắng, 55 KB — PNG tách nền cùng cỡ tốn tới 300 KB.
    multiply làm phần trắng hoà vào nền sáng, nhìn như đã tách nền.

    Bóng đổ NẰM TRONG ảnh, không dùng filter: drop-shadow(): bộ lọc đó dựa
    vào kênh alpha, mà JPEG không có alpha nên nó đổ bóng quanh cả khung
    chữ nhật — hiện ra một mảng xám vuông vức quanh ảnh.
  */
  mix-blend-mode: multiply;
}

/* ─── Thẻ chứa form — TÂM ĐIỂM CỦA CẢ TRANG ──────────────────────────
   Mọi thứ ở đây phục vụ một việc: mắt phải rơi vào form trước tiên.
   Vùng sáng phía sau, viền gradient, nút to và đậm màu nhất trang.
   ─────────────────────────────────────────────────────────────────── */

/* Quầng sáng chỉ quanh form, không phải cả hero — ánh sáng có điểm rơi
   thì mắt mới biết nhìn vào đâu. */
.form-side::before {
  content: "";
  position: absolute;
  inset: -70px -56px -56px -56px;
  border-radius: 50%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(109, 74, 255, 0.20), transparent 72%);
  pointer-events: none;
}

.form-card {
  position: relative;
  padding: 30px 30px 26px;
  border-radius: 22px;

  /* Viền gradient: nền trắng vẽ trong padding-box, gradient vẽ trong
     border-box — cách duy nhất có viền chuyển màu mà không cần thẻ bọc. */
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(150deg, var(--brand), var(--brand-2) 55%, #dfe5f2) border-box;

  box-shadow:
    0 36px 70px rgba(31, 41, 76, 0.19),
    0 8px 18px rgba(31, 41, 76, 0.07);
}

.form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(109, 74, 255, 0.09);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.form-card h2 { margin: 0 0 6px; font-size: 23px; color: var(--ink); letter-spacing: -0.6px; }
.form-card .hint { margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }

.field { margin-bottom: 15px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  margin-bottom: 7px;
}

input[type="email"],
input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: #fbfcfe;
  border: 1.5px solid #d3dbe9;
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input::placeholder { color: #9aa5ba; }

input:hover { border-color: #b9c4d8; }

input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.15);
}

/* Ô bẫy bot. Người thật không thấy nên không bao giờ điền. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  position: relative;
  width: 100%;
  margin-top: 4px;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
  background: linear-gradient(100deg, #5b35ff, #8b6cff);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.1px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(109, 74, 255, 0.34);
  transition: box-shadow 0.18s, transform 0.12s, filter 0.15s;
}

/* Vệt sáng lướt qua khi rê chuột — chỉ một lần, không nhấp nháy liên tục */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  transition: left 0.55s ease;
}

.btn:hover { filter: brightness(1.06); box-shadow: 0 14px 30px rgba(109, 74, 255, 0.42); }
.btn:hover::after { left: 125%; }
.btn:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(109, 74, 255, 0.32); }

.btn:focus-visible { outline: 3px solid rgba(109, 74, 255, 0.5); outline-offset: 3px; }

.fine { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

.alert {
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14px;
  margin-bottom: 18px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
  color: var(--bad-ink);
}

/* ─── Các mục bên dưới ───────────────────────────────────────────── */

section.band { padding: 78px 0; border-top: 1px solid var(--line-soft); }
section.band.alt { background: var(--bg-soft); }

.band-head { max-width: 620px; margin-bottom: 42px; }

h2.title {
  margin: 0 0 12px;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}

.band-head p { margin: 0; font-size: 16px; color: var(--muted); }

/* Mục nào có nội dung căn giữa thì tiêu đề phải căn giữa theo — tiêu đề
   lệch trái đè lên một khối căn giữa nhìn như quên chưa làm xong. */
.band-head.center { margin-inline: auto; text-align: center; }

/* ─── Danh mục ───────────────────────────────────────────────────── */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px 26px;
}

.cat { transition: transform 0.18s; }
.cat:hover { transform: translateY(-5px); }

/* Ảnh mặt thẻ. Nền ảnh trắng nên multiply cho nó hoà vào nền mục —
   xem ghi chú đầy đủ ở .hero-shot. */
.cat-shot {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  transition: filter 0.18s;
}

.cat:hover .cat-shot { filter: saturate(1.06) brightness(1.02); }

/* Ghim chiều cao đúng hai dòng: có mô tả dài xuống hai dòng, có cái một dòng,
   không ghim thì ô cao thấp khác nhau và cả hàng nhìn so le. */
.cat p {
  margin: -4px 4px 0;
  min-height: 2.9em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* Dải mệnh giá */

.values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.values-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.value-chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
}

/* Đẩy xuống dòng riêng, không chen giữa các viên mệnh giá */
.values-note { flex-basis: 100%; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }

/* ─── Ba bước ────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* Số thứ tự nằm cạnh tiêu đề, phần chữ thụt vào thẳng hàng với tiêu đề.
   Đặt bằng vùng lưới nên thứ tự thẻ trong HTML (ảnh → số → tiêu đề → chữ)
   không phải sắp lại, mà mắt vẫn đọc theo hàng. */
.step {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas:
    "shot shot"
    "num  title"
    ".    body";
  align-items: center;
  /* Ba bước cao bằng nhau (lưới kéo cho bằng), nhưng đoạn chữ dài ngắn khác
     nhau. Không chốt `start` thì chỗ thừa bị chia đều cho ba hàng, làm vòng
     số của bước ở giữa nhích lên hơn chục pixel so với hai bước kia. */
  align-content: start;
  column-gap: 12px;
}

/* Ảnh chụp nền trắng, multiply cho hoà vào nền mục — xem .hero-shot */
.step-shot {
  grid-area: shot;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  mix-blend-mode: multiply;
}

.step-num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 700;
}

.step h3 {
  grid-area: title;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.step p {
  grid-area: body;
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* ─── Cam kết ────────────────────────────────────────────────────── */

/* Hai cột chứ không phải bốn: mỗi ô là hai ba câu, chia bốn thì dòng chữ
   hẹp đến mức chỉ còn vài từ một dòng. */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.promise {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "icon title"
    ".    body";
  align-items: center;
  align-content: start; /* Cùng lý do như .step */
  column-gap: 14px;
  padding: 26px 28px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.promise-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(109, 74, 255, 0.09);
  color: var(--brand);
}

.promise h3 {
  grid-area: title;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.promise p {
  grid-area: body;
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* ─── Câu hỏi thường gặp ─────────────────────────────────────────── */

/* Hẹp hơn hẳn phần còn lại: dòng chữ dài cả nghìn pixel thì mắt lạc dòng. */
.faq {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--line-soft);
}

.faq details { border-bottom: 1px solid var(--line-soft); }

.faq summary {
  position: relative;
  padding: 19px 44px 19px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 650;
  color: var(--ink);
}

/* Bỏ mũi tên mặc định của trình duyệt để dùng dấu cộng tự vẽ bên phải */
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 13px 1.6px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.6px 13px no-repeat;
  transition: transform 0.18s;
}

/* Mở ra thì vạch dọc quay thành vạch ngang — dấu cộng biến thành dấu trừ */
.faq details[open] summary::after { transform: rotate(90deg); }
.faq details[open] summary { color: var(--brand); }

.faq summary:focus-visible { outline: 2px solid rgba(109, 74, 255, 0.5); outline-offset: 2px; }

.answer {
  padding: 0 44px 22px 2px;
  font-size: 15px;
  color: var(--body);
}

/* ─── Hỗ trợ + nút cuối trang ────────────────────────────────────── */

.support-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.support .title { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.support p { margin: 0 0 6px; font-size: 15.5px; color: var(--muted); max-width: 52ch; }
.support-mail { color: var(--brand); font-weight: 600; }
.support-mail:hover { text-decoration: underline; }

/* .btn sinh ra cho nút submit nên rộng hết khổ; bản dùng làm link thì phải
   co lại vừa chữ, không thì một nút dài cả hàng nằm chình ình cuối trang. */
.btn-inline {
  display: inline-block;
  width: auto;
  flex: none;
  margin-top: 0;
  padding: 15px 32px;
  font-size: 15.5px;
  text-align: center;
  white-space: nowrap;
}

/* ─── Trang /egiftcard ───────────────────────────────────────────── */

.egift { position: relative; overflow: hidden; padding: 84px 0 92px; }

/* Cùng vệt sáng như hero trang chủ, để hai trang là một nhà */
.egift::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto -10%;
  height: 700px;
  background: radial-gradient(60% 60% at 30% 40%, rgba(109, 74, 255, 0.1), transparent 70%);
  pointer-events: none;
}

.egift-in {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
}

.egift-copy h1 {
  margin: 14px 0 12px;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.8px;
  color: var(--ink);
}

.egift-copy .lede { margin-bottom: 26px; }
.egift-copy .trust { margin-top: 26px; padding: 0; }

.btn-lg { padding: 17px 38px; font-size: 16.5px; }

.egift-shot { width: min(100%, 460px); height: auto; justify-self: end; mix-blend-mode: multiply; }

/* ─── Hộp thoại xin mã ───────────────────────────────────────────── */

.modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 32px));
  /* Trình duyệt mặc định đặt <dialog> lệch trên; kéo về giữa màn hình */
  margin: auto;
}

.modal::backdrop { background: rgba(11, 18, 32, 0.55); backdrop-filter: blur(2px); }

.modal-card {
  position: relative;
  padding: 30px 30px 26px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 30px 70px rgba(16, 24, 40, 0.3);
}

.modal-card h2 { margin: 0 0 6px; font-size: 23px; color: var(--ink); letter-spacing: -0.6px; }
.modal-card .hint { margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }

.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.modal-x:hover { color: var(--ink); border-color: var(--muted); }
.modal-x:focus-visible { outline: 3px solid rgba(109, 74, 255, 0.5); outline-offset: 2px; }

.noscript-note {
  margin: 0;
  padding: 14px 20px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  text-align: center;
}
.noscript-note a { color: var(--brand); font-weight: 600; }

/* ─── Thư viện bài viết ──────────────────────────────────────────── */

.crumbs {
  margin: 0 0 26px;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.crumbs a { color: var(--brand); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* Trang tổng: các cụm */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.hub {
  display: block;
  padding: 26px 28px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.hub:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 74, 255, 0.35);
  box-shadow: var(--shadow-lift);
}
.hub h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.4px; }
.hub p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }

.hub-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--brand);
}

/* Danh sách bài trong một cụm */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
  border-top: 1px solid var(--line-soft);
}
.post-list li { border-bottom: 1px solid var(--line-soft); }

.post-list a { display: block; padding: 22px 2px; }
.post-list a:hover h2 { color: var(--brand); }
.post-list h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; }
.post-list p { margin: 0 0 8px; font-size: 14.5px; color: var(--muted); }

.post-meta { font-size: 13px; color: var(--muted); }

/* ─── Một bài viết ───────────────────────────────────────────────── */

/* Một cột hẹp. Dòng chữ dài quá 75 ký tự thì mắt trượt dòng khi xuống hàng. */
.post-shell { max-width: 720px; }

.post-head h1 {
  margin: 0 0 14px;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -1.1px;
  color: var(--ink);
}

.post-intro { margin: 0 0 14px; font-size: 17.5px; line-height: 1.6; color: var(--body); }
.post-head .post-meta { margin: 0 0 34px; display: flex; gap: 8px; }

/* Mục lục */
.toc {
  margin: 0 0 34px;
  padding: 20px 24px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}
.toc h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.toc li { font-size: 14.5px; }
.toc a { color: var(--brand); }
.toc a:hover { text-decoration: underline; }

.post-body { font-size: 16.5px; line-height: 1.72; color: var(--body); }

.post-body h2 {
  margin: 40px 0 12px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
  /* Nhảy từ mục lục xuống thì tiêu đề không bị thanh điều hướng che mất */
  scroll-margin-top: 84px;
}
.post-body h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  scroll-margin-top: 84px;
}

.post-body p { margin: 0 0 16px; }
.post-body ul,
.post-body ol { margin: 0 0 18px; padding-left: 24px; display: grid; gap: 8px; }
.post-body li { padding-left: 2px; }
.post-body strong { color: var(--ink); font-weight: 650; }

.post-body a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { text-decoration-thickness: 2px; }

.post-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  font-size: 0.9em;
}

.post-body blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--brand);
  color: var(--ink);
  font-style: italic;
}

/* Hỏi đáp cuối bài — dùng lại kiểu gập mở của mục FAQ trang chủ */
.post-faq { margin-top: 46px; }
.post-faq h2 { margin: 0 0 6px; font-size: 23px; font-weight: 700; letter-spacing: -0.6px; color: var(--ink); }
.post-faq details { border-bottom: 1px solid var(--line-soft); }
.post-faq details:first-of-type { border-top: 1px solid var(--line-soft); }

.post-faq summary {
  position: relative;
  padding: 17px 40px 17px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.6px 12px no-repeat;
  transition: transform 0.18s;
}
.post-faq details[open] summary::after { transform: rotate(90deg); }
.post-faq details[open] summary { color: var(--brand); }
.post-faq .answer { padding: 0 40px 20px 2px; font-size: 15.5px; color: var(--body); }

/* Đọc tiếp */
.post-next {
  margin-top: 44px;
  padding: 24px 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}
.post-next h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.post-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post-next a { color: var(--brand); font-weight: 600; font-size: 15.5px; }
.post-next a:hover { text-decoration: underline; }

/* ─── Trang chữ (Privacy / Terms / Contact) ──────────────────────── */

.prose { max-width: 680px; }
.prose-title { font-size: clamp(28px, 4vw, 38px); margin: 0 0 10px; letter-spacing: -1.1px; }
.prose-lede { margin: 0 0 40px; font-size: 16px; color: var(--muted); }

.prose h2 {
  margin: 36px 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
}

.prose p { margin: 0 0 14px; font-size: 15.5px; color: var(--body); }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin: 6px 0; font-size: 15.5px; color: var(--body); }
.prose-back { margin-top: 44px; }
.prose-back a { color: var(--brand); font-weight: 600; }

/* ─── Chân trang ─────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line-soft);
  padding: 52px 0 38px;
  font-size: 13.5px;
  color: var(--muted);
  background: var(--bg);
}

.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
}

.foot-brand .logo { margin-bottom: 12px; }
.foot-brand p { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 34ch; }

.foot-col { display: flex; flex-direction: column; gap: 9px; }

.foot-col h3 {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--ink);
}

.foot-col a { font-size: 13.5px; color: var(--muted); }
.foot-col a:hover { color: var(--brand); }

.foot-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
  font-size: 12.5px;
}

/* Dòng miễn trừ phải đọc được, không được nhỏ tới mức coi như không có */
.foot-disclaimer { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; max-width: 78ch; }

/* ─── Trang cảm ơn / lỗi ─────────────────────────────────────────── */

.mid {
  min-height: 76vh;
  display: grid;
  place-items: center;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.mid::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 540px;
  background: radial-gradient(circle, rgba(109, 74, 255, 0.09), transparent 62%);
  pointer-events: none;
}

.mid-card {
  position: relative;
  max-width: 520px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px 38px 38px;
  box-shadow: var(--shadow-lift);
}

.tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 157, 99, 0.1);
  border: 1px solid rgba(15, 157, 99, 0.28);
  color: var(--ok);
}

.tick.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

.mid-card h1 { font-size: 27px; margin-bottom: 12px; letter-spacing: -0.8px; }
.mid-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.mid-card .back { display: inline-block; margin-top: 24px; color: var(--brand); font-size: 14.5px; font-weight: 600; }

/* ─── Màn hẹp ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .egift-in { grid-template-columns: 1fr; gap: 34px; }
  .egift-shot { justify-self: start; width: min(100%, 380px); }
  .hub-grid { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }

  /* Xếp dọc thì phải hãm bề ngang lại: một cột rộng hết khổ làm ảnh chụp
     phình to gấp đôi lúc ba cột, cuộn mãi không hết ba bước. */
  .steps { grid-template-columns: 1fr; gap: 34px; max-width: 440px; margin-inline: auto; }

  .support-in { flex-direction: column; align-items: flex-start; gap: 24px; }

  .nav-links { display: none; }
  .hero { padding: 52px 0 64px; }
  section.band { padding: 58px 0; }
  .shell { width: min(1120px, 100% - 32px); }
}

@media (max-width: 460px) {
  .form-card { padding: 24px 20px 22px; }
  .mid-card { padding: 36px 24px 30px; }
}

/* ─── Thanh nổi ở đáy ────────────────────────────────────────────────
   Hiện khi form đã cuộn khỏi màn hình (xem đoạn script ở landing.ejs).
   Trang dài mà form chỉ nằm trên cùng thì đọc tới cuối là mất lối quay lại.
   ─────────────────────────────────────────────────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 13px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px rgba(16, 24, 40, 0.08);
  animation: rise 0.28s ease-out;
}

.sticky-cta[hidden] { display: none; }

@keyframes rise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sticky-text { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.sticky-cta .btn-inline { padding: 12px 26px; font-size: 15px; }

@media (max-width: 620px) {
  .sticky-text { display: none; }
  .sticky-cta .btn-inline { width: 100%; text-align: center; }
}

/* Nhảy tới form bằng link neo thì nháy viền một cái cho biết đã tới đúng chỗ */
#request-form:target {
  animation: point 1.5s ease-out 1;
}

@keyframes point {
  0%, 100% { box-shadow: 0 36px 70px rgba(31, 41, 76, 0.19), 0 8px 18px rgba(31, 41, 76, 0.07); }
  25%, 60% { box-shadow: 0 0 0 7px rgba(109, 74, 255, 0.26), 0 36px 70px rgba(31, 41, 76, 0.19); }
}

/* Người bật chế độ giảm chuyển động thì bỏ hết hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}