/* nxlf-css */

        .nxlf {
            max-width: 560px; background: #fff; border: 1px solid #EDEAE7; border-radius: 14px;
            box-shadow: 0 10px 30px rgba(53, 39, 28, .06); overflow: hidden;
        }
        .nxlf-head {
            padding: 18px 22px 16px;
            background: linear-gradient(135deg, var(--nhatdx-primary, #C67930) 0%, color-mix(in srgb, var(--nhatdx-primary, #C67930) 72%, #3D2D20) 100%);
            color: #fff;
        }
        .nxlf-title {
            margin: 0 !important; color: #fff !important;
            font-size: 17px !important; font-weight: 700 !important; letter-spacing: .3px; line-height: 1.3;
        }
        .nxlf-sub { margin: 6px 0 0 !important; color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.45; }

        .nxlf-body { padding: 20px 22px 22px; }

        .nxlf-field { position: relative; margin-bottom: 16px; }
        .nxlf-field input, .nxlf-field textarea {
            width: 100%; margin: 0 !important; padding: 20px 14px 8px !important;
            background: #FCFAF9 !important; border: 1.5px solid #EEEAE5 !important; border-radius: 10px !important;
            box-shadow: none !important; color: #342A22; font-size: 14.5px; line-height: 1.4;
            transition: border-color .15s ease, background .15s ease;
        }
        .nxlf-field textarea { padding-top: 24px !important; resize: vertical; min-height: 96px; }
        .nxlf-field input:focus, .nxlf-field textarea:focus {
            outline: none; background: #fff !important;
            border-color: var(--nhatdx-primary, #C67930) !important;
        }
        /* Nhãn nổi: ô trống thì nhãn nằm giữa như chữ gợi ý, có chữ thì nhãn thu nhỏ lên trên,
           nhờ vậy khách luôn nhìn thấy ô này hỏi gì kể cả sau khi đã điền. */
        .nxlf-field label {
            position: absolute; left: 15px; top: 14px; margin: 0 !important; pointer-events: none;
            color: #A1968C; font-size: 14.5px; font-weight: 400; line-height: 1;
            transition: transform .16s ease, color .16s ease, font-size .16s ease;
            transform-origin: left top;
        }
        .nxlf-field label span { color: #A95830; }
        .nxlf-field input:focus + label,
        .nxlf-field input:not(:placeholder-shown) + label,
        .nxlf-field textarea:focus + label,
        .nxlf-field textarea:not(:placeholder-shown) + label {
            transform: translateY(-8px) scale(.78); color: #83786C;
        }
        .nxlf-field input:focus + label, .nxlf-field textarea:focus + label { color: var(--nhatdx-primary, #C67930); }
        /*
         * Chữ gợi ý là placeholder THẬT của ô (trình duyệt tự vẽ, không phụ thuộc CSS định vị nhãn).
         * Ô còn trống: hiện chữ gợi ý, giấu nhãn nổi để không in hai lần. Đã gõ: chữ gợi ý tự mất, nhãn nhỏ hiện ở mép trên.
         * Nhờ vậy dù CSS nhãn nổi bị ghi đè hay tải chậm (cache, gộp CSS…), khách vẫn luôn thấy ô này hỏi gì.
         */
        .nxlf-field input::placeholder, .nxlf-field textarea::placeholder { color: #A1968C; opacity: 1; }
        .nxlf-field input:placeholder-shown + label, .nxlf-field textarea:placeholder-shown + label { opacity: 0; }
        .nxlf-field input:placeholder-shown, .nxlf-field textarea:placeholder-shown { padding-top: 14px !important; padding-bottom: 14px !important; }
        .nxlf-field label { z-index: 2; }

        .nxlf-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

        .nxlf-submit {
            width: 100%; min-height: 48px; margin: 4px 0 0 !important; padding: 0 20px !important;
            background: var(--nhatdx-primary, #C67930) !important; border: 0 !important;
            border-radius: 10px !important; color: #fff !important;
            font-size: 15px !important; font-weight: 700 !important; letter-spacing: .2px;
            box-shadow: 0 6px 16px rgba(198, 121, 48, .26) !important;
            transition: filter .15s ease, transform .12s ease;
        }
        .nxlf-submit:hover:not(:disabled) { filter: brightness(1.06); }
        .nxlf-submit:active:not(:disabled) { transform: scale(.99); }
        .nxlf-submit:disabled { opacity: .6; cursor: default; }

        /* Đang gửi: nút giữ nền ĐẶC (trước đây mờ đi nên nhãn "Nội dung cần tư vấn" phía sau lộ xuyên qua),
           nằm trên các ô nhập, kèm vòng xoay nhỏ */
        .nxlf-submit { position: relative; z-index: 2; }
        .nxlf-field { z-index: 1; }
        .nxlf-field label { max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nxlf-submit:disabled, .nxlf.is-sending .nxlf-submit { opacity: 1 !important; cursor: wait; filter: saturate(.85); }
        .nxlf.is-sending .nxlf-submit::after {
            content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 10px; vertical-align: -2px;
            border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: nxlfSpin .7s linear infinite;
        }
        @keyframes nxlfSpin { to { transform: rotate(360deg); } }

        .nxlf-msg { margin: 12px 0 0 !important; font-size: 13.5px; line-height: 1.5; min-height: 1px; }
        .nxlf-msg.is-ok  { color: #17a34a; }
        .nxlf-msg.is-err { color: #d63638; }

        /* Gửi xong thì các ô lui về, chỉ còn lời cảm ơn — tránh khách bấm gửi tiếp lần nữa */
        .nxlf.is-done .nxlf-field, .nxlf.is-done .nxlf-submit { display: none; }
        .nxlf.is-done .nxlf-msg {
            margin: 0 !important; padding: 16px 18px; background: #f0faf4; border: 1px solid #cdecda;
            border-radius: 10px; color: #17803d; font-size: 14.5px; text-align: center;
        }

        @media (max-width: 549px) {
            .nxlf-head { padding: 16px 16px 14px; }
            .nxlf-body { padding: 16px; }
            .nxlf-title { font-size: 16px !important; }
        }