/* Vocabulary list (Section 3) */
.vocabulary-list {
    margin-top: 20px;
    background-color: #CFFAFB; /* Đổi màu nền thành #CFFAFB */
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #e0e0e0;
    position: relative; /* Để thông báo định vị trong section */
}

/* Vocabulary header (Section for title and actions) */
.vocabulary-header {
    display: flex;
    justify-content: space-between; /* Sát lề trái và phải trên PC/tablet */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 10px; /* Khoảng cách giữa title và actions */
    margin-bottom: 10px; /* Khoảng cách với list-grid */
}

/* Vocabulary title (Container 1) */
.vocabulary-title {
    background-color: #FFB600; /* Màu nền vàng cam */
    padding: 5px; /* Padding cho tiêu đề */
    border-radius: 5px; /* Bo góc */
}

.vocabulary-title p {
    margin: 0;
    font-size: clamp(16px, 2vw, 18px);
    color: #FFFFFF; /* Màu chữ trắng */
    padding: 5px 10px;
    font-weight: bold; /* Chữ đậm */
}

/* Vocabulary actions (Container 2) */
.vocabulary-actions {
    display: flex;
    flex-direction: row; /* Giữ "Tất cả" và "Đã lưu" cùng hàng */
}

.list-actions {
    display: flex;
    gap: 10px;
    background-color: #FFFFFF; /* Nền màu trắng */
    padding: 10px; /* Padding 10px */
    border-radius: 20px; /* Bo góc nền 20px */
}

.btn-all, .btn-saved {
    padding: 5px 15px;
    background-color: #FFFFFF; /* Màu nền trắng khi không active */
    border: none; /* Không có viền */
    border-radius: 10px; /* Bo góc 10px cho nút */
    cursor: pointer;
    font-size: clamp(16px, 2.5vw, 18px); /* Tăng kích thước chữ */
    font-weight: 700; /* Tăng độ béo (bold) */
    color: #1b1d29; /* Màu chữ xám đậm khi không active */
    transition: background-color 0.3s, color 0.3s; /* Cập nhật transition */
}

.btn-all.active, .btn-saved:hover, .btn-all:hover, .btn-saved.active {
    background-color: #fff8e7 !important; /* Giữ nền vàng nhạt khi hover hoặc active */
    color: #FFB600 !important; /* Giữ màu chữ vàng cam */
    box-shadow: none !important; /* Xóa box-shadow nếu có */
}

.btn-all.active:hover, .btn-saved.active:hover {
    background-color: #fff8e7 !important; /* Đảm bảo không đổi màu khi hover trên active */
    color: #FFB600 !important; /* Giữ màu chữ */
    box-shadow: none !important; /* Xóa box-shadow */
}

/* Xóa hiệu ứng hover/global từ BuddyBoss */
.btn-all:hover, .btn-saved:hover {
    background-color: #FFFFFF !important; /* Trả về nền trắng nếu không active */
    color: #1b1d29 !important; /* Trả về màu chữ gốc */
    box-shadow: none !important; /* Xóa box-shadow */
}

.list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột trên PC */
    gap: 10px;
    padding: 0;
}

.vocab-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    border: 2px solid #41c5c8;
    border-radius: 5px;
    box-sizing: border-box;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.vocab-item.bookmarked {
    background-color: #e6f3f3; /* Màu nền khi đã bookmark */
    transform: scale(1.02); /* Hiệu ứng scale khi bookmark */
}

.vocab-item.bookmarked-effect {
    transform: scale(1.05);
}

.vocab-kanji {
    font-size: clamp(20px, 4vw, 24px);
    font-weight: bold;
    color: #333;
    margin-right: 10px;
    white-space: nowrap;
}

.vocab-reading {
    font-size: clamp(16px, 3vw, 18px);
    color: #666;
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vocab-actions {
    display: flex;
    justify-content: flex-end;
    margin-left: 10px;
}

.action-button {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    outline: none !important; /* Loại bỏ outline mặc định của button */
    box-shadow: none !important; /* Loại bỏ box-shadow */
}

.action-button:hover,
.action-button:focus {
    outline: none !important; /* Loại bỏ outline khi hover/focus */
    box-shadow: none !important; /* Loại bỏ box-shadow */
    border: none !important; /* Loại bỏ border */
}

.bookmark-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Màu nền mặc định */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Hiệu ứng chuyển đổi */
}

.bookmark-icon-circle.bookmarked {
    background-color: #4CAF50 !important; /* Màu xanh lá khi bookmark, áp dụng ngay lập tức */
    transform: scale(1.2); /* Hiệu ứng scale khi bookmark */
}

.bookmark-icon-circle.bookmarked svg {
    stroke: #fff; /* Màu icon trắng khi bookmark */
}

.bookmark-icon-circle svg {
    width: 20px;
    height: 20px;
    stroke: #333;
    stroke-width: 1.5;
    fill: none; /* Đảm bảo SVG không có màu nền */
    transition: stroke 0.3s ease;
}

.bookmark-icon-circle:hover {
    background-color: #FF9800 !important; /* Màu cam khi hover */
    border-radius: 50% !important; /* Giữ hình tròn */
    transform: scale(1.2); /* Hiệu ứng scale */
    border: none !important; /* Loại bỏ border */
    box-shadow: none !important; /* Loại bỏ box-shadow */
    outline: none !important; /* Loại bỏ outline */
}

.bookmark-icon-circle.bookmarked:hover {
    background-color: #4CAF50 !important; /* Giữ màu xanh lá khi hover và đã bookmark */
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.bookmark-icon-circle:hover svg {
    stroke: #fff !important; /* Màu icon trắng khi hover */
    fill: none !important; /* Đảm bảo không có màu nền */
}

/* Notification styles */
.flashcard-notification {
    transition: opacity 0.3s ease;
    text-align: center;
    font-size: clamp(14px, 2vw, 16px);
    padding: 10px 20px;
    background-color: #4CAF50; /* Mặc định màu xanh lá cho success */
    color: white;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.flashcard-notification.error {
    background-color: #f44336; /* Màu đỏ cho error */
}

/* Responsive */
@media (max-width: 768px) {
    .list-grid {
        grid-template-columns: 1fr; /* 1 cột trên di động */
    }

    .vocabulary-header {
        flex-direction: column; /* Chuyển thành 2 hàng trên mobile */
        justify-content: center; /* Căn giữa */
        text-align: center; /* Đảm bảo căn giữa toàn bộ */
    }

    .vocabulary-title {
        margin-bottom: 10px; /* Khoảng cách giữa title và actions */
        width: 100%; /* Đảm bảo title chiếm toàn chiều rộng */
    }

    .vocabulary-actions {
        width: 100%; /* Đảm bảo actions chiếm toàn chiều rộng */
        justify-content: center; /* Căn giữa "Tất cả" và "Đã lưu" */
    }

    .list-actions {
        flex-direction: row; /* Giữ "Tất cả" và "Đã lưu" cùng hàng */
        justify-content: center; /* Căn giữa các nút */
        gap: 5px; /* Giảm khoảng cách giữa các nút */
        background-color: #FFFFFF; /* Giữ background màu trắng */
        padding: 10px; /* Giữ padding 10px */
        border-radius: 20px; /* Giữ bo góc nền 20px */
    }

    .vocab-kanji {
        font-size: clamp(18px, 4vw, 20px);
    }

    .vocab-reading {
        font-size: clamp(14px, 3vw, 16px);
    }

    .flashcard-notification {
        max-width: 100%; /* Đầy đủ chiều rộng trên mobile */
    }
}

@media (max-width: 480px) {
    .list-grid {
        grid-template-columns: 1fr; /* 1 cột trên di động nhỏ */
    }

    .vocab-kanji {
        font-size: clamp(16px, 4vw, 18px);
    }

    .vocab-reading {
        font-size: clamp(12px, 3vw, 14px);
    }

    .flashcard-notification {
        max-width: 100%; /* Đầy đủ chiều rộng trên mobile nhỏ */
    }
}