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

/*************** ADD CUSTOM CSS HERE.   ***************/
.absolute-footer, .widget-title, .widget .is-divider {display: none;}

.slide-shadow .ux-logo img{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.img-radius .img-inner{
  border-radius: 56px;
}
/**********************************/
.scrolling-text-container {
  background-color: #DDBB66;
  padding: 10px 0;
  white-space: nowrap; /* Ngăn các thẻ span xuống dòng */
  overflow: hidden; /* Ẩn phần văn bản tràn ra ngoài */
}

.scrolling-text {
  display: inline-flex; /* Giữ các phần tử trong một dòng */
  animation: scroll-left 15s linear infinite;
}

.scrolling-text span {
  /* Tùy chỉnh kiểu dáng cho từng đoạn text */
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 0 10px; /* Thêm khoảng cách giữa các đoạn text */
}

/* Định nghĩa hoạt ảnh chạy từ phải sang trái */
@keyframes scroll-left {
  0% {
    transform: translateX(0%); /* Bắt đầu từ vị trí ban đầu */
  }
  100% {
    transform: translateX(-50%); /* Kết thúc ở giữa, giúp tạo hiệu ứng lặp vô hạn mượt mà */
  }
}

/* Dừng animation khi di chuột vào */
.scrolling-text-container:hover .scrolling-text {
  animation-play-state: paused;
}

/*********************/
.fancy {
  width: 180px;
 background-color: transparent;
 border: 2px solid #000;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
}

.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background: black;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 5em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: black;
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: white;
 background: black;
}

.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.fancy:hover .text {
 color: white;
 padding-left: 3.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}

/*********************form*************/
/* Container chính cho form tìm kiếm */
input[type=search]{
  border-radius: 99px 0 0 99px;
  border: none;
}

.button.secondary:not(.is-outline){
  background-color: red;
    border-radius: 0 99px 99px 0;
}
.searchform .flex-row {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #c2c2c2; /* Màu viền xám đậm hơn */
    border-radius: 9999px; /* Tạo bo tròn hoàn hảo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Hiệu ứng bóng nhẹ nhàng hơn */
}
/* Ẩn tiêu đề và nút submit mặc định */
.widget-title,
.searchform .flex-col:last-child {
    display: none;
}

/* Đặt lại kiểu cho ô input */
.search-field {
    flex-grow: 1;
    border: none;
    background-color: transparent;
    outline: none;
    font-size: 16px;
    padding: 0 5px; /* Giảm padding ngang để text sát hơn */
    color: #333;
}

/* Đổi màu placeholder */
.search-field::placeholder {
    color: #888;
}

/* Thêm icon micro vào bên phải bằng cách sử dụng pseudo-element */
.searchform .flex-row::after {
    content: '\e012';
     font-family: fl-icons;
    font-weight: 900;
    color: #888;
    font-size: 15px;
    cursor: pointer;
    padding: 5px;
}
/***********/
.shop-container .product .col-inner{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 15px;
}
.shop-container .product .col-inner .box-image{
  border-radius: 15px 15px 0 0;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}