/* 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'
(27,33): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(29,33): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(49,15): run-time error CSS1039: Token not allowed after unary operator: '-web-lead'
(64,19): run-time error CSS1039: Token not allowed after unary operator: '-web-ecosystem-content'
(91,21): run-time error CSS1039: Token not allowed after unary operator: '-web-font-brand'
(97,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(114,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(115,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(118,15): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(122,19): run-time error CSS1039: Token not allowed after unary operator: '-tiles-w'
(153,20): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(157,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(173,19): run-time error CSS1039: Token not allowed after unary operator: '-web-ecosystem-content'
(197,15): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(201,19): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(202,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(204,15): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(217,19): run-time error CSS1039: Token not allowed after unary operator: '-web-integration-content'
(223,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(234,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(235,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(236,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(237,13): run-time error CSS1039: Token not allowed after unary operator: '-kh-gap'
(260,15): run-time error CSS1039: Token not allowed after unary operator: '-kh-tile'
(261,16): run-time error CSS1039: Token not allowed after unary operator: '-kh-tile'
(269,20): run-time error CSS1039: Token not allowed after unary operator: '-kh-tile'
(269,41): run-time error CSS1039: Token not allowed after unary operator: '-kh-gap'
(271,16): run-time error CSS1039: Token not allowed after unary operator: '-kh-tile'
(284,15): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(303,29): run-time error CSS1039: Token not allowed after unary operator: '-web-section-title'
(314,61): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(316,19): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(323,66): run-time error CSS1039: Token not allowed after unary operator: '-stat-in'
(326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(326,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(326,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(327,66): run-time error CSS1039: Token not allowed after unary operator: '-stat-in'
(329,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(330,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(331,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(332,31): run-time error CSS1030: Expected identifier, found '.'
(332,63): run-time error CSS1031: Expected selector, found ')'
(332,63): run-time error CSS1025: Expected comma or open brace, found ')'
(337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(337,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(337,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(339,26): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(339,53): run-time error CSS1039: Token not allowed after unary operator: '-rv-i'
(343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(343,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(343,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(348,32): run-time error CSS1039: Token not allowed after unary operator: '-kh-x'
(350,59): run-time error CSS1039: Token not allowed after unary operator: '-kh-x'
(375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */

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

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

.kh-hero-title {
  display: flex;
  flex-direction: column;
  font-size: min(var(--web-hero-title-max), clamp(22px, 3.6vw, 54px));
  line-height: 1.296;
  font-weight: 800;
}
.kh-hero-title-l1 { color: var(--web-primary); }

.kh-hero-title-l2 { color: var(--web-yellow); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kh-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;
  }
}

.kh-hero-lead {
  max-width: 957px;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.333;
  color: var(--web-lead);
}
.kh-hero-lead strong { font-weight: 600; }


.kh-groups {
  background-color: #FCFCFC;
  background-image:
    radial-gradient(44% 40% at 100%  68%, #EAF0FF 0%, rgba(234, 240, 255, 0) 100%),
    radial-gradient(70% 22% at  50% 100%, #FBF8E6 0%, rgba(251, 248, 230, 0) 100%),
    radial-gradient(38% 34% at  55%  18%, #FEFAF0 0%, rgba(254, 250, 240, 0) 100%),
    radial-gradient(30% 40% at   0%   8%, #FBFBFE 0%, rgba(251, 251, 254, 0) 100%);
}

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

.kh-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  list-style: none;
  margin: 0 -12px;
  padding: 0;
}

.kh-group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12.041px;
  border-radius: 26.49px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(5.249px);
          backdrop-filter: blur(5.249px);
  box-shadow: 0 .555px 1.625px rgba(0, 0, 0, .2);
}

.kh-group-name {
  font-family: var(--web-font-brand);
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.72px;
  font-weight: 700;
  text-align: center;
  color: var(--web-primary);
  width: 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kh-group-name {
    background-image: linear-gradient(99.76deg,
                        var(--web-primary) 24.002%, var(--web-primary-900) 135.71%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.kh-group-desc {
  max-width: 300px;
  min-height: 40px;
  font-size: var(--web-text-sm);
  line-height: var(--web-text-sm-lh);
  font-weight: 500;
  text-align: center;
  color: var(--web-gray-600);
}

.kh-tiles {
  width: min(var(--tiles-w, 100%), 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11.596px;
  list-style: none;
  padding: 0;
}


.kh-tile {
  position: relative;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
}
.kh-tile img {
  position: absolute;
  left: -3px;
  top: -2px;
  width: 76px;
  height: 76px;
  max-width: none;
}

.kh-tile--more {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.007px;
  background: var(--web-white);
  box-shadow: 3px 3px 4.8px rgba(0, 0, 0, .16);
  font-size: 14.8px;
  font-weight: 700;
  color: var(--web-primary);
}


.kh-metrics {
  padding: 80px 24px;
  background-image:
    linear-gradient(5.82deg, rgba(5, 23, 78, .82) 11.09%,
                             rgba(44, 71, 158, .82) 95.391%),
    url('../../../Public/vietasoft/assets/images/backgrounds/khach-hang-metrics-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kh-metrics-row {
  max-width: var(--web-ecosystem-content);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  list-style: none;
  padding: 0;
}

.kh-metric {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.kh-metric-num {
  font-size: clamp(36px, 3.4vw, 54px);
  line-height: 1.111;
  letter-spacing: -1.08px;
  font-weight: 700;
  color: var(--web-yellow);
}

.kh-metric-label {
  font-size: var(--web-text-md);
  line-height: var(--web-text-md-lh);
  font-weight: 600;
  color: var(--web-white);
}


.kh-wall {
  background-color: #FCFCFC;
  background-image:
    radial-gradient(40% 46% at 100%  62%, #EDF3FF 0%, rgba(237, 243, 255, 0) 100%),
    radial-gradient(80% 18% at  50% 100%, #FCFAE8 0%, rgba(252, 250, 232, 0) 100%),
    radial-gradient(36% 30% at  30%  20%, #FEFAF2 0%, rgba(254, 250, 242, 0) 100%);
}

.kh-wall-inner {
  max-width: var(--web-integration-content);
  margin-inline: auto;
  padding-inline: 32px;
  container-type: inline-size;
}

.kh-wall .section-heading { --section-copy-max: 800px; }

.kh-wall-grid {
  position: relative;
  max-width: 1280px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  --kh-row:  min(1280px, 100cqw);
  --kh-tile: min(65px, calc((var(--kh-row) - 35.634px) / 19));
  --kh-gap:  calc(var(--kh-tile) * 5 / 13);
  gap: var(--kh-gap);
  padding: 17.817px;
  border-radius: 22px;
  list-style: none;
  overflow: hidden;
}

.kh-wall-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1304px;
  height: 1352px;
  transform: translate(-50%, -50%);
  background: url('../../../Public/vietasoft/assets/icons/brand/gi-mark.svg') center / contain no-repeat;
  opacity: .11;
  filter: blur(2px);
  pointer-events: none;
}

.kh-wall-cell {
  flex: 0 0 auto;
  width: var(--kh-tile);
  height: var(--kh-tile);
  z-index: 1;
  filter: drop-shadow(5px 4px 4.8px rgba(0, 0, 0, .16));
}
.kh-wall-cell img { width: 100%; height: 100%; display: block; }

.kh-wall-note {
  flex: 0 0 auto;
  width: calc(var(--kh-tile) * 6 + var(--kh-gap) * 5);
  max-width: 100%;
  height: var(--kh-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.kh-wall-note p {
  font-family: Merriweather, Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: normal;
  letter-spacing: 1.92px;
  font-weight: 700;
  text-align: center;
  color: var(--web-primary);
  width: 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kh-wall-note p {
    background-image: linear-gradient(94.22deg,
                        var(--web-primary) 24.002%, var(--web-primary-900) 135.71%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}


.kh-cta-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: min(32px, var(--web-section-title));
  line-height: 44px;
  letter-spacing: -0.64px;
}

.kh-cta-desc { max-width: 752px; }


@media (prefers-reduced-motion: no-preference) {
  .kh-hero-title-l1,
  .kh-hero-lead {
    animation: web-in .8s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms) both;
  }
  .kh-hero-lead { --rv-d: 200ms; }
  .kh-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;
  }

  .kh-metric-num {
    animation: web-stat-in .6s cubic-bezier(.22, 1, .36, 1) var(--stat-in, 300ms) both;
  }
  .kh-metric-label {
    --rv-x: 0; --rv-y: 12px; --rv-s: 1;
    animation: web-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--stat-in, 300ms) + 120ms) both;
  }
  .kh-metric:nth-child(2) { --stat-in: 420ms; }
  .kh-metric:nth-child(3) { --stat-in: 540ms; }
  .kh-metric:nth-child(4) { --stat-in: 660ms; }
  .kh-metric.is-stat-wait :is(.kh-metric-num, .kh-metric-label) { animation-play-state: paused; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .kh-group-card.web-rv.is-in .kh-tile {
    --rv-x: 0; --rv-y: 0; --rv-s: .6;
    animation: web-in .5s cubic-bezier(.34, 1.56, .64, 1)
               calc(var(--rv-d, 0ms) + 250ms + var(--rv-i, 0) * 40ms) both;
  }

  .kh-wall-cell.web-rv {
    --rv-x: 0; --rv-y: 0; --rv-s: .6;
  }
  .kh-wall-cell.web-rv.is-in {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    animation-delay: calc(var(--kh-x, 0) * 350ms);
  }
  .kh-wall-note.web-rv.is-in { animation-delay: calc(var(--kh-x, 0) * 350ms); }

}


@media (max-width: 1200px) {
  .kh-wall-inner { padding-inline: 16px; }
}

@media (max-width: 992px) {
  .kh-metrics-row { justify-content: center; }
  .kh-metrics     { padding: 56px 20px; }
}

@media (max-width: 768px) {
  .kh-hero { min-height: 0; padding: 48px 0; }

  .kh-cta-title { font-size: 26px; line-height: 34px; }

  .kh-group-grid { gap: 16px; margin-inline: 0; }

  .kh-wall-inner { padding-inline: 0; }
  .kh-wall-grid  { padding: 10px; margin-top: 32px; }

  .kh-wall-grid {
    --kh-tile: 56px;
    --kh-gap: 12px;
  }
  .kh-wall-note {
    width: 100%;
    height: auto;
    padding-block: 8px;
  }

  .kh-wall-grid::before { display: none; }
}