/* 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-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"); }
.br-btn:hover { transform: translateY(-2px); }
.br-btn:active { transform: translateY(1px); }
.br-btn-chia-se.br-is-loading,
.br-btn-tai-anh.br-is-loading { opacity: .5; pointer-events: none; }

.br-btn-quay-lai-text {
  display: inline-block;
  padding: 4px 10px;
  color: #0070ff;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.br-btn-quay-lai-text:hover { opacity: 0.75; }

.br-btn-quay-lai-img {
  display: inline-block;
  width: 104px;
  height: 29px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url("../images/btn-quay-lai-text.png") center / contain no-repeat;
  transition: transform .15s ease;
}
.br-btn-quay-lai-img > span { display: none; }
.br-btn-quay-lai-img:hover { transform: translateY(-2px); }
.br-btn-quay-lai-img:active { transform: translateY(1px); }

.br-action-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.br-screen.br-is-popup-backdrop .br-action-stack {
  visibility: hidden;
}

@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;
  }

  /* Unlike the main CTAs above, this stayed at its desktop size (104x29) —
     too small a tap target on a real mobile screen. */
  .br-btn-quay-lai-img {
    width: 151px;
    height: 42px;
  }

  .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-quay-lai-img {
    width: 148px;
    height: 41px;
  }
}
@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-quay-lai-img {
    width: 128px;
    height: 36px;
  }
}