* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

.color_bg_default{
    background-color: #4bcffa;
 }

.line::after{
   content: "";
   display: block;
   width: 100%;
   height: 0.2rem;
   background-color: #fff;
   margin: 0.5rem;
}

.catelogy-list {
   padding: 0 0 6px 0;
   list-style: none;
}

.catelogy-item__active .catelogy-item__link {
   color: #f716d9;
}

.catelogy-item__active .catelogy-item__link::before {
   content: "";
   top: 50%;
   left: 6px;
   transform: translateY(-50%);
   position: absolute;
   border: 4px solid;
   border-color: transparent transparent transparent red;
}

.catelogy-item__link {
   position: relative;
   text-decoration: none;
   font-size: 1.1rem;
   padding: 4px 16px;
   display: block;
   transition: right linear 0.1s;
   right: 0;
}

.catelogy-item__link:hover {
   right: -4px;
   color: rgb(15, 55, 235);
}


#home_header > h1{
   text-shadow: 3px 2px lightcoral;
   background: linear-gradient(#74b9ff, #fab1a0, #00b894, #a29bfe);
   padding: 10px;
   animation: change_color ease-in-out 4s infinite ;
}

@keyframes change_color {
   0%{
      color: #f716d9;
   }
   40%{
      color: blueviolet;
   }
   40%{
      color: yellow;
   }
}

/* CSS Nội Dung Các Bài */


.post_item{
   margin: 10px;
   text-align: center;   
   border-radius: 10px;   
   border: 1px solid rgb(255, 9, 243);        
   width: 180px;
   height: 200px;
   padding: 0px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.post_item > a{
   text-decoration: none;   
}

.post_item_title{
   text-align: center;
   color: rgb(207, 30, 30);
   font-size: 1rem;
   background: linear-gradient(#f6e58d,#badc58);    
   border-radius: 0px 0px 10px 10px;
   min-height: 100px;
   padding-top: 20px;
}

.post_content > .post_item{
   transition: transform ease 1s;
}

.post_content > .post_item:hover{
   transform: skewX(-5deg);   
}

/* CSS Trang Study bài giảng */
.format_link {   
   position: relative;
   text-decoration: none;   
   padding: 4px;   
   color: #fff;
   transition: right linear 0.1s;
   right: 0;
}

.format_link:hover {
   right: -4px;
   color: rgb(162, 230, 36);
}

#resources ul {   
   list-style: none;
}

.content_img, .title_study, .advice_resources{
   background-color: #34495e;
}

.icon_next img,
.icon_prev img {
    width: 4rem;
}

.advice_resources h5{
   color: #fff;
   font-weight: 700;   
   animation: change_color ease-in-out 10s infinite ;
}

.advice_resources span{
   text-transform: capitalize;
   color: aqua;
   font-size: 1.1rem;
   font-weight: 600;
}