/**
* Theme Name:     Hiroshi Lord
* Author:         Hiroshi Lord
* Template:       flatsome
* Text Domain:	   k-tech
* Description:    Theme Build by Hiroshi Lord
* Version:        2025
*/

/* DEFAULT NO BORDER AND LINE-THROUGH */
.section-title-center b {
	opacity: 0;
}

.section-title-normal {
	border-bottom: none;
}

.wpcf7-spinner {
	display: none;
}

.section-title-normal span {
	border-bottom: none;
}

.text-cap {
	span {
		text-transform: capitalize;
	}
}

.border-radius {
	border-radius: 8px;
	overflow: hidden;

	img {
		border-radius: 8px;
	}
}

.d-flex {
	display: flex;
}

footer {
	.absolute-footer {
		display: none;
	}

	.sec-footer {
		.custom-menu-white .ux-menu-link__text {
			color: #ffff !important;
			text-align: left !important;
		}

		.social-icons {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.logo-left {
	.logo{
		margin-right:0!important;
	}
}


.text-overflow {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* Giới hạn tối đa 2 dòng */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Hiện dấu ... nếu vượt quá */
	white-space: normal;
	/* Cho phép xuống dòng */

	a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* Giới hạn tối đa 2 dòng */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		/* Hiện dấu ... nếu vượt quá */
		white-space: normal;
		/* Cho phép xuống dòng */
	}
}

.d-none {
	display: none !important;
}

.header-main {
	.nav {
		&>li {
			&>a {
				color: #fff;
			}

			&.active {
				&>a {
					color: var(--fs-color-secondary);
				}
			}
		}

	}
}


/* END */

.sec-one-home {
	.custom-row-info {
		margin-top: 17rem !important;

		@media screen and (max-width:768px) {
			margin-top: 20px !important;

		}

		.col {
			.col-inner {
				position: relative;
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 20px 0px 20px 0px;
				gap: 15px;
				padding: 15px 20px;
				transition: all .3s;

				.icon-box-img {
					display: flex;
					align-items: center;
				}

				&:hover {
					background: #1f2732;
					transform: scale(1.05);
				}

			}
		}
	}

	@media screen and (max-width:768px) {
		.img-inner {
			padding-top: 180px !important;

			.overlay {
				background-color: rgba(0, 0, 0, .4)!important;
			}
		}
	}
}

.sec-two-home {
	background-image: url('http://localhost:8888/info464/wp-content/uploads/2025/10/iconBgChoose.svg');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;

	.row {
		.flickity-button {
			.flickity-button-icon {
				fill:#fff!important;
				.arrow {
					fill:#fff!important;
				}
			}
		}

		.bsg-box-title {
			position: relative;
			padding-left: 2.5rem;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 100%;
				background: var(--fs-color-secondary);
				border-radius: 20px 0px;
			}
		}

		.col.large-3 {
			.col-inner {
				.icon-box {
					align-items: center;

					&:hover {
						cursor: pointer;
						transform: scale(1.02);

						.icon-box-img {
							&::before {
								border-color: var(--fs-color-secondary);
							}
						}
					}

					.icon-box-img {
						position: relative;
						justify-content: center;
						align-items: center;
						flex: 0 0 104px;
						max-width: 104px;
						height: 104px;
						background: var(--fs-color-secondary);
						border-radius: 100%;
						transition: all .3s;

						&::before {
							content: "";
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 120px;
							height: 120px;
							border: 4px solid transparent;
							border-radius: 100%;
							transition: all .3s;
						}

						.icon {
							height: 100%;

							.icon-inner {
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;

								img {
									width: 50%;
								}
							}
						}
					}

					.icon-box-text {
						.count-k {
							display: flex;
							align-items: center;
							font-size: 28px;
							gap: 3px;
							color: var(--fs-color-secondary) !important;
							font-weight: 700;
						}

						p {
							margin-bottom: 10px;
							font-weight: 600;
							font-size: 18px;
						}
					}
				}
			}
		}

		.col.large-4 {
			overflow:hidden;
			border-radius:16px;
			.col-inner {
				background:#0E223A;
				border-radius:16px;
				overflow:hidden;

				.box-image {
					padding:4px;
					img {
						border-radius:8px;
						overflow:hidden;
					}
				}
			}
		}
	}
}

.sec-three-home,
.sec-two-home,
.sec-three-about {
	.row {
		.col {

			.text-cap {
				.section-title-main {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: -30px;
						width: 10px;
						height: 100%;
						background: var(--fs-color-secondary);
						border-radius: 20px 0px;
					}
				}
			}

			.service-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: center; /* quan trọng để căn giữa */
				/* 				column-gap: 28px; */



				.service-item {
					width: calc((100% - 56px) / 3); /* 3 cột — gap 28*2 */
					margin-bottom: 30px;
					position: relative;
					transition: all .3s;
					padding: 50px;
					
					&:nth-child(7),&:nth-child(8) {
						margin:0;
					}

					@media screen and (max-width:768px) {
						cursor: pointer;
						transform: scale(1.02);
						background: #18202B;
						border-radius: 4rem 0px;
						width:100%;
					}

					&:hover {
						cursor: pointer;
						transform: scale(1.02);
						background: #18202B;
						border-radius: 4rem 0px;
					}

					.service-item__top {
						.title {
							font-size: 18px;
							margin-bottom: 8px;
							text-align: left;
							color: #fff;
						}

						.desc {
							display: block;
							display: -webkit-box;
							max-width: 100%;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							text-align: left;
							color: #d7d7d7;

							p{
								img {
									border-radius:16px;
									overflow:hidden;
									height:214px;
								}
							}
						}
					}

					.service-item__bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 34px;
						margin-top: 14px;
						border-top: 1px solid #3A4553;

						.btn--radius {
							position: relative;
							border-radius: 20px 0px 20px 0px;
							color: white;
							border: 1px solid var(--fs-color-secondary);
							background: var(--fs-color-secondary);
							padding: 13px 30px;
							overflow: hidden;

							&>* {
								position: relative;
								line-height: 1;
								z-index: 2;
							}

							&::after {
								position: absolute;
								content: "";
								width: 0px;
								height: 100%;
								top: 0px;
								right: 0px;
								z-index: 1;
								color: rgb(255, 255, 255);
								/* background: var(--fs-color-primary); */
								transition: 0.3s;
							}

							&:hover {
								/* color: rgb(255, 255, 255) !important;
								border-color: var(--fs-color-primary) !important; */

								&::after {
									left: 0px;
									width: 100%;
								}
							}
						}
					}
				}
			}
			
		}
	}
}


.sec-three-about {
	.row {
		.col {
			.sub-text {
				position: relative;
				color: #FFF;
				font-weight: 700;
				line-height: 1;
				margin: 0;
				text-align: center;

				&::before {
					position: absolute;
					content: "";
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 100%;
					height: 1px;
					background-color: #FFF;
				}

				.text {
					position: relative;
					background: #1F2732;
					padding: 0 10px;

					a {
						font-size: 20px;
						color: var(--fs-color-secondary);

						&:hover span {
							font-weight: 700 !important;
						}
					}
				}
			}

			/* ===== Contact Form 7 - Minimal Dark Style ===== */
			.bic-ctf7 {
				color: #fff;
				margin-top: 30px;

				@media screen and (max-width:768px) {
					.row {
						margin: unset;
					}
				}
			}

			/* Input, textarea */
			.bic-ctf7 .form-field {
				width: 100%;
				background: transparent;
				border: none;
				border-bottom: 1px solid #fff;
				color: #fff;
				padding: 8px 0;
				font-size: 16px;
				outline: none;
				transition: all 0.3s ease;
				box-shadow: none;
			}

			.bic-ctf7 .form-field::placeholder {
				color: #ccc;
				opacity: 0.8;
			}

			/* Hiệu ứng focus */
			.bic-ctf7 .form-field:focus {
				border-color: #ffb84d;
			}

			/* Textarea */
			.bic-ctf7 textarea.form-field {
				min-height: 120px;
				resize: none;
			}

			/* Submit button */
			.bic-ctf7 .form-submit {
				margin-top: 20px;
				text-align: center;
			}

			.bic-ctf7 .btn {
				width: 200px;
				margin: 0 auto;
				padding: 5px 15px;
				background: var(--fs-color-secondary);
				border-radius: 20px 0px 20px 0px;
			}

			.bic-ctf7 .btn:hover {
				background-color: #ffc966;
			}

			/* Responsive layout */
			.bic-ctf7-row {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
			}

			.bic-ctf7-row .col-lg-6,
			.bic-ctf7-row .col-md-6,
			.bic-ctf7-row .col-sm-12 {
				flex: 1 1 calc(50% - 20px);
			}

			.bic-ctf7-row .col-lg-12 {
				flex: 1 1 100%;
			}

			@media (max-width: 768px) {

				.bic-ctf7-row .col-lg-6,
				.bic-ctf7-row .col-md-6 {
					flex: 1 1 100%;
				}
			}

			/* ===== Autofill fix for Chrome / Edge / Safari ===== */
			.bic-ctf7 input:-webkit-autofill,
				.bic-ctf7 textarea:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
					/* nền trùng màu nền form */
					-webkit-text-fill-color: #fff !important;
					/* chữ trắng */
					caret-color: #fff !important;
					transition: background-color 9999s ease-in-out 0s;
					/* tránh hiệu ứng nhấp nháy */
			}

			.bic-ctf7 input:-webkit-autofill:focus,
				.bic-ctf7 textarea:-webkit-autofill:focus {
					border-bottom: 1px solid #ffb84d !important;
			}

			/* Firefox autofill */
			.bic-ctf7 input:autofill,
				.bic-ctf7 textarea:autofill {
					background-color: #1a1f25 !important;
					color: #fff !important;
			}


		}
	}
}


.sec-one-partner {
	.row {
		.col {
			.gallery-partner {
				.gallery-col {
					.col-inner {
						padding: 10px;
						border: 1px solid #ebebeb;
						transition: ease-in-out 0.3;

						/* border-width: 4px; */
						&:hover {
							border-color: #ebebeb;
						}
					}
				}
			}
		}
	}
}

.sec-one-contact {
	.row {
		.col {
			.bsg-box-title-contact {
				position: relative;
				padding-left: 2.5rem;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 10px;
					height: 100%;
					background: var(--fs-color-secondary);
					border-radius: 20px 0px;
				}
			}

			/* ---------- Layout container ---------- */
			.bic-ctf7 {
				max-width: 1200px;
				margin: 0 auto;
				color: #fff;
				font-family: "Inter", "Roboto", sans-serif;
				padding: 40px 20px;
				box-sizing: border-box;
			}

			/* Row layout: left + right columns */
			.bic-ctf7-row {
				display: flex;
				gap: 40px;
				align-items: flex-start;
				flex-wrap: wrap;
			}

			/* left column (inputs stacked) */
			.bic-ctf7 .col-left {
				flex: 1 1 55%;
				min-width: 280px;
			}

			/* right column (textarea) */
			.bic-ctf7 .col-right {
				flex: 1 1 40%;
				min-width: 260px;
			}

			/* form-group spacing */
			.bic-ctf7 .form-group {
				margin-bottom: 36px;
			}

			/* -------- Inputs / textarea styling -------- */
			.bic-ctf7 .form-field {
				display: block;
				width: 100%;
				background: transparent;
				border: none;
				border-bottom: 1px solid rgba(255, 255, 255, 0.12);
				color: rgba(255, 255, 255, 0.95);
				padding: 10px 6px;
				font-size: 15px;
				outline: none;
				box-sizing: border-box;
				transition: border-color .22s ease, box-shadow .22s ease;
				box-shadow: none;
			}

			/* Placeholder */
			.bic-ctf7 .form-field::placeholder {
				color: rgba(255, 255, 255, 0.75);
				opacity: 1;
			}

			/* Focus effect */
			.bic-ctf7 .form-field:focus {
				border-bottom-color: rgba(255, 184, 77, 0.95);
				/* cam nhấn */
				caret-color: rgba(255, 184, 77, 0.95);
			}

			/* Textarea specific */
			.bic-ctf7 textarea.form-field {
				min-height: 240px;
				resize: vertical;
				padding-top: 12px;
			}

			/* -------- Submit button (centered) -------- */
			.bic-ctf7 .form-submit {
				display: flex;
				justify-content: center;
				/* đặt nút ở giữa */
				margin-top: 10px;
			}

			.bic-ctf7 .btn {
				display: inline-block;
				min-width: 200px;
				padding: 8px 20px;
				font-weight: 700;
				letter-spacing: 0.02em;
				background: #9b5f26;
				/* màu nâu/đồng - thay đổi tuỳ theme */
				color: #fff;
				border: none;
				cursor: pointer;
				text-transform: uppercase;
				border-radius: 20px 0px 20px 0px;
				/* bo phải lớn hơn, hình giống ảnh */
				box-shadow: none;
				transition: transform .12s ease, background .12s ease;
			}

			.bic-ctf7 .btn:hover {
				transform: translateY(-2px);
				background: #b07736;
			}

			/* small screens: stack columns */
			@media (max-width: 900px) {
				.bic-ctf7-row {
					flex-direction: column;
				}

				.bic-ctf7 .col-left,
				.bic-ctf7 .col-right {
					flex: 1 1 100%;
				}

				.bic-ctf7 textarea.form-field {
					min-height: 180px;
				}
			}

			/* ---------- Autofill fixes (Chrome/Edge/Safari) ---------- */
			.bic-ctf7 input:-webkit-autofill,
				.bic-ctf7 textarea:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
					-webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
					caret-color: rgba(255, 255, 255, 0.95) !important;
					transition: background-color 9999s ease-in-out 0s;
			}

			/* Khi autofill + focus để vẫn hiển thị viền cam */
			.bic-ctf7 input:-webkit-autofill:focus,
				.bic-ctf7 textarea:-webkit-autofill:focus {
					border-bottom-color: rgba(255, 184, 77, 0.95) !important;
			}

			/* nếu form nằm trên background khác, bạn có thể đổi màu viền và màu nút ở trên */

		}
	}
}

.sec-one-service {
	.lvhd-wrap {
		display: flex;
		gap: 30px;

		@media screen and (max-width:768px) {
			flex-direction: column;
		}

		.lvhd-left {
			background: #f8f8f8;
			border-radius: 6px;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			overflow: hidden;
			border: 1px solid var(--fs-color-primary);

			.lvhd-list {
				list-style: none;
				margin: 0;
				padding: 0;

				li {
					margin-left: 0 !important;
					margin-bottom: 0 !important;

					a {
						display: block;
						padding: 12px 18px;
						text-decoration: none;
						color: #333;
					}

					&.active {
						a {
							background: var(--fs-color-primary);
							color: #fff;
						}
					}
				}
			}
		}

		.lvhd-right {
			flex: 1;
			/* background: #fff; */
			padding: 25px;
			border-radius: 6px;

			.lvhd-title {
				font-size: 26px;
				font-weight: 700;
				color: var(--fs-color-secondary);
				margin: 0 0 15px;
			}

			.lvhd-content {
				color: #fff;
			}
		}


	}
}

.sec-lawyer,
.sec-partner {
	.ls-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;
		align-items: start;
		margin: 0;
		padding: 0;
		list-style: none;

		@media (max-width: 768px) {

			grid-template-columns: 1fr;

		}

		.ls-card {
			text-align: center;
			padding: 10px 20px 30px;
			background: transparent;

			.ls-avatar {
				width: 220px;
				height: 220px;
				margin: 0 auto 18px;
				border-radius: 50%;
				overflow: hidden;
				display: block;
				box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
				background-color: #f0f2f3;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}

			}

			.ls-name {
				margin: 8px 0 6px;
				font-size: 18px;
				letter-spacing: 1px;
				font-weight: 700;
				color: var(--fs-color-primary);
				/* deep green similar to image */
				text-transform: uppercase;
			}

			.ls-position {
				margin: 0 0 14px;
				color: var(--fs-color-primary);
				font-size: 14px;
				font-weight: 600;
				opacity: .85;
			}

			.ls-excerpt {
				font-size: 13px;
				color: #333;
				line-height: 1.6;
				margin: 0 auto 18px;
				max-width: 360px;
			}

			.ls-social {
				display: flex;
				gap: 14px;
				justify-content: center;
				margin-bottom: 14px;
				align-items: center;

				a {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 36px;
					height: 36px;
					text-decoration: none;
					border-radius: 50%;
					border: 1px solid rgba(11, 85, 71, 0.12);
					color: var(--fs-color-primary);
					font-size: 16px;
				}
			}

			.ls-button {
				display: inline-block;
				margin-top: 6px;
				padding: 10px 20px;
				border: 2px dashed var(--fs-color-primary);
				border-radius: 6px;
				color: var(--fs-color-primary);
				text-decoration: none;
				font-weight: 700;
				letter-spacing: .5px;
			}

			@media (max-width:768px) {
				.ls-avatar {
					width: 160px;
					height: 160px;
				}

				.ls-name {
					font-size: 15px;
				}
			}

		}
	}


}

.sec-partner {
	.ls-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 36px;

		@media (max-width: 768px) {

			grid-template-columns: 1fr;

		}
	}
}

.single-profile-lawyer {

	.avatar {
		img {
			width: 100%;
			border-radius: 8px;
		}
	}
}