/* ==========================================================================
   playgo88-life — LDP GO88 x Roberto Carlos (vong quay may man)
   Dung tu Figma 6MVahWvsMywLiOK3Ik5Xsy, page "Comp".
   Desktop khung 1728x995 (node 60:2591), mobile khung 375x950 (node 90:4127).

   Moi toa do/kich thuoc viet nguyen theo pixel cua Figma roi nhan var(--u).
   --u = 1 design-pixel, tinh bang container query unit nen ca trang co gian
   dung ty le theo be ngang man hinh, khong can JS do dac.
   ========================================================================== */

:root {
  --bg: #141414;
  --gold: #fea010;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
}

/* button/input khong tu ke thua font cua body — mac dinh cua trinh duyet la
   Arial 13.333px, chu "QUAY NGAY" se khong ra Inter neu khong khai bao. */
button,
input,
textarea,
select {
  font-family: inherit;
}

/* Nhan chi danh cho trinh doc man hinh (nut CTA la anh, khong co chu that). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tieu de xuong dong o mobile dung cho ngat cua Figma. */
.br-mb {
  display: none;
}

/* --------------------------------------------------------------------------
   Khung san khau
   -------------------------------------------------------------------------- */

.stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 995;
  overflow: hidden;
  background: var(--bg);
  /* 1 design-pixel cua khung desktop */
  --u: calc(100cqw / 1728);
}

/* Moi lop trong san khau deu dinh vi tuyet doi theo toa do Figma. */
.lyr {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
}

/* Tien ich: chinh giua truc ngang cua khung. */
.cx {
  left: 50%;
  transform: translateX(-50%);
}

.only-mb {
  display: none;
}

/* Nen video phu kin khung. Anh poster o duoi lam nen tinh cho toi khi video
   chay duoc, va la ban du phong khi trinh duyet tu choi autoplay. */
.bgv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: url("../images/bg-desktop.webp") no-repeat center / cover;
}

/* --------------------------------------------------------------------------
   Phan dung chung desktop/mobile
   -------------------------------------------------------------------------- */

.logo {
  top: calc(29 * var(--u));
  width: calc(308 * var(--u));
  height: calc(167 * var(--u));
  background-image: url("../images/logo.webp");
}

.light-effect {
  left: calc(641 * var(--u));
  top: calc(247 * var(--u));
  width: calc(647 * var(--u));
  height: calc(184 * var(--u));
  background-image: url("../images/light-effect.webp");
  animation: shimmer 3s ease-in-out infinite;
}

.heading {
  position: absolute;
  left: calc(856.5 * var(--u));
  top: calc(239 * var(--u));
  transform: translateX(-50%);
  margin: 0;
  font-size: calc(29.815 * var(--u));
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.roberto {
  left: 50%;
  top: calc(290.3 * var(--u));
  width: calc(559.341 * var(--u));
  height: calc(51.392 * var(--u));
  transform: translateX(-50%);
  background-image: url("../images/roberto-carlos.webp");
}

/* --- Vong quay ---------------------------------------------------------- */

/* Anh vong quay da nung san nhan ("2TY", "HOAN TRA 10%"...) nen chi can xoay
   dung mot the. 8 o, moi o 45deg, o dau tien ("VE SIEU HU 2TY") o dinh.

   Component Frame 62 (54:1163) co 6 variant, moi variant la mot goc xoay, va
   chung tu chuyen tiep vong tron -> vong quay LUON tu xoay, khong dung yen.
   Goc doc tu Figma (Figma quay nguoc chieu kim dong ho nen phai doi dau):
     Default 0 -> V2 45 -> V3 90 -> V4 135 -> V5 180 -> V6 278.76 -> 360
   Thoi luong: 0.4 0.4 0.4 0.4 0.3, dung 1.5s o V6, roi 0.8s ve dau = 4.2s. */
.wheel {
  position: absolute;
  left: 50%;
  top: calc(376 * var(--u));
  width: calc(524 * var(--u));
  height: calc(524 * var(--u));
  transform: translateX(-50%) rotate(0deg);
  will-change: transform;
  animation: wheel-cycle 4.2s linear infinite;
}

.wheel img {
  width: 100%;
  height: 100%;
}

/* Luc bam quay, app.js tat animation vong lap roi dat transition rieng ve
   goc 278.76deg — dung cho o "TANG 50K" len dinh, cung la moc ma vong lap
   cua Figma dung lai 1.5s moi chu ky. */

.arrow {
  top: calc(501 * var(--u));
  width: calc(43 * var(--u));
  height: calc(49 * var(--u));
  left: calc(50% - 2.5 * var(--u));
  transform: translateX(-50%) rotate(180deg);
  background-image: url("../images/mui-ten.webp");
}

/* --- Nut QUAY NGAY ------------------------------------------------------ */

.spin {
  position: absolute;
  left: calc(741 * var(--u));
  top: calc(518 * var(--u));
  width: calc(251 * var(--u));
  height: calc(251 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.spin-face {
  position: relative;
  width: calc(214.016 * var(--u));
  height: calc(212.695 * var(--u));
  display: grid;
  place-items: center;
  /* Component Popup (54:1074), 2 variant doi qua lai moi 0.3s (EASE_IN):
       Default   214 x 212.7, NutQuay co DROP_SHADOW
       Variant2  202 x 200.7, KHONG co drop shadow
     Tuc la vua co lai vua tat bong, khong phai chi mot trong hai.
     202/214 = 0.944. */
  animation: btn-throb 0.6s infinite;
}

.spin-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spin-label {
  position: relative;
  font-size: calc(39.035 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 calc(1.982 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}

.spin:disabled {
  cursor: default;
}

.spin:disabled .spin-face {
  animation: none;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(12.2 * var(--u)) #ff9500);
}

/* --------------------------------------------------------------------------
   Man trung thuong
   -------------------------------------------------------------------------- */

.prize {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* Lam toi dat thang tren .prize: neu tach ra mot the con rieng thi
     .prize-glow se blend voi the do (cung nhom) thay vi voi ca trang. */
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  /* Moi chuyen frame trong prototype deu la SMART_ANIMATE 0.4s EASE_OUT. */
  transition: opacity 0.4s cubic-bezier(0, 0, 0.58, 1),
    visibility 0.4s;
}

.prize.is-open {
  opacity: 1;
  visibility: visible;
}

/* Ba vong sang le pha nhau -> hieu ung toa sang lien tuc quanh phan thuong. */
.prize-glow {
  left: calc(472 * var(--u));
  top: calc(122 * var(--u));
  width: calc(785 * var(--u));
  height: calc(771 * var(--u));
  background-image: url("../images/selected-light.webp");
  opacity: 0;
}

/* Figma dat Selected light 2/3/4 CUNG mot toa do, cung kich thuoc — ba ban
   chong len nhau de sang hon, khong phai ba vong nhap nhay le pha. */
.prize.is-open .prize-glow {
  animation: fade-in 0.4s cubic-bezier(0, 0, 0.58, 1) both;
}

.prize-badge {
  position: absolute;
  left: calc(571.9 * var(--u));
  top: calc(282.5 * var(--u));
  width: calc(585.2 * var(--u));
  height: calc(421 * var(--u));
  background-image: url("../images/nhan-thuong-50k.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
}

/* Component Frame 65 (60:2541), 2 variant:
     Default  NhanThuong 332.9 x 239.5  --0.25s EASE_IN-->
     Variant2 NhanThuong 313 x 225      --0.4s EASE_OUT--> Default
   Tuc la CO LAI 6% roi gian ra, khong phai phong to. 313/332.9 = 0.94.
   Badge khong co hieu ung xuat hien rieng — no chi hien theo chuyen frame. */
.prize.is-open .prize-badge {
  animation: fade-in 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    badge-throb 0.65s 0.4s infinite;
}

.cta {
  position: absolute;
  left: calc(635 * var(--u));
  top: calc(755 * var(--u));
  width: calc(457.874 * var(--u));
  height: calc(77.936 * var(--u));
  padding: 0;
  border: 0;
  background: url("../images/cta-nhan-thuong.webp") no-repeat center / 100% 100%;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

/* CTA khong co component variant nao trong Figma -> khong co nhip lap. */
.prize.is-open .cta {
  animation: fade-in 0.4s cubic-bezier(0, 0, 0.58, 1) both;
}

/* --------------------------------------------------------------------------
   Popup dang ky (node 60:2660)
   -------------------------------------------------------------------------- */

.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0, 0, 0.58, 1), visibility 0.4s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.form-submit {
  position: relative;
  width: calc(511 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma khai bao gap/padding 29.695 nhung khung form that su cao 535px,
     khong phai 605px nhu tong cac so do cong lai — nen siet lai cho khop. */
  gap: calc(22 * var(--u));
  padding: calc(24 * var(--u)) calc(19.797 * var(--u)) calc(32 * var(--u));
  border-top: calc(2.475 * var(--u)) solid var(--gold);
  border-bottom: calc(2.475 * var(--u)) solid var(--gold);
  border-radius: calc(29.695 * var(--u));
  background: #121312;
  filter: drop-shadow(0 calc(3.792 * var(--u)) calc(9.149 * var(--u)) rgba(231, 119, 0, 0.7));
  transform: scale(0.96);
  transition: transform 0.4s cubic-bezier(0, 0, 0.58, 1);
}

.modal.is-open .form-submit {
  transform: scale(1);
}

/* Anh nen san van dong + lop mo dan xuong den, dung nhu Figma. */
.form-submit::before,
.form-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.form-submit::before {
  background: url("../images/form-bg.webp") no-repeat bottom / cover;
  mix-blend-mode: lighten;
}

.form-submit::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 38.204%,
    #000 76.408%
  );
}

.form-submit > * {
  position: relative;
  z-index: 1;
}

.form-logo {
  width: calc(181.881 * var(--u));
  height: calc(86.61 * var(--u));
  object-fit: contain;
}

.form-divider {
  width: calc(196.729 * var(--u));
  height: calc(24.805 * var(--u));
}

.form-close {
  position: absolute;
  right: calc(19.8 * var(--u));
  top: calc(17.32 * var(--u));
  width: calc(39.593 * var(--u));
  height: calc(39.593 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.form-close img {
  width: 100%;
  height: 100%;
}

.form-fields {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(19.797 * var(--u));
  width: 100%;
}

.form-input-wrapper {
  width: 100%;
}

/* --- O nhap ------------------------------------------------------------- */

.form-input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(66.143 * var(--u));
  padding: 0 calc(13.527 * var(--u));
  border: calc(1.127 * var(--u)) solid rgba(0, 0, 0, 0.5);
  border-radius: calc(9.018 * var(--u));
  background: #fff;
  overflow: hidden;
}

/* Mieng do bo goc trai — Figma de la mot SVG rieng, giu nguyen. */
.form-input .tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(79.174 * var(--u));
  height: calc(72.168 * var(--u));
  pointer-events: none;
}

.form-input .ico {
  position: relative;
  flex: 0 0 auto;
  width: calc(38.622 * var(--u));
  height: calc(39.093 * var(--u));
  object-fit: contain;
}

.form-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: calc(19 * var(--u));
  font-weight: 500;
  color: #000;
  text-align: center;
}

.form-input input::placeholder {
  color: #000;
  opacity: 1;
}

.form-input .toggle-password {
  flex: 0 0 auto;
  width: calc(33.214 * var(--u));
  height: calc(30 * var(--u));
  cursor: pointer;
}

/* Cho o khong co nut con mat van can chua cho de chu nam dung giua. */
.form-input .spacer {
  flex: 0 0 auto;
  width: calc(33.214 * var(--u));
}

.form-input.error {
  border-color: #e02b2b;
  box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(224, 43, 43, 0.45);
}

/* --- Thong bao loi ------------------------------------------------------ */

.validate-user,
.validate-password,
.validate-phone,
.error-message {
  display: none;
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: #ff5a5a;
  text-align: left;
}

.form-cta {
  width: calc(457.874 * var(--u));
  height: calc(77.936 * var(--u));
  padding: 0;
  border: 0;
  background: url("../images/cta-nhan-thuong.webp") no-repeat center / 100% 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Loader luc goi API
   -------------------------------------------------------------------------- */

.loader-submit {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.dotted-loader {
  width: 54px;
  height: 54px;
  border: 5px dotted var(--gold);
  border-radius: 50%;
  animation: spin360 1.4s linear infinite;
}

/* --------------------------------------------------------------------------
   Mobile (node 90:4127) — khung 375x950
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .stage {
    aspect-ratio: 375 / 950;
    --u: calc(100cqw / 375);
  }

  .only-pc {
    display: none;
  }

  .only-mb {
    display: block;
  }

  .br-mb {
    display: inline;
  }

  .bgv {
    background-image: url("../images/bg-mobile.webp");
  }

  /* Mobile co hai vet sang doi xung hai ben tieu de. */
  .light-effect {
    left: calc(117 * var(--u));
    top: calc(210 * var(--u));
    width: calc(333 * var(--u));
    height: calc(94.702 * var(--u));
  }

  .light-effect-2 {
    left: calc(-47 * var(--u));
    top: calc(185 * var(--u));
    width: calc(333 * var(--u));
    height: calc(94.702 * var(--u));
    background-image: url("../images/light-effect.webp");
    animation: shimmer 3s ease-in-out infinite reverse;
  }

  .heading {
    left: calc(185.71 * var(--u));
    top: calc(152 * var(--u));
    font-size: calc(30.461 * var(--u));
  }

  .roberto {
    left: calc(50% + 1.08 * var(--u));
    top: calc(232.12 * var(--u));
    width: calc(298.835 * var(--u));
    height: calc(27.457 * var(--u));
  }

  .logo {
    top: calc(29 * var(--u));
    width: calc(175.21 * var(--u));
    height: calc(94.83 * var(--u));
  }

  .wheel {
    top: calc(279.27 * var(--u));
    width: calc(347.953 * var(--u));
    height: calc(347.953 * var(--u));
  }

  .arrow {
    left: calc(50% + 0.21 * var(--u));
    top: calc(361 * var(--u));
    width: calc(18.312 * var(--u));
    height: calc(21.005 * var(--u));
  }

  .spin {
    left: calc(103.33 * var(--u));
    top: calc(366.33 * var(--u));
    width: calc(172.667 * var(--u));
    height: calc(172.667 * var(--u));
  }

  .spin-face {
    width: calc(147.225 * var(--u));
    height: calc(146.317 * var(--u));
    filter: drop-shadow(0 calc(2.752 * var(--u)) calc(8.393 * var(--u)) #ff9500);
  }

  .spin-label {
    font-size: calc(26.85 * var(--u));
    text-shadow: 0 calc(1.363 * var(--u)) 0 rgba(0, 0, 0, 0.25);
  }

  .prize-glow {
    left: calc(-10 * var(--u));
    top: calc(232 * var(--u));
    width: calc(386.834 * var(--u));
    height: calc(380.098 * var(--u));
  }

  .prize-badge {
    left: calc(21.56 * var(--u));
    top: calc(296.52 * var(--u));
    width: calc(332.875 * var(--u));
    height: calc(239.482 * var(--u));
  }

  .cta {
    left: calc(23 * var(--u));
    top: calc(561 * var(--u));
    width: calc(330 * var(--u));
    height: calc(56 * var(--u));
  }

  /* Popup dang ky mobile: node 60:3481, 349x329.56 tai left 13 / top 310. */
  .modal {
    place-items: start center;
  }

  .form-submit {
    width: calc(349 * var(--u));
    margin-top: calc(310 * var(--u));
    gap: calc(16 * var(--u));
    padding: calc(18 * var(--u)) calc(13 * var(--u)) calc(26 * var(--u));
    border-radius: calc(20 * var(--u));
  }

  .form-logo {
    width: calc(124 * var(--u));
  }

  .form-divider {
    width: calc(134 * var(--u));
    height: calc(17 * var(--u));
  }

  .form-close {
    right: calc(13 * var(--u));
    top: calc(12 * var(--u));
    width: calc(27 * var(--u));
    height: calc(27 * var(--u));
  }

  .form-fields {
    gap: calc(13 * var(--u));
  }

  .form-input {
    height: calc(45 * var(--u));
    padding: 0 calc(9 * var(--u));
    border-radius: calc(6 * var(--u));
  }

  .form-input .tab {
    width: calc(54 * var(--u));
    height: calc(49 * var(--u));
  }

  .form-input .ico {
    width: calc(26 * var(--u));
    height: calc(27 * var(--u));
  }

  .form-input input {
    font-size: calc(13 * var(--u));
  }

  .form-input .toggle-password,
  .form-input .spacer {
    width: calc(23 * var(--u));
  }

  .form-input .toggle-password {
    height: calc(21 * var(--u));
  }

  .validate-user,
  .validate-password,
  .validate-phone,
  .error-message {
    font-size: calc(11 * var(--u));
  }

  .form-cta {
    width: calc(312.716 * var(--u));
    height: calc(53.228 * var(--u));
  }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Moc phan tram = moc thoi gian cua Figma chia cho 4.2s. */
@keyframes wheel-cycle {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  9.524% {
    transform: translateX(-50%) rotate(45deg);
  }
  19.048% {
    transform: translateX(-50%) rotate(90deg);
  }
  28.571% {
    transform: translateX(-50%) rotate(135deg);
  }
  38.095% {
    transform: translateX(-50%) rotate(180deg);
  }
  45.238% {
    transform: translateX(-50%) rotate(278.76deg);
  }
  80.952% {
    transform: translateX(-50%) rotate(278.76deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* EASE_IN cua Figma = cubic-bezier(0.42, 0, 1, 1), dat tren tung nua chu ky. */
@keyframes btn-throb {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 calc(4 * var(--u)) calc(12.2 * var(--u)) #ff9500);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  50% {
    transform: scale(0.944);
    filter: drop-shadow(0 0 0 rgba(255, 149, 0, 0));
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 calc(4 * var(--u)) calc(12.2 * var(--u)) #ff9500);
  }
}

/* 0.25s co lai (EASE_IN) roi 0.4s gian ra (EASE_OUT) = 0.65s, 0.25/0.65 = 38.46%. */
@keyframes badge-throb {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  38.462% {
    transform: scale(0.94);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 0.55;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.04);
  }
}

@keyframes spin360 {
  to {
    transform: rotate(360deg);
  }
}

/* Ton trong lua chon giam chuyen dong cua he dieu hanh: bo moi animation lap
   vo han. Cu quay van giu vi do la ket qua thao tac cua nguoi dung — app.js
   rut xuong 600ms. Nen video cung khong duoc tai, chi con anh tinh. */
@media (prefers-reduced-motion: reduce) {
  .light-effect,
  .light-effect-2,
  .spin-face,
  .wheel,
  .prize.is-open .prize-badge {
    animation: none;
  }

  /* Bo animation thi mat luon filter trong btn-throb, phai tra lai. */
  .spin-face {
    filter: drop-shadow(0 calc(4 * var(--u)) calc(12.2 * var(--u)) #ff9500);
  }

  .prize.is-open .prize-badge,
  .prize.is-open .prize-glow,
  .prize.is-open .cta {
    animation: fade-in 0.3s ease-out both;
  }
}