@import url("https://fonts.googleapis.com/css2?family=Combo&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;1,200;1,300&display=swap");

*,
body {
	/* font-family: '"DB Heavent', Tahoma, Geneva, Verdana, sans-serif; */
	font-family: "Kanit", sans-serif;
	box-sizing: border-box;
}

.c-base {
	background-color: #D6E5D5;
}

.c-txtbase {
	color: #667151;
}

.c-txtblue {
	color: #667151;
}

.c-txtred {
	color: #841724;
}

.c-blue {
	background-color: #224b92;
}

.c-bgNavbar {
	background-image: url('../theme-BG.jpg');
}

.c-bgkey {
	background-color: #6d7e74;
}

.c-bgabout {
	background-color: #f2f2f2;
}

.c-buttonRead {
	background-color: #758088;
}

.c-buttonAdd {
	background-color: #F9D895;
}

.c-txtwhite {
	color: #ffffff;
}

.c-txtgreen {
	color: #667151;
}

.c-thead {
	background-color: #D6E5D5;
}

.c-txtOption {
	color: #c79645;
	opacity: 1;
	font-size: 1.2rem;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.c-txtlabel {
	color: #676767;
}

.c-btnHistory {
	background-color: #2893a8;
}

.c-btnGreen {
	background-color: #2cc151;
}

.c-Listing {
	background-color: #feffa3;
}

.c-txtQT {
	color: #b061ff;
}

.c-request {
	color: red;
}

.c-txtorange {
	color: #e88254;
}

.c-btnclose {
	background-color: red;
}

.c-btnEdit {
	color: #667151 !important;
    background-color: #D6E5D5 !important;
    border-color: transparent !important;
}

.c-btnupdate {
	color: #667151 !important;
    background-color: #F9D895 !important;
    border-color: transparent !important;
}

.c-btnDelete {
	background-color: #F7A39D !important;
	color: #841724 !important;
	transition-duration: .2s;
}

.c-btnDelete:hover {
	background-color: #841724 !important;
	color: #F7A39D !important;
}

.nav-link {
	background-color: #D6E5D5 !important;
	color: #667151 !important;
	
}

.nav-link.active {
	background-color: #667151 !important;
	color: #D6E5D5 !important;
}

.btn-danger {
	border-radius: 1rem !important;
    color: #841724 !important;
    background-color:#F7A39D !important;
    border-color: transparent !important;
}

.btn-danger:hover {
	color: #F7A39D !important;
	background-color:#841724 !important;
	border-color: transparent !important;
}

/*  */
/* ************** Menubar Left *********** */
.vBoxFlexOrderListPage {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.vBoxFlexOrderListPage .vBoxMenuOrderListLeft {
	width: 20%;
}

.vBoxDetailsListRight {
	width: 80%;
	padding-left: 20px;
}

.vBoxMenuOrderListLeft button {
	margin-bottom: 5px !important;
}

.vBoxMenuOrderListLeft .boxOrderList {
	background-color: #D6E5D5;
	text-align: center;
	color: #667151 !important;
	padding: 18px;
	margin-bottom: 5px;
	cursor: pointer;
}

.vBoxMenuOrderListLeft .boxOrderList:hover,
.vBoxMenuOrderListLeft .boxOrderList.active {
	background-color: #667151;
	color: white;
}

.vBoxMenuOrderListLeft a .boxOrderList p {
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 0;
	color: #667151;
}

.boxOrderList .vChoiceOrderList {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.boxOrderList .vChoiceOrderList .Choice_Item {
	color: #000000;
	font-size: 16px;
	background-color: rgb(234, 234, 234);
	color: #d1d1d1;
	padding: 15px;
	margin-right: 5px;
	width: calc(100% - 50%);
	border-radius: 1rem;
	cursor: pointer;
}

.boxOrderList .vChoiceOrderList .Choice_Item:hover,
.boxOrderList .vChoiceOrderList .Choice_Item.active {
	background-color: #5ba9e0;
	color: #ffffff;
}

.boxOrderList .vChoiceOrderList .Choice_Item p {
	margin-bottom: 0;
	text-align: center;
}

@media screen and (max-width: 1025px) {
	.vBoxFlexOrderListPage .vBoxMenuOrderListLeft {
		width: 30%;
	}

	.vBoxDetailsListRight {
		width: 70%;
	}

	.vBoxMenuOrderListLeft .boxOrderList {
		padding: 14px;
	}
}

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

	/* .vBoxFlexOrderListPage {
    flex-direction: column;
  } */
	.vBoxFlexOrderListPage .vBoxMenuOrderListLeft {
		width: 30%;
	}

	.vBoxDetailsListRight {
		width: 70%;
		padding-left: 20px;
	}

	.boxOrderList .vChoiceOrderList {
		overflow: auto;
	}

	.vChoiceOrderList {
		overflow: auto;
	}

	.vBoxMenuOrderListLeft a .boxOrderList p {
		font-size: 18px;
	}

	.boxOrderList .vChoiceOrderList .Choice_Item {
		white-space: nowrap;
	}
}

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

	.vBoxMenuOrderListLeft a .boxOrderList p {
		font-size: 20px;
	}

	.vBoxMenuOrderListLeft .boxOrderList {
		padding: 14px;
	}

	.vBoxMenuOrderListLeft {
		display: none;
	}

	.vBoxFlexOrderListPage .vBoxMenuOrderListLeft {
		width: 0;
	}

	.vBoxDetailsListRight {
		width: 100%;
		padding-left: 0;
	}

}

/* ************** end Menubar Left ************ */
/*  */
.container {
	max-width: 100%;
	padding: 0;
}

.row {
	margin: 0;
}

/* Header */
.BoxLeft {
	height: auto;
	position: relative;
}

.header-bar {
	display: flex;
	height: auto;
}

.imgLogo {
	width: 100%;
	max-width: 200px;
	position: absolute;
	top: 3%;
	left: 3%;
	z-index: 2;
}

.BoxLeft .carousel .carousel-indicators li {
	width: 0.35rem;
	height: 0.35rem;
}

.BoxLeft .carousel-indicators .active {
	background-color: #758088;
}

.v-header {
	background-color: #ccc;
}

.v-header .col-12 {
	padding: 0;
}

.form-loin{
	display: flex;
}

.img_banner {
	margin: auto 0;
}

.BoxLogin {
	display: flex;
	justify-content: space-between;
	padding: 2rem 3rem;
}


.BoxLogin .v-input {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.BoxLogin .v-input input {
	margin: 0.25rem 1rem;
	padding: 0.25rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
	border: none;
}

.BoxLogin .v-btnkey button {
	border: none;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.25rem;
	color: #ffffff;
}

.BoxLogin .v-btnkey button:hover {
	opacity: 0.7;
}

.BoxLogin .v-btnkey button img {
	width: 100%;
	max-width: 25px;
}

input:focus {
	outline: none;
}

button:focus {
	outline: none;
}

.tab-content {
	padding: 2rem 5rem;
}

.nav {
	justify-content: space-evenly;
}

.nav a {
	color: #ffffff;
}

.nav-pills .nav-link {
	border-radius: 0;
	font-size: 1.25rem;
	padding: 1rem 3rem;
}

/* Activities */
.v-activities {
	padding: 1rem;
}

.v-activities h3 {
	font-weight: 400;
}

.v-activities .carousel-control-next,
.carousel-control-prev {
	width: 2%;
}

.imagArrow {
	width: 40px;
}

.v-activities .carousel-item {
	padding: 1rem 3rem;
}

.itemflex {
	display: flex;
	justify-content: space-between;
}

.Boxitem {
	display: flex;
	padding: 0 0.5rem;
}

.Boxitem img {
	margin-right: 1rem;
	width: 100%;
	max-width: 250px;
}

.BoxContent {
	position: relative;
}

.BoxContent button {
	position: absolute;
	bottom: 0;
	left: 100%;
	transform: translateX(-100%);
	
}

.BoxCenter {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

.BoxContent button {
	font-size: 1.25rem;
	color: #ffffff;
	border: none;
	padding: 0.25rem 2rem;
	border-radius: 0.25rem;
}

button:hover {
	opacity: 0.7;
}

.txtwrap {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 38px;
}

.date-text {
	margin-top: auto;
	font-size: .8rem;
}

.MediaActivities {
	display: none;
}

.Btnshowall {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}

.Btnshowall button {
	padding: 0.5rem 2rem;
	border: 1px solid #F9D895;
	border-radius: 0.5rem;
	color: #F9D895;
	font-size: 1.25rem;
	background-color: #ffffff;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
}

.Btnshowall button:hover {
	padding: 0.5rem 2rem;
	border: 1px solid #F9D895;
	border-radius: 0.5rem;
	color: #ffff;
	font-size: 1.25rem;
	background-color: #F9D895;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
}

/* End Activities */

/* Boxitem */
.absoluteBox {
	position: relative;
}

.absoluteBox img {
	width: 100%;
}

.Boxtxtitem h2 {
	font-weight: 400;
}

.Boxtxtitem {
	position: absolute;
	top: 20%;
	left: 10%;
}

.Boxtxtitem p {
	font-size: 1.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* End Boxitem */
.BoxitemContent {
	background-image: url("/home/bg_order.png");
	height: 120vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}

/* About */
.BoxAbout {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.BoxAbout h2 {
	font-weight: 400;
	padding: 3rem;
}

.BoxAbout p {
	max-width: 1200px;
	font-size: 1.25rem;
}

/* End About */
.BottomBox {
	margin-bottom: 5rem;
	padding: 0 3rem;
}

.BottomBox h2 {
	font-weight: 500;
	text-align: center;
	padding: 2rem 0;
}

.BoxlogoFooter {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.Boxitemlogo img {
	width: 100%;
	max-width: 150px;
	height: 150px;
}

.Boxitemlogo h3 {
	font-size: 1.25rem;
	font-weight: 400;
}

.Boxcontact {
	padding-top: 1rem;
}

.Boxcontact .row {
	align-items: center;
}

.Boxcontact h2 {
	text-align: left;
	padding: 1rem;
}

.Boxcontact p {
	font-size: 1.25rem;
	color: #758088;
}

.Boxsocial {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.Boxsocial img {
	width: 100%;
	max-width: 50px;
}

.Boxsocial .tel {
	display: flex;
	align-items: center;
}

.Boxsocial .tel h2 {
	margin-bottom: 0;
	font-weight: 500;
	padding-left: 1rem;
}

.Boxitemlogo {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.BoxAboutmedia {
	display: none;
}

@media only screen and (max-width: 1500px) {
	.Boxitem img {
		max-width: 150px;
	}

	.txtwrap {
		width: 100%;
	}

	.BoxAbout h2 {
		padding: 1rem;
	}

	.BoxAbout p {
		max-width: 800px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		-webkit-box-orient: vertical;
	}

	.BoxitemContent {
		height: 100vh;
	}

	.view img {
		height: 450px;
	}
}

@media only screen and (max-width: 1200px) {

	/* Header */
	.nav-pills .nav-link {
		padding: 1rem;
		font-size: 1.15rem;
	}

	.BoxLogin .v-input input {
		font-size: 1.15rem;
	}

	.tab-content {
		padding: 2rem 3rem;
	}

	.view img {
		height: 450px;
	}

	/* End Header */

	/* Activities */
	.Boxitem img {
		max-width: 100px;
		height: 120px;
	}

	.BoxContent button {
		font-size: 1rem;
		padding: 0.25rem 2rem;
	}

	.txtwrap {
		width: auto;
	}

	.Btnshowall {
		padding: 2rem 0;
	}

	/* End Activities */
	/* itemBox */

	/* End itemBox */
	/* About */
	.BoxAbout h2 {
		padding: 1rem;
	}

	.BoxAbout p {
		max-width: 600px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		-webkit-box-orient: vertical;
	}

	/* End About */

	.Boxitemlogo img {
		max-width: 120px;
		height: 120px;
	}

	.Boxitemlogo h3 {
		padding-top: 1rem;
		font-size: 1.15rem;
	}
}

@media only screen and (max-width: 991px) {

	/* Header */
	.BoxLogin {
		padding: 2rem;
	}

	.tab-content {
		padding: 1rem;
	}

	.BoxLogin .v-input input {
		padding: 0.25rem 0.5rem;
	}

	.BoxLogin .v-input {
		flex-direction: row;
		align-items: center;
	}

	.BoxLogin .v-input input {
		padding: 1rem;
	}

	.BoxLogin {
		justify-content: space-around;
	}

	.BoxLogin .v-btnkey button {
		font-size: 1rem;
		padding: 0.5rem 2rem;
	}

	.BoxLogin .v-btnkey button img {
		max-width: 20px;
	}

	/* End Header */

	/* Activities */
	.Boxitem {
		flex-direction: column;
	}

	.Boxitem img {
		max-width: 100%;
	}

	.carousel-inner {
		overflow: inherit;
	}

	.BoxContent button {
		position: inherit;
	}

	.BoxContent {
		display: flex;
		flex-direction: column;
	}

	.Btnshowall {
		padding: 1rem 0;
	}

	/* End Activities */

	/* itemBox */

	/* End itemBox */
	/* about */
	.BoxitemContent {
		height: 120vh;
		background-size: cover;
	}

	.absoluteBox img {
		margin-bottom: 1rem;
	}

	.BoxAbout p {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	/* end about */
	.Boxitemlogo img {
		max-width: 80px;
		height: 80px;
	}

	.Boxitemlogo h3 {
		font-size: 1rem;
	}

	.Boxcontact h2 {
		font-size: 1.5rem;
	}

	.Boxsocial .tel h2 {
		font-size: 1.15rem;
	}

	.Boxsocial img {
		max-width: 40px;
	}
}

@media only screen and (max-width: 600px) {

	/* Header */
	.tab-content {
		padding: 1rem 2rem;
	}

	.BoxLogin {
		align-items: center;
	}

	.BoxLogin .v-input input {
		font-size: 1rem;
		padding: 0.5rem 1rem;
		width: 100%;
		margin-bottom: 1rem;
	}

	.BoxLogin .v-btnkey button {
		font-size: 1rem;
	}

	.nav-pills .nav-link {
		font-size: 1rem;
	}

	.tab-content h3 {
		font-size: 1.15rem;
		font-weight: 500;
	}

	.tab-content p {
		font-size: 1rem;
	}

	.view img {
		height: auto;
	}

	.BoxLogin {
		flex-direction: column;
		align-items: inherit;
	}

	.BoxLogin .v-input {
		flex-direction: column;
	}

	.v-btnkey {
		display: flex;
		justify-content: center;
	}

	.BoxLogin .v-btnkey button {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0.5rem 3rem;
	}

	.BoxLogin .v-btnkey img {
		margin-bottom: 0;
		margin-right: 1rem;
	}

	/* End Header */

	/* Activities */
	.MediaActivities {
		display: block;
	}

	.activitiesLarge {
		display: none;
	}

	.Btnshowall button {
		font-size: 1rem;
	}

	.Btnshowall {
		margin-top: 1rem;
	}

	.Boxitem img {
		height: auto;
	}

	/* End Activities */
	/* itemBox */

	.absoluteBox img {
		height: 400px;
	}

	.Boxtxtitem {
		left: 5%;
		right: 5%;
	}

	.Boxtxtitem h2 {
		font-size: 1.5rem;
	}

	.Boxtxtitem p {
		font-size: 1rem;
	}

	/* End itembox */
	/* About */
	.BoxitemContent {
		background-image: none;
		height: auto;
	}

	.Boxtextabout h2 {
		font-size: 1.25rem;
	}

	.Boxtextabout p {
		padding: 0 1rem;
		font-size: 1rem;
	}

	/* End About */
	.BottomBox {
		padding: 1rem;
	}

	.BottomBox h2 {
		font-size: 1.25rem;
	}

	.Boxitemlogo img {
		max-width: 40px;
		height: 40px;
	}

	.Boxitemlogo h3 {
		font-size: 0.7rem;
		text-align: center;
	}

	.BottomBox h2 {
		text-align: center;
	}

	.Boxcontact h2 {
		padding: 0;
	}

	.Boxcontact p {
		font-size: 1rem;
	}

	.BoxAboutmedia {
		display: block;
		background-image: url(".<?= base_url() ?>public/backgrounds/bg_order.png");
		background-size: cover;
		text-align: center;
		padding: 1rem;
	}

	.BoxAboutmedia h2 {
		font-weight: 400;
	}

	.BoxAboutmedia p {
		text-align: start;
		padding: 0 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		-webkit-box-orient: vertical;

	}

	.BoxAbout {
		display: none;
	}

	.Boxsocial img {
		max-width: 25px;
	}

	.Boxsocial .tel h2 {
		font-size: 1rem;
	}
}

footer {
	width: 100%;
}

footer .vFooter {
	background-color: rgb(176, 179, 179);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	bottom: 0;
	position: fixed;
}

footer .vFooter p {
	font-size: 0.8rem;
	color: #ffffff;
	margin-bottom: 0;
}