/* ══════════════════════════════════
   NEWS / ARTICLES — Tmax ENERGY
   ใช้ token จาก main.css ทั้งหมด (--teal, --r, --sh, --font-th)
   ห้ามประกาศสีใหม่ในไฟล์นี้ นอกจากเฉดที่ derive จาก token เดิม
══════════════════════════════════ */

/* ─── การ์ดบทความ (ใช้ร่วมกัน 3 ที่: หน้าแรก / listing / related) ─── */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
}
.news-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.news-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-lg);
  border-color:rgba(0,181,200,.35);
}
.nc-thumb{
  display:block;position:relative;
  aspect-ratio:1200/630;background:var(--light);
  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:22px 24px 24px}
.nc-cat{
  align-self:flex-start;
  font-family:var(--font-en);font-size:.66rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-l);
  padding:4px 11px;border-radius:100px;margin-bottom:12px;
}
.nc-title{
  font-size:1.06rem;font-weight:700;line-height:1.5;
  color:var(--charcoal);margin-bottom:10px;
}
.nc-title a{transition:color .2s}
.news-card:hover .nc-title a{color:var(--teal)}
.nc-ex{
  font-size:.88rem;color:var(--gray);line-height:1.75;
  margin-bottom:18px;flex:1;
}
.nc-date{
  font-size:.78rem;color:var(--gray-l);
  display:flex;align-items:center;gap:7px;
}
.nc-date .svg-icon{width:.9rem;height:.9rem}

/* ─── บล็อกข่าวสารบนหน้าแรก ─── */
.news-home{background:var(--light)}
.news-more{display:flex;justify-content:flex-end;margin-top:34px}
.news-more a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:700;color:var(--teal);
  padding-bottom:3px;border-bottom:2px solid var(--teal);
  transition:gap .25s ease;
}
.news-more a:hover{gap:14px}
.news-more .svg-icon{width:1rem;height:1rem}

/* ─── หน้า listing ─── */
.news-page{padding-top:150px;padding-bottom:90px}
.news-page-head{margin-bottom:52px}
.news-count{font-size:.86rem;color:var(--gray);margin-top:6px}

.pagination{
  display:flex;justify-content:center;align-items:center;
  gap:8px;margin-top:64px;flex-wrap:wrap;
}
.pg-item{
  min-width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:var(--r);
  font-family:var(--font-en);font-size:.9rem;font-weight:700;
  color:var(--charcoal);background:var(--white);
  border:1px solid rgba(0,0,0,.09);
  transition:all .22s ease;
}
.pg-item:hover{border-color:var(--teal);color:var(--teal)}
.pg-item.active{
  background:var(--teal);color:var(--white);
  border-color:var(--teal);box-shadow:var(--sh-teal);
}
.pg-item.disabled{opacity:.35;pointer-events:none}

/* ─── หน้าบทความ ─── */
.art-page{padding-top:150px;padding-bottom:90px}

/* ─── แถบโหมดพรีวิว (เห็นเฉพาะตอนดูตัวอย่างจากหลังบ้าน) ─── */
.preview-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:14px 20px;margin-bottom:22px;
  background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--r);
  color:#92400E;font-size:.87rem;
}
.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-th);font-size:.82rem;font-weight:700;
  color:#92400E;background:#fff;border:1px solid #FDE68A;
  padding:7px 16px;border-radius:100px;cursor:pointer;transition:all .2s;
}
.preview-bar .pv-close:hover{background:#92400E;color:#fff;border-color:#92400E}
.crumb{
  font-size:.82rem;color:var(--gray-l);
  margin-bottom:26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumb a{color:var(--gray);transition:color .2s}
.crumb a:hover{color:var(--teal)}
.crumb .cur{color:var(--charcoal);font-weight:600}

.art-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;align-items:start;
}

/* ─── หน้ารวมบทความ: ช่องค้นหาเป็น grid item แยก ─────────────
   จอใหญ่  → คอลัมน์ขวา แถวบน (เหมือนอยู่หัว sidebar ตามเดิม)
   จอแคบ   → แถวบนสุดของหน้า อยู่เหนือการ์ดทั้งหมด
   ใช้ grid-template-areas แทนการเขียน markup ซ้ำสองชุด
   จึงไม่มีปัญหา id="newsSearch" ซ้ำกันในหน้าเดียว              */
.news-wrap{
  grid-template-areas:
    "main search"
    "main side";
  /* ต้องกำหนดความสูงแถวเอง: แถวบนพอดีกล่องค้นหา แถวล่างรับที่เหลือทั้งหมด
     ถ้าปล่อยเป็น auto ทั้งคู่ grid จะเฉลี่ยความสูงของคอลัมน์ซ้าย (ที่คร่อม
     สองแถว) ให้แถวละครึ่ง แล้วหมวดหมู่จะตกไปอยู่กลางหน้าห่างจากช่องค้นหามาก */
  grid-template-rows:auto 1fr;
  column-gap:48px;row-gap:22px;
}
.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:var(--white);
  border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-lg);
  padding:44px 48px 48px;
}
.art-title{
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  font-weight:800;line-height:1.35;color:var(--charcoal);
  margin-bottom:20px;
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:.83rem;color:var(--gray);
  padding-bottom:22px;margin-bottom:28px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.art-meta .mi{display:inline-flex;align-items:center;gap:7px}
.art-meta .svg-icon{width:.95rem;height:.95rem;color:var(--teal)}
.art-cover{
  width:100%;border-radius:var(--r);
  margin-bottom:32px;
  /* แท็ก width/height ในหน้าเว็บเป็น 1200x630 เสมอ (กัน layout shift)
     ถ้าไฟล์จริงสัดส่วนไม่ตรง object-fit จะครอบให้แทนการยืดภาพให้เพี้ยน
     ต้องมี height:auto ด้วย ไม่งั้นเบราว์เซอร์ใช้ height="630" จาก HTML
     เป็นความสูงจริง แล้ว aspect-ratio จะไม่ถูกนำมาคิดเลย */
  height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--light);
}

/* เนื้อหาที่แอดมินเขียน — คุมเฉพาะแท็กที่ sanitizer อนุญาต */
.article-body{font-size:1rem;line-height:1.9;color:var(--charcoal);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(--charcoal);margin-top:2em;
  padding-left:14px;border-left:4px solid var(--teal);
}
.article-body h3{font-size:1.12rem;font-weight:700;margin-top:1.7em;color:var(--charcoal)}
.article-body p{color:#3A3F4A}
.article-body a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--teal-d)}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li{margin-top:.5em;color:#3A3F4A}
.article-body li::marker{color:var(--teal)}
.article-body strong{font-weight:700;color:var(--charcoal)}
.article-body img{border-radius:var(--r);margin:1.6em 0}
.article-body blockquote{
  padding:18px 24px;border-left:4px solid var(--teal);
  background:var(--teal-l);border-radius:0 var(--r) var(--r) 0;
  color:var(--charcoal);font-size:.97rem;
}
.article-body blockquote p{margin:0}
/* ตาราง: บนจอแคบให้เลื่อนซ้ายขวาแทนการบีบช่องจนอ่านไม่ออก
   เงาสองข้างบอกว่ายังมีเนื้อหาเลยขอบไปอีก — ใช้ background-attachment:local
   ทำให้เงาหายเองเมื่อเลื่อนสุดข้างนั้น ไม่ต้องใช้ JS */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--white) 30%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,var(--white) 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;
}
/* main.css ตั้ง ::-webkit-scrollbar-track เป็นสีเข้มไว้สำหรับทั้งหน้า
   แถบเลื่อนใต้ตารางจึงกลายเป็นแถบดำหนา ทับไว้ให้เบาลงเฉพาะตรงนี้ */
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-track{background:var(--light);border-radius:4px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px}

.article-body table{
  width:100%;border-collapse:collapse;font-size:.9rem;
  border:1px solid rgba(0,0,0,.09);
}
.table-scroll table{margin:0}
.article-body th{
  background:var(--charcoal);color:var(--white);
  font-weight:700;text-align:left;padding:12px 14px;
}
.article-body td{padding:11px 14px;border-top:1px solid rgba(0,0,0,.07)}
.article-body tbody tr:nth-child(even){background:var(--light)}
.article-body hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:2.2em 0}

/* CTA ท้ายบทความ */
.art-cta{
  margin-top:44px;padding:30px 32px;
  background:linear-gradient(135deg,var(--charcoal),var(--dark));
  border-radius:var(--r-lg);color:var(--white);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.art-cta-txt h4{font-size:1.1rem;font-weight:800;margin-bottom:6px}
.art-cta-txt p{font-size:.86rem;color:rgba(255,255,255,.55)}
.art-cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--teal);color:var(--white);
  padding:13px 26px;border-radius:100px;
  font-size:.9rem;font-weight:700;white-space:nowrap;
  transition:all .25s;
}
.art-cta-btn:hover{background:var(--teal-d);transform:translateY(-2px);box-shadow:var(--sh-teal)}

.art-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(0,0,0,.07);
}
.art-tags-label{font-size:.82rem;color:var(--gray);display:inline-flex;align-items:center;gap:7px}
.art-tags-label .svg-icon{width:.95rem;height:.95rem;color:var(--teal)}
.tag-chip{
  font-size:.78rem;color:var(--gray);
  background:var(--light);padding:6px 13px;border-radius:100px;
  border:1px solid transparent;transition:all .2s;
}
.tag-chip:hover{color:var(--teal);background:var(--teal-l);border-color:rgba(0,181,200,.3)}

/* ─── Sidebar ─── */
.art-side{position:sticky;top:130px;display:flex;flex-direction:column;gap:22px}
.side-box{
  background:var(--white);
  border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-lg);padding:24px;
}
.side-h{
  font-size:1rem;font-weight:800;color:var(--charcoal);
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.side-search{position:relative}
.side-search input{
  width:100%;padding:13px 16px 13px 42px;
  font-family:var(--font-th);font-size:.88rem;color:var(--charcoal);
  border:1px solid rgba(0,0,0,.12);border-radius:100px;
  background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;
}
.side-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}
.side-search .svg-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;color:var(--gray-l);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:11px 0;font-size:.89rem;color:var(--charcoal);
  border-bottom:1px solid rgba(0,0,0,.05);transition:color .2s,padding-left .2s;
}
.side-list a:last-child{border-bottom:none}
.side-list a:hover{color:var(--teal);padding-left:5px}
.side-list .cnt{
  font-family:var(--font-en);font-size:.74rem;font-weight:700;
  color:var(--gray-l);background:var(--light);
  padding:2px 9px;border-radius:100px;min-width:30px;text-align:center;
}
.side-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ─── Related ─── */
.related{margin-top:72px}
.related-h{
  font-size:1.35rem;font-weight:800;color:var(--charcoal);
  margin-bottom:28px;padding-left:14px;border-left:4px solid var(--teal);
}

/* ─── ไม่มีบทความ / ผลค้นหาว่าง ─── */
.news-empty{
  text-align:center;padding:70px 24px;
  background:var(--white);border:1px dashed rgba(0,0,0,.14);
  border-radius:var(--r-lg);color:var(--gray);
}

/* ─── พื้นหลังหน้า news (ให้ต่างจากการ์ดสีขาว) ─── */
body.news-body{background:var(--light)}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1024px){
  /* ต้องเป็น minmax(0,1fr) ไม่ใช่ 1fr
     grid item ปริยายมี min-width:auto ซึ่งแปลว่า "ห้ามแคบกว่าเนื้อหาข้างใน"
     ถ้าใช้ 1fr เฉย ๆ ตารางที่ตั้ง min-width ไว้จะดันคอลัมน์ให้กว้างตามตัวเอง
     แทนที่จะปล่อยให้ .table-scroll เลื่อน แล้วเนื้อหาจะล้นออกนอกจอ */
  .art-wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .art-main{min-width:0}
  /* หน้ารวมบทความบนจอแคบ: ค้นหา -> การ์ด -> หมวดหมู่/แท็ก */
  .news-wrap{
    grid-template-areas:"search" "main" "side";
    grid-template-rows:none;   /* ล้างค่าของจอใหญ่ ไม่งั้นเหลือแค่ 2 แถว */
    row-gap:26px;
  }
  .art-side{position:static;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
}
@media(max-width:768px){
  .news-page,.art-page{padding-top:120px;padding-bottom:110px}
  .news-grid{gap:24px}
  .art-main{padding:28px 22px 32px;border-radius:var(--r)}
  .article-body{font-size:.96rem;line-height:1.85}
  .art-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .art-cta-btn{width:100%;justify-content:center}
  /* บังคับความกว้างขั้นต่ำให้ตาราง แล้วปล่อยให้ wrapper เลื่อนเอา
     ไม่ใช้ white-space:nowrap เพราะช่องที่ข้อความยาวจะกว้างเกินจำเป็น */
  .table-scroll table{min-width:560px}
  .article-body th,.article-body td{padding:10px 12px}
  .related{margin-top:52px}
  .pagination{margin-top:44px}
}