/* Bài Học Mới – các trang con (/danh-cho-giao-vien/, /danh-cho-bo-me/)
   Dùng chung styles.css; file này chỉ thêm thành phần riêng của trang con. */

.hl-sun { color: #a35f00; } .hl-sun::after { background: #ffe08a; }
.hl-coral { color: #d02d4c; } .hl-coral::after { background: #ffd3dc; }
.main-nav ul a[aria-current="page"] { background: rgb(123 79 224 / .12); color: var(--purple-deep); }
.eyebrow-purple { background: var(--purple-pale); color: var(--purple-deep); }
.section-head-left > p:last-child { font-size: 1.1rem; }
.mini-note { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }
.h4-like { font-size: 1.18rem; font-weight: 800; margin-bottom: .25em; }
.text-link { font-weight: 800; }

/* ---------- Breadcrumb ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; font: 700 .92rem/1.2 var(--font-body); color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: #a69fc6; }
.crumbs a { color: var(--purple-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Hero trang con ---------- */
.subhero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(24px, 4vw, 48px)) 0 clamp(80px, 9vw, 120px);
  background: radial-gradient(1000px 460px at 30% 0%, #fff 0%, rgb(255 255 255 / 0) 60%), linear-gradient(180deg, #bfe7ff 0%, #d7f0ff 50%, #a8dcff 100%);
}
.subhero-teacher { background: radial-gradient(1000px 460px at 30% 0%, #fff 0%, rgb(255 255 255 / 0) 60%), linear-gradient(180deg, #fff3cf 0%, #fff8e6 45%, #ffe2a1 100%); }
.subhero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.subhero h1 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.7rem); font-weight: 800; line-height: 1.1; margin-bottom: .45em; }
.subhero .h1-kicker { margin: 0 0 18px; }
.subhero .hero-lead { margin: 0 0 26px; max-width: 620px; }
.subhero .hero-actions, .subhero .hero-chips { justify-content: flex-start; }
.subhero-teacher .h1-kicker { box-shadow: 0 4px 0 #f6dc9c; }
.subhero-teacher .wave-cream, .subhero .wave-cream { fill: var(--cream); }

.subhero-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.art-disc { position: absolute; width: min(440px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0 55%, rgb(255 255 255 / .55) 56% 70%, transparent 71%); }
.teacher-hero-img { position: relative; width: min(330px, 74%); filter: drop-shadow(0 22px 18px rgb(120 80 10 / .25)); }
.subhero-art .floaty { width: clamp(52px, 7vw, 88px); }
.subhero-art .floaty.f1 { top: 2%; right: 8%; }
.subhero-art .floaty.f2 { top: 38%; left: 2%; }
.subhero-art .floaty.f3 { bottom: 8%; right: 2%; }
.subhero-art .mascot-bubble { left: 0; bottom: -10px; max-width: min(380px, 96%); }

.hero-phone { position: relative; width: min(232px, 58%); padding: 10px; border-radius: 40px; background: linear-gradient(160deg, #2c2250, #171233); box-shadow: 0 9px 0 #0e0a22, 0 40px 60px -30px rgb(23 18 51 / .7); transform: rotate(3deg); }
.hero-phone .phone-screen { border-radius: 31px; }
.hero-kid { position: absolute; filter: drop-shadow(0 18px 14px rgb(18 60 120 / .28)); }
.hero-kid.k1 { width: min(170px, 36%); left: 2%; bottom: 6%; animation: bob 5s ease-in-out infinite; }
.hero-kid.k2 { width: min(150px, 32%); right: 0; top: 6%; animation: bob 4.6s ease-in-out -2s infinite; }

@media (max-width: 900px) {
  .subhero-grid { grid-template-columns: 1fr; }
  .subhero-art { min-height: 360px; }
}
@media (max-width: 640px) {
  .subhero .hero-actions .btn { width: 100%; justify-content: flex-start; }
  .subhero-art { min-height: 0; padding-bottom: 8px; }
  .subhero-art .mascot-bubble { position: relative; left: auto; bottom: auto; margin: -18px 6px 0; border-radius: 26px; }
  .art-disc { width: 80%; }
  .subhero-art .floaty.f2 { display: none; }
}

/* ---------- Thư tâm sự 2 cột ---------- */
.talk-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.talk-grid .letter { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) { .talk-grid { grid-template-columns: 1fr; } .talk-grid .letter { position: relative; top: auto; } }

/* Dòng thời gian buổi tối */
.timeline { position: relative; display: grid; gap: 14px; }
.timeline::before { content: ''; position: absolute; left: 39px; top: 12px; bottom: 12px; width: 4px; background: repeating-linear-gradient(180deg, #e5d9ff 0 8px, transparent 8px 14px); }
.timeline li { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: start; }
.timeline time {
  position: relative; z-index: 1; display: grid; place-items: center; height: 40px; margin-top: 10px;
  border-radius: 999px; background: var(--purple); color: #fff; font: 800 1rem/1 var(--font-display); box-shadow: 0 4px 0 var(--purple-deep);
}
.timeline li:last-child time { background: #2c2250; box-shadow: 0 4px 0 #0e0a22; }
.timeline .tl-card { padding: 14px 18px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); }
.timeline h3 { font-size: 1.08rem; margin-bottom: .2em; }
.timeline p { margin: 0; font-size: 1rem; }
.timeline-end { margin: 18px 0 0 94px; font: 700 1.08rem/1.5 var(--font-display); color: var(--purple-deep); }
@media (max-width: 480px) {
  .timeline::before { left: 31px; }
  .timeline li { grid-template-columns: 64px 1fr; gap: 10px; }
  .timeline-end { margin-left: 0; }
}

/* ---------- Lưới nỗi lo ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain-grid .worry { align-items: start; }
.pain-grid .worry img { width: 72px; height: 72px; }
.pain-grid .worry { grid-template-columns: 72px 1fr; }
@media (max-width: 1000px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pain-grid { grid-template-columns: 1fr; } }

/* ---------- Thay vì… / Bây giờ ---------- */
.fix-list { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.fix {
  display: grid; grid-template-columns: 64px .8fr 1.2fr; gap: 18px; align-items: center;
  padding: 18px 22px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm);
}
.fix .tool-ico { width: 56px; height: 56px; border-radius: 18px; }
.fix-before { margin: 0; font: 700 1rem/1.4 var(--font-display); color: var(--muted); }
.fix-before s { text-decoration-color: rgb(215 49 79 / .55); text-decoration-thickness: 2px; }
.fix h3 { font-size: 1.15rem; margin-bottom: .25em; }
.fix p { margin: 0; font-size: 1rem; }
@media (max-width: 760px) {
  .fix { grid-template-columns: 52px 1fr; gap: 6px 14px; padding: 16px; }
  .fix .tool-ico { width: 48px; height: 48px; grid-row: span 2; align-self: start; }
}

/* ---------- Soạn thử một câu ---------- */
.builder {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(18px, 3vw, 32px); align-items: start;
  max-width: 1040px; margin: 0 auto; padding: clamp(18px, 3vw, 32px);
  border-radius: 36px; background: #fffaf4; border: 4px solid #fff;
  box-shadow: 0 8px 0 #f3e1b8, 0 40px 70px -40px rgb(160 100 0 / .45);
}
.builder-form { display: grid; gap: 16px; margin: 0; }
.builder-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.builder-form legend, .builder-form .field-label { display: block; margin-bottom: 6px; font: 800 .95rem/1.3 var(--font-display); color: var(--ink); }
.builder-form input[type="text"] {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff;
  font: 700 1.05rem/1.2 var(--font-body); color: var(--ink);
}
.builder-form input[type="text"]:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgb(123 79 224 / .18); }
.opt { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.opt label { display: inline-flex; align-items: center; gap: 6px; font: 700 .86rem/1 var(--font-body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.opt input[type="radio"] { accent-color: var(--grass-deep); width: 20px; height: 20px; }
.builder-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 84px; gap: 10px; }
.builder-form .emoji-input { text-align: center; font-size: 1.5rem; padding-inline: 6px; }
.kid-emoji { margin: 10px 0 -12px; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; }
.builder-preview { display: grid; gap: 4px; }
.kid-frame { padding: 12px; border-radius: 30px; background: linear-gradient(160deg, #8f6af0, #5a32b8); box-shadow: 0 8px 0 #43248f, 0 30px 50px -30px rgb(67 36 143 / .7); }
.kid-screen {
  position: relative; min-height: 340px; padding: 44px 16px 26px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #bfe7ff, #e6f6ff 60%, #d4f3c4 60.5%, #bfeaa8);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.kid-label { position: absolute; top: 10px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .8); font: 800 .75rem/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kid-q { margin: 14px auto 0; max-width: 460px; padding: 10px 18px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #cfe6fb; font: 800 clamp(1.2rem, 1rem + 1vw, 1.6rem)/1.3 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.kid-answers { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 18px); }
.kid-card {
  min-width: 96px; min-height: 84px; max-width: 160px; padding: 10px 14px; border: 0; border-radius: 18px; cursor: pointer;
  background: #fff; color: var(--ink); font: 800 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.15 var(--font-display); overflow-wrap: anywhere;
  box-shadow: 0 6px 0 #ffc531, 0 14px 20px -12px rgb(36 26 77 / .4); transition: transform .15s;
}
.kid-card:nth-child(2) { box-shadow: 0 6px 0 #63c3ff, 0 14px 20px -12px rgb(36 26 77 / .4); }
.kid-card:nth-child(3) { box-shadow: 0 6px 0 #ff8a9c, 0 14px 20px -12px rgb(36 26 77 / .4); }
.kid-card:hover { transform: translateY(-3px); }
.kid-card.is-wrong { animation: wiggle .4s; filter: grayscale(.5); opacity: .6; }
.kid-card.is-right { animation: pop .4s; outline: 5px solid var(--grass); outline-offset: 4px; }
.builder .demo-feedback { margin-top: 14px; }
@media (max-width: 860px) { .builder { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kid-answers { gap: 8px; } .kid-card { min-width: 70px; min-height: 72px; padding: 8px; } }

/* ---------- Nhân vật giáo viên ---------- */
.npc-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.npc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.npc { padding: 12px 8px 12px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 5px 0 #eadff9, var(--shadow-sm); }
.npc img { height: 130px; width: auto; margin: 0 auto 8px; filter: drop-shadow(0 8px 6px rgb(36 26 77 / .18)); }
.npc h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.npc-shot { position: relative; }
.npc-shot .tablet-screen { aspect-ratio: 4 / 3; }
.npc-shot .board-badge { left: 22px; right: auto; bottom: 22px; max-width: 70%; }
.npc-shot .npc-pop { position: absolute; right: -10px; bottom: -18px; width: clamp(110px, 16vw, 170px); filter: drop-shadow(0 18px 14px rgb(36 26 77 / .3)); }
@media (max-width: 1000px) { .npc-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .npc-grid { gap: 8px; } .npc { padding: 8px 4px; border-radius: 18px; } .npc img { height: 80px; } .npc h3 { font-size: .82rem; } }

/* ---------- Bốn bước ---------- */
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps-4 li { box-shadow: 0 6px 0 #f6dc9c, var(--shadow-sm); }
.steps-4 .start-num { background: var(--sun-deep); }
@media (max-width: 1000px) { .steps-4 { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (max-width: 560px) { .steps-4 { grid-template-columns: 1fr; } }

/* ---------- Hứa / chưa làm ---------- */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.col-card { padding: clamp(20px, 3vw, 30px); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
.col-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin-bottom: 14px; }
.col-card h3 img { width: 48px; height: 48px; object-fit: contain; }
.tick-list { display: grid; gap: 12px; }
.tick-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.tick-list .tick { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e5f8dc; color: var(--grass-deep); }
.tick-list.is-no .tick { background: #ffe3e8; color: #d7314f; }
.tick-list.is-plain .tick { background: var(--purple-pale); color: var(--purple); }
.tick svg { width: 20px; height: 20px; }
.tick-list b { display: block; font-family: var(--font-display); font-size: 1.06rem; }
.tick-list p { margin: 0; font-size: .98rem; }
@media (max-width: 860px) { .two-cols { grid-template-columns: 1fr; } }

/* ---------- Game / bàn học ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin: 8px 0 6px; }
.compare th { padding: 0 16px 4px; text-align: left; font: 800 .82rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.compare td { padding: 14px 16px; background: #fff; font-size: 1rem; line-height: 1.45; vertical-align: top; }
.compare td:first-child { border-radius: 18px 0 0 18px; background: #eefaff; color: var(--ink); font-weight: 700; }
.compare td:last-child { border-radius: 0 18px 18px 0; background: #fff6ee; }
.compare tr { filter: drop-shadow(0 4px 8px rgb(36 26 77 / .06)); }
@media (max-width: 560px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare td { display: block; }
  .compare tr { margin-bottom: 10px; }
  .compare td:first-child { border-radius: 18px 18px 0 0; }
  .compare td:last-child { border-radius: 0 0 18px 18px; }
  .compare td::before { content: attr(data-label); display: block; font: 800 .74rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
}
.insight { margin: 22px 0 0; padding: 18px 22px; border-radius: 22px; background: var(--purple-pale); font: 700 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.5 var(--font-display); color: var(--purple-deep); }
.sources { margin: 18px 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.sources a { color: inherit; }

/* ---------- Giữ lại / bỏ đi ---------- */
.keep-drop { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.keep-art { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 6px; margin: 18px 0 0; padding: 12px 10px 0; border-radius: 22px; background: linear-gradient(180deg, #fff, #effbe7); }
.keep-art img { height: 104px; width: auto; }
.keep-art .pet { height: 84px; width: 84px; border-radius: 22px; object-fit: cover; margin-bottom: 10px; box-shadow: 0 4px 0 #cfe6fb; }
@media (max-width: 860px) { .keep-drop { grid-template-columns: 1fr; } }

/* ---------- Toàn diện ---------- */
.domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 0; }
.domain { --c: var(--meadow); padding: 18px 16px; border-radius: var(--r); background: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 35%, #fff), var(--shadow-sm); text-align: center; }
.domain img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 8px; }
.domain h3 { font-size: 1.08rem; margin-bottom: .2em; color: color-mix(in srgb, var(--c) 80%, #000); }
.domain p { margin: 0; font-size: .94rem; line-height: 1.5; }
.d-forest { --c: var(--forest); } .d-coast { --c: var(--coast); } .d-summit { --c: var(--summit); }
@media (max-width: 900px) { .domains { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .domains { grid-template-columns: 1fr; } }
.offscreen { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 26px; padding: 20px 24px; border-radius: 26px; background: #fff8dd; border: 3px dashed #f3cf6a; }
.offscreen img { width: 120px; }
.offscreen p { margin: 0; font-size: 1.06rem; }
.offscreen p + p { margin-top: .6em; }
@media (max-width: 560px) { .offscreen { grid-template-columns: 1fr; text-align: center; } .offscreen img { margin: 0 auto; width: 96px; } }

/* Dải ước mơ */
.dreams { margin-top: clamp(40px, 6vw, 64px); }
.dreams-head { max-width: 760px; margin: 0 auto 18px; text-align: center; }
.dreams-head h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.dreams-head p { margin: 0; }
.marquee { overflow: hidden; padding: 8px 0 14px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: slide 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.dream { flex: none; width: 148px; margin: 0; padding: 10px 8px 12px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 4px 0 var(--line); }
.dream img { height: 150px; width: auto; margin: 0 auto 6px; }
.dream figcaption { font: 800 .95rem/1.2 var(--font-display); color: var(--ink); }
@keyframes slide { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track [aria-hidden="true"] { display: none; }
}

/* ---------- Ba thứ tiếng ---------- */
.pets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pet-card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 5px 0 #cfe6fb, var(--shadow-sm); }
.pet-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pet-names { display: grid; gap: 4px; padding: 10px 12px 14px; }
.pet-names p { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; font-size: .95rem; line-height: 1.25; }
.pet-names .vi { font: 800 1.1rem/1.2 var(--font-display); color: var(--ink); }
.pet-names .en { color: #0b62c4; font-weight: 700; }
.pet-names .zh { color: var(--summit); font-weight: 700; }
.pet-names .zh small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.say {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; margin-left: auto;
  border: 0; border-radius: 50%; background: var(--sky-pale); color: var(--blue); cursor: pointer;
}
.say svg { width: 18px; height: 18px; }
.say:hover { background: var(--blue); color: #fff; }
.say.is-speaking { background: var(--grass); color: #fff; }
@media (max-width: 1000px) { .pets { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pets { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Trường nào ---------- */
.school-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.school { padding: 24px 22px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 6px 0 #c9efb8, var(--shadow-sm); }
.school img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 10px; }
.school p { margin: 0; font-size: 1rem; }
.school p + p { margin-top: .7em; }
@media (max-width: 960px) { .school-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

/* ---------- Mẹo mười lăm phút ---------- */
.tips-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.tips { display: grid; gap: 12px; counter-reset: tip; }
.tips li { counter-increment: tip; position: relative; padding: 16px 18px 16px 66px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); }
.tips li::before { content: counter(tip); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--grass); color: #fff; font: 800 1.1rem/1 var(--font-display); }
.tips h3 { font-size: 1.1rem; margin-bottom: .2em; }
.tips p { margin: 0; font-size: 1rem; }
.who-note { margin-top: 18px; padding: 18px 20px; border-radius: 22px; background: var(--sky-pale); border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.who-note p { margin: 0; font-size: 1rem; }
.who-note p + p { margin-top: .6em; }
.tips-side .tablet { transform: rotate(-2deg); }
.tips-side .shot-caption { min-height: 0; }
@media (max-width: 900px) { .tips-wrap { grid-template-columns: 1fr; } }

/* ---------- Gửi trang ---------- */
.share-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: center;
  max-width: 980px; margin: 0 auto; padding: clamp(18px, 3vw, 28px); border-radius: 30px;
  background: #fff; box-shadow: var(--shadow);
}
.share-card img { width: 96px; }
.share-card h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); margin-bottom: .25em; }
.share-card p { margin: 0; }
.share-card img { grid-row: span 2; }
.share-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .share-card { grid-template-columns: 1fr; text-align: center; } .share-card img { margin: 0 auto; grid-row: auto; } .share-actions { grid-column: auto; justify-content: center; } }

.page-final { padding-top: clamp(48px, 7vw, 80px); }
.final-inner .hero-actions { margin-top: 4px; }

/* Footer 4 cột của trang con dùng chung quy tắc trong styles.css */