/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f7f8fc;
} */

.tw-hidden {
  display: none;
}

.tw-text-24 {
  font-size: 24px;
}
.tw-text-20 {
  font-size: 20px;
}
.tw-text-18 {
  font-size: 18px;
}
.tw-text-16 {
  font-size: 16px;
}
.tw-text-14 {
  font-size: 14px;
}
.tw-text-12 {
  font-size: 12px;
}
.cursor-pointer {
  cursor: pointer;
}

.line-ellipsis {
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.one-line {
  -webkit-line-clamp: 1;
}
.two-line {
  -webkit-line-clamp: 2;
}
.three-line {
  -webkit-line-clamp: 3;
  * {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
  }
}

.teacher-name {
  p {
    margin: 0;
  }
}

#khoa-hoc-cua-toi {
  max-width: 1592px;
  margin: 0 auto;
  margin-top: 48px;
  margin-bottom: 8px;
  font-family: "Be Vietnam Pro";

  .title-khoa-hoc {
    color: #000000de;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
  }

  .left {
    position: sticky;
    top: 20px;
    z-index: 11;
    background: #f7f8fc;
    height: fit-content;
    .input-search {
      width: 100%;
      height: 36px;
      padding: 4px 16px;
      padding-right: 48px;
      border-radius: 20px;
      border: 1px solid #e5e5ea;
      background: #fff;
      &:focus {
        outline: none;
      }
    }

    .filter-list {
      border-radius: 20px;
      background: #fff;
      box-shadow: 0px 2px 30px 0px rgba(176, 192, 237, 0.2);
      padding: 24px;
    }

    .progress-report {
      border-radius: 20px;
      border-left: 3px solid #fcc493;
      background: #fff;
      box-shadow: 0px 2px 30px 0px rgba(176, 192, 237, 0.2);
      padding: 24px;

      .title-bao-cao {
        color: rgba(0, 0, 0, 0.87);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
      }
    }
  }

  .right {
    padding: 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 2px 30px 0px rgba(176, 192, 237, 0.2);
    overflow: auto;
    .sub-right {
      display: grid;
      gap: 48px 20px;
      grid-template-columns: 1fr 1fr 1fr;
      .sub-right-item {
        display: grid;
        grid-template-rows: subgrid;
        gap: 16px;
        grid-row: span 4;
        background: #fff;
        flex-direction: column;
        border-radius: 16px;
        border: 1px solid #e5e5ea;
        /* padding: 10px 16px 16px 16px; */
        overflow: hidden;
        cursor: pointer;

        > div {
          padding-left: 16px;
          padding-right: 16px;
        }

        .banner {
          height: 60px;
          position: relative;

          img {
            width: 192px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 16px;
          }
        }

        .grade-book {
          position: relative;
          margin-top: -16px;
          z-index: 10;
          display: flex;
          gap: 8px;
          padding-left: 16px;
          padding-right: 16px;
          .name-book {
            height: 16px;
            overflow-y: clip;
            display: block;
          }
          div {
            border-radius: 50px;
            border: 1px solid #fff;
            padding: 4px 8px;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
          }
        }

        .content-grade {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .expired {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
          margin-top: 16px;
          text-align: center;
          font-size: 16px;
          font-weight: 400;
          background: linear-gradient(
              0deg,
              rgba(255, 59, 48, 0.1) 0%,
              rgba(255, 59, 48, 0.1) 100%
            ),
            #fff;
        }

        .btn-hoc-ngay {
          min-width: 150px;
          height: 40px;
          padding: 0px 16px;
          border-radius: 4px;
          background: #ff6709e8;
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          border: none;
          &:hover {
            background: #ff6200;
          }
        }
      }
    }
  }

  .khoa-hoc-danh-cho-ban {
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    .sub-right {
      grid-template-columns: 1fr 1fr 1fr 1fr !important;
      gap: 48px !important;
    }
  }
}

@media screen and (max-width: 1699px) {
  #khoa-hoc-cua-toi {
    max-width: 1170px;
    .left {
      .progress-report,
      .filter-list {
        margin-top: 16px;
      }
    }

    .sub-right {
      gap: 32px !important;
      grid-template-columns: 1fr 1fr !important;
    }

    .khoa-hoc-danh-cho-ban {
      .sub-right {
        gap: 32px !important;
        grid-template-columns: 1fr 1fr 1fr !important;
      }
    }

    .gap-12 {
      gap: 32px !important;
    }

    .tw-text-24 {
      font-size: 20px !important;
    }
  }
}

@media screen and (max-width: 1279px) {
  #khoa-hoc-cua-toi {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    .left {
      top: 0;
      padding-top: 12px;
      padding-bottom: 12px;
      .input-search {
        border-radius: 4px;
      }
    }

    .khoa-hoc-danh-cho-ban {
      .sub-right {
        grid-template-columns: 1fr 1fr !important;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #khoa-hoc-cua-toi {
    .right {
      padding: 0;
      max-height: none;
      background: none;
      box-shadow: none;
    }
    .sub-right {
      grid-template-columns: auto !important;
      gap: 16px !important;
    }

    .khoa-hoc-danh-cho-ban {
      .sub-right {
        grid-template-columns: auto !important;
      }
    }

    .tw-text-24 {
      font-size: 16px !important;
    }
    .tw-text-16 {
      font-size: 14px !important;
    }
  }
}

/* Bộ lọc Mobile */
.mobile {
  .filter-mobile {
    cursor: pointer;
    background: #fff;
    border: 1px solid #0000001f;
    border-radius: 4px;
    height: 36px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;

    .text-filter {
      white-space: nowrap;
      font-size: 14px;
      font-weight: 400;
      color: #00000099;
    }
  }

  .active-filter-mobile {
    border: 1px solid #ff6609;
    .text-filter {
      color: #ff6609;
    }
    .icon-filter-mobile {
      filter: invert(46%) sepia(50%) saturate(3171%) hue-rotate(352deg)
        brightness(104%) contrast(109%);
    }
  }
}

.box-filter {
  background: #fff;
  padding: 16px;
  margin-top: 16px;
  border-radius: 16px;
  box-shadow: 0px 4px 31.2px 0px rgba(144, 144, 144, 0.37);

  .box-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: max(30vh, 320px);
    overflow: auto;
    .box-title {
      text-transform: capitalize;
      color: #000000de;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .mobile-filter-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      .mobile-filter-item {
        cursor: pointer;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        display: flex;
        min-height: 40px;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
        color: #000000de;
        font-size: 14px;
        font-weight: 400;
      }

      .mobile-active-item {
        border: 1px solid #ff6609;
        background: #fff0e7;
      }
    }
  }

  .box-footer {
    button {
      width: 100%;
      height: 40px;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 4px;
      border: 1px solid #ff6609;
    }

    .btn-uncheck {
      background: #fff;
      color: #ff6609;
    }
    .btn-apply {
      background: #ff6609;
    }
  }
}

/* Custom scroll bar */
/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff6609;
}

.selected_item-select {
  position: relative;
  max-height: 40px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #0000001f;
  background: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #00000099;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected_item-popup {
  max-height: max(40vh, 250px);
  overflow: auto;
  position: absolute;
  right: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-top: 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 2px 33px 0px rgba(176, 192, 237, 0.33);
  padding: 16px;
}
.selected_item-popup-item {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: -webkit-fill-available;
  input {
    margin-top: 0 !important;
    accent-color: #ff6709b8;
  }
  &:hover {
    background: var(--Primary-100, #fff0e7);
  }
}

.active-item {
  border: 1px solid #ff6609;
  background: #fff0e7;
}

.bg-sinh-hoc-gradient {
  background-image: linear-gradient(#86b380, #3ca031);
}
.bg-dhqg-hanoi-gradient {
  background-image: linear-gradient(#1e8a54, #008141);
}
.bg-dhqg-hcm-gradient {
  background-image: linear-gradient(#4b5180, #28306a);
}
.bg-dgtd-dhbk-gradient {
  background-image: linear-gradient(rgb(92, 96, 133), #23549d);
}
.bg-maths-gradient {
  background-image: linear-gradient(rgb(245, 145, 83), rgba(255, 102, 9, 1));
}

.bg-english-gradient {
  background-image: linear-gradient(rgb(72, 167, 226), rgba(3, 149, 238, 1));
}

.bg-vietnamese-gradient {
  background-image: linear-gradient(rgb(236, 185, 89), rgba(255, 168, 4, 1));
}

.bg-khtn-gradient {
  background-image: linear-gradient(rgb(151, 169, 214), rgba(117, 148, 226, 1));
}

.bg-physics-gradient {
  background-image: linear-gradient(rgb(134, 133, 224), rgba(94, 92, 230, 1));
}

.bg-chemistry-gradient {
  background-image: linear-gradient(rgb(240, 222, 149), rgba(255, 204, 0, 1));
}

.bg-dia-ly-gradient {
  background-image: linear-gradient(rgb(255, 59, 48), rgba(255, 59, 48, 1));
}