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




/*************** ADD CUSTOM CSS HERE.   ***************/
@media only screen and (max-width: 48em) {
	.category #post-list .small-columns-1>.col {max-width: 50%;float: left;}
	.post-title a{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 31px;}
	.from_the_blog_excerpt {    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;}
}
.ux-shape-divider .ux-shape-fill{fill: #fdfbe3;}
.category #content {background-color: #fdfbe3;}
.blog-archive .box-text {background-color: #fff;
    padding: 15px;}
.blog-archive .box-text-bottom {border-radius:12px;overflow:hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
#comments {display:none;}
.page-id-54 .ux-shape-divider .ux-shape-fill, .page-id-396 .ux-shape-divider .ux-shape-fill {fill: #fdfbe3;}
.textlienhe {padding:30px;}
.footer-chim p {margin-bottom: 0.9em;}
.absolute-footer.dark {color: hsl(0deg 0% 100%);}
.sliderkhachhang .is-selected {background-color: #008945!important;color: #fff!important;border-radius: 40px;border-bottom: 5px solid #fbcf00;display: inline-block;z-index:9999999!important;}
.sliderkhachhang h3 {color:#fff;}
.sliderkhachhang .align-equal {background-color:#fff;border-radius:40px;}
.sliderkhachhang  .flickity-viewport {height:380px!important;}
.home .ux-shape-divider .ux-shape-fill {fill: #fdfbe3;}
.sliderkhachhang .icon-box.featured-box {position: relative;}
.sliderkhachhang .icon-box-text {position: absolute;top: 50%;left: 73px; /* bằng width của .icon-box-img */transform: translateY(-50%);width: calc(100% - 73px);}
.sliderkhachhang .icon-box-img img {border-radius: 100%;}
.iconboxkhachhang h3 {margin-bottom:0em;}
.iconboxkhachhang p {font-size:85%;}
.rowkythuatchannuoi .read-more {display:none;}
.rowkythuatchannuoi .box {background-color:#fff;}
.tab-panels .secondary {background-color: #FFD200;color: #330906;border: 0px;padding: 7px 20px;}
.rowsp-noibat .secondary {background-color: #FFD200;color: #330906;border: 0px;padding: 7px 20px;}
.rowsp-noibat .button:hover {background: #fdfbe3 !important;color: #008945 !important;}
.rowsp-noibat .box-blog-post .image-cover img {border-radius: 80px 20px 80px 20px;border-bottom: 5px solid #fbcf00;display: inline-block;}
.rowsp-noibat .read-more {display:none;}
.rowtintucmoi .read-more {display:none;}
.rowtintucmoi h5 {color: #008945;}
.tabbed-content .nav>li.active>a {color: #ffffff;}
.tabbed-content .read-more {display:none;}
.colgiampadding {padding: 0 15px 0px;}
.tabbed-content .box-text {background-color: #fff;padding: 12px;border-radius: 0px 0px 80px 10px;}
.tabbed-content .box-blog-post .image-cover img {border-radius: 80px 10px 0px 0px;}
.flickity-page-dots .dot.is-selected {background-color: #7AC143;}
.top-divider {display: none;}
.nav>li.has-icon>a>i {min-width: 1em;color: #fff;background-color: #2E6F43;padding: 7px 9px;border-radius: 100%;}
.sechome1 .ux-shape-divider {transform: scaleX(-1);}
.sechome1 h1{line-height: 1.3;}
.sechome1 p {font-size:17px;}
.sechome1 .ux-shape-divider .ux-shape-fill {fill: #fdfbe3;}
.header-wrapper.stuck {box-shadow: none;}
.header-main .container {background-color: #ffffff;border-radius: 50px;padding: 10px 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.header-main > .container:nth-of-type(2) {display: none !important;}
.nav>li.active>a {color:#000;}
.nav>li>a {color: #000;!important}
.nav>li>a:hover {color: #2E6F43;!important}
.header-wrapper {padding-top:20px;}
.header-wrapper.stuck {padding-top: 0px;}
.white {color: #008945 !important;}
.button {border-radius: 30px 12px 30px 12px;padding: 0px 25px;}
.button:hover {box-shadow: none;background: #008945!important;color: #fff!important;}
.slider-nav-light .flickity-page-dots .dot.is-selected, .slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {background-color: #7bc144;}
.flickity-page-dots .dot {
    /* height: 18px; */
    /* width: 18px; */
    background-color: #ECECEC;
    /* opacity: 1; */
    border: 0px;
}.flickity-page-dots {bottom: 80px;}
.stuck .header-main .nav > li > a {line-height: 0 !important;}
.tieudechim {font-family: 'utm-seagullbold', sans-serif;}
.widget-title {font-family: 'utm-seagullbold', sans-serif;color:#008945;font-size:25px!important;}
.tieudechim span {background-color: #FFD200;padding: 2px 15px;border-radius: 20px 8px 20px 8px;color:#008945;}
.icon-angle-right:before {content: "";}
.blog-archive {margin-top:-130px;}
.secheader .ux-shape-divider {transform: scaleX(-1);}
.single-post #main, #wrapper {background-color:#fdfbe3;}
.single-post .ux-shape-fill {fill: #fdfbe3!important;}
.is-divider {display:none;}
.from_the_blog_excerpt {font-size:94%;padding-top: 7px;}
.blog-single .large-8 .post {background-color:#fff;padding:30px 30px 0px 30px;border-radius:20px;}
.blog-single .widget-area {background-color:#fff;padding:30px;border-radius:20px;}
.recent-blog-posts .badge {height: 4em;width: 4em;}
.recent-blog-posts .badge .bg-fill {border-radius:10px;}
.widget ul {margin-top: 15px;}
.secheader .col {padding: 0 15px 0px;}
.secheader li {margin-left:0.5em!important;}
.post .entry-category {display:none;}
@media screen and (min-width: 850px) {.blog-single .row-large>.col {padding: 0 20px 30px;}}
@media screen and (min-width: 850px) {.row-divided>.col+.col:not(.large-12) {border-left: 0px;}}
.rowtieudepost .col {padding: 0 15px 0px;}
.html-before-comments .badge.post-date {display: none;}
.relatedcat h3 span {background-color: #FFD200;padding: 2px 15px;border-radius: 20px 8px 20px 8px;}
.relatedcat h3 {font-family: 'utm-seagullbold', sans-serif;color:#008945;font-size:25px!important;margin-bottom: 25px;}
.xem-them ul {padding-top:10px;}
.tieu-de-xem-them {font-weight: bold;color: #008945;}
.post-views {color:#b5acac;}

@media only screen and (min-width: 48em) {
    .blog-ngang-1 h5 {
                font-weight: bold;
        font-size: 1em;
    }
}

@media only screen and (max-width: 48em) {
    .blog-ngang-1 .box-vertical .box-image {
        width: 40% !important;
        float: left;
        padding-right: 0.5em;
    }
}

@media only screen and (max-width: 48em) {
    .blog-ngang-1 .box-text {
        padding-top: 5px;
        width: 60% !important;
        float: left;
    }
}
.blog-ngang-1 .col {
    padding: 0 15px 10px;
}
.cf7-form .form-row {
  display: flex;
  gap: 20px; /* Khoảng cách giữa các field */
  margin-bottom: 20px;
}

.cf7-form .form-field {
  flex: 1; /* Các field chia đều không gian */
}

.cf7-form .form-field label {
  display: block;
  font-size: 16px;
}

.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.cf7-form textarea {
  height: 150px;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
  .cf7-form .form-row {
    flex-direction: column; /* Chuyển thành cột trên mobile */
  }

  .cf7-form .form-field {
    width: 100%; /* Chiếm toàn bộ chiều rộng */
  }
}


.slider-nav-circle .flickity-prev-next-button svg {
    border: 0px;
    border-radius: 100%;
    background-color: #FFD200;
    opacity: 1;
}
.flickity-prev-next-button .arrow, .flickity-prev-next-button svg {
    transition: all 0s;
}
.relatedpost {
padding: 8px 35px 8px 14px;
margin: 20px 0;
text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
border: 1px solid #BCE8F1;
border-radius: 4px;
background-color: #D9EDF7;
}
.page-breadcrumbs {
    display: block !important;
    min-height: 20px;
    font-size: 90%;
    margin-top: 25px;
}
body.single-post .page-wrapper {
    padding-top: 0px !important;
}
.rank-math-breadcrumb p .last {color:#818181}
.page-breadcrumbs .breadcrumb {
    margin: 0;
    font-size: 14px;
}
.blog-archive .box-text h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.blog-archive .box-text p {
    margin-bottom: .1em;
    margin-top: .1em;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 24px;
}


.posted-on {
    padding-right:10px;
}
.entry-meta i{
    padding-right:3px;
}
.nav-list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  justify-content:flex-end; /* Mặc định căn trái trên desktop */
}

.nav-item {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: green;
  margin-right: 10px;
}

.nav-item.active {
  background-color: green;
  color: white;
  border-radius: 30px 12px 30px 12px;
}

.nav-list::-webkit-scrollbar {
  height: 8px;
}

.nav-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.nav-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Media query cho mobile (dưới 768px) */
@media (max-width: 768px) {
  .nav-list {
    justify-content: center; /* Căn giữa trên mobile */
    padding: 0 10px; /* Thêm padding để không sát mép */
  }

  .nav-item {
    margin: 0 5px; /* Giảm khoảng cách giữa các mục trên mobile */
  }
}
/*************** CSS nút play video Slider ***************/


.slide-pause .flickity-page-dots {
    bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
    left: 0;
}

.slide-toggle-btn {
    order: -1;
    width: 36px;
    height: 36px;
    background-color: #FFC107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    z-index: 1000;
    margin: 0;
    margin-right: 5px !important;
}

.slide-toggle-btn img {
  max-width: initial;
  width: 15px;
  height: 15px;
}


@media screen and (max-width: 549px) {
    .slide-pause .flickity-page-dots
 {
	  bottom: 50px;
        pointer-events: initial;
	 justify-content: left;
		left: 10px;
    }
}

/*************** END CSS nút play video Slider  ***************/






/*************** CSS Product ***************/
.custom-product {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.custom-product.normal h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
.custom-product.compact h2 {
    font-size: 18px;
    margin-bottom: 5px;
}
.custom-product.list {
    display: flex;
    align-items: center;
}
.custom-product.list .product-image {
    margin-right: 20px;
    max-width: 150px;
}
.custom-product .product-image img {
    max-width: 100%;
    height: auto;
}
.custom-product .product-price {
    color: #e74c3c;
    font-weight: bold;
    margin: 10px 0;
}
.custom-product .product-description {
    margin-bottom: 15px;
}
/*************** END CSS Product ***************/
.footerblog .box-image {display:none;}
.footerblog a {font-weight: normal;font-size: 0.9rem;}
.footerblog .box-text { padding-bottom: 0.5em;
    padding-top: 0.5em;
    padding-left: 0;
    padding-right: 0;}
.footerblog .col {padding: 0 15px 0px;}
.footerblog .read-more {display:none;}
@media screen and (min-width: 550px) {
    .footerblog .box-list-view .box .box-text {
        padding-left: 0;
        padding-right: 0;
    }
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.tabbed-content .box-blog-post .image-cover img, .box-blog-post .image-cover img {border-radius: 10px;}
.tabbed-content .box-text, .box-text {border-radius: 10px;}
.tab-panels .secondary, .secondary {padding: 4px 12px;font-size: 9px;}	
.rowsp-noibat .box-blog-post .image-cover img {border-radius: 10px;}
.blog-ngang-1 .secondary {background-color: #FFD200;color: #330906;padding: 4px 12px;font-size: 9px;border: 0px;}
	
	
}