/* Hiệu ứng nút form: Nhận thông báo / Gửi yêu cầu / Gửi thông tin */
.sub{
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  transform-origin:center center;
  transition:
    transform .2s cubic-bezier(.22,.61,.36,1),
    filter .22s ease,
    opacity .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .sub:hover:not(:disabled):not(.is-sending){
    transform:scale(1.035);
    filter:brightness(1.28);
  }
}
.sub:active:not(:disabled),
.sub.is-press:not(:disabled){
  transform:scale(.94);
  filter:brightness(1.12) saturate(1.1);
}
.sub.is-sending{
  pointer-events:none;
  animation:mam-sub-pulse 1.05s ease-in-out infinite;
}
.sub.is-done{
  animation:mam-sub-pop .55s cubic-bezier(.22,1,.36,1);
}
.sub.is-err{
  animation:mam-sub-shake .42s ease;
}
@keyframes mam-sub-pulse{
  0%,100%{opacity:.78;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.38)}
}
@keyframes mam-sub-pop{
  0%{transform:scale(.94);filter:brightness(1.1)}
  45%{transform:scale(1.06);filter:brightness(1.45)}
  100%{transform:scale(1);filter:none}
}
@keyframes mam-sub-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

/* ── Thông báo form: box nhỏ gọn ── */
.msg{
  margin:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px) scale(.98);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22,.61,.36,1),
    visibility .28s;
}
.msg.is-on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.msg-box{
  display:inline-flex;
  align-items:flex-start;
  gap:.55em;
  max-width:100%;
  padding:.72em .95em .72em .8em;
  border-radius:14px;
  border:1px solid transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 28px -14px rgba(18,82,40,.28);
  backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  font-family:'Linotte','Be Vietnam Pro',system-ui,sans-serif;
  font-size:inherit;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.01em;
  text-align:left;
}
.msg-ico{
  flex:none;
  width:1.35em;
  height:1.35em;
  margin-top:.08em;
  border-radius:999px;
  background:center/60% no-repeat;
}
.msg-txt{flex:1;min-width:0}

/* Success */
.msg.ok .msg-box{
  color:#0E4A22;
  background:linear-gradient(180deg,rgba(232,243,228,.96),rgba(220,236,214,.96));
  border-color:rgba(31,122,58,.22);
}
.msg.ok .msg-ico{
  background-color:#1F7A3A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Error */
.msg.err .msg-box,
.msg.is-on.err .msg-box{
  color:#7A1F1F;
  background:linear-gradient(180deg,rgba(253,236,236,.97),rgba(248,222,222,.97));
  border-color:rgba(194,58,58,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 28px -14px rgba(194,58,58,.28);
}
.msg.err .msg-ico{
  background-color:#C23A3A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v7M12 17.5h.01'/%3E%3C/svg%3E");
}

/* Waiting / sending */
.msg.wait .msg-box{
  color:#1A4D2A;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(243,248,240,.96));
  border-color:rgba(18,82,40,.14);
}
.msg.wait .msg-ico{
  background-color:#ACB282;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
  animation:mam-msg-spin .9s linear infinite;
}
@keyframes mam-msg-spin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  .sub,.sub:hover,.sub:active,.sub.is-press,.sub.is-sending,.sub.is-done,.sub.is-err{
    animation:none!important;
    transition:opacity .2s ease!important;
    transform:none!important;
  }
  .sub.is-sending{opacity:.65}
  .msg,.msg-ico{animation:none!important;transition:opacity .2s ease!important;transform:none!important}
}