/* Font Roboto self-host được nạp qua wp_enqueue_style('roboto-font-css') trong functions.php
 * (không dùng @import để tránh trường hợp bị bỏ qua). */

/* ============================================================
 * Thẻ nhân viên — CSS màn hình & in
 * Thẻ đúng kích thước 85 x 55 mm, in xếp trên A4 dọc.
 * ========================================================== */

/* ---------- Khu vực preview (màn hình) ---------- */
.the-nv-print-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6mm;
    justify-content: flex-start;
    align-items: flex-start;
    /* không kéo giãn thẻ theo hàng */
    padding: 10px 0;
}

.the-nv-empty {
    width: 100%;
    text-align: center;
    color: #888;
    padding: 40px 0;
}

/* ---------- Thẻ cơ bản (mọi mẫu) ---------- */
.the-nv-card {
    position: relative;
    width: 85mm;
    height: 55mm;
    flex: 0 0 auto;
    /* giữ đúng kích thước, không co giãn theo flex */
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    border: 1px solid #c8c8c8;
    /* viền chỉ để xem trên màn hình */
    font-family: Arial, sans-serif;
    color: #111;
    break-inside: avoid;
    /* không cắt thẻ qua 2 trang khi in */
    page-break-inside: avoid;
}

/* ---------- Lớp con dấu giáp lai (dùng chung, đặt ở cấp thẻ) ---------- */
/* Phủ chồng lên mép ảnh nhân viên (giáp lai). Chỉnh top/left để dịch vị trí. */
.the-nv-card .tnv-stamp {
    position: absolute;
    z-index: 7;
    /* nổi trên cả ảnh lẫn chữ */
    width: 36mm;
    height: 36mm;
    object-fit: contain;
    pointer-events: none;
    top: 5mm;
    /* vào khoảng giữa ảnh theo chiều dọc */
    left: 15mm;
    /* lệch sang trái, phủ lên ảnh nhân viên */
    opacity: 0.85;
}

/* ============================================================
 * MẪU: vfic-fushan
 * ========================================================== */
/* Cố định chiều cao 4 dải = 55mm (10+8+32+5), tránh flex min-height đẩy thẻ cao lên */
/*.tnv-vfic {
    height: 100%;
}*/

/* Header trắng: logo VFIC trái + logo khách hàng phải */
.tnv-vfic .tnv-head {
    height: 8mm;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3mm;
}

.tnv-vfic .tnv-brand-logo {
    max-height: 4mm;
    max-width: 42mm;
    object-fit: contain;
}

.tnv-vfic .tnv-cust-logo {
    max-height: 4mm;
    max-width: 34mm;
    object-fit: contain;
}

/* Băng tiêu đề xanh */
.tnv-vfic .tnv-title {
    height: 8mm;
    background: #1f4e9b;
    color: #fff;
    font-size: 15pt;
    font-weight: bold;
    letter-spacing: 1pt;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Thân thẻ: ảnh trái + thông tin phải */
.tnv-vfic .tnv-body {
    height: 30mm;
    display: flex;
    padding: 2mm 1.5mm;
    gap: 1.5mm;
    position: relative;
    overflow: hidden;
}

.tnv-vfic .tnv-photo-wrap {
    width: 21mm;
    height: 27mm;
    flex: 0 0 21mm;
    background: #eef0f3;
    border: 0.3mm solid #cfd4da;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tnv-vfic .tnv-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tnv-vfic .tnv-photo-wrap .tnv-noimg {
    font-size: 6.5pt;
    color: #9aa1a9;
    text-align: center;
    padding: 2mm;
}

.tnv-vfic .tnv-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6mm;
    z-index: 6;
    /* chữ nổi trên dấu */
    position: relative;
}

.tnv-vfic .tnv-row {
    display: flex;
    font-size: 10pt;
    line-height: 1.1;
}

.tnv-vfic .tnv-label {
    font-weight: 700;
    white-space: nowrap;
    min-width: 21mm;
}

.tnv-vfic .tnv-value {
    font-weight: 600;
}

/* Footer xanh lá */
.tnv-vfic .tnv-foot {
    height: 5mm;
    background: #2f9e44;
    color: #fff;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
 * BIẾN THỂ: vfic-meatdeli (thêm dòng "Đơn vị làm việc", chân cam)
 * ========================================================== */
.tnv-meatdeli .tnv-fields {
    gap: 1mm;
    justify-content: center;
}

.tnv-meatdeli .tnv-foot {
    background: #f08c00;
}

/* cam */
.tnv-vfic .tnv-donvi {
    font-size: 7pt;
    line-height: 1.1;
    margin-top: 0.6mm;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * IN: A4 dọc, đúng kích thước mm
 * ========================================================== */
@media print {

    /* Ẩn toàn bộ trang, chỉ in vùng thẻ */
    body * {
        visibility: hidden !important;
    }

    .the-nv-print-area,
    .the-nv-print-area * {
        visibility: visible !important;
    }

    .the-nv-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        gap: 5mm;
        padding: 0;
    }

    @page {
        size: A4 portrait;
        margin: 7mm;
    }

    .the-nv-card {
        border: 0.2mm solid #bbb;
        /* viền cắt mảnh; có thể bỏ nếu không cần */
        margin: 0;
    }

    /* In đúng màu nền (băng xanh, footer lá, dấu) */
    .the-nv-card,
    .the-nv-card * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}