/* ============================================================
   LANDING — trang bán hàng, khung theo benchmark dancefit.me
   Thứ tự section: hero → giới thiệu app → tình huống dùng
                   → kết quả/testimonial → tải app → footer
   ============================================================ */

/* ---------------- Header nổi ---------------- */

.nav-wrap { position: sticky; top: 0; z-index: 50; padding: var(--s-5) var(--s-6) 0; }

.nav {
  max-width: var(--wrap); margin-inline: auto;
  height: var(--h-nav);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  display: flex; align-items: center; gap: var(--s-8);
  padding-inline: var(--s-6);
}


.nav__links { display: flex; gap: var(--s-8); margin-left: var(--s-6); }
.nav__links a { font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { margin-left: auto; }
.nav__burger { display: none; margin-left: auto; font-size: 22px; padding: var(--s-2); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative; overflow: hidden;
  padding: var(--s-16) 0 var(--s-20);
  background: var(--white);
}
/* Dải lime chéo phía sau ảnh — dấu nhận diện của benchmark */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg,
    transparent 0 46%,
    var(--lime-wash) 46% 62%,
    var(--lime) 62% 100%);
  opacity: .55;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-12); align-items: center;
}
.hero h1 { font-size: var(--fs-hero); }
.hero .lead { margin-top: var(--s-5); font-size: 17px; color: var(--ink-2); max-width: 34em; }
.hero__cta { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); }

.stores { margin-top: var(--s-8); display: flex; gap: var(--s-3); }
.store {
  display: flex; align-items: center; gap: var(--s-3);
  height: 48px; padding-inline: var(--s-4);
  background: var(--ink); color: var(--white);
  border-radius: var(--r-sm); font-size: var(--fs-xs);
}
.store b { display: block; font-size: var(--fs-sm); font-weight: 800; letter-spacing: -.01em; }
.store span { opacity: .7; }

.hero__art { border-radius: var(--r-xl); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero::before { background: linear-gradient(160deg, transparent 0 55%, var(--lime) 55% 100%); }
}

/* ---------------- Giới thiệu app: 4 khối xen kẽ ---------------- */

.feat { display: grid; gap: var(--s-20); }

.feat__row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-12); align-items: center;
}
.feat__row:nth-child(even) .feat__art { order: -1; }

.feat__num {
  font-size: 13px; font-weight: 900; color: var(--ink);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.feat__row h3 { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.feat__row p { color: var(--ink-3); }

.feat__art { max-width: 320px; margin-inline: auto; width: 100%; }

@media (max-width: 860px) {
  .feat { gap: var(--s-12); }
  .feat__row { grid-template-columns: 1fr; gap: var(--s-6); }
  .feat__row:nth-child(even) .feat__art { order: 0; }
}

/* ---------------- Tình huống dùng ---------------- */

.usage__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: var(--s-12); align-items: center;
}
.usage__list { display: grid; gap: var(--s-5); }
.usage__item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--white); border-radius: var(--r-lg);
  padding: var(--s-5); border: 1px solid var(--line);
}
.usage__icon {
  flex: 0 0 44px; height: 44px; border-radius: var(--r-md);
  background: var(--lime); display: grid; place-items: center; font-size: 20px;
}
.usage__item h4 { margin: 0 0 var(--s-1); font-size: var(--fs-body); font-weight: 800; color: var(--ink); }
.usage__item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }

@media (max-width: 860px) { .usage__grid { grid-template-columns: 1fr; } }

/* ---------------- Kết quả / testimonial ---------------- */

.stats { display: flex; justify-content: center; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-12); }
.stat { text-align: center; }
.stat b { display: block; font-size: 40px; font-weight: 900; color: var(--ink); letter-spacing: -.03em; }
.stat span { font-size: var(--fs-sm); color: var(--ink-3); }

.tstm { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-6); }
.tstm__card {
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--line); overflow: hidden;
}
.tstm__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; position: relative; }
.tstm__badge {
  position: absolute; left: 50%; top: var(--s-4); transform: translateX(-50%);
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
  font-weight: 900; font-size: var(--fs-sm); z-index: 2; white-space: nowrap;
}
.tstm__body { padding: var(--s-5); }
.tstm__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.tstm__name { font-weight: 800; color: var(--ink); }
.tstm__date { font-size: var(--fs-xs); color: var(--ink-4); }
/* Sao đánh giá: --ink. Lime trên nền trắng chỉ 1.42:1, sao sẽ tàng hình. */
.tstm__stars { color: var(--ink); letter-spacing: 2px; font-size: var(--fs-sm); }
.tstm__body p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }

@media (max-width: 900px) { .tstm { grid-template-columns: 1fr; } }

/* Ghi chú tuân thủ — bắt buộc giữ, xem nguyen-tac-san-pham */
.disclaimer {
  margin-top: var(--s-10); text-align: center;
  font-size: var(--fs-xs); color: var(--ink-4); max-width: 720px; margin-inline: auto;
}

/* ---------------- Dải tải app ---------------- */

.download {
  background: var(--navy); color: var(--white);
  border-radius: var(--r-xl); padding: var(--s-16) var(--s-8);
  text-align: center; position: relative; overflow: hidden;
}
.download::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(216,252,62,.28), transparent 70%);
}
.download h2 { color: var(--white); position: relative; }
.download .btn { margin-top: var(--s-8); position: relative; }

/* ---------------- Footer ---------------- */

.footer { background: var(--white); border-top: 1px solid var(--line); padding-block: var(--s-12); }
.footer__grid { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; justify-content: space-between; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-6); font-size: var(--fs-sm); color: var(--ink-3); }
.footer__social { display: flex; gap: var(--s-3); }
.footer__social a {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--cream); display: grid; place-items: center;
}
.footer__copy { width: 100%; font-size: var(--fs-xs); color: var(--ink-4); padding-top: var(--s-6);
                border-top: 1px solid var(--line-2); }

/* Ảnh hero thật — nền trắng, cắt theo khung 4:5 giống ô giữ chỗ cũ */
.hero__art { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }

/* Ảnh vuông trong khối hành trình */
.art--1x1 { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-xl); display: block; }

/* Ảnh chụp màn hình app trong khối giới thiệu — khung 9:16 như ô giữ chỗ cũ */
img.feat__art { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 0;
                border-radius: var(--r-xl); display: block; }