body{
    font-family: "Noto Sans Thai", sans-serif;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
}

#reader{
    width:100%;
    max-width:500px;
    margin:20px 0px 0px 0px;
}

.camera-box{
    padding:20px 8px 16px 8px;
    border:1px solid #ddd;
    border-radius:10px;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.camera-buttons{
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}

.drop-zone{
    border:2px dashed #999;
    border-radius:10px;
    padding:40px;
    text-align:center;
    cursor:pointer;
    transition:.3s;
}

.drop-zone.dragover{
    background:#f5f5f5;
}

.preview{
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
}

.preview img{
    width:100%;
    border:1px solid #ddd;
    border-radius:10px;
}

.result-group{
    margin-top:0px;
}

.result-group input{
    width:100%;
    padding:12px;
    box-sizing:border-box;
    border-radius: 10px;
}

.buttons{
    margin-top:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

button{
    padding:10px 15px;
    cursor:pointer;
}

#linkBox{
    margin-top:15px;
    display:none;
}

#linkBox a{
    color:#0066cc;
    word-break:break-all;
}

.note{
    margin-top:15px;
    color:#666;
}

.nav-header {
    background-color: #F1F1F1;
}

.nav-title {
background-color: #F9F9F9;
}

.card-f7 {
    background-color: #F7F7F7;
    border-radius: 24px;
    padding: 24px;
    margin: 32px 0;
}

.center {
    text-align: center;
}

.mg-t-16 {
    margin-top: 16px;
}
.mg-t-24 {
    margin-top: 24px;
}
.mg-t-32 {
    margin-top: 32px;
}
.mg-t-48 {
    margin-top: 48px;
}
.mg-t-64 {
    margin-top: 64px;
}
.mg-t-86 {
    margin-top: 86px;
}
.mg-t-128 {
    margin-top: 128px;
}

.mg-b-16 {
    margin-bottom: 16px;
}
.mg-b-24 {
    margin-bottom: 24px;
}
.mg-b-32 {
    margin-bottom: 32px;
}
.mg-b-48 {
    margin-bottom: 48px;
}
.mg-b-64 {
    margin-bottom: 64px;
}

.pd-t-16 {
    padding-top: 16px;
}
.pd-t-24 {
    padding-top: 24px;
}
.pd-t-32 {
    padding-top: 32px;
}
.pd-t-48 {
    padding-top: 48px;
}
.pd-t-64 {
    padding-top: 64px;
}

.pd-b-16 {
    padding-bottom: 16px;
}
.pd-b-24 {
    padding-bottom: 24px;
}
.pd-b-32 {
    padding-bottom: 32px;
}
.pd-b-48 {
    padding-bottom: 48px;
}
.pd-b-64 {
    padding-bottom: 64px;
}

.fnt-13 {
    font-size: 13px;
    color: #666666;
}
.fnt-14 {
    font-size: 14px;
    color: #555555;
}
.fnt-24 {
    font-size: 24px;
}

.rd-24 {
    border-radius: 24px;
}
.rd-32 {
    border-radius: 32px;
}
.rd-56 {
    border-radius: 56px;
}