/* ================================================================
   TATEKSAFE B2B — style.css v2.0
   Industrial Dark Theme
   Palette: #E6AF2E (gold) / #0D1117 (dark) / #F4F5F7 (light bg)
================================================================ */

/* ── CSS Variables ── */
:root {
    --ttk-gold:         #E6AF2E;
    --ttk-gold-dark:    #C9961A;
    --ttk-gold-light:   #F5C842;
    --ttk-gold-glow:    rgba(230,175,46,.15);
    --ttk-gold-border:  rgba(230,175,46,.3);

    --ttk-dark:         #0D1117;
    --ttk-dark2:        #161B22;
    --ttk-dark3:        #1C2128;
    --ttk-dark4:        #21262D;
    --ttk-border:       #30363D;

    --ttk-text:         #E6EDF3;
    --ttk-muted:        #8B949E;
    --ttk-muted2:       #6B7785;
    --ttk-hint:         #484F58;

    --ttk-page:         #F4F5F7;
    --ttk-surface:      #FFFFFF;
    --ttk-surface2:     #F8F9FB;
    --ttk-line:         #E8E9EC;

    --ttk-success:      #2DB87A;
    --ttk-danger:       #E34C4C;
    --ttk-info:         #378ADD;

    /* Legacy compat — garder pour modules existants */
    --xiaomi-orange:        #E6AF2E;
    --xiaomi-light-orange:  #F5C842;
    --dark-text:            #1A1D23;
    --light-gray:           #F4F5F7;
    --red-color:            #E34C4C;
    --yellow-color:         #E6AF2E;
    --TATEKSAFE-orange:     #E6AF2E;
}

/* ── Scrollbar ── */
html::-webkit-scrollbar { width: 4px }
html::-webkit-scrollbar-thumb { background: var(--ttk-gold); border-radius: 2px }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box }

body {
    font-family: 'Quicksand', 'Segoe UI', sans-serif;
    margin: 0; color: #1A1D23;
    font-size: 14px; background: var(--ttk-page);
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

a, a:focus, a:visited { color: #1A1D23; text-decoration: none }
a:hover { color: var(--ttk-gold-dark) }
ul, ol, li { list-style: none; padding: 0; margin: 0 }
button, input, select { outline: none; border: none }
img { max-width: 100%; height: auto }
.hidden { display: none !important }
.container.wraper { max-width: 1200px }
.mobile_none { display: block }
.destop-none { display: none }
.mb-px10 { margin-bottom: 10px }

/* Bootstrap overrides */
.form-control:focus, .form-select:focus {
    box-shadow: none !important;
    border: 1px solid var(--ttk-gold) !important;
}
.ms-20{margin-left:20px!important}.me-20{margin-right:20px!important}
.mx-20{margin-left:20px!important;margin-right:20px!important}
.ms-15{margin-left:15px!important}.me-15{margin-right:15px!important}

/* MUI 24-col grid */
.mui-row{display:flex;flex-wrap:wrap;margin-left:-5px;margin-right:-5px}
[class^="mui-col-"]{padding-left:5px;padding-right:5px}
.row.no-gutter,.mui-row.no-gutter{margin-left:0;margin-right:0}
.mui-row.no-gutter>[class^="mui-col-"]{padding-left:0!important;padding-right:0!important}
.mui-col-1{width:4.16%}.mui-col-2{width:8.33%}.mui-col-3{width:12.5%}
.mui-col-4{width:16.66%}.mui-col-5{width:20.83%}.mui-col-6{width:25%}
.mui-col-7{width:29.16%}.mui-col-8{width:33.33%}.mui-col-9{width:37.5%}
.mui-col-10{width:41.66%}.mui-col-11{width:45.83%}.mui-col-12{width:50%}
.mui-col-13{width:54.16%}.mui-col-14{width:58.33%}.mui-col-15{width:62.5%}
.mui-col-16{width:66.66%}.mui-col-17{width:70.83%}.mui-col-18{width:75%}
.mui-col-19{width:79.16%}.mui-col-20{width:83.33%}.mui-col-21{width:87.5%}
.mui-col-22{width:91.66%}.mui-col-23{width:95.83%}.mui-col-24{width:100%}

/* ================================================================
   TOPBAR
================================================================ */
.ttk-topbar {
    background: var(--ttk-dark);
    border-bottom: 1px solid var(--ttk-dark4);
    padding: 6px 0;
}

.ttk-topbar-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
}

.ttk-topbar-left, .ttk-topbar-right {
    display: flex; align-items: center;
    gap: 10px; font-size: 11.5px; color: var(--ttk-muted);
}

.ttk-topbar-left i, .ttk-topbar-right i { color: var(--ttk-gold); font-size: 11px }

.ttk-topbar-left a, .ttk-topbar-right a {
    color: var(--ttk-muted); transition: color .15s;
}
.ttk-topbar-left a:hover, .ttk-topbar-right a:hover { color: var(--ttk-gold) }

.ttk-sep { color: var(--ttk-border); padding: 0 2px }

.ttk-cert {
    background: var(--ttk-gold-glow);
    border: 1px solid var(--ttk-gold-border);
    color: var(--ttk-gold);
    font-size: 9.5px; font-weight: 700;
    padding: 2px 7px; border-radius: 3px;
    letter-spacing: .04em; white-space: nowrap;
}

/* ================================================================
   MAIN HEADER
================================================================ */
.ttk-header {
    background: var(--ttk-dark2);
    border-bottom: 1px solid var(--ttk-dark4);
}

.ttk-header-inner {
    display: flex; align-items: center;
    gap: 14px; height: 72px; position: relative;
}

/* Toggle mobile */
.ttk-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; cursor: pointer;
    padding: 6px; border-radius: 4px;
    border: 1px solid var(--ttk-border);
}
.ttk-toggle span {
    display: block; width: 20px; height: 2px;
    background: var(--ttk-text); border-radius: 1px;
    transition: transform .2s;
}
.ttk-toggle span:last-child { width: 14px }

/* Logo */
.ttk-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
}

.ttk-logo-shield {
    width: 44px; height: 44px;
    background: var(--ttk-gold);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s;
}
.ttk-logo:hover .ttk-logo-shield { background: var(--ttk-gold-dark) }

.ttk-logo-shield svg {
    width: 24px; height: 24px;
    stroke: var(--ttk-dark);
}

.ttk-logo-text { display: flex; flex-direction: column; line-height: 1 }
.ttk-logo-name {
    font-size: 19px; font-weight: 700;
    color: #fff; letter-spacing: -.02em;
}
.ttk-logo-sub {
    font-size: 9.5px; color: var(--ttk-muted2);
    letter-spacing: .08em; text-transform: uppercase;
    margin-top: 2px;
}

/* Banner image (logo NukeViet) — override khi dùng [BANNER] */
.ttk-header .banner img {
    height: 44px !important; width: auto !important;
    filter: brightness(0) invert(1) !important;
}

/* Search */
.ttk-search {
    flex: 1; max-width: 560px; position: relative;
}
.ttk-search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ttk-muted); font-size: 13px; pointer-events: none;
}
.ttk-search-input {
    width: 100%; height: 40px;
    background: var(--ttk-dark) !important;
    border: 1px solid var(--ttk-border) !important;
    border-radius: 6px !important;
    padding: 0 14px 0 36px !important;
    font-size: 13px !important; color: var(--ttk-text) !important;
    transition: border-color .15s; font-family: inherit;
}
.ttk-search-input:focus {
    border-color: var(--ttk-gold) !important;
    box-shadow: 0 0 0 3px var(--ttk-gold-glow) !important;
}
.ttk-search-input::placeholder { color: var(--ttk-hint) }
.ttk-search-mobile { max-width: 100%; margin: 0 0 10px; }

/* Suggestions */
.suggestions-container {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 600;
    background: var(--ttk-dark2);
    border: 1px solid var(--ttk-border);
    border-top: none; border-radius: 0 0 6px 6px;
    max-height: 320px; overflow-y: auto;
}

/* Actions */
.ttk-actions {
    display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
}

.ttk-action-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 10px;
    background: none; border: 1px solid transparent;
    border-radius: 6px; cursor: pointer;
    color: var(--ttk-muted); font-size: 10px;
    text-decoration: none; transition: all .15s;
}
.ttk-action-btn:hover {
    border-color: var(--ttk-border);
    color: var(--ttk-text);
    background: var(--ttk-dark3);
}
.ttk-action-btn i { font-size: 17px; color: var(--ttk-muted) }
.ttk-action-btn:hover i { color: var(--ttk-gold) }

/* Cart override — NukeViet */
.ttk-actions .cart-wrapper,
.ttk-actions [class*="cart"] { color: var(--ttk-muted) !important }

/* CTA Quote button */
.ttk-btn-quote {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ttk-gold);
    border: none; border-radius: 6px;
    padding: 10px 18px;
    color: var(--ttk-dark) !important; font-size: 12.5px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    white-space: nowrap; letter-spacing: .02em;
    transition: background .15s; flex-shrink: 0;
}
.ttk-btn-quote:hover { background: var(--ttk-gold-dark) }
.ttk-btn-quote i { font-size: 13px }

/* ================================================================
   NAVIGATION BAR
================================================================ */
.ttk-nav {
    background: var(--ttk-dark3);
    border-top: 1px solid var(--ttk-dark4);
    border-bottom: 2px solid var(--ttk-gold);
}

/* NukeViet mega menu card reset */
.ttk-nav .card.rounded-0 {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
.ttk-nav .card-body { padding: 0 !important }
.ttk-nav #mega-menu {
    background: transparent !important;
    display: flex !important; align-items: center;
}

/* Nav items */
.ttk-nav .nav-item-xiaomi {
    position: relative;
    display: inline-flex; align-items: center;
    height: 46px; padding: 0;
}

.ttk-nav .nav-item-xiaomi > a {
    display: flex; align-items: center; gap: 5px;
    padding: 0 16px; height: 46px;
    color: var(--ttk-text) !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s, background .15s;
}
.ttk-nav .nav-item-xiaomi > a:hover,
.ttk-nav .nav-item-xiaomi:hover > a {
    color: var(--ttk-gold) !important;
    border-bottom-color: var(--ttk-gold);
    background: rgba(255,255,255,.04);
}
.ttk-nav .nav-item-xiaomi > a .fa-chevron-right,
.ttk-nav .nav-item-xiaomi > a .fa-chevron-down {
    font-size: 9px; color: var(--ttk-muted2); margin-left: 2px;
}

/* Mega menu dropdown */
.ttk-nav .mega-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    background: var(--ttk-dark2) !important;
    border: 1px solid var(--ttk-border) !important;
    border-top: 2px solid var(--ttk-gold) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
    z-index: 999 !important;
    padding: 20px 20px 16px !important;
    min-width: 720px !important;
    flex-wrap: wrap !important; gap: 0 !important;
}

.ttk-nav .nav-item-xiaomi:hover .mega-menu {
    display: flex !important;
}

/* Mega columns */
.ttk-nav .mega-menu-column {
    flex: 0 0 23%; margin-right: 2.66%;
    padding: 0;
}
.ttk-nav .mega-menu-column:last-child { margin-right: 0 }

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

.ttk-nav .mega-menu-list { list-style: none; padding: 0; margin: 0 }
.ttk-nav .mega-menu-list li { margin-bottom: 2px }

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

/* Dropdown đơn giản (không phải mega) */
.ttk-nav .nav-item-xiaomi > ul {
    display: none; position: absolute;
    top: 100%; left: 0;
    background: var(--ttk-dark2);
    border: 1px solid var(--ttk-border);
    border-top: 2px solid var(--ttk-gold);
    border-radius: 0 0 6px 6px;
    min-width: 220px; padding: 6px 0; z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    list-style: none;
}
.ttk-nav .nav-item-xiaomi:hover > ul { display: block }
.ttk-nav .nav-item-xiaomi > ul li a {
    display: block; padding: 8px 16px;
    color: var(--ttk-muted) !important; font-size: 13px;
    transition: color .12s, background .12s;
}
.ttk-nav .nav-item-xiaomi > ul li a:hover {
    color: var(--ttk-gold) !important;
    background: rgba(230,175,46,.06);
}

/* ================================================================
   TRUST BAR
================================================================ */
.ttk-trust {
    background: var(--ttk-dark2);
    border-bottom: 1px solid var(--ttk-dark4);
    padding: 10px 0;
}

.ttk-trust-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 4px;
}

.ttk-trust-item {
    display: flex; align-items: center; gap: 9px;
    flex: 1;
}

.ttk-trust-item i {
    font-size: 17px; color: var(--ttk-gold); flex-shrink: 0;
    width: 20px; text-align: center;
}

.ttk-trust-item div { display: flex; flex-direction: column }

.ttk-trust-item strong {
    display: block; font-size: 11.5px;
    font-weight: 700; color: var(--ttk-text); line-height: 1.25;
}
.ttk-trust-item span {
    display: block; font-size: 10.5px;
    color: var(--ttk-muted2); line-height: 1.25;
}

/* ================================================================
   NEWSLETTER / FOOTER SIGNUP
================================================================ */
.footer-signup {
    background: var(--ttk-dark3);
    padding: 22px 0;
    border-top: 1px solid var(--ttk-dark4);
}

.newsletter-container {
    display: flex; align-items: center;
    justify-content: center; gap: 12px; flex-wrap: wrap;
}

.newsletter-container h5 {
    font-size: 13.5px; font-weight: 700;
    color: var(--ttk-text); margin: 0; white-space: nowrap;
}

.newsletter-input {
    background: var(--ttk-dark) !important;
    border: 1px solid var(--ttk-border) !important;
    color: var(--ttk-text) !important;
    border-radius: 6px 0 0 6px !important;
    padding: 9px 14px !important; font-size: 13px !important;
    min-width: 260px;
}
.newsletter-input:focus { border-color: var(--ttk-gold) !important }
.newsletter-input::placeholder { color: var(--ttk-hint) }

.newsletter-button {
    background: var(--ttk-gold) !important;
    border: none !important; color: var(--ttk-dark) !important;
    font-weight: 700 !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 9px 20px !important; font-size: 13px !important;
    transition: background .15s !important; white-space: nowrap;
}
.newsletter-button:hover { background: var(--ttk-gold-dark) !important }

/* ================================================================
   FOOTER
================================================================ */
.ttk-footer {
    background: var(--ttk-dark2);
    padding: 40px 0 28px;
    border-top: 1px solid var(--ttk-dark4);
}

.ttk-footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
    gap: 28px; margin-bottom: 28px;
}

/* Brand col */
.ttk-footer-logo {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ttk-logo-shield-sm {
    width: 36px; height: 36px;
    background: var(--ttk-gold); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.ttk-logo-shield-sm svg { width: 20px; height: 20px; stroke: var(--ttk-dark) }
.ttk-footer-brand-name { font-size: 17px; font-weight: 700; color: var(--ttk-gold) }
.ttk-footer-desc {
    font-size: 12.5px; color: var(--ttk-muted2);
    line-height: 1.75; margin-bottom: 14px;
}
.ttk-footer-hotline-wrap { margin-bottom: 12px }
.ttk-footer-hotline-lbl {
    display: block; font-size: 10px;
    color: var(--ttk-muted2); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 2px;
}
.ttk-footer-hotline {
    font-size: 20px; font-weight: 700;
    color: var(--ttk-gold) !important; display: block;
}
.ttk-footer-hotline:hover { color: var(--ttk-gold-light) !important }

.ttk-footer-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.ttk-footer-cert {
    background: var(--ttk-dark3); border: 1px solid var(--ttk-border);
    color: var(--ttk-muted); font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px; letter-spacing: .03em;
}

/* Footer cols */
.ttk-footer-col { color: var(--ttk-muted) }

.ttk-footer-col a {
    color: var(--ttk-muted); font-size: 12.5px;
    display: block; margin-bottom: 7px; transition: color .12s;
}
.ttk-footer-col a:hover { color: var(--ttk-gold) }

/* Block titles inside footer cols */
.ttk-footer .block-title,
.ttk-footer .block .title,
.ttk-footer h4, .ttk-footer h5, .ttk-footer h6 {
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: var(--ttk-gold) !important;
    margin-bottom: 12px !important; padding-bottom: 8px !important;
    border-bottom: 1px solid var(--ttk-dark4) !important;
}

/* Footer bottom */
.ttk-footer-bottom {
    border-top: 1px solid var(--ttk-dark4);
    padding-top: 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; color: var(--ttk-muted2); flex-wrap: wrap; gap: 8px;
}
.ttk-footer-bottom a { color: var(--ttk-muted2) }
.ttk-footer-bottom a:hover { color: var(--ttk-gold) }

/* Social icons in footer */
.socialList li a { color: var(--ttk-muted); font-size: 18px }
.socialList li a:hover { color: var(--ttk-gold) }

/* call-footer compat */
.call-footer li { display: block; margin-bottom: 8px }
.call-footer li .title { display: block; font-weight: 700; color: var(--ttk-text) }
.call-footer li a { font-size: 18px; font-weight: 700; color: var(--ttk-gold); display: block }
.call-footer li a:hover { color: var(--ttk-gold-light) }
.call-footer li .content { font-size: 12px; font-style: italic; color: var(--ttk-muted) }

/* ================================================================
   CONTACT BAR — sticky bottom
================================================================ */
.ttk-contact-bar {
    background: var(--ttk-dark);
    border-top: 2px solid var(--ttk-gold);
    position: sticky; bottom: 0; z-index: 900;
    box-shadow: 0 -4px 24px rgba(0,0,0,.45);
}

.ttk-contact-bar-inner {
    display: flex; align-items: center; height: 48px;
    overflow-x: auto; gap: 0;
}

.ttk-cbar-time {
    font-size: 11px; color: var(--ttk-muted);
    padding: 0 14px; border-right: 1px solid var(--ttk-dark4);
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap; flex-shrink: 0; height: 100%;
}
.ttk-cbar-time i { color: var(--ttk-gold) }

.ttk-cbar-item {
    display: flex; align-items: center; gap: 7px;
    padding: 0 14px; height: 100%;
    border-right: 1px solid var(--ttk-dark4);
    color: var(--ttk-text) !important; font-size: 12px; font-weight: 600;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: color .15s, background .15s;
}
.ttk-cbar-item:hover { color: var(--ttk-gold) !important; background: rgba(255,255,255,.04) }
.ttk-cbar-item i { color: var(--ttk-muted); font-size: 13px }
.ttk-cbar-item:hover i { color: var(--ttk-gold) }
.ttk-cbar-item img { height: 16px !important }

.ttk-cbar-hotline { color: var(--ttk-gold) !important }
.ttk-cbar-hotline i { color: var(--ttk-gold) }

.ttk-cbar-quote {
    display: flex; align-items: center; gap: 7px;
    padding: 0 20px; height: 100%;
    background: var(--ttk-gold); color: var(--ttk-dark) !important;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    margin-left: auto; transition: background .15s;
}
.ttk-cbar-quote:hover { background: var(--ttk-gold-dark); color: var(--ttk-dark) !important }
.ttk-cbar-quote i { font-size: 13px; color: var(--ttk-dark) }

/* ================================================================
   MOBILE MENU OVERLAY
================================================================ */
.ttk-mob-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.7); z-index: 9998;
}
.ttk-mob-overlay.open { display: block }

.ttk-mob-menu {
    position: fixed; top: 0; left: -100%;
    width: 82%; max-width: 320px; height: 100%;
    background: var(--ttk-dark2); z-index: 9999;
    overflow-y: auto; transition: left .3s ease;
}
.ttk-mob-menu.open { left: 0 }

.ttk-mob-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ttk-dark4);
}
.ttk-mob-title { font-size: 15px; font-weight: 700; color: var(--ttk-gold) }
.ttk-mob-close {
    background: none; border: none; cursor: pointer;
    color: var(--ttk-muted); font-size: 18px; padding: 0;
}
.ttk-mob-close:hover { color: var(--ttk-text) }

/* Mobile menu items */
#mega-menu-mobile .nav-item-xiaomi {
    display: flex; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ttk-dark4);
    height: auto; flex-wrap: wrap;
}
#mega-menu-mobile .nav-item-xiaomi > a {
    color: var(--ttk-text) !important; font-size: 13.5px; font-weight: 600;
    height: auto; padding: 0; border-bottom: none; flex: 1;
}
#mega-menu-mobile .mega-menu {
    display: none; position: static !important;
    width: 100% !important; box-shadow: none !important;
    border: none !important;
    padding: 8px 0 8px 20px !important;
    background: var(--ttk-dark3) !important;
    flex-direction: column !important; min-width: unset !important;
}
#mega-menu-mobile .mega-menu.show { display: flex !important }

/* Menu mobile legacy */
#menu_mobile { display: none }
#mega-menu-mobile-wrapper {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.7); z-index: 9998;
}
#mega-menu-mobile {
    position: fixed; top: 0; left: -100%;
    width: 82%; max-width: 320px; height: 100%;
    background: var(--ttk-dark2); z-index: 9999;
    overflow-y: auto;
}

/* ================================================================
   BREADCRUMB
================================================================ */
.breadcrumb-wrap {
    background: var(--ttk-surface2);
    border-bottom: 1px solid var(--ttk-line);
    padding: 8px 0;
}
.breadcrumb, .breadcrumbs {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--ttk-muted); margin: 0;
}
.breadcrumb a, .breadcrumbs a { color: var(--ttk-muted) }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--ttk-gold-dark) }
.breadcrumb .active, .breadcrumbs .active { color: var(--ttk-gold-dark); font-weight: 600 }
.breadcrumb li::after { content: '/'; margin-left: 6px; color: var(--ttk-line) }
.breadcrumb li:last-child::after { display: none }

/* ================================================================
   COMMON BUTTONS
================================================================ */
.btn-b2b-gold {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ttk-gold); color: var(--ttk-dark) !important;
    border: none; border-radius: 6px;
    padding: 9px 18px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s; text-decoration: none;
}
.btn-b2b-gold:hover { background: var(--ttk-gold-dark) }

.btn-b2b-dark {
    display: inline-flex; align-items: center; gap: 6px;
    background: #1A1D23; color: #fff !important;
    border: none; border-radius: 6px;
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s; text-decoration: none;
}
.btn-b2b-dark:hover { background: var(--ttk-gold); color: var(--ttk-dark) !important }

.btn-b2b-outline {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--ttk-gold);
    border: 1px solid var(--ttk-gold-border);
    border-radius: 6px; padding: 8px 16px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-b2b-outline:hover { background: var(--ttk-gold); color: var(--ttk-dark) !important }

/* ================================================================
   BADGES
================================================================ */
.badge-cert { background:#e6f4ea;color:#1e7e34;border:1px solid #a8d5b5;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px }
.badge-moq  { background:#fff3cd;color:#856404;border:1px solid #ffc107;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px }
.badge-new-item { background:#cce5ff;color:#004085;border:1px solid #b8daff;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px }
.badge-hot-item { background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px }

/* ================================================================
   BLOCK TITLES — override theme global
================================================================ */
.block .title a { color: #1A1D23; font-size: 15px; font-weight: 700 }
.block .title a:hover { color: var(--ttk-gold-dark) }

/* Decorative gold line under section titles */
.section-title-b2b {
    font-size: 19px; font-weight: 700;
    color: #1A1D23; letter-spacing: -.01em;
    position: relative; padding-bottom: 10px;
    margin-bottom: 4px;
}
.section-title-b2b::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 40px; height: 3px;
    background: var(--ttk-gold); border-radius: 2px;
}
.section-title-b2b span { color: var(--ttk-gold-dark) }

/* ================================================================
   MISC / COMPAT
================================================================ */
.chromeframe {
    position: fixed !important; top: 0 !important; left: 0; right: 0;
    width: 100% !important; z-index: 9999999 !important;
    background: #ffff00 !important; color: #000 !important;
    height: 25px; line-height: 25px; text-align: center !important;
}
#timeoutsess { display: none }
#timeoutsess a { color: #2f70a7 !important }

.cookie-notice {
    position: fixed; bottom: 60px; left: 16px; right: 16px;
    background: var(--ttk-dark2); border: 1px solid var(--ttk-border);
    border-radius: 8px; padding: 12px 16px; z-index: 9990;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--ttk-muted);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    max-width: 600px; margin: 0 auto;
}
.cookie-notice button {
    background: none; border: none; cursor: pointer;
    color: var(--ttk-muted); font-size: 18px; margin-left: 12px;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 991px) {
    .mobile_none { display: none !important }
    .destop-none { display: block !important }
    .ttk-toggle { display: flex !important }
    .ttk-trust { display: none }
    .ttk-topbar .ttk-topbar-right { display: none }
    .ttk-header-inner { height: 60px }
    .ttk-logo-name { font-size: 16px }
    .ttk-btn-quote { padding: 8px 12px; font-size: 11px }
}

@media (max-width: 768px) {
    .ttk-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px }
    .ttk-footer-brand { grid-column: 1 / -1 }
    .ttk-cbar-time { display: none !important }
    .newsletter-input { min-width: unset; border-radius: 6px 0 0 6px !important }
}

@media (max-width: 576px) {
    .ttk-footer-grid { grid-template-columns: 1fr }
    .ttk-footer-brand { grid-column: auto }
    .newsletter-container { flex-direction: column !important }
    .newsletter-input { border-radius: 6px !important; width: 100% }
    .newsletter-button { border-radius: 6px !important; width: 100%; justify-content: center }
    .hero-stats { flex-wrap: wrap; gap: 12px }
    .ttk-contact-bar-inner { padding: 0 8px }

    .mui-col-xs-1{width:4.16%}.mui-col-xs-2{width:8.33%}.mui-col-xs-3{width:12.5%}
    .mui-col-xs-4{width:16.66%}.mui-col-xs-6{width:25%}.mui-col-xs-8{width:33.33%}
    .mui-col-xs-12{width:50%}.mui-col-xs-16{width:66.66%}
    .mui-col-xs-17{width:70.83%}.mui-col-xs-18{width:75%}.mui-col-xs-24{width:100%}
}

@media (max-width: 768px) {
    .mui-col-sm-2{width:8.33%}.mui-col-sm-5{width:20.83%}
    .mui-col-sm-18{width:75%}.mui-col-sm-24{width:100%}
}

@media (min-width: 769px) and (max-width: 991px) {
    .mui-col-md-2{width:8.33%}.mui-col-md-3{width:12.5%}
    .mui-col-md-4{width:16.66%}.mui-col-md-5{width:20.83%}
    .mui-col-md-8{width:33.33%}.mui-col-md-16{width:66.66%}
    .mui-col-md-24{width:100%}
}

@media (min-width: 992px) {
    .mui-col-lg-5{width:20.83%}.mui-col-lg-6{width:25%}.mui-col-lg-13{width:54.16%}
}

/* ================================================================
   SHOPS MODULE — B2B Layout CSS
   Breadcrumb, sidebar, product listing, detail page
================================================================ */

/* ── Breadcrumb ── */
.ttk-breadcrumb {
    background: var(--ttk-surface2);
    border-bottom: 1px solid var(--ttk-line);
    padding: 9px 0;
}

.ttk-breadcrumb-list {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 4px;
    list-style: none; margin: 0; padding: 0;
    font-size: 12.5px;
}

.ttk-breadcrumb-list li {
    display: flex; align-items: center; gap: 4px;
    color: var(--color-text-secondary, #8B949E);
}

.ttk-breadcrumb-list li::after {
    content: '›';
    color: var(--ttk-line);
    font-size: 14px;
    margin-left: 4px;
}

.ttk-breadcrumb-list li:last-child::after { display: none }
.ttk-breadcrumb-list li:last-child { color: var(--ttk-gold-dark); font-weight: 600 }

.ttk-breadcrumb-list a {
    color: var(--color-text-secondary, #8B949E);
    transition: color .12s;
}
.ttk-breadcrumb-list a:hover { color: var(--ttk-gold-dark) }

/* ── Shops catalog layout ── */
.layout-shops-catalog {
    padding: 20px 0 32px;
    background: var(--ttk-page);
}

/* ── Sidebar ── */
.ttk-shops-sidebar {
    padding-right: 16px;
}

.ttk-sidebar-inner {
    position: sticky;
    top: 64px; /* clearance cho contact bar */
}

/* Sidebar block wrapper */
.ttk-shops-sidebar .block {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ttk-shops-sidebar .block:last-child { margin-bottom: 0 }

/* Sidebar block title */
.ttk-shops-sidebar .block .title,
.ttk-shops-sidebar .block h3,
.ttk-shops-sidebar .block h4 {
    background: var(--ttk-dark2);
    color: var(--ttk-gold) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--ttk-border) !important;
    border-radius: 0 !important;
}

.ttk-shops-sidebar .block .content,
.ttk-shops-sidebar .block-content {
    padding: 12px 14px;
}

/* Danh mục dọc trong sidebar */
.ttk-shops-sidebar .catalogs-menu li,
.ttk-shops-sidebar .cat-list li {
    border-bottom: 1px solid var(--ttk-line);
}

.ttk-shops-sidebar .catalogs-menu li:last-child,
.ttk-shops-sidebar .cat-list li:last-child { border-bottom: none }

.ttk-shops-sidebar .catalogs-menu a,
.ttk-shops-sidebar .cat-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 4px;
    color: #444 !important;
    font-size: 13px;
    transition: color .12s;
}

.ttk-shops-sidebar .catalogs-menu a:hover,
.ttk-shops-sidebar .cat-list a:hover {
    color: var(--ttk-gold-dark) !important;
}

.ttk-shops-sidebar .catalogs-menu a.active,
.ttk-shops-sidebar .cat-list a.active {
    color: var(--ttk-gold-dark) !important;
    font-weight: 600;
}

/* Filter giá */
.ttk-shops-sidebar .price-filter input[type="range"] {
    accent-color: var(--ttk-gold);
    width: 100%;
}

.ttk-shops-sidebar .filter-apply-btn {
    display: block; width: 100%;
    background: var(--ttk-dark);
    color: #fff; border: none;
    border-radius: 5px; padding: 8px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; margin-top: 10px;
    transition: background .15s;
    text-align: center;
}

.ttk-shops-sidebar .filter-apply-btn:hover { background: var(--ttk-gold); color: var(--ttk-dark) }

/* ── Shops main content area ── */
.ttk-shops-main {
    min-height: 400px;
}

/* Toolbar sort/filter trên danh sách */
.s-cat-fillter,
.shops-toolbar {
    display: flex; align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.s-cat-fillter select,
.shops-toolbar select {
    background: var(--ttk-surface2) !important;
    border: 1px solid var(--ttk-line) !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    font-size: 12.5px !important;
    color: #333 !important;
    cursor: pointer;
}

.s-cat-fillter select:focus,
.shops-toolbar select:focus {
    border-color: var(--ttk-gold) !important;
    outline: none;
}

/* View mode buttons (grid/list) */
.view-mode-btn {
    display: inline-flex; align-items: center;
    gap: 4px; padding: 5px 10px;
    background: var(--ttk-surface2);
    border: 1px solid var(--ttk-line);
    border-radius: 5px; cursor: pointer;
    font-size: 12px; color: #666;
    transition: all .15s;
}
.view-mode-btn.active,
.view-mode-btn:hover {
    background: var(--ttk-dark);
    border-color: var(--ttk-dark);
    color: #fff;
}

/* ── Product grid ── */
.shops-grid,
.product-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* Product card */
.product-item,
.item-product {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column;
}

.product-item:hover,
.item-product:hover {
    border-color: var(--ttk-gold-dark);
    box-shadow: 0 4px 16px rgba(180,130,10,.1);
}

/* Product image */
.product-item .item-img,
.item-product .item-img {
    background: var(--ttk-surface2);
    aspect-ratio: 1;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.product-item .item-img img,
.item-product .item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.product-item:hover .item-img img,
.item-product:hover .item-img img {
    transform: scale(1.04);
}

/* Product info */
.product-item .item-info,
.item-product .item-info {
    padding: 12px;
    flex: 1; display: flex; flex-direction: column;
}

/* Brand */
.product-item .item-brand,
.item-brand {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ttk-muted); margin-bottom: 4px;
}

/* Product name */
.product-item .item-title a,
.item-product .item-title a,
.item-name a {
    font-size: 13px; font-weight: 600;
    color: #1A1D23 !important;
    line-height: 1.4; display: block;
    margin-bottom: 6px;
    transition: color .12s;
}

.product-item .item-title a:hover,
.item-product .item-title a:hover,
.item-name a:hover {
    color: var(--ttk-gold-dark) !important;
}

/* Badges: cert + MOQ */
.item-badges {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 8px;
}

/* Price */
.product-item .item-price .money,
.item-product .money,
.price-current {
    font-size: 15px; font-weight: 700;
    color: var(--ttk-gold-dark) !important;
    display: block;
}

.product-item .item-price .discounts_money,
.discounts_money {
    font-size: 12px; color: var(--ttk-muted) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Add to cart / Quote button */
.product-item .item-action,
.btn-addcart-wrap {
    margin-top: auto; padding-top: 8px;
    display: flex; gap: 6px;
}

.btn-addcart,
.btn-add-cart,
.add-to-cart,
input[type="button"].btn-addcart {
    flex: 1;
    background: var(--ttk-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .15s !important;
    text-align: center;
}

.btn-addcart:hover,
.btn-add-cart:hover,
.add-to-cart:hover {
    background: var(--ttk-gold) !important;
    color: var(--ttk-dark) !important;
}

/* Nút yêu cầu báo giá (thay thế add to cart cho B2B) */
.btn-quote-product {
    flex: 1; display: block;
    background: var(--ttk-dark);
    color: #fff !important;
    border: none; border-radius: 5px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; text-align: center;
    text-decoration: none;
    transition: background .15s;
}
.btn-quote-product:hover { background: var(--ttk-gold); color: var(--ttk-dark) !important }

/* Wishlist / compare icon button */
.btn-wishlist,
.btn-compare {
    width: 30px; height: 30px;
    background: var(--ttk-surface2);
    border: 1px solid var(--ttk-line);
    border-radius: 5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all .15s;
    flex-shrink: 0;
}
.btn-wishlist:hover, .btn-compare:hover {
    background: var(--ttk-gold-glow);
    border-color: var(--ttk-gold);
    color: var(--ttk-gold-dark);
}

/* ── Product list view ── */
.shops-list .product-item {
    flex-direction: row;
}
.shops-list .product-item .item-img {
    width: 140px; flex-shrink: 0; aspect-ratio: auto; height: 140px;
}
.shops-list .product-item .item-info { padding: 14px }

/* ── Pagination ── */
.pagination-wrap,
.pagingnav {
    display: flex; justify-content: center;
    margin-top: 24px;
}

.pagingnav ul,
.pagination {
    display: flex; align-items: center;
    gap: 4px; list-style: none; padding: 0; margin: 0;
}

.pagingnav li a,
.pagingnav li span,
.page-link {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 5px;
    font-size: 13px; font-weight: 500;
    color: #444 !important; transition: all .15s;
    text-decoration: none;
}

.pagingnav li a:hover,
.page-link:hover {
    border-color: var(--ttk-gold);
    color: var(--ttk-gold-dark) !important;
    background: var(--ttk-gold-glow);
}

.pagingnav li.active a,
.pagingnav li.active span,
.page-item.active .page-link {
    background: var(--ttk-dark) !important;
    border-color: var(--ttk-dark) !important;
    color: #fff !important;
}

/* ── Detail page layout ── */
.layout-shops-detail {
    padding: 20px 0 36px;
    background: var(--ttk-page);
}

.ttk-product-detail-wrap {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 0;
}

/* Detail images */
.shops-detail-img img,
.product-detail-img img {
    border-radius: 6px;
    border: 1px solid var(--ttk-line);
}

/* Detail info box */
.shops-detail-info h1,
.product-detail-name {
    font-size: 20px; font-weight: 700;
    color: #1A1D23; line-height: 1.3;
    margin-bottom: 10px;
}

.shops-detail-info .money,
.product-detail-price .money {
    font-size: 22px; font-weight: 700;
    color: var(--ttk-gold-dark) !important;
}

/* Tabs thông tin kỹ thuật */
.product-tabs .nav-tabs {
    border-bottom: 2px solid var(--ttk-line);
    gap: 4px; flex-wrap: wrap;
}

.product-tabs .nav-tabs .nav-link {
    color: #666 !important;
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 600;
    transition: all .15s;
}

.product-tabs .nav-tabs .nav-link:hover {
    color: var(--ttk-gold-dark) !important;
    background: var(--ttk-gold-glow) !important;
}

.product-tabs .nav-tabs .nav-link.active {
    color: var(--ttk-dark) !important;
    border-color: var(--ttk-line) var(--ttk-line) #fff !important;
    background: #fff !important;
}

.product-tabs .tab-content {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 18px;
}

/* Block chính sách / bảo hành trong detail */
.ttk-product-detail-wrap ~ .row .block,
[SHOPS_DETAIL] .block {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    overflow: hidden;
}

/* Related products */
.ttk-related-products {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    padding: 20px;
}

.ttk-related-products .block-title,
.ttk-related-products h3 {
    font-size: 16px !important; font-weight: 700 !important;
    color: #1A1D23 !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--ttk-line) !important;
}

/* ── Cart page ── */
.layout-shops-catalog .cart-wrapper,
.cart-table {
    background: var(--ttk-surface);
    border: 1px solid var(--ttk-line);
    border-radius: 8px;
    overflow: hidden;
}

.cart-table th {
    background: var(--ttk-dark2) !important;
    color: var(--ttk-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--ttk-border) !important;
}

.cart-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ttk-line) !important;
    vertical-align: middle !important;
}

.cart-table tr:last-child td { border-bottom: none !important }

/* Cart total */
.cart-total-wrap {
    background: var(--ttk-dark2);
    border-radius: 0 0 8px 8px;
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
}

.cart-total-label {
    font-size: 13px; color: var(--ttk-muted);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em;
}

.cart-total-value {
    font-size: 20px; font-weight: 700;
    color: var(--ttk-gold);
}

/* Checkout button */
.btn-checkout,
a.btn-checkout {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ttk-gold) !important;
    color: var(--ttk-dark) !important;
    border: none !important; border-radius: 6px !important;
    padding: 11px 24px !important;
    font-size: 14px !important; font-weight: 700 !important;
    cursor: pointer; text-decoration: none;
    transition: background .15s !important;
}

.btn-checkout:hover {
    background: var(--ttk-gold-dark) !important;
    color: var(--ttk-dark) !important;
}

/* ── Mobile sidebar responsive ── */
@media (max-width: 991px) {
    .ttk-shops-sidebar {
        padding-right: 0;
        margin-bottom: 16px;
    }
    .ttk-sidebar-inner { position: static }

    .shops-grid,
    .product-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .layout-shops-detail .ttk-product-detail-wrap {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .shops-grid,
    .product-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .shops-list .product-item { flex-direction: column }
    .shops-list .product-item .item-img { width: 100%; height: 180px }
}