/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

/* =====================================================================
   TÙY BIẾN GIAO DIỆN THEO MOCKUP (tông VÀNG GOLD - CAM)
   Đè màu mặc định (nâu #BB6903 / xanh bootstrap) -> vàng gold/cam.
   Muốn đổi tông chỉ cần sửa các biến --gold... bên dưới.
   ===================================================================== */
:root {
    --gold: #F5A623;        /* màu chủ đạo: nút, header sidebar, menu active */
    --gold-dark: #E0890C;   /* màu hover/đậm hơn */
    --gold-bright: #FBC02D; /* vàng tươi cho điểm nhấn/gạch chân */
    --price-red: #E60000;   /* màu giá bán */
    --footer-bg: #262626;   /* nền footer tối */
    --footer-text: #c9c9c9; /* chữ footer */
}

/* ---------- 1. Header (hàng logo + tìm kiếm) nền trắng ---------- */
header {
    background: #ffffff !important;
}
.phone_home {
    color: var(--gold-dark) !important;
}

/* ---------- 2. Nút tìm kiếm ---------- */
.btn_seach_home {
    background: var(--gold) !important;
    border: none !important;
    color: #fff !important;
}
.btn_seach_home:hover {
    background: var(--gold-dark) !important;
}

/* ---------- 3. Thanh menu chính ---------- */
.main-menu-box {
    background: #f4f4f4 !important;   /* thanh menu sáng như mockup */
    border-top: 3px solid var(--gold);
    border-radius: 4px;
}
.main-menu li a {
    color: #333333 !important;
}
.main-menu li a:hover,
.main-menu li.active > a,
body.home .main-menu li a.home {
    background: var(--gold) !important;
    color: #ffffff !important;
}
/* menu con */
.main-menu .sub-menu,
.main-menu .sub-menu-2 {
    border-top: 2px solid var(--gold);
}
.main-menu .sub-menu li a {
    color: #333333 !important;
    background: none;
}
.main-menu .sub-menu li a:hover {
    background: var(--gold) !important;
    color: #ffffff !important;
}

/* ---------- 4. Tiêu đề khối nội dung (Sản phẩm nổi bật / bán chạy / tất cả) ---------- */
.block-heading {
    background: #ffffff !important;
    color: #222222 !important;
    padding: 10px 0 !important;
    border-bottom: 2px solid #e7e7e7;
    position: relative;
}
.block-heading:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 130px;
    height: 2px;
    background: var(--gold);
}
/* link "Xem tất cả" nếu khối có cấu hình */
.block-heading a {
    color: var(--gold-dark) !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    float: right;
    line-height: 23px;
}
.block-heading a:hover {
    color: var(--gold) !important;
}

/* ---------- 5. Tiêu đề khối sidebar (Danh mục SP / bán chạy / tin mới / quảng cáo) ---------- */
.block-heading-left {
    background: var(--gold) !important;
    color: #ffffff !important;
}
.block-heading-left:before {
    border-right-color: var(--gold-dark) !important;
}

/* ---------- 6. Nút chính / "Đặt hàng" / "Liên hệ" ---------- */
.btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
    color: #ffffff !important;
}

/* ---------- 7. Giá sản phẩm ---------- */
.product-grid .price .money,
.price .money {
    color: var(--price-red) !important;
    font-weight: 700;
}
.product-grid .price .discounts_money,
.price .discounts_money {
    color: #999999 !important;
    text-decoration: line-through;
    font-weight: 400;
}

/* ---------- 8. Nhãn "Đã bán" (đưa lên góc trái như mockup) ---------- */
.sold-count {
    left: 8px !important;
    right: auto !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border-radius: 3px;
}
.product-grid:hover .sold-count {
    background: var(--gold-dark) !important;
}

/* ---------- 9. Footer tối ---------- */
footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}
footer .container {
    color: var(--footer-text);
}
footer a {
    color: var(--footer-text) !important;
}
footer a:hover {
    color: var(--gold) !important;
}
footer strong {
    color: #ffffff;
}
footer .block-heading-footer {
    color: #ffffff !important;
    border-left: 3px solid var(--gold);
    padding-left: 10px;
    margin-bottom: 12px;
}
/* nút Đăng ký nhận tin trong footer */
footer .btn,
footer .btn-primary,
footer input[type="submit"],
footer button[type="submit"] {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}
footer .btn:hover,
footer input[type="submit"]:hover {
    background: var(--gold-dark) !important;
}

/* ---------- 10. Phân trang ---------- */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > li > a:hover {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}
.pagination > li > a {
    color: var(--gold-dark);
}

/* ---------- 11. Link chung / điểm nhấn ---------- */
a {
    color: #333;
}
a:hover {
    color: var(--gold-dark);
}