/* Home hero program cards: tones chosen in TeachMe → Trang chủ, optional auto-scroll. */
.tm-hero-programs-viewport,.tm-hero-programs-track{display:contents}
.tm-hero-program--blue .tm-hero-badge{background:var(--tm-hero-tint-ib);color:#1F78C8}
.tm-hero-program--mint .tm-hero-badge{background:var(--tm-hero-tint-cie);color:var(--tm-teal-text)}
.tm-hero-program--peach .tm-hero-badge{background:var(--tm-hero-tint-cam);color:#EA8A2E}
.tm-hero-program--lavender .tm-hero-badge{background:var(--tm-hero-tint-sat);color:var(--tm-hero-ink-sat)}
.tm-hero-badge-image{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* Marquee (motionsites "Digital Epoch" style): white pills drifting left, faded edges. Runs for every visitor; the footer motion switch (inc/motion-toggle.php) covers WCAG 2.2.2. */
.tm-hero-programs.is-marquee{display:block;position:relative}
.tm-hero-programs.is-marquee .tm-hero-programs-viewport{display:block;overflow:hidden;padding:10px 0 14px;margin:-10px 0 -14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tm-hero-programs.is-marquee .tm-hero-programs-track{display:flex;align-items:center;gap:16px;width:max-content;animation:tm-hero-marquee var(--tm-marquee-duration,40s) linear infinite;will-change:transform}
.tm-hero-programs.is-marquee .tm-hero-program{flex:0 0 auto;grid-column:auto;align-items:center;gap:12px;padding:8px 26px 8px 8px;border:1px solid rgb(7 17 71 / 7%);border-radius:999px;background:linear-gradient(180deg,#fff,#f7f9fb);box-shadow:0 1px 2px rgb(7 17 71 / 4%),0 6px 18px -8px rgb(7 17 71 / 14%),inset 0 -2px 4px rgb(7 17 71 / 3%);white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease}
.tm-hero-programs.is-marquee .tm-hero-program:hover,.tm-hero-programs.is-marquee .tm-hero-program:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 2px 4px rgb(7 17 71 / 5%),0 12px 24px -10px rgb(7 17 71 / 22%);color:var(--tm-navy)}
.tm-hero-programs.is-marquee .tm-hero-program:focus-visible{box-shadow:0 0 0 2px var(--tm-teal),0 12px 24px -10px rgb(7 17 71 / 22%)}
.tm-hero-programs.is-marquee .tm-hero-badge{width:48px;height:48px}
.tm-hero-programs.is-marquee .tm-hero-program-body{gap:0}
.tm-hero-programs.is-marquee .tm-hero-program-text{white-space:nowrap}
.tm-hero-programs.is-marquee:focus-within .tm-hero-programs-track{animation-play-state:paused}
@media(hover:hover){.tm-hero-programs.is-marquee:hover .tm-hero-programs-track{animation-play-state:paused}}
@keyframes tm-hero-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--tm-marquee-distance,50%)),0,0)}}
@media(max-width:639px){.tm-hero-programs.is-marquee .tm-hero-program{padding:6px 20px 6px 6px;gap:10px}.tm-hero-programs.is-marquee .tm-hero-badge{width:40px;height:40px}.tm-hero-programs.is-marquee .tm-hero-programs-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}}
.tm-hero-badge .tm-hero-icon--ib{width:34px;height:34px}
.tm-hero-badge:not(:has(svg,img)){font-size:16px;letter-spacing:.02em}