/* ===================================================
   kq-components.css – Tabs, Forms, Modal, Bottom Nav
   =================================================== */

/* ── Tab – Underline Style ── */
.tab {
	display: flex;
	border-bottom: 2px solid #e0e0e0;
	gap: 0;
	margin-bottom: 20px;
	overflow: visible;
}

.tab button.tablinks {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 12px 24px;
	color: #666;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: Barlow, sans-serif;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	flex: 1;
	white-space: nowrap;
	border-radius: 0;
}

.tab button.tablinks:hover {
	color: #2d6e36;
}

.tab button.tablinks.active {
	color: #2d6e36;
	border-bottom-color: #2d6e36;
}

.tabcontent {
	display: none;
}

/* ── Neutralize Bootstrap-style negative row margins inside form ── */
.rightContent .row,
.frmAll .row {
	margin-left: 0;
	margin-right: 0;
}

/* ── Tab – Tablet (550–849px) ── */
@media (min-width: 550px) and (max-width: 849px) {
	.tab button.tablinks {
		padding: 10px 16px;
		font-size: 0.88rem;
	}
}

/* ── Tab – Mobile (<550px) ── */
@media (max-width: 549px) {
	.tab button.tablinks {
		padding: 10px 12px;
		font-size: 0.82rem;
	}
}

/* ── Form – date input fix ── */
input::-webkit-date-and-time-value {
	text-align: left;
}

input[type="date"] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
}

/* ── Form – Group Layout ── */
.form-group {
	margin-bottom: 16px;
	text-align: left;
}

.form-group label {
	display: block;
	margin-bottom: 6px;
	padding-left: 2px;
	font-weight: 500;
	color: #444;
	font-size: 0.88rem;
}

/* ── Form – Inputs (responsive full-width) ── */
.frmAll input[type="text"],
.frmAll input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1.5px solid #d0d0d0;
	border-radius: 8px;
	font-size: 0.95rem;
	color: #333;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.frmAll input[type="text"]:focus,
.frmAll input[type="date"]:focus {
	outline: none;
	border-color: #2d6e36;
	box-shadow: 0 0 0 3px rgba(45, 110, 54, 0.12);
}

/* ── Form – Submit button ── */
.frmAll .button.primary {
	width: 100%;
	justify-content: center;
	padding: 12px 24px;
	margin-top: 8px;
	font-size: 1rem;
}

/* ── Form – Mobile (<550px) ── */
@media (max-width: 549px) {
	.frmAll input[type="text"],
	.frmAll input[type="date"] {
		font-size: 0.9rem;
		padding: 9px 12px;
	}
}

/* ── Nút Hướng dẫn – pill style ── */
.btn-huong-dan {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f0f7f1;
	color: #2d6e36 !important;
	-webkit-text-fill-color: #2d6e36;
	border: 1.5px solid #b7ddc0;
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.btn-huong-dan svg {
	flex-shrink: 0;
	stroke: #2d6e36;
	transition: stroke 0.2s;
}

.btn-huong-dan:hover {
	background: #2d6e36;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	border-color: #2d6e36;
}

.btn-huong-dan:hover svg {
	stroke: #fff;
}

/* ── Modal Overlay ── */
.modal-overlay {
	display: flex;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.modal-overlay.mfp-hide {
	display: none;
}

@media (max-width: 549px) {
	.modal-overlay .modal-box {
		max-width: 100% !important;
	}
}

/* ── Bottom Mobile Navigation ── */
#section_457334429 {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: #0f5f10;
}

#section_457334429 .icon-inner svg {
	width: 25px;
	height: 25px;
	fill: white;
}

#section_457334429 .icon-box-text h5 {
	font-size: 0.6rem;
	font-weight: 500;
	color: white;
	margin: 2px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}