/*
Theme Name: TKB247 Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ================================================================
   TKB247 — BLACK & GREEN NEON PREMIUM THEME
   ================================================================ */

:root {
  --green: #00e676;
  --green-light: #69f0ae;
  --green-bright: #b9f6ca;
  --green-dark: #00701a;
  --green-deep: #003d0a;
  --green-border: #00e676;
  --green-neon: rgba(0,230,118,0.9);
  --shadow-green: rgba(0,230,118,0.4);
  --black-soft: rgba(5,5,5,0.88);
  --cream: #e0ffe0;
}

/* ——— Global ——— */
html {
  background: linear-gradient(135deg, #0a0a0a 0%, #0d1f0d 25%, #0a0a0a 50%, #0d1a0d 75%, #0a0a0a 100%) !important;
  background-attachment: fixed !important;
  background-color: #0a0a0a !important;
}
body {
  font-family: 'Sarabun', 'Lato', sans-serif !important;
  background: transparent !important;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.sticky-add-to-cart--active, #wrapper, #main, #main.dark {
  background-color: rgba(0,0,0,0) !important;
}
::selection { background: var(--green); color: var(--green-deep); }
.section-title b { height: 0px !important; }
a { color: var(--green-light); }
a:hover { color: var(--green-bright); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--green), var(--green-dark)); border-radius: 8px; }

/* ——— Typography ——— */
h1,h2,h3,h4,h5,h6,.heading-font {
  color: var(--green-light) !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,1), 0 0 18px var(--green-neon), 0 0 36px rgba(0,180,80,0.6);
}
ul > li { color: var(--cream); }

/* Heading Green Capsule */
h1 > span, h2 > span, h3 > span {
  background: linear-gradient(90deg, var(--green-bright) 0%, var(--green) 45%, var(--green-dark) 100%) !important;
  border-radius: 30px;
  padding: 10px 28px !important;
  color: var(--green-deep) !important;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(0,230,118,0.8), 0 0 40px rgba(0,180,80,0.5), 0 3px 0 rgba(0,0,0,1);
  text-shadow: none !important;
  position: relative;
  overflow: hidden;
}
h1 > span::after, h2 > span::after, h3 > span::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: shimmer-sweep 3s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

.section-title-main { color: #fff !important; }

/* =============================== HEADER ================================ */
.header-main {
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,20,5,0.92) 100%) !important;
  border-bottom: 2px solid var(--green) !important;
  box-shadow: 0 2px 20px var(--shadow-green), inset 0 0 20px rgba(0,230,118,0.06) !important;
}
.header-top { background-color: rgba(0,15,5,0.6) !important; }
.header-bottom { background-color: rgba(0,10,3,0.5) !important; }
.header-bg-color { background-color: #0a0a0a !important; }
.header-main { height: 74px; }
#logo img { max-height: 74px; }
#logo { width: 215px; }
.header-bottom { min-height: 10px; }
.header-top { min-height: 20px; }
.header-main .nav > li > a { line-height: 16px; }
.stuck .header-main .nav > li > a { line-height: 50px; }
.header.show-on-scroll, .stuck .header-main { height: 70px !important; }
.stuck #logo img { max-height: 70px !important; padding: 7px 0; }
@media (max-width: 549px) {
  .header-main { height: 70px !important; }
  #logo img { max-height: 70px !important; }
}
.header:not(.transparent) .header-nav-main.nav > li > a { color: var(--green-light) !important; }
.header:not(.transparent) .header-bottom-nav.nav > li > a { color: #ededed; }
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current > a { color: var(--green-light) !important; }
.header-bottom-nav.nav-line-bottom > li > a:before,
.header-bottom-nav.nav-line-grow > li > a:before,
.header-bottom-nav.nav-line > li > a:before,
.header-bottom-nav.nav-box > li > a:hover,
.header-bottom-nav.nav-box > li.active > a,
.header-bottom-nav.nav-pills > li > a:hover,
.header-bottom-nav.nav-pills > li.active > a { color: #FFF !important; background-color: var(--green) !important; }
.nav-dropdown { font-size: 100%; }

/* =============================== FOOTER ================================ */
footer > section {
  background: linear-gradient(0deg, rgba(0,0,0,0.97) 0%, rgba(0,20,5,0.92) 100%) !important;
  border-top: 2px solid var(--green);
  border-bottom: 2px solid rgba(0,50,15,0.5);
  box-shadow: 0 -2px 20px var(--shadow-green), inset 0 0 20px rgba(0,230,118,0.06);
}
.absolute-footer, html { background-color: rgba(0,0,0,0) !important; }
.absolute-footer { background: rgba(0,0,0,0.95) !important; border-top: 1px solid rgba(0,230,118,0.15); }

/* =============================== KEYFRAMES ================================ */
@keyframes glow-green-luxury {
  0%,100% { box-shadow: 0 0 8px 2px rgba(0,230,118,0.3); border-color: var(--green); }
  50% { box-shadow: 0 0 25px 10px var(--green-neon), 0 0 45px rgba(0,180,80,0.5); border-color: var(--green-light); }
}
@keyframes heartbeat {
  0%,50%,100% { transform: scale(1); }
  25%,75% { transform: scale(1.1); }
}
.heartbeat { display: inline-block; animation: heartbeat 3s ease-in-out infinite; }

/* =============================== BG-1 GLASSMORPHISM ================================ */
.bg-1 {
  background: rgba(0,10,3,0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid var(--green) !important;
  animation: glow-green-luxury 3s ease-in-out infinite;
  margin-bottom: 20px !important;
  padding: 22px;
  color: #ffffff;
}

/* =============================== BUTTONS ================================ */
.btn-primary, a.button, .header-main .btn {
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--green) 50%, var(--green-bright) 100%) !important;
  color: var(--green-deep) !important;
  font-weight: 900;
  border: none !important;
  border-radius: 30px;
  padding: 11px 26px;
  box-shadow: 0 0 20px rgba(0,230,118,0.7), 0 0 36px rgba(0,180,80,0.5);
  transition: all 0.3s ease-in-out;
}
.btn-primary:hover, a.button:hover, .header-main .btn:hover {
  background: linear-gradient(90deg, var(--green-bright) 0%, var(--green) 50%, var(--green-deep) 100%) !important;
  box-shadow: 0 0 38px rgba(105,240,174,1), 0 0 56px rgba(0,180,80,0.8);
  transform: scale(1.08);
}
.btn-primary:active, a.button:active { transform: scale(0.95); }

button, button[type="submit"] {
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--green) 50%, var(--green-bright) 100%) !important;
  color: var(--green-deep) !important;
  border: none !important;
  border-radius: 30px;
}

/* Image border */
div.img-border img { border-radius: 20px !important; }

/* =============================== MARQUEE GXT1 ================================ */
.gxt1 {
  --border: #00e676;
  --bg1: #1a2e1a;
  --bg2: #000000;
  box-shadow: 0 6px 12px rgba(0,0,0,.8), 0 0 10px rgba(0,230,118,0.4), 0 0 0 1px var(--border) inset !important;
  background: radial-gradient(circle, var(--bg1) 0%, var(--bg2) 100%) !important;
}
.gxt1:before {
  background: linear-gradient(to bottom, rgba(0,230,118,.05), transparent 40%) !important;
}
.gxt1__label {
  background: linear-gradient(135deg, #1a3d1a 0%, #0a1a0a 100%) !important;
  color: #00e676 !important;
  border: 1px solid #00e676 !important;
}
.gxt1__label svg { color: #00e676 !important; }
.gxt1__item {
  color: var(--cream) !important;
  text-shadow: 0 0 4px rgba(0,230,118,0.3) !important;
}
.gxt1__item + .gxt1__item::before { color: #00e676 !important; }

/* =============================== STICKY MOBILE MENU ================================ */
.x-button-actions { position: fixed; left: 0; bottom: 0; right: 0; z-index: 99999; display: none; }
@media (max-width: 849px) {
  .x-button-actions { display: block; }
  body { padding-bottom: 75px !important; }
  .absolute-footer { padding-bottom: 75px; }
}
.x-button-actions .-outer-wrapper {
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.97), rgba(0,10,3,0.99));
  border-top: 2px solid var(--green);
  box-shadow: 0 -4px 25px var(--shadow-green);
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
}
.x-button-actions .-left-wrapper, .x-button-actions .-right-wrapper { display: flex; flex: 1; justify-content: space-around; }
.x-button-actions .-item-wrapper { text-align: center; }
.x-button-actions .-ic-img { display: flex; flex-direction: column; align-items: center; }
.x-button-actions .-ic-img img { width: 30px; height: 30px; filter: drop-shadow(0 0 4px rgba(0,230,118,0.4)); }
.x-button-actions .-textfooter { font-size: 10px; color: var(--cream); font-weight: 600; display: block; margin-bottom: 3px; }
.x-button-actions a { text-decoration: none !important; color: var(--cream); }
.x-button-actions .-center-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 10px; }
.x-button-actions .-center-wrapper .-selected { position: relative; z-index: 2; text-align: center; margin-top: -35px; }
.x-button-actions .-center-wrapper .-selected .widgettitle { font-size: 11px !important; color: var(--green-light); font-weight: 700; display: block; margin-bottom: 2px; }
.x-button-actions .-center-wrapper .-selected img {
  width: 60px !important; height: 60px !important;
  border-radius: 50%; border: 3px solid var(--green);
  box-shadow: 0 0 20px var(--green-neon), 0 0 40px rgba(0,180,80,0.5);
  animation: heartbeat 3s ease-in-out infinite;
}

/* =============================== SLIDER ================================ */
.slider-nav-circle .flickity-prev-next-button {
  background: rgba(0,0,0,0.7) !important;
  border: 1px solid var(--green) !important;
  color: var(--green-light) !important;
  box-shadow: 0 0 15px rgba(0,230,118,0.3);
}
.slider-nav-circle .flickity-prev-next-button:hover {
  background: var(--green) !important; color: var(--green-deep) !important;
}

/* =============================== FEATURE BOXES ================================ */
.box.has-hover { transition: all 0.35s ease; border-radius: 20px; overflow: hidden; }
.box.has-hover:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,230,118,0.3); }

/* =============================== NAV DROPDOWN ================================ */
.nav-dropdown { background: var(--black-soft) !important; border: 1px solid rgba(0,230,118,0.2) !important; border-radius: 12px !important; backdrop-filter: blur(14px); }
.nav-dropdown li > a { color: var(--cream) !important; }
.nav-dropdown li > a:hover { color: var(--green-light) !important; background: rgba(0,230,118,0.1) !important; }

/* =============================== MOBILE SIDEBAR ================================ */
.off-canvas-center .nav-sidebar.nav-vertical > li > a { color: var(--cream) !important; border-bottom: 1px solid rgba(0,230,118,0.1); }
.mfp-content { background: rgba(5,5,5,0.95) !important; }

/* =============================== MENU LABELS ================================ */
.label-new.menu-item > a:after { content: "ใหม่"; }
.label-hot.menu-item > a:after { content: "มาแรง"; }
.label-sale.menu-item > a:after { content: "Sale"; }
.label-popular.menu-item > a:after { content: "ยอดนิยม"; }

/* =============================== BACK TO TOP ================================ */
.back-to-top { background: rgba(0,0,0,0.7) !important; border: 1px solid var(--green) !important; color: var(--green-light) !important; }

/* =============================== RESPONSIVE ================================ */
@media only screen and (max-width: 48em) {
  .bg-1 { padding: 16px; border-radius: 18px; }
}