@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-primary: #060a14;
  --bg-secondary: #0d1424;
  --bg-card: #111b2e;
  --bg-card-hover: #162240;
  --border-color: rgba(99,102,241,0.15);
  --accent: #6366f1;
  --accent2: #8b5cf6;
  --accent3: #06b6d4;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --text-bright: #f8fafc;
  --glow: 0 0 20px rgba(99,102,241,0.25);
  --glow-lg: 0 0 40px rgba(99,102,241,0.2);
  --font-th: 'Prompt', sans-serif;
  --font-en: 'Inter', sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font-th);
  background: var(--bg-primary);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 70px;
  background: rgba(6,10,20,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
}
.navbar .logo {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}
.navbar .nav-links { display:flex; gap:1.5rem; list-style:none; }
.navbar .nav-links a {
  color: var(--text-dim); text-decoration:none; font-size:0.95rem;
  font-weight:500; transition: all 0.3s; position:relative; padding:0.3rem 0;
}
.navbar .nav-links a:hover, .navbar .nav-links a.active {
  color: var(--accent);
}
.navbar .nav-links a.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--accent); border-radius:2px;
}
.nav-actions { display:flex; gap:0.8rem; align-items:center; }

/* Points Badge */
.points-badge {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.35rem 0.8rem; border-radius:20px;
  background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
  border:1px solid rgba(99,102,241,0.25);
  transition:all 0.3s;
}
.points-badge:hover {
  border-color:var(--accent); box-shadow:0 0 15px rgba(99,102,241,0.2);
  transform:translateY(-1px);
}
.points-icon { font-size:0.9rem; }
.points-value {
  font-family:var(--font-display); font-size:0.9rem;
  font-weight:700; color:var(--accent);
}
.points-label { font-size:0.7rem; color:var(--text-dim); }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding: 0.65rem 1.4rem; border:none; border-radius:8px;
  font-family:var(--font-th); font-size:0.9rem; font-weight:500;
  cursor:pointer; transition:all 0.3s; text-decoration:none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; box-shadow: 0 4px 15px rgba(99,102,241,0.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 6px 25px rgba(99,102,241,0.4); }
.btn-outline {
  background:transparent; border:1px solid var(--border-color); color:var(--text);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:0.4rem 0.9rem; font-size:0.8rem; }
.btn-lg { padding:0.85rem 2rem; font-size:1rem; }

/* ===== HERO ===== */
.hero {
  position:relative; padding: 10rem 2rem 6rem;
  text-align:center; overflow:hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 60%);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero h1 {
  font-family:var(--font-display); font-size:3.2rem; font-weight:800;
  margin-bottom:1rem; position:relative;
  background: linear-gradient(135deg, #fff 0%, var(--accent3) 50%, var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.3); }
}
.hero p { font-size:1.15rem; color:var(--text-dim); max-width:600px; margin:0 auto 2.5rem; position:relative; }
.hero-actions { display:flex; gap:1rem; justify-content:center; position:relative; }

/* ===== STATS BAR ===== */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  max-width:900px; margin:-3rem auto 0; padding:0 2rem; position:relative; z-index:2;
}
.stat-item {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius); padding:1.5rem; text-align:center;
  transition:all 0.3s;
}
.stat-item:hover { border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-3px); }
.stat-number {
  font-family:var(--font-display); font-size:2rem; font-weight:700;
  color:var(--accent); display:block;
}
.stat-label { font-size:0.85rem; color:var(--text-dim); margin-top:0.3rem; }

/* ===== SECTION ===== */
.section { padding:5rem 2rem; max-width:1200px; margin:0 auto; }
.section-title {
  font-size:1.8rem; font-weight:700; margin-bottom:0.5rem;
  background:linear-gradient(135deg,var(--text-bright),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.section-subtitle { color:var(--text-dim); margin-bottom:2.5rem; }

/* ===== PC CARDS ===== */
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.pc-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); overflow:hidden; transition:all 0.4s;
  position:relative;
}
.pc-card:hover { transform:translateY(-5px); box-shadow:var(--glow-lg); border-color:var(--accent); }
.pc-card-img {
  height:180px; background:linear-gradient(135deg,var(--bg-secondary),var(--bg-card));
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; position:relative; overflow:hidden;
}
.pc-card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 50%,var(--bg-card));
}
.pc-card-body { padding:1.2rem 1.5rem; }
.pc-card-name { font-size:1.1rem; font-weight:600; margin-bottom:0.3rem; }
.pc-card-specs { font-size:0.8rem; color:var(--text-dim); margin-bottom:1rem; line-height:1.6; }
.pc-card-footer { display:flex; align-items:center; justify-content:space-between; }
.pc-card-price { font-family:var(--font-display); font-size:1.1rem; color:var(--accent); font-weight:600; }
.pc-card-price span { font-family:var(--font-th); font-size:0.75rem; color:var(--text-dim); font-weight:400; }

/* Status */
.status {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.75rem; font-weight:500; padding:0.25rem 0.7rem;
  border-radius:20px;
}
.status-available { background:rgba(16,185,129,0.15); color:var(--success); }
.status-busy { background:rgba(239,68,68,0.15); color:var(--danger); }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-available .status-dot { background:var(--success); animation:pulse 2s infinite; }
.status-busy .status-dot { background:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ===== PRICING ===== */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pricing-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); padding:2rem; text-align:center;
  transition:all 0.3s; position:relative;
}
.pricing-card.popular {
  border-color:var(--accent); box-shadow:var(--glow);
  background:linear-gradient(180deg,rgba(99,102,241,0.08),var(--bg-card));
}
.pricing-card.popular::before {
  content:'ยอดนิยม'; position:absolute; top:-12px; left:50%;
  transform:translateX(-50%); background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:0.75rem; font-weight:600; padding:0.25rem 1rem;
  border-radius:20px;
}
.pricing-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.pricing-name { font-size:1.1rem; font-weight:600; margin-bottom:0.5rem; }
.pricing-amount {
  font-family:var(--font-display); font-size:2.5rem; font-weight:700;
  color:var(--accent); margin:1rem 0;
}
.pricing-amount span { font-family:var(--font-th); font-size:0.9rem; color:var(--text-dim); font-weight:400; }
.pricing-features { list-style:none; text-align:left; margin:1.5rem 0; }
.pricing-features li {
  padding:0.5rem 0; font-size:0.9rem; color:var(--text-dim);
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; gap:0.5rem;
}
.pricing-features li::before { content:'✓'; color:var(--success); font-weight:700; }

/* ===== HOW IT WORKS ===== */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:2rem; }
.step {
  text-align:center; position:relative; padding:1.5rem;
}
.step-number {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  margin:0 auto 1rem; box-shadow:0 4px 20px rgba(99,102,241,0.3);
}
.step-title { font-weight:600; margin-bottom:0.5rem; }
.step-desc { font-size:0.85rem; color:var(--text-dim); }

/* ===== ADMIN DASHBOARD ===== */
.admin-layout { display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 70px); margin-top:70px; }
.sidebar {
  background:var(--bg-secondary); border-right:1px solid var(--border-color);
  padding:2rem 0;
}
.sidebar-menu { list-style:none; }
.sidebar-menu li a {
  display:flex; align-items:center; gap:0.8rem;
  padding:0.8rem 1.5rem; color:var(--text-dim); text-decoration:none;
  font-size:0.9rem; transition:all 0.3s; border-left:3px solid transparent;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
  color:var(--accent); background:rgba(99,102,241,0.05);
  border-left-color:var(--accent);
}
.admin-content { padding:2rem; overflow-y:auto; }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.admin-stat {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius); padding:1.3rem; position:relative; overflow:hidden;
}
.admin-stat::after {
  content:''; position:absolute; top:0; right:0; width:80px; height:80px;
  border-radius:50%; opacity:0.08;
}
.admin-stat.purple::after { background:var(--accent); }
.admin-stat.cyan::after { background:var(--accent3); }
.admin-stat.green::after { background:var(--success); }
.admin-stat.amber::after { background:var(--warning); }
.admin-stat-value { font-family:var(--font-display); font-size:1.6rem; font-weight:700; }
.admin-stat.purple .admin-stat-value { color:var(--accent); }
.admin-stat.cyan .admin-stat-value { color:var(--accent3); }
.admin-stat.green .admin-stat-value { color:var(--success); }
.admin-stat.amber .admin-stat-value { color:var(--warning); }
.admin-stat-label { font-size:0.8rem; color:var(--text-dim); margin-top:0.2rem; }

/* ESP Control Panel */
.esp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.esp-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius); padding:1.2rem; transition:all 0.3s;
}
.esp-card.online { border-color:rgba(16,185,129,0.3); }
.esp-card.offline { border-color:rgba(239,68,68,0.2); opacity:0.7; }
.esp-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; }
.esp-card-title { font-weight:600; font-size:0.95rem; }
.esp-timer {
  font-family:var(--font-display); font-size:1.6rem; font-weight:600;
  color:var(--accent3); text-align:center; margin:1rem 0;
  text-shadow:0 0 20px rgba(6,182,212,0.3);
}
.esp-actions { display:flex; gap:0.5rem; }
.esp-actions .btn { flex:1; justify-content:center; }

/* Toggle Switch */
.toggle { position:relative; width:44px; height:24px; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:#334155; border-radius:24px;
  transition:0.3s;
}
.toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px;
  left:3px; bottom:3px; background:#fff; border-radius:50%;
  transition:0.3s;
}
.toggle input:checked + .toggle-slider { background:var(--success); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ===== TABLE ===== */
.table-wrap {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius); overflow:hidden;
}
.table { width:100%; border-collapse:collapse; }
.table th {
  text-align:left; padding:0.9rem 1.2rem; font-size:0.8rem;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px;
  background:rgba(0,0,0,0.2); border-bottom:1px solid var(--border-color);
}
.table td { padding:0.8rem 1.2rem; font-size:0.9rem; border-bottom:1px solid rgba(255,255,255,0.03); }
.table tr:hover td { background:rgba(99,102,241,0.03); }

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(5px); z-index:200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:0.3s;
}
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); padding:2rem; width:90%; max-width:480px;
  transform:translateY(20px); transition:0.3s;
}
.modal-overlay.active .modal { transform:translateY(0); }
.modal-title { font-size:1.2rem; font-weight:600; margin-bottom:1.5rem; }

/* ===== FORMS ===== */
.form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-size:0.85rem; color:var(--text-dim); margin-bottom:0.4rem; }
.form-input {
  width:100%; padding:0.7rem 1rem; background:var(--bg-primary);
  border:1px solid var(--border-color); border-radius:8px;
  color:var(--text); font-family:var(--font-th); font-size:0.9rem;
  transition:all 0.3s; outline:none;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,0.1); }

/* ===== LOGIN PAGE ===== */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.08), transparent 50%),
             radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.06), transparent 50%);
  padding:2rem;
}
.login-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); padding:2.5rem; width:100%; max-width:420px;
  box-shadow:var(--glow-lg);
}
.login-card h2 { font-size:1.5rem; text-align:center; margin-bottom:0.5rem; }
.login-card .subtitle { text-align:center; color:var(--text-dim); font-size:0.9rem; margin-bottom:2rem; }

/* ===== FOOTER ===== */
.footer {
  border-top:1px solid var(--border-color); padding:3rem 2rem;
  text-align:center; color:var(--text-dim); font-size:0.85rem;
}

/* ===== PAGE TRANSITIONS ===== */
.page { animation:fadeUp 0.4s ease; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(15px); }
  to { opacity:1; transform:translateY(0); }
}

/* ===== HAMBURGER (Mobile drawer toggle) ===== */
.hamburger-btn {
  display:none;
  align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px;
  background:transparent; border:1px solid var(--border-color);
  color:var(--text); cursor:pointer; font-size:1.1rem;
  margin-right:0.6rem; transition:all 0.2s;
}
.hamburger-btn:active { background:var(--bg-secondary); transform:scale(0.95); }

/* ===== SIDEBAR OVERLAY (Mobile) ===== */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  z-index:99; opacity:0; transition:opacity 0.3s;
}
.sidebar-overlay.active { display:block; opacity:1; }

/* ===== MOBILE MENU DRAWER (User side) ===== */
.mobile-menu {
  display:none; position:fixed;
  top:0; left:0; bottom:0;
  width:280px; max-width:85vw;
  background:var(--bg-secondary);
  border-right:1px solid var(--border-color);
  z-index:100;
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y:auto;
  box-shadow:8px 0 30px rgba(0,0,0,0.4);
  padding-top:0.5rem;
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu-header {
  padding:1.2rem 1.5rem;
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:700;
  background:linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:1px;
  border-bottom:1px solid var(--border-color);
  margin-bottom:0.5rem;
}
.mobile-menu-list { list-style:none; padding:0; margin:0; }
.mobile-menu-list li a {
  display:flex; align-items:center; gap:0.8rem;
  padding:0.9rem 1.5rem;
  color:var(--text-dim); text-decoration:none;
  font-size:0.95rem; font-weight:500;
  transition:all 0.2s;
  border-left:3px solid transparent;
  min-height:48px;
}
.mobile-menu-list li a.active,
.mobile-menu-list li a:active {
  color:var(--accent);
  background:rgba(99,102,241,0.1);
  border-left-color:var(--accent);
}
.mobile-menu-list li.mm-divider {
  height:1px; background:var(--border-color);
  margin:0.5rem 1rem;
}
.mobile-menu-points {
  margin:0.5rem 1.2rem 0;
  padding:0.8rem 1rem;
  background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
  border:1px solid rgba(99,102,241,0.3);
  border-radius:12px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
}
.mobile-menu-points .mm-pts-val {
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  color:var(--accent);
}
.mobile-menu-points .mm-pts-label {
  font-size:0.75rem; color:var(--text-dim);
}
@media (max-width: 768px) {
  .mobile-menu { display:block; }
}

/* ===== RESPONSIVE ===== */

/* Tablet & mobile (≤ 1024px) */
@media (max-width: 1024px) {
  .section { padding: 3rem 1.5rem; }
  .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .admin-layout { grid-template-columns: 220px 1fr; }
  .esp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Mobile (≤ 768px) — หลัก */
@media (max-width: 768px) {
  /* ---------- NAVBAR ---------- */
  .navbar { padding: 0 0.8rem; height: 60px; }
  .navbar .logo { font-size: 0.95rem; letter-spacing: 1px; }
  .navbar .nav-links { display: none; }
  .hamburger-btn { display: flex !important; }
  .nav-actions { gap: 0.4rem; }
  .nav-actions > span { display: none; }  /* ซ่อนชื่อ admin, เหลือแค่ปุ่มออก */
  .points-badge { padding: 0.25rem 0.55rem; }
  .points-label { display: none; }

  /* ---------- HERO ---------- */
  .hero { padding: 7rem 1rem 3rem; }
  .hero h1 { font-size: 1.9rem; }
  .hero p { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* ---------- STATS BAR (customer) ---------- */
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; padding: 0 1rem; margin-top: -2rem; }
  .stat-number { font-size: 1.4rem; }
  .stat-label { font-size: 0.75rem; }

  /* ---------- SECTIONS ---------- */
  .section { padding: 2.5rem 1rem; }
  .section-title { font-size: 1.4rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .pc-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* ---------- ADMIN LAYOUT (drawer) ---------- */
  .admin-layout {
    grid-template-columns: 1fr !important;
    margin-top: 60px !important;
    min-height: calc(100vh - 60px);
  }
  .sidebar {
    position: fixed !important;
    top: 60px; left: 0; bottom: 0;
    width: 260px; z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; display: block !important;
    box-shadow: 8px 0 30px rgba(0,0,0,0.4);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-menu li a { padding: 1rem 1.5rem; font-size: 0.95rem; }

  /* ---------- ADMIN CONTENT ---------- */
  .admin-content { padding: 1rem !important; overflow-x: hidden; }
  .admin-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; margin-bottom: 1.2rem !important; }
  .admin-stat { padding: 0.9rem !important; }
  .admin-stat-value { font-size: 1.2rem !important; }
  .admin-stat-label { font-size: 0.7rem !important; }

  /* ESP grid stack */
  .esp-grid { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .esp-card { padding: 1rem !important; }
  .esp-timer { font-size: 1.4rem !important; }

  /* ---------- TABLES (horizontal scroll) ---------- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 560px; }
  .table th, .table td { padding: 0.6rem 0.7rem; font-size: 0.78rem; }

  /* ---------- MODAL (near full-screen) ---------- */
  .modal {
    width: calc(100% - 1rem) !important;
    max-width: 100% !important;
    max-height: 92vh; overflow-y: auto;
    padding: 1.3rem !important; border-radius: 14px;
  }

  /* ---------- BUTTONS ---------- */
  .btn { padding: 0.7rem 1rem; font-size: 0.85rem; }
  .btn-sm { padding: 0.45rem 0.7rem; font-size: 0.75rem; }

  /* ---------- CHAT WIDGET ---------- */
  .chat-window { width: calc(100vw - 30px) !important; height: 70vh !important; }
  .chat-toggle { width: 48px !important; height: 48px !important; font-size: 1.2rem; }
  /* [เพิ่ม 2026-05-23] ย่อ Discord button ด้วย — กันบังปุ่ม submit ที่ล่างสุดของฟอร์ม */
  .chat-widget a[href*="discord"] { width: 48px !important; height: 48px !important; }
  .chat-widget a[href*="discord"] svg { width: 24px !important; height: 24px !important; }
  /* เผื่อ chat+discord 2 ปุ่มที่มุมขวาล่าง ~110px - body padding กันบัง */
  body { padding-bottom: 120px; }

  /* ---------- LOGIN ---------- */
  .login-card { padding: 1.8rem; }

  /* ---------- INLINE-GRID OVERRIDES ----------
     หลายส่วนของ admin-app.js ใช้ inline style="grid-template-columns: ..."
     ให้ stack บน mobile อัตโนมัติ */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="minmax(300px"],
  [style*="minmax(260px"],
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Very small phones (≤ 480px) */
@media (max-width: 480px) {
  .navbar { padding: 0 0.6rem; height: 56px; }
  .navbar .logo { font-size: 0.85rem; letter-spacing: 0.5px; }
  .admin-layout { margin-top: 56px !important; min-height: calc(100vh - 56px); }
  .sidebar { top: 56px; width: 85vw; }
  .admin-content { padding: 0.7rem !important; }
  .admin-stats { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .admin-stat-value { font-size: 1.1rem !important; }
  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: 0.9rem; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .modal { padding: 1rem !important; }
  .modal-title { font-size: 1rem; }
  .chat-window { height: 75vh !important; }

  /* บาง inline grid 3-4 col ให้เหลือ 1 col บนจอเล็กสุด */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Touch-friendly tweaks (มือถือทุกขนาด) */
@media (hover: none) and (pointer: coarse) {
  .btn, .sidebar-menu li a, .hamburger-btn, .esp-actions .btn {
    min-height: 42px;  /* touch target ≥ 42px ตาม Apple HIG */
  }
  .sidebar-menu li a:hover { background: transparent; }
  .sidebar-menu li a:active { background: rgba(99,102,241,0.12); }
}

/* ===== CHAT WIDGET ===== */
.chat-widget {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; align-items:flex-end;
}
.chat-toggle {
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:1.5rem; border:none; cursor:pointer;
  box-shadow:0 10px 25px rgba(99,102,241,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s; position:relative;
}
.chat-toggle:hover { transform:scale(1.1); }
.chat-window {
  width:320px; height:450px; background:var(--bg-card);
  border:1px solid var(--border-color); border-radius:var(--radius-lg);
  margin-bottom:15px; display:flex; flex-direction:column;
  box-shadow:var(--glow-lg); overflow:hidden;
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.chat-window.open {
  transform:translateY(0); opacity:1; pointer-events:all;
}
.chat-header {
  padding:1rem; background:linear-gradient(135deg,var(--bg-secondary),var(--bg-card));
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:space-between;
}
.chat-header-title { font-weight:600; font-size:1rem; color:var(--text-bright); }
.chat-messages {
  flex:1; padding:1rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:0.8rem;
}
.chat-msg {
  max-width:85%; padding:0.6rem 0.9rem; border-radius:12px;
  font-size:0.85rem; line-height:1.4; word-wrap:break-word;
}
.chat-msg.customer {
  align-self:flex-end; background:var(--accent); color:#fff;
  border-bottom-right-radius:2px;
}
.chat-msg.admin {
  align-self:flex-start; background:var(--bg-secondary); border:1px solid var(--border-color);
  border-bottom-left-radius:2px;
}
.chat-msg-time { font-size:0.65rem; opacity:0.7; margin-top:0.3rem; text-align:right; }
.chat-input-area {
  padding:0.8rem; border-top:1px solid var(--border-color);
  background:var(--bg-secondary);
  display:flex; gap:0.5rem; flex-direction:column;
}
.chat-input {
  width:100%; border:1px solid var(--border-color);
  background:var(--bg-primary); border-radius:20px;
  padding:0.6rem 1rem; color:var(--text); font-family:var(--font-th);
  font-size:0.85rem; outline:none; transition:0.3s;
}
.chat-input:focus { border-color:var(--accent); }
.chat-identification {
  display:flex; gap:0.5rem; margin-bottom:0.3rem;
}
.chat-identification input {
  flex:1; padding:0.4rem 0.6rem; font-size:0.75rem; border-radius:6px;
  background:var(--bg-primary); border:1px solid var(--border-color); color:var(--text);
}
.chat-notification {
  position:absolute; top:-2px; right:-2px; background:var(--danger);
  color:#fff; width:22px; height:22px; border-radius:50%;
  font-size:0.75rem; font-weight:bold; display:flex; align-items:center; justify-content:center;
}