/* ============================================================
   LUNA ENGLISH — COMPONENTS & PAGES
   Hero trang chủ, thẻ tuổi, lộ trình, form, accordion,
   wizard, quiz, giáo viên, học phí, feedback…
   ============================================================ */

/* ---------- Hero trang chủ ---------- */
.home-hero { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%); color: #fff; padding: 84px 0 76px; overflow: hidden; }
.home-hero h1 { color: #fff; font-size: clamp(2rem, 5.2vw, 3.2rem); max-width: 640px; }
.home-hero h1 .hl { color: var(--mango); }
.home-hero p.lead { color: rgba(255,255,255,.86); max-width: 560px; margin: 18px 0 28px; font-size: 1.06rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 40px; }
.hero-trust .t-item strong { font-family: var(--title); font-size: 1.3rem; color: var(--mango); display: block; }
.hero-trust .t-item span { font-size: .85rem; color: rgba(255,255,255,.75); }

/* ---------- Thẻ chọn tuổi ---------- */
.age-card { text-align: center; cursor: pointer; transition: transform .18s ease, box-shadow .2s ease; border-top: 6px solid var(--blue); }
.age-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.age-card .age-num { font-family: var(--title); font-weight: 700; font-size: 1.7rem; color: var(--purple); }
.age-card p { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.age-card .badge { margin-top: 12px; }
.age-card.c-blue { border-top-color: var(--blue); }
.age-card.c-green { border-top-color: var(--green); }
.age-card.c-mango { border-top-color: var(--mango); }
.age-card.c-pink { border-top-color: var(--pink); }

/* ---------- Vì sao chọn Luna ---------- */
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-item .icon { flex: 0 0 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--purple-soft); }
.why-item h3 { font-size: 1.08rem; margin-bottom: 4px; }
.why-item p { color: var(--muted); font-size: .93rem; }

/* ---------- Bảng/sơ đồ lộ trình tương tác ---------- */
.route-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease; }
.route-row:hover { box-shadow: var(--shadow-sm); border-color: var(--blue); }
.route-row .age { font-family: var(--title); font-weight: 700; color: var(--purple); }
.route-row .name { font-weight: 600; }
.route-row .name small { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; }
.route-list { display: grid; gap: 12px; }
@media (max-width: 620px) { .route-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Feedback & video ---------- */
.quote-card { position: relative; }
.quote-card .q-mark { font-family: var(--title); font-size: 2.6rem; color: var(--mango); line-height: 1; }
.quote-card p { font-style: italic; color: var(--ink); margin: 8px 0 14px; }
.quote-card .q-who { font-weight: 700; color: var(--purple); font-size: .92rem; }
.quote-card .q-who small { display: block; color: var(--muted); font-weight: 400; }
.video-ph { aspect-ratio: 16/9; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--purple-soft), var(--blue-soft)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--purple); border: 1px dashed var(--blue); text-align: center; padding: 10px; }
.video-ph .play { width: 54px; height: 54px; border-radius: 50%; background: var(--pink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* ---------- Form chung ---------- */
.form-grid { display: grid; gap: 16px; }
.form-grid label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 6px; color: var(--purple); }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--body); font-size: .95rem; outline: none; background: #fff; transition: border-color .15s ease; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--blue); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } }
.form-msg { min-height: 1.4em; font-size: .9rem; font-weight: 600; }
.form-msg.err { color: var(--pink); }
.form-msg.ok { color: var(--green); }
.form-success { background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius); padding: 26px; text-align: center; }
.form-success h3 { color: #00895a; margin-bottom: 8px; }
.pill-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-choices .pill { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; cursor: pointer; font-family: var(--body); font-size: .9rem; font-weight: 500; transition: all .15s ease; }
.pill-choices .pill:hover { border-color: var(--blue); }
.pill-choices .pill.selected { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ---------- FAQ accordion ---------- */
.faq-group-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: 10px; overflow: hidden; }
.acc-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 20px; font-family: var(--body); font-weight: 600; font-size: .98rem; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.acc-q .acc-ico { color: var(--pink); font-size: 1.2rem; transition: transform .2s ease; flex: 0 0 auto; }
.acc-item.open .acc-ico { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.acc-a-inner { padding: 0 20px 16px; color: var(--muted); font-size: .94rem; }

/* ---------- Wizard & Quiz ---------- */
.wizard-box { max-width: 760px; margin-inline: auto; }
.wizard-steps { display: flex; gap: 6px; margin-bottom: 26px; }
.wizard-steps .ws { flex: 1; height: 8px; border-radius: 99px; background: var(--line); }
.wizard-steps .ws.done { background: var(--green); }
.wizard-steps .ws.now { background: var(--mango); }
.wizard-q h3 { font-size: 1.3rem; margin-bottom: 18px; }
.option-grid { display: grid; gap: 12px; }
.option-grid button { text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; cursor: pointer; font-family: var(--body); font-size: .98rem; transition: all .15s ease; }
.option-grid button:hover { border-color: var(--blue); background: var(--blue-soft); }
.option-grid button strong { color: var(--purple); }
.option-grid button small { display: block; color: var(--muted); }
.wizard-back { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--body); font-size: .9rem; margin-top: 18px; text-decoration: underline; }
.result-card { border: 2px solid var(--green); border-radius: var(--radius); overflow: hidden; }
.result-head { background: var(--green); color: #fff; padding: 18px 26px; }
.result-head h3 { color: #fff; margin: 0; }
.result-body { padding: 26px; background: #fff; display: grid; gap: 14px; }
.result-body .r-line { display: flex; gap: 10px; align-items: flex-start; }
.result-body .r-line .ico { flex: 0 0 26px; text-align: center; }
.quiz-progress { font-size: .85rem; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.quiz-opt.correct { border-color: var(--green) !important; background: var(--green-soft) !important; }
.quiz-opt.wrong { border-color: var(--pink) !important; background: var(--pink-soft) !important; }

/* ---------- Học phí ---------- */
.price-hero-line { font-family: var(--title); font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--purple); }
.price-hero-line .num { color: var(--pink); }
.include-item { display: flex; gap: 12px; align-items: flex-start; }
.include-item .tick { color: var(--green); font-weight: 700; font-size: 1.1rem; }
.policy-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.policy-table th, .policy-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
.policy-table th { background: var(--purple); color: #fff; font-family: var(--title); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ---------- Giáo viên ---------- */
.teacher-card { display: grid; gap: 12px; }
.teacher-card .t-photo { width: 92px; height: 92px; border-radius: 50%; background: var(--purple-soft); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; border: 3px solid var(--mango); }
.teacher-card h3 { font-size: 1.12rem; }
.teacher-card .t-role { color: var(--pink); font-weight: 600; font-size: .88rem; }
.teacher-card ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
.teacher-card ul li strong { color: var(--ink); }

/* ---------- Blog teaser & chương trình ---------- */
.post-card h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.post-card p { color: var(--muted); font-size: .92rem; }
.post-tag { font-size: .78rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; }
.lesson-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .lesson-flow { grid-template-columns: 1fr; } }
.lesson-flow .lf { background: #fff; border-radius: var(--radius-sm); padding: 18px; border-top: 5px solid var(--blue); box-shadow: var(--shadow-sm); }
.lesson-flow .lf strong { font-family: var(--title); color: var(--purple); display: block; margin-bottom: 6px; }
.lesson-flow .lf small { color: var(--muted); }
.prog-cta-band { background: linear-gradient(135deg, var(--blue), var(--green)); border-radius: var(--radius); color: #fff; padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.prog-cta-band h3 { color: #fff; margin: 0; }

/* ---------- Liên hệ / maps ---------- */
.map-frame { width: 100%; height: 380px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.contact-line { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.contact-line .ico { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--purple-soft); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* ---------- Cổng phụ huynh (teaser GĐ2) ---------- */
.portal-mock { max-width: 420px; margin-inline: auto; }
.portal-mock input:disabled { background: #f6f3f9; color: var(--muted); }

/* ---------- Bậc thang CEFR (trang chương trình) ----------
   5 bậc cao dần minh họa con "leo" từ Pre-A1 tới IELTS 6.5+ */
.cefr-stairs { display: flex; align-items: flex-end; gap: 8px; max-width: 780px; margin: 38px auto 0; }
.cefr-stairs .step { flex: 1; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 10px 4px 12px; color: #fff; }
.cefr-stairs .step span { font-family: var(--title); font-weight: 700; font-size: clamp(.78rem, 2vw, 1rem); line-height: 1.2; }
.cefr-stairs .step small { font-size: .68rem; opacity: .9; font-weight: 600; }
.cefr-stairs .step:nth-child(1) { height: 74px;  background: var(--pink); }
.cefr-stairs .step:nth-child(2) { height: 106px; background: var(--blue); }
.cefr-stairs .step:nth-child(3) { height: 138px; background: var(--green); }
.cefr-stairs .step:nth-child(4) { height: 170px; background: var(--purple-2); }
.cefr-stairs .step:nth-child(5) { height: 202px; background: var(--mango); color: var(--purple); }

/* ---------- Timeline hành trình 4→16+ tuổi ----------
   Trục gradient giữa trang, mốc tuổi tròn trên trục,
   card chương trình xen kẽ 2 bên (desktop) / dồn phải (mobile) */
.journey { position: relative; max-width: 940px; margin: 44px auto 0; }
.journey::before { content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 6px; transform: translateX(-50%); border-radius: 99px; background: linear-gradient(180deg, var(--pink), var(--blue) 35%, var(--green) 65%, var(--mango)); }
.j-stop { position: relative; display: grid; grid-template-columns: 1fr 110px 1fr; align-items: center; margin-bottom: 38px; }
.j-age { grid-column: 2; grid-row: 1; justify-self: center; z-index: 2; width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 5px solid var(--purple); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--title); font-weight: 700; font-size: 1.15rem; color: var(--purple); box-shadow: var(--shadow-sm); text-align: center; line-height: 1.1; }
.j-age small { font-size: .6rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.j-pink .j-age { border-color: var(--pink); } .j-blue .j-age { border-color: var(--blue); }
.j-green .j-age { border-color: var(--green); } .j-mango .j-age { border-color: var(--mango); }
.j-card { grid-row: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); display: block; transition: transform .18s ease, box-shadow .2s ease; }
.j-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.j-stop:nth-child(odd) .j-card { grid-column: 1; }
.j-stop:nth-child(even) .j-card { grid-column: 3; }
.j-pink .j-card { border-top: 6px solid var(--pink); } .j-blue .j-card { border-top: 6px solid var(--blue); }
.j-green .j-card { border-top: 6px solid var(--green); } .j-mango .j-card { border-top: 6px solid var(--mango); }
.j-card h3 { font-size: 1.15rem; margin: 8px 0 6px; }
.j-card p { color: var(--muted); font-size: .92rem; }
.j-card .j-more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .9rem; color: var(--blue); }
/* Hai nhánh trong cùng một mốc tuổi (cơ bản / nâng cao) */
.j-branch { display: grid; gap: 10px; margin-top: 12px; }
.j-branch a { display: block; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s ease, background .15s ease; }
.j-branch a:hover { border-color: var(--blue); background: var(--blue-soft); }
.j-branch a strong { color: var(--purple); font-size: .95rem; }
.j-branch a small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
/* Đích đến cuối hành trình */
.j-finish { position: relative; z-index: 2; text-align: center; }
.j-finish .flag { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; border-radius: var(--radius); padding: 22px 34px; box-shadow: var(--shadow); }
.j-finish .flag .cap { font-size: 2rem; }
.j-finish .flag strong { font-family: var(--title); font-size: 1.15rem; }
.j-finish .flag small { color: rgba(255,255,255,.8); font-size: .85rem; }
@media (max-width: 860px) {
  .journey::before { left: 31px; }
  .j-stop { grid-template-columns: 62px 1fr; margin-bottom: 26px; }
  .j-age { grid-column: 1; width: 62px; height: 62px; border-width: 4px; font-size: .82rem; }
  .j-age small { font-size: .5rem; }
  .j-stop:nth-child(odd) .j-card, .j-stop:nth-child(even) .j-card { grid-column: 2; margin-left: 12px; }
}