/* Flow v2 chỉ thêm hộp xác nhận. Thẻ sản phẩm dùng nguyên renderer/CSS penci.css. */

body.hv3-penci-login-layer #hv3-login-modal { z-index: calc(var(--hv3-modal-z, 1080) + 20); }
body.hv3-penci-login-layer > .modal-backdrop { z-index: calc(var(--hv3-modal-z, 1080) + 10); }

/* 25/10: nút mua bị khoá trong lúc kiểm tra mẫu (penci-flow.js lockBuyButtons). Vòng xoay lấy từ 'is-busy' sẵn có của trang SP. */
.hv3-penci-flow-wait { pointer-events: none; }

.hv3-penci-flow-confirm[hidden] { display: none !important; }
.hv3-penci-flow-confirm {
    --hv3-modal-bg: #fff;
    position: fixed; inset: 0; z-index: var(--hv3-modal-z, 1080); display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box; background: var(--hv3-modal-scrim, rgba(16, 24, 40, .45));
}
.hv3-penci-flow-confirm .hv3-penci-flow-confirm__box {
    position: relative; width: 100%; max-width: 540px; max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 24px;
    border-radius: 16px; background: #fff; box-shadow: 0 20px 50px -20px rgba(16, 24, 40, .45);
}
.hv3-penci-flow-confirm .hv3-modal__x {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: #F2F4F7; color: #475467; font-size: 20px; line-height: 1; cursor: pointer;
}
.hv3-penci-flow-confirm__title { margin: 0 32px 14px 0; font-size: 18px; color: #101828; }
.hv3-penci-flow-confirm__design { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #F7F9FA; }
.hv3-penci-flow-confirm__design img { flex: 0 0 160px; width: 160px; height: 120px; object-fit: contain; border-radius: 8px; background: #fff; }
.hv3-penci-flow-confirm__design div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hv3-penci-flow-confirm__design span { font-size: 13px; color: var(--hv3-muted, #667085); }
.hv3-penci-flow-confirm__note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--hv3-muted, #667085); }
.hv3-penci-flow-confirm__err { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #FEF3F2; color: #B42318; font-size: 13px; }
.hv3-penci-flow-confirm__actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: nowrap; }
.hv3-penci-flow-confirm__actions button { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.35; white-space: normal; cursor: pointer; }
.hv3-penci-flow-confirm__no { border: 1px solid #D0D5DD; background: #fff; color: #344054; }
.hv3-penci-flow-confirm__yes { border: 0; background: #207F5D; color: #fff; font-weight: 600; }
.hv3-penci-flow-confirm__yes:disabled { opacity: .7; cursor: progress; }
.hv3-penci-flow-confirm button:focus,
.hv3-penci-flow-confirm button:focus-visible,
.hv3-penci-flow-confirm button:active { outline: none; box-shadow: none; }

@media (max-width: 767px) {
    .hv3-penci-flow-confirm .hv3-penci-flow-confirm__box { padding: 20px 16px; }
    .hv3-penci-flow-confirm__design img { flex-basis: 112px; width: 112px; height: 100px; }
}

/* 03/11: nhắc bấm lại "Thiết kế với Penci" (penci-flow.js askClickToLink) — viền sáng nhấp 3 lần. */
@keyframes hv3PenciNudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 175, 203, 0); } 50% { box-shadow: 0 0 0 6px rgba(0, 175, 203, .35); } }
.hv3-penci-nudge { animation: hv3PenciNudge 1s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .hv3-penci-nudge { animation: none; box-shadow: 0 0 0 3px rgba(0, 175, 203, .45); } }