/* =========================================================
   PVS Hero Modern Slider
   File riêng cho slider_recommended.blade.php
   Không viết CSS trực tiếp trong Blade
   ========================================================= */

:root{
    --pvs-green:#00c853;
    --pvs-green-2:#16e36f;
    --pvs-bg:#11151d;
    --pvs-text:#ffffff;
    --pvs-muted:rgba(255,255,255,.72);
    --pvs-soft:rgba(255,255,255,.12);
}

.pvs-hero-modern{
    position:relative;
    width:100%;
    background:#080b10;
    overflow:hidden;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

.pvs-hero-stage{
    position:relative;
    width:100%;
    height:clamp(560px, 76vh, 790px);
    min-height:560px;
    overflow:hidden;
    background:#070a0f;
}

.pvs-hero-slides{
    position:absolute;
    inset:0;
}

.pvs-hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .86s cubic-bezier(.22,.61,.36,1), visibility .86s;
    overflow:hidden;
}

.pvs-hero-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

.pvs-hero-bg-link{
    position:absolute;
    inset:0;
    z-index:3;
}

.pvs-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    background:#0b0f16;
}

.pvs-hero-bg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:scale(1);
    filter:saturate(1.08) contrast(1.03);
    will-change:transform;
}

.pvs-hero-slide.is-active .pvs-hero-bg-img{
    animation:pvsHeroKenBurns 16s linear forwards;
}

.pvs-hero-modern.is-hovering .pvs-hero-slide.is-active .pvs-hero-bg-img{
    animation-play-state:paused;
    transform:scale(1.045);
    transition:transform 2.2s ease;
}

@keyframes pvsHeroKenBurns{
    from{transform:scale(1);}
    to{transform:scale(1.06);}
}

.pvs-hero-overlay{
    position:absolute;
    pointer-events:none;
    z-index:2;
}

.pvs-hero-overlay-left{
    inset:0;
    background:
        linear-gradient(90deg, rgba(5,8,13,.96) 0%, rgba(5,8,13,.83) 18%, rgba(5,8,13,.52) 38%, rgba(5,8,13,.12) 68%, rgba(5,8,13,.02) 100%),
        radial-gradient(circle at 58% 48%, rgba(0,200,83,.10), rgba(0,0,0,0) 38%);
}

.pvs-hero-overlay-bottom{
    left:0;
    right:0;
    bottom:0;
    height:48%;
    background:linear-gradient(0deg, #11151d 0%, rgba(17,21,29,.94) 8%, rgba(17,21,29,.52) 45%, rgba(17,21,29,0) 100%);
}

.pvs-hero-content{
    position:absolute;
    left:clamp(32px, 7vw, 132px);
    top:50%;
    transform:translateY(-42%);
    width:min(560px, 42vw);
    z-index:6;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.pvs-hero-title-link,
.pvs-hero-origin{
    color:inherit;
    text-decoration:none;
}

.pvs-hero-title{
    font-size:clamp(48px, 5.8vw, 88px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-2.5px;
    color:#fff;
    text-shadow:0 7px 28px rgba(0,0,0,.52);
    margin:0 0 12px;
    max-width:100%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.pvs-hero-origin{
    display:block;
    color:var(--pvs-green-2);
    font-size:clamp(16px, 1.25vw, 21px);
    font-weight:700;
    margin-bottom:12px;
}

.pvs-hero-meta,
.pvs-hero-tags{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.pvs-hero-meta-pill,
.pvs-hero-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:30px;
    padding:0 12px;
    border-radius:8px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
    box-shadow:0 5px 18px rgba(0,0,0,.16);
}

.pvs-hero-rating{
    color:#fff;
    border-color:rgba(0,200,83,.9);
    background:rgba(0,200,83,.18);
}

.pvs-hero-tag{
    font-size:13px;
    color:rgba(255,255,255,.94);
    font-weight:600;
    background:rgba(255,255,255,.10);
}

.pvs-hero-desc{
    margin:8px 0 26px;
    color:rgba(255,255,255,.9);
    font-size:clamp(14px, 1.05vw, 16px);
    line-height:1.62;
    font-weight:500;
    max-width:560px;
    text-shadow:0 4px 14px rgba(0,0,0,.45);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.pvs-hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
    z-index:8;
}

.pvs-hero-play{
    display:inline-flex;
    align-items:center;
    gap:14px;
    height:64px;
    min-width:172px;
    padding:0 26px 0 12px;
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 20px 44px rgba(0,200,83,.10);
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.pvs-hero-play:hover{
    color:#fff;
    transform:translateY(-2px);
    background:rgba(0,200,83,.15);
    box-shadow:0 24px 58px rgba(0,200,83,.28);
}

.pvs-hero-play-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--pvs-green), #09b957);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 13px 32px rgba(0,200,83,.34);
}

.pvs-hero-play-icon i{
    margin-left:3px;
    font-size:17px;
}

.pvs-hero-circle-btn{
    width:54px;
    height:54px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.20);
    backdrop-filter:blur(10px);
    transition:transform .24s ease, background .24s ease, border-color .24s ease;
}

.pvs-hero-circle-btn:hover{
    color:#fff;
    transform:translateY(-2px);
    background:rgba(0,200,83,.15);
    border-color:rgba(0,200,83,.8);
}

.pvs-hero-nav{
    position:absolute;
    z-index:10;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.22);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}

.pvs-hero-nav:hover{
    background:rgba(0,200,83,.18);
    border-color:rgba(0,200,83,.72);
}

.pvs-hero-prev{left:32px;}
.pvs-hero-next{right:32px;}

.pvs-hero-thumbs{
    position:absolute;
    z-index:11;
    right:clamp(30px, 6vw, 116px);
    bottom:52px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    max-width:min(560px, 42vw);
    overflow:hidden;
}

.pvs-hero-thumb{
    width:88px;
    height:52px;
    border:2px solid transparent;
    padding:0;
    border-radius:8px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    opacity:.72;
    cursor:pointer;
    transition:opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    flex:0 0 auto;
}

.pvs-hero-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pvs-hero-thumb:hover{
    opacity:1;
    transform:translateY(-2px);
}

.pvs-hero-thumb.is-active{
    opacity:1;
    border-color:var(--pvs-green);
    box-shadow:0 0 0 1px rgba(0,200,83,.32), 0 12px 28px rgba(0,200,83,.18);
}

.pvs-hero-dots{
    position:absolute;
    z-index:12;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    display:none;
    align-items:center;
    gap:7px;
}

.pvs-hero-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    border:0;
    padding:0;
    background:rgba(255,255,255,.34);
    transition:width .25s ease, background .25s ease;
}

.pvs-hero-dot.is-active{
    width:22px;
    background:var(--pvs-green);
}

.pvs-hero-progress{
    position:absolute;
    z-index:13;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
}

.pvs-hero-progress span{
    display:block;
    width:0%;
    height:100%;
    background:linear-gradient(90deg, var(--pvs-green), var(--pvs-green-2));
    box-shadow:0 0 18px rgba(0,200,83,.6);
}

/* Tablet landscape + iPad: desktop tinh gọn */
@media (min-width:768px) and (max-width:1180px){
    .pvs-hero-stage{
        height:clamp(420px, 58vw, 590px);
        min-height:420px;
        border-radius:0;
    }

    .pvs-hero-content{
        left:clamp(28px, 5vw, 62px);
        width:min(430px, 48vw);
        transform:translateY(-38%);
    }

    .pvs-hero-title{
        font-size:clamp(34px, 5vw, 56px);
        letter-spacing:-1.2px;
    }

    .pvs-hero-origin{
        font-size:15px;
        margin-bottom:8px;
    }

    .pvs-hero-meta-pill,
    .pvs-hero-tag{
        height:25px;
        padding:0 9px;
        font-size:11px;
        border-radius:7px;
    }

    .pvs-hero-desc{
        font-size:13px;
        line-height:1.45;
        margin:6px 0 16px;
        -webkit-line-clamp:2;
    }

    .pvs-hero-play{
        height:48px;
        min-width:132px;
        font-size:13px;
        padding:0 17px 0 8px;
        gap:10px;
    }

    .pvs-hero-play-icon{
        width:36px;
        height:36px;
    }

    .pvs-hero-circle-btn{
        width:42px;
        height:42px;
    }

    .pvs-hero-thumbs{
        right:34px;
        bottom:28px;
        max-width:42vw;
        gap:8px;
    }

    .pvs-hero-thumb{
        width:64px;
        height:38px;
        border-radius:6px;
    }

    .pvs-hero-nav{
        width:42px;
        height:42px;
    }

    .pvs-hero-prev{left:22px;}
    .pvs-hero-next{right:22px;}
}

/* Mobile ngang: desktop tinh gọn */
@media (max-width:767px) and (orientation:landscape){
    .pvs-hero-stage{
        height:100vh;
        min-height:360px;
    }

    .pvs-hero-content{
        left:56px;
        width:42vw;
        transform:translateY(-36%);
    }

    .pvs-hero-title{
        font-size:34px;
        letter-spacing:-.7px;
        margin-bottom:7px;
    }

    .pvs-hero-origin{
        font-size:13px;
        margin-bottom:7px;
    }

    .pvs-hero-meta,
    .pvs-hero-tags{
        gap:5px;
        margin-bottom:6px;
    }

    .pvs-hero-meta-pill,
    .pvs-hero-tag{
        height:22px;
        padding:0 7px;
        font-size:10px;
        border-radius:6px;
    }

    .pvs-hero-desc{
        font-size:11px;
        line-height:1.36;
        -webkit-line-clamp:2;
        margin:5px 0 12px;
    }

    .pvs-hero-play{
        height:40px;
        min-width:108px;
        font-size:12px;
        padding:0 12px 0 6px;
        gap:8px;
    }

    .pvs-hero-play-icon{
        width:30px;
        height:30px;
    }

    .pvs-hero-circle-btn{
        width:36px;
        height:36px;
    }

    .pvs-hero-thumbs{
        right:42px;
        bottom:18px;
        max-width:42vw;
        gap:7px;
    }

    .pvs-hero-thumb{
        width:54px;
        height:32px;
        border-radius:6px;
    }

    .pvs-hero-nav{
        width:38px;
        height:38px;
    }

    .pvs-hero-prev{left:14px;}
    .pvs-hero-next{right:14px;}
}

/* Mobile dọc: giống mẫu mobile portrait */
@media (max-width:767px) and (orientation:portrait){
    .pvs-hero-stage{
        height:600px;
        min-height:600px;
        max-height:76vh;
    }

    .pvs-hero-bg-img{
        object-position:center top;
    }

    .pvs-hero-overlay-left{
        background:
            linear-gradient(180deg, rgba(5,8,13,.30) 0%, rgba(5,8,13,.15) 38%, rgba(5,8,13,.84) 74%, #11151d 100%),
            linear-gradient(90deg, rgba(5,8,13,.42), rgba(5,8,13,.06));
    }

    .pvs-hero-overlay-bottom{
        height:58%;
        background:linear-gradient(0deg, #11151d 0%, rgba(17,21,29,.92) 28%, rgba(17,21,29,.34) 72%, rgba(17,21,29,0) 100%);
    }

    .pvs-hero-content{
        left:20px;
        right:20px;
        width:auto;
        top:auto;
        bottom:112px;
        transform:none;
    }

    .pvs-hero-title{
        font-size:42px;
        line-height:1;
        letter-spacing:-1.4px;
        margin-bottom:8px;
        -webkit-line-clamp:2;
    }

    .pvs-hero-origin{
        font-size:15px;
        margin-bottom:9px;
    }

    .pvs-hero-meta,
    .pvs-hero-tags{
        gap:6px;
        margin-bottom:7px;
    }

    .pvs-hero-meta-pill,
    .pvs-hero-tag{
        height:24px;
        padding:0 8px;
        font-size:10.5px;
        border-radius:7px;
    }

    .pvs-hero-desc{
        display:none;
    }

    .pvs-hero-actions{
        margin-top:12px;
        gap:10px;
    }

    .pvs-hero-play{
        height:48px;
        min-width:132px;
        font-size:13px;
        padding:0 17px 0 8px;
        gap:10px;
    }

    .pvs-hero-play-icon{
        width:36px;
        height:36px;
    }

    .pvs-hero-circle-btn{
        width:42px;
        height:42px;
    }

    .pvs-hero-nav{
        display:none;
    }

    .pvs-hero-thumbs{
        left:20px;
        right:20px;
        bottom:48px;
        max-width:none;
        justify-content:flex-start;
        gap:9px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        padding:2px 0 8px;
    }

    .pvs-hero-thumbs::-webkit-scrollbar{
        display:none;
    }

    .pvs-hero-thumb{
        width:52px;
        height:52px;
        border-radius:50%;
        border-width:2px;
        opacity:.86;
    }

    .pvs-hero-thumb.is-active{
        transform:translateY(-2px);
        box-shadow:0 0 0 2px rgba(0,200,83,.25), 0 12px 28px rgba(0,200,83,.22);
    }

    .pvs-hero-dots{
        display:flex;
        bottom:26px;
    }

    .pvs-hero-progress{
        display:none;
    }
}

/* TV/màn rất lớn: dùng desktop, không mobile */
@media (min-width:1920px){
    .pvs-hero-stage{
        height:780px;
    }

    .pvs-hero-content{
        left:8vw;
        width:620px;
    }

    .pvs-hero-title{
        font-size:92px;
    }

    .pvs-hero-thumbs{
        right:7vw;
        max-width:680px;
    }

    .pvs-hero-thumb{
        width:104px;
        height:60px;
    }
}

@media (prefers-reduced-motion:reduce){
    .pvs-hero-slide,
    .pvs-hero-bg-img,
    .pvs-hero-thumb,
    .pvs-hero-play,
    .pvs-hero-circle-btn{
        transition:none!important;
        animation:none!important;
    }
}