:root {
            --pink-gradient: linear-gradient(90deg, #ff85c0, #f759ab);
            --blue-gradient: linear-gradient(90deg, #70d6ff, #1890ff);
            --glass: rgba(255, 255, 255, 0.85);
            --glass-bg: rgba(30, 41, 59, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-light: #f1f5f9;
        }

        body, html {
            margin: 0; padding: 0;
            width: 100%; height: 100%;
            font-family: 'Kanit', sans-serif;
            overflow-x: hidden; /* ป้องกันการเลื่อนซ้ายขวา */
        }

        .bg-layer {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), url('/shop/Gemini.webp') no-repeat center center;
            background-size: cover;
            z-index: -1;
            filter: brightness(0.8);
        }

        /* Navbar */
        .navbar {
            position: fixed; top: 20px; left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 10px 30px;
            border-radius: 50px;
            display: flex; align-items: center; gap: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            z-index: 100;
        }

        .nav-item { text-decoration: none; color: #444; font-weight: bold; font-size: 14px; transition: 0.3s; }
        .nav-item:hover { color: #f759ab; }
        .nav-active { background: var(--pink-gradient); color: white !important; padding: 5px 20px; border-radius: 20px; }

        .logo-center { text-align: center; font-weight: bold; }
        .logo-main { color: #f759ab; font-size: 20px; display: block; line-height: 1; }
        .logo-sub { color: #1890ff; font-size: 10px; text-transform: uppercase; }

        /* Donate Content Section - คุมระยะเว้นด้านบนหลบ Navbar */
        .container {
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding-top: 220px;    /* ปรับระยะขอบบนเป็น 220px เพื่อดันกล่องลงมาพ้นตัว Navbar ชัดเจน */
            padding-bottom: 80px;
            color: white;
        }

        .donate-header {
            text-align: center; margin-bottom: 30px;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }

        .donate-header h1 { font-size: 40px; margin: 0; }
        .donate-header p { font-size: 18px; opacity: 0.9; }

        .donate-grid {
            display: flex; gap: 20px; z-index: 10; flex-wrap: wrap; justify-content: center;
        }

        .donate-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 20px;
            width: 260px;
            text-align: center;
            color: #333;
            transition: 0.3s;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .donate-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .donate-card img { height: 60px; margin-bottom: 15px; border-radius: 10px; }
        .donate-card h3 { margin: 10px 0; color: #f759ab; font-size: 18px; }
        .donate-card p { font-size: 13px; color: #666; margin-bottom: 20px; }

        .btn-donate {
            display: inline-block;
            padding: 10px 25px;
            border-radius: 10px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            background: var(--blue-gradient);
            transition: 0.3s;
            font-size: 14px;
        }
        .btn-donate:hover { opacity: 0.9; box-shadow: 0 5px 15px rgba(24, 144, 255, 0.4); }

        /* คลาสควบคุมกล่องบริจาค - ปรับแก้ให้บล็อกรักษาระยะอยู่กึ่งกลางหน้าจออย่างถาวร */
        .paypal-donate-box {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    width: 90%;
    max-width: 480px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    text-align: center;
    z-index: 10;
    border: 1px solid var(--glass-border);
    box-sizing: border-box;
    border-top: 5px solid #f759ab; 
    animation: fadeIn 0.9s ease;
    /* 🛠️ แก้ไข 3 บรรทัดนี้เพื่อบังคับจัดกึ่งกลางหน้าจอแนวราบให้เสถียรที่สุด */
    display: table !important;    /* ใช้ display: table แทน block เพื่อตัดปัญหาการยืดขยายตามฟอร์มเก่า */
    margin-left: auto !important;  /* บังคับดันระยะขอบซ้าย */
    margin-right: auto !important; /* บังคับดันระยะขอบขวา */
}


        .paypal-donate-box h2 {
            font-size: 24px;
            color: var(--text-light);
            margin-top: 0;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .paypal-donate-box p {
            font-size: 13px;
            color: #cbd5e1;
            margin-bottom: 25px;
        }

        .paypal-donate-box strong { color: #e2e8f0 !important; }

        .paypal-donate-box input[type="text"],
        .paypal-donate-box .donate-select {
            background-color: rgba(255, 255, 255, 0.05) !important;
            color: var(--text-light) !important;
            border: 1px solid var(--glass-border) !important;
        }

        .paypal-donate-box input[type="text"]::placeholder {
            color: #94a3b8;
        }

        .paypal-donate-box .donate-select option {
            background-color: #1e293b;
            color: var(--text-light);
        }

        .paypal-btn-wrapper {
            margin-bottom: 25px;
            display: flex;
            justify-content: center;
        }

        .paypal-main-btn {
            cursor: pointer;
            transition: 0.2s;
        }

        .paypal-main-btn:hover {
            transform: scale(1.02);
        }

        .card-brands {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 5px;
        }

        .card-brands img {
            height: 24px;
            object-fit: contain;
        }

        /* Rate Table Section */
        .rate-container {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 25px;
            border-radius: 20px;
            width: 90%;
            max-width: 600px;
            z-index: 10;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            border: 1px solid var(--glass-border);
            box-sizing: border-box;
            margin: 40px auto 0 auto; /* จัดตารางให้อยู่กึ่งกลางหน้าจออัตโนมัติ */
        }

        .rate-container h3 { color: var(--text-light); margin-top: 0; text-align: center; border-bottom: 2px solid #f759ab; padding-bottom: 10px; }
        
        table { width: 100%; border-collapse: collapse; margin-top: 15px; color: #cbd5e1; }
        th { text-align: left; padding: 10px; border-bottom: 1px solid var(--glass-border); }
        td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .bonus { color: #52c41a; font-weight: bold; }
        .big-bonus { color: #f759ab; font-weight: bold; }

        .footer {
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    padding: 10px 0; 
    background: rgba(15, 23, 42, 0.95); 
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    z-index: 30;
    line-height: 1.4;
    margin-top: auto; /* ตรึงให้อยู่ล่างสุดเสมอ */
.footer-links { margin-bottom: 10px; }
.footer-links a { color: #38bdf8; text-decoration: none; margin: 0 10px; transition: color 0.2s; }
.footer-links a:hover { color: #7dd3fc; text-decoration: underline; }
}

        .logo-animation-box {
            height: 55px; 
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px 0; 
        }

        .nav-logo-char {
            height: 100%;
            width: auto;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
            animation: logoBounce 3s infinite ease-in-out; 
            transform-origin: bottom center; 
        }

        @keyframes logoBounce {
            0%, 100% { transform: scale(1) translateY(0); }
            30% { transform: scale(1.08, 0.92) translateY(0); }
            50% { transform: scale(0.95, 1.05) translateY(-6px); }
            70% { transform: scale(1.02, 0.98) translateY(0); }
        }
    .spacer-block {
    display: block;
    width: 100%;
    height: 40px; /* สามารถปรับเพิ่ม/ลดตัวเลขเพื่อกำหนดระยะช่องไฟได้ตามต้องการ */
}
    .update-banner-img {
    width: 15%;
    height: auto;          
    display: inline-block;  
    margin: 0 5px 5px;      
    vertical-align: middle; 
}

/* Standalone glass-style info boxes (Terms of Service, extra info, etc.) */
.glass-box {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px 30px;
    width: 90%;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    box-sizing: border-box;
    color: var(--text-light);
    text-align: left;
    animation: fadeIn 0.9s ease;
}

.glass-box + .glass-box {
    margin-top: 20px;
}

.glass-box-title {
    margin: 0 0 14px 0;
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

.glass-box-list {
    margin: 0;
    padding-left: 20px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.7;
}

.glass-box-list li { margin-bottom: 8px; }
.glass-box-list li:last-child { margin-bottom: 0; }
.glass-box-list strong { color: #f1f5f9; }

.terms-box { border-top: 4px solid #f759ab; }

.extra-info-box {
    border-top: 4px solid #1890ff;
}

.glass-box-empty-content {
    min-height: 80px;
    font-size: 13px;
    color: #94a3b8;
}

/* Consent Modal */

.consent-brand-logo{
    max-width: 160px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}


.consent-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}
.consent-brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:230px;
    height:48px;
    padding:0 26px;
    border-radius:999px;
    background:linear-gradient(180deg,#1f1f1f,#101010);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.12em;
}
.consent-brand-subtitle{
    margin-top:10px;
    font-size:14px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
}

.consent-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.72);
    display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:9999;
}
.consent-overlay.hidden{display:none;}
.consent-modal{
    width:min(920px,88vw);
    background:rgba(0,0,0,.92);
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.65);
    padding:34px 46px 34px;
    color:#fff; position:relative;
}
.consent-modal::before{
    content:""; position:absolute; inset:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px; pointer-events:none;
}
.consent-title{
    text-align:center; font-size:30px; font-weight:600; margin:0 0 18px;
}
.consent-lang{
    display:flex; justify-content:center; gap:10px; margin-bottom:24px;
}
.consent-lang button{
    border:none; background:#0d6efd; color:#fff; padding:12px 22px; border-radius:6px;
    font-size:16px; font-weight:700; cursor:pointer;
}
.consent-lang button.active{background:#0b5ed7;}
.consent-content{
    max-width:720px; margin:0 auto; line-height:1.65; font-size:17px;
}
.consent-content p{margin:0 0 14px;}
.consent-content ul{padding-left:28px; margin:8px 0 16px;}
.consent-content li{margin-bottom:8px;}
.consent-agree{
    margin-top:20px; display:flex; justify-content:center; align-items:center; gap:10px;
    font-size:16px;
}
.consent-divider{
    margin:20px auto 22px; height:1px; width:96%; background:rgba(255,255,255,.35);
}
.consent-actions{display:flex; justify-content:flex-end;
    margin-top:10px;}
.consent-continue{
    min-width:190px; height:56px; border:none; border-radius:6px;
    background:#666; color:#d7d7d7; font-size:22px; font-weight:700; cursor:not-allowed;
}
.consent-continue.enabled{
    background:linear-gradient(180deg,#8a8a8a,#5c5c5c); color:#fff; cursor:pointer;
}
@media (max-width:768px){
    .consent-modal{padding:22px 18px 28px;}
    .consent-title{font-size:28px;}
    .consent-content,.consent-agree{font-size:16px;}
    .consent-actions{justify-content:center;}
    .consent-continue{width:100%; min-width:unset;}
}