@font-face {
    font-family: 'GanhType';
    src: url('/assets/fonts/tamancac/Ganh Type - Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'GanhType', sans-serif !important;
}
/*MENU HAMBERGER*/
/* --- 1. Tối ưu hóa Reset và Font (GIỮ NGUYÊN) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.offcanvas-menu {
    font-family: 'GanhType', sans-serif !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- 2. Logic Offcanvas (GIỮ NGUYÊN) --- */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
    padding: 50px 20px 20px 20px;
    transition: right 0.35s ease-in-out;
    z-index: 999999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

    .offcanvas-menu.active {
        right: 0;
    }

    .offcanvas-menu .close-menu {
        background: none;
        border: none;
        font-size: 1.4rem;
        color: #333;
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10001;
    }

        .offcanvas-menu .close-menu:hover {
            color: #dc3545;
            transform: rotate(90deg);
        }

/* --- 3. Thanh tìm kiếm (GIỮ NGUYÊN) --- */
.menu-search-section {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

    .menu-search-section .search-wrapper {
        display: flex;
        border: 1px solid #ddd;
        border-radius: 25px;
        overflow: hidden;
        height: 45px;
    }

    .menu-search-section input[type="text"] {
        flex-grow: 1;
        padding: 0 15px;
        border: none;
        outline: none;
        font-size: 0.95rem;
    }

    .menu-search-section .search-btn {
        width: 50px;
        height: 100%;
        border: none;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .menu-search-section .search-btn:hover {
            background-color: #0056b3;
        }

/* --- 4. Danh sách Công cụ (ĐIỀU CHỈNH LẠI) --- */

/* Danh sách chính */
.tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tools-item {
    margin-bottom: 8px; /* Khoảng cách giữa các mục */
}

/* Các liên kết công cụ chung */
.tool-link {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .tool-link i {
        margin-right: 15px;
        font-size: 1.2rem;
        width: 25px;
        text-align: center;
        color: #555;
    }

    .tool-link:hover {
        background-color: #f0f0f0; /* Nền xám nhạt tinh tế */
        color: #007bff;
    }

        .tool-link:hover i {
            color: #007bff;
        }

/* --- 5. Tinh chỉnh cho mục NGƯỜI DÙNG ĐÃ ĐĂNG NHẬP (MỚI) --- */

/* Loại bỏ hiệu ứng hover nền cho mục người dùng để tập trung vào tên */
.user-signed-in {
    background: none !important;
    padding: 10px 0;
    cursor: default;
}

/* Thiết lập bố cục cho Avatar và Tên */
.user-display-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Avatar */
.user-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #007bff; /* Viền màu thương hiệu */
    margin-right: 12px;
    transition: transform 0.3s ease;
}

.user-display-wrapper:hover .user-avatar {
    transform: scale(1.05);
}

/* Chữ "Xin chào" */
.user-greeting-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: #555;
    font-weight: 400;
    font-size: 0.9rem;
}

/* Tên người dùng */
.user-name-display {
    color: #333;
    font-weight: 700;
    font-size: 1rem;
    transition: color 0.2s;
}

.user-display-wrapper:hover .user-name-display {
    color: #007bff;
}

/* Icon vẫy tay */
.wave-hand {
    margin-right: 4px;
    font-size: 1.1rem;
}

/* --- 6. Tùy chỉnh cho Giỏ hàng (GIỮ NGUYÊN/TINH CHỈNH CLASS) --- */

.tool-cart-link { /* Thay thế cho .cart-item */
    position: relative;
}

.cart-count {
    background-color: #ff4500;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 7px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 24px;
    text-align: center;
}
/*GIAO DIỆN CỦA SESSION USERNAME VÀ PICTURE ĐANG NHẬP*/
.user-info-item {
    position: relative; /* Rất quan trọng cho vị trí dropdown */
    margin-bottom: 0; /* Đảm bảo không có khoảng trống gây lỗi hover */
}

/* Ẩn liên kết chính khi đã có dropdown để tránh xung đột */
.user-signed-in {
    /* ... giữ nguyên các quy tắc cũ ... */
    cursor: pointer; /* Cho phép con trỏ chuột bấm vào */
}

/* --- Menu Dropdown Con (MỚI) --- */

.user-dropdown-menu {
    /* Đảm bảo menu con không chiếm toàn bộ chiều rộng (100% của LI mẹ có thể quá lớn) */
    width: 200px; /* <--- THAY ĐỔI: Đặt chiều rộng cố định hoặc phù hợp */
    /* Cấu hình vị trí tuyệt đối */
    position: absolute;
    top: 100%; /* Giữ nguyên: Đặt ngay dưới LI mẹ */
    right: 0; /* Giữ nguyên: Căn lề phải */
    /* Thiết lập hiển thị */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Thiết lập hiệu ứng (Giữ nguyên) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 10;
    padding: 10px 0;
}

    .user-dropdown-menu ul {
        list-style: none; /* Phải có để loại bỏ dấu chấm/gạch ngang mặc định */
        padding: 0;
        margin: 0;
    }

    .user-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
        font-size: 0.95rem;
        font-weight: 500;
        transition: background-color 0.2s, color 0.2s;
    }

        .user-dropdown-menu .dropdown-item i {
            margin-right: 10px;
            width: 20px;
            color: #007bff; /* Màu xanh thương hiệu cho icon */
        }

        .user-dropdown-menu .dropdown-item:hover {
            background-color: #f0f8ff; /* Nền xanh nhạt khi hover */
            color: #007bff;
        }

/* Quy tắc hiển thị khi hover */
/* Rê chuột vào LI cha sẽ hiển thị menu con */
.user-info-item:hover .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* --- SEARCH --- */
.header2-search {
    margin-top: 50px; /* để không che nút đóng */
    margin-bottom: 10px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #007bff;
    border-radius: 25px;
    overflow: hidden;
    background: #fff;
    height: 38px;
}

    .search-wrapper input {
        flex: 1;
        padding: 0 12px;
        border: none;
        font-size: 14px;
        outline: none;
        color: #333;
    }

        .search-wrapper input::placeholder {
            color: #888;
        }

    .search-wrapper .search-btn {
        background: #007bff;
        border: none;
        width: 40px;
        height: 100%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s ease;
    }

        .search-wrapper .search-btn:hover {
            background: #0056b3;
        }

/* --- MENU TOOLS --- */
.header-tools {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.header-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 0;
}

    .header-item a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #333;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        transition: color 0.3s ease;
        position: relative;
    }

        .header-item a:hover {
            color: #007bff;
        }

    .header-item i {
        font-size: 20px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

/* Badge tròn nằm góc icon, không đẩy text */
.item-count {
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    line-height: 1;
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 768px) {
    .offcanvas-menu {
        width: 250px;
    }

        .offcanvas-menu .close-menu {
            right: 10px;
        }
    
}

/*CHINH menu CHO LAYOUT*/
.header-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/*CHỈNH KICH THUOC menu KHI CO GIAN*/
/* Ensure mobile header is shown when zoomed excessively */
@media (max-width: 1200px) {
    .header-section {
        display: none !important; /* Hide desktop header */
    }

    .mobile-header {
        display: block !important; /* Show mobile header */
    }
}
/* Ensure submenus stay within container */
.sub-menu, .mega-menu {
    max-width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling if needed */
}
/* ================== PHONE + TABLET (<=1200px) ================== */
@media (max-width: 1200px) {

    /* Panel offcanvas bám trái – cuộn trong .inner, nền bị khoá */
    #offcanvas-mobile-menu {
        position: fixed;
        inset: 0 auto 0 0;
        width: 300px;
        background: #fff;
        box-shadow: 3px 0 8px rgba(0,0,0,.18);
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 10000;
        overflow-x: hidden;
    }

    body.offcanvas-open #offcanvas-mobile-menu {
        transform: translateX(0);
    }

    body.offcanvas-open {
        overflow: hidden;
    }

    #offcanvas-mobile-menu .inner {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        #offcanvas-mobile-menu .inner::-webkit-scrollbar {
            display: none;
        }

    /* Menu chữ – giống mobile */
    #offcanvas-mobile-menu .offcanvas-menu {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        display: block;
        overflow: visible; /* để submenu bung ra, không sinh thanh cuộn riêng */
        overflow-x: hidden;
    }

        #offcanvas-mobile-menu .offcanvas-menu > ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            #offcanvas-mobile-menu .offcanvas-menu > ul > li {
                margin: 8px 0;
            }

        #offcanvas-mobile-menu .offcanvas-menu a {
            display: block;
            padding: 6px 0;
            color: #2b2b2b;
            text-decoration: none;
        }

        /* Submenu: đóng mặc định – chỉ mở khi có state (web đã add class/open/aria) */
        #offcanvas-mobile-menu .offcanvas-menu .sub-menu {
            margin: 6px 0 0 14px;
            padding: 0;
            list-style: none;
            display: none;
        }

        #offcanvas-mobile-menu .offcanvas-menu li.open > .sub-menu,
        #offcanvas-mobile-menu .offcanvas-menu li.active > .sub-menu,
        #offcanvas-mobile-menu .offcanvas-menu li.expanded > .sub-menu,
        #offcanvas-mobile-menu .offcanvas-menu li[aria-expanded="true"] > .sub-menu {
            display: block;
        }

    /* 3 icon (user – wishlist – cart) trong offcanvas: LUÔN 1 hàng */
    #offcanvas-mobile-menu .offcanvas-buttons .header-tools {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin: 14px 0;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

        #offcanvas-mobile-menu .offcanvas-buttons .header-tools > div {
            flex: 0 0 auto;
            width: auto;
        }

            #offcanvas-mobile-menu .offcanvas-buttons .header-tools > div > a {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                background: transparent;
                width: 32px;
                height: 32px;
                line-height: 1;
            }

        #offcanvas-mobile-menu .offcanvas-buttons .header-tools i {
            font-size: 20px;
            line-height: 1;
            display: block;
            color: #1d1d1d;
        }
    /* Badge dính góc icon */
    #offcanvas-mobile-menu .header-wishlist > a > span,
    #offcanvas-mobile-menu .header-cart > a > .cart-count {
        position: absolute;
        top: -3px;
        right: 0px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #e86d61;
        color: #fff;
        font-weight: 700;
        font-size: 11px;
        line-height: 16px;
        text-align: center;
    }

        #offcanvas-mobile-menu .header-wishlist > a > span:empty,
        #offcanvas-mobile-menu .header-cart > a > .cart-count:empty {
            display: none;
        }

    /* Header (ngoài cùng) từ 768–1200: nhóm icon phải cũng nằm 1 hàng */
    .mobile-header .header-tools {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

        .mobile-header .header-tools > div {
            flex: 0 0 auto;
            width: auto;
            margin: 0;
        }

    .mobile-header .header-cart a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        line-height: 1;
        padding: 0;
        white-space: nowrap;
    }

        .mobile-header .header-cart a i {
            font-size: 20px;
            line-height: 1;
            display: block;
        }

    .mobile-header .header-cart .cart-count {
        position: absolute;
        top: -6px;
        right: -3px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #e86d61;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
    }

    .mobile-header .mobile-menu-toggle {
        display: inline-flex;
        width: auto;
    }

        .mobile-header .mobile-menu-toggle a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            line-height: 1;
        }

        .mobile-header .mobile-menu-toggle svg {
            width: 36px;
            height: 36px;
            display: block;
        }
}
/* ======== DESKTOP ≥1200px — giữ 1 hàng, hiện burger khi chật ======== */
@media (min-width:1200px) {

    /* 1) Hàng header luôn 1 dòng, không cắt nội dung */
    .header-section,
    .header-section .section,
    .header-section .container,
    .header-section .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow: visible; 
        min-width: 0; 
    }

        /* 2) Logo rõ nét, không scale nhòe */
        .header-section .header-logo {
            flex: 0 0 auto;
        }

            .header-section .header-logo img {
                display: block;
                max-height: 60px;
                height: auto;
                object-fit: contain;
                width: auto;
            }
        .header-section .site-main-menu,
        .header-section nav.header-nav {
            flex: 1 1 auto;
            min-width: 0;
            overflow-x: auto; /* cuộn ngang khi thiếu chỗ */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

            .header-section .site-main-menu::-webkit-scrollbar {
                display: none;
            }

            .header-section .site-main-menu > ul {
                display: flex;
                flex-wrap: nowrap;
                white-space: nowrap; /* đảm bảo 1 dòng */
                gap: clamp(10px, 1vw, 18px);
                margin: 0;
                padding: 0;
                list-style: none;
            }

                .header-section .site-main-menu > ul > li {
                    flex: 0 0 auto;
                }

                    .header-section .site-main-menu > ul > li > a {
                        padding: 10px 10px;
                        font-size: clamp(14px, 1.0vw, 16px);
                        line-height: 1.2;
                    }

        /* 4) Cụm icon/burger bên phải */
        .header-section .header-tools {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .header-section .mobile-menu-toggle {
            /* Mặc định ẩn ở desktop; sẽ bật trong khoảng 1200–1599 ở dưới */
            display: none;
            align-items: center;
            width: auto;
            z-index: 5; /* tránh bị che */
        }

            .header-section .mobile-menu-toggle a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                padding: 0;
                line-height: 1;
            }

            .header-section .mobile-menu-toggle svg {
                width: 24px;
                height: 24px;
                display: block;
            }
}
/* === 1200–1388px: bó gọn spacing + kéo burger sát menu === */
@media (min-width:1200px) and (max-width:1388px) {

    .header-section .mobile-menu-toggle {
        display: inline-flex !important;
        margin-left: -6px; 
    }

    .header-section .site-main-menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
/*        padding-right: 5px; */
        min-width: 0;
    }

        .header-section .site-main-menu::-webkit-scrollbar {
            display: none;
        }

        .header-section .site-main-menu > ul {
            gap: 8px;
            white-space: nowrap;
        }

            .header-section .site-main-menu > ul > li > a {
                padding: 8px 6px;
                font-size: 13.5px;
                line-height: 1.25;
                letter-spacing: 0;
            }

    .header-section .header-logo img {
        max-height: 100px;
    }

    .header-section .header-tools {
        gap: 6px; 
        flex: 0 0 auto;
    }
}

/* === 1200–1599px: KHÔNG đủ chỗ → hiện burger, menu vẫn 1 hàng & cuộn ngang === */
@media (min-width:1388px) and (max-width:1599px) {
    .header-section .mobile-menu-toggle {
        display: inline-flex !important;
    }

    /* thu nhẹ spacing/size để đỡ chật */
    .header-section .site-main-menu > ul {
        gap: clamp(8px, .9vw, 14px);
    }

        .header-section .site-main-menu > ul > li > a {
            padding: 8px 8px;
            font-size: clamp(13px, .95vw, 15px);
        }
    .header-section .header-logo img {
        max-height: 60px;
    }
    .header-section .site-main-menu {
        padding-right: 18px; 
    }
}

/* === ≥1600px: đủ chỗ → ẩn burger, menu không cần cuộn === */
@media (min-width:1600px) {
    .header-section .mobile-menu-toggle {
        display: none !important;
    }

    .header-section .site-main-menu,
    .header-section nav.header-nav {
        overflow: visible;
    }
    .header-section .header-logo img {
        max-height: 120px;
    }
}
@media (min-width:1920px) {
    .header-section .container {
        max-width: 1720px;
    }

    .header-section .site-main-menu > ul > li > a {
        font-size: 17px;
    }
    .header-section .site-main-menu {
        padding-right: 40px;
    }
}



/* ============== Tối ưu riêng cho điện thoại nhỏ (<768px) ============== */
/* Nếu muốn icon nhỏ hơn chút ở màn nhỏ, override nhẹ */
@media (max-width: 767.98px) {
    #offcanvas-mobile-menu .offcanvas-buttons .header-tools > div > a {
        width: 28px;
        height: 28px;
    }

    #offcanvas-mobile-menu .offcanvas-buttons .header-tools i {
        font-size: 18px;
    }
    .header-section .header-logo img {
        max-height: 90px;
    }
}



/*THÊM STYLE CHO PHẦN BẮT ĐẦU HÀNH TRÌNH TRI THỨC CỦA BẠN TẠI ĐÂY! */

/* LINK (a) - Phần chữ */
.link_header a {

    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 10px;

    background-color: #EDECE4;
    color: #4B3832;

    font-size: 1.2em; 
    font-weight: 700;
    font-family: 'GanhType', sans-serif !important;
    letter-spacing: 1px; 

    text-shadow: 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.35);
    box-shadow: 2px 2px 0px 0px rgba(193, 170, 136, 0.6);
    /* Chuyển động mượt mà */
    transition: all 0.2s ease-in-out;
}

.link_header a:hover {
    background-color: #F8F4E6; 
    color: #382D24;
    border-color: #8B6546; 

    transform: translate(2px, 2px);
    /* Bóng đổ thay đổi để mô phỏng sự dịch chuyển */
    box-shadow: 2px 2px 0px 0px #C1AA88;
}

/* HIỆU ỨNG KHI NHẤN GIỮ (ACTIVE) */
.link_header a:active {
    /* Đảm bảo trạng thái Active khớp với Hover (đã nhấn xuống) */
    transform: translate(4px, 4px); /* Nhấn sâu hơn */
    box-shadow: 0px 0px 0px 0px #C1AA88; /* Loại bỏ bóng đổ khi nút đã chìm xuống */
}