.unpadded{padding:0!important}
.menu-main, .menu-main h4.header.item {border-radius: 0!important;margin-top:0!important;}
#top-bar .menu-main, .menu-main h4.header.item {background: #08527B !important; color: #FFF;}
.menu-header a.ui.basic.button {color: #fff!important; box-shadow: none;}
div#left-sidebar img {
  max-width: 100%;
  height: auto;
}
html {
  scroll-behavior: smooth;
}
#cont-sidebar .wm-free-text .ui.header {
  background: #fe0000;
  color: #fff;
  font-size: 17px!important;
  /* text-transform: uppercase; */
  padding: 10px;
}
#right-sidebar .wm-module, #left-sidebar .wm-module{margin-bottom:28px}
#right-sidebar .wm-product .card{margin-left:0;margin-right:0}
.wm-menu.nav-main{margin:0;}
#top-bar .wm-module.wm-menu.ui.menu-main .item {
  text-transform: uppercase;
  padding: 10px 41px;
}
.wm-module.wm-menu.ui.menu-main .menu.right .item {text-transform: none;}
#right-sidebar .header.item, #right-sidebar .ui.header, #left-sidebar .ui.header, #left-sidebar .header.item  {
  background: #08527b;
  color: #fff;
  text-transform: uppercase;
  border-radius: 0;
  font-size: 1.071rem;
  padding: .92857143em 1.14285714em;
}
#right-sidebar .wm-module.wm-menu.ui.menu-main .item:not(.header) {
  text-transform: capitalize;
  font-size: 13px;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}
#right-sidebar .wm-module:not(.wm-menu) {box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);}
#right-sidebar .wm-module.wm-product.menu-left .ui.dividing.header, #left-sidebar .wm-module.wm-free-text .ui.header {padding: 10px 15px; font-size: 1.071rem;}
#right-sidebar .menu-left .ui.items>.item>.image:not(.ui) {width: 100px;}
#right-sidebar .menu-left .ui.items>.item>.content>.header:not(.ui) {font-size: 14px;}
.wm-module.wm-product .ui.dividing.header, .wm-module.wm-post .ui.dividing.header {
  margin: auto;
  margin-bottom: 30px;
  padding: 10px 0!important;
  border-width: 2px;
  text-transform: uppercase!important;
  border: none;
  background-image: -webkit-linear-gradient(top, #005db9, #00254a)!important;
  text-align: center;
  border-radius: 30px!important;
  color: #fff!important;
  font-weight: bold;
  width: 40%;
}
.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui), .wm-product .card h2, .wm-product .card a {
  font-size: 15px;
}
div#row-fotter-one {
  background: #08527b;
  color: #FFF;
  padding-top: 20px;
}
#row-fotter-one .ui.menu{
  background:transparent;
}
#row-fotter-one .ui.menu .item,#row-fotter-one .ui.menu .item:hover{
  color:#fff;
}
#end-row{margin-bottom:30px!important}

.owl-carousel .owl-item img{
  max-width:100%;
  margin:auto;
  width:100%!important;
}
.wm-module.wm-product .content .header h2 {font-size: 1.1em;}
.wm-module.wm-p-detail.content .ui.tab { margin-bottom: 30px;}
#left-sidebar, #cont-sidebar, #right-sidebar {
  padding: 5px;
}
.blurring.dimmable>.dimmer {
  background-color: transparent !important;
}
.blurring.dimmed.dimmable>:not(.dimmer) {
  -webkit-filter: none;
  filter: none;
}
.products-h .cards .card .ui.image {
  border-radius: 0 !important;
}
.products-h .cards .card {
  border-radius: 0;
  padding: 5px;
}
.products-h .cards .card>.content {
  padding: 10px 0;
}
.products-h .cards .card>.content a.header h2 {
  font-size: 14px;
  color: #0065b1;
}
.cont-sidebar .wm-module {
  margin-bottom: 30px;
}
.right-sidebar .ui.small.image {
  width: 100px;
}
#left-sidebar .menu-main {
  background: none !important;
}

/*************** hugo moi *************/
/**************************************/
#video > div:last-child {
  margin-top: 20px;
}
.wm-free-text img:hover{
    animation: none;
    -webkit-animation: none;
}

/** padding: 0 **/
.menumain, #timkiem, #slider .column {
  padding: 0!important ;
}
.menumain {
  height: 45px;
}
#h-right .wm-menu, #menumain .wm-menu {
  box-shadow: none;
  border: none;
  background: transparent;
}

/** banner **/
#banner {

}
#banner .animated{
  text-align: center;
}
span.tenct {
  color: #ed1c24;
  font-weight: 700;
  font-size: 31px;
  text-align: center;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
span.dc * {
  font-weight: 100;
  color: #212121;
  font-size: 16px;
  margin-top: 5px;
}
span.dc a:hover{
  color: #E11428; 
}

/** heaader **/
.ui.vertical.menu .item>i.icon {
  float: unset;
}
.header, #header {
  background: #f8f8f8;
}
.header {
  border-top: 5px solid #1f00ff;
}

#h-right a.item {
  padding: 0;
  padding-bottom: 5px;
  padding-left: 20px;
  float: left;
  font-weight: 900;
  font-size: 16px;
  color: #ed1c24;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  transition: 0.1s linear all; 
}
#h-right a:hover {
  color: #004f9f;
  background: transparent; 
  transition: 0.1s linear all; 
}
#h-right i.icon {
  color: #004f9f;
  margin-right: 10px;
}
#h-right .wm-free-text img {
  border-radius: 30px;
  background: #004f9f;
  padding: 3px;
}

.menumain {
  background-image: -webkit-linear-gradient(top, #005db9, #00254a);
}
#menumain {
  background: transparent;
}
#menumain a.item, #menumain .dropdown {
  color: #fff!important;
}
#menumain a.item:hover, #menumain  a.item.wm.active, #menumain .dropdown:hover{
  background-color: #ed1c24;
  transition: 0.1s linear all; 
  border-radius: 0;
}
#menumain .dropdown>.menu {
  background: #0053a6;
}
#menumain .ui.dropdown .menu>.item:hover{
  background: #003a75!important;
}


.lienhe a{
  color: #212121; 
  transition: 0.1s linear all; 
}
.lienhe a:hover{
  color: #E11428; 
  transition: 0.1s linear all; 
}

.trangtimkiem, .tranglienhe, .trangbaiviet{
  margin: 50px 0;
}


/* nut GUI , xem them */
.contact-form input[type="submit"], .ui.primary.button, button.btn-l-ac.ui.button.ajx-loaded {
  background-color: #B8513A!important;
  padding: 10px 50px!important;
  transition: background .2s ease-in;
  font-size: 15px;
  font-weight: lighter!important;
  border-radius: 30px!important;
  text-transform: uppercase;
  color: #fff!important;
}
.contact-form input[type="submit"]:hover, .ui.primary.button:hover, button.btn-l-ac.ui.button.ajx-loaded:hover {
  background-color: #005bac!important;
}
input, textarea {
  border-radius: 30px!important;
}

input[type=text], input[type=email], input[type=search], input[type=password]{
  border: 1px solid #e1e1e1;
  box-shadow: 0 1px 0 0 #fff;
  color: #7b7b7b;
  font-size: 15px;
  background: #e9e8e2;
  padding-right: 135px;
  line-height: 30px;
  height: 35px;
}
/*================================================
================================================
================================================*/
/* NÚT GỌI TỔNG HỢP */
/********************
mau do: #ee4035
mau cam: #f37736
mau vang: #fdf498
xanh la: #7bc043
xanh duong: #0492cf
********************/
.def-content{
  border-radius: 30px;
}
.def-content a{
  color: #212121;
  font-weight: 500;
}
.def-content .item{
  border: 2px solid #ddd0;
}

.def-content .item:hover a{
  color: #fff;
  font-weight: bold;
}
.def-content .item .img {
  border: 1px solid #fe4a4900;
  transition: 0.1s linear all; 
}

/* nút tròn chung HOver */
.def-content .item:hover .img{
  background: #b2ffed!important ;
  border: 2px solid #fff;
  transition: 0.1s linear all; 
}
/* nút hotline */
.def-content .item.phone .img {
  background: #ee4035;
} 

.def-content .item.phone:hover{
  box-shadow: 0px 0px 5px -1px #000;
  background: #ee4035;
  border: 2px solid #f99aa5;
  border-radius: 30px;
  transition: 0.3s linear all; 
}
.def-content .item.callback .img{
  background: #ec6b0d;
}
.def-content .item.callback:hover{
  box-shadow: 0px 0px 5px -1px #000;
  background: #ec6b0d;
  border: 2px solid #ec9a81;
  border-radius: 30px;
  transition: 0.3s linear all; 
}

/* nút Mail */
.def-content .item.mail .img {
  background: #0492cf;
}
.def-content .item.mail:hover{
  box-shadow: 0px 0px 5px -1px #000;
  background: #0492cf;
  border: 2px solid #c0fff0;
  border-radius: 30px;
  transition: 0.3s linear all; 
}

/* nút Mess*/
.def-content .item.messenger .img {
  background: #fed766;
}
.def-content .item.messenger:hover{
  box-shadow: 0px 0px 5px -1px #000;
  background: #f37736;
  border: 2px solid #c0fff0;
  border-radius: 30px;
  transition: 0.3s linear all; 
}

/* nút Zalo */
.def-content .item.zalo .img {
  background: #7bc043;
}
.def-content .item.zalo:hover{
  box-shadow: 0px 0px 5px -1px #000;
  background: #7bc043;
  border: 2px solid #d9ffb9;
  border-radius: 30px;
  transition: 0.3s linear all; 
}
/*================================================
================================================
================================================*/
/* form ĐĂNG NHẬP , ĐĂNG KÝ*/
.ui.form .field.field input:-webkit-autofill, #dong-dang-ky input{
  border-radius: 30px;
} 

/* nut THANH TOAN, MA GIAM GIA */
input.ui.button, .wrap-form-coupon #btnUseCoupon{
  background: #b8513a;
  padding: 12px 20px!important ;
  color: #ffffff!important ;
  border-radius: 30px!important;
  font-size: 14px!important ;
}
input.ui.button:hover, .wrap-form-coupon #btnUseCoupon:hover {
  background: #73c04c;    
  color: #2c130e;
}

/* THANH SEARCH TRANG CHỦ */
#timkiem {
  position: relative;
  bottom: 7px;
}
.input button.ui.button {
  background: #ed1c24;
  color: #ffffff;
  padding: 0 20px!important;
  border-radius: 5px!important;
  transform: skewX(-20deg) translateX(0px);
  position: relative;
  left: -25px;
  border: 2px solid #ed1c24;
  transition: 0.3s linear all;
}
.input button.ui.button:hover {
  background: #ffffff;
  color: #ed1c24;
  border: 2px solid #ed1c24;
  transition: 0.3s linear all;
}
.input input.txtKeyword {
  color: #3b5998!important;
  border-radius: 5px!important;
  transform: skewX(-20deg) translateX(0px);
  border: none;
  background: #fff;
  height: 32px;
}
.ui.input input:focus, .ui.input.focus input{
  color: #212121!important;
}
/* khung xanh khó chịu */
.ui.input input:focus, .ui.input.focus input {
  border-color: #83bcaf;
}
.ui.action.input:not([class*="left action"]) input:focus {
  border-right-color: #83bcaf!important;
}



/* Nút THÊM VÀO GIỎ */
.button-group  .ui.button{
  transition: 0.2s linear all;
  background: #458ccc; 
  color: #fff;
}
.button-group  .ui.button:hover {
  background: #f44336;
  color: white;  
  transition: 0.1s linear all; 
}
.button-group  .ui.button i.cart.icon {
  opacity: 1;
}

/* menu mobile */
.ui.basic.button, .ui.basic.buttons .button {
  background: transparent!important;
  color: #ffffff!important;
  font-weight: 900;
  border-radius: 30px;
  border: 2px solid transparent;
  text-transform: uppercase;
  text-shadow: none!important;
  box-shadow: none;
}
nav.wm-module.wm-menu.ui.responsive.borderless.menu.tablet.mobile.only {
  background: transparent;
}
.ui.basic.button:focus, .ui.basic.button:hover, .ui.basic.buttons .button:focus, .ui.basic.buttons .button:hover {
  background: transparent!important;
  color: rgb(150, 0, 77)!important;
  box-shadow: none;
}

/* bài viết */
.description {
  font-size: 15px;
}
.description span {
  font-weight: 700;
  color: #ed1c24;
}
.wm-post .content .header, .wm-product .card h2, .wm-product .card a {
  border: none;
  background: transparent;
  text-transform: uppercase;
  text-align: center;
  color: #0055aa!important;
  margin: 0;
  transition: 0.1s linear all;
}
.wm-post .content:hover .header, .wm-post .card:hover .content .header{
  color: #ed1c24!important ; 
  transition: 0.1s linear all; 
}
.wm-post .card {
  box-shadow: none!important;
}
.wm-post .content .description{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  margin: 0!important;
}
.wm-post img {
  border: 2px dotted #0051a3!important;
  background: transparent!important;
  border-radius: 10px!important;
  padding: 5px;
}
.trangchu .wm-module.wm-post:not(:first-child) {
  margin-top: 50px;
}

/* ba cột */
.bacot .ui.one.items.simply-scroll-list {
  height: auto!important ;
}
.bacot.wm-mobile.column {
  background: #f8f8f8;
  padding: 40px 0!important;
}
.bacot.wm-mobile.column .column{
  background: #f8f8f8; 
}
.bacot.wm-mobile.column .column .ui.header {
  background: transparent!important;
  color: #212121!important;
  font-size: 20px;
  text-transform: uppercase;
  padding: 0!important;
  padding-left: 10px!important;
  margin: 0!important;
  margin-bottom: 20px!important;
  text-align: left;
  border-radius: 0!important ;
  border-left: 5px solid #0055aa;
  border-bottom: 4px dotted #e8e8e8;
  width: 100%;
}
.bacot.wm-mobile.column .wm-post .content .header{
  border: none;
  font-size: 13px;
  background: transparent;
  text-transform: none;
  color: #212121!important;
  transition: 0.1s linear all;
  text-align: left!important ;
}
.bacot.wm-mobile.column .wm-post .content .header a{
  color: #212121; 
  transition: 0.1s linear all; 
}
.bacot.wm-mobile.column .wm-post .item{
  height: 92px;
}
.bacot.wm-mobile.column .wm-post .item:hover .content .header a{
  color: #ed1c24; 
  transition: 0.1s linear all; 
}
.bacot.wm-mobile.column .wm-post .content {
  padding: 0;
  padding-top: 10px;
  height: 50%;
}
.bacot.wm-mobile.column .wm-post .content .description{
  text-align: left;
}
.bacot.wm-mobile.column .wm-module.wm-free-text iframe {
  width: 100%;
  height: 215px;
}
.bacot .wm-post img {
  height: 70%;
  object-fit: cover;
  width: 90%;
  margin: 0;
}
.bacot .wm-post .ui.small.image {
  height: 130px;
}

/* thanh cuộn tự động */
@import url("/public/jquery-simplyscroll-2.0.5/jquery.simplyscroll.css";);
.simply-scroll-clip{
  height: 500px;
  overflow: hidden;
  border-bottom: 2px solid #0055aa;
}


/* slider đối tác */
.sliderdoitac.wm-mobile.column {
  border-top: 1px solid #0055aa;
  border-bottom: 1px solid #0055aa;
  margin: 20px 0;
}
.sliderdoitac img {
  padding: 25px;
}

/* footer */
.footer.wm-mobile.column, .footer.wm-mobile.column .column  {
  background: #0055aa;
}
.footer.wm-mobile.column{
  padding: 30px 0!important;
}
.footer.wm-mobile.column .column .ui.header{
  background: transparent;
  font-weight: bold;
  font-size: 25px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #ed1c24;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.copyR.wm-mobile.column, #copyR {
  background: #003c77;
}
#copyR * {
  color: #ffffff;
  font-size: 14px;
  background: transparent; 
}
.footer .wm-module.wm-free-text .content * {
  color: #fff;
  transition: 0.1s linear all; 
}
.footer .wm-module.wm-free-text .content a:hover{
  color: #ffe76a;
  transition: 0.1s linear all; 
}
.footer .ui.form .required.field>label:after, .footer .ui.form .required.fields.grouped>label:after,.footer .ui.form .required.fields:not(.grouped)>.field>label:after{
  display: none;
}

.divider-under-title{
  height: 3px;
  max-width: 72px;
  background-color: rgb(206, 191, 56);
  margin: 0.4em auto;
}
.monserrat-font{
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}
.content-size-17{
  font-size: 17px;
}
.content-size-13px{
  font-size: 13.6px;
}
.content-size-21{
  font-size: 21.76px;
}
.content-size-18 {
    font-size: 18.76px;
}
.image-icon{
  width: auto;
  height: 60px;
  margin-right: 20px;
}
.background-content{
  background-color: #fffcbf;
}
/* Bắt Đầu Responsive  */
@media(min-width:768px){.ui.grid.container:not(.no-container-bg) {background: #fff}}
@media (max-width:768px){
  #video > div:last-child {
    margin-top: 10px;
  }
  body {background: #eee;}
  html {
  scroll-behavior: smooth;
  }

  #menumain a.item {
    padding: 0 7px;
  }
  .wm-post .content .header {
    font-size: 13px!important;
  }
  .ui[class*="left icon"].input>input {
    padding-left: 10px!important;
  }
  .wm-widget.wm-cart:after {
    display: block;
    clear: both;
    content: "";
    margin-bottom: 15px;
  }
  .xs-container-mg-o-y .container {margin-top:0!important;margin-bottom:0!important;}
  body.post-category .wm-post{background:#fff;padding:15px;}
  body.post-category .wm-post .item{background:#fff;padding:15px;border-bottom:1px solid #ddd}
  body.post-category .wm-post .image {overflow: hidden;}
  body.post-detail .wm-post-detail {
    background: #fff;
    padding: 15px;
  }
  .ui.three.doubling.cards {margin-top: 0;}
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  #cont-sidebar .content img, #cont-sidebar .content table {
    width: 100%;
    height:auto;
  }
}

@media (max-width:480px){
  .logo .text_avatar.ui.fluid.image {
    font-size: 18pt !important;
  }
  .wm-post .cards .card .content h4.header {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body{
    background: #fff; 
  }
  .bacot .wm-post .ui.small.image {
    height: 100%!important;
    width: 50%!important;
    padding: 0!important;
    margin: 0;
  }
  .bacot .wm-post img {
    height: 100%;
  }
  .copyR.wm-mobile.column {
    height: 150px;
  }
  .bacot.wm-mobile.column .wm-post .content {
    padding: 0;
    width: 50%;
  }
  .bacot .ui.items>.item{
    flex-flow: wrap;
  }


  .bacot.wm-mobile.column .wm-post .content h2.header a{
    margin-top: 6px!important;
  }
  .simply-scroll-clip{
    height: 500px;
    overflow: hidden;
  }
  .ui.four.cards>.card {
    width: calc(50% - 1.5em)!important;
    margin: 0 10px;
    float: left;
  }
  #banner img {
    height: 60px;
  }
  span.tenct {
    line-height: 0px;
    font-size: 14px;
  }
  span.dc * {
    font-size: 10px;
  }
  span.dc {

  }
  #timkiem {
    bottom: 5px;
  }
  .sliderdoitac img {
    padding: 5px;
  }

  #h-right .wm-menu {
    margin-bottom: 10px;
  }
  .wm-module.wm-product .ui.dividing.header, .wm-module.wm-post .ui.dividing.header{
    width: 100%;
  }
  .trangchu .column {
    padding-top: 40px!important;
  }
  .bacot .column, .footer .column {
    width: 100%!important;
  }
  .bacot .column .wm-module, .footer .column .wm-module{
    padding: 10px;
  }
  .fb_iframe_widget iframe {
    padding-left: 13px;
  }
  .footer form.ui.form {
    padding: 0 10px;
  }
  #copyR {
    background: transparent;
    padding-top: 20px;
  }
}

@media (max-width: 480px){
  .ui.four.cards>.card {
    width: 95%!important;
    margin: 0px 10px;
    float: left;
  }
}

/*-----------hieu ung lac qua lac lai------------------*/
@keyframes shake2 {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0);
    -moz-animation: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  25%, 75% {
    -webkit-transform: translate3d(-10px,0,0);
    -moz-animation: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  50% {
    -webkit-transform: translate3d(10px,0,0);
    -moz-animation: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
}

.logo img:hover,  .wm-free-text img:hover, .ui.primary.button:hover, .input button.ui.button:hover{  
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
}

/*hotline make by Huân*/
.mobile-only {display: none;}
@media (max-width: 767px) {
  .mobile-only {display: block;}
  .pc-only {display: none;}
}
.suntory-alo-phone {
  background-color: transparent;
  cursor: pointer;
  height: 160px;
  position: fixed;
  transition: visibility 0.5s ease 0s;
  width: 120px;
  z-index: 200000 !important;
}
.suntory-alo-phone.suntory-alo-phone-0 {left: 0; bottom: 0;}
.suntory-alo-phone.suntory-alo-phone-1 {right: 0px; bottom: 0px;}
.suntory-alo-ph-circle {
  animation: 1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;
  background-color: transparent;
  border: 2px solid rgba(30, 30, 30, 0.4);
  border-radius: 100%;
  height: 160px;
  width: 160px;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.1;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
}
.suntory-alo-ph-circle-fill {
  animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
  border: 2px solid transparent;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 30px;
  top: 30px;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
}
.suntory-alo-ph-img-circle {
  animation: 1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;
  border: 2px solid transparent;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50px;
  top: 50px;
  opacity: 1;
  transform-origin: 50% 50% 0;
  z-index: 1;
}
.suntory-alo-phone.suntory-alo-hover, .suntory-alo-phone:hover { opacity: 1;}
.suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle {
  animation: 1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim !important;
}
.suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle {
  animation: 2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim !important;
}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle, .suntory-alo-phone:hover .suntory-alo-ph-circle {
  border-color: #00aff2;
  opacity: 0.5;
}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle {
  border-color: #608727;
  opacity: 1;
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle {
  border-color: #e6140f69;
  opacity: 1;
}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill, .suntory-alo-phone:hover .suntory-alo-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.9);
}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill { background-color: #608727;}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill { background-color: #e6140f;} /* màu đỏ */

.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle, .suntory-alo-phone:hover .suntory-alo-ph-img-circle { background-color: #00aff2;}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle { background-color: #608727;} /* màu xanh lá */
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle { background-color: #e6140f;} /* màu đỏ */
@keyframes suntory-alo-circle-anim {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5) skew(1deg);
  }
  30% {
    opacity: 0.5;
    transform: rotate(0deg) scale(0.6) skew(1deg);
  }
  100% {
    opacity: 0.6;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
}
@keyframes suntory-alo-circle-img-anim {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}
@keyframes suntory-alo-circle-fill-anim {
  0% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
  50% {
    opacity: 0.2;
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
}
.suntory-alo-ph-img-circle i {
  animation: 1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;
  font-size: 40px!important;
  line-height: 58px!important;
  padding-left: 10px;
  color: #fff;
}
.phone-pc {
  background: #e6140f; /* màu đỏ */
  color: #fff;
  padding: 5px;
  font-size: 16px;
  top: 65px;
  right: 98px;
  position: relative;
  width: 160px;
  text-align: center;
  border-radius: 90px;
  transition: 0.3s;
  opacity: 1;
  visibility: visible;

}
.suntory-alo-phone:hover .phone-pc { background: #608727;}
.show-phone {
  visibility: visible;
  opacity: 1;
  width: 200px;
}

/* VỊ TRÍ NÚT */
#phone{bottom:0;}
#zalo{bottom:70px;}
@media (max-width: 480px){
  #phone,#zalo{
    bottom: 20px;
  }
  #phone{left:0;}
  #zalo{left:70px;}
}
/* CSS MÀU */
:root{
  --phone:rgb(210,19,14);
  --phoneopa:rgb(210,19,14,0.5);
  --zalo:rgb(2,143,227);
  --zaloopa:rgb(2,143,227,0.5);
}
#phone a{background:var(--phone); border: 2px #fff solid;}
#phone svg path{fill:#fff;}
#phone .alo-circle-fill{background-color:var(--phoneopa);}
#phone .alo-circle{border-color:var(--phone);}

#phone:hover a{background: rgb(255,87,34);}
#phone:hover svg path{fill:#fff;}
#phone:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5);}
#phone:hover .alo-circle{border-color:rgb(255,87,34);}

#zalo svg{background:#fff; padding: 1px;}
#zalo svg path{fill:var(--zalo);}
#zalo .alo-circle-fill{background-color:var(--zaloopa);}
#zalo .alo-circle{border-color:var(--zalo);}

#zalo:hover svg{background:#fff;}
#zalo:hover svg path{fill:rgb(255,87,34);}
#zalo:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5);}
#zalo:hover .alo-circle{border-color:rgb(255,87,34);}

/* CSS RIÊNG */
.support-online.type-01 a{
  display: block
}
.support-online.type-02 a{
  display:flex;
  border-radius:100%;
  align-items: center;
  justify-content: center;
}

.support-online.type-01 svg{
  width:40px;
  height:40px;
  border-radius:100%;
}
.support-online.type-02 svg{
  width:25px;
  height:25px;
}
/* CSS CHUNG */
.support-online{
  position:fixed;
  z-index:9;
  left:10px;
}
.support-online a{
  position:relative;
  text-align:left;
  margin:10px;
  width:40px;
  height:40px;
}
.support-online svg{
  text-align:center;
  line-height:1.9;
  position:relative;
  z-index:9;
  animation: 1s ease-in-out 0s normal none infinite running Icon-running;
}
.alo-circle-fill{
  width:60px;
  height:60px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position:absolute;
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -ms-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
  transition:all .2s ease-in-out;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  opacity:.75;
}
.alo-circle{
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position:absolute;
  background-color:transparent;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid rgba(30,30,30,0.4);
  opacity:.5
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



/* ANIMATE */
@-moz-keyframes Grow {
  0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}
  50%{opacity:1;filter:alpha(opacity=100)}
  to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}
}
@keyframes Grow {
  0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}
  50%{opacity:1;filter:alpha(opacity=100)}
  to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}
}


@keyframes Icon-running {
  0% {transform: rotate(0deg) scale(1) skew(1deg);}
  10% {transform: rotate(-25deg) scale(1) skew(1deg);}
  20% {transform: rotate(25deg) scale(1) skew(1deg);}
  30% {transform: rotate(-25deg) scale(1) skew(1deg);}
  40% {transform: rotate(25deg) scale(1) skew(1deg);}
  50% {transform: rotate(0deg) scale(1) skew(1deg);}
  100% {transform: rotate(0deg) scale(1) skew(1deg);}
}
@keyframes zoomIn{
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%,-50%) scale3d(.3,.3,.3);
    -ms-transform: translate(-50%,-50%) scale3d(.3,.3,.3);
    transform: translate(-50%,-50%) scale3d(.3,.3,.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(.9);
    transform: translate(-50%,-50%) scale(.9);
    opacity: .7;
  }
}

/*-----------hieu ung lac qua lac lai------------------*/
@keyframes shake2 {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0);
    -moz-animation: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  25%, 75% {
    -webkit-transform: translate3d(-10px,0,0);
    -moz-animation: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  50% {
    -webkit-transform: translate3d(10px,0,0);
    -moz-animation: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
}

.logo img:hover,  #top-bar .wm-free-text img:hover, .ui.primary.button:hover, .input button.ui.button:hover{  
  animation: 0.8s shake2 ease-in-out;
  -webkit-animation: 0.8s shake2 ease-in-out;
  -moz-animation: 0.8s shake2 ease-in-out;
}

/* HIEU UNG Buzz Out - rung nhẹ */

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg)
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg)
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg)
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg)
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg)
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg)
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg)
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg)
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    -ms-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0)
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    -ms-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0)
  }
}

#hotline-button {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/*-----------hieu ung lac qua lac lai------------------*/
@keyframes shake2 {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0);
    -moz-animation: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  25%, 75% {
    -webkit-transform: translate3d(-10px,0,0);
    -moz-animation: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  50% {
    -webkit-transform: translate3d(10px,0,0);
    -moz-animation: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
}

.wm-module.wm-search:hover .input button.ui.button{  
  animation: 0.7s shake2 ease-in-out;
  -webkit-animation: 0.7s shake2 ease-in-out;
  -moz-animation: 0.7s shake2 ease-in-out;
}

/* load web */
.loadding-screen {
  position: fixed;
  z-index: 10000000000000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .opacity: 0;
  background: #fff;
  text-align: center;
  display: block;
  animation: .3s linear loadding-on;
}
.lds-css.ng-scope{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.loadding-screen img { /* luôn canh giữa trên dưới */
  .position: absolute;
  .top: 50%;
  .left: 50%;
  .transform: translate(-50%, -50%);
}

@keyframes loadding-on{
  0%{opacity:0;}
  100%{opacity:1}
}
@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.lds-double-ring {
  position: relative;
}
.lds-double-ring div {
  box-sizing: border-box;
}
.lds-double-ring > div {
  position: absolute;
  width: 168px;
  height: 168px;
  top: 16px;
  left: 16px;
  border-radius: 50%;
  border: 8px solid #000;
  border-color: #3c8dbc transparent #3c8dbc transparent;
  -webkit-animation: lds-double-ring 1s linear infinite;
  animation: lds-double-ring 1s linear infinite;
}
.lds-double-ring > div:nth-child(2),
.lds-double-ring > div:nth-child(4) {
  width: 148px;
  height: 148px;
  top: 26px;
  left: 26px;
  -webkit-animation: lds-double-ring_reverse 1s linear infinite;
  animation: lds-double-ring_reverse 1s linear infinite;
}
.lds-double-ring > div:nth-child(2) {
  border-color: transparent #1a2226 transparent #1a2226;
}
.lds-double-ring > div:nth-child(3) {
  border-color: transparent;
}
.lds-double-ring > div:nth-child(3) div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lds-double-ring > div:nth-child(3) div:before,
.lds-double-ring > div:nth-child(3) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: -8px;
  left: 72px;
  background: #3c8dbc;
  border-radius: 50%;
  box-shadow: 0 160px 0 0 #3c8dbc;
}
.lds-double-ring > div:nth-child(3) div:after {
  left: -8px;
  top: 72px;
  box-shadow: 160px 0 0 0 #3c8dbc;
}
.lds-double-ring > div:nth-child(4) {
  border-color: transparent;
}
.lds-double-ring > div:nth-child(4) div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lds-double-ring > div:nth-child(4) div:before,
.lds-double-ring > div:nth-child(4) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: -8px;
  left: 62px;
  background: #1a2226;
  border-radius: 50%;
  box-shadow: 0 140px 0 0 #1a2226;
}
.lds-double-ring > div:nth-child(4) div:after {
  left: -8px;
  top: 62px;
  box-shadow: 140px 0 0 0 #1a2226;
}
.lds-double-ring {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

/* VỊ TRÍ NÚT */
#phone{bottom:0;}
#zalo{bottom:70px;}
@media (max-width: 480px){
  #phone,#zalo{
  }
  #phone{left:0;}
  #zalo{left:0px;}
}
/* CSS MÀU */
:root{
  --phone:rgb(210,19,14);
  --phoneopa:rgb(210,19,14,0.5);
  --zalo:rgb(2,143,227);
  --zaloopa:rgb(2,143,227,0.5);
}
#phone a{background:var(--phone); border: 2px #fff solid;}
#phone svg path{fill:#fff;}
#phone .alo-circle-fill{background-color:var(--phoneopa);}
#phone .alo-circle{border-color:var(--phone);}

#phone:hover a{background: rgb(255,87,34);}
#phone:hover svg path{fill:#fff;}
#phone:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5);}
#phone:hover .alo-circle{border-color:rgb(255,87,34);}

#zalo svg{background:#fff; padding: 1px;}
#zalo svg path{fill:var(--zalo);}
#zalo .alo-circle-fill{background-color:var(--zaloopa);}
#zalo .alo-circle{border-color:var(--zalo);}

#zalo:hover svg{background:#fff;}
#zalo:hover svg path{fill:rgb(255,87,34);}
#zalo:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5);}
#zalo:hover .alo-circle{border-color:rgb(255,87,34);}

/* CSS RIÊNG */
.support-online.type-01 a{
  display: block
}
.support-online.type-02 a{
  display:flex;
  border-radius:100%;
  align-items: center;
  justify-content: center;
}

.support-online.type-01 svg{
  width:40px;
  height:40px;
  border-radius:100%;
}
.support-online.type-02 svg{
  width:25px;
  height:25px;
}
/* CSS CHUNG */
.support-online{
  position:fixed;
  z-index:9;
  left:10px;
}
.support-online a{
  position:relative;
  text-align:left;
  margin:10px;
  width:40px;
  height:40px;
}
.support-online svg{
  text-align:center;
  line-height:1.9;
  position:relative;
  z-index:9;
  animation: 1s ease-in-out 0s normal none infinite running Icon-running;
}
.alo-circle-fill{
  width:60px;
  height:60px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position:absolute;
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -ms-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
  transition:all .2s ease-in-out;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  opacity:.75;
}
.alo-circle{
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position:absolute;
  background-color:transparent;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid rgba(30,30,30,0.4);
  opacity:.5
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



/* ANIMATE */
@-moz-keyframes Grow {
  0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}
  50%{opacity:1;filter:alpha(opacity=100)}
  to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}
}
@keyframes Grow {
  0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}
  50%{opacity:1;filter:alpha(opacity=100)}
  to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}
}


@keyframes Icon-running {
  0% {transform: rotate(0deg) scale(1) skew(1deg);}
  10% {transform: rotate(-25deg) scale(1) skew(1deg);}
  20% {transform: rotate(25deg) scale(1) skew(1deg);}
  30% {transform: rotate(-25deg) scale(1) skew(1deg);}
  40% {transform: rotate(25deg) scale(1) skew(1deg);}
  50% {transform: rotate(0deg) scale(1) skew(1deg);}
  100% {transform: rotate(0deg) scale(1) skew(1deg);}
}
@keyframes zoomIn{
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%,-50%) scale3d(.3,.3,.3);
    -ms-transform: translate(-50%,-50%) scale3d(.3,.3,.3);
    transform: translate(-50%,-50%) scale3d(.3,.3,.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(.9);
    transform: translate(-50%,-50%) scale(.9);
    opacity: .7;
  }
}