/* ===== Màu vui cho các game trẻ em (Đoàn Tàu Số · Phóng Viên Nhí · Thám Tử Bắt Lỗi) =====
   Nạp SAU khối <style> riêng của từng game nên chỉ đè màu, không đổi bố cục.
   Mỗi game một màu chủ đạo (đặt trên <body class="choi-...">), cầu vồng dùng chung. */

body.choi{
  --do:#F2545B; --cam:#FF8A3D; --vang:#FFBE2E; --la:#2DB36F; --troi:#2E9BF0; --tim:#8A63F0; --hong:#F25CA8;
  --do-nhat:#FFE1E2; --cam-nhat:#FFE9D9; --vang-nhat:#FFF3C9; --la-nhat:#D9F5E6; --troi-nhat:#DCEFFE; --tim-nhat:#ECE4FE; --hong-nhat:#FFE0F0;
  --vang-dam:#8A5A00;
  --men:#1C8A52; --men-nhat:#D9F5E6;
  --cau-vong:linear-gradient(90deg,var(--do),var(--cam),var(--vang),var(--la),var(--troi),var(--tim),var(--hong));
  background-color:#FFFBF4;
  background-image:
    radial-gradient(circle at 8% 12%,rgba(46,155,240,.16) 0 120px,transparent 121px),
    radial-gradient(circle at 94% 22%,rgba(242,92,168,.14) 0 150px,transparent 151px),
    radial-gradient(circle at 88% 78%,rgba(255,190,46,.20) 0 130px,transparent 131px),
    radial-gradient(circle at 6% 86%,rgba(45,179,111,.15) 0 110px,transparent 111px),
    radial-gradient(rgba(138,99,240,.13) 2px,transparent 2.5px);
  background-size:auto,auto,auto,auto,26px 26px;
  background-attachment:fixed;
}
/* Màu chủ đạo của từng game */
body.choi-toan{--dat:#1A6FC4;--dat-nhat:#DCEFFE;--dat-sang:#2E9BF0}
body.choi-phong-vien{--dat:#6B45D8;--dat-nhat:#ECE4FE;--dat-sang:#8A63F0}
body.choi-tham-tu{--dat:#C9440E;--dat-nhat:#FFE9D9;--dat-sang:#FF8A3D}

/* Thẻ game: dải cầu vồng trên đầu, bóng có màu */
.choi .the-game{
  border:2px solid #F1E6D6;
  background-color:#fff;
  background-image:var(--cau-vong);
  background-size:100% 8px;background-repeat:no-repeat;background-position:top;
  padding-top:calc(clamp(18px,4.5vw,30px) + 8px);
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--dat) 55%,transparent),0 3px 0 #F1E6D6;
}
.choi .nhan{display:inline-block;background:var(--dat-nhat);color:var(--dat);padding:6px 12px;border-radius:999px}
.choi .game h1{color:var(--muc)}
.choi .game h1 em{
  background:linear-gradient(90deg,var(--dat-sang),var(--hong),var(--cam));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;
}
.choi .nhac-nho{background:var(--vang-nhat);color:#6B4A00}

/* Nút: đổ màu + đế nổi như nút đồ chơi */
.choi .game .nut.dat{background:linear-gradient(180deg,var(--dat-sang),var(--dat));box-shadow:0 4px 0 color-mix(in srgb,var(--dat) 70%,#000)}
.choi .game .nut.dat:hover{background:linear-gradient(180deg,var(--dat-sang),var(--dat));filter:brightness(1.07)}
.choi .game .nut.men{background:linear-gradient(180deg,var(--la),var(--men));box-shadow:0 4px 0 #136B3E}
.choi .game .nut.men:hover{background:linear-gradient(180deg,var(--la),var(--men));filter:brightness(1.07)}
.choi .game .nut:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.choi .game .nut.vien{box-shadow:inset 0 0 0 2px var(--dat);color:var(--dat)}
.choi .game .nut.vien:hover{background:var(--dat);color:#fff}

/* Thẻ chọn bộ / chế độ: mỗi thẻ một màu */
.choi .ds-bo>.the-bo{border-left-width:8px}
.choi .ds-bo>.the-bo:nth-child(5n+1){--m:var(--troi);--mn:var(--troi-nhat)}
.choi .ds-bo>.the-bo:nth-child(5n+2){--m:var(--hong);--mn:var(--hong-nhat)}
.choi .ds-bo>.the-bo:nth-child(5n+3){--m:var(--la);--mn:var(--la-nhat)}
.choi .ds-bo>.the-bo:nth-child(5n+4){--m:var(--cam);--mn:var(--cam-nhat)}
.choi .ds-bo>.the-bo:nth-child(5n+5){--m:var(--tim);--mn:var(--tim-nhat)}
.choi .ds-bo>.the-bo{border-left-color:var(--m)}
.choi .ds-bo>.the-bo:hover{border-color:var(--m);background:var(--mn)}
.choi .ds-bo>.the-bo[aria-pressed="true"]{border-color:var(--m);background:var(--mn);box-shadow:0 0 0 2px var(--m) inset}
.choi .ds-bo>.the-bo[aria-pressed="true"] .dau-chon{border-color:var(--m);background:var(--m)}
.choi .vien-chon[aria-pressed="true"]{border-color:var(--dat);background:var(--dat-nhat)}
.choi .o-ten input{border-width:2px}
.choi .o-ten input:focus,.choi .o-so input:focus{border-color:var(--dat-sang);box-shadow:0 0 0 4px var(--dat-nhat)}

/* Thanh trạng thái + đếm sao */
.choi .dem-sao,.choi .dem-pha{background:linear-gradient(180deg,#FFE27A,var(--vang));color:#5A3B00;box-shadow:0 2px 0 #D99A00}
.choi .so-cau{color:var(--dat)}
.choi .cham-cau span{height:8px;border-radius:4px}
.choi .cham-cau span.xong:nth-child(6n+1){background:var(--do)}
.choi .cham-cau span.xong:nth-child(6n+2){background:var(--cam)}
.choi .cham-cau span.xong:nth-child(6n+3){background:var(--vang)}
.choi .cham-cau span.xong:nth-child(6n+4){background:var(--la)}
.choi .cham-cau span.xong:nth-child(6n+5){background:var(--troi)}
.choi .cham-cau span.xong:nth-child(6n+6){background:var(--tim)}
.choi .cham-cau span.dang{background:var(--dat);box-shadow:0 0 0 3px var(--dat-nhat)}

/* Ô trả lời: mỗi ô một màu nhạt */
.choi .lua-chon>.chon:nth-child(4n+1){--m:var(--troi);--mn:var(--troi-nhat)}
.choi .lua-chon>.chon:nth-child(4n+2){--m:var(--hong);--mn:var(--hong-nhat)}
.choi .lua-chon>.chon:nth-child(4n+3){--m:var(--la);--mn:var(--la-nhat)}
.choi .lua-chon>.chon:nth-child(4n+4){--m:var(--cam);--mn:var(--cam-nhat)}
.choi .lua-chon>.chon{background:var(--mn);border-color:color-mix(in srgb,var(--m) 45%,#fff);box-shadow:0 3px 0 color-mix(in srgb,var(--m) 40%,#fff)}
.choi .lua-chon>.chon:hover:not(:disabled){border-color:var(--m)}
.choi .lua-chon>.chon.sai{background:#F3EFEA;border-color:#DDD3C6;color:var(--muc-nhat);box-shadow:none}
.choi .lua-chon>.chon.dung{background:var(--la-nhat);border-color:var(--la);color:#14633B;box-shadow:0 3px 0 var(--la)}

/* Hộp phản hồi: viền trái đậm màu */
.choi .hop{border-left:6px solid transparent}
.choi .hop.dung{background:var(--la-nhat);border-left-color:var(--la)}
.choi .hop.goi-y{background:var(--vang-nhat);border-left-color:var(--vang)}
.choi .hop.nhe{background:var(--hong-nhat);border-left-color:var(--hong);color:#7A1F4E}
.choi .hop.loi-giai,.choi .hop.giai{background:var(--troi-nhat);border-left-color:var(--troi);color:#123E63}

/* Kết thúc */
.choi .tong-so{background:linear-gradient(90deg,var(--dat-sang),var(--hong));-webkit-background-clip:text;background-clip:text;color:transparent}
.choi .tong-so small{-webkit-text-fill-color:var(--muc-nhat)}
.choi .sao{color:var(--vang);text-shadow:0 2px 0 #E0A000}
.choi .sao .tat{color:#E8DFD2;text-shadow:none}
.choi .nhom.tot{background:var(--la-nhat);border:2px solid color-mix(in srgb,var(--la) 40%,#fff)}
.choi .nhom.on{background:var(--hong-nhat);border:2px solid color-mix(in srgb,var(--hong) 35%,#fff)}
.choi .bo-me{background:var(--vang-nhat)}
.choi .bang-kl tr.cua-con td{background:var(--vang-nhat)}

/* ---------- Đoàn Tàu Số: đầu máy đỏ, mỗi toa một màu ---------- */
.choi .tau .dau-may{fill:var(--do)}
.choi .tau .cabin{fill:var(--vang)}
.choi .tau .kinh{fill:#BFE3FF}
.choi .tau .banh{fill:#3A3550}
.choi .tau .ray{stroke:#8B6A4E}
.choi .tau .ta-vet{stroke:#E9D7BF;stroke-dasharray:6 8}
.choi .tau>g.toa:nth-of-type(6n+1){--m:var(--cam);--mn:var(--cam-nhat)}
.choi .tau>g.toa:nth-of-type(6n+2){--m:var(--vang);--mn:var(--vang-nhat)}
.choi .tau>g.toa:nth-of-type(6n+3){--m:var(--la);--mn:var(--la-nhat)}
.choi .tau>g.toa:nth-of-type(6n+4){--m:var(--troi);--mn:var(--troi-nhat)}
.choi .tau>g.toa:nth-of-type(6n+5){--m:var(--tim);--mn:var(--tim-nhat)}
.choi .tau>g.toa:nth-of-type(6n+6){--m:var(--hong);--mn:var(--hong-nhat)}
.choi .toa .than{fill:var(--mn);stroke:var(--m)}
.choi .toa .o-khoa{stroke:var(--m)}
.choi .toa .o-khoa-than{fill:var(--m)}
.choi .toa.hien .than{fill:var(--m);stroke:var(--m)}
.choi .toa.hien .chu{fill:#fff}
.choi .toa.mo .than{fill:var(--m);stroke:#fff;stroke-width:3}
.choi .toa.mo .chu{fill:#fff}
@keyframes nhip{50%{fill:var(--mn)}}
@keyframes sang{0%{fill:#fff}100%{fill:var(--m)}}
.choi .tu-tu{color:#fff;background:var(--do);border-color:var(--do)}
.choi .mo-xong .tieng-coi{color:var(--do)}

/* ---------- Phóng Viên Nhí ---------- */
.choi .mic .than-mic{fill:var(--dat-sang)}
.choi .mic .song{stroke:var(--hong)}
.choi .ba-buoc li{background:#fff;border:2px solid var(--vien)}
.choi .ba-buoc li:nth-child(3n+1) .so{background:var(--troi)}
.choi .ba-buoc li:nth-child(3n+2) .so{background:var(--hong)}
.choi .ba-buoc li:nth-child(3n+3) .so{background:var(--la)}
.choi .vi-du{background:var(--tim-nhat)}
.choi .tin{border-color:color-mix(in srgb,var(--dat-sang) 45%,#fff);background:#FBF9FF}
.choi .kho-the>.the-tu:nth-child(5n+1){background:var(--troi-nhat);border-color:#A9D5FA}
.choi .kho-the>.the-tu:nth-child(5n+2){background:var(--hong-nhat);border-color:#F8B4D7}
.choi .kho-the>.the-tu:nth-child(5n+3){background:var(--la-nhat);border-color:#9EDDBC}
.choi .kho-the>.the-tu:nth-child(5n+4){background:var(--cam-nhat);border-color:#FFC59D}
.choi .kho-the>.the-tu:nth-child(5n+5){background:var(--tim-nhat);border-color:#C7B5F8}
.choi .the-tu{box-shadow:0 3px 0 rgba(0,0,0,.08)}
.choi .the-nha-bao .dai{background:linear-gradient(90deg,var(--dat),var(--hong))}
.choi .the-nha-bao{border-color:var(--dat)}

/* ---------- Thám Tử Bắt Lỗi ---------- */
.choi .to-bai{border:2px solid #F1E2C8}
.choi .nhac-bo-me{background:var(--troi-nhat);color:#123E63}
.choi .cong-tac{background:var(--la-nhat)}
.choi .huy-moi{color:var(--dat)}
.choi .ke-huy .huy-hieu:nth-child(3n+1).co .vong{fill:var(--vang-nhat);stroke:var(--vang)}
.choi .ke-huy .huy-hieu:nth-child(3n+2).co .vong{fill:var(--troi-nhat);stroke:var(--troi)}
.choi .ke-huy .huy-hieu:nth-child(3n+3).co .vong{fill:var(--hong-nhat);stroke:var(--hong)}

@media (prefers-reduced-motion:reduce){
  .choi .game .nut:active:not(:disabled){transform:none}
}