/* TPH67_ARTICLE_SHARE_COMPONENT
   Reusable article share UI. No article content/SEO/query changes.
*/
.tph67-share{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
  padding:10px 0;
  border-top:1px dashed #c7d6d2;
  border-bottom:1px dashed #c7d6d2;
  font-family:"Noto Sans Thai",Tahoma,Arial,sans-serif;
}
.tph67-share--top{margin-top:10px;margin-bottom:18px}
.tph67-share--bottom{margin-top:26px;margin-bottom:22px}
.tph67-share-label{
  margin-right:2px;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  color:#213a42;
}
.tph67-share-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  border:1px solid #d8e4e1;
  border-radius:999px;
  padding:6px 11px;
  background:#fff;
  color:#173b42;
  font:700 12px/1.2 "Noto Sans Thai",Tahoma,Arial,sans-serif;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:none!important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.tph67-share-btn:hover{border-color:#0b8b71;background:#f1faf7}
.tph67-share-btn:active{transform:translateY(1px)}
.tph67-share-btn svg{width:16px;height:16px;flex:0 0 16px}
.tph67-share-btn--native{background:#0b8b71;border-color:#0b8b71;color:#fff}
.tph67-share-btn--native:hover{background:#08765f;border-color:#08765f}
.tph67-share-btn--facebook svg{color:#1877f2}
.tph67-share-btn--line svg{color:#06c755}
.tph67-share-btn--x svg{color:#111}
.tph67-share-btn--copy svg{color:#0b8b71}
.tph67-share-status{
  flex-basis:100%;
  min-height:0;
  font-size:11px;
  line-height:1.3;
  color:#08765f;
}
.tph67-share-status:empty{display:none}

@media(max-width:767px){
  .tph67-share{gap:7px;margin-left:0;margin-right:0;padding:9px 0}
  .tph67-share-label{flex-basis:100%;font-size:12px;margin-bottom:1px}
  .tph67-share-btn{min-height:36px;padding:7px 10px;font-size:11px}
  .tph67-share-btn svg{width:15px;height:15px;flex-basis:15px}
  .tph67-share--bottom{margin-top:22px}
}
@media(max-width:390px){
  .tph67-share-btn{padding:7px 9px}
}

/* TPH67B_ARTICLE_SHARE_MOBILE_COMPACT
   Mobile-only refinement after desktop acceptance.
   Goal: smaller share icons/buttons, tighter gaps, no horizontal overflow.
   Desktop/tablet presentation remains exactly STEP67A.
*/
@media (max-width:767px){
    .article-page [class*="tph67"]{
        box-sizing:border-box;
        max-width:100%;
        min-width:0;
    }

    .article-page [class*="tph67"]:has(> a[class*="tph67"]),
    .article-page [class*="tph67"]:has(> button[class*="tph67"]){
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        gap:5px!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:visible!important;
    }

    .article-page a[class*="tph67"],
    .article-page button[class*="tph67"]{
        box-sizing:border-box!important;
        width:auto!important;
        max-width:100%!important;
        min-width:30px!important;
        min-height:30px!important;
        height:30px!important;
        padding:4px 7px!important;
        gap:4px!important;
        border-radius:999px!important;
        font-size:10.5px!important;
        line-height:1!important;
        white-space:nowrap!important;
        flex:0 0 auto!important;
    }

    .article-page [class*="tph67"] svg{
        width:15px!important;
        height:15px!important;
        min-width:15px!important;
        min-height:15px!important;
        flex:0 0 15px!important;
    }

    .article-page [class*="tph67"] [class*="icon"],
    .article-page [class*="tph67"][class*="icon"]{
        width:15px!important;
        height:15px!important;
        min-width:15px!important;
        min-height:15px!important;
        font-size:15px!important;
        line-height:15px!important;
    }

    .article-page [class*="tph67"][class*="label"],
    .article-page [class*="tph67"] [class*="label"]{
        font-size:11px!important;
        line-height:1.3!important;
        min-width:0!important;
    }
}

/* TPH67D_ARTICLE_SHARE_MOBILE_COMPACT_FINE
   Fine-tune only after STEP67B visual review.
   Desktop/tablet remains untouched.
*/
@media (max-width:767px){
    .tph67-share{
        gap:4px!important;
    }

    .tph67-share-label{
        font-size:10px!important;
        line-height:1.25!important;
    }

    .tph67-share-actions{
        gap:4px!important;
        flex-wrap:wrap!important;
        min-width:0!important;
        max-width:100%!important;
    }

    .tph67-share-btn{
        min-height:28px!important;
        height:28px!important;
        padding:4px 7px!important;
        gap:4px!important;
        font-size:10px!important;
        line-height:1!important;
        border-radius:8px!important;
        min-width:0!important;
        max-width:100%!important;
    }

    .tph67-share-btn svg,
    .tph67-share-btn img,
    .tph67-share-btn .tph67-share-icon{
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        min-height:14px!important;
        max-width:14px!important;
        max-height:14px!important;
    }
}

/* TPH67E_ARTICLE_SHARE_MOBILE_TOP_LAYOUT_FIX
   User acceptance state:
   - Desktop/tablet top+bottom: accepted, untouched.
   - Mobile bottom: accepted, untouched.
   - Mobile top only: prevent overflow by separating the label from the action row.
   Button/icon/font sizes stay exactly as STEP67D.
*/
@media (max-width:767px){
    .tph67-share--top{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        gap:4px!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
        align-items:center!important;
    }

    .tph67-share--top .tph67-share-label{
        grid-column:1 / -1!important;
        width:100%!important;
        min-width:0!important;
        margin:0 0 2px!important;
        white-space:normal!important;
    }

    .tph67-share--top .tph67-share-btn{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:28px!important;
        min-height:28px!important;
        padding-left:3px!important;
        padding-right:3px!important;
        font-size:10px!important;
        gap:2px!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
        white-space:nowrap!important;
    }

    .tph67-share--top .tph67-share-btn svg,
    .tph67-share--top .tph67-share-btn img{
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        max-width:14px!important;
        flex:0 0 14px!important;
    }

    .tph67-share--top .tph67-share-status{
        grid-column:1 / -1!important;
        width:100%!important;
        min-width:0!important;
    }
}

/* TPH67F_ARTICLE_SHARE_MOBILE_TOP_HIDE_COPY
   Mobile top only:
   Hide Copy Link from the TOP share bar.
   Keep Share / Facebook / LINE / X.
   Bottom share bar and all desktop/tablet states remain unchanged.
*/
@media (max-width:767px){
    .tph67-share--top .tph67-share-btn--copy{
        display:none!important;
    }
}

/* TPH69B_DESKTOP_SHARE_SINGLE_ROW_BEGIN */
/* Desktop and tablet only. Keep all original mobile rules untouched. */
@media screen and (min-width: 769px) {
  .tph67-share { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; }
  .tph67-share-label { flex:0 0 auto !important; white-space:nowrap !important; margin:0 !important; }
  .tph67-share-actions { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; grid-template-columns:none !important; align-items:center !important; justify-content:flex-start !important; flex:0 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; gap:6px !important; }
  .tph67-share-actions > *, .tph67-share-btn { flex:0 0 auto !important; white-space:nowrap !important; }
}
/* TPH69B_DESKTOP_SHARE_SINGLE_ROW_END */