/* =============================================
   GroupSave — Mobile-First THAICABINET Theme
   Dark + Orange + Cream
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;800;900&display=swap');

:root {
  --bg: #0B0B0F;
  --bg2: #141419;
  --bg3: #1C1C24;
  --glass: rgba(255,255,255,0.04);
  --orange: #FF6B00;
  --orange-l: #FF8C33;
  --orange-d: #CC5500;
  --cream: #F5E6D3;
  --cream-d: #C4AA8E;
  --gold: #FFB347;
  --txt: #F0F0F0;
  --txt2: #9A9AA8;
  --txt3: #555566;
  --green: #00D26A;
  --red: #FF4757;
  --blue: #4DA6FF;
  --bdr: rgba(255,255,255,0.07);
  --sh: 0 4px 24px rgba(0,0,0,0.5);
  --r: 14px;
  --rs: 10px;
  --tr: 0.3s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:'IBM Plex Sans Thai',sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.2}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:100;background:rgba(11,11,15,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr);padding:12px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:8px}
.nav-logo{width:32px;height:32px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
.nav-brand-text{font-family:'Outfit';font-weight:800;font-size:0.95rem;color:var(--orange);letter-spacing:0.5px}
.nav-links{display:flex;gap:6px}
.nav-link{padding:6px 12px;border-radius:8px;font-size:0.8rem;color:var(--txt2);transition:var(--tr);font-weight:500}
.nav-link:hover,.nav-link.active{background:rgba(255,107,0,0.12);color:var(--orange)}

/* HERO */
.hero-banner{padding:28px 0 20px;background:linear-gradient(160deg,rgba(255,107,0,0.06)0%,transparent 60%)}
.hero-content{text-align:center}
.hero-content h1{font-size:1.6rem;font-weight:900;margin-bottom:6px}
.hero-content h1 span{color:var(--orange)}
.hero-content p{color:var(--txt2);font-size:0.9rem;max-width:500px;margin:0 auto}

/* CARDS */
.camp-grid{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:40px}
.camp-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;transition:var(--tr);cursor:pointer;display:flex;flex-direction:column}
.camp-card:hover{border-color:rgba(255,107,0,0.3);transform:translateY(-3px);box-shadow:var(--sh)}
.camp-img{position:relative;width:100%;aspect-ratio:4/3;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:4rem}
.camp-img img{width:100%;height:100%;object-fit:cover}
.camp-img-badge{position:absolute;top:10px;left:10px;padding:4px 10px;background:var(--orange);color:#fff;border-radius:8px;font-size:0.65rem;font-weight:700}
.camp-body{padding:14px;flex:1;display:flex;flex-direction:column}
.camp-name{font-family:'Outfit';font-weight:700;font-size:1rem;margin-bottom:2px}
.camp-price-now{font-size:1.5rem;font-weight:900;font-family:'Outfit';color:var(--orange)}
.camp-price-was{font-size:0.8rem;color:var(--txt3);text-decoration:line-through;margin-left:6px}

/* DETAIL PAGE */
.detail-back{display:inline-flex;align-items:center;gap:6px;padding:12px 0;color:var(--txt2);font-size:0.85rem}
.detail-img-wrap{border-radius:var(--r);background:var(--bg2);border:1px solid var(--bdr);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:5rem;margin-bottom:20px}
.detail-info h1{font-size:1.5rem;font-weight:900;margin-bottom:8px;color:var(--orange)}
.detail-desc{color:var(--txt2);font-size:0.85rem;margin-bottom:16px}
.detail-timer{display:inline-block;padding:6px 12px;background:rgba(255,107,0,0.1);color:var(--orange);border-radius:20px;font-size:0.8rem;font-weight:700;margin-bottom:16px;border:1px solid rgba(255,107,0,0.3)}

/* SLIDER */
.slider-wrap{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--bdr);margin-bottom:20px}
.slider-img{position:absolute;inset:0;opacity:0;transition:opacity 0.4s ease;display:flex;align-items:center;justify-content:center;font-size:5rem}
.slider-img.active{opacity:1;z-index:2}
.slider-img img{width:100%;height:100%;object-fit:cover}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.slider-btn:hover{background:var(--orange)}
.slider-prev{left:10px}
.slider-next{right:10px}
.slider-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:10}
.slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:var(--tr)}
.slider-dot.active{background:var(--orange);transform:scale(1.2)}

/* GAUGE */
.gauge-bg{height:20px;background:var(--bg3);border-radius:10px;overflow:hidden;border:1px solid var(--bdr);margin-top:10px}
.gauge-fill{height:100%;background:linear-gradient(90deg,var(--orange-d),var(--orange));min-width:3%}

/* CARD BLOCK */
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card-t{font-size:0.75rem;text-transform:uppercase;color:var(--txt2);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.card-t .ic{color:var(--orange)}

/* TABLE */
.tt{width:100%;border-collapse:collapse}
.tt th{text-align:left;padding:6px 8px;font-size:0.65rem;color:var(--txt3);border-bottom:1px solid var(--bdr)}
.tt td{padding:8px;font-size:0.8rem;border-bottom:1px solid var(--bdr)}
.tt tr.at{background:rgba(255,107,0,0.08);color:var(--orange);font-weight:600}

/* FORM */
.fg{margin-bottom:12px}
.fl{display:block;font-size:0.72rem;color:var(--txt2);margin-bottom:4px;font-weight:500}
.fi,.fta{width:100%;padding:10px 14px;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt);font-size:0.9rem}
.fi:focus,.fta:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,0,0.12)}
.fta{min-height:70px;resize:vertical}
.btn-sub{width:100%;padding:14px;border:none;border-radius:var(--rs);background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;font-size:1rem;font-weight:700;font-family:'Outfit';cursor:pointer;transition:var(--tr)}

/* MODAL / UNIQUE URL */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-ov.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--orange);border-radius:var(--r);padding:28px 24px;max-width:400px;width:100%;text-align:center}
.modal-ic{font-size:3rem;margin-bottom:12px}
.modal h2{color:var(--orange);margin-bottom:8px}
.url-box{background:var(--bg3);border:1px solid var(--bdr);border-radius:8px;padding:10px;margin:16px 0;word-break:break-all;font-size:0.8rem;color:var(--txt2)}
.btn-copy{padding:8px 16px;background:var(--glass);border:1px solid var(--orange);color:var(--orange);border-radius:6px;cursor:pointer;font-weight:600;margin-bottom:16px}
.btn-mod{padding:10px 24px;border:none;background:var(--orange);color:#fff;border-radius:var(--rs);font-weight:700;cursor:pointer}



/* SCROLLBAR — Global */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.4) rgba(28,28,36,0.3);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(28,28,36,0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange-d), var(--orange));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--orange), var(--orange-l));
}
::-webkit-scrollbar-thumb:active {
  background: var(--orange-l);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ORDER BUTTON */
.btn-order{width:100%;padding:14px;border:none;border-radius:var(--rs);background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;font-size:1rem;font-weight:700;font-family:'Outfit';cursor:pointer;transition:var(--tr);flex:2}
.btn-order:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn-order:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-cancel{flex:1;padding:12px;background:var(--bg3);color:var(--txt);border:1px solid var(--bdr);border-radius:8px;font-weight:700;font-family:'Outfit';cursor:pointer;transition:var(--tr)}
.btn-cancel:hover{border-color:var(--red);color:var(--red)}

/* QUANTITY SELECTOR */
.qty-wrap{display:flex;align-items:center;gap:0;border:1px solid var(--bdr);border-radius:var(--rs);overflow:hidden;background:var(--bg3)}
.qty-btn{width:44px;height:44px;border:none;background:transparent;color:var(--orange);font-size:1.4rem;font-weight:700;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center}
.qty-btn:hover{background:rgba(255,107,0,0.1)}
.qty-in{width:60px;text-align:center;border:none;background:transparent;color:var(--txt);font-size:1.2rem;font-weight:700;font-family:'Outfit';-moz-appearance:textfield}
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* UTILS */
.stock-tag{display:inline-block;padding:3px 8px;background:rgba(0,210,106,0.1);color:var(--green);border-radius:6px;font-size:0.7rem;font-weight:600}

@media(min-width:600px){
  .camp-grid{grid-template-columns:1fr 1fr}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
}
@media(min-width:900px){
  .camp-grid{grid-template-columns:1fr 1fr 1fr}
}

/* CUSTOM MODAL SYSTEM (ADMIN) */
.c-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:0.3s ease;backdrop-filter:blur(4px)}
.c-modal.show{opacity:1;pointer-events:auto}
.c-modal-c{background:var(--bg);width:90%;max-width:400px;margin:0 auto;border-radius:16px;padding:40px 30px;text-align:center;border:1px solid var(--bdr);box-shadow:0 20px 40px rgba(0,0,0,0.4);transform:scale(0.95) translateY(20px);transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.c-modal.show .c-modal-c{transform:scale(1) translateY(0)}