/* =========================================================
   Rocket AI — Bản chính thức, nền tối xuyên suốt
   Dark-first system: nền đen, nội dung trắng, hành động tím.
   Nạp sau cùng để đè lên brand-v2.css (vốn chỉ tối một phần section).
   Gốc từ demo-1.css (đã duyệt hình ảnh), bổ sung .gift-card cho mục
   "Quà tặng" — section này chỉ tồn tại ở bản chính thức, demo-1 đã bỏ.
   ========================================================= */

:root {
  color-scheme: dark;
  --c-bg: #0a0a0d;
  --c-bg-soft: #111016;
  --c-bg-tint: #15121b;
  --c-surface: #18151f;
  --c-ink: #ffffff;
  --c-ink-2: #e5e1e9;
  --c-muted: #c9c5ce;
  --c-muted-2: #9b95a3;
  --c-line: #302b36;
  --c-line-strong: #494151;
  --c-brand: #885cf6;
  --c-brand-2: #9f7afa;
  --c-brand-deep: #7c4df0;
  --c-brand-soft: rgba(136, 92, 246, .16);
  --c-brand-tint: rgba(136, 92, 246, .08);
  --c-accent: #cbbcff;
  --c-accent-2: #885cf6;
  --c-accent-soft: rgba(136, 92, 246, .13);
  --c-ok: #72ddb6;
  --c-ok-soft: rgba(68, 196, 151, .13);
  --c-danger: #ff9d8a;
  --c-danger-soft: rgba(255, 112, 91, .12);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --sh-sm: 0 5px 18px rgba(0, 0, 0, .22);
  --sh-md: 0 14px 36px rgba(0, 0, 0, .28);
  --sh-lg: 0 26px 70px rgba(0, 0, 0, .36);
  --sh-brand: 0 14px 36px rgba(124, 77, 240, .34);
}

html { background: #0a0a0d; }
body {
  color: var(--c-muted);
  background:
    radial-gradient(900px 620px at 84% 2%, rgba(136, 92, 246, .10), transparent 64%),
    #0a0a0d;
}

h1, h2, h3, h4, strong, b { color: var(--c-ink); }
a { color: #cbbcff; }
::selection { color: #fff; background: #6035c8; }
:focus-visible { outline-color: #bda7ff; }

/* One continuous dark canvas, separated with tonal surfaces and rhythm. */
.section,
.section--soft,
.section--tint {
  position: relative;
  color: var(--c-muted);
  background: #0a0a0d;
  border-top: 1px solid rgba(255, 255, 255, .045);
}
.section--soft { background: #111016; }
.section--tint {
  background:
    radial-gradient(620px 360px at 85% 12%, rgba(136, 92, 246, .10), transparent 70%),
    #0d0c11;
}
.section:nth-of-type(3n) { background-color: #0d0c11; }
.section-head p,
.btn-note,
.u-muted { color: var(--c-muted); }
.eyebrow {
  color: #cfbfff;
  border-color: rgba(173, 145, 255, .25);
  background: rgba(136, 92, 246, .11);
}
.eyebrow::before { background: #9f7afa; }

/* Announcement + hero */
.announce {
  background: #050506;
  border-bottom-color: #29252e;
}
.announce__item { color: #dad6df; }
.announce__dot {
  background: #9f7afa;
  box-shadow: 0 0 0 4px rgba(136, 92, 246, .15), 0 0 18px rgba(136, 92, 246, .65);
}
.hero {
  background:
    radial-gradient(760px 540px at 78% 25%, rgba(136, 92, 246, .27), transparent 66%),
    radial-gradient(520px 420px at 8% 88%, rgba(96, 53, 200, .12), transparent 70%),
    #0a0a0d;
}
.hero::after { background: linear-gradient(to bottom, transparent, #0a0a0d); }
.hero h1 { max-width: 16ch; }
.hero h1 em {
  background: linear-gradient(100deg, #ffffff 0%, #cbbcff 48%, #9f7afa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead { color: #cbc6d2; }
.hero__promise {
  color: #dfdae5;
  border-left-color: #9f7afa;
  background: rgba(255, 255, 255, .025);
}
.hero__fact {
  color: #f0edf4;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}
.hero__fact svg { color: #bca6ff; }
.hero__price-label,
.hero .btn-note { color: #b5afbd; }
.hero__panel {
  overflow: hidden;
  border-color: rgba(190, 167, 255, .22);
  background: rgba(17, 13, 24, .88);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42);
}
.hero__panel-photo {
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-4);
  border-bottom: 1px solid rgba(190, 167, 255, .18);
}
.hero__panel-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 15%;
}
.hero__experts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  text-align: center;
}
.hero__expert b {
  display: block;
  margin-bottom: 3px;
  color: var(--c-ink);
  font-size: var(--t-sm);
}
.hero__expert span {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: #aaa3b2;
}

@media (max-width: 620px) {
  .hero__experts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
    padding: 0;
    text-align: left;
  }
  .hero__expert {
    width: 100%;
    padding: 10px 14px !important;
  }
  .hero__expert b {
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 1.35;
  }
  .hero__expert span {
    overflow: visible;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.4;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  .hero__expert [data-mobile] > span { display: none; }
  .hero__expert [data-mobile]::before { content: attr(data-mobile); }
}

/* Primary actions */
.btn-primary,
.hero .btn-primary,
.offer .btn-primary,
.finalcta .btn-primary {
  color: #fff;
  border-color: #7c4df0;
  background: #7c4df0;
  box-shadow: 0 14px 34px rgba(124, 77, 240, .32);
}
.btn-primary:hover,
.hero .btn-primary:hover,
.offer .btn-primary:hover,
.finalcta .btn-primary:hover {
  color: #fff;
  border-color: #8e64f5;
  background: #8e64f5;
  box-shadow: 0 18px 44px rgba(124, 77, 240, .42);
}
.btn-primary:active { background: #6f3cdf; }
.btn-secondary {
  color: #eeeaf2;
  border-color: #4a4351;
  background: #17141b;
}
.btn-secondary:hover { color: #fff; border-color: #9f7afa; background: #201a29; }
.btn-ghost { color: #b8b1bf; }
.btn-ghost:hover { color: #fff; }

/* Proof strip directly after hero */
.proof-strip {
  position: relative;
  z-index: 2;
  background: #0d0c11;
  border-block: 1px solid #2c2732;
}
.proof-strip__inner {
  min-height: 84px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  padding-block: 18px;
}
.proof-strip__inner span {
  color: #bdb7c4;
  text-align: center;
  font-size: var(--t-sm);
}
.proof-strip__inner span + span { border-left: 1px solid #332d3a; }
.proof-strip__inner b { display: block; margin-bottom: 3px; color: #cbbcff; font-size: var(--t-lg); }

/* Content surfaces */
.card,
.questions li,
.session,
.gain,
.agent,
.fit__col,
.team-card,
.fee__point,
.commitment-item,
.proof-card,
.course,
.faq__item {
  color: var(--c-muted);
  border-color: #302b36;
  background: #17151b;
  box-shadow: var(--sh-xs);
}
.card--brand,
.problem__closing,
.outcome-note,
.whynow__quote {
  color: #dcd6e3;
  border-color: rgba(159, 122, 250, .28);
  background: linear-gradient(110deg, rgba(136, 92, 246, .13), rgba(255, 255, 255, .025));
}
/* Mục "Quà tặng" — chỉ có ở bản chính thức, demo-1 không có nên cần tự thêm */
.gift-card {
  color: #dcd6e3;
  border-color: rgba(159, 122, 250, .30);
  background: linear-gradient(135deg, rgba(136, 92, 246, .13), #151219);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .30);
}
.gift-card .gain__icon { background: rgba(136, 92, 246, .16); color: #cbbcff; }
.gift-card p { color: #c5becb; }

.whynow__step {
  color: #d7d1dd;
  border-color: #37313e;
  background: #17151b;
}
.whynow__step--active {
  color: #fff;
  border-color: #7c4df0;
  background: #7c4df0;
}
.whynow__arrow { color: #756e7c; }
.list-dot li::before { background: #9f7afa; }
.list-check li::before { color: #cfbfff; background: rgba(136, 92, 246, .15); }
.list-cross li::before { color: #ff9d8a; background: rgba(255, 112, 91, .12); }

.session__head,
.session:nth-child(2) .session__head,
.session:nth-child(3) .session__head {
  border-color: #332d3a;
  background: linear-gradient(135deg, rgba(136, 92, 246, .14), rgba(255, 255, 255, .025));
}
.session__block { border-color: #312b38; background: #111014; }
.session__demo { color: #cbbcff; border-color: #352f3d; background: #131017; }
.session__no { background: #7c4df0; }
.gain__icon { color: #cbbcff; background: rgba(136, 92, 246, .14); }
.fit__col--yes { border-color: rgba(136, 92, 246, .38); }
.fit__col--no { background: #121014; }
.commitment-item::before { background: #9f7afa; }
.fee__point span { color: #bcb6c3; }

/* Existing dark showcase sections */
#demo-trong-zoom,
#hoat-dong,
#ket-qua,
.offer,
.finalcta {
  color: var(--c-muted);
  background:
    radial-gradient(680px 420px at 12% 8%, rgba(136, 92, 246, .15), transparent 70%),
    #09090b;
}
#demo-trong-zoom .agent { background: rgba(255, 255, 255, .045); }
.activity-card,
.video-proof { border-color: #342f3a; background: #151419; }
.video-proof__meta span { color: #aaa4b2; }
.proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }

/* Experts: one strong team image, no repetitive profile cards. */
.team-showcase {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid #37313f;
  border-radius: 24px;
  background: #151419;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .34);
}
.team-showcase img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center 18%;
}
.team-showcase figcaption {
  position: relative;
  padding: 24px clamp(20px, 4vw, 36px) 28px;
  background: linear-gradient(180deg, #17141c, #111014);
}
.team-showcase__names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.team-showcase__names span {
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.team-showcase figcaption p { max-width: 66ch; margin: 0 auto; text-align: center; color: #bab4c1; }

/* Offer + guarantee */
.offer__card {
  border-color: rgba(159, 122, 250, .30);
  background: linear-gradient(145deg, rgba(136, 92, 246, .11), rgba(255, 255, 255, .025));
}
.offer__step { color: #d3ced8; border-color: #342e3b; background: #131116; }
.offer__step i { color: #fff; background: #7c4df0; }
.offer__seats { color: #c3bdca; border-color: #37313e; }
.finalcta__flow span { color: #e8e3ed; border-color: #3a3342; background: #17141b; }
.guarantee {
  color: #dcd6e3;
  border-color: rgba(159, 122, 250, .34);
  background: linear-gradient(135deg, rgba(136, 92, 246, .15), #151219);
}
.guarantee p { color: #c5becb; }
.guarantee__badge { color: #cfbfff; }

/* FAQ + footer */
.faq__q { color: #f4f0f7; }
.faq__q:hover { background: rgba(136, 92, 246, .07); }
.faq__a-inner > div { color: #bcb6c3; }
.faq__icon { color: #cbbcff; background: rgba(136, 92, 246, .13); }
.footer { color: #aaa4b2; background: #050506; border-top-color: #28242d; }
.footer .brand-logo { filter: none; }

/* Bỏ viền/khung nhỏ theo yêu cầu 09/09/2026 — chỉ giữ chữ, không viền lặt vặt */
.hero__fact {
  border: none;
  box-shadow: none;
  background: rgba(255, 255, 255, .045);
}
.fee__point {
  border: none;
  box-shadow: none;
  background: transparent;
  padding-inline: 0;
}
.footer__grid { grid-template-columns: 1.5fr 1fr; }
.footer__bottom { border-color: #2a2630; }

/* Mobile sticky conversion bar */
.sticky-cta {
  color: #fff;
  border-top-color: #332d3a;
  background: rgba(10, 10, 13, .94);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .34);
}
.sticky-cta__price b { color: #fff; }
.sticky-cta__price span { color: #aaa4b2; }

/* Checkout stays dark; the QR itself is the only functional white surface. */
.modal-overlay { background: rgba(0, 0, 0, .74); }
.modal {
  color: var(--c-muted);
  border: 1px solid #37313f;
  background: #111014;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .58);
}
.modal__close { color: #c9c3cf; border-color: #3b3542; background: #1b1820; }
.modal__close:hover { color: #fff; background: #27212f; }
.modal__grabber { background: #4b4353; }

/* Popup thông báo phí tham gia — 09/09/2026 */
.fee-notice .modal {
  max-width: 420px;
  background: linear-gradient(160deg, #1c1526, #0e0c12);
  border-color: rgba(159, 122, 250, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(136, 92, 246, .08);
}
.fee-notice .modal__body { text-align: center; }
.fee-notice .badge--accent { margin-bottom: var(--s-4); }
.fee-notice h3 { font-size: var(--t-lg); line-height: 1.3; margin-bottom: var(--s-3); }
.fee-notice p { font-size: var(--t-sm); color: #c5becb; }
.fee-notice p.fee-notice__zalo {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(136, 92, 246, .12);
  color: #cbbcff;
  font-weight: 600;
}
.modal__head p,
.form-note,
.field label { color: #bdb7c4; }
.field input,
.field select,
.field textarea {
  color: #fff;
  border-color: #403947;
  background: #19161d;
}
.field input::placeholder,
.field textarea::placeholder { color: #817988; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #9f7afa;
  box-shadow: 0 0 0 3px rgba(136, 92, 246, .15);
}
.field-consent label { color: #aaa4b2; }
.pay-order,
.pay-detail,
.paid-zalo,
.paid-order-tag { color: #d8d2de; background: #17141b; }
.pay-row { border-color: #332d39; background: #17141b; }
.pay-row__label { color: #aaa4b2; }
.pay-row__value { color: #fff; }
.pay-row__copy { color: #cbbcff; border-color: #443b50; background: #201a28; }
.pay-row__copy:hover { background: rgba(136, 92, 246, .16); }
.pay-qr { background: #fff; border-color: #d9d4df; }
.pay-qr__amount { color: #fff; }
.pay-qr__hint { color: #aaa4b2; }
.pay-waiting { color: #cbbcff; background: rgba(136, 92, 246, .12); }
.placeholder { color: #57515c; background: #fff; }
.placeholder strong { color: #171419; }
.confirm-close { background: rgba(5, 5, 6, .94); }
.confirm-close__box { color: #d6d0dc; }
.fallback-note { color: #bcebd9; border-color: rgba(114, 221, 182, .28); background: rgba(68, 196, 151, .10); }
.error-icon { color: #ff9d8a; background: rgba(255, 112, 91, .12); }
.paid-icon { color: #72ddb6; background: rgba(68, 196, 151, .13); }

@media (max-width: 720px) {
  .proof-strip__inner { grid-template-columns: 1fr; gap: 0; padding-block: 10px; }
  .proof-strip__inner span { padding: 12px 0; }
  .proof-strip__inner span + span { border-left: 0; border-top: 1px solid #302b36; }
  .proof-grid { grid-template-columns: 1fr; }
  .team-showcase { border-radius: 20px; }
  .team-showcase img { aspect-ratio: 4 / 3; object-position: center center; }
  .team-showcase__names { gap: 6px; }
  .team-showcase__names span { font-size: var(--t-sm); }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .team-showcase__names { grid-template-columns: 1fr; }
  .team-showcase__names span { padding: 4px 0; }
}