body {
   color: #777777;
  font-family: "arial",arial;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.625em;
  position: relative;
 
}
    /*https://clippy.fullstack.edu.vn/ 
        https://thietkeonline.com.vn/blog/lam-chu-nhap-nhay-css-animation.17
    https://itviec.com/blog/animation-css/*/
                            @-webkit-keyframes my {
                            0% { color: #F8CD0A; }
                            50% { color: #fff; }
                            100% { color: #F8CD0A; }
                            }
                        
                            @-webkit-keyframes bgbl {
                            0% { color:azure; }
                            50% { color:chartreuse; }
                            100% { color:yellow; }
                            }
                             @-webkit-keyframes bgwh {
                            0% { color:blue; }
                            50% { color:coral; }
                            100% { color:darkred; }
                            }
                                    .text-animation {
                                    background:#3d3d3d;
                                    font-size:12px;
                                    font-weight:bold;
                                    -webkit-animation: bgwwh 700ms infinite;
                                    -moz-animation: bgwwh 700ms infinite;
                                    -o-animation: bgwwh 700ms infinite;
                                    animation: bgwwh 700ms infinite;
                                    }
                                    .text-animation-TTMoi {
                                    background:red;
                                    font-size:12px;
                                    font-weight:bold;
                                    -webkit-animation: my 700ms infinite;
                                    -moz-animation: my 700ms infinite;
                                    -o-animation: my 700ms infinite;
                                    animation: my 700ms infinite;
                                    }
                                  .text-animation-title-bgbl {
                                    /*background:#ffffff;*/
                                    /*font-size:12px;*/
                                    font-weight:bold;
                                    -webkit-animation: bgbl 700ms infinite;
                                    -moz-animation: bgbl 700ms infinite;
                                    -o-animation: bgbl 700ms infinite;
                                    animation: bgbl 700ms infinite;
                                    }  
                                   .text-animation-title-bgwh {
                                    /*background:#ffffff;*/
                                    /*font-size:12px;*/
                                    font-weight:bold;
                                    -webkit-animation: bgwh 700ms infinite;
                                    -moz-animation: bgwh 700ms infinite;
                                    -o-animation: bgwh 700ms infinite;
                                    animation: bgwh 700ms infinite;
                                    }    
     @-webkit-keyframes bgsao {
                            0% {  background-color:blue; }
                            50% {  background-color:coral; }
                            100% {  background-color:darkred; }
                            }
                                    .sao6canh {
                                    color:yellow;
                                    text-align:center;
                                    background-color:red;
                                   
                                    clip-path: polygon(21% 46%, 12% 20%, 47% 32%, 88% 0, 72% 40%, 100% 49%, 77% 66%, 89% 99%, 53% 81%, 21% 100%, 28% 71%, 0 68%);
                                         -webkit-animation: bgsao 700ms infinite;
                                    -moz-animation: bgsao 700ms infinite;
                                    -o-animation: bgsao 700ms infinite;
                                    animation: bgsao 700ms infinite;                             
                                        }
                                    .sao8canh {
                                    color:yellow;
                                    text-align:center;
                                    background-color:red;
                                    font-size:12px;
                                    clip-path: polygon(90% 31%, 100% 46%, 88% 63%, 88% 83%, 67% 79%, 53% 96%, 37% 82%, 1% 93%, 16% 67%, 0 60%, 17% 43%, 12% 18%, 37% 24%, 50% 4%, 67% 19%, 99% 7%);
                                         -webkit-animation: bgsao 700ms infinite;
                                    -moz-animation: bgsao 700ms infinite;
                                    -o-animation: bgsao 700ms infinite;
                                    animation: bgsao 700ms infinite;                             
                                        }
     
        /*===========================*/
        * {
            box-sizing: border-box;
        }

        /*body {
            background-color:lightgrey;
            font-family: Arial, Helvetica, sans-serif;
             color:black;
        }*/
 

        /* Style the header */
        .npd-header {
            background-color:black;
            /*https://bennettfeely.com/clippy/*/
            /*background-image: url(/images/img2025/TraiTimThienHa2.png);*/
             /*background-image: -webkit-gradient(linear, 10% 0, 50% 80%, from(white), to(lightgray));*/
            padding: 10px;
            text-align: center;
            font-size: 25px;            
            color:#fff
        }

        /* Create three equal columns that floats next to each other */
        .column {
            float: left;
            width: 20%;
            padding: 2px;
            height:960px;
            min-width:360px;
           /* height: 100%; /* Should be removed. Only for demonstration */
        }
           .cell-column {
            float: left;
            width: 50%;
            padding: 10px;
            /*height:800px;*/
            min-width:320px;
           /* height: 100%; /* Should be removed. Only for demonstration */
        }
        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Style the footer */
        .footer {
            background-color: #f1f1f1;
            padding: 0px;
            text-align: center;
            opacity:0.85;
        }

        /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
        @media (max-width: 800px) {
            .column {
                width: 100%;
            }
        }
        .NPD-group-01 {
        background-color:ghostwhite;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     
        margin:5px;
        padding: 5px;
        box-shadow: 2px 2px   lightgray;
        break-inside: avoid-column;   

        }
        .NPD-group-01-1 {       
        border-radius: 8px;       
       font-weight:bold;      
        margin:2px;
        padding: 2px;
        box-shadow: 2px 2px   lightgray;
        break-inside: avoid-column;      
      
        }
       
         .NPD-Colum-Container2{
     column-count:2;
     column-width: 100px;   
     column-fill: balance;
     /*column-gap: 20px;*/
      
    }
        .NPD-group-01-1  img{
              display: block;  
                margin-left: auto;  
                margin-right: auto; 
        }  
         
        .NPD-group-01-1  a{
               text-align:center;
        }    
       .NPD-group-01-1 a:hover{
            opacity:0.5;
          }
           .NPD-group-01-2 {
        background-color:white;
        border-radius: 8px;
        box-shadow: 2px 2px   lightgray;
        color:black;
        font-size:12px;
        /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
        height:130px;
        /*column-gap:normal;*/
        margin:5px;
        padding: 2px;
        /*box-shadow: 2px 2px   darkslategrey;*/
        break-inside: avoid-column;
         /*background-image: -webkit-gradient(linear, 10% 0, 50% 80%, from(lightgray), to(darkgray));*/
    text-align:center;
        }
            .NPD-group-01-3 {
        background-color:white;
        border-radius: 8px;
        box-shadow: 2px 2px   lightgray;
        color:black;
        font-size:12px;       
        height:240px;       
        margin:5px;
        padding: 2px;       
        break-inside: avoid-column;        
    margin-top:10px;
    text-align:center;
        }
           /*====================================*/
 .npd-title {
 background-color:darkblue;
 height:30px;
  width:100%;
  border-radius:7px;
  color:white;
  padding:5px;
   
}
  .npd-title-detail {

 background-color:white;
 height:20px;
  width:100%;
  border-radius:5px;
  color:black;
 line-height:15px;
 padding:0px;
 vertical-align:middle;
}
        .NPD-group-01-2 img {
            /*float:left;*/
            height:100px; width:80%; border-radius:10px;
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
        .NPD-group-01-2 a{
            text-align:center;
        }
        .NPD-group-01-2 a:hover{
            opacity:0.5;
          }
        .NPD-group-01-3 img {
            float:none;
            height:180px;
             width:120px; 
           
           margin-top:5px;
           margin-bottom:5px;                   
           box-shadow: 4px 6px   brown;

           display: block;
            margin-left: auto;
            margin-right: auto;
            
        }
         
       

          .NPD-group-01-3 a{
            text-align:center;  
          }
          .NPD-group-01-3 a:hover{
           opacity:0.5;
            }

 .npd-tags-list {
   height:20px;
 padding-right:30px;
  padding-left:10px;
  text-align:left;
   
}
 /*==============================================*/
  .npd-tags-list li {
  /*display: inline-block;*/ 
    border-bottom-style:groove;
    border-color:gray;
  color: #fff;
  padding: 4px 10px;
  font-weight: 300;
  margin:2px;
  padding-left:10px;
  border-radius:5px;
  width:100%;
  

}

    .npd-tags-list li a {
      color: blue;
    }
    .npd-tags-list li:hover {
      color: blue;
      background-color:coral;
    }
     .npd-tags-list li a:hover {
      color: blue;
       background-color:coral;
    }
     .npd-tags-list a li:hover {
      color: red;
       background-color:coral;
    }
 .npd-tags {
height:25px;
 padding-right:30px;
  padding-left:10px;
  text-align:left;
}

 .npd-tags-sm{
height:75px;
 padding-right:30px;
  padding-left:10px;
 }

  .npd-tags-sm li {
  display: inline-block;
background-color:brown;
border-bottom-style:groove;
border-color:gray;
  color: #fff;
  padding: 20px 10px;
  font-weight: 300;
  /*margin:0px;
  padding-left:0px;*/
 
  width:100%;
  border-radius:40px;
  

}
 
  .npd-tags-sm li a {
      color: red;                  
        font-size:20px;
        font-weight:bold;
        -webkit-animation: my 700ms infinite;
        -moz-animation: my 700ms infinite;
        -o-animation: my 700ms infinite;
        animation: my 700ms infinite;
    }
    .npd-tags-sm li:hover {
      color: blue;
      background-color:coral;
    }
     .npd-tags-sm li a:hover {
      color: blue;
    }
/*======================================================*/
.npd-tags-title{
height:75px;
 padding-right:30px;
  padding-left:10px;
  margin:5px;
  /*clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);*/
 }
  .npd-tags-title li {
  display: inline-block;
background-color:brown;
border-bottom-style:groove;
border-color:gray;
  color: #fff;
  /*padding: 10px 10px;*/
  font-weight: 300;
  /*margin:0px;
  padding-left:0px;*/
 height:70px;
  width:100%;
  border-radius:40px;
  

}
  .npd-tags-title li a {
      color: white;                  
        font-size:20px;
        font-weight:bold;
        /*-webkit-animation: my 700ms infinite;
        -moz-animation: my 700ms infinite;
        -o-animation: my 700ms infinite;
        animation: my 700ms infinite;*/
    }
    .npd-tags-title li:hover {
      color: blue;
      background-color:coral;
    }
     .npd-tags-title li a:hover {
      color: blue;
    }
     /*==============================================*/
  .npd-tags li {
  display: inline-block; 
    border-bottom-style:groove;
    border-color:gray;
  color: #fff;
  padding: 4px 10px;
  font-weight: 300;
  margin:2px;
  padding-left:10px;
  border-radius:5px;
  width:100%;
  

}

    .npd-tags li a {
      color: #fff;
    }
    .npd-tags li:hover {
      color: blue;
      background-color:coral;
    }
     .npd-tags li a:hover {
      color: blue;
       background-color:coral;
    }
     .npd-tags a li:hover {
      color: red;
       background-color:coral;
    }