/**
 * =Responsive & Media Queries
 * ----------------------------------------------------------------------------
 */

@media (min-width: 1200px) {
    .container { width: 1140px;}
    }

@media (max-width: 320px){
.container {max-width: 100%; padding: 0 5px;}
    .header { background-image: url('././images/background-mobile.webp'); padding: 15px 0; background-size: cover; width: 100%; height: 89px; } 
    .header-logo-img { margin-left: 0; margin-top: 0; width: 100px; height: auto; }
    .header-logo { margin: 0; }
    .featured .news-grid {display: flex ; flex-direction: column;}
    .featured .news {width: 100%;margin: 0 0 15px 0;}
    .featured .news-grid .news .thumb img {max-width: 150px; margin-right: 10px}
    .news .thumb img {max-width: 150px; height: auto; margin-right: 5px}
    .news .title_index h3 {text-align: left;}
    .nav_header {overflow: auto; white-space: nowrap; height: auto}
    .menu_blog {overflow: auto; white-space: nowrap}
    .blog_1 .tp-caption {display: none}
    .blog_1 .tp-mask-wrap {width: 100%;}
    .blog_1 .tp-mask-wrap h1 {font-size: 20px}
    .blog_1 .item_center p {margin-bottom: 15px}
    .contents .item_l {width: 100%}
    .item_l h3 {font-size: 18px}
    .posts_list h3 {font-size: 16px}
    .posts-new img {width: 100%; height: auto; margin-bottom: 10px}
    .contents .item_center {width: 100%;margin:0;}
    .item_center img {width: 100%; height: auto}
    .item_center h3 {font-size: 18px}
    .item_r {width: 100%}
    .blog_2 .etm_TNV h2 {font-size: 18px}
    .blog_2 .etm_TNV .menu {display: none}
    .blog_2 .hot_articles {float: left; width: 100%;}
    .blog_2 .contents {width: 100%; display: block;}
    .blog_2 .sidebar {display: flex ;flex-direction: column;}
    .blog_2 .item-new .col-3 {display: flex ; flex-direction: column; gap: 10px}
    .blog_2 .item-new .col-3 article {max-width: 100%;}
    .blog_3_left {width: 100%}
    .blog_3_left .topic .etm_topic header .menu {display: none}
    .blog_3_left .main-container {display: flex ; flex-direction: column;}
    .blog_3_left .article {display: flex ; flex-direction: column;}
    .blog_3_right {width: 100%; float: left}
    .blog_3_right .podcast-content-top h3 {font-size: 15px;}
    .blog_3_right .podcast-content li {font-size: 15px;line-height: 140%;}
    .blog_3_right .web_stories img {max-width: 100%}
    .archive .main-content {margin-right: 0}
    .archive header span {font-size: 15px;}
    .archive header h1 {font-size: 20px; text-align: center;}
    .archive {display: flex ; margin: 20px 0; flex-direction: column;}
    .archive .main-content .article {display: flex ; flex-direction: column;}
    .archive .main-content .article img {width: 100%; border-radius: 0; margin-right: 0}
    .archive_sidebar {display: none}
    .single {display: flex ; flex-direction: column; margin: 30px 0;}
    .main-article .content h3 {font-size: 20px}
    .blog_3_left .section h2 {}
    .main-single {margin: 0}
    .main-single .meta-info {display: flex ; flex-direction: column; align-items: normal; gap: 10px;}
    .relatedpost h4 {margin-left: 5px}
    .relatedpost {padding: 0}
    /*footer*/
    .footer_l {display: none}
    .footer_r {display: none}
    .footer_c {width: 100%; margin-top: 10px}
    .footer_c p{font-size: 13px}
    .footer_c .logo_f {margin: 0}
    .footer_c .text {padding: 0 5px}
    
}
    

@media (max-width: 480px){
.container {max-width: 100%; padding: 0 5px;}
    .header { background-image: url('././images/background-mobile.webp'); padding: 15px 0; background-size: cover; width: 100%; height: 89px; } 
    .header-logo-img { margin-left: 0; margin-top: 0; width: 100px; height: auto; }
    .header-logo { margin: 0; }
    .featured .news-grid {display: flex ; flex-direction: column;}
    .featured .news {width: 100%;margin: 0 0 15px 0;}
    .featured .news-grid .news .thumb img {max-width: 150px; margin-right: 10px}
    .news .thumb img {max-width: 150px; height: auto; margin-right: 5px}
    .news .title_index h3 {text-align: left;}
    .nav_header {overflow: auto; white-space: nowrap; height: auto}
    .menu_blog {overflow: auto; white-space: nowrap}
    .blog_1 .tp-caption {display: none}
    .blog_1 .tp-mask-wrap {width: 100%;}
    .blog_1 .tp-mask-wrap h1 {font-size: 20px}
    .blog_1 .item_center p {margin-bottom: 15px}
    .contents .item_l {width: 100%}
    .item_l h3 {font-size: 18px}
    .posts_list h3 {font-size: 16px}
    .posts-new img {width: 100%; height: auto; margin-bottom: 10px}
    .contents .item_center {width: 100%;margin:0;}
    .item_center img {width: 100%; height: auto}
    .item_center h3 {font-size: 18px}
    .item_r {width: 100%}
    .blog_2 .etm_TNV h2 {font-size: 18px}
    .blog_2 .etm_TNV .menu {display: none}
    .blog_2 .hot_articles {float: left; width: 100%;}
    .blog_2 .contents {width: 100%; display: block;}
    .blog_2 .sidebar {display: flex ;flex-direction: column;}
    .blog_2 .item-new .col-3 {display: flex ; flex-direction: column; gap: 10px}
    .blog_2 .item-new .col-3 article {max-width: 100%;}
    .blog_3_left {width: 100%}
    .blog_3_left .topic .etm_topic header .menu {display: none}
    .blog_3_left .main-container {display: flex ; flex-direction: column;}
    .blog_3_left .article {display: flex ; flex-direction: column;}
    .blog_3_right {width: 100%; float: left}
    .blog_3_right .podcast-content-top h3 {font-size: 15px;}
    .blog_3_right .podcast-content li {font-size: 15px;line-height: 140%;}
    .blog_3_right .web_stories img {max-width: 100%}
    .archive .main-content {margin-right: 0}
    .archive header span {font-size: 15px;}
    .archive header h1 {font-size: 20px; text-align: center;}
    .archive {display: flex ; margin: 20px 0; flex-direction: column;}
    .archive .main-content .article {display: flex ; flex-direction: column;}
    .archive .main-content .article img {width: 100%; border-radius: 0; margin-right: 0}
    .archive_sidebar {display: none}
    .single {display: flex ; flex-direction: column; margin: 30px 0;}
    .main-article .content h3 {font-size: 20px}
    .blog_3_left .section h2 {}
    .main-single {margin: 0}
    .main-single .meta-info {display: flex ; flex-direction: column; align-items: normal; gap: 10px;}
    .relatedpost h4 {margin-left: 5px}
    .relatedpost {padding: 0}
    /*footer*/
    .footer_l {display: none}
    .footer_r {display: none}
    .footer_c {width: 100%; margin-top: 10px}
    .footer_c p{font-size: 13px}
    .footer_c .logo_f {margin: 0}
    .footer_c .text {padding: 0 5px}
    
    
}

@media (max-width: 600px){
    .container {max-width: 100%; padding: 0 5px;}
    .header { background-image: url('././images/background-mobile.webp'); padding: 15px 0; background-size: cover; width: 100%; height: 89px; } 
    .header-logo-img { margin-left: 0; margin-top: 0; width: 100px; height: auto; }
    .header-logo { margin: 0; }
    .featured .news-grid {display: flex ; flex-direction: column;}
    .featured .news {width: 100%;margin: 0 0 15px 0;}
    .featured .news-grid .news .thumb img {max-width: 150px; margin-right: 10px}
    .news .thumb img {max-width: 150px; height: auto; margin-right: 5px}
    .news .title_index h3 {text-align: left;}
    .nav_header {overflow: auto; white-space: nowrap; height: auto}
    .menu_blog {overflow: auto; white-space: nowrap}
    .blog_1 .tp-caption {display: none}
    .blog_1 .tp-mask-wrap {width: 100%;}
    .blog_1 .tp-mask-wrap h1 {font-size: 20px}
    .blog_1 .item_center p {margin-bottom: 15px}
    .contents .item_l {width: 100%}
    .item_l h3 {font-size: 18px}
    .posts_list h3 {font-size: 16px}
    .posts-new img {width: 100%; height: auto; margin-bottom: 10px}
    .contents .item_center {width: 100%;margin:0;}
    .item_center img {width: 100%; height: auto}
    .item_center h3 {font-size: 18px}
    .item_r {width: 100%}
    .blog_2 .etm_TNV h2 {font-size: 18px}
    .blog_2 .etm_TNV .menu {display: none}
    .blog_2 .hot_articles {float: left; width: 100%;}
    .blog_2 .contents {width: 100%; display: block;}
    .blog_2 .sidebar {display: flex ;flex-direction: column;}
    .blog_2 .item-new .col-3 {display: flex ; flex-direction: column; gap: 10px}
    .blog_2 .item-new .col-3 article {max-width: 100%;}
    .blog_3_left {width: 100%}
    .blog_3_left .topic .etm_topic header .menu {display: none}
    .blog_3_left .main-container {display: flex ; flex-direction: column;}
    .blog_3_left .article {display: flex ; flex-direction: column;}
    .blog_3_right {width: 100%; float: left}
    .blog_3_right .podcast-content-top h3 {font-size: 15px;}
    .blog_3_right .podcast-content li {font-size: 15px;line-height: 140%;}
    .blog_3_right .web_stories img {max-width: 100%}
    .archive .main-content {margin-right: 0}
    .archive header span {font-size: 15px;}
    .archive header h1 {font-size: 20px; text-align: center;}
    .archive {display: flex ; margin: 20px 0; flex-direction: column;}
    .archive .main-content .article {display: flex ; flex-direction: column;}
    .archive .main-content .article img {width: 100%; border-radius: 0; margin-right: 0}
    .archive_sidebar {display: none}
    .single {display: flex ; flex-direction: column; margin: 30px 0;}
    .main-article .content h3 {font-size: 20px}
    .blog_3_left .section h2 {}
    .main-single {margin: 0}
    .main-single .meta-info {display: flex ; flex-direction: column; align-items: normal; gap: 10px;}
    .relatedpost h4 {margin-left: 5px}
    .relatedpost {padding: 0}
    /*footer*/
    .footer_l {display: none}
    .footer_r {display: none}
    .footer_c {width: 100%; margin-top: 10px}
    .footer_c p{font-size: 13px}
    .footer_c .logo_f {margin: 0}
    .footer_c .text {padding: 0 5px}
    
}