/* ==========================================================================
   PIN HOÀNG LONG — KHUNG XEM ẢNH PHÓNG TO (15/09/2026)
   Đi kèm js/hl-zoom.js. Gỡ bỏ = bỏ 2 dòng đăng ký trong config.php.
   ========================================================================== */

/* Con trỏ kính lúp để khách biết ảnh bấm được. Chủ shop chọn CHỈ đổi con trỏ, không thêm nút.
   .hl-prod__thumb img nằm trong thẻ <a> nên phải ghi đè con trỏ bàn tay của liên kết. */
.hl-zoom-san-sang #hl-pd-main,
.hl-zoom-san-sang .hl-desc img,
.hl-zoom-san-sang .review-images img,
.hl-zoom-san-sang .hl-prod__thumb img {
    cursor: zoom-in;
}

/* Khoá cuộn trang phía sau khi khung đang mở */
html.hl-zoom-mo,
html.hl-zoom-mo body {
    overflow: hidden;
    touch-action: none;
}

.hl-zoom {
    position: fixed;
    inset: 0;
    /* Trên nút Zalo (2147483644) — không thì bong bóng Zalo nổi đè lên ảnh đang xem */
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 12, 4, calc(0.92 * var(--hl-zoom-mo-dan, 1)));
    opacity: 0;
    transition: opacity .16s ease;
    /* Cử chỉ do JS lo hết; để trình duyệt tự xử là vuốt ngang biến thành quay lại trang trước */
    touch-action: none;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}

.hl-zoom.is-mo { opacity: 1; }

.hl-zoom__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 72px;
}

.hl-zoom__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    opacity: var(--hl-zoom-mo-dan, 1);
    transform-origin: center center;
    transition: transform .14s ease-out;
    will-change: transform;
    /* Ảnh thông số kỹ thuật chữ nhỏ: khi phóng to đừng làm mượt thành nhoè */
    image-rendering: -webkit-optimize-contrast;
}

/* Đang kéo / đang phóng thì bỏ chuyển động cho bám tay */
.hl-zoom.dang-phong .hl-zoom__img,
.hl-zoom.dang-keo .hl-zoom__img { transition: none; }
.hl-zoom.dang-phong .hl-zoom__img { cursor: grab; }
.hl-zoom.dang-phong .hl-zoom__img:active { cursor: grabbing; }

/* ---- nút ---- */
.hl-zoom__x,
.hl-zoom__nav {
    position: absolute;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    cursor: pointer;
    transition: background-color .14s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hl-zoom__x:hover,
.hl-zoom__nav:hover { background: rgba(255, 255, 255, .26); }

.hl-zoom__x:focus-visible,
.hl-zoom__nav:focus-visible { outline: 2px solid var(--hl-gold-1, #FFC53D); outline-offset: 2px; }

.hl-zoom__x {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
}

.hl-zoom__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}

.hl-zoom__nav--prev { left: 14px; }
.hl-zoom__nav--next { right: 14px; }

/* Một ảnh thì không có gì để chuyển */
.hl-zoom:not(.co-nhieu) .hl-zoom__nav { display: none; }

/* ---- thanh dưới ---- */
.hl-zoom__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 16px 16px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.hl-zoom__hint { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.hl-zoom.dang-phong .hl-zoom__hint { visibility: hidden; }

/* ---- đang tải / ảnh hỏng ---- */
.hl-zoom.is-dang-tai .hl-zoom__stage::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 999px;
    animation: hl-zoom-quay .7s linear infinite;
}

@keyframes hl-zoom-quay { to { transform: rotate(360deg); } }

.hl-zoom.is-hong .hl-zoom__stage::before {
    content: 'Không tải được ảnh này';
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.hl-zoom.is-hong .hl-zoom__img { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hl-zoom,
    .hl-zoom__img { transition: none; }
    .hl-zoom.is-dang-tai .hl-zoom__stage::after { animation-duration: 2s; }
}

/* ---- điện thoại ---- */
@media (max-width: 767px) {
    .hl-zoom__stage { padding: 48px 8px 66px; }

    .hl-zoom__x { top: 10px; right: 10px; width: 40px; height: 40px; }

    /* Nút chuyển ảnh nhỏ lại và mờ đi: trên điện thoại khách vuốt là chính, nhưng vẫn để nút
       cho người không quen vuốt. */
    .hl-zoom__nav { width: 38px; height: 38px; background: rgba(255, 255, 255, .1); }
    .hl-zoom__nav svg { width: 20px; height: 20px; }
    .hl-zoom__nav--prev { left: 6px; }
    .hl-zoom__nav--next { right: 6px; }

    .hl-zoom__hint { font-size: 11.5px; }
}