h1,h2,h3,p,ul,li {margin: 10px !important}
h1 {font-size: 28px !important; font-weight: bold !important}
h2 {font-size: 24px !important; font-weight: bold !important}

.key {
    background-color: #d3d6da;
}

.correct {
    background-color: #6aaa63 !important;
    color: white;
}

.semicorrect {
    background-color: #ccb757 !important;
    color: white;
}

.incorrect {
    background-color: #939598 !important;
    color: white;
}

/* hides vue elements initially */
[v-cloak] {
    display: none;
}



.list4b {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list4b li {
	position: relative;
	padding:0px 20px 20px 28px;
	margin-left: 40px;
	transition-duration: 0.3s;
}
.list4b li:before {
    border: 6px solid transparent;
	line-height: 30px;
	position: absolute;
	top: 0;
	left:-30px;
	width:42px;
	text-align:center;
	font-size: 13px;
	font-weight: bold;
	color: #ADCEE9;
	counter-increment: li;
	content: counter(li);
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:before {
	color: #337AB7;
}
.list4b li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #DDDDDD;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:after {
	animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    border: 6px solid #ADCEE9;	
}	

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.3, 1.3, 1.3);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.instructions {
  margin: auto;
  font-size: 16px;
  color: var(--color-tone-1);
 background:#374151;
}
.ins1 {
    padding: 40px 40px;
    text-align: center;
    margin-top: 40px;
    color:#fff;
}
.ins2{
    background:#1e293b;
    color:#fff;
padding: 40px 40px;}
h2 {
    text-align:center;
    margin:40px 0 20px;
    font-size:28px;
    font-weight:700;
  }
  /* How to Play */
  .howto {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    max-width:900px;
    margin:0 auto;
    padding:20px;
  }
  .card {
    border-radius:10px;
    padding:24px 16px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
  }
  .card:nth-child(odd) { background:#2d3748; }
  .card:nth-child(even){ background:#374151; }
  .card span.icon {
    font-size:32px;
    display:block;
    margin-bottom:12px;
  }
  .card h3 {
    margin:0 0 8px;
    font-size:18px;
    font-weight:700;
  }
  .card p {
    margin:0;
    font-size:14px;
    color:#cbd5e1;
  }
  .tiles {
    display:flex;
    justify-content:center;
    gap:8px;
    margin:30px 0;
  }
  .tile {
    width:160px;
    height:50px;
    font-size:22px;
    font-weight:bold;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
  }
  .green { background:#6aaa64; }
  .yellow{ background:#c9b458; }
  .gray  { background:#787c7e; }
/* Why Play Here */
  .features {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    max-width:1000px;
    margin:0 auto;
    padding:20px;
  }
  .feature {
    border-radius:10px;
    padding:24px 16px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
  }
  .feature:nth-child(odd) { background:#2d3748; }
  .feature:nth-child(even){ background:#374151; }
  .feature span.icon {
    font-size:32px;
    display:block;
    margin-bottom:12px;
  }
  .feature h3 {
    margin:0 0 8px;
    font-size:18px;
    font-weight:700;
  }
  .feature p {
    margin:0;
    font-size:14px;
    color:#cbd5e1;
  }
.ins3{margin:0;
    font-family:'Segoe UI',sans-serif;
    background:#fdfaf6;
    color:#1e293b;}
.section {
    text-align:center;
    padding:40px 20px;
  }
  .section h2 {
    font-size:28px;
    font-weight:700;
    margin-bottom:10px;
  }
  .section p {
    font-size:16px;
    color:#4b5563;
    margin:0 0 30px;
  }
  .languages {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap:16px;
    max-width:1000px;
    margin:0 auto;
  }
  .lang {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    transition: all 0.2s ease;
  }
  .lang img {
    width:28px;
    height:20px;
    margin-right:12px;
    border-radius:3px;
    object-fit:cover;
  }
  .lang:hover {
    background:#f3f4f6;
    transform:translateY(-2px);
  }
  .highlight {
    color:#059669; /* xanh lá nổi bật */
  }
/* Footer */
  footer {
    display:flex;
    justify-content:end;
    gap:20px;
    padding:20px;
    color:#cbd5e1;
    font-size:14px;
    flex-wrap:wrap;
background:#374151;
  }
  footer a {color:#cbd5e1;text-decoration:none;}
  footer a:hover{text-decoration:underline;}
.page {
    width: 900px;
    margin: auto;
}