:root{
  --bg: #f5f8fd;
  --panel: #ffffff;
  --navy: #0b2b4a;
  --blue: #1663d9;
  --blue-deep: #0d47a8;
  --yellow: #ffc834;
  --yellow-deep: #e8a900;
  --muted: #5c6b7a;
  --border: #e3e9f2;
  --radius: 16px;
  --maxw: 1160px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--navy);
  font-family:'Anuphan', sans-serif; line-height:1.65;
}
h1,h2,h3{font-family:'Kanit', sans-serif; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:'Chakra Petch'; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--blue-deep); display:flex; align-items:center; gap:10px; margin-bottom:12px; font-weight:600;
}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--yellow); display:inline-block; border-radius:2px;}

/* ---------- image box: shows real photo if images/xxx.jpg exists, else placeholder ---------- */
.imgbox{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:160px;
}
.imgbox.empty{
  border:2px dashed #c7d3e3;
  background:repeating-linear-gradient(135deg, rgba(22,99,217,0.05) 0 10px, transparent 10px 20px);
  display:flex; align-items:center; justify-content:center;
}
.imgbox img{width:100%; height:100%; object-fit:cover; display:none;}
.imgbox:not(.empty) img{display:block;}
.imgbox .ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--muted); font-family:'Chakra Petch'; font-size:12.5px; text-align:center; padding:18px;
}
.imgbox:not(.empty) .ph{display:none;}
.imgbox .ph svg{width:30px; height:30px; opacity:0.55; color:var(--blue);}
.imgbox .ph b{color:var(--navy); font-size:13px;}
.imgbox .ph code{
  background:rgba(11,43,74,0.06); padding:2px 7px; border-radius:5px; font-size:11px;
}

/* nav */
header{position:sticky; top:0; z-index:60; background:rgba(245,248,253,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Kanit'; font-weight:800; font-size:20px;}
.brand-mark{
  width:38px; height:38px; border-radius:10px; background:var(--blue);
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Kanit'; font-weight:800; font-size:16px;
  position:relative; flex-shrink:0;
}
.brand-mark::after{content:""; position:absolute; width:10px; height:10px; background:var(--yellow); border-radius:50%; top:-3px; right:-3px; border:2px solid var(--bg);}
.navlinks{display:flex; gap:30px; font-size:14.5px; color:var(--muted); font-weight:500;}
.navlinks a:hover{color:var(--blue-deep);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600; transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--yellow); color:var(--navy); box-shadow:0 10px 22px -10px rgba(255,200,52,0.9);}
.btn-outline{border:1.5px solid var(--border); color:var(--navy);}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 10px 22px -10px rgba(22,99,217,0.7);}
.navToggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
.navToggle span{width:22px; height:2px; background:var(--navy);}

/* hero */
.hero{position:relative; padding:76px 0 90px; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(650px 320px at 90% -10%, rgba(255,200,52,0.18), transparent 60%),
             radial-gradient(500px 280px at -5% 100%, rgba(22,99,217,0.12), transparent 60%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; position:relative;}
.hero h1{font-size:42px; line-height:1.24; margin-bottom:18px;}
.hero h1 .hl{color:var(--blue-deep); position:relative;}
.hero h1 .hl::after{content:""; position:absolute; left:-3px; right:-3px; bottom:3px; height:12px; background:var(--yellow); opacity:0.55; z-index:-1;}
.hero p.lede{font-size:16.5px; color:var(--muted); max-width:520px; margin-bottom:30px;}
.quickbtns{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.quickbtns .qbtn{
  display:flex; align-items:center; gap:9px; padding:12px 18px; border-radius:12px; background:var(--panel);
  border:1px solid var(--border); font-size:14px; font-weight:600; box-shadow:0 6px 16px -12px rgba(11,43,74,0.3);
}
.quickbtns .qbtn svg{width:18px; height:18px; flex-shrink:0;}
.qbtn.line{color:#06C755;}
.qbtn.fb{color:#1877F2;}
.qbtn.tel{color:var(--blue-deep);}
.qbtn.map{color:#d94848;}
.stat-row{display:flex; gap:30px; flex-wrap:wrap;}
.stat-row .stat b{font-family:'Kanit'; font-size:22px; color:var(--navy); display:block;}
.stat-row .stat span{font-size:12.5px; color:var(--muted);}
.hero-visual .imgbox{aspect-ratio:4/5;}
.badge-guarantee{
  position:absolute; bottom:-22px; left:-22px; width:118px; height:118px; border-radius:50%;
  background:var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-family:'Chakra Petch'; box-shadow:0 14px 30px -10px rgba(11,43,74,0.5); z-index:5;
}
.badge-guarantee b{font-size:14px; color:var(--yellow);}
.badge-guarantee span{font-size:10px; line-height:1.4;}

section{padding:84px 0;}
section.alt{background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{max-width:620px; margin-bottom:44px;}
.section-head h2{font-size:30px; margin-bottom:12px;}
.section-head p{color:var(--muted); font-size:15px;}

/* services */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;}
.svc-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; transition:transform .2s ease, box-shadow .2s ease;}
.svc-card:hover{transform:translateY(-6px); box-shadow:0 16px 30px -16px rgba(11,43,74,0.25);}
.svc-card .imgbox{aspect-ratio:1/1; margin-bottom:16px;}
.svc-card h3{font-size:16.5px; margin-bottom:8px;}
.svc-card p{font-size:13px; color:var(--muted); margin-bottom:14px;}
.svc-card .tag{display:inline-block; font-family:'Chakra Petch'; font-size:11px; font-weight:700; letter-spacing:0.5px; background:rgba(255,200,52,0.25); color:#8a6600; padding:4px 10px; border-radius:999px;}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;}
.price-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 24px -18px rgba(11,43,74,0.3);}
.price-card .imgbox{aspect-ratio:16/10; border-radius:0; border:none; border-bottom:1px dashed var(--border);}
.price-body{padding:22px;}
.price-body h3{font-size:16.5px; margin-bottom:4px;}
.price-body .sub{font-size:12.5px; color:var(--muted); margin-bottom:16px;}
.price-list{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.price-row{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding-bottom:10px; border-bottom:1px dashed var(--border);}
.price-row:last-child{border-bottom:none; padding-bottom:0;}
.price-row .amt{font-family:'Chakra Petch'; font-weight:700; color:var(--blue-deep);}
.price-note{font-size:11.5px; color:var(--muted); font-style:italic;}

/* care tips */
.care-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.care-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:14px;}
.care-card .imgbox{aspect-ratio:16/9;}
.care-card h3{font-size:16.5px;}
.care-card ul{padding-left:18px; color:var(--muted); font-size:13.5px; display:flex; flex-direction:column; gap:6px;}

/* reviews */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.stars{color:var(--yellow-deep); font-size:15px; margin-bottom:10px; letter-spacing:2px;}
.review-card p.quote{font-size:13.5px; color:var(--navy); margin-bottom:16px; min-height:60px;}
.review-ba{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;}
.review-ba .imgbox{aspect-ratio:1/1; font-size:10.5px;}
.review-ba .imgbox .ph{padding:8px;}
.review-who{display:flex; align-items:center; gap:10px;}
.review-avatar{width:38px; height:38px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-family:'Chakra Petch'; font-size:11px; color:var(--muted); flex-shrink:0;}
.review-who b{font-size:13.5px; display:block;}
.review-who span{font-size:11.5px; color:var(--muted);}

/* faq */
.faq-item{border-bottom:1px solid var(--border); padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15px;}
.faq-q svg{width:18px; height:18px; transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--muted); font-size:13.5px;}
.faq-item.open .faq-a{max-height:200px; margin-top:10px;}

/* location */
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.hours-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.hours-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--border); font-size:14px; font-family:'Chakra Petch';}
.hours-row:last-child{border-bottom:none;}
.hours-row.off{color:var(--muted);}
.addr-block{margin-top:20px; font-size:14px; color:var(--muted); line-height:1.8;}
.addr-block b{color:var(--navy);}
.loc-visual .imgbox{min-height:340px;}

/* cta band */
.ctaband{background:linear-gradient(120deg, var(--blue-deep), var(--blue)); border-radius:20px; padding:52px 46px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.ctaband h2{font-size:26px; color:#fff; margin-bottom:8px;}
.ctaband p{color:rgba(255,255,255,0.85); font-size:14px;}
.ctaband .btns{display:flex; gap:12px; flex-wrap:wrap;}

footer{padding:52px 0 130px; border-top:1px solid var(--border);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px;}
.foot-grid h4{font-size:13.5px; margin-bottom:14px; font-family:'Chakra Petch'; letter-spacing:1px;}
.foot-grid p, .foot-grid a{font-size:13.5px; color:var(--muted); display:block; margin-bottom:9px;}
.foot-grid a:hover{color:var(--blue-deep);}
.foot-bottom{border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); font-family:'Chakra Petch';}

/* floating contact bar */
.floatbar{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; flex-direction:column; gap:12px; align-items:flex-end;}
.fbtn{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(11,43,74,0.4); color:#fff; position:relative; transition:transform .15s ease;
}
.fbtn:hover{transform:scale(1.08);}
.fbtn svg{width:24px; height:24px;}
.fbtn.line{background:#06C755;}
.fbtn.fb{background:#1877F2;}
.fbtn.tel{background:var(--blue-deep);}
.fbtn.map{background:#d94848;}
.fbtn .tip{
  position:absolute; right:64px; top:50%; transform:translateY(-50%); background:var(--navy); color:#fff;
  font-size:12px; padding:6px 12px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.fbtn:hover .tip{opacity:1;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media(max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid, .care-grid, .review-grid{grid-template-columns:repeat(2,1fr);}
  .loc-grid{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .navlinks{display:none;}
  .navToggle{display:flex;}
  .hero h1{font-size:30px;}
  .services-grid, .price-grid, .care-grid, .review-grid, .foot-grid{grid-template-columns:1fr;}
  .ctaband{flex-direction:column; text-align:center; padding:38px 24px;}
  section{padding:60px 0;}
  .fbtn{width:46px; height:46px;}
}

/* ---------- article pages & article hub ---------- */
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:18px; font-family:'Chakra Petch';}
.breadcrumb a:hover{color:var(--blue-deep);}
.article-hero{padding:44px 0 26px;}
.article-hero .cat{display:inline-block; background:rgba(22,99,217,0.1); color:var(--blue-deep); font-family:'Chakra Petch'; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:0.5px; margin-bottom:14px;}
.article-hero h1{font-size:32px; line-height:1.32; margin-bottom:14px;}
.article-meta{font-size:13px; color:var(--muted); font-family:'Chakra Petch';}
.article-cover{margin:26px 0 8px;}
.article-cover .imgbox{aspect-ratio:16/8;}
.article-body{max-width:760px; margin:0 auto; padding:8px 24px 0;}
.article-body h2{font-size:21px; margin:32px 0 12px;}
.article-body h3{font-size:16.5px; margin:22px 0 8px;}
.article-body p{font-size:15px; color:#3a4552; margin-bottom:14px;}
.article-body ul, .article-body ol{padding-left:22px; margin-bottom:16px; color:#3a4552; font-size:15px; display:flex; flex-direction:column; gap:8px;}
.article-cta{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:36px 0;}
.article-cta h4{font-size:16px; margin-bottom:4px;}
.article-cta p{font-size:13.5px; color:var(--muted); margin:0;}
.related-wrap{max-width:760px; margin:36px auto 60px; padding:0 24px;}
.related-wrap h3{font-size:16px; margin-bottom:16px;}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.related-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; font-size:13.5px; font-weight:600; display:block; transition:border-color .15s ease;}
.related-card:hover{border-color:var(--blue);}

.article-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;}
.article-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;}
.article-card:hover{transform:translateY(-6px); box-shadow:0 16px 30px -16px rgba(11,43,74,0.25);}
.article-card .imgbox{aspect-ratio:16/10; border-radius:0;}
.article-card .body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.article-card .cat{font-family:'Chakra Petch'; font-size:11px; color:var(--blue-deep); font-weight:700; letter-spacing:0.5px;}
.article-card h3{font-size:16px;}
.article-card p{font-size:13px; color:var(--muted); flex:1;}
.article-card .readmore{font-size:13px; font-weight:600; color:var(--blue-deep); margin-top:6px;}

@media(max-width:640px){
  .related-grid{grid-template-columns:1fr;}
  .article-hero h1{font-size:26px;}
}

/* ---------- detailed stamp pricing table ---------- */
.stamp-acc-item{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; overflow:hidden;}
.stamp-acc-q{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  padding:18px 22px; font-weight:600; font-size:15.5px; font-family:'Kanit';
}
.stamp-acc-q svg{width:18px; height:18px; transition:transform .2s ease; flex-shrink:0; color:var(--blue-deep);}
.stamp-acc-item.open .stamp-acc-q svg{transform:rotate(45deg);}
.stamp-acc-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.stamp-acc-item.open .stamp-acc-a{max-height:3000px;}
.stamp-acc-a-inner{padding:0 22px 22px;}
.stamp-acc-a h4{font-size:13px; color:var(--blue-deep); font-family:'Chakra Petch'; letter-spacing:0.5px; margin:16px 0 8px;}
.stamp-acc-a h4:first-child{margin-top:0;}
.pricetable-wrap{overflow-x:auto;}
.pricetable{width:100%; border-collapse:collapse; font-size:13.5px; min-width:280px;}
.pricetable th, .pricetable td{padding:7px 10px; border-bottom:1px dashed var(--border); text-align:left; white-space:nowrap;}
.pricetable th{font-family:'Chakra Petch'; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600;}
.pricetable td.amt{font-family:'Chakra Petch'; font-weight:700; color:var(--blue-deep); text-align:right;}
.pricetable td.code{color:var(--muted); font-family:'Chakra Petch'; font-size:12px;}
.stamp-note{font-size:12.5px; color:var(--muted); font-style:italic; margin-top:8px;}

/* ---------- CCTV package pricing ---------- */
.cctv-pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;}
.cctv-pkg-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; text-align:center; position:relative; transition:transform .2s ease, box-shadow .2s ease;
}
.cctv-pkg-card:hover{transform:translateY(-6px); box-shadow:0 16px 30px -16px rgba(11,43,74,0.25);}
.cctv-pkg-card.featured{border:2px solid var(--blue); box-shadow:0 14px 30px -14px rgba(22,99,217,0.35);}
.pkg-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-family:'Chakra Petch'; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:999px; letter-spacing:0.5px;
}
.pkg-num{font-family:'Kanit'; font-weight:700; font-size:15px; color:var(--muted); margin-bottom:10px;}
.pkg-price{font-family:'Kanit'; font-weight:800; font-size:30px; color:var(--blue-deep); margin-bottom:12px;}
.pkg-price span{font-size:14px; font-weight:600; color:var(--muted);}
.pkg-desc{font-size:13px; color:var(--muted); line-height:1.6;}

.factor-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.factor-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.factor-card h4{font-size:15px; margin-bottom:10px;}
.factor-card ul{padding-left:18px; color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:8px;}
.factor-card ul li b{color:var(--navy);}

.cctv-quiz{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin-top:40px;}
.cctv-quiz h3{font-size:18px; margin-bottom:14px;}
.cctv-quiz ul{padding-left:20px; color:var(--muted); font-size:14px; display:flex; flex-direction:column; gap:8px;}

@media(max-width:980px){
  .cctv-pkg-grid, .factor-grid{grid-template-columns:1fr;}
}

/* ---------- flat-rate skill-only repair issues ---------- */
.flatrate-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.flatrate-col{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.flatrate-col h3{font-size:17px; margin-bottom:4px;}
.flatrate-col .flatrate-price{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,200,52,0.2); color:#8a6600;
  font-family:'Chakra Petch'; font-weight:700; font-size:13px; padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.flatrate-list{display:flex; flex-direction:column; gap:14px;}
.flatrate-item{display:flex; gap:12px; align-items:flex-start;}
.flatrate-item .n{
  width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:'Chakra Petch'; font-size:12px; font-weight:700; margin-top:1px;
}
.flatrate-item h5{font-size:14px; margin-bottom:3px;}
.flatrate-item p{font-size:12.5px; color:var(--muted); line-height:1.6;}
.flatrate-note{font-size:12px; color:var(--muted); font-style:italic; margin-top:18px;}

@media(max-width:980px){
  .flatrate-grid{grid-template-columns:1fr;}
}

/* ---------- custom icon image slots (fallback to built-in SVG until real icon files are added) ---------- */
.icn{display:inline-flex; align-items:center; justify-content:center;}
.icn-img{display:none; object-fit:contain;}
.qbtn .icn-img{width:18px; height:18px;}
.fbtn .icn-img{width:24px; height:24px;}

/* ---------- custom logo image slot (fallback to the styled "j" mark until a real logo file is added) ---------- */
.bm-img{display:none; width:100%; height:100%; object-fit:cover; border-radius:inherit;}

/* ---------- small visible "view details" button inside price cards ---------- */
.price-detail-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(22,99,217,0.1); color:var(--blue-deep);
  font-size:13px; font-weight:700; padding:9px 14px; border-radius:8px;
  margin:4px 0 10px; transition:background .15s ease;
}
.price-detail-btn:hover{background:rgba(22,99,217,0.18);}