/* Minification failed. Returning unminified contents.
(7,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(23,23): run-time error CSS1039: Token not allowed after unary operator: '-web-hero-title-max'
(24,41): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(28,33): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(35,33): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(56,15): run-time error CSS1039: Token not allowed after unary operator: '-web-lead'
(113,26): run-time error CSS1039: Token not allowed after unary operator: '-D'
(114,27): run-time error CSS1039: Token not allowed after unary operator: '-D'
(117,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,16): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(135,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,65): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(144,65): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(157,49): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(167,15): run-time error CSS1039: Token not allowed after unary operator: '-lw'
(182,47): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(183,76): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(184,52): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(208,40): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(213,36): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(226,49): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(268,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(272,61): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(276,19): run-time error CSS1039: Token not allowed after unary operator: '-web-ecosystem-content'
(308,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-900'
(309,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(310,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl-lh'
(341,26): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-200'
(343,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(364,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-800'
(365,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(366,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(373,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(374,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(375,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs-lh'
(394,19): run-time error CSS1039: Token not allowed after unary operator: '-web-ecosystem-content'
(410,13): run-time error CSS1039: Token not allowed after unary operator: '-web-space-16'
(411,32): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(421,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(422,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(423,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl-lh'
(428,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-500'
(429,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(430,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(442,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(443,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(444,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(447,62): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(452,26): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow-mid'
(453,23): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-pill'
(454,20): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow-50'
(455,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(478,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(496,79): run-time error CSS1039: Token not allowed after unary operator: '-i'
(538,19): run-time error CSS1039: Token not allowed after unary operator: '-web-section-title'
(539,21): run-time error CSS1039: Token not allowed after unary operator: '-web-section-title-lh'
(548,61): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(550,19): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(557,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(557,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(557,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(561,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(561,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(561,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(565,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(565,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(565,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(566,77): run-time error CSS1039: Token not allowed after unary operator: '-dth-o'
(569,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(569,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(569,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(570,77): run-time error CSS1039: Token not allowed after unary operator: '-dth-i'
(577,70): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(581,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(581,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(581,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(582,69): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(585,40): run-time error CSS1030: Expected identifier, found '.'
(585,82): run-time error CSS1031: Expected selector, found ')'
(585,82): run-time error CSS1025: Expected comma or open brace, found ')'
(586,34): run-time error CSS1030: Expected identifier, found '.'
(586,58): run-time error CSS1031: Expected selector, found ')'
(586,58): run-time error CSS1025: Expected comma or open brace, found ')'
(591,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(591,20): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(591,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(592,66): run-time error CSS1039: Token not allowed after unary operator: '-j'
(608,98): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(611,25): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(622,39): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg'
(622,72): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg-lh'
 */

.dt-hero {
  min-height: 573px;
  display: flex;
  align-items: center;
  padding: 56px 0;
  background: var(--web-white)
              url('../../../Public/vietasoft/assets/images/backgrounds/doi-tac-hero-bg.jpg')
              center / cover no-repeat;
}

.dt-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.dt-hero-title {
  display: flex;
  flex-direction: column;
  font-size: min(var(--web-hero-title-max), clamp(32px, 5.6vw, 54px),
                 calc((100vw - 2 * var(--web-container-pad)) * .0814));
  line-height: 1.296;
  font-weight: 800;
}
.dt-hero-title-l1 { color: var(--web-primary); }

/* Dòng 2: gradient vàng của Figma. ⚠ A11Y CỐ Ý KHÔNG ĐẠT AA (~1.5:1) — ghi chú nội bộ của Designer, bản port đổi sang `--web-yellow-800`. Bọc @supports để trình duyệt thiếu
      background-clip không làm chữ vô hình. Điểm giữa #FFDF40 (KHÔNG phải #FFE14A).
      🔺 B110 — thêm LỚP TRÊN là vệt sáng (mục 4 cho nó lướt 1 lần lúc vào trang, keyframes
      `web-glint` ở components.css mục 11). Lúc NGHỈ lớp đó nằm ngoài mép trái -> 0 pixel
      nào đổi so với gradient Figma, kể cả khi giảm chuyển động. */
.dt-hero-title-l2 { color: var(--web-yellow); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dt-hero-title-l2 {
    background-image:
      linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .7) 50%, transparent 56%),
      linear-gradient(90deg, #FFD400 0%, #FFDF40 33.654%, #FFD400 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.dt-hero-lead {
  max-width: 821px;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.333;
  font-weight: 400;
  color: var(--web-lead);
}


.dt-hero.dth-hero {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 72px 0 64px;
  overflow-x: clip;
}
.dth-hero > .web-container { width: 100%; }
.dth-hero .dt-hero-text { margin-bottom: 40px; }


.dth-diagram-wrap {
  max-width: 1320px;
  margin-inline: auto;
}
.dth-diagram {
  position: relative;
  aspect-ratio: 1320 / 480;
}

.dth-diagram::before {
  content: '';
  position: absolute;
  inset: -6% 0;
  z-index: -1;
  background:
    radial-gradient(28% 60% at 50% 50%, rgba(16, 221, 100, .16) 0%, rgba(16, 221, 100, 0) 100%),
    radial-gradient(circle, rgba(44, 71, 158, .13) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(60% 75% at 50% 50%, #000 35%, transparent 100%);
  pointer-events: none;
}
.dth-diagram { isolation: isolate; }

.dth-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dth-line {
  fill: none;
  stroke: #E5E5E5;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.dth-net .dth-line--trai { stroke: url(#dth-mo-trai); }
.dth-net .dth-line--phai { stroke: url(#dth-mo-phai); }

.dth-flow {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--D) 4000px;
  stroke-dashoffset: var(--D);
}
.dth-flow--glow {
  --D: 50px;
  stroke: #10DD64;
  stroke-width: 5;
  opacity: .3;
  filter: blur(2.5px);
}
.dth-flow--core {
  --D: 0.01px;
  stroke-dashoffset: 10px;
  stroke: var(--web-accent);
  stroke-width: 5;
  filter: drop-shadow(0 0 3px rgba(16, 221, 100, .75));
}


.dth-tiles,
.dth-grid { margin: 0; padding: 0; list-style: none; }
.dth-card {
  --tint: var(--web-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: linear-gradient(180deg, #FCFCFD 0%, #F2F3F5 100%);
  background:
    radial-gradient(70% 90% at 88% 8%,  color-mix(in srgb, var(--tint) 9%, transparent) 0%, transparent 70%),
    radial-gradient(70% 90% at 12% 96%, color-mix(in srgb, var(--tint) 6%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #FCFCFD 0%, #F2F3F5 100%);
  box-shadow:
    0 14px 28px -14px rgba(16, 24, 40, .22),
    0 2px 6px rgba(16, 24, 40, .05),
    inset 0 1px 0 #fff,
    inset 0 -3px 8px rgba(16, 24, 40, .035);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .dth-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 18px 32px -14px color-mix(in srgb, var(--tint) 40%, rgba(16, 24, 40, .25)),
      0 2px 6px rgba(16, 24, 40, .05),
      inset 0 1px 0 #fff;
  }
}
/* 🪤 Nhiều file logo mang NỀN TRẮNG ĐẶC (bake sẵn từ ô trắng Figma) -> trên nền kính
      mờ lòi ra 1 hộp trắng (đo 02/10: Panasonic · NEC · BIDV…). `multiply` làm trắng hoà
      vào nền ô, màu logo giữ nguyên. */
.dth-card img {
  position: relative;
  width: var(--lw, 60%);
  height: auto;
  mix-blend-mode: multiply;
}

.dth-tile {
  position: absolute;
  width: calc(75 / 1320 * 100%);
  height: calc(75 / 480 * 100%);
}

.dth-tile-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid color-mix(in srgb, var(--tint) 55%, transparent);
  background: radial-gradient(80% 120% at 50% 50%, color-mix(in srgb, var(--tint) 12%, transparent) 0%, transparent 75%);
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--tint) 35%, transparent);
  opacity: 0;
  pointer-events: none;
}

.dth-hub {
  position: absolute;
  left: calc(585 / 1320 * 100%);
  top: 34.375%;
  width: calc(150 / 1320 * 100%);
  aspect-ratio: 1;
  border-radius: 23.8%;
  box-shadow: 0 0 40px 2px rgba(16, 221, 100, .35), 0 18px 36px -16px rgba(2, 122, 72, .55);
}
.dth-hub img { display: block; width: 100%; height: auto; border-radius: inherit; }
.dth-hub-flash,
.dth-hub-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.dth-hub-flash { box-shadow: 0 0 56px 12px rgba(16, 221, 100, .55); }
.dth-hub-ring { border: 2px solid var(--web-accent); }


@media (min-width: 769px) {
  .dt-hero.dth-hero {
    height: max(calc(100svh - var(--web-header-h)), 560px);
    justify-content: center;
    padding: clamp(28px, 6.5svh, 72px) 0 clamp(24px, 5.5svh, 64px);
  }
  .dth-hero .dt-hero-text { margin-bottom: clamp(20px, 3.5svh, 40px); }
  .dth-hero > .web-container:last-child {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .dth-diagram-wrap {
    width: 100%;
    flex: 0 1 min(480px, calc((100vw - 2 * var(--web-container-pad)) * 480 / 1320));
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dth-diagram {
    flex: none;
    width: min(100cqw, 275cqh);
  }
}
@media (min-width: 769px) and (orientation: portrait) {
  .dt-hero.dth-hero { height: auto; }
}


.dth-grid { display: none; }

@media (max-width: 768px) {
  .dt-hero.dth-hero { padding: 48px 0 40px; }
  .dth-hero .dt-hero-text { margin-bottom: 28px; }
  .dth-diagram-wrap { display: none; }
  .dth-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .dth-cell { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; }
}

@media (max-width: 576px) {
  .dth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dth-card { transition: none; }
  .dth-card:hover { transform: none; }
}


.dt-s2 {
  background: var(--web-white)
              url('../../../Public/vietasoft/assets/images/backgrounds/doi-tac-s2-bg.jpg')
              center top / 100% 100% no-repeat;
}
.dt-s2 > .web-container + .web-container { margin-top: var(--web-space-section); }


.dt-kn {
  max-width: var(--web-ecosystem-content);
  margin-inline: auto;
}

.dt-kn-groups { display: flex; flex-direction: column; gap: 32px; }

.dt-kn-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding-block: 10px;
}
.dt-kn-label::after {
  content: '';
  flex: 1 1 0;
  min-width: 1px;
  height: 1.5px;
  background: #141414;
  opacity: .2;
}
.dt-kn-label-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -8px;
}
.dt-kn-label-icon img { flex: none; max-width: none; }
.dt-kn-label-text {
  color: var(--web-primary-900);
  font-size: var(--web-text-xl);
  line-height: var(--web-text-xl-lh);
  font-weight: 600;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dt-kn-label-text {
    background-image: linear-gradient(95deg, #05174E 0.62%, var(--web-primary) 112.33%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.dt-kn-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  max-width: calc(1200px + 64px);
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
}
.dt-kn-card--c4 { grid-column: span 4; }
.dt-kn-card--c5 { grid-column: span 5; }
.dt-kn-card--c6 { grid-column: span 6; }
.dt-kn-card--c7 { grid-column: span 7; }

.dt-kn-card {
  position: relative;
  overflow: hidden;
  min-height: 166px;
  padding: 17px;
  border: 1px solid var(--web-gray-200);
  border-radius: 16px;
  background: var(--web-white);
  box-shadow: 0 8px 30px 3.056px rgba(32, 31, 64, .05);
}
.dt-kn-icon {
  position: relative;
  z-index: 1;
  display: flex;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
}
.dt-kn-icon img {
  display: block;
  max-width: none;
  margin: -4.5px -8.25px -11.5px -7.75px;
}

.dt-kn-name,
.dt-kn-desc { position: relative; z-index: 1; }
.dt-kn-name {
  margin: 0;
  color: var(--web-gray-800);
  font-size: var(--web-text-md);
  line-height: var(--web-text-md-lh);
  font-weight: 600;
}
.dt-kn-desc {
  max-width: 256px;
  text-wrap: balance;
  margin: 2px 0 0;
  color: var(--web-gray-700);
  font-size: var(--web-text-xs);
  line-height: var(--web-text-xs-lh);
}

.dt-kn-nen {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-width: none;
  pointer-events: none;
}
.dt-kn-nen--b2 { bottom: 2.42px; }
.dt-kn-nen--b6 { bottom: 5.97px; }
.dt-kn-nen--b9 { bottom: 9px; }
.dt-kn-nen--cm { right: 4.3px; bottom: 3px; }
.dt-kn-nen--cks { right: 8.67px; bottom: 7px; }


.dt-partners-inner {
  max-width: var(--web-ecosystem-content);
  margin-inline: auto;
}

.dt-bento {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-inline: 32px;
  max-width: calc(1200px + 64px);
  margin-inline: auto;
}

.dt-bt-row {
  display: flex;
  align-items: center;
  gap: var(--web-space-16);
  scroll-margin-top: calc(var(--web-header-h) + 16px);
}
.dt-bt-row:nth-child(even) { flex-direction: row-reverse; }
.dt-bt-info { flex: 0 0 min(450px, calc((100% - 64px) * 5 / 12)); min-width: 0; }
.dt-bt-row .dt-logo-grid { flex: 1 1 0; min-width: 0; }

.dt-bt-head { display: flex; align-items: center; gap: 14px; }
.dt-bt-head .dt-kn-icon { margin-bottom: 0; }
.dt-bt-name {
  margin: 0;
  color: var(--web-gray-900);
  font-size: var(--web-text-xl);
  line-height: var(--web-text-xl-lh);
  font-weight: 700;
}
.dt-bt-kind {
  margin: 14px 0 0;
  color: var(--web-gray-500);
  font-size: var(--web-text-sm);
  line-height: var(--web-text-sm-lh);
}
.dt-bt-points {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.dt-bt-points li {
  display: flex;
  gap: 8px;
  color: var(--web-gray-700);
  font-size: var(--web-text-sm);
  line-height: var(--web-text-sm-lh);
  font-weight: 500;
}
.dt-bt-points .bi { flex: none; margin-top: 2px; color: var(--web-accent); font-size: 16px; line-height: 1; }

.dt-flag {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--web-yellow-mid);
  border-radius: var(--web-radius-pill);
  background: var(--web-yellow-50);
  color: var(--web-gray-700);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.dt-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dt-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 60px) / 4);
  aspect-ratio: 225 / 100;
  border-radius: 2px;
  background: var(--web-white);
  box-shadow: 2px 3px 1.75px rgba(5, 19, 60, .2);
  position: relative;
  overflow: hidden;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.dt-logo-grid--c3 {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 60px) / 4));
  justify-content: center;
}
.dt-logo-grid--c3 .dt-logo-cell { width: auto; }

.dt-anim .dt-bt-row:not(.is-vao) .dt-logo-cell {
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.dt-anim .dt-bt-row:not(.is-xong) .dt-logo-cell { transition-delay: calc(var(--i, 0) * 60ms); }

.dt-logo { transition: transform .3s ease; }
.dt-logo-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .dt-bento .dt-bt-row .dt-logo-cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 22px -10px rgba(5, 19, 60, .32), 2px 3px 1.75px rgba(5, 19, 60, .12);
  }
  .dt-logo-cell:hover .dt-logo { transform: scale(1.06); }
  .dt-logo-cell:hover::after { transform: translateX(120%); transition: transform .7s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-logo-cell,
  .dt-logo { transition: none; }
  .dt-bento .dt-bt-row .dt-logo-cell:hover { transform: none; }
  .dt-logo-cell:hover .dt-logo { transform: none; }
  .dt-logo-cell::after { display: none; }
}

.dt-logo          { width: 48.89%; height: auto; }
.dt-logo--w71     { width: 31.58%; }
.dt-logo--w89     { width: 39.50%; }
.dt-logo--w100    { width: 44.67%; }
.dt-logo--w115    { width: 51.04%; }
.dt-logo--w120    { width: 53.33%; }
.dt-logo--w121    { width: 53.78%; }
.dt-logo--w128    { width: 56.89%; }
.dt-logo--w137    { width: 60.89%; }
.dt-logo--w145    { width: 64.44%; }
.dt-logo--miller  { opacity: .84; }


.dt-cta-title {
  font-size: var(--web-section-title);
  line-height: var(--web-section-title-lh);
  letter-spacing: -0.72px;
}
.dt-cta-desc { max-width: 645px; }


@media (prefers-reduced-motion: no-preference) {
  .dt-hero-title-l1,
  .dt-hero-lead {
    animation: web-in .8s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms) both;
  }
  .dt-hero-lead { --rv-d: 200ms; }
  .dt-hero-title-l2 {
    animation: web-in .8s cubic-bezier(.22, 1, .36, 1) 100ms both,
               web-glint 1.2s ease-in-out 1.1s both;
  }

  .dth-hub {
    --rv-x: 0; --rv-y: 0; --rv-s: .6;
    animation: web-in .7s cubic-bezier(.34, 1.56, .64, 1) 300ms both;
  }
  .dth-net {
    --rv-x: 0; --rv-y: 0; --rv-s: 1;
    animation: web-in .9s ease-out 450ms both;
  }
  .dth-tile {
    --rv-x: 0; --rv-y: 0; --rv-s: .5;
    animation: web-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(500ms + var(--dth-o, 0) * 400ms) both;
  }
  .dth-cell {
    --rv-x: 0; --rv-y: 0; --rv-s: .7;
    animation: web-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(350ms + var(--dth-i, 0) * 60ms) both;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .dt-kn-label.web-rv.is-in::after {
    transform-origin: left;
    animation: dt-line-in .9s cubic-bezier(.22, 1, .36, 1) calc(var(--rv-d, 0ms) + 200ms) both;
  }

  .dt-kn-card.web-rv.is-in .dt-kn-icon {
    --rv-x: 0; --rv-y: 0; --rv-s: .5;
    animation: web-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rv-d, 0ms) + 200ms) both;
  }

  .dt-anim .dt-bt-row:not(.is-vao) :is(.dt-bt-head, .dt-bt-kind, .dt-bt-points li) { opacity: 0; }
  .dt-anim .dt-bt-row.is-vao :is(.dt-bt-head, .dt-bt-kind) {
    --rv-x: 0; --rv-y: 20px; --rv-s: 1;
    animation: web-in .7s cubic-bezier(.22, 1, .36, 1) calc(var(--j, 0) * 70ms) both;
  }
  .dt-anim .dt-bt-row.is-vao .dt-bt-points li {
    --rv-x: -16px; --rv-y: 0; --rv-s: 1;
    animation: web-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--j, 0) * 70ms) both;
  }
}
@keyframes dt-line-in { from { scale: 0 1; } }


@media (max-width: 1024px) {
  .dt-kn-grid,
  .dt-bento { padding-inline: 0; }
}

@media (max-width: 992px) {
  .dt-kn-grid .dt-kn-card { grid-column: span 6; }
  .dt-kn-grid .dt-kn-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .dt-bento .dt-bt-row,
  .dt-bento .dt-bt-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: var(--web-space-6); }
  .dt-bt-info,
  .dt-bt-row .dt-logo-grid { flex: none; }
  .dt-bento { gap: var(--web-space-12); }
  .dt-bt-row .dt-logo-cell { max-width: 180px; }
  .dt-bt-row .dt-logo-grid { justify-content: flex-start; }
  .dt-bt-row .dt-logo-grid--c3 {
    grid-template-columns: repeat(3, min(180px, calc((100% - 60px) / 4)));
    justify-content: start;
  }
}

@media (max-width: 768px) {
  .dt-cta-title { font-size: 28px; line-height: 36px; }
  .dt-kn-label-text { font-size: var(--web-text-lg); line-height: var(--web-text-lg-lh); }
  .dt-bento { gap: 40px; }
}

@media (max-width: 576px) {
  .dt-kn-grid .dt-kn-card { grid-column: 1 / -1; }
  .dt-logo-grid { gap: 12px; }
  .dt-logo-cell { width: calc((100% - 12px) / 2); }
  .dt-bento .dt-bt-row .dt-logo-grid--c3 { grid-template-columns: repeat(2, min(180px, calc((100% - 12px) / 2))); }
}