*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    font-family:"Bai Jamjuree",Arial,sans-serif;
    color:#172033;
    background:#f5f9fe;
}

a{
    color:inherit;
}

.bvc-conversion-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,46%) minmax(0,54%);
}


/* LEFT */
.bvc-conversion-info{
    position:relative;
    overflow:hidden;

    min-height:100vh;

    padding:
        clamp(28px,4vw,58px)
        clamp(28px,5vw,78px);

    display:flex;
    flex-direction:column;

    color:#fff;

    background:
        radial-gradient(circle at 15% 10%,rgba(65,211,239,.24),transparent 32%),
        radial-gradient(circle at 80% 75%,rgba(81,105,255,.20),transparent 34%),
        linear-gradient(145deg,#03294e 0%,#064881 54%,#0879cf 100%);
}

.bvc-conversion-info::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    right:-190px;
    top:8%;
}

.bvc-conversion-info::after{
    content:"";
    position:absolute;
    inset:auto -10% -210px 15%;
    height:380px;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(71,216,241,.14)
        );

    transform:skewY(-10deg);
}

.bvc-conversion-brand{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    gap:12px;

    width:max-content;

    text-decoration:none;
}

.bvc-conversion-brand-mark{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:25px;
    font-weight:800;

    background:linear-gradient(135deg,#65d8e9,#12a6ef);

    box-shadow:0 14px 35px rgba(10,174,226,.28);
}

.bvc-conversion-brand strong{
    display:block;
    font-size:23px;
    line-height:1;
    letter-spacing:.04em;
}

.bvc-conversion-brand small{
    display:block;
    margin-top:4px;
    font-size:10px;
    opacity:.72;
}

.bvc-conversion-copy{
    position:relative;
    z-index:2;

    margin:auto 0;
    max-width:650px;

    padding:60px 0;
}

.bvc-conversion-kicker{
    display:inline-flex;
    align-items:center;

    padding:8px 13px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;

    background:rgba(255,255,255,.07);
}

.bvc-conversion-copy h1{
    margin:22px 0 18px;

    max-width:610px;

    font-size:clamp(38px,4vw,62px);
    line-height:1.08;
    letter-spacing:-.045em;
}

.bvc-conversion-copy h1 span{
    display:block;

    background:linear-gradient(90deg,#7ce4ed,#79caff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.bvc-conversion-lead{
    margin:0;
    max-width:590px;

    color:rgba(255,255,255,.79);

    font-size:16px;
    line-height:1.8;
}

.bvc-conversion-trust{
    display:grid;
    gap:16px;
    margin-top:34px;
}

.bvc-conversion-trust > div{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.bvc-check{
    width:27px;
    height:27px;
    flex:0 0 27px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-weight:800;

    color:#043a68;
    background:#7ee6e9;
}

.bvc-conversion-trust p{
    margin:0;
}

.bvc-conversion-trust b{
    display:block;
    font-size:15px;
}

.bvc-conversion-trust small{
    display:block;
    margin-top:3px;

    color:rgba(255,255,255,.67);
    line-height:1.5;
}

.bvc-conversion-foot{
    position:relative;
    z-index:2;

    font-size:11px;
    color:rgba(255,255,255,.52);
}


/* RIGHT */
.bvc-conversion-form-side{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    padding:50px clamp(24px,5vw,90px);
}

.bvc-form-card{
    width:min(100%,690px);

    padding:clamp(28px,4vw,48px);

    border:1px solid #e3edf7;
    border-radius:24px;

    background:#fff;

    box-shadow:
        0 26px 80px rgba(21,61,102,.11);
}

.bvc-form-head span{
    color:#0796dd;

    font-size:11px;
    font-weight:800;
    letter-spacing:.10em;
}

.bvc-form-head h2{
    margin:8px 0 10px;

    font-size:clamp(27px,3vw,38px);
    line-height:1.18;
    letter-spacing:-.035em;

    color:#112943;
}

.bvc-form-head p{
    margin:0 0 28px;

    color:#6a7d91;
    font-size:14px;
    line-height:1.7;
}

.bvc-lead-form{
    display:grid;
    gap:17px;
}

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

.bvc-field label{
    display:block;
    margin-bottom:7px;

    color:#31455c;

    font-size:12px;
    font-weight:700;
}

.bvc-field label em{
    color:#f05a67;
    font-style:normal;
}

.bvc-field input,
.bvc-field select{
    width:100%;
    height:51px;

    padding:0 15px;

    outline:0;

    border:1px solid #dbe5ef;
    border-radius:10px;

    color:#21364c;
    background:#fff;

    font-family:inherit;
    font-size:14px;

    transition:.2s ease;
}

.bvc-field select{
    cursor:pointer;
}

.bvc-field input:focus,
.bvc-field select:focus{
    border-color:#23bae4;

    box-shadow:
        0 0 0 4px rgba(35,186,228,.10);
}

.bvc-consent{
    display:flex;
    align-items:flex-start;
    gap:9px;

    cursor:pointer;

    color:#65778b;
    font-size:12px;
    line-height:1.5;
}

.bvc-consent input{
    margin-top:3px;
}

.bvc-conversion-submit{
    position:relative;
    overflow:hidden;

    width:100%;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border:0;
    border-radius:999px;

    color:#fff;

    font-family:inherit;
    font-size:14px;
    font-weight:800;

    cursor:pointer;

    background:
        linear-gradient(
            100deg,
            #6fd9e7 0%,
            #27bee6 48%,
            #1299ee 100%
        );

    background-size:200% 200%;

    box-shadow:
        0 14px 30px rgba(22,162,224,.24);

    animation:
        bvcLeadFlow 5s ease infinite;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bvc-conversion-submit::before{
    content:"";

    position:absolute;

    top:-45%;
    bottom:-45%;
    left:-45%;

    width:30%;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.48),
            transparent
        );
}

.bvc-conversion-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(22,162,224,.32);
}

.bvc-conversion-submit:hover::before{
    animation:bvcLeadShine .75s ease forwards;
}

.bvc-privacy{
    margin:0;

    text-align:center;

    color:#8999aa;

    font-size:11px;
}

.bvc-form-error{
    margin-bottom:20px;
    padding:13px 15px;

    border:1px solid #f7c9cd;
    border-radius:10px;

    background:#fff6f7;
    color:#a73943;

    font-size:12px;
    line-height:1.5;
}

.bvc-form-error ul{
    margin:6px 0 0;
    padding-left:18px;
}

.bvc-mini-trust{
    width:min(100%,690px);

    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;

    margin-top:18px;

    color:#718398;
    font-size:11px;
    font-weight:600;
}


/* THANK YOU */
.bvc-thank-page{
    min-height:100vh;

    display:grid;
    place-items:center;

    padding:30px;

    background:
        radial-gradient(circle at 20% 10%,rgba(96,218,233,.20),transparent 28%),
        #f4f9ff;
}

.bvc-thank{
    width:100%;
    max-width:680px;
}

.bvc-thank-card{
    padding:55px 45px;

    text-align:center;

    border:1px solid #dfeaf4;
    border-radius:26px;

    background:#fff;

    box-shadow:
        0 30px 90px rgba(25,62,100,.12);
}

.bvc-thank-icon{
    width:76px;
    height:76px;

    display:grid;
    place-items:center;

    margin:0 auto 22px;

    border-radius:50%;

    color:#fff;

    font-size:36px;
    font-weight:800;

    background:
        linear-gradient(135deg,#6fd9e7,#1299ee);
}

.bvc-thank-kicker{
    color:#0f9ee1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.bvc-thank h1{
    margin:10px auto 14px;

    color:#112943;

    font-size:36px;
    line-height:1.2;
}

.bvc-thank p{
    max-width:520px;

    margin:0 auto;

    color:#687c91;

    font-size:15px;
    line-height:1.7;
}

.bvc-thank-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;

    margin-top:28px;
}

.bvc-thank-actions a{
    min-height:48px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 23px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;

    text-decoration:none;
}

.bvc-thank-primary{
    color:#fff;

    background:
        linear-gradient(90deg,#6fd9e7,#1299ee);
}

.bvc-thank-secondary{
    color:#126ea8;

    border:1px solid #cbddeb;

    background:#fff;
}


@keyframes bvcLeadFlow{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes bvcLeadShine{
    from{left:-45%}
    to{left:125%}
}


/* MOBILE */
@media(max-width:860px){

    .bvc-conversion-shell{
        display:block;
    }

    .bvc-conversion-info{
        min-height:auto;

        padding:24px 22px 42px;
    }

    .bvc-conversion-copy{
        padding:45px 0 12px;
    }

    .bvc-conversion-copy h1{
        font-size:38px;
    }

    .bvc-conversion-trust{
        display:none;
    }

    .bvc-conversion-foot{
        display:none;
    }

    .bvc-conversion-form-side{
        min-height:auto;

        padding:24px 16px 45px;

        background:#f5f9fe;
    }

    .bvc-form-card{
        margin-top:-42px;

        position:relative;
        z-index:10;

        padding:26px 20px;

        border-radius:19px;
    }

}


@media(max-width:560px){

    .bvc-fields-2{
        grid-template-columns:1fr;
    }

    .bvc-conversion-copy h1{
        font-size:34px;
    }

    .bvc-conversion-lead{
        font-size:14px;
    }

    .bvc-form-head h2{
        font-size:26px;
    }

    .bvc-mini-trust{
        gap:9px 15px;
    }

    .bvc-thank-card{
        padding:42px 22px;
    }

    .bvc-thank h1{
        font-size:29px;
    }

}



/* =========================================================
   BIVACO CONVERSION - COMPACT DESKTOP LAYOUT
   Gọn khung, không full màn hình
   ========================================================= */

@media (min-width: 861px){

    body.bvc-conversion{
        min-height:100vh;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:28px;

        background:
            linear-gradient(
                135deg,
                #f4f8fc 0%,
                #eef5fb 100%
            );
    }

    .bvc-conversion-shell{
        width:min(1380px,100%);
        min-height:760px;

        grid-template-columns:
            minmax(0,48%)
            minmax(0,52%);

        border-radius:28px;
        overflow:hidden;

        box-shadow:
            0 28px 80px rgba(20,55,90,.14);

        background:#fff;
    }

    .bvc-conversion-info{
        min-height:760px;

        padding:
            42px
            58px;
    }

    .bvc-conversion-copy{
        padding:38px 0;
    }

    .bvc-conversion-copy h1{
        font-size:clamp(40px,3.4vw,54px);
        max-width:560px;
    }

    .bvc-conversion-lead{
        max-width:550px;
        font-size:15px;
    }

    .bvc-conversion-trust{
        margin-top:27px;
        gap:13px;
    }


    .bvc-conversion-form-side{
        min-height:760px;

        padding:
            34px
            46px;
    }

    .bvc-form-card{
        width:min(100%,620px);

        padding:
            34px
            38px;

        border-radius:22px;
    }

    .bvc-form-head h2{
        font-size:32px;
    }

    .bvc-form-head p{
        margin-bottom:22px;
    }

    .bvc-lead-form{
        gap:14px;
    }

    .bvc-field input,
    .bvc-field select{
        height:48px;
    }

    .bvc-conversion-submit{
        height:52px;
    }

    .bvc-mini-trust{
        width:min(100%,620px);
        margin-top:13px;
    }

}


/* màn hình laptop nhỏ */
@media (min-width:861px) and (max-height:850px){

    body.bvc-conversion{
        align-items:flex-start;
        padding-top:20px;
        padding-bottom:20px;
    }

    .bvc-conversion-shell,
    .bvc-conversion-info,
    .bvc-conversion-form-side{
        min-height:720px;
    }

    .bvc-conversion-info{
        padding-top:34px;
        padding-bottom:34px;
    }

    .bvc-conversion-copy{
        padding:30px 0;
    }

    .bvc-form-card{
        padding-top:28px;
        padding-bottom:28px;
    }

}



/* =========================================================
   BIVACO CONVERSION - COMPACT V2 + NỀN PHÍA DƯỚI
   ========================================================= */

@media (min-width: 861px){

    body.bvc-conversion{
        position: relative;
        overflow-x: hidden;
        min-height: 100vh;
        padding: 26px;
        background: linear-gradient(180deg,#f3f8fc 0%,#eef4fa 100%);
    }

    /* nền đỡ phía dưới */
    body.bvc-conversion::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:18px;
        transform:translateX(-50%);
        width:min(1180px, calc(100% - 140px));
        height:170px;
        border-radius:34px;
        background:
            radial-gradient(circle at 20% 50%, rgba(57,189,255,.18), transparent 42%),
            radial-gradient(circle at 80% 45%, rgba(20,120,255,.16), transparent 44%),
            linear-gradient(180deg, rgba(255,255,255,.88), rgba(235,243,250,.96));
        box-shadow:
            0 18px 45px rgba(26, 72, 120, .08),
            inset 0 1px 0 rgba(255,255,255,.85);
        z-index: 0;
        pointer-events:none;
    }

    .bvc-conversion-shell{
        position: relative;
        z-index: 2;
        width: min(1260px, 100%);
        min-height: 680px;
        grid-template-columns: minmax(0,47%) minmax(0,53%);
        border-radius: 26px;
        overflow: hidden;
        box-shadow: 0 22px 60px rgba(20,55,90,.12);
        margin: 0 auto;
    }

    .bvc-conversion-info{
        min-height: 680px;
        padding: 34px 44px;
    }

    .bvc-conversion-copy{
        padding: 26px 0 18px;
    }

    .bvc-conversion-copy h1{
        font-size: clamp(36px, 3vw, 48px);
        line-height: 1.08;
        max-width: 520px;
        margin-bottom: 18px;
    }

    .bvc-conversion-lead{
        max-width: 500px;
        font-size: 14px;
        line-height: 1.75;
    }

    .bvc-conversion-trust{
        margin-top: 22px;
        gap: 12px;
    }

    .bvc-conversion-trust .item,
    .bvc-conversion-trust li{
        font-size: 14px;
    }

    .bvc-conversion-form-side{
        min-height: 680px;
        padding: 28px 34px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .bvc-form-card{
        width: min(100%, 590px);
        padding: 30px 32px;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(15,23,42,.05);
    }

    .bvc-form-head h2{
        font-size: 30px;
        line-height: 1.18;
        margin-bottom: 10px;
    }

    .bvc-form-head p{
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .bvc-lead-form{
        gap: 12px;
    }

    .bvc-field label{
        font-size: 14px;
        margin-bottom: 6px;
    }

    .bvc-field input,
    .bvc-field select,
    .bvc-field textarea{
        height: 46px;
        font-size: 14px;
        border-radius: 12px;
    }

    .bvc-checkbox{
        margin-top: 4px;
        margin-bottom: 2px;
        font-size: 13px;
    }

    .bvc-conversion-submit{
        height: 52px;
        border-radius: 999px;
        font-size: 15px;
    }

    .bvc-mini-trust{
        width: min(100%, 590px);
        margin-top: 10px;
        font-size: 13px;
    }
}

/* laptop thấp */
@media (min-width:861px) and (max-height:860px){
    body.bvc-conversion{
        align-items:flex-start;
        padding-top:20px;
        padding-bottom:24px;
    }

    .bvc-conversion-shell,
    .bvc-conversion-info,
    .bvc-conversion-form-side{
        min-height: 650px;
    }
}


/* =========================================================
   BIVACO CONVERSION REAL LOGO
   ========================================================= */

.bvc-conversion-brand{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
}

.bvc-conversion-brand-logo{
    display:block !important;
    width:285px !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

/* bỏ cấu trúc logo giả cũ */
.bvc-conversion-brand-mark{
    display:none !important;
}

@media(max-width:860px){

    .bvc-conversion-brand-logo{
        width:235px !important;
    }

}