@media (min-width: 320px) and (max-width: 768px) {

    @font-face {
    font-family: MyriadPro;
    src: url('../fonts/MyriadPro-It.ttf') format('truetype');
}
@font-face {
    font-family: MyriadPro;
    src: url('../fonts/MyriadPro-Bold.ttf') format('truetype');
}
@font-face {
    font-family: MyriadPro;
    src: url('../fonts/MyriadPro-Regular.ttf') format('truetype');
}

    body{
         font-family: MyriadPro;
         background-color: #072332;
    }
    .danh-sach-game {
        padding-right: 15px;
    }
    .article-relaed {
        display: unset; 
        grid-auto-flow: unset;
        -webkit-grid-auto-flow: unset;
        grid-template-columns: unset;
        -webkit-grid-template-columns: unset;
    }
    .content-subgame-2 {
        width: 70%;
        height: 160px;
    }
    .content-subgame-3 {
        width: 100%;
        height: 160px;
    }
    .tin-tuc-lien-quan {
        width: 100%;
        padding: 0px; 
    }
    .logo {
        right: 0px;
        top: 0px;
    }

        .logo img {
            width: 50px;
        }



    .footer > .container > div {
        display: unset;
        /* grid-auto-flow: row; */
        /* grid-template-rows: auto auto auto; */
        /* grid-template-columns: unset; */
    }
    .container {
        padding: unset;
        height: 100%;
        float: left;
    }
    .panel-top,.panel-bottom {
        margin: unset;
    }
    .bg {
        background-color: transparent;
        padding: 5px;
    }
    .thumb-tin-tuc {
        width: 100%;
        display: inline-block;
    }
    .content-tin-tuc {
        display: inline-block;
        width: 100%;
        position: relative;
        margin-left: unset;
        text-align: justify;
    }
    .content-tin-tuc .title-tin-tuc {
        font-size: 18px;
    }
    .footer {
        height: 100%;
        background-color: #084C74;
        width: 100%;
        float: left;
    }
    .footer > .container > div p {
        color: #fff;
        font-size: 15px;
        font-weight: unset;
        line-height: 20px;
        margin-bottom: 0px;
        margin-top: 0;
        font-style: italic;
    }
    .footer > .container > div div {
        /* margin: auto; */
    }
    .wrap-sliderbar {
        height: 225px;
        background-color: #000;
    }
    .wrap-sliderbar img {
        width: 100%;
        height: 100%;
    }
    div[data-wrap="tin-tuc"] .panel-top .title  {
        /*height: auto;*/
         background-color: unset; 
        width: 100%;
        color: #f8f8f8;
        font-weight: bold;
         padding: 5px 5px; 
        font-size: 18px;
         text-shadow: unset; 
    }
    div[data-wrap="tin-tuc"] .panel-bottom .title  {
        height: 35px;
         background-color: transparent; 
        width: auto;
        border-width: 1px 0px;
        border-style: solid;
        border-color: #3de1ff;
        color: #fff;
        font-weight: unset;
        padding: 5px 5px;
        font-size: 18px;
        margin: 0px 5px 0px 5px;
        /* text-shadow: black 0.1em 0.1em 0.2em; */
    }
    div[data-wrap="tin-tuc"] .title p  {
        width: 100%;
        color: #ddd;
        font-weight: unset;
        padding: 5px 5px;
        font-size: 15px;
        text-shadow: unset;
    }
    .f-320-left {
        float: left;
    }
    .tin-tuc-lien-quan {
        width: auto;
        margin: 0px 10px;
        display: inline-block;
        /* margin: unset; */
        color: #fff;
    
    }
    .title-lq {
        font-size: 14px;
        color: #fff;
    }
    .bg-tin-tuc img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .ico-game {
        width: 16.3%;
        margin: 5px;
        display: inline-block;
        transition: all 0.3s ease-out 0s;
    }
    .title h1,.title h2 {
        font-size: 20px;
    }
    
        .description{
    color: aliceblue;
    padding: 10px;
    margin: auto;
    text-align: justify;
    font-size: 14px;
    /* line-height: 2.5vw; */
    }

    .navbar{
           height: 45px;
           z-index: 10;
           width: 100%;
           position: fixed;
           padding-right: 0px;
           padding-left: 0px;
           padding-top: 0;
           padding-bottom: 0;
           /* background-color: #0F72AD; */
    }
        .top{
           /* height: 0; */
    }

    .a-footer{
            height: 30px;
            float: right;
            width: 30px;
            margin-left: 5px;
    }

    .swiper-pagination-bullet {
        font-weight:bold;
      color:black;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      background: #1BAFED;
      
    }
    .swiper-pagination-bullet-active {
      background: #1BAFED;
    }

    .swiper-pagination{
    bottom: 80px;
    }
    
    .swiper-slide {
    background-repeat:   no-repeat;
    background-position: center center;
    }
    .image-slide{
  width: 100%;
                        top: 0;
                        position: absolute;
                        height: 70%;
    }

    .div-slide{
        padding-top: 10%;
        position: absolute;
        bottom: 15px;
        height: 30%;
        color: aliceblue;
        margin: auto;
        text-align: justify;
        font-size: 3.5vw;
    }

    .list-game{
        padding-left: 10px;
        margin: 0;
    }
 .list-game li{height: 70px;}
 
        .list-game img{
        width: 16%;
        float:left;
        margin-right: 10px;
    }

    .list-game p{
        margin-top: 5%;
        text-transform: uppercase;
    }
	
	nav > div.container{
		padding-top: 9px;
	}

}

@media (min-width: 425px) {
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    .thumb-tin-tuc img {
        height: 124px;
    }
    .pdr0 {
        padding-right: 0px;
    }
    .content-subgame-2 {
        width: 45%;
        height: 160px;
    }
    .content-subgame-3 {
        width: 65%;
        height: 160px;
    }
	
	nav > div.container{
		padding-top: 9px;
	}
}

@media (min-width: 992px) {
	nav > div.container{
		padding-top: 9px;
	}
	
    .danh-sach-game {
        padding-right: 0px;
    }

    .logo {
        right: unset;
        top: 10px;
    }

        .logo img {
            width: 98px;
        }
}

@media (min-width: 1200px) {
}