/* ============================================================
   ĐIỀU KHIỂN GIAO LỘ
   ============================================================ */

.dkglo-icon{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    isolation:isolate;
}


/* ============================================================
   HÌNH LOGO
   ============================================================ */

.dkglo-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    z-index:1;

    pointer-events:none;
    filter:
    brightness(.69)
    saturate(.75)
    contrast(1.3);
}


/* ============================================================
   TIA SÁNG ĐÈN PHA
   ============================================================ */

.dkglo-beam{
    position:absolute;

    z-index:2;

    pointer-events:none;

    top:61%;

    width:31%;
    height:34%;

    opacity:.12;

    background:
        linear-gradient(
            180deg,
            rgba(255,249,190,.95) 0%,
            rgba(255,231,110,.58) 28%,
            rgba(255,216,80,.18) 65%,
            transparent 100%
        );

    clip-path:polygon(
        39% 0,
        61% 0,
        100% 100%,
        0 100%
    );

    filter:blur(3px);

    transform-origin:50% 0;

    animation:dkglo-headlight 1.8s ease-in-out infinite;
}


/* ============================================================
   TIA TRÁI
   ============================================================ */

.dkglo-beam-left{
    left:15%;
     top:68%;

    transform:rotate(-1deg);
}


/* ============================================================
   TIA PHẢI
   ============================================================ */

.dkglo-beam-right{
    right:15%;
    top:68%;

    transform:rotate(-1deg);

    
}


/* ============================================================
   CHỚP TẮT ĐÈN PHA
   ============================================================ */

@keyframes dkglo-headlight{

    0%{
        opacity:.1;
    }

    35%{
        opacity:.2;
    }

    45%{
        opacity:.64;
    }

    50%{
        opacity:.71;
    }

    56%{
        opacity:.81;
    }

    70%{
        opacity:.12;
    }

    100%{
        opacity:0;
    }
}


/* ============================================================
   QUẦNG SÁNG NHẸ TRÊN MẶT ĐƯỜNG
   ============================================================ */

.dkglo-icon::after{
    content:"";

    position:absolute;

    left:12%;
    right:12%;
    bottom:-12%;

    height:32%;

    z-index:2;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 50% 15%,
            rgba(255,225,100,.20),
            transparent 68%
        );

    opacity:.83;

    mix-blend-mode:screen;

    animation:dkglo-road-glow 1.8s ease-in-out infinite;
}


@keyframes dkglo-road-glow{

    0%,
    100%{
        opacity:.18;
    }

    42%{
        opacity:.55;
    }

    50%{
        opacity:.12;
    }

    57%{
        opacity:.45;
    }

    75%{
        opacity:.22;
    }
}

/* ============================================================
   ĐÈN GIAO THÔNG
   Chu kỳ 10 giây: ĐỎ → XANH → VÀNG → LẶP LẠI
   ============================================================ */

.dkglo-signal{
    position:absolute;
    z-index:24;

    left:14.2%;
    top:20%;

    width:7%;
    height:24%;

    pointer-events:none;
}


/* Điểm sáng */
.signal-light{
    position:absolute;

    left:50%;

    width:48%;
    aspect-ratio:1;

    transform:translateX(-50%);

    border-radius:50%;

    opacity:1;

    filter:blur(1px);
}


/* ĐỎ */
.signal-red{
    top:3%;

    background:#ff3030;

    box-shadow:
        0 0 4px #ff3030,
        0 0 9px rgba(255,40,40,.9),
        0 0 18px rgba(255,30,30,.65);

    animation:dkglo-red 10s infinite;
}


/* VÀNG */
.signal-yellow{
    top:35%;

    background:#ffd21c;

    box-shadow:
        0 0 4px #ffd21c,
        0 0 9px rgba(255,210,30,.9),
        0 0 18px rgba(255,200,20,.65);

    animation:dkglo-yellow 10s infinite;
}


/* XANH */
.signal-green{
    top:70%;

    background:#20e66b;

    box-shadow:
        0 0 4px #20e66b,
        0 0 9px rgba(30,230,100,.9),
        0 0 18px rgba(20,220,90,.65);

    animation:dkglo-green 10s infinite;
}


/* ============================================================
   CHU KỲ ĐÈN
   ============================================================ */

/* ĐỎ: 0 → 40% */
@keyframes dkglo-red{

    0%,
    39%{
        opacity:1;
        
    }

    40%,
    100%{
        opacity:0;
        
    }
}


/* XANH: 40 → 70% */
@keyframes dkglo-green{

    0%,
    39%{
        opacity:0;
    }

    40%,
    69%{
        opacity:1;
    }

    70%,
    100%{
        opacity:0;
    }
}


/* VÀNG: 70 → 100% */
@keyframes dkglo-yellow{

    0%,
    69%{
        opacity:0;
    }

    70%,
    99%{
        opacity:1;
    }

    100%{
        opacity:.0;
    }
}
/* ============================================================
   GHI NHỚ EMOJI
   ============================================================ */

.emoji-memory-btn{
    overflow: hidden;
}

.emoji-memory-logo {
    position: relative;
    width: 53px;
    height: 53px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgb(237, 235, 116);
    border-radius: 8px;
}


/* ============================================================
   GLOW
   ============================================================ */

.emoji-memory-glow{
    position: absolute;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(124,58,237,.35),
        rgba(6,182,212,.12) 45%,
        transparent 75%
    );
z-index: 22;
    filter: blur(5px);

    animation: emojiMemoryGlow 2s ease-in-out infinite;
}

@keyframes emojiMemoryGlow{

    0%,100%{
        transform: scale(.9);
        opacity: .55;
    }

    50%{
        transform: scale(1.15);
        opacity: 1;
    }
}


/* ============================================================
   NÃO
   ============================================================ */

.emoji-memory-brain{
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    font-size: 25px;

    color: #a78bfa;

    opacity: .22;

    filter:
        drop-shadow(0 0 6px rgba(124,58,237,.8));

    animation: brainPulse 2.4s ease-in-out infinite;
}

@keyframes brainPulse{

    0%,100%{
        transform: translate(-50%,-50%) scale(.95);
    }

    50%{
        transform: translate(-50%,-50%) scale(1.08);
    }
}


/* ============================================================
   THẺ EMOJI
   ============================================================ */

.emoji-memory-card{
    position: absolute;

    width: 22px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #24243e,
            #131326
        );

    border: 1px solid rgba(167,139,250,.55);

    box-shadow:
        0 3px 8px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    font-size: 13px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* Thẻ phía sau */

.emoji-memory-card.card-back{
    transform:
        translate(-10px,-3px)
        rotate(-15deg);

    opacity: 1;

    z-index: 1;
}


/* Thẻ giữa */

.emoji-memory-card.card-mid{
    transform:
        translate(6px,-5px)
        rotate(14deg);

    opacity:1;

    z-index: 2;
}


/* Thẻ trước */

.emoji-memory-card.card-front{
    transform:
        translate(1px,8px)
        rotate(-2deg);

    z-index: 3;
opacity:1;
    background:
        linear-gradient(
            145deg,
            rgba(124,58,237,.35),
            rgba(15,15,35,.95)
        );

    border-color: rgba(124,58,237,.85);

    box-shadow:
        0 0 10px rgba(124,58,237,.35),
        0 4px 10px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* ============================================================
   ANIMATION CÁC THẺ
   ============================================================ */

.emoji-memory-btn:hover .card-back{
    transform:
        translate(-13px,-10px)
        rotate(-20deg);
}

.emoji-memory-btn:hover .card-mid{
    transform:
        translate(8px,-7px)
        rotate(11deg);
}

.emoji-memory-btn:hover .card-front{
    transform:
        translate(2px,8px)
        rotate(-3deg)
        scale(1.06);
}


/* ============================================================
   SPARK
   ============================================================ */

.emoji-memory-spark{
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 5px rgba(255,255,255,.9),
        0 0 9px rgba(124,58,237,.8);

    animation: memorySpark 1.8s ease-in-out infinite;
}

.emoji-memory-spark.spark-1{
    top: 5px;
    right: 8px;
    animation-delay: 0s;
}

.emoji-memory-spark.spark-2{
    left: 7px;
    top: 18px;
    animation-delay: .6s;
}

.emoji-memory-spark.spark-3{
    right: 3px;
    bottom: 7px;
    animation-delay: 1.1s;
}

@keyframes memorySpark{

    0%,100%{
        opacity: 0;
        transform: scale(.4);
    }

    30%{
        opacity: 1;
        transform: scale(1);
    }

    60%{
        opacity: .7;
        transform: scale(.8);
    }
}
#bidaBtn {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, rgba(70,255,255,0.18), transparent 45%),
             linear-gradient(180deg, #102534 0%, #09161f 100%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 0 16px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.35);
}
/* ============================================================
   BIDA NEON LOGO
   ============================================================ */

.bida-btn{
    overflow:hidden;
}


/* ============================================================
   LOGO CONTAINER
   ============================================================ */

.bida-logo{
    position:relative;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:12px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(60,255,190,.16),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #071d1a,
            #081311
        );

    border:1px solid rgba(70,255,190,.24);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 10px rgba(0,255,170,.08);
}





/* ============================================================
   MẶT BÀN
   ============================================================ */

.bida-table{
    position:absolute;

    width:42px;
    height:28px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        perspective(60px)
        rotateX(48deg);

    border-radius:5px;

    background:
        linear-gradient(
            135deg,
            #0d7c57,
            #063e30
        );

    border:1px solid rgba(80,255,190,.35);

    box-shadow:
        0 0 8px rgba(0,255,170,.14),
        inset 0 0 8px rgba(0,0,0,.35);
}


/* Góc bàn */

.bida-table::before,
.bida-table::after{
    content:"";

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#041510;

    box-shadow:
        0 0 3px rgba(0,0,0,.6);
}

.bida-table::before{
    top:3px;
    left:3px;
}

.bida-table::after{
    right:3px;
    bottom:3px;
}



/* ============================================================
   CƠ BIDA
   ============================================================ */

.bida-cue{
    position:absolute;

    width:45px;
    height:3px;

    left:-2px;
    top:17px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #d8b56b 0%,
            #f4e2a8 72%,
            #fff 100%
        );

    transform:
        rotate(-23deg)
        translateX(-30px);

    transform-origin:right;

    box-shadow:
        0 0 4px rgba(255,230,160,.35);

    animation:bidaCue 2.2s cubic-bezier(.45,.05,.55,.95) infinite;
}

@keyframes bidaCue{

    0%,100%{
        transform:
            rotate(-23deg)
            translateX(-116px);
    }

    28%{
        transform:
            rotate(-23deg)
            translateX(-30px);
    }

    40%{
        transform:
            rotate(-23deg)
            translateX(-38px);
    }

    76%{
        transform:
            rotate(-23deg)
            translateX(-66px);
    }
}


/* Đầu cơ */

.cue-tip{
    position:absolute;

    right:-1px;
    top:0;

    width:4px;
    height:3px;

    border-radius:50%;

    background:#dffcff;
}





/* ============================================================
   BI 8
   ============================================================ */

.bida-ball8{
    position:absolute;

    width:20px;
    height:20px;

    right:12px;
    bottom:13px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 32% 28%,
            #292929,
            #050505 65%,
            #000
        );

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 0 7px rgba(0,0,0,.55),
        inset -2px -2px 4px rgba(0,0,0,.5);

    animation:bidaBall8 2.8s ease-in-out infinite;
}

@keyframes bidaBall8{

    0%,100%{
        transform:translate(0,0) rotate(0deg);
    }

    30%{
        transform:translate(1px,-1px) rotate(8deg);
    }

    60%{
        transform:translate(-1px,1px) rotate(-6deg);
    }
}


/* Vòng trắng số 8 */

.bida-ball8-number{
    width:9px;
    height:9px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f2f4f5;

    color:#111;

    font-family:Arial,sans-serif;

    font-size:6px;
    font-weight:900;

    line-height:1;
}


/* Shine */

.bida-ball8-shine{
    position:absolute;

    width:4px;
    height:4px;

    top:3px;
    left:4px;

    border-radius:50%;

    background:rgba(255,255,255,.65);

    filter:blur(.3px);
}


/* ============================================================
   VÒNG NĂNG LƯỢNG
   ============================================================ */

.bida-ring{
    position:absolute;

    width:38px;
    height:38px;

    border-radius:50%;

    border:1px solid rgba(50,255,190,.16);

    border-top-color:rgba(110,255,220,.75);
    border-right-color:rgba(50,255,190,.25);

    animation:bidaRing 2.8s linear infinite;
}

@keyframes bidaRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}


/* ---------- 8.2 Block Jump 3D ---------- */
#blockjump {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #5fd2ff 0%, #79e2ff 45%, #c8f6ff 100%);
  border-color:rgba(255,255,255,0.45);
}
.bj-sky {
  position:absolute; inset:0;
  background:radial-gradient(circle at 22% 18%, rgba(255,255,255,0.9) 0 6px, transparent 7px),
             radial-gradient(circle at 78% 24%, rgba(255,255,255,0.55) 0 5px, transparent 6px);
  opacity:0.8; z-index:1;
}
.bj-block {
  position:absolute; left:50%; bottom:4px; width:34px; height:22px;
  transform:translateX(-50%) skewX(-10deg); border-radius:7px;
  background:linear-gradient(145deg, #4fd9ff, #008cff);
  box-shadow:0 5px 8px rgba(0,0,0,0.25), inset 0 2px 5px rgba(255,255,255,0.45);
  z-index:2; animation:bjBlockPulse 1.6s ease-in-out infinite;
}
.bj-rabbit {
  position:absolute; left:50%; bottom:23px; width:18px; height:18px;
  transform:translateX(-50%); z-index:4;
  animation:bjJump 1.6s ease-in-out infinite;
}
.bj-body {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #dcefff);
  box-shadow:0 0 8px rgba(255,255,255,0.9), 0 4px 6px rgba(0,0,0,0.22);
}
.bj-body::before {
  content:""; position:absolute; left:5px; top:6px; width:3px; height:3px;
  border-radius:50%; background:#222; box-shadow:8px 0 0 #222;
}
.bj-body::after {
  content:""; position:absolute; left:50%; top:10px; width:5px; height:4px;
  transform:translateX(-50%); border-radius:50% 50% 60% 60%; background:#ff8fa3;
  box-shadow:-4px 3px 0 -2px #333, 4px 3px 0 -2px #333;
}
.bj-ear {
  position:absolute; top:-9px; width:5px; height:13px; border-radius:999px;
  background:#fff; z-index:3;
}
.bj-ear.ear-left  { left:4px; transform:rotate(-12deg); }
.bj-ear.ear-right { right:4px; transform:rotate(12deg); }
.bj-trail {
  position:absolute; left:16px; bottom:32px; width:0; height:4px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
  filter:blur(1px); z-index:3; animation:bjTrail 1.6s ease-in-out infinite;
}
@keyframes bjJump {
  0%,100% { transform:translateX(-50%) translateY(0) scale(1,0.9); }
  20%     { transform:translateX(-50%) translateY(2px) scale(1.08,0.82); }
  45%     { transform:translateX(-8px) translateY(-15px) rotate(-8deg) scale(0.96,1.05); }
  65%     { transform:translateX(4px) translateY(-5px) rotate(6deg) scale(1.04,0.92); }
  80%     { transform:translateX(8px) translateY(0) scale(1,0.88); }
}
@keyframes bjTrail {
  0%,20%,100% { width:0; opacity:0; }
  42%         { width:22px; opacity:0.85; }
  60%         { width:12px; opacity:0.35; }
}
@keyframes bjBlockPulse {
  0%,100% { filter:brightness(1); }
  50%     { filter:brightness(1.13); }
}

/* ---------- 8.3 Bóng Nảy ---------- */
.bounce-btn {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 30% 25%, #ffffff55, transparent 35%),
             linear-gradient(180deg, #8de9ff 0%, #d7f9ff 60%, #9be977 61%, #59c54b 100%);
}
.bounce-scene {
  position:absolute; inset:0; overflow:hidden;
}
.bounce-scene::after {
  content:""; position:absolute; left:-10%; right:-10%; bottom:12px;
  height:5px; border-radius:999px;
  background:linear-gradient(90deg, #4aa63d, #7be16d, #4aa63d);
}
.bounce-ball {
  position:absolute; width:14px; height:14px; border-radius:50%;
  box-shadow:inset 0 2px 2px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.45);
}
.bounce-ball::after {
  content:""; position:absolute; left:50%; top:20px; width:12px; height:4px;
  border-radius:50%; background:rgba(0,0,0,0.18); transform:translateX(-50%);
}
.bounce-ball.red    { background:#ff5a5a; animation:moveRed 1.25s linear infinite, jumpRed 0.34s ease-in-out infinite; }
.bounce-ball.blue   { background:#44a8ff; animation:moveBlue 1.75s linear infinite, jumpBlue 0.29s ease-in-out infinite; }
.bounce-ball.yellow { background:#ffd93d; animation:moveYellow 1.42s linear infinite, jumpYellow 0.41s ease-in-out infinite; }
@keyframes moveRed    { 0%{left:8px;} 50%{left:65%;} 100%{left:8px;} }
@keyframes jumpRed    { 0%,100%{bottom:18px;} 50%{bottom:38px;} }
@keyframes moveBlue   { 0%{left:72%;} 50%{left:18%;} 100%{left:72%;} }
@keyframes jumpBlue   { 0%,100%{bottom:18px;} 50%{bottom:30px;} }
@keyframes moveYellow { 0%{left:35%;} 25%{left:75%;} 50%{left:55%;} 75%{left:12%;} 100%{left:35%;} }
@keyframes jumpYellow { 0%,100%{bottom:18px;} 30%{bottom:42px;} 65%{bottom:26px;} }

/* ---------- 8.4 Caro ---------- */
.grid line { stroke:rgba(255,255,255,0.8); stroke-width:4; }
.x-static line { stroke:#ff4d4d; stroke-width:4; stroke-linecap:round; }
.o { fill:none; stroke:#00aaff; stroke-width:4; opacity:0; transform-origin:center; }
.o1 { animation:showO 4s infinite; }
.o2 { animation:showO 4s infinite 0.3s; }
.o3 { animation:showO 4s infinite 0.6s; }
@keyframes showO {
  0%   { opacity:0; transform:translateY(8px) scale(0.8); }
  15%  { opacity:1; transform:translateY(0) scale(1.05); }
  25%  { opacity:1; transform:scale(1); }
  55%  { opacity:1; }
  65%  { opacity:0; }
  100% { opacity:0; }
}
.win-line {
  stroke:#ff4d4d; stroke-width:5; stroke-dasharray:100 100; stroke-dashoffset:100;
  stroke-linecap:round; animation:drawWin 4s infinite;
}
@keyframes drawWin {
  0%,35% { stroke-dashoffset:100; opacity:0; }
  45%    { opacity:1; }
  55%    { stroke-dashoffset:0; opacity:1; }
  65%    { stroke-dashoffset:0; opacity:1; }
  80%    { opacity:1; }
  100%   { stroke-dashoffset:100; opacity:0; }
}

/* ---------- 8.5 Chặn Cua ---------- */
#crab { position:relative; overflow:hidden; }
.crab-water {
  position:absolute; bottom:0; left:0; right:0; height:75%;
  background:linear-gradient(180deg, rgba(30,100,200,0.25) 0%, rgba(20,70,180,0.55) 60%, rgba(10,40,140,0.75) 100%);
  border-radius:0 0 11px 11px; pointer-events:none; z-index:0;
}
.crab-water::before {
  content:''; position:absolute; top:-5px; left:-10%; width:120%; height:10px;
  background:rgba(100,180,255,0.35); border-radius:50%;
  animation:water-wave 10s ease-in-out infinite;
}
@keyframes water-wave {
  0%,100%{ transform:scaleX(1) scaleY(1); }
  40%    { transform:scaleX(1.04) scaleY(1.1); }
  70%    { transform:scaleX(0.97) scaleY(0.9); }
}
.crab-bubbles {
  position:absolute; bottom:0; left:0; right:0; height:75%; pointer-events:none; z-index:1;
}
.crab-bubbles b {
  position:absolute; bottom:4px; border-radius:50%;
  background:rgba(180,220,255,0.5); border:1px solid rgba(200,235,255,0.8);
  opacity:0; animation:bubble-rise var(--dur) ease-in var(--delay) infinite;
}
.crab-bubbles b:nth-child(1) { width:6px; height:6px; left:20%; --dur:1.2s; --delay:0.2s; }
.crab-bubbles b:nth-child(2) { width:8px; height:8px; left:40%; --dur:1.5s; --delay:0.7s; }
.crab-bubbles b:nth-child(3) { width:5px; height:5px; left:60%; --dur:1.1s; --delay:1.1s; }
.crab-bubbles b:nth-child(4) { width:7px; height:7px; left:75%; --dur:1.4s; --delay:0.4s; }
.crab-bubbles b:nth-child(5) { width:5px; height:5px; left:30%; --dur:1.3s; --delay:0.9s; }
@keyframes bubble-rise {
  0%   { opacity:0; transform:translateY(0) translateX(0); }
  15%  { opacity:0.9; }
  60%  { opacity:0.6; transform:translateY(-60%) translateX(4px); }
  100% { opacity:0; transform:translateY(-100%) translateX(-3px); }
}

/* ---------- 8.6 Comet ---------- */
.util-btn.comet-btn {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #1a1040, #0d0625);
  border:1px solid rgba(180,140,255,0.3);
  box-shadow:0 0 20px rgba(120,40,200,0.2);
  transition:all 0.3s ease;
}
.util-btn.comet-btn:hover {
  border-color:rgba(200,160,255,0.7);
  box-shadow:0 0 35px rgba(160,80,255,0.5), inset 0 0 25px rgba(120,60,220,0.15);
}
.comet-btn::before {
  content:''; position:absolute; inset:-5px; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, #ffffff, transparent),
    radial-gradient(1px 1px at 60% 20%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #e0c0ff, transparent),
    radial-gradient(1px 1px at 80% 50%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 15% 65%, #c0a0ff, transparent),
    radial-gradient(1px 1px at 70% 75%, #ffffff, transparent),
    radial-gradient(2px 2px at 50% 15%, #f0d0ff, transparent),
    radial-gradient(1px 1px at 30% 85%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 90% 35%, #d0b0ff, transparent);
  opacity:0.8;
}
.comet-btn::after {
  content:''; position:absolute; inset:3px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(140,60,240,0.25), transparent 70%);
}
.comet-btn svg {
  position:relative; z-index:1; filter:drop-shadow(0 0 6px rgba(200,160,255,0.5));
}
.stickman-head { fill:none; stroke:#ffffff; stroke-width:3.5; stroke-linecap:round; }
.stickman-body { stroke:#ffffff; stroke-width:3.5; stroke-linecap:round; }
.stickman-trail {
  stroke:rgba(180,140,255,0.5); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:4 6; animation:trailPulse 2s ease-in-out infinite;
}
@keyframes trailPulse {
  0%,100% { opacity:0.3; }
  50%     { opacity:0.8; }
}
.arm-wave {
  transform-origin:50px 42px; animation:waveHand 0.8s ease-in-out infinite;
  transform-box:fill-box;
}
@keyframes waveHand {
  0%   { transform:rotate(0deg); }
  30%  { transform:rotate(30deg); }
  70%  { transform:rotate(-5deg); }
  100% { transform:rotate(0deg); }
}
.comet-mini { animation:cometFly 3s linear infinite; }
@keyframes cometFly {
  0%   { transform:translateX(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateX(60px); opacity:0; }
}
.star-twinkle { animation:twinkle 1.5s ease-in-out infinite; }
.star-twinkle:nth-child(even) { animation-delay:0.75s; }
@keyframes twinkle {
  0%,100% { opacity:0.3; }
  50%     { opacity:1; }
}
.stickman-shadow { fill:rgba(0,0,0,0.3); }

/* ---------- 8.7 Cờ Đam ---------- */
#codam {
  background-color:#5c2a00;
  background-image:repeating-linear-gradient(88deg, transparent 0px, rgba(0,0,0,0.08) 1px, transparent 2px, transparent 9px),
                   repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.04) 1px, transparent 3px, transparent 14px),
                   linear-gradient(160deg, #7a3c0a 0%, #4e2200 35%, #6b3208 60%, #3e1a00 100%);
  display:flex; align-items:center; justify-content:center;
}
.codam-piece {
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 30% 26%, #484848 0%, #1c1c1c 38%, #060606 100%);
  border:2px solid #3a3a3a; box-shadow:0 3px 10px rgba(0,0,0,0.85), inset 0 1px 3px rgba(255,255,255,0.1);
  position:relative; overflow:hidden; flex-shrink:0;
}
.codam-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:66%; height:66%; border-radius:50%; border:1px solid rgba(255,255,255,0.07);
}
.codam-shine {
  position:absolute; top:-60%; left:-75%; width:55%; height:200%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.07) 60%, transparent 100%);
  border-radius:50%; transform:skewX(-15deg);
  animation:codam-shine-sweep 3.5s ease-in-out infinite; pointer-events:none;
}
@keyframes codam-shine-sweep {
  0%   { left:-75%; opacity:0; }
  10%  { opacity:1; }
  50%  { left:120%; opacity:1; }
  55%  { opacity:0; }
  100% { left:120%; opacity:0; }
}

/* ---------- 8.8 Cờ Thú ---------- */
.animal-icon {
  position:relative; width:54px; height:54px; display:flex;
  align-items:center; justify-content:center; overflow:hidden;
}
.animal-icon::before {
  content:""; position:absolute; inset:8px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,90,0.95) 0%, rgba(255,214,90,0.28) 40%, transparent 72%);
  animation:pawGlow 2.2s ease-in-out infinite;
}
.animal-icon::after {
  content:""; position:absolute; inset:4px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.05), 0 0 10px rgba(0,0,0,0.3);
}
.animal-icon i {
  position:relative; z-index:2; font-size:28px; color:#ffd54d;
  filter:drop-shadow(0 0 3px #fff8) drop-shadow(0 0 10px #ffcf44);
  animation:pawBeat 2s ease-in-out infinite;
}
.scratch {
  position:absolute; top:7px; width:5px; height:38px; border-radius:999px;
  background:linear-gradient(to bottom, #ffeaea 0%, #ff5757 20%, #7b0000 100%);
  transform:rotate(-20deg); box-shadow:0 0 8px rgba(255,70,70,0.45);
  animation:slashFlash 1.8s ease-in-out infinite;
}
.scratch.s1 { left:15px; }
.scratch.s2 { left:25px; animation-delay:0.12s; }
.scratch.s3 { left:35px; animation-delay:0.24s; }
@keyframes pawBeat {
  0%,100% { transform:scale(1) rotate(0deg); }
  50%     { transform:scale(1.08) rotate(-4deg); }
}
@keyframes pawGlow {
  0%,100% { transform:scale(0.95); opacity:0.7; }
  50%     { transform:scale(1.12); opacity:1; }
}
@keyframes slashFlash {
  0%,100% { opacity:0.45; filter:brightness(1); }
  50%     { opacity:1; filter:brightness(1.6); }
}

/* ---------- 8.9 Đập Quái ---------- */
#dapquai {
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 50% 20%, rgba(255,222,120,0.35), transparent 38%),
             linear-gradient(180deg, #234b25, #102413);
}
.whack-mini {
  position:relative; width:48px; height:48px; margin:auto; overflow:hidden;
}
.whack-light {
  position:absolute; left:50%; top:48%; width:38px; height:38px;
  transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,126,0.5), transparent 65%);
  animation:whackLightPulse 2.4s infinite ease-in-out; z-index:1;
}
.whack-hole {
  position:absolute; left:50%; bottom:-8px; width:42px; height:20px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, #120904 0%, #211008 48%, #7a461e 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.65), 0 3px 0 rgba(0,0,0,0.25); z-index:5;
}
.whack-monster {
  position:absolute; left:50%; bottom:10px; width:28px; height:28px;
  transform:translateX(-50%) translateY(28px) scale(0.65);
  border-radius:50% 50% 44% 44%;
  background:linear-gradient(180deg, #925034, #5c2e22);
  box-shadow:inset 0 4px 0 rgba(255,255,255,0.16), 0 4px 8px rgba(0,0,0,0.35);
  z-index:4; animation:monsterUpDown 2.4s infinite ease-in-out;
}
.whack-monster::before, .whack-monster::after {
  content:""; position:absolute; top:-5px; width:10px; height:12px;
  border-radius:50% 50% 30% 30%; background:#743720; z-index:-1;
}
.whack-monster::before { left:2px; transform:rotate(-28deg); }
.whack-monster::after  { right:2px; transform:rotate(28deg); }
.whack-eye {
  position:absolute; top:10px; width:4px; height:5px; border-radius:50%;
  background:#140905; animation:monsterEyes 2.4s infinite;
}
.eye-left  { left:8px; }
.eye-right { right:8px; }
.whack-mouth {
  position:absolute; left:50%; top:18px; width:9px; height:5px;
  transform:translateX(-50%); border-bottom:2px solid #1a0b06;
  border-radius:0 0 10px 10px; animation:monsterMouth 2.4s infinite;
}
.whack-hammer {
  position:absolute; right:-1px; top:-1px; width:38px; height:38px;
  transform-origin:27px 30px; z-index:8;
  animation:hammerSmash 2.4s infinite ease-in-out;
  background:radial-gradient(circle at 20px 16px, #d8c89a 0 3px, #5b3517 3.5px 5px, transparent 5.5px);
}
.whack-hammer::before {
  content:""; position:absolute; left:5px; top:6px; width:23px; height:14px;
  border-radius:5px; background:linear-gradient(180deg, #fff5d8 0%, #c9cabc 42%, #77817a 100%);
  border:2px solid rgba(48,54,49,0.9);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.65), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.35);
}
.whack-hammer::after {
  content:""; position:absolute; left:13px; top:17px; width:8px; height:22px;
  border-radius:999px; background:linear-gradient(90deg, #4c250c 0%, #a7642b 45%, #6b3511 100%);
  border:1px solid rgba(45,22,6,0.85); transform:rotate(-1deg); transform-origin:top center;
  box-shadow:inset 2px 0 0 rgba(255,255,255,0.18), inset -2px 0 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.32);
}
.whack-stun {
  position:absolute; left:50%; top:6px; width:34px; height:18px;
  transform:translateX(-50%); z-index:9; opacity:0;
  animation:stunShow 2.4s infinite;
}
.whack-stun b {
  position:absolute; font-size:11px; line-height:1; color:#ffe66d;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.whack-stun b::before { content:"★"; }
.whack-stun b:nth-child(1) { left:1px; top:7px; animation:starSpin 2.4s infinite; }
.whack-stun b:nth-child(2) { left:13px; top:0; animation:starSpin 2.4s infinite 0.08s; }
.whack-stun b:nth-child(3) { right:1px; top:7px; animation:starSpin 2.4s infinite 0.16s; }
@keyframes monsterUpDown {
  0%   { transform:translateX(-50%) translateY(30px) scale(0.6); opacity:0; }
  12%  { transform:translateX(-50%) translateY(7px) scale(0.9); opacity:1; }
  22%  { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
  42%  { transform:translateX(-50%) translateY(0) scale(1); }
  48%  { transform:translateX(-50%) translateY(2px) rotate(-8deg) scale(1.05); }
  54%  { transform:translateX(-50%) translateY(0) rotate(8deg) scale(1.05); }
  60%  { transform:translateX(-50%) translateY(2px) rotate(-7deg) scale(1.04); }
  68%  { transform:translateX(-50%) translateY(0) rotate(6deg) scale(1.03); }
  76%  { transform:translateX(-50%) translateY(3px) rotate(0deg) scale(0.96); }
  88%  { transform:translateX(-50%) translateY(28px) scale(0.65); opacity:1; }
  100% { transform:translateX(-50%) translateY(30px) scale(0.6); opacity:0; }
}
@keyframes hammerSmash {
  0%   { transform:translate(10px,-18px) rotate(-38deg); opacity:0; }
  18%  { transform:translate(10px,-18px) rotate(-38deg); opacity:1; }
  32%  { transform:translate(0,0) rotate(28deg); }
  38%  { transform:translate(9px,-15px) rotate(-34deg); }
  48%  { transform:translate(0,0) rotate(31deg); }
  55%  { transform:translate(8px,-13px) rotate(-31deg); }
  64%  { transform:translate(0,0) rotate(28deg); }
  76%  { transform:translate(7px,-10px) rotate(-24deg); opacity:1; }
  88%  { transform:translate(12px,-18px) rotate(-40deg); opacity:0; }
  100% { transform:translate(12px,-18px) rotate(-40deg); opacity:0; }
}
@keyframes stunShow {
  0%,42% { opacity:0; transform:translateX(-50%) translateY(2px) scale(0.7); }
  50%,76% { opacity:1; transform:translateX(-50%) translateY(-1px) scale(1); }
  88%,100% { opacity:0; transform:translateX(-50%) translateY(4px) scale(0.7); }
}
@keyframes starSpin {
  0%,42% { transform:rotate(0deg) scale(0.6); }
  55%    { transform:rotate(180deg) scale(1.15); }
  76%    { transform:rotate(360deg) scale(1); }
  100%   { transform:rotate(540deg) scale(0.6); }
}
@keyframes monsterEyes {
  0%,42% { height:5px; transform:rotate(0deg); }
  50%,74% { height:2px; transform:rotate(12deg); background:#ffe66d; }
  88%,100% { height:5px; transform:rotate(0deg); }
}
@keyframes monsterMouth {
  0%,42% { width:9px; height:5px; border-bottom:2px solid #1a0b06; border-radius:0 0 10px 10px; }
  52%,74% { width:8px; height:8px; border:2px solid #1a0b06; border-radius:50%; }
  88%,100% { width:9px; height:5px; border-bottom:2px solid #1a0b06; border-top:0; border-left:0; border-right:0; }
}
@keyframes whackLightPulse {
  0%,100% { opacity:0.45; transform:translate(-50%, -50%) scale(0.8); }
  35%,70% { opacity:0.9; transform:translate(-50%, -50%) scale(1.08); }
}

/* ---------- 8.10 Dogdoku ---------- */
.dogdoku-icon {
  position:relative; width:48px; height:48px; flex:none; z-index:2;
}
.dogdoku-icon svg { width:100%; height:100%; display:block; overflow:visible; }
.dogdoku-icon .dogdoku-ear { fill:#8a5a32; stroke:#fff; stroke-width:3; stroke-linejoin:round; }
.dogdoku-icon .dogdoku-inner-ear { fill:#633d25; }
.dogdoku-icon .dogdoku-head { fill:#e6b077; stroke:#fff; stroke-width:3; }
.dogdoku-icon .dogdoku-snout { fill:#f8e6c8; }
.dogdoku-icon .dogdoku-eye-white { fill:#fff; }
.dogdoku-icon .dogdoku-pupil { fill:#211712; }
.dogdoku-icon .dogdoku-shine { fill:#fff; }
.dogdoku-icon .dogdoku-nose { fill:#211712; }
.dogdoku-icon .dogdoku-mouth { stroke:#5c3b22; stroke-width:2.5; fill:none; stroke-linecap:round; }
.dogdoku-icon .dogdoku-tongue { fill:#ef8ea3; }

#dogdoku .dogdoku-eye-group {
  animation:dogdokuBlink 3.5s infinite; transform-box:fill-box; transform-origin:center;
}
@keyframes dogdokuBlink {
  0%,45%,48%,100% { transform:scaleY(1); }
  46%,47% { transform:scaleY(0.06); }
}
#dogdoku {
  position:relative; overflow:hidden; background:transparent;
}
#dogdoku::before {
  content:''; position:absolute; inset:-50%; z-index:0;
  background:conic-gradient(from 0deg, rgba(255,107,107,0.8), rgba(255,215,0,0.8), rgba(46,213,115,0.8), rgba(54,143,255,0.8), rgba(155,89,182,0.8), rgba(255,107,107,0.8));
  animation:dogdokuBGSpin 6s linear infinite;
}
#dogdoku .dogdoku-icon { position:relative; z-index:1; }
@keyframes dogdokuBGSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.dogdoku-board { display:none; }

/* ---------- 8.11 Đua Xúc Xắc Bãi Biển ---------- */
#duaxucxac {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 18%, rgba(255,255,255,0.55), transparent 18%),
             radial-gradient(circle at 50% 55%, rgba(255,214,87,0.35), transparent 42%),
             linear-gradient(180deg, #ffe79a 0%, #f7c76d 55%, #d9963d 100%);
  border-color:rgba(255,218,90,0.45);
}
.dicebeach-sunray {
  position:absolute; left:-30%; top:-55%; width:160%; height:130%;
  background:conic-gradient(from 20deg, transparent 0deg 12deg, rgba(255,255,255,0.42) 13deg 19deg, transparent 20deg 42deg, rgba(255,242,120,0.45) 43deg 49deg, transparent 50deg 75deg, rgba(255,255,255,0.35) 76deg 82deg, transparent 83deg 360deg);
  opacity:0.9; animation:diceBeachRaySpin 5s linear infinite; pointer-events:none; z-index:1;
}
.dicebeach-sun {
  position:absolute; right:4px; top:4px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, #fff9a8 0%, #ffe066 58%, #ffae24 100%);
  box-shadow:0 0 12px rgba(255,235,90,0.9), 0 0 24px rgba(255,180,40,0.55);
  animation:diceBeachSunPulse 1.7s ease-in-out infinite; z-index:3;
}
.dicebeach-ball {
  position:absolute; left:50%; top:52%; width:31px; height:31px; border-radius:50%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0 5px, transparent 6px),
             conic-gradient(from 15deg, #ffffff 0deg 42deg, #ff4747 42deg 92deg, #ffffff 92deg 138deg, #22b9ff 138deg 190deg, #ffffff 190deg 235deg, #ffd43b 235deg 292deg, #ffffff 292deg 330deg, #35d26d 330deg 360deg);
  border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 9px 12px rgba(100,58,18,0.35), inset -5px -6px 10px rgba(0,0,0,0.16), 0 0 16px rgba(255,245,160,0.35);
  animation:diceBeachBallBounce 1.65s ease-in-out infinite; z-index:4;
}
.dicebeach-shadow {
  position:absolute; left:50%; bottom:10px; width:34px; height:8px; border-radius:50%;
  transform:translateX(-50%); background:rgba(92,51,13,0.28); filter:blur(1px);
  animation:diceBeachShadow 1.65s ease-in-out infinite; z-index:2;
}
.dicebeach-sand-dot {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,0.65); box-shadow:0 0 6px rgba(255,255,255,0.65);
  opacity:0.55; z-index:2; animation:diceBeachSpark 1.8s ease-in-out infinite;
}
.dicebeach-sand-dot.d1 { left:8px; bottom:9px; animation-delay:0s; }
.dicebeach-sand-dot.d2 { left:15px; top:12px; animation-delay:0.35s; }
.dicebeach-sand-dot.d3 { right:11px; bottom:16px; animation-delay:0.7s; }
.dicebeach-sand-dot.d4 { right:22px; top:30px; animation-delay:1s; }
@keyframes diceBeachRaySpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes diceBeachSunPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} }
@keyframes diceBeachBallBounce {
  0%,100% { transform:translate(-50%, -50%) translateY(3px) rotate(0deg) scale(1); }
  45%     { transform:translate(-50%, -50%) translateY(-8px) rotate(155deg) scale(1.05); }
  70%     { transform:translate(-50%, -50%) translateY(1px) rotate(250deg) scale(0.96); }
}
@keyframes diceBeachShadow {
  0%,100% { transform:translateX(-50%) scale(1); opacity:0.35; }
  45%     { transform:translateX(-50%) scale(0.62); opacity:0.14; }
  70%     { transform:translateX(-50%) scale(1.1); opacity:0.3; }
}
@keyframes diceBeachSpark {
  0%,100% { transform:scale(0.6); opacity:0.25; }
  50%     { transform:scale(1.35); opacity:0.9; }
}

/* ---------- 8.12 Ếch Nhảy Hồ - SVG dùng CSS ---------- */
#echnhayho {
  background: linear-gradient(145deg, #22c55e, #15803d);
  border: 1px solid #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.25);
  width: 52px;
  height: 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}
#echnhayho:hover {
  background: linear-gradient(145deg, #2dd46a, #169643);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}
#echnhayho:active {
  transform: scale(0.92);
}

.frog-icon {
  width: 42px;
  height: 42px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  overflow: visible;
}

/* ===== CHỚP MẮT - DÙNG CSS ===== */
.pupil {
  transform-origin: center center;
  animation: blink 3s ease-in-out infinite;
}

.pupil-left {
  transform-origin: 35px 44px;
}

.pupil-right {
  transform-origin: 65px 44px;
}

@keyframes blink {
  0%, 45%, 48%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  46%, 47% {
    transform: scaleY(0.08);
    opacity: 0.2;
  }
}

/* ===== MÁ PHÌNH ===== */
.cheek {
  transform-origin: center center;
  animation: puff 1.4s ease-in-out infinite;
}

.cheek-left {
  transform-origin: 24px 58px;
}

.cheek-right {
  transform-origin: 76px 58px;
}

@keyframes puff {
  0%, 80%, 100% {
    rx: 13;
    ry: 8;
    opacity: 0.6;
  }
  85%, 95% {
    rx: 20;
    ry: 14;
    opacity: 0.9;
  }
}

/* ===== MẮT SÁNG ===== */
.eye-shine {
  animation: shineFloat 3s ease-in-out infinite;
}

@keyframes shineFloat {
  0%, 100% {
    opacity: 0.8;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-1px, -1px);
  }
}

/* ---------- 8.13 Hải Chiến ---------- */
#haichien {
  border-color:rgba(0,200,255,0.2); overflow:hidden; position:relative;
}
#haichien .ship-emoji {
  font-size:24px; display:block; position:relative; top:3px; z-index:2; margin-bottom:6px;
  animation:shipRock 3s ease-in-out infinite; transform-origin:center bottom;
}
@keyframes shipRock {
  0%,100% { transform:rotate(-3deg) translateY(0px); }
  25%     { transform:rotate(0deg) translateY(-2px); }
  50%     { transform:rotate(3deg) translateY(0px); }
  75%     { transform:rotate(0deg) translateY(-2px); }
}
#haichien .tc-wave-svg {
  position:absolute; bottom:0; left:0; width:200%; height:18px; z-index:1;
  animation:waveSroll 2s linear infinite;
}
@keyframes waveSroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
#haichien .tc-water {
  position:absolute; bottom:0; left:0; right:0; height:14px;
  background:rgba(0,150,220,0.35); z-index:0;
}

/* ---------- 8.14 Heo Chiến Binh ---------- */
#heodaichien { padding:0; overflow:hidden; position:relative; }

.pigw-logo {
  position:absolute; width:420px; height:420px; left:50%; top:50%;
  transform:translate(-50%, -50%) scale(0.1238095238);
  transform-origin:center center; overflow:hidden; border-radius:48px;
  background:linear-gradient(to bottom, #4384a1 0%, #1d4054 55%, #10232f 100%);
  border:3px solid rgba(170,225,245,0.55);
  box-shadow:0 0 0 5px rgba(0,0,0,0.25), 0 0 35px rgba(70,190,240,0.3), inset 0 0 35px rgba(0,0,0,0.4);
  pointer-events:none;
}
.pigw-sun {
  position:absolute; width:120px; height:120px; left:150px; top:35px;
  border-radius:50%;
  background:radial-gradient(circle, #fff5a3 0%, #ffc947 45%, rgba(255,166,40,0.1) 70%, transparent 72%);
  animation:pigwSunPulse 3s ease-in-out infinite;
}
@keyframes pigwSunPulse { 0%,100% { transform:scale(0.95); } 50% { transform:scale(1.08); } }

.pigw-cloud {
  position:absolute; width:110px; height:25px; border-radius:50px;
  background:rgba(235,250,255,0.2);
  animation:pigwCloudMove 7s linear infinite;
}
.pigw-cloud::before, .pigw-cloud::after {
  content:""; position:absolute; border-radius:50%; background:inherit;
}
.pigw-cloud::before { width:45px; height:45px; left:15px; bottom:4px; }
.pigw-cloud::after  { width:35px; height:35px; right:18px; bottom:2px; }
.pigw-c1 { top:80px; left:-130px; }
.pigw-c2 { top:135px; left:-180px; transform:scale(0.7); animation-delay:3s; }
@keyframes pigwCloudMove {
  from { transform:translateX(0); }
  to   { transform:translateX(600px); }
}

.pigw-hill {
  position:absolute; bottom:0; width:500px; height:170px; left:-40px;
  border-radius:50% 50% 0 0;
  background:linear-gradient(to bottom, #315e3c, #173325);
}
.pigw-flag-pole {
  position:absolute; right:78px; top:130px; width:5px; height:145px;
  background:linear-gradient(to right, #513017, #d08b42, #5a3218);
  transform-origin:bottom; animation:pigwPoleMove 2s ease-in-out infinite;
}
.pigw-flag {
  position:absolute; left:5px; top:0; width:70px; height:40px;
  background:linear-gradient(135deg, #ffcc42, #e95d1d);
  clip-path:polygon(0 0, 100% 10%, 78% 50%, 100% 90%, 0 100%);
  animation:pigwFlagWave 0.7s ease-in-out infinite alternate;
}
.pigw-flag::after {
  content:"★"; position:absolute; left:18px; top:20px; color:#fff2ae; font-size:25px;
}
@keyframes pigwFlagWave {
  from { transform:skewY(0); }
  to   { transform:skewY(-6deg); }
}
@keyframes pigwPoleMove {
  0%,100% { transform:rotate(1deg); }
  50%     { transform:rotate(-1deg); }
}

.pigw-pig {
  position:absolute; width:250px; height:280px; left:85px; top:72px;
  animation:pigwBounce 1.7s ease-in-out infinite;
}
@keyframes pigwBounce { 0%,100% { transform:translateY(5px); } 50% { transform:translateY(-5px); } }

.pigw-ear {
  position:absolute; width:75px; height:75px; top:5px;
  background:linear-gradient(135deg, #ff9eaa, #d85e70);
  border:4px solid #9f394c; z-index:1;
}
.pigw-ear-left  { left:35px; border-radius:80% 20% 45% 30%; transform:rotate(-25deg); }
.pigw-ear-right { right:35px; border-radius:20% 80% 30% 45%; transform:rotate(25deg); }

.pigw-head {
  position:absolute; width:210px; height:190px; left:20px; top:35px;
  border-radius:48% 48% 45% 45%;
  background:radial-gradient(circle at 35% 25%, #ffd0d3, #f28a96 55%, #bd5364 100%);
  border:4px solid #963d4d; box-shadow:0 10px 15px rgba(0,0,0,0.4); z-index:3;
}
.pigw-eye {
  position:absolute; width:28px; height:34px; top:80px; border-radius:50%;
  background:#172027; border:3px solid #743340;
  box-shadow:inset 6px 4px 0 rgba(255,255,255,0.7);
  animation:pigwBlink 4s infinite;
}
.pigw-eye-left  { left:48px; }
.pigw-eye-right { right:48px; }
@keyframes pigwBlink {
  0%,45%,48%,100% { transform:scaleY(1); }
  46%,47% { transform:scaleY(0.08); }
}
.pigw-cheek {
  position:absolute; width:30px; height:18px; border-radius:50%;
  background:rgba(255,180,190,0.5); top:118px;
}
.pigw-cheek-left  { left:22px; }
.pigw-cheek-right { right:22px; }
.pigw-snout {
  position:absolute; width:95px; height:65px; left:57px; bottom:22px;
  border-radius:48%;
  background:linear-gradient(to bottom, #ffadb5, #dc6979);
  border:3px solid #a74253;
  box-shadow:inset 0 -5px 8px rgba(130,40,55,0.2);
}
.pigw-nostril {
  position:absolute; width:17px; height:12px; top:25px; border-radius:50%;
  background:#762c3a;
}
.pigw-nostril-left  { left:22px; }
.pigw-nostril-right { right:22px; }
.pigw-body {
  position:absolute; width:190px; height:120px; left:30px; top:190px;
  border-radius:55% 55% 35% 35%;
  background:linear-gradient(135deg, #f9a1aa, #ca5c6c);
  border:4px solid #963d4d; z-index:2;
}
.pigw-armor {
  position:absolute; width:175px; height:85px; left:37px; top:205px;
  border-radius:45px 45px 20px 20px;
  background:linear-gradient(135deg, #506d78, #263d46 55%, #16252c);
  border:3px solid #91b4c0; z-index:4;
  box-shadow:0 6px 10px rgba(0,0,0,0.45);
}
.pigw-armor::before {
  content:""; position:absolute; width:48px; height:48px; left:61px; top:15px;
  border-radius:50%; border:3px solid #ffd052; box-shadow:0 0 12px rgba(255,195,50,0.5);
}
.pigw-armor::after {
  content:"★"; position:absolute; left:69px; top:17px; font-size:30px; color:#ffd052;
}
.pigw-leg {
  position:absolute; width:42px; height:55px; top:270px;
  border-radius:15px 15px 10px 10px; background:#c95b6b; border:3px solid #923b4b; z-index:1;
}
.pigw-leg-left  { left:65px; }
.pigw-leg-right { right:65px; }
.pigw-tail {
  position:absolute; width:55px; height:55px; right:0px; top:220px;
  border:10px solid #ee8794; border-left-color:transparent; border-bottom-color:transparent;
  border-radius:50%; transform:rotate(75deg);
}
.pigw-sword {
  position:absolute; width:15px; height:190px; right:-4px; top:95px;
  background:linear-gradient(to right, #596d75, #e5f2f5, #657b83);
  border:2px solid #344950; transform:rotate(30deg); transform-origin:bottom center;
  z-index:7; animation:pigwSwordSwing 1.7s ease-in-out infinite;
}
.pigw-sword::before {
  content:""; position:absolute; left:-14px; top:-25px; width:40px; height:45px;
  background:linear-gradient(135deg, #e8f5f7, #657b83);
  clip-path:polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}
.pigw-sword::after {
  content:""; position:absolute; width:55px; height:9px; left:-20px; bottom:20px;
  border-radius:5px; background:linear-gradient(#ffd35a, #9c6419);
}
@keyframes pigwSwordSwing {
  0%,100% { transform:rotate(30deg); }
  50%     { transform:rotate(24deg); }
}
.pigw-spark {
  position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px #8deaff;
  animation:pigwSparkFloat 2s ease-in-out infinite;
}
.pigw-spark-1 { left:60px; top:210px; }
.pigw-spark-2 { right:65px; top:250px; animation-delay:0.7s; }
.pigw-spark-3 { left:90px; top:290px; animation-delay:1.2s; }
@keyframes pigwSparkFloat {
  0%,100% { opacity:0.3; transform:translateY(0) scale(0.6); }
  50%     { opacity:1; transform:translateY(-18px) scale(1.3); }
}

/* ---------- 8.15 Hứng Bi ---------- */
#hungbi {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 18%, rgba(38,255,106,0.18), transparent 36%),
             linear-gradient(180deg, #061b33, #020914);
  border-color:rgba(0,234,255,0.35);
}
.dropball-mini {
  position:relative; width:52px; height:52px; overflow:hidden;
}
.drop-line {
  position:absolute; left:50%; top:0; width:2px; height:100%;
  transform:translateX(-50%); background:linear-gradient(transparent, rgba(255,255,255,0.3), transparent);
}
.drop-ball {
  position:absolute; left:50%; top:-14px; width:14px; height:14px; border-radius:50%;
  transform:translateX(-50%); box-shadow:0 0 10px currentColor;
}
.green-drop { background:#26ff6a; color:#26ff6a; animation:ballDrop 1.65s infinite ease-in; }
.red-drop   { background:#ff3131; color:#ff3131; animation:ballDrop 1.65s infinite ease-in 0.55s; }
.drop-ball::after {
  content:""; position:absolute; top:3px; left:3px; width:4px; height:4px;
  border-radius:50%; background:rgba(255,255,255,0.65);
}
.drop-gate {
  position:absolute; left:50%; bottom:5px; width:34px; height:9px;
  transform:translateX(-50%); border-radius:999px;
  background:linear-gradient(90deg, #00a83b 50%, #c40022 50%);
  box-shadow:0 0 8px rgba(38,255,106,0.55), 0 0 8px rgba(255,49,49,0.45);
}
@keyframes ballDrop {
  0%   { top:-16px; opacity:0; transform:translateX(-50%) scale(0.75); }
  12%  { opacity:1; }
  70%  { top:31px; opacity:1; transform:translateX(-50%) scale(1); }
  82%  { top:33px; transform:translateX(-50%) scale(1.15,0.78); }
  100% { top:46px; opacity:0; transform:translateX(-50%) scale(0.7); }
}

/* ---------- 8.16 Khinh Khí Cầu ---------- */
#khinhkhi {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #56cfff 0%, #bdf4ff 60%, #eaffff 100%);
  border-color:rgba(255,255,255,0.45);
}
.balloon-mini {
  position:relative; width:52px; height:52px; overflow:hidden;
}
.bb-cloud {
  position:absolute; width:22px; height:9px; border-radius:999px;
  background:rgba(255,255,255,0.82);
  box-shadow:7px -4px 0 rgba(255,255,255,0.75), 14px 0 0 rgba(255,255,255,0.7);
  animation:bbCloudMove 3.2s linear infinite; z-index:1;
}
.bb-cloud.c1 { top:9px; left:-30px; }
.bb-cloud.c2 { top:23px; left:-45px; transform:scale(0.75); animation-delay:1.4s; }
.bb-mountain {
  position:absolute; left:-6px; bottom:0; width:64px; height:20px;
  background:linear-gradient(180deg, #55b98a, #2d8a69);
  clip-path:polygon(0 100%, 18% 30%, 32% 75%, 50% 18%, 70% 80%, 86% 35%, 100% 100%);
  z-index:2;
}
.bb-tree {
  position:absolute; bottom:2px; width:5px; height:15px; border-radius:999px;
  background:#1f7657; z-index:3;
}
.bb-tree::before {
  content:""; position:absolute; left:50%; top:-9px; width:14px; height:18px;
  transform:translateX(-50%); border-radius:50%; background:#2cb37b;
}
.bb-tree.t1 { left:8px; transform:scale(0.75); }
.bb-tree.t2 { right:7px; transform:scale(0.62); }
.bb-balloon {
  position:absolute; left:50%; bottom:5px; width:28px; height:42px;
  transform:translateX(-50%); z-index:5;
  animation:bbBalloonRise 2.6s ease-in-out infinite;
}
.bb-body {
  position:absolute; left:50%; top:0; width:26px; height:31px;
  transform:translateX(-50%); border-radius:50% 50% 45% 45%;
  background:linear-gradient(90deg, #f0342f 0 24%, #ffe85a 24% 43%, #f0342f 43% 60%, #ffe85a 60% 78%, #f0342f 78% 100%);
  border:1.5px solid rgba(130,45,25,0.85);
  box-shadow:inset -4px -5px 8px rgba(0,0,0,0.16), inset 4px 3px 5px rgba(255,255,255,0.25), 0 4px 8px rgba(0,0,0,0.18);
}
.bb-body::after {
  content:""; position:absolute; left:50%; bottom:-4px; width:12px; height:7px;
  transform:translateX(-50%); background:#9b5a25;
  clip-path:polygon(15% 0, 85% 0, 65% 100%, 35% 100%);
}
.bb-rope {
  position:absolute; top:29px; width:1.5px; height:10px; background:#6f4a2a; z-index:2;
}
.bb-rope.r1 { left:9px; transform:rotate(7deg); }
.bb-rope.r2 { right:9px; transform:rotate(-7deg); }
.bb-basket {
  position:absolute; left:50%; bottom:0; width:16px; height:10px;
  transform:translateX(-50%); border-radius:3px 3px 5px 5px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 5px),
             linear-gradient(180deg, #b86b2c, #7b3f18);
  border:1px solid rgba(80,35,10,0.8);
}
@keyframes bbBalloonRise {
  0%   { transform:translateX(-50%) translateY(13px) rotate(-2deg); }
  35%  { transform:translateX(-50%) translateY(-5px) rotate(2deg); }
  70%  { transform:translateX(-50%) translateY(-9px) rotate(-1deg); }
  100% { transform:translateX(-50%) translateY(13px) rotate(-2deg); }
}
@keyframes bbCloudMove {
  from { transform:translateX(0); }
  to   { transform:translateX(95px); }
}

/* ---------- 8.17 Lật Đồng Xu ---------- */
.lgdkb {
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:inherit;
  pointer-events:none;
}
.lgdkb .ground {
  position:absolute; left:0; right:0; bottom:0; height:48%;
  background:linear-gradient(to bottom, #79502e, #4b2e19);
}
.lgdkb .ground::before {
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:#4f8235;
}
.lgdkb .hole {
  position:absolute; width:38%; height:13%; left:31%; bottom:10%;
  border-radius:50%;
  background:radial-gradient(ellipse, #1d1109 0%, #2c190d 65%, #4a2b16 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.55); z-index:2;
}
.lgdkb .dirt {
  position:absolute; width:7%; height:5%; border-radius:50%; background:#9b6534;
  opacity:0; z-index:6;
}
.lgdkb .d1 { left:34%; bottom:22%; animation:dirtFly1 1.35s ease-out infinite; }
.lgdkb .d2 { left:47%; bottom:20%; animation:dirtFly2 1.35s ease-out infinite; }
.lgdkb .d3 { left:59%; bottom:22%; animation:dirtFly3 1.35s ease-out infinite; }
@keyframes dirtFly1 {
  0%,35% { opacity:0; transform:translate(0,0) scale(0.4); }
  43%    { opacity:1; }
  67%    { opacity:0; transform:translate(-25%, -70%) rotate(100deg) scale(1); }
  100%   { opacity:0; }
}
@keyframes dirtFly2 {
  0%,37% { opacity:0; transform:translate(0,0) scale(0.4); }
  45%    { opacity:1; }
  69%    { opacity:0; transform:translate(10%, -85%) rotate(130deg) scale(1); }
  100%   { opacity:0; }
}
@keyframes dirtFly3 {
  0%,39% { opacity:0; transform:translate(0,0) scale(0.4); }
  47%    { opacity:1; }
  71%    { opacity:0; transform:translate(30%, -65%) rotate(160deg) scale(0.9); }
  100%   { opacity:0; }
}
.lgdkb .treasure {
  position:absolute; width:18%; height:14%; left:41%; bottom:10%;
  border-radius:3px 3px 5px 5px;
  background:linear-gradient(#d99a28, #824a16);
  border:1px solid #f4c84b; box-shadow:0 0 7px rgba(255,205,70,0.7);
  opacity:0; z-index:3; animation:treasureReveal 4s ease-in-out infinite;
}
.lgdkb .treasure::before {
  content:""; position:absolute; left:-1px; right:-1px; top:-4px; height:5px;
  border-radius:50%; background:#d89a28; border:1px solid #f4c84b;
}
.lgdkb .shovel {
  position:absolute; width:42%; height:65%; left:30%; top:12%; z-index:8;
  transform-origin:50% 80%; animation:shovelDig 1.35s ease-in-out infinite;
}
.lgdkb .handle {
  position:absolute; width:8%; height:65%; left:46%; top:3px;
  border-radius:5px; background:linear-gradient(to right, #603016, #c17a39, #673419);
}
.lgdkb .grip {
  position:absolute; width:40%; height:9%; left:30%; top:5%;
  border-radius:8px; background:linear-gradient(#ce8640, #80421d);
}
.lgdkb .blade {
  position:absolute; width:42%; height:28%; left:29%; bottom:0;
  background:linear-gradient(135deg, #d9e0e3, #737d82 60%, #485157);
  border:1px solid #dfe5e7;
  clip-path:polygon(10% 0, 90% 0, 100% 65%, 50% 100%, 0 65%);
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.45));
}
@keyframes shovelDig {
  0%   { transform:rotate(-32deg) translate(0,0); }
  20%  { transform:rotate(-42deg) translate(-2%,0); }
  38%  { transform:rotate(15deg) translate(8%,10%); }
  48%  { transform:rotate(23deg) translate(10%,15%); }
  60%  { transform:rotate(5deg) translate(5%,7%); }
  76%  { transform:rotate(-28deg) translate(-2%,0); }
  100% { transform:rotate(-32deg) translate(0,0); }
}
@keyframes treasureReveal {
  0%,45% { opacity:0; transform:translateY(25%) scale(0.7); }
  55%    { opacity:0.8; transform:translateY(3%) scale(0.9); }
  63%    { opacity:1; transform:translateY(-8%) scale(1); }
  72%,100% { opacity:0; transform:translateY(25%) scale(0.7); }
}

/* ---------- 8.18 Memory ---------- */
#memori {
  position:relative; overflow:visible; color:#ffe066;
  border:1px solid rgba(255,224,102,0.25); display:flex; border-radius:12px;
  align-items:center; justify-content:center; padding:10px;
}
#memori i {
  display:inline-block; animation:colorMind 3s infinite linear;
  filter:drop-shadow(0 0 5px rgba(255,224,102,0.5)); position:relative; font-size:23px; z-index:2;
}
.memory-dot {
  position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:1px;
  z-index:1; opacity:0; pointer-events:none;
}
.memory-dot.dot-1 { background:#ff3d3d; animation:floatDot1 2s infinite 0s; }
.memory-dot.dot-2 { background:#3dff70; animation:floatDot2 2s infinite 0.6s; }
.memory-dot.dot-3 { background:#3db8ff; animation:floatDot3 2s infinite 1.2s; }
@keyframes colorMind {
  0%   { color:#ff3d3d; transform:scale(1); }
  33%  { color:#3dff70; transform:scale(1.1); }
  66%  { color:#3db8ff; transform:scale(1); }
  100% { color:#ff3d3d; transform:scale(1); }
}
@keyframes floatDot1 { 0%{ transform:translate(-50%, -50%) translate(0,0); opacity:0; } 50%{ opacity:1; } 100%{ transform:translate(-50%, -50%) translate(15px,-15px); opacity:0; } }
@keyframes floatDot2 { 0%{ transform:translate(-50%, -50%) translate(0,0); opacity:0; } 50%{ opacity:1; } 100%{ transform:translate(-50%, -50%) translate(-15px,-10px); opacity:0; } }
@keyframes floatDot3 { 0%{ transform:translate(-50%, -50%) translate(0,0); opacity:0; } 50%{ opacity:1; } 100%{ transform:translate(-50%, -50%) translate(5px,15px); opacity:0; } }

/* ---------- 8.19 Minesweeper ---------- */
#domin {
  position:relative; overflow:hidden; border:1px solid rgba(255,61,61,0.3);
}
.bomb-wrapper {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.bomb-icon {
  font-size:30px; color:#ff3d3d; filter:drop-shadow(0 0 8px rgba(255,61,61,0.6));
  animation:bomb-shake 3s infinite ease-in-out;
}
.bomb-count {
  position:absolute; font-family:'Courier New',monospace; font-weight:900;
  font-size:22px; color:white; text-shadow:0 0 10px #ff3d3d;
  z-index:2; pointer-events:none;
}
.bomb-count::after { content:''; animation:bomb-timer 3s infinite; }
.explosion-flash {
  position:absolute; inset:0; background:white; border-radius:50%;
  transform:scale(0); opacity:0; z-index:3; pointer-events:none;
  animation:bomb-explosion 3s infinite;
}
@keyframes bomb-shake {
  0%   { transform:scale(0); opacity:0; }
  5%   { transform:scale(1); opacity:1; }
  10%,20% { transform:scale(1) rotate(0); }
  25%  { transform:scale(1.1) rotate(5deg); }
  35%  { transform:scale(1.2) rotate(-5deg); }
  45%  { transform:scale(1.4) rotate(8deg); }
  55%  { transform:scale(1.6) rotate(-8deg); }
  60%  { transform:scale(1.8) rotate(0); }
  61%,100% { transform:scale(0); opacity:0; }
}
@keyframes bomb-timer {
  0%,10% { content:''; opacity:0; }
  15%,30% { content:'3'; opacity:1; }
  35%,50% { content:'2'; opacity:1; }
  55%,60% { content:'1'; opacity:1; }
  61%,100% { content:''; opacity:0; }
}
@keyframes bomb-explosion {
  0%,60% { transform:scale(0); opacity:0; }
  61%    { transform:scale(0.5); opacity:1; background:white; }
  63%    { transform:scale(2); opacity:1; background:#ffcc00; }
  65%    { transform:scale(3); opacity:1; background:white; }
  70%    { transform:scale(4); opacity:1; background:#ffaa00; }
  85%    { transform:scale(5); opacity:0; }
  100%   { transform:scale(0); opacity:0; }
}

/* ---------- 8.20 Music Game ---------- */
#musicgame {
  border-color:rgba(0,212,255,0.3); position:relative; overflow:hidden;
  background:rgba(0,10,30,0.5); display:flex; align-items:center; justify-content:center;
}
.music-icon-main {
  font-size:20px; color:#ff9500; z-index:2; text-shadow:0 0 10px #ff9500;
  animation:musicBounce 1.5s ease-in-out infinite; position:relative;
}
.music-visualizer {
  position:absolute; bottom:0; left:0; right:0; height:100%;
  display:flex; align-items:flex-end; justify-content:center; gap:3px; padding-bottom:5px;
  z-index:1; pointer-events:none;
}
.music-visualizer span {
  width:4px; background:linear-gradient(to top, #0077ff, #00d4ff); border-radius:2px;
  animation:eqBar 0.6s ease-in-out infinite alternate;
}
.music-visualizer span:nth-child(1) { height:40%; animation-delay:0.1s; }
.music-visualizer span:nth-child(2) { height:70%; animation-delay:0.3s; }
.music-visualizer span:nth-child(3) { height:55%; animation-delay:0.0s; }
.music-visualizer span:nth-child(4) { height:35%; animation-delay:0.4s; }
@keyframes eqBar {
  0%   { transform:scaleY(0.5); opacity:0.4; }
  100% { transform:scaleY(1); opacity:0.8; }
}
@keyframes musicBounce {
  0%,100% { transform:scale(1) rotate(-5deg); }
  50%     { transform:scale(1.1) rotate(5deg); }
}

/* ---------- 8.21 Né Đạn ---------- */
#nedan {
  position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center;
  background:radial-gradient(circle, #1b2735 0%, #090a0f 100%);
  border:1px solid rgba(255,255,255,0.1);
}
.plane-container { position:relative; width:100%; height:100%; }
.star {
  position:absolute; background-color:#ffffff; border-radius:50%; opacity:0.6; z-index:1;
}
.s1 { width:2px; height:2px; top:20%; left:15%; }
.s2 { width:3px; height:3px; top:15%; left:80%; opacity:0.8; }
.s3 { width:1px; height:1px; top:50%; left:10%; }
.s4 { width:2px; height:2px; top:80%; left:25%; }
.s5 { width:1px; height:1px; top:75%; left:85%; }
.s6 { width:2px; height:2px; top:40%; left:70%; opacity:0.4; }
.plane-img {
  width:45px; height:auto; position:absolute; top:50%; left:50%;
  margin-top:-22.5px; margin-left:-22.5px; z-index:2;
  animation:flyAndStop 2s infinite ease-in; filter:drop-shadow(0 0 8px rgba(255,255,255,0.2));
}
@keyframes flyAndStop {
  0%   { transform:translate(-250%,150%) rotate(-45deg); opacity:0; }
  12%  { transform:translate(15%,-15%) rotate(-45deg); opacity:1; }
  15%,27.5% { transform:translate(0,0) rotate(-45deg); opacity:1; }
  35%  { transform:translate(-15%,15%) rotate(-40deg); opacity:1; }
  50%  { transform:translate(300%,-250%) rotate(-60deg); opacity:0; }
  100% { transform:translate(300%,-250%) rotate(-60deg); opacity:0; }
}

/* ---------- 8.22 Neon Reflex ---------- */
#neonreflex {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, #073a52 0%, #03101f 55%, #000 100%);
  border-color:rgba(0,255,204,0.35);
}
.reflex-card {
  position:relative; width:34px; height:34px; border-radius:10px;
  background:rgba(0,255,204,0.08); border:1px solid rgba(0,255,204,0.55);
  box-shadow:0 0 12px rgba(0,255,204,0.45); display:flex; align-items:center; justify-content:center;
  animation:reflexPulse 1.2s infinite ease-in-out; z-index:2;
}
.reflex-word {
  font-family:Arial,sans-serif; font-size:10px; font-weight:900; letter-spacing:1px;
  animation:reflexColor 1.6s infinite steps(1);
}
.reflex-flash {
  position:absolute; inset:-20%;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.75) 50%, transparent 75%);
  transform:translateX(-120%); animation:reflexSweep 1.4s infinite; z-index:3; pointer-events:none;
}
.reflex-dot {
  position:absolute; width:5px; height:5px; border-radius:50%; opacity:0.9; z-index:1;
}
.reflex-dot.r1 { background:#ff2d45; top:8px; left:8px; animation:reflexDot1 1.1s infinite; }
.reflex-dot.r2 { background:#1688ff; top:8px; right:8px; animation:reflexDot2 1.1s infinite 0.15s; }
.reflex-dot.r3 { background:#12c86b; bottom:8px; left:8px; animation:reflexDot3 1.1s infinite 0.3s; }
.reflex-dot.r4 { background:#ffc400; bottom:8px; right:8px; animation:reflexDot4 1.1s infinite 0.45s; }
@keyframes reflexPulse {
  0%,100% { transform:scale(1) rotate(0deg); }
  45%     { transform:scale(1.08) rotate(-3deg); }
  70%     { transform:scale(0.96) rotate(3deg); }
}
@keyframes reflexColor {
  0%   { color:#ff2d45; text-shadow:0 0 8px #ff2d45; }
  25%  { color:#1688ff; text-shadow:0 0 8px #1688ff; }
  50%  { color:#12c86b; text-shadow:0 0 8px #12c86b; }
  75%  { color:#ffc400; text-shadow:0 0 8px #ffc400; }
}
@keyframes reflexSweep {
  0%,35% { transform:translateX(-120%); opacity:0; }
  45%    { opacity:1; }
  70%    { transform:translateX(120%); opacity:0; }
  100%   { transform:translateX(120%); opacity:0; }
}
@keyframes reflexDot1 { 0%,100% { transform:scale(0.7); opacity:0.35; } 50% { transform:scale(1.5); opacity:1; } }
@keyframes reflexDot2 { 0%,100% { transform:scale(0.7); opacity:0.35; } 50% { transform:scale(1.5); opacity:1; } }
@keyframes reflexDot3 { 0%,100% { transform:scale(0.7); opacity:0.35; } 50% { transform:scale(1.5); opacity:1; } }
@keyframes reflexDot4 { 0%,100% { transform:scale(0.7); opacity:0.35; } 50% { transform:scale(1.5); opacity:1; } }

/* ---------- 8.23 Nối Mạch ---------- */
.noimach-container {
  width:34px; height:28px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(77,255,136,0.12), rgba(77,255,136,0.035) 48%, transparent 75%),
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  overflow:hidden; --circuit:#4dff88; --circuit-bright:#8affb1;
  transition:transform 0.12s ease;
}
.noimach-container::before {
  content:""; position:absolute; width:65px; height:65px; left:-14px; top:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(77,255,136,0.14), rgba(77,255,136,0.055) 30%, transparent 68%);
  animation:noimachAmbient 3.5s ease-in-out infinite; pointer-events:none;
}
.noimach-container::after {
  content:""; position:absolute; left:-45%; top:0; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(150,255,180,0.12), transparent);
  transform:skewX(-18deg); animation:noimachSweep 3.2s ease-in-out infinite; pointer-events:none;
}
@keyframes noimachAmbient {
  0%,100% { transform:translate(-6px,-3px) scale(0.9); opacity:0.45; }
  50%     { transform:translate(6px,4px) scale(1.15); opacity:1; }
}
@keyframes noimachSweep {
  0%,25% { left:-45%; opacity:0; }
  38%    { opacity:1; }
  65%    { left:115%; opacity:0.8; }
  100%   { left:115%; opacity:0; }
}

.noimach-svg { width:34px; height:28px; display:block; overflow:visible; }
.noimach-path {
  fill:none; stroke:var(--circuit); stroke-width:2.8;
  stroke-linecap:round; stroke-linejoin:round; filter:url(#noimachGlow); opacity:0.95;
}
.noimach-path-glow {
  fill:none; stroke:var(--circuit); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round; opacity:0.18; filter:url(#noimachGlow);
}
.noimach-node {
  fill:var(--circuit); stroke:var(--circuit-bright); stroke-width:1;
  filter:url(#noimachGlow); animation:noimachNodePulse 1.8s ease-in-out infinite;
}
.noimach-node:nth-of-type(2) { animation-delay:0.9s; }
@keyframes noimachNodePulse {
  0%,100% { r:2.7; opacity:0.8; }
  50%     { r:3.4; opacity:1; }
}

.noimach-pulse {
  fill:#e9fff0; filter:url(#noimachGlow);
  offset-path:path("M4 14 L10 6 L16 22 L22 6 L28 22 L36 14");
  offset-distance:0%; animation:noimachPulse 2s linear infinite; opacity:0;
}
@keyframes noimachPulse {
  0%   { offset-distance:0%; opacity:0; }
  5%   { opacity:1; }
  90%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}

#noimach:hover .noimach-path {
  stroke:var(--circuit-bright);
  filter:drop-shadow(0 0 3px var(--circuit)) drop-shadow(0 0 7px var(--circuit));
}
#noimach:hover .noimach-node { fill:var(--circuit-bright); }
#noimach:active .noimach-container { transform:scale(0.9); }

/* ---------- 8.24 Phá Gạch ---------- */
.phagach {
  position:relative; width:52px; height:52px; overflow:hidden; pointer-events:none;
  border-radius:12px;
  background:linear-gradient(145deg, #1c2632, #0b1017) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.35) !important;
}
.impact-brick {
  position:absolute; left:28px; top:29px; width:19px; height:11px; border-radius:3px;
  background:linear-gradient(135deg, #c5d5e6, #8ca1ba 30%, #596f88 65%, #36485b);
  border-top:1px solid rgba(255,255,255,0.6); border-left:1px solid rgba(255,255,255,0.3);
  box-shadow:2px 3px 4px rgba(0,0,0,0.55);
  transform:perspective(50px) rotateX(6deg);
  animation:brickImpact 2.2s ease-in-out infinite;
}
.impact-brick::before {
  content:""; position:absolute; left:2px; right:2px; top:1px; height:2px;
  background:linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0.08));
}
.impact-brick::after {
  content:""; position:absolute; left:2px; right:1px; bottom:1px; height:3px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
}

.impact-ball {
  position:absolute; left:4px; top:3px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 28% 22%, #fff 0%, #fff 18%, #e5edf5 40%, #a3b0bd 70%, #536273);
  box-shadow:1px 2px 4px rgba(0,0,0,0.55), 0 0 7px rgba(255,255,255,0.65);
  z-index:4; animation:ballImpact 2.2s cubic-bezier(0.95,0.65,0.3,1) infinite;
}
.impact-trail {
  position:absolute; left:0; top:0; width:18px; height:4px; border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(220,235,250,0.12), rgba(255,255,255,0.75));
  filter:blur(0.7px); z-index:3; transform-origin:right center;
  animation:trailImpact 2.2s cubic-bezier(0.95,0.65,0.3,1) infinite;
}

.impact-brick i {
  position:absolute; left:7px; top:4px; width:4px; height:4px; border-radius:1px;
  background:linear-gradient(135deg, #d0deea, #8398b0 55%, #435568);
  box-shadow:1px 1px 2px rgba(0,0,0,0.5); opacity:0; z-index:5;
  animation:brickPiece 2.2s ease-out infinite;
}
.impact-brick i:nth-child(1) { --x:-13px; --y:-11px; }
.impact-brick i:nth-child(2) { --x:-2px; --y:-15px; }
.impact-brick i:nth-child(3) { --x:10px; --y:-10px; }
.impact-brick i:nth-child(4) { --x:14px; --y:1px; }
.impact-brick i:nth-child(5) { --x:11px; --y:12px; }
.impact-brick i:nth-child(6) { --x:-2px; --y:15px; }
.impact-brick i:nth-child(7) { --x:-14px; --y:10px; }
.impact-brick i:nth-child(8) { --x:-15px; --y:-2px; }

@keyframes ballImpact {
  0%   { left:4px; top:3px; opacity:1; transform:scale(1); }
  48%  { left:22px; top:21px; opacity:1; transform:scale(1); }
  58%  { left:28px; top:27px; opacity:1; transform:scale(0.9); }
  63%  { left:28px; top:27px; opacity:0; transform:scale(0.1); }
  100% { left:4px; top:3px; opacity:1; transform:scale(1); }
}
@keyframes trailImpact {
  0%   { left:-12px; top:-12px; opacity:0; transform:rotate(45deg) scaleX(0.15); }
  12%  { left:-6px; top:-6px; opacity:0.8; transform:rotate(45deg) scaleX(0.7); }
  35%  { left:10px; top:10px; opacity:0.65; transform:rotate(45deg) scaleX(1); }
  48%  { left:20px; top:20px; opacity:0.45; transform:rotate(45deg) scaleX(0.9); }
  58%  { left:25px; top:25px; opacity:0.1; transform:rotate(45deg) scaleX(0.5); }
  65%,100% { opacity:0; }
}
@keyframes brickImpact {
  0%,59% { opacity:1; transform:perspective(50px) rotateX(6deg) scale(1); }
  62%    { transform:perspective(50px) rotateX(6deg) scale(1.12,0.88); }
  68%,100% { opacity:0; transform:perspective(50px) rotateX(6deg) scale(0.7); }
}
@keyframes brickPiece {
  0%,59% { opacity:0; transform:translate3d(0,0,0) rotate(0deg) scale(0.6); }
  64%    { opacity:1; transform:translate3d(0,0,0) rotate(15deg) scale(1); }
  82%    { opacity:0.95; transform:translate3d(calc(var(--x)*0.65), calc(var(--y)*0.65), 0) rotate(120deg) scale(1); }
  100%   { opacity:0; transform:translate3d(var(--x), var(--y), 0) rotate(240deg) scale(0.7); }
}

/* ---------- 8.25 Quan Sát Chòm Sao ---------- */
.constellation-btn {
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 50% 38%, #274b9e 0%, #101b49 48%, #050816 100%);
}
.constellation-btn::before {
  content:""; position:absolute; inset:-20%; z-index:0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(178,220,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 76%, rgba(255,255,255,0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 82%, rgba(150,205,255,0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 52%, rgba(255,255,255,0.65) 0 1px, transparent 2px);
  opacity:0.75; animation:constellationBgTwinkle 2.4s ease-in-out infinite;
}
.constellation-btn::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 50% 48%, rgba(99,201,255,0.32), transparent 52%),
             linear-gradient(135deg, rgba(255,255,255,0.16), transparent 42%);
  pointer-events:none;
}
.constellation-icon {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
}
.constellation-ring {
  position:relative; width:48px; height:48px;
  animation:constellationSpin 3.2s linear infinite;
  filter:drop-shadow(0 0 8px rgba(117,207,255,0.85));
}
.constellation-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.constellation-lines polyline {
  fill:none; stroke:rgba(198,236,255,0.92); stroke-width:4;
  stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:120;
  animation:constellationLinePulse 1.8s ease-in-out infinite;
}
.c-star {
  position:absolute; width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 7px #fff, 0 0 14px #77d7ff, 0 0 22px rgba(94,174,255,0.8);
  transform:translate(-50%, -50%); animation:constellationStarBlink 1.4s ease-in-out infinite;
}
.c-star::before, .c-star::after {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  background:rgba(255,255,255,0.95); border-radius:999px;
}
.c-star::before { width:18px; height:2px; }
.c-star::after  { width:2px; height:18px; }
.c-star.s1 { left:50%; top:8%;  animation-delay:0s; }
.c-star.s2 { left:85%; top:25%; animation-delay:0.12s; }
.c-star.s3 { left:82%; top:65%; animation-delay:0.24s; }
.c-star.s4 { left:50%; top:92%; animation-delay:0.36s; }
.c-star.s5 { left:18%; top:65%; animation-delay:0.48s; }
.c-star.s6 { left:15%; top:25%; animation-delay:0.6s; }
.c-star.s7 { left:50%; top:8%;  animation-delay:0.72s; }
@keyframes constellationSpin { from{transform:rotate(0deg) scale(1);} to{transform:rotate(360deg) scale(1);} }
@keyframes constellationStarBlink {
  0%,100% { transform:translate(-50%, -50%) scale(0.88); opacity:0.78; }
  50%     { transform:translate(-50%, -50%) scale(1.18); opacity:1; }
}
@keyframes constellationLinePulse {
  0%,100% { opacity:0.42; stroke-dashoffset:0; }
  50%     { opacity:1; stroke-dashoffset:-28; }
}
@keyframes constellationBgTwinkle {
  0%,100% { opacity:0.52; transform:scale(1); }
  50%     { opacity:0.9; transform:scale(1.04); }
}

/* ---------- 8.26 Reversi ---------- */
#reversi i {
  display:block; width:28px; height:28px; margin:auto; border-radius:50%;
  position:relative; transform-style:preserve-3d;
  animation:reversi-flip 2.8s ease-in-out infinite;
}
#reversi i::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff6b7a, #e8354a);
  box-shadow:0 0 8px rgba(232,53,74,0.7), inset 0 2px 4px rgba(255,255,255,0.3);
  backface-visibility:hidden;
}
#reversi i::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #6db8ff, #2d8cf0);
  box-shadow:0 0 8px rgba(45,140,240,0.7), inset 0 2px 4px rgba(255,255,255,0.3);
  backface-visibility:hidden; transform:rotateY(180deg);
}
@keyframes reversi-flip {
  0%   { transform:rotateY(0deg); }
  35%  { transform:rotateY(0deg); }
  50%  { transform:rotateY(180deg); }
  85%  { transform:rotateY(180deg); }
  100% { transform:rotateY(360deg); }
}

/* ---------- 8.27 Siêu Đuổi Bắt ---------- */
#sieuduoibat {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, rgba(20,140,255,0.18), transparent 45%),
             linear-gradient(180deg, #020817, #03192e 60%, #01040a);
  border-color:rgba(80,170,255,0.35);
}
.chase-mini {
  position:relative; width:52px; height:52px; overflow:hidden;
}
.chase-sea {
  position:absolute; inset:0;
  background:repeating-linear-gradient(165deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 9px);
  opacity:0.35; animation:chaseSeaMove 1.4s linear infinite;
}
.chase-police {
  position:absolute; left:50%; top:50%; width:38px; height:24px;
  transform:translate(-50%, -50%) rotate(-18deg);
  animation:chaseBoatMove 2.2s ease-in-out infinite; z-index:3;
}
.chase-hull {
  position:absolute; inset:0; background:linear-gradient(135deg, #ffffff, #b7d8e8);
  clip-path:polygon(92% 50%, 68% 10%, 14% 20%, 0 50%, 14% 80%, 68% 90%);
  border:2px solid #1688ff; box-shadow:0 0 12px rgba(80,180,255,0.45), inset 0 0 5px rgba(255,255,255,0.6);
}
.chase-cabin {
  position:absolute; left:13px; top:7px; width:14px; height:10px; border-radius:3px;
  background:#dffaff; border:1px solid #006dff; z-index:4;
}
.chase-light {
  position:absolute; top:2px; width:6px; height:5px; border-radius:2px; z-index:6;
}
.chase-light.red  { left:13px; background:#ff3030; box-shadow:0 0 14px 7px rgba(255,40,40,0.9); animation:redBluePulse 0.55s infinite alternate; }
.chase-light.blue { left:21px; background:#208cff; box-shadow:0 0 14px 7px rgba(32,140,255,0.9); animation:redBluePulse 0.55s infinite alternate-reverse; }
.chase-beam {
  position:absolute; left:27px; top:8px; width:34px; height:10px;
  background:linear-gradient(90deg, rgba(120,210,255,0.35), transparent);
  clip-path:polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  animation:beamPulse 0.7s infinite alternate;
}
.chase-wake {
  position:absolute; left:4px; top:26px; width:28px; height:3px;
  background:rgba(255,255,255,0.7); border-radius:99px;
  box-shadow:-8px 6px 0 rgba(255,255,255,0.35), -12px -6px 0 rgba(255,255,255,0.25);
  animation:wakeMove 0.7s linear infinite;
}
@keyframes chaseSeaMove { from{transform:translateY(0);} to{transform:translateY(18px);} }
@keyframes chaseBoatMove {
  0%,100% { transform:translate(-50%, -50%) rotate(-18deg) translateY(0); }
  50%     { transform:translate(-50%, -50%) rotate(-13deg) translateY(-2px); }
}
@keyframes redBluePulse { from{opacity:0.35; transform:scale(0.85);} to{opacity:1; transform:scale(1.2);} }
@keyframes beamPulse { from{opacity:0.18;} to{opacity:0.55;} }
@keyframes wakeMove { from{transform:translateX(0); opacity:0.8;} to{transform:translateX(-10px); opacity:0.25;} }

/* ---------- 8.28 Sudoku ---------- */
.sudoku-icon {
  min-width:49px; width:49px; height:49px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; padding:2px; box-sizing:border-box; overflow:hidden; border-radius:8px;
  border:2px solid #fff; animation:sudokuBG 5s linear infinite; position:relative;
}
.sudoku-icon .cell {
  border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:8px; font-weight:bold;
}
@keyframes sudokuBG {
  0%   { background:#ff3b3b; }
  25%  { background:#ff5959; }
  50%  { background:#2196f3; }
  75%  { background:#1976d2; }
  100% { background:#ff3b3b; }
}
.sudoku-icon::after {
  content:'✏️'; position:absolute; top:50%; left:50%; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:10; pointer-events:none;
  animation:pencilMove 3.5s ease-in-out infinite; transform-origin:center;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
@keyframes pencilMove {
  0%   { transform:translate(-50%, -50%) rotate(45deg) translate(-10px, -10px); }
  25%  { transform:translate(-50%, -50%) rotate(135deg) translate(10px, -10px); }
  50%  { transform:translate(-50%, -50%) rotate(225deg) translate(10px, 10px); }
  75%  { transform:translate(-50%, -50%) rotate(315deg) translate(-10px, 10px); }
  100% { transform:translate(-50%, -50%) rotate(45deg) translate(-10px, -10px); }
}

/* ---------- 8.29 Tìm Bóng ---------- */
#magic {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 18%, rgba(255,215,0,0.22), transparent 38%),
             radial-gradient(circle at 50% 100%, #271050 0%, #0b1430 55%, #02040c 100%);
  border-color:rgba(255,215,0,0.35);
}
.shell-mini { position:relative; width:100%; height:100%; }
.shell-light {
  position:absolute; top:-14px; left:50%; width:42px; height:42px;
  transform:translateX(-50%); background:radial-gradient(circle, rgba(255,215,0,0.35), transparent 70%);
  animation:shellSpot 2.4s ease-in-out infinite; pointer-events:none;
}
.shell-ball-mini {
  position:absolute; width:9px; height:9px; left:21px; bottom:10px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff7a0, #ffd700 45%, #b86c00 100%);
  box-shadow:0 0 8px rgba(255,215,0,0.9), inset 0 -2px 3px rgba(0,0,0,0.28);
  z-index:1; animation:shellBall 3s ease-in-out infinite;
}
.shell-cup {
  position:absolute; bottom:8px; width:15px; height:21px;
  border-radius:4px 4px 7px 7px;
  background:linear-gradient(90deg, rgba(255,255,255,0.18), transparent 35%),
             linear-gradient(180deg, #2a6aaa 0%, #123a66 100%);
  clip-path:polygon(16% 12%, 84% 12%, 100% 100%, 0% 100%);
  box-shadow:0 3px 6px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.25);
  z-index:3;
}
.shell-cup::before {
  content:''; position:absolute; top:0; left:-2px; right:-2px; height:5px;
  border-radius:5px; background:linear-gradient(180deg, #3b8bd6, #184b7c);
  box-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.cup-a { left:5px; animation:cupAShuffle 3s ease-in-out infinite; }
.cup-b { left:19.5px; animation:cupBShuffle 3s ease-in-out infinite; }
.cup-c { left:34px; animation:cupCShuffle 3s ease-in-out infinite; }
@keyframes cupAShuffle {
  0%,15% { transform:translateX(0) translateY(0) rotate(0deg); z-index:3; }
  32%    { transform:translateX(14.5px) translateY(-7px) rotate(8deg); z-index:6; }
  48%    { transform:translateX(14.5px) translateY(0) rotate(0deg); z-index:3; }
  68%    { transform:translateX(29px) translateY(-6px) rotate(-7deg); z-index:6; }
  84%,100% { transform:translateX(29px) translateY(0) rotate(0deg); z-index:3; }
}
@keyframes cupBShuffle {
  0%,15% { transform:translateX(0) translateY(0) rotate(0deg); z-index:3; }
  32%    { transform:translateX(14.5px) translateY(6px) rotate(-6deg); z-index:2; }
  48%    { transform:translateX(14.5px) translateY(0) rotate(0deg); z-index:3; }
  68%    { transform:translateX(-14.5px) translateY(-7px) rotate(7deg); z-index:6; }
  84%,100% { transform:translateX(-14.5px) translateY(0) rotate(0deg); z-index:3; }
}
@keyframes cupCShuffle {
  0%,15% { transform:translateX(0) translateY(0) rotate(0deg); z-index:3; }
  32%    { transform:translateX(-29px) translateY(5px) rotate(0deg); z-index:2; }
  48%    { transform:translateX(-29px) translateY(0) rotate(0deg); z-index:3; }
  68%    { transform:translateX(-14.5px) translateY(6px) rotate(-8deg); z-index:2; }
  84%,100% { transform:translateX(-14.5px) translateY(0) rotate(0deg); z-index:3; }
}
.shell-question {
  position:absolute; top:5px; right:5px; font-family:Arial,sans-serif; font-size:10px;
  font-weight:900; color:#ffd700; text-shadow:0 0 8px #ffd700;
  animation:shellQuestion 3s ease-in-out infinite; z-index:5;
}
.shell-spark {
  position:absolute; width:3px; height:3px; border-radius:50%; background:#ffd700;
  box-shadow:0 0 7px #ffd700; opacity:0; z-index:4;
}
.shell-spark.s1 { top:11px; left:9px; animation:shellSpark 1.8s infinite 0.1s; }
.shell-spark.s2 { top:14px; right:10px; animation:shellSpark 1.8s infinite 0.55s; }
.shell-spark.s3 { bottom:10px; left:24px; animation:shellSpark 1.8s infinite 1s; }
@keyframes shellSpot { 0%,100% { transform:translateX(-50%) scale(1); opacity:0.45; } 50% { transform:translateX(-50%) scale(1.25); opacity:0.8; } }
@keyframes shellBall {
  0%,14% { opacity:1; transform:translateY(-10px) scale(1); }
  18%,72% { opacity:0; transform:translateY(0) scale(0.65); }
  78%,86% { opacity:0.35; transform:translateX(13px) translateY(-2px) scale(0.85); }
  92%,100% { opacity:1; transform:translateX(13px) translateY(-10px) scale(1.05); }
}
@keyframes shellQuestion {
  0%,65% { opacity:0; transform:scale(0.5) rotate(-15deg); }
  75%    { opacity:1; transform:scale(1.25) rotate(8deg); }
  100%   { opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes shellSpark { 0%,100% { opacity:0; transform:scale(0.4); } 50% { opacity:1; transform:scale(1.5); } }

/* ---------- 8.30 Trượt Tuyết ---------- */
.snow-slide-btn {
  position:relative; width:52px; height:52px; min-width:52px; min-height:52px; max-width:52px; max-height:52px;
  padding:0; overflow:hidden; border-radius:12px;
  background:radial-gradient(circle at 30% 18%, rgba(255,255,255,0.95), transparent 24%),
             linear-gradient(160deg, #bff4ff 0%, #eaffff 48%, #b7eaff 100%);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.68), 0 6px 14px rgba(0,80,120,0.2);
}
.snow-scene { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.snow-track {
  position:absolute; left:-20%; bottom:8px; width:145%; height:16px; border-radius:50%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 18%, rgba(118,222,255,0.65) 48%, rgba(255,255,255,0.9) 80%, transparent 100%);
  transform:rotate(-10deg); opacity:0.85; animation:snowTrackMove 1.15s linear infinite;
}
@keyframes snowTrackMove { 0%{transform:translateX(0) rotate(-10deg);} 100%{transform:translateX(-14px) rotate(-10deg);} }
.snowflakes-mini span {
  position:absolute; width:4px; height:4px; border-radius:50%; background:white;
  opacity:0.9; box-shadow:0 0 6px rgba(255,255,255,0.8);
  animation:snowMiniFall 1.8s linear infinite;
}
.snowflakes-mini span:nth-child(1) { left:12px; top:-6px; animation-delay:0s; }
.snowflakes-mini span:nth-child(2) { left:34px; top:-8px; width:3px; height:3px; animation-delay:0.45s; }
.snowflakes-mini span:nth-child(3) { left:49px; top:-7px; width:3.5px; height:3.5px; animation-delay:0.9s; }
@keyframes snowMiniFall {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  20%  { opacity:0.9; }
  100% { transform:translateY(70px) translateX(-12px); opacity:0; }
}
.skier-mini {
  position:absolute; left:15px; top:12px; width:26px; height:32px;
  transform-origin:50% 80%; animation:skierSlide 1.25s ease-in-out infinite;
}
@keyframes skierSlide { 0%,100% { transform:translateX(-2px) translateY(1px) rotate(-8deg); } 50% { transform:translateX(3px) translateY(-1px) rotate(-13deg); } }
.skier-head {
  position:absolute; left:8px; top:0; width:13px; height:13px; border-radius:50%;
  background:#ffd1a5; box-shadow:inset -2px -2px 0 rgba(165,95,60,0.18); z-index:4;
}
.beanie {
  position:absolute; left:-1px; top:-5px; width:15px; height:9px;
  border-radius:10px 10px 4px 4px; background:linear-gradient(#12617a, #073b50); overflow:visible;
}
.beanie::before {
  content:""; position:absolute; left:1px; right:1px; bottom:-2px; height:3px;
  border-radius:999px; background:#ffffff;
}
.beanie span {
  position:absolute; right:-2px; top:-3px; width:5px; height:5px; border-radius:50%;
  background:#ffffff; box-shadow:0 0 5px rgba(255,255,255,0.8);
}
.face-dot { position:absolute; right:2px; top:6px; width:2px; height:2px; border-radius:50%; background:#19384a; }
.jacket {
  position:absolute; left:6px; top:12px; width:15px; height:17px;
  border-radius:6px 6px 5px 5px; background:linear-gradient(145deg, #ff6c84, #b91542);
  box-shadow:inset -2px -2px 0 rgba(90,0,30,0.18), 0 2px 4px rgba(0,60,90,0.22);
  z-index:3;
}
.jacket::after {
  content:""; position:absolute; left:7px; top:2px; width:1.5px; height:13px;
  border-radius:999px; background:rgba(255,255,255,0.55);
}
.scarf {
  position:absolute; left:3px; top:13px; width:17px; height:5px; border-radius:999px;
  background:#ffd166; z-index:5;
}
.scarf::after {
  content:""; position:absolute; left:-10px; top:1px; width:13px; height:4px;
  border-radius:999px 0 0 999px; background:#ffd166; transform-origin:right center;
  animation:scarfWave 0.7s ease-in-out infinite;
}
@keyframes scarfWave { 0%,100% { transform:rotate(8deg); } 50% { transform:rotate(-14deg); } }
.leg {
  position:absolute; width:5px; height:13px; border-radius:999px; background:#17354a; z-index:2;
}
.leg-left  { left:8px; top:25px; transform:rotate(18deg); }
.leg-right { left:16px; top:25px; transform:rotate(-18deg); }
.ski {
  position:absolute; width:24px; height:4px; border-radius:999px; background:#073e52;
  z-index:1; box-shadow:inset 0 1px 0 rgba(255,255,255,0.65);
}
.ski-left  { left:1px; top:37px; transform:rotate(-10deg); }
.ski-right { left:7px; top:42px; transform:rotate(-10deg); }
.ski-pole {
  position:absolute; width:2px; height:24px; border-radius:999px; background:#063e52;
  z-index:0; opacity:0.85;
}
.pole-left  { left:3px; top:15px; transform:rotate(24deg); animation:poleMoveLeft 1.25s ease-in-out infinite; }
.pole-right { right:1px; top:16px; transform:rotate(-18deg); animation:poleMoveRight 1.25s ease-in-out infinite; }
@keyframes poleMoveLeft { 0%,100% { transform:rotate(22deg) translateY(0); } 50% { transform:rotate(32deg) translateY(2px); } }
@keyframes poleMoveRight { 0%,100% { transform:rotate(-18deg) translateY(0); } 50% { transform:rotate(-28deg) translateY(2px); } }
.snow-slide-btn::after {
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.75) 48%, transparent 58%, transparent 100%);
  transform:translateX(-70%) rotate(8deg); animation:iceShine 2.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes iceShine {
  0%,45% { transform:translateX(-75%) rotate(8deg); opacity:0; }
  60%    { opacity:0.9; }
  100%   { transform:translateX(75%) rotate(8deg); opacity:0; }
}

/* ---------- 8.31 Truy Tìm Số & Ngăn Cản Đến Đích (Barricade) ---------- */
/* Logo Barri – nền và họa tiết */
.logo-barri {
  width:52px; height:52px; position:relative; overflow:hidden;
  background:rgba(250,242,242,0.7); border:1px solid #e5e1d8; border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(0,0,0,0.12);
}
.logo-barri::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 12px 12px, #ece8de 1px, transparent 1.2px),
             radial-gradient(circle at 38px 38px, #ece8de 1px, transparent 1.2px);
  opacity:0.45;
}

/* Ball (trái banh) */
.ball {
  position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin-left:-6px; margin-top:-6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffb0aa 0%, #ff5f56 35%, #f44336 65%, #b71c1c 100%);
  box-shadow:0 0 5px rgba(244,67,54,0.55), inset -1px -1px 2px rgba(0,0,0,0.25);
  z-index:5; animation:shake 2.8s infinite;
}

/* Walls */
.wall {
  position:absolute; background:linear-gradient(180deg, #64b5f6, #1e88e5);
  border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 0 2px rgba(0,0,0,0.2);
  opacity:0;
}
.top    { width:34px; height:4px; left:9px; top:6px;    animation:topWall 2.8s infinite; }
.right  { width:4px; height:34px; right:5px; top:9px;  animation:rightWall 2.8s infinite; }
.bottom { width:34px; height:4px; left:9px; bottom:6px; animation:bottomWall 2.8s infinite; }
.left   { width:4px; height:34px; left:7px; top:9px;   animation:leftWall 2.8s infinite; }

/* Shockwave */
.wave {
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin-left:-7px; margin-top:-7px; border:2px solid #42a5f5; border-radius:50%;
  opacity:0; z-index:2; animation:wave 2.8s infinite;
}

/* Keyframes cho Barricade */
@keyframes topWall {
  0%,5%   { opacity:0; transform:translateY(-20px); }
  18%     { opacity:1; transform:translateY(2px); }
  22%,100% { opacity:1; transform:translateY(0); }
}
@keyframes rightWall {
  0%,24%  { opacity:0; transform:translateX(20px); }
  37%     { opacity:1; transform:translateX(-2px); }
  41%,100% { opacity:1; transform:translateX(0); }
}
@keyframes bottomWall {
  0%,43%  { opacity:0; transform:translateY(20px); }
  56%     { opacity:1; transform:translateY(-2px); }
  60%,100% { opacity:1; transform:translateY(0); }
}
@keyframes leftWall {
  0%,62%  { opacity:0; transform:translateX(-20px); }
  75%     { opacity:1; transform:translateX(2px); }
  79%,100% { opacity:1; transform:translateX(0); }
}
@keyframes shake {
  0%,79% { transform:translate(0,0); }
  82%    { transform:translate(-1px,0); }
  85%    { transform:translate(1px,0); }
  88%    { transform:translate(-1px,0); }
  91%    { transform:translate(1px,0); }
  95%,100% { transform:translate(0,0); }
}
@keyframes wave {
  0%,79% { opacity:0; transform:translate(-50%, -50%) scale(0.2); }
  80%    { opacity:0.7; }
  92%    { opacity:0; transform:translate(-50%, -50%) scale(2); }
  100%   { opacity:0; transform:translate(-50%, -50%) scale(0.2); }
}

/* Phần Truy Tìm Số (giữ nguyên) */
.find-logo {
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:none;
  background:linear-gradient(135deg, #60a5fa, #5eead4); border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 12px rgba(94,234,212,0.18);
}
.find-logo-number {
  position:absolute; left:50%; top:50%; color:#06121d; font-size:35px; line-height:1;
  font-weight:950; font-variant-numeric:tabular-nums;
  transform:translate(-50%, -50%); text-shadow:0 3px 3px rgba(255,255,255,0.15);
  user-select:none; pointer-events:none; will-change:transform,opacity;
}
#truytimso .find-logo-number {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
#truytimso .find-logo-number::before {
  content:"1"; font-size:30px; font-weight:950; color:whitesmoke;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
             0 0 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
  animation:findNumberChange 5s linear infinite;
}
@keyframes findNumberChange {
  0%   { content:"1"; }  3%   { content:"2"; }  6%   { content:"3"; }  9%   { content:"4"; }
  12%  { content:"5"; } 15%  { content:"6"; } 18%  { content:"7"; } 21%  { content:"8"; }
  24%  { content:"9"; } 27%  { content:"10"; } 30%  { content:"11"; } 33%  { content:"12"; }
  36%  { content:"13"; } 39%  { content:"14"; } 42%  { content:"15"; } 45%  { content:"16"; }
  48%  { content:"17"; } 51%  { content:"18"; } 54%  { content:"19"; } 57%  { content:"20"; }
  60%  { content:"21"; } 63%  { content:"22"; } 66%  { content:"23"; } 69%  { content:"24"; }
  72%  { content:"25"; } 75%  { content:"26"; } 78%  { content:"27"; } 81%  { content:"28"; }
  84%  { content:"29"; } 87%  { content:"30"; } 90%  { content:"1"; } 100% { content:"1"; }
}

/* ---------- 8.32 UNO ---------- */
#unogame {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, rgba(255,215,0,0.22), transparent 42%),
             linear-gradient(135deg, #16051f, #2a083d 55%, #0d0417);
  border:2px solid rgba(255,215,0,0.45);
  box-shadow:inset 0 0 16px rgba(255,255,255,0.08), 0 0 16px rgba(255,215,0,0.22);
}
#unogame::before {
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(transparent, rgba(255,0,80,0.22), rgba(255,215,0,0.24), rgba(0,180,255,0.22), transparent);
  animation:unoAuraSpin 3.8s linear infinite; opacity:0.9;
}
#unogame::after {
  content:''; position:absolute; inset:3px; border-radius:inherit;
  background:rgba(0,0,0,0.08); pointer-events:none;
}
.uno-fan-mini {
  position:relative; width:56px; height:46px; z-index:2;
  display:flex; align-items:center; justify-content:center; margin:auto;
}
.uno-card-mini {
  position:absolute; left:50%; top:50%; width:23px; height:34px; border-radius:5px;
  background:#111; border:2px solid #fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
  transform-origin:50% 92%; will-change:transform,opacity; opacity:0; overflow:hidden;
}
.uno-card-mini::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,0.035) 4px 8px);
}
.uno-card-mini::after {
  content:''; position:absolute; left:50%; top:50%; width:21px; height:13px;
  border-radius:50%; background:#e53935; border:1.5px solid #fff;
  transform:translate(-50%, -50%) rotate(-18deg);
  box-shadow:0 0 7px rgba(229,57,53,0.55);
}
.uno-card-mini b {
  position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%, -50%) rotate(-18deg);
  font-family:'Tahoma',sans-serif; font-size:0.35rem; letter-spacing:0.1px;
  color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
.uno-card-mini.c1 { z-index:1; animation:unoCard1 4s ease-in-out infinite; }
.uno-card-mini.c2 { z-index:2; animation:unoCard2 4s ease-in-out infinite; }
.uno-card-mini.c3 { z-index:3; animation:unoCard3 4s ease-in-out infinite; }
.uno-card-mini.c4 { z-index:4; animation:unoCard4 4s ease-in-out infinite; }
.uno-card-mini.c5 { z-index:5; animation:unoCard5 4s ease-in-out infinite; }
.uno-spark {
  position:absolute; width:4px; height:4px; border-radius:50%; background:#ffd700;
  box-shadow:0 0 8px #ffd700; opacity:0; z-index:4;
}
.uno-spark.us1 { left:6px; top:4px; animation:unoSpark 3s ease-in-out infinite; }
.uno-spark.us2 { right:7px; top:8px; animation:unoSpark 3s ease-in-out infinite 0.22s; }
.uno-spark.us3 { left:26px; bottom:1px; animation:unoSpark 3s ease-in-out infinite 0.42s; }
@keyframes unoAuraSpin { to{transform:rotate(360deg);} }
@keyframes unoCard1 {
  0%,12% { opacity:1; transform:translate(-50%, -50%) rotate(0deg) scale(1); }
  20%,32% { opacity:1; transform:translate(calc(-50% - 12px), calc(-50% + 1px)) rotate(-7deg) scale(1); }
  40%,52% { opacity:1; transform:translate(calc(-50% - 22px), calc(-50% + 2px)) rotate(-12deg) scale(0.99); }
  60%,72% { opacity:1; transform:translate(calc(-50% - 30px), calc(-50% + 4px)) rotate(-18deg) scale(0.97); }
  80%,100% { opacity:1; transform:translate(calc(-50% - 36px), calc(-50% + 6px)) rotate(-24deg) scale(0.95); }
}
@keyframes unoCard2 {
  0%,14% { opacity:0; transform:translate(calc(-50% + 68px), calc(-50% - 3px)) rotate(18deg) scale(0.72); }
  22%    { opacity:1; transform:translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(2deg) scale(1.06); }
  32%    { opacity:1; transform:translate(calc(-50% + 12px), calc(-50% + 1px)) rotate(7deg) scale(1); }
  40%,52% { opacity:1; transform:translate(calc(-50% + 0px), calc(-50% + 2px)) rotate(0deg) scale(0.99); }
  60%,72% { opacity:1; transform:translate(calc(-50% - 10px), calc(-50% + 4px)) rotate(-7deg) scale(0.97); }
  80%,100% { opacity:1; transform:translate(calc(-50% - 18px), calc(-50% + 6px)) rotate(-12deg) scale(0.95); }
}
@keyframes unoCard3 {
  0%,34% { opacity:0; transform:translate(calc(-50% + 68px), calc(-50% - 3px)) rotate(18deg) scale(0.72); }
  42%    { opacity:1; transform:translate(calc(-50% + 6px), calc(-50% - 1px)) rotate(3deg) scale(1.06); }
  52%    { opacity:1; transform:translate(calc(-50% + 22px), calc(-50% + 2px)) rotate(12deg) scale(0.99); }
  60%,72% { opacity:1; transform:translate(calc(-50% + 10px), calc(-50% + 4px)) rotate(7deg) scale(0.97); }
  80%,100% { opacity:1; transform:translate(calc(-50% + 0px), calc(-50% + 6px)) rotate(0deg) scale(0.95); }
}
@keyframes unoCard4 {
  0%,54% { opacity:0; transform:translate(calc(-50% + 68px), calc(-50% - 3px)) rotate(18deg) scale(0.72); }
  62%    { opacity:1; transform:translate(calc(-50% + 12px), calc(-50% + 0px)) rotate(5deg) scale(1.05); }
  72%    { opacity:1; transform:translate(calc(-50% + 30px), calc(-50% + 4px)) rotate(18deg) scale(0.97); }
  80%,100% { opacity:1; transform:translate(calc(-50% + 18px), calc(-50% + 6px)) rotate(12deg) scale(0.95); }
}
@keyframes unoCard5 {
  0%,74% { opacity:0; transform:translate(calc(-50% + 68px), calc(-50% - 3px)) rotate(18deg) scale(0.72); }
  82%    { opacity:1; transform:translate(calc(-50% + 18px), calc(-50% + 1px)) rotate(7deg) scale(1.05); }
  92%,100% { opacity:1; transform:translate(calc(-50% + 36px), calc(-50% + 6px)) rotate(24deg) scale(0.95); }
}
@keyframes unoSpark {
  0%,48% { opacity:0; transform:scale(0); }
  62%    { opacity:1; transform:scale(1.4); }
  82%,100% { opacity:0; transform:scale(0); }
}

/* ---------- 8.33 Word Game ---------- */
#word-game { animation:tilt 4s ease-in-out infinite; }
.tile {
  width:75%; height:75%; border-radius:10px;
  background:linear-gradient(145deg, #f9e784 0%, #e8c840 60%, #c9a520 100%);
  box-shadow:0 1px 0 #a07c10, 0 2px 0 #8a6a0c, 0 4px 0 #6e530a, 0 5px 8px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center; position:relative;
  transform:perspective(180px) rotateX(12deg) rotateY(-10deg) rotate(-4deg);
  transition:box-shadow 0.1s, transform 0.1s;
}
#word-game:active .tile {
  box-shadow:0 0px 0 #a07c10, 0 1px 0 #8a6a0c, 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.4);
  transform:perspective(180px) rotateX(12deg) rotateY(-10deg) rotate(-4deg) translateY(3px);
}
.tile::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:repeating-linear-gradient(112deg, transparent 0px, rgba(255,255,255,0.07) 1px, transparent 2px, transparent 6px);
  pointer-events:none;
}
.tile-letter {
  font-family:'Georgia','Times New Roman',serif; font-size:26px; font-weight:700;
  color:#3a2800; line-height:1; letter-spacing:-0.5px; text-shadow:0 1px 0 rgba(255,255,255,0.3);
  opacity:1; transform:translateY(0);
}
.tile-letter.pop { animation:popIn 0.7s cubic-bezier(0.22,1.4,0.36,1) forwards; }
@keyframes popIn {
  0%   { transform:translateY(10px) scale(0.6); opacity:0; }
  55%  { transform:translateY(-3px) scale(1.15); opacity:1; }
  80%  { transform:translateY(1px) scale(0.97); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes tilt {
  0%,100% { transform:rotate(0deg) scale(1); }
  2%      { transform:rotate(-7deg) scale(1.06); }
  4%      { transform:rotate(7deg) scale(1.06); }
  6%      { transform:rotate(-4deg) scale(1.03); }
  8%      { transform:rotate(4deg) scale(1.03); }
  10%     { transform:rotate(0deg) scale(1); }
}

/* ---------- 8.34 Xếp Bóng Gai ---------- */
#xepbonggai.xbg-btn {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 25% 18%, rgba(255,79,216,0.25), transparent 34%),
             radial-gradient(circle at 80% 20%, rgba(100,225,255,0.18), transparent 34%),
             linear-gradient(145deg, #140720, #261144 55%, #09040f);
  border-color:rgba(255,255,255,0.12);
}
.xbg-icon { position:relative; width:100%; height:100%; overflow:hidden; }
.xbg-board {
  position:absolute; left:8px; top:8px; width:36px; height:36px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:4px; transform:rotate(-4deg); z-index:1;
}
.xbg-cell {
  border-radius:6px; background:linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 8px rgba(255,255,255,0.05), 0 0 4px rgba(0,0,0,0.2);
}
.xbg-swap-glow {
  position:absolute; left:50%; top:50%; width:18px; height:18px;
  transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  animation:xbgGlowPulse 1.8s ease-in-out infinite; z-index:0;
}
.xbg-ball {
  position:absolute; left:11px; top:11px; width:14px; height:14px; z-index:3;
  clip-path:polygon(50% 0%, 58% 13%, 72% 7%, 78% 21%, 93% 25%, 88% 40%, 100% 50%, 88% 60%, 93% 75%, 78% 79%, 72% 93%, 58% 87%, 50% 100%, 42% 87%, 28% 93%, 22% 79%, 7% 75%, 12% 60%, 0% 50%, 12% 40%, 7% 25%, 22% 21%, 28% 7%, 42% 13%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,0.42), inset 0 -4px 6px rgba(0,0,0,0.3), 0 0 8px rgba(255,255,255,0.16);
}
.xbg-ball::before {
  content:""; position:absolute; left:3px; top:2px; width:4px; height:4px;
  border-radius:50%; background:rgba(255,255,255,0.7); filter:blur(0.2px);
}
.xbg-ball-a { background:radial-gradient(circle at 32% 25%, #fff, #ff7be5 18%, #ff35c9 48%, #8a0b6e 100%); animation:xbgMoveA 3.2s ease-in-out infinite; }
.xbg-ball-b { background:radial-gradient(circle at 32% 25%, #fff, #8cfdff 18%, #22dfff 48%, #056a9f 100%); animation:xbgMoveB 3.2s ease-in-out infinite; }
.xbg-ball-c { background:radial-gradient(circle at 32% 25%, #fff4b0 12%, #ffd93b 38%, #d98a00 70%, #684000 100%); animation:xbgMoveC 3.2s ease-in-out infinite; }
@keyframes xbgMoveA {
  0%,18% { transform:translate(0,0) scale(1); }
  25%,43% { transform:translate(16px,0) scale(1.08); }
  50%,68% { transform:translate(16px,16px) scale(1); }
  75%,93% { transform:translate(0,16px) scale(1.08); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes xbgMoveB {
  0%,18% { transform:translate(16px,0) scale(1); }
  25%,43% { transform:translate(16px,16px) scale(1.08); }
  50%,68% { transform:translate(0,16px) scale(1); }
  75%,93% { transform:translate(0,0) scale(1.08); }
  100% { transform:translate(16px,0) scale(1); }
}
@keyframes xbgMoveC {
  0%,18% { transform:translate(0,16px) scale(1); }
  25%,43% { transform:translate(0,0) scale(1.08); }
  50%,68% { transform:translate(16px,0) scale(1); }
  75%,93% { transform:translate(16px,16px) scale(1.08); }
  100% { transform:translate(0,16px) scale(1); }
}
@keyframes xbgGlowPulse {
  0%,100% { opacity:0.35; transform:translate(-50%, -50%) scale(0.9); }
  50%     { opacity:0.7; transform:translate(-50%, -50%) scale(1.2); }
}

/* ---------- 8.35 Tìm Màu Lạc ---------- */
.timmaulac-container {
  position:relative; width:30px; height:30px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px; align-items:center; justify-items:center;
}
.color-cell {
  width:8px; height:8px; border-radius:2px; background:#5ec8ff;
  animation:cellPulse 2s infinite;
}
.color-cell.odd {
  background:#ff5d8f; animation:oddPulse 0.9s infinite;
  box-shadow:0 0 8px #ff5d8f;
}
@keyframes oddPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.45); }
}
@keyframes cellPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.7; }
}

/* ---------- 8.36 Đẩy Hộp ---------- */
#dayhop {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #de3333 0%, #6e6a69 100%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 0 18px rgba(0,0,0,0.25), inset 0 0 10px rgba(255,255,255,0.05);
}
.pushbox-icon {
  position:relative; width:52px; height:52px; transform:scale(0.94); transform-origin:center;
}
.pb-floor {
  position:absolute; left:8px; top:8px; width:36px; height:36px;
}
.pb-target {
  position:absolute; width:12px; height:12px; border:3px solid #2ecc71; border-radius:50%;
  left:35px; top:28px; box-shadow:0 0 8px rgba(46,204,113,0.75);
  animation:pbGoal 2.8s infinite;
}
.pb-box {
  position:absolute; width:14px; height:14px; left:22px; top:22px; border-radius:3px;
  background:linear-gradient(#d89b59, #a86834);
  display:flex; justify-content:center; align-items:center;
  font-size:9px; font-weight:900; color:#e53935;
  box-shadow:0 2px 4px rgba(0,0,0,0.35);
  animation:pbPush 2.8s infinite;
}
.pb-box span { line-height:1; }
.pb-player {
  position:absolute; width:13px; height:19px; left:10px; top:27px;
  animation:pbWalk 2.8s infinite;
}
.pb-player .head {
  width:8px; height:8px; border-radius:50%; background:#ffd3b2; margin:auto;
}
.pb-player .body {
  width:12px; height:10px; margin:auto; background:#3b82f6; border-radius:5px;
}
@keyframes pbWalk {
  0%,20% { left:10px; }
  45%    { left:20px; }
  55%    { left:20px; transform:scale(0.96); }
  80%    { left:20px; }
  100%   { left:10px; transform:none; }
}
@keyframes pbPush {
  0%,40% { left:22px; }
  60%,85% { left:31px; }
  100%   { left:22px; }
}
@keyframes pbGoal {
  0%,58% { box-shadow:0 0 0 transparent; transform:scale(1); }
  65%    { box-shadow:0 0 10px rgba(46,204,113,0.9), 0 0 18px rgba(46,204,113,0.75); transform:scale(1.18); }
  100%   { transform:scale(1); }
}

#ganangdong{
    padding: 0;
    overflow: hidden;
}
.logo-chick{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: inherit;
    display:block;
}