<style>
section.item {
background-color: #ffffff;
padding: 30px;
margin: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
text-align: center;
}

h2.item_h2 {
border-left: 6px solid #ED9700;
padding-left: 12px;
color: #2c3e50;
margin-top: 0;
text-align: left;
}

section.item div.viewer-container {
margin-top: 1em !important;
max-width: 1000px;
margin: 0 auto;
border-radius: 8px;
border: 3px solid #ccc;
padding: 2em;
}

.viewer-image {
width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.viewer-buttons {
margin-top: 15px;
}

.viewer-buttons button {
background-color: #ED9700;
color: white;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}

.viewer-buttons button:hover {
background-color: #ba6c00;
}
</style>
<section class="item">
<h2 class="item_h2">Album ảnh</h2>
<div class="viewer-container">
<img id="imageViewer" class="viewer-image" alt="圖片顯示區" />
<p id="imageCounter"></p>
<div class="viewer-buttons">
<button onclick="prevImage()">Ảnh trước</button>
<button onclick="nextImage()">Ảnh tiếp theo</button>
</div>
</div>
</section>

<script>
const imageFolder = "/var/file/62/1062/img/1501/";
const imageCount = 53;
const images = Array.from({ length: imageCount }, (_, i) => `${imageFolder}${i + 1}.jpg`);

let currentIndex = 0;
const imageViewer = document.getElementById("imageViewer");
const counterText = document.getElementById("imageCounter");

function showImage(index) {
imageViewer.src = images[index];
counterText.textContent = `Ảnh ${index + 1} / ${images.length}`;
}

document.addEventListener("DOMContentLoaded", () => {
showImage(currentIndex);
});

function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
}

function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
</script>