* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  outline: none;
}

/*.detail-text p {margin-bottom: 1rem !important;}*/
.p-lr {
  padding-left: 108px;
  padding-right: 108px;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

header {
  width: 100%;
  z-index: 10;
  position: relative;

  .top-header {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;

    .logo {
      gap: 18px;
      display: flex;
      align-items: center;

      img {
        min-width: 68px;
        width: 68px;
      }

      .logo-txt {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 4px;

        h1 {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #424242;
          text-transform: uppercase;
        }

        h2 {
          font-weight: 400;
          font-size: 24px;
          line-height: 28px;
          color: #424242;
          text-transform: uppercase;
        }
      }
    }

    .top-header-right {
      display: flex;
      align-items: center;
      gap: 24px;

      .header-search {
        display: flex;
        align-items: center;
        width: 200px;
        gap: 10px;
        border-bottom: 1px solid #424242;

        input {
          width: 100%;
          border: none;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #424242;

          &::placeholder {
            color: #424242;
          }
        }

        .searchBtn {
          width: 22px;
          height: 22px;
          min-width: 22px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .language {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;

        .current-lang {
          display: flex;
          align-items: center;
          gap: 4px;

          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #424242;
          }

          img {
            width: 22px;
            height: 22px;
            min-width: 22px;
            transition: 0.3s ease-in-out;
          }
        }

        .other-languages {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          position: absolute;
          z-index: 2;
          left: 0;
          top: 36px;
          padding: 8px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
          gap: 8px;
          transition: 0.3s ease-in-out;
          opacity: 0;
          visibility: hidden;

          .lang-item {
            font-size: 16px;
            line-height: 24px;
            color: #424242;
            font-weight: 400;
            width: 100%;

            &:first-child {
              padding-bottom: 8px;
              border-bottom: 1px solid #f2f2f2;
            }
          }
        }
      }

      .language.active {
        .current-lang {
          img {
            transform: rotate(180deg);
          }
        }

        .other-languages {
          top: 26px;
          opacity: 1;
          visibility: visible;
        }
      }
    }

    .hamburger {
      position: relative;
      display: none;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      width: 32px;
      height: 32px;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: 0.3s ease-in-out;
      }

      .hamburgerIcon {
        transform: scale(1);
      }

      .closeIcon {
        transform: scale(0);
      }
    }

    .hamburger.active {
      .hamburgerIcon {
        transform: scale(0);
      }

      .closeIcon {
        transform: scale(1);
      }
    }
  }

  nav {
    width: 100%;
    background: #fff;

    .navbar {
      max-width: 1400px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;

      .navbar-links {
        display: flex;
        align-items: center;
        gap: 30px;

        .link-menu {
          display: flex;
          flex-direction: column;
          align-items: start;
          padding: 30px 0;
          position: relative;

          .link {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #153540;
          }

          .sub-links {
            position: absolute;
            left: 0;
            top: 84px;
            z-index: 2;
            min-width: 200px;
            width: max-content;
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 20px;
            gap: 16px;
            background: #fff;
            box-shadow: 0px 0px 4px 0px rgba(53, 68, 98, 0.1);
            border-top: 1px solid #354462;
            border-radius: 0 0 4px 4px;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease-in-out;

            .sub-link {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #354462;
              transition: 0.3s ease-in-out;

              &:hover {
                color: #b69d74;
              }
            }
          }

          &:hover {
            .sub-links {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }

      .profile {
        padding: 14px;
        background: #b69d74;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        border-radius: 4px;
        transition: 0.3s ease-in-out;

        &:hover {
          background: #99835e;
        }
      }
    }
  }
}

.home-header {
  position: absolute;
  top: 0;
  left: 0;

  .top-header {
    .logo {
      .logo-txt {
        h1 {
          color: #fff;
        }

        h2 {
          color: #fff;
        }
      }
    }

    .top-header-right {
      .header-search {
        border-bottom: 1px solid #fff;

        input {
          color: #fff;
          background: transparent;

          &::placeholder {
            color: #fff;
          }
        }

        .searchBtn {
          img {
            filter: brightness(1000);
          }
        }
      }

      .language {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;

        .current-lang {
          span {
            color: #fff;
          }

          img {
            filter: brightness(1000);
          }
        }
      }
    }
  }
}

.mobile-menu-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100svh - 90.76px);
  overflow-y: auto;
  background: #fff;
  z-index: 12;
  padding: 20px 60px;
  display: none;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  transition: 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;

  .mobile-menu-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;

    .mobile-search {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 10px;
      border-bottom: 1px solid #424242;
      padding-bottom: 8px;

      input {
        width: 100%;
        border: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #424242;

        &::placeholder {
          color: #424242;
        }
      }

      .mobileSearchBtn {
        width: 20px;
        height: 20px;
        min-width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .language {
      display: flex;
      flex-direction: column;
      align-items: start;
      position: relative;

      .current-lang {
        display: flex;
        align-items: center;
        gap: 4px;

        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #424242;
        }

        img {
          width: 22px;
          height: 22px;
          min-width: 22px;
          transition: 0.3s ease-in-out;
        }
      }

      .other-languages {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 36px;
        padding: 8px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
        gap: 8px;
        transition: 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;

        .lang-item {
          font-size: 16px;
          line-height: 24px;
          color: #424242;
          font-weight: 400;
          width: 100%;

          &:first-child {
            padding-bottom: 8px;
            border-bottom: 1px solid #f2f2f2;
          }
        }
      }
    }

    .language.active {
      .current-lang {
        img {
          transform: rotate(180deg);
        }
      }

      .other-languages {
        top: 26px;
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .mobile-menu-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;

    .mobile-menu-link {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 12px;

      .link-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
        padding: 10px 0px;

        .link {
          font-weight: 500;
          font-size: 16px;
          line-height: 28px;
          color: #1e1e1e;
        }

        .mobileMenuArrow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          min-width: 24px;
          transition: 0.2s ease-in-out;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .mobile-sub-links {
        display: none;
        flex-direction: column;
        align-items: start;
        width: 100%;

        .sub-link {
          width: 100%;
          padding: 6px 0px;
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #161d29;
        }
      }
    }

    .mobile-menu-link.active {
      .link-head {
        .mobileMenuArrow {
          transform: rotate(90deg);
        }
      }

      .mobile-sub-links {
        display: flex;
      }
    }
  }

  .mobile-profile {
    width: 100%;
    text-align: center;
    padding: 12px;
    background: #b69d74;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    border-radius: 4px;
    transition: 0.3s ease-in-out;

    &:hover {
      background: #99835e;
    }
  }

  .mobile-socials {
    border-top: 1px solid #f2f2f2;
    padding-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;

    .social-item {
      min-width: 30px;
      width: 30px;
      height: 30px;
      border-radius: 100px;
      background: #5d6981;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 17px;
        max-height: 15px;
      }
    }
  }
}

.mobile-menu-container.showedMobileMenu {
  opacity: 1;
  visibility: visible;
}

.home-hero-section {
  width: 100%;
  position: relative;
  z-index: 2;

  .home-hero-swiper {
    width: 100%;

    .hero-item {
      width: 100%;
      height: 830px;
      position: relative;

      .gradient {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(53, 68, 98, 0.8);
        z-index: 2;
      }

      .item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .item-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        max-width: 750px;
        padding: 0 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;

        .item-title {
          font-weight: 500;
          font-size: 40px;
          line-height: 60px;
          text-align: center;
          color: #fff;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          overflow: hidden;
          max-height: 240px;
          -webkit-box-orient: vertical;
        }

        .item-link {
          width: 300px;
          text-align: center;
          padding: 16px;
          background: #b69d74;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          border-radius: 4px;
          transition: 0.3s ease-in-out;

          &:hover {
            background: #99835e;
          }
        }
      }
    }

    .swiper-pagination {
      width: max-content;
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: center;
      left: 50%;
      transform: translateX(-50%);
      bottom: 42px;

      .swiper-pagination-bullet {
        margin: 0;
        width: 8px;
        height: 8px;
        min-width: 8px;
        border-radius: 100px;
        opacity: 1;
        transition: 0.3s ease-in-out;
        background: rgba(179, 179, 179, 0.4);
      }

      .swiper-pagination-bullet-active {
        width: 24px;
        min-width: 24px;
        background: #fff;
      }
    }

    .swiper-button-next,
    .swiper-button-prev {
      width: 70px;
      height: 70px;
      min-width: 70px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.42);
      color: #fff;
      --swiper-navigation-size: 26px;
    }

    .swiper-button-prev {
      left: 24px;
    }

    .swiper-button-next {
      right: 24px;
    }
  }
}

.home-apple-container {
  max-width: 1440px;
  width: 100%;
  margin: -110px auto 0;
  position: relative;
  z-index: 2;

  .section-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    color: #161d29;
    display: none;
  }

  .apply-boxes {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 24px;

    .apply-box {
      max-width: 600px;
      width: 100%;
      padding: 32px 16px;
      border-radius: 4px;
      background: #fff;
      border: 1px solid #f2f2f2;
      box-shadow: 0px 2px 19.3px 0px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      align-items: start;

      .box-title {
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #161d29;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 60px;
        -webkit-box-orient: vertical;
      }

      .short-description {
        margin-top: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        height: 72px;
        -webkit-box-orient: vertical;
        color: #939393;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #939393;
        }
      }

      .apply-link {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        margin-top: 36px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #354462;

        img {
          min-width: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }

    .apply-box.hidden {
      display: none;
    }
  }
}

.home-news-container {
  width: 100%;
  max-width: 1440px;
  margin: 156px auto 0;

  .section-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    color: #161d29;
  }

  .short-desc {
    margin: 10px auto 0;
    max-width: 770px;
    width: 100%;

    p {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #939393;
      text-align: center;
    }
  }

  .more-link {
    width: max-content;
    margin-left: auto;
    margin-top: 24px;
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #354462;
  }

  .home-news-cards {
    margin-top: 24px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    .news-card {
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 19.3px 0px rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: start;
      padding: 24px 16px;
      gap: 24px;
      transition: 0.3s ease-in-out;

      .card-image {
        width: 100%;
        height: 240px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }
      }

      .card-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        .card-title {
          font-weight: 500;
          font-size: 18px;
          line-height: 26px;
          color: #161d29;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 52px;
        }

        p {
          margin-top: 6px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #a5a5a5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 48px;
        }

        span {
          margin-top: 16px;
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          color: #303e59;
        }
      }

      &:hover {
        box-shadow: 0px 2px 24.1px 0px rgba(0, 0, 0, 0.04);
      }
    }
  }

  .mobile-more-link {
    margin-top: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #354462;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    transition: 0.3s ease-in-out;

    svg {
      width: 24px;
      height: 24px;
      min-width: 24px;
    }

    &:hover {
      background: #263046;
    }
  }
}

.home-events-container {
  max-width: 1440px;
  width: 100%;
  margin: 72px auto 0;

  .home-events-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: start;
    border-bottom: 1px solid #f5f5f5;
    gap: 24px;

    .home-event-tab {
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;
      color: #787878;
      padding: 8px 12px;
      border-bottom: 2px solid transparent;
      transition: 0.3s ease-in-out;
    }

    .home-event-tab.active {
      color: #354462;
      border-color: #354462;
    }
  }

  .home-events-cards {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: start;

    .event-cards-list {
      width: 100%;
      display: none;
      flex-direction: column;
      align-items: start;
      gap: 16px;

      .home-event-card {
        width: 100%;
        display: flex;
        align-items: start;
        gap: 24px;

        .card-image {
          min-width: 184px;
          width: 184px;
          height: 192px;
          border-radius: 4px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
          }
        }

        .card-body {
          width: calc(100% - 208px);
          display: flex;
          flex-direction: column;
          align-items: start;
          border: 1px solid #ebf2f5;
          border-radius: 4px;
          padding: 24px;

          .card-date {
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #ebf2f5;
            border-radius: 100px;
            padding: 8px 16px;

            .date-item {
              display: flex;
              align-items: center;
              gap: 8px;
              padding-right: 16px;
              border-right: 1px solid #e8e8e8;

              .icon {
                min-width: 20px;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              p {
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                color: #787878;
              }

              &:last-child {
                padding-right: 0;
                border-right: none;
              }
            }
          }

          .card-title {
            margin-top: 16px;
            font-weight: 500;
            font-size: 18px;
            line-height: 28px;
            color: #000;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            overflow: hidden;
            -webkit-box-orient: vertical;
            height: 28px;
          }

          .card-description {
            width: 100%;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            overflow: hidden;
            -webkit-box-orient: vertical;
            height: 18px;

            p {
              font-weight: 400;
              font-size: 14px;
              line-height: 18px;
              color: #939393;
            }
          }

          .card-location {
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 4px;

            .icon {
              min-width: 16px;
              width: 16px;
              height: 16px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            p {
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              color: #939393;
            }
          }
        }
      }
    }

    .event-cards-list.showed {
      display: flex;
    }
  }
}

.home-media-container {
  max-width: 1440px;
  width: 100%;
  margin: 72px auto 0;

  .section-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    color: #161d29;
  }

  .home-media-tabs {
    margin: 24px auto 0;
    max-width: 800px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 12px;
    gap: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;

    .home-media-tab {
      width: 100%;
      padding: 10px;
      background: #fff;
      border-radius: 4px;
      font-weight: 500;
      font-size: 18px;
      line-height: 28px;
      color: #1d2536;
      transition: 0.3s ease-in-out;

      &:hover {
        background: #354462;
        color: #fff;
      }
    }

    .home-media-tab.active {
      background: #354462;
      color: #fff;

      &:hover {
        background: #263046;
      }
    }
  }

  .more-link {
    width: max-content;
    margin-left: auto;
    margin-top: 18px;
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #354462;
  }

  .home-media-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;

    .media-cards-list {
      width: 100%;
      display: none;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .home-media-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        padding: 20px 16px;
        border: 1px solid #ebf2f5;
        background: rgba(235, 242, 245, 0.5);
        border-radius: 8px;

        .card-image {
          width: 100%;
          height: 192px;
          border-radius: 4px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            object-fit: cover;
          }

          .playCover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            object-fit: contain;
          }
        }

        .card-body {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;

          .card-title {
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: #000;
            display: -webkit-box;
            overflow: hidden;
            height: 30px;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .card-description {
            display: -webkit-box;
            overflow: hidden;
            height: 48px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-top: 8px;

            p {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #939393;
            }
          }

          .count {
            margin-top: 28px;
            display: flex;
            align-items: center;
            gap: 8px;

            .icon {
              width: 20px;
              height: 20px;
              min-width: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 100%;
                height: 100%;
              }
            }

            p {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #787878;
            }
          }
        }
      }
    }

    .media-cards-list.showed {
      display: grid;
    }
  }

  .mobile-more-link {
    margin-top: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #354462;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    transition: 0.3s ease-in-out;

    svg {
      width: 24px;
      height: 24px;
      min-width: 24px;
    }

    &:hover {
      background: #263046;
    }
  }
}

.home-contact-container {
  max-width: 1440px;
  width: 100%;
  margin: 72px auto 0;

  .section-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    color: #161d29;
  }

  .contact-form {
    width: 100%;
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid rgba(92, 92, 92, 0.05);
    box-shadow: 0px 4px 8.6px 0px rgba(132, 132, 132, 0.05);
    padding: 46px 80px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    border-radius: 8px;

    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .form-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;

      input,
      textarea {
        width: 100%;
        background: #fbfbfb;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
        padding: 16px;
        border-radius: 4px;
        color: #000;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        &::placeholder {
          color: #939393;
        }
      }

      textarea {
        resize: none;
        height: 150px;
      }
    }

    .submit-form {
      max-width: 440px;
      width: 100%;
      text-align: center;
      padding: 16px;
      margin: 0 auto;
      background: #354462;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #fff;
      border-radius: 4px;
      transition: 0.3s ease-in-out;

      &:hover {
        background: #263046;
      }
    }
  }
}

footer {
  width: 100%;
  margin-top: 72px;
  background: #354462;
  padding: 30px 0;

  .footer-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px;

    .logo {
      display: none;
      gap: 18px;
      display: flex;
      align-items: center;

      img {
        min-width: 68px;
        width: 68px;
      }

      .logo-txt {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 4px;

        h2 {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          text-transform: uppercase;
        }

        h3 {
          font-weight: 400;
          font-size: 24px;
          line-height: 28px;
          color: #fff;
          text-transform: uppercase;
        }
      }
    }

    .footer-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 20px;

      .footer-links {
        display: flex;
        align-items: center;
        max-width: 910px;
        width: 100%;
        justify-content: space-between;
        gap: 20px;

        .footer-link {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
        }
      }

      .footer-socials {
        display: flex;
        align-items: center;
        gap: 8px;

        .social-item {
          min-width: 30px;
          width: 30px;
          height: 30px;
          border-radius: 100px;
          background: #5d6981;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            max-width: 17px;
            max-height: 15px;
          }
        }
      }
    }

    .footer-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #fff;
      padding-top: 10px;

      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        color: #fff;
      }
    }
  }
}

.breadcrumb {
  width: 100%;
  background: #ebecef;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .breadcrumb-container {
    max-width: 1440px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 8px;

      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #787878;
      }

      img {
        min-width: 16px;
        width: 16px;
        height: 16px;
      }
    }

    .currentPage {
      p {
        color: #354462;
        font-weight: 500;
      }
    }
  }
}

.about-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .about-text {
    margin-top: 24px;
    width: 100%;

    p {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }
}

.leadership-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .leadership {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px;

    .leadership-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;

      .leadership-title {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        font-weight: 400;
        font-size: 18px;
        line-height: 30px;
        color: #424242;
        text-wrap: nowrap;

        span {
          width: 100%;
          background: #f2f2f2;
          height: 1px;
        }
      }

      .leaders {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        .leader-card {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;

          .card-image {
            width: 100%;
            height: 250px;
            border-radius: 4px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 4px;
            }
          }

          .card-body {
            display: flex;
            flex-direction: column;
            align-items: start;
            width: 100%;
            gap: 16px;

            .leader-name {
              font-weight: 500;
              font-size: 24px;
              line-height: 28px;
              color: #354462;
            }

            .short-desc {
              width: 100%;

              p {
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: #787878;
              }
            }
          }
        }
      }
    }
  }
}

.leadership-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;
  display: flex;
  align-items: start;
  gap: 24px;

  .leader-image {
    min-width: 392px;
    width: 392px;
    border-radius: 4px;

    img {
      width: 100%;
      height: auto;
      border-radius: 4px;
    }
  }

  .detail-content {
    width: calc(100% - 416px);

    .leader-name {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #161d29;
    }

    .detail-text {
      width: 100%;
      margin-top: 12px;

      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #787878;
      }
    }
  }
}

.academy-structure-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .structure-text {
    width: 100%;
    margin-top: 24px;

    p {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }
  }

  .structure-items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;
    gap: 24px;

    .structure-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      padding: 26px 24px;
      border-radius: 4px;
      background: #354462;

      .structure-title {
        font-weight: 600;
        font-size: 26px;
        line-height: 40px;
        text-transform: uppercase;
        color: #fff;
      }

      .short-desc {
        margin: 12px 0 24px;
        width: 100%;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #fff;
        }
      }

      .detail-link {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        border: 1px solid #fff;
        border-radius: 4px;
        padding: 16px 36px;
        transition: 0.3s ease-in-out;

        p {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          transition: 0.3s ease-in-out;
        }

        img {
          min-width: 24px;
          width: 24px;
          height: 24px;
          transition: 0.3s ease-in-out;
          filter: brightness(1000);
        }

        &:hover {
          background: #fff;

          p {
            color: #354462;
          }

          img {
            filter: brightness(0);
          }
        }
      }
    }
  }
}

.structure-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .detail-text {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }
}

.regulatory-framework-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .regulatory-frameworks {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;
    gap: 16px;

    .file-item {
      display: flex;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      box-shadow: 0px 0px 7.6px 0px rgba(187, 187, 187, 0.05);
      padding: 10px 12px;
      gap: 8px;

      .pdf-icon {
        min-width: 48px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .file-main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        .file-title {
          font-weight: 500;
          font-size: 16px;
          line-height: 28px;
          color: #333333;
        }

        .file-weight {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #5e6065;
        }
      }

      .direction-item {
        min-width: 28px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.news-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .all-news {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;

    .news-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px;
      background: #fafafa;
      border-radius: 4px;

      .item-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        .news-title {
          font-weight: 500;
          font-size: 16px;
          line-height: 28px;
          color: #354462;
        }

        .short-description {
          margin-top: 4px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          -webkit-box-orient: vertical;
          height: 40px;

          p {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #787878;
          }
        }

        .news-time {
          margin-top: 8px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #354462;
        }
      }

      .detail-link {
        padding: 12px 24px;
        border: 1px solid #354462;
        border-radius: 4px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #354462;
        background: #fafafa;
        text-wrap: nowrap;
        transition: 0.3s ease-in-out;

        &:hover {
          background: #354462;
          color: #fff;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.announcement-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .all-announcements {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;

    .announcement-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px;
      background: #fafafa;
      border-radius: 4px;

      .item-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        .announcement-title {
          font-weight: 500;
          font-size: 16px;
          line-height: 28px;
          color: #354462;
        }

        .short-description {
          margin-top: 4px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          -webkit-box-orient: vertical;
          height: 40px;

          p {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #787878;
          }
        }

        .announcement-time {
          margin-top: 8px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #354462;
        }
      }

      .detail-link {
        padding: 12px 24px;
        border: 1px solid #354462;
        border-radius: 4px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #354462;
        background: #fafafa;
        text-wrap: nowrap;
        transition: 0.3s ease-in-out;

        &:hover {
          background: #354462;
          color: #fff;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.news-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .detail-text {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .news-time {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #787878;
  }

  .shared {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;

    h3 {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #263046;
    }

    .shared-links {
      display: flex;
      align-items: center;
      gap: 14px;

      .social-item {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }
      }

      .shared-Btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        position: relative;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }

        .copiedTxt {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: #000;
          color: #fff;
          top: -30px;
          text-wrap: nowrap;
          padding: 3px 5px;
          font-size: 14px;
          line-height: 18px;
          border-radius: 6px;
          display: none;
        }
      }
    }
  }

  .news-detail-images {
    width: 100%;
    margin: 30px auto 0;
    max-width: 750px;

    .detail-mainImage-slide {
      width: 100%;
      height: 450px;
      border-radius: 4px;

      .detail-image {
        width: 100%;
        height: 100%;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);

        &::after {
          color: #263046;
          --swiper-navigation-size: 18px;
        }
      }
    }

    .detail-thumbImage-slide {
      margin-top: 24px;
      width: 100%;

      .detail-image {
        width: 150px;
        height: 100px;
        border-radius: 4px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
          opacity: 0.4;
          transition: 0.3s ease-in-out;
        }
      }

      .swiper-slide-thumb-active {
        img {
          opacity: 1;
        }
      }
    }

  }
}

.announcement-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .detail-text {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .announcement-time {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #787878;
  }

  .shared {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;

    h3 {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #263046;
    }

    .shared-links {
      display: flex;
      align-items: center;
      gap: 14px;

      .social-item {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }
      }

      .shared-Btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        position: relative;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }

        .copiedTxt {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: #000;
          color: #fff;
          top: -30px;
          text-wrap: nowrap;
          padding: 3px 5px;
          font-size: 14px;
          line-height: 18px;
          border-radius: 6px;
          display: none;
        }
      }
    }
  }

  /* ← Bu } .shared-i bağlayır - ƏLAVƏ EDİN! */
}

/* ← Bu } .announcement-detail-container-i bağlayır */
.announcement-detail-images {
  width: 100%;
  margin: 30px auto 0;
  max-width: 750px;

  .detail-mainImage-slide {
    width: 100%;
    height: 450px;
    border-radius: 4px;

    .detail-image {
      width: 100%;
      height: 100%;
      border-radius: 4px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);

      &::after {
        color: #263046;
        --swiper-navigation-size: 18px;
      }
    }
  }

  .detail-thumbImage-slide {
    margin-top: 24px;
    width: 100%;

    .detail-image {
      width: 150px;
      height: 100px;
      border-radius: 4px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
        opacity: 0.4;
        transition: 0.3s ease-in-out;
      }
    }

    .swiper-slide-thumb-active {
      img {
        opacity: 1;
      }
    }
  }

}


.videos-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }
}

.all-videos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;

  .video-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    padding: 20px 16px;
    border: 1px solid #ebf2f5;
    background: rgba(235, 242, 245, 0.5);
    border-radius: 8px;

    .card-image {
      width: 100%;
      height: 192px;
      border-radius: 4px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
      }

      .playCover {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        object-fit: contain;
      }
    }

    .card-body {
      display: flex;
      flex-direction: column;
      align-items: start;
      width: 100%;

      .card-title {
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #000;
        display: -webkit-box;
        overflow: hidden;
        height: 30px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .card-description {
        display: -webkit-box;
        overflow: hidden;
        height: 48px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 8px;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #939393;
        }
      }

      .shared {
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;

        h3 {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #263046;
        }

        .shared-links {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;

          .social-item {
            min-width: 30px;
            width: 30px;
            height: 30px;
            border-radius: 100px;
            background: #5d6981;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              max-width: 17px;
              max-height: 15px;
            }
          }

          .shared-Btn {
            min-width: 30px;
            width: 30px;
            height: 30px;
            border-radius: 100px;
            background: #5d6981;
            position: relative;
            border: none;
            outline: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              max-width: 17px;
              max-height: 15px;
            }

            .copiedTxt {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              background: #000;
              color: #fff;
              top: -30px;
              text-wrap: nowrap;
              padding: 3px 5px;
              font-size: 14px;
              line-height: 18px;
              border-radius: 6px;
              display: none;
            }
          }

          /* ← .shared-Btn bağlanır */
        }

        /* ← .shared-links bağlanır */
      }

      /* ← .shared bağlanır - BU ƏLAVƏ EDİLDİ! */
    }

    /* ← .card-body bağlanır */
  }

  /* ← .video-card bağlanır */
}

/* ← .all-videos bağlanır */
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  gap: 10px;

  .pagination-direction {
    border: 1px solid #c0c5ce;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;

    img {
      width: 20px;
      height: 20px;
      min-width: 20px;
    }
  }

  .pagination-items {
    display: flex;
    align-items: center;
    gap: 10px;

    .pagination-item {
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;
      transition: 0.3s ease-in-out;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: #354462;
    }

    .pagination-item.active {
      background: #354462;
      color: #fff;
    }
  }
}


.events-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .all-events {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;

    .event-item {
      width: 100%;
      display: flex;
      align-items: start;
      gap: 24px;

      .item-body {
        width: 100%;
        display: flex;
        align-items: start;
        gap: 24px;

        .event-time {
          padding-top: 20px;
          min-width: 90px;
          width: auto;
          font-weight: 600;
          font-size: 20px;
          line-height: 26px;
          text-align: center;
          color: #354462;
        }

        .body-main {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          padding-bottom: 30px;
          border-bottom: 1px solid #f2f2f2;

          .event-title {
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: #354462;
            height: 60px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .short-description {
            margin-top: 5px;
            height: 80px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;

            p {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #787878;
            }
          }

          .detail-link {
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #354462;

            img {
              min-width: 24px;
              width: 24px;
              height: 24px;
            }
          }
        }
      }

      .item-image {
        min-width: 400px;
        width: 400px;
        height: 230px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.event-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .detail-text {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .event-time {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #787878;
  }

  .shared {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;

    h3 {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #263046;
    }

    .shared-links {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .social-item {
      min-width: 30px;
      width: 30px;
      height: 30px;
      border-radius: 100px;
      background: #5d6981;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 17px;
        max-height: 15px;
      }
    }

    .shared-Btn {
      min-width: 30px;
      width: 30px;
      height: 30px;
      border-radius: 100px;
      background: #5d6981;
      position: relative;
      border: none;
      outline: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 17px;
        max-height: 15px;
      }

      .copiedTxt {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #000;
        color: #fff;
        top: -30px;
        text-wrap: nowrap;
        padding: 3px 5px;
        font-size: 14px;
        line-height: 18px;
        border-radius: 6px;
        display: none;
      }
    }
  }
}

.event-detail-images {
  width: 100%;
  margin: 30px auto 0;
  max-width: 750px;

  .detail-mainImage-slide {
    width: 100%;
    height: 450px;
    border-radius: 4px;

    .detail-image {
      width: 100%;
      height: 100%;
      border-radius: 4px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);

      &::after {
        color: #263046;
        --swiper-navigation-size: 18px;
      }
    }
  }

  .detail-thumbImage-slide {
    margin-top: 24px;
    width: 100%;

    .detail-image {
      width: 150px;
      height: 100px;
      border-radius: 4px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
        opacity: 0.4;
        transition: 0.3s ease-in-out;
      }
    }

    .swiper-slide-thumb-active {
      img {
        opacity: 1;
      }
    }
  }
}


.conferences-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .all-conferences {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;

    .conference-item {
      width: 100%;
      display: flex;
      align-items: start;
      gap: 24px;

      .item-body {
        width: 100%;
        display: flex;
        align-items: start;
        gap: 24px;

        .conference-time {
          padding-top: 20px;
          min-width: 90px;
          width: auto;
          font-weight: 600;
          font-size: 20px;
          line-height: 26px;
          text-align: center;
          color: #354462;
        }

        .body-main {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          padding-bottom: 30px;
          border-bottom: 1px solid #f2f2f2;

          .conference-title {
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: #354462;
            height: 60px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .short-description {
            margin-top: 5px;
            height: 80px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;

            p {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #787878;
            }
          }

          .detail-link {
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #354462;

            img {
              min-width: 24px;
              width: 24px;
              height: 24px;
            }
          }
        }
      }

      .item-image {
        min-width: 400px;
        width: 400px;
        height: 230px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.conference-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .detail-text {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .conference-time {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #787878;
  }

  .shared {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;

    h3 {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #263046;
    }

    .shared-links {
      display: flex;
      align-items: center;
      gap: 14px;

      .social-item {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }
      }

      .shared-Btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border-radius: 100px;
        background: #5d6981;
        position: relative;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          max-width: 17px;
          max-height: 15px;
        }

        .copiedTxt {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: #000;
          color: #fff;
          top: -30px;
          text-wrap: nowrap;
          padding: 3px 5px;
          font-size: 14px;
          line-height: 18px;
          border-radius: 6px;
          display: none;
        }
      }
    }
  }

  .conference-detail-images {
    width: 100%;
    margin: 30px auto 0;
    max-width: 750px;

    .detail-mainImage-slide {
      width: 100%;
      height: 450px;
      border-radius: 4px;

      .detail-image {
        width: 100%;
        height: 100%;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);

        &::after {
          color: #263046;
          --swiper-navigation-size: 18px;
        }
      }
    }

    .detail-thumbImage-slide {
      margin-top: 24px;
      width: 100%;

      .detail-image {
        width: 150px;
        height: 100px;
        border-radius: 4px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
          opacity: 0.4;
          transition: 0.3s ease-in-out;
        }
      }

      .swiper-slide-thumb-active {
        img {
          opacity: 1;
        }
      }
    }
  }
}

.articles-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .all-articles {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;

    .article-item {
      width: 100%;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      padding: 24px;

      .artice-type {
        width: max-content;
        padding: 10px 16px;
        background: #b69d74;
        border-radius: 100px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #fff;
      }

      .artice-name {
        margin-top: 20px;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #161d29;
      }

      .short-description {
        margin-top: 8px;
        width: 100%;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #555555;
        }
      }

      .article-owner {
        margin-top: 12px;
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        color: #354462;
      }

      .article-bottom {
        margin-top: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        .article-time {
          display: flex;
          align-items: center;
          gap: 4px;

          img {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }

          p {
            font-weight: 400;
            font-size: 18px;
            line-height: 28px;
            color: #787878;
          }
        }

        .article-download {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          border-radius: 4px;
          border: 1px solid #354462;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #354462;
          transition: 0.3s ease-in-out;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
            transition: 0.3s ease-in-out;
          }

          &:hover {
            background: #354462;
            color: #fff;

            img {
              filter: brightness(1000);
            }
          }
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.contactInfo-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .contactInfo-description {
    margin-top: 24px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #939393;
    }

    ul {
      padding-left: 18px;
    }
  }

  .contactInfo-boxes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
    gap: 24px;

    .contactInfo-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      background: #ebecef;
      border: 1px solid #ebecef;
      border-radius: 4px;
      padding: 24px;

      .contactInfo-link {
        display: flex;
        align-items: center;
        gap: 2px;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: #161d29;
        text-align: center;

        img {
          width: 28px;
          height: 28px;
          min-width: 28px;
        }
      }

      p {
        max-width: 290px;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        color: #6d6d6d;
      }
    }
  }

  .map {
    margin-top: 40px;
    width: 100%;
    border-radius: 4px;
    height: 540px;

    iframe {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
}

.writeUs-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .writeUs-description {
    margin-top: 24px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #939393;
    }

    ul {
      padding-left: 18px;
    }
  }

  .contact-form {
    width: 100%;
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid rgba(92, 92, 92, 0.05);
    box-shadow: 0px 4px 8.6px 0px rgba(132, 132, 132, 0.05);
    padding: 46px 80px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    border-radius: 8px;

    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .form-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;

      input,
      textarea {
        width: 100%;
        background: #fbfbfb;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
        padding: 16px;
        border-radius: 4px;
        color: #000;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        &::placeholder {
          color: #939393;
        }
      }

      textarea {
        resize: none;
        height: 150px;
      }
    }

    .submit-form {
      max-width: 440px;
      width: 100%;
      text-align: center;
      padding: 16px;
      margin: 0 auto;
      background: #354462;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #fff;
      border-radius: 4px;
      transition: 0.3s ease-in-out;

      &:hover {
        background: #263046;
      }
    }
  }
}

.faq-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .faq-main {
    width: 100%;
    margin-top: 24px;
    display: flex;
    align-items: start;
    gap: 24px;

    .faq-description {
      width: 100%;
      max-width: 392px;

      p,
      li {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #939393;
      }

      ul {
        padding-left: 18px;
      }
    }

    .faq-items {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 16px;

      .faq-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;

        .faq-head {
          width: 100%;
          background: #ebecef;
          padding: 16px;
          border-radius: 4px;
          display: flex;
          gap: 12px;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          p {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #002428;
            text-align: start;
          }

          img {
            width: 20px;
            min-width: 20px;
            height: 20px;
            transition: 0.3s ease-in-out;
          }
        }

        .faq-body {
          padding: 0 16px;
          height: 0;
          overflow: hidden;
          width: 100%;
          transition: 0.3s ease-in-out;

          p,
          li {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #424242;
          }

          ul {
            padding-left: 18px;
          }
        }
      }

      .faq-item.active {
        .faq-head {
          img {
            transform: rotate(180deg);
          }
        }

        .faq-body {
          padding: 8px 16px 0;
        }
      }
    }
  }
}

.training-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .training-description {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #939393;
    }

    ul {
      padding-left: 18px;
    }
  }

  .upcoming-training-programs {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;

    .section-title {
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #354462;
    }

    .programs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      gap: 24px;
      margin-top: 24px;

      .program-item {
        width: 100%;
        padding: 24px;
        border: 1px solid #d5d5d5;
        background: #fff;
        transition: 0.3s ease-in-out;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: start;

        .time-range {
          display: block;
          width: 100%;

          p {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #5d6981;
          }
        }

        .program-name {
          margin-top: 4px;
          font-weight: 600;
          font-size: 16px;
          line-height: 28px;
          color: #303e59;
        }

        .program-duration {
          margin-top: 16px;
          font-weight: 400;
          font-size: 12px;
          line-height: 18px;
          color: #787878;
        }

        &:hover {
          border-color: #f2f2f2;
          background: #e8e8e8;
        }
      }
    }
  }

  .trainings {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;

    .training-card {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border: 1px solid #f2f2f2;
      padding: 24px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: start;
      transition: 0.3s ease-in-out;

      .card-image {
        width: 100%;
        height: 180px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }
      }

      .card-body {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: start;

        .card-title {
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
          color: #161d29;
          display: -webkit-box;
          overflow: hidden;
          height: 60px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .card-subTitle {
          margin-top: 8px;
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #354462;
          display: -webkit-box;
          overflow: hidden;
          height: 56px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .short-description {
          display: -webkit-box;
          overflow: hidden;
          height: 48px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: 20px;

          p {
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;
            color: #939393;
          }
        }

        .card-info-tags {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          gap: 8px 16px;
          margin-top: 16px;
          padding-top: 8px;
          border-top: 1px solid #f2f2f2;

          .tag-item {
            display: flex;
            align-items: center;
            gap: 4px;

            img {
              width: 16px;
              height: 16px;
              min-width: 16px;
            }

            p {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #555555;
            }
          }
        }

        .trainingInfoBtn {
          margin-top: 24px;

          width: 100%;
          padding: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          border: 1px solid #354462;
          background: transparent;
          border-radius: 4px;
          color: #354462;
          transition: 0.3s ease-in-out;

          img {
            min-width: 24px;
            width: 24px;
            height: 24px;
            transition: 0.3s ease-in-out;
          }

          &:hover {
            background: #354462;
            color: #fff;

            img {
              filter: brightness(1000);
            }
          }
        }
      }

      &:hover {
        background: rgba(232, 232, 232, 0.4);
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.training-detail-modal {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  backdrop-filter: blur(2px);
  background: rgba(22, 29, 41, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  transform: scale(0);
  transition: 0.3s ease-in-out;

  .training-detail {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    border: 1px solid #f2f2f2;
    background: #ffffff;
    border-radius: 6px;
    padding: 40px 32px;
    position: relative;
    max-height: calc(100svh - 40px);
    overflow-y: auto;

    .close-training-modal {
      width: 24px;
      height: 24px;
      min-width: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 18px;
      right: 18px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .training-title {
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #161d29;
    }

    .training-subTitle {
      margin-top: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #354462;
    }

    .training-detail-main {
      width: 100%;
      display: flex;
      align-items: start;
      gap: 24px;
      margin-top: 16px;

      .training-detail-image {
        max-width: 472px;
        height: 248px;
        width: 100%;
        border-radius: 6px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
        }
      }

      .training-detail-time {
        max-width: 240px;
        height: 248px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        padding: 16px;
        background: #ebecef;
        border-radius: 6px;

        .time-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 8px;

          p {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #5d6981;
          }

          span {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #263046;
          }
        }
      }
    }

    .info-tags {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 16px;

      .tag-item {
        display: flex;
        align-items: center;
        gap: 4px;

        img {
          min-width: 16px;
          width: 16px;
          height: 16px;
        }

        p {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #555555;
        }
      }
    }

    .training-detail-description {
      margin-top: 16px;

      ul {
        padding-left: 18px;
      }

      p,
      li {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #939393;
      }
    }
  }
}

.training-detail-modal.showModal {
  visibility: visible;
  transform: scale(1);
}

.electron-learn-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .platform-search {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;

    input {
      width: 100%;
      border: 1px solid #ebecef;
      padding: 12px 16px;
      border-radius: 4px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #263046;

      &::placeholder {
        color: #939393;
      }
    }

    .searchProgramBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 184px;
      width: 184px;
      padding: 12px 16px;
      background: #354462;
      border-radius: 4px;
      font-weight: 500;
      font-size: 16px;
      line-height: 26px;
      gap: 8px;
      color: #ffffff;

      img {
        min-width: 20px;
        width: 20px;
        height: 20px;
        filter: brightness(1000);
      }
    }
  }

  .learn-courses {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
    gap: 24px;

    .course-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;
      padding: 20px 16px;
      border: 1px solid #ebf2f5;
      background: rgba(235, 242, 245, 0.5);
      border-radius: 8px;

      .card-image {
        width: 100%;
        height: 192px;
        border-radius: 4px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }

        .playCover {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60px;
          height: 60px;
          object-fit: contain;
        }
      }

      .card-body {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;

        .card-title {
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
          color: #000;
          display: -webkit-box;
          overflow: hidden;
          height: 30px;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .card-description {
          display: -webkit-box;
          overflow: hidden;
          height: 48px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: 8px;

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #939393;
          }
        }

        .count {
          margin-top: 28px;
          display: flex;
          align-items: center;
          gap: 8px;

          .icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #787878;
          }
        }
      }
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    gap: 10px;

    .pagination-direction {
      border: 1px solid #c0c5ce;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      min-width: 40px;

      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }

    .pagination-items {
      display: flex;
      align-items: center;
      gap: 10px;

      .pagination-item {
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #354462;
      }

      .pagination-item.active {
        background: #354462;
        color: #fff;
      }
    }
  }
}

.course-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .course-detail {
    width: 100%;
    display: flex;
    align-items: start;
    margin-top: 24px;
    gap: 24px;

    .chapter-list {
      min-width: 392px;
      width: 392px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 16px;
      background: #ffffff;
      border: 1px solid #f5f5f5;
      border-radius: 4px;

      .chapter-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0px;
        width: 100%;
        transition: 0.3s ease-in-out;

        .chapter-header {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          gap: 8px;
          background: #ebecef;
          border-radius: 4px;
          padding: 12px;

          .chapter-title {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 6px;
            width: 100%;
            font-weight: 500;
            font-size: 18px;
            line-height: 26px;
            color: #424242;
            text-align: start;

            img {
              margin-top: 6px;
              width: 24px;
              height: 24px;
              min-width: 24px;
              transition: 0.3s ease-in-out;
            }
          }

          .lessons-count {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #5b5b5b;
          }
        }

        .lessons {
          height: 0;
          overflow: hidden;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: start;
          transition: 0.3s ease-in-out;

          .lessons_item {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 12px;
            padding: 10px;

            .checkbox_icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 16px;
              height: 16px;
              min-width: 16px;
              background: #fff;
              position: relative;
              border: 2px solid #999999;
              border-radius: 4px;
              background: #fff;
              transition: 0.3s ease-in-out;
              cursor: pointer;

              input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0;
                cursor: pointer;
              }

              img {
                width: 8px;
              }
            }

            .checkbox_text {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #555555;
            }
          }

          .lessons_item.checked {
            .checkbox_icon {
              border-color: #354462;
              background: #354462;
            }
          }
        }
      }

      .chapter-item.active {
        gap: 8px;

        .chapter-header {
          .chapter-title {
            img {
              transform: rotate(180deg);
            }
          }
        }
      }
    }

    .course-detail-main {
      width: calc(100% - 416px);
      display: flex;
      flex-direction: column;
      align-items: start;

      .detail-video {
        width: 100%;
        border-radius: 4px;
        height: 400px;

        video,
        iframe {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          border: none;
        }
      }

      .lesson-name {
        margin-top: 24px;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #1d2536;
      }

      .lesson-text {
        margin-top: 8px;

        p,
        li {
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #939393;
        }

        ul {
          padding-left: 18px;
        }
      }

      .regulatory-frameworks {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-top: 24px;
        gap: 16px;

        .file-item {
          display: flex;
          align-items: center;
          width: 100%;
          background: #ffffff;
          border: 1px solid #f2f2f2;
          border-radius: 4px;
          box-shadow: 0px 0px 7.6px 0px rgba(187, 187, 187, 0.05);
          padding: 10px 12px;
          gap: 8px;

          .pdf-icon {
            min-width: 48px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .file-main {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;

            .file-title {
              font-weight: 500;
              font-size: 16px;
              line-height: 28px;
              color: #333333;
            }

            .file-weight {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #5e6065;
            }
          }

          .direction-item {
            min-width: 28px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .lesson-pagination {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        gap: 12px;

        a {
          display: flex;
          align-items: center;
          padding: 16px;
          gap: 8px;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #354462;
          border-radius: 4px;
          background: #fff;
          border: 1px solid #354462;
          transition: 0.3s ease-in-out;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
            transition: 0.3s ease-in-out;
          }

          &:hover {
            color: #fff;
            background: #354462;

            img {
              filter: brightness(1000);
            }
          }
        }
      }
    }
  }
}

.quiz-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .lesson-name {
    margin-top: 24px;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #1d2536;
  }

  .quiz-start {
    margin-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    .total-time {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      background: #ebecef;

      p {
        color: #787878;
      }

      span {
        color: #354462;
      }
    }

    .quiz-start-btn {
      padding: 16px;
      border-radius: 4px;
      color: #fff;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      background: #354462;
      transition: 0.3s ease-in-out;

      &:hover {
        background: #263046;
      }
    }
  }

  .remaining-time {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    background: #ebecef;

    p {
      color: #787878;
    }

    span {
      color: #354462;
    }
  }

  .quizs {
    width: 100%;
    margin-top: 16px;

    .quiz-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 36px;

      .quiz-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        gap: 8px;

        .quiz-title {
          font-weight: 500;
          font-size: 16px;
          line-height: 28px;
          color: #424242;
        }

        .quiz-options {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 8px;
          width: 100%;

          .quiz-option {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 8px;
            position: relative;

            input {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 2;
              opacity: 0;
              cursor: pointer;
            }

            .quiz-option-circle {
              min-width: 20px;
              width: 20px;
              height: 20px;
              background: #fff;
              border: 1px solid #787878;
              border-radius: 100px;
              position: relative;

              &::after {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                content: "\2713";
                font-size: 14px;
                color: #787878;
                font-weight: 600;
                transition: 0.2s ease-in-out;
                font-family: system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                  "Helvetica Neue", sans-serif;
                opacity: 0;
              }
            }

            input:checked+.quiz-option-circle::after {
              opacity: 1;
            }

            .quiz-option-label {
              font-weight: 400;
              font-size: 16px;
              line-height: 28px;
              color: #787878;
            }

            .quiz-option-text {
              font-weight: 400;
              font-size: 16px;
              line-height: 28px;
              color: #787878;
            }
          }

          .quiz-option.true {
            .quiz-option-circle {
              border-color: #049b4d;
              background: rgba(6, 219, 109, 0.16);

              &::after {
                color: #049b4d;
                opacity: 1;
              }
            }

            .quiz-option-label {
              color: #049b4d;
            }

            .quiz-option-text {
              color: #049b4d;
            }
          }

          .quiz-option.false {
            .quiz-option-circle {
              border-color: #da0000;

              &::after {
                color: #da0000;
                opacity: 0;
              }
            }

            .quiz-option-label {
              color: #da0000;
            }

            .quiz-option-text {
              color: #da0000;
            }
          }
        }
      }

      .quiz-item.non-selected {
        pointer-events: none;
      }
    }

    .finish-exam {
      display: block;
      width: 132px;
      margin-top: 48px;
      margin-left: auto;
      padding: 12px 16px;
      border-radius: 4px;
      color: #fff;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      background: #354462;
      transition: 0.3s ease-in-out;

      &:hover {
        background: #263046;
      }
    }
  }

  .exam-result {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    background: #ebecef;

    p {
      color: #787878;
    }

    span {
      color: #354462;
    }
  }
}

.journal-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .journal-main {
    width: 100%;
    display: grid;
    gap: 24px;
    margin-top: 24px;
    grid-template-columns: 392px minmax(0, 808px);

    .journal-cover {
      width: 392px;
      min-width: 392px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      height: auto;

      img {
        max-width: 272px;
        width: 100%;
        height: 338px;
        border-radius: 4px;
      }
    }

    .journal-links-box {
      max-width: 808px;
      width: 100%;
      border: 1px solid #f2f2f2;
      border-radius: 4px;

      .journal-links-head {
        width: 100%;
        padding: 24px;
        border-bottom: 1px solid #f2f2f2;

        h3 {
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
          color: #354462;
        }
      }

      .journal-links {
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        width: 100%;

        .journal-link {
          display: flex;
          align-items: center;
          width: 100%;
          gap: 8px;
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #354462;
          position: relative;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }

          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0%;
            height: 1px;
            background: #354462;
            transition: 0.5s ease-in-out;
          }

          &:hover {
            &::after {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .last-articles-container {
    width: 100%;
    margin-top: 70px;

    .last-articles-title {
      width: 100%;
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      color: #161d29;
      padding-bottom: 16px;
      border-bottom: 1px solid #f2f2f2;
    }

    .last-articles {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;
      width: 100%;

      .article-item {
        width: 100%;
        border: 1px solid #f2f2f2;
        border-radius: 4px;
        padding: 24px;

        .artice-type {
          width: max-content;
          padding: 10px 16px;
          background: #b69d74;
          border-radius: 100px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #fff;
        }

        .artice-name {
          margin-top: 20px;
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
          color: #161d29;
        }

        .short-description {
          margin-top: 8px;
          width: 100%;

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            color: #555555;
          }
        }

        .article-owner {
          margin-top: 12px;
          font-weight: 500;
          font-size: 18px;
          line-height: 26px;
          color: #354462;
        }

        .article-bottom {
          margin-top: 12px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;

          .article-time {
            display: flex;
            align-items: center;
            gap: 4px;

            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }

            p {
              font-weight: 400;
              font-size: 18px;
              line-height: 28px;
              color: #787878;
            }
          }

          .article-download {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border-radius: 4px;
            border: 1px solid #354462;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #354462;
            transition: 0.3s ease-in-out;

            img {
              width: 24px;
              height: 24px;
              min-width: 24px;
              transition: 0.3s ease-in-out;
            }

            &:hover {
              background: #354462;
              color: #fff;

              img {
                filter: brightness(1000);
              }
            }
          }
        }
      }
    }
  }
}

.journal-general-texts {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .journal-texts {
    width: 100%;
    margin-top: 24px;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }

    img,
    video,
    iframe {
      max-width: 100%;
      border-radius: 4px;
      border: none;
    }
  }
}

.journal-archive-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .journal-archive {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 50px;

    .journal-archive-item {
      display: flex;
      flex-direction: column;
      align-items: start;
      width: 100%;

      .journal-archive-year {
        padding-bottom: 16px;
        width: 100%;
        border-bottom: 1px solid #f2f2f2;
        font-weight: 500;
        font-size: 24px;
        line-height: 36px;
        color: #161d29;
      }

      .journal-numbers {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;

        .journal-number {
          display: flex;
          flex-direction: column;
          align-items: start;
          padding: 24px 0;
          gap: 8px;
          width: 100%;
          border-bottom: 1px solid #f2f2f2;
          transition: 0.3s ease-in-out;

          .number-title {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            color: #354462;
          }

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            color: #939393;
          }

          &:hover {
            border-color: #354462;
          }
        }
      }
    }
  }
}

.journal-number-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .download_journal_number {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #354462;
    border: 1px solid #354462;
    border-radius: 4px;
    width: max-content;
    padding: 14px;
    transition: 0.3s ease-in-out;

    img {
      width: 24px;
      min-width: 24px;
      height: 24px;
      transition: 0.3s ease-in-out;
    }

    &:hover {
      background: #354462;
      color: #fff;

      img {
        filter: brightness(1000);
      }
    }
  }

  .articles-of-journal-number {
    margin-top: 24px;
    gap: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;

    .article-item {
      width: 100%;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      padding: 24px;

      .artice-type {
        width: max-content;
        padding: 10px 16px;
        background: #b69d74;
        border-radius: 100px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #fff;
      }

      .artice-name {
        margin-top: 20px;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #161d29;
      }

      .short-description {
        margin-top: 8px;
        width: 100%;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 28px;
          color: #555555;
        }
      }

      .article-owner {
        margin-top: 12px;
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        color: #354462;
      }

      .article-bottom {
        margin-top: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        .article-time {
          display: flex;
          align-items: center;
          gap: 4px;

          img {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }

          p {
            font-weight: 400;
            font-size: 18px;
            line-height: 28px;
            color: #787878;
          }
        }

        .article-download {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          border-radius: 4px;
          border: 1px solid #354462;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #354462;
          transition: 0.3s ease-in-out;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
            transition: 0.3s ease-in-out;
          }

          &:hover {
            background: #354462;
            color: #fff;

            img {
              filter: brightness(1000);
            }
          }
        }
      }
    }
  }
}

.login-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .login-description {
    margin-top: 16px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #787878;
    }

    ul {
      padding-left: 18px;
    }
  }

  .login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;

    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;
        }

        input {
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;

          &::placeholder {
            color: #939393;
          }
        }
      }
    }

    .forget-password-link {
      margin-top: 24px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-decoration: underline;
      color: #354462;
    }

    .loginBtn {
      margin-top: 24px;
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 16px 20px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

.forget-password-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;
  min-height: calc(100vh - 604px);

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .forget-password-form {
    width: 100%;
    display: flex;
    align-items: end;
    margin-top: 24px;
    gap: 24px;

    .form-item {
      max-width: 390px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px;

      label {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #424242;
      }

      input {
        border-radius: 4px;
        width: 100%;
        background: #fbfbfb;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
        padding: 16px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000;

        &::placeholder {
          color: #939393;
        }
      }
    }

    .forgetPasswordBtn {
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 17px 20px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

.forget-success-modal {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  backdrop-filter: blur(2px);
  background: rgba(22, 29, 41, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  transform: scale(0);
  transition: 0.3s ease-in-out;

  .forget-success {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #f2f2f2;
    background: #ffffff;
    border-radius: 6px;
    padding: 80px 32px;
    position: relative;
    max-height: calc(100svh - 40px);
    overflow-y: auto;

    .close-forget-modal {
      width: 24px;
      height: 24px;
      min-width: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 18px;
      right: 18px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .icon {
      min-width: 120px;
      width: 120px;
      height: 120px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p {
      margin-top: 24px;
      font-size: 20px;
      line-height: 30px;
      font-weight: 400;
      color: #1e1e1e;
      text-align: center;

      span {
        font-weight: 400;
        color: #3cd662;
      }
    }
  }
}

.forget-success-modal.showed {
  visibility: visible;
  transform: scale(1);
}

.updatePassword-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;
  min-height: calc(100vh - 604px);

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .updatePassword-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;

    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;
        }

        input {
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;

          &::placeholder {
            color: #939393;
          }
        }
      }
    }

    .updatePasswordBtn {
      margin-top: 24px;
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 16px 20px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

.dashboard-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;
  display: flex;
  align-items: start;
  gap: 24px;

  .dashboard-navigate {
    min-width: 288px;
    width: 288px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;

    .mobile-navigate-btn {
      display: none;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid #ebecef;

      p {
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #424242;
      }

      .icon {
        min-width: 24px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          transition: 0.3s ease-in-out;
        }

        .closeIcon {
          transform: scale(0);
        }

        .categoryIcon {
          transform: scale(1);
        }
      }
    }

    .dashboard-navigate-links {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #f5f5f5;
      padding: 16px;
      gap: 16px;

      .dashboard-navigate-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #5b5b5b;

        img {
          min-width: 24px;
          width: 24px;
          height: 24px;
          filter: brightness(0);
          opacity: 0.68;
        }

        .checkBlue {
          display: none;
          filter: none;
          opacity: 1;
          margin-left: auto;
        }
      }

      .dashboard-navigate-link.active {
        border-color: #354462;
        border-radius: 4px;
        background: #354462;
        color: #fff;

        img {
          filter: brightness(1000);
          opacity: 1;
        }
      }

      .dashboard-logout {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px;
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #5b5b5b;

        img {
          min-width: 24px;
          width: 24px;
          height: 24px;
          filter: brightness(0);
          opacity: 0.68;
        }
      }
    }
  }

  .dashboard-navigate.mobile-showed {
    .mobile-navigate-btn {
      .icon {
        .closeIcon {
          transform: scale(1);
        }

        .categoryIcon {
          transform: scale(0);
        }
      }
    }

    .dashboard-navigate-links {
      display: flex !important;
    }
  }

  .dashboard-personal-info {
    width: calc(100% - 312px);
    display: flex;
    flex-direction: column;
    align-items: start;

    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;
        }

        input {
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #000;

          &::placeholder {
            color: #939393;
          }
        }
      }
    }

    .change-password {
      margin-top: 24px;
      width: 100%;

      .change-password-title {
        color: #161d29;
        font-weight: 500;
        font-size: 20px;
        line-height: 32px;
      }

      .form-items {
        margin-top: 24px;
        width: 100%;
      }

      .forget-password-link {
        display: block;
        width: max-content;
        margin-left: auto;
        margin-top: 16px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-decoration: underline;
        color: #354462;
      }
    }

    .submitForm {
      margin-top: 24px;
      margin-left: auto;
      padding: 12px 16px;
      background: #354462;
      border-radius: 4px;
      transition: 0.3s ease-in-out;
      color: #fff;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;

      &:hover {
        background: #263046;
      }
    }
  }

  .dashboard-exam-result {
    width: calc(100% - 312px);
    display: flex;
    flex-direction: column;
    align-items: start;

    .exam-result-search {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px;
      background: #f2f2f2;
      border: 1px solid #ebecef;
      border-radius: 4px;
      gap: 8px;

      .exam-result-searchBtn {
        width: 20px;
        height: 20px;
        min-width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }

      input {
        width: 100%;
        color: #000;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        background: transparent;
        border: none;

        &::placeholder {
          color: #939393;
        }
      }
    }

    .exam-table {
      width: 100%;
      overflow: auto;
      border-radius: 4px;
      border: 1px solid #f5f5f5;
      margin-top: 16px;

      table {
        width: 100%;
        border-collapse: collapse;

        thead {
          tr {
            background: #fff;

            th {
              text-align: left;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              padding: 16px;
              color: rgba(33, 33, 33, 0.7);
            }
          }
        }

        tbody {
          tr {
            border-top: 1px solid #f5f5f5;

            td {
              padding: 20px 16px;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              color: #212121;
              max-width: 180px;
            }
          }
        }
      }
    }
  }

  .dashboard-my-courses {
    width: calc(100% - 312px);
    display: flex;
    flex-direction: column;
    align-items: start;

    .my-courses-tabs {
      display: flex;
      align-items: center;
      gap: 16px;

      .my-courses-tab {
        padding: 14px 16px;
        border: 1px solid #ebecef;
        background: #fff;
        border-radius: 4px;
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #939393;
        transition: 0.3s ease-in-out;
      }

      .active {
        color: #354462;
        border-color: #c0c5ce;
        background: #ebecef;
      }
    }

    .my-courses-list {
      width: 100%;
      display: none;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 16px;

      .my-course-card {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        gap: 24px;
        background: rgba(235, 242, 245, 0.5);
        border-radius: 4px;
        border: 1px solid #ebf2f5;
        padding: 20px 16px;

        .card-image {
          width: 100%;
          height: 192px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
          }
        }

        .card-body {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          gap: 8px;

          .course-name {
            width: 100%;
            font-weight: 500;
            font-size: 16px;
            line-height: 28px;
            color: #161d29;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            height: 56px;
          }

          .short-description {
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            height: 40px;

            p {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #939393;
            }
          }
        }
      }
    }

    .my-courses-list.showed {
      display: grid;
    }
  }
}

.apply-training-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .sub-title {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #939393;
  }

  .description {
    margin-top: 24px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .apply-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;

    .form-title {
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #153540;
      padding-bottom: 8px;
      width: 100%;
      border-bottom: 1px solid #ebecef;
    }

    .form-items {
      margin-top: 24px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;

          sup {
            color: #f00000;
          }
        }

        input,
        select {
          cursor: pointer;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #555555;

          &::placeholder {
            color: #939393;
          }
        }

        input[type="date"] {
          cursor: pointer;

          &::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: none;
          }
        }

        .calendarInput {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;

          .calendarIcon {
            position: absolute;
            right: 16px;
            width: 24px;
            height: 24px;
            min-width: 24px;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .select_input {
          display: flex;
          align-items: center;
          gap: 16px;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;

          input,
          select {
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #555555;

            &::placeholder {
              color: #939393;
            }
          }

          input {
            width: 100%;
          }

          select {
            min-width: 55px;
            width: 55px;
          }
        }
      }
    }

    .applyBtn {
      margin-top: 40px;
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 16px;
      width: 200px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

.apply-mediation-training-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .sub-title {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #939393;
  }

  .description {
    margin-top: 24px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .apply-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 24px;

    .form-title {
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #153540;
      padding-bottom: 8px;
      width: 100%;
      border-bottom: 1px solid #ebecef;
    }

    .form-items {
      margin-top: 24px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;

          sup {
            color: #f00000;
          }
        }

        input,
        select {
          cursor: pointer;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #555555;

          &::placeholder {
            color: #939393;
          }
        }

        input[type="date"] {
          cursor: pointer;

          &::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: none;
          }
        }

        .calendarInput {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;

          .calendarIcon {
            position: absolute;
            right: 16px;
            width: 24px;
            height: 24px;
            min-width: 24px;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .select_input {
          display: flex;
          align-items: center;
          gap: 16px;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;

          input,
          select {
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #555555;

            &::placeholder {
              color: #939393;
            }
          }

          input {
            width: 100%;
          }

          select {
            min-width: 55px;
            width: 55px;
          }
        }
      }
    }

    .upload-documents {
      margin-top: 24px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;

      .upload-document {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border-radius: 6px;
        border: 1px dashed #c1c1c1;

        .upload-icon {
          width: 48px;
          height: 48px;
          min-width: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f2f2f2;
          border-radius: 8px;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
        }

        input {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          opacity: 0;
          z-index: 1;
        }

        .upload-document-body {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          gap: 8px;

          .upload-document-title {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #424242;
          }

          .upload-document-subTitle {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #787878;
          }

          .addedFile {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 12px;

            .file-name {
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: #263046;
            }

            .removeFile {
              width: 20px;
              height: 20px;
              min-width: 20px;
              border-radius: 4px;
              background: #f00000;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 2;

              img {
                width: 16px;
                height: 16px;
              }
            }
          }

          .addedFile.hidden {
            display: none;
          }
        }
      }
    }

    .applyBtn {
      margin-top: 40px;
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 16px;
      width: 200px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

.apply-expert-training-container {
  max-width: 1440px;
  width: 100%;
  margin: 36px auto 0;

  .page-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #161d29;
  }

  .sub-title {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #939393;
  }

  .description {
    margin-top: 24px;
    width: 100%;

    p,
    li {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #424242;
    }

    ul {
      padding-left: 18px;
    }
  }

  .paper-application {
    width: 100%;
    margin-top: 32px;

    .application-to-address {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #424242;
      margin-left: auto;
      max-width: 392px;
    }

    .application-from-who {
      margin-top: 36px;
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      width: max-content;
      margin-left: auto;

      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #424242;
        text-align: center;
      }

      .fullname {
        min-width: 300px;
        font-size: 14px;
        line-height: 18px;
        height: 18px;
        font-weight: 500;
        border-bottom: 1px solid #424242;
      }

      span {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #424242;
      }
    }

    .application-title {
      text-align: center;
      margin-top: 70px;
      display: block;
      font-weight: 500;
      font-size: 20px;
      line-height: 32px;
      color: #323232;
    }

    .application-text {
      width: 100%;
      margin-top: 24px;

      p,
      li {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #424242;
        text-align: start;
      }

      ul {
        list-style: none;
      }
    }

    .application-contact {
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      align-items: start;

      .application-contact-title {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #424242;
      }

      .contact-items {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-top: 24px;
        gap: 20px;

        .contact-item {
          display: flex;
          align-items: center;
          gap: 10px;

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            color: #424242;
          }

          span {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            color: #424242;
            border-bottom: 1px solid #424242;
            min-width: 140px;
            text-align: center;
          }
        }
      }
    }

    .application-date {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 70px;
      margin-left: auto;
      max-width: 180px;

      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #424242;
      }

      span {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        color: #424242;
        border-bottom: 1px solid #424242;
        min-width: 140px;
        text-align: center;
      }
    }
  }

  .apply-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 40px;

    .form-title {
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #153540;
      padding-bottom: 8px;
      width: 100%;
      border-bottom: 1px solid #ebecef;
    }

    .form-items {
      margin-top: 24px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 8px;

        label {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #424242;

          sup {
            color: #f00000;
          }
        }

        input,
        select {
          cursor: pointer;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #555555;

          &::placeholder {
            color: #939393;
          }
        }

        input[type="date"] {
          cursor: pointer;

          &::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: none;
          }
        }

        .calendarInput {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;

          .calendarIcon {
            position: absolute;
            right: 16px;
            width: 24px;
            height: 24px;
            min-width: 24px;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .select_input {
          display: flex;
          align-items: center;
          gap: 16px;
          border-radius: 4px;
          width: 100%;
          background: #fbfbfb;
          border: 1px solid #f3f3f3;
          box-shadow: 0px 4px 5.5px 0px rgba(241, 241, 241, 0.25);
          padding: 16px;

          input,
          select {
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #555555;

            &::placeholder {
              color: #939393;
            }
          }

          input {
            width: 100%;
          }

          select {
            min-width: 55px;
            width: 55px;
          }
        }
      }
    }

    .upload-documents {
      margin-top: 24px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 24px;

      .upload-document {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border-radius: 6px;
        border: 1px dashed #c1c1c1;

        .upload-icon {
          width: 48px;
          height: 48px;
          min-width: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f2f2f2;
          border-radius: 8px;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
        }

        input {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          opacity: 0;
          z-index: 1;
        }

        .upload-document-body {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          gap: 8px;

          .upload-document-title {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #424242;
          }

          .upload-document-subTitle {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #787878;
          }

          .addedFile {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 12px;

            .file-name {
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: #263046;
            }

            .removeFile {
              width: 20px;
              height: 20px;
              min-width: 20px;
              border-radius: 4px;
              background: #f00000;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 2;

              img {
                width: 16px;
                height: 16px;
              }
            }
          }

          .addedFile.hidden {
            display: none;
          }
        }
      }
    }

    .applyBtn {
      margin-top: 40px;
      color: #fff;
      background: #354462;
      transition: 0.3s ease-in-out;
      padding: 16px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;

      &:hover {
        background: #263046;
      }
    }
  }
}

@media only screen and (max-width: 1250px) {
  .p-lr {
    padding-left: 60px;
    padding-right: 60px;
  }

  header {
    .top-header {
      .logo {
        gap: 14px;

        img {
          min-width: 54px;
          width: 54px;
        }

        .logo-txt {
          h1 {
            font-size: 12px;
            line-height: 18px;
          }

          h2 {
            font-size: 20px;
            line-height: 28px;
          }
        }
      }

      .top-header-right {
        gap: 20px;
      }
    }

    nav {
      .navbar {
        .navbar-links {
          gap: 20px;

          .link-menu {
            padding: 24px 0;

            .link {
              font-size: 15px;
              line-height: 22px;
            }

            .sub-links {
              top: 70px;
            }
          }
        }

        .profile {
          padding: 12px;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }

  .home-hero-section {
    .home-hero-swiper {
      .hero-item {
        height: 730px;

        .item-content {
          max-width: 700px;

          .item-title {
            font-size: 28px;
            line-height: 42px;
            max-height: 168px;
          }

          .item-link {
            width: 250px;
            padding: 14px;
          }
        }
      }

      .swiper-pagination {
        bottom: 28px;
      }

      .swiper-button-next,
      .swiper-button-prev {
        width: 50px;
        height: 50px;
        min-width: 50px;
        --swiper-navigation-size: 18px;
      }

      .swiper-button-prev {
        left: 16px;
      }

      .swiper-button-next {
        right: 16px;
      }
    }
  }

  .home-apple-container {
    margin: -60px auto 0;

    .apply-boxes {
      .apply-box {
        max-width: 553px;
      }
    }
  }

  .home-news-container {
    margin: 46px auto 0;

    .section-title {
      font-size: 30px;
      line-height: 40px;
    }

    .short-desc {
      margin: 6px auto 0;
      max-width: 570px;

      p {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .more-link {
      margin-top: 20px;
    }

    .home-news-cards {
      gap: 20px;

      .news-card {
        gap: 24px;

        .card-image {
          height: 220px;
        }

        .card-body {
          .card-title {
            font-size: 16px;
            line-height: 24px;
            height: 48px;
          }

          p {
            margin-top: 4px;
            font-size: 14px;
            line-height: 20px;
            height: 40px;
          }

          span {
            margin-top: 12px;
          }
        }
      }
    }
  }

  .home-events-container {
    margin: 54px auto 0;

    .home-events-tabs {
      gap: 20px;

      .home-event-tab {
        font-size: 20px;
        line-height: 30px;
        padding: 8px 12px;
      }
    }

    .home-events-cards {
      margin-top: 20px;
    }
  }

  .home-media-container {
    margin: 54px auto 0;

    .section-title {
      font-size: 30px;
      line-height: 40px;
    }

    .home-media-tabs {
      margin: 20px auto 0;
      max-width: 700px;
      padding: 8px 6px;

      .home-media-tab {
        font-size: 16px;
        line-height: 24px;
      }
    }

    .more-link {
      margin-top: 20px;
    }

    .home-media-cards {
      margin-top: 20px;

      .media-cards-list {
        gap: 20px;

        .home-media-card {
          gap: 20px;

          .card-image {
            height: 220px;
          }

          .card-body {
            .card-title {
              font-size: 18px;
              line-height: 28px;
              height: 28px;
            }

            .card-description {
              height: 40px;
              margin-top: 4px;

              p {
                font-size: 14px;
                line-height: 20px;
              }
            }

            .count {
              margin-top: 24px;
              gap: 6px;

              .icon {
                width: 16px;
                height: 16px;
                min-width: 16px;
              }

              p {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }

  .home-contact-container {
    margin: 54px auto 0;

    .section-title {
      font-size: 30px;
      line-height: 40px;
    }

    .contact-form {
      margin-top: 20px;
      padding: 36px 60px;
      gap: 16px;

      .form-items {
        gap: 16px;
      }

      .submit-form {
        max-width: 340px;
        padding: 14px;
      }
    }
  }

  footer {
    margin-top: 54px;

    .footer-container {
      gap: 32px;

      .logo {
        gap: 14px;

        img {
          min-width: 54px;
          width: 54px;
        }

        .logo-txt {
          h2 {
            font-size: 12px;
            line-height: 18px;
          }

          h3 {
            font-size: 20px;
            line-height: 28px;
          }
        }
      }

      .footer-main {
        .footer-links {
          max-width: 810px;
          gap: 16px;

          .footer-link {
            font-size: 14px;
            line-height: 20px;
          }
        }

        .footer-socials {
          gap: 6px;
        }
      }

      .footer-bottom {
        padding-top: 12px;

        p {
          font-size: 12px;
          line-height: 16px;
        }
      }
    }
  }

  .breadcrumb {
    padding: 6px 0;

    .breadcrumb-container {
      gap: 6px;

      .breadcrumb-item {
        gap: 6px;

        p {
          font-size: 12px;
          line-height: 16px;
        }

        img {
          min-width: 14px;
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .about-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .about-text {
      margin-top: 20px;

      p {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }

  .leadership-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .leadership {
      margin-top: 20px;

      .leadership-item {
        gap: 20px;

        .leadership-title {
          gap: 12px;
          font-size: 16px;
          line-height: 24px;
        }

        .leaders {
          .leader-card {
            gap: 20px;

            .card-image {
              height: 200px;
            }

            .card-body {
              gap: 12px;

              .leader-name {
                font-size: 22px;
                line-height: 26px;
              }
            }
          }
        }
      }
    }
  }

  .leadership-detail-container {
    margin: 30px auto 0;
    gap: 20px;

    .leader-image {
      min-width: 352px;
      width: 352px;
    }

    .detail-content {
      width: calc(100% - 372px);

      .leader-name {
        font-size: 22px;
      }

      .detail-text {
        p {
          font-size: 14px;
        }
      }
    }
  }

  .academy-structure-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .structure-text {
      margin-top: 20px;

      p {
        font-size: 14px;
        line-height: 24px;
      }
    }

    .structure-items {
      margin-top: 24px;
      gap: 20px;

      .structure-item {
        .structure-title {
          font-size: 22px;
          line-height: 34px;
        }

        .short-desc {
          margin: 12px 0 20px;

          p {
            font-size: 14px;
            line-height: 24px;
          }
        }

        .detail-link {
          padding: 14px 28px;
        }
      }
    }
  }

  .structure-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .detail-text {
      width: 100%;
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }

  .regulatory-framework-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .regulatory-frameworks {
      margin-top: 20px;
      gap: 12px;

      .file-item {
        padding: 12px;

        .file-main {
          .file-title {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
    }
  }

  .news-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-news {
      gap: 20px;
      margin-top: 20px;

      .news-item {
        gap: 18px;

        .item-body {
          .news-title {
            font-size: 14px;
            line-height: 24px;
          }

          .short-description {
            p {
              font-size: 12px;
            }
          }

          .news-time {
            margin-top: 6px;
            font-size: 12px;
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .announcement-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-announcements {
      gap: 20px;
      margin-top: 20px;

      .announcement-item {
        gap: 18px;

        .item-body {
          .announcement-title {
            font-size: 14px;
            line-height: 24px;
          }

          .short-description {
            p {
              font-size: 12px;
            }
          }

          .announcement-time {
            margin-top: 6px;
            font-size: 12px;
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .news-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .detail-text {
      width: 100%;
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }

    .news-time {
      margin-top: 20px;
    }

    .news-detail-images {
      margin: 20px auto 0;
    }
  }

  .announcement-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .detail-text {
      width: 100%;
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }

    .announcement-time {
      margin-top: 20px;
    }

    .announcement-detail-images {
      margin: 20px auto 0;
    }
  }

  .videos-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-videos {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 20px;

      .video-card {
        gap: 20px;

        .card-image {
          height: 220px;
        }

        .card-body {
          .card-title {
            font-size: 18px;
            line-height: 28px;
            height: 28px;
          }

          .card-description {
            height: 40px;
            margin-top: 4px;

            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .events-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-events {
      margin-top: 20px;

      .event-item {
        gap: 20px;

        .item-body {
          gap: 20px;

          .event-time {
            padding-top: 16px;
            min-width: 80px;
            font-size: 16px;
            line-height: 24px;
          }

          .body-main {
            padding-bottom: 24px;

            .event-title {
              font-size: 18px;
              line-height: 28px;
              height: 56px;
            }

            .short-description {
              height: 60px;
              -webkit-line-clamp: 3;
            }

            .detail-link {
              margin-top: 24px;
            }
          }
        }

        .item-image {
          min-width: 350px;
          width: 350px;
          height: 194px;
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .event-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .detail-text {
      width: 100%;
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }

    .event-time {
      margin-top: 20px;
    }

    .event-detail-images {
      margin: 20px auto 0;
    }
  }

  .conferences-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-conferences {
      margin-top: 20px;

      .conference-item {
        gap: 20px;

        .item-body {
          gap: 20px;

          .conference-time {
            padding-top: 16px;
            min-width: 80px;
            font-size: 16px;
            line-height: 24px;
          }

          .body-main {
            padding-bottom: 24px;

            .conference-title {
              font-size: 18px;
              line-height: 28px;
              height: 56px;
            }

            .short-description {
              height: 60px;
              -webkit-line-clamp: 3;
            }

            .detail-link {
              margin-top: 24px;
            }
          }
        }

        .item-image {
          min-width: 350px;
          width: 350px;
          height: 194px;
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .conference-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .detail-text {
      width: 100%;
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }

    .conference-time {
      margin-top: 20px;
    }

    .conference-detail-images {
      margin: 20px auto 0;
    }
  }

  .articles-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .all-articles {
      gap: 20px;
      margin-top: 20px;

      .article-item {
        padding: 24px 20px;

        .artice-type {
          padding: 8px 12px;
        }

        .artice-name {
          margin-top: 16px;
          font-size: 16px;
          line-height: 28px;
        }

        .short-description {
          margin-top: 6px;

          p {
            font-size: 14px;
            line-height: 24px;
          }
        }

        .article-owner {
          margin-top: 10px;
          font-size: 14px;
          line-height: 20px;
        }

        .article-bottom {
          .article-time {
            img {
              width: 16px;
              height: 16px;
              min-width: 16px;
            }

            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .contactInfo-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .contactInfo-description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .contactInfo-boxes {
      margin-top: 20px;
      gap: 20px;

      .contactInfo-box {
        .contactInfo-link {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }

    .map {
      margin-top: 32px;
      height: 440px;
    }
  }

  .writeUs-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .writeUs-description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .contact-form {
      margin-top: 20px;
      padding: 36px 60px;
      gap: 16px;

      .form-items {
        gap: 16px;
      }

      .submit-form {
        max-width: 340px;
        padding: 14px;
      }
    }
  }

  .faq-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .faq-main {
      margin-top: 20px;
      gap: 20px;

      .faq-description {
        max-width: 322px;

        p,
        li {
          font-size: 14px;
          line-height: 20px;
        }
      }

      .faq-items {
        .faq-item {
          .faq-head {
            p {
              font-size: 14px;
              line-height: 20px;
            }
          }

          .faq-body {

            p,
            li {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  .training-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .training-description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .upcoming-training-programs {
      margin-top: 30px;

      .section-title {
        font-size: 18px;
        line-height: 28px;
      }

      .programs {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 20px;
      }
    }

    .trainings {
      grid-template-columns: repeat(3, 1fr);

      .training-card {
        .card-image {
          height: 150px;
        }

        .card-body {
          margin-top: 16px;

          .card-title {
            font-size: 18px;
            line-height: 28px;
            height: 56px;
          }

          .card-subTitle {
            margin-top: 4px;
            font-size: 14px;
            line-height: 20px;
            height: 40px;
          }

          .short-description {
            height: 36px;
            margin-top: 16px;

            p {
              font-size: 12px;
              line-height: 18px;
            }
          }

          .card-info-tags {
            gap: 8px 16px;
            padding-top: 16px;
          }

          .trainingInfoBtn {
            margin-top: 16px;
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .training-detail-modal {
    .training-detail {
      max-width: 700px;

      .training-title {
        font-size: 20px;
      }

      .training-subTitle {
        margin-top: 4px;
      }

      .training-detail-main {
        gap: 20px;

        .training-detail-image {
          max-width: 420px;
          height: 208px;
        }

        .training-detail-time {
          max-width: 200px;
          height: 208px;
          gap: 20px;
        }
      }

      .training-detail-description {

        p,
        li {
          font-size: 14px;
          line-height: 24px;
        }
      }
    }
  }

  .electron-learn-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .platform-search {
      gap: 20px;
      margin-top: 20px;

      .searchProgramBtn {
        min-width: 164px;
        width: 164px;
      }
    }

    .learn-courses {
      margin-top: 20px;
      gap: 20px;

      .course-card {
        gap: 20px;

        .card-image {
          height: 220px;
        }

        .card-body {
          .card-title {
            font-size: 18px;
            line-height: 28px;
            height: 28px;
          }

          .card-description {
            height: 40px;
            margin-top: 4px;

            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 30px;

      .pagination-direction {
        width: 32px;
        height: 32px;
        min-width: 32px;

        img {
          width: 16px;
          height: 16px;
          min-width: 16px;
        }
      }

      .pagination-items {
        .pagination-item {
          width: 32px;
          height: 32px;
          min-width: 32px;
          font-size: 12px;
        }
      }
    }
  }

  .course-detail-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .course-detail {
      margin-top: 20px;
      gap: 20px;

      .chapter-list {
        min-width: 360px;
        width: 360px;

        .chapter-item {
          .chapter-header {
            .chapter-title {
              font-size: 16px;
              line-height: 24px;
            }
          }

          .lessons {
            .lessons_item {
              gap: 10px;

              .checkbox_text {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }

      .course-detail-main {
        width: calc(100% - 380px);

        .detail-video {
          height: 300px;
        }

        .lesson-name {
          margin-top: 20px;
          font-size: 18px;
          line-height: 28px;
        }

        .lesson-text {

          p,
          li {
            font-size: 14px;
            line-height: 24px;
          }
        }

        .regulatory-frameworks {
          margin-top: 20px;
          gap: 12px;

          .file-item {
            padding: 12px;

            .file-main {
              .file-title {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }

        .lesson-pagination {
          a {
            padding: 10px 14px;
          }
        }
      }
    }
  }

  .quiz-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .lesson-name {
      margin-top: 20px;
      font-size: 16px;
      line-height: 24px;
    }

    .quiz-start {
      .total-time {
        padding: 12px;
        font-size: 14px;
        line-height: 20px;
      }

      .quiz-start-btn {
        padding: 14px;
      }
    }

    .remaining-time {
      padding: 10px 14px;
      font-size: 14px;
      line-height: 20px;
    }

    .quizs {
      .quiz-list {
        gap: 32px;

        .quiz-item {
          .quiz-title {
            font-size: 14px;
            line-height: 20px;
          }

          .quiz-options {
            .quiz-option {
              .quiz-option-circle {
                min-width: 18px;
                width: 18px;
                height: 18px;

                &::after {
                  font-size: 13px;
                }
              }

              .quiz-option-label {
                font-size: 14px;
                line-height: 20px;
              }

              .quiz-option-text {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }

      .finish-exam {
        width: 112px;
        margin-top: 40px;
        padding: 10px 14px;
      }
    }

    .exam-result {
      margin-top: 20px;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 20px;
    }
  }

  .journal-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .journal-main {
      margin-top: 20px;
      grid-template-columns: 342px minmax(0, 764px);

      .journal-cover {
        width: 342px;
        min-width: 342px;

        img {
          max-width: 272px;
          height: 338px;
        }
      }

      .journal-links-box {
        max-width: 764px;
      }
    }

    .last-articles-container {
      width: 100%;
      margin-top: 48px;

      .last-articles-title {
        font-size: 20px;
        line-height: 30px;
      }

      .last-articles {
        gap: 20px;

        .article-item {
          padding: 24px 20px;

          .artice-type {
            padding: 8px 12px;
          }

          .artice-name {
            margin-top: 16px;
            font-size: 16px;
            line-height: 28px;
          }

          .short-description {
            margin-top: 6px;

            p {
              font-size: 14px;
              line-height: 24px;
            }
          }

          .article-owner {
            margin-top: 10px;
            font-size: 14px;
            line-height: 20px;
          }

          .article-bottom {
            .article-time {
              img {
                width: 16px;
                height: 16px;
                min-width: 16px;
              }

              p {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }

  .journal-general-texts {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .journal-texts {
      margin-top: 20px;
    }
  }

  .journal-archive-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .journal-archive {
      margin-top: 20px;
      gap: 40px;

      .journal-archive-item {
        .journal-archive-year {
          font-size: 20px;
          line-height: 30px;
        }

        .journal-numbers {
          .journal-number {
            padding: 20px 0;
          }
        }
      }
    }
  }

  .journal-number-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .download_journal_number {
      margin-top: 20px;
      padding: 10px;
    }

    .articles-of-journal-number {
      margin-top: 20px;
      gap: 20px;

      .article-item {
        padding: 24px 20px;

        .artice-type {
          padding: 8px 12px;
        }

        .artice-name {
          margin-top: 16px;
          font-size: 16px;
          line-height: 28px;
        }

        .short-description {
          margin-top: 6px;

          p {
            font-size: 14px;
            line-height: 24px;
          }
        }

        .article-owner {
          margin-top: 10px;
          font-size: 14px;
          line-height: 20px;
        }

        .article-bottom {
          .article-time {
            img {
              width: 16px;
              height: 16px;
              min-width: 16px;
            }

            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  .login-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .login-description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .login-form {
      margin-top: 20px;

      .form-items {
        gap: 16px;
      }

      .forget-password-link {
        margin-top: 20px;
        font-size: 14px;
        line-height: 20px;
      }

      .loginBtn {
        padding: 14px 24px;
      }
    }
  }

  .forget-password-container {
    margin: 30px auto 0;
    min-height: calc(100vh - 514px);

    .page-title {
      font-size: 22px;
    }

    .forget-password-form {
      margin-top: 20px;

      .form-item {
        max-width: 390px;
      }

      .forgetPasswordBtn {
        padding: 17px 24px;
      }
    }
  }

  .forget-success-modal {
    .forget-success {
      .icon {
        min-width: 100px;
        width: 100px;
        height: 100px;
      }

      p {
        margin-top: 20px;
        font-size: 18px;
        line-height: 28px;
      }
    }
  }

  .updatePassword-container {
    margin: 30px auto 0;
    min-height: calc(100vh - 514px);

    .page-title {
      font-size: 22px;
    }

    .updatePassword-form {
      margin-top: 20px;

      .form-items {
        gap: 16px;
      }

      .updatePasswordBtn {
        padding: 14px 18px;
      }
    }
  }

  .dashboard-container {
    margin: 30px auto 0;

    .dashboard-navigate {
      min-width: 248px;
      width: 248px;

      .dashboard-navigate-links {
        padding: 12px;
        gap: 12px;

        .dashboard-navigate-link {
          gap: 6px;
          padding: 8px;
          font-size: 14px;
          line-height: 24px;

          img {
            min-width: 20px;
            width: 20px;
            height: 20px;
          }
        }

        .dashboard-logout {
          gap: 6px;
          padding: 8px;
          font-size: 14px;
          line-height: 24px;

          img {
            min-width: 20px;
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    .dashboard-personal-info {
      width: calc(100% - 272px);

      .change-password {
        margin-top: 20px;

        .change-password-title {
          font-size: 18px;
          line-height: 28px;
        }

        .form-items {
          margin-top: 20px;
        }

        .forget-password-link {
          font-size: 14px;
          line-height: 20px;
        }
      }

      .submitForm {
        padding: 12px;
      }
    }

    .dashboard-exam-result {
      width: calc(100% - 272px);
    }

    .dashboard-my-courses {
      width: calc(100% - 272px);

      .my-courses-tabs {
        .my-courses-tab {
          padding: 12px;
        }
      }

      .my-courses-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        .my-course-card {
          gap: 20px;

          .card-image {
            height: 152px;
          }
        }
      }
    }
  }

  .apply-training-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .sub-title {
      margin-top: 12px;
      font-size: 14px;
      line-height: 20px;
    }

    .description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .apply-form {
      margin-top: 20px;

      .form-title {
        font-size: 18px;
        line-height: 28px;
      }

      .form-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .applyBtn {
        margin-top: 32px;
        padding: 14px;
      }
    }
  }

  .apply-mediation-training-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .sub-title {
      margin-top: 12px;
      font-size: 14px;
      line-height: 20px;
    }

    .description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .apply-form {
      margin-top: 20px;

      .form-title {
        font-size: 18px;
        line-height: 28px;
      }

      .form-items {
        gap: 20px;
      }

      .applyBtn {
        margin-top: 32px;
        padding: 14px;
      }
    }
  }

  .apply-expert-training-container {
    margin: 30px auto 0;

    .page-title {
      font-size: 22px;
    }

    .sub-title {
      margin-top: 12px;
      font-size: 14px;
      line-height: 20px;
    }

    .description {
      margin-top: 20px;

      p,
      li {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .apply-form {
      margin-top: 36px;

      .form-title {
        font-size: 18px;
        line-height: 28px;
      }

      .form-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .applyBtn {
        margin-top: 32px;
        padding: 14px;
      }
    }
  }
}

@media only screen and (max-width: 992px) {
  header {
    .top-header {
      background: #354462;

      .logo {
        .logo-txt {
          h1 {
            color: #fff;
          }

          h2 {
            color: #fff;
          }
        }
      }

      .top-header-right {
        display: none;
      }

      .hamburger {
        display: flex;
      }
    }

    nav {
      display: none;
    }
  }

  .home-header {
    position: initial;
  }

  .overhidden {
    overflow: hidden;
  }

  .mobile-menu-container {
    display: flex;
  }

  .home-apple-container {
    margin: 20px auto 0;

    .section-title {
      display: block;
    }

    .apply-boxes {
      margin-top: 16px;
      flex-direction: column;

      .apply-box {
        max-width: 100%;

        .box-title {
          display: block;
          overflow: initial;
          -webkit-line-clamp: initial;
          -webkit-box-orient: initial;
          height: auto;
        }

        .short-description {
          height: auto;
          max-height: 72px;
        }
      }
    }
  }

  .home-news-container {
    .home-news-cards {
      .news-card {
        .card-image {
          height: 160px;
        }
      }
    }
  }

  .home-media-container {
    .home-media-cards {
      .media-cards-list {
        .home-media-card {
          .card-image {
            height: 160px;
          }
        }
      }
    }
  }

  footer {
    .footer-container {
      .footer-main {
        flex-direction: column;
        gap: 32px;

        .footer-links {
          max-width: 100%;
        }
      }
    }
  }

  .breadcrumb {
    display: none;
  }

  .leadership-container {
    .leadership {
      .leadership-item {
        .leaders {
          grid-template-columns: repeat(2, 1fr);

          .leader-card {
            .card-image {
              height: 240px;
            }
          }
        }
      }
    }
  }

  .leadership-detail-container {
    flex-direction: column;

    .leader-image {
      min-width: 0;
      max-width: 452px;
      width: 100%;
    }

    .detail-content {
      width: 100%;
    }
  }

  .videos-container {
    .all-videos {
      .video-card {
        .card-image {
          height: 160px;
        }
      }
    }
  }

  .events-container {
    .all-events {
      .event-item {
        .item-body {
          gap: 12px;
          flex-direction: column;

          .event-time {
            padding-top: 0;
            min-width: 0;
          }
        }

        .item-image {
          min-width: 370px;
          width: 370px;
          height: 230px;
        }
      }
    }
  }

  .conferences-container {
    .all-conferences {
      .conference-item {
        .item-body {
          gap: 12px;
          flex-direction: column;

          .conference-time {
            padding-top: 0;
            min-width: 0;
          }
        }

        .item-image {
          min-width: 370px;
          width: 370px;
          height: 230px;
        }
      }
    }
  }

  .contactInfo-container {
    .contactInfo-boxes {
      grid-template-columns: repeat(1, 1fr);

      .contactInfo-box {
        p {
          max-width: 500px;
        }
      }
    }
  }

  .training-container {
    .upcoming-training-programs {
      .programs {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .trainings {
      grid-template-columns: repeat(2, 1fr);

      .training-card {
        .card-image {
          height: 200px;
        }
      }
    }
  }

  .electron-learn-container {
    .learn-courses {
      .course-card {
        .card-image {
          height: 160px;
        }
      }
    }
  }

  .course-detail-container {
    .course-detail {
      flex-direction: column-reverse;

      .chapter-list {
        min-width: 0;
        width: 100%;
      }

      .course-detail-main {
        width: 100%;

        .detail-video {
          height: 450px;
        }
      }
    }
  }

  .forget-password-container {
    min-height: calc(100vh - 468px);
  }

  .updatePassword-container {
    min-height: calc(100vh - 468px);
  }

  .dashboard-container {
    margin: 30px auto 0;
    flex-direction: column;

    .dashboard-navigate {
      min-width: 0;
      width: 100%;

      .mobile-navigate-btn {
        display: flex;
      }

      .dashboard-navigate-links {
        padding: 16px;
        gap: 16px;
        position: absolute;
        top: 65px;
        left: 0;
        display: none;
        border-color: rgba(0, 0, 0, 0.12);

        .dashboard-navigate-link {
          gap: 8px;
          padding: 10px;
          font-size: 16px;
          line-height: 28px;

          img {
            min-width: 24px;
            width: 24px;
            height: 24px;
          }
        }

        .dashboard-navigate-link.active {
          border-color: #ebecef;
          background: #ebecef;
          color: #303e59;

          img {
            filter: none;
          }

          .checkBlue {
            display: block;
          }
        }

        .dashboard-logout {
          gap: 8px;
          padding: 10px;
          font-size: 16px;
          line-height: 28px;

          img {
            min-width: 24px;
            width: 24px;
            height: 24px;
          }
        }
      }
    }

    .dashboard-personal-info {
      width: 100%;
    }

    .dashboard-exam-result {
      width: 100%;
    }

    .dashboard-my-courses {
      width: 100%;

      .my-courses-list {
        .my-course-card {
          .card-image {
            height: 192px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .p-lr {
    padding-left: 20px;
    padding-right: 20px;
  }

  header {
    .top-header {
      padding-top: 20px;
      padding-bottom: 20px;

      .logo {
        gap: 12px;

        img {
          min-width: 40px;
          width: 40px;
        }

        .logo-txt {
          gap: 2px;

          h1 {
            font-size: 8px;
            line-height: 10px;
          }

          h2 {
            font-size: 18px;
            line-height: 26px;
          }
        }
      }
    }
  }

  .mobile-menu-container {
    height: calc(100svh - 83.52px);
    padding: 20px;
  }

  .home-hero-section {
    .home-hero-swiper {
      .hero-item {
        height: 630px;

        .item-content {
          max-width: 100%;

          .item-title {
            font-size: 20px;
            line-height: 30px;
            max-height: 120px;
          }

          .item-link {
            width: 140px;
            padding: 10px;
          }
        }
      }

      .swiper-pagination {
        bottom: 14px;
      }

      .swiper-button-next,
      .swiper-button-prev {
        display: none;
      }
    }
  }

  .home-news-container {
    margin: 36px auto 0;

    .section-title {
      font-size: 24px;
      line-height: 36px;
    }

    .short-desc {
      margin: 4px auto 0;
    }

    .more-link {
      display: none;
    }

    .home-news-cards {
      margin-top: 16px;
      grid-template-columns: repeat(1, 1fr);
      gap: 16px;

      .news-card {
        gap: 16px;

        .card-image {
          height: 300px;
        }
      }
    }

    .mobile-more-link {
      display: flex;
    }
  }

  .home-events-container {
    margin: 36px auto 0;

    .home-events-tabs {
      gap: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .home-event-tab {
        font-size: 16px;
        line-height: 28px;
        padding: 6px;
        text-align: center;
        width: 100%;
      }
    }

    .home-events-cards {
      margin-top: 16px;

      .event-cards-list {
        .home-event-card {
          border: 1px solid #f2f2f2;
          border-radius: 4px;
          padding: 16px;
          flex-direction: column;
          gap: 16px;

          .card-image {
            min-width: 0;
            width: 100%;
            height: 292px;
          }

          .card-body {
            width: 100%;
            border: none;
            padding: 0;

            .card-date {
              gap: 0;
              padding: 0;

              .date-item {
                padding-right: 0;
                padding: 8px 8px 8px 12px;

                .icon {
                  min-width: 16px;
                  width: 16px;
                  height: 16px;
                }

                p {
                  font-size: 10px;
                  line-height: 16px;
                }

                &:last-child {
                  padding: 8px 12px 8px 8px;
                }
              }
            }

            .card-title {
              margin-top: 8px;
              font-size: 16px;
              display: block;
              overflow: initial;
              height: auto;
            }

            .card-description {
              margin-top: 4px;
              display: block;
              overflow: initial;
              height: auto;
            }
          }
        }
      }
    }
  }

  .home-media-container {
    margin: 36px auto 0;

    .section-title {
      font-size: 24px;
      line-height: 36px;
    }

    .home-media-tabs {
      margin: 16px auto 0;
      max-width: 100%;

      .home-media-tab {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .more-link {
      display: none;
    }

    .home-media-cards {
      margin-top: 16px;

      .media-cards-list {
        gap: 16px;
        grid-template-columns: repeat(1, 1fr);

        .home-media-card {
          gap: 16px;

          .card-image {
            height: 300px;

            .playCover {
              width: 60px;
              height: 60px;
            }
          }

          .card-body {
            .card-title {
              font-size: 16px;
              height: auto;
              display: block;
              overflow: inherit;
            }

            .card-description {
              height: auto;
              display: block;
              overflow: initial;
            }

            .count {
              margin-top: 20px;
            }
          }
        }
      }
    }

    .mobile-more-link {
      display: flex;
    }
  }

  .home-contact-container {
    margin: 36px auto 0;

    .section-title {
      font-size: 24px;
      line-height: 36px;
    }

    .contact-form {
      margin-top: 16px;
      padding: 0;
      gap: 12px;
      border: none;
      box-shadow: none;

      .form-items {
        gap: 12px;
        grid-template-columns: repeat(1, 1fr);
      }

      .submit-form {
        max-width: 100%;
        padding: 12px;
      }
    }
  }

  footer {
    margin-top: 36px;

    .footer-container {
      gap: 24px;

      .logo {
        gap: 12px;

        img {
          min-width: 40px;
          width: 40px;
        }

        .logo-txt {
          gap: 2px;

          h2 {
            font-size: 8px;
            line-height: 10px;
          }

          h3 {
            font-size: 18px;
            line-height: 26px;
          }
        }
      }

      .footer-main {
        flex-direction: column;
        align-items: start;
        gap: 24px;

        .footer-links {
          flex-direction: column;
          align-items: start;
          gap: 24px;

          .footer-link {
            font-size: 16px;
            line-height: 24px;
          }
        }
      }

      .footer-bottom {
        padding-top: 16px;
        justify-content: start;
      }
    }
  }

  .about-container {
    margin: 24px auto 0;
  }

  .leadership-container {
    margin: 24px auto 0;

    .leadership {
      .leadership-item {
        gap: 16px;

        .leaders {
          .leader-card {
            gap: 24px;

            .card-image {
              height: 220px;
            }

            .card-body {
              gap: 10px;

              .leader-name {
                font-size: 20px;
                line-height: 30px;
              }
            }
          }
        }
      }
    }
  }

  .leadership-detail-container {
    margin: 24px auto 0;
    gap: 16px;

    .leader-image {
      max-width: 100%;
    }
  }

  .academy-structure-container {
    margin: 24px auto 0;

    .structure-items {
      margin-top: 20px;
      grid-template-columns: repeat(1, 1fr);
      gap: 16px;

      .structure-item {
        .structure-title {
          font-size: 20px;
          line-height: 26px;
        }

        .detail-link {
          padding: 12px;
        }
      }
    }
  }

  .structure-detail-container {
    margin: 24px auto 0;
  }

  .regulatory-framework-container {
    margin: 24px auto 0;
  }

  .news-container {
    margin: 24px auto 0;

    .all-news {
      .news-item {
        gap: 12px;
        flex-direction: column;
        align-items: start;
      }
    }
  }

  .announcement-container {
    margin: 24px auto 0;

    .all-announcements {
      .announcement-item {
        gap: 12px;
        flex-direction: column;
        align-items: start;
      }
    }
  }

  .shared {
    gap: 10px;
    margin-top: 16px;

    h3 {
      font-size: 14px;
      line-height: 20px;
    }

    .shared-links {
      gap: 12px;
    }
  }

  .news-detail-container {
    margin: 24px auto 0;

    .news-time {
      margin-top: 16px;
    }

    .news-detail-images {
      .detail-mainImage-slide {
        height: 350px;

        .swiper-button-prev,
        .swiper-button-next {
          width: 32px;
          height: 32px;
          min-width: 32px;

          &::after {
            --swiper-navigation-size: 14px;
          }
        }
      }

      .detail-thumbImage-slide {
        margin-top: 16px;

        .detail-image {
          width: 120px;
          height: 80px;
        }
      }
    }
  }

  .announcement-detail-container {
    margin: 24px auto 0;

    .announcement-time {
      margin-top: 16px;
    }

    .shared {
      gap: 10px;
      margin-top: 16px;

      h3 {
        font-size: 14px;
        line-height: 20px;
      }

      .shared-links {
        gap: 12px;
      }
    }

    .announcement-detail-images {
      .detail-mainImage-slide {
        height: 350px;

        .swiper-button-prev,
        .swiper-button-next {
          width: 32px;
          height: 32px;
          min-width: 32px;

          &::after {
            --swiper-navigation-size: 14px;
          }
        }
      }

      .detail-thumbImage-slide {
        margin-top: 16px;

        .detail-image {
          width: 120px;
          height: 80px;
        }
      }
    }
  }

  .videos-container {
    margin: 24px auto 0;

    .all-videos {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;

      .video-card {
        gap: 16px;

        .card-image {
          height: 180px;

          .playCover {
            width: 60px;
            height: 60px;
          }
        }

        .card-body {
          .card-title {
            font-size: 16px;
            height: auto;
            display: block;
            overflow: inherit;
          }

          .card-description {
            height: auto;
            display: block;
            overflow: initial;
          }
        }
      }
    }
  }

  .events-container {
    margin: 24px auto 0;

    .all-events {
      .event-item {
        gap: 16px;
        flex-direction: column-reverse;

        .item-body {
          gap: 8px;
          flex-direction: column;

          .event-time {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #787878;
          }

          .body-main {
            padding-bottom: 16px;

            .event-title {
              font-size: 16px;
              line-height: 28px;
              height: 56px;
            }

            .short-description {
              height: 40px;
              -webkit-line-clamp: 2;
            }

            .detail-link {
              margin-top: 12px;
            }
          }
        }

        .item-image {
          min-width: 0;
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .event-detail-container {
    margin: 24px auto 0;

    .event-time {
      margin-top: 16px;
    }

    .shared {
      gap: 10px;
      margin-top: 16px;

      h3 {
        font-size: 14px;
        line-height: 20px;
      }

      .shared-links {
        gap: 12px;
      }
    }

    .event-detail-images {
      .detail-mainImage-slide {
        height: 350px;

        .swiper-button-prev,
        .swiper-button-next {
          width: 32px;
          height: 32px;
          min-width: 32px;

          &::after {
            --swiper-navigation-size: 14px;
          }
        }
      }

      .detail-thumbImage-slide {
        margin-top: 16px;

        .detail-image {
          width: 120px;
          height: 80px;
        }
      }
    }
  }

  .conferences-container {
    margin: 24px auto 0;

    .all-conferences {
      .conference-item {
        gap: 16px;
        flex-direction: column-reverse;

        .item-body {
          gap: 8px;
          flex-direction: column;

          .conference-time {
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #787878;
          }

          .body-main {
            padding-bottom: 16px;

            .conference-title {
              font-size: 16px;
              line-height: 28px;
              height: 56px;
            }

            .short-description {
              height: 40px;
              -webkit-line-clamp: 2;
            }

            .detail-link {
              margin-top: 12px;
            }
          }
        }

        .item-image {
          min-width: 0;
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .conference-detail-container {
    margin: 24px auto 0;

    .conference-time {
      margin-top: 16px;
    }

    .shared {
      gap: 10px;
      margin-top: 16px;

      h3 {
        font-size: 14px;
        line-height: 20px;
      }

      .shared-links {
        gap: 12px;
      }
    }

    .conference-detail-images {
      .detail-mainImage-slide {
        height: 350px;

        .swiper-button-prev,
        .swiper-button-next {
          width: 32px;
          height: 32px;
          min-width: 32px;

          &::after {
            --swiper-navigation-size: 14px;
          }
        }
      }

      .detail-thumbImage-slide {
        margin-top: 16px;

        .detail-image {
          width: 120px;
          height: 80px;
        }
      }
    }
  }

  .articles-container {
    margin: 24px auto 0;

    .all-articles {
      gap: 16px;

      .article-item {
        padding: 24px 20px;

        .artice-type {
          padding: 8px 12px;
        }

        .article-bottom {
          flex-direction: column;
          align-items: start;
        }
      }
    }
  }

  .contactInfo-container {
    margin: 24px auto 0;

    .contactInfo-boxes {
      gap: 16px;

      .contactInfo-box {
        .contactInfo-link {
          font-size: 14px;
          line-height: 20px;

          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
        }
      }
    }

    .map {
      margin-top: 24px;
      height: 340px;
    }
  }

  .writeUs-container {
    margin: 24px auto 0;

    .contact-form {
      margin-top: 16px;
      padding: 0;
      gap: 12px;
      border: none;
      box-shadow: none;

      .form-items {
        gap: 12px;
        grid-template-columns: repeat(1, 1fr);
      }

      .submit-form {
        max-width: 100%;
        padding: 12px;
      }
    }
  }

  .faq-container {
    margin: 24px auto 0;

    .faq-main {
      flex-direction: column;

      .faq-description {
        max-width: 100%;
      }
    }
  }

  .training-container {
    margin: 24px auto 0;

    .upcoming-training-programs {
      margin-top: 20px;

      .section-title {
        font-size: 16px;
      }

      .programs {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
    }

    .trainings {
      grid-template-columns: repeat(2, 1fr);

      .training-card {
        .card-image {
          height: 150px;
        }

        .card-body {
          .card-title {
            font-size: 16px;
            line-height: 28px;
          }
        }
      }
    }
  }

  .training-detail-modal {
    .training-detail {
      max-width: 100%;

      .training-title {
        font-size: 18px;
      }

      .training-detail-main {
        gap: 16px;
        flex-direction: column;

        .training-detail-image {
          max-width: 100%;
          height: auto;
        }

        .training-detail-time {
          max-width: 100%;
          height: auto;
          gap: 16px;
        }
      }
    }
  }

  .electron-learn-container {
    margin: 24px auto 0;

    .platform-search {
      gap: 16px;

      .searchProgramBtn {
        min-width: 144px;
        width: 144px;
      }
    }

    .learn-courses {
      grid-template-columns: repeat(2, 1fr);

      .course-card {
        gap: 16px;

        .card-image {
          height: 180px;
        }

        .card-body {
          .card-title {
            font-size: 16px;
            height: auto;
            display: block;
            overflow: inherit;
          }

          .card-description {
            height: auto;
            display: block;
            overflow: initial;
          }
        }
      }
    }
  }

  .course-detail-container {
    margin: 24px auto 0;

    .course-detail {
      .course-detail-main {
        .detail-video {
          height: 350px;
        }

        .lesson-name {
          margin-top: 16px;
        }

        .lesson-pagination {
          a {
            gap: 8px;
            padding: 10px 12px;
            font-size: 14px;
            line-height: 20px;

            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
        }
      }
    }
  }

  .quiz-container {
    margin: 24px auto 0;

    .quiz-start {
      flex-direction: column;
      align-items: start;
      gap: 16px;

      .total-time {
        width: 100%;
        padding: 8px;
      }

      .quiz-start-btn {
        width: 100%;
        padding: 12px 16px;
      }
    }

    .remaining-time {
      padding: 8px;
    }

    .quizs {
      .finish-exam {
        width: 100%;
        margin-top: 30px;
      }
    }

    .exam-result {
      padding: 8px;
    }
  }

  .journal-container {
    margin: 24px auto 0;

    .journal-main {
      grid-template-columns: repeat(1, 1fr);

      .journal-cover {
        width: 100%;
        height: 400px;
        min-width: 0;

        img {
          max-width: 230px;
          height: 286px;
        }
      }

      .journal-links-box {
        max-width: 100%;
      }
    }

    .last-articles-container {
      margin-top: 24px;

      .last-articles {
        gap: 16px;

        .article-item {
          padding: 24px 20px;

          .artice-type {
            padding: 8px 12px;
          }

          .article-bottom {
            flex-direction: column;
            align-items: start;
          }
        }
      }
    }
  }

  .journal-general-texts {
    margin: 24px auto 0;
  }

  .journal-archive-container {
    margin: 24px auto 0;

    .journal-archive {
      gap: 30px;
    }
  }

  .journal-number-container {
    margin: 24px auto 0;

    .articles-of-journal-number {
      gap: 16px;

      .article-item {
        padding: 24px 20px;

        .artice-type {
          padding: 8px 12px;
        }

        .article-bottom {
          flex-direction: column;
          align-items: start;
        }
      }
    }
  }

  .login-container {
    margin: 24px auto 0;

    .login-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }

      .loginBtn {
        padding: 12px 30px;
      }
    }
  }

  .forget-password-container {
    margin: 24px auto 0;
    min-height: 0;

    .forget-password-form {
      flex-direction: column;
      align-items: start;

      .forgetPasswordBtn {
        padding: 12px 20px;
      }
    }
  }

  .forget-success-modal {
    .forget-success {
      max-width: 350px;

      .icon {
        min-width: 90px;
        width: 90px;
        height: 90px;
      }

      p {
        font-size: 16px;
        line-height: 24px;
      }
    }
  }

  .updatePassword-container {
    margin: 24px auto 0;
    min-height: 0;

    .updatePassword-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }

      .updatePasswordBtn {
        padding: 12px 20px;
      }
    }
  }

  .dashboard-container {
    margin: 24px auto 0;

    .dashboard-personal-info {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }

      .change-password {
        margin-top: 20px;

        .change-password-title {
          font-size: 16px;
          line-height: 24px;
        }

        .form-items {
          margin-top: 16px;
        }

        .forget-password-link {
          margin-left: 0;
        }
      }

      .submitForm {
        padding: 10px;
        margin-left: 0;
      }
    }

    .dashboard-exam-result {
      .exam-table {
        margin-top: 24px;

        table {
          thead {
            tr {
              th {
                padding: 10px 16px;
              }
            }
          }

          tbody {
            tr {
              td {
                padding: 16px;
                min-width: 200px;
                max-width: 220px;
              }
            }
          }
        }
      }
    }

    .dashboard-my-courses {
      .my-courses-list {
        margin-top: 24px;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        .my-course-card {
          gap: 16px;

          .card-image {
            height: 242px;
          }
        }
      }
    }
  }

  .apply-training-container {
    margin: 24px auto 0;

    .apply-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
      }

      .applyBtn {
        margin-top: 24px;
        padding: 12px;
      }
    }
  }

  .apply-mediation-training-container {
    margin: 24px auto 0;

    .apply-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
      }

      .upload-documents {
        gap: 16px;

        .upload-document {
          gap: 12px;
          padding: 12px;

          .upload-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;

            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }

          .upload-document-body {
            gap: 4px;

            .upload-document-title {
              font-size: 12px;
              line-height: 18px;
            }

            .upload-document-subTitle {
              font-size: 10px;
              line-height: 14px;
              color: #787878;
            }

            .addedFile {
              gap: 8px;

              .file-name {
                font-size: 12px;
                line-height: 18px;
              }

              .removeFile {
                width: 18px;
                height: 18px;
                min-width: 18px;

                img {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
      }

      .applyBtn {
        margin-top: 24px;
        padding: 12px;
      }
    }
  }

  .apply-expert-training-container {
    margin: 24px auto 0;

    .paper-application {
      margin-top: 20px;

      .application-to-address {
        margin-left: 0;
        max-width: 100%;
        font-size: 15px;
        line-height: 22px;
      }

      .application-from-who {
        gap: 8px;
        width: 100%;
        margin-left: 0;

        p {
          font-size: 14px;
          line-height: 20px;
        }

        .fullname {
          min-width: 0;
          width: 100%;
          font-size: 12px;
          line-height: 14px;
          height: 14px;
        }

        span {
          width: 100%;
          bottom: -16px;
          left: 0;
          text-align: center;
          transform: translateX(0);
          font-size: 12px;
          line-height: 14px;
        }
      }

      .application-title {
        margin-top: 64px;
      }

      .application-text {
        margin-top: 20px;
        width: 100%;
      }

      .application-contact {
        margin-top: 30px;
        width: 100%;

        .application-contact-title {
          font-size: 14px;
          line-height: 24px;
        }

        .contact-items {
          margin-top: 20px;
          gap: 16px;

          .contact-item {
            gap: 8px;

            p {
              font-size: 14px;
              line-height: 24px;
            }

            span {
              font-size: 12px;
              line-height: 14px;
              height: 14px;
              min-width: 140px;
            }
          }
        }
      }

      .application-date {
        gap: 8px;
        margin-top: 50px;

        p {
          font-size: 14px;
          line-height: 20px;
        }

        span {
          font-size: 12px;
          line-height: 14px;
          height: 14px;
        }
      }
    }

    .apply-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
      }

      .upload-documents {
        gap: 16px;

        .upload-document {
          gap: 12px;
          padding: 12px;

          .upload-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;

            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }

          .upload-document-body {
            gap: 4px;

            .upload-document-title {
              font-size: 12px;
              line-height: 18px;
            }

            .upload-document-subTitle {
              font-size: 10px;
              line-height: 14px;
              color: #787878;
            }

            .addedFile {
              gap: 8px;

              .file-name {
                font-size: 12px;
                line-height: 18px;
              }

              .removeFile {
                width: 18px;
                height: 18px;
                min-width: 18px;

                img {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
      }

      .applyBtn {
        margin-top: 24px;
        padding: 12px;
      }
    }
  }
}

@media only screen and (max-width: 575px) {
  .home-hero-section {
    .home-hero-swiper {
      .hero-item {
        height: 430px;
      }
    }
  }

  .home-news-container {
    .home-news-cards {
      .news-card {
        .card-image {
          height: 220px;
        }
      }
    }
  }

  .home-events-container {
    .home-events-cards {
      .event-cards-list {
        .home-event-card {
          .card-image {
            height: 192px;
          }
        }
      }
    }
  }

  .home-media-container {
    .home-media-cards {
      .media-cards-list {
        .home-media-card {
          .card-image {
            height: 192px;
          }
        }
      }
    }
  }

  .leadership-container {
    .leadership {
      .leadership-item {
        gap: 16px;

        .leaders {
          grid-template-columns: repeat(1, 1fr);

          .leader-card {
            padding-bottom: 24px;
            border-bottom: 1px solid #f2f2f2;

            &:last-child {
              padding-bottom: 0;
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  .news-detail-container {
    .news-detail-images {
      .detail-mainImage-slide {
        height: 260px;
      }
    }
  }

  .announcement-detail-container {
    .announcement-detail-images {
      .detail-mainImage-slide {
        height: 260px;
      }
    }
  }

  .videos-container {
    .all-videos {
      grid-template-columns: repeat(1, 1fr);

      .video-card {
        .card-image {
          height: 200px;
        }
      }
    }
  }

  .event-detail-container {
    .event-detail-images {
      .detail-mainImage-slide {
        height: 260px;
      }
    }
  }

  .conference-detail-container {
    .conference-detail-images {
      .detail-mainImage-slide {
        height: 260px;
      }
    }
  }

  .contactInfo-container {
    .map {
      height: 200px;
    }
  }

  .training-container {
    .upcoming-training-programs {
      .programs {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    .trainings {
      grid-template-columns: repeat(1, 1fr);

      .training-card {
        .card-image {
          height: auto;
        }

        .card-body {
          .card-title {
            height: auto;
            max-height: 56px;
          }

          .card-subTitle {
            height: auto;
            max-height: 40px;
          }

          .short-description {
            height: auto;
            max-height: 36px;
          }
        }
      }
    }
  }

  .electron-learn-container {
    .platform-search {
      flex-direction: column;

      .searchProgramBtn {
        min-width: 0;
        width: 100%;
      }
    }

    .learn-courses {
      grid-template-columns: repeat(1, 1fr);

      .course-card {
        .card-image {
          height: 200px;
        }
      }
    }
  }

  .course-detail-container {
    .course-detail {
      .course-detail-main {
        .detail-video {
          height: 250px;
        }
      }
    }
  }

  .dashboard-container {
    .dashboard-my-courses {
      .my-courses-list {
        grid-template-columns: repeat(1, 1fr);

        .my-course-card {
          .card-image {
            height: auto;
          }
        }
      }
    }
  }
}