/* ============================================================ PSEO EXPERT — LUXURY GLASS EDITION สูตรจาก reference: เข้มสลับครีม · การ์ดกระจก · พาดหัว 2 สี เลข serif ทอง · น้ำเงินอมเขียว + ครีม + ทอง ============================================================ */ :root{ --navy:#071B28; --navy-2:#0A2433; --navy-3:#0D2C3E; --cream:#FAF7EF; --cream-2:#F3EFE4; --card:#FFFFFF; --gold:#D8B370; --gold-lit:#EDCB8B; --gold-dim:#9C8354; --gold-ink:#2A1F0A; --teal:#17A67B; --teal-deep:#0E6B50; --violet:#8B5CF6; --violet-lit:#B79AFF; --pink:#F0407F; --pink-lit:#FF7AA8; --ink:#0B2430; --ink-soft:#33444B; --line:#E7E1D2; --hair:rgba(216,179,112,.24); --hair-soft:rgba(216,179,112,.12); --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.2); /* ฟอนต์ 2 ตระกูล: Anuphan ทำทั้งหัวข้อ+เนื้อความ / Mono เฉพาะป้ายเล็ก */ --f-display:'Anuphan',system-ui,sans-serif; --f-serif:'Anuphan',system-ui,sans-serif; --f-body:'Anuphan',system-ui,sans-serif; --f-data:'IBM Plex Mono',ui-monospace,monospace; --wrap:1180px; --r:20px; --lift:0 2px 5px rgba(11,36,48,.05), 0 24px 54px -24px rgba(11,36,48,.25); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink); background: radial-gradient(900px 520px at 88% 6%, rgba(139,92,246,.09), transparent 58%), radial-gradient(760px 480px at 4% 34%, rgba(23,166,123,.08), transparent 56%), radial-gradient(820px 520px at 92% 72%, rgba(240,64,127,.07), transparent 58%), radial-gradient(700px 460px at 10% 96%, rgba(216,179,112,.1), transparent 56%), #FFFFFF; background-attachment:fixed; font-family:var(--f-body);font-size:17px;line-height:1.85; font-weight:400;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} picture{display:contents} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px} h1,h2,h3,h4{font-family:var(--f-display);line-height:1.3;margin:0} h1{font-size:clamp(2.3rem,4.8vw,3.9rem);font-weight:700} h2{font-size:clamp(1.75rem,3.2vw,2.6rem);font-weight:700} h3{font-size:1.13rem;font-weight:600} p{margin:0} b,strong{font-weight:500} /* พาดหัว 2 สี: บรรทัดทองใช้ span.g */ h1 .g,h2 .g{display:block;color:var(--gold);} h1 .kw{display:block;background:linear-gradient(92deg,#FF4D9D 8%,#E0338F 45%,#A32BE0 92%); -webkit-background-clip:text;background-clip:text;color:transparent} h1 .kw2{display:block;background:linear-gradient(92deg,#FFC93C 12%,#2FD69B 88%); -webkit-background-clip:text;background-clip:text;color:transparent} h1 .h1sub{display:block;font-size:.46em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.88);margin-top:14px;letter-spacing:.01em} .on-dark h1 .g,.on-dark h2 .g{color:var(--gold-lit)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px} .section{padding:104px 0;position:relative} .center{text-align:center} .center .lede{margin-inline:auto} .eyebrow{font-family:var(--f-data);font-size:.76rem;font-weight:500; letter-spacing:.3em;text-transform:uppercase;color:#7E6838; display:inline-flex;align-items:center;gap:12px;margin-bottom:18px} .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)} .center .eyebrow::after{content:"";width:30px;height:1px;background:var(--gold)} .on-dark .eyebrow{color:var(--gold)} .lede{color:#2C3B42;max-width:62ch;margin-top:18px;font-size:1.1rem;line-height:1.9} .on-dark .lede{color:rgba(255,255,255,.88)} /* เลข serif ทอง */ .num{font-family:var(--f-display);font-weight:600;font-size:1.55rem; color:var(--gold);line-height:1;font-variant-numeric:tabular-nums lining-nums} /* ============ กระจก ============ */ .glass{background:var(--glass);backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-line); border-radius:24px; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 34px 74px -30px rgba(0,0,0,.6)} /* ============ ปุ่ม ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--f-display);font-weight:500;font-size:.98rem; padding:17px 36px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease} .btn:hover{transform:translateY(-2px)} .btn::after{content:"→";font-family:var(--f-data);transition:transform .2s} .btn:hover::after{transform:translateX(4px)} .btn--gold{background:linear-gradient(110deg,var(--gold-lit),var(--gold) 55%,var(--gold-dim)); color:var(--gold-ink);box-shadow:0 14px 34px -12px rgba(216,179,112,.65)} .btn--pink{background:linear-gradient(110deg,var(--pink-lit),var(--pink) 60%,#C42360); color:#fff;box-shadow:0 14px 34px -12px rgba(240,64,127,.6)} .btn--pink:hover{box-shadow:0 20px 44px -12px rgba(240,64,127,.8)} .btn--boot{background:#FFC107;color:#1F1600;border:0;box-shadow:none; font-weight:500;border-radius:10px} .btn--orange{background:linear-gradient(100deg,#FFB020 0%,#FF8A00 52%,#FF7300 100%); color:#fff;font-weight:600;border:0; box-shadow:0 14px 32px -12px rgba(255,138,0,.7)} .btn--orange:hover{box-shadow:0 20px 42px -12px rgba(255,138,0,.85)} .btn--vio{background:linear-gradient(95deg,#F5308C,#A32BE0);color:#fff; box-shadow:0 14px 34px -12px rgba(214,44,180,.6)} .btn--vio:hover{box-shadow:0 20px 44px -12px rgba(214,44,180,.8)} .btn--login{position:relative;border:0;color:#fff;border-radius:999px; background:rgba(255,255,255,.05);overflow:hidden;isolation:isolate} /* ขอบไล่เฉดที่หมุนรอบตัวเอง = แสงวิ่งบนเส้นขอบ */ .btn--login::before{content:"";position:absolute;inset:0;border-radius:inherit; padding:1.5px;pointer-events:none; background:conic-gradient(from var(--ang), rgba(255,255,255,.13) 0deg, rgba(255,255,255,.13) 236deg, rgba(120,190,255,.55) 286deg, #9CD2FF 312deg, rgba(255,255,255,.92) 328deg, rgba(120,190,255,.5) 344deg, rgba(255,255,255,.13) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:aispin 2.6s linear infinite} .btn--login:hover{background:rgba(140,200,255,.12);color:#CFE9FF; box-shadow:0 0 22px -6px rgba(140,200,255,.7)} .btn--boot:hover{background:#FFCD39;transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(255,193,7,.6)} .btn--glass{background:rgba(255,255,255,.1);backdrop-filter:blur(10px); border-color:rgba(255,255,255,.3);color:#fff} .btn--glass:hover{background:rgba(255,255,255,.18)} .btn--ink{border-color:var(--ink);color:var(--ink)} .btn--ink:hover{background:var(--ink);color:var(--cream)} .btn--sm{padding:12px 24px;font-size:.9rem} .btn--plain::after{content:none} /* ============ HEADER ============ */ .hdr{position:sticky;top:0;z-index:80; /* ทึบ 100% ตอนอยู่บนสุด (กันเทาหม่นเพราะพื้น body สีขาว) */ background:linear-gradient(180deg,rgba(9,32,48,.62) 0%,rgba(6,22,36,.58) 55%,rgba(4,15,26,.6) 100%); /* เปิด backdrop-filter ค้างไว้ตลอด — ห้ามเปิดปิดกลางทาง ไม่งั้นเบราว์เซอร์แฟลช */ backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%); border-bottom:1px solid rgba(255,255,255,.09); box-shadow:0 0 0 0 rgba(0,0,0,0); transform:translateZ(0);will-change:background,box-shadow; transition:background .35s linear, box-shadow .35s ease} /* ตอนเลื่อน: ใช้ไล่เฉดโครงเดียวกัน (3 จุดสีเท่ากัน) เบราว์เซอร์ถึงจะค่อย ๆ ไล่ให้ได้ */ .hdr.is-stuck{ background:linear-gradient(180deg,rgba(7,26,40,.82) 0%,rgba(4,17,28,.8) 55%,rgba(3,12,20,.82) 100%); box-shadow:0 18px 40px -22px rgba(0,0,0,.9)} .hdr::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:320px; background:linear-gradient(115deg,rgba(255,77,157,.42),rgba(163,43,224,.34) 46%,rgba(47,214,155,.26)); clip-path:polygon(0 0,100% 0,70% 100%,0 100%);pointer-events:none; filter:saturate(125%)} .hdr__in{position:relative;z-index:2} .hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent 8%,rgba(216,179,112,.55) 50%,transparent 92%); pointer-events:none} .hdr__in{display:flex;align-items:center;gap:18px;height:84px} /* โลโก้: วางไฟล์รูปแล้วใส่ ใน .logo ได้เลย / ใน WordPress ใช้ the_custom_logo() แทนทั้งบล็อก */ .logo{display:flex;align-items:center;gap:12px;white-space:nowrap;color:#fff} /* */ .hdr .logo__unused{ } .hdr .logo__txt b{font-size:1.14rem;letter-spacing:.005em;color:#fff} .logo__txt b em{font-style:normal; background:linear-gradient(96deg,#FFD24A 2%,#FFA51F 48%,#FF7A00 98%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 12px rgba(255,165,31,.5))} /* อยากได้แบบเรียบหรูกว่า: ลบ 3 บรรทัดบน แล้วใช้ color:#fff แทน */ .hdr .logo__txt small{color:#C9A45E;opacity:.95} .logo img{height:40px;width:auto;display:block} .logo__p{font-family:var(--f-display);font-weight:700;font-size:3.1rem;line-height:.86; letter-spacing:-.04em; background:linear-gradient(150deg,#FF9A2E 0%,#FF6A1F 42%,#E8382B 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(255,106,31,.55)); transition:filter .3s ease,transform .3s cubic-bezier(.2,.9,.3,1.5)} .logo:hover .logo__p{transform:translateY(-3px) scale(1.05); filter:drop-shadow(0 0 28px rgba(232,56,43,.9))} .logo__txt{line-height:1.25} .logo__txt b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.02rem} .logo__txt small{font-family:var(--f-data);font-size:.6rem; letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim)} .nav{display:flex;gap:20px;margin-inline-start:auto;font-size:.9rem;white-space:nowrap; font-weight:400;color:rgba(255,255,255,.85)} .nav a{display:inline-block;padding:6px 2px; transition:color .2s ease,text-shadow .25s ease} .nav a:hover{color:#fff;text-shadow:0 0 14px rgba(255,138,0,.45); animation:navBounce .42s cubic-bezier(.28,.9,.36,1.4)} @keyframes navBounce{ 0%{transform:translateY(0)} 45%{transform:translateY(-5px)} 75%{transform:translateY(1px)} 100%{transform:translateY(0)}} .hdr .btn--gold{padding:12px 26px;font-size:.9rem} .search{display:flex;align-items:center;gap:6px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:999px;padding:8px 8px 8px 16px} .search input{background:none;border:0;outline:0;color:#fff; font-family:var(--f-body);font-size:.85rem;width:96px} .search input::placeholder{color:rgba(255,255,255,.45)} .search button{background:none;border:0;color:var(--gold-lit);cursor:pointer; display:grid;place-items:center;padding:4px} .search svg{width:16px;height:16px} .mnav .search{margin-top:14px;padding:12px 12px 12px 18px} .mnav .search input{width:100%;flex:1;font-size:.95rem} .burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--gold); width:44px;height:44px;line-height:1;border-radius:10px} .burger{transition:background .25s ease,box-shadow .25s ease,transform .25s ease} .burger:hover{box-shadow:0 0 18px -2px rgba(197,139,255,.6);transform:scale(1.06)} .burger[aria-expanded="true"]{background:rgba(255,255,255,.12); box-shadow:0 0 22px -2px rgba(197,139,255,.75)} .mnav{display:none;position:fixed;top:68px;left:0;right:0;z-index:79; background:rgba(4,16,26,.97);backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.1); border-radius:0 0 24px 24px; box-shadow:0 34px 70px -24px rgba(0,0,0,.7); padding:14px 24px 26px} .mnav::before{content:"";display:block;height:1px;margin:0 2px 8px; background:linear-gradient(90deg,transparent,rgba(216,179,112,.6),transparent)} .mnav.open{display:block} .mnav.open::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 30%,rgba(197,139,255,.16) 48%, rgba(62,224,169,.13) 58%,transparent 74%); animation:panelSweep .85s ease-out forwards} @keyframes panelSweep{ from{transform:translateX(-60%);opacity:1} to{transform:translateX(60%);opacity:0}} .mnav a{position:relative;overflow:hidden;display:block;padding:15px 14px;font-size:1.02rem; color:rgba(255,255,255,.88);border-radius:12px; border-bottom:1px solid rgba(255,255,255,.08); opacity:0;transform:translateY(-10px)} /* แสงกวาดผ่านตอนแตะ */ .mnav a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(197,139,255,.35) 45%, rgba(62,224,169,.3) 60%,transparent 82%); transform:translateX(-110%);opacity:0} .mnav a:active::after{animation:menuSweep .6s ease-out} .mnav a:active{background:rgba(255,255,255,.06)} @keyframes menuSweep{ 0%{transform:translateX(-110%);opacity:1} 100%{transform:translateX(110%);opacity:0}} .mnav.open a{animation:mIn .45s cubic-bezier(.2,.8,.3,1) forwards} .mnav.open a:nth-child(1){animation-delay:.03s} .mnav.open a:nth-child(2){animation-delay:.07s} .mnav.open a:nth-child(3){animation-delay:.11s} .mnav.open a:nth-child(4){animation-delay:.15s} .mnav.open a:nth-child(5){animation-delay:.19s} .mnav.open a:nth-child(6){animation-delay:.23s} .mnav.open a:nth-child(7){animation-delay:.27s} .mnav.open a:nth-child(8){animation-delay:.31s} @keyframes mIn{to{opacity:1;transform:none}} .mnav a:last-of-type{border-bottom:0} .mnav .tel-row{font-family:var(--f-data);color:var(--gold-lit)} /* ============ HERO — เข้ม + การ์ดกระจก ============ */ .hero{position:relative;overflow:visible;margin-top:-84px;padding:156px 0 88px;color:#fff; background: radial-gradient(760px 480px at 82% 6%, rgba(255,138,0,.2), transparent 62%), radial-gradient(620px 440px at 96% 46%, rgba(124,120,255,.16), transparent 60%), radial-gradient(700px 480px at 2% 96%, rgba(216,179,112,.13), transparent 60%), linear-gradient(150deg,#05101F 0%,#0A2036 24%,#0E3352 48%,#153F66 72%,#1D4E7A 100%)} /* แสงเฉียงพาดผ่าน hero (พรีเมียม) */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background: linear-gradient(102deg,transparent 30%,rgba(255,255,255,.08) 37%,transparent 45%), linear-gradient(102deg,transparent 54%,rgba(255,255,255,.05) 60%,transparent 68%), radial-gradient(120% 60% at 50% 100%, rgba(2,8,18,.35), transparent 62%)} .hero__grid{position:relative;z-index:2;display:grid; grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} .hero__copy{padding-top:26px} .hero h1 em{font-style:normal;color:var(--gold-lit)} .hero__sub{color:rgba(255,255,255,.92);font-size:1.05rem;max-width:46ch;margin-top:20px} .hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px} .hero__tags span{font-family:var(--f-data);font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px} /* --- การ์ดกระจก Growth Framework --- */ .hero__visual{position:relative;width:min(430px,100%);justify-self:end} /* เปลี่ยนรูป: แก้ src ของ ใน .hphoto จุดเดียว / ใน WP = Customizer หรือ featured image */ .hphoto{position:relative;width:100%;aspect-ratio:1/1;min-height:320px;max-height:440px; background:none;border:0;box-shadow:none;border-radius:0;overflow:visible} /* แสงนวลหลังตัว แทนกรอบแข็ง ๆ — ไม่มีขอบให้เห็น */ .hphoto::before{content:"";position:absolute;inset:-6% -4% -2%;pointer-events:none; background: radial-gradient(48% 44% at 60% 24%, rgba(255,150,50,.2), transparent 68%), radial-gradient(40% 38% at 74% 52%, rgba(23,166,123,.14), transparent 66%), radial-gradient(40% 36% at 26% 78%, rgba(216,179,112,.16), transparent 66%); filter:blur(6px)} .hphoto img{position:absolute;inset:0;width:100%;height:106%!important; object-fit:contain;object-position:bottom center;z-index:2; filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 2px 0 rgba(255,255,255,.05))} .hphoto__ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.26)} .hphoto__ph svg{width:130px;height:130px} .hero__visual .fw{position:relative;width:100%;margin-top:4px; padding:22px 18px 20px 46px;z-index:3} /* เวอร์ชันกะทัดรัดเฉพาะใน hero */ .hero__visual .fw .fw__title{font-size:.64rem} .hero__visual .fw .fw__live{font-size:.6rem} .hero__visual .fw .fw__row{padding:8px 2px;gap:11px} .hero__visual .fw .fw__ico{width:31px;height:31px} .hero__visual .fw .fw__ico svg{width:14px;height:14px} .hero__visual .fw .fw__row b{font-size:.87rem} .hero__visual .fw .fw__row small{font-size:.72rem;line-height:1.4} .hero__visual .fw .fw__row .num{font-size:1.02rem} .hero__visual .fw .fw__chart{height:48px;margin-top:9px;padding:8px;gap:5px;border-radius:10px} .hero__visual .fw .fw__foot{margin-top:8px} .hero__visual .fw .fw__foot small{font-size:.6rem} .hero__visual .fw .fw__foot b{font-size:1.05rem} .fw{padding:28px} .laptop,.hero__visual .hphoto{animation:float 6.5s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .fw__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .fw__title{font-family:var(--f-data);font-size:.7rem;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-lit)} .fw__live{display:inline-flex;align-items:center;gap:7px; font-family:var(--f-data);font-size:.64rem;letter-spacing:.16em;color:#57E6B4} .fw__live::before{content:"";width:7px;height:7px;border-radius:50%;background:#57E6B4; box-shadow:0 0 10px #57E6B4;animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .fw__row{display:flex;align-items:center;gap:16px;padding:17px 4px; border-bottom:1px solid rgba(255,255,255,.14)} .fw--soft .fw__row{border-bottom:0;position:relative} .fw--soft .fw__row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 32%,rgba(255,255,255,.16))} .fw--soft .fw__chart{background:rgba(4,17,24,.42)} .fw__ico{width:40px;height:40px;border-radius:50%;flex:0 0 auto; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); display:grid;place-items:center;color:var(--gold-lit)} .fw__ico svg{width:18px;height:18px} .fw__row div{flex:1} .fw__row b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem;color:#fff} .fw__row small{color:rgba(255,255,255,.82);font-size:.84rem} .fw__row .num{font-size:1.25rem;color:var(--gold);white-space:nowrap} .fw__chart{display:flex;align-items:flex-end;gap:9px;height:104px; margin-top:20px;padding:14px;border-radius:14px; background:rgba(4,17,24,.5);border:1px solid rgba(255,255,255,.1)} .fw__chart b{flex:1;border-radius:5px 5px 0 0;transform-origin:bottom; background:linear-gradient(180deg,#2BC391,var(--teal-deep)); animation:grow 1.1s cubic-bezier(.2,.9,.3,1.12) both} .fw__chart b:nth-child(1){height:22%;animation-delay:.3s} .fw__chart b:nth-child(2){height:34%;animation-delay:.45s} .fw__chart b:nth-child(3){height:30%;animation-delay:.6s} .fw__chart b:nth-child(4){height:52%;animation-delay:.75s} .fw__chart b:nth-child(5){height:66%;animation-delay:.9s} .fw__chart b:nth-child(6){height:82%;animation-delay:1.05s} .fw__chart b:nth-child(7){height:98%;animation-delay:1.2s; background:linear-gradient(180deg,var(--gold-lit),var(--gold-dim))} @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .fw__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px} .fw__foot small{font-family:var(--f-data);font-size:.64rem;color:rgba(255,255,255,.55)} .fw__foot b{font-family:var(--f-data);font-weight:500;font-size:1.15rem;color:var(--gold-lit)} /* ============ ครีม: บริการ ============ */ .svc-ico{width:52px;height:52px;border-radius:14px;background:var(--navy); display:grid;place-items:center;color:var(--gold-lit);margin-bottom:18px; box-shadow:0 10px 22px -10px rgba(7,27,40,.5)} .svc-ico--v{background:linear-gradient(150deg,#5B3ACB,#3A2489);color:#E4D9FF; box-shadow:0 10px 22px -10px rgba(91,58,203,.55)} .svc-ico--t{background:linear-gradient(150deg,#0E6B50,#084234);color:#9FF0D4; box-shadow:0 10px 22px -10px rgba(14,107,80,.55)} .svc-ico--p{background:linear-gradient(150deg,#C42360,#8E1743);color:#FFD3E2; box-shadow:0 10px 22px -10px rgba(196,35,96,.55)} .ico-gold{color:var(--gold-lit)!important} .ico-teal{color:#57E6B4!important} .ico-violet{color:var(--violet-lit)!important} .ico-pink{color:var(--pink-lit)!important} .svc-ico svg{width:22px;height:22px} .grid{display:grid;gap:22px;margin-top:52px} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .card{position:relative;background:rgba(255,255,255,.42); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.85); border-radius:var(--r);padding:32px 28px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--lift); transition:transform .26s ease,box-shadow .26s ease} .card:hover{transform:translateY(-7px); box-shadow:0 4px 10px rgba(11,36,48,.06), 0 36px 74px -28px rgba(11,36,48,.35)} .card h3{margin-bottom:9px} .card p{color:#33444B;font-size:.97rem} .card ul{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:8px; font-size:.93rem;color:var(--ink-soft)} .card ul li{padding-inline-start:20px;position:relative} .card ul li::before{content:"—";position:absolute;inset-inline-start:0;color:var(--gold)} .card__link{display:inline-flex;align-items:center;gap:8px;margin-top:20px; font-family:var(--f-display);font-weight:500;font-size:.92rem;color:var(--teal-deep)} .card__link::after{content:"→";transition:transform .2s} .card:hover .card__link::after{transform:translateX(5px)} /* ============ ครีม: ขั้นตอน 4 คอลัมน์ ============ */ .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:56px} .proc>div{border-top:1px solid rgba(11,36,48,.14);padding-top:26px} .proc .num{display:block;margin-bottom:14px} .proc h3{margin-bottom:8px} .proc p{color:var(--ink-soft);font-size:.95rem} /* แถบสถิติขอบมน */ .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px; border:1px solid rgba(255,255,255,.9);border-radius:22px;overflow:hidden; background:rgba(255,255,255,.42); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--lift)} .stats>div{text-align:center;padding:34px 20px} .stats>div+div{border-inline-start:1px solid rgba(11,36,48,.09)} .stats b{display:block;font-family:var(--f-display);font-weight:600; font-size:2rem;color:var(--teal-deep);line-height:1.2; font-variant-numeric:tabular-nums lining-nums} .stats small{color:var(--ink-soft);font-size:.85rem} /* ============ เข้ม: ผลงาน + แลปทอป ============ */ .sec--dark{background: radial-gradient(760px 440px at 90% 0%, rgba(64,140,255,.24), transparent 58%), radial-gradient(620px 400px at 4% 90%, rgba(23,166,123,.11), transparent 55%), radial-gradient(520px 320px at 55% 45%, rgba(255,255,255,.04), transparent 60%), linear-gradient(178deg,#103558,#071F36 70%);color:#fff} .case{overflow:hidden;padding:0;border-radius:var(--r)} .case.glass{border-radius:var(--r)} .case__hd{padding:26px 28px 18px} .case__tag{font-family:var(--f-data);font-size:.66rem;letter-spacing:.24em; text-transform:uppercase;color:var(--gold)} .case__kw{font-family:var(--f-display);font-weight:600;font-size:1.12rem;margin-top:9px;color:#fff} .case__move{display:flex;align-items:center;gap:12px;padding:15px 28px; background:rgba(4,17,24,.45);border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--f-data);font-size:.88rem} .case__was{color:rgba(255,255,255,.5);text-decoration:line-through} .case__arrow{color:var(--gold)} .case__now{font-weight:500;color:var(--gold-lit)} .case__stats{display:grid;grid-template-columns:1fr 1fr} .case__stats div{padding:20px 28px} .case__stats div+div{border-inline-start:1px solid rgba(255,255,255,.12)} .case__stats span{display:block;font-family:var(--f-data);font-weight:500; font-size:1.4rem;color:#fff} .case__stats small{color:rgba(255,255,255,.8);font-size:.84rem} .up{color:#57E6B4} .up::before{content:"▲ ";font-size:.68em;vertical-align:1px} /* ============ เข้ม: การวัดผล + แลปทอป ============ */ .measure{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .mlist{display:grid;gap:18px;margin-top:30px} .mlist>div{display:flex;gap:16px;align-items:flex-start} .mlist .fw__ico{width:44px;height:44px} .mlist b{display:block;font-family:var(--f-display);font-weight:600;color:#fff} .mlist small{color:rgba(255,255,255,.84);font-size:.92rem} .laptop{position:relative;width:min(520px,100%);margin-inline:auto; animation:float 6.5s ease-in-out infinite} .laptop__screen{border-radius:18px 18px 0 0;padding:20px; background:rgba(255,255,255,.07);backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.2);border-bottom:0; box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 40px 80px -30px rgba(0,0,0,.65)} .laptop__base{height:16px;border:1px solid rgba(255,255,255,.2);border-top:0; background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.04)); backdrop-filter:blur(18px);border-radius:0 0 20px 20px;position:relative} .laptop__base::after{content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%); width:72px;height:4px;border-radius:99px;background:rgba(4,17,24,.6)} .scr__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .scr__hd b{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:#fff} .scr__pills{display:flex;gap:5px} .scr__pills span{font-family:var(--f-data);font-size:.6rem;padding:4px 10px; border-radius:99px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.16)} .scr__pills .on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .kpis>div{background:rgba(4,17,24,.5);border:1px solid rgba(255,255,255,.1); border-radius:12px;padding:12px 14px} .kpis small{font-family:var(--f-data);font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.72);display:block} .kpis b{font-family:var(--f-display);font-weight:600;font-size:1.2rem; color:var(--gold-lit);font-variant-numeric:tabular-nums lining-nums} .laptop .fw__chart{margin-top:0} /* ============ ครีม: ราคา ============ */ .price{background:rgba(255,255,255,.42); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.85);border-radius:var(--r); padding:26px 24px;display:flex;flex-direction:column; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--lift); transition:transform .26s ease} .price:hover{transform:translateY(-6px)} .price--hot{border:1px solid transparent;position:relative; box-shadow:0 4px 10px rgba(240,64,127,.1), 0 34px 70px -26px rgba(240,64,127,.45)} .price__badge{position:absolute;top:-12px;inset-inline-start:24px; background:linear-gradient(110deg,var(--pink-lit),var(--pink));color:#fff; font-family:var(--f-data);font-size:.62rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;padding:7px 16px;border-radius:999px} .price__tag{font-family:var(--f-data);font-size:.66rem;letter-spacing:.24em; text-transform:uppercase;color:var(--ink-soft)} .price__amt{font-family:var(--f-display);font-weight:700;font-size:1.9rem; margin:10px 0 4px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums} .price__amt small{font-family:var(--f-body);font-size:.85rem;font-weight:300;color:var(--ink-soft)} .price ul{list-style:none;margin:16px 0;padding:0;display:grid;gap:9px; font-size:.92rem;flex:1;color:var(--ink-soft)} .price ul li{padding-inline-start:26px;position:relative} .price ul li::before{content:"✦";position:absolute;inset-inline-start:0; color:var(--gold);font-size:.8em;top:.25em} /* ============ ครีม: ทีม + FAQ ============ */ .person{text-align:center;padding:34px 24px;background:rgba(255,255,255,.42); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.85);border-radius:var(--r); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--lift)} .person__av{width:88px;height:88px;border-radius:50%;margin:0 auto 18px; background:var(--navy);border:1px solid var(--gold); display:grid;place-items:center;font-family:var(--f-display); font-weight:700;font-size:1.7rem;color:var(--gold-lit)} .person__role{font-family:var(--f-data);font-size:.64rem;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-dim);margin-top:5px} .person p{color:var(--ink-soft);font-size:.95rem;margin-top:12px} .faq{max-width:820px;margin:52px auto 0} .faq details{border-bottom:1px solid rgba(11,36,48,.12);padding:24px 4px} .faq summary{font-family:var(--f-display);font-weight:600;font-size:1.06rem; cursor:pointer;list-style:none;display:flex;justify-content:space-between; gap:18px;align-items:flex-start;transition:color .2s} .faq summary:hover,.faq details[open] summary{color:var(--teal-deep)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--f-display);color:var(--gold); font-size:1.5rem;line-height:1} .faq details[open] summary::after{content:"−"} .faq details p{color:#2F3F46;font-size:1.02rem;margin-top:14px;line-height:1.9} /* ============ เข้ม: CTA กระจกใหญ่ ============ */ .finale{position:relative;overflow:hidden;padding:110px 0;color:#fff; background: radial-gradient(760px 460px at 16% 10%, rgba(46,125,233,.16), transparent 58%), radial-gradient(640px 400px at 92% 96%, rgba(240,64,127,.13), transparent 58%), linear-gradient(168deg,#081226,#050B18 60%,#02060E)} .finale__card{padding:64px 56px;display:grid;grid-template-columns:1.4fr .6fr; gap:44px;align-items:center} .finale__card h2{font-size:clamp(1.8rem,3.4vw,2.7rem)} .finale__card p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:16px} .finale__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .finale__chips a{font-family:var(--f-data);font-size:.78rem; border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:9px 18px; color:rgba(255,255,255,.82);transition:border-color .2s,color .2s} .finale__chips a:hover{border-color:var(--gold);color:var(--gold-lit)} .finale__act{text-align:center} /* ============ FOOTER ============ */ .ftr{background:#04121B;color:rgba(255,255,255,.82);padding:76px 0 30px;font-size:.91rem} .ftr .logo__p{font-size:2.6rem} .ftr .logo__txt b{font-size:1.06rem;color:#fff} .ftr h4{font-family:var(--f-data);color:var(--gold);font-size:.68rem; letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px;font-weight:500} .ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px} .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .ftr ul a{position:relative;display:inline-block;transition:color .25s ease,transform .25s ease} .ftr ul a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px; background:linear-gradient(90deg,var(--gold-lit),transparent); transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .ftr ul a:hover{color:var(--gold-lit);transform:translateX(4px)} .ftr ul a:hover::after{transform:scaleX(1)} .ftr a:hover{color:var(--gold-lit)} .soc{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; color:rgba(255,255,255,.8);background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:transform .25s cubic-bezier(.2,.9,.3,1.5),background .25s ease,color .25s ease,box-shadow .25s ease} .soc a svg{width:18px;height:18px} .soc a:hover{transform:translateY(-4px) scale(1.06);color:#fff; background:linear-gradient(140deg,#FF9A2E,#E8382B);border-color:transparent; box-shadow:0 12px 26px -12px rgba(232,56,43,.85)} .ftr__bar{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--f-data);font-size:.74rem;color:rgba(255,255,255,.4)} /* ============ บริการ: พื้นขาว การ์ดลอย ไอคอนพาสเทล ============ */ .sec--sv{background:#FFFFFF} .card--sv{text-align:center;background:#FFFFFF; backdrop-filter:none;-webkit-backdrop-filter:none; border:1px solid #EEF0F4; box-shadow:0 6px 14px rgba(17,32,61,.05), 0 28px 60px -22px rgba(17,32,61,.16)} .card--sv:hover{transform:translateY(-9px);border-color:#EEF0F4; box-shadow:0 10px 20px rgba(17,32,61,.07), 0 46px 88px -26px rgba(17,32,61,.26)} .card--sv ul{text-align:start} .pico{width:84px;height:84px;border-radius:50%;margin:4px auto 20px; display:grid;place-items:center;transition:transform .32s cubic-bezier(.2,.9,.3,1.5)} .card--sv:hover .pico{transform:scale(1.1) rotate(-5deg)} .pico svg{width:32px;height:32px} .pico--lav{background:#E9E6FC;color:#7C6FE0} .pico--rose{background:#FBDFDF;color:#E05656} .pico--peach{background:#FCE7D7;color:#EE8A3C} .pico--green{background:#DFF4E1;color:#4CAF61} .pico--blue{background:#DEE9FC;color:#5B8DEF} .pico--gold{background:#FCF1D2;color:#DFB233} .pico--pink{background:#FBDDEC;color:#E668A7} .pico--mint{background:#D9F4EC;color:#3BBFA0} /* ============ แสงกวาดตอน hover (การ์ด) ============ */ .card--sv,.rcard,.bcard,.tcell,.price{position:relative;overflow:hidden} .card--sv::after,.rcard::after,.bcard::after,.price::after{content:"";position:absolute; top:0;left:-60%;width:45%;height:100%;pointer-events:none;z-index:4; transform:skewX(-18deg); background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent); transition:left .65s cubic-bezier(.25,.8,.35,1)} .card--sv:hover::after,.rcard:hover::after,.bcard:hover::after,.price:hover::after{left:130%} .tcell::after{content:"";position:absolute;inset:-10% -6%;pointer-events:none; background:radial-gradient(60% 60% at 20% 40%,rgba(216,179,112,.16),transparent 70%); opacity:0;transition:opacity .35s ease} .tcell:hover::after{opacity:1} .tool{transition:transform .25s ease,box-shadow .25s ease} .tool:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(11,36,48,.45)} .serp{transition:transform .3s ease,box-shadow .3s ease} .serp:hover{transform:translateY(-4px);box-shadow:0 34px 76px -30px rgba(0,0,0,.85)} /* ============ แถบเครื่องมือ ============ */ .tools{padding:34px 0 38px} .tools__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px} .tool{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px; background:rgba(255,255,255,.42); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -14px rgba(11,36,48,.25); font-family:var(--f-display);font-weight:500;font-size:.88rem;color:var(--ink)} .tool svg{width:17px;height:17px} .marq{display:flex;gap:12px;overflow:hidden;margin-top:18px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marq .tools__row{flex:0 0 auto;flex-wrap:nowrap;margin-top:0; animation:marq 26s linear infinite} .marq:hover .tools__row{animation-play-state:paused} @keyframes marq{to{transform:translateX(calc(-100% - 12px))}} .azbox{max-width:760px;margin:34px auto 0;padding:32px 30px;border-radius:22px; text-align:center;background:rgba(255,255,255,.5); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.95); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--lift)} .azbox h3{font-size:clamp(1.55rem,3.2vw,2rem);font-weight:700; background:linear-gradient(100deg,#0E3E66 42%,var(--gold) 50%,#0E3E66 58%); background-size:240% 100%;-webkit-background-clip:text;background-clip:text; color:transparent;animation:txtshine 3.2s linear infinite} @keyframes txtshine{to{background-position:-140% 0}} .azbox p{color:var(--ink-soft);font-size:.98rem;margin-top:8px} .azform .btn{font-weight:600;font-size:1.05rem;padding:16px 34px;white-space:nowrap; animation:ringpulse 2.4s ease-out infinite} @keyframes ringpulse{ 0%{box-shadow:0 14px 34px -12px rgba(214,44,180,.6), 0 0 0 0 rgba(214,44,180,.45)} 70%{box-shadow:0 14px 34px -12px rgba(214,44,180,.6), 0 0 0 16px rgba(214,44,180,0)} 100%{box-shadow:0 14px 34px -12px rgba(214,44,180,.6), 0 0 0 0 rgba(214,44,180,0)}} .azform{display:flex;gap:10px;margin-top:18px} .azform input{flex:1;min-width:0;border:2px solid #FFC107;border-radius:12px; padding:15px 16px;font-family:var(--f-body);font-size:1rem;outline:0; background:#fff;transition:border-color .2s} .azform input:focus{border-color:#E5A800;box-shadow:0 0 0 4px rgba(255,193,7,.18)} .azbox small{display:block;margin-top:12px;font-family:var(--f-data); font-size:.68rem;color:var(--ink-soft)} /* ============ เกี่ยวกับเรา ============ */ .about{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center} .about__panel{position:relative;overflow:hidden;border-radius:26px;padding:44px 38px;color:#fff; background: radial-gradient(420px 260px at 85% 0%, rgba(64,140,255,.25), transparent 60%), radial-gradient(360px 240px at 0% 100%, rgba(216,179,112,.2), transparent 58%), linear-gradient(165deg,#103558,#071F36); box-shadow:0 34px 70px -28px rgba(7,31,54,.6)} .about__q{font-family:var(--f-display);font-weight:300;font-size:1.42rem; line-height:1.7;letter-spacing:-.01em} .about__sig{margin-top:24px;display:flex;align-items:center;gap:14px} .about__sig .person__av{width:52px;height:52px;font-size:1.1rem;margin:0} .about__sig b{display:block;font-family:var(--f-display);font-weight:600;font-size:.95rem} .about__sig small{color:rgba(255,255,255,.65);font-size:.78rem} .about ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px; color:#2F3F46;font-size:1.02rem} .about ul li{padding-inline-start:26px;position:relative} .about ul li::before{content:"✦";position:absolute;inset-inline-start:0; color:var(--gold);font-size:.8em;top:.25em} .about__facts{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:22px; border-top:1px solid rgba(11,36,48,.12);padding-top:20px} .about__facts b{display:block;font-family:var(--f-display);font-weight:700; font-size:1.35rem;color:var(--teal-deep);font-variant-numeric:tabular-nums} .about__facts small{color:var(--ink-soft);font-size:.84rem} /* ============ แถบการันตี (เขียวเข้ม-ทอง) ============ */ .trust{position:relative;overflow:hidden;padding:74px 0;color:#fff; background: radial-gradient(680px 420px at 88% 6%, rgba(47,214,155,.16), transparent 60%), radial-gradient(520px 340px at 4% 92%, rgba(216,179,112,.14), transparent 58%), linear-gradient(165deg,#0B2E1B 0%,#07200F 55%,#03130A 100%)} .trust::before,.trust::after{content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(216,179,112,.55),transparent)} .trust::before{top:0}.trust::after{bottom:0} .trust__top{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center} .tbadge{width:132px;flex:0 0 auto;text-align:center;padding:16px 12px 13px;border-radius:16px; background:linear-gradient(165deg,rgba(216,179,112,.2),rgba(216,179,112,.05)); border:1px solid rgba(216,179,112,.5); box-shadow:0 14px 34px -16px rgba(216,179,112,.5), 0 1px 0 rgba(255,255,255,.12) inset} .tbadge svg{width:24px;height:24px;color:var(--gold-lit)} .tbadge b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.5rem; line-height:1.1;margin-top:2px; background:linear-gradient(160deg,#FFE9B8,#D8B370 55%,#9C8354); -webkit-background-clip:text;background-clip:text;color:transparent} .tbadge span{display:block;font-family:var(--f-data);font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-lit);margin-top:1px} .tbadge small{display:block;font-family:var(--f-data);font-size:.5rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.55); border-top:1px solid rgba(216,179,112,.32);margin-top:8px;padding-top:7px} .tbadge i{display:block;color:var(--gold);font-style:normal;font-size:.62rem;letter-spacing:.28em;margin-top:5px} .trust__hd h2{font-size:clamp(1.5rem,2.8vw,2.15rem)} .trust__hd p{color:rgba(255,255,255,.82);margin-top:10px;font-size:.98rem;max-width:56ch} .tguar{width:190px;flex:0 0 auto;display:flex;gap:12px;align-items:center; padding:15px 18px;border-radius:14px; background:rgba(255,255,255,.05);border:1px solid rgba(216,179,112,.45)} .tguar svg{width:32px;height:32px;color:var(--gold-lit);flex:0 0 auto} .tguar b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--gold-lit);line-height:1.15} .tguar small{display:block;font-family:var(--f-data);font-size:.56rem;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.5;margin-top:3px} .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px; border-top:1px solid rgba(216,179,112,.28);padding-top:34px} .tcell{display:flex;gap:14px;align-items:flex-start} .tcell .tico{width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; color:var(--gold-lit);background:radial-gradient(circle at 32% 28%,rgba(216,179,112,.3),rgba(216,179,112,.06)); border:1px solid rgba(216,179,112,.5); box-shadow:0 8px 20px -10px rgba(216,179,112,.6);transition:transform .3s cubic-bezier(.2,.9,.3,1.5)} .tcell:hover .tico{transform:scale(1.09) rotate(-6deg)} .tcell .tico svg{width:21px;height:21px} .tcell b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--gold-lit)} .tcell p{color:rgba(255,255,255,.8);font-size:.87rem;line-height:1.65;margin-top:3px} /* ============ แผงรูปในเกี่ยวกับเรา ============ */ .about__photo{position:relative;border-radius:26px;overflow:hidden;min-height:430px; display:flex;align-items:flex-end; background: radial-gradient(380px 260px at 78% 10%, rgba(23,166,123,.32), transparent 62%), radial-gradient(320px 220px at 6% 96%, rgba(216,179,112,.2), transparent 58%), linear-gradient(165deg,#103558,#071F36); border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 70px -28px rgba(7,31,54,.6)} .about__img{position:absolute;inset:0;width:100%;height:100%!important; object-fit:contain;object-position:bottom center;z-index:1} .about__cap{position:relative;z-index:2;width:100%;padding:26px 24px 22px; background:linear-gradient(transparent,rgba(4,17,28,.82) 42%,rgba(4,17,28,.95)); color:#fff} .about__cap .about__q{font-family:var(--f-display);font-weight:700; font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.35;letter-spacing:-.01em;color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5)} .about__cap .about__q span{background:linear-gradient(96deg,#FFC93C 6%,#2FD69B 94%); -webkit-background-clip:text;background-clip:text;color:transparent} .about__cap .about__q .q2{background:linear-gradient(96deg,#FF86C2 4%,#C58BFF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .about__sig{margin-top:16px} .avatar-img{width:52px;height:52px!important;border-radius:50%;flex:0 0 auto; border:0;object-fit:cover; box-shadow:0 0 0 2px var(--gold), 0 0 22px -4px rgba(216,179,112,.75)} .person .avatar-img{width:92px;height:92px!important;margin:0 auto 20px;display:block} /* ============ การ์ดผลค้นหาจำลอง ============ */ .serp{max-width:620px;margin:0 auto 44px;padding:22px 22px 20px;border-radius:20px; background:linear-gradient(165deg,rgba(11,46,27,.9),rgba(3,19,10,.94)); border:1px solid rgba(216,179,112,.42); box-shadow:0 24px 60px -26px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.08) inset; text-align:start} .serp__bar{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)} .serp__bar svg{width:17px;height:17px;color:var(--gold-lit);flex:0 0 auto} .serp__bar span{font-size:.92rem;color:rgba(255,255,255,.9)} .serp__bar i{margin-inline-start:auto;font-style:normal;font-family:var(--f-data); font-size:.58rem;letter-spacing:.16em;color:rgba(255,255,255,.45)} .serp__hit{display:flex;gap:14px;margin-top:16px;padding:16px;border-radius:14px; background:rgba(216,179,112,.07);border:1px solid rgba(216,179,112,.3)} .serp__rank{width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center; font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:#2A1F0A; background:linear-gradient(150deg,#FFE9B8,#D8B370 55%,#9C8354); box-shadow:0 8px 20px -8px rgba(216,179,112,.8)} .serp__hit b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:#fff} .serp__url{font-family:var(--f-data);font-size:.74rem;color:#7BE0AE;margin-top:2px} .serp__hit p{color:rgba(255,255,255,.78);font-size:.86rem;line-height:1.6;margin-top:6px} .serp__stars{color:var(--gold-lit);letter-spacing:2px;font-size:.8rem;margin-top:6px} .serp__stars small{color:rgba(255,255,255,.55);font-family:var(--f-data); font-size:.66rem;letter-spacing:.08em;margin-inline-start:6px} @media(max-width:560px){ .serp{padding:16px 14px 14px} .serp__bar span{font-size:.82rem} .serp__bar i{display:none} .serp__hit{gap:11px;padding:13px} .serp__rank{width:38px;height:38px;font-size:1rem} } /* ============ สไลด์ ============ */ .slider{position:relative} .track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; padding:8px 4px 20px;scrollbar-width:none;-ms-overflow-style:none} .track::-webkit-scrollbar{display:none} .track>*{scroll-snap-align:start;flex:0 0 min(380px,88%)} .snav{display:flex;gap:10px;justify-content:center} .snav button{width:46px;height:46px;border-radius:50%;cursor:pointer; font-family:var(--f-data);font-size:1.05rem;transition:all .2s; border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff} .snav button:hover{border-color:var(--gold);color:var(--gold-lit)} .snav--ink button{border-color:rgba(11,36,48,.22);background:rgba(255,255,255,.5);color:var(--ink)} .snav--ink button:hover{border-color:var(--gold-dim);color:var(--gold-dim)} .stars{color:var(--gold-lit);letter-spacing:3px;font-size:.92rem} .tcard{padding:28px;display:flex;flex-direction:column;gap:14px} .tcard q{quotes:none;color:rgba(255,255,255,.95);font-size:1rem;line-height:1.8;flex:1} .tcard footer{display:flex;align-items:center;gap:12px} .tcard footer b{display:block;font-family:var(--f-display);font-weight:600;color:#fff} .tcard footer small{color:rgba(255,255,255,.78);font-size:.82rem} .tava{width:44px;height:44px;border-radius:50%;flex:0 0 auto; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24); display:grid;place-items:center;color:var(--gold-lit)} .tava svg{width:20px;height:20px} /* ============ บทความ ============ */ .bcard{padding:0;overflow:hidden;display:flex;flex-direction:column} .bthumb{height:150px;position:relative} .bthumb i{position:absolute;inset-inline-start:16px;bottom:12px;font-style:normal; font-family:var(--f-data);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; background:rgba(255,255,255,.88);color:var(--ink);padding:5px 11px;border-radius:999px} .bbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1} .bbody time{font-family:var(--f-data);font-size:.72rem;color:var(--ink-soft);letter-spacing:.08em} .bbody h3{font-size:1.02rem;line-height:1.5} .bbody .card__link{margin-top:auto} /* ============ ผลงานสไลด์: การ์ดขาว ============ */ .track--r>*{flex:0 0 calc((100% - 60px)/4)} .rcard{background:#FFFFFF;border:1px solid #EEF0F4;border-radius:18px;overflow:hidden; color:var(--ink);box-shadow:0 6px 14px rgba(3,16,32,.2), 0 26px 54px -22px rgba(3,16,32,.5); transition:transform .24s ease,box-shadow .24s ease} .rcard:hover{transform:translateY(-6px); box-shadow:0 10px 20px rgba(3,16,32,.24), 0 40px 74px -24px rgba(3,16,32,.6)} /* .rthumb = ช่องรูปโรงงาน — ใน WordPress แทนที่ div นี้ด้วย the_post_thumbnail() */ .rthumb{height:112px;position:relative;display:grid;place-items:center; background:linear-gradient(135deg,var(--g1,#103558),var(--g2,#17A67B))} .rthumb img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover} .rthumb span{font-family:var(--f-display);font-weight:700;font-size:1.55rem; color:rgba(255,255,255,.92);position:relative;z-index:2} .rbody{padding:15px 17px 17px;display:grid;gap:5px} .rname{font-family:var(--f-display);font-weight:600;font-size:.93rem;line-height:1.45} .rkw{color:var(--ink-soft);font-size:.78rem;font-family:var(--f-data)} .rmove{font-family:var(--f-data);font-size:.84rem;display:flex;gap:8px;align-items:center;margin-top:2px} .rmove s{color:var(--ink-soft);opacity:.75} .rmove i{color:var(--gold-dim);font-style:normal} .rmove em{font-style:normal;font-weight:600;color:var(--teal-deep)} .rstat{display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid #F0F2F5;padding-top:9px;margin-top:4px} .rstat b{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--teal-deep); font-variant-numeric:tabular-nums} .rstat b::before{content:"▲ ";font-size:.68em;vertical-align:1px} .rstat small{color:var(--ink-soft);font-size:.76rem;text-align:end} /* ============ interactive: แถบ progress + ปุ่ม shine ============ */ .scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:99; transform-origin:0 50%;transform:scaleX(0);pointer-events:none; background:linear-gradient(90deg,var(--teal),var(--gold))} .btn--gold,.btn--boot,.btn--pink,.btn--vio,.btn--orange{position:relative;overflow:hidden} .btn--gold::before,.btn--boot::before,.btn--pink::before,.btn--vio::before,.btn--orange::before{content:"";position:absolute; top:0;left:-75%;width:50%;height:100%;transform:skewX(-20deg); background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transition:left .55s ease} .btn--gold:hover::before,.btn--boot:hover::before,.btn--pink:hover::before,.btn--vio:hover::before,.btn--orange:hover::before{left:125%} /* ============ การ์ดขอบละลาย ============ */ .fw--soft{border:0;box-shadow:none; /* พื้นการ์ดจางหายทางซ้าย ทึบขึ้นทางขวา */ background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.012) 10%, rgba(255,255,255,.045) 34%, rgba(255,255,255,.07) 100%); /* หมอก: ตัดขอบซ้ายให้ค่อย ๆ จางหายไปกับพื้น hero */ -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 9%,rgba(0,0,0,.7) 22%,#000 38%), linear-gradient(0deg,transparent 0%,rgba(0,0,0,.65) 12%,#000 26%,#000 82%,rgba(0,0,0,.6) 94%,transparent 100%), linear-gradient(270deg,transparent 0%,rgba(0,0,0,.7) 7%,#000 16%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 9%,rgba(0,0,0,.7) 22%,#000 38%), linear-gradient(0deg,transparent 0%,rgba(0,0,0,.65) 12%,#000 26%,#000 82%,rgba(0,0,0,.6) 94%,transparent 100%), linear-gradient(270deg,transparent 0%,rgba(0,0,0,.7) 7%,#000 16%); mask-composite:intersect; border-radius:0} /* เส้นขอบบางเฉพาะฝั่งขวา-บน แล้วจางหายทางซ้าย */ .fw--soft::before{display:none} /* ============ ขอบวิ้งแบบ AI (conic หมุน) ============ */ @property --ang{syntax:'';initial-value:0deg;inherits:false} .ai-border{position:relative} .ai-border::before{content:"";position:absolute;inset:0;border-radius:inherit; padding:2px;pointer-events:none; background:conic-gradient(from var(--ang), #17A67B,#4C8DFF,#8B5CF6,#F0407F,#D8B370,#17A67B); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:aispin 5s linear infinite} @keyframes aispin{to{--ang:360deg}} /* ============ ปุ่มลอย ============ */ .float{position:fixed;inset-inline-end:18px;bottom:18px;z-index:90;display:grid;gap:11px} .float{align-items:flex-end} .float a{height:52px;border-radius:999px;display:inline-flex;align-items:center;gap:0; padding:0 14px;color:#fff;font-family:var(--f-display);font-weight:600;font-size:.9rem; box-shadow:0 10px 28px rgba(0,0,0,.45); transition:transform .2s ease,box-shadow .2s ease,gap .28s ease,padding .28s ease} .float a svg{flex:0 0 auto} .float a span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0; transition:max-width .32s cubic-bezier(.2,.9,.3,1),opacity .22s ease} .float a:hover{transform:translateY(-2px);gap:9px;padding:0 18px 0 14px; box-shadow:0 16px 36px rgba(0,0,0,.55)} .float a:hover span{max-width:130px;opacity:1} .float .line{background:#06C755} .float .line svg{width:26px;height:26px} .float .msgr{background:linear-gradient(135deg,#00C6FF,#0068FF)} .float .msgr svg{width:25px;height:25px} .float .totop{width:46px;height:46px;border-radius:50%;cursor:pointer; display:grid;place-items:center; background:#1F2937;border:1px solid rgba(255,255,255,.14);color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.32); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease} .float .totop.show{opacity:1;visibility:visible;transform:none} .float .totop:hover{background:#374151} .float .totop svg{width:19px;height:19px} .todo{display:inline-block;font-family:var(--f-data);font-size:.62rem;font-weight:500; background:rgba(216,179,112,.16);color:var(--gold-dim);padding:3px 9px; border-radius:4px;letter-spacing:.05em;vertical-align:middle;margin-inline-start:8px} .on-dark .todo{color:var(--gold)} .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .rv.in{opacity:1;transform:none} @media(max-width:1000px){ .hdr .search{display:none} .hero__grid,.measure,.about{grid-template-columns:1fr;gap:40px} .hero__copy{padding-top:0} .trust__top{grid-template-columns:auto 1fr;gap:22px} .tguar{grid-column:1/-1;width:100%} .tgrid{grid-template-columns:1fr 1fr;gap:26px 18px} .about__photo{min-height:400px} .hero__visual{width:min(420px,100%);justify-self:center} .hero__visual .fw{padding:20px 20px 18px 40px} /* ละลายขอบซ้าย-ขวา ไม่มีกรอบ เหมือนจอคอม */ .fw--soft{border:0;box-shadow:none;background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.015) 12%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.07) 100%); -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 7%,rgba(0,0,0,.75) 17%,#000 30%), linear-gradient(270deg,transparent 0%,rgba(0,0,0,.75) 6%,#000 14%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 7%,rgba(0,0,0,.75) 17%,#000 30%), linear-gradient(270deg,transparent 0%,rgba(0,0,0,.75) 6%,#000 14%); mask-composite:intersect} .fw--soft::before{display:none} .hero__visual .fw .fw__row b{font-size:.95rem} .hero__visual .fw .fw__row small{font-size:.8rem} .hero__visual .fw .fw__ico{width:38px;height:38px} .hero__visual .fw .fw__ico svg{width:14px;height:14px} .hero__visual .fw .fw__chart{height:90px} .hero__visual .fw .fw__foot b{font-size:1.1rem} .grid--4{grid-template-columns:1fr 1fr} .proc{grid-template-columns:1fr 1fr;gap:30px} .stats{grid-template-columns:1fr 1fr} .stats>div:nth-child(3){border-inline-start:0} .stats>div:nth-child(n+3){border-top:1px solid rgba(11,36,48,.09)} .finale__card{grid-template-columns:1fr;text-align:center;padding:52px 34px} .finale__chips{justify-content:center} } @media(max-width:820px){ .nav{display:none} .burger{display:block;margin-inline-start:auto} .hdr__in{height:68px;gap:14px} .hdr::before{width:190px} .hdr .btn{padding:9px 16px!important;font-size:.8rem!important} .ftr__grid{grid-template-columns:1fr 1fr;gap:36px 28px} .float{gap:9px;inset-inline-end:14px;bottom:14px} .float a{width:48px;height:48px;padding:0;gap:0;border-radius:50%; justify-content:center;font-size:.66rem} .float a span{display:none} .float a:hover{padding:0;gap:0} .float .msgr svg{width:23px;height:23px} .float .line svg{width:24px;height:24px} .float .totop{width:42px;height:42px} .float .msgr svg{width:22px;height:22px} .float .totop svg{width:19px;height:19px} .track--r>*{flex:0 0 calc((100% - 20px)/2)} .grid--3{grid-template-columns:1fr} .section{padding:72px 0} .hero{margin-top:-68px;padding:144px 0 88px} /* กันหน่วง: ตัด blur บนมือถือ */ .glass,.laptop__screen,.laptop__base,.btn--glass,.float .totop, .card,.price,.person,.stats,.tool{ backdrop-filter:none;-webkit-backdrop-filter:none} .glass{background:rgba(10,33,46,.86)} .laptop__screen{background:rgba(10,33,46,.86)} .card,.price,.person,.stats{background:rgba(255,255,255,.92)} .tool{background:rgba(255,255,255,.92)} .azbox{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)} .azform{flex-direction:column} .mnav{backdrop-filter:none;background:rgba(4,16,26,.98)} body{background-attachment:scroll} } @media(max-width:560px){ .logo__txt small{display:none} .ftr .logo__txt small{display:block} .logo__p{font-size:2.6rem} .logo__txt b{font-size:.95rem} .section{padding:60px 0} .hero{margin-top:-68px;padding:112px 0 64px} h1{font-size:clamp(1.65rem,7.2vw,2rem)} .hero__grid{gap:30px} .hero__sub{font-size:.94rem} .hero__btns{margin-top:22px;gap:10px} .hero__btns .btn{padding:13px 24px;font-size:.92rem} .hero__tags{margin-top:22px;gap:8px} .hero__tags span{font-size:.58rem;padding:6px 12px;letter-spacing:.14em} .hdr__in{gap:10px} .hdr .btn{padding:7px 11px!important;font-size:.76rem!important} .fw{padding:22px} .finale__card{padding:42px 24px} .proc,.stats{grid-template-columns:1fr} .grid--4{grid-template-columns:1fr 1fr;gap:12px} .trust{padding:56px 0} .trust__top{grid-template-columns:1fr;gap:18px;text-align:center} .tbadge{margin-inline:auto} .trust__hd .eyebrow{justify-content:center} .trust__hd p{margin-inline:auto} .tgrid{grid-template-columns:1fr;gap:20px;padding-top:26px} .about__photo{min-height:340px} .about__cap{padding:20px 18px 18px} .about__cap .about__q{font-size:1rem} .card--sv{padding:18px 13px} .card--sv .pico{width:58px;height:58px;margin:2px auto 12px} .card--sv .pico svg{width:23px;height:23px} .card--sv h3{font-size:.86rem} .card--sv p{font-size:.76rem;line-height:1.6} .card--sv .card__link{font-size:.8rem;margin-top:12px} .stats>div+div{border-inline-start:0;border-top:1px solid rgba(11,36,48,.09)} .case__stats{grid-template-columns:1fr} .case__stats div+div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.12)} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} .mnav a{opacity:1;transform:none} .mnav.open::after,.mnav a::after{display:none} .fw__chart b{transform:scaleY(1)} html{scroll-behavior:auto} } /* ============================================================ สไตล์สำหรับหน้าเนื้อหา (บทความ/เพจ/อาร์ไคฟ์) — ธีม WordPress ============================================================ */ .sec--page{padding:72px 0 90px} .wrap--narrow{max-width:780px} .grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.grid--3{grid-template-columns:1fr 1fr;gap:16px}} @media(max-width:600px){.grid--3{grid-template-columns:1fr}} .entry__head{margin-bottom:26px} .entry__meta{display:flex;gap:8px;align-items:center;font-family:var(--f-data); font-size:.76rem;color:var(--ink-soft);margin-bottom:12px} .entry__meta a{color:var(--gold-dim)} .entry h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.3} .entry__cover{margin:0 0 30px;border-radius:18px;overflow:hidden;box-shadow:var(--lift)} .entry__cover img{width:100%;height:auto;display:block} .entry__body{font-size:1.06rem;line-height:1.95;color:var(--ink)} .entry__body > *+*{margin-top:1.15em} .entry__body h2{font-size:1.55rem;margin-top:1.8em;line-height:1.4} .entry__body h3{font-size:1.22rem;margin-top:1.5em} .entry__body p{color:#2C3B42} .entry__body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px} .entry__body a:hover{color:var(--gold-dim)} .entry__body ul,.entry__body ol{padding-inline-start:1.3em;color:var(--ink-soft)} .entry__body li+li{margin-top:.5em} .entry__body img{border-radius:14px;height:auto} .entry__body blockquote{border-inline-start:3px solid var(--gold); padding:4px 0 4px 20px;margin-inline-start:0;color:var(--ink);font-size:1.1rem} .entry__body pre{background:#0B1B27;color:#E8EEF2;padding:18px;border-radius:12px; overflow:auto;font-family:var(--f-data);font-size:.86rem} .entry__body code{font-family:var(--f-data);font-size:.9em; background:rgba(11,36,48,.07);padding:2px 6px;border-radius:5px} .entry__body table{width:100%;border-collapse:collapse;font-size:.95rem} .entry__body th,.entry__body td{border:1px solid #E6E9EF;padding:10px 12px;text-align:start} .entry__body th{background:#F5F7FA} .entry__body figure{margin:0} .entry__body .wp-caption-text,.entry__body figcaption{ font-size:.82rem;color:var(--ink-soft);margin-top:8px;text-align:center} .entry__foot{margin-top:44px} .entry__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .entry__tags a{font-family:var(--f-data);font-size:.72rem;padding:7px 13px;border-radius:999px; border:1px solid rgba(11,36,48,.16);color:var(--ink-soft)} .entry__tags a:hover{border-color:var(--gold);color:var(--gold-dim)} .entry__cta{padding:30px 28px;border-radius:20px;text-align:center;color:#fff; background:linear-gradient(165deg,#103558,#071F36);box-shadow:var(--lift)} .entry__cta h3{font-size:1.25rem;color:#fff} .entry__cta p{color:rgba(255,255,255,.85);margin:10px 0 20px} .postnav{display:flex;justify-content:space-between;gap:16px;margin-top:40px; padding-top:26px;border-top:1px solid rgba(11,36,48,.1);font-size:.95rem} .postnav a{color:var(--ink);font-weight:500} .postnav a:hover{color:var(--gold-dim)} .postnav__next{margin-inline-start:auto;text-align:end} .pagination{display:flex;justify-content:center;gap:8px;margin-top:44px;flex-wrap:wrap} .pagination .page-numbers{min-width:42px;height:42px;display:grid;place-items:center; padding:0 12px;border-radius:12px;font-family:var(--f-data);font-size:.9rem; background:rgba(255,255,255,.6);border:1px solid rgba(11,36,48,.12);color:var(--ink)} .pagination .page-numbers:hover{border-color:var(--gold)} .pagination .page-numbers.current{background:linear-gradient(100deg,#FFB020,#FF7300); color:#fff;border-color:transparent} .search--ink{background:rgba(255,255,255,.7);border:1px solid rgba(11,36,48,.16)} .search--ink input{color:var(--ink);width:100%} .search--ink input::placeholder{color:var(--ink-soft)} .search--ink button{color:var(--gold-dim)} .comments{margin-top:52px;padding-top:32px;border-top:1px solid rgba(11,36,48,.1)} .comments h3{font-size:1.2rem;margin-bottom:18px} .commentlist{list-style:none;padding:0;display:grid;gap:20px} .commentlist .comment-body{background:rgba(255,255,255,.7);border:1px solid rgba(11,36,48,.1); border-radius:14px;padding:18px 20px} .comment-form input[type=text],.comment-form input[type=email], .comment-form input[type=url],.comment-form textarea{ width:100%;border:1px solid #D8DEE7;border-radius:10px;padding:12px 14px; font-family:var(--f-body);font-size:.95rem;background:#fff} .comment-form .submit{background:linear-gradient(100deg,#FFB020,#FF7300);color:#fff;border:0; padding:13px 26px;border-radius:999px;font-family:var(--f-display);font-weight:600;cursor:pointer} /* รูปในเนื้อหาที่มาจาก WordPress */ .alignleft{float:left;margin:0 22px 18px 0} .alignright{float:right;margin:0 0 18px 22px} .aligncenter{margin-inline:auto;display:block} .alignwide,.alignfull{max-width:100%} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)} /* โลโก้ที่อัปโหลดผ่าน Customizer */ .custom-logo-link{display:block;line-height:0} .custom-logo{height:44px;width:auto} .ftr .custom-logo{height:40px} /* ============================================================ หน้าบริการ (page-services.php) ============================================================ */ .svc-hero{position:relative;overflow:hidden;color:#fff;padding:150px 0 118px;margin-top:-84px; background: radial-gradient(720px 460px at 84% 6%, rgba(255,90,180,.3), transparent 62%), radial-gradient(620px 420px at 12% 88%, rgba(90,120,255,.24), transparent 60%), linear-gradient(148deg,#0B1B3F 0%,#231A63 30%,#4A2596 58%,#8E2E9E 82%,#C0399F 100%)} /* แถบแสงเฉียงพาดผ่าน (swoosh) */ .svc-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background: linear-gradient(102deg,transparent 34%,rgba(255,255,255,.11) 40%,transparent 47%), linear-gradient(102deg,transparent 52%,rgba(255,255,255,.07) 58%,transparent 66%); transform:rotate(-6deg)} /* ขอบล่างโค้งละมุน กลืนเข้าหา section ถัดไป */ .svc-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#FFFFFF;border-radius:50%;pointer-events:none} .svc-hero > .wrap{position:relative;z-index:2} .svc-hero .eyebrow{color:#FFC7E8} .svc-hero .eyebrow::before,.svc-hero .eyebrow::after{background:#FF86C2} .svc-hero .kw{background:linear-gradient(96deg,#FFD98A 2%,#FFB0DC 52%,#C7B4FF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .svc-hero .lede{color:rgba(255,255,255,.88)} .svc-jump a{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09)} .svc-jump a:hover{border-color:#FFB0DC;color:#FFD98A} .svc-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.28} .svc-hero .kw{display:block;background:linear-gradient(96deg,#FFD24A 2%,#FFA51F 46%,#FF7300 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .svc-hero .h1sub{display:block;font-size:.46em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.88);margin-top:14px} .svc-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px} .svc-jump a{font-family:var(--f-data);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; padding:10px 18px;border-radius:999px;color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05); transition:transform .25s ease,border-color .25s ease,color .25s ease} .svc-jump a:hover{transform:translateY(-3px);border-color:#FFA51F;color:#FFD24A} .svc{scroll-margin-top:100px} .svc--alt{background:linear-gradient(165deg,#103558 0%,#0A2740 58%,#071F36 100%)} .svc__row{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:start} .svc__row--rev .svc__txt{order:2} .svc__row--rev .svc__side{order:1} .svc__no{display:block;font-family:var(--f-display);font-weight:700;font-size:2.6rem;line-height:1; background:linear-gradient(150deg,#FF9A2E,#E8382B);-webkit-background-clip:text; background-clip:text;color:transparent;margin-bottom:6px;opacity:.9} .svc__txt h2{margin-top:6px} .svc__list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px} .svc__list li{position:relative;padding-inline-start:30px;color:#2F3F46; font-size:1rem;line-height:1.85} .svc__list li::before{content:"";position:absolute;inset-inline-start:0;top:.6em; width:9px;height:9px;border-radius:50%; background:linear-gradient(140deg,#FFB020,#FF7300)} .svc__list b{color:var(--ink)} .on-dark .svc__list li{color:rgba(255,255,255,.84)} .on-dark .svc__list b{color:#fff} .svc__fit{margin-top:22px;padding:15px 18px;border-radius:12px;font-size:.97rem; background:rgba(255,138,0,.09);border:1px solid rgba(255,138,0,.28);color:var(--ink-soft)} .svc__fit b{color:#C2560E} .on-dark .svc__fit{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.86)} .on-dark .svc__fit b{color:#FFC26B} .svc__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .svc__act--center{justify-content:center} .svc__side{position:sticky;top:104px} .svc__card{padding:26px 24px;border-radius:20px; background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:var(--lift)} .svc__card h3{font-size:1.05rem;margin-bottom:16px} .svc__kv,.svc__cmp{display:flex;justify-content:space-between;gap:14px;align-items:baseline; padding:11px 0;border-bottom:1px solid rgba(11,36,48,.09);font-size:.92rem} .svc__kv:last-child,.svc__cmp:last-child{border-bottom:0} .svc__kv span,.svc__cmp span{color:#3A4A52} .svc__kv b{font-family:var(--f-display);font-weight:600;color:var(--teal-deep);white-space:nowrap} .svc__card--dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .svc__card--dark h3{color:#fff} .svc__card--dark .svc__cmp{border-bottom-color:rgba(255,255,255,.12)} .svc__card--dark .svc__cmp span{color:rgba(255,255,255,.6);flex:0 0 34%} .svc__card--dark .svc__cmp b{color:#FFC26B;font-family:var(--f-display);font-weight:600; text-align:end;font-size:.88rem} @media(max-width:980px){ .svc__row,.svc__row--rev{grid-template-columns:1fr;gap:32px} .svc__row--rev .svc__txt{order:1} .svc__row--rev .svc__side{order:2} .svc__side{position:static} } @media(max-width:820px){ .svc-hero{margin-top:-68px;padding:112px 0 92px} .svc-hero::after{bottom:-56px;height:104px} .svc-jump a{font-size:.64rem;padding:8px 14px} .svc__no{font-size:2.1rem} } /* ============================================================ FIX + ระบบสีรายหน้า (Accent System) ============================================================ */ /* 1) ตัวหนังสือบนพื้นเข้ม — กันหัวข้อสีดำทับพื้นเข้มจนอ่านไม่ออก */ .on-dark{color:#fff} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark b,.on-dark strong{color:#fff} .on-dark p{color:rgba(255,255,255,.85)} .on-dark .svc__kv b,.on-dark .svc__card h3{color:#fff} .on-dark .svc__kv span{color:rgba(255,255,255,.62)} .on-dark .svc__card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .on-dark .faq summary{color:#fff} .on-dark .faq details p{color:rgba(255,255,255,.82)} .on-dark .faq details{border-color:rgba(255,255,255,.14)} /* 2) พื้น section ที่ยังไม่มี */ .sec--cream{background:linear-gradient(180deg,#FDFBF7 0%,#F7F4EE 100%)} .sec--finale{background: radial-gradient(760px 460px at 78% 10%, rgba(255,138,0,.16), transparent 62%), radial-gradient(620px 420px at 8% 92%, rgba(216,179,112,.12), transparent 60%), linear-gradient(165deg,#081226 0%,#050D1B 55%,#02060E 100%)} /* 3) ระบบสีธีมย่อย — ใส่คลาส acc--* ที่ section แล้วสีจะเปลี่ยนทั้งบล็อก */ .acc--teal{--acc1:#2FD69B;--acc2:#0E9E77;--acc-soft:rgba(47,214,155,.1);--acc-line:rgba(47,214,155,.32);--acc-ink:#0B7A5C} .acc--blue{--acc1:#5B9BFF;--acc2:#2C5FE0;--acc-soft:rgba(91,155,255,.1);--acc-line:rgba(91,155,255,.32);--acc-ink:#1E4BB8} .acc--rose{--acc1:#FF7BA6;--acc2:#E8385F;--acc-soft:rgba(255,123,166,.11);--acc-line:rgba(255,123,166,.34);--acc-ink:#C42A50} .acc--violet{--acc1:#B983FF;--acc2:#7A3BE0;--acc-soft:rgba(185,131,255,.12);--acc-line:rgba(185,131,255,.34);--acc-ink:#6A2BC4} .acc--amber{--acc1:#FFB020;--acc2:#FF7300;--acc-soft:rgba(255,138,0,.1);--acc-line:rgba(255,138,0,.32);--acc-ink:#C2560E} [class*="acc--"] .eyebrow{color:var(--acc-ink)} [class*="acc--"] .eyebrow::before,[class*="acc--"] .eyebrow::after{background:var(--acc1)} [class*="acc--"].on-dark .eyebrow{color:var(--acc1)} [class*="acc--"] h1 .g,[class*="acc--"] h2 .g{ background:linear-gradient(96deg,var(--acc1),var(--acc2)); -webkit-background-clip:text;background-clip:text;color:transparent} [class*="acc--"].on-dark h1 .g,[class*="acc--"].on-dark h2 .g{ background:linear-gradient(96deg,var(--acc1),color-mix(in srgb,var(--acc1) 45%,#fff)); -webkit-background-clip:text;background-clip:text;color:transparent} [class*="acc--"] .svc__no{background:linear-gradient(150deg,var(--acc1),var(--acc2)); -webkit-background-clip:text;background-clip:text;color:transparent} [class*="acc--"] .svc__list li::before{background:linear-gradient(140deg,var(--acc1),var(--acc2))} [class*="acc--"] .svc__fit{background:var(--acc-soft);border-color:var(--acc-line)} [class*="acc--"] .svc__fit b{color:var(--acc-ink)} [class*="acc--"].on-dark .svc__fit b{color:var(--acc1)} [class*="acc--"] .svc__kv b{color:var(--acc-ink)} [class*="acc--"].on-dark .svc__kv b{color:var(--acc1)} [class*="acc--"] .faq summary::after{color:var(--acc1)} /* 4) พื้นหลัง section ตามสี accent (แบบอ่อน ไม่หลุดธีม) */ .bg--tint{background: radial-gradient(620px 400px at 88% 4%, var(--acc-soft), transparent 62%), radial-gradient(520px 360px at 4% 96%, var(--acc-soft), transparent 60%), linear-gradient(180deg,#FFFFFF 0%,#FAFBFD 100%)} .bg--deep{background: radial-gradient(760px 460px at 80% 6%, color-mix(in srgb,var(--acc1) 22%,transparent), transparent 62%), radial-gradient(600px 420px at 6% 94%, color-mix(in srgb,var(--acc2) 18%,transparent), transparent 60%), linear-gradient(165deg,#0E2B47 0%,#0A2038 55%,#06172A 100%)} /* 5) ปุ่มหลากสี */ .btn--green{background:linear-gradient(100deg,#34D399,#0E9E77);color:#fff;border:0; box-shadow:0 14px 32px -12px rgba(14,158,119,.65)} .btn--green:hover{box-shadow:0 20px 42px -12px rgba(14,158,119,.85)} .btn--blue{background:linear-gradient(100deg,#5B9BFF,#2C5FE0);color:#fff;border:0; box-shadow:0 14px 32px -12px rgba(44,95,224,.6)} .btn--blue:hover{box-shadow:0 20px 42px -12px rgba(44,95,224,.82)} .btn--rose{background:linear-gradient(100deg,#FF7BA6,#E8385F);color:#fff;border:0; box-shadow:0 14px 32px -12px rgba(232,56,95,.6)} .btn--rose:hover{box-shadow:0 20px 42px -12px rgba(232,56,95,.82)} .btn--violet{background:linear-gradient(100deg,#B983FF,#7A3BE0);color:#fff;border:0; box-shadow:0 14px 32px -12px rgba(122,59,224,.62)} .btn--violet:hover{box-shadow:0 20px 42px -12px rgba(122,59,224,.85)} .btn--red{background:linear-gradient(100deg,#FF6B5B,#E01F3D);color:#fff;border:0; box-shadow:0 14px 32px -12px rgba(224,31,61,.6)} .btn--red:hover{box-shadow:0 20px 42px -12px rgba(224,31,61,.82)} /* แสงกวาดตอน hover ให้ปุ่มชุดใหม่ด้วย */ .btn--green,.btn--blue,.btn--rose,.btn--violet,.btn--red{position:relative;overflow:hidden} .btn--green::before,.btn--blue::before,.btn--rose::before,.btn--violet::before,.btn--red::before{ content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;transform:skewX(-20deg); background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent); transition:left .55s ease} .btn--green:hover::before,.btn--blue:hover::before,.btn--rose:hover::before, .btn--violet:hover::before,.btn--red:hover::before{left:125%} /* 6) ปุ่มบนพื้นเข้ม/สว่าง ให้ตัดกันเสมอ */ .on-dark .btn--ink{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)} .on-dark .btn--ink:hover{background:rgba(255,255,255,.16)} /* หัวข้อบรรทัดแรกใช้สีตัวหนังสือปกติ แต่ขีดเน้นด้วยสี accent */ h1 .hl,h2 .hl{position:relative;display:inline;background-image:linear-gradient(transparent 62%,var(--acc-soft,rgba(255,138,0,.16)) 62%); background-repeat:no-repeat;background-size:100% 100%;padding-inline:2px} /* ============================================================ หน้าผลงาน / กรณีศึกษา (page-case-study.php) ============================================================ */ .cs-hero{position:relative;overflow:hidden;color:#fff;padding:150px 0 118px;margin-top:-84px; background: radial-gradient(700px 460px at 84% 8%, rgba(60,220,200,.26), transparent 62%), radial-gradient(620px 420px at 10% 88%, rgba(120,90,255,.24), transparent 60%), linear-gradient(148deg,#06122E 0%,#0E2A63 32%,#12518F 60%,#128A93 84%,#17B39A 100%)} .cs-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background: linear-gradient(102deg,transparent 34%,rgba(255,255,255,.1) 40%,transparent 47%), linear-gradient(102deg,transparent 53%,rgba(255,255,255,.06) 59%,transparent 67%); transform:rotate(-6deg)} .cs-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#FFFFFF;border-radius:50%;pointer-events:none} .cs-hero > .wrap{position:relative;z-index:2} .cs-hero .eyebrow{color:#8FF0DC} .cs-hero .eyebrow::before,.cs-hero .eyebrow::after{background:#3EE0C0} .cs-hero .kw{background:linear-gradient(96deg,#FFE08A 2%,#8FF0DC 52%,#9CC7FF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .cs-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .cs-stats div{min-width:132px;padding:16px 22px;border-radius:16px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .cs-stats b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.75rem; color:#fff;line-height:1.1;font-variant-numeric:tabular-nums} .cs-stats small{font-family:var(--f-data);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.78)} .cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px} .cs-col{padding:28px 26px;border-radius:22px;background:#FFFFFF; border:1px solid #EEF0F4; box-shadow:0 6px 14px rgba(17,32,61,.05), 0 28px 60px -24px rgba(17,32,61,.16)} .cs-col__head{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #EEF0F4} .cs-col__head h3{font-size:1.12rem;margin-top:2px} .cs-col__head--lg .eyebrow{color:#1E4BB8} .cs-col__head--lg .eyebrow::before{background:#5B9BFF} .cs-col__head--sm .eyebrow{color:#0B7A5C} .cs-col__head--sm .eyebrow::before{background:#2FD69B} .cs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px} .cs-step{padding:26px 22px;border-radius:20px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:transform .28s ease,background .28s ease} .cs-step:hover{transform:translateY(-6px);background:rgba(255,255,255,.11)} .cs-step__no{display:block;font-family:var(--f-display);font-weight:700;font-size:1.9rem; line-height:1;margin-bottom:10px; background:linear-gradient(150deg,#B983FF,#7A3BE0);-webkit-background-clip:text; background-clip:text;color:transparent} .cs-step h3{color:#fff;margin-bottom:8px} .cs-step p{color:rgba(255,255,255,.84);font-size:.94rem;line-height:1.8} .cs-step a{color:#C7B4FF;text-decoration:underline;text-underline-offset:3px} @media(max-width:980px){ .cs-grid{grid-template-columns:1fr;gap:18px} .cs-steps{grid-template-columns:1fr 1fr} } @media(max-width:820px){ .cs-hero{margin-top:-68px;padding:112px 0 92px} .cs-hero::after{bottom:-56px;height:104px} .cs-stats div{min-width:104px;padding:13px 16px} .cs-stats b{font-size:1.4rem} } @media(max-width:600px){ .cs-steps{grid-template-columns:1fr} } /* ============================================================ ตารางลูกค้า — เวอร์ชันพรีเมียม ============================================================ */ .cs-col{position:relative;padding:30px 26px 26px;border-radius:24px;overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%,#FCFBF8 100%); border:1px solid transparent; box-shadow:0 8px 18px rgba(17,32,61,.05), 0 34px 70px -28px rgba(17,32,61,.2)} .cs-col::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .cs-col--ent::before{background:linear-gradient(160deg,rgba(216,179,112,.9),rgba(216,179,112,.15) 45%,transparent 78%)} .cs-col--smb::before{background:linear-gradient(160deg,rgba(47,214,155,.85),rgba(47,214,155,.14) 45%,transparent 78%)} /* แถบสีบนสุดของคอลัมน์ — เข้มกว่าไอคอนในลิสต์ */ .cs-col::after{content:"";position:absolute;inset-inline:0;top:0;height:5px;border-radius:24px 24px 0 0} .cs-col--ent::after{background:linear-gradient(90deg,#4A3410 0%,#8A6C2E 42%,#C9A45E 100%); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 14px -6px rgba(138,108,46,.7)} .cs-col--smb::after{background:linear-gradient(90deg,#05372A 0%,#0B7A5C 42%,#2FD69B 100%); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 14px -6px rgba(11,122,92,.7)} .cs-col--ent{background: radial-gradient(420px 220px at 92% 0%, rgba(216,179,112,.12), transparent 62%), linear-gradient(180deg,#FFFFFF 0%,#FDFBF6 100%)} .cs-col--smb{background: radial-gradient(420px 220px at 92% 0%, rgba(47,214,155,.1), transparent 62%), linear-gradient(180deg,#FFFFFF 0%,#F8FDFB 100%)} .cs-col__head{padding-bottom:18px;margin-bottom:14px; border-bottom:1px solid rgba(11,36,48,.08)} .cs-col__head h3{font-size:1.3rem;margin-top:10px;letter-spacing:-.01em} .cs-col__cap{font-family:var(--f-data);font-size:.76rem;letter-spacing:.06em; color:#5B6B73;margin-top:5px} .cs-badge{display:inline-block;font-family:var(--f-data);font-size:.6rem;letter-spacing:.24em; text-transform:uppercase;padding:7px 14px;border-radius:999px;font-weight:500} .cs-badge--gold{color:#7E6838;background:linear-gradient(120deg,rgba(216,179,112,.28),rgba(216,179,112,.1)); border:1px solid rgba(216,179,112,.5)} .cs-badge--teal{color:#0B7A5C;background:linear-gradient(120deg,rgba(47,214,155,.22),rgba(47,214,155,.08)); border:1px solid rgba(47,214,155,.45)} .cs-list{list-style:none;margin:0;padding:0;display:grid;gap:3px} .cs-item > a,.cs-item > div{display:flex;align-items:center;gap:13px; padding:10px 12px;border-radius:14px;transition:background .24s ease,transform .24s ease,box-shadow .24s ease} .cs-item__t{font-size:.96rem;color:#2F3F46;line-height:1.5;flex:1} .cs-item > a .cs-item__t{color:var(--ink);font-weight:500} .cs-item__go{font-style:normal;font-size:.82rem;color:#B3BDC7;flex:0 0 auto; transition:transform .24s ease,color .24s ease} .cs-item > a:hover{background:rgba(11,36,48,.04);transform:translateX(4px); box-shadow:0 8px 18px -12px rgba(11,36,48,.4)} .cs-item > a:hover .cs-item__go{color:var(--gold-dim);transform:translate(3px,-3px)} .cs-item--plain > div{opacity:.9} .cs-ico{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center; color:#fff;background:linear-gradient(145deg,var(--k1,#5B9BFF),var(--k2,#2C5FE0)); box-shadow:0 8px 18px -9px var(--k2,#2C5FE0); transition:transform .28s cubic-bezier(.2,.9,.3,1.5),box-shadow .28s ease} .cs-ico svg{width:19px;height:19px} .cs-item > a:hover .cs-ico{transform:scale(1.1) rotate(-6deg); box-shadow:0 12px 24px -8px var(--k2,#2C5FE0)} .cs-item > a .cs-item__t{color:var(--kink,#1E4BB8);font-weight:600} .cs-item > a:hover{background:var(--ksoft,rgba(91,155,255,.09));transform:translateX(4px); box-shadow:none} .cs-item > a:hover .cs-item__go{color:var(--k2,#2C5FE0);transform:translate(3px,-3px)} .cs-item--plain .cs-ico{opacity:.92} .cs-item--plain .cs-item__t{color:#3A4A52} @media(max-width:600px){ .cs-col{padding:24px 18px 20px;border-radius:20px} .cs-item > a,.cs-item > div{gap:11px;padding:9px 8px} .cs-ico{width:34px;height:34px} .cs-ico svg{width:17px;height:17px} .cs-item__t{font-size:.92rem} } .on-dark .lede a{color:#8FF0DC;text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px} .on-dark .lede a:hover{color:#FFE08A} /* ============================================================ หน้าความรู้ SEO (page-knowledge.php) ============================================================ */ .kb-hero{position:relative;overflow:hidden;color:#fff;padding:150px 0 118px;margin-top:-84px; background: radial-gradient(760px 480px at 82% 6%, rgba(124,120,255,.3), transparent 62%), radial-gradient(620px 420px at 8% 92%, rgba(70,140,255,.22), transparent 60%), linear-gradient(150deg,#060F2B 0%,#0E1E52 26%,#1B3488 52%,#3450B8 76%,#6A6BD8 100%)} .kb-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background: linear-gradient(102deg,transparent 34%,rgba(255,255,255,.13) 40%,transparent 47%), linear-gradient(102deg,transparent 53%,rgba(255,255,255,.07) 59%,transparent 67%); transform:rotate(-6deg)} .kb-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#F7F9FD;border-radius:50%;pointer-events:none} .kb-hero > .wrap{position:relative;z-index:2} .kb-hero .eyebrow{color:#BFD2FF} .kb-hero .eyebrow::before,.kb-hero .eyebrow::after{background:#8AA8FF} .kb-hero .kw{background:linear-gradient(96deg,#FFFFFF 2%,#CFE0FF 46%,#B3A8FF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .kb-hero .lede a{color:#CFE0FF} .kb-hero .lede a:hover{color:#fff} .kb-meter{display:inline-block;margin-top:26px;padding:11px 22px;border-radius:999px; font-family:var(--f-data);font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.92); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .kb-meter b{color:#FFFFFF;font-family:var(--f-display);font-weight:700;font-size:1.05rem} .kb-wrap{background:linear-gradient(180deg,#F7F9FD 0%,#F3F5FA 100%)} .kb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} /* ---- ชุดสีรายหมวด (สดชัด) ---- */ .tone--blue{--k1:#3B82F6;--k2:#1D4ED8;--kink:#1D4ED8;--ksoft:rgba(59,130,246,.1)} .tone--emerald{--k1:#10B981;--k2:#047857;--kink:#047857;--ksoft:rgba(16,185,129,.1)} .tone--crimson{--k1:#F43F5E;--k2:#BE123C;--kink:#BE123C;--ksoft:rgba(244,63,94,.1)} .tone--violet{--k1:#A855F7;--k2:#7C3AED;--kink:#7C3AED;--ksoft:rgba(168,85,247,.1)} .tone--cyan{--k1:#06B6D4;--k2:#0E7490;--kink:#0E7490;--ksoft:rgba(6,182,212,.1)} .tone--orange{--k1:#FB923C;--k2:#C2410C;--kink:#C2410C;--ksoft:rgba(251,146,60,.12)} .tone--lime{--k1:#84CC16;--k2:#4D7C0F;--kink:#4D7C0F;--ksoft:rgba(132,204,22,.12)} .tone--magenta{--k1:#E879F9;--k2:#A21CAF;--kink:#A21CAF;--ksoft:rgba(232,121,249,.1)} .tone--indigo{--k1:#818CF8;--k2:#4338CA;--kink:#4338CA;--ksoft:rgba(129,140,248,.11)} .tone--amber{--k1:#F59E0B;--k2:#B45309;--kink:#B45309;--ksoft:rgba(245,158,11,.12)} .kb-card{position:relative;padding:26px 24px 20px;border-radius:22px;overflow:hidden; background:#FFFFFF;border:1px solid #E9EDF3; box-shadow:0 6px 14px rgba(17,32,61,.045), 0 30px 64px -28px rgba(17,32,61,.18); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .kb-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px; background:linear-gradient(90deg, color-mix(in srgb,var(--k2) 42%,#071B28) 0%, color-mix(in srgb,var(--k2) 78%,#071B28) 38%, var(--k2) 74%, var(--k1) 100%); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 14px -6px var(--k2)} .kb-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(340px 200px at 100% 0%, var(--ksoft), transparent 70%)} .kb-card:hover{transform:translateY(-6px);border-color:var(--k1); box-shadow:0 10px 20px rgba(17,32,61,.06), 0 46px 88px -30px rgba(17,32,61,.3)} .kb-card__head{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:10px; padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid #F0F3F7} .kb-card__head h2{font-size:1.24rem;flex:1;margin:0;letter-spacing:-.01em;color:var(--kink)} .kb-badge{width:100%;font-family:var(--f-data);font-size:.58rem;letter-spacing:.2em; text-transform:uppercase;padding:6px 13px;border-radius:999px;color:#fff; background:linear-gradient(100deg,var(--k2),color-mix(in srgb,var(--k2) 55%,#071B28)); box-shadow:0 8px 18px -10px var(--k2)} .kb-count{font-family:var(--f-data);font-size:.68rem;color:#6B7A82;white-space:nowrap} .kb-list{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:2px} .kb-list a{display:flex;align-items:center;gap:13px;padding:10px;border-radius:13px; transition:background .22s ease,transform .22s ease} .kb-list a:hover{background:var(--ksoft);transform:translateX(4px)} .kb-ico{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center; color:#fff;background:linear-gradient(145deg,var(--k1),var(--k2)); box-shadow:0 8px 18px -9px var(--k2); transition:transform .28s cubic-bezier(.2,.9,.3,1.5),box-shadow .28s ease} .kb-ico svg{width:19px;height:19px} .kb-list a:hover .kb-ico{transform:scale(1.1) rotate(-6deg);box-shadow:0 12px 24px -8px var(--k2)} .kb-t{flex:1;line-height:1.35} .kb-t b{display:block;font-family:var(--f-display);font-weight:600;font-size:.99rem; color:var(--kink)} .kb-t small{display:block;font-family:var(--f-data);font-size:.68rem;color:#6B7A82;margin-top:2px} .kb-go{font-style:normal;color:#C3CBD4;flex:0 0 auto; transition:transform .22s ease,color .22s ease} .kb-list a:hover .kb-go{color:var(--k2);transform:translateX(4px)} @media(max-width:980px){.kb-grid{grid-template-columns:1fr}} @media(max-width:820px){ .kb-hero{margin-top:-68px;padding:112px 0 92px} .kb-hero::after{bottom:-56px;height:104px} .kb-card{padding:22px 18px 16px} .kb-list a{gap:11px;padding:9px 6px} .kb-ico{width:34px;height:34px} .kb-ico svg{width:17px;height:17px} } /* ============================================================ หน้าเกี่ยวกับเรา (page-about.php) ============================================================ */ .ab-hero{position:relative;overflow:hidden;color:#fff;padding:140px 0 110px;margin-top:-84px; background: radial-gradient(700px 460px at 86% 8%, rgba(45,212,191,.26), transparent 62%), radial-gradient(600px 420px at 6% 92%, rgba(59,130,246,.2), transparent 60%), linear-gradient(148deg,#04121F 0%,#07283E 30%,#0B4F5E 58%,#0E7A6B 82%,#22B98D 100%)} .ab-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.11) 40%,transparent 47%); transform:rotate(-6deg)} .ab-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#FFFFFF;border-radius:50%;pointer-events:none} .ab-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr; gap:52px;align-items:center} .ab-hero .eyebrow{color:#9EF3DC} .ab-hero .eyebrow::before,.ab-hero .eyebrow::after{background:#3EE0C0} .ab-hero .kw{display:block;background:linear-gradient(96deg,#FFE9A8 2%,#9EF3DC 52%,#8FD4FF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .ab-hero .h1sub{display:block;font-size:.46em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.88);margin-top:14px} .ab-hero .lede{color:rgba(255,255,255,.9)} .ab-portrait{margin:0;position:relative} .ab-portrait img{width:100%;height:auto;filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))} .ab-quick{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 4px} .ab-quick div{padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .ab-quick b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.5rem;color:#fff;line-height:1.1} .ab-quick small{font-family:var(--f-data);font-size:.64rem;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.76)} /* ไทม์ไลน์ */ .tl{position:relative;margin-top:46px;display:grid;gap:18px; padding-inline-start:clamp(52px,7vw,86px)} .tl::before{content:"";position:absolute;inset-inline-start:clamp(22px,3.4vw,40px);top:8px;bottom:8px; width:2px;background:linear-gradient(180deg,#3B82F6,#A855F7 30%,#06B6D4 55%,#F59E0B 80%,#10B981)} .tl__item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start} .tl__yr{position:absolute;inset-inline-start:calc(-1 * clamp(52px,7vw,86px));top:16px; width:clamp(44px,6.4vw,80px);text-align:center;font-family:var(--f-display);font-weight:700; font-size:clamp(.78rem,1.1vw,.95rem);color:var(--kink,#1D4ED8);z-index:2} .tl__item::before{content:"";position:absolute; inset-inline-start:calc(-1 * clamp(52px,7vw,86px) + clamp(22px,3.4vw,40px) - 6px);top:38px; width:14px;height:14px;border-radius:50%;z-index:3; background:linear-gradient(145deg,var(--k1,#3B82F6),var(--k2,#1D4ED8)); box-shadow:0 0 0 4px #fff, 0 6px 14px -6px var(--k2,#1D4ED8)} .tl__c{grid-column:1/-1;padding:24px 26px;border-radius:20px;background:#fff; border:1px solid #E9EDF3;box-shadow:0 18px 44px -30px rgba(17,32,61,.4); transition:transform .28s ease,border-color .28s ease} .tl__c:hover{transform:translateX(5px);border-color:var(--k1,#3B82F6)} .tl__c h3{font-size:1.14rem;color:var(--kink,#1D4ED8)} .tl__c p{margin-top:8px;color:#2F3F46;font-size:1rem;line-height:1.85} .tl__c a{color:var(--kink,#1D4ED8);text-decoration:underline;text-underline-offset:3px} @media(max-width:900px){.ab-hero__grid{grid-template-columns:1fr;gap:32px} .ab-portrait{max-width:340px;margin-inline:auto}} @media(max-width:820px){.ab-hero{margin-top:-68px;padding:104px 0 86px} .ab-hero::after{bottom:-56px;height:104px} .tl__c{padding:20px 18px}} /* ============================================================ หน้าติดต่อเรา (page-contact.php) ============================================================ */ .ct-hero{position:relative;overflow:hidden;color:#fff;padding:140px 0 110px;margin-top:-84px; background: radial-gradient(700px 460px at 84% 8%, rgba(56,189,248,.28), transparent 62%), radial-gradient(600px 420px at 8% 92%, rgba(129,140,248,.22), transparent 60%), linear-gradient(148deg,#050D22 0%,#0B2149 28%,#124C86 58%,#1783B8 82%,#38BDF8 100%)} .ct-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.12) 40%,transparent 47%); transform:rotate(-6deg)} .ct-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#F7F9FD;border-radius:50%;pointer-events:none} .ct-hero > .wrap{position:relative;z-index:2} .ct-hero .eyebrow{color:#BAE6FD} .ct-hero .eyebrow::before,.ct-hero .eyebrow::after{background:#38BDF8} .ct-hero .kw{display:block;background:linear-gradient(96deg,#FFFFFF,#BAE6FD 52%,#C7B4FF); -webkit-background-clip:text;background-clip:text;color:transparent} .ct-hero .h1sub{display:block;font-size:.46em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.88);margin-top:14px} .ct-wrap{background:linear-gradient(180deg,#F7F9FD 0%,#F3F5FA 100%)} .ct-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:start} .ct-ways{display:grid;gap:14px} .ct-card{display:flex;gap:15px;align-items:flex-start;padding:20px;border-radius:18px; background:#fff;border:1px solid #E9EDF3; box-shadow:0 16px 38px -28px rgba(17,32,61,.4); transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease} .ct-card:hover{transform:translateY(-4px);border-color:var(--k1,#3B82F6); box-shadow:0 24px 52px -28px rgba(17,32,61,.5)} .ct-ico{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center; color:#fff;background:linear-gradient(145deg,var(--k1,#3B82F6),var(--k2,#1D4ED8)); box-shadow:0 8px 18px -9px var(--k2,#1D4ED8)} .ct-ico svg{width:21px;height:21px} .ct-card b{display:block;font-family:var(--f-display);font-size:1.02rem;color:var(--kink,#1D4ED8)} .ct-card small{display:block;font-family:var(--f-data);font-size:.74rem;color:#6B7A82;margin-top:2px} .ct-card p{font-size:.9rem;color:#33444B;margin-top:7px;line-height:1.7} .ct-card i{margin-inline-start:auto;font-style:normal;color:#C3CBD4;transition:transform .24s,color .24s} .ct-card:hover i{color:var(--k2,#1D4ED8);transform:translate(3px,-3px)} .ct-hours{padding:20px 22px;border-radius:18px;background:#fff;border:1px solid #E9EDF3; box-shadow:0 16px 38px -30px rgba(17,32,61,.36)} .ct-hours h4{font-family:var(--f-data);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:#6B7A82;margin-bottom:12px} .ct-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:.94rem; border-bottom:1px solid #F1F3F6;color:#3A4A52} .ct-row:last-of-type{border-bottom:0} .ct-row b{color:var(--ink);font-family:var(--f-display);font-weight:600} .ct-note{font-size:.86rem;color:#5B6B73;line-height:1.7;margin-top:10px} .ct-form{padding:30px 28px;border-radius:24px;background:#fff;border:1px solid #E9EDF3; box-shadow:0 26px 64px -32px rgba(17,32,61,.42)} .ct-form h2{font-size:1.5rem;margin-top:6px} .ct-sub{color:#4A5A62;font-size:.95rem;margin-top:8px;line-height:1.75} .fld{display:block;margin-top:18px} .fld > span{display:block;font-family:var(--f-display);font-weight:600;font-size:.9rem; color:var(--ink);margin-bottom:7px} .fld em{font-style:normal;color:#E8385F} .fld input,.fld textarea{width:100%;border:1.5px solid #D8DEE7;border-radius:12px; padding:13px 15px;font-family:var(--f-body);font-size:.98rem;background:#FCFDFF; color:var(--ink);outline:0;transition:border-color .2s,box-shadow .2s} .fld input:focus,.fld textarea:focus{border-color:#3B82F6; box-shadow:0 0 0 4px rgba(59,130,246,.14);background:#fff} .fld textarea{resize:vertical;line-height:1.7} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips button{font-family:var(--f-body);font-size:.88rem;padding:9px 15px;border-radius:999px; border:1.5px solid #D8DEE7;background:#fff;color:#3A4A52;cursor:pointer; transition:all .2s ease} .chips button:hover{border-color:#3B82F6;color:#1D4ED8} .chips button.on{background:linear-gradient(100deg,#3B82F6,#1D4ED8);border-color:transparent; color:#fff;box-shadow:0 8px 18px -9px #1D4ED8} .ct-submit{width:100%;margin-top:22px;justify-content:center;font-size:1.02rem;padding:16px} .ct-fine{font-family:var(--f-data);font-size:.72rem;color:#6B7A82;text-align:center;margin-top:12px} @media(max-width:940px){.ct-grid{grid-template-columns:1fr}} @media(max-width:820px){.ct-hero{margin-top:-68px;padding:104px 0 86px} .ct-hero::after{bottom:-56px;height:104px} .ct-form{padding:24px 20px}} /* ============================================================ หน้าแพ็กเกจ & ราคา (page-pricing.php) ============================================================ */ .pk-hero{position:relative;overflow:hidden;color:#fff;padding:140px 0 112px;margin-top:-84px; background: radial-gradient(720px 460px at 84% 6%, rgba(244,63,94,.26), transparent 62%), radial-gradient(620px 420px at 8% 92%, rgba(168,85,247,.24), transparent 60%), linear-gradient(148deg,#0A0A2E 0%,#2A1160 28%,#5E1C86 56%,#9B2C7E 80%,#D64A73 100%)} .pk-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.12) 40%,transparent 47%); transform:rotate(-6deg)} .pk-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#F7F8FC;border-radius:50%;pointer-events:none} .pk-hero > .wrap{position:relative;z-index:2} .pk-hero .eyebrow{color:#FFC7DE} .pk-hero .eyebrow::before,.pk-hero .eyebrow::after{background:#F472B6} .pk-hero .kw{display:block;background:linear-gradient(96deg,#FFE9A8 2%,#FFB0DC 50%,#C7B4FF 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .pk-hero .h1sub{display:block;font-size:.46em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.88);margin-top:14px} .pk-steps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px} .pk-steps span{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px; font-family:var(--f-data);font-size:.76rem;color:rgba(255,255,255,.8); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)} .pk-steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.18);font-size:.72rem;color:#fff} .pk-steps .on{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)} .pk-steps .on b{background:#fff;color:#5E1C86} .pk-wrap{background:linear-gradient(180deg,#F7F8FC 0%,#F2F4FA 100%);padding-bottom:90px} .pk-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px} .pk-tabs button{font-family:var(--f-display);font-weight:600;font-size:.95rem;padding:13px 22px; border-radius:999px;border:1.5px solid #DDE3EC;background:#fff;color:#3A4A52;cursor:pointer; transition:all .24s ease} .pk-tabs button:hover{border-color:#A855F7;color:#7C3AED;transform:translateY(-2px)} .pk-tabs button.on{background:linear-gradient(100deg,#9B2C7E,#5E1C86);border-color:transparent; color:#fff;box-shadow:0 12px 26px -12px rgba(94,28,134,.8)} .pk-panel__head{margin-bottom:28px} .pk-panel__head h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--kink)} .pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pk{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:24px; background:#fff;border:1.5px solid #E9EDF3; box-shadow:0 10px 22px rgba(17,32,61,.05), 0 34px 70px -30px rgba(17,32,61,.2); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease} .pk:hover{transform:translateY(-7px);border-color:var(--k1); box-shadow:0 14px 28px rgba(17,32,61,.07), 0 48px 92px -32px rgba(17,32,61,.3)} .pk--hot{border-color:var(--k1);background: radial-gradient(420px 240px at 90% 0%, var(--ksoft), transparent 64%),#fff} .pk--hot::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;border-radius:24px 24px 0 0; background:linear-gradient(90deg,color-mix(in srgb,var(--k2) 45%,#071B28),var(--k2) 60%,var(--k1))} .pk__flag{position:absolute;top:-13px;inset-inline-end:22px;font-family:var(--f-data);font-size:.6rem; letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:999px;color:#fff; background:linear-gradient(100deg,var(--k1),var(--k2));box-shadow:0 10px 22px -10px var(--k2)} .pk header{margin-bottom:12px} .pk__name{display:block;font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:var(--kink)} .pk__th{font-family:var(--f-data);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#6B7A82} .pk__price{font-family:var(--f-display);font-weight:700;font-size:2.4rem;color:var(--ink); line-height:1.1;margin:8px 0 16px;font-variant-numeric:tabular-nums} .pk__price em{font-style:normal;font-size:1.1rem;color:#6B7A82;margin-inline-end:3px;vertical-align:9px} .pk__price small{font-family:var(--f-data);font-size:.72rem;color:#6B7A82;font-weight:400; margin-inline-start:5px} .pk__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;flex:1} .pk__list li{position:relative;padding-inline-start:26px;font-size:.94rem;color:#2F3F46;line-height:1.7} .pk__list li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:15px;height:15px; border-radius:50%;background:var(--ksoft); box-shadow:inset 0 0 0 1.5px var(--k1)} .pk__list li::after{content:"";position:absolute;inset-inline-start:4.6px;top:.78em;width:5px;height:2.6px; border-inline-start:1.8px solid var(--k2);border-bottom:1.8px solid var(--k2); transform:rotate(-45deg)} .btn--pick{width:100%;justify-content:center;background:#fff;color:var(--kink); border:1.5px solid var(--k1);box-shadow:none} .btn--pick:hover{background:var(--ksoft)} .pk.on{border-color:var(--k2);box-shadow:0 0 0 3px var(--ksoft), 0 40px 80px -30px rgba(17,32,61,.3)} .pk.on .btn--pick{background:linear-gradient(100deg,var(--k1),var(--k2));color:#fff;border-color:transparent; box-shadow:0 12px 26px -12px var(--k2)} /* Step 2–3 */ .pk-checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:52px} .pk-brief{padding:30px 28px;border-radius:24px;background:#fff;border:1px solid #E9EDF3; box-shadow:0 26px 64px -34px rgba(17,32,61,.4)} .pk-brief h2{font-size:1.45rem;margin-top:6px} .pk-sum{position:sticky;top:104px;padding:28px 26px;border-radius:24px;color:#fff;overflow:hidden; background: radial-gradient(420px 260px at 88% 4%, rgba(244,63,94,.22), transparent 64%), linear-gradient(160deg,#141133 0%,#2A1160 55%,#3E1A6E 100%); box-shadow:0 30px 70px -32px rgba(20,17,51,.9)} .pk-sum .eyebrow{color:#FFC7DE} .pk-sum .eyebrow::before,.pk-sum .eyebrow::after{background:#F472B6} .pk-sum h3{color:#fff;font-size:1.24rem;margin-bottom:16px} .pk-sum__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12);font-size:.94rem} .pk-sum__row span{color:rgba(255,255,255,.62)} .pk-sum__row b{color:#fff;font-family:var(--f-display);font-weight:600;text-align:end; max-width:62%;word-break:break-word} .pk-sum__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px; margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.24)} .pk-sum__total span{font-family:var(--f-data);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.7)} .pk-sum__total b{font-family:var(--f-display);font-weight:700;font-size:2rem;color:#FFE9A8; font-variant-numeric:tabular-nums} .pk-sum__total em{font-style:normal;font-size:1rem;vertical-align:7px;margin-inline-end:2px} .pk-pay{width:100%;justify-content:center;margin-top:22px;font-size:1.02rem;padding:16px} .pk-pay:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .pk-quote{width:100%;justify-content:center;margin-top:10px} .pk-trust{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px} .pk-trust li{position:relative;padding-inline-start:22px;font-family:var(--f-data);font-size:.72rem; color:rgba(255,255,255,.72);line-height:1.6} .pk-trust li::before{content:"✓";position:absolute;inset-inline-start:0;color:#4ADE80;font-size:.8rem} @media(max-width:1000px){ .pk-grid{grid-template-columns:1fr;gap:16px} .pk-checkout{grid-template-columns:1fr} .pk-sum{position:static} } @media(max-width:820px){ .pk-hero{margin-top:-68px;padding:104px 0 88px} .pk-hero::after{bottom:-56px;height:104px} .pk-tabs button{font-size:.86rem;padding:11px 16px} .pk-brief{padding:24px 20px} .pk__price{font-size:2.1rem} } /* ============================================================ ปุ่มพรีเมียม — เงาลึก ขอบแสง ยกตัวตอน hover ============================================================ */ .btn{position:relative;isolation:isolate} .btn--orange,.btn--green,.btn--blue,.btn--rose,.btn--violet,.btn--red,.btn--vio,.btn--gold{ box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -10px rgba(8,18,38,.5), 0 22px 44px -20px rgba(8,18,38,.55)} .btn--orange:hover,.btn--green:hover,.btn--blue:hover,.btn--rose:hover, .btn--violet:hover,.btn--red:hover,.btn--vio:hover,.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 16px 30px -12px rgba(8,18,38,.55), 0 34px 64px -22px rgba(8,18,38,.6)} .btn--orange:active,.btn--green:active,.btn--blue:active,.btn--rose:active, .btn--violet:active,.btn--red:active{transform:translateY(-1px)} /* ============================================================ หน้าราคา: แท็บบริการมีสีประจำ + ปุ่มหรู ============================================================ */ .pk-tabs button{position:relative;overflow:hidden;padding-inline-start:42px} .pk-tabs button::before{content:"";position:absolute;inset-inline-start:16px;top:50%; width:14px;height:14px;border-radius:5px;transform:translateY(-50%); box-shadow:0 4px 10px -4px currentColor} .pk-tabs button[data-tab="seo"]::before{background:linear-gradient(145deg,#3B82F6,#1D4ED8);color:#1D4ED8} .pk-tabs button[data-tab="backlink"]::before{background:linear-gradient(145deg,#A855F7,#7C3AED);color:#7C3AED} .pk-tabs button[data-tab="local"]::before{background:linear-gradient(145deg,#10B981,#047857);color:#047857} .pk-tabs button[data-tab="ads"]::before{background:linear-gradient(145deg,#F59E0B,#B45309);color:#B45309} .pk-tabs button[data-tab="seo"].on{background:linear-gradient(100deg,#1D4ED8,#0F2E80); box-shadow:0 14px 30px -14px rgba(29,78,216,.9)} .pk-tabs button[data-tab="backlink"].on{background:linear-gradient(100deg,#7C3AED,#4A1D96); box-shadow:0 14px 30px -14px rgba(124,58,237,.9)} .pk-tabs button[data-tab="local"].on{background:linear-gradient(100deg,#047857,#02503A); box-shadow:0 14px 30px -14px rgba(4,120,87,.9)} .pk-tabs button[data-tab="ads"].on{background:linear-gradient(100deg,#B45309,#7A3703); box-shadow:0 14px 30px -14px rgba(180,83,9,.9)} .pk-tabs button.on::before{background:rgba(255,255,255,.9);color:transparent;box-shadow:none} .btn--pick{padding:14px 22px;font-size:.98rem;font-weight:600; box-shadow:0 6px 16px -10px rgba(17,32,61,.5)} .btn--pick:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(17,32,61,.6)} .pk.on .btn--pick{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -12px var(--k2)} /* วิธีชำระเงิน */ .pay-ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .pay-ways span{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px; font-family:var(--f-data);font-size:.7rem;color:rgba(255,255,255,.86); background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18)} .pay-ways svg{width:15px;height:15px;color:#FFE9A8} .pk-pay{font-weight:600;letter-spacing:.01em} .pk-payhint{font-family:var(--f-data);font-size:.7rem;color:rgba(255,255,255,.62); text-align:center;margin-top:10px;line-height:1.6} /* ============================================================ หน้าติดต่อ: การ์ด/ปุ่ม/ขอบ หรูขึ้น ============================================================ */ .ct-card{position:relative;overflow:hidden;border:1px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(150deg,var(--k1,#3B82F6),rgba(255,255,255,0) 62%) border-box; box-shadow:0 10px 20px rgba(17,32,61,.04), 0 26px 54px -30px rgba(17,32,61,.45)} .ct-card::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(320px 180px at 100% 0%, var(--ksoft,rgba(59,130,246,.1)), transparent 70%)} .ct-card:hover{box-shadow:0 16px 28px rgba(17,32,61,.06), 0 40px 78px -32px rgba(17,32,61,.55)} .ct-card > *{position:relative;z-index:2} .ct-hours{border:1px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(150deg,rgba(216,179,112,.75),rgba(255,255,255,0) 62%) border-box; box-shadow:0 10px 20px rgba(17,32,61,.04), 0 26px 54px -32px rgba(17,32,61,.4)} .ct-form{border:1px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(155deg,rgba(59,130,246,.8),rgba(168,85,247,.45) 40%,rgba(255,255,255,0) 76%) border-box; box-shadow:0 14px 26px rgba(17,32,61,.05), 0 40px 84px -36px rgba(17,32,61,.5)} .ct-submit{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 32px -14px rgba(255,138,0,.85)} .ct-submit:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 24px 48px -18px rgba(255,138,0,.95)} .chips button{box-shadow:0 4px 10px -8px rgba(17,32,61,.5)} .chips button.on{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 24px -12px #1D4ED8} /* ============================================================ แกลเลอรีหน้าประวัติ (grid + flex) ============================================================ */ .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px; grid-auto-rows:200px} .gal__i{position:relative;margin:0;border-radius:20px;overflow:hidden; border:1px solid #E9EDF3;background:#fff; box-shadow:0 10px 20px rgba(17,32,61,.04), 0 30px 62px -30px rgba(17,32,61,.28); transition:transform .32s ease,box-shadow .32s ease} .gal__i:hover{transform:translateY(-6px); box-shadow:0 16px 30px rgba(17,32,61,.06), 0 46px 88px -32px rgba(17,32,61,.42)} .gal__i--tall{grid-row:span 2} .gal__i--wide{grid-column:span 2} .gal__i img,.gal__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gal__ph{display:grid;place-items:center;color:#fff; background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb,var(--k1) 65%,transparent), transparent 62%), linear-gradient(150deg,var(--k1),var(--k2))} .gal__ph svg{width:44px;height:44px;opacity:.9} .gal__i figcaption{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:38px 18px 16px; background:linear-gradient(transparent,rgba(4,17,28,.82) 42%,rgba(4,17,28,.95));color:#fff} .gal__i figcaption b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem} .gal__i figcaption small{display:block;font-family:var(--f-data);font-size:.7rem; color:rgba(255,255,255,.78);margin-top:3px;line-height:1.5} @media(max-width:900px){ .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .gal__i--wide{grid-column:span 2} .gal__i--tall{grid-row:span 1} } @media(max-width:560px){ .gal{grid-template-columns:1fr;grid-auto-rows:200px} .gal__i--wide{grid-column:span 1} } /* ============================================================ หน้ารับทำ Google Business Profile (page-gbp.php) ============================================================ */ .gbp-hero{position:relative;overflow:hidden;color:#fff;padding:140px 0 120px;margin-top:-84px; background: radial-gradient(700px 460px at 84% 8%, rgba(255,140,60,.28), transparent 62%), radial-gradient(620px 420px at 8% 90%, rgba(219,68,55,.24), transparent 60%), linear-gradient(148deg,#0A1024 0%,#33123A 28%,#7A1B3E 56%,#C2402C 82%,#F0A03C 100%)} .gbp-hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none; background: linear-gradient(102deg,transparent 34%,rgba(255,255,255,.12) 40%,transparent 47%), linear-gradient(102deg,transparent 53%,rgba(255,255,255,.06) 59%,transparent 67%); transform:rotate(-6deg)} .gbp-hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-78px;height:150px; background:#FFFFFF;border-radius:50%;pointer-events:none} .gbp-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr; gap:48px;align-items:center} .gbp-hero .eyebrow{color:#FFD2A8} .gbp-hero .eyebrow::before,.gbp-hero .eyebrow::after{background:#F0A03C} .gbp-hero .kw{display:block;background:linear-gradient(96deg,#FFE9A8 2%,#FFB58A 50%,#FF9BC2 96%); -webkit-background-clip:text;background-clip:text;color:transparent} .gbp-hero .h1sub{display:block;font-size:.44em;font-weight:400;line-height:1.55; color:rgba(255,255,255,.9);margin-top:14px} .gbp-hero .lede{color:rgba(255,255,255,.9)} .gbp-badges{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 6px} .gbp-badges span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px; font-family:var(--f-data);font-size:.72rem;color:rgba(255,255,255,.9); background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)} .gbp-badges svg{width:15px;height:15px;color:#FFD2A8} /* การ์ดจำลองโปรไฟล์ */ .gbp-card{position:relative;border-radius:22px;overflow:hidden;background:#fff; box-shadow:0 36px 78px -32px rgba(10,16,36,.85)} .gbp-card__bar{display:flex;gap:6px;padding:12px 16px;background:#F3F5F8; border-bottom:1px solid #E7EBF1} .gbp-card__bar span{width:9px;height:9px;border-radius:50%;background:#D6DCE5} .gbp-card__bar span:first-child{background:#F4655B} .gbp-card__bar span:nth-child(2){background:#F7BE4F} .gbp-card__bar span:nth-child(3){background:#5CC46A} .gbp-card__body{padding:20px} .gbp-row{display:flex;align-items:center;gap:13px} .gbp-ico{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center; color:#fff;background:linear-gradient(145deg,#F0A03C,#C2402C); box-shadow:0 8px 18px -9px #C2402C} .gbp-ico svg{width:21px;height:21px} .gbp-row b{display:block;font-family:var(--f-display);font-size:1.02rem;color:var(--ink)} .gbp-row small{font-family:var(--f-data);font-size:.72rem;color:#0B7A5C} .gbp-rank{margin-inline-start:auto;font-style:normal;font-family:var(--f-display);font-weight:700; font-size:1.15rem;padding:6px 12px;border-radius:11px;color:#fff; background:linear-gradient(145deg,#10B981,#047857);box-shadow:0 8px 18px -9px #047857} .gbp-stars{margin-top:14px;color:#F0A03C;letter-spacing:2px;font-size:.95rem} .gbp-stars small{color:#6B7A82;font-family:var(--f-data);font-size:.7rem;letter-spacing:.04em; margin-inline-start:6px} .gbp-actions{display:flex;gap:8px;margin-top:16px} .gbp-actions span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px; padding:11px 6px;border-radius:12px;background:#F5F7FA;border:1px solid #E7EBF1; font-family:var(--f-data);font-size:.68rem;color:#3A4A52} .gbp-actions svg{width:17px;height:17px;color:#1D4ED8} .gbp-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px; padding-top:16px;border-top:1px solid #EEF1F5} .gbp-mini b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:#047857; font-variant-numeric:tabular-nums} .gbp-mini small{font-family:var(--f-data);font-size:.66rem;color:#6B7A82} .gbp-content{padding-top:8px;background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%)} .gbp-content .art-grid{margin-top:0;padding-top:34px} @media(max-width:960px){.gbp-hero__grid{grid-template-columns:1fr;gap:34px}} @media(max-width:820px){ .gbp-hero{margin-top:-68px;padding:104px 0 92px} .gbp-hero::after{bottom:-56px;height:104px} } /* ============================================================ คอนทราสต์ลิงก์บนพื้นเข้ม (กันอ่านไม่ออก) ============================================================ */ .art-cta a:not(.btn), .on-dark .entry__body a:not(.btn), .on-dark .art-body a:not(.btn), .a-quote a, .sec--finale a:not(.btn), .cs-step a{ color:#9CD2FF;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .art-cta a:not(.btn):hover, .on-dark .art-body a:not(.btn):hover, .sec--finale a:not(.btn):hover, .cs-step a:hover{color:#FFE9A8} /* ปุ่มในกล่อง CTA กลางบทความ ต้องเด่นเสมอ */ .art-cta .btn{margin-top:4px} .art-cta .btn--green,.art-cta .btn--blue,.art-cta .btn--rose{ box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 16px 34px -14px rgba(0,0,0,.75)} /* ลิงก์ทั่วไปบนพื้นเข้ม (เผื่อเนื้อหาจากหลังบ้าน) */ .on-dark a:not(.btn):not(.relcard):not(.ct-card):not(.pk-tabs *){color:#9CD2FF} .on-dark a:not(.btn):hover{color:#FFE9A8} /* ============================================================ FIX ตัวหนาบนพื้นเข้มทั้งธีม (กันปัญหาซ้ำในหน้าใหม่ ๆ) ============================================================ */ .on-dark b,.on-dark strong, .bg--deep b,.bg--deep strong, .sec--finale b,.sec--finale strong, .sec--dark b,.sec--dark strong, .cs-step b,.cs-step strong, .pk-sum b,.pk-sum strong, .gbp-hero b,.svc-hero b,.cs-hero b,.kb-hero b,.ab-hero b,.ct-hero b,.pk-hero b,.art-hero b{color:#fff} .on-dark .lede b,.on-dark p b{color:#fff} /* ยกเว้นการ์ดขาวที่วางอยู่บนพื้นเข้ม ต้องกลับเป็นสีเข้มตามเดิม */ .on-dark .card b,.on-dark .card strong, .on-dark .rcard b,.on-dark .rcard strong, .on-dark .pk b,.on-dark .pk strong, .on-dark .cs-col b,.on-dark .cs-col strong, .on-dark .kb-card b,.on-dark .kb-card strong{color:var(--ink)}