/* CSS riêng cho trang Quản Trị Khóa Học (quan-tri-khoa-hoc.html), Phase 6.
   Chỉ chứa những gì Tailwind đã build không có sẵn; phần dùng chung nằm ở theme.css / bai-hoc.css. */

/* Ô soạn văn bản của khối: chữ đơn cách để dấu \( \) và ** nhìn rõ, cho kéo dọc khi gõ dài. */
.soan-van-ban {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

/* Khung xem trước: cao tối đa theo màn hình và tự cuộn trong modal, để cột trái (danh sách khối)
   dài bao nhiêu thì cột phải vẫn dính theo khi cuộn. */
.soan-xem-truoc {
    max-height: 70vh;
    overflow-y: auto;
}

/* Cột xem trước dính theo khi cuộn cột soạn (từ lg, khi hai cột đứng cạnh nhau). */
@media (min-width: 1024px) {
    .soan-cot-xem-truoc { position: sticky; top: 0; }
}

/* Hàng nhập của bảng công thức (concept | formula | nút xóa) và thuật ngữ (term | meaning | nút xóa). */
.soan-hang-cong-thuc { grid-template-columns: 1fr 1fr auto; }
.soan-hang-dinh-nghia { grid-template-columns: 1fr 2fr auto; }

/* Chấm "đã có nội dung" cạnh tên bài. */
.cham-noi-dung { width: 8px; height: 8px; }

/* =============================================================================================
   ĐỔI VỊ TRÍ KHỐI TRONG TRÌNH SOẠN (12/09/2026): tay nắm kéo, ô số thứ tự, huy hiệu phần
   ============================================================================================= */

/* Bo góc 2px ở cả ba thứ dưới đây: DESIGN_SYSTEM.md chỉ cho hai trạng thái, và "nút, tag/huy hiệu
   nhỏ" thuộc trạng thái rounded-sm (2px, gần như vuông). Huy hiệu "EN n/m" ngay cạnh cũng đúng con
   số đó nên cả dải đầu khối nhìn thành một họ. */

/* Tay nắm kéo. touch-action: none để ngón tay kéo khối thay vì cuộn trang (bộ nghe pointermove
   mới nhận được sự kiện trên cảm ứng). user-select: none để kéo không bôi đen chữ dải đầu khối. */
.soan-keo {
    width: 22px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--ao-chu-nhat, #6B7684);
    font-size: 12px;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--ao-nhanh) var(--ao-ease), background-color var(--ao-nhanh) var(--ao-ease);
}
.soan-keo:active { cursor: grabbing; }
.soan-keo:focus-visible { outline: 2px solid var(--navy-900, #0D1F33); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .soan-keo:hover { color: var(--navy-900, #0D1F33); background-color: #fff; }
}

/* Ô số thứ tự: nhỏ bằng đúng chỗ của con số cũ, nhìn ra được là gõ vào được. */
.soan-so-thu-tu {
    width: 34px;
    padding: 2px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ao-chu-nhat, #6B7684);
    background-color: #fff;
    border: 1px solid var(--ao-vien, #E8E6E1);
    border-radius: 2px;
    transition: border-color var(--ao-nhanh) var(--ao-ease), color var(--ao-nhanh) var(--ao-ease);
}
/* Bấm chuột vào ô thì viền navy là đủ; đi bằng bàn phím thì phải có vành rõ, nên :focus-visible giữ
   nguyên vành chứ không bị outline: none của :focus nuốt mất. */
.soan-so-thu-tu:focus {
    outline: none;
    color: var(--navy-900, #0D1F33);
    border-color: var(--navy-900, #0D1F33);
}
.soan-so-thu-tu:focus-visible { outline: 2px solid var(--navy-900, #0D1F33); outline-offset: 1px; }

/* Huy hiệu PHẦN của trang học (Video Lesson, Handout...). Cùng họ với huy hiệu "EN n/m" bên cạnh:
   viền mảnh, chữ nhỏ in hoa. Phần chưa dựng được thì huy hiệu xám.
   Màu chữ là gold-700 chứ không phải gold-600, và 10px chứ không phải 9px: đo trên trang đã dựng,
   gold-600 trên nền dải đầu khối (paper-dim #F2EBDC) chỉ được 3,44:1, bản xám --ao-chu-nhat được
   3,89:1, trong khi chữ 9-10px đậm vẫn là chữ NHỎ nên chuẩn AA của DESIGN_SYSTEM.md đòi 4,5:1.
   gold-700 được 4,74:1 và stone-600 được 6,43:1. Đây là huy hiệu mang câu quan trọng nhất trong
   trình soạn ("khối này sẽ KHÔNG hiện trên trang học"), đọc không rõ là hỏng đúng chỗ cần nhất.
   10px cũng bằng đúng huy hiệu "EN n/m" (text-3xs) đứng ngay cạnh, hai cái thành một họ. */
.soan-huy-hieu-phan {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold-700, #8A5F19);
    border: 1px solid var(--gold-500, #C08A2E);
    border-radius: 2px;
    padding: 2px 6px;
}
.soan-huy-hieu-phan--khong {
    color: var(--stone-600, #57534E);
    border-color: var(--ao-vien, #E8E6E1);
}

/* Lúc kéo: khối đang kéo mờ đi, khe sắp thả có vạch navy. Vạch nằm BÊN TRONG mép khối (thẻ khối có
   overflow: hidden, vạch vẽ ngoài sẽ bị cắt mất). Không đặt z-index: hai lớp giả này đã được xếp
   (position: absolute) nên vẽ sau nền của dải đầu khối; thang z-index của DESIGN_SYSTEM.md là thang
   TOÀN TRANG, không kéo vào ngữ cảnh xếp lớp con này. */
.soan-khoi { position: relative; }
.soan-khoi--dang-keo { opacity: .45; }
.soan-khoi--khe-tren::before,
.soan-khoi--khe-duoi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--navy-900, #0D1F33);
}
.soan-khoi--khe-tren::before { top: 0; }
.soan-khoi--khe-duoi::after { bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .soan-keo, .soan-so-thu-tu { transition: none; }
}