@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

*, :before, :after {
    margin: 0;
    padding: 0;
    list-style: none;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    box-sizing: border-box !important;
    text-decoration: none !important;

}
::-webkit-scrollbar {
    width: 3px !important;
    height: 8px !important;
}  
::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 5px !important;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px !important;
    background-color: rgba(2, 9, 17, 0.473);
    /* background: rgba(122, 158, 236, 0.719) !important;   */
    /* background: rgba(122, 158, 236, 0.719) !important;   */
}
::-webkit-scrollbar-thumb:hover {
    background: #999 !important;  
}
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}
body {
    /* overflow-x: hidden; ป้องกันการเลื่อนของ body */
    background-color: #a1a1a10f !important;
    transition: .25s;
    /* font-weight: 400 !important; */
    /* font-family: "IBM Plex Sans Thai", system-ui !important; */
    font-family: Arial, Helvetica, sans-serif;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    background-color: rgba(143, 151, 221, 0.062) !important;
}
.hd_container {
    margin: 0 auto;
    max-width: 70%;
    /* width: 100%; */
}
.hd_left {
    display: flex;
    align-items: center;
}
.hd_body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    /* padding: 0px 30px; */
}
.acc_body_head {
    justify-content: space-between;
}
.hd_logo img {
    width: 120px;
}
.hd_logo {
    /* margin-right: 40px; */
    padding-right: 10px;
    /* border-right: 1px solid #80808059; */
}
.level_a {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #e9e9e7;
}
.level_b {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #ffb66a;
}
.level_c {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #fa9f3e;
}
.level_c1 {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #fad23e;
}
.level_c4 {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #ffc43e;
}
.level_c3 {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #fac13e;
}
.level_aplus {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #fad23e;
}
.level_d {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    margin: 0 20px;
    border-radius: 5px;
    background-color: #4cdb64;
}
.hd_sr .ip_head {
    width: 500px;
    padding: 13px;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 14px;
    background-color: #bbbbbb26;
}
.hd_right, .hd_profiles {
    display: flex;
    /* gap: 25px; */
    align-items: center;
}
.hd_menu_const {
    /* margin-right: 50px; */
    position: relative;
}
.hd_menu_const a {
    font-size: 14px;
    color: rgb(219, 219, 219);
    /* margin-left: 10px; */
    padding: 10px 12px;
    border-radius: 8px;
    transition: .15s;
}
.hd_menu_const a:hover {
    /* color: rgb(40, 212, 98); */
    color: rgba(218, 219, 226, 0.788) !important;
    transition: .15s;
    background-color: #dfe1f070;
}
.active_menus {
    /* padding-bottom: 26px; */
    /* border-bottom: 2px solid rgb(40, 212, 98); */
    /* border-bottom: 2px solid #2d52aa; */
    /* color: rgb(40, 212, 98) !important; */
    background-color: #dfe1f070;
    /* background-color: rgba(128, 128, 128, 0.151); */
    color: white !important;
}
.hd_profiles_img {
    width: 40px;
    height: 40px;
    display: grid;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background-color: #80808045;
}
.hd_profiles_img img {
    width: 100%;
}
.hd_profiles_name {
    display: grid;
    margin-left: 10px;
}
.hd_profiles_name h4 {
    font-size: 13px !important;
    margin-bottom: 0px !important;
    width: 140px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
.hd_profiles_name span {
    color: #e0e0e0;
    font-size: 13px;
}
.order_list {
    padding: 10px 45px;
    /* max-width: 70%; */
    margin: 0 auto;
    white-space: unset !important;
}
.order_list h3 {
    font-size: 18px !important;
}
.list_flex {
    display: grid;
    align-items: center;
    width: 100%;
    /* gap: 10px; */
    margin-bottom: 35px;
    grid-template-columns: repeat(2,1fr);
    /* max-width: 1300px; */
}
.order_list_menu_latest {
    /* width: max-content; */
    /* width: 400px; */
    display: flex;
    align-items: center;
    margin-top: 15px;
    /* margin-right: 20px; */
    justify-content: space-between;
    /* background-color: #c9c6c62e; */
    /* padding-right: 20px; */
    border-radius: 5px;
    /* margin-left: 40px; */
    padding: 15px;
    border: 1px solid #8080802b;
    background-color: white !important;
}
.order_flex {
    display: flex;
    align-items: center;
}
.order_type {
    font-size: 13px;
    /* width: 40px;
    height: 40px; */
    padding: 10px 6px;
    display: grid;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
    color: rgb(32, 32, 32);
    border-radius: 5px;
    background-color: #2b3d520f;
}
.order_type_name, .order_states {
    display: grid;
}
.order_type_name span:nth-child(1) {
    font-size: 16px;
    /* margin-bottom: 10px; */
    /* width: 200px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
/* .right {
    margin-left: 25px;
} */
.order_state_running {
    width: 150px;
    font-size: 14px;
    display: flex;
    margin-left: 10px !important;
    align-items: center;
    /* padding: 5px; */
    justify-content: center !important;
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 5px;
    background-color: #2d7fc7;
}
.order_state_inprogress {
    width: 150px;
    font-size: 14px;
    display: flex;
    margin-left: 10px !important;
    align-items: center;
    /* padding: 5px; */
    justify-content: center !important;
    color: rgb(32, 32, 32);
    text-align: center;
    border-radius: 5px;
    background-color: #ffc52fb8;
}
.payment_verify_items_operator {
    /* width: 150px; */
    padding: 5px;
    font-size: 14px;
    display: flex;
    margin-left: 10px !important;
    align-items: center;
    /* padding: 5px; */
    justify-content: center !important;
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 5px;
    background-color: #369d69;
}
.order_state_ready {
    width: 150px;
    font-size: 14px;
    display: flex;
    margin-left: 10px !important;
    align-items: center;
    /* padding: 5px; */
    justify-content: center !important;
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 5px;
    background-color: #369d69;
}
.order_state_ready_success {
    width: 150px;
    font-size: 14px;
    display: flex;
    margin-left: 10px !important;
    align-items: center;
    /* padding: 5px; */
    justify-content: center !important;
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 5px;
    background-color: #369d69;
}
.spinner-grow {
    width: 10px !important;
    height: 10px !important;
    /* animation-delay: 1.5s !important; */
    animation-duration: 2s !important;
    margin-right: 5px !important;
}
.icon_ready {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background-color: #2dc76d;
}
.icon_inprogress {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background-color: #ffc52f;
}
.flex_states {
    display: flex;
    align-items: center;
    /* margin-top: 2px; */
}
.control_grid {
    /* max-width: 70%; */
    width: 100%;
    margin: 0 auto;
    display: grid;
    /* grid-gap: 10px; */
    /* padding-top: 75px; */
    /* grid-template-columns: 250px 1fr !important; */
}
/* .grid_index_items {
    display: grid;
    grid-template-columns: 250px 1fr;
} */
.acc_first_grid {
    display: grid;
}
.right_command {
    border-left: 1px solid #8f8f8f42;
    padding: 45px;
    /* height: 100vh; */
    position: relative;
}
.right_fixed {
    width: 100%;
    height: 63vh;
    /* position: fixed; */
    /* overflow-y: auto; */
    background-color: white;
}
.right_detail {
    margin-top: 10px;
    /* display: flex;
    align-items: center; */
}
.right_detail h4 {
    color: gray !important;
    /* color:#2d88c7; */
    margin-bottom: 5px;
    font-size: 14px !important;
}
.right_detail input {
    border: none;
    outline: none;
    padding: 10px;
    background-color: #bbbbbb26;
}
.detail_margin {
    /* margin-bottom: 5px; */
    color: gray;
}
.menu_order_righted {
    transition: all 0.3s ease;
    position: relative;
    /* border-right: 1px solid #bdbcbc40;  */
    margin-bottom: 0px;
    padding-bottom: 18px;
    padding-top: 10px;
    /* margin-right: 20px; */
}
.size_items {
    font-weight: bold;
}
.list_right_orders_detailed {
    height: max-content;
    /* margin-top: 8px; */
    display: flex;
    position: relative !important;
    align-items: center;
    border-radius: 5px !important;
    margin-bottom: 9px;
    padding: 15px;
    margin-right: 10px;
    background-color: white;
    box-shadow: 10px 5px 50px #cacaca2e;
    opacity: 0;
    transform: translateY(10px); /* เริ่มต้นจากด้านล่าง */
    transition: .15s;

    /* z-index: -1; */
}
.menu_order_righted .list_right_orders_detailed:hover {
    /* background-color: rgba(242, 244, 245, 0.562); */
    background-color: rgba(15, 37, 203, 0.075) !important;
}
.grid_contents .list_right_orders_detailed {
    opacity: 1;
    transform: translateY(0);
}
.menu_order_righted:not(.grid_contents) .list_right_orders_detailed {
    opacity: 1;
    transform: translateY(0);
}
.list_right_orders_detailed {
    opacity: 0; /* เริ่มต้นที่โปร่งใส */
    transform: translateY(10px); /* เริ่มต้นจากด้านล่าง */
    transition: opacity 0.3s ease, transform 0.3s ease; /* ทำให้มี transition สำหรับ opacity และ transform */
}
.grid_contents .list_right_orders_detailed {
    opacity: 1; /* เมื่ออยู่ใน grid_contents จะปรากฏ */
    transform: translateY(0); /* ย้ายขึ้นมาจากตำแหน่งเดิม */
}
.menu_order_righted .list_right_orders_detailed {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.hd_right_comd_detailed {
    padding: 30px 0;
    padding-top: 15px !important;
}
.hd_right_comd_detailed h3 {
    font-size: 18px !important;
    margin-bottom: 0px !important;
}
.order_food_price {
    /* color: rgb(27, 27, 27); */
    color: rgb(74 141 69);
    /* position: absolute; */
    font-size: 15px !important;
    /* right: 120px; */
    text-align: left;
    font-weight: 500;
    margin-top: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
.numbers_food_order {
    display: flex;
    align-items: center;
    color: rgb(0, 0, 0) !important;
    /* background-color: black; */
    /* padding: 8px; */
    border-radius: 5px;
    /* margin-right: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.order_name_repeat {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
}
.order_name_repeat:last-child {
    margin-bottom: 0px;
}
.flex_total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-right: 20px; */
    margin-bottom: 10px;
}
.flex_total h4 {
    font-size: 13px;
}
.flex_total h4:nth-child(1) {
    color: gray;
    margin-right: 50px !important;
}
/* .flex_total h4:nth-child(2) {
    position: absolute;
    right: 80px;
} */
.order_right_sum_fixed {
    /* position: fixed; */
    bottom: 20px;
    height: max-content;
    margin-left: 10px;
    /* width: 450px; */
    padding: 25px;
    border-radius: 20px !important;
    margin-top: 10px;
    /* padding-left: 20px; */
    /* padding-bottom: 0px !important; */
    /* border-radius: 5px; */
    /* background-color: #afadad26; */
    /* border-top: 1px solid #8f8f8f42; */
    box-shadow: 0px -5px 22px #cacaca3d;
}
.order_fixed_items_sum {
    width: 100%;
    /* display: flex; */
    display: grid;
    /* border-top: 1px solid #80808029 !important; */
    /* border-right: 1px solid #80808029 !important; */
    /* justify-content: space-between !important; */
    grid-template-columns: 65% 1fr;
}
.message {
    color: red;
    font-size: 14px;
    margin-bottom: 5px;
}
.btn_pay {
    outline: none;
    border: none;
    color: white;
    border-radius: 5px;
    width: 100%;
    padding: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: .15s;
    /* background-color: #2dc76d; */
    background-color: rgb(15 38 203 / 71%) !important;
    /* box-shadow: 0px 5px 15px rgb(0 0 0 / 58%); */
}
.btn_pay:hover {
    width: 120%;
    transition: .15s;
    background-color: rgba(15, 32, 163, 0.71) !important;
}
.btn_pay:disabled {
    background-color: #d6d6d6; /* Gray color */
    color: #a0a0a0; /* Light gray text */
    cursor: not-allowed; /* Show a ban cursor */
}
.btn_cancel_orders {
    outline: none;
    border: none;
    color: rgb(34, 34, 34);
    border-radius: 5px;
    width: 50%;
    padding: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: .15s;
    background-color: #e9ebea !important;
}
.btn_cancel_orders:hover {
    transition: .15s;
    background-color: #d0d3d1 !important;
}
.index_confirm {
    /* width: 130px !important; */
    padding: 12px !important;

    outline: none;
    border: none;
    color: rgb(34, 34, 34);
    border-radius: 5px;
    width: 50%;
    padding: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: .25s;
    background-color: #e9ebea !important;
}
.menu_list_category_flex::-webkit-scrollbar {
    display: none; /* สำหรับ Chrome, Safari, และ Edge */
}
.scroll-btn {
    background-color: #dddddd0c;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    /* position: absolute; */
    top: 25px;
    bottom: 0;
    width: 70px;
    height: 50px;
    /* border-radius: 5px; */
    backdrop-filter: saturate(180%) blur(20px);
}
.scroll-btn.left {
    left: 0;
}
.scroll-btn.right {
    right: 0;
}
.scroll-btn:hover {
    background-color: #bbbbbb31;
}
.menu_list_category_flex:active {
    cursor: grabbing; /* เปลี่ยน cursor เป็นมือเมื่อกดเมาส์ค้าง */
}
.menu_list_flex {
    display: grid;
    /* padding: 10px 0; */
    grid-gap: 20px;
    position: relative !important;
    grid-template-columns: repeat(4,1fr);
}
.menu_list_flex.list-view {
    grid-template-columns: 1fr; /* List View */
}
.list-view .for_listFlex_left {
    justify-content: left !important;
}
.list-view img {
    width: 200px !important;
}
.list-view .menu_boxed_with_img {
    display: flex;
}
.list-view .menu_img_container {
    width: auto;
    height: 100%;
    border-radius: 10px;
    margin-right: 10px;
}
.list-view .cate_stars .fa-star {
    font-size: 10px;
}
.list-view .desc_contents {
    padding-top: 0;
    margin-top: 0;
    width: 100%;
}
.list-view .title_box_margin {
    height: unset;
}
.list-view .menu_boxed_with_img {
    border: none;
}
.list-view .quantity_control {
    justify-content: left;
}
.list-view .box_price {
    text-align: left;
    margin-left: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.list-view .name_menu_title {
    font-size: 18px;
}
.list-view .badge_salad {
    height: 95px;
}
.list-view .desc_contents {
    box-shadow: 0px 5px 15px #00000003;
}
.view-toggle {
    margin-bottom: 25px;
}
.view-toggle #gridViewBtn, 
.view-toggle #listViewBtn {
    outline: none;
    border: none;
    padding: 6px;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    background-color: rgba(85, 101, 218, 0.349);
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
}

/* เมื่อปุ่มถูก active */
.view-toggle #gridViewBtn.active, 
.view-toggle #listViewBtn.active {
    background-color: rgb(85, 101, 218);
}

.menu_boxed div:nth-child(3) {
    font-weight: 500;
}
.menus_activated {
    /* color: white !important; */
    /* background-color: #2dc76d; */
    /* background-color: #1f3751 !important; */
    /* background-color: transparent !important; */
    background-color: #dce5ff !important;
    /* background-color: #13244d; */
}
.menus_activated .name_menu_title {
    font-weight: 500;
    color: #2546bb !important;
    /* color: rgb(255, 255, 255) !important; */
}
.menus_activated .rows_cates {
    /* color: rgb(235 235 235) !important; */
    color: #efeff1 !important;
    padding: 5px;
    border-radius: 5px;
    background-color: rgb(15 38 203 / 71%) !important;
}
.menus_activated .icon_box {
    color: #2546bb !important;
}
.fa-bowl-rice, 
.fa-bottle-droplet, 
.fa-bread-slice, 
.fa-cake-candles, 
.fa-cheese {
    /* font-size: 24px; */
    /* color: #2dc76d; */
    /* color: rgb(190, 190, 190) !important; */
    transition: color 0.15s;
}
.icon_box {
    /* font-size: 22px !important; */
    /* margin-bottom: 15px; */
    color: rgb(222, 225, 228) !important;
    display: flex;
}
.menu_boxed:hover .icon_box {
    /* color: rgb(30, 107, 49) !important; */
    color: rgb(190, 190, 190) !important;
    /* color: #533afd !important; */
}
.menu_boxed:hover .menus_activated .rows_cates {
    color: rgb(255, 255, 255) !important;
}
.menu_img_container {
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative !important;
    overflow: hidden; /* ป้องกัน fade ล้นขอบ */

    background-color: white;
}
.menu_img_container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* กำหนดความสูงของ fade */
    background: linear-gradient(to top, rgb(0 0 0 / 37%), rgba(0, 0, 0, 0));
    pointer-events: none; /* ไม่ให้ element ขัดการคลิก */
}
.badge_salad {
    position: absolute !important;
    bottom: 0;
    right: 0;
    box-shadow: 0px 5px 10px rgb(58 58 58 / 19%);
}
.menu_img_container img {
    width: 100%;
    border-radius: 10px;
    /* border: 10px !important; */
    /* max-width: 150px !important; */
}
.menu_boxed_with_img {
    /* padding: 15px; */
    width: 100%;
    height: min-content;
    border-radius: 10px;
    position: relative !important;
    /* background-color: white !important; */
    border: 1px solid #b4b4b442;
    transition: .15s;
    /* cursor: pointer; */
    /* box-shadow: 0px 5px 10px #00000014; */
}
/* .border_moon {
    width: 100% !important;
    height: 300px;
    background-repeat: no-repeat;
    
    background-image: 
        linear-gradient(to right, #d19e1d2e, #ffefc4e6, #e3a81224);
    
    background-size: cover;
    background-position: center;
} */
.bg_border {
    border: 1px solid rgba(255, 217, 0, 0.432);
    border-radius: 5px;
}
.top_left {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto;
    background-image: linear-gradient(to right, rgb(209 158 29 / 32%), rgb(255 239 196 / 51%), rgb(227 168 18 / 30%)), url(../img/border/top_left.png);
}
.vid_content {
    position: absolute;
    
    width: 100%;
    z-index: -1;
}
.video-background {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    background-color: #9b9b9b;
    filter: brightness(10%) blur(0px);
  }
  
.this_new {
    position: relative !important;
}
.new_alert_pros {
    position: absolute;
    right: -30px;
    color: white !important;
    background-color: red !important;
    top: -10px;
    font-size: 10px !important;
    padding: 3px 7px;
    border-radius: 5px;
}
.menu_boxed_with_img:hover {
    border-radius: 10px;
    /* border: 1px solid rgba(15, 37, 203, 0.418); */
    /* background-color: rgb(15 38 203 / 71%) !important; */
}
.title_box_margin {
    margin: 10px 0;
    display: -webkit-box; /* Enable line clamping */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Vertical orientation */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    align-items: center;
    justify-content: space-between;
    height: 50px;
}
.box_price {
    width: 100%;
    font-weight: 500;
    text-align: right;
}
.spinner-border {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px !important;
    border-width: 2px !important;
    animation-duration: 2s !important;
}
.basket {
    /* position: fixed; */
    position: relative;
    /* padding: 10px 20px; */
    border-radius: 5px;
    cursor: pointer;
    transition: .15s;
    /* background-color: #e6efff; */
}
.basket:hover {
    transition: .15s;
    /* background-color: #a9b1c0; */
}
.fa-bag-shopping {
    font-size: 19px !important;
}
.top_sub_list li a {
    color: rgb(15 15 16 / 73%) !important;
}
.basket_inorder {
    top: -15px;
    right: -20px;
    display: grid;
    
    width: 25px;
    font-size: 12px;
    height: 25px;
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: red;
    position: absolute;
    border: 1px solid white !important;

    font-family: Arial, Helvetica, sans-serif !important;
}
.menu_boxed_with_img .btn_mobile {
    position: absolute;
    /* bottom: 150px; */
    left: 0;
}
/* Initially hide the right_command */
.right_command {
    position: fixed;
    right: -100%;
    background: white;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition: right 0.8s ease, transform 0.4s ease; */
}

/* Show the right_command in the center of the screen */
.right_command.show {
    right: 50%;
    border-radius: 10px;
    top: 50%;
    transform: translate(50%, -50%);
    width: 45%;
    height: auto;
    border: 1px solid #80808045;
    /* transition: right 0.4s ease, transform 0.4s ease; */
}
/* Overlay style */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: none; /* Hidden by default */
    z-index: 1000; /* Make sure it's above other elements */
}
/* Show overlay and prevent scrolling */
.overlay.show {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}
/* ป้องกันการ scroll เมื่อแสดง popup */
body.modal-open {
    overflow: hidden;
}
/* ปุ่มปิด */
.close-btn {
    /* display: none !important; */
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    cursor: pointer;
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 0px 10px 0px 0px;
    color: gray;
    width: 55px;
    height: 55px;
    font-size: 20px;
    transition: .15s;
    background-color: rgb(235 235 235);
}
.close-btn:hover {
    color: white;
    transition: .15s;
    background-color: #2dc76d;
}
.modal-header {
    text-align: left;
    display: grid !important;
    border-bottom: none !important;
}
.width_sort {
    width: 100%;
    text-align: left;
    color: gray;
}
/* .close-btn {
    font-size: 25px;
    transition: .15s;
}
.close-btn:hover {
    color: #2dc76d;
    transition: .15s;
} */
.order_name_delivers, .order_name_repeat {
    font-size: 14px;
}
.order_name_delivers {
    /* width: 300px; */
    text-align: left;
    /* padding-left: 10px; */
}
.img_cart_items {
    margin-right: 10px;
    /* border-right: 1px solid #8080802e; */
}
.img_cart_items img {
    width: 100px !important;
    border-radius: 5px !important;
}
.items_cart_flex_in {
    display: flex;
    align-items: center;
}
.flex_stricky {
    /* position: sticky; */
    top: 75px;
    z-index: 1;
    /* padding: 25px; */
    /* border-radius: 0px 0px 10px 10px; */
    /* background-color: rgb(255 255 255 / 81%); */
    /* box-shadow: -5px 0 5px rgb(0 0 0 / 4%); */
    /* border-bottom: 1px solid #8f8f8f42; */
    /* backdrop-filter: saturate(180%) blur(20px); */
}
.quantity_control {
    margin-top: 25px;
    width: 100%;
    display: flex;
    align-items: center;
    /* text-align: right; */
    justify-content: center;
    /* background-color: gray; */
}
.flex_menu_list_qty {
    /* display: flex; */
    display: grid;
    align-items: center;
    /* padding: 0 15px; */
    padding-bottom: 15px;
}
.btn-decrease, .btn-increase {
    outline: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    transition: .15s;
}
.btn-decrease-cart, .btn-increase-cart {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    border-radius: 3px;
    color: rgb(24, 23, 23);
    /* background-color: gainsboro !important; */
    background-color: rgb(160 168 227 / 17%) !important;
}
.quantity_display_cart {
    margin: 0px;
    color: rgb(0, 0, 0);
    padding: 3px 10px;
    border-radius: 3px;
    /* background-color: #369d69 !important; */
}
.btn-remove-item {
    border: none;
    outline: none;
    font-size: 16px;
    color: #80808085;
    margin-left: 10px;
    top: 3px;
    right: 5px;
    position: absolute !important;
    background-color: transparent;
}
.btn-decrease:hover, .btn-increase:hover {
    transition: .15s;
    background-color: rgb(177, 177, 177);
}
.quantity_display {
    margin: 0 10px;
    font-weight: 500;
}
.btn_add_tocard {
    border: none;
    outline: none;
    width: 45px;
    height: 35px;
    color: white;
    border-radius: 5px;
    transition: .15s;
    margin-left: 5px;
    background-color: #2dc76d;
}
.btn_add_tocard:hover {
    transition: .15s;
    background-color: #1f864a;
}
.total_real_amount {
    color: #2d88c7;
    background: #2d88c729;
    border-radius: 5px;
    padding: 5px;
}
.settings_list {
    width: 200px;
    height: 100%;
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    /* padding: 90px 0; */
    /* border-right: 1px solid #8f8f8f29; */
    /* background-color: gray; */
}
.list_set_grid {
    display: grid;
    margin-top: 25px;
    /* position: fixed; */
    position: sticky;
    top: 90px;
}
.list_set_grid a {
    color: gray;
    padding: 10px;
    font-size: 14px !important;
    width: 170px;
    transition: .15s;
    /* margin-top: 10px; */
}
.list_set_grid a:hover {
    color: white;
    border-radius: 5px;
    transition: .15s;
    background-color: rgba(15, 37, 203, 0.445) !important;
}
.acc_grid {
    max-width: 70%;
    width: 100%;
    display: grid;
    margin: 0 auto;
    padding: 0px;
    /* padding: 0 45px; */
    grid-template-columns: 250px 1fr;
}
.acc_right {
    width: 100%;
    padding: 30px 0px;
}
.acc_box {
    display: flex;
    align-items: center;
    /* margin-top: 50px; */
}
.grid_2_info {
    display: grid !important;
    grid-gap: 15px;
    grid-template-columns: repeat(2,1fr);
}
.grid_2_info input {
    width: 100% !important;
}
.grid_2_info label {
    color: gray !important;
    font-size: 14px !important;
}
/* .grid_2_info select {
    width: 100% !important;
} */
.info_users {
    padding: 30px;
    margin-top: 25px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0px 5px 15px #a9a6a630;
}
#total-count {
    color: #2d7fc7 !important;
}
#content {
    padding-top: 100px;
    padding-left: 50px;
}
.info_users h5 {
    /* margin-bottom: 22px; */
    padding-bottom: 15px;
    /* border-bottom: 1px solid #8f8f8f42; */
}
.acc_box input {
    /* width: 500px !important; */
    padding: 10px;
    font-size: 14px;
}
.no_flex {
    display: block !important;
}
.no_flex label {
    color: gray;
    font-size: 14px;
}
.mb-3 {
    margin-right: 15px;
}
.acc_header {
    /* max-width: 70%; */
    width: 100%;
    margin: 0 auto;
    /* top: 100px; */
    /* z-index: 1; */
    /* left: 0 !important; */
    /* height: 65px; */
    /* padding: 0 45px; */
    /* display: grid; */
    color: #13244d;
    align-items: center;
    /* position: absolute; */
    background-color: #3f578f26;
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 5px;
}
.acc_header h3 {
    /* width: 80%; */
    margin: 0 auto;
    padding: 15px;
    margin-bottom: 0px;
}
.acc_box label {
    color: gray;
}
.form-select {
    width: 250px !important;
    padding: 9px !important;
    /* padding-right: 0px !important; */
}
.btn_submit_acc {
    width: 150px;
    height: 45px;
    border: none;
    outline: none;
    color: white;
    border-radius: 5px;
    transition: .15s;
    margin-top: 25px;
    /* background-color: rgb(15 38 203 / 71%) !important; */
    background-color: rgb(15 38 203 / 71%) !important;
    /* background-color: #3f578f; */
}
.btn_submit_acc:hover {
    transition: .15s;
    background-color: #1e2f57;
}
.side_active {
    width: 170px;
    padding: 10px;
    border-radius: 10px;
    color: white !important;
    /* background-color: #3f578f; */
    background-color: rgb(15 38 203 / 71%) !important;
}
.acc_add_Left h3 {
    margin-bottom: 20px;
}
.acc_add_grid {
    width: 100%;
    display: grid;
    grid-gap: 20px;
    height: max-content;
    grid-template-columns: repeat(2,1fr);
}
.acc_add_Left, .acc_add_right {
    padding: 25px;
    border-radius: 5px;
    /* height: 400px; */
    height: max-content;
    background-color: white;
    border: 1px solid #8080803d;
}
.acc_add_grid input {
    width: 100% !important;
}
.add_pro_img_preview {
    margin-top: 15px;
    padding: 25px;
    border-radius: 5px;
    display: grid;
    grid-gap: 10px;
    justify-items: center;
    /* grid-template-columns: repeat(5,1fr); */
    border: 1px solid #8080803d;
}
.add_pro_img_preview img {
    max-width: 35%;
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;
    /* background-color: #80808014; */
}
.add_pro_img_preview img:last-child {
    margin-right: 0px;
}
.acc_add_right select {
    /* width: 100% !important; */
    margin-top: 20px;
}
.selected_items, .selected_status {
    width: 100% !important;
}
.sub_menu_grid {
    margin-top: 30px;
}
.btn_update {
    transition: .15s;
    background-color: #3f8f75 !important;
}
.btn_update:hover {
    transition: .15s;
    background-color: #215f4b !important;
}
.menu_active_food {
    color: white;
    padding: 5px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 13px;
    border-radius: 5px;
    background-color: #1f864a;
}
.menu_inactive_food {
    color: white;
    padding: 5px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 13px;
    border-radius: 5px;
    z-index: 1 !important;
    background-color: #d36719;
}
.btn_pc {
    display: block;
}
@media only screen and (max-width: 420px) {
    .img_cart_items img {
        width: 80px !important;
    }
    .flex_btn_pay {
        display: grid !important;
    }
}
@media only screen and (max-width: 1200px) {
    .flex_btn_const {
        margin-top: 0px !important;
    }
    .order_fixed_items_sum {
        border-top: none !important;
    }
    .empty-cart-message {
        margin-right: 0px !important;
    }
    .order_right_sum_fixed {
        background-color: unset !important;
        margin-left: 0px;
    }
    .hd_sr .ip_head {
        display: none;
    }
    .order_list_menu_latest {
        width: 100%;
    }
    .list_right_orders_detailed {
        margin-right: 0px !important;
    }
    .list_flex {
        grid-template-columns: repeat(2,1fr);
    }
    .menu_img_container img {
        width: 100%;
    }
    .menu_list_flex {
        grid-template-columns: repeat(3,1fr) !important;
    }
    .order_list {
        width: 100%;
    }
    .footer_body_grid {
        width: 100% !important;
    }
    .order_fixed_items_sum {
        grid-template-columns: 1fr;
    }
    .menu_order_righted {
        height: 42vh;
        border-right: unset !important;
    }
}
/* .scroller {
    width: 100% !important;
    overflow-x: auto !important;
} */
@media only screen and (min-width: 1500px) {
    .cards-container {
        display: none; /* ซ่อนการแสดงข้อมูลแบบการ์ด */
    }
    .info_users {
        display: block; /* แสดงตาราง */
    }
    
}
@media only screen and (max-width: 1500px) {
    .order_grid {
        display: unset !important;
    }
    .scroller {
        display: none;
    }
    
    .cards-container {
        /* margin-top: 80px !important; */
        display: block !important; /* แสดงข้อมูลแบบการ์ด */
    }

    .card {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card h4 {
        margin-bottom: 10px;
        color: #333;
    }

    .card p {
        margin: 5px 0;
        font-size: 14px;
        color: #555;
    }

    .login_container {
        width: 100% !important;
    }
    .acc_grid {
        grid-template-columns: 1fr !important;
    }
    .settings_list {
        display: none !important;
    }
}
@media only screen and (max-width: 1100px) {
    .hd_menu_const {
        display: none;
    }
    .acc_right {
        padding: 0px !important;
    }
    .acc_header h3 {
        margin: unset !important;
    }
    .signin_display {
        display: block !important;
    }
}
@media only screen and (max-width: 1000px) {
    .flex_grd_items_index {
        grid-template-columns: 250px 1fr !important;
    }
    .maps_contents {
        width: 90% !important;
    }
    .content_view {
        display: none !important;
    }
    .content_view div:nth-child(1) {
        display: none !important;
    }
    .acc_header h3 {
        padding: 10px !important;
        width: 100% !important;
    }
    .menu_boxed {
        font-size: 13px !important;
    }
    .total_inorders {
        display: grid !important;
    }
    .acc_header {
        text-align: center;
        padding: 15px !important;
    }
    /* .item_names_first {
        width: 100% !important;
    } */
    .items_orders_summary {
        width: 100% !important;
    }
    /* .flex_orders_list {
        display: grid !important;
        grid-template-columns: 1fr !important;
    } */
    .menus_items_qty {
        width: 100% !important;
        margin: 0px !important;
    }
    .order_id_input {
        width: 100% !important;
    }
    .menus_items_price {
        width: 100% !important;
        margin: 0px !important;
    }
    .hd_badge {
        display: none !important;
    }
    .topics_shipped {
        margin-top: 25px !important;
    }
    .badge_resp {
        width: 100px !important;
    }
    .flex_class {
        display: grid !important;
    }
    /* .login_body_input .mb-3 {
        margin-bottom: 5px !important;
    } */
    .flex_menu_list_qty {
        display: grid !important;
    }
    .box_price {
        text-align: center;
    }
    /* .menu_boxed {
        flex: 0 0 200px !important;
    } */
    .title_box_margin {
        justify-content: center;
    }
    .quantity_control {
        margin-top: 15px;
        justify-content: center;
    }
    .menu_img_container, .menu_img_container img {
        width: 100%;
    }
    .menu_list_flex {
        width: 100% !important;
    }
    .scroll-btn {
        width: 25px;
    }
    .box_price {
        text-align: right !important;
    }
    .order_list {
        padding: unset !important;
    }
    .flex_stricky {
        display: none !important;
    }
    .menu_list_flex {
        grid-template-columns: repeat(3,1fr) !important;
    }
    .hd_body, .hd_top {
        padding: 10px !important;
    }
    * {
        transition: none !important;
    }
    /* .order_confirm_detailed * {
        width: 100%;
    } */
    .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
        border: none !important;
    }
}
.btn_cart_mobile {
    border: none !important;
    outline: none !important;
    background-color: rgb(15 38 203 / 71%) !important;
}
@media only screen and (max-width: 800px) {
    .level {
        display: none;
    }
    .video-background {
        display: none !important;
    }
    .profile-container {
        position: absolute !important;
        left: 10px;
        margin-right: 0px;
        /* display: none !important; */
    }
    .btn_cart_mobile {
        background-color: #eef4ff !important;
    }
    .btn_cart_mobile .fa-cart-shopping {
        color: rgb(255, 255, 255) !important;
    }
    /* .hd_container {
        background-color: #00b14f !important;
    } */
    .hd_profiles_name h4 {
        color: rgb(248, 248, 248) !important;
        font-size: 13px !important;
        width: 100% !important;
        margin-right: 15px !important;
    }
    .menus_activated {
        /* background-color: #00b14f !important; */
        background-color: transparent !important;
    }
    .hd_profiles_name span {
        color: rgb(224, 224, 224) !important;
    }
    .name_menu_title {
        font-size: 14px !important;
    }
    .index_cate {
        display: none;
    }
    .quantity_control {
        justify-content: right;
    }
    .flex_menu_list_qty {
       padding-bottom: 0px !important;
    }
    .menu_boxed_with_img:hover {
        border: none;
    }
    .btn_pc {
        /* position: absolute; */
        right: 10px;
        bottom: 10px;
    }
    .btn-decrease, .btn-increase, .quantity_display {
        display: none;
    }
    /* .box_price {
        text-align: left !important;
    } */
    /* .option_sized {
        display: none !important;
    } */
    .grid_2_info {
        grid-template-columns: 1fr !important;
    }
    .product_desc_p {
        display: none !important;
    }
    .menu_boxed_with_img {
        border: none;
    }
    /* .menu_img_container, .menu_img_container img {
        border-radius: 10px !important;
    } */
    .desc_contents {
        background-color: transparent !important;
    }
    .flex_adrs {
        display: grid !important;
    }
    #save_maps {
        margin-top: 25px !important;
    }
    .mb-3 select {
        width: 100% !important;
    }
    .cre_icons {
        margin-top: 35px !important;
    }
    textarea.form-control {
        font-size: 14px !important;
    }
    /* .h5_gm {
        margin-top: 30px !important;
    } */
    .info_users {
        margin-top: 30px !important;
    }
    /* .hd_logo {
        display: none !important;
    } */
}
@media only screen and (max-width: 700px) {
    .acc_add_grid {
        grid-template-columns: 1fr !important;
    }
}
.nav_items_bottom a {
    color: rgb(54, 54, 54);
    display: flex; /* ใช้ flex เพื่อจัดการการจัดแนว */
    align-items: center; /* จัดแนวกลางในแนวตั้ง */
    justify-content: center; /* จัดแนวกลางในแนวนอน */
    padding: 10px;
    font-size: 13px;
    text-decoration: none; /* ลบขีดเส้นใต้ */
    flex-direction: column; /* จัดให้ icon อยู่เหนือ text (ถ้าต้องการ) */
}
.nav_items_bottom a:hover {
    background-color: gainsboro;
}
.nav_items_bottom {
    display: grid;
    position: fixed;
    width: 100%;
    bottom: 0;
    /* height: 50px; */
    z-index: 999;
    background-color: white !important;
    grid-template-columns: repeat(3, 1fr);
    box-shadow: 0px 5px 20px #00000024;
}
.nav_items_bottom span {
    margin-top: 5px;
}
.nav_items_bottom a.bottom_active {
    color: #139113; /* สีเขียวเมื่อ active */
    /* background-color: #f0f0f0; สีพื้นหลัง */
}
@media only screen and (min-width: 650px) {
    .nav_items_bottom {
        display: none !important;
    }
    .index_confirm {
        margin-bottom: unset !important;
    }
    /* .spacer_max_with_index {
        padding-right: 20px !important;
    } */
}
@media only screen and (max-width: 650px) {
    /* #reportTable tr td , #demoTables tr td {
        width: auto !important;
    } */
    .desc_contents {
        background-color: white !important;
    }
    .flex_grd_items_index {
        grid-template-columns: unset !important;
    }
    .banner, .messenger-button {
        display: none !important;
    }
    .spacer_max_with_index {
        padding-right: 0px !important;
    }
    /* .btn_submit_acc {
        margin-bottom: 50px !important;
    } */
    .info_users:last-child {
        margin-bottom: 80px;
    }
    .menu_boxed {
        font-size: 13px !important;
    }
    .menu_list_category_flex {
        grid-template-columns: repeat(3,1fr) !important;
    }
    .menu-container {
        position: unset !important;
        padding-left: 20px !important;
    }
    .footer {
        display: none !important;
    }
    .menu_list_flex {
        margin-bottom: 70px;
    }
    .grid_index_items {
        grid-template-columns: 1fr !important;
    }
}
@media only screen and (max-width: 450px) {
    .view-toggle {
        display: none;
    }
    .alert_items_no_adds {
        margin-top: 20px;
    }
    .menu_list_category_flex {
        grid-template-columns: repeat(2,1fr) !important;
    }
    #mobiles_contents {
        display: block !important;
        top: 55px !important;
    }
    #items_pc {
        display: none !important;
    }
    #selectedCategory {
        display: none !important;
    }
    .menu-container {
        display: none !important;
    }
    .flex_grd_items_index {
        gap: 0 !important;
        padding: 0 10px !important;
    }
}
@media only screen and (max-width: 1000px) {
    .acc_index_head {
        margin-top: 35px !important;
        margin-left: 15px;
    }
    .cart_items {
        margin-left: 15px !important;
    }
    .list_flex {
        grid-template-columns: 1fr;
    }
    .menu_img_container {
        justify-content: unset !important;
    }
    .scroll-btn.left, .scroll-btn.right {
        display: none !important;
    }
    .login_grid_ctn {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    .login_banner_container_ads_body .banner_contents {
        display: none !important;
    }
    .login_banner_container_ads {
        height: unset !important;
    }
    .login_container {
        display: grid !important;
        align-items: center !important;
        height: 100vh !important;
    }
    .order_type {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }
    .flex_stricky {
        height: 200px;
        overflow: auto;
    }
    .footer_body_grid {
        display: grid !important;
    }
    .footer_boxed:nth-child(2) {
        display: none !important;
    }
    .footer_body_grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .menu_list_flex {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .menu_boxed {
        margin: 0px !important;
        width: 100% !important;
    }
    .scroll-btn {
        padding: 0px !important;
    }
}
@media only screen and (min-width: 600px) {
    .flex_items_orderd {
        display: none !important;
    }
    .flex_pages {
        display: none !important;
    }
}
#maps_acc {
    position: relative !important;
    z-index: 0 !important;
}
@media only screen and (max-width: 600px) {
    .content_view {
        margin-top: -10px;
    }
    .total_inorders {
        display: grid !important;
        margin-bottom: 12px !important;
        /* justify-content: space-between !important; */
    }
    .top_orders_number {
        margin-bottom: 20px;
    }
    .btn_pay_orders, .btn_pay_orders_submit {
        width: 100% !important;
    }
    
    .order_confirm_detailed .spinner-border {
        width: 20px !important;
    }
    .date_created {
        font-size: 14px !important;
    }
    .adr_pins_flex {
        display: grid !important;
    }
    .locale_content {
        margin-top: 20px;
    }
    .card h4 {
        font-size: 15px !important;
    }
    .flex_orders_list {
        display: none !important;
    }
    .flex_items_orderd {
        margin-bottom: 15px !important;
    }
    .order_confirm_detailed * {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
    #order_listed_url {
        display: none !important;
    }
    /* .no_width * {
        width: 100% !important;
    } */
    .flex_als_infex {
        display: flex !important;
        align-items: start !important;
        justify-content: space-between !important;
    }
    .h3_sum {
        margin-bottom: 0px !important;
    }
    .acc_header {
        top: 125px;
    }
    /* .item_names_first {
        width: 100% !important;
    } */
    #map {
        height: 425px !important;
    }
    .order_list_menu_latest {
        justify-content: space-between;
    }
    .hd_badge_member {
        display: none !important;
    }
    .modal-content {
        width: 100% !important;
    }
    .hd_badge {
        display: none !important;
    }
    .hd_logo img {
        width: 100px;
    }
    .hd_body {
        padding: 0 30px;
    }
    .right_command {
        width: 100% !important;
    }
    /* .order_list {
        padding: 10px;
    } */
    .order_state_inprogress {
        font-size: 13px;
    }
}
@media only screen and (max-width: 900px) {
    .grid_flex_items_all_index {
        grid-template-columns: 1fr !important;
    }
    .h3_mobile_head_right {
        margin-bottom: 10px !important;
    }
    .acc_grid {
        width: 100%;
        padding: 0 10px;
        max-width: unset !important;
        grid-template-columns: 1fr !important;
    }
    .info_users {
        margin-top: 10px;
    }
    .settings_list {
        display: none !important;
    }
    .flex_grd_items_index {
        width: 100% !important;
        padding: 0 10px;
        max-width: unset !important;
    }
    .hd_top , .hd_container {
        width: 100%;
        padding: 0 10px;
        max-width: unset !important;
    }
}
.id_auth {
    width: auto !important;
    max-width: 200px;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media only screen and (max-width: 500px) {
    .acc_header {
        margin-top: 0 !important;
    }
    .acc_index_head {
        padding-top: 0px !important;
    }
    .right_product_desc {
        padding: 45px 20px !important;
        padding-top: 0 !important;
    }
    .hd_container {
        padding: unset !important;
    }
    .breadcrumbs_pages {
        /* width: 100%; */
        padding: 45px 20px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #00000012 !important;
    }
    .product_items_name_section {
        font-size: 18px !important;
    }
    .product_id {
        display: grid !important;
    }
    .product_id span {
        margin-left: 0 !important;
    }
    .mb-3 {
        margin-right: 0px !important;
    }
    .mobile_width {
        width: 100% !important;
        text-align: center !important;
    }
    .list_right_orders_detailed {
        padding: 10px;
    }
    .box_mailers {
        max-width: 100px;
        overflow: hidden !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .all_acc_selecter {
        padding: 10px !important;
    }
    .acc_type {
        display: grid !important;
    }
    .acc_flex_all {
        display: grid !important;
        margin-bottom: 15px !important;
        gap: 0px !important;
    }
    #getLocationLink {
        margin-left: 0px !important;
    }
    .menu_boxed {
        padding: 5px !important;
    }
    .btn_pay {
        padding: 10px;
        background-color: rgb(124 90 255) !important;
    }
    .btn_cancel_orders {
        padding: 10px;
    }
    .icon_box {
        font-size: 15px !important;
    }
    .card_flex_items {
        display: grid !important;
        justify-content: unset !important;
    }
    .hd_logo img {
        width: 80px;
    }
    /* .h5_gm {
        margin-top: 40px !important;
    } */
    .info_users {
        padding: 20px !important;
    }
    /* .flex_btn_const {
        display: grid !important;
    } */
    .flex_total {
        margin-bottom: 5px !important;
    }
    .flex_total input {
        max-width: 150px !important;
    }
    .btn_pay {
        width: 100% !important;
        margin-bottom: 0px !important;
    }
    .modal-body {
        padding: 5px !important;
    }
    .modal-content {
        padding: 5px !important;
    }
    .order_name_delivers {
        width: 100% !important;
        padding-left: 0px !important;
    }
    .footer_body_grid {
        grid-template-columns: 1fr !important;
    }
    .right_end {
        display: none !important;
    }
    .footer_boxed:nth-child(1) {
        text-align: center;
    }
    .footer_boxed img {
        width: 250px !important;
    }
    .hd_badge {
        display: none !important;
    }
    /* .order_list {
        padding: 10px !important;
    } */
    .product_desc_p {
        width: 100% !important;
    }
    .flex_stricky {
        display: none;
    }
    .menu_list_flex {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }
    .btn_cancel_orders {
        width: 100% !important;
    }
}
@media only screen and (max-width: 400px) {
    .userRank div {
        width: 100% !important;
        text-align: center !important;
    }
    .hd_logo img {
        width: 80px;
    }
    /* .btn_submit_acc {
        width: 100% !important;
    } */
    .hd_body {
        padding: 0 10px;
    }
    .hd_profiles_img {
        width: 25px;
        height: 25px;
    }
    .basket_inorder {
        /* width: 10px;
        height: 10px; */
        top: -20px;
    }
    .basket_inorder span {
        display: none;
    }
    .flex_stricky {
        padding: 10px;
        height: max-content;
        box-shadow: none;
    }
    .right_command {
        padding: 15px;
    }
    .order_right_sum_fixed {
        width: 100%;
    }
    .flex_total h4:nth-child(2) {
        right: 40px;
    }
    .btn_pay {
        width: 340px;
    }
    .order_food_price {
        right: 160px;
    }
    /* .quantity_display_cart {
        margin: 0 5px;
    } */
    .close-btn {
        background-color: rgb(233, 233, 233) !important;
    }
    .order_right_sum_fixed {
        background-color: white;
        padding-bottom: 0px;
    }
}
@media only screen and (max-width: 414px) {
    .right_command {
        padding: 0px;
    }
    .btn_pay {
        margin-bottom: 25px;
    }
    .order_right_sum_fixed {
        padding-top: 10px;
    }
}
@media only screen and (max-width: 390px) {
    .hd_right_comd_detailed {
        padding-bottom: 10px;
    }
}
@media only screen and (max-width: 375px) {
    .quantity_control {
        margin-top: 30px !important;
    }
    .title_box_margin {
        height: auto !important;
    }
    .index_cate {
        margin-top: 20px !important;
        margin-bottom: 15px !important;
    }
    .right_command {
        padding: 10px !important;
    }
    .flex_btn_const {
        display: flex !important;
    }
    .order_name_delivers, .order_name_repeat {
        font-size: 13px !important;
    }
    .order_food_price {
        font-size: 13px !important;
    }
    .btn_pay {
        width: 320px;
        margin-bottom: 0px;
        padding: 10px !important;
    }
    .btn_cancel_orders {
        padding: 10px !important;
    }
    .order_right_sum_fixed {
        padding: 30px 20px;
        background-color: transparent !important;
    }
    .scroll-btn {
        display: none;
    }
    .hd_top {
        padding: 0 10px !important;
    }
    /* .hd_top a {
        display: none !important;
    } */
    /* .hd_body button {
        padding: 0px !important;
    } */
    .menu_list_flex {
        grid-template-columns: 1fr !important;
    }
}
@media only screen and (max-width: 620px) {
    #saveLocationBtn {
        margin-left: 0px !important;
        margin-bottom: 10px !important;
    }
}
@media only screen and (max-width: 430px) {
    .hd_right_comd_detailed {
        padding-bottom: 10px;
    }
    .right_command {
        padding: 25px;
    }
    .order_right_sum_fixed {
        padding: 20px 10px;
    }
    .btn_pay {
        margin-top: 0px;
    }
}
.product_desc_p {
    font-size: 13px;
    height: auto;

    /* height: 75px; */
    margin-bottom: 10px;
    border: none;
    outline: none;
    resize: none;

    overflow: hidden;
    color: rgb(168, 168, 168);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.text_desc_area {
    height: 120px;
    text-overflow: unset;
    overflow: unset;
}
/* Tooltip styling */
.product_desc_p:hover::after {
    content: attr(title); /* Use the title attribute as the content */
    position: absolute;
    bottom: 100%; /* Position above the paragraph */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8); /* Dark background */
    color: #fff; /* White text */
    padding: 8px 10px; /* Padding for readability */
    border-radius: 5px; /* Rounded corners */
    font-size: 12px;
    white-space: nowrap; /* Prevent text from wrapping */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); /* Soft shadow */
    z-index: 9999 !important;
    opacity: 0;
    cursor: default;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevents flicker */
}
/* Display tooltip on hover */
.product_desc_p:hover::after {
    opacity: 1;
}
.footer {
    padding: 20px;
    width: 100%;
    /* height: 50px; */
    /* display: grid; */
    align-items: center;
    /* background-color: #13244d; */
    /* background-color: #00b14f; */
    /* background-color: rgb(15 38 203 / 71%) !important; */
    /* background-color: rgb(55 64 135 / 75%) !important; */
    border-top: 1px solid #80808030;
    background-color: white !important;
}
.footer_body_grid {
    max-width: 70%;
    /* width: 75%; */
    display: grid;
    justify-content: left;
    align-items: center;
    /* grid-template-columns: repeat(3,1fr); */
    margin: 0 auto;
}
.footer_boxed img {
    width: 300px;
}
.footer_desc {
    font-size: 14px;
    color: white;
    margin-bottom: 25px;
}
.footer_desc:last-child {
    margin-bottom: 0px;
}
.footer_desc p {
    margin-bottom: 0px !important;
}
.right_end {
    text-align: end;
}
.alert-danger {
    margin-top: 15px !important;
    font-size: 14px !important;
    /* position: absolute !important; */
    background-color: #f8d7da7a !important;
    z-index: 0 !important;
    border: none !important;
}
.marquee {
    padding: 10px !important;
    /* background-color: white; */
}
.hd_top {
    text-align: right;
    max-width: 70%;
    margin: 0 auto;
    font-size: 14px !important;
    /* padding: 0px 30px; */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: white;
    /* background-color: #13244de8; */
    border-bottom: 1px solid #8080801c;
    justify-content: space-between !important;
}
.hd_top a {
    color: rgb(48, 48, 48);
}
.adr_shipping {
    padding: 20px !important;
    border-radius: 8px !important;
    margin-bottom: 10px;
    background-color: white !important;
    box-shadow: 0px 5px 10px rgb(171 171 171 / 12%);
}
.form-check .form-check-input {
    margin-left: unset !important;
    /* width: auto !important; */
    width: 14px !important;
}
/* .form-check {
    padding-left: 0px !important;
} */
.mobile_confirm_label {
    width: unset !important;
}
.adr_shipping label {
    margin-left: 10px;
    color: gray;
    transition: .15s;
    font-size: 14px !important;
}
.adr_shipping label:hover {
    cursor: pointer;
    transition: .15s;
    color: black !important;
}
.order_confirm_detailed {
    padding: 20px !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0px 5px 10px rgb(171 171 171 / 12%);
}
.adr_bg {
    border: 15px;
    padding: 15px;
    border-radius: 8px !important;
    background-color: white !important;
}
.flex_orders_list {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 15px;
}
.menus_items_name {
    color: gray;
}

.head_inorders {
    margin-bottom: 15px;
    border-bottom: 1px solid #aeb0b33d;
    padding-bottom: 10px;
}
.menus_items_price {
    font-weight: 500;
}
.flex_btn_pay {
    width: 100%;
    display: flex;
    align-items: center;
}
.modal-fullscreen-md-down .modal-content {
    height: max-content !important;
}
.btn_pay_orders, .btn_pay_orders_submit {
    width: 60%;
    color: white;
    padding: 10px 20px;
    outline: none;
    border-radius: 5px;
    border: none;
    transition: .15s;
    cursor: pointer;
    /* background-color: #00b14f; */
    background-color: rgb(15 38 203 / 71%) !important;
}
.btn_pay_orders:hover , .btn_pay_orders_submit:hover {
    transition: .15s;
    background-color: #137e43;
}
.btn_pay_orders.disabled {
    cursor: not-allowed !important; /* แสดง cursor เป็น 'not-allowed' */
    pointer-events: none; /* ป้องกันการโต้ตอบ */
    opacity: 0.65; /* ทำให้ปุ่มดูเหมือนถูกปิดใช้งาน */
}
.flex_numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.total_inorders {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.total_inorders div {
    font-size: 14px;
}
.btn_cancel {
    outline: none;
    border: none;
    color: gray;
    margin-left: 10px;
    font-size: 14px;
    transition: .15s;
    background-color: transparent;
}
.btn_cancel:hover {
    color: black;
    transition: .15s;
}

/* The Modal (background) */
/* .modal {
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
} */
#qr-code {
    margin-top: 10px !important;
}
.btn_openQR {
    margin-top: -50px;
    position: relative;
    z-index: 1;
    background-color: rgb(15 38 203 / 71%) !important;
}
.fa-qrcode {
    color: white !important;
}
/* .modal-header .btn-close {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
} */
/* Modal Content */
.height_order_items_accept {
    height: max-content !important;
}
.modal-content {
    background-color: #fefefe;
    margin: 0px auto;
    padding: 20px;
    height: 90vh !important;
    width: auto !important;
    border: none !important;
    /* border: 1px solid #888; */
    text-align: center;

    /* position: relative;
    z-index: -999 !important; */
}
/* Modal Buttons */
.modal-buttons {
    display: flex;
    justify-content: center;
    /* justify-content: space-around; */
    margin-top: 20px;
}
.btn_confirm, .btn_close {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: .15s;
}
.btn_close_pays {
    position: absolute !important;
    right: 10px !important;
}
.btn_confirm {
    background-color: #d9534f;
    color: white;
}
.btn_confirm:hover {
    transition: .15s;
    background-color: #8f2f2c;
}
.btn_close {
    background-color: #5bc0de;
    color: white;
    margin-left: 10px;
}
.btn_close:hover {
    transition: .15s;
    background-color: #2f798f;
}
.order_note {
    margin: 20px 0;
}
.order_note div {
    font-size: 14px;
    margin-bottom: 8px;
}
.order_note img {
    width: 200px !important;
    border-radius: 10px !important;
}
/* .qr_pay p {
    margin-bottom: 0px !important;
} */
.submit_grid {
    display: grid;
}
.login_logo_head img {
    width: 120px;
}
.login_logo_head {
    margin-bottom: 20px;
}
.login_grid_ctn {
    width: 100%;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(2,1fr);
    /* grid-template-columns: 600px 1fr; */
}
.login_container {
    width: 60%;
    padding: 20px;
    border-radius: 5px;
    /* background-color: white; */
}
.login_head_topics {
    color: #13244d;
    margin-bottom: 20px !important;
    font-size: 18px !important;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}
.btn_login_fetch {
    color: white;
    width: 100%;
    height: 45px;
    border: none;
    outline: none;
    border-radius: 6px;
    font-size: 14px;
    background-color: rgb(15 38 203 / 71%) !important;
}
.btn_login_fetch:hover {
    background-color: rgba(14, 29, 139, 0.71) !important;
}
.btn_reg {
    color: white;
    width: 100%;
    height: 45px;
    border: none;
    outline: none;
    border-radius: 6px;
    font-size: 14px;
    transition: .15s;
    background-color: #13244d;
}
.btn_reg:hover {
    transition: .15s;
    background-color: #4a6dbe;
}
.login_body_input .mb-3 {
    margin-right: 0px !important;
    margin: 10px 0;
}
.login_body_input input {
    padding: 15px;
    font-size: 14px;
}
.login_html {
    background-color: white !important;
}
.account_regis {
    margin-top: 20px;
    font-size: 14px;
}
.account_regis a {
    font-size: 14px;
    color: #27468f;
    transition: .15s;
}
.account_regis a:hover {
    color: #13244d;
    transition: .15s;
}
.googleLogin_screen {
    width: 100%;
    border: none;
    outline: none;
    height: 45px;
    font-size: 14px;
    border-radius: 6px;
}
.btn_out {
    outline: none;
    border: none;
    padding: 10px;
    font-size: 13px;
    /* margin-left: 15px; */
    transition: .15s;
    border-radius: 5px;
    color: rgb(59, 59, 59);
    /* background-color: #d4dfef !important; */
    background-color: transparent !important;
    /* background-color: gray !important; */
}
/* .btn_out:hover {
    transition: .15s;
    background-color: #41414123 !important;
} */
.google_login {
    border: none;
    outline: none;
    width: 100%;
    display: flex;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-size: 14px !important;
    padding: 10px;
    transition: .05s;
    border: 1px solid #89898929;
    background-color: white;
}
.google_login:hover {
    transition: .15s;
    background-color: rgb(199, 204, 209);
}
.google_login a {
    font-size: 14px;
    color: black !important;
}
.google_logo_index {
    width: 15px !important;
    margin-right: 5px;
}
.company_selected , .genders, .selected_category, .selected_status {
    width: 100% !important;
    /* padding: 10px !important; */
}
.select2-container .select2-selection--single {
    height: 40px !important;
    padding: 8px;
}
.select2-container--default .select2-selection--single {
    border: 1px solid rgb(220, 223, 228) !important;
    border-radius: 5px !important;
}
/* For all tables */
/* table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc {
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    font-weight: 400 !important;
    text-align: left;
    padding: 10px !important;
    border-bottom: 0px !important;
    color: gray !important;
} */
.table_images {
    width: 80px !important;
    border-radius: 8px !important;
}
/* table.dataTable > tbody > tr {
    background-color: transparent !important;
} */
.table>thead {
    vertical-align: middle !important;
    color: black;
    font-size: 13px !important;
}
tbody, td, tfoot, th, thead, tr {
    color: gray;
    border-bottom: 1px solid rgba(204, 204, 204, 0.384) !important;
    /* border: none !important; */
}
/* .pro_table_desc {
    font-size: 14px !important;
    color: gray !important;
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
} */
.pro_table_desc {
    font-size: 14px !important;
    color: gray !important;
    /* max-width: 260px; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    margin-bottom: 30px !important;
    font-size: 13px !important;
    margin-top: 25px !important;
}
.dataTables_wrapper .dataTables_filter input {
    outline: none !important;   
    border: 1px solid rgb(204 204 204 / 67%) !important;
    padding: 10px !important;
    width: 250px !important;
    margin-left: 10px !important;
}
.dataTables_wrapper .dataTables_length select {
    outline: none !important;   
    padding: 10px !important;
    border: 1px solid rgba(204, 204, 204, 0.384) !important;
}
table.dataTable.no-footer {
    border-bottom: none !important;
}
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    padding: 15px !important;
    /* background-color: rgb(223 227 233 / 26%) !important; */
}
.btn_drop {
    color: rgb(50, 51, 54) !important;
    background-color: #3f578f17 !important;
}
.edit_pro_previews {
    background-color: #cdd3e1 !important;
    color: rgb(46, 45, 45) !important;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
}
.icon_links {
    font-size: 13px !important;
    color: gray !important;
}
.icon_links:hover {
    color:rgb(15, 15, 15) !important;
}
/* Loaders */
/* Skeleton screen CSS */
.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
/* Skeleton containers */
.skeleton-box {
    width: 100%;
    height: 150px; /* Adjust the height according to your design */
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}
.skeleton-img {
    width: 120px; /* Adjust according to your design */
    height: 100%;
    background-color: #ccc;
}
.skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.skeleton-line {
    height: 20px;
    width: 80%;
    background-color: #ccc;
    margin: 5px 0;
}
.skeleton-line.short {
    width: 50%;
}
/* Loaders */
.discount_label {
    color: gray !important;
    font-size: 14px !important;
}
.once_times_label {
    color: red !important;
    font-size: 14px !important;
}
#map {
    height: 500px;
    width: 100%;
}
#distance {
    margin-top: 10px;
}
#map {
    width: 100%;
    height: 600px;
    z-index: 0;
}
/* #info {
    padding: 10px;
} */
#info p {
    margin-bottom: 0px !important;
}
.distance_width {
    /* width: 300px !important; */
    margin: 25px 0;
}
.distance_width:last-child {
    margin-bottom: 0px;
}
.maps_desc {
    color: gray;
    font-size: 14px;
}
.order_id_input {
    width: 100px !important;
    border-radius: 5px;
    outline: none !important;
    text-align: center;
    border: 1px solid #8080802b;
}
.items_orders_summary {
    border: none !important;
    outline: none !important;
    text-align: left !important;

}
/* .menus_items_name, .menus_items_qty, .menus_items_price {
    display: flex !important;
    align-items: center !important;
} */
 .menus_items_qty {
    display: flex;
    align-items: center;
 }
.payment_verify_items {
    padding: 5px;
    border-radius: 5px;
    color: black !important;
    background-color: #ffc52fb8;
}
.payment_verify_items_sended {
    padding: 5px;
    border-radius: 5px;
    color: rgb(255, 255, 255) !important;
    background-color: #2d7fc7;
}
.payment_verify_items_sended_inOperator {
    padding: 5px;
    border-radius: 5px;
    color: rgb(255, 255, 255) !important;
    background-color: #369d69;;
}
.payment_verify_items_sended_success {
    padding: 5px;
    border-radius: 5px;
    color: rgb(255, 255, 255) !important;
    background-color: #369d69;;
}
ul {
    padding-left: 0px !important;
    margin-left: 0px;
}
.flex_items_orders_grid, .items_right {
    display: flex !important;
    align-items: center !important;
}
.flex_items_orders {
    position: relative !important;
    width: 260px !important;
    margin-right: 15px;
}
/* .flex_items_orders_grid {
    justify-content: space-around !important;
} */
.items_right {
    position: absolute !important;
    right: 30px !important;
    /* font-weight: bold; */
}
.items_right_total {
    position: absolute !important;
    right: -30px !important;
}
.slip_pay {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #cae2ffcf;
}
.color_total {
    color: #378bdf !important;
}
.flex_btn_const {
    display: flex;
    margin-top: 30px;
    align-items: center;
}
.acc_type {
    padding: 10px;
    border-radius: 5px;
    background-color: #8d8d8d1c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.token {
    color: gray;
    font-size: 13px;
}
.password-container {
    position: relative;
}
/* .form-control {
    padding-right: 40px;
} */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 68%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(230, 230, 230, 0.664) !important;
}
.register_ctn .mb-3 label {
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: 14px !important;
}
.note_reg {
    color: gray;
}
.divider-container {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.divider-line {
    flex-grow: 1;
    height: 1px;
    background-color: #bebebe;
    border: none;
}
.divider-text {
    padding: 0 10px;
    color: #666;
    font-size: 14px;
}
.flex_class {
    display: flex;
    align-items: center !important;
    gap: 10px; /* ช่องว่างระหว่าง input */
}
.head_reg_alert {
    padding: 10px;
    border-radius: 5px;
    background-color: #ffa50091;
}
.status-message {
    margin-top: 5px;
    font-size: 0.9em;
    display: none;
}
.is_already {
    width: 100%;
    /* padding: 10px; */
}
.btn_login_fetch[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
.email_check , .pass_check {
    position: relative !important;
}
#email_feedback {
    position: absolute;
}
#username_feedback {
    position: absolute;
}
.head_adrs {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border-radius: 5px;
    background-color: #27468f26;
}
.head_adrs span {
    color: #27468f;
}
.flex_loading {
    /* position: absolute; */
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    width: 100%;
    text-align: center;
    color: black;
    margin-top: 0;
}
.img-fluid {
    width: 70% !important;
    /* height: 80% !important; */
}
.alert-secondary {
    border: 1px solid #80808008 !important;
}
.flex_items_profile {
    width: 100%;
    display: flex;
    margin-top: 60px;
    align-items: start;
    justify-content: space-between !important;
}
.flex_profiles_account {
    top: 30%;
    right: 90px;
    position: absolute !important;
    transform: translate(50%, -50%);
}
.label_profile {
    width: 100.0%;
    border-radius: 5px 5px 0px 0px;
    top: 0;
    left: 0;
    padding: 30px;
    color: rgb(20, 20, 20) !important;
    position: absolute;
    /* background-color:#13244d !important; */
    border-bottom: 1px solid #8080801c !important;
}
.acc_profile_imgs {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgb(233, 233, 233);
    display: flex;
    align-items: center;
    justify-content: center;
}
.g_profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn_deactivated_account {
    border-radius: 5px;
    background-color: #ebebeb !important;
    padding: 5px 10px;
    border: none !important;
    outline: none !important;
    cursor: no-drop !important;
}
.files_wait {
    font-size: 13px !important;
}
.no_border_input {
    border: none !important;
}
.flex_price {
    display: flex;
    align-items: center;
}
.flex_price input {
    margin-left: 8px !important;
}
.size_m, .size_l {
    color: white !important;
    background-color: #1e2f57;
    width: max-content;
    height: max-content;
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: .15s;
}

/* .flex_thisSize {
    display: flex;
    position: absolute !important;
    align-content: center !important;
} */

.flex_thisSize .size_m:hover , .flex_thisSize .size_l:hover {
    background-color: #4a629b !important;
    transition: .15s;
}
.size_active {
    /* background-color: #369d69 !important; */
    background-color: rgb(15 38 203 / 57%) !important;
    /* background-color: #36519d !important; */
}
.size_button {
    color: white !important;
    /* background-color: #369d6a57; */
    background-color: #36529d42;
    /* background-color: #1e2f5742; */
    width: 35px;
    height: 30px;
    /* padding: 5px 15px; */
    margin-right: 3px;
    cursor: pointer;
    border-radius: 5px;
    transition: .15s;
    outline: none !important;
    border: none !important;
}
.size_options_container {
    /* position: absolute !important; */
    display: flex;
    align-items: start;
    width: 100%;
}
.product_size_font {
    color: gray;
    font-size: 14px;
}
.desc_contents {
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: white;
    /* background-color: rgb(135 135 135 / 6%); */
}
.btn_excel {
    outline: none !important;
    border: none !important;
}
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    /* background-color: #13244d !important; */
    background-color: #369d69 !important;
    border: none !important;
    color: white !important;
    border-radius: 5px !important;
    margin-top: 30px !important;
    margin-left: 25px !important;
}
.order_acc {
    padding: 15px;
    color: green;
    border-radius: 8px;
    background-color: rgba(0, 128, 0, 0.26) !important;
}

/* html left right */
.menu_list_category_flex {
    display: grid;
    /* grid-gap: 10px; */
    /* grid-template-columns: repeat(7,1fr); */
}
.menu_boxed {
    color: gray;
    /* color: green; */
    padding: 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    transition: .15s;
    /* border: 1px solid #369d69; */
    justify-content: space-between !important;
    /* justify-content: center !important; */
}
.menu_boxed:hover {
    color: white !important;
    transition: .15s;
    /* background-color: #369d6a49; */
    background-color: #1f375127;
    cursor: pointer;
}
.rows_cates {
    margin-left: 5px;
    font-size: 13px !important;
}
.name_menu_title {
    color: gray;
    /* color: green; */
    font-size: 15px;
    font-weight: 500;
    margin-left: 5px;
}
/* html left right */
.dropdown-menu li a {
    font-size: 14px !important;
}
.card_flex_items {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(190, 190, 190, 0.568);
}
.card_flex_status {
    font-size: 14px;
}
.rule_contents_shipping {
    color: green;
}
.rule_contents_wait {
    color: rgb(41 121 201);
}
.rule_contents_yel {
    color: rgb(229 121 30);
}
.flex_cards_items_resp {
    display: grid;
}
.card_flex_total {
    width: 100%;
    text-align: right;
}
.slips_widther {
    width: 100%;
    text-align: center;
}
.items_order_mobile_slips {
    width: 150px;
    border-radius: 8px;
    border: 1px solid #8080803b;
}
.border_set {
    border: none !important;
}
#tables_mobile tr td {
    color: gray;
}
.mobile_items_table {
    color: gray;
    font-size: 14px !important;
}
.popup {
    display: none; /* ซ่อน popup โดยเริ่มต้น */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    position: relative;
    border-radius: 8px;
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}
.slips_btn_mobile {
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #3f5fab;
}
.box_close_btn {
    /* position: absolute !important; */
    top: 10px;
    right: 10px;
    border-radius: 6px !important;
    width: 40px;
    height: 40px;
    background-color: #1f864a4f;
}
.mobiles_confirm_close_modal {
    display: flex !important;
    align-items: center;
}
.btn-close {
    margin-top: 10px !important;
    margin-right: 0px !important;
    font-size: 18px !important;
}
.flex_adrs {
    display: flex;
    align-items: end;
    justify-content: space-between !important;
}
#save_maps {
    display: none;
}
.overlay_gray {
    position: relative;
}
.menu-container {
    top: 75px;
    z-index: 1 !important;
    position: sticky;
    padding: 22px;
    /* padding-top: 20px; */
    /* padding-left: 30px; */
    border-radius: 8px;
    background-color: white !important;
    box-shadow: 0px 5px 12px rgb(109 109 109 / 4%);
}
.ios_18 p {
    margin-bottom: 0px;
}
.text_ios {
    font-family: Arial, Helvetica, sans-serif !important;
}
.display_ios_alert {
    color: #2d52aa !important;
}
#pass {
    justify-content: center !important;
    bottom: 0;
    position: relative !important;
    z-index: 1 !important;
    padding: 15px;
    width: 100%;
    text-align: center !important;
}
/* .alert-success {
    border: none !important;
    color: white !important;
    background-color: green !important;
    position: fixed !important;
    bottom: 0px !important;
    right: 20px !important;
    width: 500px !important;
    z-index: 1 !important;
} */
.alert-success {
    border: none !important;
    color: white !important;
    position: fixed !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 10px;
    padding: 20px;
    width: 500px !important;
    z-index: 1 !important;
    margin: 0 auto;
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(0, 0, 0, 0.911) !important;
}
.pass_checker {
    border: none !important;
    color: white !important;
    position: fixed !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 10px;
    padding: 20px;
    width: 500px !important;
    z-index: 1 !important;
    margin: 0 auto;
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(0, 0, 0, 0.911) !important;
}
#loadingContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #f3f3f3;
    z-index: 1000;
}
.loading-bar {
    width: 0;
    height: 100%;
    background: #4caf50;
    animation: loadingAnimation 2s linear infinite;
}
.alert {
    transition: opacity 1s ease-out;
    opacity: 1;
}
.alert.fade-out {
    opacity: 0;
}
@keyframes loadingAnimation {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
.target_pins {
    color: black !important;
}
.adr_pins_flex {
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.box_mailers {
    position: relative !important;
    padding: 10px 15px;
}
.acc_flex_all {
    display: flex;
    align-items: center;
    padding-left: 15px;
    gap: 10px
}
.margin_flex_alls {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(94, 94, 94, 0.17);
}
.margin_flex_alls:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.all_acc_selecter {
    width: 100%;
    color: black;
    background-color: rgba(128, 128, 128, 0.07);
    transition: 0.15s;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor:not-allowed;
    display: block;
}
.all_acc_selecter:hover {
    background-color: rgba(131, 134, 138, 0.36);
    transition: 0.15s;
}
.auth_success {
    margin-bottom: 15px;
    padding: 28px;
    border-radius: 5px;
    color: green;
    background-color: #00800024;
}
.new-order-row {
    background-color: rgba(255, 0, 0, 0.301) !important;
}
.table_btn_flex_action {
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: end;
    border-bottom: 1px solid rgba(94, 94, 94, 0.17);
}
.table_btn_flex_action input {
    width: 300px;
}
.detailed_container {
    /* height: 95vh; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.detailed_body {
    max-width: 350px;
    width: 100%; /* หรือ width ตามความต้องการ */
    margin: 0 auto;
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #80808030;
    background-color: white;
}
.logos {
    width: 100%;
    text-align: center;
}
.logos img {
    width: 100px;
}
.items_all {
    margin-bottom: 10px;
    font-size: 13px;
}
.items_all:last-child {
    margin-bottom: 0px;
}
.items_all strong {
    font-size: 14px;
}
.itens_font_de {
    color: gray;
}
.detailed_slip {
    padding: 3px 8px;
    border-radius: 5px;
    background-color: #27468f;
    color: rgb(255, 255, 255) !important;
}
.border_bot_detail {
    padding-bottom: 10px;
    border-bottom: 2px dotted #8080808a;
}
.it_search {
    margin: 30px 0px !important;
}
.it_search input {
    max-width: 450px;
}
.maps_alert_green {
    margin-bottom: 15px;
}
.maps_alert_green span {
    color: green !important;
}
.fa-square {
    color: green !important;
}
.foot_concern {
    font-size: 13px;
    color: rgb(17, 17, 17) !important;

    /* display: flex;
    align-items: center;
    justify-content: space-between !important; */
}
.dis_btn {
    outline: none !important;
    border: none !important;
    background-color: transparent !important;
}
#alert_time {
    display: block;
}
.carousel_ctn {
    max-width: 500px;
    background-color: gray !important;
}
.login_banner_container_ads {
    width: 100%;
    height: 100vh;
    /* background-color: #13244d; */
    background-color: #f5f5f7;
}
/* .banner_contents {
    max-width: 70%;
    height: auto;
    display: flex;
} */
.pc {
    width: 100%;
    height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-image: url('https://yokmanee.com/orders/img/banner/28427060_isolated_realistic_laptop_new_latest.png');
}
/* .mobiles {
    width: 100%;
    height: 100vh;
    background-image: url('https://yokmanee.com/orders/img/banner/33632328_phone_035_ip1.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
} */
.mobiles {
    width: 100%;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
}
.mobiles img {
    width: 30%;
}
.fav_container {
    margin: 25px 0;
}
.fav_container button {
    background-color: #80808029 !important;
}
.fav_container button:hover {
    background-color: #bebebe29 !important;
}
.icon_marks {
    position: absolute;
    right: 0;
    bottom: 0;
}
.icon_marks .btn_love_red {
    background-color: transparent;
    outline: none !important;
    border: none !important;
    padding: 10px 13px;
    transition: .15s;
    border-radius: 5px;
    color: white !important;
}
.icon_marks button:hover {
    background-color: rgb(240, 51, 51) !important;
    transition: .15s;
}
.btn_love_green {
    background-color: #1e9f1e;
    outline: none !important;
    border: none !important;
    padding: 10px 13px;
    transition: .15s;
    border-radius: 5px;
    color: white !important;
}
.index_cate {
    font-size: 18px !important;
    /* margin-top: 25px; */
}

/* option selected */
.select-menu{
    width: 100%;
    /* width: 380px; */
    /* margin: 140px auto; */
}
.select-menu .select-btn{
    display: flex;
    height: 55px;
    background: #fff;
    padding: 20px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.select-btn i{
    font-size: 25px;
    transition: 0.3s;
}
.select-menu.active .select-btn i{
    transform: rotate(-180deg);
}
.select-menu .options{
    position: relative;
    padding: 20px;
    margin-top: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    display: none;
}
.select-menu.active .options{
    display: block;
}
.options .option{
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
}
.options .option:hover{
    background: #F2F2F2;
}
.option i{
    font-size: 25px;
    margin-right: 12px;
}
.option .option-text{
    font-size: 18px;
    color: #333;
}
/* option selected */
/* Prevents scrolling on the body */
.no-scroll {
    overflow: hidden;
    height: 100%;
}
#mobiles_contents {
    position: sticky !important;
    top: 72px;
    z-index: 99;
    background-color: white !important;
    border-bottom: 1px solid #8080801f;
}
#mobiles_contents .menu_boxed:hover {
    color: gray !important;
}
.items_menu_mobiles {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1;

    margin-top: -3px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.items_menu_mobiles li a {
    padding: 8px 15px !important;
}
#btn_mobile_menu {
    background-color: white !important;
    border: none !important;
    color: black !important;
    width: 100% !important;
    font-size: 14px;
}
.btn_close_cli {
    color: white !important;
    border: none !important;
    outline: none !important;
    width: 100% !important;
    height: 40px !important;
    border-radius: 6px !important;
    transition: 15s;
    background-color: rgb(0 31 255 / 37%) !important;
}
.btn_close_cli:hover {
    transition: 15s;
    background-color: rgba(0, 30, 255, 0.582) !important;
}
.items_list_flex_space {
    display: flex !important;
    justify-content: space-between !important;
}
.items_label_rows {
    color: gray !important;
    font-size: 13px !important;
}
/* checkout */
.check_logo img {
    width: 100px;
}
.check_items_name span {
    margin-right: 50px;
}
.check_items {
    margin-top: 25px;
}
.check_items_name span:last-child {
    margin-right: 0px;
}
.check_ctn_pages {
    height: 100vh;
    padding: 100px;
    background-color: white;
}
.check_body_grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.check_left {
    display: grid;
    justify-self: end;
}
.check_left_contents {
    width: 450px;
}
.check_right {
    display: grid;
    justify-content: start;
}
.check_right_contents {
    width: 450px;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid rgba(184, 181, 181, 0.5);
}
.svg_p {
    min-width: 0;
    max-width: 100%;
}
.svg_p svg {
    width: 150px;
}
.check_pay_desc {
    font-size: 14px;
    color: gray;
    margin-top: 10px;
}
.fa-qrcode {
    font-size: 20px;
    color: gray;
    margin-right: 20px;
}
.lines {
    margin: 15px 0;
    border-top: 1px solid rgba(184, 181, 181, 0.5);
}
.check_icons {
    display: flex;
    align-items: center;
}
.check_src_yi {
    width: 100%;
    text-align: center;
    margin: 30px 0;
}
.check_src_yi img {
    border-radius: 5px;
}
.check_buttons_pay {
    width: 100%;
    outline: none;
    border: none;
    height: 60px;
    color: white;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    transition: .15s;
    background-color: #2c7dbe;
}
.check_buttons_pay:hover {
    transition: .15s;
    background-color: #1f5785;
}
.check_inputs {
    margin-bottom: 15px;
}
/* checkout */
.locale_verify {
    color: #664d03;
    padding: 15px;
    font-size: 13px;
    width: 100% !important;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #ffe69c !important;
}
.locale_verify_pass {
    color: #0a3622;
    padding: 15px;
    font-size: 13px;
    width: 100% !important;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #d3ebe0 !important;
}
.grid_flex_items_all_index {
    display: grid;
    gap: 25px;
    grid-template-columns: 65% 1fr;
}
.top_orders_number {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.payment_type_selector {
    margin: 25px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(15 38 203 / 26%) !important;
    background-color: rgb(189 195 237 / 13%) !important;
}
.invoice {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fa-receipt {
    font-size: 22px !important;
}
.btn_del_adr_locale {
    border-radius: 5px;
    padding: 5px 15px;
    color: white !important;
    background-color: rgb(15 38 203 / 71%) !important;
}
.empty-cart-message {
    padding: 10px;
    border-radius: 5px;
    margin-right: 20px;
    background-color: #8080801c;
    width: 100% !important;
}
/* .pro_detailed_index {
    width: 70%;
    margin: 0 auto;
} */
.order_width_index_items {
    width: 100% !important;
    display: grid;
    gap: 30px;
    padding: 45px;
    /* grid-template-columns: 1fr minmax(0, 300px); */
}
.flex_grd_items_index {
    max-width: 70%;
    margin: 0 auto;
    display: grid;
    gap: 30px;
    /* padding: 20px; */
    /* grid-template-columns: 250px 1fr 300px; */
    grid-template-columns: 250px 1fr;

    margin-bottom: 50px;
    /* grid-template-columns: 1fr minmax(0, 300px); */
}
/* .ads_fb {
    padding: 0px 20px;
} */
.fb_flexed {
    position: sticky;
    top: 100px;
}
.left_img_pos img {
    width: 100px;
    border-radius: 8px;
    transition: .15s;
    border: 1px solid #2b137e;
}
.left_img_pos img:hover {
    transition: .15s;
    cursor: pointer;
    border: 1px solid #2a137e49;
}
.center_img_pos img {
    width: 100%;
    border-radius: 8px;
    margin-left: 15px;
}
.pro_detailed_h1 {
    font-size: 22px !important;
}
.pro_detailed_index_grid_items {
    width: 80%;
    display: grid !important;
    margin: 0 auto;
    gap: 20px;
    justify-content: center;
    grid-template-columns: 600px 500px;
}
.items_flex_sized {
    display: flex;
    align-items: center;
}
.items_flex_sized .div_sized {
    margin-right: 5px;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgb(55 64 135 / 75%) !important;
}
.flex_prices_bottom {
    display: flex;
}
.flex_prices_bottom div {
    margin-right: 10px;
}
.no_Data_server_orders {
    padding: 10px;
    border-radius: 5px;
    background-color: #8080801c;
}
.line_bottom_checkout {
    border-top: 2px dotted #3a3a3a4d;
    padding-top: 10px;
}
.google_flex_users_table {
    display: flex;
    align-items: center;
}
.google_flex_users_table img {
    width: 20px;
    margin-right: 10px;
}
#users th:nth-child(8), 
#users td:nth-child(8) {
    width: 100px !important; /* บังคับความกว้างด้วย !important */
    max-width: 100px;
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
    overflow: hidden; /* ปิดการแสดงผลข้อความเกินขอบ */
    text-overflow: ellipsis; /* เพิ่ม ... เมื่อข้อความยาวเกินไป */
}
#users th:nth-child(7) {
    width: 100px !important;
    max-width: 150px;
}
#users tbody td {
    font-size: 14px; /* กำหนดขนาดตัวอักษร */
    color: gray;     /* กำหนดสีตัวอักษร */
}
.list_user_items {
    background-color: auto !important;
}
.list_user_items button:hover {
    color: rgb(255, 255, 255) !important;
    background-color: red !important;
}
.alert_sweet_users_deactive {
    background-color: #8080801c;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
}
.check_api_pages_form input {
    margin-right: 10px !important;
}
.error_secrets {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: max-content;
    border-radius: 5px;
    padding: 10px;
    background-color: #f3e5e5 !important;
}
.key_notice {
    margin-top: 10px;
}
.key_notice a {
    font-size: 14px;
    color: gray !important;
}
.api_not_found {
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    color: gray;
    background-color: #8080800f;
}
#api_data tr td {
    font-size: 14px;
    color: gray;
    padding: 10px 8px;
}
.enabled_api {
    color: green;
    padding: 5px 10px;
    width: max-content !important;
    border-radius: 5px;
    background-color: #00800021;
}
.type_action_sessing_api_checked {
    margin-bottom: 10px !important;
    padding: 5px 10px;
    background-color: #8080801a;
    border-radius: 5px;
    width: max-content;
}
.type_action_sessing_api_checked a {
    color: gray !important;
}
.type_action_sessing_api_checked:hover {
    background-color: #8080804d;
}
.type_action_sessing_api_dis {
    margin-bottom: 10px !important;
    padding: 5px 10px;
    background-color: #ed4d4d1a;
    border-radius: 5px;
    width: max-content;
}
.type_action_sessing_api_dis a {
    color: gray !important;
}
.type_action_sessing_api_dis:hover {
    background-color: #ec4b4b4d;
}
.btn-primary {
    background-color: rgb(15 38 203 / 71%) !important;
}
#editApiForm input {
    font-size: 14px;
    color: gray;
}
.alert-margin-top {
    margin-top: 25px !important;
}
.drop_delete_item_api {
    color: white !important;
    background-color: red;
}
.drop_delete_item_api:hover {
    background-color: red !important;
}
.clickable-row {
    cursor: pointer !important;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    border: none !important;
}
.line_auth {
    border: none;
    outline: none;
    width: 100%;
    display: flex;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-size: 14px !important;
    padding: 10px;
    margin-top: 5px;
    transition: .15s;
    border: 1px solid #89898929;
    background-color: white;
}
.line_auth:hover {
    transition: .15s;
    background-color: rgb(199, 204, 209);
}
.fa-line {
    font-size: 20px;
    margin-right: 5px;
    color: green;
}
.ctn_noti {
    margin: 0 25px;
    position: relative !important;
    display: inline-block;
}
.ctn_noti a {
    /* padding: 5px 15px; */
    padding: 8px 20px;
    border-radius: 8px;
    color: rgb(163 163 163);
    background-color: #f5f5f5;
}
.ctn_noti a:hover {
    background-color: #dfdfdfab;
}
#alert_counts {
    position: absolute;
    right: -5px;
    top: -15px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    background-color:#319d3f;
}
/* เมนู Sign in ที่เลื่อนลงมา */
.bg_signin_container {
    position: fixed;
    top: auto !important;
    right: 0;
    width: 100%;
    margin: 0 auto;
    height: 0;
    left: 0;
    z-index: 999;
    overflow: hidden;
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    /* border: 1px solid #ddd; */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    transition: height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}
.bg_signin_container span {
    color: rgb(172, 171, 171);
}
.bg_signin_container.active {
    height: 300px;
    opacity: 1;
}
#alert_box {
    visibility: hidden; /* ซ่อนกล่องเริ่มต้นแต่ยังคงพื้นที่ */
    background-color: #ffffff;
    border: 1px solid #e0e2e7;
    color: #141414;
    width: 500px;
    max-height: 300px;
    overflow: auto;
    position: absolute;
    border-radius: 8px;
    top: 40px;
    right: 0;
    z-index: 1000;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    
    transform: translateY(-10px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s 0.3s;
    opacity: 0;
}
#alert_box.active {
    visibility: visible;
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
#alert_box h6 {
    /* margin-bottom: 15px; */
    position: sticky;
    font-size: 14px !important;
    top: 0;
    padding: 10px 20px;
    
    background-color: white;
    border-bottom: 1px solid #efefef;
    /* box-shadow: 0px 5px 10px rgb(0 0 0 / 7%); */
}
.list_alert_flex_grd {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #efefef;

    display: flex;
    align-items: start;
    justify-content: space-between;
    /* grid-template-columns: 85% 1fr; */
}
.list_alert_flex_grd:last-child {
    border-bottom: none !important;
}
.list_alert_flex_grd span {
    padding: 0 !important;
    font-size: 14px;
    color: black;
    background-color: unset !important;
}
.list_alert_flex_grd a {
    color: black;
    font-size: 14px;
    background-color: unset !important;
}
.list_alert_flex_grd a:hover {
    color: #13244d;
    text-decoration: underline !important;
}
/* .list_alert_flex_grd span:hover {
    color: rgb(52, 89, 192);
} */
.list_alert_flex_grd p {
    color: gray;
    font-size: 14px;
    margin-bottom: 0px;
}
.alert_title_width {
    width: 85%;
}
.data_box_alert {
    padding: 10px 20px;
}
.alert_time {
    text-align: right;
}
.alert_time span {
    font-size: 14px;
    color: gray;
}
.fa-circle-check {
    color: rgb(53, 202, 53);
    margin-left: 10px;
}
.fa-circle-exclamation {
    color: orange;
    margin-left: 10px;
}
.alert_title_width .fa-circle-xmark {
    color: red;
    margin-left: 10px;
}
.desc_alert_noti {
    color: gray;
    font-size: 14px;
}
.server_maintain {
    color: rgb(55, 55, 190) !important;
}
.grid_noti_pages {
    width: 100%;
    display: grid;
    grid-gap: 20px;
    height: max-content;
    grid-template-columns: 70% 1fr;
}
#card-element {
    margin-top: 30px !important;
    margin-bottom: 10px !important;
}
.auth_pay_container {
    max-width: 500px !important;
    /* margin: 25px auto; */
    padding: 15px;
    border: 1px solid #dde1e5;
    border-radius: 6px;
}
.stripe_total_amount {
    padding: 20px;
    border-radius: 5px;
    margin: 15px 0;
    color: rgb(34, 32, 32) !important;
    /* background-color: rgb(15 38 203 / 71%) !important; */
    background-color: rgb(15 38 203 / 19%) !important;
}
.auth_pay_container tr th {
    text-align: left;
}
.auth_pay_container tr td {
    font-size: 14px;
    text-align: left;
}
.auth_pay_container table {
    margin-top: 20px;
}
#payment-message {
    margin-top: 20px;
}
.failed_login {
    width: 100%;
    text-align: center; 
    color:#ef5050; 
    margin-top:20px;
    font-size: 14px !important;
    padding: 15px;
    border-radius: 8px !important;
    background-color: rgb(255 0 0 / 7%) !important;
}
.flex_bott_log {
    display: flex;
    margin-top: 15px !important;
    align-items: center;
    justify-content: space-between;
}
.line_oa_index p  {
    margin-bottom: 0px;
    color: gray;
    font-size: 13px;
}
.line_oa_index {
    width: 100%;
}
.oa_img {
    margin-top: 15px;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: white;
}
.line_oa_index img {
    width: 122px;
    padding: 15px;
}

.banner {
    width: 100%;
    height: 500px;
    overflow: hidden;
    /* margin-top: 35px; */
    position: relative;
    margin-bottom: 25px;
    /* border-radius: 10px; */
    /* box-shadow: 0px 5px 12px #0000001f; */
}
.banner_container_head {
    width: 100%;
    height: 100%;
    position: relative;
}
.img_banner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.img_banner img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}
.img_banner.active {
    opacity: 1;
}
/* ปุ่มเลื่อนซ้ายขวา */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
}
.slider-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.prev {
    left: 20px;
}
.next {
    right: 20px;
}
@media screen and (max-width: 1230px) {
    .order_width_index_items {
        grid-template-columns: 1fr;
    }
    /* .spacer_max_with_index {
        padding-right: 20px !important;
    } */
    .banner {
        margin-top: 0px !important;
    }
}
@media only screen and (max-width: 950px) {
    .hd_menu_const {
        display: none;
    }
    .list_flex {
        display: grid;
    }
    .footer_boxed img {
        width: 150px !important;
    }
    .footer_body_grid {
        display: grid !important;
    }
    .desc_contents {
        padding: 10px !important;
    }
    .menu_list_flex {
        grid-gap: 20px !important;
        grid-template-columns: 1fr !important;
    }
    .banner {
        max-height: 250px !important;
    }
}
.messenger-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;

    width: 50px;
    height: 50px;

    display: grid;
    align-items: center;
    justify-content: center;

    background-color: #0084ff;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
.messenger-button:hover {
    background-color: #006dbf;
}
/* .messenger-icon {
    width: 50px;
    height: 50px;
} */
.fa-facebook-messenger {
    font-size: 22px !important;
    color: white !important;
}
.login_required {
    color: green;
    font-size: 14px;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
    background-color: #00800014;
}
.google_auth_login_web {
    color: #1b73bb;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    /* margin-top: 25px; */
    background-color: #678ec914;
}
.pagination {
    display: flex;
    justify-content: center; /* จัดกลาง */
    flex-wrap: wrap; /* รองรับการแสดงผลหลายบรรทัด */
    margin-top: 20px;
}

.pagination a {
    padding: 10px 15px; /* ระยะห่างในปุ่ม */
    margin: 5px; /* ระยะห่างระหว่างปุ่ม */
    border: 1px solid #ddd; /* ขอบปุ่ม */
    border-radius: 5px; /* มุมโค้ง */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    color: #007bff; /* สีตัวอักษร */
    transition: background-color 0.3s; /* เอฟเฟกต์การเปลี่ยนสีพื้นหลัง */
}

.pagination a:hover {
    background-color: #007bff; /* เปลี่ยนสีพื้นหลังเมื่อชี้ */
    color: white; /* เปลี่ยนสีตัวอักษรเมื่อชี้ */
}

.pagination .active {
    background-color: #007bff; /* สีพื้นหลังของปุ่มที่ใช้งานอยู่ */
    color: white; /* สีตัวอักษรของปุ่มที่ใช้งานอยู่ */
    border: 1px solid #007bff; /* ขอบของปุ่มที่ใช้งานอยู่ */
}

@media (max-width: 600px) {
    .pagination a {
        padding: 8px 10px; /* ลดขนาดปุ่มในหน้าจอเล็ก */
        font-size: 14px; /* ลดขนาดฟอนต์ */
    }
}
.flex_pages {
    position: sticky;
    top: 55px;
    z-index: 1;
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid #80808026;
}
.flex_pages h6 {
    font-size: 14px;
}
.prev_contents {
    padding: 15px;
    border-radius: 6px;
    background-color: #0036ff0d;
    margin-bottom: 25px;
    font-size: 14px;
}
.alert_items_no_adds {
    font-size: 14px;
    color: #3e81d1;
    background-color: #69a9d71c;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.yi_loader {
    width: 100%;
    height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
}
.yi_loader img {
    width: 250px;
    margin-bottom: 22px;
}
/**/
/* การจัดการ container ของโปรไฟล์ */
.profile-container {
    position: relative;
    display: inline-block;
}

.profile-header {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.hd_profiles_img img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.hd_profiles_name {
    margin-left: 10px;
}

.hd_profiles_name h4 {
    margin: 0;
    font-size: 16px;
}

.hd_profiles_name span {
    font-size: 12px;
    color: #cccccc;
}

/* การจัดการ container ของโปรไฟล์ */
.profile-container {
    position: relative;
    display: flex;
    /* padding: 10px; */
    margin-right: 20px;
    align-items: center;
    border-radius: 8px;
    /* border: 1px solid #ced2db87; */
    /* background-color: white; */
    transition: background-color 0.3s ease; /* เพิ่มการเปลี่ยนแปลงพื้นหลัง */
}
/* เพิ่มเอฟเฟกต์พื้นหลังเมื่อ dropdown แสดง */
.profile-container:hover {
    /* background-color: #f0f0f0; */
    border-radius: 8px; /* เพิ่มขอบโค้งมน */
}
/* การตั้งค่า dropdown */
.dropdown-menu {
    display: none;
    position: absolute;
    /* top: 100% !important; */
    left: 0;
    background-color: white;
    min-width: 200px !important;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 0;
    z-index: 999;
}
/* จัดการรายการใน dropdown */
.dropdown-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.dropdown-menu ul li {
    padding: 5px 16px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.212);
}
.dropdown-menu ul li:last-child {
    border-bottom: none !important;
}
.dropdown-menu ul li a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}
/* .dropdown-menu ul li:hover {
    background-color: #f2f2f2;
} */
/* การแสดง dropdown เมื่อ hover */
.profile-container:hover .dropdown-menu {
    display: block;
}
.hd_menu_const img {
    width: 30px !important;
}
.h5, h5 {
    font-size: 16px !important;
}
#list_result {
    font-size: 14px !important;
}
#order_listed_url tr th {
    background-color: #e5eef7d9;
    font-family: Arial, Helvetica, sans-serif !important;
}
#order_listed_url tr td {
    font-size: 14px;
    color: gray;

}
.flex_items_orderd {
    border-bottom: 1px solid #dfdfdf96;
    padding-bottom: 10px;
}
/* .flex_items_orderd:last-of-type {
    border-bottom: 0px;
} */
/* .grid_right_items_sum {
    position: sticky;
    top: 100px;
} */
/* ปรับสไตล์ของ .content_view */
.content_view {
    width: 100%;
    text-align: start;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.content_view div {
    padding: 10px 15px;
    margin-right: 5px;
    border-radius: 5px;
    color: gray;
    transition: background-color 0.3s ease;
}
.content_view div:hover {
    cursor: pointer;
    background-color: rgb(236, 236, 236);
}
.grid_contents {
    height: max-content;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.menu_order_righted:not(.grid_contents) {
    display: block;
}
.active_lister {
    color: #007bff !important;
    background-color: rgb(236, 236, 236);
}
.height_70 {
    height: 70vh;
    width: 100%;
    overflow: auto;
    scroll-behavior: smooth; /* ทำให้การเลื่อนดูนุ่มนวล */
}
.modal-body {
    padding-top: 0px !important;
}
.table_100 {
    width: 150px !important;
}
.maps_contents {
    width: 60%;
    margin: 50px auto;
}
.maps_contents iframe {
    border-radius: 10px;
}
.comments {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 50px;
    background-color: white;
    box-shadow: 0px 5px 12px #0000000a;
}
._4cqr {
    border-radius: 50% !important;
}
.cate_stars {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}
.cate_stars .fa-star {
    color: #ffe900;
}
/* Darkmode */
.fa-moon {
    color: white;
    font-size: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: .15s;
    background-color: rgba(128, 128, 128, 0.473);
 }
 .fa-moon:hover {
    cursor: pointer;
    background-color: gray;
    transition: .15s;
 }
 .dark-mode {
    --bg-color: #121212;
    --text-color: #ffffff;
    transition: .25s !important;
}
.mode_active {
    cursor: pointer;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.darkmode body {
    background-color: #121212 !important;
}
.darkmode .hd_container {
    background-color: #121212 !important;
    background: unset;
}
.darkmode .active_menus {
    color: white !important;
}
.darkmode .hd_menu_const a:hover {
    color: gray !important;
}
.darkmode .profile-container {
    background-color: #121212;
}
.darkmode .hd_profiles_name h4 {
    color: white;
}
.darkmode .hd_profiles_name span {
    color: gray;
}
.darkmode .btn-primary {
    background-color: white !important;
}
.darkmode .fa-cart-shopping {
    color: black !important;
}
.darkmode .hd_top {
    background-color: #121212;
    border-bottom: 1px solid #80808042;
}
.darkmode .order_list h3 {
    color: white;
}
.darkmode .order_list_menu_latest {
    background-color: #2c2e2f !important;
}
.darkmode .order_type {
    color: gray;
}
.darkmode .order_type_name span:nth-child(1) {
    color: white;
}
.darkmode .fa-arrow-right-long {
    color: gray !important;
}
.darkmode .desc_contents {
    background-color: #2c2e2f !important;
}
.darkmode .box_price {
    color: white;
}
.darkmode .size_active {
    background-color: rgb(94 109 219 / 74%) !important;
}
.darkmode .quantity_display {
    color: white;
}
.darkmode .menu_boxed_with_img {
    border: 0px;
}
.darkmode .btn-decrease, .darkmode .btn-increase {
    color: gray;
    font-size: 20px;
    background-color: #3c3d3f !important;
}
.darkmode .btn-decrease:hover , .darkmode .btn-increase:hover {
    background-color: #656668 !important;
}
.darkmode .name_menu_title {
    color: white;
}
.darkmode .btn_add_tocard {
    background-color: #3c3d3f !important;
}
.darkmode .footer {
    background-color: #121212 !important;
}
/* .darkmode .foot_concern , .darkmode .foot_concern a , .darkmode .h6, h6  {
    color: white !important;
} */
 .darkmode .fa-file {
    color: white;
 }
.darkmode .modal-content {
    background-color: #2a2c2e !important;
}
.darkmode #list_result {
    color: white;
}
.darkmode .empty-cart-message {
    color: gray;
}
.darkmode .cart_dark {
    color: white !important;
}
.darkmode .list_right_orders_detailed {
    background-color: #2a2c2e !important;
    box-shadow: none;
    border: 1px solid #80808042;
}
.darkmode .order_name_delivers {
    color: white;
}
.darkmode .size_items , .darkmode .size_dark {
    color: gray;
}
.darkmode .order_food_price {
    color: white;
}
.darkmode .quantity_display_cart {
    color: white;
}
.darkmode .order_right_sum_fixed {
    box-shadow: none;
}
.darkmode .order_right_sum_fixed {
    color: white !important;
}
.darkmode .total_cart_dark {
    color: rgb(255, 255, 255) !important;
}
.darkmode .flex_total h4 {
    color: rgb(255, 255, 255) !important;
}
.darkmode .flex_total input {
    color: white;
    border: 1px solid gray;
    background-color: transparent !important;
}
.darkmode .btn_pay {
    background-color: rgb(94 112 241 / 71%) !important;
}
.darkmode .menu_img_container {
    background-color: white;
    border-radius: 10px;
}
.darkmode .product_desc_p {
    background-color: transparent;
}
.darkmode .dropdown-menu {
    background-color: #121212 !important;
}
.darkmode .dropdown-menu ul li a {
    color: white;
}
.darkmode .dropdown-menu ul li:hover {
    color: white;
    background-color: #2a2c2e !important;
}
.darkmode .btn_out {
    color: white;
}
.darkmode #order-summary {
    color: white;
}
.darkmode .hd_top a {
    color: rgb(0, 0, 0);
}
.darkmode .adr_shipping {
    background-color: #2a2c2e !important;
}
.darkmode .adr_shipping p {
    color: white;
}
.darkmode #address3 {
    color: white;
    background-color: #121212;
    border: 1px solid #80808042;
}
.darkmode .form-control {
    background-color: transparent !important;
    color: white !important; /* กำหนดสีข้อความให้เหมาะสมกับ Dark Mode */
}
.darkmode .form-control option {
    background-color: #121212 !important; /* ทำให้พื้นหลังของ option เป็นโปร่งแสง */
    color: white !important; /* สีข้อความของ option ใน Dark Mode */
}
.darkmode .adr_bg , .darkmode .order_confirm_detailed {
    background-color: #2a2c2e !important;
}
.darkmode .distance_width span {
    color: white !important;
}
.darkmode .order_id_input {
    color: white;
    background-color: transparent !important;
}
.darkmode #order_listed_url tr th {
    color: white;
    background-color: #2a2c2e !important;
}
.darkmode .table>:not(caption)>*>* , .darkmode .items_orders_summary {
    background-color: transparent !important;
}
.darkmode .items_orders_summary {
    color: white;
}
.darkmode .total_inorders div {
    color: white;
}
.darkmode .total_inorders span {
    color: gray !important;
}
.darkmode #totalAmountDisplay {
    color: white !important;
}
.darkmode .order_note div {
    color: #b1afaf !important;
}
.darkmode .order_note span {
    color: #b1afaf !important;
}
.darkmode .order_note .form-control {
    border: 1px solid #80808042;
}
.darkmode .grid_flex_items_all_index h4 {
    color: white;
}
.darkmode .payment_type_selector {
    background-color: #2a2c2e !important;
    border: 1px solid gray !important;
    color: white;
}
.darkmode .btn_pay_orders, .btn_pay_orders_submit {
    background-color: rgb(86 105 245 / 71%) !important;
}
.darkmode .btn_openQR {
    background-color: rgb(86 105 245 / 71%) !important;
}
.darkmode .auth_success {
    color: white;
    background-color: #669b6696;
}
.darkmode .menus_activated {
    background-color: #2a2c2e !important;
}
.darkmode .menus_activated .icon_box {
    color: #7a96f5;
}
.darkmode .menus_activated .name_menu_title {
    color: white !important;
}
.darkmode .img_cart_items {
    background-color: white;
    border-radius: 5px !important;
}
.darkmode .info_users {
    background-color: #2a2c2e !important;
}
.darkmode #products_orders tr td {
    color: white !important;
}
.darkmode #products_orders tr th {
    color: white !important;
}
.darkmode .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: white;
}
.darkmode #products_orders a {
    color: white !important;
}
.darkmode .pro_table_desc {
    color: white !important;
}
.darkmode #show-today-data , .darkmode #clear-filter {
    background-color: #121212 !important;
    color: white;
}
.darkmode #show-today-data:hover , .darkmode #clear-filter:hover {
    background-color: gray !important;
}
.darkmode button {
    outline: none !important;
    border: none;
}
.darkmode .table_btn_flex_action input {
    border: 1px solid gray;
}
.darkmode #filter-btn {
    color: black;
}
.darkmode .items_right {
    color: white !important;
}
.darkmode .table_dark_sum {
    color: #5bacf3 !important;
}
.darkmode .hd_profiles_name h4 {
    color: white !important;
}
.darkmode .flex_pages {
    background-color: #121212 !important;
}
.darkmode .flex_pages h6 {
    color: white;
}
.darkmode .card {
    background-color: #2a2c2e !important;
}
.darkmode .card h4 {
    color: white;
}
.darkmode .card p {
    color: white;
}
.darkmode #tables_mobile tr th {
    color: white;
}
.darkmode #tables_mobile tr td {
    color: #ffffffa8;
}
.darkmode .invoice strong:nth-child(1) {
    color: white !important;
}
.darkmode .invoice strong:nth-child(2) {
    color: #7abbfb !important;
}
.darkmode .invoice a {
    color: white !important;
}
.darkmode .pagination a {
    color: white;
    border: 1px solid gray;
}
.darkmode .rule_contents_shipping {
    color: #7adb7a;
}
.darkmode .nav_items_bottom {
    background-color: #2a2c2e !important;
}
.darkmode .nav_items_bottom a {
    color: white;
}
.darkmode .buttons-html5 {
    color: black !important;
}
.darkmode .modal-title {
    color: white;
}
.darkmode .names_item {
    color: white !important;
}
/* .darkmode .dropdown-menu li a:hover {
    background-color: #2a2c2e !important;
} */
/* Darkmode */
.bottom_desc_shipping {
    border-top: 1px solid #80808029;
    margin-top: 20px;
    padding-top: 18px;
}
.bottom_desc_shipping p {
    font-size: 14px;
    color: gray;
}
.icon_shippings {
    width: unset !important;
    font-size: 25px !important;
    padding: 5px !important;
    color: white;
    margin-right: 5px;
    border-radius: 5px;
    background-color: rgb(15 38 203 / 71%) !important;
}
.userRank div {
    /* width: max-content; */
    margin: 0;
}
.box_img_fancyBox {
    position: absolute;
    z-index: 999 !important;
}
/* .fancybox__carousel.is-draggable .fancybox__slide, .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content {
    position: relative;
    z-index: 1 !important;
} */

/* .scroll-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-content.show {
    opacity: 1;
    transform: translateY(0);
}

.scroll-content.scale {
    transform: scale(0.8);
}

.scroll-content.show.scale {
    transform: scale(1);
}

.scroll-content.rotate {
    transform: rotate(-5deg);
}

.scroll-content.show.rotate {
    transform: rotate(0);
} */
 .total_header {
    font-size: 20px !important;
 }
 #savecart {
    width: 150px; 
    font-size: 14px; 
    background-color: rgb(15 38 203 / 9%);
    color: black; 
    padding: 10px; 
    border-radius: 5px;
    cursor: pointer;
 }
 #savecart:hover {
    color: white;
    background-color: rgb(15 38 203 / 65%);
 }
 #loadTemplate {
    width: 150px; 
    font-size: 14px; 
    background-color: rgb(15 38 203 / 9%);
    color: black; 
    padding: 10px; 
    border-radius: 5px;
    cursor: pointer;

    margin-right: 10px;
 }
 #loadTemplate:hover {
    color: white;
    background-color: rgb(15 38 203 / 65%);
 }
 @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loadingMessage_flex {
    display: flex !important;
    align-items: center !important;

    justify-content: center;
    margin-bottom: 10px;
}  

/* สไตล์หลักของฟอร์ม */
.template-container {
    display: none;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin: 20px auto;
    text-align: center;
}

/* ปรับให้ปุ่มดูดี */
.button-container {
    margin-top: 20px;
}

/* สไตล์สำหรับรายการใน Template */
#templateList {
    max-height: 200px;
    overflow-y: auto;
}

#templateList li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    /* border-bottom: 1px solid #ddd; */
}

#templateList li:hover {
    background-color: #f1f1f1;
}
.loadTemplateBtn {
    color: white;
    outline: none;
    border: none;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 10px;
    background-color: rgb(15 38 203 / 71%) !important;
}
.deleteTemplateBtn {
    outline: none;
    border: none;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 10px;
    background-color: #80808026;
}
.item_loadName {
    font-size: 13px;
}
.li_flexLoadmenu_local {
    display: flex;
    align-items: center;
}


/* สไตล์ Popup */
.custom-modal {
    display: none; /* ซ่อน Popup เริ่มต้น */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* จัดให้อยู่กลางจอ */
    background-color: rgba(0, 0, 0, 0.5); /* ฉากหลังโปร่งใส */
    width: 100vw;
    height: 100vh;
    z-index: 1050; /* ให้แสดงเหนือทุกองค์ประกอบ */
}

/* กล่องเนื้อหา Popup */
.custom-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;

    width: 100%;
    max-width: 500px;
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* จัดให้เนื้อหาอยู่กลาง Popup */
}

.custom-modal-content input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.custom-modal-content button {
    padding: 8px 12px;
    /* margin: 5px; */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#saveTemplateBtn {
    background: #28a745;
    color: white;
    font-size: 14px;
}

#cancelSaveTemplate {
    background-color: #80808026;
    color: black;
    font-size: 14px;
}

/* for load template */
.modal-template {
    display: none; /* ซ่อน Popup เริ่มต้น */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* จัดให้อยู่กลางจอ */
    background-color: rgba(0, 0, 0, 0.5); /* ฉากหลังโปร่งใส */
    width: 100vw;
    height: 100vh;
    z-index: 1050; /* ให้แสดงเหนือทุกองค์ประกอบ */
}

/* กล่องเนื้อหา Popup */
.modal-template-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;

    width: 100%;
    max-width: 500px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* จัดให้เนื้อหาอยู่กลาง Popup */
}

/* สไตล์รายการ Template */
.template-list {
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto; /* เพิ่ม scroll ถ้ารายการเยอะ */
    border: 1px solid #cccccc91;
    border-radius: 4px;
    text-align: left;
}

.template-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-list li:last-child {
    border-bottom: none;
}

.template-list li:hover {
    background: #f0f0f0;
}

/* ปุ่มปิด */
.template-close-btn {
    background: #dfdfdf;
    color: black;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
/* for load template */
@media only screen and (max-width: 550px) {
    .custom-modal-content, .modal-template-content {
        max-width: 350px;
    }
    .modal-template-content {
        padding: 15px 8px;
    }
    #savecart, #loadTemplate {
        width: max-content;
    }
    #loadTemplate {
        margin-right: 10px;
    }
    .content_action {
        margin-bottom: 15px;
        justify-content: space-between;
    }
}
.active-template {
    color: green;
    font-weight: bold;
    margin-left: 5px;
}
#noItemsMessage {
    padding-top: 25px;
}
@media only screen and (min-width: 580px) {
    .modal-content {
        border-radius: 10px !important;
    }
}
@media only screen and (max-width: 580px) {
    .menu_list_category_flex {
        display: none;
    }
    #mobiles_contents {
        display: block !important;
    }
    .modal-xl {
        margin: 0px !important;
    }
}
@media only screen and (max-width: 720px) {
    .product_grid_container {
        grid-template-columns: 1fr !important;
    }
    .product_main_img {
        display: none;
    }
    .modile_products {
        margin: 15px 0 !important;
        display: block !important;
    }
    .modile_products img {
        width: 100%;
    }
    .breadcrumbs_pages {
        padding: 45px 45px;
        padding-bottom: 0;
    }
    .product_grid_container {
        margin-bottom: 100px;
    }
}
.modile_products {
    display: none;
}
.date_info {
    background-color: #eaecef;
    padding: 12px;
    border-radius: 5px;
}
.user_totalSummary_credit {
    margin-top: 25px !important;
}
.const_totalMax_credit {
    height: 3px;
    border-radius: 5px;

    margin-top: 8px !important;
    /* background-color: rgb(164 162 255 / 28%); */
    background-color: rgb(110 189 135 / 28%);
}
.const_totalUsed_credit {
    height: 3px;
    background-color: rgb(96, 181, 123);
    width: 0%;
    animation: progressBar 1.2s ease-in-out forwards;
    transition: width 1.2s ease-in-out;
}
.proName_colorItems:hover {
    color: #007bff;
}
.breadcrumbs_pages {
    margin-bottom: 15px;
}
.breadcrumbs_pages a {
    color: gray;
}
.breadcrumbs_pages a:hover {
    color: black;
}

.product_grid_container {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(2,1fr);
}
.product_main_img {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 5px 15px #0000000a;
}
.product_main_img img {
    width: 100%;
    border-radius: 5px;
}
.product_id {
    display: flex;
    justify-content: start;
}
.product_id span {
    color: gray;
}
.right_product_desc {
    padding: 0 45px;
}
.product_items_name_section {
    font-size: 30px;
    margin-top: 20px;
    color: black;
    font-weight: bold;
    line-height: 1.2;
}
.prodict_items_detail_cateStars {
    margin-top: 10px;
}
.prodict_items_detail_cateStars .fa-star {
    color: #ffc600 !important;
}
.product_prices {
    margin-top: 25px;
}
.product_desc {
    margin-top: 25px;
}
.text_space {
    margin-top: -20px;
    color: gray;
    white-space: pre-line;
}
.info_alert {
    width: 100%;
    padding: 15px;
    background-color: #0084ff1f;
    margin-bottom: 25px;
    border-radius: 5px;
}
.first_bg {
    width: 100% !important;
    /* background-color: white !important; */
    background-color: rgb(58 62 185);
    /* width: 100%; */
    position: sticky !important;
    top: 0px !important;
    /* border-bottom: 1px solid #8f8f8f42; */
    /* background-color: rgb(255 255 255 / 79%) !important; */
    /* background-color: #13244d; */
    z-index: 999 !important;
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0px 10px 20px #231f1f26;
}
.table_wrapper {
    overflow-x: auto;
    /* max-height: 82vh; */
}
#products_orders {
    margin: 0 auto;
    border-collapse: collapse; /* ลดระยะห่างของเส้นขอบ */
    table-layout: auto; /* ปรับขนาดอัตโนมัติตามเนื้อหา */
}
#products_orders th {
    white-space: nowrap;
    padding: 8px; /* เพิ่มช่องว่างรอบตัวหนังสือ */
    text-overflow: ellipsis; /* เพิ่มการตัดข้อความที่ยาวเกินไป */
}
/* .acc_grid > .table_wrapper {
    grid-column: 2;
    width: 100%;
} */
 .order_grid {
    display: grid;
    grid-template-columns: 180px 1fr;
 }

 #users th , #users td {
    white-space: nowrap;
    padding: 8px; /* เพิ่มช่องว่างรอบตัวหนังสือ */
    text-overflow: ellipsis; /* เพิ่มการตัดข้อความที่ยาวเกินไป */
 }
 .pre_display {
    white-space: pre-wrap;  /* ให้ตัดคำเมื่อถึงขอบ */
    word-wrap: break-word;   /* ให้ขึ้นบรรทัดใหม่เมื่อข้อความยาวเกิน */
    overflow-wrap: break-word;
    max-width: 480px;        /* จำกัดความกว้างไม่ให้ล้นจอ */
    overflow: auto;          /* เพิ่ม scroll bar หากข้อความยาวมาก */
    background: #f4f4f4;     /* สีพื้นหลังให้อ่านง่าย */
    padding: 10px;
    border-radius: 5px;
    max-height: 250px;
}
.btnNavHeader {
    background-color: white !important;
}
.option_sized {
    gap: 5px;
    grid-template-columns: repeat(2,1fr);
}
.overlay_gray::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(128 128 128 / 34%) !important;
    z-index: 10 !important; 
}
textarea.form-control {
    width: 100%;
    height: 250px !important;
    min-height: unset !important;
}
.report_table {
    width: 100%;
    position: relative;
    max-height: 400px;
    overflow-x: auto;
}
.classTable {
    width: 100%;
}
.classTable tr td {
    color: gray;
    font-size: 14px;
}
.classTable tr th {
    position: sticky;
    top: 0;
    font-size: 13px;
    background-color: #ededed;
}
#demoTables tr td {
    color: gray;
    font-size: 14px;
    background-color: transparent !important;
}
.reportReason {
    width: 400px;
}
.reportNoData {
    color: orange;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    background-color: #ffa50014;
}
.demoTableContents {
    padding: 10px;
    border-radius: 8px;
    background-color: #80808017;
}