/* ===== Swiper core (fallback nếu bundle CSS không tải) ===== */
.galerieMain.swiper,
.galerieThumbs.swiper { overflow: hidden; }
.galerieMain .swiper-wrapper,
.galieThumbs .swiper-wrapper { display: flex; }
.galerieMain .swiper-slide,
.galerieThumbs .swiper-slide { flex-shrink: 0; }
.galerieMain .swiper-slide { width: 100%; } /* 1 slide/viewport */
.galerieThumbs .swiper-slide { width: auto; }

/* Layout khối hình (bên phải) */
.galerie-slider { position: relative; }
.galerie-img { width: 100%; height: auto; display:block; object-fit: cover; }

/* Dots */
.galerieMain .swiper-pagination-bullet{ background:#fff; opacity:.6; }
.galerieMain .swiper-pagination-bullet-active{ background:#ff6800; opacity:1; }

/* Thumbnail strip */
.galerieThumbs{ margin-top:14px; }
.galerieThumbs .swiper-slide{
  opacity:.55; overflow:hidden; cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.galerieThumbs .swiper-slide-thumb-active{ opacity:1; transform:translateY(-2px); }
.thumb-img{ width:100%; height:100%; object-fit:cover; }

/* Responsive */
@media (max-width: 1024px){
  .gbtn{ width:38px; height:38px; }
}

/* Khung ảnh lớn luôn cùng tỷ lệ, ảnh fill bằng object-fit */
.galerieMain{
  width:100%;
  aspect-ratio: 3 / 2;           /* Desktop ~ 3:2 */
  overflow:hidden;
  position:relative;
}
@media (max-width:1024px){ .galerieMain{ aspect-ratio: 4 / 3; } }
@media (max-width:640px){  .galerieMain{ aspect-ratio: 1 / 1; } }

/* BẮT BUỘC: đảm bảo slide cao = 100% của khung */
.galerieMain .swiper-wrapper,
.galerieMain .swiper-slide{ height:100%; }
.galerieMain .swiper-slide{ display:flex; align-items:center; justify-content:center; }

.galerie-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Thumbnail cùng tỷ lệ, không méo */
.galerieThumbs .swiper-slide{ height: 80px; }
.thumb-img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3; }

/* Ẩn dots (pagination) nếu có render */
.galerieMain .swiper-pagination{ display:none !important; }


/* ================================================= */
/* Nút của slider trong single galerie (CUSTOM ARROWS)*/
/* ================================================= */

.galerie-slider .gbtn{
  position:absolute; top:50%;
  width:44px; height:44px; border-radius:50%;
  border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  cursor:pointer; z-index:10; pointer-events:auto;
  transition: background-color 0.2s ease, transform 0.2s ease;

  /* Ẩn nội dung cũ (màu trắng) và thay bằng background */
  color:transparent;
  text-indent: -9999px;
  background: rgba(0,0,0,.25) url("https://ajillsabor.com/wp-content/themes/precise/assets/img/arrow.svg") center center no-repeat;
  background-size: 16px auto;
}

/* Vô hiệu hóa mũi tên CSS cũ */
.galerie-slider .gbtn::before{
  content: none;
  display: none !important;
}

.galerie-slider .gbtn:hover{
  background-color: #ff6800;
}

/* Nút TRƯỚC (PREV) */
.galerie-slider .gprev{
  left:16px;
  transform: translateY(-50%);
}
/* Nút TIẾP THEO (NEXT) */
.galerie-slider .gnext{
  right:16px;
  transform: translateY(-50%) rotate(180deg);
}

/* Khi GLightbox mở -> ẩn hoàn toàn nút slider phía sau */
body.glightbox-open .galerie-slider .gbtn{ opacity:0; visibility:hidden; pointer-events:none; }

/* GLightbox top */
.glightbox-container{ z-index: 999999; }

/* Chỉ hiển thị khi Swiper đã init xong để tránh giật */
.galerieMain:not(.is-ready) { visibility: hidden; }

/* CORE tối thiểu của Swiper – phòng khi file CSS bị lệch/ghi đè */
.galerieMain.swiper, .galerieThumbs.swiper { overflow:hidden; }
.galerieMain .swiper-wrapper, .galerieThumbs .swiper-wrapper { display:flex; }
.galerieMain .swiper-slide, .galerieThumbs .swiper-slide { flex-shrink:0; }

/* 1 slide full khung */
.galerieMain .swiper-slide { width:100%; }

/* Khung lớn có tỉ lệ cố định để không giật */
.galerieMain{ width:100%; aspect-ratio: 3/2; position:relative; }
@media (max-width:1024px){ .galerieMain{ aspect-ratio: 4/3; } }
@media (max-width:640px){  .galerieMain{ aspect-ratio: 1/1; } }

.galerieMain .swiper-wrapper, .galerieMain .swiper-slide { height:100%; }
.galieMain .swiper-slide{ display:flex; align-items:center; justify-content:center; }
.galerie-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Thumbs */
.galerieThumbs .swiper-slide{ height:80px; width:auto; }
.thumb-img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* Chỉ hiện khi init xong */
.galerieMain:not(.is-ready){ visibility:hidden; }

/* --- GLightbox controls (mobile & desktop) --- */
/* Bảo đảm overlay luôn trên cùng */
.glightbox-container{ z-index: 999999 !important; }

/* Luôn cho nút prev/next/close đứng độc lập */
.glightbox-container .gbtn,
.glightbox-container .gclose{
  position: fixed !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;             /* cao nhất có thể */
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important; /* Đảm bảo hiển thị */
  align-items: center; justify-content: center;
}

/* Kiểu dáng chung cho nút prev/next */
.glightbox-container .gbtn {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: transparent;
  text-indent: -9999px;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease;

  /* Thay thế bằng background image */
  background: rgba(0,0,0,.25) url("https://ajillsabor.com/wp-content/themes/precise/assets/img/arrow.svg") center center no-repeat !important;
  background-size: 18px auto !important;
}
.glightbox-container .gbtn:hover { background-color: #ff6800 !important; }

/* Vị trí và xoay cho nút TRƯỚC (PREV) */
.glightbox-container .gprev{
  left: 16px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Vị trí và xoay cho nút TIẾP THEO (NEXT) */
.glightbox-container .gnext{
  right: 16px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Nút Close */
.glightbox-container .gclose{
  top: 14px !important; right: 14px !important;
  width: 44px; height: 44px;
  background: rgba(0,0,0,.55) !important;
  border-radius: 9999px;
  
  /* Giữ màu cho icon SVG bên trong */
  color: #fff !important;
}

/* iOS notch safe-area */
@supports (padding: max(0px)){
  .glightbox-container .gclose{
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
  }
}

/* Nếu trước đây có rule ẩn .gbtn ở mobile thì vô hiệu nó đi */
@media (max-width: 640px){
  .glightbox-container .gbtn{ display: flex !important; }
}

/* Ẩn hoàn toàn SVG icon mặc định của GLightbox bên trong nút */
.glightbox-container .gprev.gbtn svg, .glightbox-container .gnext.gbtn svg {
  display: none !important;
  /* Đôi khi cần thêm: */
  width: 0 !important;
  height: 0 !important;
}

/* Tùy chọn: Đảm bảo không có chữ/ký tự unicode nào hiện ra */
.glightbox-container .gbtn {
  color: transparent !important;
  text-indent: -9999px !important;
}