:root {
    color-scheme: light dark;
    /* Base colors (WCAG AA) */
    --bg: #FFFFFF;
    --fg: #0B1220;
    --muted-fg: #4A5568;
    --border: #E5E7EB;

    /* Brand */
    --brand-1: #2563EB; /* blue-600 */
    --brand-2: #7C3AED; /* violet-600 */
    --accent: #F97316; /* orange-500 */

    /* Hero backgrounds */
    --hero-start: #E6F4FF;
    --hero-mid: #F3E8FF;
    --hero-end: #FFF3D6;

    /* Buttons */
    --btn-prim-bg: #0D6EFD;
    --btn-prim-fg: #FFFFFF;
    --btn-ghost-fg: var(--fg);
    --btn-ghost-border: rgba(11, 18, 32, .25);

    /* Focus */
    --focus: #3B82F6; /* focus ring */
}

:root[data-theme="dark"] {
    --bg: #0B1220;
    --fg: #E6EDF3;
    --muted-fg: #AAB4C0;
    --border: #233042;

    --brand-1: #60A5FA; /* blue-400 */
    --brand-2: #A78BFA; /* violet-400 */
    --accent: #FDBA74; /* orange-300 */

    --hero-start: #0E1726;
    --hero-mid: #141B2D;
    --hero-end: #1A2235;

    --btn-prim-bg: #3B82F6;
    --btn-prim-fg: #0B1220;
    --btn-ghost-fg: var(--fg);
    --btn-ghost-border: rgba(230, 237, 243, .25);
}

body {
    scroll-behavior: smooth;

    background: var(--bg);
    color: var(--fg);
}

.navbar {
    /*backdrop-filter: saturate(180%) blur(10px);*/
    /*background: rgba(255, 255, 255, .85);*/
    backdrop-filter: saturate(180%) blur(10px);
    background: color-mix(in oklab, var(--bg), transparent 15%);
    border-bottom: 1px solid var(--border);

}

.hero {
    /*background: linear-gradient(130deg, #E6F4FF 0%, #F3E8FF 55%, #FFF3D6 100%);*/
    /*color: #0B1220;*/
    /*padding: 6rem 0 5rem;*/
    background: linear-gradient(130deg, var(--hero-start) 0%, var(--hero-mid) 55%, var(--hero-end) 100%);
    color: var(--fg);
    padding: 6rem 0 5rem;
}

.text-gradient {
    /*background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #F97316 100%);*/
    /*-webkit-background-clip: text;*/
    /*background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

}

.hero .lead,
.hero .intro {
    max-width: 65ch;

    color: var(--muted-fg);
}

.role-badges .badge {
    font-weight: 600;
    letter-spacing: .2px;

    border: 1px solid var(--border);
}

.hero .btn {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.btn-primary {
    background-color: var(--btn-prim-bg);
    border-color: var(--btn-prim-bg);
    color: var(--btn-prim-fg);
}

.btn-primary:hover, .btn-primary:focus {
    filter: brightness(0.95);
    color: var(--btn-prim-fg);
}

.btn-outline-light {
    color: var(--btn-ghost-fg);
    border-color: var(--btn-ghost-border);
}

.btn-outline-light:hover, .btn-outline-light:focus {
    background-color: var(--btn-prim-bg);
    border-color: var(--btn-prim-bg);
    color: var(--btn-prim-fg);
}

/* Focus visibility (WCAG) */
:is(a, button, .btn, .nav-link, .form-control):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: none !important;
}

.avatar {
    --avatar-size: clamp(120px, 22vw, 320px);
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FFFFFF;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

:root[data-theme="dark"] .avatar {
    border-color: #233042;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}


@media (min-width: 768px) {
    .avatar {
        --avatar-size: 220px;
    }
}

@media (min-width: 1200px) {
    .avatar {
        --avatar-size: 260px;
    }
}

.avatar--lg {
    --avatar-size: 240px;
}

.avatar--xl {
    --avatar-size: 300px;
}

#experience.bg-light {
    background: color-mix(in oklab, #ebebeb, #ffffff 6%) !important;
}

:root[data-theme="dark"] #experience.bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Tiêu đề và chữ trong section */
#experience .section-title,
#experience .card-title,
#experience h1, #experience h2, #experience h3, #experience h4, #experience h5, #experience h6,
#experience p, #experience li {
    color: var(--fg);
}

/* Chữ phụ/muted */
#experience .text-muted,
#experience small,
#experience .opacity-75,
#experience .text-secondary {
    color: var(--muted-fg) !important;
}

/* Viền, hr */
#experience .border,
#experience .border-top,
#experience .border-bottom,
#experience .border-start,
#experience .border-end,
#experience hr {
    border-color: var(--border) !important;
    color: var(--border) !important;
}

/* Card/list trong toàn section */
#experience .card,
#experience .card-header,
#experience .card-body,
#experience .list-group-item {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--border);
}

/* Nếu có các util màu nền cứng bên trong (bg-white, bg-body, bg-light) */
#experience .bg-white,
#experience .bg-body,
#experience .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 6%) !important;
}

:root[data-theme="dark"] #experience .bg-white,
:root[data-theme="dark"] #experience .bg-body {
    background: var(--bg) !important;
}

:root[data-theme="dark"] #experience .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Link trong section */
#experience a:not(.btn) {
    color: var(--brand-1);
    text-decoration-color: color-mix(in oklab, var(--brand-1), transparent 60%);
}

#experience a:not(.btn):hover {
    color: color-mix(in oklab, var(--brand-1), #ffffff 18%);
    text-decoration-color: currentColor;
}


.section-title {
    margin-bottom: 1.25rem;
}

.badge-skill {
    font-size: .95rem;
}

.timeline {
    border-left: 3px solid var(--border);
    padding-left: 1rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.45rem;
    top: .25rem;
    width: .75rem;
    height: .75rem;
    background: var(--brand-1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--border);
}

#projects {
    color: var(--fg);
}

#projects.bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 6%) !important;
}

:root[data-theme="dark"] #projects.bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Typography trong projects */
#projects .section-title,
#projects .card-title,
#projects h1, #projects h2, #projects h3, #projects h4, #projects h5, #projects h6,
#projects p, #projects li {
    color: var(--fg);
}

/* Chữ phụ/muted */
#projects .text-muted,
#projects small,
#projects .opacity-75,
#projects .text-secondary {
    color: var(--muted-fg) !important;
}

/* Viền, hr */
#projects .border,
#projects .border-top,
#projects .border-bottom,
#projects .border-start,
#projects .border-end,
#projects hr {
    border-color: var(--border) !important;
    color: var(--border) !important;
}

/* Card/List trong projects */
#projects .card,
#projects .card-header,
#projects .card-body,
#projects .list-group-item {

}

/* Tiện ích nền cứng bên trong */
#projects .bg-white,
#projects .bg-body,
#projects .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 6%) !important;
}

:root[data-theme="dark"] #projects .bg-white,
:root[data-theme="dark"] #projects .bg-body {
    background: var(--bg) !important;
}

:root[data-theme="dark"] #projects .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Link trong projects */
#projects a:not(.btn) {
    color: var(--brand-1);
    text-decoration-color: color-mix(in oklab, var(--brand-1), transparent 60%);
}

#projects a:not(.btn):hover {
    color: color-mix(in oklab, var(--brand-1), #ffffff 18%);
    text-decoration-color: currentColor;
}

/* Project card đảm bảo nền/viền theo theme (bổ sung cho .project-card hiện có) */
#projects .project-card {
    background: var(--bg);
    color: var(--fg);
}

/* =========================
   Skills section (toàn khu vực)
   ========================= */
#skills {
    color: var(--fg);
}

#skills.bg-light {
    background: color-mix(in oklab, #ebebeb, #ffffff 6%) !important;
}

:root[data-theme="dark"] #skills.bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Typography trong skills */
#skills .section-title,
#skills .card-title,
#skills h1, #skills h2, #skills h3, #skills h4, #skills h5, #skills h6,
#skills p, #skills li {
    color: var(--fg);
}

/* Chữ phụ/muted */
#skills .text-muted,
#skills small,
#skills .opacity-75,
#skills .text-secondary {
    color: var(--muted-fg) !important;
}

/* Viền, hr */
#skills .border,
#skills .border-top,
#skills .border-bottom,
#skills .border-start,
#skills .border-end,
#skills hr {
    border-color: var(--border) !important;
    color: var(--border) !important;
}

/* Card/List trong skills */
#skills .card,
#skills .card-header,
#skills .card-body,
#skills .list-group-item {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--border);
}

/* Tiện ích nền cứng bên trong */
#skills .bg-white,
#skills .bg-body,
#skills .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 6%) !important;
}

:root[data-theme="dark"] #skills .bg-white,
:root[data-theme="dark"] #skills .bg-body {
    background: var(--bg) !important;
}

:root[data-theme="dark"] #skills .bg-light {
    background: color-mix(in oklab, var(--bg), #ffffff 4%) !important;
}

/* Link trong skills */
#skills a:not(.btn) {
    color: var(--brand-1);
    text-decoration-color: color-mix(in oklab, var(--brand-1), transparent 60%);
}

#skills a:not(.btn):hover {
    color: color-mix(in oklab, var(--brand-1), #ffffff 18%);
    text-decoration-color: currentColor;
}

/* Phần chip/badge trong skills đã có theme; giữ đồng bộ nếu có biến thể khác */
#skills .badge-chip {
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg), var(--fg) 6%);
    color: var(--fg);
}

:root[data-theme="dark"] #skills .badge-chip {
    background: color-mix(in oklab, var(--bg), #ffffff 6%);
}

.project-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}

:root[data-theme="dark"] .project-card:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5);
}

.project-hover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-card:hover .project-hover {
    opacity: 1;
}

.project-hover h6 {
    margin-bottom: .5rem;
}

.project-hover .desc {
    font-size: .95rem;
}

.project-hover .meta .badge {
    margin-right: .25rem;
    margin-bottom: .25rem;
}

.project-hover .actions .btn {
    margin-right: .5rem;
}

footer a {
    color: inherit;
}

.btn-youtube {
    --yt-color: #ff0000;
    border-color: var(--yt-color);
    color: var(--yt-color);
}

.btn-youtube:hover, .btn-youtube:focus, .btn-youtube:active {
    background-color: var(--yt-color);
    border-color: var(--yt-color);
    color: #fff;
}

.btn .icon-papermc {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: -0.2rem;
}

.desc-hover {
    position: relative;
    cursor: pointer;
}

.desc-hover .view-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45));
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    border-radius: .375rem;
}

.desc-hover:hover .view-more, .desc-hover:focus-within .view-more {
    opacity: 1;
}

.project-card .card-body {
    position: relative;
}

.project-card .card-body .view-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45));
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1;
    pointer-events: none;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.project-card .card-body:hover .view-more, .project-card .card-body:focus-within .view-more {
    opacity: 1;
    pointer-events: auto;
}

.skill-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .5rem;
    margin-bottom: .5rem;
}

.skill-line .label {
    font-weight: 600;
    margin-right: .25rem;
    white-space: nowrap;
    color: var(--fg);
    opacity: .85;
}

.skill-list {
    list-style: none; /* phòng trường hợp không dùng list-unstyled */
    padding-left: 0;
    margin-bottom: 0;
}

.skill-list li {
    margin-bottom: .6rem; /* giãn cách giữa các dòng */
}

.skill-list li:last-child {
    margin-bottom: 0;
}

/* Badge gọn và thoáng hơn khi nằm trong list */
.badge-chip {
    display: inline-block;
    padding: .28rem .6rem;
    border-radius: .5rem;
    font-size: .9rem;
    line-height: 1.35; /* thoáng hơn để dễ đọc */
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg), var(--fg) 6%);
    color: var(--fg);
}

:root[data-theme="dark"] .badge-chip {
    background: color-mix(in oklab, var(--bg), #ffffff 6%);
}

.badge-chip:hover {
    background: color-mix(in oklab, var(--bg), var(--fg) 10%);
    text-decoration: none;
}

.carousel-inner img {
    height: 300px; /* hoặc 250px tùy ý */
    object-fit: contain; /* hoặc cover nếu muốn full khung */
    background-color: #000; /* nếu dùng contain, ảnh sẽ có viền màu này */
}