/* Voucher ở cột phải trang chi tiết sản phẩm — dạng vé gọn cho cột hẹp (ghi đè /static/css/vouchers.css). */
.vouchers-list { margin: 16px 0; }
.vouchers-list .vouchers-wrapper { padding: 14px; border: 1px solid #ececf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.vouchers-list .vouchers-header { display: flex !important; align-items: center !important; justify-content: space-between; gap: 10px; margin: 0 0 12px !important; padding: 0 0 10px !important; border-bottom: 1px solid #f1f2f5 !important; }
.vouchers-list .vouchers-title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1f2937 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vouchers-list .vouchers-count { flex-shrink: 0; padding: 3px 10px !important; border-radius: 999px !important; background: #fff1f2 !important; color: #e11d48 !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; line-height: 1.4 !important; }
.vouchers-list .vouchers-container { display: flex !important; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px 4px 2px 0 !important; margin: 0 !important; }

.vouchers-list .voucher-item { display: flex !important; align-items: stretch; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; overflow: hidden; position: relative; transition: border-color .15s, box-shadow .15s; }
.vouchers-list .voucher-item:hover { border-color: #fda4af !important; box-shadow: 0 4px 12px rgba(225, 29, 72, .1) !important; }
.vouchers-list .voucher-item.voucher-freeship:hover { border-color: #86efac !important; box-shadow: 0 4px 12px rgba(22, 163, 74, .12) !important; }

/* Cuống vé: hẹp, icon tròn, mép răng cưa bằng 2 lỗ tròn */
.vouchers-list .voucher-icon { flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; height: auto !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; position: relative; background: linear-gradient(160deg, #fb7185, #e11d48) !important; border-right: 1.5px dashed rgba(255, 255, 255, .6); }
.vouchers-list .voucher-freeship .voucher-icon { background: linear-gradient(160deg, #4ade80, #16a34a) !important; }
.vouchers-list .voucher-vip .voucher-icon { background: linear-gradient(160deg, #fbbf24, #d97706) !important; }
.vouchers-list .voucher-icon::before, .vouchers-list .voucher-icon::after { content: ''; position: absolute; right: -7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid #e5e7eb; z-index: 1; }
.vouchers-list .voucher-icon::before { top: -7px; }
.vouchers-list .voucher-icon::after { bottom: -7px; }
.vouchers-list .voucher-icon > div { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.vouchers-list .voucher-icon img, .vouchers-list .voucher-icon svg { width: 26px !important; height: 26px !important; max-width: none !important; border-radius: 50%; object-fit: contain; margin: 0 !important; }
.vouchers-list .voucher-vip .voucher-icon svg { color: #d97706; width: 22px !important; height: 22px !important; }

.vouchers-list .voucher-content { flex: 1 !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 10px 12px !important; display: flex !important; flex-direction: column; gap: 3px; background: transparent !important; }
.vouchers-list .voucher-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #111827 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; }
.vouchers-list .voucher-subtitle { margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: #6b7280 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vouchers-list .voucher-progress { display: none !important; }
.vouchers-list .voucher-footer { display: flex !important; align-items: center !important; justify-content: space-between; gap: 8px; margin: 6px 0 0 !important; padding: 0 !important; }
.vouchers-list .voucher-expiry { min-width: 0; font-size: 11.5px !important; line-height: 1.3 !important; color: #9ca3af !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vouchers-list .voucher-expiry br { display: none; }
.vouchers-list .voucher-expiry span:last-child { margin-left: 3px; font-weight: 600; color: #4b5563; }
.vouchers-list .voucher-use-btn { flex-shrink: 0; height: 28px !important; min-width: 0 !important; width: auto !important; padding: 0 12px !important; margin: 0 !important; border: 1px solid #e11d48 !important; border-radius: 999px !important; background: #fff !important; color: #e11d48 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; transition: background .15s, color .15s; }
.vouchers-list .voucher-use-btn:hover { background: #e11d48 !important; color: #fff !important; }
.vouchers-list .voucher-freeship .voucher-use-btn { border-color: #16a34a !important; color: #16a34a !important; }
.vouchers-list .voucher-freeship .voucher-use-btn:hover { background: #16a34a !important; color: #fff !important; }
.vouchers-list .voucher-vip .voucher-use-btn { border-color: #d97706 !important; color: #d97706 !important; }
.vouchers-list .voucher-vip .voucher-use-btn:hover { background: #d97706 !important; color: #fff !important; }
.vouchers-list .vouchers-container::-webkit-scrollbar { width: 4px; }
.vouchers-list .vouchers-container::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

/* Fix: khung danh sách là flex cột + max-height → voucher bị co (overflow:hidden làm min-height = 0)
   khiến tên / điều kiện bị cắt chồng lên nhau. Giữ nguyên chiều cao tự nhiên, để khung tự cuộn. */
.vouchers-list .vouchers-container > .voucher-item { flex: 0 0 auto !important; }
.vouchers-list .voucher-content { justify-content: flex-start !important; }
.vouchers-list .voucher-title, .vouchers-list .voucher-subtitle, .vouchers-list .voucher-footer { flex-shrink: 0; }
.vouchers-list .voucher-title { min-height: 0; padding-top: 1px; }
.vouchers-list .voucher-subtitle { line-height: 1.45 !important; }