body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    /* max-width: 600px; */
    margin: 0 auto;
    border: 1px solid #000;
}

ul.tabs {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    background-color: #e6f3ff; /* Màu xanh nhạt lấy cảm hứng từ logo */
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

ul.tabs li {
    padding: 12px;
    background-color: #d1e7f8; /* Màu xanh nhạt cho tab inactive */
    border: 1px solid #99c4e2; /* Đường viền xanh nhạt */
    border-bottom: none;
    width: 25%;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #005c99; /* Màu xanh đậm nhạt hơn cho chữ */
    transition: all 0.3s ease;
    border-radius: 4px 4px 0 0; /* Bo góc mềm mại */
}

ul.tabs li.current {
    background-color: #007bff; /* Màu xanh nổi bật cho tab active */
    border-top: 3px solid #0056b3; /* Đường viền đậm hơn */
    color: #ffffff; /* Màu chữ trắng nổi bật */
    font-weight: bold;
    font-size: 14px; /* Tăng kích thước chữ cho tab active */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Hiệu ứng chữ nổi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Tạo cảm giác nổi */
}

.tab-content {
    display: none;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #ffffff;
    border-top: none;
    border-radius: 0 0 4px 4px; /* Bo góc dưới */
}

.tab-content.current {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


h2 {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 0 0 20px 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* margin-top: 20px; */
    font-size: 14px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    /* background-color: #0056b3; */
}

/* Responsive Design for Mobile */
@media screen and (max-width: 768px) {
    .container {
        /* padding: 10px; */
        border: none;
    }

    ul.tabs li {
        /* font-size: 12px; */
        padding: 8px;
    }

    h2 {
        font-size: 18px;
        /* padding: 8px; */
    }

    table th, table td {
        /* font-size: 12px; */
        /* padding: 6px; */
    }

    button {
        /* font-size: 12px; */
        /* padding: 8px; */
    }
}


.lang-icon {
    border: 2px solid transparent;
    border-radius: 5px;
}

.selected-lang {
    border: 3px solid red;
    padding: 1px; /* Thêm padding để nhìn đẹp hơn */
    font-weight: bold;
}

.lang-icon:hover {
    border-color: lightgray;
}