{"id":231,"date":"2026-04-26T11:17:16","date_gmt":"2026-04-26T11:17:16","guid":{"rendered":"https:\/\/allenglish4u.com\/home\/"},"modified":"2026-05-24T03:01:32","modified_gmt":"2026-05-24T03:01:32","slug":"home","status":"publish","type":"page","link":"https:\/\/allenglish4u.com\/vi\/","title":{"rendered":"All English 4U \u2014 Free Interactive English Lessons"},"content":{"rendered":"\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AE4U HOMEPAGE \u2014 Premium Design v3.0\n   Scoped inside WordPress page content (wp:html block)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* \u2500\u2500 Fonts are already loaded globally via ae4u-overrides.css \u2500\u2500 *\/\n\n\/* \u2500\u2500 Reset for homepage sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ae4u-hp { box-sizing: border-box; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }\n.ae4u-hp *, .ae4u-hp *::before, .ae4u-hp *::after { box-sizing: border-box; }\n.ae4u-hp a { text-decoration: none; }\n.ae4u-hp img { display: block; max-width: 100%; }\n\n\/* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes ae4u-fadeUp {\n  from { opacity: 0; transform: translateY(36px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes ae4u-fadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n@keyframes ae4u-scaleIn {\n  from { opacity: 0; transform: scale(0.93); }\n  to   { opacity: 1; transform: scale(1); }\n}\n@keyframes ae4u-float {\n  0%, 100% { transform: translateY(0) rotate(0deg); }\n  50%      { transform: translateY(-18px) rotate(4deg); }\n}\n@keyframes ae4u-floatB {\n  0%, 100% { transform: translateY(0) rotate(0deg); }\n  50%      { transform: translateY(-12px) rotate(-5deg); }\n}\n@keyframes ae4u-shimmer {\n  0%   { background-position: -200% center; }\n  100% { background-position: 200% center; }\n}\n@keyframes ae4u-gradMove {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n@keyframes ae4u-pulse-ring {\n  0%   { transform: scale(1); opacity: 0.6; }\n  100% { transform: scale(1.9); opacity: 0; }\n}\n@keyframes ae4u-countUp {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes ae4u-slideRight {\n  from { opacity: 0; transform: translateX(-24px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes ae4u-blob {\n  0%, 100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; }\n  50%      { border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%; }\n}\n\n\/* \u2500\u2500 Reveal-on-scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ae4u-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }\n.ae4u-reveal.visible { opacity: 1; transform: translateY(0); }\n.ae4u-reveal-d1 { transition-delay: 0.1s; }\n.ae4u-reveal-d2 { transition-delay: 0.2s; }\n.ae4u-reveal-d3 { transition-delay: 0.3s; }\n.ae4u-reveal-d4 { transition-delay: 0.4s; }\n.ae4u-reveal-d5 { transition-delay: 0.5s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   1. HERO SECTION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ae4u-hero {\n  position: relative;\n  min-height: 88vh;\n  background: linear-gradient(135deg, #020d1f 0%, #051535 30%, #0a2060 60%, #0d3485 100%);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  padding: 5rem 1.5rem 4rem;\n}\n.ae4u-hero::before {\n  content: '';\n  position: absolute; inset: 0;\n  background:\n    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(37,99,235,.28) 0%, transparent 70%),\n    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(6,182,212,.18) 0%, transparent 60%);\n  pointer-events: none;\n}\n\/* Animated grid dots *\/\n.ae4u-hero::after {\n  content: '';\n  position: absolute; inset: 0;\n  background-image: radial-gradient(rgba(147,197,253,.12) 1px, transparent 1px);\n  background-size: 36px 36px;\n  pointer-events: none;\n}\n.ae4u-hero-inner {\n  position: relative; z-index: 2;\n  max-width: 1200px;\n  margin: 0 auto;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 4rem;\n  align-items: center;\n}\n\/* Blobs *\/\n.ae4u-blob-1, .ae4u-blob-2 {\n  position: absolute;\n  border-radius: 50%;\n  filter: blur(70px);\n  pointer-events: none;\n}\n.ae4u-blob-1 {\n  width: 420px; height: 420px;\n  background: radial-gradient(circle, rgba(37,99,235,.35) 0%, transparent 70%);\n  top: -80px; right: -100px;\n  animation: ae4u-blob 9s ease-in-out infinite;\n}\n.ae4u-blob-2 {\n  width: 300px; height: 300px;\n  background: radial-gradient(circle, rgba(6,182,212,.22) 0%, transparent 70%);\n  bottom: 40px; left: -80px;\n  animation: ae4u-blob 11s ease-in-out infinite reverse;\n}\n\n\/* Hero Left *\/\n.ae4u-hero-text { color: #fff; }\n.ae4u-hero-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: rgba(37,99,235,.25);\n  border: 1px solid rgba(96,165,250,.35);\n  color: #93c5fd;\n  font-size: .78rem; font-weight: 600;\n  padding: 5px 14px; border-radius: 999px;\n  margin-bottom: 1.6rem;\n  animation: ae4u-fadeIn .8s ease both;\n  letter-spacing: .04em; text-transform: uppercase;\n}\n.ae4u-hero-badge-dot {\n  width: 7px; height: 7px; border-radius: 50%;\n  background: #60a5fa;\n  position: relative;\n}\n.ae4u-hero-badge-dot::after {\n  content: '';\n  position: absolute; inset: -3px;\n  border-radius: 50%;\n  background: rgba(96,165,250,.5);\n  animation: ae4u-pulse-ring 1.8s ease-out infinite;\n}\n.ae4u-hero-title {\n  font-size: clamp(2.4rem, 5.5vw, 4rem);\n  font-weight: 800;\n  line-height: 1.12;\n  color: #fff;\n  margin-bottom: 1.4rem;\n  animation: ae4u-fadeUp .9s cubic-bezier(.22,1,.36,1) .1s both;\n  letter-spacing: -.02em;\n}\n.ae4u-hero-title-accent {\n  background: linear-gradient(90deg, #60a5fa, #22d3ee, #818cf8);\n  background-size: 200% auto;\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: ae4u-shimmer 3s linear infinite;\n}\n.ae4u-hero-desc {\n  font-size: 1.12rem; line-height: 1.75;\n  color: rgba(219,234,254,.82);\n  margin-bottom: 2.4rem;\n  animation: ae4u-fadeUp .9s cubic-bezier(.22,1,.36,1) .25s both;\n  max-width: 520px;\n}\n.ae4u-hero-btns {\n  display: flex; gap: 14px; flex-wrap: wrap;\n  animation: ae4u-fadeUp .9s cubic-bezier(.22,1,.36,1) .38s both;\n}\n.ae4u-btn-primary {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: linear-gradient(135deg, #2563eb, #1d4ed8);\n  color: #fff; font-weight: 700; font-size: .95rem;\n  padding: 14px 28px; border-radius: 12px;\n  box-shadow: 0 6px 24px rgba(37,99,235,.45);\n  transition: transform .2s, box-shadow .2s;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n}\n.ae4u-btn-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 10px 32px rgba(37,99,235,.55);\n  color: #fff;\n}\n.ae4u-btn-ghost {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: rgba(255,255,255,.08);\n  border: 1.5px solid rgba(255,255,255,.22);\n  color: rgba(255,255,255,.9); font-weight: 600; font-size: .95rem;\n  padding: 14px 26px; border-radius: 12px;\n  transition: background .2s, border-color .2s, transform .2s;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n}\n.ae4u-btn-ghost:hover {\n  background: rgba(255,255,255,.14);\n  border-color: rgba(255,255,255,.45);\n  transform: translateY(-2px);\n  color: #fff;\n}\n.ae4u-hero-trust {\n  margin-top: 2.4rem;\n  display: flex; align-items: center; gap: 12px;\n  animation: ae4u-fadeUp .9s cubic-bezier(.22,1,.36,1) .5s both;\n}\n.ae4u-trust-avatars {\n  display: flex;\n}\n.ae4u-trust-avatar {\n  width: 32px; height: 32px; border-radius: 50%;\n  border: 2px solid #1e3a8a;\n  background: linear-gradient(135deg, #3b82f6, #06b6d4);\n  display: flex; align-items: center; justify-content: center;\n  font-size: .7rem; font-weight: 700; color: #fff;\n  margin-left: -10px;\n}\n.ae4u-trust-avatar:first-child { margin-left: 0; }\n.ae4u-trust-text { font-size: .82rem; color: rgba(219,234,254,.7); }\n.ae4u-trust-text strong { color: #93c5fd; }\n\n\/* Hero Right \u2014 Visual Card *\/\n.ae4u-hero-visual {\n  animation: ae4u-scaleIn 1s cubic-bezier(.22,1,.36,1) .15s both;\n}\n.ae4u-card-preview {\n  background: rgba(255,255,255,.06);\n  border: 1px solid rgba(255,255,255,.12);\n  border-radius: 24px;\n  padding: 28px;\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n}\n.ae4u-card-preview-header {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 20px;\n}\n.ae4u-cp-icon {\n  width: 42px; height: 42px; border-radius: 12px;\n  background: linear-gradient(135deg, #2563eb, #7c3aed);\n  display: flex; align-items: center; justify-content: center;\n}\n.ae4u-cp-title { color: #fff; font-weight: 700; font-size: .95rem; }\n.ae4u-cp-sub   { color: rgba(255,255,255,.5); font-size: .78rem; }\n.ae4u-cp-badge {\n  margin-left: auto;\n  background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.3);\n  color: #6ee7b7; font-size: .72rem; font-weight: 700;\n  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;\n  letter-spacing: .05em;\n}\n.ae4u-exercise-demo {\n  background: rgba(0,0,0,.25); border-radius: 14px; padding: 18px; margin-bottom: 16px;\n}\n.ae4u-ex-label { color: rgba(255,255,255,.5); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }\n.ae4u-ex-sentence { color: #e2e8f0; font-size: .95rem; line-height: 1.7; }\n.ae4u-blank {\n  display: inline-block;\n  min-width: 80px; height: 26px;\n  background: rgba(37,99,235,.3);\n  border-bottom: 2px solid #60a5fa;\n  border-radius: 4px 4px 0 0;\n  vertical-align: middle;\n  animation: ae4u-gradMove 3s ease infinite;\n  background-size: 200% 200%;\n}\n.ae4u-blank.filled {\n  background: rgba(16,185,129,.25);\n  border-bottom-color: #34d399;\n  color: #6ee7b7;\n  text-align: center;\n  font-weight: 700;\n  font-size: .88rem;\n  padding: 0 8px;\n  line-height: 26px;\n}\n.ae4u-mini-stats {\n  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;\n}\n.ae4u-mini-stat {\n  background: rgba(255,255,255,.06); border-radius: 10px; padding: 12px;\n  text-align: center;\n}\n.ae4u-mini-stat-num { color: #60a5fa; font-size: 1.2rem; font-weight: 800; }\n.ae4u-mini-stat-lbl { color: rgba(255,255,255,.45); font-size: .7rem; margin-top: 2px; }\n.ae4u-progress-bar-wrap { margin-top: 16px; }\n.ae4u-pb-label { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: .75rem; margin-bottom: 6px; }\n.ae4u-pb-track {\n  height: 6px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden;\n}\n.ae4u-pb-fill {\n  height: 100%; background: linear-gradient(90deg, #2563eb, #06b6d4);\n  border-radius: 999px;\n  transition: width 1.5s cubic-bezier(.22,1,.36,1);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   2. STATS STRIP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ae4u-stats-strip {\n  background: #fff;\n  border-bottom: 1px solid #e2e8f0;\n  padding: 0;\n}\n.ae4u-stats-inner {\n  max-width: 1200px; margin: 0 auto;\n  display: grid; grid-template-columns: repeat(4,1fr);\n}\n.ae4u-stat-item {\n  padding: 2rem 1.5rem;\n  text-align: center;\n  border-right: 1px solid #e2e8f0;\n  transition: background .2s;\n}\n.ae4u-stat-item:last-child { border-right: none; }\n.ae4u-stat-item:hover { background: #f0f7ff; }\n.ae4u-stat-num {\n  font-size: 2.2rem; font-weight: 800;\n  color: #0d2352; line-height: 1;\n  margin-bottom: 6px;\n}\n.ae4u-stat-num span { color: #2563eb; }\n.ae4u-stat-label { font-size: .85rem; color: #64748b; font-weight: 500; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   3. COURSES SECTION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ae4u-courses-section {\n  background: #f8faff;\n  padding: 6rem 1.5rem;\n}\n.ae4u-section-inner { max-width: 1200px; margin: 0 auto; }\n.ae4u-section-header { text-align: center; margin-bottom: 3.5rem; }\n.ae4u-section-eyebrow {\n  display: inline-block;\n  color: #2563eb; font-size: .82rem; font-weight: 700;\n  text-transform: uppercase; letter-spacing: .1em;\n  margin-bottom: .8rem;\n}\n.ae4u-section-title {\n  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;\n  color: #0a1628; letter-spacing: -.02em; line-height: 1.2;\n  margin-bottom: .8rem;\n}\n.ae4u-section-desc {\n  font-size: 1.05rem; color: #475569; max-width: 560px; margin: 0 auto; line-height: 1.7;\n}\n\n.ae4u-courses-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.5rem;\n}\n.ae4u-course-card {\n  background: #fff;\n  border-radius: 20px;\n  padding: 2rem;\n  border: 1px solid #e2e8f0;\n  box-shadow: 0 2px 12px rgba(0,0,0,.05);\n  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  display: flex; flex-direction: column;\n}\n.ae4u-course-card::before {\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;\n  border-radius: 20px 20px 0 0;\n  transition: height .3s;\n}\n.ae4u-course-card:hover {\n  transform: translateY(-8px);\n  box-shadow: 0 20px 50px rgba(0,0,0,.12);\n  border-color: transparent;\n}\n.ae4u-course-card:hover::before { height: 6px; }\n\n\/* Color themes *\/\n.ae4u-cc-grammar::before  { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }\n.ae4u-cc-toefl::before    { background: linear-gradient(90deg, #2563eb, #60a5fa); }\n.ae4u-cc-ielts::before    { background: linear-gradient(90deg, #0d9488, #34d399); }\n.ae4u-cc-dictation::before { background: linear-gradient(90deg, #f97316, #fb923c); }\n.ae4u-cc-magazine::before { background: linear-gradient(90deg, #f43f5e, #fb7185); }\n.ae4u-cc-contact::before  { background: linear-gradient(90deg, #6366f1, #818cf8); }\n\n.ae4u-course-card:hover.ae4u-cc-grammar  { box-shadow: 0 20px 50px rgba(139,92,246,.18); }\n.ae4u-course-card:hover.ae4u-cc-toefl    { box-shadow: 0 20px 50px rgba(37,99,235,.18); }\n.ae4u-course-card:hover.ae4u-cc-ielts    { box-shadow: 0 20px 50px rgba(13,148,136,.18); }\n.ae4u-course-card:hover.ae4u-cc-dictation { box-shadow: 0 20px 50px rgba(249,115,22,.18); }\n.ae4u-course-card:hover.ae4u-cc-magazine  { box-shadow: 0 20px 50px rgba(244,63,94,.18); }\n\n.ae4u-course-icon-wrap {\n  width: 56px; height: 56px; border-radius: 16px;\n  display: flex; align-items: center; justify-content: center;\n  margin-bottom: 1.2rem; flex-shrink: 0;\n}\n.ae4u-cc-grammar  .ae4u-course-icon-wrap { background: rgba(139,92,246,.1); }\n.ae4u-cc-toefl    .ae4u-course-icon-wrap { background: rgba(37,99,235,.1); }\n.ae4u-cc-ielts    .ae4u-course-icon-wrap { background: rgba(13,148,136,.1); }\n.ae4u-cc-dictation .ae4u-course-icon-wrap { background: rgba(249,115,22,.1); }\n.ae4u-cc-magazine  .ae4u-course-icon-wrap { background: rgba(244,63,94,.1); }\n\n.ae4u-course-title {\n  font-size: 1.12rem; font-weight: 800;\n  color: #0a1628; margin-bottom: .5rem;\n}\n.ae4u-course-desc {\n  font-size: .88rem; color: #64748b; line-height: 1.65;\n  flex: 1; margin-bottom: 1.4rem;\n}\n.ae4u-course-meta {\n  display: flex; align-items: center; gap: 8px; margin-bottom: 1.2rem;\n}\n.ae4u-course-tag {\n  font-size: .72rem; font-weight: 700; text-transform: uppercase;\n  letter-spacing: .05em; padding: 3px 10px; border-radius: 999px;\n}\n.ae4u-cc-grammar .ae4u-course-tag  { background: rgba(139,92,246,.1); color: #7c3aed; }\n.ae4u-cc-toefl   .ae4u-course-tag  { background: rgba(37,99,235,.1);  color: #1d4ed8; }\n.ae4u-cc-ielts   .ae4u-course-tag  { background: rgba(13,148,136,.1); color: #0f766e; }\n.ae4u-cc-dictation .ae4u-course-tag { background: rgba(249,115,22,.1); color: #c2410c; }\n.ae4u-cc-magazine  .ae4u-course-tag { background: rgba(244,63,94,.1);  color: #be123c; }\n\n.ae4u-course-lessons { font-size: .78rem; color: #94a3b8; }\n.ae4u-course-cta {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-top: auto; padding-top: 1rem;\n  border-top: 1px solid #f1f5f9;\n}\n.ae4u-course-link {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: .88rem; font-weight: 700; color: #2563eb;\n  transition: gap .2s;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n}\n.ae4u-course-link:hover { gap: 10px; color: #1d4ed8; }\n.ae4u-course-arrow {\n  width: 28px; height: 28px; border-radius: 8px;\n  background: #eff6ff;\n  display: flex; align-items: center; justify-content: center;\n  transition: background .2s, transform .2s;\n}\n.ae4u-course-card:hover .ae4u-course-arrow {\n  background: #2563eb;\n  transform: translateX(3px);\n}\n.ae4u-course-card:hover .ae4u-course-arrow svg { color: #fff; }\n\n\/* Featured card (spans 2 cols) *\/\n.ae4u-course-card.ae4u-cc-featured {\n  grid-column: span 2;\n  background: linear-gradient(135deg, #050e20, #0d2352);\n  color: #fff;\n  border-color: transparent;\n  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;\n}\n.ae4u-cc-featured .ae4u-course-title { color: #fff; font-size: 1.5rem; }\n.ae4u-cc-featured .ae4u-course-desc  { color: rgba(219,234,254,.7); margin-bottom: .8rem; }\n.ae4u-cc-featured .ae4u-course-cta   { border-top-color: rgba(255,255,255,.12); }\n.ae4u-cc-featured .ae4u-course-link  { color: #93c5fd; }\n.ae4u-cc-featured .ae4u-course-link:hover { color: #bfdbfe; }\n.ae4u-cc-featured .ae4u-course-arrow { background: rgba(255,255,255,.1); }\n.ae4u-cc-featured .ae4u-course-icon-wrap { background: rgba(255,255,255,.1); }\n.ae4u-featured-visual {\n  background: rgba(255,255,255,.05); border-radius: 14px; padding: 20px;\n  border: 1px solid rgba(255,255,255,.1);\n}\n.ae4u-featured-tag-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }\n.ae4u-feat-tag {\n  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;\n  padding: 3px 10px; border-radius: 999px;\n  border: 1px solid rgba(255,255,255,.15);\n  color: rgba(255,255,255,.7);\n}\n.ae4u-feat-tag.active { background: #2563eb; color: #fff; border-color: transparent; }\n.ae4u-feat-books { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }\n.ae4u-feat-book {\n  background: rgba(255,255,255,.06); border-radius: 10px; padding: 12px;\n  font-size: .78rem; color: rgba(255,255,255,.8); font-weight: 600;\n  transition: background .2s;\n}\n.ae4u-feat-book:hover { background: rgba(255,255,255,.12); }\n.ae4u-feat-book-sub { color: rgba(255,255,255,.4); font-size: .7rem; font-weight: 400; margin-top: 2px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   4. FEATURES SECTION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ae4u-features-section {\n  background: #fff;\n  padding: 6rem 1.5rem;\n}\n.ae4u-features-grid {\n  display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;\n}\n.ae4u-feature-item {\n  padding: 2.5rem 2rem;\n  border-radius: 20px;\n  background: #f8faff;\n  border: 1px solid #e2e8f0;\n  text-align: center;\n  transition: transform .3s, box-shadow .3s;\n}\n.ae4u-feature-item:hover {\n  transform: translateY(-6px);\n  box-shadow: 0 16px 40px rgba(37,99,235,.1);\n  border-color: #bfdbfe;\n}\n.ae4u-feature-icon {\n  width: 68px; height: 68px; border-radius: 20px;\n  background: linear-gradient(135deg, #eff6ff, #dbeafe);\n  display: flex; align-items: center; justify-content: center;\n  margin: 0 auto 1.4rem;\n}\n.ae4u-feature-title { font-size: 1.08rem; font-weight: 800; color: #0a1628; margin-bottom: .6rem; }\n.ae4u-feature-desc  { font-size: .88rem; color: #64748b; line-height: 1.65; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   5. YOUTUBE \/ CTA SECTION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ae4u-cta-section {\n  background: linear-gradient(135deg, #050e20, #0a1f5c 50%, #0d2352);\n  padding: 6rem 1.5rem;\n  position: relative; overflow: hidden;\n}\n.ae4u-cta-section::before {\n  content: '';\n  position: absolute; inset: 0;\n  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(37,99,235,.2), transparent 70%);\n  pointer-events: none;\n}\n.ae4u-cta-inner {\n  max-width: 1200px; margin: 0 auto;\n  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;\n}\n.ae4u-cta-text { position: relative; z-index: 2; }\n.ae4u-cta-eyebrow {\n  display: inline-block;\n  background: rgba(96,165,250,.15); border: 1px solid rgba(96,165,250,.25);\n  color: #93c5fd; font-size: .78rem; font-weight: 700;\n  text-transform: uppercase; letter-spacing: .08em;\n  padding: 4px 14px; border-radius: 999px; margin-bottom: 1.2rem;\n}\n.ae4u-cta-title {\n  font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800;\n  color: #fff; letter-spacing: -.02em; line-height: 1.2;\n  margin-bottom: 1rem;\n}\n.ae4u-cta-desc { font-size: 1rem; color: rgba(219,234,254,.75); line-height: 1.7; margin-bottom: 2rem; }\n.ae4u-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }\n.ae4u-btn-yt {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #ff0000; color: #fff; font-weight: 700; font-size: .92rem;\n  padding: 13px 24px; border-radius: 12px;\n  box-shadow: 0 6px 20px rgba(255,0,0,.3);\n  transition: transform .2s, box-shadow .2s;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n}\n.ae4u-btn-yt:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,0,0,.4); color: #fff; }\n.ae4u-btn-fb {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2);\n  color: #fff; font-weight: 600; font-size: .92rem;\n  padding: 13px 24px; border-radius: 12px;\n  transition: background .2s, transform .2s;\n  font-family: 'Plus Jakarta Sans', sans-serif;\n}\n.ae4u-btn-fb:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); color: #fff; }\n\n\/* YT Preview Card *\/\n.ae4u-yt-card {\n  position: relative; z-index: 2;\n  background: rgba(255,255,255,.07);\n  border: 1px solid rgba(255,255,255,.12);\n  border-radius: 24px;\n  padding: 6px;\n  backdrop-filter: blur(12px);\n}\n.ae4u-yt-thumb {\n  background: linear-gradient(135deg, #0f172a, #1e3a8a);\n  border-radius: 18px;\n  aspect-ratio: 16\/9;\n  display: flex; align-items: center; justify-content: center;\n  position: relative; overflow: hidden;\n  cursor: pointer;\n}\n.ae4u-yt-thumb::before {\n  content: '';\n  position: absolute; inset: 0;\n  background:\n    linear-gradient(135deg, rgba(37,99,235,.3), rgba(6,182,212,.2));\n}\n.ae4u-yt-play-btn {\n  position: relative; z-index: 2;\n  width: 68px; height: 68px; border-radius: 50%;\n  background: rgba(255,255,255,.95);\n  display: flex; align-items: center; justify-content: center;\n  box-shadow: 0 8px 32px rgba(0,0,0,.4);\n  transition: transform .2s, box-shadow .2s;\n}\n.ae4u-yt-thumb:hover .ae4u-yt-play-btn {\n  transform: scale(1.08);\n  box-shadow: 0 12px 40px rgba(0,0,0,.5);\n}\n.ae4u-yt-play-btn::after {\n  content: ''; position: absolute; inset: -6px;\n  border-radius: 50%;\n  background: rgba(255,255,255,.2);\n  animation: ae4u-pulse-ring 2s ease-out infinite;\n}\n.ae4u-yt-info {\n  padding: 16px 16px 12px;\n  display: flex; align-items: center; gap: 10px;\n}\n.ae4u-yt-channel-icon {\n  width: 36px; height: 36px; border-radius: 50%;\n  background: linear-gradient(135deg, #2563eb, #7c3aed);\n  display: flex; align-items: center; justify-content: center;\n  font-size: .75rem; font-weight: 800; color: #fff; flex-shrink: 0;\n}\n.ae4u-yt-channel-name { color: #e2e8f0; font-size: .85rem; font-weight: 700; }\n.ae4u-yt-sub-count    { color: rgba(255,255,255,.45); font-size: .75rem; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   6. RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 1024px) {\n  .ae4u-hero-inner    { grid-template-columns: 1fr; gap: 3rem; }\n  .ae4u-hero-visual   { display: none; }\n  .ae4u-courses-grid  { grid-template-columns: repeat(2,1fr); }\n  .ae4u-cc-featured   { grid-column: span 2; display: flex; flex-direction: column; }\n  .ae4u-featured-visual { display: none; }\n  .ae4u-cta-inner     { grid-template-columns: 1fr; }\n  .ae4u-yt-card       { max-width: 440px; }\n}\n@media (max-width: 768px) {\n  .ae4u-hero          { min-height: auto; padding: 4rem 1.2rem 3rem; }\n  .ae4u-stats-inner   { grid-template-columns: repeat(2,1fr); }\n  .ae4u-stat-item:nth-child(2) { border-right: none; }\n  .ae4u-stat-item     { border-bottom: 1px solid #e2e8f0; }\n  .ae4u-courses-grid  { grid-template-columns: 1fr; }\n  .ae4u-cc-featured   { grid-column: span 1; }\n  .ae4u-features-grid { grid-template-columns: 1fr; }\n  .ae4u-cta-btns      { flex-direction: column; }\n}\n<\/style>\n\n<div class=\"ae4u-hp\">\n\n<!-- \u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"ae4u-hero\">\n  <div class=\"ae4u-blob-1\"><\/div>\n  <div class=\"ae4u-blob-2\"><\/div>\n  <div class=\"ae4u-hero-inner\">\n\n    <!-- Left: Text -->\n    <div class=\"ae4u-hero-text\">\n      <div class=\"ae4u-hero-badge\">\n        <span class=\"ae4u-hero-badge-dot\"><\/span>\n        Free \u00b7 No Signup Required\n      <\/div>\n      <h1 class=\"ae4u-hero-title\">\n        Master English with<br>\n        <span class=\"ae4u-hero-title-accent\">All English 4U<\/span>\n      <\/h1>\n      <p class=\"ae4u-hero-desc\">\n        Grammar, TOEFL, IELTS &amp; Dictation with interactive exercises, video lessons,\n        and real exam practice. Designed for all learners. Free forever.\n      <\/p>\n      <div class=\"ae4u-hero-btns\">\n        <a href=\"\/toefl\/\" class=\"ae4u-btn-primary\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n          Start Learning TOEFL\n        <\/a>\n        <a href=\"\/ielts\/\" class=\"ae4u-btn-ghost\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 8 16 12 12 16\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><\/svg>\n          Explore IELTS\n        <\/a>\n      <\/div>\n      <div class=\"ae4u-hero-trust\">\n        <div class=\"ae4u-trust-avatars\">\n          <div class=\"ae4u-trust-avatar\">TM<\/div>\n          <div class=\"ae4u-trust-avatar\" style=\"background:linear-gradient(135deg,#0d9488,#06b6d4)\">NH<\/div>\n          <div class=\"ae4u-trust-avatar\" style=\"background:linear-gradient(135deg,#7c3aed,#a78bfa)\">PL<\/div>\n          <div class=\"ae4u-trust-avatar\" style=\"background:linear-gradient(135deg,#f97316,#fb923c)\">+K<\/div>\n        <\/div>\n        <span class=\"ae4u-trust-text\">Over <strong>5,000+<\/strong> active learners monthly<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Right: Visual Demo -->\n    <div class=\"ae4u-hero-visual\">\n      <div class=\"ae4u-card-preview\">\n        <div class=\"ae4u-card-preview-header\">\n          <div class=\"ae4u-cp-icon\">\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n          <\/div>\n          <div>\n            <div class=\"ae4u-cp-title\">IELTS Academic<\/div>\n            <div class=\"ae4u-cp-sub\">Unit 3 \u2014 Vocabulary<\/div>\n          <\/div>\n          <div class=\"ae4u-cp-badge\">Live<\/div>\n        <\/div>\n        <div class=\"ae4u-exercise-demo\">\n          <div class=\"ae4u-ex-label\">Fill in the blanks<\/div>\n          <div class=\"ae4u-ex-sentence\">\n            The research <span class=\"ae4u-blank filled\">shows<\/span> a significant\n            <span class=\"ae4u-blank\" id=\"ae4u-b2\"><\/span> in academic performance when\n            students use interactive exercises <span class=\"ae4u-blank\" id=\"ae4u-b3\"><\/span>.\n          <\/div>\n        <\/div>\n        <div class=\"ae4u-mini-stats\">\n          <div class=\"ae4u-mini-stat\">\n            <div class=\"ae4u-mini-stat-num\">12<\/div>\n            <div class=\"ae4u-mini-stat-lbl\">Exercises<\/div>\n          <\/div>\n          <div class=\"ae4u-mini-stat\">\n            <div class=\"ae4u-mini-stat-num\" style=\"color:#34d399\">86%<\/div>\n            <div class=\"ae4u-mini-stat-lbl\">Accuracy<\/div>\n          <\/div>\n          <div class=\"ae4u-mini-stat\">\n            <div class=\"ae4u-mini-stat-num\" style=\"color:#fb923c\">\ud83d\udd25 7<\/div>\n            <div class=\"ae4u-mini-stat-lbl\">Day Streak<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"ae4u-progress-bar-wrap\">\n          <div class=\"ae4u-pb-label\"><span>Unit 3 Progress<\/span><span>68%<\/span><\/div>\n          <div class=\"ae4u-pb-track\"><div class=\"ae4u-pb-fill\" id=\"ae4u-pb\" style=\"width:0%\"><\/div><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/hero-inner -->\n<\/section>\n\n<!-- \u2550\u2550 STATS STRIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"ae4u-stats-strip\">\n  <div class=\"ae4u-stats-inner\">\n    <div class=\"ae4u-stat-item ae4u-reveal\">\n      <div class=\"ae4u-stat-num\"><span class=\"ae4u-count\" data-target=\"200\">0<\/span>+<\/div>\n      <div class=\"ae4u-stat-label\">Video Lessons<\/div>\n    <\/div>\n    <div class=\"ae4u-stat-item ae4u-reveal ae4u-reveal-d1\">\n      <div class=\"ae4u-stat-num\"><span class=\"ae4u-count\" data-target=\"500\">0<\/span>+<\/div>\n      <div class=\"ae4u-stat-label\">Exercises interactive<\/div>\n    <\/div>\n    <div class=\"ae4u-stat-item ae4u-reveal ae4u-reveal-d2\">\n      <div class=\"ae4u-stat-num\"><span class=\"ae4u-count\" data-target=\"5\">0<\/span>K+<\/div>\n      <div class=\"ae4u-stat-label\">Monthly Learners<\/div>\n    <\/div>\n    <div class=\"ae4u-stat-item ae4u-reveal ae4u-reveal-d3\">\n      <div class=\"ae4u-stat-num\"><span>100<\/span>%<\/div>\n      <div class=\"ae4u-stat-label\">Completely Free<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- \u2550\u2550 COURSES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"ae4u-courses-section\">\n  <div class=\"ae4u-section-inner\">\n    <div class=\"ae4u-section-header ae4u-reveal\">\n      <span class=\"ae4u-section-eyebrow\">Our Curriculum<\/span>\n      <h2 class=\"ae4u-section-title\">Everything You Need to Succeed<\/h2>\n      <p class=\"ae4u-section-desc\">From basic grammar to TOEFL and IELTS preparation \u2014 follow a clear learning path with video lessons and interactive exercises.<\/p>\n    <\/div>\n\n    <div class=\"ae4u-courses-grid\">\n\n      <!-- TOEFL \u2014 Featured Card -->\n      <div class=\"ae4u-course-card ae4u-cc-toefl ae4u-cc-featured ae4u-reveal\">\n        <div>\n          <div class=\"ae4u-course-icon-wrap\">\n            <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#60a5fa\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg>\n          <\/div>\n          <div class=\"ae4u-course-tag\">Test Prep<\/div>\n          <h3 class=\"ae4u-course-title\" style=\"margin-top:.5rem\">TOEFL Primary &amp; Junior<\/h3>\n          <p class=\"ae4u-course-desc\">Comprehensive video lessons and unit exercises. Master Listening, Reading, and Vocabulary with real exam questions.<\/p>\n          <div class=\"ae4u-course-cta\">\n            <a href=\"\/toefl\/\" class=\"ae4u-course-link\">\n              Start Now\n              <div class=\"ae4u-course-arrow\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n              <\/div>\n            <\/a>\n          <\/div>\n        <\/div>\n        <div class=\"ae4u-featured-visual\">\n          <div class=\"ae4u-featured-tag-row\">\n            <span class=\"ae4u-feat-tag active\">Step 1<\/span>\n            <span class=\"ae4u-feat-tag\">Book 1<\/span>\n            <span class=\"ae4u-feat-tag\">Book 2<\/span>\n            <span class=\"ae4u-feat-tag\">Step 2<\/span>\n          <\/div>\n          <div class=\"ae4u-feat-books\">\n            <div class=\"ae4u-feat-book\">Unit 3 \u2014 Animals\n              <div class=\"ae4u-feat-book-sub\">Fill blanks \u00b7 MCQ \u00b7 True\/False<\/div>\n            <\/div>\n            <div class=\"ae4u-feat-book\">Unit 4 \u2014 Weather\n              <div class=\"ae4u-feat-book-sub\">Vocab \u00b7 Drag &amp; Drop<\/div>\n            <\/div>\n            <div class=\"ae4u-feat-book\">Unit 5 \u2014 Travel\n              <div class=\"ae4u-feat-book-sub\">Listening \u00b7 Word Order<\/div>\n            <\/div>\n            <div class=\"ae4u-feat-book\">+ Many More\n              <div class=\"ae4u-feat-book-sub\">Updated Weekly<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- IELTS -->\n      <div class=\"ae4u-course-card ae4u-cc-ielts ae4u-reveal ae4u-reveal-d1\">\n        <div class=\"ae4u-course-icon-wrap\">\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\n        <\/div>\n        <div class=\"ae4u-course-tag\">Academic<\/div>\n        <h3 class=\"ae4u-course-title\" style=\"margin-top:.5rem\">IELTS Vocabulary<\/h3>\n        <p class=\"ae4u-course-desc\">10 essential academic vocabulary units \u2014 Cause &amp; Effect, Comparison, Location, Joining\/Becoming&#8230; with immediate practice exercises.<\/p>\n        <div class=\"ae4u-course-cta\">\n          <a href=\"\/ielts\/\" class=\"ae4u-course-link\">\n            Study IELTS\n            <div class=\"ae4u-course-arrow\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Grammar -->\n      <div class=\"ae4u-course-card ae4u-cc-grammar ae4u-reveal ae4u-reveal-d2\">\n        <div class=\"ae4u-course-icon-wrap\">\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"\/><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"\/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"\/><\/svg>\n        <\/div>\n        <div class=\"ae4u-course-tag\">Grammar<\/div>\n        <h3 class=\"ae4u-course-title\" style=\"margin-top:.5rem\">Grammar<\/h3>\n        <p class=\"ae4u-course-desc\">Grammar from beginner to advanced. Tenses, Articles, Prepositions \u2014 clear explanations with illustrative exercises.<\/p>\n        <div class=\"ae4u-course-cta\">\n          <a href=\"\/grammar\/\" class=\"ae4u-course-link\">\n            Learn Grammar\n            <div class=\"ae4u-course-arrow\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Dictation -->\n      <div class=\"ae4u-course-card ae4u-cc-dictation ae4u-reveal ae4u-reveal-d3\">\n        <div class=\"ae4u-course-icon-wrap\">\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f97316\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"\/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"\/><\/svg>\n        <\/div>\n        <div class=\"ae4u-course-tag\">Listening Practice<\/div>\n        <h3 class=\"ae4u-course-title\" style=\"margin-top:.5rem\">Dictation<\/h3>\n        <p class=\"ae4u-course-desc\">Listen and dictate. Train your ear, improve spelling, and enhance your recognition of natural English sounds.<\/p>\n        <div class=\"ae4u-course-cta\">\n          <a href=\"\/dictation\/\" class=\"ae4u-course-link\">\n            Listening Practice\n            <div class=\"ae4u-course-arrow\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Magazine -->\n      <div class=\"ae4u-course-card ae4u-cc-magazine ae4u-reveal ae4u-reveal-d4\">\n        <div class=\"ae4u-course-icon-wrap\">\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f43f5e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"\/><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"\/><\/svg>\n        <\/div>\n        <div class=\"ae4u-course-tag\">Reading Comprehension<\/div>\n        <h3 class=\"ae4u-course-title\" style=\"margin-top:.5rem\">Magazine<\/h3>\n        <p class=\"ae4u-course-desc\">Engaging English articles on science, culture, and technology \u2014 expand your vocabulary and reading skills naturally.<\/p>\n        <div class=\"ae4u-course-cta\">\n          <a href=\"\/magazine\/\" class=\"ae4u-course-link\">\n            Read Now\n            <div class=\"ae4u-course-arrow\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div><!-- \/courses-grid -->\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550 FEATURES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"ae4u-features-section\">\n  <div class=\"ae4u-section-inner\">\n    <div class=\"ae4u-section-header ae4u-reveal\">\n      <span class=\"ae4u-section-eyebrow\">Why Choose Us<\/span>\n      <h2 class=\"ae4u-section-title\">Learn More Effectively with All English 4U<\/h2>\n    <\/div>\n    <div class=\"ae4u-features-grid\">\n      <div class=\"ae4u-feature-item ae4u-reveal\">\n        <div class=\"ae4u-feature-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n        <\/div>\n        <h4 class=\"ae4u-feature-title\">Learn Anytime, Anywhere<\/h4>\n        <p class=\"ae4u-feature-desc\">No registration or app download required. Open your browser and start learning instantly \u2014 on your phone, tablet, or laptop.<\/p>\n      <\/div>\n      <div class=\"ae4u-feature-item ae4u-reveal ae4u-reveal-d1\">\n        <div class=\"ae4u-feature-icon\" style=\"background:linear-gradient(135deg,#f0fdf4,#dcfce7)\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z\"\/><path d=\"M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\/><\/svg>\n        <\/div>\n        <h4 class=\"ae4u-feature-title\">Truly Interactive Exercises<\/h4>\n        <p class=\"ae4u-feature-desc\">Fill in the blanks, Drag &#038; Drop, Multiple Choice, True\/False \u2014 designed to match real international exam formats.<\/p>\n      <\/div>\n      <div class=\"ae4u-feature-item ae4u-reveal ae4u-reveal-d2\">\n        <div class=\"ae4u-feature-icon\" style=\"background:linear-gradient(135deg,#fdf4ff,#fae8ff)\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n        <\/div>\n        <h4 class=\"ae4u-feature-title\">Video + Exercises k\u1ebft h\u1ee3p<\/h4>\n        <p class=\"ae4u-feature-desc\">Every lesson features detailed video explanations paired with practical exercises \u2014 don&#8217;t just watch, practice immediately.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550 YouTube CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"ae4u-cta-section\">\n  <div class=\"ae4u-cta-inner ae4u-section-inner\">\n    <div class=\"ae4u-cta-text ae4u-reveal\">\n      <div class=\"ae4u-cta-eyebrow\">YouTube Channel<\/div>\n      <h2 class=\"ae4u-cta-title\">Watch Free Video Lessons on YouTube<\/h2>\n      <p class=\"ae4u-cta-desc\">Hundreds of high-quality video lessons. Subscribe to never miss a new lesson every week. Follow us on Facebook for study materials updates.<\/p>\n      <div class=\"ae4u-cta-btns\">\n        <a href=\"https:\/\/www.youtube.com\/@AllEnglish4U?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\" class=\"ae4u-btn-yt\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.55 3.5 12 3.5 12 3.5s-7.55 0-9.38.55A3.02 3.02 0 0 0 .5 6.19C0 8.04 0 11.86 0 11.86s0 3.82.5 5.67a3.02 3.02 0 0 0 2.12 2.14c1.83.55 9.38.55 9.38.55s7.55 0 9.38-.55a3.02 3.02 0 0 0 2.12-2.14C24 15.68 24 11.86 24 11.86s0-3.82-.5-5.67zM9.75 15.52V8.2l6.25 3.66-6.25 3.66z\"\/><\/svg>\n          Subscribe YouTube\n        <\/a>\n        <a href=\"https:\/\/www.facebook.com\/AllEnglish4U\" target=\"_blank\" rel=\"noopener\" class=\"ae4u-btn-fb\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\n          Facebook\n        <\/a>\n      <\/div>\n    <\/div>\n    <div class=\"ae4u-yt-card ae4u-reveal ae4u-reveal-d1\">\n      <a href=\"https:\/\/www.youtube.com\/@AllEnglish4U\" target=\"_blank\" rel=\"noopener\">\n        <div class=\"ae4u-yt-thumb\">\n          <div class=\"ae4u-yt-play-btn\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#ff0000\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n          <\/div>\n        <\/div>\n      <\/a>\n      <div class=\"ae4u-yt-info\">\n        <div class=\"ae4u-yt-channel-icon\">A4U<\/div>\n        <div>\n          <div class=\"ae4u-yt-channel-name\">All English 4U<\/div>\n          <div class=\"ae4u-yt-sub-count\">English Learning \u00b7 Free Lessons<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div><!-- \/ae4u-hp -->\n\n<script>\n(function() {\n  'use strict';\n\n  \/\/ \u2500\u2500 Progress bar animation on load\n  setTimeout(function() {\n    var pb = document.getElementById('ae4u-pb');\n    if (pb) pb.style.width = '68%';\n  }, 800);\n\n  \/\/ \u2500\u2500 Typewriter effect for blank slots\n  var words = ['increase','improvement','difference'];\n  var word2 = ['consistently','regularly'];\n  var idx1 = 0, idx2 = 0;\n  function cycleBlank(id, arr, refIdx) {\n    var el = document.getElementById(id);\n    if (!el) return;\n    el.classList.add('filled');\n    el.textContent = arr[refIdx % arr.length];\n  }\n  setTimeout(function() { cycleBlank('ae4u-b2', words, idx1); }, 1200);\n  setTimeout(function() { cycleBlank('ae4u-b3', word2, idx2); }, 2000);\n\n  \/\/ \u2500\u2500 Scroll reveal with Intersection Observer\n  var reveals = document.querySelectorAll('.ae4u-reveal');\n  if ('IntersectionObserver' in window) {\n    var io = new IntersectionObserver(function(entries) {\n      entries.forEach(function(e) {\n        if (e.isIntersecting) {\n          e.target.classList.add('visible');\n          io.unobserve(e.target);\n        }\n      });\n    }, { threshold: 0.12 });\n    reveals.forEach(function(el) { io.observe(el); });\n    \/\/ Trigger visible for elements already in viewport\n    setTimeout(function() {\n      reveals.forEach(function(el) {\n        var rect = el.getBoundingClientRect();\n        if (rect.top < window.innerHeight) el.classList.add('visible');\n      });\n    }, 100);\n  } else {\n    reveals.forEach(function(el) { el.classList.add('visible'); });\n  }\n\n  \/\/ \u2500\u2500 Animated counters\n  function animateCounter(el) {\n    var target = parseInt(el.getAttribute('data-target'), 10);\n    var start = 0;\n    var duration = 1800;\n    var startTime = null;\n    function step(timestamp) {\n      if (!startTime) startTime = timestamp;\n      var progress = Math.min((timestamp - startTime) \/ duration, 1);\n      var eased = 1 - Math.pow(1 - progress, 3);\n      el.textContent = Math.round(start + (target - start) * eased);\n      if (progress < 1) requestAnimationFrame(step);\n    }\n    requestAnimationFrame(step);\n  }\n  var counterIO = new IntersectionObserver(function(entries) {\n    entries.forEach(function(e) {\n      if (e.isIntersecting) {\n        animateCounter(e.target);\n        counterIO.unobserve(e.target);\n      }\n    });\n  }, { threshold: 0.5 });\n  document.querySelectorAll('.ae4u-count').forEach(function(el) {\n    counterIO.observe(el);\n  });\n\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Free \u00b7 No Signup Required Master English with All English 4U Grammar, TOEFL, IELTS &amp; Dictation with interactive exercises, video lessons, and real exam practice. Designed for all learners. Free forever. Start Learning TOEFL Explore IELTS TM NH PL +K Over 5,000+ active learners monthly IELTS Academic Unit 3 \u2014 Vocabulary Live Fill in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":8,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":964,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231\/revisions\/964"}],"wp:attachment":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}