.stlms-course-banner {
  padding: 77px 0;
  background-size: cover;
  background-position: center center;
  @include breakpoint(max, 767) {
    padding: 32px 0;
  }
  .stlms-breadcrumb {
    padding-bottom: 30px;
  }
  .stlms-course-title {
    font-size: 40px;
    font-weight: 500;
    color: $white;
    max-width: 700px;
    margin: 0;
    padding: 0 0 15px 0;
    @include breakpoint(max, 767) {
      font-size: 28px;
    }
  }
  .stlms-course-text {
    color: $white;
    font-size: 18px;
    line-height: 1.7;
    max-width: 700px;
    padding-bottom: 15px;
    @include breakpoint(max, 767) {
      font-size: 14px;
    }
  }
  .stlms-course-by-tag {
    display: flex;
    align-items: center;
    gap: 15px;
    .tag {
      padding: 5px 10px;
      display: inline-block;
      border-radius: 5px;
      color: $gray_dark;
      background: $gray;
      font-size: 16px;
      font-weight: 500;
    }
    .by {
      font-size: 18px;
      color: $white;
      a {
        color: $primary_light;
        text-decoration: none;
        @include transition(all 0.3s ease-in-out);
        &:hover,
        &:focus {
          color: $white;
        }
      }
    }
  }
}
.stlms-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: $gray_light;
  font-size: 13px;
  li {
    display: flex;
    gap: 16px;
    a {
      text-decoration: none;
      color: $gray_light;
      @include transition(all 0.3s ease-in-out);
      &:hover {
        color: $white;
      }
    }
    &.active {
      color: $white;
    }
  }
  > li + li {
    &::before {
      content: "/";
      display: block;
      color: $gray_light;
    }
  }
}

.stlms-course-detail-nav {
  border-bottom: 1px solid $gray;
  background: $white;
  padding: 30px 0;
  @include breakpoint(max, 767) {
    padding: 16px 0;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    @include breakpoint(max, 767) {
      gap: 12px;
    }
    li {
      display: flex;
      align-items: center;
      gap: 30px;
      @include breakpoint(max, 767) {
        gap: 12px;
      }
      & + li {
        &::before {
          content: "";
          width: 1px;
          height: 20px;
          background: $gray;
        }
      }
      a {
        font-size: 16px;
        font-weight: 500;
        color: $primary_dark;
        text-decoration: none;
        @include transition(all 0.3s ease-in-out);
        @include breakpoint(max, 767) {
          font-size: 14px;
        }
        &:hover,
        &:focus {
          color: $primary;
        }
      }
    }
  }
}

.stlms-course-detail-wrap {
  padding: 60px 0;
  @include breakpoint(max, 767) {
    padding: 32px 0;
  }
  .stlms-course-detail-column {
    display: flex;
    flex-direction: row-reverse;
    @include breakpoint(max, 1200) {
      flex-direction: column;
      gap: 30px;
    }
    .stlms-course-left {
      width: calc(100% - 460px);
      padding-right: 100px;
      @include breakpoint(max, 1200) {
        width: 100%;
        padding-right: 0;
      }
      .stlms-course-requirement-box {
        border: 1px solid $gray;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 40px;
        @include breakpoint(max, 767) {
          margin-bottom: 20px;
        }
        h3 {
          font-size: 20px;
          font-weight: 500;
          color: $black;
          margin: 0;
          padding-bottom: 20px;
        }
        .stlms-course-requirement-check {
          list-style: none;
          margin: 0;
          padding: 0;
          display: grid;
          grid-template-columns: 1fr;
          gap: 15px;
          li {
            position: relative;
            padding-left: 30px;
            color: $gray_dark;
            font-size: 16px;
            line-height: 1.7;
            &:before {
              content: "";
              width: 5px;
              height: 5px;
              border-radius: 100%;
              position: absolute;
              left: 10px;
              top: 10px;
              background: currentColor;
            }
          }
        }
        &.learn-box {
          .stlms-course-requirement-check {
            grid-template-columns: 1fr 1fr;
            @include breakpoint(max, 767) {
              grid-template-columns: 1fr;
            }
            li {
              &:before {
                width: 15px;
                height: 15px;
                border-radius: 0;
                left: 5px;
                top: 5px;
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.52036 12.5537C4.12296 12.5538 3.74183 12.3959 3.46106 12.1146L0.258452 8.9132C-0.0861507 8.56849 -0.0861507 8.00971 0.258452 7.665C0.603165 7.32039 1.16194 7.32039 1.50666 7.665L4.52036 10.6787L12.4933 2.70572C12.8381 2.36111 13.3968 2.36111 13.7415 2.70572C14.0862 3.05043 14.0862 3.60921 13.7415 3.95392L5.57966 12.1146C5.29889 12.3959 4.91776 12.5538 4.52036 12.5537Z' fill='%23595B68'/%3E%3C/svg%3E%0A");
                background-color: transparent;
                background-repeat: no-repeat;
              }
            }
          }
        }
        &.skill-box {
          .stlms-course-requirement-check {
            li {
              &:before {
                width: 15px;
                height: 15px;
                border-radius: 0;
                left: 5px;
                top: 5px;
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3554 14.1009L7.99964 10.8995L3.64389 14.1009L5.31631 8.9308L0.962891 5.74988H6.33772L7.99964 0.571045L9.66156 5.74988H15.0358L10.683 8.9308L12.3554 14.1009Z' fill='%23595B68'/%3E%3C/svg%3E%0A");
                background-color: transparent;
                background-repeat: no-repeat;
              }
            }
          }
        }
      }
    }
    .stlms-course-right {
      width: 460px;
      flex-shrink: 0;
      @include breakpoint(max, 1200) {
        width: 100%;
      }
    }
  }
  .stlms-course-info-box {
    background: $white;
    border-radius: 6px;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: -440px;
    position: sticky;
    top: 100px;
    @include breakpoint(max, 1200) {
      margin-top: 0;
    }
    .stlms-course-info-img {
      position: relative;
      padding-bottom: 56.25%;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: $black;
        opacity: 0.3;
        border-radius: 6px 6px 0 0;
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 6px 6px 0 0;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
      }
      .tag {
        position: absolute;
        left: 12px;
        top: 12px;
        padding: 5px 10px;
        display: inline-block;
        border-radius: 5px;
        color: $white;
        background: $primary_dark;
        font-size: 16px;
        font-weight: 500;
        z-index: 12;
      }
    }
    .stlms-course-info {
      padding: 15px;
      border: 1px solid $gray;
      border-radius: 0 0 6px 6px;
      h3 {
        color: $primary_dark;
        font-weight: 600;
        font-size: 20px;
        margin: 0;
        padding-bottom: 20px;
      }
      .stlms-course-include {
        display: flex;
        flex-direction: column;
        gap: 20px;
        li {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 16px;
          color: $gray_dark;
          svg {
            flex-shrink: 0;
            color: $primary_light;
          }
          span {
            margin-left: auto;
            flex-shrink: 0;
          }
        }
      }
      .cta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
        .download-certificate-cta {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          .stlms-btn.stlms-btn-block {
            padding-left: 4px;
            padding-right: 4px;
          }
        }
        // &:has(.download-certificate) {
        //   display: grid;
        //   grid-template-columns: 1fr 1fr;
        //   gap: 20px;
        //   .stlms-btn.stlms-btn-block {
        //     padding-left: 4px;
        //     padding-right: 4px;
        //   }
        // }
      }
      .stlms-course-share {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        li {
          a {
            width: 50px;
            height: 50px;
            border: 1px solid $gray;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $black;
            border-radius: 100%;
            @include transition(all 0.3s ease-in-out);
            &:hover {
              background: $primary_light;
              border-color: $primary_light;
              color: $white;
            }
          }
        }
      }
    }
  }
}

.stlms-accordion-course-content {
  .stlms-accordion {
    .stlms-accordion-item {
      border-bottom: 1px solid $gray;
      &:last-child {
        border-bottom: 0;
      }
      .stlms-accordion-header {
        padding: 30px 30px 30px 0;
        @include breakpoint(max, 767) {
          padding-top: 16px;
          padding-bottom: 16px;
        }
        .stlms-lesson-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 14px;
          color: $gray_light;
          @include breakpoint(max, 767) {
            flex-direction: column;
            align-items: flex-start;
          }
          .name {
            font-size: 18px;
            color: $primary_dark;
          }
        }
      }
      .stlms-accordion-collapse {
        border-top: 1px solid $gray;
      }
      .stlms-accordion-note {
        padding: 20px;
        background: $gray;
        border-radius: 6px;
        font-size: 16px;
        line-height: 1.7;
        color: $gray_dark;
        margin: 20px 0;
      }
      .stlms-lesson-list {
        > ul {
          > li {
            label {
              position: relative;
              .stlms-check {
                position: absolute;
                opacity: 0;
                visibility: hidden;
              }
              .stlms-lesson-class {
                align-items: center;
                flex-direction: row;

                @include breakpoint(max, 767) {
                  flex-wrap: wrap;
                  position: relative;
                  padding-left: 24px;
                }
                .class-time-info {
                  margin-left: auto;
                  display: flex;
                  gap: 10px;
                  align-items: center;
                  pointer-events: all;
                  @include breakpoint(max, 767) {
                    width: 100%;
                  }
                  .class-time {
                    font-size: 14px;
                    text-wrap: nowrap;
                  }
                  .lock-icon {
                    flex-shrink: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.stlms-accordion-faq {
  .stlms-accordion-item {
    border-bottom: 1px solid $gray;
    &:last-child {
      border-bottom: 0;
    }
  }
  .stlms-accordion-header {
    padding: 30px 30px 30px 0;
    font-size: 18px;
    color: $primary_dark;
    font-weight: 500;
    @include breakpoint(max, 767) {
      padding-top: 16px;
      padding-bottom: 16px;
      font-size: 16px;
    }
  }
  .stlms-quiz-content {
    padding: 0;
    width: 90%;
    margin: 0;
    @include breakpoint(max, 767) {
      width: 100%;
    }
  }
}

.stlms-similar-course {
  .stlms-similar-course-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    h3 {
      font-size: 20px;
      font-weight: 500;
      color: $black;
      margin: 0;
    }
  }
  .stlms-similar-course-slide {
    padding-top: 20px;
    padding-bottom: 10px;
    height: auto;
  }
}

.stlms-slider-arrows {
  display: flex;
  gap: 16px;
  .stlms-slider-arrow {
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $gray;
    color: $gray_light;
    @include transition(all 0.3s ease-in-out);
    &:hover {
      background-color: $primary_light;
      color: $white;
    }
  }
}
