/*
 * Lưới 12 cột và các khối bố cục.
 *
 * Viết mới hoàn toàn bằng flexbox. Tên class giữ nguyên như nội dung cũ đang
 * dùng (.row, .col, .small-N, .large-N, .section) để CSS sẵn có của site tiếp
 * tục ăn khớp mà không phải sửa dòng nào.
 *
 * Điểm ngắt:
 *   small   : mặc định, dưới 550px
 *   medium  : từ 550px
 *   large   : từ 850px
 */

/* ---------- Token ---------- */

:root {
	--xmn-container: 1230px;
	--xmn-gutter: 30px;
	--xmn-gutter-half: 15px;
}

/* ---------- Khung chứa ---------- */

.container {
	width: 100%;
	max-width: var(--xmn-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--xmn-gutter-half);
	padding-right: var(--xmn-gutter-half);
}

.container-width,
.full-width .ubermenu-nav,
.container .row {
	width: 100%;
}

/* ---------- Section ---------- */

.section {
	position: relative;
	display: block;
	padding: 30px 0;
	width: 100%;
}

/* Không giới hạn bề rộng: nội dung đặt thẳng trong section (ví dụ slider
   ảnh) tràn hết màn hình như theme cũ. Việc canh giữa do .row đảm nhiệm. */
.section-content {
	position: relative;
	width: 100%;
	z-index: 1;
}

.section-bg {
	overflow: hidden;
}

.fill {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 !important;
	margin: 0 !important;
}

.bg-fill {
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.section-bg .is-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-width: 0;
	border-color: rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.relative {
	position: relative;
}

/* ---------- Hàng ---------- */

/* Hàng rộng tối đa bằng container (1230px). Cột có đệm 15px mỗi bên nên nội
   dung trong cột rộng 1200px, thẳng mép với nội dung của .container. */
.row {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	max-width: var(--xmn-container);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

/* Hàng lồng trong container hoặc trong hàng khác: lề âm để bù đệm của cột. */
.container .row:not(.row-collapse),
.row .row:not(.row-collapse) {
	width: auto;
	margin-left: calc(var(--xmn-gutter-half) * -1);
	margin-right: calc(var(--xmn-gutter-half) * -1);
	padding-left: 0;
	padding-right: 0;
}

/* Khung container đặt trong hàng không có đệm riêng — cột đã có đệm. */
.row .container {
	padding-left: 0;
	padding-right: 0;
}

.row-full-width {
	max-width: 100% !important;
}

/* Khoảng cách cột theo biến thể hàng (theo theme cũ):
   row-small 9.8px · row-xsmall 2px · mặc định 15px · row-large 30px (chỉ trên
   màn hình rộng; màn hình nhỏ dùng khoảng mặc định). */
@media screen and (min-width: 850px) {
	.row .row-large:not(.row-collapse),
	.container .row-large:not(.row-collapse) {
		margin-left: -30px;
		margin-right: -30px;
		margin-bottom: 0;
	}

	.row-large > .col {
		margin-bottom: 0;
		padding: 0 30px 30px;
	}
}

.row .row-xsmall:not(.row-collapse),
.container .row-xsmall:not(.row-collapse) {
	margin-left: -2px;
	margin-right: -2px;
	margin-bottom: 0;
}

.row-xsmall > .col {
	margin-bottom: 0;
	padding: 0 2px 3px;
}

/* Vạch ngăn giữa các cột (trang giỏ hàng) */
@media screen and (min-width: 850px) {
	.row-divided > .col + .col:not(.large-12) {
		border-left: 1px solid #ececec;
	}

	.row-divided.row-reverse > .col + .col:not(.large-12) {
		border-left: 0;
		border-right: 1px solid #ececec;
	}
}

.row-collapse {
	margin-left: 0;
	margin-right: 0;
}

.row-collapse > .col {
	padding: 0 !important;
}

/* Canh nội dung theo chiều dọc */
.row.align-middle > .col {
	align-self: center;
}

.row.align-bottom > .col {
	align-self: flex-end;
}

.row.align-top > .col {
	align-self: flex-start;
}

/* Canh theo chiều ngang */
.row.align-center {
	justify-content: center;
}

.row.align-right {
	justify-content: flex-end;
}

/* ---------- Cột ---------- */

.col {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	padding: 0 var(--xmn-gutter-half) var(--xmn-gutter);
	margin: 0;
}

.col-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Bề rộng cho màn hình nhỏ — mặc định, áp cho mọi kích thước */
.small-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
.small-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
.small-3  { flex-basis: 25%;      max-width: 25%;      }
.small-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.small-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
.small-6  { flex-basis: 50%;      max-width: 50%;      }
.small-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.small-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
.small-9  { flex-basis: 75%;      max-width: 75%;      }
.small-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.small-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.small-12 { flex-basis: 100%;     max-width: 100%;     }

@media screen and (min-width: 550px) {
	.medium-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
	.medium-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
	.medium-3  { flex-basis: 25%;      max-width: 25%;      }
	.medium-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
	.medium-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
	.medium-6  { flex-basis: 50%;      max-width: 50%;      }
	.medium-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
	.medium-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
	.medium-9  { flex-basis: 75%;      max-width: 75%;      }
	.medium-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
	.medium-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
	.medium-12 { flex-basis: 100%;     max-width: 100%;     }
}

@media screen and (min-width: 850px) {
	.large-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
	.large-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
	.large-3  { flex-basis: 25%;      max-width: 25%;      }
	.large-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
	.large-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
	.large-6  { flex-basis: 50%;      max-width: 50%;      }
	.large-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
	.large-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
	.large-9  { flex-basis: 75%;      max-width: 75%;      }
	.large-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
	.large-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
	.large-12 { flex-basis: 100%;     max-width: 100%;     }
}

/* ---------- Tiện ích hiện/ẩn theo màn hình ---------- */

@media screen and (max-width: 849px) {
	.hide-for-medium {
		display: none !important;
	}
}

@media screen and (min-width: 850px) {
	.show-for-medium {
		display: none !important;
	}
}

@media screen and (max-width: 549px) {
	.hide-for-small {
		display: none !important;
	}
}

@media screen and (min-width: 550px) {
	.show-for-small {
		display: none !important;
	}
}

.flex-grow {
	flex: 1 1 0;
	max-width: 100%;
}

/* ---------- Hàng dạng flex dùng cho header ---------- */

.flex-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: 100%;
}

.flex-col {
	max-height: 100%;
}

.flex-left {
	margin-right: auto;
}

.flex-right {
	margin-left: auto;
}

.flex-center {
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 849px) {
	.flex-row {
		flex-flow: row wrap;
	}
}

/* ---------- Căn chữ ---------- */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---------- Khoảng trống ---------- */

.xmn-gap {
	width: 100%;
	display: block;
}

/* ==========================================================================
   Class tiện ích
   Template và nội dung của site dùng các class này (mb-0 xuất hiện ~50 lần
   mỗi trang, pb-0 trên widget chân trang, aligncenter cho ảnh trong bài…).
   Giá trị khớp với theme cũ để khoảng cách không xê dịch.
   ========================================================================== */

.mb-0   { margin-bottom: 0 !important; }
.mt-0   { margin-top: 0 !important; }
.ml-0   { margin-left: 0 !important; }
.mr-0   { margin-right: 0 !important; }
.mb     { margin-bottom: 30px; }
.mt     { margin-top: 30px; }
.mb-half { margin-bottom: 15px; }
.mt-half { margin-top: 15px; }

/* Phần tử cuối trong khối không cần khoảng dưới. */
.mb-half:last-child,
.mb:last-child { margin-bottom: 0; }

.pb-0   { padding-bottom: 0 !important; }
.pt-0   { padding-top: 0 !important; }
.pb     { padding-bottom: 30px; }
.pt     { padding-top: 30px; }
.pb-half { padding-bottom: 15px; }
.pt-half { padding-top: 15px; }

.page-wrapper {
	padding-top: 30px;
	padding-bottom: 30px;
}

.z-1   { z-index: 21; }
.z-2   { z-index: 22; }
.z-3   { z-index: 23; }
.z-top { z-index: 9995; }

.absolute     { position: absolute !important; }

/* Neo phần tử định vị tuyệt đối vào cạnh khung chứa */
.top    { top: 0; }
.right  { right: 0; }
.bottom { bottom: 0; }
.left   { left: 0; }
.fixed        { position: fixed !important; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.block        { display: block; }

.pull-left  { float: left; }
.pull-right { float: right; }

/* Khung bao trọn các phần tử float bên trong (ví dụ hai cột .sb_left /
   .sb_right của trang tin tức do CSS của site thả float), như theme cũ. */
.container::after,
.row::after,
.clearfix::after,
.clear::after {
	content: "";
	display: table;
	clear: both;
}

.col-fit {
	flex: 1;
}

/* Chữ in hoa giãn nhẹ — cũng áp cho tiêu đề cột bảng, h6 và tiêu đề widget
   như theme cũ. Riêng class .uppercase (thường gắn cho tiêu đề) thưa dòng
   hơn một chút. */
.uppercase,
h6,
th,
span.widget-title {
	line-height: 1.05;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.is-uppercase,
.uppercase {
	line-height: 1.2;
}

.is-xsmall { font-size: 0.7em; }
.is-small  { font-size: 0.8em; }
.is-large  { font-size: 1.15em; }
.is-larger { font-size: 1.3em; }
.is-normal { font-weight: normal; }

.circle {
	border-radius: 999px !important;
	object-fit: cover;
}

/* Canh ảnh trong nội dung bài viết (lớp chuẩn của WordPress) */
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

.alignleft {
	float: left;
	margin: 0 1.4em 1.3em 0;
}

.alignright {
	float: right;
	margin: 0 0 1.3em 1.4em;
}

@media screen and (max-width: 849px) {
	.medium-text-center {
		float: none !important;
		width: 100% !important;
		text-align: center !important;
	}
}

@media screen and (max-width: 549px) {
	.small-text-center {
		float: none !important;
		width: 100% !important;
		text-align: center !important;
	}
}