/* 
Theme Name: AN Solar - by RU Media
Theme URI: https://rumedia.vn
Description: AN Solar Child Theme by RU Media
Author: RU Media
Author URI: https://rumedia.vn
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* -------------------- FIX ADMIN BAR -------------------- */
body.admin-bar .my-sticky-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .my-sticky-header {
    top: 46px !important;
  }
}

/* -------------------- SWIPER DOT CUSTOM -------------------- */
.swiper-pagination-bullet-active {
  width: 30px !important;
  border-radius: 10px !important;
}

/* =========================================================
   FOOTER FORM
========================================================= */
.footer-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.footer-form input[type="text"],
.footer-form input[type="email"],
.footer-form input[type="tel"],
.footer-form input[type="number"],
.footer-form select {
  padding: 12px 16px;
  border: 1px solid #fff !important;
  border-radius: 100px;
  font-size: 15px;
  line-height: 1;
  background: #fff;
  box-sizing: border-box;
}
.footer-form select{
  padding: 9px 16px !important;
}
/* HÓA ĐƠN TIỀN ĐIỆN */
.range-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 16px;
  min-width: 0;
}

.range-input {
  flex: 0 0 50%;
  -webkit-appearance: none;
  height: 6px;
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 var(--percent, 50%),
    #ddd var(--percent, 50%),
    #ddd 100%
  );
  border-radius: 5px;
  outline: none;
  transition: background 0.3s;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.range-number-wrapper {
  flex: 0 0 49%;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
}

.range-number {
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 44px 0 12px;
  border: 1px solid #d5d8dc;
  border-radius: 4px;
  font-size: 15px;
  text-align: right;
  line-height: 1;
  background: #fff;
  box-sizing: border-box;
}

.range-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 14px;
  background: #fff;
  padding-left: 2px;
  pointer-events: none;
}

/* TỶ LỆ SỬ DỤNG ĐIỆN BAN NGÀY */
.tyle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tyle-group input[type="range"] {
  flex: 0 0 50%;
  accent-color: #4caf50;
}

.tyle-input-container {
  flex: 0 0 49%;
  position: relative;
  display: inline-block;
  padding-right: 5px;
}

.tyle-input-container input {
  width: 100%;
  padding: 8px 28px 8px 8px;
  text-align: right;
  font-size: 18px;
  border: 1px solid #69727d;
  border-radius: 6px;
  box-sizing: border-box;
}

.tyle-input-container .unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 16px;
  pointer-events: none;
}

/* CUSTOM RANGE + INPUT FIELD (phù hợp Elementor) */
.custom-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-family: inherit;
}

.custom-field-wrapper label {
  font-weight: 500;
  color: var(--e-global-color-text, #222);
  margin-bottom: 0;
  font-size: 14px;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-unit input[type="number"] {
  width: 100%;
  height: 42px;
  padding: 0 45px 0 14px;
  font-size: 15px;
  color: #333;
  border: 1px solid #d5d8dc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.input-with-unit input[type="number"]:focus {
  border-color: #3b82f6;
  outline: none;
}

.input-with-unit .unit {
  position: absolute;
  right: 12px;
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

/* Thanh range nằm dưới input */
.range-wrapper input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .custom-field-wrapper {
    gap: 8px;
  }
}

/* -------------------- Tag List -------------------- */
.tags-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags-list a{
  border: 1px solid #2D6A4F;
  border-radius: 100px;
  padding: 4px 12px;
}
.popup-form form textarea {
  padding-top: 12px;
}

/* -------------------- Mobile CTA -------------------- */
.mb-cta a{
  border: 1px solid #3A3A3A;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  padding: 7px;
}