/* ============= ITXEasy Global Theme ============= */
/* Variables (Bootstrap 5 aware) */
:root {
  --itx-navy: #1E3A8A;
  --itx-green: #4CAF50;
  --itx-blue: #4FC3F7;
  --itx-text: #333333;

  --bs-primary: var(--itx-navy);
  --bs-primary-rgb: 30, 58, 138;
  --bs-success: var(--itx-green);
  --bs-success-rgb: 76, 175, 80;
}

/* Base text */
body { color: var(--itx-text); }
a { color: var(--itx-navy); text-decoration: none; }
a:hover { color: var(--itx-green); }

/* ============= Header / Top bar / Menu ============= */
#top, .topbar { color: var(--itx-text); }
#top a:hover { color: var(--itx-green); }

/* Navbar strip */
#menu,
nav#menu.navbar,
.navbar.bg-primary,
.bg-primary {
  background: var(--itx-navy) !important;
  background-image: none !important;
  border-color: var(--itx-navy) !important;
}

/* Menu links */
#menu .navbar-nav > li > a,
#menu .nav > li > a {
  color: #fff !important;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li.show > a,
#menu .nav > li.active > a {
  color: var(--itx-green) !important;
}

/* Dropdown under menu */
#menu .dropdown-menu { border-top: 3px solid var(--itx-green); }
#menu .dropdown-menu a { color: var(--itx-text); }
#menu .dropdown-menu a:hover { color: var(--itx-green); background: transparent; }

/* Search & Cart buttons on header */
#search .btn, .btn-search {
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
  color: #fff !important;
}
#search .btn:hover { background: var(--itx-green) !important; border-color: var(--itx-green) !important; }

#cart .btn, #cart .btn-dark, #cart .btn-inverse {
  background: var(--itx-green) !important;
  border-color: var(--itx-green) !important;
  color: #fff !important;
}
#cart .btn:hover { background: var(--itx-blue) !important; border-color: var(--itx-blue) !important; }

/* Navbar toggler / offcanvas */
.navbar-toggler, .offcanvas-header .btn-close {
  border-color: rgba(255,255,255,.25);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* Breadcrumb */
.breadcrumb a { color: var(--itx-navy); }
.breadcrumb a:hover { color: var(--itx-green); }

/* ============= Footer ============= */
footer, #footer {
  background: var(--itx-navy) !important;
  color: #fff !important;
}
footer a, #footer a { color: #fff !important; }
footer a:hover, #footer a:hover { color: var(--itx-green) !important; }

/* ============= Buttons ============= */
.btn-primary { background: var(--itx-green) !important; border-color: var(--itx-green) !important; color: #fff !important; }
.btn-primary:hover { background: var(--itx-blue) !important; border-color: var(--itx-blue) !important; }
.btn-outline-primary { color: var(--itx-navy); border-color: var(--itx-navy); }
.btn-outline-primary:hover { color:#fff; background: var(--itx-navy); border-color: var(--itx-navy); }
.btn-success { background: var(--itx-green); border-color: var(--itx-green); }
.btn-success:hover { background: var(--itx-blue); border-color: var(--itx-blue); }

/* ============= Forms / Inputs ============= */
.form-control:focus, .form-select:focus {
  border-color: var(--itx-navy);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--itx-green);
  border-color: var(--itx-green);
}

/* ============= Alerts / Badges / Progress / Toast ============= */
.alert-primary { background: rgba(var(--bs-primary-rgb), .1); border-color: rgba(var(--bs-primary-rgb), .25); color: var(--itx-navy); }
.badge.bg-primary { background: var(--itx-navy) !important; }
.badge.bg-success { background: var(--itx-green) !important; }
.progress-bar.bg-primary { background: var(--itx-navy); }
.toast-header { background: rgba(var(--bs-primary-rgb), .08); color: var(--itx-navy); }

/* ============= Tabs / Pills / Accordion ============= */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #fff !important;
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
}
.nav-tabs .nav-link:hover { border-color: var(--itx-navy); color: var(--itx-navy); }
.accordion-button:not(.collapsed) {
  color: var(--itx-navy);
  background: rgba(var(--bs-primary-rgb), .08);
}

/* ============= Tables ============= */
.table thead th {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--itx-navy);
  border-bottom-color: rgba(var(--bs-primary-rgb), .25);
}
.table a:hover { color: var(--itx-green); }

/* ============= Pagination ============= */
.pagination .page-item.active .page-link {
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
  color: #fff !important;
}
.pagination .page-link:hover { color: var(--itx-green) !important; }

/* ============= Product List / Grid ============= */
.product-thumb .caption h4 a,
.product-grid .product-thumb .caption h4 a {
  color: var(--itx-navy) !important;
}
.product-thumb .caption h4 a:hover { color: var(--itx-green) !important; }

.product-thumb .price,
.product-thumb .price-new { color: var(--itx-navy) !important; }

.product-thumb .button-group .btn,
.product-thumb .btn {
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
  color: #fff !important;
}
.product-thumb .button-group .btn:hover,
.product-thumb .btn:hover {
  background: var(--itx-green) !important;
  border-color: var(--itx-green) !important;
}

/* Rating stars (nếu theme dùng) */
.fa.fa-star, .fa-solid.fa-star { color: var(--itx-green); }

/* ============= Sidebar / List group / Filters ============= */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
  color: #fff !important;
}
.list-group a:hover { color: var(--itx-green); }

/* ============= Modals ============= */
.modal-header {
  border-bottom-color: rgba(var(--bs-primary-rgb), .2);
}
.modal-title { color: var(--itx-navy); }

/* ============= Dropdowns / Tooltips / Popovers ============= */
.dropdown-item.active, .dropdown-item:active {
  background: var(--itx-navy) !important;
}
.tooltip-inner { background-color: var(--itx-navy); }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--itx-navy); }

/* ============= Misc polish ============= */
/* Remove pesky gradients if any left */
[class*="bg-"] { background-image: none !important; }


/* === ITXEasy: Product action buttons === */
.product-thumb .button { 
  border-top: none !important; /* bỏ đường kẻ xám mặc định */
}

.product-thumb .button button {
  background: var(--itx-green) !important;   /* màu chính theo logo */
  border: 1px solid var(--itx-green) !important;
  color: #fff !important;                     /* icon/text trắng */
  width: 33.333% !important;                  /* giữ layout 3 nút */
  line-height: 38px;                          /* như mặc định */
  text-align: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Hover/Focus – dùng navy cho đồng bộ header/menu */
.product-thumb .button button:hover,
.product-thumb .button button:focus,
.product-thumb .button button:focus-visible {
  background: var(--itx-navy) !important;
  border-color: var(--itx-navy) !important;
  color: #fff !important;
  outline: none;
}

/* Ngăn nền xám của theme “đè” lại */
.product-thumb .button button {
  --bs-tertiary-bg: transparent !important;
  --bs-border-color: var(--itx-green) !important;
  --bs-gray-600: #fff !important; /* nếu icon dùng currentColor */
}

/* viền ngăn cách nhẹ giữa các nút (tuỳ thích) */
.product-thumb .button button + button {
  border-left: 1px solid rgba(255,255,255,.25) !important;
}

/* === Thanh Nổi Liên Kết Mạng Xã Hội ITXEasy (Floating Social Bar) === */
#itxeasy-social-fixed-bar {
    position: fixed; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%); 
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
}

#itxeasy-social-fixed-bar a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px; 
    height: 45px; 
    margin-bottom: 2px; 
    color: white; /* Màu icon trắng */
    text-decoration: none;
    font-size: 20px; 
    transition: all 0.3s ease; 
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

/* Các màu cụ thể cho từng mạng xã hội */
#itxeasy-social-fixed-bar a[title="Fan page Facebook"] { background-color: #3b5998; } /* Facebook Blue */
#itxeasy-social-fixed-bar a[title="Tiktok"] { background-color: #000000; } /* TikTok Black */
#itxeasy-social-fixed-bar a[title="Instagram"] { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background-color: #d6249f; /* Instagram Gradient fallback */
}
#itxeasy-social-fixed-bar a[title="Youtube"] { background-color: #ff0000; } /* YouTube Red */
#itxeasy-social-fixed-bar a[title="Linkerdin"] { background-color: #007bb5; } /* LinkedIn Blue */
#itxeasy-social-fixed-bar a[title="Prinestert"] { background-color: #cb2027; } /* Pinterest Red */


/* Hiệu ứng khi rê chuột (hover) - Dùng màu xanh lá cây của ITXEasy */
#itxeasy-social-fixed-bar a:hover {
    background: var(--itx-green); /* #4CAF50 */
    width: 55px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}

/* === Điều chỉnh thanh nổi cho Thiết bị di động (Mobile) === */
@media (max-width: 768px) {
    #itxeasy-social-fixed-bar {
        /* Chuyển thành thanh ngang ở dưới cùng */
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        transform: none;
        flex-direction: row; /* Sắp xếp theo hàng ngang */
        width: 100%;
        height: 50px; /* Chiều cao cố định */
        /* Nền trắng mờ để nổi bật trên nền trang */
        background-color: rgba(255, 255, 255, 0.98); 
        border-top: 1px solid #ccc;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    }
    #itxeasy-social-fixed-bar a {
        flex-grow: 1; /* Chia đều chiều rộng */
        margin: 0;
        background: none !important; /* KHÔNG DÙNG MÀU THƯƠNG HIỆU LÀM NỀN TRÊN MOBILE */
        color: var(--itx-navy); /* Dùng màu Navy của ITXEasy cho Icon */
        border-radius: 0;
        height: 100%; /* Đảm bảo chiều cao đầy đủ của thanh */
        width: auto;
        font-size: 24px; /* Tăng kích thước icon lên một chút */
        box-shadow: none; 
        /* Loại bỏ border-left nếu có */
        border-left: none; 
    }
    
    /* Thiết lập màu ICON theo màu thương hiệu để nổi bật hơn (CHỈ CÓ MÀU ICON) */
    #itxeasy-social-fixed-bar a[title="Fan page Facebook"] { color: #3b5998; }
    #itxeasy-social-fixed-bar a[title="Tiktok"] { color: #000000; }
    #itxeasy-social-fixed-bar a[title="Instagram"] { color: #d6249f; }
    #itxeasy-social-fixed-bar a[title="Youtube"] { color: #ff0000; }
    #itxeasy-social-fixed-bar a[title="Linkerdin"] { color: #007bb5; }
    #itxeasy-social-fixed-bar a[title="Prinestert"] { color: #cb2027; }


    /* Hiệu ứng chạm/rê chuột trên Mobile */
    #itxeasy-social-fixed-bar a:hover {
        background: #f0f0f0 !important; /* Nền xám nhạt */
        width: auto;
        /* Màu ICON chuyển sang GREEN của ITXEasy khi hover */
        color: var(--itx-green) !important; 
    }
}