/* Giấy quảng cáo 1883 "La Tour d'Hanoï" — giấy cũ, mực xanh, pha màu CTU */
:root {
  --paper: #f3ead3;
  --paper-2: #e8dbb8;
  --ink: #1b3f7a;
  --ink-soft: #4a6596;
  --ctu: #1f5caa;
  --sky: #00afef;
  --red: #c8362c;
  --gold: #c99a1d;
  --ghost: #8a7fa6;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(160,120,50,.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.035) 0 2px, transparent 2px 4px);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .serif { font-family: var(--serif); }
button { font-family: var(--sans); cursor: pointer; }

.disc {
  height: 16px; border-radius: 8px; margin: 2px auto 0;
  border: 2px solid rgba(20, 30, 60, .55);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .4s, opacity .4s;
}
.disc.falling { animation: fall 0.9s ease-in forwards; }
@keyframes fall {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(60px, 140px) rotate(70deg); opacity: 0; }
}
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shake { animation: shake .45s; }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }
.pop { animation: pop .45s ease-out; }
.hidden { display: none !important; }