*{
    margin: 0;
    padding: 0;
    /* font-family: 'Roboto','Arial','Helvetica','OpenSans'; */
    font-family: 'Muli';
}
#wrapper {
  width: 100%;
  margin: auto;
}
#backtop {
  width: 50px;
  height: 50px;
  background: tomato;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: fixed;
  bottom: 40px;
  right: 20px;
  cursor: pointer;
  z-index: 5;
}
.buttons {
  margin-top: -40px;
  margin-bottom: 20px;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

.buttons button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #555;
  transform: 0.5s;
}

.buttons button:hover {
  background-color: #bac383;
}
#prev-button {
  margin-right: -20px;
}
.image-group {
  display: flex;
  justify-content: center;
}
.hidden {
  display: none;
}

.image-group button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 24px;
  padding: 2px;

}

.image-group button:hover {
  background-color: #ccc;
}

.image-group img {
  margin: 10px;
  object-fit: cover;
  border-radius: 10px;
}
.TQ{
  width: 100%;
  background-color: rgb(234, 228, 221);
  /* background:linear-gradient(180deg,#A5CAD2,#07b5bb,#0a1a44); */
}
.TQ1{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(85, 78, 78, 0.7),rgba(3, 4, 4, 0.7)), url(Image_TTTBB/429575811_122134719950051781_4642329617220679025_n-0721261.webp) ;   
    background-position: center;
    background-size: cover;
    position: relative;
}
.imglogo{
    border-radius: 50%;
    width:80px ; height: auto;
}
.header nav {
    display: flex;
    padding: 2% 6% 1%;
    justify-content: space-between;
    align-items: center;
    background-color:rgba(141,164,169,0.6);
}
.nav-links{
    flex: 1;
    text-align: center;
    font-size: large;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #ffff;
    text-decoration: none;
    font-size: 23px;
    transition: 0.3s;
}
.nav-links ul li a:hover{
    color:  #003056;
    size: 20px;
   
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #003056;
    display: block;
    margin:auto;
    transition: 0.3s;
}
.nav-links ul li:hover::after{
    width:100%;

}
.headericon ul {
    list-style: none;
    display: inline-block;
    justify-content: space-between;
} 
.headericon ul li{
    justify-content: space-between;
    position: relative;
    padding: 20px;
}
.headericon ul li a i{
    color: #ffff;
    transition: 0.5s;
}
.headericon ul li a i:hover{
    color: #003056;
}
.text-box{
    font-size: 60px;
    color: #ffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-30%);
    text-align: center;
}
nav .fa-regular{
    display: none;
}
nav .fa-bars{
    display: none;
}


.Footer{
  background: linear-gradient(#276F78,#003366);
  width: 100%;
  text-align: center;
  padding: 5px 0;
  color: #fff;
  position: relative;
  overflow: hidden;

}
.Footer h1{
  font-weight:bolder;
  font-size: 2.8em;
  font-family:'Tahoma';
 
}
.Footer h4{
  font-weight: lighter;
  font-size: 1.5em;
  font-family: Verdana;
  margin-top: 10px;
}
.Footer div{
  margin-top: 10px;
  font-weight: lighter;
  font-size: 1em;
  font-family: Verdana;
  
  
}
.Footer div ul{
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin-left: 100px;
  margin-right: 100px;

}
.Footer div ul li h3{
  padding: 10px;
  
}
.Footer  div  button {
  border:10px;
  padding: 10px 15px;
  font: 1.4em sans-serif;
  /* margin-top: 10px; */
  background-color: rgba(0,0, 0, 0.5);
  color: #fff;
  /* margin-left: 10px; */
  border-radius: 5px;
  margin-right: 20px;
  
}
.Footer  div  button a{
  text-decoration: none;
  color: #fff;
}
.Footer  div  button a:hover{
  color: #00B0CC;

}
.flex{
  display: flex;
  justify-content: flex-start;
  z-index: 4;

}
#animation{
  width: 30%;
  z-index: 4;
}
#animation img{
  width: 150%;
  animation: nudge 5s linear infinite alternate;
  animation-direction: alternate;
}
.Info{
  width: 70%;
  margin: 0;
  z-index: 4;
}
.Info ul div li {
 text-align: left;
 margin-top: 10px;
 cursor: pointer;

}
.text1 :hover{
  color: #00B0CC;
}
.text1 a:hover{
  color: #00B0CC;
}

.Info ul div li a{
  text-decoration: none;
  color: #fff;
}

.text{
  font-size: 1.8rem;
}
@keyframes nudge{
  0%,100%{
      transform: translateY(0);
  }
  50%{
      transform: translateY(50px);
  }
}
#star-container {
  position: relative;
}
.snowflake {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url('image_gioithieu/SPIT\ FRONT-\ END\ \(2\).png');
  background-size: 30px 30px;
  background-repeat: no-repeat;
  animation: snowfall 15s infinite;
  z-index: 1;
  left: 0;
  right: 10%
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200px);
  }
}
.gachchan{
    background-color: #00B0CC;
    height: 1.7px;
    width: 20%;
    margin: 10px ;
    margin-left: 40%;
    margin-right: auto;
    margin-top: 20px;
}

.TinTuc {
    margin-left: 4%;
    margin-top: 33px;
    margin-right: 4%;
    display: inline-block;
    margin-bottom: 40px;
}

.first {
    display: flex;
    justify-content: space-between;
}
.TinTuc .main{
    width: 60%;
    float: left;
}
.TinTuc .main img{
    margin-top: 20px;
    width:100%;
    margin-bottom: 20px;
}

 .title h6{
    font-weight:lighter;
    font: 1em;
    color: #003056;
}
.title h1{
    margin-bottom: 25px;
    font-weight: 900;
    font: 2em;
    color: #003056;
}
.TinTuc .content h4 {
    font-weight:bolder;
    font: 2em;
    margin-left: 20px;
    margin-bottom: 10px;
}
.TinTuc .content h6 {
    font: 0.7em;
    margin-left: 40px;
    margin-bottom: 20px;
}
.TinTuc .content p {
    font: 1em ;
    margin-left: 20px;
}
.select {
    margin-bottom: 20px;
    display: flex;
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 10px; 
    background-color: #f0f0f0; 
  }
  
  .select p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 20px;
    color: #333; 
  }
  
  #category-select {
    width: 70%;
    height: 40px;
    padding: 10px;
    font-size: 16px;
    border-color:#000;
    border-radius: 10px;
    background-color: #f0f0f0; 
    color: #333; 
    cursor: pointer;
  }
  
  .category-links {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  
  .category-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }
  
  .category-links li {
    margin-right: 20px;
  }
  
  .category-links a {
    color: #333; 
    text-decoration: none;
    transition: 0.3s;
  }
  
  .category-links a:hover {
    color: #003056; /* thêm màu sắc cho chữ khi di chuột qua */
  }
  #latest-news {
    overflow-y: auto;
    max-height: 1000px; /* adjust the height to your liking */
  }
  #latest-news::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  #latest-news::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
  }
  
  #latest-news::-webkit-scrollbar-track {
    background-color: #f0f0f0;
  }
  .tt-inf {
    padding: 10px;
  }
.btn {
    margin: 12px;
    padding: 5px 20px;
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
  }
  .btn::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    left: 0;
    top: 0;
    border-radius: 10px;
  }
  /* glow */
  .btn::before {
    content: "";
    background: linear-gradient(
      45deg,
      #FF0000, #FF7300, #FFFB00, #48FF00,
      #00FFD5, #002BFF, #FF00C8, #FF0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height:  calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
  }
  
  @keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
  }
  
  /* hover */
  .btn:hover::before {
    opacity: 1;
  }
  
  .btn:active:after {
    background: transparent;
  }
  
  .btn:active {
    color: #000;
    font-weight: bold;
  }
button a {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.TinTuc .extra{
    margin-top: 20px;
    width: 38%;
    float: right;
}
.extra img{
    width: 90%;
    height: 100%;
    border-radius: 10px 0 0 10px;
    object-fit: cover;
} 
.TinTuc .extra a {
    width: 50%;
}
.new ul {
    list-style: none;
    
}
.new ul li{
    display:inline-flex;  
    margin-bottom: 10px; 
}
.new ul li img {
    object-fit: cover;
}
.TinTuc li:hover, .ThongBao li:hover {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
.TinTuc .new ul li div{ 
    width: 50%;
}

.ThongBao{
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 33px;
    display:inline-block;
}
.ThongBao .main{
    width: 38%;
    float: left;
}
.ThongBao .main img{
    margin-top: 20px;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
    object-fit:cover;
}
.ThongBao .extra{
    margin-top: 20px;
    width: 60%;
    float: right;
}
.ThongBao .extra a {
    width: 20%;
}
.ThongBao .new ul li div{ 
    width: 75%;
}
.ThongBao .content h6 {
    margin: 20px;
    font-size: larger;
}
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .ThongBaoList {
    display: inline-block;
    padding: 10px;
    background-color: #f7f7f7;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-bottom: 40px;
    justify-content: center;
  }
  .ThongBaoList img {
    height: 50%;
    width: 100%;
    margin-bottom: 10px;
    object-fit:cover;
  }
  
  .ThongBaoList .container {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .ThongBaoList .pagination {
    text-align: center;
    margin: 20px;
    justify-content: center;
  }
  
  .ThongBaoList .pagination button {
    background-color: #337ab7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .ThongBaoList .pagination button:hover {
    background-color: #23527c;
  }
  
  .ThongBaoList .thongbao-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
  }
 
  .ThongBaoList .thongbao-list .thongbao {
    width: 22%;
    height: auto;
    margin: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 8%;
    border-bottom-left-radius: 8%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: 0.3s; /* add transition effect */
    position: relative;
  }
  .thongbao {
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .inf {
    margin-bottom: 20px; /* add some space between the text and the button */
  }
  
  .xem-them {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px; /* add some margin to the button */
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0; /* hide the button initially */
    transition: opacity 0.3s; /* add a transition effect */
  }
  
  .thongbao:hover .xem-them {
    opacity: 1; /* show the button on hover */
  }
  
  .xem-them:hover {
    background-color: #ccc;
  }
  
  .xem-them:active {
    background-color: #aaa;
  }
  .ThongBaoList .thongbao-list .thongbao a img {
    border-top-right-radius: 8%;
    border-bottom-left-radius: 8%;
  }
  
  .ThongBaoList .thongbao-list .thongbao:hover {
    transform: scale(1.05); /* scale up on hover */
    background-color: #f7f7f7; /* change background color on hover */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* add deeper shadow on hover */
  }
  
  
  .ThongBaoList .thongbao-list .thongbao h3 {
    font-size: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
  }
  
  .ThongBaoList .thongbao-list .thongbao p {
    font-size: 10px;
    color: #666;
    margin-left: 10px;
  }

.media-scroller {
  --_spacer: var(--size-3);
  display: grid;
  gap: var(--_spacer);
  grid-auto-flow: column;
  grid-auto-columns: 21%;

  padding: 0 var(--_spacer) var(--_spacer);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.media-scroller--with-groups {
  grid-auto-columns: 80%;
}

.media-group {
  display: grid;
  gap: var(--_spacer);
  grid-auto-flow: column;
}

.media-element {
  display: grid;
  grid-template-rows: min-content;
  gap: var(--_spacer);
  padding: var(--_spacer);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

.media-element > img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.snaps-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline > * {
  scroll-snap-align: start;
}

/* general styling */

.container {
  inline-size: min(100% - 4rem, 70rem);
  margin-inline: auto;
}

.flow {
  display: grid;
  gap: var(--size-3);
}

.page-header {
  padding-block: var(--size-9);
  margin-block-end: var(--size-9);
  background: var(--gradient-16);
  color: var(--gray-0);
  box-shadow: var(--shadow-2);
}

.page-title {
  font-size: var(--font-size-fluid-3);
}

.page-subtitle {
  font-size: var(--font-size-fluid-1);
}

.section-title {
  padding-inline-start: var(--size-6);
  margin-block: var(--size-9) var(--size-3);
}
.ThongBaoList .pagination .bold {
  font-weight: bold;
  background-color: #23527c;
}


@media(max-width: 1399px){
  .text-box{
    font-size: 60px;
    top: 50%;
    left: 40%;
    transform: translate(-30%,-30%);
    text-align: center;
}

}
@media(max-width: 1199px) {
  #backtop {
    right: 220px;
  }

  .text-box{
    font-size: 50px;
  }
  .nav-links ul li{
    display: block;
}
.nav-links ul li a{
    font-size: 20px;
    
}
.nav-links{
    position:absolute;
    background-color: rgb(157, 176, 180);
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
}
nav .fa-regular{
    display: block;
    color: #003056;
    padding: 10px 0px 1px;
    font-size: large;
    cursor: pointer;
}
nav .fa-bars{
    display: block;
}
.nav-links ul{
    padding: 20px;
}
.nav-links ul li a:hover{
    color:  #003056;
    size: 20px;
   
}
.nav-links i {
    padding: 20px;
}
  .Footer div ul{
    display: block;
    margin-left: 10px;
    margin-right: 50px;
  }
  .Info{
      display: block;
      width: 100%;
  }
  .flex{
      float: left;
      margin-bottom: 10px;
  }
  #animation{
      width: 100%;
  }
  #animation img{
      width: 120%;
      animation: nudge 5s linear infinite alternate;
      animation-direction: alternate;
      margin-left: 20px;
      margin-top: -20px;
      
  }
}
@media(max-width: 991px) {
  .text-box{
    font-size: 35px;
  }
  .TinTuc .main{
    width: 100%;
}
.TinTuc .title {
    width: 100%;
}
.TinTuc .extra{
  margin-top: 20px;
  width: 100%;
}
.ThongBao{
  margin-left: 4%;
  margin-top: 33px;
  display:inline-block;
  margin-right: 4%;
}
.ThongBao .main{
  width: 100%;
}
.ThongBao .extra{
  margin-top: 20px;
  width: 100%;
}
.ThongBao .extra a {
  width: 50%;
}
.ThongBao .new ul li div{ 
  width: 65%;
}
.ThongBaoList .thongbao-list .thongbao {
width: 40%;
}
}
 @media(max-width: 700px){

    .header{
        min-height: 28vh;
    }        
  
    .text-box{
      font-size: 25px;
  }
    .nav-links ul li a{
        font-size: 15px;
        
    }
    .nav-links{
        width: 200px;
        right: -200px;
    }

    .imglogo{
        border-radius: 50%;
        width:50px ; height: auto;
    }
    .flex{
      display: block;
  }
    #animation img{
        width: 110%;
        animation: nudge 5s linear infinite alternate;
        animation-direction: alternate;
        margin-left: 20px;
        margin-top: -20px;
        
    }
    .Footer h4{
        font-size: 20px;
    }
    .Footer h1{
        font-size: 25px;
    }

    .first {
        display: block;
    }
    .title h6{
      font: 1em;
    }
    .title h1{
        font-weight: 900;
        font: 3em;
    }
    .TinTuc .content h4 {
        font-weight: 600;
    }
    .TinTuc .content h6 {
        font: 0.3em;
    }
    .TinTuc .content p {
        font: 0.5em ;
        margin-left: 20px;
    }
      .TinTuc .content button {
          padding: 5px 10px;
          font: 10px;
      }
    .select p {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 10px;
      margin-right: 10px;
      color: #333; 
    }
    .ThongBao{
        margin-left: 4%;
        margin-top: 33px;
        display:inline-block;
        margin-right: 4%;
    }
    .ThongBao .main{
        width: 100%;
    }
    .ThongBao .extra{
        margin-top: 20px;
        width: 100%;
    }
    .ThongBao .extra a {
        width: 50%;
    }
    .ThongBao .new ul li div{ 
        width: 65%;
    }
    .ThongBaoList .thongbao-list .thongbao {
      width: 40%;
    }
    .ThongBaoList .thongbao-list .thongbao h3 {
      font-size:10px;
    }
    
    .ThongBaoList .thongbao-list .thongbao p {
      font-size: 8px;
    }
    .thongbao .btn{
      margin: 0px; /* add some margin to the button */
      padding: 2px 2px;
      
    }
    button a {
      font-size: 10px;
  }
  .ThongBaoList .pagination button {
    padding: 8px 15px;
    font-size: 10px;
  }
  .tt-inf h6 {
    font-size: 12px;
  }
  .tt-inf p {
    font-size: 10px;
  }
  
  
}