<?php
/**
 * IELTSDL.com — single-file PHP page + contact mailer
 * Deploy: upload as index.php to a PHP-enabled host (cPanel). mail() must be enabled.
 * The contact form posts to this same file (AJAX), with a no-JS fallback.
 */
declare(strict_types=1);

$RECIPIENT = 'ieltsdalat@gmail.com';

/** Strip CR/LF to prevent email header injection. */
function clean_header(string $v): string {
    return trim(str_replace(["\r", "\n", "%0a", "%0d", "%0A", "%0D"], '', $v));
}

$status = null; // used only for the no-JS fallback banner

if (($_SERVER['REQUEST_METHOD'] ?? 'GET') === 'POST') {

    $isAjax = (($_POST['ajax'] ?? '') === '1')
        || (strtolower($_SERVER['HTTP_X_REQUESTED_WITH'] ?? '') === 'xmlhttprequest');

    // Honeypot: real users never fill this hidden field; bots do.
    if (!empty($_POST['company'] ?? '')) {
        if ($isAjax) {
            header('Content-Type: application/json; charset=utf-8');
            echo json_encode(['ok' => true]);
        } else {
            header('Location: ?sent=1#contact');
        }
        exit;
    }

    $name    = trim((string)($_POST['name'] ?? ''));
    $email   = trim((string)($_POST['email'] ?? ''));
    $goal    = trim((string)($_POST['goal'] ?? ''));
    $skill   = trim((string)($_POST['skill'] ?? ''));
    $message = trim((string)($_POST['message'] ?? ''));

    $errors = [];
    if ($name === '' || mb_strlen($name) > 120) {
        $errors[] = 'Vui lòng nhập họ và tên hợp lệ.';
    }
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'Email không hợp lệ.';
    }
    if ($message === '' || mb_strlen($message) > 5000) {
        $errors[] = 'Vui lòng nhập nội dung (tối đa 5000 ký tự).';
    }

    if (!$errors) {
        $goalSafe  = $goal  !== '' ? $goal  : 'Chưa xác định';
        $skillSafe = $skill !== '' ? $skill : 'Tất cả kỹ năng';

        // Use a From address on this domain — improves deliverability vs. a gmail From.
        $host = preg_replace('/^www\./i', '', $_SERVER['HTTP_HOST'] ?? 'ieltsdl.com');
        $fromEmail = 'no-reply@' . $host;

        $subjectRaw = 'Liên hệ học IELTS online - IELTSDL.com';
        $subject = '=?UTF-8?B?' . base64_encode($subjectRaw) . '?=';

        $lines = [
            'Bạn nhận được một liên hệ mới từ IELTSDL.com:',
            '',
            'Họ và tên: ' . $name,
            'Email: ' . $email,
            'Mục tiêu IELTS: ' . $goalSafe,
            'Kỹ năng cần hỗ trợ: ' . $skillSafe,
            '',
            'Nội dung:',
            $message,
            '',
            '----',
            'Thời gian: ' . date('Y-m-d H:i:s'),
            'IP: ' . ($_SERVER['REMOTE_ADDR'] ?? 'unknown'),
        ];
        $body = implode("\r\n", $lines);

        $headers = [
            'MIME-Version: 1.0',
            'Content-Type: text/plain; charset=UTF-8',
            'Content-Transfer-Encoding: 8bit',
            'From: IELTSDL.com <' . $fromEmail . '>',
            'Reply-To: ' . clean_header($email),
            'X-Mailer: PHP/' . phpversion(),
        ];

        // 5th param sets the envelope sender (Return-Path) on most hosts.
        $sent = @mail($RECIPIENT, $subject, $body, implode("\r\n", $headers), '-f' . $fromEmail);

        if ($sent) {
            if ($isAjax) {
                header('Content-Type: application/json; charset=utf-8');
                echo json_encode(['ok' => true, 'message' => 'Cảm ơn bạn! Liên hệ đã được gửi thành công.'], JSON_UNESCAPED_UNICODE);
            } else {
                header('Location: ?sent=1#contact');
            }
            exit;
        }

        $errors[] = 'Hệ thống gửi email tạm thời gặp lỗi. Vui lòng gửi trực tiếp tới ' . $RECIPIENT . '.';
    }

    // Reached only on validation/sending failure.
    if ($isAjax) {
        http_response_code(422);
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['ok' => false, 'errors' => $errors], JSON_UNESCAPED_UNICODE);
        exit;
    }
    $status = ['type' => 'error', 'errors' => $errors];
}

if (isset($_GET['sent'])) {
    $status = ['type' => 'success'];
}
?>
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>IELTSDL.com | Học tiếng Anh &amp; luyện thi IELTS online</title>
  <meta name="description" content="IELTSDL.com chia sẻ thông tin, tài liệu, cơ hội học tiếng Anh và dịch vụ luyện thi IELTS online." />
  <meta name="theme-color" content="#1e3a8a" />

  <!-- Social sharing -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="IELTSDL.com | Học tiếng Anh & luyện thi IELTS online" />
  <meta property="og:description" content="Chia sẻ tài liệu, kinh nghiệm học tiếng Anh và dịch vụ luyện thi IELTS online có định hướng." />
  <meta property="og:locale" content="vi_VN" />
  <meta name="twitter:card" content="summary" />

  <!-- Inline SVG favicon -->
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%232563eb'/%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-weight='900' font-size='34' fill='white'%3EI%3C/text%3E%3C/svg%3E" />

  <style>
    :root {
      --blue: #1e3a8a;
      --blue-2: #2563eb;
      --teal: #0f766e;
      --green: #16a34a;
      --orange: #f59e0b;
      --purple: #7c3aed;
      --pink: #db2777;
      --dark: #0f172a;
      --text: #334155;
      --muted: #64748b;
      --soft: #f8fafc;
      --card: rgba(255, 255, 255, 0.84);
      --border: rgba(148, 163, 184, 0.28);
      --shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.16), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(20, 184, 166, 0.14), transparent 30%),
        radial-gradient(circle at 50% 95%, rgba(245, 158, 11, 0.18), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #eef6ff 45%, #f8fafc 100%);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a {
      color: inherit;
    }

    .page-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      width: 0%;
      z-index: 9999;
      background: linear-gradient(90deg, var(--orange), var(--teal), var(--blue-2), var(--purple));
    }

    .bg-orb {
      position: fixed;
      border-radius: 999px;
      filter: blur(8px);
      opacity: 0.42;
      pointer-events: none;
      z-index: -1;
      animation: floatOrb 14s ease-in-out infinite alternate;
    }

    .orb-one {
      width: 260px;
      height: 260px;
      top: 12%;
      left: -70px;
      background: rgba(37, 99, 235, 0.22);
    }

    .orb-two {
      width: 220px;
      height: 220px;
      top: 35%;
      right: -80px;
      background: rgba(245, 158, 11, 0.20);
      animation-delay: 2s;
    }

    .orb-three {
      width: 180px;
      height: 180px;
      bottom: 10%;
      left: 12%;
      background: rgba(124, 58, 237, 0.18);
      animation-delay: 4s;
    }

    @keyframes floatOrb {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(24px, -30px, 0) scale(1.08); }
    }

    .nav {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: min(1120px, calc(100% - 32px));
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(18px);
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      color: var(--dark);
      text-decoration: none;
      letter-spacing: -0.3px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: white;
      background: linear-gradient(135deg, var(--blue-2), var(--teal));
      box-shadow: 0 10px 26px rgba(37, 99, 235, 0.28);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--muted);
      font-weight: 700;
      font-size: 0.92rem;
      padding: 8px 12px;
      border-radius: 999px;
      transition: 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--blue);
      background: rgba(37, 99, 235, 0.09);
    }

    .nav-cta {
      color: white !important;
      background: linear-gradient(135deg, var(--orange), #fb7185) !important;
      box-shadow: 0 10px 24px rgba(245, 158, 11, 0.26);
    }

    .menu-btn {
      display: none;
      border: none;
      background: #eef2ff;
      color: var(--blue);
      border-radius: 999px;
      padding: 9px 13px;
      font-weight: 900;
      cursor: pointer;
    }

    header {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 120px 20px 70px;
      position: relative;
      overflow: hidden;
    }

    .hero {
      width: min(1120px, 100%);
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 42px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid var(--border);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      color: var(--blue);
      font-weight: 800;
      margin-bottom: 22px;
    }

    .pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      70% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
      100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
    }

    h1 {
      font-size: clamp(2.45rem, 6vw, 5.25rem);
      line-height: 1.04;
      color: var(--dark);
      letter-spacing: -2.5px;
      margin-bottom: 24px;
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--blue-2), var(--teal), var(--orange));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      font-size: 1.15rem;
      max-width: 690px;
      color: #475569;
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 26px;
    }

    .btn {
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 900;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    }

    .btn-primary {
      color: white;
      background: linear-gradient(135deg, var(--blue-2), var(--teal));
    }

    .btn-light {
      color: var(--blue);
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid var(--border);
    }

    .btn[disabled] {
      opacity: 0.7;
      cursor: progress;
      transform: none;
      box-shadow: none;
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-top-color: #fff;
      border-radius: 50%;
      display: inline-block;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .hero-note {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      color: var(--muted);
      font-weight: 700;
      font-size: 0.95rem;
    }

    .hero-note span {
      background: rgba(255,255,255,0.78);
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
    }

    .hero-panel {
      position: relative;
      border-radius: 38px;
      padding: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.58));
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: -60px;
      background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,0.18), transparent 28%),
        radial-gradient(circle at 80% 15%, rgba(245,158,11,0.16), transparent 24%),
        radial-gradient(circle at 45% 85%, rgba(20,184,166,0.16), transparent 30%);
      animation: panelGlow 8s ease-in-out infinite alternate;
    }

    @keyframes panelGlow {
      from { transform: rotate(0deg) scale(1); }
      to { transform: rotate(5deg) scale(1.05); }
    }

    .score-card {
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,0.82);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 24px;
      margin-bottom: 16px;
      backdrop-filter: blur(14px);
    }

    .score-card h3 {
      color: var(--dark);
      font-size: 1.35rem;
      margin-bottom: 10px;
    }

    .skill-row {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .skill-bar {
      display: grid;
      gap: 6px;
    }

    .skill-bar-top {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      font-weight: 800;
      color: var(--dark);
    }

    .bar {
      height: 10px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }

    .bar span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--orange), var(--teal), var(--blue-2));
      width: 0;
      transition: width 1.4s ease;
    }

    .mini-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .mini-card {
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 18px;
      transition: 0.25s ease;
    }

    .mini-card:hover {
      transform: translateY(-4px);
      background: white;
    }

    .mini-card strong {
      display: block;
      color: var(--dark);
      font-size: 1.05rem;
      margin-bottom: 4px;
    }

    main {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto 80px;
    }

    section {
      scroll-margin-top: 110px;
    }

    .section {
      padding: 76px 0;
    }

    .section-title {
      max-width: 780px;
      margin-bottom: 34px;
    }

    .section-kicker {
      color: var(--teal);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-size: 0.82rem;
      margin-bottom: 10px;
    }

    h2 {
      color: var(--dark);
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.15;
      letter-spacing: -1.5px;
      margin-bottom: 16px;
    }

    .section-title p {
      color: var(--muted);
      font-size: 1.06rem;
    }

    .glass {
      background: var(--card);
      border: 1px solid rgba(255,255,255,0.78);
      border-radius: 34px;
      padding: 34px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 26px;
      align-items: stretch;
    }

    .about-text p {
      margin-bottom: 16px;
    }

    .highlight-box {
      margin-top: 22px;
      padding: 22px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(255,247,237,0.95), rgba(236,253,245,0.95));
      border: 1px solid rgba(245,158,11,0.28);
    }

    .founder-card {
      display: grid;
      gap: 16px;
      background: linear-gradient(145deg, rgba(30,58,138,0.95), rgba(15,118,110,0.92));
      color: white;
      border-radius: 34px;
      padding: 34px;
      position: relative;
      overflow: hidden;
    }

    .founder-card::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      right: -80px;
      bottom: -80px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
    }

    .founder-card h3 {
      font-size: 1.6rem;
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }

    .founder-card p {
      color: #dbeafe;
      position: relative;
      z-index: 1;
    }

    .stats {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 12px;
    }

    .stat {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 22px;
      padding: 16px;
    }

    .stat strong {
      display: block;
      font-size: 1.7rem;
      line-height: 1;
      color: white;
      margin-bottom: 6px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .feature-card {
      min-height: 260px;
      padding: 28px;
      border-radius: 30px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(255,255,255,0.74);
      box-shadow: 0 18px 50px rgba(15,23,42,0.10);
      transition: 0.28s ease;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: "";
      position: absolute;
      inset: auto -40px -60px auto;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(37, 99, 235, 0.08);
      transition: 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 70px rgba(15,23,42,0.16);
    }

    .feature-card:hover::before {
      transform: scale(1.35);
    }

    .icon {
      width: 62px;
      height: 62px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      font-size: 1.85rem;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #dbeafe, #ccfbf1);
    }

    .feature-card:nth-child(2) .icon {
      background: linear-gradient(135deg, #fef3c7, #fee2e2);
    }

    .feature-card:nth-child(3) .icon {
      background: linear-gradient(135deg, #ede9fe, #fce7f3);
    }

    .feature-card h3 {
      color: var(--dark);
      font-size: 1.35rem;
      margin-bottom: 10px;
    }

    .feature-card p {
      color: var(--muted);
    }

    .tabs {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 24px;
      align-items: start;
    }

    .tab-buttons {
      display: grid;
      gap: 12px;
    }

    .tab-btn {
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.8);
      color: var(--text);
      border-radius: 18px;
      padding: 15px 16px;
      text-align: left;
      cursor: pointer;
      font-weight: 900;
      transition: 0.25s ease;
    }

    .tab-btn:hover,
    .tab-btn.active {
      color: white;
      background: linear-gradient(135deg, var(--blue-2), var(--teal));
      transform: translateX(4px);
      box-shadow: 0 12px 28px rgba(37,99,235,0.18);
    }

    .tab-panel {
      display: none;
      animation: fadeUp 0.4s ease both;
    }

    .tab-panel.active {
      display: block;
    }

    .tab-panel h3 {
      color: var(--dark);
      font-size: 1.75rem;
      margin-bottom: 12px;
    }

    .tab-list {
      margin-top: 18px;
      display: grid;
      gap: 12px;
    }

    .tab-list div {
      padding: 14px 16px;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
    }

    .service-box {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: 26px;
      align-items: center;
      background:
        radial-gradient(circle at 20% 10%, rgba(245,158,11,0.20), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(37,99,235,0.17), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,246,255,0.88));
      border-radius: 38px;
      padding: 38px;
      border: 1px solid rgba(255,255,255,0.78);
      box-shadow: var(--shadow);
    }

    .service-points {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .service-points div {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--border);
    }

    .service-side {
      background: var(--dark);
      color: white;
      border-radius: 30px;
      padding: 28px;
      position: relative;
      overflow: hidden;
    }

    .service-side::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(245,158,11,0.2);
      top: -60px;
      right: -50px;
    }

    .service-side h3 {
      font-size: 1.5rem;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .service-side p {
      color: #cbd5e1;
      position: relative;
      z-index: 1;
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(255,255,255,0.74);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 14px 34px rgba(15,23,42,0.08);
    }

    .faq-question {
      width: 100%;
      border: none;
      background: transparent;
      padding: 20px 22px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      cursor: pointer;
      color: var(--dark);
      font-weight: 900;
      font-size: 1rem;
      text-align: left;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    .faq-answer p {
      padding: 0 22px 22px;
      color: var(--muted);
    }

    .faq-item.open .faq-answer {
      max-height: 260px;
    }

    .faq-icon {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #eef2ff;
      color: var(--blue);
      transition: 0.25s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      color: white;
      background: var(--blue-2);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 26px;
      align-items: stretch;
    }

    .contact-card {
      background: linear-gradient(145deg, var(--blue), var(--teal));
      color: white;
      border-radius: 34px;
      padding: 32px;
      box-shadow: var(--shadow);
    }

    .contact-card h3 {
      font-size: 1.7rem;
      margin-bottom: 12px;
    }

    .contact-card p {
      color: #dbeafe;
      margin-bottom: 18px;
    }

    .email-line {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 18px;
      padding: 14px;
      margin-top: 18px;
    }

    .copy-btn {
      border: none;
      border-radius: 999px;
      padding: 9px 13px;
      cursor: pointer;
      font-weight: 900;
      color: var(--dark);
      background: white;
    }

    form {
      display: grid;
      gap: 14px;
    }

    label {
      font-weight: 900;
      color: var(--dark);
      margin-bottom: 4px;
      display: block;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid #cbd5e1;
      background: rgba(255,255,255,0.9);
      border-radius: 18px;
      padding: 13px 14px;
      font: inherit;
      color: var(--text);
      outline: none;
      transition: 0.2s ease;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue-2);
      box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    }

    textarea {
      min-height: 130px;
      resize: vertical;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    /* Honeypot: hidden from real users, harvested by bots */
    .hp-field {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .form-status {
      display: none;
      padding: 13px 16px;
      border-radius: 16px;
      font-weight: 700;
      line-height: 1.5;
    }

    .form-status.show { display: block; }

    .form-status.success {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }

    .form-status.error {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .page-banner {
      max-width: 780px;
      margin: 0 0 22px;
      padding: 15px 18px;
      border-radius: 18px;
      font-weight: 800;
      box-shadow: 0 14px 34px rgba(15,23,42,0.08);
    }

    .page-banner.success {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }

    .page-banner.error {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      background: var(--dark);
      color: white;
      border-radius: 18px;
      padding: 14px 18px;
      box-shadow: var(--shadow);
      transform: translateY(120px);
      opacity: 0;
      transition: 0.3s ease;
      z-index: 2000;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    footer {
      background: #0f172a;
      color: #cbd5e1;
      padding: 42px 20px;
      text-align: center;
    }

    footer strong {
      color: white;
    }

    .footer-inner {
      max-width: 900px;
      margin: auto;
    }

    .back-top {
      position: fixed;
      right: 22px;
      bottom: 88px;
      width: 46px;
      height: 46px;
      border-radius: 999px;
      border: none;
      color: white;
      background: linear-gradient(135deg, var(--blue-2), var(--teal));
      box-shadow: 0 14px 34px rgba(15,23,42,0.18);
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      transition: 0.25s ease;
      z-index: 999;
    }

    .back-top.show {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 920px) {
      .nav {
        border-radius: 24px;
        align-items: flex-start;
      }

      .menu-btn {
        display: block;
      }

      .nav-links {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255,255,255,0.95);
        box-shadow: var(--shadow);
      }

      .nav-links.open {
        display: flex;
      }

      .hero,
      .about-grid,
      .tabs,
      .service-box,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 40px;
      }
    }

    @media (max-width: 620px) {
      .mini-grid,
      .stats,
      .form-row {
        grid-template-columns: 1fr;
      }

      h1 {
        letter-spacing: -1.4px;
      }

      .glass,
      .service-box {
        padding: 24px;
        border-radius: 28px;
      }

      .section {
        padding: 54px 0;
      }
    }
  </style>
</head>

<body>
  <div class="page-progress" id="pageProgress"></div>
  <div class="bg-orb orb-one"></div>
  <div class="bg-orb orb-two"></div>
  <div class="bg-orb orb-three"></div>

  <nav class="nav">
    <a class="brand" href="#top" aria-label="IELTSDL home">
      <span class="brand-mark">I</span>
      <span>IELTSDL.com</span>
    </a>

    <button class="menu-btn" id="menuBtn" aria-label="Mở menu">☰</button>

    <div class="nav-links" id="navLinks">
      <a href="#about">Giới thiệu</a>
      <a href="#resources">Tài nguyên</a>
      <a href="#skills">Kỹ năng IELTS</a>
      <a href="#online">Học online</a>
      <a href="#faq">FAQ</a>
      <a class="nav-cta" href="#contact">Liên hệ</a>
    </div>
  </nav>

  <header id="top">
    <div class="hero">
      <div class="hero-copy reveal">
        <div class="eyebrow">
          <span class="pulse-dot"></span>
          Dịch vụ luyện thi IELTS online hiện có sẵn
        </div>

        <h1>
          Học tiếng Anh tốt hơn. <br />
          Luyện IELTS <span class="gradient-text">thực tế hơn.</span>
        </h1>

        <p>
          IELTSDL.com là không gian chia sẻ thông tin, tài liệu, kinh nghiệm học tiếng Anh
          và luyện thi IELTS. Trang web hướng đến việc kết nối người học, giáo viên,
          sinh viên và những ai đang cần sử dụng tiếng Anh cho học tập, công việc
          và giao tiếp quốc tế.
        </p>

        <div class="hero-actions">
          <a class="btn btn-primary" href="#online">Khám phá học IELTS online →</a>
          <a class="btn btn-light" href="#resources">Xem tài nguyên miễn phí</a>
        </div>

        <div class="hero-note">
          <span>📘 IELTS Listening · Reading · Writing · Speaking</span>
          <span>🌏 Tiếng Anh học thuật &amp; thực tế</span>
        </div>
      </div>

      <div class="hero-panel reveal">
        <div class="score-card">
          <h3>Lộ trình học có định hướng</h3>
          <p>
            Tập trung vào năng lực thật, chiến lược làm bài và cách dùng tiếng Anh
            trong môi trường học thuật, công việc và đời sống.
          </p>

          <div class="skill-row">
            <div class="skill-bar">
              <div class="skill-bar-top"><span>Writing clarity</span><span>85%</span></div>
              <div class="bar"><span data-width="85%"></span></div>
            </div>

            <div class="skill-bar">
              <div class="skill-bar-top"><span>Speaking confidence</span><span>80%</span></div>
              <div class="bar"><span data-width="80%"></span></div>
            </div>

            <div class="skill-bar">
              <div class="skill-bar-top"><span>Reading strategy</span><span>90%</span></div>
              <div class="bar"><span data-width="90%"></span></div>
            </div>
          </div>
        </div>

        <div class="mini-grid">
          <div class="mini-card">
            <strong>Online</strong>
            <span>Học linh hoạt, phù hợp mục tiêu cá nhân.</span>
          </div>
          <div class="mini-card">
            <strong>Practical</strong>
            <span>Không chỉ học mẹo, mà phát triển năng lực thật.</span>
          </div>
          <div class="mini-card">
            <strong>Academic</strong>
            <span>Hỗ trợ tiếng Anh học thuật và IELTS Writing.</span>
          </div>
          <div class="mini-card">
            <strong>Connected</strong>
            <span>Chia sẻ cơ hội học tập, tài liệu và cộng đồng.</span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <section class="section" id="about">
      <div class="section-title reveal">
        <div class="section-kicker">Về IELTSDL.com</div>
        <h2>Một không gian học IELTS thân thiện, thực tế và có định hướng</h2>
        <p>
          IELTSDL.com được xây dựng để giúp người học tiếp cận IELTS không chỉ như
          một kỳ thi, mà còn như một hành trình phát triển năng lực tiếng Anh bền vững.
        </p>
      </div>

      <div class="about-grid">
        <div class="glass about-text reveal">
          <p>
            Trong quá trình học tiếng Anh, nhiều người học thường gặp khoảng cách giữa
            kiến thức trên lớp, bài luyện thi và khả năng sử dụng tiếng Anh trong đời sống thật.
            IELTSDL.com mong muốn thu hẹp khoảng cách đó bằng cách chia sẻ tài liệu, hướng dẫn
            học tập, kinh nghiệm luyện thi và các cơ hội học tiếng Anh phù hợp.
          </p>

          <p>
            Trang web không khuyến khích học IELTS theo kiểu học mẹo máy móc. Thay vào đó,
            nội dung trên website hướng đến việc giúp người học hiểu cách đọc, nghe, nói và viết
            một cách rõ ràng, có chiến lược và gần hơn với nhu cầu sử dụng tiếng Anh thực tế.
          </p>

          <div class="highlight-box">
            <strong>Sứ mệnh:</strong> Kết nối cộng đồng người học tiếng Anh, chia sẻ tri thức,
            tài liệu và cơ hội học tập, đồng thời hỗ trợ người học luyện thi IELTS theo cách
            thực tế, có hệ thống và bền vững.
          </div>
        </div>

        <div class="founder-card reveal">
          <h3>Được phát triển với tinh thần chia sẻ tri thức</h3>
          <p>
            IELTSDL.com được sáng lập bởi Dr. Ngo Cong-Lem, với mong muốn tạo ra một
            kênh thông tin hữu ích cho người học tiếng Anh, sinh viên, giáo viên và cộng đồng
            luyện thi IELTS.
          </p>

          <div class="stats">
            <div class="stat">
              <strong data-counter="4">0</strong>
              <span>Kỹ năng IELTS</span>
            </div>
            <div class="stat">
              <strong><span data-counter="100">0</span>%</strong>
              <span>Định hướng thực tế</span>
            </div>
            <div class="stat">
              <strong><span data-counter="24">0</span>/7</strong>
              <span>Học online linh hoạt</span>
            </div>
            <div class="stat">
              <strong data-counter="1">0</strong>
              <span>Cộng đồng kết nối</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="resources">
      <div class="section-title reveal">
        <div class="section-kicker">Tài nguyên học tập</div>
        <h2>Học IELTS bằng tài liệu rõ ràng, gần gũi và dễ áp dụng</h2>
        <p>
          Website sẽ từng bước phát triển các bài viết, hướng dẫn và tài liệu tự học
          giúp người học hiểu IELTS một cách có hệ thống hơn.
        </p>
      </div>

      <div class="cards">
        <article class="feature-card reveal">
          <div class="icon">📘</div>
          <h3>Tài liệu học IELTS</h3>
          <p>
            Chia sẻ tài liệu, bài mẫu, hướng dẫn học từ vựng, ngữ pháp, đọc hiểu,
            nghe, nói và viết theo hướng dễ hiểu, dễ tự học và phù hợp với người học Việt Nam.
          </p>
        </article>

        <article class="feature-card reveal">
          <div class="icon">🎯</div>
          <h3>Định hướng luyện thi</h3>
          <p>
            Gợi ý cách xây dựng lộ trình học IELTS, đặt mục tiêu điểm số, phân bổ thời gian,
            theo dõi tiến bộ và tránh học lan man.
          </p>
        </article>

        <article class="feature-card reveal">
          <div class="icon">🌏</div>
          <h3>Tiếng Anh thực tế</h3>
          <p>
            Kết nối việc luyện thi IELTS với nhu cầu sử dụng tiếng Anh thật trong học tập,
            công việc, nghiên cứu và giao tiếp quốc tế.
          </p>
        </article>
      </div>
    </section>

    <section class="section" id="skills">
      <div class="section-title reveal">
        <div class="section-kicker">IELTS Skills</div>
        <h2>Chọn kỹ năng bạn muốn cải thiện</h2>
        <p>
          Mỗi kỹ năng IELTS cần một chiến lược khác nhau. Phần tương tác này giúp người học
          hình dung rõ hơn cần tập trung vào đâu.
        </p>
      </div>

      <div class="glass tabs reveal">
        <div class="tab-buttons">
          <button class="tab-btn active" data-tab="listening">🎧 Listening</button>
          <button class="tab-btn" data-tab="reading">📖 Reading</button>
          <button class="tab-btn" data-tab="writing">✍️ Writing</button>
          <button class="tab-btn" data-tab="speaking">🗣️ Speaking</button>
        </div>

        <div>
          <div class="tab-panel active" id="listening">
            <h3>IELTS Listening</h3>
            <p>
              Listening không chỉ là nghe nhiều, mà là học cách nhận diện thông tin,
              dự đoán ngữ cảnh, theo dõi tín hiệu chuyển ý và tránh bị mất nhịp khi bài nghe tiếp tục.
            </p>
            <div class="tab-list">
              <div>Nhận diện từ khóa và paraphrase trong câu hỏi.</div>
              <div>Luyện nghe theo từng dạng câu hỏi thay vì chỉ làm đề liên tục.</div>
              <div>Phân tích lỗi sau khi nghe để biết mình sai vì từ vựng, tốc độ hay chiến lược.</div>
            </div>
          </div>

          <div class="tab-panel" id="reading">
            <h3>IELTS Reading</h3>
            <p>
              Reading cần sự kết hợp giữa vốn từ, kỹ năng định vị thông tin và khả năng hiểu cách
              tác giả tổ chức ý trong văn bản học thuật.
            </p>
            <div class="tab-list">
              <div>Phân biệt skimming, scanning và đọc sâu.</div>
              <div>Luyện kỹ năng xử lý True/False/Not Given, Matching Headings và Multiple Choice.</div>
              <div>Ghi chú các cách diễn đạt tương đương để nâng cao khả năng nhận diện paraphrase.</div>
            </div>
          </div>

          <div class="tab-panel" id="writing">
            <h3>IELTS Writing</h3>
            <p>
              Writing cần phát triển tư duy lập luận, tổ chức đoạn văn, độ chính xác ngôn ngữ
              và khả năng diễn đạt ý tưởng một cách tự nhiên, mạch lạc.
            </p>
            <div class="tab-list">
              <div>Hiểu rõ tiêu chí Task Response, Coherence and Cohesion, Lexical Resource và Grammar.</div>
              <div>Luyện viết đoạn văn có topic sentence, giải thích, ví dụ và kết nối ý rõ ràng.</div>
              <div>Sửa bài theo lỗi hệ thống thay vì chỉ sửa từng câu riêng lẻ.</div>
            </div>
          </div>

          <div class="tab-panel" id="speaking">
            <h3>IELTS Speaking</h3>
            <p>
              Speaking không phải là học thuộc câu trả lời, mà là xây dựng khả năng phản hồi linh hoạt,
              mở rộng ý và giao tiếp tự tin trong tình huống phỏng vấn.
            </p>
            <div class="tab-list">
              <div>Luyện phát triển câu trả lời theo ý chính, chi tiết, ví dụ và cảm nhận cá nhân.</div>
              <div>Phát triển vốn từ theo chủ đề nhưng tránh dùng cụm từ quá máy móc.</div>
              <div>Tập nói tự nhiên, có nhịp, có nối ý và có khả năng sửa lỗi khi đang nói.</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="online">
      <div class="service-box reveal">
        <div>
          <div class="section-kicker">Online tutoring service</div>
          <h2>Dịch vụ luyện thi IELTS online</h2>
          <p>
            Bên cạnh việc chia sẻ thông tin và tài liệu học tập, IELTSDL.com hiện có
            dịch vụ luyện thi IELTS online dành cho người học cần được hỗ trợ có định hướng hơn.
          </p>

          <div class="service-points">
            <div><span>✅</span><p>Học linh hoạt theo thời gian và nhu cầu cá nhân.</p></div>
            <div><span>✅</span><p>Hỗ trợ theo mục tiêu: nâng band, sửa Writing, luyện Speaking hoặc xây nền tảng.</p></div>
            <div><span>✅</span><p>Kết hợp chiến lược làm bài với phát triển năng lực tiếng Anh thực tế.</p></div>
          </div>

          <br />
          <a class="btn btn-primary" href="#contact">Liên hệ tư vấn học online</a>
        </div>

        <div class="service-side">
          <h3>Phù hợp với người học muốn tiến bộ có lộ trình</h3>
          <p>
            Bạn có thể gửi liên hệ để trao đổi thêm về trình độ hiện tại, mục tiêu IELTS,
            kỹ năng cần cải thiện và hình thức học phù hợp.
          </p>
          <br />
          <p><strong>Email:</strong> ieltsdalat@gmail.com</p>
        </div>
      </div>
    </section>

    <section class="section" id="faq">
      <div class="section-title reveal">
        <div class="section-kicker">Câu hỏi thường gặp</div>
        <h2>Những điều người học thường muốn biết</h2>
      </div>

      <div class="faq-list reveal">
        <div class="faq-item open">
          <button class="faq-question">
            IELTSDL.com có phải chỉ là website chia sẻ tài liệu không?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            <p>
              Không chỉ vậy. Trang web chia sẻ tài liệu, thông tin học tập, kinh nghiệm luyện thi
              và hiện có thêm dịch vụ luyện thi IELTS online cho người học cần hỗ trợ cá nhân hóa hơn.
            </p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            Tôi mới bắt đầu học IELTS thì có phù hợp không?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            <p>
              Có. Nội dung trên website hướng đến cả người mới bắt đầu và người đã có nền tảng,
              với mục tiêu giúp người học hiểu rõ lộ trình, kỹ năng và cách học phù hợp.
            </p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            Dịch vụ học online có thể tập trung vào một kỹ năng riêng không?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            <p>
              Có. Người học có thể trao đổi nhu cầu cụ thể, ví dụ luyện Speaking, sửa Writing,
              phát triển Reading strategy hoặc xây dựng nền tảng tiếng Anh học thuật.
            </p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            Làm thế nào để liên hệ?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            <p>
              Bạn có thể gửi email đến ieltsdalat@gmail.com hoặc điền form liên hệ ở cuối trang.
              Form sẽ gửi trực tiếp nội dung đến hộp thư của IELTSDL.com và bạn sẽ thấy thông báo
              xác nhận ngay trên trang.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="contact">
      <div class="section-title reveal">
        <div class="section-kicker">Liên hệ</div>
        <h2>Bắt đầu trao đổi về việc học IELTS online</h2>
        <p>
          Gửi thông tin ngắn gọn về mục tiêu học tập, kỹ năng cần cải thiện và thời gian học phù hợp.
        </p>

        <?php if (!empty($status) && $status['type'] === 'success'): ?>
          <div class="page-banner success" role="status">✅ Cảm ơn bạn! Liên hệ đã được gửi thành công. Chúng tôi sẽ phản hồi sớm.</div>
        <?php elseif (!empty($status) && $status['type'] === 'error'): ?>
          <div class="page-banner error" role="alert">⚠️ <?php echo htmlspecialchars(implode(' ', $status['errors']), ENT_QUOTES, 'UTF-8'); ?></div>
        <?php endif; ?>
      </div>

      <div class="contact-grid">
        <div class="contact-card reveal">
          <h3>Liên hệ IELTSDL.com</h3>
          <p>
            Để trao đổi thêm về tài liệu học IELTS, cơ hội học tập hoặc dịch vụ luyện thi IELTS online,
            vui lòng điền form hoặc liên hệ qua email.
          </p>

          <div class="email-line">
            <span>📧 <strong id="emailText">ieltsdalat@gmail.com</strong></span>
            <button class="copy-btn" id="copyEmail" type="button">Copy email</button>
          </div>

          <br />
          <p>
            Khi liên hệ, bạn nên ghi rõ trình độ hiện tại, mục tiêu điểm IELTS,
            thời gian mong muốn và kỹ năng bạn cần hỗ trợ nhất.
          </p>
        </div>

        <div class="glass reveal">
          <form id="contactForm" method="post" action="" novalidate>
            <!-- Honeypot (spam trap) -->
            <div class="hp-field" aria-hidden="true">
              <label for="company">Company</label>
              <input id="company" name="company" type="text" tabindex="-1" autocomplete="off" />
            </div>
            <input type="hidden" id="ajaxFlag" name="ajax" value="" />

            <div class="form-row">
              <div>
                <label for="name">Họ và tên</label>
                <input id="name" name="name" type="text" placeholder="Ví dụ: Nguyễn An" required />
              </div>

              <div>
                <label for="goal">Mục tiêu IELTS</label>
                <select id="goal" name="goal">
                  <option value="Chưa xác định">Chưa xác định</option>
                  <option value="IELTS 5.5">IELTS 5.5</option>
                  <option value="IELTS 6.0">IELTS 6.0</option>
                  <option value="IELTS 6.5">IELTS 6.5</option>
                  <option value="IELTS 7.0+">IELTS 7.0+</option>
                </select>
              </div>
            </div>

            <div class="form-row">
              <div>
                <label for="skill">Kỹ năng cần hỗ trợ</label>
                <select id="skill" name="skill">
                  <option value="Tất cả kỹ năng">Tất cả kỹ năng</option>
                  <option value="Listening">Listening</option>
                  <option value="Reading">Reading</option>
                  <option value="Writing">Writing</option>
                  <option value="Speaking">Speaking</option>
                </select>
              </div>

              <div>
                <label for="email">Email của bạn</label>
                <input id="email" name="email" type="email" placeholder="email@example.com" required />
              </div>
            </div>

            <div>
              <label for="message">Nội dung cần trao đổi</label>
              <textarea id="message" name="message" placeholder="Ví dụ: Em muốn luyện IELTS Writing trong 2 tháng để đạt 6.5..." required></textarea>
            </div>

            <div id="formStatus" class="form-status" role="status" aria-live="polite"></div>

            <button class="btn btn-primary" id="submitBtn" type="submit">Gửi liên hệ →</button>
          </form>
        </div>
      </div>
    </section>
  </main>

  <button class="back-top" id="backTop" aria-label="Quay lên đầu trang">↑</button>

  <div class="toast" id="toast">Đã sao chép email.</div>

  <footer>
    <div class="footer-inner">
      <p><strong>IELTSDL.com</strong> · Chia sẻ thông tin học tiếng Anh và luyện thi IELTS</p>
      <p>Dịch vụ luyện thi IELTS online hiện có sẵn.</p>
      <p>Liên hệ: <strong>ieltsdalat@gmail.com</strong></p>
    </div>
  </footer>

  <script>
    const menuBtn = document.getElementById("menuBtn");
    const navLinks = document.getElementById("navLinks");
    const pageProgress = document.getElementById("pageProgress");
    const backTop = document.getElementById("backTop");
    const toast = document.getElementById("toast");

    menuBtn.addEventListener("click", () => {
      navLinks.classList.toggle("open");
    });

    document.querySelectorAll(".nav-links a").forEach(link => {
      link.addEventListener("click", () => navLinks.classList.remove("open"));
    });

    window.addEventListener("scroll", () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
      pageProgress.style.width = progress + "%";

      if (scrollTop > 500) {
        backTop.classList.add("show");
      } else {
        backTop.classList.remove("show");
      }
    });

    backTop.addEventListener("click", () => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    });

    const revealItems = document.querySelectorAll(".reveal");
    const revealObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
        }
      });
    }, { threshold: 0.14 });

    revealItems.forEach(item => revealObserver.observe(item));

    const barObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.querySelectorAll(".bar span").forEach(bar => {
            bar.style.width = bar.dataset.width;
          });
        }
      });
    }, { threshold: 0.35 });

    document.querySelectorAll(".hero-panel").forEach(panel => barObserver.observe(panel));

    const counters = document.querySelectorAll("[data-counter]");
    const counterObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;

        const el = entry.target;
        const target = Number(el.dataset.counter);
        let current = 0;
        const steps = 35;
        const increment = Math.max(1, Math.ceil(target / steps));

        const timer = setInterval(() => {
          current += increment;
          if (current >= target) {
            el.textContent = target;
            clearInterval(timer);
          } else {
            el.textContent = current;
          }
        }, 28);

        counterObserver.unobserve(el);
      });
    }, { threshold: 0.5 });

    counters.forEach(counter => counterObserver.observe(counter));

    const tabButtons = document.querySelectorAll(".tab-btn");
    const tabPanels = document.querySelectorAll(".tab-panel");

    tabButtons.forEach(button => {
      button.addEventListener("click", () => {
        tabButtons.forEach(btn => btn.classList.remove("active"));
        tabPanels.forEach(panel => panel.classList.remove("active"));

        button.classList.add("active");
        document.getElementById(button.dataset.tab).classList.add("active");
      });
    });

    document.querySelectorAll(".faq-question").forEach(question => {
      question.addEventListener("click", () => {
        const item = question.closest(".faq-item");
        item.classList.toggle("open");
      });
    });

    function showToast(message) {
      toast.textContent = message;
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2200);
    }

    document.getElementById("copyEmail").addEventListener("click", async () => {
      const email = document.getElementById("emailText").textContent.trim();

      try {
        await navigator.clipboard.writeText(email);
        showToast("Đã sao chép email.");
      } catch (error) {
        showToast("Email: " + email);
      }
    });

    // --- Contact form: AJAX submit to PHP mailer (no-JS falls back to normal POST) ---
    const form = document.getElementById("contactForm");
    const formStatus = document.getElementById("formStatus");
    const submitBtn = document.getElementById("submitBtn");
    const ajaxFlag = document.getElementById("ajaxFlag");

    // Mark this as a JS-enabled (AJAX) submission so the server returns JSON.
    if (ajaxFlag) ajaxFlag.value = "1";

    form.addEventListener("submit", async event => {
      event.preventDefault();

      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }

      const formData = new FormData(form);
      formData.set("ajax", "1");

      const originalLabel = submitBtn.innerHTML;
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<span class="spinner"></span> Đang gửi...';
      formStatus.className = "form-status";

      try {
        const response = await fetch(window.location.pathname, {
          method: "POST",
          headers: { "X-Requested-With": "XMLHttpRequest" },
          body: formData
        });

        const data = await response.json().catch(() => ({}));

        if (response.ok && data.ok) {
          formStatus.textContent = data.message || "Cảm ơn bạn! Liên hệ đã được gửi thành công.";
          formStatus.className = "form-status success show";
          form.reset();
          showToast("Đã gửi liên hệ thành công.");
        } else {
          const msg = (data.errors && data.errors.join(" ")) || "Gửi không thành công. Vui lòng thử lại.";
          formStatus.textContent = msg;
          formStatus.className = "form-status error show";
          showToast("Gửi liên hệ thất bại.");
        }
      } catch (error) {
        formStatus.textContent = "Lỗi kết nối. Vui lòng thử lại hoặc gửi email tới ieltsdalat@gmail.com.";
        formStatus.className = "form-status error show";
      } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalLabel;
      }
    });
  </script>
</body>
</html>