:root {
  --paper: #ece3ce;
  --paper-hi: #f4eddc;
  --paper-lo: #ddd1b5;
  --ink: #161412;
  --ink-soft: #3a352e;
  --muted: #776d5d;
  --red: #c62a1f;
  --red-deep: #961c14;
  --ochre: #d9a02b;
  --steel: #24507a;
  --green: #2f6b3a;

  --o0: var(--red);
  --o1: var(--steel);
  --o2: var(--ochre);
  --o3: var(--ink);

  --display: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* hạt giấy in */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; }
input { font: inherit; }

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; }

.red { color: var(--red); }

/* màu đáp án */
.o0 { --c: var(--o0); --t: var(--paper-hi); }
.o1 { --c: var(--o1); --t: var(--paper-hi); }
.o2 { --c: var(--o2); --t: var(--ink); }
.o3 { --c: var(--o3); --t: var(--paper-hi); }

.chg { font-weight: 800; font-size: .8em; }
.chg.up { color: var(--green); }
.chg.down { color: var(--red); }
.chg.same { color: var(--muted); }

/* dấu mộc */
.stamp {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  border: .12em solid currentColor;
  padding: .08em .35em .02em;
  transform: rotate(-7deg);
  line-height: 1.1;
  letter-spacing: .03em;
}
@keyframes stampIn {
  0% { transform: rotate(-7deg) scale(2.4); opacity: 0; }
  60% { transform: rotate(-7deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-7deg) scale(1); }
}
.stamp.hit { animation: stampIn .38s cubic-bezier(.2, .8, .3, 1) both; }

.btn {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper-hi);
  padding: .55em 1.1em .45em;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red); }
.btn:disabled { opacity: .4; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn.red { background: var(--red); border-color: var(--red); box-shadow: 4px 4px 0 var(--ink); color: var(--paper-hi); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}