/* Điện thoại lớn     @media (min-width: 576px) and (max-width: 767.98px) {*/
@media (max-width: 992px) {
    /* CSS cho mobile lớn */
    .box-timer .countdown {
        font-size: .875rem;
        height: 2.5rem;
    }
    .box-timer__wrapper {
        gap: .5rem;
        position: static;
    }
    .lg\:block {
        display: block;
    }
    .box-timer .countdown__data {
        font-size: .875rem;
    }
    .menu-item span {
        font-size: 14px;
    }
    .account-wrapper {
        margin: -15px -15px 0;
        border-radius: 0;
    }

    .account-header {
        display: block;
        text-align: center;
    }

    .menu-item {
        flex: 1 1 50%;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-radius: 0;
    }

    .content-section {
        padding: 10px 0;
    }

        .content-section h3 {
            text-align: center;
            display: block;
        }

    /*table, thead, tbody, th, td, tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {*/
        /*margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;*/
    /*}

    td {
        padding-left: 50%;
        position: relative;
        padding: 0 10px !important;
    }

        td::before {
            content: attr(data-label);
            position: absolute;
            left: 15px;
            font-weight: bold;
            color: #666;
        }*/

    /* Base styles */
    .responsive-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

        .responsive-table th,
        .responsive-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        .responsive-table th {
            background-color: #f4f4f4;
            color: #333;
        }
    .menu-item[data-tab="section-logout"] {
        flex: 1 1 100%;
        justify-content: center; /* canh giữa ngang */
        align-items: center; /* canh giữa dọc */
        border-left: none;
    }

        .menu-item[data-tab="section-logout"] a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%; /* để icon + text nằm giữa */
        }
    /* Mobile styles */
    @media (max-width: 768px) {
        .responsive-table thead {
            display: none;
        }
        .menu-item span {
            font-size: 14px;
        }
        .responsive-table tr {
            display: block;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 10px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        }

        .responsive-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding: 10px 0;
        }

            .responsive-table td:last-child {
                border-bottom: none;
            }

            .responsive-table td::before {
                content: attr(data-label);
                font-weight: bold;
                color: #555;
                flex-shrink: 0;
            }
    }


    /*////////////////////////*/




    .k-listview-pager {
        flex-direction: column;
        text-align: center;
    }

    .k-pager-wrap .k-pager-numbers li {
        display: inline-block;
    }

    .k-pager-wrap .k-link,
    .k-pager-wrap .k-state-selected {
        padding: 5px 10px;
        font-size: 13px;
    }

    .box-biende {
        padding: 0;
        box-shadow: none;
        background: none;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

        .box-biende .form-item {
            width: calc(50% - .7rem);
        }
        .box-biende .w-\[9\.5rem\] {
            width: 100%;
        }
    .right-panel {
        background-color: rgb(193 205 221);
    }

    .page-wrapper {
        background: #fff
    }

    .table-number {
        gap: .375rem;
        grid-template-columns: repeat(9, 1fr);
        margin-top: 1rem;
    }

    .danhlo-lo3so {
        /* gap: .625rem; */
        /*grid-template-columns: repeat(5, 1fr);
        margin-top: 1rem;*/
        display: flex;
        overflow: auto;
    }

    .category-list {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 1rem;
    }

    .btn-login {
        padding: 0 10px;
        font-size: 12px;
    }

    .logo {
        margin-left: .5rem;
    }

    .collapse.show {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #fff;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        padding: 1rem;
        z-index: 1050;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }



    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        background-color: #ccc;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        padding: 1rem;
        z-index: 1050;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

        .sidebar.active {
            transform: translateX(0);
            opacity: 1;
            pointer-events: auto;
            /*position: absolute;
            z-index: 999999;
            right: 40%;*/
        }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

        .overlay.active {
            display: block;
        }

    .sidebar.active > ul > li.nav-item {
        align-items: center;
        border-radius: .25rem;
        display: flex;
        height: 3rem;
        justify-content: space-between;
        margin-bottom: .25rem;
        --tw-bg-opacity: 1;
        background: linear-gradient(140deg, #4c1919, #191248);
        padding: .75rem;
    }
}