/*
Theme Name: Flatsome Child
Theme URI: http://flatsome.uxthemes.com
Template: flatsome
Author: UX-Themes
Author URI: https://uxthemes.com
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.18.4.1758112263
Updated: 2025-09-17 12:31:03

*/
:root {
  --main-bg-gradient-color: linear-gradient(30deg,
      #007CC4 0%,
      /* xanh dương chủ đạo */
      #00B4D8 37%,
      /* xanh ngọc tươi sáng */
      #5e929b 100%
      /* xanh pastel nhẹ nhàng */


    );

  --background-section: rgb(248, 248, 248);

  --primary-color: #007CC4;
  /* màu xanh dương chủ đạo */
  --white-color: #FFFFFF;
  /* màu trắng */
  --light-blue-color: #00B4D8;
  /* màu xanh ngọc tươi sáng */
  --pastel-blue-color: #5e929b;
  /* màu xanh pastel nhẹ nhàng */
  --dark-color: #000000;
  /* màu xám đậm */
  --gray-color: #777777;
  /* màu xám */
  --light-gray-color: #f5f5f5;
  /* màu xám nhạt */
  --border-color: #e0e0e0;
  /* màu viền */
}

#top-bar {
  background: var(--main-bg-gradient-color);
}

.button {
  background-image: linear-gradient(to right, #00B4D8 0%, #007cc4 51%, #00B4D8 100%) !important;
}

.button {
  /* margin: 10px; */
  /* padding: 15px 45px; */
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;

}

.button:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

/* header */
#header .header-nav .menu-item a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--dark-color);
}

#header .header-nav .menu-item:hover a {
  color: var(--primary-color);
}

#header .header-nav .menu-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#header .header-nav .menu-item a:hover::after {
  transform: scaleX(1);
  /* chạy từ trái sang phải */
  transform-origin: left;
}

#header .header-nav .menu-item:not(:hover)::after {
  transform: scaleX(0);
  /* rút lại */
  transform-origin: right;
  /* rút từ trái sang phải */
}

#header input {
  box-shadow: none;;
}

/* footer */
#footer {
  background: var(--background-section);
  border-top: 1px solid var(--border-color);
}

#footer .title-col-footer {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 0;
}
/* end footer */

.slogan {
  font-size: 32px;
}


.sec_gradient {
  background: var(--main-bg-gradient-color);
}

.onsale {
  padding: 10px;

}

.on-sale {
  background-image: linear-gradient(to right, #00B4D8 0%, #007cc4 51%, #00B4D8 100%) !important;

}

.badge-container {
  margin: 15px 0 0;
}

/* home */

.sec-ung-dung .img-box-home {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.sec-ung-dung .img-box-home .box-text {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.sec-ung-dung .img-box-home img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.sec-about-home {
  background: var(--background-section);
  background-image: url('/wp-content/uploads/2025/09/img-background-section.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.sec-about-home p {
  margin: 0;
}

.sec-about-home img {
  border-radius: 8px;
}

.sec-about-home .row-icon-box {
  margin: 5px 0px !important;
}

.sec-about-home .sec-about-home-icon-box {
  background-color: var(--white-color);
  padding: 20px;
  border-radius: 8px;
}

.sec-about-home .row-icon-box {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.sec-about-home .title-icon {
  color: var(--primary-color);
  font-size: 26px;
  font-weight: 800;
  margin-right: 5px;
}

.sec-about-us-form .col_form {
  background: var(--main-bg-gradient-color);
  padding-top: 15px;
  border-radius: 8px;
}

.sec-about-us-form .col_form .wpcf7-submit {
  background: var(--white-color);
  color: var(--primary-color);
}

.sec-about-us-form .col_form label {
  color: var(--white-color);
}

/* catalouge page */
.sec-banner-catalouge .col{
  padding-bottom: 0 ;
}

.sec-catalouge .df-3dcanvas{
  /* background: var(--main-bg-gradient-color) !important; */
  border-radius: 8px;
}