/* css/components.css: Thành phần: nút báo giá, hộp sidebar, nút CTA gọi/Zalo.
   Tách từ style.css ngày 08/10/2026; thứ tự các file giữ nguyên thứ tự cũ (xem inc/enqueue-styles.php). */
/* Điều chỉnh nút báo giá dự án chiếm full chiều rộng */
.my-product-quote-link {
    display: block;          /* Chiếm full chiều rộng */
    background-color: #e3f2fd; /* Màu xanh da trời rất nhạt */
    color: #1976d2 !important; /* Màu xanh dương đậm */
    border: 1px solid #90caf9; /* Viền màu tương ứng */
    padding: 12px 20px;       /* Khoảng cách trong */
    border-radius: 4px;       /* Bo góc */
    font-weight: bold;
    text-align: center;       /* Căn giữa text */
    text-transform: uppercase;
    text-decoration: none !important;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
}
.my-product-quote-link:hover {
    background-color: #bbdefb; /* Nền xanh da trời đậm hơn một chút khi hover */
}
/* --- COMPONENT: ANH NHAT SIDEBAR BOX --- */
/* 1. Wrapper: Nền trắng, viền mỏng, bo góc hiện đại */
.anhnhat-sidebar-box {
    background-color: #ffffff;
    border: 1px solid #e1e1e1; /* Viền xám rất nhạt, bỏ nét đứt cũ */
    border-radius: 6px;        /* Bo góc tinh tế */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Đổ bóng cực nhẹ để tách khối khỏi nền */
}

/* 2. Tiêu đề: Tách biệt rõ ràng với phần nội dung */
.anhnhat-box-title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--an-text-hover); /* Trùng màu xanh thương hiệu Ánh Nhật */
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0; /* Line phân cách nhẹ nhàng */
}

/* 3. Reset List mặc định của WP/Flatsome */
.anhnhat-sidebar-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4. Layout cho từng dòng (Sử dụng Flexbox để icon và text luôn thẳng hàng) */
.anhnhat-sidebar-box ul li {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-bottom: 12px;
    font-size: 14px;
    color: #444; /* Màu xám đen, dễ đọc hơn đen tuyền (#000) */
    line-height: 1.4;
}

.anhnhat-sidebar-box ul li:last-child {
    margin-bottom: 0; /* Xóa khoảng trống thừa ở dòng cuối */
}

/* 5. Định dạng Icon */
.anhnhat-sidebar-box ul li i {
    color: var(--an-text-hover); 
    font-size: 15px;
    margin-right: 12px;
    width: 20px;      /* Fix cứng width để cột text bên phải luôn thẳng hàng mép */
    text-align: center;
}

/* 6. Tối ưu UX cho số điện thoại: Nổi bật và có hiệu ứng hover */
.anhnhat-hotline-list a {
    color: #d2322d; /* Màu đỏ nổi bật để call-to-action */
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.anhnhat-hotline-list a:hover {
    color: var(--an-text-hover); /* Đổi sang màu logo khi hover */
}
/* 7. Màu sắc cho chữ phía trên danh mục */
.seo-category-header {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-left: 5px solid #1a56a8;
    padding: 20px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
/* ===== Nút CTA (Gọi / Chat Zalo) - Ánh Nhật Telecom ===== */
/* Thay TOÀN BỘ đoạn CSS cũ (nếu đã dán trước đó) bằng bản này.         */
/* Chỉ cần thêm 1 LẦN vào theme (Appearance > Customize > Additional    */
/* CSS). Content Agent chỉ sinh HTML dùng class, không lặp lại CSS.     */
 
.ct-cta-box {
  background: linear-gradient(135deg, #eef4fb 0%, #e3edf9 100%);
  border: 1px solid #d3e0f0;
  border-radius: 14px;
  padding: 30px 24px;
  text-align: center;
  margin: 32px 0;
  box-shadow: 0 6px 20px rgba(22, 50, 92, 0.08);
}
 
.ct-cta-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 22px;
  color: #16325c;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
 
.ct-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
 
.ct-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff !important;
  padding: 13px 30px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
 
.ct-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #ffffff !important;
}
 
.ct-cta-btn-call {
  background: linear-gradient(135deg, #f2814e 0%, #e8622c 100%);
}
 
.ct-cta-btn-zalo {
  background: linear-gradient(135deg, #2b8aff 0%, #0068ff 100%);
}
 
@media (max-width: 480px) {
  .ct-cta-box {
    padding: 24px 18px;
  }
  .ct-cta-btn {
    width: 100%;
  }
}

/* Nút nổi gọi và Zalo (plugin Contact Link Button): trên điện thoại đổi thành thanh cố định dưới đáy màn hình (Gọi ngay | Chat Zalo)
   để không đè lên nội dung, giá và nút Gửi của form; chừa chỗ cuối trang. Từ 737px trở lên giữ nguyên nút tròn của plugin.
   Plugin chỉ có tùy chọn cỡ nút và bên trái/phải, không chỉnh được riêng cho điện thoại. */
@media (max-width: 736px) {
  #button-contact-ntbox {
    display: flex;
    gap: 6px;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
    padding: 6px;
    transform: none !important;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(11, 58, 140, 0.28), 0 0 0 1px rgba(11, 58, 140, 0.08);
  }
  #button-contact-ntbox .button-contact {
    flex: 1 1 0;
    margin: 0;
  }
  #button-contact-ntbox #phone-ntbox {
    order: -1;
  }
  #button-contact-ntbox .button-contact .phone-ntbox {
    width: 100%;
    height: auto;
    left: auto;
    bottom: auto;
  }
  #button-contact-ntbox .phone-ntbox-circle-fill {
    display: none;
  }
  #button-contact-ntbox .phone-ntbox-img-circle {
    position: static;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    animation: none;
  }
  #button-contact-ntbox #phone-ntbox .phone-ntbox-img-circle {
    background: linear-gradient(135deg, #0b3a8c, #1566d6) !important;
  }
  #button-contact-ntbox #zalo-ntbox .phone-ntbox-img-circle {
    background: linear-gradient(135deg, #1566d6, #2fa8f7) !important;
  }
  #button-contact-ntbox .phone-ntbox-img-circle a {
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    line-height: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    text-decoration: none;
  }
  #button-contact-ntbox .phone-ntbox-img-circle img {
    position: static;
    transform: none;
    max-width: 22px;
    max-height: 22px;
  }
  #button-contact-ntbox #phone-ntbox a::after {
    content: "Gọi ngay";
  }
  #button-contact-ntbox #zalo-ntbox a::after {
    content: "Chat Zalo";
  }
  #footer .absolute-footer {
    padding-bottom: 84px;
  }
}