Code gốc của web tư vấn (copy)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Trung tâm Anh ngữ Venus – Tiếng Anh cho bé vui, IELTS cho teen tự tin</title>
<meta name="description" content="Trung tâm Anh ngữ Venus tại (Địa chỉ của bạn): tiếng Anh thiếu nhi, thiếu niên và luyện thi IELTS. Lớp nhỏ, cô kèm sát, nhiều hoạt động ngoại khóa vui và ý nghĩa.">
<meta property="og:title" content="Trung tâm Anh ngữ Venus - Tiếng Anh thiếu nhi & IELTS">
<meta property="og:description" content="Chọn Venus – con được vui học tiếng Anh, phụ huynh nắm rõ lộ trình, teen tự tin chinh phục IELTS.">
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font -->
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
.logo-img {
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 0 18px rgba(147, 197, 253, 0.8);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-img:hover {
transform: scale(1.1);
box-shadow: 0 0 25px rgba(236, 72, 153, 0.9);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: radial-gradient(circle at top, #111827 0, #020617 45%, #020617 100%);
color: #f9fafb;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
/* ===== NAVBAR ===== */
header {
position: sticky;
top: 0;
z-index: 999;
background: linear-gradient(90deg, rgba(15,23,42,0.96), rgba(30,64,175,0.96));
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(129, 140, 248, 0.5);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.9);
}
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 18px;
}
.logo-badge {
width: 32px;
height: 32px;
border-radius: 999px;
background: conic-gradient(from 180deg, #38bdf8, #a855f7, #f97316, #22c55e, #38bdf8);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
font-size: 14px;
}
.nav-links a {
opacity: 0.9;
position: relative;
padding-bottom: 4px;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #4f46e5, #ec4899);
transition: width 0.18s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-cta {
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #4f46e5, #ec4899);
font-size: 13px;
font-weight: 500;
box-shadow: 0 10px 28px rgba(129, 140, 248, 0.7);
}
/* Hamburger */
.hamburger {
width: 28px;
height: 22px;
display: none;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.hamburger span {
height: 3px;
border-radius: 999px;
background: #e5e7eb;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.hamburger.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
.nav-mobile {
display: none;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
font-size: 14px;
background: rgba(15, 23, 42, 0.98);
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.nav-mobile a {
padding: 8px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.nav-mobile a:last-child {
border-bottom: none;
}
/* ===== HERO / INTRO ===== */
.hero {
padding: 64px 0 72px;
background:
radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.4), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.35), transparent 55%),
#020617;
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
}
.hero-title {
font-size: 32px;
font-weight: 600;
margin-bottom: 10px;
}
.hero-title span {
background: linear-gradient(90deg, #38bdf8, #a855f7, #f97316);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-size: 14px;
color: #e5e7eb;
opacity: 0.9;
margin-bottom: 18px;
max-width: 640px;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
font-size: 11px;
}
.badge {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: rgba(15, 23, 42, 0.9);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.9);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
.btn-primary {
border: none;
outline: none;
padding: 12px 22px;
border-radius: 999px;
background: linear-gradient(120deg, #4f46e5, #ec4899, #f97316);
background-size: 200% 200%;
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.8);
transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background-position 0.3s ease;
border: 0;
}
.btn-primary:hover {
transform: translateY(-1px) scale(1.01);
opacity: 0.97;
background-position: 100% 0;
box-shadow: 0 24px 52px rgba(15, 23, 42, 0.9);
}
.btn-secondary {
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.9);
background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.6));
font-size: 13px;
cursor: pointer;
color: #e5e7eb;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.8);
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-note {
font-size: 11px;
opacity: 0.7;
margin-top: 8px;
}
.hero-card {
background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.25), transparent 60%),
rgba(15, 23, 42, 0.98);
border-radius: 24px;
padding: 20px 18px 22px;
border: 1px solid rgba(129, 140, 248, 0.6);
box-shadow: 0 22px 55px rgba(15, 23, 42, 0.95);
}
.hero-card h3 {
font-size: 16px;
margin-bottom: 12px;
color: #bfdbfe;
}
.hero-card ul {
list-style: none;
font-size: 12px;
color: #e5e7eb;
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.hero-card li span.bullet {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
background: #4ade80;
margin-right: 6px;
box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}
/* ===== SECTIONS ===== */
section {
padding: 52px 0;
}
#khoa-hoc {
background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 55%),
#020617;
}
#lo-trinh {
background: radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.22), transparent 55%),
#020617;
}
#ngoai-khoa {
background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.22), transparent 55%),
#020617;
}
#tu-van {
background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.3), transparent 55%),
#020617;
}
#dang-ky {
background: radial-gradient(circle at bottom, rgba(129, 140, 248, 0.25), transparent 60%),
#020617;
}
.section-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(90deg, #60a5fa, #a855f7, #f97316);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-sub {
font-size: 13px;
color: #e5e7eb;
opacity: 0.9;
margin-bottom: 26px;
max-width: 640px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.card {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.6));
border-radius: 18px;
padding: 18px 16px 18px;
border: 1px solid rgba(129, 140, 248, 0.7);
font-size: 13px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), transparent 55%);
opacity: 0.7;
pointer-events: none;
}
.card h3 {
font-size: 15px;
margin-bottom: 6px;
color: #e0f2fe;
position: relative;
z-index: 1;
}
.card p {
font-size: 12px;
color: #e5e7eb;
opacity: 0.95;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
font-size: 11px;
position: relative;
z-index: 1;
}
.tag {
padding: 4px 8px;
border-radius: 999px;
background: linear-gradient(120deg, rgba(56, 189, 248, 0.45), rgba(129, 140, 248, 0.7));
color: #0f172a;
font-weight: 500;
}
/* Support list */
.support-list {
display: grid;
gap: 12px;
font-size: 13px;
max-width: 720px;
}
.support-item.activity {
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.support-item.activity:hover {
border-color: rgba(56, 189, 248, 0.9);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.9);
transform: translateY(-1px);
}
.support-item.activity.active {
border-color: rgba(129, 140, 248, 1);
background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.28), transparent 60%),
rgba(15, 23, 42, 0.98);
}
.activity-detail {
margin-top: 20px;
padding: 18px 16px;
border-radius: 16px;
background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.2), transparent 65%),
rgba(15, 23, 42, 0.97);
border: 1px solid rgba(129, 140, 248, 0.85);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.95);
font-size: 13px;
}
.activity-detail h3 {
font-size: 16px;
margin-bottom: 6px;
color: #bfdbfe;
}
.activity-detail p {
font-size: 13px;
color: #e5e7eb;
opacity: 0.95;
}
.support-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.9);
}
.support-icon {
width: 28px;
height: 28px;
border-radius: 999px;
background: radial-gradient(circle at 30% 0, #38bdf8, #4f46e5);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 0 18px rgba(56, 189, 248, 0.8);
flex-shrink: 0;
}
.support-item h4 {
font-size: 13px;
margin-bottom: 4px;
color: #e0f2fe;
}
.support-item p {
font-size: 12px;
opacity: 0.9;
}
/* ===== REGISTER (CHỈ NÚT) ===== */
.register-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
.note {
font-size: 11px;
opacity: 0.7;
margin-bottom: 12px;
}
.btn-submit {
border: none;
outline: none;
width: 100%;
padding: 12px 22px;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
background: linear-gradient(120deg, #22c55e, #06b6d4, #6366f1);
background-size: 200% 200%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.9);
transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background-position 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-1px) scale(1.01);
opacity: 0.97;
background-position: 100% 0;
box-shadow: 0 24px 52px rgba(15, 23, 42, 0.95);
}
/* Ảnh hoạt động ngoại khóa */
.activity-img {
width: 100%;
border-radius: 12px;
margin: 10px 0 14px;
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
object-fit: cover;
max-height: 280px;
display: block;
}
/* Footer mặc định bị override bằng footer custom bên dưới, giữ lại nếu cần */
footer {
font-size: 11px;
text-align: center;
}
/* Animation cho nút cố định */
@keyframes arrowMove {
from { transform: translateX(0); }
to { transform: translateX(6px); }
}
@keyframes pulseZalo {
0% { box-shadow: 0 0 8px rgba(59,130,246,0.4); }
50% { box-shadow: 0 0 18px rgba(59,130,246,0.9); }
100% { box-shadow: 0 0 8px rgba(59,130,246,0.4); }
}
@keyframes pulseCall {
0% { box-shadow: 0 0 8px rgba(34,197,94,0.4); }
50% { box-shadow: 0 0 18px rgba(34,197,94,0.9); }
100% { box-shadow: 0 0 8px rgba(34,197,94,0.4); }
}
/* ===== RESP ===== */
@media (max-width: 900px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
}
.register-grid {
grid-template-columns: minmax(0, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
.nav-mobile.show {
display: flex;
}
.hero {
padding-top: 40px;
padding-bottom: 52px;
}
.hero-title {
font-size: 26px;
}
.grid-3 {
grid-template-columns: minmax(0, 1fr);
}
}
</style>
</head>
<body>
<!-- ===== NAVBAR ===== -->
<header>
<div class="container">
<div class="nav">
<a href="#top" class="logo">
<img src="link logo bạn đã chuẩn bị" alt="Trung tâm Anh ngữ Venus" class="logo-img">
<span>Trung tâm Anh ngữ Venus</span>
</a>
<nav class="nav-links">
<a href="#gioi-thieu">Giới thiệu</a>
<a href="#khoa-hoc">Khóa học</a>
<a href="#ngoai-khoa">Hoạt động ngoại khóa</a>
<a href="#tu-van">Tư vấn & hỗ trợ</a>
<a href="#dang-ky" class="nav-cta">Đăng ký ngay</a>
</nav>
<!-- 3 gạch ngang -->
<div class="hamburger" id="hamburgerBtn" aria-label="Mở menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Menu mobile -->
<nav class="nav-mobile" id="mobileMenu">
<a href="#gioi-thieu">Giới thiệu</a>
<a href="#khoa-hoc">Khóa học</a>
<a href="#ngoai-khoa">Hoạt động ngoại khóa</a>
<a href="#tu-van">Tư vấn & hỗ trợ</a>
<a href="Link đăng ký bạn đã chuẩn bị" target="_blank" rel="noopener noreferrer">Đăng ký ngay</a>
</nav>
</div>
</header>
<main id="top">
<!-- ===== HERO / INTRO ===== -->
<section class="hero" id="gioi-thieu">
<div class="container hero-inner">
<div>
<h1 class="hero-title">
Tiếng Anh cho học sinh từ lớp 1–5<br />
& các khóa <span>IELTS chuyên sâu cho teen</span>.
</h1>
<p class="hero-sub">
Ở Venus, các con không chỉ “ngồi chép bài” mà được <b>vừa học vừa chơi</b>, nói tiếng Anh tự nhiên như trò chuyện.
Teen lớn hơn có lộ trình IELTS rõ ràng, mục tiêu từ 6.5–7.5+ để tự tin thi cử và săn học bổng.
</p>
<div class="hero-badges">
<div class="badge">Tiếng Anh tiểu học dễ hiểu – dễ nhớ</div>
<div class="badge">Lớp nhỏ, cô theo sát từng bạn</div>
<div class="badge">Ngoại khóa vui mỗi tháng 🎉</div>
</div>
<div class="hero-actions">
<!-- Nút mở Google Form -->
<a href="Links to Google Form"
target="_blank" rel="noopener noreferrer" class="btn-primary">
Đăng ký học thử miễn phí
<span>📝</span>
</a>
<a href="#khoa-hoc" class="btn-secondary">
Xem chi tiết từng khóa
</a>
</div>
<p class="hero-note">
Phù hợp cho phụ huynh muốn con <b>vững tiếng Anh ở trường</b>, tự tin giao tiếp
và có nền tảng tốt nếu sau này thi IELTS.
</p>
</div>
<aside class="hero-card">
<h3>Không khí học tại Venus</h3>
<ul>
<li><span class="bullet"></span>Tiết học cho bé tiểu học luôn có trò chơi, bài hát, hoạt động nhóm – không khí vui nhưng vẫn vào kiến thức.</li>
<li><span class="bullet"></span>Lớp IELTS tập trung luyện đề, chiến lược làm bài, sửa bài kỹ từng bạn để tránh lặp lại lỗi sai.</li>
<li><span class="bullet"></span>Thêm nhiều buổi English camp, tham quan, giao lưu để con dùng tiếng Anh đúng môi trường thực tế.</li>
</ul>
<div class="tag-row">
<span class="tag">Thiếu nhi & thiếu niên</span>
<span class="tag">IELTS 4 kỹ năng</span>
<span class="tag">Học qua trải nghiệm</span>
</div>
</aside>
</div>
</section>
<!-- ===== COURSES ===== -->
<section id="khoa-hoc">
<div class="container">
<h2 class="section-title">📚 Các khóa học tại Venus</h2>
<p class="section-sub">
Mỗi độ tuổi có cách học khác nhau. Venus thiết kế chương trình riêng cho từng giai đoạn:
từ làm quen với tiếng Anh, củng cố kiến thức trên lớp cho đến luyện thi IELTS bài bản.
</p>
<div class="grid-3">
<div class="card">
<h3>Tiếng Anh lớp 1–2</h3>
<p>
Các con bắt đầu “làm bạn” với tiếng Anh qua tranh ảnh, bài hát, câu chuyện ngắn
và trò chơi vận động. Bé nghe – nói tự nhiên, không bị áp lực điểm số.
</p>
<div class="tag-row">
<span class="tag">Làm quen tiếng Anh</span>
<span class="tag">Phát âm đúng ngay từ đầu</span>
<span class="tag">Học mà không thấy “học”</span>
</div>
</div>
<div class="card">
<h3>Tiếng Anh lớp 3–5</h3>
<p>
Vừa <b>bám sát chương trình ở trường</b>, vừa thêm nhiều từ vựng giao tiếp,
trò chơi nhập vai, thuyết trình đơn giản để con dạn nói tiếng Anh trước mọi người.
</p>
<div class="tag-row">
<span class="tag">Củng cố ngữ pháp</span>
<span class="tag">Hỗ trợ bài kiểm tra</span>
<span class="tag">Tự tin phát biểu</span>
</div>
</div>
<div class="card">
<h3>IELTS Pre</h3>
<p>
Dành cho học sinh đã có nền tảng cơ bản, bắt đầu làm quen cấu trúc đề thi,
xây dựng vốn từ học thuật, tập viết và nói đúng “style” IELTS từ sớm.
</p>
<div class="tag-row">
<span class="tag">Khởi động IELTS</span>
<span class="tag">11–15 tuổi phù hợp</span>
<span class="tag">Nền tảng lên 6.5+</span>
</div>
</div>
<div class="card">
<h3>IELTS Intensive</h3>
<p>
Khóa luyện thi tăng tốc cho mục tiêu 6.5–7.5+. Học viên được làm đề thường xuyên,
được chấm chi tiết từng kỹ năng, chỉnh phát âm và cách triển khai ý trong Speaking & Writing.
</p>
<div class="tag-row">
<span class="tag">Mock test định kỳ</span>
<span class="tag">Feedback rõ từng lỗi</span>
<span class="tag">Chiến lược từng dạng bài</span>
</div>
</div>
<div class="card">
<h3>Lớp kỹ năng mềm bằng tiếng Anh</h3>
<p>
Con làm project nhỏ, làm việc nhóm, thuyết trình, đóng vai… toàn bằng tiếng Anh.
Mục tiêu: bớt ngại, quen dùng tiếng Anh như một công cụ chứ không chỉ là môn học.
</p>
<div class="tag-row">
<span class="tag">Project-based learning</span>
<span class="tag">Teamwork & thuyết trình</span>
</div>
</div>
</div>
</div>
</section>
<!-- Lộ trình -->
<section id="lo-trinh">
<div class="container">
<h2 class="section-title">🚀 Hành trình học cùng Venus</h2>
<p class="section-sub">
Phụ huynh không phải tự đoán con đang ở đâu. Venus luôn có lộ trình và bước đi rõ ràng,
từ lúc mới đăng ký tới khi con tiến bộ từng giai đoạn.
</p>
<div class="support-list">
<div class="support-item">
<div class="support-icon">📝</div>
<div>
<h4>Bước 1: Đăng ký & trò chuyện nhu cầu</h4>
<p>
Phụ huynh để lại thông tin hoặc gọi cho Venus, giáo viên tư vấn sẽ gọi lại để
hiểu rõ mong muốn: cải thiện điểm, giao tiếp tốt hơn hay chuẩn bị IELTS sớm.
</p>
</div>
</div>
<div class="support-item">
<div class="support-icon">🎧</div>
<div>
<h4>Bước 2: Kiểm tra trình độ & học thử</h4>
<p>
Bé làm bài kiểm tra nhẹ nhàng, sau đó được học thử 1–2 buổi.
Phụ huynh và bé đều thấy phù hợp rồi mới chính thức đăng ký lớp.
</p>
</div>
</div>
<div class="support-item">
<div class="support-icon">🌟</div>
<div>
<h4>Bước 3: Vào học & theo dõi tiến bộ</h4>
<p>
Giáo viên luôn báo cáo định kỳ, gửi hình ảnh trên lớp, ngoại khóa
và nhắn riêng nếu con cần được hỗ trợ thêm kỹ năng nào.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== EXTRACURRICULAR ===== -->
<section id="ngoai-khoa">
<div class="container">
<h2 class="section-title">🎉 Ngoại khóa – nơi con “xài” tiếng Anh thật sự</h2>
<p class="section-sub">
Tiếng Anh không chỉ nằm trong vở. Các buổi ngoại khóa giúp các con đem những gì đã học
ra cuộc sống: chơi trò chơi, đi tham quan, giao tiếp, hỏi – đáp… tất cả bằng tiếng Anh.
</p>
<!-- Danh sách hoạt động -->
<div class="support-list">
<div class="support-item activity"
data-title="English Fun Day"
data-desc="Một ngày chơi hết mình cùng tiếng Anh: trò chơi theo trạm, gian hàng thú vị, hoạt động nhóm sôi động. Con phải giao tiếp, hỏi – đáp, hợp tác với bạn bè… bằng tiếng Anh nên phản xạ lên rất nhanh."
data-image="anh english day venus 1.jpg">
<div class="support-icon">🎪</div>
<div>
<h4>English Fun Day</h4>
<p>Ngày hội trò chơi, thử thách và giao tiếp toàn bằng tiếng Anh, vui mà “lên” phản xạ rõ rệt.</p>
</div>
</div>
<div class="support-item activity"
data-title="Chuyến đi ngoại khóa"
data-desc="Tham quan bảo tàng, công viên, khu trải nghiệm nghề nghiệp… Giáo viên gợi ý cho các con dùng tiếng Anh trong từng tình huống: hỏi đường, mua đồ, giới thiệu bản thân, phỏng vấn nhỏ, trò chuyện với khách nước ngoài (khi có thể)."
data-image="anh du lịch venus 1.jpg">
<div class="support-icon">🌳</div>
<div>
<h4>Chuyến đi ngoại khóa</h4>
<p>Vừa vui chơi, vừa luyện cách nói tiếng Anh ngoài đời thật: hỏi, trả lời, tương tác với mọi người.</p>
</div>
</div>
<div class="support-item activity"
data-title="Các dịp lễ theo mùa"
data-desc="Halloween, Noel, Tết thiếu nhi… là dịp để các con hóa trang, hát, kể chuyện, diễn kịch bằng tiếng Anh. Những bạn nhút nhát cũng được động viên lên sân khấu, dần dần nói chuyện trước đám đông không còn là nỗi sợ."
data-image="anh tet venus.jpg">
<div class="support-icon">🎤</div>
<div>
<h4>Các dịp lễ theo mùa</h4>
<p>Sân khấu nhỏ cho các “ngôi sao nhí” trình diễn bằng tiếng Anh: hát, kể chuyện, diễn kịch, chúc mừng lễ hội.</p>
</div>
</div>
</div>
<!-- Khu hiển thị chi tiết -->
<div id="activityDetail" class="activity-detail">
<h3>English Fun Day</h3>
<img src="anh english day venus 1.jpg" alt="English Fun Day" class="activity-img">
<p>
Một ngày chơi hết mình cùng tiếng Anh: trò chơi theo trạm, gian hàng thú vị, hoạt động nhóm sôi động.
Con phải giao tiếp, hỏi – đáp, hợp tác với bạn bè… bằng tiếng Anh nên phản xạ lên rất nhanh.
</p>
</div>
</div>
</section>
<!-- ===== SUPPORT & CONSULT ===== -->
<section id="tu-van">
<div class="container">
<h2 class="section-title">🤝 Venus đồng hành cùng phụ huynh</h2>
<p class="section-sub">
Phụ huynh không cần “tự bơi” trong chuyện tiếng Anh của con. Venus luôn lắng nghe
và cùng phụ huynh điều chỉnh lộ trình để phù hợp nhất với từng bé.
</p>
<div class="support-list">
<div class="support-item">
<div class="support-icon">📞</div>
<div>
<h4>Thiết kế lộ trình riêng cho từng bé</h4>
<p>
Mỗi bé có điểm mạnh – điểm yếu, tính cách và mục tiêu khác nhau.
Venus sẽ tư vấn lộ trình phù hợp, không ép con học quá sức nhưng vẫn tiến bộ đều.
</p>
</div>
</div>
<div class="support-item">
<div class="support-icon">📚</div>
<div>
<h4>Báo cáo rõ ràng – không chung chung</h4>
<p>
Sau từng giai đoạn, phụ huynh nhận được nhận xét: con đang mạnh ở kỹ năng nào,
chỗ nào cần luyện thêm, kèm theo gợi ý cách hỗ trợ con ở nhà.
</p>
</div>
</div>
<div class="support-item">
<div class="support-icon">💬</div>
<div>
<h4>Nhóm Zalo phụ huynh – cập nhật thường xuyên</h4>
<p>
Hình ảnh lớp học, ngoại khóa, bài tập về nhà, thông báo lịch học… đều được cập nhật qua Zalo.
Có thắc mắc gì, phụ huynh nhắn là được giải đáp nhanh chóng.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== REGISTER (CHỈ NÚT MỞ GOOGLE FORM) ===== -->
<section id="dang-ky">
<div class="container register-grid">
<div>
<h2 class="section-title">✍️ Đăng ký cho bé / học viên</h2>
<p class="section-sub">
Venus hiện nhận học viên từ lớp 1–5 và các bạn cần luyện thi IELTS.
Phụ huynh chỉ cần điền form, đội ngũ Venus sẽ gọi lại tư vấn và sắp xếp lịch học thử phù hợp.
</p>
<ul class="support-list">
<li class="support-item">
<div class="support-icon">✅</div>
<div>
<h4>Học thử trước khi quyết định</h4>
<p>
Bé được trải nghiệm 1–2 buổi học thật. Nếu thấy phù hợp mới chính thức đóng học phí,
nên phụ huynh hoàn toàn yên tâm.
</p>
</div>
</li>
<li class="support-item">
<div class="support-icon">🎁</div>
<div>
<h4>Tặng lộ trình & tài liệu gợi ý</h4>
<p>
Sau khi tư vấn, phụ huynh sẽ nhận được lộ trình khuyến nghị
và một số tài liệu tham khảo để hỗ trợ con luyện thêm tại nhà.
</p>
</div>
</li>
</ul>
</div>
<!-- Nút mở Google Form -->
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;">
<p class="note">
Nhấn nút bên dưới để mở form đăng ký học thử miễn phí ✨
(Form mở ở tab mới, điền khoảng 1 phút là xong.)
</p>
<a href="Link Google Form của bạn"
target="_blank" rel="noopener noreferrer"
class="btn-submit" style="max-width:320px;">
Mở form đăng ký trên Google
<span>📝</span>
</a>
</div>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer style="background: radial-gradient(circle at top, rgba(37,99,235,0.5), transparent 55%), #020617; color: #e5e7eb; padding: 40px 0 20px; border-top: 1px solid rgba(148,163,184,0.4); box-shadow: 0 -10px 30px rgba(0,0,0,0.7);">
<div class="container" style="max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
<!-- Cột thông tin trung tâm -->
<div>
<h3 style="color: #60a5fa; font-size: 16px; margin-bottom: 8px;">TRUNG TÂM ANH NGỮ VENUS</h3>
<p style="font-size: 13px; line-height: 1.6;">
📍 <b>Địa chỉ:</b> <br>
☎️ <b>Hotline:</b> <br>
✉️ <b>Email:</b>
</p>
</div>
<!-- Cột liên hệ hỗ trợ -->
<div>
<h4 style="color: #93c5fd; font-size: 15px; margin-bottom: 8px;">HỖ TRỢ PHỤ HUYNH</h4>
<p style="font-size: 13px; line-height: 1.6;">
📘 Tư vấn chọn khóa học phù hợp<br>
📗 Sắp xếp lịch học thử linh hoạt<br>
📙 Lắng nghe phản hồi để cải thiện chất lượng dạy & học
</p>
</div>
<!-- Cột kết nối mạng xã hội -->
<div>
<h4 style="color: #93c5fd; font-size: 15px; margin-bottom: 8px;">KẾT NỐI VỚI VENUS</h4>
<div style="display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px;">
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" style="color: #e5e7eb;">📘 Facebook</a>
<a href="https://zalo.me" target="_blank" rel="noopener noreferrer" style="color: #e5e7eb;">💬 Zalo</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" style="color: #e5e7eb;">📸 Instagram</a>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" style="color: #e5e7eb;">▶️ YouTube</a>
<a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" style="color: #e5e7eb;">💼 LinkedIn</a>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 30px; font-size: 12px; color: rgba(148,163,184,0.9);">
© 2025 Trung tâm Anh ngữ Venus | Thiết kế & vận hành bởi <span style="color:#60a5fa;">Venus Team</span>
</div>
</footer>
<!-- Nút gọi & Zalo cố định -->
<!-- GỌI NGAY -->
<a href="tel:0865070207"
style="position:fixed; right:16px; bottom:80px; background:#22c55e; color:#fff;
padding:10px 14px; border-radius:999px; font-size:14px; z-index:999;
display:flex; align-items:center; gap:8px; animation: pulseCall 1.4s infinite;">
<span style="animation: arrowMove 1s infinite alternate;">👉</span>
📞 Gọi ngay
</a>
<!-- CHAT ZALO -->
<a href="https://zalo.me/So_dien_thoai_cua_ban" target="_blank" rel="noopener noreferrer"
style="position:fixed; right:16px; bottom:24px; background:#3b82f6; color:#fff;
padding:10px 14px; border-radius:999px; font-size:14px; z-index:999;
display:flex; align-items:center; gap:8px; animation: pulseZalo 1.4s infinite;">
<span style="animation: arrowMove 1s infinite alternate;">👉</span>
💬 Chat Zalo
</a>
<script>
// Toggle menu 3 gạch ngang
const hamburgerBtn = document.getElementById("hamburgerBtn");
const mobileMenu = document.getElementById("mobileMenu");
if (hamburgerBtn && mobileMenu) {
hamburgerBtn.addEventListener("click", () => {
hamburgerBtn.classList.toggle("active");
mobileMenu.classList.toggle("show");
});
// Tự đóng menu khi click link
mobileMenu.querySelectorAll("a").forEach(link => {
link.addEventListener("click", () => {
hamburgerBtn.classList.remove("active");
mobileMenu.classList.remove("show");
});
});
}
// Click vào hoạt động ngoại khóa -> hiện chi tiết + ảnh
const activityItems = document.querySelectorAll(".support-item.activity");
const detailBox = document.getElementById("activityDetail");
if (activityItems.length && detailBox) {
const detailTitleEl = detailBox.querySelector("h3");
const detailTextEl = detailBox.querySelector("p");
const detailImgEl = detailBox.querySelector("img");
activityItems.forEach(item => {
// cho phép focus bằng bàn phím
item.setAttribute("tabindex", "0");
const showDetail = () => {
// bỏ active ở tất cả
activityItems.forEach(i => i.classList.remove("active"));
item.classList.add("active");
const title = item.dataset.title || item.querySelector("h4")?.textContent || "";
const desc = item.dataset.desc || item.querySelector("p")?.textContent || "";
if (detailTitleEl) detailTitleEl.textContent = title;
if (detailTextEl) detailTextEl.textContent = desc;
if (detailImgEl && item.dataset.image) {
detailImgEl.src = item.dataset.image;
detailImgEl.alt = title;
}
};
item.addEventListener("click", showDetail);
// hỗ trợ Enter/Space
item.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
showDetail();
}
});
});
// set mặc định: English Fun Day (phần đầu tiên)
activityItems[0].classList.add("active");
activityItems[0].click();
}
</script>
</body>
</html>
https://trungttamanhnguvenushdqn.pages.dev/
Public Last updated: 2025-12-15 03:28:04 AM
