/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/*////////////////Trang giay  do */

#masthead .container {
    max-width: 650px !important;
    background-color: #F5F2ED;
    height: 70px;
    margin-top: 5px;
    border-radius: 5px;
}
.transparent #logo img {
    max-height: 50px !important;
}
.nav-size-medium>li>a {
    color: #000000;
    font-weight: 700;
}
.nav-size-medium>li>a:hover {
    color: #c62138;
}

.hero-right-col{
  height: calc(100vh - 30)!important;
  position:relative;
  overflow:hidden;
  background:#d5163a;
}

.hero-right-col .col-inner{
  height:100%;
  background:#d5163a;
  padding:0!important;
}

/* Slider sản phẩm */
.do-vertical-product-slider{
   height:calc(100vh - 104px)!important;
  overflow:hidden;
 background: #F5F2ED;
 border-left: 7px solid #d5173b;
 border-right: 7px solid #d5173b;
}

.do-vertical-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:45px;
  padding:0 22px;
  animation:doVerticalDown 28s linear infinite;
  transform:translateY(-50%);
}

.do-vertical-item{
  width:100%;
  height:calc((100vh - 135px) / 3);
  display:flex;
  align-items:center;
  justify-content:center;
}

.do-vertical-item img{
  max-width:88%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* Nút */
.hero-right-col .button{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:100%!important;
  height:72px!important;
  min-height:72px!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:0!important;
  background:#d5163a!important;
  border:none!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  z-index:30!important;
}

.do-vertical-product-slider{
  height:calc(100vh - 72px)!important;
}
.hero-right-col .button.primary.expand {
    border-radius: 0 !important;
}

/* Animation */
@keyframes doVerticalDown{
  from{
    transform:translateY(-50%);
  }
  to{
    transform:translateY(0);
  }
}
.box-sphot .has-hover:hover img:hover {
    border: 5px solid #C41E3A;
}
.container.section-title-container.tieude-do {
    max-width: 100% !important;
}
.tieude-do .section-title a {
    font-size: 1.1em !important;
    font-weight: 500;
}
.product-small .box, .product-small.box.has-hover.box-normal.box-text-bottom{
    border: 1px solid #ddd;
    border-radius: 5px;
}
span.onsale {
    font-size: 13px !important;
}



/*//////////////////////////////////////////////// end */
/* ===============================
   FLOAT CONTACT BUTTONS
   =============================== */

.contact-float {
  position: fixed;
  bottom: 25px;
  left: 20px;
  display: flex;
  gap: 12px;
  z-index: 9999;
}

/* Button chung */
.contact-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  background: #fff;
}

.contact-btn:hover {
  transform: translateY(-6px) scale(1.05);
}

/* Icon image */
.contact-btn img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* ===============================
   MÀU / STYLE TỪNG NÚT
   =============================== */

.contact-btn.phone {
  background: #22c55e;
}

.contact-btn.zalo {
  background: #0068ff;
}

.contact-btn.messenger {
  background: linear-gradient(45deg, #00c6ff, #ff5edf);
}


/* ===============================
   HIỆU ỨNG THU HÚT (HOTLINE)
   =============================== */

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.contact-btn.phone {
  animation: pulse 2s infinite;
}

/* ===============================
   MOBILE OPTIMIZATION
   =============================== */

@media (max-width: 768px) {

  .contact-float {
    bottom: 18px;
    right: 12px;
    gap: 10px;
    flex-direction: column;
  }

  .contact-btn {
    width: 58px;
    height: 58px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  }

  .contact-btn.phone {
    width: 64px;
    height: 64px;
  }

  .contact-btn img {
    width: 62%;
    height: 62%;
  }

  .contact-btn:active {
    transform: scale(0.92);
  }
}
.price-wrapper span {
    color: #d40000;
}
 .single_add_to_cart_button.button {
    background-color: #ff8600 !important;
}

/* Tranh Giay Do MB */
@media(max-width:767px){

  .hero-right-col{
    height:auto!important;
    background:#ef2b1d!important;
    overflow:hidden!important;
  }

  .hero-right-col .col-inner{
    height:auto!important;
    padding:0!important;
    background:#ef2b1d!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Nút lên trên */
  .hero-right-col .button{
    order:-1!important;
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:76px!important;
    min-height:76px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:0!important;
    border:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:26px!important;
    font-weight:800!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    z-index:10!important;
  }

  /* Khung slider ngang */
  .do-vertical-product-slider{
    width:100%!important;
    height:250px!important;
    overflow:hidden!important;
    border:6px solid #ef2b1d!important;
    border-top:0!important;
    box-sizing:border-box!important;
  }

  /* Track ngang - JS sẽ điều khiển chạy */
  .do-vertical-track{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:36px!important;
    width:max-content!important;
    min-width:max-content!important;
    height:100%!important;
    padding:22px 28px!important;
    animation:none!important;
    transition:none!important;
    will-change:transform!important;
  }

  .do-vertical-item{
    flex:0 0 170px!important;
    width:170px!important;
    max-width:170px!important;
    height:190px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .do-vertical-item img{
    max-width:165px!important;
    max-height:180px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
    display:block!important;
    margin:auto!important;
  }
}
/* MB End */