/* Bàn điều khiển dựng trên nền mặt nạ hàn: thanh bên cố định, top bar dính,
   nội dung xếp thành panel. Mỗi panel là một linh kiện trên bo - có nhãn
   silkscreen, có ký hiệu tham chiếu, và có một đoạn mạch đồng chạy vào ở góc
   trên. Đường mạch chỉ còn hai chỗ được phép nổi: góc panel, và đường dọc
   xâu chuỗi bảy bước cài đặt. Mọi chỗ khác giữ im. */

:root {
    --mask:   #0a2622;  /* nền trang, màu mặt nạ hàn */
    --mask-2: #0e312b;  /* khối chìm: thanh bên, code, hàng tiêu đề bảng */
    --panel:  #123a33;  /* khối nổi: panel, ô số liệu */
    --edge:   #1e4c44;  /* nét mảnh, viền panel */
    --silk:   #e7f1ec;  /* chữ chính, màu mực silkscreen */
    --dim:    #96b0a8;  /* chữ phụ, chú thích */
    --copper: #c0703c;  /* đường mạch - chỉ dùng cho nét, không cho chữ nhỏ */
    --pad:    #f0c25c;  /* pad mạ vàng - nhấn, số bước, tuỳ chọn */

    /* Màu trạng thái. Chỉ cho chấm và chip, không bao giờ cho chữ thân bài,
       và không bao giờ đứng một mình - luôn có chữ đi kèm. */
    --ok:     #5fbf8f;

    --sans: "Be Vietnam Pro", system-ui, sans-serif;
    --disp: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    --nav: 236px;   /* bề ngang thanh bên */
    --bar: 56px;    /* chiều cao top bar */
    --gap: 16px;    /* khe giữa các panel */
    --pad-x: 18px;  /* lề trong panel - bảng tràn viền tính ngược theo số này */
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--mask);
    color: var(--silk);
    font: 400 0.97rem/1.65 var(--sans);
}

::selection { background: var(--pad); color: var(--mask); }

a { color: var(--pad); text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--pad);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip { position: absolute; left: -9999px; }

.skip:focus {
    left: 12px;
    top: 12px;
    z-index: 20;
    padding: 10px 16px;
    background: var(--panel);
    color: var(--silk);
    font: 500 0.9rem var(--mono);
    text-decoration: none;
}

/* ── Thanh bên ───────────────────────────────────────────────────────── */

.nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: var(--nav);
    padding-bottom: 18px;
    overflow-y: auto;
    background: var(--mask-2);
    border-right: 1px solid var(--edge);
}

/* Lưới lỗ khoan còn lại ở đây thôi - vật liệu của trang, giữ ở một chỗ. */
.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(150, 176, 168, 0.14) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 52%);
    mask-image: linear-gradient(to bottom, #000, transparent 52%);
}

.brand {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 11px;
    height: var(--bar);
    padding: 0 18px;
    border-bottom: 1px solid var(--edge);
    color: var(--silk);
    text-decoration: none;
}

.brand svg { width: 22px; height: 22px; flex: none; }

.brand span { display: block; }

.brand-t {
    font: 700 0.95rem/1.2 var(--disp);
    font-variation-settings: "wdth" 112;
}

.brand-s {
    color: var(--dim);
    font: 400 0.64rem/1.4 var(--mono);
    letter-spacing: 0.12em;
}

.nav-g {
    position: relative;
    padding: 18px 12px 0;
}

.nav-h {
    margin: 0 0 8px;
    padding: 0 10px;
    color: var(--dim);
    font: 400 0.64rem/1.5 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav ul { margin: 0; padding: 0; list-style: none; }

.nav a.item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 22px;
    border-radius: 3px;
    color: var(--dim);
    font-size: 0.9rem;
    text-decoration: none;
}

.nav a.item:hover {
    background: rgba(231, 241, 236, 0.05);
    color: var(--silk);
}

/* Trang đang xem: một pad mạ vàng, cùng ngôn ngữ với via trên đường mạch. */
.nav a.item[aria-current="page"] {
    background: rgba(240, 194, 92, 0.09);
    color: var(--silk);
}

.nav a.item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9px;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--pad);
}

/* ── Chấm và chip trạng thái ─────────────────────────────────────────── */

.dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dim);
}

.dot-ok   { background: var(--ok); }
.dot-warn { background: var(--pad); }
.dot-off  { background: none; box-shadow: inset 0 0 0 1.5px var(--dim); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--edge);
    border-radius: 2px;
    color: var(--dim);
    font: 400 0.72rem/1.4 var(--mono);
    white-space: nowrap;
}

.chip-warn { border-color: rgba(240, 194, 92, 0.4); color: var(--pad); }

/* ── Khung nội dung ──────────────────────────────────────────────────── */

.main { margin-left: var(--nav); }

/* Top bar dính đè lên đầu trang, nên mọi neo phải tự chừa chỗ cho nó. */
[id] { scroll-margin-top: calc(var(--bar) + 14px); }

.bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    height: var(--bar);
    padding: 0 28px;
    background: rgba(10, 38, 34, 0.9);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--edge);
}

.bar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.bar h1 {
    margin: 0;
    font-family: var(--disp);
    font-weight: 800;
    font-variation-settings: "wdth" 114;
    font-size: 1.28rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.canvas {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 28px 56px;
}

.lede {
    max-width: 74ch;
    margin: 0 0 22px;
    color: var(--dim);
    font-size: 1.02rem;
}

/* ── Ô số liệu ───────────────────────────────────────────────────────── */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.tile {
    position: relative;
    padding: 15px 17px 17px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 3px;
}

.tile-l {
    margin: 0 0 10px;
    color: var(--dim);
    font: 400 0.66rem/1.4 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tile-v {
    margin: 0;
    font: 500 1.22rem/1.3 var(--mono);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.tile-n {
    margin: 9px 0 0;
    color: var(--dim);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ── Panel ───────────────────────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.panel {
    position: relative;
    grid-column: span 12;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 3px;
}

/* Đoạn mạch đồng chạy vào góc trên - dấu hiệu duy nhất lặp trên mọi panel. */
.panel::after, .tile::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 34px;
    height: 2px;
    background: var(--copper);
}

.c5 { grid-column: span 5; }
.c7 { grid-column: span 7; }

.p-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 11px var(--pad-x);
    border-bottom: 1px solid var(--edge);
}

.p-l {
    color: var(--silk);
    font: 500 0.71rem/1.4 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* Ký hiệu tham chiếu, đọc như silkscreen trên bo: U là gateway, J là đường
   vào, TP là chỗ cần dò khi trục trặc, M là module. */
.p-d {
    color: var(--dim);
    font: 400 0.68rem/1.4 var(--mono);
    letter-spacing: 0.08em;
}

.p-t {
    margin: 0;
    font-family: var(--disp);
    font-weight: 700;
    font-variation-settings: "wdth" 106;
    font-size: 1.05rem;
    line-height: 1.25;
}

.p-b { padding: var(--pad-x); }

.p-b > :first-child { margin-top: 0; }
.p-b > :last-child  { margin-bottom: 0; }

.p-b h2 {
    margin: 0 0 12px;
    font-family: var(--disp);
    font-weight: 700;
    font-variation-settings: "wdth" 104;
    font-size: clamp(1.05rem, 1.6vw, 1.26rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.p-b p { max-width: 68ch; margin: 0 0 12px; }

/* Đủ cụ thể để thắng `.p-b p` ở trên - hai chọn lọc cùng hạng thì thứ tự
   trong file quyết định, và dựa vào thứ tự là chỗ dễ vỡ nhất của CSS. */
.p-b p.acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
    margin: 0;
}

/* Một dòng ghi chú khép panel lại, nằm dưới nét ngăn của khối chính. */
.p-note {
    margin: 0;
    padding: 12px var(--pad-x);
    border-top: 1px solid var(--edge);
    color: var(--dim);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ── Bảy bước ────────────────────────────────────────────────────────── */

.steps {
    position: relative;
    counter-reset: buoc;
    display: grid;
    /* Cột phải được phép hẹp hơn nội dung: mặc định `auto` lấy min-content của
       panel - mà min-content của một bảng bốn cột là hơn 500px - nên cả trang
       bị kéo ngang trên điện thoại. minmax(0, 1fr) trả việc cuộn ngang về đúng
       chỗ của nó: bên trong bảng và khối mã. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin: 0;
    padding: 0 0 0 52px;
    list-style: none;
}

/* Đường mạch còn sống ở đúng chỗ nó mang nghĩa: thứ tự bảy bước. */
.steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 16px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(var(--copper) 0 76%, rgba(192, 112, 60, 0) 100%);
    transform-origin: top;
    animation: draw 1s 0.1s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}

.steps + .grid { margin-top: var(--gap); }

.step::before {
    counter-increment: buoc;
    content: counter(buoc, decimal-leading-zero);
    position: absolute;
    top: 6px;
    left: -52px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--copper);
    border-radius: 50%;
    background: var(--mask);
    color: var(--pad);
    font: 500 0.78rem var(--mono);
}

/* ── Danh sách có trạng thái ─────────────────────────────────────────── */

.list { max-width: 74ch; margin: 0; }

.list > div {
    padding: 13px 0;
    border-top: 1px solid var(--edge);
}

.list > div:first-child { padding-top: 0; border-top: 0; }

.list dt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
}

.list dt .dot { margin-top: 0.55em; }

.list dd {
    margin: 5px 0 0 17px;
    color: var(--dim);
    font-size: 0.92rem;
}

/* ── Mã lệnh ─────────────────────────────────────────────────────────── */

pre {
    margin: 0 0 12px;
    padding: 13px 16px;
    overflow-x: auto;
    background: var(--mask-2);
    border: 1px solid var(--edge);
    border-left: 2px solid var(--copper);
    border-radius: 0 3px 3px 0;
}

pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre;
}

code {
    padding: 2px 6px;
    background: var(--mask-2);
    border: 1px solid var(--edge);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 0.87em;
    white-space: nowrap;
}

strong { font-weight: 600; }

em { font-style: normal; color: var(--silk); }

/* ── Ô cảnh báo ──────────────────────────────────────────────────────── */

.warn {
    margin: 16px 0 0;
    padding: 15px 16px;
    background: rgba(192, 112, 60, 0.08);
    border: 1px solid rgba(192, 112, 60, 0.42);
    border-radius: 3px;
}

/* Chấm căn theo dòng đầu chứ không theo cả khối: trên màn hình hẹp tiêu đề
   cảnh báo xuống hai dòng, và một cái chấm trôi ra giữa hai dòng thì không còn
   đọc ra là dấu đầu dòng nữa. */
.warn-h {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 10px;
    color: var(--pad);
    font: 500 0.71rem/1.4 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.warn-h::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 0.4em;
    border-radius: 50%;
    background: var(--pad);
}

.warn p {
    max-width: 74ch;
    margin: 0 0 10px;
    color: var(--dim);
    font-size: 0.92rem;
}

.warn p:last-child { margin-bottom: 0; }

.warn-solo { margin: 0 0 var(--gap); }

/* ── Bảng ────────────────────────────────────────────────────────────── */

/* Bảng tràn ra sát viền panel: hàng tiêu đề trở thành một dải riêng, đọc như
   bảng số liệu chứ không như một khối chữ thụt vào. */
.tablebox {
    margin: 14px calc(-1 * var(--pad-x)) 0;
    overflow-x: auto;
}

.p-b > .tablebox:first-child { margin-top: 0; }
.p-b > .tablebox:last-child  { margin-bottom: calc(-1 * var(--pad-x)); }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

caption {
    padding: 0 var(--pad-x) 11px;
    color: var(--dim);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: left;
}

thead th {
    padding: 9px var(--pad-x);
    background: var(--mask-2);
    color: var(--dim);
    font: 400 0.66rem var(--mono);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    border-top: 1px solid var(--edge);
    border-bottom: 1px solid var(--edge);
}

tbody th, tbody td {
    padding: 11px var(--pad-x);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--edge);
}

tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

tbody th {
    font: 500 0.88rem var(--mono);
    white-space: nowrap;
}

tbody td { color: var(--dim); }

.cell {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

/* ── Sơ đồ ───────────────────────────────────────────────────────────── */

/* Nêu rõ cha để thắng `.p-b > :last-child` - nếu không, sơ đồ đứng cuối panel
   sẽ mất lề tràn và hở ra một dải nền panel bên dưới. */
.p-b > .diagram {
    margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-x));
    padding: 20px var(--pad-x);
    overflow-x: auto;
    background: var(--mask-2);
    border-top: 1px solid var(--edge);
}

/* Hai bản sơ đồ: bản ngang cho màn hình rộng, bản dựng đứng cho điện thoại.
   Ép bản ngang xuống 360px thì chữ còn 8px, mà bắt cuộn ngang một cái sơ đồ
   thì người đọc mất luôn cái nhìn tổng thể - thứ duy nhất sơ đồ có để cho. */
.diagram svg {
    display: block;
    width: 100%;
    min-width: 600px;
    height: auto;
}

.diagram svg.d-narrow { display: none; }

.d-box rect, .d-slab {
    fill: var(--panel);
    stroke: var(--edge);
    stroke-width: 1;
}

.d-name { fill: var(--silk); font: 600 15px var(--disp); text-anchor: middle; }

.d-sub { fill: var(--dim); font: 400 12px var(--mono); text-anchor: middle; }

/* Phải đứng sau .d-name và .d-sub: cùng hạng chọn lọc thì cái sau thắng, và
   bản dựng đứng cần nhãn căn trái chứ không căn giữa. */
.d-l { text-anchor: start; }

.d-wire path { fill: none; stroke: var(--copper); stroke-width: 1.5; }

.d-tipfill { fill: var(--copper); }

/* ── Nút ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 12px 20px;
    background: var(--pad);
    border: 0;
    border-radius: 3px;
    color: var(--mask);
    font: 600 0.92rem var(--sans);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: #f6cf78; }

.btn-2 {
    background: none;
    border: 1px solid var(--edge);
    color: var(--silk);
}

.btn-2:hover { background: rgba(231, 241, 236, 0.05); border-color: var(--dim); }

/* Cách dự phòng, đặt dưới một nét ngăn: có mặt cho ai cần, không tranh chỗ
   với cách chính. */
p.alt {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--edge);
    color: var(--dim);
    font-size: 0.92rem;
}

/* ── Chọn bo ─────────────────────────────────────────────────────────── */

/* Bốn radio nằm trước hai panel để chọn bo nào thì hiện đúng ô nạp của bo đó
   - không cần một dòng JavaScript nào cho việc này. */
.flash { position: relative; }

.flash > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.picker { display: grid; }

.row {
    display: grid;
    grid-template-columns: 14px 78px 1fr auto;
    align-items: center;
    gap: 4px 14px;
    padding: 13px var(--pad-x);
    border-top: 1px solid var(--edge);
    cursor: pointer;
}

.row:first-of-type { border-top: 0; }

.row:hover { background: rgba(231, 241, 236, 0.04); }

.row-dot {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--dim);
    border-radius: 50%;
}

.row-n { font: 500 0.95rem var(--mono); }

.row-m { color: var(--dim); font-size: 0.85rem; }

.row-s {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dim);
    font: 400 0.74rem var(--mono);
    white-space: nowrap;
}

#b1:checked ~ .panel .row[for="b1"],
#b2:checked ~ .panel .row[for="b2"],
#b3:checked ~ .panel .row[for="b3"],
#b4:checked ~ .panel .row[for="b4"] {
    background: rgba(240, 194, 92, 0.09);
}

#b1:checked ~ .panel .row[for="b1"] .row-dot,
#b2:checked ~ .panel .row[for="b2"] .row-dot,
#b3:checked ~ .panel .row[for="b3"] .row-dot,
#b4:checked ~ .panel .row[for="b4"] .row-dot {
    background: var(--pad);
    border-color: var(--pad);
    box-shadow: inset 0 0 0 2.5px var(--panel);
}

#b1:focus-visible ~ .panel .row[for="b1"],
#b2:focus-visible ~ .panel .row[for="b2"],
#b3:focus-visible ~ .panel .row[for="b3"],
#b4:focus-visible ~ .panel .row[for="b4"] {
    outline: 2px solid var(--pad);
    outline-offset: -2px;
}

.pane { display: none; }

.flash:not(:has(input:checked)) .pane-none { display: block; }

#b1:checked ~ .panel .pane1,
#b2:checked ~ .panel .pane2,
#b3:checked ~ .panel .pane3,
#b4:checked ~ .panel .pane4 {
    display: block;
}

.pane-none { margin: 0; color: var(--dim); }

/* Trước khi module tải xong, mọi slot đều là con thường và hiện ra một lượt.
   Giấu hai câu giải thích cho tới lúc thẻ được định nghĩa. */
esp-web-install-button:not(:defined) [slot="unsupported"],
esp-web-install-button:not(:defined) [slot="not-allowed"] {
    display: none;
}

.pane-msg {
    display: block;
    max-width: 60ch;
    color: var(--dim);
}

/* ── Chân trang ──────────────────────────────────────────────────────── */

.foot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--edge);
}

.foot p {
    margin: 0;
    color: var(--dim);
    font: 400 0.78rem var(--mono);
}

/* ── Vào trang ───────────────────────────────────────────────────────── */

@keyframes draw { from { transform: scaleY(0); } }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.lede, .tile, .panel, .warn-solo {
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tile:nth-child(2), .panel:nth-child(2) { animation-delay: 0.05s; }
.tile:nth-child(3), .panel:nth-child(3) { animation-delay: 0.1s; }
.tile:nth-child(4), .panel:nth-child(4) { animation-delay: 0.15s; }
.panel:nth-child(n + 5) { animation-delay: 0.2s; }

/* ── Màn hình vừa: panel về một cột ──────────────────────────────────── */

@media (max-width: 1060px) {
    .c5, .c7 { grid-column: span 12; }
}

/* ── Màn hình hẹp: thanh bên về một hàng trên đầu ────────────────────── */

@media (max-width: 880px) {
    :root {
        --bar: 50px;
        --gap: 12px;
        --pad-x: 16px;
    }

    /* Màn hình cầm tay đọc ở khoảng cách gần hơn nhưng chữ nhỏ hơn thì khó
       hơn, không dễ hơn. Thân bài lấy lại nửa point đã bớt ở bản rộng. */
    body { font-size: 1rem; }

    .main { margin-left: 0; }

    /* Thanh bên thành hai dải trên đầu trang và cuộn đi cùng nội dung: chỉ
       top bar được phép dính, vì trên 660px chiều cao thì mỗi dải dính là
       một phần nội dung bị lấy mất. */
    .nav {
        position: static;
        display: block;
        width: auto;
        padding: 0;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--edge);
    }

    .nav::before { display: none; }

    .brand { height: 52px; padding: 0 16px; }

    .nav-g { padding: 0; }

    .nav-h { display: none; }

    /* Ba mục chia đều bề ngang. Xếp hàng ngang tự do thì ở 360px chúng xuống
       dòng lởm chởm; chia ba cột thì rộng nào cũng ra một dải phẳng. */
    .nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    /* 14px trên dưới cho ra ô bấm cao 49px - trên ngưỡng 44px của ngón tay. */
    .nav a.item {
        justify-content: center;
        padding: 14px 6px;
        border-radius: 0;
        font-size: 0.86rem;
        text-align: center;
    }

    /* Hàng ngang thì gạch chân đọc nhanh hơn một chấm đứng lề trái, và trả
       lại 22px lề mà chấm đang chiếm. */
    .nav a.item[aria-current="page"] {
        background: rgba(240, 194, 92, 0.07);
        box-shadow: inset 0 -2px 0 var(--pad);
    }

    .nav a.item[aria-current="page"]::before { display: none; }

    .bar { padding: 0 16px; }

    .bar h1 { font-size: 1.12rem; }

    .canvas { padding: 18px 16px 44px; }

    .p-h { flex-wrap: wrap; }

    .steps { padding-left: 0; }

    .steps::before { display: none; }

    /* Không còn đường mạch để ngồi lên, số bước vào ngồi cùng hàng với tiêu
       đề bước - một dòng tiêu đề thay vì hai, nhân bảy bước. */
    .step::before {
        top: 12px;
        left: var(--pad-x);
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }

    .step > .p-h {
        min-height: 54px;
        padding-left: calc(var(--pad-x) + 42px);
    }

    /* Ô mã lệnh xuống dòng được, và viền đi theo từng đoạn - không thì đoạn
       thứ hai nằm trần. */
    code {
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* Một dòng lệnh giấu sau thanh cuộn ngang trong khối mã thì coi như mất
       nửa sau: trên điện thoại cho nó xuống dòng để đọc hết. */
    pre { overflow-x: visible; }

    /* Thụt lề treo: đoạn xuống dòng lùi vào, để một lệnh dài không đọc thành
       hai lệnh riêng. */
    pre code {
        display: block;
        padding-left: 1.4em;
        text-indent: -1.4em;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* Cho ô bảng xuống dòng: một bảng cao hơn vẫn đọc được, một bảng phải kéo
       ngang thì cột cuối coi như không tồn tại. */
    thead th, tbody th, .cell { white-space: normal; }

    /* Lề trong của bảng bằng lề panel là bốn cột ăn mất 128px trên máy 360px.
       Chỉ hai mép ngoài giữ lề panel để thẳng hàng với thân bài; các khe giữa
       thu lại, phần thừa ra trả về cho chữ. */
    thead th, tbody th, tbody td { padding-left: 9px; padding-right: 9px; }

    tr > :first-child { padding-left: var(--pad-x); }
    tr > :last-child  { padding-right: var(--pad-x); }

    /* Tên bo, cấu hình và tình trạng bản dựng xếp dọc bên phải nút chọn. */
    .row {
        grid-template-columns: 14px 1fr;
        gap: 3px 12px;
    }

    .row-n, .row-m, .row-s { grid-column: 2; }

    .diagram { overflow-x: visible; }

    .diagram svg.d-wide { display: none; }

    .diagram svg.d-narrow { display: block; min-width: 0; }
}

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

    * { animation: none !important; }
}