/* Trang Bảng cửu chương (/times-tables) — chỉ trang này nạp file.

   Người dùng là bé 5–7 tuổi đứng cạnh bố mẹ, và tờ bảng in ra dán ở bàn học:
   mỗi bảng một màu riêng (cùng một màu cho bảng ấy ở ô số, viền, tích) để mắt
   bé tìm «bảng 7 màu tím» chứ không phải dò chữ. Màu đậm chỉ dùng cho ô số và
   tích; nền ô là bản nhạt của cùng màu nên chữ đen vẫn đủ tương phản. Bảng
   vàng dùng chữ nâu đậm trên ô số — chữ trắng trên vàng không đọc được.

   Dino là icon thương hiệu đã duyệt (`mascot.*` ở /assets/icons, cùng bộ với
   trang chủ), trang trí thuần tuý: aria-hidden, không nhận chạm, không chiếm
   chỗ trong luồng chữ ở các khối dưới. */

.tt-1  { --c: #ef5350; --bg: #ffebee; --on: #fff; }
.tt-2  { --c: #fb8c00; --bg: #fff3e0; --on: #fff; }
.tt-3  { --c: #fbc02d; --bg: #fffde7; --on: #5d4300; }
.tt-4  { --c: #43a047; --bg: #e8f5e9; --on: #fff; }
.tt-5  { --c: #00897b; --bg: #e0f2f1; --on: #fff; }
.tt-6  { --c: #1e88e5; --bg: #e3f2fd; --on: #fff; }
.tt-7  { --c: #5e35b1; --bg: #ede7f6; --on: #fff; }
.tt-8  { --c: #d81b60; --bg: #fce4ec; --on: #fff; }
.tt-9  { --c: #00acc1; --bg: #e0f7fa; --on: #fff; }
.tt-10 { --c: #8e24aa; --bg: #f3e5f5; --on: #fff; }

/* ---------- Hero: nền nhiều màu, Dino vẫy tay giữa các bong bóng phép tính ---------- */
.tt-hero {
  background:
    radial-gradient(circle at 8% 18%, #ffe0b2 0 70px, transparent 71px),
    radial-gradient(circle at 96% 82%, #f8bbd0 0 90px, transparent 91px),
    radial-gradient(circle at 70% 6%, #c8e6c9 0 46px, transparent 47px),
    linear-gradient(160deg, #e3f2fd 0%, #f3e5f5 55%, #fff8e1 100%);
}
.tt-art {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
}
.tt-art .dino { position: relative; width: 210px; z-index: 2; pointer-events: none; }
.tt-art .dino img, .tt-page .dino img.ic {
  display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none;
  background: none; filter: drop-shadow(0 8px 8px rgba(23, 35, 58, 0.16));
}
.tt-bubble {
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--c);
  color: var(--on);
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px rgba(23, 35, 58, 0.14);
  white-space: nowrap;
}
.tt-art .tt-2 { top: 6%;  left: 4%;  transform: rotate(-6deg); }
.tt-art .tt-5 { top: 12%; right: 2%; transform: rotate(5deg); }
.tt-art .tt-9 { bottom: 10%; left: 0;  transform: rotate(4deg); }
.tt-art .tt-7 { bottom: 4%; right: 6%; transform: rotate(-4deg); }

/* ---------- Các bảng ---------- */
.tt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.tt {
  background: var(--bg);
  border: 2px solid var(--c);
  border-radius: 18px;
  padding: 12px 16px 14px;
}
.tt h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 17px;
  color: #17233a;
}
.tt-n {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c);
  color: var(--on);
  font-size: 22px;
  font-weight: 800;
  flex: none;
}
.tt ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}
.tt ol b { color: var(--c); font-weight: 800; }
.tt-3 ol b { color: #a07400; }

/* ---------- Dino ló lên ở góc phải các khối dưới ---------- */
.tt-how, .tt-garden, .tt-final { position: relative; }
.tt-how .dino, .tt-garden .dino, .tt-final .dino {
  position: absolute;
  z-index: 2;
  top: -62px;
  right: max(16px, calc((100% - var(--wrap)) / 2 + 20px));
  width: 112px;
  pointer-events: none;
}
.tt-page .steps li:nth-child(10n+1)::before { background: #ef5350; }
.tt-page .steps li:nth-child(10n+2)::before { background: #fb8c00; }
.tt-page .steps li:nth-child(10n+3)::before { background: #fbc02d; color: #5d4300; }
.tt-page .steps li:nth-child(10n+4)::before { background: #43a047; }
.tt-page .steps li:nth-child(10n+5)::before { background: #00897b; }
.tt-page .steps li:nth-child(10n+6)::before { background: #1e88e5; }
.tt-page .steps li:nth-child(10n+7)::before { background: #5e35b1; }
.tt-page .steps li:nth-child(10n+8)::before { background: #d81b60; }
.tt-page .steps li:nth-child(10n+9)::before { background: #00acc1; }
.tt-page .steps li:nth-child(10n)::before   { background: #8e24aa; }

@media (max-width: 860px) {
  .tt-art { min-height: 230px; }
  .tt-art .dino { width: 150px; }
  .tt-bubble { font-size: 16px; padding: 6px 12px; }
  .tt-how .dino, .tt-garden .dino, .tt-final .dino { width: 84px; top: -50px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .tt-art .dino { animation: tt-bob 3.2s ease-in-out infinite; }
}

/* ---------- Bản in: chỉ khối bảng, ba cột ---------- */
@media print {
  .tt-page header, .tt-page footer, .tt-page main > :not(.tt-sec), .tt-page .no-print { display: none !important; }
  .tt-page .tt-sec { padding: 0; }
  .tt-page .tt-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tt-page .tt { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}