/* ===== Khu "Road to TechDay 2026": cuộc thi + ngày hội gặp nhau ở 11.12 ===== */

/* Hai nút dưới tiêu đề banner */
.hero-paths { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero-paths .btn { gap: 10px; }
.hero-paths-soon { font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); }

/* Nội dung dùng chung */
.path-text { margin: 0 0 20px; color: var(--color-muted); max-width: 62ch; }
.path-sub { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--color-muted); }
.path-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.path-actions .event-cta { gap: 8px 14px; }
.path-actions .btn-lg { min-height: 44px; padding: 10px 22px; font-size: 1rem; }

/* Trục thời gian cuộc thi: 3-4 mốc (--n), đường nối tô dần, chấm chạy dọc */
.tl { --tl-c: var(--momo-pink); --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); list-style: none; margin: 0 0 20px; padding: 0; }
.tl::before, .tl::after { content: ""; position: absolute; top: 7px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; border-radius: 2px; }
.tl::before { background: var(--color-border); }
.tl::after { background: var(--tl-c); transform-origin: 0 50%; }
.tl-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 0 6px; }
.tl-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--tl-c); margin-bottom: 8px; box-sizing: border-box; }
.tl-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.tl-date { font-weight: 700; font-size: .85rem; color: var(--color-link); white-space: nowrap; }
.tl-node.is-last .tl-dot { background: var(--tl-c); }
.tl-4 { --n: 4; }
.tl-4 .tl-date { font-size: .8rem; }
.tl-run { position: absolute; z-index: 2; top: 3px; left: calc(50% / var(--n)); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--tl-c); opacity: 0; }
@media (max-width: 520px) {
  .tl { grid-template-columns: 1fr; gap: 14px; }
  .tl::before, .tl::after { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .tl::after { transform-origin: 50% 0; }
  .tl-node { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; text-align: left; gap: 0 10px; padding: 0 0 0 0; }
  .tl-dot { margin: 0 6px 0 0; flex: none; align-self: center; }
  .tl-title { flex: 1 1 auto; }
  .tl-run { display: none; }
}

/* Danh sách hoạt động trong thẻ ngày hội: tên đậm + mô tả ngắn */
.activity-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.activity-list li { display: flex; flex-direction: column; gap: 2px; }
.activity-list li span { font-size: .95rem; color: var(--color-muted); }


/* A. Hai con đường -> ngày hội */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1040px; margin: 0 auto; position: relative; }
.path-card { display: flex; flex-direction: column; padding: 32px; }
.path-card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 12px; }
.fork-lines { grid-column: 1 / -1; width: 100%; height: 96px; margin: -8px 0; overflow: visible; }
.fork-lines path { stroke: var(--momo-pink); stroke-width: 2; stroke-dasharray: 6 6; }
.fork-merge {
  grid-column: 1 / -1; justify-self: center; text-align: center; width: min(100%, 560px);
  padding: 32px; border-radius: 28px; color: #fff;
  background: linear-gradient(135deg, var(--kv-wine, #471027), var(--kv-magenta, #881a47));
}
.fork-merge-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.fork-merge .event-when { justify-content: center; margin: 0; }
.fork-merge .event-date { color: #fff; }
.fork-merge .event-venue { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .45); text-align: left; }
.fork-merge .path-text { margin-inline: auto; color: rgba(255, 255, 255, .88); }
.fork-final { margin: 0; font-weight: 700; }

@media (max-width: 860px) {
  .fork { grid-template-columns: 1fr; gap: 20px; }
  .fork-lines { display: none; }
    .fork-merge { border-radius: 24px; }
  .path-card { padding: 24px; }
}
@media (max-width: 520px) { .hero-paths .btn { width: 100%; } }
.fork-merge .path-text { text-wrap: balance; }
.path-note { margin: -8px 0 20px; font-size: .92rem; font-style: italic; color: rgba(255, 255, 255, .6); }
.path-req { margin: 0 0 20px; }
.path-req ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.path-req li { position: relative; padding-left: 22px; font-size: .95rem; }
.path-req li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--momo-pink); }
@media (min-width: 861px) { .path-card h3 { font-size: clamp(1.2rem, 1.9vw, 1.75rem); white-space: nowrap; } }

/* Thẻ ngày hội: các mục dàn đều trong khoảng trống giữa mô tả và nút */
.path-card.is-day > div:not(.path-actions) { flex: 1; display: flex; flex-direction: column; }
.path-card.is-day .activity-list { flex: 1; margin: 0 0 24px; gap: 12px; align-content: space-evenly; grid-auto-rows: max-content; }



/* Giám khảo chưa có ảnh tách nền: ảnh thường bo góc (hoặc hình mặc định) đặt đúng chỗ ảnh tách nền */
.person-photo { position: absolute; z-index: 1; left: 10%; bottom: 0; width: 80%; height: 90%; max-width: none; object-fit: cover; object-position: 50% 12%; border-radius: 22px 22px 0 0; }
.person-cutout.is-default { z-index: 1; }

/* Ít giám khảo (bảng nội bộ): thẻ nhỏ hơn một chút, không giãn ra lấp đầy hàng */
.carousel-people.is-compact .carousel-track > .person.has-cutout { flex: 0 0 auto; width: max-content; min-width: 150px; text-align: center; }
.carousel-people.is-compact .person-stage { height: 150px; width: 150px; margin-inline: auto; }
.carousel-people.is-compact:has(.has-cutout) .carousel-nav { top: 75px; }
.carousel-people.is-compact .person.has-cutout .person-name { white-space: nowrap; font-size: .95rem; text-align: center; }
.carousel-people.is-compact .person.has-cutout .person-role { white-space: nowrap; font-size: .85rem; text-align: center; }
.carousel-people.is-compact .carousel-track { gap: clamp(20px, 3vw, 44px); }
@media (max-width: 560px) {
  .carousel-people.is-compact .person-stage { height: 150px; }
}

/* Trang Đề thi: nếu có 4 bước (bảng nội bộ) thì xếp 4 cột */
@media (min-width: 861px) { .doc-overview .steps:has(.step:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }