*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Kanit", system-ui, sans-serif; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #1a6fc4; outline-offset: 3px; }

.card-dlg { border: 0; padding: 0; background: transparent; max-width: min(1000px, 94vw); overflow: visible; }
.card-dlg::backdrop { background: rgba(8, 18, 40, .78); }
.card-dlg img { width: 100%; border-radius: 14px; border: 4px solid #fff; }
.card-dlg p { color: #fff; text-align: center; font-weight: 600; margin-top: 10px; }
.card-x { position: absolute; top: -14px; right: -8px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #16324f; background: #ffc928; color: #16324f; font-size: 26px; line-height: 1; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}