/* Button base style plus per-screen button image variants. */
.br-btn {
  display: inline-block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.br-btn > span { display: none; }
/* .br-btn's own display:inline-block otherwise wins over the UA [hidden] rule. */
.br-btn[hidden] { display: none; }

.br-btn-bat-dau,
.br-btn-the-le,
.br-btn-xac-nhan,
.br-btn-chot-don,
.br-btn-chia-se,
.br-btn-tai-anh,
.br-btn-quay-lai-main {
  width: 225px;
  height: 79px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .15s ease;
}
.br-btn-bat-dau       { background-image: url("../images/btn-bat-dau.png"); }
.br-btn-the-le        { background-image: url("../images/btn-the-le.png"); }
.br-btn-xac-nhan      { background-image: url("../images/btn-chot-don.png"); }
.br-btn-chot-don      { background-image: url("../images/btn-chot-don.png"); }
.br-btn-chia-se       { background-image: url("../images/btn-chia-se.png"); }
.br-btn-tai-anh       { background-image: url("../images/btn-tai-anh.png"); }
.br-btn-quay-lai-main { background-image: url("../images/btn-quay-lai-main.png"); }

/* Wide "Tôi đã đọc và đồng ý với thể lệ" button - only used inside the rules
   popup (see footer.php / rules.css). Its own size because the art is a long
   pill (762x89), not the square-ish CTA shape the group above shares. */
.br-btn-dong-y {
  width: 460px;
  height: 54px;
  background-image: url("../images/btn-dong-y.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .15s ease;
}

.br-btn:hover { transform: translateY(-2px); }
.br-btn:active { transform: translateY(1px); }
/* Disabled image button (e.g. "đồng ý" before the rules are scrolled through):
   dim it and kill the hover/active lift. */
.br-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.br-btn-chia-se.br-is-loading,
.br-btn-tai-anh.br-is-loading,
.br-btn-quay-lai-main.br-is-loading { opacity: .5; pointer-events: none; }

.br-action-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Row variant: Chốt đơn + Quay lại side by side instead of stacked. Used on the
   photo screen, where two full-height buttons stacked would run past the bottom
   of the 850px stage. Mobile keeps them stacked (the row would be too wide for
   the narrow layout). */
@media (min-width: 721px) {
  .br-action-stack--row {
    flex-direction: row;
    gap: 14px;
  }
}

.br-screen.br-is-popup-backdrop .br-action-stack {
  /* !important (not `animation: none`) so toggling this class never flips the
     `animation` property itself - doing that would change animation-name and
     restart the entrance animation (with its slide/fade-in) when the popup
     closes and this class is removed again. */
  opacity: 0.35 !important;
  pointer-events: none;
}

@media (max-width: 720px) {
  .br-btn-bat-dau, .br-btn-the-le,
  .br-btn-xac-nhan, .br-btn-chot-don,
  .br-btn-chia-se, .br-btn-tai-anh, .br-btn-quay-lai-main {
    width: 176px;
    height: 62px;
  }

  /* Its own art on mobile (317x90) - a compact block, not the desktop pill
     squished down to an illegible sliver. */
  .br-btn-dong-y {
    width: 232px;
    height: 66px;
    background-image: url("../images/btn-dong-y-mobile.png");
  }

  /* Quay lại is always a secondary action (stacked under a primary CTA), so it
     shouldn't read as equally important - scale it down below the CTA size. */
  .br-btn-quay-lai-main {
    width: 140px;
    height: 49px;
  }

  .br-action-stack {
    position: static;
    top: auto !important;
    transform: none;
    margin: auto auto 20px;
    padding-top: 18px;
    gap: 6px;
  }
}

/* Tablet range: the whole canvas scales down by vw/1440 here, which shrinks
   buttons more than feels tappable/visible — give them a size boost on top
   of that scale so they stay comfortably legible. */
@media (min-width: 721px) and (max-width: 900px) {
  .br-btn-bat-dau, .br-btn-the-le,
  .br-btn-xac-nhan, .br-btn-chot-don,
  .br-btn-chia-se, .br-btn-tai-anh, .br-btn-quay-lai-main {
    width: 320px;
    height: 112px;
  }
  .br-btn-dong-y {
    width: 620px;
    height: 72px;
  }
}
@media (min-width: 901px) and (max-width: 1366px) {
  .br-btn-bat-dau, .br-btn-the-le,
  .br-btn-xac-nhan, .br-btn-chot-don,
  .br-btn-chia-se, .br-btn-tai-anh, .br-btn-quay-lai-main {
    width: 280px;
    height: 98px;
  }
  .br-btn-dong-y {
    width: 560px;
    height: 65px;
  }
}