/* VGN One — hộp xác nhận (hoi.js). Màu theo nhận diện VGN: Red #9E0E0E · Ink #161616 · Gold #EECB00 */
.hh-lop{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(20,4,4,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:hh-nen .2s ease-out both}
.hh-hop{position:relative;width:min(460px,100%);background:#fff;color:#161616;border-radius:18px;padding:24px 24px 18px;display:grid;grid-template-columns:48px 1fr;column-gap:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 28px 70px -18px rgba(92,7,7,.45),0 10px 24px -12px rgba(0,0,0,.25);overflow:hidden;animation:hh-vao .34s cubic-bezier(.2,.95,.3,1.15) both;font-family:inherit}
.hh-hop::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#140404,#9E0E0E 55%,#C72528)}
.hh-hop.hh-hoi::before,.hh-hop.hh-nhap::before,.hh-hop.hh-bao::before{background:linear-gradient(90deg,#9E0E0E,#EECB00)}
.hh-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#FBE9E9;color:#9E0E0E;position:relative;animation:hh-icon .5s .08s cubic-bezier(.2,.9,.3,1.4) both}
.hh-icon::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:hh-song 1.6s .35s ease-out 2}
.hh-hoi .hh-icon,.hh-bao .hh-icon{background:#FFF6CC;color:#8A6A00}.hh-ky .hh-icon{background:#E8F3DC;color:#3D7A02}.hh-nhap .hh-icon{background:#EAF1FB;color:#1F5FAE}
.hh-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hh-than{min-width:0;padding-top:2px}
.hh-than h3{margin:0 0 6px;font-size:16.5px;line-height:1.4;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.hh-nd p{margin:0 0 6px;font-size:13.5px;line-height:1.55;color:#555;overflow-wrap:anywhere}
.hh-in{width:100%;box-sizing:border-box;margin-top:8px;padding:10px 12px;border:1.5px solid #E2E2E2;border-radius:10px;font:inherit;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.hh-in:focus{border-color:#1F5FAE;box-shadow:0 0 0 4px rgba(31,95,174,.14)}
.hh-err{min-height:0;font-size:12.5px;color:#C72528;margin-top:4px}.hh-err:empty{display:none}
.hh-nut{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.hh-nut button{font:inherit;font-size:14px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;border:1.5px solid transparent;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s}
.hh-nut button:active{transform:translateY(1px) scale(.98)}
.hh-nut button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(158,14,14,.18)}
.hh-huy{background:#fff;border-color:#E2E2E2;color:#333}.hh-huy:hover{border-color:#161616;background:#F7F7F8}
.hh-ok{background:#161616;color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}.hh-ok:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(0,0,0,.55)}
.hh-nguy .hh-ok{background:linear-gradient(135deg,#C72528,#9E0E0E);box-shadow:0 8px 18px -8px rgba(158,14,14,.75)}.hh-nguy .hh-ok:hover{box-shadow:0 12px 22px -8px rgba(158,14,14,.8)}
.hh-ky .hh-ok{background:linear-gradient(135deg,#5AA60A,#3D7A02)}
.hh-nhap .hh-ok{background:linear-gradient(135deg,#2E74C7,#1F5FAE)}
.hh-lop.hh-ra{animation:hh-nen-ra .2s ease-in both}.hh-lop.hh-ra .hh-hop{animation:hh-ra .2s ease-in both}
.hh-hop.hh-rung{animation:hh-rung .38s ease-in-out}.hh-hop.hh-lac{animation:hh-lac .28s ease-in-out}
@keyframes hh-nen{from{opacity:0}to{opacity:1}}@keyframes hh-nen-ra{to{opacity:0}}
@keyframes hh-vao{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes hh-ra{to{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes hh-icon{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes hh-song{0%{opacity:.45;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@keyframes hh-rung{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes hh-lac{0%,100%{transform:none}50%{transform:scale(1.025)}}
@media (max-width:480px){.hh-lop{place-items:end center;padding:10px}.hh-hop{grid-template-columns:40px 1fr;column-gap:12px;padding:20px 18px 14px;border-radius:18px 18px 14px 14px}
  .hh-icon{width:40px;height:40px}.hh-nut{flex-direction:column-reverse}.hh-nut button{width:100%;padding:12px}}
@media (prefers-reduced-motion:reduce){.hh-lop,.hh-hop,.hh-icon,.hh-icon::after,.hh-lop.hh-ra,.hh-lop.hh-ra .hh-hop{animation:none!important}}
@media print{.hh-lop{display:none}}
