/* =============================================================================
   Noku — CSS riêng của từng section.

   Token màu, bảng bán kính và class dùng chung nằm ở assets/base.css.
   Các khối lặp lại (thẻ tính năng, tab, demo, tường, FAQ, dải CTA) nằm ở
   assets/patterns.css.

   File này CHỈ chứa selector bắt đầu bằng #<id section> — không có gì toàn cục.
   ========================================================================== */

/* ---------- #hero ------------------------------------------------------ */

/* ---------- #hero -------------------------------------------------------- */
/*
   Chữ trái, khung máy phải từ 900px; hẹp hơn thì một cột, chữ trước ảnh sau và
   luôn căn trái. Đệm trên rộng hơn section thường để nav không đè lên câu định
   vị — không dùng 100vh, vì chiều cao màn hình điện thoại thay đổi liên tục
   còn nội dung thì không.
*/

#hero {
  padding-top: clamp(28px, 6vw, 64px);
}

#hero .hero__grid {
  display: grid;
  gap: clamp(36px, 6vw, 56px);
  align-items: center;
}

#hero .hero__copy { min-width: 0; }

/* Kicker dài, lại giãn chữ — cho nó tự cân hai dòng thay vì bỏ rơi "iOS". */
#hero .hero__kicker { text-wrap: balance; }

#hero .hero__title { margin-top: 14px; }

/* Hai dòng tiêu đề là hai khối riêng: dòng hai chuyển tông mờ mà không phải
   cắt câu bằng <br>, và mỗi dòng tự cân khi xuống hàng. */
#hero .hero__line {
  display: block;
  text-wrap: balance;
}

#hero .hero__lead { margin-top: 20px; }

/* Hai nút bằng chiều cao nhau khi nằm cùng hàng (badge cao hơn nút viền 2px). */
#hero .hero__actions {
  align-items: stretch;
  margin-top: clamp(24px, 3vw, 32px);
}

#hero .hero__how svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Ba ý ngắn. Dấu · là vách ngăn do CSS sinh ra nên không lọt vào nội dung đọc
   được; đặt ở CUỐI mỗi ý để khi xuống hàng, dòng mới bắt đầu bằng chữ. */
#hero .hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: 20px;
}

#hero .hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#hero .hero__facts li:not(:last-child)::after {
  content: "·";
  color: var(--hair-soft);
}

#hero .hero__media {
  display: grid;
  place-items: center;
  min-width: 0;
}

@media (min-width: 900px) {
  #hero { padding-top: clamp(96px, 9.5vw, 140px); }

  /* Cột chữ hẹp hơn cột ảnh: giữ dòng chữ dễ đọc và cho khung máy chỗ thở. */
  #hero .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
    gap: 64px;
  }

  #hero .hero__mockup { max-width: 336px; }
}


/* ---------- #how ------------------------------------------------------- */

/* Khổ hẹp: ba bước xếp dọc thành MỘT cột tràn ngang (đến 899px cột này có thể
   rộng ~850px). Gom mỗi bước vào một cột hẹp căn giữa để ô lịch chuỗi ngày giữ
   được ô gần vuông và dòng chữ không bị kéo dài quá tầm đọc. */
@media (max-width: 899px) {
  #how .step {
    max-width: 380px;
    margin-inline: auto;
  }
}

/* Ba dòng món hiện lần lượt — số calo canh thẳng cột cho khỏi nhảy. */
#how .demo--log .demo__row span:last-child {
  font-variant-numeric: tabular-nums;
}


/* ---------- #features -------------------------------------------------- */

/* =============================================================================
   #features — sáu khối tính năng lớn xen kẽ trái–phải.

   Gần hết bố cục đã nằm ở patterns.css (.feature-card, .checks, .tabs, .phone).
   Dưới đây chỉ là bốn chỗ patterns.css cố ý để trống: ô ảnh bên trong khung
   máy, ảnh đứng một mình của widget, tỷ lệ cột khi thẻ bị đảo chiều, và hàng
   tab ở khổ hẹp nhất.
   ========================================================================== */

#features .head h2 {
  text-wrap: balance;
}

/* Cột chữ là ô lưới: không có min-width:0 thì một chuỗi dài không ngắt được
   sẽ nong cột ra và phá tỷ lệ đã đặt. */
#features .feature-card__content {
  min-width: 0;
}

/* ---- Ảnh trong khung máy ------------------------------------------------ */
/*
   .phone__screen đã giữ tỉ lệ 1290/2796 và là mốc định vị, nên ô ảnh chỉ việc
   phủ kín nó. Bán kính do .concentric tính (54 − 10 = 44) — không đặt số mới.
*/

#features .phone .ph {
  position: absolute;
  inset: 0;
}

/* Nhóm hai tấm của tab: bọc thêm một lớp để cả hai cùng khổ, và để cột ảnh
   (place-items: center) vẫn cấp đủ bề ngang cho khung máy bên trong. */
#features .features__panels {
  width: 100%;
}

/* ---- Tỷ lệ cột khi thẻ đảo chiều ---------------------------------------- */
/*
   patterns.css đặt tỷ lệ theo VỊ TRÍ cột, còn --flip đẩy ảnh sang cột một.
   Không khai lại thì "chữ rộng hơn" ở thẻ đảo chiều hoá thành "ảnh rộng hơn".
   Khai lại đúng hai dòng, giữ tên class nói đúng thứ nó làm ở cả hai chiều.
*/

@media (min-width: 900px) {
  #features .feature-card--flip.feature-card--wide-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  #features .feature-card--flip.feature-card--wide-media {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  /* Cột ảnh rộng hơn thì khung máy to theo; nếu không, phần rộng thêm chỉ
     biến thành khoảng trống hai bên. */
  #features .feature-card--wide-media .mockup--phone {
    max-width: 312px;
  }
}

/* ---- Tab trượt ở khổ hẹp nhất ------------------------------------------- */
/*
   Ở 320px, cột chữ chỉ còn ~240px trong khi hai nhãn tiếng Việt cộng lại rộng
   hơn thế. Cho hàng tab trải hết bề ngang và chia đôi đều — viên trượt do JS
   đo từ nút nên vẫn bám đúng.
*/

@media (max-width: 420px) {
  #features .tabs {
    display: flex;
    width: 100%;
  }

  #features .tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: var(--fs-small);
  }
}


/* ---------- #shortcuts ------------------------------------------------- */

/* ---------- #shortcuts --------------------------------------------------- */
/* Lưới ô nhỏ đã nằm trọn trong patterns.css mục 7 (.tiles / .tile) và mục 11
   (.stagger). Ở đây chỉ chỉnh nhịp của phần đầu section — không chép lại. */

#shortcuts .head h2 {
  margin-top: 12px;
  /* Tiêu đề căn giữa: chia dòng cho đều thay vì để dòng cuối cụt một chữ.
     Trình duyệt chưa hỗ trợ thì xuống dòng như bình thường. */
  text-wrap: balance;
}

/* 9 ô (bản 1.3.0 thêm 3): máy tính 3 cột vừa khít, nhưng điện thoại 2 cột thì
   ô cuối lẻ ra một mình. Cho ô lẻ đó trải hết hàng để lưới vẫn kín. */
@media (min-width: 380px) and (max-width: 979.98px) {
  #shortcuts .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ---------- #privacy ----------------------------------------------------- */
/*
   Phần riêng tư bản gọn: tiêu đề, một đoạn dẫn và một nút sang privacy.html.
   Chi tiết đầy đủ nằm ở trang chính sách, không lặp lại ở đây.
*/

#privacy .head { margin-bottom: 0; }
#privacy .head h2 { margin-top: 10px; text-wrap: balance; }

#privacy .privacy__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 32px);
}

/* Reset đặt svg ở display:block mà không có cỡ — phải cho icon một kích thước. */
#privacy .privacy__cta svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  transition: transform 0.18s var(--ease);
}

#privacy .privacy__cta .btn:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  #privacy .privacy__cta svg { transition: none; }
  #privacy .privacy__cta .btn:hover svg { transform: none; }
}

/* ---------- #support --------------------------------------------------- */

/* ---------- #support — hỏi đáp + thẻ liên hệ ----------------------------- */
/*
   Đây là Support URL đã khai với Apple, nên phần này phải đọc được KHI KHÔNG
   CÓ JS: details/summary mở đóng bằng HTML thuần, hai cột chỉ là grid, không
   có gì phải chờ script mới hiện ra.

   patterns.css đã lo toàn bộ .faq (khung, dấu cộng ↔ trừ) và base.css lo .card
   + .btn. Ở đây chỉ còn: bố cục hai cột, thẻ liên hệ bám theo khi cuộn, và vài
   chỉnh nhỏ cho chữ trong câu trả lời.
*/

#support .head .h-section { margin-top: 12px; }

#support .support__grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

@media (min-width: 980px) {
  /* Cột câu hỏi rộng hơn: câu trả lời là chữ dài, thẻ liên hệ thì ngắn. */
  #support .support__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

  /* Thẻ liên hệ bám theo trong lúc người đọc mở từng câu hỏi bên trái. */
  #support .support__aside {
    position: sticky;
    top: 96px;
  }
}

/* Cả hàng tiêu đề câu hỏi là vùng bấm, nên nó cần phản hồi khi rê chuột. */
#support .faq summary { transition: background-color 0.2s var(--ease-ui); }
#support .faq summary:hover { background: var(--fill); }

#support .faq__body p { max-width: 64ch; }

/* Đường dẫn trong Cài đặt và tên nút của app: kéo về tông đặc cho dễ dò. */
#support .faq__body strong { color: var(--fg); }

#support .faq__body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Thẻ liên hệ ------------------------------------------------------- */

#support .support__card { --pad: clamp(20px, 3vw, 32px); }
#support .support__card > * + * { margin-top: 14px; }
#support .support__card p { color: var(--mut); }

#support .support__mail { margin-top: 20px; }
#support .support__mail svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Địa chỉ email dài hơn nút ở khổ 320px, nên hạ cỡ chữ trước khi nó tràn. */
#support .support__mail span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 400px) {
  #support .support__mail {
    font-size: var(--fs-body);
    padding-inline: 16px;
  }
}

#support .support__co {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  letter-spacing: 0.04em;
}


/* ---------- #cta --------------------------------------------------------- */
/*
   Dải chốt cuối trang: một câu và nút tải. Khung mực, chữ đảo màu và nút tự đảo
   nền đã có ở patterns.css (mục dải kêu gọi cuối trang).
*/

/*
   Chân trang đã có margin-top riêng. Cộng thêm padding đáy của .section nữa là
   thừa hẳn một khoảng trống bằng cả một section.
*/
#cta { padding-bottom: 0; }

#cta .cta-band { gap: 0; }
#cta .cta-band > h2 { text-wrap: balance; }
#cta .cta-band .store-badge { margin-top: clamp(24px, 3vw, 34px); }

/*
   Vòng focus mặc định là var(--fg) — đúng bằng màu nền của dải, tức là biến
   mất. Bên trong dải phải đổi sang màu chữ đảo mới thấy được.
*/
#cta .cta-band :focus-visible { outline-color: var(--on-primary); }