/* Container chính: nhập liệu + 2 mặt */
.main-container {
  display: flex;
  flex-direction: row;   /* bố cục ngang */
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

/* Container chứa mặt trước và mặt sau */
.pages-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Trang A6 chung */
.a6-page {
  width: 105mm;
  height: 148mm;
  border: 1px solid #000;
  box-sizing: border-box;
  font-family: 'SF Pro Display', Arial, sans-serif;
  padding: 10mm 8mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    overflow: hidden; /* chặn tràn nội dung */
}

/* Mặt trước */
.a6-page.front {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4mm;
  page-break-after: always; /* chỉ mặt trước ngắt trang */
}

/* Mặt sau */
.a6-page.back {
  background: #ffffff;
  /* KHÔNG khai báo page-break để tránh trang trắng */
}

.front { background: #fff; }

h1, h2, h3 {
  margin: 1.3mm 0;
}

p, li {
  font-size: 3.7mm;
}

.price p {
  font-weight: bold;
  color: #b22222;
}

/* Khung logo */
.logo-frame {
  height: 13.5mm;
  width: 88.8mm;
  border: 1px solid #000;
  border-radius: 2.1mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-frame img {
  max-width: 300%;
  max-height: 300%;
}

body, .a6-page {
  font-family: 'SF Pro Display', Arial, sans-serif;
}

/* Khung sản phẩm */
.product-frame {
  height: 25mm;
  width: 89mm;
  border: 1px solid #ffffff;
  border-radius: 2.1mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-content { text-align: center; }

.product-name {
  font-size: 8.3mm;
  font-weight: bold;
  text-transform: uppercase;
}

.product-desc { font-size: 2.5mm; }

/* Container chứa 2 khung giá */
.price-container {
  display: flex;
  justify-content: center;
  gap: 3mm;
}

/* Khung giá chung */
.price-frame {
  height: 18.5mm;
  width: 42.8mm;
  border: 1px solid #ffffff;
  border-radius: 2.1mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-content { text-align: center; }

.price-frame .label { font-size: 3.6mm; }
.price-frame .value { font-size: 5.2mm; }
.price-frame .unit { font-size: 2.5mm; }

.sale-price .label,
.sale-price .value { font-weight: bold; }

/* Khung hiển thị thông tin sản phẩm */
.product-info-display {
  width: 89mm;
  height: 56.5mm;
  border: 1px solid #ffffff;
  border-radius: 2.1mm;
  padding: 1.5mm;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;   /* chia làm 2 cột */
  justify-content: space-between;
}

.product-info-display h3 {
  margin: 0.5mm 0;
  font-size: 2.7mm;
  font-weight: bold;
  padding-top: 0;
}

.product-info-display p {
  margin: 0.5mm 0;
  font-size: 3.5mm;
    line-height: 1.0;  /* dòng trong đoạn gần nhau hơn */
}

.info-left { flex: 1; }

.qr-frame {
  width: 25mm;
  height: 25mm;
  border: 1px solid #ffffff;
  border-radius: 2.1mm;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qr-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2.1mm;
}

/* Khung hiển thị thông số kỹ thuật */
.specs-display {
  width: 89mm;
  height: 86mm;
  border: 1px solid #ffffff;
  border-radius: 2.1mm;
  padding-top: 0.5mm;
  padding-left: 2mm;
  box-sizing: border-box;
  font-size: 3.2mm;
  overflow-y: auto;
}

.specs-display h3 {
  margin: 1mm 0;
  font-size: 3.7mm;
  font-weight: bold;
}

.specs-display p {
  margin: 0.5mm 0;
  font-size: 3.5mm;
      line-height: 1.0;  /* dòng trong đoạn gần nhau hơn */

}

/* Khung đơn vị nhập khẩu */
.importer-frame {
  width: 89mm;
  height: 20mm;
  border: 1px solid #000;
  border-radius: 2.1mm;
  display: flex;
  align-items: center;
  padding: 1mm;
  box-sizing: border-box;
}

.trademark-logo {
  flex: 0 0 auto;
  margin-right: 2mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trademark-logo img {
  max-height: 100%;
  max-width: 18mm;
  object-fit: contain;
}

.importer-content {
  flex: 1;
  font-size: 2.1mm;
  line-height: 1.2;
}

.importer-content p { font-size: inherit; }

/* Khung nhập liệu */
.input-panel {
  width: auto;
  height: auto;
  border: 1px solid #000;
  border-radius: 2mm;
  padding-right: 7mm;
  padding-left: 4mm;
  padding-bottom: 4mm;
  padding-top: 3mm;
  box-sizing: border-box;
  font-size: 3mm;
}

.input-panel input,
.input-panel textarea {
  width: 100%;
  margin-bottom: 2mm;
  padding: 1.5mm;
  border: 1px solid #ccc;
  border-radius: 1mm;
  font-family: 'SF Pro Display', Arial, sans-serif;
}

.input-panel button {
  margin-top: 3mm;
  padding: 2mm 4mm;
  font-size: 3mm;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 2mm;
  cursor: pointer;
}

/* Ẩn chữ "Mặt trước/Mặt sau" khi in PDF */
@media print {
  .page-label {
    display: none;
  }
}
@media print {
  .a6-page {
    border: none; /* ẩn viền khung khi in/xuất PDF */
  }
}
.a6-page {
  position: relative;
}
#specsInput {
  width: 100%;          /* hoặc giá trị cố định, ví dụ 300px */
  height: 100px;        /* chiều cao cố định */
  resize: none;         /* tắt chức năng kéo giãn */
  overflow-y: auto;     /* nếu nội dung dài thì có thanh cuộn */
}
h1 {
  text-align: center;
  color: #7D2027;
  font-weight: bold;
  margin-bottom: 10px;
}
.logo-frame,
.importer-frame {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
