/**
 * Column Split Plugin – Frontend CSS
 * Tùy chỉnh hiển thị cho các khối chia cột được tạo từ CKEditor.
 */

/* === Container ngoài cùng (box bao quanh row) === */
.cs-row {
    position: relative;
    margin: 18px 0;
    /* CSS bên dưới chỉ áp dụng khi xem thực tế, trong editor đã có khung border riêng */
}

/* === Bootstrap Grid (Cấu trúc tương đương) === */
.cs-row .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* === Công cụ chỉnh sửa (Ẩn hoàn toàn trên frontend) === */
.cs-tools {
    display: none !important;
}

/* === Cột === */
.cs-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    min-height: 1px;
}

/* === Grid Logic (Desktop/Tablet) === */
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* === Mobile (Dồn cột) === */
@media (max-width: 767px) {
    .cs-row .row {
        margin-right: 0;
        margin-left: 0;
    }
    .cs-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    .cs-col:last-child {
        margin-bottom: 0;
    }
}