/* ═══════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════ */
:root {
--gold:#C8952A; --gold-light:#D4A843; --gold-pale:#E8C06A; --gold-dark:#A8780F;
--dark:#111108; --dark2:#1A1A12; --cream:#F5F0E8; --cream2:#EDE7DA;
--white:#FFFFFF; --grey:#F4F4F4; --text:#1A1A1A; --text-mid:#555550; --text-lt:#888880;
--en:'Kanit',sans-serif; --th:'Kanit',sans-serif;
}
/* ══ GLOBAL FONT: Kanit ══ */
*,*::before,*::after { font-family: 'Kanit', sans-serif !important; }
html, body { font-family: 'Kanit', sans-serif !important; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Kanit',sans-serif;font-size:16px;line-height:1.7;color:var(--text);overflow-x:hidden;background:#fff;}
h1,h2,h3,h4,h5,h6{font-family:var(--en);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
/* ═══════ PREVIEW NAV ═══════ */
/* page wrappers */
/* ═══════ BUTTONS ═══════ */
.jta-btn{
display:inline-flex;align-items:center;justify-content:center;
padding:13px 30px;border-radius:50px;font-family:var(--th);font-weight:700;font-size:.95rem;
transition:all .3s;white-space:nowrap;cursor:pointer;border:none;text-decoration:none;
}
.jta-btn--gold{background:var(--gold);color:#fff;box-shadow:0 4px 18px rgba(200,149,42,.35);}
.jta-btn--gold:hover{background:var(--gold-dark);transform:translateY(-2px);}
.jta-btn--outline{background:transparent;border:2px solid var(--gold);color:var(--gold);}
.jta-btn--outline:hover{background:var(--gold);color:#fff;}
.jta-btn--white{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;}
.jta-btn--white:hover{background:rgba(255,255,255,.12);}
.jta-btn--lg{padding:16px 40px;font-size:1rem;}
/* ═══════ HEADER ═══════ */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom:1px solid transparent;
box-shadow:none;
display:flex;align-items:center;justify-content:space-between;
padding:0 48px;height:90px;
transition:background .3s ease, height .3s ease, box-shadow .3s ease,
border-color .3s ease, backdrop-filter .3s ease;
}
.jta-logo-circle{
width:auto;height:auto;border-radius:0;border:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;
}
.jta-logo-jta{font-family:var(--en);font-size:1.15rem;font-weight:700;color:var(--gold);letter-spacing:.1em;line-height:1;}
.jta-logo-acc{font-family:var(--en);font-size:.38rem;color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin-top:2px;}
.site-header nav{display:flex;align-items:center;gap:4px;}
.site-header nav a{font-family:var(--en);font-size:.92rem;font-weight:500;color:rgba(255,255,255,.88);padding:8px 14px;border-radius:8px;transition:color .3s;}
.site-header nav a:hover,.site-header nav a.active{color:var(--gold);font-weight:700;}
.jta-header-cta{display:inline-flex;align-items:center;padding:12px 28px;border-radius:50px;font-family:var(--en);font-size:.88rem;font-weight:700;background:var(--gold);color:#fff;margin-left:20px;transition:all .3s;box-shadow:0 4px 16px rgba(200,149,42,.3);}
.jta-header-cta:hover{background:var(--gold-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,149,42,.4);}
/* ═══════ HERO SLIDER ═══════ */
.jta-hero{position:relative;height:100vh;min-height:600px;overflow:hidden;}
.jta-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;}
.jta-slide.is-active{opacity:1;visibility:visible;}
.jta-slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 6s ease;}
.jta-slide.is-active .jta-slide__bg{transform:scale(1.04);}
.jta-slide__overlay{position:absolute;inset:0;}
.jta-slide--light .jta-slide__bg{background-color:#F0EAD8;} /* fallback only — background-image from inline style takes precedence */
.jta-slide--light .jta-slide__overlay{background:linear-gradient(90deg,transparent 35%,rgba(237,229,214,.65) 58%,rgba(237,229,214,.92) 100%);}
.jta-slide--dark .jta-slide__bg{background:linear-gradient(135deg,#1a1408 0%,#0e0b05 100%);}
.jta-slide--dark .jta-slide__overlay{background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.45) 55%,transparent 100%);}
.jta-slide--mixed .jta-slide__bg{background:linear-gradient(135deg,#0a1008 0%,#0e150a 100%);}
.jta-slide--mixed .jta-slide__overlay{background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.5) 60%,transparent 100%);}
.jta-slide__gold-frame{position:absolute;top:90px;right:64px;width:260px;height:320px;border:2px solid rgba(200,149,42,.5);border-radius:4px;pointer-events:none;z-index:1;}
.jta-slide__gold-frame::after{content:'';position:absolute;inset:12px;border:1px solid rgba(200,149,42,.25);}
.jta-wrap{max-width:1280px;margin:0 auto;padding:0 48px;position:relative;z-index:2;height:100%;display:flex;align-items:center;}
.jta-slide__inner{display:flex;align-items:center;width:100%;height:100%;}
.jta-slide__inner--light{justify-content:flex-end;}
.jta-slide__inner--dark,.jta-slide__inner--mixed{justify-content:flex-start;}
.jta-slide__content{max-width:600px;padding:20px 0;}
.jta-slide__title{font-family:var(--th);font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:900;line-height:1.25;margin-bottom:20px;}
.jta-slide--light .jta-slide__inner--light{text-align:right;}
.jta-slide--light .jta-slide__title{color:var(--gold);}
.jta-slide--light .jta-slide__subtitle{color:rgba(60,50,20,.8);}
.jta-slide--light .jta-slide__actions{justify-content:flex-end;}
.jta-slide--dark .jta-slide__title,.jta-slide--mixed .jta-slide__title{color:#fff;}
.jta-slide--dark .jta-slide__subtitle,.jta-slide--mixed .jta-slide__subtitle{color:rgba(255,255,255,.8);}
.jta-slide__subtitle{font-size:clamp(.88rem,1.5vw,1.05rem);line-height:1.8;margin-bottom:32px;max-width:520px;}
.jta-slide__actions{display:flex;gap:12px;flex-wrap:wrap;}
.jta-hero__dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10;}
.jta-hero__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.5);cursor:pointer;transition:all .3s;}
.jta-hero__dot.is-active{background:var(--gold);border-color:var(--gold);transform:scale(1.25);}
.jta-hero__arrows{position:absolute;bottom:20px;right:48px;display:flex;gap:10px;z-index:10;}
.jta-hero__arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.8);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;transition:all .3s;}
.jta-hero__arrow:hover{border-color:var(--gold);color:var(--gold);}
/* ═══════ LOGOS ═══════ */
.sec-pad{padding:72px 0;}
.sec-pad-sm{padding:48px 0;}
.jta-wrap-std{max-width:1280px;margin:0 auto;padding:0 48px;}
.jta-logos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.jta-logo-box{background:var(--grey);border-radius:14px;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;overflow:hidden;filter:grayscale(1);transition:filter .3s;}
.jta-logo-box:hover{filter:grayscale(0);}
.jta-logo-box span{font-family:var(--en);font-size:.85rem;font-weight:600;color:var(--text-mid);}
/* ═══════ TESTIMONIALS ═══════ */
.jta-test-wrap{background:var(--grey);border-radius:20px;padding:32px 24px;}
.jta-test-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.jta-test-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.07);}
.jta-test-card__stars{color:var(--gold);font-size:1.1rem;margin-bottom:12px;letter-spacing:2px;}
.jta-test-card__text{font-size:.88rem;line-height:1.65;margin-bottom:20px;}
.jta-test-card__author{display:flex;align-items:center;gap:12px;}
.jta-test-card__avatar{width:40px;height:40px;border-radius:50%;background:var(--grey);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem;}
.jta-test-card__name{font-weight:700;font-size:.88rem;}
.jta-test-card__role{font-size:.78rem;color:var(--text-mid);}
/* ═══════ PAIN POINTS ═══════ */
.sec-dark-texture{background:linear-gradient(160deg,#0e0c06 0%,#1a1408 50%,#0a0804 100%);position:relative;overflow:hidden;}
.sec-dark-texture::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 65% 60%,rgba(180,120,40,.18),transparent 70%),radial-gradient(ellipse 40% 40% at 30% 40%,rgba(160,100,30,.12),transparent 65%);pointer-events:none;}
.jta-pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.jta-pain-card{background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border-radius:14px;padding:28px 22px 32px;box-shadow:0 4px 20px rgba(0,0,0,.07);}
.jta-pain-card__icon{font-size:2.6rem;margin-bottom:14px;}
.jta-pain-card__icon img{width:62px !important;height:62px !important;}
.jta-pain-card__title{font-family:var(--th);font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:12px;line-height:1.4;}
.jta-pain-card__body{font-size:.87rem;color:var(--text-mid);line-height:1.7;}
.jta-pain-banner{background:var(--dark);padding:28px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;}
.jta-pain-banner p{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.6;flex:1;}
.jta-pain-banner strong{color:var(--gold);font-weight:800;}
/* ═══════ SERVICES GRID ═══════ */
.jta-svcs-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:14px;
height:620px;
}
.jta-svc-card{
position:relative;border-radius:18px;
overflow:hidden;cursor:pointer;
}
.jta-svc-card__bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:transform .65s ease;
}
.jta-svc-card:hover .jta-svc-card__bg{transform:scale(1.06);}
.jta-svc-card__overlay{
position:absolute;inset:0;
background:linear-gradient(170deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.72) 100%);
}
.jta-svc-card__content{
position:absolute;inset:0;
display:flex;flex-direction:column;
justify-content:flex-end;
padding:28px 32px;z-index:2;
}
.jta-svc-card__title{
font-family:var(--th);
font-size:1.35rem;font-weight:900;font-style:italic;
color:#C8952A;
margin-bottom:8px;
text-shadow:0 2px 12px rgba(0,0,0,.5);
line-height:1.2;
}
.jta-svc-card__sub{
font-family:var(--th);
font-size:.9rem;font-weight:500;
color:rgba(255,255,255,.88);
margin-bottom:20px;
line-height:1.55;
}
/* Big card: left, spans 2 rows */
.jta-svc-card--big{grid-row:1/span 2;}
.jta-svc-card--big .jta-svc-card__title{font-size:1.7rem;}
.jta-svc-card--big .jta-svc-card__sub{font-size:.95rem;}
/* Button style: gold pill, dark text */
.jta-svc-card .jta-btn--white,
.jta-svc-card .jta-btn {
background: #C8952A !important;
color: #1A1A1A !important;
border: none !important;
border-radius: 50px !important;
padding: 12px 28px !important;
font-family: var(--th) !important;
font-size: .9rem !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
text-decoration: none !important;
transition: background .25s, transform .18s !important;
box-shadow: 0 4px 16px rgba(200,149,42,.35) !important;
}
.jta-svc-card .jta-btn--white:hover,
.jta-svc-card .jta-btn:hover {
background: #a07020 !important;
transform: translateY(-2px) !important;
}
/* ═══════ SOLUTIONS ═══════ */
.jta-sol-card{display:none;grid-template-columns:1fr 1fr;min-height:480px;border-radius:20px;overflow:hidden;box-shadow:0 16px 64px rgba(0,0,0,.2);}
.jta-sol-card.is-active{display:grid;}
.jta-sol-card__photo{position:relative;background-size:cover;background-position:center top;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;}
.sol-ph-bg{position:absolute;inset:0;}
.sol-ph-icon{position:relative;z-index:2;opacity:.4;}
.jta-sol-card__bokeh{position:absolute;inset:0;pointer-events:none;}
.jta-sol-card__bokeh::before,.jta-sol-card__bokeh::after{content:'';position:absolute;border-radius:50%;filter:blur(28px);opacity:.35;}
.jta-sol-card__bokeh::before{width:180px;height:180px;background:rgba(200,149,42,.55);top:10%;right:10%;}
.jta-sol-card__bokeh::after{width:120px;height:120px;background:rgba(200,149,42,.35);bottom:20%;left:15%;}
.jta-sol-card__body{background:#fff;border:2px solid var(--gold);display:flex;flex-direction:column;justify-content:center;padding:52px 48px;}
.jta-sol-card__eyebrow{font-family:var(--en);font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mid);margin-bottom:12px;}
.jta-sol-card__heading{font-family:var(--en);font-size:clamp(1.2rem,2vw,1.65rem);font-weight:800;color:var(--text);margin-bottom:12px;}
.jta-sol-card__hook{font-family:var(--th);font-size:clamp(1rem,1.8vw,1.35rem);font-weight:800;color:var(--gold);line-height:1.4;margin-bottom:20px;}
.jta-sol-card__desc{font-size:.9rem;color:var(--text-mid);line-height:1.75;margin-bottom:32px;}
.jta-sol-card__nav{display:flex;align-items:center;justify-content:space-between;}
.jta-sol-card__arrows{display:flex;gap:8px;}
.jta-sol-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font-size:.95rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;background:none;}
.jta-sol-arrow:hover{background:var(--gold);color:#fff;}
/* ═══════ INSIGHTS ═══════ */
.jta-ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px;}
.jta-ins-card{border-radius:14px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s;}
.jta-ins-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.12);}
.jta-ins-card__thumb{position:relative;padding-top:58%;overflow:hidden;background:var(--dark2);}
.jta-ins-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.jta-ins-card__play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;}
.jta-ins-card__play-ico{width:60px;height:60px;border-radius:50%;background:rgba(200,149,42,.92);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;padding-left:4px;box-shadow:0 6px 28px rgba(0,0,0,.4);}
.jta-ins-card__cat{position:absolute;top:14px;left:14px;background:var(--gold);color:#fff;font-family:var(--en);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:4px;z-index:3;}
.jta-ins-card__body{padding:20px 22px 24px;background:#fff;}
.jta-ins-card__title{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.45;}
.jta-ins-card__meta{font-family:var(--en);font-size:.78rem;font-weight:600;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;}
/* ═══════ SECTION LABELS ═══════ */
.sec-label{font-family:var(--en);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block;}
.sec-title-dark{font-family:var(--th);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:var(--text);}
.sec-title-light{font-family:var(--th);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:#fff;}
.sec-sub{font-size:.95rem;color:var(--text-mid);line-height:1.75;margin-top:14px;}
.sec-sub-lt{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.75;margin-top:14px;}
/* ═══════ WHY JTA — HERO ═══════ */
.wjhero{
position:relative;
height:100vh;min-height:600px;
overflow:hidden;
display:flex;
--wj-bg: url('');
background:#F5EFE2;
}
/* BG image layer */
.wjhero__bg{
position:absolute;inset:0;z-index:0;
background-image:var(--wj-bg);
background-size:cover;
background-position:center top;
}
/* Fallback gradient เมื่อไม่มีรูป */
.wjhero__bg-fallback{
position:absolute;inset:0;z-index:0;
background:linear-gradient(135deg,#F5EFE2 0%,#EAE0CC 40%,#F0E4C0 60%,rgba(240,210,150,.6) 100%);
}
/* Grid texture overlay */
.wjhero__grid-tex{
position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:
repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(200,149,42,.03) 80px),
repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(200,149,42,.03) 80px);
}
/* Person image layer (absolute, ซ้าย) */
.wjhero__person{
position:absolute;
left:0;bottom:0;
width:40%;max-width:500px;
height:100%;
z-index:2;
display:flex;align-items:flex-end;
}
.wjhero__person-ph{
width:100%;height:100%;
display:flex;align-items:flex-end;justify-content:center;
overflow:hidden;
}
/* Content: right side */
.wjhero__content{
position:relative;z-index:3;
width:100%;
max-width:1380px;margin:0 auto;
padding:0 72px;
height:100%;
display:flex;
align-items:center;
justify-content:flex-end;
}
.wjhero__box{
max-width:600px;
display:flex;flex-direction:column;
align-items:flex-end;
padding:0 0 80px;
}
/* Badge */
.wjhero__badge{
display:inline-block;
background:rgba(200,149,42,.15);
border:1px solid rgba(200,149,42,.4);
border-radius:50px;
padding:7px 22px;
margin-bottom:24px;
}
.wjhero__badge span{
font-family:var(--en);font-size:.75rem;font-weight:700;
color:var(--gold);letter-spacing:.1em;text-transform:uppercase;
}
/* ═══════ WHY JTA — TEAM CARDS ═══════ */
.wj-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.wj-member__photo{border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#F0EAD8,#E0D4C0);aspect-ratio:3/4;margin-bottom:24px;display:flex;align-items:center;justify-content:center;}
/* ═══════ FOOTER ═══════ */
.site-footer{background:var(--dark);border-top:1px solid rgba(200,149,42,.2);padding:64px 0 0;}
.footer-grid{max-width:1280px;margin:0 auto;padding:0 48px 56px;display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:48px;}
.jta-footer-logo-circle{width:120px;height:120px;border-radius:50%;border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px;}
.jta-footer-logo-jta{font-family:var(--en);font-size:1.8rem;font-weight:700;color:var(--gold);letter-spacing:.1em;line-height:1;}
.jta-footer-logo-acc{font-family:var(--en);font-size:.5rem;color:var(--gold);letter-spacing:.22em;text-transform:uppercase;margin-top:4px;}
.jta-footer-tagline{font-family:var(--th);font-size:.95rem;color:var(--gold-pale);line-height:1.7;font-weight:600;}
.footer-col-title{font-family:var(--en);font-size:1rem;font-weight:600;color:#fff;margin-bottom:20px;}
.footer-ci-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.footer-ci-icon{width:32px;height:32px;flex-shrink:0;border:1.5px solid rgba(200,149,42,.5);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.85rem;}
.footer-ci-text{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.5;padding-top:4px;}
.footer-ci-text strong{color:rgba(255,255,255,.75);}
.footer-office-row{display:flex;gap:12px;}
.footer-office-pin{color:var(--gold);font-size:1.2rem;flex-shrink:0;margin-top:2px;}
.footer-office-name{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:6px;}
.footer-office-addr{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.65;}
.footer-link{font-size:.88rem;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:8px;transition:color .3s;margin-bottom:10px;}
.footer-link::before{content:'•';color:var(--gold);}
.footer-link:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(200,149,42,.12);padding:20px 48px;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
.footer-copy{font-size:.82rem;color:rgba(255,255,255,.45);text-align:center;}
.footer-social{display:flex;gap:12px;}
.footer-social-btn{
width:42px;height:42px;
border:1.5px solid rgba(200,149,42,.6);
border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:transparent;
color:var(--gold);
transition:all .3s;
text-decoration:none;
flex-shrink:0;
}
.footer-social-btn svg{
width:18px;height:18px;
display:block;
flex-shrink:0;
overflow:visible;
}
.footer-social-btn:hover{
background:rgba(200,149,42,.15);
border-color:var(--gold);
}
/* ═══════ SECTION BG HELPERS ═══════ */
.bg-cream{background:var(--cream2);}
.bg-white{background:#fff;}
.bg-dark{background:linear-gradient(160deg,#0a0804 0%,#1a1408 50%,#0e0b05 100%);position:relative;}
.bg-dark::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 65% 60%,rgba(180,120,40,.2),transparent 70%),radial-gradient(ellipse 35% 40% at 25% 40%,rgba(150,100,20,.14),transparent 65%);pointer-events:none;}
.person-ph{width:64px;height:64px;border-radius:50%;background:rgba(200,149,42,.15);display:flex;align-items:center;justify-content:center;}
.person-ph svg{opacity:.5;}
/* ═══════ SCROLL INDICATOR ═══════ */
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;}
.scroll-hint span{font-family:var(--en);font-size:.65rem;letter-spacing:.15em;color:rgba(255,255,255,.5);text-transform:uppercase;}
.scroll-hint__arrow{width:1px;height:40px;background:linear-gradient(180deg,rgba(200,149,42,.6),transparent);animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(.8);}50%{opacity:1;transform:scaleY(1);}}
/* ═══════ DIVIDERS ═══════ */
.gold-line{height:1px;background:linear-gradient(90deg,transparent,rgba(200,149,42,.4),transparent);margin:0;}
/* ── MEGA DROPDOWN (Our Services) ── */
.jta-nav { display:flex;align-items:center;gap:4px;margin-left:auto; }
.jta-nav-item { position:relative; }
.jta-nav-link--arrow { display:inline-flex;align-items:center;gap:4px; }
.jta-nav-chevron { transition:transform .25s ease;flex-shrink:0;color:#999; }
.jta-mega {
position:fixed;
top:90px;
left:0;
--arrow-left: 50%;
transform:translateY(8px);
width:min(880px, calc(100vw - 32px));
background:#ffffff;
border:1.5px solid rgba(200,149,42,.25);
border-radius:18px;
padding:28px 24px 24px;
box-shadow:0 12px 48px rgba(0,0,0,.14);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
z-index:9999;
}
.jta-mega::before {
content:'';
position:absolute;
top:-7px;
left:var(--arrow-left, 50%);
width:14px;height:14px;
background:#ffffff;
border-top:1.5px solid rgba(200,149,42,.25);
border-left:1.5px solid rgba(200,149,42,.25);
transform:translateX(-50%) rotate(45deg);
z-index:1;
transition:left .15s ease;
}
.jta-mega__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.jta-mega__item { display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;border-radius:12px;padding:8px 8px 12px;transition:background .22s; }
.jta-mega__item:hover { background:rgba(200,149,42,.1); }
.jta-mega__thumb { width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#f0ebe0;position:relative;flex-shrink:0; }
.jta-mega__img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s; }
.jta-mega__item:hover .jta-mega__img { transform:scale(1.06); }
.jta-mega__ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1408,#2a1c0e); }
.jta-mega__label { font-family:var(--th);font-size:.88rem;font-weight:700;color:#111108;text-align:center;line-height:1.35;transition:color .22s; }
.jta-mega__item:hover .jta-mega__label { color:var(--gold); }
/* Mega open state controlled by JS */
/* Keep mega open briefly after mouse leaves - transition delay on close */
.jta-mega {
transition:opacity .22s .15s, transform .22s .15s, visibility .22s .15s;
}
.jta-has-mega:hover .jta-mega,
.jta-has-mega:focus-within .jta-mega {
transition:opacity .18s 0s, transform .18s 0s, visibility .18s 0s;
}
.jta-has-mega:hover .jta-nav-chevron,
.jta-has-mega:focus-within .jta-nav-chevron { transform:rotate(180deg);color:var(--gold); }
.jta-has-mega:hover .jta-nav-link--arrow,
.jta-has-mega:focus-within .jta-nav-link--arrow { color:var(--gold); }
/* === JTA RESPONSIVE SYSTEM === */
.jta-hamburger{display:none;flex-direction:column;justify-content:space-between;
width:28px;height:20px;cursor:pointer;background:none;border:none;padding:0;flex-shrink:0;}
.jta-hamburger span{display:block;width:100%;height:2.5px;background:#C8952A;border-radius:2px;transition:all .3s;}
.jta-hamburger.open span:nth-child(1){transform:translateY(8.75px) rotate(45deg);}
.jta-hamburger.open span:nth-child(2){opacity:0;}
.jta-hamburger.open span:nth-child(3){transform:translateY(-8.75px) rotate(-45deg);}
.jta-nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:199;
background:rgba(6,4,1,.97);padding:100px 28px 40px;overflow-y:auto;flex-direction:column;}
.jta-nav-mobile.open{display:flex;}
.jta-nav-mobile a,.jta-nav-mobile button{
font-family:'Kanit',sans-serif;font-size:1.2rem;font-weight:700;
color:rgba(255,255,255,.82);padding:13px 0;border-bottom:1px solid rgba(200,149,42,.12);
background:none;border-left:none;border-right:none;border-top:none;
cursor:pointer;text-align:left;display:block;text-decoration:none;transition:color .2s;}
.jta-nav-mobile a:hover,.jta-nav-mobile button:hover{color:#C8952A;}
.jta-nav-mobile-sub{padding:4px 0 8px 14px;display:flex;flex-direction:column;
border-left:2px solid rgba(200,149,42,.3);margin:4px 0 4px 4px;}
.jta-nav-mobile-sub a{font-size:.95rem;font-weight:600;padding:7px 0;border:none;color:rgba(255,255,255,.6);}
.jta-nav-mobile-sub a:hover{color:#C8952A;}
.jta-nav-mobile-cta{margin-top:20px;background:#C8952A !important;color:#fff !important;
border-radius:50px;text-align:center !important;padding:15px !important;
border:none !important;font-weight:800 !important;}
/* Section paddings fluid */
.de2-pain-wrap,.de2-modules-wrap,.de2-price-wrap,.de2-partner-inner,.de2-cta-inner,
.sl3-ecom-wrap,.sl3-factory-wrap,.sl3-sme-wrap,.sl3-cta-inner,
.ea-pain-wrap,.ea-course-inner,.ea-profit-wrap,.ea-learn-wrap,.ea-expert-wrap,.ea-cta-inner,
.kh2-wrap,.kh2-biz-wrap{padding-left:clamp(16px,5vw,80px);padding-right:clamp(16px,5vw,80px);}
/* ─── BREAKPOINT lg 1024 ─── */
@media(max-width:1024px){
.site-header{padding:0 24px;height:64px;}
.jta-nav{display:none !important;}
.jta-header-cta{display:none !important;}
.jta-hamburger{display:flex;}
.footer-grid{grid-template-columns:1fr 1fr !important;gap:28px;padding:0 24px 36px !important;}
.footer-bottom{padding:16px 24px !important;}
.ea-experts-row{grid-template-columns:repeat(2,300px);gap:32px;}
.ea-course-inner{gap:36px;}
.de2-mod-grid{grid-template-columns:repeat(3,1fr);}
.ea-learn-grid{grid-template-columns:repeat(2,1fr);}
.de2-price-grid{grid-template-columns:repeat(2,1fr) !important;gap:20px !important;}
}
/* ─── BREAKPOINT md 768 ─── */
@media(max-width:768px){
.site-header{padding:0 20px;height:60px;}
.footer-grid{grid-template-columns:1fr !important;gap:24px;padding:0 20px 28px !important;}
.footer-bottom{flex-direction:column;text-align:center;padding:14px 20px !important;}
/* Heroes — at-hero-h1 handled by dedicated at-hero responsive block */
.de2-hero-h1{font-size:clamp(1.9rem,6vw,3rem) !important;}
.sl3-h1{font-size:clamp(1.7rem,5.5vw,2.6rem) !important;}
.ea-academy-name{font-size:clamp(2rem,7vw,3.4rem) !important;}
.ea-hero-th{font-size:clamp(1.5rem,5vw,2.4rem) !important;}
.ea-hero-cta{bottom:28px !important;right:20px !important;}
.kh2-hero-title{font-size:clamp(2rem,7vw,3.8rem) !important;}
.kh2-hero-inner{padding:0 20px !important;}
.kh2-hero-cta{bottom:24px !important;right:20px !important;}
/* Grids */
.at-pricing-grid{grid-template-columns:1fr !important;}
.de2-price-grid{grid-template-columns:1fr !important;}
.de2-pcard{padding:28px 20px 32px !important;}
.de2-pcard-price{font-size:2rem !important;}
.de2-mod-grid{grid-template-columns:1fr 1fr !important;}
.de2-pain-row{grid-template-columns:1fr !important;}
.de2-pain-cards{grid-template-columns:1fr !important;}
.de2-pain-cards::before{display:none;}
.de2-partner-inner{grid-template-columns:1fr !important;gap:28px;}
.de2-cta-inner{grid-template-columns:1fr !important;gap:36px;}
.sl3-ecom-grid{grid-template-columns:1fr 1fr !important;}
.sl3-factory-grid{grid-template-columns:1fr !important;}
.sl3-sme-grid{grid-template-columns:1fr 1fr !important;}
.sl3-sdet-grid{grid-template-columns:1fr 1fr !important;}
.sl3-cta-inner{grid-template-columns:1fr !important;gap:36px;}
.sl3-hero-text{max-width:70% !important;}
.sl3-hero-tabs{gap:10px !important;}
.sl3-tab{font-size:.88rem !important;max-width:180px !important;}
.ea-pain-grid{grid-template-columns:1fr !important;}
.ea-course-inner{grid-template-columns:1fr !important;gap:28px;}
.ea-course-photo{aspect-ratio:16/9 !important;max-height:300px;}
.ea-profit-wrap{grid-template-columns:1fr !important;gap:28px;}
.ea-profit-photo{aspect-ratio:16/9 !important;}
.ea-learn-grid{grid-template-columns:1fr 1fr !important;}
.ea-experts-row{grid-template-columns:1fr !important;gap:32px;}
.ea-cta-inner{grid-template-columns:1fr !important;gap:32px;}
.ea-course-inner{padding:0 24px 24px !important;}
.kh2-row2{grid-template-columns:1fr !important;}
.kh2-row3{grid-template-columns:1fr 1fr !important;}
/* Section padding */
.de2-pain,.de2-modules,.de2-price,.de2-partner,.de2-cta,
.sl3-ecom,.sl3-factory,.sl3-sme,.sl3-cta,
.ea-pain,.ea-course,.ea-profit,.ea-learn,.ea-expert,.ea-cta,
.kh2-tax,.kh2-biz,.kh2-cta{padding-top:52px !important;padding-bottom:52px !important;}
}
/* ─── BREAKPOINT sm 480 ─── */
@media(max-width:480px){
.site-header{padding:0 14px;height:54px;}
.de2-mod-grid{grid-template-columns:1fr !important;}
.sl3-ecom-grid{grid-template-columns:1fr !important;}
.sl3-sme-grid{grid-template-columns:1fr !important;}
.sl3-sdet-grid{grid-template-columns:1fr !important;}
.sl3-hero-inner{padding:0 24px 36px !important;}
.sl3-hero-text{max-width:100% !important;margin-bottom:24px !important;}
.sl3-hero-tabs{flex-wrap:wrap !important;justify-content:flex-start !important;gap:10px !important;}
.sl3-tab{flex:none !important;width:calc(50% - 5px) !important;max-width:none !important;font-size:.85rem !important;padding:13px 8px !important;}
.ea-learn-grid{grid-template-columns:1fr !important;}
.kh2-row3{grid-template-columns:1fr !important;}
.kh2-cta-btns{flex-direction:column !important;width:100%;}
.kh2-btn{width:100% !important;}
.sl3-cta-btns,.de2-cta-actions,.ea-cta-actions{flex-direction:column;width:100%;}
.sl3-btn,.de2-btn,.ea-btn{width:100% !important;justify-content:center !important;}
.ea-experts-row{grid-template-columns:1fr;}
.footer-grid{padding:0 14px 24px !important;}
.footer-bottom{padding:12px 14px !important;}
.de2-pain,.de2-modules,.de2-price,.de2-partner,.de2-cta,
.sl3-ecom,.sl3-factory,.sl3-sme,.sl3-cta,
.ea-pain,.ea-course,.ea-profit,.ea-learn,.ea-expert,.ea-cta,
.kh2-tax,.kh2-biz,.kh2-cta{padding-top:40px !important;padding-bottom:40px !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — HOME PAGE (.jta-*)
RESPONSIVE — WHY JTA (.wj-* / .wjhero*)
RESPONSIVE — CONTACT
RESPONSIVE — HEADER / FOOTER additional fixes
═══════════════════════════════════════════════════════ */
/* ── Base: fluid containers ── */
.jta-wrap,.jta-wrap-std{
max-width:1280px;margin-left:auto;margin-right:auto;
padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px);
}
.wjhero__content{max-width:min(100%,640px) !important;}
.wjhero__box{max-width:100% !important;text-align:right !important;align-items:flex-end !important;}
.jta-slide__content,.jta-slide__subtitle{max-width:min(100%,640px);}
/* ── LG ≤1024 ── */
@media(max-width:1024px){
/* Hero slider */
.jta-slide__inner{padding:0 40px;}
/* Services grid: 4-col → 3-col */
.jta-svcs-grid{grid-template-columns:repeat(3,1fr) !important;}
/* Logos: 4-col → 3 */
.jta-logos-grid{grid-template-columns:repeat(3,1fr) !important;}
/* Pain: 3-col → 2 */
.jta-pain-grid{grid-template-columns:1fr 1fr !important;}
/* Solutions: 2-col OK */
/* Testimonials: 4→2 */
.jta-test-grid{grid-template-columns:1fr 1fr !important;}
/* Insights: 4→2 */
.jta-ins-grid{grid-template-columns:1fr 1fr !important;}
/* WhyJTA hero: hide person bg, show content */
.wjhero__person-ph{width:160px !important;height:160px !important;}
/* WhyJTA team grid: 4→3 */
.wj-team-grid{grid-template-columns:repeat(3,1fr) !important;}
/* Contact grid */
.contact-grid{grid-template-columns:1fr !important;}
/* Our Services */
.osp-svc__grid{grid-template-columns:1fr 1fr !important;}
.osp-sol__grid{grid-template-columns:1fr 1fr !important;}
.osp-acad__grid{grid-template-columns:1fr !important;}
.osp-hero__wrap{padding:0 40px !important;}
}
/* ── MD ≤768 ── */
@media(max-width:768px){
/* Slide / Hero */
.jta-slide__inner{padding:0 24px;padding-bottom:80px;}
.jta-slide__title{font-size:clamp(1.8rem,6vw,3rem) !important;}
.jta-slide__subtitle{font-size:clamp(.9rem,3vw,1.1rem) !important;max-width:100%;}
.jta-slide__actions{flex-direction:column;gap:12px;align-items:flex-start;}
.jta-btn--lg{width:auto;}
/* All 4-col → 1-col for small screens */
.jta-logos-grid{grid-template-columns:repeat(2,1fr) !important;}
.jta-svcs-grid{grid-template-columns:1fr 1fr !important;}
.jta-pain-grid{grid-template-columns:1fr !important;}
.jta-test-grid{grid-template-columns:1fr !important;}
.jta-ins-grid{grid-template-columns:1fr 1fr !important;}
/* Why JTA hero: stack content */
.wjhero{grid-template-columns:1fr !important;min-height:auto !important;}
.wjhero__person-ph{display:none !important;}
.wjhero__content{max-width:100% !important;padding:48px 24px !important;}
.wjhero__box{padding:28px !important;}
/* Why JTA team: 3→2 */
.wj-team-grid{grid-template-columns:1fr 1fr !important;}
/* Stats bar: wrap */
.jta-stat-bar,.stat-bar{flex-wrap:wrap;gap:20px !important;}
/* Our Services page */
.osp-hero__h1{font-size:clamp(1.8rem,5.5vw,2.8rem) !important;}
.osp-hero__wrap{padding:0 20px !important;}
.osp-svc__grid{grid-template-columns:1fr !important;}
.osp-sol__grid{grid-template-columns:1fr !important;}
.osp-svc__wrap,.osp-sol__wrap,.osp-acad__wrap,.osp-cta__wrap{
padding-left:20px !important;padding-right:20px !important;}
/* Contact */
.contact-grid{grid-template-columns:1fr !important;gap:32px !important;}
.contact-map{height:280px !important;}
.contact-form-wrap{padding:32px 20px !important;}
/* Accounting page extra fixes */
.at-pain-wrap{padding:0 20px !important;}
.at-pain-row{grid-template-columns:1fr !important;}
.at-service-grid{grid-template-columns:1fr 1fr !important;}
/* at-hero-inner padding handled by dedicated at-hero responsive block */
.at-pricing-wrap{padding:0 20px !important;}
/* WhyJTA cta section */
.wjcta{flex-direction:column !important;gap:16px !important;text-align:center;padding:40px 20px !important;}
.wjcta__btns{flex-direction:column;gap:12px;align-items:center;}
}
/* ── SM ≤480 ── */
@media(max-width:480px){
/* Slide */
.jta-slide__inner{padding:0 16px;padding-bottom:72px;}
.jta-slide__title{font-size:clamp(1.6rem,7vw,2.6rem) !important;}
/* Grids → 1-col */
.jta-logos-grid{grid-template-columns:1fr 1fr !important;}
.jta-svcs-grid{grid-template-columns:1fr !important;}
.jta-ins-grid{grid-template-columns:1fr !important;}
.wj-team-grid{grid-template-columns:1fr 1fr !important;}
.at-service-grid{grid-template-columns:1fr !important;}
/* Slide actions full-width */
.jta-slide__actions .jta-btn{width:100%;justify-content:center;}
/* Section padding */
.sec-pad{padding-top:44px !important;padding-bottom:44px !important;}
/* Typography */
h2.wj-sec-title,h2.sec-title,.osp-svc__headline{
font-size:clamp(1.5rem,6.5vw,2.2rem) !important;}
/* Pain cards: 1 col */
.jta-pain-grid{grid-template-columns:1fr !important;}
.jta-pain-card{padding:20px !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — ACCOUNTING & TAX (.at-*)
Additional rules beyond jta-responsive block
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
/* 6-photo service grid → 2-col */
.at-service-grid{grid-template-columns:1fr 1fr !important;}
/* CTA + form */
.at-cta .at-cta-inner{grid-template-columns:1fr !important;gap:32px;padding:0 20px !important;}
.at-fcard{margin-top:0;}
/* Hero text wraps — layout handled by dedicated at-hero responsive block below */
.at-hero-inner{flex-direction:column !important;align-items:flex-end !important;}
.at-hero-cta{align-self:flex-end !important;margin-top:20px;}
}
@media(max-width:480px){
.at-service-grid{grid-template-columns:1fr !important;}
.at-pcard-list li{font-size:.84rem !important;}
.at-pcard-price{font-size:2rem !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — DATA & ERP (.de2-*)
Additional overflow fixes
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
.de2-hero-inner{flex-direction:column;align-items:flex-start;padding:0 20px 48px !important;}
.de2-fcard,.de2-form{max-width:100% !important;}
.de2-dpbar{flex-wrap:wrap;}
.de2-pcard-price{font-size:2rem !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — SOLUTION PAGE (.sl3-*)
Additional overflow fixes
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
.sl3-ecom-wrap,.sl3-factory-wrap,.sl3-sme-wrap{padding:0 20px !important;}
.sl3-cta-inner{padding:0 20px !important;}
.sl3-fcard-name{font-size:1.5rem !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — ACADEMY (.ea-*)
Additional overflow fixes
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
.ea-pain-wrap,.ea-learn-wrap,.ea-expert-wrap{padding:0 20px !important;}
.ea-cta-inner{padding:0 20px !important;}
.ea-course-inner{padding:0 20px !important;}
.ea-profit-wrap{padding:0 20px !important;}
.ea-experts-row{padding:0 20px;}
.ea-dp-value{font-size:1.2rem !important;}
.ea-course-title{font-size:clamp(1.8rem,5vw,2.8rem) !important;}
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — KNOWLEDGE HUB (.kh2-*)
Additional overflow fixes
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
.kh2-cta-inner{padding:0 20px !important;}
.kh2-hl{font-size:clamp(1.8rem,5.5vw,3rem) !important;}
.kh2-photo{aspect-ratio:4/3 !important;}
}
/* ═══════════════════════════════════════════════════════
GLOBAL OVERFLOW PROTECTION
═══════════════════════════════════════════════════════ */
#page-home,#page-whyjta,#page-ourservices,#page-contact,
#page-accounting,#page-dataerp,#page-solution,#page-academy,
#page-knowledge{overflow-x:hidden;}
/* Image overflow fix */
#page-home img,#page-whyjta img,#page-ourservices img,
#page-contact img,#page-accounting img,#page-dataerp img,
#page-solution img,#page-academy img,#page-knowledge img{
max-width:100%;height:auto;}
/* Table overflow */
table{width:100%;overflow-x:auto;display:block;}
/* Input/form overflow */
.at-finput,.at-ftextarea,.de2-finput,.de2-ftextarea,
.sl3-input,.sl3-textarea,.ea-input,.ea-textarea,.kh2-input,.kh2-textarea,
input[type="text"],input[type="email"],input[type="tel"],textarea{
max-width:100%;width:100% !important;}
/* Global overflow-x protection */
html{overflow-x:hidden;}
body{overflow-x:hidden;}
.page,#page-home,#page-whyjta,#page-ourservices,#page-contact,
#page-accounting,#page-dataerp,#page-solution,#page-academy,#page-knowledge{overflow-x:hidden;}
*{max-width:100%;}
img,video,iframe{max-width:100%;height:auto;}
input,select,textarea{max-width:100%;}
/* === OURSERVICES === */
/* ════════════════════════════════════════════════════════
OUR SERVICES PAGE — pixel-perfect match to PDF design
All scoped with .osp- prefix
════════════════════════════════════════════════════════ */
/* ── RESET within scope ── */
.osp-section { margin:0; padding:0; box-sizing:border-box; }
*, *::before, *::after { box-sizing: inherit; }
/* ── BUTTON ── */
.osp-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 15px 38px; border-radius: 50px;
font-family: 'Kanit', sans-serif; font-size: .97rem; font-weight: 800;
text-decoration: none; border: none; cursor: pointer;
transition: background .25s, transform .2s, box-shadow .25s;
line-height: 1;
}
.osp-btn--gold { background: #C8952A; color: #fff; box-shadow: 0 6px 24px rgba(200,149,42,.38); }
.osp-btn--gold:hover { background: #aa7a1e; transform: translateY(-2px); box-shadow: 0 10px 36px rgba(200,149,42,.45); }
.osp-btn--sm { padding: 13px 30px; font-size: .9rem; }
.osp-btn--lg { padding: 18px 56px; font-size: 1.05rem; }
/* ════════════════════════
S1 — HERO
PDF p1–2: large window, bright office, gold headline bottom-left
════════════════════════ */
.osp-hero {
position: relative; height: 100vh; min-height: 640px; overflow: hidden;
}
.osp-hero__bg {
position: absolute; inset: 0;
background-size: cover; background-position: center top; z-index: 0;
}
/* Layered overlay: keep image bright right-side, darken bottom-left for text */
.osp-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(105deg, rgba(248,244,236,.72) 0%, rgba(248,244,236,.38) 38%, transparent 62%),
linear-gradient(0deg, rgba(244,238,224,.78) 0%, transparent 42%);
}
.osp-hero__wrap {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 0 72px;
height: 100%; display: flex; align-items: flex-end;
}
.osp-hero__text { padding-bottom: 96px; max-width: 580px; }
.osp-hero__h1 {
font-family: 'Kanit', sans-serif;
font-size: clamp(2.6rem, 4.5vw, 3.8rem);
font-weight: 900; color: #C8952A; line-height: 1.15; margin: 0 0 18px;
}
.osp-hero__sub {
font-family: 'Kanit', sans-serif;
font-size: 1.05rem; font-weight: 500; color: #444;
line-height: 1.78; margin: 0 0 38px;
}
/* ════════════════════════
S2 — SERVICES
PDF p3: white bg, 2-col cards, photo top 16:9, centered text, bullet list, gold CTA
════════════════════════ */
.osp-svc {
background: #fff; padding: 100px 0;
}
.osp-svc__wrap { max-width: 1280px; margin: 0 auto; padding: 0 72px; }
.osp-svc__head { text-align: center; margin-bottom: 64px; }
.osp-svc__headline {
font-family: 'Kanit', sans-serif;
font-size: clamp(1.9rem, 3vw, 2.6rem);
font-weight: 900; color: #111; margin: 0 0 14px;
}
.osp-svc__tagline {
font-family: 'Kanit', sans-serif;
font-size: 1rem; color: #666; line-height: 1.7; margin: 0;
}
.osp-svc__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.osp-card {
background: #fff;
border-radius: 20px; overflow: hidden;
box-shadow: 0 2px 24px rgba(0,0,0,.08);
transition: transform .3s, box-shadow .3s;
display: flex; flex-direction: column;
}
.osp-card:hover { transform: translateY(-8px); box-shadow: 0 20px 64px rgba(0,0,0,.13); }
.osp-card__photo {
width: 100%; aspect-ratio: 16/9;
overflow: hidden; position: relative;
background: linear-gradient(135deg, #efe6d4, #dfd0b4);
display: flex; align-items: center; justify-content: center;
}
.osp-card__photo img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s ease;
}
.osp-card:hover .osp-card__photo img { transform: scale(1.06); }
.osp-card__photo-ph {
/* shown when no image */
display: flex; align-items: center; justify-content: center;
position: absolute; inset: 0;
}
.osp-card__body { padding: 36px 36px 44px; flex: 1; display: flex; flex-direction: column; align-items: center; }
.osp-card__title {
font-family: 'Kanit', sans-serif;
font-size: 1.35rem; font-weight: 900; color: #111;
margin: 0 0 12px; text-align: center;
}
.osp-card__desc {
font-family: 'Kanit', sans-serif;
font-size: .93rem; color: #555; line-height: 1.82;
margin: 0 0 24px; text-align: center;
}
.osp-card__kw {
font-family: 'Kanit', sans-serif;
font-size: .78rem; font-weight: 700; color: #111;
letter-spacing: .08em; margin: 0 0 10px;
align-self: flex-start;
}
.osp-card__list {
list-style: none; padding: 0; margin: 0 0 32px;
align-self: flex-start; display: flex; flex-direction: column; gap: 9px;
}
.osp-card__list li {
font-family: 'Kanit', sans-serif; font-size: .91rem; color: #444;
padding-left: 20px; position: relative; line-height: 1.55;
}
.osp-card__list li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 7px; height: 7px; border-radius: 50%; background: #C8952A;
}
/* ════════════════════════
S3 — SOLUTIONS (BUSINESS PATH)
PDF p4: dark sparkle bg, 3 portrait cards, bottom overlay label
PDF p5: hover → full dark overlay + description center
════════════════════════ */
.osp-sol {
position: relative; background: #0b0907; padding: 96px 0; overflow: hidden;
}
/* Glitter bg — many tiny radial dots */
.osp-sol::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(1.8px 1.8px at 6% 11%, rgba(200,149,42,.5) 0%, transparent 100%),
radial-gradient(1.2px 1.2px at 14% 43%, rgba(255,255,255,.25) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 22% 8%, rgba(200,149,42,.38) 0%, transparent 100%),
radial-gradient(1px 1px at 31% 67%, rgba(255,255,255,.18) 0%, transparent 100%),
radial-gradient(2px 2px at 38% 26%, rgba(200,149,42,.3) 0%, transparent 100%),
radial-gradient(1.2px 1.2px at 46% 82%, rgba(255,255,255,.15) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 54% 5%, rgba(200,149,42,.42) 0%, transparent 100%),
radial-gradient(1px 1px at 62% 55%, rgba(255,255,255,.2) 0%, transparent 100%),
radial-gradient(1.8px 1.8px at 70% 19%, rgba(200,149,42,.35) 0%, transparent 100%),
radial-gradient(1.2px 1.2px at 78% 72%, rgba(255,255,255,.15) 0%, transparent 100%),
radial-gradient(2px 2px at 85% 33%, rgba(200,149,42,.28) 0%, transparent 100%),
radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.18) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 3% 88%, rgba(200,149,42,.25) 0%, transparent 100%),
radial-gradient(1.2px 1.2px at 47% 48%, rgba(255,255,255,.12) 0%, transparent 100%),
radial-gradient(1.8px 1.8px at 82% 6%, rgba(200,149,42,.3) 0%, transparent 100%),
radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,.14) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 67% 90%, rgba(200,149,42,.22) 0%, transparent 100%),
radial-gradient(1px 1px at 29% 35%, rgba(255,255,255,.1) 0%, transparent 100%);
pointer-events: none; z-index: 0;
}
.osp-sol__wrap {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 0 72px;
}
.osp-sol__title {
font-family: 'Kanit', sans-serif;
font-size: clamp(1.9rem, 3vw, 2.6rem);
font-weight: 900; color: #C8952A; text-align: center; margin: 0 0 52px;
}
.osp-sol__grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch;
}
/* ══ S3 osp-solcard — flex column: รูปบน, bar ล่าง ══ */
.osp-solcard {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 2px solid rgba(200,149,42,.5);
cursor: pointer;
display: flex;
flex-direction: column;
text-decoration: none;
box-shadow: 0 4px 24px rgba(0,0,0,.18);
transition: transform .3s ease, box-shadow .3s ease;
height: auto;
}
.osp-solcard:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(200,149,42,.25);
}
/* ── imgbox: ใช้ div wrapper ที่มี aspect-ratio แทน ── */
.osp-solcard__imgbox {
position: absolute;
inset: 0;
overflow: hidden;
}
.osp-solcard__img {
position: absolute; inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform .5s ease;
z-index: 1;
}
.osp-solcard:hover .osp-solcard__img { transform: scale(1.06); }
.osp-solcard__imgfb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
z-index: 0;
}
.osp-solcard__imgfb > div {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.osp-solcard__grad { display: none; }
/* ── Bottom bar — static flow ไม่ทับรูป ── */
.osp-solcard__bar {
position: relative;
background: rgba(245,238,220,.97);
padding: 12px 16px 14px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 3;
border-top: 1.5px solid rgba(200,149,42,.3);
transition: opacity .3s ease, transform .3s ease;
margin-top: auto;
flex-shrink: 0;
}
.osp-solcard:hover .osp-solcard__bar {
opacity: 0;
transform: translateY(4px);
pointer-events: none;
}
.osp-solcard__bar-l { display: flex; align-items: center; gap: 10px; }
/* icon ใน bar — จำกัดขนาด */
.osp-solcard__bar img { width: 48px !important; height: 48px !important; }
.osp-solcard__label {
display: flex; flex-direction: column;
font-family: 'Kanit', sans-serif;
font-size: .88rem;
font-weight: 800;
color: #C8952A;
line-height: 1.25;
}
/* ── Hover overlay — ครอบทั้ง card รวม bar ── */
.osp-solcard__desc {
position: absolute;
inset: 0;
background: linear-gradient(160deg,rgba(8,6,2,.82) 0%,rgba(20,14,4,.93) 60%,rgba(8,6,2,.97) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 28px;
opacity: 0;
transition: opacity .35s ease;
z-index: 20;
text-align: center;
}
.osp-solcard:hover .osp-solcard__desc { opacity: 1; }
.osp-solcard__desc .osp-solcard__hover-icon { margin-bottom: 14px; }
.osp-solcard__desc .osp-solcard__hover-label {
font-family: 'Kanit', sans-serif;
font-size: 1.2rem;
font-weight: 900;
color: #C8952A;
margin-bottom: 16px;
line-height: 1.25;
}
.osp-solcard__desc p {
font-family: 'Kanit', sans-serif;
font-size: .9rem;
color: rgba(255,255,255,.9);
line-height: 1.85;
margin: 0;
}
/* ════════════════════════
S4 — JTA EXECUTIVE ACADEMY
PDF p6: cream bg, woman photo LEFT (tall 3:4), content RIGHT
badge pill → big headline → body → 2 mini cards → CTA
════════════════════════ */
.osp-acad {
background: #F4EBD8; padding: 96px 0; position: relative; overflow: hidden;
}
.osp-acad::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 50% 70% at 0% 50%, rgba(200,149,42,.07), transparent 55%),
radial-gradient(ellipse 45% 60% at 100% 85%, rgba(200,149,42,.05), transparent 55%);
}
.osp-acad__wrap {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 0 72px;
display: grid; grid-template-columns: 1fr 1.15fr; gap: 88px; align-items: center;
}
/* Photo column */
.osp-acad__photocol { position: relative; }
.osp-acad__photobox {
border-radius: 24px;
overflow: hidden;
width: 100%;
max-width: 420px;
/* fixed height — reliable ทุก browser + Elementor */
height: 560px;
display: block;
position: relative;
/* รองรับ BG image ด้วย */
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.osp-acad__photobox img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.osp-acad__logocircle {
position: absolute;
bottom: -20px;
left: 50%; transform: translateX(calc(-50% - 10px));
width: 96px; height: 96px; border-radius: 50%;
border: 2.5px solid #C8952A;
background: #F4EBD8;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 4px 22px rgba(200,149,42,.22); z-index: 5;
}
.osp-acad__logocircle span:first-child {
font-family: 'Kanit', sans-serif; font-size: 1.25rem; font-weight: 700;
color: #C8952A; letter-spacing: .1em; line-height: 1;
}
.osp-acad__logocircle span:last-child {
font-family: 'Kanit', sans-serif; font-size: .38rem;
color: #C8952A; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px;
}
/* Content column */
.osp-acad__content { padding-bottom: 20px; }
.osp-acad__badge {
display: inline-flex; align-items: center; padding: 9px 22px;
border: 1.5px solid #C8952A; border-radius: 8px;
font-family: 'Kanit', sans-serif; font-size: .7rem; font-weight: 700;
color: #C8952A; letter-spacing: .14em; text-transform: uppercase;
margin-bottom: 28px;
}
.osp-acad__h2 {
font-family: 'Kanit', sans-serif; font-weight: 900;
font-size: clamp(1.7rem, 2.8vw, 2.2rem);
color: #111; line-height: 1.28; margin: 0 0 18px;
}
.osp-acad__body {
font-family: 'Kanit', sans-serif; font-size: .96rem;
color: #555; line-height: 1.88; margin: 0 0 32px;
}
.osp-acad__featgrid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 38px;
}
.osp-acad__feat {
background: #fff; border: 1.5px solid rgba(200,149,42,.3);
border-radius: 14px; padding: 20px;
display: flex; gap: 14px; align-items: flex-start;
}
/* Divider line between 2 features — per PDF p6 */
.osp-acad__featgrid { position: relative; }
.osp-acad__feat-icon {
width: 36px; height: 36px; border-radius: 50%;
border: 1.5px solid #C8952A;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.osp-acad__feat-title {
font-family: 'Kanit', sans-serif; font-size: .86rem; font-weight: 800;
color: #111; margin: 0 0 6px;
}
.osp-acad__feat-body {
font-family: 'Kanit', sans-serif; font-size: .84rem;
color: #666; line-height: 1.65; margin: 0;
}
/* ════════════════════════
S5 — CLOSING CTA
PDF p7: dark luxury meeting room interior + warm amber cast
text bottom-left, gold headline, white sub, gold pill "ติดต่อเรา"
════════════════════════ */
.osp-cta {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.osp-cta__bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center center;
background-attachment: scroll;
z-index: 0;
}
/* ซ่อน decorative elements ที่บัง bg */
.osp-cta__bg > div { display: none !important; }
.osp-cta__ov {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to right,
rgba(4,2,0,.85) 0%,
rgba(10,6,0,.70) 45%,
rgba(4,2,0,.40) 100%
);
}
.osp-cta__wrap {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto;
padding: 120px 80px;
width: 100%;
}
.osp-cta__h2 {
font-family: 'Kanit', sans-serif;
font-weight: 900;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
color: #C8952A;
line-height: 1.2;
margin: 0 0 20px;
}
.osp-cta__sub {
font-family: 'Kanit', sans-serif;
font-size: clamp(.95rem, 1.5vw, 1.1rem);
color: rgba(255,255,255,.85);
line-height: 1.85;
margin: 0 0 48px;
max-width: 480px;
}
/* Responsive */
@media (max-width: 1024px) {
.osp-cta { min-height: 80vh; }
.osp-cta__wrap { padding: 100px 48px; }
}
@media (max-width: 768px) {
.osp-cta { min-height: 70vh; }
.osp-cta__wrap { padding: 80px 24px; }
.osp-cta__ov {
background: rgba(4,2,0,.75);
}
}
@media(max-width:1024px){
.osp-svc__grid{grid-template-columns:1fr 1fr !important;}
.osp-sol__grid{grid-template-columns:1fr 1fr !important;}
.osp-acad__grid{grid-template-columns:1fr !important;}
}
@media(max-width:768px){
.osp-hero__h1{font-size:clamp(1.8rem,5.5vw,2.8rem) !important;}
.osp-section{padding:56px 0 !important;}
.osp-svc__grid,.osp-sol__grid{grid-template-columns:1fr !important;}
.osp-svc__card,.osp-sol__card{padding:20px !important;}
.osp-cta{flex-direction:column !important;gap:16px !important;text-align:center !important;}
.osp-cta__btns{flex-direction:column;gap:10px;align-items:center;}
}
@media(max-width:480px){
.osp-hero__h1{font-size:clamp(1.6rem,7vw,2.4rem) !important;}
.osp-section{padding:40px 0 !important;}
}
/* === ACCOUNTING === */
/* ══════════════════════════════════════════════════════════
ACCOUNTING & TAX PAGE · prefix: .at-
Built pixel-perfect from Acoounting_page.pdf (6 pages)
Canvas size PDF = 1440×810 px
══════════════════════════════════════════════════════════ */
/* ── Resets scoped to this page ── */
#page-accounting *, #page-accounting *::before, #page-accounting *::after {
box-sizing: border-box;
}
#page-accounting a { text-decoration: none; }
/* ── Gold CTA button (pill) — used p1, p3, p6 ── */
.at-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 38px; border-radius: 50px; border: none; cursor: pointer;
font-family: 'Kanit', sans-serif; font-size: 1rem; font-weight: 800;
white-space: nowrap; line-height: 1; text-decoration: none;
transition: background .22s, transform .18s, box-shadow .22s;
}
.at-btn-gold {
background: #C8952A; color: #fff;
box-shadow: 0 6px 22px rgba(200,149,42,.38);
}
.at-btn-gold:hover { background: #aa7a1e; transform: translateY(-2px); }
.at-btn-dark {
background: #111; color: #fff;
box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.at-btn-dark:hover { background: #000; transform: translateY(-2px); }
/* ════════════════════════════════════════════════════════
P1 HERO
▸ Full-viewport dark background (woman + tablet photo)
▸ Headline (gold, huge) + subtext = RIGHT half, vertically centered
▸ "ดูแพ็กเกจราคา" pill = bottom-right
════════════════════════════════════════════════════════ */
.at-hero {
position: relative; width: 100%; height: 100vh; min-height: 640px;
overflow: hidden; display: flex; align-items: center;
margin-top: -90px;
}
.at-hero-bg {
position: absolute; inset: 0;
background: #070503 url(var(--bg-acc-hero, #070503)) center/cover no-repeat;
z-index: 0;
/* allow ::after overlay on mobile */
isolation: isolate;
}
/* Subtle warm overlay so text pops */
.at-hero-ov {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
105deg,
rgba(5,3,1,.32) 0%,
rgba(4,3,1,.18) 48%,
rgba(3,2,0,.08) 100%
);
}
/* Bokeh orbs fallback (bottom-right quadrant) */
.at-hero-bokeh {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.at-hero-bokeh span {
position: absolute; border-radius: 50%;
filter: blur(var(--blur)); background: var(--c); opacity: var(--op);
}
.at-hero-inner {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto;
padding: 90px 72px 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* RIGHT: text block กว้างครึ่งหน้าจอ */
.at-hero-text {
display: flex; flex-direction: column; align-items: flex-start;
max-width: 560px;
text-align: left;
}
.at-hero-h1 {
font-family: 'Kanit', sans-serif;
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
font-weight: 900; color: #C8952A;
line-height: 1.3; margin: 0 0 16px;
text-align: left;
word-break: keep-all;
}
.at-hero-sub {
font-family: 'Kanit', sans-serif;
font-size: clamp(.85rem, 1.2vw, .95rem);
color: rgba(255,255,255,.85);
line-height: 1.8;
margin: 0 0 32px;
text-align: left;
}
.at-hero-cta { align-self: flex-start; }
/* ════════════════════════════════════════════════════════
P2 PAIN POINTS
▸ Very dark bg (#0d0c0a) with cracked stone/gravel texture
▸ Layout: headline LEFT (white+gold 3-line) | 3 cards RIGHT
▸ Cards: icon (gold line-art, NOT circled) connected by dotted line
▸ Title bold white, description grey-white small
▸ Bottom bar: big gold sentence (quoted words gold)
════════════════════════════════════════════════════════ */
.at-pain {
position: relative; overflow: hidden;
padding: 88px 0 72px; background: #0d0c0a;
}
/* Grain/texture overlay */
.at-pain::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 90% 55% at 50% 110%, rgba(30,20,4,.7), transparent 55%),
radial-gradient(ellipse 45% 35% at 5% 50%, rgba(22,14,3,.5), transparent 55%),
radial-gradient(ellipse 35% 28% at 95% 20%, rgba(15,10,2,.4), transparent 55%);
}
.at-pain-wrap {
position: relative; z-index: 2;
max-width: 1380px; margin: 0 auto; padding: 0 80px;
}
.at-pain-row {
display: grid; grid-template-columns: 300px 1fr; gap: 72px;
align-items: flex-start; margin-bottom: 64px;
}
/* LEFT: headline */
.at-pain-hl {
font-family: 'Kanit', sans-serif;
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 900; line-height: 1.25; margin: 0;
}
.at-pain-hl .wh { color: #fff; display: block; }
.at-pain-hl .gd { color: #C8952A; display: block; }
/* RIGHT: 3 cards with dotted connector at icon top */
.at-pain-cards {
position: relative;
display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
}
/* Dotted line across top — centered on icons (icon height ≈ 56px, so top: 28px) */
.at-pain-cards::before {
content: ''; position: absolute; z-index: 0; pointer-events: none;
top: 28px;
left: calc(100%/6); /* centre of col 1 */
right: calc(100%/6); /* centre of col 3 */
height: 1px;
background: repeating-linear-gradient(
90deg,
#C8952A 0, #C8952A 7px,
transparent 7px, transparent 16px
);
}
.at-pain-card {
position: relative; z-index: 1;
padding: 0 28px 0 20px;
display: flex; flex-direction: column; gap: 14px;
}
/* Icon — NOT circled, gold line-art at 56×56 */
.at-pain-icon { width: 56px; height: 56px; flex-shrink: 0; }
.at-pain-card-title {
font-family: 'Kanit', sans-serif; font-size: 1.08rem; font-weight: 900;
color: #fff; line-height: 1.28; margin: 0;
}
.at-pain-card-desc {
font-family: 'Kanit', sans-serif; font-size: .87rem;
color: rgba(255,255,255,.6); line-height: 1.75; margin: 0;
}
/* Bottom bar */
.at-pain-bottom {
border-top: 1px solid rgba(200,149,42,.2);
padding-top: 32px; text-align: center;
}
.at-pain-bottom p {
font-family: 'Kanit', sans-serif;
font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700;
color: rgba(255,255,255,.88); line-height: 1.55; margin: 0;
}
.at-pain-bottom .gd { color: #C8952A; }
/* ════════════════════════════════════════════════════════
P3 PRICING PLANS — "Accounting & Tax Solutions"
▸ bg = very light grey #f2f0ec (not pure white)
▸ Big bold "Accounting & Tax Solutions" headline (Kanit 900)
▸ 3 cards: gold border 2px, rounded 18px, white bg
▸ Price = very large (2.6rem+), plan name = 1.4rem bold
▸ Checklist: gold circle ✓ SVG, X for excluded
▸ Card 3: "Best Choice" pennant badge (gold banner pointing down)
▸ Card 3 CTA = dark pill; Card 1 & 2 = gold pill
════════════════════════════════════════════════════════ */
.at-price {
background: #f2f0ec; padding: 96px 0 108px;
}
.at-price-wrap { max-width: 1380px; margin: 0 auto; padding: 0 72px; }
.at-price-hl {
font-family: 'Kanit', sans-serif;
font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 900;
color: #111; text-align: center; margin: 0 0 64px;
}
/* ══ AT PRICING — 33/67 ══ */
/* Override Elementor containers */
.at-price-wrap,
.elementor-widget-container:has(.at-price-grid),
.elementor-widget:has(.at-price-grid) {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
.at-price-wrap {
padding: 0 48px;
box-sizing: border-box;
}
/* ── Grid หลัก: 33% / 67% ── */
.at-price-grid {
display: grid !important;
grid-template-columns: 1fr 2fr !important;
gap: 24px !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ── Card 1 (33%) ── */
.at-price-grid > .at-pcard {
border: 2px solid rgba(200,149,42,.5) !important;
border-radius: 18px !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.at-price-grid > .at-pcard:hover {
transform: translateY(-4px) !important;
box-shadow: 0 18px 58px rgba(200,149,42,.14) !important;
}
/* ── Wrapper Card 2+3 (67%) ── */
.at-price-grid > .at-pcards-23 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
border: 2px solid rgba(200,149,42,.5) !important;
border-radius: 18px !important;
box-sizing: border-box !important;
}
.at-price-grid > .at-pcards-23:has(.at-pcard--best) {
border-color: #C8952A !important;
}
/* ── Cards ข้างใน wrapper ── */
.at-pcards-23 > .at-pcard {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.at-pcards-23 > .at-pcard:hover {
transform: none !important;
box-shadow: none !important;
}
.at-pcards-23 > .at-pcard + .at-pcard {
border-left: 1.5px dashed rgba(200,149,42,.55) !important;
}
.at-pcard--best { border-color: #C8952A !important; }
/* ── Card base ── */
.at-pcard {
position: relative;
background: #fff;
padding: 36px 32px 40px;
display: flex;
flex-direction: column;
transition: box-shadow .28s, transform .28s;
box-sizing: border-box;
min-width: 0;
}
/* ── Typography ── */
.at-pcard-plan {
font-family: 'Kanit', sans-serif;
font-size: 1.42rem; font-weight: 900;
color: #111; margin: 0 0 8px; line-height: 1.2;
word-break: break-word;
}
.at-pcard-price {
font-family: 'Kanit', sans-serif;
font-size: 2.6rem; font-weight: 900;
color: #111; margin: 0 0 5px; line-height: 1.0;
}
.at-pcard-period {
font-family: 'Kanit', sans-serif;
font-size: .83rem; color: #999; margin: 0 0 26px;
}
.at-pcard-rule {
width: 100%; height: 1px;
background: rgba(200,149,42,.28); margin-bottom: 22px;
}
.at-pcard-list {
list-style: none; padding: 0; margin: 0 0 32px; flex: 1;
display: flex; flex-direction: column; gap: 11px;
}
.at-li {
display: flex; align-items: flex-start; gap: 10px;
font-family: 'Kanit', sans-serif;
font-size: .9rem; color: #333; line-height: 1.5;
}
.at-li--off { color: #bbb; }
.at-li-ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
/* Badge */
.at-badge {
position: absolute; top: -2px; right: 22px;
background: #C8952A; color: #fff;
font-family: 'Kanit', sans-serif;
font-size: .72rem; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; text-align: center;
padding: 8px 16px 22px; line-height: 1.25; min-width: 68px;
clip-path: polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
z-index: 5;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.at-price-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.at-price-grid > .at-pcards-23 {
grid-template-columns: 1fr 1fr !important;
}
.at-price-wrap { padding: 0 24px; }
}
@media (max-width: 600px) {
.at-price-grid > .at-pcards-23 {
grid-template-columns: 1fr !important;
}
.at-pcards-23 > .at-pcard + .at-pcard {
border-left: none !important;
border-top: 1.5px dashed rgba(200,149,42,.55) !important;
}
.at-pcard { padding: 24px 18px 28px; }
.at-price-wrap { padding: 0 16px; }
}
/* ══ end AT PRICING ══ */
/* ════════════════════════════════════════════════════════
P4 / P5 SERVICE GRID
▸ bg = off-white/light texture #f8f7f3
▸ Bold Thai headline centered
▸ 2 rows × 3 cols (row-1: full-width cards, row-2: 3 centered)
▸ Card: photo bg, gold border 1.5px, rounded 14px
▸ Bottom-left label: gold circular badge icon + Thai title (900) + price (gold)
+ diagonal arrow (gold) — all in a semi-dark gradient band
▸ HOVER: full dark overlay, icon+title+price top-left, bullet list below
════════════════════════════════════════════════════════ */
.at-grid { background: #f8f7f3; padding: 88px 0 96px; }
.at-grid-wrap { max-width: 1380px; margin: 0 auto; padding: 0 72px; }
.at-grid-hl {
font-family: 'Kanit', sans-serif;
font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900;
color: #111; text-align: center; margin: 0 0 52px;
}
.at-cards {
display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
}
/* Individual service card */
.at-sc {
position: relative; border-radius: 14px; overflow: hidden;
border: 1.5px solid rgba(200,149,42,.5);
aspect-ratio: 4/3; cursor: pointer; display: block;
}
.at-sc-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform .55s ease;
}
.at-sc:hover .at-sc-photo { transform: scale(1.07); }
/* Bottom gradient band */
.at-sc-grad {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg,
rgba(4,3,1,.92) 0%,
rgba(4,3,1,.55) 35%,
transparent 65%
);
}
/* Normal label: bottom-left */
.at-sc-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 16px 18px 18px; z-index: 2;
display: flex; align-items: flex-end; justify-content: space-between;
}
.at-sc-label-l { display: flex; align-items: center; gap: 12px; }
/* Gold icon badge — circular stamp style */
.at-sc-badge {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: rgba(200,149,42,.15);
border: 1.5px solid rgba(200,149,42,.6);
display: flex; align-items: center; justify-content: center;
}
.at-sc-title {
font-family: 'Kanit', sans-serif; font-size: .97rem; font-weight: 900;
color: #fff; margin: 0 0 3px; line-height: 1.2;
}
.at-sc-price {
font-family: 'Kanit', sans-serif; font-size: .8rem; font-weight: 700;
color: #C8952A; margin: 0;
}
/* Diagonal arrow */
.at-sc-arrow { flex-shrink: 0; }
/* HOVER: dark overlay with bullet list */
.at-sc-hover {
position: absolute; inset: 0; z-index: 3;
background: rgba(5,3,1,.88);
padding: 20px 20px 18px;
display: flex; flex-direction: column; justify-content: center;
opacity: 0; transition: opacity .3s ease;
}
.at-sc:hover .at-sc-hover { opacity: 1; }
.at-sc-hd {
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.at-sc-htitle {
font-family: 'Kanit', sans-serif; font-size: .97rem; font-weight: 900;
color: #C8952A; margin: 0; line-height: 1.2;
}
.at-sc-hprice {
font-family: 'Kanit', sans-serif; font-size: .8rem;
color: rgba(255,255,255,.6); margin: 0;
}
.at-sc-hlist {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.at-sc-hlist li {
font-family: 'Kanit', sans-serif; font-size: .82rem;
color: rgba(255,255,255,.85); line-height: 1.5;
padding-left: 14px; position: relative;
}
.at-sc-hlist li::before {
content: '•'; position: absolute; left: 0;
color: #C8952A; font-weight: 900;
}
.at-sc-hlist .hn {
font-family: 'Kanit', sans-serif; font-size: .78rem;
color: rgba(255,255,255,.5); margin-top: 4px; display: block;
padding-left: 0;
}
.at-sc-hlist .hn::before { display: none; }
/* ════════════════════════════════════════════════════════
P6 CTA + CONTACT FORM
▸ bg = dark Bangkok night skyline (city lights reflection)
▸ 2-col: LEFT text, RIGHT white rounded card
▸ LEFT: gold headline (2-line large), white subtext, gold "นัดปรึกษา" pill
+ "หรือติดต่อโดยตรงที่:" Line info (white small)
▸ RIGHT card: white, rounded-2xl, shadow
Title: "ส่งข้อความถึงเรา (Contact Form)" ← bold Sarabun, (Contact Form) = Kanit
Sub: small grey
Fields: rounded-full inputs, navy outline, label above
Textarea: rounded-2xl
Submit: gold pill full-width
════════════════════════════════════════════════════════ */
.at-cta { position: relative; overflow: hidden; padding: 88px 0; }
.at-cta-bg {
position: absolute; inset: 0; z-index: 0;
background: #060503 url(var(--bg-acc-cta, #050401)) center bottom/cover no-repeat;
}
.at-cta-ov {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(108deg,
rgba(4,3,1,.91) 0%,
rgba(7,5,1,.82) 48%,
rgba(5,4,1,.68) 100%
);
}
.at-cta-inner {
position: relative; z-index: 2;
max-width: 1380px; margin: 0 auto; padding: 0 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
/* LEFT */
.at-cta-h2 {
font-family: 'Kanit', sans-serif;
font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 900;
color: #C8952A; line-height: 1.18; margin: 0 0 18px;
}
.at-cta-sub {
font-family: 'Kanit', sans-serif; font-size: .99rem;
color: rgba(255,255,255,.8); line-height: 1.84; margin: 0 0 36px;
}
.at-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.at-cta-contact {
font-family: 'Kanit', sans-serif; font-size: .93rem;
color: rgba(255,255,255,.65); margin: 6px 0 0; line-height: 1.65;
}
.at-cta-contact strong { color: #fff; font-weight: 700; }
/* RIGHT: form card */
.at-fcard {
background: #fff; border-radius: 24px; padding: 36px 36px 40px;
box-shadow: 0 10px 72px rgba(0,0,0,.4);
}
.at-fcard-title {
font-family: 'Kanit', sans-serif; font-size: 1.38rem; font-weight: 900;
color: #111; margin: 0 0 5px; line-height: 1.3;
}
.at-fcard-title em {
font-style: normal; font-family: 'Kanit', sans-serif; font-weight: 900;
}
.at-fcard-sub {
font-family: 'Kanit', sans-serif; font-size: .84rem;
color: #888; margin: 0 0 22px;
}
.at-field { margin-bottom: 13px; }
.at-flabel {
display: block; font-family: 'Kanit', sans-serif;
font-size: .83rem; color: #333; font-weight: 600; margin-bottom: 5px;
}
/* Inputs match PDF: dark navy/indigo border, pill shape */
.at-finput, .at-ftextarea {
width: 100%; padding: 11px 17px;
border: 1.8px solid #2d3466; border-radius: 50px;
font-family: 'Kanit', sans-serif; font-size: .9rem; color: #222;
outline: none; background: #fff; transition: border .2s;
}
.at-ftextarea { border-radius: 16px; resize: vertical; min-height: 108px; }
.at-finput:focus, .at-ftextarea:focus { border-color: #C8952A; }
/* === DATAERP === */
/* ══════════════════════════════════════════════════════════
DATA & ERP v2 — prefix .de2- — 100% pixel-match PDF
══════════════════════════════════════════════════════════ */
#page-dataerp *,#page-dataerp *::before,#page-dataerp *::after{box-sizing:border-box}
#page-dataerp a{text-decoration:none}
/* ── Shared buttons ── */
.de2-btn{
display:inline-flex;align-items:center;justify-content:center;
padding:14px 40px;border-radius:50px;border:none;cursor:pointer;
font-family:'Kanit',sans-serif;font-size:1rem;font-weight:800;
white-space:nowrap;line-height:1;text-decoration:none;
transition:background .22s,transform .18s,box-shadow .22s;
}
.de2-gold{background:#C8952A;color:#fff;box-shadow:0 6px 22px rgba(200,149,42,.4)}
.de2-gold:hover{background:#aa7a1e;transform:translateY(-2px)}
.de2-dark{background:#111;color:#fff}
.de2-dark:hover{background:#000;transform:translateY(-2px)}
/* ════════════════════════════════════════
P1 — HERO
Full viewport dark bg — man at monitor (dashboard charts) center
Text BOTTOM-LEFT: h1 gold large + sub white small
CTA gold pill BOTTOM-RIGHT
PDF coords: h1 x=78-674 y=346-504 (left half)
sub x=78-879 y=512-595
CTA x=1183-1318 y=701-734 (bottom-right)
════════════════════════════════════════ */
.de2-hero{
position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;
}
.de2-hero-bg{
position:absolute;inset:0;z-index:0;
background:#050401 url(var(--bg-de-hero, #060503)) center/cover no-repeat;
}
/* dark gradient — darker at bottom-left to ensure text legibility */
.de2-hero-ov{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(0deg, rgba(3,2,1,.75) 0%, rgba(3,2,1,.4) 35%, transparent 65%),
linear-gradient(90deg, rgba(4,2,1,.55) 0%, transparent 50%);
}
.de2-hero-inner{
position:relative;z-index:2;width:100%;height:100%;
display:flex;align-items:flex-end;justify-content:space-between;
padding:0 80px 80px;
}
.de2-hero-text{max-width:680px}
.de2-hero-h1{
font-family:'Kanit',sans-serif;
font-size:clamp(3rem,5.6vw,5.2rem);
font-weight:900;color:#C8952A;
line-height:1.1;margin:0 0 18px;
}
.de2-hero-sub{
font-family:'Kanit',sans-serif;font-size:1.05rem;
color:rgba(255,255,255,.88);line-height:1.78;margin:0;
}
/* ════════════════════════════════════════
P2 — PAIN POINTS
bg = very dark (#0b0c10) with network/circuit node web pattern
LEFT: headline (white + "ตาบอด" gold underline-style)
3 icon-cards RIGHT: dotted gold line between icon tops
Bottom full-width: "เพิ่ม ความมั่นใจ ให้ทุกการตัดสินใจ ด้วยพลังของ Data"
→ เพิ่ม=white bold, ความมั่นใจ=white bold, ให้ทุกการตัดสินใจ=white, ด้วยพลังของ Data=gold
════════════════════════════════════════ */
.de2-pain{
position:relative;overflow:hidden;padding:88px 0 72px;
background:#0b0c10;
}
/* Network lines SVG-like via CSS — dark graph-paper feel */
.de2-pain-net{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.de2-pain-wrap{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;padding:0 80px;
}
.de2-pain-row{
display:grid;grid-template-columns:300px 1fr;gap:72px;
align-items:flex-start;margin-bottom:64px;
}
.de2-pain-hl{
font-family:'Kanit',sans-serif;
font-size:clamp(2rem,3vw,2.8rem);font-weight:900;line-height:1.25;margin:0;
}
.de2-pain-hl .wh{color:#fff;display:block}
.de2-pain-hl .gd{color:#C8952A}
.de2-pain-cards{
display:grid;grid-template-columns:repeat(3,1fr);position:relative;
}
/* Dotted gold connector at icon center (top:28px = half of 56px icon) */
.de2-pain-cards::before{
content:'';position:absolute;z-index:0;pointer-events:none;
top:28px;left:calc(100%/6);right:calc(100%/6);height:1px;
background:repeating-linear-gradient(90deg,#C8952A 0,#C8952A 7px,transparent 7px,transparent 16px);
}
.de2-pain-card{
position:relative;z-index:1;padding:0 28px 0 0;
display:flex;flex-direction:column;gap:14px;
}
.de2-pain-icon{width:56px;height:56px;flex-shrink:0}
.de2-pain-ctitle{
font-family:'Kanit',sans-serif;font-size:1.08rem;font-weight:900;
color:#fff;line-height:1.28;margin:0;
}
.de2-pain-cdesc{
font-family:'Kanit',sans-serif;font-size:.87rem;
color:rgba(255,255,255,.6);line-height:1.75;margin:0;
}
/* Bottom sentence */
.de2-pain-bottom{
border-top:1px solid rgba(200,149,42,.2);padding-top:32px;text-align:center;
}
.de2-pain-bottom p{
font-family:'Kanit',sans-serif;
font-size:clamp(1.1rem,1.9vw,1.35rem);font-weight:700;
line-height:1.5;margin:0;
}
.de2-pain-bottom .wbold{color:#fff;font-weight:900}
.de2-pain-bottom .gdbold{color:#C8952A;font-weight:900}
.de2-pain-bottom .wn{color:rgba(255,255,255,.88)}
/* ════════════════════════════════════════
P3 — 5 MODULE CARDS "Unlock Your Business Potential"
bg = warm cream-grey #efece5 + large soft gold bokeh orbs
Headline: Kanit 900 black, very large
Sub: Thai mixed gold bold in quotes
5 white cards: no border, rounded-2xl, subtle shadow
Icon 60px gold, Module name Kanit 900, bullets with bold English label
Bottom sentence: black + gold quoted words
════════════════════════════════════════ */
.de2-modules{
position:relative;overflow:hidden;
background:#efece5;padding:88px 0 80px;
}
/* Large blurred gold bokeh orbs — matching PDF */
.de2-modules-orb{
position:absolute;border-radius:50%;pointer-events:none;z-index:0;
filter:blur(var(--b));background:var(--c);opacity:var(--o);
}
.de2-modules-wrap{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;padding:0 72px;
}
.de2-mod-hl{
font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4vw,3.6rem);font-weight:900;
color:#111;text-align:center;margin:0 0 12px;
}
.de2-mod-sub{
font-family:'Kanit',sans-serif;font-size:1.06rem;
color:#333;text-align:center;line-height:1.65;margin:0 0 52px;
}
.de2-mod-sub .gd{color:#C8952A;font-weight:900}
/* 5-col grid */
.de2-mod-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:52px;
}
.de2-mcard{
background:#fff;border-radius:20px;padding:28px 22px 28px;
box-shadow:0 2px 20px rgba(0,0,0,.07);
display:flex;flex-direction:column;
}
.de2-mcard-icon{width:64px;height:64px;margin-bottom:18px;flex-shrink:0}
.de2-mcard-name{
font-family:'Kanit',sans-serif;font-size:.97rem;font-weight:900;
color:#111;margin:0 0 14px;line-height:1.25;
}
.de2-mcard-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:9px;
}
.de2-mcard-list li{
font-family:'Kanit',sans-serif;font-size:.83rem;color:#444;
line-height:1.55;padding-left:12px;position:relative;
}
.de2-mcard-list li::before{content:'•';position:absolute;left:0;color:#C8952A;font-weight:900}
.de2-mcard-list strong{color:#111;font-weight:800;font-family:'Kanit',sans-serif}
/* Bottom sentence */
.de2-mod-bottom{text-align:center}
.de2-mod-bottom p{
font-family:'Kanit',sans-serif;
font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:700;
color:#222;line-height:1.65;margin:0;
}
.de2-mod-bottom .gd{color:#C8952A;font-weight:900}
/* ════════════════════════════════════════
P4 — PRICING "Solutions that Grow with You"
bg = #f8f6f2 (very light) with subtle gold decorative diagonal lines top-right
Same card structure as Accounting page
CTA card1+2 = gold pill, card3 = dark pill
════════════════════════════════════════ */
.de2-price{
position:relative;overflow:hidden;
background:#f8f6f2;padding:96px 0 108px;
}
/* Decorative gold lines top-right — matching PDF diagonal ornament */
.de2-price::after{
content:'';position:absolute;top:0;right:0;width:320px;height:320px;
pointer-events:none;z-index:0;
background:
linear-gradient(135deg,transparent 45%,rgba(200,149,42,.06) 45%,rgba(200,149,42,.06) 47%,transparent 47%),
linear-gradient(135deg,transparent 52%,rgba(200,149,42,.05) 52%,rgba(200,149,42,.05) 54%,transparent 54%),
linear-gradient(135deg,transparent 59%,rgba(200,149,42,.04) 59%,rgba(200,149,42,.04) 61%,transparent 61%);
}
.de2-price-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
.de2-price-hl{
font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:900;
color:#111;text-align:center;margin:0 0 64px;
text-shadow:2px 3px 12px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.8);
}
.de2-price-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;
}
.de2-pcard{
position:relative;overflow:visible;
background:#fff;border:2px solid rgba(200,149,42,.5);border-radius:18px;
padding:36px 32px 40px;
display:flex;flex-direction:column;
transition:box-shadow .28s,transform .28s;
}
.de2-pcard:hover{box-shadow:0 18px 58px rgba(200,149,42,.14);transform:translateY(-4px)}
.de2-pcard--best{border-color:#C8952A;box-shadow:0 6px 32px rgba(200,149,42,.18)}
.de2-badge{
position:absolute;top:-2px;right:22px;
background:#C8952A;color:#fff;
font-family:'Kanit',sans-serif;font-size:.72rem;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;text-align:center;
padding:8px 16px 22px;line-height:1.25;min-width:68px;
clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);z-index:5;
}
.de2-pcard-plan{font-family:'Kanit',sans-serif;font-size:1.42rem;font-weight:900;color:#111;margin:0 0 8px;line-height:1.2}
.de2-pcard-price{font-family:'Kanit',sans-serif;font-size:2.6rem;font-weight:900;color:#111;margin:0 0 5px;line-height:1}
.de2-pcard-period{font-family:'Kanit',sans-serif;font-size:.83rem;color:#999;margin:0 0 26px}
.de2-pcard-rule{width:100%;height:1px;background:rgba(200,149,42,.28);margin-bottom:22px}
.de2-pcard-list{list-style:none;padding:0;margin:0 0 32px;flex:1;display:flex;flex-direction:column;gap:11px}
.de2-li{display:flex;align-items:flex-start;gap:10px;font-family:'Kanit',sans-serif;font-size:.92rem;color:#333;line-height:1.5}
.de2-li--off{color:#bbb}
.de2-li-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
/* ════════════════════════════════════════
P5 — MONTHLY PARTNER
bg = luxury lobby/corridor warm amber bokeh photo
Layout: 2-col (LEFT text | RIGHT stacked: photo TOP + dark card BOTTOM)
LEFT: "MONTHLY PARTNER" tag → headline gold → body → gold expertise box
RIGHT TOP: photo (man+woman with tablet, rounded frame)
RIGHT BOTTOM: dark rounded bullet card (4 items)
NOTE: photo is ABOVE the bullet card (not below) — PDF clearly shows this
════════════════════════════════════════ */
.de2-partner{
position:relative;overflow:hidden;padding:100px 0;
}
.de2-partner-bg{
position:absolute;inset:0;z-index:0;
background:#1a1206 url(var(--bg-de-partner-bg, #1a1206)) center/cover no-repeat;
opacity:1;
}
.de2-partner-ov{
position:absolute;inset:0;z-index:1;
background:linear-gradient(108deg,rgba(5,3,1,.78) 0%,rgba(8,5,1,.58) 45%,rgba(5,3,0,.35) 100%);
}
.de2-partner-inner{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;padding:80px;
display:grid;grid-template-columns:45fr 55fr;gap:56px;align-items:center;
}
/* LEFT */
.de2-partner-tag{
display:inline-block;
background:rgba(200,149,42,.25);border:1.5px solid rgba(200,149,42,.7);
color:#C8952A;
font-family:'Kanit',sans-serif;font-size:.72rem;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;
padding:6px 18px;border-radius:4px;margin-bottom:20px;
}
.de2-partner-h2{
font-family:'Kanit',sans-serif;
font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:900;
color:#C8952A;line-height:1.25;margin:0 0 16px;
}
.de2-partner-body{
font-family:'Kanit',sans-serif;font-size:.93rem;
color:rgba(255,255,255,.82);line-height:1.85;margin:0 0 32px;
}
/* Gold metallic expertise card — brushed gold gradient */
.de2-expertise{
display:inline-flex;flex-direction:column;align-items:center;
background:linear-gradient(145deg,#a06810 0%,#c8901c 15%,#e0a828 30%,#f0bc38 45%,#d4982a 60%,#b07818 75%,#c8981e 90%,#e0b030 100%);
border-radius:20px;padding:24px 48px 28px;
box-shadow:0 8px 48px rgba(200,140,20,.45);min-width:240px;
margin-top:8px;
}
.de2-exp-tag{
background:#111;color:#C8952A;
font-family:'Kanit',sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;
padding:5px 16px;border-radius:4px;margin-bottom:16px;
}
.de2-exp-num{
font-family:'Kanit',sans-serif;font-size:4.4rem;font-weight:900;
color:#111;line-height:1;margin:0;
}
.de2-exp-text{
font-family:'Kanit',sans-serif;font-size:.82rem;font-weight:600;
color:#111;margin:6px 0 0;
}
/* RIGHT: photo then card */
.de2-partner-right{
display:flex;flex-direction:column;gap:16px;
}
/* Photo frame — dark rounded border */
.de2-partner-photo{
width:100%;border-radius:20px;overflow:hidden;
border:2px solid rgba(200,149,42,.4);
background:#1a1408 url(var(--bg-de-partner-photo, #1a1408)) center top/cover no-repeat;
aspect-ratio:3/2;
box-shadow:0 12px 48px rgba(0,0,0,.5);
}
/* Dark bullet card */
.de2-timeline{
background:rgba(6,4,1,.88);border:1px solid rgba(200,149,42,.3);
border-radius:16px;padding:28px 32px;
backdrop-filter:blur(12px);
}
.de2-timeline-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.de2-timeline-list li{
font-family:'Kanit',sans-serif;font-size:.9rem;
color:rgba(255,255,255,.85);line-height:1.75;
padding-left:20px;position:relative;
}
.de2-timeline-list li::before{content:'•';position:absolute;left:0;color:#C8952A;font-size:1rem}
.de2-timeline-list strong{color:#fff;font-family:'Kanit',sans-serif;font-weight:700}
/* ════════════════════════════════════════
P6 — CTA + CONTACT FORM
bg = pitch black with gold particle bokeh scatter + gold network lines
LEFT: gold headline (2-line, large), white body, gold CTA "นัดประเมินเบื้องต้น",
white small "@JTAAccount | 092-284-6998"
RIGHT: white rounded card form — identical to accounting page
Note: "หรือติดต่อโดยตรงที่:" line + "@JTAAccount | 092-284-6998" both white small
════════════════════════════════════════ */
.de2-cta{position:relative;overflow:hidden;padding:88px 0}
.de2-cta-bg{
position:absolute;inset:0;z-index:0;
background:#050208 url(var(--bg-de-cta, #050208)) center/cover no-repeat;
}
.de2-cta-ov{
position:absolute;inset:0;z-index:1;
background:linear-gradient(108deg,rgba(3,1,6,.93) 0%,rgba(5,2,10,.84) 48%,rgba(3,1,6,.7) 100%);
}
/* Gold particle scatter fallback */
.de2-cta-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.de2-cta-particles span{
position:absolute;border-radius:50%;
background:var(--c);filter:blur(var(--b));opacity:var(--o);
}
.de2-cta-inner{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;padding:0 80px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.de2-cta-h2{
font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,3.8vw,3.2rem);font-weight:900;
color:#C8952A;line-height:1.13;margin:0 0 18px;
}
.de2-cta-sub{
font-family:'Kanit',sans-serif;font-size:.99rem;
color:rgba(255,255,255,.8);line-height:1.84;margin:0 0 36px;
}
.de2-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.de2-cta-contact{
font-family:'Kanit',sans-serif;font-size:.93rem;
color:rgba(255,255,255,.65);margin:6px 0 0;line-height:1.65;
}
.de2-cta-contact strong{color:#fff;font-weight:700}
/* Form card */
.de2-fcard{
background:#fff;border-radius:24px;padding:36px 36px 40px;
box-shadow:0 10px 72px rgba(0,0,0,.45);
}
.de2-fcard-title{
font-family:'Kanit',sans-serif;font-size:1.38rem;font-weight:900;
color:#111;margin:0 0 5px;line-height:1.3;
}
.de2-fcard-title em{font-style:normal;font-family:'Kanit',sans-serif;font-weight:900}
.de2-fcard-sub{font-family:'Kanit',sans-serif;font-size:.84rem;color:#888;margin:0 0 22px}
.de2-field{margin-bottom:13px}
.de2-flabel{display:block;font-family:'Kanit',sans-serif;font-size:.83rem;color:#333;font-weight:600;margin-bottom:5px}
.de2-finput,.de2-ftextarea{
width:100%;padding:11px 17px;border:1.8px solid #2d3466;border-radius:50px;
font-family:'Kanit',sans-serif;font-size:.9rem;color:#222;
outline:none;background:#fff;transition:border .2s;
}
.de2-ftextarea{border-radius:16px;resize:vertical;min-height:108px}
.de2-finput:focus,.de2-ftextarea:focus{border-color:#C8952A}
/* === SOLUTION === */
/* ══════════════════════════════════════════════════════
SOLUTION PAGE v3 · prefix .sl3-
P2+P3 merged: hover card | P4 factory separate
P5+P6 merged: hover card
══════════════════════════════════════════════════════ */
#page-solution *,#page-solution *::before,#page-solution *::after{box-sizing:border-box}
#page-solution a{text-decoration:none}
.sl3-btn{
display:inline-flex;align-items:center;justify-content:center;
padding:14px 40px;border-radius:50px;border:none;cursor:pointer;
font-family:'Kanit',sans-serif;font-size:1rem;font-weight:800;
white-space:nowrap;line-height:1;text-decoration:none;
transition:background .22s,transform .18s;
}
.sl3-gold{background:#C8952A;color:#fff;box-shadow:0 6px 22px rgba(200,149,42,.38)}
.sl3-gold:hover{background:#aa7a1e;transform:translateY(-2px)}
/* ════════════════════════
S1 HERO
════════════════════════ */
.sl3-hero{
position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;
background:#f2f0ea;
}
.sl3-hero-bg{
position:absolute;inset:0;z-index:0;
background:url(var(--bg-sol-hero, #f5f0e8)) center/cover no-repeat;
}
.sl3-hero-ov{
position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(242,240,234,.86) 0%,rgba(242,240,234,.5) 48%,rgba(242,240,234,.1) 100%);
}
.sl3-geo{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sl3-hero-inner{
position:relative;z-index:3;width:100%;height:100%;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:0 72px 52px;
gap:0;
}
/* text: bottom-left, max 50% width */
.sl3-hero-text{
max-width:52%;
margin-bottom:32px;
}
.sl3-h1{
font-family:'Kanit',sans-serif;
font-size:clamp(2rem,3.8vw,3.6rem);
font-weight:900;color:#C8952A;line-height:1.2;margin:0 0 14px;
}
.sl3-hero-sub{
font-family:'Kanit',sans-serif;font-size:.97rem;
color:#333;line-height:1.78;margin:0;
}
.sl3-hero-sub .em{font-weight:900;color:#111}
/* tabs: flex ROW, justify-content:flex-end → ชิดขวา */
.sl3-hero-tabs{
display:flex;
flex-direction:row;
gap:16px;
justify-content:flex-end;
align-items:center;
width:100%;
}
.sl3-tab{
display:inline-flex;align-items:center;justify-content:center;
padding:15px 0;border-radius:50px;
font-family:'Kanit',sans-serif;font-size:.95rem;font-weight:700;
white-space:nowrap;line-height:1;border:none;text-decoration:none;
background:#C8952A;color:#fff;
flex:1;max-width:220px;
box-shadow:0 4px 18px rgba(200,149,42,.38);
transition:background .22s,transform .18s,box-shadow .18s;
}
.sl3-tab:hover{background:#aa7a1e;transform:translateY(-2px)}
/* ════════════════════════
S2 E-COMMERCE
Normal state: photo + white label bar bottom
Hover: dark warm overlay slides up, icon+name TOP, tagline, bullets visible
White bar FADES OUT on hover
════════════════════════ */
.sl3-ecom{
position:relative;overflow:hidden;
background:#f5efd8;padding:72px 0 80px;
}
.sl3-ecom::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 35% 25% at 5% 80%,rgba(200,149,42,.15),transparent 55%),
radial-gradient(ellipse 30% 22% at 95% 20%,rgba(200,149,42,.12),transparent 55%),
radial-gradient(ellipse 20% 16% at 60% 95%,rgba(200,149,42,.10),transparent 55%);
}
.sl3-ecom-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
.sl3-hl-black{
font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:900;
color:#111;text-align:center;margin:0 0 10px;
text-shadow:2px 3px 12px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.8);
}
.sl3-sub-gold{
font-family:'Kanit',sans-serif;font-size:1.08rem;font-weight:700;
color:#C8952A;text-align:center;margin:0 0 52px;
}
.sl3-ecom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
/* Each E-commerce card */
.sl3-ec{
position:relative;border-radius:14px;overflow:hidden;
border:2px solid #C8952A;
cursor:pointer;
}
/* Photo layer */
.sl3-ec-photo{
display:block;width:100%;
aspect-ratio:4/3;
background-size:cover;background-position:center;
transition:transform .55s ease;
}
.sl3-ec:hover .sl3-ec-photo{transform:scale(1.06)}
/* ── NORMAL: white label bar (bottom) ── */
.sl3-ec-bar{
position:absolute;bottom:0;left:0;right:0;
background:#fff;
padding:14px 18px;
display:flex;align-items:center;justify-content:space-between;gap:10px;
transition:opacity .3s ease;
z-index:3;
}
.sl3-ec:hover .sl3-ec-bar{opacity:0;pointer-events:none}
.sl3-ec-bar-l{display:flex;align-items:center;gap:12px}
.sl3-ec-icon{width:38px;height:38px;flex-shrink:0}
.sl3-ec-name{
font-family:'Kanit',sans-serif;font-size:.95rem;font-weight:800;
color:#C8952A;line-height:1.2;margin:0;
}
/* ── HOVER: dark warm overlay + content ── */
.sl3-ec-hover{
position:absolute;inset:0;z-index:2;
background:rgba(18,10,2,.8);
opacity:0;
transition:opacity .35s ease;
padding:22px 22px 24px;
display:flex;flex-direction:column;
}
.sl3-ec:hover .sl3-ec-hover{opacity:1}
.sl3-ec-hover-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sl3-ec-hover-icon{width:44px;height:44px;flex-shrink:0}
.sl3-ec-hover-name{
font-family:'Kanit',sans-serif;font-size:1.18rem;font-weight:900;
color:#C8952A;line-height:1.2;margin:0;
}
.sl3-ec-hover-tag{
font-family:'Kanit',sans-serif;font-size:.88rem;font-weight:700;
color:rgba(255,255,255,.75);margin:0 0 10px;
}
.sl3-ec-hover-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:8px;
}
.sl3-ec-hover-list li{
font-family:'Kanit',sans-serif;font-size:.9rem;
color:rgba(255,255,255,.88);line-height:1.55;
padding-left:14px;position:relative;
}
.sl3-ec-hover-list li::before{content:'•';position:absolute;left:0;color:#C8952A;font-weight:900}
/* RECOMMENDED diagonal banner */
.sl3-rec{
position:absolute;top:20px;right:-32px;z-index:20;
background:#C8952A;color:#fff;
font-family:'Kanit',sans-serif;font-size:.7rem;font-weight:900;
letter-spacing:.08em;text-transform:uppercase;
padding:7px 52px;transform:rotate(35deg);
box-shadow:0 2px 12px rgba(0,0,0,.25);white-space:nowrap;
}
/* bottom footer row */
.sl3-foot{
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.sl3-foot p{
font-family:'Kanit',sans-serif;font-size:1.05rem;font-weight:700;
color:#111;line-height:1.6;margin:0;flex:1;text-align:center;
}
/* ════════════════════════
S3 FACTORY
bg = dark concrete tile #252018
Gold italic headline
3 WHITE cards
════════════════════════ */
.sl3-factory{
position:relative;overflow:hidden;
background:#252018;padding:72px 0 88px;
}
.sl3-factory::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
linear-gradient(rgba(200,149,42,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(200,149,42,.06) 1px,transparent 1px);
background-size:80px 80px;
}
.sl3-factory::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 80% 45% at 50% 0%,rgba(50,38,18,.7),transparent 55%),
radial-gradient(ellipse 50% 40% at 0% 60%,rgba(40,28,10,.5),transparent 55%),
radial-gradient(ellipse 40% 35% at 100%80%,rgba(35,25,8,.4),transparent 55%);
}
.sl3-factory-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
.sl3-factory-hl{
font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:900;
font-style:italic;color:#C8952A;text-align:center;margin:0 0 10px;
text-shadow:0 2px 24px rgba(200,149,42,.25);
}
.sl3-factory-sub{
font-family:'Kanit',sans-serif;font-size:1rem;
color:rgba(255,255,255,.82);text-align:center;margin:0 0 52px;
}
.sl3-factory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.sl3-fcard{
position:relative;overflow:visible;
background:#fff;border-radius:18px;
padding:32px 28px 36px;
display:flex;flex-direction:column;
box-shadow:0 4px 40px rgba(0,0,0,.35);
}
.sl3-fcard-icon{width:68px;height:68px;margin-bottom:16px;flex-shrink:0}
.sl3-fcard-name{
font-family:'Kanit',sans-serif;font-size:1.45rem;font-weight:900;
color:#111;margin:0 0 6px;line-height:1.2;
}
.sl3-fcard-sub{
font-family:'Kanit',sans-serif;font-size:.93rem;
color:#555;margin:0 0 18px;line-height:1.5;
}
.sl3-fcard-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:11px;
}
.sl3-fcard-list li{
font-family:'Kanit',sans-serif;font-size:.9rem;
color:#333;line-height:1.55;padding-left:14px;position:relative;
}
.sl3-fcard-list li::before{content:'•';position:absolute;left:0;color:#C8952A;font-weight:900}
.sl3-fcard-list strong{font-family:'Kanit',sans-serif;color:#111;font-weight:800}
.sl3-frec{
position:absolute;top:22px;right:-26px;z-index:10;
background:#C8952A;color:#fff;
font-family:'Kanit',sans-serif;font-size:.7rem;font-weight:900;
letter-spacing:.08em;text-transform:uppercase;
padding:7px 48px;transform:rotate(35deg);
box-shadow:0 2px 12px rgba(0,0,0,.3);white-space:nowrap;
}
/* ════════════════════════
S4 SME SOLUTIONS
Normal: photo cards only (no text)
Hover: dark rounded box slides UP from bottom revealing:
plan name (white Kanit 900 large)
tagline (gold Thai)
hint text (white small)
bullet list (white small)
Transition: transform translateY(100%)→0
════════════════════════ */
.sl3-sme{
position:relative;overflow:hidden;
background:#0a0704;padding:72px 0 80px;
}
/* Dense gold glitter — matching PDF atmospheric glow */
.sl3-sme::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(2px 2px at 5% 8%, rgba(200,149,42,.55) 0%,transparent 100%),
radial-gradient(3px 3px at 12% 22%, rgba(255,200,80,.4) 0%,transparent 100%),
radial-gradient(2px 2px at 18% 65%, rgba(200,149,42,.45) 0%,transparent 100%),
radial-gradient(3px 3px at 28% 12%, rgba(255,220,100,.35)0%,transparent 100%),
radial-gradient(2px 2px at 35% 80%, rgba(200,149,42,.5) 0%,transparent 100%),
radial-gradient(3px 3px at 42% 35%, rgba(255,180,40,.38) 0%,transparent 100%),
radial-gradient(2px 2px at 52% 55%, rgba(200,149,42,.42) 0%,transparent 100%),
radial-gradient(3px 3px at 60% 15%, rgba(255,200,80,.35) 0%,transparent 100%),
radial-gradient(2px 2px at 68% 72%, rgba(200,149,42,.48) 0%,transparent 100%),
radial-gradient(3px 3px at 75% 40%, rgba(255,220,100,.38)0%,transparent 100%),
radial-gradient(2px 2px at 82% 88%, rgba(200,149,42,.4) 0%,transparent 100%),
radial-gradient(3px 3px at 88% 25%, rgba(255,180,40,.42) 0%,transparent 100%),
radial-gradient(2px 2px at 95% 60%, rgba(200,149,42,.5) 0%,transparent 100%),
radial-gradient(2px 2px at 8% 92%, rgba(255,200,80,.35) 0%,transparent 100%),
radial-gradient(3px 3px at 22% 48%, rgba(200,149,42,.38) 0%,transparent 100%),
radial-gradient(2px 2px at 48% 92%, rgba(255,220,100,.32)0%,transparent 100%),
radial-gradient(3px 3px at 72% 5%, rgba(200,149,42,.45) 0%,transparent 100%),
radial-gradient(2px 2px at 92% 78%, rgba(255,180,40,.38) 0%,transparent 100%);
}
/* Large bokeh balls */
.sl3-bokeh{
position:absolute;border-radius:50%;pointer-events:none;
filter:blur(var(--b));background:var(--c);opacity:var(--o);z-index:0;
}
.sl3-sme-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
/* Gold headline with glow — matches PDF italic bold gold */
.sl3-sme-hl{
font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:900;
font-style:italic;
color:#C8952A;text-align:center;margin:0 0 10px;
text-shadow:0 0 40px rgba(200,149,42,.4),0 2px 16px rgba(200,149,42,.2);
}
.sl3-sme-sub{
font-family:'Kanit',sans-serif;font-size:1rem;
color:rgba(255,255,255,.88);text-align:center;margin:0 0 52px;
}
.sl3-sme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* SME card */
.sl3-sc{
position:relative;border-radius:14px;overflow:hidden;
border:2.5px solid #C8952A;
cursor:pointer;
}
/* Photo — aspect-ratio matches PDF */
.sl3-sc-photo{
display:block;width:100%;
aspect-ratio:4/3;
background-size:cover;background-position:center;
transition:transform .55s ease;
}
.sl3-sc:hover .sl3-sc-photo{transform:scale(1.05)}
/* ── HOVER: dark box slides up from bottom ── */
.sl3-sc-box{
position:absolute;bottom:0;left:0;right:0;
background:rgba(12,8,2,.92);
border-radius:0 0 12px 12px;
padding:20px 20px 22px;
transform:translateY(100%);
transition:transform .38s cubic-bezier(.22,.61,.36,1);
z-index:3;
}
.sl3-sc:hover .sl3-sc-box{transform:translateY(0)}
.sl3-sc-name{
font-family:'Kanit',sans-serif;font-size:1.38rem;font-weight:900;
color:#fff;margin:0 0 4px;line-height:1.2;
}
.sl3-sc-tag{
font-family:'Kanit',sans-serif;font-size:.9rem;font-weight:700;
color:#C8952A;margin:0 0 7px;
}
.sl3-sc-hint{
font-family:'Kanit',sans-serif;font-size:.84rem;
color:rgba(255,255,255,.6);margin:0 0 10px;
}
.sl3-sc-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:6px;
}
.sl3-sc-list li{
font-family:'Kanit',sans-serif;font-size:.86rem;
color:rgba(255,255,255,.85);line-height:1.5;
padding-left:14px;position:relative;
}
.sl3-sc-list li::before{content:'•';position:absolute;left:0;color:#C8952A}
/* ════════════════════════
S5 CTA + FORM
════════════════════════ */
.sl3-cta{position:relative;overflow:hidden;padding:88px 0}
.sl3-cta-bg{
position:absolute;inset:0;z-index:0;
background:#1a1208 url(var(--bg-sol-cta, #1a1208)) center/cover no-repeat;
}
.sl3-cta-ov{
position:absolute;inset:0;z-index:1;
background:linear-gradient(108deg,rgba(6,4,1,.92) 0%,rgba(10,6,1,.8) 45%,rgba(6,4,1,.6) 100%);
}
.sl3-cta-ov2{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(4,2,0,.5) 0%,transparent 15%),
linear-gradient(270deg,rgba(4,2,0,.4) 0%,transparent 10%);
}
.sl3-cta-inner{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;padding:0 80px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.sl3-cta-h2{
font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,3.8vw,3.2rem);font-weight:900;
color:#C8952A;line-height:1.12;margin:0 0 18px;
}
.sl3-cta-sub{
font-family:'Kanit',sans-serif;font-size:1rem;
color:rgba(255,255,255,.82);line-height:1.82;margin:0 0 36px;
}
.sl3-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sl3-cta-contact{
font-family:'Kanit',sans-serif;font-size:.93rem;
color:rgba(255,255,255,.65);margin:6px 0 0;line-height:1.65;
}
.sl3-cta-contact strong{color:#fff;font-weight:700}
.sl3-form{
background:#fff;border-radius:24px;padding:36px 36px 40px;
box-shadow:0 10px 72px rgba(0,0,0,.45);
}
.sl3-form-title{
font-family:'Kanit',sans-serif;font-size:1.38rem;font-weight:900;
color:#111;margin:0 0 5px;line-height:1.3;
}
.sl3-form-title em{font-style:normal;font-family:'Kanit',sans-serif;font-weight:900}
.sl3-form-sub{font-family:'Kanit',sans-serif;font-size:.84rem;color:#888;margin:0 0 22px}
.sl3-field{margin-bottom:13px}
.sl3-label{display:block;font-family:'Kanit',sans-serif;font-size:.83rem;color:#333;font-weight:600;margin-bottom:5px}
.sl3-input,.sl3-textarea{
width:100%;padding:11px 17px;border:1.8px solid #2d3466;border-radius:50px;
font-family:'Kanit',sans-serif;font-size:.9rem;color:#222;
outline:none;background:#fff;transition:border .2s;
}
.sl3-textarea{border-radius:16px;resize:vertical;min-height:108px}
.sl3-input:focus,.sl3-textarea:focus{border-color:#C8952A}
/* === ACADEMY === */
/* ══════════════════════════════════════════════════════
JTA EXECUTIVE ACADEMY prefix .ea-
Pixel-perfect: หลักสูตรผู้บริหาร_page.pdf (9 pages)
══════════════════════════════════════════════════════ */
#page-academy *,#page-academy *::before,#page-academy *::after{box-sizing:border-box}
#page-academy a{text-decoration:none}
.ea-btn{display:inline-flex;align-items:center;justify-content:center;
padding:14px 38px;border-radius:50px;border:none;cursor:pointer;
font-family:'Kanit',sans-serif;font-size:1rem;font-weight:800;
white-space:nowrap;line-height:1;text-decoration:none;
transition:background .22s,transform .18s;}
.ea-gold{background:#C8952A;color:#fff;box-shadow:0 6px 22px rgba(200,149,42,.38)}
.ea-gold:hover{background:#aa7a1e;transform:translateY(-2px)}
/* SVG check icon reusable */
.ea-chk-svg{display:block}
/* ── P1 HERO ──────────────────────────────────────
bg = luxury warm gold cafe/store interior
Man linen suit right-center
BOTTOM-LEFT: "JTA EXECUTIVE ACADEMY" gold italic large
"หลักสูตรพิเศษ ฉบับเจ้าของกิจการ" white bold
sub = white
BOTTOM-RIGHT: gold pill CTA "ดูรายละเอียดหลักสูตร"
──────────────────────────────────────────────────── */
.ea-hero{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;}
.ea-hero-bg{position:absolute;inset:0;z-index:0;
background:#c8952a url(var(--bg-ea-hero, #c8952a)) center/cover no-repeat;}
.ea-hero-ov{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(8,5,1,.65) 0%,rgba(8,5,1,.32) 55%,transparent 100%);}
.ea-hero-inner{position:relative;z-index:2;width:100%;height:100%;
display:flex;align-items:flex-end;justify-content:space-between;padding:0 80px 68px;}
.ea-hero-text{max-width:760px}
.ea-academy-name{font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4.8vw,4.4rem);font-weight:900;font-style:italic;
color:#C8952A;line-height:1.05;margin:0 0 6px;
text-shadow:2px 2px 0 rgba(160,100,10,.4),0 2px 20px rgba(200,149,42,.35);}
.ea-hero-th{font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,4.2vw,3.8rem);font-weight:900;
color:#fff;line-height:1.1;margin:0 0 16px;}
.ea-hero-sub{font-family:'Kanit',sans-serif;font-size:1rem;
color:rgba(255,255,255,.88);line-height:1.78;margin:0;}
/* ── P2 PAIN POINTS ───────────────────────────────
bg = white-marble #faf9f7
Gold headline center (Thai large)
Sub = dark 2-line center
3 cream cards #f5f0e8 — gold icon, bold title, body
Bottom = bold Thai center dark
──────────────────────────────────────────────────── */
.ea-pain{background:#faf9f7;padding:80px 0 72px;position:relative;overflow:hidden;}
.ea-pain::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(ellipse 55% 40% at 20% 80%,rgba(200,170,120,.07),transparent 55%),
radial-gradient(ellipse 45% 35% at 80% 20%,rgba(200,170,120,.05),transparent 55%);}
.ea-pain-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
.ea-pain-hl{font-family:'Kanit',sans-serif;
font-size:clamp(2rem,3.2vw,2.9rem);font-weight:900;
color:#C8952A;text-align:center;margin:0 0 14px;}
.ea-pain-sub{font-family:'Kanit',sans-serif;font-size:1rem;
color:#333;text-align:center;line-height:1.65;margin:0 0 52px;}
.ea-pain-sub .q{color:#C8952A;font-weight:900}
.ea-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.ea-pcard{background:#f5f0e8;border-radius:16px;padding:32px 28px;}
.ea-pcard-icon{width:72px;height:72px;margin-bottom:18px;}
.ea-pcard-title{font-family:'Kanit',sans-serif;font-size:1.12rem;font-weight:900;
color:#111;line-height:1.28;margin:0 0 14px;}
.ea-pcard-body{font-family:'Kanit',sans-serif;font-size:.9rem;color:#555;line-height:1.72;margin:0;}
.ea-pain-bottom{text-align:center}
.ea-pain-bottom p{font-family:'Kanit',sans-serif;font-size:1.08rem;font-weight:900;color:#111;margin:0;}
/* ── P3-P5 INTENSIVE COURSE CARDS ────────────────
bg = warm cream gradient + hexagon watermark
2-col: LEFT = tag + title(gold gradient italic) + sub + checklist + dpbar + privacy
RIGHT = portrait photo (rounded, dark-warm bg)
──────────────────────────────────────────────────── */
.ea-course{position:relative;overflow:visible;padding:72px 0;
background:linear-gradient(135deg,#f5ede0 0%,#ede4d4 100%);}
.ea-course::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
repeating-linear-gradient(60deg, rgba(200,149,42,.04) 0,rgba(200,149,42,.04) 1px,transparent 1px,transparent 30px),
repeating-linear-gradient(120deg, rgba(200,149,42,.04) 0,rgba(200,149,42,.04) 1px,transparent 1px,transparent 30px),
repeating-linear-gradient(0deg, rgba(200,149,42,.04) 0,rgba(200,149,42,.04) 1px,transparent 1px,transparent 30px);}
.ea-course-inner{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;
padding:0 80px 120px;
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:start;
overflow:visible;
}
.ea-course-left{
display:flex;flex-direction:column;
position:static;
}
/* "Intensive Course" black pill tag */
.ea-tag-dark{display:inline-flex;align-items:center;
background:#111;color:#fff;
font-family:'Kanit',sans-serif;font-size:.8rem;font-weight:700;
padding:8px 20px;border-radius:6px;margin-bottom:28px;align-self:flex-start;}
/* Course title gold gradient italic */
.ea-course-title{font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,4vw,3.5rem);font-weight:900;font-style:italic;
line-height:1.05;margin:0 0 12px;
background:linear-gradient(135deg,#b07818 0%,#e0aa30 40%,#c89020 70%,#a06810 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ea-course-sub{font-family:'Kanit',sans-serif;font-size:1rem;
color:#333;line-height:1.6;margin:0 0 28px;}
.ea-course-sub strong{color:#111;font-weight:900}
/* Checklist */
.ea-cl{list-style:none;padding:0;margin:0 0 36px;display:flex;flex-direction:column;gap:16px}
.ea-cl li{display:flex;align-items:flex-start;gap:14px;
font-family:'Kanit',sans-serif;font-size:.96rem;color:#333;line-height:1.6;}
.ea-cl-dot{width:26px;height:26px;flex-shrink:0;margin-top:1px;border-radius:50%;
background:#C8952A;display:flex;align-items:center;justify-content:center;}
.ea-cl strong{font-family:'Kanit',sans-serif;color:#111;font-weight:800}
/* Duration+Price gold bar */
.ea-dpbar{
display:inline-flex;align-items:stretch;
background:#C8952A;border-radius:10px;overflow:hidden;
box-shadow:0 4px 18px rgba(200,149,42,.4);
flex-shrink:0;
}
.ea-dp-cell{padding:24px 32px;display:flex;flex-direction:column;gap:3px;}
.ea-dp-cell+.ea-dp-cell{border-left:1px solid rgba(255,255,255,.3);}
.ea-dp-label{font-family:'Kanit',sans-serif;font-size:.72rem;font-weight:800;
letter-spacing:.1em;color:rgba(255,255,255,.8);text-transform:uppercase;}
.ea-dp-value{font-family:'Kanit',sans-serif;font-size:1.55rem;font-weight:900;color:#fff;line-height:1;}
/* Privacy card */
.ea-priv{
display:inline-flex;align-items:center;gap:14px;
background:#fff;border-radius:12px;padding:24px 22px;
box-shadow:0 4px 24px rgba(0,0,0,.14);
flex-shrink:0;
margin-left:10px;
position:relative;
z-index:11;
}
.ea-priv-icon{width:40px;height:40px;flex-shrink:0}
.ea-priv-title{font-family:'Kanit',sans-serif;font-size:.92rem;font-weight:800;color:#C8952A;margin:0 0 2px}
.ea-priv-body{font-family:'Kanit',sans-serif;font-size:.82rem;color:#555;margin:0}
.ea-dp-row{
position:absolute;
bottom:31px;
left:80px;
display:flex;
align-items:stretch;
flex-wrap:nowrap;
gap:0;
z-index:10;
}
/* Photo right portrait */
.ea-course-photo{
border-radius:20px;overflow:hidden;
box-shadow:0 8px 40px rgba(0,0,0,.18);
aspect-ratio:3/4;
background-size:cover;background-position:center;
position:relative;z-index:3;
}
/* ── P6 THE PROFIT GAME ───────────────────────────
bg = very dark black #0a0806 + gold glitter particles
LEFT = rounded photo 4:3
RIGHT = tag("Exclusive Workshop" dark box + crown) + title gold italic
sub white, checklist, dpbar, privacy
──────────────────────────────────────────────────── */
.ea-profit{position:relative;overflow:hidden;padding:72px 0;background:#0a0806;}
.ea-profit::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(2px 2px at 8% 12%,rgba(200,149,42,.5) 0%,transparent 100%),
radial-gradient(3px 3px at 20% 30%,rgba(255,200,80,.35) 0%,transparent 100%),
radial-gradient(2px 2px at 35% 65%,rgba(200,149,42,.45) 0%,transparent 100%),
radial-gradient(3px 3px at 48% 20%,rgba(255,220,100,.3) 0%,transparent 100%),
radial-gradient(2px 2px at 62% 80%,rgba(200,149,42,.42) 0%,transparent 100%),
radial-gradient(3px 3px at 75% 45%,rgba(255,180,40,.35) 0%,transparent 100%),
radial-gradient(2px 2px at 88% 15%,rgba(200,149,42,.48) 0%,transparent 100%),
radial-gradient(3px 3px at 15% 75%,rgba(255,200,80,.32) 0%,transparent 100%),
radial-gradient(2px 2px at 55% 38%,rgba(200,149,42,.4) 0%,transparent 100%),
radial-gradient(3px 3px at 92% 62%,rgba(255,180,40,.38) 0%,transparent 100%);}
.ea-profit-wrap{
position:relative;z-index:2;
max-width:1380px;margin:0 auto;
padding:0 80px 110px;
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
align-items:start;
overflow:visible;
}
.ea-profit-photo{
border-radius:20px;overflow:hidden;
box-shadow:0 8px 40px rgba(200,149,42,.25);
aspect-ratio:4/3;
background-size:cover;background-position:center;
align-self:start;
}
/* Exclusive Workshop tag */
.ea-excl-tag{display:inline-flex;align-items:center;gap:8px;
background:#1a1408;border:1.5px solid rgba(200,149,42,.4);
border-radius:8px;padding:8px 18px;margin-bottom:24px;}
.ea-excl-txt{font-family:'Kanit',sans-serif;font-size:.82rem;font-weight:800;color:#fff;}
.ea-profit-title{font-family:'Kanit',sans-serif;
font-size:clamp(2.2rem,4vw,3.5rem);font-weight:900;font-style:italic;
line-height:1.05;margin:0 0 12px;
background:linear-gradient(135deg,#b07818 0%,#e0aa30 40%,#c89020 70%,#a06810 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ea-profit-sub{font-family:'Kanit',sans-serif;font-size:1rem;
color:rgba(255,255,255,.82);line-height:1.65;margin:0 0 28px;}
.ea-dcl{list-style:none;padding:0;margin:0 0 36px;display:flex;flex-direction:column;gap:16px}
.ea-dcl li{display:flex;align-items:flex-start;gap:14px;
font-family:'Kanit',sans-serif;font-size:.96rem;color:rgba(255,255,255,.85);line-height:1.6;}
.ea-dcl strong{font-family:'Kanit',sans-serif;color:#fff;font-weight:800}
/* ── P7 DESIGN YOUR LEARNING EXPERIENCE ──────────
bg = dark warm bokeh #1a1208
Gold italic headline center + white sub 2-line
4 cream cards grid (repeat 4)
Card 4 has "Coming SOON!" gold badge top-right
Bottom = gold Thai sentence center
──────────────────────────────────────────────────── */
.ea-learn{position:relative;overflow:hidden;padding:72px 0 80px;background:#1a1208;}
.ea-learn::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(ellipse 50% 40% at 15% 20%,rgba(200,149,42,.12),transparent 55%),
radial-gradient(ellipse 45% 35% at 85% 75%,rgba(200,149,42,.10),transparent 55%),
radial-gradient(ellipse 35% 28% at 50% 50%,rgba(200,149,42,.06),transparent 55%);}
.ea-learn-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px}
.ea-learn-hl{font-family:'Kanit',sans-serif;
font-size:clamp(1.9rem,3.4vw,3rem);font-weight:900;font-style:italic;
color:#C8952A;text-align:center;margin:0 0 10px;
text-shadow:0 0 32px rgba(200,149,42,.3);}
.ea-learn-sub{font-family:'Kanit',sans-serif;font-size:.96rem;
color:rgba(255,255,255,.82);text-align:center;line-height:1.65;margin:0 0 52px;}
.ea-learn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.ea-lcard{background:#e8e0d0;border-radius:16px;padding:26px 22px 28px;
display:flex;flex-direction:column;position:relative;overflow:hidden;}
.ea-lcard-type{font-family:'Kanit',sans-serif;font-size:1.05rem;font-weight:900;color:#111;margin:0 0 5px;}
.ea-lcard-sub2{font-family:'Kanit',sans-serif;font-size:.82rem;font-weight:700;color:#555;margin:0 0 14px;}
.ea-lcard-hr{height:1px;background:rgba(200,149,42,.3);margin-bottom:14px;}
.ea-lcard-info{font-family:'Kanit',sans-serif;font-size:.86rem;color:#333;line-height:1.6;margin:0 0 12px;}
.ea-lcard-info strong{color:#111;font-weight:800}
.ea-lcl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ea-lcl li{display:flex;align-items:flex-start;gap:9px;
font-family:'Kanit',sans-serif;font-size:.84rem;color:#333;line-height:1.5;}
.ea-lcl-dot{width:18px;height:18px;border-radius:50%;background:#C8952A;flex-shrink:0;margin-top:1px;
display:flex;align-items:center;justify-content:center;}
/* Coming Soon */
.ea-coming{position:absolute;top:0;right:0;background:#C8952A;color:#fff;
font-family:'Kanit',sans-serif;font-size:.65rem;font-weight:900;
padding:5px 10px;border-radius:0 14px 0 10px;line-height:1.3;text-align:center;}
.ea-learn-foot{text-align:center}
.ea-learn-foot p{font-family:'Kanit',sans-serif;font-size:1.08rem;font-weight:700;color:#C8952A;margin:0;}
/* ── P8 MEET THE EXPERT ────────────────────────────
bg = dark luxury blue-dark #0e0c10 + warm bokeh
"MEET THE EXPERT" gold label center
Headline: white + "ตัวจริง" gold
2 expert portrait photos side by side centered
Name white, role gold, bio white small
──────────────────────────────────────────────────── */
.ea-expert{position:relative;overflow:hidden;padding:80px 0;background:#0e0c10;}
.ea-expert::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(ellipse 40% 30% at 15% 30%,rgba(200,149,42,.1),transparent 55%),
radial-gradient(ellipse 35% 25% at 85% 60%,rgba(200,149,42,.08),transparent 55%),
radial-gradient(ellipse 30% 25% at 50% 10%,rgba(200,149,42,.06),transparent 55%);}
.ea-expert-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 80px;text-align:center;}
.ea-expert-lbl{font-family:'Kanit',sans-serif;font-size:.78rem;font-weight:800;
letter-spacing:.15em;text-transform:uppercase;color:#C8952A;margin:0 0 12px;display:block;}
.ea-expert-hl{font-family:'Kanit',sans-serif;
font-size:clamp(2rem,3.4vw,3rem);font-weight:900;color:#fff;margin:0 0 56px;line-height:1.2;}
.ea-expert-hl .gd{color:#C8952A}
.ea-experts-row{display:grid;grid-template-columns:repeat(2,380px);gap:64px;justify-content:center;}
.ea-exp-card{display:flex;flex-direction:column;align-items:center;}
.ea-exp-photo{width:100%;max-width:320px;border-radius:16px;overflow:hidden;
aspect-ratio:3/4;background-size:cover;background-position:center top;
margin-bottom:20px;box-shadow:0 8px 32px rgba(0,0,0,.35);}
.ea-exp-name{font-family:'Kanit',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin:0 0 4px;}
.ea-exp-role{font-family:'Kanit',sans-serif;font-size:.88rem;font-weight:700;color:#C8952A;margin:0 0 12px;}
.ea-exp-bio{font-family:'Kanit',sans-serif;font-size:.86rem;
color:rgba(255,255,255,.7);line-height:1.72;margin:0;max-width:320px;}
/* ── P9 CTA + CONTACT FORM ────────────────────────
bg = dark city night bokeh
LEFT: gold headline, white body, "ปรึกษาเบื้องต้นฟรี" gold, contact
RIGHT: white card form
──────────────────────────────────────────────────── */
.ea-cta{position:relative;overflow:hidden;padding:88px 0;}
.ea-cta-bg{position:absolute;inset:0;z-index:0;
background:#0a0806 url(var(--bg-ea-cta, #0a0806)) center/cover no-repeat;}
.ea-cta-ov{position:absolute;inset:0;z-index:1;
background:linear-gradient(108deg,rgba(5,3,1,.92) 0%,rgba(8,5,1,.8) 48%,rgba(5,3,1,.62) 100%);}
.ea-cta-inner{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 80px;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.ea-cta-h2{font-family:'Kanit',sans-serif;
font-size:clamp(2rem,3.6vw,3rem);font-weight:900;
color:#C8952A;line-height:1.15;margin:0 0 16px;}
.ea-cta-sub{font-family:'Kanit',sans-serif;font-size:.99rem;
color:rgba(255,255,255,.8);line-height:1.82;margin:0 0 36px;}
.ea-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.ea-cta-contact{font-family:'Kanit',sans-serif;font-size:.93rem;
color:rgba(255,255,255,.65);margin:6px 0 0;line-height:1.65;}
.ea-cta-contact strong{color:#fff;font-weight:700}
.ea-form{background:#fff;border-radius:24px;padding:36px 36px 40px;
box-shadow:0 10px 72px rgba(0,0,0,.45);}
.ea-form-title{font-family:'Kanit',sans-serif;font-size:1.38rem;font-weight:900;
color:#111;margin:0 0 5px;line-height:1.3;}
.ea-form-title em{font-style:normal;font-family:'Kanit',sans-serif;font-weight:900}
.ea-form-sub{font-family:'Kanit',sans-serif;font-size:.84rem;color:#888;margin:0 0 22px}
.ea-field{margin-bottom:13px}
.ea-label{display:block;font-family:'Kanit',sans-serif;font-size:.83rem;color:#333;font-weight:600;margin-bottom:5px}
.ea-input,.ea-textarea{width:100%;padding:11px 17px;border:1.8px solid #2d3466;border-radius:50px;
font-family:'Kanit',sans-serif;font-size:.9rem;color:#222;
outline:none;background:#fff;transition:border .2s;}
.ea-textarea{border-radius:16px;resize:vertical;min-height:108px}
.ea-input:focus,.ea-textarea:focus{border-color:#C8952A}
/* === KNOWLEDGE === */
/* ════════════════════════════════════════════════════════
JTA KNOWLEDGE HUB prefix .kh2-
v2 — 100% pixel-match KnowledgeHub_page.pdf
════════════════════════════════════════════════════════ */
#page-knowledge *,#page-knowledge *::before,#page-knowledge *::after{box-sizing:border-box}
#page-knowledge a{text-decoration:none}
.kh2-btn{display:inline-flex;align-items:center;justify-content:center;
padding:14px 38px;border-radius:50px;border:none;cursor:pointer;
font-family:'Kanit',sans-serif;font-size:1rem;font-weight:800;
white-space:nowrap;line-height:1;text-decoration:none;
transition:background .22s,transform .18s;}
.kh2-gold{background:#C8952A;color:#fff;box-shadow:0 6px 22px rgba(200,149,42,.38)}
.kh2-gold:hover{background:#aa7a1e;transform:translateY(-2px)}
/* ══ P1 HERO ════════════════════════════════════════════
bg = luxury library interior warm amber
(wooden bookshelves left+right, floor-to-ceiling window center-right, city dusk)
Text block: CENTER of page (not far left, not far right)
— "JTA KNOWLEDGE HUB" gold italic Kanit 900 very large
— sub: Thai white bold 2-line, center-aligned
CTA "ปรึกษาเบื้องต้น" gold pill — absolute BOTTOM-RIGHT
════════════════════════════════════════════════════════ */
.kh2-hero{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;}
.kh2-hero-bg{position:absolute;inset:0;z-index:0;
background:#2a1a08 url(var(--bg-kh-hero, #2a1a08)) center/cover no-repeat;}
/* Warm center glow + subtle dark edges */
.kh2-hero-ov{position:absolute;inset:0;z-index:1;
background:
radial-gradient(ellipse 60% 70% at 55% 55%,rgba(8,4,1,.12),transparent 65%),
linear-gradient(0deg,rgba(6,3,1,.45) 0%,rgba(6,3,1,.15) 40%,transparent 70%),
linear-gradient(270deg,rgba(4,2,0,.2) 0%,transparent 30%),
linear-gradient(90deg,rgba(4,2,0,.25) 0%,transparent 30%);}
.kh2-hero-inner{position:relative;z-index:2;width:100%;height:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 80px;text-align:center;}
/* Gold italic bold title — Kanit 900 */
.kh2-hero-title{font-family:'Kanit',sans-serif;
font-size:clamp(3rem,6vw,5.6rem);font-weight:900;font-style:italic;
color:#C8952A;line-height:1.02;margin:0 0 18px;
text-shadow:2px 2px 0 rgba(140,90,5,.5),0 2px 28px rgba(200,149,42,.4);}
/* Thai sub: white bold 2-line */
.kh2-hero-sub{font-family:'Kanit',sans-serif;
font-size:clamp(1.1rem,2.2vw,1.65rem);font-weight:700;
color:#fff;line-height:1.55;margin:0;
text-shadow:0 1px 10px rgba(0,0,0,.7);}
/* CTA absolute bottom-right */
.kh2-hero-cta{position:absolute;bottom:60px;right:80px;z-index:3;}
/* ══ P2 TAX KNOWLEDGE SERIES ════════════════════════════
bg = very light warm linen/paper #f5f2ea
+ gold diagonal line art top-right (4 lines, bold)
Headline: "TAX" Kanit 900 black + "KNOWLEDGE" gold + "SERIES" black — very large
Sub: Thai center, dark, font-size medium
Card layout: 5 cards — top ROW of 2, bottom ROW of 3
Each card:
bg = white #fff, rounded-2xl, NO border, shadow
Photo: rectangular, aspect ~3:2, fills top portion
Caption area: centered text, BELOW photo
• Bold Thai title (large)
• Sub gray smaller below
════════════════════════════════════════════════════════ */
.kh2-tax{position:relative;overflow:hidden;padding:80px 0 88px;background:#f5f2ea;}
/* linen texture subtle dots */
.kh2-tax::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(.8px .8px at 18% 22%,rgba(160,130,80,.14) 0%,transparent 100%),
radial-gradient(.8px .8px at 36% 68%,rgba(160,130,80,.11) 0%,transparent 100%),
radial-gradient(.8px .8px at 72% 15%,rgba(160,130,80,.12) 0%,transparent 100%),
radial-gradient(.8px .8px at 88% 55%,rgba(160,130,80,.10) 0%,transparent 100%),
radial-gradient(.8px .8px at 55% 90%,rgba(160,130,80,.09) 0%,transparent 100%);}
/* Gold diagonal lines top-right — matching PDF exactly */
.kh2-tax-lines{position:absolute;top:0;right:0;width:460px;height:460px;
pointer-events:none;z-index:1;overflow:hidden;}
.kh2-tax-lines svg{position:absolute;top:0;right:0;width:100%;height:100%;}
.kh2-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px;}
/* Headline: TAX (black) KNOWLEDGE (gold) SERIES (black) Kanit 900 */
.kh2-hl{font-family:'Kanit',sans-serif;
font-size:clamp(2.8rem,5.2vw,4.6rem);font-weight:900;
text-align:center;margin:0 0 12px;line-height:1.05;letter-spacing:-.01em;}
.kh2-hl .blk{color:#111;}
.kh2-hl .gld{color:#C8952A;}
.kh2-sub{font-family:'Kanit',sans-serif;font-size:1.12rem;font-weight:400;
color:#333;text-align:center;margin:0 0 56px;}
/* 2-column row (top 2 cards) */
.kh2-row2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-bottom:26px;}
/* 3-column row (bottom 3 cards) */
.kh2-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
/* Article card — white rounded, NO border */
.kh2-card{background:#fff;border-radius:20px;overflow:hidden;
box-shadow:0 2px 18px rgba(0,0,0,.07);
display:flex;flex-direction:column;cursor:pointer;
transition:transform .3s,box-shadow .3s;}
.kh2-card:hover{transform:translateY(-5px);box-shadow:0 14px 44px rgba(200,149,42,.16);}
/* Photo — fills top, aspect 3:2 */
.kh2-photo{width:100%;aspect-ratio:3/2;background-size:cover;background-position:center;
background-color:#e0d8c8;flex-shrink:0;}
/* Text below photo — centered */
.kh2-card-body{padding:20px 20px 24px;text-align:center;}
.kh2-card-title{font-family:'Kanit',sans-serif;font-size:1.05rem;font-weight:900;
color:#111;margin:0 0 8px;line-height:1.38;}
.kh2-card-sub{font-family:'Kanit',sans-serif;font-size:.88rem;
color:#666;line-height:1.6;margin:0;}
/* ══ P3 BUSINESS STRUCTURE & LEGAL ═════════════════════
bg = warm marble/parchment cream #f0e8d8
(hint of marble texture)
+ gold botanical ink branches/twigs top-right
Headline: "BUSINESS" black + "STRUCTURE & LEGAL" gold — Kanit 900
Sub: Thai center dark
Same 5-card layout (2+3)
════════════════════════════════════════════════════════ */
.kh2-biz{position:relative;overflow:hidden;padding:80px 0 88px;background:#f0e8d8;}
/* Marble texture suggestion */
.kh2-biz::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 80% 60% at 30% 120%,rgba(180,150,100,.08),transparent 55%),
radial-gradient(ellipse 60% 40% at 70% -10%,rgba(180,150,100,.06),transparent 55%);}
/* Gold botanical deco top-right — matching PDF ink-brush branches */
.kh2-biz-deco{position:absolute;top:0;right:0;width:420px;height:500px;
pointer-events:none;z-index:1;overflow:hidden;}
.kh2-biz-deco svg{position:absolute;top:0;right:0;width:100%;height:100%;}
.kh2-biz-wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 72px;}
/* ══ P4 CTA ═════════════════════════════════════════════
Full-width dark city night photo
TEXT: far LEFT, bottom 50% of viewport
Headline: Thai, very large, white + "กลยุทธ์" gold
Sub: white 2-line
2 CTAs: CENTERED bottom (side by side)
════════════════════════════════════════════════════════ */
.kh2-cta{position:relative;overflow:hidden;padding:96px 0 100px;min-height:600px;display:flex;align-items:center;}
.kh2-cta-bg{position:absolute;inset:0;z-index:0;
background:#0d0c0a url(var(--bg-kh-cta, #0a0804)) center/cover no-repeat;}
.kh2-cta-ov{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(5,3,1,.9) 0%,rgba(5,3,1,.65) 40%,rgba(5,3,1,.3) 70%,transparent 100%);}
.kh2-cta-inner{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 80px;width:100%;}
.kh2-cta-h2{font-family:'Kanit',sans-serif;
font-size:clamp(2.4rem,4.2vw,3.6rem);font-weight:900;
color:#fff;line-height:1.2;margin:0 0 16px;max-width:820px;}
.kh2-cta-h2 .gd{color:#C8952A;}
.kh2-cta-sub{font-family:'Kanit',sans-serif;font-size:1.05rem;
color:rgba(255,255,255,.82);line-height:1.78;margin:0 0 48px;max-width:680px;}
/* 2 CTAs centered */
.kh2-cta-btns{display:flex;gap:20px;justify-content:center;}
/* ── Input focus/hover states (replacing inline handlers) ── */
input:focus, textarea:focus, select:focus {
border-color: #C8952A !important;
outline: none;
}
input:focus-visible, textarea:focus-visible {
outline: 2px solid rgba(200,149,42,.3);
outline-offset: 1px;
}
.jta-btn--gold:hover, .jta-btn.jta-btn--gold:hover {
background: #a07a1e;
transform: translateY(-2px);
}
/* Nav item hover */
.site-header nav a:hover { color: var(--gold); }
/* Card hover */
.osp-card:hover { transform: translateY(-8px); box-shadow: 0 20px 64px rgba(0,0,0,.13); }
.kh2-card:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(200,149,42,.16); }
/* ── Fix header top gap ── */
html { margin-top: 0 !important; }
body { margin: 0; padding: 0; }
#wpadminbar { display: none !important; }
@media screen and (min-width: 600px) {
html { margin-top: 0 !important; }
}
.site-header { top: 0 !important; }
/* ── Elementor compatibility ── */
.elementor-section { margin: 0 !important; }
.elementor-widget-html { margin: 0; padding: 0; }
.e-container, .elementor-container { max-width: 100% !important; }
/* ── Global Kanit Font Override ── */
*, *::before, *::after,
body, html,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, ul, ol,
input, textarea, select, button,
.jta-btn, .jta-nav-link, .jta-header-cta,
.footer-col-title, .footer-link, .footer-copy,
.jta-footer-tagline {
font-family: 'Kanit', sans-serif !important;
}
/* ── Header: transparent → solid on scroll ── */
.site-header.is-scrolled {
background: rgba(255,255,255,.97) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(200,149,42,.15) !important;
box-shadow: 0 2px 20px rgba(0,0,0,.07) !important;
height: 68px !important;
}
/* เมนูสีดำเมื่อ scroll */
.site-header.is-scrolled nav a {
color: #444 !important;
}
.site-header.is-scrolled nav a:hover,
.site-header.is-scrolled nav a.active {
color: var(--gold) !important;
}
.site-header.is-scrolled .jta-nav-chevron {
color: #999 !important;
}
.site-header.is-scrolled .jta-hamburger span {
background: #333 !important;
}
/* ── Hero must start from top (not shifted by fixed header) ── */
.jta-hero { margin-top: 0; }
/* ── Page content padding for fixed header ── */
/* top gap handled by Additional CSS */
/* ── Custom Logo (Appearance > Customize > Site Identity) ── */
.jta-logo-circle .custom-logo-link {
display:flex;
align-items:center;
text-decoration:none;
}
.jta-logo-circle .custom-logo {
height:52px !important;
width:auto !important;
max-width:160px !important;
max-height:52px !important;
object-fit:contain;
display:block;
transition:opacity .2s;
}
.jta-logo-circle .custom-logo:hover {
opacity:.85;
}
/* ซ่อน link ซ้อนกัน (the_custom_logo มี แล้ว) */
.jta-logo-circle a a { pointer-events:none; }
/* ── Logo size hard limit ── */
.site-header .custom-logo-link {
display: flex !important;
align-items: center !important;
height: 100% !important;
}
.site-header .custom-logo-link img,
.site-header .custom-logo {
max-height: var(--logo-h, 64px) !important;
height: var(--logo-h, 64px) !important;
width: auto !important;
max-width: 200px !important;
object-fit: contain !important;
display: block !important;
transition: height .3s ease, max-height .3s ease !important;
}
.site-header a.jta-logo-circle {
height: 52px;
width: auto;
max-width: 160px;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible;
flex-shrink: 0;
}
/* ── Inner pages: remove top gap from fixed header ── */
body:not(.home) .elementor-top-section:first-of-type,
body:not(.home) .e-con:first-of-type,
body:not(.home) > .elementor > .elementor-inner > .elementor-section:first-child {
margin-top: 0 !important;
}
/* ── All pages: hero section ชิดบน (เมื่อ section แรกเป็น hero) ── */
.jta-page .elementor-section.elementor-top-section:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ── Header Responsive ── */
@media (max-width:1200px) {
.site-header { padding:0 32px; height:80px; }
.site-header .custom-logo { max-height:60px !important; height:60px !important; }
.jta-mega { top:80px; }
}
@media (max-width:1024px) {
.site-header { padding:0 24px; height:72px; }
.site-header .custom-logo { max-height:54px !important; height:54px !important; }
.jta-nav { gap:0; }
.site-header nav a { padding:8px 10px; font-size:.85rem; }
.jta-header-cta { padding:10px 20px; font-size:.82rem; margin-left:12px; }
.jta-mega { top:72px; }
}
@media (max-width:768px) {
.site-header { padding:0 20px; height:68px; }
.site-header .custom-logo { max-height:48px !important; height:48px !important; }
.jta-nav, .jta-header-cta { display:none !important; }
.jta-hamburger { display:flex !important; }
}
/* Logo shrink on scroll */
.site-header.is-scrolled .custom-logo-link img,
.site-header.is-scrolled .custom-logo {
max-height: var(--logo-h-scrolled, 44px) !important;
height: var(--logo-h-scrolled, 44px) !important;
}
/* ── osp-solcard responsive ── */
/* Tablet: 2 col */
@media (max-width: 1024px) {
.osp-sol__grid {
grid-template-columns: repeat(2,1fr) !important;
gap: 18px;
}
.osp-solcard__bar { padding: 10px 14px 12px; }
.osp-solcard__label { font-size: .82rem; }
}
/* Mobile: 1 col */
@media (max-width: 640px) {
.osp-sol__wrap { padding: 0 16px !important; }
.osp-sol__grid {
grid-template-columns: 1fr !important;
max-width: 100% !important;
gap: 16px;
}
.osp-solcard__desc { padding: 24px 20px; }
.osp-solcard__desc .osp-solcard__hover-label { font-size: 1.05rem; }
.osp-solcard__desc p { font-size: .85rem; }
.osp-solcard__bar { padding: 10px 14px; }
}
/* XS */
@media (max-width: 400px) {
.osp-sol__grid { max-width: 100%; }
}
/* ── ea-course dp-row mobile reset ── */
@media(max-width:768px){
.ea-dp-row{
position:static !important;
width:100% !important;
flex-wrap:wrap !important;
gap:10px !important;
left:auto !important;
bottom:auto !important;
}
.ea-dpbar{ width:100% !important; }
.ea-priv{ margin-left:0 !important; width:100% !important; }
.ea-course-inner{ padding-bottom:24px !important; }
.ea-course-left{ padding-bottom:0 !important; }
.ea-profit-wrap{ padding-bottom:0 !important; }
.ea-profit
}
@media(max-width:1100px) and (min-width:769px){
.ea-dp-row{
left:72px !important;
right:auto !important;
}
.ea-profit
}
/* ══ P6 THE PROFIT GAME: dp-row layout ══
ea-dpbar อยู่ล่าง photo (col1), ea-priv อยู่ล่าง content (col2)
ทั้งสอง position:absolute ใน ea-profit-wrap
══════════════════════════════════════════ */
.ea-profit { overflow:visible; }
.ea-profit-wrap { overflow:visible; }
/* dp-row: ใช้ grid เดียวกับ parent — align col แม่นยำ */
.ea-profit .ea-dp-row {
position:absolute;
bottom:0;
left:80px;
right:80px;
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
align-items:stretch;
z-index:6;
}
/* ea-dpbar: เต็ม col1 พอดี */
.ea-profit .ea-dpbar {
width:100%;
border-radius:10px;
margin:0;
}
/* ea-priv: เต็ม col2 พอดี */
.ea-profit .ea-priv {
width:100%;
margin-left:0;
border-radius:12px;
box-sizing:border-box;
}
/* Tablet */
@media(max-width:1100px) and (min-width:769px){
.ea-profit .ea-dp-row {
left:40px; right:40px;
gap:36px;
grid-template-columns:1fr 1fr;
}
}
/* Mobile */
@media(max-width:768px){
.ea-profit .ea-dp-row {
position:static !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:20px;
}
.ea-profit .ea-dpbar,
.ea-profit .ea-priv {
width:100% !important;
}
.ea-profit-wrap { padding:0 24px 24px !important; }
}
/* ── Why JTA Hero: text RIGHT, button RIGHT ── */
.wjhero__box h1 {
text-align:right !important;
line-height:1.2 !important;
}
.wjhero__box p {
text-align:right !important;
}
.wjhero__box .jta-btn {
align-self:flex-end !important;
margin-top:8px;
}
/* Hide badge (not in design) */
.wjhero__badge { display:none !important; }
/* Tablet */
@media(max-width:1024px){
.wjhero__person{ width:36% !important; }
.wjhero__box{ max-width:520px !important; }
.wjhero__content{ padding:0 48px !important; }
}
/* Mobile */
@media(max-width:768px){
.wjhero__person{ display:none !important; }
.wjhero__content{
justify-content:center !important;
padding:0 24px !important;
}
.wjhero__box{
text-align:center !important;
align-items:center !important;
max-width:100% !important;
}
.wjhero__box h1 { text-align:right !important; }
.wjhero__box p { text-align:right !important; }
.wjhero__box .jta-btn{ align-self:flex-end !important; }
}
/* ── wjhero responsive ── */
@media(max-width:1200px){
.wjhero__person{ width:38% !important; }
.wjhero__box{ max-width:540px !important; }
.wjhero__content{ padding:0 48px !important; }
}
@media(max-width:1024px){
.wjhero__person{ width:35% !important; }
.wjhero__box{ max-width:480px !important; }
.wjhero__box h1{ font-size:clamp(1.8rem,3.5vw,2.8rem) !important; }
}
@media(max-width:768px){
.wjhero__person{ display:none !important; }
.wjhero__content{
justify-content:center !important;
padding:0 24px !important;
}
.wjhero__box{
max-width:100% !important;
align-items:center !important;
padding:0 0 40px !important;
}
.wjhero__box h1{ text-align:right !important; }
.wjhero__box p { text-align:right !important; }
.wjhero__box .jta-btn{ align-self:flex-end !important; }
}
/* Col title */
.jta-fc-title {
font-family: 'Kanit', sans-serif;
font-size: .82rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
color: #C8952A; margin: 0 0 20px;
}
/* Contact row */
.jta-fc-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 16px; text-decoration: none;
color: rgba(200,149,42,.85);
transition: color .2s;
}
.jta-fc-row--top { align-items: flex-start; }
.jta-fc-row:hover { color: #C8952A; }
/* Icon box: rounded square gold border */
.jta-fi {
width: 44px; height: 44px;
flex-shrink: 0;
border: 1.5px solid rgba(200,149,42,.7);
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
color: #C8952A;
background: transparent;
transition: background .2s, border-color .2s;
}
.jta-fi svg { width: 20px; height: 20px; }
.jta-fc-row:hover .jta-fi {
background: rgba(200,149,42,.12);
border-color: #C8952A;
}
/* Location pin: solid fill */
.jta-fi--pin {
border-radius: 9px;
align-self: flex-start;
margin-top: 2px;
}
.jta-fi--pin svg { width: 22px; height: 22px; color: #C8952A; }
/* Contact text */
.jta-fc-text {
font-family: 'Kanit', sans-serif;
font-size: .9rem; font-weight: 600;
color: rgba(200,149,42,.85);
line-height: 1.4;
}
/* Office */
.jta-fc-oname {
font-family: 'Kanit', sans-serif;
font-size: .88rem; font-weight: 700;
color: #C8952A; margin: 0 0 6px;
}
.jta-fc-oaddr {
font-family: 'Kanit', sans-serif;
font-size: .82rem; color: rgba(200,149,42,.72);
line-height: 1.75; margin: 0;
}
.jta-fc-mapslink {
font-family: 'Kanit', sans-serif;
font-size: .75rem; color: rgba(200,149,42,.6);
text-decoration: none; display: inline-block; margin-top: 8px;
transition: color .2s;
}
.jta-fc-mapslink:hover { color: #C8952A; }
/* Sitemap links */
.jta-fc-link {
font-family: 'Kanit', sans-serif;
font-size: .88rem; color: rgba(200,149,42,.75);
text-decoration: none; display: flex; align-items: center;
gap: 10px; padding: 5px 0;
transition: color .2s;
}
.jta-fc-link:hover { color: #C8952A; }
.jta-fc-dot { color: #C8952A; font-size: 1rem; }
/* Bottom bar */
/* Social icons */
.jta-footer-socials { display: flex; gap: 12px; }
.jta-si {
width: 44px; height: 44px;
border: 1.5px solid rgba(200,149,42,.6);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #C8952A; text-decoration: none;
transition: background .2s, border-color .2s;
}
.jta-si svg { width: 18px; height: 18px; }
.jta-si:hover {
background: rgba(200,149,42,.15);
border-color: #C8952A;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.jta-footer-inner {
grid-template-columns: 1fr 1fr;
gap: 36px; padding: 48px 32px 32px;
}
.jta-fc:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.jta-footer-inner {
grid-template-columns: 1fr;
gap: 28px; padding: 40px 24px 28px;
}
.jta-fc:last-child { grid-column: 1; }
.jta-footer-bottom {
padding: 16px 24px;
flex-direction: column;
align-items: flex-start;
}
.jta-footer-socials { flex-wrap: wrap; }
}
/* ══ FOOTER ICON STYLE (v791) — SVG gold rounded square ══ */
/* Contact row icon box */
.footer-ci-icon {
width:40px !important;height:40px !important;
flex-shrink:0;
border:1.5px solid rgba(200,149,42,.65) !important;
border-radius:8px !important;
background:transparent !important;
display:flex;align-items:center;justify-content:center;
color:#C8952A;
transition:background .2s, border-color .2s;
}
.footer-ci-icon svg { width:18px;height:18px;stroke:#C8952A;flex-shrink:0; }
.footer-ci-icon img { width:18px;height:18px;object-fit:contain;flex-shrink:0; }
.footer-ci-row:hover .footer-ci-icon {
background:rgba(200,149,42,.12) !important;
border-color:#C8952A !important;
}
/* Office pin */
.footer-office-pin {
color:#C8952A;
display:flex;align-items:flex-start;
flex-shrink:0;margin-top:2px;
}
.footer-office-pin svg { width:40px;height:40px; }
.footer-office-pin img { width:40px;height:40px;object-fit:contain; }
/* Social buttons: rounded square gold border */
.footer-social-btn {
width:40px !important;height:40px !important;
border:1.5px solid rgba(200,149,42,.6) !important;
border-radius:9px !important;
display:flex;align-items:center;justify-content:center;
color:#C8952A !important;
font-size:.85rem;
transition:background .2s, border-color .2s !important;
}
.footer-social-btn svg { width:17px;height:17px;stroke:#C8952A;fill:none; }
.footer-social-btn:hover {
background:rgba(200,149,42,.15) !important;
border-color:#C8952A !important;
color:#C8952A !important;
}
/* ══ Section 5: Services — Dark BG override ══ */
.jta-svc-section {
position: relative;
background: linear-gradient(160deg,#0a0804 0%,#1a1408 50%,#0e0b05 100%);
padding: 80px 0;
}
.jta-svc-section::before {
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 60% 50% at 65% 60%,rgba(180,120,40,.18),transparent 70%),
radial-gradient(ellipse 35% 40% at 25% 40%,rgba(150,100,20,.12),transparent 65%);
}
.jta-svc-section .jta-wrap-std { position:relative;z-index:2; }
/* H1 gold gradient */
.jta-svc-hl {
font-family: var(--th);
font-size: clamp(2rem,4vw,3.2rem);
font-weight: 900;
font-style: italic;
line-height: 1.15;
margin: 0 0 14px;
background: linear-gradient(135deg,#8E5F0E 0%,#C8952A 35%,#E8B840 55%,#C8952A 75%,#8E5F0E 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.jta-svc-sub {
font-family: var(--th);
font-size: clamp(.9rem,1.6vw,1.05rem);
color: #A6AEB1;
font-weight: 400;
line-height: 1.6;
margin: 0;
}
/* Responsive */
@media(max-width:1024px){
.jta-svcs-grid{ height:520px !important; }
.jta-svc-card__title{ font-size:1.1rem !important; }
.jta-svc-card--big .jta-svc-card__title{ font-size:1.4rem !important; }
.jta-svc-card__content{ padding:20px 24px !important; }
}
@media(max-width:768px){
.jta-svcs-grid{
grid-template-columns:1fr !important;
grid-template-rows:auto !important;
height:auto !important;
gap:12px !important;
}
.jta-svc-card{ height:280px; }
.jta-svc-card--big{ grid-row:auto !important; height:320px; }
}
@media(max-width:480px){
.jta-svc-card{ height:240px; }
.jta-svc-card--big{ height:280px; }
.jta-svc-section{ padding:56px 0 !important; }
}
/* ══ SECTION 6: SOLUTIONS SLIDER RESPONSIVE ══ */
/* ─ Tablet landscape ≤1100px ─ */
@media (max-width:1100px) {
.jta-sol-card.is-active {
min-height:400px;
}
.jta-sol-card__body {
padding:36px 32px;
}
}
/* ─ Tablet portrait ≤900px: stack vertical ─ */
@media (max-width:900px) {
.jta-sol-card.is-active {
grid-template-columns:1fr;
grid-template-rows:300px auto;
min-height:auto;
border-radius:16px;
}
.jta-sol-card__photo {
min-height:300px;
height:300px;
}
.jta-sol-card__body {
padding:32px 28px;
justify-content:flex-start;
}
.jta-sol-card__heading {
font-size:1.3rem;
margin-bottom:8px;
}
.jta-sol-card__hook {
font-size:1.05rem;
margin-bottom:14px;
}
.jta-sol-card__desc {
margin-bottom:24px;
font-size:.88rem;
}
}
/* ─ Mobile ≤560px ─ */
@media (max-width:560px) {
.jta-sol-card.is-active {
grid-template-rows:240px auto;
border-radius:14px;
}
.jta-sol-card__photo {
min-height:240px;
height:240px;
}
.jta-sol-card__body {
padding:24px 20px;
border-width:1.5px;
}
.jta-sol-card__eyebrow {
font-size:.68rem;
margin-bottom:8px;
}
.jta-sol-card__heading {
font-size:1.1rem;
margin-bottom:6px;
}
.jta-sol-card__hook {
font-size:.95rem;
margin-bottom:10px;
}
.jta-sol-card__desc {
font-size:.83rem;
line-height:1.65;
margin-bottom:18px;
}
.jta-sol-card__nav {
flex-wrap:wrap;
gap:10px;
}
.jta-sol-arrow {
width:36px;
height:36px;
font-size:.85rem;
}
}
/* ─ Small mobile ≤380px ─ */
@media (max-width:380px) {
.jta-sol-card.is-active {
grid-template-rows:200px auto;
}
.jta-sol-card__body {
padding:20px 16px;
}
.jta-sol-card__heading { font-size:1rem; }
.jta-sol-card__hook { font-size:.9rem; }
}
/* ══ S4 JTA EXECUTIVE ACADEMY RESPONSIVE ══ */
/* Tablet: 1024px — narrow 2-col */
@media (max-width: 1100px) {
.osp-acad__wrap {
gap: 48px !important;
padding: 0 48px !important;
}
.osp-acad__photobox {
max-width: 340px !important;
height: 453px !important;
}
.osp-acad__h2 {
font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
}
}
/* Tablet portrait: 900px — stack vertical */
@media (max-width: 900px) {
.osp-acad {
padding: 64px 0 !important;
}
.osp-acad__wrap {
grid-template-columns: 1fr !important;
gap: 48px !important;
padding: 0 40px !important;
}
/* Photo: horizontal แนวนอน บน mobile */
.osp-acad__photocol {
display: flex;
justify-content: center;
}
.osp-acad__photobox {
max-width: 320px !important;
height: 427px !important;
margin: 0 auto;
}
.osp-acad__logocircle {
width: 80px !important;
height: 80px !important;
bottom: -16px !important;
}
.osp-acad__logocircle span:first-child {
font-size: 1.05rem !important;
}
.osp-acad__content {
padding-bottom: 0 !important;
}
.osp-acad__h2 {
font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
}
}
/* Mobile: 640px */
@media (max-width: 640px) {
.osp-acad {
padding: 48px 0 !important;
}
.osp-acad__wrap {
padding: 0 24px !important;
gap: 36px !important;
}
.osp-acad__photobox {
max-width: 280px !important;
height: 373px !important;
}
.osp-acad__badge {
font-size: .62rem !important;
padding: 7px 16px !important;
margin-bottom: 20px !important;
}
.osp-acad__h2 {
font-size: 1.4rem !important;
margin-bottom: 14px !important;
}
.osp-acad__body {
font-size: .9rem !important;
margin-bottom: 24px !important;
}
/* Feature grid: 1 col on mobile */
.osp-acad__featgrid {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-bottom: 28px !important;
}
.osp-acad__feat {
padding: 16px !important;
}
.osp-acad__feat-icon {
width: 32px !important;
height: 32px !important;
}
}
/* Small: 400px */
@media (max-width: 400px) {
.osp-acad__wrap { padding: 0 16px !important; }
.osp-acad__photobox { max-width: 240px !important; height: 320px !important; }
}
/* ══════════════════════════════════════════════════════════
GLOBAL RESPONSIVE ADDITIONS — ปรับทุกหน้า
══════════════════════════════════════════════════════════ */
/* ─── Solution Page (sl3-) ─── */
@media (max-width:1100px) {
.sl3-ecom-wrap,.sl3-factory-wrap,.sl3-sme-wrap {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.sl3-fcard { padding: 24px !important; }
.sl3-ecom-photo,.sl3-factory-photo,.sl3-sme-photo {
height: 320px !important;
border-radius: 16px !important;
}
}
@media (max-width:900px) {
.sl3-hero-inner { padding: 0 32px 40px !important; }
.sl3-hero-text { max-width: 100% !important; }
.sl3-hero-tabs { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 10px !important; }
.sl3-tab { min-width: 0 !important; flex: none !important; }
.sl3-ecom-grid,.sl3-factory-grid,.sl3-sme-grid,.sl3-sdet-grid {
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
.sl3-cta-inner { padding: 40px 32px !important; }
}
@media (max-width:640px) {
.sl3-hero-inner { padding: 0 20px 36px !important; }
.sl3-h1 { font-size: clamp(1.8rem,6vw,2.6rem) !important; }
.sl3-ecom-grid,.sl3-factory-grid,.sl3-sme-grid,.sl3-sdet-grid {
grid-template-columns: 1fr !important;
}
.sl3-fcard { padding: 20px !important; }
.sl3-fcard-name { font-size: .88rem !important; }
.sl3-section { padding: 48px 0 !important; }
.sl3-cta-inner { padding: 32px 20px !important; flex-direction: column !important; gap: 20px !important; text-align: center !important; }
.sl3-ecom-photo,.sl3-factory-photo,.sl3-sme-photo { height: 240px !important; }
}
/* ─── Executive Academy (ea-) ─── */
@media (max-width:1100px) {
.ea-course-inner { padding: 0 40px !important; }
.ea-profit-wrap { padding: 0 40px 110px !important; }
.ea-learn-wrap,.ea-expert-wrap { padding: 0 40px !important; }
.ea-learn-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:900px) {
.ea-course-inner { grid-template-columns: 1fr !important; padding: 0 32px !important; }
.ea-profit-wrap { grid-template-columns: 1fr !important; padding: 0 32px 80px !important; }
.ea-course-photo,.ea-profit-photo { aspect-ratio: 16/9 !important; max-height: 280px !important; }
.ea-dp-row { position: static !important; width: 100% !important; flex-wrap: wrap !important; left: auto !important; bottom: auto !important; gap: 10px !important; margin-top: 20px !important; }
.ea-dpbar,.ea-priv { width: 100% !important; margin-left: 0 !important; }
.ea-course-left { padding-bottom: 0 !important; }
.ea-experts-row { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:640px) {
.ea-course,.ea-profit,.ea-learn,.ea-expert,.ea-cta { padding: 48px 0 !important; }
.ea-course-inner { padding: 0 20px !important; }
.ea-profit-wrap { padding: 0 20px 60px !important; }
.ea-learn-wrap,.ea-expert-wrap,.ea-cta-inner { padding: 0 20px !important; }
.ea-learn-grid { grid-template-columns: 1fr !important; }
.ea-experts-row { grid-template-columns: 1fr !important; gap: 16px !important; }
.ea-course-title { font-size: clamp(1.8rem,5vw,2.8rem) !important; }
.ea-profit-title { font-size: clamp(1.8rem,5vw,2.8rem) !important; }
.ea-pain-grid { grid-template-columns: 1fr !important; }
}
/* ─── Knowledge Hub (kh2-) ─── */
@media (max-width:1100px) {
.kh2-biz-wrap { padding: 0 40px !important; }
.kh2-biz-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
}
@media (max-width:900px) {
.kh2-hero { min-height: 420px !important; }
.kh2-hero-inner { padding: 0 32px 40px !important; }
.kh2-hl { font-size: clamp(1.6rem,4vw,2.4rem) !important; }
.kh2-biz-wrap { padding: 0 32px !important; }
.kh2-biz-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.kh2-card { flex-direction: column !important; }
.kh2-card-body { padding: 20px !important; }
.kh2-cta-inner { padding: 40px 32px !important; flex-direction: column !important; gap: 20px !important; text-align: center !important; }
}
@media (max-width:640px) {
.kh2-hero { min-height: 360px !important; }
.kh2-hero-inner { padding: 0 20px 32px !important; }
.kh2-hl { font-size: clamp(1.4rem,5vw,2rem) !important; }
.kh2-photo { height: 180px !important; }
.kh2-biz-wrap { padding: 0 20px !important; }
.kh2-cta-inner { padding: 32px 20px !important; }
}
/* ─── Home: missing classes ─── */
@media (max-width:1024px) {
.jta-test-grid { grid-template-columns: repeat(2,1fr) !important; }
.jta-logos-grid { gap: 24px !important; }
.jta-ins-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:640px) {
.jta-test-grid { grid-template-columns: 1fr !important; }
.jta-ins-grid { grid-template-columns: 1fr !important; }
.jta-logos-grid { grid-template-columns: repeat(3,1fr) !important; gap: 16px !important; }
.jta-pain-banner { flex-direction: column !important; text-align: center !important; gap: 16px !important; }
}
/* ─── Data & ERP: missing ─── */
@media (max-width:900px) {
.de2-fcard { padding: 20px !important; }
.de2-fcard-title { font-size: .95rem !important; }
.de2-fcard-sub { font-size: .82rem !important; }
.de2-partner { padding: 60px 0 0 !important; }
.de2-partner-inner { height: auto !important; padding: 0 32px 40px !important; }
}
@media (max-width:640px) {
.de2-fcard { padding: 16px !important; }
.de2-partner-inner { padding: 0 20px 32px !important; }
}
/* ─── Global: section padding compact on small screen ─── */
@media (max-width:768px) {
.sec-pad { padding: 56px 0 !important; }
.jta-wrap-std { padding: 0 20px !important; }
}
@media (max-width:480px) {
.sec-pad { padding: 40px 0 !important; }
.jta-wrap-std { padding: 0 16px !important; }
}
/* ══ AT PRICING — Responsive ══ */
/* Tablet: 900px — stack to 1 col */
@media (max-width: 900px) {
.at-price-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.at-pcards-23 {
grid-template-columns: 1fr 1fr !important;
}
}
/* Mobile: 640px — full stack */
@media (max-width: 640px) {
.at-price-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.at-pcards-23 {
grid-template-columns: 1fr !important;
border-radius: 18px !important;
}
.at-pcards-23 .at-pcard:last-child {
border-left: none !important;
border-top: 1.5px dashed rgba(200,149,42,.55) !important;
}
}
/* Small: 380px */
@media (max-width: 380px) {
.at-pcard { padding: 24px 18px 28px !important; }
.at-pcard-price { font-size: 1.8rem !important; }
}
/* ══════════════════════════════════════════════════
GLOBAL RESPONSIVE — ทุกหน้า
══════════════════════════════════════════════════ */
/* Wrapper padding responsive */
@media (max-width:1024px) {
.jta-wrap-std { padding: 0 32px !important; }
.at-price-wrap { padding: 0 32px !important; }
.osp-acad__wrap { padding: 0 32px !important; }
}
@media (max-width:768px) {
.jta-wrap-std { padding: 0 20px !important; }
.at-price-wrap { padding: 0 20px !important; }
.sec-pad { padding: 56px 0 !important; }
.osp-acad__wrap { padding: 0 20px !important; }
}
@media (max-width:480px) {
.jta-wrap-std { padding: 0 16px !important; }
.at-price-wrap { padding: 0 16px !important; }
.sec-pad { padding: 40px 0 !important; }
}
/* ── Home: Section 5 Services ── */
@media (max-width:768px) {
.jta-s5 { padding: 48px 0 !important; }
.jta-s5-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
height: auto !important;
gap: 12px !important;
}
.jta-s5-card { height: 280px !important; }
.jta-s5-card--big { grid-row: auto !important; height: 300px !important; }
}
@media (max-width:480px) {
.jta-s5-card { height: 240px !important; }
.jta-s5-card--big { height: 260px !important; }
.jta-s5-h1 { font-size: 1.8rem !important; }
}
/* ── Footer responsive ── */
@media (max-width:1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
padding: 48px 32px !important;
}
}
@media (max-width:640px) {
.footer-grid {
grid-template-columns: 1fr !important;
padding: 40px 20px !important;
}
.footer-bottom { padding: 16px 20px !important; flex-direction: column !important; }
}
/* ── Header responsive ── */
@media (max-width:768px) {
.site-header { padding: 0 20px !important; height: 70px !important; }
}
/* ── at-grid responsive ── */
@media (max-width: 1024px) {
.at-cards { grid-template-columns: repeat(2,1fr) !important; gap:18px !important; }
.at-grid-wrap { padding: 0 32px !important; }
.at-sc { min-height: 220px !important; }
}
@media (max-width: 600px) {
.at-cards { grid-template-columns: 1fr !important; gap:16px !important; }
.at-grid-wrap { padding: 0 16px !important; }
.at-grid { padding: 56px 0 64px !important; }
.at-sc { min-height: 200px !important; }
.at-sc-hover { padding: 20px 18px !important; }
.at-sc-hlist li { font-size: .86rem !important; }
}
/* ── de2-price-grid: equal height cards ── */
.de2-price-grid {
align-items: stretch !important;
}
.de2-pcard {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.de2-pcard-list {
flex: 1 !important;
}
/* ── de2-price responsive ── */
@media (max-width: 1024px) {
.de2-price-grid {
grid-template-columns: repeat(2,1fr) !important;
gap: 20px !important;
}
.de2-price-wrap { padding: 0 32px !important; }
}
@media (max-width: 640px) {
.de2-price-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.de2-price-wrap { padding: 0 16px !important; }
.de2-price { padding: 56px 0 64px !important; }
.de2-pcard { padding: 24px 20px 28px !important; }
.de2-pcard-price { font-size: 2rem !important; }
}
/* ── at-pain responsive ── */
@media (max-width: 1100px) {
.at-pain-row {
grid-template-columns: 260px 1fr !important;
gap: 48px !important;
}
.at-pain-wrap { padding: 0 32px !important; }
}
@media (max-width: 900px) {
.at-pain-row {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.at-pain-hl {
text-align: center !important;
font-size: clamp(1.5rem,4vw,2.2rem) !important;
}
.at-pain-cards {
grid-template-columns: repeat(3,1fr) !important;
gap: 0 !important;
}
.at-pain-wrap { padding: 0 24px !important; }
}
@media (max-width: 640px) {
.at-pain-cards {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.at-pain-cards::before { display: none !important; }
.at-pain-card {
padding: 20px !important;
border: 1px solid rgba(200,149,42,.2) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.04) !important;
}
.at-pain { padding: 56px 0 48px !important; }
.at-pain-wrap { padding: 0 16px !important; }
.at-pain-bottom p { font-size: clamp(.95rem,3.5vw,1.1rem) !important; }
}
/* ── at-hero responsive ── */
@media (max-width: 1024px) {
.at-hero-inner {
padding: 80px 48px 0 !important;
justify-content: flex-end !important;
}
.at-hero-text { max-width: 520px !important; }
}
@media (max-width: 768px) {
.at-hero {
min-height: 100svh !important;
align-items: flex-end !important;
}
/* bottom-to-top dark scrim so text stays legible on any photo */
.at-hero::before {
content: '';
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(
to top,
rgba(4,3,1,.85) 0%,
rgba(4,3,1,.55) 40%,
rgba(4,3,1,.05) 100%
);
}
.at-hero-inner {
position: relative; z-index: 2 !important;
padding: 0 20px 56px !important;
margin-top: 0 !important;
justify-content: flex-end !important;
align-items: flex-end !important;
flex-direction: column !important;
box-sizing: border-box !important;
width: 100% !important;
overflow: hidden !important;
}
.at-hero-inner > div:first-child { display: none !important; }
.at-hero-text {
width: 100% !important;
max-width: 100% !important;
text-align: right !important;
align-items: flex-end !important;
box-sizing: border-box !important;
}
.at-hero-h1 {
font-size: clamp(1.55rem, 5.5vw, 2rem) !important;
line-height: 1.5 !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
width: 100% !important;
text-align: right !important;
}
.at-hero-sub {
font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
line-height: 1.75 !important;
-webkit-text-stroke: 0 !important;
text-shadow: 0 1px 8px rgba(0,0,0,.65) !important;
width: 100% !important;
text-align: right !important;
/* ป้องกัน word ขาดกลาง — ใช้ normal แทน keep-all เพื่อให้ sub ตัดได้ */
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
.at-hero-cta {
margin-top: 28px !important;
align-self: flex-end !important;
width: auto !important;
}
}
@media (max-width: 480px) {
.at-hero-inner { padding: 0 18px 48px !important; }
.at-hero-h1 { font-size: clamp(1.4rem, 6vw, 1.75rem) !important; }
.at-hero-sub { font-size: clamp(.88rem, 4vw, 1rem) !important; }
}