/* 
   LDG FRAME 1 - STYLING (100% EXACT FROM TEST HTML) 
*/
:root {
    --button-gradient: linear-gradient(140deg, rgba(210, 112, 0, 1) 0%, rgba(255, 187, 111, 1) 100%) !important;
    --white: #FFFFFF !important;
}

.figma-frame-1 {
    width: 100% !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    aspect-ratio: 1920 / 829 !important;
    background-image: var(--bg-desktop, url('../../../assets/images/bg_hero.png')) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #fff !important;
    container-type: inline-size !important;
}

/* Wrapper: fills frame1; desktop uses it as flow context, tablet/mobile children remain absolute against it */
.frame1-content-stack {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.frame1-title-1 {
    position: absolute !important;
    left: 50px !important;
    top: 4.34cqw !important;
    color: #FE9D1C !important;
    font-weight: 800 !important;
    font-size: var(--t1-fz-d, 2.54cqw) !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05cqw !important;
    -webkit-text-stroke: 1px #000 !important;
    text-stroke: 1px #000 !important;
    z-index: 5 !important;
}

.frame1-title-2 {
    position: absolute !important;
    left: 50px !important;
    top: 9.64cqw !important;
    padding-top: 1cqw !important;
    color: #D27000 !important;
    font-weight: 800 !important;
    font-size: var(--t2-fz-d, 6.37cqw) !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    letter-spacing: 0.1cqw !important;
    background: linear-gradient(90deg, #D27000 0%, #FF9E1D 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    z-index: 5 !important;
}

.frame1-subtitle {
    position: absolute !important;
    left: 50px !important;
    top: 19.92cqw !important;
    width: 50cqw !important;
    color: #1F1F1F !important;
    font-weight: 500 !important;
    font-size: 1.59cqw !important;
    line-height: 1.4 !important;
    text-align: justify !important;
    z-index: 5 !important;
}

.cta-button {
    position: absolute !important;
    left: calc(50px + 11.042cqw) !important;
    top: 30.93cqw !important;
    width: 27.916cqw !important;
    height: 5.677cqw !important;
    background: var(--button-gradient) !important;
    border-radius: 100cqw !important;
    box-shadow: 0px 0.1cqw 1.66cqw 0px rgba(0, 0, 0, 0.25) !important;
    display: flex !important; 
    align-items: center !important; 
    text-decoration: none !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease !important;
    z-index: 10 !important;
}

.cta-button:hover { 
    transform: scale(1.02) !important; 
    filter: brightness(1.1) !important; 
}

.button-icon-wrapper {
    position: absolute !important; 
    left: 0.989cqw !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    width: 3.69cqw !important; 
    height: 3.69cqw !important; 
    background-color: var(--white) !important;
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
}

.button-icon-wrapper img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
    border-radius: 50% !important; 
}

.button-text {
    position: absolute !important;
    left: 5.67cqw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    font-size: 1.666cqw !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

@media screen and (max-width: 1199px) {
    .figma-frame-1 {
        aspect-ratio: 1024 / 415 !important;
        background-image: var(--bg-tablet, url('../../../assets/images/bg_tablet.png')) !important;
    }
    .frame1-title-1 {
        left: 50px !important;
        top: 5.05cqw !important;
        font-size: var(--t1-fz-t, 3cqw) !important;
    }
    .frame1-title-2 {
        left: 50px !important;
        top: 8.74cqw !important;
        font-size: var(--t2-fz-t, 5.2cqw) !important;
    }
    .frame1-subtitle {
        left: 50px !important;
        top: 17.5cqw !important;
        width: 50cqw !important;
        font-size: 1.45cqw !important;
        line-height: 1.5 !important;
    }
    .cta-button {
        left: 7.56cqw !important;
        top: 25.57cqw !important;
        width: 27.83cqw !important;
        height: 5.66cqw !important;
    }
    .button-icon-wrapper {
        left: 0.98cqw !important;
        width: 3.68cqw !important;
        height: 3.68cqw !important;
    }
    .button-text {
        left: 5.66cqw !important;
        font-size: 1.66cqw !important;
    }
}

@media screen and (max-width: 767px) {
    .figma-frame-1 {
        aspect-ratio: 440 / 724 !important;
        background-image: var(--bg-mobile, url('../../../assets/images/bg_mobile.png')) !important;
    }
    /* Mobile uses flow layout so title-2 multi-line pushes subtitle/button down */
    .frame1-content-stack {
        padding-top: 7.27cqw !important;
    }
    .frame1-title-1 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-left: 3.8636cqw !important;
        text-align: left !important;
        font-size: var(--t1-fz-m, 5.64cqw) !important;
    }
    .frame1-title-2 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-left: 3.8636cqw !important;
        margin-top: 1.3cqw !important;
        padding-top: 0 !important;
        text-align: left !important;
        font-size: var(--t2-fz-m, 10.73cqw) !important;
    }
    .frame1-subtitle {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 1.18cqw 0 0 3.8636cqw !important;
        width: 92.2727cqw !important;
        max-width: 92.2727cqw !important;
        text-align: justify !important;
        font-size: 4.09cqw !important;
        line-height: 1.38 !important;
    }
    .cta-button {
        position: absolute !important;
        left: 14.77cqw !important;
        top: calc(50% - 18.405cqw) !important;  /* đẩy lên 1 chiều cao button: cũ calc(50% - 6.135cqw) */
        margin: 0 !important;
        width: 70.22cqw !important;
        height: 12.27cqw !important;
    }
    .button-icon-wrapper {
        left: 2.12cqw !important;
        width: 7.95cqw !important;
        height: 7.95cqw !important;
    }
    .button-text {
        left: 11.59cqw !important;
        font-size: 4.54cqw !important;
    }
}