@media (max-width: 2559.98px){
  html, body { font-size: 17px; }
  .item {
        height: calc(100vw / 5);
    }
  .item-content{
    margin: .5rem 0;
  }
  .news-left > .box-news .img{
        width: 100%;
        height: 75%;
    }

    .news-left > .box-news .news-content{
        width: 100%;
        height: 25%;
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 70%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 30%;
    }
}
@media (max-width: 1919.98px){
  html, body { font-size: 16px; }
  .item {
        height: calc(100vw / 4);
    }
  .item-content{
    margin: .5rem 0;
  }
  .news-left > .box-news .img{
        width: 100%;
        height: 75%;
    }

    .news-left > .box-news .news-content{
        width: 100%;
        height: 25%;
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 65%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 35%;
    }
}

@media (max-width: 1599.98px){
  html, body { font-size: 16px; }
  .item {
        height: calc(100vw / 4);
    }
  .item-content{
    margin: .5rem 0;
  }
   .news-left .news-right{
        height: 580px;
        border: 1px solid #000;
    }
    .news-right > .box-news {
        width: calc(50% - 0.5rem);
        height: calc(290px - 0.5rem);
    }
    .news-left > .box-news {
        width: 100%;
        height: 580px;
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 65%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 35%;
    }
}
@media (max-width: 1399.98px) { 
    html, body { font-size: 17px; } 
    .item {
        height: calc(100vw / 4);
    }
    #tcg-pro .item div.img {
        width: 100%;
        height: 70%;
    }
    #tcg-pro .item  .item-content{
        width: 100%;
        height: 30%;
    }
    .news-left .news-right{
        height: 550px;
        border: 1px solid #000;
    }
    .news-right > .box-news {
        width: calc(50% - 0.5rem);
        height: calc(275px - 0.5rem);
    }
    .news-left > .box-news {
        width: 100%;
        height: 550px;
    }
    .news-left > .box-news {
        width: 100%;
        height: 550px;
    }
    .news-left > .box-news .img{
        width: 100%;
        height: 70%;
    }

    .news-left > .box-news .news-content{
        width: 100%;
        height: 30%;
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 60%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 40%;
    }
    .video-wrapper video {
        width: 97.5%;
    }

}
@media (max-width: 1023.98px) { 
    html, body { font-size: 16px; } 
    .item {
        height: calc(100vw / 4);
    }
    .news-left .news-right{
        height: 500px;
        border: 1px solid #000;
    }
    .news-right > .box-news {
        width: calc(50% - 0.5rem);
        height: calc(250px - 0.5rem);
    }
    .news-left > .box-news {
        width: 100%;
        height: 500px;
    }
  
    .news-right > .box-news .img{
        width: 100%;
        height: 60%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 40%;
    }
    .video-wrapper video {
        width: 97.5%;
    }

}
@media (max-width: 991.98px)  { 
    html, body { 
        font-size: 16px; 
    } 
    .item {
        height: calc(100vw / 3);
    }
    #tcg-pro .item  {
        height: calc(100vw / 3);
    }
    #tcg-pro .item div.img {
        width: 100%;
        height: 65%;
    }
    #tcg-pro .item  .item-content{
        width: 100%;
        height: 35%;
    }
    .news-left .news-right{
        height: 550px;
        border: 1px solid #000;
    }
    .news-right > .box-news {
        width: calc(50% - 0.5rem);
        height: calc(275px - 0.5rem);
    }
    .news-left > .box-news {
        width: 100%;
        height: 550px;
    }
    .news-left > .box-news .img{
        width: 100%;
        height: 75%;
    }

    .news-left > .box-news .news-content{
        width: 100%;
        height: 25%;
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 70%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 30%;
    }
 
    
    .item-content h4{
        font-size: clamp(1.5rem, 5vw, 1.75rem);
    }
    .item-content p{
        text-align: justify;
        padding: 0 1rem !important; 
    }
    #zone7 .box-news {
        height: 25rem;
    }
    
}
@media (max-width: 767.98px)  { 

    html, body { 
        font-size: 16px; 
    }
    .item {
        height: calc(100vw / 2);
    }
    .container{
        max-width: calc(100vw - 2rem) !important;
    } 
    #tcg-pro .item  {
        height: calc(100vw / 2);
    }
    #tcg-pro .item div.img {
        width: 100%;
        height: 70%;
    }
    #tcg-pro .item  .item-content{
        width: 100%;
        height: 30%;
    }
}
@media (max-width: 575.98px){
  html, body { font-size: 14px; }
  /* Thu nhỏ heading */
  h1{ font-size: 2.5rem; }
  h2{ font-size: 2rem; }
  h3{ font-size: 1.75rem; }
  h4{ font-size: 1.5rem; }
  h5{ font-size: 1.25rem; }
  h6{ font-size: 1rem; }
.item {
        height: calc(100vw - 2rem);
    }
  .banner-index,
  .banner-index .banner-item {
    height: auto !important;
  }

    #tcg-pro .item  {
        height: calc(100vw - 2rem);
    }
    #tcg-pro .item div.img {
        height: 80%;
    }
    #tcg-pro .item .item-content {
         height: 20%;
    }
    .news-left .news-right{
        border: 1px solid #000;
    }
    .news-right {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .news-left > .box-news {
        width: 100%;
        height: calc(100vw - 2rem);
    }
    .news-left > .box-news div.img{
        width: 100%;
        height: 75%;
    }

    .news-left > .box-news .news-content{
        width: 100%;
        height: 25%;
    }
    /* --- */
    .news-right > .box-news {
        /* width: 100%; */
        height: calc((100vw + 4rem) / 2);
    }
    .news-right > .box-news .img{
        width: 100%;
        height: 67%;
    }
    .news-right > .box-news .news-content{
        width: 100%;
        height: 33%;
    }

    #zone7 .box-news .img{
        height: 65%;
    }
    #zone7 .box-news .news-content{
        height: 35%;
    }
    
    .item div.img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

     .model-item{
        display: flex;
        position: relative;
        height: calc(100vw) !important;
    }
    .model-item .row{
        display: flex;
        position: relative;
        height: calc(100vw) !important;
    }
    .model-item .img{
        height: 100% !important;
    }
    .model-item .img img{
        height: calc(100vw - 4rem) !important;
        width: 100% !important;
    }

    .b-left{
        width: 100%;
    }
    .b-right{
        width: 100%;
    }
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.video-youtube {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
    height: 0;
    overflow: hidden;
    border-radius: 12px; /* optional */
}

.video-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}