/*
 * icons-pages-supp.css
 * Supplier directory (member-only)
 * หน้าที่ใช้: supp_main.asp, supp_detail.asp, supp-header.asp, supp-footer.asp
 *           + icons-supplierlist.asp (login card sidebar + blur masks)
 * Theme: Modern Corp FLAT (เขียวเข้ม #0F5D36 / #2DA15C / #39B86C)
 * ============================================================
 */

/* ── Override theme vars from icons.css → Modern Corp FLAT ──
   ทำให้ sd-* ใน icons-pages.css ซึ่งใช้ var(--navy)/var(--accent) ฯลฯ
   render เป็นโทนเขียวใหม่อัตโนมัติ บนหน้า supp_*.asp */
:root{
  --navy:    #0F5D36 !important;
  --steel:   #2DA15C !important;
  --accent:  #39B86C !important;
  --accent2: #7DD3A2 !important;
}

:root{
  --sp-header-h: 62px;
  --sp-footer-h: 48px;
  --sp-bg:        #F0FAF3;
  --sp-card-bg:   #ffffff;
  --sp-card-bdr:  #DDF5E7;
  --sp-card-r:    12px;
  --sp-muted:     #6B7280;
  --sp-deep:      #0F5D36;
  --sp-mid:       #2DA15C;
  --sp-brand:     #39B86C;
  --sp-light:     #7DD3A2;
  --sp-tint:      #DDF5E7;
  --sp-vtint:     #F0FAF3;
}

/* ══════════════════════════════════════════════════════
   BLUR MASK (ใช้ใน icons-supplierlist.asp public)
   ซ่อนชื่อบริษัท — public visitor ต้อง login เห็น
══════════════════════════════════════════════════════ */
.sp-blur-name{
  display:inline-block;
  filter: blur(6px);
  user-select: none;
  color: transparent;
  background: linear-gradient(90deg,#DDF5E7,#7DD3A2,#DDF5E7);
  border-radius: 4px;
  pointer-events: none;
  min-width: 140px;
  height: 1em;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   MEMBER BANNER (เตือนต้อง login)
══════════════════════════════════════════════════════ */
.sp-mem-banner{
  display:flex; align-items:flex-start; gap:14px;
  background: linear-gradient(135deg,#F0FAF3,#DDF5E7);
  border: 1px solid #39B86C;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.sp-mem-banner-icon{
  width: 44px; height: 44px; border-radius: 10px;
  background: #0F5D36; color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; flex-shrink:0;
}
.sp-mem-banner-body h4{
  margin: 0 0 4px;
  font-size: 15px; font-weight: 700; color: #0F5D36;
  display:flex; align-items:center; gap:8px;
  font-family: 'Sarabun', sans-serif;
}
.sp-mem-banner-body p{
  margin: 0;
  font-size: 12.5px; color: #1E1E1E; line-height: 1.55;
  font-family: 'Sarabun', sans-serif;
}
.sp-mem-lock{
  display:inline-flex; align-items:center; gap:4px;
  background: #C0392B; color: #fff;
  padding: 2px 9px; border-radius: 12px;
  font-size: 11px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   "ขอใบเสนอราคา" BUTTON (replace public "ดูรายละเอียด")
══════════════════════════════════════════════════════ */
.sp-btn-quote{
  display:inline-flex; align-items:center; gap:5px;
  padding: 6px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  background: #39B86C; color: #fff;
  border: 1px solid #39B86C;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
  white-space: nowrap;
}
.sp-btn-quote:hover{ background: #2DA15C; }
.sp-btn-quote i{ font-size: 13px; }

/* ══════════════════════════════════════════════════════
   LOGIN CARD (sidebar ของ icons-supplierlist.asp)
══════════════════════════════════════════════════════ */
.sp-login-card{
  background: #fff;
  border: 1px solid #39B86C;
  border-radius: 12px;
  padding: 18px 18px 16px;
  font-family: 'Sarabun', sans-serif;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(15,93,54,.08);
}
.sp-login-header{ text-align:center; margin-bottom: 12px; }
.sp-login-icon{
  width: 50px; height: 50px;
  background: #0F5D36; color: #fff;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; margin: 0 auto 8px;
}
.sp-login-title{ font-size: 15px; font-weight: 700; color: #0F5D36; }
.sp-login-sub{ font-size: 11.5px; color: #6B7280; margin-top: 2px; }

.sp-form-group{ margin-bottom: 10px; }
.sp-form-group label{
  display:flex; align-items:center; gap:5px;
  font-size: 12px; font-weight: 600; color: #0F5D36;
  margin-bottom: 4px;
}
.sp-field-wrap{ position: relative; }
.sp-field-icon{
  position:absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: #6B7280; pointer-events: none;
}
.sp-form-group input{
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1.5px solid #DDF5E7;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Sarabun', sans-serif;
  color: #1E1E1E;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.sp-form-group input:focus{
  border-color: #39B86C;
  box-shadow: 0 0 0 3px rgba(57,184,108,.15);
}
.sp-toggle-pass{
  position:absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #6B7280; padding: 4px;
}
.sp-toggle-pass:hover{ color: #0F5D36; }

.sp-btn-login{
  width: 100%;
  padding: 10px 14px;
  background: #0F5D36; color: #fff;
  border: none; border-radius: 8px;
  font-size: 13.5px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer;
  transition: background .2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.sp-btn-login:hover{ background: #064E3B; }

.sp-login-divider{
  text-align:center; margin: 12px 0; position: relative;
  color: #6B7280; font-size: 11px;
}
.sp-login-divider::before, .sp-login-divider::after{
  content: ''; position: absolute; top: 50%; width: 38%;
  height: 1px; background: #DDF5E7;
}
.sp-login-divider::before{ left: 0; }
.sp-login-divider::after{ right: 0; }
.sp-login-divider span{ background: #fff; padding: 0 10px; position: relative; }

.sp-btn-quote-cta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width: 100%;
  padding: 9px 14px;
  background: #fff; color: #0F5D36;
  border: 1.5px solid #39B86C;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.sp-btn-quote-cta:hover{ background: #DDF5E7; }

/* ══════════════════════════════════════════════════════
   SUPP HEADER (member chrome — clone sr-header.asp)
══════════════════════════════════════════════════════ */
body.page-supp-member{ background: #F0FAF3; min-height: 100vh; display: flex; flex-direction: column; }

.sp-header{
  background: #0F5D36;
  border-bottom: 3px solid #2DA15C;
  height: var(--sp-header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 200;
  flex-shrink: 0;
}
.sp-header-logo{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.sp-header-logo img{ height: 44px; width:auto; display:block; }

.sp-header-right{ display:flex; align-items:center; gap:10px; }

.sp-lang-switch{
  display:flex; gap: 0;
  border: 1px solid rgba(57,184,108,.3);
  border-radius: 5px; overflow: hidden;
}
.sp-lang-switch a{
  padding: 4px 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-family: 'Sarabun', sans-serif;
  transition: background .2s, color .2s;
}
.sp-lang-switch a.active, .sp-lang-switch a:hover{
  background: #2DA15C; color: #fff;
}

.sp-user-pill{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(57,184,108,.22);
  border-radius: 22px;
  padding: 4px 13px 4px 5px;
  font-size: 13px; color: #0F5D36;
  font-family: 'Sarabun', sans-serif;
}
.sp-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: #2DA15C; color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

.sp-btn-logout{
  display:flex; align-items:center; gap:6px;
  background: #F59E0B;
  border: 1px solid #F59E0B;
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 7px;
  cursor: pointer; text-decoration: none;
  font-family: 'Sarabun', sans-serif;
  transition: background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(245,158,11,.35);
}
.sp-btn-logout:hover{
  background: #D97706;
  border-color: #D97706;
  color: #fff;
  transform: translateY(-1px);
}
.sp-btn-logout i{ font-size: 14px; }

/* ══════════════════════════════════════════════════════
   SUPP FOOTER (clone sr-footer.asp)
══════════════════════════════════════════════════════ */
.sp-footer{
  background: #0F5D36;
  border-top: 2px solid #2DA15C;
  padding: 0 28px;
  height: var(--sp-footer-h);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink: 0; margin-top: auto;
}
.sp-footer-copy{ font-size: 12px; color: rgba(255,255,255,.55); font-family: 'Sarabun', sans-serif; }
.sp-footer-copy strong{ color: rgba(255,255,255,.78); }
.sp-footer-links{ display:flex; gap: 20px; }
.sp-footer-links a{
  font-size: 12px; color: rgba(255,255,255,.55);
  text-decoration: none; transition: color .2s;
  font-family: 'Sarabun', sans-serif;
}
.sp-footer-links a:hover{ color: #fff; }

/* ══════════════════════════════════════════════════════
   SUPP MAIN — CONTENT AREA
══════════════════════════════════════════════════════ */
.sp-content{ flex: 1; max-width: 1280px; margin: 0 auto; padding: 22px 24px 32px; width: 100%; }

.sp-welcome{
  background: #0F5D36;
  border-radius: 12px;
  padding: 14px 22px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px; gap: 16px;
}
.sp-welcome-text h2{
  font-size: 17px; font-weight: 600;
  color: #fff;
  margin: 0;
  font-family: 'Sarabun', sans-serif;
}
.sp-welcome-text p{
  font-size: 12.5px; color: rgba(255,255,255,.62);
  margin-top: 4px; margin-bottom: 0;
  font-family: 'Sarabun', sans-serif;
}
.sp-stat-chips{ display:flex; gap: 10px; flex-shrink: 0; }
.sp-chip{
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(57,184,108,.3);
  border-radius: 9px;
  padding: 6px 14px;
  text-align: center;
  font-size: 11px; color: rgba(255,255,255,.78);
  white-space: nowrap;
  font-family: 'Sarabun', sans-serif;
}
.sp-chip strong{
  display:block; font-size: 18px; font-weight: 700;
  color: #fff; line-height: 1.2;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ══════════════════════════════════════════════════════
   SUPP MAIN — 2-COLUMN LAYOUT
══════════════════════════════════════════════════════ */
.sp-grid{
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 18px;
  align-items: start;
}

.sp-cat-sidebar{
  background: #fff;
  border: 1px solid #DDF5E7;
  border-radius: 12px;
  padding: 14px 0;
  position: sticky;
  top: calc(var(--sp-header-h) + 16px);
  max-height: calc(100vh - var(--sp-header-h) - 32px);
  overflow-y: auto;
  font-family: 'Sarabun', sans-serif;
}
.sp-cat-hdr{
  font-size: 13px; font-weight: 700; color: #0F5D36;
  padding: 0 18px 10px;
  border-bottom: 1px solid #F0FAF3;
  display:flex; align-items:center; gap:7px;
}
.sp-cat-hdr i{ font-size: 16px; color: #2DA15C; }
.sp-cat-list{ list-style: none; padding: 0; margin: 6px 0 0; }
.sp-cat-list li{ margin: 0; }

.sp-cat-list .sp-cat-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 22px; height: 18px;
  background: #DDF5E7; color: #0F5D36;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 10.5px; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
}
.sp-cat-list .sp-cat-main.active .sp-cat-num{ background: #39B86C; color: #fff; }

/* ── Main category row (collapsible) ── */
.sp-cat-main{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 9px 18px;
  font-size: 12.5px; font-weight: 600; color: #1E1E1E;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.sp-cat-main:hover{ background: #F0FAF3; color: #0F5D36; }
.sp-cat-main.active{
  background: #DDF5E7; color: #0F5D36;
  border-left-color: #39B86C;
  font-weight: 700;
}
.sp-cat-name{ flex: 1; min-width: 0; word-break: break-word; }
.sp-cat-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px;
  font-size: 10px; color: #6B7280;
  transition: transform .2s;
  flex-shrink: 0;
}
.sp-cat-main.open .sp-cat-arrow{ transform: rotate(90deg); color: #0F5D36; }
.sp-cat-main:hover .sp-cat-arrow{ color: #0F5D36; }

/* ── Sub-categories list (slide down when open) ── */
.sp-sub-list{
  max-height: 0;
  overflow: hidden;
  background: #F9FAFB;
  transition: max-height .25s ease;
}
.sp-sub-list.open{ max-height: 1500px; }
.sp-sub-item{
  display:block;
  padding: 6px 18px 6px 38px;
  font-size: 12px; color: #1E1E1E;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  position: relative;
}
.sp-sub-item::before{
  content: "•";
  position: absolute;
  left: 26px;
  color: #7DD3A2;
  font-size: 10px;
  top: 7px;
}
.sp-sub-item:hover{ background: #F0FAF3; color: #0F5D36; }
.sp-sub-item.active{
  background: #DDF5E7;
  color: #0F5D36;
  border-left-color: #39B86C;
  font-weight: 700;
}
.sp-sub-item.active::before{ color: #0F5D36; }

/* ══════════════════════════════════════════════════════
   WELCOME HEADLINE — ระบบรายชื่อผู้ผลิตและจำหน่ายวัสดุก่อสร้าง
══════════════════════════════════════════════════════ */
.sp-welcome-headline{
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.35;
  display:flex; align-items: center; gap: 12px;
  font-family: 'Sarabun', sans-serif;
  letter-spacing: .01em;
}
.sp-welcome-headline i{
  font-size: 28px;
  color: #6EE7B7;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   VENDOR BADGES (table — แสดงหมวดงานของแต่ละบริษัท)
══════════════════════════════════════════════════════ */
.sp-vendor-badges{
  display:flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px;
}
.sp-cat-badge{
  display:inline-flex; align-items: center;
  padding: 2px 9px;
  background: #F0FAF3;
  color: #0F5D36;
  border: 1px solid #DDF5E7;
  border-radius: 11px;
  font-size: 10.5px; font-weight: 600;
  font-family: 'Sarabun', sans-serif;
  white-space: nowrap;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   SUPP MAIN — RIGHT (search + table)
══════════════════════════════════════════════════════ */
.sp-main-panel{ display:flex; flex-direction: column; gap: 14px; }

.sp-search-bar{
  background: #fff;
  border: 1px solid #DDF5E7;
  border-radius: 12px;
  padding: 12px 14px;
}
.sp-search-inner{ display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp-search-field{
  flex: 1; min-width: 200px;
  position: relative;
}
.sp-search-field i{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #6B7280; pointer-events: none;
}
.sp-search-field input{
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1.5px solid #DDF5E7;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Sarabun', sans-serif;
  color: #1E1E1E;
  outline: none;
  box-sizing: border-box;
}
.sp-search-field input:focus{ border-color: #39B86C; box-shadow: 0 0 0 3px rgba(57,184,108,.12); }

.sp-search-select{
  padding: 8px 12px;
  border: 1.5px solid #DDF5E7;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Sarabun', sans-serif;
  color: #1E1E1E;
  background: #fff;
  outline: none;
  min-width: 160px;
  cursor: pointer;
}
.sp-search-select:focus{ border-color: #39B86C; }

.sp-btn-search{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 8px 18px;
  background: #0F5D36; color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer; transition: background .15s;
}
.sp-btn-search:hover{ background: #064E3B; }

.sp-active-filters{
  display:flex; align-items:center; gap: 6px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed #DDF5E7;
  margin-top: 10px;
}
.sp-filter-label{ font-size: 11.5px; color: #6B7280; font-weight: 600; }
.sp-tag{
  display:inline-flex; align-items:center; gap: 4px;
  padding: 3px 10px;
  background: #DDF5E7; color: #0F5D36;
  border-radius: 12px;
  font-size: 11.5px; font-weight: 600;
  text-decoration: none;
  font-family: 'Sarabun', sans-serif;
}
.sp-tag:hover{ background: #FEF2F2; color: #C0392B; }
.sp-tag i{ font-size: 12px; }

/* ── Vendor Table ── */
.sp-vendor-card{
  background: #fff;
  border: 1px solid #DDF5E7;
  border-radius: 12px;
  overflow: hidden;
}
.sp-vendor-hdr{
  background: #0F5D36; color: #fff;
  padding: 11px 16px;
  display:flex; align-items:center; justify-content: space-between; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
}
.sp-vendor-hdr i{ color: #fff; font-size: 15px; margin-right: 5px; }
.sp-vendor-count{
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  padding: 2px 10px; border-radius: 10px;
}

.sp-vendor-tbl{ width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-vendor-tbl thead th{
  background: #F0FAF3; color: #0F5D36;
  font-weight: 700; padding: 10px 14px;
  text-align: left; font-size: 12px;
  border-bottom: 2px solid #DDF5E7;
  font-family: 'Sarabun', sans-serif;
}
.sp-vendor-tbl tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid #F0FAF3;
  color: #1E1E1E; vertical-align: middle;
  font-family: 'Sarabun', sans-serif;
}
.sp-vendor-tbl tbody tr:hover td{ background: #F0FAF3; }
.sp-vendor-name{ font-weight: 600; color: #0F5D36; }
.sp-vendor-prov{ font-size: 12px; color: #6B7280; }
.sp-vendor-cat{ font-size: 11.5px; color: #2DA15C; }

.sp-btn-detail{
  display:inline-flex; align-items:center; gap: 4px;
  padding: 5px 14px;
  background: #39B86C; color: #fff;
  border: none; border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
  text-decoration: none;
  font-family: 'Sarabun', sans-serif;
  transition: background .15s;
  white-space: nowrap;
}
.sp-btn-detail:hover{ background: #2DA15C; }
.sp-btn-detail i{ font-size: 11px; }

/* ── Pagination ── */
.sp-pagination{
  display:flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px;
  border-top: 1px solid #F0FAF3;
  flex-wrap: wrap;
}
.sp-pg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 32px; height: 32px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  font-family: 'Sarabun', sans-serif;
  color: #0F5D36;
  background: #F0FAF3;
  border: 1.5px solid #DDF5E7;
  text-decoration: none;
  padding: 0 8px;
  transition: all .15s;
}
.sp-pg-btn:hover{ background: #39B86C; color: #fff; border-color: #39B86C; }
.sp-pg-btn.active{ background: #0F5D36; color: #fff; border-color: #0F5D36; }
.sp-pg-btn.disabled{ opacity: .35; pointer-events: none; }
.sp-pg-sep{ font-size: 11.5px; color: #6B7280; padding: 0 4px; }

/* ══════════════════════════════════════════════════════
   SUPP DETAIL PAGE
══════════════════════════════════════════════════════ */
.sp-detail-card{
  background: #fff;
  border: 1px solid #DDF5E7;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 16px;
  font-family: 'Sarabun', sans-serif;
}
.sp-detail-hdr{
  display:flex; align-items: flex-start; gap: 14px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 2px solid #DDF5E7;
}
.sp-detail-icon{
  width: 56px; height: 56px;
  background: #0F5D36; color: #fff;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 26px; flex-shrink: 0;
}
.sp-detail-name{
  font-size: 20px; font-weight: 700; color: #0F5D36;
  line-height: 1.35; margin: 0 0 4px;
}
.sp-detail-prov{
  font-size: 13px; color: #6B7280;
  display:flex; align-items:center; gap: 5px;
}
.sp-detail-prov i{ color: #2DA15C; }

.sp-info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.sp-info-item{
  display:flex; gap: 10px;
}
.sp-info-icon{
  width: 36px; height: 36px;
  background: #DDF5E7; color: #0F5D36;
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  font-size: 17px; flex-shrink: 0;
}
.sp-info-text{ flex: 1; min-width: 0; }
.sp-info-label{ font-size: 11px; color: #6B7280; font-weight: 600; }
.sp-info-val{ font-size: 13px; color: #1E1E1E; word-break: break-word; line-height: 1.55; }
.sp-info-val a{ color: #0F5D36; text-decoration: none; font-weight: 600; }
.sp-info-val a:hover{ text-decoration: underline; }

.sp-product-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.sp-product-chip{
  display:flex; align-items:center; gap: 6px;
  background: #F0FAF3;
  border: 1px solid #DDF5E7;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px; color: #0F5D36;
  font-weight: 600;
}
.sp-product-chip i{ color: #39B86C; flex-shrink: 0; }

.sp-section-title{
  font-size: 14px; font-weight: 700; color: #0F5D36;
  margin: 18px 0 10px;
  display:flex; align-items: center; gap: 7px;
  padding-bottom: 7px; border-bottom: 1px solid #DDF5E7;
}
.sp-section-title i{ color: #2DA15C; font-size: 16px; }

.sp-back-link{
  display:inline-flex; align-items:center; gap:5px;
  padding: 7px 14px;
  background: #fff; color: #0F5D36;
  border: 1.5px solid #39B86C; border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  font-family: 'Sarabun', sans-serif;
  margin-bottom: 14px;
  transition: background .15s;
}
.sp-back-link:hover{ background: #DDF5E7; }

/* ══════════════════════════════════════════════════════
   QUOTE OVERLAY MODAL (Quotation form for public)
══════════════════════════════════════════════════════ */
.sp-quote-overlay{
  display:none; position: fixed; inset: 0;
  background: rgba(15,93,54,.55);
  z-index: 9000;
  align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.sp-quote-overlay.show{ display: flex; }
.sp-quote-modal{
  background: #fff;
  border-radius: 14px;
  width: 100%; max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  font-family: 'Sarabun', sans-serif;
}
.sp-quote-hdr{
  background: #0F5D36; color: #fff;
  padding: 14px 20px;
  border-radius: 14px 14px 0 0;
  display:flex; align-items: center; justify-content: space-between;
}
.sp-quote-hdr h3{
  margin: 0; font-size: 16px; font-weight: 700;
  display:flex; align-items: center; gap: 8px;
}
.sp-quote-close{
  background: rgba(255,255,255,.15); border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer; line-height: 1;
}
.sp-quote-close:hover{ background: rgba(255,255,255,.28); }

.sp-quote-body{ padding: 20px 22px; }

.sp-quote-service{
  background: #F0FAF3;
  border: 1px solid #DDF5E7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sp-quote-service h4{
  margin: 0 0 6px;
  font-size: 14px; color: #0F5D36; font-weight: 700;
}
.sp-quote-service ul{ margin: 0; padding-left: 18px; font-size: 12.5px; color: #1E1E1E; line-height: 1.7; }

.sp-quote-pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.sp-quote-price{
  background: #fff;
  border: 1.5px solid #DDF5E7;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.sp-quote-price:hover{ border-color: #39B86C; background: #F0FAF3; }
.sp-quote-price.selected{
  border-color: #0F5D36;
  background: #DDF5E7;
  box-shadow: 0 0 0 3px rgba(57,184,108,.18);
}
.sp-quote-price-period{ font-size: 11.5px; color: #6B7280; font-weight: 600; }
.sp-quote-price-amt{
  font-size: 19px; font-weight: 800; color: #0F5D36;
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.1;
  margin: 3px 0;
}
.sp-quote-price-save{
  font-size: 10.5px; color: #C0392B; font-weight: 700;
  margin-top: 2px; min-height: 14px;
}

.sp-quote-row{ display:flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sp-quote-row > div{ flex: 1; min-width: 160px; }
.sp-quote-label{
  display:block; font-size: 11.5px; color: #0F5D36; font-weight: 600;
  margin-bottom: 4px;
}
.sp-quote-input, .sp-quote-textarea{
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #DDF5E7;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: 'Sarabun', sans-serif;
  color: #1E1E1E;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.sp-quote-input:focus, .sp-quote-textarea:focus{
  border-color: #39B86C;
  box-shadow: 0 0 0 3px rgba(57,184,108,.12);
}
.sp-quote-textarea{ min-height: 70px; resize: vertical; font-family: 'Sarabun', sans-serif; }

.sp-quote-actions{
  display:flex; gap: 8px; justify-content: flex-end;
  padding-top: 6px; border-top: 1px solid #F0FAF3; margin-top: 12px;
}
.sp-quote-btn{
  padding: 9px 20px;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.sp-quote-btn-cancel{ background: #fff; border: 1.5px solid #DDF5E7; color: #6B7280; }
.sp-quote-btn-cancel:hover{ background: #F0FAF3; color: #1E1E1E; }
.sp-quote-btn-submit{ background: #0F5D36; color: #fff; }
.sp-quote-btn-submit:hover{ background: #064E3B; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .sp-grid{ grid-template-columns: 1fr; }
  .sp-cat-sidebar{
    position: static; max-height: none;
    overflow-y: visible;
  }
  .sp-cat-list{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
  .sp-cat-list .sp-cat-main{ border-left: none; border: 1px solid #DDF5E7; border-radius: 18px; padding: 6px 12px; }
  .sp-cat-list .sp-cat-main.active{ border-color: #39B86C; }
  .sp-sub-list{ flex-basis: 100%; }
  .sp-sub-list.open{ max-height: none; }
}
@media (max-width: 600px){
  .sp-content{ padding: 14px 14px 24px; }
  .sp-welcome{ flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .sp-stat-chips{ width: 100%; }
  .sp-chip{ flex: 1; }
  .sp-vendor-tbl thead th{ font-size: 11px; }
  .sp-vendor-tbl tbody td{ font-size: 12px; padding: 8px 10px; }
  .sp-quote-pricing{ grid-template-columns: 1fr; }
  .sp-header{ padding: 0 14px; }
  .sp-footer{ padding: 0 14px; flex-direction: column; gap: 4px; height: auto; padding: 10px 14px; }
  .sp-footer-links{ gap: 12px; }
}