> For the complete documentation index, see [llms.txt](https://templates.keycrm.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://templates.keycrm.app/ua/zamovlennya.md).

# Для замовлень

#### Інструкції:

* [Як використовувати шаблони з бібліотеки та створювати власні шаблони документів](https://help.keycrm.app/uk/work-with-orders/iak-stvoriti-novii-shablon-druku-dlia-administratoriv);
* [Довідник доступних тегів, функцій та фільтрів Twig](https://help.keycrm.app/uk/process-automation-api-and-more/dovidnik-dostupnikh-funktsii-ta-fil-triv-twig);
* [Приклади рішень та відповіді на поширені запитання](https://help.keycrm.app/uk/work-with-orders/faq-creation-of-documents-for-protection).

### 1. Товарний чек

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/tazpIzY1OJtCs4zg4nEJ)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Товарний чек</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і контакти магазину               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# ======================================================= #}
  <table class="width100">
    <tbody>
    <tr>
      {# Логотип: замініть src на пряме посилання на своє зображення #}
      <td class="logo-wrapper" valign="top">
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="width: 200px;" alt="">
      </td>
      {# Адреса та email магазину #}
      <td valign="top">
        <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
        <span style="background-color: yellow">demo@ukr.net</span><br />
      </td>
      {# Телефони магазину #}
      <td valign="top">
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
      </td>
    </tr>
    </tbody>
  </table>

  <br /><br /><br />

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і одержувач              #}
  {# Лівий стовпець: ваші дані (замінити жовте)              #}
  {# Правий стовпець: дані клієнта з CRM (авто)              #}
  {# ======================================================= #}
  <table class="width100">
    <tbody>
    <tr>
      <td valign="top" class="label" style="width:50%">
        <span style="background-color: yellow">Постачальник: Test test</span><br />
        <span style="background-color: yellow">ФОП Тест Т.Т</span><br />
        <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
        <span style="background-color: yellow">тел.: (011)777-77-77</span><br />
      </td>
      <td valign="top" class="label">
        {# Дані клієнта підтягуються з CRM автоматично #}
        Одержувач: {{ model.client_name }}<br />
        тел.: {{ model.client_phone | default('не вказано') }}<br />
        {# Email виводиться тільки якщо він заповнений у замовленні #}
        {% if model.client_email %}
          email: {{ model.client_email }}
        {% endif %}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: НАЗВА ДОКУМЕНТА — номер і дата замовлення         #}
  {# Масив місяців для виводу дати словом ("15 травня")      #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <p class="big-text text-center" style="margin-bottom: 10px">
    Товарний чек №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
  </p>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикулу</th>
        <th class="name-col">Назва товару</th>
        <th>Од.</th>
        <th>Кількість</th>
        <th>Ціна</th>
        <th>Сума</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка до замовлення — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: ПІДВАЛ — загальна кількість, сума і підпис        #}
  {# ======================================================= #}
  <br /><br />
  <table class="table-sum width100">
    <tr>
      <td colspan="2">
        Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Дата: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.</span></td>
      <td>Підпис постачальника: &nbsp;&nbsp;&nbsp; ____________________</td>
      <td></td>
    </tr>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }

  .width100 {
    width: calc(100% - 2px);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблиці товарів */
  table.border thead th,
  table.border thead td,
  table.border tbody td {
    border: 1px solid black;
  }

  table.border th {
    padding: 20px 5px;
  }

  table.border td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.border thead {
    display: table-header-group;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.border tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Підвал тримаємо разом, не відривати від підсумків */
  table.table-sum {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 2. Товарний чек №2

{% tabs %}
{% tab title="Зовнішній вигляд" %}
Дякуємо нашому користувачу Аскольду Кузіну за наданий шаблон

<figure><img src="/files/px2rOAHAZtnKw9zzLmGh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

QR-коди можна згенерувати, наприклад, тут: <https://www.qrcode-monkey.com/>

Після генерації потрібно зберегти картинки на вашому сервері (сайті) та вставити в шаблон посилання на них.

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Накладна</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і контакти магазину               #}
  {# Замініть src логотипу та контактні дані на свої         #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td>
        {# Логотип: замініть src на пряме посилання на своє зображення #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="width: 180px;" alt="">
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        м.Київ вул. Хрещатик, 1
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        моб/viber (011) 777-77-77
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span>demo.com.ua</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ДАНІ ПОКУПЦЯ І АДРЕСА ДОСТАВКИ                    #}
  {# Підтягуються з CRM автоматично                          #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="padding: 10px 5px;">
        <strong>Покупець:</strong> {{ model.client_name }}
        {# Телефон виводиться тільки якщо він є в замовленні #}
        {% if model.client_phone %}
        {{ model.client_phone }},
        {% endif %}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 10px;">
        <strong>Адреса доставки:</strong>
        {# Служба доставки виводиться тільки якщо вона є #}
        {% if model.shipping_type %}
        {{ model.shipping_type }},
        {% endif %}
        {# Адреса виводиться тільки якщо вона є #}
        {% if model.shipping_address %}
        {{ model.shipping_address }},<br />
        {% endif %}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: НАЗВА ДОКУМЕНТА — номер і дата замовлення         #}
  {# Масив місяців для виводу дати словом ("15 травня")      #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <p class="text-center" style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
    Накладна №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
  </p>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</th>
        <th class="name-col">Назва товару</th>
        <th>Од.</th>
        <th>Кількість</th>
        <th>Ціна</th>
        <th>Сума</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr class="product-row">
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></t
      </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — кількість позицій і сума прописом      #}
  {# ======================================================= #}
  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tr>
      <td style="padding: 5px;">
        Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        {# Сума прописом: ціла частина (гривні) #}
        {% set gtc = model.grand_total|round(0, 'floor') %}
        {# Дробова частина (копійки) #}
        {% set gtr = ((model.grand_total - gtc) * 100)|round(0, 'floor') %}
        <strong>{{ (gtc|format_number(style="spellout", locale="uk"))|capitalize }}
        {# Відмінювання слова "гривня" #}
        {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
        'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
        {{ currencySuffix }}
        {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
        {# Відмінювання слова "копійка" #}
        {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копійок' : (gtr % 10 == 1) ?
        'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
        {{ centsSuffix }}
        </strong>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИС ПРОДАВЦЯ                                   #}
  {# Замініть "Іванов Іван" на ім'я відповідальної особи     #}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
    <tbody>
    <tr>
      <td style="font-size: 12px;">Продавець</td>
      <td style="border-bottom: 1px solid black;"></td>
      {# Замініть на ім'я відповідальної особи #}
      <td style="font-size: 12px;">Іванов Іван</td>
    </tr>
    <tr>
      <td style="padding: 5px;"></td>
      <td class="text-center" style="padding: 5px;">Підпис</td>
      <td style="padding: 5px;"></td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПОДЯКА І КОНТАКТИ (QR-коди)                       #}
  {# Замініть посилання на QR-коди своїх Telegram/Viber      #}
  {# QR-коди можна згенерувати, наприклад, тут: https://www.qrcode-monkey.com/ #}
  {# Після генерації, потрібно зберегти картинки на вашому сервері (сайті), та вставити в шаблон посилання на них.#}
  {# ======================================================= #}
  <table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
    <tr>
      <td class="text-center" style="font-size: 12px;">
        Дякуємо за замовлення!
      </td>
    </tr>
    <tr>
      <td class="text-center" style="font-size: 12px;">
        Нам дуже важливо щоб ви були задоволені нашими виробами та сервісом
      </td>
    </tr>
    <tr>
      <td class="text-center" style="padding: 5px; font-size: 12px;">
        По будь-якому запитанню ви можете написати нам в вайбер або телеграм:
      </td>
    </tr>
  </table>

  <table class="width100">
    <tbody>
    <tr>
      <td class="text-center" style="width: 50%; font-size: 12px;">Telegram</td>
      <td class="text-center" style="width: 50%; font-size: 12px;">Viber</td>
    </tr>
    <tr>
      {# QR-код Telegram: замініть src на посилання свого QR #}
      <td class="text-center" style="width: 50%;">
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-telegram-qr.png" style="width: 150px;" alt="">
      </td>
      {# QR-код Viber: замініть src на посилання свого QR #}
      <td class="text-center" style="width: 50%; padding: 5px;">
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-viber-qr.png" style="width: 150px;" alt="">
      </td>
    </tr>
    </tbody>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 14px;
  }

  .width100 {
    width: calc(100% - 2px);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table thead td,
  table thead th {
    padding: 5px;
    border-bottom: 1px solid black;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.products-table thead {
    display: table-header-group;
  }

  /* Лінія під кожним рядком товару */
  table.products-table tbody tr.product-row td {
    border-bottom: 1px solid black;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки після таблиці тримаємо разом */
  table.width100:not(.products-table) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 3. Видаткова накладна

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/Ea5JRDHIvMUYFPzOhOV0)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Видаткова накладна</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і назва документа                 #}
  {# Замініть src логотипу на своє зображення                #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td>
        {# Логотип: замініть src на пряме посилання на своє зображення #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height: 40px" alt="">
      </td>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Видаткова накладна № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Постачальник:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Назва організації та реквізити — замінити на свої #}
        <strong><span style="background-color: yellow">ТОВАРИСТВО З ОБМЕЖЕНОЮ ВІДПОВІДАЛЬНІСТЮ "НАЗВА ВАШОЇ КОМПАНІЇ"</span></strong>
        <div style="padding-left: 15px; font-size: 90%;">
          <span style="background-color: yellow">П/р 000000000000, у банку НАЗВА БАНКУ, м. Місто МФО 000000,</span><br />
          <span style="background-color: yellow">вул. Назва вулиці, буд № 0, м. Місто 00000, тел.: (000) 000-00-00,</span><br />
          <span style="background-color: yellow">код за ЄДРПОУ 00000000, ІПН 00000000000, № свід. 00000000,</span><br />
          <span style="background-color: yellow">Є платником податку на прибуток на загальних підставах.</span>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупець:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Ім'я клієнта підтягується з CRM автоматично #}
        <strong>{{ model.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.shipping_address %}
            {{ model.shipping_address }},<br />
          {% endif %}
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_email }}
          {% endif %}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Договір:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Змініть назву договору якщо потрібно #}
        <span>Основний договір</span>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Умови постачання:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Тип доставки підтягується з CRM автоматично #}
        {{ model.shipping_type }}
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Код товару</th>
        <th class="name-col">Назва товару</th>
        <th>Од.</th>
        <th>Кількість</th>
        <th>Ціна</th>
        <th>Сума</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('UAH', locale='uk') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {% if model.discount_amount or model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Знижка — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="6" class="text-right">Знижка:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="6" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="6" class="text-right"><strong>Сума:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — загальна кількість і сума              #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <strong>Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|format_currency('UAH', locale='uk') }}</strong>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: МІСЦЕ СКЛАДАННЯ                                   #}
  {# Замініть адресу на свою                                 #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        Місце складання:
      </td>
      <td>
        {# Замініть на адресу свого складу або офісу #}
        <span style="background-color: yellow">м. Київ, вул. Хрещатик 1</span>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИСИ — постачальник і отримувач                #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>Від постачальника*</strong>
        </div>
        <span style="font-size: 90%;">* Відповідальний за здійснення господарської операції та правильність її оформлення</span>
      </td>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;">
        <div style="padding-bottom: 35px; margin-bottom: 15px; border-bottom: solid 2px black;">
          <strong>Отримав(ла)</strong>
        </div>
        <span style="font-size: 90%;">За довіреністю &nbsp;&nbsp;&nbsp;&nbsp; № &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; від </span>
      </td>
    </tr>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }

  .width100 {
    width: calc(100% - 2px);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблиці товарів */
  table.border thead th,
  table.border thead td,
  table.border tbody td {
    border: 1px solid black;
  }

  table.border th {
    padding: 15px 5px;
  }

  table.border td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.products-table thead {
    display: table-header-group;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки після таблиці тримаємо разом */
  table:not(.products-table):not(.border) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 4. Рахунок на оплату

{% tabs %}
{% tab title="Зовнішній вигляд" %}

<figure><img src="/files/tvvHuNjbuuLUPd2HDrMl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Рахунок на оплату</title>
</head>
<body>

<div class="container">

  {# ======================================================= #}
  {# БЛОК: ШАПКА — назва документа з номером і датою         #}
  {# Масив місяців для виводу дати словом ("15 травня")      #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Рахунок на оплату № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Постачальник: </span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Назва організації — замінити на свою #}
        <strong><span style="background-color: yellow">ТОВ "Назва вашої компанії"</span></strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {# Реквізити — замінити на свої #}
          <span style="background-color: yellow">адреса м.Місто вул. Назва вулиці, 0, АТ КБ "НАЗВА БАНКУ" № рахунку: UA000000000000, код ЄДРПОУ 0000000. Директор Прізвище І.П.</span><br/>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупець:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Ім'я клієнта підтягується з CRM автоматично #}
        <strong>{{ model.client_name }}</strong>
        <div style="padding-left: 15px; font-size: 90%;">
          {% if model.client_phone %}
            {{ model.client_phone }},
          {% endif %}
          {% if model.client_email %}
            {{ model.client_email }}
          {% endif %}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Предмет:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        <div style="padding-left: 15px; font-size: 90%;">
          <span>Постачальник зобов'язується поставити і передати у власність Покупця товар, що вказаний в цьому Рахунку разом з товаросупровідною документацією, а Покупець зобов'язується прийняти і оплатити його з урахуванням цін вказаних у цьому Рахунку.</span><br/>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Термін:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Змініть термін якщо потрібно #}
        <span>Не пізніше 40 днів від дати здійснення попередньої оплати за товар.</span>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Договір:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Номер і дата договору підтягуються з даних замовлення #}
        <span>Договору Поставки № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th class="text-center">Зображення</th>
        <th>Артикул</th>
        <th class="name-col">Назва товару</th>
        <th>Кількість</th>
        <th>Ціна</th>
        <th>Знижка</th>
        <th>Сума</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        {# Зображення товару — підтягується з CRM #}
        <td class="text-center"><img src="{{ product.product_image }}" style="width: 60px;"></td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:30%">{{ product.product_name }} {{ product.product_properties }}</td>
        <td class="text-center">{{ product.product_quantity }} {{ product.product_unit_type }}</td>
        <td class="text-right">{{ product.product_price|format_currency('UAH', locale='uk') }}</td>
        {# Знижка по товару: якщо є — рахуємо суму, якщо немає — виводимо 0 #}
        <td class="text-right">{{ product.product_discount != '-' ? (product.product_quantity * product.product_discount)|format_currency('UAH', locale='uk') : '0' }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endfor %}

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}

      {# "Всього за товари" — завжди #}
      <tr>
        <td colspan="7" class="text-right">Всього за товари:</td>
        <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>
      </tr>

      {# Знижка до замовлення — тільки якщо є #}
      {% if model.discount_amount %}
      <tr>
        <td colspan="7" class="text-right">Знижка до замовлення:</td>
        <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Доставка — тільки якщо є #}
      {% if model.shipping_price %}
      <tr>
        <td colspan="7" class="text-right">Доставка:</td>
        <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>
      </tr>
      {% endif %}

      {# Фінальна сума — відображається завжди #}
      <tr>
        <td colspan="7" class="text-right"><strong>Загальна вартість:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|format_currency('UAH', locale='uk') }}</strong></td>
      </tr>
    </tbody>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — кількість позицій і загальна сума      #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <strong>Всього найменувань {{ model.products|length }}, загальна вартість {{ model.grand_total|format_currency('UAH', locale='uk') }}</strong>
      </td>
    </tr>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: СУМА ПРОПИСОМ                                     #}
  {# Логіка відмінювання гривень/копійок вбудована           #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
        <p>
          {# Ціла частина суми (гривні) #}
          {% set gtc = model.grand_total|round(0, 'floor') %}
          {# Дробова частина (копійки) #}
          {% set gtr = ((model.grand_total - gtc) * 100)|round(0, 'floor') %}
          <strong>{{ (gtc|format_number(style="spellout", locale="uk"))|capitalize }}
          {# Відмінювання слова "гривня" #}
          {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
          'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
          {{ currencySuffix }}
          {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
          {# Відмінювання слова "копійка" #}
          {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копійок' : (gtr % 10 == 1) ?
          'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
          {{ centsSuffix }}
          </strong>
        </p>
      </td>
    </tr>
  </table>

  <br/>

  {# ======================================================= #}
  {# БЛОК: ПІДПИС — строк дії рахунку і відповідальна особа  #}
  {# Замініть ПІБ відповідальної особи (виділено жовтим)     #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
      <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
        {# Змініть строк дії рахунку якщо потрібно #}
        <span style="font-size: 90%;"><strong>Строк дії Рахунку протягом 3 діб, з моменту надання Покупцю.</strong></span>
      </td>
      <td valign="top" style="padding-top: 15px; padding-right: 30px; display: flex; justify-content: space-between; border-bottom: solid 1px black;">
        <strong>Виписав(ла)</strong>
        {# ПІБ відповідальної особи — замінити на своє #}
        <strong><span style="background-color: yellow">Прізвище І.П.</span></strong>
      </td>
    </tr>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }

  .width100 {
    width: calc(100% - 2px);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблиці товарів */
  table.border thead th,
  table.border thead td,
  table.border tbody td {
    border: 1px solid black;
    padding: 5px;
  }

  table.border th {
    padding: 15px 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.products-table thead {
    display: table-header-group;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки після таблиці тримаємо разом */
  table:not(.products-table):not(.border) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 5. Рахунок з ПДВ

{% tabs %}
{% tab title="Зовнішній вигляд" %}

<figure><img src="/files/lJm0tKeUBN8gwUTApEtY" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Замовлення

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Видаткова накладна</title>
</head>
<body>

<div class="container">

  <p class="text-center small-text" 
     style="width:100%; margin:0; padding:10px">
   Увага! Оплата цього рахунку означає погодження з умовами поставки товарів. Повідомлення про оплату є обов'язковим, в 
іншому випадку не гарантується наявність товарів на складі. Товар відпускається за фактом надходження коштів на п/р 
Постачальника, самовивозом, за наявності довіреності та паспорта.
  </p>  
    </br>
    
 <table class="outer">
  <!-- Заголовок -->
  <tr>
    <td colspan="7" class="title">
      Зразок заповнення платіжного доручення
    </td>
  </tr>

  <!-- Основний блок -->
  <tr>
    <!-- Лівий блок -->
    <td style="width:60%;">
       <div style="display: flex; align-items: center; margin-bottom: 8px;">
  <span>Одержувач</span>
  <span style="margin-left:20px;white-space: nowrap;background-color: yellow"><strong>Фізична особа-підприємець<br>Тест Тест Тест</strong></span>
</div>
      <br>

     <div style="display: flex; align-items: center; margin-bottom: 8px;">
  <span>Код</span>
  <span class="bordered" style="margin-left: 50px; background-color: yellow">111111111</span>
</div>


      <div style="margin-bottom:3px">
        <div  style="padding-bottom:15px">Банк одержувача</div>
        <div class="label" style="padding-bottom:9px; background-color: yellow">ПАТ КБ "ПРИВАТБАНК"</div>
      </div>


<td  style="text-align:center; padding-top:100px;">
      <span class="label">Код банку</span><br>
      <span class="bordered" style="background-color: yellow">111111</span>
    </td>
    </td>

    <!-- Правий блок -->
    <td   style="width:20%; text-align:center;">

      <div><span class="label">КРЕДИТ рах. N</span></div>
      <div class="bordered" style="margin-top:6px;background-color: yellow">UA000000000000000000000000000</div><br>

    </td>
  </tr>
</table>
    <br/>

  {# ======================================================= #}
  {# БЛОК: ШАПКА — логотип і назва документа                 #}
  {# Замініть src логотипу на своє зображення                #}
  {# ======================================================= #}
  {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

  <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td>
        {# Логотип: замініть src на пряме посилання на своє зображення #}
        <img src="https://blog.keycrm.app/wp-content/uploads/2025/12/cropped-keycrm-logo-blue-on-transparent-160x53.png" style="height: 40px" alt="">
      </td>
      <td style="font-size: 20px; font-weight: bold; width: 90%">
        Рахунок на оплату № {{ model.id }} від {{ "now"|date("j") }} {{ mnths["now"|date("n")] }} {{ "now"|date("Y") }} р.
      </td>
    </tr>
    </tbody>
  </table>

  {# ======================================================= #}
  {# БЛОК: РЕКВІЗИТИ — постачальник і покупець               #}
  {# Замініть виділений жовтим текст на свої реальні дані    #}
  {# Дані покупця підтягуються з CRM автоматично             #}
  {# ======================================================= #}
  <table>
    <tbody>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Постачальник:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Назва організації та реквізити — замінити на свої #}
        <span style="padding-left: 15px;font-weight: 600; background-color: yellow;">Фізична особа-підприємець Тест Тест Тест</span>
        <div style="padding-left: 15px; font-size: 90%;background-color: yellow;">
          <span style="">Юридична адреса: м. Київ, вул. Назва вулиці, буд. 1,</span><br />
          <span style="">Тел.: +38 (000) 000-00-00, e-mail: test@gmail.com,</span><br />
          <span style="">Р/р UA000000000000000000000000000, Банк ПАТ КБ"ПРИВАТБАНК", МФО 351533,</span><br />
          <span style="">ІПН 11111111</span><br />
          <span style="">Платник єдиного податку 2 група</span>
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="text-decoration: underline">Покупець:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px;">
        {# Ім'я клієнта підтягується з CRM автоматично #}
        <span style="padding-left: 15px;font-weight: 600">{% if model.company.name %}{{ model.company.name }}{% else %}{{ model.client_name }}{% endif %} 
</span>
        <div style="padding-left: 15px; font-size: 90%;">
          {#{% if model.shipping_address %}#}
          {#  {{ model.shipping_address }},<br />#}
          {#{% endif %}#}
          {% if model.client_phone %}
            {{ model.client_phone }}
          {% endif %}
          {#{% if model.client_email %}#}
          {#  {{ model.client_email }}#}
          {#{% endif %}#}
        </div>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <span style="">Договір:</span>
      </td>
      <td valign="top" style="padding-bottom: 7px; padding-left: 15px;">
        {# Змініть назву договору якщо потрібно #}
        <span>Усний</span>
      </td>
    </tr>
    {#<tr>#}
    {#  <td valign="top">#}
    {#    <span style="">Розр.док</span>#}
    {#  </td>#}
    {#  <td valign="top" style="padding-bottom: 7px;padding-left: 15px;">#}
        {# Тип доставки підтягується з CRM автоматично #}
    {#    Рахунок на оплату № {{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.#}
    {#</tr>#}
    </tbody>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: ТАБЛИЦЯ ТОВАРІВ                                   #}
  {# thead повторюється автоматично на кожній сторінці       #}
  {# (CSS: display:table-header-group)                       #}
  {# Рядки товарів не розриваються між сторінками            #}
  {# (CSS: page-break-inside:avoid на tbody tr)              #}
  {# ======================================================= #}
  <table class="width100 border products-table">
    <thead>
      <tr>
        <th class="text-center">№</th>
        <th>Артикул</th>
        <th class="name-col">Товар</th>
        <th>Кількість</th>
        <th>Ціна без ПДВ</th>
        <th>Сума без ПДВ</th>
      </tr>
    </thead>
    <tbody>
      {# Рядки товарів — перебираємо всі позиції замовлення #}
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{ key + 1 }}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:45%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_quantity }} {{ product.product_unit_type }} </td>
        <td class="text-center">{{ product.price_sold|number_format(2, ',', '')}}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|number_format(2, ',', '') }}</td>
      </tr>
      {% endfor %}
       </tbody>

      {# ======================================================= #}
      {# ПІДСУМКИ — виводяться після всіх рядків товарів         #}
      {# ======================================================= #}
    <tfoot>

      {# "Всього за товари" — тільки якщо є знижка або доставка #}
      {#{% if model.discount_amount or model.shipping_price %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Всього за товари:</td>#}
      {#  <td class="text-right">{{ model.total_price|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Знижка — тільки якщо є #}
      {#{% if model.discount_amount %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Знижка:</td>#}
      {#  <td class="text-right">{{ model.discount_amount|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Доставка — тільки якщо є #}
      {#{% if model.shipping_price %}#}
      {#<tr>#}
      {#  <td colspan="5" class="text-right">Доставка:</td>#}
      {#  <td class="text-right">{{ model.shipping_price|format_currency('UAH', locale='uk') }}</td>#}
      {#</tr>#}
      {#{% endif %}#}

      {# Фінальна сума — відображається завжди #}
     <tr>
         <td colspan="2"><strong style="white-space: nowrap;">Рахунок дійсний до {{ "now"|date_modify("+24 hours")|date("d.m.Y") }}
</strong></td>
        <td colspan="3" class="text-right"><strong>Разом:</strong></td>
        <td class="text-right"><strong>{{ model.grand_total|number_format(2, ',', '') }}</strong></td>
      </tr>
     </tfoot>
  </table>
  
  <div style = "border: solid 3px black;">
      <div style = "color:red; font-weight:bold;font-size: medium;padding-bottom:30px">Важливо! Вкажіть, будь ласка, наступне призначення платежу:</div>
      <div style = "color:red;font-size: medium; font-weight:bold;">Оплата за товар згідно рахунку № {{ model.id }} від {{ "now"|date("j") }} {{ mnths["now"|date("n")] }} {{ "now"|date("Y") }} р.
</div>
  </div>
 

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДСУМОК — загальна кількість і сума              #}
  {# ======================================================= #}
  <table>
    <tr>
      <td>
    <span>Всього найменувань {{ model.products|length }}, на суму {{ model.grand_total|number_format(2, ',', '') }} грн.</span>
      </td>
    </tr>
    
     <tr>
      <td>
    <strong>
     {% set gtc = model.grand_total|round(0, 'floor') %}
{% set gtr = (model.grand_total * 100)|round(0, 'floor') % 100 %}

{# --- гривні --- #}
{% set spelled_gtc = gtc|format_number(style="spellout", locale="uk") %}
{% if gtc % 10 == 2 and gtc % 100 != 12 %}
  {% set spelled_gtc = spelled_gtc|replace({'два':'дві'}) %}
{% endif %}
{% if gtc % 10 == 1 and gtc % 100 != 11 %}
  {% set spelled_gtc = spelled_gtc|replace({'один':'одна'}) %}
{% endif %}

 {{ spelled_gtc|capitalize }}
{% if gtc % 10 == 1 and gtc % 100 != 11 %}
  гривня
{% elseif (gtc % 10 in [2,3,4]) and (gtc % 100 not in [12,13,14]) %}
  гривні
{% else %}
  гривень
{% endif %}
{# --- копійки --- #}
{% if gtr == 0 %}
  00 копійок
{% else %}
  {% set spelled_gtr = gtr|format_number(style="spellout", locale="uk") %}
  {% if gtr % 10 == 2 and gtr % 100 != 12 %}
    {% set spelled_gtr = spelled_gtr|replace({'два':'дві'}) %}
  {% endif %}
  {% if gtr % 10 == 1 and gtr % 100 != 11 %}
    {% set spelled_gtr = spelled_gtr|replace({'один':'одна'}) %}
  {% endif %}

  {{ spelled_gtr }} 
  {% if gtr % 10 == 1 and gtr % 100 != 11 %}
    копійка
  {% elseif (gtr % 10 in [2,3,4]) and (gtr % 100 not in [12,13,14]) %}
    копійки
  {% else %}
    копійок
  {% endif %}
{% endif %}
</strong>
      </td>
    </tr>
  </table>

  <br />

  {# ======================================================= #}
  {# БЛОК: МІСЦЕ СКЛАДАННЯ                                   #}
  {# Замініть адресу на свою                                 #}
  {# ======================================================= #}
  {#<table>#}
  {#  <tr>#}
  {#    <td>#}
  {#      Місце складання:#}
  {#    </td>#}
  {#    <td>#}
        {# Замініть на адресу свого складу або офісу #}
  {#      <span style="background-color: yellow">м. Київ, вул. Хрещатик 1</span>#}
  {#    </td>#}
  {#  </tr>#}
  {#</table>#}

  <br />

  {# ======================================================= #}
  {# БЛОК: ПІДПИСИ — постачальник і отримувач                #}
  {# ======================================================= #}
  <table class="width100" style="border-top: solid 3px black;">
    <tr>
<td valign="top" style="padding-top: 30px; padding-right: 30px;" width="50%">
  <div style="margin-bottom: 15px; border-bottom: solid 2px black; position: relative;">
    
    <!-- Текст -->
    <span style="white-space: nowrap;"> Виписав(ла):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Тест Тест Тест</span>
    
    <!-- Додайте своє посилання на зображення з підписом -->
    <img src="https://keycrm.s3.de.io.cloud.ovh.net/storage/demo/uploads/2026-07-21/6leKConB0LRRMYBcxGBgNpUKl9E2BAZK.png" alt="Підпис"
         style="position: absolute; top: -23px; left: 50%; transform: translateX(-50%);
                height: 70px; z-index: 10;">
  </div>
</td>


      <td valign="top" style="padding-top: 30px; padding-right: 30px;">
        <div style="padding-bottom: 18px; margin-bottom: 15px; border-bottom: solid 2px black;">
        </div>
      </td>
    </tr>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  @page {
  size: A4 portrait;   /* або landscape */
  margin: 20mm;        /* відступи від краю аркуша */
}


  html, body {
    height: 100%;
  }

  body {
    font-size: 13px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }
.outer {
    border: 1px solid black; 
    width:100%; 
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 800px;
  }
  
   .title {
    text-align: center;
    font-weight: bold;
    padding: 6px;
  }
  .label { font-weight: bold; }
  .bordered {
    border: 2px solid #000;
    padding: 7px 45px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
  }
  .bordered-two{
     
     border-right: 2px solid #000;
     border-bottom: 2px solid #000;
     border-left:2px solid #000;
    padding: 7px 45px;
    font-weight: bold;
    text-align: center;
    display: inline-block; 
  }
  
  .small-text {
        font-size: 12px;
    }
    
     .smallest-text {
        font-size: 11px;
    }
  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }

  .width100 {
    width: calc(100% - 2px);
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

  /* Рамки для таблиці товарів */
  table.border thead th,
  table.border thead td,
  table.border tbody td {
    border: 1px solid black;
  }

  table.border th {
    padding: 15px 5px;
  }

  table.border td {
    padding: 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     ============================================= */

  /* Заголовок таблиці повторюється на кожній сторінці */
  table.products-table thead {
    display: table-header-group;
  }

  /* Рядки tbody не розриваються між сторінками */
  table.products-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блоки після таблиці тримаємо разом */
  table:not(.products-table):not(.border) {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 6. "Лист на митницю" (при відправці за кордон)

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/aVC9szgIkIkNUOiJ6Ywe)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Доставка

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="KeyCRM">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Митна декларація</title>
</head>
<body>

{# ======================================================= #}
{# БЛОК: ШАПКА — адресат і дані декларанта                 #}
{# Замініть виділений жовтим текст на свої реальні дані    #}
{# ======================================================= #}
<table class="head-table">
  <tr>
    <td valign="bottom"><p class="big bold italic">"______"_________________20__року</p></td>
    <td valign="bottom" class="border-bottom">
      <p class="big italic bold">В.о. начальника Київської ДМС України</p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="small text-center bold">(заповнюється митницею)</td>
    <td valign="top" class="small bold">(найменування митного органу)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# ПІБ керівника митного органу — замінити на своє #}
      <span class="big"><span style="background-color: yellow">Прізвище Імʼя По-Батькові</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(прiзвище, iм'я та по батьковi)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="border-bottom">
      {# Адреса проживання фізичної особи — замінити на свою #}
      <span class="big"><span style="background-color: yellow">м. Місто, вул. Назва вулиці 00/000</span></span>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" class="small">(мiсце проживання фiзичної особи)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="bottom" colspan="2" class="big text-center border-bottom">
      {# ПІБ та паспортні дані декларанта — замінити на свої #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
      <span style="padding: 0 30px"></span>
      <span style="background-color: yellow">ІХ: 000000</span>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="text-center">(прiзвище, iм'я та по батьковi фiзичної особи, паспортні дані)</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
      <p class="big">
        заявляє вiдомостi про товари та iншу iнформацiю, необхiдну для здiйснення митних формальностей.
      </p>
    </td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ТРАНСПОРТНИЙ ДОКУМЕНТ І РАХУНОК                   #}
{# Трекінг-код підтягується з відправлення автоматично     #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p class="big">Номер транспортного документа</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        {# Трекінг-код підтягується з CRM автоматично #}
        <span class="big">{{ model.tracking_code }}</span>
        <span class="big bold italic">Від.</span>
        <span class="big">{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Рахунок</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        <span class="bold">б/н</span>
        <span class="bold italic">від.</span>
        <span>{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr style="height: 11px;">
    <td valign="top">&nbsp;</td>
    <td valign="top" class="small text-center">(номер, дата)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ВІДОМОСТІ ПРО ВІДПРАВЛЕННЯ                        #}
{# Дані підтягуються з відправлення (shipment) автоматично #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Країна вiдправлення (призначення)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Країна підтягується з адреси доставки замовлення #}
      <p>{{ model.shipping_address_country }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Вiдправник (одержувач)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Назва відправника підтягується з відправлення #}
      <p>{{ shipment.name }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Кiлькiсть мiсць</p></td>
    <td valign="bottom" class="border-bottom full-width"><p>1</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна вага (кiлограмiв)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Вага підтягується з відправлення #}
      <p>{{ shipment.weight }} кг</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна митна вартiсть</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p>
        {# Сума всіх товарів відправлення: ціна × кількість #}
        {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
        {{ shipment.currency }}
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Митний режим</p></td>
    <td valign="bottom" class="border-bottom full-width"><p class="bold italic">експорт</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Умови поставки</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Умови поставки — замінити на свої якщо потрібно #}
      <span style="background-color: yellow">CPT</span>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Характер угоди</p></td>
    <td valign="bottom" class="border-bottom full-width"><p></p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" colspan="2"><p>Дозволи уповноважених органів (назва, номер, дата)</p></td>
  </tr>
</table>

<br />

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення,     #}
{# не з замовлення (model.products)                        #}
{# thead повторюється автоматично на кожній сторінці       #}
{# (CSS: display:table-header-group)                       #}
{# Рядки не розриваються між сторінками                    #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table">
  <thead>
    <tr>
      <th><p>Номер товару</p></th>
      <th><p>Найменування товару, його звичайний торговельний опис</p></th>
      <th><p>Код товару згiдно з УКТЗЕД</p></th>
      <th><p>Вартiсть товару у валютi України або iноземнiй валютi</p></th>
    </tr>
  </thead>
  <tbody>
    {% for item in shipment.items %}
    <tr>
      <td><p class="text-center">{{ loop.index }}</p></td>
      {# Опис товару обрізаємо до 35 символів #}
      <td><p>{{ item.description_local|slice(0, 35) }}</p></td>
      <td><p class="text-center">{{ item.hs_code }}</p></td>
      <td><p class="text-center">{{ item.price }} {{ shipment.currency }}</p></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ПІДПИСИ — декларант і митний орган                #}
{# Замініть ПІБ декларанта (виділено жовтим)               #}
{# ======================================================= #}
<table class="signature-table">
  <tr>
    <td valign="bottom">Декларант або уповноважена ним особа</td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="text-center border-bottom">
      {# ПІБ декларанта — замінити на своє #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
    </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
  <tr>
    <td class="border-bottom"></td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="border-bottom"></td>
  </tr>
  <tr>
    <td valign="top" class="text-center">(найменування посади посадової особи митного органу)</td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: МІСЦЕ ДЛЯ ПЕЧАТКИ                                 #}
{# ======================================================= #}
<table class="stamp-table">
  <tr>
    <td>Місце для відбитка особистої номерної печатки</td>
  </tr>
</table>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: 'Times New Roman', sans-serif;
  }

  img {
    border-style: none;
  }

  @page {
    size: auto;
    margin: 5mm 10mm;
  }

  .italic { font-style: italic; }
  .bold   { font-weight: bold; }
  .big    { font-size: 14px; }

  .small {
    font-size: 11px;
    line-height: 11px;
  }

  .text-center { text-align: center; }

  .space-text span {
    margin-right: 10px;
  }

  .nowrap    { white-space: nowrap; }

  .full-width {
    width: 90%;
    padding-left: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid black;
  }

  /* =============================================
     ШАПКА ДОКУМЕНТА
     ============================================= */
  .head-table {
    width: 100%;
  }

  .head-table td {
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .head-table td:first-child { width: 40%; }
  .head-table td:last-child  { width: 60%; }

  /* =============================================
     РЯДКИ З ДАНИМИ ВІДПРАВЛЕННЯ
     ============================================= */
  .second-table {
    width: 100%;
  }

  .second-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .second-table td.nowrap    { padding-right: 20px; }
  .second-table td.full-width { padding-left: 20px; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .goods-table th:nth-child(1),
  .goods-table td:nth-child(1) { width: 6%; }

  .goods-table th:nth-child(2),
  .goods-table td:nth-child(2) { width: 47%; }

  .goods-table th:nth-child(3),
  .goods-table td:nth-child(3) { width: 20%; }

  .goods-table th:nth-child(4),
  .goods-table td:nth-child(4) { width: 16%; }

  .goods-table th { font-weight: bold; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* =============================================
     ПІДПИСИ
     ============================================= */
  .signature-table {
    width: 100%;
    border-spacing: 10px 0;
    border-collapse: separate;
    margin-bottom: 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .signature-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .signature-table td:nth-child(1) { width: 45%; }
  .signature-table td:nth-child(2) { width: 15%; }
  .signature-table td:nth-child(3) { width: 40%; }

  /* =============================================
     МІСЦЕ ДЛЯ ПЕЧАТКИ
     ============================================= */
  .stamp-table {
    width: 30%;
    border: solid 1px black;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stamp-table td {
    padding: 30px;
  }
</style>
</html>
    }

    .bold {
        font-weight: bold;
    }

    .big {
        font-size: 14px;
    }
    
    .small { 
        font-size: 11px;
        line-height: 11px;
    }

    .text-center {
        text-align: center;
    }

    .space-text span{
        margin-right: 10px;
    }
    
    .nowrap { 
        white-space: nowrap;
    }
    
    .full-width {
        width: 90%;
        padding-left: 20px;
    }

    .border-bottom {
        border-bottom: 1px solid black;
    }

    /*head-table*/
    .head-table {
        width: 100%;
    }

    .head-table .border-bottom {
        border-bottom: solid 1px black;
    }

    .head-table td {
        height: 22px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .head-table td:first-child {
        width: 40%;
    }

    .head-table td:last-child {
        width: 60%;
    }

    /*second-table*/
    .second-table {
        width: 100%;
    }

    .second-table .slim-row td {
        height: 10px;
    }

    .second-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .second-table td.nowrap {
        padding-right: 20px;
    }
    
    .second-table td.full-width {
        padding-left: 20px;
    }

    /*goods-table*/
    .goods-table {
        width: 100%;
        border-color: black;
        margin-bottom: 20px;
    }

    .goods-table th:nth-child(1),
    .goods-table td:nth-child(1) {
        width: 6%;
    }

    .goods-table th:nth-child(2),
    .goods-table td:nth-child(2) {
        width: 47%;
    }

    .goods-table th:nth-child(3),
    .goods-table td:nth-child(3) {
        width: 20%;
    }

    .goods-table th:nth-child(4),
    .goods-table td:nth-child(4) {
        width: 16%;
    }

    .goods-table th {
        padding: 5px;
        font-style: bold;
    }

    .goods-table td {
        padding: 5px;
    }

    /*signature-table*/
    .signature-table {
        width: 100%;
        border-spacing: 10px 0;
        margin-bottom: 20px;
    }
    .signature-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .signature-table td:nth-child(1) {
        width: 45%;
    }

    .signature-table td:nth-child(2) {
        width: 15%;
    }

    .signature-table td:nth-child(3) {
        width: 40%;
    }

    .stamp-table {
        width: 30%;
        border: solid 1px black;
        text-align: center;
    }

    .stamp-table td {
        padding: 30px;
    }
</style>
</html>
```

{% endtab %}
{% endtabs %}

### 7. Proforma Invoice для відправки закордон (митний інвойс)

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](/files/Cjf6y1lvSrT1mJDDdDxJ)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Доставка

```html
<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="KeyCRM">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proforma Invoice</title>
</head>
<body>

{# ======================================================= #}
{# БЛОК: ЗАГОЛОВОК ДОКУМЕНТА                               #}
{# ======================================================= #}
<div class="bold text-center">PROFORMA INVOICE</div>

<div>
  <div class="margin"></div>
  {# Дата і трекінг-номер підтягуються автоматично #}
  <table class="head-table mt-10 mb-10">
    <tbody>
    <tr>
      <td>DATE (дата)</td>
      <td class="text-center">{{ "now"|date("m/d/Y") }} / {{ "now"|date("d/m/Y") }}</td>
    </tr>
    <tr>
      <td>TRK.NO. (номер накладної)</td>
      <td class="text-center">{{ model.tracking_code }}</td>
    </tr>
    </tbody>
  </table>
</div>

{# ======================================================= #}
{# БЛОК: ВІДПРАВНИК (SHIPPER)                              #}
{# Замініть виділений жовтим текст на свої реальні дані    #}
{# ======================================================= #}
<div class="clean-float"><span class="bold">SHIPPER</span> (вантажовідправник)</div>
<table class="second-table">
  <tbody>
  <tr>
    <td>Company name (назва компанії)</td>
    <td>
      {# Назва ФОП/компанії — замінити на свою #}
      Individual entrepreneur <span style="background-color: yellow">FIRST_NAME LAST_NAME</span> /
      ФОП <span style="background-color: yellow">ПРІЗВИЩЕ ІМʼЯ ПО-БАТЬКОВІ</span>
    </td>
  </tr>
  <tr>
    <td>TAX ID (ІПН)</td>
    {# ІПН — замінити на свій #}
    <td><span style="background-color: yellow">&lt; ІПН &gt;</span></td>
  </tr>
  <tr>
    <td>Contact person (контактна особа)</td>
    <td>
      {# Контактна особа — замінити на свою #}
      <span style="background-color: yellow">FIRST_NAME LAST_NAME</span> /
      <span style="background-color: yellow">ПРІЗВИЩЕ ІМʼЯ ПО-БАТЬКОВІ</span>
    </td>
  </tr>
  <tr>
    <td>Address (адреса)</td>
    {# Адреса відправника — замінити на свою #}
    <td><span style="background-color: yellow">Kyiv st. Khreshchatyk, 1 / м.Київ вул. Хрещатик, 1</span></td>
  </tr>
  <tr>
    <td>City (місто)</td>
    {# Місто відправника — замінити на своє #}
    <td><span style="background-color: yellow">Kyiv / Київ</span></td>
  </tr>
  <tr>
    <td>Postal code (поштовий індекс)</td>
    {# Індекс підтягується з адреси відправлення #}
    <td>{{ shipment.address.postal_code }}</td>
  </tr>
  <tr>
    <td>Country (країна)</td>
    {# Країна відправника — замінити якщо потрібно #}
    <td><span style="background-color: yellow">Ukraine / Україна</span></td>
  </tr>
  <tr>
    <td>Phone/fax nr. (телефон/факс)</td>
    {# Телефон підтягується з адреси відправлення #}
    <td>{{ shipment.address.phone }}</td>
  </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ОДЕРЖУВАЧ (SHIP TO)                               #}
{# Дані підтягуються з CRM автоматично                     #}
{# ======================================================= #}
<div class="mt-10"><span class="bold">SHIP TO</span> (вантажоодержувач)</div>
<table class="second-table">
  <tbody>
  <tr>
    <td>Company name (назва компанії)</td>
    <td>{{ shipment.name }}</td>
  </tr>
  <tr>
    <td>Contact person (контактна особа)</td>
    <td>{{ shipment.name }}</td>
  </tr>
  <tr>
    <td>Address (адреса)</td>
    <td>{{ model.shipping_receive_point }}</td>
  </tr>
  <tr>
    <td>City (місто)</td>
    <td>{{ model.shipping_address_city }}</td>
  </tr>
  <tr>
    <td>Postal code (поштовий індекс)</td>
    <td>{{ model.shipping_address_zip }}</td>
  </tr>
  <tr>
    <td>Country (країна)</td>
    <td>{{ model.shipping_address_country }}</td>
  </tr>
  <tr>
    <td>Phone/fax nr. (телефон/факс)</td>
    <td>{{ shipment.phone }}</td>
  </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення      #}
{# Рядок-заголовок у <thead> повторюється на кожній стор.  #}
{# (CSS: display:table-header-group)                       #}
{# Рядки товарів не розриваються між сторінками            #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table mt-10">
  <thead>
    <tr class="text-center">
      <td>
        <div class="bold">No. Units</div>
        <div>Кількість</div>
      </td>
      <td>
        <div class="bold">Complete description of goods</div>
        <div>Найменування вантажу</div>
      </td>
      <td>
        <div class="bold">Harmonized tariff code</div>
        <div>Код по УКТЗЕД</div>
      </td>
      <td>
        <div class="bold">Country of origin</div>
        <div>Країна походження</div>
      </td>
      <td>
        <div class="bold">Unit Value</div>
        <div>Ціна за одиницю</div>
      </td>
      <td>
        <div class="bold">Total Value</div>
        <div>Загальна вартість</div>
      </td>
    </tr>
  </thead>
  <tbody>
    {# Рядки товарів — перебираємо всі позиції відправлення #}
    {% for item in shipment.items %}
    <tr>
      <td class="text-center">{{ item.quantity }}</td>
      {# Опис товару: англійською і локальною мовою, обрізається до 35 символів #}
      <td>{{ item.description_eng|slice(0, 35) }} / {{ item.description_local|slice(0, 35) }}</td>
      <td>{{ item.hs_code }}</td>
      {# Країна походження — замінити якщо потрібно #}
      <td>Ukraine / Україна</td>
      <td class="text-center">{{ item.price }} {{ shipment.currency }}</td>
      <td class="text-center">{{ (item.price * item.quantity)|round(2) }} {{ shipment.currency }}</td>
    </tr>
    {% endfor %}

    {# Рядок з підсумковою вартістю всіх товарів #}
    <tr>
      <td colspan="5"><strong>TOTAL VALUE</strong></td>
      <td class="text-center">
        <strong>
          {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
          {{ shipment.currency }}
        </strong>
      </td>
    </tr>
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ДОДАТКОВІ ВІДОМОСТІ — вага, кількість, мета       #}
{# ======================================================= #}
<div style="padding: 0 40px;">
  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Total weight, kg</span>
        <span>(Загальна вага)</span>
      </td>
      {# Вага підтягується з відправлення #}
      <td class="full-width border-bottom">{{ shipment.weight }}</td>
    </tr>
    </tbody>
  </table>

  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Number of packages</span>
        <span>(Кількість пакетів)</span>
      </td>
      <td class="full-width border-bottom">1</td>
    </tr>
    </tbody>
  </table>

  <table class="second-table no-border">
    <tbody>
    <tr>
      <td class="nowrap">
        <span class="bold mr-10">Reason for export</span>
        <span>(Мета експорту)</span>
      </td>
      {# Мета експорту — замінити якщо потрібно #}
      <td class="full-width border-bottom">
        <span style="background-color: yellow">SALE / ПРОДАЖ</span>
      </td>
    </tr>
    </tbody>
  </table>

  <p class="mt-10">I declare that the above information is true and correct to the best of my knowledge.</p>
</div>

{# ======================================================= #}
{# БЛОК: ПІДПИС І ПЕЧАТКА                                  #}
{# ======================================================= #}
<div class="middle">
  <div>SIGNATURE</div>
  <div>COMPANY STAMP</div>
</div>

</body>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Times New Roman', Verdana, Arial, sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
  }

  img {
    border-style: none;
  }

  .italic     { font-style: italic; }
  .bold       { font-weight: 600; }
  .text-center { text-align: center; }

  .space-text span { margin-right: 10px; }

  .border-bottom { border-bottom: 1px solid black !important; }

  .clean-float { clear: right; }

  .mt-10 { margin-top: 10px; }
  .mb-10 { margin-bottom: 10px; }
  .mr-10 { margin-right: 10px; }
  .nowrap { white-space: nowrap; }

  .middle {
    margin-top: 50px;
    margin-left: 50%;
  }

  .second-table.no-border td { border: none; }

  .margin {
    display: inline-block;
    width: 28%;
  }

  /* =============================================
     ШАПКА — дата і трекінг-номер
     ============================================= */
  .head-table {
    display: inline-table;
    width: 70%;
    border-collapse: collapse;
  }

  .head-table td {
    height: 18px;
    padding: 0 5px;
    border: solid 1px black;
    line-height: 1;
  }

  .head-table td:first-child { width: 60%; }
  .head-table td:last-child  { width: 40%; }

  /* =============================================
     ТАБЛИЦІ ВІДПРАВНИКА І ОДЕРЖУВАЧА
     ============================================= */
  .second-table {
    width: 100%;
    border-collapse: collapse;
  }

  .second-table td {
    height: 18px;
    padding: 0 5px;
    border: solid 1px black;
  }

  .second-table td:first-child { width: 40%; }
  .second-table td:last-child  { width: 60%; }

  .second-table td.nowrap     { padding-right: 20px; width: auto; }
  .second-table td.full-width { padding-left: 20px; width: 90%; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border: solid 1px black;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: solid 1px black;
    padding: 5px;
  }

  .goods-table td:nth-child(1) { width: 6%; }
  .goods-table td:nth-child(2) { width: 42%; }
  .goods-table td:nth-child(3) { width: 13%; }
  .goods-table td:nth-child(4) { width: 13%; }
  .goods-table td:nth-child(5) { width: 13%; }
  .goods-table td:nth-child(6) { width: 13%; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Блок підпису тримаємо разом */
  .middle {
    page-break-inside: avoid;
    break-inside: avoid;
  }
</style>
</html>.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Рахунок</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p class="space-text">
        <span class="bold">б/н</span>
        <span class="bold italic">від.</span>
        <span>{{ "now"|date("d.m.Y") }}р.</span>
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr style="height: 11px;">
    <td valign="top">&nbsp;</td>
    <td valign="top" class="small text-center">(номер, дата)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: ВІДОМОСТІ ПРО ВІДПРАВЛЕННЯ                        #}
{# Дані підтягуються з відправлення (shipment) автоматично #}
{# ======================================================= #}
<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Країна вiдправлення (призначення)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Країна підтягується з адреси доставки замовлення #}
      <p>{{ model.shipping_address_country }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Вiдправник (одержувач)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Назва відправника підтягується з відправлення #}
      <p>{{ shipment.name }}</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Кiлькiсть мiсць</p></td>
    <td valign="bottom" class="border-bottom full-width"><p>1</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна вага (кiлограмiв)</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Вага підтягується з відправлення #}
      <p>{{ shipment.weight }} кг</p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Загальна митна вартiсть</p></td>
    <td valign="bottom" class="border-bottom full-width">
      <p>
        {# Сума всіх товарів відправлення: ціна × кількість #}
        {{ shipment.items|reduce((carry, item) => carry + (item.price * item.quantity), 0)|round(2) }}
        {{ shipment.currency }}
      </p>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Митний режим</p></td>
    <td valign="bottom" class="border-bottom full-width"><p class="bold italic">експорт</p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Умови поставки</p></td>
    <td valign="bottom" class="border-bottom full-width">
      {# Умови поставки — замінити на свої якщо потрібно #}
      <span style="background-color: yellow">CPT</span>
    </td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" class="nowrap"><p>Характер угоди</p></td>
    <td valign="bottom" class="border-bottom full-width"><p></p></td>
  </tr>
</table>

<table class="second-table">
  <tr>
    <td valign="bottom" colspan="2"><p>Дозволи уповноважених органів (назва, номер, дата)</p></td>
  </tr>
</table>

<br />

{# ======================================================= #}
{# БЛОК: ТАБЛИЦЯ ТОВАРІВ ВІДПРАВЛЕННЯ                      #}
{# Перебираємо shipment.items — товари з відправлення,     #}
{# не з замовлення (model.products)                        #}
{# thead повторюється автоматично на кожній сторінці       #}
{# (CSS: display:table-header-group)                       #}
{# Рядки не розриваються між сторінками                    #}
{# (CSS: page-break-inside:avoid на tbody tr)              #}
{# ======================================================= #}
<table class="goods-table">
  <thead>
    <tr>
      <th><p>Номер товару</p></th>
      <th><p>Найменування товару, його звичайний торговельний опис</p></th>
      <th><p>Код товару згiдно з УКТЗЕД</p></th>
      <th><p>Вартiсть товару у валютi України або iноземнiй валютi</p></th>
    </tr>
  </thead>
  <tbody>
    {% for item in shipment.items %}
    <tr>
      <td><p class="text-center">{{ loop.index }}</p></td>
      {# Опис товару обрізаємо до 35 символів #}
      <td><p>{{ item.description_local|slice(0, 35) }}</p></td>
      <td><p class="text-center">{{ item.hs_code }}</p></td>
      <td><p class="text-center">{{ item.price }} {{ shipment.currency }}</p></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{# ======================================================= #}
{# БЛОК: ПІДПИСИ — декларант і митний орган                #}
{# Замініть ПІБ декларанта (виділено жовтим)               #}
{# ======================================================= #}
<table class="signature-table">
  <tr>
    <td valign="bottom">Декларант або уповноважена ним особа</td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="text-center border-bottom">
      {# ПІБ декларанта — замінити на своє #}
      <span style="background-color: yellow">Прізвище Імʼя По-Батькові</span>
    </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
  <tr>
    <td class="border-bottom"></td>
    <td class="border-bottom"></td>
    <td valign="bottom" class="border-bottom"></td>
  </tr>
  <tr>
    <td valign="top" class="text-center">(найменування посади посадової особи митного органу)</td>
    <td valign="top" class="text-center">(пiдпис)</td>
    <td valign="top" class="text-center">(iнiцiали, прiзвище)</td>
  </tr>
</table>

{# ======================================================= #}
{# БЛОК: МІСЦЕ ДЛЯ ПЕЧАТКИ                                 #}
{# ======================================================= #}
<table class="stamp-table">
  <tr>
    <td>Місце для відбитка особистої номерної печатки</td>
  </tr>
</table>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: 'Times New Roman', sans-serif;
  }

  img {
    border-style: none;
  }

  @page {
    size: auto;
    margin: 5mm 10mm;
  }

  .italic { font-style: italic; }
  .bold   { font-weight: bold; }
  .big    { font-size: 14px; }

  .small {
    font-size: 11px;
    line-height: 11px;
  }

  .text-center { text-align: center; }

  .space-text span {
    margin-right: 10px;
  }

  .nowrap    { white-space: nowrap; }

  .full-width {
    width: 90%;
    padding-left: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid black;
  }

  /* =============================================
     ШАПКА ДОКУМЕНТА
     ============================================= */
  .head-table {
    width: 100%;
  }

  .head-table td {
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .head-table td:first-child { width: 40%; }
  .head-table td:last-child  { width: 60%; }

  /* =============================================
     РЯДКИ З ДАНИМИ ВІДПРАВЛЕННЯ
     ============================================= */
  .second-table {
    width: 100%;
  }

  .second-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .second-table td.nowrap    { padding-right: 20px; }
  .second-table td.full-width { padding-left: 20px; }

  /* =============================================
     ТАБЛИЦЯ ТОВАРІВ
     ============================================= */
  .goods-table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .goods-table th,
  .goods-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .goods-table th:nth-child(1),
  .goods-table td:nth-child(1) { width: 6%; }

  .goods-table th:nth-child(2),
  .goods-table td:nth-child(2) { width: 47%; }

  .goods-table th:nth-child(3),
  .goods-table td:nth-child(3) { width: 20%; }

  .goods-table th:nth-child(4),
  .goods-table td:nth-child(4) { width: 16%; }

  .goods-table th { font-weight: bold; }

  /* =============================================
     РОЗБИТТЯ НА СТОРІНКИ
     Заголовок таблиці товарів повторюється
     автоматично на кожній сторінці.
     Рядки товарів не розриваються між сторінками.
     ============================================= */
  .goods-table thead {
    display: table-header-group;
  }

  .goods-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* =============================================
     ПІДПИСИ
     ============================================= */
  .signature-table {
    width: 100%;
    border-spacing: 10px 0;
    border-collapse: separate;
    margin-bottom: 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .signature-table td {
    height: 25px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .signature-table td:nth-child(1) { width: 45%; }
  .signature-table td:nth-child(2) { width: 15%; }
  .signature-table td:nth-child(3) { width: 40%; }

  /* =============================================
     МІСЦЕ ДЛЯ ПЕЧАТКИ
     ============================================= */
  .stamp-table {
    width: 30%;
    border: solid 1px black;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stamp-table td {
    padding: 30px;
  }
</style>
</html>
    }

    .bold {
        font-weight: bold;
    }

    .big {
        font-size: 14px;
    }
    
    .small { 
        font-size: 11px;
        line-height: 11px;
    }

    .text-center {
        text-align: center;
    }

    .space-text span{
        margin-right: 10px;
    }
    
    .nowrap { 
        white-space: nowrap;
    }
    
    .full-width {
        width: 90%;
        padding-left: 20px;
    }

    .border-bottom {
        border-bottom: 1px solid black;
    }

    /*head-table*/
    .head-table {
        width: 100%;
    }

    .head-table .border-bottom {
        border-bottom: solid 1px black;
    }

    .head-table td {
        height: 22px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .head-table td:first-child {
        width: 40%;
    }

    .head-table td:last-child {
        width: 60%;
    }

    /*second-table*/
    .second-table {
        width: 100%;
    }

    .second-table .slim-row td {
        height: 10px;
    }

    .second-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .second-table td.nowrap {
        padding-right: 20px;
    }
    
    .second-table td.full-width {
        padding-left: 20px;
    }

    /*goods-table*/
    .goods-table {
        width: 100%;
        border-color: black;
        margin-bottom: 20px;
    }

    .goods-table th:nth-child(1),
    .goods-table td:nth-child(1) {
        width: 6%;
    }

    .goods-table th:nth-child(2),
    .goods-table td:nth-child(2) {
        width: 47%;
    }

    .goods-table th:nth-child(3),
    .goods-table td:nth-child(3) {
        width: 20%;
    }

    .goods-table th:nth-child(4),
    .goods-table td:nth-child(4) {
        width: 16%;
    }

    .goods-table th {
        padding: 5px;
        font-style: bold;
    }

    .goods-table td {
        padding: 5px;
    }

    /*signature-table*/
    .signature-table {
        width: 100%;
        border-spacing: 10px 0;
        margin-bottom: 20px;
    }
    .signature-table td {
        height: 25px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .signature-table td:nth-child(1) {
        width: 45%;
    }

    .signature-table td:nth-child(2) {
        width: 15%;
    }

    .signature-table td:nth-child(3) {
        width: 40%;
    }

    .stamp-table {
        width: 30%;
        border: solid 1px black;
        text-align: center;
    }

    .stamp-table td {
        padding: 30px;
    }
</style>
</html>
```

{% endtab %}
{% endtabs %}
