.dong-choi .mz{container-type:inline-size;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,56px);width:100%;max-width:1060px}.dong-choi .mz-ref,.dong-choi .mz-board{--mz-cell: clamp(22px, calc((100cqi - 108px) / 5.25), 40px);--mz-gap: 6px;--mz-step: calc(var(--mz-cell) + var(--mz-gap));--mz-ref: clamp(22px, 7cqi, 30px)}@media(min-width:761px){.dong-choi .mz-ref,.dong-choi .mz-board{--mz-cell: clamp(48px, 7.4cqi, 86px);--mz-ref: clamp(30px, 3.6cqi, 40px)}}.dong-choi .mz-ref{position:relative;margin:0;display:grid;justify-items:center;gap:10px;padding:18px 18px 14px;border-radius:12px;background:radial-gradient(90% 80% at 50% 30%,#12404899,#071b26c7);border:6px solid #5a1c12;box-shadow:inset 0 0 0 1px #e8c778aa,inset 0 0 0 4px #071b26,inset 0 0 0 5px #e8c77855,0 0 0 1px #e8c77866,0 18px 30px #0009}.dong-choi .mz-ref:before,.dong-choi .mz-ref:after{content:"";position:absolute;top:-10px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c2,var(--gold) 55%,#8a6a2a);box-shadow:0 2px 3px #0008}.dong-choi .mz-ref:before{left:18px}.dong-choi .mz-ref:after{right:18px}.dong-choi .mz-cap{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.dong-choi .mz-refgrid{display:grid;gap:3px;padding:3px;border-radius:6px;background:#5d584b;box-shadow:inset 0 1px 3px #0008}.dong-choi .mz-refrow{display:flex;gap:3px}.dong-choi .mz-refrow .mz-tile{--mz-size: var(--mz-ref);border-radius:4px}.dong-choi .mz-count{margin:2px 0 0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#dbe8e6}.dong-choi .mz-board{display:grid;gap:14px}.dong-choi .mz-row{position:relative;display:flex;align-items:center;gap:10px}.dong-choi .mz-arrow{width:46px;min-width:44px;height:46px;padding:0;font-size:16px;display:grid;place-items:center;color:var(--gold);border-color:#e8c77859;background:#071b26b3;box-shadow:0 6px 12px #0007}.dong-choi .mz-arrow:hover:not(:disabled){border-color:var(--gold);background:#0f3a46d9}.dong-choi .mz-view{position:relative;width:calc(var(--mz-cell) * 5 + var(--mz-gap) * 4);height:var(--mz-cell);overflow:hidden;border-radius:6px;background:linear-gradient(180deg,#5d584b,#47433a);box-shadow:0 0 0 4px #514c41,0 0 0 5px #e8c77880,0 12px 20px #000a}.dong-choi .mz-track{display:flex;gap:var(--mz-gap);width:max-content;transition:transform .22s cubic-bezier(.33,.9,.4,1);will-change:transform}.dong-choi .mz-tile{--mz-size: var(--mz-cell);position:relative;flex:none;display:grid;place-items:center;width:var(--mz-size);height:var(--mz-size);border-radius:5px;overflow:hidden;box-shadow:inset 0 2px #ffffff38,inset 0 -3px #0007,inset 0 0 0 1px #ffffff1f,inset 0 0 calc(var(--mz-size) * .25) #0006}.dong-choi .mz-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff38,#ffffff10 28%,#fff0 42% 70%,#ffffff12);pointer-events:none}.dong-choi .mz-art{position:relative;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 2px 3px #0009)}.dong-choi .mz-t0{background:radial-gradient(circle at 50% 50%,#ffffff14,transparent 60%),repeating-radial-gradient(circle at 50% 50%,#0c3b47 0 5px,#11505c 5px 10px)}.dong-choi .mz-t1{background:radial-gradient(circle at 50% 45%,#ff8b7026,transparent 60%),linear-gradient(135deg,#4a2219,#6d3122)}.dong-choi .mz-t2{background:repeating-linear-gradient(45deg,#102838 0 7px,#173a54 7px 14px)}.dong-choi .mz-t3{background:radial-gradient(circle at 50% 50%,#2a7462,#0d3530)}.dong-choi .mz-t4{background:repeating-linear-gradient(90deg,#3d3421 0 6px,#52452a 6px 12px)}.dong-choi .mz-mark{position:absolute;right:-28px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--dc-jade);color:#04332d;opacity:0;transition:opacity .2s}.dong-choi .mz-row.done .mz-view{box-shadow:0 0 0 4px #514c41,0 0 0 6px var(--dc-jade),0 0 22px #49d6b066,0 12px 20px #000a}.dong-choi .mz-row.done .mz-mark{opacity:1}.dong-choi .mz-row.busy .mz-arrow{cursor:progress}@media(max-width:760px){.dong-choi .mz{flex-direction:column;gap:16px}.dong-choi .mz-ref{grid-template-columns:auto auto;align-items:center;column-gap:14px;padding:12px 12px 10px;border-width:4px}.dong-choi .mz-cap{grid-column:1 / -1}.dong-choi .mz-row{gap:6px}.dong-choi .mz-board{gap:12px}.dong-choi .mz-mark{z-index:1;right:48px;top:-9px;width:18px;height:18px;font-size:11px}}.dong-choi .mz-board{position:relative;padding:46px 28px 30px;border-radius:22px 22px 14px 14px;background:radial-gradient(90% 70% at 50% 0%,#a3271a,#6e170f 55%,#4a0f0b);box-shadow:inset 0 0 0 2px #e8c778,inset 0 0 0 7px #5e140d,inset 0 0 0 8px #e8c77880,inset 0 14px 22px -10px #ffffff2e,0 0 0 3px #2c0a06,0 26px 44px #000c}.dong-choi .mz-board:before{content:"";position:absolute;left:22px;right:22px;top:14px;height:14px;border-radius:999px;background:radial-gradient(circle,#fff1c2 0 3px,#f3c97a 3.5px 4.5px,#f3c97a00 5.5px) 0 50% / 22px 14px repeat-x,linear-gradient(180deg,#3a0c08,#5e140d);box-shadow:inset 0 0 0 1px #e8c77866,0 0 14px #f3c97a40}.dong-choi .mz-board:after{content:"";position:absolute;left:10%;right:10%;bottom:-16px;height:16px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#1e6b5b,#0b3a32);box-shadow:inset 0 0 0 1.5px #c9a24a,0 8px 14px #000a}.dong-choi .mz-view{box-shadow:0 0 0 4px #2c0a06,0 0 0 6px #e8c778,inset 0 6px 10px #0008,0 10px 18px #000a}.dong-choi .mz-row.done .mz-view{box-shadow:0 0 0 4px #2c0a06,0 0 0 6px var(--dc-jade),0 0 22px #49d6b066,0 10px 18px #000a}.dong-choi .mz-arrow{width:48px;height:48px;border:0;border-radius:50%;font-size:15px;color:#4a2008;background:radial-gradient(circle at 35% 28%,#fff4cf,#e8c778 45%,#a77a2c 80%,#6e4a14);box-shadow:inset 0 -3px 4px #6e4a1488,0 0 0 2px #2c0a06,0 5px 10px #000b;transition:transform .15s,filter .15s}.dong-choi .mz-arrow:hover:not(:disabled){background:radial-gradient(circle at 35% 28%,#fffbe6,#f3d68e 45%,#b8893a 80%,#7a5418);transform:scale(1.06);filter:drop-shadow(0 0 10px #f3c97a88)}.dong-choi .mz-arrow:active:not(:disabled){transform:scale(.95)}.dong-choi .mz-ref{border-color:#6e4628;box-shadow:inset 0 0 0 2px #c9a24a,0 0 0 2px #2c190b,0 18px 30px #000b}.dong-choi .mz-count{padding:3px 12px;border-radius:6px;background:linear-gradient(180deg,#6e4628,#3b2412);box-shadow:inset 0 0 0 1.5px #c9a24a;color:#ffe7a8}@media(min-width:761px){.dong-choi .mz-ref,.dong-choi .mz-board{--mz-cell: clamp(56px, 8.2cqi, 94px)}}@media(max-width:760px){.dong-choi .mz-ref,.dong-choi .mz-board{--mz-cell: clamp(22px, calc((100cqi - 132px) / 5.25), 40px)}.dong-choi .mz-board{padding:34px 10px 20px;border-radius:16px 16px 10px 10px}.dong-choi .mz-board:before{left:14px;right:14px;top:10px;height:12px}.dong-choi .mz-arrow{width:44px;height:44px}.dong-choi .mz-mark{right:56px}}.dong-choi .mz-blank{background:#2c2a24;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 2px 4px #0008}.dong-choi .mz-refrow .mz-tile.on1{box-shadow:0 0 0 2px var(--gold),inset 0 2px #ffffff38}.dong-choi .mz-refrow .mz-tile.on2{box-shadow:0 0 0 2px #ff8b70,inset 0 2px #ffffff38;outline:2px dashed #ff8b70;outline-offset:1px}.dong-choi .mz-refrow .mz-tile.on1.on2{box-shadow:0 0 0 2px var(--gold)}.dong-choi .mz-lane{position:absolute;inset:0;display:flex;gap:var(--mz-gap);pointer-events:none}.dong-choi .mz-lane span{flex:none;width:var(--mz-cell);height:var(--mz-cell);border-radius:5px}.dong-choi .mz-lane span.on1{box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 14px #f3c97a66}.dong-choi .mz-lane span.on2{box-shadow:inset 0 0 0 3px #ff8b70,inset 0 0 14px #ff8b7055;outline:2px dashed #ffd2c4;outline-offset:-7px}.dong-choi .mz-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0;font-size:12.5px;font-weight:600;color:#ffe7a8}.dong-choi .mz-k{display:inline-flex;align-items:center;gap:6px}.dong-choi .mz-k i{width:22px;height:0;border-top:3px solid var(--gold)}.dong-choi .mz-k.on2 i{border-top:3px dashed #ff8b70}@media(max-width:760px){.dong-choi .mz-key{grid-column:1 / -1}}
