.online-education-list-page {
          position: relative;
          padding-top: clamp(110px, 12vw, 152px);
          padding-bottom: 56px;
          background:
            radial-gradient(circle at 8% 0%, rgba(241, 137, 68, 0.12), transparent 42%),
            radial-gradient(circle at 92% 6%, rgba(255, 197, 82, 0.18), transparent 40%),
            linear-gradient(180deg, #fffefb 0%, #ffffff 100%);
        }

        .online-education-shell {
          position: relative;
          z-index: 1;
        }

        .online-education-intro {
          max-width: 780px;
          margin: 0 auto 34px;
          text-align: center;
          padding: 0 12px;
        }

        .online-education-intro .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #8f5f21;
          background: rgba(241, 137, 68, 0.12);
          border: 1px solid rgba(241, 137, 68, 0.25);
          padding: 7px 12px;
          border-radius: 999px;
          margin-bottom: 14px;
        }

        .online-education-intro .title {
          font-size: clamp(2.6rem, 2.1vw + 1.6rem, 3.5rem);
          line-height: 1.18;
          margin-bottom: 10px;
        }

        .online-education-intro .description {
          color: #5f6675;
          font-size: 1.7rem;
          line-height: 1.55;
          margin: 0;
        }

        .online-education-grid {
          row-gap: 28px !important;
        }

        .online-course-col {
          display: flex;
        }

        .online-course-card {
          border-radius: 18px !important;
          padding: 0 !important;
          border: 1px solid #f0eadf;
          box-shadow: 0 20px 45px rgba(25, 35, 53, 0.08);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
        }

        .online-course-card:hover {
          transform: translateY(-7px);
          box-shadow: 0 28px 55px rgba(25, 35, 53, 0.14);
        }

        .online-course-card .rbt-card-img {
          aspect-ratio: 16 / 9;
          overflow: hidden;
          height: auto;
          border-radius: 18px 18px 0 0 !important;
          background: #f5f7fa;
          flex: 0 0 auto;
        }

        .online-course-card .rbt-card-img a {
          display: block;
          width: 100%;
          height: 100%;
        }

        .online-course-card .rbt-card-img a img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          border-radius: 18px 18px 0 0 !important;
        }

        .online-course-card .rbt-card-body {
          padding: 24px 24px 20px;
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .online-course-title {
          font-size: 1.8rem !important;
          line-height: 1.3 !important;
          margin-bottom: 8px !important;
          min-height: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .online-course-card .rbt-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 6px 12px;
          margin-bottom: 12px;
        }

        .online-course-card .rbt-meta li {
          margin: 0;
          font-size: 1.4rem;
          color: #616b7d;
        }

        .online-course-card .rbt-meta li i {
          color: var(--color-primary);
        }

        .online-course-card .card-description {
          font-size: 1.45rem;
          color: #4f596a;
          line-height: 1.45;
          min-height: 0;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .online-course-quota {
          margin: 0 0 10px;
          padding: 6px 10px;
          border-radius: 8px;
          background: #fff4e8;
          color: #9a3412;
          font-size: 1.3rem;
          font-weight: 700;
          line-height: 1.35;
        }

        .online-course-card .countdownupcomingList {
          margin-bottom: 16px;
          border: 1px solid rgba(255, 255, 255, 0.35);
          box-shadow: 0 12px 24px rgba(241, 137, 68, 0.24);
          min-height: 50px;
          width: 100%;
          display: block;
        }

        .online-course-card .countdownupcomingList ul {
          margin: 0;
          padding: 8px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
        }

        .online-course-card .countdownupcomingList .counter-text {
          width: 100%;
          padding: 0 !important;
          font-size: 12px !important;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: #fff;
          opacity: 0.92;
        }

        .online-course-card .rbt-card-bottom {
          margin-top: auto;
          border-top: 1px solid #eceef3;
          padding-top: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }

        .online-course-card .rbt-price .current-price {
          color: #192335;
          font-weight: 800;
          font-size: 2.3rem;
        }

        .online-course-card .rbt-price .off-price {
          font-size: 1.6rem;
          font-weight: 500;
          text-decoration: line-through;
          opacity: 0.45;
          margin-left: 7px;
        }

        .online-course-card .rbt-price {
          min-width: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: 4px 8px;
        }

        .online-course-card .price-vat,
        .rbt-price .price-vat {
          display: block;
          width: 100%;
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.02em;
          color: #6b7385;
          text-transform: none;
        }

        .online-course-card .rbt-btn-link {
          flex: 0 0 auto;
          white-space: nowrap;
          font-size: 1.4rem;
          font-weight: 700;
          color: var(--color-primary);
        }

        .online-education-empty {
          margin: 0 auto;
          max-width: 760px;
          text-align: center;
          background: #fff;
          border: 1px solid #eee8dd;
          border-radius: 16px;
          padding: 40px 24px;
          box-shadow: 0 18px 30px rgba(25, 35, 53, 0.06);
        }

        .online-education-empty h3 {
          margin-bottom: 12px;
          font-size: 2.5rem;
        }

        .online-education-empty p {
          color: #5f6675;
          margin: 0;
        }

        @media only screen and (max-width: 991px) {
          .online-education-list-page {
            padding-top: 108px;
          }

          .online-course-title {
            min-height: auto;
          }

          .online-course-card .card-description {
            min-height: auto;
          }
        }

        @media only screen and (max-width: 767px) {
          .online-education-list-page {
            padding-top: calc(var(--online-header-offset, 138px) + 16px);
            padding-bottom: 40px;
          }

          .online-education-intro {
            text-align: left;
            margin-bottom: 22px;
            padding-top: 8px;
          }

          .online-course-card .rbt-card-body {
            padding: 18px 16px 16px;
          }

          .online-course-card .rbt-price .current-price {
            font-size: 2rem;
          }

          .online-course-card .rbt-price .off-price {
            font-size: 1.5rem;
          }
        }