/* TheMostHub Classroom — ธีมเดียวกับหน้า "รายการแข่งขัน" (themosthub.com/math-competitions/)
   แถบ LINE กรมท่า → เมนูเทาอ่อน (หน้าปัจจุบันขีดเส้นแดงเลือดหมู) → โลโก้ + ชื่อวิชา → แถบเนื้อหาสีแดงเลือดหมู
   หัวข้อ Prompt · เนื้อหา Sarabun · การ์ดขาวมุมโค้ง 16px · ปุ่มมุมโค้ง 12px */

:root {
	--tmc-s-navy: #0b3570;
	--tmc-s-navy-dark: #002b5c;
	--tmc-s-maroon: #841a1c;
	--tmc-s-maroon-dark: #6c1416;
	--tmc-s-sky: #1fb2f0;
	--tmc-s-sky-dark: #1296d4;
	--tmc-s-ink: #1b2230;
	--tmc-s-muted: #7486a3;
	--tmc-s-line: #e3e8ef;
	--tmc-s-body: 'Sarabun', 'Noto Sans Thai', sans-serif;
	--tmc-s-head: 'Prompt', 'Kanit', sans-serif;
	--tmc-s-maxw: 1600px;
	--tmc-s-gutter: clamp(1rem, 3vw, 3rem);
}

/* ═══════════════ หน้าเต็ม (template ของปลั๊กอิน) ═══════════════ */
body.tmc-canvas { margin: 0; background: #fff; }
.tmc-canvas__main > .tmc-hero:first-child { margin-top: 0 !important; }
.tmc-canvas__main > p:empty { display: none; }
html:has(.tmc-hero--full), body:has(.tmc-hero--full) { overflow-x: clip; }

.tmc-site { display: flex; flex-direction: column; font-family: var(--tmc-s-body); line-height: 1.5; }
.tmc-site *, .tmc-site ::before, .tmc-site ::after { box-sizing: border-box; }
.tmc-site__topbar { background: #003876; color: #fff; text-align: center; padding: .7rem 1rem; font-size: 1rem; }
.tmc-site__topbar a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: #fff !important; }
.tmc-site__nav { background: #f3f6fa; border-bottom: 1px solid var(--tmc-s-line); }
.tmc-site__nav ul { list-style: none; margin: 0 auto; padding: 0 1rem; max-width: var(--tmc-s-maxw); display: flex; justify-content: center; flex-wrap: wrap; }
.tmc-site__nav li { margin: 0; display: flex; }
.tmc-site__nav li + li { border-left: 1px solid var(--tmc-s-line); }
.tmc-site__nav a {
	display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.05rem; font-size: 1rem; white-space: nowrap;
	transition: background-color .15s, color .15s; color: var(--tmc-s-navy) !important; text-decoration: none !important;
}
.tmc-site__nav a:hover { background: #e6ecf4; }
.tmc-site__nav .is-current a { font-weight: 700; box-shadow: inset 0 -3px 0 var(--tmc-s-maroon); color: var(--tmc-s-maroon) !important; }
.tmc-site__nav svg { flex-shrink: 0; }
.tmc-site__brand { background: #fff; }
.tmc-site__brandinner {
	max-width: var(--tmc-s-maxw); margin: 0 auto; padding: 1.4rem var(--tmc-s-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.tmc-site__logo { display: flex; align-items: center; gap: 1rem; min-width: 0; text-decoration: none !important; }
.tmc-site__badge {
	flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
	background: var(--tmc-s-navy); color: #fff; font-family: var(--tmc-s-head); font-weight: 700; font-size: 1.25rem;
	box-shadow: 0 6px 14px rgba(0,43,92,.28);
}
.tmc-site__badge.is-long { font-size: 1rem; letter-spacing: -.01em; }
.tmc-site__names { display: flex; flex-direction: column; min-width: 0; }
.tmc-site__title { font-family: var(--tmc-s-head); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.2; color: var(--tmc-s-maroon); }
.tmc-site__subtitle { margin-top: .2rem; font-family: var(--tmc-s-head); font-weight: 600; font-size: .82rem; letter-spacing: .14em; color: var(--tmc-s-navy); }
.tmc-site__burger {
	display: none; flex-shrink: 0; width: 52px; height: 48px; padding: 10px; border: 0; border-radius: 10px;
	background: transparent; cursor: pointer; flex-direction: column; justify-content: space-between;
}
.tmc-site__burger span { display: block; height: 4px; border-radius: 4px; background: var(--tmc-s-navy); transition: transform .2s, opacity .2s; }
.tmc-site__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.tmc-site__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tmc-site__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.tmc-site__footer { background: #002a5c; color: #cdd9e8; padding: 2.4rem 0 1.4rem; font-family: var(--tmc-s-body); font-size: 1rem; line-height: 1.6; }
.tmc-site__footer *, .tmc-site__footer ::before, .tmc-site__footer ::after { box-sizing: border-box; }
.tmc-foot-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--tmc-s-gutter); }
.tmc-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.tmc-foot-name { font-family: var(--tmc-s-head); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: .5rem; }
.tmc-foot-brand p { margin: 0; color: #9fb4cc; }
.tmc-site__footer h4 { font-family: var(--tmc-s-head); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 .6rem; }
.tmc-site__footer ul { list-style: none; margin: 0; padding: 0; }
.tmc-site__footer li { margin: 0 0 .35rem; color: #cdd9e8; }
.tmc-site__footer a { color: #cdd9e8 !important; text-decoration: none !important; border-bottom: 1px dashed rgba(205,217,232,.4); }
.tmc-site__footer a:hover { color: #fff !important; border-bottom-color: #fff; }
.tmc-foot-bottom { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: .9rem; color: #9fb4cc; }
@media (max-width: 760px) {
	.tmc-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
	.tmc-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .tmc-foot-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
	.tmc-site__burger { display: flex; }
	.tmc-site__brand { order: 2; }
	.tmc-site__nav { order: 3; display: none; border-top: 1px solid var(--tmc-s-line); }
	.tmc-site__nav.is-open { display: block; }
	.tmc-site__nav ul { flex-direction: column; padding: 0; }
	.tmc-site__nav li { display: block; }
	.tmc-site__nav li + li { border-left: 0; border-top: 1px solid var(--tmc-s-line); }
	.tmc-site__nav a { display: flex; padding: 1rem 1.25rem; font-size: 1.05rem; }
	.tmc-site__nav .is-current a { box-shadow: inset 4px 0 0 var(--tmc-s-maroon); }
	.tmc-site__subtitle { letter-spacing: .06em; }
}
@media (max-width: 480px) {
	.tmc-site__topbar { font-size: .92rem; }
	.tmc-site__badge { width: 50px; height: 50px; font-size: 1.05rem; }
	.tmc-site__badge.is-long { font-size: .85rem; }
	.tmc-site__brandinner { padding: 1rem .9rem; }
}

/* ═══════════════ แถบเนื้อหาสีแดงเลือดหมู ═══════════════ */
.tmc-hero {
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--tmc-s-maroon), var(--tmc-s-maroon-dark));
	padding: clamp(2rem, 5vw, 3.5rem) var(--tmc-s-gutter);
	font-family: var(--tmc-s-body); color: var(--tmc-s-ink); text-align: center;
	border-radius: 20px;
}
.tmc-hero--full {
	border-radius: 0;
	width: 100vw !important; max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	min-height: 60vh;
}
.tmc-hero-head { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tmc-hero-logo {
	display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
	background: #fff; color: var(--tmc-s-maroon); font-family: var(--tmc-s-head); font-weight: 700; font-size: 1.25rem; flex-shrink: 0;
}
.tmc-hero-logo.is-long { font-size: 1rem; letter-spacing: -.01em; }
.tmc-hero .tmc-hero-title {
	font-family: var(--tmc-s-head); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
	line-height: 1.2; color: #fff; margin: 0; border: 0; padding: 0;
}
.tmc-hero .tmc-hero-pill {
	display: inline-block; margin: 0 0 1.75rem; padding: .45rem 1.6rem; border-radius: 999px;
	background: #fff; color: var(--tmc-s-maroon); font-family: var(--tmc-s-head); font-weight: 700; letter-spacing: .02em;
	font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
}
@media (max-width: 420px) {
	.tmc-hero-logo { width: 2.8rem; height: 2.8rem; font-size: 1rem; }
	.tmc-hero-logo.is-long { font-size: .85rem; }
}

/* ═══════════════ ปรับแอปให้เข้ากับแถบแดง ═══════════════ */
.tmc-hero .tmc-app {
	--tmc-navy: var(--tmc-s-navy);
	--tmc-navy-dark: var(--tmc-s-navy-dark);
	--tmc-cyan: var(--tmc-s-sky);
	--tmc-cyan-dark: var(--tmc-s-sky-dark);
	--tmc-red: var(--tmc-s-maroon);
	--tmc-text: var(--tmc-s-ink);
	--tmc-muted: var(--tmc-s-muted);
	--tmc-border: var(--tmc-s-line);
	--tmc-radius: 16px;
	--tmc-radius-md: 16px;
	--tmc-radius-sm: 12px;
	--tmc-font: var(--tmc-s-body);
	--tmc-font-head: var(--tmc-s-head);
	--tmc-font-num: var(--tmc-s-head);
	--tmc-tri: linear-gradient(90deg, var(--tmc-s-navy), var(--tmc-s-sky));
	max-width: 1280px; text-align: left; font-weight: 400;
}
.tmc-hero .tmc-app .tmc-item-title, .tmc-hero .tmc-app .tmc-epi, .tmc-hero .tmc-app .tmc-stat-v,
.tmc-hero .tmc-app .tmc-watch-title, .tmc-hero .tmc-app .tmc-card-title { font-family: var(--tmc-s-head); font-weight: 600; }

/* ปุ่ม: มุมโค้ง 12px แบบหน้ารายการแข่งขัน */
.tmc-hero .tmc-btn, .tmc-hero .tmc-epcard-cta, .tmc-hero .tmc-epcard-doc { border-radius: 12px; }
.tmc-hero .tmc-btn-primary, .tmc-hero .tmc-epcard-cta { background: linear-gradient(180deg, var(--tmc-s-sky), var(--tmc-s-sky-dark)); box-shadow: none; }
.tmc-hero .tmc-epcard.is-done .tmc-epcard-cta, .tmc-hero .tmc-btn-outline { background: #fff; color: var(--tmc-s-navy); border: 2px solid var(--tmc-s-navy); }
.tmc-hero .tmc-epcard-doc { border-width: 2px; }

/* การ์ดขาว เงาแบบหน้ารายการแข่งขัน */
.tmc-hero .tmc-card, .tmc-hero .tmc-item, .tmc-hero .tmc-epcard, .tmc-hero .tmc-ghead {
	background: #fff; border: 0; border-radius: 16px; box-shadow: 0 10px 24px rgba(40,0,0,.18);
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.tmc-hero .tmc-item:hover, .tmc-hero .tmc-epcard:hover { box-shadow: 0 14px 30px rgba(40,0,0,.26); }
.tmc-hero .tmc-item.is-done { background: #fff; }
.tmc-hero .tmc-card::before, .tmc-hero .tmc-ghead::before { background: linear-gradient(90deg, var(--tmc-s-navy), var(--tmc-s-sky)); }
.tmc-hero .tmc-card-title { margin: 0 0 14px; font-size: 1.15rem; color: var(--tmc-s-navy); text-align: center; }
.tmc-hero .tmc-login { padding-top: 0; }

/* ข้อความที่วางบนพื้นแดงโดยตรง → สีขาว */
.tmc-hero .tmc-bar .tmc-h2 { color: #fff; }
.tmc-hero .tmc-hint { color: rgba(255,255,255,.8); }
.tmc-hero .tmc-chip { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }
.tmc-hero > .tmc-app > .tmc-view > .tmc-bar .tmc-btn-ghost,
.tmc-hero .tmc-admin-link { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.tmc-hero > .tmc-app > .tmc-view > .tmc-bar .tmc-btn-ghost:hover,
.tmc-hero .tmc-admin-link:hover { background: #fff; color: var(--tmc-s-maroon); border-color: #fff; }
.tmc-hero .tmc-adminbar { margin-top: -8px; margin-bottom: 8px; }
.tmc-hero .tmc-empty { background: rgba(255,255,255,.95); border: 0; border-radius: 16px; }
.tmc-hero .tmc-skeleton { background: linear-gradient(90deg, rgba(255,255,255,.18) 25%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.18) 75%); background-size: 200% 100%; }

/* หน้าดูวิดีโอ: กรอบกรมท่า มุม 16px */
.tmc-hero .tmc-watch { border-radius: 16px; box-shadow: 0 14px 34px rgba(40,0,0,.3); background: linear-gradient(160deg, var(--tmc-s-navy) 0%, var(--tmc-s-navy-dark) 60%, #001d42 100%); }
.tmc-hero .tmc-watch::before { background: linear-gradient(90deg, var(--tmc-s-sky), #fff, var(--tmc-s-maroon)); }

/* ใช้ฟอนต์ Mali แทน ([themost_classroom font="mali"]) */
.tmc-font-mali, .tmc-hero.tmc-font-mali .tmc-app { --tmc-s-body: 'Mali', 'Sarabun', sans-serif; --tmc-s-head: 'Mali', 'Sarabun', sans-serif; }

@media (max-width: 640px) {
	.tmc-hero { padding-left: .85rem; padding-right: .85rem; }
	.tmc-hero .tmc-hero-pill { margin-bottom: 1.25rem; }
}