﻿/*
 * XoSoBD - Lottery Print V3
 * Scope: only app-print (/lottery-print)
 *
 * Muc tieu:
 * - 1/A4 gon nhu bang ve do chuyen nghiep.
 * - 4/A4 = 2 cot x 2 bang, khong chong o.
 * - 6/A4 = 3 cot x 2 bang, khong chong o.
 * - Nut In nam canh 1/A4 - 4/A4 - 6/A4.
 */


app-print{
    display:block;
    min-height:100vh;
    padding:12px 0 28px;
    background:#f2f2f2;
    color:#111;
    font-family:Arial,Helvetica,sans-serif
}


app-print *,
app-print *::before,
app-print *::after{
    box-sizing:border-box
}


app-print table{
    border-collapse:collapse!important;
    border-spacing:0!important
}


app-print .print_container{
    margin:0 auto!important;
    padding:5px!important;
    background:#fff!important;
    overflow:visible!important;
    box-shadow:0 1px 8px rgba(0,0,0,.12)!important
}


app-print .chipsprint.tableCols4{
    width:100%!important;
    table-layout:fixed!important;
    border:1px solid #222!important;
    background:#fff!important
}


app-print .innerA4{
    width:100%!important;
    table-layout:fixed!important;
    background:#fff!important
}


app-print .chipsprintmain{
    width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    background:#fff!important
}


app-print .chipsprintmain td{
    border:1px solid #333!important;
    vertical-align:middle!important
}


app-print .border-none,
app-print .border-0{
    border:0!important
}


app-print .agency{
    margin:0!important;
    text-align:center!important;
    text-transform:uppercase;
    font-weight:800!important;
    line-height:1.08!important
}


app-print .date{
    text-align:center!important;
    font-weight:700!important;
    line-height:1.15!important;
    white-space:nowrap!important
}


app-print .date .daymonth,
app-print .date .year{
    display:inline-block!important;
    white-space:nowrap!important
}


app-print .ciyname{
    text-align:center!important;
    font-weight:800!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important
}


app-print .ticket_type,
app-print .dateMask{
    text-align:center!important;
    font-weight:700!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important
}


app-print .bindText{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    font-weight:800!important;
    font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
    overflow:hidden!important;
    line-height:1.03!important
}


app-print .signature{
    margin-top:4px!important;
    padding-top:4px!important;
    border-top:1px solid #333!important;
    text-align:left!important;
    font-weight:700!important;
    line-height:1.15!important
}


app-print .address{
    margin-top:2px!important;
    text-align:left!important;
    font-weight:600!important;
    line-height:1.15!important
}


app-print .tdinterLine,
app-print .tdinterLineBottom,
app-print .interLinecenter{
    padding:0!important;
    border:0!important;
    background:#fff!important
}


app-print .interLine{
    width:1px!important;
    height:100%!important;
    min-height:100%!important;
    margin:0 auto!important;
    border-left:1px dashed #777!important
}


app-print .centerinterLine{
    border-top:1px dashed #777!important
}


app-print.print-mode-41 .print_container{
    width:620px!important;
    max-width:calc(100vw - 16px)!important
}


app-print.print-mode-41 .agency{
    font-size:27px!important
}


app-print.print-mode-41 .date{
    font-size:16px!important
}


app-print.print-mode-41 .ciyname{
    font-size:18px!important
}


app-print.print-mode-41 .ticket_type,
app-print.print-mode-41 .dateMask{
    font-size:15px!important
}


app-print.print-mode-41 .chipsprintmain td{
    padding:3px 4px!important
}


app-print.print-mode-41 .chipsprintmain>tbody>tr>td:first-child{
    width:12%!important;
    text-align:center!important;
    font-size:14px!important;
    font-weight:700!important
}


app-print.print-mode-41 .bindText{
    font-size:23px!important
}


app-print.print-mode-41 .signature{
    font-size:11px!important
}


app-print.print-mode-41 .address{
    font-size:10px!important
}


app-print.print-mode-44 .print_container{
    width:780px!important;
    max-width:calc(100vw - 16px)!important
}


app-print.print-mode-44 .chipsprint.tableCols4>tbody>tr:not(.centerinterLine)>td:not(.tdinterLine):not(.tdinterLineBottom):not(.interLinecenter){
    width:49.4%!important;
    max-width:49.4%!important;
    vertical-align:top!important;
    overflow:hidden!important
}


app-print.print-mode-44 .tdinterLine,
app-print.print-mode-44 .tdinterLineBottom,
app-print.print-mode-44 .interLinecenter{
    width:1.2%!important;
    max-width:1.2%!important
}


app-print.print-mode-44 .innerA4{
    border:1px solid #222!important
}


app-print.print-mode-44 .agency{
    font-size:14px!important
}


app-print.print-mode-44 .date{
    font-size:9px!important
}


app-print.print-mode-44 .ciyname{
    font-size:10.5px!important
}


app-print.print-mode-44 .ticket_type,
app-print.print-mode-44 .dateMask{
    font-size:8.5px!important
}


app-print.print-mode-44 .chipsprintmain td{
    padding:1px 2px!important
}


app-print.print-mode-44 .chipsprintmain>tbody>tr>td:first-child{
    width:15%!important;
    min-width:0!important;
    padding:1px!important;
    text-align:center!important;
    font-size:8.5px!important;
    font-weight:700!important;
    white-space:nowrap!important
}


app-print.print-mode-44 .bindText{
    font-size:11.5px!important;
    line-height:1.00!important
}


app-print.print-mode-44 .signature{
    margin-top:2px!important;
    padding-top:2px!important;
    font-size:6.8px!important
}


app-print.print-mode-44 .address{
    font-size:5.9px!important
}


app-print.print-mode-46 .print_container{
    width:900px!important;
    max-width:calc(100vw - 12px)!important
}


app-print.print-mode-46 .chipsprint.tableCols4>tbody>tr:not(.centerinterLine)>td:not(.tdinterLine):not(.tdinterLineBottom):not(.interLinecenter){
    width:32.8%!important;
    max-width:32.8%!important;
    vertical-align:top!important;
    overflow:hidden!important
}


app-print.print-mode-46 .tdinterLine,
app-print.print-mode-46 .tdinterLineBottom,
app-print.print-mode-46 .interLinecenter{
    width:.8%!important;
    max-width:.8%!important
}


app-print.print-mode-46 .innerA4{
    border:1px solid #222!important
}


app-print.print-mode-46 .agency{
    font-size:11px!important;
    letter-spacing:-.1px!important
}


app-print.print-mode-46 .date{
    font-size:7.4px!important
}


app-print.print-mode-46 .ciyname{
    font-size:8.3px!important
}


app-print.print-mode-46 .ticket_type,
app-print.print-mode-46 .dateMask{
    font-size:7px!important
}


app-print.print-mode-46 .chipsprintmain td{
    padding:0 1px!important
}


app-print.print-mode-46 .chipsprintmain>tbody>tr>td:first-child{
    width:16%!important;
    min-width:0!important;
    padding:0 1px!important;
    text-align:center!important;
    font-size:6.8px!important;
    font-weight:700!important;
    white-space:nowrap!important
}


app-print.print-mode-46 .bindText{
    font-size:9.2px!important;
    line-height:.98!important;
    letter-spacing:-.05px!important
}


app-print.print-mode-46 .signature{
    margin-top:1px!important;
    padding-top:1px!important;
    font-size:5.5px!important
}


app-print.print-mode-46 .address{
    font-size:4.8px!important
}


app-print .btnGroup{
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    margin:12px auto 0!important;
    text-align:center!important
}


app-print .btnGroup>div{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:6px!important
}


app-print .btnPrintChild,
app-print .btnGroup .btn-event-print .print{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:70px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 12px!important;
    border:1px solid #1268d3!important;
    border-radius:4px!important;
    background:#fff!important;
    color:#1268d3!important;
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:700!important;
    text-decoration:none!important;
    box-shadow:none!important;
    cursor:pointer!important
}


app-print .btnPrintChild:hover,
app-print .btnGroup .btn-event-print .print:hover{
    background:#1268d3!important;
    color:#fff!important
}


app-print .btnGroup .btn-event-print{
    position:static!important;
    right:auto!important;
    bottom:auto!important;
    padding:0!important;
    margin:0!important;
    z-index:auto!important
}


@media(max-width:767px){
    app-print{
        padding-top:6px
    }


    app-print .print_container{
        max-width:calc(100vw - 6px)!important;
        overflow-x:auto!important
    }


    app-print.print-mode-41 .agency{
        font-size:20px!important
    }


    app-print .btnPrintChild,
    app-print .btnGroup .btn-event-print .print{
        min-width:62px!important;
        padding:7px 9px!important;
        font-size:12px!important
    }
}


@page{
    size:A4 portrait;
    margin:5mm
}


@media print{
    html,
    body{
        margin:0!important;
        padding:0!important;
        background:#fff!important
    }


    app-print{
        min-height:0!important;
        padding:0!important;
        background:#fff!important
    }


    app-print .print_container{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        box-shadow:none!important;
        overflow:visible!important
    }


    app-print .btnGroup,
    app-print .btn-event-print,
    app-print .print_container_hidden{
        display:none!important
    }


    app-print .chipsprint.tableCols4,
    app-print .innerA4,
    app-print .chipsprintmain{
        page-break-inside:avoid!important;
        break-inside:avoid!important
    }


    app-print.print-mode-41 .agency{font-size:25px!important}
    app-print.print-mode-41 .bindText{font-size:21px!important}


    app-print.print-mode-44 .agency{font-size:13px!important}
    app-print.print-mode-44 .bindText{font-size:10.5px!important}
    app-print.print-mode-44 .chipsprintmain td{padding:0 1px!important}


    app-print.print-mode-46 .agency{font-size:10px!important}
    app-print.print-mode-46 .bindText{font-size:8.5px!important}
    app-print.print-mode-46 .chipsprintmain td{padding:0!important}
}