.dashbord {
  .hiring-robot {
    padding: 44px 31px 34px 28px;
    background-color: #1d222e;
    @extend %radius-12;

    &::before {
      background-color: #252b3a;
      border-radius: 184px;
      top: -141px;
      right: -71px;
      bottom: 203px;
      left: -65px;
    }

    &::after {
      background-image: url("./../images/shape/shape-02.png");
      width: 66px;
      height: 27px;
      left: 50%;
      transform: translateX(-50%);
    }

    .title {
      font-size: 18px;
      font-weight: 600;
      font-style: italic;
      line-height: 22px;
      margin-bottom: 20px;
    }

    .tabs {
      gap: 8px;
      margin-bottom: 15px;
      overflow: auto hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        background-color: transparent;
        @extend %radius-8;
        padding: 10px 7px;
        max-width: calc(33.333333% - 5px);
        font-size: 12px;
        color: #8c90a1;
        white-space: nowrap;
        flex: 0 0 auto;

        &,
        &::before {
          transition: all 0.3s ease-in-out;
        }

        &::before {
          right: 7px;
          left: 7px;
          height: 3px;
          background: #fb9337;
          border-radius: 4px;
        }

        &.active,
        &:hover {
          background-color: #30384b;
          color: #fff;

          &::before {
            opacity: 1;
          }
        }
      }
    }

    label {
      font-size: 12px;
      font-weight: 500;
      display: inline-block;
      color: #757d91;
      line-height: 21px;
      margin-bottom: 4px;
    }

    .total-price {
      margin: 23px 0 38px;
    }

    .btn {
      max-width: 100%;
      border-radius: 25px;
      box-shadow: 0 3px 30px rgba(#1b7ef0, 0.22);
      margin-bottom: 35px;
      height: 49px;
      line-height: 49px;

      i {
        font-size: 17px;
        margin-right: 9px;
      }
    }

    .pay {
      gap: 8px;

      li {
        max-width: calc(12.5% - 8px);
        width: 100%;
        flex: 0 0 auto;

        a {
          border-radius: 7px;
          background-color: #262b39;
          padding: 4px;
          height: 100%;
        }
      }
    }
  }

  .description-robot {
    background-color: #1d222e;
    @extend %radius-12;
    padding-bottom: 20px;
    height: 100%;

    &-heading {
      background-color: #202533;
      border-radius: 12px 12px 0 0;
      padding: 27px 25px 24px;
      color: #fff;
      font-weight: 700;
    }

    &-body {
      padding: 0 8px 0 20px;
      overflow: hidden auto;
      margin: 22px 17px 0 0;
      scrollbar-width: 7.5px;
      scrollbar-color: #282e3d #acb3c9;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      max-height: 532px;
      color: #a3a4ae;

      &::-webkit-scrollbar {
        width: 7.5px;
        border-radius: 72px;
      }

      &::-webkit-scrollbar-track {
        background-color: #282e3d;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #acb3c9;
        border-radius: 72px;
      }
    }
  }

  .exitsting-subscriptions {
    margin: 42px 0;

    .my-statistics-title {
      color: #acb3c9;
    }
  }

  .robot-items {
    gap: 17px 0;
    margin-bottom: 42px;
  }

  .robot-item {
    background-image: conic-gradient(
      from 58deg at 50% 50%,
      #1d222e 0deg,
      #1f2430 360deg
    );
    border-radius: 11px;
    padding: 22px 18px 18px;

    &::before {
      border-radius: 11px 0 0 11px;
      background-color: #2e3444;
      top: 6px;
      bottom: 6px;
      left: 6px;
      width: 125px;
    }

    .image {
      width: 190px;
      height: 190px;
      border-radius: 10px;
      background-color: #252b3a;
      border: 4px solid rgba(#485574, 0.42);

      &::before {
        opacity: 0.27;
        filter: blur(41px);
        background-image: url("./../images/background/bg-robot-image.png");
      }

      &::after {
        width: 57px;
        height: 99px;
        background-color: #2d035d;
        filter: blur(18px);
      }
    }

    .detail {
      max-width: calc(100% - 190px);
      flex: 0 0 auto;
      padding-left: 17px;

      h2 {
        font-size: 14px;
        font-weight: 500;
        font-style: italic;
        line-height: 18px;
        color: #fff;
        margin-bottom: 10px;

        i {
          margin-right: 4px;
          color: #8c90a1;
          font-size: 20px;
        }
      }

      .dob-capacity {
        border-radius: 6px;
        background-color: #212633;
        border: 1px dashed #363b46;
        padding: 7px 32px 8px 13px;
        margin-bottom: 14px;

        > div {
          font-size: 12px;
          color: #a5aab5;
          line-height: 15px;

          span {
            font-size: 25px;
            font-weight: 600;
            line-height: 30px;
            color: #8c90a1;
          }
        }

        .dob span {
          font-size: 18px;
          line-height: 22px;
          color: #e89323;
        }
      }

      .hobbies {
        font-size: 10px;
        font-weight: 500;
        line-height: 15px;
        color: #8c90a1;
        margin-bottom: 13px;

        span {
          color: #fff;
          font-weight: 600;
        }
      }

      .payment {
        background-color: #242a39;
        border-radius: 7px;
        padding: 9px 12px 7px;
        font-size: 12px;
        font-weight: 500;
        line-height: 15px;
        color: #8c90a1;

        i {
          font-size: 13px;
          margin-right: 5px;
        }

        span {
          font-weight: 600;
          font-size: 18px;
          line-height: 22px;
          color: #fff;
          margin-left: 5px;
        }
      }
    }
  }

  @include media("min", 1200px) {
    @include media("max", 1269px) {
      .robot-item {
        padding: 22px 12px 18px;

        .detail {
          .dob-capacity {
            padding: 7px 12px 8px;
          }

          .payment {
            padding: 9px 8px 7px;
          }
        }
      }
    }
  }

  @include xl {
    .description-robot {
      &-body {
        max-height: 560px;
      }
    }
  }

  @include lg {
    .hiring-robot {
      padding: 44px 20px 34px;

      .tabs {
        gap: 4px;

        li {
          max-width: calc(33.333333% - 3px);
          padding: 10px 5px;
        }
      }
    }
  }

  @include md {
    .hiring-robot {
      margin-bottom: 25px;
    }

    .description-robot {
      &-body {
        height: 500px;
      }
    }
  }

  @include xs {
    .hiring-robot {
      padding: 44px 19px 35px;

      .discount-box {
        padding-top: 8px;
      }

      .tabs {
        li {
          max-width: fit-content;
          padding: 10px 7px;
        }
      }
    }

    .description-robot {
      &-heading {
        padding: 27px 19px 24px;
      }
    }

    .robot-item {
      padding: 29px 19px 22px;

      &::before {
        right: 6px;
        bottom: auto;
        border-radius: 11px 11px 0 0;
        width: auto;
        height: 61px;
      }

      .image {
        position: absolute;
        top: 12px;
        left: 19px;
        width: 50px;
        height: 50px;
      }

      .detail {
        max-width: 100%;
        padding-left: 0;

        .name {
          padding-left: 64px;
          margin-bottom: 34px;
        }
      }
    }
  }

  @include media("max", 420px) {
    .hiring-robot {
      .discount-box {
        flex-direction: column;
        padding: 8px 20px;

        .detail {
          margin-top: 16px;
          text-align: center;

          .price {
            justify-content: center;
          }
        }
      }
    }
  }
}