body *
{
    font-family: 'Inter';
}
.title-logoo
{
    font-size: 24px;
    font-weight: 600;
}
.content
{
    position: relative
}
section.introduce{
    width: 100%;
    height: auto;
    background: url(/sites/amis/images/pages/hrm-target/background-hero.webp) no-repeat center;
    background-size: cover;	
    padding-top: 96px;
	padding-bottom: 96px;
    
    .introduce-container{
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        .introduce-title
        {
            width: 100%;
            margin: 0 auto;
            background: var(--Gradient-Base-AI, linear-gradient(76deg, var(--Blue-600, #1B49F5) 0%, var(--Violet-600, #7839EE) 62.45%, var(--Red-300, #FDA29B) 130.54%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            font-size: var(--Fontsize-Large-title-Title-Hero, 52px);
            font-style: normal;
            font-weight: 700;
            line-height: var(--Line-height-2xxl, 60px); /* 115.385% */
            letter-spacing: var(--Letter-spacing-None, 0);
            font-family: 'Inter Bold';
        }
        .introduce-title-sub
        {
            margin-bottom: 16px;
            color: var(--Text-Primary, #181D27);
            text-align: center;
            font-size: var(--Fontsize-Large-title-Title-Hero, 52px);
            font-style: normal;
            font-weight: 700;
            line-height: var(--Line-height-2xxl, 60px); /* 115.385% */
            letter-spacing: var(--Letter-spacing-None, 0);
            font-family: 'Inter Bold';
        }
        .introduce-title-desc
        {
            color: #4B5563;
            text-align: center;
            margin-bottom: 32px;
        }
        .introduce-button
        {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-16, 16px);
            margin-bottom: 48px;
            height: 52px;
            .introduce-button-purchase
            {
                border-radius: var(--radius-l, 12px);
                background: linear-gradient(68deg, var(--Brand-600, #1B49F5) 0%, var(--Brand-400, #5993FF) 131.14%);
                display: flex;
                min-width: 140px;
                padding: var(--space-14, 14px) var(--space-24, 24px);
                justify-content: center;
                align-items: center;
                gap: var(--space-4, 4px);
                color: white;
                color: var(--Text-White, #FFF);
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: var(--Line-height-s, 24px); /* 150% */
                letter-spacing: var(--Letter-spacing-Default, -0.2px);
                .introduce-button-purchase-icon
                {
                    width: 20px;
                    height: 20px;
                    background: url(/sites/amis/images/pages/hrm-target/arrow_right.webp) no-repeat center;
                    background-size: contain;
                }
            }
            .introduce-button-try
            {
                display: flex;
                min-width: 140px;
                padding: var(--space-14, 14px) var(--space-24, 24px);
                justify-content: center;
                align-items: center;
                gap: var(--space-4, 4px);
                border-radius: var(--radius-l, 12px);
                border: 2px solid #1B49F5;
                background: var(--Base-White, #FFF);
                backdrop-filter: blur(12px);
                color: var(--Brand-600, #1B49F5);
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: var(--Line-height-s, 24px); /* 150% */
                letter-spacing: var(--Letter-spacing-Default, -0.2px);
            }
            
        }
        .introduce-form
        {
            display: flex;
            height: 580px;
            gap: 32px;
            .introduce-form-left
            {
                display: flex;
                flex: 3;
                height: 580px;
                width: auto;
            }
            .introduce-form-right
            {
                height: 580px;
                flex: 2;
                padding: var(--space-32, 32px) var(--space-40, 8px);
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--space-24, 24px);
                flex-shrink: 0;
                border-radius: var(--radius-3xl, 24px);
                border: 3px solid #8EB9FF;
                background: var(--Background-Base, #FFF);
                .introduce-form-right-title
                {color: var(--Text-Primary, #181D27);
                    text-align: center;
                    font-size: var(--Fontsize-Title-Title-3, 20px);
                    font-style: normal;
                    font-weight: 600;
                    line-height: var(--Line-height-m, 28px); /* 140% */
                    letter-spacing: var(--Letter-spacing-None, 0);
                }
            }
        }
    }
}
section.content{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 96px;
    .sc-1
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        padding-top: 96px;
        .sc-1-title
        {
            .sc-1-title-author
            {
                color: var(--Text-Primary, #181D27);
                text-align: center;
                font-size: var(--Fontsize-Subtitle-1-Subtitle-Semibold, 20px);
                font-style: normal;
                font-weight: 600;
                line-height: var(--Line-height-m, 28px); /* 140% */
                letter-spacing: var(--Letter-spacing-None, 0);
            }
        }
        .sc-1-box
        {
            display: flex;
            gap: 32px;
            padding: 40px 0;
            ul
            {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--space-12, 12px);
                align-self: stretch;
            }
            li
            {
                position: relative;
                list-style-type: none;
                padding-left: 30px;
                overflow: hidden;
                color: var(--Text-Tertiary, #535862);
                text-overflow: ellipsis;
                font-size: var(--Fontsize-Body-base-Regular, 16px);
                font-style: normal;
                font-weight: 400;
                line-height: var(--Line-height-s, 24px); /* 150% */
                letter-spacing: var(--Letter-spacing-Default, -0.2px);
                padding-bottom: 0;
                margin-left: 0;
            }
            .sc-1-box-left
            {
                display: flex;
                padding: var(--space-24, 24px);
                flex-direction: column;
                align-items: center;
                gap: 24px;
                flex: 1;
                border-radius: var(--radius-3xl, 24px);
                background: linear-gradient(180deg, #FFF3EC 2.88%, rgba(255, 255, 255, 0.00) 100%);
                .sc-1-box-icon-inner
                {
                    background: url(/sites/amis/images/pages/hrm-target/dislike.webp) no-repeat center;
                    background-size: cover;
                }
                .sc-1-box-title-left{
                    color: var(--Red-500, #F04438);
                }
                li::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    background: url(/sites/amis/images/pages/hrm-target/icon-x.webp) no-repeat center;
                    background-size: cover;
                }
                
            }
            .sc-1-box-right
            {
                display: flex;
                padding: var(--space-24, 24px);
                flex-direction: column;
                align-items: center;
                gap: 24px;
                flex: 1;
                border-radius: var(--radius-3xl, 24px);
                background: linear-gradient(180deg, #E1EAFA 0%, rgba(255, 255, 255, 0.00) 100%);
                .sc-1-box-icon-inner
                {
                    background: url(/sites/amis/images/pages/hrm-target/like.webp) no-repeat center;
                    background-size: cover;
                }
                .sc-1-box-title-right{
                    color: var(--Blue-500, #2662FF);
                }
                li::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    background: url(/sites/amis/images/pages/hrm-target/icon-tick.webp) no-repeat center;
                    background-size: cover;
                }
            }
            .sc-1-box-icon 
            {
                display: flex;
                width: 100px;
                height: 100px;
                padding: 15px;
                flex-direction: column;
                align-items: center;
                border-radius: 50%;
                border: 2 solid var(--Border-White, #FFF);
                background: rgba(255, 255, 255, 0.10);
                box-shadow: 0 3px 50px 0 rgba(10, 27, 137, 0.12);
                backdrop-filter: blur(50px);

            }
            .sc-1-box-icon-inner{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-radius: 50%;
                border: 2 solid var(--Border-White, #FFF);
                background: rgba(255, 255, 255, 0.10);
                box-shadow: 0 3px 50px 0 rgba(10, 27, 137, 0.12);
                backdrop-filter: blur(50px);
            }
            .sc-1-box-title{
                font-size: var(--Fontsize-Title-Title-2, 24px);
                font-style: normal;
                font-weight: 700;
                line-height: var(--Line-height-m, 28px); /* 116.667% */
                letter-spacing: var(--Letter-spacing-Default, -0.2px);
            }
        }
    }
    .sc-2
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        .sc-2-wrapper
        {
            background: url(/sites/amis/images/pages/hrm-target/sc2-bg.webp) no-repeat center;
            background-size: cover;
            border-radius: var(--radius-3xl, 24px);
            padding-top: 72px;
            margin-bottom: 32px;
            .sc-2-title{
                margin-bottom: 40px;
            }
        }
        .sc-2-video
        {
            text-align: center;
            width: 80%; max-width: 1280px;
            height: auto;
            margin: 0 auto;
        }
    }
    .sc-3{
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        display: flex;
        gap: 64px;
        .sc-3-left
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-32, 32px);
            justify-content: center;

            .sc-3-left-text
            {
                .sc-3-left-text-kpi
                {
                    display: flex;
                    width: 50%;

                    .sc-3-left-text-kpi-item-wrapper
                    {
                        width: 50%;
                        .sc-3-left-text-kpi-item
                        {
                            display: flex;
                            gap: 8px;
                            margin-top: 16px;
                        }
                    }
                    
                }
            }
        }
        .sc-3-right
        {
            flex: 1;
        }
    }
    .sc-4
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        display: flex;
        gap: 64px;
        .sc-4-left
        {
            flex: 1;
        }
        .sc-4-right
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;
            .sc-4-left-text-kpi-item
            {
                display: flex;
                gap: 8px;
            }
        }
    }
    .sc-5
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        display: flex;
        gap: 64px;
        .sc-5-left
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;
            .sc-5-left-text-kpi-item
            {
                display: flex;
                gap: 8px;
            }
        }
        .sc-5-right
        {
            flex: 1;
        }
    }
    .sc-6
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        display: flex;
        gap: 64px;
        .sc-6-right
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;
            .sc-6-left-text-kpi-item
            {
                display: flex;
                gap: 8px;
            }
        }
        .sc-6-left
        {
            flex: 1;
        }
    }
    .sc-7
    {
        padding: 96px 0 96px 0;
        border-radius: var(--radius-3xl, 24px);
        background: radial-gradient(34.6% 67.53% at 47.68% 58.26%, rgba(143, 115, 255, 0.30) 0%, rgba(201, 173, 245, 0.00) 81.25%), radial-gradient(444.42% 181.26% at -9.27% 133.55%, rgba(242, 246, 255, 0.40) 16.29%, var(--Brand-100, rgba(217, 230, 255, 0.40)) 29.37%, rgba(168, 213, 255, 0.20) 48.45%, rgba(236, 233, 254, 0.00) 100%), radial-gradient(327.92% 159.17% at 111.95% -5.11%, rgba(255, 247, 240, 0.40) 0%, rgba(255, 216, 200, 0.20) 9.41%, rgba(255, 143, 96, 0.20) 27.14%, rgba(255, 225, 212, 0.20) 55.23%, rgba(236, 233, 254, 0.00) 71.02%), #FFF;
        /* background: url(/sites/amis/images/pages/hrm-target/sc-7-bg.webp) no-repeat center;
        background-size: cover; */
        .sc-7-title-highlight
        {
            background: var(--Gradient-Base-AI, linear-gradient(76deg, var(--Blue-600, #1B49F5) 0%, var(--Violet-600, #7839EE) 62.45%, var(--Red-300, #FDA29B) 130.54%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        .sc-7-wrapper
        {
            width: 80%; max-width: 1280px;
            height: 600px;
            margin: 40px auto 0 auto;
        }
        .sc-7-description
        {
            margin-top: 12px;
            margin-bottom: 32px;
        }
    }
    .sc-8
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        .sc-title{
            margin-bottom: 0;
        }
        .sc-8-trophy
        {
            margin-top: 40px;
            display: flex;
            flex-direction: row;
            gap: 32px;
            justify-content: center;
            align-items: center;
            .sc-8-trophy-item
            {
                width: 230px;
                height: 140px;
                padding: 22px 20px;
                border-radius: var(--radius-xl, 16px);
                border: 3px solid var(--Border-Gradient-white, rgba(255, 255, 255, 0.60));
                background: var(--Text-White, #FFF);
                box-shadow: 0 8px 30px -6px rgba(116, 135, 255, 0.05), 0 8px 30px -4px rgba(10, 27, 137, 0.03);
            }
            .item-1
            {
                background: url(/sites/amis/images/pages/hrm-target/iso.webp) no-repeat center;
                background-size: cover;
            }
            .item-2
            {
                background: url(/sites/amis/images/pages/hrm-target/cmmi.webp) no-repeat center;
                background-size: cover;
            }
            .item-3
            {
                background: url(/sites/amis/images/pages/hrm-target/iso-2.webp) no-repeat center;
                background-size: cover;
            }
            .item-4
            {
                background: url(/sites/amis/images/pages/hrm-target/csa-tar.webp) no-repeat center;
                background-size: cover;
            }
            .item-5
            {
                background: url(/sites/amis/images/pages/hrm-target/ncsc.webp) no-repeat center;
                background-size: cover;
            }
        }
    }
    .sc-9
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        .sc-9-trophy
        {
            margin: 40px 0 0 0;
        }
        .sc-9-trophy-item
        {
            width: 267px;
            height: 310px;
        }
        .sc-9-trophy-item:hover
        {
            background: url(/sites/amis/images/pages/hrm-target/bg-circle.png) no-repeat center;
            background-size: cover;
        }
    }
    .sc-10
    {
        width: 80%; max-width: 1280px;
        margin: 0 auto;
        
        .sc-10-grid
        {
            display: inline-grid;
			width: 100%;
            padding: var(--space-0, 0);
            row-gap: var(--space-32, 32px);
            column-gap: var(--space-32, 32px);
            grid-template-rows: repeat(2,fit-content(100%));
            grid-template-columns: repeat(4,minmax(0,1fr));
            margin-top: 40px;
            .sc-10-grid-item
            {
                min-width: 200px;
                min-height: 200px;
                border-radius: 16px;
            } 
        }
    }
    .sc-11
    {
        background: url(/sites/amis/images/pages/hrm-target/sc-11-bg.webp) no-repeat center;
        background-size: contain;
        position: relative;
        .sc-11-wrapper
        {
            width: 80%; max-width: 1280px;
            margin: 96px auto 96px auto;
            display: flex;
            img{
                position: absolute;
                bottom: 0;
                left: 40%;
                width: 450px;
            }
            .sc-11-left
            {
                flex: 2;
                position: relative;
                .sc-11-left-title
                {
                    color: var(--Text-White, #FFF);
                    font-size: 32px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 40px; /* 125% */
                    letter-spacing: var(--Letter-spacing-Default, -0.2px);
                }
                .sc-11-left-content
                {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    margin-top: 32px;
                }
                .sc-11-left-content-item
                {
                    display: flex;
                    gap: 8px;
                    color: white;
                }
            }
            .sc-11-right
            {
                flex: 1;
                padding: 32px 8px 12px;
                border-radius: var(--radius-3xl, 24px);
                background: white;
                min-height: 500px;
                .sc-11-right-title
                {
                    color: var(--Text-Primary, #181D27);
                    text-align: center;
                    font-size: var(--Fontsize-Title-Title-3, 20px);
                    font-style: normal;
                    font-weight: 600;
                    line-height: var(--Line-height-m, 28px); /* 140% */
                    letter-spacing: var(--Letter-spacing-None, 0);
                }
            }
        }
    }
}
/*#region common */
.sc-btn
{
    display: flex;
    gap: 16px;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 52px;
}
.text-left
{
    text-align: left !important;
}
.text-center
{
    text-align: center !important;
}
.icon-tick-white
{
    width: 24px;
    height: 24px;
    background: url(/sites/amis/images/pages/hrm-target/icon-tick-white.webp) no-repeat center;
    background-size: cover;
}
.icon-tick-blue
{
    width: 24px;
    height: 24px;
    background: url(/sites/amis/images/pages/hrm-target/icon_tick_blue.webp) no-repeat center;
    background-size: cover;
    flex-shrink: 0;
}
.icon-arrow-right-blue{
    display: block;
    width: 24px;
    height: 24px;
    background: url(/sites/amis/images/pages/hrm-target/arrow-right-blue.webp) no-repeat center;
    background-size: cover;
}
a{
    text-decoration: none;
}
.sc-title
{
    text-align: center;
    color: var(--Text-Secondary, #252B37);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 125% */
    letter-spacing: var(--Letter-spacing-Default, -0.2px);
    margin-bottom: 12px;
}
.sc-description
{
    color: var(--Text-Tertiary, #535862);
    text-align: center;
    font-size: var(--Fontsize-Subtitle-1-Subtitle-Regular, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-m, 28px); /* 140% */
    letter-spacing: var(--Letter-spacing-None, 0);

}
.sc-10-description{
    margin-top: 12px;
}
/*#endregion */

/*#region button */
.btn-try
{
    display: flex;
    min-width: 140px;
    padding: var(--space-14, 14px) var(--space-24, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--space-4, 4px);
    border-radius: var(--radius-l, 12px);
    background: linear-gradient(68deg, var(--Brand-600, #1B49F5) 0%, var(--Brand-400, #5993FF) 131.14%);
    color: var(--Text-White, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-s, 24px); /* 150% */
    letter-spacing: var(--Letter-spacing-Default, -0.2px);
}
.btn-instruction
{
    display: flex;
    min-width: 140px;
    padding: var(--space-14, 14px) var(--space-24, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--space-4, 4px);
    border-radius: var(--radius-l, 12px);
    border: 2px solid #1B49F5;
    background: var(--Base-White, #FFF);

    /* Backdrop blurs/lg */
    backdrop-filter: blur(12px);
    color: var(--Brand-600, #1B49F5);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-s, 24px); /* 150% */
    letter-spacing: var(--Letter-spacing-Default, -0.2px);
}
.btn-purchase
{
    display: flex;
    justify-content: center;
    gap: 4px;
    min-width: 140px;
    align-items: center;
    padding: var(--space-14, 14px) 0;
    color: var(--Text-Brand, #2662FF);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-s, 24px); /* 150% */
    letter-spacing: var(--Letter-spacing-Default, -0.2px);
    box-shadow: 0 8px 30px -6px rgba(116, 135, 255, 0.05), 0 8px 30px -4px rgba(10, 27, 137, 0.03);
    background: white;
    border-radius: 12px;
}
.owl-nav
{
    display: flex;
    justify-content: center;
}
/*#endregion*/

/*#region responsive*/
@media (min-width: 1100px) {

}
@media (max-width: 979px) {

}
@media screen and (max-width: 1280px) {
  .introduce-title,
  .introduce-title-sub{
    font-size: 47px !important;
  }
}
@media screen and (max-width: 1366px) {
  .introduce-title,
  .introduce-title-sub{
    font-size: 50px !important;
  }
}
/*#endregion*/

/*#region responsive - tablet & mobile (<1024px) */
@media screen and (max-width: 1024px) {
    .sc-11 img{
        display: none;
    }
  .introduce-container {
    width: 92% !important;
  }
  .introduce-title,
  .introduce-title-sub {
    font-size: 40px !important;
    line-height: 48px !important;
  }
  .introduce-title-desc {
    font-size: 16px !important;
  }
  .introduce-form {
    flex-direction: column !important;
    height: auto !important;
    gap: 24px !important;
  }
  .introduce-form-left {
    min-height: 280px !important;
  }
  .introduce-form-right {
    padding: 24px !important;
  }

  section.content {
    gap: 64px !important;
  }
  .sc-1,
  .sc-2,
  .sc-3,
  .sc-4,
  .sc-5,
  .sc-6,
  .sc-7-wrapper,
  .sc-8,
  .sc-9,
  .sc-10,
  .sc-11-wrapper {
    width: 92% !important;
  }
  .sc-2-video {
    width: 100% !important;
  }
  .sc-2-video iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  .sc-3,
  .sc-4,
  .sc-5,
  .sc-6 {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .sc-3-right,
  .sc-4-left,
  .sc-5-right,
  .sc-6-left {
    width: 100% !important;
    height: 320px !important;    
    order: -1 !important;
  }
  .sc-3-left,
  .sc-4-right,
  .sc-5-left,
  .sc-6-right {
    order: 2 !important;
  }
  .sc-3-left-text-kpi {
    width: 100% !important;
  }
  .sc-7-wrapper {
    height: 400px !important;
  }
  .sc-8-trophy {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  .sc-9-trophy-item {
    width: 220px !important;
    height: 243px !important;
  }
  .sc-10-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, fit-content(100%)) !important;
  }
  .sc-11-wrapper {
    flex-direction: column !important;
    gap: 40px !important;
    margin: 64px auto !important;
  }
  .sc-title {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  .sc-description {
    font-size: 18px !important;
  }
}

@media screen and (max-width: 768px) {
  .sc-1 {
    padding-top: 56px !important;
  }
  section.content {
    gap: 56px !important;
  }
  .introduce-title,
  .introduce-title-sub {
    font-size: 30px !important;
    line-height: 38px !important;
  }
  .introduce-button {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
  }
  .introduce-button-purchase,
  .introduce-button-try {
    min-width: 45% !important;
    padding: 12px 16px !important;
  }
  .sc-1-box {
    flex-direction: column !important;
  }
  .sc-1-box-icon,
  .sc-1-box-icon-inner {
    /* width: 72px !important;
    height: 72px !important; */
  }
  .sc-btn {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 12px !important;
  }
  .btn-try,
  .btn-instruction,
  .btn-purchase {
    min-width: 45% !important;
    padding: 12px 16px !important;
  }
  .sc-7 {
    padding: 56px 16px !important;
    
  }
  .sc-7-wrapper {
    height: 280px !important;
  }
  .sc-9-trophy-item {
    width: 180px !important;
    height: 199px !important;
  }
  
  .sc-10-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, fit-content(100%)) !important;
  }
  .sc-11 {
    width: 94%;
  }
  .sc-11-wrapper {
    margin: 56px auto !important;
  }
  .sc-title {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .nowrap {
    white-space: normal !important;
  }
  .sc-btn{
    display: grid;
  }
  .sc-btn a:first-child{
    grid-column: 1 / span 2;
  }
  .sc-2 .sc-btn a:first-child{
    grid-column: unset;
  }
}

@media screen and (max-width: 480px) {
  .introduce-container,
  .sc-1,
  .sc-2,
  .sc-3,
  .sc-4,
  .sc-5,
  .sc-6,
  .sc-7-wrapper,
  .sc-8,
  .sc-9,
  .sc-10,
  .sc-11-wrapper {
    width: 94% !important;
  }
  .introduce-title,
  .introduce-title-sub {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .introduce-button-purchase,
  .introduce-button-try,
  .btn-try,
  .btn-instruction,
  .btn-purchase {
    min-width: 100% !important;
  }
  .sc-8-trophy {
    gap: 16px !important;
  }
  .sc-8-trophy-item {
    width: 130px !important;
    height: 66px !important;
  }
  .sc-9-trophy-item {
    width: 140px !important;
    height: 155px !important;
  }
  .sc-10-grid {
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
  .sc-10-grid-item {
    min-width: 0 !important;
    min-height: 140px !important;
  }
  .sc-title {
    font-size: 20px !important;
    line-height: 28px !important;
  }
  .sc-description {
    font-size: 15px !important;
  }
  .sc-7-wrapper {
    height: 200px !important;
  }
  .sc-3-right,
  .sc-4-left,
  .sc-5-right,
  .sc-6-left {
    height: 220px !important;
  }
}
/*#endregion*/

/* #region Customer */
.customer-wrap {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.customer-item {
    width: 296px;
    box-shadow: 0 2px 20px -6px rgba(116, 135, 255, 0.12), 0 12px 46px -4px rgba(10, 27, 137, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.customer-item-head {
    font-family: Inter SemiBold;
    font-size: 18px;
    color: #FFF;
    padding: 8px 16px;
    background-color: #1451E1;
    text-align: center;
}

.customer-item-content {
    padding: 16px 16px 36px;
}

@media (max-width: 979px) {
    .customer-wrap {
        padding-top: 30px;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .customer-wrap {
        padding-top: 24px;
    }

    .customer-item-head {
        font-size: 16px;
    }
}
@media (max-width: 1380px) {
  .sc-btn{
    display: grid;
    height: auto;
  }
  .sc-btn a:first-child{
    grid-column: 1 / span 2;
  }
}

/* #endregion */

/** ========================= Hiệu ứng ================================ **/
/* animation button bonus */
.bordermove {
    position: relative;
    overflow: visible;
    /* display: inline-block; */
}

/* Content ben trong button luon hien thi tren ::before */
.bordermove > * {
    position: relative;
    z-index: 1;
}

/* Pseudo element tao shadow */
.bordermove::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient( 90deg, #ff6ec4, #7873f5, #22d3ee, #4ade80, #ff6ec4 );
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    filter: blur(3px);
    transition: opacity 0.3s ease;
}

/* Hover */
.bordermove:hover::before {
    opacity: 1;
    animation: shadowMove 4s linear infinite;
}

/* Animation chay gradient */
@keyframes shadowMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}
.bordermove img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.bordermove:hover img {
  transform: translateX(4px);
}


/* Hieu ung gradient border khi hover cho nut Mua ngay o banner */

.ai-btn {
    outline: none !important;
    /* border: 2px solid #1B49F5; */
    /* transition: all 0.3s ease; */
    opacity: 1 !important;
    overflow: hidden;
}

/* Hover */
.ai-btn:hover {
    border: 2px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 90deg, #ff6ec4, #7873f5, #4ade80, #22d3ee, #ff6ec4 ) border-box !important;
    background-size: 200% 200% !important;
    animation: aiBtnBorderMove 3s linear infinite;
    border-radius: 12px;
}

/* Animation chạy gradient */
@keyframes aiBtnBorderMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}
.ai-btn img {
  transition: transform 0.3s ease;
}
.ai-btn:hover img {
  transform: translateX(4px);
}


/*==================== VIDEO ==================*/

.unified-panel {
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.unified-panel-content
{
  width: 80%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 490/250;
  
}
.unified-panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unified-panel .play-btn img {
  position: relative;
  z-index: 1;
  max-width: 64px;
  max-height: 64px;
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 10px solid #457BFC;
  background: transparent;
  animation: play-btn-pulse 1.6s ease-out infinite;
}

@keyframes play-btn-pulse {
   0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/*==================== VIDEO ==================*/

 /* ---- Video popup modal ---- */
.video-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-modal-overlay.is-open {
  display: flex;
}

.video-modal-box {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 10px;
  background: white;
  border-radius: 5px;
}

.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #1a2b3c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
/** ========================= Hiệu ứng ================================ **/
.owl-theme .owl-dots .owl-dot span {
    width: 16px;
    height: 16px;
    background: #E9EAEB;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #1451E1;
}
.owl-dots{
    margin-top: 40px !important;
}