/* ═══════════════════════════════════════════════════════════════════════════
   Hệ chữ và màu lấy TRỰC TIẾP từ CSS đang chạy trên apple.com/vn
   (main.built.css + homepage.built.css, tải về 14/09), đối chiếu với
   design-md/apple/DESIGN.md — VoltAgent/awesome-design-md.

   Ba nấc màn hình của Apple: > 1068px · 1068px · 734px
   .typography-tile-headline   56 / 48 / 32   w600   ls -.005 / -.002 / +.002
   .typography-tile-subhead    28 / 24 / 19   w400   ls +.007 / +.009 / +.012
   .typography-tile-callout    19 / 17 / 14   w400   ls +.012 / -.022 / -.016
   Chữ phụ: #6e6e73 trên nền sáng · #86868b trên nền tối · nền tối là #000 thật
   Ô sản phẩm: padding 48px 0 56px, nội dung xếp cột và căn giữa

   LƯU Ý cách Apple đặt chữ: TÊN SẢN PHẨM là dòng tiêu đề khổng lồ
   (<h2 class="tile-headline">iPhone 18 Pro</h2>), câu quảng cáo chỉ là dòng phụ.
   Trang này làm đúng vậy: "Effects Live Pro" là dòng to nhất.

   Màu nhấn: XANH APPLE, không đổi sang màu khác. Đúng một màu cho mọi thứ
   bấm được — nút, liên kết, viền chọn — theo luật "chỉ một màu nhấn".
   .button          nền rgb(0,113,227) · chữ trắng · bán kính 980px
   .button-secondary nền trong · chữ+viền rgb(0,102,204) nền sáng,
                     rgb(41,151,255) nền tối · rê chuột đổ nền #0076DF chữ trắng
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Nền — đúng màu Apple dùng */
  --black:     #000;
  --parchment: #f5f5f7;
  --white:     #fff;
  --tile-dk-2: #101012;

  /* Chữ */
  --ink:       #1d1d1f;
  --ink-2:     #6e6e73;
  --on-dark:   #f5f5f7;
  --on-dark-2: #86868b;

  /* Màu nhấn duy nhất — xanh Apple, lấy từ .button / .button-secondary
     rgb(0,113,227) nền nút · rgb(0,102,204) chữ trên nền sáng
     rgb(41,151,255) chữ trên nền tối · #0076DF khi rê chuột */
  --accent:        #0066cc;   /* liên kết trên nền sáng */
  --accent-dark:   #2997ff;   /* liên kết trên nền tối  */
  --accent-fill:   #0071e3;   /* nền nút chính          */
  --accent-hover:  #0076DF;
  --accent-active: #006EDB;

  --hairline:   #d2d2d7;
  --hairline-2: #b0b0b8;   /* viền khi rê chuột — đậm hơn --hairline đúng một nấc */
  --hairline-d: rgba(255,255,255,.18);

  /* Mảng nền phụ */
  --tile:  #ededf0;   /* khối ghi chú trên nền giấy */
  --shade: #e8e8ea;   /* ô ảnh lúc chưa tải xong */
  --well:  #1a1a1c;   /* nền lót sau ảnh/video trên nền sáng */
  --bezel: #0b0b0d;   /* vỏ máy trong hình minh hoạ iPhone */

  /* Trạng thái — sắc systemRed / systemGreen của Apple, hạ độ sáng cho ĐỦ TƯƠNG PHẢN.
     Lấy nguyên #ff3b30 / #34c759 làm màu CHỮ thì chỉ đạt 3.1 và 2.3 trên nền nhạt
     của chính nó, dưới sàn 4.5 — đẹp trên hộp thoại iOS không có nghĩa là đọc được
     trong một khối cảnh báo trên nền trắng. Hai màu dưới đây qua sàn trên cả ba
     nền đang dùng: trắng, giấy, và nền nhạt 8%.
     Đo lại khi đổi: xem mục "Đo tương phản" trong website/README.md. */
  --red:        #d13027;   /* 4.52 trên --red-fill · 4.63 trên giấy · 5.04 trên trắng */
  --red-fill:   #ffefee;
  --red-line:   #ffccc9;
  --green:      #22813a;   /* 4.63 trên --green-fill · 4.52 trên giấy · 4.92 trên trắng */
  --green-fill: #effbf2;
  --green-line: #caf0d4;

  /* Thang chữ — nấc lớn */
  --fs-hero:88px;      --lh-hero:1.045;   --ls-hero:-.018em;
  --fs-headline:56px;  --lh-headline:1.0714285714; --ls-headline:-.005em;
  --fs-subhead:28px;   --lh-subhead:1.1428571429;  --ls-subhead:.007em;
  --fs-callout:19px;   --lh-callout:1.2105263158;  --ls-callout:.012em;
  --fs-body:17px;      --lh-body:1.47;    --ls-body:-.022em;
  --fs-small:14px;     --lh-small:1.4285914286;    --ls-small:-.016em;
  --fs-caption:12px;   --lh-caption:1.3333733333;  --ls-caption:-.01em;

  /* Ba nấc dưới đây vốn đã bị gõ thẳng rải rác trong file. Chúng KHÔNG phải cỡ
     tự nghĩ ra — đúng thông số Apple dùng cho tiêu đề thẻ, tiêu đề mục và con số
     lớn — nên khai thành token chứ không xoá đi.
     Ngược lại, 11px / 15px / 26px thì không có trong thang Apple: đã snap về
     caption(12) / small(14) / h3(24). Đừng gõ lại chúng. */
  --fs-title:21px;   --lh-title:1.19;            --ls-title:-.018em;
  --fs-h3:24px;      --lh-h3:1.1666666667;       --ls-h3:.009em;
  --fs-figure:40px;  --lh-figure:1.1;            --ls-figure:0em;

  --pad-top:48px; --pad-bot:56px;

  --r-pill:9999px; --r-lg:18px; --r-sm:8px;
  --shadow-product: rgba(0,0,0,.22) 3px 5px 30px 0;
  --sans:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
}
@media (max-width:1068px){
  :root{
    --fs-hero:56px;     --lh-hero:1.0714285714; --ls-hero:-.005em;
    --fs-headline:48px; --lh-headline:1.0834933333; --ls-headline:-.002em;
    --fs-subhead:24px;  --lh-subhead:1.1666666667;  --ls-subhead:.009em;
    --fs-callout:17px;  --lh-callout:1.2353641176;  --ls-callout:-.022em;
    --pad-top:54px; --pad-bot:61px;
  }
}
@media (max-width:734px){
  :root{
    --fs-hero:40px;     --lh-hero:1.1;
    --fs-headline:32px; --lh-headline:1.125; --ls-headline:.002em;
    --fs-subhead:19px;  --lh-subhead:1.2105263158; --ls-subhead:.012em;
    --fs-callout:14px;  --lh-callout:1.2857742857; --ls-callout:-.016em;
    --pad-top:39px; --pad-bot:43px;
  }
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px}

/* ── Ô sản phẩm: tràn viền, nối nhau bằng màu, không bo góc ──────────── */
.tile{padding:var(--pad-top) 22px var(--pad-bot);display:flex;justify-content:center}
.tile > .inner{width:100%;max-width:1120px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tile > .inner.narrow{max-width:820px}
.t-white{background:var(--white);color:var(--ink)}
.t-parchment{background:var(--parchment);color:var(--ink)}
.t-black{background:var(--black);color:var(--on-dark)}
.t-dark2{background:var(--tile-dk-2);color:var(--on-dark)}

/* ── Thang chữ ──────────────────────────────────────────────────────── */
.hero-name{
  margin:0;font-size:var(--fs-hero);line-height:var(--lh-hero);
  font-weight:600;letter-spacing:var(--ls-hero);text-wrap:balance;
}
.headline{
  margin:0;font-size:var(--fs-headline);line-height:var(--lh-headline);
  font-weight:600;letter-spacing:var(--ls-headline);text-wrap:balance;
}
/* `margin-inline:auto` KHÔNG thừa. `.subhead` có `max-width:24ch`, nên khi nó là
   con trực tiếp của `.inner` (flex, align-items:center) thì được flex căn giữa —
   nhưng đặt trong một khối thường như `#lien-he` thì nó là block hẹp nằm sát mép
   trái, chữ bên trong tự căn giữa cái hộp hẹp đó nên nhìn như lệch hẳn sang
   trái so với tiêu đề. Đúng lỗi đó ở mục Liên hệ trên trang chủ. */
.subhead{
  margin:9px auto -3px;font-size:var(--fs-subhead);line-height:var(--lh-subhead);
  font-weight:400;letter-spacing:var(--ls-subhead);max-width:24ch;text-wrap:balance;
}
/* Trong bài viết thì chữ căn trái, nên trả hộp về sát mép trái. */
.prose .subhead{margin-inline:0}
.t-black .subhead,.t-dark2 .subhead{color:var(--on-dark)}
.callout{
  font-size:var(--fs-callout);line-height:var(--lh-callout);
  font-weight:400;letter-spacing:var(--ls-callout);
}
.small{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--ink-2)}
.t-black .small,.t-dark2 .small{color:var(--on-dark-2)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);color:var(--ink-2)}

/* ── Liên kết kiểu Apple: chữ + dấu ›, không phải nút ────────────────── */
.ctas{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:center;margin-top:22px}
.cta{
  font-size:var(--fs-callout);line-height:var(--lh-callout);letter-spacing:var(--ls-callout);
  color:var(--accent);white-space:nowrap;
}
.t-black .cta,.t-dark2 .cta{color:var(--accent-dark)}
.cta:hover{text-decoration:underline}
.cta::after{content:' ›'}

/* Nút viên thuốc — theo đúng .button-elevated của Apple:
   bán kính 980px · viền 1px · đệm 22px ngang / 12px dọc (trừ đi viền)
   chữ 17px / 1.1764805882 / 400 / -.022em                              */
.btn{
  display:inline-block;box-sizing:content-box;text-align:center;white-space:nowrap;
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.1764805882;
  font-weight:400;letter-spacing:-.022em;
  padding-block:11px;padding-inline:21px;
  border-radius:980px;border:1px solid transparent;cursor:pointer;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.btn-fill{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white)}
.btn-fill:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-fill:active{background:var(--accent-active);border-color:var(--accent-active)}
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-ghost:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white)}
.btn-ghost:active{background:var(--accent-active);border-color:var(--accent-active);color:var(--white)}
.t-black .btn-ghost,.t-dark2 .btn-ghost{border-color:var(--accent-dark);color:var(--accent-dark)}
.t-black .btn-ghost:hover,.t-dark2 .btn-ghost:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:20px}

/* ── Thanh điều hướng: đen thật, cao 44px, chữ 12px ──────────────────── */
.nav{position:sticky;top:0;z-index:60;height:44px;background:var(--black);display:flex;align-items:center;padding:0 22px}
.nav-in{width:100%;max-width:1024px;margin:0 auto;display:flex;align-items:center;gap:24px}
.nav a{font-size:var(--fs-caption);line-height:1;letter-spacing:-.01em;color:rgba(245,245,247,.86)}
.nav a:hover{color:var(--white)}
.nav .brand{font-size:var(--fs-small);font-weight:600;letter-spacing:-.016em;color:var(--white);margin-right:auto}
.nav .brand span{font-weight:400;color:rgba(245,245,247,.5);font-size:var(--fs-caption)}

/* ════ Bệ ba máy ═════════════════════════════════════════════════════ */
/* ── Hình minh hoạ iPhone ────────────────────────────────────────────────────
   Khối này là một BỨC HÌNH của chiếc điện thoại, không phải giao diện trang.
   Nên nó cố ý nằm ngoài hai luật chung:
     · cỡ chữ lẻ 9.5 / 10.5 / 11.5px — đây là giao diện TikTok thu nhỏ trong
       màn hình giả rộng 262px; kéo lên 12px của thang là vỡ tỉ lệ, chữ to hơn
       cả nút trong hình;
     · #000 ở .screen và .island — mặt kính và tai thỏ là vật thể thật màu đen,
       không phải "nền tối" của trang.
   Mọi thứ KHÁC trong file vẫn phải đi qua token.                              */
.devices{display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,3.6vw,48px);margin-top:44px;flex-wrap:wrap}
.dev{margin:0;width:262px;flex:none}
.iphone{position:relative;width:100%;padding:10px;border-radius:52px;background:var(--bezel);
  border:1px solid rgba(255,255,255,.24);box-shadow:var(--shadow-product)}
.iphone::before{content:'';position:absolute;inset:3px;border-radius:49px;border:1px solid rgba(255,255,255,.09);pointer-events:none;z-index:5}
.screen{position:relative;border-radius:42px;overflow:hidden;background:#000;aspect-ratio:9/19.5}
.screen video{width:100%;height:100%;object-fit:cover}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:33%;height:25px;background:#000;border-radius:20px;z-index:4}
.status{position:absolute;top:0;left:0;right:0;height:44px;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:9px 22px 0;color:var(--white);font-size:11.5px;font-weight:600;letter-spacing:0;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.status .ic{display:flex;align-items:center;gap:5px}
.key{position:absolute;background:rgba(255,255,255,.22);border-radius:2px;width:2.5px}
.k-act{left:-2.5px;top:17%;height:26px}
.k-up{left:-2.5px;top:26%;height:44px}
.k-dn{left:-2.5px;top:38%;height:44px}
.k-pw{right:-2.5px;top:29%;height:62px}
.dev figcaption{margin-top:18px;text-align:center}
.dev figcaption b{display:block;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:600;letter-spacing:var(--ls-title)}
.dev figcaption span{display:block;font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--on-dark-2);margin-top:4px}

/* Hiệu ứng phủ lên cảnh live — webm VP9 mang sẵn alpha (AlphaMode=1) */
.fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;pointer-events:none;transition:opacity 160ms ease}
.fx.on{opacity:1}

.live-chip{position:absolute;top:52px;left:15px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.45);border-radius:var(--r-pill);padding:4px 9px 4px 7px;font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--white)}
/* #fe2c55 là màu THƯƠNG HIỆU TikTok — cố ý để nguyên số, không đưa vào token.
   Nó nhận diện một dịch vụ bên ngoài; kéo nó về màu nhấn của mình là mất ý nghĩa. */
.live-chip b{width:5px;height:5px;border-radius:50%;background:#fe2c55;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.toast{position:absolute;left:13px;right:13px;bottom:17px;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);border-radius:var(--r-pill);padding:6px 14px 6px 6px;
  opacity:0;transform:translateY(8px);transition:opacity 220ms ease,transform 220ms ease}
.toast.on{opacity:1;transform:translateY(0)}
.toast img{width:26px;height:26px;object-fit:contain;flex:none}
.toast div{font-size:var(--fs-caption);line-height:1.25;color:var(--white);min-width:0}
.toast b{display:block;font-weight:600}
.toast span{color:var(--accent-dark)}

.jarlayer{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.fall{position:absolute;width:46px;height:46px;object-fit:contain;top:16%;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));animation:fallDown 1.6s cubic-bezier(.45,0,.75,1) forwards}
@keyframes fallDown{
  0%{transform:translateY(-90px) rotate(-14deg) scale(.8);opacity:0}
  14%{opacity:1}72%{opacity:1;transform:translateY(300px) rotate(6deg) scale(1)}
  100%{transform:translateY(330px) rotate(9deg) scale(.9);opacity:0}}
.meter{position:absolute;left:13px;right:13px;bottom:17px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(12px);border-radius:var(--r-pill);padding:7px 14px;font-size:10.5px;color:rgba(255,255,255,.75)}
.meter b{color:var(--accent-dark);font-variant-numeric:tabular-nums;font-size:var(--fs-caption)}

.bublayer{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.bub{position:absolute;bottom:12%;display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);
  padding:4px 12px 4px 4px;backdrop-filter:blur(4px);animation:rise 4.6s cubic-bezier(.3,0,.4,1) forwards}
.bub img{width:27px;height:27px;object-fit:contain;flex:none}
.bub div{font-size:10.5px;line-height:1.2;color:var(--white)}
.bub b{display:block;font-weight:600}
.bub span{color:var(--accent-dark);font-size:9.5px}
@keyframes rise{0%{transform:translateY(26px);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateY(-252px);opacity:0}}

/* ── Bậc thang quà ──────────────────────────────────────────────────── */
.ladder{margin-top:44px;width:100%}
.ladder p{margin:0 0 16px;color:var(--on-dark-2)}
.ladder p b{color:var(--accent-dark);font-variant-numeric:tabular-nums;font-weight:600}
.gifts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gift{font-family:var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:var(--white);
  border-radius:var(--r-pill);padding:9px 20px 9px 10px;
  transition:transform 120ms ease,background 160ms ease,border-color 160ms ease}
.gift:hover{background:rgba(255,255,255,.16)}
.gift:active{transform:scale(.95)}
.gift[aria-pressed="true"]{border-color:var(--accent-dark);background:rgba(41,151,255,.18)}
.gift img{width:34px;height:34px;object-fit:contain;flex:none}
.gift .gn{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.gift .gn b{font-size:var(--fs-small);font-weight:400;letter-spacing:-.016em}
.gift .gn em{font-style:normal;font-size:var(--fs-caption);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.gift[aria-pressed="true"] .gn em{color:var(--accent-dark)}

/* ════ Băng ảnh kho ══════════════════════════════════════════════════ */
.marq-wrap{width:100vw;margin-top:40px}
.marq-row{overflow:hidden}
.marq-row+.marq-row{margin-top:14px}
.marq{display:flex;gap:14px;width:max-content}
.m-a{animation:slide 70s linear infinite}
.m-b{animation:slide 86s linear infinite reverse}
@keyframes slide{to{transform:translateX(-50%)}}
.marq-row:hover .marq{animation-play-state:paused}
.shot{width:156px;aspect-ratio:9/16;flex:none;border-radius:var(--r-lg);overflow:hidden;background:var(--shade)}
.shot img{width:100%;height:100%;object-fit:cover}

/* ════ Ba bước ═══════════════════════════════════════════════════════ */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;text-align:left;width:100%}
.step b{display:block;font-size:var(--fs-callout);line-height:var(--lh-callout);letter-spacing:var(--ls-callout);color:var(--accent-dark)}
.step h3{margin:8px 0 0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;letter-spacing:.009em}
.step p{margin:8px 0 0;color:var(--on-dark-2);font-size:var(--fs-body);line-height:var(--lh-body)}

/* ════ 16 tính năng ══════════════════════════════════════════════════ */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;margin-top:44px;text-align:left;width:100%}
.feat{padding:18px 0;border-top:1px solid var(--hairline)}
.feat b{display:block;font-size:var(--fs-body);font-weight:600;letter-spacing:-.022em;line-height:1.24}
.feat span{display:block;font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--ink-2);margin-top:4px}

/* ════ Giá ═══════════════════════════════════════════════════════════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;text-align:left;width:100%}
.plan{border:1px solid var(--hairline-d);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column}
.plan-best{border:2px solid var(--accent-dark)}
.plan-nm{font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--on-dark-2)}
.plan-v{font-size:var(--fs-figure);line-height:var(--lh-figure);font-weight:600;letter-spacing:0em;margin-top:8px;font-variant-numeric:tabular-nums}
.plan-v i{font-style:normal;font-size:var(--fs-callout);font-weight:400;color:var(--on-dark-2)}
/* `min-height` cố định để ba ô cùng đẩy nút xuống một mức — nhưng chỉ đúng khi
   ba đoạn mô tả dài xấp xỉ nhau. Câu dài hơn là nút ô đó tụt xuống, ba nút so
   le. Bỏ min-height, đẩy nút bằng `margin-top:auto` thì đúng trong mọi trường
   hợp, kể cả khi sau này sửa lời. */
.plan-s{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--on-dark-2);margin:10px 0 0}
.plan-s b{color:var(--accent-dark);font-weight:600}
.plan .btn,.plan .cta{margin-top:auto;padding-top:18px;align-self:flex-start}
/* `.btn` có nền, nên khoảng cách phải là margin chứ không phải padding — thêm
   padding-top vào nút là ô màu xanh tự nhiên cao thêm 18px ở nửa trên. */
.plan .btn{padding-top:11px;margin-top:auto}
.plan .btn-wrap{margin-top:auto;padding-top:18px}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 40px;margin-top:40px;text-align:left;width:100%}
.incl p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--on-dark-2);padding-left:22px;position:relative}
.incl p::before{content:'';position:absolute;left:0;top:7px;width:9px;height:5px;border-left:1.5px solid var(--accent-dark);border-bottom:1.5px solid var(--accent-dark);transform:rotate(-45deg)}

/* ════ Tải về / liên hệ ══════════════════════════════════════════════ */
.specs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:22px}
.specs span{font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--ink-2)}
.specs b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:26px}

/* Mã QR Zalo. Có nó vì số điện thoại là số CÁ NHÂN của chủ dự án, không đưa lên
   trang — khách quét mã, hoặc bấm nút bên cạnh, cả hai đều đi qua `/zalo`.
   SVG nhúng thẳng nên không thêm một lượt tải nào, và phóng to bao nhiêu cũng nét. */
.qr{
  display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
}
.qr-ma{width:132px;height:132px;display:grid;place-items:center}
.qr-ma svg{width:100%;height:100%;display:block}
/* Ô mã QR phải là ô SÁNG dù đặt trên nền tối: máy quét đọc mã đen trên nền
   sáng, đảo màu là nhiều điện thoại chịu. */
.t-black .qr,.t-dark2 .qr{background:var(--white);border-color:transparent}
.qr-chu{
  font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--ink-2);
}
.contact{display:inline-flex;align-items:center;gap:13px;padding:14px 24px 14px 16px;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--r-lg);transition:transform 120ms ease,border-color 160ms ease}
.contact:active{transform:scale(.95)}
.contact:hover{border-color:var(--hairline-2)}
.contact i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--parchment)}
.contact u{display:block;font-size:var(--fs-caption);color:var(--ink-2);text-decoration:none;letter-spacing:var(--ls-caption)}
.contact b{display:block;font-size:var(--fs-body);font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums}

/* ════ Chân trang ════════════════════════════════════════════════════ */
.foot{background:var(--parchment);color:var(--ink-2);padding:44px 22px 36px}
.foot-in{max-width:1024px;margin:0 auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot h4{margin:0 0 2px;font-size:var(--fs-caption);font-weight:600;letter-spacing:var(--ls-caption);color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{font-size:var(--fs-caption);line-height:2.2;letter-spacing:var(--ls-caption);color:var(--ink-2)}
.foot li a:hover{color:var(--accent);text-decoration:underline}
/* Đáy chân trang — dựng theo đúng lối apple.com/vn:
     hàng 1: dòng bản quyền bên trái, vùng lãnh thổ bên phải
     hàng 2: các liên kết pháp lý, ngăn nhau bằng gạch đứng mảnh
   Gạch đứng vẽ bằng ::before chứ không gõ ký tự "|" vào HTML: gõ tay thì cái
   cuối hàng bị thừa, mà xuống dòng ở màn hẹp là gạch rơi xuống đầu dòng mới. */
.foot-legal{
  border-top:1px solid var(--hairline);margin-top:28px;padding-top:16px;
  font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--ink-2);
}
.foot-legal-1{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between}
.foot-legal-nav{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:8px}
.foot-legal-nav > *{position:relative;padding-right:13px;margin-right:12px}
.foot-legal-nav > *::before{
  content:'';position:absolute;right:0;top:.15em;
  width:1px;height:1em;background:var(--hairline);
}
.foot-legal-nav > *:last-child{padding-right:0;margin-right:0}
.foot-legal-nav > *:last-child::before{display:none}
.foot-legal-nav a:hover{color:var(--accent);text-decoration:underline}
.foot-ver{font-variant-numeric:tabular-nums}

/* Tiêu đề mục trong trang điều khoản / bảo mật. Văn bản dài và phải tra cứu
   được, nên mục phải nổi rõ hơn chữ thường — nhưng vẫn là chữ, không phải khối
   màu. */
.dk-h{
  margin:34px 0 12px;font-size:var(--fs-title);line-height:var(--lh-title);
  font-weight:600;letter-spacing:var(--ls-title);max-width:65ch;
}
.prose .dk-h:first-child{margin-top:0}

@media (max-width:1068px){
  .dev{width:226px}
  .feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cols3,.plans{grid-template-columns:1fr;gap:24px}
  .incl{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .nav .hide-sm{display:none}
  .dev{width:268px}
}
@media (max-width:460px){
  .feats{grid-template-columns:1fr}
  .shot{width:120px}
  .dev{width:252px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   Kiểu cho trang tính năng và trang hướng dẫn.
   Dùng lại nguyên bộ biến ở styles.css — không thêm màu, không thêm cỡ chữ
   ngoài thang của Apple đã khai ở đó.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Văn bản dài: giữ ~65 ký tự một dòng, căn trái ────────────────────── */
/* PHẢI viết đủ `.tile > .inner.prose`, không được để trần `.prose`.
   `.tile > .inner` đặt `text-align:center` với độ ưu tiên (0,2,0); một lớp
   `.prose` (0,1,0) thua, nên mọi bài hướng dẫn, trang tính năng và trang điều
   khoản đều bị CĂN GIỮA — cả đoạn văn dài đọc như thơ. Đúng cái bẫy đã ghi
   trong ghi chú của `.inner.qt-wrap` phía dưới, nhưng chỗ này quên áp. */
.tile > .inner.prose,
.prose{text-align:left;align-items:stretch}
.prose-p{
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  margin:0 0 20px;max-width:65ch;
}
.prose-p:last-child{margin-bottom:0}
.prose code,.urlrow code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:rgba(0,0,0,.06);border-radius:5px;padding:2px 6px;
}
.t-black .prose code,.t-dark2 .prose code{background:rgba(255,255,255,.12)}

.prose-list{margin:0 0 20px;padding-left:0;list-style:none;max-width:65ch}
.prose-list li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
}
.prose-list li::before{
  content:'';position:absolute;left:2px;top:10px;
  width:9px;height:5px;border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);
}

.prose-note{
  max-width:65ch;margin:0 0 20px;padding:14px 18px;
  border-left:3px solid var(--accent);background:var(--parchment);
  border-radius:0 8px 8px 0;
  font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);
  color:var(--ink-2);
}
.t-parchment .prose-note{background:var(--tile)}

/* ── Dòng URL overlay ─────────────────────────────────────────────────── */
.urlrow{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:14px 0;border-top:1px solid var(--hairline);max-width:65ch;
}
.urlrow span{
  font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--ink-2);
  min-width:180px;
}
.urlrow code{background:var(--white);border:1px solid var(--hairline);user-select:all}

/* ── Lưới thẻ tính năng ───────────────────────────────────────────────── */
/* Số cột CỐ ĐỊNH, không auto-fill. Có đúng 16 tính năng, mà auto-fill ở bề
   ngang 1120px cho ra 3 cột — hàng cuối trơ một thẻ lẻ. 16 chia hết cho 1, 2 và
   4, nên ba nấc dưới đây không bao giờ để lại thẻ mồ côi.
   Thêm tính năng thứ 17 thì phải xem lại chỗ này. */
.cards{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:14px;width:100%;text-align:left;
}
@media (min-width:620px){  .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .cards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card{
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:22px 22px 20px;background:var(--white);
  transition:border-color 160ms ease,transform 120ms ease;
}
.card:hover{border-color:var(--hairline-2);transform:translateY(-2px)}
.card:active{transform:scale(.99)}
.card b{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:600;letter-spacing:var(--ls-title)}
.card span{
  font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);
  color:var(--ink-2);flex:1;
}
/* Dấu › đứng im ở màu chữ phụ, chỉ sáng lên khi rê chuột — xem lý do ở chỗ
   dựng thẻ trong build.js. */
.card em{
  font-style:normal;font-size:var(--fs-callout);line-height:1;
  color:var(--ink-2);margin-top:auto;padding-top:10px;
  transition:color 160ms ease,transform 160ms ease;
}
.card:hover em{color:var(--accent);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .card,.card em{transition:none}
  .card:hover{transform:none}
  .card:hover em{transform:none}
}

/* ── Các bước trong bài hướng dẫn ─────────────────────────────────────── */
.steps-ol{list-style:none;margin:0;padding:0;counter-reset:s;max-width:65ch}
.step-li{padding:0 0 26px;border-bottom:1px solid var(--hairline);margin-bottom:26px}
.step-li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.step-li b{
  display:block;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;
  letter-spacing:.009em;margin-bottom:9px;
}
.step-li p{
  margin:0 0 12px;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
}
.step-li p:last-child{margin-bottom:0}

/* ── Danh sách bài hướng dẫn ──────────────────────────────────────────── */
.guide-list{width:100%;text-align:left}
.guide-row{
  display:flex;align-items:baseline;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--hairline);
}
.guide-row .n{
  font-size:var(--fs-small);letter-spacing:var(--ls-small);
  color:var(--ink-2);font-variant-numeric:tabular-nums;width:24px;flex:none;
}
.guide-row .t{font-size:var(--fs-body);letter-spacing:var(--ls-body);flex:1}
.guide-row .m{
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums;
}
.guide-row:hover .t{color:var(--accent)}

/* ── Hay hỏng ở đâu ───────────────────────────────────────────────────── */
.tr{margin:0;max-width:65ch}
.tr dt{
  font-size:var(--fs-body);font-weight:600;letter-spacing:var(--ls-body);
  margin-top:20px;
}
.tr dt:first-child{margin-top:0}
.tr dd{
  margin:6px 0 0;font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);color:var(--ink-2);
}

@media (max-width:734px){
  .urlrow span{min-width:0;width:100%}
  .cards{grid-template-columns:1fr}
}

/* ── Ảnh chụp màn hình app ────────────────────────────────────────────── */
.shotfig{margin:0 0 26px;max-width:100%}
.shotfig img{
  width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid var(--hairline);background:var(--well);
}
.shotfig figcaption{
  margin-top:10px;font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--ink-2);
}

/* ═══ Trang kho hiệu ứng ═════════════════════════════════════════════════
   Ảnh là sản phẩm, tên chỉ là nhãn phụ — lưới để ảnh chiếm chỗ, chữ lùi
   xuống nhỏ. Mọi ảnh đại diện cùng một khuôn 540x960 (xem tools/ten/anh-moi.js)
   nên thẻ nào cũng bằng nhau, không còn viền đen thừa trong ảnh.           */
.inner.wide{max-width:1320px}

/* Trang kho là trang để LƯỚT hàng, không phải trang giới thiệu: phần mở đầu
   thấp xuống cho sản phẩm hiện sớm, đừng chiếm trọn màn hình đầu tiên. */
.kho-dau{padding-top:calc(var(--pad-top) * .62);padding-bottom:calc(var(--pad-bot) * .55)}

/* Bộ lọc và ô tìm nằm thành CỘT BÊN TRÁI, lưới hàng ở bên phải.
   Trước đây cả hai nằm trên một thanh ngang phía trên lưới: cuộn xuống vài hàng
   là mất hút, mà kho có 271 hiệu ứng nên người xem cuộn rất sâu. Cột bên dính
   theo màn hình (`sticky`) nên đổi nhóm hay gõ tìm lúc nào cũng được.
   Dưới 900px thì xếp lại thành thanh ngang như cũ — màn hẹp không đủ chỗ cho
   hai cột, và ở đó lưới mới là thứ phải rộng. */
.kho-bo{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:36px;align-items:start;width:100%;text-align:left;
}
/* Cột bên tự cuộn khi cao quá màn hình: giỏ 50 món mà cột dính cứng thì nút
   Thanh toán tụt xuống dưới đáy màn và không tài nào bấm được. */
.kho-ben{
  position:sticky;top:26px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 52px);overflow-y:auto;
}
.kho-dem{margin:0;font-variant-numeric:tabular-nums}

/* VIÊN THUỐC là dạng GỐC của .chip-loc, và trang mua key cũng dùng nó cho hai
   nút "Mua key mới / Gia hạn". Nên biến thể danh sách dọc dưới đây phải khoanh
   trong `.kho-ben`, đừng sửa thẳng lớp gốc — đổi lớp gốc là hai nút bên trang
   mua key tự nhiên xếp chồng và mất luôn viền. */
.chip-hang{display:flex;flex-wrap:wrap;gap:8px}
.chip-loc{
  font-family:var(--sans);cursor:pointer;
  font-size:var(--fs-small);letter-spacing:var(--ls-small);
  background:transparent;color:var(--ink);
  border:1px solid var(--hairline);border-radius:980px;
  padding:8px 15px;
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.chip-loc em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chip-loc:hover{border-color:var(--hairline-2)}
/* Đang chọn = MÀU NHẤN, không phải đen.
   Cả site chỉ có một màu cho thứ bấm được (xanh Apple); tô đen một viên thuốc
   đang chọn là dựng thêm ngôn ngữ thứ hai, mà nó lại còn nặng hơn cả nút mua
   thật. Chữ trắng trên #0071e3 đo được 4.70 — qua sàn 4.5. */
.chip-loc[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white)}
.chip-loc[aria-pressed="true"]:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.chip-loc[aria-pressed="true"] em{color:rgba(255,255,255,.72)}

/* Biến thể danh sách dọc — CHỈ trong cột bên của trang kho. */
.kho-ben .chip-hang{flex-direction:column;flex-wrap:nowrap;gap:2px;align-items:stretch}
.kho-ben .chip-loc{
  border-color:transparent;border-radius:var(--r-sm);
  padding:7px 12px;text-align:left;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.kho-ben .chip-loc:hover{background:var(--parchment);border-color:transparent}
.kho-ben .chip-loc[aria-pressed="true"]{border-color:var(--accent-fill)}

.kho-tim{display:block}
.kho-tim input{
  width:100%;font-family:var(--sans);
  font-size:var(--fs-body);letter-spacing:var(--ls-body);color:var(--ink);
  background:var(--white);border:1px solid var(--hairline);
  border-radius:980px;padding:11px 20px;height:44px;
}
.kho-tim input:focus{outline:2px solid var(--accent-fill);outline-offset:2px;border-color:transparent}

/* Lưới: số cột CỐ ĐỊNH theo bề ngang, không auto-fill. Auto-fill ở màn rộng
   nhồi 7 cột 168px — ảnh bé, chữ bé, nhìn như một đống lộn xộn. */
/* minmax(0,1fr) chứ KHÔNG phải 1fr: tên sản phẩm đặt white-space:nowrap nên
   min-content của thẻ bằng cả dòng chữ, cột nào tên dài thì phình ra — mỗi thẻ
   một bề ngang, ảnh cao thấp khác nhau, đúng cái "lộn xộn" phải sửa. */
.kho-luoi{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;width:100%;margin-top:22px;text-align:left;
}
/* Số cột tính theo bề ngang CÒN LẠI sau khi trừ cột bên 212px + khe 36px, nên
   mỗi nấc lùi một bậc so với hồi lưới chiếm cả chiều ngang. */
@media (min-width:620px){ .kho-luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} }
@media (min-width:1100px){ .kho-luoi{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} }
@media (min-width:1420px){ .kho-luoi{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px} }

/* Màn hẹp: bỏ hai cột, trả bộ lọc về thanh ngang phía trên lưới — tức là trả
   `.chip-loc` về đúng dạng viên thuốc gốc. */
@media (max-width:899px){
  .kho-bo{grid-template-columns:minmax(0,1fr);gap:18px}
  .kho-ben{position:static;gap:12px}
  .kho-ben .chip-hang{flex-direction:row;flex-wrap:wrap;gap:8px}
  .kho-ben .chip-loc{
    border-color:var(--hairline);border-radius:980px;padding:8px 15px;
    display:inline-flex;justify-content:flex-start;
  }
  .kho-ben .chip-loc:hover{background:transparent;border-color:var(--hairline-2)}
}

.sp{display:flex;flex-direction:column;gap:9px}
.sp[hidden]{display:none!important}
.sp-anh{
  aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  background:var(--well);border:1px solid var(--hairline);
  transition:transform 220ms ease,box-shadow 220ms ease;
}
.sp-anh img{width:100%;height:100%;object-fit:cover;display:block}

/* Nút xem thử phủ lên ảnh. Cả ô ảnh là vùng bấm — ngón tay trên điện thoại
   không nhắm được một nút 40px giữa lưới 2 cột. Tam giác vẽ bằng border nên
   không phải tải thêm ảnh nào. */
.sp-anh{position:relative}
.sp-xem{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.sp-xem::before{
  content:"";width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  transition:opacity 180ms ease,transform 180ms ease;
}
.sp-xem::after{
  content:"";position:absolute;
  border-left:15px solid rgba(255,255,255,.95);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  margin-left:5px;
  transition:opacity 180ms ease,transform 180ms ease;
}
/* Máy có chuột: nút ẩn đi cho lưới sạch, hiện khi rê vào. Máy cảm ứng không
   có trạng thái rê — ở đó nút luôn hiện, mờ hơn một chút. */
@media (hover:hover){
  .sp-xem::before,.sp-xem::after{opacity:0;transform:scale(.88)}
  .sp:hover .sp-xem::before,.sp:hover .sp-xem::after,
  .sp-xem:focus-visible::before,.sp-xem:focus-visible::after{opacity:1;transform:scale(1)}
}
@media (hover:none){
  .sp-xem::before{opacity:.72}
  .sp-xem::after{opacity:.92}
}

/* Hộp phát video xem thử */
.xt-nen{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
}
.xt-nen[hidden]{display:none}
.xt-hop{
  position:relative;width:100%;max-width:340px;
  background:var(--white);border-radius:var(--r-lg);padding:20px;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.xt-ten{
  font-size:var(--fs-small);line-height:1.3;letter-spacing:var(--ls-small);
  font-weight:600;margin:0 34px 12px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Khung giữ đúng tỉ lệ dọc 9:16 để lúc video chưa tải xong hộp không nhảy
   một cái — nhảy bố cục ngay dưới ngón tay là cảm giác trang hỏng. */
.xt-khung{
  position:relative;aspect-ratio:9/16;max-height:66vh;margin:0 auto;
  background:var(--well);border-radius:var(--r-sm);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.xt-khung video{width:100%;height:100%;object-fit:contain;display:block;background:var(--well)}
.xt-cho{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 18px;text-align:center;color:rgba(255,255,255,.78);
  font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);
}
.xt-cho[hidden]{display:none}
.sp:hover .sp-anh{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.sp-ten{
  font-size:var(--fs-small);line-height:1.3;letter-spacing:var(--ls-small);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Hàng giá + nút Mua. Trước đây cả hai đều 12px xám, lại bị kéo sát lên bằng
   `margin-top:-4px`, nên dưới một tấm ảnh 9:16 thì hàng này gần như biến mất.
   GIÁ LÀ NỘI DUNG, không phải chú thích: trả nó về cỡ chữ thường và màu chữ
   chính. Nút to lên cho vừa ngón tay (28 → 32px cao).
   Nút vẫn để VIỀN chứ không đổ nền xanh: một lưới 271 thẻ mà thẻ nào cũng có
   nút xanh đặc thì cả trang chỉ còn màu xanh, đúng cái "màu nhấn là ngân sách"
   phải tránh. Đổ nền khi rê chuột là đủ. */
.sp-day{display:flex;align-items:center;gap:8px;margin-top:2px}
.sp-gia{margin-right:auto}

/* Nút thêm vào giỏ. Cố ý là một nút VUÔNG nhỏ chứ không phải viên thuốc có chữ:
   thẻ hẹp nhất chỉ ~190px mà đã phải chứa giá + nút mua, thêm một viên thuốc
   "Thêm vào giỏ" nữa là ba thứ tranh chỗ rồi xuống dòng lung tung.
   Đã ở trong giỏ thì đổi thành ✓ và bấm lần nữa để bỏ ra — không cần học cách
   dùng, bấm thử một cái là hiểu. */
.sp-gio{
  font-family:var(--sans);font-size:var(--fs-small);line-height:1;
  width:30px;height:30px;flex:none;cursor:pointer;
  display:grid;place-items:center;
  background:transparent;color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  transition:background 140ms ease,border-color 140ms ease,color 140ms ease;
}
.sp-gio:hover{border-color:var(--hairline-2)}
.sp-gio[aria-pressed="true"]{
  background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white);
}
.sp-gia{
  font-size:var(--fs-small);letter-spacing:var(--ls-small);
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.sp-mua{
  font-family:var(--sans);font-size:var(--fs-small);letter-spacing:var(--ls-small);
  cursor:pointer;background:transparent;color:var(--accent);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:5px 16px;flex:none;
  transition:background 140ms ease,border-color 140ms ease,color 140ms ease;
}
.sp-mua:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white)}

/* ── Giỏ hàng: GHIM ĐẦU CỘT BÊN ─────────────────────────────────────────────
   Cột bên đã dính theo màn hình, nên đặt giỏ lên đầu cột là khách cuộn tới đâu
   cũng thấy mình đã chọn gì, hết bao nhiêu, và nút thanh toán ở ngay đó.
   Danh sách CHỮ, không ảnh đại diện: ảnh đã xem ở lưới rồi; nhồi lại vào giỏ chỉ
   làm mỗi dòng cao gấp ba và đẩy nút thanh toán ra khỏi tầm nhìn.            */
.gio{
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:14px;background:var(--white);
}
.gio[hidden]{display:none}
.gio-dau{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gio-nhan{font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-small)}
.gio-xoa{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  color:var(--ink-2);text-decoration:underline;
}
.gio-xoa:hover{color:var(--red)}

.gio-ds{list-style:none;margin:10px 0 0;padding:0}
/* Tên chiếm hết chỗ còn lại và cắt bằng dấu ba chấm; giá và nút bỏ luôn giữ
   nguyên bề ngang, nên tên dài mấy cũng không đẩy vỡ hàng. */
.gio-mon{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:8px;
  padding:7px 0;border-top:1px solid var(--hairline);
}
.gio-mon-ten{
  font-size:var(--fs-caption);line-height:1.35;letter-spacing:var(--ls-caption);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gio-mon-gia{
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.gio-bo{
  width:18px;height:18px;flex:none;cursor:pointer;display:grid;place-items:center;
  background:none;border:0;padding:0;border-radius:var(--r-pill);
  color:var(--ink-2);font-size:10px;font-family:var(--sans);line-height:1;
}
.gio-bo:hover{background:var(--parchment);color:var(--red)}

.gio-cong{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2);
}
.gio-cong b{font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
/* `.btn` dùng content-box nên width:100% là tràn ra đúng bằng padding hai bên. */
.gio-tt{width:100%;box-sizing:border-box;margin-top:12px;text-align:center}

/* ── Hộp mua ─────────────────────────────────────────────────────────────── */
.mua-nen{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
}
.mua-nen[hidden]{display:none}
.mua{
  position:relative;width:100%;max-width:420px;max-height:calc(100vh - 44px);overflow:auto;
  background:var(--white);border-radius:var(--r-lg);padding:26px;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.mua-dong{
  position:absolute;top:14px;right:14px;width:30px;height:30px;line-height:1;
  background:transparent;border:0;border-radius:var(--r-pill);cursor:pointer;
  color:var(--ink-2);font-size:var(--fs-small);
}
.mua-dong:hover{background:var(--parchment);color:var(--ink)}
.mua-dau{display:flex;gap:14px;align-items:center;margin-bottom:22px;padding-right:34px}
.mua-anh{
  width:56px;height:100px;object-fit:cover;flex:none;
  border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--well);
}
.mua-ten{font-size:var(--fs-body);font-weight:600;letter-spacing:var(--ls-body);line-height:1.25}
.mua-gia{
  font-size:var(--fs-small);letter-spacing:var(--ls-small);
  color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:4px;
}
.mua-nhan{display:block;font-size:var(--fs-small);letter-spacing:var(--ls-small);margin-bottom:6px}
.mua-o{
  width:100%;font-family:var(--sans);font-size:var(--fs-body);letter-spacing:.02em;
  color:var(--ink);background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:11px 14px;text-transform:uppercase;
}
.mua-o:focus{outline:2px solid var(--accent-fill);outline-offset:2px;border-color:transparent}
.mua-phu{
  margin:10px 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--ink-2);
}
/* `.cta` mang sẵn cỡ chữ lớn + nowrap cho nút gọi hành động ở thân trang. Thả
   nguyên vào dòng chú thích 12px thì chữ Zalo to gấp rưỡi cả câu và không xuống
   dòng được. */
.mua-phu .cta{font-size:inherit;line-height:inherit;letter-spacing:inherit;white-space:normal}
/* Lời lưu ý trong hộp mua. Dùng lại đúng lối của `.prose-note` ở trang hướng
   dẫn (nền parchment + vạch xanh bên trái) thay vì bịa một màu cảnh báo mới —
   bảng màu trang này chỉ có MỘT màu nhấn. */
.mua-luu{
  margin-top:12px;padding:10px 12px;
  background:var(--parchment);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;color:var(--ink);
}
.mua-ts{margin:18px 0 0;min-height:65px;overflow:hidden}
.mua-loi{
  margin:14px 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--red);
}
.mua-loi[hidden]{display:none}
/* `.btn` dùng box-sizing:content-box, nên width:100% là tràn ra đúng bằng phần
   padding hai bên — hộp sinh ra thanh cuộn ngang. */
.mua-nut{width:100%;box-sizing:border-box;margin-top:18px;justify-content:center}
.mua-qr{display:block;width:260px;max-width:100%;height:auto;margin:0 auto;border-radius:var(--r-sm)}
.mua-so{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:18px 0 0;
  font-size:var(--fs-small);letter-spacing:var(--ls-small);
}
.mua-so dt{color:var(--ink-2)}
.mua-so dd{margin:0;font-variant-numeric:tabular-nums;word-break:break-all}
.mua-xong{
  margin:0;font-size:var(--fs-title);font-weight:600;letter-spacing:-.018em;color:var(--green);
}

@media (max-width:734px){
  .kho-tim{flex:1 1 100%}
  .mua{padding:22px}
}

/* ═══ Trang quản trị ═════════════════════════════════════════════════════
   Trang công cụ, không phải trang bán hàng: dày, căn trái, không hero, không
   hoạt ảnh. Vẫn dùng đúng bộ biến của site để khỏi đẻ ra một hệ màu thứ hai. */
/* `.tile > .inner` (hai lớp) đặt align-items:center, nên một lớp `.qt-wrap` thua
   độ ưu tiên và bảng quản trị co lại giữa trang. Phải viết đủ hai lớp. */
.inner.qt-wrap{text-align:left;align-items:stretch}
.qt-dau{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.qt-h1{margin:0;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;flex:1 1 auto}
.qt-h2{margin:42px 0 12px;font-size:var(--fs-callout);font-weight:600;letter-spacing:-.018em}
.qt-dem{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2);font-variant-numeric:tabular-nums}

.qt-bao{
  margin:14px 0 0;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--green-fill);border:1px solid var(--green-line);
  font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--green);
}
.qt-bao.hong{background:var(--red-fill);border-color:var(--red-line);color:var(--red)}
.qt-bao[hidden]{display:none}

.qt-thanh{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:20px 0 14px}
.qt-loc{display:flex;gap:6px}
.qt-loc button{
  font-family:var(--sans);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  cursor:pointer;background:transparent;color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:5px 13px;
}
.qt-loc button[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white)}

.qt-o{
  font-family:var(--sans);font-size:var(--fs-small);letter-spacing:var(--ls-small);
  color:var(--ink);background:var(--white);box-sizing:border-box;
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:7px 11px;
}
.qt-o:focus{outline:2px solid var(--accent-fill);outline-offset:1px;border-color:transparent}
.qt-tim{flex:1 1 240px;max-width:340px}

.qt-bang{display:flex;flex-direction:column}
.qt-hang{
  display:grid;grid-template-columns:44px minmax(0,1fr) 120px auto auto;
  gap:12px;align-items:center;padding:10px 0;
  border-top:1px solid var(--hairline);
}
.qt-hang.tat{opacity:.55}
.qt-anh{width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm);background:var(--well);border:1px solid var(--hairline)}
.qt-giua{min-width:0}
.qt-ten{width:100%}
.qt-phu{
  display:flex;gap:10px;margin-top:4px;
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2);
}
.qt-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-caption);opacity:.75}
.qt-gia{width:120px;text-align:right;font-variant-numeric:tabular-nums}

.qt-nut{
  font-family:var(--sans);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  cursor:pointer;background:var(--accent-fill);border:1px solid var(--accent-fill);
  color:var(--white);border-radius:var(--r-pill);padding:6px 15px;white-space:nowrap;
}
.qt-nut:disabled{background:var(--parchment);border-color:var(--hairline);color:var(--ink-2);cursor:default}
.qt-phu-nut{background:transparent;border-color:var(--hairline);color:var(--ink)}
.qt-phu-nut:hover{border-color:var(--hairline-2)}

.qt-don-thanh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.qt-ghi{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2)}
.qt-dons{display:flex;flex-direction:column}
.qt-don{
  display:grid;grid-template-columns:78px 92px minmax(0,1fr) 54px auto;
  gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--hairline);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
}
.qt-tt{
  text-align:center;border-radius:var(--r-pill);padding:2px 0;
  background:var(--parchment);color:var(--ink-2);
}
.qt-tt.tt-paid{background:var(--green-fill);color:var(--green)}
.qt-tt.tt-expired{background:var(--red-fill);color:var(--red)}
.qt-don-tien{font-variant-numeric:tabular-nums;text-align:right}
.qt-don-key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-caption);overflow:hidden;text-overflow:ellipsis}
.qt-don-may,.qt-don-luc{color:var(--ink-2);font-variant-numeric:tabular-nums}
.qt-trong{margin:14px 0 0;font-size:var(--fs-small);color:var(--ink-2)}

@media (max-width:734px){
  .qt-hang{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .qt-hang .qt-gia{grid-column:1/-1;width:100%;text-align:left}
  .qt-hang .qt-nut{grid-column:auto}
  .qt-don{grid-template-columns:70px minmax(0,1fr);row-gap:4px}
}

/* ── Đăng hiệu ứng mới ───────────────────────────────────────────────────── */
.qt-tha{
  border:2px dashed var(--hairline);border-radius:var(--r-lg);
  padding:26px;text-align:center;transition:border-color 140ms ease,background 140ms ease;
}
.qt-tha.rê{border-color:var(--accent-fill);background:var(--parchment)}
.qt-tha-chu{margin:0;font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--ink-2)}
.qt-lien{
  background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font-family:var(--sans);font-size:inherit;text-decoration:underline;
}
.qt-tha-ds:not(:empty){margin-top:18px}
.qt-tha-cap{display:flex;align-items:center;gap:14px;justify-content:center;text-align:left}
.qt-tha-anh{width:54px;height:96px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--well)}
.qt-tha-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-caption);color:var(--ink-2)}
.qt-dang{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:16px}
.qt-dang .qt-nhan{width:100%;margin:0}
.qt-dang #dangTen{flex:1 1 280px}
.qt-nhan{display:block;font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2);margin-bottom:4px}

/* ── Gói license trong trang quản trị ────────────────────────────────────── */
.qt-goi-nhan{
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  background:var(--parchment);border-radius:var(--r-pill);
  padding:3px 10px;text-align:center;white-space:nowrap;
}
.qt-goi-them{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.qt-goi-them .qt-o{flex:0 1 auto}
.qt-goi-them #goiTen{flex:1 1 220px}
.qt-hang:has(.qt-goi-nhan){grid-template-columns:auto minmax(0,1fr) auto}

/* ── Trang mua key ───────────────────────────────────────────────────────── */
.mk-key{max-width:360px;margin:0 auto 26px;text-align:left}
/* Thẻ gói — đây là TRANG BÁN HÀNG, nên thẻ phải có sức nặng.
   Bản trước rộng tối đa 240px, bốn dòng chữ gần bằng cỡ nhau, đứng lọt thỏm
   giữa một trang trắng: nhìn như chưa dựng xong chứ không như chỗ để trả tiền. */
.mk-goi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));
  gap:20px;justify-content:center;width:100%;
}
.mk-the{
  text-align:left;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:28px 26px 26px;display:flex;flex-direction:column;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.mk-the:hover{border-color:var(--hairline-2);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.mk-ten{font-size:var(--fs-callout);font-weight:600;letter-spacing:var(--ls-callout);line-height:1.2}
/* Giá là thứ to nhất trong thẻ. */
.mk-gia{margin-top:10px;display:flex;align-items:baseline;gap:8px}
.mk-so{
  font-size:var(--fs-figure);line-height:var(--lh-figure);
  font-weight:600;letter-spacing:var(--ls-figure);font-variant-numeric:tabular-nums;
}
.mk-ds{
  list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:var(--fs-small);line-height:1.35;letter-spacing:var(--ls-small);color:var(--ink-2);
}
/* Dấu ✓ vẽ bằng ::before nên không cần nạp thêm bộ icon nào. */
.mk-ds li{position:relative;padding-left:22px}
.mk-ds li::before{
  content:'✓';position:absolute;left:0;top:-1px;
  color:var(--green);font-size:var(--fs-small);font-weight:600;
}
/* KHÔNG đụng vào padding của `.btn`.
   Bản trước đặt `padding-top:0` ở đây để lấy khoảng cách trên — nhưng đó chính
   là phần đệm dọc của nút: chữ "Chọn gói này" bị đẩy lên sát mép trên, nhìn như
   không căn giữa. Khoảng cách với khối trên phải là MARGIN.
   `margin-top:auto` đẩy nút xuống đáy thẻ nên hai thẻ cao thấp khác nhau vẫn có
   nút thẳng hàng. */
.mk-nut{width:100%;box-sizing:border-box;text-align:center;margin-top:auto}
.mk-the .mk-ds{margin-bottom:22px}
.mk-key-ra{margin:16px 0 0}
.mk-hop{
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--parchment);padding:14px;text-align:center;
}
.mk-hop-nhan{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--ink-2)}
.mk-hop-key{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-callout);font-weight:600;letter-spacing:.04em;margin:6px 0 10px;user-select:all;
}
.mk-chep{
  font-family:var(--sans);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  cursor:pointer;background:transparent;color:var(--accent);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:5px 14px;
}
.mk-chep:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white)}