<div class="global-breadcrumb-container">
    <a href="/marketing/conditional-promotion"> Banner popup </a>
    <a href=""> Form sửa phần header </a>
</div>

<div class="max-w-[1141px] flex flex-wrap items-start m-[0_auto_16px_auto] p-[0_15px]">
    <div
        class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
        <p class="font-bold text-[20px] leading-[26px] mb-[10px]"> Tùy chỉnh thành phần giao diện </p>

        <p class="w-[100%] text-[#6B7280]">
            <b>Chú ý:</b> Chức năng này chỉ áp dụng với các giao diện đã được cài đặt cho phép thay đổi 1 số thành phần
            của giao diện. Biến template sử dụng $settings (global)
        </p>
    </div>

    <div class="w-[25%] mr-[16px]">
        <div
            class="w-full bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
            <a href="/system/store-design?section=header" {% if global.url contains 'section=header' %}
                style="color: #Fff;background: #0041E8;" {% endif %}
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Phần header
            </a>

            <a href="/system/store-design?section=popup" {% if global.url contains 'section=popup' %}
                style="color: #Fff;background: #0041E8;" {% endif %}
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Banner Pop-Up
            </a>

            <a href="/system/store-design?section=background" {% if global.url contains 'section=background' %}
                style="color: #Fff;background: #0041E8;" {% endif %}
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Hình nền website
            </a>

            <a href="/system/store-design?section=other" {% if global.url contains 'section=other' %}
                style="color: #Fff;background: #0041E8;" {% endif %}
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Thông tin khác
            </a>
        </div>
    </div>

    {% if global.url contains 'section=header' %}

    {% include 'system/form_store_design/header' %}

    {% elsif global.url contains 'section=popup' %}

    {% include 'system/form_store_design/popup' %}

    {% elsif global.url contains 'section=background' %}

    {% include 'system/form_store_design/background' %}

    {% elsif global.url contains 'section=other' %}

    {% include 'system/form_store_design/other' %}

    {% endif %}
</div>