.skeleton{
    position:relative;
    overflow:hidden;
    background:#e9ecef;
    border-radius:8px;
}

.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    animation:skeleton-loading 1.2s infinite;
}

@keyframes skeleton-loading{
    100%{
        transform:translateX(100%);
    }
}



.skeleton{
    height:16px;
    border-radius:6px;
    background:linear-gradient(
        90deg,
        #ececec 25%,
        #f5f5f5 37%,
        #ececec 63%
    );
    background-size:400% 100%;
    animation:skeleton-loading 1.2s infinite;
}

.sk-sm{
    width:40px;
}

.sk-btn{
    width:70px;
    height:34px;
}

@keyframes skeleton-loading{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }

}

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: #fff; border-radius: var(--radius); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,.25); transform: scale(.95); transition: transform .2s; }
.modal-overlay.open .modal { transform: scale(1); }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .75rem; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem; border-radius: 6px; }
.modal-close:hover { background: var(--bg); color: var(--danger); }

.modal-body hr{

    border:none;
    border-top:1px solid var(--border);

    margin:1.75rem 0;

}

.slot-card{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    margin-bottom:16px;

    background:#fff;

    transition:.25s;
}

.slot-card:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.slot-left{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.slot-time{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    color:#0f172a;

}

.slot-meta{

    display:flex;

    gap:20px;

    color:#64748b;

    font-size:.9rem;

}

.slot-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.slot-right{

    display:flex;

    align-items:center;

}

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:35px;

    flex-wrap:wrap;

}

.page-btn{

    min-width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#fff;

    border:1px solid #e5e7eb;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.page-btn:hover:not(:disabled){

    background:#0ea5e9;

    color:#fff;

}

.page-btn.active{

    background:#0ea5e9;

    color:#fff;

}

.page-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.page-dots{

    padding:0 6px;

    font-weight:bold;

}

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    margin-top:2rem;
    flex-wrap:wrap;
}

.pagination button{
    border:1px solid #ddd;
    background:#fff;
    padding:.65rem 1rem;
    border-radius:8px;
    cursor:pointer;
    transition:.25s;
}

.pagination button:hover{
    background:#006B3C;
    color:#fff;
}

.pagination button.active{
    background:#006B3C;
    color:#fff;
    border-color:#006B3C;
}

.pagination button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.article-content img:first-of-type {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 2rem;
}

.article-content img:not(:first-of-type) {
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 12px;
}

#toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0d6efd;
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: .95rem;
    opacity: 0;
    transform: translateY(20px);
    transition: .3s ease;
    pointer-events: none;
    z-index: 99999;
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

#toast.show {
    opacity: 1;
    transform: translateY(0);
}

#toast.success {
    background: #198754;
}

#toast.error {
    background: #dc3545;
}

#toast.warning {
    background: #ffc107;
    color: #222;
}

.skeleton{
    background:linear-gradient(
        90deg,
        #ececec 25%,
        #f6f6f6 50%,
        #ececec 75%
    );
    background-size:200% 100%;
    animation:skeletonLoading 1.2s infinite;
}

@keyframes skeletonLoading{
    from{background-position:200% 0;}
    to{background-position:-200% 0;}
}

.skeleton-image{
    width:100%;
    height:210px;
    border-radius:16px 16px 0 0;
}

.skeleton-badge{
    width:90px;
    height:22px;
    border-radius:20px;
}

.skeleton-time{
    width:70px;
    height:18px;
    border-radius:8px;
}

.skeleton-title{
    width:85%;
    height:22px;
    margin:18px 0 12px;
    border-radius:8px;
}

.skeleton-line{
    width:100%;
    height:14px;
    margin-bottom:10px;
    border-radius:6px;
}

.skeleton-line.short{
    width:70%;
}

.skeleton-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
}

.skeleton-name{
    width:130px;
    height:14px;
    border-radius:6px;
    margin-bottom:8px;
}

.skeleton-role{
    width:100px;
    height:12px;
    border-radius:6px;
}

.skeleton{
    background:#ececec;
    background-image:linear-gradient(
        90deg,
        #ececec,
        #f6f6f6,
        #ececec
    );
    background-size:200% 100%;
    animation:shimmer 1.2s infinite;
    border-radius:8px;
}

.skeleton-title{
    height:24px;
    width:180px;
    margin-bottom:20px;
}

.skeleton-circle{
    width:120px;
    height:120px;
    border-radius:50%;
    margin:20px auto;
}

.skeleton-row{
    height:18px;
    margin:12px 0;
}

@keyframes shimmer{
    from{
        background-position:200% 0;
    }
    to{
        background-position:-200% 0;
    }
}