/* =========================================================
   IDC VIETNAM — Brand system dùng chung cho các trang du học
   (trích & chuẩn hoá từ landing page Cao đẳng cộng đồng Mỹ)
   ========================================================= */
:root{
  color-scheme: light;
  --cream:#F7FAF3;
  --surface:#FFFFFF;
  --surface-alt:#EAF4E6;
  --gold-tint:#FFF6DC;
  --ink:#16241A;
  --ink-muted:#57685C;
  --green-900:#123018;
  --green-800:#1B4A24;
  --green-700:#2F7D3B;
  --green-600:#3C8C41;
  --green-500:#63A866;
  --green-border:#CFE3CB;
  --gold-700:#9C6A0A;
  --gold-500:#F2B705;
  --gold-300:#FFD65C;
  --navy-700:#1D3557;
  --navy-100:#E7EEF6;
  --danger:#B23A2E;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 18px 40px -18px rgba(18,48,24,.35);
  --shadow-sm:0 8px 20px -10px rgba(18,48,24,.25);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(1){transition-delay:.02s}
.reveal:nth-child(2){transition-delay:.09s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.23s}
.reveal:nth-child(5){transition-delay:.30s}
.reveal:nth-child(6){transition-delay:.37s}
@keyframes popIn{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;line-height:1.14;
  margin:0 0 .5em;text-wrap:balance;color:var(--green-900);letter-spacing:-.01em;
}
h1{font-size:clamp(30px,5.4vw,50px);font-weight:700}
h2{font-size:clamp(24px,3.6vw,34px)}
h3{font-size:clamp(18px,2.4vw,21px)}
p{margin:0 0 1em}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'Be Vietnam Pro',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-700);
}
.section-head{max-width:720px;margin:0 auto 40px}
.section-head.left{margin:0 0 36px}
.section-head p{color:var(--ink-muted);font-size:16.5px}
.note{color:var(--ink-muted);font-size:13.5px;line-height:1.55}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.band{padding:76px 0}
.band.tight{padding:56px 0}
.band-surface{background:var(--surface)}
.band-tint-green{background:var(--surface-alt)}
.band-tint-gold{background:var(--gold-tint)}

.btn{
  appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:15.5px;padding:14px 26px;border-radius:999px;
  text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
.btn-primary{background:var(--gold-500);color:var(--green-900);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--gold-300);box-shadow:0 14px 26px -10px rgba(242,183,5,.55)}
.btn-outline{background:transparent;color:var(--surface);border:1.5px solid rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-ghost-dark{background:var(--green-800);color:#fff}
.btn-ghost-dark:hover{background:var(--green-700)}
.btn-block{width:100%}

@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,183,5,.5), var(--shadow-sm)}50%{box-shadow:0 0 0 11px rgba(242,183,5,0), var(--shadow-sm)}}
.hero-cta-row .btn-primary{animation:ctaPulse 2.8s ease-in-out infinite}
.hero-cta-row .btn-primary:hover{animation-play-state:paused}

/* ---------- topbar ---------- */
.topbar{padding:16px 0;background:var(--cream);position:sticky;top:0;z-index:50;transition:box-shadow .25s ease}
.topbar.is-scrolled{box-shadow:0 8px 20px -14px rgba(18,48,24,.35)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:34px;width:auto;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:scale(1.06) rotate(-3deg)}
.brand-word{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--green-900);line-height:1.1}
.brand-word small{display:block;font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--gold-700);text-transform:uppercase}
.brand-tag{font-size:12.5px;color:var(--ink-muted);font-weight:600;letter-spacing:.02em}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--green-800);text-decoration:none}
.back-link svg{width:16px;height:16px}
.back-link:hover{color:var(--green-600)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.field .req{color:var(--gold-700)}
.field input,.field select{
  font:inherit;font-size:15px;padding:11px 13px;border-radius:var(--radius-sm);
  border:1.5px solid var(--green-border);background:#fff;color:var(--ink);width:100%;
}
.field input,.field select{transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.field input:focus,.field select:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(63,140,65,.18);transform:translateY(-1px)}
.field.error input,.field.error select{border-color:var(--danger)}
.field-error-msg{display:none;color:var(--danger);font-size:12.5px;font-weight:600}
.field.error .field-error-msg{display:block}
.honeypot-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:13.5px;margin-top:12px;display:none}
.form-status.show{display:block}
.form-status.err{color:var(--danger);font-weight:600}
.thankyou{display:none;text-align:center;padding:18px 4px}
.thankyou.show{display:block;animation:heroFadeUp .4s ease both}
.thankyou .tick{
  width:52px;height:52px;border-radius:50%;background:var(--green-700);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;
  animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 0 0 6px var(--surface-alt);
}
form.is-done > *:not(.thankyou){display:none}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ---------- trust strip ---------- */
.trust-grid{display:grid;grid-template-columns:1fr;gap:14px}
.trust-item{
  background:var(--surface);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);
  display:flex;gap:14px;align-items:flex-start;border:1px solid var(--green-border);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.trust-item:hover{transform:translateY(-5px);box-shadow:0 20px 34px -16px rgba(18,48,24,.28);border-color:var(--green-500)}
.trust-item .ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--surface-alt);
  display:flex;align-items:center;justify-content:center;color:var(--green-700);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease;
}
.trust-item:hover .ic{transform:scale(1.14) rotate(-8deg);background:var(--green-700);color:#fff}
.ic-gold{background:var(--gold-tint)!important;color:var(--gold-700)!important}
.trust-item:hover .ic-gold{background:var(--gold-500)!important;color:var(--green-900)!important}
.ic-navy{background:var(--navy-100)!important;color:var(--navy-700)!important}
.trust-item:hover .ic-navy{background:var(--navy-700)!important;color:#fff!important}
.trust-item strong{display:block;font-size:16.5px;color:var(--green-900);font-family:'Fraunces',serif}
.trust-item span{color:var(--ink-muted);font-size:13.5px}
@media (min-width:820px){ .trust-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- strength cards (vì sao chọn IDC) ---------- */
.strength-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:8px 0 30px}
@media (min-width:680px){ .strength-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .strength-grid{grid-template-columns:repeat(4,1fr)} }
.strength-card{
  background:var(--surface);border:1px solid var(--green-border);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow-sm);transition:transform .28s ease, box-shadow .28s ease;
}
.strength-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.strength-card .ic{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.strength-card:hover .ic{transform:scale(1.12) rotate(-6deg)}
.strength-card h3{font-size:15px;margin-bottom:5px}
.strength-card p{margin:0;font-size:13.4px;color:var(--ink-muted)}
.strength-card:nth-child(4n+1) .ic{background:var(--surface-alt);color:var(--green-700)}
.strength-card:nth-child(4n+2) .ic{background:var(--gold-tint);color:var(--gold-700)}
.strength-card:nth-child(4n+3) .ic{background:var(--navy-100);color:var(--navy-700)}
.strength-card:nth-child(4n+4) .ic{background:var(--surface-alt);color:var(--green-700)}

/* ---------- simple numbered steps (dùng cho trang lộ trình / internship) ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{
  background:var(--surface);border-radius:var(--radius);padding:20px 18px;box-shadow:var(--shadow-sm);
  border-top:4px solid var(--green-500);transition:transform .28s ease, box-shadow .28s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--green-700);color:#fff;font-weight:800;font-size:14px;margin-bottom:12px;
}
.step h3{font-size:16px;margin-bottom:6px}
.step p{margin:0;color:var(--ink-muted);font-size:14px}

/* ---------- status badge (dùng trên card chương trình & trang teaser) ---------- */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:999px;
}
.status-pill.live{background:var(--surface-alt);color:var(--green-700)}
.status-pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-600)}
.status-pill.soon{background:var(--gold-tint);color:var(--gold-700)}
.status-pill.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-500)}

/* ---------- footer ---------- */
footer.site-footer{background:var(--green-900);color:#CFE0CC;padding:44px 0 90px;text-align:center}
footer.site-footer img{height:30px;margin:0 auto 14px}
footer.site-footer h2{color:#fff;font-size:20px;margin-bottom:10px}
footer.site-footer p{max-width:520px;margin:0 auto 10px;font-size:14px;color:#B9CDB6}
footer.site-footer .lines{font-size:13px;color:#9FB79C;margin-bottom:22px}
footer.site-footer .btn{margin-top:6px}
footer.site-footer .copyright{margin-top:26px;font-size:12px;color:#6F8A6C}

/* ---------- hero (dark gradient) dùng cho trang chủ & các trang chương trình ---------- */
.hero{
  position:relative;overflow:hidden;color:#EFF6EE;padding:56px 0 86px;
  background:linear-gradient(165deg,#0F2614 0%,#173F1F 55%,#296D33 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(1100px 480px at 85% -10%, rgba(242,183,5,.22), transparent 60%),
             radial-gradient(760px 420px at -10% 110%, rgba(99,168,102,.25), transparent 60%);
}
.hero .wrap{position:relative;z-index:2;max-width:760px}
.hero .eyebrow{color:var(--gold-300)}
.hero h1{color:#fff;margin-bottom:.4em}
.hero p.lede{color:#F2F8F0;font-size:18px;max-width:58ch}
.hero p{color:#D9E7D6}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-status{margin-bottom:14px}
.hero-status .status-pill.soon{background:rgba(255,246,220,.92)}

/* ---------- final CTA (dark band) ---------- */
.final{background:linear-gradient(165deg,var(--green-900),var(--green-800));color:#EFF6EE;padding:72px 0 60px}
.final .wrap{display:grid;grid-template-columns:1fr;gap:36px}
.final-copy .eyebrow{color:var(--gold-300)}
.final-copy h2{color:#fff}
.final-copy > p{color:#D9E7D6}
.final-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.final-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px;color:#E3EFE1}
.final-list li svg{flex:0 0 auto;width:18px;height:18px;color:var(--gold-300);margin-top:2px}
.final-form-card{background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.final-form-card h3{font-size:19px;margin-bottom:16px}
@media (min-width:920px){ .final .wrap{grid-template-columns:1fr 1fr;align-items:start} }

/* ---------- checklist & info cards (trang teaser chương trình) ---------- */
.list-check{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.list-check li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px;color:var(--ink-muted)}
.list-check li svg{flex:0 0 auto;width:18px;height:18px;color:var(--green-600);margin-top:2px}

.info-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){ .info-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .info-grid.cols-3{grid-template-columns:repeat(3,1fr)} }
.info-card{
  background:var(--surface);border:1px solid var(--green-border);border-radius:var(--radius);
  padding:22px;transition:transform .28s ease, box-shadow .28s ease;
}
.info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.info-card h3{font-size:16.5px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.info-card h3 .ic{width:30px;height:30px;border-radius:8px;background:var(--gold-tint);color:var(--gold-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.info-card p{font-size:14.5px;color:var(--ink-muted);margin:0}

.notice-box{
  border:1.5px solid #EAD186;background:var(--surface);border-radius:var(--radius);
  padding:16px 18px;font-size:14px;color:var(--ink-muted);display:flex;gap:12px;align-items:flex-start;
}
.notice-box svg{flex:0 0 auto;width:20px;height:20px;color:var(--gold-700);margin-top:1px}

/* ---------- sticky CTA bar ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--green-900);color:#fff;
  padding:12px 18px;box-shadow:0 -8px 24px rgba(0,0,0,.22);
  transform:translateY(120%);transition:transform .28s ease;
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0}
.sticky-cta span{font-size:14px;font-weight:600;display:none}
@media (min-width:640px){ .sticky-cta span{display:inline} }