/*
 * modern-grid.css
 * Viet lai he luoi (.container/.row/.col-*) cua Bootstrap 3 bang Flexbox hien dai.
 * Giu NGUYEN ten class, breakpoint (768/992/1200px) va so cot (12) giong Bootstrap 3
 * de khong phai sua lai bat ky file PHP nao, chi thay co che ben duoi (float -> flexbox).
 * File nay duoc nap SAU bundle.css (chua Bootstrap 3 goc) de cac quy tac o day
 * ghi de len phan grid cu cua Bootstrap, cac class khac cua Bootstrap (button, form,
 * navbar, alert...) van giu nguyen tu bundle.css, chua dong den.
 */

*, *::before, *::after { box-sizing: border-box; }

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.container-fluid {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

/* cac class col-* mac dinh la flex item, rong bang noi dung neu khong khai bao co */
[class*=" col-"], [class^="col-"] {
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* ---- XS: mac dinh, khong can media query (giong Bootstrap 3) ---- */
.col-xs-1  { flex: 0 0 8.33333%;  max-width: 8.33333%; }
.col-xs-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
.col-xs-3  { flex: 0 0 25%;       max-width: 25%; }
.col-xs-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
.col-xs-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
.col-xs-6  { flex: 0 0 50%;       max-width: 50%; }
.col-xs-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
.col-xs-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
.col-xs-9  { flex: 0 0 75%;       max-width: 75%; }
.col-xs-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
.col-xs-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
.col-xs-12 { flex: 0 0 100%;      max-width: 100%; }

/* ---- SM: >= 768px ---- */
@media (min-width: 768px) {
	.container { max-width: 750px; }
	.col-sm-1  { flex: 0 0 8.33333%;  max-width: 8.33333%; }
	.col-sm-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
	.col-sm-3  { flex: 0 0 25%;       max-width: 25%; }
	.col-sm-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
	.col-sm-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
	.col-sm-6  { flex: 0 0 50%;       max-width: 50%; }
	.col-sm-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
	.col-sm-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
	.col-sm-9  { flex: 0 0 75%;       max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
	.col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
	.col-sm-12 { flex: 0 0 100%;      max-width: 100%; }
}

/* ---- MD: >= 992px ---- */
@media (min-width: 992px) {
	.container { max-width: 970px; }
	.col-md-1  { flex: 0 0 8.33333%;  max-width: 8.33333%; }
	.col-md-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
	.col-md-3  { flex: 0 0 25%;       max-width: 25%; }
	.col-md-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
	.col-md-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
	.col-md-6  { flex: 0 0 50%;       max-width: 50%; }
	.col-md-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
	.col-md-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
	.col-md-9  { flex: 0 0 75%;       max-width: 75%; }
	.col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
	.col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
	.col-md-12 { flex: 0 0 100%;      max-width: 100%; }
}

/* ---- LG: >= 1200px ---- */
@media (min-width: 1200px) {
	.container { max-width: 1170px; }
	.col-lg-1  { flex: 0 0 8.33333%;  max-width: 8.33333%; }
	.col-lg-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
	.col-lg-3  { flex: 0 0 25%;       max-width: 25%; }
	.col-lg-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
	.col-lg-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
	.col-lg-6  { flex: 0 0 50%;       max-width: 50%; }
	.col-lg-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
	.col-lg-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
	.col-lg-9  { flex: 0 0 75%;       max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
	.col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
	.col-lg-12 { flex: 0 0 100%;      max-width: 100%; }
}