/* =========================================================================
   INVOCOURSE — Modern learning homepage
   ========================================================================= */
:root{
    --e-primary:#4f7cff;
    --e-primary-d:#3a63e6;
    --e-accent:#22e16f;
    --e-grad:linear-gradient(135deg,#22e16f 0%,#4f7cff 100%);
    --e-ink:#1d2440;
    --e-muted:#6b7385;
    --e-bg:#ffffff;
    --e-soft:#f5f8ff;
    --e-line:#e9edf6;
    --e-radius:18px;
    --e-shadow:0 10px 30px rgba(29,36,64,.08);
    --e-shadow-sm:0 4px 14px rgba(29,36,64,.06);
    --e-font:'Be Vietnam Pro',-apple-system,Segoe UI,Roboto,sans-serif;
}

/* base tweaks scoped to new components */
.edu-container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.edu-hero *,.edu-section *,.edu-nav *,.edu-cta *,.edu-footer *{ box-sizing:border-box; }
.edu-hero,.edu-section,.edu-cta,.edu-nav,.edu-footer{ font-family:var(--e-font); color:var(--e-ink); }

/* ---------------- Buttons ---------------- */
.edu-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 22px; border-radius:12px; font-weight:600; font-size:15px;
    text-decoration:none; cursor:pointer; border:2px solid transparent;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space:nowrap;
}
.edu-btn--lg{ padding:14px 28px; font-size:16px; }
.edu-btn--primary{ background:var(--e-primary); color:#fff; box-shadow:0 8px 20px rgba(79,124,255,.32); }
.edu-btn--primary:hover{ background:var(--e-primary-d); color:#fff; transform:translateY(-2px); }
.edu-btn--ghost{ background:#eef3ff; color:var(--e-primary); }
.edu-btn--ghost:hover{ background:#e0e9ff; color:var(--e-primary); }
.edu-btn--soft{ background:#fff; color:var(--e-ink); border-color:var(--e-line); }
.edu-btn--soft:hover{ border-color:var(--e-primary); color:var(--e-primary); }
.edu-btn--light{ background:#fff; color:var(--e-primary); }
.edu-btn--light:hover{ transform:translateY(-2px); color:var(--e-primary-d); }
.edu-btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.edu-btn--outline-light:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------------- Navbar ---------------- */
.edu-nav{
    position:sticky; top:0; z-index:1000; background:#fff;
    border-bottom:1px solid transparent; transition:box-shadow .2s ease, border-color .2s ease;
}
.edu-nav.is-scrolled{ box-shadow:var(--e-shadow-sm); border-color:var(--e-line); }
.edu-nav__inner{ display:flex; align-items:center; height:72px; gap:20px; }
.edu-logo{ display:flex; align-items:center; flex-shrink:0; }
.edu-logo img{ height:34px; width:auto; }
.edu-menu{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.edu-menu > a{
    color:var(--e-ink); text-decoration:none; font-weight:500; font-size:15px;
    padding:9px 14px; border-radius:10px; transition:color .15s ease, background .15s ease;
}
.edu-menu > a:hover{ color:var(--e-primary); background:var(--e-soft); }
.edu-menu__actions{ display:flex; align-items:center; gap:10px; margin-left:14px; }
/* Menu con (dropdown) */
.edu-menu__group{ position:relative; }
.edu-menu__group > a{ color:var(--e-ink); text-decoration:none; font-weight:500; font-size:15px; padding:9px 14px; border-radius:10px; display:inline-flex; align-items:center; gap:5px; transition:color .15s ease, background .15s ease; cursor:pointer; }
.edu-menu__group > a:hover{ color:var(--e-primary); background:var(--e-soft); }
.edu-menu__caret{ font-size:9px; }
.edu-menu__sub{ display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:190px; background:#fff; border:1px solid var(--e-line); border-radius:12px; box-shadow:var(--e-shadow); padding:6px; z-index:80; }
.edu-menu__group:hover .edu-menu__sub{ display:block; }
.edu-menu__sub a{ display:block; padding:9px 12px; border-radius:8px; color:var(--e-ink); text-decoration:none; font-size:14px; }
.edu-menu__sub a:hover{ background:var(--e-soft); color:var(--e-primary); }
@media (max-width:900px){
    .edu-menu__group{ width:100%; }
    .edu-menu__sub{ position:static; display:block; box-shadow:none; border:none; padding:2px 0 2px 14px; min-width:0; }
}
.edu-logout-form{ margin:0; }
.edu-burger{
    display:none; flex-direction:column; gap:5px; background:none; border:0;
    padding:8px; margin-left:auto; cursor:pointer;
}
.edu-burger span{ width:26px; height:3px; background:var(--e-ink); border-radius:3px; transition:.25s; }
.edu-nav__backdrop{ display:none; }

/* ---------------- Hero ---------------- */
.edu-hero{
    background:
        radial-gradient(1200px 400px at 15% -10%, rgba(34,225,111,.10), transparent 60%),
        radial-gradient(1000px 420px at 90% 0%, rgba(79,124,255,.12), transparent 55%),
        var(--e-soft);
    padding:64px 0 72px;
    overflow:hidden;
}
.edu-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.edu-badge{
    display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
    color:var(--e-primary); background:#e9f0ff; padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.edu-hero__title{ font-size:46px; line-height:1.12; font-weight:800; letter-spacing:-.5px; margin:0 0 16px; }
.edu-hero__title span{ background:var(--e-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.edu-hero__desc{ font-size:17px; color:var(--e-muted); line-height:1.7; margin:0 0 26px; max-width:520px; }
.edu-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.edu-hero__stats{ display:flex; gap:34px; margin-top:34px; }
.edu-stat strong{ display:block; font-size:30px; font-weight:800; color:var(--e-ink); line-height:1; }
.edu-stat span{ font-size:14px; color:var(--e-muted); }

.edu-hero__visual{ position:relative; display:flex; justify-content:center; }
.edu-hero__visual img{ position:relative; z-index:1; width:100%; max-width:440px; border-radius:24px; }
.edu-hero__blob{
    position:absolute; inset:auto; width:420px; height:420px; border-radius:42% 58% 55% 45%/48% 44% 56% 52%;
    background:var(--e-grad); opacity:.16; filter:blur(6px); z-index:0;
    animation:eduBlob 9s ease-in-out infinite alternate;
}
@keyframes eduBlob{ from{ transform:rotate(0) scale(1);} to{ transform:rotate(18deg) scale(1.06);} }
.edu-hero__chip{
    position:absolute; z-index:2; background:#fff; box-shadow:var(--e-shadow);
    border-radius:14px; padding:10px 14px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
}
.edu-hero__chip i{ color:var(--e-accent); }
.edu-hero__chip--1{ top:24px; left:0; }
.edu-hero__chip--2{ bottom:26px; right:0; }
.edu-hero__chip--2 i{ color:var(--e-primary); }

/* ---------------- Sections ---------------- */
.edu-section{ padding:64px 0; }
.edu-section--alt{ background:var(--e-soft); }
.edu-heading{ text-align:center; max-width:620px; margin:0 auto 40px; }
.edu-heading--left,.edu-heading--row{ text-align:left; margin-left:0; }
.edu-heading--row{ display:flex; align-items:flex-end; justify-content:space-between; max-width:none; gap:16px; }
.edu-heading__eyebrow{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--e-primary); margin-bottom:8px;
}
.edu-heading__title{ font-size:32px; font-weight:800; margin:0 0 10px; letter-spacing:-.4px; }
.edu-heading__title--sm{ font-size:24px; }
.edu-heading__sub{ color:var(--e-muted); font-size:16px; line-height:1.6; margin:0; }
.edu-empty{ text-align:center; color:var(--e-muted); padding:24px; }

/* ---------------- Category cards ---------------- */
.edu-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.edu-cat-card{
    display:flex; align-items:center; gap:14px; padding:18px; background:#fff;
    border:1px solid var(--e-line); border-radius:var(--e-radius); text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.edu-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--e-shadow); border-color:transparent; }
.edu-cat-card__icon{
    width:52px; height:52px; flex-shrink:0; border-radius:14px; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.edu-cat-card__body h3{ font-size:16px; font-weight:700; margin:0 0 4px; color:var(--e-ink); }
.edu-cat-card__link{ font-size:13px; font-weight:600; color:var(--e-primary); display:inline-flex; align-items:center; gap:5px; }
.edu-cat-card:hover .edu-cat-card__link i{ transform:translateX(3px); }
.edu-cat-card__link i{ transition:transform .18s ease; }

/* IELTS cards trên trang chủ */
#ielts .edu-cat-card{ align-items:flex-start; }
#ielts .edu-cat-card__body{ min-width:0; }
.edu-ielts-badge{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--e-primary); background:#e9f0ff; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.edu-ielts-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--e-muted); margin:2px 0 10px; }
.edu-ielts-meta i{ color:var(--e-primary); margin-right:4px; }

/* accents */
.edu-accent-0 .edu-cat-card__icon,.edu-accent-0.edu-feature__icon,.edu-feature__icon.edu-accent-0{ background:linear-gradient(135deg,#4f7cff,#6aa0ff); }
.edu-accent-1 .edu-cat-card__icon,.edu-feature__icon.edu-accent-1{ background:linear-gradient(135deg,#22e16f,#0fb673); }
.edu-accent-2 .edu-cat-card__icon,.edu-feature__icon.edu-accent-2{ background:linear-gradient(135deg,#ff922b,#ffb545); }
.edu-accent-3 .edu-cat-card__icon,.edu-feature__icon.edu-accent-3{ background:linear-gradient(135deg,#f0568c,#ff7aa8); }
.edu-accent-4 .edu-cat-card__icon{ background:linear-gradient(135deg,#9b6bff,#b98bff); }
.edu-accent-5 .edu-cat-card__icon{ background:linear-gradient(135deg,#00b8d9,#4fd1e6); }

/* ---------------- Course cards ---------------- */
.edu-courses{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.edu-course-card{
    background:#fff; border:1px solid var(--e-line); border-radius:var(--e-radius); overflow:hidden;
    text-decoration:none; display:flex; flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.edu-course-card:hover{ transform:translateY(-5px); box-shadow:var(--e-shadow); border-color:transparent; }
.edu-course-card__thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.edu-course-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.edu-course-card:hover .edu-course-card__thumb img{ transform:scale(1.06); }
.edu-course-card__tag{
    position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--e-primary);
    font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:5px;
}
.edu-course-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.edu-course-card__title{
    font-size:16px; font-weight:700; color:var(--e-ink); margin:0 0 8px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.edu-course-card__desc{
    font-size:14px; color:var(--e-muted); line-height:1.55; margin:0 0 14px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.edu-course-card__cta{ margin-top:auto; font-size:14px; font-weight:600; color:var(--e-primary); display:inline-flex; align-items:center; gap:6px; }
.edu-course-card:hover .edu-course-card__cta i{ transform:translateX(3px); }
.edu-course-card__cta i{ transition:transform .18s ease; }

/* ---------------- Features ---------------- */
.edu-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.edu-feature{
    background:#fff; border:1px solid var(--e-line); border-radius:var(--e-radius); padding:26px 22px;
    transition:transform .18s ease, box-shadow .18s ease;
}
.edu-feature:hover{ transform:translateY(-4px); box-shadow:var(--e-shadow); }
.edu-feature__icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; margin-bottom:16px; }
.edu-feature h3{ font-size:17px; font-weight:700; margin:0 0 8px; }
.edu-feature p{ font-size:14px; color:var(--e-muted); line-height:1.6; margin:0; }

/* ---------------- Steps ---------------- */
.edu-steps{ display:flex; align-items:stretch; gap:18px; margin-top:44px; }
.edu-step{ flex:1; background:#fff; border:1px solid var(--e-line); border-radius:var(--e-radius); padding:26px 22px; text-align:center; }
.edu-step__num{
    width:46px; height:46px; margin:0 auto 14px; border-radius:50%; background:var(--e-grad); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px;
}
.edu-step h3{ font-size:17px; font-weight:700; margin:0 0 8px; }
.edu-step p{ font-size:14px; color:var(--e-muted); line-height:1.6; margin:0; }
.edu-step__arrow{ display:flex; align-items:center; color:#c3ccdd; font-size:22px; }

/* ---------------- Reviews ---------------- */
.edu-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.edu-review{ background:#fff; border:1px solid var(--e-line); border-radius:var(--e-radius); padding:26px; margin:0; box-shadow:var(--e-shadow-sm); }
.edu-review__stars{ color:#ffb400; letter-spacing:2px; margin-bottom:12px; }
.edu-review blockquote{ margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--e-ink); }
.edu-review figcaption{ display:flex; align-items:center; gap:12px; }
.edu-review figcaption img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.edu-review figcaption strong{ display:block; font-size:15px; }
.edu-review figcaption span{ font-size:13px; color:var(--e-muted); }

/* ---------------- CTA ---------------- */
.edu-cta{ padding:66px 0; background:var(--e-grad); color:#fff; }
.edu-cta__inner{ text-align:center; }
.edu-cta h2{ font-size:32px; font-weight:800; margin:0 0 12px; }
.edu-cta p{ font-size:17px; opacity:.94; margin:0 0 26px; }
.edu-cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Footer ---------------- */
.edu-footer{ background:#0f1830; color:#c3ccdd; font-family:var(--e-font); }
.edu-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px; padding:56px 20px 36px; }
.edu-footer__brand img{ margin-bottom:14px; filter:brightness(0) invert(1); opacity:.95; }
.edu-footer__brand p{ font-size:14px; line-height:1.7; color:#9aa5bd; margin:0 0 16px; max-width:320px; }
.edu-footer__social{ display:flex; gap:10px; }
.edu-footer__social a{
    width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:#fff;
    display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .18s ease;
}
.edu-footer__social a:hover{ background:var(--e-primary); }
.edu-footer__col h4{ color:#fff; font-size:15px; font-weight:700; margin:0 0 16px; }
.edu-footer__col a{ display:flex; align-items:center; gap:8px; color:#9aa5bd; text-decoration:none; font-size:14px; padding:6px 0; transition:color .15s ease; }
.edu-footer__col a:hover{ color:#fff; }
.edu-footer__bottom{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0; font-size:13px; color:#7f8aa3; text-align:center; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:991px){
    .edu-cats{ grid-template-columns:repeat(2,1fr); }
    .edu-courses{ grid-template-columns:repeat(3,1fr); }
    .edu-features{ grid-template-columns:repeat(2,1fr); }
    .edu-hero__title{ font-size:38px; }
}

@media (max-width:900px){
    /* mobile nav */
    .edu-burger{ display:flex; }
    .edu-menu{
        position:fixed; top:0; right:-320px; width:300px; max-width:86vw; height:100vh;
        background:#fff; flex-direction:column; align-items:stretch; gap:4px; margin:0;
        padding:80px 18px 24px; box-shadow:-8px 0 30px rgba(0,0,0,.15); transition:right .3s ease; z-index:1002;
        overflow-y:auto;
    }
    body.edu-nav-open .edu-menu{ right:0; }
    .edu-menu > a{ padding:12px 14px; font-size:16px; }
    .edu-menu__actions{ flex-direction:column; align-items:stretch; gap:10px; margin:14px 0 0; }
    .edu-menu__actions .edu-btn{ width:100%; }
    .edu-nav__backdrop{ display:block; position:fixed; inset:0; background:rgba(15,24,48,.45); opacity:0; visibility:hidden; transition:.3s; z-index:1001; }
    body.edu-nav-open .edu-nav__backdrop{ opacity:1; visibility:visible; }
    body.edu-nav-open{ overflow:hidden; }
}

@media (max-width:820px){
    .edu-hero__grid{ grid-template-columns:1fr; text-align:center; }
    .edu-hero__content{ order:2; }
    .edu-hero__visual{ order:1; }
    .edu-hero__desc{ margin-left:auto; margin-right:auto; }
    .edu-hero__cta,.edu-hero__stats{ justify-content:center; }
    .edu-hero__title{ font-size:34px; }
    .edu-heading--row{ flex-direction:column; align-items:flex-start; }
    .edu-steps{ flex-direction:column; }
    .edu-step__arrow{ transform:rotate(90deg); justify-content:center; }
    .edu-reviews{ grid-template-columns:1fr; }
}

@media (max-width:640px){
    .edu-section{ padding:48px 0; }
    .edu-hero{ padding:40px 0 52px; }
    .edu-cats{ grid-template-columns:1fr; }
    .edu-courses{ grid-template-columns:1fr 1fr; }
    .edu-features{ grid-template-columns:1fr; }
    .edu-heading__title{ font-size:26px; }
    .edu-hero__title{ font-size:29px; }
    .edu-hero__stats{ gap:22px; }
    .edu-stat strong{ font-size:24px; }
    .edu-footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:420px){
    .edu-courses{ grid-template-columns:1fr; }
    .edu-footer__grid{ grid-template-columns:1fr; }
}