/* 
    loader
*/
@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --kids-font: 'Andika', sans-serif;
}
.loader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #f1f1f2;
  }

#ApplicationContainer > div:first-child:not(:only-child) {
    display: none !important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.character-name {
    font-family: var(--kids-font);
    font-weight: 700;
    font-size: 1.5rem;
    /*color: #1a5f7a; !* Màu xanh đậm giúp chữ nổi bật trên nền trắng *!*/
}
.kids-input {
    font-family: var(--kids-font);
    font-size: 1.2rem;
}
.kid-text-content{
    font-family: var(--kids-font);
    font-weight: 400;
    font-size: 1.2rem;
    /*color: #333; !* Màu xám đậm dễ đọc *!*/
}

/* Container chính của Snackbar */
.kid-snackbar-container {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border-radius: 50px; /* Bo tròn kiểu viên thuốc */
    border: 4px solid white;
    box-shadow: 0 8px 0 rgba(0,0,0,0.1); /* Hiệu ứng nổi 3D */
    min-width: 300px;
    color: white;
    animation: pop-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: transparent !important; /* Ẩn màu nền mặc định */
    /*box-shadow: none !important;             !* Ẩn đổ bóng mặc định *!*/
    /*padding: 0 !important;*/
}

/* Màu sắc rực rỡ */
.correct-style {
    background: linear-gradient(45deg, #4CAF50, #8BC34A); /* Xanh lá tươi */
}

.wrong-style {
    background: linear-gradient(45deg, #FF5252, #FF8A80); /* Đỏ cam rực rỡ */
}

/* Hiệu ứng icon nhảy nhót */
.bounce-animation {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pop-up {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.kid-icon-wrapper {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    padding: 10px;
    margin-right: 15px;
}

/* Loại bỏ mọi định dạng mặc định của MudBlazor Snackbar wrapper */
.mud-kid-snackbar-content-custom {
    background-color: transparent !important; /* Ẩn màu nền mặc định */
    box-shadow: none !important;             /* Ẩn đổ bóng mặc định */
    padding: 0 !important;                   /* Xóa padding để component của bạn chiếm trọn không gian */
}

/* Ẩn icon mặc định nếu MudBlazor vẫn cố hiển thị */
.mud-kid-snackbar-content-custom .mud-snackbar-icon {
    display: none !important;
}

.fab-pulse {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary), 0.7);
    animation: pulse 1.5s infinite;
    border-radius: 50%;
}

@keyframes pulse {
     0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--bs-primary), 0.7); }
     70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(var(--bs-primary), 0); }
     100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--bs-primary), 0); }
 }

/* Thẻ bài học cơ bản */
.lesson-card {
    border-radius: 24px;
    background: white;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Border đơn giản nhưng dày và nổi bật */
.border-completed { border: 4px solid #4CAF50; } /* Xanh lá - Xong */
.border-current { border: 4px solid #FF9800; }   /* Cam - Đang học */
.border-locked { border: 4px dashed #BDBDBD; }  /* Xám đứt đoạn - Khóa */

/* Hiệu ứng khi di chuột vào bài học khả dụng */
.lesson-card:hover:not(.is-locked) {
    transform: scale(1.02);
    box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Badge số thứ tự bài học */
.lesson-number {
    position: absolute;
    top: 0;
    left: 0;
    background: #FFD93D;
    padding: 4px 16px;
    border-bottom-right-radius: 20px;
    font-weight: bold;
    color: #5C4033;
}

.btn-kids {
    border-radius: 50px !important;
    border-bottom: 6px solid rgba(0,0,0,0.2) !important;
    transition: all 0.1s active;
    font-weight: 800 !important;
    text-transform: none !important;
    font-size: 1.1rem !important;
}

.btn-kids:active {
    border-bottom: 2px solid rgba(0,0,0,0.2) !important;
    transform: translateY(4px);
}

/* Nút Tiếp theo - Hiệu ứng nhịp đập để thu hút sự chú ý */
@keyframes pulse-next {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.btn-next-pulse {
    animation: pulse-next 2s infinite;
    background-color: #4CAF50 !important; /* Xanh lá cây năng lượng */
    color: white !important;
}

.btn-back-style {
    background-color: #FFD93D !important; /* Vàng nắng thân thiện */
    color: #5C4033 !important;
}


/* Lớp CSS cha để căn chỉnh độ dài của đường chấm */
.dotted-field-container {
    width: 100%; /* Điều chỉnh độ dài của đường chấm chấm */
    display: inline-block;
    text-align: center;
}

/* Phong cách chính cho MudTextField */
.dotted-field.mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ghi đè các phần tử của MudBlazor */
.dotted-field .mud-input-input-control {
    background: none !important;
    border: none !important;
}

/* Loại bỏ đường gạch dưới liền nét khi focus/hover */
.dotted-field .mud-input-input-control::after {
    content: none !important;
    display: none !important;
}

.dotted-field .mud-input {
    /* Tạo đường chấm chấm tùy chỉnh bằng linear-gradient */
    border-bottom: none !important;
    background-image: linear-gradient(to right, var(--mud-palette-text-primary) 40%, transparent 0%) !important;    background-position: bottom center !important;
    background-size: 8px 1px !important; /* Khoảng cách và độ mỏng của dấu chấm */
    background-repeat: repeat-x !important;
    border-radius: 0 !important;
    padding-bottom: 10px !important;
    height: auto !important; /* Cho phép nó co giãn theo nội dung */
    min-height: 0 !important;
    overflow: visible !important;
}

/* Gỡ bỏ các phong cách focus mặc định */
.dotted-field .mud-input-input-control:focus,
.dotted-field .mud-input-input-control:focus-within {
    box-shadow: none !important;
    outline: none !important;
}

/* Phong cách cho phần tử input thực tế (văn bản) */
.dotted-field input {
    font-family: var(--kids-font);
    color: var(--palette-text-primary) !important;
    font-weight: 400 !important;
    font-size: 1.3rem !important; /* Điều chỉnh kích thước văn bản */
    /*color: #424242 !important; !* Màu văn bản *!*/
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important; /* Văn bản nằm sát đường gạch */
    text-align: center; /* Căn giữa văn bản */
}