/* ==========================================================================
   CLLI UI — design tokens + 3D ใช้ร่วมทุกส่วน (crud · website · ระบบจองห้อง)
   โหลดเป็นไฟล์สุดท้ายใน header ทุกตัว; คู่กับ assets/js/clli-tilt.js
   สีแบรนด์มาจากโลโก้ CLLI: ฟ้า #218bc3 · เขียวอมฟ้า #3e9aa1 · เขียว #76ad59
   ========================================================================== */
:root {
	--clli-blue: #1d84c6;
	--clli-teal: #1f9e9a;
	--clli-green: #5eae3f;
	--clli-ink: #12233a;
	--clli-line: #e3e9f2;

	/* ไล่สีหลัก (สดขึ้นจากสีโลโก้เล็กน้อย) / -deep สำหรับพื้นที่มีตัวอักษรขาว / -soft สำหรับพื้นอ่อน */
	--clli-grad: linear-gradient(135deg, #1e8fd8 0%, #12a7b5 45%, #1fb57e 75%, #6cbf3f 100%);
	--clli-grad-deep: linear-gradient(135deg, #0f5f99 0%, #0f7f8c 50%, #18805a 100%);
	--clli-grad-soft: linear-gradient(135deg, rgba(30, 143, 216, .10), rgba(108, 191, 63, .10));
	--clli-ring: 0 0 0 3px rgba(30, 143, 216, .25);

	/* ทับตัวแปรของสกินเดิม ให้ทุกกฎที่อ้างอยู่เปลี่ยนตาม */
	--ca-grad: var(--clli-grad);
}

/* ---------- พื้นฐาน ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--clli-blue);
	outline-offset: 2px;
	box-shadow: var(--clli-ring);
}
::selection { background: rgba(30, 143, 216, .16); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 3D: การ์ดเอียงตามเมาส์ ----------
   ปกติแบนเหมือนเดิม จะเอียงเฉพาะตอนเมาส์อยู่บน (.is-tilting)
   ใช้ !important ตอนเอียงเพราะการ์ดหลายแบบมี :hover transform ของตัวเองที่จะทับการเอียง */
.ui-tilt { will-change: transform; }
.ui-tilt.is-tilting {
	transform: perspective(1200px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
	transition: transform .08s linear, box-shadow .3s ease !important;
	box-shadow: calc(var(--ry, 0deg) * -2) calc(var(--rx, 0deg) * 2 + 18px) 40px rgba(18, 120, 160, .22) !important;
	z-index: 2;
}
.ui-glare {
	position: absolute !important; inset: 0;
	z-index: 5 !important; /* การ์ดบางแบบตั้ง > * { position:relative; z-index:1 } */
	border-radius: inherit;
	background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .34), transparent 55%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.ui-tilt.is-tilting > .ui-glare { opacity: 1; }

/* ---------- 3D: ปุ่มนูน กดแล้วยุบ ---------- */
.btn-primary:not(.btn-sm):not(.btn-xs),
.btn-success:not(.btn-sm):not(.btn-xs),
.btn-info:not(.btn-sm):not(.btn-xs),
.button.button-3d-ui {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(10, 70, 90, .45), 0 8px 16px rgba(18, 167, 181, .22) !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .2s ease !important;
}
.btn-primary:not(.btn-sm):not(.btn-xs):active,
.btn-success:not(.btn-sm):not(.btn-xs):active,
.btn-info:not(.btn-sm):not(.btn-xs):active {
	transform: translateY(2px) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(10, 70, 90, .45), 0 3px 8px rgba(18, 167, 181, .2) !important;
}

/* ไอคอนในกล่องเป็นก้อนนูน */
.cw-card-icon,
.dash-card .icon-wrap,
.feature-box .fbox-icon i {
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 12px rgba(18, 120, 160, .22);
}

/* ---------- แอดมิน: แบนเนอร์ต้อนรับ ---------- */
.dash-welcome { background: var(--clli-grad-deep), linear-gradient(135deg, #1b7ea8, #5da24c) !important; }

/* ==========================================================================
   เว็บไซต์ (body.stretched) — ตกแต่งหน้าแรกและหน้าทั่วไป
   ========================================================================== */

/* แถบหัวข้อส่วน (div 4px ข้างหัวข้อ ใช้ซ้ำหลายคอมโพเนนต์) → ไล่สีแบรนด์ + เรืองแสง */
body.stretched div[style*="width:4px; height:36px"] {
	width: 6px !important;
	background: var(--clli-grad) !important;
	box-shadow: 0 4px 12px rgba(18, 167, 181, .45);
}
body.stretched .news-section-title,
body.stretched .cw-section h2 { letter-spacing: -.01em; }
body.stretched .news-section-title i {
	background: var(--clli-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* หัวข้อแนะนำสถาบัน: ขีดไล่สีใต้ชื่อ + ป้ายแบบกระจก */
.home-intro-title { position: relative; padding-bottom: 16px; }
.home-intro-title::after {
	content: "";
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 84px; height: 5px; border-radius: 50rem;
	background: linear-gradient(90deg, #7fd3ff, #8be28f);
}
.home-tag { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255, 255, 255, .16); }

/* ลายตกแต่งส่วนต่าง ๆ: จุดมุมขวาบน + แสงฟุ้งมุมซ้ายล่าง */
body.stretched .news-section,
body.stretched .cw-section { position: relative; overflow: hidden; }
body.stretched .news-section::before,
body.stretched .cw-section::before {
	content: "";
	position: absolute; top: 24px; right: 4%;
	width: 170px; height: 170px;
	background-image: radial-gradient(rgba(30, 143, 216, .26) 1.6px, transparent 1.7px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
	mask-image: linear-gradient(225deg, #000, transparent 75%);
	pointer-events: none;
}
body.stretched .news-section::after,
body.stretched .cw-section::after {
	content: "";
	position: absolute; left: -140px; bottom: -160px;
	width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 191, 63, .14), transparent 68%);
	pointer-events: none;
}
body.stretched .news-section > .container,
body.stretched .cw-section > .container { position: relative; z-index: 1; }

/* การ์ดข่าว: รูปที่ไม่มี/โหลดไม่ขึ้นเป็นพื้นไล่สีอ่อนแทนเทา + กรอบไล่สีบาง */
body.stretched .news-img { background-color: #e8f4fb; background-image: var(--clli-grad-soft); }
body.stretched .news-card {
	border: 2px solid transparent !important;
	background: linear-gradient(#fff, #fff) padding-box, var(--clli-grad) border-box;
}

/* การ์ดเว็บไซต์หน่วยงาน: เงาโทนแบรนด์ */
body.stretched .cw-card { box-shadow: 0 14px 34px rgba(18, 120, 160, .18); }

/* วิดีโอ: กรอบเรืองไล่สี */
body.stretched .vs__frame {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .06), 0 24px 60px rgba(15, 95, 153, .28);
	border-radius: 22px;
}

/* ปุ่มสมัครในส่วน Up-Skill: ปุ่มขาวนูน */
.home-cta-3d {
	color: #0f6f86 !important;
	background: #fff !important;
	font-weight: 700;
	border: 0 !important;
	border-radius: 14px;
	box-shadow: inset 0 2px 0 #fff, 0 5px 0 rgba(8, 60, 90, .45), 0 14px 26px rgba(4, 40, 60, .3) !important;
	transition: transform .12s ease, box-shadow .12s ease !important;
}
.home-cta-3d:hover { transform: translateY(-2px); }
.home-cta-3d:active { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 rgba(8, 60, 90, .45), 0 6px 12px rgba(4, 40, 60, .25) !important; }

/* ฟุตเตอร์: เส้นไล่สีด้านบน */
body.stretched #footer { position: relative; }
body.stretched #footer::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 4px;
	background: var(--clli-grad);
	z-index: 2;
}

/* ==========================================================================
   แอดมิน — การ์ดสถิติ/เมนูลัดในแดชบอร์ด (.dash-card.c1–c6) เป็นเฉดในตระกูลฟ้า-เขียว
   เดิมมีส้ม/ชมพู/น้ำตาล ไม่เข้ากับแบรนด์ (custom2.css) — ยังแยกสีกันได้ แต่อยู่ในโทนเดียว
   ========================================================================== */
.dash-card.c1 { background: linear-gradient(135deg, #2b9be6 0%, #0f5f99 100%); }
.dash-card.c2 { background: linear-gradient(135deg, #16b3c0 0%, #0c6e7f 100%); }
.dash-card.c3 { background: linear-gradient(135deg, #22c08a 0%, #0d7350 100%); }
.dash-card.c4 { background: linear-gradient(135deg, #78c94a 0%, #3b7a1f 100%); }
.dash-card.c5 { background: linear-gradient(135deg, #1e8fd8 0%, #12a7b5 55%, #1fb57e 100%); }
.dash-card.c6 { background: linear-gradient(135deg, #12a7b5 0%, #1fb57e 60%, #6cbf3f 100%); }
.dash-card.c1::before, .dash-card.c2::before, .dash-card.c3::before,
.dash-card.c4::before, .dash-card.c5::before, .dash-card.c6::before { background: rgba(0, 20, 40, .14); }
.dash-card { box-shadow: 0 10px 26px rgba(15, 95, 153, .18); }

/* หัวข้อส่วนในแดชบอร์ด: แถบไล่สี */
.dash-section-title i {
	background: var(--clli-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}