body {

        margin: 0;

        background-color: black;

      }

      section {

        overflow-x: hidden;

      }

      a {

        text-decoration: none;

      }

      #lc-video-list {

        height: auto;

        min-height: 450px;

      }

      @media (max-width: 769px) {

          .side-nav {

              display: none !important;

          }

          .mascot-container {

              display: none;

          }

          .recap-subtitle {

              text-align: center !important;

          }

      }



      @media (min-width: 1920px) {

          section {

              padding-left: 15%;

              padding-right: 15%;

          } 

        }

        @media (max-width: 820px) {

            .search-box::after {

            	width: 85px !important;

            }

            .search-span::placeholder {

            	font-size: 15px !important;

            }

        }

        

        

        @media (min-width: 1440px) and (max-width: 1919px) {

            section {

              padding-left: 10% !important;

              padding-right: 10% !important;

            } 

        }

        

        @media (min-width: 768px) and (max-width: 1439px) {

            section {

              padding-left: 7.5% !important;

              padding-right: 7.5% !important;

            } 

        }

        

        @media (max-width: 767px) {

            section {

              padding-left: 5% !important;

              padding-right: 5% !important;

            } 

        }

        @media (max-width: 390px) {

            section {

              padding-left: 3.5% !important;

              padding-right: 3.5% !important;

            } 

        }

        

      p {

        color: white;

      }

      * {

          font-family: "SVN-Gilroy", sans-serif !important;

      }

      

      .gradient-text-gray {

            background: linear-gradient(to right, #6f6f6f, #ffffff);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            /* fix lỗi lẹm chữ */

            -webkit-mask-image: linear-gradient(#fff 0 0);

            color: transparent;

            display: inline-block;

            padding-top: 3px;

            line-height: 1.2;

        }

        .event-time-tag {

            font-size: 12px;

            letter-spacing: 2px;

        }



        .course-heading {

            line-height: 1.2;

        }

        @media (min-width: 1440px) {

            .gradient-text-gray, .course-heading { padding-top: 1px; line-height: 1.3; }

        }

        @media (min-width: 1920px) {

            .gradient-text-gray, .course-heading { padding-top: 0;  }

        }



      .text-uppercase {

        text-transform: uppercase !important;

      }

      .section-2-title {

        font-weight: 800;

        text-transform: uppercase;

      }

      .section-2 {

        padding: 50px 15%;

        padding-top: 0;

        margin-top: 0;

      }

        .resource-hero {

          overflow: hidden;

          color: #fff;

        }

        .resource-hero__title {

            color: #fff;

        }

        .resource-hero-icon-four-star {

          top: 72px;

          left: calc(230px * 0.7 + (100vw * 384 / 1920) * 0.3);

          position: absolute;

          background: url(https://learningchain.vn/wp-content/uploads/2025/11/icon_tai_nguyen_tin_tuc_four_star.webp) no-repeat center;

          background-size: contain;

          width: 117px;

          height: auto;

          aspect-ratio: 1/ 1;

        }

        

        .resource-hero__overlay {

          position: absolute;

          pointer-events: none;

          background-image: url(https://learningchain.vn/wp-content/uploads/thu-vien/thu-vien-banner-desktop.png);

          background-repeat: no-repeat;

          background-position: center;

          background-size: contain;

          width: 100%;

          height: auto;

          aspect-ratio: 1280/ 360;

          top: 0;

          left: 0;

        }

        

        /* Khối nội dung canh giữa trang */

        .resource-hero__inner {

          position: relative;

          margin: 0 auto;

          padding: 150px 0px 180px;

          display: flex;

          align-items: center;

        }

        

        /* ===== Label dọc bên trái ===== */

        

        .resource-hero__side-label {

          flex: 0 0 auto;

          display: flex;

          flex-direction: column;

          align-items: center;

          margin-right: 40px;

        }

        

        .resource-side-label__glow {

          width: 2px;

          height: 60px;

          background: linear-gradient(to bottom, transparent, #ffffff, transparent);

          box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);

          margin-bottom: 8px;

        }

        

        .resource-side-label__text {

          display: inline-flex;

          align-items: center;

          justify-content: center;

          padding: 8px 18px;

          border-radius: 999px;

          border: 1px solid rgba(255, 255, 255, 0.4);

          font-size: 12px;

          letter-spacing: 0.12em;

          text-transform: uppercase;

          background: radial-gradient(circle at left, rgba(255, 255, 255, 0.25), transparent 55%);

        }

        

        /* ===== Khối 2 cột: chữ + hình ===== */

        

        .resource-hero__content {

          flex: 1 1 auto;

          display: flex;

          align-items: center;

          justify-content: space-between;

          gap: 48px;

        }

        

        .resource-hero__eyebrow {

          font-size: clamp(40px, calc(70px * 0.7 + (100vw * 70 / 1920) * 0.3), 110px);

          font-weight: 600;

          margin: 0 0 0px;

          background: linear-gradient(to right, #6f6f6f 0%, #ffffff 40%);

          -webkit-background-clip: text;

          -webkit-text-fill-color: transparent;

          background-clip: text;

          white-space: nowrap;

        

        }

        

        .resource-hero__title {

          font-size: clamp(56px, calc(150px * 0.7 + (100vw * 150 / 1920) * 0.3), 180px);

          line-height: 1;

          margin: 0 0 45px;

          font-weight: 800;

          white-space: nowrap;

        }

        

        /* Tabs dưới title */

        .resource-hero__tabs {

          display: flex;

          flex-wrap: wrap;

          gap: 43px;

        }

        

        /* Hiệu ứng hover icon AI, Blockchain, Web3 */

        .resource-tab {

          display: inline-flex;

          filter: brightness(0.75);

          align-items: center;

          gap: 8px;

          color: #fff;

          font-size: 16px;

          cursor: pointer;
          
          transition: all ease .6s;

        }

        .resource-tab:not(.resource-tab--active) * {

            filter: grayscale(1);

        }

        .resource-tab:not(.resource-tab--active):hover * {

            filter: grayscale(0);

            color: white;

            opacity: 1;

        }

        

        .resource-tab_icon_ai {

          width: 28px;

          height: 28px;

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/AI_ico.png) no-repeat center;

          background-size: contain;

        }

        .resource-tagline {

          font-size: 16px;

          font-weight: 600;

          opacity: 0.6;

        }

        .resource-tagline:hover {

            opacity: 1.5;

            filter: brightness(2.5);

        }



        .resource-tagline-active {

            filter: brightness(2.5);

        }



        /* Hiệu ứng cho dropdown box */

        .select-dr-box-container {

          display: grid;

          gap: 25px;

          position: relative;

        }

        .select-drop-box {

          margin-top: 36px;

          position: absolute;

          right: 15%;

          z-index: 50;

          padding: 20px;

          background: black;

          border-radius: 12px;

          backdrop-filter: blur(10px);



          opacity: 0;

          visibility: hidden;

          transform: translateY(-18px) scale(0.95);  /* bắt đầu thấp hơn */

          transition:

              opacity 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              border-radius 0.45s ease-in-out,

              visibility 0s linear 0.32s;

        }

        .select-drop-box.drop-box-active {

            opacity: 1;

            visibility: visible;

            transform: translateY(0) scale(1);



            transition:

              opacity 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              border-radius 0.45s ease-in-out,

              visibility 0s;

        }

        .filter-container {

          cursor: pointer;

        }

        .drop-box-item {

            width: 150px;

            text-decoration: none;

        }

        .select-dr-box-container * {

          color: white;

        }



        /* Hiệu ứng hover icon AI, Blockchain, Web3 */

        .resource-tab_icon_web3 {

          width: 28px;

          height: 28px;

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/web3_ico.png) no-repeat center;

          background-size: contain;

        }

        .resource-tab_icon_blockchain {

          width: 28px;

          height: 28px;

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/blockchain_ico.png) no-repeat center;

          background-size: contain;

        }

        .text-cont {

          margin-bottom: 40px;

        }

        

        .resource-tab--active .resource-tagline {

          opacity: 1;

        }

        .resource-tab--active {

          filter: brightness(1);

          border-color: transparent;

        }

        

        .resource-tab:hover {

          transform: translateY(-1px);

        }

        /*  */





        .resource-hero__overlay_image_tablet {

            display: none;    

        }

        .resource-hero__tabs_mobile {

            display: none;    

        }



        /* Hiệu ứng search box */



        .gap-box .search-box {

            gap: 0;

            justify-content: space-between;

          }

          .video-box.gap-box {

              height: 50px;

          }

          .gap-box .search-span {

            position: relative;

            right: -28px;

            color: white;

            font-size: 20px;

            /* margin-right: 10px; */

            background: none;

            border: none;

            -webkit-appearance: none;

            appearance: none;

          }

          .search-span {

            background: none;

            border: none;

            -webkit-appearance: none;

            appearance: none;

          }

          .search-span::placeholder {

            color: white;

            font-size: 20px;

            text-align: left;

          }

          @media (max-width: 699px) {

            .search-span::placeholder {

              font-size: 15px;

            }

          }

          .search-span:focus {

              border: none;

              outline: none;   /* Đảm bảo không viền khi user focus */

          }

          .search-span:focus::placeholder {

            opacity: 0;

          }

          .item-thumbnail {

            position: relative;

          }

          .item-thumbnail::before {

            /*content: '';*/

            /*position: absolute;*/

            /*top: 0;*/

            /*left: -10px;*/

            /*width: 70px;*/

            /*height: 100%;*/

            /*background: black;*/

            /*filter: blur(12px);*/

            /*opacity: 1;*/

            /*transition: opacity 0.35s ease;*/

            /*z-index: 1;*/

          }

          .item-thumbnail::after {

            content: '';

            position: absolute;

            top: -18px;

            right: -17px;

            width: 70px;

            height: 155%;

            background: black;

            filter: blur(12px);

            opacity: 1;

            transition: opacity 0.35s ease;

            z-index: 1;

          }



          /* Hiệu ứng hover sẽ fade out */

          .item-thumbnail:hover::before,

          .item-thumbnail:hover::after {

              opacity: 0;

          }

          .item-thumbnail:hover {

            cursor: pointer;

          }

          

         @media (max-width: 1439px) {

            .resource-hero__inner {

              padding-top: calc(550px * 0.1 + (100vw * 550 / 1439) * 0.9);

              padding-bottom: calc(140px * 0.1 + (100vw * 140 / 1439) * 0.9);

            }

              

            .resource-hero__overlay {

                  background-image: url(https://learningchain.vn/wp-content/uploads/thu-vien/ipad_pro_thu_vien.png);

                  aspect-ratio: 1366/ 1013;

            }

              

            .resource-hero-icon-four-star {

              top: calc(450px * 0.1 + (100vw * 450 / 1439) * 0.9);

            }

        }

        @media (min-width: 1440px) and (max-width: 1919px) {

          .gap-box .search-box {

            gap: 0;

          }

          .video-box.gap-box {

              height: 50px;

          }

          .gap-box .search-span {

            font-size: 14px;

            margin-right: 10px;

          }

        }

        



        .section-1, .section-2 {

          background-color: black;

        }

        .resource-container {

            display: flex;

            justify-content: space-between;

        }

        

        .filter-btn {

          position: relative;

        }

        .filter-btn span {

          color: white;

          font-size: 20px;

        }

        .filter-btn::before {

            content: "";

            position: absolute;

            top: -56px;

            left: -80px;

            width: 124px;

            height: 140px;

            background: url(https://learningchain.vn/wp-content/uploads/2025/11/LIGHT_EFFECT_tin-tuc.webp) no-repeat center;

            

            opacity: 0.5;

            transition: opacity 0.8s ease-in-out;

        }

        .filter-btn:hover::before {

            opacity: 1;

        }

        .filter-btn .resource-trend__filter-icon {

            width: 21px;

            height: 21px;

            object-fit: contain;

            margin-bottom: -3px;
             margin-left: 8px;

        }

        .z-1 {

          /* z-index: 5 !important; */

        }

        .z-2 {

          /* z-index: 10 !important; */

          margin-left: -15px;

        }

        .z-3 {

          /* z-index: 15 !important; */

          margin-left: -15px;

        }

        .z-4 {

          /* z-index: 20 !important; */

          margin-left: -15px;

        }





        .library-card-container {

          display: grid;

          grid-template-columns: repeat(4, minmax(0, 1fr));

          column-gap: 0; /* gap ngang*/

          row-gap: 40px; /* gap dọc nè */ 

          margin-bottom: 40px;



          perspective: 1200px; /* Quan trọng để 3D mượt */

        }

        .resource-card {

          /*background: #0b0b0b;*/

          background: transparent;

          border-radius: 24px;

          overflow: hidden;

          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);

          position: relative;

          filter: grayscale(1);



          /* transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0.25s; */

          transform-style: preserve-3d;

          transition:

              transform 0.45s cubic-bezier(.22, .61, .36, 1),

              box-shadow 0.35s ease,

              opacity 0.3s ease,

              z-index 0.3s ease,

              filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);

      }

      .resource-card {

          position: relative;

          z-index: 5 !important; /* quan trọng để card nằm trên lớp mờ */

      }

      .resource-card:hover {

        filter: grayscale(0);

        cursor: pointer;

      }

        

        /* Lớp tối mờ bên trái */

        .resource-card::before {

            content: "";

            position: absolute;

            top: 0;

            right: -25px; /* đẩy ra một chút để giống trong ảnh */

            width: 70px; /* vùng mờ */

            height: 100%;

            /* background: linear-gradient(to right, rgb(0 0 0 / 99%), rgb(0 0 0 / 29%)); */

            background: black;

            filter: blur(12px);

        

            opacity: 1; /* không hiện khi bình thường */

            transition: opacity 0.35s ease;

            z-index: 1;

        }

        .z-4::before, .z-8::before {

            opacity: 0;

        }

        @media (max-width: 767px) {

          .resource-card::before {

            display: none;

          }

        }

      /* Các card không được hover — giảm độ nổi để sâu hơn */

      .resource-card.dimmed {

          opacity: 0.6;

          /* transform: rotateY(0deg) scale(0.99); */

      }



      .resource-card__media {

          position: relative;

          padding: 11px 14px;

          background: linear-gradient(to bottom, #222, #101010);

      }



      .resource-card__category {

          padding: 4px 10px;

          border-radius: 99px;

          background: rgba(105, 105, 105, 0.5);

          display: inline-flex;

          gap: 4px;

          font-size: 13px;

      }

      .resource-card__image-wrap {

          /* background: url(https://learningchain.vn/wp-content/uploads/2025/11/icon_web3_tai_nguyen_tin_tuc.webp); */

          width: 20px;

          height: 20px;

      }

      .co-ban, .chuyen-sau, .ung-dung {

        background-position: center center !important;

        background-repeat: no-repeat !important;

      }

      .co-ban {

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/co-ban.png); 

      }

      .chuyen-sau {

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/chuyen-sau.png); 

      }

      .ung-dung {

          background: url(https://learningchain.vn/wp-content/uploads/thu-vien/ung-dung.png); 

      }

      .resource-card__category {

          padding: 4px 10px;

          border-radius: 99px;

          background: rgba(105, 105, 105, 0.5);

          display: inline-flex;

          gap: 4px;

          font-size: 13px;

      }

      .resource-card-image-post {

          width: 100%;

          height: auto;

          aspect-ratio: 16 / 9;

          object-fit: cover;

      }

      

      .resource-card__body {

          padding: 12px 16px 27px;

      }

    .resource-card__title, .resource-card__excerpt {

        line-height: 1.5;

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        white-space: normal;

        color: white;

    }

    .resource-card__title a {

        color: #fff;

    }

    .resource-card__title {

        margin: 0 0 6px;

        font-size: 16px;

        font-weight: 700;

        text-transform: uppercase;

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        white-space: normal;

    }

    .resource-card__excerpt {

        margin: 0;

        font-size: 11px;

        color: #bbbbbb;

    }

    .resource-card::after {

        position: absolute;

        content: "";

        background: url(https://learningchain.vn/wp-content/uploads/2025/11/image-light-effect-for-card-post.webp) no-repeat center;

        width: 100%;

        height: auto;

        aspect-ratio: 282 / 26;

        background-size: contain;

        /* bottom: 0; */

        left: 0;



        bottom: -30px; /* để nằm thấp ban đầu */

        opacity: 0;

        transform: translateY(20px); /* vị trí thấp hơn */

        transition: all 0.6s ease-out;

    }

    .resource-card:hover::after {

        opacity: 1;

        transform: translateY(0); /* bay lên */

        bottom: 0;

    }

    .tagline-card {

      color: white;

      font-size: 14px;

      font-weight: 400;

    }

    .container.pagination-cont {

        margin: 40px 0;

        display: flex;

        gap: 20px;

        justify-content: center;

    }

    .pg-link {

      text-decoration: none;

      font-size: 16px;

      font-weight: 400;

    }

    .pg-link{

      color: #696969;

      text-decoration: none;

    }

    

    .pg-link.pg-link-active,

    .back-link.pg-link,

    .next-link.pg-link {

      color: white;

      font-weight: 600;

    }



    /* section-3 (video) */

    .section-3 {

      padding: 50px 15%;

    }

    .section-3-title {

      font-weight: 800;

      font-size: 50px;

      margin: 0 0 10px;

    }

    .section-3-subtitle {

      color: white;

      font-weight: 500;

      font-size: 20px;

      letter-spacing: 0px;

      margin: 0;

    }

    .video-box {

      display: grid;

      grid-template-columns: 7fr 3fr;

      gap: 50px;

      height: 500px;

      align-items: center;

    }

    .video-yt-cont {

        height: 100%;

    }

    .recap-title {

      font-weight: 700;

      font-size: 30px;

      margin: 10px 0;

    }

    .recap-subtitle {

      text-align: justify;

      margin: 0;

      font-size: 20px;

      font-weight: 400;

    }

    .navigate-btn-group {

      margin-top: 30px;

      display: flex;

      gap: 15px;

    }

    .navigate-btn-group * {

      z-index: 100;

      cursor: pointer;

      transform: scale(1);

      transition: transform 0.35s ease-in-out;

    }

    .navigate-btn-group *:hover {

        transform: scale(1.1);

    }

    .gradient-border {

      --border: 3px;

      border-radius: 20px;

      background: linear-gradient(#000, #000) padding-box,

                  linear-gradient(200deg, #000000, #FFFFFF) border-box;

      border: solid var(--border) transparent;

    }  

    .recap-icon {

      width: 88px;

    }

    .list-video-container * {

      color: white;

    }

    .search-box {

      display: flex;

      justify-content: flex-end;

      gap: 20px;

    }

    .search-box::before {

        content: "";

        position: relative;

        width: 70px;

        height: 56px;

        background: url(https://learningchain.vn/wp-content/uploads/thu-vien/light-left.png) no-repeat center;

        /* hiệu ứng */

        opacity: 0.5;

        transition: opacity 0.6s ease-out;

    }

    .search-box:hover::before {

        opacity: 1;

    }



    .search-box::after {

        content: "";

        position: relative;

        width: 70px;

        height: 56px;

        background: url(https://learningchain.vn/wp-content/uploads/thu-vien/light-right.png) no-repeat center;

        /* hiệu ứng */

        opacity: 0.5;

        transition: opacity 0.6s ease-out;

    }

    .search-box:hover::after {

        opacity: 1;

    }

    .search-box:focus-within::before,

    .search-box:focus-within::after {

        filter: brightness(2.5);

        opacity: 2.5;

    }



    img.search-icon {

        width: 25px;

        height: 25px;

        top: 16px;

        left: -18px;

        position: relative;

    }



    .search-span {

      align-content: center;

      font-size: 20px;

    }

    .search-box * {

      color: white;

    }

    .event-item {

        display: grid;

        /*grid-template-columns: 1fr 2fr 0.5fr 0.5fr;*/

        grid-template-columns: 20% 40% 1fr 0.5fr;

        gap: 20px;

        justify-content: space-between;

        margin: 16px 0;

      }

    .thumbnail-item {

        width: 100%;

        max-width: 340px;

        aspect-ratio: 331/118;

        object-fit: cover;

    }

    .item-name, .item-time, .item-code {

      display: block;

    }

    .item-name, .item-time {

      align-content: center;

    }

    .event-name {

      font-weight: 700;

      font-size: 20px;

      text-transform: uppercase;

    }

    .event-time-span {

        font-size: 16px;

        font-weight: 700;

        letter-spacing: 0px;

    }

    .item-code {

        justify-content: space-between;

        display: grid;

        grid-template-columns: 1fr;

        text-align: right;

    }

    .event-details-btn {

      align-content: end;

      margin-bottom: 16px;

      font-weight: 700;

      font-style: italic;

      text-decoration: underline;

    }

    .event-video-code {

      margin-top: 16px;

    }

    .item-time {

        text-align: justify;

        align-items: center;

        align-content: center;

        justify-content: center;

        display: grid;

    }

    .event-time-tag, .event-name {

        margin-bottom: 5px;

    }

    .hr-container {

      padding-bottom: 5%

    }

    .hr {

      width: 70%;

    }

        

         section {

             padding-left: 15%;

             padding-right: 15%;

         }

         .section-2-title {

           font-size: 50px;

           margin: 0 0 10px;

         }

         .section-2-subtitle {

           font-size: 20px;

           margin: 0;

           width: 80%;

         }



        /* @media (max-width: 1439px) {*/

        /*    .resource-hero__inner {*/

        /*      padding-top: calc(550px * 0.1 + (100vw * 550 / 1439) * 0.9);*/

        /*      padding-bottom: calc(140px * 0.1 + (100vw * 140 / 1439) * 0.9);*/

        /*    }*/

              

        /*    .resource-hero__overlay {*/

        /*          background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/HERO-BANNER.webp);*/

        /*          aspect-ratio: 1366/ 1013;*/

        /*    }*/

              

        /*    .resource-hero-icon-four-star {*/

        /*      top: calc(450px * 0.1 + (100vw * 450 / 1439) * 0.9);*/

        /*    }*/

        /*}*/



     

        /* @media (max-width: 1440px) {

            .resource-hero__inner {

              padding-top: 310px;

            }

              

            .resource-hero__overlay {

                  background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/HERO-BANNER.webp);

                  aspect-ratio: 1366/ 1013;

            }

              

            .resource-hero-icon-four-star {

                  top: 220px;

            }

        } */



        @media (max-width: 1440px) {

          img.search-icon {

            left: 0;

          }

          .gap-box .search-span {

            right: 0;

          }

        }

        /* ipad pro */

        @media (max-width: 1366px) {

          .library-card-container {

             display: grid;

              grid-template-columns: repeat(3, 1fr);

              column-gap: 20px;

              row-gap: 40px;

              margin-bottom: 40px;

          }

          .library-card-container article:nth-child(n+7) {

              display: none;

          }

          .z-1, .z-2, .z-3, .z-4 { margin-left: 0; }

          .filter-btn .resource-trend__filter-icon {

              width: 24px;

              height: 21px;

              object-fit: contain;

              margin-bottom: 0;

              margin-top: 5px;

          }

          .filter-btn {

            display: flex;

          }

          .filter-btn span {

            width: 85px;

            font-size: 16px;

          }

          .filter-btn::before {

              left: -90px;

          }

          .section-2 {

            /* margin-top: 20px; */

            margin-top: 0;

            padding-top: 0;

          }

          .section-2-title, .section-3-title {

            font-size: 40px;

            margin: 0 0 6px;

          }

          .section-2-subtitle {

            font-size: 15px;

          }

          .recap-subtitle {

            font-size: 15px;

          }

          .video-box {

            gap: 20px;

          }

          .video-yt-cont {

            max-height: 390px;

          }

          .navigate-btn-group {

            gap: 10px;

            margin-left: 3px;

          }

          .navigate-btn-group img {

            width: 34px;

          }

          .search-span {

            font-size: 15px;

            position: relative;

            left: 7px;

          }

          img.search-icon {

            width: 18px;

            height: 18px;

            margin-top: 3px;

            position: relative;

            left: 14px;

          }

          .search-box {

            gap: 6px;

          }

          .search-box::before {

            left: 16px;

          }

          .event-desc, .section-3-subtitle {

              font-size: 15px;

          }

          .video-box {

            height: 400px;

          }

          .pg-link {

            font-size: 12px;

          }

          .gap-box .search-box {

            gap: 0;

            justify-content: space-between;

          }

          .video-box.gap-box {

              height: 50px;

          }

          .gap-box .search-span {

            font-size: 14px;

            margin-right: 10px;

          }

        }

        /* ipad mini */

        @media (max-width: 820px) {

          .library-card-container {

             display: grid;

              grid-template-columns: repeat(2, 1fr);

              column-gap: 20px;

              row-gap: 40px;

              margin-bottom: 40px;

          }

          .library-card-container article:nth-child(n+5) {

              display: none;

          }

          .resource-hero-icon-four-star {

            left: 40%;

          }

          .section-2 {

            /* margin-top: 7.5%; */

            margin-top: 0;

            padding-top: 0;

          }

          section {

            padding-left: 7.5%;

            padding-right: 7.5%;

          }

          .section-2, .section-3 {

            padding: 50px 7.5%;

          }

          .container.text-cont {

            text-align: center;

          }

          .resource-container {

            display: block;

          }

          .section-2-title {

            font-size: 50px;

          }

          .section-2-subtitle {

              width: 80%;

              padding: 0 10%;

              text-align: center;

          }

          .filter-container {

              margin-top: 20px;

              left: 85%;

              position: relative;

          }

          .text-container.text-cont {

              text-align: center;

          }

          .video-box {

            display: block;

            height: 100%;

          }

          .section-2-title span {

              display: block;

          }

          .section-2-title {

            line-height: 1.2;

          }

          .recap {

              display: block;

              position: relative;

          }

          .recap-text {

              text-align: center;

              position: relative;

              margin-top: 40px;

          }

          .navigate-btn-group {

              justify-content: center;

          }

          .recap-title {

            margin-bottom: 0;

          }

          .video-yt-cont {

              min-height: 350px;

          }

          iframe.gradient-border {

              height: 350px;

          }

          .search-box {

            justify-content: center;

            margin: 40px 0;

          }

          .event-item {

              grid-template-columns: 2fr 1fr 1fr; /* thumbnail nằm trong 1 cột */

              gap: 20px;

          }

          .item-thumbnail {

              width: 100%;

              min-width: 628px;

              grid-column: 1 / -1;

          }

          .thumbnail-item {

            max-width: unset;

          }



        }



        @media (max-width: 820px) {

          .gap-box .search-box {

            gap: 0;

            padding: 0 32%;

          }

        }



        /* mobile */

        @media (min-width: 700px) { 

          .search-box-mobile { display: none !important; }

        }



        @media (max-width: 699px) {

          .resource-hero__tabs.resource-hero__tabs_mobile {

            display: flex;

            margin-bottom: -1px;

            position: fixed !important;

            bottom: 0 !important;

            width: 100% !important;

            z-index: 9999 !important;

          }

          .resource-hero-icon-four-star {

               width: 55px;

               top: 10px;

            }

            

            .resource-hero__eyebrow {

                font-size: calc(36px * 0.6 + (100vw * 36 / 430) * 0.4);

            }

            

            .resource-hero__title {

                font-size: calc(76px * 0.6 + (100vw * 76 / 430) * 0.4);

            }

            

            .resource-hero__tabs {

                gap: 20px;

            }

            .resource-hero__overlay_image_tablet {

                display: none;

            }

            .resource-hero__tabs_desktop {

                display: none;

            }

            

            .resource-hero__overlay {

                display: block !important;

                background-image: url(https://dev.learningchain.vn/wp-content/uploads/2025/11/PIC_tin-tuc_mobile.webp) !important;

                aspect-ratio: 430/ 475 !important;

            }

            

            .resource-hero__inner {

                padding-bottom: calc(120px * 0 + (100vw * 120 / 430) * 1.0);

                padding-top: calc(35px * 0 + (100vw * 35 / 430) * 1.0);

            }

            

            .resource-hero__tabs_mobile {

               display: flex;

               /* position: absolute; */

               position: fixed;

               /* top: calc(310px * 0 + (100vw * 310 / 430) * 1.0); */

               bottom: 0;

               left: 0;

               justify-content: center;

               background: radial-gradient(140% 180% at 12% 5%, rgb(0 0 0 / 18%), rgb(217 0 0 / 0%) 55%), radial-gradient(120% 160% at 95% 15%, rgb(220 220 220 / 4%), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #2d2d2d, #1a1a1a 55%, #424242);

               padding: 10px 0;

               z-index: 20;

               width: 100%;

            }

            

            .resource-hero__tabs::before{ 

                content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 

                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><filter id="noise"><feTurbulence baseFrequency="0.95" numOctaves="3" stitchTiles="stitch" type="fractalNoise"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>'); 

                opacity: 0.18; 

                z-index: 1; 

                pointer-events: none;

            }

            

            .resource-tab_icon_learning_chain {

                width: 28px;

                height: auto;

                aspect-ratio: 43/25;

            }

            

            .resource-tab {

                gap: 5px;

            }

            .resource-hero {

                position: relative;

                margin-top: 85px;

                padding-bottom: calc(150px * 0 + (100vw * 150 / 430) * 1.0);

            }

            .section-2-subtitle {

              width: 100%;

              text-align: center;

              padding: 0;

            }





          .section-2 {

              /* margin-top: 12.5%; */

              margin-top: 0;

              padding-top: 0;

          }

          .resource-hero__tabs {

            display: none;

          }

          .library-card-container {

             display: grid;

              grid-template-columns: repeat(1, 1fr);

              column-gap: 20px;

              row-gap: 40px;

              margin-bottom: 40px;

          }

          .library-card-container article:nth-child(n+5) {

              display: none;

          }

          .filter-container {

              left: 50%;

              transform: translateX(-35%);

              justify-content: center;

              display: grid;

          }

          .filter-btn span {

            width: 90px;

          }

          .filter-btn::after {

              content: "";

              position: relative;

              top: -56px;

              left: -55px;



              width: 124px;

              height: 140px;

              background: url(https://learningchain.vn/wp-content/uploads/thu-vien/light-right.png) no-repeat center;

          }

          .gap-box .search-box {

            padding: 0 16%;

          }

          #section-3 {

              padding-left: 0 !important;

              padding-right: 0 !important;

          }

          #section-3 .text-container.text-cont,

          #section-3 .recap,

          #section-3 .list-video-container {

            padding-left: 7.5%;

            padding-right: 7.5%;

          }

          #section-3 {

            padding: 50px 0;

          }

          .video-yt-cont iframe {

            border: none;

            border-radius: 0;

          }

         

          .section-3-title {

            font-weight: 700;

            line-height: 1.1;

          }

          .section-2-title {

            font-weight: 700;

            line-height: 1.1;

          }

          #section-1 .resource-hero-icon-four-star {

              top: 105px;

              width: 44px;

              left: 166px;

          }

          .resource-hero__inner {

              position: relative;

              top: -111px;

          }

          .item-thumbnail {

            width: 100%;

            min-width: unset !important;

            grid-column: unset !important;

          }

          .item-code, .item-time {

              display: none;

          }

          .search-box {

              display: none;

          }

          .search-box-mobile {

              display: flex;

              justify-content: center;

              margin: 40px 0;

          }

          .search-box-mobile::before {

              content: "";

              position: relative;

              width: 70px;

              height: 56px;

              left: 34px;

              background: url(https://learningchain.vn/wp-content/uploads/thu-vien/light-left.png) no-repeat center;

          }

          .search-box-mobile::after {

              content: "";

              position: relative;

              width: 70px;

              height: 56px;

              left: -36px;

              background: url(https://learningchain.vn/wp-content/uploads/thu-vien/light-right.png) no-repeat center;

          }

          .search-box-mobile img.search-icon {

              position: relative;

              left: -24px;

              width: 18px;

              height: 18px;

              margin-top: 3px;

          }

          .search-box-mobile .search-span {

              color: white;

              font-size: 15px;

              position: relative;

              left: 14px;

          }

          .video-box.gap-box {

              display: none;

          }

          .event-item {

            grid-template-columns: 1fr 1fr;

            gap: 20px;

          }

          .event-desc {

              font-size: 14px;

              font-weight: 400;

          }

          .section-3-title, .section-2-title {

            font-size: 32px;

          }

          .recap-title {

            font-size: 16px;

          }

          .navigate-btn-group {

              display: none;

          }

          .container.video-library-cont {

              padding-bottom: 0 !important;

          }

          .container.pagination-cont {

              margin: 0 !important;

              padding-top: 0 !important;

          }

          .pg-link {

            font-size: 16px;

          }

          .event-name {

              font-size: 16px;

          }

          .event-desc{

              display: block; /* Fallback for non-webkit */

              display: -webkit-box;

              -webkit-line-clamp: 2;

              -webkit-box-orient: vertical;

              overflow: hidden;

              text-overflow: ellipsis;

            }

            .section-2 {

                margin-top: 0;

                padding-top: 0;

            }

            .filter-btn::before {

              height: 60px !important;

              top: -16px !important;

            }

            .filter-btn::after {

              height: 60px !important;

              top: -16px !important;

            }

            .text-cont {

              margin-bottom: 0;

            }

          

        }





        @media (max-width: 1023px) {

            .resource-hero__inner {

               padding-top: 120px;

               padding-bottom: 10px;

            }

            .resource-hero-icon-four-star {

               width: 80px;

               top: 85px;

               left: 40%;

               transform: translateX(-60%);

            }

            .resource-hero__overlay {

                display: none;

            }

            

            .resource-hero__overlay {

              background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/PIC_image_tai_nguyen_tin_tucv.webp);

              aspect-ratio: 767/ 697;

            }

            .resource-hero__overlay_image_tablet {

              display: block;

              pointer-events: none;

              background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/PIC_image_tai_nguyen_tin_tucv.webp);

              background-repeat: no-repeat;

              background-position: center;

              background-size: contain;

              width: 100%;

              height: auto;

              aspect-ratio: 767/ 697;

            }

            .search-box::before {

              left: 42px;

            }

            .gap-box .search-box {

              gap: 0;

            }

            .gap-box .search-span {

              width: 115px;

              left: 20px;

            }

            img.search-icon {

              left: 25px;

            }

            .search-box::after {

              width: 70px;

            }

            .event-time-span {

              font-size: 13px;

            }

            .event-desc {

              font-size: 14px;

            }

            

        }

        @media (max-width: 1180px) {

          .gap-box .search-box {

            gap: 0;

          }

          .search-box::before {

            left: 0;

            width: 88px;

          }

          .gap-box .search-span {

            font-size: 14px;

            margin-right: 0;

            margin-left: -42px;

            left: 14px;

          }

          img.search-icon {

            position: relative;

            left: 25px;

          }

          .search-box::after {

            width: 70px;

          }

        }

        @media (max-width: 600px) {            

            .resource-hero__eyebrow {

                font-size: calc(36px * 0.6 + (100vw * 36 / 430) * 0.4);

            }

            

            .resource-hero__title {

                font-size: calc(76px * 0.6 + (100vw * 76 / 430) * 0.4);

            }

            .resource-hero__overlay_image_tablet {

                display: none;

            }

            .resource-hero__tabs_desktop {

                display: none;

            }

            

            .resource-hero__tabs {

                gap: 72px;

            }

        }

        @media (max-width: 400px) {

            .resource-hero__tabs {

                gap: 60px;

            }

        }

        @media (max-width: 375px) {

            .resource-hero__tabs {

                gap: 45px;

            }

        }

        #lc-video-list.is-loading {

            opacity: 0.5;

            pointer-events: none;

        }

        

        

        /* Thêm con mascot */

        #section-3 {

          overflow-x: unset;

        }

        .mascot-container {

          position: relative;

        }

        .mascot-img {

          position: absolute;

          right: -40px;

          height: 345px;

          width: 287px;

          top: -200px;

        }