/* ================================
   pbnc-term-chipbar-tune.css
   ปรับแทบดำ + ป้ายชมพูซ้าย/ขวา เฉพาะหน้าแรก (body.home)
   ================================ */

/* 1) ซ่อนรางดำเดิมของ term-chipbar เฉพาะหน้าแรก */
body.home .pbnc-chipbar.pbnc-term-chipbar::before,
body.home .pbnc-chipbar.pbnc-term-chipbar::after {
    content: none !important;
}

/* ============================
   ปรับตำแหน่งชิปบาร์ดำหน้าแรก ซ้าย–ขวา
   ============================ */

body.home .pbnc-chipbar.pbnc-term-chipbar {
    position: relative !important;  /* อนุญาตให้ขยับตัวเอง */
    display: inline-flex !important;
    width: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;
    
    margin-top: auto !important;       /* ? เลื่อนขึ้น-ลงตรงนี้ ? */
    /* ? ปุ่มปรับตำแหน่งซ้าย–ขวา ?
       — ค่าบวก = ขยับไปทางขวา
       — ค่าลบ  = ขยับไปทางซ้าย
       ตัวอย่าง: right: 40px;   ขยับไปทางขวา 40px */
    right: -40px !important;

    /* (ตัวนี้คุณใช้ของเดิมได้เลย)
       ปรับความยาวแทบดำ = padding ซ้าย/ขวา */
    padding: 6px 394px !important;

    border-radius: 999px !important;
    background: #202020 !important;
    gap: 16px;
}



/* 3) ป้ายชมพูซ้าย (ชื่อหมวด/แท็ก/ค้นหา) เฉพาะหน้าแรก */
body.home .pbnc-chipbar-left .pbnc-chip-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 10px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
}

body.home .pbnc-chipbar-left .pbnc-chip__emoji {
    margin-right: 6px !important;
}

/* 4) ป้ายชมพูขวา (ปุ่ม Dropdown “คลิปล่าสุด”) เฉพาะหน้าแรก */
body.home .pbnc-chip-dropdown > summary.pbnc-chip-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 4px 6px !important;
    font-size: 15px !important;

    border-radius: 999px !important;
    cursor: pointer;
    list-style: none !important;
}

body.home .pbnc-chip-dropdown .pbnc-chip__emoji--caret {
    margin-right: 6px !important;
}

/* 5) เมนู Dropdown สีขาว เฉพาะหน้าแรก */
body.home .pbnc-chip-menu {
    right: 0 !important;
    top: 100% !important;
    margin-top: 8px !important;
}

body.home .pbnc-chip-menu .pbnc-chip {
    display: block !important;
    padding: 10px 32px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    text-align: center;
}

body.home .pbnc-chip-menu .pbnc-chip + .pbnc-chip {
    margin-top: 6px !important;
}

/* ป้ายชมพูฝั่งซ้าย – ปรับซ้าย/ขวาเฉพาะหน้าแรก */
body.home .pbnc-chipbar-left .pbnc-chip-primary {
    position: relative !important;

    /* ? ปรับตรงนี้เท่านั้น ?
       บวก = ไปขวา
       ลบ = ไปซ้าย
    */
    left: -525px !important;
}

/* ป้ายชมพูฝั่งขวา – ปรับซ้าย/ขวาเฉพาะหน้าแรก */
body.home .pbnc-chip-dropdown > summary.pbnc-chip-primary {
    position: relative !important;

    /* ? ปรับตรงนี้เท่านั้น ?
       บวก = ไปขวา
       ลบ = ไปซ้าย
    */
    left: 525px !important;
}

/* ให้ป้ายชมพูขวาเป็น anchor ของ dropdown */
body.home .pbnc-chip-dropdown {
    position: relative !important;
}

/* 1) ทำให้ตัวห่อ dropdown โปร่งใส ไม่เป็นป้ายอีกอัน */
body.home .pbnc-chipbar-right .pbnc-chip-dropdown {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important; /* แค่เป็น wrapper เฉย ๆ */
}

/* 2) ให้ป้ายตัวจริงคือ summary ที่มีคำว่า "คลิปล่าสุด" */
body.home .pbnc-chipbar-right .pbnc-chip-dropdown > summary.pbnc-chip-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background: #ff5c92 !important;   /* ชมพูแบบธีมเดิม */
    color: #ffffff !important;
    padding: 7px 22px !important;
    border-radius: 999px !important;
    cursor: pointer;
    list-style: none !important;      /* ตัด bullet เครื่องหมายสามเหลี่ยมของ details */
}

/* ปรับตำแหน่ง Dropdown Menu (เมนูขาว/ดำ) เฉพาะหน้าแรก */
body.home .pbnc-chipbar-right .pbnc-chip-menu {
    position: absolute !important;
    
    /* ? ปรับได้เองตรงนี้ ?  
       — บวก = เลื่อนไปทางขวา  
       — ลบ  = เลื่อนไปทางซ้าย  
    */
    left: 512px !important;
    right: auto !important;

    top: 100% !important;       /* ให้อยู่ใต้ป้ายหลักเหมือนเดิม */
    margin-top: 8px !important; /* ระยะห่างจากป้ายหลัก */
    z-index: 9999 !important;
}

body.home .pbnc-chipbar .emoji {
    display: none !important;
}

/* Desktop – อิโมจิแสดงเฉพาะหน้าแรกเท่านั้น */
body.home .pbnc-chipbar .pbnc-chip.pbnc-chip--home.pbnc-chip-primary::before {
    content: "\1F3F7\FE0F" !important;   /* ??? */
    font-size: 20px !important;     /* ขนาดอิโมจิ */
    position: relative !important;
    top: 0px !important;             /* บวก = ลงล่าง, ลบ = ขึ้นบน */
    left: 10px !important;            /* บวก = ไปขวา, ลบ = ไปซ้าย */

    margin-right: 2px !important;    /* ถ้าระยะห่างไม่ขยับให้ใช้ padding ของ .pbnc-chip__label */
}

/* ปรับอิโมจิ (caret) ของป้าย "คลิปล่าสุด" */

/* กรณีธีมวาด caret ที่ตัวป้ายโดยตรง */
.pbnc-chip.pbnc-chip--latest.pbnc-chip-primary::before,
/* กรณีธีมวาด caret ผ่าน span อิโมจิ */
.pbnc-chip.pbnc-chip--latest.pbnc-chip-primary .pbnc-chip__emoji--caret::before {
    position: relative !important;

    /* ? ปรับตรงนี้ได้เลย ?
       top  : บวก = ลงล่าง, ลบ = ขึ้นบน
       left : บวก = ไปขวา, ลบ = ไปซ้าย
    */
    top: 0px !important;
    left: 25px !important;

    font-size: 18px !important;  /* ขนาดอิโมจิ/ลูกศร */
}

/* ================================
   MOBILE 640px – เฉพาะหน้าแรกเท่านั้น
   ปรับป้ายหน้าแรก + คลิปล่าสุด
   ================================ */
@media (max-width: 640px) {

    /* แทบดำบนหน้าแรก – ไม่ให้ล้นจอ */
    body.home .pbnc-chipbar.pbnc-term-chipbar {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        margin: 10px auto !important;
        padding: 8px 2px !important;

        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ?? ป้ายชมพู "หน้าแรก" บนมือถือ */
    body.home .pbnc-chip.pbnc-chip--home.pbnc-chip-primary {
        position: relative !important;

        /* ? ตรงนี้ให้คุณปรับตำแหน่งได้เอง ? */
        top: 0px !important;      /* บวก = ลง, ลบ = ขึ้น */
        left: -165px !important;     /* บวก = ไปขวา, ลบ = ไปซ้าย */

        padding: 11px 12px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        max-width: 180px !important;
    }

    /* Mobile – อิโมจิหน้าแรกเท่านั้น */
    body.home .pbnc-chipbar .pbnc-chip.pbnc-chip--home.pbnc-chip-primary::before {
         content: "\1F3F7\FE0F" !important;
         font-size: 16px !important;
         position: relative !important;
         top: 0px !important;
         left: 10px !important;
    }

    /* ?? ป้ายชมพู "คลิปล่าสุด" บนมือถือ */
    body.home .pbnc-chip.pbnc-chip--latest.pbnc-chip-primary {
        position: relative !important;

        /* ? ตรงนี้ให้คุณปรับตำแหน่งได้เอง ? */
        top: 0px !important;      /* บวก = ลง, ลบ = ขึ้น */
        left: -115px !important;     /* บวก = ไปขวา, ลบ = ไปซ้าย */

        padding: 6px -2px !important;
        font-size: 26px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        max-width: 180px !important;
    }

    /* caret / อิโมจิของ "คลิปล่าสุด" เป็น ::before */
    body.home .pbnc-chip.pbnc-chip--latest.pbnc-chip-primary::before,
    body.home .pbnc-chip.pbnc-chip--latest .pbnc-chip__emoji--caret::before {
        font-size: 16px !important;
        position: relative !important;
        top: 0px !important;
        left: 30px !important;
    }
}

    /* … โค้ดก่อนหน้า … */

  /*  ปิด block ก่อนหน้าให้ครบตรงนี้ */

/* เริ่ม block ใหม่ */
@media (max-width: 640px) {

    /* ป้ายคลิปล่าสุด – ขนาด */
    body.home details.pbnc-chip-dropdown > summary.pbnc-chip.pbnc-chip--latest.pbnc-chip-primary {
        position: relative !important;
        padding: 6px 2px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        max-width: 200px !important;
    }

    /* dropdown เฉพาะหน้าแรก */
    body.home details.pbnc-chip-dropdown:not([open]) .pbnc-chip-menu {
        display: none !important;
    }
    body.home details.pbnc-chip-dropdown[open] .pbnc-chip-menu {
        display: block !important;
    }
}

/* ==========================
   MOBILE 640px – ตัวปรับตำแหน่ง DROPDOWN
   ========================== */
@media (max-width: 640px) {

    /* ตัวแปรปรับตำแหน่ง */
    :root {
        --dropdown-offset-x: 50px;   /* ขยับซ้าย/ขวา (+ ขวา, - ซ้าย) */
        --dropdown-offset-y: 8px;   /* ขยับขึ้น/ลง (+ ลง, - ขึ้น) */
        --dropdown-width: 160px;    /* กำหนดความกว้างของ dropdown */
    }

    /* ตำแหน่ง dropdown */
    body.home details.pbnc-chip-dropdown .pbnc-chip-menu {
        position: absolute !important;
        left: -75% !important;
        top: calc(100% + var(--dropdown-offset-y)) !important;
        transform: translateX(calc(-50% + var(--dropdown-offset-x))) !important;

        width: var(--dropdown-width) !important;
        z-index: 9999 !important;
    }
}

/* ================================
   MOBILE 640px – ลดความยาวแถบดำชิปบาร์
   เฉพาะหน้าแรก (หรือทุกหน้าที่ใช้ term-chipbar)
   ================================ */
@media (max-width: 640px) {

    body.home .pbnc-chipbar.pbnc-term-chipbar {
        display: inline-flex !important;

        /* ? ปรับความยาวแถบดำตรงนี้ ? */
        max-width: 320px !important;   /* ลอง 260–360px แล้วปรับตามใจได้ */
        padding: 6px 140px !important;  /* ยิ่งเลขขวาน้อย แถบจะยิ่งสั้น */

        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 999px !important;
    }
}

/* =====================================
   MOBILE 640px – ปรับตำแหน่งซ้าย–ขวา ชิปบาร์แถบดำ
   เฉพาะหน้าแรกเท่านั้น
   ===================================== */
@media (max-width: 640px) {

    /* ? ปรับตรงนี้ตัวเดียวพอ ?
       - ค่า +: ขยับไปทางขวา
       - ค่า -: ขยับไปทางซ้าย
    */
    :root {
        --chipbar-move-x: 35px;
    }

    body.home .pbnc-chipbar.pbnc-term-chipbar {
        position: relative !important;
        left: var(--chipbar-move-x) !important;
    }
}

/* =====================================
   MOBILE 640px ? ?????????????? ?????????
   ?????????????
   ===================================== */
@media (max-width: 640px) {

    /* ? ??????????????? ?
       - ??? +: ????????
       - ??? -: ?????????
    */
    :root {
        --chipbar-move-x: 35px;
    }

    body.home .pbnc-chipbar.pbnc-term-chipbar {
        position: relative !important;
        left: var(--chipbar-move-x) !important;
    }
}

/* ================================
   FINAL OVERRIDE – CHIPBAR OFFSET
   ================================ */
@media (max-width: 640px) {

  body.home .pbnc-chipbar.pbnc-term-chipbar {
      position: relative !important;
      top: -40px !important;  /* ขึ้น/ลง */

      /* ? ขยับซ้าย–ขวา ด้วย transform ให้แรงสุด ? */
      transform: translateX(var(--chipbar-move-x, 0px)) !important;

      margin-left: auto !important;
      margin-right: auto !important;
  }

}

@media (max-width: 640px) {
  :root {
      --chipbar-move-x: 20px;   /* ค่าตรงนี้ = ขยับซ้าย/ขวา */
  }
}

/* ============================================
   MOBILE 640px – คุม Dropdown หน้าแรกให้เหลือชั้นเดียว
   ============================================ */
@media (max-width: 640px) {

  /* ซ่อนเมนู dropdown ทั้งหมดบนหน้าแรกไว้ก่อน */
  body.home .pbnc-chip-menu {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }

  /* ให้กล่องด้านขวาของชิปบาร์เป็น anchor */
  body.home .pbnc-chipbar-right .pbnc-chip-dropdown {
      position: relative !important;
      display: inline-block !important;
  }

  /* ตำแหน่ง dropdown ที่เราต้องการ (ตัวจริงตัวเดียว) */
  body.home .pbnc-chipbar-right .pbnc-chip-dropdown .pbnc-chip-menu {
      position: absolute !important;

      top: 100% !important;
      margin-top: 8px !important;

      left: -25% !important;
      right: auto !important;
      transform: translateX(-50%) !important;

      width: max-content !important;
      max-width: 90vw !important;
      z-index: 9999 !important;
  }

  /* แสดงเฉพาะตอน open และเฉพาะตัวที่อยู่ใน chipbar-right เท่านั้น */
  body.home .pbnc-chipbar-right
  .pbnc-chip-dropdown[open] .pbnc-chip-menu {
      display: flex !important;
      flex-direction: column;
      gap: 6px;

      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
  }
}

/* ============================================
   MOBILE 640px – Fix dropdown หน้าแรกให้ปิดสนิท
   ล็อกเฉพาะเมนูใต้ป้าย "คลิปล่าสุด" บนชิปบาร์ขวา
   ============================================ */
@media (max-width: 640px) {

  /* จัดตำแหน่งเมนู dropdown ใต้ป้ายชมพู */
  body.home .pbnc-chipbar-right.chip-right > details > div.pbnc-chip-menu {
      position: absolute !important;
      top: 100% !important;
      margin-top: 6px !important;

      left: -25% !important;
      right: auto !important;
      transform: translateX(-50%) !important;

      width: max-content !important;
      z-index: 9999 !important;
  }

  /* สถานะปิด  ซ่อนให้หมด */
  body.home .pbnc-chipbar-right.chip-right > details:not([open]) > div.pbnc-chip-menu {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }

  /* สถานะเปิด  แสดงเมนูเต็ม ๆ */
  body.home .pbnc-chipbar-right.chip-right > details[open] > div.pbnc-chip-menu {
      display: flex !important;     /* ถ้าต้องการเป็น block ก็เปลี่ยนได้ */
      flex-direction: column;
      gap: 6px;

      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
  }
}