/* 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%); }

/* Gen Z: tím điện + hồng neon, pastel */
.bang-genz {
  --nen-app: #f6f0ff; --nen-choi: linear-gradient(160deg, #fbf7ff 0%, #ffeefa 100%);
  --mat: #ffffff; --mat-2: #f3ebff; --chu: #1a1033; --chu-nhat: #7a6c99;
  --chinh: #7c3aed; --phu: #ff4ecd; --xanh: #22b8ff; --la: #19c37d; --vang: #ffc21a; --cam: #ff8a3d; --do: #ff3d71;
  --vien: #e8dcff; --hong-nhat: #ede2ff;
  --bong: 0 2px 8px rgba(76, 29, 149, .08); --bong-lon: 0 10px 30px rgba(76, 29, 149, .14);
}
.bang-genz .app-dau { background: linear-gradient(90deg, #fbf7ff, #ffeefa); }
.bang-genz .th-nut:not(.vien):not(.do):not(.cam):not(.phu), .bang-genz .chip.bat, .bang-genz .nhom-chon button.bat { background: linear-gradient(120deg, var(--chinh), var(--phu)); }
.bang-genz .nav-o.bat > .th-ic { background: linear-gradient(120deg, #eadbff, #ffd9f4); }

/* Hiện đại: xanh dương, xám lạnh, góc vuông hơn */
.bang-hienDai {
  --nen-app: #f4f6fb; --nen-choi: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
  --mat: #ffffff; --mat-2: #eef3ff; --chu: #0f172a; --chu-nhat: #64748b;
  --chinh: #2563eb; --phu: #06b6d4; --xanh: #0ea5e9; --la: #16a34a; --vang: #f59e0b; --cam: #f97316; --do: #e11d48;
  --vien: #e2e8f0; --hong-nhat: #dbe7ff;
  --bo-2: 10px; --bo-3: 14px;
  --bong: 0 1px 3px rgba(15, 23, 42, .08); --bong-lon: 0 8px 24px rgba(15, 23, 42, .12);
}

/* Cổ điển: giấy cũ, gỗ nâu, chữ có chân cho tiêu đề */
.bang-coDien {
  --nen-app: #f1e6d2; --nen-choi: linear-gradient(180deg, #f8efdd 0%, #eedfc3 100%);
  --mat: #fffaf0; --mat-2: #f5e9d3; --chu: #3b2a1a; --chu-nhat: #846c55;
  --chinh: #9c4f26; --phu: #c8963e; --xanh: #3f6e8c; --la: #4f7f3a; --vang: #d4a12a; --cam: #c26b2a; --do: #a8322d;
  --vien: #e3d0ad; --hong-nhat: #efdcbc;
  --bong: 0 2px 6px rgba(80, 50, 20, .10); --bong-lon: 0 10px 28px rgba(80, 50, 20, .18);
}
.bang-coDien .app-tieu-de, .bang-coDien .th-hop h2, .bang-coDien .app-the h3, .bang-coDien .ket-the h2, .bang-coDien .dau-tro-chu h2, .bang-coDien .hs-ten b {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }

/* Đơn giản: xám ấm, một màu nhấn xanh ngọc, phẳng không bóng */
.bang-donGian {
  --nen-app: #f6f6f4; --nen-choi: #fafaf8;
  --mat: #ffffff; --mat-2: #f0f2f1; --chu: #1f2421; --chu-nhat: #6f7773;
  --chinh: #14937f; --phu: #9aa5a0; --xanh: #3b82c4; --la: #2e9d5b; --vang: #e2a52a; --cam: #d9822b; --do: #d34a4a;
  --vien: #e6e8e6; --hong-nhat: #dff1ec;
  --bong: none; --bong-lon: 0 6px 20px rgba(0, 0, 0, .08);
}
.bang-donGian .th-nut { box-shadow: none; }
.bang-donGian .o-bia { box-shadow: none; }

/* Trắng đen: chỉ đen, trắng, xám (màu báo thắng/thua và xu vẫn giữ để dễ hiểu) */
.bang-denTrang {
  --nen-app: #f2f2f2; --nen-choi: #f7f7f7;
  --mat: #ffffff; --mat-2: #eeeeee; --chu: #111111; --chu-nhat: #6b6b6b;
  --chinh: #111111; --phu: #555555; --xanh: #444444; --la: #2b2b2b;
  --vien: #dddddd; --hong-nhat: #e6e6e6;
  --bong: 0 1px 4px rgba(0, 0, 0, .10); --bong-lon: 0 10px 28px rgba(0, 0, 0, .16);
}
.bang-denTrang .o-bia, .bang-denTrang .dau-tro .bt { filter: grayscale(1); }

/* 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: #8b7bff; --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(auto-fill, minmax(92px, 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; }