.hanam-pab{
    position:relative;
    z-index:8;
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    margin:11px 0 4px;
    clear:both;
}
.hanam-pab-loop{padding:0 7px}
.hanam-pab-single{justify-content:flex-start;margin-top:16px}
.hanam-pab-btn{
    height:var(--hanam-button-height,40px);
    min-height:18px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:clamp(2px,calc(var(--hanam-font-size,12px) * .4),7px);
    border:0!important;
    border-radius:var(--hanam-radius,9px)!important;
    padding:0 clamp(4px,calc(var(--hanam-button-height,40px) * .32),13px)!important;
    overflow:hidden;
    margin:0!important;
    color:#fff!important;
    font-size:var(--hanam-font-size,12px)!important;
    font-weight:800!important;
    letter-spacing:.1px;
    line-height:1!important;
    white-space:nowrap;
    text-align:center;
    text-decoration:none!important;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(15,23,42,.12);
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
    appearance:none;
    -webkit-appearance:none;
}
.hanam-pab-btn:hover,.hanam-pab-btn:focus-visible{
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(15,23,42,.18);
    outline:none;
}
.hanam-pab-equal>.hanam-pab-detail,.hanam-pab-equal>.hanam-pab-share-wrap{flex:1 1 0;min-width:0}
.hanam-pab-equal .hanam-pab-share-toggle{width:100%}
.hanam-pab-detail{background:var(--hanam-detail,#14804a)!important}
.hanam-pab-detail:hover,.hanam-pab-detail:focus-visible{background:var(--hanam-detail-hover,#0f693c)!important}
.hanam-pab-share-toggle{background:var(--hanam-share,#1675aa)!important}
.hanam-pab-share-toggle:hover,.hanam-pab-share-toggle:focus-visible,.hanam-pab-share-wrap.is-open .hanam-pab-share-toggle{background:var(--hanam-share-hover,#0f608e)!important}
.hanam-pab-icon{width:clamp(9px,calc(var(--hanam-font-size,12px) + 3px),18px);height:clamp(9px,calc(var(--hanam-font-size,12px) + 3px),18px);fill:currentColor;flex:0 0 auto}
.hanam-pab-arrow{transition:transform .2s ease}.hanam-pab-detail:hover .hanam-pab-arrow{transform:translateX(3px)}
.hanam-pab-chevron{width:clamp(8px,calc(var(--hanam-font-size,12px) + 1px),16px);height:clamp(8px,calc(var(--hanam-font-size,12px) + 1px),16px);transition:transform .2s ease}.hanam-pab-share-wrap.is-open .hanam-pab-chevron{transform:rotate(180deg)}

.hanam-pab-share-wrap{position:relative;display:flex}
.hanam-pab-share-menu{
    position:absolute;
    right:0;
    bottom:calc(100% + 10px);
    z-index:99999;
    width:220px;
    padding:8px;
    border:1px solid #e2e7ec;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,23,42,.22);
    transform-origin:bottom right;
    animation:hanamMenuIn .16s ease-out;
}
.hanam-pab-share-menu[hidden]{display:none!important}
.hanam-pab-share-menu:after{content:"";position:absolute;right:20px;top:100%;border:8px solid transparent;border-top-color:#fff}
.hanam-pab-social{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:41px;
    padding:8px 10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#26313d!important;
    font-size:13px;
    font-weight:750;
    text-align:left;
    text-decoration:none!important;
    cursor:pointer;
    transition:background .15s ease,transform .15s ease;
}
.hanam-pab-social:hover,.hanam-pab-social:focus-visible{background:#f2f6f8;color:#111827!important;transform:translateX(2px);outline:none}
.hanam-pab-social svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.hanam-pab-facebook svg{color:#1877f2}.hanam-pab-tiktok svg{color:#111}.hanam-pab-copy svg{color:#64748b}
.hanam-zalo-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:#0866ff;color:#fff;font-size:13px;font-weight:900;flex:0 0 auto}
.hanam-pab-toast{
    position:absolute;
    left:50%;
    bottom:calc(100% + 14px);
    z-index:100000;
    max-width:260px;
    padding:8px 11px;
    border-radius:8px;
    background:#17212b;
    color:#fff;
    font-size:12px;
    font-weight:650;
    line-height:1.35;
    text-align:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,8px);
    transition:.2s ease;
}
.hanam-pab-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes hanamMenuIn{from{opacity:0;transform:scale(.96) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:549px){
    .hanam-pab{gap:6px}.hanam-pab-loop{padding:0 3px}.hanam-pab-btn{font-size:var(--hanam-font-size,12px)!important}.hanam-pab-share-menu{right:-3px;width:205px}.hanam-pab-single .hanam-pab-share-wrap{width:100%}.hanam-pab-single .hanam-pab-share-toggle{width:100%}
}