/**
 * Storefront checkout — màu sắc / nút cố định, dùng chung mọi theme.
 * Font vẫn kế thừa --font-hel / theme; không ghi đè typography.
 */
.cart-mobile-layout,
section#payment.cart-payment-page {
    --sf-checkout-primary: #16a34a;
    --sf-checkout-primary-dark: #15803d;
    --sf-checkout-primary-light: #22c55e;
    --sf-checkout-focus-ring: rgba(22, 163, 74, 0.18);
    --sf-checkout-header-icon: #16a34a;
    --sf-checkout-neutral-icon: #64748b;
    /* Ghi đè biến theme chỉ trong vùng checkout */
    --background: #16a34a;
    --bggradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Nút đặt hàng — không gradient cam / màu theme */
.cart-mobile-layout .checkout-btn,
.cart-mobile-layout #payging_btn.checkout-btn,
section#payment.cart-payment-page #payging_btn {
    background: linear-gradient(135deg, var(--sf-checkout-primary-light) 0%, var(--sf-checkout-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.28) !important;
}

.cart-mobile-layout .checkout-btn:hover:not(:disabled):not(.disableevent),
.cart-mobile-layout #payging_btn.checkout-btn:hover:not(:disabled):not(.disableevent),
section#payment.cart-payment-page #payging_btn:hover {
    background: linear-gradient(135deg, var(--sf-checkout-primary) 0%, var(--sf-checkout-primary-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.34) !important;
}

.cart-mobile-layout .coupon-btn {
    background: var(--sf-checkout-primary) !important;
    color: #fff !important;
}

.cart-mobile-layout .coupon-btn:hover:not(.disableevent) {
    background: var(--sf-checkout-primary-dark) !important;
    color: #fff !important;
}

.cart-mobile-layout .coupon-input:focus {
    border-color: var(--sf-checkout-primary) !important;
    box-shadow: 0 0 0 3px var(--sf-checkout-focus-ring) !important;
}

.cart-mobile-layout .section-header i,
.cart-mobile-layout .payment-methods h3 i,
.cart-mobile-layout .ecard-balance-section h3 i,
.cart-mobile-layout .voucher-section-header h3 i {
    color: var(--sf-checkout-header-icon) !important;
}

.cart-mobile-layout .cart-item-count-badge,
.cart-mobile-layout .voucher-count {
    background: var(--sf-checkout-primary) !important;
    color: #fff !important;
}

.cart-mobile-layout .form-input:focus,
.cart-mobile-layout .form-select:focus {
    border-color: var(--sf-checkout-primary) !important;
    box-shadow: 0 0 0 0.12rem var(--sf-checkout-focus-ring) !important;
}

.cart-mobile-layout .payment-method.active {
    border-left-color: var(--sf-checkout-primary) !important;
}

.cart-mobile-layout .payment-method input[type="radio"]:checked {
    border-color: var(--sf-checkout-primary) !important;
}

.cart-mobile-layout .payment-method input[type="radio"]:checked::after {
    background: var(--sf-checkout-primary) !important;
}

.cart-mobile-layout .points-section {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    color: #fff !important;
}

/* Desktop legacy checkout (section#payment) */
section#payment.cart-payment-page {
    background: #f4f6f8 !important;
}

section#payment.cart-payment-page #coupon_cart_a {
    background: var(--sf-checkout-primary) !important;
    color: #fff !important;
    border: none !important;
}

section#payment.cart-payment-page #coupon_cart_a:hover {
    background: var(--sf-checkout-primary-dark) !important;
    color: #fff !important;
}

section#payment.cart-payment-page #u_infor_form input:focus,
section#payment.cart-payment-page #u_infor_form select:focus,
section#payment.cart-payment-page #u_infor_form textarea:focus,
section#payment.cart-payment-page .select2-dropdown-open .select2-choice {
    border-color: var(--sf-checkout-primary) !important;
    box-shadow: 0 0 0 3px var(--sf-checkout-focus-ring) !important;
}

section#payment.cart-payment-page #hinh-thuc-thanh-toan div.info-payment p.active {
    border-color: var(--sf-checkout-primary) !important;
    box-shadow: 0 0 0 3px var(--sf-checkout-focus-ring) !important;
}

section#payment.cart-payment-page .item-content-payment-table a:hover {
    color: var(--sf-checkout-primary) !important;
}