/* =========================================================
   Block 4 - Preview Base (PRINT-SAFE CSS)
   BƯỚC 2.3: CSS kỹ thuật dùng CHUNG cho:
   - Client preview DOM
   - Server render (Chromium headless)
   ---------------------------------------------------------
   Nguyên tắc:
   - Không transform / scale / zoom
   - Font-size dùng px
   - Frame dùng % (set inline từ JS)
   - Multi-line ổn định: line-height cố định + wrap chuẩn
   ========================================================= */

/* 1 label = 1 đơn vị render độc lập */
.label-item {
  position: relative;
  display: inline-block; /* độc lập, dễ chụp */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* đảm bảo không tràn ra ngoài item */
}

/* Ảnh nền template */
.label-bg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Textbox theo frame admin (left/top/width/height set inline %) */
.label-textbox {
  position: absolute;
  box-sizing: border-box;

  /* align (flex) set inline từ JS */
  /* justify-content: ... */
  /* align-items: ... */

  overflow: hidden;       /* cắt chữ nếu dài quá */
  pointer-events: none;   /* không cản thao tác UI */
}

/* Text thật */
.label-text-inner {
  width: 100%;
  box-sizing: border-box;

  /* Multi-line ổn định */
  line-height: 1.25;
  white-space: pre-wrap;   /* giữ xuống dòng + wrap */
  word-break: break-word;  /* tránh tràn chữ */
  overflow-wrap: anywhere; /* fallback wrap tốt hơn */

  /* text-align set inline từ JS */
}

/* An toàn: tránh margin/padding mặc định của tag rich-text */
.label-text-inner * {
  box-sizing: border-box;
}

.label-text-inner p {
  margin: 0;
}

.label-text-inner div {
  margin: 0;
}

/* Nếu rich-text có <br> thì để tự nhiên, không cần rule thêm */



/* ===== FIX overlay text nhưng KHÔNG làm xẹp label ===== */

#preview-area .label-item{
  position: relative; /* mốc cho textbox absolute */
}

/* Ảnh nền giữ chỗ => label-item có kích thước */
#preview-area .label-bg{
  position: static;      /* QUAN TRỌNG: không absolute */
  display: block;
  width: 100%;
  height: auto;
}

/* Textbox đè lên ảnh */
#preview-area .label-textbox{
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* Text nằm full trong textbox */
#preview-area .label-text-inner{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}



#preview-area .label-bg { position: relative; z-index: 1; }
#preview-area .label-textbox { z-index: 2; }