:root{
    --primary-color: #2d3193;
    --secondary-color: #005BAA;
    --bg-color: #10137c;
    --gradient: linear-gradient(169deg, rgba(50,167,233,1) 0%, rgba(129,104,238,1) 35%, rgba(224,24,241,1) 100%);
    --magenta: #d507f4;
    --blue: #3496fe;
    --pink: #f5c8cd;
    }
    .carousel{
        opacity: 1;
        visibility: visible;
        transition: initial;
    }
    body{
        /* background: rgb(6,27,39);
        background: linear-gradient(166deg, rgba(182, 97, 214, 1), rgba(24, 25, 173, 1) 38%, rgba(152, 14, 137, 1) 72%, rgba(131, 27, 192, 1));
        background: url(../images/bg-body.jpg) no-repeat center bottom;
        background-size: 100%; */
        background-color: #f6dcdf;
        background-color: linear-gradient(to top, rgba(246, 183, 188, 1), rgb(242, 180, 185) 20.17%, rgba(248, 167, 172, 1) 56.3%, rgba(242, 118, 138, 1));
    
    }
    strong{ font-weight: 500;}
    section{background:transparent;}
    #header.header-modern:not(.header-active) .header-inner{
    background: #fff;
    border-radius: 50px;
    }
    #header.header-modern:not(.header-active){ margin: 30px auto 0;}
    #header.header-modern:not(.header-active) + .inspiro-slider, #header.header-modern:not(.header-active) + #slider,
    #header.header-modern:not(.header-active) + .fullscreen, #header.header-modern:not(.header-active) + .halfscreen,
    #header.header-modern:not(.header-active) + #google-map{
    top: -110px;
    margin-bottom: -110px;
    }
    
    .text-magenta{ color:var(--magenta); }
    .text-blue{ color: #3496fe !important; }
    #slider{ background:transparent; }
    a:hover{ cursor:pointer; }
    
    body,
    p,
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
    #mainMenu nav > ul > li > a,
    #footer p,
    #footer,
    #page-title .page-title > h1{
        font-family: var(--font-barlow-condensed), var(--font-noto-sans-thai), sans-serif;
        letter-spacing: 0;
    }
    .font-custom{ font-family: var(--font-barlow-condensed), var(--font-noto-sans-thai), sans-serif !important;}
    
    body, p{
        font-size: 19px;
        color: #232729;
        line-height: 1.45;
        font-weight: 400;
    }
    #header.header-sticky.sticky-active .header-inner,
    #header.header-sticky.sticky-active #header-wrap{
    border-radius: 0;
    }
    
    ul.inline{ display: inline-block; }
    ul.inline li{ display: inline-block; float: left; }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ letter-spacing: 0; font-weight: 500;}
    a.btn:not([href]):not([tabindex]).btn-rounded, .btn.btn-rounded{ border-radius: 3em !important; }
    .btn{ line-height: 50px; padding: 0 40px; font-size: 15px;}
    
    .cOrange, .cOrg{ color: #f1982a; }
    .cDark{ color: #404041; }
    .cGray{ color: #6d6f71; }
    
    #search .btn-search-close{ background: #404041; }
    button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
        padding: 0 18px;
        line-height: 40px;
        color: #fff;
        background: transparent;
        border-radius: 50px;
        min-width: 140px;
        font-family: var(--font-barlow-condensed), var(--font-noto-sans-thai), sans-serif;
    }
    button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]), .flickity-button{
    border: none;
    border-radius: 30px;
    color: #fff !important;
    line-height: 40px;
    background: var(--gradient);
    border: none !important;
    line-height: 44px;
    font-size: 20px;
    font-weight: 500;
    }
    .btn:hover, button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active,
    button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover,
    .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active,
    .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover,
    a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active,
    a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active{
    background: #d507f4 !important;
    /* background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);*/
    }
    .bg-gradient,
    .flickity-button:hover{
    background: var(--gradient);
    }
    .text-bg{
    background: rgb(229,120,31);
    background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
    color: #fff;
    line-height: 1;
    display: inline-block;
    border-radius: 5px;
    padding: 0 4px;
    }
    .text-bg-purple{
    position: relative;
    display: inline-block;
    background: url('../images/bg/text-bg-purple.jpg') no-repeat;
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    .text-bg-blue{
    position: relative;
    display: inline-block;
    background: url('../images/bg/text-bg-blue.jpg') no-repeat;
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    
    /* header */
    #header{position: relative;}
    #header .header-inner #logo a > img,
    #header #header-wrap #logo a > img{
    height: 60px;
    vertical-align: middle;
    }
    #header #header-wrap #logo a{ display: inline-block; }
    
    #slider{ position: relative;}
    /* #slider::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 200px;
    z-index: 2;
    background-color: #000;
    left: 0;
    top: 0;
    background: #061B26;
    background: linear-gradient(to top, rgba(6, 27, 38, 0) 13.45%, rgba(93, 13, 123, 1) 98.74%);
    } */
    #slider.inspiro-slider{ height: 100vh;}
    
    #search{
    height:300px;
    background: linear-gradient(169deg, rgba(50,167,233,1) 0%, rgba(129,104,238,1) 35%, rgba(224,24,241,1) 100%);
    color: #fff;
    }
    #search .search-form .text-muted{ color: #f2f2f2 !important; }
    #search .search-form .form-control,
    #search .search-form .form-control:focus{
    background: #fff;
    border-radius: 50px;
    padding: 0 30px;
    }
    #btn-search{
        width: 32px;
        height: 32px;
        line-height: 32px;
        vertical-align: middle;
        display: inline-block;
        border-radius: 50%;
        top: -5px;
        color: #fff;
        font-size: 15px;
        text-align: center;
    }
    #btn-search i{
        font-size: inherit;
        color: inherit;
    }
    #btn-search{
        background: var(--gradient);
        color: #fff;
    }
    
    .font18{ font-size: 18px; }
    .font20{ font-size: 20px; }
    .font-600{ font-weight: 500; }
    .w100{ width: 100%; }
    .w50{ width: 50%; display: inline-block; float: left; }
    
    a{ color: #27171F; }
    a:not(.btn):hover, a:not(.btn):focus, a:not(.btn):active{ color: #f1982a;}
    [class*="col-md-"]{ float: left; }
    a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active{
    color: var(--magenta);
    }
    .list-icon.list-icon-colored li:before, .list-icon.icon-list-colored i{
    color: #ffffff;
    }
    .text-link{
    display: inline-block;
    line-height: 24px;
    }
    .text-link i{
    display: inline-block;
    line-height: 24px;
    vertical-align: middle;
    }
    
    .link-custom{
    color: #f1982a;
    display: inline-block;
    line-height: 40px;
    }
    .link-custom span{
    display: inline-block;
    float: left;
    margin-right: 12px;
    }
    .right-circle{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #fcc013;
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    display: inline-block;
    }
    .right-circle i{ transition: all .2s ease-in-out;}
    a:hover > .right-circle i{ transform: translate(3px,0);}
    .text-lg{ font-weight: 800; font-size: 4.3em; }
    .text-md{ font-weight: 800; font-size: 3.3em; }
    .limit1, .limit2, .limit3, .limit4, .limit5{
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    }
    .limit1{-webkit-line-clamp: 1;}
    .limit2{-webkit-line-clamp: 2;}
    .limit3{-webkit-line-clamp: 3;}
    .limit4{-webkit-line-clamp: 4;}
    .limit5{-webkit-line-clamp: 5;}
    .inline{ display: inline-block; }
    .hvr-expand{ -webkit-transition: all ease-out 0.2s; -moz-transition: all ease-out 0.2s; -o-transition: all ease-out
    0.2s; transition: all ease-out 0.2s;}
    .hvr-expand:hover{ transform: scale(1.025);}
    
    .hvr-up{ -webkit-transition: all ease-out 0.2s; -moz-transition: all ease-out 0.2s; -o-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;}
    .hvr-up:hover{ transform: translate(0,-10px); box-shadow: 0 26px 23px rgba(51, 51, 51, 0.12);}
    
    .top-language{ float: left; }
    .top-language ul{ margin: 0; float: left;}
    .top-language ul li{
    margin-left: 5px;
    line-height: 80px;
    }
    .top-language ul li span{ display: none; }
    .top-language a{
    display: inline-block;
    border: 2px solid transparent;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    top: 5px;
    position: relative;
    }
    .top-language ul li.active > a{
    border: 2px solid #ddd;
    color: #ddd;
    }
    .top-language img{
    height: 100%;
    float: left;
    padding: 5%;
    }
    
    .top-contact{
    border-left: 1px solid rgba(148, 146, 146, 0.59);
    display: inline-block;
    margin-left: 15px;
    padding-left: 15px;
    line-height: 1;
    }
    .header-extras > ul > li{ margin-left: 10px; }
    
    .inspiro-slider .slide .slide-captions h1,
    .inspiro-slider .slide .slide-captions h4{
    color: #414141;
    }
    
    .text-bg{
    background: url('../images/text-bg.jpg') no-repeat;
    background-size: contain;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: initial;
    }
    
    /* MENU */
    #mainMenu nav > ul > li{ padding: 0 15px; }
    #mainMenu nav > ul > li > a{
        font-size: 1.3em;
        position: relative;
        font-weight: 600;
        padding: 0;
        line-height: 80px;
        display: inline-block;
        text-transform: inherit;
        color: rgba(40, 42, 108, 0.73);
    }
    .dropdown-menu{ font-size: 1em; }
    #mainMenu nav > ul > li.dropdown > a:after{
    font-family: inspiro-icons !important;
    content: "\e92e";
    font-size: 12px;
    }
    #mainMenu nav > ul > li.dropdown > a >span{ padding-right: 20px; }
    #mainMenu nav > ul > li.active > a{ color: var(--primary-color);}
    
    #mainMenu nav > ul > li:hover > a,
    #mainMenu nav > ul > li.dropdown:hover > a,
    #mainMenu nav > ul > li .dropdown-menu > li:hover > a,
    #mainMenu nav > ul > li .dropdown-menu > li.active > a{
        color: var(--primary-color) !important; 
    }
    #mainMenu nav > ul > li .dropdown-menu li{ 
        line-height: 40px;
        font-weight: 500;
        font-size: 1.5em;
    }
    
    /* sect-logo-brands */
    .sect-logo-brands{
    position: relative;
    background: var(--pink);
    overflow: initial;
    z-index: 3;
    padding: 40px 0;
    }
    /* .sect-logo-brands::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 130px;
    left: 0;
    background: url(../images/decor/top.png) no-repeat;
    background-size: 100%;
    top: -40%;
    z-index: 200;
    } */
    @media(max-width: 1455px){
        .sect-logo-brands::before{
            top: -30%;
        }
    }
    @media(max-width: 876px){
        .sect-logo-brands::before{
            top: -25%;
        }
    }
    @media(max-width: 577px){
        .sect-logo-brands::before{
            top: -17%;
        }
    }
    
    .headbar{
    position: relative;
    margin-bottom: 15px;
    }
    .headbar .htitle{
        font-size: 3.5em;
        font-family: var(--font), var(--font-noto-sans-thai), sans-serif !important;
        line-height: 1;
        color: #17181a;
        font-weight: 600;
        text-transform: uppercase;
        /* text-shadow: 2px 3px 1px #d18cde; */
    }
    .headbar .btn-right{
        position: absolute !important;
        top: 0;
        right: 15px;
        bottom: 0;
        margin: auto;
        height: -webkit-fit-content;
        padding: 0 15px;
        border-radius: 50px;
        background: transparent;
        border: 2px solid #000;
        color: #000 !important;
        font-size: 1.4em;
    }
    .headbar .btn-right::after{
        content: "";
        display: inline-flex;
        width: 27px;
        height: 27px;
        background: url(../images/icon/right-arrow.png) no-repeat;
        background-size: 100%;
        margin-left: 10px;
        vertical-align: middle;
        transition: all .3s ease-in-out;
    }
    /* .headbar .btn-right.light::after{ filter: brightness(1) invert(1); } */
    .headbar .btn-right:hover::after{ transform: translate(5px,0); }
    .headbar .btn-right:hover{
    border-color: #21b6f0;
    background: #21b6f0;
    box-shadow: -5.9869384765625px 10.84375px 19px rgba(210, 20, 215, 0.6);
    }
    
    .flickity-page-dots .dot:after{ background-color: #fff;}
    .flickity-page-dots .dot{ box-shadow: 0 0 0 2px #fff inset;}
    
    
    .social-icons li.social-facebook a:hover{background-color:#227df5!important;color: #fff; }
    .social-icons li.social-youtube a:hover{background-color:#ff0000!important;color: #fff; }
    .social-icons li.social-line a{background-color:#00c300 !important;color: #fff; }
    .social-icons li.social-x a{background-color:#000!important; color: #fff !important; }
    .social-icons li.social-x a img, .social-icons li.social-line a img{ filter: brightness(0) invert(1); }
    /* .social-icons li.social-tiktok a{background-color:#000!important;color: #fff; } */
    .social-icons li.social-linkedin a{background-color:#0b66c2!important;color: #fff; }
    .social-icons li.social-instagram a{
    background-color: transparent;
    background: url('../images/social/instagram-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    }
    .social-icons li.social-tiktok a{
    background-color: transparent;
    background: #000 url('../images/social/tiktok-bg.webp') no-repeat;
    background-size: 15px;
    background-position: center;
    }
    .social-icons li.social-tiktok a img{ opacity:0; }
    .image-icon-social{
    height: 24px;
    top: -1px;
    position: relative;
    filter: brightness(0);
    }
    .social-icons.social-icons-large li a{
        font-size: 23px;
        margin: 0 4px;
    }
    
    .social-icons.light .image-icon-social{filter: brightness(0) invert(1);}
    #topbar .image-icon-social, footer .social-icons li a:hover .image-icon-social{ filter: brightness(1) invert(1); }
    footer .social-icons li.social-line a:hover .image-icon-social { filter: brightness(0) invert(1); }
    .social-x a:hover{color:#0766c2; }
    footer .social-icons li.social-instagram a:hover{ color:#fff; }
    .social-icons li:hover img { -webkit-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards;}
    .image-icon-whatsapp{ width: 48px;}
    
    
    .head_title{
    margin-top: 30px;
    color: #fcc013;
    font-weight: 300;
    }
    
    /* Headbanner */
    .inspiro-slider .container{
        position: absolute !important;
        bottom: 40px;
        left: 0;
        right: 0;
    }
    .inspiro-slider .flickity-button{ border-radius: 50%; }
    .inspiro-slider .slide .slide-captions h1{ font-size: 5em; }
    .inspiro-slider .slide .slide-captions h4{ font-weight: 500; font-size: 14px;}
    .inspiro-slider .flickity-page-dots .dot:after{
    background-color: #c8c3c3;
    box-shadow: 0 0 1px #fff;
    }
    .inspiro-slider .flickity-page-dots .dot{
    box-shadow: 0 0 0 2px #cbcbcb inset;
    }
    .inspiro-slider .container button.btn,
    .nx-hero-slider .slide-captions .btn{
        font-size: 2.5em !important;
        background: #000 !important;
        color: #fff !important;
        padding: 10px 30px !important;
        font-weight: 500;
        border-radius: 100px !important;
        box-shadow: 1.98699951171875px 11.010416984558105px 10px rgba(0, 0, 0, 0.53);
        transition: all .3s ease-in-out;
    }
    .inspiro-slider .container button.btn:hover,
    .nx-hero-slider .slide-captions .btn:hover{
        background: var(--gradient) !important;
        color: #fff !important;
    }
    .swiper-button-prev svg,
    .swiper-button-next svg{
        width: 40% !important;
        height: 40% !important;
        object-fit: contain;
        transform-origin: center;
        fill: currentColor;
        pointer-events: none;
    }
    .swiper-button-prev{ margin-left: 40px !important;}
    .swiper-button-next{ margin-right: 40px !important;}
    
    
    /* sect-bestseller */
    .sect-bestseller{ 
        /* background: #f4c3c9; */
        background: #ecc8cd;
        padding-bottom: 0;
    }
    .slide-bestseller .item{padding: 20px;}
    .slide-bestseller .item img{ transition: all .3s ease-in-out; }
    .slide-bestseller .item:hover img{transform: scale(1.1) translateY(-10px);}
    .slide-bestseller .item .btn{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: -webkit-max-content;
        opacity: 0;
        transition: all .3s ease-in-out;
        font-weight: 400;
        font-size: 20px;
    }
    .slide-bestseller .item:hover .btn{
        bottom: 20px;
        opacity: 1;
    }
    .slide-bestseller .item .btn:hover{ background: var(--gradient); color: #fff; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(1){background: #eb008b; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(2){background: #a3cd39; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(3){background: #f6931e; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(4){background: #fed000; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(5){background: #ff1102; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(6){background: #bc25a8; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(7){background: #c9db37; }
    .slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(8){background: #476dcf; }
    
    
    /* sect-newproducts – CarouselProductsBig ref: lays.com Featured Products */
    .sect-newproducts .headbar{
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        top: 80px;
        max-width: 1140px;
        margin: auto;
    }
    .sect-newproducts{
        background: #fff;
        padding: 0;
        overflow: hidden;
    }
    .sect-newproducts .headbar .htitle{
        color: #ffffff !important;
        text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.38);
        text-transform: uppercase;
    }
    .sect-newproducts .headbar .btn-right{
        border-color: #ffffff;
        color: #ffffff !important;
    }
    .sect-newproducts .headbar .btn-right.light::after{
        filter: brightness(0) invert(1);
    }
    .sect-newproducts .headbar .btn-right:hover{
        border-color: #e31c2b;
        background: #e31c2b;
        box-shadow: -5.9869384765625px 10.84375px 19px rgba(227, 28, 43, 0.45);
    }
    
    .slide-newproducts .polo-carousel-item{
        display: flex;
        align-items: stretch;
    }
    .slide-newproducts .item{
        padding: 120px 0 80px 0;
        width: 100%;
        background: url(../images/bg-product/1.webp) no-repeat center center;
        background-size: cover;
        transition: background-size .4s ease-in-out !important;
    }
    /* .slide-newproducts .item:hover{transform: scale(1.1);} */
    .slide-newproducts .product-card{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 24px;
        padding: 40px 30px 36px;
        min-height: 420px;
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .slide-newproducts .product-image{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .slide-newproducts .product-image img{
        max-height: 550px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        transition: transform .35s ease;
        filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));
    }
    .slide-newproducts .product-name{
        font-family: var(--font), var(--font-noto-sans-thai), sans-serif;
        font-size: 3em;
        font-weight: 500;
        color: #fff;
        margin: 0 0 18px;
        line-height: 1.2;
    }
    .slide-newproducts .btn-discover{
        display: inline-block;
        line-height: 44px;
        padding: 0 32px;
        border-radius: 50px;
        background: #fff;
        color: #1a1a1a !important;
        font-weight: 500;
        font-size: 27px;
        transition: all .3s ease;
        border: 2px solid transparent;
    }
    .slide-newproducts .btn-discover:hover{
        background: #1a1a1a;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    /* center-slide emphasis (Lay's peek + focus) */
    .slide-newproducts .polo-carousel-item{
        opacity: .55;
        transform: scale(1);
        transition: opacity .35s ease;
    }
    .slide-newproducts .polo-carousel-item.is-selected{
        opacity: 1;
    }
    .slide-newproducts .polo-carousel-item.is-selected .product-image img{
        transform: scale(1.05);
    }
    .slide-newproducts .polo-carousel-item:hover .product-image img{
        transform: rotate(-10deg) scale(1.15);
    }
    
    /* per-slide brand colors */
    /* .slide-newproducts .polo-carousel-item:nth-child(1) .product-card{ background: #eb008b; }
    .slide-newproducts .polo-carousel-item:nth-child(2) .product-card{ background: #a3cd39; }
    .slide-newproducts .polo-carousel-item:nth-child(3) .product-card{ background: #f6931e; }
    .slide-newproducts .polo-carousel-item:nth-child(4) .product-card{ background: #fed000; }
    .slide-newproducts .polo-carousel-item:nth-child(5) .product-card{ background: #ff1102; }
    .slide-newproducts .polo-carousel-item:nth-child(6) .product-card{ background: #bc25a8; }
    .slide-newproducts .polo-carousel-item:nth-child(7) .product-card{ background: #476dcf; }
    .slide-newproducts .polo-carousel-item:nth-child(8) .product-card{ background: #c9db37; } */
    
    /* carousel nav arrows */
    .slide-newproducts .flickity-button{
        width: 52px;
        height: 52px;
        background: #fff !important;
        border-radius: 50%;
        opacity: 1;
        top: 42%;
    }
    .slide-newproducts .flickity-button:hover{
        background: var(--yellow) !important;
    }
    .slide-newproducts .flickity-button.previous,
    .slide-newproducts:hover .flickity-button.previous{ 
        left: 20%; 
    }
    .slide-newproducts .flickity-button.next,
    .slide-newproducts:hover .flickity-button.next{ 
        right: 20%; 
    }
    .slide-newproducts .flickity-button:disabled{ opacity: .35; }
    
    @media (max-width: 991px){
        .slide-newproducts .product-card{ min-height: 360px; padding: 30px 20px 28px; }
        .slide-newproducts .product-image img{ max-height: 200px; }
        .slide-newproducts .flickity-button.previous{ left: 8px; }
        .slide-newproducts .flickity-button.next{ right: 8px; }
    }
    
    /* sect-clip – ref: Lay's Recipes masonry blog grid */
    .sect-clip{
        background: #f3ede0;
        padding: 70px 0 90px;
    }
    .clip-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 240px 240px 240px;
        gap: 18px;
    }
    .clip-head{
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding-top: 10px;
    }
    .clip-title{
        font-family: var(--font), var(--font-noto-sans-thai), sans-serif;
        font-size: 4.8em;
        font-weight: 500;
        line-height: 1;
        color: #1a1a1a;
        margin: 0 0 22px;
    }
    .btn-clip-view{
        display: inline-block;
        line-height: 48px;
        padding: 0 28px;
        border-radius: 50px;
        background: #e31c2b;
        color: #fff !important;
        font-weight: 500;
        font-size: 15px;
        transition: all .3s ease;
        box-shadow: 0 8px 18px rgba(227, 28, 43, 0.25);
    }
    .btn-clip-view:hover{
        background: #c41624;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(227, 28, 43, 0.35);
    }
    
    .clip-card{
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 10px;
        background: #000;
        min-height: 100%;
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .clip-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
    }
    .clip-card-media{
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: #000;
    }
    .clip-card-media .tiktok-embed{
        margin: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        inset: 0;
    }
    .sect-clip .clip-card-media .tiktok-embed iframe{
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        border: 0 !important;
    }
    .clip-card-overlay{
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%);
        z-index: 1;
        pointer-events: none;
    }
    .clip-card-content{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 20px;
        pointer-events: none;
    }
    .clip-card-title{
        font-family: var(--font-poppins), var(--font-noto-sans-thai), sans-serif;
        font-size: 1.05em;
        font-weight: 500;
        line-height: 1.35;
        color: #fff;
        margin: 0;
        max-width: calc(100% - 56px);
    }
    .clip-card-arrow{
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffc600;
        color: #1a1a1a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all .3s ease;
        pointer-events: auto;
    }
    .clip-card:hover .clip-card-arrow{
        background: #fff;
        transform: translateX(4px);
    }
    
    /* masonry placement */
    .clip-card:nth-of-type(2){
        grid-column: 2;
        grid-row: 1 / 3;
    }
    .clip-card:nth-of-type(3){
        grid-column: 3;
        grid-row: 1 / 3;
    }
    .clip-card:nth-of-type(4){
        grid-column: 1;
        grid-row: 2 / 4;
    }
    .clip-card:nth-of-type(5){
        grid-column: 2;
        grid-row: 3;
    }
    .clip-card:nth-of-type(6){
        grid-column: 3;
        grid-row: 3;
    }
    
    @media (max-width: 991px){
        .clip-grid{
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
        }
        .clip-head{
            grid-column: 1 / -1;
            grid-row: auto;
            margin-bottom: 10px;
        }
        .clip-title{ font-size: 3.6em; }
        .clip-card{
            min-height: 240px;
            grid-column: auto !important;
            grid-row: auto !important;
        }
        .clip-card:nth-of-type(2),
        .clip-card:nth-of-type(6){
            min-height: 320px;
        }
    }
    @media (max-width: 575px){
        .sect-clip{ padding: 50px 0 60px; }
        .clip-grid{
            grid-template-columns: 1fr;
            gap: 14px;
        }
        .clip-title{ font-size: 3em; }
        .clip-card{ min-height: 220px !important; }
    }
    
    /* tiktok */
    .tiktok-video{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: #fff;
        border: 1px solid rgba(22, 24, 35, 0.12);
        max-width: 100%;
    }
    .tiktok-video blockquote{
        margin: 0;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .tiktok-video-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        background: #fff;
    }
    .tiktok-video-user{
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: #161823;
        text-decoration: none;
    }
    .tiktok-video-avatar{
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%);
        color: #fff;
        font-weight: 500;
        font-size: 18px;
    }
    .tiktok-video-name{
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        line-height: 1.2;
    }
    .tiktok-video-name strong{
        font-weight: 400;
        font-size: 1.5em;
    }
    .tiktok-video-logo{
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .tiktok-video-player{
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 16;
        background: #000;
    }
    .tiktok-video .tiktok-embed-iframe,
    .tiktok-video .tiktok-embed-placeholder{
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        border: 0;
        background: #000;
    }
    .tiktok-video-caption{
        margin: 0;
        padding: 12px 16px 0;
        color: #161823;
        font-size: 15px;
        line-height: 1.45;
        min-height: calc(1.45em * 3);
        flex: 1 1 auto;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tiktok-video-watch{
        display: block;
        margin-top: auto;
        padding: 12px 16px 16px;
        color: #fe2c55;
        font-size: 18px;
        font-weight: 400;
        text-decoration: none;
    }
    .tiktok-video-watch:hover{
        color: #e62a4f;
    }
    .sect-tiktok .headbar{
        display: flex;
        justify-content: center;
    }
    .sect-tiktok .headbar h2{
        color: #000 !important;
    }
    .sect-tiktok .headbar img{
        height: 70px;
        margin-right: 15px;
    }
    
    
    /* about */
    .sect-page-about .cleft img{ margin-top: 14px;}
    .sect-about{
        position: relative;
        padding: 0;
    }
    .sect-about::before{
        position: absolute;
        content: "";
        width: 94%;
        height: 85%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: #fff;
        background: #5AC1F0;
        background: linear-gradient(320deg, rgba(90, 193, 240, 1), rgb(33, 181, 241) 38.24%, rgba(121, 29, 191, 1));
        border-radius: 50px;
    }
    .sect-about .cleft{ padding: 80px 120px;} 
    .sect-about .cright{ padding: 80px;}
    .sect-about .cright{
        text-align: center;
        background: var(--yellow);
        border-radius: 80px;
        position: relative;
        right: 40px;
        background: url(../images/bg-contact.jpg) no-repeat center;
        background-size: cover;
    }
    .sect-about .about-inner-box h2{
        font-size: 3em;
    }
    .sect-about .about-inner-box strong{
        background: rgba(16, 19, 124, 0.51);
        border-radius: 50px;
        padding: 0 7px;
        backdrop-filter: blur(20px);
    }
    .sect-about .cright .list-contact,
    .sect-about .cright .list-contact a{
        font-weight: 500;
        color: #000;
    }
    .sect-about .cright .list-contact a:hover{ text-decoration: underline;}
    
    /* news */
    .sect-news{
        position: relative;
        overflow: hidden;
        padding: 80px 0;
    }
    .sect-tiktok .row,
    .sect-news .row{
        background: rgba(255, 255, 255, 0.15);
        border-radius: 53px;
        padding: 40px;
        background: rgba(28, 27, 27, 0.85);
        box-shadow: -0.0103759765625px 36.84375px 39px rgba(230, 28, 101, 0.34);
        background: #f3c6cb;
    }
    .sect-tiktok .row,
    .tiktok-blog .row{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .sect-tiktok .row > .cleft,
    .tiktok-blog .row > .cleft{
        display: flex;
    }
    .news-carousel{ padding: 10px 0 30px; }
    .news-item{
        height: 100%;
    }
    .news-item .news-card{
        display: block;
        height: 100%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 24px;
        overflow: hidden;
        transition: all .3s ease;
        color: #fff;
    }
    .news-item .news-card:hover{
        transform: translateY(-8px);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
        background: rgba(255, 255, 255, 0.12);
    }
    .news-item .boxImageHg{
        height: 220px;
        border-radius: 0;
    }
    .news-item .boxImageHg img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        transform: none;
        transition: transform .35s ease;
    }
    .news-item .news-card:hover .boxImageHg img{
        transform: scale(1.06);
    }
    .news-card-body{
        padding: 22px 24px 28px;
        background: rgba(255, 255, 255, 0.94);
    }
    .news-tag{
        display: inline-block;
        line-height: 28px;
        padding: 0 14px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 12px;
        background: var(--gradient);
        color: #fff;
    }
    .news-item .htitle{
        font-size: 1.8em;
        font-weight: 500;
        margin: 0 0 10px;
        line-height: 1.25;
    }
    .news-item .desc{
        margin: 0 0 16px;
        font-size: 18px;
        line-height: 1.2;
        color: #777;
    }
    .news-readmore{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 19px;
        font-weight: 500;
        transition: all .3s ease;
        color: #000;
    }
    .news-item .news-card:hover .news-readmore{
        gap: 12px;
    }
    .news-carousel .flickity-button{
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }
    .news-carousel .flickity-button:hover{
        background: var(--gradient) !important;
        border-color: transparent;
    }
    .post-date-box{
    width: 60px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    line-height: 1;
    font-size: 10px;
    text-align: center;
    color: #656565;
    background: rgba(255, 255, 255, 0.95);
    }
    .post-date-box strong{
    display: block;
    font-size: 30px;
    }
    .news-item .desc{ margin: 15px 0; }
    
    .boxImageHg{
    position: relative;
    height: 232px;
    overflow: hidden;
    background-color: #000;
    }
    .boxImageHg img{
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    }
    
    .slick-wrapper{ padding: 0; }
    .project-item{
    padding: 0 10px;
    }
    .project-item .inner{
    position: relative;
    overflow: hidden;
    z-index: 2;
    }
    .box-inner{
    padding: 20px;
    position: absolute;
    background: rgba(0, 0, 0, 0.36);
    z-index: 2;
    width: 100%;
    bottom: -100px;
    opacity: 0;
    transition: all .2s ease-in-out;
    }
    .project-item:hover .box-inner{
    opacity: 1;
    bottom: 0;
    /*background: #fff;*/
    background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
    }
    
    .sect-certificate{ padding-bottom: 160px; }
    .slide-certificate .flickity-page-dots{ bottom: -40px; }
    .sect-certificate .cRight{ padding-left: 80px; margin-top: 60px;}
    .certificate-logo{ }
    
    .title-dec{ position: relative; }
    .title-dec:after{
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    right: -19px;
    top: -5px;
    background: url(../images/bg/sign.png);
    background-position: center;
    background-size: 100%;
    }
    footer .comp-name{ 
        font-size: 20px;
        font-weight: 600;
    }
    footer .footer-top{
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.23);
        margin-bottom: 30px;
    }
    footer .footer-top .imagebox{
        border: 1px solid #ffffff;
        display: inline-block;
        border-radius: 50px;
        padding: 10px 20px;
        background: #ffffff;
        position: relative;
        top: 25px;
        box-shadow: 0 0 10px #ffffff;
    }
    footer .footer-top .imagebox img{ height:30px; }
    
    footer{ 
        padding: 0px 0 20px 0;
        /* background: linear-gradient(rgba(21, 66, 89, 0) 42.86%, rgba(0, 125, 213, 0.45)); */
        background: #fff;
        position: relative;
    }
    footer::before{
        content: '';
        height: 7px;
        width: 100%;
        background: url("../images/triangle.png");
        background-size: 15px 7px;
        background-repeat: repeat-x;
        background-position: center top;
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        transform: translateY(-7px);
        outline: none;
        border-bottom: 1px solid #fff;
    }
    footer, footer p, footer h4,
    footer a, footer .list li a, .widget a{
        color: #000f60;
        font-weight: 500;
        text-transform: capitalize;
    }
    footer .ft-bttm-social{ float: right;}
    footer .footer-content{ padding-top: 60px;}
    footer .footer-contact{ margin-bottom: 40px;}
    footer .footer-content .container-fluid{ max-width: 93%;}
    footer .ft-link3{ clear: both; }
    footer .list-link{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 0;
        font-size: 20px;
    }
    footer .list-link li{
        flex-shrink: 0;
        white-space: nowrap;
    }
    footer .footer-logo:empty,
    footer .footer-contact:empty,
    footer .ft-social:empty{
        margin-bottom: 0;
    }
    footer .ft-copyright{
        display: flex;
        justify-content: end;
    }
    footer .list-policy{
        list-style: none;
        margin-left: 15px;
        display: flex;
        gap: 15px;
    }
    footer .list-policy a{ font-size: 13px;}
    footer .footer-bottom ul.list-menu li{ margin-left: 10px; }
    footer .ft-bttm-link{ float: right; }
    footer .ft-bttm-copyright{ float: left; margin-right: 20px;}
    footer .ft-social{
        position: relative;
        top: 15px;
        z-index: 1;
        align-content: center;
    }
    footer .copyRight{ line-height: 32px; }
    footer .ft-connect .widget{
    display: inline-block;
    float: right;
    background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
    padding: 95px 20px 0px 20px;
    top: -95px;
    margin-bottom: -95px;
    }
    footer .ft-connect .widget,
    footer .ft-connect .widget h4,
    footer .ft-connect .widget .widget-title,
    footer .ft-connect .widget a{
    color: #333;
    }
    footer .ft-connect .widget a:hover{ color: #fff; }
    footer .ft-connect .line-icon{ filter: brightness(0); }
    footer .copyright-text{ text-align: right;}
    
    footer .copyright-text,
    footer .list-policy a{
        font-size: 18px;
    }
    footer .list-contact li{
        font-size: 22px;
    }
    footer .list-contact li i{ margin-right: 8px;}
    footer .footer-logo{ margin-bottom: 50px;}
    
    ul.list-contact i{ width: 18px; display:inline-block; }
    ul.list-contact li strong{
    display: inline-block;
    }
    footer .line-icon{
    width: 22px;
    float: right;
    }
    footer .hr{
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #5c5c5c;
    margin-bottom: 5px;
    }
    footer .social-icons li a{ color: #ddd;}
    
    
    .fix-dec-plus{ position: relative; }
    .fix-dec-plus:before{
    position: absolute;
    content: "";
    right: 6%;
    top: -120px;
    width: 100px;
    height: 100px;
    background: url(../images/bg/sign.png) no-repeat;
    background-position: center;
    background-size: 100%;
    
    }
    .fix-dec-plus.left:before{
    right: initial;
    left: -200px;
    top: 200px;
    opacity: 1;
    }
    
    .ball {
    --delay:0s;
    --size:0.4;
    --speed: 20s;
    
    aspect-ratio:1;
    width:calc( 150% * var(--size) );
    
    /* background: linear-gradient(259.53deg, #0A3FFF 6.53%, #F55F0A 95.34%);*/
    background: linear-gradient(259.53deg, #0f105a 6.53%, #c30980 95.34%);
    filter:blur( 10vw );
    
    border-radius:50%;
    
    position:absolute;
    top:100%;
    left:0;
    bottom: 0;
    margin: auto;
    
    animation: loop var(--speed) infinite linear;
    animation-delay: var(--delay);
    transform-origin: 50% 50%;
    opacity:0.6;
    pointer-events: none;
    }
    
    /* Pause decorative GPU-heavy blur layers when their page region is off-screen. */
    .ball.ball--paused {
    animation-play-state: paused;
    visibility: hidden;
    }
    
    @keyframes loop {
    0% { transform: translate3D( 0%, 51%, 0 ) rotate(0deg); }
    5% { transform: translate3D( 8%, 31%, 0 ) rotate(18deg); }
    10% { transform: translate3D( 22%, 13%, 0 ) rotate(36deg); }
    15% { transform: translate3D( 40%, 2%, 0 ) rotate(54deg); }
    20% { transform: translate3D( 46%, 21%, 0 ) rotate(72deg); }
    25% { transform: translate3D( 50%, 47%, 0 ) rotate(90deg); }
    30% { transform: translate3D( 53%, 80%, 0 ) rotate(108deg); }
    35% { transform: translate3D( 59%, 98%, 0 ) rotate(125deg); }
    40% { transform: translate3D( 84%, 89%, 0 ) rotate(144deg); }
    45% { transform: translate3D( 92%, 68%, 0 ) rotate(162deg); }
    50% { transform: translate3D( 99%, 47%, 0 ) rotate(180deg); }
    55% { transform: translate3D( 97%, 21%, 0 ) rotate(198deg); }
    60% { transform: translate3D( 80%, 7%, 0 ) rotate(216deg); }
    65% { transform: translate3D( 68%, 25%, 0 ) rotate(234deg); }
    70% { transform: translate3D( 59%, 41%, 0 ) rotate(251deg); }
    75% { transform: translate3D( 50%, 63%, 0 ) rotate(270deg); }
    80% { transform: translate3D( 38%, 78%, 0 ) rotate(288deg); }
    85% { transform: translate3D( 21%, 92%, 0 ) rotate(306deg); }
    90% { transform: translate3D( 3%, 79%, 0 ) rotate(324deg); }
    100% { transform: translate3D( 0%, 51%, 0 ) rotate(360deg); }
    
    }
    
    .sect-page-about,
    .sect-page-product-domestic,
    .sect-page-contact{
        background: url(../images/bg-about.webp) !important;
        background-position: center top !important;
        background-size: 100% !important;
    }
    .sect-page-articles,
    .sect-page-article-detail{
        /* background: url(../images/bg-article.jpg) !important;
        background-position: center top !important;
        background-size: 100% !important; */
        background-color: #e7caf2;
    }
    
    
    #page-title[data-bg-parallax], [data-bg-parallax]{
        background: transparent;
    }
    
    /* bg parallax wrapper */
    .sect-parallax-wrap{
        position: relative;
        z-index: 0;
        overflow: hidden;
        isolation: isolate;
    }
    .sect-parallax-wrap > section{
        position: relative;
        z-index: 2;
    }
    .sect-parallax-wrap .parallax-container{
        opacity: 1 !important;
        height: 140%;
        top: -20%;
        z-index: 0;
        will-change: transform;
        background-size: 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat;
        transition: none !important;
        pointer-events: none;
    }
    .sect-parallax-wrap .parallax-container.parallax-smooth{
        backface-visibility: hidden;
    }
    
    
    
    /* about */
    .subpage-banner{
        padding: 0;
        margin-bottom: -110px !important;
        position: relative;
        top: -110px;
    }
    
    /* articles page – banner + breadcrumb */
    #page-title.page-title-articles{
        position: relative;
        top: -110px;
        margin-bottom: -110px;
        padding: 180px 0 70px;
        background-color: #10137c;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    #page-title.page-title-articles::before{
        content: '';
        position: absolute;
        inset: 0;
        /* background: linear-gradient(120deg, rgba(16, 19, 124, 0.78) 0%, rgba(50, 167, 233, 0.45) 55%, rgba(213, 7, 244, 0.4) 100%); */
        background: rgba(242, 210, 210, 0.85);
        z-index: 1;
    }
    #page-title.page-title-articles .container{
        position: relative;
        z-index: 2;
    }
    #page-title.page-title-articles .page-title > h1{
        color: #8e6263;
        font-weight: 500;
        font-size: 2.4rem;
        margin-bottom: 12px;
    }
    #page-title.page-title-articles .breadcrumb ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }
    #page-title.page-title-articles .breadcrumb ul li{
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
    }
    #page-title.page-title-articles .breadcrumb ul li + li:before{
        content: '/';
        margin: 0 10px;
        color: #5e4041;
    }
    #page-title.page-title-articles .breadcrumb ul li a{
        color: #5e4041;
        text-decoration: none;
        transition: color .2s ease;
    }
    #page-title.page-title-articles .breadcrumb ul li a:hover,
    #page-title.page-title-articles .breadcrumb ul li.active a{
        color: #5e4041;
    }
    #page-title.page-title-articles .breadcrumb ul li.active a{
        font-weight: 500;
    }
    
    /* articles page */
    .sect-page-articles{
        padding: 40px 0;
    }
    .sect-page-articles .headtitle{
        font-size: 2.2em;
        color: #10137c;
        margin: 0 0 8px;
    }
    .articles-subtitle{
        color: #141516;
        margin: 0 0 28px;
    }
    .articles-filter{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0 0 36px;
    }
    .articles-filter li{ margin: 0; }
    .articles-filter-btn{
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid rgba(16, 19, 124, 0.18);
        background: #fff;
        color: #10137c;
        font-family: inherit;
        font-size: 18px;
        font-weight: 500;
        line-height: 42px;
        padding: 0 26px;
        border-radius: 50px;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 2;
        transition: all .25s ease;
    }
    .articles-filter-btn:hover{
        border-color: transparent;
        color: #fff;
        background: var(--gradient);
    }
    .articles-filter li.active .articles-filter-btn{
        border-color: transparent;
        color: #fff;
        background: var(--gradient);
        box-shadow: 0 10px 22px rgba(129, 104, 238, 0.28);
    }
    .articles-grid{
        margin-left: -12px;
        margin-right: -12px;
    }
    .articles-card{
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 28px;
        transition: opacity .25s ease, transform .25s ease;
    }
    .articles-card.is-hidden{
        display: none !important;
    }
    .articles-card-link{
        display: block;
        height: 100%;
        background: #fff;
        border: 1px solid rgba(16, 19, 124, 0.08);
        border-radius: 20px;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
        transition: all .3s ease;
    }
    .articles-card-link:hover{
        transform: translateY(-6px);
        box-shadow: 0 18px 36px rgba(16, 19, 124, 0.12);
        border-color: rgba(129, 104, 238, 0.28);
        color: inherit;
        text-decoration: none;
    }
    .articles-card-image{
        height: 200px;
        border-radius: 0;
    }
    .articles-card-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        transform: none;
        transition: transform .35s ease;
    }
    .articles-card-link:hover .articles-card-image img{
        transform: scale(1.06);
    }
    .articles-card-body{
        padding: 18px 20px 22px;
    }
    .articles-card-tag{
        display: inline-block;
        line-height: 26px;
        padding: 0 12px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 10px;
        background: var(--gradient);
        color: #fff;
    }
    .articles-card-title{
        font-size: 1.05em;
        font-weight: 500;
        color: #10137c;
        margin: 0 0 12px;
        line-height: 1.45;
        min-height: 2.9em;
    }
    .articles-card-date{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #6d6f71;
    }
    .articles-card-date i{
        font-size: 14px;
        color: var(--magenta);
    }
    .articles-empty{
        text-align: center;
        padding: 40px 20px;
        color: #6d6f71;
    }
    .articles-empty[hidden]{
        display: none !important;
    }
    
    /* article detail */
    .sect-page-article-detail{
        padding: 60px 0 100px;
        position: relative;
    }
    .article-detail-meta{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        margin-bottom: 18px;
    }
    .article-detail-tag{
        display: inline-block;
        line-height: 28px;
        padding: 0 14px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        background: var(--gradient);
        color: #fff;
    }
    .article-detail-date{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 500;
        color: #000000;
    }
    .article-detail-title{
        font-size: 2em;
        font-weight: 600;
        color: #10137c;
        line-height: 1.35;
        margin: 0 0 28px;
    }
    .article-detail-cover{
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 32px;
    }
    .article-detail-cover img{
        width: 100%;
        display: block;
    }
    .article-detail-content{
        font-size: 15px;
        line-height: 1.75;
        color: #162328;
    }
    .article-detail-content p{
        margin-bottom: 18px;
    }
    .article-detail-back{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
        font-weight: 500;
        color: #10137c;
    }
    .article-detail-back:hover{
        color: var(--magenta);
    }
    .article-gallery{
        margin-top: 42px;
    }
    .article-gallery-grid{
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
    }
    .article-gallery-card{
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 12px;
        background: #eceef7;
        box-shadow: 0 6px 18px rgba(16, 19, 124, .1);
        cursor: zoom-in;
    }
    .article-gallery-card img{
        display: block;
        width: 100%;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        transition: transform .3s ease, filter .3s ease;
    }
    .article-gallery-card:hover img,
    .article-gallery-card:focus-visible img{
        transform: scale(1.045);
        filter: brightness(.78);
    }
    .article-gallery-card:focus-visible{
        outline: 3px solid var(--magenta);
        outline-offset: 3px;
    }
    .article-gallery-zoom{
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        color: #10137c;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.8);
        transition: opacity .25s ease, transform .25s ease;
    }
    .article-gallery-card:hover .article-gallery-zoom,
    .article-gallery-card:focus-visible .article-gallery-zoom{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .article-gallery-lightbox{
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 38px 80px;
        background: rgba(5, 7, 27, .92);
        animation: timelineReveal .2s ease;
    }
    .article-gallery-lightbox-image{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
    }
    .article-gallery-lightbox-image img{
        display: block;
        width: auto !important;
        max-width: min(82vw, 1100px);
        height: auto !important;
        max-height: 86vh;
        object-fit: contain;
        border-radius: 8px;
    }
    .article-gallery-lightbox-image figcaption{
        position: absolute;
        right: 12px;
        bottom: 10px;
        margin: 0;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .62);
        color: #fff;
        font-size: 13px;
    }
    .article-gallery-close,
    .article-gallery-nav{
        position: absolute;
        z-index: 2;
        display: grid;
        width: 46px;
        height: 46px;
        padding: 0;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        cursor: pointer;
        transition: background .2s ease, transform .2s ease;
    }
    .article-gallery-close:hover,
    .article-gallery-nav:hover{
        background: var(--magenta);
        transform: scale(1.06);
    }
    .article-gallery-close{
        top: 20px;
        right: 20px;
        font-size: 18px;
    }
    .article-gallery-nav{
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
    }
    .article-gallery-nav:hover{
        transform: translateY(-50%) scale(1.06);
    }
    .article-gallery-prev{ left: 20px; }
    .article-gallery-next{ right: 20px; }
    @media (max-width: 1199px){
        .article-gallery-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 767px){
        .article-gallery-grid{
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        .article-gallery-lightbox{ padding: 62px 14px 70px; }
        .article-gallery-lightbox-image img{
            max-width: 92vw;
            max-height: 78vh;
        }
        .article-gallery-close{
            top: 12px;
            right: 12px;
        }
        .article-gallery-nav{
            top: auto;
            bottom: 12px;
            transform: none;
        }
        .article-gallery-nav:hover{ transform: scale(1.06); }
        .article-gallery-prev{ left: calc(50% - 58px); }
        .article-gallery-next{ right: calc(50% - 58px); }
    }
    @media (max-width: 420px){
        .article-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    
    /* product detail */
    .sect-page-product-detail{
        padding: 30px 0 100px;
    }
    .product-detail-back{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
        color: #555;
        font-weight: 500;
    }
    .product-detail-back:hover{
        color: var(--magenta);
    }
    .product-detail-media{
        margin-bottom: 30px;
    }
    .product-detail-image{
        background: linear-gradient(160deg, #f7f3ff, #eef7ff);
        border-radius: 24px;
        min-height: 420px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }
    .product-detail-image img{
        max-width: 100%;
        max-height: 360px;
        object-fit: contain;
    }
    .product-detail-brand{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .product-detail-brand img{
        height: 42px;
        width: auto;
    }
    .product-detail-brand span{
        font-weight: 500;
        color: #333;
    }
    .product-detail-meta{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }
    .product-detail-meta span{
        display: inline-block;
        padding: 6px 14px;
        border-radius: 999px;
        background: #f3edff;
        color: var(--primary-color);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .product-detail-title{
        font-size: 2.2em;
        font-weight: 800;
        margin-bottom: 16px;
        color: #1f1f1f;
    }
    .product-detail-desc{
        font-size: 1.05em;
        line-height: 1.7;
        color: #555;
        margin-bottom: 22px;
    }
    .product-detail-features{
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
    }
    .product-detail-features li{
        position: relative;
        padding: 10px 0 10px 28px;
        border-bottom: 1px solid #eee;
        color: #444;
    }
    .product-detail-features li::before{
        content: "";
        position: absolute;
        left: 0;
        top: 18px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gradient);
    }
    .product-detail-actions{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .product-detail-actions .btn-outline{
        background: transparent;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
    }
    .product-detail-actions .btn-outline:hover{
        background: var(--gradient);
        border-color: transparent;
        color: #fff;
    }
    .product-detail-related{
        margin-top: 70px;
        padding-top: 40px;
        border-top: 1px solid #eee;
    }
    .product-detail-related-title{
        font-size: 1.6em;
        font-weight: 800;
        margin-bottom: 24px;
    }
    .product-detail-related-card{
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 18px;
        padding: 18px;
        margin-bottom: 24px;
        transition: .25s ease;
        text-align: center;
    }
    .product-detail-related-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(45,49,147,.12);
        border-color: transparent;
    }
    .product-detail-related-image{
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .product-detail-related-image img{
        max-height: 120px;
        max-width: 100%;
        object-fit: contain;
    }
    .product-detail-related-card h3{
        font-size: 15px;
        font-weight: 500;
        margin: 0 0 6px;
        color: #222;
        min-height: 42px;
    }
    .product-detail-related-card span{
        font-size: 12px;
        color: #888;
    }
    
    @media (max-width: 767px){
        .product-detail-image{ min-height: 280px; padding: 24px; }
        .product-detail-title{ font-size: 1.6em; }
        .sect-page-product-detail{ padding: 20px 0 70px; }
    }
    
    
    @media (max-width: 991px){
        .articles-card-title{ min-height: 0; }
        .article-detail-title{ font-size: 1.6em; }
    }
    @media (max-width: 767px){
        #page-title.page-title-articles{
            padding: 140px 0 50px;
        }
        #page-title.page-title-articles .page-title > h1{
            font-size: 1.7rem;
        }
        .sect-page-articles,
        .sect-page-article-detail{ padding: 40px 0 70px; }
        .sect-page-articles .headtitle{ font-size: 1.7em; }
    }
    .vdo-clip{
        padding: 40px 80px;
    }
    .list-company-timeline li strong{
        display: inline-block;
        min-width: 38px;
    }
    
    /* company timeline UI – flex alternating layout */
    .sect-milestone{ 
        background: #e9f3fb;
        padding-bottom: 20px;
    }
    .company-timeline{
        margin-top: 50px;
        margin-bottom: 20px;
        padding-left: 40px;
        padding-right: 40px;
        width: 100%;
        float: none;
    }
    .company-timeline .headtitle{
        font-size: 2.5em;
    font-weight: 600;
    color: #10137c;
    margin: 0 0 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    }
    .headtitle{
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .timeline-flex{
        position: relative;
        max-width: 980px;
        margin: 0 auto;
        padding: 10px 0 20px;
    }
    .timeline-flex::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: #d8dce8;
        z-index: 0;
    }
    .timeline-flex-row{
        display: flex;
        align-items: center;
        gap: 0;
        margin-bottom: 34px;
        position: relative;
        z-index: 1;
    }
    .timeline-flex-row:last-child{
        margin-bottom: 0;
    }
    .timeline-flex-col{
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    .timeline-flex-col-start{
        justify-content: flex-end;
        padding-right: 28px;
    }
    .timeline-flex-col-end{
        justify-content: flex-start;
        padding-left: 28px;
    }
    .timeline-flex-axis{
        flex: 0 0 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .timeline-flex-dot{
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #8168ee;
        box-shadow: 0 0 0 4px rgba(129, 104, 238, 0.15);
        transition: transform .25s ease, box-shadow .25s ease;
    }
    .timeline-flex-dot.is-active{
        transform: scale(1.25);
        background: var(--pink);
        box-shadow: 0 0 0 6px rgba(235, 62, 172, 0.22);
    }
    .timeline-flex-date{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 108px;
        padding: 10px 22px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, #5b4cdb 0%, #8168ee 55%, #9b6df0 100%);
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .02em;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(91, 76, 219, 0.28);
        transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }
    .timeline-flex-date:hover,
    .timeline-flex-date.is-active{
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(91, 76, 219, 0.34);
        filter: brightness(1.05);
        background: var(--pink);
    }
    .timeline-flex-spacer{
        min-height: 1px;
    }
    .timeline-image{
        display: none;
        width: 100%;
        max-width: 220px;
        margin-bottom: 14px;
        opacity: 0.8;
        pointer-events: none;
        user-select: none;
        border-radius: 14px;
    }
    .timeline-image img{
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        border-radius: 9px;
    }
    .timeline-flex-row.is-open.is-left .timeline-flex-col-start .timeline-image,
    .timeline-flex-row.is-open.is-right .timeline-flex-col-end .timeline-image{
        display: block;
        animation: timelineImageReveal .35s ease;
    }
    .timeline-flex-row .timeline-image{
        position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    align-content: center;
    }
    .timeline-flex-row.is-open.is-left .timeline-flex-col-start .timeline-image{ left: 14%;}
    .timeline-flex-row.is-open.is-right .timeline-flex-col-end .timeline-image{ right: 14%;}
    
    
    .timeline-flex-col-start,
    .timeline-flex-col-end{
        flex-direction: column;
        align-items: stretch;
    }
    .timeline-flex-row.is-left .timeline-flex-col-start,
    .timeline-flex-row.is-right .timeline-flex-col-end{
        align-items: flex-end;
    }
    .timeline-flex-row.is-right .timeline-flex-col-end{
        align-items: flex-start;
    }
    @keyframes timelineImageReveal{
        from{
            opacity: 0;
            transform: translateY(8px) scale(0.96);
        }
        to{
            opacity: 0.22;
            transform: translateY(0) scale(1);
        }
    }
    .timeline-flex-card{
        position: relative;
        width: 100%;
        max-width: 360px;
        background: #fff;
        border-radius: 14px;
        padding: 22px 24px 20px;
        box-shadow: 0 10px 28px rgba(16, 19, 124, 0.1);
        overflow: hidden;
        animation: timelineReveal .3s ease;
    }
    .timeline-flex-card-watermark{
        position: absolute;
        right: -10px;
        bottom: -18px;
        width: 130px;
        height: 130px;
        opacity: 0.07;
        background: url(/images/logo.png) no-repeat center / contain;
        pointer-events: none;
    }
    .timeline-flex-card-title{
        margin: 0 0 10px;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
        color: #5b4cdb;
    }
    .timeline-flex-row.is-open .timeline-flex-card-title{
        color: var(--pink);
    }
    .timeline-flex-card p{
        margin: 0;
        color: #666;
        font-size: 14px;
        line-height: 1.65;
    }
    .timeline-flex-card-list{
        margin: 0;
        padding-left: 18px;
        color: #666;
        font-size: 14px;
        line-height: 1.65;
    }
    .timeline-flex-card-list li{
        margin-bottom: 8px;
    }
    .timeline-flex-card-list li:last-child{
        margin-bottom: 0;
    }
    .timeline-flex-row.is-open .timeline-flex-col-start{
        align-items: flex-end;
        padding-top: 4px;
    }
    .timeline-flex-row.is-open .timeline-flex-col-end{
        align-items: flex-start;
        padding-top: 4px;
    }
    
    @keyframes timelineReveal{
        from{
            opacity: 0;
            transform: translateY(10px);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @media (max-width: 767px){
        .company-timeline .headtitle{
            font-size: 1.6em;
            margin-bottom: 28px;
        }
        .timeline-flex::before{
            left: 18px;
            transform: none;
        }
        .timeline-flex-row{
            display: grid;
            grid-template-columns: 36px 1fr;
            gap: 0 14px;
            margin-bottom: 22px;
            align-items: start;
        }
        .timeline-flex-axis{
            grid-column: 1;
            grid-row: 1 / span 2;
            padding-top: 10px;
            justify-content: flex-start;
        }
        .timeline-flex-col-start,
        .timeline-flex-col-end{
            grid-column: 2;
            padding: 0;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .timeline-flex-row.is-open.is-left .timeline-flex-col-start .timeline-image,
        .timeline-flex-row.is-open.is-right .timeline-flex-col-end .timeline-image{
            max-width: 180px;
            margin-bottom: 10px;
        }
        .timeline-flex-row.is-right .timeline-flex-col-end{
            grid-row: 1;
        }
        .timeline-flex-row.is-right .timeline-flex-col-start{
            grid-row: 2;
            margin-top: 10px;
        }
        .timeline-flex-row.is-left .timeline-flex-col-end{
            margin-top: 10px;
        }
        .timeline-flex-card{
            max-width: none;
        }
        .timeline-flex-date{
            min-width: 92px;
            padding: 8px 18px;
            font-size: 14px;
        }
    }
    
    
    /* privacy / policy pages */
    .sect-page-policy{
        padding: 60px 0 100px;
    }
    .policy-content{
        color: #404041;
        line-height: 1.75;
    }
    .policy-updated{
        display: inline-block;
        margin-bottom: 24px;
        padding: 6px 14px;
        border-radius: 50px;
        background: #f7f8ff;
        border: 1px solid rgba(16, 19, 124, 0.08);
        font-size: 13px;
        font-weight: 500;
        color: #10137c;
    }
    .policy-content h2{
        font-size: 1.35em;
        font-weight: 500;
        color: #10137c;
        margin: 32px 0 12px;
    }
    .policy-content p{
        margin-bottom: 14px;
    }
    .policy-content ul{
        margin: 0 0 18px;
        padding-left: 20px;
    }
    .policy-content ul li{
        margin-bottom: 8px;
    }
    .policy-content a{
        color: #10137c;
        font-weight: 500;
    }
    .policy-content a:hover{
        color: var(--magenta);
    }
    .policy-contact-box{
        margin-top: 18px;
        padding: 22px 24px;
        border-radius: 16px;
        background: #f7f8ff;
        border: 1px solid rgba(16, 19, 124, 0.08);
    }
    .policy-contact-box p{
        margin-bottom: 6px;
    }
    .policy-contact-box p:last-child{
        margin-bottom: 0;
        margin-top: 10px;
    }
    
    @media (max-width: 767px){
        .sect-page-policy{ padding: 40px 0 70px; }
        .policy-content h2{ font-size: 1.2em; }
    }
    
    /* contact page */
    .sect-page-contact{
        padding: 60px 0 100px;
    }
    .sect-page-contact .headtitle{
        font-size: 2.2em;
        color: #10137c;
        margin: 0 0 8px;
    }
    .contact-subtitle{
        color: #6d6f71;
        margin: 0 0 36px;
    }
    .contact-info-col{
        margin-bottom: 30px;
    }
    .contact-info-box,
    .contact-form-box{
        background: #fff;
        border: 1px solid rgba(16, 19, 124, 0.08);
        border-radius: 20px;
        padding: 28px 30px;
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
    }
    .contact-info-box{
        margin-bottom: 24px;
    }
    .contact-info-title{
        font-size: 1.35em;
        font-weight: 500;
        color: #10137c;
        margin: 0 0 18px;
    }
    .contact-info-list{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .contact-info-list li{
        display: flex;
        gap: 14px;
        margin-bottom: 22px;
    }
    .contact-info-list li:last-child{
        margin-bottom: 0;
    }
    .contact-info-icon{
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: var(--gradient);
        font-size: 16px;
    }
    .contact-info-text{
        flex: 1;
    }
    .contact-info-text strong{
        display: block;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #10137c;
        margin-bottom: 4px;
    }
    .contact-info-text p{
        margin: 0;
        color: #404041;
        line-height: 1.6;
    }
    .contact-info-text a{
        color: #404041;
        font-weight: 500;
    }
    .contact-info-text a:hover{
        color: var(--magenta);
    }
    .contact-map{
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(16, 19, 124, 0.08);
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
        line-height: 0;
    }
    .contact-map iframe{
        width: 100%;
        min-height: 320px;
        display: block;
    }
    .contact-form-desc{
        color: #6d6f71;
        margin: -8px 0 22px;
    }
    .contact-form .form-group{
        margin-bottom: 18px;
    }
    .contact-form label{
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #10137c;
        margin-bottom: 8px;
    }
    .contact-form label span{
        color: var(--magenta);
    }
    .contact-form .form-control{
        border: 1px solid rgba(16, 19, 124, 0.14);
        border-radius: 12px;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 14px;
        color: #162328;
        background: #fafbff;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .contact-form textarea.form-control{
        min-height: 140px;
        resize: vertical;
    }
    .contact-form .form-control:focus{
        border-color: rgba(129, 104, 238, 0.55);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(129, 104, 238, 0.12);
        outline: none;
    }
    .contact-form .form-control.is-invalid{
        border-color: #e11d48;
        box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
    }
    .btn.btn-contact,
    button.btn.btn-contact{
        min-width: 180px;
        line-height: 48px;
        padding: 0 28px;
        border: none;
        border-radius: 50px;
        color: #fff;
        background: var(--gradient);
        font-weight: 500;
    }
    .btn.btn-contact:hover,
    button.btn.btn-contact:hover{
        color: #fff;
        filter: brightness(1.05);
        box-shadow: 0 10px 22px rgba(129, 104, 238, 0.28);
    }
    .contact-form-success{
        margin-top: 16px;
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(16, 19, 124, 0.06);
        color: #10137c;
        font-weight: 500;
    }
    .contact-form-success[hidden]{
        display: none !important;
    }
    .contact-form-error{
        margin-top: 16px;
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(225, 29, 72, 0.08);
        color: #e11d48;
        font-weight: 500;
    }
    .btn.btn-contact:disabled,
    button.btn.btn-contact:disabled{
        opacity: 0.7;
        cursor: not-allowed;
        filter: none;
        box-shadow: none;
    }
    .form-row{
        margin-left: -15px;
        margin-right: -15px;
    }
    
    @media (max-width: 767px){
        .sect-page-contact{ padding: 40px 0 70px; }
        .sect-page-contact .headtitle{ font-size: 1.7em; }
        .contact-info-box,
        .contact-form-box{ padding: 22px; }
    }
    
    /* export products page */
    .sect-page-product-export{
        padding: 60px 0 100px;
    }
    .sect-page-product-export .headtitle{
        font-size: 2.2em;
        font-weight: 600;
        color: #10137c;
        margin: 0 0 12px;
    }
    .export-category-index-intro{
        max-width: 760px;
        margin: 0 auto 34px;
        text-align: center;
    }
    .export-category-index-intro p{
        margin: 0;
        color: #555;
    }
    .export-category-card-grid{
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;
    }
    .export-category-card{
        grid-column: span 2;
        display: flex;
        min-width: 0;
        overflow: hidden;
        flex-direction: column;
        border: 1px solid rgba(16, 19, 124, .08);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(16, 19, 124, .08);
        color: inherit;
        transition: transform .25s ease, box-shadow .25s ease;
    }
    .export-category-card-grid.is-five .export-category-card:nth-child(4){ grid-column: 2 / span 2; }
    .export-category-card-grid.is-five .export-category-card:nth-child(5){ grid-column: 4 / span 2; }
    .export-category-card:hover,
    .export-category-card:focus-visible{
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 19, 124, .16);
        color: inherit;
    }
    .export-category-card:focus-visible{
        outline: 3px solid var(--magenta);
        outline-offset: 4px;
    }
    .export-category-card-image{
        overflow: hidden;
        /* aspect-ratio: 3 / 2; */
        background: #f6f7fc;
    }
    .export-category-card-image img{
        display: block;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        transition: transform .35s ease;
    }
    .export-category-card:hover .export-category-card-image img{
        transform: scale(1.04);
    }
    .export-category-card-body{
        display: flex;
        min-height: 220px;
        padding: 22px 24px 24px;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
    }
    .export-category-card-body h2{
        margin: 0 0 9px;
        color: #10137c;
        font-size: 27px;
        font-weight: 500;
    }
    .export-category-card-body p{
        margin: 0 0 18px;
        color: #62646d;
        font-size: 15px;
        line-height: 1.55;
    }
    .export-category-card-link{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--magenta);
        font-size: 15px;
        font-weight: 500;
    }
    .export-category-card-link i{
        transition: transform .2s ease;
    }
    .export-category-card:hover .export-category-card-link i{
        transform: translateX(4px);
    }
    .export-category-detail-back-wrap{
        padding-top: 34px;
        background: url(../images/bg-about.webp) center top / 100% auto;
    }
    .export-category-detail-back-wrap .article-detail-back{
        margin-bottom: 0;
    }
    .site-pagination{
        display: flex;
        justify-content: center;
        margin-top: 36px;
    }
    .site-pagination .pagination{
        margin: 0;
        gap: 8px;
    }
    .site-pagination .page-link{
        min-width: 42px;
        border-radius: 12px;
        border: 1px solid rgba(16, 19, 124, .12);
        color: #10137c;
        font-weight: 500;
        text-align: center;
        box-shadow: 0 8px 20px rgba(16, 19, 124, .06);
    }
    .site-pagination .page-link:hover{
        color: #fff;
        background: var(--gradient);
        border-color: transparent;
    }
    .site-pagination .page-item.active .page-link{
        color: #fff;
        background: var(--gradient);
        border-color: transparent;
    }
    .site-pagination .page-item.disabled .page-link{
        color: #b7b8c7;
        background: #fff;
        border-color: rgba(16, 19, 124, .08);
        box-shadow: none;
    }
    @media (max-width: 991px){
        .export-category-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .export-category-card,
        .export-category-card-grid.is-five .export-category-card:nth-child(4),
        .export-category-card-grid.is-five .export-category-card:nth-child(5){ grid-column: auto; }
    }
    @media (max-width: 575px){
        .export-category-card-grid{ grid-template-columns: 1fr; }
        .export-category-card-body{ min-height: 0; }
    }
    .export-highlight{
        margin-bottom: 36px;
    }
    .export-highlight-media{
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 14px 36px rgba(16, 19, 124, 0.12);
        line-height: 0;
    }
    .export-highlight-media img{
        width: 100%;
        display: block;
        object-fit: cover;
        max-height: 420px;
    }
    .export-overview{
        margin-bottom: 28px;
    }
    .export-overview-text{
        max-width: 860px;
        color: #404041;
        line-height: 1.7;
        margin-bottom: 24px;
    }
    .export-overview-stats{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }
    .export-overview-stats li{
        min-width: 120px;
        padding: 16px 20px;
        border-radius: 16px;
        background: #f7f8ff;
        border: 1px solid rgba(16, 19, 124, 0.08);
    }
    .export-overview-stats strong{
        display: block;
        font-size: 1.6em;
        color: #10137c;
        line-height: 1.2;
    }
    .export-overview-stats span{
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6d6f71;
    }
    .export-categories-nav{
        margin: 10px 0 28px;
    }
    .export-category-tabs{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .export-category-tabs li{ margin: 0; }
    .export-category-btn{
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid rgba(16, 19, 124, 0.18);
        background: #fff;
        color: #10137c;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 42px;
        padding: 0 22px;
        border-radius: 50px;
        cursor: pointer;
        transition: all .25s ease;
    }
    .export-category-btn em{
        font-style: normal;
        opacity: .7;
        margin-left: 4px;
    }
    .export-category-btn:hover,
    .export-category-tabs li.active .export-category-btn{
        border-color: transparent;
        color: #fff;
        background: var(--gradient);
        box-shadow: 0 10px 22px rgba(129, 104, 238, 0.28);
    }
    /* .export-category-block{
        margin-bottom: 48px;
        scroll-margin-top: 140px;
    }
    .export-category-block.is-dimmed{
        opacity: .38;
    } */
    .export-category-head{
        margin-bottom: 22px;
        padding-bottom: 16px;
        /* border-bottom: 1px solid rgba(16, 19, 124, 0.1); */
    }
    .export-category-title{
        font-size: 1.6em;
        font-weight: 500;
        color: #10137c;
        margin: 0 0 8px;
        margin-bottom: 0 !important;
    }
    .export-category-title .export-highlight-media{
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 14px 36px rgba(16, 19, 124, 0.12);
        line-height: 0;
        width: 120px;
        float: left;
        margin-right: 20px;
    }
    .export-category-title span{
        display: inline-block;
        /* margin-left: 10px; */
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        background: var(--gradient);
        border-radius: 50px;
        line-height: 28px;
        padding: 0 12px;
        vertical-align: middle;
    }
    .export-category-head p{
        margin: 0;
        color: #6d6f71;
        /* max-width: 720px; */
    }
    .export-oem-content{
        display: flex;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 34px;
        padding: 30px;
        border: 1px solid rgba(16, 19, 124, .1);
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(52, 150, 254, .08), rgba(213, 7, 244, .06));
        box-shadow: 0 10px 28px rgba(16, 19, 124, .07);
    }
    .export-oem-content-mark{
        flex: 0 0 86px;
        display: grid;
        width: 86px;
        height: 86px;
        place-items: center;
        border-radius: 20px;
        background: var(--gradient);
        color: #fff;
        font-size: 25px;
        font-weight: 600;
    }
    .export-oem-content h4{
        margin: 0 0 10px;
        color: #10137c;
        font-size: 24px;
        font-weight: 500;
    }
    .export-oem-content p{
        margin: 0;
        color: #404041;
        font-size: 17px;
        line-height: 1.75;
    }
    .export-brand-block{
        margin-bottom: 34px;
        padding: 22px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid rgba(16, 19, 124, 0.08);
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.05);
    }
    .export-brand-head{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
    }
    .export-brand-logo{
        width: 140px;
        height: 65px;
        border-radius: 12px;
        background: #f7f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }
    .export-brand-logo img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .export-brand-meta h4{
        margin: 0;
        font-size: 1.15em;
        font-weight: 600;
        color: #10137c;
        line-height: 1;
    }
    .export-brand-meta span{
        font-size: 16px;
        color: #6d6f71;
        font-weight: 500;
    }
    .domestic-product-group{
        margin-bottom: 26px;
    }
    .domestic-product-group-head{
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }
    .domestic-product-group-number{
        flex: 0 0 42px;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 12px;
        background: var(--gradient);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }
    .domestic-product-group-head h4{
        margin: 0;
        color: #10137c;
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
    }
    .domestic-product-group-head > div > span{
        color: #6d6f71;
        font-size: 14px;
    }
    .export-product-grid{
        margin-left: -10px;
        margin-right: -10px;
    }
    .export-product-card{
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 18px;
    }
    .export-product-link{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        font-family: inherit;
        text-align: inherit;
        text-decoration: none;
        color: inherit;
        border-radius: 16px;
        background: #fafbff;
        border: 1px solid rgba(16, 19, 124, 0.06);
        padding: 14px 12px 16px;
        cursor: zoom-in;
        transition: all .25s ease;
        overflow: hidden;
    }
    .export-product-link::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #e3a5f9;
        z-index: 2;
        -webkit-backdrop-filter: blur(1px);
        clip-path: circle(0% at 50% 50%);
        left: 0 !important;
        z-index: -1;
    }
    .export-product-link:hover::before{
        clip-path: circle(150% at 50% 50%);
        transition: 1.5s;
        transition-property: clip-path;
        left: 0 !important;
        /* background: url(../images/decor/pattern-menu.png) #89171e; */
        background: rgba(227, 166, 246, 0.39);
        -webkit-backdrop-filter: blur(32px);
        background-blend-mode: color-burn;
        opacity: 0.95;
    
    }
    
    
    .export-product-link:hover{
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(16, 19, 124, 0.1);
        border-color: rgba(129, 104, 238, 0.25);
        color: inherit;
        text-decoration: none;
    }
    .export-product-image{
        position: relative;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .export-product-image img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .export-product-zoom{
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: rgba(16, 19, 124, 0.69);
        color: #fff;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.8);
        transition: opacity .25s ease, transform .25s ease;
    }
    .export-product-link:hover .export-product-zoom,
    .export-product-link:focus-visible .export-product-zoom{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .export-product-link:focus-visible{
        outline: 3px solid var(--magenta);
        outline-offset: 3px;
    }
    .export-product-name{
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: #10137c;
        text-align: center;
        line-height: 1.4;
        min-height: 2.8em;
    }
    .export-product-lightbox{
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 70px 24px 24px;
        background: rgba(5, 7, 27, .9);
        animation: timelineReveal .2s ease;
    }
    .export-product-lightbox-close{
        position: absolute;
        top: 20px;
        right: 20px;
        display: grid;
        width: 46px;
        height: 46px;
        padding: 0;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: background .2s ease, transform .2s ease;
    }
    .export-product-lightbox-close:hover{
        background: var(--magenta);
        transform: scale(1.06);
    }
    .export-product-lightbox-panel{
        width: min(760px, 92vw);
        max-height: calc(100vh - 100px);
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    }
    .export-product-lightbox-panel img{
        display: block;
        width: 100%;
        max-height: calc(100vh - 180px);
        padding: 24px;
        object-fit: contain;
        background: #f7f8fc;
    }
    .export-product-lightbox-panel figcaption{
        margin: 0;
        padding: 16px 22px 18px;
        color: #10137c;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
    }
    
    @media (max-width: 991px){
        .export-product-name{ min-height: 0; }
        .export-product-image{ height: 120px; }
    }
    @media (max-width: 767px){
        .sect-page-product-export{ padding: 40px 0 70px; }
        .sect-page-product-export .headtitle{ font-size: 1.7em; }
        .export-highlight-media img{ max-height: 240px; }
        .export-brand-block{ padding: 16px; }
        .export-brand-logo{ width: 70px; height: 48px; }
        .export-oem-content{
            padding: 22px;
            flex-direction: column;
        }
        .export-oem-content-mark{
            width: 66px;
            height: 66px;
            flex-basis: 66px;
            font-size: 20px;
        }
        .domestic-product-group-head h4{
            font-size: 16px;
            overflow-wrap: anywhere;
        }
        .export-product-lightbox{
            padding: 62px 12px 12px;
        }
        .export-product-lightbox-close{
            top: 10px;
            right: 10px;
        }
        .export-product-lightbox-panel img{
            padding: 14px;
        }
    }
    
    /* search results page */
    .sect-page-search{
        padding: 60px 0 100px;
    }
    .search-page-intro{
        margin-bottom: 24px;
    }
    .search-results-form{
        margin-bottom: 26px;
    }
    .search-results-input-wrap{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid rgba(16, 19, 124, 0.08);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
    }
    .search-results-input-wrap i{
        color: #10137c;
        font-size: 18px;
    }
    .search-results-input-wrap .form-control{
        border: none;
        box-shadow: none;
        background: transparent;
        min-height: 48px;
        padding: 0;
        font-size: 15px;
    }
    .search-results-input-wrap .form-control:focus{
        box-shadow: none;
    }
    .btn.btn-search-results{
        min-width: 140px;
        line-height: 46px;
        background: var(--gradient);
        color: #fff;
    }
    .search-results-state{
        margin-bottom: 10px;
    }
    .search-results-state .headtitle{
        font-size: 2em;
        color: #10137c;
        margin: 0 0 8px;
    }
    .search-results-state p{
        color: #6d6f71;
        margin: 0;
    }
    .search-results-grid{
        margin-left: -12px;
        margin-right: -12px;
    }
    .search-result-card{
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 28px;
    }
    .search-result-link{
        display: block;
        height: 100%;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        border: 1px solid rgba(16, 19, 124, 0.08);
        box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
        transition: all .25s ease;
    }
    .search-result-link:hover{
        transform: translateY(-6px);
        box-shadow: 0 18px 34px rgba(16, 19, 124, 0.12);
        color: inherit;
        text-decoration: none;
    }
    .search-result-image{
        height: 210px;
        background: #f7f8ff;
        overflow: hidden;
    }
    .search-result-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .search-result-body{
        padding: 20px 22px 24px;
    }
    .search-result-type{
        display: inline-block;
        line-height: 26px;
        padding: 0 12px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 10px;
        color: #fff;
        background: var(--gradient);
    }
    .search-result-title{
        font-size: 1.1em;
        font-weight: 500;
        color: #10137c;
        margin: 0 0 10px;
        line-height: 1.45;
    }
    .search-result-excerpt{
        color: #404041;
        margin: 0 0 14px;
        line-height: 1.65;
        font-size: 14px;
    }
    .search-result-readmore{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #10137c;
    }
    .search-results-empty{
        text-align: center;
        padding: 50px 20px;
        border-radius: 20px;
        background: #f7f8ff;
        border: 1px solid rgba(16, 19, 124, 0.08);
    }
    .search-results-empty h3{
        color: #10137c;
        margin-bottom: 8px;
    }
    .search-results-empty p{
        margin: 0;
        color: #6d6f71;
    }
    
    @media (max-width: 767px){
        .sect-page-search{ padding: 40px 0 70px; }
        .search-results-input-wrap{
            flex-wrap: wrap;
            gap: 10px;
        }
        .search-results-input-wrap .form-control{
            width: 100%;
            min-height: 40px;
        }
        .btn.btn-search-results{
            width: 100%;
        }
        .search-results-state .headtitle{
            font-size: 1.6em;
        }
    }
    
    
    /* Next.js layout helpers */
    body.search-open #search{
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
    @media (max-width: 991px){
      #mainMenu.menu-open{
        display: block !important;
      }
    }
    .home-hero{
      position: relative;
      top: -110px;
      margin-bottom: -110px;
      min-height: 78vh;
    }
    .home-hero-slide{
      min-height: 78vh;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-hero-slide::before{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(10, 12, 50, 0.35);
    }
    .home-hero-slide .container{
      position: relative;
      z-index: 2;
    }
    .nx-brand-row,
    .nx-bestseller-row,
    .nx-newproducts-grid,
    .nx-news-grid,
    .nx-certificate-grid{
      display: grid;
      gap: 20px;
    }
    .nx-brand-row{
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
    }
    .nx-brand-item{
      text-align: center;
      padding: 10px;
    }
    .nx-brand-item img{
      max-height: 70px;
      width: auto;
      max-width: 100%;
    }
    .nx-bestseller-row{
      grid-template-columns: repeat(6, minmax(0, 1fr));
      padding: 10px 20px 40px;
    }
    .nx-bestseller-item{
      text-align: center;
    }
    .nx-bestseller-item img{
      width: 100%;
      max-width: 180px;
      margin: 0 auto 14px;
      display: block;
    }
    .nx-newproducts-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 10px 20px 40px;
    }
    .nx-newproduct-card{
      min-height: 420px;
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }
    .nx-news-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .nx-certificate-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 20px;
      margin-bottom: 40px;
    }
    .nx-certificate-item{
      background: #fff;
      border-radius: 16px;
      padding: 12px;
      border: 1px solid rgba(16, 19, 124, 0.08);
    }
    .nx-certificate-item img{
      width: 100%;
      display: block;
    }
    
    /* Certification Swiper + lightbox */
    .certificate-blog .headtitle{
      margin-bottom: 24px;
    }
    .nx-certificate-swiper{
      margin-bottom: 20px;
      padding-bottom: 40px !important;
    }
    .nx-certificate-swiper .swiper-pagination{ 
        top: initial !important;
        bottom: 0px !important;
    }
    .nx-certificate-card{
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(16, 19, 124, 0.08);
      border: 1px solid rgba(16, 19, 124, 0.08);
      cursor: zoom-in;
      transition: transform .25s ease, box-shadow .25s ease;
      padding: 0;
    }
    .nx-certificate-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 16px 34px rgba(16, 19, 124, 0.14);
    }
    .nx-certificate-image{
      position: relative;
      background: #f7f8fc;
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }
    .nx-certificate-image img{
      width: 100%;
      max-height: 180px;
      object-fit: contain;
      display: block;
    }
    .nx-certificate-zoom{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(16, 19, 124, 0.88);
        color: #fff;
        font-size: 1em;
        font-weight: 500;
        letter-spacing: .03em;
        transition: opacity .25s ease, transform .25s ease;
        pointer-events: none;
    }
    .nx-certificate-card:hover .nx-certificate-zoom{
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .nx-certificate-info{
      padding: 14px 16px 16px;
    }
    .nx-certificate-info h3{
        margin: 0 0 6px;
        font-size: 1.12em;
        font-weight: 500;
        color: #10137c;
        line-height: 1.35;
    }
    .nx-certificate-info p{
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: #666;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .nx-certificate-swiper .swiper-button-prev,
    .nx-certificate-swiper .swiper-button-next{
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(129, 104, 238, 0.12);
      color: #10137c;
    }
    .nx-certificate-swiper .swiper-button-prev:after,
    .nx-certificate-swiper .swiper-button-next:after{
      font-size: 14px;
      font-weight: 500;
    }
    .nx-certificate-swiper .swiper-pagination-bullet{
      background: rgba(16, 19, 124, 0.25);
      opacity: 1;
    }
    .nx-certificate-swiper .swiper-pagination-bullet-active{
      background: var(--gradient);
    }
    
    .nx-certificate-lightbox{
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(8, 10, 40, 0.82);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: timelineReveal .2s ease;
    }
    .nx-certificate-lightbox-close{
      position: absolute;
      top: 18px;
      right: 18px;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .nx-certificate-lightbox-panel{
      width: min(920px, 100%);
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
    }
    .nx-certificate-lightbox-panel img{
      display: block;
      width: 100%;
      max-height: 70vh;
      object-fit: contain;
      background: #f4f5fa;
      padding: 24px;
    }
    .nx-certificate-lightbox-meta{
      padding: 18px 22px 22px;
    }
    .nx-certificate-lightbox-meta h3{
      margin: 0 0 8px;
      color: #10137c;
      font-size: 1.25em;
      font-weight: 800;
    }
    .nx-certificate-lightbox-meta p{
      margin: 0;
      color: #555;
      line-height: 1.65;
    }
    
    /* Customer auto slider */
    .customer-blog .headtitle{
      margin-bottom: 24px;
    }
    .nx-customer-swiper{
      margin-bottom: 20px;
    }
    .nx-customer-card{
      background: #fff;
      border: 1px solid rgba(16, 19, 124, 0.08);
      border-radius: 16px;
      min-height: 118px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      box-shadow: 0 8px 24px rgba(16, 19, 124, 0.06);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .nx-customer-card:hover{
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(16, 19, 124, 0.1);
    }
    .nx-customer-card img{
      width: 100%;
      max-height: 80px;
      object-fit: contain;
      display: block;
    }
    @media (max-width: 991px){
      .nx-brand-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .nx-bestseller-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .nx-newproducts-grid,
      .nx-news-grid,
      .nx-certificate-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nx-certificate-swiper{ padding-left: 36px; padding-right: 36px; }
    }
    @media (max-width: 767px){
      .home-hero,
      .home-hero-slide{ min-height: 60vh; }
      .nx-brand-row,
      .nx-bestseller-row,
      .nx-newproducts-grid,
      .nx-news-grid,
      .nx-certificate-grid{ grid-template-columns: 1fr 1fr; }
      .nx-certificate-swiper{
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 42px;
      }
      .nx-customer-card{
        min-height: 96px;
        padding: 12px;
      }
      .nx-certificate-info h3{ min-height: 0; }
      .nx-certificate-lightbox{ padding: 12px; }
      .nx-certificate-lightbox-panel img{
        max-height: 58vh;
        padding: 16px;
      }
    }
    
    /* ===== Next.js Swiper home carousels (match legacy Flickity look) ===== */
    /* Force Swiper hero over theme inspiro-slider absolute slide rules */
    .nx-hero-slider{
      position: relative !important;
      overflow: hidden !important;
      /* height: max(640px, 50vw) !important; */
      /* min-height: 640px !important; */
      width: 100%;
      opacity: 1 !important;
    }
    .nx-hero-slider .container{
      position: absolute !important;
      bottom: 100px;
      left: 0;
      right: 0;
      z-index: 2;
    }
    .nx-hero-swiper-fallback,
    .nx-hero-swiper-fallback .nx-hero-slide{
      width: 100%;
      height: 100vh;
      min-height: 640px;
    }
    .nx-hero-slider .nx-hero-swiper{
      width: 100%;
      height: 100%;
    }
    .nx-hero-slider .swiper-wrapper{
      height: 100%;
    }
    .nx-hero-slider .swiper-slide{
      height: 100% !important;
      opacity: 1;
    }
    .nx-hero-slider .nx-hero-slide.slide{
        position: relative !important;
        /* inset: auto !important; */
        /* width: 100% !important; */
        /* height: 100% !important; */
        display: flex !important;
        /* align-items: center; */
        justify-content: center;
        /* background-repeat: no-repeat; */
        /* background-size: cover !important; */
        /* background-position: center center !important; */
    }
    .nx-hero-slider .swiper-pagination{
      bottom: 28px !important;
      z-index: 5;
    }
    .nx-hero-slider .swiper-button-prev,
    .nx-hero-slider .swiper-button-next{
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
    }
    .nx-hero-slider .swiper-button-prev:after,
    .nx-hero-slider .swiper-button-next:after{
      font-size: 16px;
      font-weight: 500;
    }
    
    .nx-hero-slider,
    .nx-hero-swiper,
    .nx-hero-swiper .swiper-slide,
    .nx-hero-swiper .slide{
      /* height: 100vh; */
      /* min-height: 640px; */
    }
    .nx-hero-swiper .slide{
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: center; */
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .nx-hero-swiper .slide img{ 
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .nx-hero-swiper .slide::before{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(8, 10, 40, 0.35);
      opacity: 0.1;
    }
    .nx-hero-swiper .container{
      position: relative;
      z-index: 2;
    }
    .nx-hero-swiper .swiper-pagination-bullet{
      width: 10px;
      height: 10px;
      background: rgba(255,255,255,.55);
      opacity: 1;
    }
    .nx-hero-swiper .swiper-pagination-bullet-active{
      background: #fff;
    }
    
    .nx-brand-swiper .item{
      text-align: center;
      padding: 10px 0;
    }
    .nx-brand-swiper .item img{
        max-height: 100px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block;
        transition: all .3s ease-in-out;
        /* width: auto !important;
        height: auto; */
    }
    .nx-brand-swiper .item img:hover{ transform: scale(1.2);}
    
    .nx-bestseller-swiper .swiper-slide .item{
      min-height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px 20px;
      text-align: center;
    }
    .nx-bestseller-swiper .item img{
      /* max-width: 160px; */
      width: 100%;
      margin-bottom: 18px;
    }
    
    /* .nx-newproducts-swiper{
      padding: 10px 50px 40px;
    } */
    .nx-newproducts-swiper .item{
      min-height: 460px;
      /* border-radius: 28px; */
      overflow: hidden;
      /* display: flex; */
      align-items: flex-end;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover !important;
      background-color: rgba(255, 255, 255, 0.15);
      background-blend-mode: overlay;
    
    }
    .nx-newproducts-swiper .swiper-button-prev,
    .nx-newproducts-swiper .swiper-button-next,
    .nx-news-swiper .swiper-button-prev,
    .nx-news-swiper .swiper-button-next{
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      color: #fff;
    }
    .nx-newproducts-swiper .swiper-button-prev:after,
    .nx-newproducts-swiper .swiper-button-next:after,
    .nx-news-swiper .swiper-button-prev:after,
    .nx-news-swiper .swiper-button-next:after{
      font-size: 16px;
      font-weight: 500;
    }
    .nx-newproducts-swiper .swiper-button-prev:hover,
    .nx-newproducts-swiper .swiper-button-next:hover,
    .nx-news-swiper .swiper-button-prev:hover,
    .nx-news-swiper .swiper-button-next:hover{
      background: var(--gradient);
    }
    .slide-newproducts .product-image:hover img{
        transform: rotate(-10deg) scale(1.15);
    }
    .slide-newproducts .swiper-button-prev,
    .slide-newproducts .swiper-button-next{
        display: none;
    }
    
    .nx-news-swiper{
      padding: 10px 40px 30px;
    }
    .nx-news-swiper .news-item{
      height: 100%;
    }
    
    /* Smooth transform parallax (replaces janky background-attachment: fixed) */
    .nx-parallax-wrap{
      background: transparent !important;
      background-image: none !important;
    }
    .nx-parallax-wrap > .parallax-container{
      position: absolute;
      left: 0;
      right: 0;
      top: -20%;
      height: 140%;
      width: 100%;
      z-index: 0;
      opacity: 1 !important;
      pointer-events: none;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      background-size: 100% !important;
      background-position: center center !important;
      background-repeat: no-repeat;
    }
    .nx-parallax-wrap > section{
      position: relative;
      z-index: 2;
    }
    
    @media (max-width: 767px){
      .nx-hero-slider,
      .nx-hero-swiper,
      .nx-hero-swiper .swiper-slide,
      .nx-hero-swiper .slide{
        min-height: 520px !important;
        height: 70vh !important;
      }
      .nx-newproducts-swiper,
      .nx-news-swiper{
        padding-left: 12px;
        padding-right: 12px;
      }
      .nx-parallax-wrap > .parallax-container{
        top: 0;
        height: 100%;
        transform: none !important;
      }
    }
    
    /* Ensure header+slider offset works with Swiper hero */
    #header.header-modern:not(.header-active) + #slider.nx-hero-slider{
      position: relative !important;
      top: -110px;
      margin-bottom: -110px;
      z-index: 1;
    }
    
    /* Theme relied on Flickity/animate JS — keep Swiper UI visible without those scripts */
    #slider.nx-hero-slider::before{
      pointer-events: none;
      z-index: 3;
    }
    .nx-hero-slider .slide-captions > *,
    .nx-hero-slider .slide-captions .btn{
      opacity: 1 !important;
      visibility: visible !important;
    }
    .nx-hero-slider .swiper-pagination,
    .nx-hero-slider .swiper-button-prev,
    .nx-hero-slider .swiper-button-next{
      z-index: 4;
      pointer-events: auto;
    }
    /* Show sections that theme would fade in via data-animate */
    [data-animate]{
      opacity: 1 !important;
    }
    
    /* PDPA popup */
    .pdpa-popup{
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9998;
      width: min(420px, calc(100vw - 24px));
    }
    .pdpa-popup-inner{
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(16, 19, 124, 0.12);
      border-radius: 20px;
      box-shadow: 0 18px 50px rgba(16, 19, 124, 0.18);
      padding: 22px 22px 20px;
      backdrop-filter: blur(10px);
    }
    .pdpa-popup-inner h3{
      margin: 0 0 10px;
      color: #10137c;
      font-size: 1.1rem;
      font-weight: 800;
    }
    .pdpa-popup-inner p{
      margin: 0;
      color: #555;
      font-size: 14px;
      line-height: 1.65;
    }
    .pdpa-popup-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .pdpa-popup-actions .btn{
      min-width: 120px;
      text-align: center;
    }
    .pdpa-popup-actions .btn-outline{
      background: transparent;
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
    }
    .pdpa-popup-actions .btn-outline:hover{
      background: var(--gradient);
      border-color: transparent;
      color: #fff;
    }
    @media (max-width: 767px){
      .pdpa-popup{
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
      }
      .pdpa-popup-inner{
        padding: 18px 16px 16px;
        border-radius: 16px;
      }
      .pdpa-popup-actions .btn{
        min-width: 0;
        flex: 1 1 calc(50% - 5px);
      }
    }
    
    .domestic-categories-list section{
        padding: 20px 0;
    }
    
/* timeline horizontal */
.list-milestone{
    position: relative;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 555px;
    margin: 0;
    padding: 0;
}
/* .list-milestone::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #000;
} */
.list-milestone li{ position: relative;}
.list-milestone li::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 8px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #000;
}
.list-milestone li:nth-child(1)::after{ background: #f28a98;}
.list-milestone li:nth-child(2)::after{ background: #e1746e;}
.list-milestone li:nth-child(3)::after{ background: #ec6772;}
.list-milestone li:nth-child(4)::after{ background: #fbeaad;}
.list-milestone li:nth-child(5)::after{ background: #edc152;}
.list-milestone li:nth-child(6)::after{ background: #b8e472;}
.list-milestone li:nth-child(7)::after{ background: #80eab9;}
.list-milestone li:nth-child(8)::after{ background: #2cbe95;}
.list-milestone li:nth-child(9)::after{ background: #74dbd7;}
.list-milestone li:nth-child(10)::after{ background: #7496db;}
.list-milestone li:nth-child(11)::after{ background: #c5a6c7;}
.list-milestone li:nth-child(12)::after{ background: #a570ab;}
.list-milestone li.has-color::after,
.list-milestone li.has-color .inner::before{
    background: var(--milestone-color);
    background-color: var(--milestone-color);
}

.list-milestone li{
flex: 0 0 calc(100% / 12);
width: calc(100% / 12);
min-width: 0;
float: none;
height: 100%;
}
.list-milestone .inner{ 
    position: relative;
    height: 330px;
    border-left: 1px solid #1c1c1c;
}
.list-milestone li:nth-child(2n-1){
    align-content: end;
}
.list-milestone li:nth-child(2n) .inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.list-milestone li:nth-child(2n) .ml-image {order: 1;}
.list-milestone li:nth-child(2n) .ml-desc {order: 2;}
.list-milestone li:nth-child(2n) .ml-date {order: 3;}


.list-milestone li .inner::before{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    content: "";
    left: -4px;
    top: 0;
}
.list-milestone li:nth-child(2n) .inner::before{
    top: initial;
    bottom: 0;
}
.list-milestone .ml-date{
    font-size: 2em;
    font-weight: 500;
    padding: 0 10px;
}
.list-milestone .ml-desc{
    padding: 10px;
    font-size: 15px;
    font-weight: 400;
}
.list-milestone .ml-image{
    padding: 0 12px 0 0;
    line-height: 0;
    align-self: flex-start;
}
.list-milestone .ml-image img{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 140px;
    margin: 0;
    object-fit: contain;
    object-position: left center;
}