@charset "UTF-8";
/* ==========================================================================
   cpitp – Joomla 6 template
   Great Naga Co., Ltd.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
	--cp-primary: #1d5ab5;
	--cp-primary-600: #17499a;
	--cp-primary-050: #eaf1fb;
	--cp-ink: #123566;
	--cp-ink-600: #1b4b8f;
	--cp-sky: #f5f8fd;
	--cp-line: #e2eaf6;
	--cp-text: #22303f;
	--cp-muted: #5f7186;
	--cp-white: #fff;

	--cp-radius: 12px;
	--cp-radius-sm: 8px;
	--cp-radius-pill: 999px;

	--cp-shadow-sm: 0 1px 3px rgba(18, 53, 102, .06);
	--cp-shadow: 0 6px 20px rgba(18, 53, 102, .08);
	--cp-shadow-lg: 0 18px 44px rgba(18, 53, 102, .16);

	--cp-header-h: 78px;
	--cp-header-h-sticky: 62px;
	--cp-container: 1320px;
	--cp-gap: 24px;

	--cp-ease: cubic-bezier(.22, 1, .36, 1);
	--cp-ease-back: cubic-bezier(.34, 1.56, .64, 1);
	--cp-dur: .28s;
}

/* --------------------------------------------------------- 2. Base / reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cp-header-h) + 16px);
}

body.tpl-cpitp {
	margin: 0;
	font-family: var(--cp-font, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.7;
	color: var(--cp-text);
	background: var(--cp-white);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* TH Sarabun New เล็กกว่า Sarabun ~20% จึงชดเชยขนาดฐานให้ */
body.tpl-cpitp.font-thsarabunnew { font-size: 21px; line-height: 1.62; }

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--cp-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cp-primary-600); }

h1, h2, h3, h4, h5 {
	margin: 0 0 .5em;
	color: var(--cp-ink);
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }

:focus-visible {
	outline: 3px solid rgba(29, 90, 181, .55);
	outline-offset: 2px;
	border-radius: 4px;
}

.cp-skip {
	position: fixed;
	inset-inline-start: 16px;
	top: -60px;
	z-index: 1200;
	padding: 10px 18px;
	background: var(--cp-ink);
	color: #fff;
	border-radius: 0 0 10px 10px;
	transition: top .25s var(--cp-ease);
}
.cp-skip:focus { top: 0; color: #fff; }

/* -------------------------------------------------------- 3. Layout blocks */
.cp-container {
	width: min(100% - 32px, var(--cp-container));
	margin-inline: auto;
}

.cp-block { padding-block: clamp(28px, 4vw, 56px); }
.cp-main { min-height: 40vh; }

.cp-shell--sidebars {
	display: grid;
	gap: var(--cp-gap);
	padding-block: clamp(24px, 3vw, 44px);
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	body.has-sidebar-left .cp-shell--sidebars  { grid-template-columns: 300px minmax(0, 1fr); }
	body.has-sidebar-right .cp-shell--sidebars { grid-template-columns: minmax(0, 1fr) 300px; }
	body.has-sidebar-left.has-sidebar-right .cp-shell--sidebars { grid-template-columns: 280px minmax(0, 1fr) 280px; }
	body.has-sidebar-left .cp-side--left  { order: -1; }
}

.cp-bottom { background: var(--cp-sky); padding-block: clamp(28px, 4vw, 52px); }
.cp-bottom__grid { display: grid; gap: var(--cp-gap); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cp-bottom__grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- 4. Buttons */
.cp-btn {
	--btn-bg: var(--cp-primary);
	--btn-fg: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--cp-radius-sm);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	transition: transform .22s var(--cp-ease), box-shadow .22s var(--cp-ease), background-color .22s;
}

.cp-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 60%);
	opacity: 0;
	transition: opacity .3s;
}

.cp-btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(29, 90, 181, .28); }
.cp-btn:hover::after { opacity: 1; }
.cp-btn:active { transform: translateY(0); }
.cp-btn--primary { background: linear-gradient(135deg, var(--cp-ink-600), var(--cp-primary)); }
.cp-btn--ghost { --btn-bg: transparent; --btn-fg: var(--cp-primary); box-shadow: inset 0 0 0 1.5px var(--cp-line); }
.cp-btn--block { display: flex; justify-content: center; width: 100%; }
.cp-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------- 5. Topbar */
.cp-topbar {
	background: var(--cp-ink);
	color: rgba(255, 255, 255, .86);
	font-size: .92rem;
}
.cp-topbar a { color: #fff; }
.cp-topbar__inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: flex-end; min-height: 38px; }

/* -------------------------------------------------------------- 6. Header */
.cp-header {
	position: relative;
	z-index: 900;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--cp-line);
	transition: box-shadow .3s var(--cp-ease), background-color .3s;
}

.cp-header.is-sticky { position: sticky; top: 0; }
.cp-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, #0f2c58, var(--cp-primary) 38%, #6ea8f0 70%, #9fd0c4);
}
.cp-header.is-scrolled { box-shadow: 0 10px 30px rgba(18, 53, 102, .10); background: rgba(255, 255, 255, .97); }

.cp-header__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: var(--cp-header-h);
	transition: height .3s var(--cp-ease);
}
.cp-header.is-scrolled .cp-header__inner { height: var(--cp-header-h-sticky); }

.cp-header__progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 3px;
	width: var(--cp-progress, 0%);
	background: linear-gradient(90deg, var(--cp-ink-600), var(--cp-primary), #6ea8f0);
	transition: width .1s linear;
}

/* Brand */
.cp-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--cp-ink); }
.cp-brand__logo { transition: transform .45s var(--cp-ease-back); }
.cp-brand:hover .cp-brand__logo { transform: rotate(-6deg) scale(1.06); }
/* ภาษาไทยมีสระบน + วรรณยุกต์ซ้อนกันได้ 2 ชั้น และมีสระล่าง
   จึงต้องเผื่อ line-height มากกว่าภาษาอังกฤษ ไม่งั้นตัวหนังสือจะดูอัดกัน */
.cp-brand__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding-block: 2px;
}
.cp-brand__th {
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.42;
	color: var(--cp-ink);
}
.cp-brand__en {
	font-family: var(--cp-font-ui);
	font-size: .74rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--cp-muted);
	text-transform: uppercase;
}
.cp-header.is-scrolled .cp-brand__logo { transform: scale(.9); }

.cp-header__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.cp-btn--login { padding: 10px 20px; border-radius: var(--cp-radius-sm); }

/* ------------------------------------------------- 7. Main navigation (desktop) */
.cp-nav { display: none; margin-inline: auto; }
@media (min-width: 1100px) { .cp-nav { display: block; } }

.cp-nav ul { list-style: none; margin: 0; padding: 0; }
.cp-nav__list { display: flex; align-items: center; gap: 4px; }

.cp-nav__item { position: relative; }

.cp-nav__link,
.cp-nav__heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-text);
	font-weight: 500;
	line-height: 1.65;
	white-space: nowrap;
	transition: color .25s var(--cp-ease), background-color .25s var(--cp-ease);
}

/* เส้นใต้ที่วิ่งจากกลางออกด้านข้าง */
.cp-nav > ul > .cp-nav__item > .cp-nav__link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2.5px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cp-ink-600), var(--cp-primary));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s var(--cp-ease);
}

.cp-nav > ul > .cp-nav__item > .cp-nav__link:hover::after,
.cp-nav > ul > .cp-nav__item.active > .cp-nav__link::after,
.cp-nav > ul > .cp-nav__item.current > .cp-nav__link::after { transform: scaleX(1); }

.cp-nav__link:hover { color: var(--cp-primary); background: var(--cp-primary-050); }
.cp-nav__item.active > .cp-nav__link,
.cp-nav__item.current > .cp-nav__link { color: var(--cp-primary); font-weight: 600; }

/* ตัวอักษรขยับขึ้นเล็กน้อยตอน hover */
.cp-nav__label { display: inline-block; transition: transform .3s var(--cp-ease); }
.cp-nav > ul > .cp-nav__item > .cp-nav__link:hover .cp-nav__label { transform: translateY(-1px); }

.cp-nav__chev {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s var(--cp-ease);
}
.cp-nav__item.is-open > .cp-nav__link .cp-nav__chev { transform: rotate(180deg); }
.cp-nav__toggle { display: none; }
.cp-nav__icon { display: inline-block; }

/* Dropdown panel */
.cp-nav__panel {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: 20;
	min-width: 268px;
	max-width: 340px;
	padding: 10px;
	background: rgba(255, 255, 255, .98);
	backdrop-filter: saturate(160%) blur(12px);
	border: 1px solid #e8eefa;
	border-radius: 16px;
	box-shadow: 0 22px 54px rgba(18, 53, 102, .18), 0 2px 6px rgba(18, 53, 102, .06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform-origin: top center;
	transition: opacity var(--cp-dur) var(--cp-ease),
	            transform var(--cp-dur) var(--cp-ease),
	            visibility 0s linear var(--cp-dur),
	            clip-path var(--cp-dur) var(--cp-ease);
}

/* ลูกศรชี้ขึ้น */
.cp-nav > ul > .cp-nav__item > .cp-nav__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	inset-inline-start: 26px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-inline-start: 1px solid var(--cp-line);
	border-block-start: 1px solid var(--cp-line);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.cp-nav__item.is-open > .cp-nav__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* --- ตัวเลือกแอนิเมชันเมนู (ตั้งค่าได้ในหน้า Template Options) --- */
body[data-menu-anim="slide"]   .cp-nav__panel { transform: translateY(14px); }
body[data-menu-anim="slide"]   .cp-nav__item.is-open > .cp-nav__panel { transform: translateY(0); }

body[data-menu-anim="fade"]    .cp-nav__panel { transform: none; }

body[data-menu-anim="flip"]    .cp-nav__panel { transform: perspective(900px) rotateX(-14deg) translateY(6px); }
body[data-menu-anim="flip"]    .cp-nav__item.is-open > .cp-nav__panel { transform: perspective(900px) rotateX(0) translateY(0); }

body[data-menu-anim="curtain"] .cp-nav__panel { clip-path: inset(0 0 100% 0); transform: translateY(6px); }
body[data-menu-anim="curtain"] .cp-nav__item.is-open > .cp-nav__panel { clip-path: inset(0 0 0 0); transform: translateY(0); }

/* รายการย่อย + สเต็ปเปอร์ (stagger) */
.cp-nav__sub > .cp-nav__item {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease);
	transition-delay: 0s;
}
.cp-nav__item.is-open > .cp-nav__panel > .cp-nav__sub > .cp-nav__item {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--cp-i, 1) * 45ms);
}

.cp-nav__sub .cp-nav__link {
	position: relative;
	justify-content: flex-start;
	text-align: start;
	gap: 10px;
	padding: 10px 12px 10px 20px;
	border-radius: 10px;
	font-weight: 500;
	line-height: 1.45;
	white-space: normal;
}

/* แถบไฮไลต์ซ้ายเป็น absolute จึงไม่ดันตัวหนังสือให้ขยับ */
.cp-nav__sub .cp-nav__link::before {
	content: "";
	position: absolute;
	inset-inline-start: 8px;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--cp-ink-600), var(--cp-primary));
	transform: translateY(-50%);
	transition: height .3s var(--cp-ease);
}
.cp-nav__sub .cp-nav__link:hover::before,
.cp-nav__sub .cp-nav__item.active > .cp-nav__link::before,
.cp-nav__sub .cp-nav__item.current > .cp-nav__link::before { height: calc(100% - 14px); }

.cp-nav__sub .cp-nav__label { flex: 1 1 auto; text-align: start; }
.cp-nav__sub .cp-nav__link:hover { background: var(--cp-primary-050); }
.cp-nav__sub .cp-nav__chev { flex: 0 0 auto; margin-inline-start: auto; transform: rotate(-90deg); opacity: .55; }
.cp-nav__sub .cp-nav__item.is-open > .cp-nav__link .cp-nav__chev { transform: rotate(-90deg); opacity: 1; }
.cp-nav__sub .cp-nav__heading {
	padding: 10px 12px 4px;
	color: var(--cp-muted);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ระดับที่ 3 ขึ้นไป – บานออกทางด้านข้าง */
.cp-nav__sub .cp-nav__panel {
	top: -9px;
	inset-inline-start: calc(100% + 6px);
	transform: translateX(-10px);
	clip-path: none;
}
.cp-nav__sub .cp-nav__panel::before { display: none; }
.cp-nav__sub .cp-nav__item.is-open > .cp-nav__panel { transform: translateX(0); }
.cp-nav__item.flip-side > .cp-nav__panel { inset-inline-start: auto; inset-inline-end: calc(100% + 6px); }

/* เมนูภาษาไทยยาว – บีบระยะห่างบนจอ 1100–1400px แทนการตัดบรรทัด */
.cp-nav { min-width: 0; }
.cp-nav__list { flex-wrap: nowrap; }

@media (min-width: 1100px) and (max-width: 1400px) {
	.cp-nav__link, .cp-nav__heading { padding: 10px 9px; font-size: .97rem; }
	.cp-nav > ul > .cp-nav__item > .cp-nav__link::after { left: 9px; right: 9px; }
	.cp-brand__en { display: none; }
}

@media (min-width: 1100px) and (max-width: 1240px) {
	.cp-btn--login span { display: none; }
	.cp-btn--login { padding: 10px 14px; }
}

/* ------------------------------------------------------------ 8. Hamburger */
.cp-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: var(--cp-primary-050);
	border: 0;
	border-radius: var(--cp-radius-sm);
	cursor: pointer;
}
@media (min-width: 1100px) { .cp-burger { display: none; } }

.cp-burger span {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: var(--cp-ink);
	transition: transform .35s var(--cp-ease), opacity .2s var(--cp-ease), width .35s var(--cp-ease);
}
.cp-burger span:nth-child(1) { width: 100%; }
.cp-burger span:nth-child(2) { width: 72%; }
.cp-burger span:nth-child(3) { width: 88%; }
.cp-burger:hover span:nth-child(2) { width: 100%; }
.cp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.cp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.cp-burger[aria-expanded="true"] span:nth-child(3) { width: 100%; transform: translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------- 9. Mobile drawer */
.cp-drawer { position: fixed; inset: 0; z-index: 1100; }
.cp-drawer[hidden] { display: none; }

.cp-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 28, 56, .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .35s var(--cp-ease);
}

.cp-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(400px, 88vw);
	padding: 16px 16px 28px;
	background: #fff;
	box-shadow: -20px 0 50px rgba(10, 28, 56, .22);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(102%);
	transition: transform .42s var(--cp-ease);
}

.cp-drawer.is-open .cp-drawer__scrim { opacity: 1; }
.cp-drawer.is-open .cp-drawer__panel { transform: translateX(0); }

.cp-drawer__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--cp-line); font-weight: 700; color: var(--cp-ink); }
.cp-drawer__close { margin-inline-start: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cp-primary-050); color: var(--cp-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform .3s var(--cp-ease-back), background-color .2s; }
.cp-drawer__close:hover { transform: rotate(90deg); background: #dbe7f9; }

.cp-drawer__body ul { list-style: none; margin: 0; padding: 0; }
.cp-drawer__body .cp-nav__list { display: block; }

.cp-drawer__body .cp-nav__item {
	border-bottom: 1px solid #f0f4fa;
	opacity: 0;
	transform: translateX(24px);
}
.cp-drawer.is-open .cp-drawer__body > .cp-nav__list > .cp-nav__item {
	animation: cp-slide-in .45s var(--cp-ease) forwards;
	animation-delay: calc(120ms + var(--cp-i, 0) * 55ms);
}
.cp-drawer__body .cp-nav__sub .cp-nav__item { opacity: 1; transform: none; }

@keyframes cp-slide-in {
	to { opacity: 1; transform: translateX(0); }
}

.cp-drawer__body .cp-nav__item { position: relative; }
.cp-drawer__body .cp-nav__link { padding: 12px 44px 12px 8px; font-size: 1.05rem; line-height: 1.6; }
.cp-drawer__body .cp-nav__link::after { display: none; }
.cp-drawer__body .cp-nav__link .cp-nav__chev { display: none; }

.cp-drawer__body .cp-nav__toggle {
	position: absolute;
	top: 4px;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.cp-drawer__body .cp-nav__toggle span,
.cp-drawer__body .cp-nav__toggle span::before {
	content: "";
	display: block;
	width: 13px;
	height: 2.4px;
	border-radius: 2px;
	background: var(--cp-ink-600);
	transition: transform .35s var(--cp-ease), opacity .25s;
}
.cp-drawer__body .cp-nav__toggle span::before { transform: rotate(90deg); }
.cp-drawer__body .cp-nav__toggle[aria-expanded="true"] span::before { transform: rotate(0); opacity: 0; }
.cp-drawer__body .cp-nav__toggle[aria-expanded="true"] { background: var(--cp-primary-050); }

/* accordion แบบ 0fr -> 1fr ลื่นกว่าการคำนวณ max-height */
.cp-drawer__body .cp-nav__panel {
	position: static;
	display: grid;
	grid-template-rows: 0fr;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	clip-path: none;
	transition: grid-template-rows .38s var(--cp-ease);
}
.cp-drawer__body .cp-nav__panel::before { display: none; }
.cp-drawer__body .cp-nav__panel > .cp-nav__sub { overflow: hidden; min-height: 0; }
.cp-drawer__body .cp-nav__item.is-open > .cp-nav__panel { grid-template-rows: 1fr; }
.cp-drawer__body .cp-nav__sub { margin-inline-start: 12px; border-inline-start: 2px solid var(--cp-primary-050); }
.cp-drawer__body .cp-nav__sub > .cp-nav__item { opacity: 1; transform: none; border-bottom: 0; }
.cp-drawer__body .cp-nav__sub .cp-nav__link { padding-block: 10px; font-size: 1rem; color: var(--cp-muted); }
.cp-drawer__body .cp-nav__sub .cp-nav__link::before { display: none; }

body.cp-locked { overflow: hidden; }

/* ------------------------------------------------------------ 10. Modules */
.cp-module { margin-bottom: var(--cp-gap); }
.cp-module--card {
	position: relative;
	overflow: hidden;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: 16px;
	box-shadow: var(--cp-shadow-sm);
	transition: box-shadow .4s var(--cp-ease), transform .4s var(--cp-ease);
}
.cp-module--card:hover { box-shadow: 0 16px 36px rgba(18, 53, 102, .10); transform: translateY(-2px); }
.cp-module__title { position: relative; margin-bottom: 16px; padding-bottom: 10px; font-size: 1.18rem; line-height: 1.5; }
.cp-module__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cp-ink-600), var(--cp-primary));
	transition: width .4s var(--cp-ease);
}
.cp-module--card:hover .cp-module__title::after { width: 76px; }

.cp-crumbs { background: var(--cp-sky); border-bottom: 1px solid var(--cp-line); font-size: .92rem; }
.cp-crumbs ol, .cp-crumbs ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 10px 0; }

/* ------------------------------------------------------------- 11. Footer */
.cp-footer {
	margin-top: 40px;
	background: linear-gradient(160deg, #17427e 0%, #123566 62%, #0f2c58 100%);
	color: rgba(255, 255, 255, .82);
	position: relative;
	overflow: hidden;
}
.cp-footer::before {
	content: "";
	position: absolute;
	top: -120px;
	inset-inline-end: -80px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(110, 168, 240, .22), transparent 68%);
	pointer-events: none;
}
.cp-footer a { color: rgba(255, 255, 255, .86); }
.cp-footer a:hover { color: #fff; }

.cp-footer__grid {
	position: relative;
	display: grid;
	gap: 28px;
	padding-block: clamp(32px, 4vw, 54px);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) { .cp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .cp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr .9fr; } }

.cp-brand--footer .cp-brand__th { color: #fff; }
.cp-brand--footer .cp-brand__en { color: rgba(255, 255, 255, .62); }
.cp-footer__tagline { margin-top: 14px; font-size: 1rem; color: rgba(255, 255, 255, .74); }

.cp-fmod__title { color: #fff; font-size: 1.06rem; line-height: 1.5; margin-bottom: 14px; }
.cp-fmod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cp-fmod li a { position: relative; display: inline-block; padding-inline-start: 14px; transition: transform .25s var(--cp-ease); }
.cp-fmod li a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6ea8f0;
	transition: transform .25s var(--cp-ease);
}
.cp-fmod li a:hover { transform: translateX(4px); }
.cp-fmod li a:hover::before { transform: scale(1.5); }

.cp-footer__bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .13); font-size: .93rem; }
.cp-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 14px; }
.cp-footer__bar p { margin: 0; }

/* ไอคอนโซเชียล (ใช้กับโมดูล Custom HTML ใน footer-4) */
.cp-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	transition: transform .35s var(--cp-ease-back), background-color .3s, border-color .3s;
}
.cp-social a:hover { transform: translateY(-4px) rotate(-6deg); background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .34); }
.cp-social svg { width: 21px; height: 21px; }

/* ------------------------------------------------------- 12. Back to top */
.cp-totop {
	position: fixed;
	inset-inline-end: 20px;
	bottom: 20px;
	z-index: 800;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--cp-primary);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(18px) scale(.85);
	pointer-events: none;
	box-shadow: var(--cp-shadow);
	transition: opacity .3s var(--cp-ease), transform .35s var(--cp-ease-back);
}
.cp-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cp-totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-totop:hover { background: var(--cp-primary-600); transform: translateY(-3px); }

/* -------------------------------------------------------- 13. Error pages */
.cp-errorpage { display: grid; place-items: center; min-height: 100vh; background: var(--cp-sky); }
.cp-error { width: min(640px, 92vw); padding: 40px; background: #fff; border-radius: 18px; box-shadow: var(--cp-shadow); text-align: center; }
.cp-error__code { font-family: var(--cp-font-num); font-size: 5rem; font-weight: 800; line-height: 1; color: var(--cp-primary-050); }
.cp-error__title { margin-top: -20px; }
.cp-error__msg { color: var(--cp-muted); }
.cp-error__trace { margin-top: 20px; padding: 14px; background: #f6f8fc; border-radius: 10px; font-size: .78rem; text-align: start; overflow: auto; }

/* ----------------------------------------------- 14. Utilities for editors */
.cp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--cp-ease), transform .7s var(--cp-ease); }
.cp-reveal.is-in { opacity: 1; transform: none; }

/* Joomla core bits ที่มักโผล่มาในหน้า component */
.tpl-cpitp .alert { padding: 14px 18px; border: 1px solid var(--cp-line); border-inline-start: 4px solid var(--cp-primary); border-radius: var(--cp-radius-sm); background: var(--cp-sky); margin-bottom: 18px; }
.tpl-cpitp .alert-danger { border-inline-start-color: #d64545; background: #fdf1f1; }
.tpl-cpitp .alert-success { border-inline-start-color: #2e9e6b; background: #f0faf5; }
.tpl-cpitp table { width: 100%; border-collapse: collapse; }
.tpl-cpitp table th, .tpl-cpitp table td { padding: 10px 12px; border-bottom: 1px solid var(--cp-line); text-align: start; }

/* --------------------------------------------------- 15. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.cp-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 16. Print */
@media print {
	.cp-header, .cp-footer, .cp-totop, .cp-drawer, .cp-topbar { display: none !important; }
	body.tpl-cpitp { font-size: 12pt; }
}

/* ==========================================================================
   17. ตัวเลือกจาก Template Options (v1.2)
   ========================================================================== */

/* ---- โลโก้ ---- */
.cp-brand__logo { height: var(--cp-logo-h, 52px); width: auto; }
.cp-brand__logo--dark,
.cp-brand__logo--mobile { display: none; }
@media (max-width: 640px) {
	.cp-brand__logo--mobile { display: block; }
	.cp-brand__logo--mobile ~ .cp-brand__logo,
	.cp-brand__logo:not(.cp-brand__logo--mobile):has(~ .cp-brand__logo--mobile) { display: none; }
}
.cp-brand--footer img { height: calc(var(--cp-logo-h, 52px) + 4px); width: auto; }

/* ---- น้ำหนักหัวข้อ ---- */
.tpl-cpitp h1, .tpl-cpitp h2, .tpl-cpitp h3 { font-weight: var(--cp-heading-weight, 800); }

/* ---- ส่วนหัวแบบเข้ม ---- */
body.head-dark .cp-header { background: var(--cp-ink); border-bottom-color: rgba(255, 255, 255, .12); }
body.head-dark .cp-header.is-scrolled { background: color-mix(in srgb, var(--cp-ink) 96%, #000); }
body.head-dark .cp-brand__th { color: #fff; }
body.head-dark .cp-brand__en { color: rgba(255, 255, 255, .6); }
body.head-dark .cp-nav__link,
body.head-dark .cp-nav__heading { color: rgba(255, 255, 255, .86); }
body.head-dark .cp-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
body.head-dark .cp-nav__item.active > .cp-nav__link { color: #fff; }
body.head-dark .cp-burger { background: rgba(255, 255, 255, .12); }
body.head-dark .cp-burger span { background: #fff; }

/* ---- ส่วนหัวโปร่งใส (ทับบนแบนเนอร์) ---- */
body.head-transparent .cp-header {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}
body.head-transparent .cp-header::before { opacity: .8; }
body.head-transparent .cp-header.is-scrolled {
	position: fixed;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 10px 30px rgba(18, 53, 102, .1);
	animation: cp-drop .4s var(--cp-ease);
}
@keyframes cp-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* ---- ตำแหน่งเมนู ---- */
body.hlayout-right .cp-nav { margin-inline-start: auto; margin-inline-end: 12px; }
body.hlayout-right .cp-header__actions { margin-inline-start: 0; }
body.hlayout-center .cp-nav { margin-inline: auto; }
@media (min-width: 1100px) {
	body.hlayout-split .cp-nav { margin-inline: auto; }
}

/* ---- รูปแบบตัวชี้เมนู ---- */
body.ind-none .cp-nav > ul > .cp-nav__item > .cp-nav__link::after { display: none; }
body.ind-pill .cp-nav > ul > .cp-nav__item > .cp-nav__link::after { display: none; }
body.ind-pill .cp-nav__item.active > .cp-nav__link,
body.ind-pill .cp-nav__item.current > .cp-nav__link {
	background: linear-gradient(135deg, var(--cp-ink), var(--cp-primary));
	color: #fff;
}
body.ind-pill.head-dark .cp-nav__item.active > .cp-nav__link { background: rgba(255, 255, 255, .18); }

/* ---- ส่วนท้ายแบบอื่น ---- */
body.foot-solid .cp-footer { background: var(--cp-ink); }
body.foot-light .cp-footer { background: var(--cp-sky); color: #40566f; }
body.foot-light .cp-footer::before { display: none; }
body.foot-light .cp-footer a,
body.foot-light .cp-brand--footer .cp-brand__th,
body.foot-light .cp-fmod__title { color: var(--cp-ink); }
body.foot-light .cp-footer__tagline,
body.foot-light .cp-footer__address { color: #5f7186; }
body.foot-light .cp-social a { background: #fff; border-color: var(--cp-line); color: var(--cp-primary); }
body.foot-light .cp-footer__bar { border-top-color: rgba(18, 53, 102, .12); }
.cp-footer__address { margin-top: 10px; font-size: .98rem; color: rgba(255, 255, 255, .7); }

/* ---- ปิดแอนิเมชันทั้งเว็บ ---- */
body.anim-off *,
body.anim-off *::before,
body.anim-off *::after {
	animation-duration: .001ms !important;
	transition-duration: .001ms !important;
}

/* ---- Preloader ---- */
.cp-preloader {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	background: #fff;
	transition: opacity .5s var(--cp-ease), visibility .5s;
}
.cp-preloader.is-done { opacity: 0; visibility: hidden; }
.cp-preloader__ring {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 4px solid var(--cp-primary-050);
	border-top-color: var(--cp-primary);
	animation: cp-spin .9s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ---- เครื่องมือช่วยการเข้าถึง ---- */
.cp-a11y { position: fixed; bottom: 84px; z-index: 850; }
.cp-a11y--right { inset-inline-end: 20px; }
.cp-a11y--left { inset-inline-start: 20px; }

.cp-a11y__toggle {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--cp-ink);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--cp-shadow);
	transition: transform .3s var(--cp-ease-back);
}
.cp-a11y__toggle:hover { transform: scale(1.08); }
.cp-a11y__toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.cp-a11y__panel {
	position: absolute;
	bottom: calc(100% + 10px);
	inset-inline-end: 0;
	width: 220px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow-lg);
}
.cp-a11y--left .cp-a11y__panel { inset-inline-end: auto; inset-inline-start: 0; }
.cp-a11y__panel[hidden] { display: none; }
.cp-a11y__title { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--cp-ink); }
.cp-a11y__row { display: flex; gap: 6px; margin-bottom: 8px; }
.cp-a11y__row button {
	flex: 1 1 auto;
	padding: 8px 6px;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-sm);
	background: #fff;
	font: inherit;
	font-size: .94rem;
	color: var(--cp-ink);
	cursor: pointer;
	transition: background-color .25s, transform .25s var(--cp-ease);
}
.cp-a11y__row button:hover { background: var(--cp-primary-050); transform: translateY(-2px); }
.cp-a11y__row button.is-on { background: var(--cp-ink); color: #fff; border-color: transparent; }

/* โหมดคอนทราสต์สูง */
body.cp-contrast { background: #000 !important; color: #fff !important; filter: none; }
body.cp-contrast .cp-header,
body.cp-contrast .cp-footer,
body.cp-contrast .cp-module--card,
body.cp-contrast .cp-drawer__panel { background: #000 !important; border-color: #ff0 !important; }
body.cp-contrast a,
body.cp-contrast h1, body.cp-contrast h2, body.cp-contrast h3, body.cp-contrast h4 { color: #ff0 !important; }
body.cp-contrast p, body.cp-contrast span, body.cp-contrast li { color: #fff !important; }
body.cp-underline a { text-decoration: underline !important; }

/* ---- แถบ PDPA ---- */
.cp-pdpa {
	position: fixed;
	inset-inline: 16px;
	bottom: 16px;
	z-index: 900;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	max-width: 900px;
	margin-inline: auto;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow-lg);
	transform: translateY(24px);
	opacity: 0;
	transition: opacity .4s var(--cp-ease), transform .4s var(--cp-ease);
}
.cp-pdpa[hidden] { display: none; }
.cp-pdpa.is-in { opacity: 1; transform: none; }
.cp-pdpa p { flex: 1 1 320px; margin: 0; font-size: .98rem; }

/* ==========================================================================
   18. ส่วนท้าย: จำนวนคอลัมน์ยืดหยุ่น + ชื่อหน่วยงานบรรทัดเดียว (v1.3)
   ========================================================================== */
.cp-footer__grid--1 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.cp-footer__grid--2 { grid-template-columns: 1.2fr 1fr; }
	.cp-footer__grid--3 { grid-template-columns: 1.3fr 1fr 1fr; }
	.cp-footer__grid--4 { grid-template-columns: 1.4fr 1fr 1fr .9fr; }
}
@media (min-width: 1050px) {
	.cp-footer__grid--2 { grid-template-columns: 1.4fr 1fr; }
	.cp-footer__grid--3 { grid-template-columns: 1.5fr 1fr 1fr; }
}

.cp-brand--footer { align-items: center; }
.cp-brand--footer .cp-brand__text { min-width: 0; }

/* ชื่อหน่วยงานยาว ๆ ให้อยู่บรรทัดเดียวบนจอกว้าง แล้วย่อขนาดตามพื้นที่แทนการตัดบรรทัด */
@media (min-width: 700px) {
	.cp-brand--footer .cp-brand__th,
	.cp-brand--footer .cp-brand__en { white-space: nowrap; }
	.cp-brand--footer .cp-brand__th { font-size: clamp(1.05rem, .78rem + .78vw, 1.42rem); }
	.cp-brand--footer .cp-brand__en { font-size: clamp(.66rem, .55rem + .3vw, .78rem); }
}

/* ==========================================================================
   19. เมนูจากโมดูลที่ยังไม่ได้เลือก layout "cpitp:cpitp"
   template.js จะเติมคลาสให้เอง แต่กันไว้อีกชั้นด้วย CSS
   ========================================================================== */
@media (min-width: 1100px) {
	.cp-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
	.cp-nav > ul > li { position: relative; }
	.cp-nav > ul > li > a,
	.cp-nav > ul > li > span {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 9px 14px;
		border-radius: var(--cp-radius-sm);
		color: var(--cp-text);
		font-weight: 500;
		line-height: 1.65;
		white-space: nowrap;
	}
}
.cp-nav ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   20. ฟอร์มและปุ่มของคอมโพเนนต์แกน Joomla (เข้าสู่ระบบ สมัครสมาชิก ฯลฯ)
   Joomla ไม่ได้โหลด Bootstrap ให้อัตโนมัติ เทมเพลตจึงต้องจัดสไตล์เอง
   ========================================================================== */
.tpl-cpitp input[type="text"],
.tpl-cpitp input[type="email"],
.tpl-cpitp input[type="password"],
.tpl-cpitp input[type="search"],
.tpl-cpitp input[type="tel"],
.tpl-cpitp input[type="url"],
.tpl-cpitp input[type="number"],
.tpl-cpitp input[type="date"],
.tpl-cpitp select,
.tpl-cpitp textarea,
.tpl-cpitp .form-control,
.tpl-cpitp .form-select {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-sm);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--cp-text);
	transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.tpl-cpitp select,
.tpl-cpitp .form-select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7186' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-inline-end: 38px;
}
.tpl-cpitp input:focus,
.tpl-cpitp select:focus,
.tpl-cpitp textarea:focus {
	outline: 0;
	border-color: var(--cp-primary);
	box-shadow: 0 0 0 4px rgba(29, 90, 181, .14);
}
.tpl-cpitp input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.tpl-cpitp textarea { min-height: 130px; resize: vertical; }

.tpl-cpitp .btn,
.tpl-cpitp button[type="submit"],
.tpl-cpitp input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--cp-radius-sm);
	background: var(--cp-primary-050);
	color: var(--cp-primary);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: transform .22s var(--cp-ease), box-shadow .22s var(--cp-ease), background-color .22s;
}
.tpl-cpitp .btn:hover,
.tpl-cpitp button[type="submit"]:hover,
.tpl-cpitp input[type="submit"]:hover { transform: translateY(-2px); }

.tpl-cpitp .btn-primary,
.tpl-cpitp button[type="submit"],
.tpl-cpitp input[type="submit"] {
	background: linear-gradient(135deg, var(--cp-ink), var(--cp-primary));
	color: #fff;
	box-shadow: 0 10px 22px rgba(29, 90, 181, .24);
}
.tpl-cpitp .btn-primary:hover,
.tpl-cpitp button[type="submit"]:hover { box-shadow: 0 16px 30px rgba(29, 90, 181, .32); color: #fff; }
.tpl-cpitp .btn-secondary { background: #fff; color: var(--cp-ink); border-color: var(--cp-line); box-shadow: none; }
.tpl-cpitp .btn-secondary:hover { background: var(--cp-primary-050); }

.tpl-cpitp .control-group { margin-bottom: 18px; }
.tpl-cpitp .control-label { margin-bottom: 6px; }
.tpl-cpitp .control-label label,
.tpl-cpitp .form-label { display: inline-block; font-weight: 600; color: var(--cp-ink); }
.tpl-cpitp .form-check,
.tpl-cpitp .control-group .checkbox { display: flex; align-items: center; gap: 9px; }
.tpl-cpitp input[type="checkbox"],
.tpl-cpitp input[type="radio"] { width: 19px; height: 19px; accent-color: var(--cp-primary); flex: 0 0 auto; }
.tpl-cpitp .form-text,
.tpl-cpitp .small { font-size: .92rem; color: var(--cp-muted); }
.tpl-cpitp .invalid { border-color: #d64545 !important; }
.tpl-cpitp .required label::after,
.tpl-cpitp label.required::after { content: " *"; color: #d64545; }

/* ---- กล่องฟอร์มของ com_users ---- */
.tpl-cpitp .com-users-login,
.tpl-cpitp .com-users-logout,
.tpl-cpitp .com-users-remind,
.tpl-cpitp .com-users-reset,
.tpl-cpitp .com-users-registration,
.tpl-cpitp .com-users-profile {
	width: min(100%, 560px);
	margin: clamp(24px, 4vw, 56px) auto;
	padding: clamp(24px, 3vw, 40px);
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(18, 53, 102, .09);
}
.tpl-cpitp .com-users-registration,
.tpl-cpitp .com-users-profile { width: min(100%, 820px); }

/* ไอคอนวงกลมด้านบนของกล่องเข้าสู่ระบบ */
.tpl-cpitp .com-users-login::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 22px;
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M4.5 20c1.4-4 4.2-6 7.5-6s6.1 2 7.5 6'/%3E%3C/svg%3E")
		center / 32px 32px no-repeat,
		linear-gradient(135deg, var(--cp-ink), var(--cp-primary));
	box-shadow: 0 14px 28px rgba(29, 90, 181, .28);
}

.tpl-cpitp .com-users-login h1,
.tpl-cpitp .com-users-login h2,
.tpl-cpitp .com-users-registration h1,
.tpl-cpitp .com-users-reset h1,
.tpl-cpitp .com-users-remind h1 { margin-bottom: 22px; text-align: center; font-size: 1.6rem; }

.tpl-cpitp .com-users-login fieldset,
.tpl-cpitp .com-users-registration fieldset { border: 0; margin: 0; padding: 0; }
.tpl-cpitp .com-users-login legend,
.tpl-cpitp .com-users-registration legend {
	width: 100%;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cp-line);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--cp-ink);
}

.tpl-cpitp .com-users-login__submit .btn,
.tpl-cpitp .com-users-login button[type="submit"] { width: 100%; padding-block: 14px; font-size: 1.06rem; }

/* ปุ่มทางเลือก เช่น passkey ที่ปลั๊กอินแทรกเข้ามา */
.tpl-cpitp .com-users-login img,
.tpl-cpitp .mod-login img { width: 22px; height: 22px; object-fit: contain; }
.tpl-cpitp .com-users-login button:not([type="submit"]),
.tpl-cpitp .mod-login button:not([type="submit"]) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 12px 18px;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-sm);
	background: #fff;
	font: inherit;
	font-weight: 600;
	color: var(--cp-ink);
	cursor: pointer;
	transition: background-color .25s, transform .25s var(--cp-ease);
}
.tpl-cpitp .com-users-login button:not([type="submit"]):hover,
.tpl-cpitp .mod-login button:not([type="submit"]):hover { background: var(--cp-primary-050); transform: translateY(-2px); }

/* แถวลิงก์ลืมรหัสผ่าน */
.tpl-cpitp .com-users-login__options,
.tpl-cpitp .com-users-login ul.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: center;
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--cp-line);
	font-size: .98rem;
}

/* โมดูลเข้าสู่ระบบ (mod_login) */
.tpl-cpitp .mod-login { display: grid; gap: 12px; }
.tpl-cpitp .mod-login__options { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; }
.tpl-cpitp .mod-login__options ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }

/* ตารางและการแบ่งหน้าของคอมโพเนนต์แกน */
.tpl-cpitp .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0 0; justify-content: center; }
.tpl-cpitp .pagination .page-link {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--cp-line);
	border-radius: 10px;
	color: var(--cp-ink);
	text-decoration: none;
}
.tpl-cpitp .pagination .active .page-link { background: linear-gradient(135deg, var(--cp-ink), var(--cp-primary)); color: #fff; border-color: transparent; }

/* ==========================================================================
   21. พื้นที่เนื้อหาของคอมโพเนนต์ (v1.3.3)
   com_content, Guru Pro และคอมโพเนนต์อื่นไม่ได้ห่อด้วยคอนเทนเนอร์มาก่อน
   ตัวหนังสือจึงชิดขอบจอ ส่วนหน้าที่สร้างด้วย SP Page Builder ต้องเต็มความกว้างเหมือนเดิม
   ========================================================================== */
body.cw-always .cp-shell:not(.cp-shell--sidebars) > .cp-content,
body.cw-auto:not(.option-com_sppagebuilder) .cp-shell:not(.cp-shell--sidebars) > .cp-content {
	width: min(100% - 32px, var(--cp-container));
	margin-inline: auto;
	padding-block: clamp(24px, 3vw, 48px);
}

@media (min-width: 768px) {
	body.cw-always .cp-shell:not(.cp-shell--sidebars) > .cp-content,
	body.cw-auto:not(.option-com_sppagebuilder) .cp-shell:not(.cp-shell--sidebars) > .cp-content {
		width: min(100% - 64px, var(--cp-container));
	}
}

/* เนื้อหาบทความ */
.tpl-cpitp .item-page,
.tpl-cpitp .com-content-article,
.tpl-cpitp .blog,
.tpl-cpitp .com-content-category-blog { max-width: 100%; }

.tpl-cpitp .page-header h1,
.tpl-cpitp .item-page h1,
.tpl-cpitp .item-page h2 { margin-bottom: .55em; }

.tpl-cpitp .article-info {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 0 26px;
	padding: 12px 18px;
	list-style: none;
	background: var(--cp-sky);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	font-size: .95rem;
	color: var(--cp-muted);
}
.tpl-cpitp .article-info dt.article-info-term { display: none; }
.tpl-cpitp .article-info dd { margin: 0; }

.tpl-cpitp .item-page p { margin-bottom: 1.15em; }
.tpl-cpitp .item-page img,
.tpl-cpitp .com-content-article img { max-width: 100%; height: auto; border-radius: var(--cp-radius); }
.tpl-cpitp figure { margin: 0 0 1.4em; }
.tpl-cpitp .item-page blockquote {
	margin: 0 0 1.4em;
	padding: 14px 20px;
	border-inline-start: 4px solid var(--cp-primary);
	border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
	background: var(--cp-sky);
}
.tpl-cpitp .item-page ul,
.tpl-cpitp .item-page ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.tpl-cpitp .item-page li { margin-bottom: .35em; }

.tpl-cpitp .pagenavigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--cp-line);
	list-style: none;
}

/* ตารางกว้าง ๆ ของ Guru Pro ให้เลื่อนแนวนอนแทนการดันหน้าเว็บ */
body.cw-auto .cp-content table,
body.cw-always .cp-content table { max-width: 100%; }
.tpl-cpitp .cp-content { overflow-wrap: break-word; }

/* ==========================================================================
   22. เมนูย่อย: กันเมนูหด + เปิดได้แม้ JavaScript ไม่ทำงาน (v1.3.3)
   ========================================================================== */

/* เมนูที่มีลูกศรกว้างกว่าเพื่อน เดิมจึงถูกบีบก่อนตัวอื่นเมื่อพื้นที่ไม่พอ */
.cp-nav__list > .cp-nav__item,
.cp-nav > ul > li { flex: 0 0 auto; }
.cp-nav__link,
.cp-nav__heading { flex-shrink: 0; }
.cp-nav__label { white-space: nowrap; }

/* สะพานเชื่อมช่องว่าง 10px ระหว่างเมนูกับแผงย่อย ไม่ให้เมาส์หลุดแล้วแผงปิด */
.cp-nav > ul > .cp-nav__item.has-children > .cp-nav__panel::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -14px;
	height: 14px;
}

/* เปิดด้วย CSS ล้วนเป็นทางสำรอง เผื่อ JavaScript ไม่ได้เติมคลาส is-open */
@media (min-width: 1100px) {
	.cp-nav__item.has-children:hover > .cp-nav__panel,
	.cp-nav__item.has-children:focus-within > .cp-nav__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		clip-path: none;
		transition-delay: 0s;
	}
	.cp-nav__item.has-children:hover > .cp-nav__panel .cp-nav__sub > .cp-nav__item,
	.cp-nav__item.has-children:focus-within > .cp-nav__panel .cp-nav__sub > .cp-nav__item {
		opacity: 1;
		transform: none;
	}
}

/* เลือกด้วย descendant เพื่อให้ทนต่อความต่างของมาร์กอัปจากโมดูลแต่ละแบบ */
.cp-nav__item.is-open > .cp-nav__panel .cp-nav__sub > .cp-nav__item { opacity: 1; transform: none; }

/* แผงที่ไม่มีรายการอยู่จริง ไม่ต้องแสดงกล่องเปล่า */
.cp-nav__panel:empty { display: none; }

/* ==========================================================================
   23. แก้เมนูย่อยไม่แสดงเมื่อโมดูลใช้ layout มาตรฐานของ Joomla (v1.3.4)

   Joomla 5 ขึ้นไปเปลี่ยนมาร์กอัปของ mod_menu ใหม่ เมนูที่เป็นหัวข้อ (Heading)
   จะถูกเรนเดอร์เป็น <button class="mod-menu__toggle-sub"> และรายการย่อยจะได้
   aria-hidden="true" ติดมาด้วย โดยไฟล์ mod-menu.css ของแกนสั่งซ่อนไว้ด้วย display:none
   ผลคือแผงของเทมเพลตกางออกมาแล้ว แต่ข้างในว่างเปล่าเพราะ ul ถูกซ่อนอยู่

   ที่นี่จึงยกเลิกการซ่อนนั้น แล้วให้ template.js เป็นคนคุมสถานะ aria แทน
   ========================================================================== */
.cp-nav .cp-nav__sub[aria-hidden="true"],
.cp-nav .mod-menu__sub[aria-hidden="true"],
.cp-drawer .cp-nav__sub[aria-hidden="true"],
.cp-drawer .mod-menu__sub[aria-hidden="true"] {
	display: block !important;
	visibility: visible !important;
}

/* ลูกศรของแกนซ้ำกับลูกศรของเทมเพลต จึงซ่อนของแกนไว้ */
.cp-nav .icon-chevron-down,
.cp-nav .icon-chevron-up,
.cp-drawer .icon-chevron-down,
.cp-drawer .icon-chevron-up { display: none !important; }

/* เมนูหัวข้อที่แกนเรนเดอร์เป็น <button> ให้หน้าตาเหมือนเมนูปกติ */
.cp-nav button.cp-nav__heading,
.cp-nav button.mod-menu__toggle-sub,
.cp-drawer button.cp-nav__heading,
.cp-drawer button.mod-menu__toggle-sub {
	appearance: none;
	width: auto;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.cp-nav button.cp-nav__heading:hover { background: var(--cp-primary-050); color: var(--cp-primary); }
.cp-nav button.cp-nav__heading .cp-nav__label { display: inline-flex; align-items: center; gap: 6px; }

/* ในลิ้นชักมือถือ ปุ่มหัวข้อกินความกว้างเต็มแถว */
.cp-drawer__body button.cp-nav__heading { width: 100%; padding: 12px 44px 12px 8px; }

/* ==========================================================================
   24. ความกว้างของแผงเมนูย่อย (v1.3.5)
   เดิมตรึงไว้ที่ 268-340px ทำให้เมนูย่อยชื่อยาวล้นออกนอกกล่องขาว
   เปลี่ยนมาให้กล่องกว้างตามข้อความที่ยาวที่สุดพอดี และใช้กับเมนูย่อยทุกชั้น
   ========================================================================== */
.cp-nav__panel {
	width: max-content;
	min-width: 220px;
	max-width: min(520px, 92vw);
}

/* width: max-content ทำให้กล่องกว้างเท่าข้อความที่ยาวที่สุดอยู่แล้ว
   จึงต้องปล่อยให้ข้อความตัดบรรทัดได้ ไม่งั้นพอชนความกว้างสูงสุด
   ตัวหนังสือจะทะลุออกนอกกล่องแทนที่จะขึ้นบรรทัดใหม่ */
.cp-nav__sub .cp-nav__link,
.cp-nav__sub .cp-nav__heading,
.cp-nav__sub .cp-nav__link .cp-nav__label,
.cp-nav__sub .cp-nav__heading .cp-nav__label {
	white-space: normal;
	overflow-wrap: break-word;
}

/* เมนูย่อยชั้นที่ 3 ขึ้นไปใช้กติกาเดียวกัน */
.cp-nav__sub .cp-nav__panel {
	width: max-content;
	min-width: 200px;
	max-width: min(520px, 88vw);
}

/* ในลิ้นชักมือถือแผงเป็นแบบพับลง จึงต้องกว้างเต็มแถวเหมือนเดิม */
.cp-drawer__body .cp-nav__panel {
	width: auto;
	min-width: 0;
	max-width: none;
}
.cp-drawer__body .cp-nav__sub .cp-nav__link,
.cp-drawer__body .cp-nav__sub .cp-nav__link .cp-nav__label { white-space: normal; }

/* เมนูหลักชื่อยาวมากอาจล้นไปทับปุ่มเข้าสู่ระบบ จึงจำกัดความกว้างและตัดด้วยจุดไข่ปลา
   (แนะนำให้ตั้งชื่อเมนูให้สั้นลงจะสวยกว่า เช่น "รุ่นที่ 17/2568") */
@media (min-width: 1100px) {
	.cp-nav > ul > .cp-nav__item > .cp-nav__link > .cp-nav__label,
	.cp-nav > ul > .cp-nav__item > .cp-nav__heading > .cp-nav__label {
		display: inline-block;
		max-width: 26ch;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: bottom;
	}
}

/* ==========================================================================
   25. เก็บรายละเอียดเมนูย่อยหลายบรรทัด (v1.3.6)
   ========================================================================== */

/* ข้อความหลายบรรทัดควรชิดบนของแถว ไม่ใช่กึ่งกลาง และแถบไฮไลต์ซ้ายต้องยาวตามความสูงจริง */
.cp-nav__sub .cp-nav__link,
.cp-nav__sub .cp-nav__heading { align-items: flex-start; }
.cp-nav__sub .cp-nav__link .cp-nav__chev { margin-top: 3px; }

/* ลูกศรของเมนูที่มีลูกต่อ ต้องไม่ถูกบีบจนหายไปเมื่อข้อความยาว */
.cp-nav__sub .cp-nav__chev { flex: 0 0 auto; }

/* พื้นหลังตอนชี้เมาส์คลุมเต็มความกว้างของกล่องพอดี ไม่ล้นและไม่ขาด */
.cp-nav__panel > .cp-nav__sub { display: block; width: 100%; }
.cp-nav__sub > .cp-nav__item { display: block; }
.cp-nav__sub .cp-nav__link,
.cp-nav__sub .cp-nav__heading { width: 100%; }

/* ==========================================================================
   26. กล่องผู้ใช้เมื่อเข้าสู่ระบบแล้ว (v1.4.0)
   ========================================================================== */
.cp-user { position: relative; }

.cp-user__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 7px;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-pill);
	background: #fff;
	font: inherit;
	font-weight: 600;
	color: var(--cp-ink);
	cursor: pointer;
	transition: background-color .25s, border-color .25s, transform .25s var(--cp-ease), box-shadow .25s;
}
.cp-user__btn:hover { background: var(--cp-primary-050); border-color: #cfe0f7; transform: translateY(-1px); }
.cp-user__btn[aria-expanded="true"] { background: var(--cp-primary-050); box-shadow: 0 0 0 4px rgba(29, 90, 181, .12); }

.cp-user__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--cp-ink), var(--cp-primary));
	color: #fff;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1;
}
.cp-user__name {
	max-width: 15ch;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media (max-width: 1240px) { .cp-user__name { display: none; } }

.cp-user__chev {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .3s var(--cp-ease);
}
.cp-user__btn[aria-expanded="true"] .cp-user__chev { transform: rotate(180deg); }

.cp-user__panel {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: 30;
	width: max-content;
	min-width: 230px;
	max-width: min(320px, 90vw);
	padding: 10px;
	background: rgba(255, 255, 255, .98);
	backdrop-filter: saturate(160%) blur(12px);
	border: 1px solid #e8eefa;
	border-radius: 16px;
	box-shadow: 0 22px 54px rgba(18, 53, 102, .18);
	animation: cp-user-in .28s var(--cp-ease);
}
.cp-user__panel[hidden] { display: none; }

@keyframes cp-user-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.cp-user__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	inset-inline-end: 22px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-inline-start: 1px solid #e8eefa;
	border-block-start: 1px solid #e8eefa;
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.cp-user__hello {
	margin: 0 0 8px;
	padding: 6px 12px 10px;
	border-bottom: 1px solid var(--cp-line);
	font-size: .92rem;
	line-height: 1.5;
	color: var(--cp-muted);
}
.cp-user__hello b { display: block; font-size: 1.02rem; color: var(--cp-ink); }

.cp-user__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--cp-text);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .25s, color .25s;
}
.cp-user__link svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cp-user__link:hover { background: var(--cp-primary-050); color: var(--cp-primary); }
.cp-user__link--out { margin-top: 4px; border-top: 1px solid var(--cp-line); border-radius: 0 0 10px 10px; color: #c0392b; }
.cp-user__link--out:hover { background: #fdeaea; color: #c0392b; }

/* ปุ่มออกจากระบบแบบเดี่ยว */
.cp-btn--logout { background: linear-gradient(135deg, #7a2f2f, #c0392b); }
.cp-btn--logout:hover { box-shadow: 0 10px 22px rgba(192, 57, 43, .3); }

/* ในลิ้นชักมือถือ */
.cp-drawer__user {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px;
	border-radius: var(--cp-radius);
	background: var(--cp-sky);
	font-weight: 600;
	color: var(--cp-ink);
}

/* ส่วนหัวสีเข้ม */
body.head-dark .cp-user__btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
body.head-dark .cp-user__btn:hover { background: rgba(255, 255, 255, .18); }