/* Gau Spec Table — frontend (<table> + rowspan auto-group, responsive)
 * Desktop: bảng thường, cột Thông số rowspan trùm dọc (căn top), header đỏ.
 * Mobile (≤768px): stack — key thành tiêu đề nhóm (nền nhạt), value căn phải.
 * Collapse: mặc định thu gọn, nút "Xem tất cả / Thu gọn" riêng cho bảng.
 */

.gau-spec {
    width: 100%;
    margin: 2.4rem 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #1e293b;
}

.gau-spec__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
}

/* ----- Header ----- */
.gau-spec__th {
    background: #dc2626;
    color: #fff !important;
    padding: 1.2rem 1.6rem;
    text-align: left;
    font-weight: 700;
    border: 1px solid #dc2626;
}

.gau-spec__th--key {
    width: 40%;
}

/* ----- Cells ----- */
.gau-spec__td {
    padding: 1.2rem 1.6rem;
    border: 1px solid #e5e7eb;
    vertical-align: top; /* key rowspan căn TOP */
    word-break: break-word;
}

.gau-spec__td--key {
    font-weight: 600;
}

.gau-spec__table tbody tr:hover .gau-spec__td {
    background: #fef2f2;
}

/* ----- Mobile: stack, key = tiêu đề nhóm, value căn phải ----- */
@media screen and (max-width: 768px) {
    .gau-spec__table {
        border: 0;
    }

    .gau-spec__table thead {
        display: none !important;
    }

    .gau-spec__table,
    .gau-spec__table tbody,
    .gau-spec__table tr,
    .gau-spec__table td {
        display: block !important;
        width: 100% !important;
    }

    .gau-spec__td {
        border: 0 !important;
        padding: 1.1rem 1.6rem !important;
    }

    /* Key = tiêu đề nhóm */
    .gau-spec__td--key {
        background: #f1f5f9;
        font-weight: 700;
        color: #1e293b;
        border-top: 1px solid #e5e7eb !important;
    }

    /* Value: căn PHẢI, không lặp nhãn (key đã là tiêu đề) */
    .gau-spec__td--val {
        text-align: right;
        border-bottom: 1px solid #f1f5f9 !important;
    }
}

/* ----- Collapse / expand (mặc định thu gọn) ----- */
.gau-spec--collapsible .gau-spec__inner {
    position: relative;
}

.gau-spec--collapsible.is-collapsed .gau-spec__inner {
    max-height: 360px;
    overflow: hidden;
}

.gau-spec--collapsible.is-collapsed .gau-spec__inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.gau-spec__toggle {
    display: block;
    margin: 1.2rem auto 0;
    padding: 0.8rem 2.4rem;
    background: transparent;
    border: 1px solid #dc2626;
    border-radius: 999px;
    color: #dc2626;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.gau-spec__toggle:hover {
    background: #dc2626;
    color: #fff;
}