/* -------------------------------------------------------------------------- */
/* ---------------------------- 18 / 8 /2018 ------------------------------ */
/* -------------------------------------------------------------------------- */
/******Avoid to auto zoom on ios screen*********/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input {
      font-size: 16px;
    }
  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input:focus {
      font-size: 16px;
    }
  }
/***************/
#numstock {
	width: 30%;
}

.modal-title {
	text-align: center;
	font-weight: bold;
}

body{
	font-size:1.5em;
	font-family: arial, sans-serif;
	overflow-x: hidden;
}

/*--------5-5----------*/
.col-sm.form-group {
	margin-bottom: 20px;
}
.col-sm.form-group>label {
	left: 0px;
	width:100px;
    font-style: italic;
	margin-bottom: 0;
/*	text-decoration: underline;
	font-weight: normal;*/
}
/*.col-sm.form-group>.col-8 {
    right: 0px;
    position: absolute;
	display: table;
}*/
.col-8 { width:86%; }
.col-sm.form-group .btn-group .btn  {
		width: 113px;
		box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.col-sm.form-group .btn-group .btn.active{box-shadow:0 0 3px #38c;}
.col-sm.form-group .btn-group .btn.active:after{
	content:'\2713';
	color: green;
	/*font-size:1.1em;*/
	font-weight:bold;
}
.col-sm.form-group #colorgroup.btn-group .btn.active:nth-child(4):after{
	color: black;
}
.btn-group .btn {
	border-radius:4px!important;
	/*padding: 3px 6px;*/
	margin:3px;/* 3px 3px 0;*/
}
.btn-group .btn:hover{ border: 1px solid #ff277f;}
.btn-group .btn+.btn {margin-left:0;}
#colorgroup.btn-group .btn {	padding:0;}
label.color-tham{margin:0;line-height:28px; }
.text-center button {
	margin: .5em;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

input#masp {width:100%;line-height: 28px; }
input#masp:hover {box-shadow:0 0 5px #38c;}
input#masp[value=""]{  box-shadow:0 0 5px #38c;}

#hoavan.btn-group>.btn:last-child:not(:first-child) {padding:6px 3px;}
.modal-dialog {
	margin: 5px;
	color:#000;
}
.modal-header {
	padding-bottom:0px;
	padding-top:5px;
}
.modal-body{
	padding:5px;
}
.modal-footer{
	text-align: center;
}


@media (min-width: 768px) {
	.modal-dialog {	width:850px;margin: 30px auto;}
	.modal-header { padding:5px 15px;}
	.modal-body{ padding:15px;}
}

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
	/* .logoimg{width:auto;height:60px;}
	.logo img {margin-left:3px;} */
	
	.spinfo{
		font-size: 10px;
	}
	.spinfo-big{
		/* font-size: 15px!important; */
		font-size: 15px;
	}


	.btn-group .btn:focus{
		border: 1px solid transparent;
	}
	.col-sm.form-group { margin-bottom: 10px;}
	.col-8 {	width: 100%;}
	#maspbox.col-8 {	width: 69%;}

	#khuvuc.col-8, #tkgroup.col-8 {	width: 69%;}
	.col-sm.form-group .btn-group .btn {
		width: 31.5%;
		padding:5px;
	}
	.col-sm.form-group #khuvuc.btn-group .btn, .col-sm.form-group #tkgroup.btn-group .btn  {	width: 45%;}
	/*---------------------*/

}
@media only screen and (max-device-width: 640px), only screen and (max-width: 640px) {
	.logo{height:50px;/*8vh;*/}
	.maintitle{top:10%;}
	/*---------------------*/
}
@media only screen and (max-device-width: 360px), only screen and (max-width: 360px) {
	.logo{height:50px;width:auto}
	.maintitle{top:10px;}
}

/*Reset style*/
.modal-open {/*hiện scroll cho modal*/
	overflow:auto;
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}


/**************************************************
					ENHANCE FOR PAGES
***************************************************/
#modal-search,
.content-search {
	font-size: 16px;
	width: 98%;
	height: 98%;
	margin: auto;
}

/* #modal-search {
	padding-top: 10%;
	padding-bottom: 10%;
}             */
@media (max-width: 900px) {

	#modal-search,
	.content-search {
		font-size: 16px;
	}
}

@media (max-width: 768px) {

	#modal-search,
	.content-search {
		font-size: 14px;
	}
}

@media (max-width: 320px) {

	#modal-search,
	.content-search {
		font-size: 12px;
	}
}

.size-all {
	display: none;
}


.col-sm.form-group .btn-group .size-option.active:after {
	content: '\21D1' !important;
	/* color: green!important; already cover */
	/* font-weight:bold; already cover */
}