.step-item {
    --step-accent: #3157d5;
    --step-shadow: rgba(49, 87, 213, .22);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(49, 87, 213, .16);
    box-shadow: 0 8px 24px rgba(21, 33, 59, .07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.step-item::after {
    content: "";
    position: absolute;
    inset: auto -25% -70% auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--step-accent);
    opacity: .08;
    z-index: -1;
    transition: transform .35s ease, opacity .35s ease;
}

.step-item:nth-child(1) {
    --step-accent: #2563eb;
    --step-shadow: rgba(37, 99, 235, .25);
    background: linear-gradient(145deg, #eef5ff, #dbeafe);
}

.step-item:nth-child(2) {
    --step-accent: #7c3aed;
    --step-shadow: rgba(124, 58, 237, .24);
    background: linear-gradient(145deg, #f7f2ff, #ede9fe);
}

.step-item:nth-child(3) {
    --step-accent: #0f9f8f;
    --step-shadow: rgba(15, 159, 143, .24);
    background: linear-gradient(145deg, #edfffb, #ccfbf1);
}

.step-item:nth-child(4) {
    --step-accent: #d97706;
    --step-shadow: rgba(217, 119, 6, .24);
    background: linear-gradient(145deg, #fff9e9, #fef3c7);
}

.step-item:nth-child(5) {
    --step-accent: #e11d67;
    --step-shadow: rgba(225, 29, 103, .23);
    background: linear-gradient(145deg, #fff2f7, #fce7f3);
}

.step-item .step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    color: var(--step-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    transition: color .28s ease, background .28s ease, transform .28s ease;
}

.step-item b {
    transition: color .28s ease;
}

.step-item:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: var(--step-accent);
    box-shadow: 0 18px 34px var(--step-shadow);
}

.step-item:hover::after {
    opacity: .14;
    transform: scale(1.25);
}

.step-item:hover .step-no {
    color: #fff;
    background: var(--step-accent);
    transform: translateY(-1px);
}

.step-item:hover b {
    color: var(--step-accent);
}

@media (prefers-reduced-motion: reduce) {
    .step-item,
    .step-item::after,
    .step-item .step-no,
    .step-item b {
        transition: none;
    }

    .step-item:hover {
        transform: none;
    }
}

/* Toàn bộ thẻ lớp trong trang kết quả */
.classes-grid > div .class-card {
    --class-start: #3157d5;
    --class-end: #5b72dc;
    --class-soft: #edf2ff;
    --class-shadow: rgba(49, 87, 213, .22);
    border-color: rgba(49, 87, 213, .14);
    background: linear-gradient(180deg, #fff 58%, var(--class-soft));
    box-shadow: 0 12px 30px rgba(21, 33, 59, .09);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.classes-grid > div:nth-child(6n + 1) .class-card {
    --class-start: #3157d5;
    --class-end: #6278df;
    --class-soft: #edf2ff;
    --class-shadow: rgba(49, 87, 213, .23);
}

.classes-grid > div:nth-child(6n + 2) .class-card {
    --class-start: #7043c7;
    --class-end: #9369dc;
    --class-soft: #f4efff;
    --class-shadow: rgba(112, 67, 199, .22);
}

.classes-grid > div:nth-child(6n + 3) .class-card {
    --class-start: #078879;
    --class-end: #35aa9c;
    --class-soft: #eafaf7;
    --class-shadow: rgba(7, 136, 121, .22);
}

.classes-grid > div:nth-child(6n + 4) .class-card {
    --class-start: #c1710b;
    --class-end: #df9c3a;
    --class-soft: #fff7e7;
    --class-shadow: rgba(193, 113, 11, .22);
}

.classes-grid > div:nth-child(6n + 5) .class-card {
    --class-start: #cc326b;
    --class-end: #e76192;
    --class-soft: #fff0f5;
    --class-shadow: rgba(204, 50, 107, .21);
}

.classes-grid > div:nth-child(6n) .class-card {
    --class-start: #087eaa;
    --class-end: #35a4c9;
    --class-soft: #ebf9fd;
    --class-shadow: rgba(8, 126, 170, .22);
}

.classes-grid .class-card .class-head {
    background: linear-gradient(135deg, var(--class-start), var(--class-end));
}

.classes-grid .class-card .class-metrics {
    background: linear-gradient(135deg, #fff, var(--class-soft));
}

.classes-grid .class-card details {
    background: rgba(255, 255, 255, .72);
}

.classes-grid .class-card summary {
    color: var(--class-start);
    transition: background-color .25s ease, padding-left .25s ease;
}

.classes-grid .class-card summary:hover {
    padding-left: 23px;
    background: var(--class-soft);
}

.classes-grid .class-card:hover {
    transform: translateY(-6px);
    border-color: var(--class-start);
    box-shadow: 0 20px 40px var(--class-shadow);
}

.classes-grid .student-list > div {
    --student-row-fill: #eaf2ff;
    --student-row-accent: #2563eb;
    margin: 2px 0;
    padding: 9px 10px;
    border-radius: 9px;
    border-bottom: 0;
    transition: background-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
}

.classes-grid .student-list > div:nth-child(6n + 1) {
    --student-row-fill: #e7f0ff;
    --student-row-accent: #2563eb;
}

.classes-grid .student-list > div:nth-child(6n + 2) {
    --student-row-fill: #f0eaff;
    --student-row-accent: #7c3aed;
}

.classes-grid .student-list > div:nth-child(6n + 3) {
    --student-row-fill: #ddf8f2;
    --student-row-accent: #0f8f81;
}

.classes-grid .student-list > div:nth-child(6n + 4) {
    --student-row-fill: #fff3d8;
    --student-row-accent: #c87508;
}

.classes-grid .student-list > div:nth-child(6n + 5) {
    --student-row-fill: #ffe7f0;
    --student-row-accent: #d72b69;
}

.classes-grid .student-list > div:nth-child(6n) {
    --student-row-fill: #def5fb;
    --student-row-accent: #087eaa;
}

.classes-grid .student-list > div:hover {
    color: #172554;
    background: var(--student-row-fill);
    box-shadow: inset 4px 0 0 var(--student-row-accent), 0 5px 14px rgba(21, 33, 59, .07);
    transform: translateX(3px);
}

.classes-grid .student-list > div:hover small {
    color: var(--student-row-accent);
}

@media (prefers-reduced-motion: reduce) {
    .classes-grid > div .class-card,
    .classes-grid .class-card summary,
    .classes-grid .student-list > div {
        transition: none;
    }

    .classes-grid .class-card:hover,
    .classes-grid .student-list > div:hover {
        transform: none;
    }
}

/* Khu vực cấu hình giới hạn lớp */
.limit-panel {
    border-color: rgba(79, 70, 229, .15);
    background: linear-gradient(155deg, #ffffff 35%, #f4f7ff 100%);
    box-shadow: 0 18px 46px rgba(45, 55, 120, .11);
}

.limit-panel .panel-title {
    background: linear-gradient(105deg, #f5f7ff, #eef2ff 52%, #f8f5ff);
    border-bottom-color: rgba(79, 70, 229, .12);
}

.limit-panel .panel-title h4 {
    color: #1f2f78;
}

.limit-panel thead th {
    color: #33438f;
    background: rgba(238, 242, 255, .78);
    border-bottom-color: rgba(79, 70, 229, .13);
}

.limit-panel tbody tr {
    --row-accent: #2563eb;
    --row-fill: #eaf2ff;
}

.limit-panel tbody td {
    background-color: rgba(255, 255, 255, .6);
    border-bottom-color: rgba(93, 107, 155, .14);
    transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.limit-panel tbody tr:nth-child(6n + 1) {
    --row-accent: #2563eb;
    --row-fill: #e6f0ff;
}

.limit-panel tbody tr:nth-child(6n + 2) {
    --row-accent: #7c3aed;
    --row-fill: #f0e9ff;
}

.limit-panel tbody tr:nth-child(6n + 3) {
    --row-accent: #0f9f8f;
    --row-fill: #dcfaf3;
}

.limit-panel tbody tr:nth-child(6n + 4) {
    --row-accent: #d97706;
    --row-fill: #fff3d2;
}

.limit-panel tbody tr:nth-child(6n + 5) {
    --row-accent: #e11d67;
    --row-fill: #ffe5f0;
}

.limit-panel tbody tr:nth-child(6n) {
    --row-accent: #0891b2;
    --row-fill: #dcf7fc;
}

.limit-panel tbody tr:hover td {
    color: #172554;
    background-color: var(--row-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .65);
}

.limit-panel tbody tr:hover td:first-child {
    box-shadow: inset 5px 0 0 var(--row-accent), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .65);
}

.limit-panel tbody tr:hover td:first-child b {
    color: var(--row-accent);
}

.limit-panel tbody tr:hover .form-control {
    border-color: var(--row-accent);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-accent) 12%, transparent);
}

.limit-panel .form-control {
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.limit-panel .action-bar {
    background: linear-gradient(100deg, #f7f8ff, #eef2ff);
    border-top-color: rgba(79, 70, 229, .13);
}

@media (prefers-reduced-motion: reduce) {
    .limit-panel tbody td,
    .limit-panel .form-control {
        transition: none;
    }
}

/* Thẻ thống kê nhóm môn */
.row.g-4.mb-4 > .col-lg-4 .stat-card {
    --group-accent: #2563eb;
    --group-shadow: rgba(37, 99, 235, .23);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(37, 99, 235, .16);
    background: linear-gradient(145deg, #eef5ff, #dbeafe);
    box-shadow: 0 10px 28px rgba(21, 33, 59, .08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.row.g-4.mb-4 > .col-lg-4 .stat-card::after {
    content: "";
    position: absolute;
    width: 145px;
    height: 145px;
    right: -62px;
    top: -72px;
    border-radius: 50%;
    background: var(--group-accent);
    opacity: .08;
    z-index: -1;
    transition: transform .38s ease, opacity .38s ease;
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n + 1) .stat-card {
    --group-accent: #2563eb;
    --group-shadow: rgba(37, 99, 235, .23);
    background: linear-gradient(145deg, #eef5ff, #dbeafe);
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n + 2) .stat-card {
    --group-accent: #7c3aed;
    --group-shadow: rgba(124, 58, 237, .22);
    background: linear-gradient(145deg, #f7f2ff, #ede9fe);
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n + 3) .stat-card {
    --group-accent: #0f9f8f;
    --group-shadow: rgba(15, 159, 143, .22);
    background: linear-gradient(145deg, #edfffb, #ccfbf1);
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n + 4) .stat-card {
    --group-accent: #d97706;
    --group-shadow: rgba(217, 119, 6, .22);
    background: linear-gradient(145deg, #fff9e9, #fef3c7);
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n + 5) .stat-card {
    --group-accent: #e11d67;
    --group-shadow: rgba(225, 29, 103, .21);
    background: linear-gradient(145deg, #fff2f7, #fce7f3);
}

.row.g-4.mb-4 > .col-lg-4:nth-child(6n) .stat-card {
    --group-accent: #0891b2;
    --group-shadow: rgba(8, 145, 178, .22);
    background: linear-gradient(145deg, #effcff, #cffafe);
}

.row.g-4.mb-4 > .col-lg-4 .stat-card .group-tag,
.row.g-4.mb-4 > .col-lg-4 .stat-card h6 {
    color: var(--group-accent);
    transition: transform .3s ease, color .3s ease;
}

.row.g-4.mb-4 > .col-lg-4 .stat-row div {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 5px 16px rgba(21, 33, 59, .05);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.row.g-4.mb-4 > .col-lg-4 .stat-card:hover {
    transform: translateY(-7px) scale(1.012);
    border-color: var(--group-accent);
    box-shadow: 0 20px 38px var(--group-shadow);
}

.row.g-4.mb-4 > .col-lg-4 .stat-card:hover::after {
    opacity: .14;
    transform: scale(1.24);
}

.row.g-4.mb-4 > .col-lg-4 .stat-card:hover .group-tag {
    transform: translateX(4px);
}

.row.g-4.mb-4 > .col-lg-4 .stat-card:hover .stat-row div {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 9px 20px rgba(21, 33, 59, .08);
}

@media (prefers-reduced-motion: reduce) {
    .row.g-4.mb-4 > .col-lg-4 .stat-card,
    .row.g-4.mb-4 > .col-lg-4 .stat-card::after,
    .row.g-4.mb-4 > .col-lg-4 .stat-card .group-tag,
    .row.g-4.mb-4 > .col-lg-4 .stat-row div {
        transition: none;
    }

    .row.g-4.mb-4 > .col-lg-4 .stat-card:hover,
    .row.g-4.mb-4 > .col-lg-4 .stat-card:hover .group-tag,
    .row.g-4.mb-4 > .col-lg-4 .stat-card:hover .stat-row div {
        transform: none;
    }
}

/* Màu lớp được xác định theo nhóm, không theo vị trí hiển thị */
.classes-grid > div .class-card[data-group="N1"] {
    --class-start: #3157d5;
    --class-end: #6278df;
    --class-soft: #edf2ff;
    --class-shadow: rgba(49, 87, 213, .23);
}

.classes-grid > div .class-card[data-group="N2"] {
    --class-start: #7043c7;
    --class-end: #9369dc;
    --class-soft: #f4efff;
    --class-shadow: rgba(112, 67, 199, .22);
}

.classes-grid > div .class-card[data-group="N3"] {
    --class-start: #078879;
    --class-end: #35aa9c;
    --class-soft: #eafaf7;
    --class-shadow: rgba(7, 136, 121, .22);
}

.classes-grid > div .class-card[data-group="N4"] {
    --class-start: #c1710b;
    --class-end: #df9c3a;
    --class-soft: #fff7e7;
    --class-shadow: rgba(193, 113, 11, .22);
}

.classes-grid > div .class-card[data-group="N5"] {
    --class-start: #cc326b;
    --class-end: #e76192;
    --class-soft: #fff0f5;
    --class-shadow: rgba(204, 50, 107, .21);
}

.classes-grid > div .class-card[data-group="N6"] {
    --class-start: #087eaa;
    --class-end: #35a4c9;
    --class-soft: #ebf9fd;
    --class-shadow: rgba(8, 126, 170, .22);
}