:root {
    --card-bd: #e7e9ee;
    --card-bd-hover: #dfe2e8;
    --accent: #2563eb;
    --price: #e53935;
    --desc: #374151;
}

/* ===== layout 2 cột: gallery trái + info phải (cùng 1 hàng) ===== */
.pd-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

@media (max-width:992px) {
    .pd-wrap {
        grid-template-columns: 1fr;
        gap: 16px
    }
}

/* ===== gallery bên trái ===== */
.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px
}

/* Ảnh chính: nhỏ hơn thumbnails (theo yêu cầu), không cắt */
.pd-main {
    position: relative;
    border: 1px solid var(--card-bd);
    border-radius: 14px;
    background: #f6f7f9;
    overflow: hidden;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}



.pd-hint {
    font-size: .9rem;
    color: #6b7280;
    margin-top: 2px
}

/* Ribbon HOT */
.pd-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid #ffd1c7;
    color: #b91c1c;
    font-weight: 800
}

/* Thumbnails: TO HƠN ảnh chính */
.pd-thumbs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

@media (max-width:768px) {
    .pd-thumbs {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

.pd-thumb {
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    height: 200px;
    cursor: pointer;
    transition: transform .12s ease,box-shadow .12s ease,border-color .12s ease
}

    .pd-thumb:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(16,24,40,.08);
        border-color: var(--card-bd-hover)
    }

    .pd-thumb.active {
        outline: 2px solid var(--accent);
        outline-offset: 2px
    }

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

/* ===== info bên phải ===== */
.pd-right {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.pd-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: clamp(20px,2vw,26px)
}

.pd-price {
    font-weight: 900;
    color: var(--price);
    font-size: 1.15rem
}

/* badges */
.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.prd-badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    border: 1px solid #e2e6ea;
    background: #f1f3f5;
    color: #495057
}

    .prd-badge.hot {
        background: linear-gradient(135deg,#ffedea,#ffd7d0);
        color: #b91c1c;
        border-color: #ffc2b9
    }

    .prd-badge.stock {
        background: #eaf7ef;
        color: #1f7a3e;
        border-color: #cbead6
    }

    .prd-badge.out {
        background: #fff7e6;
        color: #a86a00;
        border-color: #ffe3b3
    }

    /* Nhãn nhạt + Giá trị đậm cho meta */
    .prd-badge.meta {
        gap: .35rem
    }

        .prd-badge.meta .label {
            color: #6b7280;
            font-weight: 600
        }

        .prd-badge.meta .value {
            color: #111827;
            font-weight: 800
        }

/* mô tả */
.pd-desc {
    padding: 12px;
    border: 1px solid var(--card-bd);
    border-radius: 12px;
    background: #fff;
    color: var(--desc);
    line-height: 1.55
}

/* nút hành động (2 màu khác nhau, không override global) */
.pd-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.btn-back {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: .15s ease
}

    .btn-back:hover {
        background: #f9fafb;
        transform: translateY(-1px)
    }

/* Đổi màu nút Đặt mua sang xanh lá nhẹ */
.btn-buy {
    background: #34d399; /* xanh lá nhẹ (emerald-400) */
    color: #fff;
    border: 1px solid #34d399;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: .15s ease;
    box-shadow: 0 6px 14px rgba(52,211,153,.22);
}

    .btn-buy:hover {
        background: #10b981; /* xanh lá đậm hơn khi hover (emerald-500) */
        border-color: #10b981;
        transform: translateY(-1px);
    }

    .btn-buy:active {
        transform: translateY(0)
    }


/* ===== Lightbox xem ảnh 100% ===== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn .12s ease
}

    .lightbox img {
        max-width: 96vw;
        max-height: 92vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0,0,0,.5)
    }

.lb-close {
    position: fixed;
    top: 14px;
    right: 14px;
    background: #111827;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .5rem .7rem;
    font-weight: 800;
    cursor: pointer
}

@keyframes fadeIn {
    from {
        opacity: .5
    }

    to {
        opacity: 1
    }
}
.pd-price-note {
    font-size: .85rem;
    color: greenyellow; /* hoặc giữ class text-muted cũng được */
    margin-top: 2px;
}
/* ===================== RESPONSIVE (DETAIL) ===================== */
@media (max-width:576px) {

    /* Khung ảnh chính: không ép height cứng để ảnh khỏi bị cắt */
    .pd-main {
        height: auto !important; /* bỏ 300px cứng */
        min-height: 220px; /* vẫn giữ khung nhìn tạm ổn */
        padding: 8px; /* thêm khoảng trắng quanh ảnh */
        overflow: visible; /* tránh che mất phần dưới của ảnh */
    }

        .pd-main img {
            width: auto !important;
            height: auto !important;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain !important; /* chỉ thu nhỏ, không crop */
            display: block;
            margin: 0 auto; /* căn giữa nếu ảnh nhỏ */
        }

    /* (Nếu muốn thumbnail không bị ăn mất phần trên mobile) */
    .pd-thumb {
        height: 140px;
    }

        .pd-thumb img {
            object-fit: contain;
        }
}

}