/* ===========================================================
   modern.css — โทนทันสมัยสำหรับหน้า ผลงาน / รายละเอียด / ติดต่อ / แท็ก
   แบรนด์สีเขียว #549D0B → #316708  | ฟอนต์ Noto Sans Thai
   =========================================================== */
:root{
  --brand-1:#549D0B;
  --brand-2:#316708;
  --brand-ink:#2a560a;
  --brand-soft:#eef6e6;
  --ink:#1f2937;
  --muted:#6b7280;
  --card-radius:18px;
  --shadow-sm:0 4px 18px rgba(16,40,4,.08);
  --shadow-md:0 14px 44px rgba(16,40,4,.16);
}

/* ---------- Hero ---------- */
.hero-modern{position:relative;overflow:hidden;isolation:isolate;}
.hero-modern-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);z-index:-2;}
.hero-modern::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(49,103,8,.93) 0%,rgba(84,157,11,.80) 100%);}
.hero-modern-inner{padding:74px 15px;text-align:center;color:#fff;}
.hero-eyebrow{display:inline-block;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(6px);
  padding:6px 18px;border-radius:999px;font-size:14px;letter-spacing:.3px;
  margin-bottom:18px;color:#fff;}
.hero-title{font-size:clamp(28px,5vw,46px)!important;line-height:1.2!important;
  font-weight:700!important;color:#fff!important;margin:0 0 14px!important;
  text-shadow:0 2px 22px rgba(0,0,0,.28);}
.hero-sub{max-width:740px;margin:0 auto!important;color:rgba(255,255,255,.92)!important;
  font-size:17px;line-height:1.75;}
.hero-divider{width:74px;height:4px;border-radius:4px;background:#fff;opacity:.85;
  margin:22px auto 0;}

/* ---------- Section helpers ---------- */
.section-modern{padding:66px 0;}
.eyebrow-dark{display:inline-block;color:var(--brand-ink);background:var(--brand-soft);
  border-radius:999px;padding:5px 16px;font-size:14px;font-weight:600;margin-bottom:12px;}
.section-title{font-weight:700!important;color:#1f2937!important;}
.panel-modern{background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);
  border:1px solid #eef0ee;padding:28px;}

/* ---------- Contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.contact-card{background:#fff;border:1px solid #eef0ee;border-radius:var(--card-radius);
  padding:26px 22px;box-shadow:var(--shadow-sm);transition:.3s ease;text-decoration:none;display:block;}
.contact-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.contact-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:24px;color:#fff;margin-bottom:16px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));}
.contact-icon.line{background:linear-gradient(135deg,#06C755,#04a544);}
.contact-icon.fb{background:linear-gradient(135deg,#1877f2,#0d5fc4);}
.contact-card .label{font-size:14px;color:var(--muted);margin-bottom:4px;}
.contact-card .value{font-size:19px;color:#1f2937;font-weight:600;word-break:break-word;}

/* ---------- Product detail ---------- */
.pd-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md);}
.pd-media img{width:100%;display:block;border-radius:22px;transition:transform .5s ease;}
.pd-media:hover img{transform:scale(1.04);}
.pd-badge{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);
  color:var(--brand-ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;
  margin-bottom:14px;}
.pd-title{font-size:clamp(24px,3.5vw,32px)!important;font-weight:700!important;
  color:var(--brand-ink)!important;line-height:1.3!important;margin:0 0 10px!important;}
.pd-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);
  font-size:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid #eef0ee;}
.pd-stars{color:#FFA700;letter-spacing:2px;}
.pd-content{color:#374151;line-height:1.85;}
.pd-content table tr td{font-size:14px;}
.pd-cta{margin-top:24px;}
@media(min-width:992px){.pd-sticky{position:sticky;top:100px;}}

/* ---------- Article / Blog ---------- */
.post-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #eef0ee;
  border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s ease;}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.post-card a{text-decoration:none;}
.post-card-thumb{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;}
.post-card-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.post-card-meta{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap;}
.post-card-title{font-size:18px;line-height:1.5;font-weight:700;color:#1f2937;margin:0 0 10px;}
.post-card:hover .post-card-title{color:var(--brand-ink);}
.post-card-excerpt{font-size:14px;color:#5b6470;line-height:1.7;margin:0 0 16px;flex:1;}
.post-card-more{font-size:14px;font-weight:600;color:var(--brand-ink);}

/* article body */
.article-wrap{max-width:820px;margin:0 auto;}
.article-cover{width:100%;border-radius:20px;box-shadow:var(--shadow-md);margin-bottom:8px;}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin:8px 0 22px;}
.article-body{color:#374151;line-height:1.95;font-size:17px;}
.article-body h2{font-size:24px;font-weight:700;color:var(--brand-ink);margin:30px 0 12px;}
.article-body h3{font-size:19px;font-weight:700;color:#1f2937;margin:22px 0 8px;}
.article-body p{margin-bottom:14px !important;}
.article-body ul{padding-left:22px;margin-bottom:16px;}
.article-body li{margin-bottom:8px;color:#374151;}
.summary-box{background:var(--brand-soft);border-left:5px solid var(--brand-1);border-radius:14px;
  padding:20px 22px;margin:8px 0 24px;}
.summary-box .summary-label{font-weight:700;color:var(--brand-ink);margin-bottom:6px;display:block;}
.takeaways{background:#fff;border:1px solid #eef0ee;border-radius:16px;padding:22px 24px;margin:24px 0;
  box-shadow:var(--shadow-sm);}
.takeaways h3{font-size:18px;font-weight:700;color:var(--brand-ink);margin:0 0 12px;}
.takeaways ul{margin:0;padding-left:0;list-style:none;}
.takeaways li{position:relative;padding-left:30px;margin-bottom:10px;color:#374151;line-height:1.6;}
.takeaways li:before{content:"\f058";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--brand-1);
  position:absolute;left:0;top:1px;}

/* FAQ (AEO) */
.faq-section{margin-top:36px;}
.faq-item{background:#fff;border:1px solid #eef0ee;border-radius:14px;padding:18px 22px;margin-bottom:14px;
  box-shadow:var(--shadow-sm);}
.faq-item .faq-q{font-weight:700;color:#1f2937;font-size:17px;margin:0 0 8px;display:flex;gap:10px;}
.faq-item .faq-q i{color:var(--brand-1);}
.faq-item .faq-a{color:#4b5563;line-height:1.8;margin:0;padding-left:26px;}

/* ---------- Sitemap (HTML) ---------- */
.sitemap-col{height:100%;}
.sitemap-col h3{font-size:18px;font-weight:700;color:var(--brand-ink);margin:0 0 16px;
  padding-bottom:10px;border-bottom:2px solid var(--brand-soft);display:flex;align-items:center;gap:8px;}
.sitemap-list{list-style:none;padding:0;margin:0;}
.sitemap-list li{margin-bottom:11px;}
.sitemap-list a{color:#374151;text-decoration:none;display:inline-flex;align-items:flex-start;gap:8px;
  line-height:1.5;transition:.2s ease;}
.sitemap-list a:before{content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;
  color:var(--brand-1);margin-top:2px;}
.sitemap-list a:hover{color:var(--brand-ink);transform:translateX(3px);}
.footer-copyright a.sitemap-link{color:#fff !important;text-decoration:underline;}

/* ---------- Floating contact button (FAB) ---------- */
.fab-dock{position:fixed;right:18px;bottom:18px;z-index:990;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.fab-btn{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:50%;color:#fff !important;font-size:24px;text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.22);transition:transform .25s ease,box-shadow .25s ease;animation:fabIn .4s ease both;}
.fab-btn:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.3);color:#fff !important;}
.fab-phone{background:linear-gradient(135deg,#e23b3b,#c0140e);}
.fab-messenger{background:linear-gradient(135deg,#0a7cff,#0d5fc4);}
.fab-line{background:linear-gradient(135deg,#06C755,#04a544);}
.fab-btn .fab-label{position:absolute;right:70px;white-space:nowrap;background:#1f2937;color:#fff;
  font-family:'Noto Sans Thai',sans-serif;font-size:14px;padding:8px 14px;border-radius:10px;
  opacity:0;transform:translateX(10px);pointer-events:none;transition:.25s ease;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.fab-btn .fab-label:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  border-left:6px solid #1f2937;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.fab-btn:hover .fab-label{opacity:1;transform:translateX(0);}
.fab-phone:before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;z-index:-1;
  animation:fabPulse 2s ease-out infinite;}
@keyframes fabPulse{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.85);opacity:0;}}
@keyframes fabIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.fab-dock .fab-btn:nth-child(1){animation-delay:.05s;}
.fab-dock .fab-btn:nth-child(2){animation-delay:.12s;}
.fab-dock .fab-btn:nth-child(3){animation-delay:.19s;}
@media(max-width:767px){
  .fab-dock{right:14px;bottom:14px;gap:12px;}
  .fab-btn{width:52px;height:52px;font-size:21px;}
  .fab-btn .fab-label{display:none;}
}

/* ---------- Responsive ---------- */
@media(max-width:767px){
  .section-modern{padding:42px 0;}
  .hero-modern-inner{padding:54px 15px;}
}