/* =========================================================
 *  Single product (chi tiết sản phẩm) - layout cơ bản
 *  Lưu ý: web dùng 1rem = 20px
 * ========================================================= */

.pd-detail { padding: 1.5rem 0 2rem; }
.pd-breadcrumbs { width: 100%; margin-bottom: 1rem; }
.pd-top { width: 100%; }

/* ---------- Gallery ---------- */
.pd-gallery {display: flex;gap: 0.8rem;align-items: center;}
.pd-thumbs-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 4.6rem;
}
.pd-thumbs {
    width: 5rem;
    height: 16rem;          /* đủ hiển thị 3 thumbnail */
    overflow: hidden;
}
.pd-thumbs .swiper-slide { height: auto; }
.pd-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: #F5F8FC;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pd-thumb img {display: block;width: 100%;height: 100%;max-width: 65%;max-height: 65%;}
.pd-thumbs-arrow {
    position: relative;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border: 0.05rem solid #cfd8e0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s, border-color 0.2s;
}
.pd-thumbs-arrow::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0.5rem; height: 0.5rem;
    border-left: 0.1rem solid #034EA2;
    border-bottom: 0.1rem solid #034EA2;
}
.pd-thumbs-arrow.prev::after { transform: translate(-50%, -30%) rotate(135deg); }
.pd-thumbs-arrow.next::after { transform: translate(-50%, -70%) rotate(-45deg); }
.pd-thumbs-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.pd-thumb.active {border-color: none;}
.pd-thumb-play,
.pd-play > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #FFFFFF;
}
.pd-thumb-play::after,
.pd-play > span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.32rem 0 0.32rem 0.55rem;
    border-color: transparent transparent transparent #09AEEA;
}

/* Tránh "giật" layout: initGallery() (single-product.js) chỉ chạy ở hook
 * after() của Barba — tức là SAU khi nội dung trang đã hiện ra cho user
 * (xem assets/js/barba-init.js) — nên có 1 khoảng ngắn slide xếp thô theo
 * flex mặc định (chưa có class swiper-vertical cho pd-thumbs, chưa tính
 * layout) trước khi Swiper init xong và "snap" vào đúng vị trí.
 *
 * BUG đã gặp (verify bằng CDP, 2026-10-03): bản đầu dùng class
 * "swiper-initialized" (do chính Swiper tự gắn) để quyết định hiện/ẩn —
 * nhưng leave() trong barba-init.js gọi destroySwipers() để huỷ Swiper của
 * trang CŨ (lúc này vẫn đang hiện cho user, Barba chưa swap xong), và
 * Swiper.destroy() cũng tự xoá class "swiper-initialized" đó. Kết quả:
 * ngay khi user BẤM link (trước khi trang mới kịp hiện ra), gallery của
 * trang đang xem (chưa rời) đột ngột mất trắng — giật ngược, rõ nhất trên
 * PC vì gallery to. Fix: dùng class "is-loading" riêng, in cứng trong HTML
 * server render (single-product.php) — chỉ bị gỡ ĐÚNG 1 LẦN bởi JS của
 * chính mình ngay sau khi tạo Swiper, không bị ảnh hưởng khi trang đó sau
 * này trở thành trang cũ và bị destroy() ở lần điều hướng tiếp theo.
 *
 * Loading che + icon xoay (2026-10-03, vòng 3): ẩn hẳn nội dung thật
 * (.swiper-wrapper) sau 1 lớp nền đặc (::before, che kín không lộ layout
 * thô bên dưới) + icon xoay tròn (::after, canh giữa). Khi is-loading bị
 * gỡ (ngay sau khi Swiper tạo xong), lớp che + icon fade out, nội dung
 * thật fade in cùng lúc — không dùng display:none nên không bị nhảy bố
 * cục (giữ nguyên chỗ, chỉ đổi opacity). */
.pd-main,
.pd-thumbs,
.pd-variants-swiper {
    position: relative;
}
.pd-main .swiper-wrapper,
.pd-thumbs .swiper-wrapper,
.pd-variants-swiper .swiper-wrapper {
    opacity: 1;
    transition: opacity .3s ease;
}
.pd-main.is-loading .swiper-wrapper,
.pd-thumbs.is-loading .swiper-wrapper,
.pd-variants-swiper.is-loading .swiper-wrapper {
    opacity: 0;
}
/* lớp nền che */
.pd-main::before,
.pd-thumbs::before,
.pd-variants-swiper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: #F5F8FC;
    transition: opacity .3s ease;
}
.pd-main.is-loading::before,
.pd-thumbs.is-loading::before,
.pd-variants-swiper.is-loading::before {
    opacity: 1;
}
/* icon xoay (loading spinner) */
.pd-main::after,
.pd-thumbs::after,
.pd-variants-swiper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8rem;
    height: 1.8rem;
    margin: -0.9rem 0 0 -0.9rem;
    border-radius: 50%;
    border: 0.18rem solid rgba(3, 78, 162, 0.15);
    border-top-color: #034EA2;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.pd-main.is-loading::after,
.pd-thumbs.is-loading::after,
.pd-variants-swiper.is-loading::after {
    opacity: 1;
    animation: duo-pd-spin .8s linear infinite;
}
@keyframes duo-pd-spin {
    to { transform: rotate(360deg); }
}

.pd-main { flex: 1 1 auto; min-width: 0; border-radius: 0.6rem; overflow: hidden; }
.pd-main-item {position: relative;height: 27rem;display: flex;align-items: center;justify-content: center;}
.pd-main-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 95%;
    max-height: 95%;
}
.pd-play {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}
.pd-play > span { width: 3.5rem; height: 3.5rem; background: rgba(15, 73, 125, 0.9); }
.pd-play > span::after { border-width: 0.7rem 0 0.7rem 1.2rem; }

/* ---------- Summary ---------- */
.pd-summary { padding-left: 1rem; }
.pd-title,.pd-related-title {margin: 0 0 0.8rem;color: #034EA2;font-family: 'Momo Trust Display';font-style: normal;font-size: 2rem;line-height: 1.2;}
.pd-desc { font-size: 0.9rem; line-height: 1.6; color: #444; margin-bottom: 1rem; }

.pd-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.2rem;
    margin: 1rem 0;
    padding: 0 0 1.5rem;
    border-bottom: 0.05rem solid #e6eaee;
    margin-bottom: 1.5rem;
}
.pd-info-item {display: flex;gap: 1rem;}
.pd-info-label {font-size: 0.8rem;color: #333;}
.pd-info-value {font-size: .8rem;color: #2b8fd6;font-family: 'Google Sans Flex Medium';}

.pd-variants { margin-top: 1rem; }
.pd-variant { display: block; text-align: center; text-decoration: none; }
.pd-variant-img {border-radius: 0.5rem;overflow: hidden;width: 5rem;height: 5rem;display: flex;margin: auto;align-items: center;justify-content: center;margin-bottom: 1rem;}
.pd-variant-img img { display: block; width: 100%; height: auto; }
.pd-variant-title {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #034EA2;
    line-height: 1.3;
    font-family: 'Google Sans Flex SemiBold';
    opacity: 0;
    transition: .5s all;
}

/* ---------- Accordion ---------- */
.pd-accordion { width: 100%; margin-top: 2rem; }
.pd-acc-item {
    border: 0.05rem solid rgb(18 60 95 / 30%);
    border-radius: 0.6rem;
    margin-bottom: 0.7rem;
    overflow: hidden;
    background: #fff;
    border-radius: 1.5rem;
}
.pd-acc-item.open { border-color: #cfe0f2; }
.pd-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.6rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    margin: 0;
}
.pd-acc-title {/* Hướng dẫn sử dụng / Bảo quản */font-family: 'Momo Trust Display';font-style: normal;font-weight: 400;font-size: 1.2rem;

    /* #034EA2 */color: #034EA2;


    /* Inside auto layout */text-transform: none;}
.pd-acc-icon { position: relative; width: 1rem; height: 1rem; flex: 0 0 auto; }
.pd-acc-icon::before,
.pd-acc-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #034EA2;
    transition: opacity 0.2s;
}
.pd-acc-icon::before { width: 1rem; height: 0.1rem; }
.pd-acc-icon::after { width: 0.1rem; height: 1rem; }
.pd-acc-item.open .pd-acc-icon::after { opacity: 0; }
.pd-acc-body { height: 0; overflow: hidden; transition: height 0.3s ease; }
.pd-acc-inner { padding: 0 1.1rem 1.1rem; font-size: 1rem; line-height: 1.65; color: #444; }
.pd-acc-inner ul { padding-left: 1.1rem; list-style: disc; }

/* ---------- Related ---------- */
.pd-related-sec {padding: 1.5rem 0 2.5rem;background: linear-gradient(180deg, rgba(242, 233, 229, 0) 0%, #F2E9E5 50%, rgba(242, 233, 229, 0) 100%);}
.pd-related-head { width: 100%; margin-bottom: 0rem; }
.pd-related { width: 100%; }
p.pd-related-sub {
    margin: 0;
}

.single-product  footer#footer {
    margin-top: 1rem;
}
.pd-rel-card {display: block;text-align: left;text-decoration: none;padding: 0.5rem;}
.pd-rel-img {display: block;border-radius: 0.6rem;overflow: hidden;height: 21rem;display: flex;align-items: center;}
.pd-rel-img img {display: block;width: auto;height: auto;max-width: 90%;max-height: 90%;margin: auto;}
.pd-rel-cat {display: block;margin-top: 0;font-size: 0.75rem;color: #034EA2;}
.pd-rel-name {display: block;font-size: 1.1rem;color: #034EA2;line-height: 1.3;font-family: 'Momo Trust Display';margin-top: .2rem;display: block;}
.pd-related-nav .arrow-slide { cursor: pointer; }
button.pd-thumb.has-video img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.pd-info-item span.pd-info-label {
    width: 6.7rem;
}

.pd-variant:hover span.pd-variant-title {
    opacity: 1;
}
.pd-acc-item.open {}

.pd-acc-item.open span.pd-acc-title {
    color: #09AEEA;
}

.pd-acc-item.open .pd-acc-icon::before,.pd-acc-item.open .pd-acc-icon::after {
    background: #09AEEA;
}
@media (max-width: 1600px) {
    .pd-acc-inner,
    .pd-desc{
        font-size: 1.1rem;
    }
    .pd-info-value {
        font-size: .9rem;
    }

    .pd-info-item span.pd-info-label {
        font-size: .9rem;
        width: 7.7rem;
    }
}
/* ---------- Responsive ---------- */
@media (max-width: 849px) {
    .pd-summary { padding-left: 0; margin-top: 1.2rem; }
}
@media (max-width: 599px) {
    .pd-thumbs-wrap { flex: 0 0 3.8rem; }
    .pd-thumbs { width: 3.8rem; height: 12.5rem; }
    .pd-info-grid { grid-template-columns: 1fr; }
    .pd-title { font-size: 1.3rem; }
}
@media only screen and (max-width: 767px) {
    .pd-detail .row>div:not(.col):not([class^=col-]):not([class*=" col-"]) {
        width: auto !important;
    }

    section.pd-detail .row .row {
        margin: 0;
    }

    .pd-accordion {
        padding: 0 15px;
    }

    .pd-acc-title {
        line-height: 1;
        font-size: 1rem;
    }

    .pd-main-item {
        height: 20rem;
    }

    .single-post section.pd-related-sec {
        padding-top: 2.5rem;
    }
}

/* mobile: nav chỉ còn dots (không mũi tên), canh giữa */
.slide-nav-mobile.pagi-only {
    justify-content: center;
}

/* pd-variants: dots chỉ hiện trên mobile */
.pd-variants .pd-variants-pagi {
    position: static;
    display: none;
    text-align: center;
    margin-top: 1rem;
    line-height: 0;
}
.pd-variants .pd-variants-pagi .swiper-pagination-bullet {
    background: #09AEEA;
}
@media (max-width: 849px) {
    .pd-variants .pd-variants-pagi {
        display: block;
    }
}

/* pd-variants: mũi tên hiện cả PC và mobile */
.pd-variants { position: relative; }
.pd-variants-nav { display: block; }
.pd-variants-nav .arrow-slide {
    position: absolute;
    top: 2.5rem;
    transform: translateY(-50%);
    z-index: 3;
    width: 2rem;
    line-height: 0;
    cursor: pointer;
}
.pd-variants-nav .arrow-slide svg { width: 100%; height: auto; }
.pd-variants-nav .arrow-slide.prev { left: -2rem; }
.pd-variants-nav .arrow-slide.next { right: -2rem; }
.pd-variants-nav .arrow-slide.swiper-button-disabled { opacity: 0.35; cursor: default; }
@media only screen and (max-width: 767px) {
    .pd-variants-nav .arrow-slide.prev { left: 0rem; }
    .pd-variants-nav .arrow-slide.next { right: 0rem; }
    .pd-variant-img {
        width: 12rem;
        height: 10rem;
    }
    .pd-variant {
        padding: 0 10px;
    }
    .pd-variants-swiper {
        background-position: top 7.8rem center;
    }
    .pd-acc-inner, .pd-desc {
        font-size: 1rem;
    }
    .pd-variant-title {
        margin-top: 2rem;
    }
}