/* A 390 × 740 mobile scene: one uniform scale, never a stretched stage. */
:root {
  --ti-le-khung-mobile: 1;
  --chieu-cao-khung-nhin-mobile: 100dvh;
}

html,
body {
  height: var(--chieu-cao-khung-nhin-mobile) !important;
  max-height: var(--chieu-cao-khung-nhin-mobile) !important;
  min-height: 0 !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Chặn hoàn toàn thao tác giữ ngón tay (long-press) mở bảng menu Chrome / xem ảnh / bôi đen chữ trên điện thoại */
#app,
#app *:not(input):not(textarea),
#ung-dung-ngoai-canh,
#ung-dung-ngoai-canh *:not(input):not(textarea),
.lop-hieu-ung-juice,
.lop-hieu-ung-juice * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

#app img,
#app svg,
#app a,
#ung-dung-ngoai-canh img,
#ung-dung-ngoai-canh svg {
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

#app .anh-nen-cho-dau-hem-vuong {
  pointer-events: none !important;
}

body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app,
#ung-dung-ngoai-canh {
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  height: 740px !important;
  min-height: 740px !important;
  max-height: 740px !important;
  margin: 0 !important;
  flex: 0 0 390px;
  background: #2b1d14 !important;
  /* Contain position:fixed overlays inside the same logical mobile canvas. */
  transform: scale(var(--ti-le-khung-mobile)) translateZ(0);
  transform-origin: center;
  isolation: isolate;
}

#app .man-hinh-3-vung {
  --chieu-cao-ke-dong-bo: 132px;
  flex-shrink: 0;
}

#app .khung-san-khau-ngoai {
  height: 672px;
  min-height: 0;
}

#app .vung-xanh-duong {
  padding-top: 3px;
}

#app .vung-do-goi-hang {
  padding-bottom: 4px;
}

#app .vung-do-chot-so,
#app .vung-do-mo-dau {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

#app .lop-phu-modal,
#app .nc-modal-overlay {
  position: absolute;
  inset: 0;
}

#app .hop-modal {
  max-width: 370px;
  max-height: 666px;
}

#app .hop-modal-mo-dau {
  width: 390px !important;
  max-width: 390px !important;
  height: 740px !important;
  max-height: 740px !important;
}

#app .thong-bao-noi {
  bottom: 12px;
  max-width: 366.6px;
}

/* Freeze viewport-responsive text to the original 390px mobile metrics. */
#app .chi-so-nut-cap,
#app .chi-so-dong-ho {
  font-size: clamp(0.62rem, 8.385px, 0.7rem);
}

#app .gia-tri-tien-lon {
  font-size: clamp(0.78rem, 11.895px, 0.92rem);
}

#app .gia-tri-sao-lon {
  font-size: clamp(0.64rem, 8.8px, 0.72rem);
}

#app .nut-vung-xanh {
  font-size: clamp(0.66rem, 8.97px, 0.74rem);
}

#app .vung-do-goi-hang .ten-nhom-ngan {
  font-size: clamp(0.52rem, 7.605px, 0.62rem) !important;
}

#app .vung-do-goi-hang .ten-mon-ke {
  font-size: clamp(0.54rem, 7.878px, 0.64rem) !important;
}

#app .vung-do-goi-hang .gia-mon-ke {
  font-size: clamp(0.53rem, 7.605px, 0.62rem) !important;
}

/* Preserve the existing mobile drawer rules even on a wide desktop viewport. */
#app .thu-ngan-goc-nhin-xuong .hoc-trai-tien-viet {
  padding-right: 4px;
  padding-left: 4px;
}

#app .thu-ngan-goc-nhin-xuong .khay-go-chia-ngan-tien {
  margin: 0;
  padding-right: 2px;
  padding-left: 2px;
}

#app .thu-ngan-goc-nhin-xuong .hang-ngan-tien {
  gap: 3px;
}

#app .thu-ngan-goc-nhin-xuong .nhan-trang-thai-khay-tien {
  max-width: 100%;
}

#app .thu-ngan-goc-nhin-xuong .nut-giao-tien-hoc-trai {
  font-size: 9px;
}

#app .thu-ngan-goc-nhin-xuong .cuon-so-no-that-trong-hoc {
  padding: 4px 3px 6px 9px;
}

#app .thu-ngan-goc-nhin-xuong .trang-so-tay-hoc-phai.trang-giay-so-no-that {
  padding: 4px 4px 4px 8px;
}

#app .thu-ngan-goc-nhin-xuong .moc-do-tieu-de-so {
  font-size: 10px;
}

#app .thu-ngan-goc-nhin-xuong .chu-viet-tay-dong-1 {
  font-size: 11px;
}

#app .thu-ngan-goc-nhin-xuong .chu-viet-tay-so-tien {
  font-size: 10px;
}

#app .o-nhap-text,
#app input[type='text'],
#app input[type='number'],
#app select,
#app textarea {
  font-size: 16px !important;
}

/* Street overlay lives inside #app (or standalone #ung-dung-ngoai-canh) in the exact 390 × 740 coordinate system. */
#app > .nc-modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 390px !important;
  height: 740px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 9999;
}

body > .nc-modal-overlay {
  position: fixed;
  inset: 0;
  width: 390px;
  height: 740px;
  margin: auto;
  transform: scale(var(--ti-le-khung-mobile)) translateZ(0);
  transform-origin: center;
}

:is(.nc-modal-overlay, #ung-dung-ngoai-canh) > .nc-man-hinh-3-vung {
  width: 390px !important;
  max-width: 390px !important;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
}

#app .nc-modal-overlay .nc-input-nho-vung-do,
#ung-dung-ngoai-canh .nc-input-nho-vung-do {
  font-size: 11px !important;
}

.nc-modal-overlay .nc-khung-chinh-nhan-vat {
  grid-template-columns: 1fr;
}