#trang-chu-hero-slider{
position:relative;
width:100%;
height:420px;
overflow:hidden;
background:#fff;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

#trang-chu-hero-slider .slides{
position:relative;
width:100%;
height:100%;
}

#trang-chu-hero-slider .slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
transition:opacity .6s ease;
display:flex;
align-items:center;
justify-content:center;
}

#trang-chu-hero-slider .slide.active{
opacity:1;
visibility:visible;
z-index:2;
}

#trang-chu-hero-slider img{
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
}

#trang-chu-hero-slider .nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border-radius:50%;
border:none;
background:rgba(0,0,0,.45);
color:#fff;
font-size:18px;
cursor:pointer;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
transition:.25s;
}

#trang-chu-hero-slider .nav:hover{
background:rgba(0,0,0,.75);
transform:translateY(-50%) scale(1.08);
}

#trang-chu-hero-slider .prev{
left:16px;
}

#trang-chu-hero-slider .next{
right:16px;
}

@media(max-width:768px){
#trang-chu-hero-slider{
height:360px;
}
}

@media(max-width:480px){
#trang-chu-hero-slider{
height:300px;
}

#trang-chu-hero-slider .nav{
width:34px;
height:34px;
font-size:14px;
}
}