[v-cloak] { display: none !important; }

.course-page {
	min-height: 100vh;
	background: radial-gradient(circle at 84% 0%, rgba(224, 231, 255, .74), transparent 28rem), #f8fafc;
}

.course-shell { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1rem 3.5rem; }
.course-content { max-width: 72rem; margin: 1.25rem auto 0; }

.course-hero {
	position: relative;
	min-height: 20rem;
	overflow: hidden;
	border-radius: 1rem;
	background: #21185f;
	box-shadow: 0 12px 28px rgba(30, 27, 75, .16);
}
.course-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.course-hero__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 22, 82, .98) 0%, rgba(37, 29, 100, .88) 46%, rgba(35, 29, 94, .25) 100%); }
.course-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 20rem; max-width: 40rem; padding: 2rem; color: #fff; }
.course-hero__tag, .course-hero__facts span { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; border: 1px solid rgba(224, 231, 255, .32); border-radius: 999px; background: rgba(15, 23, 42, .26); color: #eef2ff; font-size: .75rem; font-weight: 700; }
.course-hero__tag { padding: .38rem .7rem; }
.course-hero h1 { margin: .8rem 0 0; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.course-hero p { margin: .6rem 0 0; color: #e0e7ff; font-size: 1rem; font-weight: 600; }
.course-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.course-hero__facts span { padding: .4rem .65rem; }

.course-progress { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; padding: 1.25rem; border: 1px solid #dbeafe; border-radius: 1rem; background: #fff; }
.course-progress__lead { display: flex; gap: .9rem; align-items: flex-start; }
.course-progress__icon { display: grid; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .75rem; background: #e0e7ff; color: #4338ca; }
.course-progress__eyebrow { margin: 0; color: #4f46e5; font-size: .75rem; font-weight: 800; }
.course-progress h2 { margin: .15rem 0; color: #111827; font-size: 1.1rem; font-weight: 800; }
.course-progress__lead p:last-child { margin: 0; color: #64748b; font-size: .84rem; }
.course-progress__status { align-self: center; text-align: right; color: #64748b; font-size: .75rem; }
.course-progress__status strong { display: block; color: #312e81; font-size: 1.35rem; line-height: 1; }
.course-progress__bar { grid-column: 1 / -1; height: .55rem; overflow: hidden; border-radius: 99px; background: #e5e7eb; }
.course-progress__bar span { display: block; height: 100%; border-radius: inherit; background: #4f46e5; transition: width 200ms ease; }
.course-progress__footer { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 1rem; color: #64748b; font-size: .78rem; }
.course-progress__footer button { border: 0; background: none; color: #6b7280; font: inherit; cursor: pointer; }
.course-progress__footer button:hover { color: #dc2626; }

.course-list__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.course-list__heading p { margin: 0; color: #4f46e5; font-size: .8rem; font-weight: 800; }
.course-list__heading h2 { margin: .2rem 0 0; color: #111827; font-size: 1.6rem; line-height: 1.2; font-weight: 800; }
.course-list__count { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border: 1px solid #e5e7eb; border-radius: 999px; color: #64748b; font-size: .75rem; font-weight: 700; }
.course-list__count i { color: #6366f1; }

.course-day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.course-day-card { display: flex; min-width: 0; border: 1px solid #e5e7eb; border-radius: .9rem; background: #fff; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.course-day-card:hover { border-color: #a5b4fc; box-shadow: 0 7px 8px rgba(30, 41, 59, .08); transform: translateY(-2px); }
.course-day-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 1.1rem; }
.course-day-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }
.course-day-card__badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 2.7rem; color: #4338ca; }
.course-day-card__badge--default { background: #eef2ff; }
.course-day-card__badge--done { background: #dcfce7; color: #15803d; }
.course-day-card__badge--locked { background: #f3f4f6; color: #9ca3af; }
.course-day-card__badge--special { background: #fffbeb; color: #b45309; }
.course-day-card__done { color: #16a34a; }
.course-day-card__top p { margin: 0; line-height: 1.35; }
.course-day-card h3 { margin: 0; color: #1f2937; font-size: 1.02rem; line-height: 1.45; font-weight: 800; text-wrap: balance; }
.course-day-card__topic { min-height: 3rem; margin: .5rem 0 1rem; color: #64748b; font-size: .84rem; line-height: 1.5; }
.course-day-card__action, .course-day-card__locked { display: block; width: 100%; margin-top: auto; padding: .65rem .8rem; border-radius: .65rem; text-align: center; font-size: .86rem; font-weight: 800; }
.course-day-card__action { background: #4f46e5; color: #fff; transition: background-color 150ms ease; }
.course-day-card__action:hover { color: #fff; background: #4338ca; }
.course-day-card__locked { background: #f3f4f6; color: #9ca3af; }
.course-day-card--done { border-color: #bbf7d0; background: #fafffc; }
.course-day-card--done .course-day-card__action { background: #dcfce7; color: #15803d; }
.course-day-card--locked { opacity: .7; }
.course-day-card--special { grid-column: 1 / -1; border-color: #fde68a; background: #fffdf5; }
.course-day-card--special .course-day-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.course-day-card--special .course-day-card__top { margin: 0; }
.course-day-card--special .course-day-card__topic { min-height: 0; margin: .35rem 0 0; }
.course-day-card--special .course-day-card__action, .course-day-card--special .course-day-card__locked { width: auto; min-width: 9rem; margin: 0; }

@media (min-width: 640px) { .course-shell { padding: 2rem 1.5rem 4rem; } .course-hero__copy { padding: 2.75rem; } .course-progress { padding: 1.5rem; } }
@media (max-width: 900px) { .course-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .course-hero { min-height: 23rem; } .course-hero__art { object-position: 65% center; } .course-hero__wash { background: linear-gradient(90deg, rgba(27, 22, 82, .97), rgba(37, 29, 100, .8) 70%, rgba(35, 29, 94, .35)); } .course-hero__copy { min-height: 23rem; padding: 1.35rem; } .course-progress { grid-template-columns: 1fr; gap: 1rem; } .course-progress__status { text-align: left; } .course-list__heading { align-items: flex-start; flex-direction: column; margin-top: 2rem; } .course-day-grid { grid-template-columns: 1fr; } .course-day-card--special .course-day-card__body { display: flex; gap: 0; } .course-day-card--special .course-day-card__top { margin-bottom: .85rem; } .course-day-card--special .course-day-card__action, .course-day-card--special .course-day-card__locked { width: 100%; margin-top: auto; } }
@media (prefers-reduced-motion: reduce) { .course-day-card, .course-progress__bar span { transition: none; } }

/* ══════════ ปฏิทิน ๓๐ วัน จัดเป็นสัปดาห์ (จัดหน้าใหม่ ๓ ส.ค. ๒๕๖๙) ══════════
   เดิมเป็นการ์ดสูง ๓๑ ใบไหลยาว ทุกใบมีปุ่มม่วงใหญ่ ทำให้ไม่เห็นภาพรวมของ "เดือน"
   ใหม่: แบ่งเป็นสัปดาห์ละ ๗ วัน · การ์ดเตี้ยลง ทั้งใบเป็นลิงก์ · เลขวันเด่นเหมือนปฏิทิน */

.cw { margin-top: 1.75rem; }

.cw__head {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: .75rem;
}
.cw__no {
	flex: none;
	width: 2.5rem; height: 2.5rem;
	display: grid; place-items: center;
	border-radius: .9rem;
	background: linear-gradient(160deg, #4f46e5, #312e81);
	color: #fff; font-weight: 800; font-size: 1.05rem;
	box-shadow: 0 6px 14px -6px rgba(49, 46, 129, .6);
}
.cw__title { flex: 1; min-width: 0; }
.cw__eyebrow { font-size: .7rem; font-weight: 800; color: #6366f1; letter-spacing: .02em; }
.cw__title h3 { font-size: 1.05rem; font-weight: 800; color: #111827; line-height: 1.3; }

.cw__meter { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.cw__count {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .75rem; font-weight: 800; color: #64748b;
}
.cw__count.is-full { color: #b45309; }
.cw__bar { display: block; width: 6rem; height: 5px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.cw__bar i { display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #6366f1, #fbbf24); transition: width .4s ease; }

.cw__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .7rem;
}

/* ── การ์ดวัน ── */
.cd {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "day diff" "day title" "day topic" "foot foot";
	gap: .15rem .7rem;
	padding: .85rem .95rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cd:hover { transform: translateY(-3px); border-color: #a5b4fc;
	box-shadow: 0 14px 26px -14px rgba(30, 41, 59, .4); }
.cd:active { transform: translateY(0); }

.cd__day {
	grid-area: day;
	align-self: start;
	width: 2.6rem; height: 2.6rem;
	display: grid; place-items: center;
	border-radius: .8rem;
	background: #eef2ff; color: #4338ca;
	font-size: 1.15rem; font-weight: 800;
}
.cd__diff { grid-area: diff; justify-self: start;
	font-size: .68rem; font-weight: 800; padding: .08rem .45rem; border-radius: 999px; }
.cd__diff--easy { background: #dcfce7; color: #15803d; }
.cd__diff--mid  { background: #e0e7ff; color: #4338ca; }
.cd__diff--hard { background: #ffe4e6; color: #be123c; }

.cd__title { grid-area: title; font-weight: 800; color: #111827; line-height: 1.35; font-size: .95rem; }
.cd__topic { grid-area: topic; font-size: .75rem; color: #94a3b8; line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd__foot { grid-area: foot; margin-top: .55rem; padding-top: .5rem;
	border-top: 1px dashed #e5e7eb;
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .75rem; font-weight: 800; color: #6366f1; }
.cd__foot i { font-size: .7em; }

/* เรียนแล้ว = ทอง · วันถัดไปที่ควรทำ = ขอบครามหนา + เรืองแสงอ่อน */
.cd--done { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff); }
.cd--done .cd__day { background: linear-gradient(160deg, #fcd34d, #f59e0b); color: #451a03; }
.cd--done .cd__foot { color: #b45309; }
.cd--next { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .14); }
.cd--soon { opacity: .55; pointer-events: none; }
.cd--soon .cd__foot { color: #94a3b8; }

/* ── ตอนพิเศษปิดท้าย ── */
.cs {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "badge go" "title go" "topic go";
	gap: .25rem 1rem;
	align-items: center;
	margin-top: 1.75rem;
	padding: 1.1rem 1.25rem;
	border-radius: 1.25rem;
	color: #fff;
	background: linear-gradient(118deg, #1e1b4b 0%, #4338ca 58%, #b45309 100%);
	box-shadow: 0 14px 30px -16px rgba(30, 27, 75, .7);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cs:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -18px rgba(30, 27, 75, .8); }
.cs__badge { grid-area: badge; justify-self: start;
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .7rem; font-weight: 800; color: #451a03;
	background: #fcd34d; padding: .15rem .6rem; border-radius: 999px; }
.cs__title { grid-area: title; font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.cs__topic { grid-area: topic; font-size: .78rem; color: rgba(255, 255, 255, .78); line-height: 1.5; }
.cs__go { grid-area: go; flex: none;
	display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
	padding: .6rem 1.1rem; border-radius: .85rem;
	background: #fff; color: #3730a3; font-weight: 800; font-size: .85rem; }
.cs--done .cs__go { background: #fcd34d; color: #451a03; }

@media (max-width: 640px) {
	.cw__grid { grid-template-columns: 1fr; }
	.cs { grid-template-columns: 1fr; grid-template-areas: "badge" "title" "topic" "go"; }
	.cs__go { justify-self: start; margin-top: .6rem; }
}