/* ================== RESET CƠ BẢN ================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: none;
    outline: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

input,
textarea {
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: transparent;
}

img {
    max-width: 100%;
    display: block;
}

/* ================== DARK THEME + BIẾN MÀU ================== */

:root {
    /* NỀN CHUNG */
    --bg-body: #18191a;
    /* nền tổng (dark mềm kiểu Facebook) */
    --bg-elevated: #242526;
    /* nền card, block nổi */
    --bg-elevated-soft: #2f3031;
    /* nền hover / khối nổi hơn */
    --bg-header: #18191a;
    /* header */
    --bg-input: #3a3b3c;
    /* input, search */

    /* VIỀN NHẸ (nếu cần) */
    --border-subtle: #3a3b3c;

    /* TEXT */
    --text-main: #e4e6eb;
    --text-muted: #b0b3b8;
    --text-soft: #8c8d91;

    /* ACCENT (Electric Blue + Cyan) */
    --accent: #4299e1;
    /* Electric Blue */
    --accent-alt: #0bc5ea;
    /* Cyan */
    --accent-soft: rgba(66, 153, 225, 0.2);
    --accent-hover: #46a4f3;

    /* SHADOW 3D */
    --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-soft-sm: 0 8px 22px rgba(0, 0, 0, 0.45);

    /* RADIUS & SPACING */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;

    /* TỐC ĐỘ ANIMATION CHUNG */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.2s ease-out;
}

/* ================== KHUNG VUÔNG (bỏ bo góc toàn site) ================== */
/* Ép tất cả phần tử về vuông góc — gồm cả avatar, nút, pill, ảnh, input...
   Muốn quay lại bo góc: chỉ cần XÓA nguyên khối này. */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Các biến radius cũng về 0 cho nhất quán (phòng khi gỡ !important ở trên) */
:root {
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
}

/* NGOẠI LỆ: giữ avatar (ảnh đại diện) bo tròn.
   Quét mọi class có chữ "avatar" + ảnh bên trong → tự phủ hết các loại avatar. */
[class*="avatar"],
[class*="avatar"] img {
    border-radius: 50% !important;
}

/* ================== UTILS NHỎ DÙNG CHUNG ================== */

.body-lock {
    overflow: hidden;
}

.text-muted {
    color: var(--text-muted);
}

.text-soft {
    color: var(--text-soft);
}