:root {
    --afnm-bg: #f7f7f7;
    --afnm-text: #000;
    --afnm-card: #ededed;
    --afnm-muted: #504f57;
    --afnm-brand: #3c4148;
    --afnm-border: #ededed;
    --afnm-accent-1: #ffbf00;
}


#afnm {
    font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--afnm-text);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    margin: 20px auto;
    padding: 20px 0px;
    background: var(--afnm-bg);
    border-radius: 10px;
}

#afnm #afnm-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    width: 100%;
    margin-bottom: 24px;
    text-align: center;
}

#afnm #afnm-app.afnm-inactive #afnm-result {
    margin: -4px 0 22px;
    font-size: 48px;
}

#afnm #afnm-app.afnm-inactive label,
#afnm #afnm-app.afnm-inactive #afnm-copy {
    display: none;
}

#afnm #afnm-app.afnm-inactive #afnm-generate {
    animation: afnm-idle 2.5s ease-in-out infinite;
}



@keyframes afnm-idle {

    0%,
    10% {
        box-shadow: 0 0 #3a85f5;
    }

    45%,
    55% {
        box-shadow: 0 0 0 8px rgba(80, 0, 255, 0);
    }
}



#afnm #afnm-app.afnm-active #afnm-result-wrap {
    padding: 0 16px;
}

#afnm #afnm-app.afnm-active #afnm-result-wrap #afnm-result {
    margin-bottom: 16px;
}

#afnm #afnm-app.afnm-active #afnm-result-wrap label,
#afnm #afnm-app.afnm-active #afnm-result-wrap #afnm-copy {
    display: inline-flex;
}

#afnm #afnm-result-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#afnm #afnm-result-wrap label {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
}

#afnm #afnm-result-wrap span {
    color: var(--afnm-muted);
}

/* Tab System Styles */
.afnm-korean-unified {
    width: 100%;
}

.afnm-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--afnm-border);
    padding-bottom: 10px;
}

.afnm-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--afnm-muted);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.afnm-tab-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--afnm-text);
}

.afnm-tab-btn.active {
    background: var(--afnm-brand);
    color: #fff;
}

.afnm-tab-content {
    display: none;
    animation: afnmFadeIn 0.4s ease;
}

.afnm-tab-content.active {
    display: block;
}

@keyframes afnmFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Specific adjustments for date tab result */
#afnm-app-date.afnm-inactive #afnm-result-wrap-date label,
#afnm-app-date.afnm-inactive .afnm-copy-date,
#afnm-app-date-cn.afnm-inactive #afnm-result-wrap-date label,
#afnm-app-date-cn.afnm-inactive .afnm-copy-date,
#afnm-app-date-jv.afnm-inactive #afnm-result-wrap-date label,
#afnm-app-date-jv.afnm-inactive .afnm-copy-date,
#afnm-app-date-jp.afnm-inactive #afnm-result-wrap-date label,
#afnm-app-date-jp.afnm-inactive .afnm-copy-date {
    display: none;
}

#afnm-app-date.afnm-active,
#afnm-app-date-cn.afnm-active,
#afnm-app-date-jv.afnm-active,
#afnm-app-date-jp.afnm-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#afnm-app-date.afnm-active #afnm-result-wrap-date label,
#afnm-app-date.afnm-active .afnm-copy-date,
#afnm-app-date-cn.afnm-active #afnm-result-wrap-date label,
#afnm-app-date-cn.afnm-active .afnm-copy-date,
#afnm-app-date-jv.afnm-active #afnm-result-wrap-date label,
#afnm-app-date-jv.afnm-active .afnm-copy-date,
#afnm-app-date-jp.afnm-active #afnm-result-wrap-date label,
#afnm-app-date-jp.afnm-active .afnm-copy-date {
    display: inline-flex;
}

#afnm-result-wrap-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.afnm-copy-date {
    margin-top: 15px;
    margin-bottom: 24px;
    font-weight: 700;
    padding: 0 24px;
    background: var(--afnm-text);
    color: var(--afnm-bg);
    border-radius: 99px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 17px;
    transition: .3s ease;
    cursor: pointer;
    user-select: none;
}

.afnm-copy-date:after {
    content: "";
    height: 22px;
    width: 0;
    border-radius: 11px;
    display: block;
    background-image: url("../images/check.svg");
    background-size: cover;
    transition: .3s ease;
    opacity: 0;
}

.afnm-copy-date.afnm-copied {
    background: #00b512;
    color: #fff;
    padding: 0 12px 0 24px;
    gap: 6px;
}

.afnm-copy-date.afnm-copied:after {
    width: 22px;
    opacity: 1;
}

@media(min-width:960px) {
    #afnm .afnm-cta-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
    }

    #afnm .afnm-cta-wrap #afnm-name {
        padding: 0 24px;
        margin-bottom: 0;
    }

    #afnm .afnm-cta-wrap #afnm-generate,
    #afnm .afnm-cta-wrap #afnm-random {
        min-width: unset;
        padding: 0 12px;
        margin-bottom: 0;
    }
}

#afnm #afnm-generate,
#afnm #afnm-random,
#afnm #afnm-name {
    font-weight: 700;
    line-height: 24px;
    border: 0;
    border-radius: 10px;
}

#afnm #afnm-name {
    line-height: 45px;
    background: transparent;
    margin-bottom: 12px;
    font-size: 19px;
    padding: 0 16px;
    width: 268px;
    font-family: inherit;
    color: var(--afnm-text);
    box-shadow: inset 0 0 0 3px var(--afnm-border);
    transition: .3s ease;
}

#afnm #afnm-name:focus {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--afnm-brand);
}

#afnm #afnm-generate,
#afnm #afnm-random {
    height: 40px;
    user-select: none;
    color: #fff;
    background: var(--afnm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 12px;
    min-width: 268px;
    font-size: 100%;
    padding: 0 16px;
    white-space: nowrap;
}

#afnm #afnm-random {
    background: #504f57;
    font-size: 70%;
    opacity: 0.7;
    font-weight: normal;
}

@media(min-width:961px) {

    #afnm #afnm-generate,
    #afnm #afnm-random {
        transition: .3s ease;
        transform: scale(1);
    }

    #afnm #afnm-generate:hover,
    #afnm #afnm-random:hover {
        transform: scale(1.04);
    }

    #afnm #afnm-generate:active,
    #afnm #afnm-random:active {
        transform: scale(.97);
    }
}

#afnm #afnm-gender-switch {
    height: 40px;
    --afnm-switch-size: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--afnm-card);
    position: relative;
    width: 300px;
}

@media(min-width:960px) {
    #afnm #afnm-gender-switch {
        --afnm-switch-size: 80px;
        width: 260px;
    }
}



#afnm #afnm-gender-switch:before {
    content: "";
    display: block;
    width: 90px;
    height: 80%;
    border-radius: 10px;
    background: var(--afnm-bg);
    position: absolute;
    transition: .25s ease;
}



@media(min-width:960px) {
    #afnm #afnm-gender-switch:before {
        width: 80px;
    }
}

#afnm #afnm-gender-switch.afnm-g0:before {
    transform: translateX(calc(0px - var(--afnm-switch-size)));
}

#afnm #afnm-gender-switch.afnm-g0 span.afnm-male {
    transform: scale(1.1);
}

#afnm #afnm-gender-switch.afnm-g1:before {
    transform: translateX(0);
}

#afnm #afnm-gender-switch.afnm-g1 span.afnm-female {
    transform: scale(1.1);
}

#afnm #afnm-gender-switch.afnm-g2:before {
    transform: translateX(var(--afnm-switch-size));
}

#afnm #afnm-gender-switch.afnm-g2 span.afnm-unisex {
    transform: scale(1.1);
}

#afnm #afnm-gender-switch span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 46px;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
    margin: 4px 0;
    transition: .3s ease;
    font-size: 14px;
    font-weight: 600;
    color: var(--afnm-text);
    z-index: 2;
}

@media(min-width:960px) {
    #afnm #afnm-gender-switch span {
        width: 80px;
        font-size: 13px;
    }
}

#afnm #afnm-result {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1em;
    margin-top: 6px;

    line-height: 1.2;
    /* rất quan trọng */
    min-height: calc(56px * 1.2 * 2);
    /* luôn chừa chỗ cho 2 dòng */

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;

}

@media(max-width:639px) {
    #afnm #afnm-result.afnm-long-word {
        font-size: 32px;
        word-break: break-word;
    }
}

@media(min-width:640px) {
    #afnm #afnm-result {
        font-size: 48px;
    }
}

@media(min-width:960px) {
    #afnm #afnm-result {
        font-size: 56px;
        line-height: 1.2;
        /* rất quan trọng */
        min-height: calc(56px * 1.2 * 2);
        /* luôn chừa chỗ cho 2 dòng */

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#afnm #afnm-result.afnm-magic {
    animation: afnm-magic .3s ease;
}

@keyframes afnm-magic {
    0% {
        transform: scaleX(0)scaleY(0);
        color: var(--afnm-accent-1);
    }

    70% {
        transform: scaleX(1.1)scaleY(.65)skewX(-4deg)skewY(-4deg)rotate(3deg);
        color: var(--afnm-accent-2);
    }

    90% {
        transform: scaleX(.8)scaleY(1.1)skewX(8deg)skewY(2deg)rotate(-2deg);
    }

    100% {
        transform: scaleX(1)scaleY(1);
        color: var(--afnm-text);
    }
}

#afnm #afnm-copy {
    margin-bottom: 24px;
    font-weight: 700;
    padding: 0 24px;
    background: var(--afnm-text);
    color: var(--afnm-bg);
    border-radius: 99px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 17px;
    transition: .3s ease;
    cursor: pointer;
    user-select: none;
}

#afnm #afnm-copy:after {
    content: "";
    height: 22px;
    width: 0;
    border-radius: 11px;
    display: block;
    background-image: url("../images/check.svg");
    background-size: cover;
    transition: .3s ease;
    opacity: 0;
}

#afnm #afnm-copy.afnm-copied {
    background: #00b512;
    color: #fff;
    padding: 0 12px 0 24px;
    gap: 6px;
}

#afnm #afnm-copy.afnm-copied:after {
    width: 22px;
    opacity: 1;
}

/* Korean Name by Date Styles */
.afnm-by-date .afnm-date-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    padding: 10px;
}

.afnm-by-date .afnm-input-group {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.afnm-by-date .afnm-input-group label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
    display: inline-block;
    white-space: nowrap;
}

.afnm-by-date .afnm-sex-options {
    display: flex;
    gap: 15px;
}

.afnm-by-date .afnm-sex-options label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.afnm-by-date .afnm-selects {
    display: flex;
    gap: 10px;
}

.afnm-by-date .afnm-selects select {
    flex: 1;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--afnm-border);
    background: #fff;
    font-family: inherit;
}

.afnm-by-date .afnm-btn {
    height: 45px;
    background: var(--afnm-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
}

.afnm-by-date .afnm-btn:hover {
    transform: scale(1.02);
}

/* Result specific styling */
.afnm-korean-birth-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.afnm-korean-birth-result .res-roman {
    font-size: 28px;
    font-weight: 800;
    color: #4f46e5 !important;
    /* Màu xanh của bản gốc */
}

.afnm-korean-birth-result .res-hangul {
    font-size: 36px;
    font-weight: 800;
    color: #e11d48 !important;
    /* Màu cam của bản gốc */
}

.afnm-korean-birth-result .res-desc {
    font-size: 16px;
    color: var(--afnm-muted);
    margin: 5px 0;
}

.afnm-korean-birth-result .res-revised {
    font-size: 14px;
    color: var(--afnm-muted);
    font-style: italic;
    opacity: 0.8;
    margin: 0;
}

/* Instructions Style */
.afnm-instructions {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.afnm-instructions p {
    font-size: 15px;
    margin: 0 0 10px 0;
    color: var(--afnm-text);
}

.afnm-instructions strong {
    font-weight: 800 !important;
}

.afnm-instructions ul,
.afnm-instructions ol {
    margin: 0 !important;
    padding-left: 20px !important;
    list-style-position: outside !important;
}

.afnm-instructions ul li,
.afnm-instructions ol li {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--afnm-muted) !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

.afnm-instructions ul ul {
    margin-top: 5px;
    padding-left: 20px;
    list-style-type: circle;
}

.afnm-note {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--afnm-border);
}

.afnm-note p {
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--afnm-muted);
}