/* ==========================================================================
   PRODUCT SUMMARY COMPONENT (INFO ACTION STACK)
   Sử dụng 100% Design Tokens từ global.css
   ========================================================================== */

.product-summary { 
    flex: 1; 
    min-width: 0; 
    width: 100%; 
    padding-top: 0; 
    box-sizing: border-box;
}

/* 1. DANH MỤC SẢN PHẨM */
.product-summary__categories { 
    color: var(--text-grey, #7B8A99); 
    margin-bottom: var(--space-heading-bottom, 8px); 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 6px; 
    font-family: var(--font-lexend), sans-serif;
    font-size: var(--fs-caption, 13px);
    font-weight: var(--fw-body-s, 300);
    line-height: var(--lh-caption, 1.5);
}

.product-summary__categories a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-base, all 0.3s ease);
}

.product-summary__categories a:hover {
    color: var(--color-accent, #027CC5);
}

/* 2. TÊN SẢN PHẨM */
.product-summary__title { 
    color: var(--text-title, #000000); 
    margin: 0 0 var(--space-heading-bottom, 8px) 0; 
    font-family: var(--font-lexend), sans-serif !important;
    font-size: var(--fs-h2, 32px);
    font-weight: var(--fw-h2-m, 600);
    line-height: var(--lh-h2-m, 1.25);
}

/* 3. ĐƯỜNG PHÂN CÁCH */
.product-summary__divider { 
    border: none;
    border-top: 1px solid rgba(123, 138, 153, 0.25); 
    margin: var(--component-gap, 15px) 0; 
}

/* 4. MÔ TẢ NGẮN */
.product-summary__desc { 
    color: var(--text-dark, #000000); 
    opacity: 0.9;
    margin-bottom: var(--space-text-bottom, 20px); 
    line-height: var(--lh-body-m, 1.5);
    font-size: var(--fs-body-m, 16px);
    font-weight: var(--fw-body-m, 300);
    font-family: var(--font-lexend), sans-serif;
}

.product-summary__desc p {
    margin: 0 0 10px 0;
}

.product-summary__desc p:last-child {
    margin-bottom: 0;
}

/* 5. GIÁ TIỀN */
.product-summary__price {
    margin-bottom: var(--space-text-bottom, 20px);
}

.product-summary__price .price, 
.product-summary__price .amount,
.product-summary__price .price-contact { 
    font-family: var(--font-lexend), sans-serif !important; 
    font-weight: var(--fw-h2-m, 600) !important; 
    font-size: var(--fs-h2-m, 32px) !important; 
    color: var(--text-dark, #000000) !important; 
    display: block; 
    margin-bottom: 0; 
    line-height: var(--lh-h2-m, 1.25);
}

.product-summary__price del .amount {
    font-size: var(--fs-h5, 18px) !important;
    font-weight: var(--fw-body-m, 300) !important;
    color: var(--text-grey, #7B8A99) !important;
    margin-right: 8px;
}

/* 6. NÚT HÀNH ĐỘNG (LIÊN HỆ & ZALO) */
.product-summary__action { 
    width: 100%; 
}

.product-summary__action-row {
    display: flex;
    align-items: center;
    gap: var(--component-gap, 15px);
    width: 100%;
    max-width: 480px;
}

.product-summary__btn {
    height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-family: var(--font-lexend), sans-serif;
    font-weight: 600;
    font-size: var(--fs-btn-m, 14px);
    line-height: var(--lh-btn-m, 1.5);
    border-radius: var(--radius-atom, 4px);
    transition: var(--transition-base, all 0.3s ease);
    cursor: pointer;
    flex: 1 1 50%;
    white-space: nowrap;
}

/* Nút Liên hệ với Shop: Nền xanh accent, chữ trắng */
.product-summary__btn--contact {
    background-color: var(--color-accent, #027CC5) !important;
    color: var(--text-white, #ffffff) !important;
    border: 1px solid var(--color-accent, #027CC5) !important;
    text-transform: uppercase;
}

.product-summary__btn--contact:hover {
    background-color: var(--color-accent-dark, #2F6D9B) !important;
    border-color: var(--color-accent-dark, #2F6D9B) !important;
}

/* Nút Zalo: Nền trắng, viền xanh nhạt, icon Zalo + SĐT */
.product-summary__btn--zalo {
    background-color: var(--color-primary, #ffffff) !important;
    border: 1px solid var(--color-accent, #027CC5) !important;
    color: var(--text-dark, #000000) !important;
    gap: 8px;
}

.product-summary__btn--zalo:hover {
    background-color: rgba(74, 155, 212, 0.08) !important;
    border-color: var(--color-accent-dark, #2F6D9B) !important;
}

.product-summary__btn--zalo .zalo-img-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
}

/* RESPONSIVE DƯỚI 768PX (KẾ THỪA TỰ ĐỘNG BIẾN TOKENS TỪ GLOBAL.CSS) */
@media (max-width: 768px) {
    .product-summary__action-row {
        gap: 10px;
        max-width: 100%;
    }

    .product-summary__btn {
        height: 40px;
        padding: 0 10px;
    }

    .product-summary__btn--zalo .zalo-img-icon {
        width: 20px !important;
        height: 20px !important;
    }
}