.reaction-section{position:relative;display:block;}
  .reaction-section-title{display:block;margin-bottom:25px;text-align:center}
  .rb-reaction{display:flex;flex-wrap:wrap;justify-content:space-evenly;margin-top:20px;}
  .reaction{position:relative;flex:0 0 85px;max-width:70px;cursor:pointer}
  .reaction-content{display:block;padding-top:5px;text-align: center;padding-bottom:5px;-webkit-transition:all .3s cubic-bezier(.36,.8,.41,1);transition:all .3s cubic-bezier(.36,.8,.41,1);background-color:transparent}
  .reaction.active .reaction-content{border-color:#f9d045}
  .reaction-content .reaction-icon{display:block;width:60px;height:auto;margin:auto;padding-right:10px;padding-left:10px;-webkit-transition:transform .3s cubic-bezier(.36,.8,.41,1);transition:transform .3s cubic-bezier(.36,.8,.41,1);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);will-change:transform}
  .reaction-content svg{max-width:100%;width:100%;height:auto}
  .reaction:hover .reaction-icon {-webkit-transform:scale(1.4);transform:scale(1.4);animation: heartbeat 1s ease-in-out infinite; }
  .reaction:hover .reaction-nhan{display:block;opacity: 1;transition: all 0s;visibility: visible;transform:scale(1.1);transition-duration:.05s;transition-property:transform;transition-timing-function:linear;}
  .reaction-nhan {display:none;background:var(--transparent-bg);border-radius:100px;color:#48525c;font-size:10px;font-weight:700;opacity:0;padding:4px;position:absolute;top:-25px;transform:translateX(-50%);visibility:hidden;line-height: normal;width: 100%;}
  .reaction-title.h6{font-size:13px;display:block;margin-top:5px;text-align:center;white-space:nowrap}
  .total-wrap{background: #a9a9a9;display: none;border-radius: 100%;color: #fff;line-height: normal;height: 16.96px;font-size: 60%;font-weight: 700;padding: 2px 6px;position: absolute;right: 3px;top: 7px;}
  .reaction.active .total-wrap{color:#fff;display:block;background:#f3797e}
  .reaction.active .reaction-title.h6 {font-weight:700;}
  .reaction:before{content:'';-webkit-transition:opacity .3s;transition:opacity .3s;pointer-events:none;opacity:0}
  .reaction.loading:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200'%3E%3Cg data-idx='1'%3E%3Cg transform='matrix(1,0,0,1,80,50)' data-idx='2'%3E%3Cg transform='matrix(1,0,0,1,0,0)' data-idx='3'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.9103' data-idx='4' transform='matrix(1.4551500082015991,0,0,1.4551500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,71.21320343017578,71.21320343017578)' data-idx='7'%3E%3Cg transform='matrix(0.7071067811865476,0.7071067811865476,-0.7071067811865476,0.7071067811865476,0,0)' data-idx='8'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.0353' data-idx='9' transform='matrix(1.0176500082015991,0,0,1.0176500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,50,80)' data-idx='12'%3E%3Cg transform='matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,0,0)' data-idx='13'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.1603' data-idx='14' transform='matrix(1.0801500082015991,0,0,1.0801500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,28.78679656982422,71.21320343017578)' data-idx='17'%3E%3Cg transform='matrix(-0.7071067811865475,0.7071067811865476,-0.7071067811865476,-0.7071067811865475,0,0)' data-idx='18'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.2853' data-idx='19' transform='matrix(1.1426500082015991,0,0,1.1426500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,20,50)' data-idx='22'%3E%3Cg transform='matrix(-1,1.2246467991473532e-16,-1.2246467991473532e-16,-1,0,0)' data-idx='23'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.4103' data-idx='24' transform='matrix(1.2051500082015991,0,0,1.2051500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,28.78679656982422,28.78679656982422)' data-idx='27'%3E%3Cg transform='matrix(-0.7071067811865477,-0.7071067811865475,0.7071067811865475,-0.7071067811865477,0,0)' data-idx='28'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.5353' data-idx='29' transform='matrix(1.2676500082015991,0,0,1.2676500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,50,20)' data-idx='32'%3E%3Cg transform='matrix(-1.8369701987210297e-16,-1,1,-1.8369701987210297e-16,0,0)' data-idx='33'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.6603' data-idx='34' transform='matrix(1.3301500082015991,0,0,1.3301500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,71.21320343017578,28.78679656982422)' data-idx='37'%3E%3Cg transform='matrix(0.7071067811865474,-0.7071067811865477,0.7071067811865477,0.7071067811865474,0,0)' data-idx='38'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.7853' data-idx='39' transform='matrix(1.3926500082015991,0,0,1.3926500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg data-idx='42'%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size: 100%;position:absolute;right:0;bottom:auto;left:auto;display:block;width:18px;height:18px;content:'';-webkit-transform-origin:center;transform-origin:center;animation:reaction-spinner 2s linear infinite;letter-spacing:0;opacity:1;color:#f9d045;will-change:transform}
@keyframes heartbeat {
      0% {
        transform: scale(1);
      }
      25% {
        transform: scale(1.1); /* Slightly larger */
      }
      50% {
        transform: scale(1);
      }
      75% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }  
@keyframes reaction-spinner {
    to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}
  }
  @media only screen and (max-width: 767px) {
    .reaction-section{padding:20px 7px}
    .reaction-section-title{margin-bottom:10px}
    .rb-reaction{flex-wrap:wrap;justify-content:space-evenly}
    .reaction{flex:0 0 70px;margin-top:5px}
    .reaction-content{padding-right:2px;padding-bottom:2px}
    .reaction-content .reaction-icon{width:40px;padding-right:2px;padding-left:2px}
    .h6.reaction-title{display:inline}
    span.total-wrap{font-size:11px;margin-top:5px}
  }
  @media only screen and (max-width: 767px) {
    .reaction-section{margin-top:25px}
  }