/*
 Theme Name: PressBook News Child (custom)
 Template:   pressbook
*/

/* =======================
   GLOBAL GRID CONTROLS
======================= */
:root{
  --grid-max: min(1600px, 96vw);
  --grid-cols: 5;
  --grid-gap: 18px;
  --grid-pad: 18px;

  /* WP global width unlock */
  --wp--style--global--content-size: 100vw;
  --wp--style--global--wide-size: 100vw;

  /* ครึ่งหนึ่งของ gap ใช้คุมขอบด้านในของคอลัมน์ */
  --chipbar-edge-trim: calc(var(--grid-gap) / 2);

  /* ค่าหดเพิ่มของแถบ (ยิ่งมาก แถบยิ่งสั้นเข้าไปจากขอบคอลัมน์) */
  --chipbar-tweak: 22px; /* เดสก์ท็อปเริ่มต้น */
  --chipbar-cut: 80px;   /* เดสก์ท็อปเริ่มต้น: หดแถบออกจากขอบต่อข้าง */

  /* ความสูงแถบ */
  --chipbar-height: 48px;
}

/* =======================
   0) Layout: ลบ Sidebar + ขยายคอนเทนต์
======================= */
#left-sidebar,
#right-sidebar,
#secondary,
.sidebar,
.site-sidebar,
.site-sidebar *,
.site-sidebar .widget,
.sidebar-left,
.sidebar-right,
.widget-area,
.pb-sidebar,
.primary-sidebar,
.secondary-sidebar,
.s1, .s2 {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pb-content-sidebar,
.content-sidebar,
.sidebar-content {
  display: block !important;
  grid-template-columns: 1fr !important; /* (แก้พิมพ์ตก) */
}

/* ---------- ขยายคอนเทนเนอร์ทุกชั้นของธีมให้เต็มจอ ---------- */
.site,
#page,
.wrap,
.container,
.content-wrap,
.pb-container,
.pb-content,
.pb-content-columns,
.site-content .wrap,
.site-content .container,
.site-content,
#content,
.content-area,
#primary,
.pb-content-cover,
.pb-content-sidebar #primary,
.site-main {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  display: block !important;
}

/* ====== Helper: Parent ของบล็อก (คุม padding ด้วย --grid-pad) ====== */
.entry-content > .wp-block-group.alignwide,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-query,
.wp-block-group.alignwide,
.wp-block-group.alignfull,
.wp-block-query {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--grid-pad) !important;
  padding-right: var(--grid-pad) !important;
}

/* =======================
   1) Base
======================= */
body { background:#000; color:#fff; line-height:1.6; margin:0; font-family: Arial, sans-serif; }
a { color:#1e90ff; text-decoration:none }
a:hover { text-decoration:underline }

/* =======================
   2) Kill white overlays / borders
======================= */
body.pb-content-cover .pb-content-cover > .pb-content-columns::before,
body.pb-content-cover .pb-content-cover > .pb-content-columns::after {
  content:none !important;
  display:none !important;
}
.pb-content-columns,
.pb-content-columns * {
  box-shadow:none !important;
  border-color:transparent !important;
}

/* =======================
   3) Header & Menu
======================= */
.site-header {
  background:#000; border-bottom:1px solid #111; padding:12px 0; text-align:center;
}
.site-title a { color:#fff; font-size:2rem; font-weight:700 }
.site-description { color:#aaa }
.main-navigation { margin:16px 0; text-align:center }
.main-navigation ul { list-style:none; margin:0; padding:0 }
.main-navigation li { display:inline-block; margin:0 6px }
.main-navigation a {
  display:inline-block; padding:8px 14px; border-radius:20px;
  background:#1e90ff; color:#fff; font-size:14px
}
.main-navigation a:hover { background:#63b3ff }

/* =======================
   4) Force posts visible
======================= */
.home article, .blog article, .archive article, .search article {
  display:block !important; visibility:visible !important; opacity:1 !important;
}
.home .page-title, .blog .page-title, .archive .page-title, .search .page-title { display:none; }

/* =========================================================
   5A) Grid layout – classic
========================================================= */
.home .site-main,
.blog .site-main,
.archive .site-main,
.search .site-main {
  background:transparent !important;

  max-width: var(--grid-max) !important;
  width: 100% !important;

  margin:24px auto;
  padding:0 var(--grid-pad);
  display:grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0,1fr));
  gap: var(--grid-gap);
}
.home .site-main > .hfeed,
.home .site-main > .posts,
.home .site-main > .pb-posts-list,
.home .site-main > .blog-layout,
.blog .site-main > .hfeed,
.blog .site-main > .posts,
.blog .site-main > .pb-posts-list,
.blog .site-main > .blog-layout,
.archive .site-main > .hfeed,
.archive .site-main > .posts,
.archive .site-main > .pb-posts-list,
.archive .site-main > .blog-layout,
.search .site-main > .hfeed,
.search .site-main > .posts,
.search .site-main > .pb-posts-list,
.search .site-main > .blog-layout {
  background:transparent !important;
  display:grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0,1fr));
  gap: var(--grid-gap);
  grid-column:1 / -1;

  max-width: var(--grid-max) !important;
  margin:0 auto !important;

  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.home .site-main ul,
.blog .site-main ul,
.archive .site-main ul,
.search .site-main ul { list-style:none; margin:0; padding:0; }

/* card item */
.wp-block-post {
  background:#111; color:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.home .site-main article,
.blog .site-main article,
.archive .site-main article,
.search .site-main article { border:0 !important; }
.home .site-main article .entry-inner,
.blog .site-main article .entry-inner,
.archive .site-main article .entry-inner,
.search .site-main article .entry-inner {
  background:transparent !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important;
}

/* รูป 16:9 */
.wp-block-post-featured-image img {
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
}

/* title */
.wp-block-post-title {
  font-size:18px; font-weight:600; line-height:1.4; margin:12px 14px 18px;
}
.wp-block-post-title a { color:#fff !important; text-decoration:none }
.wp-block-post-title a:hover { color:#1e90ff !important; }

/* hide meta/date */
.wp-block-post-date { display:none; }
.entry-meta, .cat-links, .posted-on { display:none !important; }

/* =========================================================
   5B) Gutenberg / Query Loop
========================================================= */
.wp-block-query .wp-block-post-template {
  list-style:none !important;
  display:grid !important;
  grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
  gap: var(--grid-gap) !important;
  margin:24px auto !important;

  max-width: var(--grid-max) !important;
  width: 100% !important;

  padding:0 var(--grid-pad) !important;
}
.wp-block-query,
.wp-block-post-template,
.wp-block-post,
.wp-block-post .wp-block-group {
  background:transparent !important; border:0 !important; box-shadow:none;
}

/* ---------- Overlay Badges ---------- */
.card-thumb .thumb-wrap{ position: relative; }
.card-thumb .thumb-wrap .wp-block-post-featured-image,
.card-thumb .thumb-wrap .wp-block-post-featured-image a{ display:block; }

.card-thumb .thumb-wrap .badge{
  position:absolute; z-index:3; display:inline-block;
  padding:4px 8px; font-size:12px; line-height:1; color:#fff;
  background:rgba(0,0,0,.65); border-radius:6px;
  text-decoration:none !important; backdrop-filter:blur(2px);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.card-thumb .thumb-wrap .badge p{ margin:0; }

.card-thumb .thumb-wrap .badge-cat   { top:8px;  right:8px;  background:#1e90ff; }
.card-thumb .thumb-wrap .badge-views { bottom:8px; left:8px; }
.card-thumb .thumb-wrap .badge-time  { bottom:8px; right:8px; background:#f44336; }

.card-thumb .thumb-wrap .badge-cat a {
  color:#fff !important; font-weight:600; text-decoration:none !important;
}
.card-thumb .thumb-wrap .badge-views,
.card-thumb .thumb-wrap .badge-time{
  background:#0f1011 !important;
  background:linear-gradient(180deg, rgba(28,30,32,.95) 0%, rgba(15,16,17,.95) 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important; font-weight:700 !important; font-size:12px !important;
  line-height:1.1 !important; padding:2px 6px !important; border-radius:8px !important;
  text-shadow:0 1px 0 rgba(0,0,0,.4) !important; box-shadow:0 1px 2px rgba(0,0,0,.45) !important;
  backdrop-filter:none !important;
}
.wp-block-post-featured-image { position: relative; }
.wp-block-post-featured-image a { display:block; }
.badge.badge-views { position: absolute; left:8px; bottom:8px; z-index:3; }
.badge.badge-time  { position: absolute; right:8px; bottom:8px; z-index:3; }

/* =======================
   6) Responsive
======================= */
@media (min-width:1025px){
  body.home{ --grid-cols: 5 !important; }
}
@media (max-width:1280px){ :root{ --grid-cols: 4; } }
@media (max-width:1024px){
  :root{ --grid-cols: 3; }
  .main-navigation a{font-size:13px;padding:6px 10px}
}
@media (max-width:768px){
  :root{ --grid-cols: 2; }
  .main-navigation li{display:block;margin:6px 0}
}
@media (max-width:480px){
  :root{ --grid-cols: 1; }
  .card-thumb .thumb-wrap .badge{ font-size:11px; padding:3px 6px; }
}

/* =======================
   7) Footer
======================= */
.site-footer{
  background:#111;color:#777;text-align:center;
  padding:20px;margin-top:40px;border-top:1px solid #222
}

/* =======================
   EXTRA: บังคับหน้าแรก/Query Loop ให้กว้างเต็ม (แต่จำกัดที่กริด)
======================= */
.home .entry-content > .wp-block-group,
.home .entry-content > .wp-block-group.alignwide,
.home .entry-content > .wp-block-group.alignfull,
.home .entry-content > .wp-block-query,
.home .wp-block-group,
.home .wp-block-group.alignwide,
.home .wp-block-group.alignfull,
.home .wp-block-query {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.home .wp-block-query .wp-block-post-template{
  max-width: var(--grid-max) !important;
  width:100% !important;
}
.home .wp-block-post-template.is-layout-grid{
  display:grid !important;
  grid-template-columns: repeat(var(--grid-cols), minmax(0,1fr)) !important;
  gap: var(--grid-gap) !important;
}
.home .wp-block-post,
.home .wp-block-post .wp-block-group{
  width:auto !important;
  max-width:none !important;
}

/* =======================
   FINAL OVERRIDE (แรงขึ้นเฉพาะหน้าแรก)
======================= */
.home [class*="container"],
.home [class*="wrap"],
.home [class*="inner"],
.home [class*="boxed"]{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.home .site-content > *,
.home .site-main > *,
.home .entry-content > *{
  max-width:none !important;
  width:100% !important;
}

/* =======================
   HEADER FIX
======================= */
.site-header,
.site-header > *,
.site-header [class*="wrap"],
.site-header [class*="container"],
.site-header [class*="inner"]{
  max-width: var(--grid-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-pad);
  padding-right: var(--grid-pad);
}
.site-header .site-header-inner,
.site-header .header-inner,
.site-header .branding-container,
.site-header .site-branding{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-header form.search-form{ margin-left: auto; }
.site-header form.search-form input[type="search"]{
  width: 520px;
  max-width: 100%;
}

/* =======================
   EXTRA: ขยายขนาด Badge
======================= */
.card-thumb .thumb-wrap .badge{
  font-size: 14px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
.card-thumb .thumb-wrap .badge-cat{
  font-size: 14px !important;
  padding: 6px 10px !important;
}
.card-thumb .thumb-wrap .badge-views,
.card-thumb .thumb-wrap .badge-time{
  font-size: 13.5px !important;
  padding: 4px 9px !important;
  border-radius: 10px !important;
}
.card-thumb .thumb-wrap .badge-views .eye{
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px !important;
}
.card-thumb .thumb-wrap .badge-views .num{
  font-size: 13.5px !important;
}
@media (max-width: 480px){
  .card-thumb .thumb-wrap .badge{
    font-size: 12.5px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
  .card-thumb .thumb-wrap .badge-views .eye{
    width: 14px !important;
    height: 14px !important;
  }
}

/* =======================
   QUERY LOOP PAGINATION
======================= */
.wp-block-query .wp-block-query-pagination{
  margin:28px auto 40px !important;
  text-align:center;
}
.wp-block-query .wp-block-query-pagination .wp-block-query-pagination-numbers{
  display:flex !important;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.wp-block-query .page-numbers{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  min-width:42px; height:40px;
  padding:0 14px;
  border-radius:10px;
  background:#2b2b2b !important;
  color:#fff !important;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-weight:600;
  line-height:1;
}
.wp-block-query .page-numbers:hover{ background:#3a3a3a !important; }
.wp-block-query .page-numbers.current{
  background:#1e90ff !important;
  color:#fff !important;
  border-color:transparent !important;
}
.wp-block-query .wp-block-query-pagination-next,
.wp-block-query .wp-block-query-pagination-previous{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  min-width:42px; height:40px;
  padding:0 14px;
  border-radius:10px;
  background:#2b2b2b !important;
  color:#fff !important;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-weight:600;
  line-height:1;
  margin-left:8px;
}
.wp-block-query .wp-block-query-pagination-next:hover,
.wp-block-query .wp-block-query-pagination-previous:hover{
  background:#3a3a3a !important; /* ? แก้โค้ดสีให้ถูก */
}

/* =========================================================
   TERM CHIP BAR + SORT  (FINAL, CLEAN)
   - ชิปชมพูอยู่บนแทร็กสีเข้ม (แถบอยู่กึ่งกลาง) ไม่หลุด/ไม่ซ้อนอิโมจิ
   - ปุ่มเรียงลำดับอยู่ขวาแบบปุ่มในภาพตัวอย่าง
========================================================= */

/* ปรับ --chipbar-cut ตามขนาดจอ */
@media (min-width:1600px){ :root{ --chipbar-cut: 96px; } }
@media (min-width:1280px) and (max-width:1599px){ :root{ --chipbar-cut: 64px; } }
@media (min-width:1024px) and (max-width:1279px){ :root{ --chipbar-cut: 40px; } }
@media (max-width:1023px){ :root{ --chipbar-cut: 20px; } }

/* คอนเทนเนอร์แถบ */


/* แทร็กสีดำด้านหลัง (สั้นกว่า grid ตาม chipbar-cut) */


/* ป้ายชมพู (บริบทปัจจุบัน) */


/* ใส่อิโมจิจาก CSS (กันซ้อน) */



/* ปุ่มเรียงลำดับฝั่งขวา */
.pbnc-sort-nav{
  margin-left:auto !important;
  display:flex !important; align-items:center !important; gap:10px !important;
  position:relative !important; z-index:1 !important;
}
.pbnc-sort-nav a{
  padding:6px 14px; border-radius:20px;
  background:#444; color:#fff; text-decoration:none; font-size:14px; transition:.25s;
  border:1px solid rgba(255,255,255,.10);
}
.pbnc-sort-nav a:hover{ background:#666; }
.pbnc-sort-nav a.active{ background:#fff; color:#000; font-weight:700; border-color:transparent; }

/* Fallback: ถ้ายังไม่ได้ครอบด้วย .pbnc-sort-nav ให้ลิงก์ลูกทั้งหมด (ที่ไม่ใช่ .pbnc-chip) กลายเป็นปุ่มทางขวา */




/* กันรายการแถวแรกไม่ให้ลอดเข้าใต้แถบ */


/* Responsive tuning */
@media (max-width: 1024px){
  
}
@media (max-width: 768px){
  :root{ --chipbar-height:44px; }
  
  
  .pbnc-sort-nav a{ padding:7px 12px; font-size:13px; }
}

/* =========================================================
   TAG NAVIGATION — ใช้ระยะห่างเดียวกับเมนูหมวด
========================================================= */
.pbnc-tag-nav{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:10px 0 18px;
}
.pbnc-tag-nav .pill.active{ opacity:1; }
.pbnc-tag-nav .nav-title{ opacity:.8; margin-right:8px; }

/* =========================================================
   CHIPBAR (ใช้กับโครงสร้าง: li

/* ตัวคอนเทนเนอร์ด้านในให้เป็นแถวเดียว */


/* แทร็กสีเข้มด้านหลัง (ยาวสั้นกว่ากริดเล็กน้อยและจัดกึ่งกลาง) */


/* ป้ายชมพูซ้าย */


/* ใส่ไอคอนแท็กจาก CSS (กันอิโมจิซ้อน) */

/* ซ่อนอิโมจิที่ธีมแทรก <img class="emoji"> */


/* ฝั่งขวา: ปุ่มเรียงลำดับให้อยู่ขวาเสมอ */



/* รูปแบบปุ่มเรียงลำดับ */




/* กันคอนเทนต์แถวแรกไม่ให้ลอดเข้าใต้แถบ */


/* ปรับค่าหด/ความสูงตามจอ */
@media (min-width:1600px){ :root{ --chipbar-cut: 96px; } }
@media (min-width:1280px) and (max-width:1599px){ :root{ --chipbar-cut: 64px; } }
@media (min-width:1024px) and (max-width:1279px){ :root{ --chipbar-cut: 40px; } }
@media (max-width:1023px){
  :root{ --chipbar-cut: 20px; }
}
@media (max-width:768px){
  :root{ --chipbar-height: 44px; }
  
  
}

/* แก้ตัวสะกดสีผิด (เผื่อยังมีอยู่ในไฟล์เดิม) */
.wp-block-query .wp-block-query-pagination-previous:hover,
.wp-block-query .wp-block-query-pagination-next:hover{
  background:#3a3a3a !important;
}

/* =======================
   CHIPBAR — SHIFT LEFT CHIP
   ขยับป้าย "หน้าแรก" ออกจากขอบซ้าย
======================= */


/* ===== restore: centered track + chip offset (wins all) ===== */


/* ขยับป้ายชมพู "หน้าแรก" ออกจากขอบซ้ายตามระยะ chipbar-cut */


/* ปุ่มเรียงลำดับดันไปทางขวาให้สุด */


/* ==== CHIPBAR: shift whole bar to the right (final override) ==== */
/* ระยะที่อยากขยับไปทางขวา (ปรับได้ 0–80px ตามใจ) */
:root{ --chipbar-shift: 48px; }

/* เลื่อนคอนเทนต์ด้านในทั้งก้อน */


/* ปรับความยาวแทร็กให้สมดุลหลังจากเลื่อน */


/* ป้ายชมพูต้องขยับตามก้อน เพื่อไม่ให้ดูชิดซ้ายเกินไป */


/* จอเล็กไม่ให้เลื่อนมากไป */
@media (max-width: 1024px){
  :root{ --chipbar-shift: 24px; }
}
@media (max-width: 768px){
  :root{ --chipbar-shift: 12px; }
}

/* DROPDOWN – ปุ่ม + เมนู */




/* เมนู */





/* แสดงเมนูเมื่อ hover หรือโฟกัส (มือถือกดปุ่มแล้วค้างโฟกัส) */


/* --- Place dropdown at the right of the chipbar --- */

 /* ให้เกาะชิดขวาในกล่องขวา */

/* ระยะปุ่มดรอปจากขอบขวาแถบ — ปรับได้จุดเดียว */
:root{
  --chipbar-dd-offset: 26px;   /* ลอง 26px ก่อน ถ้ายังเกิน/ขาดค่อยปรับทีละ 4px */
}



/* เมนูดรอปให้ชิดใต้ปุ่มทางขวา */


/* ปรับตำแหน่ง dropdown ให้อยู่ในแถบ */


/* จัด dropdown ให้อยู่กลางแนวตั้งในแถบ */


/* ปุ่ม toggle ให้สูงเท่ากับแถบ */


/* ปุ่ม dropdown สีชมพู ให้ขนาดเท่ากับปุ่มหน้าแรก */


/* ลูกศรสีขาว */


/* ===== Dropdown: ตำแหน่ง + แสดง/ซ่อน ===== */




/* กล่องเมนู */


/* เปิดเมนู */


/* ลิงก์ในเมนู */



/* ==== Dropdown on chipbar – final fix ==== */


/* กล่อง dropdown ด้านขวา */


/* ปุ่มชมพู (ขนาดเท่าปุ่ม "หน้าแรก") */


/* ลูกศรสีขาว */


/* เมนูที่เด้งลง */
























/***** PBNC DROPDOWN – FINAL OVERRIDE (put at the very end of style.css) *****/

/* 1) คอนเทนเนอร์ชิปบาร์ต้องไม่ตัดขอบ และเป็นเลเยอร์รองรับ dropdown */


/* 2) ปุ่ม toggle ต้องรับคลิก และอยู่เหนือพื้นหลังแถบ */

.pbnc-dd-toggle,


/* 3) เมนู: ซ่อนไว้ก่อนเสมอ (หักล้างกฎเก่าที่เคยเปิดด้วย :hover) */
.pbnc-dd-menu,


/* 4) เปิดเมนูเมื่อพ่อมี .is-open (ทั้งโครงสร้าง pbnc-dd และ pbnc-dropdown) */
.pbnc-dd.is-open > .pbnc-dd-menu,


/* 5) บังคับ “ยกเลิก” กฎเก่าที่เปิดเมนูด้วย :hover/ :focus-within (ป้องกันกระพริบ/ปิดเอง) */


/* 6) สไตล์ลิงก์ในเมนู (กลาง ๆ ให้ชนะของเก่า) */
.pbnc-dd-menu a,

.pbnc-dd-menu a:hover,

.pbnc-dd-menu a.active,


/* 7) กันทุกเลเยอร์พื้นหลัง/เส้นโค้งบังปุ่ม/เมนู */


/* 8) เพิ่มระยะให้ dropdown ชิดขวาแถบอย่างพอดี (ถ้ารู้สึกชิดไป/ห่างไป ปรับ margin-right ได้) */



/* --- Chipbar dropdown fix: ยึดอยู่ในแถบ + คลิกได้ --- */

/* ======================= CHIPBAR (Final) ======================= */
.pbnc-term-chipbar {
  position: relative !important;
  max-width: var(--grid-max) !important;
  width: 100% !important;
  height: var(--chipbar-height) !important;
  margin: 10px auto 14px !important;
  padding: 0 var(--grid-pad) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 3;
  overflow: visible !important;
}
.pbnc-term-chipbar::before {
  content:'' !important;
  position:absolute !important;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width: calc(100% - 2 * (var(--grid-pad) + var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut)));
  background:#1f1f1f !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;
}
.pbnc-term-chipbar .pbnc-chip {
  position: relative !important;
  z-index:1 !important;
  margin-left: calc(var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut)) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#ff5b8a !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  font-weight:700 !important;
  font-size:15px !important;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
}
.pbnc-term-chipbar .pbnc-chip::before { content:"???"; margin-right:6px; }
.pbnc-term-chipbar .pbnc-sort-nav {
  margin-left:auto !important;
  display:flex !important; gap:10px !important;
}
.pbnc-term-chipbar + * { margin-top:8px; }

/* ======================= DROPDOWN (Final) ======================= */
.pbnc-dropdown,
.pbnc-dd {
  position: relative !important;
  display: inline-block !important;
  z-index: 10 !important;
}
.pbnc-dd-toggle,
.pbnc-dropdown .dropdown-toggle {
  cursor: pointer !important;
  position: relative !important;
  z-index: 11 !important;
}
.pbnc-dd-menu,
.pbnc-dropdown .dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 220px !important;
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
  display: none !important;
}
.pbnc-dropdown.is-open .dropdown-menu,
.pbnc-dd.is-open .pbnc-dd-menu {
  display: block !important;
}
.pbnc-dd-menu a,
.pbnc-dropdown .dropdown-menu a {
  display:block !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  color:#fff !important;
  font-weight:600 !important;
}
.pbnc-dd-menu a:hover,
.pbnc-dropdown .dropdown-menu a:hover {
  background:#2b2b2b !important;
}

/* =========================================================
   ARCHIVE / CATEGORY / TAG / SEARCH GRID – Full width
   (ซ่อน sidebar + กริด 5/3/1 คอลัมน์เหมือนหน้าแรก)
========================================================= */
body.archive .pb-content-sidebar,
body.search .pb-content-sidebar {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-pad);
  display: block !important;
}
body.archive .sidebar,
body.archive .sidebar-left,
body.archive .sidebar-right,
body.search .sidebar,
body.search .sidebar-left,
body.search .sidebar-right {
  display: none !important;
}
body.archive #primary.site-main,
body.search #primary.site-main {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5,1fr);
  gap: var(--grid-gap);
}
body.archive #primary.site-main > article,
body.search #primary.site-main > article {
  display: flex;
  flex-direction: column;
}
body.archive #primary .post-thumbnail,
body.search #primary .post-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
}
body.archive #primary .post-thumbnail img,
body.search #primary .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.archive #primary .entry-title a,
body.search #primary .entry-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 15px;
  margin-top: 8px;
}

/* Responsive breakpoints */
@media (max-width:1279px) and (min-width:768px) {
  body.archive #primary.site-main,
  body.search #primary.site-main {
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
  }
}
@media (max-width:767px) {
  body.archive #primary.site-main,
  body.search #primary.site-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==== Vars fallback (กันตัวแปรไม่ถูกประกาศ) ==== */
:root {
  --grid-gap: 18px;
  --grid-max: 1400px;
  --grid-pad: 20px;
}

/* ==== 1) ปิดพื้นหลังเหลืองจาก <mark> (ธีมใช้ไฮไลต์คำค้น) ==== */
mark,
.search-results mark,
.entry-summary mark,
.entry-content mark {
  background: transparent !important;
  color: inherit !important;
}

/* ==== 2) ปิดเหลืองจาก Autofill ของเบราว์เซอร์ในช่องฟอร์ม ==== */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #111 inset !important; /* สีพื้นหลังเทาเข้ม */
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  transition: background-color 9999s ease-out 0s; /* กันแฟลชสี */
}

/* ==== 3) รีเซ็ตสีปุ่ม/ชิป (กันโดน override แล้วเป็นเหลือง) ==== */
.pbnc-term-chipbar .pbnc-chip,
.pbnc-term-chipbar .chip {
  background: #ff5b8a !important;  /* ชมพู */
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
.pbnc-term-chipbar .chip.is-active { background: #ff5b8a !important; }
.pbnc-term-chipbar .chip--alt,
.pbnc-term-chipbar .btn--alt { background: #2d6cdf !important; }

/* (เผื่อเคยมี debug ใส่ background เลย) */
.post-thumbnail img,
.entry-thumbnail img { background: transparent !important; }

/* ==== ยืนยันพื้นหลังหลักให้เป็นสีเข้ม (กันพื้นหลังเหลืองเล็ดลอด) ==== */
body,
.site,
.pb-content-sidebar,
#primary.site-main { background-color: #000 !important; }

/* === Chipbar custom alignments (Home left / Latest right) === */
.pbnc-term-chipbar {
  display:flex;
  align-items:center;
  gap:12px;
}

.pbnc-term-chipbar .chip-left {
  display:flex;
  align-items:center;
}

.pbnc-term-chipbar .chip-right {
  display:flex;
  align-items:center;
  margin-left:auto; /* ดันไปขวาสุด */
}

/* Active state */
.pbnc-chip.is-active {
  box-shadow:0 0 0 2px rgba(255,255,255,.15) inset;
}

/* === Chipbar: จัดซ้าย/ขวา + override เฉพาะฝั่งขวา === */
.pbnc-term-chipbar{ display:flex; align-items:center; gap:12px; }
.pbnc-term-chipbar .chip-left{ display:flex; align-items:center; }

/* ดันทั้งกลุ่มฝั่งขวาไปชิดขวาสุด */
.pbnc-term-chipbar .chip-right{
  display:flex; align-items:center; gap:10px;
  margin-left:auto;
}

/* ยกเลิก margin-left อัตโนมัติของ .pbnc-sort-nav เมื่ออยู่ในฝั่งขวา */
.pbnc-term-chipbar .chip-right .pbnc-sort-nav{
  margin-left:0 !important;
}

/* ยกเลิก margin-left ของชิปฝั่งขวา (กฎเดิมดันชิปทุกอันไปทางซ้าย) */
.pbnc-term-chipbar .chip-right .pbnc-chip{
  margin-left:0 !important;
}

/***** CHIPBAR — HARD OVERRIDE (put this at the very end) *****/

/* ทำให้บาร์เป็นแถวเดียวแน่นอน */
.pbnc-term-chipbar{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* กลุ่มซ้ายคงปกติ */
.pbnc-term-chipbar > .chip-left{
  display:flex !important;
  align-items:center !important;
}

/* กลุ่มขวาต้อง "ดันตัวเอง" ไปชิดขวาสุดเสมอ */
.pbnc-term-chipbar > .chip-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important;   /* << ดันไปขวาสุด */
}

/* ยกเลิก margin-left:auto เดิมของ .pbnc-sort-nav ที่ไปแย่งขวาสุด */
.pbnc-term-chipbar > .chip-right .pbnc-sort-nav{
  margin-left:0 !important;
}

/* ยกเลิก margin-left:calc(...) ที่ใส่กับ .pbnc-chip ทั้งหมด
   เพื่อไม่ให้ "คลิปล่าสุด" ถอยซ้ายโดยไม่จำเป็น */
.pbnc-term-chipbar > .chip-right .pbnc-chip{
  margin-left:0 !important;
}

/* (ทางเลือก) จำกัดการเยื้องซ้ายไว้เฉพาะป้ายฝั่งซ้ายเท่านั้น */
.pbnc-term-chipbar > .chip-left .pbnc-chip{
  margin-left: calc(var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut)) !important;
}



/* ====== CHIPBAR — ULTIMATE OVERRIDE (must be very last block) ======
   Goal: Home chip on the left, "คลิปล่าสุด" + sort group on the right.
   Strategy: Use justify-content: space-between on the bar container,
   cancel legacy auto-margins, and keep right group inline.
-------------------------------------------------------------------- */
.pbnc-term-chipbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important; /* push left & right groups to edges */
  gap:12px !important;
}
.pbnc-term-chipbar > .chip-left{
  display:flex !important;
  align-items:center !important;
}
.pbnc-term-chipbar > .chip-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:0 !important;     /* no auto margin when using space-between */
}
/* neutralize old rules that forced elements to the far right or added chip margins */
.pbnc-term-chipbar .pbnc-sort-nav{ margin-left:0 !important; }
.pbnc-term-chipbar .chip-right .pbnc-chip{ margin-left:0 !important; }

/***** CHIPBAR — FINAL ROW OVERRIDE (place at the very end) *****/

/* ให้ Query Loop (pbnc-home-loop) แสดงผลแบบ block และให้ chipbar กินแถวเต็ม 100% */
.wp-block-query.pbnc-home-loop{ display:block !important; width:100% !important; }
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important; /* ซ้าย-ขวาชิดขอบ */
  width:100% !important;
  max-width:100% !important;
  gap:12px !important;
}

/* กลุ่มซ้ายปกติ */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-left{
  display:flex !important;
  align-items:center !important;
}

/* กลุ่มขวาให้ไปชิดขวาสุด และจัดภายในแนวนอน */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important; /* ดันทั้งกลุ่มไปขวาสุด */
}

/* ยกเลิกกฎเก่าที่ล็อกปุ่มเรียงให้อยู่ขวาสุดแบบเดี่ยว */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right .pbnc-sort-nav{
  margin-left:0 !important;
}

/* ยกเลิก margin-left ของชิปเฉพาะฝั่งขวา (ป้องกันถูกดันกลับซ้าย) */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right .pbnc-chip{
  margin-left:0 !important;
}

/* ถ้าต้องการให้ชิปฝั่งซ้ายเยื้องออกจากขอบเล็กน้อย คุมเฉพาะฝั่งซ้ายเท่านั้น */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-left .pbnc-chip{
  margin-left: calc(var(--chipbar-edge-trim, 0px) + var(--chipbar-tweak, 0px) + var(--chipbar-cut, 0px)) !important;
}

/* ===== your existing CSS remains unchanged above ===== */


/***** CHIPBAR — FINAL ROW OVERRIDE (must be the last block) *****/

/* ให้ Query Loop (pbnc-home-loop) เป็นแถวเต็มและบังคับ chipbar กิน 100% */
.wp-block-query.pbnc-home-loop{ 
  display:block !important; 
  width:100% !important; 
  max-width:100% !important;
}
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important; /* ซ้าย–ขวาชิดขอบ */
  width:100% !important;
  max-width:100% !important;
  gap:12px !important;
}

/* กลุ่มซ้าย */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-left{
  display:flex !important;
  align-items:center !important;
}

/* กลุ่มขวา: ดันทั้งกลุ่มไปชิดขวาสุด และจัดภายในแนวนอน */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important;                 /* ดันกลุ่มไปขวาสุด */
}

/* ยกเลิกกฎเดิมที่ล็อกปุ่มเรียงให้อยู่ขวาที่ขัดกับการจัดกลุ่ม */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right .pbnc-sort-nav{
  margin-left:0 !important; 
}

/* ยกเลิก margin-left ของชิปฝั่งขวา (ป้องกันโดนดันกลับซ้าย) */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-right .pbnc-chip{
  margin-left:0 !important;
}

/* ถ้าต้องการเยื้องชิปฝั่งซ้ายเข้าด้านในเล็กน้อย ให้คุมเฉพาะฝั่งซ้ายเท่านั้น */
.wp-block-query.pbnc-home-loop > .pbnc-term-chipbar > .chip-left .pbnc-chip{
  margin-left: calc(var(--chipbar-edge-trim, 0px) + var(--chipbar-tweak, 0px) + var(--chipbar-cut, 0px)) !important;
}

/* === CHIPBAR DROPDOWN — FIX SELECTORS (FINAL) === */
.pbnc-dropdown--chip { position: relative !important; z-index: 12 !important; }
.pbnc-dropdown--chip .pbnc-dd-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 220px !important;
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
  display: none !important;            /* ปิดไว้ก่อน */
}

/* เมื่อ JS ใส่ .is-open ที่ .pbnc-dropdown--chip ให้แสดงเมนู */
.pbnc-dropdown--chip.is-open > .pbnc-dd-menu {
  display: block !important;
}

/* ให้พื้นหลังแถบ chipbar ไม่บังการคลิกปุ่ม */
.pbnc-term-chipbar::before { pointer-events: none !important; }

/* === CHIPBAR DROPDOWN — ALIGN MENU HIGHLIGHT (FINAL) === */

/* กล่อง dropdown ชิดขวา ใต้ปุ่ม และอยู่บนสุด */
.pbnc-dropdown--chip{ position:relative !important; z-index: 20 !important; }
.pbnc-dropdown--chip .pbnc-dd-menu{
  position:absolute !important;
  right:0 !important;
  top:calc(100% + 8px) !important;
  min-width: 220px !important;
  background:#1f1f1f !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  padding:8px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
  display:none !important;
}

/* เปิดเมนูเมื่อ JS ใส่ .is-open */
.pbnc-dropdown--chip.is-open > .pbnc-dd-menu{ display:block !important; }

/* ปุ่มในเมนู = pill เต็มบรรทัด จัดกึ่งกลางแนวนอน */
.pbnc-dd-menu a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:10px 14px !important;
  margin:4px 0 !important;
  border-radius:10px !important;
  line-height:1.2 !important;
  color:#fff !important;
  text-decoration:none !important;
  background:transparent !important;            /* เคลียร์กฎเก่า */
  border:1px solid transparent !important;
}

/* hover/focus = เทาเข้ม, active (ค่าที่เลือกอยู่) = ขาว */
.pbnc-dd-menu a:hover,
.pbnc-dd-menu a:focus{ background:#2b2b2b !important; }
.pbnc-dd-menu a.active{
  background:#fff !important;
  color:#000 !important;
  border-color:transparent !important;
  font-weight:700 !important;
}

/* กันแทร็กพื้นหลังของ chipbar มาบัง/ลวงตาเวลาเมนูเปิด */
.pbnc-term-chipbar::before{ pointer-events:none !important; }
.pbnc-dropdown--chip.is-open ~ *{ position:relative; z-index:1; } /* ความชัวร์เรื่องเลเยอร์ */

/* กันกฎเก่าที่ใช้ .dropdown-menu/.pbnc-dd ขัดแย้ง */
.pbnc-dropdown .dropdown-menu,
.pbnc-dd .pbnc-dd-menu{ display:none !important; }  /* ตัวเก่าไม่ใช้กับ .pbnc-dropdown--chip */

/* === CHIPBAR DROPDOWN — REMOVE EXTRA GREY BACKGROUND === */

/* ลบพื้นหลัง container ที่ซ้อน */
.pbnc-dropdown--chip .pbnc-dd-menu{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ปุ่มเมนู: ปกติไม่มีแถบขาว/เทาซ้อนหลัง */
.pbnc-dd-menu a{
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  display: block !important;
  text-align: center !important;
}

/* Hover = เทาเข้มเล็กน้อย */
.pbnc-dd-menu a:hover{
  background: #2b2b2b !important;
  border-radius: 8px !important;
}

/* Active (ตัวเลือกปัจจุบัน) = pill ขาวชัด */
.pbnc-dd-menu a.active{
  background: #fff !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* === CHIPBAR — PLACE LEFT/RIGHT PINK CHIPS INSIDE THE TRACK (FINAL) === */

/* ระยะห่างชิปจากขอบแทร็กด้านใน ปรับได้ */
:root{ --chipbar-inner-pad: 16px; }

/* ให้แทร็กเท่าความกว้างคอนเทนต์ (ตาม grid pad) */
.pbnc-term-chipbar{
  position:relative !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  max-width: var(--grid-max) !important; width:100% !important;
  padding: 0 var(--grid-pad) !important;
  gap:12px !important; z-index:3;
}
/* แทร็กพื้นหลัง (แถบดำโค้ง) ให้อยู่กลางและยาวเท่าคอนเทนต์ */
.pbnc-term-chipbar::before{
  content:'' !important;
  position:absolute !important; inset:auto;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width: calc(100% - 2 * var(--grid-pad)) !important;   /* = เต็มคอนเทนต์ */
  background:#1f1f1f !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  pointer-events:none !important; /* กันบังคลิก */
}

/* ----- ย้ายป้าย “หน้าแรก” เข้าแถบฝั่งซ้าย ----- */
.pbnc-term-chipbar > .chip-left{
  position:relative !important; display:flex !important; align-items:center !important;
  padding-left: var(--chipbar-inner-pad) !important;    /* ขอบในซ้ายของแถบ */
}
.pbnc-term-chipbar > .chip-left .pbnc-chip{
  margin-left: 0 !important;                             /* ยกเลิก margin เดิมทั้งหมด */
}

/* ----- ย้ายป้าย “คลิปล่าสุด” (ปุ่ม dropdown) เข้าแถบฝั่งขวา ----- */
.pbnc-term-chipbar > .chip-right{
  position:relative !important; display:flex !important; align-items:center !important; gap:10px !important;
  margin-left:auto !important;
  padding-right: var(--chipbar-inner-pad) !important;    /* ขอบในขวาของแถบ */
}
.pbnc-term-chipbar > .chip-right .pbnc-chip{
  margin-left: 0 !important;                              /* กันกฎเก่าดันกลับซ้าย */
}

/* ขนาด/ตำแหน่ง dropdown ให้ยึดด้านขวาภายในแถบ */
.pbnc-dropdown--chip{ position:relative !important; z-index:12 !important; }
.pbnc-dropdown--chip .pbnc-dd-menu{
  position:absolute !important;
  right:0 !important; top:calc(100% + 8px) !important;
}

/* กันกฎเก่าเรื่องการเยื้องชิปซ้าย-ขวาที่เคยใช้ calc(...) */
.pbnc-term-chipbar .pbnc-sort-nav{ margin-left:0 !important; }
.pbnc-term-chipbar .chip-right .pbnc-chip{ margin-left:0 !important; }

/* === CHIPBAR — FIX TRACK LENGTH & ALIGN PINK CHIPS === */

/* แทร็กกลับสู่สูตรความยาวปกติ (ไม่ยืดเกิน) */
.pbnc-term-chipbar::before {
  width: calc(100% - 2 * (var(--grid-pad) + var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut))) !important;
}

/* กลุ่มซ้าย: ป้ายหน้าแรก */
.pbnc-term-chipbar > .chip-left {
  display:flex !important;
  align-items:center !important;
  margin-left: calc(var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut)) !important;
}
.pbnc-term-chipbar > .chip-left .pbnc-chip {
  margin-left: 0 !important;
}

/* กลุ่มขวา: ป้ายคลิปล่าสุด */
.pbnc-term-chipbar > .chip-right {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important;
  margin-right: calc(var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut)) !important;
}
.pbnc-term-chipbar > .chip-right .pbnc-chip {
  margin-left: 0 !important;
}

/* === CHIPBAR — ADJUST RIGHT CHIP POSITION === */

/* ลดระยะขอบขวาให้ป้ายคลิปล่าสุดขยับเข้ามา */
.pbnc-term-chipbar > .chip-right {
  margin-right: calc(var(--chipbar-edge-trim) + var(--chipbar-tweak)) !important;
}

/* === CHIPBAR — RIGHT CHIP INSIDE TRACK & NUDGE LEFT === */
:root{
  /* ปรับได้ตามใจ: อยากให้ขยับซ้ายมากขึ้น/น้อยลง */
  --chipbar-right-nudge: 12px;
}

/* ให้ป้าย "คลิปล่าสุด" ยึดขอบ "ด้านในของแถบ" เหมือนฝั่งซ้าย แล้วขยับซ้ายอีกนิด */
.pbnc-term-chipbar > .chip-right{
  margin-left:auto !important;
  margin-right: calc(
    var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut) + var(--chipbar-right-nudge)
  ) !important;
}

/* === CHIPBAR — MOVE RIGHT CHIP FURTHER LEFT === */

/* เพิ่มตัวแปรขยับซ้าย */
:root{
  --chipbar-right-nudge: 32px; /* ปรับค่ามากขึ้นเพื่อขยับซ้าย */
}

/* ดึงป้ายคลิปล่าสุดเข้ามาซ้ายของแถบ */
.pbnc-term-chipbar > .chip-right{
  margin-left:auto !important;
  margin-right: calc(
    var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut) + var(--chipbar-right-nudge)
  ) !important;
}

/* === CHIPBAR — MOVE RIGHT CHIP 3X FURTHER LEFT === */
:root{
  --chipbar-right-nudge: 96px; /* 3 เท่าของระยะเดิม */
}

.pbnc-term-chipbar > .chip-right{
  margin-left:auto !important;
  margin-right: calc(
    var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut) + var(--chipbar-right-nudge)
  ) !important;
}

/* === CHIPBAR — MOVE LEFT CHIP 32PX FURTHER LEFT === */
:root{
  --chipbar-left-nudge: 32px;
}

.pbnc-term-chipbar > .chip-left{
  margin-left: calc(
    var(--chipbar-edge-trim) + var(--chipbar-tweak) + var(--chipbar-cut) - var(--chipbar-left-nudge)
  ) !important;
}

/* === PBNC: Override icon for "คลิปล่าสุด" to dark-blue down triangle === */
.pbnc-term-chipbar .pbnc-chip--latest::before{
  content: '' !important; /* override the default '???' */
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003366'><path d='M7 10l5 5 5-5H7z'/></svg>");
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* === CHIPBAR — ENLARGE "คลิปล่าสุด" ICON MORE === */
.pbnc-term-chipbar .pbnc-chip--latest::before{
  width: 28px !important;
  height: 28px !important;
}

/* === CHIPBAR DROPDOWN — FORCE ABOVE CARDS === */
.pbnc-cat-nav,
.pbnc-term-chipbar{
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;  /* กันโดนตัดขอบ */
}

.pbnc-dropdown--chip{
  position: relative !important;
  z-index: 1001 !important;      /* สูงกว่าแถบ */
}

.pbnc-dropdown--chip .pbnc-dd-menu{
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 1002 !important;      /* สูงกว่าการ์ด/รูปทุกกรณี */
}

/* เผื่อการ์ด/รูปใช้ z-index สูง ให้เมนูชนะแน่นอน */
.pbnc-post-card,
.pbnc-post-thumb,
.pbnc-post-thumb img{
  z-index: auto !important;      /* ปลดค่าเดิมที่อาจสูงเกิน */
  overflow: visible !important;
}

/* กันแทร็กพื้นหลังของ chipbar บังเมนู */
.pbnc-term-chipbar::before{ pointer-events: none !important; }

/* === CHIPBAR DROPDOWN — DEFAULT BLACK, ACTIVE WHITE === */

/* บังคับให้ทุกป้ายเป็นพื้นดำ */
.pbnc-dropdown--chip .pbnc-dd-menu li {
  background-color: #111 !important;   /* พื้นดำ */
  color: #fff !important;              /* ตัวหนังสือขาว */
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* ป้ายที่เลือกอยู่ (active/current)  เปลี่ยนเป็นพื้นขาว */
.pbnc-dropdown--chip .pbnc-dd-menu li.active,
.pbnc-dropdown--chip .pbnc-dd-menu li[aria-current="true"],
.pbnc-dropdown--chip .pbnc-dd-menu li.current-menu-item {
  background-color: #fff !important;
  color: #000 !important;
}

/* === CHIPBAR DROPDOWN — DEFAULT BLACK, ACTIVE WHITE (ANCHOR-BASED) === */

/* ค่าเริ่มต้น: ทุกป้ายพื้นดำ ตัวหนังสือขาว */
.pbnc-dropdown--chip .pbnc-dd-menu a,
.pbnc-dropdown--chip .pbnc-dd-menu button{
  display: block !important;
  background-color: #111 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 6px 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  text-decoration: none !important;
}

/* ป้ายที่ถูกเลือกอยู่  พื้นขาว ตัวหนังสือดำ */
.pbnc-dropdown--chip .pbnc-dd-menu a.active,
.pbnc-dropdown--chip .pbnc-dd-menu a[aria-current="true"],
.pbnc-dropdown--chip .pbnc-dd-menu a[aria-selected="true"],
.pbnc-dropdown--chip .pbnc-dd-menu button.active{
  background-color: #fff !important;
  color: #000 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* (เผื่อมีกฎเก่าเคยบังคับให้โปร่งใส) */
.pbnc-dd-menu a,
.pbnc-dd-menu button{
  background: #111 !important;
}

/* === CHIPBAR — ENLARGE ONLY THE ICON (no button resize) === */
.pbnc-term-chipbar .pbnc-chip--latest::before {
  font-size: 22px !important;      /* ขยาย icon เท่านั้น */
  line-height: 1 !important;       /* กันดันความสูงปุ่ม */
  transform: scale(1.6);           /* ขยายขนาดจริง ๆ */
  vertical-align: middle;          /* จัดให้อยู่กึ่งกลางข้อความ */
}



/* === PBNC: Pink chip as status only (non-clickable) === */
.pbnc-chip.is-static{ pointer-events:none !important; cursor:default !important; }
.pbnc-chip.is-static:hover{ transform:none !important; }



/* === PBNC: Archive grid reuse front loop styles === */
.pbnc-archive-grid .wp-block-query.pbnc-home-loop > ul.wp-block-post-template{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: var(--grid-gap, 18px) !important;
  list-style:none !important;
  margin: 24px auto !important;
  padding: 0 var(--grid-pad, 18px) !important;
  max-width: var(--grid-max, 1600px) !important;
}
.pbnc-archive-grid .pagination{ margin: 24px 0 40px; text-align:center; }



/* === PBNC FIX: Make archive/category/tag/search use full-width content area like front page === */
body.archive .site-content,
body.category .site-content,
body.tag .site-content,
body.search .site-content,
body.archive .content-area,
body.category .content-area,
body.tag .content-area,
body.search .content-area,
body.archive .site-main,
body.category .site-main,
body.tag .site-main,
body.search .site-main{
  width: 100% !important;
  max-width: var(--grid-max) !important;
  margin: 0 auto !important;
  float: none !important;
  clear: both !important;
}

/* Titles in archive cards */
.pbnc-archive-grid .clip-title,
.pbnc-archive-grid .clip-title a,
.pbnc-archive-grid .entry-title,
.pbnc-archive-grid .entry-title a{
  font-size: clamp(14px, 1.1vw + 10px, 18px) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Ensure grid 5 columns visible at desktop */
.pbnc-archive-grid .wp-block-post-template{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: var(--grid-gap, 18px) !important;
}

/* Responsive breakpoints like front page */
@media (max-width: 1199px){
  .pbnc-archive-grid .wp-block-post-template{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 991px){
  .pbnc-archive-grid .wp-block-post-template{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px){
  .pbnc-archive-grid .wp-block-post-template{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 479px){
  .pbnc-archive-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}


/* PBNC v3: Match front header layout on archives */
.pbnc-archive.using-query .pbnc-brand-row{max-width:var(--grid-max,1600px);margin:40px auto 10px;padding:0 var(--grid-pad,18px);display:flex;align-items:center}
.pbnc-archive.using-query .pbnc-brand{display:flex;justify-content:center;flex:1}
.pbnc-archive.using-query .pbnc-search{min-width:320px;display:flex;justify-content:flex-end}
.pbnc-archive.using-query .wp-block-search{max-width:520px;width:100%}

.pbnc-archive.using-query .wp-block-post-template{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--grid-gap,18px);max-width:var(--grid-max,1600px);margin:22px auto 0;padding:0 var(--grid-pad,18px)}

.pbnc-archive.using-query .clip-title{margin:8px 2px 0;font-weight:700;line-height:1.3}

/* Hide any theme archive header/title that might be printed above */
.pbnc-archive .page-header, .pbnc-archive .entry-header, .pbnc-archive .entry-title{display:none !important;}


/* PBNC v3.1: remove duplicate chipbar & match front spacing */
.pbnc-archive.using-query .pbnc-brand-row{max-width:var(--grid-max,1600px);margin:40px auto 6px;padding:0 var(--grid-pad,18px);display:flex;align-items:center}
.pbnc-archive.using-query .pbnc-brand{display:flex;justify-content:center;flex:1}
.pbnc-archive.using-query .pbnc-search{min-width:320px;display:flex;justify-content:flex-end}
.pbnc-archive.using-query .wp-block-search{max-width:520px;width:100%}

/* Style the category chipbar (shortcode output) */
.pbnc-archive.using-query .pbnc-cat-nav .chip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px auto 16px;padding:0 var(--grid-pad,18px)}
.pbnc-archive.using-query .pbnc-cat-nav .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#1c6ed7;color:#fff;text-decoration:none;font-weight:700}
.pbnc-archive.using-query .pbnc-cat-nav .pill.is-active{outline:2px solid #fff3;box-shadow:0 0 0 2px #1c6ed7 inset}
.pbnc-archive.using-query .pbnc-cat-nav .pill.is-home{background:#ff69b4;color:#fff}

/* Grid 5 columns for posts */
.pbnc-archive.using-query .wp-block-post-template{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--grid-gap,18px);max-width:var(--grid-max,1600px);margin:22px auto 0;padding:0 var(--grid-pad,18px)}
.pbnc-archive.using-query .clip-title{margin:8px 2px 0;font-weight:700;line-height:1.3}

/* Hide theme archive title/description that appears above grid */
.pbnc-archive .page-header,
.pbnc-archive .entry-header,
.pbnc-archive .entry-title,
.pbnc-archive .archive-description,
.pbnc-archive .taxonomy-description{display:none !important;}

/* === PBNC: ปรับขนาดโลโก้เฉพาะหน้าแรก === */
body.home .custom-logo {
  width: 360px !important;   /* ปรับค่าตามที่ต้องการ เช่น 180 / 220 / 260 / 300 */
  height: auto !important;   /* รักษาอัตราส่วนภาพโลโก้ให้ไม่เพี้ยน */
}

/* PBNC: ปรับให้หน้า Archive/Search/Tag มือถือเต็มหน้ามากขึ้น */
@media (max-width: 640px) {

  /* ปรับตัวแปรความกว้าง + padding เฉพาะ archive/search/tag */
  body.archive,
  body.search,
  body.tag {
    --grid-max: 100vw;   /* จากเดิม min(1600px, 96vw)  ให้เต็ม 100vw เลย */
    --grid-pad: 10px;    /* ลด padding ซ้ายขวาลงให้แคบลงกว่าหน้าแรกนิดหน่อย */
  }
}

/* PBNC: FIX ขอบดำขวาใน Archive/Search/Tag (แก้ container แม่ของ layout) */
@media (max-width: 640px) {

  /* บังคับ container แม่ให้เต็มจอ */
  body.archive .content-area,
  body.search .content-area,
  body.tag .content-area,
  body.archive .site-main,
  body.search .site-main,
  body.tag .site-main {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* บังคับ wrapper ระดับถัดลงมาให้เต็มจอด้วย */
  body.archive #primary,
  body.search #primary,
  body.tag #primary {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* PBNC: ปรับให้หน้า Archive/Search/Tag บนมือถือ กว้างเท่าหน้าแรก */
@media (max-width: 640px) {

  /* ตัด padding ซ้ายขวาของ shell ออก ให้เหลือแค่ชั้น site-main เหมือนหน้าแรก */
  body.archive .pbnc-archive-grid-shell,
  body.search .pbnc-archive-grid-shell,
  body.tag .pbnc-archive-grid-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* กันไว้เผื่อมี padding แอบในชั้นใน */
  body.archive .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.search .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.tag .pbnc-archive-grid-shell .pbnc-archive-grid {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* PBNC: บังคับกริดหน้าหมวดหมู่/ค้นหา/แท็ก บนมือถือให้เต็มจอแบบหน้าแรก */
@media (max-width: 640px) {

  /* 1) ตัด padding ซ้ายขวาของ shell ออกก่อน */
  body.archive .pbnc-archive-grid-shell,
  body.search  .pbnc-archive-grid-shell,
  body.tag     .pbnc-archive-grid-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) ดึงกริดด้านในให้กว้างเท่า viewport แล้วจัดให้อยู่กลางจอ */
  body.archive .pbnc-archive-grid-shell .pbnc-grid,
  body.search  .pbnc-archive-grid-shell .pbnc-grid,
  body.tag     .pbnc-archive-grid-shell .pbnc-grid {
    width: 100vw !important;       /* กว้างเท่า viewport จริง */
    max-width: 100vw !important;
    margin-left: 50% !important;   /* ขยับให้จุดกลางกริดตรงกับจอกลาง */
    transform: translateX(-50%);   /* เลื่อนกลับครึ่งหนึ่ง  อยู่กลางพอดี */
    padding-left: 10px;            /* กันรูปติดขอบซ้าย */
    padding-right: 10px;           /* กันรูปติดขอบขวา */
    box-sizing: border-box;        /* รวม padding ในความกว้าง 100vw */
  }
}


/* === PBNC FINAL FIX: MOBILE FULL-WIDTH FOR ARCHIVE/CATEGORY/TAG/SEARCH (<=640px) === */
@media (max-width: 640px) {

  /* Kill desktop min-width and make outer wrappers span full viewport */
  html,
  body,
  .site,
  #page,
  .site-content,
  #content,
  .content-area,
  #primary,
  .site-main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Shell wrapper around archive grid */
  body.archive .pbnc-archive-grid-shell,
  body.category .pbnc-archive-grid-shell,
  body.tag .pbnc-archive-grid-shell,
  body.search .pbnc-archive-grid-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 40px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inner grid + UL must use all available width, no transforms */
  body.archive .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.category .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.tag .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.search .pbnc-archive-grid-shell .pbnc-archive-grid,
  body.archive .pbnc-archive-grid-shell .pbnc-grid,
  body.category .pbnc-archive-grid-shell .pbnc-grid,
  body.tag .pbnc-archive-grid-shell .pbnc-grid,
  body.search .pbnc-archive-grid-shell .pbnc-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

/* === HOME MOBILE: รวมทุกอย่างที่ต้องการแก้ช่องดำ === */
@media (max-width: 640px) {

  /* 1. ลดช่องว่างด้านล่างของชิปบาร์ */
  body.home .pbnc-term-chipbar.pbnc-chipbar {
    margin-top: 10px !important;
    margin-bottom: 4px !important;   /* จากเดิม 24px */
  }

  /* 2. ดึงตัวกริด (wrapper) ขึ้นมาติดชิปบาร์ */
  body.home .pbnc-archive-grid {
    margin-top: 0 !important;
  }

  /* 3. ให้กล่องเทากริด “กินขึ้นมาด้านบน” เล็กน้อย */
  body.home .pbnc-archive-grid-shell {
    margin-top: 0 !important;        /* ไม่ดันลงอีก */
    padding-top: 4px !important;     /* เผื่อระยะหัวการ์ด */
  }

}

@media (max-width: 640px) {
  body.home .thumb-wrap {
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 16/9;
  }

  body.home .thumb-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
  }
}