/* LÕI — các bảng màu (theme) dựng trên cấu trúc .theme-trang. HOP-DONG mục 18.
   Mỗi theme chỉ đổi biến màu; trò dùng biến (--mat, --mat-2, --chu, --chu-nhat, --chinh, --phu, --vien, --hong-nhat, --nen-app, --nen-choi)
   thì tự hợp mọi theme. Nhẹ cho máy yếu: không blur, không gradient chuyển động. */

/* Trắng hồng (mặc định) */
.bang-trang { --nen-app: #fbf9fa; --nen-choi: linear-gradient(180deg, #fff 0%, #fff4f8 100%); }

/* Tối: nền đen than, chữ sáng, nhấn hồng */
.bang-toi {
  --nen-app: #121117; --nen-choi: #16151b;
  --mat: #1d1b23; --mat-2: #27242f; --chu: #f2eef5; --chu-nhat: #a69eaf;
  --chinh: #ff5c9a; --phu: #ff9cc4; --xanh: #5cb8ff; --la: #3ddc97; --vang: #ffd25a; --cam: #ff9f4a; --do: #ff6b81;
  --vien: #34303d; --hong-nhat: #3a2533;
  --bong: 0 2px 8px rgba(0, 0, 0, .4); --bong-lon: 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
.bang-toi .th-hop-nen, .bang-toi .man-ket { background: rgba(0, 0, 0, .55); }
.bang-toi .th-tb { background: #f2eef5; color: #121117; }
.bang-toi .th-o-nhap { background: var(--mat-2); color: var(--chu); }
.bang-toi .o-bia { box-shadow: none; }
/* Nút phụ (.phu) ở theme sáng là màu mực tối: trên nền tối đổi thành nút sáng chữ tối */
.bang-toi .th-nut.phu { --c: #f2eef5; color: #121117; }
.bang-toi .khung-tro:not(.ho-tro-toi) .th-nut.phu { --c: #2a2230; color: #fff; }
.khung-pc.bang-toi body { background: #08070b; }
/* Màn chơi của trò chưa khai hoTroToi giữ bảng màu sáng để chữ luôn đọc được */
.bang-toi .khung-tro:not(.ho-tro-toi) {
  --mat: #ffffff; --mat-2: #fff0f6; --chu: #2a2230; --chu-nhat: #8b8093; --vien: #f1e4ea; --hong-nhat: #ffe3ee;
  --nen-choi: linear-gradient(180deg, #fff 0%, #fff4f8 100%);
  color: var(--chu); color-scheme: light; background: var(--nen-choi);
}

/* Chung cho mọi theme sáng/tối */
.theme-trang .nguoi { background: var(--mat); color: var(--chu); }
.theme-trang .man-choi { background: var(--nen-choi); }

/* Ô chọn theme có mẫu màu (trang Tôi → Cài đặt) */
.chon-theme { display: grid; align-content: start; grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-theme { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid var(--vien); border-radius: var(--bo-2); background: var(--mat);
  color: var(--chu); font: 700 var(--co-2) var(--font); cursor: pointer; text-align: left; min-height: var(--cham); }
.o-theme.bat { border-color: var(--chinh); box-shadow: 0 0 0 2px var(--hong-nhat); }
.o-theme .mau-mau { display: flex; align-items: center; gap: 4px; height: 34px; border-radius: 9px; padding: 0 7px; border: 1px solid rgba(0, 0, 0, .06); }
.o-theme .mau-mau i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.o-theme .mau-mau b { flex: 1; height: 14px; border-radius: 4px; }
.o-theme span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }