<section class="i-pro-content" style="background-image: url({{ block.image }})"> <div class="container"> <div class="row"> <div class="col-12"><h2 class="i-pro-content-title page-title" data-aos="flip-left" data-aos-delay="100">{{ block.title }}</h2> <ul class="nav nav-tabs" id="myTab" role="tablist" data-aos="flip-left" data-aos-delay="300"> {% set items = block.content | json_decode %} {% for itm in items %} <li class="nav-item" role="presentation"> <button class="nav-link {% if loop.index==1 %}active first{% else %}second{% endif %}" id="program-{{ loop.index }}-tab" data-bs-toggle="tab" data-bs-target="#program-{{ loop.index }}-tab-pane" type="button" role="tab" aria-controls="program-{{ loop.index }}-tab-pane" aria-selected="true"><span>{{ itm.title }}<br>{{ itm.subTitle }}</span> <div class="dots"> <div class="dot"></div> </div> </button> </li> {% endfor %} </ul> <div class="tab-content" id="myTabContent" data-aos="flip-left" data-aos-delay="500"> {% set items = block.content | json_decode %} {% for itm in items %} <div class="tab-pane fade {% if loop.index==1 %}show active{% else %}second{% endif %}" id="program-{{ loop.index }}-tab-pane" role="tabpanel" aria-labelledby="program-{{ loop.index }}-tab" tabindex="0"> <div class="row align-items-center"> <div class="col-md-6"><img loading="lazy" src="{{ itm.image }}" class="img-fluid" alt=""></div> <div class="col-md-5"> <ul class="reason-list"> {{ itm.description | replace({'<p>':'<li>','</p>':'</li>'}) | raw }} </ul> <div class="text-center"><a href="{{ itm.url }}" class="button btn">{{ "ĐĂNG KÝ NGAY" | trans }}</a> </div> </div> </div> </div> {% endfor %} </div> </div> </div> </div></section>