/*  */
.gallery-source { display: none; }
.gallery-container { display: flex; height: 80vh; max-width: 1200px; margin: 0 auto; width: 70%; position: relative; padding-right: 12px; }
/*  */
.thumbnail-column { width: 350px; padding: 20px; max-height: 100%; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; }
.thumbnail-column::-webkit-scrollbar-track { border-radius: 30px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; border-radius: 50px; }
.thumbnail-column::-webkit-scrollbar { width: 3px; background-color: #F5F5F5; border-radius: 30px; }
.thumbnail-column::-webkit-scrollbar-thumb { background-color: #000; border-radius: 30px; }
.thumbnail-slider { position: relative; display: flex; flex-direction: column; justify-content: center; }
.thumbnail-container { overflow: hidden; border-radius: 8px; height: 200px; }
.thumbnail-track { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); gap: 5px; height: 200px; transition: transform 0.3s ease; }
.thumbnail-item { border-radius: 8px; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: all 0.3s ease; margin: 3px; }
.thumbnail-item.active { border-color: #000; transform: scale(1.03); }
.thumbnail-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.thumbnail-item:hover img { transform: scale(1.1); }
/*  */
.nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; }
.nav-btn { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s ease; }
.nav-btn:hover { background: #0056b3; }
.nav-btn:disabled { background: #ccc; cursor: not-allowed; }
.page-info { display: flex; align-items: center; color: #666; font-size: 14px; }
/*  */
.main-column { flex: 1; overflow-y: scroll; scroll-behavior: smooth; position: relative; scrollbar-width: none; -ms-overflow-style: none; cursor: zoom-in; }
.main-column.zoom-pic-pro { cursor: zoom-out; }
.main-column .main-image { cursor: zoom-in; }
.main-column.zoom-pic-pro .main-image { cursor: zoom-out; }
.main-column::-webkit-scrollbar { display: none; }
.main-image { height: 100vh; border-radius: 8px; overflow: hidden;     /* cursor: pointer; */ transition: transform 0.3s ease; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.main-image img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transform: scale(0.85); transition: transform 0.3s ease; }
.main-image:last-child { padding-bottom: 30%; }
.main-column.zoom-pic-pro img { transform: scale(1); transition: transform 0.3s ease }
/* Scroll indicators */
.scroll-indicators { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.scroll-indicator { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 72%); transition: all 0.3s ease; cursor: pointer; }
.scroll-indicator.active { background: #000; transform: scale(1.5); }
/* Modal zoom */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; }
.modal.active { display: flex; }
.modal-content { max-width: 90%; max-height: 90%; position: relative; }
.modal-image { width: 100%; height: 100%; object-fit: contain; }
.close-btn { position: absolute; top: -40px; right: 0; color: white; font-size: 30px; cursor: pointer; background: none; border: none; }
.close-btn:hover { color: #ccc; }
/* Responsive */
.main-inf-product { width: 28%; }
.btn-cutome { background: #303030; }
.btn-cutome:hover { background: #000; }
.bg-main { flex: 1; }
@media (max-width:990px) {
.gallery-container { flex-direction: column; height: auto; width: 100%; padding: 0; }
.thumbnail-column { width: 100%; height: auto; order: 2; }
.thumbnail-track { flex-direction: row; }
.thumbnail-item { min-width: 150px; min-height: 100px; }
/* Mobile horizontal scroll */
.gallery-container.mobile-layout .main-column.mobile-horizontal { overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;         /* Firefox */ -ms-overflow-style: none;         /* IE/Edge */ order: 1; }
.gallery-container.mobile-layout .main-column.mobile-horizontal::-webkit-scrollbar { display: none;         /* Chrome/Safari */ }
.gallery-container.mobile-layout .main-column.mobile-horizontal .main-image { min-width: 100vw; height: 60vh; flex-shrink: 0; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; margin-bottom: 0; height: auto; min-width: unset; width: 100%; padding: 0; }
.gallery-container.mobile-layout .main-column.mobile-horizontal .main-image img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
/* Scroll indicators cho mobile horizontal */
.gallery-container.mobile-layout .scroll-indicators { bottom: 20px; top: auto; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; gap: 15px; }
.grid-pro-detail { width: 100%; flex-wrap: wrap; }
.main-inf-product { width: 100%; }
.thumbnail-track { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); }
}