tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7bf3a80574d044b5307cb22e0c945eac730ff4b6
agent_test/export_to_html/article-detail.html

275 lines
14 KiB
HTML
Raw Normal View History

u
2026-03-07 10:26:20 +07:00
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chi tiết tin tức - MIQ Việt Nam</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap"
rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
roboto: ['Roboto', 'Arial', 'sans-serif'],
inter: ['Inter', 'Arial', 'sans-serif'],
},
colors: {
brand: '#E4057C',
brandDeep: '#6B1440',
}
}
}
}
</script>
</head>
<body class="bg-[#f4f4f4] font-roboto text-[#111]">
<main class="mx-auto w-[1200px] py-4 flex flex-col gap-4">
<!-- Breadcrumb -->
<div class="flex items-center gap-2 text-[12px] text-[#888]">
<a href="news.html" class="hover:text-brand">Tin tức</a>
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 18l6-6-6-6" />
</svg>
<span class="text-black">Chi tiết tin tức</span>
</div>
<!-- Main layout: article (864px) + sidebar -->
<div class="flex gap-5">
<!-- Article Content -->
<article class="flex flex-col gap-5 w-[864px] shrink-0">
<!-- Category badge -->
<div
class="inline-flex items-center gap-4 self-start bg-[#eff6ff] border border-[#bedbff] rounded-full px-4 py-2">
<span class="text-[14px] text-[#364153]">Mới tiên</span>
<!-- Google logo -->
<img src="https://www.figma.com/api/mcp/asset/bb8efe47-fa50-4bcf-8db4-5c192159d052" alt="Google"
class="h-[15px] w-[49px] object-contain">
<span class="text-[14px] text-[#fb2c36]">News</span>
</div>
<!-- Title -->
<h1 class="font-medium text-[32px] leading-normal">
<a href="#" class="text-[#155dfc] hover:underline">
Apple ra mắt MacBook Neo giá rẻ chỉ 16,49 triệu đồng: Dùng chip iPhone, màn hình 13 inch, pin 16 giờ
</a>
</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]">
<img src="https://www.figma.com/api/mcp/asset/f92c3878-48d1-4f10-8600-84843959d309" alt="date"
class="w-4 h-4">
15-02-2026, 10:35 pm
</div>
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
<img src="https://www.figma.com/api/mcp/asset/18fa4aed-27e2-461a-a2c5-76114dbe1e82" alt="author"
class="w-4 h-4">
Mai Nguyen
</div>
</div>
<!-- Summary / TOC box -->
<div class="bg-[#e5e7eb] rounded-[10px] pt-6 px-6 h-[176px] flex flex-col gap-3 overflow-hidden">
<p class="font-inter font-bold text-[20px] leading-[30px] text-[#101828]">
Thiết bị sử dụng chip A18 Pro, cho phép xử lý nhanh các tác vụ thường ngày như duyệt web, soạn thảo tài
liệu, xem video, chỉnh sửa ảnh hay chạy các ứng dụng AI
</p>
<ol class="flex flex-col gap-2">
<li class="font-inter font-semibold text-[16px] leading-6 text-[#1e2939]">
<a href="#section-1" class="hover:underline">1. MacBook có lượng vật liệu tái chế cao nhất của hãng</a>
</li>
<li class="font-inter font-semibold text-[16px] leading-6 text-[#1e2939]">
<a href="#section-2" class="hover:underline">2. MacBook có lượng vật liệu tái chế cao nhất của hãng</a>
</li>
</ol>
</div>
<!-- Section heading -->
<h3 id="section-1" class="font-inter font-bold text-[20px] leading-7 text-[#101828]">
<a href="#section-1" class="hover:underline">
MacBook Neo trang bị màn hình Liquid Retina 13 inch với độ phân giải 2408 x 1506 pixel, độ sáng 500 nit và
hỗ trợ 1 tỷ màu
</a>
</h3>
<!-- First paragraph -->
<p class="font-inter text-[16px] leading-6 text-[#364153]">
Apple vừa giới thiệu MacBook Neo, mẫu MacBook hoàn toàn mới hướng tới người dùng phổ thông với thiết kế nhôm,
chip A18 Pro, màn hình Liquid Retina 13 inch thời lượng pin tới 16 giờ, giá tại Việt Nam từ 16,499 triệu đồng.
</p>
<!-- Main image -->
<div
class="rounded-[10px] overflow-hidden shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)] w-full">
<img src="https://www.figma.com/api/mcp/asset/f6ad47a9-3f28-461c-89b8-3aad254d509f" alt="MacBook Neo"
class="w-full h-[387px] object-cover">
</div>
<!-- Second set of paragraphs -->
<div class="font-inter text-[16px] leading-6 text-[#364153] flex flex-col gap-4">
<p>Thiết bị sử dụng chip A18 Pro, cho phép xử lý nhanh các tác vụ thường ngày như duyệt web, soạn thảo tài
liệu, xem video, chỉnh sửa ảnh hay chạy các ứng dụng AI. Apple cho biết MacBook Neo nhanh hơn tới 50% trong
các tác vụ phổ biến so với mẫu laptop PC bán chạy dùng Intel Core Ultra 5. Với các tác vụ AI chạy trực tiếp
trên thiết bị, hiệu năng có thể nhanh hơn tới 3 lần, trong khi chỉnh sửa ảnh nhanh hơn tới 2 lần.</p>
<p>Chip A18 Pro tích hợp GPU 5 lõi và Neural Engine 16 lõi, hỗ trợ các tính năng Apple Intelligence như tóm
tắt ghi chú, chỉnh sửa ảnh bằng công cụ Clean Up hoặc xử lý các tác vụ AI khác ngay trên thiết bị. MacBook
Neo cũng sử dụng thiết kế không quạt, giúp máy hoạt động hoàn toàn yên tĩnh.</p>
</div>
<!-- Secondary image -->
<img src="https://www.figma.com/api/mcp/asset/b5e55d94-3006-4e27-aeae-3c07147b2b6d" alt="MacBook Neo secondary"
class="w-full h-[576px] object-cover shrink-0">
<!-- Final paragraph -->
<p class="font-inter text-[16px] leading-6 text-[#364153]">
Thời lượng pin đạt tối đa 16 giờ nhờ hiệu suất năng lượng của Apple silicon, cho phép người dùng làm việc hoặc
giải trí cả ngày mà không cần sạc. Máy cũng được trang bị camera FaceTime HD 1080p, hệ thống hai micro với
beamforming giảm tiếng ồn và loa kép hướng cạnh hỗ trợ Spatial Audio và Dolby Atmos.
</p>
</article>
<!-- Right sidebar (empty/reserved) -->
<aside class="flex-1"></aside>
</div>
<!-- TIN KHUYẾN MẠI + VIDEO REVIEW -->
<div class="bg-white rounded-xl px-3 py-4 flex gap-3">
<!-- TIN KHUYẾN MẠI -->
<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">
<!-- Main article -->
<a href="#" class="flex flex-col gap-2 w-[481px] shrink-0">
<div class="overflow-hidden rounded-[4px]">
<img src="https://www.figma.com/api/mcp/asset/eb11ba03-8a55-474a-a519-1d37a628b30a"
alt="Ngày hội ĐIỆN MÁY"
class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300">
</div>
<p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">
Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
<!-- Related articles -->
<div class="flex flex-col gap-3 flex-1">
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/932f22a3-b08d-4c27-96fa-f94b6e6f09fb" alt="Related"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/9a4f9c9a-822d-4753-8689-ad906c253d3d" alt="Related"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/821ed15c-4a64-417b-a5fa-10e24eaf7c51" alt="Related"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
</div>
</div>
</div>
<!-- Divider -->
<div class="w-px bg-gray-200 self-stretch"></div>
<!-- VIDEO REVIEW -->
<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">
<!-- Main video -->
<a href="#" class="relative block rounded-[4px] overflow-hidden group">
<img src="https://www.figma.com/api/mcp/asset/6792b6cd-cbe3-417b-be68-a9a021ae7fea" alt="Video review"
class="h-[159px] w-full object-cover rounded-[4px]">
<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-brand ml-0.5" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
</a>
<!-- Video items -->
<a href="#" class="flex gap-3 items-start group">
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
<img src="https://www.figma.com/api/mcp/asset/cd58db8f-0a64-4434-8a4e-5bca3f044a7f" alt="Thumbnail"
class="w-full h-full object-cover">
<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-brand">
Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
<a href="#" class="flex gap-3 items-start group">
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
<img src="https://www.figma.com/api/mcp/asset/7c8f969d-4740-464f-b02c-e3da7955895e" alt="Thumbnail"
class="w-full h-full object-cover">
<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-brand">
Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
</div>
</div>
</div>
<!-- Mọi người cũng tìm kiếm -->
<div class="bg-white rounded-xl px-3 py-4">
<h2 class="text-[24px] font-bold text-black tracking-[-0.48px] mb-3">Mọi người cũng tìm kiếm</h2>
<div class="bg-[#f3f4f7] rounded-xl px-3 py-5 flex flex-wrap gap-5 text-[12px] text-black">
<span class="cursor-pointer hover:text-brand">hút mùi hafele</span>
<span class="cursor-pointer hover:text-brand">bếp từ cheft</span>
<span class="cursor-pointer hover:text-brand">nồi cơm điện Tiger</span>
<span class="cursor-pointer hover:text-brand">máy cạo râu Enchen</span>
<span class="cursor-pointer hover:text-brand">mũ bảo hiểm</span>
<span class="cursor-pointer hover:text-brand">nồi cơm điện Cuckoo</span>
<span class="cursor-pointer hover:text-brand">iPhone 15</span>
<span class="cursor-pointer hover:text-brand">chảo chống dính Elmich</span>
<span class="cursor-pointer hover:text-brand">máy massage X5 Pro Omni</span>
<span class="cursor-pointer hover:text-brand">điều hòa Samsung</span>
<span class="cursor-pointer hover:text-brand">máy lọc nước Korihome Kangen K8</span>
<span class="cursor-pointer hover:text-brand">tông đơ cắt tóc</span>
<span class="cursor-pointer hover:text-brand">điều hoà Hisense</span>
<span class="cursor-pointer hover:text-brand">Máy chạy bộ</span>
<span class="cursor-pointer hover:text-brand">MacBook Air M4</span>
<span class="cursor-pointer hover:text-brand">điều hòa Nagakawa</span>
</div>
</div>
</main>
</body>
</html>
Reference in New Issue Copy Permalink