/* COPOS — kiểu chung cho các trang phụ (hướng dẫn, có gì mới, hỗ trợ) */

:root{
  /* Xanh, không phải nâu. Nâu là màu của quán cà phê, nhưng đây là phần mềm
     giữ tiền và giữ sổ của người ta. Xanh lá và hổ phách giữ nguyên vì chúng
     mang nghĩa riêng — đổi đi là mất tín hiệu «xong» và «coi chừng». */
  --bg:#f7fafd; --surface:#ffffff; --text:#0f2740; --muted:#5b7691;
  --brand:#1668c9; --on-brand:#ffffff; --brand-soft:#e4eefb; --line:#d5e3f0;
  --warn:#8a5a00; --warn-soft:#fdf3e0; --ok:#1f6b46; --ok-soft:#e7f4ec;
  --bad:#c0362a; --bad-soft:#fdf2f0;
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1622; --surface:#132234; --text:#e7f0fa; --muted:#93aec8;
         --brand:#6fb0f2; --on-brand:#08192b; --brand-soft:#16293f; --line:#22364c;
         --warn:#e0b070; --warn-soft:#2b2114; --ok:#7fc9a1; --ok-soft:#16261d;
         --bad:#e79b8a; --bad-soft:#2c1a16; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.7;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--brand)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  padding:11px 20px;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;transition:.15s;cursor:pointer}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-sm{padding:8px 15px;font-size:14px}

/* ------------------------------ Thanh điều hướng ---------------------------- */

header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px)}
.nav{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:14px;
  min-height:62px;padding:0 16px}
.nav .brand{display:flex;align-items:center;flex:0 0 auto}
.nav img{height:34px;display:block;width:auto}
.nav .sp{flex:1}

.navlinks{display:flex;align-items:center;gap:6px;margin-left:auto}
.navlinks a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
  padding:8px 10px;border-radius:9px;white-space:nowrap}
.navlinks a:hover{color:var(--text);background:var(--brand-soft)}
.navlinks a.cta{background:var(--brand);color:var(--on-brand);padding:9px 16px;
  border-radius:10px;font-weight:600;margin-left:6px}
.navlinks a.cta:hover{filter:brightness(1.08);background:var(--brand)}

/* Nút ba gạch, chỉ hiện trên màn hẹp */
.navbtn{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);border-radius:11px;cursor:pointer;
  align-items:center;justify-content:center;padding:0}
.navbtn svg{width:20px;height:20px}
.navbtn .close{display:none}
.navbtn[aria-expanded="true"] .open{display:none}
.navbtn[aria-expanded="true"] .close{display:block}

@media (max-width:860px){
  .nav{min-height:58px}
  .nav .sp{display:none}
  .navbtn{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px 12px 14px;box-shadow:0 18px 30px -22px rgba(0,0,0,.5);
    display:none}
  .navlinks.open{display:flex}
  .navlinks a{font-size:16px;padding:12px 14px}
  .navlinks a.cta{margin:6px 0 0;text-align:center;padding:13px 16px;font-size:16px}
}

/* Khung chung cho mọi trang tĩnh.
   `.page` — trang chữ (Hướng dẫn, Có gì mới, Hỗ trợ, Thương hiệu, Trạng thái).
   `.wrap` — dải nội dung bên trong một <section> của trang chủ. */
.page{max-width:1000px;margin:0 auto;padding:28px 20px 80px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media(max-width:620px){ .wrap{padding:0 16px} }
h1{font-size:34px;letter-spacing:-.8px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 30px;font-size:16px;max-width:680px}
h2{font-size:23px;letter-spacing:-.4px;margin:34px 0 10px}
h3{font-size:16px;margin:20px 0 6px}
p,li{font-size:15px}
ul,ol{padding-left:22px}
li{margin-bottom:5px}
code{background:var(--brand-soft);color:var(--brand);padding:2px 6px;border-radius:5px;font-size:13px}

.rel{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:20px 24px;margin-bottom:20px}
.relhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.relhead .ver{font-size:24px;font-weight:800;letter-spacing:-.5px}
.relhead .date{color:var(--muted);font-size:14px}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--brand-soft);color:var(--brand);border-radius:6px;padding:3px 9px}
.tag.now{background:var(--ok-soft);color:var(--ok)}
/* Ba loại thay đổi, ba màu. Người đọc lướt cột huy hiệu là biết bản này thêm
   được gì, sửa cái gì, và bỏ mất cái gì — chuyện cuối mới là chuyện họ cần
   biết nhất mà các trang cập nhật hay giấu đi. */
.tag.them{background:var(--ok-soft);color:var(--ok)}
.tag.sua{background:var(--warn-soft);color:var(--warn)}
.tag.bo{background:var(--bad-soft);color:var(--bad)}
.rel h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rel h3 .tag{flex:0 0 auto}

/* Dải ảnh của từng bản: cuộn ngang, kéo được bằng chuột. Ảnh minh họa mỗi cái
   một khổ nên đặt trong khung cố định rồi `contain` cho vừa, chứ cắt theo
   khung thì cái nào cũng mất mất một góc. */
.rel-anh{display:flex;gap:12px;overflow-x:auto;margin:14px 0 20px;padding-bottom:8px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rel-anh::-webkit-scrollbar{display:none}
.rel-anh figure{flex:0 0 auto;width:288px;margin:0;scroll-snap-align:start}
/* `height:auto` là bắt buộc, không phải cho đẹp. Thẻ img khai `height="840"`
   thì con số đó là gợi ý trình bày của trình duyệt, và nó thắng `aspect-ratio`
   — ô ảnh cao vống lên 840px, tấm hình rơi xuống đáy một khoảng trắng dài. */
.rel-anh img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;
  object-fit:contain;padding:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px}
.rel-anh figcaption{margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.45}
@media(max-width:620px){ .rel-anh figure{width:236px} }

/* Trang riêng của từng bản: đường dẫn về trang danh sách, và hai nút sang bản
   liền trước / liền sau để đọc một mạch mà không phải quay ra rồi vào lại. */
.duong-di{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.duong-di a{text-decoration:none;font-weight:600}
.duong-di a:hover{text-decoration:underline}
.duong-di span{margin:0 7px;opacity:.6}
.ban-lien-ket{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.ban-lien-ket a{text-decoration:none;font-weight:600}
.ban-lien-ket a:hover{text-decoration:underline}
.ban-khac{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line)}
.ban-khac a{flex:1 1 auto;text-align:center;padding:11px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;
  font-size:14px;font-weight:600;color:var(--text)}
.ban-khac a:hover{border-color:var(--brand);color:var(--brand)}
.rel h3{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.rel h3:first-of-type{border-top:none;padding-top:4px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:18px 0}
/* Màn điện thoại: chín thẻ xếp một cột thì phải cuộn mãi mới hết. Hai cột
   ngắn lại còn một nửa, mà chữ vẫn đọc được. */
@media(max-width:620px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:13px 12px;border-radius:12px}
  .card h3{font-size:14px;line-height:1.35;margin-bottom:5px}
  .card p{font-size:12.5px;line-height:1.55}
  .card .ico{width:32px;height:32px;border-radius:9px;margin-bottom:9px}
  .card .ico svg{width:17px;height:17px}
}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card .val{font-size:17px;font-weight:700;margin-top:6px;word-break:break-word}

.box{border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:13px 16px;margin:14px 0;background:var(--surface)}
.box b{display:block;margin-bottom:2px}
.box.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.box.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.box.tip{border-left-color:var(--brand);background:var(--brand-soft)}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
tr:last-child td{border-bottom:none}

details{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 16px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:600;font-size:15px}
details[open] summary{margin-bottom:8px}

.foot-note{color:var(--muted);font-size:14px;margin-top:24px}
/* ------------------------------- Chân trang -------------------------------- */

footer{border-top:1px solid var(--line);margin-top:60px;padding:44px 20px 34px;
  color:var(--muted);font-size:14px;background:var(--surface)}
.ft{max-width:1120px;margin:0 auto;display:grid;gap:32px;
  grid-template-columns:minmax(240px,1.4fr) repeat(4,minmax(120px,1fr))}
.ft-brand{display:flex;flex-direction:column;gap:10px}
.ft-brand .row{display:flex;align-items:center;gap:10px}
/* `width:auto` không phải cho đẹp: thẻ ảnh có khai `width` thì con số đó
   thành gợi ý kiểu dáng, và luật chỉ đặt `height` sẽ để nguyên chiều
   ngang gốc — ảnh 1024px đẩy vỡ chân trang trên điện thoại. */
.ft-brand img{height:34px;width:auto;border-radius:9px}
.ft-brand b{font-size:16px;color:var(--text);letter-spacing:.3px}
.ft-brand p{margin:0;font-size:13.5px;line-height:1.65;max-width:300px}
.ft h4{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft a{color:var(--muted);text-decoration:none;font-size:14px}
.ft a:hover{color:var(--brand)}
.ft-cta{display:inline-flex;align-items:center;gap:7px;background:var(--brand);
  color:var(--on-brand)!important;border-radius:10px;padding:9px 16px;font-weight:600;
  font-size:13.5px;width:fit-content}
.ft-cta:hover{filter:brightness(1.08);color:var(--on-brand)!important}
.ft-end{max-width:1120px;margin:32px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:13px}
.ft-end .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
@media(max-width:820px){
  .ft{grid-template-columns:1fr 1fr;gap:26px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:620px){
  footer{padding:28px 16px 22px;margin-top:36px}
  /*
   * Ba nhóm liên kết mà xếp lưới hai cột thì nhóm thứ ba trơ ra một mình,
   * nhìn như bị bỏ quên. Cho mỗi nhóm một hàng, các liên kết nằm ngang và tự
   * xuống dòng — gọn hơn hẳn mà không nhóm nào lẻ loi.
   */
  .ft{grid-template-columns:1fr;gap:18px}
  .ft ul{flex-direction:row;flex-wrap:wrap;gap:7px 15px}
  .ft h4{margin-bottom:7px;font-size:11px}
  .ft-cta{margin-top:2px}
  .ft-brand{gap:8px}
  .ft-brand p{max-width:none;font-size:13px}
  .ft h4{margin-bottom:9px}
  .ft ul{gap:7px}
  .ft a{font-size:13.5px}
  /* Hai dòng riêng: nhồi chung một hàng thì câu bên trái bị bó thành ba dòng */
  .ft-end{margin-top:24px;padding-top:18px;gap:8px;font-size:12.5px;
    flex-direction:column;align-items:flex-start}
  .ft-end .dot{display:none}
  .ft-end span{flex:none!important}
}

/* ------------------------------ Màn hình nhỏ -------------------------------- */

@media (max-width:620px){
  .page{padding:22px 16px 60px}
  h1{font-size:27px;letter-spacing:-.5px;text-wrap:balance}
  .sub{font-size:15px;margin-bottom:22px}
  h2{font-size:21px;text-wrap:balance}
  h3{font-size:15.5px}
  p,li{font-size:15px}
  ul,ol{padding-left:19px}

  /* Bảng nhiều cột không nhét vừa màn hẹp — cho cuộn ngang trong khung riêng */
  table{display:block;overflow-x:auto;white-space:normal;font-size:14px}
  th,td{padding:9px 11px;min-width:110px}
  th:first-child,td:first-child{min-width:130px}

  .rel{padding:16px 18px;border-radius:14px}
  .relhead .ver{font-size:21px}
  .box{padding:12px 14px}
  .cards{gap:12px}
  .card{padding:16px}
  details{padding:11px 14px}
  details summary{font-size:15px}
  .foot-note{font-size:13.5px}
}

/* Ảnh minh họa dựng theo đúng giao diện phần mềm, tự đổi màu theo nền sáng/tối */
.pic{margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:14px;overflow:hidden}
.pic img{display:block;width:100%;height:auto;
  /* Thẻ img đã khai width/height nên trình duyệt tự giữ chỗ đúng tỉ lệ,
     trang không bị nhảy khi ảnh tải về muộn. */
  content-visibility:auto}
.pic img.narrow{max-width:700px;margin:0 auto}
.pic figcaption{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.6;text-align:center}
@media(max-width:620px){ .pic{padding:8px;border-radius:12px} }

/* ---------------------------- Dải poster cuộn ngang ------------------------ */

/*
 * Mười hai tấm ảnh xếp dọc thì chiếm mấy màn hình. Cho cuộn ngang, mỗi lần
 * dừng đúng một tấm — ngón tay quét sang là xem tiếp, quen tay như lướt ảnh
 * trên điện thoại.
 */
.strip{margin:20px 0 8px;position:relative}
.strip-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  scrollbar-color:var(--line) transparent}
.strip-track::-webkit-scrollbar{height:8px}
.strip-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.strip-track::-webkit-scrollbar-track{background:transparent}
.strip figure{position:relative;margin:0;flex:0 0 auto;width:250px;scroll-snap-align:center;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
/* Nút tải nhỏ ở góc: hiện mờ, rõ hẳn khi rê vào. Trên điện thoại luôn rõ vì
   không có chuột để rê. */
.strip-dl{position:absolute;top:9px;right:9px;z-index:2;display:grid;place-items:center;
  width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--brand);border:1px solid var(--line);backdrop-filter:blur(6px);
  opacity:.55;transition:.15s}
.strip figure:hover .strip-dl{opacity:1}
.strip-dl:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
@media(hover:none){ .strip-dl{opacity:1} }
.strip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.strip figcaption{padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
.strip figcaption b{display:block;color:var(--text);font-size:13.5px;margin-bottom:3px}
.strip-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  margin-top:2px}
@media(max-width:620px){
  .strip figure{width:210px}
  .strip-track{gap:11px}
}

/* ═══════════════ Lớp giao diện kiểu trang sản phẩm App Store ═══════════════ */
/*
 * Bốn thứ làm nên cái nhìn ấy, và chỉ bốn thứ:
 *
 *   1. Khối nhận diện — biểu tượng vuông bo góc, tên, dòng phụ, nút viên thuốc
 *   2. Dải thông số — gạch chỉ trên dưới, cột ngăn bằng vạch mảnh, KHÔNG viền hộp
 *   3. Đầu mục — tiêu đề bên trái, liên kết bên phải, vạch mảnh ngăn từng mục
 *   4. Danh sách gộp — một khối bo góc, các dòng ngăn nhau bằng vạch mảnh
 *
 * Cái khiến trang trông rẻ tiền là **hộp chồng hộp**. App Store gần như không
 * dùng viền: nó ngăn bằng vạch chỉ mảnh và bằng khoảng trắng. Thêm một cái
 * viền vào đây là hỏng ngay cả bốn thứ trên.
 */

/* 1 · Khối nhận diện */
.as-head{display:flex;align-items:center;gap:24px}
.as-icon{flex:0 0 auto;width:116px;height:116px;border-radius:26px;display:block;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.as-id{min-width:0}
.as-ten{margin:0;font-size:clamp(28px,4.2vw,40px);line-height:1.06;letter-spacing:-1.3px;
  display:flex;flex-direction:column;gap:8px}
.as-ten span{font-size:clamp(15px,1.9vw,19px);font-weight:500;letter-spacing:-.2px;
  color:var(--muted);line-height:1.35}
.as-nha{margin:14px 0 0;font-size:13px;color:var(--muted);letter-spacing:.2px}
.as-nut{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Bản nút dự phòng cho màn hẹp — mặc định ẩn. Luật này phải đứng TRƯỚC khối
   `@media` bên dưới: cùng độ đặc hiệu thì luật viết sau thắng, đặt sau là nó
   ăn đè cả trong màn hẹp và trang mất sạch nút bấm trên điện thoại. */
.as-nut.roi{display:none}
/* Nút hình viên thuốc, chữ đậm — đúng nút Nhận trên App Store */
.btn-vien{border-radius:999px;padding:9px 26px;font-size:15px;font-weight:700;letter-spacing:.2px}

@media(max-width:620px){
  .as-head{gap:15px}
  .as-icon{width:84px;height:84px;border-radius:19px}
  .as-ten{gap:5px;letter-spacing:-.8px}
  .as-nha{margin-top:9px;font-size:12.5px}
  /* Màn hẹp: nút xuống hẳn dưới khối tên cho đủ bề ngang mà bấm */
  .as-head .as-nut{display:none}
  .as-nut.roi{display:flex;margin-top:22px}
  .as-nut.roi .btn{flex:1 1 100%;justify-content:center;padding:13px 20px}
}

/* 2 · Dải thông số — gạch chỉ, không viền hộp */
.as-so{list-style:none;display:flex;margin:26px 0 0;padding:17px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.as-so li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:3px;padding:0 8px;text-align:center;
  border-left:1px solid var(--line)}
.as-so li:first-child{border-left:0}
.as-so b{font-size:22px;line-height:1.15;letter-spacing:-.6px;color:var(--text)}
.as-so span{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);line-height:1.3}
@media(max-width:620px){
  .as-so{margin-top:20px;padding:14px 0;flex-wrap:wrap;row-gap:16px}
  .as-so li{flex:1 1 50%;padding:0 6px}
  /* Xuống hai hàng thì ô thứ ba mở hàng mới, phải bỏ vạch trái của nó đi */
  .as-so li:nth-child(odd){border-left:0}
  .as-so b{font-size:19px}
  .as-so span{font-size:10px;letter-spacing:.5px}
}

/* 3 · Đầu mục: tiêu đề trái, liên kết phải */
.as-muc{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin:0 0 14px}
.as-muc h2{margin:0;font-size:22px;letter-spacing:-.5px}
.as-muc a{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.as-muc a:hover{text-decoration:underline}

/* 4 · Danh sách gộp kiểu iOS: một khối, các dòng ngăn bằng vạch mảnh */
.as-ds{margin:18px 0 0;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.as-ds > div,.as-ds > li{display:flex;align-items:baseline;gap:20px;padding:13px 20px;
  border-top:1px solid var(--line);font-size:14.5px;list-style:none}
.as-ds > div:first-child,.as-ds > li:first-child{border-top:0}
.as-ds dt{flex:0 0 186px;color:var(--muted)}
.as-ds dd{margin:0;flex:1;min-width:0;font-weight:500}
@media(max-width:620px){
  .as-ds > div,.as-ds > li{flex-direction:column;gap:2px;padding:11px 15px}
  .as-ds dt{flex:none;font-size:12.5px}
  .as-ds dd{font-size:14px}
}

/* Khối «Có gì mới» — không viền, chỉ chữ, đúng như App Store bày nó */
.as-ver{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.as-ver b{font-size:17px;letter-spacing:-.3px}
.as-ver span{font-size:13.5px;color:var(--muted)}
.as-notes{margin:0;font-size:15px;color:var(--muted);line-height:1.7;max-width:720px;
  text-wrap:pretty}

/* Mã kiểm tra tệp: chuỗi 64 ký tự, phải cho xuống dòng không thì vỡ khung */
.as-bam{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;color:var(--text);word-break:break-all}
.as-bam-ten{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:3px}
.as-bam-ten b{font-size:14px}
.as-bam-ten span{font-size:12.5px;color:var(--muted)}
/* Dãy 64 ký tự thì không ai gõ lại bằng tay để đối chiếu — phải có nút chép */
.as-bam-khoi{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.as-bam-khoi .as-bam{flex:1;min-width:0}
.nut-chep{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  color:var(--brand);border-radius:9px;padding:6px 13px;font-size:12.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;font-family:inherit;transition:.15s}
.nut-chep:hover{border-color:var(--brand);background:var(--brand-soft)}
.nut-chep.xong{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}

/* ── Trang con: đầu trang lớn rồi vạch chỉ, các mục cũng ngăn bằng vạch ── */
.page > h1{font-size:clamp(28px,4.4vw,38px);line-height:1.1;letter-spacing:-1.1px;
  margin:0 0 11px}
.page > .sub{font-size:17px;line-height:1.62;margin:0 0 24px}
/* Dải lời hứa KHÔNG kẻ vạch dưới. Thứ đứng ngay sau nó luôn tự mang vạch của
   mình rồi — `h2` có `border-top`, còn thẻ bản phát hành thì có viền bao. Kẻ
   thêm ở đây là hai vạch nằm cách nhau mươi điểm ảnh, nhìn như gạch nhầm. */
.page > .pledge{margin-bottom:30px}
.page > h2{margin:38px 0 14px;font-size:22px;letter-spacing:-.5px;
  padding-top:30px;border-top:1px solid var(--line)}
.page > h2:first-of-type{padding-top:34px}
@media(max-width:620px){
  .page > .sub{font-size:15.5px}
  .page > h2{margin-top:28px;padding-top:24px;font-size:20px}
}

/* ────────────────────────── Lộ trình phát triển ────────────────────────── */
/*
 * Một đường dọc, mỗi việc một chấm. Việc đã xong tô đặc, việc đang tính thì
 * để vòng rỗng — nhìn là biết chỗ nào chắc chắn, chỗ nào mới là dự định.
 *
 * Cố ý không có thanh phần trăm hay ngày cụ thể. Hứa ngày rồi trễ là mất lòng
 * tin, mà quán thì chẳng được gì từ con số đó.
 */
.lo-trinh{list-style:none;margin:26px 0 0;padding:0 0 0 34px;position:relative}
.lo-trinh::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;
  background:var(--line)}
.lo-trinh > li{position:relative;padding:0 0 32px}
.lo-trinh > li:last-child{padding-bottom:0}
.lo-trinh > li::before{content:"";position:absolute;left:-30px;top:6px;width:20px;height:20px;
  border-radius:50%;background:var(--bg);border:3px solid var(--line);box-sizing:border-box}
.lo-trinh > li.xong::before{background:var(--ok);border-color:var(--ok)}
.lo-trinh > li.sap::before{border-color:var(--brand)}

.lo-moc{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.lo-trinh > li.xong .lo-moc{color:var(--ok)}
.lo-trinh > li.sap .lo-moc{color:var(--brand)}
.lo-trinh h3{margin:0 0 7px;font-size:17px;letter-spacing:-.2px}
.lo-trinh p{margin:0 0 8px;color:var(--muted);font-size:14.5px;line-height:1.7}
.lo-trinh p:last-child{margin-bottom:0}
.lo-trinh .that{margin-top:10px;padding:12px 15px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);font-size:14px;line-height:1.65}
.lo-trinh .that b{color:var(--text)}
@media(max-width:620px){
  .lo-trinh{padding-left:28px}
  .lo-trinh::before{left:7px}
  .lo-trinh > li::before{left:-27px;width:17px;height:17px;top:5px}
  .lo-trinh h3{font-size:16px}
  .lo-trinh p{font-size:14px}
}

/* --------------------- Dải ảnh giới thiệu, cuộn ngang --------------------- */

/*
 * Kiểu trang sản phẩm trên App Store: ngay dưới nút bấm là một dải ảnh quét
 * ngang. Người xem thấy phần mềm trông ra sao trước khi phải đọc chữ nào.
 *
 * Khác `.strip` ở một điểm cốt lõi: đây là ảnh **để xem**, không có nút tải.
 * Bộ ảnh để chủ quán tải về chia sẻ là chuyện khác, nằm riêng ở cuối trang.
 *
 * Dải tràn ra sát mép màn hình chứ không bó trong `.wrap` — nhờ vậy tấm kế
 * tiếp luôn ló ra một mẩu ở mép phải, mắt biết ngay là còn cuộn được nữa.
 * Nhưng tấm đầu vẫn phải thẳng cột với tiêu đề bên trên, nên lề trong tính
 * đúng bằng lề của `.wrap`.
 */
.canh{position:relative;margin:22px 0 4px}
.canh-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:6px 18px;-webkit-overflow-scrolling:touch;
  padding-inline:var(--canh-le);scroll-padding-inline:var(--canh-le);
  /* Thanh cuộn ẩn đi: đã có mũi tên trên máy tính và quét tay trên điện thoại */
  scrollbar-width:none}
.canh-track::-webkit-scrollbar{display:none}
/* Lề trong tính theo `100%` (bề ngang thật của trang) chứ không phải `100vw`:
   `100vw` tính cả thanh cuộn, nên trên máy tính tấm đầu bị đẩy lệch khỏi cột
   của tiêu đề đúng bằng bề dày thanh cuộn — 7px, đủ để mắt thấy là lệch. */
.canh{--canh-le:calc(max(0px,(100% - 1080px) / 2) + 24px)}
.canh figure{margin:0;flex:0 0 auto;width:300px;scroll-snap-align:start;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.34)}
.canh img{display:block;width:100%;height:auto;aspect-ratio:996 / 1236}

/* Hai mũi tên chỉ dành cho người dùng chuột. Màn cảm ứng thì quét tay, bày
   thêm nút vào chỉ tổ che mất ảnh. */
.canh-nut{position:absolute;top:calc(50% - 22px);z-index:2;display:none;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);
  backdrop-filter:blur(8px);cursor:pointer;transition:.15s;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
.canh-nut svg{width:20px;height:20px}
.canh-nut:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.canh-nut.lui{left:calc(max(0px,(100% - 1080px) / 2) + 6px)}
.canh-nut.toi{right:calc(max(0px,(100% - 1080px) / 2) + 6px)}
@media(hover:hover) and (min-width:861px){
  /* `:not([hidden])` để nút đầu/cuối vẫn ẩn được khi hết chỗ cuộn */
  .canh-nut:not([hidden]){display:grid}
}
@media(max-width:620px){
  .canh{--canh-le:16px}
  .canh figure{width:246px;border-radius:17px}
  .canh-track{gap:12px}
}
@media (prefers-reduced-motion:reduce){ .canh-track{scroll-behavior:auto} }

/* Dải nhắc lại lời hứa, dùng chung cho các trang phụ */
.pledge{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px;padding:0;list-style:none}
.pledge li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:6px 13px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent)}
.pledge svg{width:13px;height:13px;flex:0 0 auto}
@media(max-width:620px){ .pledge{gap:6px;margin-bottom:20px} .pledge li{font-size:11.5px;padding:5px 11px} }

/* Nút trong thẻ nội dung có thể là thẻ liên kết (tải ảnh) nên phải canh giữa như nút */
a.cap-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}