/* ===============================
   Wattanawirot Power Run 2026
   Solid Modern Green (2026) + Kanit
================================= */

:root{
  /* =========================
     Brand: Firebrick Red + Gray
     ========================= */

  /* Brand */
  --brand: #b22222;          /* main red */
  --brand-2: #8b1a1a;        /* darker red */
  --brand-soft: #ffeaea;     /* soft red background */
  --brand-ring: rgba(178,34,34,.22);

  /* alias (กันพลาด ถ้ามีโค้ดเก่าเรียก brand-green) */
  --brand-green: var(--brand);
  --brand-green-dark: var(--brand-2);

  /* Grays (รอง/พื้นหลัง/เส้น) */
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;

  /* Toast */
  --toast-success: #16a34a;
  --toast-warning: #f59e0b;
  --toast-danger:  #ef4444;
  --toast-info:    #334155;

  /* UI */
  --bg: #f7f7f8;             /* เทาอ่อนแทนเขียวอ่อน */
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 12px 28px rgba(2, 6, 23, .08);
}

/* Base */
html,body{ height:100%; }
body{
  font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.small-muted{ color: var(--muted); }
.hr-soft{ border-color: rgba(148,163,184,.35); }
a{ text-decoration: none; }

/* Buttons */
.btn-brand{
  background: var(--brand);
  border: 0;
  color:#fff;
  border-radius: 12px;
  font-weight: 700;
}
.btn-brand:hover{ background: var(--brand-2); color:#fff; }
.btn-outline-light{ border-radius: 12px; }

/* Forms */
.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--border);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-ring);
}

/* Cards */
.card-glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-glass:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Hero */
.hero{
  border-radius: 20px;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow);
}

/* Badge */
.badge{
  background: rgba(15, 23, 42, .85);
  color:#fff;
  border-radius: 999px;
  padding: 6px 12px;
}

/* Modal */
.modal-backdrop.show{ opacity: .35; }
.modal-content.modal-card{
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal-card .modal-header{
  background: linear-gradient(135deg, var(--brand-soft), #ffffff);
  border-bottom: 1px solid rgba(148,163,184,.22);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.modal-card .btn-close{ filter: none; }

/* Toasts */
#toastContainer{ z-index: 1080; }
.toast.app-toast{
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 26px rgba(2,6,23,.16);
}
.toast.app-toast .toast-body{ font-weight: 500; }
.toast-success{ background: var(--toast-success) !important; color:#fff; }
.toast-warning{ background: var(--toast-warning) !important; color:#fff; }
.toast-danger{  background: var(--toast-danger)  !important; color:#fff; }
.toast-info{    background: var(--toast-info)    !important; color:#fff; }

/* Tables */
.table{ color: var(--text); }
.table thead th{ color: rgba(15,23,42,.8); font-weight: 700; }

/* ===== Upload full-screen overlay ===== */
.upload-overlay{
  position:fixed;
  inset:0;
  z-index: 2000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.upload-overlay .upload-card{
  width:min(420px, 100%);
  background:#fff;
  border:1px solid rgba(2, 132, 199, .12);
  border-radius:18px;
  padding: 22px;
  text-align:center;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.upload-overlay.d-none{ display:none !important; }

/* ===== Topbar (2 ชั้น) ===== */
.topbar{ position: sticky; top:0; z-index: 1030; }

/* ชั้นบน = แดงเข้มแบบ glass */
.topbar-main{
  background: rgb(145, 10, 10);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.topbar-menu{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand-mark{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
  color:#fff;font-weight:800;
}
.brand-name{ font-weight:800; color:#fff; line-height:1; }
.brand-name span{ opacity:.85; font-weight:600; margin-left:6px; }

/* เมนูชั้นล่าง */
.navlinks{ overflow:auto; white-space:nowrap; }
.navlinks a{
  display:inline-block;
  color:#334155;
  text-decoration:none;
  font-weight:700;
  padding:.45rem .75rem;
  border-radius:.85rem;
  transition:.15s ease;
}
.navlinks a:hover{ background: rgba(0,0,0,.06); }
.navlinks a.active{ background:#111; color:#fff; }

/* ===== หน้า Home แบบ card/featured ===== */
.subnav{
  background:#f8fafc;
  border-top:1px solid rgba(0,0,0,.04);
}
.chip{
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:#334155;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
}
.chip.active{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.25);
  color:var(--brand-green-dark);
}

.page-title{ font-size: clamp(28px, 3vw, 44px); font-weight: 900; }
.section-title{ font-size: 18px; font-weight: 800; color:#0f172a; }

.card-soft{
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}
.featured{ overflow:hidden; }
.feat-img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:320px;
}
.feat-title{ font-size: 28px; font-weight: 900; }
.feat-meta{ color:#475569; display:grid; gap:8px; }
.feat-meta i{ color: var(--brand-green-dark); margin-right:8px; }
.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:800;
  font-size:12px;
}

.thumb{ position:relative; height:150px; background:#f1f5f9; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.badge-code{
  position:absolute;
  top:10px; right:10px;
  padding:6px 10px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.price{ font-weight:900; color:var(--brand-green-dark); }

.line-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.admin-toolbar{
  border: 1px solid rgba(255,255,255,.08);
}

.btn-admin-dashboard{
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-dashboard:hover{
  background: #1e40af;
  border-color: #1e40af;
  color: #fff;
}

.btn-admin-excel{
  background: #059641;
  border: 1px solid #059641;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-excel:hover{
  background: #04783a;
  border-color: #04782b;
  color: #fff;
}

.btn-admin-approved{
  background: #059669;
  border: 1px solid #059669;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-approved:hover{
  background: #047857;
  border-color: #047857;
  color: #fff;
}

.btn-admin-logout{
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.btn-admin-logout:hover{
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.btn-primary{
  background:#2563eb;
  border-color:#2563eb;
  font-weight:600;
}

.btn-primary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
}

.btn-secondary{
  background:#374151;
  border-color:#374151;
  color:#fff;
}

.btn-secondary:hover{
  background:#1f2937;
}


.hero-main{
  width:100%;
  max-width:100%;
  margin:auto;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
}

.hero-main img{
  width:100%;
  height:auto;
  display:block;
  max-width:100%;
}

@media (max-width:992px){
  .hero-main{
    max-width:100%;
    border-radius:14px;
  }
}

@media (max-width:576px){
  .hero-main{
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }

  .hero-main img{
    width:100%;
    height:auto;
  }
}




.power-title{
  text-transform: uppercase;
  text-align: center;

  font-size: clamp(36px,5vw,60px);
  font-weight: 900;
  letter-spacing: 3px;

  background: linear-gradient(
    90deg,
    #482a70,   
    #002472,   
    #ff5b5b,   
    #ff7a2f  
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-size: 200% auto;
  animation: gradientMove 6s linear infinite;
}

@keyframes gradientMove{
  0%{background-position:0%}
  100%{background-position:200%}
}

.carousel-control-prev,
.carousel-control-next{
  width:40px;
  height:40px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(189, 189, 189, 0.4);
  border-radius:50%;
}