/* IELTS Study Hub — trang chủ (đồng bộ vibe kem/vàng đồng với các site) */
:root{
  --bg:#f5f1e8; --surface:#ffffff; --surface2:#efe9db;
  --border:#e0d8c4; --border-strong:#c9bea3;
  --text:#2a2520; --text2:#6b6358; --text3:#9a9182;
  --dark-bg:#2a2d35; --dark-bg2:#1f2127;
  --gold:#b8954a; --gold-hover:#9a7a3a; --gold-light:#f0e4c8;
  --ielts-red:#E4002B;
  --radius:14px;
  --shadow:0 1px 3px rgba(42,37,32,.08);
  --shadow-md:0 6px 20px rgba(42,37,32,.10);
  --shadow-lg:0 18px 48px rgba(42,37,32,.20);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,48px);
  background:linear-gradient(180deg,var(--dark-bg) 0%,var(--dark-bg2) 100%);
  color:#e2e5e9; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.brand{
  text-decoration:none; display:flex; gap:9px; align-items:baseline;
}
.brand-ielts{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.01em; color:var(--ielts-red);
}
.brand-sub{
  font-family:'DM Sans',sans-serif; color:#c9cdd4;
  font-weight:700; font-size:13px; letter-spacing:.12em;
}
.topnav{ display:flex; gap:6px; flex-wrap:wrap; }
.topnav a{
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px;
  color:#c9cdd4; text-decoration:none; padding:7px 14px; border-radius:999px;
  transition:.18s;
}
.topnav a:hover{ color:#fff; background:rgba(255,255,255,.12); }

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  text-align:center; padding:clamp(56px,11vw,120px) 20px clamp(40px,7vw,72px);
  background:
    radial-gradient(120% 90% at 50% -10%, #fbf6ea 0%, var(--bg) 60%),
    linear-gradient(180deg, var(--surface2) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.hero__eyebrow{
  font-family:'DM Sans',sans-serif; text-transform:uppercase; letter-spacing:.28em;
  font-size:12px; font-weight:700; color:var(--gold); margin:0 0 18px;
}
.hero__title{
  font-family:'DM Sans',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(38px,7vw,72px); line-height:1.02; margin:0 0 14px;
  color:var(--text);
}
/* Wordmark "IELTS" — kiểu thương hiệu British Council: đỏ, đậm, bo tròn */
.wm-ielts{
  font-family:'Poppins',sans-serif; font-weight:800;
  color:var(--ielts-red); letter-spacing:-.01em;
}
.hero__tag{ font-size:clamp(15px,2.4vw,20px); color:var(--text2); margin:0 auto 34px; max-width:560px; }
.hero__cta{
  display:inline-block; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px;
  color:#fff; text-decoration:none; padding:14px 30px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-hover) 100%);
  box-shadow:var(--shadow-md); transition:.2s;
}
.hero__cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ── Skills ─────────────────────────────────────────────── */
.skills{ max-width:1080px; margin:0 auto; padding:clamp(48px,8vw,88px) clamp(16px,4vw,32px); }
.skills__title{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:clamp(22px,3.4vw,30px);
  text-align:center; margin:0 0 clamp(28px,5vw,48px); letter-spacing:-.01em;
}
.skill-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.4vw,26px);
}
.skill-card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(165deg,var(--surface) 0%,#fcf8ef 100%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 26px 26px; text-decoration:none; color:var(--text);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.skill-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--accent,var(--gold)); opacity:.9;
}
.skill-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.skill-card__icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:20px; color:#fff;
  background:linear-gradient(135deg,var(--accent,var(--gold)) 0%,rgba(0,0,0,.12) 240%);
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent,var(--gold)) 35%,transparent);
}
.skill-card__icon svg{ width:28px; height:28px; }
.skill-card__name{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:22px; margin:0 0 2px; }
.skill-card__vi{ font-size:13px; color:var(--gold-hover); font-weight:600; margin:0 0 12px; letter-spacing:.02em; }
.skill-card__desc{ font-size:14.5px; color:var(--text2); margin:0 0 22px; flex:1; }
.skill-card__go{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:14px; color:var(--accent,var(--gold));
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
}
.skill-card__go .arrow{ transition:transform .2s; }
.skill-card:hover .skill-card__go .arrow{ transform:translateX(5px); }
.skill-card--soon{ opacity:.6; pointer-events:none; }
.skill-card--soon .skill-card__go::after{ content:"Soon"; }

/* ── Footer ─────────────────────────────────────────────── */
.footer{
  text-align:center; padding:36px 20px; color:var(--text3); font-size:13px;
  border-top:1px solid var(--border); background:var(--surface2);
}

@media (max-width:520px){
  .topnav{ display:none; }
  .hero{ padding-top:64px; }
}