/* ===== Explaina Player ===== */
.xp.hide{ display:none }
.xp{ position:relative; margin:16px 0 }
.xp-wrap{ background:#0f1836; color:#eaf2ff; border:1px solid #27407a; border-radius:14px; overflow:hidden; }
.xp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:#13214a; border-bottom:1px solid #27407a }
.xp-brand{ display:flex; align-items:center; gap:10px }
.xp-logo{ height:28px; width:auto; object-fit:contain }
.xp-title{ font-weight:800; font-size:16px; letter-spacing:.2px; opacity:.95 }
.xp-close{ background:transparent; color:#eaf2ff; border:1px solid #27407a; border-radius:8px; padding:6px 10px; cursor:pointer }
.xp-stage{ position:relative; padding:12px }
.xp-video{ width:100%; background:#000; border:1px solid #27407a; border-radius:12px; display:block }

.xp-controls{ margin-top:8px }
.xp-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.xp-btn{ border:1px solid #27407a; background:#152a5a; color:#eaf2ff; border-radius:8px; padding:8px 10px; cursor:pointer; min-width:44px; min-height:40px }
.xp-btn:hover{ filter:brightness(1.08) }
.xp-time{ font-size:13px; opacity:.85 }
.xp-spacer{ flex:1 }
.xp-vol{ width:120px }
.xp-progress{ position:relative; height:10px; background:#13214a; border:1px solid #27407a; border-radius:999px; margin-top:8px; overflow:hidden; cursor:pointer }
#xpProg{ height:100%; width:0%; background:linear-gradient(90deg,#17c9c0,#2dd4bf) }

.xp-end{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:10px; padding:10px; border:1px dashed #27407a; border-radius:10px }
.xp-end h3{ margin:0 0 6px 0 }
.xp-end-col{ background:#13214a; border:1px solid #27407a; border-radius:10px; padding:10px }
.xp-continue{ display:inline-block; margin-top:8px }
.xp-next{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr) }
.xp-card{ border:1px solid #27407a; border-radius:10px; overflow:hidden; background:#0f1836; cursor:pointer }
.xp-thumb{ aspect-ratio:16/9; background:#0f1a3b; display:block }
.xp-card .cap{ padding:8px 10px; font-size:13px; min-height:40px }

@media (min-width:720px){
  .xp-end{ grid-template-columns:1fr 1.5fr }
  .xp-next{ grid-template-columns:repeat(3,1fr) }
}