Tạo biểu mẫu

Bao quanh các thành phần nhập liệu. Các thuộc tính quan trọng: action (địa chỉ nhận dữ liệu), method (GET hoặc POST).

(ô nhập), (nhập văn bản dài), <select> (danh sách chọn).</div> </div><div id="section-2" class="bg-white rounded-2xl shadow-soft border border-gray-100 p-8 scroll-mt-24 hover:shadow-soft-lg transition-shadow" data-astro-cid-leqodqzt> <h3 class="text-2xl font-bold mb-5 text-primary-700 flex items-center" data-astro-cid-leqodqzt> <span class="w-8 h-8 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center text-white text-sm font-bold mr-3" data-astro-cid-leqodqzt> 3 </span> <span class="lesson-heading" data-astro-cid-leqodqzt>Các loại Input</span> </h3> <div class="prose prose-lg max-w-none lesson-content" data-astro-cid-leqodqzt>type="text", type="password", type="checkbox", type="radio", type="submit".</div> </div> </div> </section> <!-- Dạng bài tập --> <!-- Call to action for exercises --> <!-- Lesson List in Chapter --> <section class="mt-16 pt-8 border-t-2 border-gray-200 dark:border-gray-700" data-astro-cid-leqodqzt> <div class="mb-6" data-astro-cid-leqodqzt> <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center" data-astro-cid-leqodqzt> <svg class="w-5 h-5 mr-2 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" data-astro-cid-leqodqzt></path> </svg> Các bài học trong chương: Giải quyết vấn đề với sự trợ giúp của máy tính </h3> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-astro-cid-leqodqzt> <a href="/lessons/tin-hoc/tin12_07" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>7</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> HTML và cấu trúc trang web </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_08" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>8</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Định dạng văn bản </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_09" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>9</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Tạo danh sách, bảng </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_10" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>10</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Tạo liên kết </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_11" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>11</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_12" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 border-primary-500 bg-primary-50 dark:bg-primary-900/20" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-primary-600 text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>12</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-primary-700 dark:text-primary-400" data-astro-cid-leqodqzt> Tạo biểu mẫu </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_13" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>13</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Khái niệm và vai trò của CSS </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_14" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>14</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Định dạng văn bản bằng CSS </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_15" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>15</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Tạo màu cho chữ và nền </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_16" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>16</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Định dạng khung </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_17" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>17</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Các mức ưu tiên của bộ chọn </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a><a href="/lessons/tin-hoc/tin12_18" class="group rounded-xl shadow-soft hover:shadow-soft-lg transition-all duration-300 p-5 border-2 bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-500" data-astro-cid-leqodqzt> <div class="flex items-start" data-astro-cid-leqodqzt> <div class="flex-shrink-0 mr-3" data-astro-cid-leqodqzt> <div class="w-10 h-10 rounded-lg flex items-center justify-center shadow-md bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white" data-astro-cid-leqodqzt> <span class="font-bold text-sm" data-astro-cid-leqodqzt>18</span> </div> </div> <div class="flex-1 min-w-0" data-astro-cid-leqodqzt> <p class="text-sm font-bold leading-snug mb-2 text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400" data-astro-cid-leqodqzt> Thực hành tổng hợp thiết kế trang web </p> <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400" data-astro-cid-leqodqzt> <span class="px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400" data-astro-cid-leqodqzt> 🔴 </span> <span class="flex items-center" data-astro-cid-leqodqzt> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-leqodqzt> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-leqodqzt></path> </svg> 50p </span> </div> </div> </div> </a> </div> </section> </main> </div> </div> <script type="module" src="/_astro/_id_.astro_astro_type_script_index_0_lang.Bt4_lkKt.js"></script> </main> <!-- Footer --> <footer class="bg-gradient-to-br from-gray-900 via-primary-900 to-secondary-900 text-white mt-20" data-astro-cid-sckkx6r4> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" data-astro-cid-sckkx6r4> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8" data-astro-cid-sckkx6r4> <!-- Brand --> <div class="col-span-1 md:col-span-2" data-astro-cid-sckkx6r4> <div class="flex items-center space-x-3 mb-4" data-astro-cid-sckkx6r4> <div class="w-10 h-10 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-xl flex items-center justify-center" data-astro-cid-sckkx6r4> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sckkx6r4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" data-astro-cid-sckkx6r4></path> </svg> </div> <span class="text-xl font-display font-bold" data-astro-cid-sckkx6r4>Hoc.io.vn</span> </div> <p class="text-gray-300 text-sm leading-relaxed max-w-md" data-astro-cid-sckkx6r4> Nền tảng học tập AI - Học các môn Phổ thông thông minh. Hỗ trợ học sinh nắm vững kiến thức, chuẩn bị tốt cho các kỳ thi quan trọng. </p> </div> <!-- Quick Links --> <div data-astro-cid-sckkx6r4> <h3 class="font-semibold text-white mb-4" data-astro-cid-sckkx6r4>Môn Toán</h3> <ul class="space-y-2 text-sm" data-astro-cid-sckkx6r4> <li data-astro-cid-sckkx6r4><a href="/lessons" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Toán học</a></li> <li data-astro-cid-sckkx6r4><a href="https://hoc.io.vn/app/online-exam" target="_blank" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Đề thi Toán</a></li> <li data-astro-cid-sckkx6r4><a href="https://booktoan.com/sachtoan" target="_blank" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Học Toán</a></li> <li data-astro-cid-sckkx6r4><a href="https://hoc.io.vn/tikz" target="_blank" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Tikz</a></li> </ul> </div> <!-- About & Policy --> <div data-astro-cid-sckkx6r4> <h3 class="font-semibold text-white mb-4" data-astro-cid-sckkx6r4>Về chúng tôi</h3> <ul class="space-y-2 text-sm" data-astro-cid-sckkx6r4> <li data-astro-cid-sckkx6r4><a href="/gioi-thieu" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Giới thiệu</a></li> <li data-astro-cid-sckkx6r4><a href="/lien-he" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Liên hệ</a></li> <li data-astro-cid-sckkx6r4><a href="/quy-dinh" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Quy định sử dụng</a></li> <li data-astro-cid-sckkx6r4><a href="/bao-mat" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Chính sách bảo mật</a></li> <li data-astro-cid-sckkx6r4><a href="/huong-dan" class="text-gray-300 hover:text-white transition-colors" data-astro-cid-sckkx6r4>Hướng dẫn học tập</a></li> </ul> </div> </div> <!-- Bottom Bar --> <div class="border-t border-gray-700/50 pt-8" data-astro-cid-sckkx6r4> <div class="flex flex-col sm:flex-row items-center justify-between gap-4" data-astro-cid-sckkx6r4> <p class="text-center sm:text-left text-gray-400 text-sm" data-astro-cid-sckkx6r4> © 2026 Hoc.io.vn - Nền tảng Học tập AI - v1.3. </p> <button id="dark-mode-toggle" class="p-3 bg-white/10 dark:bg-gray-700/50 rounded-lg hover:bg-white/20 dark:hover:bg-gray-600/50 transition-all duration-300 backdrop-blur-sm group" aria-label="Toggle dark mode" title="Chuyển chế độ sáng/tối"> <svg id="sun-icon" class="w-5 h-5 text-white dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <svg id="moon-icon" class="w-5 h-5 text-white hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> </button> <script type="module">const t="lms_dark_mode";function d(){const e=localStorage.getItem(t),o=window.matchMedia("(prefers-color-scheme: dark)").matches;e==="true"||e===null&&o?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function n(){const e=document.documentElement.classList.toggle("dark");localStorage.setItem(t,e.toString())}d();document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("dark-mode-toggle");e&&e.addEventListener("click",n)});window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem(t)===null&&(e.matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"))});</script> </div> </div> </div> </footer> <!-- Back to Top Button --> <button id="back-to-top" class="fixed bottom-6 right-6 z-50 p-4 bg-gradient-to-br from-primary-500 to-secondary-500 dark:from-primary-600 dark:to-secondary-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible hover:scale-110 active:scale-95" aria-label="Quay lên đầu trang" title="Quay lên đầu trang" data-astro-cid-wlspcwf4> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-wlspcwf4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" data-astro-cid-wlspcwf4></path> </svg> </button> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const o=document.getElementById("back-to-top");if(!o)return;const t=()=>{window.scrollY>300?(o.classList.remove("opacity-0","invisible"),o.classList.add("opacity-100","visible")):(o.classList.add("opacity-0","invisible"),o.classList.remove("opacity-100","visible"))},e=()=>{window.scrollTo({top:0,behavior:"smooth"})};window.addEventListener("scroll",t),o.addEventListener("click",e),t()});</script> <!-- Mobile Menu Script --> <script type="module">const e=document.getElementById("mobile-menu-button"),t=document.getElementById("mobile-menu");e&&t&&e.addEventListener("click",()=>{t.classList.toggle("hidden")});</script> </body> </html>