:root {
            --primary: #c20000; 
            --primary-dark: color-mix(in srgb, var(--primary) 80%, black); 
            --secondary: #ffcc00;
            --text-dark: #333; --text-light: #666; --bg-gray: #f5f5f5; --border: #e0e0e0;
            --danger-color: #b6007f;
            --header-h: 70px; --nav-h: 45px; --sidebar-w: 260px;
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); 
        }
        * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: var(--bg-gray); color: var(--text-dark); overflow-x: hidden; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        input, button { outline: none; border: none; font-family: inherit; }
        .container { max-width: 1600px; margin: 0 auto; padding: 0 15px; }
        .containervh { min-height: 800px; padding-bottom: 50px; }
        .w-100 { width: 100%; } .h-100 { height: 100%; } .d-flex { display: flex; } .d-block { display: block; }
        .ms-auto { margin-left: auto; } .me-2 { margin-right: 0.5rem; } .ms-1 { margin-left: 0.25rem; }

        /* HEADER DESKTOP */
        .top-bar { background: var(--picmau14,#fff);}
        .top-bar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
        .logo { font-size: 24px; font-weight: 800; color: var(--picmau13,#af0516); text-transform: uppercase; }
        .logo img { max-height: 60px; }
        .m-logo img {    max-height: 50px;}
        .m-logo a {display: inline-block;}
        .search-box { flex: 1; max-width: 500px; margin: 0 30px; position: relative; }
        .search-box input { width: 100%; height: 40px; border: 1px solid var(--primary); border-radius: 4px; padding: 0 15px; }
        .search-box button { position: absolute; right: 0; top: 0; height: 100%; width: 50px; background: var(--primary); color: #fff; cursor: pointer; border-radius: 0 4px 4px 0; font-size: 20px;}
        
        /* CẬP NHẬT CSS CHO TOP-ACTIONS */
        .top-actions { display: flex; align-items: center; gap: 20px; }
        .action-item { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--picmau12,#4b3a3a);  }
        .action-item a { display: flex; align-items: center; gap: 8px; color: inherit; } /* Fix thẻ a bọc ngoài bị vỡ Flex */
        .action-item i { font-size: 24px; color: var(--picmau12,#4b3a3a); } /* Nhắm đúng icon */
        .action-item .hotline { color: var(--picmau13,#af0516); font-weight: bold; font-size: 16px; }
        .cart-badge { position: absolute; top: -16px; right: -8px; background: var(--danger-color); color: #FFF; font-size: 12px; font-weight: bold; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: solid 1px #FFF }

        /* MENU NGANG */
        .main-nav-wrapper { background: var(--primary); color: #fff; position: relative; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .nav-inner { display: flex; height: var(--nav-h); align-items: center; }
        .nav-links-ul { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; width: 100%; }
        .nav-item { height: 100%; position: relative; display: flex; align-items: center; }
        .nav-item > a { padding: 0 20px; text-transform: uppercase; font-size: 14px; font-weight: 600; display: flex; align-items: center; height: 100%; transition: background 0.2s; color: #fff; }
        .nav-item:hover > a { background: rgba(0,0,0,0.1); }
        .nav-sub-menu { 
            position: absolute; top: 100%; left: 0; background: #fff; min-width: 240px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
            border: 1px solid var(--border); z-index: 105; opacity: 0; visibility: hidden; transform: translateY(15px); transition: 0.3s; 
        }
        .nav-item:hover > .nav-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .nav-sub-menu li { position: relative; border-bottom: 1px solid #eee; display: block; width: 100%; }
        .nav-sub-menu li a { display: flex; align-items: center; padding: 12px 15px; width: 100%; color: var(--text-dark); font-size: 14px; transition: 0.2s; }
        .nav-sub-menu li a:hover { color: var(--primary); background: #f9f9f9; padding-left: 20px; }
        .nav-sub-menu .nav-sub-menu { top: 0; left: 100%; transform: translateX(15px); }
        .nav-sub-menu li:hover > .nav-sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }

        /* 3 CỘT FLEXBOX DESKTOP */
        .layout-005-wrapper { display: flex; gap: 15px; margin-top: 15px; align-items: flex-start; }
        .layout-005-left { flex: 0 0 280px;  }
        .layout-005-center { flex: 1; min-width: 0; }
        .layout-005-right { flex: 0 0 280px; display:none }

        /* STYLE SIDEBAR BLOCK */
        .sidebar-block { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: visible; }
        .sidebar-block-title { background: var(--primary); color: #fff; padding: 12px 15px; font-size: 15px; font-weight: 600; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 8px; border-radius: 8px 8px 0 0;}
        .sidebar-block-content { padding: 15px; }

        /* ================== MENU DỌC (STYLE 003 CHUẨN) ================== */
        .desktop-menu { display: flex; flex-direction: column; padding: 0; margin: 0;}
        .desktop-menu > li { position: relative; border-bottom: 1px solid var(--border); }
        .desktop-menu > li:last-child { border-bottom: none; }
        .desktop-menu > li > a { display: flex; align-items: center; padding: 12px 15px; width: 100%; font-size: 14px; transition: 0.2s var(--ease-out-expo); color: var(--text-dark); }
        .desktop-menu > li > a:hover { color: var(--primary); background: #f9f9f9; padding-left: 20px; }
        .desktop-menu > li > a .arrow { font-size: 18px; color: #999; margin-left: auto;} /* Mũi tên sát phải */

        .item-view-more .link-view-more { color: #333; }
        .item-view-more:hover .link-view-more { background: #5a5948; color: #fff; padding-left: 15px; }

        .desktop-menu .sub-menu { 
            position: absolute; left: 100%; top: 0; width: 290px; background: #fff; min-height: auto; 
            border: 1px solid var(--border); box-shadow: 3px 3px 10px rgba(0,0,0,0.05); z-index: 100;
            opacity: 0; visibility: hidden; transform: translateX(15px); transition: 0.3s;
        }
        .desktop-menu li.has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }
        .desktop-menu li.has-children:hover > a:not(.link-view-more) { background: #f9f9f9; color: var(--primary); padding-left: 20px; }
        .desktop-menu .sub-menu > li { border-bottom: 1px solid #eee; }
        .desktop-menu .sub-menu > li > a { display: flex; padding: 10px 15px; width: 100%; font-weight: normal; }
        .desktop-menu .sub-menu > li > a i.dmicon, .mega-menu .mega-grid .mega-link i, .mega-menu .mega-grid .mega-column i {font-size:24px !important}
        .mega-menu .mega-grid .mega-column .mega-title i {font-size:26px !important;}
        /* MEGA MENU STYLE */
        .desktop-menu .mega-menu {
            position: absolute; left: 100%; top: 0; width: 800px; background: #fff; min-height: 100%;
            border: 1px solid var(--border); box-shadow: 3px 3px 10px rgba(0,0,0,0.05); z-index: 100;
            opacity: 0; visibility: hidden; transform: translateX(15px); transition: 0.3s; padding: 15px;
        }
        .desktop-menu li.has-mega:hover > .mega-menu { opacity: 1; visibility: visible; transform: translateX(0); }
        
        /* MEGA MODE 1: BẢNG PHẲNG */
        .mega-mode-1 .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .mega-mode-1 .mega-link { display: flex; align-items: center; padding: 10px; color: #444; font-size: 14px; font-weight: 500; border-radius: 6px; transition: 0.2s; }
        .mega-mode-1 .mega-link:hover { color: var(--primary); background: #f5f5f5; padding-left: 15px; }

        /* MEGA MODE 2: CÓ CHIA CỘT TIÊU ĐỀ */
        .mega-mode-2 .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .mega-mode-2 .mega-column { display: flex; flex-direction: column; }
        .mega-mode-2 .mega-title { font-weight: 700; font-size: 15px; color: #222; display: flex; align-items: center; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; text-transform: uppercase; transition: 0.2s; }
        .mega-mode-2 .mega-title:hover { color: var(--primary); padding-left: 5px; }
        .mega-mode-2 .mega-list { list-style: none; padding: 0; margin: 0; }
        .mega-mode-2 .mega-list li a { display: flex; align-items: center; padding: 5px 0; color: #555; font-size: 14px; transition: 0.2s; }
        .mega-mode-2 .mega-list li a:hover { color: var(--primary); padding-left: 5px; }

        /* SẢN PHẨM / TIN TỨC MINI */
        .mini-item { display: flex; gap: 12px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 15px; }
        .mini-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
        .mini-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
        .mini-item-info h4 { font-size: 13px; margin: 0 0 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500;}
        .mini-item-info h4 a { transition: 0.2s; }
        .mini-item-info h4 a:hover { color: var(--primary); }
        .mini-item-price { color: var(--danger-color); font-weight: bold; font-size: 14px; }
        .mini-item-date { color: #888; font-size: 12px; display: flex; align-items: center; gap: 4px;}

        /* CENTER CONTENT */
        .hero-banner { border-radius: 8px; overflow: hidden; height: 350px; position: relative; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .hero-banner img { width: 100%; height: 100%; object-fit: cover; }
        .swiper-button-next, .swiper-button-prev { background-color: rgba(0, 0, 0, 0.4); color: #fff !important; width: 40px !important; height: 40px !important; border-radius: 50%; transition: background 0.3s; }
        .swiper-button-next:hover, .swiper-button-prev:hover { background-color: var(--primary); }
        .swiper-button-next::after, .swiper-button-prev::after { font-size: 16px !important; font-weight: bold; }

        /* ================== MOBILE & SIDEBAR OVERLAYS ================== */
        .mobile-header { display: none; background:var(--picmau14,#FFF); height: 60px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--border); }
        /* Lớp CSS được thêm vào khi cuộn trang */
        .mobile-header.is-sticky { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            z-index: 999;
        }


        body.m-sticky-active {
            padding-top: 60px; 
        }
        .m-logo { font-size: 20px; font-weight: 800; color: var(--picmau13); text-align: center; flex: 1; }
        .m-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; font-size: 26px; cursor: pointer; color: var(--picmau12,#FFF); }
        .mobile-search { display: none; padding: 10px 15px; background: #fff; border-bottom: 1px solid var(--border); }
        .mobile-search input { width: 100%; padding: 10px; border: 1px solid var(--primary); border-radius: 4px; }

        /* Overlay & Canvas Sidebar Mobile */
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: 0.4s; }
        .overlay.active { opacity: 1; visibility: visible; }
        .sidebar-mobile { position: fixed; top: 0; height: 100%; width: 85%; max-width: 320px; background: #fff; z-index: 1001; overflow-y: auto; transition: transform 0.4s var(--ease-out-expo); will-change: transform; }
        
        /* 2 Sidebars Trái - Phải */
        .sidebar-left { left: 0; transform: translateX(-100%); }
        .sidebar-right { right: 0; transform: translateX(100%); }
        .sidebar-mobile.active { transform: translateX(0); }
        
        .sm-header { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--border); background: var(--primary); color: #fff; min-height: 50px;}
        .sm-header h3 { font-size: 15px; margin: 0; text-transform: uppercase;}
        .close-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

        /* Style Menu Đa cấp trong Mobile Sidebar */
        .m-menu li { border-bottom: 1px solid #f0f0f0; }
        .m-menu-item { display: flex; align-items: center; justify-content: space-between; }
        .m-link { flex: 1; padding: 12px 15px; font-size: 15px; display: flex; align-items: center; }
        .m-toggle { width: 50px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; border-left: 1px solid #f0f0f0; }
        .m-toggle i { transition: transform 0.3s; }
        .m-toggle.open i { transform: rotate(180deg); }
        .m-sub-menu-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s; background: #fcfcfc; }
        .m-sub-menu-wrap.open { grid-template-rows: 1fr; }
        .m-sub-menu { overflow: hidden; }
        .m-sub-menu .m-link { padding-left: 30px; font-size: 14px; color: #555; }
        .m-sub-menu .m-sub-menu-wrap .m-link { padding-left: 45px; }

        /* =============== XỬ LÝ RESPONSIVE THỨ TỰ CỘT LÊN MOBILE =============== */
        @media (max-width: 950px) {
            .top-bar, .main-nav-wrapper { display: none; }
            .mobile-header, .mobile-search { display: flex; }
            
            /* Ẩn hoàn toàn cột trái trên mobile */
            .layout-005-left { display: none; }
            
            /* Xếp dọc cột giữa và cột phải */
            .layout-005-wrapper { display: flex; flex-direction: column; }
            .layout-005-center, .layout-005-right { width: 100%; flex: none; }
            .cart-badge {top:-8px}
        }

        /* Đảm bảo thẻ <a> trong menu cấp 2 sử dụng Flexbox để căn giữa nội dung */
.desktop-menu .sub-menu > li > a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    width: 100%;
    font-weight: normal;
}

/* Đảm bảo mũi tên nằm sát mép phải và được căn giữa theo chiều dọc */
.desktop-menu .sub-menu > li > a .arrow {
    margin-left: auto;
    font-size: 18px; /* Tùy chỉnh kích thước mũi tên nếu cần */
    color: #999;     /* Tùy chỉnh màu sắc mũi tên nếu cần */
}

    .headtitle { 
    background: linear-gradient(to right, var(--primary), var(--picmau5)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;}
    .headgach {background: linear-gradient(to right, var(--picmau5), var(--bg-gray)) !important; }
    
:root {
        --gd002-primary: #d0011b;
        --gd002-second: #ff9800; 
    }

        .swal2-container {
            z-index: 99999 !important;
        }

.gd002_pagination-container {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* MODE 1: List số */
.gd002_pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
    flex-wrap: wrap;
}

.gd002_page-item {
    margin: 0;
}

.gd002_page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 5px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.gd002_page-link:hover {
    border-color: var(-primary, #d0011b);
    color: var(-primary, #d0011b);
}

.gd002_page-item.active .gd002_page-link {
    background-color: var(--primary, #d0011b);
    color: #fff;
    border-color: var(--primary, #d0011b);
    cursor: default;
}

.gd002_page-item.disabled .gd002_page-link {
    color: #ccc;
    pointer-events: none;
    border-color: #eee;
}


.gd002_breadcrumb-block {
    background-color: #fff;       /* Nền trắng nổi bật trên nền xám của main */
    padding: 12px 20px;           /* Khoảng cách đệm */
    border-radius: 8px;           /* Bo góc */
    margin-bottom: 20px;          /* Cách phần detail bên dưới */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Đổ bóng nhẹ cho đẹp */
}

.gd002_breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;              /* Xuống dòng khi xem trên mobile nhỏ */
    gap: 10px;                    /* Khoảng cách giữa các mục */
    list-style: none;
    padding: 0;
    margin: 0;
}

.gd002_breadcrumb-list li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;                  /* Màu mặc định cho dấu mũi tên và text tĩnh */
}

.gd002_breadcrumb-list li a {
    color: #333;                  /* Màu link đậm hơn */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.2s;
}

.gd002_breadcrumb-list li a:hover {
    color: var(--gd002-primary);  /* Hover chuyển màu đỏ chủ đạo */
}

.gd002_breadcrumb-list li.current {
    color: #777;                  /* Màu của trang hiện tại nhạt hơn chút */
    font-weight: normal;
    /* Giới hạn độ dài text trên mobile nếu tên quá dài */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; 
   /* white-space: nowrap; */
}

/* Icon mũi tên nhỏ lại */
.gd002_breadcrumb-list i.ti-chevron-right {
    font-size: 12px;
}

/* Responsive: Trên mobile < 480px thì ẩn bớt icon Home hoặc thu nhỏ font */
@media (max-width: 480px) {
    .gd002_breadcrumb-block { padding: 10px 15px; }
    .gd002_breadcrumb-list { font-size: 13px; gap: 5px; }
    .gd002_breadcrumb-list li.current { 
        max-width: 100%; /* Cắt bớt tên sản phẩm nếu quá dài trên mobile */
    }
}