/* LOP Streak popup viewport/header safety system — v2.8.621
 * Layout-only compatibility layer. It does not change modal handlers or form logic.
 */
body.lopsp-public-body{
  --lop-popup-safe-gap:12px;
  --lop-popup-safe-gap-mobile:6px;
  --lop-popup-layer:2147483647;
  --lop-popup-header-z:60;
  --lop-popup-close-size:42px;
}

/* Keep popup shells above the unified fixed navigation and inside the visual viewport.
 * The global header uses z-index 2147483200 and its floating menu uses 2147483646.
 * A modal must own the top layer so its title and close control cannot be covered.
 */
body.lopsp-public-body :where(
  .lopsp-modal,
  .lopsp-settings-popup,
  .lop-progress-modal,
  .lop-class-modal,
  .lop-study-note-modal,
  .lop-study-lop-modal,
  .lopsp-reminder-modal,
  .lopsp-reminder-calendar-modal,
  .lopsp-event-register-modal,
  .lopsp-like-gift-modal,
  .lop-study-unit-detail-modal,
  .lop-study-vocabulary-card-modal,
  .lop-study-modal,
  .lop-admin-preview-modal,
  .lop-admin-ai-modal,
  .lop-ai-gen-modal,
  .lop-media-create-modal,
  .lop-lesson-picker-modal,
  .lop-vocab-modal,
  [data-lop-popup-root],
  .lop-admin-image-lightbox
){
  box-sizing:border-box!important;
  z-index:var(--lop-popup-layer)!important;
  padding-top:max(var(--lop-popup-safe-gap),env(safe-area-inset-top,0px))!important;
  padding-right:max(var(--lop-popup-safe-gap),env(safe-area-inset-right,0px))!important;
  padding-bottom:max(var(--lop-popup-safe-gap),env(safe-area-inset-bottom,0px))!important;
  padding-left:max(var(--lop-popup-safe-gap),env(safe-area-inset-left,0px))!important;
}

/* Never let a dialog extend beyond the viewport. Preserve each component's width and scroll model. */
body.lopsp-public-body :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-note-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lopsp-like-gift-dialog,
  .lop-study-unit-detail-dialog,
  .lop-study-vocabulary-card-dialog,
  .lop-study-modal-panel,
  .lop-admin-preview-dialog,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-admin-image-lightbox-dialog
){
  box-sizing:border-box!important;
  max-width:calc(100vw - (var(--lop-popup-safe-gap) * 2))!important;
  max-height:calc(100dvh - (var(--lop-popup-safe-gap) * 2))!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-padding-top:72px;
}

/* Form popup headers use one safe two-column layout: copy can wrap, close never overlaps it. */
body.lopsp-public-body :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-modal-panel > .lopsp-checkout-modal-head,
  .lopsp-modal-panel > .lopsp-rescue-modal-head,
  .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
  .lop-progress-modal-dialog > .lop-progress-modal-head,
  .lop-class-modal-dialog > .lop-class-modal-head,
  .lop-study-note-dialog > .lop-study-note-head,
  .lop-study-lop-dialog > .lop-study-lop-head,
  .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
  .lopsp-study-question-panel > .lopsp-study-question-modal-head,
  .lop-study-modal-panel > header,
  .lop-admin-modal > .lop-admin-modal-head,
  .lop-admin-ai-dialog > .lop-admin-ai-head,
  .lop-ai-gen-dialog > .lop-ai-gen-head,
  .lop-media-create-dialog > .lop-media-create-head,
  .lop-lesson-picker-dialog > .lop-ai-gen-head,
  .lop-vocab-dialog-shell > .lop-vocab-modal-head
){
  position:sticky!important;
  top:0!important;
  right:auto!important;
  left:auto!important;
  z-index:var(--lop-popup-header-z)!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  justify-content:stretch!important;
  gap:12px!important;
  min-width:0!important;
  overflow:visible!important;
  background-color:rgba(255,255,255,.985)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

body.lopsp-public-body :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-modal-panel > .lopsp-checkout-modal-head,
  .lopsp-modal-panel > .lopsp-rescue-modal-head,
  .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
  .lop-progress-modal-dialog > .lop-progress-modal-head,
  .lop-class-modal-dialog > .lop-class-modal-head,
  .lop-study-note-dialog > .lop-study-note-head,
  .lop-study-lop-dialog > .lop-study-lop-head,
  .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
  .lopsp-study-question-panel > .lopsp-study-question-modal-head,
  .lop-study-modal-panel > header,
  .lop-admin-modal > .lop-admin-modal-head,
  .lop-admin-ai-dialog > .lop-admin-ai-head,
  .lop-ai-gen-dialog > .lop-ai-gen-head,
  .lop-media-create-dialog > .lop-media-create-head,
  .lop-lesson-picker-dialog > .lop-ai-gen-head,
  .lop-vocab-dialog-shell > .lop-vocab-modal-head
) > :first-child{
  min-width:0!important;
  max-width:100%!important;
}

body.lopsp-public-body :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-modal-panel > .lopsp-checkout-modal-head,
  .lopsp-modal-panel > .lopsp-rescue-modal-head,
  .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
  .lop-progress-modal-dialog > .lop-progress-modal-head,
  .lop-class-modal-dialog > .lop-class-modal-head,
  .lop-study-note-dialog > .lop-study-note-head,
  .lop-study-lop-dialog > .lop-study-lop-head,
  .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
  .lopsp-study-question-panel > .lopsp-study-question-modal-head,
  .lop-study-modal-panel > header,
  .lop-admin-modal > .lop-admin-modal-head,
  .lop-admin-ai-dialog > .lop-admin-ai-head,
  .lop-ai-gen-dialog > .lop-ai-gen-head,
  .lop-media-create-dialog > .lop-media-create-head,
  .lop-lesson-picker-dialog > .lop-ai-gen-head,
  .lop-vocab-dialog-shell > .lop-vocab-modal-head
) :where(h1,h2,h3,h4,p,strong,span){
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Normalize only the close control's geometry. Existing colors and interaction handlers stay intact. */
body.lopsp-public-body :where(
  .lopsp-modal-panel > .lopsp-panel-head > .lopsp-modal-close,
  .lopsp-modal-panel > .lopsp-checkout-modal-head > .lopsp-modal-close,
  .lopsp-modal-panel > .lopsp-rescue-modal-head > .lopsp-modal-close,
  .lopsp-settings-popup-head > button[data-lop-settings-popup-close],
  .lop-progress-modal-head > .lop-progress-modal-close,
  .lop-class-modal-head > .lop-class-modal-close,
  .lop-study-note-head > button[data-lop-note-close],
  .lop-study-lop-head > button[data-lop-lesson-report-close],
  .lopsp-reminder-modal-head > .lopsp-reminder-modal-close,
  .lopsp-study-question-modal-head > .lopsp-modal-close,
  .lop-study-modal-panel > header > button,
  .lop-admin-modal-head > .lop-admin-modal-close,
  .lop-admin-ai-head > .lop-admin-preview-close,
  .lop-ai-gen-head > button[aria-label="Đóng"],
  .lop-media-create-head > .lop-media-create-close,
  .lop-vocab-modal-head > button[aria-label="Đóng"]
){
  position:relative!important;
  inset:auto!important;
  float:none!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  z-index:calc(var(--lop-popup-header-z) + 1)!important;
  display:inline-flex!important;
  flex:0 0 var(--lop-popup-close-size)!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:var(--lop-popup-close-size)!important;
  height:var(--lop-popup-close-size)!important;
  min-width:var(--lop-popup-close-size)!important;
  min-height:var(--lop-popup-close-size)!important;
  max-width:var(--lop-popup-close-size)!important;
  max-height:var(--lop-popup-close-size)!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  transform:none;
}

/* Absolute-close popup forms reserve a dedicated title-safe area. */
body.lopsp-public-body .lopsp-event-register-dialog{
  padding-top:max(24px,calc(var(--lop-popup-close-size) + 10px))!important;
}
body.lopsp-public-body .lopsp-event-register-head{
  box-sizing:border-box!important;
  min-width:0!important;
  padding-right:0!important;
}
body.lopsp-public-body .lopsp-event-register-close{
  top:12px!important;
  right:12px!important;
  z-index:calc(var(--lop-popup-header-z) + 1)!important;
}
body.lopsp-public-body .lopsp-like-gift-dialog{
  padding-top:max(0px,env(safe-area-inset-top,0px));
}
body.lopsp-public-body .lopsp-like-gift-close{
  top:10px!important;
  right:10px!important;
  z-index:calc(var(--lop-popup-header-z) + 2)!important;
}
body.lopsp-public-body .lopsp-like-gift-hero-topbar{
  min-width:0!important;
  padding-right:calc(var(--lop-popup-close-size) + 8px)!important;
}

/* Header stays visible, while content scrolls beneath it without painting over the title. */
body.lopsp-public-body :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-study-lop-dialog,
  .lopsp-study-question-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog
){
  isolation:isolate;
}

@media(max-width:720px){
  body.lopsp-public-body{
    --lop-popup-safe-gap:var(--lop-popup-safe-gap-mobile);
    --lop-popup-close-size:44px;
  }
  body.lopsp-public-body :where(
    .lopsp-modal,
    .lopsp-settings-popup,
    .lop-progress-modal,
    .lop-class-modal,
    .lop-study-note-modal,
    .lop-study-lop-modal,
    .lopsp-reminder-modal,
    .lopsp-reminder-calendar-modal,
    .lopsp-event-register-modal,
    .lopsp-like-gift-modal,
    .lop-study-modal,
    .lop-admin-preview-modal,
    .lop-admin-ai-modal,
    .lop-ai-gen-modal,
    .lop-media-create-modal,
    .lop-lesson-picker-modal,
    .lop-vocab-modal
  ){
    padding-top:max(var(--lop-popup-safe-gap-mobile),env(safe-area-inset-top,0px))!important;
    padding-right:max(var(--lop-popup-safe-gap-mobile),env(safe-area-inset-right,0px))!important;
    padding-bottom:max(var(--lop-popup-safe-gap-mobile),env(safe-area-inset-bottom,0px))!important;
    padding-left:max(var(--lop-popup-safe-gap-mobile),env(safe-area-inset-left,0px))!important;
  }
  body.lopsp-public-body :where(
    .lopsp-modal-panel,
    .lopsp-settings-popup-dialog,
    .lop-progress-modal-dialog,
    .lop-class-modal-dialog,
    .lop-study-note-dialog,
    .lop-study-lop-dialog,
    .lopsp-reminder-modal-card,
    .lopsp-event-register-dialog,
    .lopsp-like-gift-dialog,
    .lop-study-modal-panel,
    .lop-admin-preview-dialog,
    .lop-admin-ai-dialog,
    .lop-ai-gen-dialog,
    .lop-media-create-dialog,
    .lop-lesson-picker-dialog,
    .lop-vocab-dialog-shell
  ){
    max-width:calc(100vw - (var(--lop-popup-safe-gap-mobile) * 2))!important;
    max-height:calc(100dvh - (var(--lop-popup-safe-gap-mobile) * 2))!important;
    scroll-padding-top:68px;
  }
  body.lopsp-public-body :where(
    .lopsp-modal-panel > .lopsp-panel-head,
    .lopsp-modal-panel > .lopsp-checkout-modal-head,
    .lopsp-modal-panel > .lopsp-rescue-modal-head,
    .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
    .lop-progress-modal-dialog > .lop-progress-modal-head,
    .lop-class-modal-dialog > .lop-class-modal-head,
    .lop-study-note-dialog > .lop-study-note-head,
    .lop-study-lop-dialog > .lop-study-lop-head,
    .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
    .lopsp-study-question-panel > .lopsp-study-question-modal-head,
    .lop-study-modal-panel > header,
    .lop-admin-modal > .lop-admin-modal-head,
    .lop-admin-ai-dialog > .lop-admin-ai-head,
    .lop-ai-gen-dialog > .lop-ai-gen-head,
    .lop-media-create-dialog > .lop-media-create-head,
    .lop-lesson-picker-dialog > .lop-ai-gen-head,
    .lop-vocab-dialog-shell > .lop-vocab-modal-head
  ){
    gap:9px!important;
    min-height:56px;
  }
  body.lopsp-public-body .lopsp-event-register-dialog{
    padding-top:64px!important;
  }
  body.lopsp-public-body .lopsp-event-register-close{
    top:10px!important;
    right:10px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.lopsp-public-body :where(
    .lopsp-modal-panel,
    .lopsp-settings-popup-dialog,
    .lop-progress-modal-dialog,
    .lop-class-modal-dialog,
    .lop-study-note-dialog,
    .lop-study-lop-dialog,
    .lop-admin-ai-dialog,
    .lop-ai-gen-dialog,
    .lop-media-create-dialog
  ){
    scroll-behavior:auto!important;
  }
}


/* High-specificity safety overrides for legacy popup rules that also use !important. */
body.lopsp-public-body .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
body.lopsp-public-body .lopsp-report-modal-panel > .lopsp-panel-head,
body.lopsp-public-body .lopsp-study-question-panel > .lopsp-study-question-modal-head,
body.lopsp-public-body .lop-progress-modal-dialog > .lop-progress-modal-head,
body.lopsp-public-body .lop-class-modal-dialog > .lop-class-modal-head,
body.lopsp-public-body .lop-study-note-dialog > .lop-study-note-head,
body.lopsp-public-body .lop-study-lop-dialog > .lop-study-lop-head,
body.lopsp-public-body .lop-admin-ai-dialog > .lop-admin-ai-head,
body.lopsp-public-body .lop-ai-gen-dialog > .lop-ai-gen-head,
body.lopsp-public-body .lop-media-create-dialog > .lop-media-create-head,
body.lopsp-public-body .lop-lesson-picker-dialog > .lop-ai-gen-head{
  top:0!important;
  align-items:start!important;
}
body.lopsp-public-body .lopsp-settings-popup-head > button[data-lop-settings-popup-close],
body.lopsp-public-body .lopsp-report-modal-panel > .lopsp-panel-head > .lopsp-modal-close,
body.lopsp-public-body .lopsp-study-question-modal-head > .lopsp-modal-close,
body.lopsp-public-body .lop-progress-modal-head > .lop-progress-modal-close,
body.lopsp-public-body .lop-class-modal-head > .lop-class-modal-close,
body.lopsp-public-body .lop-study-note-head > button[data-lop-note-close],
body.lopsp-public-body .lop-study-lop-head > button[data-lop-lesson-report-close],
body.lopsp-public-body .lop-admin-ai-head > .lop-admin-preview-close,
body.lopsp-public-body .lop-ai-gen-head > button[aria-label="Đóng"],
body.lopsp-public-body .lop-media-create-head > .lop-media-create-close{
  align-self:start!important;
  top:auto!important;
  width:var(--lop-popup-close-size)!important;
  height:var(--lop-popup-close-size)!important;
  min-width:var(--lop-popup-close-size)!important;
  min-height:var(--lop-popup-close-size)!important;
  max-width:var(--lop-popup-close-size)!important;
  max-height:var(--lop-popup-close-size)!important;
}

/* Remaining named headers/close controls use the same legacy-proof alignment. */
body.lopsp-public-body .lopsp-modal-panel > .lopsp-checkout-modal-head,
body.lopsp-public-body .lopsp-modal-panel > .lopsp-rescue-modal-head,
body.lopsp-public-body .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
body.lopsp-public-body .lop-study-modal-panel > header,
body.lopsp-public-body .lop-admin-modal > .lop-admin-modal-head{
  top:0!important;
  align-items:start!important;
}
body.lopsp-public-body .lopsp-checkout-modal-head > .lopsp-modal-close,
body.lopsp-public-body .lopsp-rescue-modal-head > .lopsp-modal-close,
body.lopsp-public-body .lopsp-reminder-modal-head > .lopsp-reminder-modal-close,
body.lopsp-public-body .lop-study-modal-panel > header > button,
body.lopsp-public-body .lop-admin-modal-head > .lop-admin-modal-close{
  align-self:start!important;
  top:auto!important;
  width:var(--lop-popup-close-size)!important;
  height:var(--lop-popup-close-size)!important;
  min-width:var(--lop-popup-close-size)!important;
  min-height:var(--lop-popup-close-size)!important;
  max-width:var(--lop-popup-close-size)!important;
  max-height:var(--lop-popup-close-size)!important;
}

/* v2.8.633 — zero-footprint viewport portal host with top-level stacking.
 * Portal roots inherit route/context classes so popup-specific selectors still work.
 * Those copied classes must never turn the host itself into a visible card or page section.
 * A fixed 0×0 host stays outside document flow, while its fixed popup child remains rooted
 * to the real viewport because the host has no transform/filter/perspective/contain context.
 */
html body > div[data-lop-popup-portal-root].lopsp-popup-portal-root{
  display:block!important;
  position:fixed!important;
  inset:0 auto auto 0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  left:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  contain:none!important;
  isolation:auto!important;
  z-index:var(--lop-popup-layer,2147483647)!important;
  pointer-events:none!important;
}

/* Re-enable interaction only on the actual popup shell. The host itself stays inert and
 * contributes no size, background, shadow or spacing to /muc-tieu-lich-hoc or any page. */
html body > div[data-lop-popup-portal-root].lopsp-popup-portal-root > :where(
  .lopsp-modal,
  .lopsp-settings-popup,
  .lop-progress-modal,
  .lop-class-modal,
  .lop-study-note-modal,
  .lop-study-lop-modal,
  .lopsp-reminder-modal,
  .lopsp-reminder-calendar-modal,
  .lopsp-event-register-modal,
  .lopsp-like-gift-modal,
  .lop-study-unit-detail-modal,
  .lop-study-vocabulary-card-modal,
  .lop-study-modal,
  .lop-admin-preview-modal,
  .lop-admin-ai-modal,
  .lop-ai-gen-modal,
  .lop-media-create-modal,
  .lop-lesson-picker-modal,
  .lop-admin-image-lightbox,
  .lop-study-lightbox,
  .lop-content-feedback-modal,
  .lopstreak-lightbox,
  .lop-admin-modal-backdrop,
  [data-lop-popup-root]
){
  pointer-events:auto!important;
}

body.lopsp-public-body :where(
  .lopsp-modal,
  .lopsp-settings-popup,
  .lop-progress-modal,
  .lop-class-modal,
  .lop-study-note-modal,
  .lop-study-lop-modal,
  .lopsp-reminder-modal,
  .lopsp-reminder-calendar-modal,
  .lopsp-event-register-modal,
  .lopsp-like-gift-modal,
  .lop-study-unit-detail-modal,
  .lop-study-vocabulary-card-modal,
  .lop-study-modal,
  .lop-admin-preview-modal,
  .lop-admin-ai-modal,
  .lop-ai-gen-modal,
  .lop-media-create-modal,
  .lop-lesson-picker-modal,
  .lop-admin-image-lightbox,
  .lop-study-lightbox,
  .lop-content-feedback-modal,
  .lopstreak-lightbox,
  .lop-admin-modal-backdrop,
  [data-lop-popup-root]
){
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  box-sizing:border-box!important;
  z-index:var(--lop-popup-layer)!important;
}

/* Additional popup families that were not part of the first compatibility pass. */
body.lopsp-public-body :where(
  .lop-content-feedback-dialog,
  .lop-study-lightbox-dialog,
  .lopstreak-lightbox-content,
  .lop-admin-modal,
  .lopsp-reminder-calendar-card
){
  box-sizing:border-box!important;
  max-width:calc(100vw - (var(--lop-popup-safe-gap) * 2))!important;
  max-height:calc(100dvh - (var(--lop-popup-safe-gap) * 2))!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

body.lopsp-public-body :where(
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lop-admin-modal > .lop-admin-modal-head
){
  position:sticky!important;
  top:0!important;
  z-index:var(--lop-popup-header-z)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:12px!important;
  min-width:0!important;
  background-color:rgba(255,255,255,.985)!important;
}

body.lopsp-public-body :where(
  .lop-content-feedback-head > button,
  .lopsp-reminder-calendar-head > .lopsp-reminder-calendar-close,
  .lop-admin-modal-head > .lop-admin-modal-close
){
  position:relative!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  width:var(--lop-popup-close-size)!important;
  height:var(--lop-popup-close-size)!important;
  min-width:var(--lop-popup-close-size)!important;
  min-height:var(--lop-popup-close-size)!important;
  max-width:var(--lop-popup-close-size)!important;
  max-height:var(--lop-popup-close-size)!important;
  margin:0!important;
  transform:none!important;
  z-index:calc(var(--lop-popup-header-z) + 1)!important;
}