@media print {
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;

        /*border: 0;*/
        /* @Todo NVN Tạm thời comment style này lại do đang gây lỗi hiển thị border các bảng khi in
         Theo dõi tiếp đến 31/05/2021 không có vấn đề gì thì xóa bỏ hẳn */
        /* @link: https://erp.nhanh.vn/nhiem-vu/giao-dien-moi-bill-in-ban-le-khong-hien-cac-o-ke-hang-da-set-san-trong-mau-in/87381 */
        font-size: 100%;
        color: #000;

       /**
       * Trong file all.min.css thẻ body đang chứa thuộc tính overflow: hidden ở thẻ body
       * => Làm ẩn nội dung trang kế tiếp khi in do nội dung quá dài
       * Giải pháp
       * => overwrite lại thuộc tính này cho toàn bộ các thẻ khi in để không bị ẩn nưữa
       * @link https://erp.nhanh.vn/nhiem-vu/pos-ui-moi-in-hoa-don-ban-si-hoa-don-nhieu-san-pham-khong-tu-mo-rong-sang-trang-tiep-theo/190893
       **/
        overflow: visible !important;
    }

    div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, span, a, p, sub, blockquote, th, td {
        outline: none !important;
    }

    /**
    * Update: 2026-01-28
    * Phần UI mới đang chứa nhiều lớp css khác nhau, nên đang vô tình là ảnh hưởng đến độ rộng của trang in
    * => Khi in để lớp div thừa kế theo lớp cha hoặc inline style nếu có thiết kế thủ công thì vẫn có thể hiển thị độ rộng theo thiết kế đó
    * @link https://work.1app.vn/loi-pos-mau-in-cua-v3-bi-lech-xau.t516117.p200?businessId=124
    **/
    div {
        width: inherit;
    }

    .html-body {
        font-size: 1.3em;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 5px;
    }

    /*
        Update: 2025-07-11
        + Trong file all.min.css, các thẻ tbody, td, tfoot, th, thead ,tr đang bị set border-with: 0
            => làm mất border của phần bảng đã lưu trước đó, bootstrap css bên UI cũ không có phần này
        Update: 2025-12-31
        + Tương tự border-with, border-style trong file all.min.css đang bị set solid
            => Vô tình làm phần border hiển thị trên firefox (chrome, edge không bị ảnh hưởng)
        + Giải pháp: chuyển sang inherit để có thể thừa kế theo style lớp cha là được.
        @link https://work.1app.vn/loi-pos-cung-mau-in-nhung-tren-v3-hien-thi-khac-v2.t515732.p200?businessId=124
    */
    tbody, td, tfoot, th, thead ,tr {
        border-width: inherit;
        border-style: inherit;
    }

    * {
        line-height: 20px;
        color: #000 !important;
    }

    html, body {
        background: #fff !important;
    }

    .imageDefaultPrint {
        width: 100px;
    }

    .imageDefaultPrint img {
        max-width: 100%;
        object-fit: contain;
    }

    .header {
        margin: 20px 0;
        width: 98%;
        display: block;
        height: 100px;
        position: relative;
    }

    .header .name {
        text-align: center;
        font-weight: bold;
        font-size: 2em;
        float: left;
        margin-left: 14%;
        width: 65%;
    }

    .header .sdt {
        float: right;
        width: 17%
    }

    .header .sdt ul {
        list-style: none;
    }

    .header .depotLogo {
        width: 220px;
    }

    .header .storeInfo {
    }

    .header .storeInfo h2 {
        font-size: 1.4em;
        text-align: left;
    }

    .header .date {
        text-align: center;
        font-style: italic;
        font-size: 0.5em;
        font-weight: normal;
    }

    .body {
        display: block;
        padding: 10px 0 0 5px;
        width: 98%;
    }

    .body .row {
        width: 100%;
    }

    .cus-f-info, .tbl-cus {
        margin: 15px 0 15px 0
    }

    .cus-f-info table, .tbl-cus {
        width: 98%;
    }

    .cus-f-info tablet tr {
    }

    .cus-f-info table .col1, .tbl-cus .col1 {
        width: 20%
    }

    .cus-f-info table .col2, .tbl-cus .col2 {
        width: 76%;
        font-weight: bold;
        font-size: 1.2em;
    }

    .cus-f-info table td span {
        width: 100%;
        display: block;
        margin-top: 1%;
        border-bottom: 1px dotted
    }

    .tbl-cus td span {
        width: 100%;
        display: block;
        margin-top: 1%;
        border-bottom: 1px dotted
    }

    .cus-f-info table td {
    }

    .body .row .b-info-cus {
    }

    .b-grid .data {
        width: 98%
    }

    .b-grid .data .col-name {
        font-weight: bold
    }

    .b-grid .data .col1 {
        width: 5%;
    }

    .b-grid .data .col2 {
        width: 50%;
    }

    .b-grid .data .col3 {
        width: 8%;
    }

    .b-grid .data .col4 {
        width: 10%;
    }

    .b-grid .total {
        width: 100%
    }

    .b-grid .total .col1 {
    }

    .b-grid .total .col2 {
    }

    .b-grid .total .col3 {
    }

    .b-grid .last {
        font-weight: bold
    }

    .footer {
        border-top: 1px solid;
        padding-top: 13px;
    }

    .footer .row {
        float: left;
        width: 32%;
        text-align: center;
        margin-bottom: 10%;
        font-weight: bold;
        font-size: 1.2em;
    }

    .footer .row span {
        font-weight: normal;
        font-size: 0.86em;
    }

    .row.note {
        width: 98%;
        text-align: center;
        font-style: italic;
        vertical-align: bottom;
    }

    h1 {
        font-size: 1.2em;
        color: #000;
        text-transform: uppercase;
    }

    strong, b {
        font-weight: bold;
    }

    .page-break-after-print {
        page-break-after: always;
    }

    /*
        @todo NVN 31/08/2020
        - trong lib boostrap.min.css (/css/admin/bootstrap.min.css) hiện tại đang xóa dòng: @page{size:a3} ,
        - đang để mặc định size khi in là A3 làm cho mẫu in bị mờ
        => nếu lib boostrap sau này nâng cấp lên phiên bản mới bị lỗi cần fix mặc định lại
    */
    @page {
        size: auto;
    }

    .table-bordered td, .table-bordered th {
        border: 1px solid black !important;
    }

    div {
        page-break-after: avoid;
    }

    body {
        min-width: 150px !important;
    }

    /**
    * @link: https://erp.nhanh.vn/nhiem-vu/mau-in-loi-font-chu-mau-in-sau-khi-tang-ma-vach-bi-nho-hon/104191
    */
    img {
        max-width: 100%;
    }


    .text-nowrap {
        white-space: normal !important;
    }

    /**
    * Hỗ trợ hiển thị theo từ khóa {__DANH_SACH_XXXX_}
    **/
    .dg {
        border-top: #4d4d4d 1px solid;
        border-right: 1px solid #4d4d4d;
    }

    .dg th, .dg td {
        border: #4d4d4d 1px solid;
        border-left: #4d4d4d 1px solid;
        text-align: center;
        padding: 5px;
    }

    .image {
        display: table;
        clear: both;
        margin: .9em auto;
        min-width: 50px;
        text-align: center;
    }

    .image-style-block-align-right {
        margin-left: auto;
        margin-right: 0;
    }

    .image-style-block-align-left {
        margin-left: 0;
        margin-right: auto;
    }
}