/* ------------------- CSS cho navbar ------------------- */
.navbar {
    background-color: #C58A66;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0; /* Xóa padding dọc để đảm bảo chiều cao chính xác */
    height: 60px; /* Đặt chiều cao cố định cho navbar */
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 200;
}

    /* Đảm bảo left-menu và contact-info hiển thị trên cùng một dòng */
    .navbar .left-menu,
    .navbar .contact-info {
        display: flex;
        align-items: center;
    }

    /* Căn chỉnh vị trí bên trái */
    .navbar .left-menu {
        margin-left: 15%;
    }

    /* Căn chỉnh vị trí contact-info bên phải */
    .navbar .contact-info {
        margin-right: 15%;
        color: white;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
    }

    .navbar a {
        color: white;
        text-align: center;
        padding: 0 16px; /* Đặt padding ngang, không có padding dọc */
        text-decoration: none;
    }

        .navbar a:hover {
            color: #F2F2F2;
            font-weight: 400;
        }

/* Định dạng cho ảnh */
.contact-info img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}
/* CSS cho thanh thông tin */
.info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white; /* Màu nền cho thanh thông tin */
    padding: 0 0; /* Padding cho thanh thông tin */
    font-size: 14px;
    font-family: 'Roboto', sans-serif; /* Font chữ */
    border-bottom: 1px solid #E5E5E5; /* Đường viền dưới thanh thông tin */
    height: 42px;
}

    .info-bar .left-menu {
        margin-left: 15%;
    }

    .info-bar .right-menu {
        margin-right: 15%;
    }

.info-icon {
    width: 15px; /* Chiều rộng của hình ảnh */
    height: 18px; /* Chiều cao của hình ảnh */
    margin-right: 10px; /* Khoảng cách giữa hình ảnh và văn bản */
}

.info-bar span {
    flex: 1; /* Để văn bản chiếm không gian còn lại */
    color: #666666; /* Màu chữ */
}

.login-register {
    position: relative;
}

    .login-register a {
        color: #666666; /* Màu chữ cho liên kết */
        text-decoration: none; /* Xóa gạch chân */
        margin-left: 4px; /* Khoảng cách giữa các liên kết */
    }

    .login-register .user-image {
        width: 24px; /* Chiều rộng hình ảnh */
        height: 24px; /* Chiều cao hình ảnh */
        background-image: url('Image/User_none.svg'); /* Đặt hình ảnh mặc định */
        background-size: cover; /* Làm đầy phần tử */
        background-position: center; /* Căn giữa hình ảnh */
        margin-left: 8px; /* Khoảng cách giữa hình ảnh và văn bản */
        transition: background-image 0.3s ease;
    }

    .login-register a:hover .user-image {
        background-image: url('Image/User_hover.svg'); /* Hình ảnh thay đổi khi hover */
    }

    .login-register a:hover {
        text-decoration: underline; /* Hiệu ứng hover cho liên kết */
    }

.dropdown-menu {
    display: none; /* Ẩn menu ban đầu */
    position: absolute;
    padding-top: 10px;
    top: 100%;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    width: 150px;
    z-index: 1;
}

.user-link {
    cursor: pointer;
}

.dropdown-menu a {
    display: block;
    padding: 8px;
    color: #333;
    text-decoration: none;
}

    .dropdown-menu a:hover {
        background-color: #f2f2f2;
        text-decoration: none;
    }

/* Hiển thị menu khi hover vào tên người dùng */
.login-register:hover .dropdown-menu {
    display: block;
}

.header_search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white; /* Màu nền cho thanh thông tin */
    padding: 0 0; /* Padding cho thanh thông tin */
    font-size: 14px;
    font-family: 'Roboto', sans-serif; /* Font chữ */
    border-bottom: 1px solid #E5E5E5; /* Đường viền dưới thanh thông tin */
    height: 92px;
}

    .header_search .logo img {
        padding: 18px;
    }

    .header_search .searchbar {
        flex: 1;
        background-color: white;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #E5E5E5;
        margin-left: 10%;
        margin-right: 10%;
        display: flex;
        align-items: center;
    }

        .header_search .searchbar .input {
            width: 100%;
            height: 80%;
            border: none;
            outline: none;
            font-size: 15px;
        }

        .header_search .searchbar .search-button {
            height: 100%;
            width: 115px;
            background-color: #C58A66;
            color: white;
            border: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            padding: 8px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 8px; /* tạo khoảng cách giữa input và button */
        }

    .header_search .cart {
        display: flex;
        background-color: white;
        height: 45px;
        margin-right: 15%;
        justify-content: flex-end;
    }

        .header_search .cart p {
            margin: 3px;
        }

        .header_search .cart img {
            display: flex;
            justify-content: center;
        }

        .header_search .cart .number {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #C58A66;
            border: solid 1px white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/*-------------PHẦN TRANG CHỦ------------------*/

.breadcrumbs {
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    align-items: center;
    font-family: 'Roboto', sans-serif; /* Font chữ */
    border-bottom: 1px solid #E5E5E5; /* Đường viền dưới thanh thông tin */
    height: 68px;
    font-weight: 400;
    color: #808080;
}

    .breadcrumbs .locations {
        padding: 6px;
    }

.container_thumnail {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Để căn giữa theo chiều dọc */
    height: 762px;
    position: relative;
}

    .container_thumnail .img_box {
        width: 1520px;
        height: 583px;
        margin-top: 42px;
        border-radius: 14px;
        background-clip: border-box;
    }

    .container_thumnail .features {
        position: absolute;
        bottom: 0px; /* Cách bottom của container 42px */
        left: 50%; /* Đặt giữa theo chiều ngang */
        transform: translateX(-50%); /* Dịch ngược để chính giữa theo chiều ngang */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
/*----------------ĐĂNG KÝ------------------*/
.form-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 520px;
    margin: 80px auto;
    padding: 24px;
    border: 1px solid #F2F2F2;
    border-radius: 8px;
    background-color: white;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 56px rgba(0, 38, 3, 0.08);
}

    .form-container span {
        font-family: 'Fz Poppins', sans-serif;
        font-size: 32px;
        font-weight: 500;
    }
.form-group {
    margin-bottom: 12px;
    font-family: 'Fz Poppins', sans-serif;
    font-size: 16px;
    color: #666666;
    display: flex;
    flex-direction: column; /* THAY VÌ center */
    align-items: flex-start; /* Canh trái */
}

    .form-group input {
        padding-left: 16px;
        width: 100%; /* hoặc tuỳ theo thiết kế */
    }

    .form-group .text-danger {
        font-size: 14px; /* nhỏ hơn 16px một chút cho hợp mắt */
        margin-top: 4px;
    }


.form-control {
    width: 100%;
    height: 49px;
    font-size: 16px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-primary {
    width: 100%;
    padding: 10px;
    background-color: #C58A66;
    border: none;
    border-radius: 43px;
    color: #fff;
    font-size: 16px;
    height: 45px;
    margin-top: 20px;
    font-family: 'Fz Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.text-danger {
    color: #e74c3c;
    font-size: 13px;
}
/*-----------------PRODUCTS---------------*/
/*/* Container căn giữa nội dung và căn lề phải/trái 15% */
.product_container {
    display: flex;
    justify-content: space-between; /* Căn đều các phần tử trong container */
    padding: 0 15%; /* Căn lề trái và phải 15% */
}

/* Cấu trúc flex cho menu và sản phẩm */
.menu {
    width: 25%; /* Chiếm 3 cột */
    padding-right: 24px; /* Gutter giữa menu và sản phẩm */
}

.products {
    width: 75%; /* Chiếm 9 cột */
}

/* Flexbox cho các sản phẩm */
.row {
    display: flex;
    flex-wrap: wrap; /* Để các sản phẩm tự động xuống dòng khi không đủ không gian */
    gap: 24px; /* Khoảng cách 24px giữa các sản phẩm */
    justify-content: flex-start; /* Căn các sản phẩm về bên trái */
}

/* Mỗi sản phẩm có kích thước cố định là 312px */
.product-item {
    flex: 0 0 304px; /* Chiều rộng cố định là 312px, không cho co giãn */
    margin-bottom: 24px; /* Khoảng cách dưới mỗi sản phẩm cũng là 24px */
    height: 407px; /* Chiều cao của mỗi sản phẩm */
}

/* Card styling */
.card {
    width: 100%;
    height: 100%; /* Đảm bảo card chiếm toàn bộ chiều cao của product-item */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    position: relative;
    flex-direction: column; /* Để các phần trong card theo chiều dọc */
}

    .card:hover {
        border: 1px solid #DFA586;
        box-shadow: 0 0px 12px rgba(185, 27, 33, 0.3);
    }

    .card:active {
        border: 1px solid #DFA586;
        box-shadow: none;
    }

.card-img-top {
    width: 100%;
    height: 302px; /* Hình ảnh có chiều cao cố định */
    object-fit: scale-down; /* Đảm bảo hình ảnh không bị méo */
}

.card-body {
    padding: 16px;
    text-align: center;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.card-title {
    font-size: 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

    .card-title p {
        margin: 0;
    }

.card-btn {
    width: auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: 0.2s;
}

    .card-btn:hover .img-card-btn {
        content: url('Image/Add To Cart_Hover.svg');
    }

    .card-btn:active .img-card-btn {
        content: url('Image/Add To Cart_Clicked.svg');
    }

.out-of-stock {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 88px;
    height: 30px; /* Đảm bảo chiều cao đủ lớn để căn giữa */
    background-color: black;
    color: white;
    border-radius: 4px;
    font-family: 'Fz Poppins',sans-serif;
    font-size: 14px; /* Điều chỉnh kích thước font để phù hợp */

    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
}
/*-----------------MENU---------------*/
.menu_nav {
    list-style-type: none; /* Bỏ dấu chấm đầu dòng */
    padding: 0; /* Bỏ khoảng cách bên trong */
    margin: 0; /* Bỏ khoảng cách bên ngoài */
    font-family: 'Fz Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.menu_item {
    height: 48px; /* Chiều cao của mỗi item */
    border-bottom: 1px solid #E6E6E6;
    background-color: white;
}

.menu_link {
    height: 100%; /* Đảm bảo div chiếm toàn bộ chiều cao của li */
    display: flex; /* Sử dụng flexbox để căn giữa nội dung */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 0 10px; /* Thêm khoảng cách bên trái và bên phải */
    transition: background-color 0.3s; /* Hiệu ứng chuyển màu mượt mà */
}

    .menu_link a {
        text-decoration: none; /* Bỏ gạch chân */
        color: inherit; /* Kế thừa màu sắc từ cha */
        width: 100%; /* Đảm bảo link chiếm toàn bộ chiều rộng */
    }

.menu_item:hover .menu_link {
    background-color: #FFF4EE; /* Màu nền khi hover */
}

.menu_item.active .menu_link {
    background-color: rgba(235, 153, 110, 0.88); /* Màu nền khi đang được chọn với độ trong suốt 12% */
    color: inherit; /* Màu chữ khi đang được chọn */
}

.menu_title {
    padding: 10px;
    font-family: 'Fz Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.menu_sub_header {
    margin-top: 48px;
    margin-bottom: 24px;
    height: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    .menu_sub_header .sort_title {
        font-family: 'Fz Poppins', sans-serif;
        font-size: 16px;
        color: #808080;
    }

.sort_dropdown {
    margin-left: 8px;
    width: 166px;
    padding-left: 16px; /* Padding trái */
    padding-top: 10px; /* Padding trên */
    padding-bottom: 10px; /* Padding dưới */
    font-family: 'Fz Poppins', sans-serif;
    font-size: 14px;
    color: #808080;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    position: relative;
    appearance: none; /* Tắt mũi tên mặc định */
    -webkit-appearance: none; /* Đảm bảo không xuất hiện mũi tên trên Safari */
}

    .sort_dropdown::-ms-expand {
        display: none; /* Tắt mũi tên mặc định trên IE */
    }

.sort_dropdown {
    background: url('Image/Vector_DropDown.svg') no-repeat;
    background-position: right 10px center; /* Đặt mũi tên cách lề phải 10px */
    background-size: 10px 6px; /* Kích thước của mũi tên */
    padding-right: 30px; /* Khoảng cách từ văn bản đến mũi tên */
}

    .sort_dropdown:focus {
        border-color: #c57d7d; /* Khi chọn dropdown thì đổi màu viền */
    }