/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
/*************** ADD CUSTOM CSS HERE.   ***************/
.source-sans,
.source-sans h2,
.source-sans h3,
.source-sans h4 {
	font-family: 'Source Sans 3';
}
p {
	margin-bottom: 10px;
}
p:last-child {
	margin-bottom: 0;
}
.section > .section-content > .row > .col {
	padding-bottom: 0;
}
h1, h2, h3, h4, h5 {
	line-height: inherit;
}
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5 {
	line-height: inherit;
}
.icon-box-left {
	display: flex;
	align-items: center;
}
.icon-box-left p {
	margin-bottom: 0;
}
.icon-box-left h3 {
	margin-bottom: 5px;
}
h2.section-title-normal {
	font-size: 26px;
	font-weight: 600;
	border-bottom: none;
}
.section-title-normal {
	margin-bottom: 0;
}
.section-title-normal span {
	border-bottom: none;
	padding-bottom: 0;
}
.section-title a {
	font-size: 12px;
	border-bottom: 1px solid #d9d9d9;
	padding-left: 0;
	margin-bottom: -20px;
}

.box-gp .box-image {
	border-radius: 8px;
}
/* Áp dụng clip-path vào inner container */
.box-gp .image-cover {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 70px), 
    calc(100% - 80px) 100%, 
    0 100%
  );
}
.box-gp .box-text {
	top: 0;
	background-image: linear-gradient(#fffffffa, #ffffff0d, #ffffff00);
	text-shadow: none !important;
	border-radius: 8px;
}
.box-gp .box-text * {
	color: #1F1F1F;
}
.box-gp:hover .box-text {
	background-image: linear-gradient(#e34325f5, #e3432514, #ffffff00);
}
.box-gp:hover .box-text * {
	color: #fff;
}
/* Đặt ::after ở .box-image (nằm ngoài .image-inner nên KHÔNG bị cắt) */
.box-gp .box-image::after {
  content: '01';
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #1F1F1F;
  padding: 0px 0px;
  z-index: 10;
  font-family: "Montserrat", sans-serif;
}
.box-gp.box-gp-02 .box-image::after {
	content: '02';
}
.box-gp.box-gp-03 .box-image::after {
	content: '03';
}
.box-gp.box-gp-04 .box-image::after {
	content: '04';
}
.box-gp.box-gp-05 .box-image::after {
	content: '05';
}
.box-gp.box-gp-06 .box-image::after {
	content: '06';
}
.col.post-item .box {
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	overflow: hidden;
}

/* Khung chứa ảnh: Ẩn phần ảnh thừa khi bị phóng to */
.col.post-item .box .box-image {
    overflow: hidden;
	border-radius: 8px 8px 0 0;
}

/* Cấu hình mượt mà cho hình ảnh */
.col.post-item .box .box-image img {
    transition: transform 0.5s ease; /* Tạo độ mượt khi chuyển động */
    width: 100%;
    display: block;
}

/* Hiệu ứng phóng to khi hover vào khung hoặc ảnh */
.col.post-item .box:hover .box-image img {
    transform: scale(1.1); /* Phóng to 110% */
}
.col.post-item .box .box-text {
	padding: 15px;
}
.col.post-item .box:hover .box-text {
	background-image: linear-gradient(to right, #E11F26 , #E34325, #EB9623);
}
.col.post-item .box:hover .box-text * {
	color: #fff;
}
.col.post-item .box .post-title {
	font-size: 18px;
	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	font-weight: 600;
}
.post-meta {
	font-size: 16px;
}
.col.post-item .box-text .button.is-link {
	text-transform: none;
	font-size: 12px;
	font-weight: normal;
	border-bottom: 1px solid #d9d9d9 !important;
	padding: 0 !important;
	min-height: 26px;
	height: 26px;
	margin-top: 5px !important;
}
.col.post-item .box-text .button.is-link:after {
	content: '⟶';
	margin-left: 5px;
}
.box-blog-post .is-divider {
	display: none;
}
.button.primary:not(.is-outline) {
	background-image: linear-gradient(to right, #E11F26 , #E34325, #EB9623);
	border: none;
	padding-top: 2px;
}
.button i, button i {
	top: 0;
}
.social-icons .button.icon.circle {
	color: #E34325;
	border: 1px solid;
	margin-right: 6px;
}

.row-service {
}
.row-service .col {
	border-bottom: 3px solid #D9D9D9;
	padding-bottom: 5px !important;
}
.row-service .col .col-inner {
	position: relative;
	padding: 8px;
}
.row-service .col .col-inner:after {
	content: '';
	height: 6px;
	width: 100%;
	position: absolute;
	background-image: linear-gradient(to right, #E11F26 , #E34325, #EB9623);
	bottom: -9px;
	left: 0;
	opacity: 0;
}
.row-service .col .col-inner:hover:after {
	opacity: 1;
}
.row-service .col .col-inner:hover {
	background-color: #F0ECEC;
}
/* Trạng thái ban đầu của thẻ h4 */
.row-service .col .col-inner h4 {
  transition: all 0.3s ease; /* Tạo độ mượt khi chuyển màu */
  font-weight: 600;
}

/* Trạng thái khi hover vào .col-inner */
.row-service .col .col-inner:hover h4 {
  /* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;

  font-weight: 700;
}
.row-service .icon-box-left .icon-box-img+.icon-box-text {
	padding-left: 12px;
}
.button.is-outline.button-dark {
	border: 1px solid !important;
	color: #1F1F1F !important;
	padding-top: 2px;
}
.button.is-outline.button-dark:hover {
	background: #fff !important;
}


.tttg.icon-box-left {
	border: 1px solid #efe9e500;
	border-radius: 8px;
	padding: 20px;
	background-color: #ffffff; /* Màu nền trong hộp của bạn */
	transition: border-color 0.3s ease;
}

.tttg.icon-box-left:hover {
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.tttg.icon-box-left .icon-box-img {
	background-color: #EFE9E5;
	border-radius: 100%;
	padding: 16px;
}
.tttg.icon-box-left:hover .icon-box-img {
	background-image: linear-gradient(to right, #E11F26 , #E34325, #EB9623);
}
.tttg.icon-box-left:hover .icon-box-img img {
	/* Chuyển ảnh thành màu xám hoàn toàn, sau đó tăng độ sáng tối đa để thành màu trắng */
  	filter: grayscale(100%) brightness(1000%);
}
.tttg.icon-box-left p {
	transition: all 0.3s ease; /* Tạo độ mượt khi chuyển màu */
}
.tttg.icon-box-left:hover p {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.box.box-vertical-custom {
	border: 1px solid #D9D9D9;
	border-radius: 8px;
	padding: 5px;
	background-color: #F5F5F5;
	transition: border-color 0.3s ease;
}
.box.box-vertical-custom:hover {
	background-color: #ffffff;
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.box.box-vertical-custom .box-image {
	overflow: hidden;
	border-radius: 8px 0 0 8px;
}
.box.box-vertical-custom .box-image img {
	border-radius: 8px 0 0 8px;
}
.box.box-vertical-custom .box-text {
	padding-top: 0;
	padding-bottom: 0;
}
.box.box-vertical-custom .box-text ul {
	margin-bottom: 0;
}
.box.box-vertical-custom .box-text ul li:last-child {
	margin-bottom: 0;
}
.box.box-vertical-custom h4,
.box.box-vertical-custom strong,
.box.box-vertical-custom h3,
.box.box-vertical-custom h2,
.box.box-vertical-custom h5 {
	transition: all 0.3s ease; /* Tạo độ mượt khi chuyển màu */
}
.box.box-vertical-custom:hover h4,
.box.box-vertical-custom:hover strong,
.box.box-vertical-custom:hover h3,
.box.box-vertical-custom:hover h2,
.box.box-vertical-custom:hover h5 {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}

.box.box-prod {
	border: 1px solid #D9D9D9;
	border-radius: 8px;
}
.box.box-prod .box-image {
	border-radius: 8px 8px 0 0;
}
.box.box-prod .box-text {
	padding: 15px;
}

.img-radius,
.img-radius img {
	border-radius: 8px;
}
.box-icon-view.icon-box-left {
	border: 1px	solid transparent;
	border-radius: 8px;
	padding: 15px;
	transition: border-color 0.3s ease;
}

.box-icon-view.icon-box-left:hover {
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.box-icon-view.icon-box-left .icon-box-img {
	background-color: #EFE9E5;
	border-radius: 100%;
	padding: 20px;
	border: 1px	solid transparent;
}
.box-icon-view.icon-box-left:hover .icon-box-img {
	background-color: #fff;
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.box-icon-view.icon-box-left:hover h2,
.box-icon-view.icon-box-left:hover h3,
.box-icon-view.icon-box-left:hover h4 {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}

.box-gtcl.icon-box {
	padding: 15px;
	border-radius: 8px;
	transition: border-color 0.3s ease;
	border: 1px solid transparent;
	border-radius: 8px;
}
.box-gtcl.icon-box:hover {
	background-color: #FDF2E9;
	border: 1px solid #E11F26;
	/*background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;*/
}
.box-gtcl.icon-box:hover * {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.box-gtcl.icon-box .icon-box-img {
  /* Thêm hiệu ứng chuyển cảnh mượt mà khi hover */
  transition: filter 0.3s ease; 
}

.heading-banner h4 {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}


.gallery-big.flexslider {
	border: none;
	margin-bottom: 0;
}
.gallery-big.flexslider .slides img{
	height: 400px;
	object-fit: cover;
	border-radius: 8px;
}
.flexslider.gallery-small .slides img {
	height: 108px;
	object-fit: cover;
	border-radius: 8px;
}

.box-sp {
	border: 1px solid transparent;
	padding: 15px 10px;
	border-radius: 8px;
}
.box-sp:hover {
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
/* Đảm bảo thẻ chứa ảnh có position relative */
.box-sp .icon-box-img {
    position: relative;
    display: inline-block;
}

/* Tạo lớp phủ gradient khi hover */
.box-sp:hover .icon-box-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
    
    /* Trộn màu gradient vào ảnh */
    mix-blend-mode: screen; /* Hoặc thử: multiply, color, darken tùy thuộc nền ảnh */
    pointer-events: none;
}
/* Tạo lớp phủ gradient khi hover */
.box-sp-2:hover .icon-box-img::after {
    mix-blend-mode: color; /* Hoặc thử: multiply, color, darken tùy thuộc nền ảnh */
}
.box-sp:hover p {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.col-app .col-inner:hover h2,
.col-app .col-inner:hover h3,
.col-app .col-inner:hover h4 {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.img-radius img {
	border-radius: 8px;
}
.col-dsp .col-inner {
	padding: 15px;
	border: 1px solid #666666;
	border-radius: 8px;
}
.col-dsp .col-inner:hover {
	border: 1px solid #E11F26;
	background-color: #FDF2E9;
}
.col-dsp .col-inner:hover a {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}

.col-nlq .col-inner {
	padding: 15px;
	border-radius: 8px;
}
.col-nlq .col-inner img {
	transition: filter 0.3s ease; 
}
.col-nlq .col-inner:hover img {
	filter: grayscale(100%) brightness(1000%);
}
.col-nlq .col-inner:hover {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
}
.col-nlq .col-inner:hover * {
	color: #fff !important;
}

.box-download {
	background-color: #D9D9D9;
	border-radius: 8px;
	padding: 20px;
	border: 1px solid transparent;
	transition: filter 0.3s ease; 
}
.box-download:hover {
	background-color: #fff;
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.box-download .icon-box-img {
	background-color: #fff;
	border-radius: 100%;
	padding: 16px;
}
.box-download:hover .icon-box-img {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
}
.icon-box-img img, .icon-box-img svg {
	padding-top: 0;
}
.icon-box p {
	margin-bottom: 0;
}

.row-contact .col {
	padding-bottom: 0;
}
.row-contact label {
	font-weight: 400;
}
.row-contact input.wpcf7-form-control, 
.row-contact select.wpcf7-form-control {
	border-radius: 8px;
	border: 1px solid #D9D9D9;
	box-shadow: none;
}
.col-left textarea {
	min-height: 100px;
	border-radius: 8px;
	border: 1px solid #D9D9D9;
	box-shadow: none;
}
.col-right textarea {
	min-height: 50px;
	border-radius: 8px;
	border: 1px solid #D9D9D9;
	box-shadow: none;
}
.text-center input.wpcf7-form-control.wpcf7-submit {
	border-radius: 8px;
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
	min-width: 480px;
	border: none;
	text-transform: none;
	font-weight: 500;
}
.wpcf7-spinner {
	position: absolute;
}

.row-gp .col .icon-box .icon-box-img  {
}
.row-gp .col .icon-box .icon-box-img:after {
	content: '';
  width: 120px;
  height: 1px;
  border-bottom: 1px dashed #1F1F1F;
  position: absolute;
  top: 50%;
  right: -120px;
  z-index: 1;
}
.row-gp .col .icon-box .icon-box-img:before {
	content: '01';
	text-align: center;
	display: block;
	font-size: 20px;
	color: #999999;
	font-weight: 600;
	position: absolute;
  top: -30px;
  width: 100%;
  left: 0;
}
.row-gp .col:nth-child(2) .icon-box .icon-box-img:before {
	content: '02';
}
.row-gp .col:nth-child(3) .icon-box .icon-box-img:before {
	content: '03';
}
.row-gp .col:nth-child(4) .icon-box .icon-box-img:before {
	content: '04';
}
.row-gp .col:nth-child(5) .icon-box .icon-box-img:before {
	content: '05';
}
.row-gp .col:nth-child(6) .icon-box .icon-box-img:before {
	content: '06';
}
.row-gp .col .icon-box:hover .icon-box-img:before {
	color: #1F1F1F;
}
.qtgp.icon-box .icon-box-img {
	background-color: #FFF4F4;
	border-radius: 100%;
	padding: 15px;
	transition: filter 0.3s ease; 
	position: relative;
}
.row-gp .col:last-child .icon-box .icon-box-img:after {
	display: none;
}
.qtgp.icon-box:hover .icon-box-img {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
}
.qtgp.icon-box:hover .icon-box-img img {
	filter: grayscale(100%) brightness(1000%);
}
.qtgp.icon-box h4 {
	margin-bottom: 3px;
}
.qtgp.icon-box:hover h4 {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.icon-box h3, .icon-box h4 {
	font-weight: 600;
}

.widget {
	background-color: #FFF4F4;
	border: 1px solid transparent;
	background-image: linear-gradient(#FFF4F4, #FFF4F4), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border-radius: 8px;
}
.widget > div {
	padding: 10px;
}
.widget ul.menu > li > a {
	font-weight: 600;
	color: #1F1F1F;
}
.widget ul.menu > li > .sub-menu > li > a {
	color: #1F1F1F;
	font-size: 16px;
}
.widget ul.menu > li > .sub-menu > li > a:hover,
.widget ul.menu a:hover {
	color: #E11F26;
}
.widget .is-divider {
	display: none;
}
.widget span.widget-title {
	display: block;
	color: #ffffff;
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
	border-radius: 8px 8px 0 0;
	padding: 10px 15px;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
}

.archive .col.post-item .box {
	border-radius: 0;
	border: none;
}
.archive .col.post-item .box .box-image, 
.archive .col.post-item .box .box-image img {
	border-radius: 20px;
}
.archive .col.post-item .box .box-text {
	text-align: center;
}
.archive .col.post-item .box:hover .box-text {
	background: transparent;
}
.archive .col.post-item .box:hover .box-text * {
	color: initial;
}
.archive .col.post-item .box .box-text p {
	font-size: 14px;
}
.archive .col.post-item .box:hover .box-text p {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
ul.links.nav-pagination {
	text-align: right;
}
.nav-pagination>li>a, .nav-pagination>li>span {
	border-radius: 4px;
	border: 1px solid;
}
.single-post .entry-header {
	position: relative;
  margin-bottom: 35px;
}
.single-post .entry-header .entry-header-text {
	position: absolute;
  bottom: -15px;
  left: -15px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 25%);
  z-index: 2;
  padding: 20px;
  width: 59%;
}
.single-post .entry-header .entry-header-text h1 {
	margin-bottom: 0;
	font-size: 25px;
	line-height: 30px;
}
.entry-content {
	text-align: justify;
}

.custom-ajax-search-wrapper {
   margin-bottom: 15px;
  display: flex;
  justify-content: end;
}
.custom-ajax-search-wrapper .search-input-box {
	position: relative;
  min-width: 720px;
}
.custom-ajax-search-wrapper .ajax-search-input {
	border-radius: 99px;
	background-color: #fdf5f5;
	border: none;
	padding: 12px 45px 12px 25px;
	width: 100%;
	outline: none;
	box-shadow: none;
	height: 55px;
}
.custom-ajax-search-wrapper .search-icon {
	position: absolute;
	right: 20px; 
	top: 45%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #666;
}

.category-filter-wrapper {
	display: none; 
	align-items: center; 
	gap: 12px; 
	margin-bottom: 20px; 
	flex-wrap: wrap;
}
.category-filter-wrapper > span {
	font-weight: bold; 
	font-size: 18px; 
	margin-right: 10px;
}
.search-result-info {
	display: none; 
	margin-bottom: 20px; 
	font-size: 16px;
}
.count-val {
	color: #e11f26;
}
.cat-filter-btn {
  background-color: #ffffff;
  border: 1px solid transparent;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 99px;  
  color: #e11f26;
  padding: 3px 18px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none !important;
}
.cat-filter-btn:hover, .cat-filter-btn.active {
  background-image: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  color: #ffffff;
}

.widget>ul>li+li, ul.menu>li+li {
	border-top: 1px solid #1F1F1F;
}
.widget>ul>li ul, ul.menu>li ul {
	padding-left: 0;
	border-left: none;
	margin-left: 0;
	display: block !importantW;
}
.widget .toggle {
  transform: rotate(-90deg);
}
.widget .toggle, 
.widget .toggle i {
	color: #1F1F1F;
	opacity: 1;
}
.widget .active>.toggle i {
	/* Tạo dải màu nền cho chữ */
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  
  /* Cắt dải màu theo khuôn chữ */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Làm trong suốt màu chữ gốc để lộ dải màu nền bên dưới */
  -webkit-text-fill-color: transparent;
}
.menu-links-list a.nav-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}
.menu-links-list a.nav-item:hover,
.menu-sublinks-list a:hover {
  color: #2b4c7e;
}
.menu-sublinks-list a {
  display: block;
  padding: 6px 0;
  color: #444;
  font-size: 13px;
}
.active-link {
  color: #2b4c7e !important;
  font-weight: bold;
  text-decoration: underline;
}
.bold-link {
  font-weight: bold !important;
  color: #2b4c7e !important;
  margin-top: 10px;
}
.direct-link-item {
  padding-left: 20px;
  margin-top: -10px;
}
.direct-link-item a {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  max-width: 180px;
}
.mega-desc {
	display: none;
}


@media (min-width: 850px) {
	.row-5 .col {
		max-width: 20%;
		flex-basis: 20%;
	}
	.row-5 .col.col-10 {
		max-width: 17%;
		flex-basis: 17%;
	}
	.row-5 .col.col-30 {
		max-width: 26%;
		flex-basis: 26%;
	}
}

@media only screen and (max-width: 480px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.banner .button {
		font-size: 14px;
	}
	.box.box-vertical-custom .box-text {
		padding: 20px;
	}
	.row-gp .col .icon-box .icon-box-img:after {
		display: none;
	}
	.col-right textarea {
		min-height: 80px;
	}
	.custom-ajax-search-wrapper .search-input-box {
		min-width: 100%;
	}
	.single-post .entry-header .entry-header-text {
		left: -5px;
		width: 95%;
	}
	.single-post .entry-header .entry-header-text h1 {
    margin-bottom: 0;
    font-size: 22px;
    line-height: 28px;
	}	
}
a.button span {
	font-size: 16px;
	font-weight: bold;
}
a.button.but-cus {
	background: #fff;
    border: 1px solid #e34325;
}
/* a.button.but-cus span {
	color: #e34325;
} */
.lienhef-col input[type=submit]:hover,
/* a.button.but-cus:hover {
    background-image: linear-gradient(to right, #E11F26, #E34325, #EB9623) !important;
	color: #fff;
} */
a.button.but-cus:hover span {
	color: #fff;
}
.cus-icon-logo {
	background: url(images/logo-chim.png) 98% 100% no-repeat;
}
.lienhef-col .col-inner {
    box-shadow: 0 0 20px hsl(0deg 0% 0% / 15%);
}
.quytrinh-text2 .icon-box-img {
	border-radius: 100%;
	overflow: hidden;
	background: #fff4f4;
	border: 1px solid transparent;
}
.quytrinh-text2 .icon-box-img .icon {
	padding: 15px;
}
.quytrinh-text2:hover .icon-box-img {
    background-color: #ffffff;
    border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.quytrinh-text2:hover .icon-box-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
    
    /* Trộn màu gradient vào ảnh */
    mix-blend-mode: screen; /* Hoặc thử: multiply, color, darken tùy thuộc nền ảnh */
    pointer-events: none;
}
.quytrinh-text2:hover .icon-box-img img {
	
}
/* */
.cus-accor .accordion-item {
	border: 1px solid #ddd;
	border-radius: 10px;
	margin-bottom: 20px;
}
.cus-accor .accordion-item.main-active {
	background: #FFF4F4;
	border: 1px solid #E11F26;
}
.cus-accor .accordion-title.active{
	background: none;
	color: #E11F26;
}
.cus-accor .accordion-item.main-active .accordion-inner {
	color: #1f1f1f;
}





/* ==========================================================
   PHẦN 2: CSS - copy vào Flatsome > Advanced > Custom CSS
 
   Markup do shortcode Flatsome render: row / col / col-inner,
   ux-menu / ux-menu-link. Chỉ 4 class custom gán qua param class:
   - mega-block  (gán vào row: scope CSS/JS)
   - mega-panel  (gán vào ux_menu cột 2, 3: ẩn hiện theo click)
   - go-xxx / panel-xxx (cặp convention: link go-nganh mở panel-nganh)
   - arrow       (vẽ chevron trang trí cho item không có con)
   ========================================================== */
.menu-item-has-block .nav-dropdown {
	box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0% / 20%);
}
.header-main .nav .mega-block{
  display:flex;
  flex-flow:row wrap;
  align-items:stretch;
  margin:0 auto;
  /*min-height:560px;*/
  background:#fff;
  text-align:left;
  
}
.header-main .nav .mega-block *{box-sizing:border-box;}
 
/* 3 cột: đè gutter mặc định để cột sát nhau, padding dồn vào col-inner */
.header-main .nav .mega-block > .col{
  width:33.333%;
  max-width:33.333%;
  flex:0 0 33.333%;
  padding:0;
  margin:0;
}
.header-main .nav .mega-block > .col + .col{border-left:1px solid #e3e3e3;}
.header-main .nav .mega-block .col-inner{padding: 30px 30px 30px 20px}
 
/* Heading + mô tả cột 1 */
.header-main .nav .mega-block h3{
  margin:0 0 14px;
  font-size:23px;
  font-weight:700;
  color:#111;
  text-transform:none;
  letter-spacing:0;
}
.header-main .nav .mega-block .col-inner p{
  margin:0 0 26px;
  font-size:17px;
  line-height:1.6;
  color:#4a4a4a;
  max-width:372px;
}
 
/* UX Menu */
.header-main .nav .mega-block .ux-menu{margin:0;padding:0;list-style:none;display:block;}
.header-main .nav .mega-block .ux-menu-link{display:block;margin:0;}
.header-main .nav .mega-block .ux-menu-link__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:372px;
  min-height:0;
  padding:11px 0;
  font-size:17px;
  line-height:1.45;
  color:#1c1c1c;
  font-weight:400;
  text-decoration:none;
  text-transform: none !important;
}
.header-main .nav .mega-block .ux-menu-link__link:hover{color:#d31920;}
.header-main .nav .mega-block .ux-menu-link__text{flex:1 1 auto;}
 
/* Chevron: item có con (menu-item-has-children) hoặc item gắn class arrow */
.header-main .nav .mega-block .ux-menu-link.menu-item-has-children > .ux-menu-link__link::after,
.header-main .nav .mega-block .ux-menu-link.arrow > .ux-menu-link__link::after{
  content:"";
  flex:none;
  width:9px; height:9px;
  margin-left:18px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
}
 
/* Item đang mở nhánh: chữ đỏ đậm */
.header-main .nav .mega-block .ux-menu-link__link.open{color:#d31920;font-weight:600;}
 
/* Panel cột 2 và 3: ẩn mặc định, chỉ hiện panel active */
.header-main .nav .mega-block .mega-panel{display:none;}
.header-main .nav .mega-block .mega-panel.active{display:block;}
 
/* Bài viết cột 3 */
.header-main .nav .mega-block > .col:nth-child(3) .ux-menu-link__link{
  font-size:16.5px;
  color:#333;
  padding:12px 0;
}
.header-main .nav .mega-block > .col:nth-child(3) .ux-menu-link__link:hover{color:#d31920;}
 
/* Khi block nằm trong dropdown Flatsome: reset khoảng thừa */
.nav-dropdown .header-main .nav .mega-block.row{padding:0;margin:0;width:100%;max-width:100%;}
 
/* ==========================================================
   HẾT PHẦN CSS
   ========================================================== */

.button.open-video i {
	top: 0;
}
.box.box-img-gp .box-image .overlay, 
.box.box-img-gp .box-image, 
.box.box-img-gp .box-image img {
	border-radius: 20px;
}
.box.box-img-gp .box-text {
	top: 0;
	bottom: auto;
}
.box.box-img-gp:hover .box-text * {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}

.gallery-custom .flickity-prev-next-button {
	opacity: 1;
	visibility: visible;
	top: -40px;
	bottom: auto;
	margin: auto;
  	font-size: 12px;
  	right: 0;
  	left: auto;
 	padding: 12px;
 	transform: none !important;
}
.gallery-custom.slider:hover .flickity-prev-next-button {
	transform: none !important;
}
.gallery-custom .flickity-prev-next-button.previous {
	right: 30px;
}
.banner h5, .banner h6, .banner p {
	margin-bottom: 5px;
  margin-top: 0em;
}
b, strong {
	font-weight: bold;
}

.dmw-widget{
	max-width: 360px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 !important;
}
.dmw-header{
  display: block;
  color: #ffffff;
  background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  border-radius: 8px 8px 0 0;
  padding: 8px 15px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}
.dmw-title{font-size:18px;font-weight:600;color:#fff;letter-spacing:.5px;}
.dmw-accordion{background:#fdf0ec; padding: 0 10px;}
.dmw-category{border-top:1px solid #1F1F1F;}
.dmw-category.is-open .dmw-cat-header span {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dmw-category:first-child{border-top:none;}
.dmw-cat-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding: 2px 16px;background:none;border:none;cursor:pointer;text-align:left; margin: 0; text-transform: none;}
.dmw-cat-name{font-size:16px;font-weight:600;color:#1F1F1F;}
.dmw-cat-arrow{font-size:20px;color:#d85a30;line-height:1;transform:rotate(0deg);transition:transform .2s ease;}
.dmw-category.is-open .dmw-cat-arrow{transform:rotate(90deg);}
.dmw-cat-posts{display:none;flex-direction:column;}
.dmw-category.is-open .dmw-cat-posts{display:flex;}
.dmw-post-item{padding: 7px 16px;font-size:16px;color:#333;text-decoration:none;transition:background .15s ease; line-height: 19px}
.dmw-post-item:hover{background:#f7e2d9;color:#d85a30;}

.col-contact .col-inner {
	border: 1px solid #666666;
	border-radius: 8px;
}
.col-contact .col-inner:hover {
	background-color: #FDF2E9;
  border: 1px solid #E11F26;
}

.accordion-item {
	border: 1px solid #D9D9D9;
	background-color: #F5F5F5;
	border-radius: 8px;
	margin-bottom: 10px;
	color: #1F1F1F;
}
.accordion-item .accordion-title.active {
	background-color: #FFF4F4;
	border-radius: 8px 8px 0 0;
}
.accordion-item .accordion-inner {
	background-color: #FFF4F4;
	padding-top: 0;
	padding-left: 20px;
	border-radius: 0 0 8px 8px;
}
.accordion-title {
	border: none;
	padding-left: 20px;
}
.accordion .toggle {
	left: auto;
	right: 10px;
}

.chns .col-inner:hover {
	background-color: #ffffff;
  	border: 1px solid transparent;
  	background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	background-origin: border-box;
  	background-clip: padding-box, border-box;
}
.chns .col-inner:hover .testimonial-meta * {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}
.chvl:hover .box-text h3 {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}
.box-ld {
	border: 1px solid transparent;
	padding: 20px 16px;
	border-radius: 8px;
}
.box-ld:hover {
	background-color: #FFF4F4;
	border: 1px solid #E11F26;
}
.box-ld:hover .box-text * {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}

.slider-custom .flickity-slider > * {
	margin-right: 20px !important;
}
.nangluc-col:hover .col-inner h4 {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}
.icon-count:hover h3 {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
 	 background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-shadow: none;
}

.thuvien-tab-select {
	width:100%;
	max-width:700px; 
	margin: auto;
	margin-bottom: 30px;
	padding:0 10px;
	border-radius: 5px;
	font-size:15px;
	background-color: #FDF2E9;
	height: 50px;
	border: 1px solid #666666;
	font-size: 16px;
}
.footer-wrapper .icon-box-left .icon-box-img {
	width: 15px !important;
}
.footer-wrapper .icon-box-left .icon-box-img+.icon-box-text {
	padding-left: 10px;
}
.footer-primary ul li {
	border-right: 1px solid #D9D9D9;
	padding-right: 10px;
}
.footer-primary ul li:last-child {
	border: none;
	padding-right: 0;
}
.footer-primary ul li a {
	text-transform: none;
	font-size: 14px;
}

.lightbox-by-id.lightbox-content {
	border-radius: 30px;
}
.lightbox-by-id.lightbox-content img {
	border-radius: 0 0 30px 30px;
}

.tabs.product-tabs {
	display: none;
}
.tab-panels {
	padding-top: 0;
}

.ctd-tltx-wrap {
  max-width: 100%;
  font-family: inherit;
  color: #222;
  background: #fff;
}

.ctd-tltx-header {
  padding: 14px 20px;
}

.ctd-tltx-title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}

.ctd-tltx-subtitle {
	font-size: 22px;
	font-weight: 500;
}
.ctd-tltx-group {
  transition: opacity .2s ease;
}

.ctd-tltx-group.ctd-tltx-hidden {
  display: none;
}

.ctd-tltx-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px 15px 0;
  border-top: 2px solid #999999;
  border-bottom: 2px solid #999999;
}

.ctd-tltx-group-name {
  	color: #e6392f;
  	font-weight: 700;
  	font-size: 18px;
  	letter-spacing: .3px;
  	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctd-tltx-close {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #999;
  padding: 0 4px;
}

.ctd-tltx-close:hover {
  color: #333;
}

.ctd-tltx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}

.ctd-tltx-row-alt {
  background: #ECECEC;
}

.ctd-tltx-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}

.ctd-tltx-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.ctd-tltx-btn {
  display: inline-block;
  padding: 6px 16px;
  font-size: 16px;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  color: #666666;
  background: #fff;
  border: 1px solid #666666;
  border-radius: 8px;
  white-space: nowrap;
  transition: all .15s ease;
  font-weight: 500;
}

.ctd-tltx-btn:hover {
  	border: 1px solid #e34325;
  	background-color: #FDF2E9;
 	color: #e34325;
}

.ctd-tltx-btn-active {
  color: #e07b1a;
  border-color: #e07b1a;
  background: #fff8f0;
}

.ctd-tltx-btn-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ctd-msp-wrap {
  margin-top: 30px;
}

.ctd-msp-title {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 600;
  color: #222;
}

.ctd-msp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ctd-msp-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1 1 180px;
  min-width: 170px;
  padding: 25px 20px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all .15s ease;
}

.ctd-msp-card:hover {
  border-color: #E11F26;
  background-color: #FDF2E9;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.ctd-msp-card:hover .ctd-msp-link {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctd-msp-sku {
  font-size: 18px;
  font-weight: 700;
  color: #1F1F1F;
}

.ctd-msp-link {
  font-size: 14px;
  color: #666666;
}

.ctd-msp-card-active {
  background: #fdf0e6;
  border-color: #e8842a;
}

.ctd-msp-card-active .ctd-msp-sku {
  color: #222;
}

.ctd-msp-card-active .ctd-msp-link {
  color: #e8842a;
}

.header-button .plain.is-outline {
	text-transform: none;
}
.header-button .plain.is-outline,
a.button.white {
    background-color: #fff !important;
    color: #666666 !important;
    border: 1px solid #666666;
    border-radius: 8px;
    padding-top: 2px;
}
.header-button .plain.is-outline span, 
a.button.white span {
	font-size: 16px;
    font-weight: 600 !important;
    font-family: 'Source Sans 3';
}

.header-button .plain.is-outline:hover, 
a.button.white:hover {
  background-color: #FDF2E9 !important;
  border: 1px solid #E11F26;
  color: transparent; !important;
  box-shadow: none;
}
.header-button .plain.is-outline:hover span, 
a.button.white:hover span {
	background: linear-gradient(to right, #E11F26, #E34325, #EB9623);
  	-webkit-background-clip: text;
  	background-clip: text;
  	-webkit-text-fill-color: transparent;
  	color: transparent; /* fallback cho trình duyệt không hỗ trợ */
}



@media (max-width: 600px) {
  .ctd-msp-card {
      flex: 1 1 100%;
  }
}

@media screen and (min-width: 850px) {
    .lg-x0 {
        left: 15px;
    }
}