/* ---------------------------------------------------------------
   Skin ArtPlayer dựng theo ảnh mẫu:
   khung nền tối ngả xanh, dải tiến trình liền sát hai mép nằm ngay
   trên hàng nút, hàng nút nền đen, icon + chữ tông xám.
   --------------------------------------------------------------- */
.art-video-player{
    --art-bar:#c9cad1;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:#0b0b12;border-radius:0;
}
.art-video-player .art-video{background:#0b0b12}

.art-video-player .art-bottom{padding:0;background:transparent;display:flex;flex-direction:column}
/* không nền đặc nữa nên icon phải có viền bóng mờ để nổi trên hình sáng */
.art-video-player .art-controls svg,
.art-video-player .art-control-time{filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));text-shadow:0 1px 3px rgba(0,0,0,.85)}

/* --- dải tiến trình: liền một mạch, sát mép, ngay trên hàng nút --- */
.art-video-player .art-progress{padding:0;margin:0;order:1;width:100%}
.art-video-player .art-progress .art-control-progress{height:10px;padding:0;align-items:flex-end}
.art-video-player .art-progress .art-control-progress-inner{
    height:5px;align-items:flex-end;background:#a9aab1;
}
.art-video-player .art-progress .art-progress-loaded{background:#6f7077}
.art-video-player .art-progress .art-progress-played{background:#e9eaee}
.art-video-player .art-progress .art-progress-indicator{
    width:12px;height:12px;margin-left:-6px;border-radius:50%;
    background:#fff;opacity:0;transition:opacity .12s ease;
}
.art-video-player .art-progress:hover .art-progress-indicator{opacity:1}

/* --- hàng nút --- */
.art-video-player .art-controls{order:2;height:46px;padding:0 14px;background:transparent}
.art-video-player .art-controls-left{gap:10px}
.art-video-player .art-controls-right{gap:12px;padding-right:2px}
.art-video-player .art-control{opacity:1;padding:0;min-width:auto;transition:opacity .15s ease}
.art-video-player .art-control:hover{opacity:.75}
.art-video-player .art-control svg{width:21px;height:21px;fill:var(--art-bar);color:var(--art-bar)}
.art-video-player .art-control-volume .art-volume-panel{margin-left:6px}
.art-video-player .art-control-volume .art-volume-inner{background:var(--art-bar)}
.art-video-player .art-control-time{
    font-size:15px;color:var(--art-bar);font-variant-numeric:tabular-nums;
    letter-spacing:.2px;padding:0 0 0 6px;
}
.art-video-player .art-control-back10 svg,
.art-video-player .art-control-fwd10 svg{fill:none;stroke:var(--art-bar);stroke-width:2}
.art-video-player .art-control-back10 svg text,
.art-video-player .art-control-fwd10 svg text{fill:var(--art-bar);stroke:none}

/* nút play lớn giữa khung: dùng ảnh, bỏ nền tròn của thư viện */
.art-video-player .art-state{
    background:none!important;border:0!important;box-shadow:none!important;
    width:auto;height:auto;padding:0;
}
.art-video-player .art-state .art-ico-state{
    width:104px;height:104px;display:block;transition:transform .15s ease;
}
.art-video-player .art-state:hover .art-ico-state{transform:scale(1.06)}

/* lớp chờ khi chưa phát: nền tối + biểu tượng màn hình có nút play */
.art-video-player .art-cover{
    width:100%;height:100%;background:#0b0b12;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.art-video-player .art-cover svg{width:104px;height:104px;color:#9c9ca3;fill:currentColor;transition:color .15s ease}
.art-video-player .art-cover:hover svg{color:#b9b9c0}

.art-video-player .art-settings,
.art-video-player .art-contextmenus{
    border-radius:8px;background:rgba(18,18,22,.97);border:1px solid rgba(255,255,255,.1);
}
.art-video-player .art-setting-item:hover,
.art-video-player .art-contextmenu:hover{background:rgba(255,255,255,.08)}
.art-video-player .art-current-setting{color:#fff}
.art-video-player .art-notice-inner,
.art-video-player .art-tip{border-radius:6px;background:rgba(0,0,0,.85);font-size:13px}
.art-video-player .art-loading svg circle{stroke:var(--art-bar)}

@media (max-width:640px){
    .art-video-player .art-controls{height:40px;padding:0 8px;background:transparent}
    .art-video-player .art-controls-left{gap:8px}
    .art-video-player .art-controls-right{gap:12px}
    .art-video-player .art-control svg{width:18px;height:18px}
    .art-video-player .art-control-time{font-size:13px}
    .art-video-player .art-cover svg{width:74px;height:74px}
}

/* Thư viện đặt min-width/min-height mỗi nút = chiều cao thanh điều khiển
   (--art-control-height), nên nút luôn rộng 46px và trông xa nhau dù gap nhỏ.
   Ép về đúng bề rộng của icon rồi mới chỉnh khoảng cách bằng gap. */
.art-video-player .art-controls .art-control{
    min-width:0!important;min-height:0!important;width:auto;padding:0!important;margin:0;
}
.art-video-player .art-controls-right{gap:14px}
.art-video-player .art-controls-left{gap:12px}
.art-video-player .art-controls .art-control-volume{min-width:auto!important}
@media (max-width:640px){
    .art-video-player .art-controls-right{gap:13px}
    .art-video-player .art-controls-left{gap:10px}
}

/* Khoảng cách tâm–tâm = bề rộng nút + gap. Nút tự nhiên rộng ~32px nên phải
   ghim bề rộng theo icon rồi cộng gap cho ra đúng 35px. */
.art-video-player .art-controls-right .art-control{width:24px}
.art-video-player .art-controls-right{gap:16px}
@media (max-width:640px){
    .art-video-player .art-controls-right .art-control{width:20px}
    .art-video-player .art-controls-right{gap:12px}
}

/* icon play giữa khung do người dùng cung cấp (tự mang sẵn đổ bóng) */
.art-video-player .art-cover img{width:104px;height:104px;display:block;transition:transform .15s ease}
.art-video-player .art-cover:hover img{transform:scale(1.06)}
@media (max-width:640px){ .art-video-player .art-cover img{width:72px;height:72px} }

/* icon play tuỳ chỉnh (ảnh) trên thanh điều khiển — CSS cho svg không áp cho img */
.art-video-player .art-controls .art-ico-img{
    width:24px;height:24px;display:block;object-fit:contain;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
@media (max-width:640px){ .art-video-player .art-controls .art-ico-img{width:21px;height:21px} }

/* 5) Thư viện đặt font PingFang SC / Microsoft YaHei — hai font Trung Quốc này
   dựng dấu tiếng Việt sai nét (ữ, ế, ợ…). Ép font hệ thống cho mọi phần tử con. */
.art-video-player,
.art-video-player *{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
}