/* Biến khối 2 cột thành flex để hai cột cao bằng nhau */
.module_formbox-2col {
    display: flex;
    align-items: stretch; /* ép 2 cột emodule height */
    gap: 18px; /* dùng gap của .module_col-left/.right nếu muốn, hoặc để ở container này */
}

/*module supply list*/
.module_col-left,
.module_col-right {
    min-width: 0; /* <— FIX overflow trong flex */
    /* nếu muốn dùng flex cho nội bộ, bật display:flex */
    /*display: flex;*/
    flex-direction: column;
    gap: 18px;
}
/* Tỉ lệ 2 cột trên desktop */
.module_col-left {
    width: 50%;
}

.module_col-right {
    width: 50%;
}
/* Hai cột vẫn 50/50 trên desktop */
.module_col-left,
.module_col-right {
    min-width: 0; /* <-- giữ để tránh overflow trong flex */
    /*flex-direction: column;*/ /* chỉ cần nếu bản thân cột là flex, ở đây ta không cần */
    gap: 18px;
    width: 50%;
    display: block; /* reset nếu trước đó để flex */
}

/* Tạo khoảng cách 5px dưới ảnh bằng padding của cột trái */
.module_col-left {
    padding-bottom: 5px;
    box-sizing: border-box; /* để padding không làm tràn cột */
}

    /* Ảnh chiếm chiều cao cột trái */
    .module_col-left .img {
        display: block;
        width: 100%;
        height: calc(100% - 5px); /* bằng chiều cao cột trái (bằng cột phải) trừ 5px */
        object-fit: cover; /* hoặc 'contain' nếu muốn nhìn đủ ảnh */
        object-position: center;
        border-radius: 4px; /* tuỳ chọn */
    }

/* Làm cho bảng chiếm hết chiều cao cột phải */
.module_col-right {
    display: flex; /* để nội dung bên trong có thể fill chiều cao */
    align-items: stretch;
}

    /* Các wrapper (ul/li): cần min-width:0 để không đẩy tràn khung */
    .module_col-right > ul {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
    }
        /* Nếu nội dung bảng rộng hơn, cho phép cuộn ngang ở khung bao */
        .module_col-right > ul > li {
            min-width: 0;
            min-height: 0;
            overflow-x: auto; /* bật cuộn ngang trong trường hợp cực đoan */
            overflow-y: hidden; /* tuỳ chọn */
        }

    /* Tránh min-content overflow của các wrapper */
    .module_col-right,
    .module_col-right > ul,
    .module_col-right li {
        min-width: 0;
    }

        /* Không cần scroll ngang, ép bảng fit khung */
        .module_col-right li {
            overflow: hidden; /* tuỳ chọn: chặn tràn */
        }

        .module_col-right li {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto; /* fill chiều cao ul */
            min-height: 0;
        }

.table.module_ovf_min3 {
    width: 100%;
    max-width: 100%;
    /* Có thể bỏ min-width nếu muốn luôn co vừa khung nhỏ */
    /* min-width: 0;  */
    border-collapse: collapse;
    table-layout: auto;
    /*thêm để bảng cao bằng cột phải */
    height: 100%; /* <-- quan trọng: bằng chiều cao cột phải */
    /* Đặt margin phía dưới (block-end) để phù hợp mọi writing-mode */
    margin-block-end: 10px; /* tương đương margin-bottom trong ltr */
}
    /* Ngắt từ dài để không đẩy tràn cột */
    .table.module_ovf_min3 th,
    .table.module_ovf_min3 td {
        text-align: left;
        overflow-wrap: anywhere; /* ngắt cả chuỗi dài */
        word-break: break-word; /* hoặc: overflow-wrap: anywhere; */
        white-space: normal;
        vertical-align: middle; /* tuỳ chọn: căn đỉnh cho nội dung nhiều dòng */
        font-size: clamp(13.5px, 1.6vw, 16px); /* Giới hạn linh hoạt cho nội dung trong bảng */
        line-height: 1.4; /* tăng khả năng đọc, tránh tràn chiều cao do chữ quá dày */
        padding: 0.6rem 0.8rem; /* dùng rem để theo root font-size */
    }
    /* Tiêu đề bảng (thead) có thể to hơn chút */
    .table.module_ovf_min3 thead th {
        font-size: clamp(14px, 1.6vw, 18px);
        font-weight: 600;
    }

/* Mobile: xếp dọc, ảnh không nên ép 100% height */
@media screen and (max-width: 620px) {
    .table.module_ovf_min3 {
        table-layout: fixed; /* tiếp tục ưu tiên width */
        inline-size: 100%;
        margin-block-end: 30px;
        margin-block-start: 0; /* phòng trường hợp trình duyệt có margin mặc định */
    }

        /* Có thể giảm padding ô để tối ưu không gian */
        .table.module_ovf_min3 th,
        .table.module_ovf_min3 td {
            padding: 0.5rem 0.6rem;
        }

    .module_col-left {
        padding-bottom: 0px;
    }

    .module_formbox-2col {
        flex-direction: column;
        gap: 5px;
    }

    .module_col-left,
    .module_col-right {
        width: 100%; /* full width trên mobile */
    }

        .module_col-left .img {
            height: auto; /* trên mobile để ảnh theo tỉ lệ tự nhiên */
            max-height: 60vh; /* tuỳ chọn: tránh ảnh quá cao */
            object-fit: contain; /* xem toàn bộ ảnh trên màn nhỏ */
            margin-block-end: 0px;
        }
}