/* =========================================================================
   AdsDigi IELTS — Landing page styles (responsive)
   Màu: tím #9C2AB3 → coral #FF6E6E | chữ #35313C | nền #FFF9FE
   Font: Inter (body/heading) + Dancing Script (dòng viết tay hero)
   ========================================================================= */

:root {
	--ad-purple: #9C2AB3;
	--ad-coral:  #FF6E6E;
	--ad-ink:    #35313C;
	--ad-bg:     #FFF9FE;
	--ad-muted:  #6b6675;
	--ad-line:   #efe2f6;
	--ad-grad:   linear-gradient(90deg, #9C2AB3 0%, #FF6E6E 100%);
	--ad-shadow: 0 18px 50px rgba(162, 38, 192, .12);
	--ad-radius: 22px;
	--ad-wrap:   1200px;
}

/* ---- Reset nhẹ cho landing (ghi đè Genesis) ---- */
body.adsdigi-landing,
.front-page-1 .site-inner,
.ad-main, .ad-header, .footer {
	font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.ad-main *, .ad-header *, .footer * { box-sizing: border-box; }

.adsdigi-landing .site-inner { max-width: none !important; padding: 0 !important; margin: 0 !important; }

.ad-wrap { width: 100%; max-width: var(--ad-wrap); margin: 0 auto; padding: 0 24px; }
.ad-section { position: relative; padding: 84px 0; overflow: hidden; }
.ad-center { text-align: center; margin-top: 36px; }

/* ---- Typography helpers ---- */
.ad-grad-text, .ad-grad-text2 {
	background: var(--ad-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.ad-grad-text2 { background: linear-gradient(90deg, #FF6E6E 0%, #9C2AB3 100%); -webkit-background-clip: text; background-clip: text; }

.ad-h2 {
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.15; font-weight: 800; color: var(--ad-ink);
	margin: 0 0 16px; letter-spacing: -.5px;
}
.ad-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.ad-head-desc { color: var(--ad-muted); font-size: 17px; line-height: 1.7; margin: 0; }

.ad-badge {
	display: inline-block; padding: 8px 18px; border-radius: 999px;
	background: var(--ad-grad); color: #fff; font-weight: 700;
	font-size: 13px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 18px;
}

/* ---- Buttons ---- */
.ad-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 15px;
	text-decoration: none; cursor: pointer; border: 0; transition: transform .2s, box-shadow .2s;
}
.ad-btn--grad { background: var(--ad-grad); color: #fff; box-shadow: 0 12px 26px rgba(156, 42, 179, .32); }
.ad-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(156, 42, 179, .42); }
.ad-btn--ghost { background: #fff; color: var(--ad-purple); border: 1.5px solid var(--ad-line); }
.ad-btn--ghost:hover { border-color: var(--ad-purple); transform: translateY(-2px); }
.ad-btn--block { width: 100%; padding: 16px; font-size: 16px; }

/* ---- Icon glyphs (CSS-only, không phụ thuộc FontAwesome) ---- */
.ad-spark::before { content: "✦"; }
.ad-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ad-grad); color: #fff; font-size: 12px; flex: none; }
.ad-check::before { content: "✓"; font-weight: 900; }
.ad-clock::before { content: "⏱"; } .ad-lock::before { content: "🔒"; }
.ad-pin::before { content: "📍"; } .ad-phone::before { content: "📞"; } .ad-mail::before { content: "✉"; }

/* =========================================================================
   HEADER
   ========================================================================= */
.ad-header {
	position: sticky; top: 0; z-index: 999; background: rgba(255, 249, 254, .85);
	backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--ad-line);
	transition: box-shadow .25s;
}
.ad-header.is-stuck { box-shadow: 0 6px 24px rgba(156, 42, 179, .10); }
.ad-nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.ad-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ad-logo img { max-height: 48px; width: auto; }
.ad-logo-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--ad-grad); color: #fff; font-weight: 900; font-size: 22px; }
.ad-logo-text { display: flex; flex-direction: column; line-height: 1; }
.ad-logo-text strong { color: var(--ad-ink); font-size: 20px; font-weight: 900; letter-spacing: -.5px; }
.ad-logo-text em { color: var(--ad-purple); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-style: normal; margin-top: 3px; }
.ad-menu { display: flex; gap: 26px; margin-left: auto; }
.ad-menu a { color: var(--ad-ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .2s; }
.ad-menu a:hover { color: var(--ad-purple); }
.ad-header-cta { padding: 11px 24px; }
.ad-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.ad-burger span { width: 24px; height: 2px; background: var(--ad-ink); border-radius: 2px; transition: .3s; }

/* =========================================================================
   ① HERO
   ========================================================================= */
.hero { padding: 70px 0 90px; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(170deg, #fefafe 0%, #f7e0f8 60%, #f0c9f2 100%); z-index: 0; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 80% 20%, rgba(255, 255, 255, .35), transparent 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ad-purple); font-weight: 800; font-size: 12.5px; letter-spacing: .5px; padding: 9px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(156, 42, 179, .14); }
.hero-title { font-size: clamp(40px, 6vw, 80px); font-weight: 900; line-height: 1.02; letter-spacing: -2px; margin: 22px 0 8px; color: var(--ad-ink); }
.hero-script { font-family: "Dancing Script", cursive; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; margin: 0 0 30px; background: var(--ad-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-trust { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; }
.trust-item strong { color: var(--ad-purple); font-weight: 800; font-size: 16px; }
.trust-item span { color: var(--ad-muted); font-size: 13.5px; }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(156, 42, 179, .25)); }

/* =========================================================================
   ② GIỚI THIỆU
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.about-media img { width: 100%; height: auto; border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); }
.about-content p { color: var(--ad-muted); font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.about-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.about-item { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ad-ink); background: #fff; border: 1px solid var(--ad-line); padding: 13px 16px; border-radius: 14px; }
.about-closing { color: var(--ad-ink) !important; }

/* =========================================================================
   ③ SỐ LIỆU
   ========================================================================= */
.stats { padding-top: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat-card { background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 30px 24px; text-align: center; box-shadow: var(--ad-shadow); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-card .ad-spark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--ad-grad); color: #fff; font-size: 20px; margin-bottom: 8px; }
.stat-num { font-size: 38px; font-weight: 900; background: var(--ad-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.stat-cap { color: var(--ad-muted); font-weight: 600; font-size: 14.5px; }

/* =========================================================================
   ④ PHƯƠNG PHÁP
   ========================================================================= */
.method-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.method-card { position: relative; background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 26px 22px 30px; box-shadow: var(--ad-shadow); overflow: hidden; text-align: center; }
.method-card .method-art { width: 100%; height: 190px; object-fit: contain; display: block; margin: 0 auto 6px; }
.method-card h3 { margin: 6px 0 0; font-size: 20px; color: var(--ad-ink); font-weight: 800; }
.method-num { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; font-size: 15px; font-weight: 800; z-index: 1; }
.method-card--1 .method-num { background: linear-gradient(135deg, #dfc2ff, #904af9); }
.method-card--2 .method-num { background: linear-gradient(135deg, #ffacdd, #f84fae); }
.method-card--3 .method-num { background: linear-gradient(135deg, #c2d0ff, #4a71f6); }
.method-card--4 .method-num { background: linear-gradient(135deg, #ffd8a7, #fa952c); }

/* =========================================================================
   ⑤ LỘ TRÌNH
   ========================================================================= */
.roadmap { background: #f6ecfd url(../img/bg-roadmap.png) center top / cover no-repeat; }
.road-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.road-step { background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 28px 22px; box-shadow: var(--ad-shadow); }
.road-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ad-grad); color: #fff; font-weight: 900; font-size: 20px; margin-bottom: 16px; }
.road-step--2 .road-num { background: linear-gradient(135deg, #ffacdd, #f84fae); }
.road-step--3 .road-num { background: linear-gradient(135deg, #c2d0ff, #4a71f6); }
.road-step--4 .road-num { background: linear-gradient(135deg, #ffd8a7, #fa952c); }
.road-step--5 .road-num { background: linear-gradient(135deg, #e3c9ff, #b169ff); }
.road-body h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--ad-ink); }
.road-body p { margin: 0; color: var(--ad-muted); font-size: 14px; line-height: 1.6; }

/* =========================================================================
   ⑥ KHOÁ HỌC
   ========================================================================= */
.courses { background: #f7eefd url(../img/bg-courses.png) center top / cover no-repeat; }
.courses-illustration { display: block; max-width: 300px; width: 40%; margin: 0 auto 30px; }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.course-card { background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 30px 26px; box-shadow: var(--ad-shadow); display: flex; flex-direction: column; gap: 8px; transition: transform .25s; }
.course-card:hover { transform: translateY(-6px); }
.course-band { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-weight: 900; font-size: 20px; color: #fff; background: var(--ad-grad); margin-bottom: 6px; }
.course-card--1 .course-band { background: linear-gradient(135deg, #ff9ed1, #fb41ae); }
.course-card--2 .course-band { background: linear-gradient(135deg, #92acff, #2862fe); }
.course-card--3 .course-band { background: linear-gradient(135deg, #ffc88a, #fe850d); }
.course-card--4 .course-band { background: linear-gradient(135deg, #cf9bff, #9914bc); }
.course-tag { font-size: 12.5px; font-weight: 700; color: var(--ad-purple); text-transform: uppercase; letter-spacing: .3px; }
.course-title { font-size: 23px; font-weight: 900; color: var(--ad-ink); margin: 2px 0; }
.course-sub { color: var(--ad-muted); font-size: 14.5px; margin: 0 0 6px; }
.course-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.course-feats li { position: relative; padding-left: 24px; color: var(--ad-ink); font-size: 14.5px; font-weight: 500; }
.course-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--ad-purple); font-weight: 900; }
.course-card .ad-btn { margin-top: auto; }

/* =========================================================================
   ⑦ HỌC VIÊN
   ========================================================================= */
.students { background: #f7eefd url(../img/bg-students.png) center / cover no-repeat; }
.stu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.stu-featured { background: #fff; border: 1px solid var(--ad-line); border-radius: var(--ad-radius); padding: 34px; box-shadow: var(--ad-shadow); }
.stu-overall { display: flex; align-items: baseline; gap: 10px; }
.stu-score { font-size: 52px; font-weight: 900; background: var(--ad-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stu-overall span { color: var(--ad-muted); font-weight: 700; }
.stu-skills { display: flex; gap: 10px; margin: 18px 0; }
.stu-skills span { flex: 1; text-align: center; background: #faf3ff; border: 1px solid var(--ad-line); border-radius: 12px; padding: 8px 4px; font-size: 12px; color: var(--ad-muted); font-weight: 700; }
.stu-skills b { display: block; font-size: 16px; color: var(--ad-ink); margin-top: 2px; }
.stu-featured blockquote { margin: 0 0 18px; color: var(--ad-ink); font-size: 16px; line-height: 1.7; font-style: italic; }
.stu-name { display: flex; align-items: center; gap: 12px; }
.stu-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ad-grad); color: #fff; font-weight: 800; }
.stu-name strong { color: var(--ad-ink); font-size: 16px; }
.stu-badge { margin-left: auto; background: var(--ad-grad); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 14px; border-radius: 999px; }
.stu-cards { display: flex; flex-direction: column; gap: 16px; }
.stu-card { background: #fff; border: 1px solid var(--ad-line); border-radius: 18px; padding: 22px 24px; box-shadow: var(--ad-shadow); }
.stu-card .stu-skills { margin-bottom: 0; }

/* =========================================================================
   ⑧ FORM
   ========================================================================= */
.formsec { background: #f6e8fd url(../img/bg-form.png) center / cover no-repeat; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.form-benefits p { color: var(--ad-muted); font-size: 16.5px; line-height: 1.7; }
.benefit-list { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit .ad-check { width: 30px; height: 30px; font-size: 14px; margin-top: 2px; }
.benefit strong { display: block; color: var(--ad-ink); font-size: 16px; }
.benefit span { color: var(--ad-muted); font-size: 14.5px; }
.form-card { background: #fff; border-radius: 32px; padding: 38px; box-shadow: 0 30px 70px rgba(156, 42, 179, .20); }
.form-card h3 { margin: 0; font-size: 26px; font-weight: 900; color: var(--ad-ink); }
.form-helper { display: flex; align-items: center; gap: 8px; color: var(--ad-purple); font-weight: 700; margin: 8px 0 24px; font-size: 14px; }
.form-card label { display: block; font-weight: 700; color: var(--ad-ink); font-size: 14.5px; margin-bottom: 16px; }
.form-card input[type="text"], .form-card input[type="tel"] { width: 100%; margin-top: 7px; padding: 14px 16px; border: 1.5px solid var(--ad-line); border-radius: 13px; font-size: 15px; font-family: inherit; transition: border-color .2s; }
.form-card input[type="text"]:focus, .form-card input[type="tel"]:focus { outline: none; border-color: var(--ad-purple); }
.form-goal-label { display: block; font-weight: 700; color: var(--ad-ink); font-size: 14.5px; margin-bottom: 10px; }
.goal-chips { display: flex; gap: 12px; margin-bottom: 24px; }
.goal-chips label { flex: 1; margin: 0; cursor: pointer; }
.goal-chips input { position: absolute; opacity: 0; }
.goal-chips span { display: block; text-align: center; padding: 13px; border: 1.5px solid var(--ad-line); border-radius: 13px; font-weight: 800; color: var(--ad-ink); transition: .2s; }
.goal-chips input:checked + span { background: var(--ad-grad); color: #fff; border-color: transparent; }
.form-secure { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--ad-muted); font-size: 13px; margin: 16px 0 0; }
.form-message { text-align: center; font-weight: 700; margin: 12px 0 0; min-height: 1px; }
.form-message.is-ok { color: #1a9d4c; } .form-message.is-err { color: #d63638; }

/* =========================================================================
   ⑨ FOOTER
   ========================================================================= */
.footer { background: linear-gradient(135deg, #fff9fe 0%, #f9e3ff 100%); padding: 70px 0 30px; border-top: 1px solid var(--ad-line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.foot-brand p { color: var(--ad-muted); font-size: 14.5px; line-height: 1.7; margin: 18px 0; }
.foot-social { display: flex; gap: 12px; }
.foot-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--ad-line); color: var(--ad-muted); text-decoration: none; font-weight: 800; transition: .25s; }
.foot-social a:hover { background: var(--ad-grad); color: #fff; transform: translateY(-3px); }
.foot-col h4 { color: var(--ad-ink); font-weight: 800; font-size: 17px; margin: 0 0 20px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { color: var(--ad-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: .2s; }
.foot-col a:hover { color: var(--ad-purple); padding-left: 4px; }
.foot-contact li { color: var(--ad-muted); font-size: 14px; margin-bottom: 14px; display: flex; gap: 8px; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--ad-line); }
.foot-bottom p { color: var(--ad-muted); font-size: 14px; margin: 0; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { color: var(--ad-muted); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--ad-purple); }

/* =========================================================================
   ANIMATION (scroll reveal)
   ========================================================================= */
.ad-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.ad-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.stats-grid, .method-cards, .course-grid { grid-template-columns: repeat(2, 1fr); }
	.road-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.ad-section { padding: 60px 0; }
	.ad-menu, .ad-header-cta { display: none; }
	.ad-burger { display: flex; margin-left: auto; }
	.ad-header.menu-open .ad-menu { display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; background: #fff; padding: 18px 24px; gap: 16px; box-shadow: var(--ad-shadow); }
	.ad-header.menu-open .ad-header-cta { display: inline-flex; }
	.hero-grid, .about-grid, .stu-grid, .form-grid { grid-template-columns: 1fr; }
	.hero-media { order: -1; max-width: 480px; margin: 0 auto; }
	.about-media { max-width: 460px; }
}
@media (max-width: 560px) {
	.stats-grid, .method-cards, .course-grid, .road-steps { grid-template-columns: 1fr; }
	.about-items { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.foot-bottom { flex-direction: column; text-align: center; }
	.hero-trust { gap: 20px; }
}