
.hidden { display: none !important; }
[hidden] { display: none !important; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
table, pre { max-width: 100%; }
pre { overflow-x: auto; }
@media (max-width: 640px) {
  button, .btn, a.btn, .side-item, .bnav-item,
  input[type="submit"], input[type="button"], [role="button"],
  .btn-xs, .btn-sm, .btn.sm,
  .modal-header > button, .th-ctrls button, .th-unpin, .th-mv,
  .nav-fold > summary {
    min-height: 44px !important;
  }
  .modal-header > button, .th-ctrls button, .th-unpin, .th-mv {
    min-width: 44px !important;
  }
  .nav-cat > summary,
  #sidebar a,
  #related-strip a {
    min-height: 44px !important;
  }
  a.chip, .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  input, select, textarea { font-size: max(16px, 1em); }
}
@media (max-width: 600px) {
  [style*="1fr 1fr 1fr 1fr"],
  [style*="repeat(4,"], [style*="repeat(5,"], [style*="repeat(6,"],
  [style*="repeat(7,"], [style*="repeat(8,"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  [style*="repeat(3,"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="130px"]):not([style*="155px"]):not([style*="170px"]) {
    grid-template-columns: 1fr !important;
  }
}
#cat-chips { padding-right: 132px; }
@media (hover: hover) and (pointer: fine) {
  #bk-fab-chat:hover,
  #bk-fab-chat:focus-visible {
    width: auto !important;
    padding: 0 18px 0 14px !important;
    gap: 8px !important;
  }
  #bk-fab-chat:hover #bk-fab-label,
  #bk-fab-chat:focus-visible #bk-fab-label {
    max-width: 160px !important;
    opacity: 1 !important;
  }
}
.bk-busy {
  opacity: .62 !important;
  cursor: progress !important;
}
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  @supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
  }
}
@media (max-width: 640px) {
  #bk-site-nav > div {
    flex-wrap: wrap;
    row-gap: .45rem;
    column-gap: .7rem;
  }
  #bk-site-nav > div > a[href="/dashboard"],
  #bk-site-nav > div > a[href="/login"] { margin-left: auto; }
  #bk-site-nav > div > div[style*="overflow-x"] {
    justify-content: flex-start !important;
  }
}
#bk-viewer{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center;
  background:rgba(12,10,8,.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#bk-viewer.on{ display:flex; }
#bk-viewer .bk-v-img{
  max-width:94vw; max-height:86vh; border-radius:12px; object-fit:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
#bk-viewer button{
  position:absolute; border:none; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border-radius:999px;
  width:46px; height:46px; font-size:1.05rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
#bk-viewer button:hover{ background:rgba(255,255,255,.26); }
#bk-viewer .bk-v-close{ top:16px; right:16px; }
#bk-viewer .bk-v-prev{ left:14px;  top:50%; transform:translateY(-50%); }
#bk-viewer .bk-v-next{ right:14px; top:50%; transform:translateY(-50%); }
#bk-viewer .bk-v-bar{
  position:absolute; left:0; right:0; bottom:0; padding:14px 18px 18px;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  color:#fff; font-size:.86rem;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
  pointer-events:none;
}
#bk-viewer .bk-v-cap{ opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bk-viewer .bk-v-cnt{ opacity:.75; flex-shrink:0; font-variant-numeric:tabular-nums; }
img[data-zoom]{ cursor:zoom-in; }
@media (max-width:640px){
  #bk-viewer .bk-v-prev{ left:6px; }
  #bk-viewer .bk-v-next{ right:6px; }
  #bk-viewer button{ width:40px; height:40px; }
}
@media (max-width: 640px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table th, table td { white-space: nowrap; }
  .overflow-x-auto > table,
  [style*="overflow-x:auto"] > table,
  [style*="overflow-x: auto"] > table { display: table; overflow-x: visible; }
  [style*="font-size:12px"], [style*="font-size: 12px"],
  [style*="font-size:12px"], [style*="font-size: 12px"],
  [style*="font-size:12px"], [style*="font-size: 12px"],
  .text-\[10px\], .text-\[11px\] { font-size: 12px !important; }
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
}
html.bk-cookie-open .theme-toggle,
html.bk-cookie-open #bk-assist-btn,
html.bk-cookie-open #bk-search-btn,
html.bk-cookie-open .bottom-nav,
html.bk-cookie-open #bottom-nav,
html.bk-cookie-open nav[class*="bottom"],
html.bk-cookie-open .bar {
  bottom: calc(var(--bk-cookie-h, 0px) + 12px) !important;
  transition: bottom .18s ease;
}
html.bk-cookie-open #bk-search-btn { bottom: calc(var(--bk-cookie-h, 0px) + 76px) !important; }
html.bk-cookie-open #bk-ugc-fab {
  bottom: calc(var(--bk-cookie-h, 0px) + 84px) !important;
}
body:has(#sidebar) #bk-guide-btn,
body:has(#sidebar) #bk-to-top {
  left: 236px !important;
}
html.bk-cookie-open #bk-fab,
html.bk-cookie-open #bk-fab-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease;
}
html.bk-cookie-open body { padding-bottom: calc(var(--bk-cookie-h, 0px) + 8px); }
html.bk-cookie-open .sidebar,
html.bk-cookie-open .side-rail,
html.bk-cookie-open aside[class*="side"],
html.bk-cookie-open nav[class*="side"] {
  padding-bottom: calc(var(--bk-cookie-h, 0px) + 12px) !important;
  max-height: calc(100vh - 56px - var(--bk-cookie-h, 0px)) !important;
}
@media (max-width: 768px) {
  body { padding-bottom: 96px; }
  body:has(.bottom-nav) #bk-fab,
  body:has(.bottom-nav) .theme-toggle {
    bottom: calc(96px + var(--bk-cookie-h, 0px)) !important;
  }
  body:has(.bottom-nav) #bk-fab-panel {
    bottom: calc(160px + var(--bk-cookie-h, 0px)) !important;
  }
  body[data-has-bottom-nav] #bk-fab,
  body[data-has-bottom-nav] .theme-toggle {
    bottom: calc(96px + var(--bk-cookie-h, 0px)) !important;
  }
}
button:active:not(:disabled),
[role="button"]:active,
.btn:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
  transform: scale(.98);
  filter: brightness(.95);
  transition: transform .08s ease, filter .08s ease;
}
button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled),
  [role="button"]:active,
  .btn:active:not(:disabled),
  input[type="submit"]:active:not(:disabled) { transform: none; }
}
.text-br  { color: var(--bk-brown); }
.text-dk  { color: #1E1510; }
.bg-br    { background-color: var(--bk-brown-soft); }
.border-br{ border-color: var(--bk-brown-soft); }
.ring-br  { box-shadow: 0 0 0 2px var(--bk-brown-soft); }
.hover\:text-br:hover   { color: var(--bk-brown); }
.hover\:text-dk:hover   { color: #1E1510; }
.hover\:bg-br:hover     { background-color: var(--bk-brown-soft); }
.hover\:border-br:hover { border-color: var(--bk-brown-soft); }
.focus\:border-br:focus { border-color: var(--bk-brown-soft); }
.focus\:ring-br:focus   { outline: none; box-shadow: 0 0 0 2px var(--bk-brown-soft); }
.text-\[12px\] { font-size: 12px; line-height: 1.45; }
.text-\[13px\] { font-size: 13px; line-height: 1.5; }
.text-\[11px\] { font-size: 11px; line-height: 1.4; }
.z-60 { z-index: 60; }
.font-sarabun { font-family: 'Sarabun', system-ui, sans-serif; }
@media (max-width: 640px) {
  #bk-global-footer a,
  footer a,
  .seo-foot a,
  a.navlink {
    display: inline-block !important;
    min-height: 26px !important;
    line-height: 26px !important;
  }
  a[href]:not(.btn):not(.side-item):not(.chip) > i.fa-chevron-right,
  .see-all, a.see-all {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
  }
}
:focus-visible,
:target {
  scroll-margin-top: 72px;
  scroll-margin-bottom: 96px;
}
@media (max-width: 640px) {
  html.bk-cookie-open #bk-fab,
  html.bk-cookie-open #bk-assist-btn,
  html.bk-cookie-open #bk-search-btn,
  html.bk-cookie-open #bk-guide-btn,
  html.bk-cookie-open #bkCalcResumeBar,
  html.bk-cookie-open #calc-autosave-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease;
  }
  html.bk-cookie-open #bk-fab-panel[style*="display:flex"],
  html.bk-cookie-open #bk-fab-panel.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
.bk-skip {
  position: absolute;
  left: 8px;
  top: 0;
  transform: translateY(calc(-100% - 24px));   
  z-index: 100000;                
  background: var(--bk-brown);
  color: #fff;
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 0 0 10px 10px;
  font: 600 1rem/1 'Sarabun', sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform .15s ease-out;
}
.bk-skip:focus,
.bk-skip:focus-visible {
  transform: none;
  outline: 3px solid #F3D9A4;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .bk-skip { transition: none; } }
.mt-10 { margin-top: 2.5rem; }
.pt-6  { padding-top: 1.5rem; }
.border-\[\#EAE0D2\] { border-color: #EAE0D2; }
.hover\:bg-amber-200:hover { background-color: #FDE68A; }
@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
}
@media (min-width: 1024px) {
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}
.bg-\[var\(--bk-brown-soft\)\] { background-color: var(--bk-brown-soft); }
.hover\:bg-\[\#7A5E3E\]:hover { background-color: #7A5E3E; }
.hover\:text-\[var\(--bk-brown-soft\)\]:hover { color: var(--bk-brown-soft); }
.bk-wordmark {
  font-family: var(--bk-font-brand, 'Noto Serif Thai', serif) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  color: var(--lux-bronze, #876948) !important;
  white-space: nowrap;
}
.bk-wordmark:hover { opacity: .82; }
.bk-wordmark:visited { color: var(--lux-bronze, #876948) !important; }
.bk-brandname {
  font-family: var(--bk-font-brand, 'Noto Serif Thai', serif);
  font-weight: 600;
  letter-spacing: .01em;
}
html:has(.ln-overlay.ln-active) :is(#bk-fab, #bk-fab-panel, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top),
html:has(.modal-bg:not(.hidden)) :is(#bk-fab, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top),
html:has(.ov.on) :is(#bk-fab, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top),
html:has(#pay-modal:not([style*="none"])) :is(#bk-fab, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top),
html:has(#sq-modal:not([style*="none"])) :is(#bk-fab, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top),
html.bk-sheet-open :is(#bk-fab, #bk-assist-btn, #bk-search-btn, #bk-guide-btn, #bk-to-top) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease;
}
