/*
 * icons-pages.css  — iCONS inner-page stylesheet
 * Requires: icons.css (base reset, variables, topbar, navbar, footer)
 * Responsive: Desktop > Tablet (960px) > Mobile (600px)
 */

/* ── Extra Variables (extends icons.css :root) ── */
:root{
  --bgh:#edf5ed;
  --r:14px;
  --sh:0 4px 24px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════
   PAGE HERO
══════════════════════════════════════ */
.page-hero{background:linear-gradient(135deg,var(--navy) 0%,#0d1f0d 55%,#1a4a1a 100%);padding:56px 0 68px;position:relative;overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235CB85C' fill-opacity='.05'%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/svg%3E")}
.ph-blob{position:absolute;border-radius:50%;pointer-events:none}
.ph-blob-l{width:460px;height:460px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(92,184,92,.08),transparent 70%)}
.ph-blob-r{width:380px;height:380px;bottom:-110px;right:-90px;background:radial-gradient(circle,rgba(92,184,92,.06),transparent 70%)}
.ph-inner{position:relative;max-width:920px;margin:auto;padding:0 24px}
.ph-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(92,184,92,.15);border:1px solid rgba(92,184,92,.3);color:var(--accent2);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 18px;border-radius:20px;margin-bottom:18px}
.ph-inner h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,5vw,52px);font-weight:700;color:#fff;line-height:1.1;margin-bottom:14px}
.ph-inner h1 em{font-style:normal;color:var(--accent)}
.ph-inner p{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.75;max-width:880px;margin:0 auto}

/* ══════════════════════════════════════
   STAT STRIP
══════════════════════════════════════ */
.stat-strip{background:var(--steel);border-bottom:3px solid rgba(0,0,0,.1)}
.stat-inner{max-width:1280px;margin:auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:15px 0;border-right:1px solid rgba(255,255,255,.15);text-align:center}
.stat-item:last-child{border:none}
.stat-n{display:block;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;color:#fff;line-height:1}
.stat-l{display:block;font-size:12px;color:rgba(255,255,255,.65);margin-top:3px}

/* ══════════════════════════════════════
   PAGE BODY
══════════════════════════════════════ */
.page-body{max-width:1280px;margin:0 auto;padding:36px 28px 80px}

/* ══════════════════════════════════════
   SEARCH BAR (Directory pages)
══════════════════════════════════════ */
.dir-search-bar{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:18px 22px;margin-bottom:24px;border:1px solid #e0eee0}
.dsb-inner{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dsb-field{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1.5px solid #d0e8d0;border-radius:10px;padding:10px 14px;background:var(--light);transition:border-color .2s}
.dsb-field:focus-within{border-color:var(--accent)}
.dsb-field input{border:none;background:transparent;outline:none;font-size:14px;font-family:'Sarabun',sans-serif;color:var(--navy);width:100%}
.dsb-select{padding:10px 14px;border:1.5px solid #d0e8d0;border-radius:10px;background:var(--light);font-size:14px;font-family:'Sarabun',sans-serif;color:var(--navy);outline:none;cursor:pointer;transition:border-color .2s;min-width:150px}
.dsb-select:focus{border-color:var(--accent)}
.btn-search{display:flex;align-items:center;gap:7px;padding:10px 22px;background:var(--steel);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-search:hover{background:var(--accent);transform:translateY(-1px)}
/* ปุ่มและ action group */
.dsb-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
/* ปุ่มล้างค้นหา */
.btn-clear{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;background:transparent;
  color:var(--muted);border:1.5px solid #d0e8d0;
  border-radius:10px;font-size:13.5px;font-weight:600;
  font-family:'Sarabun',sans-serif;cursor:pointer;
  line-height:1.4;text-decoration:none;white-space:nowrap;
  transition:all .2s
}
.btn-clear:hover{background:#fff4f4;color:#c0392b;border-color:#f5c6c6}
/* แถว active filter tags */
.dsb-active-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;
  border-top:1px solid #edf5ed;line-height:1
}
.dsb-filter-label{
  font-size:12px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  flex-shrink:0;line-height:1.4
}
/* tag แต่ละอัน (คลิกเพื่อลบ filter นั้น) */
.dsb-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 12px;
  background:rgba(92,184,92,.1);color:var(--steel);
  border:1px solid rgba(92,184,92,.3);border-radius:20px;
  font-size:12.5px;font-weight:600;line-height:1.4;
  text-decoration:none;transition:all .2s;white-space:nowrap
}
.dsb-tag:hover{background:rgba(192,57,43,.08);color:#c0392b;border-color:rgba(192,57,43,.3)}
.dsb-tag-x{
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:14px;font-weight:400;
  line-height:1;width:14px;height:14px;flex-shrink:0
}

/* ══════════════════════════════════════
   DIRECTORY LAYOUT
══════════════════════════════════════ */
.dir-layout{display:grid;grid-template-columns:1fr 272px;gap:24px;align-items:start}
.dir-result-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e0eee0}
.result-count{font-size:13.5px;color:var(--muted)}
.result-count strong{color:var(--navy)}
.result-sort select{padding:6px 12px;border:1.5px solid #d0e8d0;border-radius:8px;font-size:13px;font-family:'Sarabun',sans-serif;background:#fff;cursor:pointer;outline:none}
/* Company cards */
.company-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.company-card{background:#fff;border-radius:var(--r);padding:18px 20px;border:1.5px solid #e0eee0;display:flex;align-items:center;gap:16px;transition:all .22s;cursor:pointer}
.company-card:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(92,184,92,.12);transform:translateX(3px)}
.cc-icon{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--accent) 0%,var(--steel) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-icon .icofont{font-size:1.45em;color:#fff}
.cc-body{flex:1;min-width:0}
.cc-body h3{font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:3px}
.cc-prov{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-bottom:2px}
.cc-types{font-size:12px;color:#7a9a7a}
.cc-btn{padding:7px 16px;background:var(--light);color:var(--steel);border-radius:8px;font-size:12.5px;font-weight:600;border:1.5px solid #c8e0c8;white-space:nowrap;flex-shrink:0;transition:all .2s}
.cc-btn:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;margin-top:24px}
.pg-btn{min-width:36px;height:36px;padding:0 9px;border:1.5px solid #d0e8d0;border-radius:7px;background:#fff;color:var(--steel);font-size:13px;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.pg-btn.active{background:var(--steel);color:#fff;border-color:var(--steel)}
.pg-btn:hover:not(.active){background:var(--light)}
.pg-dots{color:var(--muted);line-height:36px;padding:0 4px}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.dir-sidebar,.side-stack{display:flex;flex-direction:column;gap:16px}
.side-card{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);border:1px solid #e0eee0}
.side-card h3{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.side-card p{font-size:13.5px;color:#5a7a5a;line-height:1.7;margin-bottom:12px}
.btn-side-cta{display:block;text-align:center;padding:10px;background:var(--steel);color:#fff;border-radius:9px;font-size:14px;font-weight:600;transition:all .2s}
.btn-side-cta:hover{background:var(--accent);transform:translateY(-1px)}
.side-card-dark{background:var(--navy);border-color:transparent}
.side-card-dark p{color:rgba(255,255,255,.7)}
.btn-side-demo,.btn-side-sub{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:9px;font-size:13.5px;font-weight:600;margin-bottom:8px;transition:all .2s}
.btn-side-demo{background:var(--accent);color:var(--navy)}
.btn-side-demo:hover{background:var(--accent2)}
.btn-side-sub{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-side-sub:hover{background:rgba(255,255,255,.22)}

/* ══════════════════════════════════════
   SUPPLIER LIST — DESC BANNER
══════════════════════════════════════ */
.sup-desc-banner{
  background:#fff;border-radius:var(--r);padding:22px 26px;
  margin-bottom:24px;border:1px solid #e0eee0;
  display:flex;align-items:flex-start;gap:14px
}
.sup-desc-banner .icofont{font-size:1.6em;color:var(--steel);flex-shrink:0;margin-top:3px}
.sup-desc-banner p{font-size:14px;color:#3a5a3a;line-height:1.8;margin:0}

/* ══════════════════════════════════════
   SUPPLIER LIST — NO RESULT STATE
══════════════════════════════════════ */
.sup-empty{
  text-align:center;padding:48px 24px;color:var(--muted);
  background:#fff;border-radius:var(--r);
  border:1.5px dashed #d0e0d0
}
.sup-empty .icofont{font-size:2.5em;display:block;margin-bottom:12px;opacity:.4}
.sup-empty strong{color:var(--navy);display:block;margin-bottom:4px}
.sup-empty span{font-size:13px}

/* ══════════════════════════════════════
   SUPPLIER LIST — ADS CTA SIDEBAR CARD
   NOTE: ใช้ .side-ads-cta เป็น parent เสมอ
   เพื่อ override .side-card h3 / .side-card p
   ที่มี specificity สูงกว่า
══════════════════════════════════════ */
.side-ads-cta{
  background:linear-gradient(145deg,#0d1f0d 0%,#1a3a1a 55%,#0f2a1f 100%);
  border:1px solid rgba(92,184,92,.25);
  position:relative;overflow:hidden;padding:22px
}
.side-ads-cta::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,184,92,.12),transparent 70%);
  pointer-events:none
}
/* badge */
.side-ads-cta .ads-cta-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(92,184,92,.18);border:1px solid rgba(92,184,92,.35);
  color:#a8e6a8;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;margin-bottom:12px
}
/* heading — override .side-card h3 */
.side-ads-cta .ads-cta-h{
  font-family:'Barlow Condensed',sans-serif;font-size:24px;
  font-weight:700;color:#ffffff;line-height:1.15;
  margin-bottom:10px;display:block
}
.side-ads-cta .ads-cta-h em{font-style:normal;color:#7dce7d}
/* paragraph — override .side-card p */
.side-ads-cta .ads-cta-p{
  font-size:12.5px;color:rgba(255,255,255,.75);
  line-height:1.7;margin-bottom:12px
}
/* feature list */
.side-ads-cta .ads-cta-list{
  list-style:none;padding:0;margin:0 0 16px;
  display:flex;flex-direction:column;gap:6px
}
.side-ads-cta .ads-cta-list li{
  font-size:12.5px;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:7px
}
.side-ads-cta .ads-cta-list .icofont-check-circled{
  color:#7dce7d;font-size:14px;flex-shrink:0
}
/* buttons */
.btn-ads-main{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;background:var(--accent);color:var(--navy);
  border-radius:9px;font-size:13.5px;font-weight:700;
  text-decoration:none;margin-bottom:8px;transition:all .2s
}
.btn-ads-main:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-ads-sec{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.2);
  border-radius:9px;font-size:13px;font-weight:600;
  text-decoration:none;transition:all .2s
}
.btn-ads-sec:hover{background:rgba(255,255,255,.16);color:#fff}

/* ══════════════════════════════════════
   AD FOOTER STRIP — placeholder slot CTA
   แก้ความสูงไม่สม่ำเสมอ และ slot ว่างโล่ง
══════════════════════════════════════ */
.ad-slot-cta{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;padding:20px;
  width:100%;height:100%;box-sizing:border-box
}
.ad-slot-cta-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(92,184,92,.1);
  display:flex;align-items:center;justify-content:center
}
.ad-slot-cta-icon svg{display:block}
.ad-slot-cta-title{
  font-size:12.5px;font-weight:700;
  color:#2d5a2d;text-align:center;
  margin-bottom:2px;display:block
}
.ad-slot-cta-sub{
  font-size:11px;color:#7a9a7a;
  text-align:center;display:block;margin-bottom:4px
}
.ad-slot-cta-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 18px;background:var(--steel);color:#fff;
  border-radius:7px;font-size:12px;font-weight:600;
  text-decoration:none;transition:all .2s
}
.ad-slot-cta-btn:hover{background:var(--accent);color:var(--navy)}


.news-layout{display:grid;grid-template-columns:1fr 272px;gap:24px;align-items:start}
.news-tabs{display:flex;gap:6px;margin-bottom:20px}
.news-tab{padding:8px 20px;border-radius:8px;border:1.5px solid #d0e8d0;background:#fff;font-size:14px;font-weight:600;color:var(--steel);cursor:pointer;transition:all .2s;font-family:'Sarabun',sans-serif}
.news-tab.active{background:var(--steel);color:#fff;border-color:var(--steel)}

/* Month bar (PR tab only) — underline-tab style, cumulative-back semantic */
.news-mo-bar{
  display:flex;flex-wrap:wrap;gap:0;margin:-8px 0 18px;
  border-bottom:1px solid #E5E7EB;
}
.news-mo-btn{
  padding:9px 14px;
  background:transparent;border:none;
  color:#6B7280;
  font-size:13px;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
  font-family:'Sarabun',sans-serif;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.news-mo-btn:hover{color:#0F5D36}
.news-mo-btn.active{
  color:#0F5D36;font-weight:600;
  border-bottom-color:#0F5D36;
}
@media(max-width:600px){
  .news-mo-bar{margin:-4px 0 14px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .news-mo-btn{padding:8px 11px;font-size:12.5px}
}

.news-grid{display:flex;flex-direction:column;gap:16px}
.news-card{background:#fff;border-radius:var(--r);padding:20px;border:1.5px solid #e0eee0;display:grid;grid-template-columns:216px 1fr;gap:16px;transition:all .22s}
.news-card:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(92,184,92,.1)}
.news-thumb{height:156px;border-radius:10px;background:linear-gradient(135deg,#c8e0c8,#9abf9a);display:flex;align-items:center;justify-content:center;overflow:hidden}
.news-thumb .icofont{font-size:2em;color:var(--steel);opacity:.45}
.news-meta{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.news-date{font-size:12px;color:var(--muted)}
.news-cat{font-size:11px;font-weight:700;padding:2px 10px;background:var(--light);color:var(--steel);border-radius:12px;border:1px solid #c8e0c8}
.news-card h3{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:6px}
.news-card p{font-size:13px;color:#5a7a5a;line-height:1.65}
.news-readmore{display:inline-flex;align-items:center;gap:4px;margin-top:8px;color:var(--steel);font-size:13px;font-weight:600;transition:color .2s}
.news-readmore:hover{color:var(--accent)}

/* ══════════════════════════════════════
   NEWS / PRESS DETAIL
══════════════════════════════════════ */
.detail-layout{display:grid;grid-template-columns:1fr 288px;gap:28px;align-items:start}
.detail-main{background:#fff;border-radius:var(--r);padding:40px;box-shadow:var(--sh);border:1px solid #e0eee0}
.detail-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--steel);font-weight:600;margin-bottom:22px;padding:7px 14px;background:var(--light);border-radius:8px;border:1px solid #c8e0c8;transition:all .2s}
.detail-back:hover{background:var(--steel);color:#fff}
.detail-header{margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--light)}
.detail-header h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:12px}
.detail-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail-hero-img{width:100%;height:260px;border-radius:12px;background:linear-gradient(135deg,#c8e0c8,#8abf8a);display:flex;align-items:center;justify-content:center;margin-bottom:24px;overflow:hidden}
.detail-hero-img .icofont{font-size:3.5em;color:var(--steel);opacity:.25}
.detail-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.detail-body{font-size:15px;color:#3a5a3a;line-height:1.9}
.detail-body p{margin-bottom:16px}
.detail-body h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--navy);margin:24px 0 12px}
.detail-share{display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--light)}
.detail-share span{font-size:13px;color:var(--muted)}
.share-btn{width:34px;height:34px;border-radius:50%;background:var(--light);color:var(--steel);display:flex;align-items:center;justify-content:center;border:1px solid #c8e0c8;cursor:pointer;transition:all .2s}
.share-btn:hover{background:var(--steel);color:#fff}
.related-title{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;color:var(--navy);margin:28px 0 14px}
.related-grid{display:flex;flex-direction:column;gap:12px}
.related-card{background:#fff;border-radius:11px;padding:14px;border:1.5px solid #e0eee0;display:grid;grid-template-columns:72px 1fr;gap:12px;transition:all .2s;text-decoration:none}
.related-card:hover{border-color:var(--accent);transform:translateX(3px)}
.related-thumb{height:54px;border-radius:8px;background:linear-gradient(135deg,#c8e0c8,#a0c8a0);display:flex;align-items:center;justify-content:center}
.related-thumb .icofont{font-size:1.3em;color:var(--steel);opacity:.45}
.related-card h4{font-size:13px;font-weight:600;color:var(--navy);line-height:1.45;margin-bottom:3px}
.related-card .news-date{font-size:11.5px;color:var(--muted)}
.ndet-date{font-size:11.5px;color:var(--muted);text-decoration:none}

/* ══════════════════════════════════════
   COMPANY DETAIL
══════════════════════════════════════ */
.cdet-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.cdet-main{background:#fff;border-radius:var(--r);padding:38px;box-shadow:var(--sh);border:1px solid #e0eee0}
.cdet-header{display:flex;align-items:flex-start;gap:18px;margin-bottom:26px;padding-bottom:20px;border-bottom:2px solid var(--light)}
.cdet-logo-box{width:76px;height:76px;border-radius:14px;background:linear-gradient(135deg,var(--steel),var(--navy));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cdet-logo-box .icofont{font-size:2.1em;color:#fff}
.cdet-title h1{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:8px}
.cdet-tags{display:flex;gap:7px;flex-wrap:wrap}
.cdet-tag{font-size:12px;font-weight:600;padding:3px 11px;background:var(--light);color:var(--steel);border-radius:12px;border:1px solid #c8e0c8}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.info-row .label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.info-row .value{font-size:14px;color:var(--navy)}
.info-row .value a{color:var(--steel)}
.info-row .value a:hover{color:var(--accent)}
.proj-section h2{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;color:var(--navy);margin-bottom:14px}

/* ── Proj section header (title + page indicator) ── */
.proj-section-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.proj-section-hdr h2{margin-bottom:0}
.proj-page-info{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ── proj-list: gap ต่างกันตาม mode ── */
.proj-list{display:flex;flex-direction:column}

/* ════════════════════════════════════════
   LIST MODE — ไม่มีรูปภาพ (เหมือนเดิม)
════════════════════════════════════════ */
.proj-item-list{
  display:flex;align-items:center;gap:13px;
  padding:13px 16px;
  background:var(--light);
  border-radius:11px;
  border:1px solid #d8ead8;
  transition:all .2s;
  margin-bottom:10px;
}
.proj-item-list:hover{background:#fff;border-color:var(--accent)}
.proj-item-list:last-child{margin-bottom:0}
.proj-icon{width:38px;height:38px;border-radius:9px;background:var(--steel);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proj-icon .icofont{font-size:1.1em;color:#fff}
.proj-info h4{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:3px}
.proj-info p{font-size:12.5px;color:var(--muted)}

/* status inline (ใน list row) */
.proj-status-inline{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:10px}
.proj-status-inline.inprog{background:rgba(92,184,92,.15);color:var(--steel)}
.proj-status-inline.done{background:rgba(200,220,200,.4);color:var(--muted)}

/* ════════════════════════════════════════
   CARD MODE — มีรูปภาพ
════════════════════════════════════════ */
.proj-item-card{
  border-radius:12px;
  border:1.5px solid #e0eee0;
  overflow:hidden;
  transition:all .22s;
  background:#fff;
  margin-bottom:14px;
}
.proj-item-card:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(92,184,92,.12);transform:translateY(-2px)}
.proj-item-card:last-child{margin-bottom:0}

/* รูปโครงการ (16:7 ratio แนวนอน) */
.proj-img-wrap{
  width:100%;aspect-ratio:16/7;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#c8e0c8 0%,#8abf8a 100%);
}
.proj-img-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
}
.proj-item-card:hover .proj-img-wrap img{transform:scale(1.06)}

/* error fallback ถ้ารูปโหลดไม่ได้ */
.proj-img-err{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--light) 0%,#d8ecd8 100%);
}
.proj-img-err .icofont{font-size:2.4em;color:var(--steel);opacity:.2}

/* overlay badge status (card mode) */
.proj-status-badge{
  position:absolute;bottom:10px;right:10px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 11px;border-radius:20px;
  backdrop-filter:blur(6px);
}
.proj-status-badge.inprog{background:rgba(26,58,26,.75);color:var(--accent2);border:1px solid rgba(92,184,92,.35)}
.proj-status-badge.done{background:rgba(255,255,255,.88);color:var(--steel);border:1px solid rgba(92,184,92,.3)}

/* รายละเอียดโครงการใต้รูป */
.proj-body{padding:14px 16px}
.proj-body h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:5px;line-height:1.45}
.proj-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proj-meta-item{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.proj-meta-item .icofont{font-size:.95em;color:var(--steel)}
.proj-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}

/* ── pagination ของ proj section ── */
.proj-pagination{margin-top:18px;padding-top:14px;border-top:1px solid #e8f0e8}

/* ── Member-only badge ใน info-grid ── */
.mem-only-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;
  color:var(--steel);
  background:var(--light);
  border:1px solid #c8e0c8;
  border-radius:6px;
  padding:3px 10px;
}
.mem-only-badge .icofont{font-size:.9em;color:var(--muted)}

/* ── Member-only info bar (ใต้ info-grid, ใน main) ── */
.cdet-mem-bar{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#f0f7f0,#e4f0e4);
  border:1.5px solid #c8e0c8;
  border-left:4px solid var(--steel);
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.cmb-icon{
  width:42px;height:42px;flex-shrink:0;
  background:var(--steel);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.cmb-icon .icofont{font-size:1.3em;color:#fff}
.cmb-text{flex:1;min-width:160px}
.cmb-text strong{display:block;font-size:13.5px;color:var(--navy);margin-bottom:2px}
.cmb-text span{font-size:12.5px;color:var(--muted)}
.cmb-actions{display:flex;gap:8px;flex-wrap:wrap}
.cmb-btn-demo{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:var(--steel);color:#fff;
  border-radius:8px;font-size:12.5px;font-weight:600;
  transition:background .2s;
}
.cmb-btn-demo:hover{background:var(--accent)}
.cmb-btn-contact{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:#fff;color:var(--steel);
  border:1.5px solid #c8e0c8;
  border-radius:8px;font-size:12.5px;font-weight:600;
  transition:all .2s;
}
.cmb-btn-contact:hover{background:var(--light);border-color:var(--steel)}

/* ── Contact sidebar card ── */
.cdet-contact-card{background:var(--navy);border-radius:var(--r);padding:24px}
.cdet-contact-card h3{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:#fff;margin-bottom:16px;text-align:center}
.cdet-links{display:flex;flex-direction:column;gap:9px}
.cdet-link{display:flex;align-items:center;gap:9px;padding:10px 14px;background:rgba(255,255,255,.1);border-radius:9px;color:rgba(255,255,255,.82);font-size:13.5px;transition:background .2s}
.cdet-link:hover{background:rgba(255,255,255,.2)}
.cdet-link .icofont{color:var(--accent2);font-size:1em;flex-shrink:0}

/* ── Member-only block ใน sidebar ── */
.cdet-mem-block{text-align:center;padding:4px 0}
.cmob-ring{
  width:50px;height:50px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.cmob-ring .icofont{font-size:1.4em;color:var(--accent2)}
.cmob-title{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:6px}
.cmob-sub{font-size:12.5px;color:rgba(255,255,255,.58);line-height:1.6;margin-bottom:16px}
.cmob-btn-demo{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;
  background:var(--accent);color:var(--navy);
  border-radius:9px;font-size:13px;font-weight:700;
  margin-bottom:8px;transition:background .2s;
}
.cmob-btn-demo:hover{background:var(--accent2)}
.cmob-btn-contact{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;font-size:13px;font-weight:600;
  transition:background .2s;
}
.cmob-btn-contact:hover{background:rgba(255,255,255,.2)}

/* Contact sidebar for company detail (legacy compat) */

/* ══════════════════════════════════════
   BUY ADS
══════════════════════════════════════ */
.ads-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}
.ads-why-card{background:#fff;border-radius:var(--r);padding:26px;border:1.5px solid #e0eee0;transition:all .24s}
.ads-why-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.09);border-color:var(--accent)}
.ads-why-icon{width:50px;height:50px;border-radius:13px;background:var(--steel);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ads-why-icon .icofont{font-size:1.45em;color:#fff}
.ads-why-card h3{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:var(--navy);margin-bottom:7px}
.ads-why-card p{font-size:13.5px;color:#5a7a5a;line-height:1.65}
.ads-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
/* overflow:visible ต้องการให้ badge "ยอดนิยม" โผล่เหนือ card ได้ */
.ads-pkg-card{background:#fff;border-radius:var(--r);padding:26px;border:2px solid #e0eee0;text-align:center;transition:all .24s;position:relative;overflow:visible;display:flex;flex-direction:column}
.ads-pkg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--accent),var(--steel))}
.ads-pkg-card:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(92,184,92,.14);transform:translateY(-4px)}
.ads-pkg-card.featured{border-color:var(--steel);background:linear-gradient(180deg,#f0faf0,#fff)}
.ads-pkg-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--steel),var(--navy));display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.ads-pkg-icon i,.ads-pkg-icon .icofont{font-size:1.6em;color:#fff}
.ads-pkg-card h3{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;color:var(--navy);margin-bottom:9px}
/* pkg-tagline */
.pkg-tagline{font-size:13px;color:var(--muted);margin-bottom:16px;min-height:36px}
/* pkg-popular-badge — ต้องอยู่นอก overflow */
.pkg-popular-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;padding:4px 16px;border-radius:20px;white-space:nowrap;letter-spacing:.04em;z-index:2}
/* pkg-price-block */
.pkg-price-block{background:var(--light);border-radius:12px;padding:16px 18px;margin-bottom:18px;border:1px solid #d4e8d4;min-height:72px;display:flex;align-items:center}
.price-monthly,.price-yearly{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;width:100%}
.price-num{font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:700;color:var(--navy);line-height:1}
.featured .price-num{color:var(--steel)}
.price-per{font-size:14px;color:var(--muted)}
.price-saving{width:100%;font-size:12px;font-weight:600;color:var(--steel);margin-top:5px}
/* pkg-feat-list */
.pkg-feat-list{list-style:none;font-size:13px;color:#4a6a4a;margin-bottom:20px;flex:1;display:flex;flex-direction:column;gap:0;text-align:left}
.pkg-feat-list li{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid #f0f7f0;line-height:1.45}
.pkg-feat-list li:last-child{border-bottom:none}
.pkg-feat-list li i{color:var(--accent);margin-top:2px;flex-shrink:0}
.pkg-feat-list li.feat-plus{font-weight:600;color:var(--steel)}
.pkg-feat-list li.feat-plus i{color:var(--steel)}
/* ads-pkg-btn */
.ads-pkg-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:10px;border:2px solid var(--steel);background:transparent;color:var(--steel);font-size:13.5px;font-weight:700;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s;text-decoration:none;margin-top:auto}
.ads-pkg-btn:hover{background:var(--steel);color:#fff}
.ads-pkg-btn.featured-btn{background:var(--steel);color:#fff}
.ads-pkg-btn.featured-btn:hover{background:var(--accent);border-color:var(--accent)}
/* billing toggle */
.billing-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 32px}
.billing-label{font-size:14px;font-weight:600;color:var(--muted);transition:color .2s;cursor:pointer;user-select:none}
.billing-label.active{color:var(--navy)}
.billing-toggle{position:relative;width:52px;height:28px;background:#d4e8d4;border:none;border-radius:14px;cursor:pointer;transition:background .25s;padding:0;flex-shrink:0}
.billing-toggle.on{background:var(--steel)}
.toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .25s;pointer-events:none}
.billing-toggle.on .toggle-knob{transform:translateX(24px)}
.billing-save-badge{background:linear-gradient(135deg,var(--accent),var(--steel));color:#fff;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:20px;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;white-space:nowrap}
.billing-save-badge.show{opacity:1;transform:scale(1)}
/* ads stats band */
.ads-stats-band{background:linear-gradient(135deg,var(--navy),#1a4a1a);border-radius:20px;padding:40px;margin-bottom:32px;text-align:center}
.ads-stats-band h2{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;color:#fff;margin-bottom:28px}
.ads-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ads-stat-n{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:700;color:var(--accent);line-height:1;display:block}
.ads-stat-l{font-size:13px;color:rgba(255,255,255,.65);margin-top:6px;display:block}
/* ads contact strip */
.ads-contact-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border-radius:20px;padding:32px 36px;box-shadow:var(--sh);border:1px solid #e0eee0}
.ads-contact-info h3{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ads-contact-details{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#3a5a3a}
.ads-contact-details span{display:flex;align-items:center;gap:8px}
.ads-contact-details i{color:var(--steel)}
.ads-clients p{font-size:13.5px;color:var(--muted);margin-bottom:0}
/* quote modal */
.quote-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);animation:qFadeIn .2s ease}
.quote-modal{background:#fff;border-radius:20px;padding:36px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:qSlideUp .25s ease}
.quote-close{position:absolute;top:16px;right:16px;width:32px;height:32px;background:var(--light);border:none;border-radius:50%;font-size:20px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}
.quote-close:hover{background:#e8e8e8;color:var(--navy)}
.quote-modal-header{text-align:center;margin-bottom:24px}
.quote-modal-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--steel),var(--navy));border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.5em;color:#fff}
.quote-modal-header h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--navy);margin-bottom:6px}
.quote-modal-header p{font-size:13.5px;color:var(--muted)}
.quote-form .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-form .fg{margin-bottom:14px}
@keyframes qFadeIn{from{opacity:0}to{opacity:1}}
@keyframes qSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ══════════════════════════════════════
   CONTENT CARD (About / Contact / Career)
══════════════════════════════════════ */
.content-card{background:#fff;border-radius:20px;padding:38px;box-shadow:var(--sh);border:1px solid #e0eee0;margin-bottom:24px}
.content-card h2{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:700;color:var(--navy);margin-bottom:5px}
.card-sub{font-size:14px;color:var(--muted);margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--light)}
.two-col{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
/* Contact form shared */
.fg{margin-bottom:16px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;border:1.5px solid #d0e8d0;border-radius:10px;padding:11px 14px;font-size:14px;font-family:'Sarabun',sans-serif;color:var(--navy);outline:none;background:#fff;transition:all .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(92,184,92,.09)}
.fg textarea{min-height:108px;resize:vertical;line-height:1.6}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.btn-submit{width:100%;padding:13px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--steel),var(--navy));color:#fff;font-size:15px;font-weight:700;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(58,125,58,.25);display:flex;align-items:center;justify-content:center;gap:9px}
.btn-submit:hover{opacity:.9;transform:translateY(-2px)}
/* Why section — icons-whyicons.asp */
.why-section{background:#fff;border-radius:20px;padding:40px;box-shadow:var(--sh);border:1px solid #e0eee0;margin-bottom:36px}
.why-sec-title{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:var(--navy);margin-bottom:22px;text-align:center}
/* Values grid */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:0}
.val-card{background:var(--light);border-radius:14px;padding:22px;border:1px solid #d8ead8;transition:all .24s}
.val-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.08);background:#fff}
.val-icon{width:44px;height:44px;background:var(--steel);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.val-icon i{font-size:1.3em;color:#fff}
.val-card h3{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px}
.val-card p{font-size:13px;color:#5a7a5a;line-height:1.7}
/* Who benefits */
.why-who-box{background:#fff;border-radius:20px;padding:40px;box-shadow:var(--sh);border:1px solid #e0eee0;margin-bottom:36px}
.why-who-title{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:var(--navy);margin-bottom:22px}
.why-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-who-card{padding:22px;background:var(--light);border-radius:14px;border:1px solid #d8ead8}
.why-who-icon{width:44px;height:44px;background:var(--steel);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1.3em;color:#fff}
.why-who-card h4{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px}
.why-who-card p{font-size:13px;color:#5a7a5a;line-height:1.7}
/* Why stats band */
.why-stats-band{background:linear-gradient(135deg,var(--navy),#1a4a1a);border-radius:20px;padding:40px;margin-bottom:36px}
/* Why CTA */
.why-cta{text-align:center;padding:20px 0 10px}
.why-cta h2{font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:700;color:var(--navy);margin-bottom:12px}
.why-cta p{font-size:15px;color:var(--muted);margin-bottom:24px}
.why-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.why-btn-primary{padding:14px 32px;background:var(--steel);color:#fff;border-radius:10px;font-size:15px;font-weight:700;font-family:'Sarabun',sans-serif;box-shadow:0 4px 14px rgba(58,125,58,.28);transition:background .2s}
.why-btn-primary:hover{background:var(--accent)}
.why-btn-secondary{padding:14px 32px;background:var(--light);color:var(--navy);border-radius:10px;font-size:15px;font-weight:700;font-family:'Sarabun',sans-serif;border:1.5px solid #c8e0c8;transition:background .2s}
.why-btn-secondary:hover{background:#e0f0e0}
/* Team stats */
.team-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.ts-card{background:linear-gradient(135deg,var(--steel),var(--navy));border-radius:var(--r);padding:24px 18px;text-align:center}
.ts-big{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:700;color:#fff;line-height:1}
.ts-big span{color:var(--accent2)}
.ts-sm{font-size:12.5px;color:rgba(255,255,255,.68);margin-top:5px}
/* Position cards (Career) */
.positions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pos-card{background:#fff;border-radius:var(--r);padding:28px;border:2px solid #e0eee0;position:relative;overflow:hidden;transition:all .26s}
.pos-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--steel))}
.pos-card:hover{border-color:var(--accent);box-shadow:0 10px 32px rgba(92,184,92,.14);transform:translateY(-4px)}
.pos-num{font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:700;color:var(--light);line-height:1;margin-bottom:3px}
.pos-card h3{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;color:var(--navy);margin-bottom:14px}
.pos-tag{display:inline-flex;align-items:center;gap:5px;background:var(--light);color:var(--steel);font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;margin-bottom:10px;border:1px solid #c8e0c8}
.pos-reqs{list-style:none;display:flex;flex-direction:column;gap:8px}
.pos-reqs li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#3a5a3a;line-height:1.55}
.pos-reqs li .icofont-check-circled{color:var(--accent);flex-shrink:0;margin-top:2px}
/* Apply CTA bar */
.apply-bar{background:linear-gradient(135deg,#3D7A54 0%,#2A6040 100%);border-radius:20px;padding:40px;text-align:center;margin-top:32px;position:relative;overflow:hidden}
.apply-bar::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E")}
.apply-bar h2{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:700;color:#fff;margin-bottom:9px;position:relative}
.apply-bar h2 em{font-style:normal;color:#FFD54F}
.apply-bar p{font-size:15px;color:rgba(255,255,255,.85);margin-bottom:22px;position:relative;line-height:1.7}
.apply-link{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;padding:13px 30px;border-radius:11px;font-size:16px;font-weight:700;transition:all .2s;position:relative;box-shadow:0 4px 14px rgba(57,184,108,.4)}
.apply-link:hover{background:var(--accent2);transform:translateY(-2px);color:#fff}
.culture-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;justify-content:center}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.78);padding:5px 15px;border-radius:20px;font-size:13px}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{background:var(--navy);color:rgba(255,255,255,.58);padding-top:48px}
.footer-inner{max-width:1280px;margin:auto;padding:0 28px 32px;display:grid;grid-template-columns:230px 1fr 1fr 1fr;gap:40px}
.footer-brand img{height:44px;display:block;margin-bottom:13px;}
.footer-brand p{font-size:13px;line-height:1.8;margin-bottom:13px}
.footer-contact p{display:flex;align-items:center;gap:7px;font-size:13px;line-height:2.1}
.footer-contact a{color:rgba(255,255,255,.5);transition:color .2s}
.footer-contact a:hover{color:var(--accent2)}
.footer-col h5{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col ul{list-style:none}
.footer-col li a{display:block;color:rgba(255,255,255,.5);font-size:13px;line-height:2;transition:color .2s}
.footer-col li a:hover{color:var(--accent2)}
.footer-bottom{max-width:1280px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding:16px 28px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.28)}


/* Billing Toggle — show state */
.billing-save-badge.show{opacity:1;transform:scale(1)}
/* Bottom Wrap — ads-bottom-* */
.ads-bottom-wrap{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;box-shadow:var(--sh);margin-bottom:8px}
.ads-bottom-contact{background:#fff;padding:36px 40px;display:flex;flex-direction:column;gap:14px;border:1px solid #e0eee0;border-right:none;border-radius:20px 0 0 20px}
.ads-bottom-contact h3{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:4px}
.ads-bottom-contact a,.ads-bottom-contact span{display:flex;align-items:center;gap:10px;font-size:14px;color:#3a5a3a;text-decoration:none}
.ads-bottom-contact a:hover{color:var(--steel)}
.ads-bottom-contact i{color:var(--steel);font-size:15px;width:18px;text-align:center;flex-shrink:0}
.ads-bottom-trusted{background:var(--navy);padding:36px 40px;display:flex;flex-direction:column;justify-content:center;gap:24px;border-radius:0 20px 20px 0}
.ads-bottom-trusted-inner{display:flex;align-items:center;gap:16px}
.ads-bottom-trusted-num{font-family:'Barlow Condensed',sans-serif;font-size:72px;font-weight:700;color:var(--accent);line-height:1;flex-shrink:0}
.ads-bottom-trusted-txt{font-size:16px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.55}
.ads-bottom-chips{display:flex;flex-wrap:wrap;gap:8px}
.ads-bottom-chips span{padding:6px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;font-size:13px;font-weight:600;color:#fff;letter-spacing:.02em}

/* ══════════════════════════════════════
   icons-news.asp
══════════════════════════════════════ */
/* ── Filter Bar ── */
.nf-bar{
  background:#fff;
  border-bottom:2px solid var(--light);
  box-shadow:0 3px 16px rgba(0,0,0,.06);
  position:sticky;
  top:72px;   /* ต่อจาก nav */
  z-index:90;
  padding:12px 0 8px;
}
.nf-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
/* Search */
.nf-search-wrap{
  position:relative;
  flex:1;
  min-width:240px;
}
.nf-search-wrap .nf-ico{
  position:absolute;
  left:13px;top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:15px;
  pointer-events:none;
}
.nf-search-wrap input{
  width:100%;
  box-sizing:border-box;
  padding:10px 38px 10px 38px;
  border:1.5px solid #d4e8d4;
  border-radius:10px;
  font-size:13.5px;
  font-family:'Sarabun',sans-serif;
  color:var(--navy);
  background:var(--light);
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.nf-search-wrap input:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(92,184,92,.13);
}
.nf-search-wrap input::placeholder{color:var(--muted)}
.nf-x{
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  background:none;border:none;
  color:var(--muted);cursor:pointer;
  border-radius:50%;
  opacity:0;transition:opacity .15s,background .15s,color .15s;
  padding:0;
}
.nf-x.show{opacity:1}
.nf-x:hover{background:var(--bgh);color:var(--navy)}

/* Selects row */
.nf-selects{
  display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;
}
.nf-sel-wrap{
  position:relative;display:flex;align-items:center;cursor:pointer;
}
.nf-sel-ico{
  position:absolute;left:11px;
  color:var(--steel);font-size:13px;pointer-events:none;
}
.nf-arr{
  position:absolute;right:9px;
  color:var(--muted);font-size:10px;pointer-events:none;
}
.nf-sel-wrap select{
  padding:9px 30px 9px 30px;
  border:1.5px solid #d4e8d4;
  border-radius:10px;
  font-size:13px;
  font-family:'Sarabun',sans-serif;
  color:var(--navy);
  background:var(--light);
  cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
  min-width:118px;
}
.nf-sel-wrap select:focus{
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(92,184,92,.13);
}
/* active filter — highlight selects */
.nf-sel-wrap.active select{
  border-color:var(--steel);
  background:#e8f5e8;
  font-weight:600;
  color:var(--steel);
}
/* Reset button */
.nf-reset-btn{
  display:flex;align-items:center;gap:5px;
  padding:9px 15px;
  border:1.5px solid #d4e8d4;
  border-radius:10px;
  background:var(--light);
  color:var(--muted);
  font-size:13px;font-family:'Sarabun',sans-serif;
  cursor:pointer;transition:all .18s;
  white-space:nowrap;
}
.nf-reset-btn:hover{
  border-color:var(--steel);background:var(--steel);color:#fff;
}
.nf-reset-btn.active{
  border-color:var(--accent);background:var(--accent);color:#fff;
}
/* Status bar */
.nf-status{
  max-width:1280px;margin:6px auto 0;
  padding:0 28px;
  font-size:12.5px;color:var(--muted);
  min-height:18px;
  display:flex;align-items:center;gap:8px;
}
.nf-status .nf-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--light);border:1px solid #c8e0c8;
  border-radius:20px;padding:2px 10px;
  font-size:12px;color:var(--steel);font-weight:600;
}
.nf-status strong{color:var(--accent)}

/* Highlight mark */
.news-card mark{
  background:rgba(92,184,92,.22);
  color:inherit;border-radius:2px;padding:0 1px;
  font-style:normal;
}
/* Hidden card */
.nc-hide{display:none!important}

/* Empty state */
.nf-empty{
  text-align:center;padding:64px 24px 40px;
  animation:nfFadeIn .3s ease;
}
.nf-empty-icon{
  width:72px;height:72px;
  background:var(--light);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  border:2px solid #d4e8d4;
}
.nf-empty-icon i{font-size:30px;color:var(--muted)}
.nf-empty-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.nf-empty-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.nf-empty-btn{
  padding:10px 26px;
  background:var(--steel);color:#fff;
  border:none;border-radius:10px;
  font-size:13.5px;font-family:'Sarabun',sans-serif;
  cursor:pointer;transition:background .18s;
  display:inline-flex;align-items:center;gap:6px;
}
.nf-empty-btn:hover{background:var(--accent)}

@keyframes nfFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── news-card: รูปภาพข่าว (แทน .news-thumb icon) ── */
.news-img{
  width:216px;height:156px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:linear-gradient(135deg,#c8e0c8,#9abf9a);
}
.news-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s;
}
.news-card:hover .news-img img{transform:scale(1.06)}
/* fallback icon เมื่อรูปโหลดไม่ได้ */
.news-img-err{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c8e0c8,#9abf9a);
}
.news-img-err .icofont{font-size:2em;color:var(--steel);opacity:.4}

/* ── source badge ── */
.news-source{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;
  font-size:11.5px;color:var(--muted);
}
.news-source i{font-size:.95em}
.news-source a{color:var(--muted);text-decoration:none}
.news-source a:hover{color:var(--steel)}

/* ── server-side pagination bar ── */
.news-pg-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding-top:14px;
  border-top:1px solid var(--light);
  font-size:12.5px;color:var(--muted);
}
.news-pg-bar .pg-info{font-weight:600;color:var(--navy)}

/* Responsive */

/* ══════════════════════════════════════
   icons-subscribe.asp
══════════════════════════════════════ */
/* ── Pricing Grid ── */
.sub-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  align-items: start;
}
.sub-pkg-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px 24px;
  border: 1.5px solid #e0eee0;
  box-shadow: var(--sh);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.sub-pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.sub-pkg-card.featured {
  border-color: var(--steel);
  box-shadow: 0 8px 40px rgba(58,125,58,.18);
  transform: translateY(-6px);
}
.sub-pkg-card.featured:hover {
  transform: translateY(-10px);
}
.sub-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .04em;
}
.sub-pkg-icon {
  width: 48px; height: 48px;
  background: var(--light);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--steel);
  margin-bottom: 14px;
}
.featured .sub-pkg-icon {
  background: rgba(58,125,58,.12);
  color: var(--steel);
}
.sub-pkg-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.sub-pkg-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.sub-price-contact {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--steel);
  line-height: 1.2;
  display: block;
  padding: 6px 0;
}
.sub-price-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.sub-price-per {
  font-size: 15px;
  color: var(--muted);
  font-weight: 400;
}
.sub-pkg-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
  min-height: 38px;
}
.sub-feat-list {
  list-style: none;
  font-size: 13px;
  color: #4a6a4a;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sub-feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f7f0;
  line-height: 1.45;
}
.sub-feat-list li:last-child { border-bottom: none; }
.sub-feat-list li.yes i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.sub-feat-list li.no { color: #bbb; }
.sub-feat-list li.no i { color: #ddd; flex-shrink: 0; margin-top: 2px; }
.sub-feat-list li.sep {
  border-bottom: 2px dashed #e8f0e8;
  padding: 2px 0;
  margin: 2px 0;
}
.sub-pkg-btn {
  display: block;
  text-align: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  border: 2px solid var(--steel);
  color: var(--steel);
  transition: all .2s;
}
.sub-pkg-btn:hover {
  background: var(--steel);
  color: #fff;
}
.sub-pkg-btn.featured-btn {
  background: var(--steel);
  color: #fff;
  border-color: var(--steel);
}
.sub-pkg-btn.featured-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
/* ── FAQ ── */
.sub-faq {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--sh);
  border: 1px solid #e0eee0;
  margin-bottom: 36px;
}
.sub-faq-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 24px;
}
.sub-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sub-faq-item {
  padding: 18px;
  background: var(--light);
  border-radius: 12px;
  border: 1px solid #d8ead8;
}
.sub-faq-item h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-faq-item h4 i { color: var(--accent); }
.sub-faq-item p {
  font-size: 13.5px;
  color: #5a7a5a;
  line-height: 1.7;
}
.sub-faq-item a { color: var(--steel); font-weight: 600; }
/* ── CTA Band ── */
.sub-cta-band {
  background: linear-gradient(135deg, var(--navy), #1a4a1a);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
}
.sub-cta-band h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.sub-cta-band p {
  font-size: 15px;
  color: rgba(255,255,255,.72);
  margin-bottom: 24px;
}
.sub-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sub-cta-primary {
  padding: 13px 30px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  box-shadow: 0 4px 14px rgba(92,184,92,.35);
  transition: background .2s;
}
.sub-cta-primary:hover { background: #4cae4c; }
.sub-cta-secondary {
  padding: 13px 30px;
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  border: 1.5px solid rgba(255,255,255,.3);
  transition: background .2s;
}
.sub-cta-secondary:hover { background: rgba(255,255,255,.2); }
/* ── Responsive ── */
/* ══════════════════════════════════════
   icons-termsofuse.asp
══════════════════════════════════════ */
/* ── Layout ── */
.terms-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
/* ── TOC Sidebar ── */
.terms-toc { position: sticky; top: 88px; }
.terms-toc-card { padding: 20px; }
.terms-toc-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy); margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}
.toc-nav { display: flex; flex-direction: column; gap: 2px; }
.toc-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 12.5px; color: #5a7a5a;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.toc-link:hover { background: var(--light); color: var(--navy); }
.toc-link.active { background: var(--light); color: var(--steel); font-weight: 600; }
.toc-num {
  min-width: 20px; height: 20px;
  background: var(--light); border-radius: 5px;
  font-size: 11px; font-weight: 700; color: var(--steel);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toc-meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--light);
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; color: var(--muted);
}
.toc-meta i { color: var(--accent); margin-right: 4px; }

/* ── Main card ── */
.terms-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: var(--sh);
  border: 1px solid #e0eee0;
}
.terms-intro {
  font-size: 14.5px; color: #3a5a3a; line-height: 1.85;
  padding: 18px 22px;
  background: var(--light);
  border-left: 4px solid var(--steel);
  border-radius: 0 12px 12px 0;
  margin-bottom: 32px;
}

/* ── Section ── */
.terms-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #edf5ed;
}
.terms-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.terms-sec-h {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--navy); margin-bottom: 16px;
}
.sec-num {
  min-width: 32px; height: 32px;
  background: var(--steel); color: #fff;
  border-radius: 8px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.terms-section > p {
  font-size: 14px; color: #3a5a3a; line-height: 1.85;
  margin-bottom: 14px;
}

/* ── Sub sections ── */
.terms-sub-section {
  background: var(--light);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid #d8ead8;
}
.terms-sub-section h4 {
  font-size: 14px; font-weight: 700;
  color: var(--navy); margin-bottom: 8px;
}
.terms-sub-section p {
  font-size: 13.5px; color: #3a5a3a; line-height: 1.8; margin: 0;
}

/* ── Definition grid ── */
.terms-def-grid { display: flex; flex-direction: column; gap: 0; }
.def-row {
  display: grid;
  grid-template-columns: 200px 16px 1fr;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  transition: background .15s;
}
.def-row:nth-child(odd) { background: var(--light); }
.def-term { font-weight: 700; color: var(--navy); }
.def-sep { color: var(--muted); text-align: center; }
.def-desc { color: #3a5a3a; line-height: 1.65; }

/* ── Numbered list ── */
.terms-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
  counter-reset: terms-counter;
}
.terms-list li {
  counter-increment: terms-counter;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px; color: #3a5a3a; line-height: 1.8;
  border-radius: 8px;
  transition: background .15s;
}
.terms-list li:hover { background: var(--light); }
.terms-list li::before {
  content: counter(terms-counter);
  display: flex; align-items: flex-start; justify-content: center;
  width: 22px; height: 22px; margin-top: 2px;
  background: #e8f5e8; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: var(--steel);
  flex-shrink: 0;
}

/* ── Footer meta ── */
.terms-footer-meta {
  display: flex; gap: 20px; justify-content: flex-end;
  padding-top: 24px; margin-top: 12px;
  border-top: 1px solid var(--light);
  font-size: 12px; color: var(--muted);
}

/* ══════════════════════════════════════
   ADS FOOTER STRIP
══════════════════════════════════════ */
.ads-footer-strip{
  background:var(--light);
  border-top:1px solid #c8e0c8;
  border-bottom:1px solid #c8e0c8;
  padding:16px 0;
}
.ads-footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.ads-footer-item{
  display:block;
  line-height:0;
  flex:1;
  max-width:352px;
  min-width:200px;
  border-radius:var(--r);
  overflow:hidden;
  border:1.5px solid #d4e8d4;
  transition:border-color .2s,box-shadow .2s;
}
.ads-footer-item:hover{
  border-color:var(--accent);
  box-shadow:0 4px 16px rgba(92,184,92,.15);
}
.ads-footer-item img{width:100%;height:auto;display:block}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET ≤960px
══════════════════════════════════════ */
@media(max-width:960px){
  .dir-layout,.news-layout,.detail-layout,.cdet-layout,.two-col{grid-template-columns:1fr}
  .dir-sidebar{flex-direction:row;flex-wrap:wrap}
  .dir-sidebar .side-card{flex:1;min-width:220px}
  .cdet-mem-bar{flex-direction:column;align-items:flex-start}
  .ads-layout{grid-template-columns:1fr 1fr}
  .ads-pkg-grid{grid-template-columns:1fr 1fr}
  .ads-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ads-contact-strip{grid-template-columns:1fr}
  .ads-bottom-wrap{grid-template-columns:1fr}
  .ads-bottom-contact{border-right:1px solid #e0eee0;border-bottom:none;border-radius:20px 20px 0 0}
  .ads-bottom-trusted{border-radius:0 0 20px 20px}
  .billing-save-badge{display:none}
  .values-grid{grid-template-columns:1fr 1fr}
  .why-who-grid{grid-template-columns:1fr 1fr}
  .why-section,.why-who-box{padding:28px}
  .team-stats{grid-template-columns:repeat(2,1fr)}
  .positions-grid{grid-template-columns:1fr}
  .stat-inner{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
  .info-grid{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .sub-pkg-grid{grid-template-columns:1fr}
  .sub-pkg-card.featured{transform:none}
  .sub-faq-grid{grid-template-columns:1fr}
  .terms-layout{grid-template-columns:1fr}
  .terms-toc{position:static}
  .terms-card{padding:28px 22px}
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE ≤600px
══════════════════════════════════════ */
@media(max-width:600px){
  .ph-inner h1{font-size:28px}
  /* Page-specific responsive */
  .nf-inner{gap:8px}
  .nf-search-wrap{min-width:100%;order:0}
  .nf-selects{width:100%;order:1}
  .nf-sel-wrap select{min-width:0;flex:1}
  .def-row { grid-template-columns: 1fr; }
  .def-sep { display: none; }

  .ph-inner p{font-size:14px}
  .page-body{padding:22px 16px 56px}
  .dsb-inner{flex-direction:column}
  .dsb-field,.dsb-select,.btn-search{width:100%}
  .news-card{grid-template-columns:1fr}
  .news-thumb{height:130px}
  .ads-layout{grid-template-columns:1fr}
  .ads-pkg-grid{grid-template-columns:1fr}
  .ads-stats-grid{grid-template-columns:repeat(2,1fr)}
  .quote-form .fg-row{grid-template-columns:1fr}
  .quote-modal{padding:24px 18px}
  .values-grid{grid-template-columns:1fr}
  .why-who-grid{grid-template-columns:1fr}
  .why-section,.why-who-box{padding:22px}
  .why-stats-band{padding:28px 20px}
  .team-stats{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:5px;text-align:center}
  .dir-sidebar{flex-direction:column}
  .company-card{flex-direction:column;align-items:flex-start}
  .cc-btn{align-self:flex-end}
  .cdet-header{flex-direction:column}
  .detail-main,.cdet-main{padding:22px 16px}
  .proj-img-wrap{aspect-ratio:16/8}
  .proj-section-hdr{flex-direction:column;gap:4px;align-items:flex-start}
  .info-grid{grid-template-columns:1fr}
  .cdet-mem-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .content-card{padding:24px 18px}
  .positions-grid{grid-template-columns:1fr}
  .stat-inner{grid-template-columns:repeat(2,1fr)}
  .related-card{grid-template-columns:1fr}
  .related-thumb{height:80px}
  .ads-footer-inner{gap:10px;padding:0 16px}
  .ads-footer-item{min-width:100%;max-width:100%}
}
/* ══════════════════════════════════════
   LOGIN PAGE — icons-login.asp
   Palette: navy #1C3A1C, steel #3A7D3A, accent #5CB85C
══════════════════════════════════════ */

/* ── Page wrapper ── */
.login-page {
  min-height: calc(100vh - 106px);
  background: linear-gradient(145deg, #0e2210 0%, #1C3A1C 45%, #254d25 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative background patterns */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(92,184,92,.08) 0%, transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(58,125,58,.12) 0%, transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(28,58,28,.2) 0%, transparent 40%);
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92,184,92,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,184,92,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ── Inner container — aligned with nav (max-width 1280px, pad 32px) ── */
.login-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  min-height: calc(100vh - 106px);
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

/* ── Left panel ── */
.login-left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 64px 64px 0;
  max-width: none;
}
.login-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.login-headline em {
  font-style: normal;
  color: var(--accent);
}
.login-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,.58);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 420px;
}

/* Security notice box */
.security-notice {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(92,184,92,.2);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.security-notice .notice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.security-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.security-rules li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.92);            /* was .62 — pop out from dark bg */
  line-height: 1.55;
}
.security-rules li strong {
  color: #FFD54F;                          /* gold accent — emphasize key terms */
  font-weight: 600;
}
.rule-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: rgba(92,184,92,.22);         /* was .15 — brighter circle */
  border: 1px solid rgba(92,184,92,.5);    /* was .3 — sharper ring */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #B8F2C8;                          /* was var(--accent) — lighter on dark */
  margin-top: 2px;
}

/* Terms link — single instance under security box */
.login-terms-link {
  margin-top: 14px;
}
.login-terms-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}
.login-terms-link a:hover { color: var(--accent); }

/* ── Vertical divider ── */
.login-divider {
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,.12) 25%,
    rgba(255,255,255,.12) 75%,
    transparent);
  margin: 48px 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* ── Right panel — login form ── */
.login-right {
  flex: 0 0 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0 48px 48px;
  position: relative;
  z-index: 2;
}
.login-card-wrap {
  width: 100%;
  max-width: 420px;
}

/* Login card */
.lc {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.lc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--steel), var(--accent), var(--steel));
}
.lc-header {
  margin-bottom: 28px;
  text-align: center;
}
.lc-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--light), #d4e8d4);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border: 1.5px solid rgba(92,184,92,.25);
}
.lc-icon i { font-size: 24px; color: var(--steel); }
.lc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.lc-subtitle { font-size: 13px; color: var(--muted); }

/* Form fields */
.lc .form-group { margin-bottom: 16px; }
.lc .form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5a7a5a;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.lc .form-group label i { font-size: 13px; color: var(--accent); }
.lc .form-group .field-wrap { position: relative; }
.lc .form-group input {
  width: 100%;
  border: 1.5px solid #dde5e0;
  border-radius: 10px;
  padding: 11px 14px 11px 42px;
  font-size: 14.5px;
  font-family: 'Sarabun', sans-serif;
  color: var(--navy);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fafcfa;
}
.lc .form-group input:focus {
  border-color: var(--accent);
  background: white;
  box-shadow: 0 0 0 3px rgba(92,184,92,.12);
}
.field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9cbf9c;
  font-size: 15px;
  pointer-events: none;
}
.otp-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

/* Submit button */
.btn-login-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--steel), #2d6b2d);
  color: white;
  border: none;
  border-radius: 11px;
  padding: 13px;
  font-size: 15.5px;
  font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: 0 6px 24px rgba(58,125,58,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .03em;
}
.btn-login-submit:hover {
  background: linear-gradient(135deg, #2d6b2d, var(--navy));
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(28,58,28,.4);
}
.btn-login-submit:active { transform: translateY(0); }

/* Login error banner (จาก session("logerror")) */
.login-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-left: 4px solid #c00;
  border-radius: 10px;
  color: #991b1b;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(220,38,38,.12);
}
.login-error-banner i {
  font-size: 20px;
  color: #dc2626;
  flex-shrink: 0;
}
.login-error-banner span { flex: 1; }

/* ============================================================
   icons-otp-verify.asp — Step 2 styles
   ============================================================ */

/* Success banner (OTP sent confirmation) */
.otpv-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  color: #14532d;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(22,163,74,.12);
}
.otpv-success-banner i {
  font-size: 20px;
  color: #16a34a;
  flex-shrink: 0;
}
.otpv-success-banner span { flex: 1; }

/* Account info box (left column) — override .security-notice ให้เป็น card สว่าง */
.security-notice.otpv-info-box {
  background: linear-gradient(135deg, #ffffff 0%, #f4faf4 100%);
  border: 1px solid rgba(42, 96, 64, .18);
  border-left: 4px solid #2A6040;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6) inset;
  padding: 18px 22px;
}
.security-notice.otpv-info-box .notice-header {
  color: #1f4a2c;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(42, 96, 64, .15);
}
.otpv-info-box .notice-header i {
  color: #2A6040;
}
.otpv-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.otpv-info-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(42, 96, 64, .22);
  font-size: 13.5px;
}
.otpv-info-list li:last-child { border-bottom: none; }
.otpv-info-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-weight: 600;
}
.otpv-info-label i {
  font-size: 16px;
  color: #2A6040;
}
.otpv-info-value {
  color: #1a2e22;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}
.otpv-coin-value {
  color: #B07820;
  font-size: 16px;
}

/* Account-type Badge */
.otpv-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}
.otpv-badge-member {
  background: linear-gradient(135deg, #2A6040, #3D7A54);
  color: #fff;
}
.otpv-badge-training {
  background: linear-gradient(135deg, #1565C0, #1976D2);
  color: #fff;
}
.otpv-badge-trial {
  background: linear-gradient(135deg, #C8932A, #E0A93D);
  color: #fff;
}

/* Warning box */
.otpv-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  margin: 14px 0 0;
  border-radius: 10px;
  font-size: 12.8px;
  line-height: 1.5;
}
.otpv-warn i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.otpv-warn span { flex: 1; }
.otpv-warn-trial {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-left: 4px solid #d97706;
  color: #78350f;
}
.otpv-warn-trial i { color: #d97706; }
.otpv-warn-training {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border-left: 4px solid #2563eb;
  color: #1e3a8a;
}
.otpv-warn-training i { color: #2563eb; }

/* OTP 6-box input */
.otpv-code-wrap {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 4px;
}
/* ⚠️ Specificity raised to .lc .form-group .otpv-code-box
   to override generic .lc .form-group input padding (42px left) */
.lc .form-group .otpv-code-box,
.otpv-code-box {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  border: 2px solid #cbd5e0;
  border-radius: 12px;
  background: #f8fafc;
  transition: all .2s;
  font-family: 'Barlow Condensed', 'Sarabun', sans-serif;
  letter-spacing: 0;
}
.lc .form-group .otpv-code-box:focus,
.otpv-code-box:focus {
  outline: none;
  border-color: #2A6040;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42,96,64,.15);
}

/* Timer + Resend row */
.otpv-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 4px;
  font-size: 13px;
}
.otpv-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a5568;
  font-weight: 500;
}
.otpv-timer i { color: #2A6040; font-size: 15px; }
.otpv-timer-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #2A6040;
  min-width: 46px;
  text-align: left;
}
.otpv-timer-expired { color: #dc2626; }
.otpv-resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #2A6040;
  border-radius: 8px;
  background: #fff;
  color: #2A6040;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.otpv-resend-btn:hover:not(:disabled) {
  background: #2A6040;
  color: #fff;
}
.otpv-resend-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Help text under OTP/password */
.otpv-help-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f1f5f9;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}
.otpv-help-text i {
  font-size: 15px;
  color: #64748b;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Password input + eye toggle */
.otpv-pass-input {
  letter-spacing: .35em;
  font-weight: 600;
}
.otpv-eye-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  transition: all .2s;
}
.otpv-eye-btn:hover {
  background: #f1f5f9;
  color: #2A6040;
}

/* Responsive */
@media (max-width: 480px) {
  .otpv-code-box { height: 48px; font-size: 20px; }
  .otpv-timer-row { flex-wrap: wrap; gap: 8px; }
  .otpv-info-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .otpv-info-value { text-align: left; }
}

/* OTP help link */
.lc-link-otp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.lc-link-otp:hover { color: var(--steel); }

/* Register prompt */
.register-prompt {
  margin-top: 20px;
  background: linear-gradient(135deg, #f0f7f0, #e4f0e4);
  border: 1px solid rgba(92,184,92,.2);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
}
.register-prompt p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.register-prompt p strong { color: var(--navy); }
.btn-register {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--navy);
  color: white;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Sarabun', sans-serif;
  transition: background .2s;
}
.btn-register:hover { background: var(--steel); }

/* ── Fade-in animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-left        { animation: fadeUp .55s ease both; }
.lc                { animation: fadeUp .55s .15s ease both; }
.register-prompt   { animation: fadeUp .55s .25s ease both; }

/* ── RESPONSIVE — TABLET ≤960px ── */
@media (max-width: 960px) {
  .login-inner { padding: 0 24px; }
  .login-left  { padding-right: 40px; }
  .login-right { flex: 0 0 420px; padding-left: 32px; }
}

/* ── RESPONSIVE — MOBILE ≤768px ── */
@media (max-width: 768px) {
  .login-inner {
    flex-direction: column;
    padding: 0 20px;
    min-height: unset;
  }
  .login-left {
    max-width: 100%;
    padding: 40px 0 28px;
  }
  .login-headline { font-size: 32px; }
  .login-sub { max-width: 100%; }
  .login-divider { display: none; }
  .login-right {
    flex: none;
    padding: 0 0 48px;
  }
  .login-card-wrap { max-width: 100%; }
}

/* ── RESPONSIVE — MOBILE ≤480px ── */
@media (max-width: 480px) {
  .login-inner { padding: 0 16px; }
  .lc { padding: 28px 20px; }
  .login-headline { font-size: 28px; }
}

/* ══════════════════════════════════════
   OTP HELP MODAL — icons-login.asp
══════════════════════════════════════ */
.otp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.otp-modal-overlay.active { display: flex; }
.otp-modal {
  background: #fff;
  border-radius: 18px;
  padding: 36px 32px 28px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  position: relative;
  animation: fadeUp .25s ease both;
}
.otp-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--steel), var(--accent), var(--steel));
}
.otp-modal-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--light), #d4e8d4);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  border: 1.5px solid rgba(92,184,92,.25);
}
.otp-modal-icon i { font-size: 26px; color: var(--steel); }
.otp-modal h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--navy);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.otp-modal p {
  font-size: 14.5px;
  color: #4a6a4a;
  line-height: 1.75;
  margin-bottom: 22px;
}
.otp-modal p strong { color: var(--navy); }
.otp-modal-actions {
  display: flex; gap: 10px;
  justify-content: center; flex-wrap: wrap;
}
.btn-modal-contact {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--steel); color: #fff;
  padding: 10px 22px; border-radius: 9px;
  font-size: 14px; font-weight: 600;
  font-family: 'Sarabun', sans-serif;
  text-decoration: none;
  transition: background .2s;
}
.btn-modal-contact:hover { background: var(--navy); }
.btn-modal-close {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--light); color: var(--muted);
  padding: 10px 22px; border-radius: 9px;
  font-size: 14px; font-weight: 600;
  font-family: 'Sarabun', sans-serif;
  border: 1.5px solid #d0e8d0;
  cursor: pointer;
  transition: background .2s;
}
.btn-modal-close:hover { background: #d4e8d4; color: var(--navy); }

/* ══════════════════════════════════════
   MATERIAL PAGE — icons-material.asp
   Two-column: left category nav + right content
══════════════════════════════════════ */

/* ── Search bar (no province select) ── */
.mat-search-bar{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;margin-bottom:24px;border:1px solid #e0eee0}
.mat-search-inner{display:flex;gap:10px;align-items:center}
.mat-search-field{flex:1;display:flex;align-items:center;gap:8px;border:1.5px solid #d0e8d0;border-radius:10px;padding:10px 14px;background:var(--light);transition:border-color .2s}
.mat-search-field:focus-within{border-color:var(--accent)}
.mat-search-field input{border:none;background:transparent;outline:none;font-size:14px;font-family:'Sarabun',sans-serif;color:var(--navy);width:100%}
.mat-search-field input::placeholder{color:var(--muted)}
.mat-search-btn{display:flex;align-items:center;gap:7px;padding:10px 22px;background:var(--steel);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.mat-search-btn:hover{background:var(--accent);transform:translateY(-1px)}

/* ── Main two-column layout ── */
.mat-layout{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}

/* ── Left: Category sidebar ── */
.mat-cat-sidebar{background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:1px solid #e0eee0;overflow:hidden;position:sticky;top:80px}
.mat-cat-header{padding:16px 18px;background:linear-gradient(135deg,var(--navy) 0%,#1a4a1a 100%);display:flex;align-items:center;gap:8px}
.mat-cat-header i{color:var(--accent);font-size:1.1em}
.mat-cat-header span{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:.04em}
.mat-cat-list{padding:8px 0;max-height:calc(100vh - 200px);overflow-y:auto}
.mat-cat-list::-webkit-scrollbar{width:4px}
.mat-cat-list::-webkit-scrollbar-thumb{background:#c8e0c8;border-radius:4px}
.mat-cat-item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:'Sarabun',sans-serif;font-size:13.5px;color:#3a5a3a;transition:all .18s;border-left:3px solid transparent;line-height:1.4}
.mat-cat-item:hover{background:var(--light);color:var(--navy)}
.mat-cat-item.active{background:linear-gradient(90deg,rgba(92,184,92,.12),transparent);border-left-color:var(--steel);color:var(--navy);font-weight:600}
.mat-cat-item .cat-no{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:6px;background:#e0eee0;color:var(--steel);font-size:11px;font-weight:700;flex-shrink:0;transition:all .18s}
.mat-cat-item.active .cat-no{background:var(--steel);color:#fff}
.mat-cat-item .cat-name{flex:1}

/* ── Right: Content panel ── */
.mat-content{display:flex;flex-direction:column;gap:16px}

/* ── Content header (breadcrumb + count) ── */
.mat-content-hdr{background:#fff;border-radius:var(--r);padding:16px 20px;border:1px solid #e0eee0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mat-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.mat-breadcrumb .bc-root{color:var(--steel);font-weight:600;cursor:pointer}
.mat-breadcrumb .bc-root:hover{color:var(--navy)}
.mat-breadcrumb .bc-sep{color:#c0d8c0}
.mat-breadcrumb .bc-cur{color:var(--navy);font-weight:600}
.mat-count-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;background:var(--light);border:1px solid #d0e8d0;border-radius:20px;font-size:12.5px;color:var(--steel);font-weight:600;white-space:nowrap}

/* ── Material items grid ── */
.mat-items-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mat-item-card{background:#fff;border-radius:12px;padding:16px 18px;border:1.5px solid #e0eee0;display:flex;align-items:flex-start;gap:13px;transition:all .2s;cursor:pointer;text-decoration:none}
.mat-item-card:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(92,184,92,.12);transform:translateY(-2px)}
.mat-item-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--light) 0%,#d0e8d0 100%);border:1.5px solid #c0d8c0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mat-item-icon i{font-size:1.1em;color:var(--steel)}
.mat-item-body{flex:1;min-width:0}
.mat-item-name{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.45;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mat-item-meta{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
.mat-item-arrow{flex-shrink:0;color:#c0d8c0;font-size:.9em;margin-top:2px;transition:color .2s}
.mat-item-card:hover .mat-item-arrow{color:var(--steel)}

/* ── Hint state (ยังไม่ได้เลือกหมวด) ── */
.mat-hint-state{background:#fff;border-radius:var(--r);border:2px dashed #d0e8d0;padding:60px 30px;text-align:center}
.mat-hint-icon{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--light),#d4e8d4);border:2px solid #c0d8c0;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.mat-hint-icon i{font-size:2em;color:var(--steel);opacity:.7}
.mat-hint-state h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:8px}
.mat-hint-state p{font-size:14px;color:var(--muted);line-height:1.7}

/* ── Empty search result ── */
.mat-empty{background:#fff;border-radius:var(--r);border:1px solid #e0eee0;padding:50px 30px;text-align:center}
.mat-empty i{font-size:2.5em;color:#c0d8c0;margin-bottom:14px;display:block}
.mat-empty h3{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:6px}
.mat-empty p{font-size:13.5px;color:var(--muted)}

/* ── Category section (when showing all items under a category) ── */
.mat-section-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--light);display:flex;align-items:center;gap:8px}
.mat-section-title i{color:var(--steel);font-size:.9em}

/* ── Desc banner ── */
.mat-desc-banner{background:#fff;border-radius:var(--r);padding:18px 22px;border:1px solid #e0eee0;display:flex;align-items:flex-start;gap:13px;margin-bottom:6px}
.mat-desc-banner i{font-size:1.5em;color:var(--steel);flex-shrink:0;margin-top:2px}
.mat-desc-banner p{font-size:13.5px;color:#3a5a3a;line-height:1.8;margin:0}

/* ── RESPONSIVE — TABLET ≤1024px ── */
@media (max-width:1024px){
  .mat-layout{grid-template-columns:220px 1fr}
  .mat-items-grid{grid-template-columns:1fr}
}

/* ── RESPONSIVE — TABLET ≤768px ── */
@media (max-width:768px){
  .mat-layout{grid-template-columns:1fr}
  .mat-cat-sidebar{position:static}
  .mat-cat-list{max-height:220px}
  .mat-items-grid{grid-template-columns:1fr}
}

/* ── RESPONSIVE — MOBILE ≤480px ── */
@media (max-width:480px){
  .mat-search-inner{flex-wrap:wrap}
  .mat-search-btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════
   MATERIAL DETAIL — icons-materialdetail.asp
   Palette: navy / steel / accent (green)
   โทนสว่าง / green-tinted white
══════════════════════════════════════ */

/* ── Variables ── */
:root {
  --md-r: 14px;
  --md-r-sm: 9px;
  --md-sh: 0 2px 16px rgba(28,58,28,.07);
  --md-sh-hov: 0 6px 28px rgba(58,125,58,.14);
  --md-border: #daeeda;
  --md-bg-card: #ffffff;
  --md-bg-tint: #f4fbf4;
  --md-bg-hdr: linear-gradient(135deg,#f0faf0,#e8f5e8);
}

/* ── Hero ── */
.md-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f0d 55%, #1a4a1a 100%);
  padding: 44px 0 52px;
  position: relative;
  overflow: hidden;
}
.md-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235CB85C' fill-opacity='.05'%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/svg%3E");
}
.md-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.md-blob-l { width: 500px; height: 500px; top: -180px; left: -130px; background: radial-gradient(circle, rgba(92,184,92,.08), transparent 70%); }
.md-blob-r { width: 400px; height: 400px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(92,184,92,.06), transparent 70%); }
.md-hero-inner { position: relative; max-width: 1280px; margin: auto; padding: 0 28px; }
.md-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 14px; flex-wrap: wrap;
}
.md-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.md-breadcrumb a:hover { color: var(--accent); }
.md-breadcrumb .bc-sep { color: rgba(255,255,255,.25); }
.md-breadcrumb .bc-cur { color: rgba(255,255,255,.75); }
.md-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(92,184,92,.14); border: 1px solid rgba(92,184,92,.28);
  color: var(--accent2); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px; margin-bottom: 14px;
}
.md-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 4vw, 40px); font-weight: 700;
  color: #fff; line-height: 1.2; margin-bottom: 12px; max-width: 860px;
}
.md-hero-sub { font-size: 13px; color: rgba(255,255,255,.55); display: flex; gap: 20px; flex-wrap: wrap; }
.md-hero-sub span { display: flex; align-items: center; gap: 5px; }
.md-hero-sub i { color: var(--accent2); }

/* ── Page body ── */
.md-body { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; }

/* ── Top banner ads — wraps RenderAdsFooter; white bg + no top border ── */
.md-top-ads .ad-strip {
  background: #fff;
  border-top: none;
}

/* ── Two-column layout ── */
.md-layout { display: grid; grid-template-columns: 1fr 264px; gap: 24px; align-items: start; }

/* ── Section card ── */
.md-section {
  background: var(--md-bg-card); border-radius: var(--md-r);
  border: 1.5px solid var(--md-border); box-shadow: var(--md-sh);
  overflow: hidden; margin-bottom: 22px;
}
.md-section:last-child { margin-bottom: 0; }
.md-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px 12px; border-bottom: 1.5px solid #edf5ed;
  background: var(--md-bg-hdr);
}
.md-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: .03em;
}
.md-sec-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--steel));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.md-count-pill {
  background: var(--light); color: var(--steel); border: 1.5px solid #c4dcc4;
  border-radius: 20px; padding: 3px 11px; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}

/* ── Supplier toolbar ── */
.sup-toolbar {
  padding: 12px 18px; border-bottom: 1px solid #edf5ed; background: #fafffe;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sup-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #d4ecd4; border-radius: 8px;
  padding: 8px 12px; transition: border-color .2s;
}
.sup-search:focus-within { border-color: var(--accent); }
.sup-search i { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.sup-search input {
  border: none; outline: none; background: transparent;
  font-size: 13px; font-family: 'Sarabun',sans-serif; color: var(--navy); width: 100%;
}
.sup-sort {
  padding: 8px 12px; border: 1.5px solid #d4ecd4; border-radius: 8px;
  background: #fff; font-size: 13px; font-family: 'Sarabun',sans-serif;
  color: var(--navy); cursor: pointer; outline: none; transition: border-color .2s;
}
.sup-sort:focus { border-color: var(--accent); }

/* ── Supplier pagination ── */
.sup-pagination {
  padding: 12px 18px; border-top: 1px solid #edf5ed;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sup-pg-info { font-size: 12px; color: var(--muted); }

/* ── Supplier cards ── */
.sup-list { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.sup-card {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 11px;
  border: 1.5px solid #e8f3e8; background: #fafffe;
  text-decoration: none; transition: all .22s; position: relative; overflow: hidden;
}
.sup-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--steel));
  opacity: 0; transition: opacity .22s; border-radius: 3px 0 0 3px;
}
.sup-card:hover { border-color: var(--accent); box-shadow: var(--md-sh-hov); transform: translateX(4px); background: #f5fdf5; }
.sup-card:hover::before { opacity: 1; }
.sup-logo {
  width: 46px; height: 46px; border-radius: 10px;
  background: linear-gradient(135deg,#e8f3e8,#d4ecd4);
  border: 1px solid #c4dcc4;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sup-logo i { font-size: 21px; color: var(--steel); }
.sup-body { flex: 1; min-width: 0; }
.sup-name { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.sup-meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.sup-meta span { display: flex; align-items: center; gap: 3px; }
.sup-tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.sup-tag {
  background: #eef7ee; border: 1px solid #cce0cc; color: var(--steel);
  border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 500;
}
.sup-arrow { color: #b8ceb8; font-size: 13px; flex-shrink: 0; transition: color .2s; }
.sup-card:hover .sup-arrow { color: var(--accent); }

/* ── BOQ toolbar ── */
.boq-toolbar {
  padding: 12px 18px; border-bottom: 1px solid #edf5ed; background: #fafffe;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.boq-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #d4ecd4; border-radius: 8px;
  padding: 8px 12px; transition: border-color .2s;
}
.boq-search:focus-within { border-color: var(--accent); }
.boq-search i { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.boq-search input {
  border: none; outline: none; background: transparent;
  font-size: 13px; font-family: 'Sarabun',sans-serif; color: var(--navy); width: 100%;
}
.boq-sort {
  padding: 8px 12px; border: 1.5px solid #d4ecd4; border-radius: 8px;
  background: #fff; font-size: 13px; font-family: 'Sarabun',sans-serif;
  color: var(--navy); cursor: pointer; outline: none; transition: border-color .2s;
}
.boq-sort:focus { border-color: var(--accent); }

/* ── BOQ Table ── */
.boq-table-wrap { overflow-x: auto; }
.boq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.boq-table thead tr { background: linear-gradient(90deg,#1a3a1a,#2d5a2d); }
.boq-table thead th {
  padding: 11px 16px; text-align: left;
  color: rgba(255,255,255,.9); font-weight: 600; font-size: 11.5px;
  letter-spacing: .05em; white-space: nowrap;
}
.boq-table thead th.tc { text-align: center; }
.boq-table thead th.tr { text-align: right; }
.boq-table tbody tr { border-bottom: 1px solid #eef6ee; transition: background .15s; }
.boq-table tbody tr:nth-child(even) { background: #fafefe; }
.boq-table tbody tr:hover { background: #edf8ed; }
.boq-table tbody td { padding: 10px 16px; color: var(--navy); vertical-align: middle; }
.td-num {
  text-align: right; font-weight: 700; color: var(--steel);
  white-space: nowrap; font-family: 'Barlow Condensed',sans-serif; font-size: 15px;
}
.td-unit-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#eef8ee,#e0f0e0);
  border: 1px solid #c4dcc4; color: var(--steel); border-radius: 6px;
  padding: 2px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.boq-desc-txt { font-weight: 500; line-height: 1.45; }

/* ── Shared Pagination ── */
.boq-pagination {
  padding: 12px 18px; border-top: 1px solid #edf5ed;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.boq-pg-info { font-size: 12px; color: var(--muted); }
.pg-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-btn {
  min-width: 32px; height: 32px; padding: 0 7px;
  border: 1.5px solid #d4ecd4; border-radius: 6px;
  background: #fff; color: var(--steel); font-size: 12.5px;
  font-family: 'Sarabun',sans-serif; cursor: pointer; transition: all .18s;
  display: inline-flex; align-items: center; justify-content: center;
}
.pg-btn.active { background: var(--steel); color: #fff; border-color: var(--steel); }
.pg-btn:hover:not(.active):not(:disabled) { background: var(--light); }
.pg-btn:disabled { opacity: .35; cursor: default; }

/* ── Sidebar ── */
.md-sidebar { display: flex; flex-direction: column; gap: 18px; }
.sb-card {
  background: var(--md-bg-card); border-radius: var(--md-r);
  border: 1.5px solid var(--md-border); box-shadow: var(--md-sh); overflow: hidden;
}
.sb-card-hdr {
  padding: 12px 16px 10px; border-bottom: 1px solid #edf5ed;
  background: var(--md-bg-hdr); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.sb-card-hdr i { color: var(--accent); font-size: 13px; }
.sb-back {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  color: var(--steel); text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: all .18s;
}
.sb-back:hover { color: var(--navy); background: var(--light); }
.sb-back i { font-size: 14px; }
.sb-stat-list { padding: 10px 16px; }
.sb-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #f0f8f0;
}
.sb-stat-row:last-child { border: none; padding-bottom: 2px; }
.sb-stat-lbl { font-size: 13px; color: #5a7a5a; display: flex; align-items: center; gap: 7px; }
.sb-stat-lbl i { color: var(--accent); font-size: 13px; }
.sb-stat-val { font-family: 'Barlow Condensed',sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); }
.sb-cta-body { padding: 15px 16px; text-align: center; }
.sb-cta-body h5 { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.sb-cta-body p { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.btn-sb-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg,var(--accent),var(--steel));
  color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 600; font-family: 'Sarabun',sans-serif;
  transition: opacity .2s, transform .18s;
}
.btn-sb-cta:hover { opacity: .88; transform: translateY(-1px); }
.sb-ad-slot { display: block; line-height: 0; }
.sb-ad-slot img { width: 100%; display: block; }
.sb-ad-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100px; padding: 16px; text-align: center; gap: 5px;
  background: linear-gradient(135deg,#f4fbf4,#eaf5ea);
  border: 1.5px dashed #c4dcc4; border-radius: 10px; margin: 12px;
}
.sb-ad-empty i { font-size: 24px; color: #c4d8c4; }
.sb-ad-empty span { font-size: 11.5px; color: var(--muted); }
.sb-ad-empty a { font-size: 11px; color: var(--steel); }
.sb-related-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.sb-related-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border-radius: 8px; background: var(--md-bg-tint); border: 1px solid #e4f0e4;
  text-decoration: none; color: var(--navy); font-size: 12.5px; transition: all .18s;
}
.sb-related-item:hover { background: #eaf7ea; border-color: var(--accent); color: var(--steel); }
.sb-related-item i { color: var(--accent2); font-size: 13px; flex-shrink: 0; margin-top: 2px; }

/* ── Fade-in animation ── */
@keyframes mdFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-materialdetail .md-hero-inner { animation: mdFadeUp .4s ease both; }
.page-materialdetail .md-top-ads    { animation: mdFadeUp .4s .06s ease both; }
.page-materialdetail .md-section    { animation: mdFadeUp .4s .1s ease both; }
.page-materialdetail .md-sidebar    { animation: mdFadeUp .4s .14s ease both; }

/* ── Responsive — MATERIAL DETAIL ── */
@media (max-width: 960px) { .md-layout { grid-template-columns: 1fr 230px; } }
@media (max-width: 800px) {
  .md-layout { grid-template-columns: 1fr; }
  .md-sidebar { order: -1; }
  .md-ads-slots { flex-wrap: wrap; }
  .md-ad-empty { min-width: calc(50% - 5px); }
}
@media (max-width: 600px) {
  .md-body { padding: 18px 16px 60px; }
  .md-hero-inner { padding: 0 16px; }
  .boq-toolbar { gap: 7px; }
  .boq-search { min-width: 100%; }
  .boq-table thead th,.boq-table tbody td { padding: 8px 10px; font-size: 12px; }
  .sup-list { padding: 10px 12px; }
  .md-ad-empty { min-width: 100%; }
}

/* ── Utility — MATERIAL DETAIL ── */
.sb-related-en{display:block;font-size:10px;color:var(--muted);font-style:normal;letter-spacing:.3px;line-height:1.3;margin-top:1px;opacity:.75}
.sb-related-item:hover .sb-related-en{opacity:1}
.no-result{padding:28px;text-align:center;color:var(--muted);font-size:14px}
.ajax-loading{padding:28px;text-align:center;color:var(--muted);font-size:14px}
.spin{display:inline-block;animation:mdspin .8s linear infinite;margin-right:5px}
@keyframes mdspin{to{transform:rotate(360deg)}}


/* ══════════════════════════════════════════════════════
   SUPPLIER DETAIL PAGE  (icons-supplierdetail.asp)
══════════════════════════════════════════════════════ */

/* ── Variables ── */
.page-supplierdetail {
  --sd-card:   #ffffff;
  --sd-border: #ddeedd;
  --sd-sh:     0 4px 20px rgba(0,0,0,.07);
  --sd-r:      14px;
  --sd-hdr-bg: #f8fcf8;
}

/* ── Hero ── */
.sd-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0b1e0b 55%, #183c18 100%);
  padding: 52px 0 62px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.sd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235CB85C' fill-opacity='.05'%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/svg%3E");
}
.sd-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.sd-blob-l { width: 420px; height: 420px; top: -140px; left: -110px; background: radial-gradient(circle, rgba(92,184,92,.09), transparent 70%); }
.sd-blob-r { width: 360px; height: 360px; bottom: -100px; right: -80px; background: radial-gradient(circle, rgba(92,184,92,.06), transparent 70%); }
.sd-hero-inner { position: relative; max-width: 860px; margin: auto; padding: 0 24px; }
.sd-breadcrumb {
  font-size: 12.5px; color: rgba(255,255,255,.5); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
}
.sd-breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.sd-breadcrumb a:hover { color: var(--accent); }
.sd-breadcrumb .bc-sep { color: rgba(255,255,255,.3); }
.sd-breadcrumb .bc-cur { color: rgba(255,255,255,.85); }
.sd-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(92,184,92,.15); border: 1px solid rgba(92,184,92,.3);
  color: var(--accent2); font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 5px 18px; border-radius: 20px; margin-bottom: 16px;
}
.sd-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px, 4.5vw, 44px); font-weight: 700; color: #fff;
  line-height: 1.15; margin-bottom: 16px;
}
.sd-hero-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; font-size: 13px; color: rgba(255,255,255,.72);
}
.sd-hero-meta span { display: flex; align-items: center; gap: 6px; }
.sd-hero-meta i { color: var(--accent2); }
.sd-hero-sep { color: rgba(255,255,255,.25) !important; }
.sd-regno-pill {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  padding: 3px 14px; border-radius: 20px; font-size: 12px; letter-spacing: .05em;
}

/* ── Body & Layout ── */
.sd-body { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; }
.sd-layout { display: grid; grid-template-columns: 1fr 272px; gap: 24px; align-items: start; margin-top: 24px; }

/* ── Section ── */
.sd-section {
  background: var(--sd-card); border-radius: var(--sd-r);
  border: 1.5px solid var(--sd-border); box-shadow: var(--sd-sh);
  margin-bottom: 20px; overflow: hidden;
}
.sd-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px; border-bottom: 1.5px solid var(--sd-border);
  background: var(--sd-hdr-bg);
}
.sd-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px;
  font-weight: 700; color: var(--navy); letter-spacing: .02em;
}
.sd-sec-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--steel));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sd-sec-icon i { color: #fff; font-size: 15px; }
.sd-count-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--light); border: 1px solid #c8e0c8; color: var(--steel);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}

/* ── Info Grid ── */
.sd-info-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sd-info-row {
  display: grid; grid-template-columns: 180px 1fr;
  align-items: start; padding: 12px 0; border-bottom: 1px solid #f0f8f0; gap: 12px;
}
.sd-info-row:last-child { border-bottom: none; }
.sd-info-full { grid-column: 1 / -1; }
.sd-info-label {
  font-size: 13px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 7px; padding-top: 1px;
}
.sd-info-label i { color: var(--accent); font-size: 14px; }
.sd-info-value { font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.6; word-break: break-word; }
.sd-val-regno { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--steel); }
.sd-val-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.sd-prov-tag {
  display: inline-flex; align-items: center; background: var(--light);
  border: 1px solid #c8e0c8; color: var(--steel); font-size: 13px;
  font-weight: 600; padding: 3px 14px; border-radius: 20px;
}
.sd-link { display: inline-flex; align-items: center; gap: 6px; color: var(--steel); text-decoration: none; font-size: 13.5px; transition: color .2s; word-break: break-all; }
.sd-link:hover { color: var(--navy); }
.sd-link-tel { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 14.5px; transition: color .2s; }
.sd-link-tel:hover { color: var(--steel); }
.sd-social-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; padding: 4px 14px; border-radius: 20px; text-decoration: none; transition: opacity .2s;
}
.sd-social-tag:hover { opacity: .82; }
.sd-social-tag.sd-line { background: #e8f9e8; color: #1db954; border: 1px solid #b8e8b8; }
.sd-social-tag.sd-fb   { background: #e8f0fe; color: #1877f2; border: 1px solid #c0d0f8; }
.sd-btn-map {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #e8f5e9, #d4edd4); border: 1.5px solid #b0d8b0;
  color: var(--steel); font-size: 13.5px; font-weight: 600; padding: 8px 18px;
  border-radius: 10px; text-decoration: none; transition: all .2s;
}
.sd-btn-map:hover { background: var(--steel); color: #fff; border-color: var(--steel); transform: translateY(-1px); }

/* ── Map ── */
.sd-map-wrap { padding: 20px; }
.sd-map-cta {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: linear-gradient(135deg, #f4fbf4, #eaf5ea); border: 1.5px dashed #b8d8b8;
  border-radius: 12px; color: var(--muted); font-size: 13.5px;
}
.sd-map-pin-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--steel));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sd-map-pin-icon i { color: #fff; font-size: 20px; }
.sd-map-cta-txt { flex: 1; }
.sd-map-cta-txt strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.sd-btn-map-lg {
  display: inline-flex; align-items: center; gap: 7px; background: var(--steel);
  color: #fff; font-size: 13.5px; font-weight: 600; padding: 10px 20px;
  border-radius: 10px; text-decoration: none; transition: all .2s; white-space: nowrap;
}
.sd-btn-map-lg:hover { background: var(--navy); transform: translateY(-1px); }

/* ── Product Groups ── */
.sd-prod-groups { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sd-prod-group { border: 1.5px solid var(--sd-border); border-radius: 12px; overflow: hidden; transition: box-shadow .2s; }
.sd-prod-group:hover { box-shadow: 0 4px 18px rgba(58,125,58,.1); }
.sd-prod-group-hdr {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: linear-gradient(90deg, #f0f8f0, #f8fcf8); border-bottom: 1px solid var(--sd-border);
}
.sd-prod-group-hdr > i { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.sd-prod-cat-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--navy); }
.sd-prod-cat-count { font-size: 11.5px; font-weight: 700; background: var(--steel); color: #fff; padding: 2px 10px; border-radius: 12px; letter-spacing: .04em; }
.sd-prod-items { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sd-prod-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: #f6fcf6; border: 1px solid #ddeedd; border-radius: 8px;
  font-size: 13px; color: var(--navy); text-decoration: none; transition: all .18s;
}
.sd-prod-item:hover {
  background: var(--light); border-color: var(--accent); color: var(--steel);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(92,184,92,.12);
}
.sd-prod-item > i:first-child { color: var(--accent2); font-size: 12px; flex-shrink: 0; }
.sd-prod-arrow { color: var(--muted) !important; font-size: 10px !important; opacity: .45; }
.sd-prod-item:hover .sd-prod-arrow { opacity: 1; color: var(--accent) !important; }

/* ── Sidebar ── */
.sd-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sd-sb-prov { font-size: 13px; font-weight: 600; font-family: 'Sarabun', sans-serif; color: var(--steel); }
.sd-sb-contacts { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.sd-sb-contact-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; color: var(--navy); text-decoration: none; transition: background .16s; word-break: break-all;
}
.sd-sb-contact-row:hover { background: var(--light); color: var(--steel); }
.sd-sb-c-icon {
  width: 28px; height: 28px; border-radius: 7px; background: var(--light);
  border: 1px solid #c8e0c8; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sd-sb-c-icon i { font-size: 13px; color: var(--steel); }
.sd-sb-c-icon.sd-line-icon { background: #e8f9e8; border-color: #b8e8b8; }
.sd-sb-c-icon.sd-line-icon i { color: #1db954; }
.sd-sb-web-txt { color: var(--steel); font-weight: 600; }

/* ── Sidebar Ads — framed ── */
.sd-sb-ads-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sd-sb-ad-frame {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--sd-border); box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s; line-height: 0;
}
.sd-sb-ad-frame:hover { box-shadow: 0 4px 18px rgba(58,125,58,.14); transform: translateY(-2px); }
.sd-sb-ad-frame img { width: 100%; display: block; border-radius: 8px; }
.sd-sb-ad-empty-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 110px; padding: 16px; text-align: center; gap: 6px;
  background: linear-gradient(135deg, #f6fbf6, #edf5ed);
  border: 1.5px dashed #c4dcc4; border-radius: 10px;
}
.sd-sb-ad-empty-frame i { font-size: 22px; color: #c4d8c4; }
.sd-sb-ad-empty-frame span { font-size: 11.5px; color: var(--muted); }
.sd-sb-ad-empty-frame a { font-size: 11.5px; font-weight: 600; color: var(--steel); text-decoration: none; margin-top: 2px; }
.sd-sb-ad-empty-frame a:hover { color: var(--navy); }

/* ── Gallery ── */
.sd-gallery { padding: 20px; display: grid; gap: 10px; }
.sd-gal-1 { grid-template-columns: 1fr; }
.sd-gal-1 .sd-gallery-img-wrap { min-height: 340px; }
.sd-gal-2 { grid-template-columns: 1fr 1fr; }
.sd-gal-2 .sd-gallery-img-wrap { min-height: 240px; }
.sd-gal-3 { grid-template-columns: repeat(3, 1fr); }
.sd-gal-3 .sd-gallery-img-wrap { min-height: 200px; }
.sd-gal-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
.sd-gal-4 .sd-gallery-img-wrap { min-height: 150px; }
.sd-gal-4 .sd-gallery-featured { grid-column: span 1; grid-row: span 2; }
.sd-gal-4 .sd-gallery-featured .sd-gallery-img-wrap { min-height: 310px; }
.sd-gal-5 { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 150px; }
.sd-gal-5 .sd-gallery-img-wrap { min-height: 150px; }
.sd-gal-5 .sd-gallery-featured { grid-column: span 2; grid-row: span 2; }
.sd-gal-5 .sd-gallery-featured .sd-gallery-img-wrap { min-height: 310px; }
.sd-gal-7 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
.sd-gal-7 .sd-gallery-img-wrap { min-height: 150px; }
.sd-gal-7 .sd-gallery-featured { grid-column: span 2; grid-row: span 2; }
.sd-gal-7 .sd-gallery-featured .sd-gallery-img-wrap { min-height: 310px; }
.sd-gal-10 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; }
.sd-gal-10 .sd-gallery-img-wrap { min-height: 140px; }
.sd-gal-10 .sd-gallery-featured { grid-column: span 2; grid-row: span 2; }
.sd-gal-10 .sd-gallery-featured .sd-gallery-img-wrap { min-height: 290px; }
.sd-gallery-item { border-radius: 10px; overflow: hidden; }
.sd-gallery-img-wrap {
  position: relative; width: 100%; height: 100%;
  background: #f0f8f0; overflow: hidden; border-radius: 10px;
  border: 1.5px solid var(--sd-border);
}
.sd-gallery-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease;
}
.sd-gallery-item:hover .sd-gallery-img-wrap img { transform: scale(1.04); }
.sd-gallery-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f0f8f0, #e4f2e4); flex-direction: column; gap: 6px;
}
.sd-gallery-placeholder i { font-size: 28px; color: #b4d4b4; }
.sd-gallery-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(20,50,20,.72), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.sd-gallery-item:hover .sd-gallery-overlay { opacity: 1; }
.sd-gallery-caption {
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.5); display: block;
}

/* ── Animations ── */
@keyframes sdFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-supplierdetail .sd-hero-inner { animation: sdFadeUp .4s ease both; }
.page-supplierdetail .sd-section    { animation: sdFadeUp .4s .1s ease both; }
.page-supplierdetail .sd-sidebar    { animation: sdFadeUp .4s .14s ease both; }

/* ── Responsive — SUPPLIER DETAIL ── */
@media (max-width: 960px) {
  .sd-layout { grid-template-columns: 1fr 230px; }
  .sd-gal-10 { grid-template-columns: repeat(3, 1fr); }
  .sd-gal-7  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .sd-layout { grid-template-columns: 1fr; }
  .sd-sidebar { order: -1; }
  .sd-info-grid { grid-template-columns: 1fr; }
  .sd-gal-10 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .sd-body { padding: 16px 16px 60px; }
  .sd-hero-inner { padding: 0 16px; }
  .sd-info-row { grid-template-columns: 1fr; gap: 4px; }
  .sd-info-label { font-size: 12px; }
  .sd-prod-items { gap: 5px; }
  .sd-prod-item { font-size: 12.5px; padding: 5px 10px; }
  .sd-map-cta { flex-wrap: wrap; }
  .sd-gal-1 .sd-gallery-img-wrap { min-height: 200px; }
  .sd-gal-2 .sd-gallery-img-wrap { min-height: 140px; }
  .sd-gal-3,.sd-gal-4,.sd-gal-5,.sd-gal-7,.sd-gal-10 { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
  .sd-gal-3 .sd-gallery-img-wrap,
  .sd-gal-4 .sd-gallery-img-wrap,
  .sd-gal-5 .sd-gallery-img-wrap,
  .sd-gal-7 .sd-gallery-img-wrap,
  .sd-gal-10 .sd-gallery-img-wrap { min-height: 120px; }
  .sd-gallery-featured { grid-column: span 2 !important; grid-row: span 1 !important; }
  .sd-gallery-featured .sd-gallery-img-wrap { min-height: 180px !important; }
}

/* ── Gallery Empty Placeholder ── */
.sd-gallery-empty {
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sd-gallery-empty-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  max-width: 560px;
}
.sd-ge-main {
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef8ee, #e2f2e2);
  border: 2px dashed #c4dcc4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-ge-main i { font-size: 44px; color: #c4d8c4; }
.sd-ge-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sd-ge-small {
  aspect-ratio: 1/1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f2fbf2, #eaf5ea);
  border: 1.5px dashed #c8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-ge-small i { font-size: 20px; color: #ccdccc; }
.sd-gallery-empty-txt {
  text-align: center;
}
.sd-gallery-empty-txt p {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}
.sd-gallery-empty-txt span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   SEARCH BAR — clear button, actions, filter tags
   (ใช้กับ icons-smpprojects.asp และ icons-supplierlist.asp)
══════════════════════════════════════════════════════════ */
.dsb-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.btn-clear{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;background:transparent;
  color:var(--muted);border:1.5px solid #d0e8d0;
  border-radius:10px;font-size:13.5px;font-weight:600;
  font-family:'Sarabun',sans-serif;cursor:pointer;
  line-height:1.4;text-decoration:none;white-space:nowrap;
  transition:all .2s
}
.btn-clear:hover{background:#fff4f4;color:#c0392b;border-color:#f5c6c6}
.dsb-active-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;
  border-top:1px solid #edf5ed;line-height:1
}
.dsb-filter-label{
  font-size:12px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  flex-shrink:0;line-height:1.4
}
.dsb-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 12px;
  background:rgba(92,184,92,.1);color:var(--steel);
  border:1px solid rgba(92,184,92,.3);border-radius:20px;
  font-size:12.5px;font-weight:600;line-height:1.4;
  text-decoration:none;transition:all .2s;white-space:nowrap
}
.dsb-tag:hover{background:rgba(192,57,43,.08);color:#c0392b;border-color:rgba(192,57,43,.3)}
.dsb-tag-x{
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:14px;font-weight:400;
  line-height:1;width:14px;height:14px;flex-shrink:0
}

/* ══════════════════════════════════════════════════════════
   PAGE: icons-smpprojects.asp — Sample Projects
   โทนสว่าง, light background
══════════════════════════════════════════════════════════ */

/* ── Hero light variant ── */
.page-smpprojects .page-hero{
  background:linear-gradient(135deg,#f0f8f0 0%,#e4f2e4 50%,#d8ecd8 100%);
  border-bottom:3px solid #c8e0c8;padding:44px 0 52px
}
.page-smpprojects .ph-blob-l{background:radial-gradient(circle,rgba(42,110,42,.06),transparent 70%)}
.page-smpprojects .ph-blob-r{background:radial-gradient(circle,rgba(42,110,42,.05),transparent 70%)}
.page-smpprojects .ph-badge{
  background:rgba(42,110,42,.1);border-color:rgba(42,110,42,.25);color:var(--steel)
}
.page-smpprojects .ph-inner h1{color:var(--navy)}
.page-smpprojects .ph-inner h1 em{color:var(--steel)}
.page-smpprojects .ph-inner p{color:#4a6a4a}

/* ── Stat strip light ── */
.page-smpprojects .stat-strip{
  background:#fff;border-top:1px solid #d8ecd8;border-bottom:2px solid #c8e0c8
}
.page-smpprojects .stat-n{color:var(--navy)}
.page-smpprojects .stat-l{color:var(--muted)}
.page-smpprojects .stat-item{border-right-color:#e0ece0}

/* ── Layout ── */
.smp-layout{display:grid;grid-template-columns:1fr 272px;gap:24px;align-items:start}

/* ── Result header ── */
.smp-result-hdr{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid #e0eee0;flex-wrap:wrap;gap:8px
}
.smp-count{font-size:13.5px;color:var(--muted)}
.smp-count strong{color:var(--navy)}
.smp-sort-wrap select{
  padding:7px 12px;border:1.5px solid #d0e8d0;border-radius:8px;
  font-size:13px;font-family:'Sarabun',sans-serif;
  background:#fff;color:var(--navy);cursor:pointer;outline:none
}

/* ── Project card list ── */
.smp-card-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.smp-card{
  background:#fff;border-radius:var(--r);
  border:1.5px solid #e0eee0;
  padding:16px 20px;
  display:grid;
  grid-template-columns:1fr 130px auto;
  gap:12px 20px;
  align-items:center;
  transition:all .22s;
  position:relative;overflow:hidden
}
.smp-card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 18px rgba(92,184,92,.12);
  transform:translateX(2px)
}
/* blur rows */
.smp-card-blur{background:#fafdf9;border-color:#e8f5e8}
.smp-card-blur .smp-card-btn-lock{pointer-events:all}
.smp-blur-text{
  display:inline-block;filter:blur(5px);
  user-select:none;color:transparent;
  background:linear-gradient(90deg,#c8e0c8,#a8c8a8);
  border-radius:4px
}
.smp-card-lock{
  position:absolute;top:10px;right:14px;
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:12px;
  background:rgba(192,57,43,.1);color:#c0392b;
  border:1px solid rgba(192,57,43,.2);
  font-size:10.5px;font-weight:700;letter-spacing:.04em
}
/* main content */
.smp-card-main{min-width:0}
.smp-card-title{margin-bottom:6px}
.smp-card-title a{
  font-size:14.5px;font-weight:700;color:var(--navy);
  text-decoration:none;line-height:1.45;
  transition:color .2s;display:block
}
.smp-card-title a:hover{color:var(--steel)}
.smp-card-meta{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:#5a7a5a;margin-bottom:8px;flex-wrap:wrap
}
.smp-meta-item{display:flex;align-items:center;gap:3px}
.smp-meta-item i{color:var(--steel);font-size:11.5px}
.smp-meta-sep{color:#c8d8c8;font-size:10px}
.smp-card-tags{display:flex;gap:5px;flex-wrap:wrap}
.smp-cat-tag{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11.5px;font-weight:600;
  background:rgba(92,184,92,.1);color:var(--steel);
  border:1px solid rgba(92,184,92,.28)
}
.smp-stage-tag{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11.5px;font-weight:600;
  background:rgba(255,180,0,.12);color:#8a5c00;
  border:1px solid rgba(255,180,0,.35)
}
.smp-type-tag{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11.5px;font-weight:600;
  background:rgba(52,152,219,.1);color:#1a6a9a;
  border:1px solid rgba(52,152,219,.25)
}
/* value column */
.smp-card-value{text-align:right;white-space:nowrap;flex-shrink:0}
.smp-value-num{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:700;
  color:var(--navy);line-height:1.1
}
.smp-value-unit{display:block;font-size:11px;color:var(--muted);margin-top:1px}
/* detail button */
.smp-card-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;background:var(--light);
  color:var(--steel);border:1.5px solid #c8e0c8;
  border-radius:9px;font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:all .2s
}
.smp-card-btn:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
.smp-card-btn-lock{
  background:linear-gradient(135deg,var(--steel),var(--navy));
  color:#fff;border-color:transparent
}
.smp-card-btn-lock:hover{background:var(--navy);color:#fff;border-color:transparent}

/* ── Empty state ── */
.smp-empty{
  text-align:center;padding:56px 24px;
  background:#fff;border-radius:var(--r);border:1.5px dashed #d0e8d0
}
.smp-empty i{font-size:2.8em;color:var(--accent);opacity:.35;display:block;margin-bottom:14px}
.smp-empty strong{display:block;font-size:16px;color:var(--navy);margin-bottom:6px}
.smp-empty span{font-size:13.5px;color:var(--muted)}

/* ── Members-only banner ── */
.smp-mem-banner{
  background:linear-gradient(135deg,#fff8e1,#fff3cd);
  border:1.5px solid #ffe082;border-radius:var(--r);
  padding:20px 24px;margin-bottom:20px;
  display:flex;align-items:flex-start;gap:14px
}
.smp-mem-banner-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#f39c12,#e67e22);
  display:flex;align-items:center;justify-content:center
}
.smp-mem-banner-icon i{font-size:1.4em;color:#fff}
.smp-mem-banner-body h4{
  font-size:14.5px;font-weight:700;color:#7a4f00;
  margin-bottom:4px;display:flex;align-items:center;gap:8px
}
.smp-mem-banner-body p{font-size:13px;color:#8a6020;line-height:1.7;margin:0}
.smp-mem-lock{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:12px;
  background:rgba(243,156,18,.15);color:#e67e22;
  border:1px solid rgba(243,156,18,.35);
  font-size:11px;font-weight:700;letter-spacing:.04em
}

/* ── Sidebar CTA ── */
.smp-cta-trial{
  background:linear-gradient(145deg,var(--navy) 0%,#1a4a1a 100%);
  border-radius:var(--r);padding:22px;border:none;
  position:relative;overflow:hidden
}
.smp-cta-trial::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,184,92,.15),transparent 70%);
  pointer-events:none
}
.smp-cta-trial h4{
  font-family:'Barlow Condensed',sans-serif;font-size:22px;
  font-weight:700;color:#fff;margin-bottom:8px;line-height:1.2
}
.smp-cta-trial p{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:14px}
.btn-cta-trial{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;background:var(--accent);color:var(--navy);
  border-radius:9px;font-size:13.5px;font-weight:700;
  text-decoration:none;transition:all .2s
}
.btn-cta-trial:hover{background:var(--accent2);transform:translateY(-1px)}
.smp-cta-sub{background:#fff;border:1.5px solid #c8e0c8;border-radius:var(--r);padding:20px}
.smp-cta-sub h4{
  font-size:15px;font-weight:700;color:var(--navy);
  margin-bottom:6px;display:flex;align-items:center;gap:7px
}
.smp-cta-sub h4 i{color:var(--steel)}
.smp-cta-sub p{font-size:12.5px;color:#5a7a5a;line-height:1.7;margin-bottom:12px}
.btn-cta-sub{
  display:block;text-align:center;padding:9px 16px;
  background:var(--light);color:var(--steel);
  border:1.5px solid #c8e0c8;border-radius:9px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  transition:all .2s
}
.btn-cta-sub:hover{background:var(--steel);color:#fff;border-color:var(--steel)}

/* ── Responsive ── */
@media(max-width:960px){
  .smp-layout{grid-template-columns:1fr}
  .smp-card{grid-template-columns:1fr auto}
  .smp-card-value{grid-row:1;grid-column:2;text-align:right}
  .smp-card-btn{grid-column:1/-1;justify-content:center}
}
@media(max-width:600px){
  .smp-card{grid-template-columns:1fr;gap:10px}
  .smp-card-value{text-align:left}
  .smp-value-num{font-size:20px}
  .smp-card-lock{position:static;margin-bottom:4px;display:inline-flex}
}


/* ══════════════════════════════════════
   PAGE: icons-mobileapp.asp
══════════════════════════════════════ */

/* ── App Hero Buttons ── */
.app-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.app-store-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 22px;border-radius:12px;
  font-family:'Sarabun',sans-serif;
  text-decoration:none;transition:all .22s;
  border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;
  backdrop-filter:blur(6px)
}
.app-store-btn span{display:flex;flex-direction:column;text-align:left}
.app-store-btn small{font-size:10px;opacity:.75;font-weight:400;line-height:1.2}
.app-store-btn span > :last-child{font-size:15px;font-weight:700;line-height:1.2}
.app-store-btn--android{border-color:rgba(61,220,132,.4);background:rgba(61,220,132,.12)}
.app-store-btn--android:hover{background:rgba(61,220,132,.25);border-color:rgba(61,220,132,.7);transform:translateY(-2px)}
.app-store-btn--ios{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.app-store-btn--ios:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.app-req-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.app-req-row span{font-size:12.5px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px}
.app-req-row .icofont-check-circled{color:var(--accent)}

/* ── Section header ── */
.app-section{margin-bottom:56px}
.app-section-hdr{text-align:center;margin-bottom:32px}
.app-section-hdr h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,4vw,38px);font-weight:700;
  color:var(--navy);position:relative;display:inline-block
}
.app-section-hdr h2::after{
  content:'';display:block;width:48px;height:3px;
  background:var(--accent);border-radius:2px;
  margin:8px auto 0
}

/* ── Feature Grid ── */
.app-feat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.app-feat-card{
  background:#fff;border-radius:var(--r);
  padding:28px 24px;border:1.5px solid #e0eee0;
  transition:all .22s;position:relative;overflow:hidden
}
.app-feat-card:hover{border-color:var(--accent);box-shadow:0 8px 28px rgba(92,184,92,.13);transform:translateY(-3px)}
.app-feat-card--member{border-color:#ffe082;background:linear-gradient(145deg,#fffde7,#fff8e1)}
.app-feat-card--member:hover{border-color:#f9a825;box-shadow:0 8px 28px rgba(249,168,37,.15)}
.app-feat-card-mem-badge{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:12px;
  background:rgba(249,168,37,.15);color:#e65100;
  border:1px solid rgba(249,168,37,.4);
  font-size:10.5px;font-weight:700;letter-spacing:.04em
}
.app-feat-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px
}
.app-feat-icon .icofont{font-size:1.6em;color:#fff}
.app-feat-icon--green{background:linear-gradient(135deg,#5CB85C,#3a8a3a)}
.app-feat-icon--blue{background:linear-gradient(135deg,#3498db,#1a6a9a)}
.app-feat-icon--teal{background:linear-gradient(135deg,#1abc9c,#0e8a72)}
.app-feat-icon--orange{background:linear-gradient(135deg,#f39c12,#c77a00)}
.app-feat-icon--gold{background:linear-gradient(135deg,#f9a825,#e65100)}
.app-feat-icon--red{background:linear-gradient(135deg,#e74c3c,#a93226)}
.app-feat-card h3{
  font-size:15.5px;font-weight:700;color:var(--navy);
  margin-bottom:8px;line-height:1.4
}
.app-feat-card p{font-size:13.5px;color:#5a7a5a;line-height:1.8;margin:0}

/* ── Member Section ── */
.app-mem-section{
  background:linear-gradient(135deg,#1c3a5e 0%,#0f2a45 55%,#1a3a4a 100%);
  border-radius:20px;padding:52px 48px;margin-bottom:56px;
  position:relative;overflow:hidden
}
.app-mem-section::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,152,219,.15),transparent 70%);
  pointer-events:none
}
.app-mem-inner{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:center}
.app-mem-text h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3.5vw,38px);font-weight:700;
  color:#fff;margin-bottom:12px;line-height:1.15
}
.app-mem-sub{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.8;margin-bottom:28px}
.app-mem-feat{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}
.app-mem-feat-item{display:flex;gap:16px;align-items:flex-start}
.app-mem-feat-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(52,152,219,.45);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center
}
.app-mem-feat-icon i{font-size:1.35em;color:#fff !important}
.app-mem-feat-body h4{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:5px}
.app-mem-feat-body p{font-size:13px;color:rgba(255,255,255,.68);line-height:1.75;margin:0}

/* ── Phone Frame (real screenshot) ── */
.app-mem-visual{display:flex;justify-content:center;align-items:center}
.app-phone-frame{
  width:240px;
  background:#111;
  border-radius:44px;
  padding:12px 10px 14px;
  border:3px solid #333;
  box-shadow:
    0 0 0 1px #555,
    0 32px 64px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08);
  position:relative
}
.app-phone-notch{
  width:80px;height:24px;
  background:#111;border-radius:0 0 16px 16px;
  margin:0 auto 4px;
  position:relative;z-index:2
}
.app-phone-notch::before{
  content:'';
  width:10px;height:10px;border-radius:50%;
  background:#222;border:1.5px solid #444;
  position:absolute;top:6px;left:50%;transform:translateX(-50%)
}
.app-phone-screen-real{
  border-radius:32px;overflow:hidden;
  background:#000;line-height:0
}
.app-phone-screen-real img{
  width:100%;height:auto;display:block;
  border-radius:32px
}
.app-phone-btn-side{
  position:absolute;background:#333;border-radius:3px
}
.app-phone-btn-vol{
  width:4px;height:52px;
  left:-6px;top:90px
}
.app-phone-btn-pwr{
  width:4px;height:36px;
  right:-6px;top:110px
}

/* ── Download Section ── */
.app-dl-section{
  background:var(--bgh);border-radius:20px;
  padding:48px 48px;border:1px solid #d0e8d0
}
.app-dl-inner{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.app-dl-text h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(24px,3.5vw,36px);font-weight:700;
  color:var(--navy);margin-bottom:10px
}
.app-dl-text p{font-size:14.5px;color:#5a7a5a;line-height:1.75;margin-bottom:24px}
.app-dl-btns{display:flex;flex-direction:column;gap:12px}
.app-store-btn--lg{padding:14px 26px}
.app-store-btn--lg span > :last-child{font-size:16px}
.app-store-btn--android.app-store-btn--lg{
  background:linear-gradient(135deg,#3ddc84,#1a7a4a);
  color:#fff;border-color:transparent
}
.app-store-btn--android.app-store-btn--lg:hover{
  background:linear-gradient(135deg,#2ecc71,#1a6a3a);
  transform:translateX(4px)
}
.app-store-btn--ios.app-store-btn--lg{
  background:linear-gradient(135deg,#1a1a1a,#3a3a3a);
  color:#fff;border-color:transparent
}
.app-store-btn--ios.app-store-btn--lg:hover{
  background:linear-gradient(135deg,#333,#555);
  transform:translateX(4px)
}
.app-dl-qr{display:flex;gap:20px}
.app-qr-box{
  background:#fff;border-radius:14px;
  padding:16px;border:1.5px solid #d0e8d0;
  text-align:center;min-width:140px
}
.app-qr-img{
  width:120px;height:120px;
  margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center
}
.app-qr-img img{width:100%;height:100%;object-fit:contain;display:block}
.app-qr-label{
  font-size:11px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-weight:600;margin:0
}

/* ── Responsive: icons-mobileapp.asp ── */
@media(max-width:960px){
  .app-feat-grid{grid-template-columns:repeat(2,1fr)}
  .app-mem-inner{grid-template-columns:1fr;gap:32px}
  .app-mem-visual{display:none}
  .app-mem-section{padding:36px 28px}
  .app-dl-inner{grid-template-columns:1fr}
  .app-dl-qr{justify-content:flex-start}
  .app-dl-section{padding:32px 28px}
}
@media(max-width:600px){
  .app-feat-grid{grid-template-columns:1fr}
  .app-hero-btns{flex-direction:column;align-items:center}
  .app-store-btn{width:220px;justify-content:center}
  .app-dl-btns{align-items:flex-start}
  .app-dl-qr{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════
   icons-sr-quotation.asp & icons-quotation.asp — Shared
   Quotation / Print page styles
══════════════════════════════════════════════════════════ */

/* ── Screen bar ── */
.q-screen-bar{background:#0F5D36;color:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.q-screen-bar-left{display:flex;align-items:center;gap:14px}
.q-btn-back{display:inline-flex;align-items:center;gap:7px;color:#7DD3A2;text-decoration:none;font-size:13px;transition:color .2s}
.q-btn-back:hover{color:#fff}
.q-bar-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px}
.q-btn-print{display:inline-flex;align-items:center;gap:8px;background:#39B86C;color:#fff;border:none;border-radius:8px;padding:9px 20px;font-family:'Sarabun',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.q-btn-print:hover{background:#2DA15C}

/* ── Paper layout ── */
.q-paper-wrap{max-width:900px;margin:32px auto 64px;padding:0 16px}
.q-paper{background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);overflow:hidden}

/* ── Header ── */
.q-header{display:flex;align-items:flex-start;justify-content:space-between;padding:36px 48px 28px;border-bottom:3px solid #39B86C;gap:24px;flex-wrap:wrap}
.q-logo img{height:62px;width:auto;display:block}
.q-header-right{text-align:right}
.q-doc-title{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;color:#0F5D36;letter-spacing:1px;line-height:1}
.q-doc-no{margin-top:8px;font-size:13px;color:#666}
.q-doc-no strong{color:#0F5D36}
.q-doc-date{font-size:13px;color:#666;margin-top:3px}
.q-doc-date strong{color:#0F5D36}
.q-valid-badge{margin-top:10px;display:inline-block;background:#FEF3C7;border:1px solid #F59E0B;color:#92400E;border-radius:20px;padding:3px 12px;font-size:11px;font-weight:600}

/* ── Company bar ── */
.q-cobar{background:#F0FAF3;padding:14px 48px;font-size:12px;color:#666;line-height:1.9;border-bottom:1px solid #DDF5E7}
.q-cobar strong{color:#0F5D36}

/* ── Body ── */
.q-body{padding:32px 48px}
.q-sec{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#39B86C;margin-bottom:14px;padding-bottom:6px;border-bottom:1.5px solid #DDF5E7}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;margin-bottom:18px}
.q-field{display:flex;flex-direction:column;gap:3px}
.q-field.span2{grid-column:1/-1}
.q-field label{font-size:10px;color:#999;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.q-val{font-size:14px;color:#0F5D36;font-weight:500;min-height:22px;border-bottom:1px dashed #DDF5E7;padding-bottom:4px}
.q-val.empty{color:#ccc}

/* ── Tax ID row ── */
.q-taxid-row{display:flex;align-items:flex-end;gap:24px;margin-bottom:18px;flex-wrap:wrap}
.q-taxid-row .q-field{flex:1;min-width:180px}
.q-branch-opts{display:flex;gap:16px;align-items:center;padding-bottom:8px;font-size:13px}
.q-branch-opts input[type=radio]{accent-color:#39B86C}
.q-branch-input{border:none;border-bottom:1px dashed #DDF5E7;outline:none;font-family:'Sarabun',sans-serif;font-size:13px;color:#0F5D36;width:140px;padding-bottom:3px;background:transparent}

/* ── Items table ── */
.q-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:13px}
.q-table thead tr{background:#0F5D36;color:#fff}
.q-table thead th{padding:11px 14px;text-align:left;font-weight:600;font-size:12px;letter-spacing:.4px}
.q-table thead th.tc{text-align:center}
.q-table thead th.tr{text-align:right}
.q-table tbody td{padding:14px;border-bottom:1px solid #F0FAF3;vertical-align:top}
.q-table tbody tr:nth-child(even){background:#F9FAFB}
.q-td-no{text-align:center;color:#888;font-size:12px}
.q-td-price{text-align:right;font-weight:700;font-size:15px;color:#0F5D36;white-space:nowrap}

/* ── Item detail ── */
.q-item-badge{font-size:10px;background:#DDF5E7;color:#39B86C;border-radius:4px;padding:2px 8px;font-weight:700;display:inline-block;margin-bottom:6px}
.q-item-name{font-weight:600;color:#0F5D36;font-size:14px;margin-bottom:8px}
.q-item-option{font-size:12px;color:#444;font-style:italic;margin-bottom:6px;padding:4px 8px;background:#F0FAF3;border-left:3px solid #39B86C;border-radius:0 4px 4px 0}
.q-feat-list{list-style:none;padding:0;margin:0}
.q-feat-list li{font-size:12px;color:#666;padding:2px 0;display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.q-feat-list li::before{content:"\2713";color:#39B86C;font-weight:700;font-size:11px;flex-shrink:0;margin-top:1px}

/* ── Totals ── */
.q-totals{display:flex;justify-content:flex-end;margin-bottom:36px}
.q-totals-box{width:310px}
.q-trow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #F0FAF3;font-size:13px}
.q-trow label{color:#666}
.q-trow .q-amt{font-weight:600;color:#0F5D36}
.q-trow.q-red label{color:#c0392b}
.q-trow.q-red .q-amt{color:#c0392b}
.q-trow.q-grand{border-top:2px solid #0F5D36;border-bottom:2px solid #0F5D36;margin-top:4px;padding:10px 0}
.q-trow.q-grand label{font-size:14px;font-weight:700;color:#0F5D36}
.q-trow.q-grand .q-amt{font-size:19px;font-weight:700;color:#39B86C}

/* ── Payment box ── */
.q-payment{background:#F0FAF3;border:1px solid #7DD3A2;border-radius:10px;padding:18px 22px;margin-bottom:30px}
.q-payment .q-sec{color:#39B86C;border-color:#7DD3A2}
.q-pay-list{list-style:none;padding:0;margin:0}
.q-pay-list li{font-size:13px;color:#333;padding:4px 0;display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.q-pay-list li::before{content:"\25B8";color:#39B86C;font-size:11px;margin-top:2px;flex-shrink:0}

/* ── Conditions ── */
.q-cond{margin-bottom:36px}
.q-cond ol{padding-left:18px;margin:0}
.q-cond ol li{font-size:12px;color:#666;line-height:1.8;margin-bottom:3px}

/* ── Signature ── */
.q-sig-wrap{display:flex;justify-content:flex-end;margin-bottom:16px}
.q-sig-box{width:260px;text-align:center}
.q-sig-line{border-top:1.5px solid #0F5D36;margin:56px 0 8px}
.q-sig-label{font-size:12px;color:#666}

/* ── Footer ── */
.q-footer{background:#0F5D36;color:#7DD3A2;text-align:center;padding:18px 48px;font-size:12px;line-height:1.9}
.q-footer strong{color:#fff}

/* ── Editable inputs (screen only) ── */
.q-input-text{width:100%;border:none;border-bottom:1px dashed #DDF5E7;outline:none;font-family:'Sarabun',sans-serif;font-size:14px;color:#0F5D36;font-weight:500;padding:0 0 4px;background:transparent}
.q-input-text:focus{border-bottom-color:#39B86C;border-bottom-style:solid}
.q-input-area{width:100%;border:none;border-bottom:1px dashed #DDF5E7;outline:none;font-family:'Sarabun',sans-serif;font-size:14px;color:#0F5D36;font-weight:500;padding:4px 0;background:transparent;resize:none;line-height:1.6}
.q-input-area:focus{border-bottom-color:#39B86C;border-bottom-style:solid}

/* ── Print ── */
@media print{
  body{background:#fff;font-size:13px}
  .q-screen-bar{display:none!important}
  .q-input-text,.q-input-area{border-bottom-style:dashed!important}
  .q-input-text::placeholder,.q-input-area::placeholder{color:transparent}
  .q-paper-wrap{margin:0;padding:0;max-width:100%}
  .q-paper{border-radius:0;box-shadow:none}
  .q-header{padding:20px 36px 18px}
  .q-cobar{padding:12px 36px}
  .q-body{padding:18px 36px}
  .q-footer{padding:14px 36px}
  .q-payment{break-inside:avoid}
  .q-sig-wrap{break-inside:avoid}
  @page{margin:8mm;size:A4}
}

/* ── icons-quotation.asp extras (annual discount rows & item note) ── */
.q-trow.q-muted{border-bottom:1px solid #F0FAF3}
.q-trow.q-muted label{color:#aaa;font-size:12px}
.q-trow.q-muted .q-amt-muted{color:#aaa;font-size:12px}
.q-trow.q-disc label{color:#39B86C;font-weight:600}
.q-trow.q-disc .q-amt-disc{color:#39B86C;font-weight:700}
.q-item-note{margin-top:9px;font-size:12px;color:#888;font-style:italic}

/* ══════════════════════════════════════════════════════
   NEED MATERIAL DETAIL — icons-needmatdetail.asp
   Palette: light tone / green-tinted whites
══════════════════════════════════════════════════════ */

/* ── Hero ── */
.nmd-hero{background:linear-gradient(135deg,var(--navy) 0%,#0d1f0d 55%,#1a4a1a 100%);padding:52px 0 64px;position:relative;overflow:hidden;text-align:center}
.nmd-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235CB85C' fill-opacity='.05'%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/svg%3E")}

/* ── Breadcrumb ── */
.nmd-breadcrumb-wrap{background:#f0f9f0;border-bottom:1px solid #daeeda}
.nmd-breadcrumb-inner{max-width:1280px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:wrap}
.nmd-breadcrumb-inner a{color:var(--steel);text-decoration:none;transition:color .18s}
.nmd-breadcrumb-inner a:hover{color:var(--navy)}
.bc-sep{color:#b0ccb0;font-size:10px}
.bc-current{color:var(--navy);font-weight:600}

/* ── Page background ── */
.page-needmatdetail .page-bg{background:#f4fbf4;padding:32px 0 70px}

/* ── Layout: main + sidebar ── */
.nmd-layout{max-width:1280px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}

/* ── Detail Card ── */
.nmd-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:1px solid #daeeda;overflow:hidden}

/* ── Card Header ── */
.nmd-card-hdr{background:linear-gradient(135deg,#f0fdf0,#e6f7e6);padding:20px 26px;border-bottom:1px solid #daeeda;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ── Type badge ── */
.nmd-type-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:20px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.nmd-type-badge.type-material{background:#e8f5e9;color:#2e7d32;border:1.5px solid #a5d6a7}
.nmd-type-badge.type-contractor{background:#e3f2fd;color:#1565c0;border:1.5px solid #90caf9}

/* ── Meta info ── */
.nmd-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.nmd-meta-item{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#4a6a4a}
.nmd-meta-item i{color:var(--steel);font-size:13px}
.nmd-id{color:#888;font-size:12px}

/* ── Card Body ── */
.nmd-card-body{padding:28px 28px 22px}

/* ── รูปภาพ ── */
.nmd-img-wrap{margin-bottom:24px;border-radius:10px;overflow:hidden;border:1px solid #daeeda;background:#f7fdf7;text-align:center}
.nmd-img{max-width:100%;max-height:420px;object-fit:contain;display:block;margin:0 auto}

/* ── Detail section ── */
.nmd-detail-section{margin-bottom:24px}
.nmd-detail-h{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #e8f5e8}
.nmd-detail-h i{color:var(--steel)}
.nmd-detail-text{font-size:14.5px;color:#2a4a2a;line-height:1.9;background:#f8fdf8;border:1px solid #e0efe0;border-radius:10px;padding:18px 22px;white-space:pre-line}

/* ── Info chips ── */
.nmd-info-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.nmd-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:#f2fbf2;border:1px solid #d4ead4;border-radius:20px;font-size:13px;color:#3a5a3a}
.nmd-chip i{color:var(--steel);font-size:13px}
.nmd-chip strong{color:var(--navy)}
.nmd-chip.type-material{background:#e8f5e9;border-color:#a5d6a7;color:#2e7d32}
.nmd-chip.type-contractor{background:#e3f2fd;border-color:#90caf9;color:#1565c0}

/* ── Card Footer ── */
.nmd-card-footer{padding:18px 28px;background:#f8fdf8;border-top:1px solid #e6f0e6;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-nmd-back{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:#fff;border:1.5px solid #c8ddc8;border-radius:9px;color:var(--navy);font-size:13.5px;font-weight:600;font-family:'Sarabun',sans-serif;text-decoration:none;transition:all .2s}
.btn-nmd-back:hover{background:#eaf5ea;border-color:var(--steel);color:var(--steel)}
.btn-nmd-contact{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;background:linear-gradient(135deg,var(--steel),var(--accent));color:#fff;border:none;border-radius:9px;font-size:13.5px;font-weight:600;font-family:'Sarabun',sans-serif;text-decoration:none;transition:all .2s}
.btn-nmd-contact:hover{opacity:.88;transform:translateY(-1px)}

/* ── Empty state ── */
.nmd-empty{background:#fff;border-radius:var(--r);border:1px solid #e0eee0;padding:60px 30px;text-align:center;box-shadow:var(--sh)}
.nmd-empty i{font-size:3em;color:#c0d8c0;margin-bottom:16px;display:block}
.nmd-empty h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:8px}
.nmd-empty p{font-size:14px;color:var(--muted);margin-bottom:22px}

/* ── Sidebar: CTA ลงประกาศฟรี ── */
.nmd-cta-post{background:linear-gradient(145deg,#e8f7e8,#f0fbf0);border:1.5px solid #b8ddb8}
.nmd-cta-badge{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.nmd-cta-badge i{color:var(--steel);font-size:1.1em}
.nmd-cta-badge span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);background:rgba(92,184,92,.12);padding:3px 10px;border-radius:10px}
.nmd-cta-h{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:10px}
.nmd-cta-h-em { color: var(--steel); font-style: normal; }
.nmd-cta-p{font-size:13px;color:#4a6a4a;line-height:1.75;margin-bottom:13px}
.nmd-cta-list{list-style:none;padding:0;margin:0 0 16px}
.nmd-cta-list li{font-size:12.5px;color:#3a5a3a;padding:4px 0;display:flex;align-items:flex-start;gap:8px;line-height:1.6}
.nmd-cta-list li i{color:var(--steel);font-size:12px;margin-top:2px;flex-shrink:0}
.btn-nmd-post{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;background:linear-gradient(135deg,var(--navy),var(--steel));color:#fff;border-radius:9px;font-size:13.5px;font-weight:600;font-family:'Sarabun',sans-serif;text-decoration:none;transition:all .2s}
.btn-nmd-post:hover{opacity:.88;transform:translateY(-1px)}

/* ── Animation ── */
@keyframes nmdFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-needmatdetail .nmd-hero .ph-inner{animation:nmdFadeUp .4s ease both}
.page-needmatdetail .nmd-card{animation:nmdFadeUp .4s .06s ease both}
.page-needmatdetail .dir-sidebar{animation:nmdFadeUp .4s .1s ease both}

/* ── Responsive ── */
@media (max-width:1024px){.nmd-layout{grid-template-columns:1fr 260px}}
@media (max-width:800px){
  .nmd-layout{grid-template-columns:1fr;padding:0 16px}
  .nmd-card-hdr{flex-direction:column;align-items:flex-start;gap:10px}
  .nmd-meta{margin-left:0}
  .nmd-card-body{padding:20px 18px 16px}
  .nmd-card-footer{padding:14px 18px}
}
@media (max-width:480px){
  .nmd-detail-text{padding:14px 16px}
  .nmd-info-chips{gap:7px}
}

/* ══════════════════════════════════════════════════════
   SEND NEED FORM — icons-sendneed.asp
   Palette: light green tone  #f4fbf4 / white / navy
══════════════════════════════════════════════════════ */

/* ── Layout ── */
.snd-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}

/* ── Form Card ── */
.snd-form-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);border:1px solid #daeeda;overflow:hidden}
.snd-form-hdr{background:linear-gradient(135deg,var(--navy) 0%,#1a4a1a 100%);padding:22px 28px;display:flex;align-items:center;gap:16px}
.snd-form-hdr i{font-size:2em;color:var(--accent);flex-shrink:0}
.snd-form-hdr h2{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:4px}
.snd-form-hdr p{font-size:13px;color:rgba(255,255,255,.65);margin:0}

/* ── Error alert ── */
.snd-alert-err{background:#fff3f3;border:1.5px solid #e57373;border-radius:10px;padding:12px 16px;margin:18px 28px 0;font-size:13.5px;color:#c62828;display:flex;align-items:center;gap:8px}
.snd-alert-err i{flex-shrink:0;font-size:1.1em}

/* ── Form inner padding ── */
.snd-form-card form{padding:24px 28px 28px}

/* ── Section title with step number ── */
.snd-section-title{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin:22px 0 12px;letter-spacing:.03em}
.snd-section-title:first-child{margin-top:0}
.snd-step{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--steel);color:#fff;font-size:13px;font-weight:700;flex-shrink:0}

/* ── Form groups (reuse .fg / .fg-row from icons-pages.css) ── */
.req{color:#e53935;font-size:12px}
.snd-textarea{width:100%;min-height:120px;resize:vertical;padding:12px 14px;border:1.5px solid #d0e8d0;border-radius:10px;font-family:'Sarabun',sans-serif;font-size:14px;color:var(--navy);line-height:1.7;background:var(--light);outline:none;transition:border-color .2s;box-sizing:border-box}
.snd-textarea:focus{border-color:var(--accent)}
.snd-char-count{font-size:11.5px;color:var(--muted);text-align:right;display:block;margin-top:4px}

/* ── Type cards (4 grid) ── */
.snd-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:4px}
.snd-type-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;background:#f8fdf8;border:2px solid #d4ead4;border-radius:12px;cursor:pointer;transition:all .18s;text-align:center}
.snd-type-card input[type="radio"]{display:none}
.snd-type-card i{font-size:1.7em;color:var(--steel);transition:color .18s}
.snd-type-card span{font-size:12.5px;color:var(--navy);font-weight:600;line-height:1.3}
.snd-type-card:hover{border-color:var(--steel);background:#f0fbf0}
.snd-type-card.active{border-color:var(--steel);background:linear-gradient(135deg,#eaf7ea,#f0fbf0);box-shadow:0 2px 10px rgba(58,125,58,.15)}
.snd-type-card.active i{color:var(--navy)}

/* ── Priority cards (3x2 grid) ── */
.snd-priority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.snd-priority-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 8px;background:#f8fdf8;border:2px solid #d4ead4;border-radius:12px;cursor:pointer;transition:all .18s;text-align:center}
.snd-priority-card input[type="radio"]{display:none}
.snd-priority-card i{font-size:1.4em;color:var(--steel)}
.snd-pri-label{font-size:12.5px;color:var(--navy);font-weight:700;line-height:1.3}
.snd-pri-sub{font-size:11px;color:var(--muted);line-height:1.4}
.snd-priority-card:hover{border-color:var(--steel);background:#f0fbf0}
.snd-priority-card.active{border-color:var(--steel);background:linear-gradient(135deg,#eaf7ea,#f0fbf0);box-shadow:0 2px 10px rgba(58,125,58,.15)}
.snd-priority-card.active i{color:var(--navy)}

/* ── Channel group ── */
.snd-channel-group{display:flex;flex-wrap:wrap;gap:8px}
.snd-channel-opt{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:#f8fdf8;border:2px solid #d4ead4;border-radius:20px;cursor:pointer;font-size:13px;color:var(--navy);font-weight:600;transition:all .18s}
.snd-channel-opt input[type="radio"]{display:none}
.snd-channel-opt i{font-size:1em;color:var(--steel)}
.snd-channel-opt:hover{border-color:var(--steel);background:#f0fbf0}
.snd-channel-opt.active{border-color:var(--steel);background:linear-gradient(135deg,#eaf7ea,#f0fbf0)}

/* ── reCAPTCHA wrap ── */
.snd-captcha-wrap{margin:20px 0 16px;display:flex;justify-content:flex-start}

/* ── Submit button ── */
.btn-snd-submit{width:100%;padding:14px;background:linear-gradient(135deg,var(--navy),var(--steel));color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;font-family:'Sarabun',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:all .2s;letter-spacing:.02em}
.btn-snd-submit:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 4px 16px rgba(28,58,28,.2)}

/* ── Success box ── */
.snd-success{background:#fff;border:2px solid var(--accent);border-radius:var(--r);padding:48px 32px;text-align:center;box-shadow:var(--sh)}
.snd-success i{font-size:3.5em;color:var(--accent);display:block;margin-bottom:16px}
.snd-success h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--navy);margin-bottom:10px}
.snd-success p{font-size:14.5px;color:#3a5a3a;line-height:1.75;margin-bottom:24px}
.snd-success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-snd-again{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;background:linear-gradient(135deg,var(--navy),var(--steel));color:#fff;border-radius:9px;font-size:13.5px;font-weight:600;font-family:'Sarabun',sans-serif;text-decoration:none;transition:all .2s}
.btn-snd-again:hover{opacity:.88;transform:translateY(-1px)}
.btn-snd-home{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;background:#fff;border:1.5px solid #c8ddc8;border-radius:9px;color:var(--navy);font-size:13.5px;font-weight:600;font-family:'Sarabun',sans-serif;text-decoration:none;transition:all .2s}
.btn-snd-home:hover{background:#eaf5ea;border-color:var(--steel)}

/* ── Sidebar: Promo card ── */
.snd-promo-card{background:linear-gradient(145deg,#e8f7e8,#f0fbf0);border:1.5px solid #b8ddb8}
.snd-promo-badge{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.snd-promo-badge i{color:var(--steel)}
.snd-promo-badge span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);background:rgba(92,184,92,.12);padding:3px 10px;border-radius:10px}
.snd-promo-h{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px}
.snd-promo-p{font-size:13px;color:#4a6a4a;line-height:1.75;margin-bottom:12px}
.snd-promo-list{list-style:none;padding:0;margin:0}
.snd-promo-list li{font-size:12.5px;color:#3a5a3a;padding:4px 0;display:flex;align-items:flex-start;gap:8px;line-height:1.6}
.snd-promo-list li i{color:var(--steel);font-size:12px;margin-top:2px;flex-shrink:0}

/* ── Sidebar: Link cards ── */
.snd-link-card{display:flex;align-items:flex-start;gap:14px}
.snd-link-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5em;flex-shrink:0}
.snd-link-icon-mat{background:#e8f5e9;color:#2e7d32}
.snd-link-icon-sup{background:#e3f2fd;color:#1565c0}
.snd-link-body h4{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px}
.snd-link-body p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.btn-snd-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--steel);text-decoration:none;transition:color .18s}
.btn-snd-link:hover{color:var(--navy)}
.btn-snd-link i{font-size:10px}

/* ── Animation ── */
@keyframes sndFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-sendneed .snd-form-card,.page-sendneed .snd-success{animation:sndFadeUp .4s ease both}
.page-sendneed .snd-sidebar{animation:sndFadeUp .4s .08s ease both}

/* ── Responsive ── */
@media (max-width:1024px){.snd-layout{grid-template-columns:1fr 260px}}
@media (max-width:800px){
  .snd-layout{grid-template-columns:1fr}
  .snd-type-grid{grid-template-columns:repeat(2,1fr)}
  .snd-priority-grid{grid-template-columns:repeat(2,1fr)}
  .snd-form-card form{padding:18px 16px 22px}
  .snd-alert-err{margin:14px 16px 0}
}
@media (max-width:480px){
  .snd-type-grid{grid-template-columns:repeat(2,1fr)}
  .snd-priority-grid{grid-template-columns:repeat(2,1fr)}
  .snd-channel-group{gap:6px}
  .snd-success{padding:32px 20px}
}

/* ============================================================
   TEST MODE Banner — icons-otp-verify.asp
   ⚠️ Visible only when TEST_MODE = True (development)
   ============================================================ */
.otpv-test-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px dashed #d97706;
  border-radius: 10px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(217,119,6,.15);
}
.otpv-test-banner > i {
  font-size: 22px;
  color: #b45309;
  flex-shrink: 0;
}
.otpv-test-banner-text {
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.otpv-test-banner-text strong {
  font-size: 13.5px;
  color: #92400e;
  letter-spacing: .3px;
  white-space: nowrap;
}
.otpv-test-banner-text span {
  font-size: 12px;
  color: #78350f;
}
.otpv-test-banner-codes {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: 32px;
}
.otpv-test-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #d97706;
  border-radius: 6px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #b45309;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.otpv-test-code:hover {
  background: #d97706;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(217,119,6,.3);
}
.otpv-test-hint {
  font-size: 12px;
  color: #78350f;
  font-style: italic;
}
@media (max-width:768px){
  .otpv-test-banner { flex-direction: column; align-items: flex-start; }
  .otpv-test-banner-codes { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════
   PUBLIC BOQ PAGES  (icons-boq.asp + icons-boqdetail.asp)
   Prefix: .bqp-*  (BOQ Public — distinct from member .boq-*)
══════════════════════════════════════════════════════════════════ */

/* ── Layout shell ────────────────────────────────────────────────── */
.bqp-body { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; }
.bqp-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }

/* ── Sidebar (Categories) ────────────────────────────────────────── */
.bqp-sidebar {
  background: #fff; border-radius: var(--r); border: 1px solid #e0eee0;
  box-shadow: var(--sh); overflow: hidden; position: sticky; top: 16px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.bqp-side-header {
  background: linear-gradient(135deg, var(--navy), var(--steel));
  color: #fff; padding: 14px 18px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.bqp-side-header i { font-size: 16px; color: var(--accent2); }
.bqp-cat-list {
  list-style: none; padding: 8px 0; margin: 0;
  overflow-y: auto; flex: 1;
}
.bqp-cat-list li { padding: 0; }
.bqp-cat-main {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: none; background: transparent;
  cursor: pointer; text-align: left; transition: all .15s;
  font-family: 'Sarabun', sans-serif; font-size: 13.5px; color: var(--navy);
}
.bqp-cat-main:hover { background: var(--light); color: var(--steel); }
.bqp-cat-main.active { background: rgba(92,184,92,.12); color: var(--steel); font-weight: 700; }
.bqp-cat-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--light);
}
.bqp-cat-icon i { color: #fff; font-size: 14px; }
.bqp-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bqp-cat-arrow { font-size: 11px; color: var(--muted); transition: transform .2s; }
.bqp-cat-main.open .bqp-cat-arrow { transform: rotate(90deg); }
.bqp-sub-list {
  display: none; padding: 2px 0 6px 50px; background: #fafefa;
  border-bottom: 1px solid #f0f6f0;
}
.bqp-sub-list.open { display: block; }
.bqp-sub-item {
  display: block; padding: 6px 12px 6px 0; font-size: 12.5px;
  color: #5a7a5a; text-decoration: none; transition: color .15s;
}
.bqp-sub-item:hover { color: var(--steel); }
.bqp-sub-item.active { color: var(--steel); font-weight: 700; }

/* ── Main panel ──────────────────────────────────────────────────── */
.bqp-main {
  background: #fff; border-radius: var(--r); border: 1px solid #e0eee0;
  box-shadow: var(--sh); overflow: hidden;
}
.bqp-main-header {
  background: linear-gradient(135deg, var(--navy), var(--steel));
  color: #fff; padding: 14px 22px; font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; gap: 8px;
}
.bqp-main-header i { color: var(--accent2); font-size: 16px; }

/* ── Filter (2 rows: search/region/prov  +  checkbox + buttons) ──── */
.bqp-filter {
  padding: 14px 18px; background: #fafffd; border-bottom: 1px solid #edf5ed;
  display: flex; flex-direction: column; gap: 10px;
}
.bqp-filter-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.bqp-filter-row-2 {
  justify-content: space-between; padding-top: 6px;
  border-top: 1px dashed #d4ecd4;
}
.bqp-filter-actions { display: flex; gap: 10px; align-items: center; }
.bqp-fsearch {
  flex: 1.5; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #d4ecd4; border-radius: 8px;
  padding: 9px 12px; transition: border-color .2s;
}
.bqp-fsearch:focus-within { border-color: var(--accent); }
.bqp-fsearch i { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.bqp-fsearch input {
  border: none; outline: none; background: transparent; width: 100%;
  font-size: 13.5px; font-family: 'Sarabun', sans-serif; color: var(--navy);
}
.bqp-fselect {
  padding: 9px 12px; border: 1.5px solid #d4ecd4; border-radius: 8px;
  background: #fff; font-size: 13px; font-family: 'Sarabun', sans-serif;
  color: var(--navy); cursor: pointer; outline: none; min-width: 130px;
  transition: border-color .2s;
}
.bqp-fselect:focus { border-color: var(--accent); }
.bqp-chk-label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--navy); user-select: none;
}
.bqp-chk-label input { accent-color: var(--steel); cursor: pointer; }
.bqp-btn-search {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  background: var(--steel); color: #fff; border: none; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; font-family: 'Sarabun', sans-serif;
  cursor: pointer; transition: all .2s;
}
.bqp-btn-search:hover { background: var(--accent); }
.bqp-btn-clear {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  background: transparent; color: var(--muted); border: 1.5px solid #d4ecd4;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: 'Sarabun', sans-serif; cursor: pointer; text-decoration: none;
  transition: all .2s;
}
.bqp-btn-clear:hover { background: #fff4f4; color: #c0392b; border-color: #f5c6c6; }

/* ── Result count bar ────────────────────────────────────────────── */
.bqp-count-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px; border-bottom: 1px solid #edf5ed;
  font-size: 13px; color: var(--muted);
}
.bqp-count-bar strong { color: var(--navy); font-size: 15px; }

/* Main column wrapper — stacks Block 1 + Float + Block 2 in grid col 2 */
.bqp-main-col {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;  /* prevent grid blowout */
}

/* Float variant: shown between Block 1 (search) and Block 2 (results) */
.bqp-count-float {
  margin: 0;
  padding: 10px 18px;
  border: none; border-bottom: none;
  background: transparent;
}

/* ── Table ───────────────────────────────────────────────────────── */
.bqp-tbl-scroll { overflow-x: auto; }
.bqp-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bqp-tbl thead tr {
  background: linear-gradient(90deg, #1a3a1a, #2d5a2d);
}
.bqp-tbl thead th {
  padding: 12px 16px; text-align: left; color: rgba(255,255,255,.92);
  font-weight: 600; font-size: 11.5px; letter-spacing: .05em;
  white-space: nowrap; text-transform: uppercase;
}
.bqp-tbl thead th.tc { text-align: center; }
.bqp-tbl thead th.tr { text-align: right; }
.bqp-tbl tbody tr {
  border-bottom: 1px solid #eef6ee; transition: background .15s;
}
.bqp-tbl tbody tr:nth-child(even) { background: #fafefe; }
.bqp-tbl tbody tr:hover { background: #edf8ed; }
.bqp-tbl tbody td { padding: 11px 16px; color: var(--navy); vertical-align: middle; }
.bqp-td-date {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif;
}
.bqp-td-name a {
  color: var(--navy); text-decoration: none; font-weight: 500;
  display: block; line-height: 1.45; transition: color .15s;
}
.bqp-td-name a:hover { color: var(--steel); text-decoration: underline; }
.bqp-td-qty {
  text-align: right; font-weight: 700; color: var(--steel);
  white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; font-size: 15px;
}
.bqp-td-unit {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef8ee, #e0f0e0);
  border: 1px solid #c4dcc4; color: var(--steel); border-radius: 6px;
  padding: 2px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.bqp-no-data {
  text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14.5px;
}
.bqp-no-data i { font-size: 36px; color: #c8dcc8; display: block; margin-bottom: 10px; }

/* ── Pagination (re-use icons-pages base .pagination/.pg-btn) ──── */
.bqp-pagination {
  padding: 18px 22px; display: flex; justify-content: center;
  align-items: center; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid #edf5ed;
}
.bqp-pg-sep { color: var(--muted); font-size: 12.5px; padding: 0 4px; }

/* ── Subscribe banner (bottom of listing) ───────────────────────── */
.bqp-sub-banner {
  margin-top: 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
  border-radius: var(--r); padding: 28px 32px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.bqp-sub-banner::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(92,184,92,.2), transparent 70%);
  pointer-events: none;
}
.bqp-sub-banner-text { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.bqp-sub-banner-text h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; margin-bottom: 6px; color: #fff;
}
.bqp-sub-banner-text p { font-size: 14px; color: rgba(255,255,255,.78); }
.bqp-sub-banner-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px; background: var(--accent); color: #fff;
  border-radius: 8px; text-decoration: none; font-weight: 700;
  font-size: 14px; transition: all .2s; position: relative; z-index: 1;
  white-space: nowrap;
}
.bqp-sub-banner-btn:hover { background: #fff; color: var(--steel); transform: translateY(-1px); }

/* ──────────────────────────────────────────────────────────────────
   BOQ DETAIL (icons-boqdetail.asp)
   Prefix: .bqd-*
────────────────────────────────────────────────────────────────── */
.bqd-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f0d 55%, #1a4a1a 100%);
  padding: 36px 0 44px; position: relative; overflow: hidden; color: #fff;
}
.bqd-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235CB85C' fill-opacity='.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.bqd-hero-inner { position: relative; max-width: 1280px; margin: auto; padding: 0 28px; }
.bqd-breadcrumb { font-size: 12.5px; margin-bottom: 16px; color: rgba(255,255,255,.6); }
.bqd-breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.bqd-breadcrumb a:hover { color: var(--accent2); }
.bqd-bc-sep { color: rgba(255,255,255,.3); padding: 0 5px; }
.bqd-bc-cur { color: rgba(255,255,255,.85); }
.bqd-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(92,184,92,.15); border: 1px solid rgba(92,184,92,.3);
  color: var(--accent2); font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 20px; margin-bottom: 14px;
}
.bqd-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px, 4vw, 38px); font-weight: 700;
  line-height: 1.2; margin-bottom: 10px; color: #fff;
}
.bqd-hero-qty-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bqd-hero-qty {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px; font-weight: 700; color: var(--accent2);
}
.bqd-hero-qty-unit {
  font-size: 17px; font-weight: 600; color: rgba(255,255,255,.92);
}
.bqd-hero-qty-text { font-size: 13.5px; color: rgba(255,255,255,.6); margin-left: 6px; }

/* ── Body 2-col ──────────────────────────────────────────────────── */
.bqd-body { max-width: 1280px; margin: 0 auto; padding: 28px 28px 60px; }
.bqd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

/* ── Section cards ──────────────────────────────────────────────── */
.bqd-section {
  background: #fff; border-radius: var(--r); border: 1px solid #e0eee0;
  box-shadow: var(--sh); padding: 22px 26px; margin-bottom: 22px;
}
.bqd-section-h {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px;
  font-weight: 700; color: var(--navy); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 2px solid #edf5ed;
}
.bqd-section-h i { color: var(--accent); font-size: 24px; }

/* ── Project meta list ───────────────────────────────────────────── */
.bqd-meta-list { list-style: none; padding: 0; margin: 0; }
.bqd-meta-list li {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px dashed #edf5ed; font-size: 14.5px; color: var(--navy);
}
.bqd-meta-list li:last-child { border: none; }
.bqd-meta-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #eef8ee, #d4ecd4);
  border: 1px solid #c4dcc4;
  display: flex; align-items: center; justify-content: center;
}
.bqd-meta-icon i { color: var(--steel); font-size: 20px; }
.bqd-meta-body { flex: 1; min-width: 0; }
.bqd-meta-lbl { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.bqd-meta-val { font-size: 15px; font-weight: 600; color: var(--navy); }
/* Money value — split number + unit to keep visible spacing */
.bqd-meta-money { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bqd-mv-num  { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--steel); line-height: 1; }
.bqd-mv-unit { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ── Check table (member-only data hint) ─────────────────────────── */
.bqd-check-tbl {
  width: 100%; border-collapse: collapse; border: 1px solid #d4ecd4; border-radius: 8px; overflow: hidden;
}
.bqd-check-tbl thead tr { background: linear-gradient(90deg, var(--steel), var(--accent)); }
.bqd-check-tbl thead th {
  padding: 12px 16px; color: #fff; font-weight: 700; font-size: 13px;
  text-align: left; white-space: nowrap;
}
.bqd-check-tbl thead th.tc { text-align: center; width: 170px; white-space: nowrap; }
.bqd-check-tbl tbody td.tc { text-align: center; }
.bqd-check-tbl tbody tr { border-bottom: 1px solid #edf5ed; transition: background .15s; }
.bqd-check-tbl tbody tr:nth-child(even) { background: #fafefa; }
.bqd-check-tbl tbody tr:hover { background: #f0f8f0; }
.bqd-check-tbl tbody td { padding: 12px 16px; font-size: 14px; color: var(--navy); }
.bqd-check-yes { color: var(--accent); font-size: 22px; }
.bqd-check-no { color: #c0392b; font-size: 18px; opacity: .5; }
.bqd-check-pending {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: #d97706; font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 14px;
  background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.3);
}
.bqd-check-pending i { font-size: 12px; }

/* ── More-info buttons (โครงการอื่น / วัสดุอื่น) ────────────────── */
.bqd-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bqd-more-card {
  display: block; padding: 18px 20px; border-radius: 12px;
  border: 1.5px solid #d4ecd4; background: linear-gradient(135deg, #fafffe, #f5fdf5);
  text-decoration: none; transition: all .22s; cursor: pointer;
}
.bqd-more-card:hover {
  border-color: var(--accent); box-shadow: 0 6px 24px rgba(92,184,92,.12);
  transform: translateY(-2px);
}
.bqd-more-card-h { font-size: 13.5px; color: var(--navy); margin-bottom: 6px; line-height: 1.45; }
.bqd-more-card-n {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1;
}
.bqd-mc-prefix {
  font-family: 'Sarabun', sans-serif; font-size: 15px;
  font-weight: 500; color: var(--muted);
}
.bqd-mc-num {
  font-family: 'Barlow Condensed', sans-serif; font-size: 32px;
  font-weight: 700; color: var(--steel); line-height: 1;
}
.bqd-mc-suffix {
  font-family: 'Sarabun', sans-serif; font-size: 14px;
  font-weight: 500; color: var(--muted);
}

/* ── Member CTA card (in main column) ───────────────────────────── */
.bqd-cta-card {
  background: linear-gradient(135deg, #1a4a1a 0%, var(--navy) 100%);
  border-radius: var(--r); padding: 28px 32px; color: #fff;
  position: relative; overflow: hidden;
}
.bqd-cta-card::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(92,184,92,.25), transparent 70%);
}
.bqd-cta-card-inner { position: relative; z-index: 1; }
.bqd-cta-h {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; margin-bottom: 8px;
}
.bqd-cta-p { font-size: 14px; color: rgba(255,255,255,.78); margin-bottom: 16px; line-height: 1.65; max-width: none; }
.bqd-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bqd-btn-primary {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px;
  background: var(--accent); color: #fff; border-radius: 8px;
  text-decoration: none; font-weight: 700; font-size: 14px;
  transition: all .2s; border: none; cursor: pointer;
}
.bqd-btn-primary:hover { background: #fff; color: var(--steel); transform: translateY(-1px); }
.bqd-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px;
  background: transparent; color: #fff; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 14px;
  border: 1.5px solid rgba(255,255,255,.4); transition: all .2s; cursor: pointer;
}
.bqd-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--accent2); }

/* ── Sidebar (right column on detail) ──────────────────────────── */
.bqd-sidebar { display: flex; flex-direction: column; gap: 16px; }
.bqd-sb-card {
  background: #fff; border-radius: var(--r); border: 1px solid #e0eee0;
  box-shadow: var(--sh); overflow: hidden;
}
.bqd-sb-hdr {
  background: linear-gradient(135deg, var(--navy), var(--steel));
  color: #fff; padding: 12px 18px; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; gap: 7px;
}
.bqd-sb-hdr i { color: var(--accent2); font-size: 15px; }
.bqd-sb-body { padding: 16px 18px; }
.bqd-back-btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  color: var(--steel); text-decoration: none; font-weight: 600;
  font-size: 13.5px; transition: all .15s;
}
.bqd-back-btn:hover { background: var(--light); color: var(--navy); }
.bqd-back-btn i { font-size: 13px; }
.bqd-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed #edf5ed; font-size: 13.5px;
}
.bqd-stat-row:last-child { border: none; }
.bqd-stat-lbl { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.bqd-stat-lbl i { color: var(--accent); font-size: 13px; }
.bqd-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--steel); }

/* ── Sidebar promo (gradient card) ──────────────────────────────── */
.bqd-sb-promo {
  background: linear-gradient(135deg, var(--steel) 0%, var(--accent) 100%);
  border-radius: var(--r); padding: 22px 22px; color: #fff;
  text-align: center; position: relative; overflow: hidden;
}
.bqd-sb-promo::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.08); pointer-events: none;
}
.bqd-sb-promo i { font-size: 40px; margin-bottom: 10px; opacity: .9; }
.bqd-sb-promo h4 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px;
  font-weight: 700; margin-bottom: 6px;
}
.bqd-sb-promo p { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 14px; line-height: 1.5; }
.bqd-sb-promo a {
  display: inline-block; padding: 9px 20px; background: #fff;
  color: var(--steel); border-radius: 7px; text-decoration: none;
  font-weight: 700; font-size: 13.5px; transition: all .2s;
}
.bqd-sb-promo a:hover { background: var(--navy); color: #fff; }

/* ── Sidebar ads slot ──────────────────────────────────────────── */
.bqd-sb-ad { padding: 10px 14px; }
.bqd-sb-ad img { width: 100%; display: block; border-radius: 8px; }

/* ── Sponsor banner — no card frame (just image) ──────────────── */
.bqd-sb-banner {
  display: block; line-height: 0; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
  transition: transform .2s, box-shadow .2s;
}
.bqd-sb-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.bqd-sb-banner img { width: 100%; display: block; }
.bqd-sb-ad-empty {
  padding: 30px 12px; border: 2px dashed #d4ecd4; border-radius: 10px;
  text-align: center; color: var(--muted); font-size: 12.5px;
  background: #fafefa;
}
.bqd-sb-ad-empty i { font-size: 26px; color: #c4dcc4; display: block; margin-bottom: 6px; }
.bqd-sb-ad-empty a { color: var(--steel); text-decoration: none; font-weight: 600; }

/* ── Error state ────────────────────────────────────────────────── */
.bqd-error {
  background: #fff; border-radius: var(--r); border: 1px solid #f5c6c6;
  padding: 60px 30px; text-align: center; color: var(--muted);
  max-width: 600px; margin: 40px auto;
}
.bqd-error i { font-size: 56px; color: #f5c6c6; display: block; margin-bottom: 14px; }
.bqd-error h3 { color: #c0392b; font-size: 20px; margin-bottom: 8px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px){
  .bqp-layout { grid-template-columns: 1fr; }
  .bqp-sidebar { position: static; max-height: none; }
  .bqp-cat-list { max-height: 320px; }
  .bqd-layout { grid-template-columns: 1fr; }
  .bqd-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .bqp-body { padding: 20px 14px 60px; }
  .bqp-filter { padding: 12px 14px; }
  .bqp-fselect { min-width: 0; flex: 1; }
  .bqp-tbl thead th, .bqp-tbl tbody td { padding: 9px 10px; font-size: 12.5px; }
  .bqp-sub-banner { padding: 22px 20px; flex-direction: column; align-items: flex-start; }
  .bqd-body { padding: 22px 14px 50px; }
  .bqd-section { padding: 18px 18px; }
  .bqd-meta-list li { font-size: 13.5px; gap: 10px; }
  .bqd-meta-icon { width: 36px; height: 36px; }
  .bqd-check-tbl thead th, .bqd-check-tbl tbody td { padding: 10px 10px; font-size: 13px; }
  .bqd-cta-card { padding: 22px 20px; }
}