/* === ui-patch.css (GLIDE) ===
   - Không khóa cứng body; cho phép trang ngoài cuộn nhẹ tự nhiên
   - Khung hướng dẫn sticky và fit theo visual viewport
   - Cuộn mượt bên trong khung
*/
:root {
  --lg-top: 0px;
}
html, body { height: 100%; }
html.locked-scroll, body.locked-scroll { overflow-y: auto !important; } /* soft */

#iframeWrap, .iframeWrap {
  position: sticky;
  top: var(--lg-top);
  max-height: calc(100vh - var(--lg-top) - 8px);
  height: calc(100vh - var(--lg-top) - 8px);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: transparent;
  border-radius: 16px;
}

#protected {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* iOS Safari: avoid nested sticky scrolling and large backdrop buffers after
   authentication. The guide keeps normal document scrolling and can still be
   pinch-zoomed, but Safari has far fewer compositor surfaces to re-rasterize. */
html.lgx-ios-safe body.authed #iframeWrap,
html.lgx-ios-safe body.authed .iframeWrap {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
}

html.lgx-ios-safe body.authed #stickyHeader {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #f1efe8 !important;
}

html.lgx-ios-safe body.authed::before {
  display: none !important;
}

html.lgx-page-zooming body.authed *,
html.lgx-page-zooming body.authed *::before,
html.lgx-page-zooming body.authed *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Đồng hồ đếm nhỏ hơn 1 chút */
#countdown, .count {
  font-size: clamp(20px, 4.2vw, 32px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}