/* ==========================================================
   CHỐNG BÔI ĐEN + CHỐNG ZOOM + THIẾT LẬP CƠ BẢN
   ========================================================== */
html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
}

* {
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Cho phép chọn text trong ô input/textarea để chat & đăng nhập */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto;
}

/* Chặn kéo ảnh */
img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background: #080503; 
    color: #fff; 
    min-height: 100vh; 
    overflow-x: hidden; 
}

/* Thanh cuộn */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #885c2b; border-radius: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }

/* Biến môi trường */
:root {
    --motion-smooth: cubic-bezier(0.2, 0.75, 0.25, 1);
    --shadow-panel: 0 16px 38px rgba(0, 0, 0, 0.42), 0 3px 10px rgba(0, 0, 0, 0.28);
    --shadow-gold-glow: 0 0 18px rgba(245, 208, 97, 0.3);
    --safe-top: env(safe-area-inset-top, 0px); 
    --safe-bottom: env(safe-area-inset-bottom, 0px); 
    --safe-left: env(safe-area-inset-left, 0px); 
    --safe-right: env(safe-area-inset-right, 0px); 
    --vh: 1vh; 
}

button {
    transition: transform 180ms var(--motion-smooth), box-shadow 220ms var(--motion-smooth), filter 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

button:not(:disabled):hover {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

button:not(:disabled):active {
    filter: brightness(0.94);
}

button:focus-visible {
    outline: 2px solid rgba(245, 208, 97, 0.9);
    outline-offset: 3px;
}

html, body { height: 100%; height: 100dvh; }
body { padding-left: var(--safe-left); padding-right: var(--safe-right); }
body.modal-open { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; top: 0; left: 0; }

.custom-scrollable { 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    touch-action: pan-y !important; 
    overscroll-behavior-y: contain; 
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}