/* ==========================================================================
   Lavor Lead Form — giao diện popup + nút nổi
   Màu và tỉ lệ đo pixel trực tiếp từ Ảnh 2 của brief MKT 20/08/2026.
   ========================================================================== */

.lavor-lf {
    --lf-ink: #060400;
    --lf-border: #BBB6B5;
    --lf-placeholder: #6A6866;
    --lf-gold-a: #DCA73C;
    --lf-gold-b: #F1C834;
}

/* --- Nút nổi --------------------------------------------------------------
   Chỉ dùng khi không tìm thấy cụm .elementor-icon-list-items để chèn vào.
   Chèn được rồi thì JS ẩn nút này đi, xem phần "Nút trong cụm icon list". */

.lavor-lf-trigger {
    position: fixed;
    right: 0;
    bottom: var(--lavor-lf-offset, 140px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    background: #F58220;
    color: #fff;
    cursor: pointer;
    transition: transform .25s ease, filter .25s ease;
    -webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}

.lavor-lf-trigger[hidden] {
    display: none;
}

.lavor-lf-trigger:hover {
    transform: scale(1.08);
}

.lavor-lf-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.lavor-lf-trigger svg {
    display: block;
    width: 25px;
    height: 25px;
}

/* --- Nút trong cụm icon list ----------------------------------------------
   JS nhân bản một <li> có sẵn của cụm nên bản sao đã mang y nguyên nền,
   kích thước, bo góc, hover và focus của widget đó. Phần dưới chỉ dọn nốt
   khoảng đệm mà Elementor chừa cho chữ, vì item này không còn chữ nữa. */

.elementor-icon-list-item.lavor-lf-dock,
.elementor-icon-list-item.lavor-lf-dock > a {
    cursor: pointer;
}

.elementor-icon-list-item.lavor-lf-dock .elementor-icon-list-icon {
    padding-inline-end: 0;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item.lavor-lf-dock .elementor-icon-list-icon svg {
    margin: 0;
}

/* --- Lớp phủ + hộp thoại -------------------------------------------------- */

.lavor-lf-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .2s ease;
    overflow-y: auto;
}

.lavor-lf-overlay[hidden] {
    display: none;
}

.lavor-lf-overlay.is-open {
    opacity: 1;
}

.lavor-lf-modal {
    position: relative;
    width: 820px;
    max-width: 100%;
    margin: auto;
    padding: 48px 56px 44px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
    color: #060400;
    font-family: inherit;
    transform: translateY(12px);
    transition: transform .25s ease;
}

.lavor-lf-overlay.is-open .lavor-lf-modal {
    transform: none;
}

.lavor-lf-modal .lavor-lf-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    padding: 4px;
    border: 0;
    background: none;
    color: #060400;
    cursor: pointer;
    line-height: 0;
}

.lavor-lf-modal .lavor-lf-close:hover {
    opacity: .65;
}

/* --- Chữ ------------------------------------------------------------------ */

.lavor-lf-modal .lavor-lf-title {
    margin: 0 0 26px;
    padding: 0;
    color: #060400;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.lavor-lf-modal .lavor-lf-desc {
    margin: 0 0 26px;
    color: #060400;
    font-size: 16px;
    line-height: 1.5;
}

.lavor-lf-modal .lavor-lf-note {
    margin: 26px 0 0;
    color: #060400;
    font-size: 15px;
    font-style: italic;
    line-height: 1.45;
}

/* --- Các trường ----------------------------------------------------------- */

.lavor-lf-modal .lavor-lf-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.lavor-lf-modal .lavor-lf-field {
    position: relative;
    display: block;
    margin: 0;
}

.lavor-lf-modal .lavor-lf-field input,
.lavor-lf-modal .lavor-lf-field select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #BBB6B5;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #060400;
    font-family: inherit;
    font-size: 16px;
    line-height: 46px;
}

.lavor-lf-modal .lavor-lf-field input::placeholder {
    color: #6A6866;
    opacity: 1;
}

.lavor-lf-modal .lavor-lf-field input:focus,
.lavor-lf-modal .lavor-lf-field select:focus {
    border-color: #060400;
    outline: none;
    box-shadow: none;
}

.lavor-lf-modal .lavor-lf-field.has-error input,
.lavor-lf-modal .lavor-lf-field.has-error select {
    border-color: #c62828;
}

.lavor-lf-modal .lavor-lf-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

/* Khi chưa chọn gì, option đầu có value rỗng nên :invalid bắt được */
.lavor-lf-modal .lavor-lf-select select:invalid {
    color: #6A6866;
}

.lavor-lf-modal .lavor-lf-caret {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 0;
    height: 0;
    border-top: 7px solid #060400;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    transform: translateY(-50%);
    pointer-events: none;
}

.lavor-lf-modal .lavor-lf-error {
    display: none;
    margin-top: 5px;
    color: #c62828;
    font-size: 13px;
    line-height: 1.4;
}

.lavor-lf-modal .lavor-lf-field.has-error .lavor-lf-error {
    display: block;
}

/* Bẫy bot — ẩn khỏi cả mắt người lẫn screen reader, nhưng không dùng
   display:none vì một số bot bỏ qua ô bị ẩn kiểu đó. */
.lavor-lf-modal .lavor-lf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --- Nút gửi -------------------------------------------------------------- */

.lavor-lf-modal .lavor-lf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    height: 52px;
    min-width: 190px;
    margin-top: 22px;
    padding: 0 30px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, #DCA73C 0%, #F1C834 100%);
    color: #060400;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: filter .25s ease;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.lavor-lf-modal .lavor-lf-submit:hover {
    filter: brightness(1.06);
}

.lavor-lf-modal .lavor-lf-submit[disabled] {
    cursor: default;
    filter: grayscale(.35);
    opacity: .75;
}

.lavor-lf-modal .lavor-lf-arrow {
    margin-left: 10px;
    font-weight: 700;
}

/* --- Thông báo ------------------------------------------------------------ */

.lavor-lf-modal .lavor-lf-message {
    display: none;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.lavor-lf-modal .lavor-lf-message.is-success,
.lavor-lf-modal .lavor-lf-message.is-error {
    display: block;
}

.lavor-lf-modal .lavor-lf-message.is-success {
    color: #1a7f37;
}

.lavor-lf-modal .lavor-lf-message.is-error {
    color: #c62828;
}

/* Gửi xong thì giấu form, chỉ còn lời cảm ơn */
.lavor-lf-modal .lavor-lf-form.is-done .lavor-lf-field,
.lavor-lf-modal .lavor-lf-form.is-done .lavor-lf-submit {
    display: none;
}

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1024px) {
    .lavor-lf-modal {
        width: 620px;
        padding: 40px 36px 36px;
    }

    .lavor-lf-modal .lavor-lf-title {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .lavor-lf-modal .lavor-lf-desc {
        margin-bottom: 20px;
    }

    .lavor-lf-trigger svg {
        width: 22px;
        height: 22px;
    }
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
    .lavor-lf-modal {
        width: 100%;
        padding: 30px 20px 26px;
    }

    .lavor-lf-modal .lavor-lf-close {
        top: 12px;
        right: 12px;
    }

    .lavor-lf-modal .lavor-lf-title {
        margin-bottom: 16px;
        font-size: 23px;
        line-height: 1.2;
    }

    .lavor-lf-modal .lavor-lf-desc {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .lavor-lf-modal .lavor-lf-form {
        gap: 10px;
    }

    .lavor-lf-modal .lavor-lf-field input,
    .lavor-lf-modal .lavor-lf-field select {
        height: 44px;
        padding: 0 14px;
        /* < 16px là iOS Safari tự phóng to trang khi focus, nên giữ 16px */
        font-size: 16px;
        line-height: 42px;
    }

    .lavor-lf-modal .lavor-lf-submit {
        height: 46px;
        min-width: 168px;
        margin-top: 18px;
        padding: 0 22px;
        font-size: 15px;
    }

    .lavor-lf-modal .lavor-lf-note {
        margin-top: 20px;
        font-size: 13px;
    }

    .lavor-lf-trigger svg {
        width: 20px;
        height: 20px;
    }
}

/* --- Tôn trọng thiết lập giảm chuyển động của hệ điều hành ----------------- */

@media (prefers-reduced-motion: reduce) {
    .lavor-lf-overlay,
    .lavor-lf-modal,
    .lavor-lf-trigger,
    .lavor-lf-modal .lavor-lf-submit {
        transition: none;
    }
}