In đơn hàng HRV 2021

donhang.html

<style>
    @page {
        margin: 0;
    }

    .body {
        font-family: Roboto, Arial;
        font-size: 9pt;
        line-height: 13pt;
        margin: 27pt 32pt;
    }

    table {
        font-size: inherit;
        line-height: inherit;
    }

    p {
        margin: 0 0 12pt;
    }

    h1 {
        font-size: 25pt;
        margin: 0 0 12pt;
        line-height: 36pt;
    }

    .colLeft {
        width: 66%;
        padding: 0 6pt 0 0;
    }

    .colRight {
        width: 34%;
    }

    table thead tr {
        white-space: nowrap;
    }

    table thead tr th {
        text-align: left;
    }

    table thead tr th {
        padding: 7pt 8.5pt 5pt 5pt;
    }

    table thead tr th:nth-child(1) {
        padding: 7pt 8pt 5pt;
    }

    table thead tr th:nth-child(2) {
        width: 40pt;
    }

    table thead tr th:nth-child(3) {
        width: 50pt;
    }

    table thead tr th:nth-child(4) {
        width: 61pt;
    }

    .listItem {
        margin: 17pt 0 26pt;
        border-collapse: collapse;
        border: 1pt solid #000000;
        vertical-align: top;
        width: 100%;
    }

    .listItem tbody tr td {
        vertical-align: top;
    }

    .listItem tbody tr td span {
        display: block;
        margin: 3pt 0 0;
        font-style: italic;
    }

    .listItem tbody tr td:nth-child(1) {
        padding: 6.2pt 4pt 3pt 8pt;
        text-align: left;
    }

    .listItem tbody tr td:nth-child(2) {
        padding: 6.2pt 12.5pt 0 5pt;
        text-align: right;
    }

    .listItem tbody tr td:nth-child(3),
    .listItem tbody tr td:nth-child(4) {
        padding: 6.2pt 8pt 0 2pt;
        text-align: right;
    }

    .checkOutLeft {
        width: 49%;
    }

    .checkOutRight {
        width: 51%;
        padding-right: 12pt;
    }

    .checkOutRight td {
        padding-bottom: 17pt;
        vertical-align: top;
    }

    .checkOutRight td:nth-child(2) {
        text-align: right;
    }

    .payments {
        height: 26pt;
        margin: 0 0 24pt;
    }

    @media print and (max-width: 14.8cm) {
        .body {
            margin: 27pt 20pt;
        }

        p {
            margin: 0 0 7pt;
        }

        .colLeft {
            width: 59%;
        }

        .colRight {
            width: 41%;
        }

        table thead tr th {
            padding: 7pt 4pt 5pt 4pt;
        }

        table thead tr th:nth-child(1) {
            padding: 7pt 5pt 5pt;
        }

        table thead tr th:nth-child(2) {
            width: 40pt;
        }

        table thead tr th:nth-child(3) {
            width: 46pt;
        }

        table thead tr th:nth-child(4) {
            width: 46pt;
        }

        .listItem tbody tr td:nth-child(1) {
            padding: 6.2pt 4pt 3pt 5pt;
        }

        .listItem tbody tr td:nth-child(2) {
            padding: 6.2pt 4.5pt 0 4.5pt;
        }

        .listItem tbody tr td:nth-child(3),
        .listItem tbody tr td:nth-child(4) {
            padding: 6.2pt 4.5pt 0 2pt;
        }

        .listItem {
            margin: 14pt 0 15pt;
        }

        .checkOutRight {
            padding-right: 5pt;
        }

        .checkOutRight td {
            padding-bottom: 14pt;
            vertical-align: top;
        }

        .payments {
            margin: 0 0 7pt;
        }
    }

    @media print and (orientation: landscape) {
        .body {
            margin: 27pt 20pt;
        }

        p {
            margin: 0 0 7pt;
        }

        .colLeft {
            width: 59%;
        }

        .colRight {
            width: 41%;
        }

        table thead tr th {
            padding: 7pt 4pt 5pt 4pt;
        }

        table thead tr th:nth-child(1) {
            padding: 7pt 5pt 5pt;
        }

        table thead tr th:nth-child(2) {
            width: 40pt;
        }

        table thead tr th:nth-child(3) {
            width: 46pt;
        }

        table thead tr th:nth-child(4) {
            width: 46pt;
        }

        .listItem tbody tr td:nth-child(1) {
            padding: 6.2pt 4pt 3pt 5pt;
        }

        .listItem tbody tr td:nth-child(2) {
            padding: 6.2pt 4.5pt 0 4.5pt;
        }

        .listItem tbody tr td:nth-child(3),
        .listItem tbody tr td:nth-child(4) {
            padding: 6.2pt 4.5pt 0 2pt;
        }

        .listItem {
            margin: 14pt 0 15pt;
        }

        .checkOutRight {
            padding-right: 5pt;
        }

        .checkOutRight td {
            padding-bottom: 14pt;
            vertical-align: top;
        }

        .payments {
            margin: 0 0 7pt;
        }
    }
</style>
<div class="body">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr style="vertical-align: top">
                <td class="colLeft">
                    <h1>{{ shop_name }}</h1>
                    <p style="margin: 0 0 10pt;"><b>Website: {{ shop.domain }}</b></p>
                    <p style="height: 16pt;"><b>Hotline: {{ shop.phone }}</b></p>
                    <p style="height: 16pt;"><b>Email: {{ shop.email }}</b></p>
                    {% if shop.address %}
		 			<p style="height: 16pt;"><b>Địa chỉ shop:</b> {{ shop.address }}, {{ shop.district }} , {{ shop.province }} , {{ shop.country }}</p>		
		 			{% endif %}
                    <p><b>Địa chỉ nhận hàng</b></p>
                    {% if shipping_address.name %}
                    <p>{{ shipping_address.name | escape }}</p>
                    {% endif %}
                    {% if shipping_address.phone %}
                    <p>{{ shipping_address.phone | escape }}</p>
                    {% endif %}
                    {% if email && email != "" %}
                    <p>{{ email | escape }}</p>
                    {% endif %}
                    {% if shipping_address.address1 || shipping_address.ward || shipping_address.district || shipping_address.province %}
                    <p>
                        {%if shipping_address.address1%} {{ shipping_address.address1 | escape }}, {%endif%} {% if shipping_address.ward %} {{ shipping_address.ward }}, {% endif %} {% if shipping_address.district %} {{ shipping_address.district }}, {% endif %} {% if shipping_address.province %} {{ shipping_address.province }} {%endif%}
                    </p>
                    {% endif %}
                </td>
                <td class="colRight" style="padding-top: 19pt">
                    <p style="margin: 0 0 10pt;">Ngày đặt hàng: {{ date | date: "%d/%m/%Y" }}</p>
                    <p style="margin: 0 0 5pt">Mã đơn hàng: {{ order_name }}</p>
                    <img class="print_barcode" val="{{ order_name }}" style="height: 37pt;vertical-align: top; margin-bottom: 12pt;" />
                    <p><b>Phương thức thanh toán</b></p>
                    <p class="payments">{{ gateway }}</p>
                    <p><strong>Phương thức vận chuyển</strong></p>
		 				{% for shipping_method in shipping_methods %}
		 				<p>{{ shipping_method.title }}</p>
		 				{% endfor %}
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table class="listItem" border="1" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr style="white-space: nowrap;">
                                <th>Tên sản phẩm</th>
                                <th>Số lượng</th>
                                <th>Đơn giá</th>
                                <th>Thành tiền</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for line in line_items %}
                            <tr>
                                <td>
                                    {{ line.title | escape }} {% if line.variant_title != "Default Title" %} - {{ line.variant_title | escape }} {% endif %} <br />
                                    {% if line.sku and line.sku != "" %} <span>{{ line.sku | escape }}</span> {% endif %}
                                </td>
                                <td>{{ line.quantity }}</td>
                                <td>{{ line.price | money }}</td>
                                <td>{{ line.price | times: line.quantity | money}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td class="checkOutLeft"></td>
                                <td class="checkOutRight">
                                    <table width="100%" cellspacing="0" cellpadding="0">
                                        <tbody>
                                            {% for discount in discounts %}
								 				<tr>
								 					<td style="padding: 5px 0px">Khuyến mãi {{ discount.code }}</td>
								 					<td style="text-align:right">-{{ discount.savings | money }}</td>
								 				</tr>
								 				{% endfor %}		
												{%if redeem_services.redeem_name%}
												<tr>
													<td style="padding: 5px 0px">{{redeem_services.redeem_name}} {%if redeem_services.redeem_discount_type =="percent" or redeem_services.redeem_discount_type == "membership" %}(Giảm {{redeem_services.redeem_discount | round }}%) {%endif%}</td>
													<td style="text-align:right">-{{ redeem_services.redeem_used_amount | money }}</td>
												</tr>
												{% endif %}				
                                            <tr>
                                                <td>Phí vận chuyển</td>
                                                <td style="text-align: right;">+{{ shipping_price | money }}</td>
                                            </tr>
                                            <tr>
                                                <td><b>Tổng tiền</b></td>
                                                <td style="text-align: right;"><b>{{ total_price | money }}</b></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>