/*
  Design system — UI_DESIGN §5. Mobile-first, khung 360px.

  Bảng màu CỐ Ý NHẠT: sản phẩm này không cần trông "xịn", nó cần trông THẬT và VÔ HẠI.
  Màu sặc sỡ trong bối cảnh người đọc đang nghi scam thì làm hại lòng tin.

  ⚠ KHÔNG CÓ MÀU ĐỎ trong toàn bộ B0 — kể cả nút hủy. Đỏ = lỗi/nguy hiểm, mà đây
  không phải lỗi của người dùng. Cảnh báo dùng hổ phách.
*/
:root {
    /* ⭐ #7 — KHÔNG PHẢI THỨ "DỌN CHO GỌN" ĐƯỢC.
       Chrome trên Android có auto dark theme: gặp trang không khai màu ưa dùng thì nó tự lật
       nền trắng thành đen rồi bóp lại xanh-lá/hổ phách. Bảng màu dưới đây cố ý nhạt để trông
       THẬT và VÔ HẠI trong bối cảnh người đọc đang nghi scam (§5.1) — lật nó đi là hỏng đúng
       thứ đang làm việc nặng nhất, và hỏng với đúng nhóm chiếm phần lớn traffic (người mở link
       từ app Facebook trên Android).
       B0 cố ý CHỈ có giao diện sáng: dựng thêm bảng màu tối là việc của P0, còn ở đây thà nói
       thẳng "trang này sáng" hơn là để trình duyệt đoán hộ. */
    color-scheme: light;

    --nen: #FFFFFF;
    --chu-chinh: #1A1A1A;
    --chu-phu: #6B7280;
    --vien: #E5E7EB;
    --khoi-nen: #F9FAFB;
    --nhan: #0F7B6C;      /* Chỉ dùng cho nút Vào + chấm chỗ đã đầy */
    --vo-hieu: #D1D5DB;
    --canh-bao: #B45309;  /* hổ phách, không phải đỏ */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    background: var(--nen);
    color: var(--chu-chinh);
    /* Font hệ thống, không webfont: nhanh hơn, và chữ trông quen như phần còn lại
       của điện thoại → đáng tin hơn (UI_DESIGN §5.2). */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;  /* không nhỏ hơn 16px — iOS tự zoom nếu nhỏ hơn */
    line-height: 1.5;
    /* Safari trên iOS tự phóng chữ khi xoay ngang máy ("text inflation"), mỗi khối một tỉ lệ
       khác nhau → khung 360px vỡ mà không ai đụng vào CSS. `100%` = giữ nguyên cỡ đã đặt. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

main { max-width: 34rem; margin: 0 auto; }

/* ── Tiêu đề: chủ thể của màn hình là CÁI KÈO ────────────────────────────── */
/* ⭐ #7 — `overflow-wrap` ở đây KHÔNG phải làm đẹp.
   `hoat_dong` (120 ký tự) và `dia_diem_text` (200 ký tự) là chữ TỰ DO người ta gõ ở `/tao`.
   Mặc định CSS chỉ ngắt dòng ở dấu cách, nên một chuỗi liền — link dán vào, tên quán viết
   không dấu cách, một dãy "aaaa…" — ở cỡ 24px sẽ tràn khỏi khung 360px và làm CẢ TRANG cuộn
   ngang, ngay trên màn xương sống. Lỗi này không nổ với 5 kèo seed đang có; nó chờ dữ liệu
   thật, cùng họ với cờ `thuacho` sống 6 ngày ở #4b.
   ⚠ Cách sai để "sửa" chuyện này là cắt chuỗi ở server — tên hoạt động chính là thứ người ta
   đọc để quyết bấm. Test 7.9 canh việc đó. */
.hoat-dong {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 8px 0 4px;
    border-bottom: 2px solid var(--chu-chinh);
    padding-bottom: 8px;
    overflow-wrap: anywhere;
}

.dong-thong-tin { margin: 8px 0; overflow-wrap: anywhere; }

/* ── Khối trạng thái chỗ ─────────────────────────────────────────────────── */
.khoi-cho {
    border: 1px solid var(--vien);
    background: var(--khoi-nen);
    border-radius: 10px;
    padding: 16px;
    margin: 24px 0;
}

.so-cho { font-size: 20px; font-weight: 700; margin: 0 0 8px; }

/* `overflow-wrap` ở đây là ĐAI AN TOÀN, không phải vá lỗi đang có: hàng chấm xuống dòng được
   sẵn vì Razor giữ khoảng trắng giữa các `<span>` chấm (đã kiểm bằng HTML thật 21/08). Nhưng
   nó mỏng — ai gộp vòng lặp `@for` về một dòng cho gọn là mất khoảng trắng, và 20 chấm (trần
   `ChoToiDaChoPhep`) thành một khối liền ~480px trong khối rộng ~294px. */
.cham { margin: 0 0 8px; font-size: 20px; letter-spacing: 4px; overflow-wrap: anywhere; }
.cham-day { color: var(--nhan); }
.cham-trong { color: var(--vo-hieu); }

.con-cho { margin: 0; }
.toi-thieu { margin: 4px 0 0; color: var(--chu-phu); font-size: 14px; }

.chu-keo { margin: 16px 0 24px; }

/* ── Nút chính: đủ to cho ngón cái, đủ rõ là hành động chính ─────────────── */
.nut-chinh {
    display: block;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: var(--nhan);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.nut-chinh:disabled,
.nut-vo-hieu {
    background: var(--vo-hieu);
    color: #fff;
    cursor: not-allowed;
}

/* ⭐ #7 — PHẢN HỒI KHI CHẠM. Trên điện thoại không có con trỏ, nên `:hover` không tồn tại: nếu
   nút không đổi gì lúc ngón tay đè xuống thì người ta kết luận "bấm không ăn" và bấm lần hai.
   Chỗ đó tốn thật: nút Chrome ở `/mo-trinh-duyet` bấm hai lần là bắn hai `intent://`, còn nút
   Tham gia thì lần bấm thứ hai rơi vào đúng lúc lần thứ nhất đang chạy giao dịch.
   `:not(:disabled)` để nút hết chỗ vẫn đứng im — nó phải trông như KHÔNG bấm được. */
.nut-chinh:not(:disabled):active {
    background: #0B5F53;
}

.nut-phu:active {
    color: var(--chu-chinh);
}

/* ⚠ `color` phải khai lại ở CẢ HAI dòng dưới, không thừa: nút "Đứng ra chủ trì" mang
   `class="nut-phu nut-vien"` và nút Gỡ mang `class="nut-phu nut-nguy-hiem"`, mà `.nut-phu:active`
   (0,2,0) thắng `.nut-vien` / `.nut-nguy-hiem` (0,1,0). Bỏ đi thì lúc đè ngón tay, nút M0 mất màu
   nhấn và nút Gỡ mất màu hổ phách — đúng hai chỗ màu đang mang thông tin. */
.nut-vien:active {
    background: var(--khoi-nen);
    color: var(--nhan);
}

.nut-nguy-hiem:active {
    color: #8A3F07;
}

/* Cả thẻ kèo là một vùng bấm (xem `.the-keo-link`), nên nó cũng cần nói được là đang bị đè. */
.the-keo-link:active {
    background: var(--khoi-nen);
}

/* Nút phụ = chữ gạch chân, KHÔNG phải nút — để không tranh nổi bật với hành động chính.
   Rút chỗ là hành động phụ, đừng mời gọi. */
.nut-phu {
    background: none;
    border: 0;
    padding: 0;
    color: var(--chu-phu);
    font-family: inherit;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
    /* vùng chạm ≥ 44px (UI_DESIGN §6) */
    min-height: 44px;
}

/* Nút viền: bậc giữa — rõ là hành động thật (có viền, có vùng chạm), nhưng không tranh
   nổi bật với nút chính. Dùng cho "Đứng ra chủ trì": phải mời gọi thật, nhưng không
   được đẩy người ta vào cửa đăng nhập trước khi họ kịp giữ chỗ (§4.8 — cho vào trước, để
   nhu cầu tích lại thành động lực nhận chủ trì). */
.nut-vien {
    display: block;
    width: 100%;
    height: 48px;
    border: 1px solid var(--nhan);
    border-radius: 10px;
    background: none;
    color: var(--nhan);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.form-rut { margin: 16px 0; }
.form-chu-tri { margin: 12px 0 0; }

/* ⭐ Vừa đăng nhập xong, quay lại để xác nhận chủ trì (?chutri=1). Làm nổi vì lúc này người ta
   vừa đi một vòng qua Google rồi bị thả về giữa một trang đầy chữ — không chỉ chỗ cần bấm thì
   cú bấm cuối cùng của cổng 1 sẽ rơi mất, và nó rơi ngay chỗ đo M0. */
.form-chu-tri-noi {
    border: 2px solid var(--nhan);
    border-radius: 10px;
    padding: 12px;
    background: var(--khoi-nen);
}

.xac-nhan-chu-tri { margin: 0 0 10px; font-weight: 600; }

/* Dòng cho chính chủ kèo. Dùng viền trái như khối cảnh báo nhưng màu nhấn, không phải hổ phách:
   đây là lời nhắc bổn phận, không phải điều bất thường. */
.ban-la-chu-keo {
    border-left: 3px solid var(--nhan);
    padding: 4px 0 4px 12px;
    margin: 0 0 20px;
    color: var(--chu-phu);
}

.khoi-mam { margin-bottom: 20px; }

/* Lời mời nhận chủ trì — đứng SAU câu cảnh báo, nên nói nhẹ hơn nó. */
.khoi-mam .loi-moi-chu-tri { margin-top: 6px; color: var(--chu-phu); }

.ghi-chu { color: var(--chu-phu); font-size: 14px; margin: 8px 0 0; }

/* Kết quả cú bấm vừa rồi. Dùng màu nhấn chứ KHÔNG dùng đỏ — kể cả câu "bạn không ở trong
   kèo này": đó không phải lỗi của người dùng (§5.4). */
.thong-bao {
    border: 1px solid var(--nhan);
    border-radius: 10px;
    background: var(--khoi-nen);
    padding: 12px;
    margin: 0 0 16px;
    font-weight: 600;
}

/* ── Trạng thái biên ─────────────────────────────────────────────────────── */
.canh-bao {
    border-left: 3px solid var(--canh-bao);
    padding: 4px 0 4px 12px;
    margin: 0 0 16px;
}

.canh-bao-chinh { color: var(--canh-bao); font-weight: 600; margin: 0 0 4px; }
.canh-bao p { margin: 0; }

.bang-tin {
    border: 1px solid var(--vien);
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 16px;
}

.bang-tin-chinh { font-weight: 600; margin: 0 0 8px; }
.bang-tin p:last-child { margin: 0; color: var(--chu-phu); }

.da-vao { margin: 0 0 16px; }
.da-vao-chinh { font-weight: 600; margin: 0 0 8px; }

.nhac-lai {
    border: 1px solid var(--vien);
    border-radius: 10px;
    padding: 12px;
    margin: 0;
}

/* ── ⭐ Ô biệt danh + danh sách người đang giữ chỗ (15/08) ───────────────── */
/* Khối cũ (.cung-di / .anh / .anh-chu — tên + ảnh Google) đã gỡ cùng ngày: sau Q10 không
   còn tên thật nào để hiện. Đây là bản dựng lại theo hình dạng ẩn danh — chỉ chữ. */

.nhan-biet-danh {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
}

.o-biet-danh {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin: 0 0 6px;
    border: 1px solid var(--vien);
    border-radius: 8px;
    /* 16px là ngưỡng: nhỏ hơn thì Safari iOS tự phóng to trang khi chạm vào ô nhập, và
       người dùng bị ném vào một bố cục vừa nhảy — ngay trước hành động chính. */
    font-size: 16px;
    font-family: inherit;
}

.o-biet-danh:focus {
    outline: 2px solid var(--nhan);
    outline-offset: 1px;
}

.ghi-chu-biet-danh { margin: 0 0 14px; }

.dang-di { margin: 24px 0; }
.nhan-dang-di { color: var(--chu-phu); font-size: 14px; margin: 0 0 8px; }

.danh-sach-ten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Dạng "viên" chứ không phải danh sách dọc: 6 cái tên ngắn xếp ngang đọc được trong một
   liếc, còn 6 dòng dọc thì chiếm hết màn hình điện thoại trước khi tới nút Rút. */
.danh-sach-ten li {
    background: var(--khoi-nen);
    border: 1px solid var(--vien);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 15px;
    /* Biệt danh do người lạ nhập — 40 ký tự không dấu cách vẫn phải không phá vỡ bố cục. */
    overflow-wrap: anywhere;
}

hr { border: 0; border-top: 1px solid var(--vien); margin: 24px 0 16px; }

/* ── 🔄 Trang danh sách /keo (Q9) ────────────────────────────────────────── */
/* Đích của bài đăng FB hằng tuần → với phần lớn người xem đây là màn hình ĐẦU TIÊN.
   Vẫn giữ đúng hệ của trang kèo: không màu mới, không bóng đổ, không thẻ nổi. */

.dan-nhap { color: var(--chu-phu); margin: 0 0 20px; }

.danh-sach-keo { list-style: none; margin: 0; padding: 0; }

.the-keo {
    border: 1px solid var(--vien);
    border-radius: 10px;
    margin-bottom: 12px;
}

/* Cả thẻ là một vùng bấm, không chỉ mỗi dòng tiêu đề: ngón tay cái trên điện thoại
   nhắm vào giữa thẻ chứ không nhắm vào chữ (UI_DESIGN §6 — vùng chạm ≥ 44px). */
.the-keo-link {
    display: block;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.the-keo-link:hover { background: var(--khoi-nen); }

/* Cùng lý do `overflow-wrap` như `.hoat-dong` — chữ tự do từ `/tao`. Ở đây còn tệ hơn một
   bậc: `/keo` là màn hình ĐẦU TIÊN của phần lớn người bấm từ bài FB, nên một cái thẻ vỡ bố
   cục làm hỏng ấn tượng đầu của cả danh sách chứ không chỉ của một kèo. */
.the-keo-hoat-dong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.the-keo-dong { display: block; color: var(--chu-phu); font-size: 15px; overflow-wrap: anywhere; }

.the-keo-cho {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.the-keo-cho .cham { margin: 0; font-size: 16px; letter-spacing: 3px; }

.the-keo-so-cho { font-weight: 600; }

/* Kèo mầm: viền trái hổ phách + nhãn chữ. Màu KHÔNG đứng một mình — người mù màu và
   ảnh chụp màn hình đen trắng đều phải đọc được (UI_DESIGN §6 a11y). */
.the-keo-mam { border-left: 3px solid var(--canh-bao); }

.nhan-mam {
    display: block;
    margin-top: 8px;
    color: var(--canh-bao);
    font-size: 14px;
    font-weight: 600;
}

/* ── Trang không tìm thấy ────────────────────────────────────────────────── */
.khong-tim-thay { margin-top: 32px; }
.khong-tim-thay p { color: var(--chu-phu); }

/* ── ⭐ #5t Trang dựng kèo /tao ───────────────────────────────────────────── */
/* Form 5 ô trên màn 360px. Ô nhập cao 44px + font 16px: dưới 16px là iOS tự zoom vào ô, làm
   người ta mất ngữ cảnh giữa lúc điền — ở bước đo M4 thì đó là chỗ bỏ dở. */

.dong-tao-keo { margin-top: 16px; }
.dong-tao-keo a { color: var(--nhan); }

.form-tao { margin-top: 8px; }

.nhan-o {
    display: block;
    font-weight: 600;
    margin: 20px 0 6px;
}

.o-nhap {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--vien);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    color: var(--chu-chinh);
    background: var(--nen);
}

.o-nhap:focus { outline: 2px solid var(--nhan); outline-offset: 1px; }

/* Ô số hẹp lại — một ô rộng cả màn cho con số "6" đọc như lỗi bố cục. */
.o-so { max-width: 8rem; }

.khoi-che-do {
    margin: 24px 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--vien);
    border-radius: 10px;
    background: var(--khoi-nen);
}

/* Cả dòng là vùng bấm, không chỉ cái ô radio 16px (UI_DESIGN §6 — vùng chạm ≥ 44px). */
.dong-che-do {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

/* ── Màn kết quả: link + mẫu bài đăng ───────────────────────────────────── */

.khoi-link {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0;
}

/* Link là thứ duy nhất trên màn này người ta cần → cho nó nổi hơn ô nhập thường. */
.o-link {
    flex: 1 1 14rem;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--nhan);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    background: var(--nen);
    color: var(--chu-chinh);
}

.nhac-han-chot {
    border-left: 3px solid var(--canh-bao);
    padding: 4px 0 4px 12px;
    margin: 12px 0 20px;
}

/* Mẫu bài đăng: chữ đẳng-rộng để người ta thấy đúng cái sẽ dán sang Facebook, xuống dòng ở đâu. */
.o-mau-bai {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--vien);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--chu-chinh);
    background: var(--khoi-nen);
    resize: vertical;
}

/* ── ⭐ #5 Trang quản lý /k/{slug}/quanly ────────────────────────────────── */
/* Màn duy nhất chỉ chủ kèo thấy. Vẫn đúng hệ của mấy trang kia — KHÔNG có màu đỏ, kể cả
   trên nút Hủy kèo: nút đó không phải một lỗi, nó là một lựa chọn hợp lệ và đôi khi đúng.
   Đỏ ở đây sẽ làm chủ kèo ngại bấm rồi chọn đường tệ hơn: im lặng không tới. */

.link-quan-ly { margin-left: 8px; color: var(--nhan); }

.dong-quay-lai { margin: 0 0 8px; font-size: 15px; }
.dong-quay-lai a { color: var(--chu-phu); }

.nhan-nhom {
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--vien);
}

/* Nhắc "app không tự báo cho ai" — đứng ngay trên mấy cái nút, viền trái hổ phách như
   khối cảnh báo vì đúng là một điều dễ tưởng nhầm (Q11). */
.nhac-bao-tay {
    border-left: 3px solid var(--canh-bao);
    padding: 4px 0 4px 12px;
    margin: 16px 0;
}

/* Cảnh báo nhẹ — hổ phách như mọi cảnh báo khác, nhưng không thành khối riêng: nó là một lưu ý
   khi đọc danh sách bên dưới, không phải một sự cố. */
.canh-bao-nhe { color: var(--canh-bao); margin: 8px 0 12px; font-size: 15px; }

.danh-sach-luot { list-style: none; margin: 0; padding: 0; }

/* Mỗi lượt là một hàng: tên · giờ vào · nút. Xuống dòng được — biệt danh 40 ký tự không
   dấu cách trên màn 360px vẫn phải không đẩy nút ra khỏi màn hình. */
.luot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--vien);
}

.luot-ten { font-weight: 600; overflow-wrap: anywhere; }

/* Giờ vào là thông tin DUY NHẤT chủ kèo có để nhận ra ai là ai (sau Q10 mọi người ẩn danh
   và biệt danh thì không duy nhất) — nên vẫn hiện, chỉ là nói nhỏ. */
.luot-gio { color: var(--chu-phu); font-size: 14px; margin-right: auto; }

.luot-la-ban { color: var(--chu-phu); font-weight: 400; }

/* Nút phá hủy: vẫn là "nút phụ" (chữ gạch chân, không tranh nổi bật), chỉ đổi sang hổ phách.
   Bậc nặng nằm ở BƯỚC XÁC NHẬN, không nằm ở màu — một cái nút đỏ to không ngăn được ai
   bấm nhầm, còn câu hỏi "gỡ X khỏi kèo?" thì có. */
.nut-nguy-hiem { color: var(--canh-bao); }

/* Khối "đã gỡ" tồn tại để LÙI LẠI ĐƯỢC — làm nhạt đi để nó không đọc như một danh sách đen. */
.danh-sach-da-go .luot-ten { font-weight: 400; color: var(--chu-phu); }

.khoi-ket-thuc {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── ⭐ #6 Thoát webview Facebook (UI_DESIGN §4.3) ─────────────────────────
   Màn này bù cho hạn chế của Facebook, và là chỗ mất người lớn nhất có thể đoán trước.
   Người đọc nó đang bực: vừa bấm một cái nút và không có gì xảy ra như mong đợi. Nên hai
   bước tay phải TO và dễ đọc — đây là ngoại lệ duy nhất của luật "không chú thích". */
.cac-buoc {
    margin: 12px 0 20px;
    padding-left: 24px;
    line-height: 1.7;
    /* To hơn chữ thường một nấc, cố ý. Người đọc màn này đang bực — vừa bấm một cái nút và
       không có gì xảy ra như họ mong — và họ phải vừa đọc vừa dò tìm cái nút ⋯ của Facebook
       trên chính màn hình đó. Đây là chỗ duy nhất trong B0 mà chú thích LÀ nội dung chính. */
    font-size: 17px;
}

.cac-buoc li { margin-bottom: 10px; }

/* Nhắc người ta đang dở việc gì. Đứng ngay dưới tên hoạt động, cỡ chữ phụ: nó là câu nối
   giữa "cái kèo bạn vừa bấm" và "vì sao màn này hiện ra", không phải một mẩu tin riêng. */
.dang-do { color: var(--chu-phu); margin: 0 0 4px; }

/* Nút Chrome là thẻ <a> (không phải <button>) vì `intent://` là điều hướng, không phải JS —
   trong webview Facebook thì JS là thứ ít đáng tin nhất còn lại. Nên phải tự dựng lại dáng nút. */
a.nut-chinh {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* ══ 🤖 🔒 Ngân hàng mẫu `/quanly/ngan-hang` (MS-b) ═══════════════════════════
   Màn DUY NHẤT của B0 chỉ founder đọc. Mọi thứ khác trong file này được cân cho người lạ mở
   link từ Facebook trên điện thoại; ở đây người đọc là một người, đã biết mình đang làm gì, và
   nhiều khả năng đang ngồi trước máy tính. Nên chỗ này được phép có một cái BẢNG — thứ bị tránh
   ở mọi màn khác vì bảng trên màn 360px đọc rất tệ. */

/* Bảng vẫn phải cuộn được ngang: founder cũng mở màn này từ điện thoại (đó chính là kịch bản
   test 9.32). Cuộn NỘI BỘ, không để body tràn ngang — bài học #7. */
.bang-cuon {
    overflow-x: auto;
    margin: 0 0 16px;
}

.bang-mau {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.bang-mau th,
.bang-mau td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--vien);
    vertical-align: top;
    white-space: nowrap;
}

.bang-mau th {
    color: var(--chu-phu);
    font-weight: 600;
}

/* Mẫu đã tắt: mờ đi nhưng KHÔNG ẩn. Nó là tư liệu founder soạn tay, và cái nút "Bật" lại phải
   ở ngay đó — ẩn nó đi là dựng thêm một màn "mẫu đã tắt" cho một người dùng duy nhất. */
.bang-mau .mau-tat td { color: var(--chu-phu); opacity: 0.6; }

.bang-mau form { margin: 0; }

/* Ô dán JSON. `monospace` vì thứ vào đây là mã, và một dấu ngoặc lệch phải nhìn ra được. */
.o-json {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px;
    border: 1px solid var(--vien);
    border-radius: 8px;
    margin: 0 0 12px;
    /* Không bọc dòng: JSON dán vào thường đã xuống dòng sẵn, và bọc mềm làm số thứ tự mẫu
       (thứ mọi câu lỗi ở đây trỏ tới) khó đếm bằng mắt. */
    white-space: pre;
    overflow-x: auto;
}

/* Nhãn chỉ dành cho trình đọc màn hình — cột nút bật/tắt không cần tiêu đề nhìn thấy được. */
.an-di {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}