: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); 
            --swiper-theme-color: #c20000;
            --picmau5 : #af0516;
            --picmau8 : #4b3a3a;
        }
        * { 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: 1500px; margin: 0 auto; padding: 0 15px; }
        .containervh {min-height: 800px}
        .w-100 { width: 100%; } .h-100 { height: 100%; } .d-block { display: block; } .d-flex { display: flex; }
        .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; }
        .ms-auto { margin-left: auto; } .me-2 { margin-right: 0.5rem; } .ms-1 { margin-left: 0.25rem; }
        [class^="icon-"] { display: inline-block; border-radius: 50%; vertical-align: middle; font-size:20px }

        .dmicon, .dmiconhori { font-size:20px}

        /* DESKTOP HEADER & TOP BAR (> 950px) */
        .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;}
        .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; outline: none; }
        .search-box button { position: absolute; right: 0; top: 0; height: 100%; width: 50px; background: var(--primary); border: none; color: #fff; cursor: pointer; border-radius: 0 4px 4px 0; transition: background 0.3s var(--ease-out-expo); font-size: 20px;}
        .search-box button:hover { background: var(--primary-dark); }
        
        .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 > i { font-size: 24px; } /* Cỡ icon action bar */
        .action-item .hotline { color: var(--picmau13,#af0516); font-weight: bold; font-size: 16px; }
        .ichotline {color: var(--picmau13,#af0516); font-size:32px}
        .cart-icon { position: relative; }
        .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 }

        /* Sticky Nav Desktop */
        .main-nav-wrapper { background: var(--primary-dark); color: #fff; position: relative; z-index: 100; transition: background 0.3s; }
        .main-nav-wrapper.is-sticky { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); background: var(--primary); }
        .nav-inner { display: flex; height: var(--nav-h); }
        
        .cat-trigger { width: var(--sidebar-w); background: var(--primary); display: flex; align-items: center; padding: 0 15px; font-weight: bold; cursor: pointer; gap: 10px; position: relative; font-size: 16px;}
        .cat-trigger i.bx-menu { font-size: 22px; }
        
        .sticky-dropdown { 
            position: absolute; top: var(--nav-h); left: 0; width: 100%; background: #fff; color: var(--text-dark); 
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 1px solid var(--border); border-top: none; 
            opacity: 0; visibility: hidden; transform: translateY(15px); 
            transition: opacity 0.3s ease, transform 0.4s var(--ease-bounce), visibility 0.4s; 
            will-change: transform, opacity;
        }
        .nutmuangay { background: var(--gd002-second);}
        .nutmuangay:hover { background: color-mix(in srgb, var(--gd002-second) 80%, black); }
        .main-nav-wrapper.is-sticky .cat-trigger:hover .sticky-dropdown,
        body.is-inner .main-nav-wrapper .cat-trigger:hover .sticky-dropdown { 
            opacity: 1; visibility: visible; transform: translateY(0); 
        }
        
        .nav-links { display: flex; align-items: center; }
        .nav-links-ul { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; }
        .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: 260px; 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: opacity 0.3s ease, transform 0.4s var(--ease-bounce), visibility 0.4s; 
            will-change: transform, opacity;
        }
        .nav-item:hover > .nav-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        /* Ép thẻ li và a chiếm full 100% chiều ngang */
.nav-sub-menu li { position: relative; border-bottom: 1px solid #eee; display: block; width: 100%; height: auto; }
.nav-sub-menu li a { display: flex; align-items: center; padding: 10px 15px; width: 100%; color: var(--text-dark); text-transform: none; font-size: 14px; font-weight: 400; 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); }

        /* HERO SECTION & SLIDER */
        .hero-section { display: flex; align-items: stretch; background: #fff; width: 100%; height: 368px; }
        .hero-sidebar { width: var(--sidebar-w); border: 1px solid var(--border); background: #fff; position: relative; z-index: 99; flex-shrink: 0; border-color: color-mix(in srgb, var(--gd002-primary) 70%, white);  }
        
/* Tối ưu menu danh mục dãn kín chiều cao banner */
.desktop-menu { height: 100%; background: #fff; display: flex; flex-direction: column; }
.desktop-menu > li { position: relative; border-bottom: 1px solid var(--border); flex: 1; display: flex; flex-direction: column; }
.desktop-menu > li:last-child { border-bottom: none; }
.desktop-menu > li > a { flex: 1; display: flex; align-items: center; padding: 0 15px; width: 100%; font-size: 14px; transition: all 0.2s var(--ease-out-expo); color: var(--text-dark); font-weight: normal; }
.desktop-menu > li > a:hover { color: var(--primary); background: #f9f9f9; padding-left: 20px; }
.desktop-menu > li > a .arrow { font-size: 18px; color: var(--picmau8,#999); }

.item-view-more .link-view-more { color: #333; }
.item-view-more .link-view-more .arrow { color: #fff; }
.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: 250px; 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: opacity 0.3s ease, transform 0.4s var(--ease-bounce), visibility 0.4s;
    will-change: transform, opacity;
    display: block; /* Trả về block để sub-menu không bị kéo dãn lỗi */
}
.item-view-more > .sub-menu { top: auto; bottom: 0; min-height: auto; }
.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; }

/* Trả lại thiết lập cho menu con (sub-menu) để hiển thị bình thường */
.desktop-menu .sub-menu > li { position: relative; display: block; flex: none; height: auto; border-bottom: 1px solid #eee; }
.desktop-menu .sub-menu > li:last-child { border-bottom: none; }
.desktop-menu .sub-menu > li > a { display: flex; padding: 10px 15px; width: 100%; font-weight: normal; }
.desktop-menu .sub-menu > li > a i.dmicon { font-size:24px}
.desktop-menu .sub-menu > li > a i.arrow { font-size:20px}
/* FIX LỖI: Reset chiều cao cho menu cấp 3, 4... để không bị dãn dài bằng menu cha */
.desktop-menu .sub-menu .sub-menu {
    min-height: auto;
}

        .desktop-menu a:hover { color: var(--primary); background: #f9f9f9; padding-left: 20px; }
        .desktop-menu a .arrow { font-size: 18px; color:var(--picmau8, #999); }
        
        .item-view-more .link-view-more { color: #333; }
        .item-view-more .link-view-more .arrow { color: #fff; }
        .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: 300px; 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: opacity 0.3s ease, transform 0.4s var(--ease-bounce), visibility 0.4s;
            will-change: transform, opacity;
        }
        .item-view-more > .sub-menu { top: auto; bottom: 0; min-height: auto; }
        .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; }

        .hero-banner { flex: 1; overflow: hidden; position: relative; width: 100%; }
        .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 HEADER */
        .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); position: relative; z-index: 105; transition: box-shadow 0.3s; }
        .mobile-header.is-sticky { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        
        .m-logo { font-size: 20px; font-weight: 800; color: var(--picmau13); text-align: center; }
        .m-logo img { max-height:50px;}
        .m-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--picmau12,#FFF); transition: transform 0.2s; }
        .m-btn:active { transform: scale(0.9); }
        
        .mobile-search { display: none; padding: 10px 15px; background: #fff; border-bottom: 1px solid var(--border); }
        .mobile-search .search-box { margin: 0; max-width: 100%; }
        
        /* MOBILE SIDEBARS & MENUS */
        .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 var(--ease-out-expo); will-change: opacity; }
        .overlay.active { opacity: 1; visibility: visible; }
        .sidebar { position: fixed; top: 0; height: 100%; width: 85%; max-width: 320px; background: #fff; z-index: 1001; overflow-y: auto; transition: transform 0.45s var(--ease-out-expo); will-change: transform; }
        .sidebar-left { left: 0; transform: translateX(-100%); }
        .sidebar-right { right: 0; transform: translateX(100%); }
        .sidebar.active { transform: translateX(0); }
        
        .sidebar-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;}
        .sidebar-header h3 { font-size: 16px; margin: 0; }
        .close-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 5px; transition: transform 0.3s; }
        .close-btn:active { transform: rotate(90deg) scale(0.8); }
        
        .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; transition: background 0.2s; }
        .m-link:active { background: #f9f9f9; }
        .m-toggle { width: 50px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; border-left: 1px solid #f0f0f0; transition: background 0.2s; }
        .m-toggle:active { background: #f5f5f5; }
        .m-toggle .bx { transition: transform 0.4s var(--ease-bounce); }
        .m-toggle.open .bx { transform: rotate(180deg); }
        
        .m-sub-menu-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out-expo); background: #fcfcfc; }
        .m-sub-menu-wrap.open { grid-template-rows: 1fr; }
        .m-sub-menu { overflow: hidden; border-top: 1px solid transparent; }
        .m-sub-menu-wrap.open .m-sub-menu { border-top-color: #f0f0f0; }
        .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; }

        /* RESPONSIVE BREAKPOINTS */
        @media (max-width: 950px) {
            .top-bar, .main-nav-wrapper, .hero-sidebar { display: none; }
            .mobile-header, .mobile-search { display: flex; }
            .hero-section { height: auto; display: block; }
            .hero-banner { height: 200px; }
            body.m-sticky-active { padding-top: 60px; }
            .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 */
}

.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(--gd002-primary, #d0011b);
    color: var(--gd002-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;
}

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



/* =========================================================
   MEGA MENU STYLES
   ========================================================= */
.desktop-menu .mega-menu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 800px; /* Chiều rộng mega menu */
    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: opacity 0.3s ease, transform 0.4s var(--ease-bounce), visibility 0.4s;
    will-change: transform, opacity;
    padding: 10px;
    cursor: default;
    border-color: color-mix(in srgb, var(--gd002-primary) 70%, white);
}
.desktop-menu li.has-mega:hover > .mega-menu {
    opacity: 1; visibility: visible; transform: translateX(0);
}
/* Tránh để hiệu ứng padding-left: 20px của menu cấp 1 làm ảnh hưởng vào nội dung mega menu */
.desktop-menu li.has-mega:hover > a:not(.link-view-more) {
    background: #f9f9f9;
    color: var(--primary);
    padding-left: 20px;
}

/* --- MEGA MODE 1: BẢNG PHẲNG --- */
.mega-mode-1 .mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.mega-mode-1 .mega-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    /* Dùng cubic-bezier để tạo độ mượt 120Hz */
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.mega-mode-1 .mega-link:hover {
    color: var(--primary);
    background: #f5f5f5;
    padding-left: 20px; /* 15px mặc định + 5px hover */
}
.mega-mode-1 .mega-link i { font-size: 24px; }

/* --- 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;
    padding-left: 0; /* Khởi tạo padding */
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-transform: uppercase;
}
.mega-mode-2 .mega-title:hover {
    color: var(--primary);
    background: transparent !important; /* Đảm bảo không có nền */
    padding-left: 5px; /* Trôi mượt 5px */
}
.mega-mode-2 .mega-title i { font-size: 26px; }

.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: 4px 0;
    padding-left: 0; /* Khởi tạo padding */
    color: #555;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mega-mode-2 .mega-list li a:hover {
    color: var(--primary);
    background: transparent;
    padding-left: 5px; /* Trôi mượt 5px */
}

.mega-mode-2 .mega-list li a i {font-size:22px}