/* Responsive / cross-device patch for the tuyensinh pages.
   The markup below relies on legacy fixed-pixel tables and DevExpress
   (v14.1) controls with hard-coded widths, so this file works by:
   1) capping every container to the viewport width, and
   2) reflowing plain (non-DevExpress) layout tables into stacked rows
      on narrow screens, since they were only ever used to position
      label/input pairs, not to present tabular data.
*/

*, *::before, *::after {
    box-sizing: border-box;
}

/* Bootstrap columns are flex items with min-width:auto by default, so a
   wide child (e.g. table-responsive around a wide table) forces the whole
   .row - and the page - to overflow horizontally instead of scrolling
   internally. Letting columns shrink fixes that. */
.row > * {
    min-width: 0;
}

.table-responsive {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* These tables carry per-cell inline pixel widths from the old fixed-px
   design (e.g. width:50px/450px/150px). Under table-layout:fixed those
   act as hard floors that force the table wider than its container no
   matter what width we put on the <table> itself - that's what kept
   causing the horizontal scrollbar. Strip the per-cell floors instead
   and let the table size itself from content, wrapping as needed. */
.table-responsive > table {
    table-layout: auto !important;
    width: 100% !important;
}

.table-responsive > table td,
.table-responsive > table th {
    width: auto !important;
    max-width: none !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

/* These tables are always STT | Nội dung | value-or-checkbox. Only the
   middle "Nội dung" column ever has long text that needs to wrap - keep
   the first/last column (STT, tiền, checkbox + "Bắt buộc"/"Có") on one
   line so short labels don't stack vertically. */
.table-responsive > table tr > td:first-child,
.table-responsive > table tr > td:last-child,
.table-responsive > table tr > th:first-child,
.table-responsive > table tr > th:last-child {
    white-space: nowrap !important;
}

/* Checklist table's "Tùy chọn" column (checkbox + "Bắt buộc"/"Có") reads
   better centered rather than left/top-aligned, especially when the
   "Nội dung" cell next to it wraps onto several lines. */
.ts-checklist-table tr > td:last-child,
.ts-checklist-table tr > th:last-child {
    text-align: left !important;
    vertical-align: middle !important;
}

.ts-checklist-table tr > td:last-child {
    cursor: pointer;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    table, div, td, th {
        max-width: 100%;
    }

    /* Reflow plain layout tables (no DevExpress class) into stacked rows */
    table:not([class]) {
        width: 100% !important;
    }

    table:not([class]) > tbody > tr,
    table:not([class]) > tbody > tr > td,
    table:not([class]) > tbody > tr > th,
    table:not([class]) > tr,
    table:not([class]) > tr > td,
    table:not([class]) > tr > th {
        display: block;
        width: 100% !important;
    }

    table:not([class]) td[rowspan] {
        text-align: center;
        padding-bottom: 10px;
    }

    /* Shrink DevExpress edit controls so they fit their row */
    .dxeEditArea, .dxeEditArea_MetropolisBlue,
    table.dxeEditArea, .dxeButtonEditButton,
    input[type="text"], input[type="password"], textarea {
        max-width: 100% !important;
        width: 100% !important;
    }
}