:root{
  --paper:#F3F4F6;      /* macOS-light page */
  --chrome:#FFFFFF;     /* window surfaces */
  --ink:#1E2128;
  --muted:#5B6272;
  --line:#E2E4E9;
  --accent:#E8620C;     /* MExplorer active-panel orange */
  --accent-soft:#FDEEE2;
  --deep:#23262E;       /* dark slate bands */
  --deep-ink:#EDEFF3;
  --ok:#2E8B57;
  --radius-win:14px;
  --radius-ui:8px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-0.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;max-width:22ch}
.section{padding:88px 0}
.lede{color:var(--muted);max-width:58ch;margin-top:14px}
kbd{font-family:var(--font-mono);font-size:.82em;background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;white-space:nowrap}
.band--deep kbd{background:#2E323C;border-color:#3B404C;color:var(--deep-ink)}

/* ---------- {{a11y.langSuggestion}} banner ---------- */
.lang-banner{display:none;background:var(--ink);color:#fff;font-size:.92rem}
.lang-banner.show{display:block}
.lang-banner .wrap{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding-top:10px;padding-bottom:10px}
.lang-banner a{color:#FFB27A;font-weight:600;text-decoration:none}
.lang-banner a:hover{text-decoration:underline}
.lang-banner button{margin-left:auto;background:none;border:1px solid #4A4F5B;color:#C9CDD6;border-radius:6px;padding:4px 12px;cursor:pointer;font:inherit;font-size:.85rem}
.lang-banner button:hover{border-color:#8A8F9B;color:#fff}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(243,244,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:26px;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.12rem;text-decoration:none}
/* Dấu hiệu ở đầu trang là CHÍNH icon của app, không phải một hình vẽ lại bằng CSS.
   Hình vẽ lại trông gần giống, và "gần giống" là thứ tệ nhất: người vừa thấy icon trên
   Dock không nhận ra đây cùng một sản phẩm. Ảnh 64px cho màn hình Retina ở 26pt. */
.logo-mark{width:26px;height:26px;flex:none;background:url("/img/icon-64.png") center/contain no-repeat}
nav.main{display:flex;gap:22px;font-size:.94rem}
nav.main a{text-decoration:none;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn{display:inline-block;font-weight:600;text-decoration:none;border-radius:var(--radius-ui);padding:10px 20px;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);font-size:.95rem}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#D25607}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted)}

/* Language dropdown */
.lang-menu{position:relative}
.lang-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.92rem;border:1px solid var(--line);background:#fff;border-radius:var(--radius-ui);padding:7px 12px}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu>summary:hover{color:var(--ink)}
.lang-menu[open]>summary{border-color:var(--muted)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,24,34,.14);padding:8px;display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:2px;width:290px;max-height:70vh;overflow:auto}
.lang-list a{display:block;padding:7px 11px;border-radius:7px;text-decoration:none;font-size:.9rem;color:var(--ink)}
.lang-list a:hover{background:var(--paper)}
.lang-list a[aria-current]{background:var(--accent-soft);color:#8A3B04;font-weight:600}

/* ---------- Hero ---------- */
.hero{padding:72px 0 84px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,3.7rem);font-weight:700}
.hero h1 .drag{white-space:nowrap}
.hero .sub{margin-top:18px;color:var(--muted);font-size:1.08rem;max-width:46ch}
.trustline{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.88rem;color:var(--muted)}
.trustline span{display:flex;align-items:center;gap:7px}
.trustline svg{flex:none}

/* Email capture */
.capture{margin-top:30px}
.capture form{display:flex;gap:10px;max-width:440px}
.capture input[type=email]{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-ui);font:inherit;background:#fff}
.capture input[type=email]:focus{border-color:var(--accent);outline:none}
.capture .note{margin-top:10px;font-size:.85rem;color:var(--muted)}
.capture .done{display:none;background:var(--accent-soft);border:1px solid #F3C9A6;border-radius:var(--radius-ui);padding:12px 16px;max-width:440px;font-size:.95rem}
.capture.sent form{display:none}
.capture.sent .done{display:block}

/* ---------- The living window ---------- */
.win{background:var(--chrome);border:1px solid var(--line);border-radius:var(--radius-win);box-shadow:0 24px 60px rgba(25,30,44,.16),0 2px 8px rgba(25,30,44,.06);font-family:var(--font-mono);font-size:12.5px;user-select:none;min-width:0}
.win-titlebar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.tl{width:12px;height:12px;border-radius:50%}
.tl.r{background:#FF5F57}.tl.y{background:#FEBC2E}.tl.g{background:#28C840}
.win-title{margin-left:8px;color:var(--muted);font-size:11.5px}
.win-path{display:flex;gap:6px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px;overflow:hidden;white-space:nowrap}
.win-path b{color:var(--ink);font-weight:600}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;position:relative}
.pane{border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#FBFBFC;transition:border-color .45s}
.pane.active{border-color:var(--accent)}
.pane-head{padding:7px 12px;background:#F1F2F5;border-bottom:1px solid var(--line);font-weight:600;font-size:11.5px;color:var(--muted);transition:background .45s,color .45s}
.pane.active .pane-head{background:var(--accent-soft);color:#8A3B04}
.rows{padding:5px 0}
.row{display:flex;align-items:center;gap:9px;padding:6px 12px;color:var(--ink)}
.row .ico{width:15px;height:12px;border-radius:3px;background:#7FA6D9;flex:none}
.row .ico.folder{background:#F0B34E;clip-path:polygon(0 22%,38% 22%,48% 0,100% 0,100% 100%,0 100%)}
.row .ico.zip{background:#9A8FD0}
.row .size{margin-left:auto;color:var(--muted);font-size:11px}
.row.dim{color:var(--muted)}
.row.picked{opacity:.32}
.row.landed{background:var(--accent-soft);animation:landflash 1.1s ease}
@keyframes landflash{0%{background:#F9C79A}100%{background:var(--accent-soft)}}
.ghost{position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;padding:6px 12px;background:#fff;border:1px solid var(--accent);border-radius:8px;box-shadow:0 10px 26px rgba(232,98,12,.3);opacity:0;pointer-events:none;transform:translate(var(--gx,0),var(--gy,0)) scale(.98);transition:transform 1.15s cubic-bezier(.5,.05,.3,1),opacity .3s}
.ghost.fly{opacity:1}
.win-status{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.win-status .msg{transition:color .3s}
.win-status .msg.ok{color:var(--ok);font-weight:600}
.win-caption{margin-top:16px;font-size:.88rem;color:var(--muted);text-align:center}
.win-caption b{color:var(--accent)}

/* ---------- Feature sections ---------- */
.keep{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.keep article h3{font-size:1.2rem;margin-bottom:8px}
.keep article p{color:var(--muted);font-size:.97rem;max-width:48ch}
.keep article{padding-left:18px;border-left:3px solid var(--accent)}

.tools{margin-top:52px;background:var(--chrome);border:1px solid var(--line);border-radius:18px;padding:8px}
.tools-head{padding:20px 26px 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.tools-head h3{font-size:1.25rem}
.tools-head .price-tag{font-family:var(--font-mono);font-size:.85rem;color:#8A3B04;background:var(--accent-soft);border-radius:999px;padding:3px 12px}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.tool{padding:22px 26px;border-top:1px solid var(--line)}
.tool:nth-child(odd){border-right:1px solid var(--line)}
.tool h4{font-size:1.02rem;margin-bottom:6px;font-family:var(--font-body);font-weight:600}
.tool p{color:var(--muted);font-size:.93rem}

/* Treemap */
.mapdemo{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:44px;gap:6px;margin-top:34px;max-width:620px}
.tile{border-radius:8px;background:#D8DCE4;position:relative}
.tile.t1{grid-column:span 3;grid-row:span 3;background:#C3CBD8}
.tile.t2{grid-column:span 2;grid-row:span 2;background:#CBD2DD}
.tile.t3{grid-column:span 1;grid-row:span 2}
.tile.t4{grid-column:span 2;grid-row:span 1}
.tile.t5{grid-column:span 1;grid-row:span 1}
.tile.grew{background:var(--accent-soft);border:2px solid var(--accent)}
.tile.grew::after{content:"Movies · grew +2.1 GB";position:absolute;left:10px;bottom:8px;font-family:var(--font-mono);font-size:11px;color:#8A3B04}
.tile.t1::after{content:"Library";position:absolute;left:10px;bottom:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted)}

/* ---------- Dark band: Windows switchers ---------- */
.band--deep{background:var(--deep);color:var(--deep-ink)}
.band--deep h2{color:#fff}
.band--deep .lede{color:#A6ACB9}
.switch-table{margin-top:38px;border:1px solid #3B404C;border-radius:14px;overflow:hidden}
.switch-scroll{overflow-x:auto}
.switch-table table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.switch-table th{text-align:left;padding:13px 18px;background:#2A2E37;font-family:var(--font-body);font-weight:600;font-size:.85rem;color:#C9CDD6}
.switch-table td{padding:13px 18px;border-top:1px solid #333845;vertical-align:top}
.switch-table td:first-child{color:#A6ACB9;width:46%}
.switch-table .win-cant{color:#FFB27A}
.switch-more{display:inline-block;margin-top:22px;color:#FFB27A;font-weight:600;text-decoration:none}
.switch-more:hover{text-decoration:underline}

/* ---------- Local-first ---------- */
.local{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:40px}
.local ul{list-style:none;display:grid;gap:16px}
.local li{display:flex;gap:12px;font-size:1.02rem}
.local li svg{flex:none;margin-top:4px}
.local .why{color:var(--muted);font-size:.97rem;max-width:46ch}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:start}
.plan{background:var(--chrome);border:2px solid var(--line);border-radius:16px;padding:28px}
.plan.active-plan{border-color:var(--accent);box-shadow:0 18px 50px rgba(232,98,12,.14)}
.plan .plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan h3{font-size:1.1rem}
.plan .flag{font-size:.75rem;font-weight:600;color:#8A3B04;background:var(--accent-soft);border-radius:999px;padding:3px 11px}
.plan .price{font-family:var(--font-display);font-weight:700;font-size:2.35rem;margin-top:14px}
.plan .price small{font-family:var(--font-body);font-weight:500;font-size:.85rem;color:var(--muted);margin-left:6px}
.plan .rises{font-size:.85rem;color:var(--muted);margin-top:2px}
.plan .rises b{color:var(--ink)}
.plan ul{list-style:none;margin:20px 0 24px;display:grid;gap:10px;font-size:.93rem}
/* Thuộc tính LOGIC, không phải trái/phải: ở tiếng Ả Rập và tiếng Do Thái, `left:0` đặt
   dấu đầu dòng vào cuối câu còn `padding-left` thụt đầu dòng vào phía không có dấu. */
.plan li{padding-inline-start:22px;position:relative;color:var(--ink)}
.plan li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:11px;height:11px;border-radius:3px;background:var(--accent)}
.plan li.off{color:var(--muted)}
.plan li.off::before{background:var(--line)}
.plan .btn{width:100%;text-align:center}
.plan .meta{margin-top:12px;font-size:.8rem;color:var(--muted);text-align:center}
.plan .honest{margin-top:16px;font-size:.85rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px}

/* Lối trả tiền thứ hai. Nó là nút thật, không phải liên kết: nó gọi cùng một luồng
   `startPurchase` chứ không dẫn tới địa chỉ nào — một `<a href="#">` ở đây sẽ hứa với
   trình đọc màn hình một chỗ để tới, rồi không tới đâu cả. */
.plan .pay-card{display:block;width:100%;margin-top:10px;padding:4px 0;background:none;
  border:0;cursor:pointer;font-family:var(--font-body);font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;text-align:center}
.plan .pay-card:hover{color:var(--accent)}
.plan .pay-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[aria-busy="true"]{opacity:.65;cursor:progress}

.anchor-line{margin-top:26px;font-size:.95rem;color:var(--muted);text-align:center}
.anchor-line b{color:var(--ink)}
.pay-note{margin-top:20px;font-size:.85rem;color:var(--muted);text-align:center;max-width:620px;margin-inline:auto}
.pay-marks{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:10px}
.pay-marks b{font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);background:var(--chrome);border-radius:5px;padding:3px 9px}
.vat-note{margin-top:8px;font-size:.82rem;color:var(--muted);text-align:center}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-top:36px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;padding-inline-end:34px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:1.3rem;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:64ch}

/* ---------- Final CTA + footer ---------- */
.final{background:var(--chrome);border-top:1px solid var(--line)}
.final .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-top:72px;padding-bottom:72px}
footer.site{background:var(--deep);color:#A6ACB9;font-size:.86rem}
footer.site .wrap{padding:40px 24px;display:grid;gap:18px}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer.site a{color:#C9CDD6;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .legal{color:#7A8091;max-width:80ch}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .keep,.local{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:460px}
  .final .wrap{grid-template-columns:1fr}
}
@media (max-width:680px){
  nav.main{display:none}
  .tools-grid{grid-template-columns:1fr}
  .tool:nth-child(odd){border-right:none}
  .capture form{flex-direction:column}
  .section{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ghost{transition:none}
}

/* ── Trạng thái bán / tải ────────────────────────────────────────────────────
   Hai công tắc `ON_SALE` và `DOWNLOADS_LIVE` trong shop.js đặt thuộc tính lên
   <html>; CSS quyết định phần tử nào hiện. Làm bằng CSS chứ không bằng JS dựng
   DOM để trang không nhấp nháy nút sai trong lúc script chưa chạy. */
[data-download-state="on"]  [data-download="off"],
[data-download-state="off"] [data-download="on"],
[data-sale-state="on"]      [data-sale="off"],
[data-sale-state="off"]     [data-sale="on"] { display: none !important; }

.hero-cta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:26px 0 18px; }
.hero-cta .note { flex-basis:100%; margin:4px 0 0; font-size:13px; color:var(--muted); }
.btn-lg { padding:13px 22px; font-size:16px; }
.btn.disabled { opacity:.55; cursor:default; pointer-events:none; }
.final .btn { flex:none; }
@media (max-width:640px){
  .hero-cta .btn { flex:1 1 100%; justify-content:center; }
}

/* ── Bốn cảnh trong cửa sổ mô phỏng ──────────────────────────────────────────
   Cảnh 1–2 dùng hai panel; cảnh 3–4 thay thân cửa sổ. Các dòng trong cảnh 3–4
   là đường dẫn thật chứ không phải nhãn — đường dẫn nói rõ hơn mọi lời mô tả,
   và nó không cần dịch ở hai mươi bảy thứ tiếng. */
.scene { padding: 12px 14px 14px; }
.scene-rows { display: flex; flex-direction: column; gap: 2px; }
.scene .row { display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  font: 400 12.5px/1.35 var(--font-mono); color: var(--ink);
  border-radius: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scene .row:nth-child(odd) { background: rgba(0,0,0,.028); }
.scene .row .size { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.tick { flex: none; width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--line); position: relative; }
.tick.on { background: var(--accent); border-color: var(--accent); }
.tick.on::after { content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg); }
.tick.warn { border-color: #C98A2E; background: #FBF2E3; }
.scene-note { margin: 11px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.scene-action { margin-top: 11px; padding: 9px 12px; border-radius: 9px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 13px;
  text-align: center; }

.scene-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.scene-tabs button { border: 1px solid var(--line); background: transparent;
  border-radius: 999px; padding: 5px 11px; font: 500 12px/1 var(--font-body);
  color: var(--muted); cursor: pointer; }
.scene-tabs button[aria-selected="true"] { background: var(--accent); color: #fff;
  border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .scene-tabs { opacity: 1; } }

/* `hidden` phải thắng mọi `display` khai trong CSS.
   `.panes` khai `display:flex`, và một khai báo display bất kỳ sẽ đè lên thuộc
   tính `hidden` của HTML — hai panel vẫn hiện ở cảnh 3 và 4 vì đúng chỗ này. */
[hidden] { display: none !important; }

/* ── Chuỗi kỹ thuật phải giữ chiều trái-sang-phải ────────────────────────────
   Tên tệp, đường dẫn và dung lượng là văn bản LTR. Đặt chúng trong một trang
   RTL mà không cô lập thì thuật toán bidi của Unicode đảo thứ tự: "2,4 MB"
   hiện thành "MB 2,4" và "~ / Downloads" thành "Downloads / ~".

   Đây không phải chuyện thẩm mỹ — một đường dẫn hiện ngược là một đường dẫn
   sai, và trang này đang bán một sản phẩm quản lý tệp. */
.win-path, .pane-head, .rows .row, .scene .row, .size, .win-title {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .win-path, [dir="rtl"] .pane-head,
[dir="rtl"] .rows .row, [dir="rtl"] .scene .row { text-align: left; }

kbd, code, .win-path, samp { direction: ltr; unicode-bidi: isolate; }

/* Trang chữ nhiều: trang chủ chỉ có tiêu đề với đoạn dẫn nên không cần khoảng
   cách giữa các đoạn; ở đây có thì thiếu nó chữ dính thành một khối. */
.prose p{margin:0 0 14px}
.prose h3{margin-bottom:8px}
.prose ul{margin:0 0 16px}

/* ---------- Trang văn bản dài: pháp lý, ghi chú phát hành, tra khoá ----------

   Sáu trang này trước đây mỗi trang mang một khối <style> riêng trong chính nó, và sáu
   khối ấy đã bắt đầu lệch nhau. Gom về đây, một chỗ: khi đổi cỡ chữ của đoạn văn thì
   trang Điều khoản và trang Quyền riêng tư đổi cùng nhau, không phải nhớ sửa hai lần.

   Dùng thuộc tính LOGIC ở mọi chỗ có hướng — tiếng Ả Rập và tiếng Do Thái đọc trang này
   nhiều không kém tiếng Anh. */
.doc{max-width:760px}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;margin-bottom:22px}
.doc h2{font-size:clamp(1.25rem,2.4vw,1.55rem);margin-top:46px;margin-bottom:12px;max-width:34ch}
.doc h3{font-size:1.05rem;font-weight:650;margin-top:30px;margin-bottom:8px}
.doc p{color:var(--muted);margin-bottom:14px}
.doc p.first{color:var(--ink);font-size:1.1rem;margin-bottom:22px}
.doc p.note{background:var(--chrome);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.doc p.small{font-size:.87rem}
.doc p.spaced{margin-top:38px}
.doc a{color:var(--accent);text-underline-offset:3px}
.doc strong{color:var(--ink)}
.doc ul.plain{list-style:none;margin:0 0 18px;display:grid;gap:10px}
.doc ul.plain li{color:var(--muted);padding-inline-start:20px;position:relative}
.doc ul.plain li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}
.doc code{font-family:var(--font-mono);font-size:.82em;background:var(--chrome);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.doc pre{background:var(--chrome);border:1px solid var(--line);border-radius:10px;padding:14px;
  overflow-x:auto;font-size:.8rem;margin:0 0 16px;direction:ltr;text-align:left}
.doc pre code{background:none;border:0;padding:0}

/* Bảng sự kiện telemetry ở trang Quyền riêng tư. Cuộn ngang trong khung của nó chứ
   không đẩy cả trang chạy ngang trên điện thoại. */
.doc table{border-collapse:collapse;width:100%;margin:22px 0;font-size:.93rem;display:block;overflow-x:auto}
.doc th,.doc td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted)}
.doc th{color:var(--ink);font-weight:650;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}

.lang-note{margin-top:44px;padding:16px 18px;border-radius:10px;background:rgba(0,0,0,.035);
  font-size:.85rem;line-height:1.65;color:var(--muted)}

/* ---------- Trang tra khoá ---------- */
.lookup{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 8px}
.lookup input{flex:1 1 320px;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-ui);
  background:var(--chrome);color:var(--ink);direction:ltr;text-align:start}
.problem{color:#C0392B}
.facts{margin-top:28px;border-top:1px solid var(--line)}
.facts div{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{flex:0 0 160px;color:var(--muted);font-size:.87rem}
.facts dd{margin:0;color:var(--ink)}
.machines{list-style:none;padding:0;margin:16px 0 0}
.machines li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.machines .name{color:var(--ink);font-weight:600}
.machines .when{font-size:.82rem;color:var(--muted)}
.machines .grow{flex:1}

/* ---------- Trang cảm ơn ---------- */
.key{font-family:var(--font-mono);font-size:clamp(1.05rem,3.4vw,1.6rem);letter-spacing:.06em;
  padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--chrome);
  color:var(--ink);user-select:all;word-break:break-all;direction:ltr;text-align:start}
.doc .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}