/* ====================================================
   LIQUID GLASS
   Lõi kính mờ tối + viền sáng phía trên + vệt phản chiếu + quầng màu hắt
   xuống dưới theo --tint của từng phần tử.

   Load SAU neumorphism.css: file đó đặt background/box-shadow với !important
   cho .bento-item, .achievement-card, .cert-card, .btn-*, nên ở đây cũng phải
   !important, và cùng độ ưu tiên thì file sau thắng.
   Không dùng ::before/::after: .glass-panel, .social-btn, .cert-card đã dùng
   hai pseudo đó cho hiệu ứng khác.
   ==================================================== */
:root {
    --lg-base: rgba(24, 22, 26, 0.62);
    --lg-sheen: rgba(255, 255, 255, 0.16);
    --lg-top: rgba(255, 255, 255, 0.07);
    --lg-rim: rgba(255, 255, 255, 0.30);
    --lg-edge: rgba(255, 255, 255, 0.10);
    --lg-drop: rgba(0, 0, 0, 0.45);
    --lg-glow: 55%;
}
.light-mode {
    --lg-base: rgba(255, 255, 255, 0.55);
    --lg-sheen: rgba(255, 255, 255, 0.85);
    --lg-top: rgba(255, 255, 255, 0.45);
    --lg-rim: rgba(255, 255, 255, 0.95);
    --lg-edge: rgba(90, 36, 32, 0.12);
    --lg-drop: rgba(60, 40, 30, 0.16);
    --lg-glow: 45%;
}

/* ---------- material ---------- */
.edu-card,
#experience .bento-item,
#experience .cert-card,
.btn-primary,
.btn-secondary,
.social-btn {
    --lg-tint: var(--tint, var(--hl-contest));
    background:
        radial-gradient(120% 70% at 50% -20%, var(--lg-sheen), transparent 60%),
        linear-gradient(180deg, var(--lg-top) 0%, transparent 40%),
        linear-gradient(0deg, color-mix(in srgb, var(--lg-tint) 20%, transparent) 0%, transparent 50%),
        var(--lg-base) !important;
    border: 1px solid var(--lg-edge) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-rim),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 -14px 22px -16px color-mix(in srgb, var(--lg-tint) 90%, transparent),
        0 18px 30px -16px color-mix(in srgb, var(--lg-tint) var(--lg-glow), transparent),
        0 10px 24px -12px var(--lg-drop) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease !important;
}

.edu-card:hover,
#experience .bento-item:hover,
#experience .cert-card:hover,
.btn-primary:hover,
.btn-secondary:hover,
.social-btn:hover {
    border-color: color-mix(in srgb, var(--lg-tint) 45%, var(--lg-edge)) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-rim),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 -18px 26px -16px var(--lg-tint),
        0 24px 40px -14px color-mix(in srgb, var(--lg-tint) 75%, transparent),
        0 12px 28px -12px var(--lg-drop) !important;
}
.edu-card:hover { transform: translateY(-3px); }

/* Hai thẻ chính: quầng màu rộng và đậm hơn để kéo mắt về trước */
#experience .exp-feature {
    background:
        radial-gradient(120% 60% at 50% -15%, var(--lg-sheen), transparent 60%),
        radial-gradient(90% 60% at 50% 115%, color-mix(in srgb, var(--lg-tint) 32%, transparent), transparent 70%),
        var(--lg-base) !important;
    border-color: color-mix(in srgb, var(--lg-tint) 30%, var(--lg-edge)) !important;
    border-radius: 28px !important;
    box-shadow:
        inset 0 1px 0 var(--lg-rim),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 -24px 36px -20px var(--lg-tint),
        0 30px 60px -22px color-mix(in srgb, var(--lg-tint) 70%, transparent),
        0 14px 30px -14px var(--lg-drop) !important;
}

/* Nút: viên thuốc, chữ theo màu chữ chính (nền giờ là kính chứ không đặc) */
.btn-primary,
.btn-secondary {
    border-radius: 999px !important;
    color: var(--text-main) !important;
}
.btn-primary { --lg-tint: var(--hl-contest); }
.btn-secondary { --lg-tint: var(--hl-lang); }
.btn-primary:active,
.btn-secondary:active,
.social-btn:active { transform: translateY(1px) scale(0.98); }

/* Điện thoại: blur nhẹ hơn cho đỡ tốn GPU khi cuộn */
@media (max-width: 700px) {
    .edu-card,
    #experience .bento-item,
    #experience .cert-card,
    .btn-primary,
    .btn-secondary,
    .social-btn {
        -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
        backdrop-filter: blur(10px) saturate(150%) !important;
    }
}

/* Không hỗ trợ color-mix: giữ kính, bỏ quầng màu */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .edu-card,
    #experience .bento-item,
    #experience .cert-card,
    .btn-primary,
    .btn-secondary,
    .social-btn {
        background: var(--lg-base) !important;
        box-shadow: inset 0 1px 0 var(--lg-rim), 0 10px 24px -12px var(--lg-drop) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-card,
    #experience .bento-item,
    .btn-primary,
    .btn-secondary,
    .social-btn { transition: none !important; }
    .edu-card:hover { transform: none; }
}