/* === Coupon Ticket === */
.coupon-ticket {
    --scallop: 6px;
    --gap: 16px;
    --notch-r: 6px;
    --divider-x: 90px;
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 72px;
    /* 2 lớp: tint xanh + trắng bên dưới → opaque, che kín ::before border layer */
    background:
        linear-gradient(rgba(var(--vz-success-rgb), .07), rgba(var(--vz-success-rgb), .07)),
        linear-gradient(#fff, #fff);

    /* Mask 4 layer: 2 anti-notch (intersect) + 1 scallop trái (add) + 1 fill (add) */
    /* Anti-notch = trong suốt ở vòng tròn, đen mọi nơi khác → intersect cắt lỗ */
    -webkit-mask-image:
        radial-gradient(circle at var(--divider-x) 0, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(circle at var(--divider-x) 100%, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(var(--scallop) at 0 50%, #0000 calc(var(--scallop) - .5px), #000 var(--scallop)),
        linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% 100%, calc(var(--scallop) + 1px) var(--gap), calc(100% - var(--scallop)) 100%;
    -webkit-mask-position: 0 0, 0 0, left, right;
    -webkit-mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
    -webkit-mask-composite: source-in, source-in, source-over, source-over;

    mask-image:
        radial-gradient(circle at var(--divider-x) 0, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(circle at var(--divider-x) 100%, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(var(--scallop) at 0 50%, #0000 calc(var(--scallop) - .5px), #000 var(--scallop)),
        linear-gradient(#000, #000);
    mask-size: 100% 100%, 100% 100%, calc(var(--scallop) + 1px) var(--gap), calc(100% - var(--scallop)) 100%;
    mask-position: 0 0, 0 0, left, right;
    mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
    mask-composite: intersect, intersect, add, add;
}

.coupon-ticket .coupon-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    padding: 10px 8px;
}

.coupon-ticket .coupon-code {
    font-weight: 700;
    font-size: 11px;
    color: var(--vz-success);
    word-break: break-all;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Đường kẻ dọc dash */
.coupon-ticket .coupon-divider {
    width: 0;
    align-self: stretch;
    border-left: 1.5px dashed rgba(var(--vz-success-rgb), .3);
}

.coupon-ticket .coupon-content {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coupon-ticket .coupon-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--vz-body-color, #333);
}

.coupon-ticket .coupon-sub {
    font-size: 11.5px;
    color: var(--vz-secondary-color, #888);
    margin-top: 2px;
}

.coupon-ticket .coupon-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 14px;
}

/* Wrapper: chứa ::before làm border theo hình dạng mask */
.coupon-ticket-wrapper {
    position: relative;
}

/* Border layer: cùng mask nhưng lớn hơn 1px mỗi cạnh → lộ ra 1px viền */
.coupon-ticket-wrapper::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: rgba(var(--vz-success-rgb), .3);
    z-index: 0;

    --scallop: 6px;
    --gap: 16px;
    --notch-r: 5px;
    --divider-x: 91px;

    /* Notch đồng tâm: dịch 1px (vì inset:-1px) để trùng tâm với ticket */
    -webkit-mask-image:
        radial-gradient(circle at var(--divider-x) 1px, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(circle at var(--divider-x) calc(100% - 1px), #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(var(--scallop) at 0 50%, #0000 calc(var(--scallop) - .5px), #000 var(--scallop)),
        linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% 100%, calc(var(--scallop) + 1px) var(--gap), calc(100% - var(--scallop)) 100%;
    -webkit-mask-position: 0 0, 0 0, left, right;
    -webkit-mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
    -webkit-mask-composite: source-in, source-in, source-over, source-over;

    mask-image:
        radial-gradient(circle at var(--divider-x) 1px, #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(circle at var(--divider-x) calc(100% - 1px), #0000 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
        radial-gradient(var(--scallop) at 0 50%, #0000 calc(var(--scallop) - .5px), #000 var(--scallop)),
        linear-gradient(#000, #000);
    mask-size: 100% 100%, 100% 100%, calc(var(--scallop) + 1px) var(--gap), calc(100% - var(--scallop)) 100%;
    mask-position: 0 0, 0 0, left, right;
    mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
    mask-composite: intersect, intersect, add, add;
}

.coupon-ticket {
    z-index: 1;
}