/* Trang Hỏi đáp - Trường Tiểu học Hàm Thắng 2 */

.qa-page {
    --qa-blue: #123f93;
    --qa-blue-dark: #08275f;
    --qa-blue-light: #eaf3ff;
    --qa-sky: #39a8ed;
    --qa-yellow: #ffc928;
    --qa-green: #23a96e;
    --qa-text: #1b2c4d;
    --qa-muted: #65728b;
    position: relative;
    overflow: hidden;
    color: var(--qa-text);
    background: #f7faff;
    font-family: 'Montserrat-Medium', Arial, sans-serif;
}

    .qa-page *,
    .qa-page *::before,
    .qa-page *::after {
        box-sizing: border-box;
    }

.htk-header {
    margin: 0 !important;
}

.qa-container {
    position: relative;
    z-index: 2;
}

/* Hero và biểu mẫu */

.qa-hero {
    position: relative;
    isolation: isolate;
    padding: 76px 0 84px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 12%, rgba(255, 255, 255, .20) 0 2px, transparent 3px) 0 0 / 34px 34px, linear-gradient(125deg, #e9f5ff 0%, #f8fbff 46%, #eef8f5 100%);
}

    .qa-hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 760px;
        height: 760px;
        top: -390px;
        left: -290px;
        border-radius: 50%;
        background: linear-gradient(145deg, rgba(32, 123, 221, .21), rgba(68, 183, 238, .05));
    }

    .qa-hero::after {
        content: "?";
        position: absolute;
        z-index: -1;
        right: 3%;
        bottom: -130px;
        color: rgba(18, 63, 147, .045);
        font-family: 'Montserrat-ExtraBold', Arial, sans-serif;
        font-size: 480px;
        line-height: 1;
        transform: rotate(9deg);
    }

.qa-shape {
    position: absolute;
    z-index: -1;
    display: block;
    pointer-events: none;
}

.qa-shape--one {
    top: 58px;
    right: 6%;
    width: 64px;
    height: 64px;
    border: 13px solid rgba(255, 201, 40, .50);
    border-radius: 20px;
    transform: rotate(18deg);
    animation: qaFloat 6s ease-in-out infinite;
}

.qa-shape--two {
    left: 43%;
    bottom: 45px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(35, 169, 110, .25);
    box-shadow: 34px -25px 0 -7px rgba(57, 168, 237, .28);
    animation: qaFloat 5s 1s ease-in-out infinite reverse;
}

.qa-hero-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(590px, 1.14fr);
    gap: 15px;
    align-items: center;
}

.qa-intro {
    position: relative;
    padding: 12px 0;
}

.qa-eyebrow,
.qa-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--qa-blue);
    font: 16px/1.3 'Montserrat-Bold', Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qa-eyebrow {
    padding: 10px 15px;
    border: 1px solid rgba(18, 63, 147, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px rgba(18, 63, 147, .08);
}

    .qa-eyebrow i,
    .qa-section-kicker i {
        color: #eb247e;
        font-size: 19px;
        position: relative;
        top: -2px;
    }

.qa-title {
    margin: 24px 0 0;
    color: var(--qa-blue-dark);
    font: 37px/1.17 'Montserrat-ExtraBold', Arial, sans-serif;
    letter-spacing: -.035em;
    text-transform: none;
}

    .qa-title span {
        position: relative;
        color: var(--qa-blue);
    }

        .qa-title span::after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 10px;
            border-radius: 10px;
            background: rgba(255, 201, 40, .45);
            transform: rotate(-1deg);
        }

.qa-desc {
    max-width: 600px;
    margin: 22px 0 0;
    color: #52627f;
    font-size: 15px;
    line-height: 1.9;
    text-align: justify;
}

.qa-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 29px;
}

.qa-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(18, 63, 147, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .73);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .qa-feature-item:hover {
        transform: translateY(-4px);
        border-color: rgba(18, 63, 147, .18);
        box-shadow: 0 14px 30px rgba(28, 73, 139, .10);
    }

    .qa-feature-item > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(145deg, var(--qa-blue), #287bd4);
        box-shadow: 0 8px 16px rgba(18, 63, 147, .20);
    }

    .qa-feature-item:nth-child(2) > span {
        background: linear-gradient(145deg, #168f59, #37bf83);
        box-shadow: 0 8px 16px rgba(35, 169, 110, .20);
    }

    .qa-feature-item strong,
    .qa-feature-item small {
        display: block;
    }

    .qa-feature-item strong {
        margin-bottom: 3px;
        color: var(--qa-blue-dark);
        font: 15px/1.35 'Montserrat-Bold', Arial, sans-serif;
    }

    .qa-feature-item small {
        color: var(--qa-muted);
        font-size: 13px;
        line-height: 1.5;
    }

.qa-form-card {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(20, 69, 138, .10);
    border-radius: 30px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 28px 70px rgba(21, 64, 124, .16), 0 3px 10px rgba(21, 64, 124, .05);
}

    .qa-form-card::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 44px;
        right: 44px;
        height: 7px;
        border-radius: 10px 10px 0 0;
        background: linear-gradient(90deg, var(--qa-blue), var(--qa-sky), var(--qa-green), var(--qa-yellow));
    }

.qa-form-heading {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px dashed #dbe5f2;
}

.qa-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 17px;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(145deg, var(--qa-blue), #2a76d1);
    box-shadow: 0 10px 22px rgba(18, 63, 147, .22);
}

.qa-form-step {
    display: block;
    margin-bottom: 5px;
    color: #eb247e;
    font: 13px/1.4 'Montserrat-Bold', Arial, sans-serif;
    letter-spacing: .1em;
}

.qa-form-heading h2 {
    margin: 0;
    color: var(--qa-blue-dark);
    font: 23px/1.35 'Montserrat-ExtraBold', Arial, sans-serif;
}

.qa-form-heading p {
    margin: 5px 0 0;
    color: var(--qa-muted);
    font-size: 15px;
    line-height: 1.55;
}

.qa-form-heading b,
.qa-field label b {
    color: #e74949;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 15px;
}

.qa-field--full {
    grid-column: 1 / -1;
}

.qa-field label {
    display: block;
    margin: 0 0 8px 2px;
    color: #263b5e;
    font: 14px/1.4 'Montserrat-Bold', Arial, sans-serif;
}

    .qa-field label span {
        color: #8490a5;
        font-family: 'Montserrat-Medium', Arial, sans-serif;
        font-weight: normal;
    }

.qa-control {
    position: relative;
}

    .qa-control > i:first-child {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 16px;
        color: #7c8ca7;
        font-size: 14px;
        transform: translateY(-50%);
        transition: color .25s ease, transform .25s ease;
        pointer-events: none;
    }

    .qa-control input,
    .qa-control select,
    .qa-control textarea {
        display: block;
        width: 100%;
        border: 1px solid #dce5f0;
        border-radius: 13px;
        outline: none;
        color: var(--qa-text);
        background: #f9fbfe;
        font: 14px 'Montserrat-Medium', Arial, sans-serif;
        transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .qa-control input,
    .qa-control select {
        height: 48px;
        padding: 0 39px 0 43px;
    }

    .qa-control textarea {
        min-height: 108px;
        padding: 15px 16px 15px 43px;
        line-height: 1.65;
        resize: vertical;
    }

.qa-control--textarea > i:first-child {
    top: 18px;
    transform: none;
}

.qa-control input::placeholder,
.qa-control textarea::placeholder {
    color: #9aa6b8;
    opacity: 1;
}

.qa-control select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.qa-select-arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    color: #7c8ca7;
    font-size: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

.qa-control:focus-within > i:first-child {
    color: var(--qa-blue);
    transform: translateY(-50%) scale(1.08);
}

.qa-control--textarea:focus-within > i:first-child {
    transform: scale(1.08);
}

.qa-control input:hover,
.qa-control select:hover,
.qa-control textarea:hover {
    border-color: #b9cbe1;
    background: #fff;
}

.qa-control input:focus,
.qa-control select:focus,
.qa-control textarea:focus {
    border-color: #4f8ed2;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(39, 111, 190, .10);
}
.qa-control input::placeholder,
.qa-control select::placeholder,
.qa-control textarea::placeholder {
  font-size:14px;
}
.qa-form-action {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.qa-captcha {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    flex: 1 1 auto;
}

.qa-captcha-code {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 48px;
    border: 1px dashed rgba(18, 63, 147, .35);
    border-radius: 13px;
    color: var(--qa-blue);
    background: repeating-linear-gradient(-45deg, #edf5ff, #edf5ff 7px, #f8fbff 7px, #f8fbff 14px);
    font: 20px/1 'Montserrat-ExtraBold', Arial, sans-serif;
    letter-spacing: .16em;
    user-select: none;
}

    .qa-captcha-code::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: 50%;
        height: 1px;
        background: rgba(35, 169, 110, .35);
        transform: rotate(-8deg);
    }

.qa-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 171px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--qa-blue) 0%, #1b6ac2 100%);
    box-shadow: 0 10px 22px rgba(18, 63, 147, .22);
    font: 15px/1.2 'Montserrat-Bold', Arial, sans-serif;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

    .qa-submit i {
        transition: transform .25s ease;
    }

    .qa-submit:hover,
    .qa-submit:focus {
        color: #fff;
        filter: brightness(1.08);
        transform: translateY(-3px);
        box-shadow: 0 15px 28px rgba(18, 63, 147, .28);
    }

        .qa-submit:hover i {
            transform: translateX(4px);
        }

.qa-privacy {
    margin: 9px 0 0;
    color: #7a879b;
    font-size: 13px;
    line-height: 1.5;
}

    .qa-privacy i {
        margin-right: 4px;
        color: #eb247e;
    }

/* Danh sach */

.qa-list-section {
    position: relative;
    padding: 45px 0 37px;
    background: linear-gradient(rgba(18, 63, 147, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 63, 147, .025) 1px, transparent 1px), #f8faff;
    background-size: 32px 32px;
}

.qa-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr);
    gap: 50px;
    align-items: end;
    margin-bottom: 38px;
}

.qa-section-kicker {
    margin-bottom: 10px;
    color: #eb247e;
}

.qa-section-heading h2 {
    max-width: 720px;
    margin: 0;
    color: var(--qa-blue-dark);
    font: 28px/1.28 'Montserrat-ExtraBold', Arial, sans-serif;
    letter-spacing: -.025em;
}

.qa-section-heading > p {
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid var(--qa-yellow);
    color: var(--qa-muted);
    font-size: 15px;
    line-height: 1.75;
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.qa-item {
    position: relative;
    padding: 29px;
    overflow: hidden;
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(29, 61, 111, .065);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

    .qa-item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--qa-blue), var(--qa-sky), var(--qa-green));
        transform: scaleY(.36);
        border-radius: 0 5px 5px 0;
        transition: transform .32s ease;
    }

    .qa-item:hover {
        transform: translateY(-5px);
        border-color: #cfdeef;
        box-shadow: 0 22px 48px rgba(29, 61, 111, .12);
    }

        .qa-item:hover::before {
            transform: scaleY(1);
        }

.qa-question {
    display: flex;
    gap: 18px;
}

.qa-avatar,
.qa-answer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 17px;
}

.qa-avatar {
    width: 54px;
    height: 54px;
    color: var(--qa-blue);
    font-size: 21px;
    background: var(--qa-blue-light);
    transition: color .3s ease, background .3s ease, transform .3s ease;
}

.qa-item:hover .qa-avatar {
    color: #fff;
    background: var(--qa-blue);
    transform: rotate(-7deg);
}

.qa-question-content,
.qa-answer-content {
    min-width: 0;
    flex: 1 1 auto;
}

.qa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 9px;
}

    .qa-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 10px;
        border-radius: 999px;
        color: #526b91;
        background: #f1f5fa;
        font: 12px/1.3 'Montserrat-SemiBold', Arial, sans-serif;
    }

        .qa-meta span:first-child {
            color: #168657;
            background: #eaf8f1;
        }

.qa-question-content h3 {
    margin: 0;
    color: var(--qa-blue-dark);
    font: 19px/1.5 'Montserrat-Bold', Arial, sans-serif;
}

.qa-question-content > p,
.qa-answer-content > p {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.qa-question-content > p {
    margin: 9px 0 0;
    color: #596983;
    font-size: 16px;
    line-height: 1.4;
}

.qa-answer {
    position: relative;
    display: flex;
    gap: 15px;
    margin: 22px 0 0 72px;
    padding: 21px;
    border: 1px solid #dcebe5;
    border-radius: 18px;
    background: linear-gradient(135deg, #f0faf6 0%, #f7fbff 100%);
}

    .qa-answer::before {
        content: "";
        position: absolute;
        top: -9px;
        left: 26px;
        width: 17px;
        height: 17px;
        border-top: 1px solid #dcebe5;
        border-left: 1px solid #dcebe5;
        background: #f1faf7;
        transform: rotate(45deg);
    }

.qa-answer-icon {
    width: 45px;
    height: 45px;
    color: #fff;
    background: linear-gradient(145deg, #128453, #2db879);
    box-shadow: 0 8px 18px rgba(35, 169, 110, .18);
}

.qa-answer-label {
    display: block;
    margin: 0 0 3px;
    color: var(--qa-green);
    font: 12px/1.4 'Montserrat-Bold', Arial, sans-serif;
    letter-spacing: .08em;
}

.qa-answer-content h4 {
    margin: 0;
    color: #126a47;
    font: 18px/1.5 'Montserrat-Bold', Arial, sans-serif;
}

.qa-answer-content > p {
    margin: 7px 0 0;
    color: #53697a;
    font-size: 15px;
    line-height: 1.85;
}

.qa-empty {
    padding: 50px 24px;
    border: 1px dashed #cbd9eb;
    border-radius: 24px;
    text-align: center;
    background: #fff;
}

    .qa-empty > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        margin: 0 auto 17px;
        border-radius: 22px;
        color: var(--qa-blue);
        background: var(--qa-blue-light);
        font-size: 27px;
    }

    .qa-empty h3 {
        margin: 0;
        color: var(--qa-blue-dark);
        font: 18px/1.5 'Montserrat-Bold', Arial, sans-serif;
    }

    .qa-empty p {
        max-width: 620px;
        margin: 8px auto 0;
        color: var(--qa-muted);
        font-size: 13px;
        line-height: 1.75;
    }

@keyframes qaFloat {
    0%, 100% {
        transform: translateY(0) rotate(18deg);
    }

    50% {
        transform: translateY(-13px) rotate(24deg);
    }
}

@media (max-width: 1199px) {
    .qa-hero-wrap {
        grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
        gap: 34px;
    }

    .qa-title {
        font-size: 38px;
    }

    .qa-feature-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .qa-hero {
        padding: 54px 0 64px;
    }

    .qa-hero-wrap {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .qa-intro {
        text-align: center;
    }

    .qa-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .qa-feature-list {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    .qa-form-card {
        max-width: 760px;
        margin: 0 auto;
    }

    .qa-section-heading {
        grid-template-columns: 1fr;
        gap: 15px;
    }

        .qa-section-heading > p {
            max-width: 680px;
        }
}

@media (max-width: 767px) {
    .qa-hero {
        padding: 7px 0 21px;
    }

    .qa-shape {
        display: none;
    }

    .qa-eyebrow {
        padding: 8px 12px;
        font-size: 11px;
    }

    .qa-title {
        margin-top: 18px;
        font-size: 21px;
        line-height: 1.3;
        position: relative;
    }

        .qa-title br {
            display: none;
        }

        .qa-title span {
            display: inline-block;
            position: unset;
        }

    .qa-desc {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.75;
        text-align: justify;
    }

    .qa-feature-list {
        grid-template-columns: 1fr;
        margin-top: 21px;
    }

    .qa-feature-item {
        padding: 12px;
    }

        .qa-feature-item > span {
            width: 40px;
            height: 40px;
            flex-basis: 40px;
        }

    .qa-form-card {
        padding: 22px 16px;
        border-radius: 22px;
    }

        .qa-form-card::before {
            left: 28px;
            right: 28px;
        }

    .qa-form-heading {
        gap: 12px;
        padding-bottom: 17px;
        margin-bottom: 18px;
    }

    .qa-form-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 14px;
    }

    .qa-form-heading h2 {
        font-size: 18px;
    }

    .qa-form-heading p {
        font-size: 11px;
    }

    .qa-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .qa-field--full {
        grid-column: auto;
    }

    .qa-form-action {
        flex-direction: column;
    }

    .qa-captcha {
        width: 100%;
    }

    .qa-submit {
        width: 100%;
    }

    .qa-list-section {
        padding: 13px 0 13px;
    }

    .qa-section-heading {
        margin-bottom: 24px;
    }

        .qa-section-heading h2 {
            font-size: 18px;
            line-height: 1.4;
        }

        .qa-section-heading > p {
            padding-left: 13px;
            font-size: 12px;
        }

    .qa-item {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .qa-question {
        gap: 12px;
    }

    .qa-avatar {
        width: 43px;
        height: 43px;
        border-radius: 14px;
        font-size: 17px;
    }

    .qa-question-content h3 {
        font-size: 16px;
    }

    .qa-question-content > p {
        font-size: 14px;
        text-align: justify;
    }

    .qa-answer {
        margin: 18px 0 0;
        padding: 16px;
        gap: 11px;
    }

    .qa-answer-icon {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .qa-answer-content > p {
        font-size: 14px;
        text-align: justify;
        line-height: 1.4;
    }
}

@media (max-width: 420px) {
    .qa-form-heading {
        align-items: center;
    }

    .qa-form-step {
        display: none;
    }
.qa-control input, .qa-control select, .qa-control textarea{
    font-size:16px;
}
    .qa-captcha {
        grid-template-columns: 91px minmax(0, 1fr);
    }
.qa-control select{
    font-size:14px;
}
    .qa-captcha-code {
        font-size: 17px;
    }

    .qa-question {
        flex-direction: column;
    }

    .qa-answer {
        flex-direction: column;
    }

        .qa-answer::before {
            left: 20px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .qa-page *,
    .qa-page *::before,
    .qa-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}