/*
 * login.css — Login & OTP Modal Styles
 * Figma : Template-Campaign > Login flow (node 31820:7676)
 * Design tokens
 *   Brand/LightOrange : #FDB814
 *   Brand/Orange      : #F7941F
 *   Brand/DarkOrange  : #F47920
 *   Error/Red         : #F42020
 *   Mono/2            : #5E5C62  (label)
 *   Mono/3            : #AAAAAA  (placeholder)
 *   Mono/4            : #E4E4E4  (border)
 * Typography
 *   Title/2    : Inter 600  24px / 30px
 *   Body16/Reg : Inter 400  16px / 26px
 *   Body16/SB  : Inter 600  16px / 26px
 *   Small14    : Inter 400  14px / 18px
 *   Tiny12     : Inter 400  12px / 16px
 */

/* ============================================================
   LOADING DIALOG Z-INDEX FIX
   The global #box_loader is defined with z-index: 9999 in the
   VIB shared CSS, but Bootstrap modals use z-index: 99999.
   Override here so the loader always renders above any modal.
============================================================ */
#vib-v2018-loading {
  z-index: 999999 !important;
}

/* ============================================================
   BOOTSTRAP CSS/JS VERSION MISMATCH FIX
   vendor bootstrap.min.css = Bootstrap 4/5  → .fade:not(.show) { opacity:0 }
   vendor JS                = Bootstrap 3.3.4 → adds .in class, never .show
   Fix: restore Bootstrap 3 fade behaviour for our two modals.
============================================================ */
#popup-login.fade,
#popup-otp.fade {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#popup-login.fade.in,
#popup-otp.fade.in {
  opacity: 1;
}

#popup-otp .modal-login-header {
  margin-bottom: 20px;
  margin-top: 0px;
}

#popup-otp .otp-boxes-wrap {
  margin-bottom: 20px;
}


#popup-login .modal-login-footer {
  margin-bottom: 20px;
  padding-top: 10px;
}


@media only screen and (max-width: 767px) {
  #popup-login .modal-login-footer {
    padding-top: 30px;
  }

  #popup-login .login-global-error {
    margin: 0px;
    margin-top: 20px;
  }

  #popup-login .modal-login-fields {
    margin-bottom: 0px;
  }
}

#popup-login>div>div.modal-content {
  padding: 10px 10px 10px 30px;
}

/* ============================================================
   MODAL SHELL  — tablet & desktop: centered
============================================================ */
@media (min-width: 768px) {

  /* Vertically + horizontally center the modal on tablet & desktop.
     Only applied when Bootstrap 3 adds .in (modal is open). */
  #popup-login.in,
  #popup-otp.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #popup-login .modal-dialog {
    width: 100%;
    max-width: 700px;
    /* wider to fit two-column login (form + QR) */
    margin: 30px auto;
  }

  #popup-otp .modal-dialog {
    max-width: 580px;
    margin: 30px auto;
  }
}

#popup-otp .modal-content {
  padding: 30px;
}

#popup-otp .modal-dialog .modal-content {
  padding: 30px;
}

.modal-login-content,
.modal-otp-content {
  position: relative;
  background: #ffffff;
  border-radius: 5px;

  /* body handles internal padding */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  border: none;
  overflow: hidden;
  /* clip QR panel gradient */
}

.login-note {
  color: var(--Mono-Mono---2, #5E5C62);
  font-feature-settings: 'liga' off, 'clig' off;

  /* Super small 12/Super small body regular */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
  margin-top: -15px;
  width: 100%;
}

.login-note a {
  color: var(--Mono-Mono---2, #5E5C62);
  font-feature-settings: 'liga' off, 'clig' off;

  /* Super small 12/Super small body regular */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media only screen and (min-width: 1025px) {

  body.modal-open .modal .modal-content {

    border-radius: 5px !important;

  }

  #popup-general-action-btn.btn-cta::before {
    background: black;
  }

  #popup-general-action-btn:hover {
    color: white;
  }
}

/* ============================================================
   TWO-COLUMN BODY
   Desktop: [form-col | qr-col]
   Mobile : form-col stacks (qr-col hidden)
============================================================ */
.modal-login-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  gap: 30px;
}

/* LEFT column: takes all available space on mobile, fixed half on desktop */
.modal-login-form-col {
  flex: 1 1 0;
  min-width: 0;

}

/* RIGHT column: QR + MyVIB — desktop only */
.modal-login-qr-col {
  display: none;
  /* hidden on mobile */
}

@media (min-width: 1025px) {
  .modal-login-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 0;
    /* equal width with form-col */
    min-width: 0;
    padding: 20px;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffffff 10%, #FFEEE4 100%);
    text-align: center;
  }

  #popup-login .modal-dialog.modal-login-dialog {
    max-width: 700px !important;
    /* wider to fit two-column login (form + QR) */
  }

  .modal-login-qr-img-wrap {
    margin-top: 10px;
  }
}

/* QR "Hoặc" label */
.modal-login-qr-label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* QR image */
.modal-login-qr-img-wrap {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.modal-login-qr-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* QR title */
.modal-login-qr-title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

@media only screen and (min-width: 1025px) {
  .modal-login-qr-title {
    margin-top: 20px;
  }
}


/* QR description */
.modal-login-qr-desc {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  margin: 0;
}

/* ============================================================
   MOBILE: Hoặc divider + MyVIB banner
   Hidden on desktop (≥ 768px)
============================================================ */
.modal-login-myvib-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .modal-login-myvib-mobile {
    display: none;
  }
}

/* Hoặc divider */
.modal-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-login-divider-line {
  flex: 1;
  height: 1px;
  background: #E4E4E4;
}

.modal-login-divider-text {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0;
}

/* MyVIB banner card */
.modal-login-myvib-banner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 15px 20px 15px 80px;
  /* 80px left to make room for the icon */
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFBF8 10%, #FFEEE4 100%);
  position: relative;
}

@media (min-width: 1025px) {
  .modal-login-myvib-banner:hover {
    opacity: 0.85;
  }
}

/* App icon circle */
.myvib-banner-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(140deg, #FFB966 -31.79%, #F37944 45.96%, #E83B24 96.48%);
}

.myvib-banner-icon img {
  /* invert white + slight brightness to show on dark bg */
  filter: brightness(0) invert(1);
  width: 28px;
  height: auto;
}

/* Text block */
.myvib-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.myvib-banner-title {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000000;
  margin: 0;
  text-decoration: none !important;
}

.myvib-banner-title::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 12px;
  background: url('/static/bts-world-tour-visa-2/images/icons/arrow-black.svg') center / contain no-repeat;
  vertical-align: middle;
  margin-left: 6px;
  margin-bottom: 2px;
}

.myvib-banner-title:hover,
.myvib-banner-title:focus {
  color: #000000;
  text-decoration: none;
}

.myvib-banner-desc {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #000000;
  margin: 0;
  text-decoration: none;
}

/* ============================================================
   CLOSE BUTTON
============================================================ */
.modal-login-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.modal-login-close:hover {
  opacity: 1;
}

/* ============================================================
   HEADER  (icon + title)
============================================================ */
.modal-login-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  margin-top: 25px
}

#popup-logout .modal-login-header {
  margin: 0px;
  gap: 20px;
}

.modal-login-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: flex-start;
  overflow: visible;
}

.modal-login-title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #000000;
  margin: 0;
}

/* ============================================================
   FIELDS GRID  (2-col, wraps on mobile)
============================================================ */
.modal-login-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-bottom: 30px;
}

.login-field-wrap {
  flex: 1 0 calc(50% - 15px);
  min-width: 220px;
  position: relative;
}

/* Reserve space only while the field actually has an error */
.login-field-wrap:has(> .login-input-wrap.has-error) {
  padding-bottom: 20px;
}

/* ============================================================
   UNDERLINE INPUT  (Figma floating-label style)
============================================================ */
.login-input-wrap {
  position: relative;
  padding-top: 22px;

  /* Figma: Mono/4 */
  transition: border-color 0.2s;
}

.login-input-wrap:not(.has-error) input {
  /* room for floating label */
  border-bottom: 1px solid #aaaaaa;
}

@media only screen and (min-width: 1025px) {

  .login-input-wrap:not(.has-error):hover input {
    border-bottom-color: #000000;
    border-bottom: 2px solid #000000;
  }
}

/* Focused + empty → black (first click, no value yet) */
.login-input-wrap:focus-within {
  border-bottom-color: #000000;
}

/* Error → red */
.login-input-wrap.has-error {
  border-bottom-color: #F42020;
  border-bottom: 2px solid #F42020;
}


/* The actual text input */
.login-input {
  display: block;
  width: 100%;
  height: 28px;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  padding: 0 0 2px 0;
  box-sizing: border-box;
}

/* Right-pad inputs that have an icon */
.login-input--icon {
  padding-right: 32px;
}

/* Placeholder color */
.login-input::placeholder {
  color: #AAAAAA;
}

/* ============================================================
   FLOATING LABEL
============================================================ */
.login-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #5E5C62;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px);
  transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease, line-height 0.15s ease;
}

/* Label floats up when input has value (via :not(:placeholder-shown)) or is focused */
.login-input-wrap:focus-within .login-label,
.login-input:not(:placeholder-shown)~.login-label {
  top: 4px;
  transform: none;
  font-size: 14px;
  line-height: 18px;
}

/*
 * Static label — always shown at top.
 * Used for DOB because it has a visible placeholder ("DD/MM/YYYY")
 * and must show its label at all times (mirrors Figma node 31518:33141).
 */
.login-label--static {
  top: 4px;
  transform: none;
  font-size: 14px;
  line-height: 18px;
}

/* ============================================================
   INLINE ICON (calendar / card)
============================================================ */
.login-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  line-height: 0;
}

/* ============================================================
   JQUERY VALIDATE ERROR MESSAGE
   errorElement: "span", errorClass: "invalid"
   Placed after .login-input-wrap via errorPlacement callback.
============================================================ */
.login-field-wrap>span.invalid {
  position: absolute;
  bottom: 2px;
  left: 0;
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #F42020;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Global error — shown inline below fields (e.g. 404 wrong credentials) */
.login-global-error {
  margin: 0 0 12px;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #F42020;
}

/* ============================================================
   FOOTER  (submit button — right-aligned)
============================================================ */
.modal-login-footer {
  display: flex;
  justify-content: flex-end;

}

.login-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 130px;
  padding: 0 30px;
  background: #FDB814;
  color: #000000;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}



@media only screen and (min-width: 1025px) {
  .login-btn-submit:hover {
    background: black;
    color: white;
  }
}



.login-btn-submit:disabled {
  background: #E4E4E4;
  cursor: not-allowed;
}

/* ============================================================
   OTP MODAL — phone hint
============================================================ */
.otp-phone-hint {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  margin: 0 0 20px 0;
}

/* ============================================================
   OTP BOXES  (6 individual digit inputs — Figma 50×50 rounded)
============================================================ */
.otp-boxes-wrap {
  display: flex;
  gap: 25px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.otp-box {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  outline: none;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-box:focus {
  border-color: #F39423 !important;

}

/* Filled state */
.otp-box.otp-box--filled {
  border-color: #E4E4E4;
}

/* ============================================================
   OTP — global error (below boxes)
============================================================ */
.otp-global-error {
  display: block;
  margin-bottom: 12px;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #F42020;
}



/* ============================================================
   OTP COUNTDOWN
============================================================ */
.otp-timer-wrap {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  margin-bottom: 20px;
}

.otp-timer-wrap .otp-countdown-value,
.otp-timer-wrap strong {
  color: var(--Mono-Mono---1, #000);
  font-feature-settings: 'liga' off, 'clig' off;

  /* Body 16/Semibold */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
}


.otp-countdown-value {
  font-weight: 600;
  color: #000000;
}

/* ============================================================
   OTP RESEND LINK
============================================================ */
.otp-resend-wrap {
  margin-bottom: 20px;
}

.otp-resend-link {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: black;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}



@media only screen and (min-width: 1025px) {
  .otp-resend-link:hover {
    color: #F47920;
  }
}

/* ============================================================
   RESPONSIVE
============================================================ */
/* ============================================================
   RESPONSIVE — mobile bottom sheet  (< 768 px)
   Figma: node 31604:52002
============================================================ */
@media (max-width: 767px) {

  /* Lock body when any modal is open — prevents iOS Safari from resizing
     the viewport (and jumping layout) when the virtual keyboard appears.
     Same technique as pws-dev.vib/vn/vay-mua-xe/dang-ky */
  body.modal-open {
    position: fixed;
    width: 100%;
  }

  /* OTP modal: full-screen on mobile so it doesn't reposition when keyboard opens */
  #popup-otp .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  #popup-otp .modal-content {
    height: 100vh;
    overflow-y: auto;
    border-radius: 0;
  }

  /* Pin dialog to bottom of the fixed modal container — login only */
  #popup-login .modal-dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Slide-up animation — login only */
  #popup-login.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #popup-login.fade.in .modal-dialog {
    transform: translateY(0);
  }

  /* Bottom sheet shape: rounded top corners only — login only */
  .modal-login-content {
    border-radius: 20px 20px 0 0 !important;
    padding: 30px 20px calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 90vh;
    overflow-y: auto;
    height: auto;
  }

  /* Stack all fields to 1 column */
  .login-field-wrap {
    flex: 1 0 100%;
    min-width: 0;
  }

  /* OTP boxes: distribute evenly */
  .otp-boxes-wrap {
    gap: 8px;
    justify-content: flex-start;
  }

  .otp-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46px;
    height: 46px;
    font-size: 14px;
    border-radius: 8px;
  }


  .spin-user-sheet-btn__icon {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================
   POST-LOGIN PAGE STATE
   Toggled by JS: $('body').addClass('page-logged-in') on success,
   $('body').removeClass('page-logged-in') on logout.
   Figma: Template-Campaign > node 31838:9966 (Desktop) / 31604:52002 (Mobile)
============================================================ */

/* Hide hero banner when logged in — all breakpoints */
.page-logged-in #section-banner {
  display: none !important;
}

/* Hide pre-login left panel */
.page-logged-in .lucky-wheel-section__content {
  display: none !important;
}

/* Show post-login user panel */
.page-logged-in #spin-user-panel {
  display: flex;
  align-items: center;
}

/* ============================================================
   SPIN USER PANEL  — post-login left panel
   Figma: node 31838:9979  (white card, 347px, shadow)
============================================================ */
#spin-user-panel {
  display: none;
  /* hidden until .page-logged-in */
  /* Flex sizing matches .lucky-wheel-section__content which is flex: 0 0 500px;
     User card is narrower (347px) — we let the card be its natural size and let
     the wheel area take the remaining space via its flex:1. */
  flex: 0 0 auto;
}

.spin-user-card {
  position: relative;
  background: #fff;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(188, 188, 188, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
  width: 347px;
}

/* --- Banner image area --- */
.spin-user-card__banner {
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.spin-user-card__banner-inner {
  width: 100%;
  height: 100%;
  background: url('/static/bts-world-tour-visa-2/images/backgrounds/user-avatar.png') center / cover no-repeat;
}

/* --- Greeting --- */
.spin-user-card__greeting {
  padding: 0 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.spin-greeting-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Mobile sheet trigger button — hidden on desktop */
.spin-user-sheet-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.spin-user-sheet-btn__icon {
  width: 14px;
  height: 8px;
  display: block;
  transform: rotate(90deg);
}



.spin-greeting-label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #5E5C62;
  margin: 0;
}

.spin-greeting-name {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #000;
  margin: 0;
}

/* --- Spin count box + CTA --- */
.spin-user-card__body {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spin-count-box {
  background: #FAFAFA;
  border: 1px solid #F2F2F2;
  border-radius: 20px;
  overflow: hidden;
}

.spin-count-box__inner {
  padding: 20px 20px 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

@media screen and (min-width: 767px) {

  .spin-orange-pill {
    position: relative !important;
    border-radius: 0 9999px 9999px 0 !important;
    background: var(--Banner-Fire-Right, linear-gradient(90deg, #F39423 0.14%, #EE511D 99.86%)) !important;
    bottom: 0px !important;
    left: -20px !important;
    text-decoration: none !important;
    isolation: isolate !important;
  }

  .spin-orange-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #1a1a1a;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
  }

  .spin-count-box__row {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .spin-orange-pill {
    color: var(--Mono-Mono---7, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
  }
}

@media only screen and (min-width: 1025px) {
  .spin-orange-pill:hover::before {
    opacity: 1;
  }

  .spin-orange-pill:hover {
    color: white;
  }
}


.spin-count-box__label {
  flex: 1;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #000;
  margin: 0;
}

.spin-count-box__value {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  color: #F47920;
  margin: 0;
  flex-shrink: 0;
}

/* Link inside count box */
.spin-text-btn {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #F47920;
  text-decoration: none;
}

.spin-text-btn:hover {
  color: #F7941F;
}

/* Orange pill CTA — absolute bottom-left of card (Figma: rounded-tr/br 9999px, bottom:20px left:30px) */
.spin-orange-pill {
  position: absolute;
  bottom: 20px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  padding: 7px 20px;
  color: #fff;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 0 9999px 9999px 0;
  text-decoration: none;
  transition: background 0.2s;
  width: fit-content;

  color: var(--Mono-Mono---7, #FFF);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;

  /* Body 16/Semibold */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
}

.spin-orange-pill:hover {
  color: #fff;
}

/* --- Bottom links (Lịch sử quay, Đăng xuất) --- */
.spin-user-card__links {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.spin-link-item {
  display: flex;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
  text-decoration: none !important;
  align-items: center;
}

.spin-link-item:hover {
  color: #F47920;
}

.spin-link-item:hover svg path {
  fill: #F47920;
}

@media (min-width: 1025px) {

  #popup-logout .modal-dialog {
    width: 100%;
    max-width: 580px !important;
    margin: 30px auto;
  }
}

/* ============================================================
   MOBILE BOTTOM SHEET: User actions  (mobile only ≤767px)
   Figma: node 32145:39186
============================================================ */
@media (max-width: 767px) {
  #popup-user-sheet .modal-dialog.modal-user-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #popup-user-sheet.fade .modal-dialog.modal-user-sheet {
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #popup-user-sheet.fade.in .modal-dialog.modal-user-sheet {
    transform: translateY(0);
  }

  .user-sheet-content {
    border-radius: 20px 20px 0 0 !important;
    border: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    max-height: 90vh;
    height: auto;
    padding-bottom: 80px;
  }
}

/* On desktop: hide the bottom sheet entirely */
@media (min-width: 768px) {
  #popup-user-sheet {
    display: none !important;
  }
}

/* Bottom sheet inner content styles (used only on mobile, but defined globally
   so Bootstrap doesn't need to re-parse inside media queries) */
.user-sheet-content {
  border: none;
}

/* Header row: gray background, name + X close */
.user-sheet-header {
  background: #F2F2F2;
  padding: 20px 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.user-sheet-username {
  flex: 1;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
  margin: 0;
  padding-bottom: 20px;
}

.user-sheet-close {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}

/* Action rows: white bg with bottom separator */
.user-sheet-row {
  background: #fff;
  padding: 20px 20px 0;

}

.user-sheet-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000 !important;
  text-decoration: none !important;
  padding-bottom: 20px;
  box-shadow: 0 -1px 0 0 #E4E4E4 inset;
}

.icon-back {
  display: flex;
  align-items: center;
}


@media only screen and (min-width: 1025px) {

  .user-sheet-link:hover,
  .user-sheet-link:focus {
    color: #F47920;
    text-decoration: none !important;
  }

}


/* ============================================================
   LOGOUT CONFIRMATION MODAL
   Figma: node 31905:19603  (max-width 580px, padding 40 30)
============================================================ */
#popup-logout.fade {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#popup-logout.fade.in {
  opacity: 1;
}

@media (min-width: 768px) {
  #popup-logout.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #popup-logout .modal-dialog {
    width: 100%;
    max-width: 580px;
    margin: 30px auto;
  }
}

.modal-logout-content {
  position: relative;
  background: #fff;
  border-radius: 5px !important;
  padding: 40px 30px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  border: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  left: 0;
}

.modal-logout-title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  margin: 0;
}

.modal-logout-body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000;
  margin: 0;
}

.modal-logout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.logout-cancel-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}

.logout-cancel-btn:hover {
  color: #F47920;
}

.logout-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 130px;
  padding: 0 30px;
  background: #FDB814;
  color: #000;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

.logout-confirm-btn:hover {
  background: black;
  color: white;
}



/* Mobile: bottom sheet for logout popup */
@media (max-width: 767px) {
  #popup-logout .modal-dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #popup-logout.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #popup-logout.fade.in .modal-dialog {
    transform: translateY(0);
  }

  .modal-logout-content {
    border-radius: 20px 20px 0 0 !important;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    max-height: 90vh;
    overflow-y: auto;
    height: auto;
  }

  .modal-logout-actions {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    display: flex;
  }
}

@media only screen and (min-width: 1025px) {
  #popup-login .modal-login-fields {
    margin-bottom: 20px;
  }

  #popup-login .login-global-error {
    margin: 0px;
  }
}


/* Mobile: user panel condensed strip layout */
@media (max-width: 767px) {
  #spin-user-panel {
    width: 100%;
  }

  /* Remove card chrome on mobile */
  .spin-user-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 0;
    gap: 0;
    overflow: visible;
    /* allow banner to break out of container-inner padding */
  }

  /* Show card banner on mobile (177px, user-avatar.png) — replaces the hidden hero banner */
  /* Break out of .container-inner's 20px side padding to reach full 100vw */
  .spin-user-card__banner {
    display: block;
    height: 177px;
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  /* Greeting: row layout with sheet button — Figma: pt-30 pb-15 pl-20 pr-10 */
  .spin-user-card__greeting {
    padding: 30px 0px 15px 10px;
    flex-direction: row;
    align-items: center;
  }

  .spin-greeting-label {
    font-size: 12px;
    line-height: 16px;
  }

  .spin-greeting-name {
    font-size: 20px;
    line-height: 24px;
  }

  /* Show the sheet trigger button on mobile */
  .spin-user-sheet-btn {
    display: flex;
  }

  /* Body: column layout, extra padding-bottom for absolute pill */
  .spin-user-card__body {
    padding: 0px;
    flex-direction: column;

  }

  /* Count box: keep bg/border with Figma mobile values */
  .spin-count-box {


    border-radius: 15px;
    border: 1px solid var(--Mono-Mono---5, #F2F2F2);
    background: var(--Mono-Mono---6, #FAFAFA);
  }

  .spin-count-box__inner {
    padding: 15px 20px;
    gap: 8px;
  }

  /* Stack label above value on mobile */
  .spin-count-box__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 40px;
  }

}


@media only screen and (max-width: 767px) {

  .spin-count-box__label {
    color: #5E5C62;
  }
}


.spin-count-box__value {
  font-feature-settings: 'liga' off, 'clig' off;

  /* Title/Larger Title */
  font-family: Inter;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  /* 133.333% */
}

/* Hide text link inside count box on mobile */
.spin-text-btn {
  display: none;
}

@media screen and (max-width: 767px) {

  /* Orange pill: absolute bottom-right, left-rounded only (Figma: rounded-tl/bl 9999px, right:20px bottom:14px) */
  .spin-orange-pill {
    position: absolute;
    bottom: 14px;
    right: 0px;
    left: auto;
    border-radius: 9999px 0 0 9999px;
    padding: 8px 15px 8px 20px;
    white-space: nowrap;

    border-radius: 9999px 0 0 9999px;
    background: var(--Banner-Fire-Right, linear-gradient(90deg, #F39423 0.14%, #EE511D 99.86%));
    text-decoration: none !important;
  }

  .spin-user-card__links {
    display: none;
  }
}





/* ============================================================
   HEADER — BREADCRUMB + POST-LOGIN STATE
   Figma: node 31905:15000 (Header / Desktop 2026)
   - White bg + bottom border in post-login state
   - "VISA Lucky Draw" breadcrumb on left
============================================================ */

/* Breadcrumb: hidden by default (pre-login header is transparent over hero) */
.header-breadcrumb {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.header-breadcrumb__text {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
  white-space: nowrap;
}

/* Post-login: header becomes part of document flow with white background */
/* .page-logged-in .vib-header { */
/* position: relative !important; */
/* border-bottom: 1px solid #E4E4E4; */
/* } */

/* Post-login: show breadcrumb */
.page-logged-in .header-breadcrumb {
  display: flex;
  align-items: center;
}

/* ============================================================
   POST-LOGIN SECTION-SPIN — white background
   Figma: 31838:9966 — post-login section has white bg, not navy
============================================================ */
.page-logged-in .prizes-section__dark-band,
.page-logged-in .lucky-wheel-section {
  background: #fafafa !important;
}

@media only screen and (max-width: 767px) {
  .page-logged-in .lucky-wheel-section {
    background: #fff !important;
  }
}

.page-logged-in .prizes-section__title,
.page-logged-in .prizes-section__subtitle {
  color: #000 !important;
}



/* Wheel wrap becomes a column layout to stack countdown above wheel */
.page-logged-in .lucky-wheel-section__wheel-wrap {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

/* ── Post-login wheel sizes ──────────────────────────────────
   Desktop ≥ 1025px : 450px (default was 437px)
   Tablet  768–1024 : 389px (default was 330px)
   Mobile  ≤ 767px  : 330px (unchanged)
   centerBtn scales proportionally (width/height ratio preserved)
============================================================ */
@media (min-width: 1025px) {
  .page-logged-in #wheelWrap {
    width: 450px;
    height: 450px;
  }

  .page-logged-in #centerBtn {
    width: 121px;
    height: 147px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-logged-in .lucky-wheel-section__wheel-wrap {
    flex: 0 0 420px;
    width: 420px;
  }

  .page-logged-in #wheelWrap {
    width: 389px;
    height: 389px;
  }

  .page-logged-in #centerBtn {
    width: 111px;
    height: 136px;
  }

  .page-logged-in .spin-user-card {
    width: 309px;
  }

  .page-logged-in .spin-user-card__banner {
    height: 150px;
  }

  .page-logged-in .lucky-wheel-section__inner {
    justify-content: space-between;
  }


}

@media only screen and (max-width: 1025px) {
  .page-logged-in #section-spin {
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: 0 1px 5px 0 rgba(188, 188, 188, 0.25);
    z-index: 1;
    position: relative;
  }
}

@media only screen and (max-width: 767px) {
  .page-logged-in #section-spin {
    padding-top: 0px !important;
  }
}

/* ============================================================
   SPIN COUNTDOWN CONTAINER
   States: --upcoming (gray, red error, add-to-cal btn)
           --active   (orange boxes, fire emoji, no btn)
           --ended    (gray boxes, all zeros, no btn)
============================================================ */
.spin-countdown-wrap {
  display: none;
  /* hidden until .page-logged-in */
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.page-logged-in .spin-countdown-wrap {
  display: flex;
}

/* ── Title row ─────────────────────────────────────────── */
.spin-countdown__title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: #000;
  text-align: center;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Fire icons — hidden by default, shown only in active state */
.spin-countdown__fire {
  display: none;
  font-style: normal;
}

.spin-countdown-wrap--active .spin-countdown__fire {
  display: inline;
}

/* ── Timer row ─────────────────────────────────────────── */
.spin-countdown__timer {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* ── Default (upcoming) box: gray ──────────────────────── */
.countdown-box {
  width: 50px;
  height: 50px;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-box__val {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #000;
}

.countdown-unit__label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #000;
  text-align: center;
}

/* ── Active state: orange boxes + orange text ──────────── */
.spin-countdown-wrap--active .countdown-box {
  background: rgba(244, 121, 32, 0.14);
}

.spin-countdown-wrap--active .countdown-box__val {
  color: #F47920;
}

.spin-countdown-wrap--active .countdown-unit__label {
  color: #F47920;
}


/* ── Error text: upcoming only ──────────────────────────── */
.spin-countdown__error {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #F42020;
  text-align: center;
  margin: 4px 0 0;
}

.spin-countdown-wrap--active .spin-countdown__error,
.spin-countdown-wrap--ended .spin-countdown__error {
  display: none;
}

/* ── "Thêm vào lịch" button: upcoming only ─────────────── */
.spin-countdown__add-cal {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  min-width: 160px;
  padding: 0 24px;
  border-radius: 25px;
  background: #e4e4e4;
  color: #000;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
  margin-top: 4px;
  transition: background 0.15s;
}

.spin-countdown__add-cal:hover,
.spin-countdown__add-cal:focus {
  background: #d4d4d4;
  color: #000;
  text-decoration: none;
}

.spin-countdown-wrap--upcoming .spin-countdown__add-cal {
  display: inline-flex;
}

/* Mobile: countdown boxes slightly smaller */
@media (max-width: 767px) {
  .spin-countdown__timer {
    gap: 16px;
  }

  .countdown-box {
    width: 44px;
    height: 44px;
  }

  .countdown-box__val {
    font-size: 20px;
    line-height: 26px;
  }

  .spin-countdown__add-cal {
    font-size: 14px;
    height: 42px;
    min-width: 140px;
    padding: 0 20px;
  }
}

/* ============================================================
   EXCHANGE SPIN MODAL
   Figma: Desktop 31763:14082 / Mobile 31714:11097
   Multi-card dropdown: 31707:5890
============================================================ */

#popup-exchange.fade {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#popup-exchange.fade.in {
  opacity: 1;
}

#popup-exchange>div>div.modal-content {
  border-radius: 5px;
  background: var(--Mono-Mono---7, #FFF);
}

@media only screen and (min-width: 1025px) {
  #popup-exchange .modal-dialog {
    width: 100%;
    max-width: 580px !important;
    margin: 30px auto;
  }


}

#exch-spin-max {
  color: var(--Mono-Mono---3, #AAA);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

@media (min-width: 768px) {
  #popup-exchange.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #popup-exchange .modal-dialog {
    width: 100%;
    max-width: 580px;
    margin: 30px auto;
  }
}

.exchange-content {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 50px 30px 30px 30px;

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  border: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Close button */
.exchange-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Title */
.exchange-title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  margin: 0;
}

/* ── Card section (gray bg) ───────────────────────────────── */
.exchange-card-section {
  background: #F2F2F2;
  border-radius: 10px;
  overflow: visible;
}

/* Card header row: "Thẻ của bạn" + selector */
.exchange-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  min-height: 56px;
}

.exchange-card-label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
}

/* Card selector button: [VISA] ••• 9999 ↓ */
.exchange-card-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  max-height: 25px;
  position: relative;
  isolation: isolate;
}

.exchange-card-selector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 153px;
  height: 42px;
  border-radius: 9999px;
  background: #E4E4E4;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

@media only screen and (min-width: 1025px) {
  .exchange-card-selector:not(.is-single):hover::before {
    opacity: 1;
  }
}



/* VISA badge */
.exchange-visa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 20px;
  flex-shrink: 0;
  line-height: 0;
}

.exchange-visa-badge svg {

  display: block;
}

.exchange-card-number {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
}

.exchange-card-chevron {
  flex-shrink: 0;
  transform: rotate(180deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.exchange-card-chevron.is-open {
  transform: rotate(0deg);
}

/* Card dropdown panel */
.exchange-card-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 20;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  min-width: 203px;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}

.exchange-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .exchange-dropdown-item:hover {
    background: #F2F2F2;
  }
}

.exchange-dropdown-number {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
  flex: 1;
}

/* Checkmark — visible only on selected item */
.exchange-dropdown-check {
  flex-shrink: 0;
  width: 28px;
  height: 30px;
  visibility: hidden;
}

.exchange-dropdown-item.is-selected .exchange-dropdown-check {
  visibility: visible;
}

/* Horizontal dividers within card section */
.exchange-card-divider {
  height: 1px;
  background: #E4E4E4;
  margin: 0 20px;
}

/* Spin counter row */
.exchange-spin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: white;
  position: relative;
  border-radius: 10px 10px 0 0;
}

.exchange-spin-row::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  pointer-events: none;
  border-left: 2px solid #f2f2f2;
  border-right: 2px solid #f2f2f2;
  border-top: 2px solid #f2f2f2;
  border-radius: 10px 10px 0px 0px;
  z-index: 1;
}

.exchange-spin-label {
  color: var(--Mono-Mono---2, #5E5C62);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;

  /* Body 16/Regular */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
}

/* Counter: [−] [0/8] [+] */
.exchange-counter {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exchange-counter-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.exchange-counter-btn:hover:not(:disabled) {
  background: #F2F2F2;
}

.exchange-counter-btn:disabled {
  opacity: 0.35;
}

.exchange-counter-display {
  min-width: 55px;
  height: 50px;
  border: 1.5px solid #E4E4E4;
  border-radius: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
  gap: 2px;
}

/* Points summary: 3-column grid (desktop) */
.exchange-points-summary {
  display: flex;
  padding: 20px;
  gap: 0;
  position: relative;
  background-color: white;
}


.exchange-points-summary::after {
  content: "";
  position: absolute;

  height: 1px;
  left: 20px;
  right: 20px;
  top: 0px;
  pointer-events: none;
  border-top: 1px solid #f2f2f2;
}

.exchange-points-summary::before {
  content: "";
  position: absolute;
  border-top: 0px;
  border-radius: 0 0 10px 10px;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  pointer-events: none;
  border: 2px solid var(--Mono-Mono---5, #F2F2F2);
  border-top: none;
}

.exchange-points-item {
  flex: 1;
}

.exchange-points-label {
  color: var(--Mono-Mono---2, #5E5C62);
  font-feature-settings: 'liga' off, 'clig' off;

  /* Body 16/Regular */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  margin: 0;
}

.exchange-points-value {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
  margin: 0;
}

.exchange-points-value.is-negative {
  color: #F42020;
}

/* Info text */
.exchange-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exchange-info-line {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: black;
  margin: 0;
}

.exchange-info-line strong {
  font-weight: 600;
  color: #000;
}

/* Action button */
.exchange-actions {
  display: flex;
  justify-content: flex-end;
}

.exchange-submit-btn {
  height: 48px;
  min-width: 125px;
  padding: 0 20px;
  background: #FDB814;
  color: #000;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

.exchange-submit-btn:hover:not(:disabled) {
  background: black;
  color: white;
}



.exchange-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inline validation error (Figma: Additional/Error Red #F42020) */
.exchange-error {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #F42020;
  margin: 0;
  margin-top: -10px;
  margin-bottom: -5px;
}

/* ── Mobile: bottom sheet + vertical points ───────────────── */
@media (max-width: 767px) {
  #popup-exchange .modal-dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #popup-exchange.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #popup-exchange.fade.in .modal-dialog {
    transform: translateY(0);
  }

  .exchange-content {
    border-radius: 20px 20px 0 0 !important;
    height: auto;
    padding: 30px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  }

  /* Vertical points layout on mobile */
  .exchange-points-summary {
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 16px;
  }

  .exchange-points-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;

  }

  .exchange-points-item:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   Bootstrap Datepicker overrides — loginDob
   ============================================================ */

/* Mobile: hide datepicker calendar — user types DD/MM/YYYY manually */
@media (max-width: 767px) {
  .datepicker.datepicker-dropdown {
    display: none !important;
  }
}

/* Datepicker popup — fixed to viewport so it sits above the modal correctly */
.datepicker.datepicker-dropdown {
  position: fixed !important;
  z-index: 1999200 !important;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px !important;
  padding: 6px 8px !important;
  width: 260px !important;
  min-width: 0 !important;
  max-width: 260px !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

.datepicker.datepicker-dropdown .datepicker-years table,
.datepicker.datepicker-dropdown .datepicker-months table {
  width: 100% !important;
}

/* Compact table */
/* .datepicker.datepicker-dropdown table {
  width: auto !important;
  min-width: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
} */

.datepicker.datepicker-dropdown table tr td,
.datepicker.datepicker-dropdown table tr th {
  width: 30px !important;
  height: 26px !important;
  min-width: 0 !important;
  max-width: 30px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 26px !important;
  text-align: center !important;
  border-radius: 4px;
  box-sizing: border-box !important;
}

/* Header row (month/year title + arrows) */
.datepicker.datepicker-dropdown .datepicker-switch {
  font-size: 12px !important;
  font-weight: 600;
}

.datepicker.datepicker-dropdown .prev,
.datepicker.datepicker-dropdown .next,
.datepicker.datepicker-dropdown .datepicker-switch {
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 4px !important;
}

/* Day-of-week headers */
.datepicker.datepicker-dropdown .dow {
  font-size: 11px !important;
  color: #888;
  font-weight: 500;
}

/* Calendar icon on the DOB field — pointer cursor, allow typing caret */
#loginDob {
  cursor: text;
}

/* ============================================================
   DOB compact card — VIB "Chọn ngày" style
============================================================ */
.login-field-wrap--dob {
  flex: 1 0 calc(50% - 15px);
  /* same as other fields — fill the column */
  min-width: 220px;
}

.login-input-wrap--dob {
  position: relative;
  padding-top: 20px;
  border-bottom: 1px solid #E4E4E4;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  /* fill the field wrapper */
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media only screen and (max-width: 1025px) {
  .login-input-wrap--dob {
    border-bottom: none;
  }
}

.login-input-wrap--dob:focus-within {
  border-bottom-color: #000;
}

.login-input-wrap--dob.has-error {
  border-bottom-color: #F42020;
  border-bottom: 2px solid #F42020;
}

/* Static label — pinned to top like floated labels on other fields */
.login-input-wrap--dob .login-label--static {
  position: absolute;
  left: 0;
  top: 4px;
  transform: none;
  font-size: 14px;
  line-height: 18px;
  color: #5E5C62;
  transition: none;
  pointer-events: none;
}

/* Row: input + icon side by side */
.login-dob-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The actual date text input */
.login-input--dob {
  flex: 1;
  min-width: 0;
  height: 30px;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
  padding: 0 0 2px 0;
  box-sizing: border-box;
  cursor: text;
}

.login-input--dob::placeholder {
  color: #AAAAAA;
}

/* Calendar icon inside card — static (not absolute) */
.login-icon--dob {
  position: static;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 0;
  position: absolute;
}

/* Highlight today & selected date with VIB yellow/gold */
.datepicker-dropdown table tr td.today,
.datepicker-dropdown table tr td.today:hover,
.datepicker-dropdown table tr td.today.disabled,
.datepicker-dropdown table tr td.today.disabled:hover {
  background-color: #FFF3CD;
  border-color: #FFD600;
  color: #333;
}

#content .datepicker-days>table tr>td.active,
.datepicker-dropdown table tr td.active,
.datepicker-dropdown table tr td.active:hover,
.datepicker-dropdown table tr td.active.disabled,
.datepicker-dropdown table tr td.active.disabled:hover {
  background-color: #FFD600 !important;
  background-image: none !important;
  border-color: #E6C200 !important;
  color: #000 !important;
  text-shadow: none !important;
  border-radius: unset !important;
}

/* Disabled (future) dates — visually greyed out, no pointer */
.datepicker-dropdown table tr td.disabled,
.datepicker-dropdown table tr td.disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Past/valid dates — pointer + hover highlight on desktop only */
@media (min-width: 1025px) {
  .datepicker-dropdown table tr td:not(.disabled):not(.active):not(.today) {
    cursor: pointer;
  }

  .datepicker-dropdown table tr td:not(.disabled):not(.active):not(.today):hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }
}

/* Remove the black ::after underline the vendor CSS adds to active/today cells */
.datepicker-days>table tr>td.active::after,
.datepicker-days>table tr>td.today::after,
.datepicker-days>table tr>td.today.active::after {
  display: none !important;
  border: none !important;
}

.datepicker thead tr i::after {
  top: 7px !important;
}

.datepicker thead tr i.next::after {
  left: 18px !important;
}

/* Nav arrows colour */
.datepicker-dropdown .prev,
.datepicker-dropdown .next {
  color: #333 !important;
  font-size: 18px !important;
  font-weight: 700;
  width: 32px !important;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}

.datepicker-dropdown .prev:hover,
.datepicker-dropdown .next:hover {
  color: #000 !important;
  background-color: #f0f0f0 !important;
}

/* Hide next arrow when endDate reached (datepicker adds .disabled) */
.datepicker-dropdown .next.disabled {
  visibility: hidden !important;
}

/* ============================================================
   SPIN RESULT OVERLAY  — Full-screen, matches Figma design
   Dark bg, colorful confetti, prize cards, action buttons
============================================================ */

/* ── Full-screen backdrop ─────────────────────────────────── */
.spin-overlay {
  position: fixed;
  inset: 0;
  z-index: 999000;
  background: rgba(14, 14, 14, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.spin-overlay.is-visible {
  opacity: 1;
}

/* ── Confetti canvas fills entire overlay ─────────────────── */
.spin-overlay__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Centered body ────────────────────────────────────────── */
.spin-overlay__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 24px 32px;
  max-width: 760px;
  width: 100%;
}

/* ── Title ────────────────────────────────────────────────── */
.spin-overlay__title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 40px;
  max-width: 600px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  animation: spin-title-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes spin-title-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── GRAND PRIZE row ──────────────────────────────────────── */
.spin-grand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  animation: spin-prize-in 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes spin-prize-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spin-grand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 160px;
}

.spin-grand-item--ticket {
  width: 300px;
}

.spin-grand-item--ticket img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spin-grand-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spin-grand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.spin-grand-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

/* BTS ticket card (styled, matches Figma white concert ticket) */
.spin-ticket-card {
  width: 200px;
  height: 140px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 12px;
  box-sizing: border-box;
}

.spin-ticket-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.spin-ticket-card__tag {
  font-size: 11px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.12em;
}

.spin-ticket-card__title {
  font-size: 16px;
  font-weight: 900;
  color: #CC0000;
  text-align: center;
  line-height: 1.2;
  font-style: normal;
}

.spin-ticket-card__title em {
  font-style: normal;
  color: #111;
  font-size: 13px;
}

.spin-ticket-card__dots {
  font-size: 12px;
  color: #444;
  letter-spacing: 0.2em;
  margin-top: 2px;
}

/* ── VOUCHER card ─────────────────────────────────────────── */
.spin-overlay__voucher {
  margin-bottom: 32px;
  animation: spin-prize-in 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.spin-voucher-card {
  width: 120px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 19px 0 rgba(255, 255, 255, 0.50);
}

.spin-voucher-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #22376D;
  text-align: center;
  padding: 16px 12px 12px;
  line-height: 1.4;
  border-bottom: 1.5px dashed #D0D0D0;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}

.spin-voucher-card__badge {
  display: block;
  background: #22376D;
  color: #FFD600;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 8px 0;
  width: 100%;
  text-align: center;
  border-top: 1.5px dashed #adb8d3;
}

/* ── Share box ────────────────────────────────────────────── */
.spin-share-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  box-sizing: border-box;
  animation: spin-title-in 0.45s 0.3s both;
}

.spin-share-box__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  white-space: nowrap;
}

.spin-share-box__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.spin-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.spin-share-btn:hover {
  transform: scale(1.1);
}

.spin-share-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.spin-share-btn--copy,
.spin-share-btn--fb  {
  background: #fff;
  color: #000;
}

.spin-share-toast {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 6px;
  pointer-events: none;
  animation: spin-title-in 0.2s ease both;
  z-index: 10;
}

/* ── Action buttons ───────────────────────────────────────── */
.spin-overlay__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
  animation: spin-title-in 0.45s 0.25s both;
}

.spin-overlay__btn-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 4px;
  transition: color 0.15s;
}

.spin-overlay__btn-close:hover {
  color: #fff;
}

.spin-overlay__btn-spin {
  background: #FFD600;
  color: #1a1a1a;
  border: none;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(255, 214, 0, 0.4);
}

.spin-overlay__btn-spin:hover {
  box-shadow: 0 6px 22px rgba(255, 214, 0, 0.55);
}

.spin-overlay__btn-spin:active {
  transform: scale(0.97);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .spin-overlay__title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .spin-grand-item {
    width: 110px;
  }

  .spin-grand-item--ticket {
    order: -1;
    flex: 0 0 100%;
  }

  .spin-ticket-card {
    width: 160px;
    height: 120px;
  }

  .spin-ticket-card__title {
    font-size: 13px;
  }

  .spin-share-box {
    max-width: 100%;
    padding: 12px 14px;
  }

  .spin-share-box__label {
    font-size: 13px;
  }

  .spin-share-btn {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   SPIN TOAST — overlay on wheel (Figma: node 32428:158941)
   Triggered by JS showSpinToast(msg)
============================================================ */
.spin-toast {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Circular blur backdrop behind the toast */
.spin-toast__blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}

/* Toast pill */
.spin-toast__box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #F2F2F2;
  border-radius: 14px;
  padding: 10px 10px 10px 15px;
  max-width: 335px;
  min-height: 50px;
  pointer-events: all;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  animation: spin-toast-in 0.2s ease both;
}

@keyframes spin-toast-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.spin-toast__msg {
  flex: 1 0 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #F42020;
  margin: 0;
}

.spin-toast__close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.spin-toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

@media only screen and (min-width: 1025px) {
  #popup-login>div>div.modal-content {
    border-radius: 5px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
  #popup-general>div.modal-dialog>div.modal-content,
  #popup-general>div.modal-dialog,
  #popup-exchange>div.modal-dialog>div.modal-content,
  #popup-exchange>div.modal-dialog,

  #popup-logout>div.modal-dialog>div.modal-content,
  #popup-logout>div.modal-dialog,

  #popup-otp>div.modal-dialog>div.modal-content,
  #popup-otp>div.modal-dialog,
  #popup-login>div.modal-dialog>div.modal-content,
  #popup-login>div.modal-dialog {
    height: 100%;
    max-width: 100vw !important;
  }

  #popup-login>div>div.modal-content {
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .modal-login-header {
    margin-top: 20px;
  }

  #popup-otp .modal-content {
    height: 100vh;
  }
}

/* ============================================================
   IN-APP MODE — hide all logout entry points
   Applied when body has .is_in_app (set by webview.js)
   Covers: header icon, user-card link, bottom-sheet row,
           logout confirmation modal
============================================================ */
body.is_in_app a[onclick*="openLogoutPopup"],
body.is_in_app #popup-user-sheet .user-sheet-row:last-child,
body.is_in_app #popup-logout {
  display: none !important;
}

/* ============================================================
   USER NOT ELIGIBLE DIALOG
============================================================ */
.user-not-eligible,
.user-not-eligible ul,
.user-not-eligible li {
  color: #000;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 26px;
  word-wrap: break-word;


}

.user-not-eligible li {
  list-style: disc;
}


.user-not-eligible ul {
  margin: 4px 0 8px;
  padding-left: 20px;
}

.vspin-section__header, a[x-apple-data-detectors] {
  pointer-events: none;
  text-decoration: none !important;
  -webkit-touch-callout: none;
}