/* ============================================================
   HNNP — Product Gallery
   File: electron-child/assets/css/product-gallery.css
   ============================================================ */

.hnnp-product-gallery { width: 100%; user-select: none; }

/* ── Main wrap ── */
.hnnp-gallery-main-wrap {
    position: relative; background: #fff;
    border: 1px solid #d9dee7; border-radius: 12px;
    overflow: hidden; margin-bottom: 12px;
    aspect-ratio: 1 / 1;
    min-height: 200px;
}

.hnnp-gallery-main,
.hnnp-gallery-main .swiper-wrapper,
.hnnp-gallery-main .swiper-slide { height: 100%; }

.hnnp-gallery-main .swiper-wrapper { align-items: stretch; }

.hnnp-gallery-main-slide {
    height: 100%; display: flex !important;
    align-items: center; justify-content: center;
    background: #fff; box-sizing: border-box; padding: 16px;
}
.hnnp-gallery-main-slide a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: zoom-in;
    max-width: 100%;
    max-height: 100%;
}
.hnnp-gallery-main-slide img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain; object-position: center; margin: 0 auto;
}

/* ── Main nav: bán nguyệt ── */
.hnnp-gallery-nav {
    width: 36px !important; height: 72px !important;
    background: rgba(145,145,145,.65) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    position: absolute !important; top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important; visibility: visible !important;
    outline: none !important; border: none !important;
    cursor: pointer; z-index: 10; padding: 0 !important;
    color: #fff;
    transition: background .15s ease, opacity .15s ease;
    touch-action: manipulation;
}
.hnnp-gallery-nav--prev { left: 0 !important; border-radius: 0 36px 36px 0 !important; }
.hnnp-gallery-nav--next { right: 0 !important; border-radius: 36px 0 0 36px !important; }
.hnnp-gallery-nav:hover { background: rgba(120,120,120,.8) !important; }
.hnnp-gallery-nav svg { display: none !important; }

.hnnp-gallery-nav::after {
    content: "" !important; display: block !important;
    width: 16px !important; height: 16px !important;
    background-color: #fff !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important;
    -webkit-mask-size: contain !important; mask-size: contain !important;
}
.hnnp-gallery-nav--prev::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'/%3E%3C/svg%3E") !important;
}
.hnnp-gallery-nav--next::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") !important;
}
.hnnp-gallery-nav.swiper-button-disabled,
.hnnp-gallery-nav:disabled { opacity: .35 !important; pointer-events: none !important; }

/* ── Thumbnails wrap ── */
.hnnp-gallery-thumbs-wrap {
    position: relative; display: flex;
    align-items: center; padding: 0 28px;
    margin-top: 8px;
}
.hnnp-gallery-thumbs { flex: 1; overflow: hidden; }
.hnnp-gallery-thumb-slide {
    width: 68px !important; height: 68px !important;
    border: 1px solid #d9dee7; border-radius: 8px;
    overflow: hidden; cursor: pointer; background: #fff;
    flex-shrink: 0; box-sizing: border-box;
    display: flex !important; align-items: center; justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hnnp-gallery-thumb-slide img {
    width: 100%; height: 100%; object-fit: contain;
    display: block; padding: 3px; box-sizing: border-box;
}
.hnnp-gallery-thumb-slide:hover,
.hnnp-gallery-thumb-slide.swiper-slide-thumb-active {
    border-color: #2B5ACD;
    box-shadow: 0 0 0 0.5px #2B5ACD inset;
}

/* ── Thumb nav: nút tròn ── */
.hnnp-thumb-nav {
    position: absolute; top: 50%; z-index: 8;
    transform: translateY(-50%);
    width: 28px !important; height: 28px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    cursor: pointer; color: #333 !important; padding: 0 !important;
    transition: background .15s ease;
    flex-shrink: 0;
    outline: none !important;
    min-height: unset !important; min-width: unset !important;
    touch-action: manipulation;
}
.hnnp-thumb-nav--prev { left: 0; }
.hnnp-thumb-nav--next { right: 0; }
.hnnp-thumb-nav .icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.hnnp-thumb-nav .icon svg { width: 9px; height: 9px; fill: #444 !important; display: block; }
.hnnp-thumb-nav:hover { background: #fff !important; }
.hnnp-thumb-nav.swiper-button-disabled,
.hnnp-thumb-nav.swiper-button-lock,
.hnnp-thumb-nav:disabled { opacity: .35; pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .hnnp-gallery-main-wrap { aspect-ratio: 1 / 1; border-radius: 10px; }
    .hnnp-gallery-main-slide { padding: 12px; }
    .hnnp-gallery-nav { width: 30px !important; height: 58px !important; }
    .hnnp-gallery-nav--prev { border-radius: 0 30px 30px 0 !important; }
    .hnnp-gallery-nav--next { border-radius: 30px 0 0 30px !important; }
    .hnnp-gallery-thumbs-wrap { padding: 0 24px; }
    .hnnp-gallery-thumb-slide { width: 72px !important; height: 72px !important; border-radius: 7px; border-width: 0.5px !important; }
    .hnnp-gallery-thumb-slide.swiper-slide-thumb-active,
    .hnnp-gallery-thumb-slide:hover { border-width: 1px !important; }
}
@media (max-width: 480px) {
    .hnnp-gallery-thumb-slide { width: 64px !important; height: 64px !important; }
}