/* ==========================================================================
   THEME Bienapxung (bienapxung.vn) - site Shop dạng danh mục (không đặt hàng).
   Nền: giao diện Shop mặc định (all.css), file này chỉ ghi đè. Màu chính #00578e: đổi ở khối :root.
   Bố cục trang chủ: cột chính 9/12 + cột bên 3/12 (bên trái trên desktop; dưới nội dung chính trên điện thoại).
   ========================================================================== */
:root {
    --bx-primary: #00578e;
    --bx-primary-dark: #003d6b;
    --bx-primary-bright: #0a76b8;   /* sáng hơn, dùng cho dải chuyển màu */
    --bx-accent: #ffb400;           /* vàng nhấn: viền dưới menu, gạch chân khi rê chuột */
    --bx-primary-light: #e6f0f7;
    --bx-alert: #e53935;
    --bx-text: #333;
    --bx-font: 'Roboto', sans-serif;
    /* biến của CSS Shop mặc định -> nút, nhãn tự theo màu thương hiệu */
    --primary: #00578e;
    --primary-second: #003d6b;
    --white:#fff;
}
body.bx-body, .bx-body input, .bx-body button, .bx-body select, .bx-body textarea { font-family: var(--bx-font); }
body.bx-body { color: var(--bx-text); font-weight: 400; background: #dde4ea; }
/* all.css đặt font-weight:500 cho cả trang => chữ nội dung trông đậm. Chữ thường = 400, chỉ đậm khi người soạn bài chủ động in đậm */
.bx-body .std, .bx-body .content_limit, .bx-body .content-text, .bx-body .short-description,
.bx-body .entry-detail, .bx-body .entry-detail p, .bx-body .content-text p, .bx-body .std p,
.bx-body .content-text li, .bx-body .std li, .bx-body .content-text span, .bx-body .std span { font-weight: 400; }
.bx-body .std b, .bx-body .std strong, .bx-body .content-text b, .bx-body .content-text strong,
.bx-body .short-description b, .bx-body .short-description strong, .bx-body .content_limit b, .bx-body .content_limit strong { font-weight: 700; }

/* ---------- Khung trang dạng hộp: header, menu, nội dung, footer cùng nằm trong container trắng trên nền xám xanh ---------- */
.bx-body .as-mainwrapper { padding: 0 12px; }
.bx-body .as-mainwrapper > .bg-white { max-width: 1170px; margin: 0 auto; background: #fff; box-shadow: 0 0 14px rgba(0,50,90,.18); }
.bx-body .as-mainwrapper > .bg-white .container { width: auto; max-width: none; }
.bx-body a { color: var(--bx-primary); }
.bx-body a:hover { color: var(--bx-primary-dark); }
.btn-primary, .btn-success { background-color: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }
.btn-primary:hover, .btn-success:hover { background-color: var(--bx-primary-dark); border-color: var(--bx-primary-dark); color: #fff; }
/* nút dạng liên kết: thắng luật ".bx-body a" để chữ không trùng màu nền */
.bx-body a.btn-primary, .bx-body a.btn-success, .bx-body a.ec-catalog-contact, .bx-body a.btn-primary:hover, .bx-body a.btn-success:hover, .bx-body a.ec-catalog-contact:hover { color: #fff; }

/* ---------- Header: ảnh banner + thanh menu xanh ---------- */
.bx-top { padding:0; text-align: center; }
.bx-logo { display: block; }
.bx-logo img { display: block; width: 100%; max-width: 1170px; height: auto; margin: 0 auto; }
.bx-logo__text { font-weight: 700; font-size: 28px; color: var(--bx-primary); }
/* Thanh menu: dải chuyển màu sáng -> đậm, vệt sáng mảnh phía trên, viền vàng phía dưới cho nổi bật */
.bx-nav {
    margin: 0;
    background: linear-gradient(180deg, var(--bx-primary-bright) 0%, var(--bx-primary) 48%, var(--bx-primary-dark) 100%);
    border-top: 1px solid rgba(255,255,255,.35);
    border-bottom: 3px solid var(--bx-accent);
    box-shadow: 0 3px 8px rgba(0,60,100,.25);
}
.bx-nav__in { display: flex; align-items: center; gap: 12px; }
.bx-menu { display: flex; flex-wrap: wrap; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.bx-menu > li { position: relative; }
.bx-menu > li + li { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.bx-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 44px; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.bx-menu > li > a { text-shadow: 0 1px 1px rgba(0,0,0,.25); transition: background .2s; }
.bx-menu > li > a:hover, .bx-menu > li:hover > a { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.18)); color: #fff; box-shadow: inset 0 -3px 0 var(--bx-accent); }
.bx-menu > li.bx-home > a { padding: 0 16px; font-size: 18px; }
.bx-menu .bx-sub { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border-top: 3px solid var(--bx-accent); box-shadow: 0 8px 20px rgba(0,0,0,.15); z-index: 50; }
.bx-menu li:hover > .bx-sub { display: block; }
.bx-menu .bx-sub li { position: relative; }
.bx-menu .bx-sub a { display: flex; gap: 6px; padding: 9px 16px; color: #333; font-size: 14px; text-decoration: none; }
.bx-menu .bx-sub a:hover { background: var(--bx-primary-light); color: var(--bx-primary); }
.bx-menu .bx-sub .bx-sub { left: 100%; top: 0; border-top: 0; }
.bx-search { flex: 0 0 240px; display: flex; background: #fff; border-radius: 3px; overflow: hidden; }
.bx-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 10px; height: 32px; font-size: 14px; }
.bx-search button { border: 0; width: 38px; background: var(--bx-accent); color: #1b1b1b; cursor: pointer; }
.bx-burger { display: none; align-items: center; gap: 8px; height: 44px; color: #fff; font-weight: 700; cursor: pointer; }
.bx-burger i { font-size: 20px; }

/* ---------- Trang chủ: 9/12 chính + 3/12 bên ---------- */
.bx-wrap { margin-top: 16px; margin-bottom: 20px; }
.bx-title, .bx-widget__title, .bx-banner__title {
    margin: 0 0 12px; padding: 9px 12px; background: var(--bx-primary); color: #fff;
    font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1.3; border-radius: 3px 3px 0 0;
}
.bx-widget__title a { color: #fff; text-decoration: none; }
.bx-widget, .bx-banner--sidebar_right { margin-bottom: 18px; }
.bx-banner--sidebar_right .bx-banner__item { margin-bottom: 10px; overflow: hidden; }
.bx-banner--sidebar_right img { display: block; max-width: 100%; height: auto; }
.bx-widget__title { margin-bottom: 0; }
.bx-cats, .bx-newlist, .bx-newslist { margin: 0; padding: 0; list-style: none; border: 1px solid #e3e3e3; border-top: 0; }
.bx-cats li a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.bx-cats li a:hover { background: var(--bx-primary-light); color: var(--bx-primary); }
.bx-cats li a em { font-style: normal; color: #888; font-size: 12px; }
.bx-cats ul { margin: 0; padding: 0; list-style: none; background: #fafafa; }
.bx-cats ul a { padding-left: 26px; font-size: 13px; }
.bx-newlist li, .bx-newslist li { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eee; }
.bx-newlist__thumb, .bx-newslist__thumb { flex: 0 0 auto; display: block; background: #f3f3f3; overflow: hidden; }
.bx-newlist__thumb { width: 60px; height: 60px; }
.bx-newslist__thumb { width: 70px; height: 52px; }
.bx-newlist__thumb img, .bx-newslist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-newlist__name, .bx-newslist__title { display: block; color: #333; font-size: 13px; line-height: 1.35; text-decoration: none; }
.bx-newlist__name:hover, .bx-newslist__title:hover { color: var(--bx-primary); }
.bx-grid { margin-top: 12px; }

/* ---------- Thẻ sản phẩm dạng danh mục ---------- */
.price-contact { color: var(--bx-alert); font-weight: 700; font-size: 15px; }
.product-detail-btn {
    display: inline-block; margin-top: 8px; padding: 6px 18px; background: var(--bx-primary); color: #fff !important;
    border-radius: 3px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s;
}
.product-detail-btn:hover { background: var(--bx-primary-dark); }
.ec-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0; }
.ec-pagination a, .ec-pagination span { min-width: 34px; padding: 6px 10px; text-align: center; border: 1px solid #ddd; border-radius: 3px; color: #333; text-decoration: none; }
.ec-pagination a:hover, .ec-pagination a.active { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }

/* ---------- Chi tiết sản phẩm (không đặt hàng) ---------- */
.ec-catalog-info .price-contact { font-size: 22px; }
.ec-catalog-contact { margin-top: 14px; padding: 10px 28px; font-weight: 700; text-transform: uppercase; }

/* ---------- Footer xanh ---------- */
footer { background: var(--bx-primary); color: #fff; margin-top: 0; }
footer a, footer h3, footer h4, footer .footer-title { color: #fff; }
footer a:hover { color: #cfe3f8; }
footer .footer-coppyright { background: var(--bx-primary-dark); color: #fff;padding:8px 0; }
footer .social-links-inline a { background: var(--bx-primary-dark); border: 2px solid #fff; }
footer .social-links-inline a i { color: #fff; }
footer .social-links-inline a:hover { background: #fff; }
footer .social-links-inline a:hover i { color: var(--bx-primary); }

/* ---------- Điện thoại: nội dung chính (9/12) lên đầu, cột bên xuống dưới ---------- */
@media (max-width: 991.98px) {
    .bx-menu > li > a { padding: 0 10px; font-size: 13px; }
    .bx-search { flex-basis: 180px; }
}
@media (max-width: 767.98px) {
    .bx-menu { display: none; }                /* menu chính dùng menu trượt (#mobile-menu) */
    .bx-burger { display: flex; }
    .bx-search { flex: 1 1 auto; }
    .bx-nav__in { padding-top: 6px; padding-bottom: 6px; }
    .bx-side { margin-top: 20px; }
    .bx-grid > div { padding-left: 6px; padding-right: 6px; }
}
.totop i, .share__button i {
    color: var(--white)
}
.footer-coppyright a{font-weight:bold; color:var(--white)}