/* =================================================
IMAGE SLIDER + LIGHTBOX KHỞI MỘC
CSS hoàn chỉnh - dùng với image-slider-mau-1.js

Cách dùng:

   <div class="image-slider image-slider-mau-1 image-slider-cot-4 image-slider-hang-1">
     <img alt="..." data-src="/uploads/news/2026_04/ten-anh.png">
     <img alt="..." data-src="/uploads/news/2026_04/ten-anh-2.png">
   </div>
================================================= */

/* =================================================

1. BIẾN CHUNG
   ================================================= */

.image-slider{
--km-slider-cols:3;
--km-slider-rows:1;
--km-slider-gap:14px;
--km-slider-radius:10px;
--km-slider-bg:#f2f4f7;
--km-slider-border:#e6e9ef;
--km-slider-shadow:0 3px 12px rgba(16,24,40,.08);
--km-slider-shadow-hover:0 12px 26px rgba(16,24,40,.16);
--km-slider-red:#d73027;

position:relative;
width:100%;
margin:0px;
box-sizing:border-box;
}

/* Số cột */
.image-slider-cot-1{--km-slider-cols:1}
.image-slider-cot-2{--km-slider-cols:2}
.image-slider-cot-3{--km-slider-cols:3}
.image-slider-cot-4{--km-slider-cols:4}
.image-slider-cot-5{--km-slider-cols:5}
.image-slider-cot-6{--km-slider-cols:6}

/* Số hàng */
.image-slider-hang-1{--km-slider-rows:1}
.image-slider-hang-2{--km-slider-rows:2}
.image-slider-hang-3{--km-slider-rows:3}
.image-slider-hang-4{--km-slider-rows:4}
.image-slider-hang-5{--km-slider-rows:5}

/* =================================================
2. FALLBACK KHI JS CHƯA CHẠY
================================================= */

.image-slider:not(.km-slider-ready){
display:grid;
grid-template-columns:repeat(var(--km-slider-cols), minmax(0, 1fr));
gap:var(--km-slider-gap);
}

.image-slider.km-slider-ready{
display:block;
}

/* =================================================
3. CẤU TRÚC SLIDER
================================================= */

.km-slider-viewport{
width:100%;
overflow:hidden;
border-radius:var(--km-slider-radius);
}

.km-slider-track{
display:flex;
width:100%;
transition:transform .38s ease;
will-change:transform;
}

.km-slider-page{
min-width:100%;
display:grid;
grid-template-columns:repeat(var(--km-slider-cols), minmax(0, 1fr));
gap:var(--km-slider-gap);
padding:2px;
box-sizing:border-box;
}

/* =================================================
4. ẢNH TRONG SLIDER
================================================= */

.image-slider img{
width:100%;
aspect-ratio:4/2.67;
object-fit:cover;
object-position:center;
display:block;

border-radius:var(--km-slider-radius);
background:var(--km-slider-bg);
border:1px solid var(--km-slider-border);
box-shadow:var(--km-slider-shadow);

cursor:pointer;
overflow:hidden;
color:transparent;
font-size:0;

transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease,
border-color .25s ease,
opacity .25s ease;
}

/* Ảnh chưa có src do dùng data-src lazy load */
.image-slider img:not([src]){
min-height:150px;
background:
linear-gradient(90deg, #f2f4f7 0%, #eef1f5 50%, #f2f4f7 100%);
background-size:200% 100%;
animation:km-img-loading 1.2s linear infinite;
}

.image-slider img.km-img-loaded{
background:var(--km-slider-bg);
animation:none;
}

@keyframes km-img-loading{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}

.image-slider img:hover{
transform:translateY(-3px);
filter:brightness(.94);
border-color:#d7dce5;
box-shadow:var(--km-slider-shadow-hover);
}

.image-slider img:focus{
outline:3px solid rgba(215,48,39,.28);
outline-offset:3px;
}

/* Ảnh không cắt, dùng thêm class image-slider-contain */
.image-slider.image-slider-contain img{
object-fit:contain;
background:#f8fafc;
}

/* Ảnh vuông, dùng thêm class image-slider-square */
.image-slider.image-slider-square img{
aspect-ratio:1/1;
}

/* Ảnh ngang 16:9 */
.image-slider.image-slider-wide img{
aspect-ratio:16/9;
}

/* =================================================
5. NÚT CHUYỂN SLIDE
================================================= */

.km-slider-btn{
position:absolute;
top:50%;
z-index:5;

width:40px;
height:40px;
transform:translateY(-50%);

display:flex;
align-items:center;
justify-content:center;

border:0;
border-radius:999px;
cursor:pointer;

color:#fff;
background:rgba(0,0,0,.52);
box-shadow:0 8px 20px rgba(0,0,0,.22);

font-size:28px;
line-height:1;
padding:0;

transition:
background .2s ease,
transform .2s ease,
box-shadow .2s ease;
}

.km-slider-btn:hover{
background:var(--km-slider-red);
transform:translateY(-50%) scale(1.06);
box-shadow:0 10px 26px rgba(0,0,0,.28);
}

.km-slider-btn:focus{
outline:3px solid rgba(215,48,39,.28);
outline-offset:3px;
}

.km-slider-prev{
left:8px;
}

.km-slider-next{
right:8px;
}

/* =================================================
6. DOTS
================================================= */

.km-slider-dots{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin-top:11px;
}

.km-slider-dot{
width:8px;
height:8px;
border:0;
border-radius:999px;
padding:0;

cursor:pointer;
background:#d0d5dd;

transition:
width .22s ease,
background .22s ease,
transform .22s ease;
}

.km-slider-dot:hover{
background:#98a2b3;
transform:scale(1.12);
}

.km-slider-dot.is-active{
width:22px;
background:var(--km-slider-red);
}

.km-slider-dot:focus{
outline:2px solid rgba(215,48,39,.28);
outline-offset:3px;
}

/* =================================================
7. LIGHTBOX
================================================= */

body.km-lightbox-lock{
overflow:hidden;
}

.km-lightbox{
position:fixed;
inset:0;
z-index:999999;

display:none;
align-items:center;
justify-content:center;

padding:24px;
background:rgba(12,18,28,.9);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

.km-lightbox.is-open{
display:flex;
}

.km-lightbox-inner{
position:relative;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;
}

.km-lightbox-img{
max-width:min(1100px, 92vw);
max-height:82vh;

width:auto;
height:auto;

object-fit:contain;
display:block;

border-radius:12px;
background:#fff;
box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.km-lightbox-close,
.km-lightbox-prev,
.km-lightbox-next{
position:absolute;
z-index:2;

display:flex;
align-items:center;
justify-content:center;

border:0;
cursor:pointer;

color:#fff;
background:rgba(0,0,0,.48);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 8px 24px rgba(0,0,0,.24);

padding:0;
transition:
background .2s ease,
transform .2s ease,
box-shadow .2s ease;
}

.km-lightbox-close:hover,
.km-lightbox-prev:hover,
.km-lightbox-next:hover{
background:var(--km-slider-red);
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.km-lightbox-close:focus,
.km-lightbox-prev:focus,
.km-lightbox-next:focus{
outline:3px solid rgba(255,255,255,.35);
outline-offset:3px;
}

.km-lightbox-close{
top:20px;
right:22px;

width:42px;
height:42px;

border-radius:50%;
font-size:28px;
line-height:1;
}

.km-lightbox-close:hover{
transform:scale(1.06);
}

.km-lightbox-prev,
.km-lightbox-next{
top:50%;
width:46px;
height:58px;

border-radius:12px;
font-size:36px;
line-height:1;

transform:translateY(-50%);
}

.km-lightbox-prev:hover,
.km-lightbox-next:hover{
transform:translateY(-50%) scale(1.06);
}

.km-lightbox-prev{
left:22px;
}

.km-lightbox-next{
right:22px;
}

.km-lightbox-caption{
position:absolute;
left:50%;
bottom:22px;
transform:translateX(-50%);

max-width:min(900px, 86vw);
padding:9px 14px;

color:#fff;
font-size:14px;
line-height:1.45;
text-align:center;

background:rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
}

.km-lightbox-counter{
position:absolute;
left:22px;
top:22px;

color:#fff;
font-size:13px;
font-weight:600;

padding:7px 11px;
border-radius:999px;
background:rgba(0,0,0,.42);
border:1px solid rgba(255,255,255,.16);
}

/* =================================================
8. RESPONSIVE
================================================= */

@media(max-width:991px){
.image-slider-cot-4,
.image-slider-cot-5,
.image-slider-cot-6{
--km-slider-cols:3;
}

.image-slider-cot-3{
--km-slider-cols:2;
}
}

@media(max-width:575px){
.image-slider{
--km-slider-gap:10px;
margin:18px 0;
}

.image-slider-cot-2,
.image-slider-cot-3,
.image-slider-cot-4,
.image-slider-cot-5,
.image-slider-cot-6{
--km-slider-cols:2;
}

.image-slider img{
border-radius:8px;
}

.image-slider img:not([src]){
min-height:120px;
}

.km-slider-btn{
width:34px;
height:34px;
font-size:23px;
}

.km-slider-prev{
left:6px;
}

.km-slider-next{
right:6px;
}

.km-slider-dots{
gap:6px;
margin-top:9px;
}

.km-lightbox{
padding:12px;
}

.km-lightbox-img{
max-width:94vw;
max-height:76vh;
border-radius:8px;
}

.km-lightbox-close{
top:12px;
right:12px;
width:38px;
height:38px;
font-size:26px;
}

.km-lightbox-prev,
.km-lightbox-next{
width:38px;
height:50px;
font-size:30px;
}

.km-lightbox-prev{
left:10px;
}

.km-lightbox-next{
right:10px;
}

.km-lightbox-caption{
bottom:14px;
max-width:86vw;
font-size:12px;
border-radius:10px;
padding:8px 10px;
}

.km-lightbox-counter{
top:12px;
left:12px;
font-size:12px;
}
}

@media(max-width:380px){
.image-slider-cot-2,
.image-slider-cot-3,
.image-slider-cot-4,
.image-slider-cot-5,
.image-slider-cot-6{
--km-slider-cols:1;
}
}

/* =================================================
9. GIẢM CHUYỂN ĐỘNG NẾU TRÌNH DUYỆT YÊU CẦU
================================================= */

@media(prefers-reduced-motion:reduce){
.km-slider-track,
.image-slider img,
.km-slider-btn,
.km-slider-dot,
.km-lightbox-close,
.km-lightbox-prev,
.km-lightbox-next{
transition:none !important;
animation:none !important;
}
}