/* ===== Admin UI ===== */
.mgm-wrap .mgm-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin:16px 0;
}
.mgm-row{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.mgm-row label{ width:160px; font-weight:600; }
.mgm-row input[type="text"], .mgm-row input[type="number"]{ max-width:240px; }
.mgm-edit-card{ border-left:4px solid #2271b1; }
.mgm-fieldset{ border:1px dashed #cbd5e1; border-radius:8px; padding:12px; margin-top:12px; }
.mgm-fieldset>h3{ margin:0 0 8px; font-size:14px; color:#334155; }

/* ===== Frontend: fullscreen button & states ===== */

/* lock scroll khi fullscreen/overlay */
html.mgm-scroll-lock, body.mgm-scroll-lock{
  overflow:hidden !important; height:100vh !important; margin:0 !important;
}

.mgm-embed{ display:block; }
.mgm-embed .mgm-fs-btn{
  position:absolute; z-index:10; display:inline-flex; align-items:center; gap:.4em;
  padding:6px 10px; line-height:1; border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(4px);
  border-radius:10px; cursor:pointer; font-size:14px; user-select:none;
  color:#111;
}
.mgm-embed .mgm-fs-btn .mgm-fs-ic{ font-size:15px; line-height:1; }
.mgm-embed .mgm-fs-btn:hover{ background:#fff; }

/* neo theo góc với --mgm-fsx / --mgm-fsy */
.mgm-embed .mgm-fs-btn.mgm-pos-tr{ top:var(--mgm-fsy,8px); right:var(--mgm-fsx,8px); left:auto; bottom:auto; }
.mgm-embed .mgm-fs-btn.mgm-pos-tl{ top:var(--mgm-fsy,8px); left:var(--mgm-fsx,8px); right:auto; bottom:auto; }
.mgm-embed .mgm-fs-btn.mgm-pos-br{ bottom:var(--mgm-fsy,8px); right:var(--mgm-fsx,8px); top:auto; left:auto; }
.mgm-embed .mgm-fs-btn.mgm-pos-bl{ bottom:var(--mgm-fsy,8px); left:var(--mgm-fsx,8px); top:auto; right:auto; }

/* pos=custom: mặc định dùng top/left theo biến */
.mgm-embed .mgm-fs-btn.mgm-pos-custom{
  position:absolute;
  top:var(--mgm-fsy,8px);
  left:var(--mgm-fsx,8px);
  right:auto; bottom:auto;
}

/* Overlay fallback khi API không cấp quyền */
.mgm-embed.mgm-full-window{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  padding:0 !important; margin:0 !important; background:#000; z-index:2147483647;
}
.mgm-embed.mgm-full-window .mgm-responsive-wrap{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  padding:0 !important; overflow:hidden !important;
}
.mgm-embed.mgm-full-window iframe{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important;
}

/* Trạng thái dùng Fullscreen API */
.mgm-embed:fullscreen, .mgm-embed:-webkit-full-screen{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  background:#000; z-index:2147483647;
}
.mgm-embed:fullscreen .mgm-responsive-wrap,
.mgm-embed:-webkit-full-screen .mgm-responsive-wrap{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  padding:0 !important; overflow:hidden !important;
}
.mgm-embed:fullscreen iframe,
.mgm-embed:-webkit-full-screen iframe{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important;
}

/* ===== Auto-fit khi fullscreen (contain/cover/stretch) ===== */
.mgm-embed.mgm-fit .mgm-frame{
  position:absolute; left:0; top:0;
  width:var(--mgm-base-w,100%); height:var(--mgm-base-h,100%);
  transform-origin: top left;
  transform: translate(var(--mgm-offx,0), var(--mgm-offy,0)) scale(var(--mgm-zoom,1));
}
.mgm-embed.mgm-fit iframe{
  width:var(--mgm-base-w,100%); height:var(--mgm-base-h,100%); border:0;
}