/* 
   Theme: Cyber Tech — Matrix Green on Black
   Primary: #00FF41 | Background: #0D0D0D
*/
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Kanit:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #00FF41;
    --primary-dim: #00CC33;
    --bg-dark: #050505;
    --bg-card: #0F0F0F;
    --bg-card2: #141414;
    --text-light: #E0E0E0;
    --text-dim: #888;
    --border-green: rgba(0, 255, 65, 0.3);
    --glow: 0 0 20px rgba(0, 255, 65, 0.4);
    --glow-strong: 0 0 40px rgba(0, 255, 65, 0.6);
}

* { box-sizing: border-box; }
body { font-family: 'Kanit','Sarabun',sans-serif; color: var(--text-light); background-color: var(--bg-dark); line-height: 1.7; }
::selection { background: var(--primary-color); color: #000; }
h1,h2,h3,h4,h5,h6 { font-weight:600; color:#fff; }
a { transition: all .3s; }
.text-primary-deep { color: var(--primary-color) !important; }
.bg-primary-deep { background:#001a08 !important; color:var(--text-light); }
.bg-secondary-ice { background:var(--bg-card) !important; }

.navbar { background:rgba(5,5,5,.97) !important; border-bottom:1px solid var(--border-green); padding:14px 0; }
.navbar-brand { font-weight:700; color:var(--primary-color) !important; font-family:'Share Tech Mono',monospace; text-shadow:var(--glow); }
.navbar-brand::before { content:'> '; color:var(--primary-dim); }
.nav-link { color:rgba(255,255,255,.7) !important; font-weight:500; padding:8px 16px !important; border-radius:4px; transition:all .3s; }
.nav-link:hover,.nav-link.active { color:var(--primary-color) !important; background:rgba(0,255,65,.08); }
.navbar-toggler { border-color:var(--border-green); }
.navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300FF41' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.btn-primary-deep { background:transparent; color:var(--primary-color); border:1px solid var(--primary-color); border-radius:4px; font-weight:600; font-family:'Share Tech Mono',monospace; letter-spacing:1px; box-shadow:0 0 10px rgba(0,255,65,.2); }
.btn-primary-deep:hover { background:var(--primary-color); color:#000; box-shadow:var(--glow); transform:translateY(-2px); }
.btn-line { background:transparent; color:#00B900; border:1px solid #00B900; border-radius:4px; font-weight:600; }
.btn-line:hover { background:#00B900; color:#fff; box-shadow:0 0 15px rgba(0,185,0,.4); transform:translateY(-2px); }
.btn-cyber { background:var(--primary-color); color:#000; border:none; border-radius:4px; font-weight:800; font-size:1.05rem; padding:14px 36px; font-family:'Share Tech Mono',monospace; box-shadow:0 0 25px rgba(0,255,65,.5); transition:all .3s; text-transform:uppercase; }
.btn-cyber:hover { background:#33ff66; color:#000; transform:translateY(-3px); box-shadow:0 0 45px rgba(0,255,65,.7); }

.hero-section { position:relative; background:#000; color:var(--text-light); padding:110px 0 90px; text-align:center; overflow:hidden; border-bottom:2px solid var(--border-green); }
.hero-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(0,255,65,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,65,.04) 1px,transparent 1px); background-size:40px 40px; animation:gridMove 20s linear infinite; }
@keyframes gridMove { from{transform:translateY(0)} to{transform:translateY(40px)} }
.hero-section::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(0,255,65,.07) 0%,transparent 60%); pointer-events:none; }
.hero-section .container { position:relative; z-index:2; }
.hero-section h1 { color:#fff; font-weight:800; font-size:clamp(1.8rem,4vw,3rem); text-shadow:0 0 30px rgba(0,255,65,.35); }
.hero-section h1 span { color:var(--primary-color); text-shadow:var(--glow-strong); }
.hero-subtitle { font-size:1.1rem; font-weight:300; color:rgba(255,255,255,.8); margin-bottom:35px; }

.promo-badge { background:transparent; border:1px solid var(--primary-color); color:var(--primary-color); padding:8px 24px; border-radius:4px; font-weight:700; display:inline-block; margin-bottom:24px; font-family:'Share Tech Mono',monospace; letter-spacing:1px; box-shadow:0 0 15px rgba(0,255,65,.3); animation:cyberPulse 2s ease-in-out infinite; }
@keyframes cyberPulse { 0%,100%{box-shadow:0 0 15px rgba(0,255,65,.3)} 50%{box-shadow:0 0 30px rgba(0,255,65,.6)} }

.campaign-hero { background:rgba(0,255,65,.04); border:1px solid var(--border-green); border-radius:8px; padding:28px 36px; margin-bottom:28px; }
.campaign-price-box { background:rgba(0,0,0,.9); border:1px solid var(--primary-color); border-radius:8px; padding:24px; text-align:center; box-shadow:var(--glow); }
.campaign-price { font-size:3.5rem; font-weight:800; color:var(--primary-color); font-family:'Share Tech Mono',monospace; text-shadow:var(--glow-strong); line-height:1; }
.flash-badge { background:var(--primary-color); color:#000; font-size:.7rem; font-weight:800; padding:3px 10px; border-radius:2px; letter-spacing:2px; font-family:'Share Tech Mono',monospace; display:inline-block; margin-bottom:8px; }

.section-padding { padding:80px 0; }
.section-title { text-align:center; margin-bottom:50px; position:relative; padding-bottom:18px; font-size:clamp(1.4rem,3vw,2rem); color:#fff; }
.section-title span { color:var(--primary-color); }
.section-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:120px; height:2px; background:linear-gradient(90deg,transparent,var(--primary-color),transparent); }

.feature-card { background:var(--bg-card); padding:32px; border-radius:8px; border:1px solid var(--border-green); transition:all .3s; height:100%; text-align:center; }
.feature-card:hover { transform:translateY(-8px); border-color:var(--primary-color); box-shadow:var(--glow); }
.feature-card h5 { color:var(--primary-color); }
.feature-card p { color:var(--text-dim); }
.feature-icon { font-size:2.5rem; color:var(--primary-color); margin-bottom:18px; text-shadow:var(--glow); }

.problem-card { background:var(--bg-card); padding:20px 24px; border-left:3px solid #ff4444; margin-bottom:14px; transition:all .3s; border-radius:0 8px 8px 0; }
.problem-card:hover { transform:translateX(8px); border-left-color:var(--primary-color); }
.problem-card h5 { color:#ff6666; font-size:1rem; margin-bottom:6px; }
.problem-card p { color:var(--text-dim); margin:0; font-size:.9rem; }

.service-card { background:var(--bg-card); border:1px solid var(--border-green); border-radius:8px; padding:28px; transition:all .3s; height:100%; }
.service-card:hover { border-color:var(--primary-color); box-shadow:var(--glow); transform:translateY(-6px); }
.service-card h5 { color:var(--primary-color); }
.service-card p { color:var(--text-dim); font-size:.92rem; }

.stat-box { text-align:center; padding:28px 20px; background:var(--bg-card); border:1px solid var(--border-green); border-radius:8px; transition:all .3s; }
.stat-box:hover { border-color:var(--primary-color); box-shadow:var(--glow); }
.stat-number { font-size:2.8rem; font-weight:800; color:var(--primary-color); font-family:'Share Tech Mono',monospace; text-shadow:var(--glow); display:block; }
.stat-label { color:var(--text-dim); font-size:.88rem; }

.timeline-item { display:flex; align-items:flex-start; gap:16px; padding:20px; background:var(--bg-card); border:1px solid var(--border-green); border-radius:8px; margin-bottom:14px; transition:all .3s; }
.timeline-item:hover { border-color:var(--primary-color); box-shadow:var(--glow); transform:translateX(8px); }
.timeline-icon { width:46px; height:46px; background:transparent; border:2px solid var(--primary-color); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--primary-color); font-size:1.2rem; flex-shrink:0; }

.cta-section { background:#000; border-top:2px solid var(--border-green); border-bottom:2px solid var(--border-green); position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(0,255,65,.06) 0%,transparent 70%); }

.floating-contact { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:12px; z-index:9999; }
.floating-btn { width:56px; height:56px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#000; font-size:22px; box-shadow:0 0 20px rgba(0,255,65,.4); transition:all .3s; text-decoration:none; }
.floating-btn:hover { transform:scale(1.15); color:#000; box-shadow:0 0 35px rgba(0,255,65,.7); }
.float-line { background:#00B900; }
.float-phone { background:var(--primary-color); }

footer { background:#000; border-top:2px solid var(--border-green); color:var(--text-light); padding:60px 0 24px; }
footer a { color:var(--primary-color); text-decoration:none; }
footer a:hover { color:#fff; text-shadow:var(--glow); }

.accordion-button { background:var(--bg-card); color:var(--text-light); font-weight:600; }
.accordion-button:not(.collapsed) { background:rgba(0,255,65,.08); color:var(--primary-color); }
.accordion-body { background:var(--bg-card2); color:var(--text-light); }

.location-card { background:var(--bg-card); border:1px solid var(--border-green); padding:14px; text-align:center; border-radius:4px; transition:all .3s; text-decoration:none; color:var(--text-light); display:block; }
.location-card:hover { border-color:var(--primary-color); box-shadow:var(--glow); color:var(--primary-color); transform:translateY(-4px); }

.admin-sidebar { background:#000; border-right:1px solid var(--border-green); min-height:100vh; padding:20px 0; }
.admin-sidebar .nav-link { color:rgba(0,255,65,.7) !important; padding:12px 20px !important; border-left:2px solid transparent; }
.admin-sidebar .nav-link:hover,.admin-sidebar .nav-link.active { color:var(--primary-color) !important; background:rgba(0,255,65,.06) !important; border-left-color:var(--primary-color) !important; }

.keyword-tag { display:inline-block; background:var(--bg-card); border:1px solid var(--border-green); color:var(--primary-color); padding:4px 12px; border-radius:2px; font-size:.83rem; margin:3px; font-family:'Share Tech Mono',monospace; transition:all .3s; }
.keyword-tag:hover { background:var(--primary-color); color:#000; box-shadow:var(--glow); }
.tracking-btn { cursor:pointer; }

@media(max-width:768px){.hero-section{padding:80px 0 70px;}.campaign-hero{padding:18px;}.campaign-price{font-size:2.5rem;}}