/* ================================================================
   TATEKSAFE — custom_b2b.css
   Override B2B Industrial — ghi đè đúng selectors site thực tế
   Thêm vào CUỐI file: themes/style2025/css/custom.css
   Hoặc load riêng qua header_extended.tpl / config.php
   ================================================================ */

/* ── CSS Variables (ghi đè màu gốc) ── */
:root {
    --brand:          #E6AF2E;
    --brand-dk:       #C9961A;
    --brand-light:    #F5C842;
    --brand-glow:     rgba(230,175,46,.15);
    --brand-border:   rgba(230,175,46,.35);
    --dark:           #0D1117;
    --dark2:          #161B22;
    --dark3:          #1C2128;
    --dark4:          #21262D;
    --dborder:        #30363D;
    --dtext:          #E6EDF3;
    --dmuted:         #8B949E;
    --dmuted2:        #6B7785;
    --page-bg:        #F4F5F7;
    --surface:        #FFFFFF;
    --line:           #E8E9EC;
    /* Ghi đè biến cũ của theme */
    --xiaomi-orange:       #E6AF2E;
    --xiaomi-light-orange: #F5C842;
    --TATEKSAFE-orange:    #E6AF2E;
}

/* ================================================================
   TOPBAR — dải đen phía trên
================================================================ */
.ttk-topbar,
.top-header {
    background: var(--dark) !important;
    border-bottom: 1px solid var(--dark4) !important;
    padding: 6px 0 !important;
    text-align: left !important;
}

.top-header .container,
.ttk-topbar .container { max-width: 1200px }

.top-header a { color: var(--dmuted) !important; font-size: 11.5px; transition: color .15s }
.top-header a:hover { color: var(--brand) !important }

/* Ẩn logo image cũ trong top-header (giờ dùng logo trong main-header) */
.top-header img { display: none !important }
.top-header p.site-slogan { display: none !important }

/* ================================================================
   MAIN HEADER
================================================================ */
.main-header {
    background: var(--dark2) !important;
    color: var(--dtext) !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--dark4) !important;
    box-shadow: none !important;
}

/* Logo image trong header */
.main-header .banner img,
.main-header .logo img {
    filter: brightness(0) invert(1) !important;
    height: 42px !important;
    width: auto !important;
}

/* Hotline */
.main-header .boxhead small {
    color: var(--dmuted) !important;
    font-size: 10px !important; text-transform: uppercase; letter-spacing: .04em;
}
.main-header .boxhead strong,
.main-header .boxhead a {
    color: var(--brand) !important;
    font-size: 14.5px !important; font-weight: 700 !important;
}
.main-header .boxhead a:hover { color: var(--brand-light) !important }

/* Store box */
.main-header .boxhead.store strong,
.main-header .boxhead.store a { color: var(--dtext) !important; font-size: 13px !important }

/* Search */
.main-header .search-box { position: relative }
.search-bar,
.main-header input[type="text"] {
    background: var(--dark) !important;
    border: 1px solid var(--dborder) !important;
    border-radius: 6px !important;
    color: var(--dtext) !important;
    padding: 9px 14px 9px 36px !important;
    font-size: 13px !important;
    transition: border-color .15s !important;
}
.search-bar:focus,
.main-header input[type="text"]:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
    outline: none !important;
}
.search-bar::placeholder { color: #484F58 !important }

/* Cart button */
.main-header .position-relative a,
.main-header a[href*="cart"] {
    color: var(--brand) !important;
    transition: color .15s;
}

/* Nút CTA "Yêu cầu báo giá" */
.ttk-btn-quote,
.main-header a[href*="contact"].btn-quote {
    background: var(--brand) !important;
    color: var(--dark) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 18px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    transition: background .15s !important;
}
.ttk-btn-quote:hover { background: var(--brand-dk) !important }

/* Mobile toggle */
.toggleMenu { color: var(--dtext) !important }

/* ================================================================
   NAVIGATION — mega menu nav bar
================================================================ */
.main-header nav,
.card.rounded-0,
.card-body#mega-menu {
    background: var(--dark3) !important;
    border: none !important;
    border-bottom: 2px solid var(--brand) !important;
}

/* Nav items */
.nav-item-xiaomi > a {
    color: var(--dtext) !important;
    font-size: 13px !important; font-weight: 600 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 0 14px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color .15s, border-color .15s, background .15s !important;
}
.nav-item-xiaomi:hover > a,
.nav-item-xiaomi > a.active {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
    background: rgba(255,255,255,.04) !important;
}
.nav-item-xiaomi .fa-chevron-right { font-size: 9px !important; color: var(--dmuted2) !important }

/* Mega dropdown */
.nav-item-xiaomi .mega-menu {
    background: var(--dark2) !important;
    border: 1px solid var(--dborder) !important;
    border-top: 2px solid var(--brand) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
    padding: 20px !important;
}

.mega-menu-column { flex: 0 0 23% !important; margin-right: 2.67% !important }
.mega-menu-column:last-child { margin-right: 0 !important }

h6.mega-menu-title {
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .09em !important;
    color: var(--brand) !important;
    margin-bottom: 10px !important; padding-bottom: 8px !important;
    border-bottom: 1px solid var(--dark4) !important;
}

.mega-menu-list li a {
    color: var(--dmuted) !important;
    font-size: 12.5px !important;
    padding: 5px 4px !important;
    border-radius: 4px !important;
    transition: color .12s, background .12s !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
}
.mega-menu-list li a::before {
    content: '' !important;
    width: 3px; height: 3px;
    border-radius: 50%; background: var(--dborder);
    flex-shrink: 0; display: inline-block;
    transition: background .12s;
}
.mega-menu-list li a:hover {
    color: var(--brand) !important;
    background: rgba(230,175,46,.07) !important;
}
.mega-menu-list li a:hover::before { background: var(--brand) !important }

/* ================================================================
   BREADCRUMB
================================================================ */
section.bread-crumb {
    background: #F8F9FB !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 9px 0 !important;
    margin-bottom: 0 !important;
}

section.bread-crumb .breadcrumb {
    background: none !important;
    margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important;
    gap: 4px !important; flex-wrap: wrap !important;
}

section.bread-crumb .breadcrumb li {
    display: inline-flex !important; align-items: center !important;
    font-size: 12.5px !important; gap: 4px !important;
}
section.bread-crumb .breadcrumb li::after {
    content: '›' !important;
    color: var(--line) !important; font-size: 14px !important;
    margin-left: 4px !important;
}
section.bread-crumb .breadcrumb li:last-child::after { display: none !important }

section.bread-crumb .breadcrumb a { color: var(--dmuted) !important; transition: color .12s }
section.bread-crumb .breadcrumb a:hover { color: var(--brand-dk) !important }
section.bread-crumb .breadcrumb li:last-child,
section.bread-crumb .breadcrumb li:last-child span { color: var(--brand-dk) !important; font-weight: 600 !important }

/* SVG chevron cũ — ẩn, thay bằng CSS ›  */
section.bread-crumb .mr_lr { display: none !important }

/* ================================================================
   PRODUCT DETAIL PAGE
================================================================ */

/* Gallery */
.gallery-top {
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.gallery-top .swiper-slide {
    background: #fff !important;
    border-radius: 0 !important;
}

.gallery-thumbs { background: #fff !important; border-top: 1px solid var(--line) !important; }

.gallery-thumbs .swiper-slide {
    border: 2px solid var(--line) !important;
    border-radius: 4px !important; transition: border-color .15s !important;
}
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active,
.gallery-thumbs .swiper-slide:hover {
    border-color: var(--brand) !important;
}

/* Product title */
.title-product {
    font-size: 22px !important; font-weight: 700 !important;
    color: #1A1D23 !important; line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

/* Price box */
.layout-product .details-pro .price-box .special-price {
    font-size: 28px !important; font-weight: 700 !important;
    color: var(--brand-dk) !important;
}

.layout-product .details-pro .price-box .old-price {
    color: #9e9e9e !important; font-size: 15px !important;
    text-decoration: line-through !important; margin-left: 8px !important;
}

.layout-product .details-pro .price-box .save-price { color: #e53935 !important; font-size: 13px !important }
.layout-product .details-pro .price-box .save-price .product-price-save { color: #e53935 !important }

/* "Liên hệ" price */
.details-pro .sale-price { font-size: 22px !important; font-weight: 700 !important; color: var(--brand-dk) !important }

/* Quantity input */
.input_number_product {
    display: flex !important; align-items: center !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important; overflow: hidden;
    width: fit-content !important;
}

.input_number_product .btn_num {
    width: 36px !important; height: 36px !important;
    background: #F4F5F7 !important; border: none !important;
    color: #444 !important; font-size: 16px !important;
    cursor: pointer !important; transition: all .15s !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.input_number_product .btn_num:hover { background: var(--brand) !important; color: var(--dark) !important }

.input_number_product .prd_quantity {
    width: 52px !important; height: 36px !important;
    border: none !important; border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    text-align: center !important; font-size: 14px !important;
    font-weight: 600 !important; color: #1A1D23 !important;
    background: #fff !important;
}

/* ── NÚT MUA NGAY — thay gradient đỏ bằng dark+gold ── */
.layout-product .button_actions .single_add_to_cart_button {
    background: var(--dark) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 14px 20px !important;
    font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: .03em !important;
    transition: background .15s, transform .1s !important;
    cursor: pointer !important;
}
.layout-product .button_actions .single_add_to_cart_button:hover {
    background: var(--brand) !important;
    color: var(--dark) !important;
    transform: translateY(-1px) !important;
}
.layout-product .button_actions .single_add_to_cart_button strong { font-size: 14px !important }
.layout-product .button_actions .single_add_to_cart_button span {
    font-size: 11px !important; opacity: .8 !important; display: block !important;
}

/* ── NÚT THÊM VÀO GIỎ ── */
.layout-product .button_actions .btn_add_cart,
.layout-product .button_actions .add_to_cart,
.layout-product .button_actions .btn-cart {
    background: var(--brand-glow) !important;
    border: 1.5px solid var(--brand-border) !important;
    border-radius: 8px !important;
    color: var(--brand-dk) !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    transition: all .15s !important;
}
.layout-product .button_actions .btn_add_cart:hover,
.layout-product .button_actions .add_to_cart:hover {
    background: var(--brand) !important;
    color: var(--dark) !important;
    border-color: var(--brand) !important;
}

.layout-product .button_actions .add_to_cart .text { background: transparent !important }
.layout-product .button_actions .add_to_cart .icon svg path { fill: var(--brand-dk) !important }

/* ── ZALO / CALL BUTTONS ── */
.zalo-chat-button {
    border: 1.5px solid #0573ff !important;
    background: #f0f6ff !important;
    border-radius: 8px !important;
    color: #0573ff !important;
    font-weight: 600 !important;
    transition: all .15s !important;
}
.zalo-chat-button:hover { background: #0573ff !important; color: #fff !important }

.call-button {
    border: 1.5px solid var(--brand) !important;
    background: var(--brand-glow) !important;
    border-radius: 8px !important;
    color: var(--brand-dk) !important;
    font-weight: 600 !important;
    transition: all .15s !important;
}
.call-button:hover { background: var(--brand) !important; color: var(--dark) !important }

/* ── SLOGAN TEXT ── */
p.slogan {
    background: #FFF8EC !important;
    border-left: 3px solid var(--brand) !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important; color: #555 !important;
    margin: 12px 0 !important;
}
p.slogan strong { color: var(--brand-dk) !important }

/* ── PHIÊN BẢN KHÁC (otherversion) ── */
.otherversion-card {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color .15s !important;
}
.otherversion-card:hover { border-color: var(--brand) !important; box-shadow: 0 2px 10px var(--brand-glow) !important }
.otherversion-card.selected { border: 2px solid var(--brand) !important }
.otherversion-card .card-price { color: var(--brand-dk) !important }
.otherversion-card .selection-indicator {
    background: var(--brand) !important;
    color: var(--dark) !important;
    font-weight: 700 !important;
    border-radius: 0 8px 0 8px !important;
}

/* ── THÔNG SỐ KỸ THUẬT ── */
.thong-so {
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.thong-so .title {
    background: var(--dark2) !important;
    color: var(--dtext) !important;
    padding: 12px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .04em !important;
    border-radius: 0 !important;
}
.thong-so .title i { color: var(--brand) !important; padding-right: 8px !important }
.thong-so .title b { color: var(--brand) !important }

.thong-so .content li { padding: 9px 14px !important; border-bottom: 1px solid #f5f5f5 !important }
.thong-so .content li:nth-child(2n) { background: #FAFAFA !important }
.thong-so .content li:last-child { border-bottom: none !important }
.thong-so .content li > strong,
.thong-so .content li span:first-child { color: #555 !important; font-weight: 600 !important; min-width: 50% !important; width: 50% !important }
.thong-so .content > p > span:first-child { color: #555 !important }

/* ── BLOCK SECTIONS (thông tin sản phẩm, review, video) ── */
.block-default {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

.block-default .block-heading {
    background: var(--dark2) !important;
    color: var(--dtext) !important;
    padding: 12px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid var(--dborder) !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
.block-default .block-heading i { color: var(--brand) !important; font-size: 14px !important }
.block-default .block-heading span { text-transform: uppercase !important; letter-spacing: .06em !important }

.block-default .block-content { padding: 16px !important }

/* "Xem thêm" button */
.btn--view-more a {
    color: var(--brand-dk) !important;
    font-weight: 600 !important; font-size: 13px !important;
    border: 1px solid var(--brand-border) !important;
    padding: 6px 16px !important; border-radius: 5px !important;
    transition: all .15s !important;
}
.btn--view-more a:hover { background: var(--brand) !important; color: var(--dark) !important; border-color: var(--brand) !important }

/* ── KHUYẾN MÃI block ── */
.khuyen-mai {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 12px !important;
}
.khuyen-mai .title {
    background: var(--brand-glow) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    color: var(--brand-dk) !important;
}
.khuyen-mai .content ul li::marker { color: var(--brand-dk) }

/* ── SẢN PHẨM LIÊN QUAN ── */
.productRelate.product-lq {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 16px !important;
}

.productRelate .title-index a {
    font-size: 16px !important; font-weight: 700 !important;
    color: #1A1D23 !important; text-transform: uppercase !important;
}
.productRelate .title-index a b { color: var(--brand-dk) !important }

/* Product card trong related */
.product-card {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.product-card:hover { border-color: var(--brand-dk) !important; box-shadow: 0 4px 16px rgba(180,130,10,.1) !important }

.product-card .product-title a { color: #1A1D23 !important; font-size: 13px !important; font-weight: 600 !important }
.product-card .product-title a:hover { color: var(--brand-dk) !important }

.product-card .sale-price { color: var(--brand-dk) !important; font-weight: 700 !important }
.product-card .original-price { color: #9e9e9e !important; text-decoration: line-through !important; font-size: 12px !important }

.product-card .discount-badge {
    background: #FFF3CD !important; color: #856404 !important;
    border: 1px solid #FFC107 !important;
    font-size: 10px !important; font-weight: 700 !important;
    padding: 2px 6px !important; border-radius: 3px !important;
}

.product-card .shiping-badge {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    padding: 3px 10px !important;
    border-top: 1px solid #C8E6C9 !important;
}
.product-card .shiping-badge.last { border-top: none !important; background: #FFF8E1 !important; color: #F57F17 !important; border-top: 1px solid #FFE082 !important }

.badge-bestseller,
.badge-hot-item {
    background: #FFF3CD !important; color: #856404 !important;
    border: 1px solid #FFC107 !important;
    font-size: 9.5px !important; font-weight: 700 !important;
    padding: 2px 7px !important; border-radius: 3px !important;
    text-transform: uppercase !important;
}
.badge-new, .badge-new-item {
    background: #E3F2FD !important; color: #1565C0 !important;
    border: 1px solid #90CAF9 !important;
    font-size: 9.5px !important; font-weight: 700 !important;
    padding: 2px 7px !important; border-radius: 3px !important;
}

/* ================================================================
   CONTACT BAR STICKY
================================================================ */
.contact-bar {
    background: var(--dark) !important;
    border-top: 2px solid var(--brand) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.45) !important;
}

.contact-bar-container { max-width: 1200px !important; margin: 0 auto !important }

.contact-bar .timework {
    color: var(--dmuted) !important;
    font-size: 11.5px !important;
    border-right: 1px solid var(--dark4) !important;
    padding: 0 14px !important;
    height: 100% !important; display: flex !important; align-items: center !important; gap: 5px !important;
}
.contact-bar .timework i { color: var(--brand) !important }

.contact-bar .hotline {
    color: var(--dtext) !important;
    font-size: 12px !important; font-weight: 600 !important;
    padding: 0 14px !important; height: 48px !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
    border-right: 1px solid var(--dark4) !important;
    text-decoration: none !important; white-space: nowrap !important;
    transition: color .15s, background .15s !important;
}
.contact-bar .hotline:hover { color: var(--brand) !important; background: rgba(255,255,255,.04) !important }
.contact-bar .hotline.last { color: var(--brand) !important }
.contact-bar .hotline img { height: 18px !important; filter: none !important }

.contact-bar .zalo,
.contact-bar .facebook {
    color: var(--dtext) !important;
    font-size: 12px !important; font-weight: 600 !important;
    padding: 0 14px !important; height: 48px !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
    border-right: 1px solid var(--dark4) !important;
    text-decoration: none !important; white-space: nowrap !important;
    transition: color .15s, background .15s !important;
}
.contact-bar .zalo:hover,
.contact-bar .facebook:hover { color: var(--brand) !important; background: rgba(255,255,255,.04) !important }
.contact-bar .zalo img,
.contact-bar .facebook img { height: 18px !important }

.contact-bar .cart {
    margin-left: auto !important;
    background: var(--brand) !important;
    color: var(--dark) !important;
    font-weight: 700 !important; font-size: 12.5px !important;
    padding: 0 20px !important; height: 48px !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
    text-decoration: none !important;
    transition: background .15s !important;
}
.contact-bar .cart:hover { background: var(--brand-dk) !important }

/* ================================================================
   FOOTER
================================================================ */
footer.footer-content {
    background: var(--dark2) !important;
    border-top: 1px solid var(--dark4) !important;
    color: var(--dmuted) !important;
}

footer.footer-content a {
    color: var(--dmuted) !important; font-size: 13px !important; transition: color .12s !important;
}
footer.footer-content a:hover { color: var(--brand) !important }

footer.footer-content h4,
footer.footer-content h5,
footer.footer-content h6,
footer.footer-content .block .title,
footer.footer-content .footer-title {
    color: var(--brand) !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .07em !important;
    border-bottom: 1px solid var(--dark4) !important;
    padding-bottom: 8px !important; margin-bottom: 12px !important;
}

/* Hotline trong footer */
footer.footer-content .call-footer li a { color: var(--brand) !important; font-size: 18px !important }
footer.footer-content .call-footer li a:hover { color: var(--brand-light) !important }
footer.footer-content .call-footer li .title { color: var(--dtext) !important }

/* Copyright */
.footer-copy { color: var(--dmuted2) !important; font-size: 11.5px !important }

/* Newsletter */
.footer-signup { background: var(--dark3) !important; border-top: 1px solid var(--dark4) !important }
.footer-signup h5 { color: var(--dtext) !important }

.newsletter-input {
    background: var(--dark) !important; border: 1px solid var(--dborder) !important;
    color: var(--dtext) !important; border-radius: 6px 0 0 6px !important;
}
.newsletter-input:focus { border-color: var(--brand) !important }
.newsletter-input::placeholder { color: #484F58 !important }
.newsletter-button {
    background: var(--brand) !important; color: var(--dark) !important;
    font-weight: 700 !important; border-radius: 0 6px 6px 0 !important;
    transition: background .15s !important;
}
.newsletter-button:hover { background: var(--brand-dk) !important }

/* ================================================================
   MOBILE IMPROVEMENTS
================================================================ */
@media (max-width: 991px) {
    .contact-bar .timework { display: none !important }
    section.bread-crumb { padding: 7px 0 !important }
    .title-product { font-size: 18px !important }
    .layout-product .details-pro .price-box .special-price { font-size: 22px !important }
    .main-header { padding-bottom: 6px !important }
}

@media (max-width: 576px) {
    .contact-bar .hotline.first,
    .contact-bar .hotline.center { display: none !important }
    .thong-so .content li { flex-wrap: wrap !important }
    .thong-so .content li > strong { min-width: 100% !important; width: 100% !important; margin-bottom: 2px !important }
}