@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;500;600;700&display=swap");
html,body,button,input,textarea,select{font-family:"Noto Serif Thai",Georgia,serif}
/* ==========================================================
   Chakra Assessment
   /assets/css/chakra.css
   ========================================================== */

:root{
    --primary:#e87b2a;
    --primary-dark:#c96216;
    --navy:#16324f;
    --bg:#f7f7f4;
    --card:#ffffff;
    --text:#243447;
    --muted:#73808f;
    --border:#e5eaf0;
    --soft:#f3f6f8;
    --radius:22px;
    --shadow:0 16px 44px rgba(22,50,79,.08);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
}

.chakra-page{
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
}

.chakra-wrap{
    width:min(860px,94%);
    margin:auto;
}

/* ==========================================================
   Hero
   ========================================================== */

.chakra-hero{
    padding:72px 0 48px;
}

.chakra-kicker{
    margin:0 0 12px;
    color:var(--primary);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.chakra-hero h1{
    margin:0 0 22px;
    color:var(--navy);
    font-size:clamp(2.2rem,5vw,3.8rem);
    line-height:1.08;
}

.chakra-hero p{
    max-width:760px;
    margin:0;
    color:var(--text);
    font-size:1.08rem;
    line-height:1.9;
}

.chakra-note{
    margin-top:28px;
    padding:18px 22px;
    border-left:5px solid var(--primary);
    border-radius:16px;
    background:#fff8f1;
    color:var(--muted);
    line-height:1.75;
}

/* ==========================================================
   Buttons
   ========================================================== */

.chakra-primary,
.chakra-secondary,
.chakra-start-btn{
    min-height:46px;
    border:none;
    border-radius:999px;
    padding:13px 28px;
    cursor:pointer;
    font-size:1rem;
    font-weight:800;
    transition:.22s ease;
}

.chakra-primary,
.chakra-start-btn{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 24px rgba(232,123,42,.24);
}

.chakra-primary:hover,
.chakra-start-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-1px);
}

.chakra-secondary{
    background:#edf2f6;
    color:var(--navy);
}

.chakra-secondary:hover{
    background:#dfe7ee;
}

.chakra-secondary:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* ==========================================================
   Test layout
   ========================================================== */

.chakra-test{
    width:min(900px,96%);
    margin:0 auto;
    padding:22px 0 96px;
}

/* ==========================================================
   Progress
   ========================================================== */

.chakra-progress{
    position:sticky;
    top:0;
    z-index:20;
    padding:14px 0 18px;
    background:linear-gradient(to bottom,var(--bg) 75%,rgba(247,247,244,0));
}

.chakra-progress-bar{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#e6e9ec;
}

#chakraProgressFill{
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),#ffc46a);
    transition:width .35s ease;
}

#chakraProgressText{
    margin:10px 0 0;
    text-align:center;
    color:var(--muted);
    font-size:.9rem;
}

/* ==========================================================
   Step header
   ========================================================== */

.chakra-step{
    display:none;
}

.chakra-step.active{
    display:block;
}

.chakra-step-head{
    display:flex;
    align-items:center;
    gap:18px;
    width:min(820px,100%);
    margin:28px auto 30px;
    padding:20px 22px;
    border-radius:24px;
    background:#fff;
    box-shadow:var(--shadow);
}

.chakra-orb{
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:50%;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.5),
        0 10px 24px rgba(0,0,0,.16);
}

.chakra-step-label{
    margin:0 0 4px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:700;
}

.chakra-step h2{
    margin:0;
    color:var(--navy);
    font-size:1.65rem;
    line-height:1.15;
}

.chakra-step h2 span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:.92rem;
    font-style:italic;
    font-weight:500;
}

/* ==========================================================
   Blocks
   ========================================================== */

.chakra-block{
    width:min(820px,100%);
    margin:0 auto 26px;
    padding:30px;
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
}

.chakra-block h3{
    margin:0 0 8px;
    color:var(--navy);
    font-size:1.18rem;
}

.chakra-block-desc{
    margin:0 0 22px;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.7;
}

/* ==========================================================
   Questions
   ========================================================== */

.chakra-question{
    padding:22px 0;
    border-bottom:1px solid var(--border);
}

.chakra-question:last-child{
    border-bottom:none;
}

.chakra-question > p{
    margin:0 0 18px;
    color:var(--text);
    font-size:1rem;
    font-weight:700;
    line-height:1.75;
}

/* ==========================================================
   Scale circles
   ========================================================== */

.chakra-scale{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin:12px 0;
}

.chakra-scale input{
    display:none;
}

.chakra-scale label{
    width:50px;
    height:50px;
    border:2px solid #ccd6df;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:#fff;
    color:#697685;
    font-size:1.05rem;
    font-weight:800;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .16s ease;
}

.chakra-scale label:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-1px);
}

.chakra-scale label:has(input:checked){
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:0 10px 24px rgba(232,123,42,.34);
    transform:translateY(-2px);
}

.alignment-scale label:has(input:checked){
    background:var(--navy);
    border-color:var(--navy);
    box-shadow:0 10px 24px rgba(22,50,79,.28);
}

.chakra-scale label span{
    line-height:1;
}

/* ==========================================================
   Labels
   ========================================================== */

.chakra-scale-labels{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:6px;
    color:var(--muted);
    font-size:.82rem;
}

.alignment-poles{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin:0 0 14px;
}

.alignment-poles span{
    color:var(--muted);
    font-size:.88rem;
    line-height:1.65;
}

.alignment-poles span:last-child{
    text-align:right;
}

/* ==========================================================
   Navigation
   ========================================================== */

.chakra-nav{
    position:sticky;
    bottom:0;
    z-index:30;
    display:flex;
    justify-content:space-between;
    gap:14px;
    width:min(900px,96%);
    margin:34px auto 0;
    padding:16px 0 calc(16px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--bg) 78%,rgba(247,247,244,0));
}

/* ==========================================================
   Validation / Toast
   ========================================================== */

.chakra-unanswered{
    margin-left:-12px;
    padding-left:12px;
    border-left:4px solid #ef4444;
    background:linear-gradient(90deg,rgba(239,68,68,.06),transparent 60%);
}

.chakra-toast{
    position:fixed;
    left:50%;
    bottom:86px;
    z-index:9999;
    transform:translateX(-50%) translateY(14px);
    max-width:92vw;
    padding:12px 18px;
    border-radius:999px;
    background:var(--navy);
    color:#fff;
    font-size:.95rem;
    font-weight:700;
    opacity:0;
    pointer-events:none;
    transition:.24s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.chakra-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* ==========================================================
   Result
   ========================================================== */

.chakra-result{
    padding:72px 0 90px;
}

.chakra-result h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(2rem,4vw,3rem);
}

.chakra-result-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:22px;
    margin-top:34px;
}

.chakra-result-card,
.chakra-body-card{
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow);
}

.chakra-result-card{
    padding:24px;
}

.chakra-body-card{
    grid-column:1 / -1;
    padding:28px;
}

.chakra-body-card h3{
    margin:0 0 8px;
    color:var(--navy);
}

.chakra-body-card p{
    margin:0;
    color:var(--muted);
    line-height:1.75;
}

.chakra-body-viz{
    position:relative;
    width:min(340px,82vw);
    margin:28px auto 10px;
}

.chakra-body-viz img{
    display:block;
    width:100%;
    opacity:.9;
}

.chakra-axis{
    position:absolute;
    top:8%;
    bottom:8%;
    left:50%;
    width:1px;
    transform:translateX(-50%);
    background:rgba(22,50,79,.18);
}

.chakra-viz-dot{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.92);
    box-shadow:
        0 0 0 6px rgba(255,255,255,.45),
        0 8px 24px rgba(0,0,0,.18),
        0 0 28px currentColor;
    opacity:.92;
    animation:chakraPop .45s ease both;
    transition:
        width .35s ease,
        height .35s ease,
        transform .35s ease,
        opacity .35s ease;
}

@keyframes chakraPop{
    from{
        opacity:0;
        scale:.65;
    }
    to{
        opacity:.92;
        scale:1;
    }
}

.chakra-viz-legend{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:18px;
    color:var(--muted);
    font-size:.88rem;
}

.chakra-result-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.chakra-mini-orb{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:50%;
}

.chakra-result-head h3{
    margin:0;
    color:var(--navy);
    font-size:1.15rem;
}

.chakra-result-head p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:.88rem;
}

.chakra-score-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:14px 0 8px;
    color:var(--text);
}

.chakra-score-row strong{
    color:var(--navy);
}

.chakra-meter{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#edf1f4;
}

.chakra-meter span{
    display:block;
    height:100%;
    border-radius:999px;
}

.chakra-result-label{
    margin:8px 0 12px;
    color:var(--muted);
    font-size:.9rem;
}

.chakra-result-desc{
    margin:18px 0 0;
    color:var(--text);
    font-size:.95rem;
    line-height:1.75;
}

.chakra-result-actions{
    margin-top:42px;
    text-align:center;
}

/* ==========================================================
   Utility
   ========================================================== */

.hidden{
    display:none !important;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media(max-width:768px){

    .chakra-test{
        width:94%;
        padding-top:12px;
    }

    .chakra-step-head{
        padding:18px;
        gap:14px;
    }

    .chakra-orb{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .chakra-step h2{
        font-size:1.38rem;
    }

    .chakra-block{
        padding:22px 18px;
        border-radius:20px;
    }

    .chakra-question{
        padding:20px 0;
    }

    .chakra-question > p{
        font-size:.98rem;
    }

    .chakra-scale{
        gap:10px;
    }

    .chakra-scale label{
        width:46px;
        height:46px;
    }

    .alignment-poles{
        grid-template-columns:1fr;
        gap:8px;
    }

    .alignment-poles span,
    .alignment-poles span:last-child{
        text-align:left;
    }

    .chakra-nav{
        width:94%;
    }

    .chakra-nav button{
        flex:1;
    }
}

@media(max-width:420px){

    .chakra-scale{
        gap:8px;
    }

    .chakra-scale label{
        width:42px;
        height:42px;
        font-size:.95rem;
    }

    .chakra-primary,
    .chakra-secondary,
    .chakra-start-btn{
        padding-left:20px;
        padding-right:20px;
    }
}