/* =====================================================================
   TOEX Study Club — lớp giao diện mới cho trang chủ (đặt SAU style.css)
   Màu lấy từ design-tokens.css theo vai trò: forest = chữ/nút, moss = mảng nhận diện,
   honey = điểm nhấn, sage/peach = card, cream/paper = nền.
   ===================================================================== */

body { background: var(--toex-cream); color: var(--toex-ink); }

/* ---------- HEADER: nền sáng ngay từ đầu, chữ forest ---------- */
.header .logo, .header.scrolled .logo { color: var(--toex-forest); }
.logo-mark { background: var(--toex-forest); border-color: var(--toex-forest); }
.pill { background: rgba(52, 75, 50, .08); color: var(--toex-ink); backdrop-filter: none; }
.pill:hover { background: rgba(52, 75, 50, .14); }
.header.scrolled { background: rgba(255, 252, 244, .9); border-bottom-color: rgba(40, 42, 34, .12); }
.header.scrolled .pill { background: rgba(52, 75, 50, .08); color: var(--toex-ink); }
.header.scrolled .pill:hover { background: rgba(52, 75, 50, .14); }
.avatar { background: var(--toex-sage); color: var(--toex-forest); }

/* ---------- HERO: kem + lưới mảnh, chữ trái ~52%, cáo trong mảng sage ~48% ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  min-height: 0; overflow: visible;
  padding: 128px max(16px, calc((100% - 1240px) / 2)) 64px;
  background-color: var(--toex-cream); background-image: var(--toex-grid); background-size: var(--toex-grid-size);
}
.hero-grid { display: none; }
.hero-content { max-width: none; order: 0; }
.hero-kicker { color: var(--toex-forest); font-size: clamp(30px, 3.6vw, 48px); }
.hero-title { color: var(--toex-ink); font-size: clamp(36px, 4.4vw, 56px); }
.hero-content { min-width: 0; }
.typed { white-space: normal; background: var(--toex-sage); color: var(--toex-forest); border-radius: 10px; padding: 0 12px; }
.caret { background: var(--toex-forest); }
.hero-tag { background: var(--toex-ink); color: var(--toex-cream); border-radius: 6px; }
.hero-desc { color: var(--toex-ink); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; max-width: 540px; }
.btn-hero {
  background: var(--toex-forest); color: var(--toex-cream);
  border: var(--toex-border); border-radius: var(--toex-radius-pill); box-shadow: var(--toex-shadow);
}
.btn-hero:hover { transform: translate(-2px, -2px); box-shadow: var(--toex-shadow-hover); }

/* khung minh hoạ: mảng sage bo lớn, cáo đặt bên trong */
.owl {
  position: relative; inset: auto; right: auto; bottom: auto; transform: none; order: 0;
  width: 100%; max-width: 520px; aspect-ratio: auto; justify-self: end; margin: 0;
  pointer-events: none;
}
.owl-art {
  position: relative; inset: auto; aspect-ratio: 1 / 1; transform: none;
  background: var(--toex-sage); border: var(--toex-border); border-radius: var(--toex-radius-panel);
  box-shadow: var(--toex-shadow); overflow: hidden;
}
.owl-float { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; animation: scBob 5s ease-in-out infinite; }
.owl-float img {
  display: block; width: 100%; height: auto; margin-bottom: -10px; /* cáo lớn tràn đáy khung, chừa bù cho nhịp nhún */
  transform: translate(var(--owl-x, 0px), var(--owl-y, 0px)); transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.owl-art:hover .owl-float img, .owl-art.happy .owl-float img { transform: translate(var(--owl-x, 0px), calc(var(--owl-y, 0px) - 4px)); }
@keyframes scBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* bong bóng: nằm ngoài mặt cáo, ở góc trên-trái của khung */
.sun-bubble {
  left: -16%; right: auto; top: -44px; bottom: auto; width: min(250px, 50%);
  background: var(--toex-paper); color: var(--toex-ink); border: var(--toex-border); border-radius: 18px;
  box-shadow: var(--toex-shadow); font-size: clamp(14px, 1.1vw, 16px);
}
.sun-bubble::after { right: 22%; left: auto; border-color: var(--toex-ink); }

/* ---------- 6 THẺ KỸ NĂNG ---------- */
.card-row { gap: 16px; }
.skill-card {
  min-height: 316px; padding: 16px 14px 14px; color: var(--toex-ink); background: var(--toex-paper);
  border: var(--toex-border); border-radius: var(--toex-radius-card); box-shadow: var(--toex-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.skill-card.sk-sage { background: var(--toex-sage); }
.skill-card.sk-peach { background: var(--toex-peach); }
.skill-card.sk-cream { background: var(--toex-paper); }
.skill-card:hover, .skill-card.reveal.in:hover { transform: translate(-2px, -2px); box-shadow: var(--toex-shadow-hover); }
.skill-card:focus-visible { outline: 3px solid var(--toex-honey); outline-offset: 4px; }
.sk-icon { width: 44px; height: 44px; background: var(--toex-paper); border: var(--toex-border); border-radius: 12px; box-shadow: none; }
.sk-icon img { width: 24px; height: 24px; display: block; }
.skill-card h3 { color: var(--toex-forest); margin: 14px 0 8px; }
.skill-card p { color: var(--toex-ink); opacity: 1; }
/* nhân vật "ló đầu" từ đáy card: tràn qua padding, mép dưới ảnh nằm sát viền card */
.skill-card { overflow: hidden; }
.sk-art { min-height: 0; margin: 16px -14px -14px; flex: 1 0 auto; display: flex; align-items: flex-end; justify-content: center; }
/* 6 ảnh cùng bề ngang khung gốc (đầu ~45% khung) → cùng một độ rộng là đầu đều nhau; hai mép được card cắt bớt */
.sk-art img {
  display: block; flex: none; max-width: none; height: auto; margin-bottom: -4px;
  width: min(140%, 300px);
  transform: translateX(var(--peek-x, 0)); transition: transform .18s ease;
}
.skill-card:hover .sk-art img { transform: translate(var(--peek-x, 0), -3px); }
.chip, .chip-free { background: var(--toex-forest); color: var(--toex-cream); backdrop-filter: none; border: 0; margin-top: 8px; }
.skill-card .chip { position: absolute; top: 16px; right: 14px; margin: 0; z-index: 1; white-space: nowrap; } /* góc trên phải, không che tay nhân vật */
/* cột theo bề rộng vùng chứa (container 1240px): 6 · 3 · 2 · 1 */
@container (max-width: 1159px) { .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 735px) {
  .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .skill-card { min-height: 0; padding-inline: 12px; }
  .skill-card h3 { min-height: 0; }
  .sk-art { margin-inline: -12px; }
}
@container (max-width: 319px) { .card-row { grid-template-columns: 1fr; } }

/* ---------- BANNER CỘNG ĐỒNG + 2 THẺ ---------- */
.community-banner {
  display: grid; grid-template-columns: 38% 62%; align-items: center; aspect-ratio: 1200 / 420;
  background-color: var(--toex-sage); background-image: var(--toex-grid); background-size: var(--toex-grid-size);
  border: var(--toex-border); border-radius: var(--toex-radius-panel); box-shadow: var(--toex-shadow);
}
.community-banner:hover, .media-card:hover { transform: translate(-2px, -2px); box-shadow: var(--toex-shadow-hover); }
.cb-text { display: flex; flex-direction: column; gap: 10px; padding-left: clamp(20px, 4vw, 56px); position: relative; z-index: 2; }
.cb-kicker { font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--toex-forest); }
.cb-title { font-family: var(--toex-font-display); font-weight: 800; line-height: 1; color: var(--toex-forest); }
.cb-title .cb-toex { font-size: clamp(36px, 5.2vw, 72px); font-weight: 800; letter-spacing: 0; }
.cb-title .cb-comm { display: block; font-size: clamp(28px, 3.8vw, 52px); font-weight: 700; color: var(--toex-moss); }
.cb-sub { font-size: clamp(14px, 1.3vw, 17px); font-weight: 600; color: var(--toex-ink); }
.cb-crew { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cb-group { display: block; height: 94%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; transition: transform .3s ease; }
.community-banner:hover .cb-group { transform: translateY(-4px); }
/* hình con đường: ngang, căn giữa theo chiều dọc, chừa lề phải */
.community-banner:has(.cb-road) { aspect-ratio: 1200 / 320; }
.cb-crew:has(.cb-road) { align-items: center; padding-right: clamp(12px, 2vw, 28px); }
@media (max-width: 800px) {
  .community-banner:has(.cb-road) { aspect-ratio: auto; }
  .cb-crew:has(.cb-road) { aspect-ratio: auto; padding: 8px 12px 16px; }
}
.cb-road { width: 100%; height: auto; max-height: 92%; }
.cb-m { position: absolute; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .3s ease; }
.cb-back { width: 19%; top: 5%; }
.cb-1 { left: 14%; } .cb-2 { left: 40%; } .cb-3 { left: 66%; }
.cb-front { width: 24%; bottom: 0; }
.cb-4 { left: 0; } .cb-5 { left: 24%; width: 27%; z-index: 2; } .cb-6 { left: 51%; } .cb-7 { left: 75%; }
.community-banner:hover .cb-lead { transform: translateY(-4px); }

.media-grid { gap: 24px; margin-top: 28px; }
.media-card {
  border: var(--toex-border); border-radius: var(--toex-radius-panel); box-shadow: var(--toex-shadow);
  background-image: var(--toex-grid); background-size: var(--toex-grid-size);
}
.media-card.sky-card { background-color: var(--toex-sage); }
.media-card.night-card { background-color: var(--toex-peach); }
.mc-title {
  position: absolute; left: 6%; top: 8%; z-index: 2;
  font-family: var(--toex-font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; color: var(--toex-forest);
}
.media-card .pill-cta {
  left: 6%; top: calc(8% + clamp(36px, 3.6vw, 50px)); bottom: auto; transform: none; z-index: 2;
  background: var(--toex-forest); color: var(--toex-cream); border: var(--toex-border); box-shadow: 2px 2px 0 var(--toex-ink);
  padding: 8px 18px; font-size: clamp(12px, 1.1vw, 14px);
}
.media-card:hover .pill-cta { transform: translateY(-2px); }
.mc-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; }
.mc-m { position: absolute; bottom: -6%; width: 33%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .3s ease; }
.mc-left { left: 20%; } .mc-right { right: -1%; }
.mc-laptop { position: absolute; left: 61%; bottom: 8%; width: 19%; transform: translateX(-50%); }
.mc-books { position: absolute; left: 61%; bottom: 6%; width: 16%; transform: translateX(-50%); }
.media-card:hover .mc-m { transform: translateY(-4px); }

/* ---------- HÀNH TRÌNH (số liệu) ---------- */
.impact-card { background: var(--toex-paper); border: var(--toex-border); border-radius: var(--toex-radius-panel); box-shadow: var(--toex-shadow); }
.impact-map { background-color: var(--toex-forest); background-image: none; }
.impact-lines g[stroke] { stroke: var(--toex-sage); opacity: .7; }
.impact-lines g[fill] { fill: var(--toex-honey); }
.ip { background: var(--toex-cream); color: var(--toex-ink); border: var(--toex-border); box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.ip b { color: var(--toex-forest); }
.ip-ic svg [stroke="#0F6B4E"] { stroke: var(--toex-forest); }
.ip-ic svg [fill="#0F6B4E"] { fill: var(--toex-forest); }
.impact-mascot { width: 17%; right: 1%; bottom: 0; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.impact-foot h3 { color: var(--toex-ink); }
.impact-foot h2 { color: var(--toex-forest); }
.impact-foot p { color: var(--toex-muted); }
.btn-more { background: var(--toex-paper); color: var(--toex-forest); border: var(--toex-border); box-shadow: var(--toex-shadow); }
.btn-more:hover { transform: translate(-2px, -2px); box-shadow: var(--toex-shadow-hover); }
.btn-more-arrow { background: var(--toex-forest); color: var(--toex-cream); }

/* ---------- TƯ VẤN ---------- */
.consult-card {
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  background: var(--toex-sage); border: var(--toex-border); border-radius: var(--toex-radius-panel); box-shadow: var(--toex-shadow);
}
.consult-art img { max-width: 320px; animation: scBob 5s ease-in-out infinite; }
.consult h2 { color: var(--toex-ink); }
.consult h2 span { color: var(--toex-forest); text-decoration: underline; text-decoration-color: var(--toex-honey); text-decoration-thickness: 6px; text-underline-offset: 6px; }
.consult-body > p { color: var(--toex-ink); }
.consult-body > p a { color: var(--toex-forest); }
.field { background: var(--toex-paper); border: var(--toex-border); border-radius: var(--toex-radius-input); color: var(--toex-muted); box-shadow: none; }
.field:focus-within { border-color: var(--toex-forest); box-shadow: 0 0 0 3px rgba(233, 162, 59, .55); }
.field input { color: var(--toex-ink); }
.field:has(.invalid) { border-color: var(--toex-error); }
.consult-form button {
  background: var(--toex-forest); color: var(--toex-cream); border: var(--toex-border);
  border-radius: var(--toex-radius-pill); box-shadow: var(--toex-shadow);
}
.consult-form button:hover { transform: translate(-2px, -2px); box-shadow: var(--toex-shadow-hover); }
.form-note { color: var(--toex-muted); }
.form-msg.ok { color: var(--toex-forest); } .form-msg.err { color: var(--toex-error); }

/* ---------- CHÂN TRANG + NÚT ĐĂNG KÝ NỔI ---------- */
.footer { background: var(--toex-forest); }
.footer h4::after { background: var(--toex-honey); }
.contact-list svg { color: var(--toex-honey); }
.newsletter button { background: var(--toex-honey); color: var(--toex-ink); }
.fab { background: var(--toex-honey); color: var(--toex-ink); border: var(--toex-border); box-shadow: var(--toex-shadow); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 112px; padding-bottom: 48px; }
  .hero-content { max-width: 680px; }
  .hero-title { font-size: clamp(36px, 7vw, 56px); }
  .owl { position: relative; width: min(420px, 86vw); max-width: none; margin: 72px 0 0; justify-self: center; transform: none; }
  .sun-bubble { left: 50%; top: -60px; bottom: auto; width: min(280px, 86vw); transform: translate(-50%, 10px) scale(.92); }
  .sun-bubble::after { right: auto; left: calc(50% - 8px); }
}
@media (max-width: 800px) {
  .community-banner { grid-template-columns: 1fr; aspect-ratio: auto; padding-top: 24px; }
  .cb-text { padding: 0 20px; }
  .cb-crew { height: auto; aspect-ratio: 16 / 9; }
  .community-banner, .media-card { box-shadow: var(--toex-shadow); }
  .media-card { aspect-ratio: 4 / 3; }
  .mc-scene { height: 62%; }
  .consult-card { grid-template-columns: 1fr; gap: 20px; }
  .consult-art img { max-width: 170px; }
}
@media (max-width: 767px) {
  .owl { width: min(300px, 80vw); }
  .hero-title { font-size: clamp(32px, 9vw, 44px); }
  .typed { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .owl-float, .consult-art img { animation: none !important; }
  .owl-float img, .cb-m, .cb-group, .mc-m { transition: none !important; transform: none !important; }
  .sk-art img { transition: none !important; transform: translateX(var(--peek-x, 0)) !important; }
}

/* ---------- HỘP KHUYẾN MÃI (promo.js tự chèn style; dùng bộ chọn cụ thể hơn để ghi đè) ---------- */
.pm-root .pm-card { background: var(--toex-peach); border: var(--toex-border); box-shadow: var(--toex-shadow); }
.pm-root .pm-kicker { color: var(--toex-ink); }
.pm-root .pm-title { color: var(--toex-ink); }
.pm-root .pm-title b { color: var(--toex-forest); }
.pm-root .pm-sun { background: url("assets/toex-study-club/hero-fox-320.webp") center / contain no-repeat; }
.pm-root .pm-sun svg { display: none; } /* cáo thay mặt trời cũ */
.pm-root .pm-pill { background: var(--toex-paper); border: var(--toex-border); color: var(--toex-forest); }
.pm-root .pm-cta { background: var(--toex-forest); color: var(--toex-cream); border: var(--toex-border); }
.pm-root .pm-cta span { background: var(--toex-cream); color: var(--toex-forest); }

/* ================= THIẾT KẾ LẠI v2 (theo góp ý art director) ================= */
/* --- 2 thẻ Buổi học mẫu / Bài viết: chữ trái 43% + minh hoạ phải 57% --- */
.media-card {
  display: grid; grid-template-columns: 43% 57%; grid-template-rows: 1fr auto auto 1fr;
  aspect-ratio: 2.2 / 1; padding: 0 0 0 clamp(18px, 2.2vw, 28px);
}
.mc-title { position: static; grid-area: 2 / 1; font-size: clamp(22px, 2.2vw, 28px); }
.media-card .pill-cta {
  position: static; grid-area: 3 / 1; justify-self: start; margin-top: 14px;
  height: 40px; padding: 0 18px; font-size: 13px; box-shadow: 3px 3px 0 var(--toex-ink);
}
.media-card:hover .pill-cta { transform: translate(-1px, -1px); }
.mc-scene { position: relative; grid-area: 1 / 2 / 5 / 3; height: 100%; left: auto; right: auto; }
.mc-m { bottom: -4%; width: 54%; }
.mc-left { left: -6%; } .mc-right { right: -4%; }
.mc-laptop, .mc-books { left: 47%; bottom: 4%; width: 15%; z-index: 0; }

/* --- Khối thành tích: bỏ mảng trang trí, 4 thẻ số liệu đồng cấp + 1 dòng statement + mèo lớn --- */
.impact-map {
  aspect-ratio: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3.4vw, 40px) clamp(28px, 3vw, 36px);
}
.impact-lines { display: none; }
.ip, .ip1, .ip2, .ip3, .ip4 {
  position: static; width: auto; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 128px; padding: 18px 16px; border-radius: 18px; box-shadow: 4px 4px 0 var(--toex-ink);
}
.ip:hover { transform: translate(-2px, -2px); }
.ip-ic svg { width: 30px; height: 30px; }
.ip b { font-size: clamp(26px, 2.5vw, 36px); font-weight: 800; }
.ip4 b { font-size: clamp(24px, 2.2vw, 32px); }
.ip span { font-size: 14px; line-height: 1.35; color: var(--toex-ink); }
.ip5 {
  position: static; grid-column: 1 / 4; width: auto; min-height: 0; margin-top: 14px; padding: 0;
  flex-direction: row; align-items: center; gap: 14px;
  background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--toex-cream);
}
.ip5:hover { transform: none; }
.ip5 .ip-ic svg { width: 34px; height: 34px; }
.ip5 p { max-width: 560px; margin: 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; color: var(--toex-cream); }
.ip5 p b { color: var(--toex-honey); }
.impact-mascot {
  position: relative; grid-column: 4; grid-row: 2; justify-self: end; align-self: end;
  width: clamp(130px, 13vw, 175px); right: auto; margin: 0 0 clamp(-40px, -3vw, -30px); z-index: 1;
}
/* chân khối: tiêu đề lớn trái 65%, nút giữa phải 35% */
.impact-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 30px 30px; }
.impact-foot h3 { font-size: 15px; font-weight: 600; }
.impact-foot h2 { font-size: clamp(30px, 3.4vw, 42px); margin: 6px 0 10px; }
.impact-foot p { max-width: 540px; font-size: 15px; line-height: 1.55; color: var(--toex-ink); opacity: .78; }
.btn-more { justify-self: end; height: 48px; padding: 0 8px 0 20px; gap: 12px; font-size: 14px; }
.btn-more-arrow { width: 34px; height: 34px; }

@media (max-width: 1023px) {
  .impact-map { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 28px; }
  .ip5 { grid-column: 1 / -1; }
  .impact-mascot { grid-column: 2; grid-row: auto; margin-bottom: -28px; }
}
@media (max-width: 767px) {
  .media-card { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 22px 0 0 20px; }
  .mc-title { grid-area: 1 / 1; } .media-card .pill-cta { grid-area: 2 / 1; }
  .mc-scene { grid-area: 3 / 1; height: auto; aspect-ratio: 16 / 9; margin-top: 8px; }
  .impact-foot { grid-template-columns: 1fr; gap: 18px; }
  .btn-more { justify-self: start; }
}

/* --- v2.1: bớt linh vật — thẻ media dùng nội dung thật, khối thành tích không mascot --- */
.media-card { aspect-ratio: auto; min-height: 250px; }
.mc-scene.mc-video, .mc-scene.mc-posts {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 22px 22px 22px 0; height: auto;
}
.mc-shot {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border: var(--toex-border); border-radius: 14px; box-shadow: var(--toex-shadow); background: #1d1d1d;
  transition: transform .2s ease;
}
.mc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; padding-left: 3px;
  background: var(--toex-honey); color: var(--toex-ink); border: var(--toex-border); box-shadow: 2px 2px 0 var(--toex-ink);
}
.mc-meta { font-size: 13px; color: var(--toex-ink); opacity: .8; }
.mc-meta b { font-weight: 700; opacity: 1; }
.mc-post {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--toex-paper); border: var(--toex-border); border-radius: 14px; box-shadow: 3px 3px 0 var(--toex-ink);
  transition: transform .2s ease;
}
.mc-post:nth-child(2) { margin-left: 18px; }
.mc-post i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--toex-moss); }
.mc-post b { font-size: 14.5px; line-height: 1.35; color: var(--toex-ink); }
.mc-post small { font-size: 12px; color: var(--toex-muted); }
.media-card:hover .mc-shot, .media-card:hover .mc-post:first-child { transform: translateY(-3px); }

/* nhịp dọc giữa các section */
.skills { padding: 64px 0 56px; }
.media { padding: 40px 0 104px; }
.impact { padding: 0 0 104px; }
.consult { padding: 0 0 112px; }

/* form tư vấn: rộng bằng hệ section, là điểm chuyển đổi cuối trang */
.consult-card { max-width: none; min-height: 390px; padding: 42px 56px; gap: 42px; align-items: center; }
.consult-art img { max-width: 220px; }
.consult h2 { font-size: clamp(30px, 3.2vw, 38px); }
.field { height: 48px; }
.consult-form { gap: 12px; }
.consult-form button { height: 50px; }

@media (max-width: 767px) {
  .mc-scene.mc-video, .mc-scene.mc-posts { padding: 6px 20px 20px 0; aspect-ratio: auto; }
  .consult-card { padding: 28px 22px; min-height: 0; }
  .consult-art img { max-width: 160px; }
}
.ip5 .ip-ic { display: none; } /* bỏ icon thừa trước dòng statement */

/* --- v2.2: tinh chỉnh theo soát vòng 3 --- */
.media-card { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 24px; padding: 24px; min-height: 220px; }
.mc-scene.mc-video, .mc-scene.mc-posts { padding: 0; }
.mc-post { position: relative; min-height: 72px; padding: 14px 16px 14px 76px; }
.mc-post::before { /* thumbnail nhỏ cho cảm giác "bài viết thật" */
  content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 50px; height: 50px;
  border: var(--toex-border); border-radius: 10px; background: var(--toex-honey);
  background-image: linear-gradient(var(--toex-ink) 0 0), linear-gradient(var(--toex-ink) 0 0), linear-gradient(var(--toex-ink) 0 0);
  background-size: 60% 3px, 45% 3px, 52% 3px; background-position: 9px 13px, 9px 21px, 9px 29px; background-repeat: no-repeat;
}
.mc-post:nth-child(2)::before { background-color: var(--toex-sage); }
.mc-post:nth-child(2) { margin-left: 0; }
.mc-post i { font-size: 11px; }
.mc-post b { font-size: 15px; }
.ip5 { margin-top: 24px; }
.ip5 p { max-width: 620px; font-size: 17px; line-height: 1.5; }
.impact-foot { min-height: 150px; padding: 26px 28px; }
.btn-more { min-width: 190px; height: 46px; justify-content: space-between; }
.consult-card { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 40px; padding: 44px 52px; }
.consult-art img { width: 200px; max-width: 80%; }
@media (max-width: 767px) {
  .media-card { grid-template-columns: 1fr; padding: 22px 20px; }
  .consult-card { grid-template-columns: 1fr; padding: 28px 22px; }
}
.cb-road { max-height: 88%; } /* hình con đường 4 nhân vật */

/* --- v2.3: tinh chỉnh theo soát vòng 4 --- */
.community-banner { grid-template-columns: 31% 69%; column-gap: 28px; }
.cb-road { width: 92%; justify-self: end; }
.media-card { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: 18px; }
.mc-title { font-size: clamp(20px, 1.9vw, 23px); line-height: 1.1; }
.ip5 p { max-width: 680px; font-size: 16px; }
.media { padding-bottom: 84px; }
@media (max-width: 800px) { .community-banner { grid-template-columns: 1fr; } .cb-road { width: 100%; } }

/* --- v2.4: chốt theo soát vòng 5 --- */
.hero-title .typed { display: inline-block; min-height: 1.15em; min-width: 2ch; } /* giữ chỗ cho chữ chạy */
.impact-foot p { max-width: 620px; font-size: 15px; line-height: 1.55; opacity: .85; }
.consult-art img { width: 210px; max-width: 78%; }
@media (max-width: 767px) { /* điện thoại: thẻ media 1 cột, preview chiếm hết bề ngang */
  .media-card { grid-template-columns: 1fr; padding: 22px 20px; }
  .mc-scene.mc-video, .mc-scene.mc-posts { padding: 6px 0 0; }
}

/* =====================================================================
   v3 — RETRO TƯƠNG PHẢN CAO (lấy đầu trang Giới thiệu làm chuẩn)
   olive #728A46 + lưới trắng 15% · cầu vồng đỏ #D56461 / cam #E58344 / vàng #EBC24F / xanh #8AAB70
   chữ hiển thị Fraunces 900 trắng viền đen · mực #121212 · nút cam #F07A3C chữ đen
   ===================================================================== */
:root {
  --rt-olive: #728A46; --rt-red: #D56461; --rt-orange: #E58344; --rt-yellow: #EBC24F; --rt-green: #8AAB70;
  --rt-cta: #F07A3C; --rt-ink: #121212; --rt-cream: #F7F0DF;
  --rt-grid: linear-gradient(to right, rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.15) 1px, transparent 1px);
  --rt-display: "Fraunces", "Plus Jakarta Sans", serif;
}
body { background: var(--rt-cream); color: var(--rt-ink); }
.rt-display, .hero-kicker, .hero-title .typed, .cb-title .cb-toex, .impact-foot h2 {
  font-family: var(--rt-display); font-weight: 900; font-variation-settings: "SOFT" 100; letter-spacing: -.01em;
}
/* hero: nền olive lưới, chữ trắng viền đen + bóng cứng */
.hero { background-color: var(--rt-olive); background-image: var(--rt-grid); background-size: 32px 32px; border-bottom: 3px solid var(--rt-ink); }
.hero-kicker, .hero-title .typed {
  color: #fff; -webkit-text-stroke: 3px var(--rt-ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--rt-ink);
}
.hero-kicker { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; }
.hero-title .typed {
  display: inline-block; background: var(--rt-yellow); border: 3px solid var(--rt-ink); border-radius: 12px;
  padding: 2px 16px; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--rt-ink); font-size: clamp(32px, 3.8vw, 54px);
}
.caret { background: #fff; }
.hero-tag { background: var(--rt-ink); color: #fff; }
.hero-desc { color: var(--rt-ink); background: var(--rt-cream); border: 2px solid var(--rt-ink); border-radius: 14px; padding: 12px 16px; box-shadow: 4px 4px 0 var(--rt-ink); font-weight: 600; }
.btn-hero { background: var(--rt-cta); color: var(--rt-ink); border: 3px solid var(--rt-ink); box-shadow: 4px 4px 0 var(--rt-ink); font-weight: 800; }
.owl-art { background: var(--rt-yellow); border: 3px solid var(--rt-ink); box-shadow: 6px 6px 0 var(--rt-ink); }
.sun-bubble { border: 3px solid var(--rt-ink); color: var(--rt-ink); font-weight: 700; }
/* thẻ kỹ năng: thân kem, dải màu cầu vồng trên đầu theo chu kỳ */
.skill-card, .skill-card.sk-sage, .skill-card.sk-peach, .skill-card.sk-cream {
  background: var(--rt-cream); border: 3px solid var(--rt-ink); box-shadow: 5px 5px 0 var(--rt-ink); border-top: 12px solid var(--accent, var(--rt-red));
}
.card-row .skill-card:nth-child(4n+1) { --accent: var(--rt-red); }
.card-row .skill-card:nth-child(4n+2) { --accent: var(--rt-orange); }
.card-row .skill-card:nth-child(4n+3) { --accent: var(--rt-yellow); }
.card-row .skill-card:nth-child(4n+4) { --accent: var(--rt-green); }
.skill-card h3 { color: var(--rt-ink); font-weight: 800; }
.skill-card p { color: var(--rt-ink); }
.chip, .chip-free { background: var(--rt-ink); color: #fff; }
/* banner cộng đồng: olive lưới, tiêu đề Fraunces trắng viền đen */
.community-banner { background-color: var(--rt-olive); background-image: var(--rt-grid); background-size: 32px 32px; border: 3px solid var(--rt-ink); box-shadow: 6px 6px 0 var(--rt-ink); }
.cb-kicker { color: var(--rt-ink); background: var(--rt-yellow); border: 2px solid var(--rt-ink); border-radius: 999px; padding: 3px 12px; align-self: flex-start; }
.cb-title .cb-toex { color: #fff; -webkit-text-stroke: 2.5px var(--rt-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--rt-ink); }
.cb-title .cb-comm { color: var(--rt-yellow); -webkit-text-stroke: 2px var(--rt-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--rt-ink); font-family: var(--rt-display); font-weight: 900; }
.cb-sub { color: var(--rt-ink); background: var(--rt-cream); border: 2px solid var(--rt-ink); border-radius: 999px; padding: 4px 14px; align-self: flex-start; }
/* thẻ media: kem, nút cam chữ đen */
.media-card, .media-card.sky-card, .media-card.night-card { background-color: var(--rt-cream); background-image: none; border: 3px solid var(--rt-ink); box-shadow: 5px 5px 0 var(--rt-ink); }
.media-card.sky-card { border-top: 12px solid var(--rt-green); }
.media-card.night-card { border-top: 12px solid var(--rt-red); }
.mc-title { color: var(--rt-ink); }
.media-card .pill-cta { background: var(--rt-cta); color: var(--rt-ink); border: 2px solid var(--rt-ink); }
.mc-play { background: var(--rt-yellow); }
/* khối thành tích: olive lưới, thẻ số kem, số Fraunces */
.impact-map { background-color: var(--rt-olive); background-image: var(--rt-grid); background-size: 32px 32px; }
.ip, .ip1, .ip2, .ip3, .ip4 { background: var(--rt-cream); border: 3px solid var(--rt-ink); box-shadow: 5px 5px 0 var(--rt-ink); }
.ip b { font-family: var(--rt-display); font-weight: 900; color: var(--rt-ink); }
.ip span { color: var(--rt-ink); }
.ip5 p { color: var(--rt-ink); background: var(--rt-cream); border: 2px solid var(--rt-ink); border-radius: 14px; padding: 10px 16px; font-weight: 600; }
.ip5 p b { color: var(--rt-red); }
.impact-card { border: 3px solid var(--rt-ink); box-shadow: 6px 6px 0 var(--rt-ink); }
.impact-foot { background: var(--rt-cream); }
.impact-foot h2 { color: var(--rt-ink); font-size: clamp(34px, 4vw, 52px); }
.impact-foot h3, .impact-foot p { color: var(--rt-ink); opacity: 1; }
.btn-more { background: var(--rt-cta); color: var(--rt-ink); border: 3px solid var(--rt-ink); }
.btn-more-arrow { background: var(--rt-ink); color: #fff; }
/* form tư vấn: nền xanh cầu vồng, nút cam chữ đen */
.consult-card { background: var(--rt-green); border: 3px solid var(--rt-ink); box-shadow: 6px 6px 0 var(--rt-ink); }
.consult h2, .consult-body > p { color: var(--rt-ink); }
.consult h2 span { color: var(--rt-ink); text-decoration-color: var(--rt-yellow); }
.consult-form button { background: var(--rt-cta); color: var(--rt-ink); border: 3px solid var(--rt-ink); font-weight: 800; }
.field { border: 2px solid var(--rt-ink); background: #fff; }
/* thanh đầu khi còn nằm trên hero olive: chữ trắng, nút kem viền đen */
.header:not(.scrolled) .logo { color: #fff; text-shadow: 2px 2px 0 var(--rt-ink); }
.header:not(.scrolled) .pill { background: var(--rt-cream); color: var(--rt-ink); border: 2px solid var(--rt-ink); }
.ip.ip5 { background: none; border: 0; box-shadow: none; } /* chỉ giữ khung của dòng chữ bên trong */
/* soát v3: chữ nhấn màu cầu vồng chuyển thành gạch chân để đủ tương phản; placeholder đậm hơn */
.ip5 p b { color: var(--rt-ink); font-weight: 800; text-decoration: underline 4px var(--rt-red); text-underline-offset: 4px; }
.ip5 p { width: fit-content; max-width: 680px; box-shadow: 4px 4px 0 var(--rt-ink); }
.consult input::placeholder { color: #555; opacity: 1; }
.consult-form + p, .consult .secure, .consult small { color: #303030; }
.form-note { color: #303030; }