/* Banner quảng cáo dùng chung (dashboard "Slide của tôi" và trang chủ): banner Teachera OS (video giới thiệu) và banner bộ slide Mindset for IELTS.
   Tách từ page_dashboard.css; markup ở view/block/banner-teachera.phtml, view/block/banner-mindset.phtml; JS popup video ở page_promo-banner.js. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@700&text=Click!&display=swap");

/* Exact S2 introduction banner, with the existing device modal action. */
.tse-sld-hero-root { container-type: inline-size; width: 100%; }
.tse-sld-hero {
  --tse-sld-hero-bg: #F4F6FB;
  --tse-sld-hero-ink: #0B1B4D;
  --tse-sld-hero-line: #E2E6F0;
  --tse-sld-hero-brand: #1235AE;
  --tse-sld-hero-brand-dark: #0C2680;
  --tse-sld-hero-brand-light: #4F7BFF;
  --tse-sld-hero-icon-light: #93B7FF;
  --tse-sld-hero-icon-dark: #1235AE;
  position: relative; width: 100%;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(0.5555cqw + 5.333px);
  color: var(--tse-sld-hero-ink); background: var(--tse-sld-hero-bg);
}
@container (max-width: 1920px) { .tse-sld-hero { font-size: 0.833333cqw; } }
@container (max-width: 1440px) { .tse-sld-hero { font-size: 1.111111cqw; } }
@container (max-width: 1024px) { .tse-sld-hero { font-size: 1.5625cqw; } }
@container (max-width: 640px)  { .tse-sld-hero { font-size: 4.444444cqw; } }

.tse-sld-hero, .tse-sld-hero *, .tse-sld-hero *::before, .tse-sld-hero *::after { box-sizing: border-box; }
.tse-sld-hero :where(h1, p, ol) { margin: 0; padding: 0; }
.tse-sld-hero :where(ol) { list-style: none; }
.tse-sld-hero :where(a) { color: inherit; text-decoration: none; }
.tse-sld-hero img { display: block; max-width: 100%; }
.tse-sld-hero :focus-visible { outline: 2px solid var(--tse-sld-hero-brand-light); outline-offset: 2px; }

/* Icon 2 tông (Plump) */
.tse-sld-hero__ico-l { fill: var(--tse-sld-hero-icon-light); }
.tse-sld-hero__ico-d { fill: var(--tse-sld-hero-icon-dark); }
.tse-sld-hero__banner .tse-sld-hero__ico-l { fill: rgba(255,255,255,.5); }
.tse-sld-hero__banner .tse-sld-hero__ico-d { fill: #fff; }

.tse-sld-hero__inner { width: calc(100% - 4em); max-width: 96em; margin-inline: auto; padding-top: 1.5em; }

/* Hàng trên */
.tse-sld-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 1.5em; }
.tse-sld-hero__crumb { display: flex; align-items: center; gap: 0.5em; font-size: max(12px, 0.875em); line-height: 1.25em; }
.tse-sld-hero__crumb-home { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 9999px; transition: background-color 200ms; }
.tse-sld-hero__crumb-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.tse-sld-hero__crumb-sep { width: 0.875em; height: 0.875em; color: #CBD5E1; }
.tse-sld-hero__crumb-current { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 500; }
.tse-sld-hero__actions { display: flex; gap: 0.75em; }
/* Nút tròn — Medium: cao 40 · lề 16 · icon 20 · khoảng icon 8 · chữ 16 */
.tse-sld-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; height: 2.5em; padding: 0 1em;
  border-radius: 9999px; border: 1px solid transparent; font-size: 1em; line-height: 1.5em; font-weight: 500; white-space: nowrap;
  touch-action: manipulation; transition: background-color 200ms, border-color 200ms;
}
.tse-sld-hero__btn--outline { background: #fff; border-color: var(--tse-sld-hero-line); color: var(--tse-sld-hero-ink); }
.tse-sld-hero__btn--solid { background: var(--tse-sld-hero-brand); border-color: var(--tse-sld-hero-brand); color: #fff; }

/* Banner Teachera OS: nền xanh ngọc + chanh, đặt trong khung bo góc */
.tse-sld-hero__banner {
  /* Banner quảng cáo Teachera OS dùng màu riêng (xanh ngọc + chanh); hàng trên của S2 vẫn giữ màu gốc #1235AE */
  --tse-sld-hero-brand: #00AA80; --tse-sld-hero-ink: #01202C;
  position: relative; overflow: hidden; isolation: isolate; border-radius: 1.5em; color: #fff;
  background-color: #00AA80;
  background-image:
    /* Nền theo thiết kế tham khảo: #28C39C + quầng chanh #B7F025 / kem #F6F7ED + quầng #00AA80, làm mờ lớn (ảnh tse-sld-hero-bg-01.webp, lật ngang để vùng chữ bên trái nằm trên nền xanh đậm hơn) */
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(255,255,255,0) 1px 5em),
    /* màu gốc #00AA80 phủ phần lớn banner, chỉ chừa góc trên phải cho chanh/kem */
    radial-gradient(120% 140% at 15% 85%, rgba(0, 170, 128, 0.950) 0.00%, rgba(0, 170, 128, 0.946) 4.38%, rgba(0, 170, 128, 0.934) 8.75%, rgba(0, 170, 128, 0.918) 13.12%, rgba(0, 170, 128, 0.900) 17.50%, rgba(0, 170, 128, 0.882) 21.88%, rgba(0, 170, 128, 0.866) 26.25%, rgba(0, 170, 128, 0.854) 30.62%, rgba(0, 170, 128, 0.850) 35.00%, rgba(0, 170, 128, 0.833) 38.38%, rgba(0, 170, 128, 0.787) 41.75%, rgba(0, 170, 128, 0.723) 45.12%, rgba(0, 170, 128, 0.650) 48.50%, rgba(0, 170, 128, 0.577) 51.88%, rgba(0, 170, 128, 0.512) 55.25%, rgba(0, 170, 128, 0.467) 58.62%, rgba(0, 170, 128, 0.450) 62.00%, rgba(0, 170, 128, 0.431) 64.88%, rgba(0, 170, 128, 0.380) 67.75%, rgba(0, 170, 128, 0.308) 70.62%, rgba(0, 170, 128, 0.225) 73.50%, rgba(0, 170, 128, 0.142) 76.38%, rgba(0, 170, 128, 0.070) 79.25%, rgba(0, 170, 128, 0.019) 82.12%, rgba(0, 170, 128, 0.000) 85.00%),
    url("data:image/webp;base64,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");
  background-size: auto, auto, cover; background-position: 0 0, 0 0, center;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center;
}
/* Ảnh minh hoạ bên phải: khung chiếm cột phải, ảnh phóng to và tràn qua mép dưới/phải (banner overflow:hidden cắt gọn) */
.tse-sld-hero__media { position: relative; z-index: 1; align-self: stretch; min-height: 100%; }
/* Khung video: sát mép phải + mép dưới banner, chỉ bo góc trên trái */
.tse-sld-hero__video { position: absolute; top: 3.5em; left: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 1.5em 0 0 0; background: #fff; }
.tse-sld-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; }
/* Nút play: tròn nền đen để nổi trên ảnh bìa xanh, vòng sáng lan ra để mời bấm */
.tse-sld-hero__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 5.5em; height: 5.5em; margin: -2.75em 0 0 -2.75em; padding: 0; border: 0; border-radius: 9999px;
  background: #0B0F14; color: #fff; box-shadow: 0 8px 24px -6px rgba(0,0,0,.45); cursor: pointer; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms; }
.tse-sld-hero__play::before { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: tse-sld-hero-play-ring 2.2s ease-out infinite; }
@keyframes tse-sld-hero-play-ring { 0% { box-shadow: 0 0 0 0 rgba(11,15,20,.35); } 75%, 100% { box-shadow: 0 0 0 1.25em rgba(11,15,20,0); } }
.tse-sld-hero__play-i { width: 2em; height: 2em; margin-left: 0.25em; }
@media (hover: hover) {
  .tse-sld-hero__play:hover { transform: scale(1.06); background: #000; }
}
@media (prefers-reduced-motion: reduce) {
  .tse-sld-hero__play::before { animation: none; }
}
/* ---------- Popup video (portal ra body) ----------
   z-index 10002: popup phải nổi trên sidebar (100) và modal thiết bị (10001). Font-size dùng @media vì đã ra khỏi root. */
.tse-sld-hero-portal {
  --tse-sld-hero-brand: #00AA80; --tse-sld-hero-ink: #01202C; --tse-sld-hero-lime: #B7F025; --tse-sld-hero-brand-light: #4F7BFF;
  position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; color: #fff;
  font-size: calc(0.5555cqw + 5.333px);
}
@media (max-width: 1920px) {
  .tse-sld-hero-portal { font-size: 0.833333cqw; }
}
@media (max-width: 1440px) {
  .tse-sld-hero-portal { font-size: 1.111111cqw; }
}
@media (max-width: 1024px) {
  .tse-sld-hero-portal { font-size: 1.5625cqw; }
}
@media (max-width: 640px) {
  .tse-sld-hero-portal { font-size: 4.444444cqw; padding: 12px; }
}
.tse-sld-hero-portal[hidden] { display: none; }
.tse-sld-hero-portal, .tse-sld-hero-portal *, .tse-sld-hero-portal *::before, .tse-sld-hero-portal *::after { box-sizing: border-box; }
.tse-sld-hero-portal :where(h2, p) { margin: 0; }
.tse-sld-hero-portal :where(button) { font: inherit; cursor: pointer; }
.tse-sld-hero-portal :focus-visible { outline: 2px solid var(--tse-sld-hero-lime); outline-offset: 2px; }
.tse-sld-hero-portal__backdrop { position: absolute; inset: 0; background: rgba(1,18,26,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Khung popup: rộng tối đa 64em nhưng luôn vừa chiều cao màn hình (video 16:9 + thanh trên/dưới ~9em) */
.tse-sld-hero-portal__dialog { position: relative; width: min(64em, 100%, (100svh - 48px - 9em) * 16 / 9); opacity: 0; transform: translateY(1em) scale(.98);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.tse-sld-hero-portal.is-open .tse-sld-hero-portal__backdrop { opacity: 1; }
.tse-sld-hero-portal.is-open .tse-sld-hero-portal__dialog { opacity: 1; transform: none; }
.tse-sld-hero-portal__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 0.75em; }
.tse-sld-hero-portal__title { font-size: 1.125em; line-height: 1.5; font-weight: 500; color: #fff; }
.tse-sld-hero-portal__close { flex: none; display: grid; place-items: center; width: 2.75em; height: 2.75em; padding: 0; border: 0; border-radius: 9999px; background: rgba(255,255,255,.12); color: #fff; transition: background-color 150ms; }
.tse-sld-hero-portal__close svg { width: 1.25em; height: 1.25em; }
.tse-sld-hero-portal__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1em; background: #000; }
.tse-sld-hero-portal__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Đang tải: vòng xoay giữa khung */
.tse-sld-hero-portal__spin { display: none; position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 9999px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--tse-sld-hero-lime); animation: tse-sld-hero-spin 800ms linear infinite; pointer-events: none; }
@keyframes tse-sld-hero-spin { to { transform: rotate(360deg); } }
.tse-sld-hero-portal.is-loading .tse-sld-hero-portal__spin { display: block; }
/* Lỗi: phủ khung, icon + câu báo + Thử lại */
.tse-sld-hero-portal__err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75em; padding: 1.5em; background: #0B1620; text-align: center; }
.tse-sld-hero-portal__err[hidden] { display: none; }
.tse-sld-hero-portal__err svg { width: 2.5em; height: 2.5em; color: #FF8A8F; }
.tse-sld-hero-portal__err p { max-width: 30em; font-size: max(14px, 0.9375em); line-height: 1.6; color: rgba(255,255,255,.85); }
.tse-sld-hero-portal__retry { height: 2.5em; padding: 0 1.25em; border: 0; border-radius: 9999px; background: #fff; color: var(--tse-sld-hero-ink); font-size: max(14px, 0.875em); font-weight: 500; transition: background-color 150ms; }
/* Chân popup: mô tả ngắn + nút dùng thử (giữ người xem chuyển đổi ngay sau video) */
.tse-sld-hero-portal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1em; }
.tse-sld-hero-portal__desc { font-size: max(14px, 0.9375em); line-height: 1.6; color: rgba(255,255,255,.75); }
.tse-sld-hero-portal__cta { flex: none; display: inline-flex; align-items: center; gap: 0.5em; height: 3em; padding: 0 1.5em; border-radius: 9999px; background: var(--tse-sld-hero-lime); color: var(--tse-sld-hero-ink); font-size: max(14px, 0.9375em); font-weight: 600; text-decoration: none; transition: background-color 150ms, transform 150ms; }
.tse-sld-hero-portal__cta svg { width: 1em; height: 1em; }
@media (hover: hover) {
  .tse-sld-hero-portal__close:hover { background: rgba(255,255,255,.22); }
  .tse-sld-hero-portal__retry:hover { background: #E2E8F0; }
  .tse-sld-hero-portal__cta:hover { background: #C8F55A; }
}
@media (max-width: 640px) {
  .tse-sld-hero-portal__dialog { width: 100%; }
  .tse-sld-hero-portal__title { font-size: 1em; }
  .tse-sld-hero-portal__frame { border-radius: 0.75em; }
  .tse-sld-hero-portal__foot { flex-direction: column; align-items: stretch; }
  .tse-sld-hero-portal__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tse-sld-hero-portal__backdrop, .tse-sld-hero-portal__dialog { transition: none; }
  .tse-sld-hero-portal__spin { animation-duration: 2s; }
}
.tse-sld-hero__content {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em;
  max-width: 46em; padding: 4em;
}
.tse-sld-hero__title { max-width: 14em; font-size: 3em; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.tse-sld-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.625em; margin-bottom: -0.5em; padding: 0.25em 0.875em 0.25em 0.25em; border-radius: 9999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: max(12px, 0.875em); line-height: 1.5; font-weight: 500; color: #fff; }
.tse-sld-hero__eyebrow-tag { flex: none; white-space: nowrap; padding: 0.0714em 0.5714em; border-radius: 9999px; background: #fff; font-size: max(11px, 0.8571em); font-weight: 600; color: var(--tse-sld-hero-brand); }
.tse-sld-hero__feats { display: flex; flex-wrap: wrap; gap: 0.5em 1.25em; margin: 0; padding: 0; list-style: none; font-size: max(13px, 0.9375em); line-height: 1.5; color: #fff; }
.tse-sld-hero__feats li { display: inline-flex; align-items: center; gap: 0.5em; }
.tse-sld-hero__feats li::before { content: ""; flex: none; width: 1.2em; height: 1.2em; border-radius: 9999px; background: rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.25 2.25L11.5 5.5' fill='none' stroke='%2300AA80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.875em no-repeat; }
.tse-sld-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 0.5em; }
.tse-sld-hero__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; height: 3em; padding: 0 1.5em; border-radius: 9999px; border: 1px solid transparent; font-size: max(14px, 1em); font-weight: 500; white-space: nowrap; transition: background-color 150ms, border-color 150ms; }
.tse-sld-hero__cta-btn > svg { width: 1.125em; height: 1.125em; transition: transform 150ms; }
.tse-sld-hero__cta-btn--light { background: #fff; color: var(--tse-sld-hero-brand); }
.tse-sld-hero__cta-btn--ghost { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
@media (hover: hover) {
  .tse-sld-hero__cta-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
}
.tse-sld-hero__desc { font-size: 1.25em; line-height: 1.75em; font-weight: 300; color: rgba(255,255,255,.88); max-width: 32em; }
@container (max-width: 1024px) {
  .tse-sld-hero__banner { grid-template-columns: minmax(0, 1fr); }
  .tse-sld-hero__content { padding: 3em; max-width: none; }
  /* màn hẹp: video xuống dưới nội dung, khung 16:9 bo góc */
  .tse-sld-hero__media { min-height: 0; padding: 0 3em 3em; }
  .tse-sld-hero__video { position: relative; top: auto; aspect-ratio: 16 / 9; border-radius: 1em; }
}
@container (max-width: 640px) {
  .tse-sld-hero__inner { width: calc(100% - 2.5em); padding-top: 1em; }
  .tse-sld-hero__banner { border-radius: 1em; }
  .tse-sld-hero__content { gap: 1em; padding: 2em 1.5em; }
  .tse-sld-hero__media { padding: 0 1em 1em; }
  .tse-sld-hero__play { width: 4em; height: 4em; margin: -2em 0 0 -2em; font-size: 1em; }
  .tse-sld-hero__play-i { width: 1.5em; height: 1.5em; }
  .tse-sld-hero__title { font-size: 1.875em; }
  .tse-sld-hero__cta { width: 100%; }
  .tse-sld-hero__cta-btn { flex: 1 1 auto; }
  .tse-sld-hero__desc { font-size: 1em; line-height: 1.5em; }
}
/* =========================================================
   NÚT 3D (tham khảo Uiverse): viền đậm, đáy dày 5px, nổi lên 3px; bấm thì lún xuống. Giữ dạng nút tròn. Chỉ áp cho nút "Dùng thử ngay" trong banner.
   ========================================================= */
.tse-sld-hero__cta-btn--light {
  --tse-sld-hero-3d-ink: #01202C;
  position: relative; overflow: visible; isolation: auto;
  border: 2px solid var(--tse-sld-hero-3d-ink); border-bottom-width: 5px; border-radius: 9999px;
  transform: translateY(-3px);
  transition: transform 200ms linear, border-bottom-width 200ms linear, box-shadow 200ms linear, filter 200ms linear;
  cursor: pointer;
}
.tse-sld-hero__cta-btn--light {   /* nút chính trong banner: chanh #B7F025 nổi trên nền xanh */
  background: linear-gradient(180deg, #ECFBB8 0%, #B7F025 100%);
  box-shadow: 0 1px 6px 0 rgba(183, 240, 37, 0.7);
  color: var(--tse-sld-hero-3d-ink); font-weight: 600;
}
.tse-sld-hero__cta-btn--light:active { transform: translateY(0); border-bottom-width: 2px; }
@media (hover: hover) {
  .tse-sld-hero__cta-btn--light:hover { filter: brightness(1.05); }
  .tse-sld-hero__cta-btn--light:hover { background: linear-gradient(180deg, #ECFBB8 0%, #B7F025 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .tse-sld-hero__cta-btn--light { transition: none; }
}
/* =========================================================
   NÚT "ĐĂNG KÝ SỚM" — thu hút click:
   1) vệt sáng quét ngang mỗi ~3s  2) vòng sáng chanh lan ra (nhịp thở)  3) mũi tên nhích tới
   Hover: dừng nhịp, nút sáng hơn, mũi tên lao tới. Tắt khi người dùng giảm chuyển động.
   ========================================================= */
.tse-sld-hero__cta-btn--light { isolation: isolate; }
.tse-sld-hero__cta-btn--light::before {   /* vệt sáng quét — nằm trên nền nút, dưới chữ */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 62%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: tse-sld-hero-shine 3.2s ease-in-out 1s infinite;
}
.tse-sld-hero__cta-btn--light::after {   /* vòng sáng chanh lan ra ngoài */
  content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; pointer-events: none;
  animation: tse-sld-hero-pulse 2.4s ease-out infinite;
}
.tse-sld-hero__cta-btn--light > svg { animation: tse-sld-hero-nudge 1.6s ease-in-out infinite; }
@keyframes tse-sld-hero-shine { 0% { background-position: 150% 0; } 45%, 100% { background-position: -50% 0; } }
@keyframes tse-sld-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(183, 240, 37, 0.75); }
  70%  { box-shadow: 0 0 0 0.75em rgba(183, 240, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(183, 240, 37, 0); }
}
@keyframes tse-sld-hero-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.25em); } }
@media (hover: hover) {
  .tse-sld-hero__cta-btn--light:hover { transform: translateY(-5px); box-shadow: 0 6px 18px -2px rgba(183, 240, 37, 0.85); }
  .tse-sld-hero__cta-btn--light:hover::before { animation-duration: 1.2s; animation-delay: 0s; }
  .tse-sld-hero__cta-btn--light:hover > svg { animation: none; transform: translateX(0.375em); }
}
.tse-sld-hero__cta-btn--light:active { transform: translateY(0); box-shadow: 0 1px 3px 0 rgba(183, 240, 37, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .tse-sld-hero__cta-btn--light::before, .tse-sld-hero__cta-btn--light::after, .tse-sld-hero__cta-btn--light > svg { animation: none; }
}
/* Gợi ý "Click!" + mũi tên vẽ tay chỉ vào nút, nhấp nháy lúc hiện lúc ẩn (chỉ trang trí, aria-hidden) */
.tse-sld-hero__hint {
  position: absolute; left: 62%; top: 100%; z-index: 2; pointer-events: none;
  display: flex; align-items: flex-end; gap: 0.25em; margin-top: 0.5em;
  color: #ffffff; font-weight: 700; white-space: nowrap;
  animation: tse-sld-hero-blink 2s ease-in-out infinite;
}
.tse-sld-hero__cta-btn .tse-sld-hero__hint-arrow { width: 3em; height: 2.4em; flex: none; animation: tse-sld-hero-poke 1s ease-in-out infinite; transform-origin: 20% 20%; }
.tse-sld-hero__hint-text {
  margin-bottom: -0.4em; padding: 0;
  font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive;   /* chữ viết tay — bản WordPress cài font Caveat ở cấp site */
  color: #ffffff; font-size: 1.75em; font-weight: 700; line-height: 1; letter-spacing: 0.01em; transform: rotate(-6deg);
}
@keyframes tse-sld-hero-blink { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } }
@keyframes tse-sld-hero-poke-m { 0%, 100% { transform: scaleY(-1) translate(0, 0); } 50% { transform: scaleY(-1) translate(-0.25em, -0.25em); } }
@keyframes tse-sld-hero-poke { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-0.3em, -0.3em); } }
/* mobile: nút full ngang, nút phụ nằm ngay dưới → gợi ý chuyển lên góc trên phải, mũi tên chỉ xuống */
@container (max-width: 640px) {
  .tse-sld-hero__cta { margin-top: 2.25em; }
  /* chừa chỗ cho gợi ý Click! phía trên nút */
  .tse-sld-hero__hint { left: auto; right: 0.25em; top: auto; bottom: 100%; margin: 0 0 0.25em; flex-direction: row-reverse; align-items: flex-start; }
  .tse-sld-hero__cta-btn .tse-sld-hero__hint-arrow { width: 2.5em; height: 2em; transform: scaleY(-1); animation: tse-sld-hero-poke-m 1s ease-in-out infinite; }
  .tse-sld-hero__hint-text { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tse-sld-hero__hint, .tse-sld-hero__hint-arrow { animation: none; opacity: 1; }
}
/* Thẻ thiết bị: nền trắng đặc, màu rõ ràng (không dùng hiệu ứng kính mờ) */

/* ---- Nút chính phong cách "glow gradient": viền gradient 2px + nền nhiều lớp + quầng sáng trong + chữ gradient ---- */
.tse-sld-hero__btn--solid {
  position: relative; isolation: isolate; overflow: hidden; border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(147,183,255,.38) 0%, rgba(20,56,194,0) 50%, rgba(124,77,255,.28) 100%) padding-box,
    linear-gradient(135deg, rgba(125,211,252,.14) 0%, rgba(20,56,194,0) 50%, rgba(46,16,101,.4) 100%) padding-box,
    linear-gradient(90deg, #0D2A8F 0%, #1640C8 50%, #0D2A8F 100%) padding-box,
    linear-gradient(180deg, #A9C2FF 0%, #1235AE 50%, #6D4DF2 100%) border-box;
  box-shadow: inset 0 0 15px rgba(125,211,252,.2);
}
.tse-sld-hero__btn--solid .tse-sld-hero__btn-label {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #C7DBFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(125,211,252,.45));
}
.tse-sld-hero__btn--solid svg { position: relative; z-index: 1; color: #D6E4FF; }
.tse-sld-hero__btn--solid::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(46,16,101,.15) 0%, rgba(125,211,252,.22) 50%, rgba(46,16,101,.15) 100%);
  transition: opacity 300ms;
}
.tse-sld-hero__btn--solid:focus-visible::after { opacity: 1; }
/* Nút phụ: kiểu thường — nền trắng, viền xám mảnh, chữ đậm màu */
.tse-sld-hero__btn--outline { background: #fff; border: 1px solid #D5DCE8; color: var(--tse-sld-hero-ink); box-shadow: none; transition: background-color 200ms, border-color 200ms; }
@container (min-width: 769px) {
  @media (hover: hover) {
    .tse-sld-hero__btn--solid:hover::after { opacity: 1; }
    .tse-sld-hero__btn--outline:hover { background: #F4F6FB; border-color: #B8C2D6; }
  }
}

@container (min-width: 769px) {
  @media (hover: hover) {
    .tse-sld-hero__crumb-home:hover { background: #E8ECF5; }
  }
}
/* Hàng trên trên mobile (breadcrumb + nút thiết bị) */
@container (max-width: 640px) {
  .tse-sld-hero__top { margin-bottom: 1em; }
  .tse-sld-hero__actions { width: 100%; }
  .tse-sld-hero__btn { flex: 1; padding: 0 0.75em; font-size: max(12px, 0.875em); }
}


.tse-sld-hero__btn { cursor: pointer; font-family: inherit; text-transform: none; }
.tse-sld-hero__btn [hidden] { display: none !important; }
.tse-sld-hero__cta-btn { font-family: inherit; text-transform: none; cursor: pointer; }
.tse-sld-hero__cta-btn:disabled { opacity: 1; cursor: default; }
.tse-sld-hero__cta-btn--ghost:disabled { background: transparent; }

/* =========================================================
   BANNER BỘ SLIDE MINDSET FOR IELTS (trang chủ): nền xanh TESOL "Ocean Blue", nút chính vàng như trang mindset-for-ielts.html
   ========================================================= */
.tse-sld-hero__banner--mindset {
  --tse-sld-hero-brand: #1235AE; --tse-sld-hero-ink: #0A1640;
  background-color: #1235AE;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 5em),
    radial-gradient(30% 62% at 100% 0%, rgba(226,214,255,.8) 0%, rgba(226,214,255,0) 75%),
    radial-gradient(42% 95% at 100% 60%, rgba(139,92,246,.88) 0%, rgba(139,92,246,0) 72%),
    radial-gradient(54% 90% at 40% 118%, rgba(56,208,245,.95) 0%, rgba(56,208,245,0) 75%),
    radial-gradient(28% 66% at 0% 100%, rgba(125,211,252,.6) 0%, rgba(125,211,252,0) 75%),
    radial-gradient(50% 95% at 30% 35%, rgba(40,80,214,.6) 0%, rgba(40,80,214,0) 75%),
    linear-gradient(180deg, #1235AE 0%, #10309F 100%);
  background-size: auto; background-position: 0 0;
}
/* Viền focus bàn phím trắng trên nền banner (xanh ngọc / xanh TESOL) để đủ tương phản */
.tse-sld-hero__banner :focus-visible { outline-color: #fff; }
.tse-sld-hero__banner--mindset .tse-sld-hero__eyebrow-tag { color: #1235AE; }
.tse-sld-hero__banner--mindset .tse-sld-hero__feats li::before { background-color: #fff; }
/* Nút chính vàng (#FDCB04) viền mực, cùng kiểu nút 3D */
.tse-sld-hero__banner--mindset .tse-sld-hero__cta-btn--light {
  --tse-sld-hero-3d-ink: #0A1640;
  background: linear-gradient(180deg, #FFE680 0%, #FDCB04 100%);
  box-shadow: 0 1px 6px 0 rgba(253, 203, 4, 0.6);
}
.tse-sld-hero__banner--mindset .tse-sld-hero__cta-btn--light::after { animation-name: tse-sld-hero-pulse-gold; }
@keyframes tse-sld-hero-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(253, 203, 4, 0.7); }
  70%  { box-shadow: 0 0 0 0.75em rgba(253, 203, 4, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 203, 4, 0); }
}
@media (hover: hover) {
  .tse-sld-hero__banner--mindset .tse-sld-hero__cta-btn--light:hover { background: linear-gradient(180deg, #FFF1B3 0%, #FDCB04 100%); box-shadow: 0 6px 18px -2px rgba(253, 203, 4, 0.8); }
}
.tse-sld-hero__banner--mindset .tse-sld-hero__cta-btn--light:active { box-shadow: 0 1px 3px 0 rgba(253, 203, 4, 0.5); }
/* Ảnh: slide mẫu sát mép phải + mép dưới (giống khung video Teachera), bìa sách nghiêng phía trước */
/* khung đúng tỉ lệ slide 16:9 (không cắt chữ), neo góc dưới phải, tràn nhẹ ra mép phải */
.tse-sld-hero__shot { position: absolute; right: -4%; bottom: 3em; width: 92%; aspect-ratio: 1384 / 775; overflow: hidden; border-radius: 1em; background: #fff; box-shadow: 0 1.5em 3em -1.5em rgba(10, 22, 64, 0.55); }
.tse-sld-hero__shot-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; }
.tse-sld-hero__book {
  position: absolute; left: 0; bottom: 1.5em; z-index: 2; width: 30%; max-width: 13em; height: auto;
  border-radius: 0.375em; transform: rotate(-6deg); transform-origin: left bottom;
  box-shadow: 0 1.25em 2.5em -0.75em rgba(10, 22, 64, 0.6);
}
@container (max-width: 1024px) {
  .tse-sld-hero__banner--mindset .tse-sld-hero__media { aspect-ratio: auto; }
  .tse-sld-hero__shot { position: relative; right: auto; bottom: auto; width: auto; margin-left: 18%; }
  .tse-sld-hero__book { bottom: 3em; left: 3em; width: 28%; }
}
@container (max-width: 640px) {
  .tse-sld-hero__shot { margin-left: 22%; }
  .tse-sld-hero__book { left: 1em; bottom: 1.5em; width: 32%; }
}

/* Trang chủ: hai banner xếp dọc trong khung .container của site; header/footer chung đang tạm ẩn nên bỏ khoảng chừa 80px cho header cố định */
body.home-promo-body { padding-top: 0; }
.home-promo { padding: 32px 0 56px; }
.home-promo__list { display: flex; flex-direction: column; gap: 24px; }
.home-promo .tse-sld-hero { background: transparent; }
.home-promo .tse-sld-hero__inner { width: 100%; max-width: none; padding-top: 0; }
/* footer chung chừa 220px phía trên cho khối liên hệ của trang chủ cũ: trang chủ mới không có khối đó */
.home-promo ~ .footer { padding-top: 64px; }
@media (max-width: 640px) { .home-promo { padding: 16px 0 40px; } .home-promo__list { gap: 16px; } }

/* ==========================================================================
   BANNER CHƯƠNG TRÌNH ACADEMY STARS (trang chủ, block/banner-academy.phtml)
   Theo hero trang tse-tesol.edu.vn/chuong-trinh-academy-stars-tich-hop-smf: nền trắng ánh hồng, chữ "Academy Stars" tô vàng,
   nhãn Starters/Movers/Flyers 3 màu, chồng 6 bìa sách xòe bên phải. Nút chỉ có chữ.
   ========================================================================== */
.tse-sld-hero__as {
  --as-pink-50: #FFF5F8; --as-pink-200: #FFCBDA; --as-pink-400: #FF83A7; --as-cta: #D62E68; --as-cta-hover: #A31241;
  --as-ink: #212121; --as-muted: rgba(33, 33, 33, 0.72); --as-yellow: #FFD249; --as-movers: #CA000F; --as-flyers: #007A37;
  --as-blue-soft: #E8F2FC; --as-blue: #1273D4; --as-blue-deep: #0A4C87;
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  border-radius: 1.5em; border: 1px solid var(--as-pink-200); color: var(--as-ink); background-color: #fff;
  background-image: radial-gradient(55% 75% at 100% 0%, rgba(255, 203, 218, 0.6), rgba(255, 203, 218, 0) 70%), radial-gradient(45% 60% at 0% 100%, var(--as-pink-50), rgba(255, 245, 248, 0) 70%);
}
.tse-sld-hero__as-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 4em; }
.tse-sld-hero__as-eyebrow { color: var(--as-ink); display: inline-flex; align-items: center; gap: 0.5em; padding: 0.375em 1em; border-radius: 9999px; border: 1px solid var(--as-pink-200); background: #fff; font-size: max(13px, 0.875em); font-weight: 500; }
.tse-sld-hero__as-eyebrow span { flex: none; width: 0.5em; height: 0.5em; border-radius: 9999px; background: var(--as-pink-400); }
.tse-sld-hero__as-title { margin: 0.5em 0 0; font-size: 3em; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.tse-sld-hero__as-title span { display: block; }
.tse-sld-hero__as-title mark { display: inline-block; margin: 0.06em 0; padding: 0 0.2em; border-radius: 0.15em; background: var(--as-yellow); color: var(--as-ink); }
.tse-sld-hero__as-sub { margin-top: 0.75em; font-size: 1.375em; font-weight: 600; line-height: 1.6; color: var(--as-ink); }
.tse-sld-hero__as-yle { display: inline-block; padding: 0 0.45em; border-radius: 9999px; line-height: 1.5; color: #fff; }
.tse-sld-hero__as-yle--starters { background: var(--as-yellow); color: var(--as-ink); }
.tse-sld-hero__as-yle--movers { background: var(--as-movers); }
.tse-sld-hero__as-yle--flyers { background: var(--as-flyers); }
.tse-sld-hero__as-lead { max-width: 34em; margin-top: 1em; font-size: 1.125em; line-height: 1.65; color: var(--as-muted); }
.tse-sld-hero__as-ctas { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1.75em; }
.tse-sld-hero__as-btn { display: inline-flex; align-items: center; justify-content: center; height: 3em; padding: 0 1.5em; border-radius: 9999px; border: 1px solid var(--as-cta); background: var(--as-cta); font-size: max(14px, 1em); font-weight: 600; white-space: nowrap; transition: background-color 200ms, border-color 200ms, color 200ms; }
.tse-sld-hero .tse-sld-hero__as-btn { color: #fff; }
.tse-sld-hero .tse-sld-hero__as-btn--ghost { background: #fff; border-color: var(--as-pink-200); color: var(--as-cta); }
.tse-sld-hero__as-feats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 1em 2em; margin: 2em 0 0; padding: 0; list-style: none; }
.tse-sld-hero__as-feats li { padding-left: 0.875em; border-left: 2px solid var(--as-pink-200); }
.tse-sld-hero__as-feats strong { display: block; font-size: max(13px, 0.9375em); font-weight: 600; }
.tse-sld-hero__as-feats span { display: block; font-size: max(12px, 0.875em); color: var(--as-muted); }
/* chồng bìa sách xòe (theo hero gốc): cuốn đầu thẳng, các cuốn sau dịch + xoay dần */
.tse-sld-hero__as-media { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 38em; padding: 3em 2em; }
.tse-sld-hero__as-books { position: relative; width: 21em; aspect-ratio: 600 / 770; margin: 0 9em 7em 0; padding: 0; list-style: none; }
.tse-sld-hero__as-books li { position: absolute; inset: 0; }
.tse-sld-hero__as-books img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1em; border: 1px solid var(--as-pink-200); background: #fff; box-shadow: 0 12px 28px -18px rgba(163, 18, 65, 0.45); }
.tse-sld-hero__as-books li:nth-child(1) { z-index: 6; }
.tse-sld-hero__as-books li:nth-child(2) { z-index: 5; transform: translate(9%, 7%) rotate(7deg) scale(0.95); }
.tse-sld-hero__as-books li:nth-child(3) { z-index: 4; transform: translate(18%, 14%) rotate(14deg) scale(0.91); }
.tse-sld-hero__as-books li:nth-child(4) { z-index: 3; transform: translate(27%, 21%) rotate(21deg) scale(0.87); }
.tse-sld-hero__as-books li:nth-child(5) { z-index: 2; transform: translate(35%, 27%) rotate(28deg) scale(0.83); }
.tse-sld-hero__as-books li:nth-child(6) { z-index: 1; transform: translate(42%, 33%) rotate(35deg) scale(0.79); }
.tse-sld-hero__as-chip { position: absolute; z-index: 8; display: inline-flex; flex-direction: column; padding: 0.625em 1em; border-radius: 0.75em; border: 1px solid var(--as-pink-200); background: #fff; box-shadow: 0 10px 24px -16px rgba(163, 18, 65, 0.4); font-size: max(12px, 0.875em); line-height: 1.35; white-space: nowrap; }
.tse-sld-hero__as-chip strong { font-weight: 600; }
.tse-sld-hero__as-chip small { font-size: 0.875em; color: var(--as-muted); }
.tse-sld-hero__as-chip--book { top: 2.5em; left: 1.5em; }
.tse-sld-hero__as-chip--level { top: 46%; right: 1.5em; padding: 0.5em 1em; border-radius: 9999px; border-color: var(--as-blue); background: var(--as-blue-soft); color: var(--as-blue-deep); font-weight: 500; }
.tse-sld-hero__as-chip--exam { bottom: 3em; left: 2em; }
@media (hover: hover) {
  .tse-sld-hero .tse-sld-hero__as-btn:hover { background: var(--as-cta-hover); border-color: var(--as-cta-hover); }
  .tse-sld-hero .tse-sld-hero__as-btn--ghost:hover { background: var(--as-pink-50); border-color: var(--as-cta); color: var(--as-cta); }
}
@container (max-width: 1024px) {
  .tse-sld-hero__as { grid-template-columns: minmax(0, 1fr); }
  .tse-sld-hero__as-content { padding: 3em 3em 0; }
  .tse-sld-hero__as-media { min-height: 36em; }
}
@container (max-width: 640px) {
  .tse-sld-hero__as-content { padding: 2em 1.5em 0; }
  .tse-sld-hero__as-title { font-size: 1.875em; }
  .tse-sld-hero__as-sub { font-size: 1.0625em; }
  .tse-sld-hero__as-lead { font-size: 1em; line-height: 1.55; }
  .tse-sld-hero__as-ctas { width: 100%; }
  .tse-sld-hero__as-btn { flex: 1 1 auto; }
  .tse-sld-hero__as-feats { grid-template-columns: minmax(0, 1fr); gap: 0.75em; margin-top: 1.5em; }
  .tse-sld-hero__as-media { min-height: 0; padding: 5em 1em 6em; } /* chừa chỗ trên/dưới cho 2 nhãn, không đè bìa sách */
  .tse-sld-hero__as-books { width: 13em; margin: 0 5.5em 5em 0; }
  .tse-sld-hero__as-chip--book { top: 1em; left: 0.75em; }
  .tse-sld-hero__as-chip--level { display: none; }
  .tse-sld-hero__as-chip--exam { bottom: 1.25em; left: auto; right: 0.75em; }
}

/* ==========================================================================
   BANNER BỘ GAME TIẾNG ANH (trang chủ, block/banner-games.phtml)
   Nền vàng ấm, 3 ảnh chụp game xếp chồng bên phải. Nút chỉ có chữ.
   ========================================================================== */
.tse-sld-hero__gm {
  --gm-ink: #1B1A12; --gm-muted: rgba(27, 26, 18, 0.72); --gm-line: rgba(27, 26, 18, 0.12); --gm-btn: #0A1640; --gm-btn-hover: #1235AE;
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  border-radius: 1.5em; color: var(--gm-ink); background-color: #FFE9A3;
  background-image: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%), radial-gradient(55% 70% at 0% 100%, #FFD249, rgba(255, 210, 73, 0) 70%);
}
.tse-sld-hero__gm-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 4em; }
.tse-sld-hero__gm-eyebrow { display: inline-flex; padding: 0.375em 1em; border-radius: 9999px; background: rgba(255, 255, 255, 0.7); font-size: max(13px, 0.875em); font-weight: 600; color: var(--gm-ink); }
.tse-sld-hero__gm-title { margin: 0.5em 0 0; font-size: 3em; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink); }
.tse-sld-hero__gm-desc { max-width: 32em; margin-top: 1em; font-size: 1.125em; line-height: 1.65; color: var(--gm-muted); }
.tse-sld-hero__gm-stats { display: flex; flex-wrap: wrap; gap: 0.75em; margin: 1.75em 0 0; padding: 0; list-style: none; }
.tse-sld-hero__gm-stats li { display: flex; flex-direction: column; min-width: 7.5em; padding: 0.75em 1em; border-radius: 1em; background: rgba(255, 255, 255, 0.72); }
.tse-sld-hero__gm-stats strong { font-size: 1.5em; font-weight: 700; line-height: 1.2; color: var(--gm-ink); }
.tse-sld-hero__gm-stats span { font-size: max(12px, 0.8125em); color: var(--gm-muted); }
.tse-sld-hero__gm-ctas { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1.75em; }
.tse-sld-hero__gm-btn { display: inline-flex; align-items: center; justify-content: center; height: 3em; padding: 0 1.5em; border-radius: 9999px; border: 1px solid var(--gm-btn); background: var(--gm-btn); font-size: max(14px, 1em); font-weight: 600; white-space: nowrap; transition: background-color 200ms, border-color 200ms; }
.tse-sld-hero .tse-sld-hero__gm-btn { color: #fff; }
.tse-sld-hero .tse-sld-hero__gm-btn--ghost { background: rgba(255, 255, 255, 0.85); border-color: rgba(27, 26, 18, 0.15); color: var(--gm-ink); }
/* 3 ảnh chụp game xếp chồng, nghiêng nhẹ */
.tse-sld-hero__gm-media { position: relative; align-self: stretch; min-height: 30em; }
.tse-sld-hero__gm-shot { position: absolute; display: block; border-radius: 1em; border: 0.375em solid #fff; background: #fff; box-shadow: 0 18px 40px -22px rgba(27, 26, 18, 0.55); }
.tse-sld-hero__gm-shot--1 { width: 72%; top: 2.5em; right: -4%; transform: rotate(4deg); }
.tse-sld-hero__gm-shot--2 { width: 64%; top: 46%; right: 14%; transform: rotate(-3deg); z-index: 2; }
.tse-sld-hero__gm-shot--3 { width: 58%; bottom: 1.5em; left: 2%; transform: rotate(2deg); z-index: 3; }
@media (hover: hover) {
  .tse-sld-hero .tse-sld-hero__gm-btn:hover { background: var(--gm-btn-hover); border-color: var(--gm-btn-hover); }
  .tse-sld-hero .tse-sld-hero__gm-btn--ghost:hover { background: #fff; border-color: rgba(27, 26, 18, 0.3); color: var(--gm-ink); }
}
@container (max-width: 1024px) {
  .tse-sld-hero__gm { grid-template-columns: minmax(0, 1fr); }
  .tse-sld-hero__gm-content { padding: 3em 3em 0; }
  .tse-sld-hero__gm-media { min-height: 28em; margin: 0 2em; }
}
@container (max-width: 640px) {
  .tse-sld-hero__gm-content { padding: 2em 1.5em 0; }
  .tse-sld-hero__gm-title { font-size: 1.875em; }
  .tse-sld-hero__gm-desc { font-size: 1em; line-height: 1.55; }
  .tse-sld-hero__gm-stats li { flex: 1 1 0; min-width: 0; padding: 0.625em 0.75em; }
  .tse-sld-hero__gm-ctas { width: 100%; }
  .tse-sld-hero__gm-btn { flex: 1 1 auto; }
  .tse-sld-hero__gm-media { min-height: 17em; margin: 0 1em; }
  .tse-sld-hero__gm-shot { border-width: 0.25em; border-radius: 0.75em; }
}