/* * CSS cho Công cụ tạo mã vạch - giaiphaptinhtien.com
 * Đã cập nhật: Tên hàng canh trái, Giá canh phải, nằm dưới mã vạch.
 * Tối ưu Print Preview chuẩn kích thước decal.
 */

:root { 
    --primary: #0073aa; 
    --bg: #f6f7f7; 
}

#gptt-app { 
    max-width: 900px; 
    margin: 20px auto; 
    background: #fff; 
    padding: 20px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    font-family: Arial, sans-serif;
}

/* Giao diện trên Web */
.gptt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.input-item { margin-bottom: 15px; }
.input-item label { display: block; font-weight: bold; margin-bottom: 5px; }
.f-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; }

#product-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
#product-table th { background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left; }
#product-table td { padding: 5px; border: 1px solid #ddd; }

.btn { cursor: pointer; padding: 10px 15px; border: none; border-radius: 3px; font-weight: bold; }
.btn-add { background: #e7f0ff; color: #004fb1; margin-top: 10px; }
.btn-generate { background: var(--primary); color: #fff; width: 100%; margin-top: 20px; font-size: 16px; }
.btn-print { background: #2271b1; color: #fff; margin-top: 10px; display: none; }
.btn-danger { background: #d63638; color: #fff; padding: 5px 8px; }

/* Vùng Preview Web */
#preview-box { margin-top: 30px; padding: 15px; background: #f0f0f0; border: 1px dashed #bbb; }
.label-container { 
    display: flex; 
    flex-wrap: wrap; 
    background: #fff; 
    margin: 0 auto; 
    padding: 0; 
}

/* Ép số lượng tem trên hàng thực tế */
.layout-1-col { width: 50mm; }
.layout-2-col { width: 72mm; }
.layout-3-col { width: 107mm; }

/* Cấu trúc con tem */
.stamp-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    box-sizing: border-box; 
    overflow: hidden; 
    padding: 1mm;
    border: 0.1mm solid #eee; /* Chỉ hiển thị trên web */
    page-break-inside: avoid;
}

.st-store { 
    font-size: 7pt; 
    font-weight: bold; 
    width: 100%; 
    text-align: center; 
    border-bottom: 0.1mm solid #ccc;
    margin-bottom: 1mm;
    white-space: nowrap;
}

.st-code-box { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-bottom: 1mm; 
}

.bc-svg { max-width: 98%; height: auto; }

/* Dòng thông tin Tên hàng & Giá nằm dưới mã vạch */
.st-info-row {
    width: 100%;
    display: block;
    position: relative;
    min-height: 24pt;
}

.st-name {
    float: left;
    text-align: left;
    font-size: 7pt;
    line-height: 8pt;
    max-width: 65%;
    max-height: 24pt;
    overflow: hidden;
    word-wrap: break-word;
}

.st-price {
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: bold;
    max-width: 35%;
}

/* Templates */
.tpl-modern { border-left: 2mm solid #000 !important; }
.tpl-minimal .st-store, .tpl-minimal .st-info-row { visibility: hidden; }

/* PRINT SETTINGS */
@media print {
    body * { visibility: hidden; }
    #preview-box, .label-container, .label-container * { visibility: visible; }
    
    #preview-box { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
        background: none; 
        border: none; 
        padding: 0; 
        margin: 0;
    }
    
    .label-container { 
        padding: 0; 
        margin: 0;
        border: none;
    }

    .stamp-item { 
        border: none !important; 
        box-shadow: none !important;
        float: left; /* Đảm bảo các tem nằm cạnh nhau chuẩn xác */
    }

    /* Tắt các lề mặc định của trình duyệt */
    @page { 
        margin: 0; 
        size: auto;
    }
}