/* ══════════════════════════════════════════════════════════════
   NEWS / ARTICLES — FLY TECH (kapcrop.co.th)
   ใช้ token จาก style.pc.css ทั้งหมด (--primary, --radius-lg, --shadow-soft, --font-site)
   ห้ามประกาศสีใหม่ในไฟล์นี้ นอกจากเฉดที่ derive จาก token เดิม
   โหลดหลัง style.pc.css / style.mobile.css เสมอ (ดู admin/news/templates/_chrome.php)
══════════════════════════════════════════════════════════════ */
/* ─── hero ของส่วนบทความ ───
   ใช้คลาส .policy-hero ร่วมด้วย เพื่อรับกฎ "เว้นที่ให้ header แคปซูลด้วย border-top โปร่งใส"
   ที่ style.pc.css / style.mobile.css ตั้งไว้ให้ .policy-hero อยู่แล้ว */
.news-hero{
  background:
    radial-gradient(1100px 560px at 15% 15%, rgba(0,169,135,.22), transparent 60%),
    linear-gradient(180deg, #06211c, #02100d);
  background-origin: border-box;
  color:#fff;
  padding:52px 0 44px;
}
.news-hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.5rem;
}
.news-crumb{
  font-size:13px;color:rgba(255,255,255,.55);
  margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.news-crumb a{color:var(--primary);font-weight:600;text-decoration:none}
.news-crumb a:hover{color:#5ee8cc}
.news-crumb span{opacity:.6}
.news-crumb .cur{opacity:.85;color:#e5e7eb}
.news-hero-cat{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#032b24;background:var(--primary);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.news-hero-title{
  font-size:clamp(26px, 3.6vw, 40px);
  font-weight:800;line-height:1.3;letter-spacing:.01em;
  max-width:920px;margin-bottom:10px;
}
.news-hero-title span{color:var(--primary)}
.news-hero-sub{font-size:15px;color:rgba(255,255,255,.7);max-width:62ch;line-height:1.7;margin-bottom:8px}
.news-hero-meta{font-size:13px;color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;gap:8px}
/* ─── พื้นเนื้อหา ─── */
.news-body{background:#f6f8f7;padding:44px 0 72px}
.news-body .container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
.art-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:40px;align-items:start;
}
/* หน้ารวมบทความ: ช่องค้นหาเป็น grid item แยก
   จอใหญ่ → คอลัมน์ขวา แถวบน (เหมือนอยู่หัว sidebar)
   จอแคบ → แถวบนสุดของหน้า อยู่เหนือการ์ดทั้งหมด
   ต้องกำหนดความสูงแถวเอง ไม่งั้น grid เฉลี่ยความสูงคอลัมน์ซ้ายให้แถวละครึ่ง
   แล้ว sidebar ตกไปอยู่กลางหน้า */
.news-wrap{
  grid-template-areas:
    "main search"
    "main side";
  grid-template-rows:auto 1fr;
  column-gap:40px;row-gap:20px;
}
.news-wrap .art-col{grid-area:main;min-width:0}
.news-wrap .news-search-box{grid-area:search}
.news-wrap .art-side{grid-area:side}
/* ─── หน้าบทความ ─── */
.art-main{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:36px 40px 40px;
  min-width:0;
}
.art-note{
  background:#FFFBEB;color:#92400E;border:1px solid #FDE68A;
  padding:12px 16px;border-radius:12px;font-size:.86rem;margin-bottom:20px;
}
.art-cover{
  width:100%;border-radius:14px;margin-bottom:26px;
  /* ต้องมี height:auto ไม่งั้นเบราว์เซอร์ใช้ height="630" จาก HTML เป็นความสูงจริง
     แล้ว aspect-ratio จะไม่ถูกนำมาคิด (บทเรียนจาก TMax) */
  height:auto;aspect-ratio:1200/630;object-fit:cover;background:#eef2f1;
}
.art-lead{
  font-size:1.02rem;line-height:1.8;color:#374151;
  border-left:4px solid var(--primary);
  padding:6px 0 6px 16px;margin-bottom:26px;
}
/* เนื้อหาที่แอดมินเขียน — คุมเฉพาะแท็กที่ sanitizer อนุญาต */
.article-body{font-size:1rem;line-height:1.9;color:var(--text-main);max-width:72ch}
.article-body > * + *{margin-top:1.15em}
.article-body h2{
  font-size:1.35rem;font-weight:800;line-height:1.45;color:var(--text-main);
  margin-top:2em;padding-bottom:8px;border-bottom:2px solid var(--primary);
}
.article-body h3{font-size:1.12rem;font-weight:700;margin-top:1.7em;color:var(--text-main)}
.article-body h4{font-size:1rem;font-weight:700;margin-top:1.4em}
.article-body p{color:#374151}
.article-body a{color:var(--primary-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--primary-deeper)}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li{margin-top:.5em;color:#374151}
.article-body li::marker{color:var(--primary)}
.article-body strong{font-weight:700;color:var(--text-main)}
.article-body img{border-radius:12px;margin:1.6em 0;height:auto}
.article-body figure{margin:1.6em 0}
.article-body figcaption{font-size:.84rem;color:var(--text-muted);text-align:center;margin-top:.5em}
.article-body blockquote{
  padding:16px 22px;border-left:4px solid var(--primary);
  background:var(--primary-soft);border-radius:0 12px 12px 0;
  color:var(--primary-deeper);font-size:.97rem;
}
.article-body blockquote p{margin:0;color:inherit}
.article-body code{font-size:.9em;background:#f3f4f6;padding:2px 6px;border-radius:6px}
.article-body pre{background:#0b1220;color:#e5e7eb;padding:16px 18px;border-radius:12px;overflow-x:auto;font-size:.88rem}
.article-body pre code{background:none;padding:0;color:inherit}
.article-body hr{border:none;border-top:1px solid var(--border-soft);margin:2.2em 0}
/* ตาราง: บนจอแคบให้เลื่อนซ้ายขวาแทนการบีบช่องจนอ่านไม่ออก
   เงาสองข้างบอกว่ายังมีเนื้อหาเลยขอบไปอีก ใช้ background-attachment:local ไม่ต้องใช้ JS */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.13),rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.13),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:38px 100%,38px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
  border-radius:12px;
}
.article-body table{
  width:100%;border-collapse:collapse;font-size:.9rem;
  border:1px solid var(--border-soft);
}
.table-scroll table{margin:0}
.article-body th{
  background:var(--primary-deeper);color:#fff;
  font-weight:700;text-align:left;padding:12px 14px;
}
.article-body td{padding:11px 14px;border-top:1px solid var(--border-soft);vertical-align:top}
.article-body tbody tr:nth-child(even){background:#f6f8f7}
/* CTA ท้ายบทความ */
.art-cta{
  margin-top:40px;padding:28px 30px;
  background:linear-gradient(135deg,#06211c,#02100d);
  border-radius:var(--radius-lg);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.art-cta-txt{flex:1 1 320px}
.art-cta-txt h4{font-size:1.1rem;font-weight:800;margin-bottom:6px;color:#fff}
.art-cta-txt p{font-size:.86rem;color:rgba(255,255,255,.62);line-height:1.6}
.art-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.art-cta .btn-secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.art-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--border-soft);
}
.art-tags-label{font-size:.82rem;color:var(--text-muted);font-weight:600}
.tag-chip{
  font-size:.78rem;color:var(--text-muted);text-decoration:none;
  background:#f3f4f6;padding:6px 13px;border-radius:999px;
  border:1px solid transparent;transition:all .2s;
}
.tag-chip:hover{color:var(--primary-dark);background:var(--primary-soft);border-color:rgba(0,169,135,.3)}
/* ─── Sidebar ─── */
.art-side{
  position:sticky;
  top:calc(var(--header-space, 96px) + 10px);
  display:flex;flex-direction:column;gap:20px;
}
.side-box{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:22px;
}
.side-h{
  font-size:1rem;font-weight:800;color:var(--text-main);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border-soft);
}
.side-search{position:relative;display:block}
.side-search input{
  width:100%;padding:12px 16px 12px 42px;
  font-family:var(--font-site);font-size:.9rem;color:var(--text-main);
  border:1px solid #d1d5db;border-radius:999px;
  background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;
}
.side-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,169,135,.18)}
.side-search .ui-icon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;color:var(--text-muted);pointer-events:none;
}
.side-list{display:flex;flex-direction:column}
.side-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;font-size:.9rem;color:var(--text-main);text-decoration:none;
  border-bottom:1px solid #f0f2f1;transition:color .2s,padding-left .2s;
}
.side-list a:last-child{border-bottom:none}
.side-list a:hover{color:var(--primary-dark);padding-left:5px}
.side-list .cnt{
  font-size:.74rem;font-weight:700;color:var(--text-muted);background:#f3f4f6;
  padding:2px 9px;border-radius:999px;min-width:30px;text-align:center;
}
.side-tags{display:flex;flex-wrap:wrap;gap:8px}
.side-contact p{font-size:.88rem;color:var(--text-muted);line-height:1.65;margin-bottom:14px}
.side-contact .btn-primary,.side-contact .btn-secondary{width:100%;margin-bottom:8px;text-decoration:none}
.side-contact .btn-secondary{background:var(--primary-soft);color:var(--primary-deeper);border-color:rgba(0,169,135,.3)}
/* ─── การ์ดบทความ (ใช้ร่วมกัน 3 ที่: หน้าแรก / listing / related) ─── */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px;
}
.news-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:rgba(0,169,135,.35)}
.nc-thumb{display:block;position:relative;aspect-ratio:1200/630;background:#eef2f1;overflow:hidden}
.nc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.news-card:hover .nc-thumb img{transform:scale(1.05)}
.nc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.nc-cat{
  align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary-deeper);background:var(--primary-soft);
  padding:4px 11px;border-radius:999px;margin-bottom:12px;
}
.nc-title{font-size:1.05rem;font-weight:700;line-height:1.5;color:var(--text-main);margin-bottom:10px}
.nc-title a{color:inherit;text-decoration:none;transition:color .2s}
.news-card:hover .nc-title a{color:var(--primary-dark)}
.nc-ex{font-size:.88rem;color:var(--text-muted);line-height:1.75;margin-bottom:16px;flex:1}
.nc-date{font-size:.78rem;color:#9ca3af}
/* ─── บล็อกบทความบนหน้าแรก ─── */
.news-home{background:#f6f8f7}
.news-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary-dark);margin-bottom:8px;
}
.news-more{display:flex;justify-content:center;margin-top:30px}
.news-more .btn-outline{text-decoration:none;padding:.7rem 1.4rem;font-size:.95rem}
/* ─── pagination ─── */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:44px;flex-wrap:wrap}
.pg-item{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:999px;font-size:.9rem;font-weight:700;text-decoration:none;
  color:var(--text-main);background:#fff;border:1px solid var(--border-soft);transition:all .2s;
}
.pg-item:hover{border-color:var(--primary);color:var(--primary-dark)}
.pg-item.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 10px 24px var(--primary-glow)}
.pg-item.disabled{opacity:.35;pointer-events:none}
/* ─── ไม่มีบทความ / ผลค้นหาว่าง ─── */
.news-empty{
  text-align:center;padding:60px 24px;background:#fff;
  border:1px dashed #d1d5db;border-radius:var(--radius-lg);color:var(--text-muted);
}
/* ─── Related ─── */
.related{margin-top:56px}
.related-h{font-size:1.35rem;font-weight:800;color:var(--text-main);margin-bottom:22px;padding-left:14px;border-left:4px solid var(--primary)}
/* ─── แถบโหมดพรีวิว (เห็นเฉพาะตอนดูตัวอย่างจากหลังบ้าน) ─── */
.preview-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:12px 18px;margin-bottom:22px;
  background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;
  color:#92400E;font-size:.86rem;
}
.preview-bar strong{font-weight:800}
.preview-bar .pv-sep{opacity:.45}
.preview-bar .pv-dot{width:9px;height:9px;border-radius:50%;background:#D97706;flex-shrink:0;animation:pv-blink 1.6s ease-in-out infinite}
@keyframes pv-blink{0%,100%{opacity:1}50%{opacity:.25}}
.preview-bar .pv-close{
  margin-left:auto;font-family:var(--font-site);font-size:.82rem;font-weight:700;
  color:#92400E;background:#fff;border:1px solid #FDE68A;padding:7px 16px;border-radius:999px;cursor:pointer;
}
.preview-bar .pv-close:hover{background:#92400E;color:#fff;border-color:#92400E}
/* ══════════════════════════════════
   RESPONSIVE (breakpoint เดียวกับ style.mobile.css = 980px)
══════════════════════════════════ */
@media (max-width:980px) {
/* ต้องเป็น minmax(0,1fr): grid item ปริยายมี min-width:auto
     ถ้าใช้ 1fr เฉย ๆ ตารางในบทความจะดันคอลัมน์ให้กว้างตามตัวเอง แทนที่จะปล่อยให้ .table-scroll เลื่อน */
.art-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
.news-wrap{
    grid-template-areas:"search" "main" "side";
    grid-template-rows:none;   /* ล้างค่าของจอใหญ่ ไม่งั้นเหลือแค่ 2 แถว */
    row-gap:22px;
  }
.art-side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.news-body{padding:30px 0 56px}
}
@media (max-width:600px) {
.news-hero{padding:36px 0 30px}
.news-body .container{padding:0 1rem}
.art-main{padding:22px 18px 26px;border-radius:14px}
.article-body{font-size:.96rem;line-height:1.85}
.art-cta{padding:22px 20px}
.art-cta-btns{width:100%}
.art-cta-btns .btn-primary,.art-cta-btns .btn-secondary{flex:1 1 100%;justify-content:center}
/* บังคับความกว้างขั้นต่ำให้ตาราง แล้วปล่อยให้ wrapper เลื่อนเอา */
.table-scroll table{min-width:560px}
.article-body th,.article-body td{padding:10px 12px}
.news-grid{gap:18px}
.related{margin-top:40px}
.pagination{margin-top:32px}
}