/**
 * RBK Layout - Chuẩn 2 cột PC như rongbachkim.net
 * DOM: body.rbk-layout > mainwrapper > contentwrapper.rbk-two-col > contentleft + contentright
 * PC (≥769px): luôn 2 cột. Mobile (≤768px): 1 cột (mobile.css override).
 */

/* === BODY & MAINWRAPPER === */
body.rbk-layout {
    height: auto !important;
    min-height: 100vh !important;
}

body.rbk-layout .mainwrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: white;
    margin: 0 auto;
    box-sizing: border-box;
}

/* === CONTENTWRAPPER: 2 cột (inline + class). Chỉ bị override khi body.rbk-stack (mobile.css) === */
body.rbk-layout .contentwrapper.rbk-two-col {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    padding: 15px 0 !important;
}
/* Mặc định 2 cột: contentright luôn 327px khi KHÔNG có rbk-stack */
body.rbk-layout:not(.rbk-stack) .contentright {
    flex: 0 0 327px !important;
    width: 327px !important;
    min-width: 327px !important;
    max-width: 327px !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
}
body.rbk-layout:not(.rbk-stack) .contentleft {
    flex: 1 1 auto !important;
    min-width: 400px !important;
    max-width: 654px !important;
    box-sizing: border-box !important;
}

/* === PC: 769px trở lên - LUÔN 2 CỘT, kích thước chuẩn === */
@media (min-width: 769px) {
    body.rbk-layout .mainwrapper {
        width: 1001px;
        max-width: 100%;
    }
    body.rbk-layout .contentwrapper.rbk-two-col {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 15px 0 !important;
    }
    /* Cột trái: 769–1000px co vừa, ≥1001px cố định 654px */
    body.rbk-layout .contentleft {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: 400px !important;
        width: 654px !important;
        max-width: 654px !important;
        box-sizing: border-box !important;
    }
    body.rbk-layout .contentleft .content-area {
        width: 100%;
        max-width: 654px;
        box-sizing: border-box;
    }
    /* Cột phải: luôn 327px */
    body.rbk-layout .contentright {
        flex: 0 0 327px !important;
        flex-shrink: 0 !important;
        width: 327px !important;
        min-width: 327px !important;
        max-width: 327px !important;
        padding-left: 20px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* PC rộng (≥1001px): cột trái đúng 654px */
@media (min-width: 1001px) {
    body.rbk-layout .mainwrapper {
        width: 1001px;
        max-width: 100%;
    }
    body.rbk-layout .contentleft {
        width: 654px !important;
        min-width: 654px !important;
        max-width: 654px !important;
    }
}

/* PC hẹp (769–1000px): cột trái co theo chỗ trống, không nhảy xuống */
@media (min-width: 769px) and (max-width: 1000px) {
    body.rbk-layout .mainwrapper {
        width: 100%;
        max-width: 100%;
    }
    body.rbk-layout .contentleft {
        flex: 1 1 auto !important;
        min-width: 400px !important;
        width: auto !important;
        max-width: calc(100% - 347px) !important;
    }
}

/* === Bảng KQXS (ketqua + Đầu + Đuôi) === */
body.rbk-layout .kqtable {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    box-sizing: border-box;
}
body.rbk-layout .kqtable > tbody > tr > td {
    vertical-align: top !important;
    padding: 5px !important;
    box-sizing: border-box;
}
body.rbk-layout .kqtable > tbody > tr > td:first-child { width: 58% !important; }
body.rbk-layout .kqtable > tbody > tr > td:nth-child(2) { width: 21% !important; }
body.rbk-layout .kqtable > tbody > tr > td:nth-child(3) { width: 21% !important; }
body.rbk-layout .ketqua,
body.rbk-layout .dau,
body.rbk-layout .dit {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* === FOOTER === */
body.rbk-layout .rbk-footer {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}