/*
  Giao diện trang giới thiệu — mượn cách bày của App Store.

  Vì sao chọn cách bày đó: người sắp cài một ứng dụng đều đã quen nhìn kiểu này.
  Biểu tượng to bên trái, tên và nút nhận bên phải, rồi dải ảnh chụp màn hình
  cuộn ngang, rồi "có gì mới", rồi mô tả, rồi bảng thông tin. Không phải bắt
  chước cho đẹp mà vì mắt người xem đã biết trước phải tìm cái gì ở đâu.

  Viết tay, không Tailwind, không một gói nào. Cả file này gọn hơn thời gian
  tải một thư viện CSS ngoài về.

  Ba điều xuyên suốt:
    · Điện thoại trước. Mọi cỡ chữ đều `clamp()`, mọi lưới đều `auto-fit` —
      không có ngưỡng nào mà giao diện gãy giữa chừng.
    · Nền tối theo máy. Chủ vựa hay mở điện thoại lúc tối trời ngoài sân phơi.
    · Chạm được bằng ngón tay bẩn: nút cao tối thiểu 44px, không có cái gì
      chỉ hiện ra khi rê chuột.
*/

/* ------------------------------------------------------------------ màu sắc */

:root {
  color-scheme: light dark;

  --nen: #fff;
  --nen-2: #f5f5f7;
  --nen-mo: rgba(255, 255, 255, 0.72);
  --chu: #1d1d1f;
  --chu-2: #6e6e73;
  --vien: rgba(0, 0, 0, 0.1);
  --vien-dam: rgba(0, 0, 0, 0.16);

  /* Nâu cà phê — cùng bảng màu với ứng dụng, không đổi sang xanh cho giống Apple */
  --nhan: #8a5539;
  --nhan-dam: #6f4430;
  --chu-tren-nhan: #fff;
  --nhan-nhat: #fbf6f3;

  --bong: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --bo-goc: 18px;
  --rong: 980px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #000;
    --nen-2: #1c1c1e;
    --nen-mo: rgba(0, 0, 0, 0.72);
    --chu: #f5f5f7;
    --chu-2: #98989d;
    --vien: rgba(255, 255, 255, 0.14);
    --vien-dam: rgba(255, 255, 255, 0.22);

    --nhan: #d9a883;
    --nhan-dam: #e8c4a6;
    --chu-tren-nhan: #2a180d;
    --nhan-nhat: #1f1611;

    --bong: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

/* ------------------------------------------------------------------ nền chung */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* 17px là cỡ chữ thân của iOS — đọc được ngoài nắng mà không phải phóng to */
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--nhan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--nhan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Link cho người dùng bàn phím / trình đọc màn hình, chỉ hiện khi được chọn */
.bo-qua {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nen);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
}

.bo-qua:focus {
  left: 0;
}

.khung-rong {
  width: 100%;
  max-width: var(--rong);
  margin-inline: auto;
  /* Lề bám theo vùng an toàn: iPhone xoay ngang không bị tai thỏ ăn mất chữ */
  padding-inline: max(22px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ------------------------------------------------------------------ chữ */

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: clamp(28px, 6vw, 40px);
}

h2 {
  font-size: clamp(22px, 4.2vw, 28px);
}

h3 {
  font-size: clamp(17px, 2.4vw, 19px);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

.mo {
  color: var(--chu-2);
}

.nho {
  font-size: 14px;
  color: var(--chu-2);
}

/* Tên file, lệnh, mã phiếu — cho vào khung nhỏ để không lẫn với chữ thường */
code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--nen-2);
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 1px 5px;
  /*
    Cho phép ngắt giữa chừng. Có một câu lệnh macOS dài hơn cả bề ngang điện
    thoại; để nguyên một dòng là cả trang trôi ngang, đọc đoạn nào cũng phải
    kéo qua kéo lại.
  */
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ thanh trên */

.thanh-tren {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nen-mo);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--vien);
  padding-top: env(safe-area-inset-top);
}

.thanh-trong {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
}

.hieu {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--chu);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.hieu:hover {
  text-decoration: none;
}

.hieu img {
  border-radius: 7px;
}

.dieu-huong {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.dieu-huong::-webkit-scrollbar {
  display: none;
}

.dieu-huong a {
  color: var(--chu-2);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.dieu-huong a:hover {
  color: var(--chu);
  background: var(--nen-2);
  text-decoration: none;
}

.dieu-huong a[aria-current='page'] {
  color: var(--chu);
  font-weight: 600;
}

/*
  Màn hình hẹp: bỏ hẳn dãy link, chỉ chừa tên app và nút mở ứng dụng.

  Không làm menu hamburger — bốn cái link đã nằm sẵn ở chân trang, thêm một
  nút bật tắt nữa chỉ tổ có thêm chỗ để hỏng.
*/
@media (max-width: 560px) {
  .dieu-huong {
    display: none;
  }

  .nut-nho {
    margin-inline-start: auto;
  }
}

/* ------------------------------------------------------------------ nút */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 980px; /* viên thuốc, kiểu nút NHẬN của App Store */
  background: var(--nhan);
  color: var(--chu-tren-nhan);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.nut:hover {
  background: var(--nhan-dam);
  text-decoration: none;
}

.nut:active {
  transform: scale(0.97);
}

.nut-nho {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
  flex-shrink: 0;
}

/*
  Nới mọi thứ bấm được lên 44px cho ngón tay.

  Hai điều kiện, thoả một là đủ:
    · con trỏ THÔ — máy tính bảng và laptop cảm ứng cũng rộng, nhưng người ta
      vẫn chạm bằng ngón;
    · màn hình hẹp — trình duyệt nào không khai báo kiểu con trỏ thì cứ coi
      màn hình cỡ điện thoại là điện thoại.
*/
@media (pointer: coarse), (max-width: 560px) {
  .nut-nho {
    min-height: 44px;
    padding: 10px 18px;
  }

  .thanh-trong {
    height: 60px;
  }

  .dieu-huong a {
    padding: 12px 12px;
  }

  .hoi summary {
    padding-block: 20px;
  }

  .chan-cot nav {
    gap: 14px;
  }
}

.nut-phu {
  background: var(--nen-2);
  color: var(--nhan);
  box-shadow: inset 0 0 0 1px var(--vien);
}

.nut-phu:hover {
  background: var(--nen-2);
  box-shadow: inset 0 0 0 1px var(--vien-dam);
}

/* ------------------------------------------------------------------ đầu trang */

.dau-trang {
  padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 32px);
}

/*
  Đầu trang xếp bằng lưới, không phải flex, để đổi bố cục mà không đụng vào HTML.

  Điện thoại: biểu tượng và tên nằm cùng một hàng, hàng nút chiếm trọn bề ngang
  bên dưới — hai cái nút mới đủ chỗ đứng cạnh nhau.
  Màn hình rộng: biểu tượng cao bằng cả hai hàng bên phải, đúng như App Store bày.
*/
.dau-bo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 22px) clamp(18px, 4vw, 30px);
  align-items: center;
}

.dau-bo > .dau-nut {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .dau-bieu-tuong {
    grid-row: 1 / span 2;
  }

  .dau-bo > .dau-nut {
    grid-column: 2;
  }
}

.dau-bieu-tuong {
  width: clamp(88px, 22vw, 128px);
  height: clamp(88px, 22vw, 128px);
  /* Bo 22,5% là tỉ lệ biểu tượng của iOS — nhỏ hơn thì vuông, lớn hơn thì tròn ung */
  border-radius: 22.5%;
  box-shadow: var(--bong), inset 0 0 0 1px var(--vien);
  flex-shrink: 0;
}

.dau-chu {
  min-width: 0;
}

.dau-chu h1 {
  margin-bottom: 6px;
}

.dau-phu {
  color: var(--chu-2);
  font-size: clamp(15px, 2.6vw, 19px);
  margin-bottom: 0;
}

.dau-nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.dau-nut .nho {
  margin: 0;
}

/* ------------------------------------------------------------------ dãy số liệu */

/*
  Dãy chỉ số dưới đầu trang. Cuộn ngang trên điện thoại thay vì xuống dòng
  lộn xộn — đúng như App Store làm với hàng "xếp hạng / thể loại / tuổi".
*/
.day-so-lieu {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: clamp(16px, 3vw, 22px) 0;
  margin: 0;
  border-top: 1px solid var(--vien);
  border-bottom: 1px solid var(--vien);
  scrollbar-width: none;
}

.day-so-lieu::-webkit-scrollbar {
  display: none;
}

.day-so-lieu > div {
  flex: 1 0 auto;
  min-width: 104px;
  padding-inline: clamp(14px, 3vw, 24px);
  text-align: center;
  scroll-snap-align: start;
  border-inline-start: 1px solid var(--vien);
}

.day-so-lieu > div:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.day-so-lieu dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chu-2);
  margin-bottom: 6px;
  white-space: nowrap;
}

.day-so-lieu dd {
  margin: 0;
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 700;
  color: var(--chu-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.day-so-lieu dd small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--chu-2);
}

/* ------------------------------------------------------------------ mục */

.muc {
  padding: clamp(30px, 6vw, 52px) 0;
  border-top: 1px solid var(--vien);
}

.muc:first-child {
  border-top: 0;
}

.muc-dau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(14px, 3vw, 22px);
}

.muc-dau p {
  margin: 8px 0 0;
}

/*
  Dòng chữ dài quá thì mắt lạc hàng khi xuống dòng. Giới hạn khoảng 66 ký tự —
  chỉ với đoạn văn xuôi, còn thẻ, bảng và lưới vẫn trải hết bề ngang.
*/
.muc > .khung-rong > p,
.muc > .khung-rong > .ds-dau-cham,
.muc > .khung-rong > .ghi-chu,
.muc > .khung-rong > .ds-buoc {
  max-width: 66ch;
}

.muc > .khung-rong > p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ dải ảnh màn hình */

/*
  Ảnh chụp màn hình cuộn ngang, dừng đúng từng tấm.

  Tràn ra hết bề ngang màn hình chứ không nằm gọn trong khung: nhìn là biết
  còn ảnh nữa ở bên phải, không cần vẽ thêm mũi tên.
*/
.dai-anh {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px max(22px, env(safe-area-inset-right)) 20px;
  margin-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dai-anh::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  /* Màn hình rộng: canh dải ảnh thẳng hàng với phần chữ bên trên */
  .dai-anh {
    padding-inline: calc((100vw - var(--rong)) / 2 + 22px);
  }
}

.dai-anh figure {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(190px, 52vw, 250px);
  scroll-snap-align: center;
}

.khung-may {
  border-radius: 26px;
  overflow: hidden;
  background: var(--nen-2);
  box-shadow: var(--bong), inset 0 0 0 1px var(--vien);
  aspect-ratio: 375 / 812;
}

.khung-may img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.dai-anh figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--chu-2);
  text-align: center;
  line-height: 1.35;
}

/* ------------------------------------------------------------------ thẻ và lưới */

/*
  Lưới `auto-fit`: số cột tự co theo bề ngang thật, không cần điểm ngắt nào.
  Điện thoại 1 cột, máy tính bảng 2, màn hình rộng 3 — mà không viết media query.
*/
.luoi {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.luoi-doi {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.the {
  background: var(--nen-2);
  border-radius: var(--bo-goc);
  padding: clamp(18px, 3.4vw, 24px);
}

.the h3 {
  margin-bottom: 8px;
}

.the p:last-child {
  margin-bottom: 0;
}

.the-vien {
  background: var(--nen);
  box-shadow: inset 0 0 0 1px var(--vien);
}

.the-nhan {
  background: var(--nhan-nhat);
}

/* Bản dành cho chính máy đang xem, đã được đưa lên đầu danh sách */
.the[data-may-nay] {
  background: var(--nhan-nhat);
  box-shadow: inset 0 0 0 2px var(--nhan);
}

.the[data-may-nay] [data-dau-may] {
  color: var(--nhan-dam);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Biểu tượng tròn đầu thẻ */
.the-hinh {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nhan);
  color: var(--chu-tren-nhan);
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------ có gì mới */

.co-gi-moi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 14px;
}

.the-phien-ban {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 980px;
  background: var(--nhan-nhat);
  color: var(--nhan-dam);
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ danh sách */

.ds-dau-cham {
  margin: 0 0 1em;
  padding-inline-start: 1.15em;
}

.ds-dau-cham li {
  margin-bottom: 0.5em;
}

.ds-dau-cham li::marker {
  color: var(--nhan);
}

/* Danh sách có đánh số kiểu các bước làm */
.ds-buoc {
  list-style: none;
  counter-reset: buoc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ds-buoc li {
  counter-increment: buoc;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}

.ds-buoc li::before {
  content: counter(buoc);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nhan);
  color: var(--chu-tren-nhan);
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.ds-buoc h3 {
  margin-bottom: 4px;
}

.ds-buoc p {
  margin: 0;
}

/* ------------------------------------------------------------------ bảng thông tin */

/*
  Bảng "Thông tin" cuối trang App Store: hai cột, phân cách bằng nét mảnh.
  Màn hình hẹp thì nhãn nằm trên, giá trị xuống dưới.
*/
.bang-tin {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
}

.bang-tin dt,
.bang-tin dd {
  padding: 13px 0;
  border-top: 1px solid var(--vien);
  margin: 0;
  font-size: 15px;
}

.bang-tin dt {
  color: var(--chu-2);
  padding-inline-end: 16px;
}

.bang-tin dd {
  text-align: end;
}

@media (max-width: 500px) {
  .bang-tin {
    grid-template-columns: 1fr;
  }

  .bang-tin dt {
    padding-bottom: 0;
    padding-inline-end: 0;
  }

  .bang-tin dd {
    text-align: start;
    border-top: 0;
    padding-top: 2px;
  }
}

/* ------------------------------------------------------------------ hỏi đáp */

.hoi {
  border-top: 1px solid var(--vien);
}

.hoi summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 34px 16px 0;
  font-weight: 600;
  position: relative;
}

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

.hoi summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 6px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--chu-2);
  border-block-end: 2px solid var(--chu-2);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.hoi[open] summary::after {
  transform: rotate(-135deg);
  top: 26px;
}

.hoi > div {
  padding-bottom: 16px;
  color: var(--chu-2);
}

.hoi > div > p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ dải nhắc */

/* Khối kêu gọi ở cuối mỗi trang */
.dai-nhac {
  background: var(--nen-2);
  border-radius: var(--bo-goc);
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
  margin-block: clamp(30px, 6vw, 52px);
}

.dai-nhac h2 {
  margin-bottom: 10px;
}

.dai-nhac p {
  color: var(--chu-2);
  max-width: 46ch;
  margin-inline: auto;
}

.dai-nhac .dau-nut {
  justify-content: center;
}

/* ------------------------------------------------------------------ ghi chú */

.ghi-chu {
  border-inline-start: 3px solid var(--nhan);
  padding: 4px 0 4px 16px;
  color: var(--chu-2);
  margin-bottom: 1em;
}

/* ------------------------------------------------------------------ chân trang */

.chan-trang {
  border-top: 1px solid var(--vien);
  background: var(--nen-2);
  padding: clamp(30px, 5vw, 44px) 0 calc(24px + env(safe-area-inset-bottom));
  margin-top: clamp(24px, 5vw, 40px);
}

/* Bốn cột: giới thiệu ngắn + ba nhóm link. Hẹp dần thì tự xuống hàng. */
.chan-cot {
  display: grid;
  gap: 26px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}

.chan-cot h2 {
  font-size: 17px;
  margin-bottom: 8px;
}

.chan-cot h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chu-2);
  margin-bottom: 10px;
}

.chan-cot nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: start;
}

.chan-cot nav a {
  color: var(--chu);
  font-size: 15px;
}

.chan-cot .mo {
  font-size: 14px;
  max-width: 34ch;
  margin: 0;
}

.ban-quyen {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--vien);
  font-size: 13px;
  color: var(--chu-2);
}