//* =======================================================
   iNUSHOPz / iNUKUBz — งิ้วแดง-ขาว นีออน RGB Theme
   =======================================================*/
:root{
  --bg:#ffffff;
  --bg2:#fafafa;

  --surface:#ffffff;
  --glass:rgba(255,255,255,0.65);
  --glass-border:rgba(255,255,255,0.8);

  /* RGB NEON PALETTE */
  --red:rgb(255,0,0);
  --blue:rgb(0,140,255);
  --white:rgb(255,255,255);

  --primary:var(--red);
  --accent:var(--blue);

  --text:#111;
  --muted:#777;

  --radius:18px;
  --shadow:0 8px 28px rgba(0,0,0,.12);
}

/* ===== BG ===== */
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,0,0,0.20), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(0,140,255,0.20), transparent 65%),
    linear-gradient(180deg, var(--white) 0%, var(--bg2) 100%);
  color:var(--text);
  font-family:'Kanit', sans-serif;

  /* เดิม: padding-top:80px; 
     แก้ให้รองรับ safe area บน iPhone */
  padding-top: calc(80px + env(safe-area-inset-top));
}

/* ===== NAVBAR ===== */
.navbar,
.navbar.inu,
.navbar.inukubz{
  background:rgba(255,255,255,0.92) !important;
  border-bottom:1px solid rgba(0,0,0,.05);
  box-shadow:0 4px 20px rgba(255,0,0,0.18);
  backdrop-filter:blur(12px);

  /* กันโดน notch/dynamic island ทับ เวลาเป็น fixed-top */
  padding-top: env(safe-area-inset-top);
}
.navbar.scrolled{
  background:rgba(255,255,255,1) !important;
  box-shadow:0 6px 24px rgba(255,0,0,0.28);
}

.navbar .navbar-brand{
  color:var(--red) !important;
  font-weight:800;
  text-shadow:0 0 8px rgba(255,0,0,0.65);
}
.navbar .nav-link{
  color:#222 !important;
  font-weight:600;
  border-radius:999px;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--red) !important;
  background:rgba(255,0,0,0.1);
  text-shadow:0 0 8px rgba(255,0,0,0.55);
}

/* Hamburger */
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ===== BUTTON (นีออนงิ้ว) ===== */
.btn-neo{
  border:none;
  background:linear-gradient(90deg, rgb(255,0,0), rgb(255,70,70), rgb(255,0,0));
  color:white !important;
  border-radius:16px;
  font-weight:700;

  box-shadow:
    0 0 14px rgba(255,0,0,.8),
    0 0 24px rgba(255,255,255,.6),
    inset 0 0 8px rgba(255,255,255,.7);
  transition:0.2s ease;
}
.btn-neo:hover{
  filter:brightness(1.15);
  box-shadow:
    0 0 20px rgba(255,0,0,1),
    0 0 28px rgba(255,255,255,.75),
    inset 0 0 10px rgba(255,255,255,.9);
  transform:translateY(-2px);
}

/* Ghost Button */
.btn-ghost-white{
  background:#ffffff;
  border:1px solid rgba(255,0,0,.25);
  color:var(--red);
  font-weight:600;
  border-radius:16px;
}
.btn-ghost-white:hover{
  background:rgba(255,0,0,.1);
  border-color:rgba(255,0,0,.45);
}

/* ===== HERO ===== */
.hero-nova{
  background:white;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(255,0,0,.15);
  position:relative;
}
.hero-nova::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,0,0,.28), transparent 70%),
    radial-gradient(circle at 90% 20%, rgba(0,140,255,.28), transparent 70%);
  filter:blur(18px);
  z-index:-1;
}

/* ===== CARDS ===== */
.card.glass,
.card,
.card-surface{
  background:white;
  border:1px solid rgba(255,0,0,.15);
  border-radius:var(--radius);
  box-shadow:
    0 4px 20px rgba(255,0,0,.15),
    0 0 14px rgba(255,255,255,.4);
}
.card-hover:hover{
  transform:translateY(-4px);
  box-shadow:
    0 6px 26px rgba(255,0,0,.25),
    0 0 14px rgba(255,255,255,.8);
}

/* NEON RING */
.ring::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(135deg, rgba(255,0,0,1), rgba(0,140,255,1));
  padding:2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  box-shadow:
    0 0 20px rgba(255,0,0,.8),
    0 0 25px rgba(0,140,255,.6);
}

/* ===== FORM ===== */
.form-control,
.form-select{
  background:white;
  border:1px solid rgba(255,0,0,.35);
  border-radius:14px;
  color:#111;
}
.form-control:focus{
  box-shadow:0 0 0 .17rem rgba(255,0,0,.28);
  border-color:rgba(255,0,0,.8);
}

/* ===== TABLE ===== */
.table-glass{
  border-radius:var(--radius);
  background:white;
  border:1px solid rgba(255,0,0,.25);
  box-shadow:0 4px 20px rgba(255,0,0,.12);
}
.table-glass thead th{
  background:rgba(255,0,0,.1);
  color:#333;
}
.table-glass tbody tr:hover td{
  background:rgba(255,0,0,.12);
}

/* ===== BADGES ===== */
.badge-soft{
  background:white;
  border:1px solid rgba(255,0,0,.25);
  color:#ff0000;
}

/* Dot neon */
.badge-dot{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgb(255,200,200), rgb(255,0,0));
  box-shadow:0 0 18px rgba(255,0,0,.8);
}

/* ใส่ใน <style> หรือไฟล์ CSS */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}