:root{
	--red: #852439;
	--red-hover: #ff3131;
	--green: #669933;
	--green-hover: #ffe780;
	--grey: #e0e0e0;
	--yellow: #F4BF01;
	--yellow-hover: #FF0;
	--lightyellow: #fcfaee;
}

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
}

img { outline: 0; max-width: 100% !important; height: auto; vertical-align: middle; }

i.zalo { display: inline-block; width: 25px; height: 24px; background: url(../images/icon-zalo.png) no-repeat top left; background-size: 100%; }
i.zalo.yellow { background: url(../images/icon-zalo-yellow.png) no-repeat top left; background-size: 100%; }
i.edit-list { display: inline-block; width: 25px; height: 24px; background: url(../images/edit-ico.png) no-repeat top left; background-size: 100%; }
i.contact { display: inline-block; width: 25px; height: 24px; background: url(../images/contact.png) no-repeat top left; background-size: 100%; }

/* remove default apperance on ios */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="password"],
button,
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
/* / remove default apperance */

/* remove background of input when on autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/* remove background of input when on autocomplete */

hr { height: 0.5px; border: 0; background-color: #ddd; }

.container {
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
}
.boundary{
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}

.breadcrumb ul { list-style-type: none; padding:0; margin: 0; }
.breadcrumb ul li { display: inline-block; }
.breadcrumb ul li a { color: inherit; text-transform: capitalize; }
.breadcrumb ul li a:hover { color: var(--main-color); font-weight: bold; }
h1, h2, h3, h4, h5, h6{ padding: 0; margin:0; }
a, a:hover{
	text-decoration: none;
}
a.disabled{ pointer-events: none; cursor: default; color: #DDD; }

blockquote{
  font-style: italic;
  text-align: right;
  margin: 0;
  font-size: 0.9em;
}
table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #DDD;
	border-spacing: 0;
}
table th, table td { border: 1px dashed #DDD; border-bottom: 1px solid #DDD; padding: 10px; }
table th { background-color: #DDD; color: #333; text-transform: capitalize; border: 1px solid #DDD; font-weight: bold; }

.no-border{
  border: 0 !important;
}
.p-0{ padding: 0 !important; }
.text-center{
	text-align: center !important;
}
.text-left{
	text-align: left !important;
}
.text-right{
	text-align: right !important;
}
.vertical-top{
	vertical-align: top !important;
}
.vertical-middle{
	vertical-align: middle !important;
}
.vertical-bottom{
	vertical-align: bottom !important;
}
.bold { font-weight: bold; }
.line-through { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-before:before{
	display: none;
}
.square-image, .circle-image{
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	vertical-align: top;
	/* border: 1px solid #DDD; */
}
.circle-image{
	border-radius: 100%;
}
.square-image:before, .circle-image:before{
	padding-top: 100%;
	content: "";
	display: block;
}
.square-image img, .circle-image img{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 !important;
	object-fit: cover;
}

/* use only square image with image in square format */
.hover-zoom img { transition: transform 1s; }
.hover-zoom:hover img { transform: scale(1.3); }

.clear{
	clear: both;
	width: 100%;
}
.scrollup{
	box-sizing: border-box;
	width: 40px;
    height: 50px;
    position: fixed;
    bottom: 70px;
    right: 30px;
    display: block;
}
.scrollup img { width: 100%; height: 100%; }
/* FORM CSS */
label{
  margin: 0 5px 5px 0;
  min-width: 120px;
  display: inline-block;
  vertical-align: middle;
}
span.description { display:inline-block; margin: 0 10px; font-style: italic; color: #BBB; word-wrap: break-word; }
.textbox, .selection, .textarea{
  padding: 5px 10px;
  margin-bottom: 5px;
  outline: 0;
  font-size: 1em;
  font-family: inherit;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #DDD;
}
.textbox[readonly]{
	background-color: #f2f2f2;
	color: #333;
	border: 1px solid #DDD;
	cursor: default;
	padding: 6px 11px;
}
ul.no-style{ list-style-type: none; padding: 0; margin: 0; }

.textarea { min-width: 250px; min-height: 100px; }
.textarea.maxwidth { width: 100%; max-width: 500px; }
.button {
  background-color: var(--red);
  padding: 5px 10px;
  border: 1px solid  var(--red);
  color: #FFF;
  text-transform: capitalize;
  font-family: inherit;
  font-size: 1em;
  font-weight: bold;
  outline: 0;
  display: inline-block;
  margin-right: 5px;
  /* border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 1px 3px #BBB; */
}
.button:hover{
  cursor: pointer;
  background-color: var(--green);
  border-color: var(--green);
}
.button.disabled { background-color: #DDD; color: #FFF; pointer-events: none; cursor: default; }
.button.black{
  background-color: #333;
  border-color: #333;
}
.button.black:hover{
  background-color: #DDD;
  border-color: #DDD;
  color: #000;
}
.button.yellow{
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: #000;
}
.button.yellow:hover{
  background-color: var(--yellow-hover);
  border-color:  var(--yellow-hover);
}
.form-error{
	border-color: #F00 !important;
	background-color: #F66 !important;
	color: #FFF;
}
.form-error-message, .form-message{
	width: 100%;
	background-color: #F66;
	color: #FFF;
	text-align: left;
	display: none;
	font-size: 1em;
	padding: 5px 10px;
	box-sizing: border-box;
	clear: both;
  margin: 5px 0;
}
.form-error-message a{
  color: #FF0;
}
.form-error-message a:hover{
  text-decoration: underline;
}
.form-message{
	background-color: var(--yellow);
	color: #000;
}

/* TABLE CSS */
	
.table{
  display: table;
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.table.separate { border-collapse: separate; border-spacing: 10px; }
.table.caption{
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
}

.col { width: 100%; display: block; box-sizing: border-box; vertical-align: top; }
.col.min-hide, .table.min-hide { display: none; }

[class*=" col"], [class^="col"]{
	padding: 5px;
	vertical-align: top;
	text-align: center;
	box-sizing: border-box;
}

[class*=" col-sm"], [class^="col-sm"]{ display: table-cell; }

.col-sm-1{ width: 8.333%; }
.col-sm-2{ width: 16.666%; }
.col-sm-3{ width: 24.999%; }
.col-sm-4{ width: 33.332%; }
.col-sm-5{ width: 41.665%; }
.col-sm-6{ width: 49.998%; }
.col-sm-7{ width: 58.331%; }
.col-sm-8{ width: 66.664%; }
.col-sm-9{ width: 74.997%; }
.col-sm-10{ width: 83.33%; }
.col-sm-11{ width: 91.663%; }

.image-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #EFEFEF;
  position: relative;
  overflow: hidden;
  border: 1px solid #CCC;
}
.image-uploader:hover{
	background-color: #FEFEFE;
}
.image-uploader:before{
  padding-top: 100%;
  content: "";
  display: block;
}
.image-uploader div{
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: table;
}
.image-uploader div a{
  font-size: 3em;
  text-align: center;
  color: #DDD;
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  position: relative;
}
.image-uploader div a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.image-uploader div a.bt{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 9;
  font-size: 0.8em;
  color: #FFF;
  background-color: #F00;
}
.image-uploader span.checkbox{
	display: block;
    position: absolute;
    top: 70px;
    left: 0;
    font-size: 0.8em;
    z-index: 999;
    background-color: #DADADA;
    padding: 0 5px 0 0;
}

/* MESSAGE */
.message.modal { padding: 0; }
.message.modal .close-modal { color: #000; }
.message.modal .close-modal:hover { color: #FFF; }
.message h2 { background-color: var(--main-color); color: #000; margin-bottom: 20px; border-bottom: 1px solid #DDD; padding: 10px 0; }
.message h2.error { background-color: #f44336; color: #FFF; }
.message h2 { padding: 5px 10px; margin-bottom: 10px; }
.message div { padding: 0 10px 10px; }
/* MESSAGE */


/* TABS */
.tab-container { width: 100%; background-color: #F6F6F6; display: inline-block; margin-bottom: 5px; position: relative; }
.tab-container .translate { position: absolute; top: 5px; right: 5px; color: #666; }
.tab-container ul.tab-nav { display: block; list-style-type: none; padding: 0; margin: 0; margin-bottom: -1px; }
.tab-container ul.tab-nav li { display: inline-block; padding: 5px 20px; margin: 0; border: 1px solid transparent; border-bottom: 0; text-decoration: none; color: #666; font-weight: bold; }
.tab-container ul.tab-nav li a { color: inherit; }
.tab-container ul.tab-nav li.active, .tab-container ul.tab-nav li:hover { border: 1px solid #DDD; border-bottom: 0; background-color: #FFF; cursor: pointer; color: #000; }
.tab-container .tabcontent{ background-color: #FFF; border: 1px solid #DDD; padding: 20px 10px 10px; }
/* /TABS */

/* STICKY */
.sticky { position: -webkit-sticky; position: sticky; top:0; }
/* / STICKY */

@media screen and (min-width: 768px) {
	[class*=" col-md"], [class^="col-md"]{ display: table-cell !important; }
	
	.col-md-1{ width: 8.333% !important; }
	.col-md-2{ width: 16.666% !important; }
	.col-md-3{ width: 24.999% !important; }
	.col-md-4{ width: 33.332% !important; }
	.col-md-5{ width: 41.665% !important; }
	.col-md-6{ width: 49.998% !important; }
	.col-md-7{ width: 58.331% !important; }
	.col-md-8{ width: 66.664% !important; }
	.col-md-9{ width: 74.997% !important; }
	.col-md-10{ width: 83.33% !important; }
	.col-md-11{ width: 91.663% !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 992px) {
	[class*=" col-lg"], [class^="col-lg"], .col.min-hide{ display: table-cell !important; }
	.col-lg-1{ width: 8.333% !important; }
	.col-lg-2{ width: 16.666% !important; }
	.col-lg-3{ width: 24.999% !important; }
	.col-lg-4{ width: 33.332% !important; }
	.col-lg-5{ width: 41.665% !important; }
	.col-lg-6{ width: 49.998% !important; }
	.col-lg-7{ width: 58.331% !important; }
	.col-lg-8{ width: 66.664% !important; }
	.col-lg-9{ width: 74.997% !important; }
	.col-lg-10{ width: 83.33% !important; }
	.col-lg-11{ width: 91.663% !important; }
	
}

/* image upload css */
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.custom-select {
	width: 100%;
    cursor:pointer;
    display:inline-block;
    position:relative;
    color:black;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect span { width: 95%; padding-right: 10%; display: inline-block; line-height: 100%; vertical-align: bottom; white-space: nowrap; }
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:14px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}

.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
	white-space: nowrap;
}
.options li:hover {
    background-color: var(--main-color);
    color:#000;
}

/* shake animation*/
.shake {
	animation: shake 3s infinite;
}

@keyframes shake {
	1%, 32%, 100% { transform: translate3d(-1px, 0, 0); }
	4%, 28% { transform: translate3d(2px, 0, 0); }
	8%, 16%, 24% {	transform: translate3d(-4px, 0, 0);	}
	12%,20% {	transform: translate3d(4px, 0, 0); }
}