/* ----- nút kim loại lỏng ----- */
.liq{position:relative;display:inline-block}
.liquid-stage,.liquid-stage *{--u:1px}
.liquid-stage{
  --lu:calc(var(--h) / 516);
  --bh:var(--h);
  --pad:calc(900 * var(--lu));
  position:relative;
  width:max-content; height:max-content;
  padding:var(--pad);
  display:grid; place-items:center;
  touch-action:manipulation;
  font-family:'Lexend','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
.liquid-stage--explore{ --h:calc(60.156 * var(--u)); }
.liquid-stage--play{ --h:calc(88.2288 * var(--u)); }

.liquid-plate{
  position:absolute;
  inset:var(--pad);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.014) 44%, rgba(255,255,255,0) 64%),
    rgba(10,12,10,.42);
  box-shadow:
    0 calc(var(--h) * 0.08) calc(var(--h) * 0.18) rgba(0,0,0,.38),
    0 calc(var(--h) * 0.24) calc(var(--h) * 0.50) rgba(0,0,0,.28),
    0 calc(var(--h) * 0.48) calc(var(--h) * 0.96) rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.05);
  transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
             background .38s cubic-bezier(.22,.61,.36,1);
}
.liquid-stage.hot .liquid-plate{
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.02) 44%, rgba(255,255,255,0) 64%),
    rgba(8,10,8,.50);
  box-shadow:
    0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.44),
    0 calc(var(--h) * 0.32) calc(var(--h) * 0.66) rgba(0,0,0,.34),
    0 calc(var(--h) * 0.66) calc(var(--h) * 1.32) rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.06);
}
.liquid-fx{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.liquid-button{
  position:relative;
  height:var(--bh);
  border:0; background:none;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-family:inherit; font-weight:500; line-height:1; letter-spacing:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent; outline:none;
}
.liquid-button:focus-visible{
  outline:calc(4 * var(--lu)) solid rgba(255,255,255,.55);
  outline-offset:calc(10 * var(--lu));
}
.liquid-button .ico{ display:block; flex:none; overflow:visible; }
.liquid-button .lbl{ display:block; transform:translateY(calc(2 * var(--lu))); }
.liquid-button--explore{
  padding:0 calc(224 * var(--lu)) 0 calc(95 * var(--lu));
  gap:calc(112 * var(--lu));
  font-size:calc(140 * var(--lu));
}
.liquid-button--explore .ico{
  width:calc(150 * var(--lu)); height:calc(150 * var(--lu));
}
.liquid-button--play{
  width:var(--bh); height:var(--bh); padding:0;
}
.liquid-button--play .ico{
  width:calc(176 * var(--lu)); height:calc(176 * var(--lu));
  margin-left:calc(14 * var(--lu));
}
.liquid-button--play .lbl{ display:none; }
.liquid-stage.press .liquid-plate{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 44%, rgba(255,255,255,0) 64%),
    rgba(7,9,7,.55);
  box-shadow:
    0 calc(var(--h) * 0.04) calc(var(--h) * 0.11) rgba(0,0,0,.46),
    0 calc(var(--h) * 0.13) calc(var(--h) * 0.32) rgba(0,0,0,.36),
    0 calc(var(--h) * 0.27) calc(var(--h) * 0.62) rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition-duration:.10s;
}

.liquid-stage{pointer-events:none;margin:calc(-1*var(--pad))}.liquid-button{pointer-events:auto}
.liquid-stage--explore{--h:60px}.liquid-button--explore .lbl{font-weight:600}

.liq-fallback .liquid-plate,.no-gl .liquid-plate{background:linear-gradient(135deg,#1c5cff,#35c8ff)}
.no-gl .liquid-fx{display:none}