.bg-gra{
	background: linear-gradient(180deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%);
 	
} /* Gốc*/

/*.bg-gra{
	background-color: #d22e25 !important;
} ?* Tết*/

/* Banner */
@media only screen and (max-width: 1366px) {
    
    .col-text-banner {
        order: 2; /* Đưa cột đầu tiên xuống dưới */
    }
	.col-text-banner .text {
	padding: 0 15px 0px;
	}
	.col-text-banner .col-inner{
		text-align: center;
	}
	.col-text-banner .col-inner a {
    margin-bottom: 40px !important;
	}
    .col-image-banner {
        order: 1; /* Đưa cột thứ hai lên trên */
    }
}

.col-text-banner {
	display:flex;
	align-items: center;
}

.col-text-banner h1 {
    font-size: 2.6rem;
    line-height: 1.5;
    margin-bottom: 0.2em;
    margin-top: 1.1em;
    padding: 0;
}
.col-text-banner p {
	font-size: 1.7rem;
	color: #00689f;
}
.col-text-banner .col-inner a{
	margin: 0;
	line-height: 55px;
	
}

.sp-du-an-noi-bat p {
	font-size: 18px;
	font-weight: bold;
}

/* Nút bấm bình thường bootrap */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-success {
    color: #fff;
    background-color: #6da13a;
    border-color: #6da13a;
}
/* Nút trên banner */
.btn-trang {
		font-weight: 500 !important;
    line-height: 55px;
    color: #007fc1 !important;
    overflow: hidden;
    position: relative;
    display: inline-block;
}


/* Nút bấm gradi accordion*/
[id^="sp-ea-"].sp-easy-accordion>.sp-ea-single {
	border-radius: 20px;
	border: 1px;
}

[id^="sp-ea-"].sp-easy-accordion > .sp-ea-single .ea-expand {
	border-radius: 20px !important;
	border: 1px;
}

.sp-collapse {
	border-radius: 20px;
}

[id^="sp-ea-"].sp-easy-accordion > .sp-ea-single {
	background: white !important;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

[id^="sp-ea-"].sp-easy-accordion > .sp-ea-single .ea-body{
		border-radius:20px;
}

[id^="sp-ea-"].sp-easy-accordion>.sp-ea-single
{
    border-radius: 24px;
		border: 1px;
}

.sp-collapse {
	border-radius: 20px;
}

[id^="sp-ea-"].sp-easy-accordion>.sp-ea-single>.ea-header a .ea-expand-icon
{
    color: unset !important;
}

.sp-easy-accordion .sp-ea-single .ea-header a {
    font-size: 16px;
	color:#007fc1 !important;/* Gốc*/
		/*color:#d22e25 !important; /*Tết */
}

.sp-easy-accordion .sp-ea-single .ea-header a:hover {
    color: white !important;
}

.sp-easy-accordion .sp-ea-single .ea-header:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: auto;
	color: white;
    transform-origin: left  center;
    transform: scale(0, 1); 
    transition: transform 0.5s cubic-bezier(0.37, 0.31, 0.2, 0.85);
    z-index: -1;
	background-image: linear-gradient(266deg, rgba(0,205,221,1) 0%, rgba(0,146,227,1) 50%, rgba(0,98,207,1) 100%); /* Gốc*/
/*background: linear-gradient(90deg, rgba(227, 0, 0, 1) 0%, rgb(207, 40, 40) 100%); /*Tết */
		border-radius: 20px;
}

.ea-card .ea-header { 
	position: relative;
	 overflow: hidden; /* Ẩn phần hiệu ứng nằm ngoài nút */
    z-index: 1;
	border-radius: 20px;
}
.ea-card .ea-header:hover:before {
	transform: scale(1, 1); /* Khi hover vào nút, nền sẽ phóng to từ phải sang trái */
}

.ea-expand > .ea-header > a[aria-expanded="true"] { 
	border-radius:20px;
	color: white !important;
	background: linear-gradient(266deg, rgba(0,205,221,1) 0%, rgba(0,146,227,1) 50%, rgba(0,98,207,1) 100%);/* Gốc*/
	/*background: linear-gradient(90deg, rgba(227, 0, 0, 1) 0%, rgb(207, 40, 40) 100%);/*Tết */
}

/* .scroll-to-bullets {
	opacity: 0;align-content}
.slider-nav-light .flickity-page-dots .dot.is-selected, .slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {
    opacity: 1!important;
    background-color: black;
}
.slider-nav-light .flickity-page-dots .dot {
    background-color: #111;
} */



/* 
.flickity-page-dots {
    bottom: -25px;
    left: 20%;
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 20%;
    text-align: center;
}
.flickity-page-dots .dot {
    border: 3px solid #111;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    margin: 0 5px;
    opacity: .4;
    transition: opacity .3s;
    width: 16px;
} */

.goi-web-col > .col-inner {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px;
}

.goi-web-col .tarieven-title .col-inner {
	border-radius: 15px 15px 0 0;
}

.goi-web-col .col-dang-ky .col-inner {
	border-radius: 0 0 15px 15px;
}

.goi-web-mo-dau-title div {
	background: linear-gradient(90deg, rgba(35, 138, 219, 1) 0%, rgba(10, 97, 201, 1) 50%, rgba(10, 64, 201, 1) 100%);
}

.goi-web-co-ban-title div {
	background: linear-gradient(90deg, rgba(10, 132, 201, 1) 0%, rgba(10, 184, 201, 1) 50%, rgba(10, 201, 163, 1) 100%);
}

.goi-web-chuan-seo-title div {
	background: linear-gradient(90deg, rgba(107, 34, 255, 1) 0%, rgba(158, 51, 193, 1) 50%, rgba(165, 51, 193, 1) 100%);
}

.goi-web-nang-cao-title div {
	background: linear-gradient(90deg, rgba(227,204,52,1) 0%, rgba(227,149,52,1) 50%, rgba(227,110,52,1) 100%);
} 

.goi-web-col {
	margin:auto;
}

.ly-do-col > .col-inner {
	height:250px;
/* 	justify-content:center;
	align-content:center; */
}

#row-1615292948 > .col > .col-inner:hover {
	color:white;
  background-color: #175A95;
}

.cau-hoi-thuong-gap {
	background-color:
}

.cau-hoi-thuong-gap  .accordion-title {
	background-color:#f6f6f6;
	color:black;
}

.accordion-inner {
	background-color:#E8F0FF;
}
.text-col-white p {
	color: white; 
}
.text-row-white h2 {
	color: white; 
}


#tab_container_4597 .wpsm_nav-tabs li a {
    border-radius: 10px 0px 0 10px !important;
}

.check-icon-image {
	width:10%;
}

.price-list-package-item-info {
    word-spacing: 1px;
    font-size: 14px;
}
.price-list-package-item-info>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.price-list-package-item-info>ul li {
    padding: 8px 2px;
    border-bottom: 1px solid #EAEAEA;
}
.price-list-package-renew .label {
    font-size: 12px;
}
.label-warning, .alert-warning, .panel-warning {
    color: #FFFFFF;
    background-color: #FFC008;
    border-color: #FBBD08 !important;
}
.label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger {
    padding: 2px 7px 2px 7px;
    font-size: 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
}
.icon-box-hover {
  background-color: rgba(255, 255, 255, 0.1); /* Màu nền ban đầu */
  border-radius: 8px;
  padding: 20px;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Hiệu ứng chuyển động */
}

.icon-box-hover:hover {
  background-image: linear-gradient(145deg, #0039e4, #04dbf1); /* Màu nền khi hover */
  transform: scale(1.05); /* Phóng to khi hover */
}

.icon-box-hover .icon-inner {
  color: #ffffff; /* Màu icon ban đầu */
  transition: color 0.3s ease; /* Hiệu ứng chuyển màu cho icon */
}

.icon-box-hover:hover .icon-inner {
  color: #000000; /* Màu icon khi hover */
}

.icon-box-hover h3, .icon-box-hover p {
  color: #ffffff; /* Màu chữ ban đầu */
  transition: color 0.3s ease;
}

.icon-box-hover:hover h3, .icon-box-hover:hover p {
  color: #000000; /* Màu chữ khi hover */
}

/* .danh-muc-web .icon-box-t h3 {
	color:black;
}

.danh-muc-web .icon-box-hover:hover h3 {
	color:white;
} */

.custom-column > .col-inner {
    background-color: rgb(239, 239, 239) !important ;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.box-text-dz .box-text:hover * {
  color: white !important; /* Đổi tất cả chữ bên trong thành màu trắng */
}

.item-detail-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    text-align: center;
    z-index: 2;
	padding: 12px 20px 36px;
}

.top-design .top-design-steps {
    margin-top: 53px;
    border: 2px solid #677CFF;
    border-radius: 20px;
    overflow: hidden;
}

.top-design .top-design-steps .step {
    border-radius: 20px 20px 0 0;
    position: relative;
    min-height: 98px;
    background: white;
    padding-bottom: 20px;
}

.content-quy-trinh p {
	font-size:15px;
}

.footer-dich-vu {
	width:100%;
}

.absolute-footer {
	display:none;
}

.sec-back-color {
	background: #F8EBD7;
}

/* .col-kho-khan .col-inner {
	width: 100%;
	height: 350px;
	border-radius: 50% !important;
	align-content: center;
}

.col-kho-khan .col-inner:hover {
	background: linear-gradient(180deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%);
	transition: opacity 0.5s ease;
}

.col-kho-khan .col-inner .icon-box-text {
	width: 90%;
}

.col-kho-khan .col-inner:hover p {
	color: white;
}

.col-kho-khan .col-inner:hover .icon-box-img {
	filter: brightness(0) invert(100%);
} */

.dac-diem-can-co-text, .dac-diem-heading {
	color: white !important;	
}

@media (max-width:480px) {
	.row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col {
    margin-bottom: 0;
    padding: 0 0px 18.6px;
}
	
	.ly-do-col > .col-inner {
		height:250px;
	}
	
	.image-box-dich-vu .box-image img {
    width:100%;
		padding:10px;
	}
	

.form-lien-he-brandinfo input[type="submit"] { 
	background: #FCB03F !important; /* Gốc*/
	/*background: linear-gradient(263deg, rgba(216,177,105,1) 0%, rgba(239,205,128,1) 32%, rgba(211,172,101,1) 62%, rgba(233,198,122,1) 100%)!important;/* Tết*/
	border-radius: 100px;
	width: 70%;
	padding: 7px;
	color: #007FC1;
	}
}

.loi-ich-section {
	    background: linear-gradient(180deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%);
}
/* hình ảnh phòng khám ở giữa các column lợi ích khi thiết kế website phòng khám ở xung quanh */
.mid-image-col {
    background-image: url('https://brandinfo.com.vn/wp-content/uploads/2024/12/phong-kham-da-khoa-300x169.jpeg');
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    margin-bottom: 27px;
    border-radius: 20px; 
    overflow: hidden; 
}

/* đổ màu cho ảnh icon section lợi khi có website phòng khám */
.loi-ich-phong-kham-col .image-box-loi-ich-phong-kham {
	z-index: 2;
  	filter: brightness(0) invert(1);
}
/* Cách buớc làm web Trang chủ */
.reversed-arrow {
	transform: translateY(calc(100% + 50px)) rotateY(180deg) !important;
    left: inherit !important;
    right: 50%;
}
.box-arow .box {
	position: absolute;
    left: 50%;
    transform: translateX(-100%);
}
.box-arow .col-inner .step {
	color: #007FC1;
    font-size: 50px;
    margin-bottom: 10px;
	font-weight: 500;
}
.box-arow .col-inner .step-content {
	color: #007FC1;
    font-size: 25px;
    margin-bottom: 10px;
    line-height: 1.2;
	font-weight: 500;
}
.box-arow .align-middle:not(:last-child){
	 margin-bottom: 170px;
}
.box-arow .arrows_steps {
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(calc(100% + 50px));
}
/* Kết thúc */
.anh-quy-trinh {
	background-size: cover; 
	border-radius: 20px;
	overflow: hidden; 
}

/* Chạy chữ */
.marquee-container {
	display: flex;
  align-items: center;
  width: 100%;
        overflow: hidden;
    white-space: nowrap;
    position: relative;
    }

  .marquee-content {
        display: flex;
		align-items: center;
        padding-left: 100%; /* Khoảng cách để có hiệu ứng nối tiếp */
        animation: marquee 23s linear infinite;
			color: #f1f5fa;
  font-size: 120px;
  font-weight: bold;
  line-height: 1.085;
    }

    @keyframes marquee {
        from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/* Lợi ích thiết kế web */
.tabs-custom .nav>li :hover {
	color:white;
}
.tabs-custom .nav .active {
	background-image: linear-gradient(278deg, rgba(0, 150, 199, 1) 0%, rgba(0, 59, 176, 1) 50%, rgba(3, 4, 94, 1) 100%);/* Gốc*/
	/*background: linear-gradient(277deg, rgba(227,0,0,1) 0%, rgba(207,40,40,1) 50%, rgba(182,13,13,1) 100%); /*tết*/
}
.tabs-custom .nav .active a {
	color:white;
}


/* Hiệu ứng hover hình ảnh */
.hover-img {
	overflow: visible;
}
.hover-img img {
	will-change: transform; /* Cải thiện hiệu suất */
    transition: transform 0.2s ease; /* Thêm hiệu ứng chuyển tiếp */
}


/* bảng giá */
.bang-gia-title {
	font-family: "Saira", sans-serif;
}
.bang-gia-title .tile-heading {
	text-align: center;
    font-weight: bold;
    padding: 10px 0;
    position: relative;
   
    font-size: 25px;
}
.bang-gia-title .title-body {
	opacity: .7;
    padding: 5px 0;
    text-align: center;
}
.bang-gia-title .title-bottom {
	text-align: center;
    position: relative;
    padding: 10px 0 15px 0;
    margin-bottom: 15px;
	font-size: 25px;
}
.bang-gia-title .title-bottom:after {
    position: absolute;
    width: 80px;
    height: 2px;
    content: "";
    background-color: white;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Nú bảng giá  */
.col-dang-ky .button{
	border: 0;
}

/* Thông tin số đếm */
.icon-thongtin {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.icon-thongtin .icon-box-text{
	text-align:center;
	color : #fff;
}
.icon-thongtin .icon-box-img img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(103%) contrast(102%);
}
.icon-thongtin .stat-num {
    display: block;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0;
}

.icon-thongtin .stat-desc {
	text-align: center;
    font-size: 1.25rem;
    font-weight: 400;
    display: block;
    text-transform: capitalize;
}
.icon-box-text .stat-desc :after {
    content: '';
    display: block;
    vertical-align: top;
    width: 2px;
    height: 23px;
   margin: 5px auto 0; /* Căn giữa và điều chỉnh khoảng cách */
    opacity: 0.2;
    -webkit-transition: background-color 0.3s, height 0.3s, margin 0.3s;
    transition: background-color 0.3s, height 0.3s, margin 0.3s;
    background-color: #fff;
}
.row-info .col {
	    margin-top: 17px;
    padding: 30px 0px 22px 0px;
    border-radius: 18px;align-content
}
.row-info  .col:hover {
	transition: transform 0.3s ease, filter 0.3s ease;
	background-color: #fff;
	height:100%;
	
}
.row-info  .col:hover .icon-box-text {
	color: rgb(30, 115, 190);/* Gốc*/
    /*color: #d22e25 /*Tết */;
}
.row-info .col:hover .icon-box-text .stat-desc :after {
    height: 0 !important;
}
.row-info .col:hover .icon-box-img .icon img {
    /*filter: brightness(0) saturate(100%) invert(27%) sepia(68%) saturate(4051%) hue-rotate(348deg) brightness(85%) contrast(93%);/*Tết *//* Thay đổi màu của icon nếu cần */
      filter: brightness(0) saturate(100%) invert(27%) sepia(68%) saturate(4051%) hue-rotate(348deg) brightness(85%) contrast(93%);

}
/* Thông tin số đếm trên mobi*/
@media (max-width: 750px) {
	.row-info .col{
		margin:13px;
	}
}

/* Footer */
.footer-section {
	background-color:#00689f; /* Gốc*/
	/*background-color:#d22e25; /* Tết*/
}


/* Dịch vụ nổi bật trang giới thiệu */
.section-uu-diem-vut-troi {
    font-weight: 600;
/*     background: linear-gradient(93deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%); */
	/*background: #d22e25;/* Tết*/
	background: linear-gradient(93deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%);
}
.section-uu-diem-vut-troi .row {
	height: 440px;
    position: relative;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    max-width: 1200px;
    margin: auto;animation-iteration-count
}
.section-uu-diem-vut-troi .row:after {
    font-size: 40px;
    color: #fff;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    transform: translateY(-50%);
    width: 50%;
    left: 0;
	content: "Ưu điểm vượt trội";
}
.section-uu-diem-vut-troi .row .col-inner {
	position: fixed;
    top: 100px;
    height: 100%;
    width: 50%;
    left: unset;
    right: calc(calc(100% - 1200px) / 2);
    max-width: 600px;
}
.text-uu-diem ul {
	list-style: none;
    font-size: 38px;
    position: relative;
	color: #fff
}
.text-uu-diem ul li:nth-child(odd) {
    color: #fcb040;
}
/* Phiên bản điện thoại */
@media only screen and (max-width: 770px) {
    .section-uu-diem-vut-troi .row {
        max-width: 720px;
    }
	.section-uu-diem-vut-troi .row .col-inner{
		right: 20px;
        max-width: unset;
        width: calc(50% - 20px);
        left: unset;
	}
	.section-uu-diem-vut-troi .row:after{
		left: 20px;
        font-size: 16px;
        width: calc(50% - 20px);
	}
	.text-uu-diem ul li {
		
        font-size: 16px;
	}
	
}

/* Giá trị khác biệt */
.col-giai-tri-khac-biet {
	max-width: 987px;
    margin: 0 auto;
}
.col-giai-tri-khac-biet ul {
	padding-left: 10px;
    color: #444;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.col-giai-tri-khac-biet ul li {
	width: 43%;
    margin-bottom: 46px;
    position: relative;
}
.col-giai-tri-khac-biet ul p {
	padding-right: 50px;
}
.col-giai-tri-khac-biet ul img {
	position: absolute;
    top: 0;
    left: -20px;
    z-index: -1;
    opacity: 0;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    pointer-events: none;
}
.col-giai-tri-khac-biet ul li:hover img {
    opacity: 1;
    top: -10px;
}
.col-giai-tri-khac-biet ul li h5 {
	margin-bottom: 0;
}
.col-giai-tri-khac-biet ul li h2 {
	margin-bottom: 15px;
}
.fade:not(.no-fade) {
    -webkit-transition: opacity .5s ease-in-out .1s, -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1) .4s;
    transition: opacity .5s ease-in-out .1s, clip-path 1.5s cubic-bezier(.19,1,.22,1) .4s, -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1) .4s;
    -o-transition: opacity .5s ease-in-out .1s, clip-path 1.5s cubic-bezier(.19, 1, .22, 1) .4s;
    opacity: 1;
}
/* Phiên bản mobi */
@media only screen and (max-width: 767px) {
	.col-giai-tri-khac-biet ul {
		padding-left: 0;
	}
	.col-giai-tri-khac-biet ul li{
		margin-bottom: 20px;
		width: 100%;
	}
	.col-giai-tri-khac-biet ul li h5 {
		font-size: 30px;
	}
	.col-giai-tri-khac-biet ul p {
		padding-right: 20px;
	}
}
/* Những thành quả đạt được */
.row-thanh-qua {
	display: flex;
    align-items: center;
}
/* Kêu gọi hành động */
.row-keu-goi {
	padding-top: 40px;
    border-radius: 20px;
}
.box-nha-hang {
	border: 3px dashed #007FC1; /* Đường viền nét đứt */ /* Gốc*/
  /*border: 3px dashed #d22e25; /* Đường viền nét đứt */ /* Tết*/
  width: 700px;
  height: 70px;
	border-radius: 20px;
	 margin-top: 20px !important;
		  
}
.box-nha-hang:hover  {
	border: 3px solid #007FC1; /* Đường viền nét liền */ /* Gốc/
  /*border: 3px solid #d22e25; /* Đường viền nét liền */ /* Tết*/
  width: 700px;
  height: 70px;
	border-radius: 20px;
}

.dich-vu-colson .col-inner {
  position: relative;
  overflow: hidden;
  background-color: #fff; /* Màu nền ban đầu */
}

.dich-vu-colson .col-inner img {
  /*filter: brightness(0) saturate(100%) invert(27%) sepia(68%) saturate(4051%) hue-rotate(348deg) brightness(85%) contrast(93%); /* Tết */
	filter: brightness(0) saturate(100%) invert(40%) sepia(44%) saturate(1516%) hue-rotate(177deg) brightness(92%) contrast(95%);

  transition: filter 1s ease, transform 1s ease; /* Thêm transition cho filter và transform */
}

.dich-vu-colson .col-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px; /* Thay đổi thành chiều cao của phần tử */
  background-color: rgba(0, 205, 221, 1); /* Màu xanh thay vì hồng */
  border-radius: 25px; /* Áp dụng border-radius */
  transition: opacity 0.5s ease; /* Thay đổi độ trong suốt */
  z-index: 0; /* Đặt sau nội dung */
}

.dich-vu-colson .col-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Bắt đầu từ ngoài bên trái */
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 205, 221, 1) 0%, rgba(0, 146, 227, 1) 50%, rgba(0, 98, 207, 1) 100%); /* Gradient xanh */
  transition: left 0.5s ease; /* Thay đổi thời gian và hiệu ứng chuyển động nếu cần */
  z-index: 1; /* Đặt trên lớp nền */
}

.dich-vu-colson .col-inner:hover::after {
  left: 0; /* Đẩy vào trong khi hover */
}

.dich-vu-colson .col-inner:hover::before {
  opacity: 0; /* Làm mờ border-top khi hover */
}

.dich-vu-colson .col-inner h3,
.dich-vu-colson .col-inner p,
.dich-vu-colson .col-inner img {
  position: relative; /* Để nội dung nằm trên lớp nền */
  z-index: 2; /* Đặt trên lớp nền */
}

.dich-vu-colson .col-inner:hover h3,
.dich-vu-colson .col-inner:hover p {
  color: white; /* Màu chữ khi hover */
}

.dich-vu-colson .col-inner:hover img {
  transform: rotateY(360deg); /* Giữ hiệu ứng xoay */
  filter: brightness(1) saturate(100%) invert(100%) sepia(0%) hue-rotate(0deg) contrast(100%); /* Chỉnh lại màu ảnh khi hover */
}

/* Chạy chữ */
.marquee-containerson {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
	 margin: 10px 0; /* Tăng khoảng trắng phía trên và dưới */
    /* hoặc */
    padding: 10px 0; /* Tăng khoảng trắng phía trên và dưới */
}

.marquee-contentson {
    display: flex;
    align-items: center;
    padding-left: 100%; /* Khoảng cách để có hiệu ứng nối tiếp */
    animation: marqueeson 23s linear infinite; /* Sử dụng tên hiệu ứng mới */
    color: #f1f5fa;
    font-size: 40px; /* Giảm kích thước chữ */
    font-weight: 600; /* Độ đậm vừa để rõ hơn */
    line-height: 1.2; /* Điều chỉnh khoảng cách giữa các dòng */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Thêm bóng để chữ rõ hơn */
}

/* Hiệu ứng chạy chữ */
@keyframes marqueeson {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/*Lựa chọn cty */
/* Định dạng cho toàn bộ các phần tử */
.service-item-son {
  text-align: justify; /* Căn chỉnh đều văn bản */
  margin-bottom: 10px; /* Khoảng cách giữa các mục */
  display: flex;
  align-items: center; /* Căn giữa các phần tử theo chiều dọc */
}

.icon-text-son {
  display: flex;
  align-items: center; /* Căn giữa biểu tượng và văn bản theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa biểu tượng và văn bản */
  flex-wrap: wrap; /* Cho phép các phần tử xuống dòng nếu quá dài */
}

.icon-son {
  flex-shrink: 0; /* Đảm bảo biểu tượng không bị co lại */
}

span-son {
  font-size: 100%; /* Kích thước font chữ */
  line-height: 1.5; /* Tăng khoảng cách giữa các dòng văn bản */
  font-weight: 400; /* Độ đậm của văn bản */
  max-width: calc(100% - 35px); /* Giới hạn chiều dài văn bản để phù hợp với chiều rộng của biểu tượng */
}

/* Đảm bảo văn bản không dài quá và có giãn cách đẹp */
.service-item-son span-son {
  word-wrap: break-word; /* Cho phép văn bản xuống dòng khi quá dài */
}


/* =====================================================
   BRANDINFO - BACK TO TOP FLATSOME
   Thiết kế tối giản, đồng bộ màu nút chatbot
   ===================================================== */

html body button#top-link.back-to-top {
    position: fixed !important;
    right: 32px !important;
    bottom: 18px !important;
    z-index: 99999 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #0498d0 0%,
        #00afd0 55%,
        #32d39a 100%
    ) !important;

    box-shadow: 0 8px 20px rgba(0, 112, 170, 0.28) !important;

    text-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease !important;
}

/* Ẩn icon font mặc định của Flatsome */
html body button#top-link.back-to-top > i,
html body button#top-link.back-to-top > i::before {
    display: none !important;
    content: none !important;
}

/* Vẽ mũi tên đơn giản bằng CSS */
html body button#top-link.back-to-top::before {
    content: "" !important;

    display: block !important;
    width: 11px !important;
    height: 11px !important;

    margin-top: 5px !important;

    border-top: 2.5px solid #ffffff !important;
    border-left: 2.5px solid #ffffff !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    background: transparent !important;

    transform: rotate(45deg) !important;
    transition: transform 0.22s ease !important;
}

/* Loại bỏ vòng tròn trang trí cũ */
html body button#top-link.back-to-top::after {
    content: none !important;
    display: none !important;
}

/* Hover nhẹ */
html body button#top-link.back-to-top:hover {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #32d39a 0%,
        #00afd0 50%,
        #0498d0 100%
    ) !important;

    box-shadow: 0 11px 26px rgba(0, 112, 170, 0.36) !important;

    filter: brightness(1.05);
    transform: translateY(-3px) !important;
}

html body button#top-link.back-to-top:hover::before {
    transform: translateY(-2px) rotate(45deg) !important;
}

html body button#top-link.back-to-top:active {
    transform: scale(0.94) !important;
}

html body button#top-link.back-to-top:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95) !important;
    outline-offset: 3px !important;
}

@media (max-width: 849px) {
    html body button#top-link.back-to-top {
        right: 28px !important;
        bottom: 14px !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    html body button#top-link.back-to-top::before {
        width: 10px !important;
        height: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body button#top-link.back-to-top,
    html body button#top-link.back-to-top::before {
        transition: none !important;
    }
}

/* =========================================================
   MENU KIẾN THỨC - MENU CON XỔ SANG PHẢI
========================================================= */

@media (min-width: 850px) {

    /* Menu xổ xuống từ Kiến thức */
    #header .brandinfo-kienthuc-menu > .nav-dropdown {
        display: block !important;
        width: 260px !important;
        min-width: 260px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Từng mục cấp 2 */
    #header .brandinfo-kienthuc-menu > .nav-dropdown > li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .brandinfo-kienthuc-menu > .nav-dropdown > li > a {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       MENU CON CỦA MARKETING
    ===================================================== */

    #header .brandinfo-kienthuc-menu > .nav-dropdown > li:nth-child(3) > .sub-menu {
        position: absolute !important;

        top: 0 !important;
        left: 100% !important;

        width: 260px !important;
        min-width: 260px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: none !important;

        background: #fff !important;
        z-index: 99999 !important;
    }


    /* Khi rê chuột vào Marketing thì mới hiện menu con */
    #header .brandinfo-kienthuc-menu > .nav-dropdown > li:nth-child(3):hover > .sub-menu {
        display: block !important;
    }


    /* Các mục Facebook / Google */
    #header .brandinfo-kienthuc-menu > .nav-dropdown > li:nth-child(3) > .sub-menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .brandinfo-kienthuc-menu > .nav-dropdown > li:nth-child(3) > .sub-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        white-space: nowrap !important;
    }

}

/* =========================================================
   ĐỒNG NHẤT FONT TOÀN BỘ DROPDOWN MENU
========================================================= */

@media (min-width: 850px) {

    /* Tất cả chữ trong menu xổ xuống */
    #header .nav-dropdown li > a,
    #header .nav-dropdown .sub-menu li > a {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;

        color: #666666 !important;

        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* Các mục có menu con như Marketing */
    #header .nav-dropdown li.menu-item-has-children > a,
    #header .nav-dropdown li.has-dropdown > a {
        font-size: 17px !important;
        font-weight: 400 !important;
        color: #666666 !important;
        text-transform: none !important;
    }

    /* Menu con cấp tiếp theo */
    #header .nav-dropdown .sub-menu li > a {
        font-size: 17px !important;
        font-weight: 400 !important;
        color: #666666 !important;
    }

    /* Hover */
    #header .nav-dropdown li > a:hover,
    #header .nav-dropdown .sub-menu li > a:hover {
        color: #0789c8 !important;
    }
}

/* =========================================================
   THIẾT KẾ WEBSITE - MEGA MENU 2 CỘT
   CĂN MÉP TRÁI THEO MENU "THIẾT KẾ WEBSITE"
========================================================= */

@media (min-width: 850px) {

    /* Menu cha làm mốc định vị cho dropdown */
    #header .brandinfo-thietke-menu {
        position: relative !important;
    }

    /* Dropdown */
    #header .brandinfo-thietke-menu > .nav-dropdown {
        width: 620px !important;
        min-width: 620px !important;

        /* QUAN TRỌNG:
           Không căn dropdown vào giữa menu cha nữa */
        left: 0 !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        -webkit-transform: none !important;

        /* Chia 2 cột */
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        /* 7 mục mỗi cột */
        grid-template-rows: repeat(7, auto) !important;

        /* Đi từ trên xuống rồi mới sang cột thứ 2 */
        grid-auto-flow: column !important;

        padding: 20px 20px !important;

        box-sizing: border-box !important;
    }

    /* Từng item */
    #header .brandinfo-thietke-menu > .nav-dropdown > li {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Link */
    #header .brandinfo-thietke-menu > .nav-dropdown > li > a {
        display: block !important;
        width: 100% !important;

        padding: 12px 12px !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   FOOTER BRANDINFO - LINK
========================================================= */

/* Link chữ trong footer */
.footer-section a:not(.button) {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Link đã truy cập vẫn giữ màu trắng */
.footer-section a:not(.button):visited {
    color: #ffffff !important;
}

/* Hover link */
.footer-section a:not(.button):hover {
    transform: translateX(4px);
}

/* Dấu chấm danh sách */
.footer-section li::marker {
    color: #ffffff !important;
}


/* =========================================================
   FOOTER - KHOẢNG CÁCH ICON VÀ CHỮ
========================================================= */

/*
 * Chỉ áp dụng cho icon nội dung liên hệ.
 * Không dùng selector rộng i[class*="icon-"] ở footer
 * để tránh tác động nhầm vào social/search icon.
 */
.footer-section .text i,
.footer-section .text svg {
    margin-right: 5px !important;
    vertical-align: middle;
}

/* Cấu trúc thực tế: <li><i>...</i><a>...</a></li> */
.footer-section .contact-info li > i,
.footer-section .contact-info li > svg {
    margin-right: 5px !important;
    vertical-align: middle;
}


/* =========================================================
   GLOBAL FIX - FLATSOME ICONS
   Áp dụng toàn website vì home-page.css đang được enqueue toàn site
   Fix: Follow icon, Search icon và các icon mặc định của Flatsome
========================================================= */

/* Khôi phục font icon mặc định của Flatsome */
html body i[class^="icon-"],
html body i[class*=" icon-"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;

    font-family: "fl-icons" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;

    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;

    speak: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Glyph thật của Flatsome nằm trong ::before */
html body i[class^="icon-"]::before,
html body i[class*=" icon-"]::before {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;

    font-family: "fl-icons" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Icon nằm trong button/link dạng icon-only */
html body a.icon > i[class^="icon-"],
html body a.icon > i[class*=" icon-"],
html body .button.icon > i[class^="icon-"],
html body .button.icon > i[class*=" icon-"],
html body button.icon > i[class^="icon-"],
html body button.icon > i[class*=" icon-"] {
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Căn giữa icon trong nút tròn / social button */
html body a.icon,
html body .button.icon,
html body button.icon,
html body .social-icons a,
html body .follow-icons a {
    align-items: center !important;
    justify-content: center !important;
}

/* Follow / social icon */
html body .social-icons a > i,
html body .follow-icons a > i {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Search icon */
html body i.icon-search,
html body .searchform i.icon-search,
html body .header-search i.icon-search,
html body .header-search-form-wrapper i.icon-search {
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: "fl-icons" !important;
}