/* ---------------------------------------------------------------------------
 * GỢI Ý LÊN BẬC VOUCHER XTRA
 *
 * VÌ SAO CẦN: voucher Xtra chạy theo thang bậc (đơn từ 100k/150k/250k…, mỗi bậc
 * một trần giảm). Hàm tự áp mã chỉ chọn mã tốt nhất cho giỏ ĐANG CÓ, không bao
 * giờ nói cho khách biết mua thêm một ít nữa thì được giảm nhiều hơn hẳn. Không
 * có lời nhắc này thì đòn bẩy nâng giá trị đơn của thang bậc tắt ngay tại điểm
 * khách ra quyết định.
 *
 * 🔴 09/09/2026 — LÀM LẠI. Bản đầu là MỘT dải nhắc chung đặt phía trên cả danh
 * sách ("Mua thêm 115.000đ để được giảm tới 40.000đ" + thanh tiến độ). Hai cái
 * sai:
 *   1. Nó tách rời khỏi mã mà nó nói tới — khách nhìn danh sách 6 bậc mà không
 *      biết câu đó đang nói về bậc nào, phải tự dò.
 *   2. Nó chỉ nhắc được ĐÚNG MỘT bậc (bậc gần nhất), nên các bậc cao hơn — chỗ
 *      tiền giảm lớn nhất — không bao giờ được chào.
 * Tham khảo Shopee: lời nhắc là một dòng DÍNH LIỀN đáy thẻ của chính mã đó, mọi
 * bậc chưa với tới đều có, số tiền còn thiếu in đậm màu thương hiệu. Khách so
 * được các bậc với nhau và tự chọn bậc muốn nhắm.
 *
 * Bỏ luôn thanh tiến độ: ở Shopee thanh đó nói về SUẤT MÃ CÒN LẠI ("Đã dùng
 * 86%"), không phải chặng đường của giỏ hàng — dùng sai ngữ nghĩa thì thà bỏ.
 * ------------------------------------------------------------------------- */

/* Thẻ voucher có gợi ý thì bỏ bo góc đáy để dải nhắc nối vào liền mạch. */
.promotion-code-item-has-upsell {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
}

.voucher-upsell-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    /* Kéo lên đúng 1px để chồng viền, thẻ và dải trông là một khối. */
    margin: -1px 0 0;
    padding: 8px 12px;
    border: 1px solid #e3e3e3;
    border-top: 1px dashed #e3e3e3;
    border-radius: 0 0 8px 8px;
    background: #fafafa;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    word-break: break-word;
}

/* Mũi tên nhỏ hướng lên: gắn ý "lên bậc" mà không cần thêm ảnh. */
.voucher-upsell-row-arrow {
    flex: 0 0 auto;
    width: 14px;
    height: 18px;
    background: currentColor;
    color: var(--primary, #0f7fa5);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

/* Số tiền còn thiếu là thứ khách cần nhìn thấy trước tiên. */
.voucher-upsell-row b {
    font-weight: 600;
    color: var(--primary, #0f7fa5);
}

/* Bản DESKTOP: cả trang giỏ lẫn trang thanh toán đều nạp new-checkout.css SAU
   new-cart.css, nên .promotion-code-item ở đó có viền 2px (mobile-web là 1px).
   Dải nhắc phải khớp đúng bề dày, nếu không chỗ nối bị gãy một nấc. Đánh dấu
   bằng class ở template thay vì đoán theo bề rộng màn hình — trang desktop thu
   nhỏ cửa sổ vẫn là thẻ 2px. Riêng đường phân cách trên giữ 1px cho mảnh. */
.voucher-upsell-row-dk {
    border-width: 2px;
    border-top-width: 1px;
    margin-top: -2px;
}

@media (max-width: 767px) {
    .voucher-upsell-row {
        gap: 5px;
        padding: 7px 10px;
        font-size: 12.5px;
        line-height: 17px;
    }

    .voucher-upsell-row-arrow {
        height: 17px;
    }
}