/* หน้า /kathin/ (กฐินสัมฤทธิ์เด็กดี V-Star) — pages/events/kathin/kathin/index.html, ทุกอย่างอยู่ใต้ #kathin.kt
   สีและฟอนต์ตามหน้าแรก: Prompt, น้ำเงิน #0c71c3 / #2ea3f2, พื้นฟ้าอ่อน #f3f8fd · ทองแทนผ้ากฐิน
   หน้าโหลดไฟล์นี้เป็น kathin.css?v=<8 ตัวแรกของ sha1> — Cloudflare แคช /assets/* 4 ชั่วโมง แก้แล้วต้องเปลี่ยน ?v= ด้วย
   (node -p "require('crypto').createHash('sha1').update(require('fs').readFileSync('assets/css/kathin.css','utf8').replace(/\r\n/g,'\n')).digest('hex').slice(0,8)") */

#kathin {
	--kt-blue: #0c71c3;
	--kt-blue-2: #2ea3f2;
	--kt-navy: #0a2f5c;
	--kt-sky: #f3f8fd;
	--kt-sky-2: #e6f1fc;
	--kt-gold: #e9a21b;
	--kt-gold-soft: #fff5df;
	--kt-red: #d63a2f;
	--kt-ink: #1f2d3d;
	--kt-muted: #4a5868;
	--kt-line: #e2ebf5;
	--kt-radius: 20px;
	--kt-shadow: 0 12px 32px rgba(12, 60, 120, .08);
	--kt-shadow-hover: 0 18px 40px rgba(12, 60, 120, .16);
	font-family: Prompt, Helvetica, Arial, sans-serif;
	font-size: 18.5px;
	line-height: 1.8;
	color: var(--kt-ink);
	overflow: hidden;
	overflow: clip; /* hidden ยังเลื่อนด้วย scrollIntoView/ลิงก์ # ได้ — clip ไม่ได้ */
}
#kathin *, #kathin *::before, #kathin *::after { box-sizing: border-box; }
#kathin h1, #kathin h2, #kathin h3, #kathin h4, #kathin p { margin: 0; padding: 0; font-family: inherit; color: inherit; }
#kathin p + p { margin-top: 1em; }
#kathin img { display: block; max-width: 100%; height: auto; }
#kathin a { text-decoration: none; }
#kathin section[id] { scroll-margin-top: 96px; }

.kt-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kt-section { padding: 88px 0; }
.kt-section--sky { background: var(--kt-sky); }

/* ---------- ปุ่ม ---------- */
#kathin .kt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .7em 1.5em; border-radius: 999px; border: 2px solid transparent;
	font-size: 17px; font-weight: 500; line-height: 1.3;
	transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
#kathin .kt-btn svg { width: 1.15em; height: 1.15em; flex: none; }
#kathin .kt-btn:hover { transform: translateY(-2px); }
#kathin .kt-btn--primary { background: var(--kt-blue); color: #fff; box-shadow: 0 8px 20px rgba(12, 113, 195, .3); }
#kathin .kt-btn--primary:hover { background: #0a62a9; box-shadow: 0 12px 26px rgba(12, 113, 195, .38); }
#kathin .kt-btn--ghost { border-color: var(--kt-blue-2); color: var(--kt-blue); background: rgba(255, 255, 255, .7); }
#kathin .kt-btn--ghost:hover { background: var(--kt-blue-2); color: #fff; }
#kathin .kt-btn--gold { background: var(--kt-gold); color: #fff; box-shadow: 0 8px 20px rgba(233, 162, 27, .32); }
#kathin .kt-btn--gold:hover { background: #d48f0c; }
#kathin .kt-btn:focus-visible, #kathin a:focus-visible, #kathin button:focus-visible { outline: 3px solid var(--kt-blue-2); outline-offset: 3px; }

/* ---------- หัวข้อของแต่ละส่วน ---------- */
.kt-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
#kathin .kt-eyebrow {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .3em 1em; border-radius: 999px; background: var(--kt-gold-soft); color: #9a6200;
	font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
#kathin .kt-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kt-gold); }
#kathin .kt-h2 { margin-top: 14px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; line-height: 1.35; color: var(--kt-navy); }
#kathin .kt-h2 span { color: var(--kt-blue); }
#kathin .kt-h2 .kt-nb { display: inline-block; white-space: nowrap; color: inherit; } /* ขึ้นบรรทัดใหม่ทั้งวลี ไม่ตัดกลางคำ */
#kathin .kt-sub { margin-top: 12px; color: var(--kt-muted); font-size: 19px; }
#kathin .kt-h3 { font-size: 23px; font-weight: 600; line-height: 1.4; color: var(--kt-navy); }

/* ---------- Hero ---------- */
.kt-hero {
	position: relative; padding: 72px 0 150px;
	background:
		radial-gradient(900px 420px at 88% 8%, rgba(233, 162, 27, .16), transparent 60%),
		radial-gradient(800px 500px at 6% 90%, rgba(46, 163, 242, .16), transparent 60%),
		linear-gradient(180deg, #fff 0%, var(--kt-sky) 100%);
}
.kt-hero::after { /* เส้นโค้งล่าง */
	content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 90px;
	background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.kt-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
#kathin .kt-hero__title { margin: 18px 0 0; }
#kathin .kt-hero__title img { width: 100%; max-width: 600px; filter: drop-shadow(0 6px 18px rgba(12, 60, 120, .12)); }
#kathin .kt-hero__lead { margin-top: 18px; max-width: 560px; color: var(--kt-muted); font-size: 20px; }
#kathin .kt-hero__lead strong { color: var(--kt-navy); font-weight: 600; }
.kt-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kt-hero__art { position: relative; }
.kt-hero__art::before { /* วงแสงด้านหลังภาพ */
	content: ""; position: absolute; inset: 6% 4% 0; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%);
}
#kathin .kt-hero__art img { position: relative; width: 100%; animation: kt-float 7s ease-in-out infinite; }
@keyframes kt-float { 50% { transform: translateY(-10px); } }

/* ---------- การ์ดทางลัด (ซ้อนขอบล่าง hero) ---------- */
.kt-quick { position: relative; z-index: 2; margin-top: -110px; }
.kt-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#kathin .kt-qcard {
	position: relative; display: flex; flex-direction: column; gap: 10px;
	padding: 26px 24px 24px; border-radius: var(--kt-radius); background: #fff;
	border: 1px solid var(--kt-line); box-shadow: var(--kt-shadow); color: var(--kt-ink);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
#kathin .kt-qcard:hover { transform: translateY(-6px); box-shadow: var(--kt-shadow-hover); border-color: transparent; }
.kt-qcard__icon {
	display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
	background: var(--kt-c, var(--kt-blue)); color: #fff; box-shadow: 0 8px 18px -6px var(--kt-c, var(--kt-blue));
}
.kt-qcard__icon svg { width: 26px; height: 26px; }
#kathin .kt-qcard__title { margin-top: 6px; font-size: 19.5px; font-weight: 600; line-height: 1.4; color: var(--kt-navy); }
#kathin .kt-qcard__desc { font-size: 16px; line-height: 1.6; color: var(--kt-muted); }
#kathin .kt-qcard__go { margin-top: auto; padding-top: 6px; font-size: 16px; font-weight: 500; color: var(--kt-c, var(--kt-blue)); }
#kathin .kt-qcard__go::after { content: " →"; transition: margin .2s; }
#kathin .kt-qcard:hover .kt-qcard__go::after { margin-left: 4px; }
#kathin .kt-pill {
	position: absolute; top: 18px; right: 18px; padding: .15em .75em; border-radius: 999px;
	background: #fdecea; color: #b3261e; font-size: 13.5px; font-weight: 500;
}

/* ---------- เมนูในหน้า ---------- */
.kt-nav { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#kathin .kt-nav a {
	padding: .45em 1.1em; border-radius: 999px; background: var(--kt-sky); color: var(--kt-blue);
	font-size: 16.5px; font-weight: 500; transition: background-color .2s, color .2s;
}
#kathin .kt-nav a:hover { background: var(--kt-blue); color: #fff; }

/* ---------- ประกาศกิจกรรม (Social Media Challenge) ---------- */
.kt-feature {
	display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center;
	padding: 40px; border-radius: 28px; color: #fff;
	background: linear-gradient(135deg, #ff5f6d 0%, #c2348c 45%, #6a3bd6 100%);
	box-shadow: 0 24px 50px -18px rgba(150, 40, 140, .55);
}
#kathin .kt-feature__poster img { border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); transition: transform .3s; }
#kathin .kt-feature__poster:hover img { transform: scale(1.02) rotate(-.5deg); }
#kathin .kt-feature .kt-eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }
#kathin .kt-feature .kt-eyebrow::before { background: #ffe066; }
#kathin .kt-feature__title { margin-top: 14px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; line-height: 1.3; }
#kathin .kt-feature__title small { display: block; font-size: .55em; font-weight: 500; letter-spacing: .08em; opacity: .9; }
.kt-feature__dates { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
#kathin .kt-date { padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); line-height: 1.45; }
#kathin .kt-date b { display: block; font-size: 14.5px; font-weight: 400; opacity: .85; }
#kathin .kt-date span { font-size: 19.5px; font-weight: 600; }
.kt-feature__awards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
#kathin .kt-award { padding: .3em .9em; border-radius: 999px; background: #fff; color: #9b2a7b; font-size: 16px; font-weight: 500; }
#kathin .kt-feature__text { margin-top: 18px; font-size: 17.5px; line-height: 1.8; opacity: .95; }
#kathin .kt-feature__text b { color: #ffe066; font-weight: 600; }
.kt-feature__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#kathin .kt-feature .kt-btn--primary { background: #fff; color: #9b2a7b; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
#kathin .kt-feature .kt-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
#kathin .kt-feature .kt-btn--ghost:hover { background: #fff; color: #9b2a7b; }

/* ---------- โปสเตอร์ ---------- */
.kt-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
#kathin .kt-poster { display: block; color: var(--kt-ink); }
.kt-poster__img { position: relative; overflow: hidden; border-radius: var(--kt-radius); background: #fff; box-shadow: var(--kt-shadow); aspect-ratio: 4 / 5; }
#kathin .kt-poster__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
#kathin .kt-poster:hover .kt-poster__img img { transform: scale(1.04); }
.kt-zoom { /* ไอคอนแว่นขยายมุมรูป */
	position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 42px; height: 42px;
	border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--kt-blue); box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
	opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.kt-zoom svg { width: 20px; height: 20px; }
#kathin a:hover .kt-zoom, #kathin a:focus-visible .kt-zoom { opacity: 1; transform: none; }
#kathin .kt-poster__cap { margin-top: 16px; text-align: center; font-size: 18.5px; font-weight: 500; color: var(--kt-navy); }

/* ---------- ส่งผลการจัดกิจกรรม ---------- */
.kt-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.kt-block { padding: 32px; border-radius: 26px; background: #fff; box-shadow: var(--kt-shadow); }
.kt-report__video { width: 100%; max-width: 780px; margin: 0 auto; text-align: center; }
.kt-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
#kathin .kt-block__head p { margin-top: 4px; color: var(--kt-muted); font-size: 17px; }

.kt-slider { position: relative; }
.kt-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
#kathin .kt-topic {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--kt-line); background: #fff; color: var(--kt-ink); font: 500 15.5px/1.4 Prompt, Helvetica, Arial, sans-serif;
	white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s;
}
#kathin .kt-topic:not(:has(b)) { padding-left: 14px; }
#kathin .kt-topic b {
	display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
	background: var(--kt-sky-2); color: var(--kt-blue); font-size: 14px; font-weight: 600;
}
#kathin .kt-topic:hover { border-color: var(--kt-blue-2); color: var(--kt-blue); }
#kathin .kt-topic[aria-pressed="true"] { background: var(--kt-blue); border-color: var(--kt-blue); color: #fff; }
#kathin .kt-topic[aria-pressed="true"] b { background: #fff; color: var(--kt-blue); }
.kt-slider__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
	padding-bottom: 6px; scrollbar-width: none;
}
.kt-slider__track::-webkit-scrollbar { display: none; }
#kathin .kt-slide { position: relative; display: block; scroll-snap-align: center; border-radius: 16px; overflow: hidden; background: var(--kt-sky-2); aspect-ratio: 16 / 9; }
#kathin .kt-slide img { width: 100%; height: 100%; object-fit: cover; }
.kt-slider__bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
#kathin .kt-round {
	display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 2px solid var(--kt-line); background: #fff; color: var(--kt-blue); transition: background-color .2s, color .2s, border-color .2s;
}
#kathin .kt-round:hover { background: var(--kt-blue); border-color: var(--kt-blue); color: #fff; }
#kathin .kt-round:disabled { opacity: .35; cursor: default; background: #fff; color: var(--kt-blue); border-color: var(--kt-line); }
.kt-round svg { width: 20px; height: 20px; }
#kathin .kt-count { min-width: 90px; text-align: center; font-size: 16.5px; font-weight: 500; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
.kt-progress { height: 4px; margin-top: 14px; border-radius: 4px; background: var(--kt-sky-2); overflow: hidden; }
.kt-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kt-blue-2), var(--kt-blue)); transition: width .3s; }

/* ---------- วิดีโอ ---------- */
.kt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.kt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.kt-video { position: relative; border-radius: 18px; overflow: hidden; background: #0b1e33; aspect-ratio: 16 / 9; box-shadow: var(--kt-shadow); }
.kt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#kathin .kt-yt { position: absolute; inset: 0; display: block; color: #fff; }
#kathin .kt-yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.kt-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55)); }
.kt-play {
	position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center;
	width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
	background: rgba(255, 255, 255, .95); color: var(--kt-red); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .25s;
}
.kt-play svg { width: 26px; height: 26px; margin-left: 4px; }
#kathin .kt-yt:hover img { transform: scale(1.05); }
#kathin .kt-yt:hover .kt-play { transform: scale(1.1); }
.kt-vcap { margin-top: 14px; }
#kathin .kt-vcap h3 { font-size: 19.5px; font-weight: 600; line-height: 1.45; color: var(--kt-navy); }
#kathin .kt-vcap p { margin-top: 2px; font-size: 16px; color: var(--kt-muted); }
.kt-tag { display: inline-block; margin-bottom: 6px; padding: .1em .7em; border-radius: 999px; background: var(--kt-sky-2); color: var(--kt-blue); font-size: 13px; font-weight: 600; }
.kt-grid-4 .kt-video { border-radius: 14px; }
.kt-grid-4 .kt-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.kt-grid-4 .kt-play svg { width: 20px; height: 20px; }

/* ---------- ความเป็นมา / วัตถุประสงค์ ---------- */
.kt-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
#kathin .kt-story__text { color: #2e3b49; font-size: 20px; line-height: 1.95; }
#kathin .kt-quote {
	margin-top: 22px; padding: 18px 22px; border-left: 4px solid var(--kt-gold); border-radius: 0 14px 14px 0;
	background: var(--kt-gold-soft); color: #6b4a06; font-weight: 500; text-align: left;
}
.kt-story { align-items: start; }
.kt-story__media { display: grid; gap: 28px; }
.kt-photos { position: relative; padding-bottom: 56px; }
#kathin .kt-photos__main { width: 100%; aspect-ratio: 788 / 462; object-fit: cover; border-radius: 24px; box-shadow: var(--kt-shadow-hover); }
#kathin .kt-photos__sm {
	position: absolute; left: -12px; bottom: 0; width: 38%; aspect-ratio: 520 / 480; object-fit: cover;
	border: 6px solid #fff; border-radius: 20px; box-shadow: 0 16px 36px rgba(12, 60, 120, .22); transform: rotate(-3deg);
}
.kt-facts { display: grid; gap: 16px; }
.kt-fact { display: flex; flex-direction: column; padding: 24px 26px; border-radius: var(--kt-radius); background: #fff; box-shadow: var(--kt-shadow); border-left: 5px solid var(--kt-gold); }
.kt-fact:nth-child(2) { border-left-color: var(--kt-blue-2); margin-left: 28px; }
.kt-fact:nth-child(3) { border-left-color: #1f9e83; }
#kathin .kt-fact b { font-size: 28px; font-weight: 600; line-height: 1.3; color: var(--kt-navy); }
#kathin .kt-fact span { margin-top: 4px; font-size: 17px; line-height: 1.65; color: var(--kt-muted); }
.kt-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 64px; }
.kt-goal { position: relative; padding: 30px 24px 26px; border-radius: var(--kt-radius); background: #fff; box-shadow: var(--kt-shadow); transition: transform .25s; }
.kt-goal:hover { transform: translateY(-5px); }
.kt-goal__no {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
	background: linear-gradient(135deg, var(--kt-blue-2), var(--kt-blue)); color: #fff; font-size: 20px; font-weight: 600;
}
.kt-goal:nth-child(2) .kt-goal__no { background: linear-gradient(135deg, #f7c55a, var(--kt-gold)); }
.kt-goal:nth-child(3) .kt-goal__no { background: linear-gradient(135deg, #5fd0b5, #1f9e83); }
.kt-goal:nth-child(4) .kt-goal__no { background: linear-gradient(135deg, #ff8a7a, var(--kt-red)); }
#kathin .kt-goal p { font-size: 17.5px; line-height: 1.8; color: #3b4a5a; }

/* ---------- คู่มือ / สื่อ ---------- */
.kt-kit { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: stretch; }
.kt-manual {
	display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px; border-radius: 26px; text-align: center;
	background: linear-gradient(160deg, var(--kt-gold-soft), #fff 70%); border: 1px solid #f6e3b8;
}
#kathin .kt-manual__cover { display: block; width: 72%; border-radius: 12px; box-shadow: 0 18px 36px -12px rgba(120, 80, 0, .45); transition: transform .3s; }
#kathin .kt-manual__cover:hover { transform: translateY(-4px) rotate(-1deg); }
#kathin .kt-manual p { color: var(--kt-muted); font-size: 17px; }
.kt-kit__videos { display: grid; grid-template-columns: 1fr; gap: 28px; }
.kt-subhead { display: flex; align-items: center; gap: 14px; margin: 64px 0 26px; }
.kt-subhead::after { content: ""; flex: 1; height: 1px; background: var(--kt-line); }

/* ---------- ติดตาม / ติดต่อ ---------- */
.kt-follow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#kathin .kt-social {
	display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; color: #fff;
	background: var(--kt-c); box-shadow: 0 18px 36px -16px var(--kt-c); transition: transform .25s;
}
#kathin .kt-social:hover { transform: translateY(-5px); }
.kt-social--fb { --kt-c: #1877f2; }
.kt-social--tt { --kt-c: #111; background: linear-gradient(135deg, #111 60%, #25f4ee 160%) !important; }
.kt-social--line { --kt-c: #06c755; }
.kt-social__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 255, 255, .18); }
.kt-social__icon svg { width: 28px; height: 28px; }
#kathin .kt-social h3 { font-size: 21.5px; font-weight: 600; line-height: 1.4; }
#kathin .kt-social p { font-size: 16.5px; opacity: .95; line-height: 1.65; }
#kathin .kt-social__go { margin-top: auto; font-weight: 500; font-size: 16.5px; }
#kathin .kt-social__go::after { content: " ↗"; }
.kt-qr { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; margin-top: 28px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--kt-shadow); }
#kathin .kt-qr img { border-radius: 16px; }
#kathin .kt-qr p { margin-top: 8px; color: var(--kt-muted); }

/* ---------- แถบปิดท้าย ---------- */
.kt-cta {
	position: relative; overflow: hidden; padding: 56px 48px; border-radius: 30px; text-align: center; color: #fff;
	background: linear-gradient(120deg, var(--kt-navy), var(--kt-blue) 70%, var(--kt-blue-2));
}
.kt-cta::before, .kt-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.kt-cta::before { width: 320px; height: 320px; left: -100px; top: -160px; }
.kt-cta::after { width: 240px; height: 240px; right: -70px; bottom: -120px; background: rgba(233, 162, 27, .25); }
#kathin .kt-cta h2 { position: relative; font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; line-height: 1.4; }
#kathin .kt-cta p { position: relative; margin-top: 10px; opacity: .9; }
.kt-cta__btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
#kathin .kt-cta .kt-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
#kathin .kt-cta .kt-btn--ghost:hover { background: #fff; color: var(--kt-blue); }

/* ---------- Lightbox (assets/js/kathin.js) ---------- */
.kt-lb {
	position: fixed; inset: 0; z-index: 1000001; display: flex; align-items: center; justify-content: center;
	padding: 64px 72px; background: rgba(6, 18, 34, .92); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
	font-family: Prompt, Helvetica, Arial, sans-serif;
}
.kt-lb.is-open { opacity: 1; visibility: visible; }
.kt-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; }
.kt-lb button {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s;
}
.kt-lb button:hover, .kt-lb button:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.kt-lb button svg { width: 22px; height: 22px; }
.kt-lb__close { top: 14px; right: 14px; }
.kt-lb__prev { left: 14px; top: 50%; margin-top: -24px; }
.kt-lb__next { right: 14px; top: 50%; margin-top: -24px; }
.kt-lb__count { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255, 255, 255, .85); font-size: 15px; }
html.kt-lb-lock, html.kt-lb-lock body { overflow: hidden; }

/* ---------- เลื่อนแล้วค่อย ๆ ปรากฏ (เฉพาะเมื่อ js ทำงาน) ---------- */
.kt-js #kathin .kt-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.kt-js #kathin .kt-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.kt-js #kathin .kt-reveal { opacity: 1; transform: none; transition: none; }
	#kathin .kt-hero__art img { animation: none; }
	#kathin *, .kt-lb { transition: none !important; }
	.kt-slider__track { scroll-behavior: auto; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 1100px) {
	.kt-quick__grid, .kt-goals { grid-template-columns: repeat(2, 1fr); }
	.kt-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.kt-feature { grid-template-columns: 300px 1fr; gap: 32px; padding: 32px; }
	.kt-kit { grid-template-columns: 300px 1fr; }
}
@media (max-width: 860px) {
	.kt-section { padding: 64px 0; }
	.kt-hero { padding: 40px 0 130px; text-align: center; }
	.kt-hero__grid { grid-template-columns: 1fr; gap: 12px; }
	#kathin .kt-hero__title img, #kathin .kt-hero__lead { margin-left: auto; margin-right: auto; }
	.kt-hero__cta { justify-content: center; }
	.kt-hero__art { max-width: 420px; margin: 0 auto; order: -1; }
	.kt-feature, .kt-story, .kt-qr { grid-template-columns: 1fr; }
	.kt-feature__poster { max-width: 380px; margin: 0 auto; }
	.kt-posters { grid-template-columns: 1fr 1fr; }
	.kt-follow, .kt-grid-3 { grid-template-columns: 1fr; }
	.kt-qr { text-align: center; }
	#kathin .kt-qr img { max-width: 240px; margin: 0 auto; }
	.kt-fact:nth-child(2) { margin-left: 0; }
	.kt-kit { grid-template-columns: 1fr; }
	.kt-manual { flex-direction: row; text-align: left; align-items: center; }
	#kathin .kt-manual__cover { width: 180px; flex: none; }
	#kathin .kt-story__text { font-size: 18.5px; line-height: 1.9; }
	.kt-story__media { max-width: 560px; width: 100%; margin: 0 auto; }
	.kt-slider__track { grid-auto-columns: 88%; }
}
@media (max-width: 600px) {
	#kathin { font-size: 17.5px; }
	.kt-wrap { padding: 0 16px; }
	.kt-head { margin-bottom: 32px; }
	.kt-quick__grid { gap: 12px; }
	#kathin .kt-qcard { padding: 18px 16px; }
	.kt-qcard__icon { width: 44px; height: 44px; border-radius: 13px; }
	.kt-qcard__icon svg { width: 22px; height: 22px; }
	#kathin .kt-qcard__title { font-size: 17.5px; }
	#kathin .kt-qcard__desc { display: none; }
	#kathin .kt-pill { position: static; align-self: flex-start; order: -1; margin-bottom: -2px; }
	.kt-feature { padding: 22px; border-radius: 22px; }
	.kt-posters { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
	.kt-block { padding: 20px; border-radius: 20px; }
	.kt-grid-2, .kt-grid-4, .kt-goals { grid-template-columns: 1fr; }
	.kt-slider__track { grid-auto-columns: 100%; gap: 10px; }
	.kt-topics { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 4px; scrollbar-width: none; }
	.kt-topics::-webkit-scrollbar { display: none; }
	.kt-manual { flex-direction: column; text-align: center; }
	.kt-cta { padding: 40px 22px; border-radius: 22px; }
	.kt-hero__art { max-width: 300px; }
	#kathin .kt-photos__sm { left: 0; width: 42%; border-width: 4px; }
	.kt-photos { padding-bottom: 44px; }
	.kt-lb { padding: 56px 8px 64px; }
	.kt-lb__prev, .kt-lb__next { top: auto; bottom: 8px; margin-top: 0; }
	.kt-lb__prev { left: 12px; }
	.kt-lb__next { right: 12px; }
}