/* สูตรคูณสุข — stylesheet กลาง (ใช้ร่วมกับ Bootstrap 5) */
:root {
    --pink: #cd168c;
    --pink-soft: #c77ea6;
    --pink-red: #d91c5c;
    --blue: #00689a;
    --grey: #bcbec0;
    --grey-light: #dedde2;
    --ink: #1d1d1f;
    --ink-soft: #58585a;
    --page-pad: clamp(16px, 4vw, 48px);
    --maxw: 1200px;

    --fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
    --fs-topic: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
    --fs-h1: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Kanit", system-ui, sans-serif;
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink);
    background: #fff;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}
.section { padding-block: clamp(28px, 5vw, 64px); }
.section--tight { padding-block: clamp(16px, 3vw, 32px); }

/* ---------- Header / Navigation ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e6e6e8;
}
.site-header .navbar { padding-block: 8px; }
.brand img { width: clamp(56px, 8vw, 84px); display: block; }

.site-header .nav-link,
.site-header .dropdown-item {
    font-weight: 500;
    font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem);
    color: var(--ink);
    padding-inline: 1rem;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus,
.site-header .nav-link.active {
    background: var(--pink-soft);
    color: #000;
}
.site-header .dropdown-menu { border-radius: 0; border: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, .15); padding: 0; }
.nav-fb { font-size: .95rem; letter-spacing: .04em; text-decoration: none; color: var(--ink); }
.navbar-toggler { border: 0; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(205, 22, 140, .3); }

@media (min-width: 992px) {
    /* เมนูเปิดเมื่อ hover บนเดสก์ท็อป */
    .navbar .dropdown:hover > .dropdown-menu { display: block; }
}
@media (max-width: 991.98px) {
    .navbar-collapse { background: var(--grey-light); margin-inline: calc(var(--page-pad) * -1); padding: 8px var(--page-pad) 12px; }
    .nav-fb { display: inline-block; padding: .5rem 1rem; }
}

/* ---------- Typography helpers ---------- */
.topic { font-weight: 500; font-size: var(--fs-topic); color: var(--ink-soft); line-height: 1.4; margin: 0 0 .35rem; }
.topic--pink { color: var(--pink-red); }
.page-title { font-weight: 500; font-size: var(--fs-h1); color: var(--pink-red); text-align: center; margin: 0 0 1rem; }
.lead-pink { font-weight: 500; font-size: var(--fs-topic); color: var(--pink); }
.prose p, .prose .block { margin: 0 0 1.1rem; }
.prose .topic { margin-top: 1.4rem; }
.text-brand-pink { color: var(--pink); }
.text-brand-blue { color: var(--blue); }

/* ---------- Home ---------- */
.hero img { width: 100%; display: block; }
.course-banners { background: var(--grey); padding-block: clamp(20px, 4vw, 40px); }
.course-banners img { width: 100%; max-width: 560px; display: block; margin-inline: auto; transition: transform .2s; }
.course-banners a:hover img { transform: translateY(-3px); }

.band { position: relative; color: #fff; text-align: center; background: #6c757d; }
.band > img { width: 100%; min-height: 200px; object-fit: cover; display: block; }
.band__text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px var(--page-pad);
}
.band__title { font-weight: 200; font-size: clamp(1rem, .6rem + 2.2vw, 1.9rem); margin-bottom: .6rem; }
.band__links { font-weight: 400; font-size: clamp(1.1rem, .8rem + 1.6vw, 2rem); display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; }
.band__links a { color: #fff; text-decoration: none; }
.band__links a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn-sk {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; height: 100%;
    border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
    font-family: inherit; font-weight: 500; line-height: 1.35;
    padding: .75rem 1rem;
    font-size: clamp(1.05rem, 1rem + .4vw, 1.4rem);
    transition: background-color .15s, color .15s;
}
.btn-sk--grey { background: var(--grey); color: #000; }
.btn-sk--grey:hover { background: var(--blue); color: #fff; }
.btn-sk--blue { background: var(--blue); color: #fff; padding: 1rem; }
.btn-sk--blue:hover { background: var(--pink-soft); color: #fff; }
.btn-sk--pink { background: var(--pink); color: #fff; font-weight: 200; padding: 1rem; font-size: clamp(1.15rem, 1rem + .9vw, 1.8rem); }
.btn-sk--pink:hover { background: var(--pink-soft); color: #fff; }
.btn-sk--big { font-weight: 200; font-size: clamp(1.15rem, 1rem + .9vw, 1.8rem); }

/* ---------- Course pages ---------- */
.course-head { display: grid; gap: 1rem; align-items: center; }
.course-head__tag { text-align: center; color: var(--pink); font-weight: 400; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem); line-height: 1.4; }
@media (min-width: 768px) { .course-head { grid-template-columns: 1fr 1fr; } }

.course-layout { display: grid; gap: 2rem; }
@media (min-width: 768px) { .course-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 3rem; } }
.course-aside .caption { color: var(--ink-soft); margin: .75rem 0 1.5rem; }
.pic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 768px) { .pic-grid { grid-template-columns: 1fr; gap: 30px; } }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.duration { display: grid; gap: 1rem; align-items: center; margin-top: 2rem; }
@media (min-width: 768px) { .duration { grid-template-columns: 7fr 3fr; } }

/* ---------- Press / Feedback grids ---------- */
.video-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-bottom: 2.5rem; }
.sub-title { font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); color: var(--ink-soft); margin: 1.5rem 0 1rem; }
.press-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .press-grid { grid-template-columns: repeat(4, 1fr); } }
.press-grid a { display: block; transition: transform .15s, box-shadow .15s; }
.press-grid a:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }

/* ---------- Experience ---------- */
.exp { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.exp img { max-width: 300px; width: 100%; justify-self: center; }
@media (min-width: 768px) { .exp { grid-template-columns: 1fr 2fr; gap: 2rem; } .exp img { justify-self: start; } }
@media (min-width: 992px) { .exp { grid-template-columns: 1fr 3fr; } }

/* ---------- Lists (pastwork) ---------- */
.dot-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.dot-list li { position: relative; padding-left: 1.2em; margin-bottom: .35rem; }
.dot-list li::before { content: "•"; position: absolute; left: 0; color: var(--pink); }

/* ---------- Contact form ---------- */
.contact-form { max-width: 640px; }
.contact-form label { font-weight: 500; color: var(--pink); font-size: var(--fs-topic); }
.contact-form .form-control { border-radius: 0; font-family: inherit; font-size: 1.05rem; padding: .6rem .8rem; }
.contact-form .btn-submit { background: var(--blue); color: #fff; border: 0; border-radius: 0; padding: .7rem 2.5rem; font-weight: 500; font-family: inherit; }
.contact-form .btn-submit:hover:not(:disabled) { background: var(--pink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #e6e6e8; margin-top: clamp(24px, 5vw, 56px); }
.footer-grid { display: grid; gap: 1.5rem; padding-block: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 5fr 5fr 2fr; } .footer-qr { text-align: right; } }
.footer-grid .org { font-weight: 500; font-size: var(--fs-topic); line-height: 1.4; }
.footer-grid address { font-style: normal; margin: 0; color: #000; }
.footer-grid a { color: inherit; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-qr img { width: 130px; }

/* ---------- Modal carousel ---------- */
.modal-body .carousel-item img { width: 100%; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Home header (แถบรูป + เมนูวางทับ เหมือนเดิม) ---------- */
.site-header--over { position: relative; background: #fff; border: 0; backdrop-filter: none; }
.site-header--home { position: relative; background: #bcbec0; border: 0; backdrop-filter: none; }
.home-strip { display: flex; line-height: 0; }
.home-strip img { min-width: 0; width: 100%; height: auto; display: block; }
.site-header--over .navbar { position: absolute; top: 0; left: 0; right: 0; padding: 0; }
.site-header--over .navbar > .wrap { max-width: none; padding-inline: 8px; justify-content: flex-end !important; }
.site-header--over .navbar-toggler { margin-top: 4px; }
.nav-fb-top { display: none; }
@media (max-width: 991.98px) {
    .site-header--over .navbar-collapse { margin-inline: -8px; width: calc(100% + 16px); }
}
@media (min-width: 992px) {
    .site-header--home .navbar { left: 25%; }
    .site-header--inner .navbar { left: 20%; }
    .site-header--over .navbar > .wrap { padding-inline: 0; }
    .site-header--over .navbar-collapse { width: 100%; padding-top: clamp(24px, 3vw, 40px); }
    .site-header--over .navbar-nav { width: 100%; }
    .site-header--over .navbar-nav > .nav-item:not(.nav-fb-item) { flex: 1 1 0; text-align: center; }
    .site-header--over .nav-fb-item { display: none; }
    .site-header--over .nav-link { font-size: clamp(1.15rem, .6rem + 1.1vw, 1.6rem); }
    .nav-fb-top { display: block; position: absolute; top: 6px; right: 24px; z-index: 2; }
}

/* ---------- หน้าอื่น: โลโก้ซ้าย เมนูลอยด้านบน (เหมือนเดิม) ---------- */
.inner-brand { display: block; padding: 8px 2.5vw 4px; line-height: 0; }
.inner-brand img { width: 20%; min-width: 72px; max-width: 134px; height: auto; }
.site-header--inner .navbar-toggler { margin-top: 8px; }
@media (min-width: 992px) { .inner-brand { padding-top: 24px; } .site-header--inner .navbar > .wrap { padding-right: 2.5vw; } }