/* ===================================================
   1. WRAPPER - full viewport width
   =================================================== */
.jssor-wrapper{
    position:relative;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow:hidden;
    background:#0b2a5b;       /* navy - tránh lộ nền xám */
    line-height:0;           /* xóa khoảng trắng baseline */
    font-size:0;
}

.jssor-wrapper #jssor_1{
    display:block;
}

#jssor_1{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
}

/* Ảnh trong slide */
#jssor_1 img[data-u="image"]{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===================================================
   2. NAVIGATOR - bullet & arrow
   =================================================== */
.jssorb054 .i{position:absolute;cursor:pointer;}
.jssorb054 .i .b{fill:#fff;fill-opacity:0.5;}
.jssorb054 .i:hover .b{fill-opacity:.8;}
.jssorb054 .iav .b{fill-opacity:1;}
.jssorb054 .i.idn{opacity:.3;}

.jssora054{display:block;position:absolute;cursor:pointer;}
.jssora054 .a{fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora054:hover{opacity:.8;}
.jssora054.jssora054dn{opacity:.5;}
.jssora054.jssora054ds{opacity:.3;pointer-events:none;}

/* ===================================================
   3. OVERLAY - lớp phủ gradient navy
   =================================================== */
.jssor-wrapper .kvdb-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
    z-index:5;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(11,42,91,.85) 0%,
        rgba(11,42,91,.35) 55%,
        rgba(11,42,91,0) 100%);
}

/* ===================================================
   4. CAPTION - khối chữ
   =================================================== */
.jssor-wrapper .kvdb-caption{
    position:absolute;
    z-index:6;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    width:760px;
    max-width:60%;
    color:#fff;
    text-align:left;
}

.jssor-wrapper .kvdb-caption .kvdb-title{
    display:block;
    color:#fff;
    font-weight:800;
    font-size:38px;
    line-height:1.25;
    text-transform:uppercase;
    margin:0 0 26px;
    padding:0;
    white-space:nowrap;       /* mỗi câu 1 dòng */
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* ===================================================
   5. BUTTONS
   =================================================== */
.jssor-wrapper .kvdb-btns{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}
.jssor-wrapper .kvdb-btns a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 26px;
    font-weight:700;
    font-size:14px;
    border-radius:4px;
    text-decoration:none;
    transition:.3s;
}
.jssor-wrapper .btn-blue{ background:#1455a8; color:#fff; }
.jssor-wrapper .btn-blue:hover{ background:#0b2a5b; color:#fff; }

.jssor-wrapper .btn-outline{ background:transparent; border:2px solid #fff; color:#fff; }
.jssor-wrapper .btn-outline:hover{ background:#fff; color:#0b2a5b; }
.jssor-wrapper .btn-outline:hover .play-icon{ background:#0b2a5b; }

/* Icon play tròn */
.jssor-wrapper .btn-outline .play-icon{
    display:inline-flex;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#1455a8;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
}
.jssor-wrapper .btn-outline .play-icon:after{
    content:"";
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:5px 0 5px 8px;
    border-color:transparent transparent transparent #fff;
    margin-left:2px;
}

/* Mặc định cho tất cả ảnh */
#jssor_1 img[data-u="image"]{
    width:100% !important;
    height:100% !important;
    top:0 !important;
    left:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
}

/* Ép riêng từng ảnh theo tên file */
#jssor_1 img[src*="/anh-cong-ty.jpg"]{ object-position:center 82% !important; }   /* banner 1 */
#jssor_1 img[src*="banner-01.webp"]{        object-position:center 80% !important; }    /* banner 2 */
#jssor_1 img[src*="banner-03.webp"]{        object-position:center 65% !important; }    /* banner 3 */
#jssor_1 img[src*="banner-02.webp"]{   object-position:center 65% !important; } /* banner 4 */
#jssor_1 img[src*="banner-06.webp"]{        object-position:center 65% !important; } /* banner 5 */
#jssor_1 img[src*="banner-2-scaled.webp"]{  object-position:center 65% !important; }    /* banner 6 */


/* ===================================================
   6. RESPONSIVE
   =================================================== */
@media (max-width:849px){
    .jssora054{ display:none !important; }
    .jssor-wrapper .kvdb-caption{
        left:6%;
        right:6%;
        max-width:none;
        width:auto;
    }

    .jssor-wrapper .kvdb-caption .kvdb-title{
        white-space:normal;
        font-size:22px;
        margin-bottom:16px;
    }
    /* gradient phủ rộng hơn để chữ luôn đọc được */
    .jssor-wrapper .kvdb-overlay{
        background:linear-gradient(90deg,
            rgba(11,42,91,.85) 0%,
            rgba(11,42,91,.55) 70%,
            rgba(11,42,91,.3) 100%);
    }
}

@media (max-width:480px){
    .jssorb054 .i{ width:18px; height:18px; }
    /* Caption: không căn giữa nữa, neo xuống đáy, gọn lại */
    
    #jssor_1 img[src*="bg-toa-nha.png"]{
        object-position:center 33% !important;
        transform: translateX(-28%) !important;
    }
    #jssor_1 img[src*="banner-2-scaled.webp"]{
         object-position:center 65% !important;
        transform: translateX(-30%) !important;
    }
    #jssor_1 img[src*="banner-03.webp"]{         
        object-position:center 65% !important;
        transform: translateX(-33%) !important; }    /* banner 3 */
    .jssor-wrapper .kvdb-caption{
        top:auto !important;
        bottom:14px;
        transform:none !important;   /* bỏ translateY(-50%) gây tràn */
        left:5%;
        right:5%;
    }

    .jssor-wrapper .kvdb-caption .kvdb-title{
        font-size:15px;
        line-height:1.3;
        margin-bottom:12px;
        text-shadow:0 1px 6px rgba(0,0,0,.6);
    }
    .jssor-wrapper .kvdb-btns{
        gap:8px;
    }
    .jssor-wrapper .kvdb-btns a{
        padding:8px 14px;
        font-size:11px;
    }
    .jssor-wrapper .btn-outline .play-icon{
        width:18px;
        height:18px;
    }
    /* gradient phủ toàn bộ cho dễ đọc trên màn nhỏ */
    .jssor-wrapper .kvdb-overlay{
        background:linear-gradient(180deg,
            rgba(11,42,91,.25) 0%,
            rgba(11,42,91,.5) 50%,
            rgba(11,42,91,.9) 100%);
    }
}

/* ===================================================
   7. FIX - scrollbar ngang khi dùng 100vw
   =================================================== */
html,body{ overflow-x:hidden; }