/**
 * ====================================================================
 * MDP UNIFIED BUTTON SYSTEM  v1.0
 * ====================================================================
 * Áp dụng cho toàn bộ website: vpssim.vn / vpssim.com / 4kvps.com
 *
 * Chuẩn duy nhất:
 *   min-height : 44px
 *   padding    : 10px 22px
 *   font-size  : 15px / weight 600
 *   radius     : 6px
 *   display    : inline-flex + align-items center
 *
 * PHÂN LOẠI MÀU:
 *   Add to Cart / Thêm vào giỏ   → Xanh dương   #2563eb
 *   Buy Now / Mua Ngay            → Xanh lá      #10b981 → #059669
 *   Mua bằng Hoa hồng / Affiliate → Tím gradient #667eea → #764ba2
 *   Gia hạn / Renew               → Cam gradient #f59e0b → #d97706
 * ====================================================================
 */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --mdp-btn-h        : 44px;
    --mdp-btn-py       : 10px;
    --mdp-btn-px       : 22px;
    --mdp-btn-fs       : 15px;
    --mdp-btn-fw       : 600;
    --mdp-btn-radius   : 6px;
    --mdp-btn-ease     : all 0.22s ease;

    --mdp-c-primary    : #2563eb;
    --mdp-c-primary-h  : #1d4ed8;
    --mdp-c-buy-a      : #10b981;
    --mdp-c-buy-b      : #059669;
    --mdp-c-aff-a      : #667eea;
    --mdp-c-aff-b      : #764ba2;
    --mdp-c-renew-a    : #f59e0b;
    --mdp-c-renew-b    : #d97706;
}

/* ── Base: mọi nút trong hệ thống ──────────────────────────── */
.single_add_to_cart_button,
.ban-key-pro-add-to-cart,
.bkp-qb-btn,
.mdp-aff-buy-btn,
.mdp-aff-vip-btn,
.mdp-aff-bkp-btn,
.bkp-renew-add-to-cart,
.bkp-renew-use-affiliate,
.ban-key-pro-add-key-btn,
.ban-key-pro-buy-key-btn {
    box-sizing      : border-box !important;
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    min-height      : var(--mdp-btn-h) !important;
    padding         : var(--mdp-btn-py) var(--mdp-btn-px) !important;
    font-size       : var(--mdp-btn-fs) !important;
    font-weight     : var(--mdp-btn-fw) !important;
    line-height     : 1.3 !important;
    border-radius   : var(--mdp-btn-radius) !important;
    cursor          : pointer !important;
    text-decoration : none !important;
    white-space     : nowrap !important;
    transition      : var(--mdp-btn-ease) !important;
    vertical-align  : middle !important;
    gap             : 6px !important;
    margin-top      : 0 !important;
}

/* ── Hàng chứa nhiều nút ───────────────────────────────────── */
.ban-key-pro-buttons-row,
.mdp-aff-buttons-row,
.mdp-product-btn-row {
    display     : flex !important;
    flex-wrap   : wrap !important;
    align-items : flex-start !important;
    gap         : 10px !important;
    margin-top  : 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   1. ADD TO CART / THÊM VÀO GIỎ HÀNG  —  Xanh dương
   ══════════════════════════════════════════════════════════════ */
.single_add_to_cart_button:not(.bkp-qb-btn),
.ban-key-pro-add-to-cart:not(.bkp-qb-btn),
.bkp-renew-add-to-cart,
.ban-key-pro-add-key-btn {
    background : var(--mdp-c-primary) !important;
    color      : #fff !important;
    border     : none !important;
    box-shadow : 0 2px 8px rgba(37,99,235,.22) !important;
}
.single_add_to_cart_button:not(.bkp-qb-btn):hover:not(:disabled),
.ban-key-pro-add-to-cart:not(.bkp-qb-btn):hover:not(:disabled),
.bkp-renew-add-to-cart:hover:not(:disabled),
.ban-key-pro-add-key-btn:hover:not(:disabled) {
    background : var(--mdp-c-primary-h) !important;
    color      : #fff !important;
    transform  : translateY(-2px) !important;
    box-shadow : 0 4px 14px rgba(37,99,235,.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. BUY NOW / MUA NGAY  —  Xanh lá
   ══════════════════════════════════════════════════════════════ */
.bkp-qb-btn,
.single_add_to_cart_button.bkp-qb-btn,
.ban-key-pro-add-to-cart.bkp-qb-btn {
    background : linear-gradient(135deg, var(--mdp-c-buy-a), var(--mdp-c-buy-b)) !important;
    color      : #fff !important;
    border     : none !important;
    box-shadow : 0 2px 10px rgba(16,185,129,.25) !important;
}
.bkp-qb-btn:hover:not(:disabled) {
    transform  : translateY(-2px) !important;
    box-shadow : 0 5px 16px rgba(16,185,129,.40) !important;
    color      : #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   3. MUA BẰNG HOA HỒNG / BUY WITH AFFILIATE  —  Tím gradient
   ══════════════════════════════════════════════════════════════ */
.mdp-aff-buy-btn,
.mdp-aff-vip-btn,
.mdp-aff-bkp-btn,
.bkp-renew-use-affiliate,
.ban-key-pro-buy-key-btn {
    background : linear-gradient(135deg, var(--mdp-c-aff-a), var(--mdp-c-aff-b)) !important;
    color      : #fff !important;
    border     : none !important;
    box-shadow : 0 2px 10px rgba(102,126,234,.25) !important;
}
.mdp-aff-buy-btn:hover:not(:disabled),
.mdp-aff-vip-btn:hover:not(:disabled),
.mdp-aff-bkp-btn:hover:not(:disabled),
.bkp-renew-use-affiliate:hover:not(:disabled),
.ban-key-pro-buy-key-btn:hover:not(:disabled) {
    transform  : translateY(-2px) !important;
    box-shadow : 0 5px 16px rgba(102,126,234,.42) !important;
    color      : #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   4. GIA HẠN / RENEW  —  Cam (giữ màu cũ cho quen thuộc)
   ══════════════════════════════════════════════════════════════ */
.bkp-renew-open-btn,
.ban-key-pro-renew-btn {
    background : linear-gradient(135deg, var(--mdp-c-renew-a), var(--mdp-c-renew-b)) !important;
    color      : #fff !important;
    border     : none !important;
    box-shadow : 0 2px 8px rgba(245,158,11,.22) !important;
}
.bkp-renew-open-btn:hover:not(:disabled),
.ban-key-pro-renew-btn:hover:not(:disabled) {
    transform  : translateY(-2px) !important;
    box-shadow : 0 4px 14px rgba(245,158,11,.38) !important;
    color      : #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   5. DISABLED / LOADING STATE
   ══════════════════════════════════════════════════════════════ */
.single_add_to_cart_button:disabled,
.ban-key-pro-add-to-cart:disabled,
.bkp-qb-btn:disabled,
.mdp-aff-buy-btn:disabled,
.mdp-aff-vip-btn:disabled,
.mdp-aff-bkp-btn:disabled,
.bkp-renew-add-to-cart:disabled,
.bkp-renew-use-affiliate:disabled,
.ban-key-pro-add-key-btn:disabled,
.ban-key-pro-buy-key-btn:disabled,
.mdp-aff-disabled,
.mdp-aff-vip-disabled,
.mdp-aff-bkp-disabled,
.mdp-aff-loading {
    opacity        : 0.52 !important;
    cursor         : not-allowed !important;
    transform      : none !important;
    box-shadow     : none !important;
    background     : #9ca3af !important;
    border-color   : transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   6. RESPONSIVE  —  Mobile: nút stack dọc, full-width
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .ban-key-pro-buttons-row,
    .mdp-aff-buttons-row,
    .mdp-product-btn-row {
        flex-direction : column !important;
        align-items    : stretch !important;
    }

    .ban-key-pro-buttons-row > *,
    .mdp-aff-buttons-row > *,
    .mdp-product-btn-row > * {
        width : 100% !important;
    }
}