/*
Theme Name: TNDigi
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root{
    --box-shadow-4: 0px 8px 24px 4px rgba(0, 0, 0, 0.1), 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
    --title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --widget-title-color: #202124;
    --meta-color: #959595;
    --block-linear-bg: linear-gradient(to bottom, #e5e6ed 42%, #f1f2f4 81%, #ffffff 97%);
    --post-card-bg: #FFFFFF;
}
.logo a {font-size: 24px; text-transform: unset;}
.nav-dropdown-has-border .nav-dropdown {border-radius: 12px; padding: 12px; border: unset;}
.blog-wrapper img{border-radius: 6px;aspect-ratio: 16 / 9; object-fit: cover; width: -webkit-fill-available;}
.row-large>.col, .row-large>.flickity-viewport>.flickity-slider>.col {padding: 0 12px 20px;}
.main-row-post {max-width: calc(100% - 330px);}
.sticky-post-title {font-size: 14px;}
.sticky-post {background: #fff; padding: 12px; border-radius: 10px; margin-bottom: 16px;}
.sidebar-pos .title-main {}
.entry-image-wrap {display:block; margin: 0 0 6px; box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1);}
.entry-image-wrap img {width: 100%; height: 100%; max-height: 150px; object-fit: cover; overflow: hidden;}
.sticky-post .entry-meta {display: flex; justify-content: space-between;}
.list-p-p .sticky-post {display: flex; justify-content: space-between;} .list-p-p .sticky-post .entry-image-wrap {box-shadow: unset;}
.list-p-p .sticky-post .entry-header {flex: 1;}
.list-p-p img {width: 100px; max-width: 100px; margin-right: 12px; height: 56px;}
.popular-post {background: #fff; border-radius: 10px; padding-bottom: 12px; margin-bottom: 20px;}
.popular-post .title-main {font-size: 18px;font-weight: 700; color:#202124; padding: 1rem;}
.popular-post .sticky-post {background: unset; margin-bottom: unset; padding-top: unset; padding-bottom: unset; margin-top: 12px;}
.popular-post>.sticky-post {margin-top: 0px;}
.popular-post .sticky-post-title, .2-line {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mini-items { position: relative; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr);}
.categorys {padding: 0 12px;}
.categorys .category {display: inline-block; color:#65676b; background: #f0f2f5; font-size: 13px; font-weight: 400; margin: 4px; border-radius: 6px; padding: 6px 12px;}
.categorys .category:hover {background:var(--primary-color);} .categorys .category:hover a {color:#fff;}
.comment-container {display: flex; margin: 12px;}
.avt-user img {border-radius: 50%; margin-right: 12px; width: 40px; height: 40px;}
.comment-content{position: relative; flex: 1; padding: .5rem;  background: #f0f2f5; border-radius: 12px;}
.comment-content:before { content: ''; position: absolute; left: -10px; top: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #f0f2f5; transform: translatey(-50%) rotate(-90deg);}
.comment-content p {margin-bottom: 0;}
.second-row-post{min-width: 330px;}
.main-row-post .single-page {position: relative; float: left; width: 100%; background: #fff; border-radius: 12px; padding: 4rem 4rem .5rem; margin: 2rem 0 60px;}
.social-icons.share-icons {display:flex;justify-content: space-between;}
.social-icons.share-icons a{width: -webkit-fill-available; border-radius: 8px !important; padding: 4px;}
.breadcrumb { float: left; display: block; width: 100%; font-size: 12px; font-weight: 400; line-height: 2; margin: 0 0 1.5rem;}
.breadcrumb a {margin-right: 8px;}
.bai-viet-lien-quan .title-category {font-size: 18px; font-weight: 700; margin-bottom: 16px;}
.list-bai-viet { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 1rem; list-style-type: none;}
.list-bai-viet .related-item { position: relative; background-color: #fff; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; box-shadow: 0 0 30px 12px #ddd; }
.list-bai-viet .related-item .box-image { width: 100%; margin: 10px; width: calc(100% - 20px); border-radius: 5px; height: 120px;}
.list-bai-viet .related-item .entry-header { display: flex; flex: 1; flex-direction: column; padding: 0 10px 10px;}
.list-bai-viet .related-item .entry-header h4 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#comments .comment-respond {border-radius: 12px;}
.button, input[type=button].button, input[type=reset].button, input[type=submit], input[type=submit].button, textarea, input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {border-radius: 8px;}
.main-row-post .post-item .col-inner {background: #fff; border-radius: 12px;}
.main-row-post .post-item .col-inner .box-text {padding: 12px 12px 30px 12px;}
.cat-label, .cat-label:hover {background: transparent!important; color: #000; width: 110%; padding-left: 0;}
.page-number {border-radius: 12px!important; padding: 0px 12px!important;}
/*Trang home*/
.main-post-container .home-post {position: relative;float: left;width: 100%;margin: 0 0 2rem;display: grid;grid-template-columns: 50% 50%;border-radius: 8px; z-index: 1;overflow: hidden; background: #fff;}
.main-post-container .home-post .entry-image {float: left;width: 100%;height: 100%;background-color: rgba(155, 155, 155, .05);z-index: 1;margin: 0;}
.main-post-container .home-post .entry-image img {max-height: 450px; object-fit: cover;}
.home-post .entry-content {padding: 40px;}
.home-post .entry-content h3 {font-size: 40px;}
.home-post .entry-content p {margin-bottom: 24px;}
.author-avatar img {border-radius: 50%; width: 48px; height: 48px; border: 4px solid var(--primary-color);}
.trending.PopularPosts {display: block; clear:both;}
.PopularPosts-container {display: flex;}
.PopularPosts-container .widget-content {width: -webkit-fill-available; scrollbar-color: #666 #201c29;scrollbar-gutter: always; padding: 3rem 2rem 1rem 1rem; margin: 0; display: flex; -webkit-overflow-scrolling: touch;}
.PopularPosts-container .widget-title {margin-top: 4rem; flex: 0 0 180px;margin-right: 1rem; position: relative;display: flex;flex-direction: column;justify-content: center; padding: 1.5rem; transform: translateY(-10px);}
.PopularPosts-container .widget-title:before {content: ""; background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%); position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); z-index: 1; border-radius: 12px;}
.PopularPosts-container .widget-title:after { content: ""; position: absolute;top: 0;left: 0; width: 100%;height: 100%;background: #000;z-index: 2;border-radius: 8px;}
.PopularPosts-container .widget-title .title {z-index: 3;position: relative;font-family: var(--title-font);font-weight: 700;font-size: clamp(1.5rem, calc(1.5rem + .2vw), 3rem);line-height: 1.2;color: #fff;letter-spacing: -.05rem;}
.PopularPosts-container .widget-content { width: -webkit-fill-available;scrollbar-color: #666 #201c29; scrollbar-gutter: always;padding: 3rem 0rem 1rem 1rem;margin: 0;display: flex;-webkit-overflow-scrolling: touch;}
.PopularPosts-container .widget-content .popular-post {padding: 1.5rem;border-radius: 16px;background: linear-gradient(135deg, #d4e9bc 0, #f2f5c0 100%);color: #000;display: flex;flex-direction: column;transition: .2s;margin: 0;min-width: 200px;max-width: 230px;min-height: 280px;box-shadow: var(--box-shadow-4);}
.PopularPosts-container .widget-content .popular-post .entry-header {display: flex; flex-direction: column;flex: 1;padding: 0;}
.PopularPosts-container .widget-content .popular-post .entry-meta.mi.tag { max-height: 5em;overflow-y: hidden; line-height: 1.1;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; text-overflow: ellipsis; margin: auto 0 1rem;}
.PopularPosts-container .widget-content .popular-post:not(:first-child) { margin-left: -50px;}
.PopularPosts-container .widget-content .popular-post:hover { transform: translateY(-1rem) rotate(3deg);}
.PopularPosts-container .widget-content .popular-post:nth-child(2) {  background-image: -webkit-linear-gradient(135deg,#fbd0b8 0,#fcdcbe 48%,#fcdcbe 49%,#fceac3 100%)}
.PopularPosts-container .widget-content .popular-post:nth-child(3) {background: linear-gradient(33deg,#e2c8df,#f2ced8)}
.PopularPosts-container .widget-content .popular-post:nth-child(4) {background: linear-gradient(218deg,#c9dae7 0,#ebeff9 100%)}
.PopularPosts-container .widget-content .popular-post:nth-child(6) {background: linear-gradient(-64deg,#b3dcb7 0,#f4f5c0 100%)}
.PopularPosts-container .widget-content .popular-post:nth-child(7) {background: linear-gradient(135deg,#ffe9e9 0,#f7abab 100%,#fddede 100%)}
.PopularPosts-container .widget-content .popular-post:nth-child(5) {background: #f9e4ae}
.PopularPosts-container .widget-content .popular-post:nth-child(8) {background: #fce8d4}
.content-section {padding: 20px 12px;}
.title-wrap { position: relative; float: left;width: 100%;display: flex;align-items: center;justify-content: space-between;margin: 0 0 16px;}
.title-wrap>.title {  font-family: var(--title-font); font-size: 18px; color: var(--widget-title-color); font-weight: 700; margin: 0;}
.title-wrap>a.wt-l {font-size: 12px;color: var(--meta-color);font-weight: 400;line-height: 1;min-width: 60px;}
.content-section, .content-section .content-block, .content-section .widget, .content-section .widget-content { position: relative; float: left; width: 100%; margin: 0;}
.tndigi.block-items {display: grid; grid-template: "prm1 prm1 prm2" "snd1 snd2 snd3" / 1fr 1fr 1fr; gap: 1.5rem; padding: 1.5rem; background: var(--body-bg-color); border-radius: var(--box-radius); box-shadow: var(--box-shadow); background-color: #fff; border-radius: 12px;}
.tndigi.block-items .block-item.item-0 { grid-area: prm1; }
.tndigi.block-items .entry-image {  width: 100%; margin: 0 12px 0 0; border-radius: 8px;}
.tndigi .author-avatar { display: block; position: relative; overflow: hidden; z-index: 5; color: transparent !important; }
.tndigi .author-avatar {display: block;position: relative; width: 100%; height: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;z-index: 1;opacity: 0;transition: opacity .35s ease, filter 0s ease;}
.tndigi.block-items .entry-header .entry-meta { font-size: 13px;padding: 6px 0;}
.tndigi.block-items .item-1 .entry-header {padding: 12px;}
.tndigi.block-items .block-item.item-1 { grid-area: prm2; border-radius: var(--radius) var(--radius) 0 0; background-image: var(--block-linear-bg); }
.list-item {position: relative; width: 100%; background-color: var(--post-card-bg);display: flex; padding: 16px; margin: 20px 0 0; box-shadow: var(--box-shadow); border-radius: 12px;}
.list-item .entry-image { width: 200px; margin: 0 16px 0 0; border-radius: 8px;}
.list-item .entry-header {display: flex; flex-direction: column; flex: 1; margin: 0; }
.list-item .entry-title { font-size: 20px; margin: 0;}
.list-item .entry-meta { flex-wrap: wrap;font-size: 13px;margin-top: auto;}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.main-row-post {max-width: unset;}
.second-row-post{min-width: unset;}
.main-row-post .single-page {padding: 1rem;}
.main-post-container .home-post {display: flow!important;}
.main-post-container .home-post .entry-image {margin-bottom: 16px;}
.home-post .entry-content {padding: 20px;}
.PopularPosts-container {scrollbar-color: #666 #201c29; padding-left: 5px; overflow-x: scroll;}
.tndigi.block-items {grid-template: "prm1 prm1" "snd1 prm2" "snd2 snd3" / 1fr 1fr;}
.tndigi.block-items .item-1 .entry-header {background: #fff; padding: unset;}
.tndigi.block-items .item-1 .entry-header .entry-excerpt {display:none;}
.block-items .entry-header .entry-title { font-size: 14px;}
.content-section { padding: 20px 0px; }
.tndigi.block-items {padding: 12px 8px;}
.list-item {flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 0;}
.list-item .entry-image {width: 100%;}
.list-item .entry-header {padding: 13px 16px 16px;}

}