/* =============================================================================
   Noku — mẫu dựng cho trang giới thiệu app.

   `base.css` là hệ thiết kế (màu, bảng bán kính, thang chữ, card, nút).
   File này là các KHỐI LẶP LẠI của trang: khối tính năng lớn xen kẽ trái–phải,
   ba bước có demo động, lưới ô nhỏ, câu hỏi thường gặp, dải kêu gọi cuối trang.

   Luật không đổi: chỉ hai màu (mực + nền), chỉ bảng bán kính ở base.css mục 2,
   khung chữ nhật bo góc thì đường cong liên tục, capsule thì bo tròn thường.

   Chỗ nào trang tham chiếu dùng màu nhấn thì ở đây chuyển thành tương phản
   tông (mực đặc ↔ mực mờ). Không thêm màu thứ ba.
   ========================================================================== */

/* ---------- 1. Nút tải App Store ----------------------------------------- */
/*
   Chữ "Download on the App Store" là hình badge của Apple (bản Light trong
   E:\Design\noku, chỉ logo và chữ, không khung), nằm trong sprite với id
   i-appstore. Hình tô bằng currentColor nên tự lấy màu chữ của nút: trắng trên
   nền mực ở hero, mực trên nền kem trong dải cuối trang, và đảo đúng theo chế
   độ tối. Khung nút (nền, bo góc squircle) vẫn là của trang.
*/

.store-badge {
  --r: var(--r-button);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid var(--primary);
  border-radius: var(--r);
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  transition: opacity 0.18s var(--ease-ui), transform 0.18s var(--ease-ui);
}

@supports (corner-shape: squircle) {
  .store-badge { corner-shape: squircle; }
}

.store-badge:hover { opacity: 0.86; }
.store-badge:active { transform: scale(0.98); }
/* ViewBox đã cắt sát chữ, nên chiều cao ở đây chính là chiều cao phần chữ. */
.store-badge__art {
  display: block;
  height: 30px;
  width: auto;
  aspect-ratio: 423 / 110;
  flex: 0 0 auto;
}

.store-badge--lg { padding: 16px 28px; }
.store-badge--lg .store-badge__art { height: 36px; }

/* ---------- 2. Đầu section ----------------------------------------------- */

.head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head .lead { margin-top: 16px; }

/* Chip nhãn nhỏ trên tiêu đề — capsule, bo tròn thường. */
.label {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-body);
  font-weight: 700;
}

/* ---------- 3. Khối tính năng lớn, xen kẽ trái – phải -------------------- */
/*
   Mỗi khối là một THẺ riêng (không phải một hàng trong lưới chung). Thẻ tự co
   theo nội dung: cột chữ và cột ảnh không ép 50/50 — trang tham chiếu dùng ba
   tỷ lệ khác nhau tuỳ loại ảnh, và đó là chi tiết làm trang bớt cứng.

   Trên điện thoại BỎ đảo chiều: chữ luôn nằm trên, ảnh nằm dưới. Đảo chiều ở
   khổ hẹp làm thứ tự đọc lộn xộn.
*/

.feature-card {
  --r: var(--r-card);
  --pad: clamp(24px, 4vw, 56px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: var(--pad);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
}

@supports (corner-shape: squircle) {
  .feature-card { corner-shape: squircle; }
}

.feature-card + .feature-card { margin-top: 24px; }

/*
   Khung máy trong thẻ tính năng NHỎ hơn khung ở hero. Ảnh chụp iPhone cao gấp
   2,17 lần bề ngang, nên khung 320px kéo thẻ lên gần 800px trong khi cột chữ
   chỉ chiếm khoảng 220px — phần còn lại là khoảng trống. Thu về 280px là thẻ
   xuống khoảng 690px, cột chữ và ảnh đọc cân nhau hơn.
*/
@media (min-width: 900px) {
  .feature-card { grid-template-columns: 1fr 1.05fr; --phone-w: 280px; }
  .feature-card--wide-text { grid-template-columns: 1.15fr 1fr; }
  .feature-card--wide-media { grid-template-columns: 1fr 1.4fr; }
  .feature-card--flip .feature-card__media { order: -1; }
}

.feature-card__title { margin-bottom: 16px; }
.feature-card__body { color: var(--mut); max-width: 46ch; margin-bottom: 24px; }

.feature-card__media {
  display: grid;
  place-items: center;
  min-width: 0;
}

/* Danh sách có dấu tích, hiện lần lượt khi khối vào tầm nhìn. */
.checks { display: grid; gap: 14px; }

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: var(--fs-body-lg);
}

.checks svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: 0 0 auto;
}

/* ---------- 4. Tab trượt ------------------------------------------------- */
/* Đã chuyển sang base.css mục 9b: privacy.html cũng dùng tab mà chỉ nạp base.css. */

/* ---------- 5. Ba bước --------------------------------------------------- */

.steps {
  display: grid;
  gap: 32px;
  counter-reset: step;
}

@media (min-width: 900px) {
  .steps {
    /* minmax(0, 1fr) chứ không phải 1fr: '1fr' là minmax(auto, 1fr) nên cột
       nào có min-content lớn hơn sẽ nong ra — lưới 7 ô của ô demo chuỗi ngày
       ép cột ba rộng gấp 2,4 lần hai cột kia ở khoảng 920px. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}

.step { counter-increment: step; }

.step__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: var(--fs-body);
  font-weight: 700;
}

.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--mut); }

/* Gạch nối giữa hai bước: ngang trên desktop, dọc trên điện thoại. */
.step-link {
  align-self: center;
  width: 56px;
  height: 1px;
  background: var(--hair-soft);
  margin-top: 96px;
}

@media (max-width: 899px) {
  .step-link { width: 1px; height: 32px; margin: 0 auto; }
}

/* ---------- 6. Ô demo động ----------------------------------------------- */
/*
   Ba ô hình của phần "Dùng thế nào" KHÔNG phải ảnh — chúng là DOM thật, hoạt
   hình bằng CSS. JS chỉ thêm/bỏ class .is-live khi ô vào hoặc rời tầm nhìn,
   nên cuộn ngược lên là xem lại được.

   HƯỚNG QUAN TRỌNG: trạng thái NGHỈ của mọi thứ ở đây là trạng thái ĐẦY ĐỦ —
   thanh calo đã đầy, cột macro đã cao, ô ngày đã tô. Hoạt hình chạy NGƯỢC từ
   rỗng lên nhờ animation-fill-mode: backwards.

   Làm ngược lại (nghỉ = rỗng, hoạt hình lấp đầy) thì mỗi lần bộ quan sát chưa
   kịp bắn — trình duyệt cũ, tab nền, người dùng tắt chuyển động, script lỗi —
   người ta sẽ thấy ba ô viền trắng trơn. Một ô tĩnh mà đầy đủ luôn tốt hơn một
   ô động mà có lúc trống.
*/

.demo {
  --r: var(--r-card);
  --pad: 16px;
  position: relative;
  height: 168px;
  margin-bottom: 22px;
  padding: var(--pad);
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--fill);
}

@supports (corner-shape: squircle) {
  .demo { corner-shape: squircle; }
}

.demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0 12px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  font-size: var(--fs-body);
  font-weight: 700;
}

@supports (corner-shape: squircle) {
  .demo__row { corner-shape: squircle; }
}

.demo__row span:last-child { margin-left: auto; color: var(--mut); font-weight: 400; }

/*
   Ba dòng món chia đều chiều cao vùng trong của ô. Ô cao cố định 168px, đệm
   16px, nên mỗi dòng tự co còn 40px, cách nhau 8px, trên dưới đều cách viền
   16px. Trước đây mỗi dòng cao 44px cộng lề 8px, tổng vượt 15px, dòng cuối
   đè lên viền dưới của ô.
*/
.demo--log { display: flex; flex-direction: column; gap: 8px; }
.demo--log .demo__row { flex: 1 1 0; }

/* Tên món dài thì cắt bằng dấu ba chấm, không xuống dòng làm dòng cao lên. */
.demo__row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__row span:last-child { flex: 0 0 auto; overflow: visible; }

/* Demo 1 — các dòng món lần lượt trượt lên. */
.demo.is-live.demo--log .demo__row {
  animation: rowIn 0.5s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.45s);
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(14px); }
}

/* Demo 2 — thanh calo và bốn cột macro. */
.demo--day { display: grid; grid-template-rows: auto 1fr; gap: 14px; }

.demo__bar {
  height: 11px;
  padding: 2px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  overflow: hidden;
}

.demo__bar i {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 999px;
  background: var(--primary);
}

.demo.is-live .demo__bar i { animation: barFill 1.4s var(--ease) backwards; }

@keyframes barFill {
  from { width: 0; }
}

.demo__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
}

.demo__col {
  height: var(--h, 60%);
  border-radius: var(--r-badge);
  background: color-mix(in srgb, var(--fg) 22%, transparent);
}

@supports (corner-shape: squircle) {
  .demo__col { corner-shape: squircle; }
}

.demo__col:nth-child(odd) { background: color-mix(in srgb, var(--fg) 42%, transparent); }

.demo.is-live .demo__col {
  animation: colGrow 0.9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes colGrow {
  from { height: 0; }
}

/* Demo 3 — lịch chuỗi ngày. Ô đã ghi tô mực, ô chưa tới để mờ. */
.demo--streak {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 7px;
  align-content: center;
}

.demo__day {
  aspect-ratio: 1;
  border-radius: var(--r-badge);
  border: 1px solid var(--hair-soft);
  background: var(--surface);
  transform: scale(0.7);
  opacity: 0.35;
}

@supports (corner-shape: squircle) {
  .demo__day { corner-shape: squircle; }
}

.demo__day--on {
  transform: none;
  opacity: 1;
  background: var(--primary);
  border-color: var(--primary);
}

.demo.is-live .demo__day--on {
  animation: dayPop 0.4s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.11s);
}

@keyframes dayPop {
  from {
    transform: scale(0.7);
    opacity: 0.35;
    background: var(--surface);
    border-color: var(--hair-soft);
  }
  60% { transform: scale(1.08); }
}

/* Tắt chuyển động: giữ nguyên trạng thái đầy đủ, chỉ bỏ hoạt hình. */
@media (prefers-reduced-motion: reduce) {
  .demo.is-live .demo__row,
  .demo.is-live .demo__bar i,
  .demo.is-live .demo__col,
  .demo.is-live .demo__day--on { animation: none; }
}

/* ---------- 7. Lưới ô nhỏ ------------------------------------------------ */

.tiles { display: grid; gap: 16px; }

/* Điện thoại giữ HAI cột chứ không xuống một — mất cảm giác lưới thì thà bỏ. */
@media (min-width: 380px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 980px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.tile {
  --r: var(--r-card);
  --pad: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--pad);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  transition: background-color 0.3s var(--ease-ui);
}

@supports (corner-shape: squircle) {
  .tile { corner-shape: squircle; }
}

.tile:hover { background: var(--fill); }
.tile h3 { font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.35; }
.tile p { color: var(--mut); font-size: var(--fs-body); }
.tile .icon-box { margin-bottom: 6px; }

/* ---------- 8. Câu hỏi thường gặp ---------------------------------------- */
/* details/summary: mở đóng được mà không cần một dòng JS nào. */

.faq { display: grid; gap: 12px; }

.faq details {
  --r: var(--r-card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

@supports (corner-shape: squircle) {
  .faq details { corner-shape: squircle; }
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Dấu cộng thành dấu trừ khi mở — hai vạch chồng nhau, thuần CSS. */
.faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 0.25s var(--ease-ui);
}

.faq details[open] summary::after {
  background-size: 100% 1.5px, 0 0;
  transform: rotate(180deg);
}

.faq__body { padding: 0 22px 20px; color: var(--mut); }
.faq__body p + p { margin-top: 10px; }
.faq__body a { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ---------- 9. Dải kêu gọi cuối trang ----------------------------------- */

.cta-band {
  --r: var(--r-card);
  --pad: clamp(32px, 5vw, 72px);
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: var(--pad);
  text-align: center;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r);
}

@supports (corner-shape: squircle) {
  .cta-band { corner-shape: squircle; }
}

.cta-band .lead,
.cta-band .muted,
.cta-band .tiny { color: color-mix(in srgb, var(--on-primary) 68%, transparent); }

.cta-band .btn--primary,
.cta-band .store-badge {
  background: var(--on-primary);
  color: var(--primary);
  border-color: var(--on-primary);
}

.cta-band .btn--ghost {
  color: var(--on-primary);
  border-color: color-mix(in srgb, var(--on-primary) 38%, transparent);
}

.cta-band .btn--ghost:hover {
  background: color-mix(in srgb, var(--on-primary) 12%, transparent);
}

.cta-band a { color: inherit; }

/* ---------- 10. Chân trang nhiều cột ------------------------------------- */

.footer-cols {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
}

@media (min-width: 760px) {
  .footer-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
}

.footer-col h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 14px;
}

.footer-col ul { display: grid; gap: 10px; }

/* ---------- 11. Hiện dần khi cuộn ---------------------------------------- */
/*
   base.css lo phần [data-reveal]. Ở đây chỉ thêm cách xếp so le: đặt --i trên
   từng con, transition-delay tự tính. Không cần một dòng JS cho từng phần tử.
*/

.js .stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}

.js .stagger.is-in > * { opacity: 1; transform: none; }

/* Khối tính năng: chữ và ảnh trượt vào từ hai phía ngược nhau. */
.js .slide-l,
.js .slide-r {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/*
   Khổ hẹp KHÔNG trượt ngang. Trượt ngang trên màn hẹp đẩy nội dung ra ngoài
   khung nhìn và làm trang cuộn ngang được cho tới khi hiệu ứng chạy xong —
   đúng cái bẫy mà mọi trang landing hay dính. Dưới 900px đổi sang trượt dọc:
   cùng cảm giác, không bao giờ tràn.
*/
.js .slide-l,
.js .slide-r { transform: translateY(16px); }

@media (min-width: 900px) {
  .js .slide-l { transform: translateX(-32px); }
  .js .slide-r { transform: translateX(32px); }
}
.js .is-in .slide-l,
.js .is-in .slide-r { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .stagger > *,
  .js .slide-l,
  .js .slide-r {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 12. Tiện ích ------------------------------------------------- */

.center { text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }
.hide-sm { display: none; }

@media (min-width: 700px) { .hide-sm { display: revert; } }