/* ===== CARD CHỨA NỘI DUNG ===== */
.ppct-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* ===== TOOLBAR ===== */
.ppct-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
    margin-bottom: 16px;
}

    .ppct-toolbar .group {
        display: flex;
        flex-direction: column;
    }

    .ppct-toolbar label {
        font-size: 13px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 4px;
    }

    .ppct-toolbar select {
        min-width: 120px;
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid #ced4da;
    }

    /* ===== ACTION BUTTONS ===== */
    .ppct-toolbar .actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }



/* ===== TABLE ===== */
table.kehoach {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}

    table.kehoach th,
    table.kehoach td {
        border: 1px solid #dee2e6;
        padding: 6px 8px;
    }

    table.kehoach thead th {
        background: #f8f9fa;
        font-weight: 600;
        text-align: center;
    }

/* ===== INPUT ===== */
.ppct-input,
.ppct-input-small {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
}

.ppct-input-small {
    text-align: center;
}

    .ppct-input:focus,
    .ppct-input-small:focus {
        background: #fffbe6;
    }

/* ===== EMPTY STATE ===== */
.empty {
    text-align: center;
    color: #777;
    padding: 12px;
}
/* ================== MOBILE 768px ================== */
@media (max-width: 768px) {
    /* ===== TOOLBAR ===== */
    .ppct-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

        .ppct-toolbar .group {
            width: 100%;
        }

        .ppct-toolbar select {
            width: 100%;
            font-size: 13px;
            padding: 6px 8px;
        }
    /* ===== TABLE KEHOACH ===== */
    table.kehoach {
        font-size: 13px;
        table-layout: fixed; /* bắt các cột co vừa màn hình */
        width: 100%;
    }

        table.kehoach th,
        table.kehoach td {
            padding: 6px 4px;
            word-wrap: break-word;
            white-space: normal;
            text-align: center;
        }
            /* Các cột dài xuống dòng */
            table.kehoach td:nth-child(2), /* Tên bài */
            table.kehoach td:nth-child(3) /* Ghi chú */ {
                font-size: 12px;
                line-height: 1.3;
            }
    /* Input / number co vừa cell */
    .ppct-input,
    .ppct-input-small {
        font-size: 12px;
        padding: 4px 6px;
    }
    /* Nút xóa nhỏ hơn và dễ bấm */
    .btn-delete {
        font-size: 12px;
        padding: 4px 6px;
    }
}