/*CAMERA SCAN QR CODE STYLE*/
/* camera */

#camera-container{
position:relative;
width:100%;
height:33vh;
overflow:hidden;
}

#reader{
width:100%;
height:100%;
}

/* overlay */

.scan-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

/* khung scan */

.scan-box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
aspect-ratio:1/1;
}

/* góc khung */

.corner{
position:absolute;
width:36px;
height:36px;
border:4px solid #00ffcc;
}

/*.corner.tl{top:150px;left:0;border-right:none;border-bottom:none;}
.corner.tr{top:150px;right:0;border-left:none;border-bottom:none;}
.corner.bl{bottom:150px;left:0;border-right:none;border-top:none;}
.corner.br{bottom:150px;right:0;border-left:none;border-top:none;}*/

/* tia scan */

.scan-line{
position:absolute;
left:1%;
width:98%;
height:5px;
background:#fff;
animation:scan 1.5s linear infinite;
}

@keyframes scan{
0%{top:0%;}
50%{top:85%;}
100%{top:25%;}
}

/* danh sách */

#result{
padding:20px;
}

.item{
padding:10px;
border-bottom:1px solid #333;
font-size:18px;
display:flex;
justify-content:space-between;
align-items:center;
}

.delbtn{
background:red;
border:none;
color:white;
padding:5px 10px;
font-size:16px;
border-radius:5px;
}

/* nút */

#sapHangBtn{
width:100%;
padding:15px;
font-size:20px;
background:#444;
border:none;
color:white;
opacity:0.5;
}

#sapHangBtn.active{
background:#00cc99;
opacity:1;
cursor:pointer;
}

/* popup */

#popupscan{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-box{
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.popup-box h2{
font-size:40px;
margin-bottom:50px;
}

.popup-box button{
width:80%;
max-width:400px;
padding:25px;
font-size:28px;
margin:20px;
border:none;
border-radius:12px;
}

.btn-continue{
background:#00cc99;
color:white;
}

.btn-stop{
background:red;
color:white;
}

.btn-start{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:20;
padding:14px 28px;
font-size:18px;
background:#28a745;
color:white;
border:none;
border-radius:6px;
}
/*END CAMERA SCAN QRCODE*/