#iview {
	display: block;
	width: 100%; /* Đặt chiều rộng là 100% */
	max-width: 100%;
	/* min-width: 600px; <--- XÓA BỎ DÒNG NÀY ĐỂ CHO PHÉP CO XUỐNG DƯỚI 600px */
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	padding: 5px;
	border-radius: 5px;
	position: relative;
	-webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
	margin: 40px auto;
	overflow: hidden;
}

#iview .iviewSlider {
	display: block;
	width: 100%;
	height: 600px; /* Giữ nguyên cho desktop/tablet */
	overflow: hidden;
	border-radius: 4px;
}

/* Thêm Media Query cho màn hình nhỏ hơn hoặc bằng 768px */
@media(max-width:768px){
		
   /* Thử selector này để tăng độ ưu tiên */
	#iview {
		height: 300px !important; 
	}
		
	#iview .iviewSlider {
		height: 300px !important; 
	}
	   
    /* Điều chỉnh vị trí nút điều hướng nếu cần */
	#iview div.iview-directionNav {
		top: 40%;
	}

    /* Các thay đổi khác đã có sẵn cho nút điều hướng */
	#iview div.iview-directionNav a.iview-nextNav {
		right: 10px;		
	}
    
    /* Cần thêm điều chỉnh cho #iview.iview-hover nếu muốn tắt hover hiệu ứng trên mobile */
}



#iview div.iview-directionNav {
	position: absolute;
	top: 47%;
	left: 0px;
	z-index: 9;
	width: 100%;
}

#iview div.iview-directionNav a {
	display: block;
	cursor: pointer;
	position: absolute;
	width: 40px;
	height: 40px;
	background-image: url(../../../../images/slider/bg_direction_nav_red.png);
	text-indent: -9999px;
	-webkit-transition: left 0.3s ease-in-out;
	-webkit-transition-property: left,right;
	-moz-transition: left 0.3s ease-in-out;
	-moz-transition-property: left,right;
	-o-transition: left 0.3s ease-in-out;
	-o-transition-property: left,right;
	-ms-transition: left 0.3s ease-in-out;
	-ms-transition-property: left,right;
	transition: left 0.3s ease-in-out;
	transition-property: left,right;
}

#iview div.iview-directionNav a.iview-nextNav {
	right: 5px;
	background-position: 40px 0px;
}

#iview div.iview-directionNav a.iview-prevNav {
	left: 5px;
	background-position: 0px 0px
}

/*
#iview.iview-hover div.iview-directionNav a.iview-nextNav {
	right: 20px;
}

#iview.iview-hover div.iview-directionNav a.iview-prevNav {
	left: 20px;
}
*/

#iview-preloader {
	border: #666 1px solid;
	width: 150px}

#iview-preloader div {
	background: #666;
}
#iview-timer {
	border-radius: 10px;
}

#iview-timer div {
	border-radius: 10px;
}



/*----caption--------*/
.iview-caption {
	background: url('../../../../images/slider/caption-bg.png');
	color: #FFF;
	border-radius: 3px;	
	font-family: Verdana; text-align: center;
	font-size: 22px;
	text-shadow: #000 1px 1px 0px;
	height: 30px; width: 100%;
}
#iview .iviewSlider {
    background-position: center center !important; 
    background-repeat: no-repeat !important;
    background-size: cover !important; 
}
@media(max-width:768px){
	/* Để căn giữa khối caption:
    1. iView sử dụng thuộc tính 'left' hoặc 'data-x' để đặt vị trí.
    2. Chúng ta cần ghi đè và buộc 'left' là 50%.
    3. Dùng transform: translateX(-50%) để dịch chuyển khối về phía trái 50% chiều rộng của nó.
    */
    .iview-caption {
        left: 50% !important; /* Buộc vị trí bắt đầu từ 50% */
        /* width: auto !important; */ /* Có thể cần đặt width tự động */
        transform: translateX(-50%) !important; /* Dịch chuyển về bên trái 50% chiều rộng của caption */
        -webkit-transform: translateX(-50%) !important;
        -moz-transform: translateX(-50%) !important;
        /* Thử đặt lại data-x của iView */
        margin-left: 0 !important;
    }
}

/*
    BƯỚC 1: Đảm bảo container của nút điều hướng luôn hiển thị (opacity: 1)
    Thư viện iView có thể đặt opacity: 0 cho container này khi không hover.
*/
#iview div.iview-directionNav {
    /* Đặt opacity là 1 để container này luôn hiện */
    opacity: 1 !important; 
    
    /* Đảm bảo vị trí */
    position: absolute; 
    top: 47%;
    left: 0;
    z-index: 9;
    width: 100%;
}

/*
    BƯỚC 2: Đảm bảo các nút Next/Prev luôn hiển thị 
    (Bỏ đi mọi quy tắc đẩy chúng ra khỏi màn hình)
*/
#iview div.iview-directionNav a.iview-nextNav {
	right: 5px !important; /* Dùng !important để ghi đè */
}

#iview div.iview-directionNav a.iview-prevNav {
	left: 5px !important; /* Dùng !important để ghi đè */
}