/*!
 * vns-bs3-compat.css
 * ---------------------------------------------------------------------------
 * Lớp tương thích Bootstrap 3 -> Bootstrap 4.
 *
 * Dự án chuyển từ Metronic 3.6 (Bootstrap 3.3.1) sang SB Admin 2 (Bootstrap
 * 4.6). File này khai báo lại những class Bootstrap 3 đã bị BS4 loại bỏ, để
 * ~794 view .cshtml hiện có không phải sửa markup.
 *
 * Nạp SAU sb-admin-2.min.css.
 *
 * LƯU Ý khi bảo trì: KHÔNG khai báo `.show` ở đây. Bootstrap 3 dùng
 * `.show { display: block !important }` nhưng BS4 dùng `.show` cho trạng thái
 * mở của dropdown/collapse — ghi đè sẽ làm hỏng toàn bộ dropdown.
 * ---------------------------------------------------------------------------
 */

/* ==== Màu chữ thân trang ================================================
 *
 * SB Admin 2 đặt body { color: #858796 } (gray-600 của theme). Trên nền
 * trắng màu đó chỉ đạt độ tương phản 3.56:1 - DƯỚI chuẩn WCAG AA cho chữ
 * thường (cần 4.5:1). Đọc lâu bị mỏi, và màn hình văn phòng chỉnh sáng thấp
 * thì chữ gần như trôi.
 *
 * Đổi sang #5a5c69 - vẫn là gam xám-xanh đó, cũng nằm sẵn trong bảng màu của
 * theme (gray-800), chỉ đậm hơn. Đạt 6.63:1, thoải mái qua AA và sát AAA.
 *
 * KHÔNG sửa sb-admin-2.min.css: đó là tệp của theme, giữ nguyên để còn nâng
 * cấp được. File này nạp sau nên đè là đủ.
 *
 * Chỉ đụng màu chữ chung. Những chỗ cố ý nhạt hơn (.text-muted, chú thích
 * nhỏ, nhãn phụ) vẫn giữ nguyên vì chúng vốn là chữ hạng hai.
 * ======================================================================== */
body {
	color: #5a5c69;
}

/*
 * Theme đặt #858796 ở 37 luật. Dưới đây là những luật vẽ CHỮ ĐỌC THẬT - đổi
 * hết cho đồng bộ với body.
 *
 * KHÔNG đưa .btn vào danh sách này. Đã thử và đã sai: .btn khớp với MỌI biến
 * thể nút (.btn-success, .btn-primary, .btn-danger...) mà cả điểm của chúng là
 * chữ TRẮNG trên nền màu. Luật ở đây cùng độ chọn lọc (0,1,0) với
 * .btn-success { color: #fff } của theme nhưng nạp SAU nên thắng - hậu quả là
 * nút "Đăng nhập" thành chữ xám #5a5c69 trên nền xanh lá #5cb85c, đọc rất tệ.
 * Nút không mang biến thể nào thì đã lấy màu từ body, khỏi cần khai lại.
 * hết cho đồng bộ với body, nếu không thì bảng và nút vẫn nhạt trong khi phần
 * còn lại đã đậm, nhìn còn chắp vá hơn.
 */
.table,
.table-hover tbody tr:hover,
caption,
.dropdown-menu,
.dropdown-header,
.form-control-plaintext,
.blockquote-footer,
.figure-caption,
.breadcrumb-item.active,
.list-group-item-action:active,
.popover-body,
.toast-header,
.text-body,
.text-secondary,
.text-gray-600,
.sidebar-light .nav-item .nav-link {
	color: #5a5c69;
}

/*
 * CỐ Ý KHÔNG ĐỤNG những nhóm dưới đây - chúng nhạt vì mang nghĩa, đậm lên là
 * mất nghĩa:
 *
 *   .form-control::placeholder   gợi ý phải nhạt hơn chữ đã gõ, không thì
 *                                người dùng tưởng ô đã có dữ liệu
 *   *:disabled, *.disabled       vô hiệu phải nhìn ra là vô hiệu
 *   .breadcrumb-item::before     dấu phân cách, không phải nội dung
 *   .text-muted                  nay mới thành "mờ" thật: trước đây nó trùng
 *                                y màu chữ thường nên chẳng mờ hơn gì cả
 *   .btn-outline-secondary       màu chữ phải khớp màu viền của chính nó
 */

/*
 * Nút TRẦN - không mang biến thể màu nào.
 *
 * Theme đặt .btn { color: #858796 } (3.56:1, dưới chuẩn AA) nên vẫn cần đậm lên.
 * :not([class*="btn-"]) loại mọi thứ có tiền tố btn- ra, nhờ vậy .btn-success,
 * .btn-primary... giữ nguyên chữ trắng của chúng. Đổi lại nút chỉ mang .btn-sm
 * cũng bị loại - chấp nhận được, thà bỏ sót vài nút còn hơn biến chữ trắng thành
 * xám trên nền màu.
 */
.btn:not([class*="btn-"]) {
	color: #5a5c69;
}

/* ==== Floats & visibility ================================================ */
.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}

.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* BS4 bỏ .hidden (dùng .d-none) */
.hidden,
.display-none {
	display: none !important;
}

.invisible {
	visibility: hidden;
}

/* BS3 responsive utilities */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-sm-block,
.visible-md-block,
.visible-lg-block,
.visible-xs-inline,
.visible-sm-inline,
.visible-md-inline,
.visible-lg-inline,
.visible-xs-inline-block,
.visible-sm-inline-block,
.visible-md-inline-block,
.visible-lg-inline-block {
	display: none !important;
}

@media (max-width: 767px) {
	.visible-xs { display: block !important; }
	.visible-xs-block { display: block !important; }
	.visible-xs-inline { display: inline !important; }
	.visible-xs-inline-block { display: inline-block !important; }
	.hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm { display: block !important; }
	.visible-sm-block { display: block !important; }
	.visible-sm-inline { display: inline !important; }
	.visible-sm-inline-block { display: inline-block !important; }
	.hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.visible-md { display: block !important; }
	.visible-md-block { display: block !important; }
	.visible-md-inline { display: inline !important; }
	.visible-md-inline-block { display: inline-block !important; }
	.hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
	.visible-lg { display: block !important; }
	.visible-lg-block { display: block !important; }
	.visible-lg-inline { display: inline !important; }
	.visible-lg-inline-block { display: inline-block !important; }
	.hidden-lg { display: none !important; }
}

/* ==== Buttons ============================================================ */
/*
 * BS3 có white-space: nowrap trên .btn, BS4 bỏ đi. Toàn bộ view được viết
 * dựa trên hành vi cũ: nút hành động trong cột bảng ("Cho phép tạm thời",
 * "Cho phép thường xuyên", "Xóa thông tin IMEI hiện tại"... ở
 * /Debug/PhoneIMEIUpdate) bị bẻ chữ xuống dòng khi cột hẹp. Trả lại mặc
 * định BS3.
 */
.btn {
	white-space: nowrap;
}

/* BS4 đổi .btn-default -> .btn-secondary. 571 lượt dùng trong view. */
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

.btn-default:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
	color: #333;
	background-color: #dbdbdb;
	border-color: #a2a2a2;
}

.btn-default:focus,
.btn-default.focus {
	box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.5);
}

.btn-default.disabled,
.btn-default:disabled {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

/* BS4 bỏ .btn-xs. 472 lượt dùng. Giữ nguyên số đo của Metronic. */
.btn-xs {
	padding: 1px 5px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 0.2rem;
}

.btn-xs > i {
	font-size: 12px;
}

.btn-group-xs > .btn {
	padding: 1px 5px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 0.2rem;
}

/* BS4 bỏ .caret (dropdown tự vẽ bằng ::after) */
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-top: 4px solid \9;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

/* ==== Labels -> Badges =================================================== */
/* BS4 đổi .label -> .badge. */
.label {
	display: inline;
	padding: 0.2em 0.6em 0.3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	text-shadow: none !important;
}

.label:empty {
	display: none;
}

.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info    { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger  { background-color: #d9534f; }

/* Biến thể cỡ chữ của Metronic */
.label.label-sm {
	font-size: 12px;
	padding: 0 4px 1px 4px;
}

.label.label-mini {
	font-size: 11px;
	padding: 0 3px 1px 3px;
}

.badge.badge-roundless {
	border-radius: 0 !important;
}

/* ==== Forms ============================================================== */
/* BS4 đổi .control-label -> .col-form-label */
.control-label {
	margin-bottom: 0.5rem;
	font-weight: 400;
}

/* BS4 đổi .help-block -> .form-text */
.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #737373;
	font-size: 0.875em;
}

.form-control-static {
	margin: 2px 0;
	display: inline-block;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-bottom: 0;
}

/* BS4 đổi .input-sm/.input-lg -> .form-control-sm/.form-control-lg */
.input-sm,
select.input-sm,
textarea.input-sm {
	height: calc(1.5em + 0.5rem + 2px);
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}

.input-lg,
select.input-lg,
textarea.input-lg {
	height: calc(1.5em + 1rem + 2px);
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: 0.3rem;
}

/* BS4 đổi .has-error/.has-success -> .is-invalid/.is-valid */
.has-error .form-control,
.has-error .control-label,
.has-error .help-block {
	border-color: #a94442;
	color: #a94442;
}

.has-error .form-control {
	color: #495057;
}

.has-success .form-control {
	border-color: #3c763d;
}

.has-warning .form-control {
	border-color: #8a6d3b;
}

/* BS3 checkbox / radio wrappers */
.checkbox,
.radio {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}

.checkbox > label,
.radio > label {
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

.checkbox > label > input[type="checkbox"],
.radio > label > input[type="radio"] {
	position: absolute;
	margin-top: 4px \9;
	margin-left: -20px;
}

.checkbox-inline,
.radio-inline {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	vertical-align: middle;
	cursor: pointer;
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
	margin-top: 0;
	margin-left: 10px;
}

.checkbox-inline > input[type="checkbox"],
.radio-inline > input[type="radio"] {
	position: absolute;
	margin-left: -20px;
}

/* BS3 .form-horizontal */
.form-horizontal .form-group {
	margin-right: -15px;
	margin-left: -15px;
}

.form-horizontal .form-group::after {
	display: block;
	clear: both;
	content: "";
}

@media (min-width: 768px) {
	.form-horizontal .control-label {
		padding-top: 7px;
		margin-bottom: 0;
		text-align: right;
	}
}

/* BS4 bỏ .input-group-addon / .input-group-btn */
.input-group-addon {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	text-align: center;
	white-space: nowrap;
	background-color: #eceeef;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
}

.input-group > .input-group-addon:not(:last-child),
.input-group > .input-group-btn:not(:last-child) > .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group > .input-group-addon:not(:first-child),
.input-group > .input-group-btn:not(:first-child) > .btn {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group-btn {
	display: flex;
	align-items: stretch;
}

.input-group-btn > .btn {
	position: relative;
	z-index: 2;
}

/* ==== Panels -> Cards ==================================================== */
.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-bottom: 20px;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid #e3e6f0;
	border-radius: 0.35rem;
}

.panel-heading {
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background-color: #f8f9fc;
	border-bottom: 1px solid #e3e6f0;
	border-top-left-radius: calc(0.35rem - 1px);
	border-top-right-radius: calc(0.35rem - 1px);
}

.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	color: inherit;
}

.panel-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}

.panel-footer {
	padding: 0.75rem 1.25rem;
	background-color: #f8f9fc;
	border-top: 1px solid #e3e6f0;
}

.panel-default > .panel-heading { color: #333; }
.panel-primary { border-color: #4e73df; }
.panel-primary > .panel-heading { color: #fff; background-color: #4e73df; border-color: #4e73df; }
.panel-success { border-color: #1cc88a; }
.panel-success > .panel-heading { color: #fff; background-color: #1cc88a; border-color: #1cc88a; }
.panel-info { border-color: #36b9cc; }
.panel-info > .panel-heading { color: #fff; background-color: #36b9cc; border-color: #36b9cc; }
.panel-warning { border-color: #f6c23e; }
.panel-warning > .panel-heading { color: #fff; background-color: #f6c23e; border-color: #f6c23e; }
.panel-danger { border-color: #e74a3b; }
.panel-danger > .panel-heading { color: #fff; background-color: #e74a3b; border-color: #e74a3b; }

/* ==== Dropdown (markup BS3: .dropdown-menu > li > a) ===================== */
.dropdown-menu > li > a {
	display: block;
	width: 100%;
	padding: 0.25rem 1.5rem;
	clear: both;
	font-weight: 400;
	color: #3a3b45;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	text-decoration: none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	color: #2e2f37;
	text-decoration: none;
	background-color: #eaecf4;
}

.dropdown-menu > li.active > a {
	color: #fff;
	background-color: #4e73df;
}

.dropdown-menu > li.disabled > a {
	color: #858796;
	pointer-events: none;
	background-color: transparent;
}

/* BS4 đổi .divider -> .dropdown-divider */
.dropdown-menu > li.divider,
.dropdown-menu .divider {
	height: 0;
	margin: 0.5rem 0;
	overflow: hidden;
	border-top: 1px solid #eaecf4;
}

/* ==== Images ============================================================= */
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.img-circle {
	border-radius: 50%;
}

.img-rounded {
	border-radius: 6px;
}

.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* ==== Tables ============================================================= */
/* BS4 đổi .table-condensed -> .table-sm */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
	padding: 0.3rem;
}

/* ==== Misc =============================================================== */
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
}

.dl-horizontal dd::after {
	display: block;
	clear: both;
	content: "";
}

@media (min-width: 768px) {
	.dl-horizontal dt {
		float: left;
		width: 160px;
		overflow: hidden;
		clear: left;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dl-horizontal dd {
		margin-left: 180px;
	}
}

.list-inline {
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
}

.list-inline > li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

/* ==== Glyphicons -> Font Awesome 6 Free ================================== */
/*
 * Bootstrap 4 không còn Glyphicons. Chỉ có duy nhất
 * .glyphicon-circle-arrow-right đang được dùng (11 lượt), map sang FA6.
 */
.glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.glyphicon::before {
	content: var(--fa);
}

.glyphicon-circle-arrow-right { --fa: "\f0a9"; }   /* fa-circle-arrow-right */
.glyphicon-ok                 { --fa: "\f00c"; }
.glyphicon-remove             { --fa: "\f00d"; }
.glyphicon-chevron-left       { --fa: "\f053"; }
.glyphicon-chevron-right      { --fa: "\f054"; }
.glyphicon-calendar           { --fa: "\f133"; }
.glyphicon-time               { --fa: "\f017"; }
.glyphicon-trash              { --fa: "\f1f8"; }
.glyphicon-search             { --fa: "\f002"; }
.glyphicon-plus               { --fa: "\2b"; }
.glyphicon-minus             { --fa: "\f068"; }
.glyphicon-arrow-up           { --fa: "\f062"; }
.glyphicon-arrow-down         { --fa: "\f063"; }

/* ==== bootstrap-select: trả lại viền cho ô chọn =========================
 *
 * Plugin dựng ra <button class="btn dropdown-toggle btn-light">. Ở Bootstrap 3
 * nút mặc định là .btn-default có viền xám #ccc nên ô chọn trông như một ô
 * nhập liệu. Bootstrap 4 của SB Admin 2 thì:
 *     .btn-light { background-color: #f8f9fc; border-color: #f8f9fc }
 * đúng bằng màu nền trang -> viền tàng hình, ô chọn nhìn như chữ trôi nổi
 * trong khi ô nhập liệu bên cạnh vẫn có viền.
 *
 * Chép nguyên bộ giá trị của .form-control để hai loại ô đứng cạnh nhau khớp
 * chiều cao và màu viền.
 *
 * Dùng thêm .btn cho đủ 3 lớp: bootstrap-select.min.css nạp SAU file này
 * (xem _Layout.cshtml), nếu chỉ 2 lớp thì hoà điểm và plugin thắng.
 */
.bootstrap-select > .dropdown-toggle.btn {
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6e707e;
	background-color: #fff;
	border: 1px solid #d1d3e2;
	border-radius: 0.35rem;
}

.bootstrap-select > .dropdown-toggle.btn:hover {
	background-color: #fff;
	border-color: #d1d3e2;
}

.bootstrap-select > .dropdown-toggle.btn:focus,
.bootstrap-select.show > .dropdown-toggle.btn {
	background-color: #fff;
	border-color: #bac8f3;
	box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/* Nút bị vô hiệu hoá: giữ đúng cảm giác của input readonly */
.bootstrap-select > .dropdown-toggle.btn.disabled,
.bootstrap-select > .dropdown-toggle.btn:disabled {
	background-color: #eaecf4;
	border-color: #d1d3e2;
	opacity: 1;
}

/* ==== .table-info: vô hiệu hoá phần tô màu của Bootstrap 4 ==============
 *
 * 975 bảng trong dự án viết <table class="table table-info">. Ở Bootstrap
 * 3.3.1 KHÔNG hề có class .table-info (đã đối chiếu bản trên nhánh master:
 * 0 lần xuất hiện) - BS3 chỉ có .info đặt trên <tr>/<td>. Vậy nên suốt bao
 * năm class này không vẽ gì, bảng hiện màu trắng bình thường.
 *
 * Bootstrap 4 thì có thật:
 *     .table-info, .table-info > td, .table-info > th { background-color: #c7ebf1 }
 *     .table-info td, .table-info th, ...             { border-color: #96dbe4 }
 * nên mọi bảng đột nhiên xanh xám, khác hẳn bản cũ (thấy rõ ở /Home/Dashboard).
 *
 * KHÔNG gỡ class khỏi view: 13 view đang dùng .table-info làm mốc cho CSS
 * riêng của trang, dạng `.table-info tr:hover, .table-info tr.selected {...}`.
 * Gỡ đi là mất luôn hiệu ứng rê chuột / chọn dòng ở những trang đó.
 *
 * Vì vậy chỉ trung hoà đúng phần tô màu. Selector giữ NGUYÊN độ ưu tiên như
 * Bootstrap và file này nạp sau sb-admin-2.min.css nên hoà điểm thì thắng.
 */
.table-info,
.table-info > td,
.table-info > th {
	background-color: transparent;
}

.table-info tbody + tbody,
.table-info td,
.table-info th,
.table-info thead th {
	/* Trả về đúng màu viền của .table trong SB Admin 2 */
	border-color: #e3e6f0;
}

/*
 * Hai luật hover của Bootstrap dành cho <tr class="table-info"> nằm trong bảng
 * .table-hover. Ở dự án này .table-info lại nằm trên chính <table> nên chúng
 * gần như không khớp - vẫn trung hoà cho chắc, và để 13 view có luật hover
 * riêng tự quyết (CSS của trang nạp sau file này qua @section styles).
 */
.table-hover .table-info:hover,
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
	background-color: transparent;
}

/* ==== .row: trả lại hành vi Bootstrap 3 cho con KHÔNG phải cột ==========
 *
 * Bootstrap 3:  .row { margin-left: -15px; margin-right: -15px }  -> là BLOCK
 * Bootstrap 4:  .row { display: flex; flex-wrap: wrap; ... }      -> là FLEX
 *
 * _Layout bọc @RenderBody() trong một .row. Ở Bootstrap 3, thẻ gốc của view dù
 * không mang class cột vẫn là block nên rộng 100%. Sang Bootstrap 4 nó thành
 * flex item với flex-basis: auto -> CO LẠI ĐÚNG BẰNG NỘI DUNG.
 *
 * Trang nhiều cột không lộ ra vì nội dung tự đủ rộng. Trang ít cột hoặc không
 * có dữ liệu thì thẻ chỉ chiếm một phần bề ngang, chừa mảng trống lớn bên phải
 * (thấy ở /TheoDoi/TinHieuHopDenNhayViTri và /GQKhieuNai/KhachBiKhoaSMS).
 *
 * Phạm vi: 45 view có thẻ gốc trần, CỘNG với Views/Shared/Paging.cshtml - vốn
 * là thân của khoảng 355 trang báo cáo và sinh ra <div class="idcallback ...">
 * chính là nơi bảng dữ liệu được nạp vào bằng AJAX.
 *
 * KHÔNG đặt .row { display: block }: /Home/NewIndex có col-md-9 và col-md-3
 * đứng cạnh nhau ở cấp gốc, chuyển sang block là hai cột xếp chồng lên nhau.
 *
 * Chỉ áp cho .row của _Layout, không đụng .row lồng bên trong view.
 * `[class*="col-"]` an toàn với các class dạng .color-100 trong report vì
 * chuỗi "col-" không nằm trong "color-".
 */
#content > .container-fluid > .row > *:not([class*="col-"]):not(.col) {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ==== Template soạn thảo mặc định của ASP.NET MVC ========================
 *
 * @Html.EditorFor(...) dùng template dựng sẵn của MVC, sinh ra
 *     <input class="text-box single-line" type="text" ... />
 *     <textarea class="text-box multi-line" ...></textarea>
 * chứ KHÔNG phải class="form-control". Dự án gọi EditorFor 545 lần trong 141
 * view, nên chừng đó ô nhập giữ nguyên kiểu mặc định của trình duyệt: viền
 * mảnh, góc vuông, thấp hơn hẳn các ô .form-control đứng cạnh.
 *
 * Thấy rõ ở /BaoCao/DSCuocXeChotGia - bốn ô "-1" và ô cạnh "Bằng".
 *
 * Sửa bằng CSS thay vì thêm htmlAttributes vào 545 lời gọi: rủi ro thấp hơn
 * nhiều và không đụng vào view nào. Chép đúng bộ giá trị của .form-control.
 */
.text-box.single-line,
.text-box.multi-line {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6e707e;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #d1d3e2;
	border-radius: 0.35rem;
}

.text-box.single-line {
	height: calc(1.5em + 0.75rem + 2px);
}

.text-box.multi-line {
	min-height: calc(1.5em * 3 + 0.75rem + 2px);
}

	.text-box.single-line:focus,
	.text-box.multi-line:focus {
		color: #6e707e;
		background-color: #fff;
		border-color: #bac8f3;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
	}

	.text-box.single-line:disabled,
	.text-box.single-line[readonly],
	.text-box.multi-line:disabled,
	.text-box.multi-line[readonly] {
		background-color: #eaecf4;
		opacity: 1;
	}

/* MVC gắn class này khi kiểm tra hợp lệ thất bại - cho nó dáng .is-invalid */
.input-validation-error {
	border-color: #e74a3b !important;
}

	.input-validation-error:focus {
		box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25) !important;
	}

.field-validation-error,
.validation-summary-errors {
	color: #e74a3b;
	font-size: 0.875em;
}

/* ==== Helper của MVC gọi KHÔNG kèm htmlAttributes =======================
 *
 * @Html.DropDownListFor(m => m.X, lst) và @Html.TextBoxFor(m => m.X) không
 * truyền htmlAttributes thì sinh thẻ KHÔNG có thuộc tính class nào, nên giữ
 * nguyên kiểu mặc định của trình duyệt.
 *
 * Đã đếm trong Views:
 *     283 DropDownListFor trần (200 cái còn lại nằm trong .selectpicker và đã
 *         được bootstrap-select thay thế)
 *      87 TextBoxFor trần
 *      32 TextAreaFor trần
 *
 * Thấy ở /BaoCao/DSCuocXeChotGiaXeTrongKV - ô lọc "App phone".
 *
 * Bắt bằng :not([class]) - khớp đúng thẻ KHÔNG có thuộc tính class, tức là
 * chính xác những thẻ do helper sinh ra mà không ai gán gì thêm. Nhờ vậy không
 * đè lên thẻ nào đã được gán class tử tế, kể cả <select> gốc mà
 * bootstrap-select đã gắn .bs-select-hidden sau khi khởi tạo.
 *
 * Giới hạn trong .portlet (khung báo cáo), .form-update (bảng nhập liệu) và
 * .vns-win (cửa sổ). KHÔNG áp toàn cục vì thanh trên cùng cũng có <select>
 * trần nhưng đã có luật riêng cho cỡ nhỏ gọn.
 */
.portlet select:not([class]),
.portlet input[type="text"]:not([class]),
.portlet input[type="number"]:not([class]),
.portlet input[type="password"]:not([class]),
.portlet input[type="email"]:not([class]),
.portlet textarea:not([class]),
.form-update select:not([class]),
.form-update input[type="text"]:not([class]),
.form-update input[type="number"]:not([class]),
.form-update input[type="password"]:not([class]),
.form-update input[type="email"]:not([class]),
.form-update textarea:not([class]),
.vns-win select:not([class]),
.vns-win input[type="text"]:not([class]),
.vns-win input[type="number"]:not([class]),
.vns-win input[type="password"]:not([class]),
.vns-win input[type="email"]:not([class]),
.vns-win textarea:not([class]) {
	/* KHÔNG đặt display: block - nhiều hàng lọc xếp các ô nội tuyến cạnh
	   nhau, ép block là mỗi ô rơi xuống một dòng. Giữ inline-block mặc
	   định, chỉ cho rộng bằng thẻ bọc (thường là div width: 175px). */
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6e707e;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #d1d3e2;
	border-radius: 0.35rem;
}

/* textarea không được ép chiều cao một dòng */
.portlet textarea:not([class]),
.form-update textarea:not([class]),
.vns-win textarea:not([class]) {
	height: auto;
	min-height: calc(1.5em * 3 + 0.75rem + 2px);
}

.portlet select:not([class]):focus,
.portlet input[type="text"]:not([class]):focus,
.portlet input[type="number"]:not([class]):focus,
.portlet input[type="password"]:not([class]):focus,
.portlet input[type="email"]:not([class]):focus,
.portlet textarea:not([class]):focus,
.form-update select:not([class]):focus,
.form-update input[type="text"]:not([class]):focus,
.form-update input[type="number"]:not([class]):focus,
.form-update input[type="password"]:not([class]):focus,
.form-update input[type="email"]:not([class]):focus,
.form-update textarea:not([class]):focus,
.vns-win select:not([class]):focus,
.vns-win input[type="text"]:not([class]):focus,
.vns-win input[type="number"]:not([class]):focus,
.vns-win input[type="password"]:not([class]):focus,
.vns-win input[type="email"]:not([class]):focus,
.vns-win textarea:not([class]):focus {
	border-color: #bac8f3;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/* ==== <input type="submit|button|reset"> không có class ==================
 *
 * 69 nút submit và 9 nút button trong Views viết trần, ví dụ
 *     <input type="submit" name="importVETCData" value="Nhập file thông tin vé trạm">
 * nên hiện ra như nút mặc định của trình duyệt.
 *
 * Luật này để TOÀN CỤC, khác với luật cho ô nhập chữ (chỉ trong .portlet /
 * .form-update / .vns-win): một <input type="submit"> thì luôn là nút, không
 * có rủi ro nhầm sang phần tử khác, và 3 trang trong Views/Account nằm ngoài
 * mọi khung kể trên.
 *
 * Chép bộ giá trị .btn.btn-sm của Bootstrap.
 */
input[type="submit"]:not([class]),
input[type="button"]:not([class]),
input[type="reset"]:not([class]) {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* submit là hành động chính -> xanh chủ đạo (xem khối MÀU NÚT CHÍNH) */
input[type="submit"]:not([class]) {
	color: #fff;
	background-color: #2e5e34;
	border-color: #2e5e34;
}

	input[type="submit"]:not([class]):hover {
		background-color: #254b2a;
		border-color: #234727;
	}

/* button / reset không rõ ngữ nghĩa -> dáng trung tính */
input[type="button"]:not([class]),
input[type="reset"]:not([class]) {
	color: #6e707e;
	background-color: #fff;
	border-color: #d1d3e2;
}

	input[type="button"]:not([class]):hover,
	input[type="reset"]:not([class]):hover {
		background-color: #eaecf4;
	}

	input[type="submit"]:not([class]):focus,
	input[type="button"]:not([class]):focus,
	input[type="reset"]:not([class]):focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(46, 94, 52, 0.25);
	}

	input[type="submit"]:not([class]):disabled,
	input[type="button"]:not([class]):disabled,
	input[type="reset"]:not([class]):disabled {
		opacity: 0.65;
		cursor: default;
	}

/* ==== <button> không có class ===========================================
 *
 * 41 nút trong 16 view viết trần, ví dụ
 *     <button type="button" onclick="doSearchExport(this, -1, 1);"
 *             style="padding: 7px 14px;"><i class="fa fa-retweet"></i> Xuất dữ liệu…</button>
 * nên hiện ra như nút mặc định của trình duyệt, lệch hẳn với các nút .btn
 * xung quanh.
 *
 * Phân bố: 35 type="button", 2 type="submit", 4 không ghi type (theo chuẩn
 * HTML thì mặc định là submit).
 *
 * Cùng quy tắc với <input type="submit"> ở khối trên: submit là hành động
 * chính -> xanh chủ đạo; còn lại -> dáng trung tính như nút In/Xuất Excel.
 *
 * Để TOÀN CỤC được vì <button> thì luôn là nút. Các thư viện đang dùng đều
 * gắn class cho nút chúng tạo ra (bootstrap-select .dropdown-toggle,
 * timespinner .btn, cửa sổ .close) nên không cái nào lọt vào đây.
 */
button:not([class]) {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6e707e;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: #fff;
	border: 1px solid #d1d3e2;
	border-radius: 0.2rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

	button:not([class]):hover {
		background-color: #eaecf4;
	}

/* Không ghi type thì theo chuẩn HTML mặc định là submit */
button[type="submit"]:not([class]),
button:not([class]):not([type]) {
	color: #fff;
	background-color: #2e5e34;
	border-color: #2e5e34;
}

	button[type="submit"]:not([class]):hover,
	button:not([class]):not([type]):hover {
		background-color: #254b2a;
		border-color: #234727;
	}

	button:not([class]):focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(46, 94, 52, 0.25);
	}

	button:not([class]):disabled {
		opacity: 0.65;
		cursor: default;
	}

/* ==== MÀU NÚT CHÍNH =====================================================
 *
 * Nút hành động chính đổi từ xanh dương #4e73df của SB Admin 2 sang xanh lá
 * #2e5e34 (nhận diện Vinasun). Ghi đè ở đây thay vì sửa sb-admin-2.min.css:
 * file theme là hàng vendor, sửa thẳng sẽ mất khi cập nhật theme, còn file
 * này nạp SAU nên cùng selector là thắng.
 *
 * Các sắc độ đậm dần theo đúng tỉ lệ hover/active của Bootstrap:
 *   nền       #2e5e34   ->  hover #254b2a  ->  active #234727
 *   viền      #2e5e34   ->  hover #234727  ->  active #204124
 * Hai khối nút trần phía trên (input[type=submit], button không class)
 * dùng chung bảng màu này.
 *
 * CHỈ đổi nút: màu chữ tiêu đề, link, panel-primary... vẫn theo theme.
 */
.btn-primary {
	color: #fff;
	background-color: #2e5e34;
	border-color: #2e5e34;
}

.btn-primary:hover {
	color: #fff;
	background-color: #254b2a;
	border-color: #234727;
}

.btn-primary:focus, .btn-primary.focus {
	color: #fff;
	background-color: #254b2a;
	border-color: #234727;
	box-shadow: 0 0 0 0.2rem rgba(77, 118, 82, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
	color: #fff;
	background-color: #2e5e34;
	border-color: #2e5e34;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #234727;
	border-color: #204124;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(77, 118, 82, 0.5);
}

/* ==== NỀN CHUNG CHO Ô NHẬP KHÔNG THEO BOOTSTRAP ==========================
 *
 * VẤN ĐỀ
 *
 * Luật phía trên chỉ áp trong .portlet / .form-update / .vns-win, và chỉ cho
 * thẻ KHÔNG có class nào (:not([class])). Còn lại - thẻ nằm ngoài ba khung đó,
 * hoặc có class riêng của trang - rơi về hình thức mặc định của trình duyệt:
 * viền chìm kiểu cũ, bo góc khác, nền khác. Đứng cạnh ô .form-control là thấy
 * ngay hai kiểu khác nhau.
 *
 * CÁCH GIẢI: DÙNG ĐỘ ƯU TIÊN THẤP NHẤT CÓ THỂ
 *
 * Kiểu mặc định của trình duyệt nằm ở bảng kiểu người dùng-tác nhân, và nó
 * LUÔN yếu hơn mọi luật của trang - bất kể độ ưu tiên. Nên chỉ cần một luật
 * chọn theo TÊN THẺ (0,0,1) là đã thắng trình duyệt, mà vẫn thua:
 *
 *     .form-control            (0,1,0)  - Bootstrap
 *     .t-textbox, class riêng  (0,1,0)  - của trang
 *     style="..."              nội tuyến
 *
 * Đúng yêu cầu "yếu hơn custom nhưng mạnh hơn trình duyệt".
 *
 * VÌ SAO KHÔNG VIẾT input[type="text"]
 *
 * Thêm bộ chọn thuộc tính là thành (0,1,1) - CAO HƠN một class, tức sẽ đè lên
 * .form-control của Bootstrap. Đó là điều phải tránh, nên bộ chọn ở đây chỉ
 * được phép có mỗi tên thẻ.
 */
input,
select,
textarea {
	border: 1px solid #e3e6f0;
	border-radius: 0.2rem;
	background-color: #fff;
	color: #6e707e;
}

/*
 * Trả lại cho những loại KHÔNG phải ô nhập chữ.
 *
 * Bộ chọn thuộc tính ở đây là (0,1,1) - mạnh hơn luật nền bên trên, đúng ý đồ:
 * đây là phần gỡ lại chính luật của mình. Nút bấm không nằm trong danh sách vì
 * đã có luật riêng phía trên lo màu và viền.
 */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="image"],
input[type="hidden"] {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

/* Ô chọn tệp: giữ viền nhưng thêm đệm cho cân với ô nhập chữ */
input[type="file"] {
	padding: 0.2rem 0.35rem;
}

/* Ô chọn màu: viền bao ngoài, phần màu bên trong do trình duyệt vẽ */
input[type="color"] {
	padding: 0.1rem;
}