/*
 * AIO Downloader — giao diện theo iOS 27 (Liquid Glass đã tinh chỉnh):
 * nội dung trên nền grouped của iOS, thanh điều hướng và tab bar là kính nổi,
 * lớp kính làm mờ mạnh nền phía sau để chữ luôn đọc rõ; độ trong chỉnh được
 * bằng thanh trượt trong bảng Hiển thị (giống thanh trượt Độ trong suốt của iOS 27).
 */

:root {
  color-scheme: light dark;

  /* hệ màu iOS (light) — chữ phụ được đậm hơn mặc định để đạt 4.5:1 */
  --bg: #f2f2f7;
  --chrome: #f8f8fb;
  --chrome-rgb: 248, 248, 251;
  --dock-shadow: 0 0 0 0.5px var(--separator), 0 -6px 24px rgba(0, 0, 0, 0.06);          /* màu nhìn thấy của thanh trên/dock (kính phủ lên nền); Safari dùng nền gốc này cho vùng thanh công cụ */
  --cell: #ffffff;
  --cell-pressed: #e5e5ea;
  --fill: rgba(120, 120, 128, 0.12);
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.82);
  --label-3: rgba(60, 60, 67, 0.7);
  --separator: rgba(60, 60, 67, 0.2);
  --tint: #0064e0;           /* systemBlue, đậm thêm một bậc cho chữ trắng 5:1 */
  --tint-soft: rgba(0, 100, 224, 0.12);
  --green: #1f8a3c;
  --red: #d70015;
  --orange: #b25000;

  /* kính */
  --glass-alpha: 0.62;       /* thanh trượt Độ trong suốt đổi giá trị này */
  --glass-rgb: 250, 250, 252;
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shade: rgba(0, 0, 0, 0.06);
  --glass-blur: 22px;
  --float-shadow: 0 10px 34px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* hình khối đồng tâm */
  --r-group: 26px;
  --r-card: 22px;
  --r-control: 999px;
  --gutter: 20px;
  --column: 720px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --bg: #000000;
    --chrome: #161617;
    --chrome-rgb: 22, 22, 23;
    --dock-shadow: 0 0 0 0.5px var(--separator), 0 -6px 24px rgba(0, 0, 0, 0.45);
    --cell: #1c1c1e;
    --cell-pressed: #2c2c2e;
    --fill: rgba(120, 120, 128, 0.24);
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.72);
    --label-3: rgba(235, 235, 245, 0.62);
    --separator: rgba(84, 84, 88, 0.6);
    --tint: #0a84ff;
    --tint-soft: rgba(10, 132, 255, 0.2);
    --green: #30d158;
    --red: #ff6961;
    --orange: #ffb340;
    --glass-alpha: 0.5;
    --glass-rgb: 30, 30, 32;
    --glass-edge: rgba(255, 255, 255, 0.16);
    --glass-shade: rgba(0, 0, 0, 0.3);
    --float-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
    --bg: #000000;
    --chrome: #161617;
    --chrome-rgb: 22, 22, 23;
    --dock-shadow: 0 0 0 0.5px var(--separator), 0 -6px 24px rgba(0, 0, 0, 0.45);
    --cell: #1c1c1e;
    --cell-pressed: #2c2c2e;
    --fill: rgba(120, 120, 128, 0.24);
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.72);
    --label-3: rgba(235, 235, 245, 0.62);
    --separator: rgba(84, 84, 88, 0.6);
    --tint: #0a84ff;
    --tint-soft: rgba(10, 132, 255, 0.2);
    --green: #30d158;
    --red: #ff6961;
    --orange: #ffb340;
    --glass-alpha: 0.5;
    --glass-rgb: 30, 30, 32;
    --glass-edge: rgba(255, 255, 255, 0.16);
    --glass-shade: rgba(0, 0, 0, 0.3);
    --float-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; background-color: var(--chrome); }
/* body giữ màu nền trang; nền html (canvas) chỉ lộ ra ở vùng thanh công cụ Safari và khi kéo quá đầu/cuối trang, trùng màu dock */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
img, svg { display: block; max-width: 100%; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--tint-soft); }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 12px; }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--fill); padding: 1px 6px; border-radius: 6px; }

/* nền kiểu hình nền iOS: các mảng màu dịu phía sau để lớp kính có thứ để làm mờ */
.wallpaper {
  position: fixed;
  inset: 0 0 auto 0;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 18% 18%, rgba(64, 156, 255, 0.34), transparent 70%),
    radial-gradient(50% 45% at 82% 10%, rgba(52, 199, 190, 0.28), transparent 70%),
    radial-gradient(55% 50% at 70% 62%, rgba(255, 159, 10, 0.18), transparent 72%),
    radial-gradient(45% 40% at 25% 70%, rgba(48, 209, 88, 0.14), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wallpaper { opacity: 0.7; }
}
:root[data-theme="dark"] .wallpaper { opacity: 0.7; }

/* ---------- kính ---------- */
.glass {
  background: rgba(var(--glass-rgb), var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 0.5px var(--glass-edge),
    inset 0 -1px 0 var(--glass-shade),
    var(--float-shadow);
}

/* ---------- thanh điều hướng trên: trải hết chiều ngang, kẻ mảnh ở đáy ----------
   Thanh trải hết chiều ngang đặc hơn kính nổi: độ đặc = 0.5 + 0.45 × --glass-alpha (thanh trượt vẫn chỉnh được).
   Lớp kính nằm ở ::before chứ không ở chính header: backdrop-filter trên header sẽ
   giữ tab bar (position: fixed, nằm bên trong header) dính theo header trên điện thoại. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
}
/* Safari iOS 26: khi cuộn và thanh địa chỉ thu nhỏ, nội dung trang hiện cả dưới thanh trạng thái
   (giờ, pin) còn header dính ngay bên dưới vùng đó. Kéo nền header lên thêm --nav-ext để che vùng này;
   ở nơi khác phần kéo dài nằm ngoài màn hình. */
.navbar { --nav-ext: 120px; }
/* Giống dock nhưng ngược chiều: ::before làm mờ, ::after màu đặc ở mép trên rồi nhạt dần xuống mép dưới header */
.navbar::before, .navbar::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--nav-ext)) 0 0 0;
  z-index: -1;
  pointer-events: none;
}
.navbar::before {
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
}
.navbar::after {
  background:
    linear-gradient(rgb(var(--chrome-rgb)), rgb(var(--chrome-rgb))) top / 100% var(--nav-ext) no-repeat,
    linear-gradient(to bottom, rgb(var(--chrome-rgb)) 0%, rgb(var(--chrome-rgb)) 0%, rgba(var(--chrome-rgb), calc(var(--glass-alpha) * 0.5)) 100%) bottom / 100% calc(100% - var(--nav-ext)) no-repeat;
  box-shadow: 0 0.5px 0 var(--separator);
}
.navbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 52px;
  max-width: calc(1080px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.navbar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.navbar-actions .icon-btn { height: 34px; }
.navbar-actions .lang-btn { font-size: 14px; }
/* nút sáng/tối: chế độ sáng hiện mặt trăng (bấm để sang tối), chế độ tối hiện mặt trời */
.navbar-actions .theme-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; } /* hình tròn: rộng = cao */
.theme-btn svg { width: 19px; height: 19px; font-size: 17px; }
.theme-btn .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
:root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
}
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; color: var(--label); text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand .app-icon { width: 30px; height: 30px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--fill);
  color: var(--label);
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(0.9); }
.lang-btn { width: auto; padding: 0 12px 0 10px; gap: 6px; border-radius: var(--r-control); font-size: 15px; font-weight: 600; }

/* ---------- khung nội dung ---------- */
main { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page-head { padding: 36px 4px 8px; }
.large-title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.page-sub { margin: 8px 0 0; color: var(--label-2); font-size: 17px; text-wrap: pretty; }
.updated { margin: 6px 0 0; color: var(--label-3); font-size: 15px; }

/* ---------- trang chủ: hero ---------- */
.hero { text-align: center; padding: 56px 0 8px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 54px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 auto;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 .accent-line { color: var(--tint); }
.hero p { margin: 16px auto 0; max-width: 30em; color: var(--label-2); font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.hero-meta { margin-top: 14px; font-size: 15px; color: var(--label-3); min-height: 20px; }

/* ---------- nút ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  min-width: 260px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-control);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .2s, opacity .2s;
  -webkit-user-select: none; user-select: none;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:active { transform: scale(0.96); }
.btn-prominent {
  color: #fff;
  background: var(--tint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 10px 24px rgba(0, 100, 224, 0.3);
}
.btn-prominent:hover { background: #0057c4; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn-prominent:hover { background: #2490ff; }
}
:root[data-theme="dark"] .btn-prominent:hover { background: #2490ff; }
.btn-glass { color: var(--label); }
.btn.is-loading, .btn.is-disabled { pointer-events: none; opacity: 0.6; }
.btn .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-icon { display: none; }
.btn.is-done { background: var(--green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 24px rgba(31, 138, 60, 0.25); }
.btn-block { width: 100%; min-width: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- danh sách inset grouped ---------- */
.section { margin-top: 36px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 6px 10px; }
.section-head h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.section-head .aside { font-size: 15px; color: var(--label-2); white-space: nowrap; }
.section-foot { margin: 10px 6px 0; font-size: 13px; line-height: 18px; color: var(--label-2); }

.group { background: var(--cell); border-radius: var(--r-group); overflow: hidden; }
.row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 56px;
  padding: 12px 18px;
  color: var(--label);
  text-decoration: none !important;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  left: var(--sep-inset, 18px);
  border-top: 0.5px solid var(--separator);
}
a.row { transition: background-color .15s; }
a.row:active, a.row:hover { background: var(--cell-pressed); }
.row-icon {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.row-icon svg { width: 19px; height: 19px; font-size: 15.6px; } /* font-size: cỡ glyph SF (em) */
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 17px; line-height: 22px; }
.row-sub { display: block; font-size: 15px; line-height: 20px; color: var(--label-2); margin-top: 2px; }
.row-value { color: var(--label-2); font-size: 17px; text-align: right; }
.chevron { width: 9px; height: 15px; flex: none; color: var(--label-3); }
.with-icons { --sep-inset: 64px; }

/* nhật ký phiên bản */
.version-row { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.version-tag {
  flex: none;
  min-width: 64px;
  padding: 3px 10px;
  border-radius: var(--r-control);
  background: var(--fill);
  font-size: 15px; font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.version-row.is-latest .version-tag { background: var(--tint); color: #fff; }
.version-info { white-space: pre-line; font-size: 16px; line-height: 22px; color: var(--label); padding-top: 2px; }
.list-more {
  display: block; width: 100%;
  min-height: 52px;
  border: 0; background: transparent;
  color: var(--tint);
  font-size: 17px;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
  position: relative;
}
.list-more::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: 0.5px solid var(--separator); }
.list-more:active { background: var(--cell-pressed); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.status-dot.is-error::before { background: var(--red); }

/* ---------- bài viết ---------- */
.card { background: var(--cell); border-radius: var(--r-group); padding: 22px; }
.card + .card { margin-top: 16px; }
.card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.015em; }
.card p, .card li { font-size: 17px; line-height: 1.5; color: var(--label); }
.card p { margin: 0; }
.card p + p { margin-top: 12px; }
.card ul { margin: 0; padding-left: 1.2em; }
.card li + li { margin-top: 8px; }
.prose-group .card { border-radius: 0; background: transparent; padding: 20px 22px; }
.prose-group .card + .card { margin-top: 0; border-top: 0.5px solid var(--separator); }
.media { overflow: hidden; border-radius: var(--r-group); background: var(--cell); }
.media img { width: 100%; height: auto; }
.media + .card, .card + .media { margin-top: 16px; }

.steps { display: grid; gap: 16px; margin-top: 16px; }
.steps > .section { margin-top: 0; } /* khoảng cách giữa các bước chỉ lấy theo gap của lưới */
.step { background: var(--cell); border-radius: var(--r-group); overflow: hidden; }
.step img { width: 100%; height: auto; }
.step-body { padding: 18px 22px 22px; display: grid; grid-template-columns: 32px 1fr; gap: 4px 14px; }
.step-num {
  grid-row: 1 / span 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tint); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.step-body h2 { margin: 3px 0 2px; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.015em; }
.step-body p { margin: 0; font-size: 17px; line-height: 1.5; }
.step-body p + p { margin-top: 10px; }

.method-list { display: grid; gap: 16px; margin-top: 16px; }

/* bỏ giới hạn / đồng ý điều khoản */
.ip-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--label); }
.status-line { font-size: 16px; line-height: 22px; color: var(--label); }
.status-line.success { color: var(--green); }
.status-line.error { color: var(--red); }
.usage-meter { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; margin-top: 8px; }
.usage-meter span { display: block; height: 100%; background: var(--tint); border-radius: 3px; transition: width .4s var(--ease); }
.action-block { margin-top: 20px; }
.agree-status { min-height: 22px; margin: 12px 4px 0; font-size: 15px; color: var(--label-2); text-align: center; }
.agree-status.is-ok { color: var(--green); }
.agree-status.is-error { color: var(--red); }

/* ---------- chân trang ---------- */
.site-footer { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 56px auto 0; padding: 0 var(--gutter); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 6px; }
.footer-links a { color: var(--label-2); font-size: 15px; line-height: 32px; }
.footer-links a[aria-current="page"] { color: var(--label); font-weight: 600; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 18px 6px 0; border-top: 0.5px solid var(--separator); color: var(--label-2); font-size: 13px; flex-wrap: wrap; }
.footer-meta .lang-btn { background: var(--fill); }

/* ---------- tab bar: điện thoại thì nằm sát đáy màn hình, trải hết chiều ngang như tab bar iOS ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px max(6px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  /* dock: bo tròn hai góc trên, viền mảnh + bóng nhẹ hắt lên trên.
     Kính mờ nằm ở ::before (không đặt backdrop-filter lên chính phần tử fixed: Safari iOS 26 lấy màu
     thanh công cụ từ phần tử fixed ở đáy và bỏ qua nếu nó có kính mờ). ::after phủ màu theo gradient:
     đặc ở mép dưới (liền với thanh công cụ Safari), nhạt dần lên trên (độ trong theo thanh trượt). */
  border-radius: 26px 26px 0 0;
  background: none;
  box-shadow: var(--dock-shadow);
}
.tabbar::before, .tabbar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.tabbar::before { -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
/* Safari iOS 26: lúc thanh địa chỉ đang mở, dock bị đặt NỔI phía trên thanh đó và lộ nội dung bên dưới.
   Kéo nền màu đặc xuống thêm --dock-ext để lấp khoảng đó; khi dock đã sát đáy thì phần này nằm ngoài màn hình.
   (Phần kéo dài ở ::after, không ở ::before có backdrop-filter, để Safari vẫn lấy màu thanh công cụ từ nó.) */
.tabbar { --dock-ext: 160px; }
.tabbar::after {
  bottom: calc(-1 * var(--dock-ext));
  background:
    linear-gradient(rgb(var(--chrome-rgb)), rgb(var(--chrome-rgb))) bottom / 100% var(--dock-ext) no-repeat,
    linear-gradient(to top, rgb(var(--chrome-rgb)) 0%, rgb(var(--chrome-rgb)) 0%, rgba(var(--chrome-rgb), calc(var(--glass-alpha) * 0.5)) 100%) top / 100% calc(100% - var(--dock-ext)) no-repeat;
}
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; /* icon cao thấp khác nhau: căn đáy để nhãn thẳng hàng */
  min-height: 54px;
  padding: 6px 2px 4px;
  color: var(--label-2);
  font-size: 11px; font-weight: 500; line-height: 13px; letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  transition: color .2s, transform .3s var(--ease);
}
.tab svg { width: 25px; height: 25px; font-size: 23px; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--tint); }
/* tab đang mở dùng icon đặc, giống SF Symbols ".fill" */
.tab[aria-current="page"] svg :is(path, rect) { fill: currentColor; }
.tab:active { transform: scale(0.9); }
@media (min-width: 600px) and (max-width: 979px) {
  .tabbar { grid-template-columns: repeat(4, minmax(0, 176px)); justify-content: center; }
  .tab { flex-direction: row; justify-content: center; gap: 8px; min-height: 52px; padding-bottom: 2px; font-size: 13px; line-height: 16px; }
  .tab svg { width: 22px; height: 22px; font-size: 20px; }
}

/* ---------- bảng Hiển thị (sheet) ---------- */
.sheet {
  border: 0;
  padding: 0;
  margin: auto auto 0;
  width: min(100vw, 560px);
  max-height: min(86vh, 760px);
  border-radius: 34px 34px 0 0;
  color: var(--label);
  background: rgba(var(--glass-rgb), max(var(--glass-alpha), 0.82));
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -10px 40px rgba(0, 0, 0, 0.18);
  overflow: auto;
  overscroll-behavior: contain;
}
@media (min-width: 600px) { .sheet { margin: auto; border-radius: 34px; } }
.sheet::backdrop { background: rgba(0, 0, 0, 0.28); }
.sheet[open] { animation: sheet-in .45s var(--ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--label-3); opacity: 0.5; margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px 22px; }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-body { padding: 8px 16px 24px; }
.sheet .group { background: rgba(var(--glass-rgb), 0.7); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sheet .group { background: rgba(44, 44, 46, 0.8); }
}
:root[data-theme="dark"] .sheet .group { background: rgba(44, 44, 46, 0.8); }
.sheet .section-head { padding-top: 16px; }
.sheet .section-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--label-2); }
.lang-option { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.lang-option .check { width: 18px; height: 18px; color: var(--tint); visibility: hidden; flex: none; }
.lang-option[aria-checked="true"] .check { visibility: visible; }
.lang-option:active { background: var(--cell-pressed); }
.slider-row { gap: 12px; }
.slider-row svg { width: 20px; height: 20px; color: var(--label-2); flex: none; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 28px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--tint) var(--fill-pct, 50%), var(--fill) var(--fill-pct, 50%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--fill); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); }
.glass-preview { margin: 12px 0 2px; height: 76px; border-radius: 22px; position: relative; overflow: hidden; background:
  radial-gradient(60% 90% at 20% 30%, rgba(64, 156, 255, 0.85), transparent 70%),
  radial-gradient(50% 90% at 80% 60%, rgba(255, 159, 10, 0.75), transparent 70%),
  radial-gradient(40% 80% at 55% 20%, rgba(52, 199, 190, 0.8), transparent 70%), var(--cell); }
.glass-preview .glass { position: absolute; inset: 14px 18px; border-radius: var(--r-control); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 0.5px var(--glass-edge); }

/* ---------- vào trang ---------- */
.reveal { animation: rise .7s var(--ease) both; }
.reveal:nth-child(2) { animation-delay: .06s; }
.reveal:nth-child(3) { animation-delay: .12s; }
.reveal:nth-child(4) { animation-delay: .18s; }
.reveal:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* chờ bản dịch để không nháy chữ tiếng Anh */
html.i18n-pending [data-i18n], html.i18n-pending [data-i18n-html] { visibility: hidden; }

[dir="rtl"] .chevron { transform: scaleX(-1); }
[dir="rtl"] .lang-option, [dir="rtl"] .list-more { text-align: right; }

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .btn { min-width: 0; width: 100%; }
  .hero-actions { align-items: stretch; }
  .card { padding: 20px 18px; }
  .row { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-alpha: 0.96 !important; }
}

/* ---------- trang chủ rộng: chữ bên trái, khung iPhone bên phải ---------- */
main > :not(.hero) { max-width: var(--column); margin-left: auto; margin-right: auto; }
main { max-width: none; }
.hero { max-width: 1080px; margin: 0 auto; display: grid; gap: 40px; align-items: center; justify-items: center; }
@media (min-width: 980px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; text-align: left; padding-top: 64px; }
  .hero-copy { justify-self: start; }
  .hero h1, .hero p { margin-left: 0; }
  .hero-actions { align-items: flex-start; }
}

/* ---------- khung iPhone minh hoạ ----------
   Một vòng 9 giây: video đang phát → chạm Chia sẻ → share sheet hiện lên → chạm AIO Downloader
   → sheet đóng, Dynamic Island mở rộng với vòng tải → dấu ✓ "Đã lưu video vào Ảnh" → thu lại. */
.device {
  --t: 9s;
  position: relative;
  flex: none;
  width: 300px;
  aspect-ratio: 300 / 622;
  padding: 3px;
  border-radius: 50px;
  direction: ltr;
  text-align: left;
  background: linear-gradient(140deg, #a3a5aa 0%, #45474c 13%, #75777c 46%, #2e3034 82%, #9a9ca1 100%);
  box-shadow: 0 60px 90px -34px rgba(0, 40, 100, 0.4), 0 20px 40px -10px rgba(0, 0, 0, 0.22);
}
.device-btn { position: absolute; left: -2px; width: 3px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #3a3c40, #8c8e93); }
.device-btn.b1 { top: 112px; height: 26px; }
.device-btn.b2 { top: 156px; height: 46px; }
.device-btn.b3 { top: 212px; height: 46px; }
.device-btn.b4 { left: auto; right: -2px; top: 178px; height: 74px; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #3a3c40, #8c8e93); }
.device-body { height: 100%; padding: 8px; border-radius: 47px; background: #050505; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.device-screen {
  position: relative;
  height: 100%;
  border-radius: 39px;
  overflow: hidden;
  isolation: isolate;
  background: #16132e;
  color: #fff;
  font-family: var(--font);
  line-height: 1.25;
  letter-spacing: -0.01em;
  --demo-press: rgba(0, 0, 0, 0.09);        /* nền dòng khi chạm */
  --demo-home-sheet: rgba(0, 0, 0, 0.78);   /* thanh home khi share sheet đang mở */
}
.device-screen svg { display: block; max-width: none; }

/* video */
.demo-scene { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 60% 62%; animation: demo-kenburns 18s ease-in-out infinite alternate; }
.demo-media { object-fit: cover; }
video.demo-scene { animation: none; } /* video thật đã tự chuyển động */
.demo-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.32), transparent 17%, transparent 66%, rgba(0, 0, 0, 0.5)); }
.demo-thumb.demo-media { object-position: 50% 15%; } /* ảnh nhỏ trong share sheet: lấy phần mặt */
.demo-status { position: absolute; top: 14px; left: 28px; right: 22px; z-index: 4; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.demo-status-icons { display: flex; align-items: center; gap: 5px; }
.demo-status-icons .st-signal { width: 16px; height: 10px; }
.demo-status-icons .st-wifi { width: 14px; height: 10px; }
.demo-status-icons .st-battery { width: 23px; height: 11px; }
.demo-feed { position: absolute; top: 47px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.demo-feed span { opacity: 0.62; }
.demo-feed .is-on { position: relative; opacity: 1; }
.demo-feed .is-on::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 18px; height: 2.5px; margin-left: -9px; border-radius: 2px; background: #fff; }
.demo-rail { position: absolute; right: 8px; bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.demo-avatar { position: relative; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; border: 1.5px solid #fff; background: radial-gradient(circle at 35% 30%, #ffd59a, #e2665c 55%, #6a3fa2); }
.demo-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.demo-avatar::after { content: "+"; position: absolute; left: 50%; bottom: -9px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 14px; font-weight: 700; line-height: 16px; text-align: center; }
.demo-rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.demo-rail-item svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.demo-rail-item b { font-weight: 600; }
.demo-share svg { animation: demo-share-press var(--t) var(--ease) infinite; }
.demo-caption { position: absolute; left: 12px; right: 66px; bottom: 34px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.demo-caption strong { font-size: 13.5px; font-weight: 600; }
.demo-sound { font-size: 11px; opacity: 0.92; }
.demo-progress { position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: rgba(255, 255, 255, 0.22); }
.demo-progress i { display: block; height: 100%; width: 0; background: rgba(255, 255, 255, 0.85); animation: demo-progress 18s linear infinite; }
.demo-home { position: absolute; left: 50%; bottom: 7px; z-index: 6; width: 104px; height: 4px; margin-left: -52px; border-radius: 3px; background: #fff; animation: demo-home var(--t) var(--ease) infinite; }
.demo-dim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.3); opacity: 0; animation: demo-dim var(--t) var(--ease) infinite; }

/* chạm (giống chấm chạm khi quay màn hình) */
.demo-touch { position: absolute; left: 50%; top: 15px; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; opacity: 0; pointer-events: none; }
.demo-touch.t1 { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); animation: demo-touch-1 var(--t) linear infinite; }
.demo-touch.t2 { left: 128px; top: 50%; background: rgba(0, 0, 0, 0.16); animation: demo-touch-2 var(--t) linear infinite; }

/* share sheet kiểu iOS 26: nổi, bo tròn, kính sáng */
.demo-sheet {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3;
  padding: 14px 0 10px;
  border-radius: 26px 26px 33px 33px; /* góc dưới đồng tâm: 39 (màn hình) − 6 */
  color: #000;
  background: rgba(246, 246, 248, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(110%);
  animation: demo-sheet var(--t) var(--ease) infinite;
}
.demo-sheet-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px 18px; }
.demo-thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.demo-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.demo-head-text strong { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.demo-head-text span { font-size: 11px; color: rgba(60, 60, 67, 0.62); }
.demo-close { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(120, 120, 128, 0.16); color: rgba(60, 60, 67, 0.72); }
.demo-close svg { width: 10px; height: 10px; }
.demo-apps { position: relative; display: flex; gap: 6px; padding: 12px 0 12px 14px; overflow: hidden; }
.demo-apps::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.5px solid rgba(60, 60, 67, 0.2); }
.demo-app { flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9.5px; color: rgba(0, 0, 0, 0.82); }
.demo-app > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-app-icon { width: 46px; height: 46px; }
.demo-actions { margin: 0 10px; border-radius: 23px; background: #fff; overflow: hidden; } /* 33 − 10 */
.demo-action { position: relative; display: flex; align-items: center; gap: 12px; height: 41px; padding: 0 18px; font-size: 13.5px; }
.demo-action + .demo-action::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; border-top: 0.5px solid rgba(60, 60, 67, 0.2); }
.demo-action svg { flex: none; width: 20px; height: 20px; color: rgba(0, 0, 0, 0.85); }
.demo-action.is-target { animation: demo-press var(--t) linear infinite; }

/* Dynamic Island: thu gọn → mở rộng khi phím tắt chạy */
.demo-island {
  position: absolute; top: 10px; left: 50%; z-index: 5;
  width: 88px; height: 26px; margin-left: -44px;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
  animation: demo-island var(--t) var(--ease) infinite;
}
.demo-island-body { display: flex; align-items: center; gap: 10px; width: 252px; height: 62px; padding: 0 14px 0 13px; opacity: 0; animation: demo-island-body var(--t) linear infinite; }
.demo-island-icon { flex: none; width: 36px; height: 36px; }
.demo-island-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.demo-island-text strong { font-size: 12.5px; font-weight: 600; }
.demo-island-text span { grid-area: 2 / 1; overflow: hidden; font-size: 11px; color: rgba(235, 235, 245, 0.62); white-space: nowrap; text-overflow: ellipsis; }
.demo-island-text .demo-st-loading { animation: demo-loading var(--t) linear infinite; }
.demo-island-text .demo-st-saved { color: #30d158; opacity: 0; animation: demo-saved var(--t) linear infinite; }
.demo-ring { position: relative; flex: none; width: 28px; height: 28px; }
.demo-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.demo-ring circle { fill: none; stroke-width: 3; }
.demo-ring .track { stroke: rgba(255, 255, 255, 0.18); }
.demo-ring .bar { stroke: #0a84ff; stroke-linecap: round; stroke-dasharray: 63; stroke-dashoffset: 63; animation: demo-ring var(--t) linear infinite; }
.demo-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #30d158; opacity: 0; transform: scale(0.4); animation: demo-done var(--t) var(--ease) infinite; }
.demo-done svg { width: 16px; height: 16px; }

@keyframes demo-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes demo-progress { from { width: 0; } to { width: 100%; } }
@keyframes demo-touch-1 {
  0%, 6% { opacity: 0; transform: scale(0.5); }
  8% { opacity: 1; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes demo-share-press {
  0%, 7% { transform: scale(1); }
  9% { transform: scale(0.84); }
  12%, 100% { transform: scale(1); }
}
@keyframes demo-dim {
  0%, 11% { opacity: 0; }
  18%, 44% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes demo-sheet {
  0%, 11% { transform: translateY(110%); }
  19%, 44% { transform: translateY(0); }
  51%, 100% { transform: translateY(110%); }
}
@keyframes demo-home {
  0%, 13% { background: #fff; }
  18%, 45% { background: var(--demo-home-sheet); }
  50%, 100% { background: #fff; }
}
@keyframes demo-touch-2 {
  0%, 34% { opacity: 0; transform: scale(0.5); }
  36% { opacity: 1; transform: scale(1); }
  41%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes demo-press {
  0%, 35% { background: transparent; }
  37%, 43% { background: var(--demo-press); }
  46%, 100% { background: transparent; }
}
@keyframes demo-island {
  0%, 47% { width: 88px; height: 26px; margin-left: -44px; border-radius: 14px; }
  53%, 82% { width: 252px; height: 62px; margin-left: -126px; border-radius: 31px; }
  88%, 100% { width: 88px; height: 26px; margin-left: -44px; border-radius: 14px; }
}
@keyframes demo-island-body {
  0%, 51% { opacity: 0; }
  55%, 79% { opacity: 1; }
  83%, 100% { opacity: 0; }
}
@keyframes demo-ring {
  0%, 55% { stroke-dashoffset: 63; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes demo-done {
  0%, 70% { opacity: 0; transform: scale(0.4); }
  74%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes demo-loading {
  0%, 70% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes demo-saved {
  0%, 70% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
/* share sheet tối như iOS khi trang ở chế độ tối */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .device-screen { --demo-press: rgba(255, 255, 255, 0.1); --demo-home-sheet: rgba(255, 255, 255, 0.85); }
:root:not([data-theme="light"]) .demo-sheet { color: #fff; background: rgba(30, 30, 32, 0.94); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
:root:not([data-theme="light"]) .demo-head-text span { color: rgba(235, 235, 245, 0.6); }
:root:not([data-theme="light"]) .demo-close { background: rgba(118, 118, 128, 0.24); color: rgba(235, 235, 245, 0.7); }
:root:not([data-theme="light"]) .demo-apps::before { border-top-color: rgba(84, 84, 88, 0.65); }
:root:not([data-theme="light"]) .demo-app { color: rgba(255, 255, 255, 0.85); }
:root:not([data-theme="light"]) .demo-actions { background: #2c2c2e; }
:root:not([data-theme="light"]) .demo-action + .demo-action::before { border-top-color: rgba(84, 84, 88, 0.65); }
:root:not([data-theme="light"]) .demo-action svg { color: #fff; }
:root:not([data-theme="light"]) .demo-touch.t2 { background: rgba(255, 255, 255, 0.22); }
}
:root[data-theme="dark"] .device-screen { --demo-press: rgba(255, 255, 255, 0.1); --demo-home-sheet: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .demo-sheet { color: #fff; background: rgba(30, 30, 32, 0.94); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .demo-head-text span { color: rgba(235, 235, 245, 0.6); }
:root[data-theme="dark"] .demo-close { background: rgba(118, 118, 128, 0.24); color: rgba(235, 235, 245, 0.7); }
:root[data-theme="dark"] .demo-apps::before { border-top-color: rgba(84, 84, 88, 0.65); }
:root[data-theme="dark"] .demo-app { color: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .demo-actions { background: #2c2c2e; }
:root[data-theme="dark"] .demo-action + .demo-action::before { border-top-color: rgba(84, 84, 88, 0.65); }
:root[data-theme="dark"] .demo-action svg { color: #fff; }
:root[data-theme="dark"] .demo-touch.t2 { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 979px) { .device { zoom: 0.9; } }
/* giảm chuyển động: đứng yên ở khung share sheet đang mở */
@media (prefers-reduced-motion: reduce) {
  .device * { animation: none !important; }
  .demo-sheet { transform: none; }
  .demo-dim { opacity: 1; }
  .demo-home { background: var(--demo-home-sheet); }
}

/* các mục hiện dần khi cuộn tới */
html.can-reveal .section:not(.in) { opacity: 0; transform: translateY(18px); }
html.can-reveal .section { transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ---------- màn hình lớn (kiểu iPadOS 27): khung 1080, tab bar lên thanh trên ---------- */
.home-grid { max-width: 1080px !important; }
.site-footer { max-width: calc(1080px + 2 * var(--gutter)); }
@media (min-width: 980px) {
  body { padding-bottom: 48px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .hero h1 { font-size: 64px; }
  .device { justify-self: end; margin-right: 24px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0 32px; align-items: start; }
}

/* tiêu đề lớn tự thu nhỏ trên điện thoại; đoạn mô tả giữ độ dài dòng dễ đọc */
.large-title { font-size: clamp(28px, 7.4vw, 34px); line-height: 1.2; }
.page-sub, .section-foot, .card p, .card li, .step-body p { max-width: 68ch; }
.section-foot { font-size: 15px; line-height: 20px; }
.sheet:focus, .sheet:focus-visible { outline: none; }

/* màu nền icon theo bảng màu hệ thống iOS, có lớp sáng nhẹ phía trên như icon Cài đặt */
.ios-orange { background: linear-gradient(180deg, #ffad33, #ff9500); }
.ios-gray   { background: linear-gradient(180deg, #a1a1a6, #8e8e93); }
.ios-blue   { background: linear-gradient(180deg, #3395ff, #007aff); }
.ios-green  { background: linear-gradient(180deg, #5ad47a, #34c759); }
.ios-yellow { background: linear-gradient(180deg, #ffd633, #ffcc00); }
.ios-red    { background: linear-gradient(180deg, #ff6259, #ff3b30); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ios-orange { background: linear-gradient(180deg, #ffb340, #ff9f0a); }
:root:not([data-theme="light"]) .ios-gray { background: linear-gradient(180deg, #a1a1a6, #8e8e93); }
:root:not([data-theme="light"]) .ios-blue { background: linear-gradient(180deg, #3d9bff, #0a84ff); }
:root:not([data-theme="light"]) .ios-green { background: linear-gradient(180deg, #5cdc7d, #30d158); }
:root:not([data-theme="light"]) .ios-yellow { background: linear-gradient(180deg, #ffdb3d, #ffd60a); }
:root:not([data-theme="light"]) .ios-red { background: linear-gradient(180deg, #ff6b63, #ff453a); }
}
:root[data-theme="dark"] .ios-orange { background: linear-gradient(180deg, #ffb340, #ff9f0a); }
:root[data-theme="dark"] .ios-gray { background: linear-gradient(180deg, #a1a1a6, #8e8e93); }
:root[data-theme="dark"] .ios-blue { background: linear-gradient(180deg, #3d9bff, #0a84ff); }
:root[data-theme="dark"] .ios-green { background: linear-gradient(180deg, #5cdc7d, #30d158); }
:root[data-theme="dark"] .ios-yellow { background: linear-gradient(180deg, #ffdb3d, #ffd60a); }
:root[data-theme="dark"] .ios-red { background: linear-gradient(180deg, #ff6b63, #ff453a); }
.row-icon { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }

/* màn hình lớn: tab nằm giữa thanh trên dạng chữ, tab đang mở có vạch màu sát đường kẻ đáy */
@media (min-width: 980px) {
  .navbar-inner { height: 60px; }
  .navbar-actions .icon-btn { height: 36px; }
  .navbar-actions .theme-btn { width: 36px; height: 36px; }
  .brand .app-icon { width: 32px; height: 32px; }
  .tabbar {
    position: static;
    display: flex;
    gap: 2px;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .tabbar::before, .tabbar::after { display: none; }
  .tab { justify-content: center; height: 100%; min-height: 0; padding: 0 16px; font-size: 15px; line-height: 20px; color: var(--label-2); }
  .tab svg { display: none; }
  .tab:hover { color: var(--label); }
  .tab[aria-current="page"] { color: var(--label); font-weight: 600; }
  .tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--tint);
  }
  .tab:active { transform: none; opacity: 0.6; }
}

/* ---------- nhật ký phiên bản: phần còn lại ẩn đến khi bấm "Xem tất cả" ---------- */
.versions:not(.show-all) .is-extra { display: none; }

/* ---------- trang nền tảng hỗ trợ ---------- */
.ios-teal { background: linear-gradient(180deg, #4fc3d6, #30b0c7); }

/* ---------- trang hướng dẫn: cài app + thêm phím tắt ---------- */
.section-lead { margin: 0 6px 12px; font-size: 17px; line-height: 22px; color: var(--label-2); }
.install-add { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* icon thật của app (ảnh từ App Store, vuông) → bo góc như icon iOS, viền mảnh để icon nền trắng không lẫn vào ô */
.row-icon.app-icon-img { object-fit: cover; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ios-teal { background: linear-gradient(180deg, #5fd0e0, #40c8e0); }
}
:root[data-theme="dark"] .ios-teal { background: linear-gradient(180deg, #5fd0e0, #40c8e0); }
.status-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-group);
  background: var(--cell);
}
.status-orb { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--label-3); box-shadow: 0 0 0 6px var(--fill); }
.status-orb.is-ok { background: #34c759; box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.18); }
.status-orb.is-degraded { background: #ff9500; box-shadow: 0 0 0 6px rgba(255, 149, 0, 0.2); }
.status-orb.is-down { background: #ff3b30; box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18); }
.status-title { font-family: var(--font-display); font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.015em; }
.status-sub { margin-top: 2px; font-size: 15px; color: var(--label-2); }

.platform-row { align-items: flex-start; padding-top: 16px; padding-bottom: 16px; --sep-inset: 64px; }
.platform-row + .platform-row::before { left: 64px; }
.brand-tile { color: #fff; font-weight: 700; font-size: 16px; font-family: var(--font-display); margin-top: 2px; }
.platform-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.state-pill { flex: none; padding: 3px 10px; border-radius: var(--r-control); font-size: 13px; font-weight: 600; background: var(--fill); color: var(--label-2); }
.state-pill.state-ok { background: rgba(52, 199, 89, 0.16); color: #1a7f37; }
.state-pill.state-degraded { background: rgba(255, 149, 0, 0.18); color: #a35200; }
.state-pill.state-down { background: rgba(255, 59, 48, 0.16); color: #c4151c; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .state-pill.state-ok { color: #30d158; }
:root:not([data-theme="light"]) .state-pill.state-degraded { color: #ffb340; }
:root:not([data-theme="light"]) .state-pill.state-down { color: #ff6961; }
}
:root[data-theme="dark"] .state-pill.state-ok { color: #30d158; }
:root[data-theme="dark"] .state-pill.state-degraded { color: #ffb340; }
:root[data-theme="dark"] .state-pill.state-down { color: #ff6961; }
.uptime { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; margin-top: 12px; height: 26px; }
.uptime i { display: block; border-radius: 3px; background: var(--fill); }
.uptime i.u-ok, .status-legend i.u-ok { background: #34c759; }
.uptime i.u-degraded, .status-legend i.u-degraded { background: #ff9500; }
.uptime i.u-down, .status-legend i.u-down { background: #ff3b30; }
.status-legend i.u-none { background: var(--fill); }
.uptime-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--label-2); }
.uptime-scale .rate { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.status-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 6px 0; font-size: 13px; color: var(--label-2); }
.status-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* các trang con: tiêu đề và nội dung đầu tiên vào trang giống trang chủ */
.page-head .reveal:nth-child(1) { animation-delay: 0s; }
.page-head .reveal:nth-child(2) { animation-delay: .07s; }
.page-head .reveal:nth-child(3) { animation-delay: .14s; }
.method-list .reveal:nth-child(1), .media.reveal { animation-delay: .16s; }
.method-list .reveal:nth-child(2), .card.reveal, .prose-group.reveal { animation-delay: .24s; }

/* trạng thái nền tảng — gọn hơn: không icon, chấm màu thay nhãn tô nền, dải giờ mảnh */
.platform-row { --sep-inset: 18px; padding-top: 14px; padding-bottom: 16px; }
.platform-row + .platform-row::before { left: 18px; }
.platform-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.platform-line .row-title { font-weight: 600; }
.platform-meta { margin-top: 2px; font-size: 14px; line-height: 19px; color: var(--label-2); }
.platform-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-meta .rate { flex: none; font-variant-numeric: tabular-nums; color: var(--label-2); }
.state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--label-2); }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--label-3); }
.state-ok::before { background: #34c759; }
.state-degraded::before { background: #ff9500; }
.state-down::before { background: #ff3b30; }
.state-maintenance::before { background: #ff9500; }
.state-degraded { color: #a35200; }
.state-down { color: #c4151c; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .state-degraded { color: #ffb340; }
:root:not([data-theme="light"]) .state-down { color: #ff6961; }
}
:root[data-theme="dark"] .state-degraded { color: #ffb340; }
:root[data-theme="dark"] .state-down { color: #ff6961; }
.uptime { height: 14px; gap: 2px; margin-top: 10px; }
.uptime i { border-radius: 2px; }
.uptime i.u-ok { background: rgba(52, 199, 89, 0.75); }
.uptime i.u-degraded { background: rgba(255, 149, 0, 0.85); }
.uptime i.u-down { background: rgba(255, 59, 48, 0.85); }
.status-legend i.u-ok { background: rgba(52, 199, 89, 0.75); }
.legend-scale { color: var(--label-2); margin-right: 4px; }