159 lines
6.7 KiB
HTML
159 lines
6.7 KiB
HTML
{% 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>
|
||
|