/* =========================================================
   BANMAI SCHOOL CMS — Public Website Design System
   สีจากโลโก้โรงเรียน: แดง (Primary) / ส้ม (Secondary) / ทอง (Accent)
   ฟอนต์: Krub (หัวข้อ เมนู ปุ่ม ฟอร์ม) + Sarabun (เนื้อหา)
   ========================================================= */
:root {
  --bm-red: #C8201A;
  --bm-red-bright: #E0281F;
  --bm-red-dark: #9E1B14;
  --bm-orange: #E8731A;
  --bm-orange-light: #F39A3D;
  --bm-gold: #F5B53F;
  --bm-bg: #FFFFFF;
  --bm-surface: #FBF7F2;
  --bm-surface-2: #F5EFE8;
  --bm-text: #2F3438;
  --bm-muted: #6B7076;
  --bm-border: #EEE6DD;
  --bm-radius: 14px;
  --bm-radius-sm: 10px;
  --bm-shadow: 0 6px 24px rgba(80, 30, 10, .08);
  --bm-shadow-lg: 0 14px 40px rgba(80, 30, 10, .14);
  --font-head: 'Krub', system-ui, sans-serif;
  --font-body: 'Sarabun', system-ui, sans-serif;
  --bs-primary: var(--bm-red);
  --bs-link-color: var(--bm-red);
  --bs-link-hover-color: var(--bm-red-dark);
  --bs-body-font-family: var(--font-body);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--bm-text);
  background: var(--bm-bg) linear-gradient(160deg, #fff 0%, #fff 55%, #FFF6EE 100%) fixed;
  font-size: 1.0625rem;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6, .font-head, .btn, .nav-link, .form-control, .form-select, .form-label, .form-check-label, .breadcrumb, .badge, .page-link, label, button, input, select, textarea {
  font-family: var(--font-head);
}
.form-control, .form-select, textarea { font-family: var(--font-head); }
a { color: var(--bm-red); text-decoration: none; }
a:hover { color: var(--bm-red-dark); }
img { max-width: 100%; }
.bi { vertical-align: -.125em; flex-shrink: 0; }
.skip-link { position: absolute; z-index: 2000; top: 8px; left: 8px; background: #fff; padding: 8px 14px; border-radius: 8px; }
mark { background: #FFE7A8; padding: 0 2px; border-radius: 3px; }

/* ---------- Buttons ---------- */
.btn-brand { --bs-btn-color:#fff; --bs-btn-bg:var(--bm-red); --bs-btn-border-color:var(--bm-red); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--bm-red-dark); --bs-btn-hover-border-color:var(--bm-red-dark); --bs-btn-active-bg:var(--bm-red-dark); --bs-btn-active-color:#fff; border-radius: 10px; font-weight: 600; }
.btn-outline-brand { --bs-btn-color:var(--bm-red); --bs-btn-border-color:var(--bm-red); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--bm-red); --bs-btn-hover-border-color:var(--bm-red); border-radius: 10px; font-weight: 600; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--bm-gold); outline-offset: 2px; }
.form-control:focus, .form-select:focus { border-color: var(--bm-orange); box-shadow: 0 0 0 .2rem rgba(232, 115, 26, .2); }
.form-check-input:checked { background-color: var(--bm-red); border-color: var(--bm-red); }

/* ---------- Hero / Banner ---------- */
.site-hero { position: relative; height: clamp(300px, 33.85vw, 650px); background: #dfe9f3; overflow: hidden; }
.site-hero--compact { height: clamp(210px, 19vw, 380px); }
.hero-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.carousel-item picture { display: block; height: 100%; }
.hero-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 55% 75% at 12% 18%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 75%); }
.hero-brand-wrap { position: absolute; inset: 0 0 auto 0; z-index: 3; padding-top: clamp(14px, 3.2vw, 56px); pointer-events: none; }
.hero-brand { display: inline-flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); pointer-events: auto; color: inherit; }
.hero-logo { width: clamp(70px, 9vw, 150px); height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.hero-text { display: flex; flex-direction: column; }
.hero-name { font-family: var(--font-head); font-weight: 700; color: var(--bm-red-bright); font-size: clamp(1.6rem, 4.2vw, 4rem); line-height: 1.1; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255,255,255,.9); }
.hero-motto { font-family: var(--font-head); font-weight: 600; color: #222; font-size: clamp(.95rem, 1.75vw, 1.75rem); margin-top: .2em; text-shadow: 0 0 12px rgba(255,255,255,.95); }
.hero-line { width: clamp(40px, 5vw, 90px); height: 4px; background: var(--bm-red); border-radius: 4px; margin-top: .6em; }
.site-hero--compact .hero-logo { width: clamp(60px, 6.5vw, 110px); }
.site-hero--compact .hero-name { font-size: clamp(1.4rem, 3vw, 3rem); }
.site-hero--compact .hero-motto { font-size: clamp(.85rem, 1.3vw, 1.3rem); }
.hero-quote { position: absolute; z-index: 3; right: 5%; top: 13%; max-width: 440px; text-wrap: balance; font-family: var(--font-head); font-style: italic; font-weight: 600; color: #fff; font-size: clamp(1rem, 1.8vw, 1.75rem); line-height: 1.35; transform: rotate(-6deg); text-shadow: 0 2px 12px rgba(0,0,0,.35); text-align: center; }
.hero-swoosh { position: absolute; z-index: 2; left: -4%; bottom: -1px; width: 26%; height: 34%; pointer-events: none; background: linear-gradient(100deg, var(--bm-red) 0%, var(--bm-orange) 60%, var(--bm-gold) 100%); clip-path: path('M0,1000 L0,0 C 300,520 700,860 1000,1000 Z'); clip-path: polygon(0 0, 18% 30%, 40% 58%, 65% 80%, 100% 100%, 0 100%); opacity: .95; }
.hero-swoosh::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.9); clip-path: polygon(0 22%, 20% 50%, 44% 74%, 70% 92%, 100% 100%, 0 100%); }
.hero-arrow { width: 8%; z-index: 4; opacity: 1; }
.hero-arrow-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #222; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 1.2rem; transition: transform .2s; }
.hero-arrow:hover .hero-arrow-btn { transform: scale(1.08); color: var(--bm-red); }
.hero-dots { z-index: 4; margin-bottom: clamp(44px, 4vw, 60px); }
.hero-dots [data-bs-target] { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: #fff; opacity: .9; margin: 0 6px; }
.hero-dots .active { background: var(--bm-red); }
.site-hero--compact .hero-dots { display: none; }

/* ---------- Menu Bar (ใต้ Banner) ---------- */
.menubar-wrap { position: relative; z-index: 20; margin-top: -34px; }
.menubar { background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg); padding: 8px 10px; }
.menubar-nav { gap: 2px; align-items: center; }
.menubar-nav .nav-item + .nav-item .nav-link::before { content: ''; position: absolute; left: -2px; top: 26%; height: 48%; width: 1px; background: var(--bm-border); }
.menubar-nav .nav-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 22px !important; border-radius: 10px; color: #2b2b2b; font-weight: 600; font-size: 1.02rem; white-space: nowrap; transition: background .2s, color .2s; }
.menubar-nav .nav-ic { font-size: 1.25rem; color: #222; }
.menubar-nav .nav-link:hover { color: var(--bm-red); background: #FFF3EA; }
.menubar-nav .nav-link:hover .nav-ic { color: var(--bm-red); }
.menubar-nav .nav-link.active { background: linear-gradient(180deg, var(--bm-red-bright), var(--bm-red)); color: #fff; box-shadow: 0 6px 14px rgba(200, 32, 26, .3); }
.menubar-nav .nav-link.active .nav-ic { color: #fff; }
.menubar-nav .nav-link.active::before { display: none; }
.menubar-nav .nav-link.active::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 9px solid transparent; border-bottom: 0; border-top-color: var(--bm-red); }
.menubar-nav .nav-item:has(+ .nav-item .nav-link.active) + .nav-item .nav-link::before { display: none; }
.menubar-search { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--bm-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #222; transition: all .2s; flex-shrink: 0; }
.menubar-search:hover { border-color: var(--bm-red); color: var(--bm-red); }
.menubar-mini-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--bm-red); }
.menubar-toggler { border: 1.5px solid var(--bm-border); border-radius: 10px; font-size: 1.4rem; padding: 6px 10px; color: #222; }
.menubar-toggler:focus { box-shadow: none; }

/* ---------- Breadcrumb ---------- */
.site-breadcrumb { margin-top: 26px; }
.site-breadcrumb .breadcrumb { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 999px; padding: 8px 18px; font-size: .95rem; margin: 0; display: inline-flex; flex-wrap: wrap; }
.site-breadcrumb .breadcrumb-item a { color: var(--bm-muted); }
.site-breadcrumb .breadcrumb-item a:hover { color: var(--bm-red); }
.site-breadcrumb .breadcrumb-item.active { color: var(--bm-red); font-weight: 600; }
.site-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '›'; color: #bbb; }

/* ---------- Sections ---------- */
.section { padding: 44px 0; }
.section-tight { padding: 14px 0 26px; }
.is-home .home-news { padding-top: 54px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.section-title { border-left: 5px solid var(--bm-red); padding-left: 18px; }
.section-kicker { display: block; font-family: var(--font-head); font-weight: 600; color: var(--bm-red); font-size: 1.05rem; line-height: 1.2; }
.section-title h1, .section-title h2 { font-family: var(--font-head); font-weight: 700; color: var(--bm-red-dark); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; line-height: 1.25; }
.section-more { font-family: var(--font-head); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

.news-date { font-family: var(--font-head); font-size: .9rem; color: #555; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.news-date > .bi { color: var(--bm-red); }

/* Featured news */
.news-featured { display: grid; grid-template-columns: 55% 1fr; background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); overflow: hidden; color: inherit; border: 1px solid #f3ece5; transition: box-shadow .25s, transform .25s; }
.news-featured:hover { box-shadow: var(--bm-shadow-lg); transform: translateY(-2px); color: inherit; }
.nf-img { aspect-ratio: 16 / 7.5; overflow: hidden; }
.nf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-featured:hover .nf-img img { transform: scale(1.04); }
.nf-body { position: relative; padding: 26px 56px 26px 34px; display: flex; flex-direction: column; justify-content: center; }
.nf-body h3 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.7rem); margin: 10px 0 8px; color: #1f1f1f; line-height: 1.35; }
.nf-body p { color: #555; margin: 0; font-size: 1.05rem; }
.nf-chevron, .nc-chevron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--bm-red); font-size: 1.3rem; }

/* News card */
.news-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px; box-shadow: var(--bm-shadow); overflow: hidden; color: inherit; border: 1px solid #f3ece5; transition: box-shadow .25s, transform .25s; }
a.news-card:hover, .news-card:hover { box-shadow: var(--bm-shadow-lg); transform: translateY(-3px); color: inherit; }
.nc-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bm-surface); }
.news-card--archive .nc-img { aspect-ratio: 4 / 3; }
.nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .nc-img img { transform: scale(1.05); }
.nc-body { position: relative; padding: 14px 44px 16px 18px; flex: 1; }
.nc-body h3, .nc-body .h3 { font-size: 1.12rem; font-weight: 700; margin: 6px 0 0; line-height: 1.45; color: #1f1f1f; }
.nc-body .h3 a { color: inherit; }
.nc-body .h3 a:hover { color: var(--bm-red); }
.nc-cat { font-size: .78rem; background: #FFF0E3; color: var(--bm-orange); border-radius: 999px; padding: 1px 10px; font-weight: 600; }
.news-card--archive .nc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; }
.nc-excerpt { color: var(--bm-muted); font-size: .97rem; margin: 8px 0 10px; flex: 1; }
.read-more { font-family: var(--font-head); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 4px; }

/* Quick links (4 columns) */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 8px 0; }
.quick-col { padding: 4px 26px; }
.quick-col + .quick-col { border-left: 1px solid var(--bm-border); }
.quick-col:first-child { padding-left: 4px; }
.quick-title { font-size: 1.15rem; font-weight: 700; color: var(--bm-red); display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.quick-title .bi { font-size: 1.5rem; color: var(--bm-red-bright); }
.quick-list li a { display: flex; gap: 10px; align-items: baseline; padding: 3px 0 3px 4px; color: #333; font-size: 1rem; }
.quick-list li a .bi { color: var(--bm-red); font-size: .8rem; }
.quick-list li a:hover { color: var(--bm-red); transform: translateX(3px); }
.quick-list li a { transition: transform .2s, color .2s; }

/* About + Promo */
.about-row { display: grid; grid-template-columns: 40% 1fr; gap: 20px; }
.about-card { display: grid; grid-template-columns: 44% 1fr; background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); overflow: hidden; color: inherit; border: 1px solid #f3ece5; }
.about-card:hover { color: inherit; box-shadow: var(--bm-shadow-lg); }
.about-img img { width: 100%; height: 100%; object-fit: cover; min-height: 140px; }
.about-text { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.about-brand { display: flex; align-items: center; gap: 10px; }
.about-brand strong { display: block; font-family: var(--font-head); color: var(--bm-red); font-size: 1.15rem; line-height: 1.2; }
.about-brand small { font-family: var(--font-head); color: var(--bm-orange); letter-spacing: .12em; font-weight: 600; font-size: .8rem; }
.about-text p { margin: 0; font-size: .95rem; color: #555; line-height: 1.55; }
.about-more { font-family: var(--font-head); font-weight: 600; color: var(--bm-red); font-size: .92rem; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }
.promo-card { display: flex; align-items: center; background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); border: 1px solid #f3ece5; padding: 14px 18px; }
.promo-item { flex: 1; display: flex; align-items: center; gap: 16px; padding: 8px 14px; color: inherit; border-radius: 10px; transition: background .2s; }
.promo-item:hover { background: #FFF6EF; color: inherit; }
.promo-ic { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; border: 3px solid var(--bm-red); color: var(--bm-red); display: grid; place-items: center; font-size: 1.9rem; }
.promo-item strong { display: block; font-family: var(--font-head); font-size: clamp(1.15rem, 1.8vw, 1.55rem); color: var(--bm-red); line-height: 1.2; }
.promo-item small { display: block; font-family: var(--font-head); font-size: .95rem; color: #333; line-height: 1.4; }
.promo-sep { width: 1px; align-self: stretch; background: var(--bm-border); margin: 6px 4px; }

/* Activity cards */
.act-card { display: block; background: #fff; border-radius: 12px; box-shadow: var(--bm-shadow); overflow: hidden; color: inherit; border: 1px solid #f3ece5; height: 100%; transition: box-shadow .25s, transform .25s; }
.act-card:hover { box-shadow: var(--bm-shadow-lg); transform: translateY(-3px); color: inherit; }
.act-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.act-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.act-card:hover .act-img img { transform: scale(1.05); }
.act-count { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-family: var(--font-head); font-size: .82rem; padding: 3px 10px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.act-body { padding: 14px 18px 16px; }
.act-body h3 { font-size: 1.1rem; font-weight: 700; margin: 6px 0 0; line-height: 1.45; }

/* Content pages */
.content-card { background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); border: 1px solid #f3ece5; padding: clamp(20px, 3.5vw, 40px); }
.content-title { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.15rem); color: #1f1f1f; line-height: 1.35; margin: 8px 0 12px; }
.content-title--bar { border-left: 5px solid var(--bm-red); padding-left: 16px; color: var(--bm-red-dark); margin-bottom: 22px; }
.content-meta { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--font-head); color: var(--bm-muted); font-size: .95rem; margin-bottom: 18px; }
.content-meta .bi { color: var(--bm-red); }
.content-cover { margin: 0 0 20px; border-radius: 12px; overflow: hidden; }
.content-cover img { width: 100%; }
.lead-excerpt { font-size: 1.15rem; color: #444; font-weight: 500; }
.badge-cat { display: inline-block; font-family: var(--font-head); font-weight: 600; background: #FFF0E3; color: var(--bm-orange); border-radius: 999px; padding: 3px 14px; font-size: .88rem; }

.cms-content { font-size: 1.08rem; }
.cms-content h2 { font-size: 1.45rem; font-weight: 700; color: var(--bm-red-dark); margin: 1.6em 0 .6em; }
.cms-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.3em 0 .5em; }
.cms-content h2:first-child, .cms-block:first-child h2:first-child { margin-top: 0; }
.cms-content ul, .cms-content ol { padding-left: 1.4em; }
.cms-content li { margin-bottom: .3em; }
.cms-block { margin-bottom: 1.4rem; }
.cms-block-title { font-size: 1.15rem; font-weight: 700; color: var(--bm-red-dark); margin-bottom: .8rem; }
.cms-img { margin: 0 auto; text-align: center; }
.cms-img-medium { max-width: 70%; }
.cms-img-small { max-width: 45%; }
.cms-img figcaption { font-size: .92rem; color: var(--bm-muted); margin-top: 8px; }
.cms-table table { font-size: 1rem; background: #fff; }
.cms-table thead th { background: linear-gradient(180deg, var(--bm-red-bright), var(--bm-red)); color: #fff; font-family: var(--font-head); font-weight: 600; border-color: var(--bm-red); }
.cms-table tbody tr:nth-child(even) td { background: var(--bm-surface); }
.cms-table caption { font-family: var(--font-head); font-weight: 600; color: var(--bm-text); }
.cms-table { border-radius: 10px; }

.doc-list li + li { margin-top: 10px; }
.doc-list a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--bm-border); border-radius: 12px; color: inherit; transition: border-color .2s, box-shadow .2s; }
.doc-list a:hover { border-color: var(--bm-orange); box-shadow: var(--bm-shadow); color: inherit; }
.doc-ic { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 1.5rem; background: #F2F2F2; color: #555; flex-shrink: 0; }
.doc-pdf { background: #FDE8E7; color: #D0261D; } .doc-doc, .doc-docx { background: #E5EEFC; color: #1E5BC6; }
.doc-xls, .doc-xlsx { background: #E3F4EA; color: #17844A; } .doc-ppt, .doc-pptx { background: #FDEDE3; color: #D0541D; }
.doc-meta { flex: 1; min-width: 0; }
.doc-meta strong { display: block; font-family: var(--font-head); font-weight: 600; }
.doc-meta small { color: var(--bm-muted); }
.doc-dl { font-family: var(--font-head); font-weight: 600; color: var(--bm-red); white-space: nowrap; font-size: .95rem; }

.link-list { display: grid; gap: 10px; }
.link-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--bm-border); border-radius: 12px; background: #fff; color: inherit; }
.link-card:hover { border-color: var(--bm-orange); color: inherit; box-shadow: var(--bm-shadow); }
.link-card strong { display: block; font-family: var(--font-head); }
.link-card small { display: block; color: var(--bm-muted); }
.link-ic { width: 40px; height: 40px; border-radius: 10px; background: #FFF0E3; color: var(--bm-orange); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }

.cms-gallery .gallery-item { display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--bm-surface); }
.cms-gallery .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cms-gallery .gallery-item:hover img { transform: scale(1.06); }

/* Lightbox */
.lightbox-wrap { position: relative; text-align: center; }
.lb-img { max-height: 82vh; max-width: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-caption { color: #fff; font-family: var(--font-head); margin-top: 10px; min-height: 1.5em; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 1.2rem; z-index: 2; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-close { top: 8px; right: 8px; transform: none; }
.modal-backdrop.show { opacity: .8; }

/* Side card */
.side-card { background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); border: 1px solid #f3ece5; padding: 20px; position: sticky; top: 16px; }
.side-title { font-size: 1.15rem; font-weight: 700; color: var(--bm-red-dark); border-bottom: 2px solid #FBE4D6; padding-bottom: 10px; margin-bottom: 12px; }
.side-news { display: flex; gap: 12px; padding: 8px 0; color: inherit; }
.side-news + .side-news { border-top: 1px dashed var(--bm-border); }
.side-news img { width: 86px; height: 62px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.side-news strong { display: block; font-family: var(--font-head); font-size: .95rem; line-height: 1.4; }
.side-news small { color: var(--bm-muted); }
.side-news:hover strong { color: var(--bm-red); }
.side-links li a { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; color: #333; font-size: .98rem; border-bottom: 1px dashed var(--bm-border); }
.side-links li a .bi { color: var(--bm-red); font-size: .75rem; }
.side-links li a:hover { color: var(--bm-red); }

/* Share */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--bm-border); margin-top: 28px; padding-top: 18px; font-family: var(--font-head); }
.share-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 16px; color: #fff; border: 0; font-weight: 600; font-size: .95rem; }
.share-fb { background: #1877F2; } .share-line { background: #06C755; } .share-copy { background: #555; }
.share-btn:hover { color: #fff; filter: brightness(1.08); }

/* Archive filter */
.filter-bar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--bm-border); background: #fff; color: #444; font-size: .95rem; }
.cat-pill:hover { border-color: var(--bm-red); color: var(--bm-red); }
.cat-pill.active { background: var(--bm-red); border-color: var(--bm-red); color: #fff; }
.filter-form { min-width: min(100%, 420px); }
.pagination-brand .page-link { color: var(--bm-red); border-radius: 8px !important; margin: 0 3px; border-color: var(--bm-border); }
.pagination-brand .active .page-link { background: var(--bm-red); border-color: var(--bm-red); color: #fff; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--bm-muted); background: var(--bm-surface); border-radius: var(--bm-radius); }
.empty-state .bi { font-size: 3rem; color: #d8c8b8; margin-bottom: 10px; }

/* Search */
.search-modal { border-radius: 18px; border: 0; }
.search-group { margin-bottom: 30px; }
.group-title { font-size: 1.25rem; font-weight: 700; color: var(--bm-red-dark); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #FBE4D6; }
.search-list { display: grid; gap: 10px; }
.search-item { display: flex; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--bm-border); border-radius: 12px; color: inherit; }
.search-item:hover { border-color: var(--bm-orange); box-shadow: var(--bm-shadow); color: inherit; }
.search-item img { width: 96px; height: 68px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.si-ic { width: 48px; height: 48px; border-radius: 10px; background: #FFF0E3; color: var(--bm-orange); display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.si-body strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.si-meta { display: block; color: var(--bm-orange); font-family: var(--font-head); font-size: .85rem; }
.si-snippet { display: block; color: #555; font-size: .95rem; }

/* Staff */
.staff-card { background: #fff; border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); border: 1px solid #f3ece5; padding: 18px 14px; text-align: center; height: 100%; }
.staff-photo { width: min(150px, 80%); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; border: 4px solid #FFE9D8; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.staff-pos { color: var(--bm-red); font-family: var(--font-head); font-weight: 600; font-size: .92rem; margin: 0; }
.staff-sec { color: var(--bm-muted); font-size: .88rem; margin: 2px 0 0; }
.staff-contact span { display: block; color: var(--bm-muted); }

.info-list li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--bm-border); }
.info-list strong { font-family: var(--font-head); color: var(--bm-red-dark); }
.contact-list li { display: flex; gap: 14px; margin-bottom: 16px; }
.ci { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #FFF0E3; color: var(--bm-red); display: grid; place-items: center; font-size: 1.2rem; }
.error-code { font-family: var(--font-head); font-size: 6rem; font-weight: 700; color: var(--bm-red); line-height: 1; }

/* Forms */
.cms-form { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); padding: clamp(18px, 3vw, 30px); }
.content-card > .cms-form, .col-lg-7 .content-card > .cms-form { background: transparent; border: 0; padding: 0; }
.cms-form-title { font-size: 1.3rem; font-weight: 700; color: var(--bm-red-dark); margin-bottom: 8px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anon-switch { background: #fff; border: 1px dashed var(--bm-orange); border-radius: 10px; padding: 10px 14px 10px 3.2em; }
.cms-form.is-anon .identity-field { display: none; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; color: #fff; }
.footer-main { background: linear-gradient(100deg, #A9150F 0%, #C8201A 45%, #D52A1E 100%); padding: 30px 0; position: relative; overflow: hidden; }
.footer-main::after { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 24px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 16px; color: #fff; padding-right: 24px; border-right: 1px solid rgba(255,255,255,.35); }
.footer-brand:hover { color: #fff; }
.footer-brand img { width: 84px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.footer-brand strong { display: block; font-family: var(--font-head); font-size: 1.65rem; line-height: 1.2; }
.footer-brand small { display: block; font-family: var(--font-head); letter-spacing: .14em; font-size: 1rem; }
.footer-contact { margin: 0; padding-right: 24px; border-right: 1px solid rgba(255,255,255,.35); }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; font-size: .98rem; }
.footer-contact .bi { margin-top: 5px; }
.footer-contact a { color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.footer-social > a { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--bm-red); display: grid; place-items: center; font-size: 1.35rem; transition: transform .2s; }
.footer-social > a:hover { transform: translateY(-3px); color: var(--bm-red-dark); }
.footer-links { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 6px 0 0; font-size: .92rem; }
.footer-links a { color: #FFE3D2; }
.footer-bottom { background: linear-gradient(90deg, #E2561C, #D33A1C 50%, #C8201A); padding: 10px 0; font-size: .92rem; font-family: var(--font-head); }
.footer-bottom a { color: #fff; }
.footer-legal .sep { margin: 0 14px; opacity: .6; }

/* ---------- Chatbot ---------- */
.chatbot { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--font-head); }
.chat-fab { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: 0 0 0 4px var(--bm-orange), 0 10px 26px rgba(0,0,0,.25); padding: 6px; transition: transform .2s; }
.chat-fab:hover { transform: scale(1.06); }
.chat-fab img { width: 100%; height: 100%; object-fit: contain; }
.chat-teaser { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--bm-shadow-lg); padding: 10px 14px 8px; min-width: 200px; margin-right: 0; }
.chat-teaser::after { content: ''; position: absolute; right: 30px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.chat-teaser-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 5px 2px; text-align: left; width: 100%; }
.chat-teaser-item strong { display: block; font-size: .92rem; line-height: 1.2; color: #222; }
.chat-teaser-item small { display: block; font-size: .78rem; color: #555; line-height: 1.2; }
.ct-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
.ct-red { background: var(--bm-red-bright); } .ct-orange { background: var(--bm-orange); }
.chat-teaser-close { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #222; color: #fff; display: grid; place-items: center; font-size: .65rem; }
.chat-panel { width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(100deg, var(--bm-red-dark), var(--bm-red) 60%, var(--bm-orange)); color: #fff; }
.chat-head img { background: #fff; border-radius: 50%; padding: 3px; }
.chat-head strong { display: block; line-height: 1.2; }
.chat-head small { opacity: .85; font-size: .78rem; }
.chat-close { margin-left: auto; border: 0; background: rgba(255,255,255,.2); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.chat-tabs { display: flex; border-bottom: 1px solid var(--bm-border); }
.chat-tabs button { flex: 1; border: 0; background: #fff; padding: 9px; font-weight: 600; color: #777; display: inline-flex; justify-content: center; gap: 6px; align-items: center; border-bottom: 3px solid transparent; }
.chat-tabs button.active { color: var(--bm-red); border-bottom-color: var(--bm-red); }
.chat-body, .chat-faq { flex: 1; overflow-y: auto; padding: 14px; background: var(--bm-surface); font-family: var(--font-body); }
.chat-faq[hidden], .chat-body[hidden] { display: none; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; margin-bottom: 10px; font-size: .97rem; line-height: 1.55; white-space: pre-line; word-wrap: break-word; }
.msg-bot { background: #fff; border: 1px solid var(--bm-border); border-bottom-left-radius: 4px; }
.msg-user { background: var(--bm-red); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.msg-links { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.msg-links a { font-family: var(--font-head); font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.msg-typing { color: #999; font-style: italic; }
.chat-suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; background: #fff; max-height: 90px; overflow-y: auto; }
.chip { border: 1px solid #F3C9A8; background: #FFF6EF; color: var(--bm-red-dark); border-radius: 999px; padding: 4px 11px; font-size: .82rem; font-family: var(--font-head); }
.chip:hover { background: var(--bm-orange); color: #fff; border-color: var(--bm-orange); }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; background: #fff; }
.chat-input input { flex: 1; border: 1.5px solid var(--bm-border); border-radius: 999px; padding: 9px 16px; font-family: var(--font-head); }
.chat-input input:focus { outline: none; border-color: var(--bm-orange); }
.chat-input button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bm-red); color: #fff; display: grid; place-items: center; }
.chat-note { font-size: .7rem; color: #999; text-align: center; margin: 0; padding: 0 10px 8px; background: #fff; }
.faq-item { background: #fff; border: 1px solid var(--bm-border); border-radius: 10px; margin-bottom: 8px; }
.faq-item summary { padding: 10px 12px; font-family: var(--font-head); font-weight: 600; cursor: pointer; list-style: none; display: flex; gap: 8px; }
.faq-item summary::before { content: 'Q'; color: var(--bm-red); font-weight: 700; }
.faq-item div { padding: 0 12px 12px; color: #444; font-size: .95rem; white-space: pre-line; }

/* Popup / cookie / preview */
.popup-content { border-radius: 16px; overflow: hidden; border: 0; }
.popup-close { position: absolute; right: 10px; top: 10px; background-color: #fff; border-radius: 50%; padding: 10px; opacity: 1; z-index: 2; }
.cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 1035; max-width: 420px; background: #fff; border-radius: 14px; box-shadow: var(--bm-shadow-lg); padding: 12px 16px; display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.preview-bar { position: sticky; top: 0; z-index: 1050; background: #222; color: #FFD27A; text-align: center; padding: 8px; font-family: var(--font-head); font-size: .95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .menubar-nav .nav-link { padding: 11px 14px !important; font-size: .97rem; gap: 7px; }
  .quick-col { padding: 4px 16px; }
}
@media (max-width: 991.98px) {
  .menubar-wrap { margin-top: -26px; }
  .menubar { padding: 8px 12px; }
  .menubar-nav { padding: 8px 0 4px; align-items: stretch; }
  .menubar-nav .nav-link { padding: 11px 14px !important; }
  .menubar-nav .nav-item + .nav-item .nav-link::before { display: none; }
  .menubar-nav .nav-link.active::after { display: none; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .quick-col:nth-child(3) { border-left: 0; padding-left: 4px; }
  .about-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-social { grid-column: 1 / -1; }
  .footer-contact { border-right: 0; }
  .hero-quote { display: none; }
  .side-card { position: static; }
}
@media (max-width: 767.98px) {
  body { font-size: 1rem; }
  .is-home .site-hero { height: min(125vw, 74vh); }
  .site-hero--compact { height: 46vw; min-height: 190px; }
  .hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 32%, rgba(255,255,255,0) 55%); }
  .hero-arrow { display: none; }
  .hero-dots { margin-bottom: 40px; }
  .hero-swoosh { width: 55%; height: 16%; }
  .news-featured { grid-template-columns: 1fr; }
  .nf-img { aspect-ratio: 16 / 9; }
  .nf-body { padding: 18px 44px 20px 20px; }
  .section { padding: 30px 0; }
  .is-home .home-news { padding-top: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-col, .quick-col + .quick-col { border-left: 0; padding: 0 4px; }
  .quick-col + .quick-col { border-top: 1px solid var(--bm-border); padding-top: 14px; }
  .about-card { grid-template-columns: 1fr; }
  .about-img img { aspect-ratio: 16 / 8; }
  .promo-card { flex-direction: column; align-items: stretch; }
  .promo-sep { width: auto; height: 1px; margin: 4px 0; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-brand { border-right: 0; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,.3); }
  .footer-contact { padding: 0; }
  .footer-social { justify-content: flex-start; }
  .chatbot { right: 12px; bottom: 12px; }
  .chat-fab { width: 62px; height: 62px; }
  .chat-teaser { display: none !important; }
  .info-list li { grid-template-columns: 1fr; gap: 0; }
  .cms-img-medium, .cms-img-small { max-width: 100%; }
  .doc-list a { flex-wrap: wrap; }
  .doc-dl { width: 100%; text-align: right; }
  .cookie-bar { left: 10px; right: 90px; }
  .filter-form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-hero, .menubar-wrap, .chatbot, .site-footer, .share-bar, aside, .cookie-bar { display: none !important; }
}
/* ordering: แผงแชทอยู่เหนือปุ่มโลโก้ */
.chat-fab { order: 2; }
.site-hero--compact .hero-quote { display: none; }
.consent-box { background: #fff; border: 1px solid var(--bm-border); border-radius: 10px; padding: 12px 14px; }
.consent-box .form-check-label { font-family: var(--font-body); font-size: .97rem; }
.cms-form.is-anon .consent-box.identity-field { display: none; }