/* Menu row */
.mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    list-style: none !important;
    gap: 12px !important; 
}

/* Form menu */
.mod-menu li a {
    display: inline-block !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    background-color: #f8f9fa !important; /* grey */
    color: #333 !important; /* text color */
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease;
}

/* Mouse to menu */
.mod-menu li a:hover {
    background-color: #ff7700 !important; /* change to orange */
    color: #ffffff !important; /* text to white */
}

/* header on Mobile */
@media (max-width: 991.98px) {
    /* 1. redisplay header on mobile */
    .container-header .navbar-brand {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-right: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Header in Khmer & English */
    .header a.sitename, 
    .header .navbar-brand a, 
    .header .brand-title,
    .header .sitename {
        display: inline-block !important;
        visibility: visible !important;
        color: #ffffff !important; 
        text-align: center !important;
        font-size: 1.4rem !important; 
        font-family: 'Moul', cursive !important;
    }
    
    /* 3. change menu to threeline */
    .container-header .navbar-toggler {
        margin: 10px auto !important;
        display: block !important;
    }
}

/* --- CATEGORY VIRTUEMART --- */

/* 1. Border category */
.category.view .row .col-md-4, 
.category-view .row .col-md-4,
.vm-product-container {
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 12px !important; /* Bo góc hiện đại */
    padding: 20px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important; /* Đổ bóng mờ mịn */
    transition: all 0.3s ease-in-out !important;
}

/* 2. Moust to Category */
.category.view .row .col-md-4:hover,
.category-view .row .col-md-4:hover {
    transform: translateY(-5px) !important; /* Nhấc nhẹ ô lên */
    border-color: #ff7700 !important; /* Đổi viền sang màu cam thương hiệu */
    box-shadow: 0 10px 20px rgba(255, 119, 0, 0.1) !important; /* Đổ bóng cam nhẹ */
}

/* 3. Cấu hình lại ảnh: Ép khung vuông, tự động căn giữa và không bị méo */
.category.view .row .col-md-4 img,
.category-view .row .col-md-4 img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important; /* Giữ nguyên tỷ lệ ảnh không bị móp méo */
    background-color: #ffffff !important;
    margin-bottom: 15px !important;
    transition: transform 0.3s ease !important;
}

/* Photo zoom effect */
.category.view .row .col-md-4:hover img,
.category-view .row .col-md-4:hover img {
    transform: scale(1.05) !important;
}

/* 4. Text font Category */
.category.view .row .col-md-4 h3 a,
.category-view .row .col-md-4 h3 a,
.category.view .row .col-md-4 h2 a {
    color: #222222 !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    text-decoration: none !important; /* Xóa bỏ dấu gạch chân */
    display: block !important;
    margin-top: 10px !important;
    transition: color 0.2s ease !important;
}

/* change to orange when mouse to */
.category.view .row .col-md-4:hover h3 a,
.category-view .row .col-md-4:hover h2 a {
    color: #ff7700 !important;
}

/* search middle top-a */
.com-virtuemart.view-category + .moduletable,
[class*="top-a"] .moduletable,
.vm-searchcustom-search-form {
    display: flex !important;
    justify-content: center !important;
    margin: 15px auto !important;
    width: 100% !important;
}

/* form search */
.vm-searchcustom-search-form input[type="text"] {
    max-width: 500px !important;
    width: 100% !important;
    padding: 10px 20px !important;
    border: 1px solid #dddddd !important;
    border-radius: 25px !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* off search joomla */
.vm-searchcustom-search-form, 
.wms-search-block,
.virtuemart-search,
form[action*="view=category"],
.view-category form.form-inline {
    display: none !important;
}

/* --- CHANGE STAR COLOR --- */
/* 1. SVG STAR VirtueMart change to yellow */
svg path[d^="M3.612 15.443"],
.ratingbox svg path,
.rating-stars svg path,
.vm-rating-stars svg path,
.vote svg path {
    fill: #ffcc00 !important; /* Đổ màu lòng ngôi sao thành màu vàng kim */
}

/* 2. Đảm bảo bản thân viền hoặc khối SVG không bị lỗi hiển thị */
.ratingbox svg, 
.rating-stars svg, 
.vm-rating-stars svg {
    color: #ffcc00 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. text no change */
.breadcrumbs svg path,
.mod-breadcrumbs svg path {
    fill: inherit !important; /* Giữ nguyên màu gốc của hệ thống */
}

/* --- SALE PRICE --- */

/* Ẩn tất cả các dòng giá gốc, giá trước khi giảm, giá thuế... */
.PricebasePrice, 
.PricebeforeMod, 
.PricediscountAmount, 
.PricetaxAmount {
    display: none !important;
}

/* Ép dòng giá bán cuối cùng luôn hiển thị đẹp đẽ */
.PricesalesPrice, 
.PricesalesPriceWithoutTax {
    display: block !important;
    color: #222222 !important; /* #d9534f giá sale có màu đỏ */
    font-weight: bold !important;
}

/* Ẩn dòng Sales Price (តម្លៃលក់៖) */
.product-price .PricesalesPrice {
    display: none !important;
}

/* Giữ Sales Price Without Tax (តម្លៃមិនរួមបញ្ចូលពន្ធ៖) */
.product-price .PricesalesPriceWithoutTax {
    display: block !important;
}

/* --- SALE PRICE DESIGN --- */
.product-price .PricesalesPriceWithoutTax {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 !important;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #ff9800;
    border-radius: 4px;
}

/*Tiêu đề (តម្លៃមិនរួមបញ្ចូលពន្ធ៖) */
.product-price .PricesalesPriceWithoutTax .vmparent-price,
.product-price .PricesalesPriceWithoutTax > span:first-child {
    font-size: 0.95rem !important;
    color: #555555 !important; /* Màu xám đậm sang trọng, không bị chói */
    font-weight: 500 !important;
}

/* SALE PRICE*/
.product-price .PricesalesPriceWithoutTax .PricepriceWithoutTax,
.product-price .PricesalesPriceWithoutTax .PricesalesPriceWithoutTax {
    font-size: 1.4rem !important;
    color: #d9534f !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* Khóa toàn bộ khu vực chứa bộ lọc Sort By và Chọn số lượng hiển thị */
.orderby-displaynumber, 
.vm-order-list, 
.display-number {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tối ưu khoảng cách vùng chạm cho Menu và Danh mục trên Di động */
@media (max-width: 991.98px) {
    
    /* 1. Nới rộng khoảng cách Menu chính ở trên cùng */
    .navbar-nav .nav-item a, 
    .navbar-nav .nav-link {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: block;
    }

    /* 2. Nới rộng danh mục sản phẩm bên phải (ACB, ATS, Capacitor...) */
    .mod-menu .nav.menu.mod-list li a,
    .mod-menu[class*="menu"] li a,
    main + aside .nav li a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: block !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* Tạo đường gạch mờ phân chia rõ ràng */
    }
    
    /* Đảm bảo dòng cuối cùng không bị dính sát */
    .mod-menu .nav.menu.mod-list li, 
    main + aside .nav li {
        margin-bottom: 2px !important;
    }
}

/* ==========================================================================
   TỐI ƯU KHẢ NĂNG TƯƠNG TÁC BẰNG NGÓN TAY (TOUCH USABILITY) TRÊN DI ĐỘNG
   ========================================================================== */
@media (max-width: 991.98px) {
    
    /* 1. Tăng kích thước các ô nhập liệu và nút đăng nhập trong Login Form */
    #login-form .form-control {
        height: 48px !important; /* Đạt chuẩn chiều cao vùng chạm 48px của Google */
        font-size: 16px !important; /* Ngăn trình duyệt iOS tự động phóng to (zoom) màn hình khi gõ chữ */
        margin-bottom: 12px !important;
    }
    
    /* Làm thưa vùng chọn "Ghi nhớ tôi" (Remember me) */
    #login-form .form-check {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
    }
    #login-form .form-check-label {
        font-size: 15px !important;
        padding-left: 8px !important;
    }

    /* Phóng to nút Đăng nhập chính (កត់ចូល) để ngón cái dễ ấn */
    #login-form .btn-primary, 
    #login-form button[type="submit"] {
        height: 48px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        width: 100% !important; /* Phủ rộng toàn bộ khối để dễ chạm */
    }

    /* 2. Tối ưu vùng chạm cho nút Mua hàng (Add to Cart) của VirtueMart */
    .addtocart-bar {
        margin-top: 15px !important;
    }
    
    /* Làm lớn nút Add to Cart */
    .addtocart-bar .addtocart-button, 
    .addtocart-bar input.addtocart-button {
        min-height: 48px !important; /* Đảm bảo chiều cao tối thiểu 48px */
        padding: 0 25px !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px;
        border-radius: 4px !important;
        width: 100% !important; /* Co giãn full chiều ngang cột sản phẩm trên mobile giúp tăng tỷ lệ chuyển đổi */
    }

    /* Tăng khoảng cách ô nhập Số lượng sản phẩm cạnh nút mua hàng */
    .addtocart-bar .quantity-box input.quantity-input {
        height: 48px !important;
        font-size: 16px !important;
    }
}

/* Tối ưu nút Add to Cart nổi bật trên Di động */
@media (max-width: 991.98px) {
    /* Cấu hình lại khối bao quanh nút */
    .addtocart-bar {
        display: flex !important;
        flex-direction: column !important; /* Xếp ô số lượng và nút mua thành hàng dọc */
        gap: 10px !important;
        width: 100% !important;
    }

    /* Phóng to ô chọn số lượng sản phẩm */
    .addtocart-bar .quantity-box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Ép nút Add to Cart phủ rộng 100% chiều ngang hàng */
    .addtocart-bar .addtocart-button, 
    .addtocart-bar input.addtocart-button {
        width: 100% !important;
        min-height: 48px !important; /* Chiều cao tiêu chuẩn ngón tay của Google */
        font-size: 16px !important;   /* Chữ to rõ ràng */
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 6px !important; /* Bo góc nhẹ nhìn hiện đại hơn */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Tạo hiệu ứng nổi lên để kích thích bấm */
    }
}

/* Tối ưu tiêu đề trang không bị tràn và mất chữ trên Di động */
@media (max-width: 767.98px) {
    /* Ép khung header và navbar của Cassiopeia phải co giãn theo chiều dọc */
    .site-title,
    .navbar-brand,
    .container-header .navbar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-align: center !important;
    }

    /* Định hình lại chính xác dòng chữ tiêu đề */
    .navbar-brand a, 
    .navbar-brand span,
    .site-title a,
    h1.site-title {
        display: inline-block !important; /* Dùng inline-block để Safari hiểu và ngắt dòng */
        max-width: 100% !important;
        font-size: 20px !important; /* Hạ cỡ chữ xuống để vừa màn hình iPhone */
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-word !important; /* Ép ngắt từ khi chạm viền */
        overflow-wrap: break-word !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   ĐỊNH DẠNG HỘP MÔ TẢ CỬA HÀNG TRONG VIRTUEMART
   ========================================================================== */
.vm-shop-intro-box {
    background: #ffffff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 1px solid #eef2f5 !important;
    margin-bottom: 30px !important;
    text-align: left !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.vm-shop-intro-box h2 {
    color: #ff8400 !important; /* Màu cam thương hiệu của bạn */
    font-size: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-weight: bold !important;
}

.vm-shop-intro-box p {
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Khối chứa các nút bấm danh mục nhanh */
.vm-shop-intro-links {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Định dạng các nút bấm màu cam */
.vm-shop-intro-links a {
display: inline-block !important;
padding: 8px 18px !important;
background: #ff8400 !important;
color: #ffffff !important;
text-decoration: none !important;
font-weight: bold !important;
border-radius: 4px !important;
font-size: 13px !important;
transition: all 0.2s ease-in-out !important;
box-shadow: 0 2px 4px rgba(255, 132, 0, 0.2) !important;
}
/* Hiệu ứng mượt mà khi di chuột qua nút */
.vm-shop-intro-links a:hover {
background: #e07500 !important; /* Cam đậm hơn khi hover */
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px rgba(255, 132, 0, 0.3) !important;
}

/* ==========================================================================
   TỐI ƯU MENU CHÍNH CHO THIẾT BỊ DI ĐỘNG (CHỐNG TRÀN & VỠ DÒNG)
   ========================================================================== */
/* 1. Ẩn hộp checkbox dùng để kích hoạt menu ngoài màn hình */
#menu-toggle {
    display: none !important;
}

@media (max-width: 991.98px) {
    /* 2. Ép ẩn toàn bộ danh sách menu dọc cũ */
    .menu, ul.nav, div[class*="menu"] ul, .navbar-nav {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: #ff8a00 !important; 
    }

    /* 3. Tạo nút bấm "☰ MENU" hiển thị trên điện thoại */
    .menu-btn {
        display: block !important;
        color: #ffffff !important;
        background-color: #d87500 !important; /* Màu cam đậm nổi bật */
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        text-align: center !important;
        border-radius: 4px !important;
        margin: 5px !important;
        user-select: none;
    }

    /* 4. MẸO QUYẾT ĐỊNH: Khi chạm vào nút (tức là checkbox được chọn), lập tức xổ menu xuống */
    #menu-toggle:checked ~ .menu,
    #menu-toggle:checked ~ ul.nav,
    #menu-toggle:checked ~ div[class*="menu"] ul,
    #menu-toggle:checked ~ .navbar-nav {
        display: flex !important; /* Hiện danh sách menu */
    }

    /* 5. Cấu hình các nút con bên trong khi menu được xổ ra */
    .menu li, ul.nav li, .navbar-nav li {
        width: 100% !important;
        float: none !important;
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .menu li a, ul.nav li a, .navbar-nav li a {
        display: block !important;
        padding: 14px 20px !important; /* Tăng độ dày cho ngón tay dễ chạm */
        text-align: left !important;
        color: #ffffff !important;
        font-size: 15px !important;
        background-color: #ff8a00 !important;
        text-decoration: none !important;
    }
}

@media (min-width: 992px) {
    /* Ẩn nút bấm menu 3 gạch khi xem trên máy tính */
    .menu-btn {
        display: none !important;
    }
}

/* ==========================================================================
   SỬA LỖI: ẨN NÚT MENU 3 GẠCH TRÊN BẢN MÁY TÍNH (MÀN HÌNH LỚN)
   ========================================================================== */

@media (min-width: 992px) {
    /* 1. Ẩn hoàn toàn nút bấm 3 gạch và checkbox khi xem trên máy tính */
    .menu-btn,
    label[for="menu-toggle"],
    #menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Đảm bảo thanh menu ngang gốc của máy tính luôn hiển thị đầy đủ */
    .menu, ul.nav, div[class*="menu"] ul, .navbar-nav {
        display: flex !important; /* Hoặc display: block tùy giao diện gốc của bạn */
    }
}

/* ==========================================================================
   TỐI ƯU TIÊU ĐỀ CHÀO MỪNG (WELCOME TEXT) CHO THIẾT BỊ DI ĐỘNG
   ========================================================================== */

/* Khi xem trên điện thoại và máy tính bảng (màn hình nhỏ hơn 768px) */
@media (max-width: 767.98px) {
    /* Hạ cỡ chữ tiêu đề h2/h1 chào mừng ngoài trang chủ */
    .virtuemart-view h2,
    .main-content h2,
    h2.welcome-title,
    div[class*="welcome"] h2,
    .componentheading,
    h2 {
        font-size: 19px !important; /* Đưa về mức 19px vừa vặn màn hình di động */
        line-height: 1.4 !important; /* Giúp các dòng chữ tiếng Khmer không bị dính vào nhau */
        text-align: center !important; /* Căn giữa cho cân đối trên mobile */
        margin-bottom: 12px !important;
    }

    /* Thu nhỏ nhẹ dòng mô tả ngắn ngay bên dưới tiêu đề (nếu có) */
    .virtuemart-view h2 + p,
    h2 + p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
}

@media (max-width: 767.98px) {
    .addtocart-area {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc ô số lượng và nút mua */
        gap: 8px !important;
    }
    .addtocart-bar {
        width: 100% !important;
    }
}

 /* Độ sắc nét của Hình ảnh Sản phẩm khi co nhỏ */
.virtuemart-view img, .latest-products img, .products img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   TỐI ƯU MOBILE-FRIENDLY TOÀN DIỆN CHO VIRTUEMART (BẢN CUỐI)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Tối ưu ảnh sản phẩm và ảnh danh mục co giãn tự nhiên, không méo hình */
    .virtuemart-view img, 
    .latest-products img, 
    .products img,
    .category-view img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* 2. Sửa lỗi nút Add to Cart và ô Số lượng dính chặt nhau trên mobile */
    .addtocart-area {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc ô số lượng và nút mua */
        gap: 8px !important;
        align-items: center !important;
    }

    .addtocart-bar {
        width: 100% !important;
        text-align: center !important;
    }

    .addtocart-button input {
        width: 100% !important;
        max-width: 200px !important;
    }
}

/* ==========================================================================
   CẤU HÌNH HIỂN THỊ GIÁ BÁN (ĐÃ TỐI ƯU DESKTOP & MOBILE-FRIENDLY)
   ========================================================================== */

/* --- 1. HIỂN THỊ TRÊN MÁY TÍNH (DESKTOP) --- */

/* Làm đậm và to nhãn chữ "Giá bán" tiếng Khmer */
.vmparent-price, 
.PriceSalesPriceWithoutTax,
.product-fields-title {
    font-size: 24px !important;
    font-weight: bold !important;
    display: inline-block !important;
}

/* Phóng to số tiền, làm đậm và đổi sang màu CAM nổi bật */
.PricesalesPrice, 
.PriceSalesPriceWithoutTax span, 
.PricesalesPrice span,
.product-price span {
    font-size: 30px !important;
    font-weight: bold !important;
    color: #FF8C00 !important; /* Màu cam thương hiệu */
    display: inline-block !important;
    margin-left: 8px !important;
}


/* --- 2. TỐI ƯU CÂN ĐỐI BỐ CỤC TRÊN ĐIỆN THOẠI (MOBILE) --- */
@media (max-width: 767px) {
    /* Thu nhỏ nhãn "Giá bán" để không chiếm hết chỗ trên màn hình nhỏ */
    .vmparent-price, 
    .PriceSalesPriceWithoutTax,
    .product-fields-title {
        font-size: 15px !important;
        font-weight: bold !important;
        display: block !important; /* Đẩy số tiền xuống hàng dưới nếu hàng quá chật */
        margin-bottom: 2px !important;
    }

    /* Thu nhỏ số tiền trên mobile vừa vặn, giữ màu cam */
    .PricesalesPrice, 
    .PriceSalesPriceWithoutTax span, 
    .PricesalesPrice span,
    .product-price span {
        font-size: 19px !important;
        font-weight: bold !important;
        color: #FF8C00 !important;
        display: inline-block !important;
        margin-left: 0px !important; /* Căn thẳng hàng khi rớt dòng */
    }
}

/* ==========================================================================
   CĂN ĐỀU KHUNG SẢN PHẨM (CHỐNG TRỒI SỤT GIÁ) & MOBILE FRIENDLY
   ========================================================================== */

/* 1. Ép phần Tên sản phẩm đều nhau */
.vm-product-title, 
.product-title, 
.product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Tối đa 3 dòng, dài hơn tự động thêm ... */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4em !important;
    
    /* Ép chiều cao cố định cho cả 3 dòng */
    min-height: 4.2em !important; 
    height: 4.2em !important; 
    margin-bottom: 12px !important;
}

/* 2. Ép phần Mô tả ngắn đều nhau (Khắc phục lỗi lệch giá) */
.product-short-description, 
.vm-product-desc,
.product-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Tối đa 2 dòng, dài hơn tự động thêm ... */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4em !important;
    
    /* Cố định chiều cao 2 dòng kể cả khi không có chữ hoặc chữ quá ngắn */
    min-height: 2.8em !important;
    height: 2.8em !important;
    margin-bottom: 18px !important;
}

/* 3. Tối ưu riêng trên giao diện Điện thoại (Mobile) */
@media (max-width: 767px) {
    .vm-product-title, 
    .product-title, 
    .product-title a {
        font-size: 14px !important;
        line-height: 1.3em !important;
        min-height: 3.9em !important;
        height: 3.9em !important;
    }
    
    .product-short-description, 
    .vm-product-desc,
    .product-desc {
        font-size: 13px !important;
        line-height: 1.3em !important;
        min-height: 2.6em !important;
        height: 2.6em !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================
   1. ĐỔI MÀU BANNER / HEADER (Từ xanh sang cam)
   ========================================== */
.container-header {
  background-color: #ff7700 !important; /* Màu cam chính của Banner */
  background-image: none !important;    /* Xóa dải màu nền mặc định */
}

/* ==========================================
   2. BỐ CỤC HÀNG MENU
   ========================================== */
.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding-left: 0 !important;
  list-style: none !important;
  gap: 12px !important;
}

/* ==========================================
   3. Ô MENU (Cam nhạt -> Rê chuột thành Cam đậm)
   ========================================== */
/* Trạng thái mặc định: Cam nhạt */
.mod-menu li a {
  display: inline-block !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  background-color: #ffe0b2 !important; /* Cam nhạt */
  color: #333333 !important;             /* Màu chữ */
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease;
}

/* Trạng thái hover (rê chuột vào): Cam đậm */
.mod-menu li a:hover {
  background-color: #e65100 !important; /* Cam đậm */
  color: #ffffff !important;             /* Chuyển chữ sang màu trắng */
}