.elementor-9 .elementor-element.elementor-element-64114a5{--display:flex;--min-height:1096px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-7cdc55a{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9 .elementor-element.elementor-element-7cdc55a.e-con{--align-self:stretch;--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-2b82b3f{text-align:center;}.elementor-9 .elementor-element.elementor-element-5bb8669{--display:flex;}.elementor-9 .elementor-element.elementor-element-5bb8669.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-679f861{text-align:center;}.elementor-9 .elementor-element.elementor-element-03efdb9{text-align:center;}.elementor-9 .elementor-element.elementor-element-03efdb9 .elementor-heading-title{color:#6C2DC7;}.elementor-9 .elementor-element.elementor-element-128d0fb{text-align:center;}.elementor-9 .elementor-element.elementor-element-e836a1e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-93f9271{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;}.elementor-9 .elementor-element.elementor-element-93f9271.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9 .elementor-element.elementor-element-d6c64bd{width:var( --container-widget-width, 121.827% );max-width:121.827%;--container-widget-width:121.827%;--container-widget-flex-grow:0;}.elementor-9 .elementor-element.elementor-element-d6c64bd.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-9b9135f{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-end;}.elementor-9 .elementor-element.elementor-element-3b768bb .elementor-heading-title a{transition-duration:0s;}.elementor-9 .elementor-element.elementor-element-3729f6d{width:var( --container-widget-width, 8.789% );max-width:8.789%;--container-widget-width:8.789%;--container-widget-flex-grow:0;}.elementor-9 .elementor-element.elementor-element-3729f6d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-3729f6d img{max-width:86%;}.elementor-9 .elementor-element.elementor-element-d42a0c4{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-9 .elementor-element.elementor-element-fb7eb8b{--display:flex;}.elementor-9 .elementor-element.elementor-element-fb7eb8b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-c954ad9{width:var( --container-widget-width, 263.898% );max-width:263.898%;--container-widget-width:263.898%;--container-widget-flex-grow:0;}.elementor-9 .elementor-element.elementor-element-c954ad9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-ff501a5{--display:flex;}.elementor-9 .elementor-element.elementor-element-74a7940{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-9 .elementor-element.elementor-element-74a7940.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-5401aa0{--display:flex;}.elementor-9 .elementor-element.elementor-element-5401aa0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-07230ad{--display:flex;}.elementor-9 .elementor-element.elementor-element-84d4eda{--display:flex;}.elementor-9 .elementor-element.elementor-element-9d6dac4{--display:flex;}.elementor-9 .elementor-element.elementor-element-1795997{--display:flex;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-9 .elementor-element.elementor-element-44df3c3{--grid-row-gap:31px;--grid-column-gap:28px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__thumbnail__link{width:100%;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__meta-data span + span:before{content:"•";}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__card{border-width:4px;border-radius:38px;padding-top:5px;padding-bottom:5px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__text{padding:0 5px;margin-top:20px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__meta-data{padding:10px 5px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__avatar{padding-right:5px;padding-left:5px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__badge{right:0;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__card .elementor-post__badge{margin:20px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-9 .elementor-element.elementor-element-d42a0c4{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-64114a5{--min-height:0px;}.elementor-9 .elementor-element.elementor-element-2b82b3f{text-align:center;}.elementor-9 .elementor-element.elementor-element-93f9271{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-9 .elementor-element.elementor-element-d42a0c4{--content-width:500px;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-9 .elementor-element.elementor-element-fb7eb8b{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-9 .elementor-element.elementor-element-ff501a5{--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-9 .elementor-element.elementor-element-84d4eda{--min-height:0px;}.elementor-9 .elementor-element.elementor-element-1795997{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-9 .elementor-element.elementor-element-44df3c3 .elementor-post__thumbnail__link{width:100%;}}@media(min-width:768px){.elementor-9 .elementor-element.elementor-element-7cdc55a{--width:60.143%;}.elementor-9 .elementor-element.elementor-element-5bb8669{--width:114.613%;}.elementor-9 .elementor-element.elementor-element-93f9271{--width:40%;}.elementor-9 .elementor-element.elementor-element-fb7eb8b{--width:100%;}.elementor-9 .elementor-element.elementor-element-5401aa0{--width:100%;}}/* Start custom CSS for heading, class: .elementor-element-3b768bb */.curved-underline .highlight {
  color: #FF4B8E;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  font-weight: bold;
  overflow: hidden;
}

.curved-underline .highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='14' viewBox='0 0 100 14' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12 C30 2, 70 2, 100 12' stroke='%23FF4B8E' fill='transparent' stroke-width='2' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  animation: slideUnderline 2s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes slideUnderline {
  0% {
    mask-position: 200% 0;
    -webkit-mask-position: 200% 0;
  }
  100% {
    mask-position: 0% 0;
    -webkit-mask-position: 0% 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c954ad9 */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fb7eb8b */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-74a7940 */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff501a5 */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-39af090 */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5401aa0 */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0bdd5b8 */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07230ad */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-40c8aaf */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-84d4eda */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3cf28bd */.course-card {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(145deg, #f6f9ff, #f0f0ff); /* Gradient nhẹ pastel */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 10px;
  position: relative;
  cursor: pointer;
}

/* Hiệu ứng ánh sáng trung tâm */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hover nổi bật hơn */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Click: hiệu ứng khi được chọn */
.course-card.clicked {
  background: linear-gradient(145deg, #e0f7fa, #f5faff); /* Màu nền khác khi bấm */
  border: 2px solid #00bcd4; /* Viền sáng khi bấm */
  box-shadow: 0 12px 28px rgba(0, 188, 212, 0.3); /* Đổ bóng xanh */
}

/* Ảnh + nội dung */
.course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  z-index: 2;
  position: relative;
}

/* Nội dung khóa học */
.course-content {
  padding: 15px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 2;
}

.course-location {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0 10px 0;
  color: #333;
}

.course-content p {
  font-size: 14px;
  margin: 4px 0;
}

.course-price {
  color: #e91e63;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Icon bút chì 2K8 */
.course-card::after {
  content: url('https://cdn-icons-png.flaticon.com/512/3135/3135715.png'); /* icon bút chì demo */
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9d6dac4 */<body>
  ...
  <div class="course-card">
    <h3>KHÓA HỌC K8</h3>
    <ul>
      <li><a href="#">Tài liệu Bát Xì La Hướng</a></li>
      <li><a href="#">Tham gia nhóm Facebook</a></li>
      <li><a href="#">Điểm danh & nhận tài liệu</a></li>
    </ul>
    <div class="bottom-buttons">
      <a class="check-btn" href="#">Check</a>
      <a class="link-btn" href="#">Link</a>
    </div>
  </div>
</body>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d42a0c4 */@media (max-width: 768px) {
  .container-mobile-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .container-mobile-row > .elementor-container,
  .container-mobile-row > .elementor-element {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }
}/* End custom CSS */