/* ===========================================================================
   Olenza — bộ giao diện DÙNG CHUNG cho cả bốn site.
   ===========================================================================

   # VÌ SAO FILE NÀY TỒN TẠI

   Trước 2026-09-28, ba codebase dựng giao diện độc lập: olenza.io là HTML
   tĩnh với CSS nội tuyến, olenza-account có 288 dòng CSS riêng (phục vụ cả
   account.olenza.io lẫn node.olenza.io), olenza-explorer có 364 dòng CSS
   riêng. Không file nào dùng chung với file nào.

   Đo được hậu quả: thanh nav cao 64 / 60 / 60 / 83 px ở bốn site nên nó
   NHẢY khi người dùng chuyển trang; bốn bộ link điều hướng khác nhau; ba
   kiểu xác thực khác nhau ("Account" / "Log in + Sign up" / "Account");
   một trang explorer dùng 12 cỡ chữ khác nhau (13.12, 13.3333, 13.6,
   14.08 px — sản phẩm của `em` lồng nhau, không phải một thang chữ).

   File này là nguồn DUY NHẤT. nginx phục vụ nó ở /shared/olenza.css trên
   cả bốn host từ cùng một file trên đĩa, nên không có bản sao nào để trôi.

   # BẢNG MÀU — GIỮ NGUYÊN, KHÔNG SỬA

   Phần token màu dưới đây bê nguyên từ stylesheet cũ của explorer. Nó đã
   được đo theo WCAG AA và có một quy tắc đã chốt:

       THƯƠNG HIỆU ĐỊNH DANH, TRẠNG THÁI THÔNG BÁO.
       brand  -> dấu hiệu, wordmark, nút chính, vòng focus.
       status -> badge, thông báo. KHÔNG BAO GIỜ dùng màu thương hiệu.

   Lý do: dấu hiệu Olenza là hổ phách và nâu đỏ, đúng chỗ "cảnh báo" và
   "lỗi" đang ở. Sienna cách --warn 8.7° sắc độ và cách --bad 24.8°. Tô
   link bằng màu thương hiệu sẽ khiến "đây là link", "đây là cảnh báo" và
   "cái này hỏng" thành ba sắc của cùng một màu.

   # HAI THỨ MỚI

   1. THANG CHỮ và THANG KHOẢNG CÁCH tường minh. Mọi cỡ chữ phải lấy từ
      --t-*, mọi khoảng cách từ --s-*. Không `em` lồng nhau, vì đó chính là
      cái đẻ ra 12 cỡ chữ trên một trang.

   2. BỐ CỤC SNAP. Mỗi trang là một chồng card, mỗi card vừa đúng một màn
      hình, cuộn một nhịp là sang card kế. KHÔNG BAO GIỜ có thanh cuộn bên
      trong card — bảng dài thì phân trang, không cuộn.
   ======================================================================== */

:root {
  /* --- màu: giữ nguyên, đã đo --- */
  accent-color: #B4541C;
  --text: #1F1B17;
  --muted: #6B625A;
  --line: #E7E1DA;
  --bg: #fff;
  --soft: #FCFAF8;
  --accent: #1A5FA8;
  --accent-text: #fff;
  --brand: #B4541C;
  --brand-gold: #D99A32;
  --brand-text: #fff;
  --brand-ink: #1C1814;
  --ok: #17803D;
  --warn: #B35C00;
  --bad: #C0262D;
  --ok-bg: #eaf6ee;
  --accent-bg: #e9effb;
  --warn-bg: #fdf3e6;
  --bad-bg: #fdecec;
  --info-bg: #eaf1fc;

  /* --- thang chữ: 7 bậc, tỉ lệ ~1.25, không có bậc nào khác --- */
  --t-xs: 0.75rem;    /* 12 — nhãn phụ, chú thích */
  --t-sm: 0.8125rem;  /* 13 — nhãn bảng, metadata */
  --t-md: 0.9375rem;  /* 15 — chữ thường, mặc định */
  --t-lg: 1.125rem;   /* 18 — tiêu đề nhỏ */
  --t-xl: 1.5rem;     /* 24 — tiêu đề card */
  --t-2xl: 2.125rem;  /* 34 — số liệu lớn */
  --t-3xl: 3rem;      /* 48 — tiêu đề trang chủ */

  /* --- thang khoảng cách: bội số của 4 --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --radius: 6px;
  --shell-h: 56px;      /* CAO BẰNG NHAU Ở CẢ BỐN SITE. Không site nào đổi. */
  --measure: 1140px;    /* bề ngang tối đa của nội dung một card */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #D99A32;
    --text: #ECE7E1;
    --muted: #A39A90;
    --line: #38302A;
    --bg: #17130F;
    --soft: #221C17;
    --accent: #78A9E6;
    --accent-text: #17130F;
    --brand: #D99A32;
    --brand-gold: #D99A32;
    --brand-text: #17130F;
    --brand-ink: #17130F;
    --ok: #4CC27A;
    --warn: #E79A42;
    --bad: #EF6B6F;
    --ok-bg: #16281c;
    --accent-bg: #17203a;
    --warn-bg: #2d2214;
    --bad-bg: #2e1718;
    --info-bg: #17223a;
  }
}

/* ========================================================================
   NỀN
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Cuộn một nhịp = sang card kế. `always` chặn việc lướt mạnh một cái
     nhảy qua hai ba card — người dùng muốn "chuyển trang", không phải
     "phóng qua trang". */
  scroll-snap-type: y mandatory;
  /* Điểm snap là mép trên card. Không có dòng này thì mép trên card nằm
     dưới thanh shell và tiêu đề bị che. */
  scroll-padding-top: var(--shell-h);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--t-md)/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, summary, input, select):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-sm); font-weight: 600; color: var(--muted);
     text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

/* ========================================================================
   SHELL — giống hệt nhau ở cả bốn site
   ------------------------------------------------------------------------
   Hai thứ duy nhất trong thanh này: dấu hiệu (luôn dẫn về olenza.io) và
   Account. Các link sang sản phẩm khác hiện trên desktop; trên điện thoại
   chúng nhường chỗ cho card "đi đâu" ở cuối mỗi chồng card, vì nhồi năm
   link vào 390px là cách thanh nav explorer phình lên 170px.
   ==================================================================== */

.shell {
  position: sticky; top: 0; z-index: 50;
  height: var(--shell-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-4);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center; gap: var(--s-2);
  color: inherit; text-decoration: none; font-size: var(--t-lg);
  font-weight: 650; letter-spacing: -0.015em; white-space: nowrap;
}
.brand img { width: 24px; height: 24px; display: block; }
.brand .product { color: var(--brand); }

.shell nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.shell nav a {
  color: var(--muted); text-decoration: none; font-size: var(--t-md);
  white-space: nowrap;
}
.shell nav a:hover { color: var(--text); }
.shell nav a.here { color: var(--text); font-weight: 600; }

/* Account: MỘT cái điều khiển duy nhất, tên giống nhau ở cả bốn site.
   Đăng nhập rồi thì nó mở menu; chưa thì nó dẫn tới trang đăng nhập.
   Hành vi đổi theo trạng thái, KHÔNG đổi theo site — đó là chỗ trước đây
   bốn site có ba kiểu khác nhau. */
.acct { position: relative; }
/* .acctlink là cùng một cái điều khiển ấy trên site KHÔNG nhìn thấy phiên
   đăng nhập (olenza.io tĩnh, explorer). Nó phải trông y hệt: người dùng
   không cần biết site nào đọc được cookie nào. */
.acct > summary, .acctlink {
  list-style: none; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-md); color: var(--text);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line); border-radius: 999px;
}
.acctlink:hover { border-color: var(--brand); }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary::after {
  content: ""; width: 5px; height: 5px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.acct[open] > summary { border-color: var(--brand); }
.acct .menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  min-width: 208px; padding: var(--s-2);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgb(0 0 0 / 0.12);
  display: flex; flex-direction: column;
}
.acct .menu a, .acct .menu button {
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: var(--t-md);
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit;
}
.acct .menu a:hover, .acct .menu button:hover { background: var(--soft); }
.acct .menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; }
.acct .who { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); color: var(--muted); }

/* ========================================================================
   CARD — một card = một màn hình
   ------------------------------------------------------------------------
   min-height chứ không phải height, và đó là chủ ý: nếu nội dung một card
   cao hơn màn hình (điện thoại nhỏ, người dùng phóng chữ, chữ dài hơn khi
   dịch) thì card GIÃN RA và trang vẫn cuộn qua nó bình thường. Dùng height
   thì phần thừa bị cắt và không cách nào tới được.
   ==================================================================== */

.card {
  position: relative;                 /* mốc cho .cue, xem bên dưới */
  min-height: calc(100dvh - var(--shell-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-5);
  /* chừa chỗ dưới cho .cue để nó không đè lên nội dung */
  padding: var(--s-6) var(--s-4) var(--s-8);
  margin: 0 auto;
  width: 100%; max-width: var(--measure);
}
.card + .card { border-top: 1px solid var(--line); }

/* .top dành cho card có BẢNG: bảng phải bắt đầu ngay dưới tiêu đề, và số
   dòng của nó vốn đã co theo chiều cao màn hình nên không cần căn giữa.
   Card không có bảng thì căn giữa — căn trên sẽ để lại một mảng trống lớn
   phía dưới, đúng cái làm trang trông sơ sài. */
.card.top { justify-content: flex-start; padding-top: var(--s-6); }

.card > header { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.card > header .ticker { font-size: var(--t-sm); color: var(--muted); font-family: var(--mono); }
.card > header .grow { margin-left: auto; }

/* Gợi ý còn card nữa ở dưới. Ẩn trên card cuối bằng class .last.
   Đặt tuyệt đối chứ không dùng `margin-top: auto`: với margin auto nó đẩy
   phần còn lại lên trên, nên card căn giữa hoá ra căn trên và để lại một
   mảng trống ở dưới. */
.cue {
  position: absolute; left: 0; right: 0; bottom: var(--s-4);
  display: flex; justify-content: center;
  color: var(--muted); font-size: var(--t-xs);
  pointer-events: none;
}
.cue::after {
  content: ""; width: 8px; height: 8px; margin-left: var(--s-2);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); align-self: center;
}
.card.last .cue { display: none; }

/* ========================================================================
   CHỈ SỐ — MỘT khuôn duy nhất
   ------------------------------------------------------------------------
   Trước đây bốn thẻ chỉ số trên trang chain mỗi thẻ một kiểu: một thẻ có
   pill trạng thái, một thẻ có link, một thẻ chữ mono nhỏ, một thẻ tràn số
   ra ngoài (Difficulty hiện "132,757,073,449,48" — cụt giữa chừng). Đó là
   lý do bốn thẻ trông như bốn thứ rời nhau.

   Khuôn ở đây là: NHÃN, SỐ, và một dòng phụ không bắt buộc. Hết. Mọi thẻ
   đều có đúng ba phần đó, kể cả khi dòng phụ trống.
   ==================================================================== */

.stats {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
  padding: var(--s-4);
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--s-1);
  min-width: 0;                       /* cho phép con co lại, nếu không số dài đẩy vỡ lưới */
}
.stat .k { font-size: var(--t-xs); color: var(--muted);
           text-transform: uppercase; letter-spacing: 0.06em; }
.stat .v {
  font-size: var(--t-2xl); font-weight: 650; line-height: 1.1;
  letter-spacing: -0.02em;
  /* Số to phải TỰ THU LẠI chứ không được tràn. Đây là chỗ Difficulty bị
     cắt cụt trước đây: chữ cố định cỡ, ô thì hẹp. */
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.stat .v.long { font-size: var(--t-xl); }   /* số rất dài: hạ một bậc, vẫn đọc được */
.stat .sub { font-size: var(--t-sm); color: var(--muted); min-height: 1.4em; }
.stat .sub a { color: var(--accent); }

/* ========================================================================
   BẢNG — luôn vừa một màn hình
   ------------------------------------------------------------------------
   Không có thanh cuộn trong card, nên số dòng phải tự co theo chiều cao
   màn hình. Không dùng JS: các truy vấn media theo CHIỀU CAO ẩn bớt dòng
   cuối. Phần bị ẩn luôn tới được qua nút phân trang bên dưới.
   ==================================================================== */

.rows { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.rows th {
  text-align: left; font-size: var(--t-xs); color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0 var(--s-3) var(--s-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* KHÔNG nowrap mặc định. Bảng ở trang tài liệu có ô là câu văn, và ép
   nowrap cho mọi ô làm trang API tràn ngang 1310px trên điện thoại (đo
   2026-09-28). Nowrap chỉ đúng với thứ không được phép xuống dòng: số và
   hash — chúng tự khai báo bằng class của mình. */
.rows td { padding: var(--s-3); border-bottom: 1px solid var(--line); }
.rows td.num, .rows td.nw, .rows th { white-space: nowrap; }
.rows tbody tr:hover td { background: var(--soft); }
.rows .num { text-align: right; font-variant-numeric: tabular-nums; }
.rows .hash { font-family: var(--mono); font-size: var(--t-sm); }
.rows td:first-child, .rows th:first-child { padding-left: 0; }
.rows td:last-child, .rows th:last-child { padding-right: 0; }

/* Mức MẶC ĐỊNH phải có, không chỉ các mức cho màn thấp. Thiếu nó thì trên
   một màn 900px không dòng nào bị ẩn và card bảng cao 1187px — tức là card
   ấy không còn vừa một màn hình, đúng thứ cả bố cục này dựng ra để tránh
   (đo 2026-09-28 trên /btc). */
.rows tbody tr:nth-child(n+13) { display: none; }
@media (min-height: 1040px) { .rows tbody tr:nth-child(-n+17) { display: table-row; } }
@media (min-height: 1240px) { .rows tbody tr:nth-child(-n+21) { display: table-row; } }
@media (max-height: 860px) { .rows tbody tr:nth-child(n+11) { display: none; } }
@media (max-height: 760px) { .rows tbody tr:nth-child(n+9)  { display: none; } }
@media (max-height: 660px) { .rows tbody tr:nth-child(n+7)  { display: none; } }
@media (max-height: 560px) { .rows tbody tr:nth-child(n+5)  { display: none; } }

.pager { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.pager .grow { margin-left: auto; }
.pager .at { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ========================================================================
   BỘ CHỌN CHAIN — thay cho 9 link trên thanh nav
   ------------------------------------------------------------------------
   Chín link chain trên thanh nav làm nó cao 170px trên điện thoại, tức 20%
   màn hình chỉ để liệt kê. Bộ chọn này là MỘT nút; nó cũng thuộc về nội
   dung explorer chứ không thuộc shell, nhờ vậy thanh shell cao bằng nhau
   ở cả bốn site.
   ==================================================================== */

.chainpick { position: relative; display: inline-block; }
.chainpick > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: var(--t-md); font-weight: 600;
}
.chainpick > summary::-webkit-details-marker { display: none; }
.chainpick > summary::after {
  content: ""; width: 5px; height: 5px; margin-left: var(--s-1);
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}
.chainpick[open] > summary { border-color: var(--brand); }
.chainpick img { width: 20px; height: 20px; display: block; flex: none; }

/* Neo PHẢI, không phải trái. Nút chọn chain nằm ở mép phải của đầu card,
   nên một bảng ba cột neo trái sẽ thò hẳn ra ngoài màn hình (thấy khi mở
   nó trên /btc ở 1440px). */
.chainpick .list {
  position: absolute; right: 0; left: auto; top: calc(100% + var(--s-2)); z-index: 40;
  max-width: calc(100vw - 2 * var(--s-4));
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--s-1); padding: var(--s-2);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 32px rgb(0 0 0 / 0.14);
}
.chainpick .list a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: var(--t-md);
}
.chainpick .list a:hover { background: var(--soft); }
.chainpick .list a[aria-current] { background: var(--soft); font-weight: 600; }
.chainpick .list .tk { margin-left: auto; font-family: var(--mono);
                       font-size: var(--t-xs); color: var(--muted); }

/* ========================================================================
   NÚT, Ô NHẬP, NHÃN TRẠNG THÁI
   ==================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: 600 var(--t-md)/1.4 inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.big { padding: var(--s-3) var(--s-5); font-size: var(--t-lg); }

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select {
  padding: var(--s-3); font: var(--t-md)/1.4 inherit;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field input:focus { border-color: var(--brand); }

.search { display: flex; gap: var(--s-2); width: 100%; }
.search input { flex: 1; min-width: 0; padding: var(--s-3) var(--s-4);
                font: var(--t-md)/1.4 inherit; color: var(--text); background: var(--bg);
                border: 1px solid var(--line); border-radius: var(--radius); }

/* Badge LUÔN là trạng thái, không bao giờ mang màu thương hiệu. */
.badge {
  display: inline-block; padding: 1px var(--s-2); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--accent); }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ========================================================================
   CARD "ĐI ĐÂU" — card cuối của mọi chồng, giống hệt nhau ở bốn site
   ------------------------------------------------------------------------
   Đây là chỗ điều hướng giữa các sản phẩm sống trên điện thoại, nơi thanh
   shell không đủ rộng để chứa link.
   ==================================================================== */

.go { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.go a {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--soft); color: var(--text); text-decoration: none;
}
.go a:hover { border-color: var(--brand); }
.go a b { font-size: var(--t-lg); }
.go a span { font-size: var(--t-sm); color: var(--muted); }

.foot { font-size: var(--t-sm); color: var(--muted);
        display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* ========================================================================
   MÀN HÌNH NHỎ
   ==================================================================== */

@media (max-width: 720px) {
  /* Link sản phẩm rời khỏi shell; chúng sống ở card "đi đâu". */
  .shell nav { display: none; }
  .shell { gap: var(--s-2); }
  .brand { font-size: var(--t-md); }
  .card { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
  .chainpick .list { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  :root { --t-2xl: 1.75rem; --t-3xl: 2.125rem; }
  /* HAI cột, không phải một. Với auto-fit/minmax(190px) thì một màn 390px
     chỉ đủ một cột, và bảy chỉ số của Ethereum hay Monero xếp dọc làm card
     cao 1254px trong một màn 788px (đo 2026-09-28). */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .stat { padding: var(--s-3); }
  .stat .sub { min-height: 0; }
}

@media (max-width: 420px) {
  .chainpick .list { grid-template-columns: 1fr; }
}

/* Cột đánh dấu .drop nhường chỗ trước khi bảng tràn ngang. Ngưỡng là 560px
   chứ không phải 420px: một bảng năm cột đã rộng 503px trong một màn 390px,
   và nó bắt đầu chật từ rất trước 420. */
@media (max-width: 560px) { .rows .drop, .rows th.drop, .rows td.drop { display: none; } }

/* Màn hình rất thấp (điện thoại xoay ngang, cửa sổ bị kéo dẹt): snap theo
   màn hình lúc này hại nhiều hơn lợi, vì một card không thể vừa nổi. Tắt
   snap và trả trang về cuộn thường. */
@media (max-height: 480px) {
  html { scroll-snap-type: none; }
  .card { min-height: 0; justify-content: flex-start; }
  .cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* In ra giấy: snap và shell dính không còn nghĩa gì. */
@media print {
  html { scroll-snap-type: none; }
  .shell, .cue, .go { display: none; }
  .card { min-height: 0; page-break-inside: avoid; }
}

/* --- Hai kiểu vỡ trên màn hẹp, đo trên trang tài liệu API 2026-09-28 ---- */

/* Một <code> chứa URL hoặc khoá dài 589px trong một màn 390px. Inline code
   phải được phép xuống dòng ở bất kỳ đâu — nó là chữ, không phải khối mã. */
code { overflow-wrap: anywhere; }

/* .rows.stack — bảng SO SÁNH (ô là câu văn, không phải số) xếp chồng trên
   màn hẹp. Bảng bốn cột văn xuôi có bề rộng tối thiểu 537px và không có
   cách nào nhét vừa 358px; xếp chồng giữ được đủ chữ. Bảng dữ liệu KHÔNG
   dùng class này: hash và số đọc theo cột mới có nghĩa. */
@media (max-width: 560px) {
  /* `th` cũng phải ẩn, không chỉ `thead`. Một số bảng viết hàng tiêu đề
     thẳng trong tbody (không có thẻ thead), nên quy tắc chỉ nhắm thead
     không chạm tới chúng và hàng tiêu đề nowrap giữ bảng rộng 534px trong
     một màn 390px — đúng chỗ trang API tràn ngang. Nhãn của từng ô đã nằm
     ở data-k rồi. */
  .rows.stack thead, .rows.stack th { display: none; }
  .rows.stack tr { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .rows.stack td { display: block; border: 0; padding: var(--s-1) 0; }
  .rows.stack td::before { content: attr(data-k); display: block;
    font-size: var(--t-xs); color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; }
}

/* --- Flash ---------------------------------------------------------------
   Thông báo một lần: dính ngay dưới shell, không chiếm chỗ của card nào.
   Trong một chồng card snap, một khối chen giữa hai card sẽ tạo ra một
   điểm dừng không tương ứng với card nào. */
.flashbar {
  position: sticky; top: var(--shell-h); z-index: 40;
  padding: var(--s-3) var(--s-4); font-size: var(--t-md);
  border-bottom: 1px solid var(--line);
}
.flashbar.ok { background: var(--ok-bg); color: var(--ok); }
.flashbar.error, .flashbar.bad { background: var(--bad-bg); color: var(--bad); }
.flashbar.warn { background: var(--warn-bg); color: var(--warn); }
.flashbar.info { background: var(--info-bg); color: var(--accent); }

/* .card.center — card chứa MỘT khối hẹp: biểu mẫu đăng nhập, một thông
   báo. Không có nó, biểu mẫu đăng nhập dán sát mép trái trong khi nửa phải
   màn hình bỏ trống — đo trên account.olenza.io/login 2026-09-28. */
.card.center { align-items: center; text-align: left; }
.card.center > * { width: 100%; max-width: 420px; }
.card.center > .cue { max-width: none; }