/* THẺ HẠT NẾP dùng chung (the-hat.js) — cuống vé /dat-mon + trang điểm danh /diem-danh. Đợt 2.
   Cùng phong cách mục "Điểm danh cùng Bé Nếp" trên trang chủ: thẻ xanh lá chuối, viền mực, bóng in lệch, số hạt vàng to,
   mỗi ô là 1 hạt nếp (trống = viền đứt, có = hạt trắng ngà viền mực). Không gradient, không kính mờ, không emoji. */
:root {
  --th-la-dam: #26762B;
  --th-la-sau: #1D5A26;
  --th-nep: #FFF7E3;
  --th-nep-trang: #FFFCF3;
  --th-vang: #F6B92B;
  --th-muc: #2D2A1E;
  --th-chu-nhat: #E9F1DF;
  --th-chu-to: "Baloo 2", "Nunito", system-ui, sans-serif;
}
.th-the {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 14px 18px;
  background: var(--th-la-dam);
  color: var(--th-nep);
  border: 3px solid var(--th-muc);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--th-muc);
  text-align: left;
}
.th-dau { display: flex; align-items: center; gap: 12px; }
.th-nep { flex: none; width: 64px; height: 64px; display: block; transform-origin: 50% 100%; }
.th-nep.bung { animation: th-bung .5s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes th-bung {
  0% { transform: scale(1); }
  35% { transform: scale(1.14, .9) translateY(3px); }
  70% { transform: scale(.95, 1.08) translateY(-6px); }
  100% { transform: scale(1); }
}
.th-dau-chu { min-width: 0; }
.th-tieu { font: 800 20px/1.1 var(--th-chu-to); }
.th-dem { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.th-ban-co { font: 700 17px/1 var(--th-chu-to); color: var(--th-chu-nhat); width: 100%; }
.th-so { font: 800 56px/.9 var(--th-chu-to); color: var(--th-vang); display: inline-block; font-variant-numeric: tabular-nums; }
.th-so.nay { animation: th-so-nay .45s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes th-so-nay { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-6px); } 100% { transform: scale(1); } }
.th-don-vi { font: 700 20px/1 var(--th-chu-to); }
.th-sdt { margin: 0; color: var(--th-chu-nhat); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.th-muc { margin: 0; font-weight: 800; color: var(--th-vang); font-size: 16px; }
.th-phu { margin: 0; color: var(--th-chu-nhat); font-size: 13px; font-weight: 700; }
.th-nhan { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--th-chu-nhat); }
.th-nhan span:last-child { color: var(--th-vang); }
.th-hat {
  list-style: none; margin: 0; padding: 12px 10px; display: grid; gap: 7px;
  background: var(--th-la-sau); border: 2px dashed rgba(255, 247, 227, .45); border-radius: 16px;
}
.th-hat-7 { grid-template-columns: repeat(7, 1fr); }
.th-hat-30 { grid-template-columns: repeat(10, 1fr); gap: 7px 6px; }
.th-hat li {
  aspect-ratio: 5 / 8; border-radius: 50%; position: relative;
  border: 3px dashed rgba(255, 247, 227, .55); transform: rotate(-14deg);
}
.th-hat li:nth-child(even) { transform: rotate(12deg); }
.th-hat li.co { background: var(--th-nep-trang); border: 3px solid var(--th-muc); }
.th-hat li.co::after {
  content: ""; position: absolute; left: 22%; top: 15%; width: 28%; height: 22%; border-radius: 50%; background: #fff;
}
.th-hat-30 li, .th-hat-30 li.co { border-width: 2px; }
.th-hat li.moc { outline: 2px solid var(--th-vang); outline-offset: 2px; }
.th-hat li.moc-xp { outline: 3px solid var(--th-vang); outline-offset: 2px; }
.th-hat li.moi { animation: th-dong-dau .5s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes th-dong-dau { 0% { scale: 1.8; } 60% { scale: .86; } 100% { scale: 1; } }
.th-trang-thai {
  margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--th-la-sau);
  color: var(--th-nep); font-size: 15px; font-weight: 800;
}
.th-qua {
  padding: 10px 14px; border: 3px solid var(--th-muc); border-radius: 16px;
  background: var(--th-vang); color: var(--th-muc);
}
.th-qua.nay { animation: th-qua-nay .6s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes th-qua-nay { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.th-qua.da-trao { background: var(--th-nep); }
.th-qua-to { margin: 0; font: 800 20px/1.15 var(--th-chu-to); }
.th-qua-nho { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.th-bu { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--th-nep); color: var(--th-muc); font-size: 14px; font-weight: 800; }
.th-an .th-trang-thai { background: var(--th-la-sau); }

@media (prefers-reduced-motion: reduce) {
  .th-nep.bung, .th-so.nay, .th-hat li.moi, .th-qua.nay { animation: none; }
}