/*** Bắt đầu css thích ứng đa màn hình ***/

/* Giao diện Desktops and laptops, hoạt động với các màn hình lớn hơn 769px */

@media (min-width: 769px) {

	/* Css trang trí noel */
    /* .header-wrapper .header-content {
		background-image: url(../../img/holiday/snow.gif) !important;
		background-size: 520px!important;
	}
	.search-main .search-form .search-button, .search-tag .search-form .search-button, .gsc-search-button button {
		background-image: url(../../img/holiday/snow.gif) !important;
		background: #000;
	} */
	/* Kết thúc css trang trí noel */

    /* Css trang trí Pháo hoa */
    /*.header-wrapper .header-content {
        background-image: url(../../img/holiday/phao-hoa-2.gif) !important;
        background-size: 300px!important;
    }
    .search-main .search-form .search-button, .search-tag .search-form .search-button, .gsc-search-button button {
        background-image: url(../../img/holiday/phao-hoa-2.gif) !important;
        background: #000;
        background-size: 120px!important;
    }*/
    /* Kết thúc css trang trí Pháo hoa */
	
	
	/* Bắt đầu hiệu ứng gạch dưới khi rê chuột vào */
	.related-post-new a {
      position: relative;
      text-decoration: none;
    }

    .related-post-new a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: #2d41d7;
      transition: all 0.3s ease;
    }

    .related-post-new a:hover::after {
      left: 0;
      width: 100%;
    }
	/* Kết thúc hiệu ứng gạch dưới khi rê chuột vào */

    body {
        max-width: 700px !important;
    }

    /* Ẩn tính năng của điện thoại */
    .hide-desktops {
        display: none !important;
    }

    .navbar-inverse {
        max-width: 700px !important;
    }

    .header-wrapper .logo-img {
        margin: 10px 5px 10px 10px;
        margin-left: 10px;
        height: 34px;
        width: 160px;
    }

    .header-content .logo:hover {
    	animation: none !important;
    } /* Ngừng vibrate, zoom effec khi rê chuột vào logo */

/* Bắt đầu css rùng mình vibrate effect logo */

/*.header-content:hover .logo {
    animation: logo-vibrate-effect 0.4s linear 12;
}*/
@keyframes logo-vibrate-effect {
    30% {
        transform: translate3d(0, -5px, 0) rotate(5deg);
    }

    50% {
        transform: translate3d(0, -3px, 0) rotate(-4deg);
    }

    80% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
/* Kết thúc css rùng mình vibrate effect logo */


/* Bắt đầu css zoom effect logo */

/*.header-content:hover .logo {
    animation: logo-zoom-effect .7s ease-in-out infinite reverse ;
}*/

@-webkit-keyframes logo-zoom-effect {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
}
@keyframes logo-zoom-effect {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
}
/* Kết thúc css zoom effect logo */

}

/* Bắt đầu css mobile, hoạt động với các màn hình nhỏ hơn 768px */

@media (max-width: 768px) {


    /* Ẩn tính năng của máy tính */
    .hide-mobile {
        display: none !important;
    }

    .header-wrapper .span-spliter,
    .header-wrapper .search-button {
        display: none !important;
    } /* Ân nút Tìm ở header với những màn hình điện thoại nhỏ hơn 768px */


    /* Bắt đầu hiệu chỉnh nút search cancel button phần header mobile */

    .header-wrapper .logo-img {
        margin: 10px 5px 10px 10px;
        margin-left: 10px;
        height: 28px;
        width: 130px;
        }
    .header-wrapper .box-search-form .search-form .search-input {
    padding: 6px 26px 6px 6px !important; /* Tăng padding phải ô search */
        }
    .header-wrapper .span-spliter, .header-wrapper .search-button {
            display: none;
        }
    .header-wrapper .box-search-form .search-form .search-cancel-button {
            width: 23px !important;
            height: 23px !important;
            right: 5px !important;

        }
    .search-main .search-form .search-cancel-button {
            width: 26px !important;
            height: 26px !important;
            right: 74px !important;
        }
    .search-tag .search-form .search-cancel-button {
            width: 24px !important;
            height: 24px !important;
            right: 54px !important;
        }
    
    /* Kết thúc css hiệu chỉnh nút search cancel button phần header mobile */
	
	
	/* Bắt đầu css rung lắc search-main mobile */

	.search-main .search-form .search-button .shaking {
		animation: css-shaking 2s ease infinite;
	}
	.search-main .search-form:hover .shaking {
		animation: none !important;
	}
	/* Kết thúc css rung lắc search-main mobile */

    .search-tag .search-form {
    width: 100% !important;
    }
    .search-tag-align-items  {
      display: block !important;
    }

    .see-more ul {
        margin: 0 0 0 10px !important;
    }
    .see-more-play ul {
        margin: 0 0 0 5px !important;
    }


    .amedia-file-wrap ul,
    .amedia-file-wrap ol {
        margin: 10px -5px 0 25px !important;
    }
    .amedia-file-wrap img {
        max-width: 100%;
        max-height: 570px;
    }

}

/* Kết thúc css mobile, hoạt động với các màn hình nhỏ hơn 768px */


/* Bắt đầu css thích ứng với đa màn hình, hiệu chỉnh logo */

/* iPad, Galaxy Tab S4 */
@media (min-width: 577px) and (max-width: 768px) {
    /* Chưa có gì */
}

/* iPhone XR, iPhone 12 Pro, iPhone 6, 7, 8 Plus */
@media (min-width: 376px) and (max-width: 576px) {
    /* Chưa có gì */
}

/* iPhone 5, 6, 7, 8, iPhone SE, iPhone X, Galaxy S9+ */
@media (min-width: 320px) and (max-width: 375px) {
    /* Chưa có gì */
}
    
/* Các máy như đời cũ */
@media (max-width: 319px) {
    /* Chưa có gì */
}
/* Kết thúc css thích ứng với đa màn hình, hiệu chỉnh logo */


/*** Kết thúc css thích ứng đa màn hình ***/