/* === File: style.css === */
body { 
  margin: 0; 
  overflow: hidden; 
  height: 100vh;
}

.base-container { 
  font-size: 1rem; 
  transition: transform 0.3s ease; 
  height: 100%;
  display: flex;
  flex-direction: column;
}

table { 
  border-collapse: collapse; 
  width: 100%; 
  margin: 0; 
}

td { 
  border: 1px solid #0288d1; 
  padding: 4.2px; 
  text-align: center; 
  font-size: 1.235em; 
  font-weight: bold; 
  word-wrap: break-word; 
  color: #212121; 
  background-color: #ffffff; 
}

.container { 
  display: flex; 
  gap: 3px; 
  justify-content: space-between; 
  flex-wrap: nowrap; 
  width: 100%; 
  padding: 0 5px; 
  margin-right: 10px; 
  flex-grow: 1;
  overflow: hidden;
}

h2 { 
  text-align: center; 
  font-size: 24.0065px; 
  margin: 0 0 2px; 
  color: #01579b; 
  background: linear-gradient(to right, #e3f2fd, #bbdefb); 
  padding: 4px; 
  border: 2px solid #01579b; 
  animation: pulseHeader 2s infinite, headerGlow 3s infinite; 
  flex-shrink: 0;
  will-change: transform, box-shadow; 
}

@keyframes pulseHeader { 
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.02); } 
}

@keyframes headerGlow { 
  0%, 100% { box-shadow: 0 0 5px rgba(252, 250, 164, 0.5); } 
  50% { box-shadow: 0 0 10px rgba(252, 250, 164, 0.8); } 
}

.name-column { 
  white-space: normal; 
}

.booth { 
  padding: 3px; 
  flex: 1; 
  min-width: 0; 
  display: flex;
  flex-direction: column;
}

/* Đường kẻ viền theo nội dung */
.booth.has-data:not(:last-child) h2 {
  border-right: 3px solid #0288d1;
  margin-right: -3px; 
  position: relative; 
}

.booth.has-data:not(:last-child) .table-wrapper table {
  border-right: 3px solid #0288d1;
}

.table-wrapper {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.header-text { 
  text-align: center; 
  font-size: 28.046851px; 
  font-weight: 900; 
  margin: 0 0 10px; 
  color: #d32f2f; 
  border: 3px double #d32f2f; 
  border-left: none; 
  border-right: none; 
  background: linear-gradient(to right, #b3e5fc, #e0f7fa); 
  padding: 4px 3px; 
  animation: pulse 2s infinite, borderGlow 3s infinite; 
  box-shadow: 0 0 10px rgba(255, 138, 128, 0.5); 
  flex-shrink: 0;
  will-change: transform, box-shadow; 
}

@keyframes pulse { 
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.1); } 
}

@keyframes borderGlow { 
  0%, 100% { box-shadow: 0 0 10px rgba(255, 138, 128, 0.5); } 
  50% { box-shadow: 0 0 20px rgba(255, 138, 128, 0.8); } 
}

.blink { 
  animation: blink 1.8s infinite; 
  background-color: #fff8e1; 
  will-change: opacity; 
}

@keyframes blink { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.3; } 
}

.new-data { 
  animation: scaleText 10.4s ease-in-out; 
  border: 2px solid #0362fc; 
  background-color: #0362fc; 
  color: #ffffff; 
  will-change: transform; 
}

@keyframes scaleText { 
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.3); } 
}

.zoomed { 
  transform: scale(1.5); 
  transform-origin: top center; 
}

.zoomed .booth { 
  border-right-width: 4.5px; 
}

.marquee-container { 
  width: 100%; 
  overflow: hidden; 
  background-color: #e6f0ff; 
  padding: 3px 0; 
  margin-bottom: 5px; 
  flex-shrink: 0;
}

.marquee { 
  display: flex; 
  align-items: center; 
  white-space: nowrap; 
  animation: marquee 20s linear infinite; 
  will-change: transform; 
}

.marquee img { 
  height: 25.27px; 
  margin-right: 10px; 
  animation: spin3d 4s linear infinite; 
  transform-style: preserve-3d; 
  will-change: transform; 
}

.marquee span.char { 
  font-size: 25.27px; 
  font-weight: bold; 
  background: linear-gradient(to right, #0549f0, #4fc3f7); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  display: inline-block; 
  animation: charPulse 1.5s infinite; 
  animation-delay: calc(0.05s * var(--char-index)); 
  will-change: transform;
}

@keyframes marquee { 
  0% { transform: translateX(100%); } 
  100% { transform: translateX(-100%); } 
}

@keyframes spin3d { 
  0% { transform: rotateY(0deg); } 
  100% { transform: rotateY(360deg); } 
}

@keyframes charPulse { 
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.3); } 
}

.highlight { 
  animation: highlight 5s ease-in-out; 
  background-color: #ffeb3b; 
  will-change: opacity;
}

@keyframes highlight { 
  0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; background-color: #ffeb3b; } 
  10%, 30%, 50%, 70%, 90% { opacity: 0.6; background-color: #ffeb3b; } 
}