:root {
    --card-bg : #f9f9f9;
        --border: #ccc; /* global scope */
    --border-light-light: #fafafa;
}

html {
    /*  scrollbar-gutter: stable;
    min-height: 100%; */

    position: relative;
}

body {
    /* A clean, readable font "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
        ,"Hiragino Kaku Gothic ProN"
          Roboto, Arial, sans-serif 
    */
    font-family: "Noto Sans Thai","Noto Sans JP","Segoe UI","Meiryo";
    color: #4D4848;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    /*  height: 100%;
     
        
        padding-top: 10px; Adjust based on header height 


    */
    /*color: #333;*/ /* Dark gray for good readability */
    /*background-color: #f8f8f8;  A very light gray fallback background */
    /*background-image: url('OSD_EC_BG.png');  Replace with the actual path to your generated image */
    /*background-size: cover;
    background-repeat: no-repeat;  This will tile the background image */
    /*background-attachment: fixed;*/ /* Keeps the background in place when scrolling */
}

h1 {
    color: #4D4848;
}
h2 {
    color: #4D4848;
}
h3 {
    color: #4D4848;
}
h4 {
    color: #4D4848;
}
h5 {
    color: #4D4848;
}

#content {
    color: #4D4848;
    /* max-width: 1240px;
    min-height: 100%;*/
    /*padding-bottom : 10px;  Header Fix show detail, Adjust based on your footer's height   > 100*/
    /* background-image: url('OSD_EC_BG.png');
    background-size: cover;
    background-repeat: no-repeat; */
}


#main {
    overflow: auto; /*  this needs to be bigger than footer height > 100 */
    /* padding-top: 100px;this needs to be bigger than footer height > 100
    min-height: 100vh; */
}

#productDetailModal { 
    /* z-index: 1 !important;*/
    z-index: 1060 !important;
}
    #productDetailModal .modal-dialog {
        pointer-events: auto !important; /* make sure clicks reach inside */
    }
#modalProductDescription { 
    white-space: pre-wrap; /*  Ensures newlines are rendered */ 
}

@media (min-width: 992px) {
    .navbar-collapse {
        justify-content: flex-end; /* Helps balance */
    } 

    .pagination-container {
        max-width: 1240px; /* Same as your navbar-container */
        margin: 0 auto; /* Center it */
        /* padding: 0 30px; /* Match navbar's side padding */
        /*  overflow-x: auto; For mobile scroll if needed 
        -webkit-overflow-scrolling: touch;*/
    }

    /* Base pagination styling */
    .pagination {
        margin: 20px 0; /* Vertical space above/below */
        justify-content: center;
    }
        .pagination .page-item .page-link {
            font-weight: bold;
            color: #4D4848;
            padding: .8rem .8rem; /* Smaller buttons */
            /*min-width: 30px;  Deduct size for mobile */
        }
    .company-footer {
        margin-left: 16px;
    }


    .logo-osd-footer {
        width: 105px;
        height: fit-content;
        /*  background-color: yellow;
            height: 80px; */
    }

    .logo-ozax-footer { 
        height: fit-content;
          
    }
    /* Login Page Specific Styles */
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        padding: 16px;
    }

    .login-card {
        display: flex;
        width: 100%;
        max-width: 900px; /* Adjust max width as needed */
        overflow: hidden; /* Ensures image doesn't bleed out of rounded corners */
        padding: 0; /* Reset padding for this specific layout */

        background-image: url('../Content/login-pattern.png');
        background-size: 700px;
        background-position: center;
        background-repeat: no-repeat;
        background-position-x:  right;
        border-radius: 16px;
        border: 1px solid var(--border);
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);


    }


    .login-image-section {
        flex: 2; /* Make the image section slightly wider */
        /* Replace 'login-pattern.png' with your actual image file name */
        /* min-height: 500px; Ensure it has height on smaller screens */
    }
     

}
/* On mobile: remove fixed width, use full width with padding */
@media (max-width: 991.98px) {

    /*
    .navbar-container {
        max-width: 60%;
        padding-left: 15px;
        padding-right: 15px;
    }
    */
    .navbar-collapse {
        position: absolute; /* Takes it out of flow */
        top: 80px; /* Starts right below the navbar */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Perfect centering */
        width: 98%; /* Slightly narrower than screen for padding */
        max-width: 980px; /* Optional max width for larger phones */
        background-color: #ffffff !important;
        border-radius: 20px; /* Matches your navbar style */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Strong shadow for "floating" effect */
        z-index: 1050; /* High z-index to overlay everything (above modals=1050, but safe) */
        padding: 20px; /* Inner spacing */
        margin-top: 10px; /* Gap below navbar */
    }

    /*.navbar-container {
        max-width: 240px !important;
        max-width: 80%;
        padding: 5px 30px; 
        max-width: 100% !important;
        padding: 0 15px;
        position: relative;
    }*/

    .navbar {
        border-radius: 40px; /* smaller radius on mobile */
        height: auto;
        min-height: 70px;
    }

        .navbar .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }

    .navbar-nav {
        text-align: right; /* Center menu items on mobile */
    }

        .navbar-nav .nav-item {
            padding: 10px 0; /* Vertical spacing for touch */
        }

    .navbar-collapse.show {
        background-color: #4D4848;
        margin-top: 10px; /* Space below navbar */
    }

    .navbar-menu {
        font-weight: bold;
        /*        
        text-align: center;
        align-items: center;
        width: 100%; 
        */
        justify-content: center;
    }


    /*

    .cat-side {
        border-color: red;
        padding-bottom: 200px;
    }

    .footer-detail {
        margin-top: 45px !important;
    }

*/
    .footer {
        position: relative;
        width: 100%;
    }

    .footer-section {
        background: #ffffff;
        padding: 40px 15px 30px;
        height: auto !important; /* Override any fixed height */
    }

    .footer-bottom {
        padding: 15px;
        font-size: 14px;
    }

      /*  .footer-bottom .d-flex {
            flex-direction: column;
            text-align: center;
        }
*/
        .footer-bottom .footer-link {
            margin: 5px 10px;
            font-size: 13px;
        }


    /* .logo-osd-footer {
        width: 80px;
    }

    .logo-ozax-footer {
        width: 120px;
    }*/
    /* width: 45px;*/
    /*height: fit-content; */

    main, .container, #content {
        padding-bottom: 20px !important;
    }


    .pagination {
        font-size: 0.875rem; /* Smaller text */
        justify-content: center !important; /* Center it */
        flex-wrap: nowrap; /* Prevent wrapping */
        overflow-x: auto; /* Horizontal scroll if too wide */
        padding: 0 10px; /* Reduce side padding */
        white-space: nowrap; /* Keep in one line */
    }

        .pagination .page-item .page-link {
            font-weight: bold;
            color: #4D4848;
            padding: 0.4rem 0.8rem; /* Smaller buttons */
            min-width: 35px; /* Deduct size for mobile */
        }

        .pagination .page-item:first-child .page-link,
        .pagination .page-item:last-child .page-link {
            padding: 0.4rem 0.6rem;
        }

        .pagination .page-item:not(.page-active):not(:first-child):not(:last-child):nth-child(n+10) {
            display: none;
        } 

}
/* Center dropdown under button on desktop */
/* Align to right if needed (adjust based on your layout) 
@media (min-width: 992px) {
    .dropdown-menu {
        left: auto !important;
        right: 0 !important; 
    }
    .navbar-menu {
        font-weight: bold;
 
        justify-content: center; 
    }

 }*/


.header-mobile {
    display: none !important;
}
@media (max-width: 767.98px) {

    .img-product {
        min-height: auto !important; /* Remove forced height to prevent stretching */
        object-fit: contain; /* Keeps aspect ratio, no distortion */
        width: 80%;
        height: auto;
    }

    #modalProductImage {
        max-height: 200px; /* Limit max height to avoid over-expansion on small screens */
        object-fit: contain; /* Prevent stretching/blurring */
        width: 100%;
        height: auto;
        margin: 0 auto; /* Center if needed */
    }

    .navbar-nav {
        align-items: flex-start !important;
        margin-left:20px;
        padding: 5px; /* Vertical spacing for touch */
    }

        .navbar-nav .nav-item {
            margin: -25px !important;
        }

        .navbar-nav .nav-link {
            font-size: 14px; /* ตัวอักษรเล็ก */
            padding: 10px; /* ระยะห่างแนวตั้ง */
        }

    .navbar-panel {
        background-color: red;
        align-items: center;
        /* #4D4848 overflow: visible !important; Allow dropdowns to overflow outside rounded borders */
        position: relative; /* Ensures absolute positioning works */
    }
    .msg-h1 {
        color: #4D4848;
        margin-top: 2px; 
        margin-bottom: 8px;
        font-size: 18pt !important;
    }

    .msg-h2 {
        color: #4D4848;
        margin-top: 14px;
        font-size: 15pt !important;
    }
        .txt-m2 {
        /* 
    background-color: #f8f9fa;
        font-size:16pt;*/
        font-size: 10.5pt;
        margin-top: 6px;
    }
    .cat-side {
        /* background-color: red ;*/
        padding-bottom: 20px !important;
        margin-right: 6px;
    }
    .cat-side-mobile {
        background-color: #808080 ; 
    }
    .login-badge {
        display: none !important;
    }
    .user-badge {
        display: none !important;
    }
    .cart-badge {
        display: none !important;
    }
    .find-item {
        display: none !important;
    }

    .header-mobile {
        display: block !important;
        position: absolute;
        top: 30px; /* fine-tune vertical position */
        right: 54px; /* distance from right edge */
        z-index: 1002;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end; /* or center / space-between */
        gap: 24px; /* ← most important for spacing */
        padding: 0 2px;
    }
    .user-none-mobile {
        /* margin-right: -300px !important;
        background-color: #808080;*/
        margin-top: 40px;
        margin-left: 40px;
    }
    .user-badge-mobile {
        /*  margin-right: -116px;
        margin-right: 106px;
        background-color: lightblue;*/

        text-decoration: none;
    }
    .cart-badge-mobile {
        /*  margin-right: -86px;
        background-color: red;*/

        text-decoration: none;
    }

    .find-badge-mobile {
        /*  margin-right: -110px;
        margin-top: 20px;
        margin-left: 40px;
        background-color: rgba(0,0,0,0.25);
            */

        text-decoration: none;
    }

    .login-card {
        flex-direction: column;
    }

    .ddl-lang {
        display: none;  
    }
    .ddl-lang-mobile {
        display: block !important; 
    }

    .login-image-section {
        display: none; /* Hide image on mobile for a cleaner view */
        /* Alternatively, you can reduce its height: */
        /* height: 200px; flex: none; */
    }

    /*   width: 105px;*/
    /*   width: 45px;*/
    .logo-osd-footer { 
        height:  contain;
    }

    .logo-ozax-footer {
        width: 205px;
        height: fit-content;
    }
    /**/ 

    .social-footer {
        /*background-color: red;*/
        margin-top: 10px;
    }

        .social-icon {
        width: 46px;
        height: 46px;
        background: #0074C8;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 6px;
        font-size: 20px;
    }

        .social-icon:hover {
            /*  opacity: 0.85;
        transition: background-color 0.3s;
        */
            -webkit-filter: brightness(50%);
        }

    .footer-bottom .d-flex {
        flex-direction: column;
        gap: -10px !important;
        display: none !important; /**/
    } 
        .footer-bottom .d-flex > div {
            order: -10; /* Move links above copyright on mobile if preferred */
        }

    .footer-bottom-company {
        /*width: 280px !important;*/
    }

    .footer-bottom-policy {
        flex-direction: row; 
    }
    .footer-mobile {
        display: block !important;
        margin-top: -80px;
        font-size: .8rem;
        /*   */
    }

    .footer-mobile-company {
        margin-top: 20px;
        margin-left: 20px; 
    }
    .footer-mobile-policy {
        margin-top: -10px;
        margin-left: 20px;
        font-size: .5rem;
    }

    .footer-link-mobile {
        color: white;
        text-decoration: none;
        font-size: 12px; /**/
        margin-right: 25px; /* Spacing between the links */
        transition: opacity 0.2s;
    }

        .footer-link-mobile:hover {
            color: #4D4848;
            opacity: 0.8; /* Slight fade on hover
            background: #4D4848; */
        }


    .footer-mobile-arrow {
        position: absolute;
        font-size: 1.1rem; /* Smaller text */
        /* background-color: #f00; */
        right: 40px;
        bottom: 10px;
        /* bottom: -20px; */
    }

    .pagination {
        font-size: 0.875rem; /* Smaller text */
        justify-content: center !important; /* Center it */
        flex-wrap: nowrap; /* Prevent wrapping */
        overflow-x: auto; /* Horizontal scroll if too wide */
        padding: 0 10px; /* Reduce side padding */
        white-space: nowrap; /* Keep in one line */
    }

        .pagination .page-item .page-link {
            padding: 0.4rem 0.8rem; /* Smaller buttons */
            min-width: 35px; /* Deduct size for mobile */
        }

        .pagination .page-item:first-child .page-link,
        .pagination .page-item:first-child .page-active,
        .pagination .page-item:last-child .page-link {
            padding: 0.4rem 0.6rem; /* Even smaller for prev/next */
        }

        /* Optional: Hide ellipsis or non-essential if too many pages */
        .pagination .page-item:not(.page-active):not(:first-child):not(:last-child):nth-child(n+4) {
            active display: none; /* active Show only first 5 + last if many pages - adjust as needed */
        }


}

.find-item {
    margin: 0 0 0 -20px; 
}
/*   */
.ddl-lang-mobile {
    display: none;
}

.footer-mobile {
    display: none; /**/
}
/* Card Styling */
.glass-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
} 
.login-form-section {
    background-color: white;
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid var(--border-light);
}


.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 100, 100, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Optional: Change the border color as well */
.custom-toggler.navbar-toggler {
    /* border-color: rgba(255, 100, 100, 0.8);*/
    border: none;
}

.custom-icon-style {
    color: #2e8eea; /*  #ff6464Your desired color */
    font-size: 20px; /* Your desired size */
    /* Add any other styles like padding or margin */
}

.page-active {
    background-color: #4D4848; /* Or any specific color code */
    color: white !important; /* Ensure text is readable */
    padding: .8rem .8rem; /*  Smaller buttons */
    border-color: #333; /* Match border color if needed */
}

.txt-no-under-line { /* Remove link under line*/
    text-decoration: none;
}



/*       min-width: 720px;*/
/* Floating Header Style */
.navbar {
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    Height: 86px;
    /*  position: static;
    min-width: 25%;

    width: 1240px;
    min-width: 640px;
    text-align: center;*/
    margin-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
    /*
      padding: 1rem 1rem;

    padding: 0.5rem 2rem;
    padding-left: clamp(16px, 5vw, 30px);
    padding-right: clamp(16px, 5vw, 30px);
  

    margin-Left: 55px;
    margin-right: 55px;
    */
    Background-color: #ffffff;
    /* 
        **All Device
Margin: 20px (Top), 10px (Left Right) **All Device
Padding: 30px (Left Right) **All Device
Background-color: #ffffff **All Device
Border-radius: 30px **All Device
Box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) **All Device
        */
}

.navbar-container {
    max-width: 1240px !important;
    /*  padding: 5px 30px;
    max-width: 240px !important;
    max-width: 80%;
    max-width: 100% !important;*/ 
    padding: 0 15px;
    position: relative;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    padding: 5px 5px;
    /*   
    border: 2px solid black;
        border-radius: 10px;*/
}

.navbar-menu {
    font-weight: bold;
    /*   
    background-color: #007bff;
    border: 2px solid black;
        border-radius: 10px;*/
    /* width: 620px; 
    align-items: center;
    text-align: center;
        
        
    text-align: center;
    justify-content: center;
    min-width: 777px;
    */
    align-items: center;
}

.navbar-panel {
    /* For Test
    background-color: #007bff;

    /* 
    width: 220px;    
        margin-right: auto;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    */
    background-color: #4D4848;
    align-items: center;
    overflow: visible !important; /*Allow dropdowns to overflow outside rounded borders */
    position: relative; /* Ensures absolute positioning works */
}

/* Cart Badge Style */
.cart-badge {
    /* For Test
    border: 2px solid black;*/
    /* font-size: 0.75rem;
     transform: translate(50%, -50%);
    margin-right: 20px;
    width: 100px;
 
    */
    padding: 5px 5px;
} 
.header {
    padding-bottom: 10px; /*   this needs to be bigger than footer height > 100 */ 

}

/* Link styling */
.company-menu { 
    text-decoration: none;  
}

    .company-menu:hover {
        color: #000 !important;
        font-weight: bold;
        font-size: 17px;
        transition:  0.2s ease;
    }
    .company-menu:after {
        background-color: #4D4848;        /* #007bff  */ 
        transition: width 0.1s ease;
    }

.footer {
    /* negative value of footer height 
         clear: both;
        
    padding: 20px 0;
    padding-top: 20px;
    bottom: 0;
    align-items: center;  

    background: #007bff;

    display: flex;
    justify-content: flex-start;
    color: red;
    margin-bottom: -10px;
    margin-top: -100px;
         */
        position: relative;
        width: 100%;
    }

.footer-section {
    background: #ffffff;
    padding: 20px 20px;
    height: 290px;
    /* 
    background: #f7f7f7;
    bottom: 0px;
    width: 100%;
        margin-bottom: 0 !important;
    padding-bottom: 0; */
    box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
}

.footer-detail {
    margin-top: 45px !important;
    /* 06-Jan-2026 */
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: 100%;
}
.footer-bottom {
    background: #0073d1; /* Blue bar */
    color: #fff;
    padding: 28px 20px;
    /*font-size: 14px;*/
    height: 80px;
    /*
    bottom: 10px;
    width: 100%;
    margin-top: 250px;
    background-color: #0074C8;*/
}


/* Link styling */
.footer-link {
    color: white;
    text-decoration: none;
    font-size: 14px; /**/
    margin-right: 25px; /* Spacing between the links */
    transition: opacity 0.2s;
}

    .footer-link:hover {
        color: #4D4848;
        opacity: 0.8; /* Slight fade on hover
            background: #4D4848; */
    }

.image-swap-fb .fb_Icon_hover {
    display: none; /* Hide the hover image initially */
}
.image-swap-fb:hover .fb_Icon_img {
    display: none; /* Hide the default image on hover */
}

.image-swap-fb:hover .fb_Icon_hover {
    display: block; /* Show the hover image on hover */
} 

.image-swap-ig .ig_Icon_hover {
    display: none; /* Hide the hover image initially */
}

.image-swap-ig:hover .ig_Icon_img {
    display: none; /* Hide the default image on hover */
}

.image-swap-ig:hover .ig_Icon_hover {
    display: block; /* Show the hover image on hover */
}

.image-swap-ln .ln_Icon_hover {
    display: none; /* Hide the hover image initially */
}

.image-swap-ln:hover .ln_Icon_img {
    display: none; /* Hide the default image on hover */
}

.image-swap-ln:hover .ln_Icon_hover {
    display: block; /* Show the hover image on hover */
}


/* The CSS Arrow */
.arrow-up {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-135deg); /* Rotates the corner to point up */
    -webkit-transform: rotate(-135deg);
    margin-left: 5px;
    cursor: pointer;
}

body.light-theme {
    background-color: #f1f0f2; /*#f1f0f2*/
    color: #000000;
}

body.dark-theme {
    background-color: #bfbfbf;
    color: #ffffff;
}

.navbar.light-theme, footer.light-theme {
    background-color: #fff; /*#ccc1db #343a40 ##8c8296 tanos*/
    color: #000000;
}

.navbar.dark-theme, footer.dark-theme {
    background-color: #808080;
}

.cart {
    position: absolute;
    width: 35vw;
    height: 300px;
    background-color: lightblue;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
}

.cart-icon {
    /*    display: block;
    width: 50px;
    background-color: yellow; */
    height: 50px;
}

    .cart-icon i {
        color: white
    }

    .cart-icon:hover ~ .cart {
        opacity: 1
    }

.language-box {
    width: 108px;
    padding: 16px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.language-selector {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
    cursor: pointer;
}

.language-current {
    padding: 8px 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f9fa; /*#f9f9f9*/
    display: flex;
    align-items: center;
}

    .language-current img {
        margin-left: 2px;
        margin-right: 8px;
        width: 14px; /* Adjust size as needed */
        height: 14px;
    }

.language-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9; /*#f9f9f9*/
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .language-dropdown a {
        color: black;
        padding: 6px 8px;
        text-decoration: none;
        display: block;
    }

        .language-dropdown a:hover {
            background-color: #f1f1f1;
        }

.language-selector:hover .language-dropdown {
    display: block;
}


.language-switch {
    display: flex;
    width: 80px; /*80 ,3>120*/
    height: 40px;
    border: 2px solid #000;
    background-color: #f9f9f9; /*#f9f9f9*/
}

.language-option {
    flex: 1;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    font-size: 14px;
    /*font-weight: bold;*/
    text-transform: uppercase;
    color: #000;
    background-color: #fff;
}

.language-selected {
    flex: 1;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    font-size: 14px;
    /* font-weight: bold;*/
    text-transform: uppercase;
    color: #fff;
    background-color: #000;
}

#en {
    background-color: #fff;
    color: #000;
}

#jp {
    background-color: #fff;
    color: #000;
}

#th {
    background-color: #fff;
    color: #000;
}

.flag-ja {
    background: url('Content/japan.png') no-repeat left center;
    width: 18px;
    height: 14px;
    /*padding-left: 20px;*/
}

.flag-th {
    background: url('Content/thailand.png') no-repeat left center;
    width: 18px;
    height: 14px;
}

.div-bottom-left {
    /*position: absolute;*/
    bottom: 0;
    left: 10px;
    /* background-color: lightblue;*/
    padding: 10px;
}

.div-bottom-right {
    /* position: absolute;*/
    bottom: 0;
    right: 10px;
    /* background-color: lightgreen;*/
    padding: 10px;
}

.custom-dropdown {
    position: relative;
    /* ... other styling ... */
}

.flag-icon {
    display: inline-block;
    width: 20px; /* Adjust size as needed */
    height: 15px; /* Adjust size as needed */
    background-size: cover;
    margin-right: 5px;
}
    /* Example for specific flags using background-image */
    .flag-icon.jp {
        background-image: url('Content/japan.png');
    }

    .flag-icon.th {
        background-image: url('Content/thailand.png');
    }

.mg-t-2 {
    margin-top: 200px;
}
.mg-b-20 {
    margin-bottom: 20px;
}
.mg-b-2 {
    margin-bottom: 200px; 
}
.mg-1 {
    margin-left: 10px;
    margin-right: 10px;
}
.mg-2 {
    margin-left: 20px;
    margin-right: 20px;
}

.mg-l-m2 {
    margin-left: -20px;
}
.mg-r-m2 {
    margin-right: -20px;
}
.mg-l2 {
    margin-left: 16px;
}
.mg-l4 {
    margin-left: 40px;
}
.mg-r4 {
    margin-right: 40px;
}
col-sm-1 {
    margin-right: 30px;
}

.txt-c-u { 

    text-align: center;
    text-decoration: underline;
    text-decoration-color: gray;
    text-underline-offset: 4px; 
}

.txt-right{
    text-align:right;
}



.msg-body {
    font-family: "Noto Sans Thai", "Noto Sans JP", "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.7;
    padding: 24px;
    color: #222;
    background: #f9fafb;  

    box-shadow: 0 6px 18px rgba(11,74,111,0.06);
    border-radius: 10px;
}
.msg-h1 {
    color: #4D4848;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size:22pt;
}

.msg-h2 {
    color: #4D4848;
    margin-top: 16px;
    font-size: 20pt;
}

.msg-h3 {
    color: #4D4848;
    margin-top: 24px;
}

.msg-ul, msg-ol {
    margin: 8px 0 16px 1.25rem;
}

.msg-p {
    margin: 8px 0;
}

.msg-hr {
    margin: 40px 0;
    border: none;
    border-top: 2px dashed #ccc;
}

.msg-jp {
    color: #333;
    background: #f7f7fb;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 8px;
}

.msg-note {
    font-size: 0.95rem;
    color: #555;
    background: #f3f6f8;
    padding: 10px;
    border-radius: 6px;
}


.bg-body {
    /*background-size: cover;*/ /* Ensures the image covers the entire div */
    /*background-position: center;*/ /* Centers the image */
    /*background-repeat: no-repeat;*/ /* Prevents the image from repeating */
}

.pln_pro {
    color: #333; /* Dark gray for good readability */
    background-color: #f8f8f8; /* A very light gray fallback background */
    background-image: url('OSD_EC_BG_PRODUCT.png'); /* Replace with the actual path to your generated image */
    background-size: cover;
    background-repeat: no-repeat; /* This will tile the background image */
    background-attachment: fixed; /* Keeps the background in place when scrolling */
}
.color-white {
    color:  white !important;
}

.color-black {
    color: black;
}
.color-gray {
    color: #4D4848;
}

.bg-gray {
    background-color: #bfbfbf;
}

.bg-light-gray {
    background-color: #d4d4d4;
}

.bg-light-yellow {
    background-color: #ffef97;
}

.modal-header {
    background-color: #4D4848; /*#968899 - purple */
    color: white;
}

.modal-title {
    font-weight: bold;
    color: white;
}

.w-400 {
    width: 420px;
    margin: auto;
}
.w-600 {
    width: 680px;
    margin: auto;
}
.w-700 {
    width: 720px;
    margin: auto;
}
.w-800 {
    width: 800px;
    margin: auto;
}
.w-1200 {
    width: 1240px;
    margin: auto;
}

.bg-red {
    background-color: red;
}

.alert {
}

.green-bg {
    background-color: #6fcc6d; /*green*/
}

.w-80{
    width:80%
}


.container {
    padding-bottom: 160px; /* Adjust based on your footer's height */
}

    .container.light-theme {
        background-color: #f8f9fa;
    }

    .container.dark-theme {
        background-color: #343a40;
    }


.list-group-cat {
    margin-bottom: 500px;
}

.category-sidebar .list-group-item {
    position: relative; /* Needed for positioning the sub-menu */

     
}

.sub-category-menu {
    display: none; /* Hide sub-menus by default */
    position: absolute;
    left: 100%; /* Position to the right of the parent item */
    top: -1px; /* Align with the top of the parent item */
    min-width: 200px;
    z-index: 100;
    border: 1px solid rgba(0,0,0,.125);
    border-left: none;

}
/* CSS for hoverable category sidebar */
.category-sidebar .sub-categories {
    display: none; /* Hide sub-categories by default */
    padding-left: 1rem; /* Indent sub-categories */
    font-size:14px;
}

.category-sidebar .list-group-item:hover > .sub-categories {
    display: block; /* Show sub-categories on hover */
    padding-bottom: 5px;
}
/* Style for indented sub-items */
.sub-item {
    border: none !important;
    padding-left: 2rem !important;
}

/* Style for active link highlighting */
.category-sidebar a.active {
    color: #0d6efd !important; /* Bootstrap primary blue */
    font-weight: bold;
}


.txt-h20 {
    /*  
   
    background-color: #f8f9fa;
        font-size:16pt;*/
    color: red !important;
    font-size: 16px !important;
}


.txt-h1 {
    color: #000;
    /* 
    background-color: #f8f9fa;
        font-size:16pt;*/
     font-size :16pt;
}


.txt-h2 {
    color: #000;
    /* 
    background-color: #f8f9fa;
        font-size:16pt;*/
    font-size: 14pt;
}


.txt-h4 {
    height: 38px;
}

.txt-h1.light-theme {
    background-color: #D9EFBF;
    color: #000000;
}

.txt-h1.dark-theme {
    background-color: #808080;
    color: #ffffff;
}

.txt-body {
    /*background-color: #f8f9fa;*/
    color: #000;
}

    .txt-body.light-theme {
        background-color: #eef9e8;
        color: #000000;
    }

    .txt-body.dark-theme {
        background-color: #bfbfbf;
        color: #808080;
    }

.txt-i1 {
    color: #000;
}

    .txt-i1.light-theme {
        color: #bfbfbf;
    }

    .txt-i1.dark-theme {
        color: #eef9e8;
    }

.txt-right {
    text-align: right !important;
}

.txt-white {
    /* color: #828282; */
    color: #fff !important;
}
.txt-black {
    /* color: #828282; */
    color: #000 !important;
}
 
.txt-gray {
    /* color: #828282; */
    color: #4D4848;
}

.txt-puple {
    color: #755585;
}

.txt-red { 
    color: red;
    font-weight: bold;
}

.txt-bold {
     font-weight: bold;
}

.cart {
    position: absolute;
    width: 35vw;
    height: 300px;
    background-color: lightblue;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
}

.cart-icon {
    display: block;
    width: 50px;
    background-color: yellow;
    height: 50px;
}

    .cart-icon i {
        color: white
    }

    .cart-icon:hover ~ .cart {
        opacity: 1
    }

.sales-price {
    color: #ff6a00; /*  #E1982F Example color */
}

.original-price {
    /*text-decoration: overline underline;*/
    text-decoration: line-through;
    font-style: oblique;
    color: #808080;
}

.price-increase {
    font-size: 21px;
    font-weight: bold;
    color: green;
}

.price-decrease {
    color: red;
}

.img-product {
    min-height: 156px;
    object-fit: contain; /* Keeps aspect ratio, no distortion */
    width: 100%;
    height: auto;
}


#ProductImage {
    max-height: 156px; /* Limit max height to avoid over-expansion on small screens */
    object-fit: contain; /* Prevent stretching/blurring */
    width: 100%;
    height: auto;
    margin: 0 auto; /* Center if needed */
}
.gvBind {
    min-width: 560px;
    object-fit: contain;
}