/* Custom CSS */
.header-main {
    background: linear-gradient(90deg, rgba(31, 177, 120, 1) 0%, rgba(3, 145, 158, 1) 100%, rgba(0, 212, 255, 1) 100%);
    color: white;
}

.footer-links, .nav-link {
    color: white;
}

.nav-link {
    margin-right: 15px;
}

.btn-yellow {
    background-color: yellow;
    color: black;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}

.btn-yellow:hover {
    background-color: darkorange;
    color: white;
}

.main-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 3rem; /* Đẩy cách xa các cấp độ thi bên dưới */
}

.highlight, .card h2 {
    color: #00c4cc; /* Adjust color as needed */
}

.card {
    background-color: #e0f7fa;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.card-body {
    padding: 20px;
}

.card h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.btn-test {
    background-color: #00c4cc;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1rem;
}

.btn-test:hover {
    background-color: #00796b;
    color: white;
}

.guide-title {
    font-size: 2rem;
    font-weight: bold;
}

.guide-video-container {
    position: relative;
    display: inline-block;
    max-width: 100%; /* Ensure the container is responsive */
}

.guide-video-container img.video-thumbnail {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
    cursor: pointer; /* Add cursor pointer to indicate clickability */
}

.guide-video-container img.small-video-thumbnail {
    width: 100%; /* Adjust the size as needed */
    max-width: 700px; /* Ensure it doesn't exceed a certain width */
}
.carousel {
    width: 100%;
    max-width: 500px;
}   

.carousel-caption p,  .carousel-caption h5{
    color: black;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    cursor: pointer; /* Add cursor pointer to indicate clickability */
}

.video-play-button img {
    width: 40%; /* Adjust the width as needed */
    /*max-width: 50px;*/
    height: auto; /* Maintain aspect ratio */
}

/* New button styling */
.btn-choice {
    background-color: #00c4cc;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px; /* Space between buttons */
    border-radius: 10px;
    font-size: 1rem;
    min-width: 150px; /* Ensure buttons are the same size */
}

.btn-choice:hover {
    background-color: #00796b;
    color: white;
}