/* =========================================================
   AiDrama – thanh điều khiển video tuỳ biến (player.js)
   ========================================================= */
.pc { user-select: none; -webkit-tap-highlight-color: transparent; }
.pc-bar { container-type: inline-size; user-select: none; }
.pc .player-video { cursor: pointer; }
.pc-ui { position: absolute; inset: 0; pointer-events: none; }
.pc-ui > * { pointer-events: auto; }
.pc-ui > .pc-shade, .pc-ui > .pc-spinner, .pc-ui > .pc-flash { pointer-events: none; }

/* Lớp tối phía dưới để chữ/icon dễ đọc */
.pc-shade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0));
    opacity: 0; transition: opacity .25s;
}

/* Thanh điều khiển */
.pc-bar {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px 8px;
    opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.pc-show .pc-bar, .pc-paused .pc-bar, .pc-menu-open .pc-bar, .pc-seeking .pc-bar,
.pc-show .pc-shade, .pc-paused .pc-shade, .pc-menu-open .pc-shade { opacity: 1; transform: none; }
.pc-fullscreen:not(.pc-show):not(.pc-paused) { cursor: none; }
.pc-fullscreen:not(.pc-show):not(.pc-paused) .player-video { cursor: none; }

/* Tiến độ */
.pc-progress { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.pc-rail { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); transition: height .15s; overflow: hidden; }
.pc-progress:hover .pc-rail, .pc-seeking .pc-rail, .pc-progress:focus-visible .pc-rail { height: 5px; }
.pc-buffer, .pc-hover, .pc-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.pc-buffer { background: rgba(255, 255, 255, .35); }
.pc-hover { background: rgba(255, 255, 255, .35); }
.pc-played { background: var(--accent); }
.pc-knob {
    position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px rgba(229, 9, 20, .25); transform: scale(0); transition: transform .15s;
}
.pc-progress:hover .pc-knob, .pc-seeking .pc-knob, .pc-progress:focus-visible .pc-knob { transform: scale(1); }
.pc-progress:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); border-radius: 4px; }
.pc-tooltip {
    position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px;
    background: rgba(8, 8, 10, .9); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff;
    opacity: 0; pointer-events: none; transition: opacity .12s; white-space: nowrap;
}
.pc-progress:hover .pc-tooltip, .pc-seeking .pc-tooltip { opacity: 1; }

/* Hàng nút */
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 2px; }
.pc-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pc-btn {
    position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    color: #fff; opacity: .92; transition: opacity .15s, background-color .15s, transform .1s;
}
.pc-btn:hover:not(:disabled) { opacity: 1; background: rgba(255, 255, 255, .1); }
.pc-btn:active:not(:disabled) { transform: scale(.92); }
.pc-btn:disabled { opacity: .35; cursor: default; }
.pc-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pc-btn svg { width: 22px; height: 22px; }
.pc-btn.is-on::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: var(--accent);
}
/* Tooltip của nút */
.pc-btn[data-tip]::before {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
    padding: 5px 9px; border-radius: 6px; background: rgba(8, 8, 10, .92); color: #fff; font-size: 12px; font-weight: 600;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.pc-btn[data-tip]:hover:not(:disabled)::before { opacity: 1; transform: translate(-50%, 0); }
.pc-group:first-child .pc-btn:first-child::before { left: 0; transform: translate(0, 4px); }
.pc-group:first-child .pc-btn:first-child:hover::before { transform: none; }
.pc-group:last-child .pc-btn:last-child::before { left: auto; right: 0; transform: translate(0, 4px); }
.pc-group:last-child .pc-btn:last-child:hover::before { transform: none; }
.pc-menu-open .pc-btn::before { display: none; }

.pc-time { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--fg-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-time b { color: #fff; font-weight: 700; }

/* Âm lượng: thanh trượt hiện khi rê chuột */
.pc-vol { display: flex; align-items: center; }
.pc-volume {
    -webkit-appearance: none; appearance: none; width: 0; height: 4px; margin: 0; border-radius: 4px; cursor: pointer; opacity: 0;
    background: linear-gradient(to right, #fff var(--val, 100%), rgba(255, 255, 255, .3) var(--val, 100%));
    transition: width .2s, opacity .2s, margin .2s;
}
.pc-vol:hover .pc-volume, .pc-volume:focus-visible { width: 68px; margin: 0 8px 0 2px; opacity: 1; }
.pc-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.pc-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* Nút phát lớn ở giữa khi tạm dừng */
.pc-big {
    position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--bg-0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.85); pointer-events: none;
    transition: opacity .2s, transform .2s var(--ease-out-expo);
}
.pc-big svg { margin-left: 4px; }
.pc-paused:not(.pc-loading) .pc-big { opacity: 1; transform: none; pointer-events: auto; }
.pc-big:hover { transform: scale(1.06) !important; }

/* Hiệu ứng khi bấm phím / chạm */
.pc-flash {
    position: absolute; left: 50%; top: 50%; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 14px;
    margin: -32px 0 0; transform: translateX(-50%); border-radius: 32px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0;
}
.pc-flash svg { width: 28px; height: 28px; }
.pc-flash-text { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-flash.is-on { animation: pcFlash .6s ease-out; }
@keyframes pcFlash { 0% { opacity: 1; transform: translateX(-50%) scale(.85); } 100% { opacity: 0; transform: translateX(-50%) scale(1.15); } }

/* Vòng xoay đang tải */
.pc-spinner {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; opacity: 0; animation: pcSpin .8s linear infinite;
}
.pc-loading .pc-spinner { opacity: 1; }
@keyframes pcSpin { to { transform: rotate(360deg); } }

/* Menu tốc độ / cài đặt */
.pc-menu {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; width: 250px; max-width: calc(100% - 24px); max-height: calc(100% - 90px);
    overflow-y: auto; padding: 6px; border-radius: 14px; background: rgba(17, 17, 20, .96); border: 1px solid var(--line-2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(14px); animation: csIn .16s var(--ease-out-expo);
}
.pc-menu[hidden] { display: none; }
.pc-mh { display: flex; align-items: center; gap: 4px; padding: 8px 10px 6px; font-size: 13px; font-weight: 700; color: var(--fg-1); }
.pc-mback { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 8px; color: #fff; }
.pc-mback:hover { background: rgba(255, 255, 255, .1); }
.pc-mback svg { width: 18px; height: 18px; }
.pc-mi {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: #fff; text-align: left;
}
.pc-mi:hover, .pc-mi:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.pc-mi[aria-checked="true"]:not([data-value="autoplay"]) { color: #fff; }
.pc-mi-check { display: grid; place-items: center; width: 18px; flex-shrink: 0; color: var(--accent-hi); }
.pc-mi-check svg { width: 16px; height: 16px; }
.pc-mi-label { flex: 1; min-width: 0; }
.pc-mi-val { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--fg-1); }
.pc-mi-val svg { width: 16px; height: 16px; }
.pc-switch { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 20px; background: var(--bg-3); transition: background-color .2s; }
.pc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.pc-switch.is-on { background: var(--accent); }
.pc-switch.is-on::after { transform: translateX(14px); }

/* Phụ đề nằm trên thanh điều khiển */
.pc video::cue { background: rgba(0, 0, 0, .7); color: #fff; font-size: 16px; }

/* Toàn màn hình: thanh điều khiển 720px căn giữa như dramaflix */
.pc-fullscreen { width: 100% !important; max-width: none !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; background: #000; }
.pc-fullscreen .pc-bar { left: 50%; right: auto; width: min(720px, calc(100% - 32px)); padding: 0 0 18px; transform: translateX(-50%); }
.pc-fullscreen.pc-show .pc-bar, .pc-fullscreen.pc-paused .pc-bar, .pc-fullscreen.pc-menu-open .pc-bar { transform: translateX(-50%); }
.pc-fullscreen .pc-shade { height: 200px; }
.pc-fullscreen .pc-row { margin-top: 10px; }
.pc-fullscreen .pc-btn { width: 46px; height: 46px; }

/* Khung dọc hẹp (~340px): thu gọn nút */
@container (max-width: 420px) {
    .pc-bar { padding: 0 6px 4px; }
    .pc-row { gap: 0; }
    .pc-group { gap: 0; }
    .pc-btn { width: 29px; height: 34px; border-radius: 8px; }
    .pc-btn svg { width: 19px; height: 19px; }
    .pc-time { margin-left: 3px; font-size: 12px; }
    .pc-vol:hover .pc-volume { width: 0; margin: 0; opacity: 0; }
    .pc-btn.is-on::after { bottom: 1px; width: 4px; height: 4px; margin-left: -2px; }
}
@container (max-width: 360px) {
    .pc-prev { display: none; }
}
@container (max-width: 270px) {
    .pc-pip { display: none; }
}

/* ---------- Thanh điều khiển đặt dưới video (chế độ thường) ---------- */
.pc-dock { position: relative; width: 100%; max-width: 560px; margin-top: 14px; }
.pc-dock .pc-bar { position: relative; left: auto; right: auto; bottom: auto; padding: 0; opacity: 1; transform: none; }
.pc-dock .pc-progress { height: 16px; }
.pc-dock .pc-rail { height: 4px; }
.pc-dock .pc-progress:hover .pc-rail, .pc-dock .pc-progress:focus-visible .pc-rail { height: 6px; }
.pc-dock .pc-row { margin-top: 10px; }
.pc-dock .pc-menu { max-height: 60vh; }
.pc-docked .pc-shade { display: none; }
.pc-dock + .player-nav { margin-top: 18px; }