/* Trang tính năng, và khu "Có gì mới" trên trang chủ.
   tenor-brand-version: 1.3.0; màu và mặt chữ đọc từ token.css.

   Tệp RIÊNG, cố ý: `trang.css` đang được kosync.tenor.vn nạp qua mạng, nên mọi lớp mới của
   trang này nằm ở đây với tiền tố `tn-` (tính năng) và `cgm-` (có gì mới). Đừng đưa lớp nào
   ở đây sang `trang.css`.

   Bẫy phải nhớ: `.co-hat .may` và `.co-hat .nut-tai` là luật toàn trang trong `trang.css`,
   phần tử mang hai lớp đó trên trang có sân là tàng hình. Khung máy ở đây bọc bằng `.tn-may`
   và chỉ mượn các lớp con `.may-than`, `.may-man`, `.may-nut-truoc`, `.may-nut-canh`. */

/* ---------- ký hiệu nút, vẽ lại đúng hình firmware ----------
   Hình gốc ở lib/GfxRenderer/InlineSymbols.cpp: lên, xuống, trái, phải là tam giác đặc;
   Trở về là hai tam giác trái; Chọn là một dấu kiểm đặc. Ký hiệu nằm trong câu thì phải có
   khoảng trống hai bên, nên `margin-inline` chứ không phải chỉ `gap` của thẻ cha. */
.tn-ky-hieu {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-inline: 0.28em;
  fill: var(--giay);
  flex: none;
}
.tn-ky-hieu-canh { fill: var(--xuong); }

/* ---------- phần chữ của trang tính năng ----------
   Canvas hạt là `position: fixed` ở z-index 4, nên mọi mục chữ nằm sau sân PHẢI có
   z-index cao hơn, đúng cách `.man-tai` của trang tải đang làm. Thiếu dòng này thì cuộn
   xuống vẫn chỉ thấy sân, còn chữ nằm dưới canvas. Đã dính 16/09/2026. */
.tn-man { position: relative; z-index: 6; }

/* ---------- mở đầu một khu ---------- */
.tn-mo {
  max-width: 60ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.82);
  margin: 0 0 clamp(30px, 4vw, 44px);
}
.tn-loi {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--chu-phu);
  margin: 0 0 26px;
}

/* ---------- sơ đồ vị trí nút trên máy ---------- */
.tn-so-do {
  margin: 0 0 clamp(34px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 720px) {
  /* Một cột thì hình máy kéo hết bề rộng và ăn gần trọn một màn điện thoại. Kẹp lại
     220 điểm ảnh: đủ để thấy nút nằm đâu, và phần chú thích vào màn cùng lúc. */
  .tn-so-do { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tn-so-do svg { max-width: 220px; margin: 0 auto; }
}
.tn-so-do svg { width: 100%; height: auto; display: block; }
.tn-so-do figcaption { margin: 0; }
.tn-chu-thich-so-do {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.tn-chu-thich-so-do li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.78);
}
.tn-chu-thich-so-do b {
  font-family: var(--chu-tay);
  font-weight: 500;
  color: var(--giay);
}
.tn-so-hieu {
  font-family: var(--chu-so);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--chu-phu);
  border: 1px solid var(--net);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- bảng thao tác ---------- */
.tn-thao-tac {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--net-mo);
}
.tn-thao-tac > li {
  border-bottom: 1px solid var(--net-mo);
  padding: 20px 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 46px);
  align-items: start;
}
@media (max-width: 680px) {
  .tn-thao-tac > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.tn-bam {
  margin: 0;
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--giay);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.tn-bam .tn-ky-hieu { margin-inline: 0 0.3em; }
.tn-ket-qua { margin: 0; }
.tn-ket-qua p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: rgba(250, 250, 247, 0.76); }
.tn-ket-qua p:last-child { margin-bottom: 0; }
.tn-ngu-canh {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tn-ngu-canh li {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(250, 250, 247, 0.76);
  padding-left: 16px;
  position: relative;
}
.tn-ngu-canh li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--be-tong);
}
.tn-ngu-canh b {
  font-family: var(--chu-tay);
  font-weight: 500;
  color: var(--giay);
}

/* ---------- máy và ảnh màn ---------- */
.tn-may {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tn-may figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--chu-phu);
  text-align: center;
  max-width: 34ch;
}

/* ---------- lưới tính năng phụ ---------- */
.tn-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--net-mo);
  border: 1px solid var(--net-mo);
}
.tn-o {
  background: var(--muc);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tn-o h3 {
  margin: 0;
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.025em;
}
.tn-o p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(250, 250, 247, 0.74); }
.tn-o .tn-duong-di {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  color: var(--chu-phu);
}
/* Ô trỏ sang kosync.tenor.vn: cả ô bấm được nhờ ::after của đường dẫn trong tiêu đề. */
.tn-o-lien-ket { position: relative; transition: background-color 0.2s; }
.tn-o-lien-ket:hover { background: rgba(250, 250, 247, 0.04); }
.tn-o-lien-ket h3 a { color: inherit; text-decoration: none; }
.tn-o-lien-ket h3 a::after { content: ""; position: absolute; inset: 0; }
.tn-o-lien-ket h3 a:focus-visible { outline: none; }
.tn-o-lien-ket:has(a:focus-visible) { outline: 2px solid var(--giay); outline-offset: -2px; }
.tn-o-lien-ket h3::after { content: " \2197"; color: var(--chu-phu); }

/* ---------- mở rộng đọc thêm, dùng lại .release-panel ---------- */
.tn-them { margin-top: clamp(26px, 3vw, 40px); max-width: 74ch; }

/* ---------- CÓ GÌ MỚI, nằm trên TRANG TẢI ----------
   Founder chốt 16/09/2026: lịch sử phiên bản thuộc trang tải, đặt ngay dưới hai thẻ máy.
   Nó là một khối trong `section#tai`, không phải một mục `.man` riêng, nên nhịp dọc đi theo
   `.tai-bang` và `.github-moi` ở trên. Section đó đã mang z-index 6 nên khối này không cần
   tự lo phần nằm trên canvas hạt.

   Accordion dùng lại `.release-panel` của release-notes.css: đã có mũi tên xoay, đã có
   `:focus-visible`, và là `details/summary` nên bàn phím với bộ đọc màn hình chạy sẵn. */
.cgm {
  padding-top: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--net-mo);
}
.cgm-tieu-de {
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 26px);
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.cgm-danh-sach { border-bottom: 1px solid var(--net-mo); }
.cgm-ban > summary {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(110px, auto) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: 18px 0 18px 26px;
}
@media (max-width: 640px) {
  .cgm-ban > summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0 16px 24px;
  }
}
.cgm-ban > summary::before { top: 26px; }
.cgm-so {
  font-family: var(--chu-so);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--giay);
}
.cgm-ngay { font-size: 14px; color: var(--chu-phu); }
.cgm-tom-tat { font-size: 15px; line-height: 1.6; color: rgba(250, 250, 247, 0.76); }
.cgm-ban[open] .cgm-tom-tat { color: var(--chu-phu); }
.cgm-nhom { margin: 0 0 18px; }
.cgm-nhom:last-child { margin-bottom: 0; }
.cgm-nhom h4 {
  font-family: var(--chu-tay);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--gian-rong);
  color: var(--giay);
  margin: 0 0 10px;
}
.cgm-cu { margin-top: 22px; }
.cgm-cu > summary { padding-left: 26px; }
.cgm-cu > summary::before { top: 22px; }
.cgm-nguon { margin: 20px 0 0; font-size: 14px; color: var(--chu-phu); }

/* ---------- hàng nút cuối trang tính năng ----------
   KHÔNG dùng `.tai-hanh-dong` và `.nut-tai` ở đây. Hai lớp đó thuộc về cái nút mà bộ máy hạt
   dựng ra rồi trao chỗ: `.co-hat .tai-hanh-dong` để độ mờ 0 và chỉ bộ máy mới mở lại, nên
   trên trang không có chặng nào trỏ vào chúng thì cả hàng nút tàng hình. Đã dính 16/09/2026.
   Hai lớp `.nut-ngoai` và `.nut-repo` là nút thật, không ai giấu. */
.tn-hanh-dong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.tn-hanh-dong .nut-ngoai { margin-top: 0; }
.tn-hanh-dong .nut-repo { padding: 13px 20px; }

/* ---------- màu của hình vị trí nút ----------
   Để trong CSS chứ không viết thẳng vào thuộc tính `fill` của SVG: màu là việc của token,
   và `brand-lint` đọc mã màu viết cứng trong HTML là một lỗi. */
.tn-so-do .tn-vo { fill: none; stroke: rgba(250, 250, 247, 0.28); stroke-width: 1.4; }
.tn-so-do .tn-man-ve { fill: none; stroke: rgba(250, 250, 247, 0.16); stroke-width: 1; }
.tn-so-do .tn-nut-ve { fill: var(--xuong); }
.tn-so-do .tn-so-ve { fill: var(--chu-phu); font-family: var(--chu-tay); font-size: 11px; }

/* ---------- hiện dần khi cuộn tới ----------
   Trạng thái ẩn nằm SAU lớp `co-hien`, và chỉ `hien-dan.js` mới gắn lớp đó. Không JavaScript
   hoặc xin ít chuyển động thì hai luật dưới đây không bao giờ khớp, mọi thứ hiện sẵn.

   Chỉ động vào độ mờ và phép dời: hai thứ này trình duyệt chạy trên lớp hợp thành, nên không
   bắt tính lại bố cục, và bộ máy hạt vẫn giữ nhịp khung của nó. */
.co-hien .hien {
  opacity: 0;
  transform: translateY(14px);
}
.co-hien .hien.da-hien {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--tre, 0s);
}