/* Container bao ngoài */
.lelh-vocab-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 25px;
    /* Cho phép cuộn ngang nếu bảng quá to trên màn hình cực nhỏ */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

/* Tiêu đề danh sách */
.lelh-vocab-main-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #23282d;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
    width: 100%;
    line-height: 1.3;
}

/* Wrapper chứa các bảng */
.lelh-vocab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 100%; /* Bảo đảm không tràn */
}

/* Cấu hình chung cho các cột */
.lelh-vocab-col {
    max-width: 100%; /* Bắt buộc không vượt quá cha */
    box-sizing: border-box;
}

/* --- [1] CHẾ ĐỘ: EQUAL (Cân bằng) --- */
.lelh-vocab-wrapper.is-width-equal .lelh-vocab-col {
    flex: 1 1 0%; 
    min-width: 250px; /* Wrap xuống dòng nếu nhỏ hơn kích thước này */
}

/* --- [2] CHẾ ĐỘ: AUTO (Tự động) --- */
.lelh-vocab-wrapper.is-width-auto {
    justify-content: flex-start;
}
.lelh-vocab-wrapper.is-width-auto .lelh-vocab-col {
    flex: 0 1 auto;
    /* Dùng fit-content để ôm sát nội dung, nhưng bị giới hạn bởi max-width 100% ở trên */
    width: fit-content; 
    width: -moz-fit-content;
}

/* Style Bảng */
.lelh-vocab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
    background: #fff;
    border: 1px solid #eee;
    height: 100%;
}

.lelh-vocab-table th, 
.lelh-vocab-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    text-align: left;
    
    /* Cho phép ngắt dòng nếu từ quá dài */
    word-wrap: break-word; 
    word-break: break-word;
}

.lelh-vocab-table th {
    background: #f4f6f7;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #ddd;
    white-space: nowrap; /* Header giữ 1 dòng nếu đủ chỗ */
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* [MỚI] Cột Số thứ tự (#) */
.lelh-vocab-table .col-stt {
    width: 50px;
    white-space: nowrap;   /* QUAN TRỌNG: Bắt buộc chữ nằm trên 1 dòng */
    text-align: center;
    color: #888;
    font-weight: bold;
    background-color: #fafafa;
    padding: 8px 4px;      /* Giảm padding trái phải để số không bị ép */
}

/* Cột English */
.lelh-vocab-table .col-word {
    font-weight: 600;
    color: #2c3e50;
    min-width: 80px; /* Đảm bảo không bị ép quá nhỏ */
}
.lelh-vocab-table .col-word .seg {
    cursor: pointer;
    border-bottom: 1px dotted #999;
}
.lelh-vocab-table .col-word .seg:hover {
    color: #0073aa;
    background-color: rgba(0, 115, 170, 0.1);
}

/* Cột IPA */
.lelh-vocab-table .col-ipa {
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
    color: #777;
    font-style: italic;
    white-space: nowrap; /* Ưu tiên IPA trên 1 dòng */
}

/* Cột Meaning */
.lelh-vocab-table .col-meaning {
    color: #333;
    min-width: 100px;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .lelh-vocab-wrapper { display: block; }
    .lelh-vocab-col { width: 100% !important; margin-bottom: 20px; }
    
    /* Trên mobile, IPA có thể cho xuống dòng nếu bảng quá chật */
    .lelh-vocab-table .col-ipa { white-space: normal; }
}