/* Hộp thoại "Bàn cờ của tôi" (ban-co-tuy-bien.js). CLAUDE.md §3.41.
   Màu ô xem trước do JS gắn thẳng vào từng ô (lấy từ danh mục) — KHÔNG cắm mã màu ở đây; phần còn lại dùng biến Sneat. */
#modal-ban-co-tuy-chon .btc-xem-truoc {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-width: 320px;
    margin-inline: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
#modal-ban-co-tuy-chon .btc-o { aspect-ratio: 1; }
#modal-ban-co-tuy-chon .btc-o svg { display: block; width: 100%; height: 100%; }

#modal-ban-co-tuy-chon .btc-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
}
#modal-ban-co-tuy-chon .btc-the {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    cursor: pointer;
    margin: 0;
}
#modal-ban-co-tuy-chon .btc-the:hover { border-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); }
#modal-ban-co-tuy-chon .btc-the.chon { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
/* Ô chọn thật nằm trong thẻ nhưng ẩn về mặt hình ảnh; vẫn nhận phím Tab và trình đọc màn hình. */
#modal-ban-co-tuy-chon .btc-the input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#modal-ban-co-tuy-chon .btc-the:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
#modal-ban-co-tuy-chon .btc-mau { display: flex; width: 100%; height: 1.75rem; border-radius: .25rem; overflow: hidden; }
#modal-ban-co-tuy-chon .btc-mau i { flex: 1; }
#modal-ban-co-tuy-chon .btc-quan { display: flex; }
#modal-ban-co-tuy-chon .btc-quan svg { width: 2.25rem; height: 2.25rem; }
#modal-ban-co-tuy-chon .btc-ten { font-size: .8125rem; color: var(--bs-heading-color); text-align: center; }