/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ==========================================================================
   BU88 THE THAO — landing UI (Figma: BU88_LDP_260904)
   Desktop  : frame BU88_LDP_PC   1920 x 1080
   Mobile   : frame BU88_LDP_MB    440 x  994
   Ky thuat : moi phan tu duoc dat tuyet doi theo toa do goc cua Figma.
              --u la "1 design px" quy doi ra px thuc te, tinh bang cach
              fit khung thiet ke vao viewport (giong background-size: contain).
              Nho vay ty le giua cac phan tu luon dung nhu ban ve.
   ========================================================================== */

:root {
  --bu-ink: #0a1a49;
  --bu-asset: "/wp-content/uploads/2026/09";
}

/* --- reset khung trang cua theme ------------------------------------------ */
html,
body {
  background: #02123a;
}

#comments,
.page-title,
#main-menu {
  display: none;
}

#wrapper,
#main {
  background: transparent;
}

/* --------------------------------------------------------------------------
   1. SAN KHAU (stage)
   -------------------------------------------------------------------------- */

.bu-hero {
  --dw: 1920;
  --dh: 1080;
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0 !important;
  margin: 0;
  background: #02123a url("/wp-content/uploads/2026/09/bg-desktop.jpg") center
    center / cover no-repeat;
  font-family: "Nunito Sans", Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@supports (height: 100dvh) {
  .bu-hero {
    height: 100dvh;
    --u: min(calc(100vw / 1920), calc(100dvh / 1080));
  }
}

.bu-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
}

/* phan tu dat theo toa do thiet ke */
.bu-el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
}

img.bu-el {
  display: block;
  object-fit: contain;
  max-width: none;
}

.bu-el > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. NHAN VAT + HIEU UNG ANH SANG
   -------------------------------------------------------------------------- */

.bu-art {
  --x: -70;
  --y: 159;
  --w: 1135;
  --h: 990;
  pointer-events: none;
  user-select: none;
}

.bu-glow {
  display: grid;
  place-items: center;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.bu-glow > span {
  display: block;
  width: calc(var(--gw) * var(--u));
  height: calc(var(--gh) * var(--u));
  transform: rotate(var(--rot));
  background: var(--img) 0 0 / 100% 100% no-repeat;
}

.bu-glow--a {
  --x: 527.46;
  --y: 171.13;
  --w: 153.44;
  --h: 246.03;
  --gw: 133.77;
  --gh: 235.44;
  --rot: 4.91deg;
  --img: url("/wp-content/uploads/2026/09/glow-3.png");
}

.bu-glow--b {
  --x: 314.23;
  --y: 230.89;
  --w: 140.54;
  --h: 213.23;
  --gw: 113;
  --gh: 199;
  --rot: 8.3deg;
  --img: url("/wp-content/uploads/2026/09/glow-3.png");
}

/* --------------------------------------------------------------------------
   3. LOGO + HEADLINE
   -------------------------------------------------------------------------- */

.bu-logo {
  --x: 1183;
  --y: 63;
  --w: 400;
  --h: 91;
}

.bu-headline {
  --x: 1078;
  --y: 174;
  --w: 610;
  --h: 70;
}

/* --------------------------------------------------------------------------
   4. VET SANG QUANH KHUNG DANG KY
   -------------------------------------------------------------------------- */

.bu-streak {
  pointer-events: none;
}

.bu-streak--v {
  --w: 50;
  --h: 634;
  --y: 209;
  mix-blend-mode: lighten;
}

.bu-streak--v-left {
  --x: 1040;
}

.bu-streak--v-right {
  --x: 1655;
}

.bu-streak--h {
  --w: 277;
  --h: 100;
  mix-blend-mode: plus-lighter;
}

.bu-streak--h-top {
  --x: 1272;
  --y: 217;
}

.bu-streak--h-bottom {
  --x: 1265;
  --y: 783;
}

/* --------------------------------------------------------------------------
   5. KHUNG DANG KY
   Toa do ben trong tinh theo he quy chieu cua anh khung: 901 x 588.
   --fu = 1 don vi khung.
   -------------------------------------------------------------------------- */

.bu-form {
  --x: 1056.6;
  --y: 268.6;
  --w: 652.8;
  --h: 515.8;
  --fu: calc(var(--w) * var(--u) / 901);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: 0;
  margin: 0;
}

/* Khung ve bang 9-slice nen keo cao them van giu nguyen goc vat va vien. */
.bu-form__frame {
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: calc(100 * var(--fu));
  border-image: url("/wp-content/uploads/2026/09/form-frame.png") 100 fill
    stretch;
  pointer-events: none;
}

.bu-form * {
  box-sizing: border-box;
}

/* --- the "THUONG THANH VIEN MOI" ---------------------------------------- */
.bu-form__pill {
  position: absolute;
  left: calc(156 * var(--fu));
  top: 0;
  width: calc(589 * var(--fu));
  height: calc(82 * var(--fu));
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/wp-content/uploads/2026/09/form-pill.png") 0 0 / 100% 100%
    no-repeat;
}

.bu-form__pill span {
  position: relative;
  top: calc(-2 * var(--fu));
  color: var(--bu-ink);
  font-size: calc(36 * var(--fu));
  font-weight: 900;
  line-height: 1;
  letter-spacing: calc(0.4 * var(--fu));
  white-space: nowrap;
}

/* --- so tien thuong ------------------------------------------------------ */
.bu-form__bonus {
  position: absolute;
  left: calc(136 * var(--fu));
  top: calc(112 * var(--fu));
  width: calc(629 * var(--fu));
  height: calc(69 * var(--fu));
  display: block;
  max-width: none;
}

/* --- o nhap -------------------------------------------------------------- */
.bu-form .form-input-wrapper {
  position: absolute;
  left: calc(85 * var(--fu));
  width: calc(731 * var(--fu));
  height: calc(93 * var(--fu));
  margin: 0;
}

.bu-form .bu-field--user {
  top: calc(222 * var(--fu));
}

.bu-form .bu-field--pass {
  top: calc(346 * var(--fu));
}

.bu-form .bu-field--phone {
  top: calc(470 * var(--fu));
}

.bu-form .form-input {
  position: relative;
  display: block;
  width: 100%;
  height: calc(88 * var(--fu));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("/wp-content/uploads/2026/09/form-input.png") 0 0 / 100% 100%
    no-repeat;
  box-shadow: none;
}

.bu-form .form-input::before {
  display: none !important;
}

.bu-form .form-input .bu-field__icon {
  position: absolute;
  left: calc(31 * var(--fu));
  top: 50%;
  width: calc(67 * var(--fu));
  height: calc(68 * var(--fu));
  transform: translateY(-50%);
  pointer-events: none;
  max-width: none;
}

.bu-form .form-input input {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 calc(112 * var(--fu)) 0 calc(112 * var(--fu)) !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: center;
  color: var(--bu-ink);
  font-family: inherit;
  font-size: calc(34 * var(--fu));
  font-weight: 400;
  line-height: 1;
  min-height: 0;
}

.bu-form .form-input input::placeholder {
  color: #8296bb;
  opacity: 1;
}

.bu-form .form-input.error {
  box-shadow: 0 0 0 calc(3 * var(--fu)) rgba(255, 40, 40, 0.75);
  border-radius: calc(10 * var(--fu));
}

.bu-form .toggle-password {
  position: absolute;
  right: calc(35 * var(--fu));
  top: 50%;
  width: calc(46 * var(--fu));
  height: calc(46 * var(--fu));
  transform: translateY(-50%);
  cursor: pointer;
  max-width: none;
}

/* --- thong bao loi ------------------------------------------------------- */
.bu-form .form-input-wrapper p {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(94 * var(--fu));
  margin: 0;
  padding: 0 calc(8 * var(--fu));
  color: #ff5a5a;
  font-size: calc(24 * var(--fu));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 calc(1 * var(--fu)) calc(3 * var(--fu)) rgba(0, 0, 0, 0.6);
  display: none;
}

/* Loi tu API khong bao gio hien cung luc voi loi tung o (xem handleError),
   nen dung chung mot cho; them nen toi de doc duoc khi tran xuong nut bam. */
.bu-form .form-input-wrapper .error-message {
  top: calc(90 * var(--fu));
  z-index: 3;
  padding: calc(6 * var(--fu)) calc(14 * var(--fu));
  border-radius: calc(10 * var(--fu));
  background: rgba(4, 16, 48, 0.92);
}

/* --- nut dang ky --------------------------------------------------------- */
.bu-form .btn-register {
  position: absolute;
  left: calc(153 * var(--fu));
  top: calc(597 * var(--fu));
  width: calc(596 * var(--fu));
  height: calc(182 * var(--fu));
  margin: 0;
  cursor: pointer;
  background: url("/wp-content/uploads/2026/09/form-btn.png") 0 0 / 100% 100%
    no-repeat;
  animation: bu-cta-pulse 1.5s ease-in-out infinite;
  will-change: transform, filter;
}

/* Nhip dap + quang sang: dung drop-shadow (khong dung box-shadow) de vien sang
   bam dung hinh nut trong file PNG chu khong phai khung chu nhat. */
@keyframes bu-cta-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 199, 44, 0)) brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 calc(20 * var(--fu)) rgba(255, 199, 44, 0.85))
      brightness(1.08);
  }
}

/* Vet sang quet ngang qua nut, cat theo dung hinh nut bang mask. */
.bu-form .btn-register::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 58%
    )
    100% 0 / 250% 100% no-repeat;
  -webkit-mask: url("/wp-content/uploads/2026/09/form-btn.png") 0 0 / 100% 100%
    no-repeat;
  mask: url("/wp-content/uploads/2026/09/form-btn.png") 0 0 / 100% 100%
    no-repeat;
  animation: bu-cta-shine 2.8s ease-in-out infinite;
}

@keyframes bu-cta-shine {
  0% {
    background-position: 100% 0;
  }
  45%,
  100% {
    background-position: 0 0;
  }
}

.bu-form .btn-register:hover {
  animation-duration: 0.9s;
}

.bu-form .btn-register:active {
  animation: none;
  transform: scale(0.97);
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .bu-form .btn-register,
  .bu-form .btn-register::after {
    animation: none;
  }
}

.bu-form__cta {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(19 * var(--fu));
  color: var(--bu-ink);
  font-size: calc(46 * var(--fu));
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: calc(0.5 * var(--fu));
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. SLIDER KHUYEN MAI
   -------------------------------------------------------------------------- */

.bu-promos {
  position: absolute;
  left: calc(952.5 * var(--u));
  top: calc(858 * var(--u));
  width: calc(879 * var(--u));
  height: calc(145 * var(--u));
  overflow: hidden;
}

.bu-promos .swiper-wrapper {
  align-items: center;
}

.bu-promos .swiper-slide {
  width: calc(266 * var(--u));
  height: calc(121 * var(--u));
}

/* Phong to the dang chon bang chinh anh ben trong: dat transform trực tiep
   len .swiper-slide se dinh transition ma Swiper quan ly, khong chay duoc. */
.bu-promos .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  transform: scale(1);
  transition: transform 0.35s ease;
}

.bu-promos .swiper-slide-active {
  z-index: 2;
}

.bu-promos .swiper-slide-active img {
  transform: scale(1.128);
}

.bu-hero .bu-dots {
  position: absolute;
  left: calc(1188 * var(--u));
  top: calc(1012 * var(--u));
  width: calc(400 * var(--u));
  height: calc(18 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--u));
}

.bu-hero .bu-dots .swiper-pagination-bullet {
  display: block;
  flex: 0 0 auto;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin: 0 !important;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.45;
  cursor: pointer;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}

.bu-hero .bu-dots .swiper-pagination-bullet-active {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  opacity: 1;
  box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   7. NUT MANG XA HOI
   -------------------------------------------------------------------------- */

.bu-social {
  position: absolute;
  left: calc(1790 * var(--u));
  top: calc(56 * var(--u));
  width: calc(84 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  z-index: 5;
}

.bu-social a {
  display: block;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  transition: transform 0.2s ease;
}

.bu-social a:hover {
  transform: scale(1.08);
}

.bu-social img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* --------------------------------------------------------------------------
   8. POPUP THONG BAO (dung lai luong cua plugin dang ky)
   -------------------------------------------------------------------------- */

#popup-register .popup {
  width: min(500px, calc(100vw - 32px));
  max-width: 500px;
  padding: 28px 24px;
  border-radius: 18px;
  border: 2px solid #ffd23f;
  background: linear-gradient(180deg, #0b2a6b 0%, #061845 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
}

#popup-register .form-submit-popup:empty {
  display: none;
}

#popup-register .show-noti img {
  width: 56px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   9. MOBILE / TABLET — frame BU88_LDP_MB 440 x 994
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .bu-hero {
    --u: min(calc(100vw / 440), calc(100vh / 994));
    background-image: url("/wp-content/uploads/2026/09/bg-mobile.jpg");
  }

  @supports (height: 100dvh) {
    .bu-hero {
      --u: min(calc(100vw / 440), calc(100dvh / 994));
    }
  }

  .bu-stage {
    width: calc(440 * var(--u));
    height: calc(994 * var(--u));
  }

  .bu-art {
    --x: -43;
    --y: 630;
    --w: 499;
    --h: 435;
  }

  .bu-glow--a {
    --x: 115.09;
    --y: 636.89;
    --w: 80.83;
    --h: 122.21;
    --gw: 65;
    --gh: 114;
    --rot: 8.33deg;
    --img: url("/wp-content/uploads/2026/09/glow-3.png");
  }

  .bu-glow--b {
    --x: 240.55;
    --y: 636.13;
    --w: 37.91;
    --h: 58.74;
    --gw: 35;
    --gh: 57;
    --rot: -2.97deg;
    --img: url("/wp-content/uploads/2026/09/glow-2.png");
  }

  .bu-logo {
    --x: 104;
    --y: 16;
    --w: 232;
    --h: 51;
  }

  .bu-headline {
    --x: 35;
    --y: 79;
    --w: 369;
    --h: 42;
  }

  .bu-streak--v {
    --w: 23;
    --h: 292;
    --y: 134;
  }

  .bu-streak--v-left {
    --x: 26;
  }

  .bu-streak--v-right {
    --x: 381;
  }

  .bu-streak--h {
    --w: 180;
    --h: 65;
    --x: 143;
  }

  .bu-streak--h-top {
    --y: 106;
  }

  .bu-streak--h-bottom {
    --y: 435;
  }

  .bu-form {
    --x: 30.2;
    --y: 140;
    --w: 377.7;
    --h: 298.4;
  }

  /* giu font >= 16px de iOS khong tu zoom khi focus */
  .bu-form .form-input input {
    font-size: max(16px, calc(34 * var(--fu)));
    padding: 0 calc(100 * var(--fu)) !important;
  }

  .bu-form .form-input-wrapper p {
    font-size: max(11px, calc(24 * var(--fu)));
  }

  .bu-promos {
    --y: 486;
    left: 0;
    top: calc(var(--y) * var(--u));
    width: calc(440 * var(--u));
    height: calc(115 * var(--u));
  }

  .bu-promos .swiper-slide {
    width: calc(209 * var(--u));
    height: calc(95 * var(--u));
  }

  .bu-hero .bu-dots {
    left: calc(120 * var(--u));
    top: calc(610 * var(--u));
    width: calc(200 * var(--u));
    height: calc(11 * var(--u));
    gap: calc(9 * var(--u));
  }

  .bu-hero .bu-dots .swiper-pagination-bullet {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
  }

  .bu-hero .bu-dots .swiper-pagination-bullet-active {
    width: calc(11 * var(--u));
    height: calc(11 * var(--u));
    box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 255, 255, 0.9);
  }

  .bu-social {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Man hinh rat thap (landscape dien thoai) — cho phep cuon
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  .bu-hero {
    --u: calc(100vw / 440);
    height: auto;
  }

  .bu-stage {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }
}