/* ฉากดำและแสงแดงสะท้อนร่วมกันทั้งเว็บ — ตรงกับภาพโปรโมท */
html { background: #030303; }
body {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: #ffffff14;
  box-shadow: 0 20px 70px #0005;
}
body::before, body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, #0002, #0001 40%, #0004), url('assets/background/red-reflection-v2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Blur only the scenery at both edges; content stays on a separate sharp layer. */
body::after {
  filter: blur(14px) brightness(.72);
  mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 32%, transparent 68%, #000 88%, #000 100%);
}
header { background: #050505bf; border-bottom-color: #ffffff12; }
.kok-hero { background: transparent !important; }
.kok-hero::before, .kok-hero::after { content: none; }
.kok-trust { border-top-color: #ffffff1c; }
.kok-stage { background: transparent !important; border-radius: 0; }
.kok-slide img {
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent);
  mask-composite: intersect;
}
.kok-catalog {
  background: #00000024 !important;
  border-color: #ffffff18;
  box-shadow: none;
}
.kok-browser-line { background: #00000059; border-bottom-color: #ffffff12; }
.kok-catalog .catalog-heading { background: transparent; margin: 0 auto 16px; }
.kok-catalog .catalog-heading::after { content: none; }
.kok-catalog #brandBar .brand-tile { background: #050505c9; border-color: #ffffff24; }
.kok-catalog #brandBar .brand-tile.active { background: #fff; }
.kok-catalog .card { background: #080808ed !important; }
.shop-service { background: #00000047 !important; border-color: #ffffff14; }
.site-footer { background: #0000003d; border-top-color: #ffffff19; }
/* ธีมสว่าง: พื้นขาวเรียบทั้งหน้า ไม่ใช้ภาพแสงแดง (ภาพทับสีขาวแล้วออกเทาชมพูเป็นด่าง) */
html[data-theme="light"] { background: #f5f5f6; }
html[data-theme="light"] body { background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme="light"] body::before,
html[data-theme="light"] body::after { content: none; }
/* ภาพโปรโมทพื้นดำ: เป็นการ์ดขอบมนคมชัด แทนขอบจางที่ดูแหว่งบนพื้นขาว */
html[data-theme="light"] .kok-stage { background: #0b0b0c !important; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px #00000024; }
html[data-theme="light"] .kok-slide img { -webkit-mask-image: none; mask-image: none; }
/* ช่องพิมพ์ค้นหาสี่เหลี่ยมทับขอบมนซ้ายของกล่อง */
html[data-theme="light"] .kok-hero-search input { background: transparent; }
html[data-theme="light"] header { background: #ffffffdf; }
html[data-theme="light"] .kok-hero { background: transparent !important; }
html[data-theme="light"] .kok-trust { border-top-color: #00000017; }
html[data-theme="light"] .kok-catalog { background: #ffffff33 !important; border-color: #0000001a; }
html[data-theme="light"] .kok-browser-line { background: #ffffff80; border-color: #00000012; }
html[data-theme="light"] .kok-catalog .card { background: #fffffff5 !important; }
html[data-theme="light"] .shop-service { background: #ffffff70 !important; border-color: #00000017; }
html[data-theme="light"] .site-footer { background: #ffffff66; border-top-color: #00000017; }
@media(max-width:760px) {
  body::before, body::after { background-size: 100% 100%; }
  body::after { filter: blur(8px) brightness(.72); }
  .kok-catalog { background: #00000018 !important; }
  .kok-slide img {
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  }
}
.footer-cta-link span { color: #ffd1c7; }
.footer-cta-link:hover span { color: #fff; }
html[data-theme="light"] .footer-cta-link span { color: #a61e18; }

/* แถบหัวเว็บติดด้านบนเมื่อเลื่อนหน้า */
html { scroll-padding-top: 96px; }
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #050505ed;
  box-shadow: 0 10px 28px #0005;
}
html[data-theme="light"] body > header { background: #ffffffed; box-shadow: 0 8px 24px #00000012; }
@media(max-width:760px) { html { scroll-padding-top: 80px; } }