/* BoxStream — trang khach (thiet ke lai 09/11/2026: "bot giong AI"; 10/11/2026: ngon ngu chuyen dong + tuong tac kieu apple.com).
   CHUYEN DONG (10/11): mot duong cong duy nhat --cong = cubic-bezier(.28, .11, .32, 1) (duong cong apple.com).
     hien dan khi cuon: mo 0 -> 1 + truot len 32px, 900 ms, mot lan (IntersectionObserver); phan tu cung luoi tre 80 ms / muc;
     anh dau trang chu: thu nho 1 -> .94 + mo 1 -> .82 theo cuon 0 -> 70vh (CSS scroll-driven, JS rAF du phong);
     menu dien thoai: nen mo + truot xuong 16px 320 ms, tung muc tre 40 ms; nut: chi doi do sang / gach chan, 200 ms;
     prefers-reduced-motion: tat het.
   10/11/2026 (bo icon moi "export 26"): DUNG BA MAU nhu app — xanh da troi cua app (#1F6BF0 sang / #4C8DFF toi: nut chinh,
   lien ket ›, vien chon, vong focus — cho Apple dung mau xanh), den va trang (+ xam trung tinh #f5f5f7... cho nen khoi /
   chu phu). Do / xanh la chi cho trang thai loi / da xong. Khong cam, khong tim.
   Nguyen tac cu: DEN TRANG kieu Apple (chu yeu cau 09/11: khong dung mau cam / mau nhan) — nut den tren nen sang,
   nut trang tren nen toi, xam trung tinh lanh (#f5f5f7, #1d1d1f, #6e6e73); anh chup man xe that la nhan vat chinh, bo cuc lech trai kieu tap chi,
   nut goc vuong nhe (khong vien thuoc), khong gradient / khong anh sang tim / khong the bieu tuong.
   Sang / toi theo he dieu hanh. Moi kich thuoc theo rem / % / vw / clamp. */

:root {
  --nen: #ffffff;
  --nen-2: #f5f5f7;
  --the: #ffffff;
  --chu: #1d1d1f;
  --chu-2: #515154;
  --chu-3: #6e6e73;
  --vien: #d2d2d7;
  --vien-o: #86868b;          /* vien o nhap: >= 3:1 voi nen */
  --nhan: #1F6BF0;            /* xanh app: nen nut chinh, vien chon */
  --nhan-chu: #1F6BF0;        /* lien ket, dau ›, chu nhan */
  --tren-nhan: #ffffff;
  --nhan-nen: rgba(31, 107, 240, .08);
  --tot: #1d7a35;
  --canh-bao: #1F6BF0;        /* "dang cho" dung mau nhan (khong mau cam) */
  --loi: #c4001a;
  --bo: .5rem;
  --bo-nho: .375rem;
  --rong: 68rem;
  --le: clamp(1.25rem, 4.5vw, 3rem);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cong: cubic-bezier(.28, .11, .32, 1);
  --dau-nen: rgba(255, 255, 255, .72);
  --nut-hover: #1a5cd4;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #000000;
    --nen-2: #161617;
    --the: #1d1d1f;
    --chu: #f5f5f7;
    --chu-2: #a1a1a6;
    --chu-3: #86868b;
    --vien: #333336;
    --vien-o: #6e6e73;
    --nhan: #1F6BF0;          /* nut giu cung xanh (chu trang tren nen nay dat 4.9:1) */
    --nhan-chu: #4C8DFF;      /* lien ket tren nen toi */
    --tren-nhan: #ffffff;
    --nhan-nen: rgba(76, 141, 255, .14);
    --tot: #3ccf6a;
    --canh-bao: #4C8DFF;
    --loi: #ff5a4e;
    --dau-nen: rgba(22, 22, 23, .72);
    --nut-hover: #3a7df2;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nen); color: var(--chu); font-family: var(--font);
  font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
a { color: var(--nhan-chu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--nhan-chu); outline-offset: 3px; }
/* icon bo chung (anh/icon/bo.svg) */
.ic { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; }
.ic-tn { display: block; width: 2rem; height: 2rem; color: var(--nhan-chu); margin-bottom: 1.1rem; }
.ic-ts { display: block; width: 1.75rem; height: 1.75rem; margin: 0 auto .6rem; color: var(--chu); }
.ic-buoc { display: block; width: 1.75rem; height: 1.75rem; color: var(--nhan-chu); margin-bottom: .75rem; }
.an { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 650; }
html { scroll-padding-top: 3.5rem; }

/* ---------------------------------------------------------------- thanh dieu huong (kieu apple.com: mong, trong mo + nhoe) */
.dau { position: sticky; top: 0; z-index: 50; height: 2.75rem; background: var(--nen); border-bottom: 1px solid var(--vien); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dau { background: var(--dau-nen); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: color-mix(in srgb, var(--vien) 70%, transparent); }
}
.dau-trong { max-width: calc(64rem + 2 * var(--le)); margin: 0 auto; height: 100%; padding: 0 var(--le); display: flex; align-items: center; gap: 2rem; }
.thuong-hieu { display: flex; align-items: center; gap: .5rem; color: var(--chu); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; flex: 0 0 auto; text-decoration: none; }
.thuong-hieu:hover { text-decoration: none; opacity: .8; }
.thuong-hieu img { width: 1.25rem; height: 1.25rem; border-radius: 22%; }
.menu { display: flex; align-items: center; justify-content: center; flex: 1; gap: clamp(1.25rem, 2.6vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.menu a { color: var(--chu); opacity: .8; font-size: .75rem; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; padding: .35rem 0; transition: opacity .2s var(--cong); }
.menu a:hover { opacity: 1; }
.menu a[aria-current="page"] { opacity: 1; }
.dau-phai { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto; }
.dau-phai .lien-ket-nho { font-size: .75rem; color: var(--chu); opacity: .8; text-decoration: none; transition: opacity .2s var(--cong); }
.dau-phai .lien-ket-nho:hover { opacity: 1; }
.dau-phai .nut-nho { min-height: 1.75rem; padding: .2rem .8rem; font-size: .75rem; }
.nut-menu { display: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; padding: 0 .75rem; cursor: pointer; margin-right: -.75rem; position: relative; }
.nut-menu span { position: absolute; left: .85rem; right: .85rem; height: 1.5px; background: var(--chu); border-radius: 1px; transition: transform .32s var(--cong), top .32s var(--cong); }
.nut-menu span:nth-child(1) { top: 1.1rem; }
.nut-menu span:nth-child(2) { display: none; }
.nut-menu span:nth-child(3) { top: 1.55rem; }
.mo-menu .nut-menu span:nth-child(1) { top: 1.33rem; transform: rotate(45deg); }
.mo-menu .nut-menu span:nth-child(3) { top: 1.33rem; transform: rotate(-45deg); }
.menu .chi-dien-thoai { display: none; }

/* menu dien thoai: phu ca man, nen mo + truot xuong, tung muc hien tre (kieu apple.com) */
@media (max-width: 62rem) {
  .nut-menu { display: block; }
  .dau-trong { gap: .75rem; justify-content: space-between; }
  .dau-phai { margin-left: auto; }
  .menu {
    position: fixed; left: 0; right: 0; top: 2.75rem; bottom: 0; margin: 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 1.5rem calc(var(--le) + .5rem) 3rem;
    background: var(--nen); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-1rem);
    transition: opacity .32s var(--cong), transform .32s var(--cong), visibility 0s linear .32s;
  }
  .mo-menu .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--cong), transform .32s var(--cong), visibility 0s; }
  /* backdrop-filter tren .dau bien .dau thanh khung chua cho con position:fixed -> menu bi kep cao 2.75rem, chi thay
     "Tong quan" (loi 09/11). Mo menu: dau nen dac, bo lam mo -> menu fixed theo ca man hinh. Khoa cuon trang phia sau. */
  .mo-menu .dau { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nen); }
  body.mo-menu { overflow: hidden; }
  .menu li { opacity: 0; transform: translateY(-.5rem); transition: opacity .3s var(--cong), transform .3s var(--cong); }
  .mo-menu .menu li { opacity: 1; transform: none; }
  .mo-menu .menu li:nth-child(1) { transition-delay: .04s; } .mo-menu .menu li:nth-child(2) { transition-delay: .08s; }
  .mo-menu .menu li:nth-child(3) { transition-delay: .12s; } .mo-menu .menu li:nth-child(4) { transition-delay: .16s; }
  .mo-menu .menu li:nth-child(5) { transition-delay: .2s; } .mo-menu .menu li:nth-child(6) { transition-delay: .24s; }
  .mo-menu .menu li:nth-child(7) { transition-delay: .28s; } .mo-menu .menu li:nth-child(8) { transition-delay: .32s; }
  .menu a { display: block; padding: .45rem 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; opacity: 1; color: var(--chu); }
  .menu a:hover { opacity: .7; }
  .menu .chi-dien-thoai { display: block; }
  .menu .chi-dien-thoai a { font-size: 1.0625rem; font-weight: 400; color: var(--chu-2); margin-top: 1.25rem; }
  .dau-phai .lien-ket-nho { display: none; }
  body.mo-menu { overflow: hidden; }
}

/* ---------------------------------------------------------------- nut (vien tron 980px; phu = lien ket co dau ›) */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .6rem 1.4rem; border-radius: 980px; border: 0; cursor: pointer;
  background: var(--nhan); color: var(--tren-nhan); font-size: 1.0625rem; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  transition: background-color .2s var(--cong), opacity .2s var(--cong);
}
.nut:hover { text-decoration: none; background: var(--nut-hover); }
.nut:active { opacity: .78; }
.nut[disabled] { opacity: .4; cursor: not-allowed; background: var(--nhan); }
.nut:focus-visible { outline: 2px solid var(--nhan-chu); outline-offset: 3px; }
/* nut phu: lien ket chu + dau ›, khong khung (kieu "Tim hieu them ›" cua Apple) */
.nut-vien { background: transparent; color: var(--nhan-chu); min-height: 2.75rem; padding: .6rem .25rem; border-radius: .25rem; }
.nut-vien::after { content: "\203A"; font-size: 1.25em; line-height: 1; margin-left: .1rem; transform: translateY(-.04em); }
.nut-vien:hover { background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.nut-phu { background: var(--nen-2); color: var(--chu); }
.nut-phu:hover { background: var(--vien); }
.nut-nho { min-height: 2.25rem; padding: .35rem 1rem; font-size: .875rem; }
.lien-ket-mui { color: var(--nhan-chu); font-weight: 400; text-decoration: none; }
.lien-ket-mui:hover { text-decoration: underline; text-underline-offset: .2em; }
.lien-ket-mui::after { content: "\00A0\203A"; }
.hang-nut { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; }
.giua .hang-nut, .hang-nut.giua { justify-content: center; }

/* ---------------------------------------------------------------- bo cuc chung */
.khoi { padding: clamp(4.5rem, 10vw, 8rem) var(--le); }
.khoi-xam { background: var(--nen-2); }
.trong { max-width: var(--rong); margin: 0 auto; }
.trong-hep { max-width: var(--rong); margin: 0 auto; }
.trong-hep > * { max-width: 48rem; }
.trong-hep.giua > * { margin-left: auto; margin-right: auto; }
.trong-hep.giua > .the.form { max-width: 30rem; text-align: left; }
#thong-bao > * { max-width: 44rem; margin-left: auto; margin-right: auto; }   /* thong bao bang gia can giua nhu tieu de */   /* o nhap don le (Tai app): hep + giua duoi tieu de can giua */
.giua { text-align: center; }
.mat-sau { color: var(--chu-2); }
.nho { font-size: .875rem; }
.nhan-tren { font-size: clamp(1rem, 1.5vw, 1.3125rem); font-weight: 600; color: var(--chu-2); margin: 0 0 .5rem; letter-spacing: -.01em; line-height: 1.3; }
.giua .nhan-tren, .nhan-tren.giua { justify-content: center; }
.tieu-de-lon { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.tieu-de { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.07; font-weight: 600; letter-spacing: -.025em; margin: 0 0 1rem; }
.tieu-de-vua { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .75rem; }
.mo-ta-lon { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.45; letter-spacing: -.01em; color: var(--chu-2); margin: 1rem 0 0; max-width: 42rem; }
.giua .mo-ta-lon, .mo-ta-lon.giua { margin-left: auto; margin-right: auto; }
.tieu-de-lon, .tieu-de, .tieu-de-vua { text-wrap: balance; }
.mo-ta-lon { text-wrap: pretty; }

/* dau trang con: canh trai theo luoi chung */
.dau-trang {
  padding: clamp(3.5rem, 8vw, 6rem) max(var(--le), calc((100% - var(--rong)) / 2)) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.dau-trang .mo-ta-lon { margin-left: auto; margin-right: auto; }
.dau-trang .hang-nut { margin-top: 1.75rem; justify-content: center; }
.dau-trang + .khoi { padding-top: clamp(2.5rem, 5vw, 4rem); }
.dau-trang.khung-404 { border-bottom: 0; }

/* hai cot: tieu de trang ben trai (dinh khi cuon), noi dung ben phai */
.hai-cot { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.cot-trai .tieu-de-lon { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
.cot-trai .hang-nut { margin-top: 1.75rem; }
.cot-trai .chu-them { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--vien); color: var(--chu-2); font-size: .9375rem; }
.cot-trai .chu-them p { margin: 0 0 .5rem; }
.cot-phai > :first-child { margin-top: 0; }
.cot-phai .giua { text-align: left; }
@media (max-width: 56rem) {
  .hai-cot { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- trang chu (kieu trang san pham Apple: chu canh giua, anh lon) */
.mo-dau { padding: clamp(3rem, 8vw, 5.5rem) var(--le) clamp(4rem, 8vw, 6rem); text-align: center; overflow: hidden; }
.mo-dau .nhan-tren { margin-bottom: .75rem; }
.mo-dau .tieu-de-lon { max-width: 18ch; margin: 0 auto; }
.mo-dau .mo-ta-lon { margin: 1.25rem auto 0; max-width: 38rem; }
.mo-dau .hang-nut { justify-content: center; margin-top: 1.75rem; }

/* khung man xe: vien den phang nhu man hinh tren taplo, khong phat sang */
.man-anh { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.vien-man { background: #0b0b0c; padding: clamp(.35rem, .9vw, .8rem); border-radius: clamp(.75rem, 1.6vw, 1.5rem); }
.vien-man img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(.4rem, .9vw, .9rem); }
.man-anh figcaption, .chu-anh { margin-top: .9rem; font-size: .8125rem; color: var(--chu-3); text-align: center; }
.chu-anh b, .man-anh figcaption b { color: var(--chu-2); font-weight: 600; }
/* anh dau trang: lien ket toi ban xem thu; thu nho nhe theo cuon */
.anh-dau { display: block; max-width: 72rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; transform-origin: 50% 0; will-change: transform; text-decoration: none; }
.anh-dau:hover { text-decoration: none; }
.anh-dau:focus-visible { outline-offset: 6px; border-radius: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .anh-dau { animation: anh-dau-lui linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}
@keyframes anh-dau-lui { from { transform: none; opacity: 1; } to { transform: scale(.94); opacity: .82; } }

/* dai thong so ngay duoi anh dau */
.thong-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 64rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
.thong-so > div { padding: 0 1rem; }
.thong-so > div + div { border-left: 1px solid var(--vien); }
.thong-so dt { font-size: .8125rem; color: var(--chu-3); margin-bottom: .25rem; }
.thong-so dd { margin: 0; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.thong-so dd span { display: block; font-weight: 400; color: var(--chu-2); font-size: .875rem; margin-top: .15rem; }
@media (max-width: 56rem) {
  .thong-so { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .thong-so > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 21rem) { .thong-so { grid-template-columns: 1fr; } .thong-so > div + div { border-left: 0; } }

/* muc tinh nang: tieu de lon canh giua, anh lon ben duoi */
.muc { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.muc + .muc { margin-top: clamp(5rem, 11vw, 9rem); }
.muc-chu { max-width: 44rem; }
.muc-chu p { color: var(--chu-2); margin: 0 auto 1rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; letter-spacing: -.01em; }
.muc-chu ul { margin: 1.5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; }
.muc-chu li { font-size: .9375rem; color: var(--chu-2); }
.muc > figure, .muc > .hien-dan:not(.muc-chu) { width: 100%; max-width: 64rem; margin: 0; }
.so-muc { font-size: clamp(1rem, 1.5vw, 1.3125rem); font-weight: 600; color: var(--chu-2); margin: 0 0 .5rem; letter-spacing: -.01em; }
.hai-anh { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .hai-anh { grid-template-columns: 1fr; } }

/* danh sach tinh nang con lai (trang chu + diem noi bat cua goi): luoi o bo goc kieu Apple */
.tieu-de-ds { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tieu-de-ds h2, .tieu-de-ds h3 { margin: 0; }
.ds-tn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.ds-tn > * { padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 1.5rem; background: var(--nen-2); }
.khoi-xam .ds-tn > * { background: var(--nen); }
.ds-tn h3 { font-size: 1.1875rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.015em; line-height: 1.3; }
.ds-tn p { margin: 0; color: var(--chu-2); font-size: .9375rem; line-height: 1.5; }
.ds-tn .so { display: block; font-size: .8125rem; font-weight: 600; color: var(--chu-3); margin-bottom: 1.25rem; }
@media (max-width: 62rem) { .ds-tn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .ds-tn { grid-template-columns: 1fr; } }

/* dai toi: luon toi bat ke che do (anh ban do la anh toi) */
.khoi-toi {
  --nen: #000000; --nen-2: #161617; --the: #1d1d1f; --chu: #f5f5f7; --chu-2: #a1a1a6; --chu-3: #86868b; --vien: #333336;
  --vien-o: #6e6e73; --nhan: #1F6BF0; --nhan-chu: #4C8DFF; --tren-nhan: #ffffff; --nhan-nen: rgba(76, 141, 255, .14); --nut-hover: #3a7df2;
  background: var(--nen); color: var(--chu); color-scheme: dark;
}
@media (prefers-color-scheme: dark) { .khoi-toi { --nen: #050505; background: #050505; border-block: 1px solid #262628; } }

.sau-buoc { margin-top: 2rem; }

/* truoc khi mua */
.kiem-tra { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.kiem-tra ol { margin: 0; padding: 0; list-style: none; counter-reset: kt; border-top: 1px solid var(--chu); }
.kiem-tra li { counter-increment: kt; display: grid; grid-template-columns: 2.5rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--vien); }
.kiem-tra li::before { content: counter(kt, decimal-leading-zero); font-family: var(--mono); font-size: .8125rem; color: var(--chu-3); padding-top: .2rem; }
.kiem-tra li span { color: var(--chu-2); display: block; font-size: .9375rem; }
.kiem-tra .hang-nut { margin-top: 2rem; }
@media (max-width: 56rem) { .kiem-tra { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- luoi + the */
.luoi { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.luoi-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.luoi-goi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.the { background: var(--nen-2); border-radius: 1.125rem; padding: clamp(1.25rem, 2.5vw, 2rem); border: 0; }
.khoi-xam .the { background: var(--nen); }
.the h3 { font-size: 1.125rem; margin: 0 0 .4rem; letter-spacing: -.01em; line-height: 1.3; }
.the p { margin: 0; color: var(--chu-2); }
.bieu-tuong { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--nhan-nen); color: var(--nhan-chu); }
.bieu-tuong svg { width: 1.375rem; height: 1.375rem; }
.tinh-nang-lon { display: block; }
.so-lon { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buoc */
.buoc { counter-reset: buoc; display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--chu); }
.buoc > li { counter-increment: buoc; position: relative; padding: 1.4rem 0 1.5rem 3.75rem; border-bottom: 1px solid var(--vien); }
.buoc > li::before {
  content: counter(buoc, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem;
  font-family: var(--mono); font-size: .875rem; color: var(--nhan-chu); font-weight: 600;
}
.buoc h3 { margin: 0 0 .35rem; font-size: 1.1875rem; letter-spacing: -.01em; line-height: 1.35; }
.buoc p { margin: .35rem 0 0; color: var(--chu-2); }
.buoc ul, .buoc ol { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--chu-2); }
.buoc li li { margin: .3rem 0; }
.buoc b { color: var(--chu); }
.duong-dan { font-weight: 600; color: var(--chu); }
.ghi-chu { margin-top: .9rem; padding: .75rem 1rem; border-left: 3px solid var(--nhan); background: var(--nen-2); color: var(--chu); font-size: .9375rem; }
@media (max-width: 30rem) {
  .buoc > li { padding: 3rem 0 1.35rem; }
  .buoc > li::before { top: 1.3rem; }
}
.buoc-ngang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--chu); }
.buoc-ngang > li { padding: 1.4rem 0 0 0; border-bottom: 0; }
.buoc-ngang > li::before { display: none; }
@media (max-width: 48rem) { .buoc-ngang { grid-template-columns: 1fr; } .buoc-ngang > li { padding-bottom: 1.25rem; border-bottom: 1px solid var(--vien); } }

/* ---------------------------------------------------------------- bang gia */
.bang-gia { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 22rem)); justify-content: center; align-items: stretch; }   /* it muc gia van can giua */
.bang-gia > .dang-tai { grid-column: 1 / -1; }
.muc-gia { display: flex; flex-direction: column; text-align: left; position: relative; border: 0; border-radius: 1.5rem; box-shadow: none; background: var(--nen-2); padding: clamp(1.75rem, 3vw, 2.5rem); }
.khoi-xam .muc-gia { background: var(--nen); }
.muc-gia.noi-bat { box-shadow: inset 0 0 0 2px var(--nhan); }
.nhan-noi-bat { display: block; order: -1; align-self: flex-start; margin-bottom: .75rem; color: var(--nhan-chu); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.muc-gia h3 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.gia { font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; margin: .75rem 0 .35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gia small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--chu-2); }
.muc-gia .mat-sau { margin: 0 0 .25rem; }
.muc-gia .nut { margin-top: auto; width: 100%; }
.muc-gia .khoang { flex: 1; min-height: 1.5rem; }
.cho-cap-nhat {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--bo-nho);
  border: 1px solid var(--vien); border-left: 3px solid var(--canh-bao); background: var(--the); color: var(--chu-2); max-width: 46rem; margin: 0 0 2rem; text-align: left;
}
.giua .cho-cap-nhat, .giua + .cho-cap-nhat { margin-left: auto; margin-right: auto; }
.cho-cap-nhat strong { color: var(--chu); display: block; margin-bottom: .15rem; }
.cham-nhay { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--canh-bao); margin-top: .5rem; animation: nhay 1.8s ease-in-out infinite; }
@keyframes nhay { 50% { opacity: .3; } }

/* ---------------------------------------------------------------- goi tra phi */
.the-goi { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--chu); text-decoration: none; border-radius: 1.75rem; }
.the-goi:hover { text-decoration: none; }
.the-goi:hover .lien-ket-mui { text-decoration: underline; text-underline-offset: .2em; }
.the-goi .anh-goi { aspect-ratio: 16 / 9; background: #0b0b0c; display: grid; place-items: center; overflow: hidden; }
.the-goi .anh-goi img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--cong); }
@media (hover: hover) { .the-goi:hover .anh-goi img { transform: scale(1.02); } }
.the-goi .than { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.the-goi h3 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.the-goi .loai { font-size: .75rem; font-weight: 700; color: var(--chu-3); text-transform: uppercase; letter-spacing: .06em; }
.the-goi .chan-the { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.the-goi .chan-the .mat-sau { color: var(--chu); font-weight: 600; font-variant-numeric: tabular-nums; }
.anh-chu { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -.03em; }
/* chi mot goi: the nam ngang, anh lon */
@media (min-width: 52rem) {
  .luoi-goi:has(> .the-goi:only-child) { grid-template-columns: 1fr; }
  .the-goi:only-child { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .the-goi:only-child .anh-goi { aspect-ratio: auto; min-height: 100%; }
  .the-goi:only-child .anh-goi img { aspect-ratio: 16 / 9; }
  .the-goi:only-child .than { padding: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
  .the-goi:only-child h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .the-goi:only-child .chan-the { margin-top: 1.5rem; flex: 0 0 auto; }
}
.khoi-toi .the { background: #141416; }
.chi-tiet-dau { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; text-align: left; }
.chi-tiet-dau .anh-lon { border-radius: clamp(.75rem, 1.6vw, 1.5rem); overflow: hidden; background: #0b0b0c; padding: clamp(.35rem, .9vw, .8rem); aspect-ratio: 16 / 9; }
.chi-tiet-dau .anh-lon img { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(.25rem, .6vw, .4rem); }
.chi-tiet-dau .hang-nut { margin-top: 1.75rem; }
@media (max-width: 56rem) { .chi-tiet-dau { grid-template-columns: 1fr; } }
.doan { max-width: 46rem; }
.doan p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--chu-2); line-height: 1.65; margin: 0 0 1.1rem; }
.doan p:first-child { color: var(--chu); font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.45; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- form */
.form { display: grid; gap: 1.35rem; }
.truong { display: grid; gap: .45rem; }
.truong > span { font-weight: 600; font-size: .9375rem; }
.truong small { color: var(--chu-2); font-size: .8125rem; }
.o-nhap {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem; border-radius: .75rem;
  border: 1px solid var(--vien-o); background: var(--nen); font-size: 1.0625rem;
}
.o-nhap:focus { outline: 2px solid var(--nhan); outline-offset: 0; border-color: var(--nhan); }
.o-nhap.ma { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.chon-goi { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.chon-goi label { position: relative; cursor: pointer; }
.chon-goi input { position: absolute; opacity: 0; pointer-events: none; }
.chon-goi .o-chon {
  display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1rem; border-radius: .75rem;
  border: 1px solid var(--vien-o); background: var(--nen); transition: border-color .15s, box-shadow .15s; height: 100%;
}
.chon-goi .o-chon b { font-size: 1.0625rem; }
.chon-goi .o-chon span { color: var(--chu-2); font-size: .875rem; }
.chon-goi .o-chon .gia-nho { color: var(--chu); font-weight: 700; font-size: 1.15rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.chon-goi label:hover .o-chon { border-color: var(--chu); }
.chon-goi input:checked + .o-chon { border-color: var(--nhan); box-shadow: inset 0 0 0 1px var(--nhan); background: var(--nhan-nen); }
.chon-goi input:focus-visible + .o-chon { outline: 2px solid var(--nhan); outline-offset: 2px; }
.loi-form { color: var(--loi); font-size: .9375rem; min-height: 1.4em; margin: 0; }
.loi-form:empty { min-height: 0; }
.tong { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--chu); font-size: 1.0625rem; }
.tong b { font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tab { display: inline-flex; padding: .2rem; border-radius: 980px; background: var(--nen-2); gap: .2rem; margin: 0 0 1.5rem; }
.tab button { border: 0; background: none; padding: .5rem 1.1rem; border-radius: 980px; cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--chu-2); }
.tab button:hover { color: var(--chu); }
.tab button[aria-selected="true"] { background: var(--chu); color: var(--nen); }

/* ---------------------------------------------------------------- don hang */
.don { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 52rem) { .don { grid-template-columns: 1fr; } }
.qr { background: #fff; border-radius: var(--bo); border: 1px solid #e3e3df; padding: 1rem; display: grid; place-items: center; aspect-ratio: 1 / 1.08; max-width: 22rem; margin: 0 auto; width: 100%; }
.qr img { width: 100%; height: auto; }
.dong-tt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--vien); }
.dong-tt:last-child { border-bottom: 0; }
.dong-tt > span { color: var(--chu-2); font-size: .9375rem; flex: 0 0 auto; }
.dong-tt > b { text-align: right; overflow-wrap: anywhere; display: flex; align-items: center; gap: .5rem; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.nut-chep { border: 1px solid var(--vien-o); background: transparent; color: var(--chu); border-radius: .25rem; padding: .2rem .6rem; font-size: .8125rem; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.nut-chep:hover { border-color: var(--chu); }
.trang-thai { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; padding: .3rem .75rem; border-radius: .25rem; border: 1px solid var(--vien); background: var(--the); font-size: .9375rem; }
.trang-thai::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.trang-thai.cho { color: var(--canh-bao); }
.trang-thai.cho::before { animation: nhay 1.6s infinite; }
.trang-thai.da_tra { color: var(--tot); }
.trang-thai.het_han { color: var(--chu-3); }
.key-lon {
  font-family: var(--mono); font-size: clamp(1.05rem, 5vw, 2.1rem); font-weight: 700; white-space: nowrap;
  letter-spacing: .04em; padding: 1.25rem .75rem; border-radius: var(--bo); border: 1px dashed var(--vien-o); background: var(--nen-2); text-align: center; margin: 1rem 0;
}
.canh-bao-luu { padding: .9rem 1.1rem; border-left: 3px solid var(--nhan); background: var(--nhan-nen); color: var(--chu); font-size: .9375rem; }
.ds-don { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--vien); }
.ds-don a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .25rem; border-bottom: 1px solid var(--vien); color: var(--chu); text-decoration: none; }
.ds-don a:hover { background: var(--nen-2); }

/* ---------------------------------------------------------------- hoi dap */
.hoi-dap { display: grid; gap: 0; border-top: 1px solid var(--chu); margin-bottom: 3rem; }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::before, .hoi-dap summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: .8rem; height: 2px; background: var(--chu-2); transition: transform .2s; }
.hoi-dap summary::after { transform: rotate(90deg); }
.hoi-dap details[open] summary::after { transform: rotate(0deg); }
.hoi-dap summary:hover { color: var(--nhan-chu); }
.hoi-dap details p { margin: 0 0 1.2rem; color: var(--chu-2); max-width: 42rem; }
.hoi-dap:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- lien he */
#kenh-lien-he.luoi { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--chu); }
.kenh { display: flex; align-items: center; gap: 1rem; color: var(--chu); border: 0; border-bottom: 1px solid var(--vien); border-radius: 0; padding: 1.1rem 0; background: transparent; text-decoration: none; }
.kenh:hover { text-decoration: none; }
a.kenh:hover b { color: var(--nhan-chu); }
a.kenh::after { content: "\2192"; margin-left: auto; color: var(--chu-3); }
.kenh .bieu-tuong { flex: 0 0 auto; }
.kenh b { display: block; }
.kenh span { color: var(--chu-2); font-size: .9375rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- chan trang */
.chan { background: var(--nen-2); color: var(--chu-3); font-size: .75rem; line-height: 1.5; padding: 2.5rem var(--le) 2rem; margin-top: auto; }
.chan-trong { max-width: var(--rong); margin: 0 auto; display: grid; gap: 1.25rem; }
.chan-cot { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); padding-bottom: 2rem; border-bottom: 1px solid var(--vien); }
.chan h4 { margin: 0 0 .6rem; color: var(--chu); font-size: .75rem; font-weight: 600; }
.chan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.chan a { color: var(--chu-2); text-decoration: none; }
.chan a:hover { color: var(--chu); text-decoration: underline; }
.chan-trong { max-width: 64rem; }

/* ---------------------------------------------------------------- ngon ngu (VI / EN, 11/2026) */
/* Nut doi ngon ngu tren dau trang: chu nho, vien mong, luon hien (ke ca menu dien thoai). */
.dau-phai .nut-nn { font-weight: 600; letter-spacing: .02em; padding: .1rem .45rem; border: 1px solid var(--vien); border-radius: .4rem; line-height: 1.4; }
@media (max-width: 62rem) { .dau-phai .lien-ket-nho.nut-nn { display: inline-block; } }
.chan-nn { display: flex; gap: .25rem; align-items: center; color: var(--chu-2); }
.chan-nn [aria-current] { color: var(--chu); font-weight: 600; }
/* Goi y mot lan cho trinh duyet khong phai tieng Viet (khong tu chuyen trang). */
.goi-y-nn { position: fixed; z-index: 60; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2rem); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center;
  padding: .6rem .6rem .6rem 1.1rem; border-radius: 1.25rem; background: var(--nen); color: var(--chu); font-size: .875rem;
  border: 1px solid var(--vien); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .14); }
.goi-y-nn .nut-nho { min-height: 2rem; padding: .25rem .9rem; font-size: .8125rem; }
.goi-y-nn-dong { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--nen-2); color: var(--chu-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.goi-y-nn-dong:hover { color: var(--chu); }

/* ---------------------------------------------------------------- hieu ung */
.hien-dan { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--cong), transform .9s var(--cong); transition-delay: var(--tre, 0s); }
.hien-dan.da-hien { opacity: 1; transform: none; }
.khong-js .hien-dan { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hien-dan { opacity: 1; transform: none; transition: none; }
  .anh-dau { animation: none !important; transform: none !important; opacity: 1 !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.dang-tai { color: var(--chu-3); padding: 2rem 0; }
.giua .dang-tai, .luoi > .dang-tai, .dang-tai.khung-trong { text-align: center; }
.khung-trong { min-height: 12rem; }

/* ---------------------------------------------------------------- bo sung trang con */
.khoi-trong-tren { padding-top: 0; }
.ds-gon { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--chu-2); display: grid; gap: .45rem; }
.chuan-bi { margin-bottom: 0; }
.trong-hep > .tieu-de-vua { margin-top: 2.5rem; }
.trong-hep > .tieu-de-vua:first-child, .cot-phai > .tieu-de-vua:first-child { margin-top: 0; }
.cot-phai > .tieu-de-vua { margin-top: 0; }
.khung-404 { min-height: 60vh; }
.khoi-don { padding-top: clamp(2rem, 6vw, 4rem); }
.trong-hep > .the + .the, .trong-hep > .the + p, .cot-phai > .the + p, .cot-phai > p + .the, .cot-phai > div + .the { margin-top: 1.5rem; }
.luoi + .mat-sau, .luoi + .the { margin-top: 1.5rem; }
.dau-muc { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.dau-muc.giua { margin-left: auto; margin-right: auto; }
.dau-muc .tieu-de { margin-bottom: 0; }
.giua + .luoi, .giua + .tinh-nang-lon, .giua + .bang-gia, .giua + .cho-cap-nhat, .giua + .buoc { margin-top: clamp(2rem, 5vw, 3rem); }
.luoi + .giua, .luoi + p { margin-top: 2rem; }
.tieu-de-lon + .mo-ta-lon { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- cua hang: mua kem, khuyen mai, trang don */
.nhan-km { display: inline-block; margin: 0; padding: .25rem .6rem; border-radius: .25rem; border: 1px solid currentColor; color: var(--nhan-chu); font-size: .8125rem; font-weight: 600; justify-self: start; }
.giua .nhan-km, .dau-muc .nhan-km { margin-top: 1rem; }
.the-goi .nhan-km { align-self: flex-start; margin-top: .35rem; }
.ds-kem { display: grid; gap: .6rem; }
.o-kem { border: 1px solid var(--vien-o); border-radius: var(--bo-nho); background: var(--nen); transition: border-color .15s, box-shadow .15s; }
.o-kem.chon { border-color: var(--nhan); box-shadow: inset 0 0 0 1px var(--nhan); }
.kem-dau { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; cursor: pointer; }
.kem-dau input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; accent-color: var(--nhan); margin: 0; }
.kem-dau > span:first-of-type { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.kem-dau b { font-size: 1.0625rem; }
.kem-dau small { color: var(--chu-2); font-size: .875rem; }
.kem-dau .gia-nho { color: var(--chu-2); font-size: .9rem; white-space: nowrap; }
.chon-goi-nho { padding: 0 1rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.chon-goi-nho .o-chon { padding: .65rem .85rem; }
.chon-goi-nho .o-chon .gia-nho { font-size: 1.0625rem; margin-top: 0; }
.chi-tiet-tong { display: grid; gap: .35rem; padding-top: 1rem; border-top: 1px solid var(--vien); color: var(--chu-2); font-size: .9375rem; }
.chi-tiet-tong div { display: flex; justify-content: space-between; gap: 1rem; }
.chi-tiet-tong + .tong { border-top: 0; padding-top: .25rem; }
.hang-kiem { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.don .the > p + p { margin-top: .75rem; }
.luu-ma-don { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--bo-nho); border: 1px solid var(--vien); background: var(--the); }
.luu-ma-don > div { display: grid; gap: .1rem; flex: 1 1 14rem; min-width: 0; }
.luu-ma-don > div span { color: var(--chu-2); font-size: .875rem; }
.ma-don-lon { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.ds-kem-da-co { display: grid; gap: 0; margin-top: 1rem; text-align: left; border-top: 1px solid var(--vien); }
.ds-kem-da-co div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--vien); }
.ds-kem-da-co b { color: var(--tot); white-space: nowrap; }
.luu-ma-don + .the { margin-top: 1rem; }

/* khoi con trong cot phai */
.khoi-con { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cot-trai .chu-them .tieu-de-vua { font-size: 1.0625rem; color: var(--chu); margin-bottom: .5rem; }
.cot-trai .chu-them .ds-gon { padding-left: 1rem; }
/* trang don: dau trang canh giua -> noi dung hep cung canh giua */
#khung-don .trong-hep > * { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- trang chu: cau chuyen ket noi (11/2026)
   Thong diep chinh: cai app -> nhap key -> ghep noi mot lan (khong root) -> cam cong Android Auto -> man xe chay giao dien
   BoxStream (khong can app Android Auto cua Google). San dinh (sticky), phan cuon NGAN: 7 buoc x ~0.43 man = 3 man
   (--kn-cuon), js/cau-chuyen.js doc vi tri cuon -> dat data-* tren .kn, CSS lo chuyen dong (chi transform / opacity).
   Nut "Bo qua" cuon qua het cau chuyen. prefers-reduced-motion: khong dinh, khoi cao binh thuong, chon buoc bang nut.
   Xe + dien thoai luon cung hien tu khung dau (bo cuc giong nhau moi buoc); man xe chi doi tu buoc 04.
   Hinh ve trong .kn-canh dat theo % cua khung (ngang 16:10, doc 10:16); chu trong dien thoai theo cqw cua man dien thoai. */
.mo-dau-kn { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.mo-dau-kn .tieu-de-lon { max-width: 16ch; }
.hai-khong { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; }
.hai-khong li { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); letter-spacing: -.015em; line-height: 1.3; text-align: left; }
.hai-khong .ic { width: 1.5rem; height: 1.5rem; color: var(--nhan-chu); }
.ds-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-left: auto; margin-right: auto; }
@media (max-width: 52rem) { .ds-2 { grid-template-columns: 1fr; } }
/* logo Android Auto + gach cheo = "khong can" */
.aa-khong { position: relative; flex: none; display: inline-block; width: 1.75rem; height: 1.75rem; }
.aa-khong img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .35)); }
.aa-khong::after { content: ""; position: absolute; left: 50%; top: 50%; width: 128%; height: .14rem; margin: -.07rem 0 0 -64%; border-radius: 99px;
  background: var(--chu); box-shadow: 0 0 0 .1rem var(--nen); transform: rotate(-45deg); }
@media (prefers-color-scheme: dark) { .aa-khong img { filter: none; } }
.khoi-xam .aa-khong-tn::after { box-shadow: 0 0 0 .12rem var(--nen); }
.aa-khong-tn { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; }
.aa-khong-tn::after { height: .2rem; margin-top: -.1rem; }
.aa-khong-tren { justify-self: center; width: 2.4em; height: 2.4em; margin-bottom: .35em; padding: .35em; border-radius: .7em; background: #fff; box-sizing: border-box; }
.aa-khong-tren img { filter: none; }
.aa-khong-tren::after { width: 118%; margin-left: -59%; height: .16em; margin-top: -.08em; background: #000; box-shadow: 0 0 0 .1em #fff; }

.kn { position: relative; --kn-cuon: 490svh; --kn-h: clamp(28rem, min(calc(100svh - 2.75rem), 50vw), 48rem);
  height: calc(var(--kn-h) + var(--kn-cuon)); --dt-nen: #f2f2f7; --dt-the: #fff; --dt-chu: #000; --dt-phu: #6e6e73; --dt-vien: #d1d1d6; --cap: #3a3a3c; }
@media (prefers-color-scheme: dark) { .kn { --dt-nen: #000; --dt-the: #1c1c1e; --dt-chu: #fff; --dt-phu: #8e8e93; --dt-vien: #38383a; --cap: #8e8e93; } }
.kn-san {
  position: sticky; top: max(2.75rem, calc((100svh + 2.75rem - var(--kn-h)) / 2)); height: var(--kn-h); max-width: calc(96rem + 2 * var(--le)); margin: 0 auto;
  padding: clamp(.75rem, 2vh, 1.5rem) var(--le); display: grid; gap: .5rem clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "chu khung" "chu dk";
}
.kn-chu { grid-area: chu; align-self: center; }
.kn-buoc { list-style: none; margin: 0; padding: 0; }
.kn-buoc li { display: grid; grid-template-rows: auto 0fr; padding: .55rem 0; opacity: .34; transition: opacity .6s var(--cong), grid-template-rows .6s var(--cong); }
.kn-buoc li.dang { opacity: 1; grid-template-rows: auto 1fr; }
.kn-buoc h3 { margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.kn-so { display: none; }
.kn-buoc p { margin: 0; min-height: 0; overflow: hidden; color: var(--chu-2); font-size: .9375rem; line-height: 1.5; }
.kn-buoc li.dang p { padding-top: .35rem; }
.kn-khung { grid-area: khung; container-type: size; min-height: 0; display: grid; place-items: center; cursor: pointer; }
.kn-canh { position: relative; width: min(100cqw, 160cqh); aspect-ratio: 16 / 10; container-type: size; }
.kn-dk { grid-area: dk; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.kn-tien { display: flex; }
.kn-tien button { width: 2.25rem; height: 2.75rem; border: 0; background: none; padding: 0 .3rem; cursor: pointer; }
.kn-tien button::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--vien); transition: background-color .4s var(--cong); }
.kn-tien button[aria-current="step"]::before { background: var(--chu); }
.kn-tien button.qua::before { background: var(--chu-3); }
.kn-dk { gap: .5rem; }
.kn-lui, .kn-toi { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; color: var(--chu-2); }
.kn-lui:hover, .kn-toi:hover { background: var(--nen-2); color: var(--chu); }
.kn-lui span, .kn-toi span { width: .6rem; height: .6rem; border: solid currentColor; border-width: 0 0 .14rem .14rem; transform: translateX(.12rem) rotate(45deg); }
.kn-toi span { transform: translateX(-.12rem) rotate(-135deg); }
.kn-bo { margin-left: .5rem; min-height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: 99px; background: var(--nen-2); color: var(--chu-2); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.kn-bo:hover { background: var(--vien); color: var(--chu); }
.kn-dk button:focus-visible { outline: 2px solid var(--nhan-chu); outline-offset: 2px; }
@media (min-width: 56.01rem) { .kn-buoc li { cursor: pointer; } .kn-buoc li:not(.dang):hover { opacity: .6; } }
.kn-buoc li:focus-visible { outline: 2px solid var(--nhan-chu); outline-offset: 2px; border-radius: .5rem; }

/* xe */
.kn-xe { position: absolute; left: 23%; top: 3%; width: 76%; height: 86%; display: flex; flex-direction: column; }
.kn-vien { flex: none; background: #0b0b0c; padding: 1.1cqw; border-radius: 2cqw; box-shadow: 0 0 0 1px #2c2c2e; }
.kn-man-xe { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; background: #000; container-type: inline-size; }
.kn-x { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity .8s var(--cong), transform 1s var(--cong); }
.kn-x img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-x.hien { opacity: 1; transform: none; }
.kn-taplo { flex: 1; width: 92%; margin: 0 auto; background: #2c2c2e; border-radius: 0 0 2.4cqw 2.4cqw; display: flex; align-items: center; justify-content: flex-end; gap: 2.5%; padding: 0 6%; }
@media (prefers-color-scheme: dark) { .kn-taplo { background: #1c1c1e; box-shadow: inset 0 0 0 1px #2c2c2e; } }
.kn-khe { width: 9%; height: 14%; border-radius: 99px; background: #111; }
.kn-cong { position: absolute; left: 12%; top: 89.5%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3cqw; }
.kn-cong i { display: block; width: 2.6cqw; height: 1.1cqw; border-radius: .3cqw; background: #000; box-shadow: 0 0 0 .25cqw #48484a; }
.kn-cong em { font-style: normal; font-size: max(.5rem, .9cqw); font-weight: 600; letter-spacing: .06em; color: #8e8e93; }

/* man goc cua xe (truoc khi ket noi) */
.kn-goc { background: #141416; color: #e5e5ea; font-size: 2.3cqw; display: grid; grid-template-rows: auto 1fr auto; padding: 3.5% 4.5%; }
.kn-goc-tren { display: flex; justify-content: space-between; color: #aeaeb2; }
.kn-goc-tren b { color: #fff; font-weight: 600; }
.kn-goc-giua { display: grid; place-content: center; text-align: center; gap: .2em; }
.kn-goc-giua b { font-size: 3.2em; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.kn-goc-nho { color: #8e8e93; font-size: .9em; }
.kn-goc-o { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; }
.kn-goc-o span { display: grid; justify-items: center; gap: .4em; padding: 5% 0 6%; border-radius: .8em; background: #232326; font-size: .9em; color: #c7c7cc; transition: box-shadow .6s var(--cong); }
.kn-goc-o svg { width: 1.9em; height: 1.9em; }
.kn[data-pha="noi"] .kn-goc-aa { box-shadow: inset 0 0 0 .18em #4C8DFF; color: #fff; }
.kn-mo { background: #000; display: grid; place-content: center; justify-items: center; gap: 1.2cqw; color: #fff; font-size: 3cqw; font-weight: 600; letter-spacing: -.02em; }
.kn-mo img { width: 13cqw; height: 13cqw; border-radius: 22%; transform: scale(.85); transition: transform 1.2s var(--cong); }
.kn-mo.hien img { transform: none; }

/* cap + dau cam */
.kn-cap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kn-cap path { fill: none; stroke: var(--cap); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.1s var(--cong), opacity .2s; }
.kn-cap-doc { display: none; }
.kn[data-cap="1"] .kn-cap path { stroke-dashoffset: 0; opacity: 1; }
.kn-chau { position: absolute; left: 32.1%; top: 80.5%; width: 2.2cqw; height: 3.4cqw; margin: -.6cqw 0 0 -1.1cqw; border-radius: .5cqw; background: var(--cap); opacity: 0; transform: translateY(1.5cqw); transition: opacity .4s var(--cong) .7s, transform .5s var(--cong) .7s; }
.kn[data-cap="1"] .kn-chau { opacity: 1; transform: none; }

/* dien thoai: kich thuoc lon (giua khung) la goc; thu nho = transform (thu nho thi chu van net) */
.kn-dt { position: absolute; left: 36.45%; top: 3%; height: 94%; aspect-ratio: 9 / 19.5; background: #0b0b0c; border-radius: 14% / 6.5%; box-shadow: 0 0 0 1px #3a3a3c;
  transform-origin: 0 0; transition: transform 1.1s var(--cong); }
.kn-dt { transform: translate(-33.45cqw, 30cqh) scale(.66); }
.kn-dt-man { position: absolute; left: 3.6%; right: 3.6%; top: 1.7%; bottom: 1.7%; border-radius: 11% / 5%; overflow: hidden; background: var(--dt-nen); color: var(--dt-chu); container-type: size; }
.kn-dt-man > * { font-size: 5.4cqw; line-height: 1.3; }
.kn-tt { position: absolute; left: 0; right: 0; top: 0; height: 7.5%; display: flex; align-items: center; justify-content: space-between; padding: 0 10%; z-index: 3; font-size: 4.6cqw; }
.kn-tt b { font-weight: 600; }
.kn-tt::before { content: ""; position: absolute; left: 50%; top: 32%; width: 6cqw; height: 6cqw; margin-left: -3cqw; border-radius: 50%; background: #000; }
.kn-tt-pin { width: 1.6em; height: .75em; border-radius: .2em; border: .1em solid currentColor; opacity: .8; }
.kn-m { position: absolute; left: 0; right: 0; top: 7.5%; bottom: 0; padding: 4% 7% 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(8%);
  transition: opacity .55s var(--cong), transform .7s var(--cong); pointer-events: none; }
.kn-m.hien { opacity: 1; transform: none; }
.kn-lon { font-size: 1.55em; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.kn-phu { color: var(--dt-phu); font-size: .85em; margin-top: .3em; }
.kn-nut-dt { display: block; margin-top: auto; margin-bottom: 9%; padding: .75em; border-radius: .9em; background: #1F6BF0; color: #fff; font-weight: 600; text-align: center; font-size: .95em; }

/* 01 trinh duyet + hop cai dat */
.kn-web { align-items: center; text-align: center; }
.kn-url { align-self: stretch; padding: .45em .8em; border-radius: 99px; background: var(--dt-the); color: var(--dt-phu); font-size: .8em; text-align: center; box-shadow: 0 0 0 1px var(--dt-vien); }
.kn-web img { width: 34%; height: auto; border-radius: 22%; margin: 22% 0 7%; }
.kn-web .kn-nut-dt { align-self: stretch; }
.kn-m.kn-web.hien { transition: opacity .55s var(--cong), transform .7s var(--cong), filter .6s var(--cong); }
.kn[data-dt="cai"] .kn-web { filter: brightness(.55); transform: none; }
.kn-cai { padding: 0; justify-content: flex-end; transform: none; }
.kn-tam { background: var(--dt-the); border-radius: 1.4em 1.4em 0 0; padding: 1.4em 1.2em 2.2em; transform: translateY(100%); transition: transform .7s var(--cong); }
.kn-cai.hien .kn-tam { transform: none; }
.kn-tam-dau { display: flex; align-items: center; gap: .6em; }
.kn-tam-dau img { width: 2.2em; height: 2.2em; border-radius: 22%; }
.kn-tam p { margin: .9em 0 1.2em; font-size: .95em; }
.kn-tam-nut { display: flex; justify-content: flex-end; gap: 1.6em; color: #1F6BF0; font-size: .95em; }
.kn-tam-nut b { font-weight: 600; }
.kn-xong-cai { display: none; }
.kn[data-pha="xong"] .kn-xong-cai { display: block; }
.kn[data-pha="xong"] .kn-hoi { display: none; }

/* 02 kich hoat */
.kn-kh { padding-top: 12%; }
.kn-nhan { margin-top: 2.2em; font-size: .7em; font-weight: 600; color: var(--dt-phu); letter-spacing: .04em; }
.kn-o { display: flex; align-items: center; justify-content: space-between; margin-top: .45em; padding: .8em .9em; border-radius: .8em; background: var(--dt-the); box-shadow: inset 0 0 0 .1em #1F6BF0; }
.kn-o em { font-style: normal; color: #1F6BF0; font-weight: 600; font-size: .9em; }
.kn-key { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; font-family: var(--mono); font-size: .86em; font-weight: 600; vertical-align: bottom; }
.kn-key span { display: inline-block; width: 19ch; }
.kn[data-dt="kh"] .kn-key { animation: kn-go 1.5s steps(19, end) .45s forwards; }
.kn[data-dt="kh"][data-pha="xong"] .kn-key { animation: none; width: 19ch; }
@keyframes kn-go { to { width: 19ch; } }
.kn-goi-y, .kn-da { font-size: .75em; margin-top: .6em; color: var(--dt-phu); }
.kn-da, .kn-roi { display: none; }
.kn-da { color: #1F6BF0; font-weight: 600; }
.kn[data-pha="xong"] .kn-da, .kn[data-pha="xong"] .kn-roi { display: block; }
.kn[data-pha="xong"] .kn-goi-y, .kn[data-pha="xong"] .kn-chua { display: none; }

/* 03 ghep noi */
.kn-cd-dau { font-size: 1.25em; font-weight: 700; margin: 12% 0 .8em; letter-spacing: -.01em; }
.kn-cd-dong { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .8em .2em; border-bottom: 1px solid var(--dt-vien); font-size: .85em; }
.kn-cong-tac { flex: none; width: 2.4em; height: 1.4em; border-radius: 99px; background: #1F6BF0; position: relative; }
.kn-cong-tac::after { content: ""; position: absolute; right: .15em; top: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }
.kn-hop { margin: 14% 2% 0; padding: 1.2em 1em; border-radius: 1.2em; background: var(--dt-the); display: grid; gap: .3em; text-align: center; box-shadow: 0 .6em 2em rgba(0, 0, 0, .14); transition: opacity .5s var(--cong); }
.kn-hop span { color: var(--dt-phu); font-size: .8em; }
.kn-hop strong { font-size: 1.7em; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.kn[data-pha="xong"] .kn-hop { opacity: .25; }
.kn-tb { position: absolute; left: 4%; right: 4%; top: 1.5%; padding: .8em .9em .9em; border-radius: 1.1em; background: var(--dt-the); box-shadow: 0 .5em 1.8em rgba(0, 0, 0, .22); transform: translateY(-130%); transition: transform .8s var(--cong) .35s; }
.kn-gn.hien .kn-tb { transform: none; }
.kn-tb-dau { display: flex; align-items: center; gap: .45em; color: var(--dt-phu); font-size: .72em; }
.kn-tb-dau img { width: 1.5em; height: 1.5em; border-radius: 22%; }
.kn-tb b { display: block; font-size: .9em; margin-top: .45em; }
.kn-tb-xong span { display: block; color: var(--dt-phu); font-size: .78em; margin-top: .15em; }
.kn-sau { display: flex; gap: 3%; margin-top: .55em; }
.kn-sau i { flex: 1; font-style: normal; text-align: center; padding: .35em 0; border-radius: .45em; background: var(--dt-nen); font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; }
.kn[data-dt="gn"] .kn-sau i { opacity: 1; }
.kn[data-dt="gn"] .kn-sau i:nth-child(1) { transition-delay: 1.1s; } .kn[data-dt="gn"] .kn-sau i:nth-child(2) { transition-delay: 1.25s; }
.kn[data-dt="gn"] .kn-sau i:nth-child(3) { transition-delay: 1.4s; } .kn[data-dt="gn"] .kn-sau i:nth-child(4) { transition-delay: 1.55s; }
.kn[data-dt="gn"] .kn-sau i:nth-child(5) { transition-delay: 1.7s; } .kn[data-dt="gn"] .kn-sau i:nth-child(6) { transition-delay: 1.85s; }
.kn-tb-xong { display: none; }
.kn[data-pha="xong"] .kn-tb-xong { display: block; }
.kn[data-pha="xong"] .kn-tb-nhap { display: none; }

/* 04-06 tab Ket noi */
.kn-kn { padding-top: 10%; }
.kn-the { display: flex; align-items: center; gap: .8em; margin-top: 1em; padding: 1em; border-radius: 1.1em; background: var(--dt-the); }
.kn-the b { display: block; font-size: 1em; }
.kn-the span { display: block; color: var(--dt-phu); font-size: .75em; margin-top: .15em; }
.kn-vong { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; border: .3em solid var(--dt-vien); transition: border-color .6s var(--cong), background-color .6s var(--cong); }
.kn[data-pha="noi"] .kn-vong { border-color: #1F6BF0 var(--dt-vien) var(--dt-vien); animation: kn-quay 1s linear infinite; }
.kn[data-pha="chieu"] .kn-vong { border-color: #1F6BF0; background: #1F6BF0; box-shadow: inset 0 0 0 .3em var(--dt-the); }
@keyframes kn-quay { to { transform: rotate(360deg); } }
.kn-tt-noi, .kn-tt-chieu { display: none !important; }
.kn[data-pha="noi"] .kn-tt-cho, .kn[data-pha="chieu"] .kn-tt-cho { display: none !important; }
.kn[data-pha="noi"] .kn-tt-noi, .kn[data-pha="chieu"] .kn-tt-chieu { display: block !important; }
.kn-ong { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: .62em; color: var(--dt-phu); }
.kn-ong li { position: relative; display: grid; justify-items: center; gap: .55em; }
.kn-ong li::before { content: ""; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--dt-vien); position: relative; z-index: 1; transition: background-color .5s var(--cong); }
.kn-ong li + li::after { content: ""; position: absolute; top: .65em; right: 50%; width: 100%; height: .2em; background: var(--dt-vien); transition: background-color .5s var(--cong); }
.kn-ong li:nth-child(-n+2) { color: var(--dt-chu); }
.kn-ong li:nth-child(-n+2)::before, .kn-ong li:nth-child(2)::after { background: #1F6BF0; }
.kn[data-pha="noi"] .kn-ong li:nth-child(3), .kn[data-pha="chieu"] .kn-ong li { color: var(--dt-chu); }
.kn[data-pha="noi"] .kn-ong li:nth-child(3)::before, .kn[data-pha="noi"] .kn-ong li:nth-child(3)::after,
.kn[data-pha="chieu"] .kn-ong li::before, .kn[data-pha="chieu"] .kn-ong li::after { background: #1F6BF0; }
.kn-ve { margin-bottom: 30%; opacity: 0; transition: opacity .5s var(--cong); }
.kn[data-pha="chieu"] .kn-ve { opacity: 1; }

/* 07 tab Giao dien */
.kn-gd { padding-top: 10%; }
.kn-chon { margin-top: .9em; padding: .55em; border-radius: 1em; background: var(--dt-the); box-shadow: inset 0 0 0 .14em transparent; transition: box-shadow .5s var(--cong); }
.kn-chon img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .55em; }
.kn-chon b { display: block; margin-top: .45em; font-size: .95em; }
.kn-chon span { display: block; color: var(--dt-phu); font-size: .7em; }
.kn[data-pha="kinh"] .kn-chon-kinh, .kn[data-pha="bando"] .kn-chon-bando { box-shadow: inset 0 0 0 .14em #1F6BF0; }
.kn-tab { top: auto; padding: .6em 4% 1.2em; flex-direction: row; justify-content: space-around; background: var(--dt-the); border-top: 1px solid var(--dt-vien); transform: none; }
.kn-tab span { display: grid; justify-items: center; gap: .2em; font-size: .55em; color: var(--dt-phu); }
.kn-tab svg { width: 2.1em; height: 2.1em; }
.kn[data-dt="kn"] .kn-tab-kn, .kn[data-dt="gd"] .kn-tab-gd { color: #1F6BF0; }

/* nhan noi */
.kn-noi { position: absolute; display: grid; gap: .25em; padding: .9em 1.15em; border-radius: 1em; font-size: clamp(.75rem, 1.6cqw, 1.0625rem); line-height: 1.3;
  background: var(--nen); box-shadow: 0 0 0 1px var(--vien), 0 .5em 2em rgba(0, 0, 0, .1); opacity: 0; transform: translateY(1.2em); transition: opacity .6s var(--cong), transform .8s var(--cong); }
.kn-noi b { font-weight: 600; font-size: 1.12em; letter-spacing: -.015em; }
.kn-noi span { color: var(--chu-2); font-size: .9em; }
.kn-noi-root { left: 36%; right: 8%; top: 70%; text-align: center; }
.kn-noi-kd { left: 52%; top: 73.5%; max-width: 40%; }
.kn-noi-aa { left: 31%; right: 3%; top: 66%; text-align: center; background: #1F6BF0; box-shadow: 0 .5em 2em rgba(31, 107, 240, .3); }
.kn-noi-aa b { color: #fff; font-size: 1.3em; } .kn-noi-aa span { color: rgba(255, 255, 255, .86); }
.kn[data-noi="root"] .kn-noi-root, .kn[data-noi="kd"] .kn-noi-kd, .kn[data-noi="aa"] .kn-noi-aa { opacity: 1; transform: none; transition-delay: .5s; }

/* dien thoai / may tinh bang doc: hinh tren, mot buoc o duoi */
@media (max-width: 56rem) {
  .kn { --kn-h: clamp(30rem, calc(100svh - 2.75rem), 52rem); }
  .kn-san { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "khung" "chu" "dk"; gap: .5rem; padding-top: .5rem; padding-bottom: .25rem; }
  .kn-buoc { display: grid; }
  .kn-buoc li { grid-area: 1 / 1; grid-template-rows: auto auto; align-content: start; opacity: 0; padding: 0; transition: opacity .5s var(--cong); }
  .kn-buoc li.dang { grid-template-rows: auto auto; }
  .kn-buoc li p, .kn-buoc li.dang p { padding-top: .3rem; font-size: .875rem; }
  .kn-so { display: block; font-family: var(--mono); font-size: .75rem; font-weight: 600; color: var(--nhan-chu); margin-bottom: .15rem; }
  .kn-canh { width: min(100cqw, 62.5cqh); aspect-ratio: 10 / 16; }
  .kn-xe { left: 2%; top: 2%; width: 96%; height: 45%; }
  .kn-vien { padding: 1.6cqw; border-radius: 3.2cqw; }
  .kn-man-xe { border-radius: 1.6cqw; }
  .kn-taplo { border-radius: 0 0 4cqw 4cqw; justify-content: flex-start; padding: 0 8%; }
  .kn-cong { left: 88%; top: 88%; }
  .kn-cong i { width: 5cqw; height: 2.1cqw; border-radius: .6cqw; box-shadow: 0 0 0 .5cqw #48484a; }
  .kn-cong em { font-size: 1.9cqw; }
  .kn-cap-ngang { display: none; } .kn-cap-doc { display: block; }
  .kn-chau { left: 86.5%; top: 40.6%; width: 4.2cqw; height: 6.4cqw; margin: -1cqw 0 0 -2.1cqw; border-radius: 1cqw; }
  .kn-dt { left: 16.05%; top: 4%; height: 92%; }
  .kn-dt { transform: translate(13.95cqw, 44cqh) scale(.56); }
  .kn-noi { font-size: 3.5cqw; }
  .kn-noi-root { left: 1%; right: auto; top: 58%; max-width: 27.5%; padding: .7em .8em; text-align: left; }
  .kn-noi-kd { left: 1%; top: 53%; max-width: 30%; padding: .7em .8em; }
  .kn-noi-aa { left: 6%; right: 16%; top: 31%; padding: .7em .8em; font-size: 3cqw; }
  .kn-noi-aa b { font-size: 1.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .kn { height: auto; }
  .kn-san { position: relative; top: auto; }
  .kn-key { width: 19ch !important; animation: none !important; }
  .kn[data-pha="noi"] .kn-vong { animation: none; }
}
@media (max-width: 30rem) { .kn-lui, .kn-toi { display: none; } .kn-tien button { width: 1.75rem; padding: 0 .22rem; } }
@media (max-width: 36rem) { .hai-khong { flex-direction: column; align-items: center; gap: .6rem; } .hai-khong li { max-width: 20rem; } }

/* ---------------------------------------------------------------- bang gia (thiet ke lai 11/2026, kieu trang gia / so sanh Apple)
   Dau trang: icon app + dai ba anh man xe (giua lon, hai ben lui sau). Key: 1 muc = the rong (gia trai, "Moi key gom" phai);
   2..4 muc = cac cot canh nhau (muc noiBat vien xanh) + luoi "Moi key gom" ben duoi. The "Key + goi", the goi, bang so sanh,
   dai tin cay, ba buoc co icon, hoi dap ngan. Chi xanh app + den / trang / xam. */
.bg-dau { padding: clamp(3rem, 7vw, 5rem) var(--le) 0; text-align: center; overflow: hidden; }
.bg-icon { width: clamp(4rem, 7vw, 5.5rem); height: auto; margin: 0 auto 1.25rem; border-radius: 22.5%; }
.bg-dau .mo-ta-lon { margin-left: auto; margin-right: auto; max-width: 36rem; }
.bg-dai { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: clamp(.5rem, 1.5vw, 1.25rem); max-width: 72rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.bg-dai .vien-man { box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .35); }
.bg-dai .vien-man:not(:nth-child(2)) { opacity: .55; transform: scale(.92); }
.bg-dai .vien-man:first-child { transform-origin: 100% 50%; }
.bg-dai .vien-man:last-child { transform-origin: 0 50%; }
.bg-dai img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(.4rem, .9vw, .9rem); }
@media (prefers-reduced-motion: no-preference) {
  .bg-dai .vien-man { animation: bg-len 1.1s var(--cong) both; }
  .bg-dai .vien-man:first-child, .bg-dai .vien-man:last-child { animation-name: bg-len-ben; animation-delay: .15s; }
}
@keyframes bg-len { from { opacity: 0; transform: translateY(2rem); } }
@keyframes bg-len-ben { from { opacity: 0; transform: translateY(2rem) scale(.92); } }
@media (max-width: 40rem) {
  .bg-dai { grid-template-columns: 1fr; max-width: 30rem; }
  .bg-dai .vien-man:not(:nth-child(2)) { display: none; }
}

.bg-khoi-key { padding-top: clamp(3rem, 7vw, 5rem); }
#thong-bao > .cho-cap-nhat { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bg-nhan { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chu-3); margin-bottom: .6rem; }
.noi-bat .bg-nhan, .bg-tron .bg-nhan { color: var(--nhan-chu); }
.bg-cot { display: flex; flex-direction: column; text-align: left; background: var(--nen-2); border-radius: 1.5rem; padding: clamp(1.75rem, 3vw, 2.5rem); }
.bg-cot.noi-bat { box-shadow: inset 0 0 0 2px var(--nhan); }
.bg-cot h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.bg-cot .gia { font-size: clamp(2.5rem, 5vw, 3.5rem); margin: 1rem 0 .25rem; }
.bg-han { margin: 0; font-weight: 600; color: var(--chu); }
.bg-cot .mat-sau { margin: .35rem 0 0; }
.bg-cot .khoang { flex: 1; min-height: 1.75rem; }
.bg-cot .nut { width: 100%; }
.bg-duoi-nut { margin: .75rem 0 0; text-align: center; font-size: .8125rem; color: var(--chu-3); }
/* mot muc */
.bg-mot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--nen-2); border-radius: 1.75rem; overflow: hidden; max-width: 64rem; margin: 0 auto; }
.bg-mot .bg-cot { background: transparent; border-radius: 0; padding: clamp(2rem, 4vw, 3rem); }
.bg-mot .bg-cot.noi-bat { box-shadow: none; }
.bg-mot .bg-gom { padding: clamp(2rem, 4vw, 3rem); border-left: 1px solid var(--vien); }
@media (max-width: 52rem) { .bg-mot { grid-template-columns: 1fr; } .bg-mot .bg-gom { border-left: 0; border-top: 1px solid var(--vien); } }
/* nhieu muc */
.bg-cac-cot { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); max-width: 64rem; margin: 0 auto; }
.bg-cac-cot.so-2 { max-width: 46rem; }
.bg-cac-cot.so-3 .bg-cot h3, .bg-cac-cot.so-4 .bg-cot h3 { font-size: 1.375rem; }
.bg-cac-cot.so-4 .bg-cot .gia { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.bg-gom-rong { max-width: 64rem; margin: clamp(1rem, 2vw, 1.5rem) auto 0; background: var(--nen-2); border-radius: 1.5rem; padding: clamp(1.75rem, 3vw, 2.5rem); }
.bg-gom-dau { margin: 0 0 1.5rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.bg-gom-dau span { font-weight: 400; color: var(--chu-2); font-size: .9375rem; letter-spacing: 0; }
.bg-tn { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem clamp(1rem, 2.5vw, 2rem); }
.bg-tn.hai-cot-tn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-tn.bon-cot-tn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .bg-tn.bon-cot-tn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .bg-tn.hai-cot-tn, .bg-tn.bon-cot-tn { grid-template-columns: 1fr; } }
.bg-tn li { display: flex; gap: .75rem; align-items: flex-start; }
.bg-tn .ic { width: 1.5rem; height: 1.5rem; color: var(--nhan-chu); margin-top: .05rem; }
.bg-tn b { display: block; font-size: .9375rem; line-height: 1.35; letter-spacing: -.01em; }
.bg-tn span { display: block; font-size: .8125rem; line-height: 1.4; color: var(--chu-2); margin-top: .15rem; }

/* key + goi */
.bg-tron { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; max-width: 64rem; margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  background: #000; color: #f5f5f7; border-radius: 1.75rem; overflow: hidden; --nhan-chu: #4C8DFF; --chu-2: #a1a1a6; }
@media (prefers-color-scheme: dark) { .bg-tron { background: #111113; box-shadow: inset 0 0 0 1px #2c2c2e; } }
.bg-tron-anh { align-self: stretch; background: #0b0b0c; padding: clamp(.75rem, 2vw, 1.5rem); display: grid; place-items: center; }
.bg-tron-anh img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(.4rem, .9vw, .9rem); }
.bg-tron-chu { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.bg-tron h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.bg-tron h3 + .mat-sau { margin: .5rem 0 0; font-size: .9375rem; }
.bg-tron .gia { font-size: clamp(2.25rem, 4.4vw, 3rem); margin: 1.25rem 0 .25rem; }
.bg-tron .gia small { color: #a1a1a6; }
.bg-cong { margin: 0 0 1.5rem; font-size: .875rem; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.bg-tron .hang-nut { gap: .75rem 1.5rem; }
.bg-tron .hang-nut + .mat-sau { margin: 1rem 0 0; }
@media (max-width: 52rem) { .bg-tron { grid-template-columns: 1fr; } }

/* the goi */
.bg-goi { max-width: 64rem; margin: 0 auto; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.bg-the-goi .anh-goi { display: grid; }
.bg-the-goi h3 a { color: inherit; text-decoration: none; }
.bg-the-goi h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bg-muc { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--vien); }
.bg-muc li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--vien); font-size: .9375rem; }
.bg-muc b { font-variant-numeric: tabular-nums; }
.bg-muc-trong { margin: .9rem 0 0; font-weight: 600; color: var(--chu-2); }
.bg-the-goi .chan-the { justify-content: flex-start; gap: .5rem 1.5rem; }
@media (min-width: 52rem) {
  .bg-goi:has(> .bg-the-goi:only-child) { grid-template-columns: 1fr; }
  .bg-the-goi:only-child { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bg-the-goi:only-child .anh-goi { aspect-ratio: auto; min-height: 100%; }
  .bg-the-goi:only-child .than { padding: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
  .bg-the-goi:only-child h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .bg-the-goi:only-child .chan-the { margin-top: 1.25rem; flex: 0 0 auto; }
}

/* bang so sanh */
.bg-bang { max-width: 56rem; margin: 0 auto; }
.bg-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bg-bang table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.bg-bang thead th { position: sticky; top: 0; padding: 0 .5rem 1rem; font-size: clamp(1rem, 1.6vw, 1.1875rem); font-weight: 600; letter-spacing: -.015em; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--chu); }
.bg-bang thead td { border-bottom: 1px solid var(--chu); }
.bg-bang tbody th { text-align: left; font-weight: 400; padding: .8rem 1rem .8rem 0; }
.bg-bang tbody td { text-align: center; padding: .8rem .5rem; width: 22%; }
.bg-bang tbody tr { border-bottom: 1px solid var(--vien); }
.bg-bang .bg-nhom { border-bottom: 0; }
.bg-bang .bg-nhom th { padding: 2rem 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chu-3); }
.bg-bang tbody .bg-nhom:first-child th { padding-top: 1.25rem; }
.bg-co { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; background: var(--nhan-chu); vertical-align: middle; }
.bg-khong { color: var(--chu-3); }
.bg-chu-o { font-size: .8125rem; color: var(--chu-2); }
.bg-dong-gia td { font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 36rem) { .bg-bang table { font-size: .875rem; } .bg-bang tbody td { width: 28%; } }

/* dai tin cay */
.bg-khoi-tin { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.bg-tin { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem clamp(1rem, 3vw, 2.5rem); text-align: center; max-width: 64rem; }
.bg-tin li { display: grid; justify-items: center; align-content: start; gap: .2rem; }
.bg-tin .ic { width: 2rem; height: 2rem; color: var(--nhan-chu); margin-bottom: .6rem; }
.bg-tin .aa-khong { width: 2rem; height: 2rem; margin-bottom: .6rem; }
.bg-tin .aa-khong::after { height: .18rem; margin-top: -.09rem; box-shadow: 0 0 0 .12rem var(--nen-2); }
.bg-tin b { font-size: 1.0625rem; letter-spacing: -.015em; line-height: 1.3; }
.bg-tin span:not(.aa-khong) { color: var(--chu-2); font-size: .9375rem; }

/* ba buoc */
.bg-buoc { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); max-width: 64rem; }
.bg-buoc li { position: relative; background: var(--nen-2); border-radius: 1.5rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.bg-buoc .bieu-tuong { width: 3rem; height: 3rem; margin-bottom: 1.25rem; }
.bg-buoc .bieu-tuong .ic { width: 1.5rem; height: 1.5rem; }
.bg-so { position: absolute; top: clamp(1.5rem, 2.6vw, 2.25rem); right: clamp(1.5rem, 2.6vw, 2.25rem); font-family: var(--mono); font-size: .8125rem; font-weight: 600; color: var(--chu-3); }
.bg-buoc h3 { margin: 0 0 .4rem; font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.3; }
.bg-buoc p { margin: 0; color: var(--chu-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 48rem) { .bg-buoc { grid-template-columns: 1fr; } }

/* hoi dap ngan */
.bg-hoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; max-width: 64rem; }
.bg-hoi .dau-muc { margin-bottom: 0; }
.bg-hoi .tieu-de { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.bg-hoi .mo-ta-lon { margin-top: .5rem; }
.bg-hoi .hoi-dap { margin-bottom: 0; }
@media (max-width: 52rem) { .bg-hoi { grid-template-columns: 1fr; } }