﻿.support-card { max-width: 760px; }

/* Zalo SDK dat widget consent position: fixed nhung khong dat z-index.
   Giu widget tren noi dung website, dong thoi van nam duoi modal QR cua SDK. */
.zalo-consent-widget { z-index: 2147483644 !important; }

.support-entry { max-width: 540px; margin: 0 auto; text-align: center; color: #34495d; line-height: 1.7; }
.support-entry .support-entry-intro {
    margin: 0 0 22px;
    padding: 18px 16px;
    background: #f3f8ff;
    border: 1px solid #d9e7f8;
    border-radius: 10px;
    font-size: 16px;
}
.support-entry-intro strong { color: #095ba8; font-weight: 700; }
.support-card strong.support-emphasis { color: #b42318; font-weight: 700; }
.support-entry .support-zalo-action { min-height: 54px; gap: 12px; font-size: 17px; font-weight: 700; }
.support-zalo-action .fa-arrow-right { font-size: 14px; }
.support-entry-phone { margin-top: 26px; padding-top: 20px; border-top: 1px solid #dce5ef; font-size: 14px; }
.support-entry-phone > span { display: block; }
.support-entry-phone a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 8px 18px;
    border: 1px solid #f0cbc7;
    border-radius: 8px;
    background: #fff5f4;
    color: #b42318;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}
.support-entry-phone a:hover { background: #ffe9e6; color: #8e1c13; text-decoration: underline; }
.support-entry-phone a:focus-visible { outline: 2px solid #b42318; outline-offset: 3px; }
.support-entry-phone .fa-phone { font-size: 17px; }

.support-guidance {
    margin-bottom: 20px;
    padding: 15px 18px;
    color: #34495d;
    background: #f4f9fd;
    border: 1px solid #cfe1f0;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.55;
}

.support-guidance strong { color: #15568f; }
.support-guidance ul { margin: 7px 0 0 19px; padding: 0; }
.support-guidance li { margin: 3px 0; }

.cand-field textarea {
    width: 100%;
    min-height: 130px;
    padding: 10px 12px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #c6d4e1;
    border-radius: 7px;
    background: #fff;
    color: #22303c;
    font: 15px/1.5 "Segoe UI", Arial, sans-serif;
}

.cand-field textarea:focus {
    border-color: #0d7fe0;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13, 127, 224, .14);
}

.support-hint {
    display: block;
    margin-top: 5px;
    color: #617487;
    font-size: 12.5px;
    line-height: 1.45;
}

.support-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.support-captcha-row input[type=text] { width: 115px; }
.support-captcha-row img { border: 1px solid #b7c9d8; border-radius: 6px; }

.support-refresh {
    height: 40px;
    padding: 0 13px;
    color: #0a5fb2;
    background: #fff;
    border: 1px solid #9ebbd4;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 700;
}

.support-refresh:hover { background: #edf6fd; }
.support-refresh:focus { outline: 2px solid #0d7fe0; outline-offset: 2px; }
.support-actions { display: block; }
.support-back { display: block; margin-top: 14px; text-align: center; font-weight: 700; }
.support-success strong { white-space: nowrap; }

@media (max-width: 700px) {
    .support-card { margin: 16px auto; }
    .support-captcha-row { align-items: flex-start; }
    .support-captcha-row input[type=text] { width: 100%; }
}
