/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Mar 12 2026 | 12:33:09 */
/* Фікс для всіх таблиць: розтягування вниз, а не вбік */
table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed; /* ГАРАНТУЄ фіксовану ширину, текст піде вниз */
    border-collapse: collapse;
    margin: 20px 0;
    word-wrap: break-word; /* Розрив довгих слів */
    overflow-wrap: break-word;
}

/* Налаштування чарунок */
th, td {
    border: 1px solid #e2e2e2;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    
    /* Дозволяємо тексту переноситися, збільшуючи висоту рядка */
    white-space: normal !important; 
    overflow: hidden;
}

/* Пропорції колонок для балансу на екранах 360-720px */
table th:first-child, 
table td:first-child {
    width: 30%; /* Параметр (CPU, GPU тощо) */
}

table th:nth-child(2), 
table td:nth-child(2),
table th:nth-child(3), 
table td:nth-child(3) {
    width: 35%; /* Значення для M3 та M4 */
}

/* Коригування шрифту для маленьких екранів (360px+) */
@media screen and (max-width: 720px) {
    table {
        font-size: 13px;
    }
    
    th, td {
        padding: 6px 8px;
    }
}

/* Якщо хедер таблиці все ще "пливе" відносно тексту зверху */
thead, tbody, tr {
    width: 100%;
}
th, td {
    /* ... ваші існуючі стилі ... */
    line-height: 1.2; /* Зменшує міжрядковий інтервал, щоб текст не займав пів екрана */
    height: auto;    /* Гарантує, що висота залежить тільки від контенту */
}
.table-container {
    width: 100%;
    overflow-x: auto; /* Дозволяє горизонтальний скрол на малих екранах */
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 600px) {
    table {
        table-layout: auto !important; /* На зовсім малих екранах краще дати колонкам адаптуватися під контент */
        min-width: 360px; /* Гарантує, що таблиця не стиснеться в тонку лінію */
    }
}
table th:first-child, 
table td:first-child {
    width: 25%; /* Менше для назв параметрів */
    font-weight: bold;
    background-color: #f9f9f9; /* Візуально відділяємо заголовки */
}

table th:nth-child(n+2), 
table td:nth-child(n+2) {
    width: auto; /* Решта колонок ділять простір порівну */
}