:root {
	--bs-font-sans-serif: 'Sarabun', 'TH Sarabun New', 'Leelawadee UI', Tahoma, Arial, sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--green-950: #17320f;
	--green-900: #244d17;
	--green-800: #356724;
	--green-700: #4f7f2f;
	--green-600: #6f9b4f;
	--green-500: #9bbe7c;
	--green-300: #c4d9b3;
	--green-200: #dcebd0;
	--green-100: #eef5e8;
	--green-50: #f7faf4;
	--gold-700: #9f7f16;
	--gold-500: #d6bd32;
	--gold-200: #f3e8a4;
	--danger-700: #b42318;
	--danger-100: #fee4e2;
	--ink-900: #1f2937;
	--ink-700: #344054;
	--ink-500: #667085;
	--line: #d6dfcf;
	--surface: #ffffff;
	--shadow-sm: 0 2px 8px rgba(36, 77, 23, 0.08);
	--shadow-md: 0 12px 32px rgba(36, 77, 23, 0.13);
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
}

* {
	box-sizing: border-box;
}

html,
body,
body * {
	font-family: var(--bs-font-sans-serif) !important;
}

html {
	min-height: 100%;
	background: var(--green-100);
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 22px 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-900);
	background:
		radial-gradient(circle at top left, rgba(214, 189, 50, 0.16), transparent 28rem),
		linear-gradient(145deg, #edf5e7 0%, #c4d9b3 48%, #e8f1e1 100%);
	background-attachment: fixed;
}

body.app-body {
	display: block;
}

a {
	color: var(--green-800);
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

a:hover {
	color: var(--green-950);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(214, 189, 50, .42);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	line-height: 1.3;
	color: var(--green-900);
}

h1 {
	margin: 0;
}

h2 {
	margin: 8px 0 20px;
	padding-left: 14px;
	font-size: 1.55rem;
	font-weight: 700;
	border-left: 5px solid var(--gold-500);
}

h3 {
	font-size: 1.15rem;
}

p {
	margin: 0 0 1rem;
}

/* โครงระบบหลัก */
.app-shell {
	width: min(1180px, calc(100% - 2px)) !important;
	margin: 0 auto;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.app-shell > tbody > tr:first-child > td {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.site-header {
	position: relative;
	height: auto !important;
	min-height: 142px;
	padding: 32px 24px !important;
	text-align: center;
	background:
		linear-gradient(110deg, rgba(23, 50, 15, .94), rgba(79, 127, 47, .88)),
		url(img/header.png) center/cover no-repeat !important;
	border-bottom: 4px solid var(--gold-500);
}

.site-header::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 52%);
}

.site-header h1 {
	position: relative;
	z-index: 1;
	font-size: clamp(1.55rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	text-shadow: 0 2px 9px rgba(0,0,0,.26);
}

.site-header h1 br:first-child {
	display: none;
}

.site-header h1 a {
	display: inline-block;
	margin-top: 8px;
	font-size: .62em;
	font-weight: 500;
	color: #fff7bd;
}

.site-header h1 a:hover {
	color: #fff;
}

.userbar-row > td {
	padding: 0 !important;
	background: linear-gradient(90deg, #f8fbf5, #eef5e8) !important;
	border-bottom: 1px solid var(--line);
}

.userdesc {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-height: 54px;
	margin: 0 !important;
	padding: 9px 22px;
	font-size: 14px;
	text-align: right;
	color: var(--ink-700);
}

.userdesc strong {
	color: var(--green-900);
}

.observer-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border: 1px solid #e6c765;
	border-radius: 999px;
	background: #fff9dc;
	color: #7a4b00 !important;
	font-size: 12px;
	font-weight: 700;
}

.nav-cell {
	padding: 0 !important;
	background: var(--green-900) !important;
}

#topmenu {
	height: auto;
	min-height: 58px;
	margin: 0;
	padding: 9px 16px;
	background: linear-gradient(90deg, var(--green-900), var(--green-700));
}

#topmenu ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#topmenu li {
	display: block;
}

#topmenu a,
#topmenu a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	color: #fff;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 10px;
	background: rgba(255,255,255,.06);
}

#topmenu a:hover {
	color: #fff;
	text-decoration: none;
	border-color: rgba(255,255,255,.34);
	background: rgba(255,255,255,.15);
	transform: translateY(-1px);
}

#topmenu a.menu-active,
#topmenu a.menu-active:visited,
#topmenu a.menu-active:hover {
	color: var(--green-950);
	font-weight: 700;
	border-color: var(--gold-500);
	background: linear-gradient(180deg, #f6e992, var(--gold-500));
	box-shadow: 0 4px 12px rgba(23, 50, 15, .18);
}

.menu-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.menu-badge strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: #d92d20;
	color: #fff;
	font-size: 12px;
	box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

#maincontent {
	min-height: 460px;
	padding: 30px 28px 38px !important;
	text-align: left;
	background: #fbfcfa !important;
	overflow-x: auto;
}

#maincontent > br:first-child {
	display: none;
}

/* การ์ดหน้าแรก */
.home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
	gap: 22px;
	align-items: start;
}

.panel-card {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.panel-card h2,
.panel-title {
	margin-top: 0;
}

.resource-list {
	margin: 0;
	padding-left: 22px;
}

.resource-list li {
	margin: 10px 0;
	padding-left: 4px;
}

.account-summary {
	margin-bottom: 16px;
	padding: 14px;
	border-radius: var(--radius-sm);
	background: var(--green-100);
	color: var(--ink-700);
}

.login-form {
	display: grid;
	gap: 14px;
}

.form-group {
	display: grid;
	gap: 6px;
}

.form-group label {
	font-weight: 600;
	color: var(--ink-700);
}

/* ตาราง */
table {
	font-size: 14px;
}

#maincontent > table,
#maincontent > form > table,
#maincontent > div > table,
body > table:not(.app-shell),
body > form > table {
	width: 100% !important;
	max-width: 100%;
	margin: 12px auto 22px;
	border: 1px solid var(--line) !important;
	border-collapse: separate !important;
	border-spacing: 0;
	border-radius: var(--radius-md);
	background: var(--surface) !important;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

#maincontent table table {
	width: 100% !important;
	margin: 8px 0;
	border: 1px solid var(--line) !important;
	border-collapse: separate !important;
	border-spacing: 0;
	border-radius: var(--radius-sm);
	box-shadow: none;
	overflow: hidden;
}

#maincontent table td,
#maincontent table th,
body > table:not(.app-shell) td,
body > table:not(.app-shell) th,
body > form > table td,
body > form > table th {
	padding: 10px 12px !important;
	vertical-align: middle;
	border-width: 0 0 1px 1px !important;
	border-style: solid !important;
	border-color: #e3e9de !important;
	background-clip: padding-box;
}

#maincontent table tr > :first-child,
body > table:not(.app-shell) tr > :first-child,
body > form > table tr > :first-child {
	border-left-width: 0 !important;
}

#maincontent table tr:last-child > td,
body > table:not(.app-shell) tr:last-child > td,
body > form > table tr:last-child > td {
	border-bottom-width: 0 !important;
}

#maincontent table tr:not(#tbl_head):not(:has(> #tbl_head)):nth-child(even) > td {
	background-color: #f8fbf5;
}

#maincontent table tr:not(#tbl_head):hover > td {
	background-color: #f1f7ec;
}

#tbl_head,
tr#tbl_head,
td#tbl_head,
th#tbl_head,
#tbl_head > td,
#tbl_head > th {
	font-weight: 700;
	text-align: center;
	color: var(--green-950);
	background: linear-gradient(180deg, #dcebd0, #c4d9b3) !important;
	border-color: #b7cbaa !important;
}

tr[bgcolor="#CCCCCC"] td,
td[bgcolor="#CCCCCC"] {
	font-weight: 700;
	color: var(--green-950);
	background: var(--green-200) !important;
}

#maincontent table a[href*="del"],
#maincontent table a[href*="delete"] {
	color: var(--danger-700);
}

/* แบบฟอร์ม */
input,
textarea,
select,
button {
	font-size: 15px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
	max-width: 100%;
	min-height: 40px;
	padding: 8px 11px;
	color: var(--ink-900);
	border: 1px solid #b8c7ae;
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea {
	min-height: 112px;
	resize: vertical;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
	border-color: var(--green-700);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(111, 155, 79, .16);
	outline: 0;
}

input[type="checkbox"],
input[type="radio"] {
	width: 17px;
	height: 17px;
	margin-right: 5px;
	accent-color: var(--green-700);
	vertical-align: -3px;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	border: 1px solid var(--green-800);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--green-700), var(--green-900));
	box-shadow: 0 3px 8px rgba(36, 77, 23, .18);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(36, 77, 23, .22);
}

.button-secondary,
.userdesc input[type="button"] {
	min-height: 34px;
	padding: 6px 12px;
	border-color: #9a6d17;
	background: linear-gradient(180deg, #e7cb4b, #b88c1f);
	color: #2c2305;
	box-shadow: none;
}

form > table td[align="right"]:first-child {
	font-weight: 600;
	color: var(--ink-700);
	background: #f7faf4;
}

fieldset {
	margin: 8px 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--green-50);
}

legend {
	padding: 0 8px;
	color: var(--green-900);
	font-weight: 700;
}

blockquote {
	margin: 12px 0;
	padding: 12px 16px;
	text-align: left;
	border: 0;
	border-left: 4px solid var(--green-600);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--green-100);
}

/* แจ้งเตือน */
#box_red {
	width: 100%;
	max-width: 760px;
	margin: 0 auto 18px;
	padding: 12px 16px;
	font-weight: 700;
	color: #8a1c13;
	border: 1px solid #f5a89f;
	border-radius: var(--radius-sm);
	background: var(--danger-100);
	box-shadow: none;
}

.empty-state,
#maincontent > h1 {
	margin: 45px auto;
	padding: 28px;
	text-align: center;
	font-size: 1.3rem;
	color: var(--ink-500);
	border: 1px dashed #b7c9aa;
	border-radius: var(--radius-md);
	background: var(--green-50);
}

/* ค้นหาหนังสือแบบเรียลไทม์ */
.document-search-form {
	margin: 10px 0 18px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, #fbfdf9, var(--green-50));
	box-shadow: var(--shadow-sm);
}

.document-search-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px 14px;
	margin-bottom: 12px;
}

.document-search-heading strong {
	font-size: 1.05rem;
	color: var(--green-950);
}

.document-search-heading span,
.document-search-help {
	font-size: .88rem;
	color: var(--ink-500);
}

.document-search-grid {
	display: grid;
	gap: 12px;
}

.document-search-grid-four {
	grid-template-columns: minmax(0, .80fr) minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.08fr);
	column-gap: 18px;
}

.document-search-grid-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-search-grid-two {
	grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
}

.document-search-grid > label,
.document-search-field {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
}

.document-search-grid > label > span,
.document-search-field > label,
.document-search-field > span {
	font-weight: 600;
	color: var(--ink-700);
}

.document-search-grid input[type="search"],
.document-search-grid input[type="text"],
.document-search-grid select {
	width: 100%;
}

.document-date-filter {
	display: grid;
	grid-template-columns: minmax(68px, .78fr) minmax(112px, 1.25fr) minmax(82px, .92fr);
	gap: 6px;
	min-width: 0;
}


.document-date-filter select {
	min-width: 0;
	width: 100%;
	padding-left: 9px;
	padding-right: 28px;
	font-size: .94rem;
}

.document-search-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 13px;
}

.document-search-actions button {
	min-height: 36px;
	padding: 7px 14px;
}

.document-search-help {
	margin-left: auto;
}

.document-search-results {
	position: relative;
	transition: opacity .15s ease;
}

.document-search-results.is-loading {
	opacity: .48;
	pointer-events: none;
}

.document-search-results.is-loading::before {
	content: 'กำลังค้นหา...';
	position: absolute;
	z-index: 4;
	top: 10px;
	right: 10px;
	padding: 5px 10px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--green-950);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--shadow-sm);
}

.document-search-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 8px;
	font-size: .91rem;
	color: var(--ink-500);
}

.document-search-meta strong {
	color: var(--green-900);
}

.search-error {
	margin: 18px 0;
	padding: 14px 16px;
	text-align: center;
	font-weight: 600;
	color: #8a1c13;
	border: 1px solid #f5a89f;
	border-radius: var(--radius-sm);
	background: var(--danger-100);
}

/* ตัวแบ่งหน้าแบบย่อ */
.pagination-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 6px;
}

.pagination-summary {
	padding: 6px 12px;
	font-size: .92rem;
	white-space: nowrap;
	color: var(--ink-500);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--green-50);
}

.pagination-summary strong {
	color: var(--green-900);
}

.pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
}

.pagination .page-link,
.pagination .page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	line-height: 1;
	text-decoration: none;
	border-radius: 9px;
}

.pagination .page-link {
	color: var(--green-900);
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 1px 3px rgba(36, 77, 23, .06);
}

.pagination a.page-link:hover {
	color: var(--green-950);
	text-decoration: none;
	border-color: var(--green-500);
	background: var(--green-100);
	transform: translateY(-1px);
}

.pagination .page-link.is-current {
	color: #fff;
	font-weight: 700;
	border-color: var(--green-800);
	background: var(--green-800);
	box-shadow: 0 4px 10px rgba(36, 77, 23, .2);
}

.pagination .page-link.page-edge {
	font-size: 1.2rem;
}

.pagination .page-link.is-disabled {
	opacity: .36;
	cursor: default;
	box-shadow: none;
}

.pagination .page-ellipsis {
	min-width: 20px;
	padding: 0 2px;
	color: var(--ink-500);
}

.pagination-jump {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
}

.pagination-jump label {
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ink-500);
}

.pagination-jump input[type="number"] {
	width: 74px;
	min-height: 36px;
	height: 36px;
	padding: 0 8px;
	text-align: center;
	border-radius: 9px;
}

.pagination-jump button {
	min-width: 44px;
	min-height: 36px;
	height: 36px;
	padding: 0 12px;
	border-radius: 9px;
}

/* ส่วนท้าย */
.footer-row > td,
.footer {
	padding: 22px 24px !important;
	font-size: 13px;
	line-height: 1.75;
	text-align: center;
	color: var(--ink-500);
	background: #f3f7ef !important;
	border-top: 1px solid var(--line);
}

.footer hr {
	display: none;
}

.footer a {
	color: var(--green-800);
}

.footer-bar > td {
	height: 10px !important;
	padding: 0 !important;
	background: linear-gradient(90deg, var(--green-900), var(--gold-500), var(--green-900)) !important;
}

/* หน้า popup / หน้าที่ไม่ใช้โครงหลัก */
body > table:not(.app-shell),
body > form > table {
	max-width: 760px;
}

body > form {
	max-width: 760px;
	margin: 0 auto;
}

/* สถิติเดิมให้กลมกลืนกับ UI ใหม่ */
.stats-wrap {
	max-width: 100% !important;
}

.stats-filter,
.stats-card,
.stats-rate,
.stats-definition {
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-sm);
}

.stats-card {
	border-color: var(--line) !important;
}

.stats-section h3 {
	color: var(--green-950);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: linear-gradient(180deg, var(--green-200), var(--green-300)) !important;
}

/* การแสดงผลบนจอขนาดเล็ก */
@media (max-width: 900px) {
	body {
		padding: 10px 6px;
	}

	.app-shell {
		width: 100% !important;
		border-radius: 14px;
	}

	.site-header {
		min-height: 116px;
		padding: 24px 14px !important;
	}

	.userdesc {
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px 12px;
		text-align: center;
	}

	#topmenu {
		padding: 8px;
	}

	#topmenu ul {
		justify-content: flex-start;
	}

	#topmenu li,
	#topmenu a {
		flex: 1 1 145px;
	}

	#maincontent {
		padding: 22px 14px 30px !important;
	}

	.home-grid {
		grid-template-columns: 1fr;
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 900px) {
	.document-search-grid-four,
	.document-search-grid-three,
	.document-search-grid-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body {
		font-size: 14px;
	}

	.site-header h1 {
		font-size: 1.35rem;
	}

	#topmenu li,
	#topmenu a {
		flex-basis: 100%;
		width: 100%;
	}

	#maincontent {
		padding: 18px 10px 24px !important;
	}

	h2 {
		font-size: 1.3rem;
	}

	.panel-card {
		padding: 16px;
	}

	.document-search-form {
		padding: 13px;
	}

	.document-search-grid-four,
	.document-search-grid-three,
	.document-search-grid-two {
		grid-template-columns: 1fr;
	}


	.document-date-filter {
		grid-template-columns: minmax(58px, .78fr) minmax(105px, 1.28fr) minmax(72px, .94fr);
		gap: 4px;
	}

	.document-date-filter select {
		padding-left: 6px;
		padding-right: 22px;
		font-size: .87rem;
	}

	.document-search-actions button {
		flex: 1 1 auto;
	}

	.document-search-help {
		flex-basis: 100%;
		margin-left: 0;
	}

	.stats-grid {
		grid-template-columns: 1fr !important;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="search"],
	textarea,
	select {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.pagination-wrap {
		gap: 7px;
		margin-top: 16px;
	}

	.pagination-summary {
		padding: 5px 10px;
		font-size: .86rem;
	}

	.pagination {
		gap: 3px;
	}

	.pagination .page-link,
	.pagination .page-ellipsis {
		min-width: 32px;
		height: 32px;
		padding: 0 7px;
		border-radius: 8px;
	}

	.pagination-jump {
		flex-basis: 100%;
		margin-top: 2px;
	}

	.pagination-jump label {
		font-size: .86rem;
	}

	.pagination-jump input[type="number"] {
		width: 66px;
		min-height: 32px;
		height: 32px;
	}

	.pagination-jump button {
		min-height: 32px;
		height: 32px;
		padding: 0 10px;
	}
}

@media print {
	body {
		padding: 0;
		background: #fff;
	}

	.app-shell {
		width: 100% !important;
		box-shadow: none;
	}

	.nav-cell,
	.userbar-row,
	.footer-row,
	.footer-bar {
		display: none;
	}
}

/* ร่างหนังสือและไฟล์แนบชั่วคราวก่อนกดส่ง */
.efiling-flash {
	width: 100%;
	margin: 0 auto 16px;
	padding: 12px 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--green-100);
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}

.efiling-flash-success {
	border-color: #9fc78c;
	background: #edf8e8;
	color: var(--green-950);
}

.efiling-flash-warning {
	border-color: #d9bd56;
	background: #fff8d9;
	color: #5f4905;
}

.efiling-flash-error {
	border-color: #efaaa5;
	background: var(--danger-100);
	color: #7a1a13;
}

.draft-resume-card,
.draft-status-card {
	width: 100%;
	margin: 0 auto 18px;
	padding: 17px 18px;
	border: 1px solid #d7bd52;
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, #fffdf2, #fff8d8);
	box-shadow: var(--shadow-sm);
	text-align: left;
}

.draft-resume-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.draft-resume-card strong,
.draft-status-card strong {
	color: var(--green-950);
}

.draft-resume-title {
	margin-top: 3px;
	font-weight: 700;
	color: var(--ink-900);
}

.draft-resume-meta {
	margin-top: 4px;
	color: var(--ink-500);
}

.draft-action-row,
.draft-final-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.draft-action-row {
	justify-content: flex-end;
	flex: 0 0 auto;
}

.draft-action-row form,
.draft-final-actions form,
.inline-form {
	margin: 0;
}

.draft-status-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.draft-status-heading h2 {
	margin: 5px 0 0;
}

.draft-status-card p {
	margin: 10px 0 0;
	color: var(--ink-700);
}

.draft-status-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 3px 10px;
	border: 1px solid #d3ae28;
	border-radius: 999px;
	background: var(--gold-200);
	color: #5f4905;
	font-size: .9rem;
	font-weight: 700;
}

.draft-receiver-details {
	margin-top: 7px;
}

.draft-receiver-details summary {
	color: var(--green-800);
	font-weight: 700;
	cursor: pointer;
}

.draft-receiver-details ul {
	columns: 2;
	column-gap: 28px;
	margin: 9px 0 0;
	padding-left: 22px;
}

.draft-receiver-details li {
	break-inside: avoid;
	margin: 3px 0;
}

.draft-empty-attachments {
	width: 100%;
	margin: 12px auto 20px;
	padding: 18px;
	border: 1px dashed #c4ad4a;
	border-radius: var(--radius-md);
	background: #fffdf2;
	color: var(--ink-700);
	text-align: center;
}

.draft-final-actions {
	margin: 18px auto 6px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--green-50);
}

.button-send {
	min-width: 180px;
	font-size: 16px;
}

.button-danger {
	border-color: #8f1e16 !important;
	background: linear-gradient(180deg, #d24c42, #a5231a) !important;
	color: #fff !important;
}

.button-link-danger {
	min-height: 30px !important;
	padding: 4px 9px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--danger-700) !important;
	font-weight: 700;
}

.button-link-danger:hover {
	text-decoration: underline;
	transform: none !important;
	box-shadow: none !important;
}

.draft-final-actions button:disabled {
	cursor: not-allowed;
	filter: grayscale(.35);
	opacity: .55;
	transform: none !important;
	box-shadow: none !important;
}

.draft-upload-reminder {
	margin-top: 9px;
	padding: 9px 11px;
	border-left: 4px solid #d2a514;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: #fff9df;
	color: #5f4905;
	line-height: 1.55;
}

.draft-upload-pending-warning {
	margin-top: 9px;
	padding: 11px 12px;
	border: 1px solid #e1a33b;
	border-radius: var(--radius-sm);
	background: #fff1c2;
	color: #6d3e00;
	font-weight: 500;
	line-height: 1.55;
	box-shadow: var(--shadow-sm);
}

.draft-upload-pending-warning strong {
	color: #8a3d00;
}

@media (max-width: 700px) {
	.draft-resume-card,
	.draft-status-heading {
		align-items: stretch;
		flex-direction: column;
	}

	.draft-action-row {
		justify-content: flex-start;
	}

	.draft-receiver-details ul {
		columns: 1;
	}
}

/* ครั้งที่ 30: ปุ่มล้างไฟล์ที่เลือกและจุดโฟกัสหลังอัปโหลด */
.file-picker-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 5px;
}

.file-picker-row input[type="file"] {
	flex: 1 1 320px;
	min-width: 220px;
}

.button-clear-selected-file {
	min-height: 36px !important;
	padding: 6px 12px !important;
	border: 1px solid #9b7b12 !important;
	background: linear-gradient(180deg, #fff7cf, #efd36d) !important;
	color: #5f4905 !important;
	font-weight: 700;
	white-space: nowrap;
}

.button-clear-selected-file:hover:not(:disabled) {
	background: linear-gradient(180deg, #fffbe8, #e8c850) !important;
}

.button-clear-selected-file:disabled {
	cursor: not-allowed;
	filter: grayscale(.35);
	opacity: .52;
	transform: none !important;
	box-shadow: none !important;
}

.upload-focus-target {
	scroll-margin-top: 18px;
}

.upload-focus-target:focus {
	outline: 3px solid #d2a514;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(210, 165, 20, .18);
}

@media (max-width: 700px) {
	.file-picker-row {
		align-items: stretch;
		flex-direction: column;
	}

	.file-picker-row input[type="file"],
	.button-clear-selected-file {
		width: 100%;
	}
}


/* ครั้งที่ 31: ปุ่มและฟอร์มแก้ไขข้อมูลหนังสือก่อนส่ง */
.draft-summary-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	margin: 10px auto 18px;
	padding: 11px 13px;
	border: 1px solid #d7bd52;
	border-radius: var(--radius-sm);
	background: #fffdf2;
	color: var(--ink-700);
	text-align: left;
}

.draft-summary-actions span {
	line-height: 1.5;
}

.draft-edit-notice {
	text-align: left;
}

.draft-edit-cancel {
	margin-left: 10px;
	vertical-align: middle;
}

@media (max-width: 700px) {
	.draft-summary-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.draft-summary-actions .button,
	.draft-edit-cancel {
		width: 100%;
		margin-left: 0;
	}
}

/* ครั้งที่ 39: ระยะห่างปุ่มผู้รับและสถานะแจ้งเตือนหนังสืออัปเดต */
.receiver-selection-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 8px;
}

.document-update-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid #b98200;
	border-radius: 999px;
	background: #ffe79a;
	color: #704d00;
	font-size: .82em;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: middle;
}

.book-update-notice {
	margin: 4px;
	padding: 10px 12px;
	border: 1px solid #d4aa20;
	border-left: 5px solid #d4aa20;
	border-radius: 7px;
	background: #fff8d8;
	color: #5f4700;
	line-height: 1.55;
}

.update-unseen-fieldset {
	border-color: #d4aa20;
	background: #fffdf2;
}

.update-unseen-fieldset legend {
	color: #7a5700;
}

.muted-text {
	color: #6c7683;
}

/* ครั้งที่ 42: ขั้นตอนแก้ไขหนังสือแบบร่างก่อนบันทึก */
.edit-draft-status-card {
	border-color: #d4aa20;
	background: linear-gradient(135deg, #fffdf3, #f5fbe9);
}

.edit-draft-badge {
	border: 1px solid #d4aa20;
	background: #fff4bd;
	color: #725000;
}

.edit-change-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.edit-change-pill {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 3px 9px;
	border: 1px solid #c9d4c1;
	border-radius: 999px;
	background: #f5f8f2;
	color: #52604c;
	font-size: .9em;
	font-weight: 600;
}

.edit-change-pill.is-changed {
	border-color: #d4aa20;
	background: #fff4bd;
	color: #6a4a00;
}

.edit-attachment-marked-delete td {
	background: #fff1ee !important;
	color: #7a2a20;
	text-decoration-color: #b84b3d;
}

.edit-attachment-marked-delete td:nth-child(1),
.edit-attachment-marked-delete td:nth-child(2),
.edit-attachment-marked-delete td:nth-child(3),
.edit-attachment-marked-delete td:nth-child(4) {
	text-decoration: line-through;
}

.edit-attachment-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: .88em;
	font-weight: 700;
}

.edit-attachment-status.status-keep {
	border: 1px solid #7ca56c;
	background: #edf8e8;
	color: #28591d;
}

.edit-attachment-status.status-delete {
	border: 1px solid #cf766a;
	background: #ffe7e2;
	color: #8b281d;
}

.button-link-restore {
	padding: 0;
	border: 0;
	background: transparent;
	color: #246414;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.button-link-restore:hover {
	color: #123b09;
}

.edit-new-attachment-table {
	margin-top: 16px;
}

@media (max-width: 700px) {
	.edit-change-summary {
		align-items: stretch;
		flex-direction: column;
	}

	.edit-change-pill {
		justify-content: center;
		width: 100%;
	}
}

.edit-draft-resume-card {
	border-color: #d4aa20;
	background: linear-gradient(135deg, #fffdf3, #f5fbe9);
}

/* ครั้งที่ 43: หมายเหตุและประวัติการอัปเดตหนังสือ */
.field-help-text {
  margin-top: 6px;
  color: #61706a;
  font-size: 0.92rem;
  line-height: 1.45;
}

.book-update-notice a {
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
}

.book-update-history-section {
  width: 850px;
  max-width: calc(100% - 24px);
  margin: 20px auto 28px;
}

.book-update-history-section > h2 {
  margin: 0 0 10px;
  padding: 11px 14px;
  border-radius: 8px 8px 0 0;
  background: #2f6f4e;
  color: #fff;
  font-size: 1.08rem;
  text-align: center;
}

.book-update-history-empty {
  padding: 18px;
  border: 1px solid #c9d8cf;
  border-radius: 0 0 8px 8px;
  background: #fff;
  text-align: center;
}

.book-update-history-list {
  display: grid;
  gap: 12px;
}

.book-update-history-item {
  overflow: hidden;
  border: 1px solid #c5d5cb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(27, 67, 47, 0.08);
}

.book-update-history-item.is-newly-seen {
  border: 2px solid #d2a51c;
  box-shadow: 0 0 0 3px rgba(210, 165, 28, 0.15);
}

.book-update-history-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #eef7f1;
  cursor: pointer;
  list-style: none;
}

.book-update-history-item > summary::-webkit-details-marker {
  display: none;
}

.book-update-history-item > summary::after {
  content: "▾";
  margin-left: auto;
  color: #2f6f4e;
  font-size: 1rem;
  transition: transform 0.15s ease;
}

.book-update-history-item[open] > summary::after {
  transform: rotate(180deg);
}

.book-update-history-summary-text {
  display: block;
  margin-top: 2px;
  color: #53645b;
  font-size: 0.9rem;
  font-weight: 400;
}

.book-update-history-new-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3c744;
  color: #4b3700;
  font-size: 0.82rem;
  font-weight: 700;
}

.book-update-history-content {
  padding: 14px;
}

.book-update-history-meta {
  margin-bottom: 10px;
  color: #53645b;
}

.book-update-history-note {
  margin: 10px 0 14px;
  padding: 11px 13px;
  border-left: 4px solid #d2a51c;
  border-radius: 5px;
  background: #fff8df;
  line-height: 1.55;
}

.book-update-history-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dfe8e2;
}

.book-update-history-group h3 {
  margin: 0 0 9px;
  color: #285f43;
  font-size: 1rem;
}

.book-update-diff-row {
  margin-bottom: 10px;
}

.book-update-diff-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.book-update-diff-values > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d7e1db;
  border-radius: 6px;
  background: #fafcfb;
  overflow-wrap: anywhere;
}

.book-update-diff-values > div > span {
  display: block;
  margin-bottom: 4px;
  color: #6b776f;
  font-size: 0.84rem;
  font-weight: 700;
}

.book-update-diff-values > div:last-child {
  border-color: #a9c8b5;
  background: #f0f8f3;
}

.book-update-diff-row.is-long-text .book-update-diff-values > div > div {
  max-height: 220px;
  overflow: auto;
}

.book-update-list-added,
.book-update-list-removed {
  margin: 7px 0;
  padding: 9px 11px;
  border-radius: 6px;
  line-height: 1.5;
}

.book-update-list-added {
  background: #edf8f0;
  color: #245b3e;
}

.book-update-list-removed {
  background: #fff0ee;
  color: #8a3329;
}

.book-update-list-added ul,
.book-update-list-removed ul {
  margin: 6px 0 0 20px;
  padding: 0;
}

@media (max-width: 700px) {
  .book-update-history-item > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .book-update-history-new-badge {
    order: 3;
  }

  .book-update-diff-values {
    grid-template-columns: 1fr;
  }
}

/* ปุ่มเลื่อนขึ้นด้านบนสุด ใช้ร่วมกันทุกหน้าผ่าน js/scroll-to-top.js */
.scroll-to-top-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: #2f6f4e;
  color: #fff;
  box-shadow: 0 5px 16px rgba(21, 62, 42, 0.28);
  font-family: Sarabun, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
}

.scroll-to-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top-button:hover {
  background: #255b3f;
}

.scroll-to-top-button:focus-visible {
  outline: 3px solid rgba(210, 165, 28, 0.75);
  outline-offset: 3px;
}

.scroll-to-top-button:active {
  transform: translateY(2px);
}

.scroll-to-top-button > span {
  display: block;
  margin-top: -2px;
}

@media (max-width: 700px) {
  .scroll-to-top-button {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top-button {
    transition: none;
  }
}

@media print {
  .scroll-to-top-button {
    display: none !important;
  }
}

/* ครั้งที่ 47: หน้าจัดการไฟล์ของผู้ดูแลระบบ */
.admin-file-warning-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid #d79b92;
	border-radius: 999px;
	background: var(--danger-100);
	color: var(--danger-700);
	font-size: .80em;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: middle;
}

.admin-delete-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 4px 10px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--danger-700) !important;
	border: 1px solid #e4aaa4;
	border-radius: 8px;
	background: #fff7f6;
}

.admin-delete-link:hover,
.admin-delete-link:focus {
	color: #7f1710 !important;
	text-decoration: none;
	border-color: #cf6d64;
	background: var(--danger-100);
}

/* จัดการผู้ใช้ */
.admin-user-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 8px 0 16px;
}

.admin-user-toolbar span {
	font-size: .9rem;
	color: var(--ink-500);
}

.table-scroll-wrap {
	width: 100%;
	overflow-x: auto;
	border-radius: var(--radius-md);
}

.admin-user-table {
	min-width: 980px;
}

.admin-user-table th,
.admin-user-table td {
	white-space: normal;
}

.admin-user-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.account-role-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--green-50);
	color: var(--ink-700);
}

.account-role-admin {
	border-color: #e4c14b;
	background: #fff7cf;
	color: #6d5100;
}

.account-role-observer {
	border-color: #b9c8e8;
	background: #eef3ff;
	color: #274371;
}

.account-role-user {
	border-color: #bdd4ae;
	background: var(--green-100);
	color: var(--green-900);
}

.admin-user-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 150px;
}

.admin-user-actions form {
	margin: 0;
}

.button-small {
	min-height: 34px !important;
	padding: 6px 11px !important;
	font-size: .88rem !important;
}

.button-danger {
	border-color: #9f2017 !important;
	background: linear-gradient(180deg, #d04438, #a8241b) !important;
	color: #fff !important;
}

.protected-account-text,
.muted-text {
	font-size: .86rem;
	color: var(--ink-500);
}

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

.admin-user-popup-body {
	min-height: 100vh;
	padding: 18px;
	background: linear-gradient(145deg, #edf5e7, #dcebd0);
}

.admin-user-form-card {
	width: min(720px, 100%);
	margin: 0 auto;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-md);
}

.admin-user-form-card h2 {
	margin-top: 0;
}

.admin-user-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.admin-user-form-full {
	grid-column: 1 / -1;
}

.admin-user-form-grid input,
.admin-user-form-grid select {
	width: 100%;
}

.admin-user-form-grid .form-group > span {
	font-weight: 600;
	color: var(--ink-700);
}

.required-mark {
	color: var(--danger-700);
}

.admin-user-form-note {
	margin: 15px 0 0;
	padding: 10px 12px;
	font-size: .88rem;
	color: var(--ink-500);
	border-left: 4px solid var(--gold-500);
	background: #fffbea;
}

.admin-user-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 18px;
}

.admin-user-success-card {
	margin-top: 10vh;
	text-align: center;
}

@media (max-width: 640px) {
	.admin-user-popup-body {
		padding: 10px;
	}
	.admin-user-form-card {
		padding: 16px;
		border-radius: var(--radius-md);
	}
	.admin-user-form-grid {
		grid-template-columns: 1fr;
	}
	.admin-user-form-full {
		grid-column: auto;
	}
	.admin-user-form-actions > * {
		flex: 1 1 auto;
	}
}

/* ===== การแก้ไขครั้งที่ 51: ระบบเปลี่ยนรหัสผ่าน ===== */
.userbar-password-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid #9a6d17;
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, #e7cb4b, #b88c1f);
	color: #2c2305 !important;
	font-weight: 600;
	text-decoration: none !important;
	box-sizing: border-box;
}

.userbar-password-link:hover {
	color: #fff !important;
}

.password-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.password-input-row input {
	flex: 1 1 auto;
	min-width: 0;
}

.password-tool-button {
	flex: 0 0 auto;
	min-height: 40px !important;
	padding: 7px 11px !important;
	white-space: nowrap;
}

.password-tool-status {
	display: block;
	margin-top: 6px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ink-500);
}

.password-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid #dd9b39;
	border-radius: 999px;
	background: #fff1d8;
	color: #7c4300;
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.password-page-wrap {
	width: min(680px, calc(100% - 28px));
	margin: 26px auto 34px;
}

.password-card {
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-md);
	text-align: left;
}

.password-card h2 {
	margin: 0 0 18px;
	color: var(--green-900);
	text-align: center;
}

.password-change-form {
	display: grid;
	gap: 15px;
}

.password-change-form .form-group {
	margin: 0;
}

.password-change-form .form-group > span {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--ink-700);
}

.password-policy-box {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border-left: 4px solid var(--gold-500);
	border-radius: var(--radius-sm);
	background: #fffbea;
	color: var(--ink-700);
}

.password-policy-box span {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ink-500);
}

.password-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 4px;
}

@media (max-width: 720px) {
	.userdesc {
		flex-wrap: wrap;
	}
	.password-input-row,
	.password-input-row-admin {
		flex-wrap: wrap;
	}
	.password-input-row input {
		flex-basis: 100%;
	}
	.password-tool-button {
		flex: 1 1 auto;
	}
	.password-page-wrap {
		width: min(100% - 18px, 680px);
		margin-top: 14px;
	}
	.password-card {
		padding: 16px;
		border-radius: var(--radius-md);
	}
	.password-form-actions > * {
		flex: 1 1 auto;
	}
}

/* ===== การแก้ไขครั้งที่ 52: ปรับประสบการณ์หน้าเปลี่ยนรหัสผ่าน ===== */
.password-change-form .form-group > label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--ink-700);
}

.password-field-with-toggle {
	position: relative;
	width: 100%;
}

.password-field-with-toggle input {
	width: 100%;
	padding-right: 48px !important;
	box-sizing: border-box;
}

.password-visibility-toggle {
	position: absolute;
	top: 50%;
	right: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-500);
	box-shadow: none;
	transform: translateY(-50%);
	cursor: pointer;
}

.password-visibility-toggle:hover {
	background: var(--green-50);
	color: var(--green-800);
	box-shadow: none;
}

.password-visibility-toggle:focus-visible {
	outline: 3px solid rgba(184, 140, 31, .35);
	outline-offset: 1px;
}

.password-visibility-toggle svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.password-visibility-toggle [hidden] {
	display: none !important;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.password-error-list strong {
	display: block;
	margin-bottom: 5px;
}

.password-error-list ul {
	margin: 0;
	padding-left: 22px;
}

.password-error-list li + li {
	margin-top: 3px;
}

.password-success-panel {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 24px 18px;
	border: 1px solid #9bc7a5;
	border-radius: var(--radius-md);
	background: #effaf2;
	color: var(--green-900);
	text-align: center;
}

.password-success-panel:focus {
	outline: 3px solid rgba(184, 140, 31, .28);
	outline-offset: 3px;
}

.password-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--green-700);
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.password-success-panel strong {
	font-size: 1.05rem;
	line-height: 1.6;
}

.password-success-panel > span {
	color: var(--ink-500);
	font-size: .92rem;
	line-height: 1.55;
}

.password-continue-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: 4px;
	padding: 8px 18px;
	border-radius: var(--radius-sm);
	background: var(--green-700);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.password-continue-button:hover {
	background: var(--green-800);
	color: #fff !important;
}


/* ===== การแก้ไขครั้งที่ 53: ทำให้ปุ่มรูปตาไม่เปลี่ยนกลับเป็นข้อความ ===== */
.password-visibility-toggle {
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:active {
	transform: translateY(-50%);
}

.password-visibility-toggle svg {
	display: block;
	flex: 0 0 auto;
}

/* ===== การแก้ไขครั้งที่ 54: ตัดไอคอนรูปตาของเบราว์เซอร์และใช้ไอคอนเดียวของระบบ ===== */
.password-field-with-toggle input::-ms-reveal,
.password-field-with-toggle input::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

.password-field-with-toggle input[type="password"]::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.password-visibility-toggle .password-eye-icon {
	display: block;
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.password-visibility-toggle .password-eye-slash {
	display: none;
}

.password-visibility-toggle.is-password-visible .password-eye-slash {
	display: block;
}


/* ระบบข่าวสารและเครื่องมือหน้าแรก — ครั้งที่ 55 */
.home-content-stack {
	display: grid;
	gap: 22px;
	min-width: 0;
}

.panel-heading-row,
.admin-content-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.panel-heading-row .panel-title,
.admin-content-heading h3 {
	margin: 0;
}

.admin-content-heading p {
	margin: 5px 0 0;
	color: var(--ink-500);
}

.news-list,
.resource-card-list {
	display: grid;
	gap: 14px;
}

.news-item {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
}

.news-item-pinned {
	border-left: 5px solid var(--gold-500);
	background: linear-gradient(90deg, #fffdf3, #fff);
}

.news-item-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.news-item h3 {
	margin: 0;
	font-size: 1.08rem;
	color: var(--green-900);
}

.news-badges,
.content-title-cell,
.content-option-row,
.current-attachment,
.news-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.content-badge,
.content-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.content-badge-pinned {
	background: #fff2b8;
	color: #785300;
}

.content-badge-new,
.content-status-published {
	background: #dff3dc;
	color: #245d1d;
}

.content-status-draft,
.content-status-expired {
	background: #edf0f3;
	color: #59636e;
}

.content-status-scheduled {
	background: #fff3cf;
	color: #805a00;
}

.news-date {
	margin-top: 5px;
	font-size: 13px;
	color: var(--ink-500);
}

.news-detail {
	margin-top: 11px;
	line-height: 1.65;
	color: var(--ink-700);
}

.news-actions {
	margin-top: 13px;
}

.resource-card-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
}

.resource-detail {
	margin-top: 4px;
	font-size: 13px;
	color: var(--ink-500);
}

.compact-empty-state {
	padding: 18px;
}

.admin-content-section {
	margin-bottom: 26px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.content-admin-table th,
.content-admin-table td {
	vertical-align: top;
}

.content-editor-form {
	display: grid;
	gap: 17px;
	max-width: 900px;
	margin: 0 auto;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	text-align: left;
}

.content-editor-form > label,
.content-form-grid > label {
	display: grid;
	gap: 7px;
	font-weight: 600;
}

.content-editor-form label > span em {
	color: #b42318;
	font-style: normal;
}

.content-editor-form textarea {
	resize: vertical;
	min-height: 110px;
}

.content-editor-form small,
.muted-text {
	font-size: 12px;
	color: var(--ink-500);
}

.content-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.inline-check {
	display: inline-flex !important;
	grid-template-columns: none !important;
	align-items: center;
	gap: 7px !important;
	font-weight: 500 !important;
}

.inline-check input {
	width: auto;
	margin: 0;
}

.current-attachment {
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--green-100);
}

@media (max-width: 760px) {
	.panel-heading-row,
	.admin-content-heading,
	.resource-card-item,
	.news-item-heading {
		align-items: stretch;
		flex-direction: column;
	}

	.content-form-grid {
		grid-template-columns: 1fr;
	}

	.content-editor-form {
		padding: 17px;
	}
}

/* ===== การแก้ไขครั้งที่ 56: จัดรูปแบบปุ่มฟอร์มข่าวสารและเครื่องมือ ===== */
.content-editor-form .form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}

.content-editor-form .form-actions > button,
.content-editor-form .form-actions > .button {
	min-height: 44px;
	padding: 9px 18px;
	border-radius: var(--radius-sm);
}

.content-editor-form .form-actions > .button-secondary {
	min-height: 44px;
}

@media (max-width: 560px) {
	.content-editor-form .form-actions > button,
	.content-editor-form .form-actions > .button {
		flex: 1 1 150px;
	}
}


/* ===== การแก้ไขครั้งที่ 64: ย่อและแสดงรายละเอียดข่าวสารแบบเลื่อนนุ่มนวล ===== */
.news-detail-block {
	margin-top: 11px;
}

.news-detail-block .news-detail {
	margin-top: 0;
}

.news-detail-collapsible {
	position: relative;
	overflow: hidden;
	transition: max-height 0.36s ease;
}

.news-detail-collapsible.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2.15em;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
}

.news-detail-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 4px 0 0;
	padding: 5px 7px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--green-700);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	appearance: none;
}

.news-detail-toggle.is-visible {
	display: inline-flex;
}

.news-detail-toggle:hover,
.news-detail-toggle:focus-visible {
	background: var(--green-100);
	color: var(--green-900);
	box-shadow: none;
	transform: none;
}

.news-detail-toggle-icon {
	width: 17px;
	height: 17px;
	transition: transform 0.25s ease;
}

.news-detail-toggle.is-expanded .news-detail-toggle-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.news-detail-collapsible,
	.news-detail-toggle-icon {
		transition: none;
	}
}