#hocThuMienPhi{width:835px;margin:0 auto;}
#hocThuMienPhi *{margin:0;padding:0;font-size: 14px;}
#hocThuMienPhi ul{list-style:none;padding-left:0}
#hocThuMienPhi .bold{font-weight:700}
@keyframes lucLac{0%,100%{transform:rotate(0deg)}
25%{transform:rotate(15deg)}
50%{transform:rotate(-10deg)}
70%{transform:rotate(5deg)}}
#hocThuMienPhi .listSubject{display:grid;grid-template-columns:repeat(auto-fill,calc(20% - 10px));column-gap:12px;row-gap:12px;margin-bottom:12px}
#hocThuMienPhi .listSubject li{text-align:center;border:1px solid #e1e1e1;padding:5px 0;border-radius:3px;cursor:pointer;transition:all .1s}
#hocThuMienPhi .listSubject li:hover a{color: #fff;}
#hocThuMienPhi .listSubject li.active,#hocThuMienPhi .listSubject li:hover{background:#2a61a3;color:#fff}
#hocThuMienPhi .listSubject li.active a{color: #fff;}
#hocThuMienPhi .listCourse{margin-bottom:12px}
#hocThuMienPhi .listCourse:last-child{margin-bottom:0}
#hocThuMienPhi .listCourse:hover .titleCourse span img{animation:lucLac .6s;}
#hocThuMienPhi .listCourse .titleCourse{padding:12px;background:#dfe8f4;margin-bottom:12px;align-items:center;display: flex;}
#hocThuMienPhi .listCourse .titleCourse span{font-weight:700;color:#0043a8;position:relative}
#hocThuMienPhi .listCourse .titleCourse span img{position:absolute;right:-39px;top:-7px;transform:rotate(0deg);transform-origin:top;width: 29px;}
#hocThuMienPhi .listCourse .wrapListCourse{display:grid;grid-template-columns:repeat(auto-fill,calc(50% - 6px));column-gap:12px;row-gap:12px}
#hocThuMienPhi .listCourse .wrapListCourse .course{box-shadow:0 0 3px 2px #e1e1e1;padding:12px;border-radius:5px}
#hocThuMienPhi .listCourse .wrapListCourse .course .nameTeacherAvatar{display:flex;align-items:center;margin-bottom:16px}
#hocThuMienPhi .listCourse .wrapListCourse .course .nameTeacherAvatar .avatarTeacher{width:75px;height:75px}
#hocThuMienPhi .listCourse .wrapListCourse .course .nameTeacherAvatar .coursePr{margin-left:12px}
#hocThuMienPhi .listCourse .wrapListCourse .course .nameTeacherAvatar .coursePr p span{color:#0043a8}
#hocThuMienPhi .listCourse .wrapListCourse ul li{border-bottom:1px dashed #e1e1e1;margin-bottom:12px;padding-bottom:12px}
#hocThuMienPhi .listCourse .wrapListCourse ul li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
#hocThuMienPhi .listCourse .wrapListCourse ul .titleUnit{margin-bottom:7px;height: 36px;}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch{display:flex;justify-content:space-between}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .time{color:#8d8d8d}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore{text-decoration:none;border:1px solid #008a00;display:block;padding:2px 14px;font-size:14px;overflow:hidden;position:relative}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore span{display:inline-block;position:relative;color:#008a00;}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore::after{content:"";display:block;width:100%;height:100%;background:#008a0096;position:absolute;top:0;left:-100%;transition:all .4s;opacity:0;z-index:0}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore::before{content:"";display:block;width:100%;height:100%;background:#008a0096;position:absolute;top:0;right:-100%;transition:all .4s;opacity:0;z-index:0}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore:hover,#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore:hover span{color:#fff;}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore:hover{border:1px solid #fff;}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore:hover::after{left:0;opacity:1}
#hocThuMienPhi .listCourse .wrapListCourse ul .timeAndBtnWatch .viewMore:hover::before{right:0;opacity:1}