/* แม่สรวยซิสเต็ม — ธีมสว่างสบายตา + พื้นหลังภาพระบบ IT จางๆ เคลื่อนไหวช้า */
:root{
	--bg:#eef3fa;
	--ink:#13213d; --muted:#4c5c7a; --dim:#7486a5;
	--line:rgba(20,70,150,.12); --line-h:rgba(11,94,215,.35);
	--card:rgba(255,255,255,.9); --card-h:#fff;
	--brand:#0b5ed7; --brand-2:#0a4fb8; --brand-l:#3d8bff; --accent:#f7931e;
	--radius:14px; --shadow:0 1px 2px rgba(16,40,90,.05),0 6px 20px rgba(16,40,90,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:'Sarabun',Tahoma,sans-serif;color:var(--ink);font-size:16px;line-height:1.6;min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.btn{font-family:'Prompt',sans-serif}
.container{max-width:1160px;margin:0 auto;padding:0 16px}

/* ===== พื้นหลังภาพ IT (เฟด+ซูม ด้วย opacity/transform เท่านั้น จึงเบาเครื่อง) ทับด้วยชั้นสีสว่าง ===== */
body>.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.bgfx i{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform;
	animation:bgfade 32s infinite linear,bgzoom 32s infinite linear}
.bgfx i:nth-child(2){animation-delay:8s}
.bgfx i:nth-child(3){animation-delay:16s}
.bgfx i:nth-child(4){animation-delay:24s}
@keyframes bgfade{0%{opacity:0}6%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
@keyframes bgzoom{0%{transform:scale(1)}31%{transform:scale(1.08)}100%{transform:scale(1.08)}}
.bgfx::after{content:"";position:absolute;inset:0;
	background:
		linear-gradient(rgba(11,94,215,.05) 1px,transparent 1px) 0 0/44px 44px,
		linear-gradient(90deg,rgba(11,94,215,.05) 1px,transparent 1px) 0 0/44px 44px,
		linear-gradient(180deg,rgba(226,236,250,.60) 0%,rgba(230,239,251,.70) 35%,rgba(234,241,251,.78) 100%)}
@media (prefers-reduced-motion:reduce){ .bgfx i{animation:none} .bgfx i:first-child{opacity:1} }

/* ===== ส่วนหัว: โลโก้เดิม ===== */
.site-head{position:relative;background:linear-gradient(180deg,rgba(16,56,128,.42),rgba(16,56,128,.28));box-shadow:0 4px 18px rgba(16,40,90,.12)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--brand-l) 30%,var(--accent) 70%,transparent)}
.site-head .logo{display:block;max-width:960px;margin:0 auto;padding:12px 16px 10px}
.site-head .logo img{width:100%;height:auto;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 10px rgba(255,255,255,.95))}


/* ===== ปุ่ม ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;padding:10px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.btn-accent{background:var(--accent);color:#1b1205;box-shadow:0 6px 18px rgba(247,147,30,.3)}
.btn-accent:hover{background:#ffa53d}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand-l));color:#fff;box-shadow:0 6px 18px rgba(11,94,215,.25)}
.btn-outline,.btn-ghost{border-color:var(--line-h);color:var(--brand-2);background:rgba(255,255,255,.85)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--brand);background:#fff}

/* ===== การ์ดกลาง (แบบเดียวทุกส่วน) ===== */
.service,.work,.contact .item,.detail-card,.quick a{
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
	transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.service:hover,.work:hover,.contact a.item:hover,.quick a:hover{
	border-color:var(--line-h);background:var(--card-h);transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,40,90,.12)}
.ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;
	background:linear-gradient(135deg,var(--brand-2),var(--brand-l));box-shadow:0 6px 14px rgba(11,94,215,.25)}
.ic svg{width:23px;height:23px}

/* ===== หัวข้อ section (ระยะกระชับ) ===== */
.section{padding:32px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-size:24px;font-weight:600;color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.9)}
.sec-head h2::after{content:"";display:block;width:48px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--accent));margin-top:8px}
.sec-head p{color:var(--muted)}

/* ===== hero ===== */
.hero{position:relative}
.hero .container{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;padding:40px 16px 16px}
.hero .container.solo{grid-template-columns:1fr;justify-items:center;text-align:center;padding:40px 16px 12px}
.hero .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--brand-2);border:1px solid var(--line-h);background:rgba(255,255,255,.85);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.hero .tag i{width:8px;height:8px;border-radius:50%;background:#22c172;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,193,114,.5)}80%,100%{box-shadow:0 0 0 10px rgba(34,193,114,0)}}
.hero h1{font-size:38px;line-height:1.3;font-weight:600;margin-bottom:12px;color:#0d1b38;text-shadow:0 1px 12px rgba(255,255,255,.9)}
.hero h1 span{background:linear-gradient(90deg,#f7931e,#e8590c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 6px rgba(255,255,255,.9))}
.hero p{color:#33435f;font-size:17px;max-width:640px;text-shadow:0 1px 10px rgba(255,255,255,.95)}
.hero .solo p{margin:0 auto}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero .solo .cta{justify-content:center}



/* ===== บริการ ===== */
.services{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:12px}
.service{padding:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.service h3{font-size:17px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.service p{color:var(--muted);font-size:14.5px}

/* ===== ผลงาน ===== */
.works{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:24px}
.work{overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.work:hover{text-decoration:none}
.work .ph{aspect-ratio:4/3;background:#e3eaf5;overflow:hidden}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.work:hover .ph img{transform:scale(1.05)}
.work .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center;text-align:center}
.work .tx b{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work .tx span{font-size:13px;color:var(--dim)}
.more-row{text-align:center;margin-top:24px}
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pager a,.pager span{min-width:42px;text-align:center;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.pager a:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.pager .cur{background:var(--brand);border-color:var(--brand);color:#fff}


/* ===== ติดต่อ ===== */
.cta-band{border-radius:18px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px;
	background:linear-gradient(120deg,var(--brand-2),var(--brand-l));color:#fff;box-shadow:var(--shadow)}
.cta-band h2{font-size:24px;font-weight:600}
.cta-band p{color:#dbe8fd}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.contact .item{padding:18px;color:var(--ink);display:block}
.contact a.item:hover{text-decoration:none}
.contact .item .ic{margin-bottom:10px}
.contact .item h3{font-size:15px;font-weight:500;color:var(--muted)}
.contact .item p{color:var(--ink);font-size:15px}
.contact .item .big{font-family:'Prompt',sans-serif;font-size:22px;color:var(--brand-2);font-weight:600}

/* ===== ลิงก์ด่วน ===== */
.quick{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.quick a{padding:6px;background:#fff}
.quick img{width:100%;height:44px;object-fit:contain}

.site-foot{border-top:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--muted);font-size:14px;padding:20px 0;margin-top:auto}
.site-foot .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot b{color:var(--ink)}
.site-foot a{color:var(--brand)}

/* ===== หน้ารายละเอียดผลงาน ===== */
.crumb{font-size:14px;color:var(--dim);margin:24px 0 12px}
.detail-card{padding:26px}
.detail-card h1{font-size:26px;font-weight:600;line-height:1.35;color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.meta span{background:#eaf1fc;border:1px solid var(--line);color:#2f4266;font-size:14px;padding:4px 12px;border-radius:999px}
.detail-text{color:#2a3a58;font-size:16px;overflow-wrap:anywhere}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.gallery a{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#e3eaf5;display:block;border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery a:hover img{transform:scale(1.05)}
.back-row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 44px}

.lb{position:fixed;inset:0;background:rgba(8,14,28,.94);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:8px}
.lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:24px;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .x{top:16px;right:16px}
.lb .pv{left:16px;top:50%;margin-top:-23px}
.lb .nx{right:16px;top:50%;margin-top:-23px}

/* ===== responsive ===== */
@media (max-width:960px){
	.hero .container{grid-template-columns:1fr}
	.services{grid-template-columns:repeat(2,1fr)}
	.works{grid-template-columns:repeat(var(--cols-t,3),1fr)}
	.quick{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
	body{font-size:15px}
	.hero .container,.hero .container.solo{padding:28px 16px 8px}
	.hero h1{font-size:25px}
	.hero h1 br{display:none}
	.hero p{font-size:15.5px}
	.section{padding:26px 0}
	.sec-head h2{font-size:21px}
	.services{grid-template-columns:1fr}
	.service{flex-direction:row;padding:14px}
	.works{grid-template-columns:repeat(var(--cols-m,2),1fr);gap:14px}
	.gallery{grid-template-columns:repeat(2,1fr);gap:10px}
	.work .tx{padding:9px}
	.work .tx b{font-size:13.5px}
	.detail-card{padding:18px}
	.detail-card h1{font-size:21px}
	.cta-band{padding:20px}
	.cta-band h2{font-size:20px}
}

/* ===== การ์ดผลงาน: ป้ายเลขงาน/ประเภท, hover, ตัวกรอง, ปรากฏตอนเลื่อน ===== */
.work .ph{position:relative}
.work .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,56,0) 45%,rgba(8,24,56,.75) 100%);opacity:0;transition:opacity .3s}
.work:hover .ph::after{opacity:1}
.work .no{position:absolute;left:10px;top:10px;z-index:1;font-family:'Prompt',sans-serif;font-size:12.5px;font-weight:600;color:#fff;
	background:rgba(13,27,56,.78);padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.work .cat{position:absolute;left:10px;bottom:10px;z-index:1;font-family:'Prompt',sans-serif;font-size:12px;font-weight:600;color:#fff;padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cat-cctv{background:#e8590c}
.cat-network{background:#0b5ed7}
.cat-server{background:#6f42c1}
.cat-pos{background:#0f9d58}
.cat-other{background:#475a7a}
.work .go{position:absolute;right:12px;bottom:10px;z-index:1;color:#fff;font-family:'Prompt',sans-serif;font-size:13px;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.work:hover .go{opacity:1;transform:none}
.work .tx{border-top:3px solid transparent;transition:border-color .3s}
.work:hover .tx{border-top-color:var(--accent)}
.work:hover .tx b{color:var(--brand-2)}

.wfilter{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 18px}
.wfilter button{font:500 14px 'Prompt',sans-serif;color:var(--brand-2);background:rgba(255,255,255,.9);border:1px solid var(--line-h);border-radius:999px;padding:7px 16px;cursor:pointer;transition:all .15s}
.wfilter button i{font-style:normal;font-size:12px;background:#e6efff;color:var(--brand-2);border-radius:999px;padding:1px 8px;margin-left:4px}
.wfilter button:hover{border-color:var(--brand)}
.wfilter button.on{background:linear-gradient(135deg,var(--brand-2),var(--brand-l));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(11,94,215,.25)}
.wfilter button.on i{background:rgba(255,255,255,.25);color:#fff}

.work.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease,border-color .2s,background .2s,box-shadow .2s}
.work.rv.in{opacity:1;transform:none}
.work.rv.in:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ .work.rv{opacity:1;transform:none} }
@media (max-width:640px){ .work .go{display:none} .work .no,.work .cat{font-size:11px;padding:2px 8px} .wfilter button{padding:6px 12px;font-size:13px} }

.btn-lg{font-size:16px;padding:13px 30px}

/* แถบชื่องาน: ฟ้าอ่อนไล่เฉด ตัวอักษรน้ำเงินเข้ม */
.work{background:linear-gradient(160deg,#e6f0ff,#cfe2ff);border-color:rgba(11,94,215,.22)}
.work:hover{background:linear-gradient(160deg,#dceaff,#bcd7ff);border-color:rgba(247,147,30,.7)}
.work .tx{position:relative;padding:12px 14px 14px}
.work .tx b,.work:hover .tx b{color:#0b3a85}
.work .tx span{color:#4a6390}
.work:hover .tx{border-top-color:var(--accent)}

/* การ์ดบริการแบบมีภาพประกอบ */
.service.has-img{padding:0;overflow:hidden;gap:0}
.sv-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0d2a5a}
.sv-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sv-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,63,149,.05) 30%,rgba(11,63,149,.55) 100%)}
.service.has-img:hover .sv-img img{transform:scale(1.07)}
.sv-body{position:relative;padding:16px 18px 18px}
.sv-body .ic{position:absolute;left:16px;top:-26px;z-index:2;width:50px;height:50px;border:3px solid #fff}
.service.has-img h3{margin-bottom:6px}
.foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#histats_counter{min-height:1px}
@media (max-width:640px){ .service.has-img{flex-direction:column} .foot-r{align-items:flex-start} }

/* ติดต่อเรา: แถบเดียวกระทัดรัด */
.cbar{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cb{flex:1 1 200px;display:flex;align-items:center;gap:12px;padding:14px 18px;color:var(--ink);transition:background .2s;min-width:0}
.cb+.cb{border-left:1px solid var(--line)}
.cb:hover{background:#fff;text-decoration:none}
.cb.cb-map{flex:1.7 1 300px}
.ci{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ci svg{width:19px;height:19px}
.cb-tel .ci{background:var(--accent)}
.cb-fb .ci{background:#1877f2}
.cb-line .ci{background:#06c755}
.cb-map .ci{background:#e5484d}
.ct{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ct small{font-size:12.5px;color:var(--dim)}
.ct b{font-family:'Prompt',sans-serif;font-size:15.5px;font-weight:600;color:var(--ink)}
.cb-tel .ct b{font-size:18px;color:var(--brand-2)}
.cb-map .ct b{font-weight:500;font-size:14.5px}
@media (max-width:640px){ .cb{flex-basis:100%} .cb+.cb{border-left:0;border-top:1px solid var(--line)} }

.work .tx .wno{color:var(--accent);font-weight:600;margin-right:2px}

/* ท้ายเว็บ: กึ่งกลาง */
.site-foot .container{flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.copy{font-size:13px;color:var(--dim)}

/* ===== ตัวอย่างพื้นหลัง (ทดลอง ?bgv=1 / ?bgv=2) ===== */
.bgfx .nodes{display:none}
/* แบบ 1: ภาพชัดขึ้น ทับโทนน้ำเงิน-ฟ้าสด */
body.bgv1 .bgfx::after{background:
	linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(135deg,rgba(8,60,160,.72) 0%,rgba(14,110,210,.55) 45%,rgba(30,170,220,.45) 100%)}
body.bgv1 .sec-head h2,body.bgv1 .hero h1{color:#fff;text-shadow:0 2px 12px rgba(0,30,90,.5)}
body.bgv1 .hero h1 span{filter:none}
body.bgv1 .site-head{background:rgba(255,255,255,.18)}
/* แบบ 2: สว่าง + แสงสีฟุ้ง + จุดเครือข่ายเคลื่อนไหว */
body.bgv2 .bgfx::after{background:
	radial-gradient(600px 420px at 12% 18%,rgba(61,139,255,.35),transparent 70%),
	radial-gradient(520px 420px at 88% 30%,rgba(34,200,230,.30),transparent 70%),
	radial-gradient(560px 460px at 70% 90%,rgba(247,147,30,.18),transparent 70%),
	linear-gradient(rgba(11,94,215,.06) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(11,94,215,.06) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(180deg,rgba(232,241,253,.72),rgba(236,244,253,.82))}
body.bgv2 .bgfx .nodes{display:block;position:absolute;inset:-50%;z-index:1;opacity:.55;animation:drift 60s linear infinite;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg stroke='%233d8bff' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M30 40L120 90L210 50M120 90L90 190L200 210M90 190L20 150'/%3E%3C/g%3E%3Cg fill='%230b5ed7'%3E%3Ccircle cx='30' cy='40' r='3'/%3E%3Ccircle cx='120' cy='90' r='4'/%3E%3Ccircle cx='210' cy='50' r='3'/%3E%3Ccircle cx='90' cy='190' r='3.5'/%3E%3Ccircle cx='200' cy='210' r='3'/%3E%3Ccircle cx='20' cy='150' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 260px}
@keyframes drift{to{transform:translate(260px,130px)}}
@media (prefers-reduced-motion:reduce){ body.bgv2 .bgfx .nodes{animation:none} }
/* แบบ 3: โฮโลแกรม (โทนกลาง ไม่มืด) */
body.bgv3 .bgfx::after{background:
	repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
	linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(125deg,rgba(58,110,220,.66) 0%,rgba(60,180,225,.52) 35%,rgba(150,105,225,.55) 68%,rgba(70,125,230,.64) 100%)}
body.bgv3 .bgfx .nodes{display:block;position:absolute;inset:0 -60%;z-index:1;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 48%,rgba(190,240,255,.22) 50%,rgba(255,200,250,.14) 52%,transparent 58%);animation:sheen 14s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
@media (prefers-reduced-motion:reduce){ body.bgv3 .bgfx .nodes{animation:none;display:none} }
body.bgv3 .service,body.bgv3 .work,body.bgv3 .contact .item,body.bgv3 .cbar,body.bgv3 .detail-card{
	border:1.5px solid transparent;
	background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,linear-gradient(120deg,#5fd8ff,#9a8cff 50%,#ff8fd8) border-box;
	box-shadow:0 10px 30px rgba(60,40,160,.18),0 0 0 1px rgba(255,255,255,.25)}
body.bgv3 .work{background:linear-gradient(160deg,rgba(232,244,255,.95),rgba(225,228,255,.95)) padding-box,linear-gradient(120deg,#5fd8ff,#9a8cff 50%,#ff8fd8) border-box}
body.bgv3 .service:hover,body.bgv3 .work:hover{box-shadow:0 16px 40px rgba(60,40,160,.28),0 0 22px rgba(95,216,255,.45)}
body.bgv3 .sec-head h2,body.bgv3 .hero h1{color:#fff;text-shadow:0 0 14px rgba(120,210,255,.75),0 2px 6px rgba(30,30,110,.35)}
body.bgv3 .sec-head h2::after{background:linear-gradient(90deg,#5fd8ff,#9a8cff,#ff8fd8)}
body.bgv3 .hero h1 span{background:linear-gradient(90deg,#ffd27a,#ff9fd8 55%,#9fe8ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
body.bgv3 .site-head{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:none}
body.bgv3 .site-head::after{background:linear-gradient(90deg,transparent,#5fd8ff 25%,#9a8cff 50%,#ff8fd8 75%,transparent)}
body.bgv3 .site-foot{background:rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.35)}
body.bgv3 .copy{color:#eef3ff}
body.bgv3 .btn-primary{background:linear-gradient(120deg,#3b7dff,#7a6cff 60%,#c46ae8);box-shadow:0 6px 22px rgba(120,90,255,.4)}
body.bgv3 .quick a{box-shadow:0 6px 18px rgba(60,40,160,.18)}

/* ลิงก์ด่วน: การ์ดแบบเดียวกันทุกใบ ไอคอน + ชื่อ */
.quick{grid-template-columns:repeat(5,1fr);gap:10px}
.quick a.qk{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);color:var(--ink)}
.quick a.qk:hover{text-decoration:none}
.qi{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(16,40,90,.18);display:grid;place-items:center;background:#fff}
.qi svg,.qi img{width:100%;height:100%;object-fit:cover}
.ql{font-family:'Prompt',sans-serif;font-size:14.5px;font-weight:500;line-height:1.25}
body.bgv3 .quick a.qk{border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,linear-gradient(120deg,#5fd8ff,#9a8cff 50%,#ff8fd8) border-box}
@media (max-width:640px){ .quick{grid-template-columns:repeat(2,1fr)} .ql{font-size:13px} }

/* แบบ 4: พื้นหลังนิ่ง mesh gradient + ลายวงจรบางๆ (ไม่มีภาพ ไม่เคลื่อนไหว) */
body.bgv4 .bgfx i,body.bgv4 .bgfx .nodes{display:none}
body.bgv4 .bgfx{background:
	radial-gradient(900px 620px at 6% 4%,rgba(98,214,250,.95),transparent 62%),
	radial-gradient(820px 620px at 96% 10%,rgba(150,128,245,.92),transparent 60%),
	radial-gradient(1000px 760px at 48% 108%,rgba(66,140,250,.95),transparent 62%),
	radial-gradient(700px 520px at 92% 78%,rgba(206,140,250,.70),transparent 58%),
	radial-gradient(640px 520px at 12% 72%,rgba(80,200,235,.65),transparent 60%),
	linear-gradient(135deg,#5b86ea,#6a78e6 55%,#5a8ff0)}
body.bgv4 .bgfx::after{background:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M0 40h50l20 20h60l15-15h75M220 120h-40l-20 20H90l-15 15H0M40 220v-50l20-20V90M170 0v40l-15 15v55'/%3E%3Cg fill='%23fff' fill-opacity='.22' stroke='none'%3E%3Ccircle cx='130' cy='60' r='3'/%3E%3Ccircle cx='90' cy='140' r='3'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3Ccircle cx='155' cy='55' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px,
	linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px}

/* ลิงก์ด่วน: การ์ดใหญ่ขึ้น */
.quick{gap:14px}
.quick a.qk{padding:16px 20px;gap:14px;border-radius:16px}
.qi{width:50px;height:50px}
.ql{font-size:17px;font-weight:600}
@media (max-width:640px){ .quick a.qk{padding:12px 14px} .qi{width:40px;height:40px} .ql{font-size:14.5px} }

/* ชื่อผลงาน: ขนาดพอดี อ่านง่าย */
.work .tx{padding:13px 16px 15px}
.work .tx b{font-size:16.5px;line-height:1.5}
@media (max-width:640px){ .work .tx{padding:10px 10px 12px} .work .tx b{font-size:14.5px} }
/* แบบ 5: สว่าง เรียบ พรีเมียม (นิ่ง ไม่มีภาพ) */
body.bgv5 .bgfx i,body.bgv5 .bgfx .nodes{display:none}
body.bgv5 .bgfx{background:
	radial-gradient(1000px 600px at 100% 0%,rgba(61,139,255,.22),transparent 60%),
	radial-gradient(900px 600px at 0% 100%,rgba(34,190,230,.18),transparent 60%),
	linear-gradient(180deg,#f4f8ff 0%,#e9f1fc 100%)}
body.bgv5 .bgfx::after{background:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%230b5ed7' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 40h50l20 20h60l15-15h75M220 120h-40l-20 20H90l-15 15H0M40 220v-50l20-20V90M170 0v40l-15 15v55'/%3E%3Cg fill='%230b5ed7' fill-opacity='.10' stroke='none'%3E%3Ccircle cx='130' cy='60' r='3'/%3E%3Ccircle cx='90' cy='140' r='3'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3Ccircle cx='155' cy='55' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px}
body.bgv5 .site-head{background:linear-gradient(135deg,#0b3f95,#0b5ed7 60%,#2f80f0);box-shadow:0 4px 20px rgba(11,63,149,.25)}
body.bgv5 .site-head::after{background:linear-gradient(90deg,transparent,#5fd0ff 30%,#f7931e 70%,transparent)}
/* แบบ 6: ภาพ data center นิ่ง ทับขาวบาง (ไม่เคลื่อนไหว) */
body.bgv6 .bgfx i,body.bgv6 .bgfx .nodes{display:none}
body.bgv6 .bgfx{background:url(../images/bg/dc_static.jpg) center/cover no-repeat}
body.bgv6 .bgfx::after{background:linear-gradient(180deg,rgba(240,246,255,.70) 0%,rgba(240,246,255,.80) 40%,rgba(240,246,255,.88) 100%)}
/* แบบ 7: พื้นน้ำเงินกลาง (นิ่ง) ให้การ์ดขาวตัดเด่น */
body.bgv7 .bgfx i,body.bgv7 .bgfx .nodes{display:none}
body.bgv7 .bgfx{background:
	radial-gradient(1100px 700px at 85% 0%,rgba(90,160,255,.45),transparent 60%),
	radial-gradient(900px 700px at 0% 100%,rgba(40,170,220,.30),transparent 60%),
	linear-gradient(160deg,#2f63b4 0%,#2a59a6 50%,#24508f 100%)}
body.bgv7 .bgfx::after{background:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M0 40h50l20 20h60l15-15h75M220 120h-40l-20 20H90l-15 15H0M40 220v-50l20-20V90M170 0v40l-15 15v55'/%3E%3Cg fill='%23fff' fill-opacity='.14' stroke='none'%3E%3Ccircle cx='130' cy='60' r='3'/%3E%3Ccircle cx='90' cy='140' r='3'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3Ccircle cx='155' cy='55' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px,
	linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px}
body.bgv7 .service,body.bgv7 .work,body.bgv7 .cbar,body.bgv7 .quick a.qk,body.bgv7 .detail-card{background:#fff;border:0;box-shadow:0 10px 28px rgba(5,20,60,.30)}
body.bgv7 .service:hover,body.bgv7 .work:hover,body.bgv7 .quick a.qk:hover{background:#fff;box-shadow:0 16px 36px rgba(5,20,60,.40),0 0 0 2px #f7931e}
body.bgv7 .work .tx{border-top:0}
body.bgv7 .work .tx b{color:#0b3a85}
body.bgv7 .sec-head h2,body.bgv7 .hero h1{color:#fff;text-shadow:0 2px 10px rgba(0,20,60,.35)}
body.bgv7 .sec-head h2::after{background:linear-gradient(90deg,#7fd3ff,#f7931e)}
body.bgv7 .hero h1 span{filter:none}
body.bgv7 .site-head{background:rgba(10,35,85,.35);box-shadow:0 4px 20px rgba(0,20,60,.25)}
body.bgv7 .site-foot{background:rgba(10,35,85,.45);border-top:1px solid rgba(255,255,255,.15)}
body.bgv7 .copy{color:#d5e2f7}
body.bgv7 .crumb,body.bgv7 .crumb a{color:#d5e2f7}

/* ปิดการเคลื่อนไหวทั้งหมดของพื้นหลัง (ผู้ใช้ขอ) — ใช้ภาพแรกเป็นภาพนิ่ง */
.bgfx i{animation:none!important;transform:none!important;opacity:0}
.bgfx i:first-child{opacity:1}
.bgfx .nodes{display:none!important;animation:none!important}

/* ลิงก์ด่วน: พื้นสีตามแบรนด์ ตัวอักษรขาว */
.quick a.qk,body.bgv3 .quick a.qk,body.bgv7 .quick a.qk{border:0;color:#fff;background:var(--qbg,#0b5ed7);box-shadow:0 8px 20px rgba(10,30,70,.22)}
.quick a.qk:hover,body.bgv7 .quick a.qk:hover{background:var(--qbg,#0b5ed7);filter:brightness(1.08);box-shadow:0 12px 26px rgba(10,30,70,.3)}
.quick a.qk .ql{color:#fff}
.quick .qi{box-shadow:0 2px 6px rgba(0,0,0,.18)}
.qk-google{--qbg:linear-gradient(135deg,#4285f4,#2f6fe0)}
.qk-youtube{--qbg:linear-gradient(135deg,#ff2a4a,#d9001e)}
.qk-speedtest{--qbg:linear-gradient(135deg,#1d2140,#0f1226)}
.qk-facebook{--qbg:linear-gradient(135deg,#2a86ff,#1466d8)}
.qk-gmail{--qbg:linear-gradient(135deg,#f0554a,#c5221f)}
.qk-link{--qbg:linear-gradient(135deg,#0b5ed7,#3d8bff)}

/* ธีมหลัก (bgv8): ภาพ fiber นิ่ง ทับน้ำเงินเข้ม การ์ดขาวตัดเด่น */
body.bgv8 .bgfx::after{background:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M0 40h50l20 20h60l15-15h75M220 120h-40l-20 20H90l-15 15H0M40 220v-50l20-20V90M170 0v40l-15 15v55'/%3E%3Cg fill='%23fff' fill-opacity='.14' stroke='none'%3E%3Ccircle cx='130' cy='60' r='3'/%3E%3Ccircle cx='90' cy='140' r='3'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3Ccircle cx='155' cy='55' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px,
	linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(160deg,rgba(16,46,104,.80) 0%,rgba(14,40,94,.84) 50%,rgba(10,30,74,.88) 100%)}
body.bgv8 .service,body.bgv8 .work,body.bgv8 .cbar,body.bgv8 .quick a.qk,body.bgv8 .detail-card{background:#fff;border:0;box-shadow:0 10px 28px rgba(5,20,60,.30)}
body.bgv8 .service:hover,body.bgv8 .work:hover,body.bgv8 .quick a.qk:hover{background:#fff;box-shadow:0 16px 36px rgba(5,20,60,.40),0 0 0 2px #f7931e}
body.bgv8 .work .tx{border-top:0}
body.bgv8 .work .tx b{color:#0b3a85}
body.bgv8 .sec-head h2,body.bgv8 .hero h1{color:#fff;text-shadow:0 2px 10px rgba(0,20,60,.35)}
body.bgv8 .sec-head h2::after{background:linear-gradient(90deg,#7fd3ff,#f7931e)}
body.bgv8 .hero h1 span{filter:none}
body.bgv8 .site-head{background:rgba(10,35,85,.35);box-shadow:0 4px 20px rgba(0,20,60,.25)}
body.bgv8 .site-foot{background:rgba(10,35,85,.45);border-top:1px solid rgba(255,255,255,.15)}
body.bgv8 .copy{color:#d5e2f7}
body.bgv8 .crumb,body.bgv8 .crumb a{color:#d5e2f7}

/* ลิงก์ด่วนคงสีแบรนด์ในทุกธีม */
body.bgv8 .quick a.qk,body.bgv8 .quick a.qk:hover{background:var(--qbg,#0b5ed7);color:#fff}
/* หัวข้อ section และข้อความ hero: ให้อ่านชัดบนพื้นหลังทุกแบบ */
body .sec-head h2{display:inline-block;color:#fff;background:rgba(8,26,66,.72);padding:6px 16px 8px;border-radius:12px;text-shadow:none;box-shadow:0 6px 18px rgba(5,20,60,.25)}
body .sec-head h2::after{margin-top:6px}
body .hero .container{background:rgba(8,26,66,.62);border-radius:20px;padding:28px 24px;margin-top:20px;margin-bottom:8px;box-shadow:0 10px 30px rgba(5,20,60,.3)}
body .hero h1{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
body .hero h1 span{background:none;-webkit-background-clip:initial;background-clip:initial;color:#ffad3b;filter:none}
@media (max-width:640px){ body .hero .container{padding:20px 14px;margin:14px 16px 4px} }
/* หัวข้อ: สีทอง-ส้มเด่น ไม่ใช่สีขาว (แทนแบบกล่องเข้ม) */
body .sec-head h2{display:inline-flex;align-items:center;gap:10px;background:none;box-shadow:none;padding:0;border-radius:0;
	font-size:28px;font-weight:700;color:#ffb83d;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 18px rgba(255,170,40,.35)}
body .sec-head h2::before{content:"";width:6px;height:28px;border-radius:3px;background:linear-gradient(180deg,#ffd27a,#f27a00);box-shadow:0 0 10px rgba(255,160,40,.6)}
body .sec-head h2::after{display:none}
body .hero .container{background:none;box-shadow:none;padding:40px 16px 12px;margin:0 auto}
body .hero h1{color:#ffffff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
body .hero h1 span{color:#ffb83d}
@media (max-width:640px){ body .sec-head h2{font-size:22px} body .sec-head h2::before{height:22px} }

/* ===== หัวข้อแนว Network: กล่องไอคอนเรืองแสง + ตัวอักษรทอง (ใช้ทุกธีม) ===== */
body[class] .sec-head h2{display:inline-flex;align-items:center;gap:12px;background:none;box-shadow:none;padding:0;border-radius:0;
	font-family:'Prompt',sans-serif;font-size:27px;font-weight:700;letter-spacing:.2px;color:#ffb83d;text-shadow:0 2px 6px rgba(0,0,0,.35)}
body[class] .sec-head h2::before,body[class] .sec-head h2::after{display:none}
.hic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#7fe0ff;
	background:linear-gradient(145deg,rgba(20,60,140,.85),rgba(8,26,70,.9));border:1px solid rgba(127,224,255,.55);
	box-shadow:0 0 0 3px rgba(127,224,255,.10),0 0 16px rgba(80,200,255,.45),inset 0 0 10px rgba(127,224,255,.18)}
.hic svg{width:22px;height:22px;filter:drop-shadow(0 0 4px rgba(127,224,255,.8))}
.htx{background:linear-gradient(180deg,#ffd27a,#ff9d1f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.sec-head{margin-bottom:20px}
@media (max-width:640px){ body[class] .sec-head h2{font-size:21px;gap:10px} .hic{width:36px;height:36px} .hic svg{width:19px;height:19px} }

.copy b{color:#ffb83d}
.copy{color:#c9d7f2}
/* ข้อความ "ติดตั้งระบบ Network..." : แบนเนอร์เข้มขอบเรืองแสง ให้ตัวหนังสือเด่นจากพื้นหลัง */
body[class] .hero .container{max-width:1128px;margin:24px auto 8px;padding:34px 24px 36px;border-radius:20px;
	background:linear-gradient(135deg,rgba(6,22,60,.94),rgba(14,48,120,.94));border:1px solid rgba(127,224,255,.45);
	box-shadow:0 0 0 4px rgba(127,224,255,.08),0 0 28px rgba(80,200,255,.30),0 18px 40px rgba(0,10,40,.45);position:relative;overflow:hidden}
body[class] .hero .container::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%237fe0ff' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M0 40h50l20 20h60l15-15h75M220 120h-40l-20 20H90l-15 15H0M40 220v-50l20-20V90M170 0v40l-15 15v55'/%3E%3C/svg%3E") 0 0/220px 220px}
body[class] .hero h1{position:relative;color:#fff;font-size:36px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
body[class] .hero h1 span{color:#ffb83d}
@media (max-width:640px){ body[class] .hero .container{margin:16px 16px 4px;padding:22px 14px} body[class] .hero h1{font-size:23px} }

.hs-wrap{display:flex;justify-content:center}
#histats_counter{display:inline-block;background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 6px 18px rgba(5,20,60,.25);min-height:55px}
/* กล่องตัวนับ Histats เดิม ตกแต่งกรอบให้เข้ากับธีม */
.hs-card{display:inline-flex;flex-direction:column;align-items:center;gap:10px;padding:14px 18px 16px;border-radius:18px;text-decoration:none!important;
	background:linear-gradient(145deg,rgba(6,22,60,.92),rgba(14,48,120,.92));border:1px solid rgba(127,224,255,.45);
	box-shadow:0 0 0 4px rgba(127,224,255,.08),0 0 22px rgba(80,200,255,.28),0 12px 30px rgba(0,10,40,.4);transition:transform .2s,box-shadow .2s}
.hs-card:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(127,224,255,.12),0 0 30px rgba(80,200,255,.45),0 16px 34px rgba(0,10,40,.45)}
.hs-head{display:flex;align-items:center;gap:10px}
.hs-head .hic{width:34px;height:34px;border-radius:10px}
.hs-head .hic svg{width:18px;height:18px}
.hs-t{font-family:'Prompt',sans-serif;font-weight:700;font-size:16px;background:linear-gradient(180deg,#ffd27a,#ff9d1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-box{display:block;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:inset 0 0 0 1px rgba(11,94,215,.15)}
.hs-box #histats_counter{display:block;background:none;box-shadow:none;padding:0;border-radius:0;min-height:55px;min-width:270px}
/* พื้นหลังเข้มขึ้น (ผู้ใช้ขอ) */
body.bgv8 .bgfx::after{background:
	linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
	linear-gradient(160deg,rgba(8,26,66,.90) 0%,rgba(6,22,58,.92) 50%,rgba(4,16,44,.95) 100%)}
/* แบนเนอร์ข้อความ: ลดขนาด */
body[class] .hero .container{max-width:820px;padding:20px 22px 22px;margin:20px auto 4px;border-radius:16px}
body[class] .hero h1{font-size:25px;line-height:1.45;margin-bottom:0}
@media (max-width:640px){ body[class] .hero .container{margin:14px 16px 4px;padding:16px 12px} body[class] .hero h1{font-size:19px} }
/* ตัวนับ Histats: ไม่มีกรอบน้ำเงิน กล่องขาวพอดีตัว */
.hs-card,.hs-card:hover{display:inline-block;padding:0;background:none;border:0;box-shadow:none;border-radius:0;transform:none}
.hs-box{display:inline-block;padding:6px 8px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(0,10,40,.3)}
.hs-box #histats_counter{min-width:0;min-height:0;width:auto}

/* No. สีและขนาดเดียวกับชื่องาน */
.work .tx .wno{color:inherit;font-size:inherit;font-weight:inherit;margin-right:0}
/* ข้อความ "ติดตั้งระบบ..." ไม่มีกรอบพื้นหลัง ใช้ตัวหนา + เงาเข้มให้ไม่กลืน */
body[class] .hero .container{background:none;border:0;box-shadow:none;padding:28px 16px 8px;margin:8px auto 0;max-width:1160px}
body[class] .hero .container::before{display:none}
body[class] .hero h1{font-size:28px;font-weight:700;color:#fff;
	text-shadow:0 0 2px #04102c,0 0 2px #04102c,0 2px 4px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6)}
body[class] .hero h1 span{color:#ffb020;text-shadow:inherit}
@media (max-width:640px){ body[class] .hero h1{font-size:21px} }
/* ไม่ใช้ตัวอักษรสีขาวบนพื้นหลังเว็บ */
body[class] .hero h1{color:#7fe0ff}
body[class] .hero h1 span{color:#ffb020}
.copy,body.bgv7 .copy{color:#7fe0ff}
.copy b{color:#ffb83d}
/* ไม่มีตัวอักษรสีขาวทั้งหน้า */
.quick a.qk .ql{color:#ffe08a;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.btn-primary,body.bgv3 .btn-primary{color:#ffe08a}
.btn-primary svg{color:#ffe08a}
/* Speedtest: สีม่วง-ฟ้าตามแบรนด์ Ookla ให้ไม่กลืนกับพื้นหลังเข้ม */
.qk-speedtest{--qbg:linear-gradient(135deg,#7b3fe4,#1fb6e8)}
/* พื้นหลังเคลื่อนไหว (bgv8): แสงออโรร่าไหลช้าๆ + จุดเครือข่ายเชื่อมโยง (js/bg-net.js) วางบนชั้นสีน้ำเงินเข้ม */
.bgfx .aur,.bgfx canvas.net{display:none}
body.bgv8 .bgfx::after{z-index:1}
body.bgv8 .bgfx .aur{display:block;position:absolute;inset:-25%;z-index:2;pointer-events:none;
	background:
		radial-gradient(38% 32% at 22% 28%,rgba(41,182,255,.30),transparent 70%),
		radial-gradient(34% 30% at 78% 70%,rgba(70,95,255,.32),transparent 70%),
		radial-gradient(22% 20% at 62% 18%,rgba(247,147,30,.16),transparent 70%);
	animation:aur 26s ease-in-out infinite alternate;will-change:transform}
@keyframes aur{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5%,-4%) rotate(8deg)}100%{transform:translate(-5%,4%) rotate(-6deg)}}
body.bgv8 .bgfx canvas.net{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){ body.bgv8 .bgfx .aur{animation:none} }
/* การ์ดผลงาน: กรอบทองไล่ระดับ (พื้นขาวที่ padding-box, ทองที่ border-box) ชี้แล้วแสงทองเลื่อน */
body.bgv8 .work{border:3px solid transparent;
	background:linear-gradient(#fff,#fff) padding-box,
		linear-gradient(135deg,#fff4c2 0%,#f2c94c 18%,#b8860b 38%,#ffe9a3 55%,#d4a017 72%,#8a6212 88%,#f7d774 100%) border-box;
	background-size:100% 100%,220% 220%;background-position:0 0,0% 50%;
	box-shadow:0 10px 28px rgba(5,20,60,.30),0 0 14px rgba(242,201,76,.28);
	transition:background-position .8s ease,box-shadow .3s,transform .5s ease,opacity .5s ease}
body.bgv8 .work:hover{background-position:0 0,100% 50%;box-shadow:0 16px 36px rgba(5,20,60,.40),0 0 22px rgba(242,201,76,.55)}
body.bgv8 .work .ph{border-bottom:2px solid #e2b84a}
/* ชื่อผลงาน: พื้นไล่ครีม -> ทองอ่อน (ไม่เข้มจนอ่านยาก) */
body.bgv8 .work .tx{background:linear-gradient(135deg,#fffaf0 0%,#fdf0cc 55%,#f8dc95 100%)}
body.bgv8 .work .tx b,body.bgv8 .work:hover .tx b{color:#0b3a85}
/* การ์ดบริการ: กรอบทองไล่ระดับ, เนื้อหาจัดกลางบนพื้นไล่ขาว -> ฟ้าอ่อน, เส้นทองใต้หัวข้อ */
body.bgv8 .service.has-img{align-items:stretch;border:3px solid transparent;
	background:linear-gradient(#fff,#fff) padding-box,
		linear-gradient(135deg,#fff4c2 0%,#f2c94c 18%,#b8860b 38%,#ffe9a3 55%,#d4a017 72%,#8a6212 88%,#f7d774 100%) border-box;
	box-shadow:0 10px 28px rgba(5,20,60,.30),0 0 14px rgba(242,201,76,.28)}
body.bgv8 .service.has-img:hover{box-shadow:0 16px 36px rgba(5,20,60,.40),0 0 22px rgba(242,201,76,.55)}
body.bgv8 .service.has-img .sv-img{border-bottom:2px solid #e2b84a}
body.bgv8 .sv-body{flex:1;text-align:center;padding:16px 16px 18px;background:linear-gradient(160deg,#f4f9ff 0%,#deebff 55%,#c6dcff 100%)}
body.bgv8 .service.has-img h3{color:#0b3a85}
body.bgv8 .service.has-img h3::after{content:"";display:block;width:42px;height:3px;border-radius:3px;margin:8px auto 0;background:linear-gradient(90deg,#f2c94c,#d4a017)}
body.bgv8 .service.has-img p{color:#3d5680}
/* ลิงก์ด่วน: โลโก้ใหญ่เกือบเต็มความสูงปุ่ม ขยายโลโก้ในวงกลมให้เห็นชัด */
.quick a.qk{padding:8px 16px 8px 8px}
.qi{width:66px;height:66px}
.qi svg{transform:scale(1.32)}
@media (max-width:640px){ .quick a.qk{padding:6px 10px 6px 6px} .qi{width:52px;height:52px} }
/* ลิงก์ด่วน: พื้นขาว -> ฟ้าอ่อน + กรอบทอง เข้าชุดการ์ดบริการ ตัวอักษรน้ำเงินเข้ม */
body.bgv8 .quick a.qk,body.bgv8 .quick a.qk:hover{border:3px solid transparent;background:linear-gradient(160deg,#f4f9ff 0%,#deebff 55%,#c6dcff 100%) padding-box,linear-gradient(135deg,#fff4c2 0%,#f2c94c 18%,#b8860b 38%,#ffe9a3 55%,#d4a017 72%,#8a6212 88%,#f7d774 100%) border-box}
.quick a.qk .ql{color:#0b3a85;text-shadow:none}
body.bgv8 .quick a.qk:hover{box-shadow:0 12px 26px rgba(5,20,60,.35),0 0 18px rgba(242,201,76,.5);filter:none}