/* Dạng bài "ve" (bai-tap/dang/ve.js hoặc buoc-noi.js). Luật cứng như app.css: không viền, hex chỉ ở :root (ở đây KHÔNG có hex), rgba(var(--nhan-rgb), a), chữ ≥ 20px qua --cs-*, không đỏ, Chromium 83. Màu nhấn = --nhan (đã là xanh ngọc của môn). Cỡ theo trang: calc(var(--px) * N). */

/* Chừa chỗ dưới sân cho thanh công cụ: lề dưới của sân làm sân co lại (fit() đo clientHeight), thanh đặt vào đúng phần lề đó. */
.ve-khung { position: relative; margin-bottom: 5.6rem; }
.ve-thanh { position: absolute; left: 0; right: 0; top: 100%; margin-top: .7rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.ve-thanh > * { margin: 0 .3rem; }
.ve-thanh .nut-tron { width: 3rem; height: 3rem; min-width: 3rem; }
.ve-thanh .nut-tron .bt { width: 1.9rem; height: 1.9rem; }
.ve-mau-hang { display: flex; align-items: center; padding: .3rem .4rem; border-radius: var(--bo-vien); background: var(--oai-huong); }
.ve-mau { position: relative; flex: none; width: 2.3rem; height: 2.3rem; margin: 0 .1rem; padding: 0; border-radius: 50%; background: var(--c); box-shadow: var(--bong); transition: transform .12s ease-out; }
.ve-mau::after { content: ""; position: absolute; left: -.3rem; right: -.3rem; top: -.6rem; bottom: -.6rem; }   /* vùng chạm rộng hơn chấm màu (≥ 64px theo chiều dọc) */
.ve-mau.chon { transform: scale(1.12); box-shadow: 0 0 0 .2rem var(--the), 0 0 0 .4rem var(--c); }
.ve-tay.chon { background: var(--nhan); color: var(--the); transform: scale(1.1); }
.ve-xong { margin-left: .4rem; min-height: 3rem; height: 3rem; padding: 0 1rem; font-size: var(--cs-28); }
.ve-xong .bt { width: 1.6rem; height: 1.6rem; margin: 0 .4rem 0 0; }
@media (max-width: 1100px) { .ve-khung { margin-bottom: 9rem; } }

/* Ô trên trang: ô đang vẽ sáng nhẹ; ô đã có nét có dấu tích nhỏ ở góc */
.ve-o { position: absolute; pointer-events: none; border-radius: calc(var(--px) * 14); background: transparent; transform: scale(.93); transition: background-color .2s; }
.ve-o.dang { background: rgba(var(--nhan-rgb), .06); box-shadow: 0 0 0 calc(var(--px) * 3) rgba(var(--nhan-rgb), .22); }
.ve-tich { position: absolute; right: calc(var(--px) * 8); top: calc(var(--px) * 8); width: calc(var(--px) * 30); height: calc(var(--px) * 30); border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--mint); color: var(--the); }
.ve-tich .bt { width: 72%; height: 72%; margin: 0; }
.ve-o.co-net .ve-tich { display: flex; animation: ve-no .45s var(--ease-nay); }
@keyframes ve-no { 0% { transform: scale(.2); } 100% { transform: scale(1); } }