374 lines
21 KiB
HTML
374 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="vi"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-tint": "#0053db",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"surface-variant": "#e0e3e5",
|
|
"on-error": "#ffffff",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"secondary": "#495c95",
|
|
"surface-container-high": "#e6e8ea",
|
|
"tertiary": "#943700",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"primary": "#004ac6",
|
|
"primary-fixed": "#dbe1ff",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary-container": "#ffede6",
|
|
"on-tertiary": "#ffffff",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"surface-bright": "#f7f9fb",
|
|
"secondary-fixed-dim": "#b4c5ff",
|
|
"inverse-primary": "#b4c5ff",
|
|
"on-surface-variant": "#434655",
|
|
"secondary-container": "#acbfff",
|
|
"primary-container": "#2563eb",
|
|
"error-container": "#ffdad6",
|
|
"surface": "#f7f9fb",
|
|
"inverse-surface": "#2d3133",
|
|
"tertiary-container": "#bc4800",
|
|
"surface-container": "#eceef0",
|
|
"on-secondary-fixed": "#00174b",
|
|
"on-background": "#191c1e",
|
|
"secondary-fixed": "#dbe1ff",
|
|
"surface-dim": "#d8dadc",
|
|
"on-surface": "#191c1e",
|
|
"on-primary-fixed": "#00174b",
|
|
"on-primary-container": "#eeefff",
|
|
"on-secondary-container": "#394c84",
|
|
"on-secondary-fixed-variant": "#31447b",
|
|
"on-primary": "#ffffff",
|
|
"outline-variant": "#c3c6d7",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-secondary": "#ffffff",
|
|
"surface-container-low": "#f2f4f6",
|
|
"on-error-container": "#93000a",
|
|
"outline": "#737686",
|
|
"background": "#f7f9fb"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Plus Jakarta Sans"],
|
|
"body": ["Plus Jakarta Sans"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.circular-progress {
|
|
--percent: 0;
|
|
background: conic-gradient(var(--tw-primary) calc(var(--percent) * 1%), #eef2f6 0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface antialiased">
|
|
<!-- SideNavBar Component -->
|
|
<aside class="fixed left-0 top-0 h-full w-[240px] z-30 bg-slate-50 border-r-0 flex flex-col p-4 gap-2 font-plus-jakarta-sans antialiased">
|
|
<div class="mb-8 px-4 py-2">
|
|
<h1 class="text-xl font-bold tracking-tight text-blue-700">Cognitive</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-slate-400 font-semibold">TOEIC Excellence</p>
|
|
</div>
|
|
<nav class="space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
<span class="text-sm font-medium">Home</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-blue-700 font-semibold bg-white rounded-xl translate-x-1 transition-transform" href="#">
|
|
<span class="material-symbols-outlined" data-icon="menu_book">menu_book</span>
|
|
<span class="text-sm font-medium">Luyện đề TOEIC</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="edit_note">edit_note</span>
|
|
<span class="text-sm font-medium">AI Writing</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="auto_stories">auto_stories</span>
|
|
<span class="text-sm font-medium">Từ vựng</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto p-4 bg-surface-container-low rounded-2xl">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden bg-slate-200">
|
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a young student in a modern workspace with soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2DyDjUcE-9WiIp0Tt62qf63sNOD-xVceN95cAo069z6zibL4_Sbh6U3oayWhpJYL9QPYTJ5EQEhuiWmGhQ13Ivx0uIYCLCorYUQgiUyiUISCG-RwEwT1Bu9faxGG0VnICoUExWfsy5jBCSqvPJGPHquImGPHYRGLMRx5x63CFSatidiEdUBjog8GiwRFUOYQy-8ReECHPQm58MXOSxn9YBb8vBVmiUZn6_7pejyzEsXpgUIC7-puqouBCPidqoboYy93V55obABdR"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-on-surface">Minh Anh</p>
|
|
<p class="text-[10px] text-slate-500">Premium Member</p>
|
|
</div>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-200 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary w-2/3"></div>
|
|
</div>
|
|
<p class="text-[10px] mt-2 text-slate-500 font-medium text-center">Daily Goal: 65%</p>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar Component -->
|
|
<header class="fixed top-0 right-0 left-[240px] h-16 z-20 bg-white/80 backdrop-blur-xl flex items-center justify-between px-8 w-full border-b-0">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-lg font-bold text-slate-900">Luyện đề TOEIC</span>
|
|
<div class="h-4 w-px bg-slate-200"></div>
|
|
<nav class="flex gap-6">
|
|
<a class="text-sm font-medium text-blue-700 font-bold" href="#">Part Selection</a>
|
|
<a class="text-sm font-medium text-slate-500 hover:opacity-80 transition-opacity" href="#">Practice History</a>
|
|
<a class="text-sm font-medium text-slate-500 hover:opacity-80 transition-opacity" href="#">Mock Tests</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="hover:bg-slate-100 rounded-full p-2 transition-all">
|
|
<span class="material-symbols-outlined text-slate-600" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="hover:bg-slate-100 rounded-full p-2 transition-all">
|
|
<span class="material-symbols-outlined text-slate-600" data-icon="settings">settings</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-[240px] pt-24 px-12 pb-12 min-h-screen">
|
|
<!-- Hero Section -->
|
|
<header class="mb-12 max-w-4xl pt-8">
|
|
<h2 class="text-4xl font-extrabold tracking-tight text-on-surface mb-3">Chọn Part TOEIC</h2>
|
|
<p class="text-slate-500 text-lg max-w-2xl leading-relaxed">
|
|
Hệ thống ôn luyện thông minh được thiết kế theo cấu trúc bài thi TOEIC thực tế.
|
|
Chọn một phần cụ thể để bắt đầu tối ưu hóa điểm số của bạn ngay hôm nay.
|
|
</p>
|
|
</header>
|
|
<!-- Bento Grid Layout -->
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<!-- Part 1 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="image">image</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="50.24" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">60%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 1</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Mô tả hình ảnh</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>45 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 2 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="question_answer">question_answer</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="75.36" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">40%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 2</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Hỏi-đáp</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>30 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 3 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="forum">forum</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="94.2" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">25%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 3</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Đoạn hội thoại</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>39 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 4 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="record_voice_over">record_voice_over</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="113.04" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">10%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 4</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Bài nói</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>30 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 5 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="history_edu">history_edu</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="25.12" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">80%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 5</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Điền từ</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>40 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 6 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="article">article</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="62.8" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">50%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 6</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Điền đoạn</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>16 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Part 7 Card -->
|
|
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="menu_book">menu_book</span>
|
|
</div>
|
|
<div class="relative w-12 h-12 flex items-center justify-center">
|
|
<svg class="w-12 h-12 transform -rotate-90">
|
|
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
|
|
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="87.92" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="absolute text-[10px] font-bold">30%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-1">Part 7</h3>
|
|
<p class="text-sm font-medium text-slate-900 mb-2">Đọc hiểu</p>
|
|
<div class="flex items-center gap-2 text-xs text-slate-500">
|
|
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
|
|
<span>54 câu hỏi</span>
|
|
</div>
|
|
</div>
|
|
<!-- Full Test Card (Specialized) -->
|
|
<div class="relative overflow-hidden bg-gradient-to-br from-amber-500 to-orange-600 p-6 rounded-[16px] shadow-xl hover:shadow-2xl transition-all group cursor-pointer ring-4 ring-amber-100">
|
|
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<span class="material-symbols-outlined text-8xl" data-icon="workspace_premium">workspace_premium</span>
|
|
</div>
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="p-3 bg-white/20 backdrop-blur-md rounded-xl">
|
|
<span class="material-symbols-outlined text-white" data-icon="military_tech">military_tech</span>
|
|
</div>
|
|
<span class="px-2 py-1 bg-white/20 backdrop-blur-md rounded-full text-[10px] font-extrabold text-white uppercase tracking-wider">Most Popular</span>
|
|
</div>
|
|
<h3 class="font-extrabold text-2xl text-white mb-1">Full Test</h3>
|
|
<p class="text-sm font-semibold text-amber-50 mb-4">Mô phỏng thi thật 2h</p>
|
|
<div class="flex items-center gap-2 text-xs text-amber-100">
|
|
<span class="material-symbols-outlined text-sm" data-icon="timer">timer</span>
|
|
<span>120 phút • 200 câu</span>
|
|
</div>
|
|
<div class="mt-6">
|
|
<div class="w-full bg-white/20 h-1 rounded-full">
|
|
<div class="bg-white w-[15%] h-full rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Featured Section (Bento Complement) -->
|
|
<section class="mt-12 grid grid-cols-12 gap-6">
|
|
<div class="col-span-8 bg-surface-container-low rounded-3xl p-8 flex items-center justify-between overflow-hidden relative">
|
|
<div class="relative z-10">
|
|
<h4 class="text-2xl font-bold mb-2">Luyện đề tập trung với AI</h4>
|
|
<p class="text-slate-500 max-w-sm mb-6">Hệ thống AI phân tích điểm yếu của bạn qua từng Part và đề xuất lộ trình ôn tập cá nhân hóa.</p>
|
|
<button class="bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-primary-container transition-all flex items-center gap-2">
|
|
Bắt đầu phân tích
|
|
<span class="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<div class="w-1/2 absolute -right-8 top-0 h-full">
|
|
<img alt="Study Session" class="w-full h-full object-cover rounded-l-3xl opacity-80" data-alt="clean overhead shot of an open notebook with diagrams and highlighters on a minimalist desk" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZnS_tphqYtglGxJ9k3Uu3Sbr6aEjFZRIf8Hkb3F0-neWUVilyKpnabaOQPiY9Jfmy4pyuWbJJKxRYAHSb-tS6KXLoE6ZWotNEDZi_Ly7k-U_QgFTX03lQVuuv7RKn9UJjcD-1Q_Ir_b65mGs-Y_VBveqOZ1AP0wGlzpV4rw8l7MGQjxLUGUMDynjnXMs6oXBafWqqC4WVH3cX-iy6uSXy5cGOTS7Au1qFKVm9-ES6_aDiiRKoK2eskH3DoHeeNDcEUDF-ao2Y5Y-S"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-4 bg-primary rounded-3xl p-8 text-white flex flex-col justify-between">
|
|
<div>
|
|
<span class="material-symbols-outlined text-4xl mb-4" data-icon="auto_awesome">auto_awesome</span>
|
|
<h4 class="text-xl font-bold">Thử thách ngày</h4>
|
|
<p class="text-white/80 text-sm mt-2">Hoàn thành 30 câu Part 5 để nhận ngay 500 streak points.</p>
|
|
</div>
|
|
<div class="flex items-end justify-between mt-8">
|
|
<div class="flex -space-x-3">
|
|
<div class="w-8 h-8 rounded-full border-2 border-primary overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="portrait of a young smiling professional woman in bright natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9e1IfPLx7fEAePcZypuqPCiWM1Fhipa_EEF7XypG_Gl3IRFW1U9gGtIValIys5nOKcEOD1THDZwh0M5mOtPYG2NzigaD6k29IQa6AfsO-eUes3qg1hRtMBOCNUViM5e1l_lklgQouPjNVB29Oupzks1-zM-NT-lHXv_JU7XYY0I10JEmLTL4G0RGvhcXC53_ue7Cr_TeOXI7blxXbgDBHpGSP3d3n5j36ox6A3fmU8tVlWDYOXse93OM9bbPcwpj0IMsnKhyotGfE"/>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-primary overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="professional portrait of a man with spectacles in soft office lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBH2Jid_vlxwm6_s9lZL8IgtjW3WcH7flqF63vvGi8oTv1Foclr6u55wiEt-RKIN8tCie-titrJzTsSALxOLYwDTd95uktEVnyG6PlC1EV6FTtWgw7HXpPPj6oTgEmJzbdge515kkBMkWZ0JS4xz12_wXFrMo6Ej5aybeKy9oMdq7eXAAerty_R86H-0UtxDPKRTroaBl_hdYjW9mVwsPG66ygBuq0nyvIG5_fqbmeoD_pevNyhcCBKBG29qNAKgvZSmboKTLhjfa7q"/>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-primary bg-white/20 flex items-center justify-center text-[10px] font-bold">
|
|
+12
|
|
</div>
|
|
</div>
|
|
<span class="text-xs font-medium bg-white/20 px-3 py-1 rounded-full">Tham gia ngay</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Contextual FAB (Hidden as per suppression rule for details/selection but kept only for general study flow if desired. Here suppressed for focus.) -->
|
|
</body></html> |