/* =========================================================
   TÁC PHẨM HỌC VIÊN V18.4D
   RELIABLE FAST GRADING + ADMIN DELETE
========================================================= */

.tp18-wrap{
    max-width:1240px;
    margin:0 auto;
    padding:24px 14px 50px;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
    color:#172033;
}

.tp18-wrap.locked{
    display:none!important;
}

.tp18-header{
    text-align:center;
    margin-bottom:16px;
}

.tp18-header h2{
    margin:0;
    font-size:30px;
    font-weight:900;
    color:#172033;
}

.tp18-header p{
    margin:7px 0 0;
    font-size:12px;
    color:#718096;
}

.tp18-admin-note,
.tp18-status{
    display:none;
    max-width:960px;
    margin:0 auto 14px;
    padding:10px 14px;
    box-sizing:border-box;
    border-radius:11px;
    text-align:center;
    font-size:10px;
    line-height:1.55;
    font-weight:800;
}

.tp18-admin-note.on{
    display:block;
    background:#f5f3ff;
    border:1px solid #c4b5fd;
    color:#6d28d9;
}

.tp18-status.on{
    display:block;
    background:#ecfdf5;
    color:#047857;
}

.tp18-status.warn{
    background:#fff7ed;
    color:#9a3412;
}

/* =========================================================
   TOAST
========================================================= */

.tp18-toast{
    position:fixed;
    z-index:9999999;
    left:50%;
    top:20px;
    transform:translateX(-50%) translateY(-15px);
    max-width:calc(100vw - 28px);
    min-width:220px;
    padding:12px 18px;
    border-radius:12px;
    box-shadow:0 12px 35px rgba(15,23,42,.23);
    color:#fff;
    font-size:12px;
    line-height:1.5;
    font-weight:900;
    text-align:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.tp18-toast.on{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.tp18-toast.success{background:#059669;}
.tp18-toast.error{background:#dc2626;}
.tp18-toast.wait{background:#2563eb;}
.tp18-toast.warning{background:#d97706;}

/* =========================================================
   NỘP BÀI
========================================================= */

.tp18-submit{
    text-align:center;
    margin:0 0 24px;
}

.tp18-submit.hidden{
    display:none!important;
}

.tp18-submit a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border-radius:10px;
    background:#172033;
    color:#fff!important;
    text-decoration:none!important;
    font-size:14px;
    font-weight:900;
    box-shadow:0 7px 20px rgba(23,32,51,.13);
}

/* =========================================================
   ADMIN SEARCH
========================================================= */

.tp18-admin-search{
    display:none;
    max-width:960px;
    margin:0 auto 22px;
}

.tp18-admin-search.on{
    display:block;
}

.tp18-search-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px;
    border:1px solid #ddd6fe;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 26px rgba(91,33,182,.08);
}

.tp18-search-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#f5f3ff;
    color:#7c3aed;
    font-size:20px;
}

.tp18-search-input{
    min-width:0;
    flex:1;
    height:42px;
    padding:0 5px;
    border:0;
    outline:0;
    background:transparent;
    color:#172033;
    font-size:14px;
    font-weight:700;
}

.tp18-search-input::placeholder{
    color:#94a3b8;
    font-weight:600;
}

.tp18-search-clear{
    display:none;
    flex:0 0 auto;
    min-height:38px;
    padding:0 13px;
    border:0;
    border-radius:9px;
    background:#f1f5f9;
    color:#475569;
    cursor:pointer;
    font-size:10px;
    font-weight:900;
}

.tp18-search-clear.on{
    display:block;
}

.tp18-search-info{
    min-height:18px;
    padding:7px 7px 0;
    color:#64748b;
    text-align:center;
    font-size:10px;
    line-height:1.5;
    font-weight:800;
}

.tp18-search-info.active{
    color:#6d28d9;
}

/* =========================================================
   STUDENT VIEW
========================================================= */

.tp18-student-bar{
    display:none;
    max-width:980px;
    margin:0 auto 20px;
    padding:12px 14px;
    box-sizing:border-box;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.tp18-student-bar.on{
    display:flex;
}

/* =========================================================
   PAGINATION
========================================================= */

.tp18-pages{
    display:none;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:16px 0 22px;
}

.tp18-pages.on{
    display:flex;
}

.tp18-page-info{
    width:100%;
    margin-bottom:2px;
    text-align:center;
    font-size:10px;
    font-weight:800;
    color:#64748b;
}

.tp18-page{
    min-width:36px;
    height:36px;
    padding:0 10px;
    border:1px solid #dbe1ea;
    border-radius:8px;
    background:#fff;
    color:#475569;
    cursor:pointer;
    font-weight:900;
}

.tp18-page.current{
    background:#7c3aed;
    border-color:#7c3aed;
    color:#fff;
}

.tp18-page:disabled{
    opacity:.4;
    cursor:not-allowed;
}

/* =========================================================
   GRID
========================================================= */

.tp18-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.tp18-card{
    position:relative;
    min-width:0;
    overflow:visible;
    border:1px solid #dbe0ea;
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 24px rgba(23,32,51,.08);
    content-visibility:auto;
    contain-intrinsic-size:720px;
}

.tp18-card.priority{
    border:2px solid #f59e0b;
    box-shadow:0 12px 30px rgba(245,158,11,.18);
}

.tp18-card.grade-pending{
    border-color:#60a5fa;
}

.tp18-card.grade-synced{
    border-color:#86efac;
}

.tp18-card.grade-warning{
    border-color:#f59e0b;
}

/* =========================================================
   DELETE
========================================================= */

.tp18-delete{
    position:absolute;
    z-index:150;
    top:11px;
    right:11px;
    width:40px;
    height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.95);
    border-radius:50%;
    background:rgba(185,28,28,.9);
    color:#fff;
    box-shadow:0 5px 15px rgba(15,23,42,.3);
    cursor:pointer;
    font-size:22px;
    font-weight:700;
    line-height:1;
    -webkit-tap-highlight-color:transparent;
    backdrop-filter:blur(5px);
    transition:.16s ease;
}

.tp18-delete:hover{
    background:#dc2626;
    transform:scale(1.06);
}

.tp18-delete:active{
    transform:scale(.92);
}

.tp18-delete:disabled{
    opacity:.6;
    cursor:wait;
}

.tp18-delete.pending{
    background:#d97706;
    animation:tp18DeletePulse 1s ease-in-out infinite;
}

.tp18-delete-result{
    position:absolute;
    z-index:155;
    top:59px;
    right:10px;
    display:none;
    max-width:205px;
    padding:7px 9px;
    border-radius:8px;
    background:rgba(15,23,42,.92);
    color:#fff;
    box-shadow:0 4px 12px rgba(15,23,42,.25);
    font-size:8px;
    line-height:1.45;
    font-weight:900;
    text-align:center;
}

.tp18-delete-result.on{
    display:block;
}

.tp18-delete-result.error{
    background:#b91c1c;
}

.tp18-card.delete-checking{
    box-shadow:
        0 0 0 2px #f59e0b inset,
        0 8px 24px rgba(23,32,51,.08);
}

/* =========================================================
   PRIORITY
========================================================= */

.tp18-priority-label{
    position:absolute;
    z-index:120;
    top:-12px;
    right:13px;
    max-width:220px;
    padding:6px 10px;
    border-radius:999px;
    background:#f59e0b;
    color:#fff;
    font-size:8px;
    line-height:1.3;
    font-weight:900;
    text-align:center;
}

/* =========================================================
   IMAGE
========================================================= */

.tp18-image-box{
    position:relative;
    height:292px;
    overflow:hidden;
    border-radius:18px 18px 0 0;
    background:#eef2f7;
}

.tp18-work-link,
.tp18-work-image{
    display:block;
    width:100%;
    height:100%;
}

.tp18-work-image{
    object-fit:cover;
}

.tp18-number{
    position:absolute;
    z-index:30;
    top:11px;
    left:11px;
    min-width:31px;
    height:31px;
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(15,23,42,.83);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.tp18-no-image{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:linear-gradient(145deg,#111827,#312e81);
    color:#fff;
    font-size:39px;
}

.tp18-no-image small{
    font-size:9px;
    opacity:.72;
}

/* =========================================================
   LINH THÚ
========================================================= */

.tp18-beasts{
    position:relative;
    z-index:50;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:0 12px 0 15px;
    margin-top:-35px;
    margin-bottom:-5px;
}

.tp18-beast{
    position:relative;
    width:68px;
    height:68px;
    flex:0 0 68px;
}

.tp18-beast img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.21));
    animation:tp18Float 3.5s ease-in-out infinite;
}

.tp18-beast.supreme img{
    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,.2))
        drop-shadow(0 0 9px rgba(236,72,153,.78));
}

.tp18-beast.premium img{
    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,.2))
        drop-shadow(0 0 8px rgba(245,158,11,.78));
}

.tp18-beast-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    font-size:35px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.16));
}

.tp18-tooltip{
    position:absolute;
    z-index:200;
    bottom:70px;
    left:50%;
    transform:translateX(-50%);
    min-width:155px;
    max-width:220px;
    padding:7px 9px;
    border-radius:8px;
    background:#111827;
    color:#fff;
    text-align:center;
    font-size:9px;
    line-height:1.45;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.tp18-beast:hover .tp18-tooltip{
    opacity:1;
    visibility:visible;
}

/* =========================================================
   INFO
========================================================= */

.tp18-info{
    padding:17px;
}

.tp18-card.has-beast .tp18-info{
    padding-top:30px;
}

.tp18-name{
    margin-bottom:9px;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
}

.tp18-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
}

.tp18-chip{
    padding:6px 8px;
    border-radius:999px;
    background:#f1f5f9;
    color:#526076;
    font-size:9px;
    font-weight:800;
}

.tp18-chip.priority{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
}

/* =========================================================
   PUBLIC
========================================================= */

.tp18-public-data{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-bottom:12px;
}

.tp18-public-box{
    padding:10px 11px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
}

.tp18-public-label{
    margin-bottom:5px;
    color:#64748b;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.tp18-public-score{
    font-size:19px;
    font-weight:900;
}

.tp18-public-score.ungraded{
    color:#7c3aed;
}

.tp18-public-score.graded{
    color:#dc2626;
}

.tp18-public-comment{
    color:#334155;
    font-size:11px;
    line-height:1.55;
    white-space:pre-wrap;
}

/* =========================================================
   SCORE
========================================================= */

.tp18-score{
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid #f1dfbd;
    border-radius:11px;
    background:#fffaf0;
}

.tp18-score-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.tp18-score-label{
    color:#695736;
    font-size:11px;
    font-weight:800;
}

.tp18-score input{
    width:80px;
    padding:8px;
    box-sizing:border-box;
    border:1px solid #d7b56a;
    border-radius:7px;
    text-align:center;
    font-size:17px;
    font-weight:900;
    transition:.2s ease;
}

.tp18-score input.ungraded{
    color:#7c3aed;
    border-color:#c4b5fd;
    background:#faf5ff;
}

.tp18-score input.graded{
    color:#dc2626;
    border-color:#fca5a5;
    background:#fff7f7;
}

/* =========================================================
   COMMENT
========================================================= */

.tp18-comment{
    margin-bottom:12px;
    padding:11px;
    border:1px solid #dbe7f4;
    border-radius:11px;
    background:#f7fbff;
}

.tp18-comment-title{
    margin-bottom:6px;
    color:#35506f;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.tp18-comment textarea{
    width:100%;
    min-height:95px;
    padding:9px;
    box-sizing:border-box;
    border:1px solid #bfd2e7;
    border-radius:8px;
    resize:vertical;
    font:12px/1.5 Arial,sans-serif;
}

/* =========================================================
   GRADE SYNC
========================================================= */

.tp18-grade-result{
    display:none;
    margin:0 0 10px;
    padding:9px 10px;
    border-radius:8px;
    font-size:9px;
    line-height:1.5;
    font-weight:900;
    text-align:center;
}

.tp18-grade-result.wait{
    display:block;
    background:#eff6ff;
    color:#1d4ed8;
}

.tp18-grade-result.ok{
    display:block;
    background:#ecfdf5;
    color:#047857;
}

.tp18-grade-result.error{
    display:block;
    background:#fef2f2;
    color:#b91c1c;
}

.tp18-grade-result.warning{
    display:block;
    background:#fff7ed;
    color:#9a3412;
}

.tp18-sync-dot{
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:5px;
    border-radius:50%;
    background:currentColor;
    vertical-align:middle;
}

.tp18-grade-result.wait .tp18-sync-dot{
    animation:tp18Pulse 1s ease-in-out infinite;
}

/* =========================================================
   OWNED GIFTS
========================================================= */

.tp18-gifts-owned{
    display:none;
    margin:9px 0 12px;
    padding:10px;
    border:1px solid #e9d5ff;
    border-radius:11px;
    background:#faf5ff;
}

.tp18-gifts-owned.on{
    display:block;
}

.tp18-gifts-owned-title{
    margin-bottom:7px;
    color:#7e22ce;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.tp18-gift-icons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tp18-gift-owned{
    display:flex;
    align-items:center;
    gap:5px;
    min-height:35px;
    padding:4px 8px 4px 4px;
    border:1px solid #e9d5ff;
    border-radius:999px;
    background:#fff;
}

.tp18-gift-owned img,
.tp18-gift-icon-fallback{
    width:29px;
    height:29px;
    flex:0 0 29px;
}

.tp18-gift-owned img{
    object-fit:contain;
}

.tp18-gift-icon-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f3e8ff;
    font-size:17px;
}

.tp18-gift-count{
    color:#6b21a8;
    font-size:10px;
    font-weight:900;
}

/* =========================================================
   ADMIN GIFT - COLLAPSIBLE
========================================================= */

.tp18-admin-gift{
    margin-bottom:10px;
    border:1px solid #ddd6fe;
    border-radius:10px;
    background:#faf9ff;
    overflow:hidden;
}

.tp18-admin-gift-toggle{
    width:100%;
    min-height:38px;
    padding:8px 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:0;
    background:#f5f3ff;
    color:#5b21b6;
    cursor:pointer;
    font-size:10px;
    font-weight:900;
    text-align:left;
}

.tp18-admin-gift-toggle:hover{
    background:#ede9fe;
}

.tp18-admin-gift-toggle-text{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
}

.tp18-admin-gift-arrow{
    flex:0 0 auto;
    color:#7c3aed;
    font-size:13px;
    line-height:1;
    transition:transform .18s ease;
}

.tp18-admin-gift.open .tp18-admin-gift-arrow{
    transform:rotate(180deg);
}

.tp18-admin-gift-body{
    display:none;
    padding:9px;
    border-top:1px solid #e9d5ff;
}

.tp18-admin-gift.open .tp18-admin-gift-body{
    display:block;
}

.tp18-admin-gift select,
.tp18-admin-gift input{
    width:100%;
    height:36px;
    padding:0 9px;
    box-sizing:border-box;
    border:1px solid #c4b5fd;
    border-radius:7px;
    background:#fff;
    color:#172033;
    font-size:10px;
}

.tp18-admin-gift input{
    margin-top:6px;
}

.tp18-gift-meta{
    min-height:0;
    padding:5px 2px 0;
    color:#64748b;
    font-size:8px;
    line-height:1.4;
}

.tp18-give{
    width:100%;
    margin-top:6px;
    padding:8px 10px;
    border:0;
    border-radius:7px;
    background:#7c3aed;
    color:#fff;
    cursor:pointer;
    font-size:9px;
    font-weight:900;
}

.tp18-give:disabled{
    opacity:.5;
    cursor:wait;
}

.tp18-give-result{
    display:none;
    margin-top:6px;
    padding:7px 8px;
    border-radius:7px;
    font-size:8px;
    line-height:1.45;
    font-weight:800;
}

.tp18-give-result.ok{
    display:block;
    background:#ecfdf5;
    color:#047857;
}

.tp18-give-result.wait{
    display:block;
    background:#eff6ff;
    color:#1d4ed8;
}

.tp18-give-result.error{
    display:block;
    background:#fef2f2;
    color:#b91c1c;
}

/* =========================================================
   FOOTER
========================================================= */

.tp18-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.tp18-grade{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:0;
    border-radius:8px;
    background:#7c3aed;
    color:#fff;
    cursor:pointer;
    font-size:10px;
    font-weight:900;
}

.tp18-grade:disabled{
    opacity:.55;
    cursor:wait;
}

.tp18-time{
    color:#a1a7b3;
    font-size:8px;
}

/* =========================================================
   LOADING
========================================================= */

.tp18-loading,
.tp18-empty{
    padding:40px 15px;
    text-align:center;
    color:#7c8597;
}

.tp18-empty{
    display:none;
}

.tp18-error{
    display:none;
    margin:18px 0;
    padding:17px;
    border-radius:11px;
    background:#fff4f4;
    color:#a51c30;
    text-align:center;
}

/* =========================================================
   GATE
========================================================= */

.tp18-gate{
    position:fixed;
    z-index:999999;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.96);
    font-family:Arial,sans-serif;
}

.tp18-gate-box{
    width:100%;
    max-width:380px;
    padding:27px 23px;
    border-radius:20px;
    background:#fff;
    text-align:center;
}

.tp18-gate-icon{
    width:62px;
    height:62px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#7c3aed;
    color:#fff;
    font-size:28px;
}

.tp18-gate h3{
    margin:0 0 7px;
}

.tp18-gate p{
    color:#78839a;
    font-size:12px;
}

.tp18-gate input{
    width:100%;
    padding:12px;
    box-sizing:border-box;
    border:1px solid #d8dce6;
    border-radius:9px;
    text-align:center;
    font-size:17px;
    font-weight:900;
    letter-spacing:3px;
}

.tp18-gate button{
    width:100%;
    margin-top:10px;
    padding:12px;
    border:0;
    border-radius:9px;
    background:#7c3aed;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.tp18-gate-error{
    min-height:17px;
    margin-top:8px;
    color:#dc2626;
    font-size:10px;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes tp18Float{
    0%,100%{transform:translateY(1px);}
    50%{transform:translateY(-4px);}
}

@keyframes tp18Pulse{
    0%,100%{opacity:.35;transform:scale(.8);}
    50%{opacity:1;transform:scale(1.2);}
}

@keyframes tp18DeletePulse{
    0%,100%{box-shadow:0 5px 15px rgba(15,23,42,.3);}
    50%{
        box-shadow:
            0 0 0 6px rgba(245,158,11,.2),
            0 5px 15px rgba(15,23,42,.3);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){
    .tp18-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){

    .tp18-wrap{
        padding:16px 10px 35px;
    }

    .tp18-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .tp18-image-box{
        height:330px;
    }

    .tp18-student-bar.on{
        flex-direction:column;
        align-items:stretch;
    }

    .tp18-toast{
        top:12px;
    }

    .tp18-search-box{
        padding:7px;
    }

    .tp18-search-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:18px;
    }

    .tp18-search-input{
        height:38px;
        font-size:13px;
    }

    .tp18-search-clear{
        padding:0 9px;
        min-height:34px;
    }

    .tp18-delete{
        width:44px;
        height:44px;
        top:9px;
        right:9px;
        font-size:24px;
    }
}