/* ============================================================
   Landing PRE-ORDER Roland FP-40 (01.10 – 20.10.2026)
   TOÀN BỘ file của trang nằm trong folder /pre-order-fp-40/.
   Từ 21.10.2026 trang TỰ chuyển sang bán thường (giá ưu đãi) —
   xem data-phase trong index.html và fp40.js.
   Chỉ dùng chung style.css (header/footer/nav) của site.
   ============================================================ */

:root {
  --fp-red: #7d2027;
  --fp-red-deep: #4a1217;
  --fp-ink: #161112;
  --fp-gold: #f0b43c;
  --fp-gold-soft: #f6d58c;
  --fp-cream: #faf6f2;
  --fp-line: #ece5df;
  --fp-muted: #5d5557;
  --fp-display: "Oswald", "Arial Narrow", sans-serif;
  --fp-serif: "Noto Serif JP", serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.fp40-page { background: #fff; }
.fp40-page main { overflow-x: clip; }

.fp-wrap { max-width: 112rem; margin: 0 auto; padding-inline: var(--vtm-gutter); }
@media screen and (max-width: 767px) { .fp-wrap { padding-inline: 1.6rem; } }

/* ---------- Tiêu đề section dùng chung ---------- */
.fp-section { padding: 8rem 0; scroll-margin-top: 12rem; }
.fp-section--cream { background: var(--fp-cream); }
.fp-section--dark { background: var(--fp-ink); color: #fff; }
@media screen and (max-width: 767px) { .fp-section { padding: 4.4rem 0; scroll-margin-top: 9rem; } }

.fp-eyebrow {
  font-family: var(--fp-display); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fp-red); line-height: 1.4;
}
.fp-section--dark .fp-eyebrow { color: var(--fp-gold); }
.fp-title {
  margin-top: 1rem; font-family: var(--fp-serif); font-size: 3rem; font-weight: 500;
  line-height: 1.45; letter-spacing: 0.04em; color: var(--fp-ink);
}
.fp-section--dark .fp-title { color: #fff; }
.fp-lead { margin-top: 1.6rem; max-width: 70rem; font-size: 1.4rem; line-height: 2; color: var(--fp-muted); letter-spacing: 0.04em; }
.fp-section--dark .fp-lead { color: rgba(255, 255, 255, 0.78); }
.fp-head--center { text-align: center; }
.fp-head--center .fp-lead { margin-inline: auto; }
@media screen and (max-width: 767px) {
  .fp-eyebrow { font-size: 1.15rem; }
  .fp-title { font-size: 2.2rem; }
  .fp-lead { font-size: 1.3rem; line-height: 1.8; }
}

/* ---------- Nút ---------- */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.35rem 3rem; border-radius: 0.4rem; border: 1px solid transparent;
  font-family: var(--fp-serif); font-size: 1.3rem; letter-spacing: 0.06em; line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fp-btn--gold { background: var(--fp-gold); color: var(--fp-ink); font-weight: 600; }
@media (hover: hover) and (min-width: 768px) { .fp-btn--gold:hover { background: var(--fp-gold-soft); } }
.fp-btn--red { background: var(--fp-red); color: #fff; }
@media (hover: hover) and (min-width: 768px) { .fp-btn--red:hover { background: var(--fp-red-deep); } }
.fp-btn--ghost-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
@media (hover: hover) and (min-width: 768px) { .fp-btn--ghost-light:hover { border-color: var(--fp-gold); color: var(--fp-gold); } }
.fp-btn--ghost { border-color: #cfc6c0; color: var(--fp-ink); background: #fff; }
@media (hover: hover) and (min-width: 768px) { .fp-btn--ghost:hover { border-color: var(--fp-red); color: var(--fp-red); } }
.fp-btn svg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
/* style.css khoá click link tel: trên desktop toàn site — mở lại cho nút gọi của trang này */
.fp40-page a.fp-btn[href^="tel:"], .fp40-page a.fp-tel[href^="tel:"] { pointer-events: auto; }

/* ============================================================
   HERO
   ============================================================ */
.fp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72rem; display: flex; align-items: flex-end;
  padding: 16rem 0 7rem; color: #fff; background: var(--fp-ink);
}
.fp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; z-index: -2; }
.fp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(74, 18, 23, 0.95) 0%, rgba(74, 18, 23, 0.78) 38%, rgba(22, 17, 18, 0.15) 75%),
    linear-gradient(0deg, rgba(22, 17, 18, 0.7) 0%, rgba(22, 17, 18, 0) 45%);
}
.fp-hero__mark {
  position: absolute; right: -1rem; top: 7rem; z-index: -1;
  font-family: var(--fp-display); font-weight: 200; font-size: 26rem; line-height: 1;
  letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.14); pointer-events: none; user-select: none;
}
.fp-hero__inner { width: 100%; }
.fp-hero__content { max-width: 60rem; }
.fp-hero__badge {
  display: inline-flex; align-items: center; gap: 1rem; padding: 0.7rem 1.6rem;
  border: 1px solid rgba(240, 180, 60, 0.6); border-radius: 999px;
  font-family: var(--fp-display); font-size: 1.2rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fp-gold);
  line-height: 1.4;
}
.fp-hero__brand { margin-top: 2.4rem; font-family: var(--fp-display); font-size: 1.6rem; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.75); line-height: 1; }
.fp-hero__title { font-family: var(--fp-display); font-size: 9.6rem; font-weight: 300; line-height: 1; letter-spacing: 0.02em; margin-top: 0.6rem; }
.fp-hero__tagline { margin-top: 1.6rem; font-family: var(--fp-serif); font-size: 2rem; line-height: 1.6; letter-spacing: 0.05em; color: #fff; }
.fp-hero__sub { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.9; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.04em; }
.fp-hero__price { margin-top: 2.6rem; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; line-height: 1.2; }
.fp-hero__price-label { font-size: 1.25rem; color: rgba(255, 255, 255, 0.75); }
.fp-hero__price-value { font-family: var(--fp-display); font-size: 4.6rem; font-weight: 500; color: var(--fp-gold); letter-spacing: 0.02em; }
.fp-hero__price-old { font-family: var(--fp-display); font-size: 1.8rem; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
.fp-hero__price-note { margin-top: 0.6rem; font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.65); }
.fp-hero__actions { margin-top: 3rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fp-hero__status {
  margin-top: 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  font-size: 1.2rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82);
}
.fp-hero__status strong { font-family: var(--fp-display); font-weight: 500; font-size: 1.5rem; color: #fff; letter-spacing: 0.04em; }
.fp-hero__status-sep { display: none; }

@media screen and (max-width: 767px) {
  .fp-hero { min-height: 0; padding: 7rem 0 4.4rem; align-items: stretch; }
  .fp-hero__bg { object-position: 72% 50%; }
  .fp-hero::before {
    background: linear-gradient(180deg, rgba(74, 18, 23, 0.55) 0%, rgba(74, 18, 23, 0.88) 45%, rgba(40, 10, 13, 0.97) 100%);
  }
  .fp-hero__mark { font-size: 13rem; top: 5.5rem; right: -0.6rem; }
  .fp-hero__badge { font-size: 1.05rem; letter-spacing: 0.12em; padding: 0.6rem 1.3rem; }
  .fp-hero__brand { font-size: 1.3rem; margin-top: 12rem; }
  .fp-hero__title { font-size: 6.4rem; }
  .fp-hero__tagline { font-size: 1.7rem; }
  .fp-hero__sub { font-size: 1.25rem; line-height: 1.75; }
  .fp-hero__price-value { font-size: 3.8rem; }
  .fp-hero__price-old { font-size: 1.5rem; }
  .fp-hero__actions { flex-direction: column; }
  .fp-hero__actions .fp-btn { width: 100%; }
  .fp-hero__status { margin-top: 2.2rem; font-size: 1.1rem; }
}

/* ============================================================
   SUB-NAV DÍNH
   ============================================================ */
.fp-subnav {
  position: sticky; top: 72px; z-index: 500;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fp-line);
}
.fp-subnav__inner {
  max-width: 112rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem var(--vtm-gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fp-subnav__inner::-webkit-scrollbar { display: none; }
.fp-subnav__link {
  flex-shrink: 0; white-space: nowrap; padding: 0.7rem 1.7rem; border-radius: 999px;
  font-size: 1.2rem; letter-spacing: 0.03em; color: #555; line-height: 1.5; transition: background 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (min-width: 768px) { .fp-subnav__link:hover { color: var(--fp-red); } }
.fp-subnav__link.is-active { background: var(--fp-ink); color: #fff; }
.fp-subnav__link--cta { background: var(--fp-red); color: #fff; margin-left: 0.8rem; }
.fp-subnav__link--cta.is-active { background: var(--fp-red-deep); }
@media (hover: hover) and (min-width: 768px) { .fp-subnav__link--cta:hover { color: #fff; background: var(--fp-red-deep); } }
@media screen and (max-width: 767px) {
  .fp-subnav { top: 50px; }
  .fp-subnav__inner { justify-content: flex-start; padding: 0.8rem 1.2rem; }
  .fp-subnav__link { padding: 0.6rem 1.3rem; font-size: 1.1rem; }
}

/* ============================================================
   3 BƯỚC ĐẶT TRƯỚC
   ============================================================ */
.fp-steps { padding: 4.4rem 0; background: var(--fp-cream); border-bottom: 1px solid var(--fp-line); }
.fp-steps__title { font-family: var(--fp-serif); font-size: 1.6rem; letter-spacing: 0.06em; text-align: center; color: var(--fp-ink); line-height: 1.6; }
.fp-steps__list { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; list-style: none; padding: 0; }
.fp-steps__item { display: flex; gap: 1.4rem; align-items: flex-start; }
.fp-steps__num {
  flex-shrink: 0; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--fp-red); color: #fff; font-family: var(--fp-display); font-size: 1.8rem; line-height: 1;
}
.fp-steps__ttl { font-family: var(--fp-serif); font-size: 1.4rem; color: var(--fp-ink); line-height: 1.5; letter-spacing: 0.04em; }
.fp-steps__txt { margin-top: 0.4rem; font-size: 1.15rem; line-height: 1.75; color: var(--fp-muted); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .fp-steps { padding: 3rem 0; }
  .fp-steps__title { font-size: 1.45rem; }
  .fp-steps__list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 2rem; }
  .fp-steps__num { width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
  .fp-steps__ttl { font-size: 1.3rem; }
  .fp-steps__txt { font-size: 1.1rem; }
}

/* ============================================================
   ƯU ĐÃI & GÓI GIÁ
   ============================================================ */
.fp-gifts { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.fp-gift {
  display: flex; gap: 2rem; align-items: center; padding: 2.4rem 2.6rem; border-radius: 0.8rem;
  background: linear-gradient(135deg, var(--fp-red) 0%, var(--fp-red-deep) 100%); color: #fff;
}
.fp-gift__icon {
  flex-shrink: 0; width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(240, 180, 60, 0.16); color: var(--fp-gold);
}
.fp-gift__icon svg { width: 3rem; height: 3rem; }
.fp-gift__icon--img { width: 8rem; height: 8rem; background: #fff; overflow: hidden; }
.fp-gift__icon--img img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.fp-pack__gift-img { width: 3.6rem; height: 3.6rem; flex-shrink: 0; object-fit: contain; background: #fff; border-radius: 0.4rem; }
@media screen and (max-width: 767px) { .fp-gift__icon--img { width: 6.4rem; height: 6.4rem; } }
.fp-gift__kicker { font-family: var(--fp-display); font-size: 1.15rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fp-gold-soft); line-height: 1.4; }
.fp-gift__ttl { margin-top: 0.4rem; font-family: var(--fp-serif); font-size: 1.7rem; line-height: 1.5; letter-spacing: 0.03em; }
.fp-gift__ttl b { font-family: var(--fp-display); font-weight: 500; color: var(--fp-gold); font-size: 2.2rem; letter-spacing: 0.02em; }
.fp-gift__txt { margin-top: 0.4rem; font-size: 1.15rem; line-height: 1.7; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .fp-gifts { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.6rem; }
  .fp-gift { padding: 1.8rem 1.6rem; gap: 1.4rem; }
  .fp-gift__icon { width: 4.8rem; height: 4.8rem; }
  .fp-gift__icon svg { width: 2.4rem; height: 2.4rem; }
  .fp-gift__ttl { font-size: 1.45rem; }
  .fp-gift__ttl b { font-size: 1.9rem; }
}

.fp-color { margin-top: 4.4rem; display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.fp-color__label { font-size: 1.2rem; color: var(--fp-muted); letter-spacing: 0.04em; }
.fp-color__opts { display: inline-flex; padding: 0.4rem; border: 1px solid var(--fp-line); border-radius: 999px; background: #fff; }
.fp-color__opt {
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.8rem; border: 0; border-radius: 999px; background: transparent;
  font-family: var(--fp-serif); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--fp-muted); cursor: pointer; line-height: 1.4;
}
.fp-color__opt[aria-pressed="true"] { background: var(--fp-ink); color: #fff; }
.fp-color__dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid #bbb; }
.fp-color__dot--bk { background: #111; }
.fp-color__dot--wh { background: #fff; }

.fp-packs { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.fp-pack {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--fp-line); border-radius: 1rem; overflow: hidden;
}
.fp-pack--featured { border-color: var(--fp-red); box-shadow: 0 1.6rem 3.6rem rgba(125, 32, 39, 0.1); }
.fp-pack__tag {
  position: absolute; top: 1.6rem; left: 1.6rem; z-index: 1; padding: 0.4rem 1.2rem; border-radius: 999px;
  background: var(--fp-red); color: #fff; font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1.5;
}
.fp-pack__media { background: #f6f4f2; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.fp-pack__media img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; }
.fp-pack__body { padding: 2.6rem 2.8rem 3rem; display: flex; flex-direction: column; flex: 1; }
.fp-pack__name { font-family: var(--fp-serif); font-size: 2rem; line-height: 1.45; color: var(--fp-ink); letter-spacing: 0.04em; }
.fp-pack__incl { margin-top: 0.8rem; font-size: 1.15rem; line-height: 1.75; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-pack__rows { margin-top: 2rem; border-top: 1px dashed #d9d0ca; }
.fp-pack__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed #d9d0ca; font-size: 1.2rem; line-height: 1.5; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-pack__row span:last-child { font-family: var(--fp-display); font-size: 1.55rem; color: var(--fp-ink); letter-spacing: 0.03em; white-space: nowrap; }
.fp-pack__row--old span:last-child { text-decoration: line-through; color: #999; }
.fp-pack__row--voucher span:last-child { color: var(--fp-red); }
.fp-pack__final { margin-top: 1.8rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fp-pack__final-label { font-size: 1.2rem; color: var(--fp-ink); line-height: 1.5; letter-spacing: 0.04em; }
.fp-pack__final-label small { display: block; font-size: 1.05rem; color: var(--fp-muted); }
.fp-pack__final-value { font-family: var(--fp-display); font-size: 4rem; font-weight: 500; line-height: 1; color: var(--fp-red); letter-spacing: 0.01em; }
.fp-pack__gift { margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; background: var(--fp-cream); border-radius: 0.6rem; font-size: 1.15rem; line-height: 1.6; color: var(--fp-ink); letter-spacing: 0.03em; }
.fp-pack__gift svg { width: 2rem; height: 2rem; color: var(--fp-red); flex-shrink: 0; }
.fp-pack__cta { margin-top: auto; padding-top: 2.4rem; }
.fp-pack__cta .fp-btn { width: 100%; }
.fp-packs__note { margin-top: 2.2rem; font-size: 1.1rem; line-height: 1.85; color: var(--fp-muted); text-align: center; letter-spacing: 0.03em; }
.fp-packs__note strong { color: var(--fp-ink); font-weight: 500; }
@media screen and (max-width: 767px) {
  .fp-color { margin-top: 2.8rem; }
  .fp-packs { grid-template-columns: 1fr; gap: 1.8rem; }
  .fp-pack__body { padding: 2rem 1.8rem 2.2rem; }
  .fp-pack__name { font-size: 1.7rem; }
  .fp-pack__final-value { font-size: 3.4rem; }
  .fp-packs__note { text-align: left; }
}

/* ============================================================
   ĐIỂM NỔI BẬT — 2 "đầu tiên"
   ============================================================ */
.fp-firsts { margin-top: 4.4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.fp-first { position: relative; border-radius: 1rem; overflow: hidden; min-height: 36rem; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.fp-first img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fp-first::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22, 17, 18, 0.92) 0%, rgba(22, 17, 18, 0.35) 55%, rgba(22, 17, 18, 0) 100%); }
.fp-first__body { padding: 2.8rem; }
.fp-first__kicker { font-family: var(--fp-display); font-size: 1.2rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fp-gold); line-height: 1.4; }
.fp-first__ttl { margin-top: 0.6rem; font-family: var(--fp-serif); font-size: 2.2rem; line-height: 1.45; letter-spacing: 0.03em; }
.fp-first__txt { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.8; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .fp-firsts { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.8rem; }
  /* Mobile: ảnh lên trên, chữ nằm riêng trên nền tối — không đè chữ lên vùng sáng của ảnh */
  .fp-first { min-height: 0; display: block; background: var(--fp-ink); }
  .fp-first img { position: static; display: block; aspect-ratio: 16 / 10; height: auto; }
  .fp-first::before { display: none; }
  .fp-first__body { padding: 1.8rem 1.8rem 2.2rem; }
  .fp-first__ttl { font-size: 1.75rem; }
  .fp-first__txt { font-size: 1.15rem; line-height: 1.7; }
}

/* ---------- Hàng tính năng ảnh/chữ xen kẽ ---------- */
.fp-features { margin-top: 7rem; display: flex; flex-direction: column; gap: 7rem; }
.fp-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: center; }
.fp-feature:nth-child(even) .fp-feature__media { order: 2; }
.fp-feature__media { border-radius: 1rem; overflow: hidden; background: #f3f1ef; }
.fp-feature__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.fp-feature__kicker { font-family: var(--fp-display); font-size: 1.2rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fp-red); line-height: 1.4; }
.fp-feature__ttl { margin-top: 0.8rem; font-family: var(--fp-serif); font-size: 2.4rem; line-height: 1.45; color: var(--fp-ink); letter-spacing: 0.03em; }
.fp-feature__txt { margin-top: 1.4rem; font-size: 1.3rem; line-height: 1.95; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-feature__list { margin-top: 1.8rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.fp-feature__list li { position: relative; padding-left: 2.4rem; font-size: 1.2rem; line-height: 1.7; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-feature__list li::before { content: ""; position: absolute; left: 0; top: 0.75rem; width: 1.2rem; height: 1px; background: var(--fp-red); }
.fp-feature__list b { color: var(--fp-ink); font-weight: 500; }
.fp-stats { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.fp-stat { padding: 1.4rem 1.2rem; border: 1px solid var(--fp-line); border-radius: 0.6rem; text-align: center; }
.fp-stat__num { font-family: var(--fp-display); font-size: 3.2rem; font-weight: 500; line-height: 1.1; color: var(--fp-red); }
.fp-stat__lbl { margin-top: 0.4rem; font-size: 1.05rem; line-height: 1.5; color: var(--fp-muted); letter-spacing: 0.02em; }
@media screen and (max-width: 767px) {
  .fp-features { margin-top: 4rem; gap: 4rem; }
  .fp-feature { grid-template-columns: 1fr; gap: 1.8rem; }
  .fp-feature:nth-child(even) .fp-feature__media { order: 0; }
  .fp-feature__ttl { font-size: 1.85rem; }
  .fp-feature__txt { font-size: 1.2rem; line-height: 1.8; margin-top: 1rem; }
  .fp-feature__list li { font-size: 1.15rem; }
  .fp-stat__num { font-size: 2.6rem; }
  .fp-stat__lbl { font-size: 1rem; }
}

/* ============================================================
   APP PIANO SPHERE (nền tối)
   ============================================================ */
.fp-app { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.fp-app__video { border-radius: 1rem; overflow: hidden; background: #000; }
.fp-app__video video { display: block; width: 100%; height: auto; }
.fp-app__points { margin-top: 2.6rem; display: flex; flex-direction: column; gap: 1.8rem; list-style: none; padding: 0; }
.fp-app__point { display: flex; gap: 1.4rem; }
.fp-app__point-icon { flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(240, 180, 60, 0.14); color: var(--fp-gold); }
.fp-app__point-icon svg { width: 2rem; height: 2rem; }
.fp-app__point-ttl { font-family: var(--fp-serif); font-size: 1.4rem; line-height: 1.5; color: #fff; letter-spacing: 0.03em; }
.fp-app__point-txt { margin-top: 0.3rem; font-size: 1.15rem; line-height: 1.75; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.03em; }
.fp-app__gallery { margin-top: 5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.fp-app__shot { border-radius: 0.8rem; overflow: hidden; }
.fp-app__shot img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; display: block; }
.fp-app__shot figcaption { padding-top: 1rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.03em; }
.fp-app__note { margin-top: 3rem; padding: 1.6rem 2rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.6rem; font-size: 1.15rem; line-height: 1.8; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.03em; }
.fp-app__note b { color: #fff; font-weight: 500; }
@media screen and (max-width: 767px) {
  .fp-app { grid-template-columns: 1fr; gap: 2.6rem; }
  .fp-app__video { order: 2; }
  .fp-app__gallery {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; margin-top: 3rem;
    margin-inline: -1.6rem; padding-inline: 1.6rem; scrollbar-width: none;
  }
  .fp-app__gallery::-webkit-scrollbar { display: none; }
  .fp-app__shot { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ============================================================
   DÀNH CHO AI
   ============================================================ */
.fp-personas { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fp-persona { background: #fff; border: 1px solid var(--fp-line); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.fp-persona img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.fp-persona__body { padding: 2.2rem 2.2rem 2.6rem; }
.fp-persona__ttl { font-family: var(--fp-serif); font-size: 1.7rem; line-height: 1.45; color: var(--fp-ink); letter-spacing: 0.03em; }
.fp-persona__txt { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.8; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-persona__pick { margin-top: 1.4rem; font-size: 1.1rem; line-height: 1.6; color: var(--fp-red); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .fp-personas {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; margin-top: 2.6rem;
    margin-inline: -1.6rem; padding-inline: 1.6rem; scrollbar-width: none;
  }
  .fp-personas::-webkit-scrollbar { display: none; }
  .fp-persona { flex: 0 0 80%; scroll-snap-align: start; }
  .fp-persona__body { padding: 1.8rem; }
  .fp-persona__ttl { font-size: 1.5rem; }
  .fp-persona__txt { font-size: 1.15rem; line-height: 1.7; }
}
.fp-swipe-hint { display: none; }
@media screen and (max-width: 767px) {
  .fp-swipe-hint { display: block; margin-top: 1.2rem; font-size: 1.05rem; color: #9a9092; text-align: right; letter-spacing: 0.03em; }
  .fp-section--dark .fp-swipe-hint { color: rgba(255, 255, 255, 0.5); }
}

/* ============================================================
   THÔNG SỐ
   ============================================================ */
.fp-specs { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: start; }
.fp-specs__img { border: 1px solid var(--fp-line); border-radius: 1rem; overflow: hidden; background: #fff; }
.fp-specs__img img { display: block; width: 100%; height: auto; }
.fp-specs__table { width: 100%; border-collapse: collapse; }
.fp-specs__table th, .fp-specs__table td { padding: 1.3rem 0; border-bottom: 1px solid var(--fp-line); text-align: left; vertical-align: top; font-size: 1.25rem; line-height: 1.65; letter-spacing: 0.03em; }
.fp-specs__table th { width: 36%; font-weight: 400; color: var(--fp-muted); padding-right: 1.6rem; }
.fp-specs__table td { color: var(--fp-ink); }
.fp-specs__table tr:first-child th, .fp-specs__table tr:first-child td { border-top: 2px solid var(--fp-ink); }
@media screen and (max-width: 767px) {
  .fp-specs { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 2.6rem; }
  .fp-specs__img { order: 2; }
  .fp-specs__table th, .fp-specs__table td { font-size: 1.15rem; padding: 1.05rem 0; }
}

/* ============================================================
   FAQ
   ============================================================ */
.fp-faq { margin: 4rem auto 0; max-width: 86rem; display: flex; flex-direction: column; gap: 1rem; }
.fp-faq details { background: #fff; border: 1px solid var(--fp-line); border-radius: 0.8rem; overflow: hidden; }
.fp-faq summary {
  cursor: pointer; list-style: none; padding: 1.8rem 2.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;
  font-family: var(--fp-serif); font-size: 1.3rem; line-height: 1.6; color: var(--fp-ink); letter-spacing: 0.03em;
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.9rem; font-weight: 300; line-height: 1; color: var(--fp-red); }
.fp-faq details[open] summary::after { content: "\2212"; }
.fp-faq__a { padding: 0 2.2rem 2rem; font-size: 1.2rem; line-height: 1.85; color: var(--fp-muted); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .fp-faq { margin-top: 2.6rem; gap: 0.8rem; }
  .fp-faq summary { padding: 1.4rem 1.5rem; font-size: 1.2rem; }
  .fp-faq__a { padding: 0 1.5rem 1.5rem; font-size: 1.12rem; line-height: 1.7; }
}

/* ============================================================
   FORM ĐẶT TRƯỚC (điểm kết thúc hành trình)
   ============================================================ */
.fp-order { position: relative; isolation: isolate; overflow: hidden; background: var(--fp-red-deep); color: #fff; }
.fp-order::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 15% 20%, rgba(125, 32, 39, 0.9) 0%, rgba(74, 18, 23, 0) 60%);
}
.fp-order__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6rem; align-items: start; }
.fp-order .fp-title { color: #fff; }
.fp-order .fp-eyebrow { color: var(--fp-gold); }
.fp-order .fp-lead { color: rgba(255, 255, 255, 0.8); }
.fp-order__recap { margin-top: 3rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.fp-order__recap li { display: flex; gap: 1.2rem; font-size: 1.25rem; line-height: 1.7; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.03em; }
.fp-order__recap svg { flex-shrink: 0; width: 2rem; height: 2rem; margin-top: 0.2rem; color: var(--fp-gold); }
.fp-order__contact { margin-top: 3.4rem; padding-top: 2.6rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.fp-order__contact-lbl { font-size: 1.15rem; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; line-height: 1.6; }
.fp-order__hotline { display: inline-block; margin-top: 0.4rem; font-family: var(--fp-display); font-size: 3.4rem; font-weight: 500; letter-spacing: 0.04em; color: var(--fp-gold); line-height: 1.2; }
.fp-order__contact-sub { margin-top: 0.6rem; font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.03em; }
.fp-order__contact-sub a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

.fp-form { background: #fff; color: var(--fp-ink); border-radius: 1.2rem; padding: 3.4rem 3.4rem 3rem; box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, 0.25); }
.fp-form__ttl { font-family: var(--fp-serif); font-size: 1.9rem; line-height: 1.45; letter-spacing: 0.03em; }
.fp-form__sub { margin-top: 0.6rem; font-size: 1.12rem; line-height: 1.7; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-form__grid { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.6rem; }
.fp-field { display: flex; flex-direction: column; gap: 0.6rem; }
.fp-field--full { grid-column: 1 / -1; }
.fp-field__lbl { font-size: 1.12rem; color: var(--fp-ink); letter-spacing: 0.03em; line-height: 1.5; }
.fp-field__lbl i { font-style: normal; color: var(--fp-red); }
.fp-field input, .fp-field select, .fp-field textarea {
  width: 100%; padding: 1.15rem 1.3rem; border: 1px solid #d8cfca; border-radius: 0.5rem; background: #fff;
  font-family: inherit; font-size: 16px; line-height: 1.5; letter-spacing: 0.02em; color: var(--fp-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fp-field textarea { min-height: 8rem; resize: vertical; }
.fp-field input:focus, .fp-field select:focus, .fp-field textarea:focus { border-color: var(--fp-red); box-shadow: 0 0 0 3px rgba(125, 32, 39, 0.12); }
.fp-field.is-invalid input, .fp-field.is-invalid select { border-color: #c0392b; }
.fp-field__err { display: none; font-size: 1.05rem; color: #c0392b; line-height: 1.5; }
.fp-field.is-invalid .fp-field__err { display: block; }

.fp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fp-choice__opt { position: relative; }
.fp-choice__opt input { position: absolute; opacity: 0; pointer-events: none; }
.fp-choice__box {
  display: block; height: 100%; padding: 1.2rem 1.4rem; border: 1px solid #d8cfca; border-radius: 0.6rem; cursor: pointer;
  font-size: 1.15rem; line-height: 1.5; color: var(--fp-ink); letter-spacing: 0.02em; transition: border-color 0.2s ease, background 0.2s ease;
}
.fp-choice__box small { display: block; margin-top: 0.3rem; font-family: var(--fp-display); font-size: 1.4rem; color: var(--fp-red); letter-spacing: 0.03em; }
.fp-choice__opt input:checked + .fp-choice__box { border-color: var(--fp-red); background: rgba(125, 32, 39, 0.05); box-shadow: inset 0 0 0 1px var(--fp-red); }
.fp-choice__opt input:focus-visible + .fp-choice__box { box-shadow: 0 0 0 3px rgba(125, 32, 39, 0.25); }

.fp-form__summary { margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--fp-cream); border-radius: 0.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.fp-form__summary-lbl { font-size: 1.12rem; color: var(--fp-muted); line-height: 1.5; letter-spacing: 0.03em; }
.fp-form__summary-val { font-family: var(--fp-display); font-size: 2.6rem; font-weight: 500; color: var(--fp-red); line-height: 1.1; }
.fp-form__summary-save { flex-basis: 100%; text-align: right; font-size: 1.1rem; line-height: 1.6; color: #2f7a4a; letter-spacing: 0.02em; }
.fp-form__summary-save b { font-weight: 600; }
.fp-form__summary-save s { color: #9a9092; }
@media screen and (max-width: 767px) { .fp-form__summary-save { text-align: left; } }
.fp-form__actions { margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fp-form__actions .fp-btn { width: 100%; }
.fp-form__fine { margin-top: 1.4rem; font-size: 1.02rem; line-height: 1.7; color: #8a8083; letter-spacing: 0.02em; }
.fp-form__fine a { color: var(--fp-red); border-bottom: 1px solid currentColor; }
.fp-form__done { display: none; margin-top: 1.8rem; padding: 1.4rem 1.6rem; border-radius: 0.6rem; background: #eef7ef; color: #25613a; font-size: 1.15rem; line-height: 1.7; letter-spacing: 0.02em; }
.fp-form__done.is-shown { display: block; }
@media screen and (max-width: 767px) {
  .fp-order__grid { grid-template-columns: 1fr; gap: 3.4rem; }
  .fp-order__hotline { font-size: 3rem; }
  .fp-form { padding: 2.4rem 1.8rem 2.2rem; }
  .fp-form__ttl { font-size: 1.65rem; }
  .fp-form__grid { grid-template-columns: 1fr; }
  .fp-form__actions { grid-template-columns: 1fr; }
}

/* ---------- 2 giai đoạn: data-phase="pre" (đặt trước) / "post" (bán thường từ 21.10) ----------
   JS bật/tắt thuộc tính hidden; rule này thắng mọi display:flex/block của class */
[data-phase][hidden] { display: none !important; }


/* ---------- Toast ---------- */
.fp-toast {
  position: fixed; left: 50%; bottom: 9rem; z-index: 2000; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: calc(100% - 3.2rem); padding: 1.2rem 2rem; border-radius: 0.6rem; background: var(--fp-ink); color: #fff;
  font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.02em; text-align: center; transition: opacity 0.3s ease, transform 0.3s ease;
}
.fp-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Ảnh gói: PNG/WebP đã xóa phông — nền sáng, ảnh nằm gọn giữa khung */
.fp-pack__media img { padding: 2.4rem 2.8rem; }
.fp-pack__colors { margin-top: 1rem; display: flex; align-items: center; gap: 0.6rem; font-size: 1.12rem; line-height: 1.5; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-swatch {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem; border: 1px solid var(--fp-line); border-radius: 999px;
  background: #fff; font-family: var(--fp-serif); font-size: 1.1rem; line-height: 1.4; letter-spacing: 0.03em; color: var(--fp-muted); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fp-swatch[aria-pressed="true"] { border-color: var(--fp-ink); color: var(--fp-ink); }
@media (hover: hover) and (min-width: 768px) { .fp-swatch:hover { border-color: var(--fp-ink); } }

/* ---------- Phụ kiện (trong section Thông số) ---------- */
.fp-acc { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.fp-acc__col { background: #fff; border: 1px solid var(--fp-line); border-radius: 1rem; padding: 2.8rem 3rem; }
.fp-acc__ttl { font-family: var(--fp-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.45; color: var(--fp-ink); letter-spacing: 0.03em; padding-bottom: 1.2rem; border-bottom: 2px solid var(--fp-ink); }
.fp-acc__hero { margin-top: 2rem; display: flex; align-items: center; gap: 2rem; padding: 1.6rem; background: var(--fp-cream); border-radius: 0.8rem; }
.fp-acc__hero img { width: 12rem; height: auto; flex-shrink: 0; }
.fp-acc__name { font-family: var(--fp-serif); font-size: 1.5rem; line-height: 1.4; color: var(--fp-ink); letter-spacing: 0.03em; }
.fp-acc__txt { margin-top: 0.5rem; font-size: 1.15rem; line-height: 1.7; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-acc__list { margin-top: 1.6rem; list-style: none; padding: 0; }
.fp-acc__list li { position: relative; padding: 1rem 0 1rem 2.2rem; border-bottom: 1px solid var(--fp-line); font-size: 1.2rem; line-height: 1.6; color: var(--fp-ink); letter-spacing: 0.03em; }
.fp-acc__list li::before { content: ""; position: absolute; left: 0; top: 1.8rem; width: 1rem; height: 1px; background: var(--fp-red); }
.fp-acc__list--opts b { display: block; font-weight: 500; }
.fp-acc__list--opts span { display: block; font-size: 1.08rem; color: var(--fp-muted); }
.fp-acc__note { margin-top: 1.6rem; font-size: 1.1rem; line-height: 1.75; color: var(--fp-muted); letter-spacing: 0.03em; }
.fp-acc__note a { color: var(--fp-red); border-bottom: 1px solid currentColor; }
@media screen and (max-width: 767px) {
  .fp-acc { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3rem; }
  .fp-acc__col { padding: 2rem 1.8rem; }
  .fp-acc__ttl { font-size: 1.5rem; }
  .fp-acc__hero { gap: 1.4rem; padding: 1.2rem; }
  .fp-acc__hero img { width: 9rem; }
  .fp-acc__list li { font-size: 1.15rem; }
}

/* ---------- Gửi form về Google Sheet ---------- */
.fp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fp-form__error { display: none; margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 0.6rem; background: #fdeeee; color: #a4262c; font-size: 1.12rem; line-height: 1.7; letter-spacing: 0.02em; }
.fp-form__error.is-shown { display: block; }
.fp-form__error a { color: inherit; border-bottom: 1px solid currentColor; pointer-events: auto; }
.fp-form.is-sending button[type="submit"] { opacity: 0.6; cursor: wait; }
/* Gửi thành công: ẩn các ô nhập, chỉ còn lời cảm ơn */
.fp-form.is-sent .fp-form__sub,
.fp-form.is-sent .fp-form__grid,
.fp-form.is-sent .fp-form__summary,
.fp-form.is-sent .fp-form__actions,
.fp-form.is-sent .fp-form__fine,
.fp-form.is-sent .fp-form__error { display: none; }
.fp-form.is-sent .fp-form__done { font-size: 1.3rem; padding: 2rem; }