/* ============================================================
   Feedback / Public Warranty (SUNVINA) — /feedback
   Mobile-first, theme xanh #1E73E8 + cam #FF7A00
   ============================================================ */
:root {
    --feedback_blue: #1E73E8;
    --feedback_blue_light: #3B8BFF;
    --feedback_blue_dark: #155bbd;
    --feedback_orange: #FF7A00;
    --feedback_orange_light: #FF9F1C;
    --feedback_ink: #1c2b46;
    --feedback_muted: #6b7a90;
    --feedback_line: #e6ecf5;
    --feedback_bg: #eef2fb;
    --feedback_radius: 18px;
    --feedback_radius_sm: 12px;
}

* { box-sizing: border-box; }

html { background: #e9eefb; }

.feedback_body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--feedback_ink);
    background: linear-gradient(160deg, #f4f7fe 0%, #e9eefb 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.feedback_wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 18px 14px 30px;
}
/* Mobile: full-bleed — card tràn hết màn hình, không lộ nền gradient */
@media (max-width: 600px) {
    html, .feedback_body { background: #fff; }
    .feedback_wrap { max-width: none; padding: 0; }
    .feedback_card {
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* ---------- Card ---------- */
.feedback_card {
    position: relative;
    background: #fff;
    border-radius: var(--feedback_radius);
    box-shadow: 0 18px 50px rgba(30, 74, 120, .12);
    padding: 26px 20px 22px;
    overflow: hidden;
}
.feedback_card_center { text-align: center; }

.feedback_wave {
    position: absolute;
    width: 180px;
    height: auto;
    pointer-events: none;
    opacity: .9;
    z-index: 0;
}
.feedback_wave_tl {
    top: 0; left: 0;
    -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 82%);
    mask-image: linear-gradient(to right, #000 50%, transparent 82%);
}
.feedback_card > *:not(.feedback_wave) { position: relative; z-index: 1; }

/* ---------- Brand header ---------- */
.feedback_brand { text-align: center; margin-bottom: 18px; }
.feedback_brand_name {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--feedback_blue);
}
.feedback_brand_sm .feedback_brand_name { font-size: 24px; color: #16324f; }
.feedback_brand_tagline { margin: 2px 0 0; font-size: 13px; color: var(--feedback_muted); }
.feedback_brand_bar { display: inline-flex; gap: 6px; margin-top: 10px; }
.feedback_brand_bar i { width: 26px; height: 4px; border-radius: 4px; background: var(--feedback_blue); display: block; }
.feedback_brand_bar i:last-child { width: 12px; opacity: .4; }

/* ---------- Hero (landing) ---------- */
.feedback_hero { text-align: center; margin-bottom: 22px; }
.feedback_hero_title { margin: 0; font-size: 26px; font-weight: 800; color: #142c4d; }
.feedback_hero_divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; color: var(--feedback_blue); }
.feedback_hero_divider .line { width: 36px; height: 2px; background: linear-gradient(90deg, transparent, #c4d6f3); }
.feedback_hero_divider .line:last-child { background: linear-gradient(90deg, #c4d6f3, transparent); }
.feedback_hero_desc { margin: 0; color: var(--feedback_muted); font-size: 14.5px; }

/* ---------- Option cards (landing) ---------- */
.feedback_option {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--feedback_radius);
    padding: 18px 16px;
    margin-bottom: 16px;
    border: 1.5px solid var(--feedback_line);
    background: #fff;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.feedback_option:active { transform: scale(.99); }
.feedback_option_blue { background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 70%); border-color: #d6e6ff; }
.feedback_option_orange { background: linear-gradient(135deg, #fff6ee 0%, #ffffff 70%); border-color: #ffe2c6; }
.feedback_option:hover { box-shadow: 0px 3px 20px rgb(0 0 0 / 10%); }
.feedback_option_deco {
    position: absolute;
    right: 0; bottom: 0;
    width: 60px;
    height: auto;
    pointer-events: none;
    opacity: .9;
    z-index: 0;
}
.feedback_option > *:not(.feedback_option_deco) { position: relative; z-index: 1; }
.feedback_option_icon { flex: 0 0 84px; }
.feedback_option_icon img { width: 84px; height: 84px; display: block; }
.feedback_option_body { flex: 1; min-width: 0; }
.feedback_option_num {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    color: var(--feedback_blue);
    background: #e7f0ff;
    border-radius: 20px; padding: 2px 10px; margin-bottom: 4px;
}
.feedback_option_orange .feedback_option_num { color: var(--feedback_orange); background: #ffead4; }
.feedback_option_title { margin: 2px 0 4px; font-size: 18px; font-weight: 800; color: var(--feedback_blue); }
.feedback_option_orange .feedback_option_title { color: var(--feedback_orange); }
.feedback_option_desc { margin: 0 0 10px; font-size: 13.5px; color: #46566e; }
/* Badge nằm dòng riêng, canh thẳng lề với mô tả; spacer co lại (badge lấn trái) khi chật */
.feedback_option_tagline { flex: 0 0 100%; display: flex; align-items: center; }
.feedback_option_tagline::before { content: ""; flex: 0 1 98px; }
.feedback_option_tag {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
    font-size: 13px; font-weight: 600; color: var(--feedback_blue);
    background: #eaf2ff; border-radius: 30px; padding: 7px 14px;
    white-space: nowrap;
}
.feedback_option_orange .feedback_option_tag { color: var(--feedback_orange); background: #fff0e0; }
.feedback_option_arrow { flex: 0 0 auto; }
.feedback_option_arrow img { width: 40px; height: 40px; display: block; }

/* ---------- Note box ---------- */
.feedback_note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eef4ff;
    border-radius: var(--feedback_radius_sm);
    padding: 14px 95px 15px 16px;
    margin: 6px 0 18px;
    overflow: hidden;
}
.feedback_note_icon { width: 34px; height: 34px; flex: 0 0 34px; }
.feedback_note p { margin: 0; font-size: 13.5px; color: #3a4a63; flex: 1; }
.feedback_note_illus {width: 90px;height: auto;opacity: .9;flex: 0 0 auto;position: absolute;right: 7px;}
.feedback_note_inset { margin: 12px 0 0; }
.feedback_note_inset p { font-size: 12.5px; }

/* Trang cảm ơn (thank you) — gọn theo chiều dọc */
.feedback_card_center .feedback_brand { margin-bottom: 10px; }
.feedback_card_center .feedback_btn_lg { padding: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
.feedback_footer { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--feedback_line); }
.feedback_footer_heart img { width: 40px; height: 40px; }
.feedback_footer_cskh { margin: 4px 0 10px; font-size: 13.5px; color: var(--feedback_muted); }
.feedback_footer_hotline { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.feedback_footer_hotline img { width: 28px; height: 28px; }
.feedback_footer_hotline span { color: var(--feedback_muted); }
.feedback_footer_hotline a { color: var(--feedback_blue); font-weight: 800; text-decoration: none; font-size: 17px; }

/* ---------- Form headings ---------- */
.feedback_form_title { text-align: center; margin: 8px 0 4px; font-size: 26px; font-weight: 800; color: #142c4d; }
.feedback_form_sub { text-align: center; margin: 0 0 18px; font-size: 14px; color: var(--feedback_muted); }

/* ---------- Step indicator ---------- */
.feedback_steps { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.feedback_steps_item { display: flex; align-items: center; gap: 7px; }
.feedback_steps_item .num {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d9e0ec; color: #fff; font-size: 13px; font-weight: 700;
    transition: background .2s;
}
.feedback_steps_item .label { font-size: 13px; font-weight: 600; color: var(--feedback_muted); white-space: nowrap; }
.feedback_steps_item.feedback_active .num { background: var(--feedback_blue); }
.feedback_steps_item.feedback_active .label { color: var(--feedback_blue); }
.feedback_steps_item.feedback_done .num { background: #1FA85C; }
.feedback_steps_line { flex: 0 1 26px; height: 2px; background: #d9e0ec; margin: 0 8px; }

/* ---------- Form steps ---------- */
.feedback_step { display: none; }
.feedback_step.feedback_active { display: block; }

.feedback_label { display: block; font-size: 14px; font-weight: 700; color: #2b3a54; margin: 16px 0 8px; }
.feedback_label .req { color: #e23b3b; }

/* ---------- Inputs ---------- */
.feedback_input_icon, .feedback_select_icon { position: relative; }
.feedback_input_icon > i, .feedback_select_icon > i:first-child {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #9aa8bf; font-size: 15px; pointer-events: none;
}
.feedback_input_icon input, .feedback_select_icon select, .feedback_textarea_wrap textarea {
    width: 100%; border: 1.5px solid var(--feedback_line); border-radius: var(--feedback_radius_sm);
    padding: 14px 14px 14px 42px; font-size: 15px; font-family: inherit; color: var(--feedback_ink);
    background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.feedback_textarea_wrap textarea { padding-left: 14px; resize: vertical; }
.feedback_input_icon input:focus, .feedback_select_icon select:focus, .feedback_textarea_wrap textarea:focus {
    border-color: var(--feedback_blue); box-shadow: 0 0 0 3px rgba(30, 115, 232, .12);
}
.feedback_input_icon input::placeholder, textarea::placeholder { color: #aab6c9; }

.feedback_select_icon select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.feedback_select_caret { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #9aa8bf; pointer-events: none; }

.feedback_textarea_wrap { position: relative; }
.feedback_counter { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: #aab6c9; }

/* ---------- Buttons ---------- */
.feedback_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: var(--feedback_radius_sm); cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 18px;
    transition: transform .12s, box-shadow .15s, opacity .15s;
}
.feedback_btn:active { transform: scale(.985); }
.feedback_btn:hover { box-shadow: 0px 3px 20px rgb(0 0 0 / 10%); }
.feedback_btn_block { display: flex; width: 100%; }
.feedback_btn_lg { padding: 16px; font-size: 15.5px; margin-top: 16px; }
.feedback_btn_primary {
    color: #fff;
    background: linear-gradient(135deg, var(--feedback_blue_light), var(--feedback_blue));
    margin-top: 14px;
}
.feedback_btn_ghost { background: transparent; color: var(--feedback_muted); box-shadow: none; padding: 10px; }
.feedback_btn[disabled] { opacity: .65; cursor: not-allowed; }
.feedback_btn.feedback_loading { position: relative; color: transparent !important; }
.feedback_btn.feedback_loading::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff;
    animation: fbSpin .7s linear infinite;
}
.feedback_btn_ghost.feedback_loading::after { border-color: rgba(0,0,0,.2); border-top-color: var(--feedback_blue); }
@keyframes fbSpin { to { transform: rotate(360deg); } }

.feedback_step_nav { text-align: center; margin-top: 6px; }

/* ---------- Alerts ---------- */
.feedback_alert { border-radius: var(--feedback_radius_sm); padding: 12px 14px; font-size: 13.5px; margin-top: 14px; }
.feedback_alert_info { background: #eaf2ff; color: #235; border: 1px solid #d3e3ff; }
.feedback_alert_info b { color: var(--feedback_blue); }
.feedback_alert_err { background: #fdecec; color: #b3261e; border: 1px solid #f7cdcb; }
.feedback_alert i { margin-right: 5px; }

/* ---------- Order list ---------- */
.feedback_order_list { margin-top: 8px; }
.feedback_order {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px solid var(--feedback_line); border-radius: var(--feedback_radius_sm);
    padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.feedback_order input { accent-color: var(--feedback_blue); width: 18px; height: 18px; flex: 0 0 auto; }
.feedback_order_icon { color: #8aa0bf; font-size: 18px; }
.feedback_order_main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feedback_order_code { font-size: 16px; font-weight: 800; color: #16324f; }
.feedback_order_name { font-size: 13.5px; color: #46566e; }
.feedback_order_status {
    align-self: flex-start; font-size: 12px; color: #1FA85C;
    background: #e6f7ee; border-radius: 20px; padding: 2px 10px; margin-top: 2px;
}
.feedback_order_date { font-size: 12.5px; color: var(--feedback_muted); white-space: nowrap; }
.feedback_order.feedback_selected { border-color: var(--feedback_blue); background: #f3f8ff; box-shadow: 0 0 0 3px rgba(30,115,232,.1); }
.feedback_order.feedback_disabled {
    cursor: not-allowed; opacity: .65; background: #f6f7f9; border-style: dashed;
}
.feedback_order.feedback_disabled input { cursor: not-allowed; }
.feedback_order_rated {
    align-self: flex-start; font-size: 12px; color: #b06a00;
    background: #fff3e0; border-radius: 20px; padding: 2px 10px; margin-top: 2px;
}

/* ---------- Selected order box (request step 2) ---------- */
.feedback_selected_order {
    display: flex; align-items: center; gap: 12px;
    background: #fff7ec; border: 1.5px solid #ffe1bd; border-radius: var(--feedback_radius_sm);
    padding: 13px 14px; margin-bottom: 4px;
}
.feedback_selected_order_icon { color: #b9852f; font-size: 20px; }
.feedback_selected_order_text strong { display: block; font-size: 14.5px; color: #6b4d1c; }
.feedback_selected_order_text small { color: #95743f; font-size: 13px; }

/* ---------- Condition chips ---------- */
.feedback_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback_chip {
    border: 1.5px solid var(--feedback_line); background: #fff; color: #46566e;
    border-radius: 30px; padding: 8px 13px; font-size: 13.5px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all .15s;
    white-space: nowrap;
}
.feedback_chip.feedback_active { border-color: var(--feedback_blue); color: var(--feedback_blue); background: #f1f7ff; }
.feedback_chip.feedback_active i { color: var(--feedback_blue); }

/* ---------- Stars ---------- */
.feedback_stars { display: flex; gap: 14px; font-size: 32px; color: #dfe4ee; }
.feedback_stars .fa-star { cursor: pointer; transition: transform .1s, color .12s; }
.feedback_stars .fa-star:hover { transform: scale(1.12); }
.feedback_stars .fa-star.feedback_on { color: #FFC107; }

/* ---------- Uploader ---------- */
.feedback_uploader {
    display: flex; align-items: center; gap: 14px; justify-content: center;
    border: 1.6px dashed #b9cdec; border-radius: var(--feedback_radius_sm);
    background: #f6f9ff; padding: 16px; cursor: pointer; margin-top: 6px;
    transition: border-color .15s, background .15s;
}
.feedback_uploader:hover { border-color: var(--feedback_blue); background: #eef5ff; }
.feedback_uploader_icon {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e2edff; color: var(--feedback_blue); font-size: 20px;
}
.feedback_uploader_text { text-align: left; }
.feedback_uploader_text strong { display: block; color: var(--feedback_blue); font-size: 15px; }
.feedback_uploader_text small { color: var(--feedback_muted); font-size: 12.5px; }

.feedback_previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.feedback_preview { position: relative; width: 70px; height: 70px; border-radius: 10px; overflow: hidden; border: 1px solid var(--feedback_line); }
.feedback_preview img { width: 100%; height: 100%; object-fit: cover; }
.feedback_preview_vid { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #11203a; color: #fff; font-size: 20px; }
.feedback_preview_rm {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ---------- Checkbox ---------- */
.feedback_check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 4px; font-size: 13.5px; color: #3a4a63; cursor: pointer; }
.feedback_check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--feedback_blue); flex: 0 0 auto; }

/* ---------- Thank you ---------- */
.feedback_success { margin: 0 auto 2px; }
.feedback_success img { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.feedback_thanks_title { margin: 4px 0 6px; font-size: 22px; font-weight: 800; color: #142c4d; }
.feedback_thanks_desc { margin: 0 0 14px; font-size: 13.5px; color: var(--feedback_muted); }

.feedback_info_card {
    text-align: left;
    border: 1.5px solid var(--feedback_line); border-radius: var(--feedback_radius);
    padding: 12px 14px; background: #fcfdff;
}
.feedback_info_card_head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.feedback_info_card_head img { width: 30px; height: 30px; }
.feedback_info_card_head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--feedback_blue); }
.feedback_info_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--feedback_line); }
.feedback_info_row:first-of-type { border-top: none; }
.feedback_info_row_label { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: #3a4a63; font-weight: 600; }
.feedback_info_row_label i { color: var(--feedback_blue); width: 18px; text-align: center; }
.feedback_info_row_value { font-size: 14.5px; font-weight: 700; color: #16324f; text-align: right; }
.feedback_code { color: var(--feedback_blue); letter-spacing: .5px; }
.feedback_badge { font-size: 12.5px; font-weight: 700; border-radius: 20px; padding: 4px 12px; }
.feedback_badge_green { color: #1FA85C; background: #e6f7ee; }

/* ---------- Responsive ---------- */
@media (max-width: 380px) {
    .feedback_option { flex-wrap: wrap; }
    .feedback_option_icon { flex-basis: 64px; }
    .feedback_option_icon img { width: 64px; height: 64px; }
    .feedback_option_tagline::before { flex-basis: 78px; }
    .feedback_steps_item .label { display: none; }
    .feedback_steps_line { flex-basis: 40px; }
}

/* ---------- Ẩn badge reCAPTCHA (v3 vẫn chạy verify ngầm) ---------- */
.grecaptcha-badge { visibility: hidden !important; }