.default-card-force,
.card-event {
  border       : none !important;
  background   : transparent !important;
  border-radius: 0 !important;
  padding      : 0 !important;
  box-shadow   : none !important;
}

.filtering-section {
  margin-bottom: 15px !important;
}

.card-event:first-child {
  margin-top: 0px !important;
}

.row-vdo {
  padding         : 25px;
  border          : 1px solid #c7c7c7;
  border-radius   : 8px;
  box-shadow      : 0 1px 5px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-top      : 20px;
  background-color: var(--default-white);
}

.video-card {
  border-radius : 8px;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  height        : 100%;
  width         : 100% !important;
}

.card-event {
  background: transparent !important;
}

.video-item {
  margin-bottom: 20px;
  display      : flex;
}

.video-item .video-card {
  display       : flex;
  flex-direction: column;
  height        : 100%;
  border        : 1px solid #d9d9d9;
  border-radius : 8px !important;
  overflow      : hidden;
  box-shadow    : 0 1px 5px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.video-thumb-wrap {
  position    : relative;
  width       : 100%;
  padding-top : 56.25%;
  background  : #f3f3f3;
  aspect-ratio: 16 / 9;
}

.video-card .thumb-link {
  display: block;
  outline: none;
}

.video-card .video-thumb-wrap {
  position     : relative;
  overflow     : hidden;
  border-radius: 0px;
  background   : #f1f4f9;
  aspect-ratio : 16 / 9;
  min-height   : 160px;
}

@supports not (aspect-ratio: 16/9) {
  .video-card .video-thumb-wrap {
    height     : 0;
    padding-top: 56.25%;
  }
}

@supports not (aspect-ratio: 16/9) {
  .video-card .video-thumb-wrap>img {
    position: absolute;
    inset   : 0;
  }
}

.video-thumb-wrap img {
  position       : absolute;
  inset          : 0;
  width          : 100%;
  height         : 100%;
  display        : block;
  object-fit     : cover;
  object-position: center center;
  opacity        : 1;
}

#dataListFragmentWeb .video-thumb-wrap img.IconImageLoader,
#dataListFragmentWeb .video-thumb-wrap img.event-thumbnail {
  width     : 100% !important;
  height    : 100% !important;
  max-width : none !important;
  max-height: none !important;
}

.video-card .video-thumb-wrap>img.lazy-img[data-loaded="true"] {
  opacity: 1;
}

.video-card .video-thumb-wrap::before,
.video-card .video-thumb-wrap::after {
  content       : "";
  position      : absolute;
  left          : 45%;
  top           : 45%;
  opacity       : 1 !important;
  pointer-events: none;
  z-index       : 2;
}

.video-card .video-thumb-wrap::before {
  width        : 54px;
  height       : 54px;
  border-radius: 999px;
  background   : radial-gradient(100% 100% at 30% 30%, #ff6b6b 0%, #e11d48 100%);
  box-shadow   : 0 8px 18px rgba(225, 29, 72, 0.28);
  content      : "";
  border       : 2px solid rgba(255, 255, 255, 0.9);
}

.video-card .video-thumb-wrap::after {
  content    : "\f04b";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  color      : var(--default-white);
  font-size  : 33px;
  left       : 49%;
}

.video-card .thumb-link:hover .video-thumb-wrap::before,
.video-card .thumb-link:hover .video-thumb-wrap::after,
.video-card .thumb-link:focus .video-thumb-wrap::before,
.video-card .thumb-link:focus .video-thumb-wrap::after {
  opacity: 1;
}

.video-card .thumb-link:focus-visible {
  outline   : 0;
  box-shadow: 0 0 0 3px rgba(147, 164, 255, 0.35);
}

.video-card .card-body {
  padding       : 12px 14px 14px;
  display       : flex;
  flex-direction: column;
  flex          : 1 1 auto;
}

.video-card .event-card-title {
  color             : #0f1b61;
  font-weight       : 700;
  line-height       : 1.7;
  margin            : 0 0 6px 0;
  display           : -webkit-box;
  line-clamp        : 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  min-height        : calc(1em * 1.35 * 2);
  text-align: left;
}

.video-card .data-mb-meta {
  color    : #64748b;
  font-size: 13px;
}

@media (max-width: 575.98px) {
  .video-card .card-body {
    padding: 10px 12px;
  }
}

@media (max-width: 575.98px) {
  .video-card .event-card-title {
    line-clamp: 3;
    min-height: auto;
  }
}

.video-card .video-thumb-wrap>.lazy-wrap {
  position     : absolute;
  inset        : 0;
  display      : block;
  width        : 100%;
  height       : 100%;
  border-radius: inherit;
  overflow     : hidden;
}

.video-card .video-thumb-wrap>.lazy-wrap>img {
  position       : absolute;
  inset          : 0;
  width          : 100% !important;
  height         : 100% !important;
  object-fit     : cover;
  object-position: center;
  opacity        : 1 !important;
  visibility     : visible !important;
  font           : 0/0 a;
  color          : transparent;
  text-shadow    : none;
}


@media (max-width: 575.98px) {
  .video-card .video-thumb-wrap::before {
    width : 46px;
    height: 46px;
  }
}

@media (max-width: 575.98px) {
  .video-card .video-thumb-wrap::after {
    font-size: 16px;
  }
}

.card-event:focus,
.card-event:focus-visible,
#dataListFragmentWeb {
  outline   : none !important;
  box-shadow: none !important;
}

/* Ensure no outline on web container when inner controls are focused */
.wv .card-event:focus,
.wv .card-event:focus-visible,
.wv .card-event:focus-within {
  outline   : none !important;
  box-shadow: none !important;
}

/* Modal: common */
.gdt-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.gdt-video-modal.is-open { display: block; }
.gdt-video-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.gdt-video-modal__dialog {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 92vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden;
}
.gdt-video-modal__close {
  position: absolute; right: 10px; top: 8px;
  z-index: 3;
  background: transparent; border: 0; color: #111;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.gdt-video-modal__body {
  padding: 8px;
}
.gdt-video-modal__body .video-embed { width: 100%; }

/* Blue play icon for Facebook */
.video-card .video-thumb-wrap.is-facebook::before {
  background: radial-gradient(100% 100% at 30% 30%, #6ea8fe 0%, #0d6efd 100%);
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.28);
}
/* Optional different icon for mp4 */
.video-card .video-thumb-wrap.is-mp4::before {
  background: radial-gradient(100% 100% at 30% 30%, #34d399 0%, #16a34a 100%);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}

/* Watch detail button bottom-right */
.video-card .watch-detail-btn {
  margin-top: 10px;
  align-self: flex-end;
}
@media (max-width: 575.98px) {
  .gdt-video-modal__dialog { width: 96vw; }
}