/* ==========================================================
BODY
========================================================== */

body{

    background:#f6f8fb;

}

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

.card{

    border-radius:18px;

}

.card-header{

    background:#fff;

    border-bottom:1px solid #ececec;

}

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

#tableVocabulary{

    border-collapse:separate;

    border-spacing:0;

}

#tableVocabulary thead{

    position:sticky;

    top:0;

    z-index:20;

    background:#fff;

}

#tableVocabulary th{

    background:#f8fafc;

    font-size:17px;

    font-weight:700;

    color:#333;

    padding:16px;

    text-align:center;

}

#tableVocabulary td{

    padding:18px 15px;

    vertical-align:middle;

}

.word-row{

    transition:.25s;

    cursor:pointer;

}

.word-row:hover{

    background:#eef7ff;

}

.word-row:hover .hanzi-table{

    transform:scale(1.08);

}

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

.hanzi-table{

    font-size:46px;

    font-weight:bold;

    color:#d90429;

    transition:.25s;

}

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

.pinyin{

    font-size:22px;

    color:#2563eb;

    font-weight:500;

}

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

.btn-sound{

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid #dbeafe;

    background:#fff;

    color:#2563eb;

    transition:.25s;

}

.btn-sound:hover{

    background:#2563eb;

    color:#fff;

}

.btn-detail{

    width:42px;

    height:42px;

    border-radius:12px;

    border:1px solid #22c55e;

    background:#fff;

    color:#16a34a;

    transition:.25s;

}

.btn-detail:hover{

    background:#16a34a;

    color:#fff;

}

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

.badge-word{

    min-width:90px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:30px;

    padding:8px 15px;

    font-size:14px;

    font-weight:600;

}

/* Đại từ */

.badge-pronoun{

    background:#DBEAFE;

    color:#2563EB;

}

/* Danh từ */

.badge-noun{

    background:#FEE2E2;

    color:#DC2626;

}

/* Động từ */

.badge-verb{

    background:#FEF3C7;

    color:#D97706;

}

/* Tính từ */

.badge-adjective{

    background:#DCFCE7;

    color:#16A34A;

}

/* Trợ từ */

.badge-particle{

    background:#EDE9FE;

    color:#7C3AED;

}

/* Phó từ */

.badge-adverb{

    background:#E0F2FE;

    color:#0284C7;

}

/* Giới từ */

.badge-preposition{

    background:#D1FAE5;

    color:#059669;

}

/* Liên từ */

.badge-conjunction{

    background:#FCE7F3;

    color:#DB2777;

}

/* Thán từ */

.badge-interjection{

    background:#FEF9C3;

    color:#CA8A04;

}

/* Lượng từ */

.badge-measure{

    background:#F3E8FF;

    color:#9333EA;

}

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

.modal-content{

    border-radius:24px;

}

.hanzi-modal{

    font-size:120px;

    color:#DC2626;

    font-weight:bold;

}

.example-box{

    background:#f8fafc;

    border-left:5px solid #3b82f6;

    border-radius:12px;

    padding:20px;

}

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

@media(max-width:992px){

.hanzi-table{

    font-size:36px;

}

.pinyin{

    font-size:18px;

}

}

@media(max-width:768px){

#tableVocabulary{

    min-width:900px;

}

.card-body{

    padding:15px;

}

.hanzi-modal{

    font-size:70px;

}

}