/* ============================================================
   carhubthai static-clone — FIXES
   แก้ไฟล์นี้ได้โดยตรง (ไม่ต้อง re-clone) แล้ว refresh เบราว์เซอร์
   ============================================================ */

/* 1) overlay โหลดข้อมูลที่ตายแล้วของ iTopPlus (ซ้อนกันจนหน้าดำ) */
.loadingFilter,
.modal-backdrop,
[class*="loadingFilter"],
[id^="ImagesLoading"],
[id^="ContentmanagerLoading"]{display:none!important;opacity:0!important}

/* 2) ช่อง drop ของ editor ที่โผล่เป็นแถบขาวเปล่า */
[class*="dropzoneHide"],
.itopplusshowdropzoneHide,
.itopplushdwdropzoneHide{display:none!important}

/* 3) วิดเจ็ตรีวิว Google (Elfsight) ให้สูงตามจริง */
[class*="elfsight-app-"]{max-height:none!important;min-height:0!important;overflow:visible!important}

/* 4) รูป thumbnail การ์ด (โปรโมชั่น + บทความ) — div ที่ใส่ background-image
      ต้อง absolute เต็มกล่อง aspect-ratio ไม่งั้นสูง 0 รูปไม่ขึ้น */
.img-container,
.template-panel{position:relative!important}
.img-container > .img,
.template-panel > .img{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;
  background-size:cover!important;background-position:center!important}
.template-panel > .img > img{width:100%;height:100%;object-fit:cover}

/* 5) ปุ่มแชร์ — CSS เดิมของ iTopPlus ไม่โหลด (li เลยมี bullet + เรียงแนวตั้ง)
      บังคับเป็นแถวนอน ปุ่มสี่เหลี่ยมมุมมนสีแบรนด์ ให้เหมือนต้นฉบับ */
.social-share{width:auto!important;height:auto!important;position:static!important}
.social-share ul{display:flex!important;flex-direction:row!important;flex-wrap:wrap;list-style:none!important;
  padding:0!important;margin:0!important;gap:6px;align-items:center}
.social-share li{list-style:none!important;display:inline-flex!important;float:none!important;margin:0!important;padding:0!important}
.social-share li::marker{content:""!important}
.social-share .social-icon{display:inline-flex!important;align-items:center;justify-content:center;
  width:34px!important;height:34px!important;color:#fff!important;border-radius:8px!important;font-size:18px;line-height:1;margin:0!important}
.social-share .btn-fb .social-icon{background:#1877f2!important}
.social-share .btn-ln .social-icon{background:#06c755!important}
.social-share .btn-gg .social-icon{background:#eb4026!important}
/* X/twitter glyph font ไม่โหลด → ใส่โลโก้ X เป็น SVG พื้นหลังแทน */
.social-share .btn-tw .social-icon{background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center/15px no-repeat!important}
.social-share .btn-tw .social-icon i{display:none!important}
.social-share img{width:26px!important;height:26px!important;object-fit:contain;display:inline-block;vertical-align:middle}
.slide-in-share img,.social-network img{width:26px!important;height:auto!important;display:inline-block;vertical-align:middle;margin:0 3px}

/* 6) แบ่งหน้าโปรโมชั่น — ชิดซ้าย + ปุ่มเล็ก (ให้เหมือนต้นฉบับ) */
/* slider โปรโมชั่น — การ์ดเป็น float ทำให้ container สูง 0 (float collapse)
   ใส่ flow-root เพื่อ wrap การ์ด แล้ว margin ถึงจะเว้นช่องได้จริง */
[data-clone-promo]{display:flow-root!important;margin-top:22px!important;margin-bottom:22px!important}
/* ค่าตรงกับเว็บต้นฉบับเป๊ะ: fs 12px, pad 5px 10px, active #5F25AF, br 5px, ตัวหนังสือดำ
   + เว้นช่องว่างบน-ล่างของเลขหน้า */
.clone-pager{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3px;clear:both;
  width:100%;margin:8px 0 28px;padding-right:6px}
.clone-pager a{cursor:pointer;padding:5px 10px;border-radius:5px;color:#000;text-decoration:none;
  font-size:12px;line-height:1.4;border:none;background:transparent;transition:.12s}
.clone-pager a:hover{color:#5f25af}
.clone-pager a.active{background:#5f25af;color:#fff}
.clone-pager a.disabled{color:#000;pointer-events:none}