/* ============================================================
   FIX NỘI DUNG CKEDITOR 5 TRONG THEME STYLE2025
   Thêm vào file: themes/style2025/css/custom.css
   ============================================================ */

/* ── Vùng nội dung bài viết ────────────────────────────────── */
#news-bodyhtml,
.bodytext,
.hometext {
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    word-break: break-word;
}

/* ── Tiêu đề (h1–h6) ────────────────────────────────────────
   Theme reset toàn bộ → phải khai báo lại kích thước & khoảng cách
   ─────────────────────────────────────────────────────────── */
#news-bodyhtml h1,
#news-bodyhtml h2,
#news-bodyhtml h3,
#news-bodyhtml h4,
#news-bodyhtml h5,
#news-bodyhtml h6,
.bodytext h1,
.bodytext h2,
.bodytext h3,
.bodytext h4,
.bodytext h5,
.bodytext h6 {
    font-weight: 700;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.4;
    color: #111;
}
#news-bodyhtml h1, .bodytext h1 { font-size: 2em; }
#news-bodyhtml h2, .bodytext h2 { font-size: 1.6em; }
#news-bodyhtml h3, .bodytext h3 { font-size: 1.35em; }
#news-bodyhtml h4, .bodytext h4 { font-size: 1.15em; }
#news-bodyhtml h5, .bodytext h5 { font-size: 1em; }
#news-bodyhtml h6, .bodytext h6 { font-size: 0.9em; color: #555; }

/* ── Đoạn văn & khoảng cách ────────────────────────────────── */
#news-bodyhtml p,
.bodytext p {
    margin-bottom: 1em;
}

/* ── Danh sách (ul / ol) ────────────────────────────────────
   Theme reset list-style: none → phải khôi phục lại
   ─────────────────────────────────────────────────────────── */
#news-bodyhtml ul,
.bodytext ul {
    list-style: disc;
    padding-left: 1.8em;
    margin-bottom: 1em;
}
#news-bodyhtml ol,
.bodytext ol {
    list-style: decimal;
    padding-left: 1.8em;
    margin-bottom: 1em;
}
#news-bodyhtml ul li,
#news-bodyhtml ol li,
.bodytext ul li,
.bodytext ol li {
    list-style: inherit;
    padding: 0;
    margin: 0 0 0.3em 0;
    display: list-item;
}
/* Danh sách lồng nhau */
#news-bodyhtml ul ul,
.bodytext ul ul {
    list-style: circle;
    margin-bottom: 0;
}
#news-bodyhtml ul ul ul,
.bodytext ul ul ul {
    list-style: square;
}
#news-bodyhtml ol ol,
.bodytext ol ol {
    list-style: lower-alpha;
    margin-bottom: 0;
}

/* ── Hình ảnh ───────────────────────────────────────────────── */
#news-bodyhtml img,
.bodytext img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: 4px;
}
/* Hình inline (CKEditor thêm class này) */
#news-bodyhtml img.image-style-side,
.bodytext img.image-style-side {
    float: right;
    margin: 0.5em 0 1em 1.5em;
    max-width: 50%;
}
#news-bodyhtml .image,
.bodytext .image {
    text-align: center;
    margin: 1.5em 0;
}
#news-bodyhtml .image > figcaption,
.bodytext .image > figcaption {
    font-size: 13px;
    color: #777;
    text-align: center;
    margin-top: 0.4em;
    font-style: italic;
}

/* ── Blockquote ─────────────────────────────────────────────── */
#news-bodyhtml blockquote,
.bodytext blockquote {
    border-left: 4px solid #ff6700;
    margin: 1.5em 0;
    padding: 0.8em 1.2em;
    background: #fff8f5;
    color: #555;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
#news-bodyhtml blockquote p,
.bodytext blockquote p {
    margin-bottom: 0;
}

/* ── Bảng (table) ───────────────────────────────────────────── */
#news-bodyhtml table,
.bodytext table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
    overflow-x: auto;
    display: block;
}
#news-bodyhtml table th,
#news-bodyhtml table td,
.bodytext table th,
.bodytext table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
#news-bodyhtml table th,
.bodytext table th {
    background: #f5f5f5;
    font-weight: 700;
    color: #333;
}
#news-bodyhtml table tr:hover,
.bodytext table tr:hover {
    background: #fafafa;
}

/* ── Code & Pre ─────────────────────────────────────────────── */
#news-bodyhtml pre,
.bodytext pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    margin: 1em 0;
}
#news-bodyhtml code,
.bodytext code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: #c7254e;
}
#news-bodyhtml pre code,
.bodytext pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ── Đường kẻ ngang (hr) ────────────────────────────────────── */
#news-bodyhtml hr,
.bodytext hr {
    border: none;
    border-top: 2px solid #eee;
    margin: 2em 0;
}

/* ── Link trong nội dung ────────────────────────────────────── */
#news-bodyhtml a,
.bodytext a {
    color: #ff6700;
    text-decoration: underline;
}
#news-bodyhtml a:hover,
.bodytext a:hover {
    color: #cc5200;
    text-decoration: none;
}

/* ── Strong / Em / Mark ─────────────────────────────────────── */
#news-bodyhtml strong, .bodytext strong { font-weight: 700; }
#news-bodyhtml em,     .bodytext em     { font-style: italic; }
#news-bodyhtml mark,   .bodytext mark   { background: #fff3cd; padding: 0 3px; border-radius: 2px; }
#news-bodyhtml u,      .bodytext u      { text-decoration: underline; }
#news-bodyhtml s,      .bodytext s      { text-decoration: line-through; }
#news-bodyhtml sub,    .bodytext sub    { vertical-align: sub; font-size: 0.8em; }
#news-bodyhtml sup,    .bodytext sup    { vertical-align: super; font-size: 0.8em; }

/* ── CKEditor 5 – class đặc trưng ───────────────────────────── */
/* Media embed (YouTube, v.v.) */
#news-bodyhtml .media,
.bodytext .media {
    margin: 1.5em 0;
}
#news-bodyhtml .media > div,
.bodytext .media > div {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
#news-bodyhtml .media iframe,
.bodytext .media iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* Căn chỉnh hình CKEditor */
#news-bodyhtml .image.image_resized,
.bodytext .image.image_resized {
    display: block;
    box-sizing: border-box;
}
#news-bodyhtml .image.image-style-align-left,
.bodytext .image.image-style-align-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 0.5em;
}
#news-bodyhtml .image.image-style-align-right,
.bodytext .image.image-style-align-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}
#news-bodyhtml .image.image-style-align-center,
.bodytext .image.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
    #news-bodyhtml,
    .bodytext {
        font-size: 14px;
    }
    #news-bodyhtml h1, .bodytext h1 { font-size: 1.6em; }
    #news-bodyhtml h2, .bodytext h2 { font-size: 1.35em; }
    #news-bodyhtml h3, .bodytext h3 { font-size: 1.15em; }
    #news-bodyhtml table,
    .bodytext table {
        font-size: 12px;
    }
    #news-bodyhtml table th,
    #news-bodyhtml table td,
    .bodytext table th,
    .bodytext table td {
        padding: 6px 8px;
    }
    #news-bodyhtml .image.image-style-align-left,
    #news-bodyhtml .image.image-style-align-right,
    .bodytext .image.image-style-align-left,
    .bodytext .image.image-style-align-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================================================
   TATEKSAFE B2B — Overrides (appended to custom.css)
   Ghi đè màu sắc theo Industrial Dark B2B
   Không thay đổi layout — chỉ đổi màu + visual
================================================================ */

:root {
    --brand:       #E6AF2E;
    --brand-dk:    #C9961A;
    --brand-light: #F5C842;
    --brand-glow:  rgba(230,175,46,.14);
    --dark:        #0D1117;
    --dark2:       #161B22;
    --dark3:       #1C2128;
    --dark4:       #21262D;
    --dborder:     #30363D;
    --dtext:       #E6EDF3;
    --dmuted:      #8B949E;
    --line:        #E8E9EC;
    /* Ghi đè biến cũ */
    --xiaomi-orange:       #E6AF2E;
    --xiaomi-light-orange: #F5C842;
    --TATEKSAFE-orange:    #E6AF2E;
}

/* ── TOPBAR ── */
.top-header {
    background: var(--dark) !important;
    padding: 6px 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--dark4);
}
.top-header a { color: var(--dmuted) !important; font-size: 11.5px; transition: color .15s; }
.top-header a:hover { color: var(--brand) !important; }
.top-header img { height: 36px; }
.top-header .site-slogan { display: none !important; }

/* ── MAIN HEADER ── */
.main-header {
    background: var(--dark2) !important;
    border-bottom: 1px solid var(--dark4) !important;
    padding: 0 !important;
}
.main-header .boxhead small { color: var(--dmuted) !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .04em; }
.main-header .boxhead a,
.main-header .boxhead strong { color: var(--brand) !important; font-weight: 700 !important; }
.main-header .boxhead a:hover { color: var(--brand-light) !important; }
.main-header .banner img { filter: brightness(0) invert(1); height: 40px !important; width: auto !important; }

/* Search */
.search-bar,
.search-box input[type="text"] {
    background: var(--dark) !important;
    border: 1px solid var(--dborder) !important;
    border-radius: 6px !important;
    color: var(--dtext) !important;
    padding-left: 36px !important;
    transition: border-color .15s !important;
}
.search-bar:focus { border-color: var(--brand) !important; box-shadow: none !important; }
.search-bar::placeholder { color: #484F58; }

/* ── NAVIGATION ── */
.card.rounded-0,
.card-body#mega-menu {
    background: var(--dark3) !important;
    border: none !important;
    border-bottom: 2px solid var(--brand) !important;
}
.nav-item-xiaomi { height: 46px; }
.nav-item-xiaomi > a {
    color: var(--dtext) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !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:hover {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
    background: rgba(255,255,255,.04) !important;
}
.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 40px rgba(0,0,0,.5) !important;
}
h6.mega-menu-title {
    color: var(--brand) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    border-bottom: 1px solid var(--dark4) !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
}
.mega-menu-list li a {
    color: var(--dmuted) !important;
    font-size: 12.5px !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    transition: color .12s, background .12s !important;
}
.mega-menu-list li a:hover {
    color: var(--brand) !important;
    background: rgba(230,175,46,.07) !important;
}

/* ── BREADCRUMB ── */
.bread-crumb { background: #F8F9FB !important; border-bottom: 1px solid var(--line) !important; padding: 8px 0 !important; }
.bread-crumb .breadcrumb { background: none !important; margin: 0 !important; font-size: 12.5px !important; }
.bread-crumb .breadcrumb a { color: #8B949E !important; }
.bread-crumb .breadcrumb a:hover { color: var(--brand-dk) !important; }
.bread-crumb .mr_lr { display: none !important; }

/* ── PRODUCT DETAIL ── */
.gallery-top {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.gallery-thumbs .swiper-slide { border: 2px solid var(--line) !important; transition: border-color .15s !important; }
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active,
.gallery-thumbs .swiper-slide:hover { border-color: var(--brand) !important; }

/* Giá */
.layout-product .details-pro .price-box .special-price { color: var(--brand-dk) !important; font-size: 28px !important; font-weight: 700 !important; }
.layout-product .details-pro .price-box .old-price { color: #9e9e9e !important; }
.layout-product .details-pro .price-box .save-price,
.layout-product .details-pro .price-box .save-price .product-price-save { color: #e53935 !important; }
.details-pro .sale-price { color: var(--brand-dk) !important; font-size: 22px !important; font-weight: 700 !important; }

/* Nút MUA NGAY */
.layout-product .button_actions .single_add_to_cart_button {
    background: var(--dark) !important;
    border-radius: 8px !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    transition: background .15s, transform .1s !important;
}
.layout-product .button_actions .single_add_to_cart_button:hover {
    background: var(--brand) !important;
    color: var(--dark) !important;
    transform: translateY(-1px) !important;
}

/* Nút THÊM VÀO GIỎ */
.layout-product .button_actions .btn_add_cart,
.layout-product .button_actions .add_to_cart {
    background: var(--brand-glow) !important;
    border: 1.5px solid rgba(230,175,46,.35) !important;
    border-radius: 8px !important;
    color: var(--brand-dk) !important;
    font-weight: 600 !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; }

/* Qty input */
.input_number_product { border: 1px solid var(--line) !important; border-radius: 6px !important; overflow: hidden; }
.input_number_product .btn_num:hover { background: var(--brand) !important; color: var(--dark) !important; }

/* Nút Zalo / Call */
.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 */
p.slogan {
    background: #FFF8EC !important;
    border-left: 3px solid var(--brand) !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important;
    color: #555 !important;
}
p.slogan strong { color: var(--brand-dk) !important; }

/* Otherversion cards */
.otherversion-card { border: 1px solid var(--line) !important; border-radius: 8px !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; }

/* Thông số kỹ thuật */
.thong-so { border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !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; border-radius: 0 !important; }
.thong-so .title i { color: var(--brand) !important; }
.thong-so .title b { color: var(--brand) !important; }
.thong-so .content li > strong,
.thong-so .content li span:first-child { color: #555 !important; font-weight: 600 !important; }

/* Block heading (video, thông tin SP, review) */
.block-default { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: none !important; margin-bottom: 16px !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; border-radius: 0 !important; }
.block-default .block-heading i { color: var(--brand) !important; }
.block-default .block-heading span { text-transform: uppercase !important; letter-spacing: .05em !important; }
.block-default .block-content { padding: 16px !important; }

/* Product related cards */
.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-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; }

/* 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 rgba(230,175,46,.3) !important; color: var(--brand-dk) !important; font-size: 12.5px !important; font-weight: 700 !important; padding: 10px 14px !important; }

/* Xem thêm button */
.btn--view-more a { color: var(--brand-dk) !important; font-weight: 600 !important; border: 1px solid rgba(230,175,46,.35) !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; }

/* ── CONTACT BAR ── */
.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 .timework { color: var(--dmuted) !important; font-size: 11.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; 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 .zalo, .contact-bar .facebook { color: var(--dtext) !important; font-size: 12px !important; font-weight: 600 !important; transition: color .15s !important; }
.contact-bar .zalo:hover, .contact-bar .facebook:hover { color: var(--brand) !important; background: rgba(255,255,255,.04) !important; }
.contact-bar .cart { background: var(--brand) !important; color: var(--dark) !important; font-weight: 700 !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; 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 { 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; }
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; }

/* 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; }
.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; }

/* ── PRODUCT LISTING / SIDEBAR ── */
.dqdt-sidebar .block { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.dqdt-sidebar .block .title a { color: var(--brand) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; }

/* Pagination */
.pagination .page-item .page-link { color: #444 !important; border-color: var(--line) !important; border-radius: 5px !important; transition: all .15s !important; }
.pagination .page-item .page-link:hover { border-color: var(--brand) !important; color: var(--brand-dk) !important; background: var(--brand-glow) !important; }
.pagination .page-item.active .page-link { background: var(--dark) !important; border-color: var(--dark) !important; color: #fff !important; }

/* ── MOBILE ── */
@media (max-width: 991px) {
    .contact-bar .timework { display: none !important; }
}
@media (max-width: 576px) {
    .contact-bar .hotline.first,
    .contact-bar .hotline.center { display: none !important; }
}


/* ================================================================
   TATEKSAFE B2B v3 — Search + Sidebar + Trang chủ
================================================================ */

/* ── SEARCH BAR FIX — hiển thị đúng trên nền tối ── */
.search-box { position: relative; width: 100%; }
.search-box > i.fa-search, .search-box > i.fas.fa-search {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--dmuted, #8B949E); font-size: 14px;
    pointer-events: none; z-index: 2;
}
.search-bar {
    border-radius: 6px !important;
    padding: 9px 14px 9px 36px !important;
    font-size: 13px !important;
    height: 40px !important;
}
/* Suggestions dropdown */
.suggestions-container {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    background: var(--dark2, #161B22) !important;
    border: 1px solid var(--dborder, #30363D) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 9999 !important;
    display: none;
    max-height: 380px !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.suggestions-container::-webkit-scrollbar { width: 3px }
.suggestions-container::-webkit-scrollbar-thumb { background: var(--brand, #E6AF2E); border-radius: 2px }
.suggestion-item {
    display: flex !important; align-items: center !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--dark4, #21262D) !important;
    transition: background .12s !important;
    text-decoration: none !important;
}
.suggestion-item:hover { background: rgba(230,175,46,.08) !important; }
.suggestion-item:last-child { border-bottom: none !important; }
.suggestion-item img {
    width: 44px !important; height: 44px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid var(--dark4, #21262D) !important;
    margin-right: 10px !important; flex-shrink: 0;
}
.suggestion-info { flex: 1; min-width: 0; }
.suggestion-name {
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--dtext, #E6EDF3) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; margin-bottom: 2px;
}
.suggestion-price {
    font-size: 12px !important;
    color: var(--brand, #E6AF2E) !important;
    font-weight: 700 !important;
}
.suggestion-no-result {
    padding: 12px 14px;
    color: var(--dmuted, #8B949E);
    font-size: 13px; text-align: center;
}

/* ── SIDEBAR DANH MỤC — Alibaba style ── */
.aside-content.aside-content-menu {
    background: #fff;
    border: 1px solid var(--line, #E8E9EC);
    border-radius: 8px;
    overflow: hidden;
}
.aside-content-menu .title-head-col {
    background: var(--dark2, #161B22);
    padding: 12px 16px;
    border-bottom: 2px solid var(--brand, #E6AF2E);
}
.aside-content-menu .title-head-col span {
    color: var(--brand, #E6AF2E) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
.aside-content-menu .nav-category {
    padding: 6px 0 !important;
}
.aside-content-menu .nav-category ul .nav-item {
    border-bottom: 1px solid #F4F5F7;
}
.aside-content-menu .nav-category ul .nav-item:last-child { border-bottom: none; }
.aside-content-menu .nav-category ul .nav-item .nav-link {
    font-size: 13px !important;
    color: #333 !important;
    padding: 9px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color .12s, background .12s !important;
}
.aside-content-menu .nav-category ul .nav-item .nav-link::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--line, #E8E9EC);
    flex-shrink: 0;
    transition: background .12s;
}
.aside-content-menu .nav-category ul .nav-item:hover > .nav-link,
.aside-content-menu .nav-category ul .nav-item.active > .nav-link {
    color: var(--brand-dk, #C9961A) !important;
    background: rgba(230,175,46,.06) !important;
}
.aside-content-menu .nav-category ul .nav-item:hover > .nav-link::before,
.aside-content-menu .nav-category ul .nav-item.active > .nav-link::before {
    background: var(--brand, #E6AF2E) !important;
}
/* Toggle icon */
.aside-content-menu .nav-category ul .nav-item .down_icon {
    right: 10px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 18px !important; height: 18px !important;
}
.aside-content-menu .nav-category ul .nav-item .down_icon:before,
.aside-content-menu .nav-category ul .nav-item .down_icon:after {
    background-color: var(--brand-dk, #C9961A) !important;
}
/* Subcategories */
.aside-content-menu .nav-category ul .menu_down {
    background: #FAFAFA;
    padding-left: 8px !important;
}
.aside-content-menu .nav-category ul .menu_down .nav-item .nav-link {
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    color: #555 !important;
}
.aside-content-menu .nav-category ul .menu_down .nav-item:hover > .nav-link {
    color: var(--brand-dk, #C9961A) !important;
}

/* ── ALIBABA-STYLE CATEGORY GRID (cho trang chủ) ── */
/* Block item by category — grid view */
.block-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 12px 0;
}
/* Category card Alibaba style */
.cat-ali-card {
    background: #fff;
    border: 1px solid var(--line, #E8E9EC);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column;
    text-decoration: none !important;
}
.cat-ali-card:hover {
    border-color: var(--brand-dk, #C9961A);
    box-shadow: 0 4px 14px rgba(180,130,10,.1);
}
.cat-ali-img {
    aspect-ratio: 4/3;
    background: #F8F9FB;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cat-ali-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.cat-ali-card:hover .cat-ali-img img { transform: scale(1.05); }
.cat-ali-info { padding: 10px 12px; }
.cat-ali-name {
    font-size: 13px; font-weight: 600;
    color: #1A1D23; line-height: 1.3;
    display: block;
}
.cat-ali-count {
    font-size: 11px; color: var(--dmuted, #8B949E);
    margin-top: 2px; display: block;
}

/* ── BLOCK ITEM TRANG CHỦ — giữ style2025 ── */
.product-box {
    background: #fff;
    border: 1px solid var(--line, #E8E9EC);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.product-box:hover {
    border-color: var(--brand-dk, #C9961A);
    box-shadow: 0 4px 14px rgba(180,130,10,.1);
}
.product-box .product-name a {
    color: #1A1D23 !important;
    font-size: 13px !important; font-weight: 600 !important;
    transition: color .12s !important;
}
.product-box .product-name a:hover { color: var(--brand-dk, #C9961A) !important; }
.product-box .price-box .special-price .product-price { color: var(--brand-dk, #C9961A) !important; font-weight: 700 !important; }
.product-box .price-box .old-price .product-price-old { color: #9e9e9e !important; text-decoration: line-through !important; font-size: 12px !important; }

/* Section title homepage — giống style2025 */
.title-index {
    font-size: 18px !important; font-weight: 700 !important;
    color: #1A1D23 !important;
    position: relative !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
.title-index::after {
    content: '' !important;
    position: absolute !important; bottom: 0 !important; left: 0 !important;
    width: 40px !important; height: 3px !important;
    background: var(--brand, #E6AF2E) !important;
    border-radius: 2px !important;
}
.title-index a { color: #1A1D23 !important; }
.title-index a b { color: var(--brand-dk, #C9961A) !important; }
.title-index a:hover { color: var(--brand-dk, #C9961A) !important; }

/* Swiper nav buttons — thay màu cam → vàng */
.swiper-button-next, .swiper-button-prev {
    color: var(--brand, #E6AF2E) !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: var(--brand, #E6AF2E) !important;
    font-size: 18px !important;
}
.swiper-pagination-bullet-active { background: var(--brand, #E6AF2E) !important; }

/* Badge hot/new */
.badge-bestseller, .badge-hot {
    background: var(--brand, #E6AF2E) !important;
    color: var(--dark, #0D1117) !important;
    font-weight: 700 !important; font-size: 10px !important;
    border-radius: 3px !important;
}
.badge-new { background: #378ADD !important; color: #fff !important; }


/* ================================================================
   RS-STYLE 3-COLUMN MEGA MENU
   Cột trái: danh mục chính (dark)
   Cột giữa: subcategory (hover từ cột trái)  
   Cột phải: sản phẩm/leaf (hover từ cột giữa)
================================================================ */

/* ── Wrapper card ── */
.card.rounded-0 {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

/* ── Nav bar ngang (top-level items) ── */
.card-body#mega-menu {
    background: var(--dark3, #1C2128) !important;
    border-bottom: 2px solid var(--brand, #E6AF2E) !important;
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

/* Nav item cấp 1 */
.nav-item-xiaomi {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    flex-shrink: 0 !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
}
.nav-item-xiaomi > a {
    color: var(--dtext, #E6EDF3) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color .15s, background .15s !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
}
.nav-item-xiaomi:hover > a,
.nav-item-xiaomi > a:hover {
    color: var(--brand, #E6AF2E) !important;
    border-bottom-color: var(--brand, #E6AF2E) !important;
    background: rgba(255,255,255,.05) !important;
}
.nav-item-xiaomi > a .fa-chevron-right,
.nav-item-xiaomi > a .fa-chevron-down {
    font-size: 9px !important;
    color: var(--dmuted2, #6B7785) !important;
}

/* ── MEGA DROPDOWN — RS 3-column layout ── */
.nav-item-xiaomi .mega-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    width: 680px !important;
    max-width: 90vw !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
    z-index: 9999 !important;
    padding: 0 !important;
    flex-direction: row !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
}
.nav-item-xiaomi:hover .mega-menu {
    display: flex !important;
}

/* Cột 1 — tiêu đề nhóm (mega-menu-column) */
.nav-item-xiaomi .mega-menu .mega-menu-column {
    background: var(--dark2, #161B22) !important;
    border-right: 1px solid var(--dborder, #30363D) !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 0 !important;
    flex: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header cột — tiêu đề danh mục */
.nav-item-xiaomi .mega-menu .mega-menu-title {
    background: var(--dark3, #1C2128) !important;
    color: var(--brand, #E6AF2E) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--dark4, #21262D) !important;
    flex-shrink: 0;
}

/* Links trong cột */
.nav-item-xiaomi .mega-menu .mega-menu-list {
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    flex: 1;
    overflow-y: auto;
}
.nav-item-xiaomi .mega-menu .mega-menu-list li {
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-list li:last-child { border-bottom: none !important; }

.nav-item-xiaomi .mega-menu .mega-menu-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    color: var(--dmuted, #8B949E) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: color .12s, background .12s !important;
    gap: 6px !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-list a::after {
    content: '›' !important;
    font-size: 12px !important;
    color: var(--dborder, #30363D) !important;
    flex-shrink: 0 !important;
    transition: color .12s !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-list a:hover {
    color: var(--dtext, #E6EDF3) !important;
    background: var(--dark3, #1C2128) !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-list a:hover::after {
    color: var(--brand, #E6AF2E) !important;
}

/* Active item — đang hover cấp 2 */
.nav-item-xiaomi .mega-menu .mega-menu-list li.rs-active > a {
    color: var(--dtext, #E6EDF3) !important;
    background: var(--dark4, #21262D) !important;
    border-left: 2px solid var(--brand, #E6AF2E) !important;
    padding-left: 12px !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-list li.rs-active > a::after {
    color: var(--brand, #E6AF2E) !important;
}

/* Cột 2+ — sub items — nền khác để phân biệt */
.nav-item-xiaomi .mega-menu .mega-menu-column:nth-child(2) {
    background: #1A1F26 !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:nth-child(2) .mega-menu-list a {
    color: var(--dmuted2, #6B7785) !important;
}

/* Cột cuối — leaf links — nền trắng */
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child {
    background: #fff !important;
    border-right: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-title {
    background: #F8F9FB !important;
    color: var(--brand-dk, #C9961A) !important;
    border-bottom-color: var(--line, #E8E9EC) !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list li {
    border-bottom-color: #F4F5F7 !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list a {
    color: #444 !important;
    font-size: 12.5px !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list a::before {
    content: '' !important;
    width: 4px !important; height: 4px !important;
    border-radius: 50% !important;
    background: #ddd !important;
    flex-shrink: 0 !important;
    transition: background .12s !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list a::after {
    display: none !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list a:hover {
    color: var(--brand-dk, #C9961A) !important;
    background: rgba(230,175,46,.05) !important;
}
.nav-item-xiaomi .mega-menu .mega-menu-column:last-child .mega-menu-list a:hover::before {
    background: var(--brand, #E6AF2E) !important;
}

/* Scrollbar cho cột danh mục */
.nav-item-xiaomi .mega-menu .mega-menu-list::-webkit-scrollbar { width: 3px }
.nav-item-xiaomi .mega-menu .mega-menu-list::-webkit-scrollbar-thumb {
    background: var(--dborder, #30363D); border-radius: 2px;
}

/* Mobile: dropdown đơn giản */
#mega-menu-mobile .mega-menu {
    display: none !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    max-width: none !important;
}
#mega-menu-mobile .mega-menu .mega-menu-column {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    border-right: none !important;
}
#mega-menu-mobile .mega-menu.show { display: flex !important; }