.elementor-399 .elementor-element.elementor-element-09e4ef8{--display:flex;--margin-top:-19px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;}.elementor-399 .elementor-element.elementor-element-1b7f473{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================
   DARIN LAB — INNOVATION PAGE
   PALETTE : #ef8365 CORAL / #f9e4df PINK / #ffffff
   จูนให้เป็นชุดเดียวกับหน้า 9 STEPS · PRODUCTION PROCESS
========================================================= */

.darin-innovation{
    --di-main:#e9a485;
    --di-main-dark:#d98561;   /* คอรัลเข้ม — ใช้กับตัวหนังสือ */
    --di-deep:#4f4340;        /* เทาอุ่น — หัวข้อ */

    --di-soft:#f9e4df;
    --di-soft2:#fdf4f1;
    --di-soft3:#fefaf9;

    --di-text:#4f4340;
    --di-muted:#8a7c79;
    --di-line:#f5e2db;
    --di-white:#ffffff;

    font-family: "Noto Sans Thai", sans-serif;

    color:var(--di-text);
    background:#fff;
    overflow:hidden;
}

.darin-innovation *{ box-sizing:border-box; }

.di-container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


/* =========================================================
   HERO
========================================================= */

.di-hero{
    position:relative;
    width:100%;
    background:linear-gradient(180deg,#fdf6f3,#ffffff);
}

.di-hero-wrap{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#fdf3ef;
}

.di-hero-img{
    display:block;
    width:100%;
    height:auto;
    max-height:760px;
    object-fit:cover;
    object-position:center;
    margin:0;
}

/* เชื่อมภาพปกเข้ากับเนื้อหาให้นุ่ม */
.di-hero-fade{
    position:absolute;
    left:0; right:0; bottom:0;
    height:80px;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.45) 55%,
        #ffffff 100%
    );
}


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.di-eyebrow{
    display:flex;
    align-items:center;
    gap:11px;

    margin-bottom:15px;

    color:var(--di-main-dark);

    font-size:12px;
    font-weight:800;
    letter-spacing:1.7px;

    text-transform:uppercase;
}

.di-eyebrow:before{
    content:"";
    width:31px;
    height:2px;
    flex:none;
    border-radius:999px;
    background:var(--di-main);
}

.di-heading{
    margin:0;
    color:var(--di-deep);
    font-size:clamp(31px,3.5vw,48px);
    line-height:1.18;
    font-weight:750;
    letter-spacing:-1px;
}

.di-heading span{ color:var(--di-main-dark); }

.di-lead{
    margin:19px 0 0;
    color:var(--di-muted);
    font-size:16px;
    line-height:1.95;
}

.di-green{ color:var(--di-main-dark); font-weight:750; }
.di-dark{ color:var(--di-deep); font-weight:750; }

.di-mark{
    display:inline;
    padding:1px 6px;
    color:#c85f42;
    font-weight:750;
    background:linear-gradient(
        180deg,
        transparent 18%,
        #f9e4df 18%,
        #f9e4df 91%,
        transparent 91%
    );
}

/* เส้นคั่น—✦—เส้น มอทีฟเดียวกับการ์ดบนภาพปก */
.di-div{
    flex:1;
    display:flex;
    align-items:center;
    gap:9px;
    color:#f0b9a6;
    font-size:9px;
}

.di-div:before,
.di-div:after{
    content:"";
    flex:1;
    height:1px;
    background:var(--di-line);
}


/* =========================================================
   INTRO
========================================================= */

.di-introduction{ padding:40px 0 78px; }

.di-introduction-grid{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:90px;
    align-items:end;
}

.di-introduction-copy{ max-width:720px; }


/* ชิปนำทาง — ยกมาจากชิป 4 อันบนภาพปก */

.di-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:42px;
    padding-top:34px;

    border-top:1px solid var(--di-line);
}

.di-chip{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:11px 18px 11px 13px;

    border:1px solid var(--di-line);
    border-radius:999px;

    background:#fff;

    color:var(--di-deep);
    text-decoration:none;

    font-size:14.5px;
    line-height:1.35;
    font-weight:700;

    box-shadow:0 8px 22px rgba(214,140,115,.07);

    transition:.28s ease;
}

.di-chip b{
    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;
    flex:none;

    border-radius:50%;
    background:var(--di-soft);

    color:var(--di-main-dark);
    font-size:14px;
    font-weight:800;
}

.di-chip:hover{
    transform:translateY(-3px);
    border-color:#f7c9b8;
    color:var(--di-main-dark);
    box-shadow:0 14px 30px rgba(214,140,115,.14);
}

.di-chip:hover b{
    background:var(--di-main);
    color:#fff;
}

.di-chip:focus-visible{
    outline:2px solid var(--di-main-dark);
    outline-offset:3px;
}


/* =========================================================
   INNOVATION LIST
========================================================= */

.di-innovation-area{
    position:relative;
    padding:95px 0 105px;
    background:
        radial-gradient(circle at 100% 0%,rgba(239,131,101,.09),transparent 26%),
        linear-gradient(180deg,#fdf6f3 0%,#ffffff 22%);
}

.di-section-title{
    max-width:760px;
    margin-bottom:60px;
}

.di-innovation-list{
    display:flex;
    flex-direction:column;
}

.di-innovation-item{
    position:relative;
    display:grid;
    grid-template-columns:190px 1fr;
    border-top:1px solid var(--di-line);
    scroll-margin-top:90px;
    transition:background .3s ease;
}

.di-innovation-item:last-child{
    border-bottom:1px solid var(--di-line);
}

.di-innovation-item:hover{
    background:linear-gradient(90deg,#fdf7f5,transparent 55%);
}


/* NUMBER AREA */

.di-innovation-index{
    position:relative;
    padding:39px 30px 45px 5px;
    border-right:1px solid var(--di-line);
}

.di-index-number{
    color:var(--di-main);
    font-size:54px;
    line-height:1;
    font-weight:300;
    letter-spacing:-2px;
    transition:color .3s ease;
}

.di-innovation-item:hover .di-index-number{
    color:var(--di-main-dark);
}

.di-index-category{
    display:block;
    margin-top:24px;
    color:var(--di-main-dark);
    font-size:14px;
    line-height:1.4;
    letter-spacing:1.7px;
    font-weight:800;
}


/* MAIN CONTENT */

.di-innovation-content{ padding:38px 0 45px 42px; }

.di-innovation-head{
    display:grid;
    grid-template-columns:1fr .95fr;
    gap:60px;
    margin-bottom:28px;
}

.di-innovation-title{
    margin:0;
    color:var(--di-deep);
    font-size:clamp(24px,2.4vw,35px);
    line-height:1.35;
    font-weight:750;
}

.di-innovation-title small{
    display:block;
    margin-top:7px;
    color:var(--di-main-dark);
    font-size:12px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:1.1px;
}

.di-innovation-description{
    margin:0;
    color:var(--di-muted);
    font-size:15px;
    line-height:1.9;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.di-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.di-feature{
    position:relative;
    min-height:120px;
    padding:22px 19px;
    overflow:hidden;

    border:1px solid #f7e3dc;
    border-radius:18px;

    background:linear-gradient(145deg,#fff,#fdf7f5);

    transition:.28s ease;
}

.di-feature:hover{
    transform:translateY(-4px);
    border-color:#f5cbba;
    background:#fff;
    box-shadow:0 18px 36px rgba(214,140,115,.11);
}

.di-feature:after{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    right:-32px;
    top:-32px;
    border-radius:50%;
    background:rgba(239,131,101,.09);
}

.di-feature-line{
    display:block;
    width:26px;
    height:3px;
    margin-bottom:15px;
    border-radius:20px;
    background:linear-gradient(90deg,var(--di-main),#f6b79f);
    transition:width .28s ease;
}

.di-feature:hover .di-feature-line{ width:40px; }

.di-feature strong{
    position:relative;
    z-index:2;
    display:block;
    margin-bottom:6px;
    color:var(--di-deep);
    font-size:16px;
    line-height:1.5;
    font-weight:750;
}

.di-feature p{
    position:relative;
    z-index:2;
    margin:0;
    color:var(--di-muted);
    font-size:12.8px;
    line-height:1.72;
}


/* =========================================================
   TEXTURE TAGS
========================================================= */

.di-texture-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:22px;
}

.di-texture-tag{
    padding:7px 12px;
    border:1px solid #f7e3dc;
    border-radius:999px;
    background:var(--di-soft2);
    color:var(--di-main-dark);
    font-size:12.5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.5px;
    transition:.25s ease;
}

.di-texture-tag:hover{
    color:#fff;
    background:var(--di-main);
    border-color:var(--di-main);
}


/* =========================================================
   R&D
========================================================= */

.di-rd{
    position:relative;
    padding:105px 0;
    background:#fff;
    scroll-margin-top:90px;
}

.di-rd:before{
    content:"R&D";
    position:absolute;
    right:-20px;
    top:30px;
    color:rgba(239,131,101,.07);
    font-size:clamp(110px,18vw,270px);
    line-height:1;
    font-weight:900;
    pointer-events:none;
}

.di-rd-heading{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:90px;
    align-items:end;
    margin-bottom:65px;
}

.di-rd-text{
    color:var(--di-muted);
    font-size:16px;
    line-height:1.95;
}

.di-process{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:13px;
}

.di-process-line{
    position:absolute;
    left:7%;
    right:7%;
    top:34px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        #f6c7b5 10%,
        #f6c7b5 90%,
        transparent
    );
}

.di-process-item{ position:relative; z-index:2; }

.di-process-number{
    width:68px;
    height:68px;
    margin:0 auto 18px;

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

    border:6px solid #fff;
    border-radius:50%;

    background:var(--di-soft);
    color:var(--di-main-dark);

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

    box-shadow:0 5px 18px rgba(190,120,100,.12);

    transition:.3s ease;
}

.di-process-item:hover .di-process-number{
    transform:translateY(-3px);
    color:#fff;
    background:linear-gradient(135deg,#e9a485,#d98561);
}

.di-process-card{
    min-height:255px;
    padding:24px 19px;
    border:1px solid var(--di-line);
    border-radius:20px;
    background:#fff;
    transition:.3s ease;
}

.di-process-item:hover .di-process-card{
    transform:translateY(-5px);
    border-color:#f5cbba;
    box-shadow:0 20px 40px rgba(214,140,115,.11);
}

.di-process-card h3{
    margin:0 0 14px;
    color:var(--di-deep);
    font-size:16.5px;
    line-height:1.5;
    font-weight:750;
}

.di-process-card h3 span{
    display:block;
    color:var(--di-main-dark);
}

.di-process-card p{
    margin:0;
    color:var(--di-muted);
    font-size:14px;
    line-height:1.8;
}


/* LAST STEP */

.di-process-item:last-child .di-process-number{
    color:#fff;
    background:linear-gradient(135deg,#f0906f,#d86b4d);
}

.di-process-item:last-child .di-process-card{
    border-color:transparent;
    background:linear-gradient(145deg,#e9a485 0%,#d98561 100%);
}

.di-process-item:last-child .di-process-card h3,
.di-process-item:last-child .di-process-card h3 span{
    color:#fff;
}

.di-process-item:last-child .di-process-card p{
    color:rgba(255,255,255,.88);
}


/* =========================================================
   QUALITY
========================================================= */

.di-quality{
    padding:100px 0;
    background:linear-gradient(180deg,#fdf6f3 0%,#fff 100%);
}

.di-quality-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
    align-items:center;
}

.di-quality-items{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.di-quality-item{
    position:relative;
    min-height:155px;
    padding:26px 24px;
    overflow:hidden;

    border:1px solid var(--di-line);
    border-radius:20px;

    background:#fff;

    box-shadow:0 10px 35px rgba(214,140,115,.05);

    transition:.28s ease;
}

/* แถบคอรัลด้านซ้าย — โผล่ตอน hover */
.di-quality-item:before{
    content:"";
    position:absolute;
    left:0;
    top:22px;
    bottom:22px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:var(--di-main);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .32s cubic-bezier(.22,.8,.3,1);
}

.di-quality-item:hover{
    transform:translateY(-4px);
    border-color:#f5cbba;
    box-shadow:0 20px 42px rgba(214,140,115,.13);
}

.di-quality-item:hover:before{ transform:scaleY(1); }

.di-quality-item span{
    display:block;
    margin-bottom:18px;
    color:var(--di-main-dark);
    font-size:18px;
    font-weight:800;
    letter-spacing:1.3px;
}

.di-quality-item strong{
    display:block;
    margin-bottom:7px;
    color:var(--di-deep);
    font-size:16px;
    line-height:1.5;
}

.di-quality-item p{
    margin:0;
    color:var(--di-muted);
    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   FINAL
========================================================= */

.di-final{ padding:15px 0 105px; }

.di-final-box{
    position:relative;
    min-height:330px;
    padding:58px;

    display:flex;
    align-items:center;

    overflow:hidden;
    border-radius:30px;

    background:linear-gradient(
        125deg,
        #ea8467 0%,
        #dd7355 55%,
        #cf6146 100%
    );

    color:#fff;

    box-shadow:0 24px 55px rgba(207,97,70,.20);
}

.di-final-box:before{
    content:"";
    position:absolute;
    width:390px;
    height:390px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    right:-100px;
    top:-180px;
}

.di-final-box:after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    right:100px;
    bottom:-170px;
    background:rgba(255,255,255,.14);
}

.di-final-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.di-final-label{
    margin-bottom:15px;
    color:#ffe2d7;
    font-size:12px;
    letter-spacing:2px;
    font-weight:800;
}

.di-final-title{
    margin:0;
    font-size:clamp(29px,4vw,47px);
    line-height:1.28;
    font-weight:650;
}

.di-final-title span{ color:#ffe2d7; }

.di-final-description{
    max-width:660px;
    margin:18px 0 0;
    color:rgba(255,255,255,.88);
    font-size:14px;
    line-height:1.9;
}


/* =========================================================
   REVEAL
========================================================= */

.di-reveal{
    opacity:0;
    transform:translateY(26px);
    transition:
        opacity .7s cubic-bezier(.2,.7,.2,1),
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.di-reveal.is-visible{
    opacity:1;
    transform:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

    .di-introduction-grid,
    .di-rd-heading,
    .di-quality-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .di-innovation-item{ grid-template-columns:150px 1fr; }

    .di-innovation-head{
        grid-template-columns:1fr;
        gap:15px;
    }

    .di-feature-grid{ grid-template-columns:repeat(2,1fr); }

    .di-process{ grid-template-columns:repeat(2,1fr); }

    .di-process-line{ display:none; }

    .di-process-item:last-child{ grid-column:1 / -1; }

    .di-process-item:last-child .di-process-card{ min-height:auto; }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .di-container{ width:calc(100% - 28px); }

    .di-hero-img{
        max-height:none;
        object-fit:contain;
    }

    .di-hero-fade{ height:35px; }

    .di-introduction{ padding:35px 0 58px; }

    .di-heading{
        font-size:31px;
        letter-spacing:-.5px;
    }

    .di-lead{
        font-size:14px;
        line-height:1.85;
    }

    .di-chips{
        margin-top:30px;
        padding-top:26px;
        gap:8px;
    }

    .di-chip{
        padding:9px 14px 9px 10px;
        font-size:11px;
    }

    .di-innovation-area{ padding:65px 0 70px; }

    .di-section-title{ margin-bottom:35px; }

    .di-innovation-item{
        display:block;
        border-top:1px solid var(--di-line);
    }

    .di-innovation-item:hover{ background:none; }

    .di-innovation-index{
        padding:20px 0 17px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-right:0;
        border-bottom:1px solid #f7e9e4;
    }

    .di-index-number{ font-size:38px; }

    .di-index-category{
        margin-top:0;
        text-align:right;
    }

    .di-innovation-content{ padding:24px 0 34px; }

    .di-innovation-head{ margin-bottom:20px; }

    .di-innovation-title{ font-size:22px; }

    .di-innovation-description{ font-size:13.8px; }

    .di-feature-grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    .di-feature{
        min-height:auto;
        padding:18px;
    }

    .di-rd{ padding:70px 0; }

    .di-rd:before{ font-size:100px; }

    .di-rd-heading{ margin-bottom:40px; }

    .di-rd-text{ font-size:14px; }

    .di-process{
        grid-template-columns:1fr;
        gap:11px;
    }

    .di-process-item,
    .di-process-item:last-child{ grid-column:auto; }

    .di-process-item{
        display:grid;
        grid-template-columns:53px 1fr;
        gap:12px;
    }

    .di-process-number{
        width:51px;
        height:51px;
        margin:3px 0 0;
        border-width:4px;
    }

    .di-process-card{
        min-height:auto;
        padding:20px;
    }

    .di-quality{ padding:70px 0; }

    .di-quality-items{ grid-template-columns:1fr; }

    .di-final{ padding-bottom:70px; }

    .di-final-box{
        min-height:auto;
        padding:36px 25px;
        border-radius:22px;
    }

    .di-final-title{ font-size:29px; }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .darin-innovation *,
    .darin-innovation *:before,
    .darin-innovation *:after{
        animation:none !important;
        transition:none !important;
    }

    .di-reveal{
        opacity:1;
        transform:none;
    }

}/* End custom CSS */