student-work.css · Nhập từ GitHub ocd4-assets@v18.5.1 (bản đang chạy trên thudao.com 10/11/2026) 


/* =========================================================
   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;
    }
}

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

trang/thudao/dang-ky-hoc.html · Bản trước khi chuyển sang kho (tải từ GitHub/jsDelivr)

<!-- TRANG ĐĂNG KÝ HỌC (thudao.com/p/dang-ky-hoc.html) - bản SEO 10/11/2026. CÁCH DÙNG: mở trang trong Blogger, chuyển sang Chế độ xem HTML, xoá hết nội dung cũ rồi dán đè toàn bộ tài liệu này. Ô TIÊU ĐỀ TRANG đổi thành: Học thư pháp Online – Khóa học thư pháp Việt cho người mới. Ô MÔ TẢ TÌM KIẾM đổi thành: Học thư pháp Online cho người mới bắt đầu: 52 buổi qua Google Meet cùng giảng viên hoặc tự học theo lộ trình, có chấm bài và gửi dụng cụ tận nhà. Khối tải trang đăng ký giữ nguyên bản đang chạy (v1.7.2, commit 09ac97a). --> <style>.tp-seo h2{margin-top:30px}.tp-seo h2:first-child{margin-top:0}.tp-seo-card h3{font:bold 17px/1.35 Georgia,"Times New Roman",serif;color:#8b3328;margin:0 0 8px}.tp-vid{position:relative;aspect-ratio:16/9;margin:0 0 14px;border-radius:14px;overflow:hidden;background:#2c241b}.tp-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.tp-vlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0...
Đọc thêm

trang/thudao/bai-viet/benh-cua-thu-dan-duong-dai-the-trien-lam-xu-thu-va-nguy-menh-de-vuot-co-nhan.html · Bản trước khi chuyển sang kho (có video, tải từ GitHub/jsDelivr)

<!-- ===== CHUYỆN HỌC THƯ PHÁP · BÀI 06: Viết cho giám khảo, viết vì lượt thích: những bệnh mình từng mắc · dán vào bài đăng Blogspot (chế độ HTML) ===== --> <!-- Tiêu đề bài: Viết cho giám khảo, viết vì lượt thích: những bệnh mình từng mắc | Liên kết cố định tuỳ chỉnh: benh-cua-thu-dan-duong-dai-the-trien-lam-xu-thu-va-nguy-menh-de-vuot-co-nhan | Nhãn: Chuyện học thư pháp, Học thư pháp Online --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&amp;text=%E6%9B%B8%E9%81%93%E9%A6%B4&amp;display=swap"> <style>/*Mình kể những bệnh viết chữ mình từng mắc: chữ triển lãm, chữ nghệ xí, chạy theo điểm số và lượt thích, cùng cách mình chấm bài trong lớp học thư pháp*/ #cht{--giay:#f4eee2;--giay2:#...
Đọc thêm

trang/thudao/tai-lieu.html · Bản đang chạy 11/11/2026 (khối tải nhanh từ kho)

<!-- Trang Blogspot (dán ở chế độ HTML, đè toàn bộ mã cũ). Mã trang nằm trong kho jsthanhphong.blogspot.com, file blogspot/dist/tai-lieu.min.js (thay cho GitHub + jsdelivr từ 10/11/2026; bản chuyển sang là a7d6c97). Trang luôn tải bản mới nhất của file trong kho: muốn cập nhật chỉ cần lưu bản mới vào kho, không phải sửa trang này. Không xuống dòng bên trong thẻ script. --> <link rel="preconnect" href="https://jsthanhphong.blogspot.com"><link rel="preconnect" href="https://docs.google.com"><link rel="preconnect" href="https://script.google.com"> <div id="tdp-tai-lieu" style="font:18px/1.6 Arial,sans-serif;padding:24px 12px;text-align:center"><p style="margin:0 0 8px"><b>Kho Tài liệu Thanh Phong Thư Môn</b> – Thư Đạo.</p><p style="margin:0;color:#765344">Đang tải trang, vui lòng đợi…</p></div> <script>(function(w...
Đọc thêm