/* shell */
#tb-shell{
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#0e0f12;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* topbar */
#tb-topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#0b0c0f;
}
#tb-topbar .tb-left{display:flex;align-items:center;gap:10px;}
.tb-logo{font-weight:800;letter-spacing:.5px;}
.tb-icon{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;color:#fff;
  cursor:pointer;
}
#tb-topbar .tb-right{display:flex;align-items:center;gap:10px;}

.tb-btn{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.tb-btn.tb-primary{
  background:#2b77ff;
  border-color:#2b77ff;
}
.tb-btn.tb-ghost{
  background:transparent;
}

/* main layout */
#tb-main{
  flex:1;
  display:flex;
  min-height:0;
}
#tb-sidebar{
  width:74px;
  border-right:1px solid rgba(255,255,255,.08);
  background:#0b0c0f;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
}
.tb-sidebtn{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:1.1;
  padding:8px;
}
#tb-canvas{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding:14px;
  min-width:0;
}
#tb-frame{
  width:420px;
  max-width:100%;
  height:100%;
  border:none;
  background:#000;
  border-radius:14px;
  box-shadow:0 14px 60px rgba(0,0,0,.45);
}

/* gallery bar */
#tb-gallerybar{
  height:140px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0b0c0f;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tb-gallery-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:rgba(255,255,255,.85);
}
.tb-hint{color:rgba(255,255,255,.55);}
#tb-gallery{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
}
#tb-gallery img{
  height:92px;
  border-radius:12px;
  cursor:pointer;
  border:2px solid transparent;
}
.hl-paybox{color:#fff}
.hl-paybox__head{margin-bottom:10px}
.hl-paybox__title{font-weight:900;font-size:18px}
.hl-paybox__sub{opacity:.85;font-size:13px;margin-top:4px}
.hl-paybox__qrwrap{display:flex;justify-content:center;margin:12px 0}
.hl-paybox__qr{width:220px;max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.hl-paybox__info{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
.hl-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hl-row:last-child{border-bottom:0}
.hl-copy{cursor:pointer}
.hl-paybox__hint{opacity:.75;font-size:12px;margin-top:10px}
/* ===== Hinlove Pay Modal ===== */
#hl-pay-modal{ position:fixed; inset:0; z-index:999999; display:none; }
/* Desktop: modal 480px, vừa đủ nội dung */
#hl-pay-modal.open{ display:flex; align-items:center; justify-content:center; padding:20px; }

#hl-pay-modal .hlm-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}

#hl-pay-modal .hlm-card{
  position:relative;
  width:min(480px, 100%);
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  max-height:88vh;
  overflow-y:auto;
  z-index:1;
}

/* Mobile: full width, scroll nếu nội dung dài, không bị cụt */
@media (max-width: 767px) {
  #hl-pay-modal.open{ padding:10px; align-items:flex-end; }
  #hl-pay-modal .hlm-card{
    width:100%;
    padding:16px;
    border-radius:20px 20px 0 0;
    max-height:85dvh;
    overflow-y:auto;
  }
}

#hl-pay-modal .hlm-close{
  position:absolute; right:12px; top:10px;
  width:30px; height:30px;
  border-radius:10px;
  background:#1a1a1a; border:1px solid #333;
  color:#fff; cursor:pointer; font-size:13px;
}

#hl-pay-modal .hlm-title{
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:11px;
  color:#fff;
  margin-bottom:10px;
  padding-right:36px;
}

#hl-pay-modal .hlm-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}

#hl-pay-modal .hlm-btn{
  padding:9px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
  color:#fff;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  opacity: 0.45;
  transition: opacity .2s, transform .15s;
}
#hl-pay-modal .hlm-btn.active,
#hl-pay-modal .hlm-btn:only-child {
  opacity: 1;
  transform: scale(1.03);
}

#hl-pay-modal .hlm-basic{ background:#ff4d6d; border:none; }
#hl-pay-modal .hlm-premium{
  background: linear-gradient(90deg,#ff4d6d,#7c3aed);
  border:none;
}

#hl-pay-modal .hlm-body{
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
}

#hl-pay-modal .hlm-note{
  color:#9ca3af;
  font-size:11px;
  margin-bottom:8px;
}

/* ===== Paybox ===== */
.hl-paybox{
  background:#050505;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
}

.hl-paybox__title{ font-weight:900; color:#fff; margin-bottom:4px; font-size:15px; }
.hl-paybox__sub{ color:#9ca3af; font-size:12px; margin-bottom:10px; }

/* Layout 2 cột: QR trái, info phải */
.hl-paybox__layout{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.hl-paybox__qrwrap{
  flex-shrink:0;
  display:flex;
  justify-content:center;
  padding:6px;
  background:#fff;
  border-radius:10px;
}
.hl-paybox__qr{ width:120px; height:120px; border-radius:6px; display:block; }

.hl-paybox__info{ flex:1; min-width:0; }
.hl-paybox__info .hl-row{
  display:flex; justify-content:space-between; gap:6px;
  padding:5px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:12px;
}
.hl-paybox__info .hl-row span{ color:#9ca3af; white-space:nowrap; }
.hl-paybox__info .hl-row b{ color:#fff; font-weight:800; text-align:right; word-break:break-all; }
.hl-paybox__hint{ color:#9ca3af; font-size:11px; margin-top:10px; line-height:1.5; }

.hl-copy{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; }
/* ===== FORCE WHITE BG - tất cả trang plugin ===== */
html, body {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ===== Demo Modal Mobile ===== */
@media (max-width: 767px) {
  #demoModal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #demoModal main {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    flex-direction: column !important;
    max-height: 92vh;
    overflow-y: auto;
  }
  /* Iframe — chiều cao cố định, không chiếm full */
  #demoModal .w-full.lg\:w-1\/2:first-child {
    height: 45vh;
    flex-shrink: 0;
  }
  #demoIframe {
    aspect-ratio: unset !important;
    height: 100% !important;
    width: 100% !important;
  }
  /* Panel info bên phải → dưới, compact */
  #demoModal .w-full.lg\:w-1\/2.p-10 {
    padding: 1rem !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  #demoModal #modalTier { margin-bottom: 0.75rem !important; }
  #demoModal .space-y-4 { margin-bottom: 0.75rem !important; }
  #demoModal .space-y-4 > div { gap: 0.5rem !important; }
  /* Ẩn QR code trên mobile — không cần */
  #demoModal .flex.flex-col.items-center.justify-center.py-6 { display: none !important; }
  /* Buttons */
  #demoModal .pt-8 {
    padding-top: 0.75rem !important;
    gap: 0.5rem !important;
  }
  #demoModal .pt-8 a,
  #demoModal .pt-8 button {
    padding: 0.75rem !important;
    border-radius: 1rem !important;
    font-size: 10px !important;
  }
}