html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif; color: #fff; }
#wrap, #art { position: absolute; inset: 0; }

#cover { position: absolute; inset: 0; background: #000; cursor: pointer; }
#cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
#cover img:not([src]), #cover img.broken { visibility: hidden; }
#play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 14vmin, 88px); height: clamp(56px, 14vmin, 88px);
  padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); transition: transform .15s;
}
#play-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
#play-btn svg { width: 100%; height: 100%; }
#play-btn circle { fill: rgba(0, 0, 0, .55); stroke: rgba(255, 255, 255, .9); stroke-width: 2; }
#play-btn path { fill: #fff; }
#resume-hint {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  font-size: 13px; background: rgba(0, 0, 0, .6); padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}

.dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200;
  background: rgba(20, 20, 20, .92); border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px;
  padding: 14px 18px; max-width: calc(100% - 32px); box-sizing: border-box; text-align: center; font-size: 14px;
}
.dialog p { margin: 0 0 12px; line-height: 1.4; }
.dialog .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dialog button {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
}
.dialog button.primary { background: #fff; color: #111; border-color: #fff; }
#message { pointer-events: none; }

/* Nut lui / toi 10s */
.art-control-seek svg { width: 22px; height: 22px; fill: #fff; }

/* Nut CC phu de (canh banh rang); dang bat -> trang ro, dang tat -> mo */
.fl-cc {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 Arial, sans-serif; letter-spacing: .5px; color: #fff;
  border: 2px solid #fff; border-radius: 3px; padding: 2px 4px; position: relative;
}
.fl-cc { opacity: .5; }
.fl-cc.on { opacity: 1; }
.art-control-subtitle .art-selector-list { min-width: 140px; }

/* Khung hep (dien thoai doc, iframe nho): bot nut de KHONG day mat nut toan man hinh ra ngoai.
   Dien thoai chinh am luong bang nut cung -> an thanh keo am luong; an PiP. */
@media (max-width: 480px) {
  .art-control-pip,
  .art-volume-panel { display: none !important; }
  .art-bottom .art-controls .art-control { padding: 0 3px !important; }
  .art-control-seek { padding: 0 2px !important; }
  .art-control-time { padding: 0 4px !important; font-size: 12px; }
}
@media (max-width: 340px) {
  .art-control-seek { display: none !important; }   /* man rat hep: tua bang cham 2 lan / keo thanh tien do */
}

/* Artplayer mobile keo 2 cum nut ra ngoai -10px (le am) -> nut toan man hinh lot ra ngoai mep. Giu trong khung. */
.art-mobile .art-controls-left,
.art-mobile .art-controls-right { margin-left: 0 !important; margin-right: 0 !important; }

/* Phu de: Artplayer nang phu de len (cao thanh dieu khien + 15px) moi khi thanh dieu khien hien -> tren dt bi cao gan giua hinh.
   Chi nang vua du de khong de len thanh dieu khien; --art-subtitle-bottom do player.js tinh (sat day hinh). */
.art-video-player.art-control-show .art-subtitle {
  bottom: max(var(--art-subtitle-bottom), calc(var(--art-control-height) + 4px));
}