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

/*port supply list*/
.port_col-left,
.port_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 */
.port_col-left {
    width: 50%;
}

.port_col-right {
    width: 50%;
}
/* Hai cột vẫn 50/50 trên desktop */
.port_col-left,
.port_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 */
.port_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 */
.port_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 */
.port_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 */
.port_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 */
.port_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 */
.port_col-right,
.port_col-right > ul,
.port_col-right li {
    min-width: 0;
}

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

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

.table.port_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.port_ovf_min3 th,
    .table.port_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 */
    }
    .table.port_ovf_min3 table tbody td p {
        font-size: clamp(13.5px, 1.6vw, 16px) !important; /* Giới hạn linh hoạt cho nội dung trong bảng */
    }
/* Tiêu đề bảng (thead) có thể to hơn chút */
.table.port_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.port_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.port_ovf_min3 th,
    .table.port_ovf_min3 td {
        padding: 0.5rem 0.6rem;
    }
    .port_col-left {
        padding-bottom: 0px;
    }
    .port_formbox-2col {
        flex-direction: column;
        gap: 5px;
    }

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

    .port_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;
    }
}