{% assign no_image_url = 'no-image.png' | asset_url %}
{% assign _article = page.article_detail %}
{% assign _article_cat_url = _article.categoryInfo[0].request_path | default: _article.categoryInfo[0].url %}
{% if _article_cat_url != '' %}
{% unless _article_cat_url contains '/' %}
{% assign _article_cat_url = '/' | append: _article_cat_url %}
{% endunless %}
{% endif %}
<div class="layout-container flex flex-col gap-4 py-4">

  <!-- Breadcrumb -->
  <div class="flex items-center gap-2 text-[12px] tracking-[-0.24px]">
    <a href="/article" class="text-[#888] hover:text-[#e4057c]">Tin tức</a>
    <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
    <span class="text-black">Chi tiết tin tức</span>
  </div>

  <!-- Main layout: article + sidebar -->
  <div class="flex gap-5">

    <!-- Article Content -->
    <article class="flex flex-col gap-5 w-[864px] mx-auto bg-white p-[20px] shrink-0">

      <!-- Category badge -->
      {% if _article.categoryInfo.size > 0 %}
      <div class="inline-flex items-center self-start bg-[#eff6ff] border border-[#bedbff] rounded-full px-4 py-2">
        <a href="{{ _article_cat_url }}" class="text-[14px] text-[#364153] hover:text-[#e4057c]">
          {{ _article.categoryInfo[0].name }}
        </a>
      </div>
      {% endif %}

      <!-- Title -->
      <h1 class="font-medium text-[32px] leading-normal text-black">
        {{ _article.title }}
      </h1>

      <!-- Meta: date + author -->
      <div class="flex items-center gap-4 border-b border-black/10 pb-3">
        <div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" />
            <path d="M16 2v4M8 2v4M3 10h18" />
          </svg>
          {{ _article.createDate }}
        </div>
        {% if _article.author != '' %}
        <div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          {{ _article.author }}
        </div>
        {% endif %}
      </div>

      <!-- Summary box -->
      {% if _article.summary != '' %}
      <div class="bg-[#e5e7eb] rounded-[10px] p-6 flex flex-col gap-3">
        <p class="font-bold text-[20px] leading-[30px] text-[#101828]">
          {{ _article.summary }}
        </p>
      </div>
      {% endif %}

      <!-- Article Content -->
      <div class="font-inter text-[16px] leading-6 text-[#364153] flex flex-col gap-4 article-content">
        {{ _article.content }}
      </div>

    </article>


  </div>

  <!-- TIN KHUYáº¾N Máº I + VIDEO REVIEW tá»« bÃ i liÃªn quan -->
  {% assign _promo_articles = page.home_article_list[19] %}
  {% assign _video_articles = page.home_article_list[29] %}
  {% if _promo_articles.size > 0 or _video_articles.size > 0 %}
  <div class="bg-white rounded-xl px-3 py-4 flex gap-3">

    {% if _promo_articles.size > 0 %}
    <div class="flex flex-col gap-3 flex-1">
      <h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">TIN KHUYáº¾N Máº I</h2>
      <div class="flex gap-3">
        {% assign _main_promo = _promo_articles[0] %}
        <a href="{{ _main_promo.url }}" class="flex flex-col gap-2 w-[481px] shrink-0">
          <div class="overflow-hidden rounded-[4px]">
            <img src="{{ _main_promo.image.thum }}" alt="{{ _main_promo.title }}"
              class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300"
              onerror="this.onerror=null;this.src='{{ no_image_url }}'">
          </div>
          <p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">{{ _main_promo.title }}</p>
        </a>
        <div class="flex flex-col gap-3 flex-1">
          {% for _article in _promo_articles offset:1 limit:3 %}
          <a href="{{ _article.url }}" class="flex gap-3 items-start no-underline">
            <img src="{{ _article.image.thum }}" alt="{{ _article.title }}"
              class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0"
              onerror="this.onerror=null;this.src='{{ no_image_url }}'">
            <p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-[#e4057c]">
              {{ _article.title }}
            </p>
          </a>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    {% if _promo_articles.size > 0 and _video_articles.size > 0 %}
    <div class="w-px bg-gray-200 self-stretch"></div>
    {% endif %}

    {% if _video_articles.size > 0 %}
    <div class="flex flex-col gap-3 w-[279px] shrink-0">
      <h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">VIDEO REVIEW</h2>
      <div class="flex flex-col gap-3">
        {% assign _main_video = _video_articles[0] %}
        <a href="{{ _main_video.url }}" class="relative block rounded-[4px] overflow-hidden group">
          <img src="{{ _main_video.image.thum }}" alt="{{ _main_video.title }}"
            class="h-[159px] w-full object-cover rounded-[4px]"
            onerror="this.onerror=null;this.src='{{ no_image_url }}'">
          <div class="absolute inset-0 bg-black/20 flex items-center justify-center rounded-[4px]">
            <div
              class="w-10 h-10 bg-white/80 rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
              <svg class="w-5 h-5 text-[#e4057c] ml-0.5" viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>
          </div>
        </a>
        {% for _video in _video_articles offset:1 limit:2 %}
        <a href="{{ _video.url }}" class="flex gap-3 items-start group no-underline">
          <div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
            <img src="{{ _video.image.thum }}" alt="{{ _video.title }}" class="w-full h-full object-cover rounded-[4px]"
              onerror="this.onerror=null;this.src='{{ no_image_url }}'">
            <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
              <svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>
          </div>
          <p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-[#e4057c]">
            {{ _video.title }}
          </p>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

  </div>
  {% endif %}

</div>

