/* Root */
:root {
  --theme-primary-color: #27AE60;
  --theme-secondary-color: #EC8E11;
  --theme-bg-page: #FAFAFA;
  --bg-image-color: #D9D9D9;
  --plyr-color-main: #EC8E11;
  --page-content-wrapper: 3.75rem;

  @media (min-width: 1400px) {
    --page-content-wrapper: 6.25rem;
  }
}

/* Theme */
.theme-bg-primary {
  background-color: var(--theme-primary-color);
}

.theme-bg-secondary {
  background-color: var(--theme-secondary-color);
}

.theme-text-primary {
  color: var(--theme-primary-color);
}

.theme-text-secondary {
  color: var(--theme-secondary-color);
}

/* Layouts */
.navbar-wrapper,
.sitemap-wrapper,
.copyright-wrapper {
  --padding-navbar-wrapper: 1.5rem;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.75rem calc(var(--padding-navbar-wrapper)* .5);

  @media (min-width: 768px) {
    max-width: 720px;
  }

  @media (min-width: 992px) {
    max-width: 960px;
  }

  @media (min-width: 1200px) {
    max-width: 1140px;
  }

  @media (min-width: 1400px) {
    max-width: 1320px;
  }
}

.sitemap-wrapper {
  max-width: 1400px;

  @media (min-width: 768px) {
    max-width: 720px;
  }

  @media (min-width: 992px) {
    max-width: 960px;
  }

  @media (min-width: 1200px) {
    max-width: 1140px;
  }

  @media (min-width: 1400px) {
    max-width: 1320px;
  }

  @media (min-width: 1600px) {
    max-width: 1400px;
  }
}

/* Header Top */
.header-top {
  .navbar-top {
    color: white;
    background-color: var(--theme-primary-color);

    .navbar-wrapper {

      .navbar-contact,
      .navbar-social {
        list-style-type: none;
        display: flex;
        gap: 1.375rem;
      }

      .navbar-contact {
        .item {
          a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
          }
        }
      }
    }
  }
}

/* Header */
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* overflow: hidden; */
  z-index: 100;
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

  .navbar-main {
    --navbar-main-height: 70px;
    height: var(--navbar-main-height);
    transition: height 0.3s ease;

    @media (min-width: 768px) {
      --navbar-main-height: 80px;
    }

    @media (min-width: 992px) {
      --navbar-main-height: 90px;
    }

    @media (min-width: 1200px) {
      --navbar-main-height: 108px;
    }

    @media (min-width: 1400px) {}

    .navbar-wrapper {
      padding-top: 0;
      padding-bottom: 0;
      height: inherit;

      .navbar-brand {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        height: inherit;

        img {
          height: 100%;
          width: auto;
          max-width: 100%;
          object-fit: contain;
        }
      }

      .navbar-nav {

        .navbar-menu {
          list-style-type: none;
          display: flex;
          gap: 1.75rem;

          .nav-item {
            position: relative;
            height: var(--navbar-main-height);
            display: flex;
            align-items: center;

            .nav-link {
              font-size: 1rem;
              font-weight: 500;
              text-wrap: nowrap;

              @media (min-width: 1400px) {
                font-size: 1.125rem;
              }
            }

            .nav-link.dropdown-toggle::after {
              content: "+";
              border: none;
              vertical-align: middle;
              color: var(--theme-secondary-color);
              margin-left: 0;
            }

            .dropdown-menu {
              .dropdown-item:hover {
                color: white;
                background-color: var(--theme-primary-color);
              }
            }
          }

          .nav-item.active {
            .nav-link {
              font-weight: 600;
              color: var(--theme-secondary-color);
            }
          }

          .nav-item.active::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border-top: 4px solid var(--theme-secondary-color);
            border-radius: 4px;
          }

          .navbar-toggler {
            font-size: 1.25rem;
            line-height: normal;
            padding-left: 1rem;
            padding-right: 1rem;

            @media (min-width: 768px) {
              padding-left: 0;
              padding-right: 0;
            }
          }
        }
      }
    }
  }
}

header.scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  .navbar-main {
    --navbar-main-height: 60px;

    @media (min-width: 768px) {
      --navbar-main-height: 80px;
    }

    @media (min-width: 992px) {}

    @media (min-width: 1200px) {}

    @media (min-width: 1400px) {}
  }
}

/* Offcanvas */
.offcanvas {
  .offcanvas-body {
    .navbar-nav {
      .nav-item {
        border-bottom: 1px solid var(--theme-secondary-color);

        .nav-link {
          font-size: 1.125rem;
          position: relative;
          padding: 0.75rem 0;
        }

        .nav-link:focus-visible {
          box-shadow: none;
        }

        .nav-link.dropdown-toggle::after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateX(-50%);
        }

        .dropdown-menu {
          position: relative !important;
          left: 0 !important;
          right: 0 !important;
          transform: unset !important;
          border: none;
          list-style-type: disclosure-closed;
          margin-left: 1.25rem !important;

          .dropdown-item {
            padding: 0.5rem 0;
          }

          .dropdown-item:active {
            color: black;
            background-color: transparent;
          }
        }
      }

      .nav-item:last-child {
        border-bottom: none;
      }
    }
  }
}

/* Footer */
footer {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  .sitemap {
    .sitemap-wrapper {
      padding-top: 3.125rem;
      padding-bottom: 3.75rem;

      @media (min-width: 1400px) {
        padding-top: 3.75rem;
        padding-bottom: 4.375rem;
      }

      .row {
        .col {
          margin-bottom: 1.875rem;

          @media (min-width: 1400px) {
            margin-bottom: 0;
          }
        }

        .col:last-child {
          margin-bottom: 0;
        }
      }

      .sitemap-info {
        .sitemap-logo {
          height: 4.375rem;
          width: auto;
          max-width: 100%;
          object-fit: contain;
        }

        .sitemap-detail {
          color: #555555;
          margin-top: 1rem;
          line-height: 1.375;
        }

        .sitemap-social {
          list-style-type: none;
          display: flex;
          gap: 1.375rem;

          .item {
            a {
              color: var(--theme-secondary-color);
            }
          }
        }
      }

      .sitemap-nav {
        .nav-menu {
          list-style-type: none;

          .nav-item {
            padding: 0.25rem 0;
            position: relative;
            text-wrap: nowrap;
            transition: color 0.5s ease;
          }

          .nav-item::before {
            content: "";
            display: inline-block;
            width: 0;
            border-bottom: 3px solid var(--theme-secondary-color);
            border-radius: 3px;
            margin-right: 0.25rem;
            transition: width 0.5s ease;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
          }

          .nav-item:hover::before {
            width: 1.875rem;
          }

          .nav-item:hover {
            color: var(--theme-secondary-color);
          }
        }
      }

      .contact-lists {
        list-style-type: none;
        margin: 0;
        padding: 0;

        .contact-item {
          padding: 0.375rem 0;

          .item-link {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            column-gap: 1rem;
            font-size: 1rem;

            .icon {
              width: 34px;
              height: 34px;
              border-radius: 34px;
              color: white;
              background-color: var(--theme-secondary-color);
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .title {
              flex: 1;
            }
          }
        }
      }

      .form-send-message {

        .input-field:has(input[required]) label:after,
        .input-field:has(textarea[required]) label:after {
          content: '*';
          color: red;
          font-size: 1rem;
          margin-left: 2px;
          position: relative;
          display: inline;
        }

        .form-control:focus {
          border-color: var(--theme-primary-color);
          box-shadow: 0 0 0 .25rem rgba(39, 174, 96, .25);
        }

        .btn-submit {
          width: 100%;
          color: white;
          background-color: var(--theme-secondary-color);
        }
      }
    }
  }
}

/* Blockquote */
blockquote {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
  border-left: 5px solid var(--theme-primary-color);
}

/* Button */
.btn-hover {
  transition: 300ms ease;
}

.btn-hover:hover {
  transform: scale(1.15);
}

/* Line */
.theme-line-header {
  position: relative;
  width: fit-content;
}

.theme-line-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.625rem;
  width: 3.75rem;
  height: 3px;
  background-color: var(--theme-secondary-color);
  border-radius: 3px;
}

.theme-line-header.line-bg-primary::before {
  background-color: var(--theme-primary-color);
}

.theme-line-header.line-center {
  margin: 0 auto;
}

.theme-line-header.line-center::before {
  left: 50%;
  transform: translateX(-50%);
}

/* Page Loding */
.loading {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.90);
  /* backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); */
  position: fixed;
  z-index: 9999;
  text-align: center;
  vertical-align: middle;
}

.loading:after {
  content: "";
  background-image: url('/public/img/loading/loadding_dual-ball.gif');
  background-repeat: no-repeat;
  background-size: contain;
  width: 150px;
  height: 150px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Section */
.section-partnership {
  padding: 6.25rem 0;
  padding-bottom: 0;

  .partnership-lists {
    margin-top: 2.5rem;

    .splide__track {
      .splide__list {
        .splide__slide {
          .item-partnership {
            width: 70px;
            height: 70px;
            object-fit: contain;
            display: block;
            margin: 0 auto;
            /* padding: 0.875rem; */

            @media (min-width: 768px) {
              width: 100px;
              height: 100px;
            }

            @media (min-width: 992px) {
              /*  */
            }

            @media (min-width: 1200px) {
              /*  */
            }

            @media (min-width: 1400px) {
              /*  */
            }

            /* // */
          }
        }
      }
    }

    .splide__pagination {
      position: static;
      margin-top: 2.5rem;

      .splide__pagination__page.is-active {
        background: var(--theme-secondary-color);
        opacity: 1;
      }
    }
  }
}

/* Card */
.card-knowledge {
  height: 340px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
  -webkit-box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
  overflow: hidden;

  @media (min-width: 768px) {
    height: 380px;
  }

  @media (min-width: 992px) {
    height: 470px;
  }

  @media (min-width: 1200px) {
    height: 530px;
  }

  @media (min-width: 1400px) {
    height: 594px;
  }

  /* // */

  .card-image {
    width: 100%;
    height: 105px;
    position: relative;
    overflow: hidden;
    background-color: #D9D9D9;

    @media (min-width: 768px) {
      height: 136px;
    }

    @media (min-width: 992px) {
      height: 186px;
    }

    @media (min-width: 1200px) {
      height: 220px;
    }

    @media (min-width: 1400px) {
      height: 250px;
    }

    /* // */

    .card-type {
      font-size: 0.75rem;
      color: white;
      background-color: var(--theme-primary-color);
      position: absolute;
      top: 0.625rem;
      right: 0.625rem;
      padding: 0.125rem 0.75rem;
      border-radius: 5px;
      z-index: 2;

      @media (min-width: 768px) {
        font-size: 0.875rem;
        padding: 0.25rem 0.875rem;
        top: 0.625rem;
        right: 0.625rem;
      }

      @media (min-width: 992px) {
        font-size: 0.875rem;
        padding: 0.375rem 1rem;
        top: 0.75rem;
        right: 0.75rem;
      }

      @media (min-width: 1200px) {
        font-size: 0.875rem;
        padding: 0.5rem 1.125rem;
        top: 1rem;
        right: 1rem;
      }

      @media (min-width: 1400px) {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
        top: 1.25rem;
        right: 1.25rem;
      }

      /* // */
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
    }
  }

  .card-body {
    --padding-body-card-knowledge: 0.875rem;
    position: relative;
    padding: var(--padding-body-card-knowledge);

    @media (min-width: 768px) {
      --padding-body-card-knowledge: 1rem;
    }

    @media (min-width: 992px) {
      --padding-body-card-knowledge: 1.25rem;
    }

    @media (min-width: 1200px) {
      --padding-body-card-knowledge: 1.625rem;
    }

    @media (min-width: 1400px) {
      --padding-body-card-knowledge: 1.875rem;
    }

    /* // */

    .card-title {
      font-size: 1rem;
      line-height: 1.25;
      height: 2.5rem;
      margin: 0;

      @media (min-width: 768px) {
        /*  */
      }

      @media (min-width: 992px) {
        font-size: 1.125rem;
        line-height: 1.333;
        height: 3rem;
      }

      @media (min-width: 1200px) {
        font-size: 1.25rem;
        line-height: 1.4;
        height: 3.5rem;
      }

      @media (min-width: 1400px) {
        font-size: 1.375rem;
        line-height: 1.27;
        height: 3.5rem;
      }

      /* // */
    }

    .card-brief {
      font-size: 0.75rem;
      line-height: 1.5;
      height: 5.625rem;
      color: #555555;
      margin: 0;
      margin-top: 0.75rem;

      @media (min-width: 768px) {
        /*  */
      }

      @media (min-width: 992px) {
        font-size: 0.875rem;
        line-height: 1.428;
        height: 6.25rem;
        margin-top: 0.875rem;
      }

      @media (min-width: 1200px) {
        /*  */
      }

      @media (min-width: 1400px) {
        font-size: 0.9375rem;
        line-height: 1.467;
        height: 6.875rem;
        margin-top: 0.875rem;
      }

      /* // */
    }

    .btn {
      font-size: 0.875rem;
      color: white;
      text-align: center;
      background-color: var(--theme-secondary-color);
      position: absolute;
      inset: auto var(--padding-body-card-knowledge) var(--padding-body-card-knowledge);
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
      transition: 500ms ease;

      @media (min-width: 768px) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

      @media (min-width: 992px) {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
      }

      @media (min-width: 1200px) {
        font-size: 1rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
      }

      @media (min-width: 1400px) {
        font-size: 1rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
      }

      /* // */
    }

    .btn:hover {
      transform: scale(1.03);
    }
  }
}

.card-knowledge:hover .card-image img,
.card-knowledge:focus .card-image img {
  transform: scale(1.15);
  transition: all .5s;
}

/* Banner */
.banner-page.theme-banner-page {
  width: 100%;
  height: fit-content;
  min-height: 144px;
  position: relative;
  background-color: var(--bg-image-color);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 1.5rem 0 0;
  overflow: hidden;

  @media (min-width: 768px) {
    height: 180px;
    padding: 2rem 0 0;
  }

  @media (min-width: 992px) {
    height: 200px;
    padding: 2.375rem 0 0;
  }

  @media (min-width: 1200px) {
    height: 250px;
    padding: 3.125rem 0 0;
  }

  @media (min-width: 1400px) {
    height: 310px;
    padding: 4.375rem 0 0;
  }

  /* // */

  .container {
    min-height: inherit;
    z-index: 3;

    .banner-title {
      width: 90%;
      color: white;

      @media (min-width: 768px) {
        width: 80%;
      }

      @media (min-width: 992px) {
        width: 70%;
      }

      @media (min-width: 1200px) {
        /*  */
      }

      @media (min-width: 1400px) {
        width: 80%;
      }

      /* // */
    }

    .breadcrumb {
      position: absolute;
      left: calc(1.5rem * .5);
      bottom: 1.125rem;
      flex-wrap: nowrap;

      @media (min-width: 768px) {
        bottom: 1.5rem;
      }

      .breadcrumb-item {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--theme-secondary-color);
        text-wrap: nowrap;

        @media (min-width: 768px) {
          font-size: 1.125rem;
        }
      }

      .breadcrumb-item::before {
        content: var(--bs-breadcrumb-divider, ">>");
        font-weight: 500;
        color: var(--theme-secondary-color);
      }

      .breadcrumb-item:first-child::before {
        content: none;
      }

      .breadcrumb-item.active {
        font-weight: 600;
        color: white;
      }
    }
  }

  .banner-bg-gradient {
    position: absolute;
    inset: 0 0 0 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
  }
}

/* Modal */
.modal-backdrop {
  --bs-backdrop-opacity: 0.75;
}

/* Pages */
.home-page {
  .carousel-highlight {
    .carousel-inner {
      .carousel-item {
        img {
          max-height: 930px;
          object-fit: cover;
        }
      }
    }

    .carousel-indicators {
      z-index: 3;
      bottom: 10%;

      .active {
        background-color: var(--theme-secondary-color);
      }
    }

    /* .carousel-indicators [data-bs-target] {
      width: 8px;
      height: 8px;
    } */

    .carousel-bg-gradient {
      position: absolute;
      height: 30%;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background-image: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 100%);
    }
  }

  .modal-video-highlight {
    .modal-content {
      background: transparent;

      .btn-close {
        position: absolute;
        bottom: 100%;
        left: 100%;
        margin: 0.5rem;
      }

      .modal-body {
        border: none;
        border-radius: 10px;
        overflow: hidden;
      }
    }
  }

  .page-content {
    background-image: url("/public/img/background/bg_page-content_home-page.svg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: 100% auto; */
    /* background-position: center -2%; */

    .section-intro {
      --section-intro-height: 230px;
      position: relative;
      z-index: 2;
      margin-top: 1.625rem;
      padding-bottom: 0;

      @media (min-width: 768px) {
        --section-intro-height: 400px;
        margin-top: 2.125rem;
      }

      @media (min-width: 992px) {
        --section-intro-height: 330px;
        margin-top: -2.5rem;
        padding-bottom: var(--section-intro-height);
      }

      @media (min-width: 1200px) {
        --section-intro-height: 330px;
      }

      @media (min-width: 1400px) {
        --section-intro-height: 370px;
      }

      /* // */

      .row {
        --padding-section-intro: 0;
        margin-left: calc(var(--padding-section-intro) * -1);
        margin-right: calc(var(--padding-section-intro) * -1);
        position: relative;
        border-radius: 10px;
        overflow: hidden;

        @media (min-width: 768px) {}

        @media (min-width: 992px) {
          position: absolute;
          border-radius: 0;
        }

        /* // */
      }

      .row>* {
        padding-left: var(--padding-section-intro);
        padding-right: var(--padding-section-intro);
      }

      .section-video {
        border-radius: 0;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        width: 100%;
        height: var(--section-intro-height);
        background-color: var(--bg-image-color);

        @media (min-width: 768px) {}

        @media (min-width: 992px) {
          border-radius: 10px 0 0 10px;
        }

        /* // */

        .video-preview {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .icon-play {
          width: 200px;
          height: 200px;
          object-fit: contain;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          opacity: .6;
          transition: opacity 0.3s ease;

          @media (min-width: 768px) {
            width: 300px;
            height: 300px;
          }

          @media (min-width: 992px) {
            width: 280px;
            height: 280px;
          }

          @media (min-width: 1200px) {
            width: 300px;
            height: 300px;
          }

          @media (min-width: 1400px) {
            width: 340px;
            height: 340px;
          }

          /* // */
        }
      }

      .section-video:hover {
        .icon-play {
          opacity: 1;
        }
      }

      .section-info {
        --padding-section-info-intro-x: 1.875rem;
        --padding-section-info-intro-y: 1.875rem;
        height: 100%;
        color: white;
        padding: var(--padding-section-info-intro-x) var(--padding-section-info-intro-y);
        position: relative;

        @media (min-width: 768px) {
          --padding-section-info-intro-x: 1.625rem;
          --padding-section-info-intro-y: 1.625rem;
        }

        @media (min-width: 992px) {
          --padding-section-info-intro-x: 1.75rem;
          --padding-section-info-intro-y: 1.75rem;
        }

        @media (min-width: 1200px) {
          --padding-section-info-intro-x: 1.875rem;
          --padding-section-info-intro-y: 1.875rem;
        }

        @media (min-width: 1400px) {
          --padding-section-info-intro-x: 2.5rem;
          --padding-section-info-intro-y: 3.125rem;
        }

        /* // */

        .section-title {
          /* font-size: 1rem; */

          @media (min-width: 768px) {
            font-size: 1.5rem;
          }

          @media (min-width: 992px) {
            font-size: 1.375rem;
          }

          @media (min-width: 1200px) {
            font-size: 1.625rem;
          }

          @media (min-width: 1400px) {
            font-size: 1.75rem;
          }

          /* // */
        }

        .section-brief {
          margin-top: 1.875rem;
          line-height: 1.375;
        }

        .btn {
          width: fit-content;
          min-width: 10.625rem;
          max-width: 100%;
          position: relative;
          padding-top: 0.75rem;
          padding-bottom: 0.75rem;

          @media (min-width: 768px) {}

          @media (min-width: 992px) {
            position: absolute;
            left: var(--padding-section-info-intro-y);
            bottom: var(--padding-section-info-intro-x);
          }

          /* // */
        }

        .btn.theme-bg-primary:hover {
          background-color: var(--theme-primary-color);
        }

        .btn.theme-bg-secondary:hover {
          background-color: var(--theme-secondary-color);
        }
      }
    }

    .section-knowledge-highlight {
      padding: 3.875rem 0;

      @media (min-width: 768px) {}

      @media (min-width: 992px) {
        padding: 4.875rem 0;
      }

      @media (min-width: 1200px) {}

      @media (min-width: 1400px) {}

      /* // */

      .section-programes {
        margin-top: 2.875rem;
        margin-bottom: 2.125rem;

        @media (min-width: 768px) {}

        @media (min-width: 992px) {}

        @media (min-width: 1200px) {}

        @media (min-width: 1400px) {
          margin-bottom: 3.125rem;
        }

        /* // */

        .splide {

          .splide__track {
            @media (min-width: 768px) {}

            @media (min-width: 992px) {}

            @media (min-width: 1200px) {}

            @media (min-width: 1400px) {
              padding: 4.125rem !important;
              margin: -4.125rem !important;
            }

            /* // */

            .splide__list {
              .splide__slide {
                .card-knowledge {
                  height: 550px;
                  border: 1px solid #DCDCDC;
                  box-shadow: none;
                  -webkit-box-shadow: none;

                  @media (min-width: 768px) {
                    height: 520px;
                  }

                  @media (min-width: 992px) {
                    height: 490px;
                  }

                  @media (min-width: 1200px) {
                    height: 550px;
                  }

                  @media (min-width: 1400px) {
                    height: 594px;
                    border: none;
                    box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
                    -webkit-box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
                  }

                  /* // */

                  .card-image {
                    height: 250px;

                    @media (min-width: 768px) {
                      height: 210px;
                    }

                    @media (min-width: 992px) {
                      height: 186px;
                    }

                    @media (min-width: 992px) {
                      height: 218px;
                    }

                    @media (min-width: 1400px) {
                      height: 250px;
                    }

                    /* // */

                    .card-type {
                      font-size: 0.875rem;
                      padding: 0.5rem 1.125rem;
                      top: 1.25rem;
                      right: 1.25rem;

                      @media (min-width: 768px) {}

                      @media (min-width: 992px) {}

                      @media (min-width: 1200px) {}

                      @media (min-width: 1400px) {
                        font-size: 0.875rem;
                        padding: 0.625rem 1.25rem;
                        top: 1.25rem;
                        right: 1.25rem;
                      }

                      /* // */
                    }
                  }

                  .card-body {
                    --padding-body-card-knowledge: 1.125rem;

                    .card-title {
                      font-size: 1.25rem;
                      line-height: 1.3;
                      height: 3.25rem;

                      @media (min-width: 768px) {}

                      @media (min-width: 992px) {}

                      @media (min-width: 1200px) {
                        font-size: 1.375rem;
                        line-height: 1.27;
                        height: 3.5rem;
                      }

                      @media (min-width: 1400px) {}

                      /* // */
                    }

                    .card-brief {
                      font-size: 0.875rem;
                      line-height: 1.428;
                      height: 6.25rem;

                      @media (min-width: 768px) {}

                      @media (min-width: 992px) {}

                      @media (min-width: 1200px) {
                        font-size: 0.9375rem;
                        line-height: 1.467;
                        height: 6.875rem;
                      }

                      @media (min-width: 1400px) {}

                      /* // */
                    }
                  }
                }
              }
            }
          }

          .splide__arrows {
            position: relative;
            margin: 0 auto;
            margin-top: 2rem;
            display: flex;
            justify-content: space-between;

            .splide__arrow {
              position: static;
              transform: unset;
              transition: 300ms ease;
            }

            .splide__arrow:hover:not(:disabled) {
              transform: scale(1.125);
              color: white;
              background: var(--theme-secondary-color);
            }
          }

          .splide__pagination {
            .splide__pagination__page.is-active {
              opacity: 1;
              background: var(--theme-secondary-color);
            }
          }
        }
      }
    }

    .section-video {
      .splide {
        .splide__track {
          border-radius: 10px;
          background-color: var(--bg-image-color);

          .splide__slide {
            background-color: white;

            .section-image {
              width: 100%;
              height: 126px;
              overflow: hidden;
              cursor: pointer;
              position: relative;

              @media (min-width: 768px) {
                height: 220px;
              }

              @media (min-width: 992px) {
                height: 296px;
              }

              @media (min-width: 1200px) {
                height: 352px;
              }

              @media (min-width: 1400px) {
                height: 400px;
              }

              /* // */

              .video-title {
                font-size: 1.625rem;
                color: white;
                height: fit-content;
                position: absolute;
                top: 10%;
                left: 3%;
                width: 50%;
                margin: 0;
                z-index: 3;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
                display: none;

                @media (min-width: 768px) {
                  display: -webkit-box;
                  font-size: 1.25rem;
                  width: 60%;
                }

                @media (min-width: 992px) {
                  font-size: 1.375rem;
                  width: 50%;
                }

                @media (min-width: 1200px) {
                  font-size: 1.5rem;
                  width: 50%;
                }

                @media (min-width: 1400px) {
                  font-size: 1.625rem;
                  width: 50%;
                }

                /* // */
              }

              .video-preview {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
              }

              .icon-play {
                width: 200px;
                height: 200px;
                object-fit: contain;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: .6;
                transition: opacity 0.3s ease;
                z-index: 3;

                @media (min-width: 768px) {}

                @media (min-width: 992px) {
                  width: 230px;
                  height: 230px;
                }

                @media (min-width: 1200px) {
                  width: 280px;
                  height: 280px;
                }

                @media (min-width: 1400px) {
                  width: 340px;
                  height: 340px;
                }

                /* // */
              }

              .video-gradient {
                position: absolute;
                inset: 0;
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6));
                z-index: 2;
                opacity: 0.6;
                transition: opacity 1s ease-in-out;
              }
            }

            .section-image:hover {
              .icon-play {
                opacity: 1;
              }

              .video-gradient {
                opacity: 1;
              }
            }
          }
        }

        .splide__arrows {
          --border-splide-arrow-video-color: #DDDDDD;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          margin: 1.5rem 0;
          padding: 1.25rem 0;
          border-top: 2px solid var(--border-splide-arrow-video-color);
          border-bottom: 2px solid var(--border-splide-arrow-video-color);

          @media (min-width: 768px) {}

          @media (min-width: 992px) {}

          @media (min-width: 1200px) {
            margin: 1.75rem 0;
            padding: 1.5rem 0;
          }

          @media (min-width: 1400px) {}

          /* // */

          .splide-control {
            flex: 1;
            display: flex;
            border-right: 2px solid var(--border-splide-arrow-video-color);

            .splide__arrow {
              position: static;
              transform: unset;
              background: transparent;
              width: fit-content;
              height: fit-content;
              opacity: 1;
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 0.875rem;
              color: black;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {
                gap: 1.25rem;
              }

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {}

              /* // */

              .splide-arrow-title {
                width: 85%;
                font-size: 0.875rem;
                margin: 0;
                -webkit-line-clamp: 3;

                @media (min-width: 768px) {
                  width: 80%;
                  font-size: 1rem;
                }

                @media (min-width: 992px) {
                  width: 70%;
                  font-size: 1.125rem;
                }

                @media (min-width: 1200px) {
                  width: 60%;
                  font-size: 1.25rem;
                  -webkit-line-clamp: 2;
                }

                @media (min-width: 1400px) {}

                /* // */
              }
            }
          }

          .splide-control:last-child {
            border-right: none;
          }
        }
      }
    }

    .section-news-highlight {
      padding: 3.875rem 0;

      @media (min-width: 768px) {}

      @media (min-width: 992px) {
        padding: 4.875rem 0;
      }

      @media (min-width: 1200px) {}

      @media (min-width: 1400px) {}

      /* // */

      .section-programes {
        margin-top: 2.875rem;
        margin-bottom: 2.125rem;

        @media (min-width: 768px) {}

        @media (min-width: 992px) {}

        @media (min-width: 1200px) {}

        @media (min-width: 1400px) {
          margin-bottom: 3.125rem;
        }

        .card-news {
          border-radius: 10px;
          overflow: hidden;

          .card-image {
            width: 100%;
            height: 250px;
            position: relative;
            overflow: hidden;
            background-color: var(--bg-image-color);
            border-radius: 10px;

            @media (min-width: 768px) {
              height: 210px;
            }

            @media (min-width: 992px) {
              height: 186px;
            }

            @media (min-width: 1200px) {
              height: 218px;
            }

            @media (min-width: 1400px) {
              height: 250px;
            }

            /* // */

            .card-type {
              font-size: 0.875rem;
              color: white;
              background-color: var(--theme-primary-color);
              position: absolute;
              top: 1.25rem;
              right: 1.25rem;
              padding: 0.5rem 1.125rem;
              border-radius: 5px;
              z-index: 2;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {
                font-size: 0.875rem;
                padding: 0.625rem 1.25rem;
                top: 1.25rem;
                right: 1.25rem;
              }

              /* // */
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              -webkit-transition: all .5s;
              -moz-transition: all .5s;
              -o-transition: all .5s;
              transition: all .5s;
            }
          }

          .card-body {
            position: relative;
            z-index: 3;
            margin-top: -1.875rem;
            margin-right: 1.25rem;
            background-color: white;
            border-radius: 0 10px 0 0;
            padding: 1.875rem 0;
            padding-right: 1.625rem;

            .card-public {
              font-size: 0.875rem;
              margin: 0;
              margin-bottom: 0.25rem;

              i {
                color: var(--theme-secondary-color);
              }

              span {
                color: var(--theme-primary-color);
              }
            }

            .card-title {
              font-size: 1.25rem;
              line-height: 1.3;
              height: 3.25rem;
              margin: 0;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {
                font-size: 1.375rem;
                line-height: 1.27;
                height: 3.5rem;
              }

              @media (min-width: 1400px) {}

              /* // */
            }

            .card-line {
              margin: 1.125rem 0;
              width: 3.75rem;
              border-bottom: 3px solid var(--theme-secondary-color);
              border-radius: 3px;
            }

            .card-brief {
              font-size: 0.875rem;
              line-height: 1.428;
              height: 5rem;
              color: #555555;
              margin: 0;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {
                font-size: 0.9375rem;
                line-height: 1.467;
                height: 5.5rem;
              }

              @media (min-width: 1400px) {}

              /* // */
            }
          }
        }

        .card-news:hover .card-image img,
        .card-news:focus .card-image img {
          transform: scale(1.15);
        }

        .splide__arrows {
          position: relative;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;

          .splide__arrow {
            position: static;
            transform: unset;
            transition: 300ms ease;
          }

          .splide__arrow:hover:not(:disabled) {
            transform: scale(1.125);
            color: white;
            background: var(--theme-secondary-color);
          }
        }

        .splide__pagination {
          .splide__pagination__page.is-active {
            opacity: 1;
            background: var(--theme-secondary-color);
          }
        }
      }
    }

    .section-testimonials {
      padding: 2.5rem 0;
      background-color: #F5F5F5;
      background-repeat: no-repeat;
      background-size: cover;

      @media (min-width: 768px) {}

      @media (min-width: 992px) {}

      @media (min-width: 1200px) {}

      @media (min-width: 1400px) {
        background-size: 100% auto;
      }

      /* // */

      .card-testimonials {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        border-radius: 10px;
        /* overflow: hidden; */

        @media (min-width: 768px) {
          max-width: 550px;
          margin: 0 auto;
        }

        @media (min-width: 992px) {}

        @media (min-width: 1200px) {
          max-width: 100%;
          flex-direction: row;
          border-radius: 0;
        }

        @media (min-width: 1400px) {}

        /* // */

        .card-body {
          --padding-body-card-testimonials: 1.875rem 1.5rem;
          flex: 1;
          max-width: 100%;
          height: fit-content;
          padding: var(--padding-body-card-testimonials);
          margin-right: 0;
          border-radius: 0;
          box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
          -webkit-box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
          background-color: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          position: relative;
          z-index: 2;

          @media (min-width: 768px) {
            --padding-body-card-testimonials: 1.875rem 2.125rem;
          }

          @media (min-width: 992px) {}

          @media (min-width: 1200px) {
            --padding-body-card-testimonials: 2.5rem;
            border-radius: 10px;
            margin-right: calc(var(--padding-body-card-testimonials) * -1);
          }

          @media (min-width: 1400px) {
            --padding-body-card-testimonials: 2.75rem;
            border-radius: 10px;
          }

          /* // */

          .card-detail {
            color: #555555;
            line-height: 1.375;
            margin: 0;
            margin-top: 2rem;
          }

          .card-bottom {
            margin-top: 1.875rem;
            flex-direction: column;

            @media (min-width: 768px) {
              flex-direction: row;
            }

            @media (min-width: 992px) {}

            @media (min-width: 1200px) {
              flex-direction: row;
            }

            @media (min-width: 1400px) {}

            /* // */

            .card-profile {
              gap: 0.875rem;
              align-items: center;

              .profile-avata {
                width: 50px;
                height: 50px;
                border-radius: 50px;
                object-fit: cover;
                display: block;
                background-color: #D9D9D9;
              }
            }

            .card-control {
              width: 100%;
              margin-top: 2rem;
              justify-content: space-between;
              column-gap: 1.375rem;

              @media (min-width: 768px) {
                width: fit-content;
                margin-top: 0;
              }

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {
                width: fit-content;
                margin-top: 0;
              }

              @media (min-width: 1400px) {}

              /* // */

              .btn {
                width: 50px;
                height: 50px;
                color: black;
                border: 1px solid #DDDDDD;
                border-radius: 50px;
                transition: 300ms ease;
              }

              .btn:hover {
                border: 1px solid var(--theme-secondary-color);
                background-color: var(--theme-secondary-color);
                color: white;
                transform: scale(1.15);
              }

              .btn:disabled {
                opacity: 0.4;
              }
            }
          }
        }

        .card-image {
          border-radius: 0;
          overflow: hidden;
          width: 100%;
          max-width: 100%;
          height: 310px;

          @media (min-width: 768px) {
            height: 485px;
          }

          @media (min-width: 992px) {}

          @media (min-width: 1200px) {
            border-radius: 10px;
            width: 450px;
            height: 485px;
          }

          @media (min-width: 1400px) {
            width: 600px;
            height: 530px;
          }

          /* // */

          img {
            width: inherit;
            height: inherit;
            display: block;
            object-fit: cover;
          }
        }
      }
    }
  }
}

/* courses-all-page */
.courses-all-page {
  background-color: var(--theme-bg-page);
}

/* knowledge-all-page */
.knowledge-all-page {
  background-color: var(--theme-bg-page);

  .page-content {
    padding: var(--page-content-wrapper) 0;
    /* padding-bottom: 0; */

    .section-articles {
      .row {
        --padding-knowledge-articles-x: 0.375rem;
        --padding-knowledge-articles-y: 0.375rem;
        margin: calc(var(--padding-knowledge-articles-y) * -1) calc(var(--padding-knowledge-articles-x) * -1);

        @media (min-width: 768px) {
          --padding-knowledge-articles-x: 0.625rem;
          --padding-knowledge-articles-y: 0.625rem;
        }

        @media (min-width: 992px) {
          --padding-knowledge-articles-x: 0.75rem;
          --padding-knowledge-articles-y: 0.75rem;
        }

        @media (min-width: 1200px) {
          --padding-knowledge-articles-x: 0.875rem;
          --padding-knowledge-articles-y: 0.875rem;
        }

        @media (min-width: 1400px) {
          --padding-knowledge-articles-x: 0.9375rem;
          --padding-knowledge-articles-y: 0.9375rem;
        }
      }

      .row>* {
        padding: var(--padding-knowledge-articles-y) var(--padding-knowledge-articles-x);
      }

      .tab-pagination {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin-top: 5rem;
        display: flex;
        justify-content: center;
        gap: 1.125rem;
        flex-wrap: wrap;

        .page-item {
          .page-link {
            font-size: 1.125rem;
            font-weight: 500;
            width: 50px;
            height: 50px;
            border: 1px solid #DDDDDD;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 400ms ease;
          }

          .page-link:hover {
            transform: scale(1.1);
          }
        }

        .page-item.active {
          .page-link {
            font-weight: 600;
            color: white;
            background-color: var(--theme-secondary-color);
            border: 1px solid var(--theme-secondary-color);
          }
        }
      }
    }
  }
}

/* knowledge-detail-page */
.knowledge-detail-page {
  background-color: var(--theme-bg-page);

  .banner-page {
    .banner-title {
      font-size: 1.375rem;

      @media (min-width: 768px) {
        font-size: 1.625rem;
      }

      @media (min-width: 992px) {
        font-size: 1.875rem;
      }

      @media (min-width: 1200px) {
        font-size: 2.125rem;
      }

      @media (min-width: 1400px) {
        font-size: 2.5rem;
      }

      /* // */
    }
  }

  .page-content {
    padding: var(--page-content-wrapper) 0;

    .section-article {
      .article-banner {
        border-radius: 10px;
        overflow: hidden;
        width: 100%;
        height: auto;
        max-height: 600px;
        aspect-ratio: 16 / 9;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }

      .article-content {
        padding: 0 2%;

        @media (min-width: 768px) {
          padding: 0 4%;
        }

        @media (min-width: 992px) {
          padding: 0 6%;
        }

        @media (min-width: 1200px) {
          padding: 0 8%;
        }

        @media (min-width: 1400px) {
          padding: 0 14%;
        }

        .article-info {
          margin: 1.125rem 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          gap: 0.375rem;
          font-size: 0.875rem;

          @media (min-width: 768px) {
            margin: 1.5rem 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
          }

          @media (min-width: 992px) {
            margin: 1.875rem 0;
            flex-direction: row;
            align-items: center;
            gap: 0;
          }

          @media (min-width: 1200px) {}

          @media (min-width: 1400px) {}

          .article-organized {
            gap: 0.5rem;

            @media (min-width: 768px) {
              gap: 0.5rem;
            }

            @media (min-width: 992px) {
              gap: 1rem;
            }

            @media (min-width: 1200px) {}

            @media (min-width: 1400px) {}

            img {
              width: 22px;
              height: 22px;
              border-radius: 22px;
              object-fit: contain;
              display: block;
              background-color: var(--bg-image-color);

              @media (min-width: 768px) {
                width: 30px;
                height: 30px;
                border-radius: 30px;
              }

              @media (min-width: 992px) {
                width: 35px;
                height: 35px;
                border-radius: 35px;
              }

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {
                width: 40px;
                height: 40px;
                border-radius: 40px;
              }
            }
          }
        }

        .article-title {
          font-size: 1.5rem;
          line-height: 1.363;
          margin: 0;

          @media (min-width: 768px) {
            font-size: 1.625rem;
            line-height: 1.384;
          }

          @media (min-width: 992px) {
            font-size: 1.75rem;
            line-height: 1.428;
          }

          @media (min-width: 1200px) {
            font-size: 1.875rem;
            line-height: 1.5;
          }

          @media (min-width: 1400px) {}
        }

        .article-detail {
          color: #555555;
          line-height: 1.75;
          margin-top: 1.25rem;

          @media (min-width: 768px) {
            line-height: 1.75;
          }

          @media (min-width: 992px) {
            line-height: 1.875;
          }

          @media (min-width: 1200px) {}

          @media (min-width: 1400px) {}

          img {
            max-width: 100%;
            height: auto !important;
            object-fit: contain;
          }
        }

        .article-control {
          --border-article-control-color: #DDDDDD;
          margin-top: 5rem;
          padding: 1.25rem 0;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          border-top: 2px solid var(--border-article-control-color);
          border-bottom: 2px solid var(--border-article-control-color);

          @media (min-width: 768px) {
            padding: 1.25rem 0;
          }

          @media (min-width: 992px) {
            padding: 1.5rem 0;
          }

          @media (min-width: 1200px) {}

          @media (min-width: 1400px) {}

          .item-control {
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            border-right: 2px solid var(--border-article-control-color);

            .btn {
              border: none;
              padding: 0;
              display: flex;
              align-items: center;
              gap: 0.5rem;

              @media (min-width: 768px) {
                gap: 1.125rem;
              }

              @media (min-width: 992px) {
                gap: 1.25rem;
              }

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {}

              .control-title {
                margin: 0;
                font-size: 0.875rem;

                @media (min-width: 768px) {
                  font-size: 1.125rem;
                }

                @media (min-width: 992px) {
                  font-size: 1.25rem;
                }

                @media (min-width: 1200px) {}

                @media (min-width: 1400px) {}
              }
            }
          }

          .item-control:last-child {
            border-right: none;
          }
        }
      }
    }
  }

  .modal-download {
    .table {
      tbody {
        tr {
          td {
            cursor: pointer;
            padding: 0.625rem .5rem;
          }
        }
      }
    }
  }
}

/* news-all-page */
.news-all-page {
  .page-content {
    padding: var(--page-content-wrapper) 0;

    .section-news {
      display: flex;
      flex-direction: row;
      gap: 1.75rem;

      @media (min-width: 768px) {}

      @media (min-width: 992px) {
        gap: 2.5rem;
      }

      @media (min-width: 1200px) {
        gap: 3.125rem;
      }

      @media (min-width: 1400px) {
        gap: 3.75rem;
      }

      .section-articles {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        @media (min-width: 768px) {}

        @media (min-width: 992px) {
          width: 620px;
        }

        @media (min-width: 1200px) {
          width: 750px;
        }

        @media (min-width: 1400px) {
          width: 850px;
          gap: 1.875rem;
        }

        .card-news {
          display: block;
          border-radius: 10px;
          overflow: hidden;

          .card-image {
            width: 100%;
            height: 250px;
            position: relative;
            overflow: hidden;
            background-color: var(--bg-image-color);
            border-radius: 10px;

            @media (min-width: 768px) {
              height: 200px;
            }

            @media (min-width: 992px) {
              height: 290px;
            }

            @media (min-width: 1200px) {
              height: 352px;
            }

            @media (min-width: 1400px) {
              height: 400px;
            }

            /* // */

            .card-thumbtack {
              font-size: 0.875rem;
              width: 30px;
              height: 30px;
              border-radius: 30px;
              color: white;
              background-color: var(--theme-secondary-color);
              position: absolute;
              inset: 1.25rem 0 0 1.25rem;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 2;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {
                font-size: 1rem;
                width: 35px;
                height: 35px;
                border-radius: 35px;
              }

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {
                width: 40px;
                height: 40px;
                border-radius: 40px;
              }
            }

            .card-type {
              font-size: 0.875rem;
              color: white;
              background-color: var(--theme-primary-color);
              position: absolute;
              top: 1.25rem;
              right: 1.25rem;
              padding: 0.5rem 1.125rem;
              border-radius: 5px;
              z-index: 2;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {
                font-size: 0.875rem;
                padding: 0.625rem 1.25rem;
                top: 1.25rem;
                right: 1.25rem;
              }

              /* // */
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              -webkit-transition: all .5s;
              -moz-transition: all .5s;
              -o-transition: all .5s;
              transition: all .5s;
            }
          }

          .card-body {
            position: relative;
            z-index: 3;
            margin-top: -1.875rem;
            margin-right: 1.25rem;
            background-color: white;
            border-radius: 0 10px 0 0;
            padding: 1.875rem 0;
            padding-right: 1.625rem;

            .card-public {
              font-size: 0.875rem;
              margin: 0;
              margin-bottom: 0.25rem;

              i {
                color: var(--theme-secondary-color);
              }

              span {
                color: var(--theme-primary-color);
              }
            }

            .card-title {
              font-size: 1.25rem;
              line-height: 1.3;
              height: 3.25rem;
              margin: 0;
              padding: 0.25rem;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {
                font-size: 1.375rem;
                line-height: 1.27;
                height: 3.5rem;
              }

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {}

              /* // */
            }

            .card-line {
              margin: 1.125rem 0;
              width: 3.75rem;
              border-bottom: 3px solid var(--theme-secondary-color);
              border-radius: 3px;
            }

            .card-brief {
              font-size: 0.875rem;
              line-height: 1.428;
              height: 5rem;
              color: #555555;
              margin: 0;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {
                font-size: 0.9375rem;
                line-height: 1.467;
                height: 5.5rem;
              }

              @media (min-width: 1400px) {}

              /* // */
            }
          }
        }

        .card-news:hover .card-image img,
        .card-news:focus .card-image img {
          transform: scale(1.15);
        }

        .article-notfound {
          img {
            width: 200px;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            margin-bottom: 1.5rem;
          }
        }

        .tab-pagination {
          list-style-type: none;
          padding: 0;
          margin: 0;
          margin-top: 5rem;
          display: flex;
          gap: 1.125rem;

          .page-item {
            .page-link {
              font-size: 1.125rem;
              font-weight: 500;
              width: 50px;
              height: 50px;
              border: 1px solid #DDDDDD;
              border-radius: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: 400ms ease;
            }

            .page-link:hover {
              transform: scale(1.1);
            }
          }

          .page-item.active {
            .page-link {
              font-weight: 600;
              color: white;
              background-color: var(--theme-secondary-color);
              border: 1px solid var(--theme-secondary-color);
            }
          }
        }
      }

      .section-filter {
        flex: 1;

        .filter-search {
          display: flex;
          border: 1px solid #DDDDDD;
          border-radius: 5px;

          input {
            flex: 1;
            border: none;
            margin: 0.5rem 0.75rem;
          }

          input:focus-visible {
            outline: none;
          }

          button {
            border-radius: 5px;
            color: var(--theme-secondary-color);
          }
        }

        .line {
          margin: 1.875rem 0;
          width: 3.75rem;
          border-bottom: 3px solid var(--theme-secondary-color);
          border-radius: 3px;
        }

        .filter-category:focus {
          border-color: var(--theme-primary-color);
          box-shadow: 0 0 0 .25rem rgba(39, 174, 96, .25);
        }

        .filter-years {
          margin: 0;
          padding: 0;
          list-style-type: none;

          li {
            padding: 0.125rem 0;

            a {
              display: flex;
              justify-content: space-between;
              font-size: 1.125rem;

              .year {
                position: relative;
                transition: color 0.5s ease;
              }

              .count {
                color: #555555;
              }

              .year::before {
                content: "";
                display: inline-block;
                width: 0;
                border-bottom: 3px solid var(--theme-secondary-color);
                border-radius: 3px;
                margin-right: 0.25rem;
                transition: width 0.5s ease;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
              }
            }

            a:hover .year::before {
              width: 1.875rem;
            }

            a:hover .year {
              color: var(--theme-secondary-color);
            }
          }
        }

        .filter-tags {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.75rem;

          .tag-item {
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            padding: 0.5rem 0.875rem;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
          }

          .tag-item:hover {
            color: white;
            background-color: var(--theme-primary-color);
            border: 1px solid var(--theme-primary-color);
          }
        }
      }
    }
  }
}

/* news-detail-page */
.news-detail-page {
  background-color: var(--theme-bg-page);

  .banner-page {
    .banner-title {
      font-size: 1.375rem;

      @media (min-width: 768px) {
        font-size: 1.625rem;
      }

      @media (min-width: 992px) {
        font-size: 1.875rem;
      }

      @media (min-width: 1200px) {
        font-size: 2.125rem;
      }

      @media (min-width: 1400px) {
        font-size: 2.5rem;
      }

      /* // */
    }
  }

  .page-content {
    --padding-news-article-content: 2%;
    padding: var(--page-content-wrapper) 0;

    @media (min-width: 768px) {
      --padding-news-article-content: 4%;
    }

    @media (min-width: 992px) {
      --padding-news-article-content: 6%;
    }

    @media (min-width: 1200px) {
      --padding-news-article-content: 8%;
    }

    @media (min-width: 1400px) {
      --padding-news-article-content: 14%;
    }

    /* // */

    .section-article {
      .article-banner {
        border-radius: 10px;
        overflow: hidden;
        width: 100%;
        height: fit-content;
        max-height: 245px;

        @media (min-width: 576px) {
          height: 245px;
          max-height: unset;
        }

        @media (min-width: 768px) {
          height: 330px;
        }

        @media (min-width: 992px) {
          height: 445px;
        }

        @media (min-width: 1200px) {
          height: 530px;
        }

        @media (min-width: 1400px) {
          height: 600px;
        }

        /* // */

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          aspect-ratio: 16 / 9;
        }
      }

      .article-content {
        padding: 0 var(--padding-news-article-content);

        .article-info {
          margin: 1.25rem 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.875rem;

          @media (min-width: 768px) {
            margin: 1.375rem 0;
          }

          @media (min-width: 992px) {
            margin: 1.625rem 0;
          }

          @media (min-width: 1200px) {
            margin: 1.75rem 0;
          }

          @media (min-width: 1400px) {
            margin: 1.875rem 0;
          }

          /* // */
        }

        .article-title {
          font-size: 1.375rem;
          line-height: 1.363;
          margin: 0;

          @media (min-width: 768px) {
            font-size: 1.5rem;
            line-height: 1.25;
          }

          @media (min-width: 992px) {
            font-size: 1.625rem;
            line-height: 1.461;
          }

          @media (min-width: 1200px) {
            font-size: 1.75rem;
            line-height: 1.5;
          }

          @media (min-width: 1400px) {
            font-size: 1.875rem;
            line-height: 1.5;
          }

          /* // */
        }

        .article-detail {
          color: #555555;
          line-height: 1.625;
          margin-top: 1.25rem;

          @media (min-width: 768px) {
            line-height: 1.625;
          }

          @media (min-width: 992px) {
            line-height: 1.75;
          }

          @media (min-width: 1200px) {
            line-height: 1.875;
          }

          @media (min-width: 1400px) {
            line-height: 1.875;
          }

          /* // */

          img {
            max-width: 100%;
            height: auto !important;
            object-fit: contain;
          }
        }

        .article-detail.theme-line-header::before {
          bottom: -1.5rem;
        }
      }

      .article-gallery {
        --padding-gallery-news: 0.5rem;
        margin-top: 4.25rem;

        @media (min-width: 768px) {
          margin-top: 5.25rem;
        }

        @media (min-width: 992px) {
          --padding-gallery-news: 0.625rem;
        }

        @media (min-width: 1200px) {
          /*  */
        }

        @media (min-width: 1400px) {
          --padding-gallery-news: 0.75rem;
          margin-top: 6.25rem;
        }

        .row {
          margin: calc(var(--padding-gallery-news) * -1);
        }

        .row>* {
          padding: var(--padding-gallery-news);
        }

        .gallery-item {
          width: 100%;
          height: 200px;
          border-radius: 10px;
          overflow: hidden;
          transition: 800ms ease;

          @media (min-width: 576px) {
            height: 270px;
          }

          @media (min-width: 768px) {
            height: 240px;
          }

          @media (min-width: 992px) {
            height: 325px;
          }

          @media (min-width: 1200px) {
            height: 390px;
          }

          @media (min-width: 1400px) {
            height: 440px;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
        }

        .gallery-item:hover {
          transform: scale(1.03);
        }
      }

      .article-footer {
        margin-top: 3.625rem;
        padding: 0 var(--padding-news-article-content);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        row-gap: 2.5rem;

        @media (min-width: 768px) {
          /*  */
        }

        @media (min-width: 992px) {
          margin-top: 4.625rem;
          flex-direction: row;
          row-gap: 0;
        }

        @media (min-width: 1200px) {
          /*  */
        }

        @media (min-width: 1400px) {
          margin-top: 5.625rem;
          flex-direction: row;
          row-gap: 0;
        }

        .article-tags {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.75rem;
          width: 100%;

          @media (min-width: 768px) {
            /*  */
          }

          @media (min-width: 992px) {
            width: 70%;
          }

          @media (min-width: 1200px) {
            /*  */
          }

          @media (min-width: 1400px) {
            width: 70%;
          }

          .tag-item {
            font-size: 0.875rem;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            padding: 0.375rem 0.875rem;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
          }

          .tag-item:hover {
            color: white;
            background-color: var(--theme-primary-color);
            border: 1px solid var(--theme-primary-color);
          }
        }

        .article-share {
          display: flex;
          height: fit-content;
          align-items: center;
          flex-wrap: nowrap;
          gap: 1.125rem;

          @media (min-width: 768px) {
            /*  */
          }

          @media (min-width: 992px) {
            /*  */
          }

          @media (min-width: 1200px) {
            gap: 0.875rem;
          }

          @media (min-width: 1400px) {
            gap: 0.875rem;
          }

          a {
            color: var(--theme-secondary-color);
          }
        }
      }
    }
  }
}

/* video-article-all-page */
.video-article-all-page {
  background-color: var(--theme-bg-page);

  .page-content {
    padding: var(--page-content-wrapper) 0;

    .section-articles {
      .row {
        --padding-knowledge-articles-x: 0.375rem;
        --padding-knowledge-articles-y: 0.375rem;
        margin: calc(var(--padding-knowledge-articles-y) * -1) calc(var(--padding-knowledge-articles-x) * -1);

        @media (min-width: 768px) {
          --padding-knowledge-articles-x: 0.625rem;
          --padding-knowledge-articles-y: 0.625rem;
        }

        @media (min-width: 992px) {
          --padding-knowledge-articles-x: 0.75rem;
          --padding-knowledge-articles-y: 0.75rem;
        }

        @media (min-width: 1200px) {
          --padding-knowledge-articles-x: 0.875rem;
          --padding-knowledge-articles-y: 0.875rem;
        }

        @media (min-width: 1400px) {
          --padding-knowledge-articles-x: 0.9375rem;
          --padding-knowledge-articles-y: 0.9375rem;
        }
      }

      .row>* {
        padding: var(--padding-knowledge-articles-y) var(--padding-knowledge-articles-x);
      }

      .tab-pagination {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin-top: 5rem;
        display: flex;
        justify-content: center;
        gap: 1.125rem;

        .page-item {
          .page-link {
            font-size: 1.125rem;
            font-weight: 500;
            width: 50px;
            height: 50px;
            border: 1px solid #DDDDDD;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 400ms ease;
          }

          .page-link:hover {
            transform: scale(1.1);
          }
        }

        .page-item.active {
          .page-link {
            font-weight: 600;
            color: white;
            background-color: var(--theme-secondary-color);
            border: 1px solid var(--theme-secondary-color);
          }
        }
      }
    }
  }
}

/* video-article-detail-page */
.video-article-detail-page {
  background-color: var(--theme-bg-page);

  .banner-page {
    .banner-title {
      font-size: 1.375rem;

      @media (min-width: 768px) {
        font-size: 1.625rem;
      }

      @media (min-width: 992px) {
        font-size: 1.875rem;
      }

      @media (min-width: 1200px) {
        font-size: 2.125rem;
      }

      @media (min-width: 1400px) {
        font-size: 2.5rem;
      }

      /* // */
    }
  }

  .page-content {
    padding: var(--page-content-wrapper) 0;

    .section-article {
      --padding-layout-video: 0;

      @media (min-width: 768px) {
        /*  */
      }

      @media (min-width: 992px) {
        --padding-layout-video: 1.375rem;
      }

      @media (min-width: 1200px) {
        --padding-layout-video: 1.375rem;
      }

      @media (min-width: 1400px) {
        --padding-layout-video: 1.375rem;
      }

      .article-player {
        width: 100%;
        height: auto;
        border-radius: 10px;
        display: block;
        overflow: hidden;

        iframe {
          width: 100%;
          /* height: auto; */
          border-radius: 10px;
          display: block;
          border: 0;
        }
      }

      .article-layout.row {
        margin: 0 calc(var(--padding-layout-video) * -1);

        .col {
          border-right: none;

          @media (min-width: 768px) {
            /*  */
          }

          @media (min-width: 992px) {
            border-right: 1px solid #DDDDDD;
          }

          @media (min-width: 1200px) {
            border-right: 1px solid #DDDDDD;
          }

          @media (min-width: 1400px) {
            border-right: 1px solid #DDDDDD;
          }
        }

        .col:last-child {
          border-right: none;
        }
      }

      .article-layout.row>* {
        padding: 0 var(--padding-layout-video);
      }

      .article-layout {
        margin-top: 1.875rem !important;

        .article-content {
          /* width: 95%; */
          padding-right: 0;

          @media (min-width: 768px) {
            /*  */
          }

          @media (min-width: 992px) {
            padding-right: 1rem;
          }

          @media (min-width: 1200px) {
            padding-right: 1rem;
          }

          @media (min-width: 1400px) {
            padding-right: 1rem;
          }

          .article-info {
            margin-bottom: 1.125rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
          }

          .article-title {
            font-size: 1.375rem;
            line-height: 1.363;
            margin: 0;

            @media (min-width: 768px) {
              font-size: 1.5rem;
              line-height: 1.25;
            }

            @media (min-width: 992px) {
              font-size: 1.625rem;
              line-height: 1.461;
            }

            @media (min-width: 1200px) {
              font-size: 1.75rem;
              line-height: 1.5;
            }

            @media (min-width: 1400px) {
              font-size: 1.875rem;
              line-height: 1.5;
            }

            /* // */
          }

          .article-detail {
            color: #555555;
            line-height: 1.625;
            margin-top: 2.25rem;

            @media (min-width: 768px) {
              line-height: 1.625;
            }

            @media (min-width: 992px) {
              line-height: 1.75;
            }

            @media (min-width: 1200px) {
              line-height: 1.875;
            }

            @media (min-width: 1400px) {
              line-height: 1.875;
            }

            /* // */

            img {
              max-width: 100%;
              height: auto !important;
              object-fit: contain;
            }
          }

          .article-footer {
            margin-top: 3.625rem;
            padding: 0 var(--padding-news-article-content);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            row-gap: 2.5rem;

            @media (min-width: 768px) {
              /*  */
            }

            @media (min-width: 992px) {
              margin-top: 4.625rem;
              flex-direction: row;
              row-gap: 0;
            }

            @media (min-width: 1200px) {
              /*  */
            }

            @media (min-width: 1400px) {
              margin-top: 5.625rem;
              flex-direction: row;
              row-gap: 0;
            }

            .article-tags {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              gap: 0.75rem;
              width: 100%;

              @media (min-width: 768px) {
                /*  */
              }

              @media (min-width: 992px) {
                width: 70%;
              }

              @media (min-width: 1200px) {
                /*  */
              }

              @media (min-width: 1400px) {
                width: 70%;
              }

              .tag-item {
                font-size: 0.875rem;
                border: 1px solid #DDDDDD;
                border-radius: 5px;
                padding: 0.375rem 0.875rem;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
              }

              .tag-item:hover {
                color: white;
                background-color: var(--theme-primary-color);
                border: 1px solid var(--theme-primary-color);
              }
            }

            .article-share {
              display: flex;
              height: fit-content;
              align-items: center;
              flex-wrap: nowrap;
              gap: 1.125rem;

              @media (min-width: 768px) {
                /*  */
              }

              @media (min-width: 992px) {
                /*  */
              }

              @media (min-width: 1200px) {
                gap: 0.875rem;
              }

              @media (min-width: 1400px) {
                gap: 0.875rem;
              }

              a {
                color: var(--theme-secondary-color);
              }
            }
          }
        }

        .article-video-other {
          margin-top: 3.125rem;

          @media (min-width: 768px) {
            /*  */
          }

          @media (min-width: 992px) {
            margin-top: 0;
          }

          @media (min-width: 1200px) {
            margin-top: 0;
          }

          @media (min-width: 1400px) {
            margin-top: 0;
          }

          .video-other-lists {
            margin-top: 0.625rem;

            .card-video-other {
              display: block;
              margin-bottom: 0.75rem;

              .card-image {
                width: 100%;
                height: 210px;
                position: relative;
                border-radius: 10px;
                overflow: hidden;

                @media (min-width: 576px) {
                  height: 270px;
                }

                @media (min-width: 768px) {
                  height: 176px;
                }

                @media (min-width: 992px) {
                  height: 150px;
                }

                @media (min-width: 1200px) {
                  height: 130px;
                }

                @media (min-width: 1400px) {
                  height: 150px;
                }

                .card-type {
                  font-size: 0.75rem;
                  color: white;
                  background-color: var(--theme-primary-color);
                  position: absolute;
                  top: 0.625rem;
                  right: 0.625rem;
                  padding: 0.25rem 0.625rem;
                  border-radius: 5px;
                  z-index: 2;
                }

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                  -webkit-transition: all .5s;
                  -moz-transition: all .5s;
                  -o-transition: all .5s;
                  transition: all .5s;
                }
              }

              .card-body {
                padding: 0.875rem 0;

                .card-title {
                  margin: 0;
                }
              }
            }

            .card-video-other:hover .card-image img,
            .card-video-other:focus .card-image img {
              transform: scale(1.15);
            }
          }
        }
      }
    }
  }
}

/* about-us-page */
.about-us-page {
  background-color: var(--theme-bg-page);

  .page-content {
    padding: var(--page-content-wrapper) 0;

    .section-info {
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 2.875rem;

      @media (min-width: 992px) {
        flex-direction: row;
      }

      .section-image {
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        height: auto;
        border-radius: 10px;
        overflow: hidden;

        @media (min-width: 992px) {
          width: 500px;
        }
      }

      .section-body {
        flex: 1;

        .section-brief {
          width: 100%;
          margin-top: 2rem;
          color: #555555;

          @media (min-width: 992px) {
            width: 70%;
          }
        }
      }
    }

    .section-model-teach {
      margin-top: 6.25rem;
    }

    .section-partnership {
      padding-bottom: 0;
    }
  }
}

/* contact-us-page */
.contact-us-page {
  background-color: var(--theme-bg-page);

  .page-content {
    padding: var(--page-content-wrapper) 0;
    padding-bottom: 2.5rem;

    .section-content {
      .section-address {
        font-size: 1rem;
        color: #555555;
        margin-top: 1.5rem;

        @media (min-width: 768px) {
          font-size: 1.125rem;
        }

        /* // */
      }

      .section-contact {
        .contact-lists {
          list-style-type: none;
          margin: 0;
          padding: 0;

          .contact-item {
            padding: 0.375rem 0;

            .item-link {
              display: flex;
              align-items: center;
              flex-wrap: nowrap;
              column-gap: 1rem;
              font-size: 1.125rem;

              .icon {
                width: 34px;
                height: 34px;
                border-radius: 34px;
                color: white;
                background-color: var(--theme-secondary-color);
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }

      .card-contact-message {
        margin-top: 2rem;
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
        box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);
        -webkit-box-shadow: 0px 10px 80px rgba(41, 41, 41, 0.10);

        @media (min-width: 768px) {
          padding: 2.5rem;
        }

        @media (min-width: 1200px) {
          margin-top: 0;
        }

        /* // */

        .form-send-message {
          margin-top: 1.125rem;

          .input-field:has(input[required]) label:after,
          .input-field:has(textarea[required]) label:after {
            content: '*';
            color: red;
            font-size: 1rem;
            margin-left: 2px;
            position: relative;
            display: inline;
          }

          .form-control:focus {
            border-color: var(--theme-primary-color);
            box-shadow: 0 0 0 .25rem rgba(39, 174, 96, .25);
          }

          .btn-submit {
            width: 100%;
            color: white;
            background-color: var(--theme-secondary-color);
          }
        }
      }
    }
  }
}

.tags-page {
  background-color: var(--theme-bg-page);

  .page-content {
    padding: var(--page-content-wrapper) 0;
    padding-bottom: 2.5rem;

    .section-tags {
      margin-top: 1.5rem;

      .card-link {
        margin-bottom: 1.5rem;

        .card-tag {
          padding: 0;
          background-color: white;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
          overflow: hidden;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          transition: 300ms ease;

          @media (min-width: 768px) {
            padding: 1.125rem;
            flex-direction: row;
            gap: 1.75rem;
          }

          @media (min-width: 992px) {
            padding: 1.25rem;
            flex-direction: row;
            gap: 2rem;
          }

          @media (min-width: 1200px) {
            padding: 1.375rem;
            flex-direction: row;
            gap: 2.125rem;
          }

          @media (min-width: 1400px) {
            padding: 1.375rem;
            flex-direction: row;
            gap: 2.125rem;
          }

          /*  */

          .card-image {
            width: 100%;
            height: 240px;
            max-width: 100%;
            overflow: hidden;
            border-radius: 0;
            position: relative;

            @media (min-width: 320px) {
              width: 100%;
              height: 178px;
            }

            @media (min-width: 375px) {
              width: 100%;
              height: 210px;
            }

            @media (min-width: 425px) {
              width: 100%;
              height: 240px;
            }

            @media (min-width: 576px) {
              width: 100%;
              height: 310px;
            }

            @media (min-width: 768px) {
              width: 280px;
              height: 196px;
              border-radius: 10px;
            }

            @media (min-width: 992px) {
              width: 350px;
              height: 210px;
              border-radius: 10px;
            }

            @media (min-width: 1200px) {
              width: 400px;
              height: 240px;
              border-radius: 10px;
            }

            @media (min-width: 1400px) {
              width: 400px;
              height: 240px;
              border-radius: 10px;
            }

            /*  */

            .card-type {
              font-size: 0.875rem;
              color: white;
              background-color: var(--theme-primary-color);
              position: absolute;
              top: 1.25rem;
              right: 1.25rem;
              padding: 0.5rem 1.125rem;
              border-radius: 5px;
              z-index: 2;

              @media (min-width: 768px) {}

              @media (min-width: 992px) {}

              @media (min-width: 1200px) {}

              @media (min-width: 1400px) {
                font-size: 0.875rem;
                padding: 0.625rem 1.25rem;
                top: 1.25rem;
                right: 1.25rem;
              }

              /* // */
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              -webkit-transition: all .5s;
              -moz-transition: all .5s;
              -o-transition: all .5s;
              transition: all .5s;
            }
          }

          .card-body {
            flex: 1;
            padding: 1.125rem;

            @media (min-width: 768px) {
              padding: 0;
              padding-top: 0.75rem;
            }

            @media (min-width: 992px) {
              padding: 0;
              padding-top: 0.875rem;
            }

            @media (min-width: 1200px) {
              padding: 0;
              padding-top: 1rem;
            }

            @media (min-width: 1400px) {
              padding: 0;
              padding-top: 1rem;
            }

            .card-public {
              font-size: 0.875rem;
              margin: 0;
              margin-bottom: 0.25rem;

              i {
                color: var(--theme-secondary-color);
              }

              span {
                color: var(--theme-primary-color);
              }
            }

            .card-title {
              font-size: 1.25rem;
              line-height: 1.27;
              height: 3rem;

              @media (min-width: 768px) {
                font-size: 1.25rem;
                line-height: 1.27;
                height: 3rem;
              }

              @media (min-width: 992px) {
                font-size: 1.375rem;
                line-height: 1.27;
                height: 3.5rem;
              }

              @media (min-width: 1200px) {
                font-size: 1.375rem;
                line-height: 1.27;
                height: 3.5rem;
              }

              @media (min-width: 1400px) {
                font-size: 1.375rem;
                line-height: 1.27;
                height: 3.5rem;
              }
            }

            .card-line {
              margin: 1.125rem 0;
              width: 3.75rem;
              border-bottom: 3px solid var(--theme-secondary-color);
              border-radius: 3px;
            }

            .card-brief {
              font-size: 0.875rem;
              line-height: 1.5;
              height: 5.25rem;
              color: #555555;
              margin: 0;

              @media (min-width: 768px) {
                font-size: 0.875rem;
                line-height: 1.5;
                height: 5.25rem;
              }

              @media (min-width: 992px) {
                font-size: 1rem;
                line-height: 1.5;
                height: 6rem;
              }

              @media (min-width: 1200px) {
                font-size: 1rem;
                line-height: 1.5;
                height: 6rem;
              }

              @media (min-width: 1400px) {
                font-size: 1rem;
                line-height: 1.5;
                height: 6rem;
              }
            }
          }
        }

        .card-tag:hover,
        .card-tag:focus {
          transform: scale(1.015);

          .card-image img,
          .card-image img {
            transform: scale(1.1);
          }
        }
      }

      .card-link:last-child {
        margin-bottom: 0;
      }
    }
  }
}