/*****************************
 * Share buttons
******************************/
/* General */
.vii-share-block {gap:10px 20px;}
.vii-share-block__txt {color:#000d10; font-size:var(--vii-size-14); line-height:1.2;letter-spacing:.15em;}

/* Button */
.a2a_kit {
    --icon-size:44px; --svg-size:32px; --gap:8px;
    display:flex;
}
.a2a_kit > a {display:flex; align-items:center; flex-direction:row-reverse;}
.a2a_kit > a:not(:last-child) {margin-right:var(--gap);}

/* hover */
.a2a_kit > a:hover {color:var(--vii-color-primary);}
.a2a_kit > a:hover .a2a_svg, .a2a_kit > a:focus-visible .a2a_svg {background:var(--vii-color-primary) !important; border-color:var(--vii-color-primary);}
.a2a_kit > a:hover svg path, .a2a_kit > a:focus-visible svg path {fill:#fff;}
.a2a_kit > a:focus-visible {border-radius:50%;}

/* icon */
.a2a_kit .a2a_svg {
    width:var(--icon-size); height:var(--icon-size); line-height:var(--icon-size);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:var(--vii-transition);
}
.a2a_kit .a2a_svg svg {width:var(--svg-size);}
.a2a_kit .a2a_svg svg path {transition:var(--vii-transition);}

/* label */
.a2a_kit .a2a_label {
    position:relative !important; clip-path:none;
    width:auto; height:auto; margin-right:5px;
    display:none;
}

/* Zalo */
.a2a_kit a:not([class*="a2a_button"]) {
    width:var(--icon-size); height:var(--icon-size); border-radius:50%;
    background:var(--vii-color-primary); color:#fff; font-size:20px;
    justify-content:center; position:relative;
}
.a2a_kit a:not([class*="a2a_button"]):before {
    font-family:var(--vii-font-icomoon); content:"\e919";
    line-height:1; font-weight:400;
}
.a2a_kit a:not([class*="a2a_button"]) img {display:none;}
.a2a_kit a:not([class*="a2a_button"]):hover, .a2a_kit a:not([class*="a2a_button"]):focus {background:var(--vii-color-primary);}


/*****************************
 * Share buttons Responsive
******************************/
@media only screen and (max-width:768px) {
    .a2a_kit {--icon-size:40px; --svg-size:20px;}
    .a2a_kit a:not([class*="a2a_button"]) {font-size:16px;}
}
@media only screen and (max-width:480px) {
    .a2a_kit {--icon-size:30px; --svg-size:20px;}
    .a2a_kit a:not([class*="a2a_button"]) {font-size:14px;}
}