/* ==========================================================
BÀI HỌC - TIẾNG TRUNG BỎ TÚI
========================================================== */

body{

    background:#f5f7fb;

}

/* ==========================================================
CARD
========================================================== */

.card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.card-header{

    background:#fff;

    border-bottom:1px solid #ececec;

    padding:18px 22px;

}

.card-body{

    padding:22px;

}

/* ==========================================================
BREADCRUMB
========================================================== */

.breadcrumb{

    margin-bottom:25px;

    font-size:15px;

}

.breadcrumb a{

    color:#2563eb;

    text-decoration:none;

}

.breadcrumb a:hover{

    text-decoration:underline;

}

.breadcrumb-item.active{

    color:#555;

}

/* ==========================================================
THÔNG TIN BÀI HỌC
========================================================== */

.lesson-cover{

    width:100%;

    max-width:180px;

    border-radius:16px;

    object-fit:cover;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.lesson-title{

    font-size:34px;

    font-weight:700;

    margin-bottom:15px;

    color:#222;

}

.lesson-description{

    color:#666;

    line-height:1.8;

}

/* ==========================================================
BADGE
========================================================== */

.badge{

    border-radius:30px;

    font-size:14px;

    padding:8px 14px;

}

/* ==========================================================
TOOLBAR
========================================================== */

#searchWord{

    height:48px;

    border-radius:12px;

}

.input-group-text{

    border-radius:12px 0 0 12px;

    background:#fff;

}

#pageSize{

    height:48px;

    border-radius:12px;

}

.form-check{

    margin-top:10px;

}

/* ==========================================================
TABLE
========================================================== */

.table-responsive{

    overflow-x:auto;

}

#tableVocabulary{

    width:100%;

    table-layout:fixed;

    border-collapse:collapse;

    background:#fff;

}

#tableVocabulary thead{

    position:sticky;

    top:0;

    z-index:10;

}

#tableVocabulary thead th{

    background:#f8fafc;

    color:#1f2937;

    font-size:16px;

    font-weight:700;

    text-align:center;

    vertical-align:middle;

    padding:16px 12px;

    border-bottom:2px solid #e5e7eb;

}

#tableVocabulary tbody td{

    padding:14px 12px;

    vertical-align:middle;

    border-bottom:1px solid #eef2f7;

    background:#fff;

}

.word-row{

    transition:.25s;

    cursor:pointer;

}

.word-row:hover{

    background:#eef6ff;

}

.word-row:hover td{

    background:#eef6ff;

}

/* ==========================================================
HANZI
========================================================== */

.hanzi-table{

    font-size:48px;

    font-weight:700;

    color:#d90429;

    text-align:center;

    line-height:1;

    transition:.2s;

    user-select:none;

}

.word-row:hover .hanzi-table{

    transform:scale(1.08);

}

/* ==========================================================
PINYIN
========================================================== */

.pinyin{

    font-size:20px;

    font-weight:600;

    color:#2563eb;

}

/* ==========================================================
CĂN GIỮA
========================================================== */

#tableVocabulary td:first-child,

#tableVocabulary td:nth-child(2),

#tableVocabulary td:nth-child(6),

#tableVocabulary td:nth-child(7){

    text-align:center;

}

/* ==========================================================
BUTTON
========================================================== */

.btn-sound,

.btn-detail{

    width:42px;

    height:42px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    transition:.25s;

}

.btn-sound{

    background:#fff;

    border:1px solid #bfdbfe;

    color:#2563eb;

}

.btn-sound:hover{

    background:#2563eb;

    color:#fff;

}

.btn-detail{

    background:#fff;

    border:1px solid #86efac;

    color:#16a34a;

}

.btn-detail:hover{

    background:#16a34a;

    color:#fff;

}

/* ==========================================================
BADGE LOẠI TỪ
========================================================== */

.badge-word{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}

.badge-pronoun{

    background:#DBEAFE;

    color:#2563EB;

}

.badge-noun{

    background:#FEE2E2;

    color:#DC2626;

}

.badge-verb{

    background:#FEF3C7;

    color:#D97706;

}

.badge-adjective{

    background:#DCFCE7;

    color:#16A34A;

}

.badge-particle{

    background:#EDE9FE;

    color:#7C3AED;

}

.badge-adverb{

    background:#E0F2FE;

    color:#0284C7;

}

.badge-preposition{

    background:#D1FAE5;

    color:#059669;

}

.badge-conjunction{

    background:#FCE7F3;

    color:#DB2777;

}

.badge-interjection{

    background:#FEF9C3;

    color:#CA8A04;

}

.badge-measure{

    background:#F3E8FF;

    color:#9333EA;

}

.badge-number{

    background:#E5E7EB;

    color:#374151;

}

.badge-secondary{

    background:#E5E7EB;

    color:#374151;

}

/* ==========================================================
MODAL
========================================================== */

.modal-content{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.modal-header{

    padding:18px 24px;

}

.modal-body{

    padding:30px;

}

.modal-footer{

    padding:18px 24px;

}

.hanzi-modal{

    font-size:110px;

    font-weight:700;

    color:#DC2626;

    line-height:1;

}

#modalPinyin{

    font-size:30px;

    color:#2563EB;

    font-weight:600;

}

#modalMeaning{

    font-size:28px;

    color:#16A34A;

    font-weight:600;

}

#modalExampleHan{

    font-size:42px;

    color:#DC2626;

    line-height:1.5;

}

#modalExamplePinyin{

    font-size:24px;

    color:#2563EB;

}

#modalExampleMeaning{

    font-size:20px;

    color:#374151;

    line-height:1.8;

}

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

@media(max-width:992px){

    .lesson-title{

        font-size:28px;

    }

    .hanzi-table{

        font-size:40px;

    }

    .hanzi-modal{

        font-size:80px;

    }

}

@media(max-width:768px){

    .card-body{

        padding:16px;

    }

    #tableVocabulary{

        min-width:900px;

    }

    .hanzi-table{

        font-size:34px;

    }

    .pinyin{

        font-size:17px;

    }

    .hanzi-modal{

        font-size:64px;

    }

    #modalExampleHan{

        font-size:30px;

    }

}

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

.word-row{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(5px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
WIDTH COLUMN
========================== */

.col-stt{
    width:60px;
}

.col-han{
    width:130px;
}

.col-pinyin{
    width:180px;
}

.col-type{
    width:180px;
}

.col-meaning{
    width:auto;
}

.col-sound{
    width:90px;
}

.col-detail{
    width:90px;
}