/* ==========================================================================
   tikz-man.css — MỤC TikZ  (07/09/2026 · chặng 2)
   Ba cột: chọn ảnh · ảnh gốc + phiếu · hình mới.
   Mượn nguyên thanh đỏ và các lớp `bank-*` của Kho xây dựng, ở đây chỉ khai
   những thứ riêng của mục này.
   ========================================================================== */

.tikz-3cot {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
    gap: 14px;
    padding: 14px;
    align-items: start;
    height: calc(100vh - 58px);
    box-sizing: border-box;
}

.tikz-cot {
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tikz-cot-tieu {
    font-weight: 800; color: #bb2649; font-size: 13.5px;
    padding: 12px 14px 6px; letter-spacing: .2px;
}

/* ══════════════════════════════════════════════════════════════════════
   CỘT 1 — HAI KHUNG RỜI: khung CHỌN NỘI DUNG và khung ẢNH   (09/09/2026)
   ══════════════════════════════════════════════════════════════════════
   ⚠ Cột 1 tự nó KHÔNG còn là một tấm trắng nữa — nó là khung rỗng chứa hai
     hộp. Nên `overflow` của cột phải là `visible`, nếu không menu dropdown
     đổ xuống sẽ bị chính cột cắt cụt. */
.tikz-cot1 { background: transparent; border: 0; overflow: visible; gap: 10px; }

.tikz-hop { background: #fff; border: 1px solid #e6eaef; border-radius: 14px; }
.tikz-hop-chon { padding: 10px 10px 8px; flex: 0 0 auto; position: relative; z-index: 5; }

/* Hộp ảnh: phần cuộn duy nhất của cột 1. `min-height:0` là bắt buộc trong
   flex column — thiếu nó thì hộp phình theo nội dung và cả cột cuộn theo. */
.tikz-cot1 .tikz-ds {
    background: #fff; border: 1px solid #e6eaef; border-radius: 14px;
    flex: 1 1 auto; min-height: 0; overflow: auto;
}

/* Năm nút NHỎ trên MỘT hàng: K10 K11 K12 | LT BT */
.tikz-hang-chon { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.tikz-vach { width: 1px; height: 18px; background: #e2e8f0; margin: 0 2px; flex: 0 0 auto; }
.tikz-nut-nho {
    flex: 1 1 0; min-width: 0; height: 28px; padding: 0 6px;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.tikz-nut-nho:hover { border-color: #bb2649; color: #bb2649; }
.tikz-nut-nho.active { background: #bb2649; border-color: #bb2649; color: #fff; }

/* ── DROPDOWN cây ──
   ⚠ Menu là lớp NỔI (absolute), không phải khối chiếm chỗ. Để nó chiếm chỗ
     thì mỗi lần mở cây, hộp ảnh bên dưới bị đẩy xuống và cả cột giật một cái. */
.tikz-drop { position: relative; }
.tikz-drop-nut {
    width: 100%; display: flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
    font-family: inherit; cursor: pointer; text-align: left;
}
.tikz-drop-nut:hover { border-color: #bb2649; }
.tikz-drop.mo .tikz-drop-nut { border-color: #bb2649; box-shadow: 0 0 0 2px rgba(187, 38, 73, .12); }
.tikz-drop-chu {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: #94a3b8;
}
.tikz-drop-chu.co { color: #bb2649; font-weight: 800; }
.tikz-drop-mui { font-size: 20px; color: #94a3b8; flex: 0 0 auto; transition: transform .18s; }
.tikz-drop.mo .tikz-drop-mui { transform: rotate(180deg); }

.tikz-drop-menu {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    padding: 8px; box-sizing: border-box;
}

.tikz-tim { display: flex; align-items: center; gap: 6px;
    border: 1px solid #e2e8f0; border-radius: 9px; padding: 0 10px; height: 32px; }
.tikz-tim .material-icons-round { font-size: 18px; color: #94a3b8; }
.tikz-tim input { border: 0; outline: none; flex: 1; font-family: inherit; font-size: 13px; min-width: 0; }

/* ── cây nằm TRONG dropdown ── */
/* ⚠ Cây mượn class `bank-tree` của kho, mà luật đó CHỐT CỨNG `width: 340px`
   kèm viền phải và nền riêng — dựng thật trong Chromium 09/09 thấy ngay: các
   thanh chương chỉ rộng 340px trong khi menu rộng 650px, hở một mảng trắng
   bên phải. Gỡ ba thứ đó ra, chỉ giữ phần dáng cây. */
.tikz-cay {
    max-height: 46vh; overflow: auto; padding: 8px 2px 2px;
    width: auto; border-right: 0; background: transparent;
}

/* ⚠ DẤU + / − THAY MŨI TÊN, và vẽ bằng KÝ TỰ THƯỜNG chứ không phải ligature
   của material-icons. Ligature phụ thuộc font tải xong; font chưa về thì Thầy
   nhìn thấy nguyên chữ "add" nằm trong cây. Ký tự + / − thì không bao giờ hỏng.
   Bó trong `.tikz-cay` — luật trần là đổi dáng cây ở MỌI mục khác, im lặng
   (đúng bẫy ② của chặng 5). */
.tikz-cay .chev {
    font-size: 0 !important; transform: none !important;
    width: 15px; height: 15px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid currentColor; border-radius: 4px; opacity: .75;
}
.tikz-cay .chev::before {
    content: '+'; font-family: inherit; font-size: 13px; font-weight: 900; line-height: 1;
}
.tikz-cay .bank-chapter.open > .bank-chapter-head .chev::before,
.tikz-cay .bank-lesson.open > .bank-lesson-head .chev::before { content: '\2212'; }

.tikz-dem {
    margin-left: auto; flex-shrink: 0;
    font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 20px;
}
.tikz-dem-0 { background: #f1f5f9; color: #94a3b8; }
.tikz-dem-con { background: #fdecef; color: #bb2649; }      /* còn ảnh chưa vẽ */
.tikz-dem-xong { background: #dcfce7; color: #15803d; }     /* hết việc */

/* ── cột 1: danh sách ảnh ── */
.tikz-ds { flex: 1; overflow: auto; padding: 10px 12px 16px; }

.tikz-ds-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tikz-ds-ten { font-weight: 800; color: #1e293b; font-size: 13.5px; }
.tikz-ds-so { font-size: 12px; color: #64748b; font-weight: 600; }
.tikz-loc { margin-left: auto; font-size: 12px; color: #475569; font-weight: 600;
    display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.tikz-loc-cay { margin: 8px 0 0; font-size: 12px; }
.tikz-an-ghi { padding: 8px 10px; margin-top: 4px; font-size: 11.5px; color: #94a3b8;
    font-weight: 600; line-height: 1.45;
    /* Nền trắng riêng: không có thì dòng ghi chú nằm lọt trong mảng nền hồng
       của chương đang xổ, nhìn như thuộc về chương đó (thấy lúc chụp 07/09). */
    background: #fff; border-top: 1px solid #f1f5f9; }

.tikz-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.tikz-the {
    border: 1px solid #e6eaef; border-radius: 11px; overflow: hidden;
    cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s;
}
.tikz-the:hover { border-color: #bb2649; }
.tikz-the.active { border-color: #bb2649; box-shadow: 0 0 0 2px rgba(187, 38, 73, .16); }

.tikz-the-anh { position: relative; height: 96px; background: #f8fafc;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tikz-the-anh img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tikz-the-hong { display: none; font-size: 11.5px; color: #b91c1c; font-weight: 700; padding: 6px; text-align: center; }
.tikz-the-anh.hong img { display: none; }
.tikz-the-anh.hong .tikz-the-hong { display: block; }

.tikz-the-chu { padding: 7px 8px 9px; }
.tikz-the-hang { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 3px; }
.tikz-ma { font-size: 11.5px; font-weight: 800; color: #bb2649; }
.tikz-o { font-size: 11px; font-weight: 700; color: #475569;
    background: #f1f5f9; border-radius: 20px; padding: 1px 7px; }
.tikz-de { font-size: 11.5px; color: #64748b; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tikz-hh { font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 1px 7px; }
.tikz-hh-de { background: #dcfce7; color: #15803d; }
.tikz-hh-ve { background: #fef3c7; color: #a16207; }
.tikz-moc, .tikz-chum { font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 1px 7px;
    background: #e0f2fe; color: #0369a1; }
.tikz-chum { background: #ede9fe; color: #6d28d9; }

/* ── cột 2 ── */
.tikz-goc { padding: 0 14px; text-align: center; }
/* ⚠ ẢNH GỐC CÓ TRẦN CHIỀU CAO. Ảnh kho cao 600–900 px; để nguyên thì cả
   phiếu đánh giá bị đẩy xuống dưới tầm mắt và mỗi tấm ảnh phải cuộn hai lần.
   Soát kỹ đã có chỗ khác: bấm vào ảnh, hoặc phím Z bày hai hình to hết màn. */
.tikz-goc img { max-width: 100%; max-height: 200px; object-fit: contain;
    border: 1px solid #e6eaef; border-radius: 10px; background: #fff; }

.tikz-bang { width: calc(100% - 28px); margin: 12px 14px; border-collapse: collapse; font-size: 12.5px; }
.tikz-bang td { border-bottom: 1px solid #f1f5f9; padding: 5px 6px; vertical-align: top; }
.tikz-bang td:first-child { color: #94a3b8; width: 88px; font-weight: 700; }
.tikz-bang code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: 11.5px; }
.tikz-duong { word-break: break-all; color: #64748b; }

/* ── chỗ trống có ghi rõ chặng nào lấp ── */
.tikz-sapco {
    margin: 12px 14px; padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 10px;
    background: #f8fafc; color: #64748b; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.tikz-sapco .material-icons-round { font-size: 20px; color: #94a3b8; flex: 0 0 auto; }
/* Chữ phải là MỘT phần tử flex, không thả rời: thả rời thì mỗi cụm chữ thành
   một cột riêng và câu bị bẻ làm hai khối cạnh nhau (thấy lúc chụp màn 07/09). */
.tikz-sapco > span:not(.material-icons-round) { flex: 1 1 auto; line-height: 1.45; }
.tikz-sapco-lon { margin-top: 20px; }

.tikz-trong { padding: 22px 14px; text-align: center; color: #94a3b8; font-size: 13px; font-weight: 600; }
.tikz-trong-nho { padding: 8px 14px; color: #cbd5e1; font-size: 12px; }
.tikz-trong-lon { padding: 48px 18px; }
.tikz-trong-lon .material-icons-round { font-size: 40px; color: #e2e8f0; display: block; margin-bottom: 8px; }

.tikz-cho { padding: 26px; text-align: center; }

/* Ô "Tạo mới" chưa làm — mờ hẳn và không bấm được, không phải nút giả. */
.kxd-the.tikz-the-tat { opacity: .45; cursor: not-allowed; }
.kxd-the.tikz-the-tat:hover { transform: none; box-shadow: none; }

@media (max-width: 1100px) {
    .tikz-3cot { grid-template-columns: 1fr; height: auto; }
    .tikz-cot { height: auto; max-height: none; }
    .tikz-cay { max-height: 320px; }
}

/* ==========================================================================
   CHẶNG 3 — PHIẾU ĐÁNH GIÁ Ở CỘT 2                            (08/09/2026)
   ========================================================================== */

/* ── thanh ba nút trên cùng cột 2 ── */
.tikz-thanh-nut {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px 10px; flex-wrap: wrap;
}

.tikz-nut {
    display: inline-flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, opacity .12s;
}
.tikz-nut .material-icons-round { font-size: 17px; }
.tikz-nut:hover:not(:disabled) { border-color: #bb2649; color: #bb2649; }
.tikz-nut-chinh { background: #bb2649; border-color: #bb2649; color: #fff; }
.tikz-nut-chinh:hover:not(:disabled) { background: #a01e3b; border-color: #a01e3b; color: #fff; }
.tikz-nut-daduyet { background: #15803d; border-color: #15803d; color: #fff; }
.tikz-nut-daduyet:hover:not(:disabled) { background: #126b34; border-color: #126b34; color: #fff; }

/* ⚠ Nút mờ phải NHÌN RA LÀ MỜ và không đổi màu khi rê chuột. Nút mờ mà vẫn
   sáng lên lúc hover thì Thầy bấm mãi, tưởng máy treo. */
.tikz-nut:disabled { opacity: .42; cursor: not-allowed; }

.tikz-nut-icon {
    width: 34px; height: 34px; flex: 0 0 auto; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
    border-radius: 9px; cursor: pointer;
}
.tikz-nut-icon:hover { border-color: #bb2649; color: #bb2649; }
.tikz-nut-icon .material-icons-round { font-size: 18px; }

@keyframes tikz-quay { to { transform: rotate(360deg); } }
.tikz-quay { animation: tikz-quay 1s linear infinite; }

/* ── ảnh gốc phóng to ── */
#tikz-anh-goc { cursor: zoom-in; }
.tikz-lop-anh {
    position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, .82);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    cursor: zoom-out;
}
.tikz-lop-anh img { max-width: 96vw; max-height: 92vh; background: #fff;
    border-radius: 10px; padding: 8px; }

/* ── phiếu ── */
.tikz-phieu { padding: 4px 14px 20px; }
.tikz-phieu-dau { display: flex; align-items: center; gap: 6px; }
.tikz-phieu-dau .tikz-cot-tieu { padding: 8px 0 4px; }
.tikz-hh-ai { background: #e0f2fe; color: #0369a1; }
.tikz-hh-tay { background: #fef3c7; color: #a16207; }

.tikz-mach { font-size: 11.5px; color: #94a3b8; font-weight: 600;
    line-height: 1.5; margin: 0 0 10px; }

.tikz-o-hang { display: block; margin-bottom: 9px; }
.tikz-nhan-o { display: block; font-size: 11px; font-weight: 800; color: #94a3b8;
    margin-bottom: 3px; letter-spacing: .2px; }
.tikz-o {
    width: 100%; box-sizing: border-box; height: 32px; padding: 0 9px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    font-family: inherit; font-size: 12.5px; color: #1e293b; outline: none;
}
.tikz-o:focus { border-color: #bb2649; box-shadow: 0 0 0 2px rgba(187, 38, 73, .12); }
.tikz-o-doc { height: auto; padding: 7px 9px; line-height: 1.5; resize: vertical; }
.tikz-o-hep { max-width: 96px; flex: 0 0 96px; }

.tikz-hang-2, .tikz-hang-3 { display: grid; gap: 8px; }
.tikz-hang-2 { grid-template-columns: 1fr 1fr; }
.tikz-hang-3 { grid-template-columns: 1fr 1fr 1fr; }

.tikz-nhom {
    border: 1px solid #eef1f5; border-radius: 11px; padding: 10px 11px 6px;
    margin: 0 0 11px; min-width: 0;
}
.tikz-nhom > legend { font-size: 11.5px; font-weight: 800; color: #bb2649; padding: 0 6px; }

/* ⚠ Ô "chỗ chưa chắc" phải NỔI HẲN khỏi phiếu. Đây là ô đáng giá nhất: nó
   hướng mắt Thầy vào đúng chỗ cần soát, thay vì bắt soát đều cả phiếu — mà
   soát đều thì vài chục hình là bấm Duyệt cho xong. Cùng màu hổ phách với
   huy hiệu cảnh báo của kho. */
.tikz-nhom-chac { border-color: #fcd34d; background: #fffbeb; }
.tikz-nhom-chac > legend { color: #a16207; }
.tikz-nhom-chac .tikz-mach { color: #a16207; }
.tikz-nhom-chac .tikz-o { border-color: #fde68a; }

.tikz-duong-hang, .tikz-nhan-hang {
    position: relative; border: 1px solid #f1f5f9; border-radius: 9px;
    padding: 9px 34px 2px 9px; margin-bottom: 8px; background: #fafbfc;
}
.tikz-nhan-hang { display: flex; gap: 7px; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }

.tikz-nut-xoa {
    position: absolute; top: 7px; right: 7px; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: #cbd5e1; cursor: pointer; border-radius: 6px;
}
.tikz-nut-xoa:hover { background: #fee2e2; color: #b91c1c; }
.tikz-nut-xoa .material-icons-round { font-size: 16px; }

.tikz-nut-them {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px dashed #cbd5e1; background: #fff; color: #64748b;
    border-radius: 8px; height: 29px; padding: 0 10px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 700; margin-bottom: 9px;
}
.tikz-nut-them:hover { border-color: #bb2649; color: #bb2649; }
.tikz-nut-them .material-icons-round { font-size: 15px; }

.tikz-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-bottom: 6px; }
.tikz-tick { display: flex; align-items: center; gap: 5px; font-size: 11.5px;
    color: #475569; font-weight: 600; cursor: pointer; }

.tikz-duyet-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 1100px) {
    .tikz-hang-3 { grid-template-columns: 1fr 1fr; }
    .tikz-ticks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CHẶNG 4 — Ô MÃ TikZ (cuối cột 2) VÀ CỘT 3            (08/09/2026)
   ========================================================================== */

.tikz-oma { padding: 0 14px 20px; }

.tikz-o-ma {
    height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical;
    font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;
    white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

/* ⚠ Ba mức báo, ba màu khác nhau. Gộp làm một là lỗi CHẮC CHẮN HỎNG
   (chữ Việt trong mã, gói lạ) nhìn y hệt lời nhắc mềm — Thầy bấm Tạo hình
   rồi mới biết, mà lúc đó phải đọc 40 dòng log TeX. */
.tikz-canh { font-size: 11.5px; font-weight: 700; line-height: 1.5;
    margin: 0 0 7px; padding: 6px 9px; border-radius: 8px;
    background: #f1f5f9; color: #64748b; }
.tikz-canh-loi { background: #fee2e2; color: #b91c1c; }
.tikz-canh-cu { background: #fef3c7; color: #a16207; }
.tikz-hh-cu { background: #fef3c7; color: #a16207; }

.tikz-do { color: #b91c1c; }
.tikz-mach-nho { font-size: 11px; color: #94a3b8; font-weight: 600; }

.tikz-bangtra { margin-top: 10px; }
.tikz-bangtra-hang { display: flex; gap: 8px; align-items: baseline;
    font-size: 11.5px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.tikz-bangtra-hang code { background: #f1f5f9; border-radius: 5px;
    padding: 1px 5px; font-size: 11px; color: #bb2649; flex: 0 0 auto; }
.tikz-bangtra-hang span { color: #475569; }

.tikz-lichsu { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tikz-lichsu .tikz-nhan-o { width: 100%; margin-bottom: 2px; }
.tikz-nut-lui {
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
    border-radius: 8px; height: 27px; padding: 0 10px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.tikz-nut-lui:hover { border-color: #bb2649; color: #bb2649; }

/* ── cột 3 ── */

/* ⚠ THANH TIẾN TRÌNH LÀ BẮT BUỘC, KHÔNG PHẢI TRANG TRÍ. Lượt đầu mỗi phiên
   tải ~5 MB tài nguyên TeX. Không có thanh thì Thầy tưởng treo máy rồi bấm
   lại — mà bấm lại lúc engine đang nạp là chỗ dễ sinh lỗi lạ. */
.tikz-tien { margin: 0 14px 12px; }
.tikz-tien-chu { font-size: 12px; font-weight: 700; color: #bb2649; margin-bottom: 5px; }
.tikz-tien-ray { height: 7px; background: #f1f5f9; border-radius: 20px; overflow: hidden; }
.tikz-tien-ray i { display: block; height: 100%; background: #bb2649;
    border-radius: 20px; transition: width .25s ease; }

.tikz-hinh {
    margin: 0 14px 10px; padding: 10px; background: #fff;
    border: 1px solid #e6eaef; border-radius: 10px;
    text-align: center; overflow: auto;
}
.tikz-hinh svg { max-width: 100%; height: auto; }
.tikz-hinh img { max-width: 100%; height: auto; cursor: zoom-in; }
.tikz-hinh img { max-width: 100%; height: auto; cursor: zoom-in; }

.tikz-nhom-loi { border-color: #fecaca; background: #fef2f2; margin: 0 14px 12px; }
.tikz-nhom-loi > legend { color: #b91c1c; }
.tikz-log {
    margin: 0 0 9px; padding: 8px 10px; max-height: 220px; overflow: auto;
    background: #fff; border: 1px solid #fecaca; border-radius: 8px;
    font-family: 'Consolas', 'Courier New', monospace; font-size: 11px;
    line-height: 1.45; color: #7f1d1d; white-space: pre-wrap; word-break: break-word;
}

.tikz-chat { margin: 12px 14px 0; padding-top: 12px; border-top: 1px solid #f0f2f5; }
.tikz-chat .tikz-nut { margin-top: 7px; }

/* ═══════════════════════════════════════════════════════════════════════
   CHẶNG 5 — VÙNG DUYỆT · NÚT ĐÈ · PHÍM TẮT
   ═══════════════════════════════════════════════════════════════════════
   ⚠ CHỐT THỨ HAI CỦA RỦI RO ①: hai hình phải CẠNH NHAU và CÙNG CỠ.
   Đè là xoá hẳn ảnh cũ khỏi câu, không có đường lùi. Hai khung dưới đây
   rộng bằng nhau (1fr 1fr) và CAO BẰNG NHAU (khung cố định, ảnh
   `object-fit: contain`) đúng để mắt so được — không phải cho đẹp.
   Để ảnh tự co theo cỡ thật thì một bên to một bên nhỏ, và cái sai lệch
   vài phần trăm — đúng thứ cần bắt — sẽ chìm mất. */

/* ⚠ 09/09: cột 3 chỉ còn HÌNH MỚI. Ảnh đang có trong câu nằm ở cột giữa,
   ngay bên trái, cùng tầm mắt — bày lại ở đây là bày hai lần một tấm. Chỗ
   soát kỹ vẫn là phím Z (`.tikz-ss` bên dưới), nơi hai hình vẫn CẠNH NHAU và
   CÙNG CỠ. Đừng gỡ nút Z: gỡ là mất chốt ② của đường đè. */
.tikz-duyet { margin: 0 14px 10px; }
.tikz-duyet-o { margin: 0; min-width: 0; }
.tikz-duyet-khung.tikz-duyet-mot { height: 300px; }
.tikz-duyet-o figcaption {
    font-size: 11px; font-weight: 800; color: #94a3b8;
    margin-bottom: 4px; letter-spacing: .2px;
}
.tikz-duyet-khung {
    height: 210px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e6eaef; border-radius: 10px;
    padding: 8px; box-sizing: border-box; overflow: hidden;
}
.tikz-duyet-khung img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.tikz-duyet > .tikz-nut { margin-top: 8px; }

/* Lớp phóng to SO SÁNH — vẫn hai hình cạnh nhau, chỉ to hơn. Phóng to mà
   chỉ còn một hình thì mất luôn cái để so. */
.tikz-lop-ss { cursor: zoom-out; }
.tikz-ss { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    width: 96vw; max-width: 1500px; }
.tikz-ss figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.tikz-ss figcaption { color: #e2e8f0; font-size: 12.5px; font-weight: 700;
    margin-bottom: 6px; text-align: center; }
.tikz-ss img { width: 100%; max-height: 84vh; object-fit: contain;
    background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }

/* ⚠ NÚT ĐÈ PHẢI TRÔNG KHÁC MỌI NÚT KHÁC. Nó là nút duy nhất trong cả mục
   không có đường lùi. Nút đỏ đậm, và dòng chữ dưới nói thẳng hậu quả. */
.tikz-de-boc { margin: 0 14px 12px; padding: 10px 12px;
    border: 1px solid #fecaca; border-radius: 10px; background: #fff5f5; }
.tikz-nut-de { background: #b91c1c; border-color: #b91c1c; color: #fff; width: 100%; }
.tikz-nut-de:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.tikz-nut-de:disabled { opacity: .55; cursor: default; }
.tikz-mach-de { margin: 8px 0 0; color: #7f1d1d; }
.tikz-mach-de b { color: #b91c1c; }

.tikz-phim {
    margin: 12px 14px 18px; padding: 8px 10px; border-top: 1px solid #f0f2f5;
    font-size: 11.5px; font-weight: 600; color: #94a3b8; line-height: 1.9;
}
/* ⚠ ĐỪNG ĐẶT LUẬT CHO THẺ `kbd` TRẦN. File CSS này nạp trên index.html —
   trang chung của cả hệ thống — nên một luật trần là đổi dáng mọi thẻ `kbd`
   ở mọi mục khác, im lặng. Bó vào đúng mục này. */
.tikz-cot kbd, .tikz-phim kbd, .tikz-nut kbd {
    display: inline-block; min-width: 15px; text-align: center;
    padding: 0 5px; margin: 0 1px; border: 1px solid #cbd5e1;
    border-bottom-width: 2px; border-radius: 5px; background: #f8fafc;
    font-family: inherit; font-size: 10.5px; font-weight: 800; color: #64748b;
}
.tikz-nut-de kbd { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; }

/* Dọn tệp mồ côi — việc dọn dẹp của cả mục, không phải của từng tấm ảnh. */
.tikz-hub-don { margin: 22px auto 0; max-width: 560px; text-align: center; }
.tikz-hub-don .tikz-mach { display: block; margin-top: 7px; }

/* ══════════════════════════════════════════════════════════════════════
   GIAO DIỆN GỌN — NHÓM XẾP LẠI TRONG PHIẾU          (09/09/2026)
   ══════════════════════════════════════════════════════════════════════
   ⚠ ĐÓNG NHÓM LÀ ẨN BẰNG `hidden`, KHÔNG PHẢI BỎ KHỎI DOM. `docPhieuTuDom()`
     đọc ngược cả phiếu từ DOM mỗi lần gõ một chữ; nhóm không còn trong DOM là
     nhóm đó bị ghi xuống máy chủ thành RỖNG. Luật CSS dưới đây chỉ giấu đi. */

.tikz-xep {
    border: 1px solid #eef1f5; border-radius: 11px; margin: 0 0 8px; overflow: hidden;
}
.tikz-xep-dau {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; background: #fff; border: 0; cursor: pointer;
    font-family: inherit; text-align: left;
}
.tikz-xep-dau:hover { background: #fafbfc; }

/* Dấu + / − vẽ bằng ký tự thường — không phụ thuộc font icon tải xong hay chưa. */
.tikz-xep-cong {
    width: 15px; height: 15px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #cbd5e1; border-radius: 4px; color: #94a3b8;
}
.tikz-xep-cong::before { content: '+'; font-size: 13px; font-weight: 900; line-height: 1; }
.tikz-xep.mo .tikz-xep-cong::before { content: '\2212'; }

.tikz-xep-ten { font-size: 11.5px; font-weight: 800; color: #64748b; letter-spacing: .2px; }

/* ⚠ NHÓM ĐÓNG MÀ RỖNG TRÔNG Y HỆT NHÓM ĐÓNG MÀ ĐẦY. Nhóm nào đã có nội dung
   thì đầu nhóm đổi màu và kê ngay bên phải bên trong có gì — nếu không Thầy
   phải mở cả năm nhóm ra mới biết chỗ nào cần soát. */
.tikz-xep-cochu {
    margin-left: auto; font-size: 11px; font-weight: 800; color: #bb2649;
    background: #fdecef; border-radius: 20px; padding: 1px 8px;
    max-width: 54%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tikz-xep-co { border-color: #f6d3dc; }
.tikz-xep-co .tikz-xep-ten { color: #bb2649; }
.tikz-xep-co .tikz-xep-cong { border-color: #e9a9bb; color: #bb2649; }

.tikz-xep-than { padding: 2px 10px 8px; }
.tikz-xep-than[hidden] { display: none !important; }

/* ── Trục ngang / trục dọc: NĂM ô trên MỘT hàng ──
   Ô "Mốc" rộng gấp đôi vì nó chứa cả dãy "0 2 4 6", còn "Từ"/"Đến" chỉ một số. */
.tikz-truc5 { display: grid; grid-template-columns: 1fr 1fr .72fr .72fr 1.5fr; gap: 6px; }
.tikz-truc5 .tikz-o-hang { margin-bottom: 2px; min-width: 0; }
.tikz-truc5 .tikz-o { height: 30px; font-size: 12px; padding: 0 7px; }
.tikz-truc5 .tikz-nhan-o {
    font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Ô mô tả tự do: một dòng, bấm vào mới nở ── */
.tikz-o-thu {
    height: 32px; min-height: 32px; resize: none; overflow: hidden;
    transition: height .15s ease, min-height .15s ease;
}
.tikz-o-thu:focus { height: 96px; min-height: 96px; overflow: auto; }

.tikz-loc-cay { margin: 8px 2px 0; }

@media (max-width: 1250px) {
    .tikz-truc5 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   HỘP XÁC NHẬN CỦA MỤC — thay `confirm()` trần      (09/09/2026)
   ══════════════════════════════════════════════════════════════════════
   ⚠ z-index PHẢI CAO HƠN lớp phóng to ảnh (`.tikz-lop-anh`, 9000). Bấm Z
     xem hai hình rồi bấm D ngay là hộp nằm DƯỚI lớp phóng to — Thầy nhìn
     thấy hình mà không thấy hộp, tưởng máy treo. */

.tikz-hoi {
    position: fixed; inset: 0; z-index: 9500; background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: tikz-hoi-vao .12s ease-out;
}
@keyframes tikz-hoi-vao { from { opacity: 0; } to { opacity: 1; } }

.tikz-hoi-hop {
    background: #fff; border-radius: 16px; width: 100%; max-width: 520px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .34);
    border-top: 4px solid #bb2649;
}
/* Hộp của việc KHÔNG CÓ ĐƯỜNG LÙI trông khác hẳn hộp thường. */
.tikz-hoi-nguy { border-top-color: #b91c1c; }

.tikz-hoi-dau {
    padding: 16px 20px 10px; font-size: 15.5px; font-weight: 800; color: #1e293b;
    line-height: 1.35;
}
.tikz-hoi-nguy .tikz-hoi-dau { color: #b91c1c; }

.tikz-hoi-than { padding: 0 20px 4px; overflow: auto; }
.tikz-hoi-chu { margin: 0 0 10px; font-size: 13px; color: #475569; line-height: 1.6; }
.tikz-hoi-chu b { color: #1e293b; }
.tikz-hoi-chu code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: 12px; }

/* Câu cảnh báo phải NỔI HẲN, không lẫn vào chữ thường. */
.tikz-hoi-canh {
    margin: 0 0 12px; padding: 9px 11px; border-radius: 9px;
    background: #fffbeb; border: 1px solid #fde68a; color: #a16207;
    font-size: 12px; font-weight: 600; line-height: 1.55;
}
.tikz-hoi-nguy .tikz-hoi-canh {
    background: #fef2f2; border-color: #fecaca; color: #7f1d1d;
}
.tikz-hoi-canh b { color: #b91c1c; }

.tikz-hoi-ke {
    margin: 0 0 12px; padding: 8px 10px; max-height: 150px; overflow: auto;
    background: #f8fafc; border: 1px solid #e6eaef; border-radius: 8px;
    font-family: 'Consolas', 'Courier New', monospace; font-size: 11px;
    line-height: 1.5; color: #475569; white-space: pre-wrap; word-break: break-all;
}

/* ⚠ HAI HÌNH TRONG HỘP ĐÈ — nhìn lần cuối trước khi đồng ý. Cùng cỡ khung,
   `object-fit: contain`, đúng luật của vùng duyệt. */
.tikz-hoi-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.tikz-hoi-cap figure { margin: 0; min-width: 0; }
.tikz-hoi-cap figcaption {
    font-size: 10.5px; font-weight: 800; color: #94a3b8; margin-bottom: 4px;
}
.tikz-hoi-khung {
    height: 130px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e6eaef; border-radius: 9px;
    padding: 6px; box-sizing: border-box; overflow: hidden;
}
.tikz-hoi-khung img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tikz-hoi-hang {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px 16px; border-top: 1px solid #f1f5f9; background: #fff;
}
.tikz-hoi-hang .tikz-nut { height: 38px; padding: 0 18px; font-size: 13px; }
.tikz-hoi-hang .tikz-nut-de { width: auto; }
/* Nút đang được con trỏ đứng (là nút HUỶ — xem ghi chú trong tikz-man.js)
   phải nhìn ra là đang được chọn. */
.tikz-hoi-hang .tikz-nut:focus-visible,
.tikz-hoi-hang .tikz-nut:focus { outline: 2px solid #94a3b8; outline-offset: 2px; }

@media (max-width: 560px) {
    .tikz-hoi-cap { grid-template-columns: 1fr; }
    .tikz-hoi-khung { height: 110px; }
}