/* tenor/cross - trang cross.tenor.vn
   Mau va mat chu lay tu token.css, sinh ra tu @tenor/brand. Khong go hex o day. */

/* ---------- mat chu ---------- */
@font-face { font-family: "Geist"; src: url("font/Geist-Regular.woff2?v=2610200301") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("font/Geist-Medium.woff2?v=2610200301") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("font/Geist-SemiBold.woff2?v=2610200301") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("font/GeistMono-Regular.woff2?v=2610200301") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("font/GeistMono-Medium.woff2?v=2610200301") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("font/BeVietnamPro-Regular.woff2?v=2610200301") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("font/BeVietnamPro-Medium.woff2?v=2610200301") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- nen ---------- */
:root {
  --net: rgba(250, 250, 247, 0.13);
  --net-mo: rgba(250, 250, 247, 0.07);
  --chu-phu: rgba(250, 250, 247, 0.58);
  --le: clamp(20px, 5vw, 76px);
  --nhip: clamp(80px, 11vh, 150px);
}

* { box-sizing: border-box; }

html {
  background: var(--muc);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--muc);
  color: var(--giay);
  font-family: var(--chu-viet);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Hai canvas nam TRONG san, nen chung dung yen cung san. Giu `fixed` chu khong doi sang
   `absolute`: trang tai va hai trang builder khong co san, canvas gan thang vao body, va
   `absolute` o do la truong hat cuon di mat. Trong san thi hai phep cho ra cung mot o.
   Khoi muc duoi noi dung, lop hat TREN noi dung: hat phai dap xuong mat truoc cua man may,
   khong chui ra sau vo may. De ca hai duoi noi dung thi ca doan chuyen canh hong. */
#truong-hat, #truong-hinh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#truong-hat { z-index: 0; }
#truong-hinh { z-index: 4; image-rendering: auto; }
main, .dinh, .chan { position: relative; z-index: 1; }
.dinh { z-index: 20; }
/* Chan trang troi len TREN san o quang cuoi, nen phai dung tren ca lop hat. */
.chan { z-index: 6; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.an-chu {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.bo-qua {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--giay);
  color: var(--muc);
  padding: 12px 18px;
  text-decoration: none;
}
.bo-qua:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--tin-hieu);
  outline-offset: 3px;
}

/* ---------- màn phủ lúc tải ----------
   Founder đặt 15/09/2026, học Elimar: một màu phủ kín, lockup nhỏ và ba vạch nhấp nháy ở giữa,
   chỉ mở khi hiệu ứng đã sẵn sàng. Mặc định ẨN; `html.dang-tai` (script nội tuyến đầu HTML) mới
   hiện, `html.da-tai` (trang.js) mở ra. Không JavaScript thì không có lớp nào, trang hiện thẳng. */
.tai-man {
  position: fixed; inset: 0; z-index: 60;
  background: var(--muc);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.dang-tai .tai-man { opacity: 1; visibility: visible; transition: none; }
.dang-tai.da-tai .tai-man { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.tai-man .hieu { font-size: 17px; pointer-events: none; }
.tai-vach { display: flex; gap: 5px; align-items: flex-end; height: 14px; }
.tai-vach i { display: block; width: 3px; height: 14px; background: var(--giay); transform-origin: 50% 100%; animation: tai-nhip 1.1s ease-in-out infinite; }
.tai-vach i:nth-child(2) { animation-delay: .18s; }
.tai-vach i:nth-child(3) { animation-delay: .36s; }
@keyframes tai-nhip { 0%, 100% { transform: scaleY(.25); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tai-vach i { animation: none; } }

/* ---------- lockup ---------- */
.hieu, .chan-hieu {
  font-family: var(--chu-tay);
  font-weight: 500;
  letter-spacing: var(--gian-chat);
  text-decoration: none;
  white-space: nowrap;
}
.hieu-khong-gian { opacity: var(--mo-khong-gian-ten); }
.hieu-gach { opacity: var(--mo-gach-cheo); }
.hieu-ten { opacity: var(--mo-tieu-diem); }

/* ---------- dinh trang ---------- */
.dinh {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--le);
  font-size: 15px;
  background: color-mix(in srgb, var(--muc) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--net-mo);
}
.dinh .hieu { font-size: 17px; }
.dinh-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-family: var(--chu-tay);
}
.dinh-menu a {
  color: var(--chu-phu);
  text-decoration: none;
  transition: color .25s ease;
}
.dinh-menu a:hover { color: var(--giay); }
.dinh-tai {
  color: var(--giay) !important;
  border: 1px solid var(--net);
  border-radius: 2px;
  padding: 7px 14px;
  transition: border-color .25s ease, background-color .25s ease;
}
.dinh-tai:hover { border-color: var(--tin-hieu); background: color-mix(in srgb, var(--tin-hieu) 12%, transparent); }
/* Chọn ngôn ngữ: menu thả xuống bằng thẻ details, mở được khi tắt JavaScript. Founder đổi
   15/09/2026 đêm vì ba chữ VI EN ZH xếp hàng ngang "rất khó bấm". Mỗi dòng cao 44 điểm ảnh. */
.chon-ngon-ngu { position: relative; margin-left: 4px; font-family: var(--chu-tay); }
.chon-ngon-ngu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--net);
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--giay);
  cursor: pointer;
  user-select: none;
  transition: border-color .25s ease;
}
.chon-ngon-ngu summary::-webkit-details-marker { display: none; }
.chon-ngon-ngu summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1px solid var(--chu-phu);
  border-bottom: 1px solid var(--chu-phu);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.chon-ngon-ngu[open] summary::after { transform: translateY(1px) rotate(225deg); }
.chon-ngon-ngu summary:hover, .chon-ngon-ngu[open] summary { border-color: var(--giay); }
.chon-ngon-ngu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  min-width: 168px;
  background: var(--muc);
  border: 1px solid var(--net);
  border-radius: 2px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9);
  z-index: 30;
}
.chon-ngon-ngu ul a {
  display: block;
  padding: 12px 18px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--chu-phu);
  text-decoration: none;
}
.chon-ngon-ngu ul a:hover { color: var(--giay); background: color-mix(in srgb, var(--giay) 8%, transparent); }
.chon-ngon-ngu ul a[aria-current="true"] { color: var(--giay); font-weight: 500; }

/* Màn hẹp: thanh mục giấu đi, thay bằng nút ba gạch chứa cả bốn mục (founder 15/09/2026 đêm:
   "khi bị hẹp phải đổi thành nút sandwich, chứa luôn 4 nút trong 1"). Bảng thả xuống bám dưới
   thanh đỉnh, mỗi dòng cao 48 điểm ảnh. */
.menu-hep { display: none; }
@media (max-width: 900px) {
  .dinh { padding: 12px 16px; gap: 10px; }
  .dinh-menu { display: none; }
  .menu-hep { display: block; }
  .menu-hep summary {
    list-style: none;
    width: 44px; height: 44px;
    margin: -6px -8px -6px 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    cursor: pointer;
    border-radius: 2px;
  }
  .menu-hep summary::-webkit-details-marker { display: none; }
  .menu-hep summary i {
    display: block; width: 20px; height: 1.5px;
    background: var(--giay);
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-hep[open] summary i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-hep[open] summary i:nth-child(2) { opacity: 0; }
  .menu-hep[open] summary i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .menu-hep-bang {
    position: absolute;
    left: 0; right: 0; top: 100%;
    padding: 6px 0 10px;
    background: color-mix(in srgb, var(--muc) 94%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--net-mo);
    font-family: var(--chu-tay);
  }
  .menu-hep-bang a {
    display: block;
    padding: 13px 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--chu-phu);
    text-decoration: none;
  }
  .menu-hep-bang a[aria-current] { color: var(--giay); font-weight: 500; }
  .menu-hep-bang a:hover { color: var(--giay); }
  .menu-hep-nhan {
    margin: 8px 16px 0;
    padding-top: 10px;
    border-top: 1px solid var(--net-mo);
    font-size: 12px;
    letter-spacing: var(--gian-rong);
    color: var(--chu-phu);
  }
}

/* Bản tiếng Trung. Geist và Be Vietnam Pro không có chữ Hán, trình duyệt tự rơi về mặt chữ
   hệ thống; khai rõ để ba hệ điều hành ra cùng một dáng. Dòng chữ Hán mang lớp `chu-han`:
   bỏ giãn chữ âm, vì chữ vuông mà ép sát là dính nhau. Lớp hạt đọc font từ computed style
   nên mặt nạ cũng ra đúng mặt chữ này. */
html[lang="zh-Hans"] body {
  font-family: "Be Vietnam Pro", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
html[lang="zh-Hans"] .canh-chu, html[lang="zh-Hans"] .dinh-menu, html[lang="zh-Hans"] .tieu-de,
html[lang="zh-Hans"] .tai-the h3, html[lang="zh-Hans"] .tai-o h3, html[lang="zh-Hans"] .nut-tai-chinh,
html[lang="zh-Hans"] #may-chu-thich b {
  font-family: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.canh-chu.chu-han { letter-spacing: 0; }

/* ---------- khung chung ---------- */
.man {
  padding: var(--nhip) var(--le);
  border-top: 1px solid var(--net-mo);
}
.man:first-of-type { border-top: 0; }
.khung { max-width: 1240px; margin: 0 auto; }

.khung-doi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.khung-doi-nguoc .cot-chu { order: 2; }
.khung-doi-nguoc .cot-may { order: 1; }
@media (max-width: 900px) {
  .khung-doi { grid-template-columns: minmax(0, 1fr); }
  .khung-doi-nguoc .cot-chu, .khung-doi-nguoc .cot-may { order: initial; }
}

.nhan {
  font-family: var(--chu-tay);
  font-size: 12px;
  letter-spacing: var(--gian-rong);
  color: var(--chu-phu);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nhan span { color: var(--giay); opacity: .75; }
.nhan::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--net-mo);
}

.tieu-de-lon {
  font-family: var(--chu-tay);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
  font-size: clamp(42px, 8.2vw, 122px);
  margin: 0 0 clamp(22px, 3vw, 34px);
}
.tieu-de {
  font-family: var(--chu-tay);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-size: clamp(30px, 4.4vw, 58px);
  margin: 0 0 22px;
}

.loi-mo {
  max-width: 62ch;
  font-size: clamp(16px, 1.25vw, 19px);
  color: rgba(250, 250, 247, 0.82);
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.dan { max-width: 54ch; color: rgba(250, 250, 247, 0.78); margin: 0 0 28px; }
.ghi-chu {
  max-width: 62ch;
  color: var(--chu-phu);
  font-size: 15px;
  margin: 34px 0 0;
}

/* so lieu va ma: cho phep mono. Moi vai tro chu khac thi khong. */
.so, .ma {
  font-family: var(--chu-so);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ma { font-size: .92em; color: rgba(250, 250, 247, 0.9); }
.ma-hash {
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--chu-phu);
}

/* ---------- man mo ---------- */
.man-dau {
  min-height: calc(100svh - 58px);
  display: flex;
  align-items: center;
  padding-top: clamp(40px, 8vh, 90px);
  padding-bottom: clamp(40px, 8vh, 90px);
}

.tai-nhanh { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.nut-tai {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  background: var(--giay);
  color: var(--muc);
  padding: 16px 28px;
  border-radius: 2px;
  border: 1px solid var(--giay);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease, color .3s ease;
}
.nut-tai:hover {
  background: var(--tin-hieu);
  border-color: var(--tin-hieu);
  color: var(--giay);
  transform: translateY(-2px);
}
.nut-tai-chinh {
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.nut-tai-phu { font-size: 13px; opacity: .72; }
.nut-tai-nho { padding: 13px 20px; align-self: flex-start; }
.nut-tai-nho .nut-tai-chinh { font-size: 14px; }

.tai-trang-thai { margin: 0; font-size: 14px; color: var(--chu-phu); }
.dau-dang-duyet {
  color: var(--dang-duyet);
  border-bottom: 1.5px solid var(--dang-duyet);
  padding-bottom: 1px;
}
.tai-hash { margin: 0; font-size: 12px; color: var(--chu-phu); max-width: 46ch; }

/* Vạch chỉ dẫn đi XUỐNG, cùng chiều với việc nó bảo người ta làm. Bản đầu là một vạch
   nằm ngang chạy sang phải, trong khi chữ ghi "Cuộn xuống": founder bắt 15/09/2026. */
.chi-dan-cuon {
  margin: clamp(38px, 6vh, 70px) 0 0;
  font-size: 13px;
  color: var(--chu-phu);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.chi-dan-gach {
  width: 1px; height: 42px;
  background: var(--net);
  position: relative;
  overflow: hidden;
}
.chi-dan-gach::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--giay);
  transform: translateY(-100%);
  animation: chay 2.6s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes chay { 0% { transform: translateY(-100%); } 55%,100% { transform: translateY(100%); } }

/* ---------- MỘT SÂN DUY NHẤT ----------
   Không có JavaScript, hoặc xin ít chuyển động: lớp `co-hat` không bao giờ gắn vào thẻ
   html, nên mọi thứ dưới đây giữ nguyên bố cục xếp chồng bình thường, đọc từ trên xuống.
   Đường cuộn cao 0 vì chiều cao của nó do JavaScript đặt. Đây là ràng buộc cứng. */
.san { padding-bottom: var(--nhip); }
.san-lop { position: relative; }
.khoi {
  position: relative;
  display: grid;
  place-items: center;
  gap: 24px;
  padding: var(--nhip) var(--le);
  text-align: center;
}
.duong-cuon { height: 0; }

/* Có hạt: sân đứng yên tuyệt đối, mọi khối chồng lên nhau ở cùng một chỗ. Nhờ vậy ô chứa
   của từng hình đứng yên, và cả một lớp rung do ô chứa dịch theo cuộn biến mất luôn. */
.co-hat .san {
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
}
.co-hat .san-lop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.co-hat .khoi {
  position: absolute;
  inset: 0;
  padding: 0;
  place-content: center;
  pointer-events: none;
}
/* Hạt vẽ thay chữ thật. Giữ nguyên chỗ trong bố cục để mặt nạ vẫn đo được, nên dùng
   visibility chứ không dùng display. */
.co-hat .canh-chu { visibility: hidden; }
/* Chặng cuối chỉ trao chỗ cho CÁI NÚT. Chữ "tải firmware" để nguyên cho hạt vẽ, nên nó
   giữ chất hạt y như mọi câu khác trong truyện. Founder bắt 15/09/2026. */
.co-hat .may, .co-hat .nut-tai { opacity: 0; }
.khoi-tai { gap: clamp(30px, 5vh, 58px); }

.canh-chu {
  position: relative;
  margin: 0;
  text-align: center;
  font-family: var(--chu-tay);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.06;
  font-size: clamp(30px, 9.5vw, 88px);
  padding: 0 var(--le);
  max-width: 100%;
}
/* CỠ CHỮ TRÊN ĐIỆN THOẠI, founder chốt 15/09/2026 đêm trên iPhone: "chữ bé quá nhìn hạt nó
   như đứng yên vậy". Hệ số vw tính từ dòng DÀI NHẤT của cả ba ngôn ngữ, đo bằng bề rộng trên
   một điểm ảnh cỡ chữ: chữ thường 8,98 ("the display algorithm"), chữ lớn 6,16 ("dùng thử
   nhé?"), dòng dài 8,28 ("download firmware"). Mỗi dòng phải nằm gọn MỘT hàng vì mặt nạ vẽ
   từng dòng; lề mỗi bên 5vw nên hệ số phải dưới 90 chia bề rộng đó. Trần máy tính giữ nguyên. */
.canh-chu-lon { font-size: clamp(44px, 13vw, 168px); }
.canh-chu-dai { font-size: clamp(38px, 10.5vw, 134px); }
.canh-chu .dong { display: block; }
/* Thang lockup: chu i chi de danh dau phan, khong nghieng. Do dam that do lop hat lo,
   con o day chi giu cho bo cuc va giu cho ban khong co JavaScript van dung thang. */
.canh-chu i { font-style: normal; }
.canh-chu i[data-mo="0.5"] { opacity: 0.5; }
.canh-chu i[data-mo="0.3"] { opacity: 0.3; }
/* Mark t/+ trên tên ở màn mở. Dấu + nghiêng 15 độ ngược chiều kim đồng hồ, như màn ngủ của
   máy. Phần tử inline không nhận transform nên phải inline-block. Góc xoay khai ở data-xoay
   để lớp hạt đọc cùng một số. */
/* Founder 15/09/2026: "cho cái t/+ to hơn nữa đi, cho nó ấn tượng." Mark to gấp hơn hai lần
   tên, như trên màn ngủ của máy. Kẹp thêm theo chiều cao màn để cả khối còn nằm gọn giữa
   thanh trên và dòng "Cuộn xuống" trên máy tính xách tay thấp. */
.canh-mark { font-size: clamp(104px, min(26vw, 38vh), 400px); line-height: 0.92; letter-spacing: -0.05em; }
.canh-chu i[data-xoay="-15"] { display: inline-block; transform: rotate(-15deg); }
/* Hình vẽ trong dòng chữ (bản không JavaScript): svg cao 0,78em, tâm ở giữa chữ x. */
.canh-chu i[data-duong-net] { display: inline-block; vertical-align: -0.03em; }
.canh-chu i[data-duong-net] { position: relative; vertical-align: var(--doi, -0.03em); }
.canh-chu i[data-duong-net] svg { width: var(--cao, 0.78em); height: var(--cao, 0.78em); display: inline-block; overflow: visible; }
/* Chữ đứng yên giữa hình vẽ (KO trong vòng sync), bản không JavaScript. */
.canh-chu i[data-chu-trong]::after, .canh-chu i[data-chu-thay]::before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--co-trong, 0.27em); letter-spacing: 0;
}
.canh-chu i[data-chu-trong]::after { content: attr(data-chu-trong); }
/* Chữ thay (KO thành OK) cho bản không JavaScript: hai chữ mờ dần vào nhau, chu kỳ 14 giây
   như shader. */
.canh-chu i[data-chu-thay]::before { content: attr(data-chu-thay); opacity: 0; animation: doi-chu-thay 14s ease-in-out infinite; }
.canh-chu i[data-chu-thay]::after { animation: doi-chu-goc 14s ease-in-out infinite; }
@keyframes doi-chu-goc  { 0%, 25% { opacity: 1; } 50%, 75% { opacity: 0; } 100% { opacity: 1; } }
@keyframes doi-chu-thay { 0%, 25% { opacity: 0; } 50%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* Dòng dưới tên và lời mời cuộn: chữ THẬT, đọc được ngay, không vẽ bằng hạt. Chỉ hiện
   trong chặng mở, tắt hẳn khi đã đi qua. */
.canh-duoi {
  margin: 0;
  padding: 0 var(--le);
  text-align: center;
  font-size: clamp(15px, 1.4vw, 19px);
  color: rgba(250, 250, 247, 0.72);
}
.co-hat .canh-duoi,
.co-hat .khoi-hieu .chi-dan-cuon {
  position: absolute;
  left: 0; right: 0;
  align-items: center;
  margin: 0;
  opacity: 0;
  transition: opacity .55s ease;
}
.co-hat .canh-duoi { bottom: clamp(120px, 26vh, 260px); }
.co-hat .khoi-hieu .chi-dan-cuon { bottom: clamp(44px, 9vh, 92px); }
.co-hat [data-chi-canh].dang-hien { opacity: 1; }

/* ---------- may ---------- */
.may { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.may-than {
  position: relative;
  width: min(330px, 74vw);
  background: linear-gradient(170deg,
    var(--than-chi) 0%,
    color-mix(in srgb, var(--than-chi) 45%, var(--muc)) 58%,
    color-mix(in srgb, var(--than-chi) 72%, var(--muc)) 100%);
  border: 1px solid rgba(250, 250, 247, 0.16);
  border-radius: 20px;
  padding: 16px 16px 0;
  box-shadow:
    0 1px 0 rgba(250, 250, 247, 0.12) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.may-lon .may-than { width: min(378px, 80vw); }

.may-man {
  position: relative;
  aspect-ratio: 528 / 792;
  background: var(--trang);
  overflow: hidden;
  border-radius: 3px;
}
/* Anh de: nam chong len anh duoi, hien dan khi hat keo muc ve. */
.may-man .man-de { position: absolute; inset: 0; opacity: 0; }
.may-man img {
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
/* Lớp chớp: gợi lại cú vẽ lại của giấy điện tử, nhưng KHÔNG chớp cứng.
   Bản đầu đảo đen trắng hai nhịp bằng steps(1), founder chê chói mắt 15/09/2026, và nó
   đúng là kiểu nội dung nhấp nháy không nên có trên web. Giờ chỉ mờ đi một nhịp rồi sáng
   lại, đủ để người xem thấy màn vừa vẽ lại mà không đập vào mắt. */
.may-chop {
  position: absolute;
  inset: 0;
  background: var(--muc);
  opacity: 0;
  pointer-events: none;
}
.may-man.dang-chop .may-chop { animation: chop-eink .30s ease; }
@keyframes chop-eink {
  0%   { opacity: 0; }
  24%  { opacity: 0.5; }
  58%  { opacity: 0.5; }
  100% { opacity: 0; }
}

.may-nut-truoc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 8px 15px;
  height: 33px;
}
.may-nut-truoc i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(250, 250, 247, 0.22);
}

/* Nút Lên và Xuống trên máy dùng thử bấm được thật. Trở về và Chọn để trơ, cố ý: chúng mở
   màn mới, mà trang này chỉ có ảnh chụp của màn chính. Vùng chạm nới ra bằng lớp giả để
   ngón tay bắt được, còn phần nhìn thấy vẫn là thanh mỏng. */
.nut-truoc {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(250, 250, 247, 0.34);
  position: relative;
  cursor: pointer;
  transition: background-color .2s ease, height .2s ease, transform .12s ease;
}
.nut-truoc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18px; bottom: -18px;
}
.nut-truoc:hover { background: var(--giay); height: 7px; }
.nut-truoc.dang-bam { background: var(--tin-hieu); height: 8px; transform: translateY(2px); }
.nut-truoc:focus-visible { outline-offset: 6px; }

/* Đập nhẹ để người ta biết là bấm được. Tắt ngay sau cú bấm đầu tiên: nhắc mãi là phiền. */
@media (prefers-reduced-motion: no-preference) {
  .nut-truoc, .nut-canh::before { animation: dap-nut 2.8s ease-in-out infinite; }
  .may-da-bam .nut-truoc, .may-da-bam .nut-canh::before { animation: none; }
}
@keyframes dap-nut { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Nút cạnh của X3 nằm HAI BÊN THÂN MÁY: một bên trái, một bên phải. Không phải hai nút
   chồng nhau cùng một cạnh, founder bắt lỗi này 15/09/2026. */
.may-nut-canh { position: absolute; inset: 0; pointer-events: none; }
/* Hai nút cạnh phải NGANG HÀNG với hai mũi tên đặc mà firmware vẽ ở mép trái và mép phải
   màn. Đo trên ảnh chụp bộ mô phỏng 15/09/2026: mũi tên nằm cố định ở 24,6% chiều cao màn,
   không chạy theo con trỏ. Quy về thân máy: 16px lề trên, cộng 24,6% của phần màn, mà phần
   màn bằng chiều cao thân trừ 16px lề trên và 33px dải nút trước. */
.may-than { --moc-nut-canh: calc(16px + (100% - 49px) * 0.246); }
.may-nut-canh i {
  position: absolute;
  top: var(--moc-nut-canh);
  margin-top: -22px;
  width: 5px;
  height: 44px;
  background: rgba(250, 250, 247, 0.22);
}
.may-nut-canh i.canh-trai  { left: -4px;  border-radius: 3px 0 0 3px; }
.may-nut-canh i.canh-phai  { right: -4px; border-radius: 0 3px 3px 0; }

/* Hoạt cảnh bấm nút cạnh ở cảnh Cài đặt: núm thụt VÀO THÂN MÁY, đúng chiều lực ngón
   tay, rồi bật lại. Đây là hai nút vẽ trang trí, không bấm được, nên chúng chạy theo
   thanh cuộn chứ không theo chuột. */
.may-nut-canh i { transition: background-color .18s ease, width .18s ease, transform .12s ease; }
.may-nut-canh i.dang-bam { background: var(--tin-hieu); width: 9px; }
.may-nut-canh i.canh-trai.dang-bam  { transform: translateX(4px); }
.may-nut-canh i.canh-phai.dang-bam  { transform: translateX(-4px); }

/* Nút bấm được: vùng chạm 44px vắt qua mép vỏ máy, phần nhìn thấy vẫn là thanh mỏng. */
.nut-canh {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  position: absolute;
  top: var(--moc-nut-canh);
  margin: -24px 0 0;
  width: 44px;
  height: 48px;
  cursor: pointer;
  z-index: 3;
}
.nut-canh.canh-trai  { left: -22px; }
.nut-canh.canh-phai  { right: -22px; }

.nut-canh::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 44px;
  background: rgba(250, 250, 247, 0.3);
  transform: translateY(-50%);
  transition: background-color .2s ease, width .2s ease, transform .12s ease;
}
.nut-canh.canh-trai::before  { left: 18px;  border-radius: 3px 0 0 3px; }
.nut-canh.canh-phai::before  { right: 18px; border-radius: 0 3px 3px 0; }
.nut-canh:hover::before { background: var(--giay); width: 8px; }

/* Bấm: núm thụt VÀO THÂN MÁY, đúng chiều lực ngón tay. */
.nut-canh.canh-trai.dang-bam::before  { background: var(--tin-hieu); width: 9px; transform: translateY(-50%) translateX(4px); }
.nut-canh.canh-phai.dang-bam::before  { background: var(--tin-hieu); width: 9px; transform: translateY(-50%) translateX(-4px); }

/* Sóng lan ra từ chỗ bấm, cho người xem thấy cú bấm đã ăn. */
.nut-canh::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1px solid var(--tin-hieu);
  opacity: 0;
  pointer-events: none;
}
.nut-canh.canh-trai::after  { left: 15px; }
.nut-canh.canh-phai::after  { right: 15px; }
.nut-canh.dang-bam::after { animation: song-bam .52s cubic-bezier(.2,.7,.2,1); }
@keyframes song-bam {
  from { opacity: .85; transform: scale(.35); }
  to   { opacity: 0;   transform: scale(4.2); }
}
.nut-canh:focus-visible { outline-offset: -6px; }

.may figcaption {
  font-size: 13px;
  color: var(--chu-phu);
  text-align: center;
  max-width: 42ch;
}
#may-chu-thich b {
  display: block;
  font-family: var(--chu-tay);
  font-weight: 500;
  color: rgba(250, 250, 247, 0.82);
}
.may-goi-y {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(250, 250, 247, 0.45);
}

/* ---------- danh sach the ---------- */
.the-danh-sach {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--net-mo);
}
.the-danh-sach li {
  display: grid;
  grid-template-columns: minmax(84px, 128px) minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0 15px 14px;
  border-bottom: 1px solid var(--net-mo);
  border-left: 2px solid transparent;
  color: var(--chu-phu);
  transition: color .35s ease, border-left-color .35s ease, padding-left .35s ease;
}
.the-danh-sach li b {
  font-family: var(--chu-tay);
  font-weight: 500;
  color: rgba(250, 250, 247, 0.72);
  transition: color .35s ease;
}
.the-danh-sach li.dang-chon {
  color: rgba(250, 250, 247, 0.88);
  border-left-color: var(--tin-hieu);
  padding-left: 18px;
}
.the-danh-sach li.dang-chon b { color: var(--giay); }
@media (max-width: 560px) {
  .the-danh-sach li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.so-sanh { border-top: 1px solid var(--net-mo); }
.so-sanh-dong {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--net-mo);
  font-size: 15px;
  color: var(--chu-phu);
}
.so-sanh-dong b { font-family: var(--chu-tay); font-weight: 400; }
.so-sanh-ta { color: var(--giay); }
.so-sanh-ta b { font-weight: 500; }
@media (max-width: 560px) {
  .so-sanh-dong { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.gach-dau { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--net-mo); }
.gach-dau li {
  padding: 13px 0;
  border-bottom: 1px solid var(--net-mo);
  color: rgba(250, 250, 247, 0.78);
}

/* ---------- bang so ---------- */
.bang-so {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--net-mo);
  border: 1px solid var(--net-mo);
}
.bang-so > div {
  background: var(--muc);
  padding: clamp(18px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  justify-content: space-between;
}
.bang-so dt {
  font-size: 13px;
  color: var(--chu-phu);
  line-height: 1.45;
}
.bang-so dd {
  margin: 0;
  font-family: var(--chu-so);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- tai ---------- */
/* Phần hướng dẫn nằm SAU sân trong luồng, nên nó phải trôi lên TRÊN sân khi người ta cuộn
   tới. Cùng luật với chân trang. Trường hạt ở lại làm nền. */
.man-tai {
  position: relative;
  z-index: 6;
  padding-bottom: clamp(90px, 12vh, 160px);
}
.tai-bang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--net-mo);
  border: 1px solid var(--net-mo);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.tai-the {
  background: var(--muc);
  padding: clamp(22px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tai-the h3 {
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.025em;
  margin: 0;
}
.tai-the-chip { margin: 0; font-size: 14px; color: var(--chu-phu); }
.tai-the-vi { margin: 0; font-size: 14px; color: var(--chu-phu); max-width: 38ch; }
.tai-cho-dong { margin: 0; font-size: 15px; }
.tai-the-cho { background: linear-gradient(180deg, var(--lot-dang-duyet) 0%, var(--muc) 62%); }

.tai-cot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(26px, 3.4vw, 52px);
}
.tai-o h3 {
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--gian-rong);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--net-mo);
}
.tai-o p { margin: 0 0 12px; font-size: 15px; color: rgba(250, 250, 247, 0.76); }
.tai-o-canh h3 { color: var(--phai-sua); border-bottom-color: color-mix(in srgb, var(--phai-sua) 40%, transparent); }
.danh-so { margin: 0; padding-left: 20px; font-size: 15px; color: rgba(250, 250, 247, 0.76); }
.danh-so li { margin-bottom: 10px; }

/* ---------- wallpaper builder ---------- */
.wb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 760px) { .wb { grid-template-columns: minmax(0, 1fr); } }
.wb-form { display: flex; flex-direction: column; gap: 22px; }
.wb-form fieldset { border: 0; margin: 0; padding: 0; }
.wb-form legend, .wb-nhan {
  font-family: var(--chu-tay);
  font-size: 12px;
  letter-spacing: var(--gian-rong);
  color: var(--chu-phu);
  padding: 0;
  margin: 0 0 10px;
}
.wb-chon { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-chon label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--net);
  border-radius: 2px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .2s ease, background-color .2s ease;
}
.wb-chon label:has(:checked) { border-color: var(--giay); background: color-mix(in srgb, var(--giay) 8%, transparent); }
.wb-chon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wb-chon .so { font-size: 13px; color: var(--chu-phu); }
.wb-tha {
  display: block;
  padding: clamp(28px, 4vw, 44px) 20px;
  border: 1px dashed var(--net);
  border-radius: 2px;
  text-align: center;
  color: rgba(250, 250, 247, 0.78);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.wb-tha:hover, .wb-tha.dang-keo { border-color: var(--tin-hieu); background: color-mix(in srgb, var(--tin-hieu) 8%, transparent); }
.wb-tha.co-anh { border-style: solid; }
.wb-tha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wb-tha:has(:focus-visible) { outline: 2px solid var(--tin-hieu); outline-offset: 3px; }
.wb-dao { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.wb-dao input { width: 16px; height: 16px; margin: 0; accent-color: var(--tin-hieu); }
.wb-nut {
  appearance: none;
  align-self: flex-start;
  border: 1px solid var(--giay);
  border-radius: 2px;
  background: var(--giay);
  color: var(--muc);
  padding: 14px 26px;
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.wb-nut:hover:not(:disabled) { background: var(--tin-hieu); border-color: var(--tin-hieu); color: var(--giay); transform: translateY(-2px); }
.wb-nut:disabled { opacity: .35; cursor: default; }
.wb-xem { position: sticky; top: 80px; }
.wb-xem canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--muc);
  border: 1px solid var(--net);
  image-rendering: pixelated;
}
.wb-kich { margin: 10px 0 0; font-size: 13px; color: var(--chu-phu); text-align: center; }
.wb-ghi-chu { max-width: 54ch; margin: 0; font-size: 14px; color: var(--chu-phu); }
/* Cảnh báo founder đặt 15/09/2026: ảnh dựng ở đây kém hơn ảnh tenor/cross tự vẽ trên máy. */
.wb-canh-bao {
  max-width: 62ch;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 12px 16px;
  border-left: 2px solid var(--dang-duyet);
  font-size: 15px;
  color: rgba(250, 250, 247, 0.82);
}

/* Khối thêm dưới hai cột nạp: đồng bộ KOReader, founder đặt 15/09/2026 đêm. Nút là thẻ `a`
   ra ngoài site; KHÔNG dùng lớp .nut-tai vì `.co-hat .nut-tai` giấu nó trên trang có sân. */
.tai-them { margin-top: clamp(40px, 6vw, 72px); max-width: 62ch; }
.nut-ngoai {
  display: inline-block;
  margin-top: 6px;
  padding: 13px 22px;
  border: 1px solid var(--giay);
  border-radius: 2px;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.nut-ngoai:hover { background: var(--tin-hieu); border-color: var(--tin-hieu); color: var(--giay); transform: translateY(-2px); }

/* ---------- chan ---------- */
.chan {
  border-top: 1px solid var(--net-mo);
  padding: clamp(40px, 6vh, 70px) var(--le);
}
.chan-trong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(20px, 4vw, 48px);
}
.chan-hieu { font-size: 18px; margin: 0; }
.chan-dong { margin: 0; font-size: 14px; color: var(--chu-phu); }
.chan-lien-he { display: flex; gap: 20px; margin-left: auto; }
.chan-lien-he a { color: var(--chu-phu); text-decoration: none; }
.chan-lien-he a:hover { color: var(--giay); }
@media (max-width: 640px) { .chan-lien-he { margin-left: 0; } }

/* Download cards: the three heads share one row height so the download buttons line up; long SHA-256 strings wrap */
.tai-the { min-width: 0; }
.tai-the-dau, .tai-the-than { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tai-the-vi { overflow-wrap: anywhere; }
@supports (grid-template-rows: subgrid) {
  .tai-the { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
}