﻿
:root {
	--main-color: var(--primary-color);
}

.thongtintiepnhan-wrapper .info {
}

	.thongtintiepnhan-wrapper .info span {
		padding-right: 7px
	}


.thongtinhoso-wrapper {
}

	.thongtinhoso-wrapper > div {
		height: 400px;
	}

.group-info {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin-bottom: 10px;
	box-shadow: inset 0px 3px 0 var(--main-color);
	/*border-top: 2px solid #4b4ba3;*/
	border: 0;
	font-size: 0.9rem
}

	.group-info .group-header {
		/*background: rgba(0,0,0,0.04);*/
		color: #393982;
		padding: 0.75rem 1rem;
		/*box-shadow: inset 0px 3px 0 #4b4ba3;*/
		font-weight: 500;
		color: var(--main-color);
		cursor: pointer;
		position: relative;
		text-transform: uppercase;
		border: 1px solid #e5e5e5;
		font-size: 12px
	}

		.group-info .group-header:hover {
			background: rgba(0,0,0,0.04);
			/*box-shadow: inset 3px 2px 0 #4b4ba3;*/
		}

		.group-info .group-header:after {
			content: '\f0d7';
			font-family: "Font Awesome 5 Pro";
			font-weight: 500;
			position: absolute;
			top: 13px;
			right: 10px;
			color: var(--main-color);
			transition: .3s;
		}

		.group-info .group-header.closed {
			border-top: none;
			box-shadow: none;
		}

			.group-info .group-header.closed:after {
				transform: rotate(-90deg);
			}

		.group-info .group-header i {
			font-size: 1.05rem;
			margin-right: 5px
		}

	.group-info .group-content {
		flex: 1;
		padding: 15px;
		max-height: 350px;
		border: 1px solid #e5e5e5;
		border-top: 0
	}

		.group-info .group-content > p {
			padding: 0.6rem 1.2rem;
			text-align: justify
		}

.list-info {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
}

	.list-info .info {
		position: relative;
		padding: 0.6rem 0;
		margin-bottom: -1px;
		background-color: #fff;
		display: flex;
	}

		.list-info .info span {
			display: inline-block;
		}

			.list-info .info span.icon {
				width: 25px;
			}

			.list-info .info span.name {
				width: 40%;
			}

			.list-info .info span.value {
				flex: 1;
				padding-left: 10px;
				text-align: justify
			}

.giaytodinhkem {
	display: flex;
	cursor: pointer;
	padding: 15px 0px;
	border-bottom: 1px solid #e5e5e5;
}

	.giaytodinhkem:hover {
		background: rgba(0,0,0,0.04);
		box-shadow: inset 3px 0px 0 #4b4ba3;
	}

	.giaytodinhkem .icon {
		font-size: 25px;
		padding: 0px 15px;
	}

	.giaytodinhkem .content {
		flex: 1;
	}

		.giaytodinhkem .content span:first-child {
			display: block;
			width: 100%;
			font-weight: 600;
		}

		.giaytodinhkem .content small {
			display: inline;
			width: 50%;
			float: left;
			font-style: italic
		}

.custom-overflow {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ddd #f5f5f5;
}

	.custom-overflow::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.custom-overflow::-webkit-scrollbar-track {
		background: #f5f5f5;
	}

	.custom-overflow::-webkit-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 20px;
		border: 0px solid #f5f5f5;
	}
