/* ปุ่มวงกลมหน้าหลัก */
.v-bottom-navigation.bottom-nav .tab--fab .fab {
    background-color: #0d8eff !important;
    background-image: none !important;
    border-color: #ffffff !important;
    border-style: solid !important;
    border-radius: 50% !important;

    box-shadow:
        0 4px 0 #075da9,
        0 7px 15px rgba(13, 142, 255, 0.4) !important;
}
button[data-track="open_dialog_signup"] .v-btn__content::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;

    /* กำหนดให้สีไอคอนเปลี่ยนตามสีตัวหนังสือของปุ่มอัตโนมัติ */
    background-color: currentColor !important;

    /* ฝังข้อมูลไอคอน (fa-user-plus) ในรูปแบบ Base64 โดยตรง */
    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBkPSJNOTYgMTI4YTEyOCAxMjggMCAxIDEgMjU2IDBBMTI4IDEyOCAwIDEgMSA5NiAxMjh6TTAgNDgyLjNDMCAzODMuOCA3OS44IDMwNCAxNzguMyAzMDRsOTEuNCAwYzk4LjUgMCAxNzguMyA3OS44IDE3OC4zIDE3OC4zYzAgMTYuNC0xMy4zIDI5LjctMjkuNyAyOS43TDI5LjcgNTEyQzEzLjMgNTEyIDAgNDk4LjcgMCA0ODIuM3pNNTA0IDMxMmwwLTY0LTY0IDBjLTEzLjMgMC0yNC0xMC43LTI0LTI0czEwLjctMjQgMjQtMjRsNjQgMCAwLTY0YzAtMTMuMyAxMC43LTI0IDI0LTI0czI0IDEwLjcgMjQgMjRsMCA2NA0KNjQgMGMxMy4zIDAgMjQgMTAuNyAyNCAyNHMtMTAuNyAyNC0yNCAyNGwtNjQgMCAwIDY0YzAgMTMuMy0xMC43IDI0LTI0IDI0cy0yNC0xMC43LTI0LTI0eiIvPjwvc3ZnPg==') no-repeat center / contain !important;
    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBkPSJNOTYgMTI4YTEyOCAxMjggMCAxIDEgMjU2IDBBMTI4IDEyOCAwIDEgMSA5NiAxMjh6TTAgNDgyLjNDMCAzODMuOCA3OS44IDMwNCAxNzguMyAzMDRsOTEuNCAwYzk4LjUgMCAxNzguMyA3OS44IDE3OC4zIDE3OC4zYzAgMTYuNC0xMy4zIDI5LjctMjkuNyAyOS43TDI5LjcgNTEyQzEzLjMgNTEyIDAgNDk4LjcgMCA0ODIuM3pNNTA0IDMxMmwwLTY0LTY0IDBjLTEzLjMgMC0yNC0xMC43LTI0LTI0czEwLjctMjQgMjQtMjRsNjQgMCAwLTY0YzAtMTMuMyAxMC43LTI0IDI0LTI0czI0IDEwLjcgMjQgMjRsMCA2NA0KNjQgMGMxMy4zIDAgMjQgMTAuNyAyNCAyNHMtMTAuNyAyNC0yNCAyNGwtNjQgMCAwIDY0YzAgMTMuMy0xMC43IDI0LTI0IDI0cy0yNC0xMC43LTI0LTI0eiIvPjwvc3ZnPg==') no-repeat center / contain !important;
}
/////////////////
/* ====================================================
   ทับ background-image และเปลี่ยนค่าตัวแปรระบบ
   ==================================================== */
html body .v-btn.secondary[data-track="open_dialog_signin"],
html body button[data-track="open_dialog_signin"] {
    /* 1. ยึดตัวแปร --btnSecondary แล้วยัดสีเขียวใส่เข้าไปตรงๆ */
    --btnSecondary: linear-gradient(180deg, #28be4f 0%, #146227 100%) !important;
    --secondary: #28be4f !important;

    /* 2. สั่งทับ background-image แบบเจาะจงชื่อเดียวกับระบบ */
    background-image: linear-gradient(180deg, #28be4f 0%, #146227 100%) !important;
    background: linear-gradient(180deg, #28be4f 0%, #146227 100%) !important;

    /* 3. สไตล์ขอบและมิติ */
    border: 1px solid #1e8738 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* ====================================================
   เจาะจงผ่าน .v-application เพื่อชนะ Vuetify 100%
   ==================================================== */
.v-application button[data-track="open_dialog_signin"],
button[data-track="open_dialog_signin"] {
    background: linear-gradient(180deg, #28be4f 0%, #146227 100%) !important;
    background-color: #28be4f !important;
    border: 1px solid #1e8738 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ใส่ไอคอนแม่กุญแจ */
.v-application button[data-track="open_dialog_signin"] .v-btn__content::before,
button[data-track="open_dialog_signin"] .v-btn__content::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 5px !important;
    vertical-align: -1px !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQ0IDE0NHY0OEgzMDRWMTQ0YzAtNDQuMi0zNS44LTgwLTgwLTgwcy04MCAzNS44LTgwIDgwek04MCAxOTJWMTQ0QzgwIDY0LjUgMTQ0LjUgMCAyMjQgMHMxNDQgNjQuNSAxNDQgMTQ0djQ4aDE2YzM1LjMgMCA2NCAyOC43IDY0IDY0VjQ0OGMwIDM1LjMtMjguNyA2NC02NCA2NEg2NGMtMzUuMyAwLTY0LTI4LjctNjQtNjRWMjU2YzAtMzUuMyAyOC43LTY0IDY0LTY0SDgweiIvPjwvc3ZnPg==") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
/* ====================================================
   ตกแต่งปุ่มกากบาท (Close Button) ให้เป็นสีแดง + มีกรอบ
   ==================================================== */
html body button.v-icon.close,
html body button.mdi-close[data-v-916a8296],
html body button[data-v-916a8296].close {
    /* 1. สีตัวไอคอนกากบาท (X) */
    color: #e53935 !important; 
    
    /* 2. สไตล์กรอบสีแดง */
    border: 1.5px solid #e53935 !important;
    border-radius: 6px !important; /* เปลี่ยนเป็น 50% ได้ถ้าต้องการกรอบวงกลม */
    
    /* 3. พื้นหลัง (ใส่สีแดงจางๆ เพื่อความสวยงาม) */
    background-color: rgba(229, 57, 53, 0.08) !important;
    
    /* 4. จัดขนาดและตำแหน่งไอคอนให้อยู่กลางกรอบ */
    width: 28px !important;
    height: 28px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    
    /* เพิ่มอนิเมชันเวลานำเมาส์ไปชี้ */
    transition: all 0.2s ease-in-out !important;
}

/* ====================================================
   Effect ตอนเอาเมาส์ไปชี้ (Hover)
   ==================================================== */
html body button.v-icon.close:hover,
html body button.mdi-close[data-v-916a8296]:hover {
    background-color: #e53935 !important; /* พื้นหลังเปลี่ยนเป็นแดงเต็ม */
    color: #ffffff !important;           /* กากบาทเปลี่ยนเป็นสีขาว */
    border-color: #e53935 !important;
}
/* ====================================================
   1. ปุ่มเข้าสู่ระบบใน Pop-up (สไตล์ปุ่มเกมส์ 3D สีเขียวทรงมน)
   ==================================================== */
html body .dialog-sing-in .dialog-action button[data-v-916a8296],
html body button[data-v-916a8296].secondary {
    /* ทับค่าตัวแปรเดิมของระบบ */
    --btnSecondary: linear-gradient(180deg, #3be268 0%, #1db847 50%, #10772b 100%) !important;
    --secondary: #1db847 !important;

    /* สีพื้นหลังแบบเกมส์ (ด้านบนสว่าง มีมิติลงไปเข้ม) */
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-image: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-color: transparent !important;

    /* ขอบและทรงมนสไตล์ปุ่มเกมส์ */
    border-radius: 25px !important; /* ความมนทรงแคปซูล */
    border: 2px solid #63ff8d !important; /* เส้นขอบเรืองแสงสดใส */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;

    /* มิติปุ่ม 3D (เงาใต้ปุ่ม + แสงไฮไลท์ด้านบน) */
    box-shadow: 0 5px 0 #0a4d1a, 0 8px 15px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}

/* ====================================================
   2. อนิเมชันตอนเอาเมาส์ไปชี้ (Hover) และ กดปุ่ม (Active)
   ==================================================== */

/* เมาส์ชี้: ปุ่มลอยขึ้นนิดๆ + สว่างขึ้น */
html body .dialog-sing-in .dialog-action button[data-v-916a8296]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 #0a4d1a, 0 10px 20px rgba(40, 225, 96, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* กดปุ่ม: ปุ่มยุบลงสไตล์กดปุ่ม 3D จริง */
html body .dialog-sing-in .dialog-action button[data-v-916a8296]:active {
    transform: translateY(3px) !important;
    box-shadow: 0 2px 0 #0a4d1a, 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.4) !important;
}

/* อนิเมชันแสงวาบวิ่งผ่านหน้าปุ่ม (Shine Animation) */
html body .dialog-sing-in .dialog-action button[data-v-916a8296]::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 35% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
    transform: rotate(30deg) !important;
    animation: gameBtnShine 3s infinite !important;
    pointer-events: none !important;
}

@keyframes gameBtnShine {
    0% { left: -60%; }
    20% { left: 140%; }
    100% { left: 140%; }
}

/* ====================================================
   3. ไอคอนแม่กุญแจหน้าข้อความ
   ==================================================== */
html body .dialog-sing-in .dialog-action button[data-v-916a8296] .v-btn__content::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    vertical-align: -3px !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQ0IDE0NHY0OEgzMDRWMTQ0YzAtNDQuMi0zNS44LTgwLTgwLTgwcy04MCAzNS44LTgwIDgwek04MCAxOTJWMTQ0QzgwIDY0LjUgMTQ0LjUgMCAyMjQgMHMxNDQgNjQuNSAxNDQgMTQ0djQ4aDE2YzM1LjMgMCA2NCAyOC43IDY0IDY0VjQ0OGMwIDM1LjMtMjguNyA2NC02NCA2NEg2NGMtMzUuMyAwLTY0LTI4LjctNjQtNjRWMjU2YzAtMzUuMyAyOC43LTY0IDY0LTY0SDgweiIvPjwvc3ZnPg==") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}
/* ====================================================
   1. แต่งกรอบ Pop-up ให้เหมือนตู้เกมส์ (Game UI Frame)
   ==================================================== */
html body .dialog-sing-in[data-v-916a8296] {
    /* พื้นหลังไล่เฉดสีเข้มแบบมีมิติ */
    background: linear-gradient(180deg, #42182b 0%, #200a15 100%) !important;
    
    /* กรอบนอกสองชั้นเรืองแสงสไตล์เกมส์ */
    border: 3px solid #ff3b6f !important;
    border-radius: 20px !important;
    box-shadow: 0 0 25px rgba(255, 59, 111, 0.4), 
                inset 0 0 15px rgba(0, 0, 0, 0.7) !important;
    padding: 24px 20px !important;
}

/* ====================================================
   2. ปรับ หัวข้อ "เข้าสู่ระบบ" ให้เด่น นูน เรืองแสง
   ==================================================== */
html body .dialog-sing-in .dialog-title[data-v-916a8296] {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 
                0 0 12px rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
}

/* ====================================================
   3. ปรับ ตัวหนังสือหัวข้อช่องกรอก (Label Text) ให้เด่นชัด
   ==================================================== */
html body .dialog-sing-in .label-text[data-v-916a8296] {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    margin-bottom: 6px !important;
}

/* ====================================================
   4. ปรับ ช่องกรอกข้อมูล (Input) และ ไอคอนข้างใน
   ==================================================== */
/* พื้นหลังช่องกรอกโปร่งใสเข้ม + กรอบสีสด */
html body .dialog-sing-in .v-input__slot {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border-radius: 12px !important;
    border: 1.5px solid #ff3b6f !important;
    transition: all 0.2s ease !important;
}

/* ตัวหนังสือที่พิมพ์ในช่อง */
html body .dialog-sing-in .v-input input {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ไอคอนในช่องกรอก (เปลี่ยนจากแดงมืดเป็นสีสว่าง) */
html body .dialog-sing-in .v-input .v-icon {
    color: #ff6b93 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
}

/* ====================================================
   5. ปรับ ลิงก์ "ลืมรหัสผ่าน" และ "สมัครสมาชิก" ให้เด้งตา
   ==================================================== */
/* ข้อความ ลืมรหัสผ่าน (สีเหลืองทองสไตล์เกม) */
html body .dialog-sing-in .forgot-password .text[data-v-916a8296] {
    color: #ffca28 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    transition: all 0.2s !important;
}
html body .dialog-sing-in .forgot-password .text[data-v-916a8296]:hover {
    color: #ffe082 !important;
    text-decoration: underline !important;
}

/* ข้อความ ไม่มีบัญชี? */
html body .dialog-sing-in .no-account[data-v-916a8296] {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* ลิงก์ สมัครสมาชิกตอนนี้! (สีเขียวเรืองแสง) */
html body .dialog-sing-in .register-now[data-v-916a8296] {
    color: #26ff71 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(38, 255, 113, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
html body .dialog-sing-in .register-now[data-v-916a8296]:hover {
    color: #69ff9f !important;
    text-decoration: underline !important;
}
/* ====================================================
   1. เส้นสีชมพูเรืองแสง วิ่งตามรอยเว้าโค้งของแถบสีดำ
   ==================================================== */
html body .v-bottom-navigation[data-v-03fc4c19] {
    border-top: none !important; /* ลบเส้นตรงออก */
    
    /* เงาสีชมพูเลาะตามส่วนโค้งเว้าของพื้นหลังแถบดำ */
    filter: drop-shadow(0px -3px 3px #ff3b6f) 
            drop-shadow(0px -1px 0px #ff3b6f) !important;
}

/* ====================================================
   2. ลบขอบ/แสงสีชมพูออกจากปุ่มวงกลม (หน้าหลัก) ให้เป็นปุ่มเดิม
   ==================================================== */
html body .v-bottom-navigation[data-v-03fc4c19] .fab,
html body .v-bottom-navigation[data-v-03fc4c19] .fab * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* ====================================================
   1. จัดระเบียบข้อความทั้งหมดในหน้า OTP ให้สว่างและชัดเจน
   ==================================================== */
/* ข้อความทั่วไป และตัวเลขเบอร์โทรศัพท์ / Countdown */
html body .dialog-container[data-v-5fdb0424],
html body .dialog-container[data-v-5fdb0424] .label-text,
html body .dialog-container[data-v-5fdb0424] div:not(.dialog-action):not(.no-account) {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* เน้นเบอร์โทรศัพท์และเวลาถอยหลังให้เด่นขึ้น (สีฟ้าอมเขียวสว่าง) */
html body .dialog-container[data-v-5fdb0424] .secondary-text,
html body .dialog-container[data-v-5fdb0424] .countdown-time {
    color: #00ffcc !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.6) !important;
}

/* ====================================================
   2. แต่งกล่องกรอกรหัส OTP (ช่องใส่ตัวเลขสไตล์ตู้เกมส์)
   ==================================================== */
html body .dialog-container[data-v-5fdb0424] .v-otp-input .v-input__slot {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid #ff3b6f !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

/* ตัวเลขที่ผู้ใช้พิมพ์ลงในช่อง OTP */
html body .dialog-container[data-v-5fdb0424] .v-otp-input input {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* ====================================================
   3. แต่งปุ่ม "ต่อไป" สไตล์ 3D พร้อมเพิ่มไอคอนลูกศร
   ==================================================== */
html body .dialog-container[data-v-5fdb0424] .dialog-action button {
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-image: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border-radius: 25px !important;
    border: 2px solid #63ff8d !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 5px 0 #0a4d1a, 0 8px 15px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    opacity: 1 !important;
}

/* เพิ่มไอคอนลูกศร/เครื่องหมายถูกหน้าข้อความในปุ่มอัตโนมัติ */
html body .dialog-container[data-v-5fdb0424] .dialog-action button .v-btn__content::before {
    content: "\F0126" !important; /* ไอคอนลูกศรชี้ขวา (Material Design Icons: mdi-arrow-right) */
    font-family: "Material Design Icons" !important;
    font-size: 20px !important;
    margin-right: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* เอฟเฟกต์ตอน Hover ปุ่ม */
html body .dialog-container[data-v-5fdb0424] .dialog-action button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 #0a4d1a, 0 10px 20px rgba(40, 225, 96, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* ====================================================
   4. ข้อความด้านล่าง (มีบัญชีอยู่แล้ว? เข้าสู่ระบบ)
   ==================================================== */
html body .dialog-container[data-v-5fdb0424] .no-account {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    margin-top: 12px !important;
    text-align: center !important;
}

html body .dialog-container[data-v-5fdb0424] .register-now {
    color: #26ff71 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(38, 255, 113, 0.7) !important;
    cursor: pointer !important;
}
/* ====================================================
   เพิ่มกรอบหน้าต่าง Pop-up สไตล์ตู้เกมส์ (Game UI Frame)
   ==================================================== */
html body .dialog-container[data-v-5fdb0424] {
    /* พื้นหลังไล่เฉดสีเข้มแบบมีมิติ */
    background: linear-gradient(180deg, #42182b 0%, #200a15 100%) !important;
    
    /* กรอบนอกสองชั้นเรืองแสงสไตล์เกมส์ */
    border: 3px solid #ff3b6f !important;
    border-radius: 20px !important;
    box-shadow: 0 0 25px rgba(255, 59, 111, 0.4), 
                inset 0 0 15px rgba(0, 0, 0, 0.7) !important;
    padding: 24px 20px !important;
}
/* ====================================================
   เปลี่ยนไอคอนหน้าหัวข้อ "สมัครสมาชิก" เป็น คน + เครื่องหมายบวก (+)
   ==================================================== */
html body .dialog-container[data-v-5fdb0424] .dialog-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    margin-right: 10px !important;
    vertical-align: -4px !important;
    
    /* ไอคอนคน + เครื่องหมายบวก (+) สีชมพูนีออน */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ff3b6f' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12M5,13V10H3V13H0V15H3V18H5V15H8V13H5Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* แสงเรืองแสงสีชมพู */
    filter: drop-shadow(0 0 8px rgba(255, 59, 111, 0.8)) !important;
}
/* ====================================================
   เพิ่มไอคอนรูปผู้ใช้ (User) หน้าหัวข้อ "เข้าสู่ระบบ"
   ==================================================== */
html body .dialog-sing-in .dialog-title[data-v-916a8296]::before {
    content: "" !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    margin-right: 10px !important;
    vertical-align: -4px !important;
    
    /* ไอคอนรูปผู้ใช้ (User) สีชมพูนีออน */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ff3b6f' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* แสงเรืองแสงสีชมพู */
    filter: drop-shadow(0 0 8px rgba(255, 59, 111, 0.8)) !important;
}
/* ====================================================
   1. แต่งแถบหัวข้อหมวดหมู่ (Header Bar) สไตล์ตู้เกมส์
   ==================================================== */
html body .header-bar[data-v-ee448c12] {
    background: linear-gradient(90deg, #180510 0%, #4a0d2a 50%, #180510 100%) !important;
    border: 2px solid #ff3b6f !important;
    border-radius: 14px !important;
    box-shadow: 0 0 15px rgba(255, 59, 111, 0.4), 
                inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
    padding: 6px 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* เอฟเฟกต์แสงนีออนวิ่งผ่านแถบ (Shine Effect) */
html body .header-bar[data-v-ee448c12]::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 20% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    transform: rotate(30deg) !important;
    animation: headerShine 4s infinite !important;
    pointer-events: none !important;
}

@keyframes headerShine {
    0% { left: -60%; }
    30% { left: 140%; }
    100% { left: 140%; }
}

/* ====================================================
   2. แต่งข้อความและไอคอนหัวข้อ "สล็อต" ให้เด่นชัด
   ==================================================== */
html body .header-bar .highlight-content h1.text {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 
                0 0 10px rgba(255, 59, 111, 0.8) !important;
    letter-spacing: 0.5px !important;
}

/* ไอคอนหน้าคำว่าสล็อต */
html body .header-bar .highlight-content img.icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
    transform: scale(1.1) !important;
}

/* ====================================================
   3. แต่งปุ่ม "เพิ่มเติม" สไตล์ปุ่มเกมส์ 3D ทรงแคปซูล + ไอคอน
   ==================================================== */
html body .header-bar a.v-btn.secondary {
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-image: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border-radius: 20px !important;
    border: 1.5px solid #63ff8d !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    padding: 0 14px !important;
    height: 32px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 3px 0 #0a4d1a, 0 5px 10px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* เพิ่มไอคอนลูกศรชี้ไปข้างหน้าในปุ่ม "เพิ่มเติม" */
html body .header-bar a.v-btn.secondary .v-btn__content::after {
    content: "\F0054" !important; /* ไอคอนลูกศรขวา (Material Design Icons: mdi-chevron-right) */
    font-family: "Material Design Icons" !important;
    font-size: 16px !important;
    margin-left: 4px !important;
    display: inline-block !important;
    vertical-align: -1px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่มเพิ่มเติม */
html body .header-bar a.v-btn.secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 0 #0a4d1a, 0 7px 14px rgba(40, 225, 96, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}
/* ====================================================
   ออกแบบแถบหัวข้อใหม่ให้คมชัด โดดเด่น สไตล์ตู้เกมส์
   ==================================================== */
html body .header-bar[data-v-49ea0c42] {
    background: linear-gradient(90deg, #2b0c1c 0%, #4a0d2a 50%, #2b0c1c 100%) !important;
    border: 2.5px solid #ff3b6f !important;
    border-radius: 16px !important;
    box-shadow: 0 0 20px rgba(255, 59, 111, 0.5), 
                inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
    padding: 10px 16px !important;
    margin: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}

/* แสงนีออนวิ่งผ่านแถบอัตโนมัติ */
html body .header-bar[data-v-49ea0c42]::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 25% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transform: rotate(30deg) !important;
    animation: headerBarShine 4s infinite !important;
    pointer-events: none !important;
}

@keyframes headerBarShine {
    0% { left: -60%; }
    35% { left: 140%; }
    100% { left: 140%; }
}

/* จัดกลุ่มข้อความและไอคอนให้เรียงสวยงาม */
html body .header-bar[data-v-49ea0c42] .title-wrap {
    align-items: center !important;
}

/* ชื่อหมวดหมู่ (สล็อต) ให้ตัวใหญ่หนา คมชัดสะดุดตา */
html body .header-bar[data-v-49ea0c42] h1.text {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 
                0 0 12px rgba(255, 255, 255, 0.6) !important;
    letter-spacing: 0.8px !important;
    margin: 0 !important;
}

/* ขยายขนาดและเพิ่มเงาให้ไอคอนหมวดหมู่ */
html body .header-bar[data-v-49ea0c42] img.icon {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

/* ปุ่ม "เพิ่มเติม" สไตล์ปุ่มเกมส์ 3D สีเขียวสดใส + ไอคอนลูกศร */
html body .header-bar[data-v-49ea0c42] a.v-btn {
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-image: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border-radius: 22px !important;
    border: 2px solid #63ff8d !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 0 16px !important;
    height: 38px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 4px 0 #0a4d1a, 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-decoration: none !important;
}

/* เพิ่มไอคอนลูกศรชี้ขวาในปุ่มเพิ่มเติมอัตโนมัติ */
html body .header-bar[data-v-49ea0c42] a.v-btn .v-btn__content::after {
    content: "\F0054" !important; /* ไอคอนลูกศรขวา (mdi-chevron-right) */
    font-family: "Material Design Icons" !important;
    font-size: 18px !important;
    margin-left: 6px !important;
    display: inline-block !important;
    vertical-align: -2px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่มเพิ่มเติม */
html body .header-bar[data-v-49ea0c42] a.v-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #0a4d1a, 0 8px 16px rgba(40, 225, 96, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}
/* ====================================================
   1. แปลงปุ่มหมวดหมู่ทั้งหมดให้เป็นสไตล์ปุ่มเกมส์ 3D ทรงแคปซูล
   ==================================================== */
html body .v-chip[data-v-7e751269] {
    background: linear-gradient(180deg, #321021 0%, #1a050f 100%) !important;
    background-image: linear-gradient(180deg, #321021 0%, #1a050f 100%) !important;
    border: 2px solid #ff3b6f !important;
    border-radius: 20px !important;
    padding: 16px 16px !important;
    box-shadow: 0 4px 0 #100208, 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}

/* ตัวหนังสือในปุ่มหมวดหมู่ให้คมชัด นูนเด่น */
html body .v-chip[data-v-7e751269] .tag-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 0.5px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่ม (Hover) จะลอยขึ้นและเรืองแสงสีชมพู */
html body .v-chip[data-v-7e751269]:hover {
    transform: translateY(-2px) !important;
    border-color: #ff6b93 !important;
    box-shadow: 0 6px 0 #100208, 0 8px 16px rgba(255, 59, 111, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.15) !important;
}

/* เอฟเฟกต์ตอนกดปุ่ม (Active) ปุ่มจะยุบตัวลง */
html body .v-chip[data-v-7e751269]:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #100208, 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}


/* ====================================================
   2. ใส่ไอคอนแยกตามแต่ละหมวดหมู่ (สล๊อต, คาสิโน, บาคาร่า)
   ==================================================== */

/* ปุ่มที่ 1: สล๊อต (ใส่ไอคอนรูปตู้สล็อต/เกมมิ่ง) */
html body .v-chip[data-v-7e751269]:nth-child(1) .tag-text::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: -2px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ff3b6f' d='M20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4M8 16H6V14H8V16M8 12H6V10H8V12M8 8H6V6H8V8M14 16H10V14H14V16M14 12H10V10H14V12M14 8H10V6H14V8M18 16H16V14H18V16M18 12H16V10H18V12M18 8H16V6H18V8Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* ปุ่มที่ 2: คาสิโน (ใส่ไอคอนรูปชิปเกม/ลูกเต๋า) */
html body .v-chip[data-v-7e751269]:nth-child(2) .tag-text::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: -2px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffca28' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 4C14.1 4 16 4.7 17.5 5.9L12 11.4L6.5 5.9C8 4.7 9.9 4 12 4M4 12C4 9.9 4.7 8 5.9 6.5L11.4 12L5.9 17.5C4.7 16 4 14.1 4 12M12 20C9.9 20 8 19.3 6.5 18.1L12 12.6L17.5 18.1C16 19.3 14.1 20 12 20M20 12C20 14.1 19.3 16 18.1 17.5L12.6 12L18.1 6.5C19.3 8 20 9.9 20 12Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* ปุ่มที่ 3: บาคาร่า (ใส่ไอคอนรูปไพ่/เพชร) */
html body .v-chip[data-v-7e751269]:nth-child(3) .tag-text::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: -2px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2300ffcc' d='M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M12 17L7 12L12 7L17 12L12 17Z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}
/* ====================================================
   1. กรอบ "สินค้าของเรา" สไตล์ตู้เกมส์
   ==================================================== */
html body .our-product[data-v-7e751269] {
    background: linear-gradient(180deg, #2b0c1c 0%, #180510 100%) !important;
    border: 2.5px solid #ff3b6f !important;
    border-radius: 16px !important;
    box-shadow: 0 0 20px rgba(255, 59, 111, 0.4), 
                inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
    padding: 16px !important;
    margin: 12px 0 !important;
    text-align: center !important;
}

html body .our-product[data-v-7e751269] > .text {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 
                0 0 10px rgba(255, 59, 111, 0.8) !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
}

/* ====================================================
   2. ระบบจำกัด 2 แถว และขยายทั้งหมดเมื่อกด/ชี้ (Hover / Focus)
   ==================================================== */
html body .our-product[data-v-7e751269] .provider-list[data-v-7e751269] {
    max-height: 140px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    transition: max-height 0.4s ease-in-out !important;
}

/* เมื่อเอาเมาส์ชี้ หรือแตะกดที่กล่อง จะขยายโชว์สินค้าทั้งหมด */
html body .our-product[data-v-7e751269]:hover .provider-list[data-v-7e751269],
html body .our-product[data-v-7e751269]:focus-within .provider-list[data-v-7e751269] {
    max-height: 1500px !important;
}

/* เงาจางๆ ด้านล่าง (จะหายไปเมื่อขยาย) */
html body .our-product[data-v-7e751269] .provider-list[data-v-7e751269]::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(24, 5, 16, 0.95) 100%) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

html body .our-product[data-v-7e751269]:hover .provider-list[data-v-7e751269]::after,
html body .our-product[data-v-7e751269]:focus-within .provider-list[data-v-7e751269]::after {
    opacity: 0 !important;
}

/* แต่งกล่อง Provider แต่ละอัน */
html body .our-product[data-v-7e751269] .provider-box[data-v-7e751269] {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1.5px solid #ff3b6f !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
}

html body .our-product[data-v-7e751269] .provider-box[data-v-7e751269]:hover {
    transform: translateY(-2px) !important;
    border-color: #ff6b93 !important;
    box-shadow: 0 5px 10px rgba(255, 59, 111, 0.5) !important;
}

/* ====================================================
   3. ปุ่ม "ดูเพิ่มเติม" (เปลี่ยนเป็นปุ่ม "ซ่อน" อัตโนมัติเมื่อเปิด)
   ==================================================== */
html body .our-product[data-v-7e751269]::after {
    content: "ดูเพิ่มเติม ➔" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important;
    height: 42px !important;
    margin: 14px auto 4px auto !important;
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border: 2px solid #63ff8d !important;
    border-radius: 25px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 4px 0 #0a4d1a, 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

html body .our-product[data-v-7e751269]:hover::after,
html body .our-product[data-v-7e751269]:focus-within::after {
    content: "ซ่อน ▲" !important;
    background: linear-gradient(180deg, #ff5252 0%, #d32f2f 45%, #9a0007 100%) !important;
    border-color: #ff8a80 !important;
    box-shadow: 0 4px 0 #5c0002, 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
}
/* ====================================================
   ย่อปุ่ม "เข้าเล่นทันที" ให้พอดี และจัดให้อยู่ตรงกลางการ์ด
   ==================================================== */
html body a.v-btn.secondary[href*="/slot/"] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 25px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 4px 0 #7a0026, 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    /* บังคับให้อยู่กึ่งกลางการ์ดพอดีแบบ Absolute */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* ย่อขนาดความกว้างและความสูงให้พอดี ไม่ใหญ่เกินไป */
    width: auto !important;
    min-width: 140px !important;
    max-width: 80% !important;
    height: 38px !important;
    padding: 0 16px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 5 !important;
}

/* ซ่อนข้อความเดิม */
html body a.v-btn.secondary[href*="/slot/"] .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ปรับขนาดไอคอน Play ให้พอดีกับปุ่มย่อ */
html body a.v-btn.secondary[href*="/slot/"] .v-btn__content::before {
    content: "\F040A" !important; /* ไอคอน Play */
    font-family: "Material Design Icons" !important;
    font-size: 16px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ปรับขนาดตัวหนังสือ "เข้าเล่นทันที" ให้พอดีสวยงาม */
html body a.v-btn.secondary[href*="/slot/"] .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) ขยายขึ้นเล็กน้อยโดยยังอยู่ตรงกลางเป๊ะ */
html body a.v-btn.secondary[href*="/slot/"]:hover {
    transform: translate(-50%, -50%) scale(1.08) !important;
    box-shadow: 0 0 20px rgba(255, 20, 97, 0.9), 0 6px 0 #7a0026, 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   แต่งปุ่ม "ค้นหา" ในแถบหัวข้อ สไตล์ปุ่มเกมส์ 3D
   ==================================================== */
html body .header-bar button.v-btn[data-v-49ea0c42] {
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    background-image: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border-radius: 22px !important;
    border: 2px solid #63ff8d !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 0 16px !important;
    height: 38px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 4px 0 #0a4d1a, 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* จัดระยะห่างระหว่างไอคอนแว่นขยายและคำว่า "ค้นหา" ให้พอดี */
html body .header-bar button.v-btn[data-v-49ea0c42] .v-icon {
    font-size: 18px !important;
    margin-right: 6px !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
    vertical-align: middle !important;
}

html body .header-bar button.v-btn[data-v-49ea0c42] .v-btn__content {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่มค้นหา */
html body .header-bar button.v-btn[data-v-49ea0c42]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #0a4d1a, 0 8px 16px rgba(40, 225, 96, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}
/* ====================================================
   1. แต่งกรอบหน้าต่าง Pop-up "ค้นหา" สไตล์ตู้เกมส์
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] {
    background: linear-gradient(180deg, #42182b 0%, #200a15 100%) !important;
    border: 3px solid #ff3b6f !important;
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(255, 59, 111, 0.5), 
                inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
    padding: 24px 20px !important;
}

/* หัวข้อ "ค้นหา" พร้อมไอคอนแว่นขยาย */
html body .dialog-search[data-v-82ddc1e2] .dialog-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 
                0 0 12px rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 18px !important;
}

html body .dialog-search[data-v-82ddc1e2] .dialog-title::before {
    content: "\F0349" !important; /* ไอคอนแว่นขยาย (mdi-magnify) */
    font-family: "Material Design Icons" !important;
    font-size: 26px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    vertical-align: -3px !important;
    color: #ff3b6f !important;
    text-shadow: 0 0 10px rgba(255, 59, 111, 0.8) !important;
}


/* ====================================================
   2. ช่องกรอกค้นหา (Search Input Box)
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] .v-input__slot {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 14px !important;
    border: 2px solid #ff3b6f !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

html body .dialog-search[data-v-82ddc1e2] input {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

html body .dialog-search[data-v-82ddc1e2] .v-icon {
    color: #ff6b93 !important;
}


/* ====================================================
   3. การ์ดเกมในหน้าค้นหา และปุ่มเล่นตรงกลาง
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] .game-item {
    border: 1.5px solid rgba(255, 59, 111, 0.4) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

html body .dialog-search[data-v-82ddc1e2] .game-item:hover {
    border-color: #ff3b6f !important;
    box-shadow: 0 4px 15px rgba(255, 59, 111, 0.4) !important;
}

/* ปุ่ม "เล่น" บนการ์ดเกม */
html body .dialog-search[data-v-82ddc1e2] .game-item-block button.v-btn {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 20px !important;
    border: 1.5px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 10px rgba(0, 0, 0, 0.4) !important;
    padding: 0 16px !important;
    height: 34px !important;
}

html body .dialog-search[data-v-82ddc1e2] .game-item-block button.v-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 0 #7a0026, 0 8px 14px rgba(255, 20, 97, 0.4) !important;
    filter: brightness(1.15) !important;
}


/* ====================================================
   4. ส่วนข้อความจำนวนที่พบ และ Pagination ด้านล่าง
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] .pagin-box {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    margin-top: 16px !important;
}

/* ปุ่มเปลี่ยนหน้า Pagination สไตล์เกมส์ */
html body .dialog-search[data-v-82ddc1e2] .v-pagination__item {
    background: linear-gradient(180deg, #321021 0%, #1a050f 100%) !important;
    border: 1.5px solid #ff3b6f !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #100208 !important;
}

/* หน้าที่กำลังเลือกอยู่ (Active Page) เป็นสีเขียวเด่น */
html body .dialog-search[data-v-82ddc1e2] .v-pagination__item--active.primary {
    background: linear-gradient(180deg, #3be268 0%, #1db847 45%, #10772b 100%) !important;
    border-color: #63ff8d !important;
    box-shadow: 0 3px 0 #0a4d1a !important;
}

/* ปุ่มลูกศรซ้าย-ขวา Pagination */
html body .dialog-search[data-v-82ddc1e2] .v-pagination__navigation {
    background: linear-gradient(180deg, #321021 0%, #1a050f 100%) !important;
    border: 1.5px solid #ff3b6f !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 3px 0 #100208 !important;
}

html body .dialog-search[data-v-82ddc1e2] .v-pagination__navigation .v-icon {
    color: #ffffff !important;
}
/* ====================================================
   แก้ไขลบพื้นหลังทึบ/สีซ้อนข้างหลังการ์ดเกมออกให้สะอาด
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] .game-item {
    background: transparent !important;
    border: 1.5px solid rgba(255, 59, 111, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* ทำให้โซนรายการเกมโปร่งใส ไม่ให้มีสีเหลื่อมข้างหลัง */
html body .dialog-search[data-v-82ddc1e2] .gameList,
html body .dialog-search[data-v-82ddc1e2] .game-vertical {
    background: transparent !important;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้การ์ดเกม: ขอบเรืองแสงสีชมพู */
html body .dialog-search[data-v-82ddc1e2] .game-item:hover {
    border-color: #ff3b6f !important;
    box-shadow: 0 0 18px rgba(255, 59, 111, 0.7) !important;
    background: rgba(255, 59, 111, 0.08) !important;
    transform: translateY(-2px) !important;
}
/* ====================================================
   เคลียร์พื้นหลังกล่องด้านใน (.dialog-content) ให้โปร่งใส
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2],
html body .dialog-search[data-v-82ddc1e2] .dialog-content {
    background: transparent !important;
}

/* คงความสวยงามและมิติของกรอบนอก Pop-up ค้นหา */
html body .dialog-container[data-v-5fdb0424], 
html body .dialog-search[data-v-82ddc1e2] {
    background: linear-gradient(180deg, #42182b 0%, #200a15 100%) !important;
    border: 3px solid #ff3b6f !important;
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(255, 59, 111, 0.5), 
                inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

/* ลบพื้นหลังของการ์ดเกมแต่ละช่องให้ใสสะอาด 100% */
html body .dialog-search[data-v-82ddc1e2] .game-item {
    background: transparent !important;
    border: 1.5px solid rgba(255, 59, 111, 0.4) !important;
}
/* ====================================================
   แต่งปุ่ม "เล่น" ในการ์ดเกมหน้าค้นหา ให้เป็นสไตล์ตู้เกมส์ 3D + ไอคอน Play
   ==================================================== */
html body .dialog-search[data-v-82ddc1e2] .game-item-block button.v-btn {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 20px !important;
    border: 1.5px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 10px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.5) !important;
    padding: 0 16px !important;
    height: 36px !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* เพิ่มไอคอน Play หน้าคำว่า "เล่น" ในการ์ดผลการค้นหา */
html body .dialog-search[data-v-82ddc1e2] .game-item-block button.v-btn .v-btn__content::before {
    content: "\F040A" !important; /* ไอคอน Play (Material Design Icons) */
    font-family: "Material Design Icons" !important;
    font-size: 16px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่มเล่นในหน้าค้นหา */
html body .dialog-search[data-v-82ddc1e2] .game-item-block button.v-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 0 #7a0026, 0 8px 14px rgba(255, 20, 97, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.7) !important;
    filter: brightness(1.15) !important;
}
////////////////////////////////////////////////////////////////////////////////
/* ====================================================
   ปรับแต่งแถบเมนูให้ไม่โดนตัดขอบ และเลื่อนดูได้อย่างราบรื่น
   ==================================================== */
html body .menu-list[data-v-4a10d656] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important; /* ซ่อน scrollbar ใน Firefox */
    -ms-overflow-style: none !important; /* ซ่อน scrollbar ใน IE/Edge */
    gap: 8px !important;
    padding: 10px 16px !important; /* เพิ่มพื้นที่เว้นขอบซ้าย-ขวา ไม่ให้ปุ่มชนขอบ */
    background: linear-gradient(90deg, #180510 0%, #3a0820 50%, #180510 100%) !important;
    border: 2px solid #ff3b6f !important;
    border-radius: 16px !important;
    box-shadow: 0 0 20px rgba(255, 59, 111, 0.4), 
                inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
}

/* ซ่อน scrollbar ใน Chrome/Safari */
html body .menu-list[data-v-4a10d656]::-webkit-scrollbar {
    display: none !important;
}

/* ปรับขนาดปุ่มแต่ละอันให้พอดี ไม่เบียดกัน */
html body .menu-list[data-v-4a10d656] .menu-item {
    flex: 0 0 auto !important;
    min-width: 74px !important; 
    padding: 8px 6px !important;
    text-align: center !important;
    background: linear-gradient(180deg, #321021 0%, #1a050f 100%) !important;
    border: 2px solid rgba(255, 59, 111, 0.5) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 #100208, 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* จัดตัวหนังสือให้อยู่ในบรรทัดเดียวสวยงาม */
html body .menu-list[data-v-4a10d656] .menu-item .text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    display: block !important;
}

/* ขนาดไอคอนในเมนู */
html body .menu-list[data-v-4a10d656] .menu-item img.icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
    margin-bottom: 3px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ */
html body .menu-list[data-v-4a10d656] .menu-item:hover {
    transform: translateY(-3px) !important;
    border-color: #ff6b93 !important;
    box-shadow: 0 7px 0 #100208, 0 10px 20px rgba(255, 59, 111, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    filter: brightness(1.15) !important;
}

/* ปุ่มที่เลือกอยู่ (Active) สีชมพูนีออนเด่นชัด */
html body .menu-list[data-v-4a10d656] .menu-item.active,
html body .menu-list[data-v-4a10d656] .menu-item.nuxt-link-active {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border: 2px solid #ff9ebb !important;
    box-shadow: 0 5px 0 #7a0026, 0 8px 18px rgba(255, 20, 97, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

html body .menu-list[data-v-4a10d656] .menu-item.active .text,
html body .menu-list[data-v-4a10d656] .menu-item.nuxt-link-active .text {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
///////////////////////////////////////////////////////////////////////////
/* ====================================================
   ปรับโทนสีปุ่ม Sidebar ให้เป็นสีเดียวกับแถบเมนูด้านล่าง
   ==================================================== */
html body nav.sidebar[data-v-4ef00d65] {
    background: linear-gradient(180deg, #1e0714 0%, #0d0208 100%) !important;
    border-right: 2.5px solid #a35376 !important;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* ปรับปุ่มใน Sidebar ให้ใช้สีเดียวกับเมนูด้านล่าง */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 16px) !important;
    margin: 3px auto !important;
    box-sizing: border-box !important;
    
    background: linear-gradient(180deg, #7a3552 0%, #522036 50%, #381323 100%) !important;
    border: 2px solid #a35376 !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    height: 62px !important;
    box-shadow: 0 4px 0 #240b15, 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* แสงเงาสะท้อนด้านบนปุ่ม (Glossy Effect) */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 45% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    pointer-events: none !important;
}

/* ขนาดไอคอนกำลังพอดี ไม่ชนขอบ */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item img.icon {
    width: 40px !important;
    height: 40px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9)) !important;
    margin-right: 16px !important;
    transition: transform 0.2s ease !important;
    z-index: 2 !important;
}

/* ขนาดตัวหนังสือเมนู */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item .text {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ (Hover) สว่างขึ้นสวยงาม */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #944265 0%, #632641 50%, #44172b 100%) !important;
    border-color: #bf6d91 !important;
    box-shadow: 0 5px 0 #240b15, 0 8px 18px rgba(255, 20, 100, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.1) !important;
}

html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item:hover img.icon {
    transform: scale(1.1) !important;
}

/* ปุ่มที่กำลังเลือกอยู่ (Active) โดดเด่นขึ้นมา */
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item.active,
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item.nuxt-link-active {
    background: linear-gradient(180deg, #a84973 0%, #752d4c 50%, #4d1a31 100%) !important;
    border: 2px solid #d182a5 !important;
    box-shadow: 0 4px 0 #240b15, 0 7px 18px rgba(168, 73, 115, 0.8), inset 0 2px 5px rgba(255, 255, 255, 0.6) !important;
}

html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item.active img.icon,
html body nav.sidebar .menu-list.main[data-v-4ef00d65] .menu-item.nuxt-link-active img.icon {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important;
    transform: scale(1.08) !important;
}
/////////////////////////////////////////////////////////////////
/* ====================================================
   แก้ไขปุ่มหน้าคาสิโนให้นิ่งสนิท ไม่กระโดด ทรงแคปซูลสีชมพูเท่ากับสล็อตเป๊ะ
   ==================================================== */

/* 1. ให้กล่องบล็อกแม่จัดปุ่มให้อยู่กึ่งกลางการ์ดแบบนิ่งสนิทโดยไม่ต้องใช้ translate */
html body .grid-vertical .game-item .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

html body .grid-vertical .game-item .game-item-block .my-auto.mx-auto,
html body .grid-vertical .game-item .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์สล็อต */
html body .grid-vertical a.v-btn.secondary[href*="/casino/"] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    /* ตัดค่า translate ทิ้งเพื่อไม่ให้ปุ่มกระโดดเวลาเอาเมาส์ชี้ */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .grid-vertical a.v-btn.secondary[href*="/casino/"] .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .grid-vertical a.v-btn.secondary[href*="/casino/"] .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .grid-vertical a.v-btn.secondary[href*="/casino/"] .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) ขยายขึ้นเบาๆ โดยตำแหน่งนิ่งสนิทไมโครเวฟ */
html body .grid-vertical a.v-btn.secondary[href*="/casino/"]:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ซ่อนปุ่มไว้เป็นค่าเริ่มต้น และแสดงขึ้นมาเฉพาะตอนเอาเมาส์ชี้การ์ดห้องเกม (Pretty Room)
   ==================================================== */

/* 1. ซ่อนกล่องปุ่มไว้ก่อน (opacity: 0) และจะแสดงเมื่อเอาเมาส์ชี้ที่ .pretty-room */
html body .pretty-room .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* เมื่อเอาเมาส์ชี้ที่การ์ด ให้ปุ่มแสดงขึ้นมา */
html body .pretty-room:hover .game-item-block {
    opacity: 1 !important;
    visibility: visible !important;
}

html body .pretty-room .game-item-block .my-auto.mx-auto,
html body .pretty-room .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์เกมมิ่ง */
html body .pretty-room button.v-btn.secondary {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .pretty-room button.v-btn.secondary .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .pretty-room button.v-btn.secondary .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .pretty-room button.v-btn.secondary .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ที่ตัวปุ่ม (Hover) ขยายขึ้นเล็กน้อยแบบนิ่งสนิท */
html body .pretty-room button.v-btn.secondary:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ปรับแต่งปุ่ม "เล่น" ในหมวดหมู่ไพ่ (Card) ให้ซ่อนไว้ก่อน 
   และแสดงเป็นปุ่ม "เข้าเล่นทันที" ทรงแคปซูลสีชมพูเมื่อเอาเมาส์ชี้การ์ด
   ==================================================== */

/* 1. ซ่อนกล่องปุ่มไว้เป็นค่าเริ่มต้น และแสดงขึ้นเมื่อ Hover ที่การ์ด .game-item */
html body .grid-vertical .game-item .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body .grid-vertical .game-item:hover .game-item-block {
    opacity: 1 !important;
    visibility: visible !important;
}

html body .grid-vertical .game-item .game-item-block .my-auto.mx-auto,
html body .grid-vertical .game-item .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์เกมมิ่ง (ลิงก์หมวด /card/) */
html body .grid-vertical a.v-btn.secondary[href*="/card/"] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .grid-vertical a.v-btn.secondary[href*="/card/"] .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .grid-vertical a.v-btn.secondary[href*="/card/"] .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .grid-vertical a.v-btn.secondary[href*="/card/"] .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ที่ตัวปุ่ม (Hover) ขยายขึ้นเล็กน้อยแบบนิ่งสนิท */
html body .grid-vertical a.v-btn.secondary[href*="/card/"]:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ปรับแต่งปุ่ม "เล่น" ในหมวดหมู่เกมตกปลา (Fishing) ให้ซ่อนไว้ก่อน 
   และแสดงเป็นปุ่ม "เข้าเล่นทันที" ทรงแคปซูลสีชมพูเมื่อเอาเมาส์ชี้การ์ด
   ==================================================== */

/* 1. ซ่อนกล่องปุ่มไว้เป็นค่าเริ่มต้น และแสดงขึ้นเมื่อ Hover ที่การ์ด .game-item */
html body .grid-vertical .game-item .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body .grid-vertical .game-item:hover .game-item-block {
    opacity: 1 !important;
    visibility: visible !important;
}

html body .grid-vertical .game-item .game-item-block .my-auto.mx-auto,
html body .grid-vertical .game-item .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์เกมมิ่ง (ลิงก์หมวด /fishing/) */
html body .grid-vertical a.v-btn.secondary[href*="/fishing/"] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .grid-vertical a.v-btn.secondary[href*="/fishing/"] .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .grid-vertical a.v-btn.secondary[href*="/fishing/"] .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .grid-vertical a.v-btn.secondary[href*="/fishing/"] .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ที่ตัวปุ่ม (Hover) ขยายขึ้นเล็กน้อยแบบนิ่งสนิท */
html body .grid-vertical a.v-btn.secondary[href*="/fishing/"]:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ลบแถบสีทองด้านหลัง และขยายปุ่มพอกเกอร์ให้ใหญ่สะใจยิ่งขึ้น
   ==================================================== */

/* บังคับลบพื้นหลังและกรอบสีทองด้านหลังออกให้หมด */
html body .poker-container .play-btn .gradient-border {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

/* จัดตำแหน่งปุ่มให้อยู่ตรงกลางจอถาวร */
html body .poker-container .play-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .poker-container .play-btn .gradient-border {
    pointer-events: auto !important;
}

/* ขยายขนาดปุ่มพอกเกอร์ให้ใหญ่ขึ้นสะใจ */
html body .poker-container button.poker-btn {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 60px !important;
    border: 3px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 5px 0 #7a0026, 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 3px 4px rgba(255, 255, 255, 0.7) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 230px !important; /* ขยายความกว้างปุ่มให้ใหญ่ขึ้นอีก */
    height: 58px !important;     /* ขยายความสูงปุ่มให้ใหญ่ขึ้นอีก */
    padding: 0 30px !important;  
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

/* ขยายไอคอน Play ให้ใหญ่สมส่วนกับปุ่ม */
html body .poker-container button.poker-btn::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 22px !important; /* ขยายขนาดไอคอนให้ใหญ่ขึ้น */
    margin-right: 10px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* ขยายข้อความ "เข้าเล่นทันที" ให้ใหญ่สะใจ อ่านง่ายชัดเจน */
html body .poker-container button.poker-btn::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 19px !important; /* ขยายขนาดตัวหนังสือให้ใหญ่ขึ้น */
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) */
html body .poker-container button.poker-btn:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 25px rgba(255, 20, 97, 0.9), 0 6px 0 #7a0026, 0 12px 25px rgba(0, 0, 0, 0.7), inset 0 3px 5px rgba(255, 255, 255, 0.9) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ซ่อนกรอบพื้นหลัง Gradient/สีทองด้านหลังปุ่มพอกเกอร์
   ==================================================== */
html body .poker-container .gradient-border::after {
    display: none !important;
    content: none !important;
}
/* ====================================================
   ปรับแต่งปุ่ม "เล่น" ในรายการเกม (Game List) ให้ซ่อนไว้ก่อน 
   และแสดงเป็นปุ่ม "เข้าเล่นทันที" ทรงแคปซูลสีชมพูเมื่อเอาเมาส์ชี้การ์ด
   ==================================================== */

/* 1. ซ่อนกล่องปุ่มไว้เป็นค่าเริ่มต้น และแสดงขึ้นเมื่อ Hover ที่การ์ดเกม (.game-item) */
html body .game-list .game-item .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body .game-list .game-item:hover .game-item-block {
    opacity: 1 !important;
    visibility: visible !important;
}

html body .game-list .game-item .game-item-block .my-auto.mx-auto,
html body .game-list .game-item .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์เกมมิ่ง */
html body .game-list .game-item button.v-btn.secondary {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .game-list .game-item button.v-btn.secondary .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .game-list .game-item button.v-btn.secondary .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .game-list .game-item button.v-btn.secondary .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ที่ตัวปุ่ม (Hover) ขยายขึ้นเล็กน้อยแบบนิ่งสนิท */
html body .game-list .game-item button.v-btn.secondary:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ปรับแต่งปุ่ม "เล่น" ในหมวดหมู่ชนไก่ (Cockfight) ให้ซ่อนไว้ก่อน 
   และแสดงเป็นปุ่ม "เข้าเล่นทันที" ทรงแคปซูลสีชมพูเมื่อเอาเมาส์ชี้การ์ด
   ==================================================== */

/* 1. ซ่อนกล่องปุ่มไว้เป็นค่าเริ่มต้น และแสดงขึ้นเมื่อ Hover ที่การ์ด .game-item */
html body .grid-vertical .game-item .game-item-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body .grid-vertical .game-item:hover .game-item-block {
    opacity: 1 !important;
    visibility: visible !important;
}

html body .grid-vertical .game-item .game-item-block .my-auto.mx-auto,
html body .grid-vertical .game-item .game-item-block .text-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* 2. ดีไซน์ตัวปุ่มทรงแคปซูลสีชมพูสไตล์เกมมิ่ง (ลิงก์หมวด /cockfight/) */
html body .grid-vertical a.v-btn.secondary[href*="/cockfight/"] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border-radius: 50px !important;
    border: 2px solid #ff9ebb !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 3px 0 #7a0026, 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: auto !important;
    min-width: 135px !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ซ่อนข้อความเดิมในปุ่ม */
html body .grid-vertical a.v-btn.secondary[href*="/cockfight/"] .v-btn__content {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ใส่ไอคอน Play ด้านซ้าย */
html body .grid-vertical a.v-btn.secondary[href*="/cockfight/"] .v-btn__content::before {
    content: "\F040A" !important;
    font-family: "Material Design Icons" !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ใส่ข้อความ "เข้าเล่นทันที" ด้านขวา */
html body .grid-vertical a.v-btn.secondary[href*="/cockfight/"] .v-btn__content::after {
    content: "เข้าเล่นทันที" !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ที่ตัวปุ่ม (Hover) ขยายขึ้นเล็กน้อยแบบนิ่งสนิท */
html body .grid-vertical a.v-btn.secondary[href*="/cockfight/"]:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(255, 20, 97, 0.9), 0 4px 0 #7a0026, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.15) !important;
    z-index: 10 !important;
}
/* ====================================================
   ปรับแต่งแถบเมนูด้านล่าง ให้ติดขอบบนพอดีและไม่มีเงาด้านบน
   ==================================================== */

/* เคลียร์ระยะห่างด้านบนของกล่องแม่ */
html body .appbar-menu {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ทำให้ปุ่มชิดขอบบน และตัดเงาด้านบนออกทั้งหมด */
html body .appbar-menu .menu-item {
    background: linear-gradient(180deg, #7a3552 0%, #522036 50%, #381323 100%) !important;
    border: 2px solid #a35376 !important;
    border-radius: 16px !important;
    /* คงเหลือไว้เฉพาะเงาด้านล่างและเงาด้านข้าง โดยตัดเงาขอบบนออก */
    box-shadow: 0 6px 0 #240b15, 0 8px 15px rgba(0, 0, 0, 0.5) !important;
    
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    top: 0 !important;
}

/* ตกแต่งไอคอนและตัวหนังสือให้คมชัด */
html body .appbar-menu .menu-item .icon {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.2s ease !important;
}

html body .appbar-menu .menu-item .menu-text {
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    margin-top: 4px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) ลอยเด่นขึ้นมาสวยๆ */
html body .appbar-menu .menu-item:hover {
    transform: translateY(-4px) scale(1.03) !important;
    background: linear-gradient(180deg, #944265 0%, #632641 50%, #44172b 100%) !important;
    border-color: #bf6d91 !important;
    box-shadow: 0 10px 0 #240b15, 0 14px 25px rgba(255, 20, 100, 0.4) !important;
    filter: brightness(1.1) !important;
}

html body .appbar-menu .menu-item:hover .icon {
    transform: scale(1.1) !important;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* ====================================================
   ปรับแต่งหน้าต่าง "ติดต่อเรา" พร้อมเปลี่ยนไอคอนเป็นรูปแชทติดต่อ
   ==================================================== */
html body .v-dialog:has(.dialog-sing-in) {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .v-dialog .dialog-sing-in[data-v-64554606] {
    background: linear-gradient(180deg, #522036 0%, #381323 60%, #240b15 100%) !important;
    background-color: #240b15 !important;
    border: 2.5px solid #ff2a85 !important;
    border-radius: 22px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 42, 133, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
    padding: 24px !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ปุ่มกากบาทปิด (Close Button) มุมขวาบน */
html body .dialog-sing-in[data-v-64554606] button.v-icon.close[data-v-64554606] {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    color: #ff4081 !important;
    background: rgba(255, 64, 129, 0.1) !important;
    border: 1.5px solid #ff4081 !important;
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

html body .dialog-sing-in[data-v-64554606] button.v-icon.close[data-v-64554606]:hover {
    background: rgba(255, 64, 129, 0.3) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

/* หัวข้อ "ติดต่อเรา" พร้อมใส่ไอคอนแชท SVG สีชมพูเด่นชัด */
html body .dialog-sing-in[data-v-64554606] .dialog-title[data-v-64554606] {
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 24px !important;
    margin-top: 8px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ฝังไอคอน SVG รูปกล่องข้อความแชท สีชมพูสดใส */
html body .dialog-sing-in[data-v-64554606] .dialog-title[data-v-64554606]::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff2a85'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 42, 133, 0.8)) !important;
    vertical-align: middle !important;
}

/* กล่องปุ่มติดต่อไลน์ */
html body .dialog-sing-in[data-v-64554606] .menu-list[data-v-64554606] .menu-item[data-v-64554606] {
    background: linear-gradient(180deg, #e91e63 0%, #ad1457 50%, #78002e 100%) !important;
    border: 2px solid #ff80ab !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 #4a001a, 0 6px 15px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

html body .dialog-sing-in[data-v-64554606] .menu-list[data-v-64554606] .menu-item[data-v-64554606]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #ff2a85 0%, #c2185b 50%, #880e4f 100%) !important;
    box-shadow: 0 5px 0 #4a001a, 0 8px 20px rgba(255, 42, 133, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.6) !important;
    filter: brightness(1.1) !important;
}

/* ไอคอน LINE */
html body .dialog-sing-in[data-v-64554606] .menu-list[data-v-64554606] .menu-item[data-v-64554606] img.icon[data-v-64554606] {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) !important;
    margin-right: 14px !important;
}

/* ข้อความคำว่า "ไลน์ติดต่อ" */
html body .dialog-sing-in[data-v-64554606] .menu-list[data-v-64554606] .menu-item[data-v-64554606] .text[data-v-64554606] {
    color: #ffccd5 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ไอดีไลน์ (@sexy89) */
html body .dialog-sing-in[data-v-64554606] .menu-list[data-v-64554606] .menu-item[data-v-64554606] div > div[data-v-64554606] {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
//////////////////////////////////////////////////////////////////////////////
/* ====================================================
   ไม้ตายสุดท้าย: เปลี่ยนค่าตัวแปรสีหลัก (CSS Variables) ของเว็บ
   ==================================================== */
:root, html body {
    --primary: #522036 !important;
    --primary-dark: #240b15 !important;
}

/* บังคับซ้ำด้วย Selector เจาะจงอีกชั้น */
html body .game-category-type5 .categories[data-v-ef04176c] {
    background: linear-gradient(180deg, #522036 0%, #240b15 100%) !important;
    background-color: #240b15 !important;
    background-image: linear-gradient(180deg, #522036 0%, #240b15 100%) !important;
    border: 2px solid #a35376 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    overflow-x: auto !important;
    width: 100% !important;
    height: auto !important;
}

/* ปุ่มหมวดหมู่แต่ละอัน (.cat-item) เป็นทรงแคปซูล 3D อิสระ */
html body .categories[data-v-ef04176c] .cat-item[data-v-ef04176c] {
    background: linear-gradient(180deg, #7a3552 0%, #522036 50%, #381323 100%) !important;
    background-color: #522036 !important;
    background-image: linear-gradient(180deg, #7a3552 0%, #522036 50%, #381323 100%) !important;
    border: 2px solid #a35376 !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 0 #240b15, 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important;
    padding: 6px 16px 6px 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

/* ตกแต่งกล่องข้อความข้างใน (.name) */
html body .categories[data-v-ef04176c] .cat-item .name[data-v-ef04176c] {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    width: auto !important;
}

/* ตกแต่งรูปไอคอนประจำค่ายเกม */
html body .categories[data-v-ef04176c] .cat-item .icon[data-v-ef04176c] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d182a5 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    margin-right: 6px !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) ปุ่มหมวดหมู่ */
html body .categories[data-v-ef04176c] .cat-item[data-v-ef04176c]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #944265 0%, #632641 50%, #44172b 100%) !important;
    background-color: #632641 !important;
    background-image: linear-gradient(180deg, #944265 0%, #632641 50%, #44172b 100%) !important;
    border-color: #bf6d91 !important;
    box-shadow: 0 5px 0 #240b15, 0 8px 16px rgba(255, 20, 100, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.1) !important;
}

/* สถานะปุ่มที่ถูกเลือก (Active) ให้เป็นสีชมพูนีออนเด่นชัดเฉพาะปุ่มนั้นๆ */
html body .categories[data-v-ef04176c] .cat-item.active[data-v-ef04176c] {
    background: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    background-color: #ff1461 !important;
    background-image: linear-gradient(180deg, #ff6b95 0%, #ff1461 45%, #b50036 100%) !important;
    border: 2px solid #ff9ebb !important;
    box-shadow: 0 4px 0 #7a0026, 0 6px 15px rgba(255, 20, 97, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important;
    width: auto !important;
}

html body .categories[data-v-ef04176c] .cat-item.active[data-v-ef04176c]:hover {
    box-shadow: 0 0 18px rgba(255, 20, 97, 0.9), 0 5px 0 #7a0026, 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

html body .categories[data-v-ef04176c] .cat-item.active[data-v-ef04176c] .name[data-v-ef04176c] {
    color: #ffffff !important;
    font-weight: 800 !important;
}
////////////////////////////////////////////////////

/* ====================================================
   แก้ปุ่มฝาก (.btn-deposit) สำหรับอัปโหลด CSS เท่านั้น
   ==================================================== */
html body .appbar .appbar-container .appbar-auth .profile .box button.btn-deposit[data-v-02b89987] {
    background: linear-gradient(180deg, #34d399 0%, #10b981 45%, #047857 100%) !important;
    background-color: #10b981 !important;
    background-image: linear-gradient(180deg, #34d399 0%, #10b981 45%, #047857 100%) !important;
    
    border-radius: 50px !important;
    border: 2px solid #6ee7b7 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 4px 0 #065f46, 0 6px 15px rgba(16, 185, 129, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important;
    
    /* บังคับล้างค่า width: 36px เดิมออก เพื่อให้ปุ่มขยายรับข้อความได้ */
    width: auto !important;
    min-width: 90px !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* จัดระเบียบตัวหนังสือ "ฝาก" ข้างในปุ่ม */
html body .appbar .appbar-container .appbar-auth .profile .box button.btn-deposit[data-v-02b89987] .v-btn__content {
    color: #ffffff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    background: none !important;
}

/* แทรกไอคอน Play สีขาวไว้ด้านหน้าคำว่า "ฝาก" */
html body .appbar .appbar-container .appbar-auth .profile .box button.btn-deposit[data-v-02b89987] .v-btn__content::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
    vertical-align: middle !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ปุ่ม */
html body .appbar .appbar-container .appbar-auth .profile .box button.btn-deposit[data-v-02b89987]:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.8), 0 5px 0 #065f46, 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.1) !important;
}
///////////////////////////////////////////////////////
/* ปุ่มฝากเงินสีเขียว */
html body button.btn-deposit[data-v-02b89987] {
    min-width: 66px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #7cff9b !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #24d768 0%, #07963b 100%) !important;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ข้อความและไอคอนภายในปุ่ม */
html body button.btn-deposit[data-v-02b89987] .v-btn__content {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* เพิ่มไอคอนเกม */
html body button.btn-deposit[data-v-02b89987] .v-btn__content::before {
    content: "🎮" !important;
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    -webkit-text-fill-color: initial !important;
}

/* เอฟเฟกต์เมื่อชี้เมาส์ */
html body button.btn-deposit[data-v-02b89987]:hover {
    background: linear-gradient(180deg, #39eb7c 0%, #08aa45 100%) !important;
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

/* เอฟเฟกต์ตอนกด */
html body button.btn-deposit[data-v-02b89987]:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}