﻿/*!

 * home.css

 * Version - 1.0

 * Website: Dahuong

 * Author: KhanhHV

 * Copyright (c) 2020 bicweb.com

 */

.logo h1 {

	margin: 0;

	font-size: 1rem;

}



.gd_box__title {

	text-align: center;

}



	.gd_box__title .gd_text {

		font-size: 30px;

		color: #083190;

		font-weight: bold;

		margin-bottom: 30px;

		position: relative;

		padding-bottom: 10px;

	}



		.gd_box__title .gd_text::after {

			content: "";

			width: 70px;

			height: 1px;

			background-color: #008ed4;

			position: absolute;

			bottom: 0;

			left: 50%;

			transform: translateX(-50%);

		}



.kh_module {

	padding: 70px 0 0;

}



/*********************************************

	1. Banner

	**********************************************/

	.gd_banner {

		clear: both;

	}



		.gd_banner img.bg_slider {

		}



	.gd_banner_image {

		margin: 0;

	}



	.gd_banner .owl-nav [class^="owl-"] {

		color: #fff;

		line-height: 1;

		opacity: 0;

		position: absolute;

		text-align: center;

		top: 50%;

		-moz-transform: translateY(-50%);

		-ms-transform: translateY(-50%);

		-o-transform: translateY(-50%);

		-webkit-transform: translateY(-50%);

		transform: translateY(-50%);

		transition: all 0.3s ease-in 0s;

		visibility: hidden;

		z-index: 100;

		height: 65px;

		width: 40px;

		cursor: pointer;

		font-size: 48px;

	}



	.gd_banner .owl-prev {

		left: 40px;

	}



	.gd_banner .owl-next {

		right: 40px;

	}



	.gd_banner:hover .owl-nav [class^="owl-"] {

		opacity: 1;

		visibility: visible;

	}



	.gd_banner .owl-nav.disabled {

		display: none;

	}





	.gd_banner .owl-dots {

		position: absolute;

		bottom: 25px;

		display: flex;

		padding: 3px 10px;

		border-radius: 5px 5px 0 0;

		left: 50%;

		transform: translateX(-50%);

	}



		.gd_banner .owl-dots::after, .gd_banner .owl-dots:before {

			content: "";

			bottom: 0;

			position: absolute;

			display: none;

		}



		.gd_banner .owl-dots::after {

			border-left: 0px solid transparent;

			border-right: 15px solid transparent;

			right: -14px;

			border-bottom: 24px solid #fff;

		}



		.gd_banner .owl-dots::before {

			border-left: 15px solid transparent;

			border-top: 0px solid transparent;

			border-bottom: 24px solid #fff;

			left: -14px;

		}



	.gd_banner .owl-dot {

		padding: 5px;

	}



	.gd_banner .owl-dots .owl-dot span {

		display: block;

		width: 10px;

		height: 10px;

		border-radius: 5px;

		background: #fff;

		transition: all 300ms ease-in 0ms;

	}



	.gd_banner .owl-dot.active span {

		width: 50px;

	}



	.gd_box_testimonial .owl-dots {

		background: none;

		bottom: -20px;

	}



	.owl-nav.disabled {

		display: none;

	}

	.kh_module_why .owl-dots {

		position: absolute;

		bottom: -13%;

		display: flex;

		padding: 3px 10px;

		border-radius: 5px 5px 0 0;

		left: 50%;

		transform: translate(-50%, -50%);

	}



	.kh_module_why .owl-dots:before, .kh_module_why .owl-dots::after{

		content: "";

		bottom: 0;

		position: absolute;

		display: none;

	}



	.kh_module_why .owl-dots::after {

		border-left: 0px solid transparent;

		border-right: 15px solid transparent;

		right: -14px;

		border-bottom: 24px solid #fff;

	}



	.kh_module_why .owl-dots::before {

		border-left: 15px solid transparent;

		border-top: 0px solid transparent;

		border-bottom: 24px solid #fff;

		left: -14px;

	}



	.kh_module_why .owl-dot, .gd_module__thanhphan .owl-dot, .kh_testimonial .owl-dot {

		padding: 5px;

	}



	.kh_module_why .owl-dots .owl-dot span{

		display: block;

		width: 15px;

		height: 15px;

		border-radius: 50%;

		border: 1.5px solid #da8240;

		transition: all 300ms ease-in 0ms;

	}



	.kh_module_why .owl-dot.active span, .gd_module__thanhphan .owl-dot.active span, .kh_testimonial .owl-dot.active span {

		background-color: #da8240;

		background-image: linear-gradient(45deg, #da8240, #fde583, #da8240);

		background-size: 100%;

		-moz-background-clip: text;

		-moz-text-fill-color: transparent;

	}



	.kh_down_croll {

		cursor: pointer;

		text-align: center;

		width: max-content;

		margin: 0 auto;

	}

	.kh_down_croll span {

		display: block;

		width: max-content;

		margin: 0 auto;

	}

	.kh_down_croll span:first-child {

		color: #fff;

		font-size: 1.4rem;

		text-transform: uppercase;

		font-weight: 600;

	}

	.kh_down_croll span i {

		font-size: 30px;

		font-weight: lighter;

		color: #fff;

	}



/*********************************************

	2. Module Story

**********************************************/

	.kh_module.kh_module_story {

		padding-top: 70px;

	}



	.kh_inner_one {

		padding-left: 20px;

		padding-top: 80px;

	}



	.kh_wrap_one {

		position: relative;

		padding: 20px;

	}

	.kh_wrap_one:before {

		content: '';

		position: absolute;

		top: 0;

		left: -10px;

		width: 40px;

		height: 1px;

		background-color: var(--color);

	}

	.kh_wrap_one {

	}

	.kh_wrap_one::after {

		content: '';

		position: absolute;

		top: -10px;

		left: 0;

		width: 1px;

		height: 40px;

		background-color: var(--color);

	}



	.kh_line_story {

		position: absolute;

		width: 100%;

		height: 100%;

		left: 0;

		top: 0;

		z-index: -1;

	}

	.kh_line_story:before {

		content: '';

		position: absolute;

		bottom: -10px;

		right: 0;

		width: 1px;

		height: 40px;

		background-color: var(--color);

	}

	.kh_line_story:after {

		content: '';

		position: absolute;

		bottom: 0;

		right: -10px;

		width: 40px;

		height: 1px;

		background-color: var(--color);

	}

	.kh_title_one {

		font-family: 'CormorantGaramond', sans-serif;

		font-size: 2.5rem;

		font-weight: 600;

		line-height: 1;

	}

	.kh_title_one span {

		font-size: 2.5rem;

		font-weight: 500;

		font-family: sans-serif;

	}

	.kh_sub_title {

		color: var(--color);

		font-size: 1.65rem;

		/*! text-transform: uppercase; */

		font-weight: 600;

		position: relative;

		padding-bottom: 15px;

		margin-bottom: 20px;

	}

	.kh_sub_title:before {

		content: '';

		position: absolute;

		width: 100px;

		height: 2px;

		left: 0;

		bottom: 0;

		background-color: var(--color2);

	}

	.kh_des_title {

		color: #5b5b5b;

	}

	.kh_box_text {

		padding: 10px 20px 10px 20px;

		position: relative;

		margin-top: 15px;

	}

	.kh_box_text:before {

		content: '';

		position: absolute;

		width: ;

		width: 3px;

		height: 100%;

		left: 0;

		top: 0;

		background-color: var(--color);

	}
	.kh_box_title {

		text-align: center;

	}

	.kh_box_title.box_have_line {

		position: relative;

		padding-bottom: 25px;
		margin-bottom: 40px;

	}

	.kh_box_title.box_have_line:before {

		content: '';

		position: absolute;

		width: 70px;

		height: 2px;

		bottom: 0;

		left: 50%;

		transform: translateX(-50%);

		background-color: #f3ec78;
		background-image: linear-gradient(90deg, #f6bb2f, #fde583, #f6bb2f);

	}

	.kh_box_title .kh_title_module {
		font-size: 2rem;
		line-height: 1;
		font-weight: 600;
		color: var(--color);
	}



/*********************************************
	3. Module Lợi ích
	**********************************************/
	.kh_wrap_box_adv {
		text-align: center;
	}
	.kh_title_adv {
		color: var(--color);
		font-size: 1.15rem;
		font-weight: 600;
		margin-bottom: 10px;
	}

/*********************************************
	4. Module Thông tin sản phẩm
	**********************************************/
	.kh_btn_web.kh_btn_2 {
		margin-top: -24px;
	}
	.kh_btn_web.kh_btn_2 .kh_inner_btn {
		padding: 12px 40px;
		background-color: var(--color);
		border: navajowhite;
		display: block;
		color: #fff;
		text-transform: unset;
		font-weight: 500;
	}
	.kh_nav_info {
		margin: 0 -5px 30px;
	}
	.kh_btn_web.kh_btn_2 .kh_inner_btn.actived, .kh_btn_web.kh_btn_2 .kh_inner_btn:hover {
		color: #fff;
		background-color: var(--color1);
	}
	.kh_list_info {
		height: 270px;
		overflow-y: auto;
		padding-right: 20px;
		scrollbar-width: thin;
	}
	.kh_list_info .kh_item_info {
		display: none;
	}
	.kh_list_info .kh_item_info.show {
		display: block;
	}
	.kh_inner_prod {
		padding: 0 40px 30px;
		box-shadow: 0 0 10px 3px #d1d1d1;
		border-radius: 20px;
		margin-bottom: 50px;
	}
	.kh_home_prod.row {
		align-items: center;
	}
	.kh_link_prod .kh_btn_web.kh_btn_2 {
		margin-top: 0;
	}


/*********************************************
	4. Module lý do
	**********************************************/
	.kh_list_why.row {
		text-align: center;
	}
	.kh_title_why {
		font-size: 1.9rem;
		line-height: 1;
		font-weight: 500;
		color: var(--color);
		margin-bottom: 10px;
	}
	.kh_title_des {
		color: #222;
		font-weight: 600;
		font-size: 1.1rem;
	}

/*********************************************
	4. Module khách hàng
	**********************************************/
	
	.kh_img_exp {
		width: 120px;
		height: 120px;
		margin-bottom: 0;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid var(--color);
		margin-right: 30px;
	}
	.kh_img_exp .img-fluid {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.3s cubic-bezier(.165,.84,.44,1);
		transform: scale(1);
	}
	.kh_img_exp:hover .img-fluid {
		transform: scale(1.2) !important;
	}
	.kh_info_cus {
		flex: 1;
		text-align: left;
		padding: 20px;
		color: #fff;
		background-color: var(--color);
		border-radius: 12px;
		position: relative;
	}
	.kh_wrap_img_exp.d-flex {
		align-items: center;
	}
	.kh_item_exp:first-child {
		margin-bottom: 30px;
	}
	.kh_name_customer {
		margin-bottom: 10px;
	}
	.kh_name_customer a {
		color: #fff;
		font-size: 1.2rem;
		font-weight: 500;
	}
	.kh_info_cus::before {
		content: '';
		width: 30px;
		height: 18px;
		background: var(--color);
		border-radius: 50px / 30px;
		left: -7px;
		position: absolute;
		top: 37%;
		z-index: -1;
	}

	.kh_list_exp .owl-dots {
		display: flex;
		padding: 3px 0 3px 10px;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.kh_list_exp .owl-dot {
		margin-left: 20px;
	}

	.kh_list_exp .owl-dots .owl-dot span {
		display: block;
		background: #fff;
		transition: all 300ms ease-in 0ms;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 2px solid var(--color);
	}

	.kh_list_exp .owl-dot.active span {
		background: var(--color);
	}

/*********************************************
	5. Module hệ thống phân phối
	**********************************************/	
	.kh_list_agency.d-flex {
		list-style: none;
		padding-left: 0;
		flex-wrap: wrap;
		margin: 0 -10px;
	}
	.kh_list_agency.d-flex .kh_item_agency {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
		padding: 3px 10px;
	}
	.kh_wrap_box_agency {
		padding: 90px;
		box-shadow: 0 0 10px 3px #d1d1d1;
		border-radius: 20px;
		position: relative;
	}
	.kh_list_agency.d-flex .kh_item_agency a {
		color: #444;
		font-size: 15px;
		font-weight: 400;
	}
	.kh_list_agency.d-flex .kh_item_agency .kh_inner_agency {
		padding-left: 15px;
		position: relative;
	}
	.kh_list_agency.d-flex .kh_item_agency .kh_inner_agency::before {
		content: '';
		position: absolute;
		width: 4px;
		height: 4px;
		background-color: #91000a;
		border-radius: 50%;
		left: 0;
		top: 11px;
	}
	.kh_wrap_box_agency .kh_box_title {
		position: absolute;
		top: ;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		padding: 15px 0;
		background-color: var(--color);
	}
	.kh_wrap_box_agency .kh_box_title .kh_title_module {
		font-size: 1rem;
		color: #fff;
		margin: 0 40px;
	}

	.kh_wrap_box_agency .kh_box_title {
	  	top: -23px;
	}
	.kh_wrap_box_agency .kh_box_title::before, .kh_wrap_box_agency .kh_box_title::after {
	  	content: '';
	  	position: absolute;
	  	width: 90px;
	  	height: 90px;
	  	background: url(http://demo14.bicweb.vn/wp-content/uploads/2021/10/pharmacy.png) no-repeat center center;
	  	background-size: 50%;
	  	background-color: var(--color);
	  	border-radius: 50%;
	  	border: 3px solid var(--color1);
	  	left: -70px;
	  	top: 50%;
	  	transform: translateY(-50%);
	}

	.kh_wrap_box_agency .kh_box_title::after {
	  	left: unset;
	  	right: -70px;
	}
	.kh_list_agency.d-flex .kh_item_agency a:hover {
		color: var(--color);
	}
	.kh_module.kh_module_agency {
		padding-top: 120px;
		padding-bottom: 40px;
	}
	.kh_wrap_box_agency .kh_btn_web.kh_btn_2 .kh_inner_btn {
		display: inline;
	}
	.kh_module.kh_module_agency .kh_btn_web.kh_btn_2 {
		margin: 0;
		position: absolute;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
	}

/*********************************************
	6. Module tin tức
	**********************************************/

	.kh_name_news a {
		color: #444;
		font-size: 15px;
	}
	.kh_thumb_news {
		margin-bottom: 10px;
		overflow: hidden;
	}
	.kh_thumb_news .img-fluid {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.8s cubic-bezier(.165,.84,.44,1);
		transform: scale(1);
	}
	.kh_thumb_news:hover .img-fluid {
		transform: scale(1.1);
	}
	.kh_name_news a:hover {
		color: var(--color);
	}

/*********************************************
	10. Module XXX
	**********************************************/
	@media screen and (min-device-width: 858px) and (max-device-width: 1800px) {

	}
	@media screen and (min-device-width: 1600px) and (max-device-width: 1800px) {

	}
	@media screen and (max-device-width: 1536px) and (min-device-width: 1440px) {

	}
	@media only screen and (max-width: 1440px) {
		.kh_wrap_box_agency {
			padding: 80px 40px 50px;
		}
		.kh_inner_prod {
			padding: 0 30px 30px;
			margin-bottom: 30px;
		}
	}
	@media screen and (min-device-width: 625px) and (max-device-width: 1366px) {

	}
	@media screen and (min-device-width: 992px) and (max-device-width: 1440px) {

	}
	@media only screen and (max-width: 1024px) and (min-width: 992px){

	}
	@media only screen and (max-width: 1199px) {
		.kh_btn_web.kh_btn_2 .kh_inner_btn {
			padding: 10px 20px;
		}
	}
	@media only screen and (max-width: 1119px) and (min-width: 1080px){

	}
	@media only screen and (max-width: 1079px) and (min-width: 992px) {

	}
	@media only screen and (max-width: 1024px) {
		.kh_module {
			padding: 40px 0;
		}
	}
	@media only screen and (max-width: 992px) and (min-width: 768px) {

	}
	@media screen and (max-device-width: 992px) {
		.kh_box_title.box_have_line {
			margin-bottom: 20px;

		}
		.kh_module.kh_module_agency {
			padding-top: 40px;
		}
	}



	@media only screen and (max-width: 768px) {
		.kh_img_prod {
		  	text-align: center;
		  	margin-bottom: 50px;
		}
		.kh_link_prod.d-flex {
		  	justify-content: center;
		}
		.kh_nav_info {
		  	justify-content: center;
		}
		.kh_img_box_exp {
			display: none;
		}
		.kh_list_exp {
			flex: 0 0 100%;
			max-width: 100%;
		}
		.kh_list_exp .owl-dots {
			justify-content: center;
			padding-left: 0;
		}
		.kh_list_agency.d-flex .kh_item_agency {
			flex: 0 0 50%;
			max-width: 50%;
		}
		.kh_item_news {
			margin-bottom: 30px;
		}
		.kh_avt_prod .img-fluid {
			max-width: 70%;
		}
		.kh_avt_prod a {
			text-align: center;
		}
		.kh_img_prod .img-fluid {
			max-width: 70%;
		}
		.kh_wrap_icon .img-fluid {
			max-width: 140px;
		}
		.kh_icon_adv .kh_wrap_icon .img-fluid {
			max-width: 100px;
		}
		.kh_item_adv {
			margin: 15px 0;
		}
	}



	@media screen and (max-device-width: 576px) {
		.kh_box_title .kh_title_module {
			font-size: 1.5rem;
		}
		.kh_nav_info .kh_btn_web.kh_btn_2 .kh_inner_btn {
			padding: 10px 10px;
			font-size: 13px;
		}
		.kh_nav_info .kh_btn_web.kh_btn_2 {
			padding: 0 2px;
		}
		.kh_wrap_box_agency .kh_box_title::before, .kh_wrap_box_agency .kh_box_title::after {
			content: unset;
		}
		.kh_inner_prod {
			padding: 0 15px;
			padding-bottom: 20px;
		}
		.kh_wrap_box_agency {
			padding: 20px;
		}
		.kh_nav_info {
			margin: 0 -2px 30px;
		}
		.kh_list_agency.d-flex .kh_item_agency {
			flex: 0 0 100%;
			max-width: 100%;
		}
		.kh_module {
			padding: 30px 0;
		}
		.kh_wrap_box_agency .kh_box_title {
			padding: 10px 15px;
			position: unset;
			transform: unset;
			border-radius: 15px;
			margin-bottom: 20px;
		}
		.kh_wrap_box_agency .kh_box_title .kh_title_module {
			margin: 0 0;
			line-height: 1.3;
		}
		.kh_module.kh_module_agency .kh_btn_web.kh_btn_2 {
			position: static;
			transform: unset;
			margin-top: 30px;
			text-align: center;
		}
		.kh_wrap_img_exp.d-flex {
		  	display: block !important;
		}
		.kh_img_exp {
		  	margin: 0 auto 20px;
		}
		.kh_info_cus::before {
		  	width: 15px;
		  	height: 40px;
		  	border-radius: 20px / 50px;
		  	left: 50%;
		  	transform: translateX(-50%);
		  	top: -10px;
		}
		.kh_list_exp .owl-dot {
		  	margin-left: 0;
		  	padding: 0 10px;
		}
	}
	@media only screen and (max-width: 736px) and (min-width: 414px) {

	}
	@media only screen and (max-width: 731px) and (min-width: 411px) {

	}
	@media screen and (max-device-width: 390px) {
		.kh_nav_info .kh_btn_web.kh_btn_2 .kh_inner_btn {
			font-size: 12px;
		}
	}

	@media only screen and (max-width: 375px) {
		.kh_nav_info .kh_btn_web.kh_btn_2 .kh_inner_btn {
			font-size: 13px;
			padding: 10px 9px;
			font-size: 12px;
		}
	}

	@media screen and (max-device-width: 414px) { 


	}

	@media only screen and (max-width: 667px) and (min-width: 375px) {
	

	}

	@media only screen and (max-device-width: 724px) and (min-device-width: 325px) {

	}	

	@media screen and (max-device-width: 375px) {

	}

	@media screen and (max-device-width: 360px) {
		.kh_nav_info .kh_btn_web.kh_btn_2 .kh_inner_btn {
			font-size: 11px;
		}
		.kh_btn_web.kh_btn_2 .kh_inner_btn {
			font-size: 12px;
		}
	}

	@media only screen and (max-width: 808px) and (min-width: 331px) {

	}

	@media only screen and (max-width: 744px) and (min-width: 231px) {

	}

