/* ============================================================================
   WebTK Autism Screener — Frontend design system
   Áp dụng chung cho mọi màn hình công khai: form làm bài, chọn công cụ, tra
   cứu kết quả, báo cáo, khóa tính năng. Token dùng chung khai báo lặp lại trên
   từng lớp bọc ngoài (thay vì :root) để không rò rỉ ra phần còn lại của theme.
   ========================================================================= */

.wtk-as-test-form-wrap,
.wtk-as-quickpick,
.wtk-as-center,
.wtk-as-locked-frontend{
    --wtk-accent: #1F6FB2;
    --wtk-accent-dark: #154C7A;
    --wtk-accent-tint: #E9F2FA;
    --wtk-ink: #16212B;
    --wtk-muted: #57697A;
    --wtk-muted-2: #8697A6;
    --wtk-line: #E3E9EE;
    --wtk-card: #F7F9FB;
    --wtk-paper: #FFFFFF;
    --wtk-radius-lg: 16px;
    --wtk-radius: 10px;
    --wtk-shadow: 0 1px 2px rgba(20,40,60,.05), 0 8px 24px rgba(20,40,60,.07);
    --wtk-risk-low: #2E7D4F;
    --wtk-risk-low-bg: #E9F5EE;
    --wtk-risk-med: #9C6B14;
    --wtk-risk-med-bg: #FBF2E2;
    --wtk-risk-high: #A3402F;
    --wtk-risk-high-bg: #FBEBE7;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--wtk-ink);
    line-height: 1.6;
}
.wtk-as-test-form-wrap *, .wtk-as-quickpick *, .wtk-as-center *, .wtk-as-locked-frontend *{
    box-sizing: border-box;
}

/* Reset chuẩn cho input/select/button — chống theme ngoài (VD Flatsome) ghi đè
   khiến ô nhập và nút bấm lệch chiều cao/kiểu chữ với nhau. */
.wtk-as-test-form-wrap input, .wtk-as-test-form-wrap select, .wtk-as-test-form-wrap button,
.wtk-as-quickpick input, .wtk-as-quickpick select, .wtk-as-quickpick button,
.wtk-as-center input, .wtk-as-center select, .wtk-as-center button{
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    margin: 0;
}

/* ---------- Nút bấm dùng chung ---------- */
.wtk-as-submit-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem;
    height: 48px !important;
    padding: 0 1.4rem !important;
    background: var(--wtk-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--wtk-radius) !important;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s ease, transform .1s ease;
}
.wtk-as-submit-btn:hover{ background: var(--wtk-accent-dark) !important; }
.wtk-as-submit-btn:active{ transform: translateY(1px); }
.wtk-as-btn-icon{ flex: none; color: #fff; }

/* ============================================================================
   1) Form làm bài — [wtk_autism_test id="X"]
   ========================================================================= */
.wtk-as-test-form-wrap{
    max-width: 720px;
    margin: 0 auto;
    background: var(--wtk-paper);
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius-lg);
    box-shadow: var(--wtk-shadow);
    padding: 1.8rem 1.8rem 2.2rem;
}
@media (max-width: 480px){
    .wtk-as-test-form-wrap{ padding: 1.3rem 1.1rem 1.7rem; border-radius: 14px; }
}
.wtk-as-test-title{ font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; }
.wtk-as-test-desc{ color: var(--wtk-muted); margin: 0 0 1.4rem; font-size: .95rem; }

.wtk-as-field-row{ margin-bottom: 1rem; }
.wtk-as-field-row label{ display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.wtk-as-field-row input, .wtk-as-field-row select{
    width: 100%;
    height: 46px;
    padding: 0 .9rem;
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius);
    background: var(--wtk-paper);
    color: var(--wtk-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wtk-as-field-row input:focus, .wtk-as-field-row select:focus{
    outline: none;
    border-color: var(--wtk-accent);
    box-shadow: 0 0 0 3px var(--wtk-accent-tint);
}
.wtk-as-field-row select{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2357697A' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.2rem;
}

.wtk-as-questions{ margin: 1.6rem 0 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.wtk-as-question{
    padding: 1rem 1.1rem;
    background: var(--wtk-card);
    border: 1px solid var(--wtk-line);
    border-left: 3px solid var(--wtk-muted-2);
    border-radius: var(--wtk-radius);
}
.wtk-as-question[data-skill="giao_tiep"]{ border-left-color: #1F6FB2; }
.wtk-as-question[data-skill="tuong_tac_xa_hoi"]{ border-left-color: #7C57D6; }
.wtk-as-question[data-skill="hanh_vi_rap_khuon"]{ border-left-color: #C4841A; }

.wtk-as-question-text{ font-weight: 600; font-size: .95rem; margin: 0 0 .7rem; }
.wtk-as-critical-flag{ margin-left: .3rem; }

.wtk-as-question label{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    margin-right: .5rem;
    border: 1.5px solid var(--wtk-line);
    border-radius: 999px;
    background: var(--wtk-paper);
    color: var(--wtk-muted);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wtk-as-question label:hover{ border-color: var(--wtk-accent); }
.wtk-as-question input[type="radio"]{
    width: 16px; height: 16px;
    accent-color: var(--wtk-accent);
    cursor: pointer;
}
.wtk-as-question label:has(input:checked){
    border-color: var(--wtk-accent);
    background: var(--wtk-accent-tint);
    color: var(--wtk-ink);
    font-weight: 600;
}

.wtk-as-result-box{
    margin-top: 1.4rem;
    padding: 1.2rem 1.3rem;
    border-radius: var(--wtk-radius);
    background: var(--wtk-risk-low-bg);
    border: 1px solid #C3E5CB;
}

/* ============================================================================
   2) Khóa tính năng — license chưa hợp lệ
   ========================================================================= */
.wtk-as-locked-frontend{
    max-width: 640px;
    margin: 0 auto;
    padding: 1.4rem 1.5rem;
    background: var(--wtk-card);
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius-lg);
    text-align: center;
    color: var(--wtk-muted);
}
.wtk-as-locked-frontend p{ margin: 0; }

/* ============================================================================
   3) Dropdown chọn bộ test — [wtk_autism_test] không kèm id
   ========================================================================= */
.wtk-as-quickpick{
    max-width: 720px;
    margin: 0 auto;
    background: var(--wtk-paper);
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius-lg);
    box-shadow: var(--wtk-shadow);
    padding: 1.8rem;
}
.wtk-as-quickpick-label{ display: block; font-weight: 700; margin-bottom: .8rem; }
.wtk-as-quickpick-row{
    display: flex !important;
    align-items: stretch !important;
    gap: .7rem;
    box-sizing: border-box;
}
.wtk-as-quickpick-row select{
    flex: 1 1 260px;
    height: 48px !important;
    padding: 0 2.2rem 0 .9rem !important;
    border: 1px solid var(--wtk-line) !important;
    border-radius: var(--wtk-radius) !important;
    background-color: var(--wtk-paper);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2357697A' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    box-sizing: border-box !important;
}
.wtk-as-quickpick-row select:focus{
    outline: none;
    border-color: var(--wtk-accent) !important;
    box-shadow: 0 0 0 3px var(--wtk-accent-tint);
}
.wtk-as-quickpick-row .wtk-as-submit-btn{ flex: 0 0 auto; }

@media (max-width: 600px){
    .wtk-as-quickpick-row{ flex-direction: column !important; align-items: stretch !important; }
    .wtk-as-quickpick-row .wtk-as-submit-btn{ width: 100%; flex: 1 1 auto; }
}
.wtk-as-quickpick-desc-list{ margin: 1.3rem 0 0; padding-left: 1.2rem; color: var(--wtk-muted); font-size: .88rem; }
.wtk-as-quickpick-desc-list li{ margin-bottom: .4rem; }

/* ============================================================================
   4) Trung tâm đánh giá — [wtk_autism_center] (chọn công cụ + tra cứu)
   Cố tình KHÔNG bọc khung/viền ở mức .wtk-as-center để khi nhúng trong trang
   landing page tự động tạo (đã có khung .wtk-as-embed-frame riêng) không bị
   lồng 2 lớp khung chồng nhau.
   ========================================================================= */
.wtk-as-center{ max-width: 860px; margin: 0 auto; }

.wtk-as-disclaimer{
    display: flex;
    gap: .6rem;
    background: #FFF8E9;
    border: 1px solid #F0DCA0;
    border-radius: var(--wtk-radius);
    padding: .9rem 1.1rem;
    margin-bottom: 1.6rem;
}
.wtk-as-disclaimer p{ margin: 0; color: #6B5300; font-size: .88rem; }

.wtk-as-tool-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.wtk-as-tool-card{
    display: flex;
    flex-direction: column;
    background: var(--wtk-paper);
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius-lg);
    padding: 1.3rem;
    box-shadow: var(--wtk-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wtk-as-tool-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(20,40,60,.06), 0 14px 30px rgba(20,40,60,.11);
}
.wtk-as-tool-card h3{ margin: 0 0 .4rem; font-size: 1.05rem; }
.wtk-as-tool-desc{ color: var(--wtk-muted); font-size: .88rem; margin: 0 0 .8rem; flex-grow: 1; }
.wtk-as-tool-age{
    display: inline-block;
    align-self: flex-start;
    color: var(--wtk-accent-dark);
    background: var(--wtk-accent-tint);
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    margin: 0 0 1rem;
}
.wtk-as-tool-start{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    text-align: center;
    background: var(--wtk-accent);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--wtk-radius);
    font-weight: 600;
    font-size: .92rem;
    transition: background .15s ease;
}
.wtk-as-tool-start:hover{ background: var(--wtk-accent-dark); }

.wtk-as-empty{ color: var(--wtk-muted); text-align: center; padding: 2rem 0; }

.wtk-as-lookup-cta{ text-align: center; margin-top: .4rem; }
.wtk-as-lookup-cta a{ color: var(--wtk-accent); font-weight: 600; text-decoration: none; }
.wtk-as-lookup-cta a:hover{ text-decoration: underline; }

.wtk-as-back-link{ margin-bottom: 1.2rem; }
.wtk-as-back-link a{ color: var(--wtk-muted); text-decoration: none; font-size: .92rem; }
.wtk-as-back-link a:hover{ color: var(--wtk-accent); }

/* ---------- Tra cứu kết quả ---------- */
.wtk-as-lookup h3{ margin: 0 0 .4rem; font-size: 1.25rem; }
.wtk-as-lookup-hint{ color: var(--wtk-muted); font-size: .9rem; margin: 0 0 1.1rem; }
/* Khung tra cứu: ép flexbox + box-sizing bằng !important — đây là khu vực từng bị theme
   ngoài (Flatsome) ghi đè làm nút và ô nhập lệch trục dọc với nhau. */
.wtk-as-lookup-form{
    display: flex !important;
    align-items: stretch !important;
    gap: .7rem;
    margin-bottom: 1.4rem;
    box-sizing: border-box;
}
.wtk-as-lookup-input{
    flex: 1 1 240px;
    height: 48px !important;
    padding: 0 1rem !important;
    border: 1px solid var(--wtk-line) !important;
    border-radius: var(--wtk-radius) !important;
    font-size: 1rem;
    text-transform: uppercase !important;
    letter-spacing: 2px;
    box-shadow: inset 0 1px 2px rgba(20,40,60,.05);
    box-sizing: border-box !important;
}
.wtk-as-lookup-input:focus{
    outline: none;
    border-color: var(--wtk-accent) !important;
    box-shadow: 0 0 0 3px var(--wtk-accent-tint);
}
.wtk-as-lookup-form .wtk-as-submit-btn{ flex: 0 0 auto; }

@media (max-width: 600px){
    .wtk-as-lookup-form{ flex-direction: column !important; align-items: stretch !important; }
    .wtk-as-lookup-form .wtk-as-submit-btn{ width: 100%; flex: 1 1 auto; }
}
.wtk-as-lookup-result{ max-width: 720px; }
.wtk-as-lookup-result:not(:empty){
    background: var(--wtk-paper);
    border: 1px solid var(--wtk-line);
    border-radius: var(--wtk-radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--wtk-shadow);
}

/* ============================================================================
   5) Báo cáo kết quả chi tiết
   ========================================================================= */
.wtk-as-report{ padding: .2rem 0; }
.wtk-as-lookup-code-box{
    background: var(--wtk-accent-tint);
    border: 1px dashed var(--wtk-accent);
    border-radius: var(--wtk-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.3rem;
    text-align: center;
}
.wtk-as-lookup-code-label{ margin: 0 0 .4rem; font-size: .82rem; color: var(--wtk-ink); }
.wtk-as-lookup-code-value{
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--wtk-accent-dark);
}
.wtk-as-report-head{ display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.wtk-as-report-head h3{ margin: 0; font-size: 1.2rem; }
.wtk-as-report-meta{ width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; }
.wtk-as-report-meta th, .wtk-as-report-meta td{ text-align: left; padding: .4rem .5rem .4rem 0; font-size: .9rem; border-bottom: 1px solid var(--wtk-line); }
.wtk-as-report-meta tr:last-child th, .wtk-as-report-meta tr:last-child td{ border-bottom: none; }
.wtk-as-report-meta th{ color: var(--wtk-muted); font-weight: 600; width: 40%; }
.wtk-as-report-subhead{ margin: 1rem 0 .6rem; font-size: .95rem; font-weight: 700; }

.wtk-as-skill-bars{ list-style: none; margin: 0 0 1.2rem; padding: 0; }
.wtk-as-skill-bars li{ display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.wtk-as-skill-name{ flex: 0 0 150px; font-size: .85rem; color: var(--wtk-muted); }
.wtk-as-skill-bar{ flex: 1; height: 8px; background: var(--wtk-line); border-radius: 99px; overflow: hidden; }
.wtk-as-skill-bar span{ display: block; height: 100%; background: var(--wtk-accent); border-radius: 99px; }
.wtk-as-skill-value{ flex: 0 0 30px; text-align: right; font-size: .85rem; color: var(--wtk-muted); font-variant-numeric: tabular-nums; }

.wtk-as-advice{ border-radius: var(--wtk-radius); padding: 1rem 1.1rem; margin: .8rem 0; }
.wtk-as-advice p{ margin: 0; font-size: .9rem; }
.wtk-as-advice-thap{ background: var(--wtk-risk-low-bg); border: 1px solid #C3E5CB; color: #1E4620; }
.wtk-as-advice-trung_binh{ background: var(--wtk-risk-med-bg); border: 1px solid #F0DCA0; color: #6B5300; }
.wtk-as-advice-cao{ background: var(--wtk-risk-high-bg); border: 1px solid #F5C6CB; color: #8A1F24; }

.wtk-as-disclaimer-inline{ font-size: .78rem; color: var(--wtk-muted-2); margin-top: .8rem; }

.wtk-as-badge{ display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600; padding: .25rem .75rem; border-radius: 999px; }
.wtk-as-badge-thap{ background: var(--wtk-risk-low-bg); color: var(--wtk-risk-low); }
.wtk-as-badge-trung_binh{ background: var(--wtk-risk-med-bg); color: var(--wtk-risk-med); }
.wtk-as-badge-cao{ background: var(--wtk-risk-high-bg); color: var(--wtk-risk-high); }

/* ---------- Responsive ---------- */

/* Trang chọn công cụ (thẻ M-CHAT-R, CARS...) trên tablet/mobile — thẻ trước đây bị bóp
   2 cột chật hẹp ở khoảng 480–768px, chữ mô tả/cảnh báo quá nhỏ, nút chưa dễ chạm. */
@media (max-width: 768px){
    .wtk-as-center{
        width: 100%;
        padding-left: .6rem !important;
        padding-right: .6rem !important;
        box-sizing: border-box;
    }
    .wtk-as-tool-grid{
        grid-template-columns: 1fr !important; /* luôn 1 cột full chiều ngang, không còn bị bóp 2 cột chật */
        gap: .9rem;
    }
    .wtk-as-tool-card{
        width: 100%;
        padding: 1.2rem 1rem !important;
        box-sizing: border-box;
    }
    .wtk-as-tool-card h3{
        font-size: 1.2rem !important; /* ~19px, thay vì 1.05rem mặc định */
        line-height: 1.4 !important;
        margin-bottom: .5rem !important;
    }
    .wtk-as-tool-desc{
        font-size: .95rem !important; /* ~15px */
        line-height: 1.6 !important;
    }
    .wtk-as-disclaimer{ padding: .9rem 1rem !important; }
    .wtk-as-disclaimer p{
        font-size: .95rem !important;
        line-height: 1.6 !important;
    }
    .wtk-as-tool-start{
        width: 100% !important;
        display: flex !important;
        height: auto !important;
        padding: .9rem 1.2rem !important;
        font-size: 1rem !important;
        box-sizing: border-box;
    }
}

@media (max-width: 480px){
    .wtk-as-quickpick, .wtk-as-locked-frontend{ padding: 1.3rem; }
    .wtk-as-lookup-result:not(:empty){ padding: 1.1rem 1.1rem; }
    .wtk-as-report-head{ flex-direction: column; align-items: flex-start; }
}