/* Canonical owner: theme/assets/design-system/hero.css. */
.dttt-course-hero-time span{color:var(--dttt-role);font-size:9px;font-weight:900;letter-spacing:.07em;margin-right:6px}
.dttt-course-hero-review b{align-items:center;background:var(--dttt-role);border-radius:99px;color:#fff;display:inline-flex;font-size:10px;height:17px;justify-content:center;min-width:17px;padding:0 4px}
.dttt-course-hero-export:active{transform:scale(.97)}
.dttt-course-hero-qr canvas,.dttt-course-hero-qr img{display:block;height:68px;width:68px}
@media(max-width:620px) {
.dttt-course-hero-actions{justify-content:space-between;align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;margin-top:2px;width:100%}
.dttt-course-hero-review{padding:8px;font-size:10px;gap:4px;padding:8px 7px}
.dttt-course-hero-join{flex:1;gap:6px;min-width:0;padding:5px 6px}
.dttt-course-hero-join-code{min-width:0;font-size:8px}
.dttt-course-hero-join-code strong{font-size:13px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.dttt-course-hero-join-code a{font-size:9px}
.dttt-course-hero-export{font-size:10px;padding:8px;font-size:10px;padding:8px 8px}
.dttt-course-hero-qr{height:58px;width:58px;flex:0 0 72px;height:72px;width:72px;height:64px;width:64px}
}
.dttt-course-hero-context span{color:rgba(255,255,255,.75);border-left:1px solid rgba(255,255,255,.3);padding-left:12px}
.dttt-course-hero-review{align-items:center;border:1px solid color-mix(in srgb,var(--dttt-role) 34%,#d8e6ed);display:flex;gap:6px;background:#fff;color:#0876b6;border-radius:10px;padding:10px 14px;font-weight:850;font-size:13px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap}
.dttt-course-hero-qr img,.dttt-course-hero-qr canvas{width:100%;height:100%;object-fit:contain;display:block}
.dttt-course-hero-join-code a{align-items:center;display:inline-flex;letter-spacing:0;color:#0876b6;text-decoration:none;font-weight:800;font-size:11px;min-height:44px}
.dttt-course-hero-export{font:800 11px inherit;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:10px 14px;font-weight:850;font-size:13px;cursor:pointer;white-space:nowrap}
.dttt-course-hero-export:hover{background:rgba(255,255,255,.25)}
:root { --dttt-hero-max: 1180px; --dttt-hero-gutter: 16px; --dttt-hero-role: var(--dttt-role, #0876b6); --dttt-hero-soft: var(--dttt-role-soft, #eaf6fb); }
.dttt-hero { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; }
.dttt-hero .dttt-hero-inner { box-sizing: border-box; width: min(var(--dttt-hero-max), calc(100% - 2 * var(--dttt-hero-gutter))); max-width: var(--dttt-hero-max); min-width: 0; margin: 0 auto; }
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  min-height: 128px;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 16px 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dttt-hero-role) 20%, #d9e6ed);
  border-radius: 0;
  background: linear-gradient(115deg, var(--dttt-hero-soft), #fff 74%);
  color: #153851;
  box-shadow: none;
}
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) .dttt-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 96px;
  padding: 0;
}
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) :where(h1, h2) {
  margin: 5px 0 7px;
  color: #153851;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) p {
  max-width: 720px;
  margin: 0;
  color: #567284;
  font-size: 13px;
  line-height: 1.45;
}
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) :where(.dttt-eyebrow, .dttt-course-context-label, .dttt-course-status) {
  color: var(--dttt-hero-role);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
}
.dttt-staff-hero.dttt-course-hero { min-height: 176px; padding-block: 14px; }
.dttt-staff-hero.dttt-course-hero .dttt-hero-inner { min-height: 148px; }
.dttt-course-hero-context { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12px; }
.dttt-course-hero-context a { align-items:center; color: var(--dttt-hero-role); display:inline-flex; font-weight: 800; min-height:44px; text-decoration: none; }
.dttt-course-hero-time { display: inline-flex; align-items: center; margin-top: 7px; padding: 5px 8px; border: 1px solid #d9e6ed; border-radius: 999px; background: rgba(255,255,255,.75); color: #567284; font-size: 10px; }
.dttt-course-hero-actions {backdrop-filter:blur(6px); box-sizing: border-box; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 48%; margin-left: auto; padding: 9px; border: 1px solid color-mix(in srgb, var(--dttt-hero-role) 18%, #d9e6ed); border-radius: 14px; background: rgba(255,255,255,.76); }
.dttt-course-hero-join {color:#183f58; box-sizing: border-box; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 8px; border: 1px solid #dce8ed; border-radius: 11px; background: #fff; }
.dttt-course-hero-qr {align-items:center;justify-content:center;cursor:pointer;min-width:64px; box-sizing: border-box; display: grid; flex: 0 0 72px; width: 72px; height: 72px; padding: 2px; place-items: center; overflow: hidden; border: 1px solid #e1eaee; border-radius: 9px; background: #fff; }
.dttt-course-hero-qr :where(canvas, img, svg) { display: block; width: 66px; height: 66px; max-width: 100%; object-fit: contain; }
.dttt-course-hero-join-code {display:grid;font-weight:900;letter-spacing:.07em;line-height:1.3; min-width: 0; color: #567284; font-size: 10px; }
.dttt-course-hero-join-code strong {margin-top:2px;letter-spacing:1px;margin:2px 0; display: block; overflow: hidden; color: var(--dttt-hero-role); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.dttt-live-hero {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
  min-height: 128px;
  padding: 16px 20px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dttt-hero-role) 20%, #d9e6ed);
  border-radius: 0;
  background: linear-gradient(115deg, var(--dttt-hero-soft), #fff 74%);
  color: #153851;
  box-shadow: none;
}
.dttt-live-hero h1 { margin: 5px 0 7px; color: #153851; font-size: clamp(25px,3vw,36px); line-height: 1.12; }
.dttt-live-hero p { margin: 0; color: #567284; font-size: 13px; line-height: 1.45; }
.dttt-live-hero .dttt-live-kicker { color: var(--dttt-hero-role); }
.dttt-live-hero-meta, .dttt-live-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dttt-standalone-hero { box-sizing: border-box; width: 100%; margin: 0 0 18px; padding: clamp(22px, 4vw, 34px); overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, #083f67, #0a86b5); color: #fff; }
.dttt-standalone-hero h1 { margin: 6px 0; color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; }
.dttt-standalone-hero p { margin: 8px 0 0; color: #dff5fb; line-height: 1.5; }
.dttt-public-reader-hero{min-height:150px;padding:18px 0;overflow:hidden;background:linear-gradient(115deg,#eaf6fb,#fff 74%);color:#153851;border-bottom:1px solid #d7e5ec}
.dttt-public-reader-hero .dttt-hero-inner{display:flex;align-items:center;min-height:114px}
.dttt-public-reader-hero h1{max-width:900px;margin:6px 0 8px;color:#153851;font-size:clamp(27px,4vw,42px);line-height:1.12}
.dttt-public-reader-hero p{margin:0;color:#567284;font-size:13px}
.dttt-public-reader-hero .dttt-eyebrow{color:#0876b6}
.dttt-highlight-kind.is-tuyen-dung{background:#f0eaff;color:#6940a5}
.dttt-highlight-slides{position:relative;aspect-ratio:16/8.5;min-height:390px}
.dttt-highlight-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.dttt-highlight-slide .dttt-highlight-image{position:absolute;inset:0;min-height:0}
.dttt-highlight-slide .dttt-highlight-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,22,43,.93) 0%,rgba(3,22,43,.72) 45%,rgba(3,22,43,.08) 85%),linear-gradient(0deg,rgba(3,22,43,.62),transparent 50%)}
.dttt-highlight-slide .dttt-highlight-image img,.dttt-highlight-slide .dttt-image-placeholder{width:100%;height:100%;min-height:0;object-fit:cover}
.dttt-highlight-overlay h3{font-size:clamp(24px,3.2vw,38px);line-height:1.12;margin:13px 0 10px;letter-spacing:-.6px}
.dttt-highlight-overlay h3 a{color:#fff;text-decoration:none}
.dttt-highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dttt-highlight-grid article{display:grid;grid-template-columns:42% 1fr;min-height:190px;background:#fff;border:1px solid var(--dttt-border);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.dttt-highlight-grid article:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,48,78,.1)}
.dttt-highlight-image>img{width:100%;height:100%;object-fit:cover}
.dttt-highlight-body{padding:15px;display:flex;flex-direction:column;align-items:flex-start}
.dttt-highlight-kind.is-tuyen-sinh{background:#fff0e8;color:#c14e18}
.dttt-highlight-kind.is-thong-bao{background:#fff7d9;color:#906a00}
.dttt-highlight-kind.is-hoat-dong-nganh{background:#e6f8f2;color:#087760}
.dttt-highlight-body h3{font-size:17px;line-height:1.35;margin:9px 0 6px}
.dttt-highlight-body h3 a{color:inherit;text-decoration:none}
.dttt-highlight-body p{font-size:13px;line-height:1.45;color:var(--dttt-muted);margin:0 0 8px}
.dttt-highlight-body time{font-size:11px;color:var(--dttt-muted);margin-top:auto}
.dttt-hero-stat strong{ display: block; color: var(--dttt-hero-role); line-height: 1.1;font-size:34px}
.dttt-hero-stat span{ display: block; margin-top: 3px; line-height: 1.25;font-size:13px;color:#d9ebff}
@media(max-width:782px) {
.dttt-hero-inner{width:calc(100% - 28px);max-width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto}
.dttt-hero-inner>*{max-width:100%;box-sizing:border-box}
}
.dttt-highlight-image.is-image-fallback{align-items:center;display:flex;justify-content:center}
.dttt-highlight-image.is-image-fallback:before{display:none}
.dttt-highlight-image.is-image-fallback .dttt-image-placeholder{height:100%;min-height:0}
.dttt-highlight-carousel,.dttt-highlight-slides,.dttt-highlight-slide,.dttt-highlight-slide .dttt-highlight-image,.dttt-highlight-overlay{box-sizing:border-box;max-width:100%;}
.dttt-highlight-slide .dttt-highlight-image img{display:block;max-width:100%;}
.dttt-hero-stat{ box-sizing: border-box; text-align: center;display:flex;align-items:center;gap:14px;border-left:1px solid rgba(255,255,255,.35);padding-left:24px;min-width:220px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 16px;color:#fff;font-size:12px;font-weight:750}
@media(max-width:980px) {
.dttt-course-hero-actions{flex-direction:column;align-items:stretch;width:100%;padding:14px;box-sizing:border-box}
.dttt-course-hero-review,.dttt-course-hero-export{width:100%;text-align:center;box-sizing:border-box}
.dttt-course-hero-join{justify-content:space-between;width:100%;box-sizing:border-box}
.dttt-hero-stat{text-align:center}
}
.dttt-home-hero .dttt-highlight-overlay h2{font-size:clamp(28px,3.25vw,46px);line-height:1.12;letter-spacing:-.035em;margin:13px 0 10px}
.dttt-home-hero .dttt-highlight-overlay h2 a{color:#fff;text-decoration:none}
.dttt-home-hero {
  box-sizing: border-box;
  height: clamp(540px, 42vw, 720px);
  min-height: 0;
  padding: 0 var(--home-gutter);
  background:
    radial-gradient(circle at 88% 16%, rgba(72, 197, 229, .3), transparent 26%),
    linear-gradient(120deg, #062b55 0%, #07579d 62%, #087f9d 100%);
  overflow: hidden;
}
.dttt-home-featured {
  width: calc(100% + 2 * var(--home-gutter));
  height: 100%;
  margin: 0 calc(-1 * var(--home-gutter));
  min-height: 0;
  position: relative;
}
.dttt-home-carousel,
.dttt-home-slides {
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  position: relative;
}
.dttt-home-carousel {
  border-radius: 0;
  background: var(--home-deep);
  box-shadow: 0 18px 48px rgba(2, 29, 55, .24);
  overflow: hidden;
}
.dttt-home-slide {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.dttt-home-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.dttt-home-slide .dttt-highlight-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.dttt-home-slide .dttt-highlight-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 25, 48, .96) 0%, rgba(3, 25, 48, .88) 38%, rgba(3, 25, 48, .35) 69%, rgba(3, 25, 48, .12) 100%),
    linear-gradient(0deg, rgba(3, 25, 48, .38), transparent 48%);
}
.dttt-home-slide .dttt-highlight-image img,
.dttt-home-slide .dttt-media-backdrop,
.dttt-home-slide .dttt-media-foreground {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dttt-home-slide .dttt-media-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) saturate(.88);
  transform: scale(1.035);
}
.dttt-home-slide .dttt-hero-media--contain .dttt-media-foreground {
  width: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .42;
}
.dttt-home-featured-copy {
  position: absolute;
  z-index: 3;
  left: max(64px, calc((100vw - var(--home-max)) / 2 + 64px));
  bottom: 54px;
  width: min(560px, 54%);
  padding: 0;
  color: #fff;
}
.dttt-home-featured-copy::after { display: none; }
.dttt-home-featured-copy > * { position: relative; z-index: 1; }
.dttt-home-hero .dttt-highlight-kind {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #8b3d16;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.dttt-home-hero .dttt-highlight-kind.is-tin-tuc { color: #075f9e; }
.dttt-home-hero .dttt-highlight-kind.is-hoat-dong-nganh { color: #087760; }
.dttt-home-hero .dttt-highlight-kind.is-tuyen-dung { color: #6f46a8; }
.dttt-home-featured-copy h1,
.dttt-home-featured-copy h2 {
  margin: 14px 0 10px;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.dttt-home-featured-copy h1 a,
.dttt-home-featured-copy h2 a {
  color: #fff;
  text-decoration: none;
}
.dttt-home-featured-copy p {
  display: -webkit-box;
  margin: 0 0 14px;
  overflow: hidden;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.dttt-home-featured-copy time {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 650;
}
.dttt-hero-compact .dttt-highlight-overlay h1 a{color:#fff;text-decoration:none}
.dttt-hero-compact .dttt-hero-priority{max-width:none;padding:0}
.dttt-hero-compact .dttt-highlight-carousel{border:0;border-radius:0;box-shadow:none;overflow:hidden}
.dttt-hero-compact .dttt-highlight-slide{transition:opacity .48s cubic-bezier(.23,1,.32,1),visibility .48s step-end}
.dttt-hero-compact .dttt-highlight-slide.is-active{transition:opacity .48s cubic-bezier(.23,1,.32,1),visibility 0s}
.dttt-hero-compact .dttt-highlight-overlay h1{max-width:none;color:#fff;font-size:clamp(27px,2.85vw,41px);font-weight:850;letter-spacing:-.75px;line-height:1.13;margin:14px 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.dttt-hero-compact .dttt-highlight-overlay time{color:#dceeff;font-weight:650;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.dttt-hero-compact .dttt-highlight-kind{box-shadow:0 2px 12px rgba(0,0,0,.18)}
.dttt-hero-compact .dttt-highlight-image img{transform:scale(1);transition:transform .5s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine) {
.dttt-hero-compact .dttt-highlight-slide.is-active:hover .dttt-highlight-image img{transform:scale(1.035)}
}
.dttt-hero-compact,.dttt-hero-priority,.dttt-highlight-carousel,.dttt-highlight-slides,.dttt-highlight-slide{height:clamp(440px,34vw,510px);min-height:0}
.dttt-highlight-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;pointer-events:none;background:#081b2f}
.dttt-highlight-image{display:block;min-height:190px;overflow:hidden;background:radial-gradient(circle at 72% 45%,#2e5979 0,#10283e 47%,#07182a 100%)}
.dttt-highlight-image img{height:100%;object-fit:cover;object-position:50% 50%;width:100%}
.dttt-highlight-image.dttt-hero-media--contain{background:#071a2b;isolation:isolate;overflow:hidden;position:relative}
.dttt-highlight-image.dttt-hero-media--contain:before{background-image:linear-gradient(90deg,rgba(4,17,29,.56),rgba(4,17,29,.24)),var(--dttt-hero-image);background-position:center;background-repeat:no-repeat;background-size:cover;content:"";filter:blur(18px) saturate(.86);inset:-28px;opacity:.74;position:absolute;transform:scale(1.08);z-index:0}
.dttt-highlight-image.dttt-hero-media--contain img{box-shadow:0 14px 46px rgba(0,0,0,.3);object-fit:contain;object-position:50% 50%;position:relative;z-index:1}
.dttt-quick-sticky-sentinel{height:1px;pointer-events:none}
.dttt-highlight-overlay>*{max-width:min(610px,60vw)}
.dttt-highlight-kind{display:inline-block;padding:5px 8px;border-radius:12px;background:#e8f2ff;color:#0755a5;font-weight:850;text-decoration:none;border:1px solid rgba(205,239,255,.34);box-shadow:0 4px 18px rgba(0,0,0,.16);font-size:11px;letter-spacing:.08em}
.dttt-highlight-overlay h1{font-size:clamp(31px,3.8vw,52px);letter-spacing:-.045em;line-height:1.04;margin:12px 0 10px;text-wrap:balance}
.dttt-highlight-overlay h1 a{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.dttt-highlight-overlay p{color:#dce9f6;display:-webkit-box;font-size:15px;line-height:1.5;margin:0;max-width:52ch;overflow:hidden;text-shadow:0 2px 14px rgba(0,0,0,.46);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.dttt-highlight-overlay time{color:#b9cee1;font-size:12px;font-weight:700;margin-top:14px;opacity:.86}
.dttt-guest-layout{align-items:start}
.dttt-guest-layout>main{display:block}
.dttt-guest-layout .dttt-priority{grid-column:auto}
.dttt-hero-priority{margin:0 auto;max-width:1180px;padding:0 24px;position:relative;z-index:2}
.dttt-hero-priority .dttt-eyebrow{color:#7ee7f5}
.dttt-hero-priority .dttt-highlight-carousel{border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 44px rgba(0,24,52,.25)}
.dttt-hero-priority .dttt-highlight-slides{aspect-ratio:16/6.7;min-height:340px}
.dttt-hero-priority-empty{color:#d9ebff;margin:0}
.dttt-news-stream{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:auto;display:block;margin-top:6px}
.dttt-reaction-button{background:transparent;border:0;color:#527086;cursor:pointer;font:inherit;font-size:13px;font-weight:750;padding:4px 0;text-decoration:none}
.dttt-reaction-button span{color:#8ca0af;font-size:16px}
.dttt-reaction-button em{font-style:normal}
.dttt-reaction-button.is-reacted,.dttt-reaction-button.is-reacted span{color:#e04a62}
.dttt-hero-compact .dttt-highlight-slides{aspect-ratio:16/4.55;min-height:288px}
.dttt-hero-compact .dttt-highlight-slide .dttt-highlight-image:after{background:linear-gradient(90deg,rgba(2,18,35,.9) 0%,rgba(2,18,35,.75) 23%,rgba(2,18,35,.52) 43%,rgba(2,18,35,.29) 61%,rgba(2,18,35,.1) 80%,rgba(2,18,35,0) 100%),linear-gradient(0deg,rgba(2,18,35,.7) 0%,rgba(2,18,35,.34) 36%,rgba(2,18,35,.1) 62%,rgba(2,18,35,0) 100%)}
.dttt-hero-compact .dttt-highlight-overlay{left:0;padding:48px max(24px,calc((100vw - 1180px)/2 + 24px)) 58px;width:min(68%,740px);padding-bottom:38px;padding-top:24px}
.dttt-hero-compact .dttt-highlight-overlay p{color:#edf6ff;font-size:clamp(13px,1.05vw,15px);font-weight:550;line-height:1.55;max-width:570px;text-shadow:0 1px 10px rgba(0,0,0,.45);text-align:justify;text-justify:inter-word}
.dttt-container,
.dttt-hero-inner,
.dttt-main-workspace {
  width: min(var(--dttt-content-max), calc(100% - 2 * var(--dttt-gutter-desktop)));
  margin-inline: auto;
}
.dttt-live-hero-main{min-width:0}
.dttt-live-hero-meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dttt-student-hero{background:linear-gradient(135deg,#0a5a87 0%,#0876b6 58%,#20a7b6 100%);color:#fff;min-height:128px}
.dttt-student-hero .dttt-hero-inner{padding:24px 28px}
.dttt-student-hero h1,.dttt-student-hero p,.dttt-student-hero .dttt-eyebrow{color:#fff}
.dttt-student-hero .dttt-eyebrow{opacity:.82}
.dttt-student-hero .dttt-student-hero-context{font-size:13px;font-weight:700;margin:7px 0 0;opacity:.9}
.dttt-student-hero .dttt-student-hero-actions{align-items:center;display:flex;gap:10px}
.dttt-course-portal > .dttt-course-context .dttt-hero-inner{min-height:0}
.dttt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  align-items: center;
  gap: var(--dttt-space-6);
}
.dttt-hero-copy { min-width: 0; }
.dttt-hero-copy :where(h1, p) { margin: 0; }
.dttt-hero-copy h1 { font-size: 32px; line-height: 1.15; }
.dttt-hero-copy p { margin-top: var(--dttt-space-2); color: var(--dttt-color-muted); }
.dttt-hero-metrics { min-width: 0; }
@media (max-width: 1023px) {
.dttt-container,
  .dttt-hero-inner,
  .dttt-main-workspace,
  .dttt-lms-shell > .dttt-ops-shell,
  .dttt-course-workspace,
  .dttt-student-dashboard,
  .dttt-course-portal {
    width: calc(100% - 2 * var(--dttt-gutter-tablet));
  }
}
.dttt-hero-priority .dttt-section-head{margin:4px 0 14px}
.dttt-hero-priority .dttt-section-head h2{color:#fff;font-size:clamp(23px,2.5vw,32px)}
.dttt-live-hero-meta>span:not(.dttt-live-status){background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#effaff;font-size:11px;font-weight:800;padding:7px 9px}
.dttt-home-section,.dttt-student-board,.dttt-public-layout{max-width:1180px;margin:0 auto 34px;padding:0}
@media(max-width:1200px) {
.dttt-home-section,.dttt-student-board,.dttt-public-layout{margin-left:20px;margin-right:20px}
}
@media(max-width:680px) {
.dttt-highlight-slides{aspect-ratio:4/5;min-height:470px}
.dttt-highlight-slide .dttt-highlight-image:after{background:linear-gradient(0deg,rgba(3,22,43,.96) 0%,rgba(3,22,43,.72) 46%,rgba(3,22,43,.08) 78%)}
.dttt-highlight-overlay{width:100%;padding:24px 22px 54px}
.dttt-highlight-overlay h3{font-size:24px}
.dttt-highlight-overlay p{font-size:13px}
.dttt-highlight-grid{grid-template-columns:1fr}
.dttt-highlight-grid article{grid-template-columns:38% 1fr;min-height:170px}
.dttt-highlight-image,.dttt-image-placeholder{min-height:170px}
.dttt-highlight-body p{display:none}
.dttt-hero-inner{padding:38px 18px 48px}
.dttt-highlight-carousel,.dttt-highlight-slides,.dttt-highlight-slide,.dttt-highlight-slide .dttt-highlight-image,.dttt-highlight-overlay{width:100%;}
.dttt-highlight-slide .dttt-highlight-image img{width:100%;}
.dttt-live-hero-meta{align-items:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dttt-live-hero-meta>span{justify-content:center;text-align:center}
.dttt-student-hero .dttt-hero-inner{padding:20px 18px}
.dttt-live-hero-actions .dttt-button{text-align:center}
.dttt-live-hero-actions{align-items:stretch;display:grid;grid-template-columns:1fr 1fr;min-width:0}
.dttt-live-hero-actions .dttt-live-connection{justify-content:center}
.dttt-home-section,.dttt-student-board,.dttt-public-layout{margin-left:10px;margin-right:10px}
}
.dttt-student-hero-actions .dttt-achievement-switch{align-items:center;background:#fff;border:1px solid #cfe1e7;border-radius:10px;color:#1b5b77;display:inline-flex;font-size:12px;font-weight:800;justify-content:center;min-height:44px;padding:9px 13px;text-decoration:none}
@media(max-width:560px) {
.dttt-student-hero .dttt-student-hero-actions{align-items:stretch;flex-direction:column;gap:6px}
.dttt-student-hero .dttt-student-hero-actions .dttt-hero-stat{width:auto}
.dttt-student-hero-actions .dttt-achievement-switch{padding:7px 10px}
}
.dttt-hero-inner,
.dttt-course-workspace-head,
.dttt-course-workspace,
.dttt-portal,
.dttt-public-shell > .dttt-public-layout,
.dttt-public-shell > .dttt-student-dashboard {
  box-sizing: border-box;
  min-width: 0;
}
.dttt-hero-inner { margin: auto; padding: 38px 18px 48px; display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; max-width: var(--dttt-shell-max); }
@media (min-width: 768px) {
  .dttt-hero-inner { padding: 54px 24px 62px; display: flex; justify-content: space-between; align-items: flex-end; }
}
html body .dttt-course-context.dttt-portal-hero { width: 100vw; max-width: none; }
.dttt-live-hero-meta,.dttt-live-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dttt-live-hero-actions{align-items:flex-end;display:flex;flex-direction:column;gap:12px;min-width:140px;justify-content:flex-end}
.dttt-live-hero-actions .dttt-button{background:#fff;border-color:#fff;color:#145b84;min-height:42px;white-space:nowrap}
@media(max-width:600px) {
.dttt-live-hero-actions{justify-content:flex-start}
}
/* The media layer owns the full-slide darkening; copy overlay is geometry only. */
.dttt-highlight-overlay{position:absolute;z-index:2;left:0;bottom:0;color:#fff;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;inset:0;justify-content:flex-end;max-width:none;padding:clamp(30px,4.2vw,62px);width:auto;background:transparent}
.dttt-hero-actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.dttt-hero-actions a{align-items:center;border-radius:12px;display:inline-flex;font-size:14px;font-weight:800;justify-content:center;line-height:1.2;min-height:44px;padding:11px 16px;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease}
.dttt-hero-primary{background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(0,17,38,.24);color:#0755a5}
.dttt-hero-primary:hover,.dttt-hero-primary:focus-visible{background:#e8f7ff;box-shadow:0 10px 24px rgba(0,17,38,.3);color:#06457f;outline:0;transform:translateY(-1px)}
.dttt-hero-secondary{background:rgba(3,25,47,.34);border:1px solid rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px)}
.dttt-hero-secondary:hover,.dttt-hero-secondary:focus-visible{background:rgba(8,118,182,.74);border-color:#fff;box-shadow:0 8px 20px rgba(0,17,38,.22);color:#fff;outline:0;transform:translateY(-1px)}
/* Composition correction: Quick Access intentionally overlaps the Hero; lift copy clear of its surface. */
/* Canonical Hero controls: one edge-rail and one single-row indicator contract. */
.dttt-highlight-carousel {position:relative;border-radius:18px;overflow:hidden;background:#062b55;box-shadow:0 16px 38px rgba(18,48,78,.18);
  touch-action: pan-y;
}
.dttt-highlight-carousel .dttt-carousel-arrow {
  align-items: center;
  appearance: none;
  background: linear-gradient(90deg, rgba(3, 23, 44, .82) 0%, rgba(3, 23, 44, .38) 54%, rgba(3, 23, 44, 0) 100%);
  border: 0;
  border-radius: 0;
  bottom: 0;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  left: 0;
  opacity: .82;
  padding: 0 0 0 17px;
  position: absolute;
  top: 0;
  transition: background .18s ease, opacity .18s ease;
  width: 72px;
  z-index: 6;
}
.dttt-highlight-carousel .dttt-carousel-arrow.is-next {
  background: linear-gradient(270deg, rgba(3, 23, 44, .82) 0%, rgba(3, 23, 44, .38) 54%, rgba(3, 23, 44, 0) 100%);
  justify-content: flex-end;
  left: auto;
  padding: 0 17px 0 0;
  right: 0;
}
.dttt-highlight-carousel .dttt-carousel-arrow::before {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: block;
  height: 12px;
  opacity: .98;
  transform: rotate(135deg);
  width: 12px;
}
.dttt-highlight-carousel .dttt-carousel-arrow.is-next::before {
  transform: rotate(-45deg);
}
.dttt-highlight-carousel .dttt-carousel-arrow:hover,
.dttt-highlight-carousel .dttt-carousel-arrow:focus-visible {
  background: linear-gradient(90deg, rgba(8, 118, 182, .9) 0%, rgba(8, 118, 182, .44) 54%, rgba(8, 118, 182, 0) 100%);
  opacity: 1;
  outline: 0;
}
.dttt-highlight-carousel .dttt-carousel-arrow.is-next:hover,
.dttt-highlight-carousel .dttt-carousel-arrow.is-next:focus-visible {
  background: linear-gradient(270deg, rgba(8, 118, 182, .9) 0%, rgba(8, 118, 182, .44) 54%, rgba(8, 118, 182, 0) 100%);
}
.dttt-highlight-carousel .dttt-carousel-arrow:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .74);
}
.dttt-highlight-carousel .dttt-carousel-dots::-webkit-scrollbar {
  display: none;
}
.dttt-highlight-carousel .dttt-carousel-dots button:hover::before,
.dttt-highlight-carousel .dttt-carousel-dots button:focus-visible::before {
  background: #bfeeff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .24);
}
@media (prefers-reduced-motion: reduce) {
.dttt-home-slide{ transition: none; }
.dttt-hero-compact .dttt-highlight-slide,.dttt-hero-compact .dttt-highlight-image img{transition:none}
.dttt-hero-compact .dttt-highlight-slide.is-active:hover .dttt-highlight-image img{transform:none}
.dttt-hero-actions a{transition:none}
.dttt-hero-actions a:hover,.dttt-hero-actions a:focus-visible{transform:none}
  .dttt-highlight-carousel .dttt-carousel-arrow,
  .dttt-highlight-carousel .dttt-carousel-dots button::before {
    transition: none;
  }
}

/* Final visual pass: quiet markers, no enclosing pill, no nested circles. */
.dttt-highlight-carousel .dttt-carousel-dots {
  align-items: center;
  border-radius: 999px;
  bottom: 22px;
  display: flex;
  flex-wrap: nowrap;
  left: 50%;
  overflow-x: auto;
  overflow-y: hidden;
  position: absolute;
  scrollbar-width: none;
  transform: translateX(-50%);
  z-index: 7;
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 2px;
  max-width: calc(100% - 180px);
  padding: 0;
}
.dttt-highlight-carousel .dttt-carousel-dots button {
  align-items: center;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 22px;
  height: 28px;
  padding: 0;
  width: 22px;
}
.dttt-highlight-carousel .dttt-carousel-dots button::before {
  content: "";
  display: block;
  transition: background .18s ease, box-shadow .18s ease, width .18s ease;
  background: rgba(255, 255, 255, .56);
  border-radius: 999px;
  box-shadow: none;
  height: 6px;
  width: 6px;
}
.dttt-highlight-carousel .dttt-carousel-dots button.is-active::before {
  background: #fff;
  box-shadow: none;
  width: 16px;
}
.dttt-highlight-carousel .dttt-carousel-dots button:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(191, 238, 255, .78);
  outline: 0;
}
@media (max-width: 740px) {
.dttt-hero-compact .dttt-hero-priority{padding:0 10px}
.dttt-hero-compact .dttt-highlight-slide .dttt-highlight-image:after{background:linear-gradient(0deg,rgba(2,19,37,.96) 0%,rgba(2,19,37,.75) 47%,rgba(2,19,37,.08) 79%);background:linear-gradient(0deg,rgba(2,18,35,.93) 0%,rgba(2,18,35,.72) 37%,rgba(2,18,35,.35) 60%,rgba(2,18,35,.08) 80%,rgba(2,18,35,0) 100%)}
.dttt-hero-compact .dttt-highlight-overlay h1{font-size:24px;font-size:25px;font-size:clamp(23px,6.2vw,27px);letter-spacing:-.45px;line-height:1.16;margin:13px 0 10px}
.dttt-hero-compact,.dttt-hero-priority,.dttt-highlight-carousel,.dttt-highlight-slides,.dttt-highlight-slide{height:430px;min-height:0;height:390px}
.dttt-highlight-overlay>*{max-width:84vw}
.dttt-highlight-overlay h1{font-size:clamp(28px,8vw,37px);line-height:1.07}
.dttt-highlight-overlay time{margin-top:10px}
.dttt-home-featured,.dttt-home-carousel,.dttt-home-slides,.dttt-home-slide{height:345px}
.dttt-highlight-slides{aspect-ratio:16/11;min-height:0}
.dttt-highlight-overlay{background:linear-gradient(90deg,rgba(3,17,31,.72) 0%,rgba(3,17,31,.48) 56%,rgba(3,17,31,.12) 100%),linear-gradient(0deg,rgba(3,17,31,.22) 0%,rgba(3,17,31,0) 60%);padding:24px 20px 31px;padding:18px 18px 42px}
.dttt-highlight-overlay h3{font-size:20px}
.dttt-highlight-overlay p{font-size:13px;line-height:1.45;display:none}
.dttt-news-stream{grid-template-columns:1fr;margin-top:0}
.dttt-hero-priority{padding:0 10px}
.dttt-hero-priority .dttt-highlight-slides{aspect-ratio:4/5;min-height:430px}
.dttt-hero-compact .dttt-highlight-slides{aspect-ratio:4/4.65;min-height:390px;aspect-ratio:4/5.05;min-height:440px;aspect-ratio:4/3.65;min-height:320px}
.dttt-hero-compact .dttt-highlight-overlay{padding:20px 20px 48px;padding:24px 20px 52px;width:100%;padding-top:20px;padding-bottom:42px;padding-top:14px}
.dttt-hero-compact .dttt-highlight-overlay p{font-size:13px;line-height:1.5;display:block;font-size:12px;line-height:1.45;max-width:330px}
.dttt-hero-priority .dttt-section-head{margin-top:0}
.dttt-hero-priority .dttt-section-head h2{font-size:23px}
.dttt-hero-actions{margin-top:20px;gap:8px;margin-top:18px}
.dttt-hero-actions a{flex:1 1 160px;min-height:44px;padding:10px 13px}
.dttt-home-featured-copy{bottom:78px}
  .dttt-highlight-carousel .dttt-carousel-arrow {
    padding-left: 11px;
    width: 54px;
  }
  .dttt-highlight-carousel .dttt-carousel-arrow.is-next {
    padding-left: 0;
    padding-right: 11px;
  }
  .dttt-highlight-carousel .dttt-carousel-dots button.is-active::before {
    width: 15px;
  }
  .dttt-highlight-carousel .dttt-carousel-dots {
    bottom: 16px;
    max-width: calc(100% - 108px);
    padding: 1px 4px;
    bottom: 16px;
    max-width: calc(100% - 108px);
  }
  .dttt-highlight-carousel .dttt-carousel-dots button {
    flex-basis: 22px;
    height: 28px;
    width: 22px;
    flex-basis: 22px;
    height: 28px;
    width: 22px;
  }
}

/* Canonical public-home context for Hero composition. */
body:has(.dttt-home-hero) {
  --home-max: 1180px;
  --home-gutter: 24px;
  --home-blue: #0876b6;
  --home-deep: #082f52;
  --home-ink: #14243a;
  --home-muted: #647889;
  --home-border: #dce7ee;
  --home-canvas: #f4f7f9;
  background: var(--home-canvas);
  color: var(--home-ink);
  overflow-x: clip;
}
@media (max-width: 900px) {
.dttt-course-hero-actions{margin-left:0}
.dttt-course-hero-join{padding:6px}
.dttt-hero-stat{display:none}
.dttt-guest-layout .dttt-priority,.dttt-news-stream{grid-column:1}
.dttt-news-stream{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(.dttt-home-hero) { --home-gutter: 16px; }
}
@media (max-width: 767px) {
  :where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) { min-height: 112px; margin-bottom: 0; padding: 12px 0; }
  html body section.dttt-hero.dttt-student-portal-hero,
  html body section.dttt-hero.dttt-staff-hero.dttt-workspace-role,
  html body section.dttt-hero.dttt-course-context.dttt-portal-hero { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) .dttt-hero-inner { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; width: min(var(--dttt-hero-max), calc(100% - 2 * var(--dttt-shell-gutter))); max-width: var(--dttt-hero-max); min-height: 88px; margin-inline: auto; padding: 0; }
:where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) :where(h1,h2) { font-size: 24px; }
  :where(.dttt-staff-hero.dttt-workspace-role, .dttt-student-portal-hero, .dttt-course-context.dttt-portal-hero) p { display: -webkit-box; overflow: hidden; font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  :where(.dttt-hero.dttt-student-portal-hero) .dttt-hero-inner { min-height: 0; padding: 16px 18px 18px; }

.dttt-hero-stat { display: none; }
.dttt-staff-hero.dttt-course-hero { min-height: 236px; padding-block: 12px; }
.dttt-staff-hero.dttt-course-hero .dttt-hero-inner { min-height: 212px; }
.dttt-course-hero-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; width: 100%; max-width: 100%; margin: 0; padding: 8px; }
.dttt-course-hero-join { grid-column: 1 / -1; }
.dttt-course-hero-qr { flex-basis: 68px; width: 68px; height: 68px; flex-basis: 62px; width: 62px; height: 62px; }
.dttt-course-hero-qr :where(canvas,img,svg) { width: 56px; height: 56px; }
.dttt-standalone-hero { padding: 22px 18px; border-radius: 16px; }
.dttt-public-reader-hero{min-height:128px;padding:14px 0}
.dttt-public-reader-hero .dttt-hero-inner{min-height:100px}
.dttt-public-reader-hero h1{font-size:25px}
.dttt-live-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; width: 100vw; max-width: none; min-height: 112px; margin-left: calc(50% - 50vw); padding: 14px; }
.dttt-live-hero h1 { font-size: 24px; }
.dttt-live-hero-meta { display: flex; gap: 6px; margin-top: 8px; }
.dttt-home-hero .dttt-highlight-overlay h2{font-size:clamp(24px,7.4vw,32px);line-height:1.15}
.dttt-hero-grid { grid-template-columns: 1fr; gap: var(--dttt-space-2); }
.dttt-hero-copy h1 { font-size: 24px; line-height: 1.2; }
.dttt-live-hero-actions { display: grid ; grid-template-columns: repeat(2,minmax(0,1fr)) ; gap: 7px ; justify-content: stretch ; }
.dttt-live-hero-actions .dttt-live-connection { grid-column: 1 / -1 ; justify-content: flex-start ; }
.dttt-live-hero-actions .dttt-button { min-height: 38px ; padding: 7px 8px ; text-align: center ; }
.dttt-container,
  .dttt-hero-inner,
  .dttt-main-workspace,
  .dttt-lms-shell > .dttt-ops-shell,
  .dttt-course-workspace,
  .dttt-student-dashboard,
  .dttt-course-portal {
    width: calc(100% - 2 * var(--dttt-gutter-mobile));
  }
  body:has(.dttt-home-hero) { --home-gutter: 12px; }
  .dttt-home-hero { height: 345px; min-height: 345px; padding: 0 var(--home-gutter); }
  .dttt-home-featured,
  .dttt-home-carousel,
  .dttt-home-slides { height: 345px; }
  .dttt-home-carousel { border-radius: 0; }
  .dttt-home-slide .dttt-highlight-image::after { background: linear-gradient(0deg,rgba(3,25,48,.96) 0%,rgba(3,25,48,.78) 49%,rgba(3,25,48,.12) 82%); }
  .dttt-home-slide .dttt-hero-media--contain .dttt-media-foreground { width: 100%; opacity: .3; }
  .dttt-home-featured-copy { left: 20px; right: 20px; bottom: 40px; width: auto; }
  .dttt-home-featured-copy h1,
  .dttt-home-featured-copy h2 { margin-top: 10px; font-size: clamp(26px, 8vw, 34px); }
  .dttt-home-featured-copy p { font-size: 13px; -webkit-line-clamp: 3; }
}

/* Canonical Home Hero geometry: the visual carousel fills its fixed wrapper. */
@media (min-width: 741px) {
.dttt-hero-compact,.dttt-hero-priority,.dttt-highlight-carousel,.dttt-highlight-slides,.dttt-highlight-slide{height:clamp(500px,39vw,570px);min-height:0}
.dttt-home-featured-copy{bottom:140px;padding-inline:max(var(--home-gutter),calc((100% - var(--home-max))/2))}
  .dttt-home-featured,
  .dttt-home-carousel,
  .dttt-home-slides,
  .dttt-home-slide { height: 100%; }
}

/* Dashboard Hero is full-bleed on desktop; its inner copy keeps the shared shell axis. */
@media (min-width: 681px) {
  html body section.dttt-hero.dttt-student-portal-hero {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}