/* ธีมหน้าจอระบบรับสมัคร วิทยาลัยอาชีวศึกษาชลบุรี
   แถบหัวน้ำเงินมุมโค้ง + การ์ดรายการขอบมน + พื้นหลังแถบน้ำเงินเฉียง
   ครอบหน้าเดิม (ตาราง HTML) ให้รองรับมือถือ / iPad / คอมพิวเตอร์ */

:root {
	--brand: #3b5bdb;
	--brand-dark: #2b44b8;
	--brand-deep: #1f2f86;
	--brand-soft: #edf1ff;
	--danger: #e0475b;
	--bg: #f3f5fb;
	--card: #ffffff;
	--text: #1b2142;
	--muted: #6c7392;
	--line: #e3e7f2;
	--field: #f6f8fd;
	--radius: 28px;
	--shadow: 0 18px 50px rgba(30, 48, 140, .14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: "Prompt", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	position: relative;
}
/* แถบน้ำเงินเฉียงด้านหลัง (ใช้ pseudo-element แทน background-attachment: fixed ที่ iPhone ไม่รองรับ) */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(162deg, var(--bg) 0 56%, transparent 56%),
		linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* ---------- แถบหัว ---------- */
.app-shell { min-height: 100vh; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

.app-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(14px + env(safe-area-inset-top)) 18px 18px;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
	border-radius: 0 0 30px 30px;
	box-shadow: 0 10px 30px rgba(30, 48, 140, .25);
}
.app-bar__logo { flex: none; display: block; line-height: 0; }
.app-bar__logo img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	padding: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.app-bar__title { flex: 1; min-width: 0; text-align: center; }
.app-bar__name {
	display: block;
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: .4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-bar__sub { display: block; font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar__btn {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: rgba(255, 255, 255, .92);
	color: var(--brand-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	transition: transform .1s, background .15s;
}
.app-bar__btn:hover { background: #fff; }
.app-bar__btn:active { transform: scale(.94); }
.app-bar__btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- การ์ดเนื้อหา ---------- */
.app-main { padding: 22px 16px 0; }
.app-card {
	max-width: 820px;
	margin: 0 auto;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 22px;
	overflow-wrap: anywhere;
}
.app-card--wide { max-width: 1200px; }

.app-card > br,
.app-card > center:empty,
.app-card > p:empty { display: none; }

.app-card h1 { font-size: 1.25rem; margin: .4em 0; color: var(--brand-dark); text-align: center; }
.app-card h2 { font-size: 1.05rem; margin: .3em 0; color: var(--muted); text-align: center; font-weight: 500; }
.app-card img { max-width: 100%; height: auto; border-radius: 14px; }
.app-card a { color: var(--brand); font-weight: 500; }
.app-card hr { border: 0; height: 1px; background: var(--line); width: 100% !important; margin: 8px 0 12px; }
.app-card form { margin: 0; }
.app-card font[style*="red"] { color: var(--brand-dark) !important; }

/* ---------- ตาราง: ค่าพื้นฐาน ---------- */
.app-card table {
	width: 100% !important;
	max-width: 100%;
	margin: 0 auto 16px;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}
.app-card td, .app-card th { padding: 8px 6px; vertical-align: middle; font-size: .97rem; }

.app-card tr.ui-title td {
	text-align: center;
	color: var(--brand-dark);
	font-size: 1.12rem;
	font-weight: 600;
	padding: 0 0 4px;
}
.app-card tr.ui-title b { font-weight: 600; }

/* ---------- ตารางฟอร์ม: แสดงเป็นการ์ดรายการ (2 คอลัมน์บนจอกว้าง) ---------- */
.app-card table.ui-form { display: block; }
.app-card table.ui-form > tbody {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.app-card table.ui-form tr { display: block; }
.app-card table.ui-form td { display: block; padding: 0; width: auto !important; text-align: left; }
.app-card table.ui-form td[bgcolor] { background: none !important; }

.app-card table.ui-form tr.ui-title,
.app-card table.ui-form tr.ui-full { grid-column: 1 / -1; }
.app-card table.ui-form tr.ui-title td { text-align: center; padding-bottom: 6px; }
.app-card table.ui-form tr.ui-empty { display: none; }

/* รายการ: ป้าย + ค่า */
.app-card table.ui-form tr.ui-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 16px;
	transition: border-color .15s, box-shadow .15s;
}
.app-card table.ui-form tr.ui-item:focus-within {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(59, 91, 219, .12);
}
.app-card table.ui-form td.ui-label {
	color: var(--muted);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .3px;
}
.app-card table.ui-form tr.ui-item td:not(.ui-label) { font-weight: 500; }

/* ข้อความช่องเดียว */
.app-card table.ui-form tr.ui-note td { text-align: center; color: var(--muted); }

/* แถวปุ่ม */
.app-card table.ui-form tr.ui-actions td { text-align: center; }
.app-card table.ui-form tr.ui-actions td.ui-skip { display: none; }
.app-card table.ui-form tr.ui-actions td:not(.ui-skip) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding-top: 6px;
}
.app-card table.ui-form tr.ui-plain td { padding: 0; }

/* ตารางปุ่ม */
.app-card table.ui-buttons,
.app-card table.ui-buttons tbody { display: block; }
.app-card table.ui-buttons tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.app-card table.ui-buttons td { display: block; padding: 0; }

/* ---------- ตารางข้อมูล ---------- */
.ui-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 16px;
	border-radius: 18px;
	border: 1.5px solid var(--line);
	background: #fff;
}
.ui-scroll > table { margin: 0 !important; }
.app-card table.ui-data { border: 0 !important; }
.app-card table.ui-data td { border-bottom: 1px solid var(--line); white-space: nowrap; padding: 12px 14px; background: none; }
.app-card table.ui-data tr:last-child td { border-bottom: 0; }
.app-card table.ui-data tr.ui-head td {
	background: var(--brand) !important;
	color: #fff !important;
	font-weight: 500;
	font-size: .85rem;
	letter-spacing: .3px;
}
.app-card table.ui-data tr.ui-head td a { color: #fff; }
.app-card table.ui-data tr:not(.ui-head):hover td { background: var(--brand-soft); }
.app-card table.ui-data td a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--brand-soft);
	text-decoration: none;
	font-size: .88rem;
}

.ui-caption { text-align: center; color: var(--muted); margin: 0 0 10px; }
.ui-caption--title { color: var(--brand-dark); font-size: 1.12rem; font-weight: 600; margin-bottom: 8px; }
.ui-caption--title b { font-weight: 600; }

/* ---------- ช่องกรอก ---------- */
.app-card input[type=text],
.app-card input[type=password],
.app-card input[type=number],
.app-card input[type=date],
.app-card input[type=email],
.app-card input[type=tel],
.app-card input:not([type]),
.app-card select,
.app-card textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 9px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background-color: var(--field);
	color: var(--text);
	font: inherit;
	font-size: 16px; /* 16px ขึ้นไป iPhone จะไม่ซูมหน้าจอเมื่อแตะช่องกรอก */
	font-weight: 400;
	transition: border-color .15s, background-color .15s;
}
.app-card tr.ui-item input:not([type=submit]):not([type=button]):not([type=file]),
.app-card tr.ui-item select { border-color: transparent; }
.app-card select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233b5bdb' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 22px;
}
.app-card select[size] { padding: 6px; height: auto; background-image: none; }
.app-card input:focus,
.app-card select:focus,
.app-card textarea:focus {
	outline: none;
	border-color: var(--brand) !important;
	background-color: #fff;
}
.app-card input[readonly] { background-color: #eceff7; color: var(--muted); }
.app-card input[type=file] {
	width: 100%;
	padding: 12px;
	border: 1.5px dashed #c3cbe8;
	border-radius: 14px;
	background: var(--field);
	font: inherit;
	font-size: .9rem;
}
.app-card input[type=radio], .app-card input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }
.ui-hint-inline { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: 4px; }

/* ---------- ปุ่ม ---------- */
.app-card input[type=submit],
.app-card input[type=button],
.app-card button {
	-webkit-appearance: none;
	appearance: none;
	min-height: 46px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(59, 91, 219, .3);
	transition: transform .1s, box-shadow .15s, filter .15s;
	margin: 3px 0;
	white-space: normal;
}
.app-card input[type=submit]:hover,
.app-card input[type=button]:hover,
.app-card button:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(59, 91, 219, .38); }
.app-card input[type=submit]:active,
.app-card input[type=button]:active,
.app-card button:active { transform: scale(.97); }

/* ปุ่มรอง: กลับ / ย้อน */
.app-card input[value*="กลับ"],
.app-card input[value*="ย้อน"] {
	background: #fff;
	color: var(--brand-dark);
	border: 1.5px solid var(--line);
	box-shadow: none;
}
.app-card input[value*="กลับ"]:hover,
.app-card input[value*="ย้อน"]:hover { border-color: var(--brand); box-shadow: none; filter: none; }

/* ปุ่มที่ลบข้อมูล */
.app-card input[type=submit][value*="ยกเลิก"],
.app-card input[type=submit][value*="ลบ"] {
	background: #fff;
	color: var(--danger);
	border: 1.5px solid #f3c2ca;
	box-shadow: none;
}

/* ---------- เมนูเป็นรายการ ---------- */
.app-card a.ui-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border: 1.5px solid var(--line);
	border-radius: 16px;
	background: #fff;
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
.app-card a.ui-tile::after {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 10px;
	background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233b5bdb' d='M9 6l6 6-6 6-1.4-1.4 4.6-4.6-4.6-4.6z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.app-card a.ui-tile:hover { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(59, 91, 219, .1); }
.app-card a.ui-tile:active { transform: scale(.99); }
.app-card a.ui-tile--out { color: var(--danger); }
.app-card a.ui-tile--out::after {
	background: #fdecef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0475b' d='M9 6l6 6-6 6-1.4-1.4 4.6-4.6-4.6-4.6z'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- กล่องแจ้งข้อผิดพลาด ---------- */
.ui-alert {
	background: #fdecef;
	color: #a3263a;
	border: 1.5px solid #f6c3cc;
	border-radius: 16px;
	padding: 14px 16px;
	text-align: center;
	font-weight: 500;
	margin-bottom: 14px;
}
.app-card .ui-alert-actions { text-align: center; }

/* ---------- ลิงก์เจ้าหน้าที่ใต้การ์ด ---------- */
.app-links { display: flex; justify-content: center; gap: 10px; margin: 18px auto 0; flex-wrap: wrap; }
.app-links a {
	padding: 10px 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: var(--brand-dark);
	text-decoration: none;
	font-weight: 500;
	font-size: .9rem;
	box-shadow: 0 6px 16px rgba(30, 48, 140, .15);
}
.app-links a.app-links__out { color: var(--danger); }

.app-foot { text-align: center; color: rgba(255, 255, 255, .85); font-size: .78rem; padding: 22px 16px 0; }

/* ---------- จอแคบ (มือถือ) ---------- */
@media (max-width: 640px) {
	.app-bar { padding: calc(12px + env(safe-area-inset-top)) 14px 16px; border-radius: 0 0 26px 26px; }
	.app-bar__sub { font-size: .7rem; }
	.app-main { padding: 18px 12px 0; }
	.app-card { padding: 20px 14px; border-radius: 24px; }
	.app-card table.ui-form tr.ui-actions input[type=submit],
	.app-card table.ui-form tr.ui-actions input[type=button],
	.app-card table.ui-form tr.ui-actions form,
	.app-card table.ui-buttons td,
	.app-card table.ui-buttons input[type=submit] { width: 100%; }
	.app-card table.ui-buttons td { flex: 1 1 100%; }
}

/* ---------- iPad / จอกว้าง: การ์ดรายการ 2 คอลัมน์ ---------- */
@media (min-width: 760px) {
	.app-card table.ui-form > tbody { grid-template-columns: 1fr 1fr; }
	.app-card { padding: 32px 34px; }
	.app-bar { padding-left: 28px; padding-right: 28px; }
}

@media print {
	body::before { display: none; }
	.app-bar, .app-links, .app-foot { display: none; }
	.app-main { padding: 0; }
	.app-card { box-shadow: none; max-width: none; padding: 0; }
}

/* =====================================================================
   หน้าแรกผู้สมัคร (enter701n00.php): ภาพเต็มจอ + ข้อความต้อนรับ
   ===================================================================== */
.landing {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	background: var(--brand-deep);
	color: #fff;
}
.landing__photo {
	grid-area: 1 / 1;
	background: url("../_img/hero_students.jpg") center 18% / cover no-repeat;
}
.landing__shade {
	grid-area: 1 / 1;
	background: linear-gradient(180deg, rgba(31, 47, 134, .1) 0%, rgba(31, 47, 134, .3) 34%, rgba(31, 47, 134, .9) 62%, #1f2f86 100%);
}
.landing__top {
	position: absolute;
	top: calc(18px + env(safe-area-inset-top));
	left: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .88rem;
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.landing__top img { width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.landing__top small { display: block; font-weight: 400; opacity: .92; font-size: .74rem; }
.landing__content {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: center;
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: 0 24px calc(24px + env(safe-area-inset-bottom));
}
.landing h1 {
	margin: 0;
	font-size: clamp(2.5rem, 11vw, 3.6rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.5px;
}
.landing__lead { margin: 8px 0 20px; font-size: .98rem; opacity: .92; }
.landing__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.landing__form label { font-size: .85rem; font-weight: 500; opacity: .92; }
.landing__form input[type=text] {
	width: 100%;
	min-height: 52px;
	padding: 10px 18px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: inherit;
	font-size: 1.1rem;
	letter-spacing: 2px;
	text-align: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.landing__form input[type=text]::placeholder { color: rgba(255, 255, 255, .72); letter-spacing: 1px; }
.landing__form input[type=text]:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .22); }
.landing__btn {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 24px;
	border-radius: 999px;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .6px;
	text-align: center;
	text-decoration: none;
	line-height: 49px;
	cursor: pointer;
	transition: transform .1s, background .15s;
}
.landing__btn:active { transform: scale(.98); }
.landing__btn--solid { border: 0; background: #fff; color: var(--brand-deep); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.landing__btn--solid:hover { background: #eef1ff; }
.landing__btn--ghost { border: 1.5px solid rgba(255, 255, 255, .85); background: transparent; color: #fff; }
.landing__btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.landing__hint { margin: 0; font-size: .8rem; opacity: .82; text-align: center; }
.landing__staff { margin-top: 12px; }
.landing__staff summary { list-style: none; }
.landing__staff summary::-webkit-details-marker { display: none; }
.landing__staff[open] summary { margin-bottom: 10px; }
.landing__staff nav { display: grid; gap: 8px; }
.landing__staff nav a {
	display: block;
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
	font-size: .92rem;
}
.landing__staff nav a:hover { background: rgba(255, 255, 255, .22); }
.landing__foot { margin: 16px 0 0; font-size: .72rem; opacity: .7; text-align: center; }

/* จอกว้าง (iPad แนวนอน / คอมพิวเตอร์): ข้อความซ้าย ภาพขวา */
@media (min-width: 900px) {
	.landing {
		grid-template-columns: minmax(440px, 1fr) minmax(380px, 46%);
		background:
			radial-gradient(circle at 12% 88%, rgba(255, 255, 255, .07) 0 180px, transparent 181px),
			radial-gradient(circle at 48% 10%, rgba(255, 255, 255, .05) 0 120px, transparent 121px),
			linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
	}
	.landing__photo { grid-area: 1 / 2; border-radius: 48px 0 0 48px; background-position: center 12%; }
	.landing__shade { grid-area: 1 / 2; border-radius: 48px 0 0 48px; background: linear-gradient(90deg, rgba(31, 47, 134, .35) 0%, transparent 28%); }
	.landing__content { grid-area: 1 / 1; align-self: center; max-width: 520px; padding: 110px 48px 48px; }
	.landing__top { left: 48px; right: auto; top: 36px; }
	.landing h1 { font-size: 4rem; }
}

/* <br> ที่หน้าเดิมใช้เว้นบรรทัดรอบตาราง (ไม่ใช่ใน td) */
.app-card form > br,
.app-card table ~ br,
.app-card .ui-scroll ~ br,
.app-card center > br:first-child { display: none; }

/* ข้อความท้ายหน้าอยู่บนแถบเฉียงได้ทั้งสีขาวและสีน้ำเงิน */
.app-foot span {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(31, 47, 134, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* =====================================================================
   สถานะการสมัคร: กล่องสรุป + ไทม์ไลน์ 4 ขั้น
   ===================================================================== */
:root {
	--ok: #16a34a;
	--ok-soft: #e8f7ee;
	--wait: #d97706;
	--wait-soft: #fff4e2;
}

.st-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 20px;
	margin-bottom: 18px;
	border: 1.5px solid transparent;
}
.st-summary__icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	color: #fff;
}
.st-summary__icon svg { width: 26px; height: 26px; fill: currentColor; }
.st-summary__title { font-weight: 600; font-size: 1.08rem; line-height: 1.35; }
.st-summary__text { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.st-summary--done    { background: var(--ok-soft);   border-color: #bfe8cd; }
.st-summary--done    .st-summary__icon { background: var(--ok); }
.st-summary--done    .st-summary__title { color: #13803c; }
.st-summary--current { background: var(--brand-soft); border-color: #cdd7fb; }
.st-summary--current .st-summary__icon { background: var(--brand); }
.st-summary--current .st-summary__title { color: var(--brand-dark); }
.st-summary--wait    { background: var(--wait-soft); border-color: #f7d9a6; }
.st-summary--wait    .st-summary__icon { background: var(--wait); }
.st-summary--wait    .st-summary__title { color: #a65a04; }
.st-summary--warn    { background: var(--wait-soft); border-color: #f7d9a6; }
.st-summary--warn    .st-summary__icon { background: var(--wait); }
.st-summary--warn    .st-summary__title { color: #a65a04; }
.st-summary--fail    { background: #fdecef; border-color: #f6c3cc; }
.st-summary--fail    .st-summary__icon { background: var(--danger); }
.st-summary--fail    .st-summary__title { color: #a3263a; }

/* ไทม์ไลน์: แนวตั้งบนมือถือ */
.st-timeline { list-style: none; margin: 0 0 18px; padding: 0; }
.st-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.st-step:last-child { padding-bottom: 0; }
.st-step::before {          /* เส้นเชื่อมไปขั้นถัดไป */
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 3px;
	border-radius: 3px;
	background: var(--line);
}
.st-step:last-child::before { display: none; }
.st-step--done::before { background: var(--ok); }
.st-step__dot {
	position: relative;
	z-index: 1;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	border: 2.5px solid var(--line);
	color: var(--muted);
	font-weight: 600;
}
.st-step__dot svg { width: 22px; height: 22px; fill: currentColor; }
.st-step__body { padding-top: 6px; min-width: 0; }
.st-step__title { font-weight: 600; line-height: 1.3; }
.st-step__text { font-size: .85rem; color: var(--muted); margin-top: 2px; }

.st-step--done .st-step__dot    { background: var(--ok); border-color: var(--ok); color: #fff; }
.st-step--current .st-step__dot { background: var(--brand); border-color: var(--brand); color: #fff; animation: st-pulse 1.8s ease-out infinite; }
.st-step--current .st-step__title { color: var(--brand-dark); }
.st-step--wait .st-step__dot    { background: var(--wait); border-color: var(--wait); color: #fff; }
.st-step--wait .st-step__title  { color: #a65a04; }
.st-step--fail .st-step__dot    { background: var(--danger); border-color: var(--danger); color: #fff; }
.st-step--fail .st-step__title  { color: #a3263a; }
.st-step--todo .st-step__title  { color: var(--muted); font-weight: 500; }

@keyframes st-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(59, 91, 219, .45); }
	70%  { box-shadow: 0 0 0 12px rgba(59, 91, 219, 0); }
	100% { box-shadow: 0 0 0 0 rgba(59, 91, 219, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.st-step--current .st-step__dot { animation: none; }
}

/* ไทม์ไลน์: แนวนอนบน iPad / คอมพิวเตอร์ */
@media (min-width: 760px) {
	.st-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.st-step { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-bottom: 0; }
	.st-step::before { left: calc(50% + 26px); right: calc(-50% + 26px); top: 19px; bottom: auto; width: auto; height: 3px; }
	.st-step__dot { width: 42px; height: 42px; }
	.st-step__body { padding-top: 0; }
}

/* ทางลัดของขั้นที่ค้าง */
.app-card .st-action {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto 22px;
	padding: 16px;
	border: 1.5px dashed #c3cbe8;
	border-radius: 18px;
	background: var(--field);
}
.app-card .st-action label { font-size: .88rem; font-weight: 500; color: var(--muted); }
.st-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 22px; }
.st-docs form { margin: 0; }
.app-card .st-docs a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--brand-dark);
	text-decoration: none;
	font-size: .92rem;
}
.app-card .st-docs a:hover { border-color: var(--brand); }
.st-section-title { margin: 6px 0 12px; font-weight: 600; color: var(--brand-dark); text-align: center; font-size: 1.05rem; }

/* ---------- เอกสารหลักฐาน ---------- */
.ui-ok {
	background: var(--ok-soft);
	color: #13803c;
	border: 1.5px solid #bfe8cd;
	border-radius: 16px;
	padding: 14px 16px;
	text-align: center;
	font-weight: 500;
	margin-bottom: 14px;
}
.app-card img.doc-img {
	display: block;
	width: 100%;
	max-width: 420px;
	max-height: 320px;
	object-fit: contain;
	background: var(--field);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	margin-top: 4px;
}
.doc-missing {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--wait-soft);
	color: #a65a04;
	font-size: .85rem;
	font-weight: 500;
}
.app-card a.doc-pdf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--brand-soft);
	text-decoration: none;
	font-size: .9rem;
}
.app-card a.doc-pdf::before { content: "PDF"; font-size: .7rem; font-weight: 700; color: #fff; background: var(--danger); padding: 1px 6px; border-radius: 6px; }
.st-action__title { font-weight: 600; color: var(--brand-dark); text-align: center; }
.app-card .st-action label small { font-weight: 400; }

/* ---------- ปุ่มหน้าหลักผู้สมัคร (จัดเป็นกลุ่ม) ---------- */
.act-groups { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 10px; }
@media (min-width: 760px) { .act-groups { grid-template-columns: 1fr 1fr; } }
.act-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1.5px solid var(--line);
	border-radius: 20px;
	background: #fff;
}
.act-group__title { font-weight: 600; color: var(--brand-dark); margin-bottom: 2px; }
.act-group form { margin: 0; }
.app-card button.act-btn {
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 10px 52px 10px 16px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233b5bdb' d='M9 6l6 6-6 6-1.4-1.4 4.6-4.6-4.6-4.6z'/%3E%3C/svg%3E") right 14px center / 22px no-repeat;
	color: var(--text);
	font-weight: 500;
	font-size: .95rem;
	text-align: left;
	box-shadow: none;
	filter: none;
}
.app-card button.act-btn:hover { border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 4px rgba(59, 91, 219, .1); filter: none; }
.act-home { text-align: center; margin-top: 8px; }
.app-card .act-home a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	color: var(--brand-dark);
	text-decoration: none;
	font-weight: 600;
}
.app-card .act-home a:hover { border-color: var(--brand); }

/* ---------- ใบแจ้งชำระค่าสมัครเรียน ---------- */
.slip-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 16px; }
.slip-actions form { margin: 0; }
.app-card a.slip-open {
	display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
	border-radius: 999px; border: 1.5px solid var(--line); color: var(--brand-dark); text-decoration: none; font-weight: 500;
}
.app-card a.slip-open:hover { border-color: var(--brand); }
.app-card img.slip-img {
	display: block; width: 100%; max-width: 640px; margin: 0 auto 18px;
	border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
}

/* =====================================================================
   หน้ารายชื่อผู้สมัครของครูสัมภาษณ์ (teacher21.php)
   ===================================================================== */
.app-card .tq-dep { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.app-card .tq-dep label { font-size: .85rem; font-weight: 500; color: var(--muted); }
.app-card .tq-dep select { font-weight: 500; min-height: 50px; }
.tq-empty { text-align: center; color: var(--muted); padding: 28px 10px; line-height: 1.8; }
.tq-head { text-align: center; margin: 4px 0 14px; }
.tq-head__title { font-size: 1.2rem; font-weight: 600; color: var(--brand-dark); }
.tq-head__sub { font-size: .85rem; color: var(--muted); }

.tq-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.app-card a.tq-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 999px;
	border: 1.5px solid var(--line); background: #fff;
	color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 500;
}
.app-card a.tq-chip b { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--field); font-size: .78rem; text-align: center; }
.app-card a.tq-chip:hover { border-color: var(--brand); }
.app-card a.tq-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-card a.tq-chip.is-active b { background: rgba(255, 255, 255, .25); }

.tq-list { display: flex; flex-direction: column; gap: 10px; }
.tq-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-left: 6px solid var(--line);
	border-radius: 16px;
	background: #fff;
	transition: box-shadow .2s, border-color .2s;
}
.tq-item--wait     { border-left-color: var(--brand); }
.tq-item--consider { border-left-color: var(--wait); }
.tq-item--pass     { border-left-color: var(--ok); }
.tq-item--fail     { border-left-color: var(--danger); }
.tq-item.is-saved  { box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.tq-item__name { font-weight: 600; }
.tq-item__meta { font-size: .85rem; color: var(--muted); }
.app-card .tq-item__meta a { font-weight: 500; }
.tq-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tq-tag { font-size: .75rem; font-weight: 500; padding: 2px 10px; border-radius: 999px; }
.tq-tag--ok   { background: var(--ok-soft); color: #13803c; }
.tq-tag--warn { background: var(--wait-soft); color: #a65a04; }
.app-card .tq-item__form { display: flex; gap: 8px; align-items: center; }
.app-card .tq-item__form select { flex: 1; min-width: 0; }
.app-card .tq-item__form input[type=submit] { flex: none; margin: 0; padding: 0 20px; min-height: 44px; }

@media (min-width: 760px) {
	.tq-item { grid-template-columns: 1fr 320px; align-items: center; }
}

/* =====================================================================
   งานทะเบียน: จัดการรหัสแผนกวิชา (reenter701acc.php)
   ===================================================================== */
.app-card .acc-bulk { text-align: center; margin-bottom: 16px; }
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-row {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 14px; border: 1.5px solid var(--line); border-left: 6px solid var(--ok); border-radius: 14px; background: #fff;
}
.acc-row--none { border-left-color: var(--wait); }
.acc-row__name { font-weight: 600; }
.acc-row__meta { font-size: .82rem; color: var(--muted); }
.acc-row__meta code, .acc-table code { font-family: Consolas, monospace; background: var(--field); padding: 1px 6px; border-radius: 6px; color: var(--text); }
.acc-row__actions { display: flex; gap: 6px; }
.acc-row__actions form { margin: 0; }
.app-card .acc-row__actions input[type=submit] { min-height: 38px; padding: 0 16px; font-size: .85rem; margin: 0; }
.acc-issued { border: 2px solid var(--ok); background: var(--ok-soft); border-radius: 18px; padding: 16px; margin-bottom: 18px; }
.acc-issued__title { font-weight: 600; color: #13803c; margin-bottom: 10px; text-align: center; }
.app-card table.acc-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
.app-card table.acc-table th, .app-card table.acc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
.app-card table.acc-table code { font-size: 1rem; }
.acc-issued__actions { text-align: center; }
@media print {
	.acc-bulk, .acc-list, .acc-issued__actions, .st-section-title small { display: none !important; }
	.acc-issued { border: 0; background: none; padding: 0; }
}

/* =====================================================================
   งานทะเบียน: รายชื่อตามรอบการสมัคร (reenter701round.php)
   ===================================================================== */
.rd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 640px) { .rd-tabs { grid-template-columns: 1fr; } }
.app-card a.rd-tab {
	display: flex; flex-direction: column; gap: 2px;
	padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
	color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.app-card a.rd-tab:hover { border-color: var(--brand); }
.app-card a.rd-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(59, 91, 219, .3); }
.rd-tab__name { font-weight: 600; }
.rd-tab__name em { font-style: normal; font-size: .7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--ok); color: #fff; vertical-align: middle; }
.rd-tab__date { font-size: .8rem; opacity: .8; }
.rd-tab__count { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
.app-card .rd-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.app-card .rd-filter select { flex: 1; min-width: 220px; }
.app-card a.rd-export {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	background: var(--ok); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
}
.app-card a.rd-export:hover { filter: brightness(1.08); }
.rd-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.rd-badge--ok       { background: var(--ok-soft); color: #13803c; }
.rd-badge--wait     { background: var(--brand-soft); color: var(--brand-dark); }
.rd-badge--consider { background: var(--wait-soft); color: #a65a04; }
.rd-badge--fail     { background: #fdecef; color: #a3263a; }
.rd-badge--none     { background: var(--field); color: var(--muted); }

/* ตารางรายชื่อตามรอบ: พอดีจอ ไม่ต้องเลื่อนด้านข้าง */
.app-card:has(.rd-table) { max-width: 1200px; }
.app-card table.rd-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; table-layout: auto; }
.app-card table.rd-table th {
	background: var(--brand); color: #fff; font-weight: 500; font-size: .85rem; text-align: left; padding: 12px 14px;
}
.app-card table.rd-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; white-space: normal; }
.app-card table.rd-table tbody tr:hover td { background: var(--brand-soft); }
.rd-no { width: 48px; color: var(--muted); white-space: nowrap; overflow-wrap: normal; }
.rd-name { font-weight: 600; }
.rd-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.app-card .rd-meta a { color: var(--muted); font-weight: 400; }
.rd-dep { font-size: .92rem; }
.rd-status { display: flex; flex-wrap: wrap; gap: 4px; }
.app-card table.rd-table td.rd-status { display: table-cell; }
.rd-status .rd-badge { margin: 0 4px 4px 0; }
.rd-act { width: 1%; white-space: nowrap; }
.app-card .rd-act a {
	display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft);
	text-decoration: none; font-size: .85rem; white-space: nowrap;
}

/* มือถือ: แต่ละแถวเป็นการ์ด */
@media (max-width: 760px) {
	.app-card table.rd-table, .app-card table.rd-table tbody { display: block; border: 0; }
	.app-card table.rd-table thead { display: none; }
	.app-card table.rd-table tr {
		display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
		padding: 12px 14px; margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
	}
	.app-card table.rd-table td { display: block; padding: 0; border: 0; }
	.app-card table.rd-table td.rd-no { grid-row: span 4; width: auto; font-weight: 600; }
	.app-card table.rd-table td.rd-status { display: block; }
	.rd-act { width: auto; }
}

/* ---------- งานทะเบียน: รายละเอียดผู้สมัคร (reenter701view.php) ---------- */
.vw-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 18px 0; }
@media (min-width: 760px) { .vw-grid { grid-template-columns: 1fr 1fr; } }
.vw-item { padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; }
.vw-item--full { grid-column: 1 / -1; }
.vw-label { font-size: .8rem; color: var(--muted); font-weight: 500; }
.vw-value { font-weight: 500; margin-top: 2px; }
.vw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.app-card a.vw-btn {
	display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px;
	border: 1.5px solid var(--line); background: #fff; color: var(--brand-dark); text-decoration: none; font-weight: 600;
}
.app-card a.vw-btn:hover { border-color: var(--brand); }
.app-card a.vw-btn--primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(59, 91, 219, .3); }

/* ครูสัมภาษณ์: ลิงก์ในแถว + ป้ายวันนัด */
.tq-item__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.app-card .tq-item__links a {
	display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
	background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; font-size: .82rem; font-weight: 500;
}
.app-card .tq-item__links a:hover { background: #dce3fa; }
.tq-tag--iv { background: var(--brand); color: #fff; }

/* หมายเหตุสำหรับผู้สมัครที่สมัครสมบูรณ์ */
.st-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--wait-soft); border: 1.5px solid #f7d9a6; color: #7a4304; font-size: .92rem; line-height: 1.6; }
.st-note b { color: #a65a04; margin-right: 4px; }

/* =====================================================================
   แอดมินกลาง (adminmenu.php / admin_line.php)
   ===================================================================== */
.app-card:has(.adm-kpis) { max-width: 1200px; }
.adm-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.adm-title { font-size: 1.25rem; font-weight: 600; color: var(--brand-dark); }
.adm-sub { font-size: .85rem; color: var(--muted); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-card a.adm-btn {
	display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px;
	border: 1.5px solid var(--line); background: #fff; color: var(--brand-dark); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.app-card a.adm-btn:hover { border-color: var(--brand); }
.app-card a.adm-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.adm-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 1000px) { .adm-kpis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .adm-kpis { grid-template-columns: repeat(2, 1fr); } }
.app-card a.adm-kpi {
	display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; text-decoration: none;
	border: 1.5px solid var(--line); background: #fff; color: var(--text); border-top: 5px solid var(--line);
}
.app-card a.adm-kpi span { font-size: .78rem; color: var(--muted); font-weight: 500; }
.app-card a.adm-kpi b { font-size: 1.6rem; line-height: 1.1; }
.app-card a.adm-kpi.is-active { box-shadow: 0 0 0 3px rgba(59, 91, 219, .25); border-color: var(--brand); }
.adm-kpi--all { border-top-color: var(--brand-dark) !important; }
.adm-kpi--nodoc { border-top-color: #94a3b8 !important; }
.adm-kpi--wait { border-top-color: var(--brand) !important; }
.adm-kpi--consider { border-top-color: var(--wait) !important; }
.adm-kpi--fail { border-top-color: var(--danger) !important; }
.adm-kpi--unpaid { border-top-color: #0ea5bd !important; }
.adm-kpi--complete { border-top-color: var(--ok) !important; }
.adm-g--nodoc { background: #eef1f6; color: #475569; }
.adm-g--wait { background: var(--brand-soft); color: var(--brand-dark); }
.adm-g--consider { background: var(--wait-soft); color: #a65a04; }
.adm-g--fail { background: #fdecef; color: #a3263a; }
.adm-g--unpaid { background: #e0f7fa; color: #0e7490; }
.adm-g--complete { background: var(--ok-soft); color: #13803c; }
.app-card .adm-filter { margin-bottom: 10px; }
.adm-h { font-size: 1rem; color: var(--brand-dark); margin: 20px 0 8px; }
.adm-scroll { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 16px; }
.app-card table.rp { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 0; }
.app-card table.rp th, .app-card table.rp td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.app-card table.rp th { background: var(--brand); color: #fff; font-weight: 500; font-size: .8rem; }
.app-card table.rp .l { text-align: left; white-space: normal; }
.app-card table.rp td small { color: var(--muted); font-size: .75rem; }
.app-card table.rp tr.zero td { color: #a0a7bd; }
.app-card table.rp tfoot td { background: var(--brand-soft); font-weight: 700; border-bottom: 0; }
.app-card table.rp tr.cur td { background: #f6f8ff; }
.app-card table.rp em { font-style: normal; font-size: .7rem; background: var(--ok); color: #fff; padding: 1px 8px; border-radius: 999px; }
.app-card a.adm-link { padding: 3px 12px; border-radius: 999px; background: var(--brand-soft); text-decoration: none; font-size: .8rem; }
.app-card .adm-login { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.app-card .adm-login label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); font-weight: 500; }

.ln-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
@media (max-width: 640px) { .ln-status { grid-template-columns: 1fr; } }
.ln-status div { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.ln-status span { display: block; font-size: .78rem; color: var(--muted); }
.ln-status b { font-weight: 500; overflow-wrap: anywhere; }
.ln-status b.on { color: var(--ok); } .ln-status b.off { color: var(--danger); }
.app-card .ln-form, .app-card .ln-test { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 12px; }
.app-card .ln-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 500; color: var(--muted); }
.app-card .ln-form label.ln-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.app-card .ln-seen { padding: 10px 14px; border-radius: 14px; background: var(--ok-soft); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ln-help { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--field); font-size: .9rem; }
.ln-help h3 { margin: 0 0 6px; font-size: 1rem; color: var(--brand-dark); }
.ln-help ol { margin: 0; padding-left: 20px; line-height: 1.8; }
.ln-help code { background: #fff; padding: 1px 6px; border-radius: 6px; font-size: .85em; overflow-wrap: anywhere; }

/* งานทะเบียน: ดูรหัสผ่านแผนกวิชา */
.app-card button.acc-show { min-height: 0; padding: 1px 10px; font-size: .75rem; border-radius: 999px; box-shadow: none; background: var(--brand-soft); color: var(--brand-dark); margin: 0 0 0 4px; }
.acc-pw { letter-spacing: 1px; }
.acc-nopw { color: #a65a04; font-size: .78rem; }

/* แอดมินกลาง: รอบสัมภาษณ์ทั้งหมด (admin_weeks.php) */
.app-card:has(.wk-grid) { max-width: 1200px; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.app-card a.wk-card {
	display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; text-decoration: none;
	border: 1.5px solid var(--line); border-left: 6px solid #94a3b8; background: #fff; color: var(--text);
	transition: box-shadow .15s, border-color .15s;
}
.app-card a.wk-card:hover { border-color: var(--brand); }
.app-card a.wk-card.is-active { box-shadow: 0 0 0 3px rgba(59, 91, 219, .25); border-color: var(--brand); }
.wk-card--cur  { border-left-color: var(--ok) !important; }
.wk-card--next { border-left-color: var(--brand) !important; }
.wk-badge { align-self: flex-start; font-size: .7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #eef1f6; color: #475569; }
.wk-card--cur .wk-badge  { background: var(--ok); color: #fff; }
.wk-card--next .wk-badge { background: var(--brand-soft); color: var(--brand-dark); }
.wk-date { font-weight: 600; margin-top: 2px; }
.wk-range { font-size: .72rem; color: var(--muted); }
.wk-count { font-size: .9rem; margin-top: 4px; }
.wk-count b { font-size: 1.4rem; }
.wk-mini { font-size: .75rem; color: var(--muted); }
.wk-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 14px; padding-top: 14px; border-top: 1.5px solid var(--line); }
/* แอดมินกลาง: เลือกสาขา + สรุปสาขาที่เลือก */
.app-card .dep-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.app-card .dep-bar select { flex: 1 1 260px; min-height: 48px; font-weight: 500; }
.dep-bar__label { font-size: .85rem; font-weight: 600; color: var(--brand-dark); }
.app-card a.dep-bar__back { flex: none; min-height: 48px; }
.dep-sum { padding: 18px 20px; margin-bottom: 16px; border-radius: 20px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; box-shadow: 0 10px 26px rgba(59, 91, 219, .25); }
.dep-sum__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.dep-sum__name { font-size: 1.3rem; font-weight: 600; }
.dep-sum__code { font-size: .8rem; opacity: .8; }
.dep-sum__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .dep-sum__nums { grid-template-columns: repeat(2, 1fr); } }
.dep-sum__box { background: rgba(255, 255, 255, .14); border-radius: 14px; padding: 10px 14px; }
.dep-sum__box span { display: block; font-size: .78rem; opacity: .9; }
.dep-sum__box b { font-size: 1.9rem; line-height: 1.1; margin-right: 4px; }
.dep-sum__box small { font-size: .8rem; opacity: .85; }
.dep-sum__box--main { background: #fff; color: var(--brand-dark); }
.dep-sum__box--main span, .dep-sum__box--main small { opacity: 1; color: var(--muted); }
.dep-sum__bar { height: 8px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.dep-sum__bar i { display: block; height: 100%; background: #7ee2a8; border-radius: 999px; }
.dep-sum__barlabel { font-size: .78rem; opacity: .9; margin-top: 4px; }
.app-card a.dep-link { color: inherit; text-decoration: none; font-weight: 500; }
.app-card a.dep-link:hover { color: var(--brand); text-decoration: underline; }
.adm-hint { font-weight: 400; font-size: .75rem; color: var(--muted); margin-left: 6px; }
/* ปุ่มออกจากระบบของแอดมินกลาง */
.app-card a.adm-btn--out { color: var(--danger); border-color: #f3c2ca; }
.app-card a.adm-btn--out:hover { border-color: var(--danger); background: #fdecef; }

/* แอดมินวันหยุด */
.acc-hol { padding: 14px 16px; margin-bottom: 18px; border-radius: 18px; background: var(--wait-soft); border: 1.5px solid #f7d9a6; }
.acc-hol__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.acc-hol__title { font-weight: 600; color: #a65a04; font-size: 1.05rem; }
.acc-hol__sub { font-size: .8rem; color: #7a4304; }
.acc-hol__head form { margin: 0; }
.acc-hol__empty { font-size: .85rem; color: var(--muted); }
.acc-hol .acc-row { border-left-color: var(--wait); margin-top: 6px; }
.acc-sec-title { font-weight: 600; color: var(--brand-dark); margin: 4px 0 10px; }
.tq-dep-tag { color: var(--brand-dark); font-weight: 600; }
/* แอดมินวันหยุด */
.tq-tag--hol { background: var(--wait-soft); color: #a65a04; }
.tq-hol-note { font-size: .82rem; color: #a65a04; font-weight: 500; }
.hol-day { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; margin-bottom: 12px; border-radius: 16px; background: var(--wait-soft); border: 1.5px solid #f7d9a6; }
.hol-day__name { font-weight: 600; font-size: 1.1rem; color: #7a4304; }
.hol-day__name span { font-weight: 500; font-size: .85rem; margin-left: 6px; }
.hol-day__state { font-size: .82rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.hol-day__state.is-open { background: var(--ok); color: #fff; }
.hol-day__state.is-closed { background: #eef1f6; color: #475569; }
.hol-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 760px) { .hol-kpis { grid-template-columns: repeat(3, 1fr); } }
.hol-kpis div { padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); border-top: 5px solid var(--brand-dark); }
.hol-kpis span { display: block; font-size: .75rem; color: var(--muted); }
.hol-kpis b { font-size: 1.5rem; }
.hol-kpis .w { border-top-color: var(--brand); } .hol-kpis .p { border-top-color: var(--ok); } .hol-kpis .c { border-top-color: var(--wait); }
.hol-kpis .f { border-top-color: var(--danger); } .hol-kpis .m { border-top-color: #94a3b8; }
.hol-q { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; margin-right: 4px; vertical-align: middle; }
.tq-item--moved { border-left-color: #94a3b8; opacity: .8; }
.wk-card--hol { border-left-color: var(--wait) !important; }
.wk-card--hol .wk-badge { background: var(--wait); color: #fff; }
.wk-hol { font-size: .72rem; font-weight: 600; color: #a65a04; }
.app-card .hol-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.app-card .hol-add label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); font-weight: 500; flex: 1 1 200px; }
/* หน้าจัดการรหัส: หัวส่วน (ชื่อซ้าย ปุ่มขวา) + ปุ่มเล็กในแถว */
.acc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.acc-head__text { flex: 1 1 320px; min-width: 0; }
.acc-head__title { font-weight: 600; font-size: 1.08rem; color: var(--brand-dark); }
.acc-hol .acc-head__title { color: #a65a04; }
.acc-head__sub { font-size: .8rem; color: var(--muted); }
.acc-hol .acc-head__sub { color: #7a4304; }
.acc-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-head__actions form { margin: 0; }
.acc-dep { padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; }
.acc-row { align-items: center; }
.acc-row__info { flex: 1 1 360px; min-width: 0; }
.acc-row__actions { flex: none; margin-left: auto; }
.app-card input.acc-btn {
	min-height: 36px; padding: 0 16px; margin: 0; font-size: .85rem; font-weight: 500;
	background: #fff; color: var(--brand-dark); border: 1.5px solid #cdd7fb; box-shadow: none; filter: none;
}
.app-card input.acc-btn:hover { border-color: var(--brand); background: var(--brand-soft); box-shadow: none; filter: none; }
.app-card input.acc-btn--solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-card input.acc-btn--solid:hover { background: var(--brand-dark); }
.app-card input.acc-btn--danger { color: var(--danger); border-color: #f3c2ca; }
.app-card input.acc-btn--danger:hover { border-color: var(--danger); background: #fdecef; }
@media (max-width: 640px) {
	.acc-row__actions { margin-left: 0; width: 100%; }
	.acc-head__actions { width: 100%; }
}.app-card:has(.acc-dep) { max-width: 1040px; }