/* 
    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;
    --safe-top: env(safe-area-inset-top, 15px);
    --safe-bottom: env(safe-area-inset-bottom, 15px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}



.mud-appbar.mud-appbar-fixed-top{
    top: var(--safe-top);
}

.mud-main-content{
}
.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 */
}


.header-top-app-bar-margin,
.header-top-app-bar-margin * {
    box-sizing: border-box;
}
.header-top-app-bar-margin {
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.header-top-app-bar {
    background: #ffffff;
    border-radius: 0px 0px 40px 40px;
    border-style: solid;
    border-color: #d1fae5;
    border-width: 0px 0px 8px 0px;
    padding: 16px 24px 16px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0px 6px 0px 0px rgba(27, 176, 108, 0.2);
}
.display-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
.background-border {
    background: #ffe66d;
    border-radius: 9999px;
    border-style: solid;
    border-color: #1bb06c;
    border-width: 4px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    position: relative;
    overflow: hidden;
}
.little-explorer-profile {
    align-self: stretch;
    flex: 1;
    position: relative;
    overflow: hidden;
    object-fit: cover;
}
.display-container2 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
.heading-1 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.display-text {
    color: #1bb06c;
    text-align: left;
    font-family: var(--kids-font), sans-serif;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
    font-weight: 800;
    position: relative;
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.container3 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}


.thought-bubble {
    position: relative;
    background-color: #fff;
    border-radius: 50%; /* Tạo hình nền cơ bản */
    padding: 40px 60px;
    min-width: 300px;
    max-width: 500px;
    margin: 20px auto;
    /* Hiệu ứng bóng đổ nhẹ để trông nổi bật hơn trên nền xanh */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Các vòng tròn tạo nên hình đám mây */
.thought-bubble::before,
.thought-bubble::after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1; /* Đẩy ra sau phần thân chính */
}

/* Vòng tròn lớn phía trên bên trái */
.thought-bubble::before {
    width: 150px;
    height: 150px;
    top: -40px;
    left: 40px;
}

/* Vòng tròn lớn phía trên bên phải */
.thought-bubble::after {
    width: 180px;
    height: 180px;
    top: -20px;
    right: 30px;
}

/* Thêm các vòng tròn phụ để làm đám mây mềm mại hơn */
.cloud-extra {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
}

.c1 { width: 120px; height: 120px; bottom: -20px; left: 50px; }
.c2 { width: 140px; height: 140px; bottom: -10px; right: 60px; }

/* Phần chân nối nhỏ (Đuôi hội thoại) */
.bubble-tail {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    bottom: -40px;
    right: 150px;
}

.bubble-tail::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    bottom: -25px;
    right: -10px;
}