.vm-tabs {
      display: flex;
      padding: 25px;
      justify-content: center;
      gap: 15px;
      margin-bottom: 25px;
    }

    .vm-tab {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 10px 18px;
      background: #f1f1f1;
      border-radius: 6px;
      transition: all 0.3s ease;
      font-weight: 500;
      gap: 20px;
    }

    .vm-tab img{
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
    .vntan-cnt{
      display: flex;
     
      gap: 20px;
    }
    .vm-tab:hover {
      background: #e1e1e1;
    }

    .vm-tab.active {
      background: #2f9e44;
      color: #fff;
    }
    .vm-tab.active img {
  filter: brightness(0) invert(1);
}

.vm-tab.active h4,
.vm-tab.active p {
  color: #fff;
}
    /* Product */
    .vm-product {
      display: none;
    }

    .vm-product.active {
      display: block;
    }

    .vm-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }

    .vm-mainimg {
      width: 100%;
      max-width: 500px;
      height: auto;
      border-radius: 8px;
      margin-bottom: 15px;
    }


    .vm-thumbs {
      display: flex;
      gap: 12px;
    }

    .vm-thumb {
      width: 70px !important;
      height: 70px;
      object-fit: cover;
      border-radius: 6px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .vm-thumb:hover {
      border-color: #bbb;
    }

    .vm-thumb.active {
      border-color: #2f9e44;
    }

    .vm-details h3 {
      font-size: 20px;
      font-weight: 600;
      margin: 20px 0 10px;
      color: var(--main-color);
      border-bottom: 2px solid var(--main-color);
      display: inline-block;
      padding-bottom: 4px;
    }

    .vm-details ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .vm-details ul li {
      margin-bottom: 6px;
      color: var(--head-color);
      font-weight: 400;
      font-size: 16px;
    }

    .vm-details strong {
      color: var(--head-color);
      font-weight: 600;
    }

@media screen and (max-width: 768px) {
  .vm-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .vm-mainimg {
    max-width: 100%;
  }

  .vm-thumbs {
    justify-content: center;
    flex-wrap: wrap;
  }

  .vm-thumb {
    width: 60px;
    height: 60px;
  }

  .vm-tabs {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
  }

  .vm-tab {
    padding: 8px 14px;
    font-size: 14px;
  }
   .vntan-cnt{
       flex-direction: column;
   }
}

@media screen and (max-width: 480px) {
  .vm-tab {
    font-size: 13px;
    padding: 7px 12px;
  }

  .vm-thumb {
    width: 50px;
    height: 50px;
  }

  .vm-details h3 {
    font-size: 18px;
  }

  .vm-details ul li {
    font-size: 14px;
  }
}