body {
        margin: 0;
        background-color: black;
      }
      section {
        overflow-x: hidden;
      }
        a.resource-tab {
            text-decoration: none;
        }
         .resource-hero__title {
            color: #fff;
        }
        #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: 600px) and (max-width: 820px) {
            .resource-hero__text .resource-hero__title {
                  font-size: clamp(56px, calc(105px * 0.7 + (100vw * 150 / 1920) * 0.3), 180px);
              }
       }

      @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 !important;
        }
        .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-left: 8px;
            margin-bottom: -3px;
        }
        .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 {
        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 {
      color: #696969;
      text-decoration: none;
      font-size: 16px;
      font-weight: 400;
    }
    .pg-link-active {
      font-weight: 600;
    }
    .pg-link-active,
    .next-link,
    .back-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;
    }
    .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: 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(56px * 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;
            }
            .section-2-subtitle {
                text-align: center;
            }
        }
        @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;
        }