:root {
  --bk-font-body:  'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, sans-serif;
  --bk-font-head:  'Noto Serif Thai', 'IBM Plex Sans Thai', Georgia, serif;
  --bk-font-brand: 'Noto Serif Thai', Georgia, serif;
  --bk-bg:         var(--lux-bg, #F7F2EA);
  --bk-surface:    var(--lux-surface, #FFFFFF);
  --bk-surface-2:  var(--lux-bg-soft, #FBF8F3);
  --bk-tint:       var(--lux-cream, #F0E8DA);
  --bk-ink:        var(--lux-espresso, #2B2118);
  --bk-ink-2:      var(--lux-ink-muted, #7C6A52);
  --bk-line:       var(--lux-border, #E7DCCB);
  --bk-line-soft:  var(--lux-border-soft, #F1EAE0);
  --bk-brand:      var(--bk-brown, #75593C);   
  --bk-brand-hover:#5E4630;
  --bk-on-brand:   #FFFFFF;   
  --bk-btn-a:      #7A5C3C;
  --bk-btn-b:      #907040;
  --bk-ok:         var(--lux-green-ink, #4E6B3E);
  --bk-warn:       var(--lux-amber-ink, #8C5E1C);
  --bk-bad:        var(--lux-red-ink, #8E3E30);
  --bk-r-card:  18px;
  --bk-r-ctl:   12px;
  --bk-r-pill:  999px;
  --bk-shadow-1: 0 1px 2px rgba(43,33,24,.05), 0 8px 24px rgba(43,33,24,.06);
  --bk-shadow-2: 0 2px 6px rgba(43,33,24,.08), 0 16px 40px rgba(43,33,24,.12);
  --bk-ring:     0 0 0 3px rgba(117,89,60,.30);
  --bk-top-h:    60px;
  --bk-top-offset: 70px;
}
@media (max-width: 767px) { :root { --bk-top-offset: 56px; } }
html[data-theme="dark"] {
  --bk-brand:       #D5B68A;   
  --bk-brand-hover: #E6CBA3;
  --bk-on-brand:    #1B150F;   
  --bk-btn-a:       #C9A576;   
  --bk-btn-b:       #D0AC63;
  --bk-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  --bk-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.45);
  --bk-ring:     0 0 0 3px rgba(213,182,138,.40);
  --lux-bg:          #17130E;
  --lux-bg-soft:     #1F1A13;
  --lux-surface:     #241E16;
  --lux-cream:       #2E2619;
  --lux-gold:        #D0AC63;
  --lux-gold-ink:    #D8B978;
  --lux-gold-soft:   #E0C489;
  --lux-gold-pale:   #3A2F1D;
  --lux-bronze:      #C9A576;
  --lux-espresso:    #F2EADD;
  --lux-ink-muted:   #B7A88F;
  --lux-border:      #352C1F;
  --lux-border-soft: #2A2318;
  --lux-shadow:      0 2px 12px rgba(0, 0, 0, .45);
  --lux-shadow-lg:   0 8px 28px rgba(0, 0, 0, .6);
  --lux-green:       #8FAE7C;
  --lux-green-bg:    #232A1D;
  --lux-amber:       #D9A85E;
  --lux-amber-bg:    #2E2416;
  --lux-red:         #CE7C6C;
  --lux-red-bg:      #2E1E1A;
  --lux-blue:        #8DA2B8;
  --lux-blue-bg:     #1D242B;
  --lux-green-ink:   #A9C495;
  --lux-amber-ink:   #E8BE74;
  --lux-blue-ink:    #A6B9CC;
  --lux-red-ink:     #E09383;
  color-scheme: dark;
}
html body,
html body :where(*):not(i,svg,svg *,code,pre,kbd,samp,.bk-wordmark,.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,[class*=" fa-"],[class^="fa-"]) {
  font-family: var(--bk-font-body) !important;
}
html body :where(h1, h2, h3, h4, .bk-h):not(.bk-wordmark) {
  font-family: var(--bk-font-head) !important;
}
html body :where(h1, h2, h3) { text-wrap: balance; }
html body :where(p, li) { text-wrap: pretty; }
.bk-wordmark { font-family: var(--bk-font-brand) !important; letter-spacing: .04em; }
.bk-num { font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bk-brand);
  outline-offset: 2px;
}
.bk-top {
  position: sticky; top: 0; z-index: 900;
  padding: 10px 16px 0;
  background: linear-gradient(var(--bk-bg) 70%, transparent);
}
.bk-top-in {
  max-width: 1200px; margin: 0 auto;
  height: var(--bk-top-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 10px 0 22px;
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-pill);
  box-shadow: var(--bk-shadow-1);
}
.bk-top-brand { white-space: nowrap; flex-shrink: 0; }
.bk-top-links { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.bk-top-scroll {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.bk-top-scroll::-webkit-scrollbar { display: none; }
.bk-top-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 12px; border-radius: var(--bk-r-pill);
  font-size: .9rem; font-weight: 500; color: var(--bk-ink-2) !important;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  list-style: none; user-select: none;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.bk-top-link::-webkit-details-marker { display: none; }
.bk-top-link:hover { background: var(--bk-tint); color: var(--bk-ink) !important; }
.bk-top-link.is-on { color: var(--bk-ink) !important; font-weight: 700; background: var(--bk-tint); }
.bk-top-more { position: relative; flex-shrink: 0; }
.bk-top-more[open] > .bk-top-link { background: var(--bk-tint); color: var(--bk-ink) !important; }
.bk-top-more svg { transition: transform .15s ease-out; }
.bk-top-more[open] svg { transform: rotate(180deg); }
.bk-top-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 260px; padding: 6px;
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: 16px; box-shadow: var(--bk-shadow-2); z-index: 901;
}
.bk-top-menu a, .bk-top-panel a.bk-top-item {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-size: .9rem; color: var(--bk-ink) !important; text-decoration: none;
}
.bk-top-menu a:hover, .bk-top-panel a.bk-top-item:hover { background: var(--bk-tint); }
.bk-top-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bk-iconbtn {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--bk-r-pill);
  background: transparent; color: var(--bk-ink) !important; cursor: pointer; padding: 0;
  transition: background-color .15s ease-out;
}
.bk-iconbtn:hover { background: var(--bk-tint); }
#bk-nav-burger, #bk-nav-panel { display: none; }
.bk-top-panel {
  max-width: 1200px; margin: 8px auto 0;
  max-height: calc(100vh - 90px); overflow-y: auto;
  padding: 8px; background: var(--bk-surface);
  border: 1px solid var(--bk-line); border-radius: 16px; box-shadow: var(--bk-shadow-2);
}
.bk-top-panel-h {
  margin: 14px 12px 4px; font-size: .78rem; font-weight: 700; color: var(--bk-ink-2);
}
.bk-top-panel hr { border: 0; border-top: 1px solid var(--bk-line-soft); margin: 6px 4px; }
.bk-sm { display: none; }
@media (max-width: 420px) { .bk-lg { display: none; } .bk-sm { display: inline; } }
@media (max-width: 767px) {
  .bk-top { padding: 0; background: var(--bk-bg); }
  .bk-top-in {
    height: 56px; border-radius: 0; border-width: 0 0 1px; box-shadow: none;
    padding: 0 8px 0 16px; gap: 8px;
  }
  #bk-nav-desktop, .bk-top-actions .bk-top-theme { display: none !important; }
  #bk-nav-burger { display: inline-flex; }
  .bk-top-actions { margin-left: auto; gap: 2px; }
  #bk-nav-panel.open { display: block; margin: 0; border-radius: 0 0 16px 16px; border-width: 0 0 1px; }
}
.bk-pagehead {
  max-width: var(--bk-w, 1200px); margin: 0 auto; padding: 28px var(--bk-px, 24px) 8px;
  box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px;
}
.bk-pagehead-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: var(--bk-ink-2); }
.bk-pagehead .bk-crumbs { margin: 0; }
.bk-crumbs a { color: var(--bk-ink-2) !important; text-decoration: none; }
.bk-crumbs a:hover { color: var(--bk-ink) !important; text-decoration: underline; }
.bk-crumbs [aria-current] { color: var(--bk-ink); }
.bk-pagehead h1 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.3; color: var(--bk-ink); }
.bk-pagehead p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--bk-ink-2); max-width: 70ch; }
.bk-pagehead-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) { .bk-pagehead { padding: 18px 16px 4px; } }
.bk-pagehead-meta { font-size: .85rem; color: var(--bk-ink-2); display: inline-flex; align-items: center; gap: 6px; }
.bk-subnav {
  max-width: var(--bk-w, 1200px); margin: 0 auto; padding: 12px var(--bk-px, 24px) 0; box-sizing: border-box;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.bk-subnav::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .bk-subnav { padding: 10px 16px 0; } }
.bk-subnav.bk-subnav--inline { max-width: none; padding: 0; margin: 0 0 18px; }
.bk-subnav[style*="--bk-w:none"] { max-width: none; padding-left: 16px; padding-right: 16px; }
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--bk-r-pill);
  border: 1px solid var(--bk-line); background: var(--bk-surface); color: var(--bk-ink) !important;
  font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.bk-btn:hover { background: var(--bk-tint); }
.bk-btn:disabled, .bk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bk-btn--primary { background: var(--bk-brand); border-color: var(--bk-brand); color: var(--bk-on-brand) !important; }
.bk-btn--primary:hover { background: var(--bk-brand-hover); border-color: var(--bk-brand-hover); }
.bk-btn--sm { min-height: 40px; padding: 0 16px; font-size: .88rem; }
.bk-input {
  width: 100%; min-height: 48px; padding: 0 16px;
  background: var(--bk-surface); color: var(--bk-ink);
  border: 1px solid var(--bk-line); border-radius: var(--bk-r-ctl);
  font-size: 1rem;
}
.bk-input:focus { outline: none; border-color: var(--bk-brand); box-shadow: var(--bk-ring); }
.bk-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--bk-r-pill); border: 1px solid var(--bk-line);
  background: var(--bk-surface); color: var(--bk-ink) !important;
  font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.bk-chip:hover { border-color: var(--bk-brand); }
.bk-chip.is-on, .bk-chip[aria-pressed="true"] { background: var(--bk-brand); border-color: var(--bk-brand); color: var(--bk-on-brand) !important; }
.bk-card {
  background: var(--bk-surface); border: 1px solid transparent;
  border-radius: var(--bk-r-card); box-shadow: var(--bk-shadow-1);
}
html[data-theme="dark"] .bk-card { border-color: var(--bk-line); }
.bk-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
  border-radius: var(--bk-r-pill); background: var(--bk-tint); color: var(--bk-ink);
  font-size: .78rem; font-weight: 600;
}
.bk-state { padding: 32px 20px; text-align: center; color: var(--bk-ink-2); line-height: 1.6; }
.bk-state strong { display: block; color: var(--bk-ink); font-size: 1.05rem; margin-bottom: 4px; }
.bk-state--bad strong { color: var(--bk-bad); }
.bk-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bk-tint) 25%, var(--bk-surface-2) 50%, var(--bk-tint) 75%);
  background-size: 200% 100%; animation: bk-shimmer 1.4s ease-in-out infinite;
}
@keyframes bk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .bk-skel { animation: none; }
  .bk-top-link, .bk-iconbtn, .bk-btn, .bk-top-more svg { transition: none; }
}
@media print {
  .bk-top { display: none !important; }
}
html:not([data-theme="dark"]) :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-stone-400, .text-slate-400) { color: var(--bk-ink-2) !important; }
html:not([data-theme="dark"]) :is(.text-gray-600, .text-gray-700, .text-stone-600) { color: #5A4A38 !important; }
html:not([data-theme="dark"]) :is(.text-green-400, .text-green-500, .text-green-600, .text-emerald-400, .text-emerald-500, .text-emerald-600) { color: #3F6B32 !important; }
html:not([data-theme="dark"]) :is(.text-red-300, .text-red-400, .text-red-500, .text-rose-500) { color: #A33A2A !important; }
html:not([data-theme="dark"]) :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-yellow-500, .text-yellow-600) { color: #8C5E1C !important; }
html:not([data-theme="dark"]) :is(.text-orange-400, .text-orange-500, .text-orange-600) { color: #A4470F !important; }
html:not([data-theme="dark"]) :is(.text-blue-400, .text-blue-500) { color: #2F5A9E !important; }
html:not([data-theme="dark"]) :is(.text-purple-400, .text-purple-500, .text-indigo-500) { color: #6B3FA0 !important; }
:is(.bg-amber-500, .bg-amber-600):is(.text-white, .btn-primary) { background-color: #B45309 !important; }
:is(.bg-green-500, .bg-green-600):is(.text-white, .btn-primary) { background-color: #15803D !important; }
.bg-orange-500:is(.text-white, .btn-primary) { background-color: #C2410C !important; }
.bg-red-500:is(.text-white, .btn-primary) { background-color: #DC2626 !important; }
.bg-purple-500:is(.text-white, .btn-primary) { background-color: #9333EA !important; }
.bg-yellow-400:is(.text-white, .btn-primary) { background-color: #A16207 !important; }
:is(.bg-amber-500, .bg-amber-600):is(.text-white, .btn-primary)[class*="hover:bg-"]:hover { background-color: #92400E !important; }
:is(.bg-green-500, .bg-green-600):is(.text-white, .btn-primary)[class*="hover:bg-"]:hover { background-color: #166534 !important; }
.bg-orange-500:is(.text-white, .btn-primary)[class*="hover:bg-"]:hover { background-color: #9A3412 !important; }
.bg-red-500:is(.text-white, .btn-primary)[class*="hover:bg-"]:hover { background-color: #B91C1C !important; }
.bg-purple-500:is(.text-white, .btn-primary)[class*="hover:bg-"]:hover { background-color: #7E22CE !important; }
html[data-theme="dark"] {
  --bk-brown-dark: #EADCC6;
  --bk-brown:      #D5B68A;
  --bk-brown-soft: #C9A576;
  --dk:            #F2EADD;
}
html[data-theme="dark"] [style*="var(--bk-brown-dark),var(--bk-brown-soft)"]:is(.text-white),
html[data-theme="dark"] [style*="var(--bk-brown-dark),var(--bk-brown-soft)"] .text-white { color: var(--bk-on-brand, #1B150F) !important; }
html[data-theme="dark"] :is(.text-dk, .text-gray-900, .text-gray-800, .text-gray-700, .text-stone-800, .text-stone-700, .text-slate-800, .text-slate-700, .text-amber-900) { color: var(--bk-ink) !important; }
html[data-theme="dark"] :is(.text-gray-600, .text-gray-500, .text-stone-600, .text-stone-500, .text-slate-600, .text-slate-500) { color: #CBBFAD !important; }
html[data-theme="dark"] :is(.text-gray-400, .text-gray-300, .text-stone-400, .text-stone-300, .text-slate-400) { color: var(--bk-ink-2) !important; }
html[data-theme="dark"] :is(.text-amber-800, .text-amber-700, .text-amber-600, .text-amber-500, .text-yellow-800, .text-yellow-700, .text-yellow-600, .text-br) { color: #E0C489 !important; }
html[data-theme="dark"] :is(.text-orange-800, .text-orange-700, .text-orange-600, .text-orange-500) { color: #F0B27A !important; }
html[data-theme="dark"] :is(.text-green-800, .text-green-700, .text-green-600, .text-green-500, .text-emerald-600, .text-emerald-500, .text-teal-800) { color: #A9C495 !important; }
html[data-theme="dark"] :is(.text-red-800, .text-red-700, .text-red-600, .text-red-500, .text-rose-500) { color: #E09383 !important; }
html[data-theme="dark"] :is(.text-blue-800, .text-blue-700, .text-blue-600, .text-blue-500, .text-indigo-800, .text-indigo-700, .text-indigo-600) { color: #A6B9CC !important; }
html[data-theme="dark"] :is(.text-purple-800, .text-purple-700, .text-purple-600, .text-purple-500) { color: #CDB6EA !important; }
html[data-theme="dark"] :is(.bg-white, .bg-gray-50, .bg-stone-50, .bg-slate-50) { background-color: var(--lux-surface) !important; }
html[data-theme="dark"] :is(.bg-gray-100, .bg-stone-100, .bg-gray-200, .bg-stone-200) { background-color: var(--lux-cream) !important; }
html[data-theme="dark"] :is(.bg-amber-50, .bg-amber-100, .bg-orange-50, .bg-orange-100, .bg-yellow-50, .bg-yellow-100) { background-color: var(--lux-amber-bg) !important; }
html[data-theme="dark"] :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-teal-100) { background-color: var(--lux-green-bg) !important; }
html[data-theme="dark"] [class*="bg-gradient-to-"]:is(.from-white, .from-gray-50, .from-stone-50, .from-stone-100, .from-amber-50, .from-amber-100, .from-orange-50, .from-yellow-50, .from-sky-50, .from-blue-50, .from-green-50, .from-emerald-50) {
  background-image: linear-gradient(135deg, var(--lux-bg-soft, #1F1A13), var(--lux-surface, #241E16)) !important;
}
html[data-theme="dark"] :is(.btn-primary, .lux-btn) { color: var(--bk-on-brand, #1B150F); }
html[data-theme="dark"] :is(.bg-red-50, .bg-red-100) { background-color: var(--lux-red-bg) !important; }
html[data-theme="dark"] :is(.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100) { background-color: var(--lux-blue-bg) !important; }
html[data-theme="dark"] :is(.bg-purple-50, .bg-purple-100) { background-color: #28202F !important; }
html[data-theme="dark"] :is(.border-gray-50, .border-gray-100, .border-gray-200, .border-gray-300, .border-stone-100, .border-stone-200, .border-amber-100, .border-amber-200, .border-amber-300, .border-green-100, .border-green-200, .border-red-100, .border-red-200, .border-blue-100, .border-blue-200, .border-yellow-200) { border-color: var(--lux-border) !important; }
html[data-theme="dark"] .bk-skip { color: #1B150F !important; }
html[data-theme="dark"] :is([style*="background:var(--lux-espresso)" i], [style*="background: var(--lux-espresso)" i]) { color: var(--bk-on-brand, #1B150F) !important; }
html[data-theme="dark"] :is(.bg-br, [style*="background:var(--bk-brown" i], [style*="background: var(--bk-brown" i], [style*="background:var(--lux-bronze" i], [style*="background:var(--lux-gold" i], [style*="var(--bk-btn-a" i]):is(.text-white),
html[data-theme="dark"] :is(.bg-br, [style*="background:var(--bk-brown" i], [style*="background: var(--bk-brown" i], [style*="background:var(--lux-bronze" i], [style*="background:var(--lux-gold" i], [style*="var(--bk-btn-a" i]) .text-white { color: var(--bk-on-brand, #1B150F) !important; }