:root{
        --accent: #15539e;
        --muted: #666;
        --border: #808080;
    }
    body{
        font-family: 'Sarabun', sans-serif;
        background:#f4f6fb;
        padding:20px;
    }

    .page-wrap{
        width:210mm;
        max-width:100%;
        margin:0 auto;
    }

    .search-wrap{
        max-width:420px;
        margin:0 auto 14px;
    }

    /* การ์ด */
    .exam-card{
        width:100%;
        max-width:210mm;
        background:#fff;
        border-radius:10px;
        border: 1px solid var(--border);
        display:flex;
        overflow:hidden;
        box-shadow:0 2px 10px rgba(0,0,0,0.05);
        margin-bottom:12px;
    }

.left-strip{
    width:56px;
    background:linear-gradient(180deg,#1d6fe0,#15539e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;

    /* บังคับให้สีพื้นหลังถูกพิมพ์ */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
    .label-vertical{
        font-size:16px;
        font-weight:700;
        transform:rotate(-90deg);
        white-space:nowrap;
        letter-spacing:0.5px;
    }

    .card-main{
        flex:1;
        display:flex;
        padding:12px;
        gap:14px;
    }

    /* left panel */
    .left-panel{
        width:56%;
        display:flex;
        gap:12px;
    }

    .photo{
        width:110px;
        height:140px;
        border-radius:6px;
        object-fit:cover;
        border:1px solid #ffffffff;
    }

    .person-info{
        flex:1;
        display:flex;
        flex-direction:column;
        gap:6px;
        justify-content:center;
    }

    .label{
        font-size:14px;
        font-weight:700;
        color:#000;
    }
    .value{
        font-size:14px;
        font-weight:400;
        color:#000;
    }

    /* right panel */
    .right-panel{
        width:44%;
        border-left:1px dashed #cdd7e8;
        padding-left:12px;
        display:flex;
        flex-direction:column;
        gap:8px;
    }
    .exam_id{
        font-size:14px;
        font-weight:700;
        color:var(--accent);
        text-align:left;
    }
        .label-vertical{
        font-size:10px;
        color:#cdd7e8;
        text-align:center;
    }
    .label-vertical img {
    width: 20px; /* ขนาดรูปภาพที่คุณต้องการ */
    height: 30px;
    margin-right: 4px; /* ระยะห่างระหว่างรูปภาพกับข้อความ */
    vertical-align: middle; /* จัดตำแหน่งแนวตั้งให้อยู่กึ่งกลาง */
    }

    /* print */
    @page { size: A4 portrait; margin:6mm; }
/* --- เพิ่มส่วนนี้ใน <style> --- */
/* ซ่อนบางส่วนเมื่อพิมพ์ แต่คงข้อมูลบนบัตรไว้ */
@media print {
    /* ซ่อนช่องค้นหาและปุ่มพิมพ์ */
    .search-wrap,
    .print-btn,
    nav.navbar {
        display: none !important;
    }

    /* ปรับการ์ดให้ขยายเต็มหน้ากระดาษ (ถ้าต้องการ) */
    .page-wrap {
        margin: 0;
        width: auto;
    }

    /* ให้การ์ดยังคงแสดงแบบเดิม */
    .exam-card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background: #fff !important;
    }
}
/* ===== Search Card ===== */
/* ===== SEARCH SECTION NEW ===== */
.search-section{
    max-width:620px;
    margin:0 auto 26px;
}

.search-title{
    font-weight:700;
    font-size:20px;
    color:#15539e;
}

.search-subtitle{
    font-size:13px;
    color:#666;
}

.search-card{
    border-radius:12px;
    border:1px solid #d9e2ef;
}

.search-label{
    font-weight:600;
    margin-bottom:8px;
    display:block;
    color:#333;
}

/* แถวโลโก้ + ช่องค้นหา */
.search-input-row{
    display:flex;
    align-items:center;
    gap:14px;
}

/* โลโก้สูงเท่าช่องกรอก */
.search-logo{
    height:56px;     /* เท่าความสูง form-control-lg */
    width:auto;
    object-fit:contain;
}

/* ปรับโค้ง input */
.search-card .form-control{
    border-radius:8px 0 0 8px;
}

.search-card .btn{
    border-radius:0 8px 8px 0;
}

/* Mobile */
@media (max-width:576px){
    .search-input-row{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .search-logo{
        height:48px;
    }

    .search-card .input-group{
        width:100%;
    }

    .search-title{ font-size:18px; }
}
/* ===== PRINT MODE ===== */
@media print {

    /* ซ่อนส่วนที่ไม่ต้องการ */
    .search-section,
    .print-btn,
    nav.navbar {
        display: none !important;
    }

    body{
        background:#fff !important;
        padding:0 !important;
    }

    .page-wrap{
        margin:0 !important;
        width:auto !important;
    }

    .exam-card{
        box-shadow:none !important;
        border:1px solid #000 !important;
    }
}