/* ============================================
   ТЕСТИЙН КАРТ - ТОО ИЛҮҮ ГОЁ ХАРАГДУУЛАХ
   ============================================ */

.div3 .grid-container .item2,
.div3 .grid-container .item3,
.div3 .grid-container .item4 {
  padding: 36px 26px 30px 26px !important;
}

/* Тоог агуулсан хэсгийг тодорхой блок болгох */
.div3 .grid-container .item2 h2,
.div3 .grid-container .item3 h2,
.div3 .grid-container .item4 h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

/* Тооны ард өнгөт бүдэг тойрог (glow blob) нэмэх */
.div3 .grid-container .item2,
.div3 .grid-container .item3,
.div3 .grid-container .item4 {
  isolation: isolate;
}

.div3 .grid-container .item2::after,
.div3 .grid-container .item3::after,
.div3 .grid-container .item4::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  bottom: -60px;
  right: -50px;
  z-index: -1;
  opacity: 0.5;
}

.item2::after { background: radial-gradient(circle, rgba(72,125,231,0.14), transparent 70%); }
.item3::after { background: radial-gradient(circle, rgba(255,165,0,0.16), transparent 70%); }
.item4::after { background: radial-gradient(circle, rgba(121,195,20,0.16), transparent 70%); }

/* Том тоон дугаарыг илүү тод, gradient эффекттэй болгох */
.div3 .grid-container .item2 #top100,
.div3 .grid-container .item3 #top200,
.div3 .grid-container .item4 #top300 {
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.03);
}

/* "ТЕСТ" тайлбар үгийг badge мэт болгох */
.div3 .grid-container .number2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  color: #fff !important;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4 !important;
}

.div3 .grid-container .item2 h2,
.div3 .grid-container .item3 h2,
.div3 .grid-container .item4 h2 {
  flex-wrap: wrap;
  row-gap: 8px;
}

.item2 .number2 { background: var(--green); }
.item3 .number2 { background: var(--orange); }
.item4 .number2 { background: var(--blue); }

@media (max-width: 768px) {
  .div3 .grid-container .item2::after,
  .div3 .grid-container .item3::after,
  .div3 .grid-container .item4::after {
    width: 110px;
    height: 110px;
  }
  .div3 .grid-container .number2 {
    font-size: 12px !important;
    padding: 5px 12px;
  }
}