/* Simple YouTube Responsive — layout + overlay button */
.erd-youtube-responsive > div{
  position:relative;
  width:100%;
  height:0;                 /* tỷ lệ lấy từ padding-bottom inline của shortcode */
  display:block;
  clear:both;
  padding:0;
  overflow:hidden !important;
}

/* Child fill khung */
.erd-youtube-responsive > div > *,
.erd-ytplay img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  cursor:pointer;
}
.erd-ytplay img{
  object-fit:cover;
  object-position:center center;
  max-width:unset !important;
}
.erd-ytplay{
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
  touch-action:manipulation;
}

/* Nút play đỏ kiểu YouTube – bo góc tùy biến (đồng bộ CSS var) */
.erd-youtube-responsive .erd-ytplay:after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:9%; height:0; padding-bottom:8.5%; max-width:160px;
  transform:translate(-50%,-50%);
  border-radius:var(--erdyt-play-radius,35%);
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 84'>\
  <rect x='0' y='0' width='120' height='84' rx='18' ry='18' fill='%23ff0000'/>\
  <polygon points='50,27 85,42 50,57' fill='%23ffffff'/>\
</svg>") no-repeat center/contain transparent;
  -webkit-filter:drop-shadow(0 0 12px rgba(0,0,0,.28));
  filter:drop-shadow(0 0 12px rgba(0,0,0,.28));
  transition:transform .2s ease, -webkit-filter .2s ease, filter .2s ease, border-radius .2s ease;
  z-index:2;
}
.erd-youtube-responsive .erd-ytplay:hover:after{
  transform:translate(-50%,-50%) scale(1.04);
  -webkit-filter:drop-shadow(0 0 16px rgba(0,0,0,.38));
  filter:drop-shadow(0 0 16px rgba(0,0,0,.38));
}