/* Cá nhân hoá xưng hô — modal + toast (self-contained). MÀU TẮC KÈ: mỗi landing set --pz-accent/--pz-on-accent/--pz-soft/--pz-ink qua PERSONALIZE_CFG. Fallback: navy #16203C / vàng #FFC020. */
.bh-greet-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(22,32,60,0.34); opacity: 0; transition: opacity .22s ease; }
.bh-greet-modal.open { opacity: 1; }
.bh-greet-card { position: relative; width: 100%; max-width: 380px; background: var(--pz-card, #fff); border-radius: 20px; padding: 30px 26px 22px; box-shadow: 0 20px 60px rgba(22,32,60,0.3); text-align: center; transform: translateY(10px) scale(.98); transition: transform .22s ease; font-family: inherit; color: var(--pz-ink, #16203C); }
.bh-greet-modal.open .bh-greet-card { transform: none; }
.bh-greet-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.05rem; color: #9a9a9a; cursor: pointer; line-height: 1; }
.bh-greet-emoji { font-size: 40px; line-height: 1; }
.bh-greet-card h3 { margin: 10px 0 6px; font-size: 1.2rem; color: var(--pz-ink, #16203C); }
.bh-greet-card > p { margin: 0 0 16px; font-size: .92rem; color: #5a5a5a; line-height: 1.55; }
.bh-greet-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--pz-border, var(--border, #E8E3D6)); border-radius: 12px; font-size: 16px; margin-bottom: 14px; }
.bh-greet-input:focus { outline: 2px solid var(--pz-accent, var(--brand-gold, #FFC020)); outline-offset: 1px; border-color: var(--pz-accent, var(--brand-gold, #FFC020)); }
.bh-greet-row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; }
.bh-greet-lbl { flex: 0 0 62px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--pz-border, var(--border, #E8E3D6)); border-radius: 12px; font-weight: 700; font-size: 1rem; color: var(--pz-ink, #16203C); background: var(--pz-soft, #FFF9EC); transition: background .15s, border-color .15s, color .15s; }
.bh-greet-row .bh-greet-input { margin-bottom: 0; }
.bh-greet-row.active .bh-greet-lbl { background: var(--pz-accent, var(--brand-gold, #FFC020)); border-color: var(--pz-accent, var(--brand-gold, #FFC020)); color: var(--pz-on-accent, #16203C); }
.bh-shake { animation: bh-greet-shake .42s; }
@keyframes bh-greet-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.bh-greet-btns { display: flex; gap: 10px; flex-direction: column-reverse; }
.bh-greet-btns button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; cursor: pointer; }
.bh-greet-skip { background: #fff; border: 1.5px solid var(--pz-border, var(--border, #E8E3D6)); color: #5a5a5a; }
.bh-greet-ok { background: var(--pz-accent, var(--brand-gold, #FFC020)); border: 0; color: var(--pz-on-accent, #16203C); }
.bh-greet-note { margin: 12px 0 0; font-size: .74rem; color: #9a9a9a; line-height: 1.5; }
.bh-greet-change { display: inline-block; margin: 6px 0 0 8px; background: none; border: 0; padding: 0; font-size: .82rem; color: var(--pz-accent, var(--brand-gold, #FFC020)); text-decoration: underline; cursor: pointer; }
.bh-greet-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 10001; background: var(--pz-ink, #16203C); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: .9rem; max-width: 340px; line-height: 1.5; box-shadow: 0 12px 30px rgba(0,0,0,0.25); opacity: 0; transition: opacity .28s ease, transform .28s ease; }
.bh-greet-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .bh-greet-modal, .bh-greet-card, .bh-greet-toast { transition: none; } }