/* ===== Overlay ===== */
.hpps-popup{
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.7) !important;
  z-index: 999999 !important;
}
.hpps-popup.show{ display:flex !important; }

/* ===== Container ===== */
.hpps-popup-content{
  position: relative !important;
  width: min(600px, 92vw) !important;
  margin: 16px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* MAIN background */
.hpps-popup-content.hpps-g8  { background-image: url('../images/g8/g8-bg.png'); }
.hpps-popup-content.hpps-n8  { background-image: url('../images/n8/BG2.png'); }
.hpps-popup-content.hpps-bom { background-image: url('../images/bom/bg.png'); }

/* ADS layout */
.hpps-popup-content.hpps-ads{
  width: min(700px, 92vw) !important;
  background: transparent !important;
  border-radius: 12px !important;
}
.hpps-step-ads{ padding:0 !important; }
.hpps-ads-image{
  display:block;
  width:100%;
  height:auto;
  cursor:pointer;
  border-radius:12px;
}

/* ===== Close ===== */
.hpps-popup-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-size:26px !important;
  line-height:1 !important;
  color:#fff !important;
  background: rgba(0,0,0,.55) !important;
  z-index:10 !important;
  user-select:none !important;
}
.hpps-popup-close:hover{ background: rgba(255,87,87,.85) !important; }

/* ===== Steps ===== */
@media screen and (min-width: 768px) {
  .hpps-step {
    padding: 100px 0 15px;
  }
    }
.hpps-step{
  display:none;
  padding:100px 0 15px;
  text-align:center;
  position:relative;
}
.hpps-step.active{ display:block !important; }

.hpps-step-image{
  width:100%;
  height:auto;
  display:block;
  margin: 0 auto;
}
.hpps-step-bom-image{
  width:90%;
  height:auto;
  display:block;
  margin: 0 auto;
}

.hpps-logo-step {
  width: 120px;
}
@media (min-width: 1366px) {
  .hpps-logo-step {
  width: 200px;
}
}

/* flare */
.hpps-flare-image{
  width:120%;
  position:absolute;
  left:0;
  bottom:-5%;
  z-index:0;
  opacity:.7;
  pointer-events:none;
}

/* CTA */
.hpps-cta-image{
  width:min(360px,80%);
  height:auto;
  margin:10px auto 0;
  display:block;
  cursor:pointer;
  animation: hppsCtaPulse .6s linear infinite;
  position:relative;
  z-index:2;
}
@keyframes hppsCtaPulse{
  0%{ filter:brightness(1.15); transform:scale(1.04); }
  50%{ filter:brightness(1.0); transform:scale(1.0); }
  100%{ filter:brightness(1.15); transform:scale(1.04); }
}

/* Title row */
.hpps-donghanh{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:85%;
  margin:6px auto 10px;
  font-weight:700;
  color:#fff;
  font-size:20px;
}
.hpps-donghanh-image{ width:55%; height:auto; }
.hpps-donghanh-text{ margin-top:6px; }

.hpps-logo-n8{ width:80%; margin-left:15%; }

@media (max-width:768px){
  .hpps-popup-content{ width:min(560px,94vw) !important; }
  .hpps-cta-image{ width:min(320px,85%); }
}