.dong-choi .pk5{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,2.4vw,32px);width:100%;max-width:1080px;padding:26px clamp(10px,2.4vw,30px) 30px;border-radius:26px;background:radial-gradient(80% 90% at 50% 35%,#1f5a46a6,#11372cb3 60%,#0a241dc7);border:1px solid #e8c77852;box-shadow:inset 0 1px #ffffff12,inset 0 0 60px #0007,0 24px 44px #0009}.dong-choi .pk5:before{content:"";position:absolute;z-index:-1;inset:9px;border-radius:19px;border:1px dashed #e8c77838;pointer-events:none}.dong-choi .pk5:after{content:"";position:absolute;z-index:-1;left:20%;right:20%;top:-10%;height:60%;background:radial-gradient(closest-side,#f6dd9a1f,#f6dd9a00);pointer-events:none}.dong-choi .pk5-hand{position:relative;display:grid;justify-items:center;gap:12px;padding:8px 4px 20px;border-radius:18px;transition:background-color .3s,box-shadow .3s}.dong-choi .pk5-hand.win{background:radial-gradient(70% 60% at 50% 55%,#49d6b02b,#49d6b000)}.dong-choi .pk5-label{display:flex;align-items:baseline;gap:10px;margin:0;padding:4px 14px;border-radius:999px;background:#071b26a6;border:1px solid #e8c77838;font-size:15px}.dong-choi .pk5-hand.win .pk5-label{border:2px solid var(--dc-jade)}.dong-choi .pk5-label strong{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dc-jade)}.dong-choi .pk5-name{font-weight:700;color:var(--gold);min-height:1.2em}.dong-choi .pk5-name:empty{display:none}.dong-choi .pk5-hand.win .pk5-name:after{content:" (thắng)";font-weight:600;color:var(--dc-jade)}.dong-choi .pk5-fan{container-type:inline-size;display:flex;justify-content:center;width:100%;padding:12px 0 8px;perspective:900px}.dong-choi .pk5-card{--w: min(116px, 26cqi);position:relative;width:var(--w);height:calc(var(--w) * 1.4);margin-left:calc(var(--w) * -.36);transform:rotate(calc(var(--i) * 5deg)) translateY(calc(max(var(--i),-1 * var(--i))*6px));transform-origin:50% 120%;transition:transform .3s ease}.dong-choi .pk5-card:first-child{margin-left:0}.dong-choi .pk5-inner{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .36s cubic-bezier(.3,.7,.3,1);transition-delay:calc(var(--d) * 50ms)}.dong-choi .pk5.up .pk5-inner{transform:rotateY(0)}.dong-choi .pk5-face{position:absolute;inset:0;border-radius:calc(var(--w) * .1);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.dong-choi .pk5-front{background:linear-gradient(160deg,#fffdf6,#f6f1e2 55%,#ebe3cd);color:#10222c;box-shadow:inset 0 0 0 calc(var(--w) * .045) #fbf8ef,inset 0 0 0 calc(var(--w) * .045 + 1px) #c9b78a73,inset 0 0 0 1px #00000014,0 14px 24px #000a,0 3px 6px #0006}.dong-choi .pk5-card.red .pk5-front{color:#b02a17}.dong-choi .pk5-r{position:absolute;left:calc(var(--w) * .1);top:calc(var(--w) * .08);font-size:calc(var(--w) * .27);font-weight:700;line-height:1}.dong-choi .pk5-s{position:absolute;left:calc(var(--w) * .11);top:calc(var(--w) * .37);font-size:calc(var(--w) * .2);line-height:1}.dong-choi .pk5-big{position:absolute;right:calc(var(--w) * .1);bottom:calc(var(--w) * .06);font-size:calc(var(--w) * .46);line-height:1;opacity:.92}.dong-choi .pk5-back{transform:rotateY(180deg);background:#0d3442;border:3px solid #f6f1e2;box-shadow:0 14px 24px #000a}.dong-choi .pk5-backart{width:100%;height:100%;object-fit:cover}.dong-choi .pk5.done .pk5-card:not(.key) .pk5-front{filter:saturate(.6) brightness(.74)}.dong-choi .pk5-card.key{transform:rotate(calc(var(--i) * 5deg)) translateY(-14px);z-index:1}.dong-choi .pk5-card.key .pk5-front{box-shadow:inset 0 0 0 calc(var(--w) * .045) #fbf8ef,inset 0 0 0 calc(var(--w) * .045 + 1px) #c9b78a73,0 0 0 3px var(--gold),0 0 22px #e8c77880,0 14px 24px #000a}.dong-choi .pk5-card.key:after{content:"";position:absolute;left:50%;bottom:-15px;width:9px;height:9px;transform:translate(-50%) rotate(45deg);background:var(--gold);box-shadow:0 0 8px #e8c778aa}@media(max-width:640px){.dong-choi .pk5{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 6px 16px;border-radius:18px}.dong-choi .pk5:before{inset:5px;border-radius:14px}.dong-choi .pk5-hand{padding:4px 2px 14px;gap:6px}.dong-choi .pk5-label{font-size:14px;padding:3px 10px}.dong-choi .pk5-card{--w: min(72px, 21cqi);margin-left:calc(var(--w) * -.14)}.dong-choi .pk5-card.key{transform:rotate(calc(var(--i) * 5deg)) translateY(-8px)}.dong-choi .pk5-card.key:after{bottom:-11px;width:7px;height:7px}}.dong-choi .pk5{margin:14px;border:0;background:radial-gradient(80% 90% at 50% 30%,#2a7a5c,#145040 55%,#0b3328);box-shadow:inset 0 0 0 2px #c9a24a,inset 0 0 70px #0009,0 0 0 4px #3a2210,0 0 0 12px #6e4628,0 0 0 14px #c9a24a,0 0 0 16px #2c190b,0 30px 50px #000b}.dong-choi .pk5:before{inset:12px;border:1.5px dashed #e8c7784d}.dong-choi .pk5-label{border:0;border-radius:6px;padding:5px 16px;background:linear-gradient(180deg,#6e4628,#3b2412);box-shadow:inset 0 0 0 1.5px #c9a24a,inset 0 1px 0 2px #ffffff14,0 4px 8px #0009}.dong-choi .pk5-label strong{color:#ffe7a8}.dong-choi .pk5-hand.win .pk5-label{border:0;box-shadow:inset 0 0 0 2px #49d6b0,0 0 18px #49d6b066,0 4px 8px #0009}.dong-choi .pk5-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}.dong-choi .pk5-pick{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:8px 22px 8px 9px;border:0;border-radius:12px;background:linear-gradient(180deg,#6e4628,#4b2d16 55%,#3a2210);box-shadow:inset 0 0 0 2px #c9a24a,inset 0 0 0 5px #3a2210,inset 0 0 0 6px #c9a24a66,inset 0 8px 10px -4px #ffffff1c,0 9px 18px #000a;color:#f6dd9a;font:700 16px/1.2 var(--font);letter-spacing:.02em;text-align:left;cursor:pointer;opacity:1;transition:transform .2s,box-shadow .2s,filter .2s}.dong-choi .pk5-pick:hover:not(:disabled){transform:translateY(-3px);background:linear-gradient(180deg,#7c512f,#563319 55%,#40260f);box-shadow:inset 0 0 0 2px #e8c778,inset 0 0 0 5px #3a2210,inset 0 0 0 6px #e8c77888,inset 0 8px 10px -4px #ffffff24,0 0 26px #f3c97a3d,0 14px 22px #000b}.dong-choi .pk5-pick:focus-visible{outline:3px solid var(--dc-coral);outline-offset:4px}.dong-choi .pk5-pick:disabled{cursor:default;opacity:1}.dong-choi .pk5-pick-ic{flex:none;position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d44a33,#8e1f16 70%,#5e140d);box-shadow:0 0 0 2px #c9a24a,0 0 0 4px #3a2210,0 3px 6px #0009;color:#ffe7a8;font:800 19px/1 var(--font)}.dong-choi .pk5-pick-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dong-choi .pk5-pick-ic svg .f{fill:currentColor;stroke:none}.dong-choi .pk5-pick-tx{display:grid;gap:2px}.dong-choi .pk5-pick-tx small{font-size:12px;font-weight:500;letter-spacing:0;color:#e9cf9fcc}.dong-choi .pk5-pick.picked{transform:translateY(-2px);box-shadow:inset 0 0 0 2px #ffe7a8,inset 0 0 0 5px #3a2210,inset 0 0 0 6px #e8c778,0 0 0 3px #e8c778,0 0 26px #e8c7786b,0 12px 20px #000b}.dong-choi .pk5-pick.answer{background:linear-gradient(180deg,#1d6b5c,#0f4a40 55%,#0a3530);box-shadow:inset 0 0 0 2px #49d6b0,inset 0 0 0 5px #0a3530,inset 0 0 0 6px #49d6b088,0 0 0 3px #49d6b0,0 0 28px #49d6b066,0 12px 20px #000b;color:#e9fff7}.dong-choi .pk5-pick.answer .pk5-pick-ic{background:radial-gradient(circle at 35% 30%,#7af0d0,#1e9c80 70%,#0d5a4a);color:#04332d}.dong-choi .pk5-pick:after{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:800 13px/1 var(--font);box-shadow:0 0 0 2px #04141d}.dong-choi .pk5-pick.answer:after{content:"✓";background:var(--dc-jade);color:#04332d}.dong-choi .pk5-pick.picked:not(.answer):after{content:"✕";background:#c8402c;color:#fff4d6}.dong-choi .pk5-pick.picked:not(.answer) .pk5-pick-tx{text-decoration:line-through;text-decoration-color:#ff8b70;text-decoration-thickness:2px}.dong-choi[data-phase=resolving] .pk5-pick:not(.picked):not(.answer){filter:saturate(.55) brightness(.75)}@media(max-width:640px){.dong-choi .pk5-pick{gap:8px;min-height:54px;padding:6px 12px 6px 7px;font-size:14px}.dong-choi .pk5-pick-ic{width:34px;height:34px;font-size:16px}.dong-choi .pk5-pick-ic svg{width:19px;height:19px}.dong-choi .pk5-pick-tx small{font-size:12px}}@media(max-width:640px){.dong-choi .pk5{margin:10px 8px;box-shadow:inset 0 0 0 2px #c9a24a,inset 0 0 50px #0009,0 0 0 3px #3a2210,0 0 0 8px #6e4628,0 0 0 9px #c9a24a,0 18px 30px #000b}.dong-choi .pk5-picks{gap:10px}.dong-choi .pk5-pick{flex:1 1 150px}}.dong-choi .pk5.pk5-seven{row-gap:6px}.dong-choi .pk5-board{grid-column:1 / -1;display:grid;justify-items:center;gap:8px;container-type:inline-size}.dong-choi .pk5-row{display:flex;justify-content:center;gap:8px;padding:10px 14px;border-radius:16px;background:#0b332899;box-shadow:inset 0 0 0 1.5px #c9a24a88,inset 0 0 30px #0007;perspective:900px}.dong-choi .pk5-row .pk5-card{--w: min(84px, 15cqi);margin-left:0;transform:none}.dong-choi .pk5-row .pk5-card.key{transform:translateY(-10px)}.dong-choi .pk5-river{display:grid;place-items:center;width:min(84px,15cqi);aspect-ratio:5 / 7;border-radius:10px;border:2px dashed #c9a24a;color:#ffe7a8;font:800 30px/1 var(--font);background:#04141d66}.dong-choi .pk5-seven .pk5-fan .pk5-card{--w: min(96px, 30cqi)}.dong-choi .pk5-seven .pk5-fan .pk5-card{margin-left:calc(var(--w) * -.12)}@media(max-width:640px){.dong-choi .pk5.pk5-seven{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dong-choi .pk5-row{gap:4px;padding:8px}.dong-choi .pk5-row .pk5-card,.dong-choi .pk5-river{--w: min(48px, 14.5cqi);width:var(--w)}.dong-choi .pk5-river{font-size:20px}.dong-choi .pk5-seven .pk5-fan .pk5-card{--w: min(56px, 34cqi)}}
