/* body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} */

/* @keyframes scan-line {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.animate-scan-line {
    animation: scan-line 2.5s infinite linear;
}
#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px; 
}
#qr-reader__dashboard_section {
    display: none !important;
} */

/* เส้นเลเซอร์แบบมีเงาฟุ้ง (Glow Effect) */
@keyframes scan-line {
  0% {
    top: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.animate-scan-line {
  animation: scan-line 2s infinite ease-in-out; /* ปรับให้ดูนุ่มนวลขึ้น */
}

/* ปรับขนาด Video ให้เต็มและสวยงาม */
#qr-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px; /* ปรับให้โค้งมนดูทันสมัยขึ้น */
}

/* ปรับ Overlay รอบรูเจาะให้มืดลง เพื่อเน้นช่องสแกน */
.scanner-overlay {
  background: rgba(0, 0, 0, 0.5); /* พื้นหลังดำโปร่งแสงรอบนอก */
}

/* ปรับแต่งมุมกรอบ (Corners) */
.scan-corner {
  width: 40px;
  height: 40px;
  border-color: #3b82f6; /* สีน้ำเงิน Blue-500 */
  border-width: 4px;
  position: absolute;
}

/* ขยายขนาดช่องสแกนกลางจอ (สำหรับมือถือ) */
/* เราจะเจาะจงไปที่ div ที่อยู่ในศูนย์กลางการสแกน */
#scanner-container .relative.w-2\/3 {
  width: 80% !important; /* จากเดิม 66% ขยายเป็น 80% */
  height: 60% !important; /* ปรับความสูงให้รับกับ QR Code */
  max-width: 320px; /* ป้องกันไม่ให้ใหญ่เกินไปในจอ Tablet */
}

/* ซ่อนส่วนเกินของ Library */
#qr-reader__dashboard_section,
#qr-reader__header_message {
  display: none !important;
}

/* เพิ่ม Effect ขอบฟุ้งๆ รอบกรอบสแกน */
.scan-region-highlight {
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.6); /* ทำเงาดำรอบรูเจาะ */
}
/* #################################### */
/* สไตล์สำหรับแอนิเมชัน Marquee */