/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

input[type="submit"] {
	background-color: #006633;
}

input[type="submit"]:hover {
    background-color: #336699;
}

.myblue {
	color: #336699;	
}

a {
    text-decoration: none !important;
}

#licham .button {
    background-color: #006633;
    border: none;
    color: #fdb913;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.tienIchForm {
	background: #f8f9fa;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.125);
    line-height: 1.3;
	-webkit-box-shadow: 0 3px 5px 0 rgb(0 1 1 / 10%);
    box-shadow: 0 3px 5px 0 rgb(0 1 1 / 10%);
}

/*--- CON BAO NHIEU NGAY ---*/
/*--------------------------*/

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: transparent;
}

#content #particles-js {
	margin-left: -20px;
	margin-right: -20px;
}

#js-countdown {
	text-align:center;
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 31%;
  margin-bottom: 2rem;
}

.countdown__item--large {
  flex: auto;
  width: 100%;
  font-size: 2.75em;
}

.countdown__timer {
  padding-top: .25em;
  font-weight: bold;
  font-size: 2em;
}

.countdown__label {
  font-size: 1em;
}
/*--- END CON BAO NHIEU NGAY ---*/

/* CSS CATE */

.generate-columns h2 {
	font-size: 17px;
	text-transform: uppercase;
}

.cate a {
	text-decoration: none;
}

.cate .hvr-underline-from-left:before {
    background: #006633;
    height: 2px;
}

.cate a, .dsl a {
	color: #006633;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.2em;
}

.cate a:hover, .dsl a:hover {
	color: #336699;
}
	.cate {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		display: flex;
		flex-flow: row wrap;
		margin-bottom: 20px;
	}

	.cate div {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-flow: column nowrap;
		padding: 10px 0;
		box-sizing: border-box;
	   -moz-box-sizing: border-box;
	   -webkit-box-sizing: border-box;
	}
	.cate div:hover {
		box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
		transition: box-shadow 200ms ease-in-out;
	}

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

}

#flags-cate {
	text-align: center;
}

#flags-cate img {
	width: 65px;
	height: 65px;
}

/*--calendar--*/
.calendar-container * {
  box-sizing:border-box;
}
.calendar-container {
	width: 100%;
  	margin: auto;
}
.calendar-container ul {
  list-style-type: none;
}

@media screen and (max-width: 480px) {
  .calendar-container .month strong {
	font-size: 15px !important;
}
}

.calendar-container .month {
    width: 100%;
    background: #006633;
	padding: 20px;
}

.calendar-container .month ul {
    margin: 0;
    padding: 0;
}

.calendar-container .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.calendar-container .weekdays {
    margin: auto;
}

.calendar-container .weekdays li {
    float: left;
    width: 14.28%;
    text-align: center;
	background-color: #f1f1f1;
	padding: 10px 0;
}

.calendar-container .days {
    margin: auto;
}

.calendar-container .days li {
    list-style-type: none;
    float: left;
    width: 14.285%;
    text-align: center;
    margin-bottom: 5px;
    font-size: 24px;
	border: 1px solid #006633;
	padding: 5px;
}

.calendar-container .days .cell {
    width: 14.285%;
	line-height: 250%;
}

.calendar-container .days p {
	text-align: right;
	font-size: 17px;
}

.calendar-container .active {
    background: #009933;
    color: white;
}

.calendar-container .month a {
	color: #fdb913;
}

.calendar-container .month a:hover {
	color: #f1f1f1;
}

@media (max-width: 768px) {
	.calendar-container .days li {
		font-size: 21px;		
	}
	.calendar-container .days p {
		font-size: 14px;
	}
}

#licham .cell a {
	color:red;
}

.dsl * {
	box-sizing:border-box;
	background-color: #f1f1f1;
}

.dsl {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	display: flex;
	flex-flow: row wrap;
}

.dsl div {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-flow: column nowrap;
	padding: 10px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.dsl div:hover {
	box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
	transition: box-shadow 200ms ease-in-out;
}

.dsl h3 {
	margin: 0px;
}

.dsl p {
	margin:0;
	color: #336699;
}

.dsl span {
    color: #222222;
    font-size: 17px;
    font-weight: 400;
    text-transform: none;
    line-height: 1.5;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 24%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 10px 10px 0 10px;
  text-align: center;
  background-color: #f1f1f1;
  margin-left: 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
    display: flex;
    flex-flow: row wrap;
	clear: both;
	margin-left: -10px;
}

/* Responsive columns */
@media screen and (max-width: 768px) {
  .column {
    width: 47%;
  }
}


.wrapper-gradient {
    background: linear-gradient(-45deg, #000000, #000033, #021145);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}