/* ============================================================ หน้าเนื้อหา — ดีไซน์ใหม่ (ท่านคิวสั่ง 22 ต.ค. 2569 "ออกแบบใหม่ ไม่อิงจากเว็บไซต์เก่า") ใช้กับหน้าที่สร้างโดย tools/convert.js · ทุกกฎขึ้นต้น #c-page กันชนกับของเดิม เซิร์ฟเวอร์ (server.js) และ tools/build-wp.js ต่อไฟล์นี้ท้าย shell-c.css ให้เป็นไฟล์เดียว ============================================================ */ #c-page{--x-ink:#0f1b3d;--x-body:#44506b;--x-line:#e3e8f2;--x-soft:#f5f7fc;--x-a:#2f6fed;--x-b:#7c5cff;--x-ok:#12b886} #c-page .c-x{padding:88px 0;position:relative} #c-page .c-x__in{max-width:1320px;margin:0 auto;padding:0 var(--c-pad)} #c-page .c-x--a{background:#fff} #c-page .c-x--b{background:var(--x-soft)} #c-page .c-h{margin:0;color:var(--x-ink);line-height:1.3;font-weight:700} #c-page .c-x__head{text-align:center;max-width:780px;margin:0 auto 48px} #c-page .c-x__head .c-h{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em} #c-page .c-x__head .c-h:first-child:after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin:18px auto 0;background:linear-gradient(90deg,var(--x-a),var(--x-b))} #c-page .c-x__head .c-x__sub{font-size:18px;font-weight:500;color:var(--x-body);margin-top:14px} #c-page .c-x__head .c-x__sub:after{display:none} #c-page .c-sub{font-size:clamp(20px,2.2vw,26px);margin:36px 0 14px;text-align:center} #c-page .c-callout{font-size:16px;font-weight:600;line-height:1.7;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:18px;padding:16px 22px;margin:28px auto 0;max-width:820px;text-align:left} /* hero */ #c-page .c-hero2{background:radial-gradient(900px 420px at 85% -10%,rgba(124,92,255,.55),transparent 60%),radial-gradient(700px 400px at 5% 110%,rgba(47,111,237,.5),transparent 60%),linear-gradient(135deg,#0b1636,#16295c 60%,#1d2f78);color:#fff;padding:104px 0 112px;overflow:hidden} #c-page .c-hero2:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 75%)} #c-page .c-hero2 .c-x__in{position:relative;text-align:center;max-width:920px} #c-page .c-hero2 .c-eyebrow{display:inline-block;color:#cfe0ff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 20px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 26px} #c-page .c-hero2 .c-hero2__t{color:#fff;font-size:clamp(34px,5.4vw,64px);line-height:1.15;letter-spacing:-.02em;margin:0 0 20px} #c-page .c-hero2 .c-hero2__lead{color:#d6e2ff;font-size:clamp(18px,2vw,22px);font-weight:400;line-height:1.7;margin:0 auto 14px;max-width:720px} #c-page .c-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:34px 0 0} #c-page .c-hero2 .c-btn,#c-page .c-cta2 .c-btn{background:#fff;color:#1d3fa8;box-shadow:0 14px 34px rgba(0,0,0,.25);padding:15px 30px;font-size:17px} #c-page .c-hero2 .c-btn:hover,#c-page .c-cta2 .c-btn:hover{transform:translateY(-2px)} #c-page .c-btn{transition:transform .15s} /* ข้อความ */ #c-page .c-text{color:var(--x-body);font-size:17px;line-height:1.85;max-width:820px;margin:0 auto} #c-page .c-text p{margin:0 0 14px} #c-page .c-text a{color:var(--x-a)!important;text-decoration:underline!important} #c-page .c-text--long{max-width:860px} #c-page .c-text--long p,#c-page .c-text--long li{font-size:16px} #c-page .c-checks{list-style:none;padding:0;margin:0} #c-page .c-checks li{position:relative;padding:12px 16px 12px 52px;margin:0 0 10px;background:#fff;border:1px solid var(--x-line);border-radius:16px} #c-page .c-checks li:before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--x-a),var(--x-b));color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center} #c-page .c-text ul:not(.c-checks){padding-left:22px} /* การ์ดจุดเด่น */ #c-page .c-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} #c-page .c-feat{background:#fff;border:1px solid var(--x-line);border-radius:26px;padding:30px 28px;transition:transform .2s,box-shadow .2s} #c-page .c-x--a .c-feat{background:var(--x-soft);border-color:transparent} #c-page .c-feat:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,27,61,.1)} #c-page .c-feat__n{display:block;font-size:44px;font-weight:800;line-height:1;margin-bottom:16px;background:linear-gradient(135deg,var(--x-a),var(--x-b));-webkit-background-clip:text;background-clip:text;color:transparent} #c-page .c-feat__t{font-size:20px;margin:0 0 10px} #c-page .c-feat__p{color:var(--x-body);font-size:16px;line-height:1.75} #c-page .c-feat__p p{margin:0} /* การ์ดทั่วไป (หลักสูตรยอดนิยม ฯลฯ) */ #c-page .c-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} #c-page .c-cardx{background:#fff;border:1px solid var(--x-line);border-left:5px solid var(--x-a);border-radius:20px;padding:24px 24px 22px} #c-page .c-cardx__t{font-size:19px;margin:0 0 8px} #c-page .c-cardx__p{color:var(--x-body);font-size:15.5px;line-height:1.7} #c-page .c-cardx__p p{margin:0} /* แพ็กเกจ */ #c-page .c-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;align-items:stretch} #c-page .c-plan{background:#fff;border:1px solid var(--x-line);border-radius:28px;padding:34px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column} #c-page .c-plan:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--x-a),var(--x-b))} #c-page .c-plan__t{font-size:20px;margin:0 0 18px} #c-page .c-plan__price{display:flex;align-items:baseline;gap:10px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px dashed var(--x-line)} #c-page .c-plan__price small{color:var(--x-body);font-size:15px} #c-page .c-plan__price b{font-size:40px;line-height:1;font-weight:800;color:var(--x-ink)} #c-page .c-plan .c-text{margin:0;font-size:16px} #c-page .c-plan .c-checks li{background:var(--x-soft);border-color:transparent;padding:10px 14px 10px 48px;margin-bottom:8px} /* ขั้นตอน */ #c-page .c-steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} #c-page .c-steps li{counter-increment:s;background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:26px 24px 24px;position:relative} #c-page .c-steps li:before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--x-a),var(--x-b));color:#fff;font-weight:700;font-size:18px;margin-bottom:14px;box-shadow:0 8px 18px rgba(47,111,237,.3)} #c-page .c-steps li div{color:var(--x-body);font-size:16px;line-height:1.75} /* FAQ */ #c-page .c-faq{max-width:860px;margin:0 auto;display:grid;gap:12px} #c-page .c-faq details{background:#fff;border:1px solid var(--x-line);border-radius:18px;padding:0 22px} #c-page .c-faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:600;font-size:17px;color:var(--x-ink);position:relative} #c-page .c-faq summary::-webkit-details-marker{display:none} #c-page .c-faq summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:var(--x-a)} #c-page .c-faq details[open] summary:after{content:"–"} #c-page .c-faq details div{padding:0 0 20px;color:var(--x-body);line-height:1.8;font-size:16px} /* ผลประโยชน์ที่ได้รับ */ #c-page .c-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} #c-page .c-benefit{background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:24px 24px 22px 70px;position:relative} #c-page .c-benefit:before{content:"✓";position:absolute;left:22px;top:24px;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--x-ok),#0ea5a0);color:#fff;font-weight:700;display:grid;place-items:center} #c-page .c-benefit b{display:block;font-size:17.5px;color:var(--x-ink);margin-bottom:6px} #c-page .c-benefit p{margin:0;color:var(--x-body);font-size:15.5px;line-height:1.75} /* วิทยากร / พิธีกร */ #c-page .c-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} #c-page .c-person{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:20px} #c-page .c-person__av{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--x-a),var(--x-b));color:#fff;font-size:24px;font-weight:700} #c-page .c-person__t{font-size:16.5px;line-height:1.5;margin:0} /* การ์ดบริการ (หน้า "หน้าแรก") */ #c-page .c-svc2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} #c-page .c-svc2__c{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--x-line);border-radius:26px;padding:30px 28px;text-decoration:none;color:var(--x-ink);transition:transform .2s,box-shadow .2s,border-color .2s} #c-page .c-svc2__c:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,27,61,.1);border-color:#c9d6f5} #c-page .c-svc2__c small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--x-a)} #c-page .c-svc2__c b{font-size:21px;line-height:1.35} #c-page .c-svc2__c span{margin-top:12px;font-weight:600;color:var(--x-a)} /* แถบเชิญชวน */ #c-page .c-cta2{background:linear-gradient(135deg,#1d3fa8,#5b3fd6);color:#fff;padding:84px 0;text-align:center;overflow:hidden} #c-page .c-cta2:before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:rgba(255,255,255,.08)} #c-page .c-cta2 .c-x__in{position:relative;max-width:860px} #c-page .c-cta2 .c-cta2__t{color:#fff;font-size:clamp(24px,3.2vw,38px);line-height:1.4} #c-page .c-cta2 .c-cta2__note{color:#d6e2ff;font-size:16px;font-weight:400;margin-top:20px} /* ช่องทางติดต่อ */ #c-page .c-x--contact{background:var(--x-soft);padding:72px 0} #c-page .c-ct__t{text-align:center;font-size:clamp(20px,2.4vw,26px);max-width:760px;margin:0 auto 32px} #c-page .c-ct{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:900px;margin:0 auto} #c-page .c-ct__c{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:20px 22px;text-decoration:none;color:var(--x-ink);transition:transform .2s,box-shadow .2s} #c-page .c-ct__c:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,27,61,.1)} #c-page .c-ct__c i{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px;color:#fff;background:#06c755} #c-page .c-ct__c:nth-child(2) i{background:#1877f2;font-size:24px} #c-page .c-ct__c:nth-child(3) i{background:linear-gradient(135deg,var(--x-a),var(--x-b));font-size:22px} #c-page .c-ct__c small{display:block;color:var(--x-body);font-size:13px} #c-page .c-ct__c b{font-size:17px} /* วิดีโอ (YouTube ฝังเหมือนเดิม) */ #c-page .c-x--video{padding:56px 0 24px} #c-page .c-video{max-width:940px;margin:0 auto;border-radius:28px;box-shadow:0 30px 70px rgba(15,27,61,.22)} /* ============================================================ ระบบหลักสูตร (shortcode จาก dek-courses.php) — ทาสีใหม่ให้ดูมืออาชีพ · แก้ที่นี่ ไม่แตะ PHP ============================================================ */ #c-page .c-x--coursehero{background:linear-gradient(180deg,#eaf0ff 0%,#f7f9ff 100%);padding:56px 0 64px} #c-page .dekc-hero{max-width:1180px;gap:56px;padding:0 24px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} #c-page .dekc-hero__img img{border-radius:24px;box-shadow:0 30px 70px rgba(15,27,61,.25);width:100%} #c-page .dekc-hero__t{font-size:clamp(28px,3.6vw,44px);line-height:1.2;letter-spacing:-.01em;color:var(--x-ink);margin:0 0 20px} #c-page .dekc-hero__lines{display:inline-block;font-size:16.5px;font-weight:500;color:var(--x-body);line-height:1.9;background:#fff;border:1px solid var(--x-line);border-radius:20px;padding:16px 22px;margin:0 0 18px;width:100%} #c-page .dekc-hero__map a{font-weight:600;color:var(--x-a)} #c-page .dekc-hero__ul{list-style:none;padding:0;margin:0 0 18px} #c-page .dekc-hero__ul li{position:relative;padding-left:34px;margin:0 0 10px;font-size:17px;color:var(--x-body)} #c-page .dekc-hero__ul li:before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--x-a),var(--x-b));color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center} #c-page .dekc-hero__price{font-size:clamp(34px,4vw,48px);color:var(--x-ink);margin:10px 0 14px} #c-page .dekc-hero__price .dekc-now{font-size:inherit;background:linear-gradient(135deg,var(--x-a),var(--x-b));-webkit-background-clip:text;background-clip:text;color:transparent} #c-page .dekc-hero__alumni{font-size:18px;color:var(--x-a)} #c-page .dekc-hero__regnote{font-weight:600;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:16px;padding:12px 16px} #c-page .dekc-btn{background:linear-gradient(135deg,var(--x-a),var(--x-b));box-shadow:0 12px 28px rgba(47,111,237,.35);padding:15px 32px;font-weight:600;transition:transform .15s} #c-page .dekc-btn:hover{transform:translateY(-2px);filter:none} #c-page .dekc-btn.alt{background:#fff;color:var(--x-a)!important;box-shadow:inset 0 0 0 2px var(--x-a)} #c-page .dekc-grid{gap:26px} #c-page .dekc-card{border:1px solid var(--x-line);border-radius:28px;box-shadow:0 2px 10px rgba(15,27,61,.04);padding:16px 16px 24px;text-align:left;transition:transform .2s,box-shadow .2s} #c-page .dekc-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(15,27,61,.13)} #c-page .dekc-img{border-radius:20px;aspect-ratio:3/2} #c-page .dekc-card .dekc-t{font-size:19px;color:var(--x-ink);margin:10px 8px 0} #c-page .dekc-card p{padding:0 8px} #c-page .dekc-when b{color:var(--x-a)} #c-page .dekc-price{font-size:26px;color:var(--x-ink)} #c-page .dekc-btns{justify-content:flex-start;padding:10px 8px 0} #c-page .dekc-gray .dekc-btn{background:#8b8f98;box-shadow:none} #c-page .c-x--reg{background:linear-gradient(180deg,#fff,#eef3ff)} #c-page .c-x--reg .c-x__head{margin-bottom:28px} #c-page .c-x--raw .c-raw,#c-page .c-x--reg .c-raw{max-width:none} /* ตัวอักษรยาว (นโยบาย) */ #c-page .c-x--long{padding:64px 0} #c-page .c-x--long .c-x__head{text-align:left;margin-left:auto;margin-right:auto;max-width:860px} #c-page .c-x--long .c-x__head .c-h:first-child:after{margin-left:0} @media(max-width:767px){ #c-page .c-x{padding:60px 0} #c-page .c-x__in{padding:0 18px} #c-page .c-hero2{padding:72px 0 78px} #c-page .dekc-hero{gap:24px} #c-page .c-feat,#c-page .c-plan{padding:26px 22px} } /* หน้าทำมือ (เกี่ยวกับเรา · บริการของเรา · ติดต่อ) */ #c-page .c-cards--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} #c-page .c-cardx .c-checks li{background:var(--x-soft);border-color:transparent;padding:10px 14px 10px 48px;margin-bottom:8px} #c-page .c-svc2__c p{margin:6px 0 0;color:var(--x-body);font-size:15.5px;line-height:1.7} #c-page .c-hero2 p.c-h.c-hero2__lead{font-weight:400} #c-page .c-contact{gap:28px} #c-page .c-contact .c-ci{background:#fff;border:1px solid var(--x-line);border-radius:22px} /* hero หลักสูตรบนมือถือ: เรียงลงมาเป็นคอลัมน์เดียว (กฎ #c-page ด้านบนสูงกว่ากฎมือถือของ PHP จึงต้องใส่ซ้ำ) */ @media(max-width:780px){ #c-page .dekc-hero{grid-template-columns:1fr;gap:24px;padding:0 18px} #c-page .c-x--coursehero{padding:32px 0 44px} } #c-page .c-btn,#c-page .c-svc2__c,#c-page .c-ct__c{text-decoration:none} /* ============================================================ หน้ารายละเอียดหลักสูตร — แบบที่ท่านคิวเลือก: "แบบ 2" ฮีโร่เข้ม (22 ต.ค. 2569) ปรับตามที่สั่ง: โปสเตอร์ใหญ่ขึ้น (~58% ของแถว) · ตรง ไม่เอียง · ข้อมูลเรียงเป็นชั้นเป็นระเบียบ (ราคากับปุ่มสมัครอยู่แถวเดียวกัน) เขียนต่อท้ายไฟล์เพื่อทับกฎ hero สีอ่อนด้านบน ============================================================ */ #c-page .c-x--coursehero{background:radial-gradient(1000px 520px at 90% -5%,rgba(124,92,255,.5),transparent 60%),radial-gradient(800px 480px at 0 105%,rgba(47,111,237,.32),transparent 60%),linear-gradient(135deg,#0b1636,#16295c 70%);color:#fff;padding:64px 0 76px} #c-page .dekc-hero{max-width:1400px;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:56px;align-items:center;padding:0 var(--c-pad)} #c-page .dekc-hero__img{order:2} #c-page .dekc-hero__img img{width:100%;display:block;border-radius:20px;transform:none;border:1px solid rgba(255,255,255,.14);box-shadow:0 36px 90px rgba(0,0,0,.55)} #c-page .dekc-hero__info{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px} #c-page .dekc-hero__info>*{flex:0 0 100%} #c-page .dekc-hero__t{color:#fff;font-size:clamp(30px,3.6vw,50px);line-height:1.2;margin:0 0 22px} #c-page .dekc-hero__lines{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#e6eeff;width:100%;margin:0 0 16px} #c-page .dekc-hero__map{margin:0 0 16px} #c-page .dekc-hero__map a{color:#9fc0ff} #c-page .dekc-hero__ul{margin:0 0 24px} #c-page .dekc-hero__ul li{color:#dbe6ff} #c-page .dekc-hero__price{flex:1 1 auto!important;color:#fff;margin:0} #c-page .dekc-hero__price .dekc-now{background:linear-gradient(135deg,#8fd0ff,#c9b6ff);-webkit-background-clip:text;background-clip:text;color:transparent} #c-page .dekc-hero__price .dekc-old{color:#9fb0d6} #c-page .dekc-hero__info>.dekc-btns{flex:0 0 auto!important;margin:0;padding:0;justify-content:flex-start} #c-page .dekc-hero .dekc-btn{background:#fff;color:#1d3fa8!important;box-shadow:0 14px 34px rgba(0,0,0,.35);padding:16px 38px;font-size:18px} #c-page .dekc-hero__alumni{color:#9fc0ff;margin:10px 0 0} #c-page .dekc-hero__regnote{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#ffe9b0;margin:22px 0 0} #c-page .dekc-hero .dekc-badge{margin-top:12px} @media(max-width:780px){ #c-page .dekc-hero{grid-template-columns:1fr;gap:26px;padding:0 18px} #c-page .dekc-hero__img{order:0} #c-page .c-x--coursehero{padding:32px 0 48px} #c-page .dekc-hero .dekc-btn{padding:15px 30px} } /* ราคาอยู่แถวเดียวกับปุ่มสมัคร (ราคาศิษย์เก่าตามหลังลงมา) */ #c-page .dekc-hero__price{order:1} #c-page .dekc-hero__info>.dekc-btns{order:2} #c-page .dekc-hero__alumni{order:3} #c-page .dekc-hero__info>p:has(.dekc-badge){order:4} #c-page .dekc-hero__info>.dekc-note{order:5} #c-page .dekc-hero__regnote{order:6} /* ============================================================ รอบปรับตามท่านคิว 22 ต.ค. 2569: "เอาหลักสูตรขึ้นไปหน่อย · ข้างล่างไม่สวยเลย · ปรับตัวหนังสือให้สวยงามกว่านี้ แบบตกแต่ง" ============================================================ */ /* โปสเตอร์ขึ้นไปชิดบน ตรงกับแนวชื่อหลักสูตร (เดิมอยู่กึ่งกลางแนวตั้ง ลอยต่ำกว่าชื่อ) */ #c-page .dekc-hero{align-items:start} #c-page .dekc-hero__img{margin-top:8px} /* ตัวหนังสือหัวข้อ: Prompt (ไทยทรงเรขาคณิต ดูทันสมัยกว่า) · ตัวเนื้อยังเป็น Noto Sans Thai อ่านง่าย */ #c-page .c-h,#c-page .dekc-hero__t,#c-page .dekc-t,#c-page .c-hero2__t,#c-page .c-feat__n,#c-page .c-plan__price b,#c-page .dekc-hero__price,#c-page .dekc-price,#c-page .c-mods li b,#c-page .c-benefit b,#c-page .c-kicker,#c-page .c-eyebrow{font-family:'Prompt','Noto Sans Thai',sans-serif} #c-page .c-h{font-weight:600;letter-spacing:-.005em} #c-page .dekc-hero__t{font-weight:600;letter-spacing:-.01em} #c-page .c-x__head .c-h{font-weight:600} /* ป้ายเล็กเหนือหัวข้อ section: ตัวพิมพ์ใหญ่ห่าง ๆ สีไล่ + เส้นสองข้าง */ #c-page .c-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(90deg,var(--x-a),var(--x-b));-webkit-background-clip:text;background-clip:text;color:transparent} #c-page .c-kicker:before,#c-page .c-kicker:after{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--x-a),var(--x-b))} #c-page .c-x--long .c-kicker:before{display:none} #c-page .c-x__head .c-h:first-of-type:after{margin-top:20px} /* ย่อหน้าแรกใต้หัวข้อ = คำโปรย ตัวใหญ่ขึ้น กึ่งกลาง */ #c-page .c-x__head+.c-text>p:only-child{font-size:20px;line-height:1.75;color:var(--x-ink);text-align:center} /* "ผู้สอน / วิทยากร" = ป้ายกลาง ไม่ใช่หัวข้อตัวโต */ #c-page .c-label{display:block;text-align:center;font-size:14px!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--x-a)!important;margin:44px 0 18px!important} /* การ์ดวิทยากร: วงกลมตัวอักษร ชื่อตัวหนา ชื่อเล่น/ตำแหน่งตัวเล็กสีจาง */ #c-page .c-people{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:0 auto} #c-page .c-person{flex:0 1 380px;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--x-line);border-radius:24px;padding:20px 24px;box-shadow:0 10px 30px rgba(15,27,61,.06);text-align:left} #c-page .c-person__av{width:64px;height:64px;font-size:26px;font-family:'Prompt','Noto Sans Thai',sans-serif;box-shadow:0 10px 22px rgba(47,111,237,.3)} #c-page .c-person__t{font-size:18px!important;line-height:1.45;margin:0!important;font-weight:600} #c-page .c-person__sub{display:block;margin-top:4px;font-family:'Noto Sans Thai',sans-serif;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--x-body)} /* หัวข้อบรรยาย = การ์ดบทเรียน มีเลข 01 02 … */ #c-page .c-mods{counter-reset:m;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:18px} #c-page .c-mods li{counter-increment:m;position:relative;background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:24px 24px 22px 84px;transition:transform .2s,box-shadow .2s} #c-page .c-x--b .c-mods li{background:#fff} #c-page .c-mods li:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,27,61,.09)} #c-page .c-mods li:before{content:counter(m,decimal-leading-zero);position:absolute;left:22px;top:22px;font-family:'Prompt',sans-serif;font-size:30px;font-weight:700;line-height:1;background:linear-gradient(135deg,var(--x-a),var(--x-b));-webkit-background-clip:text;background-clip:text;color:transparent} #c-page .c-mods li b{display:block;font-size:18px;font-weight:600;color:var(--x-ink);margin-bottom:6px;line-height:1.4} #c-page .c-mods li p{margin:0;color:var(--x-body);font-size:15.5px;line-height:1.75} /* การ์ดสิ่งที่จะได้รับ — หัวข้อ Prompt */ #c-page .c-benefit b{font-weight:600} /* ขั้นตอน — ตัวเลขใช้ Prompt */ #c-page .c-steps li:before{font-family:'Prompt',sans-serif} @media(max-width:767px){ #c-page .c-x__head+.c-text>p:only-child{font-size:17px} #c-page .c-mods li{padding:22px 20px 20px 70px} #c-page .c-mods li:before{left:18px;font-size:26px} } /* ขีดไล่สีใต้หัวข้อ — มีป้ายเล็กนำหน้าแล้ว หัวข้อไม่ใช่ลูกตัวแรก จึงจับด้วย first-of-type */ #c-page .c-x__head .c-h:first-of-type:after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin:20px auto 0;background:linear-gradient(90deg,var(--x-a),var(--x-b))} #c-page .c-x--long .c-x__head .c-h:first-of-type:after{margin-left:0} #c-page .c-x__head .c-x__sub:after{display:none!important} /* ก้อนสมัครเรียน: ปุ่มกลาง · หมายเหตุเป็นกล่องตัวปกติ (กฎ #c-page h2.c-h ใน shell-c.css ใหญ่กว่า ต้องทับ) */ #c-page .c-x--reg .dekc-btns{justify-content:center} #c-page .c-x--reg .dekc-btn{padding:16px 44px;font-size:18px} #c-page h2.c-callout,#c-page h3.c-callout,#c-page .c-callout{font-family:'Noto Sans Thai',sans-serif!important;font-size:16px!important;font-weight:600!important;line-height:1.75!important;text-align:left!important} /* สิ่งที่จะได้รับ 3 ช่องต่อแถว (4 ช่องแคบจนตัวหนังสือยาวลงมา) · ขั้นตอนเรียงแถวเดียวได้ถึง 5 ขั้น ไม่เหลือเศษลงแถวใหม่ */ #c-page .c-benefits{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))} #c-page .c-steps{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))} /* กล่องข้อมูลต่อท้ายรายการ (กำหนดการรุ่น ฯลฯ) */ #c-page .c-infobox{margin-top:18px;background:linear-gradient(180deg,#f3f7ff,#fff);border:1px solid #d9e4ff;border-left:5px solid var(--x-a);border-radius:18px;padding:20px 24px;color:var(--x-body);font-size:16px;line-height:1.85} #c-page .c-infobox p,#c-page .c-infobox div{margin:0 0 6px} /* รายการติ๊กยาว → 3 คอลัมน์ กระชับ */ #c-page .c-checks--cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px;max-width:none} #c-page .c-checks--cols li{margin:0;padding:10px 14px 10px 46px;font-size:15.5px} #c-page .c-checks--cols li:before{width:22px;height:22px;font-size:12px;left:12px} #c-page .c-text:has(.c-checks--cols){max-width:1100px} /* คำโปรยใต้วิดีโอ อยู่กลาง */ #c-page .c-video+.c-text{text-align:center;margin-top:22px;font-size:18px;color:var(--x-ink)} /* วิทยากร 4 คนต่อแถว · กลุ่มที่สอง (วิทยากร ต่อจากพิธีกร) เว้นระยะ */ #c-page .c-person{flex:0 1 296px} #c-page .c-x__gap{height:56px} /* หัวช่องทางติดต่อ — เบาลง ไม่ตัวหนาใหญ่ */ #c-page .c-x--contact .c-x__head{margin-bottom:30px} #c-page .c-x--contact .c-ct__t{font-size:clamp(18px,1.8vw,22px)!important;font-weight:500!important;line-height:1.6;color:var(--x-body)!important;max-width:720px;margin:0 auto} #c-page .c-x--contact .c-ct__t:after{display:none!important} /* การ์ดวิทยากรแนวตั้ง: วงกลมบน ชื่อกลาง — ชื่อไทยยาวไม่ถูกตัดกลางคำในกล่องแคบ */ #c-page .c-person{flex-direction:column;text-align:center;gap:12px;padding:26px 22px} #c-page .c-person__t{text-align:center} /* หัวข้อบรรยาย 2 คอลัมน์กว้าง ไม่เหลือเศษใบเดียวท้ายแถว */ #c-page .c-mods{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:767px){#c-page .c-mods{grid-template-columns:1fr}} /* ป้ายหัวข้อของรายการ ("ภายในคลาสเรียน:" · "เหมาะสำหรับ:") */ #c-page .c-listlabel{font-family:'Prompt','Noto Sans Thai',sans-serif;font-weight:600;font-size:18px;color:var(--x-ink);margin:26px 0 12px!important} #c-page .c-text>.c-listlabel:first-child{margin-top:0!important} /* รายการย่อยในการ์ดติ๊ก (เช่น ชื่อเอกสารใต้หัวข้อ) — จุดเล็กธรรมดา ไม่ใช่การ์ดซ้อน */ #c-page .c-checks ul{list-style:none;padding:0;margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:6px} #c-page .c-checks ul li{background:var(--x-soft);border:0;border-radius:999px;padding:4px 12px;margin:0;font-size:14px;line-height:1.5} #c-page .c-checks ul li:before{display:none} #c-page .c-checks li>p{margin:0;font-weight:600;color:var(--x-ink)} /* ติ๊กอยู่บรรทัดแรก (การ์ดหลายบรรทัดไม่ลอยกลาง) */ #c-page .c-checks li:before{top:12px;transform:none} #c-page .c-checks--cols li:before{top:10px} /* ขั้นตอน 6 ข้อ = 3 x 2 ไม่เหลือเศษ */ #c-page .c-steps:has(>li:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){#c-page .c-steps:has(>li:nth-child(6)){grid-template-columns:1fr}} /* สิ่งที่ต้องเตรียม = ป้ายเล็ก */ #c-page .c-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto} #c-page .c-chips span{background:#fff;border:1px solid var(--x-line);border-radius:999px;padding:9px 18px;font-size:15.5px;color:var(--x-ink);box-shadow:0 4px 12px rgba(15,27,61,.04)} #c-page .c-chips__note{text-align:center;color:var(--x-body);font-size:15px;margin:22px auto 0;max-width:760px} /* จุดเด่น 4 ข้อ = 4 ช่องแถวเดียว ไม่เหลือเศษ */ @media(min-width:1100px){#c-page .c-feats:has(>.c-feat:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}} /* ชื่อการ์ด (หลักสูตรยอดนิยม ฯลฯ) ขนาดพอดี — กฎ h2.c-h ใน shell-c.css ใหญ่เกิน */ #c-page .c-cardx__t,#c-page h2.c-cardx__t{font-size:19px!important;line-height:1.4} #c-page .c-feat__t,#c-page h2.c-feat__t{font-size:20px!important;line-height:1.4} #c-page .c-plan__t,#c-page h2.c-plan__t{font-size:19px!important;line-height:1.45} /* ป้ายหัว hero ไม่ตัดบรรทัด */ #c-page .c-hero2 .c-eyebrow{white-space:nowrap} /* ============================================================ การ์ดหลักสูตร — ตามภาพตัวอย่างที่ท่านคิวส่ง (22 ต.ค. 2569 "อยากได้ออกแบบประมาณนี้") โปสเตอร์เต็มขอบบน · แผงขาวมุมโค้งซ้อนขอบล่างโปสเตอร์ · ชื่อตัวหนา + คำอธิบายเทา ไอคอนปฏิทิน+วันที่ | ไอคอนนาฬิกา+เวลา แถวเดียว · ป้าย Online + ไอคอนวิดีโอ · ราคาแดงซ้าย + ปุ่มน้ำเงิน "→" ขวา ใช้ HTML เดิมของระบบหลักสูตร (dek-courses.php) จัดด้วย grid — ไม่แตะ PHP ============================================================ */ #c-page .dekc-grid{gap:24px} #c-page .dekc-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"img img" "t t" "d d" "when time" "fmt fmt" "soon soon" "price btn";column-gap:22px;row-gap:0;align-content:start;padding:0 20px 20px;border:1px solid #e6ebf5;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(15,27,61,.08);text-align:left;overflow:hidden;transition:transform .2s,box-shadow .2s} #c-page .dekc-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,27,61,.14)} #c-page .dekc-card>*{min-width:0} #c-page .dekc-img{grid-area:img;position:relative;margin:0 -20px;border-radius:0;aspect-ratio:3/2} #c-page .dekc-img:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:20px;background:#fff;border-radius:20px 20px 0 0} #c-page .dekc-card .dekc-t{grid-area:t;margin:2px 0 4px;padding:0;font-size:18px;font-weight:700;line-height:1.4;color:#0f1b3d} #c-page .dekc-card .dekc-d{grid-area:d;margin:0 0 12px;padding:0;font-size:14px;line-height:1.6;color:#5b6784;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #c-page .dekc-card .dekc-when,#c-page .dekc-card .dekc-tbdtxt{grid-area:when;padding:0;margin:0 0 10px;font-size:14.5px;color:#334155;display:flex;align-items:center;gap:8px;white-space:nowrap} #c-page .dekc-card .dekc-when b{color:#334155;font-weight:500} #c-page .dekc-card .dekc-time{grid-area:time;padding:0;margin:0 0 10px;font-size:14.5px;color:#334155;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #c-page .dekc-card .dekc-when:before,#c-page .dekc-card .dekc-tbdtxt:before,#c-page .dekc-card .dekc-time:before{content:"";flex:none;width:20px;height:20px;background:center/contain no-repeat} #c-page .dekc-card .dekc-when:before,#c-page .dekc-card .dekc-tbdtxt:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M7.5 14h2M11 14h2M14.5 14h2M7.5 17.5h2M11 17.5h2'/%3E%3C/svg%3E")} #c-page .dekc-card .dekc-time:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")} #c-page .dekc-card .dekc-fmt{grid-area:fmt;padding:0;margin:0 0 16px;font-size:14.5px;font-weight:500;color:#334155;display:flex;align-items:center;flex-wrap:wrap;gap:8px} #c-page .dekc-card .dekc-on,#c-page .dekc-card .dekc-off{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.5} #c-page .dekc-card .dekc-on{background:#ffe4e6;color:#e11d48} #c-page .dekc-card .dekc-off{background:#dcfce7;color:#15803d} /* ไอคอนวิดีโอวางต่อท้ายป้าย Online (ข้อความ "ผ่าน Zoom" เป็นตัวหนังสือเปล่า ไม่มีแท็กให้จับ) */ #c-page .dekc-card .dekc-on{position:relative;margin-right:30px} #c-page .dekc-card .dekc-on:after{content:"";position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%232D8CFF'/%3E%3Cpath d='M5.5 8.5h7.5A1.5 1.5 0 0 1 14.5 10v4a1.5 1.5 0 0 1-1.5 1.5H5.5A1.5 1.5 0 0 1 4 14v-4a1.5 1.5 0 0 1 1.5-1.5zM15.5 11l4-2.3v6.6l-4-2.3z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat} #c-page .dekc-card .dekc-price{grid-area:price;align-self:end;padding:0;margin:0;font-size:26px;font-weight:800;line-height:1.1;color:#e11d48;white-space:nowrap} #c-page .dekc-card .dekc-price .dekc-old{color:#94a3b8;font-size:14px} #c-page .dekc-card .dekc-price .dekc-until{color:#e11d48} #c-page .dekc-card>.dekc-btns{grid-area:btn;align-self:end;justify-content:flex-end;margin:0;padding:0} #c-page .dekc-card .dekc-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff!important;font-size:15.5px;font-weight:600;box-shadow:0 10px 22px rgba(29,78,216,.32)} #c-page .dekc-card .dekc-btn:after{content:"→";font-size:16px;line-height:1} #c-page .dekc-card .dekc-btn:hover{transform:none;filter:brightness(1.08)} #c-page .dekc-card>p:not([class]),#c-page .dekc-card>.dekc-note{grid-column:1/-1;margin:0 0 10px;padding:0} #c-page .dekc-gray .dekc-btn{background:#8b8f98;box-shadow:none} #c-page .dekc-gray .dekc-price{color:#64748b} @media(max-width:420px){#c-page .dekc-card .dekc-price{font-size:22px}#c-page .dekc-card .dekc-btn{padding:11px 16px;font-size:14.5px}} /* ปรับ: เปลี่ยนจาก grid เป็น flex ไหลบรรทัด — grid ทำให้คอลัมน์ราคาโดนความกว้างแถววันที่ดัน ปุ่มเหลือที่แคบจนตัดคำ ชื่อ/คำอธิบายจองที่ 2 บรรทัดเท่ากันทุกใบ → แถววันที่และแถวราคาตรงกันทั้งแถว */ #c-page .dekc-card{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;column-gap:18px} #c-page .dekc-card>*{flex:0 0 100%} #c-page .dekc-card .dekc-img{flex:none!important;width:calc(100% + 40px);max-width:none} #c-page .dekc-card .dekc-t{min-height:calc(1.4em * 2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #c-page .dekc-card .dekc-d{min-height:calc(1.6em * 2)} #c-page .dekc-card .dekc-when,#c-page .dekc-card .dekc-tbdtxt,#c-page .dekc-card .dekc-time{flex:0 0 auto} #c-page .dekc-card .dekc-price{flex:1 1 auto;align-self:center;margin-top:2px} #c-page .dekc-card>.dekc-btns{flex:0 0 auto;align-self:center} #c-page .dekc-card .dekc-btn{white-space:nowrap} /* โปสเตอร์ในการ์ดแบบ flex: ล็อกสัดส่วน 3:2 ไม่ให้ขนาดจริงของรูปดันให้สูง (flex item มี min-height:auto) */ #c-page .dekc-card .dekc-img{display:block;height:auto;min-height:0;overflow:hidden;align-self:flex-start;aspect-ratio:3/2} #c-page .dekc-card .dekc-img img{width:100%;height:100%;object-fit:cover;display:block} /* ปรับการ์ด (ท่านคิว 22 ต.ค. 2569): ขอบรูปไม่ต้องมน/ไม่ซ้อนแผงขาว เพราะบังโปสเตอร์ · ตัวหนังสือกระชับ บรรทัดไม่ห่าง */ #c-page .dekc-img:after{display:none} #c-page .dekc-card .dekc-t{margin:14px 0 2px;line-height:1.3;min-height:calc(1.3em * 2)} #c-page .dekc-card .dekc-d{margin:0 0 8px;line-height:1.45;min-height:calc(1.45em * 2)} #c-page .dekc-card .dekc-when,#c-page .dekc-card .dekc-tbdtxt,#c-page .dekc-card .dekc-time{margin:0 0 5px} #c-page .dekc-card .dekc-fmt{margin:0 0 10px} #c-page .dekc-card{padding-bottom:18px} /* คำอธิบายตัวเข้มขึ้น · ชื่อไม่จองที่ 2 บรรทัด เพื่อไม่ให้ห่างจากคำอธิบาย (ท่านคิว 22 ต.ค. 2569) */ #c-page .dekc-card .dekc-t{min-height:0;margin-bottom:0} #c-page .dekc-card .dekc-d{font-weight:600;color:#334155;margin-top:0} /* คำอธิบายเล็กลงและตัวบาง (ท่านคิว 22 ต.ค. 2569) */ #c-page .dekc-card .dekc-d{font-size:13px;font-weight:400;color:#475569} /* ============================================================ ฮีโร่หน้าเนื้อหาหลักสูตร — ตามภาพตัวอย่างรอบ 2 (ท่านคิว 22 ต.ค. 2569) + ชุดไฟล์ deklogistics_web_assets.zip พื้นหลังไล่น้ำเงิน (hero-background.webp ฝังเป็น data URI) · ซ้าย: ป้าย → ชื่อใหญ่ → แถบจุดเด่น → แถบวัน/เวลา/รูปแบบ → ป้ายราคาแดง + ปุ่มขาว · ขวา: โปสเตอร์ ใช้ HTML เดิมจาก dek-courses.php จัดด้วย flex/order ล้วน — ไม่แตะ PHP · ไอคอนสาขาจาก zip (สีฟ้า #38bdf8) ============================================================ */ #c-page .c-x--coursehero{background:url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/0eaf633998.0eaf6339.webp") center/cover no-repeat,#0b1d4a;padding:72px 0 80px} #c-page .dekc-hero{max-width:1560px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center} #c-page .dekc-hero__img{order:2} #c-page .dekc-hero__img img{border-radius:22px;border:1px solid rgba(255,255,255,.2);box-shadow:0 36px 90px rgba(0,0,0,.5)} #c-page .dekc-hero__info{gap:0 20px} #c-page .dekc-hero__t{order:0!important;margin:0 0 26px;font-size:clamp(34px,4.2vw,66px);font-weight:700;line-height:1.12;letter-spacing:-.01em} #c-page .dekc-hero__t:before{content:"อบรมหลักสูตร Dek-logistics";display:block;width:max-content;max-width:100%;margin:0 0 22px;padding:9px 22px 9px 54px;border-radius:999px;border:1.5px solid #38bdf8;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%209l10-5%2010%205-10%205z'%2F%3E%3Cpath%20d%3D'M6%2011.5V16c0%201.5%202.7%203%206%203s6-1.5%206-3v-4.5M22%209v6'%2F%3E%3C%2Fsvg%3E") 20px 50%/24px no-repeat rgba(255,255,255,.04);color:#fff;font:600 17px/1.3 'Noto Sans Thai',sans-serif;letter-spacing:0} /* แถบจุดเด่น */ #c-page .dekc-hero__ul{order:1!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px;margin:0 0 16px;padding:16px 20px;list-style:none;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);border-radius:26px} #c-page .dekc-hero__ul li{display:flex;align-items:center;gap:12px;margin:0;padding:0;color:#fff;font-size:15.5px;font-weight:500;line-height:1.4} #c-page .dekc-hero__ul li:before{content:"";position:static;flex:none;width:46px;height:46px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%205%205L20%207%22%2F%3E%3C%2Fsvg%3E") center/22px no-repeat,linear-gradient(135deg,#2f6fed,#38a1ff);box-shadow:0 8px 18px rgba(0,0,0,.3)} /* แถบวัน/เวลา/รูปแบบ */ #c-page .dekc-hero__lines{order:2!important;margin:0 0 16px;padding:18px 24px 18px 78px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2338bdf8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%2216%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v6M16%203v6M4%2011h16%22%2F%3E%3C%2Fsvg%3E") 24px 18px/38px no-repeat rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);border-radius:26px;color:#fff;font-size:17px;font-weight:600;line-height:1.85} #c-page .dekc-hero__map{order:3!important} /* ราคา + ปุ่ม */ #c-page .dekc-hero__price{order:4!important;position:relative;flex:1 1 0!important;min-width:0;display:flex;align-items:flex-end;margin:0;padding:30px 28px 14px;border-radius:26px;background:linear-gradient(135deg,#e11d48,#f43f5e 60%,#fb7185);box-shadow:0 18px 40px rgba(225,29,72,.38);font-size:clamp(34px,3.6vw,56px);font-weight:800;line-height:1.1} #c-page .dekc-hero__price:before{content:"ราคาเพียง";position:absolute;left:22px;top:-12px;padding:3px 16px;border-radius:999px;background:#fff;color:#e11d48;font:700 14px/1.6 'Noto Sans Thai',sans-serif} #c-page .dekc-hero__price .dekc-now{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;-webkit-text-fill-color:#fff} #c-page .dekc-hero__price .dekc-old{color:#ffe4e6;font-size:.4em;margin-left:12px} #c-page .dekc-hero__info>.dekc-btns{order:5!important;flex:1 1 0!important;display:flex;align-self:stretch} #c-page .dekc-hero .dekc-btns .dekc-btn{flex:1;display:flex;align-items:center;justify-content:center;border-radius:26px;background:#fff;color:#1d4ed8!important;font-size:clamp(22px,2.2vw,32px);font-weight:700;padding:16px 28px;box-shadow:0 18px 40px rgba(0,0,0,.3)} #c-page .dekc-hero__info>p:has(.dekc-badge){order:6!important} #c-page .dekc-hero__alumni{order:7!important;color:#bfe3ff;margin:16px 0 0} #c-page .dekc-hero__info>.dekc-note{order:8!important} #c-page .dekc-hero__regnote{order:9!important;margin:22px 0 0;border-radius:20px} @media(max-width:1000px){ #c-page .c-x--coursehero{padding:36px 0 48px} #c-page .dekc-hero{grid-template-columns:1fr;gap:28px} #c-page .dekc-hero__img{order:0} #c-page .dekc-hero__lines{padding-left:70px;font-size:16px} #c-page .dekc-hero__price,#c-page .dekc-hero__info>.dekc-btns{flex:1 1 100%!important} #c-page .dekc-hero__price{margin-bottom:6px;padding-top:34px} #c-page .dekc-hero__info>.dekc-btns{margin-top:12px} } #c-page .dekc-hero__ul{grid-template-columns:1fr} #c-page .dekc-hero__ul:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))} #c-page .dekc-hero__price{font-size:clamp(28px,2.9vw,46px);white-space:nowrap} #c-page .dekc-hero__map{margin:0 0 14px;color:#9fc0ff} /* ============================================================ ฮีโร่หน้าเนื้อหา รอบ 3 — ปรับให้เหมือนภาพตัวอย่างของท่านคิว (22 ต.ค. 2569) · ขนาดเล็กลง ต้องใช้คู่กับ tools/course-hero.js (ห่อ "รุ่นที่ N" เป็นสีฟ้า · แยกช่องวัน/เวลา/รูปแบบ · ป้ายบนชื่อ) ============================================================ */ #c-page .c-x--coursehero{padding:52px 0 60px} #c-page .dekc-hero{max-width:1500px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px} #c-page .dekc-hero__t{margin:0 0 20px;font-size:clamp(30px,3.4vw,62px);line-height:1.12;background:none;color:#fff;-webkit-text-fill-color:#fff} #c-page .dekc-hero__t:before{content:none;display:none} #c-page .dekc-gen{position:relative;display:inline-block;color:#22c1ff;-webkit-text-fill-color:#22c1ff} #c-page .dekc-gen:after{content:"";position:absolute;left:4%;right:-2%;bottom:-.1em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10C50 3 120 3 198 7' fill='none' stroke='%2322c1ff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat} #c-page .dekc-hero__badge{order:-1!important;flex:0 0 auto!important;width:max-content;max-width:100%;margin:0 0 18px;padding:8px 22px 8px 52px;border:1.5px solid #38bdf8;border-radius:999px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%209l10-5%2010%205-10%205z'%2F%3E%3Cpath%20d%3D'M6%2011.5V16c0%201.5%202.7%203%206%203s6-1.5%206-3v-4.5M22%209v6'%2F%3E%3C%2Fsvg%3E") 18px 50%/24px no-repeat rgba(255,255,255,.04);color:#fff;font:600 16px/1.35 'Noto Sans Thai',sans-serif} #c-page .dekc-hero__badge em{font-style:normal;color:#22c1ff} /* แถบจุดเด่น: แถวเดียว */ #c-page .dekc-hero__ul{display:flex;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:24px} #c-page .dekc-hero__ul li{flex:1 1 0;min-width:0;gap:10px;font-size:14px;line-height:1.35} #c-page .dekc-hero__ul li:before{width:40px;height:40px;background-size:20px,auto} #c-page .dekc-hero__ul.dekc-ul--long{flex-direction:column} #c-page .dekc-hero__ul.dekc-ul--long li{flex:none;font-size:15px} /* แถบวัน/เวลา/รูปแบบ: 3 ช่อง คั่นเส้น */ #c-page .dekc-hero__lines{margin:0 0 14px;padding:16px 8px;background:rgba(255,255,255,.07);border-radius:24px;font-size:16px;line-height:1.4} #c-page .dekc-cells{display:flex;flex-wrap:wrap;gap:12px 0} #c-page .dekc-cell{position:relative;flex:1 1 auto;min-width:0;display:block;padding:0 20px 0 66px;border-left:1.5px solid rgba(255,255,255,.22);font-weight:700;color:#fff} #c-page .dekc-cell:first-child{border-left:0} #c-page .dekc-cell:before{content:"";position:absolute;left:20px;top:50%;width:34px;height:34px;margin-top:-17px;background:center/contain no-repeat} #c-page .dekc-cell--cal:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2338bdf8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%2216%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v6M16%203v6M4%2011h16%22%2F%3E%3C%2Fsvg%3E")} #c-page .dekc-cell--clk:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2338bdf8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l4%202%22%2F%3E%3C%2Fsvg%3E")} #c-page .dekc-cell--vid:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2338bdf8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2213%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m16%2010%205-3v10l-5-3%22%2F%3E%3C%2Fsvg%3E")} #c-page .dekc-cell small{display:block;color:#38bdf8;font-size:14px;font-weight:600;margin-bottom:2px} #c-page .dekc-cell b{font-weight:700;font-size:16px} #c-page .dekc-xl{display:block;padding:8px 24px 0;font-weight:600;font-size:15px} /* ราคา + ปุ่ม: เล็กลง */ #c-page .dekc-hero__price{padding:26px 22px 12px;border-radius:24px;font-size:clamp(28px,2.7vw,48px)} #c-page .dekc-hero__price:before{left:20px;top:-11px;font-size:13px;padding:2px 14px} #c-page .dekc-hero .dekc-btns .dekc-btn{border-radius:24px;font-size:clamp(20px,1.9vw,30px);padding:14px 22px} @media(max-width:1000px){ #c-page .dekc-hero__ul{flex-direction:column} #c-page .dekc-cells{flex-direction:column;gap:14px} #c-page .dekc-cell{border-left:0;padding-left:60px} #c-page .dekc-cell:before{left:6px} #c-page .dekc-hero__lines{padding:16px 14px} } /* 3 ช่องอยู่แถวเดียว (ตามตัวอย่าง) */ #c-page .dekc-cells{flex-wrap:nowrap} #c-page .dekc-cell{flex:1 1 0;padding:0 10px 0 50px} #c-page .dekc-cell:before{left:10px;width:28px;height:28px;margin-top:-14px} #c-page .dekc-cell b{font-size:15px} @media(max-width:1000px){#c-page .dekc-cells{flex-wrap:wrap}#c-page .dekc-cell{flex:1 1 100%}} @media(max-width:1000px){#c-page .dekc-hero{grid-template-columns:minmax(0,1fr);gap:26px}#c-page .dekc-hero__img{order:0}#c-page .dekc-hero__t{font-size:clamp(28px,8vw,44px)}} /* ฉาก logistics ในพื้นหลังฮีโร่ (ท่านคิว 22 ต.ค. 2569 "ภาพพื้นหลัง มีรถ มีเรือด้วย") — วาดเป็น SVG เงาจาง ๆ ซ้อนบนพื้นไล่น้ำเงินจาก zip · ถ้ามีรูปจริงให้เปลี่ยนที่ background นี้ */ #c-page .c-x--coursehero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20340%20110'%20opacity%3D'.5'%3E%3Cg%20fill%3D'%23cfe3ff'%3E%3Cpath%20d%3D'M70%2056L290%2048q40%200%2046%208q-6%208-46%208L70%2062z'%2F%3E%3Cpath%20d%3D'M180%2052L134%2010h22l66%2040z'%2F%3E%3Cpath%20d%3D'M180%2062L134%20104h22l66-40z'%2F%3E%3Cpath%20d%3D'M82%2054L56%2022h20l34%2030z'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%2060H60'%20stroke%3D'%23cfe3ff'%20stroke-width%3D'3'%20stroke-dasharray%3D'8%208'%20opacity%3D'.7'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20860%20300'%20opacity%3D'.34'%3E%3Cpath%20d%3D'M10%20226H850L796%20280H80z'%20fill%3D'%23cfe3ff'%2F%3E%3Crect%20x%3D'110'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'170'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'230'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'290'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'350'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'410'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'470'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'530'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'590'%20y%3D'198'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'110'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'170'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'230'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'290'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'350'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'410'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'470'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'530'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'590'%20y%3D'168'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'170'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'230'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'290'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'350'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'410'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'470'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'530'%20y%3D'138'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'170'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'230'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'290'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'350'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'410'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%237fb0ff'%2F%3E%3Crect%20x%3D'470'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%23b9d6ff'%2F%3E%3Crect%20x%3D'530'%20y%3D'108'%20width%3D'56'%20height%3D'27'%20fill%3D'%236fa3f5'%2F%3E%3Crect%20x%3D'680'%20y%3D'118'%20width%3D'92'%20height%3D'108'%20fill%3D'%239cc4ff'%2F%3E%3Crect%20x%3D'690'%20y%3D'92'%20width%3D'72'%20height%3D'30'%20fill%3D'%23cfe3ff'%2F%3E%3Crect%20x%3D'724'%20y%3D'60'%20width%3D'6'%20height%3D'34'%20fill%3D'%23cfe3ff'%2F%3E%3Cpath%20d%3D'M60%20226V120h8v106M60%20120h110'%20stroke%3D'%239cc4ff'%20stroke-width%3D'6'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20640%20240'%20opacity%3D'.30'%3E%3Cg%20fill%3D'%239cc4ff'%3E%3Crect%20x%3D'20'%20y%3D'40'%20width%3D'392'%20height%3D'132'%20rx%3D'5'%2F%3E%3Cpath%20d%3D'M424%20172V86q0-24%2024-24h66q18%200%2032%2022l34%2052q8%2012%208%2028v28z'%2F%3E%3Crect%20x%3D'20'%20y%3D'168'%20width%3D'620'%20height%3D'14'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M60%2048v112M96%2048v112M132%2048v112M168%2048v112M204%2048v112M240%2048v112M276%2048v112M312%2048v112M348%2048v112M384%2048v112'%20stroke%3D'%230b1d4a'%20stroke-width%3D'3'%20opacity%3D'.5'%2F%3E%3Cpath%20d%3D'M452%2082h52l24%2038h-76z'%20fill%3D'%230b1d4a'%20opacity%3D'.45'%2F%3E%3Cg%20fill%3D'%23cfe3ff'%3E%3Ccircle%20cx%3D'96'%20cy%3D'196'%20r%3D'26'%2F%3E%3Ccircle%20cx%3D'164'%20cy%3D'196'%20r%3D'26'%2F%3E%3Ccircle%20cx%3D'500'%20cy%3D'196'%20r%3D'26'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%230b1d4a'%3E%3Ccircle%20cx%3D'96'%20cy%3D'196'%20r%3D'11'%2F%3E%3Ccircle%20cx%3D'164'%20cy%3D'196'%20r%3D'11'%2F%3E%3Ccircle%20cx%3D'500'%20cy%3D'196'%20r%3D'11'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/0eaf633998.0eaf6339.webp");background-repeat:no-repeat;background-position:right 5% top 56px,right -30px bottom 0,left -40px bottom 18px,center;background-size:300px auto,820px auto,540px auto,cover} #c-page .c-x--coursehero{overflow:hidden} #c-page .dekc-hero__sub{order:0;flex:0 0 100%;margin:0 0 18px;color:#fff} #c-page .dekc-hero__sub span{display:block;font-size:clamp(15px,1.45vw,21px);font-weight:500;line-height:1.5} #c-page .dekc-hero__sub span:first-child{font-weight:600;font-size:clamp(17px,1.7vw,25px)} #c-page .dekc-hero__img{display:block} #c-page .dekc-pts{display:flex;justify-content:space-between;gap:0;margin:26px 4px 0} #c-page .dekc-pt{position:relative;flex:1 1 0;min-width:0;padding:0 14px 0 62px;border-left:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;min-height:46px;color:#fff;font-size:clamp(13px,1.15vw,17px);font-weight:600;line-height:1.35} #c-page .dekc-pt:first-child{border-left:0;padding-left:50px} #c-page .dekc-pt:before{content:"";position:absolute;left:12px;top:50%;width:36px;height:36px;margin-top:-18px;background:center/contain no-repeat} #c-page .dekc-pt:not(:first-child):before{left:14px} #c-page .dekc-pt--1:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%20fill%3D'%23fff'%3E%3Crect%20x%3D'6'%20y%3D'28'%20width%3D'9'%20height%3D'14'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'19'%20y%3D'18'%20width%3D'9'%20height%3D'24'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'32'%20y%3D'6'%20width%3D'9'%20height%3D'36'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E")} #c-page .dekc-pt--2:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%20fill%3D'%23fff'%3E%3Ccircle%20cx%3D'18'%20cy%3D'15'%20r%3D'7'%2F%3E%3Cpath%20d%3D'M4%2040v-4c0-7%206-11%2014-11s14%204%2014%2011v4z'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'17'%20r%3D'5.5'%2F%3E%3Cpath%20d%3D'M36%2026c6%201%2010%205%2010%2011v3h-9v-4c0-4-1-7-4-10z'%2F%3E%3C%2Fsvg%3E")} #c-page .dekc-pt--3:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Cpath%20d%3D'M24%204l17%206v13c0%2011-8%2019-17%2022C15%2042%207%2034%207%2023V10z'%20fill%3D'%23fff'%2F%3E%3Cpath%20d%3D'M16%2024l6%206%2011-12'%20fill%3D'none'%20stroke%3D'%230e2f7a'%20stroke-width%3D'4.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E")} @media(max-width:1000px){#c-page .dekc-pts{flex-direction:column;gap:12px}#c-page .dekc-pt,#c-page .dekc-pt:first-child{border-left:0;padding-left:56px}#c-page .dekc-pt:before,#c-page .dekc-pt:not(:first-child):before{left:6px}#c-page .c-x--coursehero{background-size:200px auto,520px auto,340px auto,cover}} /* จัดวางให้ตรงตัวอย่าง: 2 คอลัมน์เท่ากัน (ซ้าย 715 : โปสเตอร์ 715 ในภาพตัวอย่าง) · ไอคอนแถบจุดเด่นต่างกันทีละข้อ (ซอง/คน/ติ๊ก จาก zip) · กล่องราคากว้างกว่าปุ่ม */ #c-page .dekc-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;max-width:1560px} #c-page .dekc-hero__ul li:nth-child(1):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%207%209-7%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#2f6fed,#38a1ff)} #c-page .dekc-hero__ul li:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020v-2a6%206%200%200%201%2012%200v2M17%205a3%203%200%200%201%200%206M17%2014a5%205%200%200%201%204%205%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#2f6fed,#38a1ff)} #c-page .dekc-hero__ul li:nth-child(n+3):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%205%205L20%207%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#2f6fed,#38a1ff)} #c-page .dekc-hero__ul li:before{background-size:22px,auto;background-position:center,center;background-repeat:no-repeat} #c-page .dekc-hero__price{flex:1.25 1 0!important} #c-page .dekc-hero__info>.dekc-btns{flex:1 1 0!important} @media(max-width:1000px){#c-page .dekc-hero{grid-template-columns:minmax(0,1fr)}} /* CS course reference design — 22 October 2026. Embedded background also works in the WordPress CSS bundle. */ #c-page .c-x--cs-reference{background:#031b46 url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/99404a38f9.99404a38.webp") center center/cover no-repeat;padding:54px 0 60px;min-height:770px;display:flex;align-items:center} #c-page .c-x--cs-reference .c-x__in{width:100%;max-width:1570px;padding:0 28px} #c-page .c-x--cs-reference .c-raw{overflow:visible} #c-page .c-x--cs-reference .dekc-hero{width:100%;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center} #c-page .c-x--cs-reference .dekc-hero__info{min-width:0;gap:0 20px} #c-page .c-x--cs-reference .dekc-hero__badge{font-size:16px;margin-bottom:20px;background-color:rgba(1,24,62,.6);box-shadow:0 0 18px #22c1ff20} #c-page .c-x--cs-reference .dekc-hero__t{font-size:clamp(34px,3.55vw,66px);line-height:1.16;margin-bottom:22px;text-shadow:0 3px 18px #00122b40} #c-page .c-x--cs-reference .dekc-gen{white-space:nowrap} #c-page .c-x--cs-reference .dekc-hero__sub{margin:0 0 24px} #c-page .c-x--cs-reference .dekc-hero__sub span{font-size:clamp(15px,1.2vw,21px)} #c-page .c-x--cs-reference .dekc-hero__sub span:first-child{font-size:clamp(18px,1.55vw,27px)} #c-page .c-x--cs-reference .dekc-hero__ul{display:flex;flex-direction:column;gap:10px;padding:16px 18px;margin-bottom:20px;border:1px solid #66bfff99;background:#072d6380;border-radius:24px} #c-page .c-x--cs-reference .dekc-hero__ul li{flex:none;font-size:14px;line-height:1.45;gap:12px} #c-page .c-x--cs-reference .dekc-hero__ul li:before{width:38px;height:38px;box-shadow:none} #c-page .c-x--cs-reference .dekc-hero__lines{padding:20px 8px;margin:0 0 26px;border:1px solid #d4e5ff66;border-radius:24px;background:#c0d9ff1a} #c-page .c-x--cs-reference .dekc-cells{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0} #c-page .c-x--cs-reference .dekc-cell{flex:1 1 0;padding:0 10px 0 48px;border-left:1px solid #d4e5ff66} #c-page .c-x--cs-reference .dekc-cell:first-child{flex-grow:1.3;border-left:0} #c-page .c-x--cs-reference .dekc-cell:before{left:8px;width:30px;height:30px;margin-top:-15px} #c-page .c-x--cs-reference .dekc-cell small{font-size:14px} #c-page .c-x--cs-reference .dekc-cell b{font-size:14px;line-height:1.5;display:block} #c-page .c-x--cs-reference .dekc-hero__price{flex:1.25 1 0!important;min-height:90px;padding:28px 24px 12px;font-size:clamp(30px,3vw,54px);border:1px solid #ff7798;border-radius:28px;background:linear-gradient(110deg,#ff326d,#e00038);box-shadow:0 16px 36px #ed06432b} #c-page .c-x--cs-reference .dekc-hero__price:before{top:8px;left:22px;font-size:12px;padding:1px 12px} #c-page .c-x--cs-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important;align-self:center;min-width:0} #c-page .c-x--cs-reference .dekc-hero .dekc-btns .dekc-btn{min-height:74px;border-radius:999px;padding:16px 20px;font-size:clamp(20px,1.8vw,30px);box-shadow:0 14px 34px #0084ff40;white-space:nowrap} #c-page .c-x--cs-reference .dekc-hero__img{min-width:0} #c-page .c-x--cs-reference .dekc-hero__img img{border-radius:22px;box-shadow:0 22px 55px #00052666;border:1px solid #b6daff77} #c-page .c-x--cs-reference .dekc-pts{margin-top:38px} #c-page .c-x--cs-reference .dekc-pt{font-size:15px;padding-right:10px;padding-left:52px} #c-page .c-x--cs-reference .dekc-pt:before{width:32px;height:32px;margin-top:-16px;left:10px} #c-page .c-x--cs-reference .dekc-hero__regnote{font-size:13px;line-height:1.65;margin-top:18px;padding:12px 16px} @media(max-width:1100px){ #c-page .c-x--cs-reference{min-height:0;padding:40px 0 48px;background-position:center;background-size:cover} #c-page .c-x--cs-reference .dekc-hero{gap:28px} #c-page .c-x--cs-reference .dekc-hero__t{font-size:36px} #c-page .c-x--cs-reference .dekc-cells{flex-direction:column;gap:12px} #c-page .c-x--cs-reference .dekc-cell{border-left:0} #c-page .c-x--cs-reference .dekc-pts{flex-direction:column;gap:14px;margin-top:24px} #c-page .c-x--cs-reference .dekc-pt,#c-page .c-x--cs-reference .dekc-pt:first-child{border:0;padding-left:48px} #c-page .c-x--cs-reference .dekc-hero__price{font-size:32px;padding-left:16px;padding-right:12px} #c-page .c-x--cs-reference .dekc-hero .dekc-btns .dekc-btn{font-size:20px;padding:14px} } @media(max-width:767px){ #c-page .c-x--cs-reference{padding:30px 0 40px;background-position:60% center} #c-page .c-x--cs-reference .c-x__in{padding:0 20px} #c-page .c-x--cs-reference .dekc-hero{grid-template-columns:minmax(0,1fr);gap:30px} #c-page .c-x--cs-reference .dekc-hero__img{order:2} #c-page .c-x--cs-reference .dekc-hero__t{font-size:clamp(29px,7.4vw,44px)} #c-page .c-x--cs-reference .dekc-hero__badge{font-size:13px;padding-right:14px;padding-left:46px} #c-page .c-x--cs-reference .dekc-hero__ul li{font-size:13px} #c-page .c-x--cs-reference .dekc-hero__price{min-height:86px;flex:1.15 1 0!important;font-size:30px} #c-page .c-x--cs-reference .dekc-hero__info{column-gap:12px} #c-page .c-x--cs-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important;margin-top:0} #c-page .c-x--cs-reference .dekc-hero .dekc-btns .dekc-btn{min-height:66px;font-size:18px;padding:12px 8px} } /* English course reference design — 22 October 2026. Embedded background also works in the WordPress CSS bundle. */ #c-page .c-x--course-reference{background:linear-gradient(90deg,rgba(1,19,52,.53),rgba(2,26,67,.34) 50%,rgba(8,52,123,.22)),linear-gradient(0deg,rgba(2,26,68,.72),transparent 40%),url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/99404a38f9.99404a38.webp") center center/cover no-repeat;padding:54px 0 60px;min-height:770px;display:flex;align-items:center} #c-page .c-x--course-reference .c-x__in{width:100%;max-width:1570px;padding:0 28px} #c-page .c-x--course-reference .c-raw{overflow:visible} #c-page .c-x--course-reference .dekc-hero{width:100%;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center} #c-page .c-x--course-reference .dekc-hero__info{min-width:0;gap:0 20px} #c-page .c-x--course-reference .dekc-hero__badge{font-size:16px;margin-bottom:20px;background-color:rgba(1,24,62,.6);box-shadow:0 0 18px #22c1ff20} #c-page .c-x--course-reference .dekc-hero__t{font-size:clamp(34px,3.55vw,66px);line-height:1.16;margin-bottom:22px;text-shadow:0 3px 18px #00122b40} #c-page .c-x--course-reference .dekc-gen{white-space:nowrap} #c-page .c-x--course-reference .dekc-hero__sub{margin:0 0 24px} #c-page .c-x--course-reference .dekc-hero__sub span{font-size:clamp(15px,1.2vw,21px)} #c-page .c-x--course-reference .dekc-hero__sub span:first-child{font-size:clamp(18px,1.55vw,27px)} #c-page .c-x--course-reference .dekc-hero__ul{display:flex;flex-direction:column;gap:10px;padding:16px 18px;margin-bottom:20px;border:1px solid #66bfff99;background:#072d6380;border-radius:24px} #c-page .c-x--course-reference .dekc-hero__ul li{flex:none;font-size:14px;line-height:1.45;gap:12px} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:38px;height:38px;box-shadow:none} #c-page .c-x--course-reference .dekc-hero__lines{padding:20px 8px;margin:0 0 26px;border:1px solid #d4e5ff66;border-radius:24px;background:#c0d9ff1a} #c-page .c-x--course-reference .dekc-cells{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0} #c-page .c-x--course-reference .dekc-cell{flex:1 1 0;padding:0 10px 0 48px;border-left:1px solid #d4e5ff66} #c-page .c-x--course-reference .dekc-cell:first-child{flex-grow:1.3;border-left:0} #c-page .c-x--course-reference .dekc-cell:before{left:8px;width:30px;height:30px;margin-top:-15px} #c-page .c-x--course-reference .dekc-cell small{font-size:14px} #c-page .c-x--course-reference .dekc-cell b{font-size:14px;line-height:1.5;display:block} #c-page .c-x--course-reference .dekc-hero__price{flex:1.25 1 0!important;min-height:90px;padding:28px 24px 12px;font-size:clamp(30px,3vw,54px);border:1px solid #ff7798;border-radius:28px;background:linear-gradient(110deg,#ff326d,#e00038);box-shadow:0 16px 36px #ed06432b} #c-page .c-x--course-reference .dekc-hero__price:before{top:8px;left:22px;font-size:12px;padding:1px 12px} #c-page .c-x--course-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important;align-self:center;min-width:0} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:74px;border-radius:999px;padding:16px 20px;font-size:clamp(20px,1.8vw,30px);box-shadow:0 14px 34px #0084ff40;white-space:nowrap} #c-page .c-x--course-reference .dekc-hero__img{min-width:0} #c-page .c-x--course-reference .dekc-hero__img img{border-radius:22px;box-shadow:0 22px 55px #00052666;border:1px solid #b6daff77} #c-page .c-x--course-reference .dekc-pts{margin-top:38px} #c-page .c-x--course-reference .dekc-pt{font-size:15px;padding-right:10px;padding-left:52px} #c-page .c-x--course-reference .dekc-pt:before{width:32px;height:32px;margin-top:-16px;left:10px} #c-page .c-x--course-reference .dekc-hero__regnote{font-size:13px;line-height:1.65;margin-top:18px;padding:12px 16px} @media(max-width:1100px){ #c-page .c-x--course-reference{min-height:0;padding:40px 0 48px;background-position:center;background-size:cover} #c-page .c-x--course-reference .dekc-hero{gap:28px} #c-page .c-x--course-reference .dekc-hero__t{font-size:36px} #c-page .c-x--course-reference .dekc-cells{flex-direction:column;gap:12px} #c-page .c-x--course-reference .dekc-cell{border-left:0} #c-page .c-x--course-reference .dekc-pts{flex-direction:column;gap:14px;margin-top:24px} #c-page .c-x--course-reference .dekc-pt,#c-page .c-x--course-reference .dekc-pt:first-child{border:0;padding-left:48px} #c-page .c-x--course-reference .dekc-hero__price{font-size:32px;padding-left:16px;padding-right:12px} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{font-size:20px;padding:14px} } @media(max-width:767px){ #c-page .c-x--course-reference{padding:30px 0 40px;background-position:60% center} #c-page .c-x--course-reference .c-x__in{padding:0 20px} #c-page .c-x--course-reference .dekc-hero{grid-template-columns:minmax(0,1fr);gap:30px} #c-page .c-x--course-reference .dekc-hero__img{order:2} #c-page .c-x--course-reference .dekc-hero__t{font-size:clamp(29px,7.4vw,44px)} #c-page .c-x--course-reference .dekc-hero__badge{font-size:13px;padding-right:14px;padding-left:46px} #c-page .c-x--course-reference .dekc-hero__ul li{font-size:13px} #c-page .c-x--course-reference .dekc-hero__price{min-height:86px;flex:1.15 1 0!important;font-size:30px} #c-page .c-x--course-reference .dekc-hero__info{column-gap:12px} #c-page .c-x--course-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important;margin-top:0} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:66px;font-size:18px;padding:12px 8px} } /* Match the English reference: one feature row, translucent panels, clear price and CTA. */ #c-page .c-x--course-reference{background-color:#031b46;min-height:770px} #c-page .c-x--course-reference .dekc-hero__ul{flex-direction:row;gap:14px;padding:14px 12px;background:rgba(7,38,85,.58)} #c-page .c-x--course-reference .dekc-hero__ul li{flex:1 1 0;min-width:0;font-size:14px;gap:9px} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:44px;height:44px} #c-page .c-x--course-reference .dekc-hero__lines{background:rgba(126,163,221,.16)} #c-page .c-x--course-reference .dekc-hero__img{align-self:center} #c-page .c-x--course-reference .dekc-hero__t{font-size:clamp(34px,3.75vw,70px)} #c-page .c-x--course-reference .dekc-hero__regnote{background:rgba(8,32,70,.76)} @media(max-width:1250px){#c-page .c-x--course-reference .dekc-hero__ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){#c-page .c-x--course-reference{background-position:center,center,60% center}#c-page .c-x--course-reference .dekc-hero__ul{grid-template-columns:1fr}#c-page .c-x--course-reference .dekc-hero__t{font-size:clamp(30px,7.6vw,44px)}} /* English reference v2 — reconstructed original camera angles and restrained poster frame. */ #c-page .c-x--course-reference{background:#041d47 url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/6337a54569.6337a545.webp") center/cover no-repeat;padding:54px 0 58px;min-height:775px} #c-page .c-x--course-reference .dekc-hero__img img{border:0.5px solid rgba(255,255,255,.45);box-shadow:0 7px 24px rgba(0,12,36,.22);border-radius:22px;background:#fff} #c-page .c-x--course-reference .dekc-hero__ul{border-color:rgba(91,190,255,.85);background:rgba(7,36,81,.52);border-radius:25px} #c-page .c-x--course-reference .dekc-hero__ul li:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22m3%206%209%207%209-7%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#2460ff,#349fff)} #c-page .c-x--course-reference .dekc-hero__ul li:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%201-8%208H8l-5%203%201-6a8%208%200%201%201%2016-5Z%22%2F%3E%3Cpath%20d%3D%22M8%2011h.01M12%2011h.01M16%2011h.01%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#268cff,#399aff)} #c-page .c-x--course-reference .dekc-hero__ul li:nth-child(3):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h8l4%204v16H6zM14%202v5h4M9%2011h6M9%2015h6M9%2018h6%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#268cff,#399aff)} #c-page .c-x--course-reference .dekc-hero__ul li:nth-child(4):before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h19M6%2016l5-6%204%203%206-9M16%204h5v5M7%2019v-2M12%2019v-4M17%2019v-6%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(135deg,#268cff,#399aff)} #c-page .c-x--course-reference .dekc-hero__lines{background:rgba(150,178,231,.15);border-color:rgba(220,235,255,.55)} #c-page .c-x--course-reference .dekc-hero__price{background:linear-gradient(110deg,#ff326d,#e00038);box-shadow:none} #c-page .c-x--course-reference .dekc-hero__badge{box-shadow:-4px 0 12px rgba(66,226,255,.36);border-color:#79e8ff;background-color:rgba(0,26,57,.5)} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{color:#0650fa!important;box-shadow:0 10px 24px rgba(0,131,255,.25)} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn:after{content:'›';color:#ff174f;margin-left:10px;font-size:1.3em;line-height:1} #c-page .english-registration-note{max-width:1000px;margin:0 auto 32px;padding:16px 22px;background:#edf3ff;border:1px solid #d7e4fa;border-radius:16px;color:#334155;font-size:14px;line-height:1.7} @media(min-width:1600px){ #c-page .c-x--course-reference .c-x__in{max-width:1490px;padding:0;transform:translateX(-42px)} #c-page .c-x--course-reference .dekc-hero{gap:52px;align-items:start} #c-page .c-x--course-reference .dekc-hero__badge{margin-left:52px;margin-bottom:12px;font-size:18px;padding-top:12px;padding-bottom:12px} #c-page .c-x--course-reference .dekc-hero__t{padding-left:52px;font-size:76px;line-height:1.18;margin-bottom:25px;letter-spacing:-.02em} #c-page .c-x--course-reference .dekc-hero__sub{padding-left:52px;margin-bottom:34px} #c-page .c-x--course-reference .dekc-hero__sub span:first-child{font-size:27px;line-height:1.4} #c-page .c-x--course-reference .dekc-hero__sub span{font-size:22px;line-height:1.5} #c-page .c-x--course-reference .dekc-hero__ul{padding:14px 12px;margin-bottom:24px;gap:14px;min-height:80px} #c-page .c-x--course-reference .dekc-hero__ul li{font-size:14px;line-height:1.4;gap:10px} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:48px;height:48px} #c-page .c-x--course-reference .dekc-hero__lines{min-height:94px;display:flex;align-items:center;padding:20px 12px;margin-bottom:24px} #c-page .c-x--course-reference .dekc-cells{width:100%} #c-page .c-x--course-reference .dekc-cell{padding-left:60px} #c-page .c-x--course-reference .dekc-cell:before{width:36px;height:36px;margin-top:-18px;left:12px} #c-page .c-x--course-reference .dekc-cell b{font-size:16px} #c-page .c-x--course-reference .dekc-cell small{font-size:16px} #c-page .c-x--course-reference .dekc-hero__price{flex:1.25 1 0!important;min-height:104px;font-size:56px;padding:32px 24px 10px} #c-page .c-x--course-reference .dekc-hero__price:before{font-size:14px;top:10px} #c-page .c-x--course-reference .dekc-hero__info{column-gap:20px} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{font-size:28px;min-height:78px} #c-page .c-x--course-reference .dekc-hero__img{padding-top:55px;align-self:start} #c-page .c-x--course-reference .dekc-pts{margin:44px 4px 0} #c-page .c-x--course-reference .dekc-pt{font-size:17px;min-height:50px} } @media(max-width:767px){#c-page .c-x--course-reference{background-position:60% center}#c-page .c-x--course-reference .dekc-hero__img img{border-radius:18px}#c-page .c-x--course-reference .dekc-hero__ul{display:grid;grid-template-columns:1fr}} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn:after{content:none} @media(min-width:1600px){ #c-page .c-x--course-reference .c-x__in{transform:translateX(-34px)} #c-page .c-x--course-reference .dekc-hero__sub{margin-bottom:22px} #c-page .c-x--course-reference .dekc-hero__ul{height:80px;min-height:80px} #c-page .c-x--course-reference .dekc-hero__ul li:first-child{flex-grow:.85} #c-page .c-x--course-reference .dekc-hero__ul li:nth-child(3){flex-grow:.95} #c-page .c-x--course-reference .dekc-hero__ul li:nth-child(4){flex-grow:1.25} #c-page .c-x--course-reference .dekc-hero__price{flex:0 0 54.3%!important} #c-page .c-x--course-reference .dekc-hero__img{padding-top:47px} #c-page .c-x--course-reference .dekc-hero__img img{aspect-ratio:1.525;object-fit:cover} } /* Soft blue light along the bottom of the English reference hero. */ #c-page .c-x--course-reference{position:relative;isolation:isolate} #c-page .c-x--course-reference:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 540px 225px at 82% 106%,rgba(58,145,255,.8) 0%,rgba(27,115,255,.48) 38%,rgba(18,91,239,.12) 65%,transparent 85%),radial-gradient(ellipse 850px 180px at 59% 108%,rgba(23,91,222,.38),transparent 78%);filter:blur(24px);mix-blend-mode:screen} #c-page .c-x--course-reference .c-x__in{position:relative;z-index:1} @media(max-width:767px){#c-page .c-x--course-reference:before{background:radial-gradient(ellipse 420px 240px at 95% 102%,rgba(45,130,255,.62),transparent 80%);filter:blur(20px)}} /* Shared course style: discreet poster hairline and price without a label. */ #c-page .c-x--course-reference .dekc-hero__img img{border:0!important;outline:.5px solid rgba(255,255,255,.2);outline-offset:-.5px;background:transparent;box-shadow:0 7px 24px rgba(0,12,36,.22);height:auto;aspect-ratio:auto;object-fit:contain} #c-page .c-x--course-reference .dekc-hero__price:before{content:none!important;display:none!important} #c-page .c-x--course-reference .dekc-hero__price{padding-top:16px;padding-bottom:16px;align-items:center;justify-content:flex-start} #c-page .c-x--course-reference .dekc-hero__t{line-height:1.18;overflow-wrap:anywhere} #c-page .c-x--course-reference .dekc-hero__t.dekc-title--long{font-size:clamp(30px,3vw,56px)} #c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long{display:flex;flex-direction:column;height:auto;min-height:0} #c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long li{flex:none;font-size:14px;line-height:1.45} #c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--many:not(.dekc-ul--long){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:0} #c-page .c-x--course-reference .dekc-cell b{overflow-wrap:anywhere} #c-page .c-x--course-reference .dekc-hero__map{color:#b7d8ff;font-size:14px} @media(max-width:1100px){#c-page .c-x--course-reference .dekc-hero__price{flex:1.15 1 0!important;font-size:clamp(26px,3vw,34px)}#c-page .c-x--course-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important}} @media(max-width:767px){#c-page .c-x--course-reference .dekc-hero__t.dekc-title--long{font-size:30px}#c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--many:not(.dekc-ul--long){grid-template-columns:1fr}} #c-page .c-x--course-reference .dekc-btn{text-decoration:none!important} /* Fit the complete course introduction into the opening viewport. */ #c-page .c-x--course-reference{height:calc(100svh - var(--course-header-height,72px));min-height:0;padding:clamp(16px,3svh,32px) 0;align-items:center;display:flex} #c-page .c-x--course-reference .c-x__in{width:100%;max-width:1540px;padding:0 28px;transform:none;height:var(--course-fitted-height,auto)} #c-page .c-x--course-reference .dekc-hero{gap:clamp(24px,3vw,46px);align-items:center;transform:scale(var(--course-fit,1));transform-origin:top center} #c-page .c-x--course-reference .dekc-hero__badge{margin:0 0 14px;padding-top:9px;padding-bottom:9px;font-size:clamp(13px,1.9svh,17px)} #c-page .c-x--course-reference .dekc-hero__t{padding-left:0;font-size:clamp(32px,6.7svh,64px);line-height:1.18;margin:0 0 18px;letter-spacing:-.02em} #c-page .c-x--course-reference .dekc-hero__t.dekc-title--long{font-size:clamp(30px,5.4svh,50px)} #c-page .c-x--course-reference .dekc-hero__sub{padding-left:0;margin:0 0 20px} #c-page .c-x--course-reference .dekc-hero__sub span{font-size:clamp(14px,2.1svh,19px);line-height:1.45} #c-page .c-x--course-reference .dekc-hero__sub span:first-child{font-size:clamp(16px,2.5svh,23px)} #c-page .c-x--course-reference .dekc-hero__ul{height:auto;min-height:0;padding:12px;margin:0 0 18px;gap:10px;border-radius:20px} #c-page .c-x--course-reference .dekc-hero__ul li,#c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long li{font-size:13px;line-height:1.45;gap:10px} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:36px;height:36px;background-size:20px,auto} #c-page .c-x--course-reference .dekc-hero__lines{min-height:0;padding:14px 8px;margin:0 0 18px;border-radius:20px} #c-page .c-x--course-reference .dekc-cell{padding:0 8px 0 44px} #c-page .c-x--course-reference .dekc-cell:before{left:8px;width:28px;height:28px;margin-top:-14px} #c-page .c-x--course-reference .dekc-cell small{font-size:13px} #c-page .c-x--course-reference .dekc-cell b{font-size:14px;line-height:1.45} #c-page .c-x--course-reference .dekc-hero__price{min-height:72px;font-size:clamp(30px,5.5svh,50px);padding:12px 20px;border-radius:23px} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:64px;font-size:clamp(21px,3svh,28px);padding:12px 16px} #c-page .c-x--course-reference .dekc-hero__img{padding-top:0;align-self:center} #c-page .c-x--course-reference .dekc-hero__img img{max-height:calc(100svh - var(--course-header-height,72px) - 140px);width:100%;outline-color:rgba(255,255,255,.21)} #c-page .c-x--course-reference .dekc-pts{margin:24px 0 0} #c-page .c-x--course-reference .dekc-pt{font-size:14px;min-height:42px;padding-left:46px} @media(min-width:768px) and (max-width:1100px){#c-page .c-x--course-reference .dekc-hero{grid-template-columns:1fr 1fr}#c-page .c-x--course-reference .dekc-hero__t{font-size:36px}#c-page .c-x--course-reference .dekc-hero__ul{display:flex;flex-direction:column}} @media(max-width:767px){ #c-page .c-x--course-reference{padding:12px 0} #c-page .c-x--course-reference .c-x__in{padding:0 16px} #c-page .c-x--course-reference .dekc-hero{grid-template-columns:minmax(0,1fr);gap:14px} #c-page .c-x--course-reference .dekc-hero__info{order:0;column-gap:12px} #c-page .c-x--course-reference .dekc-hero__img{order:2;display:flex;flex-direction:column;align-items:center} #c-page .c-x--course-reference .dekc-hero__img img{max-height:22svh;width:auto;max-width:100%;border-radius:12px} #c-page .c-x--course-reference .dekc-hero__badge{font-size:12px;padding:6px 12px 6px 38px;background-size:18px;background-position:12px center;margin-bottom:10px} #c-page .c-x--course-reference .dekc-hero__t,#c-page .c-x--course-reference .dekc-hero__t.dekc-title--long{font-size:27px;margin-bottom:10px} #c-page .c-x--course-reference .dekc-hero__sub{margin-bottom:12px} #c-page .c-x--course-reference .dekc-hero__sub span{font-size:12px} #c-page .c-x--course-reference .dekc-hero__sub span:first-child{font-size:14px} #c-page .c-x--course-reference .dekc-hero__ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:9px;gap:8px;margin-bottom:12px;border-radius:16px} #c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long{display:flex} #c-page .c-x--course-reference .dekc-hero__ul li,#c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long li{font-size:11px;gap:7px;line-height:1.4} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:27px;height:27px;background-size:16px,auto} #c-page .c-x--course-reference .dekc-cells{flex-direction:row;gap:0} #c-page .c-x--course-reference .dekc-cell{padding:0 6px;border-left:1px solid #d4e5ff55} #c-page .c-x--course-reference .dekc-cell:first-child{border-left:0} #c-page .c-x--course-reference .dekc-cell:before{display:none} #c-page .c-x--course-reference .dekc-cell small{font-size:10px} #c-page .c-x--course-reference .dekc-cell b{font-size:11px} #c-page .c-x--course-reference .dekc-hero__lines{padding:9px 5px;margin-bottom:12px;border-radius:15px} #c-page .c-x--course-reference .dekc-hero__price{min-height:54px;font-size:28px;padding:8px 12px;border-radius:18px} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:50px;font-size:18px;padding:8px} #c-page .c-x--course-reference .dekc-pts{flex-direction:row;gap:0;margin-top:12px;width:100%} #c-page .c-x--course-reference .dekc-pt,#c-page .c-x--course-reference .dekc-pt:first-child{font-size:10px;line-height:1.4;min-height:32px;padding:0 5px 0 26px} #c-page .c-x--course-reference .dekc-pt:before,#c-page .c-x--course-reference .dekc-pt:not(:first-child):before{left:3px;width:18px;height:18px;margin-top:-9px} } /* Reference navy tone: filter the scenery only, preserving full-color content. */ #c-page .c-x--course-reference:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,15,43,.36) 0%,rgba(1,20,52,.29) 48%,rgba(3,29,71,.14) 76%,rgba(3,24,60,.12) 100%),linear-gradient(0deg,rgba(1,18,48,.28),rgba(1,18,48,.08) 42%,transparent 72%)} #c-page .c-x--course-reference:before{opacity:.52} #c-page .c-x--course-reference .c-x__in{position:relative;z-index:1} /* Layout review: scoped to non-course pages, preserving the course design. */ :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)){min-width:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-psec{padding:clamp(32px,4vw,64px) 0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__in,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-wrap{max-width:1440px;width:100%;margin-inline:auto;padding-inline:clamp(20px,3vw,44px)} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2{padding:clamp(48px,5.5vw,80px) 0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2 .c-x__in{max-width:1140px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2 .c-hero2__t{font-size:clamp(30px,4vw,54px);line-height:1.3;max-width:1000px;margin:0 auto 18px;text-wrap:balance} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2 .c-eyebrow{margin-bottom:18px;font-size:13px;line-height:1.6;padding:7px 18px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2 .c-hero2__lead{max-width:880px;font-size:clamp(16px,1.5vw,20px);text-wrap:balance} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head{max-width:1000px;margin-bottom:32px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head .c-h{font-size:clamp(25px,2.8vw,36px);text-wrap:balance} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-text{max-width:960px;line-height:1.85} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-text--long{max-width:1000px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-text p:empty,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-text:empty{display:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-actions{margin-top:24px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feats,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-cards,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-benefits,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;align-items:stretch} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feat,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-cardx,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2__c,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-plan{min-width:0;padding:26px;overflow-wrap:anywhere} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feat__n{font-size:34px;margin-bottom:14px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2__c{height:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2__c span{margin-top:auto;padding-top:12px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ct{max-width:1120px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-faq{max-width:1000px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;max-width:1280px;margin-inline:auto} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-contact>*{min-width:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-contact__map{min-height:410px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ci{min-width:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ci span{min-width:0;overflow-wrap:anywhere} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-phero{text-align:center;padding:40px 0 28px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-phero h1{max-width:1100px;margin:0 auto;font-size:clamp(28px,3.5vw,44px);line-height:1.35} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-card.c-raw{border:1px solid #e3e8f2;border-radius:24px;padding:28px;background:#fff;box-shadow:0 10px 32px #0f1b3d08} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw #main,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .site-main{width:100%;max-width:none;margin:0;float:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw:has(.login-form-wrapper),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw:has(.register-form-wrapper){width:100%;max-width:580px;margin-inline:auto;padding:30px;border:1px solid #e3e8f2;border-radius:24px;background:#fff;box-shadow:0 10px 32px #0f1b3d08;overflow:visible} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw input[type=hidden]{display:none!important} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .form-group,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .cmb-row{margin:0 0 18px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .form-group>label,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .cmb-th{display:block;font-weight:600;font-size:14px;margin:0 0 7px;color:#25334e} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .show_hide_password,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .show_hide_password_wrapper{display:block;position:relative} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw select,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw textarea{width:100%;max-width:none;margin:0;padding:12px 14px;font:inherit;min-height:46px;box-sizing:border-box} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw input[type=checkbox],:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw input[type=radio]{width:17px;height:17px;min-height:0;padding:0;margin:2px 8px 0 0;flex:none;accent-color:#2f6fed} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw label:has(input[type=checkbox]),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw label:has(input[type=radio]){display:flex;align-items:flex-start;font-size:13px;line-height:1.7;font-weight:400} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .row.info{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .row.info .col-6{flex:0 1 auto} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .btn[type=submit],:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .button-primary,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw input[type=submit]{width:100%;max-width:none;min-height:46px;border:0;border-radius:12px;background:linear-gradient(120deg,#2563eb,#6654f4);color:#fff;font:600 15px 'Noto Sans Thai',sans-serif;cursor:pointer} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .google-login-btn,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .wjbp-google-role-btn{display:flex;justify-content:center;align-items:center;padding:12px 16px;border:1px solid #dce3f0;border-radius:12px;color:#25334e;text-decoration:none;background:white} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .line-header{text-align:center;color:#7b8497;margin:18px 0;font-size:13px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .forgotpassword-form-wrapper{display:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .login-form-wrapper.is-reset>.form-container:not(.forgotpassword-form-wrapper){display:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .login-form-wrapper.is-reset>.forgotpassword-form-wrapper{display:block} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .role-tabs{display:flex;gap:6px;list-style:none;padding:5px;margin:0 0 24px;background:#f1f5fc;border-radius:13px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .role-tabs li{flex:1;margin:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .role-tabs a{display:block;text-align:center;padding:10px 8px;color:#667085;text-decoration:none;font-weight:600;border-radius:10px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .role-tabs a.active{color:#2058d5;background:#fff;box-shadow:0 2px 8px #1f355c10} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .tab-pane:not(.active){display:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .wjbp-google-role-buttons{margin-top:20px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .required{color:#de315b} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .lostpassword-link{margin-top:18px;text-align:center} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .top-info-user{margin-bottom:22px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .top-info-user h3{margin:0 0 8px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw:has(.employers-wrapper,.candidates-wrapper){padding:0;border:0;background:transparent;box-shadow:none;overflow:visible} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:24px;padding:16px 20px;background:#fff;border:1px solid #e3e8f2;border-radius:16px;font-size:14px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper .results-count{margin-right:auto;color:#667085} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper form{display:flex;margin:0;max-width:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper select{min-width:150px;max-width:100%;font-size:14px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .items-wrapper>.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .items-wrapper>.row>div{width:auto;max-width:none;min-width:0;padding:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-card,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-card{height:100%;border:1px solid #e3e8f2;border-radius:22px;padding:26px;background:#fff;position:relative;text-align:center} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-grid,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-grid{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-information{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;width:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-logo,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-logo{width:88px;height:88px;display:grid;place-items:center;background:#f5f7fb;border-radius:18px;overflow:hidden} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-logo img,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-logo img{width:88px;height:88px;object-fit:contain;display:block} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-title,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-title{font-size:18px;line-height:1.5;margin:0;color:#182640;overflow-wrap:anywhere} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .employer-title a,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-title a{color:inherit;text-decoration:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .wrapper-open-job,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-link{margin-top:auto;padding-top:6px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .open-job,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .candidate-link a{display:inline-flex;padding:9px 16px;border-radius:10px;background:#edf3ff;color:#245bd3;font-size:13px;text-decoration:none;font-weight:600} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .btn-follow{position:absolute;top:12px;right:14px;font-size:11px;color:#667085;text-decoration:none} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .pagination{display:flex;justify-content:center;gap:8px;list-style:none;margin:28px 0 0;padding:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .page-numbers{display:grid;place-items:center;min-width:38px;min-height:38px;padding:6px;border:1px solid #e3e8f2;background:#fff;border-radius:10px;text-decoration:none;color:#44506b} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .page-numbers.current{background:#2f6fed;color:#fff;border-color:#2f6fed} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-card.c-raw:not(:has(form,article,iframe,img)){max-width:960px;margin-inline:auto;text-align:center;padding:40px 24px} .c-body>.c-wrap.c-note{max-width:960px;margin:44px auto 64px;padding:44px 32px;border:1px solid #e3e8f2;border-radius:26px;background:#fff;min-height:320px;box-shadow:0 12px 40px #10234908} .c-body>.c-wrap.c-note p{max-width:720px;margin-inline:auto;line-height:1.9;overflow-wrap:anywhere} .c-body>.c-wrap.c-note .c-btn{margin:4px} .c-board>.c-wrap>.dek-landing-head:has(+ #dek-board .dek-landing-head){display:none} #dek-board #coModal.is-solo .co-grid>.co-col:last-child{align-self:start;height:auto;max-height:100%} #dek-board #coModal.is-solo .co-grid>.co-col:last-child .co-col__body{flex:0 1 auto;max-height:60vh} .c-layout-home .c-hero{padding-top:48px} .c-layout-home .c-hero h1{font-size:clamp(32px,3.4vw,52px)} .c-layout-home .c-sec:not(.c-board)>.c-wrap{max-width:1440px} @media(max-width:1000px){:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .items-wrapper>.row{grid-template-columns:repeat(2,minmax(0,1fr))}:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-contact{grid-template-columns:1fr}:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-contact__map{min-height:300px;height:320px}:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feats,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-cards,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){ :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-psec{padding:30px 0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-hero2{padding:42px 0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__in,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-wrap{padding-inline:18px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head{margin-bottom:24px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feats,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-cards,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .items-wrapper>.row{grid-template-columns:minmax(0,1fr)} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-feat,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-cardx,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-svc2__c,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-plan{padding:22px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw:has(.login-form-wrapper),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw:has(.register-form-wrapper){padding:22px 18px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper{padding:14px;gap:12px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper .results-count{width:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper form,:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-ordering-wrapper{width:100%} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .jobs-alert-ordering-wrapper select{width:100%;min-width:0} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ci{padding:16px;gap:12px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ci b{font-size:14px} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-ci__ico{flex-shrink:0} .c-body>.c-wrap.c-note{margin:24px 16px 40px;padding:30px 20px} .c-body>.c-wrap.c-note h1{font-size:26px} } /* Standalone job details: keep the mobile document as wide and tall as its visible content. */ .c-board>.c-wrap>.dek-page-intro img{max-width:100%;height:auto} @media(max-width:900px){ .c-body:has(#coModal.is-page.is-open)>.c-hd,.c-body:has(#coModal.is-page.is-open)>.c-ft{display:none} .c-body:has(#coModal.is-page.is-open) .c-board{padding:0} .c-body:has(#coModal.is-page.is-open) .c-board>.c-wrap{padding:0;max-width:none} .c-body:has(#coModal.is-page.is-open) .c-board>.c-wrap>.dek-page-intro{display:none} #dek-board:has(#coModal.is-page.is-open){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #dek-board:has(#coModal.is-page.is-open)>.board-wrap{display:none} #dek-board #coModal.is-page.is-open{position:relative;inset:auto;width:100%;height:auto;min-height:100svh;padding:12px;overflow:visible} #dek-board #coModal.is-page.is-open .modal__box{width:100%;max-width:100%;margin:0;box-sizing:border-box} } :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .form-group>label:has(input[type=checkbox]){display:block} :is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-raw .form-group>label>input[type=checkbox]{vertical-align:middle;margin-right:8px} @media(max-width:600px){ #dek-board #coModal .jd__headtop{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px} #dek-board #coModal .jd__logo{grid-column:1;grid-row:1;width:48px;height:48px} #dek-board #coModal .jd__main{grid-column:1/-1;grid-row:2;min-width:0;width:100%} #dek-board #coModal .jd__icons{grid-column:2;grid-row:1;justify-self:end;align-self:start;display:flex} #dek-board #coModal .jd__title{font-size:18px;line-height:1.45;overflow-wrap:anywhere} #dek-board #coModal .jd__coname{max-width:100%;text-align:left} #dek-board #coModal .jd__cta{display:flex;flex-direction:column;align-items:stretch;gap:12px} #dek-board #coModal .jd__salary{white-space:nowrap;gap:8px} #dek-board #coModal .jd__apply{width:100%;justify-content:center;font-size:13px;min-height:44px} } /* A section containing only a device-hidden variant should not leave its padding behind. */ @media(min-width:1025px){:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x:has(>.c-x__in>.c-off-d:only-child),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head:has(>.c-off-d:only-child){display:none}} @media(min-width:768px) and (max-width:1024px){:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x:has(>.c-x__in>.c-off-t:only-child),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head:has(>.c-off-t:only-child){display:none}} @media(max-width:767px){:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x:has(>.c-x__in>.c-off-m:only-child),:is(#c-page.c-layout-page,#c-page:has(>.c-layout-section)) .c-x__head:has(>.c-off-m:only-child){display:none}} /* One shared transparent header: the page surface continues behind the navigation. */ .c-body{--site-header-height:72px} .c-body .c-hd{position:sticky;top:0;z-index:50;width:100%;height:0;padding:0;background:transparent;border:0;box-shadow:none} .c-body .c-hd .c-bar{max-width:1840px;height:var(--site-header-height);margin:0 auto;padding:12px clamp(20px,3vw,40px);gap:24px;background:transparent;backdrop-filter:none;border:0;border-radius:0;box-shadow:none} .c-body .c-hd .c-nav a.on{background:rgba(47,111,237,.1);color:#245ddd} .c-body .c-hd.c-header-dark #c-nav>a,.c-body .c-hd.c-header-dark #c-nav .c-dd>a{color:#ecf3ff} .c-body .c-hd.c-header-dark #c-nav>a.on,.c-body .c-hd.c-header-dark #c-nav .c-dd>a.on{background:rgba(255,255,255,.12);color:#fff} .c-body .c-hd.c-header-dark #c-nav>a:hover,.c-body .c-hd.c-header-dark #c-nav .c-dd>a:hover{background:rgba(255,255,255,.1);color:#fff} .c-body .c-hd.c-header-dark .c-logo img{filter:brightness(0) invert(1)} .c-body .c-hd .c-burger{background:transparent;box-shadow:none;border:1px solid rgba(100,120,153,.25)} .c-body .c-hd.c-header-dark .c-burger{color:#fff;border-color:rgba(255,255,255,.3)} #c-page>.c-hero2:first-child{padding-top:calc(var(--site-header-height) + clamp(48px,5.5vw,80px))} #c-page>.c-phero:first-child{padding-top:calc(var(--site-header-height) + 40px)} #c-page>section:first-child:not(.c-hero2):not(.c-phero):not(.c-x--coursehero){padding-top:calc(var(--site-header-height) + clamp(32px,4vw,64px))} #c-page .c-x--course-reference{height:100svh;padding-top:calc(var(--site-header-height) + clamp(16px,3svh,32px))} .c-body>.c-wrap.c-hero{padding-top:calc(var(--site-header-height) + 48px)} .c-body:not(:has(#hq))>.c-sec.c-board{padding-top:calc(var(--site-header-height) + 32px)} .c-body>.c-wrap.c-note{margin-top:calc(var(--site-header-height) + 44px)} .c-body .c-drawer{top:var(--site-header-height)} @media(max-width:767px){ .c-body{--site-header-height:64px} .c-body .c-hd .c-bar{padding:10px 18px;gap:12px} #c-page>.c-hero2:first-child{padding-top:calc(var(--site-header-height) + 36px)} #c-page>.c-phero:first-child{padding-top:calc(var(--site-header-height) + 28px)} #c-page .c-x--course-reference{padding-top:calc(var(--site-header-height) + 12px)} .c-body>.c-wrap.c-note{margin-top:calc(var(--site-header-height) + 24px)} } @media(max-width:900px){.c-body:has(#coModal.is-page.is-open)>.c-sec.c-board{padding-top:0}} /* Course catalogue introduction: decorative artwork, accessible live text, unchanged course posters. */ #c-page#c-page>.c-course-hub:first-child{padding-top:calc(var(--site-header-height,72px) + 8px)} #c-page .c-course-hub .c-course-hub-heading{position:relative;left:50%;transform:translateX(-50%);width:calc(100vw - 40px);max-width:1740px;height:390px;margin:0 0 20px;padding:0;display:flex;align-items:center;justify-content:center;--c-hub-art:url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/ad85bf850b.ad85bf85.webp");background:#fff} #c-page .c-course-hub-heading:after{display:none!important} #c-page .c-course-hub .c-course-hub-copy{width:64%;max-width:850px;text-align:center;padding:0 0 4px} #c-page .c-course-hub .c-kicker{display:flex;align-items:center;justify-content:center;gap:20px;color:#2378ff;font-size:15px;font-weight:700;letter-spacing:.24em;margin:0 0 16px} #c-page .c-course-hub .c-kicker:before,.c-course-hub .c-kicker:after{content:'';width:38px;height:2px;background:linear-gradient(90deg,#078bff,#7a43ff)} #c-page .c-course-hub .c-course-hub-heading :is(h1,h2){font-size:clamp(26px,2.65vw,48px);font-weight:800;line-height:1.32;letter-spacing:-.035em;color:#071b49;margin:0 0 14px} #c-page .c-course-hub .c-course-hub-heading :is(h1,h2) span{color:#086bff} #c-page .c-course-hub .c-course-hub-heading p{font-size:clamp(15px,1.35vw,23px);line-height:1.6;font-weight:500;color:#646e89;margin:0} #c-page .c-course-hub-rule{display:block;width:82px;height:6px;border-radius:8px;background:linear-gradient(90deg,#008aff,#7b3dff);margin:22px auto 0} @media(max-width:1100px){#c-page .c-course-hub .c-course-hub-heading{height:310px}.c-course-hub .c-course-hub-copy{width:67%}.c-course-hub .c-course-hub-heading :is(h1,h2){font-size:30px}.c-course-hub .c-course-hub-heading p{font-size:17px}} @media(max-width:700px){#c-page .c-course-hub .c-course-hub-heading{width:100vw;height:360px;background-size:850px auto;background-position:center bottom;margin-bottom:10px;align-items:flex-start}.c-course-hub .c-course-hub-copy{width:100%;padding:28px 16px 0}.c-course-hub .c-course-hub-heading :is(h1,h2){font-size:clamp(24px,5.8vw,34px);line-height:1.4;margin-bottom:10px}.c-course-hub .c-kicker{font-size:12px;margin-bottom:12px}.c-course-hub .c-course-hub-heading p{font-size:15px}.c-course-hub-rule{margin-top:14px;height:4px;width:56px}} #c-page .c-course-hub .c-course-hub-heading :is(h1,h2):after{display:none!important} @media(max-width:700px){#c-page .c-course-hub .c-course-hub-heading{width:calc(100vw - 16px);height:370px;background-size:100% auto;background-position:center bottom;margin:0 0 10px;align-items:flex-start}#c-page .c-course-hub .c-course-hub-copy{width:100%;max-width:none;padding:20px 12px 0}#c-page .c-course-hub .c-course-hub-heading :is(h1,h2){font-size:clamp(24px,5.8vw,34px);line-height:1.4;margin-bottom:10px}#c-page .c-course-hub .c-kicker{font-size:12px;margin-bottom:12px}#c-page .c-course-hub .c-course-hub-heading p{font-size:15px}#c-page .c-course-hub-rule{margin-top:14px;height:4px;width:56px}} /* Smaller decorative logistics icons; live heading and card poster sizes stay unchanged. */ #c-page .c-course-hub .c-course-hub-heading:before,#c-page .c-course-hub .c-course-hub-heading:after{content:'';display:block!important;position:absolute;inset:0;pointer-events:none;background:var(--c-hub-art) center/contain no-repeat;transform:scale(.8);z-index:0} #c-page .c-course-hub .c-course-hub-heading:before{clip-path:inset(0 58% 0 0);transform-origin:27% 50%} #c-page .c-course-hub .c-course-hub-heading:after{clip-path:inset(0 0 0 58%);transform-origin:73% 50%} #c-page .c-course-hub .c-course-hub-copy{position:relative;z-index:1} @media(max-width:700px){#c-page .c-course-hub .c-course-hub-heading:before,#c-page .c-course-hub .c-course-hub-heading:after{background-size:100% auto;background-position:center bottom;transform-origin:27% 85%}#c-page .c-course-hub .c-course-hub-heading:after{transform-origin:73% 85%}} /* Equal catalogue cards with aligned metadata and footer, including the two-line Shipping date. */ #c-page .dekc-grid{align-items:stretch;grid-auto-rows:1fr} #c-page .dekc-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 62px 46px 26px 26px minmax(36px,1fr) auto 44px;grid-template-areas:'img img' 't t' 'd d' 'when when' 'time time' 'fmt fmt' 'soon soon' 'price btn';column-gap:12px;row-gap:0;align-items:start;height:100%;box-sizing:border-box} #c-page .dekc-card .dekc-t{min-height:0;margin:12px 0 0;line-height:1.3} #c-page .dekc-card .dekc-d{min-height:0;margin:0;line-height:1.45} #c-page .dekc-card .dekc-when,#c-page .dekc-card .dekc-tbdtxt,#c-page .dekc-card .dekc-time{margin:0;line-height:22px;white-space:normal;min-width:0} #c-page .dekc-card .dekc-fmt{margin:0;align-self:start;line-height:22px} #c-page .dekc-card .dekc-price{align-self:center;margin:0;min-width:0} #c-page .dekc-card>.dekc-btns{align-self:center;margin:0;min-width:0} #c-page .dekc-card:has(.dekc-img[href='/shipping/']) .dekc-when{grid-area:when;grid-row:4 / 6;display:block;line-height:24px} #c-page .dekc-card:has(.dekc-img[href='/shipping/']) .dekc-when:before{display:inline-block;vertical-align:middle;margin-right:8px} #c-page .dekc-card:has(.dekc-img[href='/shipping/']) .dekc-when b:after{content:'';display:block} /* Blue course cohort labels */ #c-page .dekc-card .dekc-t .dekc-cohort{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:#fff;white-space:nowrap;background:linear-gradient(135deg,#1685f8 0%,#0757cc 100%);border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:4px 11px;margin-left:4px;font-size:14px;font-weight:700;line-height:1.25;letter-spacing:0;box-shadow:0 3px 8px rgba(8,100,217,.15),inset 0 1px 0 rgba(255,255,255,.18);vertical-align:middle;position:relative;top:-1px} /* Onsite uses orange throughout the course catalogue. */ #c-page .c-course-hub .c-course-hub-heading .c-onsite-label{color:#ed7514} #c-page .dekc-card .dekc-off{color:#c4550b;background:#fff0df} /* ============================================================ Header สุดท้าย (ท่านคิวเลือก 23 ต.ค. 2569): กระจกขาวใสเต็มขอบซ้ายขวา ทุกหน้าสีขาวเหมือนกัน เมนูที่เปิดอยู่มีเส้นใต้ (.c-ind เลื่อนข้ามเมนู/ข้ามหน้า สร้างโดยสคริปต์ท้าย header) · ตอน hover ไม่มีเอฟเฟกต์ · มีเฉพาะตอนคลิก ใช้ !important เพราะหัวเว็บเปลี่ยนสีเองเหนือฮีโร่เข้ม (.c-header-dark ด้านบน) — หน้าไหนก็ต้องเป็นกระจกขาวตัวเข้ม ============================================================ */ .c-body .c-hd .c-bar{position:relative;width:100%;max-width:none;margin:0;border-radius:0 0 24px 24px;padding:8px var(--c-pad);background:linear-gradient(120deg,rgba(255,255,255,.99),rgba(255,255,255,.97));-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 10px 28px rgba(15,27,61,.08),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8)} .c-body .c-hd .c-bar:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2f6fed,#7c5cff,#12b886);pointer-events:none} .c-body .c-hd .c-nav{position:relative} .c-body .c-hd .c-nav a{position:relative;overflow:hidden;border-radius:0;color:#2b3550!important;background:none!important;transition:transform .18s cubic-bezier(.22,1,.36,1)} .c-body .c-hd .c-nav a:hover{color:#2b3550!important;background:none!important} .c-body .c-hd .c-nav a.on,.c-body .c-hd .c-nav a.on:hover{color:#2f6fed!important;background:none!important;box-shadow:none} .c-body .c-hd .c-nav a:active{transform:scale(.94)} .c-body .c-hd .c-logo img{filter:none!important} .c-body .c-hd .c-btn.pri{position:relative;overflow:hidden;border-radius:10px;transition:transform .2s cubic-bezier(.22,1,.36,1)} .c-body .c-hd .c-btn.pri:active{transform:scale(.95)} .c-body .c-hd .c-burger{background:rgba(255,255,255,.45)!important;color:#14213d!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;transition:transform .2s} .c-body .c-hd .c-burger:active{transform:scale(.9) rotate(8deg)} .c-ind{position:absolute;left:0;bottom:2px;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,#2f6fed,#7c5cff);opacity:0;pointer-events:none;transition:left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),opacity .25s} .c-ind.show{opacity:1} .c-rip{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(47,111,237,.3);transform:translate(-50%,-50%) scale(0);animation:c-rip .6s ease-out forwards;pointer-events:none} @keyframes c-rip{to{transform:translate(-50%,-50%) scale(18);opacity:0}} /* เมนูย่อย (บริการของเรา): กระจกขาว ตัวเข้มเสมอ ลอยขึ้นนุ่ม ๆ ตอนเปิด */ .c-body .c-hd .c-dd__menu{display:block;opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:top left;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(15,27,61,.16);border-radius:14px} .c-body .c-hd .c-dd:hover .c-dd__menu,.c-body .c-hd .c-dd:focus-within .c-dd__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} .c-body .c-hd .c-dd__menu a,.c-body .c-hd .c-dd__menu a:hover{position:relative;overflow:hidden;border-radius:10px;color:#1d2433!important;background:none!important;transition:transform .18s} .c-body .c-hd .c-dd__menu a:active{transform:scale(.97)} @media(prefers-reduced-motion:reduce){.c-body .c-hd *,.c-body .c-hd *:before,.c-body .c-hd *:after{animation:none!important;transition:none!important}} /* ============================================================ หน้ากระดานงาน (หน้าแรก /) — เริ่มด้วยตำแหน่งงานเลย (ท่านคิวสั่ง 23 ต.ค. 2569) ส่วนบนย่อเหลือแถบเดียว: ซ้ายหัวข้อ H1 (คงไว้เพื่อ SEO) + สถิติ · ขวาค้นหา + ยอดนิยม · ใต้ลงมาปุ่มลัด 3 อันเป็นแถบเล็ก การ์ดงาน + แผงรายละเอียดขวาเป็นของเดิม ไม่แตะ ============================================================ */ .c-body>.c-wrap.c-hero.c-hero--compact{padding-top:calc(var(--site-header-height) + 24px);padding-bottom:4px;text-align:left} .c-hero--compact .c-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 56px;align-items:center} .c-hero--compact .c-badge{margin:0 0 10px} .c-hero--compact h1{font-size:clamp(26px,2.8vw,40px);line-height:1.22;margin:0 0 6px;max-width:none} .c-hero--compact h1 br{display:none} .c-hero--compact .c-lead{margin:0;max-width:none;font-size:15.5px;line-height:1.6} .c-hero--compact .c-search{margin:0;max-width:none} .c-hero--compact .c-pop{justify-content:flex-start;margin-top:12px} .c-hero--compact .c-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .c-hero--compact .c-act{flex-direction:row;align-items:center;gap:10px;min-height:0;padding:10px 20px;border-radius:999px;box-shadow:0 8px 20px rgba(29,36,51,.12)} .c-hero--compact .c-act:before{display:none} .c-hero--compact .c-act b{font-size:15px} .c-hero--compact .c-act small{font-size:12.5px} .c-hero--compact .c-act:hover{transform:translateY(-2px)} .c-layout-home .c-board{padding-top:18px} .c-layout-home .c-board .c-sh{margin-bottom:10px} @media(max-width:900px){.c-hero--compact .c-top{grid-template-columns:1fr}.c-hero--compact .c-act small{display:none}} #c-page .c-course-hub .c-course-hub-heading .c-online-label{color:#086bff} /* ============================================================ กล่องเข้าสู่ระบบกลางจอ (ท่านคิวสั่ง 23 ต.ค. 2569: แบบเดิมของเว็บ แต่ออกแบบให้สวยขึ้น) — มาร์กอัป+สคริปต์อยู่ท้าย partials/header.html และ wp-dek/reweb/header.php ============================================================ */ .c-lm{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px} .c-lm[hidden]{display:none} .c-lm__bd{position:absolute;inset:0;background:rgba(15,27,61,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s} .c-lm__card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:44px;padding:48px 40px 44px;text-align:center;box-shadow:0 40px 90px rgba(15,27,61,.35);overflow:hidden;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .25s,transform .38s cubic-bezier(.22,1,.36,1)} .c-lm.open .c-lm__bd{opacity:1} .c-lm.open .c-lm__card{opacity:1;transform:none} .c-lm__x{position:absolute;right:18px;top:18px;width:38px;height:38px;border:0;border-radius:50%;background:#f1f4fa;color:#4b5670;font-size:24px;line-height:1;cursor:pointer;transition:transform .2s} .c-lm__x:active{transform:scale(.9)} .c-lm h2{margin:0 0 6px;font-size:26px;line-height:1.3;color:#14213d;font-weight:700} .c-lm h2{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px} .c-lm__brand{display:block;height:32px;width:auto} .c-lm p{margin:0 0 28px;color:#667085;font-size:15.5px} .c-lm__g{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:15px 20px;border-radius:999px;background:#fff;color:#1d2433;font-size:16.5px;font-weight:600;text-decoration:none;box-shadow:0 0 0 1.5px #dfe5f1,0 8px 20px rgba(15,27,61,.08);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s} .c-lm__g:active{transform:scale(.97)} .c-lm__g.is-wait{opacity:.7} .c-lm__g svg{flex:none} html.c-lm-open{overflow:hidden} @media(max-width:480px){.c-lm__card{padding:38px 22px 28px;border-radius:24px}.c-lm h2{font-size:23px}} @media(prefers-reduced-motion:reduce){.c-lm__bd,.c-lm__card{transition:none}} /* หัวหลักสูตรทุกหน้า (เริ่มจาก English) — ตรงตามภาพตัวอย่างของท่านคิว 23 ต.ค. 2569 (วัดจากภาพกว้าง 1870px) · ท่านคิวสั่งให้ใช้กับทุกหลักสูตร ยกขึ้นชิดหัวเว็บ (เว้น 48px) · ตัวหนังสือ/ไอคอนใหญ่ขึ้น · ไม่ย่อทั้งก้อนให้พอดีจอแล้ว (เดิมย่อ+จัดกึ่งกลางแนวตั้ง จึงดูเล็กและต่ำ) --u = 1px ที่จอกว้าง 1870 ขึ้นไป · จอแคบกว่านั้นย่อตามสัดส่วนทั้งก้อน เหมือนภาพ */ @media(min-width:1101px){ /* ทั้งหัวต้องพอดี 1 จอ (เห็นราคา) — เนื้อยาวกว่าจอ (เช่น CS) ย่อทั้งก้อนด้วย --course-fit ที่ course-hero.js วัดให้ · ท่านคิวสั่ง 23 ต.ค. 2569 */ #c-page .c-x--course-reference{--u:min(1px,calc(100vw / 1870));background-size:max(100%,calc(var(--hero-bg-h,calc(100svh - var(--site-header-height))) * 2.41)) auto;background-position:center bottom;height:100svh;min-height:0;padding-top:calc(var(--site-header-height) + 48 * var(--u));padding-bottom:calc(28 * var(--u));align-items:flex-start} #c-page .c-x--course-reference .c-x__in{max-width:calc(1488 * var(--u));padding:0;height:var(--course-fitted-height,auto)!important;transform:translateX(calc(-43 * var(--u)))} #c-page .c-x--course-reference .dekc-hero{transform:scale(min(var(--course-fit,1),.853))!important /* ขนาดมาตรฐาน = หน้า English (ท่านคิวสั่ง 24 ต.ค. 2569) · หน้าที่เนื้อหายาวกว่า (CS ฯลฯ) ย่อได้มากกว่านี้ตามจำเป็น */;transform-origin:top center;grid-template-columns:minmax(0,718fr) minmax(0,716fr);gap:calc(54 * var(--u));align-items:start} #c-page .c-x--course-reference .dekc-hero__info{column-gap:calc(21 * var(--u))} #c-page .c-x--course-reference .dekc-hero__badge{margin:0 0 calc(14 * var(--u)) calc(52 * var(--u));font-size:max(13px,calc(18 * var(--u)));padding:calc(10 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)) calc(56 * var(--u));background-size:calc(26 * var(--u));background-position:calc(18 * var(--u)) center} #c-page .c-x--course-reference .dekc-hero__t{padding-left:calc(52 * var(--u));margin:0 0 calc(30 * var(--u));font-size:calc(78 * var(--u));line-height:1.16;letter-spacing:-.015em;max-width:none;white-space:normal} #c-page .c-x--course-reference .dekc-hero__sub{padding-left:calc(52 * var(--u));margin:0 0 calc(30 * var(--u))} #c-page .c-x--course-reference .dekc-hero__sub span{font-size:max(14px,calc(22 * var(--u)));line-height:1.5} #c-page .c-x--course-reference .dekc-hero__sub span:first-child{font-size:max(16px,calc(27 * var(--u)));line-height:1.45;margin-bottom:calc(4 * var(--u))} #c-page .c-x--course-reference .dekc-hero__ul{height:auto;min-height:calc(80 * var(--u));align-items:center;padding:calc(12 * var(--u)) calc(14 * var(--u));margin:0 0 calc(24 * var(--u));gap:calc(14 * var(--u));border-radius:calc(24 * var(--u))} #c-page .c-x--course-reference .dekc-hero__ul li{font-size:max(12px,calc(15 * var(--u)));line-height:1.45;gap:calc(12 * var(--u))} #c-page .c-x--course-reference .dekc-hero__ul li:before{width:calc(48 * var(--u));height:calc(48 * var(--u));background-size:calc(26 * var(--u)),auto} #c-page .c-x--course-reference .dekc-hero__lines{min-height:calc(92 * var(--u));display:flex;align-items:center;padding:calc(16 * var(--u)) calc(10 * var(--u));margin:0 0 calc(26 * var(--u));border-radius:calc(24 * var(--u))} #c-page .c-x--course-reference .dekc-cells{width:100%} #c-page .c-x--course-reference .dekc-cell{padding:0 calc(6 * var(--u)) 0 calc(62 * var(--u))} #c-page .c-x--english-reference .dekc-cell b{white-space:nowrap} #c-page .c-x--course-reference .dekc-hero__ul.dekc-ul--long{align-items:flex-start} #c-page .c-x--course-reference .dekc-hero__lines{flex-wrap:wrap} #c-page .c-x--course-reference:not(.c-x--english-reference) .dekc-cell,#c-page .c-x--course-reference:not(.c-x--english-reference) .dekc-cell:first-child{flex:1 1 auto} #c-page .c-x--course-reference .dekc-xl{flex:0 0 100%;display:block;margin-top:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u)) 0;border-top:1px solid #d4e5ff44;color:#cfe2ff;font-size:max(12px,calc(15 * var(--u)));line-height:1.5} #c-page .c-x--course-reference:not(.c-x--english-reference) .dekc-hero__ul:not(.dekc-ul--long){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(10 * var(--u))} #c-page .c-x--course-reference .dekc-cell:first-child{flex-grow:1.45} #c-page .c-x--course-reference .dekc-cell:before{left:calc(14 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u));margin-top:calc(-20 * var(--u))} #c-page .c-x--course-reference .dekc-cell small{font-size:max(12px,calc(17 * var(--u)));margin-bottom:calc(2 * var(--u))} #c-page .c-x--course-reference .dekc-cell b{font-size:max(13px,calc(17 * var(--u)));line-height:1.4} #c-page .c-x--course-reference .dekc-hero__price{flex:0 0 calc(389 * var(--u))!important;min-height:calc(102 * var(--u));padding:calc(16 * var(--u)) calc(24 * var(--u));font-size:calc(64 * var(--u));align-items:center;border-radius:calc(28 * var(--u))} #c-page .c-x--course-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important;align-self:center} #c-page .c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:calc(78 * var(--u));font-size:calc(28 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u))} #c-page .c-x--course-reference .dekc-hero__img{padding-top:calc(47 * var(--u));align-self:start} #c-page .c-x--course-reference .dekc-hero__img img{max-height:none;width:100%;aspect-ratio:auto} /* ภาพขวาคงขนาดเดิม · ย่อฝั่งซ้ายให้เหลือช่องว่างระหว่างซ้าย-ขวา ≈ 1 นิ้ว (96px ตามที่เห็นจริง · ท่านคิวสั่ง 24 ต.ค. 2569) — หาร --course-fit เพราะหน้า CS ถูกย่อทั้งก้อน */ /* ชื่อหลักสูตรไม่เกิน 2 บรรทัดทุกหน้า (ท่านคิวสั่ง 24 ต.ค. 2569) */ #c-page .c-x--course-reference .dekc-hero__t{font-size:calc(66 * var(--u))} #c-page .c-x--course-reference .dekc-hero__t.dekc-title--long{font-size:calc(44 * var(--u))} #c-page .c-x--course-reference .dekc-hero__t.dekc-title--long.dekc-title--xl{font-size:calc(36 * var(--u))} /* ภาพขวาทุกหลักสูตรเท่า English: หน้าที่ถูกย่อมากกว่า (CS/Leadership) ขยายภาพชดเชยให้ขนาดที่เห็นเท่ากัน ยื่นออกไปทางขวา */ #c-page .c-x--course-reference .dekc-hero__img img{max-width:none;width:calc(100% * .853 / min(var(--course-fit,1),.853))} #c-page .c-x--course-reference .dekc-hero__info{padding-right:max(0px,calc(64 * var(--u) / var(--course-fit,1) - 54 * var(--u)));box-sizing:content-box;width:calc(640 * var(--u));max-width:100%;justify-self:end} /* ความกว้างต้องไม่ผูกกับ --course-fit (ไม่งั้นกว้าง→ข้อความขึ้นบรรทัด→สูงขึ้น→fit เปลี่ยน→กว้างเปลี่ยน วนจนกระพริบ) · CS ถูกย่อ ~0.8 จึงกำหนดกว้างคงที่ที่มากกว่า */ #c-page .c-x--course-reference .dekc-pts{margin:calc(44 * var(--u)) calc(4 * var(--u)) 0} #c-page .c-x--course-reference .dekc-pt{font-size:max(13px,calc(17 * var(--u)));line-height:1.45;min-height:calc(50 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(66 * var(--u))} #c-page .c-x--course-reference .dekc-pt:first-child{padding-left:calc(56 * var(--u))} #c-page .c-x--course-reference .dekc-pt:before,#c-page .c-x--course-reference .dekc-pt:not(:first-child):before{width:calc(40 * var(--u));height:calc(40 * var(--u));margin-top:calc(-20 * var(--u));left:calc(14 * var(--u))} #c-page .c-x--course-reference .dekc-pt:first-child:before{left:calc(4 * var(--u))} } /* การ์ดหลักสูตรที่เลยวันอบรม / ยังไม่มีวัน — ขาวดำ + "(รอกำหนดการอบรม)" (tools/course-past.js · ท่านคิวสั่ง 23 ต.ค. 2569) */ #c-page .dekc-card.dekc-expired{filter:grayscale(1);opacity:.82;transition:filter .25s,opacity .25s} #c-page .dekc-card.dekc-expired:hover{opacity:1} #c-page .dekc-card.dekc-expired :is(.dekc-when,.dekc-tbdtxt){font-weight:700;color:#475569} /* การ์ดหลักสูตร — ช่องว่างน้อยลง (ท่านคิวทัก 23 ต.ค. 2569 "พื้นที่ว่างเยอะไป ทำให้ชิดๆกันหน่อย") เดิมแต่ละแถวสูงตายตัว (หัวข้อ 62px · คำอธิบาย 46px · แถว Online ยืดเต็ม) → ตอนนี้สูงเท่าเนื้อหา ราคา+ปุ่มยังชิดล่างการ์ดเหมือนเดิม */ #c-page .dekc-card{grid-template-rows:auto auto auto auto auto auto minmax(44px,1fr)} /* แถวการ์ดสูงเท่าการ์ดที่สูงสุดในแถวนั้น (เดิม 1fr = ทุกแถวสูงเท่าการ์ดที่สูงสุดทั้งหน้า) */ #c-page .dekc-grid{grid-auto-rows:auto} #c-page .dekc-card .dekc-t{margin:14px 0 6px} #c-page .dekc-card .dekc-d{margin:0 0 10px} #c-page .dekc-card :is(.dekc-when,.dekc-tbdtxt,.dekc-time){margin:0 0 4px} #c-page .dekc-card .dekc-fmt{margin:2px 0 16px} #c-page .dekc-card .dekc-price,#c-page .dekc-card .dekc-btns{align-self:end} /* Generated logistics cover carousel, scoped to the job landing page. */ .jl-hero{--jl-ink:#0a2d63;--jl-accent:#007fca;--jl-soft:#24496f;position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(620px,44vw,790px);min-height:620px;margin:0;display:grid;place-items:center;padding:calc(var(--site-header-height,72px) + 32px) 24px 78px;color:var(--jl-ink);background:#e9f1f8;text-align:center;transition:color .7s} .jl-hero[data-tone='dark']{--jl-ink:#fff;--jl-accent:#29c9f0;--jl-soft:#ecf4ff;background:#102d51} .jl-hero__slides,.jl-slide{position:absolute;inset:0;z-index:-2} .jl-slide{background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1s ease;will-change:opacity} .jl-slide.is-active{opacity:1;z-index:-1} .jl-slide:after{content:'';position:absolute;inset:0;pointer-events:none} .jl-slide[data-tone='light']:after{background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.84) 0%,rgba(255,255,255,.54) 28%,rgba(255,255,255,.08) 64%,transparent 80%)} .jl-slide[data-tone='dark']:after{background:linear-gradient(90deg,rgba(4,24,51,.12),rgba(4,24,51,.36) 45%,rgba(4,24,51,.17)),linear-gradient(0deg,rgba(3,25,51,.32),transparent 65%)} .jl-hero__content{width:min(1100px,100%);position:relative;z-index:1;margin:0 auto} .jl-hero__eyebrow{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.045em;margin:0 0 19px;color:var(--jl-ink)} .jl-hero__eyebrow svg{width:15px;height:15px;color:var(--jl-accent)} .jl-hero h1{font-size:clamp(42px,3.6vw,68px);line-height:1.22;letter-spacing:-.045em;font-weight:800;max-width:none;margin:0 0 20px;color:var(--jl-ink);text-wrap:balance} .jl-hero h1 span{color:var(--jl-accent);background:none;-webkit-text-fill-color:currentColor} .jl-hero__lead{font-size:clamp(14px,1.05vw,18px);line-height:1.65;font-weight:600;color:var(--jl-soft);margin:0 auto 28px;max-width:760px} .jl-hero .jl-search{display:flex;align-items:center;gap:0;width:100%;max-width:1060px;padding:8px;background:#fff;border:1px solid #fff;border-radius:22px;box-shadow:0 12px 38px #0a2d631b;margin:0 auto;color:#243a58;text-align:left} .jl-search label{display:flex;align-items:center;gap:12px;padding:9px 18px;min-width:0;margin:0} .jl-search label:first-child{flex:1.55} .jl-search label:nth-child(2){flex:.8;border-left:1px solid #e4eaf3} .jl-search svg{width:19px;height:19px;flex-shrink:0;color:#64778e} .jl-search input,.jl-search select{border:0;outline:0;min-width:0;width:100%;height:28px;background:transparent;color:#223752;font-size:14px;font-weight:500;box-shadow:none;padding:0;border-radius:0} .jl-search input:focus-visible,.jl-search select:focus-visible{outline:2px solid #2497e6;outline-offset:4px;border-radius:3px} .jl-search input::placeholder{color:#6d7887;opacity:1} .jl-search button{display:flex;gap:9px;justify-content:center;align-items:center;flex:none;min-height:48px;padding:11px 28px;margin:0;border:0;border-radius:16px;background:linear-gradient(135deg,#0751b4,#0869c9);color:#fff;font-size:15px;line-height:1.3;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #0751b42b} .jl-search button svg{color:#fff;width:18px;height:18px} .jl-search button:hover{filter:brightness(1.08)} .jl-hero .c-pop{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 26px;font-size:12px;color:var(--jl-soft)} .jl-hero .c-pop button{color:var(--jl-ink);border:1px solid rgba(48,107,172,.35);border-radius:999px;background:rgba(255,255,255,.63);font-size:12px;font-weight:600;padding:4px 11px;line-height:1.5;cursor:pointer;backdrop-filter:blur(8px)} .jl-hero[data-tone='dark'] .c-pop button{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff} .jl-hero .c-pop button:hover{background:#0869c9;color:#fff;border-color:#0869c9} .jl-hero__stats{display:flex;justify-content:center;align-items:stretch;margin:0 auto;width:max-content;max-width:100%} .jl-hero__stats>div{display:flex;flex-direction:column;gap:3px;min-width:145px;padding:0 26px;border-right:1px solid rgba(44,81,132,.28)} .jl-hero__stats>div:last-child{border-right:0} .jl-hero__stats strong{font-size:32px;font-weight:800;line-height:1.2;color:var(--jl-ink)} .jl-hero__stats span{font-size:12px;font-weight:600;line-height:1.4;color:var(--jl-soft)} .jl-hero[data-tone='dark'] .jl-hero__stats>div{border-color:rgba(255,255,255,.32)} .jl-carousel-controls{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:2;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.7);backdrop-filter:blur(16px);border-radius:999px;padding:6px 9px;box-shadow:0 4px 18px #0c2e4b12;color:#173d68} .jl-carousel-controls>button{border:0;background:transparent;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;padding:0;color:inherit;cursor:pointer} .jl-carousel-controls>button:hover{background:#096bd01a} .jl-carousel-controls button:focus-visible{outline:2px solid #0883d3;outline-offset:3px} .jl-carousel-controls svg{width:17px;height:17px} .jl-carousel-dots{display:flex;align-items:center;gap:8px} .jl-carousel-dots button{width:7px;height:7px;padding:0;border:0;border-radius:9px;background:#8baccb;cursor:pointer;transition:width .3s,background .3s} .jl-carousel-dots button[aria-pressed='true']{width:25px;background:#0869c9} .jl-hero[data-tone='dark'] .jl-carousel-controls{color:#fff;background:rgba(9,38,70,.48);border-color:rgba(255,255,255,.28)} .jl-hero[data-tone='dark'] .jl-carousel-dots button{background:#a4bfd8} .jl-hero[data-tone='dark'] .jl-carousel-dots button[aria-pressed='true']{background:#28bbed} .c-hero2__sub{display:block;margin-top:8px;opacity:.82;font-size:.88em;line-height:1.6} .c-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .jl-sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .jl-hero+#jobs-sec{padding-top:36px} @media(max-width:1000px){.jl-hero{height:680px}.jl-hero__content{max-width:870px}.jl-hero h1{font-size:50px}.jl-search label{padding:9px 12px}.jl-search input,.jl-search select{font-size:12px}.jl-search button{padding:12px 20px;font-size:13px}.jl-hero__stats>div{min-width:120px;padding:0 20px}.jl-hero__lead{font-size:15px}.jl-hero__stats strong{font-size:29px}} @media(max-width:700px){.jl-hero{height:auto;min-height:710px;padding:calc(var(--site-header-height,64px) + 46px) 18px 76px;align-items:start}.jl-slide{background-position:center}.jl-slide[data-tone='light']:after{background:linear-gradient(0deg,rgba(255,255,255,.48),rgba(255,255,255,.8) 42%,rgba(255,255,255,.55))}.jl-slide[data-tone='dark']:after{background:rgba(5,26,51,.4)}.jl-hero h1{font-size:clamp(32px,8.5vw,47px);line-height:1.28;letter-spacing:-.045em;margin-bottom:16px}.jl-hero__eyebrow{font-size:10px;margin-bottom:18px}.jl-hero__lead{font-size:13px;line-height:1.65;margin-bottom:22px;max-width:420px}.jl-hero__lead br{display:none}.jl-hero .jl-search{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:9px;border-radius:18px;max-width:480px;gap:8px}.jl-search label:first-child{grid-column:1/-1;padding:9px 8px;border-bottom:1px solid #e6edf5}.jl-search label:nth-child(2){grid-column:1;border-left:0;padding:5px 8px}.jl-search input,.jl-search select{font-size:12px}.jl-search svg{width:16px;height:16px}.jl-search button{min-height:42px;font-size:12px;padding:10px 14px;border-radius:12px}.jl-search button svg{width:15px;height:15px}.jl-hero .c-pop{font-size:10px;gap:6px;line-height:1.6;margin:18px auto 24px;max-width:450px}.jl-hero .c-pop button{font-size:10px;padding:3px 8px}.jl-hero__stats{width:100%;max-width:440px}.jl-hero__stats>div{min-width:0;flex:1;padding:0 10px;gap:5px}.jl-hero__stats strong{font-size:25px}.jl-hero__stats span{font-size:10px}.jl-carousel-controls{bottom:18px}.jl-hero+#jobs-sec{padding-top:28px}} @media(prefers-reduced-motion:reduce){.jl-slide,.jl-hero,.jl-carousel-dots button{transition:none}} @media(max-width:700px){.jl-slide--1{background-position:18% center}.jl-slide--2{background-position:77% center}.jl-slide--3{background-position:72% center}.jl-slide--4{background-position:25% center}.jl-slide--5{background-position:80% center}} /* Hero source of truth: the user-specified background/ folder. */ .jl-slide--1{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-00-reference-v1.8fdb41f8.webp')} .jl-slide--2{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-01-v1.ab2c4792.webp')} .jl-slide--3{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-02-v1.ee56c30b.webp')} .jl-slide--4{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-03-v1.7ca9fdf3.webp')} .jl-slide--5{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-04-v1.f2d3f69b.webp')} .jl-slide--6{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-05-v1.2f4da5c2.webp')} @media(max-width:700px){.jl-slide--1{background-position:78% center}.jl-slide--2{background-position:18% center}.jl-slide--3{background-position:77% center}.jl-slide--4{background-position:72% center}.jl-slide--5{background-position:25% center}.jl-slide--6{background-position:80% center}} /* Office professionals in logistics: generated backgrounds, live text remains separate. */ .jl-slide--7{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-06-office-team-v1.66372a0b.webp')} .jl-slide--8{background-image:url('/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-07-office-cs-v1.5f71cd67.webp')} @media(max-width:700px){.jl-slide--7{background-position:80% center}.jl-slide--8{background-position:18% center}} /* Desktop: continuous one-second covers with a shorter crossfade. */ @media(min-width:1024px){.jl-slide{transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}.jl-hero{transition-duration:1.4s}} /* Keep the outgoing image above the incoming image while it fades, avoiding a background flash. */ .jl-hero__slides{z-index:-1;isolation:isolate}.jl-slide{z-index:2}.jl-slide.is-active{z-index:1} /* Incoming frame is fully visible beneath the outgoing fade: no blank-background flash. */ .jl-slide.is-active{transition:none} @media(min-width:1024px){.jl-hero h1,.jl-hero h1 span,.jl-hero__eyebrow,.jl-hero__lead,.jl-hero__stats strong,.jl-hero__stats span,.jl-hero .c-pop,.jl-hero .c-pop button{transition:color 1.4s cubic-bezier(.4,0,.2,1),background-color 1.4s ease,border-color 1.4s ease}} @media(prefers-reduced-motion:reduce){.jl-hero,.jl-hero *{transition:none!important}} /* Additional reference-inspired logistics covers. */ .jl-slide--9{background-image:url("/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-08-warehouse-warm-v1.e8d1e5ec.webp")} .jl-slide--10{background-image:url("/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-09-world-network-v1.63cd1732.webp")} .jl-slide--11{background-image:url("/wp-content/themes/jobtex-child/dek/reweb/static/background/cover-10-container-worker-v1.207108f4.webp")} @media(max-width:700px){.jl-slide--9{background-position:75% center}.jl-slide--10{background-position:center}.jl-slide--11{background-position:18% center}.jl-carousel-controls{width:315px;max-width:calc(100% - 32px)}} /* Readable cover headlines on both light and dark photographs. */ .jl-hero{--jl-accent:#005eb8} .jl-hero h1,.jl-hero h1 span{text-shadow:none} .jl-hero[data-tone='dark']{--jl-accent:#74d6ff} .jl-hero[data-tone='dark'] h1,.jl-hero[data-tone='dark'] h1 span{text-shadow:none} .jl-slide[data-tone='dark']:after{background:radial-gradient(ellipse at 50% 40%,rgba(3,20,43,.6) 0%,rgba(3,20,43,.38) 35%,rgba(3,20,43,.12) 76%),linear-gradient(0deg,rgba(3,25,51,.32),transparent 65%)} @media(max-width:700px){.jl-slide[data-tone='dark']:after{background:linear-gradient(0deg,rgba(3,20,43,.4),rgba(3,20,43,.63) 55%,rgba(3,20,43,.45))}} /* Switch cover text colors directly; fade only the background photographs. */ .jl-hero{transition:none} .jl-hero h1,.jl-hero h1 span,.jl-hero__eyebrow,.jl-hero__lead,.jl-hero__stats strong,.jl-hero__stats span,.jl-hero .c-pop,.jl-hero .c-pop button{transition:none} /* คำว่า Onsite ในป้ายหัวหลักสูตร = สีส้ม (ท่านคิวสั่ง 23 ต.ค. 2569) · Zoom/Online คงสีฟ้า */ #c-page .dekc-hero__badge em.dekc-em--onsite{color:#ff8a1f} /* ไอคอนในการ์ดหลักสูตร: ปฏิทิน = เขียว · นาฬิกา = ส้ม (ท่านคิวสั่ง 23 ต.ค. 2569) */ #c-page .dekc-card .dekc-when:before,#c-page .dekc-card .dekc-tbdtxt:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M7.5 14h2M11 14h2M14.5 14h2M7.5 17.5h2M11 17.5h2'/%3E%3C/svg%3E")} #c-page .dekc-card .dekc-time:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")} /* ตัวหนังสือบนการ์ดหลักสูตร (คำอธิบาย · วันที่ · เวลา · ผ่าน Zoom) = สีดำ (ท่านคิวสั่ง 23 ต.ค. 2569) */ #c-page .dekc-card :is(.dekc-d,.dekc-when,.dekc-when b,.dekc-tbdtxt,.dekc-time,.dekc-fmt), #c-page .dekc-card.dekc-expired :is(.dekc-when,.dekc-tbdtxt){color:#111} /* ข้อความกรณีสมัครผ่านเว็บไซต์ในหัวหลักสูตร: ตัวหนังสือแดง (พื้นชมพูอ่อนให้อ่านชัดบนพื้นเข้ม) */ #c-page .c-x--course-reference .dekc-hero__regnote{order:9!important;flex:0 0 100%;margin:calc(14 * var(--u,1px)) 0 0;padding:calc(8 * var(--u,1px)) calc(14 * var(--u,1px));font-size:max(12px,calc(14 * var(--u,1px)));line-height:1.55;font-weight:600;color:#fff;background:#dc2626;border:1px solid #dc2626;border-radius:calc(14 * var(--u,1px))} /* หัวข้อ "หลักสูตร … รุ่นที่ N" (Course overview) ของทุกหลักสูตร: บรรทัดเดียวยาวๆ ไม่ตัดบรรทัด (ท่านคิวสั่ง 23 ต.ค. 2569) · จอแคบกว่า 900px ให้ตัดบรรทัดได้ตามปกติ */ @media(min-width:900px){ #c-page:has(.c-x--coursehero) .c-x__head:has(>.c-kicker){max-width:none} #c-page:has(.c-x--coursehero) .c-x__head:has(>.c-kicker) .c-h{white-space:nowrap;font-size:clamp(22px,min(3.4vw,2.9vw + 4px),40px)} } /* ===== บรรยากาศการอบรมจริง (tools/training-gallery.cjs) ===== */ #c-page .c-x--gal{background:#f6f9ff} #c-page .c-x--gal .c-gal__lead{margin:10px auto 0;color:#475569;font-size:16px} #c-page .c-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1120px;margin:0 auto} #c-page .c-gal__i{margin:0;border-radius:20px;overflow:hidden;background:#dbe5f5;aspect-ratio:4/3;box-shadow:0 8px 26px rgba(20,50,110,.12)} #c-page .c-gal__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} #c-page .c-gal__i:hover img{transform:scale(1.04)} #c-page .c-gal__i:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} #c-page .c-gal--5 .c-gal__i:first-child{grid-column:span 2;grid-row:span 2} @media(max-width:720px){#c-page .c-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#c-page .c-gal__i{border-radius:14px}#c-page .c-gal__i:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}} /* การ์ดอาจารย์: มีรูปจริง → รูปวงกลมใหญ่ด้านบน ชื่อ/ตำแหน่งอยู่กลางการ์ด (ท่านคิวสั่ง 23 ต.ค. 2569 "อยากได้ภาพอาจารย์มาใช้ด้วย") */ #c-page .c-people{gap:22px} #c-page .c-person:has(.c-person__av--img){flex:0 1 300px;flex-direction:column;text-align:center;gap:14px;padding:28px 24px 26px;border-radius:26px;box-shadow:0 14px 36px rgba(15,27,61,.09);transition:transform .25s,box-shadow .25s} #c-page .c-person:has(.c-person__av--img):hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,27,61,.14)} #c-page .c-person__av--img{width:128px;height:128px;padding:0;overflow:hidden;background:#e8eefc;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--x-a),0 14px 30px rgba(47,111,237,.28)} #c-page .c-person__av--img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block} #c-page .c-person:has(.c-person__av--img) .c-person__t{text-align:center;font-size:18px!important} #c-page .c-person:has(.c-person__av--img) .c-person__sub{margin-top:6px} /* การ์ดอาจารย์จัดวางใหม่ (ท่านคิวสั่ง 23 ต.ค. 2569 "จัดวางชื่ออาจารย์ให้ดีกว่านี้") คำนำหน้าเล็ก → ชื่อ-สกุลตัวใหญ่ → ชื่อเล่นเป็นแท็บสีฟ้า → ตำแหน่ง → บริษัท (ตัวหนาสีเข้ม) */ #c-page .c-person{align-items:center} #c-page .c-person__t{display:flex!important;flex-direction:column;align-items:center;gap:2px;margin:0!important;line-height:1.3} #c-page .c-person__ti{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--x-a);text-transform:none} #c-page .c-person__nm{font-size:20px;font-weight:700;color:#0f1b3d;line-height:1.3} #c-page .c-person__nick{display:inline-block;margin-top:2px;padding:3px 14px;border-radius:999px;background:#e8f0ff;color:#1d4fd8;font-size:14px;font-weight:600} #c-page .c-person__sub{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:8px;padding-top:12px;border-top:1px dashed #d5def0;width:100%} #c-page .c-person__r{font-size:14px;line-height:1.5;color:#475569} #c-page .c-person__r--co{font-weight:600;color:#1e293b} #c-page .c-person:not(:has(.c-person__av--img)){flex-direction:row;align-items:center;text-align:left} #c-page .c-person:not(:has(.c-person__av--img)) .c-person__t{align-items:flex-start} #c-page .c-person:has(.c-person__av--img){gap:6px} #c-page .c-person:has(.c-person__av--img) .c-person__av{margin-bottom:8px} #c-page .c-person:has(.c-person__av--img) .c-person__sub{margin-top:10px} #c-page .c-person:has(.c-person__av--img){flex:0 1 252px;padding:24px 18px 22px} #c-page .c-person:has(.c-person__av--img) .c-person__nm{font-size:19px} #c-page .c-people:has(.c-person:only-child) .c-person:has(.c-person__av--img){flex-basis:300px} /* Keep the slogan blue on every cover, with a shade matched to each photograph. */ .jl-hero:has(.jl-slide--2.is-active){--jl-accent:#075fb8} .jl-hero:has(.jl-slide--3.is-active){--jl-accent:#78d7ff} .jl-hero:has(.jl-slide--4.is-active){--jl-accent:#70d8ff} .jl-hero:has(.jl-slide--5.is-active){--jl-accent:#80d8ff} .jl-hero:has(.jl-slide--7.is-active){--jl-accent:#075eb5} .jl-hero:has(.jl-slide--8.is-active){--jl-accent:#7ed6ff} .jl-hero:has(.jl-slide--9.is-active){--jl-accent:#4c87ff} .jl-hero:has(.jl-slide--10.is-active){--jl-accent:#4c87ff} .jl-hero:has(.jl-slide--11.is-active){--jl-accent:#075eb5} /* Plain two-tone lettering; photograph shading provides contrast without a text panel. */ .jl-hero h1 span{background:none;padding:0;border-radius:0;margin-top:0;text-shadow:none;transition:none;color:var(--jl-accent)} .jl-slide[data-tone='dark']:after{background:radial-gradient(ellipse 66% 43% at 50% 25%,rgba(2,16,39,.84) 0%,rgba(2,16,39,.57) 55%,rgba(2,16,39,.12) 100%),linear-gradient(0deg,rgba(3,25,51,.32),transparent 65%)} @media(max-width:700px){.jl-slide[data-tone='dark']:after{background:linear-gradient(0deg,rgba(3,20,43,.4),rgba(2,16,39,.82) 65%,rgba(3,20,43,.55))}} /* Keep pending-course wording red while retaining the muted card treatment. */ #c-page .dekc-card.dekc-expired{filter:none;opacity:1} #c-page .dekc-card.dekc-expired>:not(.dekc-when):not(.dekc-tbdtxt){filter:grayscale(1);opacity:.82} #c-page .dekc-card.dekc-expired:hover>:not(.dekc-when):not(.dekc-tbdtxt){opacity:1} #c-page .dekc-card .dekc-tbdtxt,#c-page .dekc-card.dekc-expired :is(.dekc-when,.dekc-tbdtxt){color:#dc2626;font-weight:700;filter:none;opacity:1} /* ผู้สอน: รูปอาจารย์อยู่ทางซ้ายของการ์ด ชื่อ/ชื่อเล่น/ตำแหน่งอยู่ทางขวา (ท่านคิวสั่ง 24 ต.ค. 2569 — อย่างอื่นคงเดิม) */ #c-page .c-person{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av t" "av nick" "av sub";column-gap:18px;row-gap:3px;align-items:center;justify-items:start;text-align:left;padding:20px 24px} #c-page .c-person__av{grid-area:av} #c-page .c-person__t{grid-area:t;margin:0} #c-page .c-person__nick{grid-area:nick} #c-page .c-person__sub{grid-area:sub;text-align:left} #c-page .c-person{flex:0 1 430px;max-width:100%} #c-page .c-person .c-person__av{width:100px;height:100px;margin:0} #c-page .c-person .c-person__av img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%} /* หัวหลักสูตร: ฝั่งซ้ายขยับไปทางซ้าย · ภาพหลักสูตร + จุดเด่นใต้ภาพขยับไปทางขวา (ท่านคิวสั่ง 24 ต.ค. 2569) */ @media(min-width:1101px){ #c-page .c-x--course-reference .c-x__in{max-width:calc(1690 * var(--u));transform:translateX(0)} #c-page .c-x--course-reference .dekc-hero__badge{margin-left:0} #c-page .c-x--course-reference .dekc-hero__t,#c-page .c-x--course-reference .dekc-hero__sub{padding-left:calc(30 * var(--u))} #c-page .c-x--course-reference .dekc-hero__info{transform:translateX(calc(-40 * var(--u)))} } /* ภาพแรกของหลักสูตรที่มีคลิป: คลิกเล่นใน popup + ไอคอนเล่น (ท่านคิวสั่ง 24 ต.ค. 2569) */ #c-page .dekc-hero__play{display:block;position:relative;line-height:0;cursor:pointer;text-decoration:none;color:inherit} #c-page .dekc-hero__play img{display:block} #c-page .dekc-hero__play .dekc-play{position:absolute;left:50%;top:50%;width:clamp(56px,9%,96px);aspect-ratio:68/48;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));transition:transform .2s} #c-page .dekc-hero__play .dekc-play svg{display:block;width:100%;height:100%} #c-page .dekc-hero__play:hover .dekc-play,#c-page .dekc-hero__play:focus-visible .dekc-play{transform:translate(-50%,-50%) scale(1.12)} html.dekc-vm-open{overflow:hidden} .dekc-vm{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px} .dekc-vm__bd{position:absolute;inset:0;background:rgba(3,10,30,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .dekc-vm__box{position:relative;width:min(1000px,100%);aspect-ratio:16/9;background:#000;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)} .dekc-vm__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:16px} .dekc-vm__x{position:absolute;right:0;top:-46px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#14213d;font-size:26px;line-height:1;cursor:pointer} /* ภาพถูกขยายชดเชยการย่อ (ดูกฎ 1/fit ด้านบน) → ให้ลิงก์กว้างเท่าภาพ ไอคอนเล่นจะอยู่กลางภาพพอดี */ #c-page .c-x--course-reference .dekc-hero__play{width:calc(100% * .853 / min(var(--course-fit,1),.853))} #c-page .c-x--course-reference .dekc-hero__play img{width:100%;max-width:none} /* CS ถูกย่อมากกว่าหน้าอื่น (fit≈.81 vs .853) ฝั่งซ้ายเลยแคบ/ชิดขวา → ขยายความกว้างคงที่ชดเชย ให้ขอบซ้ายตรงกับหน้า English (640×.853 ÷ .809 ≈ 666) — คงที่ ไม่ผูกกับ fit เพื่อไม่ให้กระพริบ */ @media(min-width:1101px){#c-page .c-x--cs-reference .dekc-hero__info{width:calc(666 * var(--u))}} /* นับถอยหลังวันอบรม — แถบแนวนอนใต้โปสเตอร์ กว้างเท่าภาพ (แบบที่ท่านคิวเลือก 24 ต.ค. 2569: เริ่มอบรมอีก N วัน | ชม:นาที:วินาที | วันที่+เวลา) */ #c-page .dekc-count{display:flex;align-items:center;justify-content:space-between;gap:calc(22 * var(--u,1px));box-sizing:border-box;width:calc(100% * .853 / min(var(--course-fit,1),.853));margin:calc(34 * var(--u,1px)) 0 0;padding:calc(18 * var(--u,1px)) calc(26 * var(--u,1px));color:#fff;border:1px solid rgba(110,190,255,.6);border-radius:calc(22 * var(--u,1px));background:linear-gradient(135deg,rgba(10,60,150,.72),rgba(4,24,76,.82));box-shadow:0 0 calc(26 * var(--u,1px)) rgba(40,150,255,.35),inset 0 0 calc(24 * var(--u,1px)) rgba(80,170,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} #c-page .dekc-count[hidden]{display:none} #c-page .dekc-count__lead{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(2 * var(--u,1px));min-width:calc(130 * var(--u,1px))} #c-page .dekc-count__lead small{font-size:calc(19 * var(--u,1px));font-weight:700;line-height:1.3} #c-page .dekc-count__lead strong{font-size:calc(46 * var(--u,1px));font-weight:800;line-height:1.1;color:#ff3b4e;text-shadow:0 0 calc(16 * var(--u,1px)) rgba(255,59,78,.45)} #c-page .dekc-count__lead strong em{font-style:normal;font-variant-numeric:tabular-nums} #c-page .dekc-count__bar{display:block;height:calc(7 * var(--u,1px));margin-top:calc(8 * var(--u,1px));border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden} #c-page .dekc-count__bar u{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#2aa5ff,#7fdcff);text-decoration:none;transition:width .6s} #c-page .dekc-count__clock{flex:1 1 auto;display:flex;align-items:flex-start;justify-content:center;gap:calc(8 * var(--u,1px));padding:0 calc(22 * var(--u,1px));border-left:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(255,255,255,.22)} #c-page .dekc-count__clock>span{display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u,1px))} #c-page .dekc-count__clock>span b{display:block;min-width:calc(74 * var(--u,1px));padding:calc(8 * var(--u,1px)) calc(6 * var(--u,1px));font-size:calc(44 * var(--u,1px));font-weight:700;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:0;padding-top:calc(10 * var(--u,1px));padding-bottom:calc(6 * var(--u,1px));border:1px solid rgba(120,195,255,.6);border-radius:calc(12 * var(--u,1px));background:linear-gradient(180deg,rgba(40,110,220,.55),rgba(10,50,130,.7));box-shadow:inset 0 0 calc(12 * var(--u,1px)) rgba(120,195,255,.25)} #c-page .dekc-count__clock>span small{font-size:calc(15 * var(--u,1px));font-weight:600;color:#d7e8ff} #c-page .dekc-count__clock>s{align-self:flex-start;margin-top:calc(10 * var(--u,1px));font-size:calc(38 * var(--u,1px));font-weight:700;line-height:1.15;text-decoration:none} #c-page .dekc-count__date{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(12 * var(--u,1px))} #c-page .dekc-count__date p{display:flex;align-items:center;gap:calc(12 * var(--u,1px));margin:0;font-size:calc(19 * var(--u,1px));font-weight:700;line-height:1.3} #c-page .dekc-count__date svg{flex:none;width:calc(34 * var(--u,1px));height:calc(34 * var(--u,1px));color:#4cc3ff} @media(max-width:1100px){#c-page .dekc-count{width:100%;flex-wrap:wrap;justify-content:center}#c-page .dekc-count__clock{border:0;padding:0}#c-page .dekc-count__lead{align-items:center;text-align:center}} @media(max-width:560px){#c-page .dekc-count{padding:16px}#c-page .dekc-count__lead strong{font-size:38px}#c-page .dekc-count__clock>span b{min-width:58px;font-size:32px}#c-page .dekc-count__clock>s{font-size:28px}#c-page .dekc-count__date p{font-size:16px}} /* "09:00-16:00 น." ห้ามตัด "น." ลงบรรทัดใหม่ (ท่านคิวทัก 24 ต.ค. 2569) */ #c-page .c-x--course-reference .dekc-cell--clk b{white-space:nowrap} /* ช่องเริ่มอบรม/เวลา/รูปแบบ ไม่ให้ตัวหนังสือชิดเส้นคั่น (ท่านคิวทัก 24 ต.ค. 2569 "ดูติดๆกันเกินไป"): เว้นขวาเพิ่ม · ช่องเวลาไม่หด */ @media(min-width:1101px){ #c-page .c-x--course-reference .dekc-cell{padding:0 calc(14 * var(--u)) 0 calc(58 * var(--u))} #c-page .c-x--course-reference .dekc-cell b{font-size:max(13px,calc(16 * var(--u)))} #c-page .c-x--course-reference .dekc-cell--clk{flex:0 0 auto!important;padding-right:calc(18 * var(--u))} } /* "13 วัน" สีแดงบนพื้นน้ำเงินอ่านยาก (ท่านคิวทัก 24 ต.ค. 2569) → ป้ายแดงทึบ ตัวขาว คอนทราสต์สูง */ #c-page .dekc-count__lead strong{align-self:flex-start;padding:calc(2 * var(--u,1px)) calc(16 * var(--u,1px)) calc(4 * var(--u,1px));font-size:calc(40 * var(--u,1px));color:#fff;text-shadow:none;border-radius:calc(14 * var(--u,1px));background:linear-gradient(180deg,#ff4258,#d4122e);box-shadow:0 calc(4 * var(--u,1px)) calc(14 * var(--u,1px)) rgba(212,18,46,.5),inset 0 1px 0 rgba(255,255,255,.35)} /* ช่อง "จะเริ่มอบรมใน N วัน" = กล่องแดง ตัวขาว (ท่านคิวเลือกแบบนี้ 24 ต.ค. 2569) */ #c-page .dekc-count__lead{align-self:stretch;justify-content:center;align-items:center;text-align:center;min-width:calc(160 * var(--u,1px));padding:calc(12 * var(--u,1px)) calc(20 * var(--u,1px)) calc(14 * var(--u,1px));border-radius:calc(18 * var(--u,1px));background:linear-gradient(160deg,#ff4a62 0%,#e0173a 55%,#b80c2a 100%);border:1px solid rgba(255,255,255,.35);box-shadow:0 calc(6 * var(--u,1px)) calc(20 * var(--u,1px)) rgba(220,20,60,.55),inset 0 1px 0 rgba(255,255,255,.4)} #c-page .dekc-count__lead small{color:#fff;font-size:calc(18 * var(--u,1px));font-weight:700} #c-page .dekc-count__lead strong{align-self:center;padding:0;background:none;border-radius:0;box-shadow:none;font-size:calc(52 * var(--u,1px));line-height:1.1;color:#fff;text-shadow:0 2px 8px rgba(120,0,20,.45)} #c-page .dekc-count__bar{align-self:stretch;margin-top:calc(8 * var(--u,1px));background:rgba(255,255,255,.3)} #c-page .dekc-count__bar u{background:linear-gradient(90deg,#fff,#ffd9de)} @media(max-width:1100px){#c-page .dekc-count__lead{align-self:auto}} /* ฝั่งซ้าย (ข้อความ) กับฝั่งขวา (โปสเตอร์+นับถอยหลัง) จัดกึ่งกลางแนวตั้งให้บาลานซ์กัน (ท่านคิวขีดเส้นกลาง 24 ต.ค. 2569) */ @media(min-width:1101px){ #c-page .c-x--course-reference .dekc-hero{align-items:center!important} #c-page .c-x--course-reference .dekc-hero__info{align-self:center!important} #c-page .c-x--course-reference .dekc-hero__img{align-self:center!important;padding-top:0!important} } /* หัวหลักสูตรที่เนื้อหาสั้นกว่าจอ (เช่น ปั้นเซลส์) อยู่กึ่งกลางจอ ไม่ลอยชิดบน (ท่านคิวขีดเส้นกลางจอ 24 ต.ค. 2569) — หน้าที่เนื้อหายาวพอดีจออยู่แล้ว ไม่ขยับ */ @media(min-width:1101px){ #c-page .c-x--course-reference{align-items:center!important} } /* มือถือ/แท็บเล็ต (≤1100px): หัวหลักสูตรไม่ต้องย่อให้พอดี 1 จออย่างบนคอม — เดิมย่อ ~61% ทำให้ซ้ายขวาเหลือที่ว่างเยอะ และภาพโปสเตอร์ยืดเพราะกฎชดเชยการย่อของคอมหลุดมาใช้ (ท่านคิวทัก 24 ต.ค. 2569 "เวอร์ชันมือถือออกแบบห่วยมาก") */ @media(max-width:1100px){ #c-page .c-x--course-reference{height:auto!important;min-height:0!important;align-items:flex-start!important} #c-page .c-x--course-reference .c-x__in{height:auto!important;max-width:none!important;width:100%!important;transform:none!important;padding:0 16px!important} #c-page .c-x--course-reference .dekc-hero{transform:none!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important;align-items:start!important} #c-page .c-x--course-reference .dekc-hero__info{width:auto!important;max-width:none!important;padding-right:0!important;justify-self:stretch!important;align-self:start!important} #c-page .c-x--course-reference .dekc-hero__img{padding-top:0!important;align-self:start!important;width:100%} #c-page .c-x--course-reference .dekc-hero__img img,#c-page .c-x--course-reference .dekc-hero__play img{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important} #c-page .c-x--course-reference .dekc-hero__play{width:100%!important} #c-page .dekc-count{width:100%!important;margin-top:20px} } /* มือถือ ≤560px: โลโก้หัวเว็บไม่ยืด (กฎเดิมบังคับสูง 24px แต่กว้าง 148px ตามแอตทริบิวต์) + แถบนับถอยหลังเล็กลง จัดเป็น 2 แถว (ท่านคิวทัก 24 ต.ค. 2569 "ใหญ่ไป") */ @media(max-width:560px){ .c-bar img{width:auto!important} #c-page .dekc-count{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:14px 14px 16px;border-radius:18px;align-items:center} #c-page .dekc-count__lead{grid-column:1;grid-row:1;min-width:0;padding:8px 14px 10px;border-radius:14px;align-self:stretch} #c-page .dekc-count__lead small{font-size:13px} #c-page .dekc-count__lead strong{font-size:30px} #c-page .dekc-count__bar{margin-top:5px;height:5px} #c-page .dekc-count__date{grid-column:2;grid-row:1;gap:8px;align-self:center} #c-page .dekc-count__date p{font-size:14px;gap:8px;line-height:1.3} #c-page .dekc-count__date svg{width:24px;height:24px} #c-page .dekc-count__clock{grid-column:1/-1;grid-row:2;border:0;padding:0;gap:6px;justify-content:center} #c-page .dekc-count__clock>span b{min-width:50px;padding:5px 4px;font-size:28px;border-radius:10px} #c-page .dekc-count__clock>span small{font-size:12px} #c-page .dekc-count__clock>s{font-size:24px;margin-top:6px} } /* เมนูมือถือ: แผงเลื่อนเข้าจากด้านขวา ทับหน้าเว็บ ไม่ดันเนื้อหาลง + ไอคอนเมนูหลัก (ท่านคิวสั่ง 24 ต.ค. 2569) */ @media(max-width:1260px){ .c-body .c-drawer{position:fixed!important;top:0!important;right:0;bottom:auto;left:auto;height:100dvh;width:min(86vw,340px);margin:0;padding:0 14px 24px;border-radius:24px 0 0 24px;background:#fff;box-shadow:-18px 0 50px rgba(8,20,50,.28);z-index:2147480000;overflow-y:auto;overscroll-behavior:contain;display:flex!important;flex-direction:column;gap:2px;transform:translateX(105%);visibility:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .32s} .c-body .c-drawer[hidden]{display:flex!important;visibility:hidden} .c-body .c-drawer:not([hidden]){transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.22,1,.36,1),visibility 0s} .c-drawer .c-dr-top{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 12px;margin-bottom:6px;border-bottom:1px solid #e8eef8;position:sticky;top:0;background:#fff;z-index:1} .c-drawer .c-dr-logo{padding:0!important;background:none!important} .c-drawer .c-dr-logo img{display:block;height:26px;width:auto} .c-drawer .c-dr-x{width:40px;height:40px;border-radius:50%;border:1px solid #d6deec;background:#fff;color:#14213d;font-size:18px;line-height:1;cursor:pointer} .c-drawer>a:not(.c-dr-logo),.c-drawer .c-dr-sub a{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:14px;color:#14213d;font-size:16.5px;font-weight:600;text-decoration:none} .c-drawer>a:not(.c-dr-logo):hover,.c-drawer .c-dr-sub a:hover{background:#f1f6ff} .c-drawer .c-dr-ic{flex:none;width:26px;height:26px;padding:5px;box-sizing:content-box;border-radius:12px;background:#eaf2ff;color:#1f6bf0} .c-drawer .c-dr-sub{display:grid;gap:0;margin:-2px 0 4px 26px;padding-left:14px;border-left:2px solid #e3ecfa} .c-drawer .c-dr-sub a.sub{padding:9px 12px;font-size:15px;font-weight:500;color:#5b6b86} .c-drawer a.c-dr-login{margin-top:12px;justify-content:center;background:linear-gradient(135deg,#4a7cf7,#6457f6);color:#fff!important} .c-drawer a.c-dr-login .c-dr-ic{background:rgba(255,255,255,.2);color:#fff} .c-body.c-drawer-open::after{content:"";position:fixed;inset:0;background:rgba(8,18,44,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2147479999;animation:cDrFade .25s ease} html.c-drawer-lock{overflow:hidden} } @keyframes cDrFade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.c-body .c-drawer{transition:none!important}} /* แถบนับถอยหลังมือถือ ตามแบบที่ท่านคิวส่งมา: แถว 1 = กล่องแดงซ้าย + ไอคอนวัน/เวลาขวา · แถว 2 = ช่องชั่วโมง:นาที:วินาที ใหญ่เต็มความกว้าง (24 ต.ค. 2569) */ @media(max-width:560px){ #c-page .dekc-count{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px 14px;padding:16px} #c-page .dekc-count__lead{padding:10px 12px 12px;min-width:0;border-radius:12px} #c-page .dekc-count__lead small{font-size:13px} #c-page .dekc-count__lead strong{font-size:34px} #c-page .dekc-count__bar{height:5px;margin-top:6px} #c-page .dekc-count__date{gap:10px} #c-page .dekc-count__date p{font-size:15px;gap:10px} #c-page .dekc-count__date svg{width:26px;height:26px} #c-page .dekc-count__clock{gap:8px;justify-content:space-between;padding:0 4px} #c-page .dekc-count__clock>span{flex:1 1 0} #c-page .dekc-count__clock>span b{min-width:0;width:100%;max-width:92px;margin:0 auto;padding:8px 0;font-size:36px;border-radius:12px} #c-page .dekc-count__clock>span small{font-size:14px} #c-page .dekc-count__clock>s{font-size:30px;margin-top:10px} } /* เมนูมือถือ: รายการที่มีเมนูย่อยมีลูกศรบอก กดเพื่อกาง/พับ (ท่านคิวสั่ง 24 ต.ค. 2569) */ @media(max-width:1260px){ .c-drawer .c-dr-row{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border:0;border-radius:14px;background:none;color:#14213d;font:inherit;font-size:16.5px;font-weight:600;text-align:left;cursor:pointer} .c-drawer .c-dr-row:hover,.c-drawer .c-dr-row[aria-expanded="true"]{background:#f1f6ff} .c-drawer .c-dr-row>span{flex:1} .c-drawer .c-dr-chev{flex:none;width:22px;height:22px;padding:4px;box-sizing:content-box;border-radius:50%;background:#eef3fc;color:#5d7092;transition:transform .25s} .c-drawer .c-dr-row[aria-expanded="true"] .c-dr-chev{transform:rotate(180deg);background:#dbe8ff;color:#1f6bf0} .c-drawer .c-dr-grp{display:block} .c-drawer .c-dr-sub[hidden]{display:none} .c-drawer .c-dr-sub{margin:2px 0 6px 26px} } /* หน้ารวมหลักสูตรบนมือถือ: เอารูปไอคอนซ้าย-ขวาของหัวข้อออก และดึงการ์ดหลักสูตรขึ้นมา ไม่เปลืองพื้นที่ (ท่านคิวสั่ง 24 ต.ค. 2569) */ @media(max-width:700px){ #c-page .c-course-hub-heading::before,#c-page .c-course-hub-heading::after{display:none!important;content:none!important} #c-page .c-course-hub-heading{min-height:0!important;padding-top:0!important;padding-bottom:0!important;margin-bottom:18px!important} #c-page .c-course-hub{padding-top:calc(var(--site-header-height,72px) + 14px)!important;padding-bottom:36px!important} #c-page .c-course-hub-copy{padding:0!important} #c-page .c-course-hub-copy p{margin-bottom:12px!important} #c-page .c-course-hub-rule{margin-top:12px!important} } /* มือถือ: ชื่อหลักสูตรในส่วน Course overview ให้อยู่บรรทัดเดียว ไม่เหลือเลข "1" ตกบรรทัด (ท่านคิวทัก 24 ต.ค. 2569) — ชื่อยาวมากจริงๆ ค่อยตัดบรรทัดแบบสมดุล */ @media(max-width:600px){ #c-page>.c-x--coursehero+.c-x .c-x__head .c-h{font-size:clamp(15px,4.4vw,22px)!important;line-height:1.35!important;letter-spacing:-.01em;text-wrap:balance} } /* หน้ารวมหลักสูตรบนมือถือ: ซ่อนรูปไอคอนข้างหัวข้อ (กฎเดิมเฉพาะเจาะจงกว่า จึงต้องซ้ำตัวเลือกเดียวกัน) */ @media(max-width:700px){ #c-page .c-course-hub .c-course-hub-heading:before,#c-page .c-course-hub .c-course-hub-heading:after{display:none!important;content:none!important;background:none!important} #c-page .c-course-hub .c-course-hub-heading{min-height:0!important;height:auto!important;padding:0!important;margin:0 0 16px!important} #c-page .c-course-hub .c-course-hub-copy{padding:0!important} } /* หัวข้อส่วน "หัวข้อบรรยาย" / "สิ่งที่จะได้รับ" บนมือถือไม่ให้เบียด: ตัดเส้นม่วงคั่นกลาง เว้นระยะใต้หัวข้อ มีเส้นบางคั่นรายการ (ท่านคิวทัก 24 ต.ค. 2569) */ @media(max-width:700px){ #c-page[data-ref][data-ref] .c-reference-head{display:flex;align-items:center;gap:12px;margin:0 0 6px!important;padding:0 0 14px!important;border-bottom:1px solid #e3ecfa!important} #c-page[data-ref][data-ref] .c-reference-head .c-h:after{display:none!important} #c-page[data-ref][data-ref] .c-reference-head .c-h{margin:0!important;font-size:20px!important;line-height:1.3!important} #c-page[data-ref][data-ref] .c-reference-head__english{margin-top:3px;font-size:11px} #c-page[data-ref][data-ref] .c-reference-head__icon{width:44px;height:44px;flex:none} #c-page[data-ref][data-ref] .c-reference-mods li{padding:14px 0 14px 50px!important} #c-page[data-ref][data-ref] .c-reference-mods li:before{top:14px!important} #c-page[data-ref][data-ref] .c-reference-benefits .c-benefit{padding:12px 0!important} } @media(max-width:600px){ #c-page[data-ref][data-ref]>.c-x--coursehero+.c-x .c-x__head .c-h,#c-page[data-ref][data-ref]>.c-x--coursehero+.c-x .c-x__head h2.c-h.elementor-heading-title{font-size:clamp(15px,4.4vw,22px)!important;line-height:1.35!important;white-space:normal;text-wrap:balance} } /* มือถือ: หัวเว็บเรียบ ไม่โค้งมน ไม่มีแถบสีบน ไม่มีเงา มีแค่เส้นบางด้านล่าง (ท่านคิวสั่ง 24 ต.ค. 2569 "header ขอแบบเรียบไปเลย") */ @media(max-width:700px){ .c-body .c-hd .c-bar{border-radius:0!important;box-shadow:none!important;background:#fff!important;border-bottom:1px solid #e6ebf4!important} .c-body .c-hd .c-bar::before,.c-body .c-hd .c-bar::after{display:none!important} .c-body .c-hd .c-burger{background:#fff!important;box-shadow:none!important;border:1px solid #d9e1ef!important} } /* มือถือ: หัวหน้าตำแหน่งงานสูงตามเนื้อหา ไม่ล็อก 710px (เดิมเหลือที่ว่างเกือบ 150px ใต้ตัวเลขสถิติ ก่อนถึงปุ่มสไลด์) */ @media(max-width:700px){ .jl-hero{min-height:0!important} } /* ไอแพด/แท็บเล็ต (701–1260px): หัวหน้าตำแหน่งงานชิดหัวเว็บเกินไป (ห่างแค่ ~7px) → เว้นด้านบนให้พอ ~44px และปล่อยความสูงตามเนื้อหา (ท่านคิวทัก 24 ต.ค. 2569) */ @media(min-width:701px) and (max-width:1260px){ .jl-hero{height:auto!important;min-height:724px!important;padding-top:134px!important;padding-bottom:86px!important;align-items:start!important} } /* ไอแพด/แท็บเล็ต (≤1260px): หัวเว็บเรียบแบบเดียวกับมือถือ — ไม่โค้ง ไม่มีเงา ไม่มีแถบสีบน มีแค่เส้นบางด้านล่าง (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(min-width:701px) and (max-width:1260px){ .c-body .c-hd .c-bar{border-radius:0!important;box-shadow:none!important;background:#fff!important;border-bottom:1px solid #e6ebf4!important} .c-body .c-hd .c-bar::before,.c-body .c-hd .c-bar::after{display:none!important} } /* ไอแพดโปรแนวนอน / จอเล็ก (1261–1440px): ใช้กฎเดียวกับแท็บเล็ต — หัวเว็บเรียบ และหัวข้อ hero ไม่ชนหัวเว็บ (ตอนวัดที่ 1366px ห่าง -2px = ทับกัน) */ @media(min-width:1261px) and (max-width:1440px){ .jl-hero{height:auto!important;min-height:744px!important;padding-top:134px!important;padding-bottom:86px!important;align-items:start!important} .c-body .c-hd .c-bar{border-radius:0!important;box-shadow:none!important;background:#fff!important;border-bottom:1px solid #e6ebf4!important} .c-body .c-hd .c-bar::before,.c-body .c-hd .c-bar::after{display:none!important} } /* แถบนับถอยหลังมือถือ: ข้อความวันที่/เวลาให้พอดีบรรทัด ไม่ตกคำกลางประโยค — วันที่ 2 บรรทัด (วันเสาร์ที่ / 7 พฤศจิกายน 2569) · เวลา 2 บรรทัด (เวลา / 09:00 - 16:00 น.) (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(max-width:560px){ #c-page .dekc-count{grid-template-columns:auto minmax(0,1fr)!important} #c-page .dekc-count__lead{padding:10px 14px 12px} #c-page .dekc-count__date{gap:9px} #c-page .dekc-count__date p{font-size:13.5px!important;gap:8px!important;line-height:1.3;white-space:nowrap} #c-page .dekc-count__date svg{width:22px!important;height:22px!important} #c-page .dekc-count__date .dk-tl,#c-page .dekc-count__date .dk-tv{display:block} } /* ข้อความใต้นาฬิกา: บอกว่านับถึงเที่ยงคืนแล้วเหลืออีกกี่วัน (ท่านคิวสั่ง 25 ต.ค. 2569) */ #c-page .dekc-count{flex-wrap:wrap} #c-page .dekc-count__cap{flex:0 0 100%;order:9;margin:calc(-2 * var(--u,1px)) 0 0;text-align:center;font-size:max(12px,calc(14 * var(--u,1px)));font-weight:600;color:#cfe2ff;line-height:1.4} @media(max-width:560px){#c-page .dekc-count__cap{grid-column:1/-1;grid-row:3;font-size:12.5px;margin:-4px 0 0}} /* ชื่อหลักสูตรบรรทัดเดียว: กันกระพริบก่อน JS ปรับขนาด */ #c-page .c-x--course-reference .dekc-hero__t{white-space:nowrap} #c-page .c-x--course-reference .dekc-hero__t[style*="white-space: normal"]{white-space:normal} /* ข้อความใต้นาฬิกา "สมัครได้ถึงก่อนวันอบรม 1 วัน" สีแดง — ป้ายแดงอ่อนบนพื้นน้ำเงินเข้มให้อ่านง่าย */ #c-page .dekc-count__cap{align-self:center;flex:0 0 auto;margin:calc(2 * var(--u,1px)) auto 0;padding:calc(4 * var(--u,1px)) calc(16 * var(--u,1px));border-radius:999px;font-weight:700;color:#ff7a86;background:rgba(255,59,78,.14);border:1px solid rgba(255,122,134,.55);text-shadow:none} @media(max-width:560px){#c-page .dekc-count__cap{grid-column:1/-1;justify-self:center;font-size:13px;padding:4px 14px}} /* แถบนับถอยหลังจอใหญ่: ช่องซ้าย (กล่องแดง) กับช่องขวา (วันที่-เวลา) กว้างเท่ากัน → นาฬิกาอยู่กึ่งกลางแถบพอดี ทุกอย่างอยู่กึ่งกลางแนวตั้ง (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(min-width:561px){ #c-page .dekc-count{gap:calc(14 * var(--u,1px)) calc(14 * var(--u,1px))} #c-page .dekc-count__lead{flex:0 0 calc(200 * var(--u,1px));min-width:0;display:flex;align-items:center;justify-content:flex-start} #c-page .dekc-count__lead>*{width:100%} #c-page .dekc-count__date{flex:0 0 calc(200 * var(--u,1px));align-self:center;align-items:flex-end} #c-page .dekc-count__date p{font-size:calc(17 * var(--u,1px));justify-content:flex-start;width:max-content;max-width:100%} #c-page .dekc-count__clock{flex:0 0 auto;align-self:center} } /* ข้อความ "สมัครได้ถึงก่อนวันอบรม 1 วัน" ย้ายเข้ามาในกล่องแดง ตัวเล็ก ใต้แถบความคืบหน้า (ท่านคิวสั่ง 25 ต.ค. 2569) — เลิกใช้ป้ายยาวด้านล่างแถบ */ #c-page .dekc-count__cap{display:none!important} #c-page .dekc-count__note{display:block;margin-top:calc(7 * var(--u,1px));font-size:max(10.5px,calc(12 * var(--u,1px)));line-height:1.35;font-weight:600;color:#fff;text-align:center;opacity:.96;text-shadow:0 1px 4px rgba(120,0,20,.4)} @media(max-width:560px){#c-page .dekc-count__note{font-size:10.5px;margin-top:5px}} /* แถบนับถอยหลังจอใหญ่: วันที่ "วันเสาร์ที่ 12 ธันวาคม 2569" บรรทัดเดียว ไอคอนอยู่แนวเดียวกัน นาฬิกายังอยู่กึ่งกลางแถบ (ท่านคิวสั่ง 25 ต.ค. 2569) ใช้กริด 3 ช่อง (ซ้าย | นาฬิกา | ขวา) ซ้าย-ขวากว้างเท่ากัน · ย่อกล่องตัวเลขนิดหน่อยให้ช่องวันที่กว้างพอ */ @media(min-width:561px){ #c-page .dekc-count{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(18 * var(--u,1px));padding:calc(18 * var(--u,1px)) calc(22 * var(--u,1px))} #c-page .dekc-count__lead{justify-self:start;flex:none;width:calc(170 * var(--u,1px));min-width:0} #c-page .dekc-count__clock{justify-self:center;padding:0 calc(16 * var(--u,1px));gap:calc(6 * var(--u,1px))} #c-page .dekc-count__clock>span b{min-width:calc(62 * var(--u,1px));font-size:calc(40 * var(--u,1px));padding-left:calc(4 * var(--u,1px));padding-right:calc(4 * var(--u,1px))} #c-page .dekc-count__clock>s{font-size:calc(34 * var(--u,1px))} #c-page .dekc-count__date{justify-self:end;flex:none;display:grid;gap:calc(12 * var(--u,1px));align-items:start} #c-page .dekc-count__date p{display:grid;grid-template-columns:calc(28 * var(--u,1px)) auto;align-items:center;column-gap:calc(10 * var(--u,1px));width:auto;font-size:calc(15.5 * var(--u,1px));white-space:nowrap} #c-page .dekc-count__date svg{width:calc(28 * var(--u,1px))!important;height:calc(28 * var(--u,1px))!important} #c-page .dekc-count__date br{display:none} } /* แก้รอบ 2: กล่องแดงกว้างพอ "13 วัน" ไม่ตกบรรทัด · ข้อความ "สมัครได้ถึงก่อนวันอบรม 1 วัน" บรรทัดเดียว ไม่ตัดคำ "วัน" ลงล่าง · วันที่บรรทัดเดียว (ท่านคิวทัก 25 ต.ค. 2569) */ @media(min-width:561px){ #c-page .dekc-count__lead{width:calc(196 * var(--u,1px));padding-left:calc(12 * var(--u,1px));padding-right:calc(12 * var(--u,1px))} #c-page .dekc-count__lead strong{white-space:nowrap} #c-page .dekc-count__note{white-space:nowrap;font-size:calc(11 * var(--u,1px))} #c-page .dekc-count__date .dk-dd,#c-page .dekc-count__date .dk-dv{display:inline} #c-page .dekc-count__date p>span{white-space:nowrap} } @media(max-width:560px){ #c-page .dekc-count__note{white-space:nowrap} #c-page .dekc-count__date .dk-dd,#c-page .dekc-count__date .dk-dv{display:block} } /* แถบนับถอยหลังจอใหญ่: กล่องแดงกับวันที่-เวลา อยู่กึ่งกลางช่องของตัวเอง (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(min-width:561px){ #c-page .dekc-count__lead{justify-self:center!important} #c-page .dekc-count__date{justify-self:center!important} } /* ปุ่มวงกลม LINE / Facebook ลอยมุมขวาล่าง ทุกหน้า ยกเว้นหน้าตำแหน่งงาน เหมือนเว็บเก่า (ท่านคิวสั่ง 25 ต.ค. 2569) */ .c-float-social{position:fixed;right:18px;bottom:22px;z-index:2147470000;display:flex;flex-direction:column;gap:12px} .c-float-social .c-fs{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 6px 18px rgba(8,20,50,.3);transition:transform .2s,box-shadow .2s} .c-float-social .c-fs:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 24px rgba(8,20,50,.38)} .c-float-social .c-fs svg{width:24px;height:24px} .c-float-social .c-fs--line{background:#06c755} .c-float-social .c-fs--fb{background:#1877f2} @media(max-width:700px){.c-float-social{right:12px;bottom:16px;gap:10px}.c-float-social .c-fs{width:42px;height:42px}} body.c-drawer-open .c-float-social{display:none} /* ตัวหนังสือในฮีโร่ซ้าย (รายการ 3 ข้อ, เริ่มอบรม/เวลา/รูปแบบ, ข้อความสีแดง) ใหญ่ขึ้นให้อ่านง่าย (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(min-width:1101px){ #c-page .dekc-hero__ul li{font-size:17px!important;line-height:1.45!important} #c-page .dekc-cells .dekc-cell b{font-size:17.5px!important} #c-page .dekc-cells .dekc-cell small{font-size:15.5px!important} #c-page .dekc-hero__regnote,#c-page .dekc-hero__regnote span{font-size:15px!important;line-height:1.45!important} #c-page .dekc-hero__alumni{font-size:19px!important} } /* ช่องว่างระหว่างฮีโร่ซ้าย-ขวากว้างขึ้น ทุกหลักสูตร: ย่อฝั่งซ้ายนิดหน่อย ชิดขอบซ้ายเดิม (ท่านคิวสั่ง 25 ต.ค. 2569) */ @media(min-width:1101px){ #c-page .c-x--course-reference .dekc-hero__info{width:calc(604 * var(--u))!important;justify-self:start!important} } /* ป้ายรูปแบบการอบรม: ออนไลน์/Zoom = ไอคอนกล้อง Zoom · Onsite = ไอคอนตึก (ท่านคิวสั่ง 25 ต.ค. 2569) */ #c-page .dekc-hero__badge.dekc-badge--zoom{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226.5%22%20width%3D%2212.5%22%20height%3D%2211%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22m15%2010.5%206-3.5v10l-6-3.5z%22%2F%3E%3C%2Fsvg%3E")!important} #c-page .dekc-hero__badge.dekc-badge--onsite{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4.5A1.500%201.500%200%200%201%206.500%203h7A1.500%201.500%200%200%201%2015%204.500V21%22%2F%3E%3Cpath%20d%3D%22M15%209h3.500A1.500%201.500%200%200%201%2020%2010.500V21M3%2021h18M8.500%207h3M8.500%2010.500h3M8.500%2014h3%22%2F%3E%3C%2Fsvg%3E")!important} /* ป้ายออนไลน์/Zoom: โลโก้ Zoom ไว้ท้ายข้อความ ต่อจากคำว่า Zoom (ท่านคิวสั่ง 25 ต.ค. 2569) */ #c-page .c-x--course-reference .dekc-hero__badge.dekc-badge--zoom{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20rx%3D%2211%22%20fill%3D%22%232D8CFF%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2215%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%224.5%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22m31%2021.500%208-5.500v16l-8-5.500z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E")!important;background-repeat:no-repeat!important;background-size:26px!important;background-position:right 14px center!important;padding-left:22px!important;padding-right:50px!important} @media(min-width:1101px){#c-page .c-x--course-reference .dekc-hero__badge.dekc-badge--zoom{background-size:calc(30 * var(--u))!important;background-position:right calc(16 * var(--u)) center!important;padding-left:calc(26 * var(--u))!important;padding-right:calc(60 * var(--u))!important}} @media(max-width:700px){#c-page .c-x--course-reference .dekc-hero__badge.dekc-badge--zoom{background-size:20px!important;background-position:right 10px center!important;padding-left:14px!important;padding-right:38px!important}} /* การ์ดหลักสูตร: ป้าย "อีกกี่วันเริ่มเรียน" (assets/js/course-soon.js · ท่านคิวสั่ง 26 ต.ค. 2569) */ #c-page .dekc-soon{grid-area:soon;justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:-4px 0 14px;padding:6px 15px;border-radius:999px;background:#eaf2ff;color:#1d4ed8;font-size:15px;font-weight:700;line-height:1.3} #c-page .dekc-soon svg{flex:none} /* นาฬิกาในป้าย "อีก N วันเริ่มอบรม" — เดินแบบ ติ๊ก ติ๊ก (ท่านคิวสั่ง ไม่เอาหมุนลื่น): เข็มยาวกระโดด 30° ทุก 1 วินาที · เข็มสั้นขยับ 1 ช่องทุก 12 วินาที คนที่ปิดแอนิเมชันในเครื่องเห็นนาฬิกานิ่ง */ .dekc-clock__m,.dekc-clock__h{transform-box:view-box;transform-origin:12px 12px;animation:dekc-tick 12s steps(12,end) infinite} .dekc-clock__h{animation-duration:144s} @keyframes dekc-tick{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.dekc-clock__m,.dekc-clock__h{animation:none}} #c-page .dekc-soon--hot{background:#fee2e2;color:#dc2626} #c-page .dekc-soon--now{background:#e6f7ee;color:#0f8a4b} /* ข้างปุ่มเข้าสู่ระบบ: "ลงประกาศงาน →" (น้ำเงิน) / "สมัครงาน →" (เขียว) คนละบรรทัด + ข้อความดำเล็กใต้ว่า "ฟรี ไม่มีค่าใช้จ่ายหลังจาก Login" — ท่านคิวสั่ง 27 ต.ค. 2569 */ .c-hd .c-hd-cta{display:inline-flex;flex-direction:column;align-items:center;margin-right:16px;white-space:nowrap} .c-hd .c-hd-cta .cta-row{display:flex;padding:2px;border:1px solid #d5dfee;background:#f5f8fd;border-radius:999px} .c-hd .c-hd-cta a{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;text-decoration:none;transition:background .15s} .c-hd .c-hd-cta a+a{position:relative;margin-left:2px} .c-hd .c-hd-cta a+a:before{content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:1px;background:#d5dfee} .c-hd .c-hd-cta__post{color:#1d4ed8} .c-hd .c-hd-cta__apply{color:#15803d} .c-hd .c-hd-cta__post:hover{background:#e3ebff} .c-hd .c-hd-cta__apply:hover{background:#dcf3e5} .c-hd .c-hd-cta .ic{display:block;width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .c-hd .c-hd-cta small{margin-bottom:4px;font-size:10.5px;line-height:1.3;font-weight:500;color:#111827} .c-hd .c-hd-cta small strong{font-weight:800;color:#dc2626} /* กว้างไม่พอ (ชนเมนู) = ซ่อน */ @media(max-width:1500px){.c-hd .c-hd-cta{display:none!important}} #c-page .dekc-cell__note{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.5;color:#bcd6ee} /* 28 ต.ค. 2569: หน้า /privacy-policy-2/ — หัวข้อชิดซ้ายตรงกับแนวข้อความด้านล่าง (กว้างเท่าคอลัมน์ข้อความ 960px) แทนจัดกลาง */ #c-page[data-path="/privacy-policy-2/"] .c-x__head{max-width:960px;margin:0 auto 36px;text-align:left} #c-page[data-path="/privacy-policy-2/"] .c-x__head .c-h,#c-page[data-path="/privacy-policy-2/"] .c-x__head .c-x__sub{text-align:left!important} #c-page[data-path="/privacy-policy-2/"] .c-x__head .c-h:first-child:after{margin-left:0;margin-right:auto} /* 28 ต.ค. 2569: โลโก้ DekLogistics ในหัวเว็บโดนบีบกว้างเหลือ ~135px (จากปกติ 148px) บนหน้าตำแหน่งงาน เพราะ flex ยอมให้หดตอนเมนู/ปุ่มขวากว้าง — ล็อกไม่ให้หด */ .c-body .c-hd .c-logo{flex:0 0 auto} .c-body .c-hd .c-logo img{width:148px;height:30px;max-width:none} /* 29 Oct 2026: privacy document aligned to left edge of shared bounded container. */ #c-page[data-path="/privacy-policy-2/"] .c-x__in{box-sizing:border-box;width:100%;max-width:1652px;margin-inline:auto;padding-inline:26px} #c-page[data-path="/privacy-policy-2/"] :is(.c-x__head,.c-text,.c-text--long){box-sizing:border-box;width:100%;max-width:1100px;margin-left:0;margin-right:auto;text-align:left} #c-page[data-path="/privacy-policy-2/"] .c-x__head :is(.c-h,.c-x__sub){text-align:left!important} #c-page[data-path="/privacy-policy-2/"] .c-x__head .c-h:after{margin-left:0;margin-right:auto} #c-page[data-path="/privacy-policy-2/"] .c-text{overflow-wrap:anywhere} @media(max-width:600px){#c-page[data-path="/privacy-policy-2/"] .c-x__in{padding-inline:14px}} /* ============================================================ หลักแบบ FB (ท่านคิวสั่ง 29 ต.ค. 2569): ทุกจอสัดส่วนไม่เพี้ยน โดยไม่ล็อกสเกลทั้งหน้า 1) ตัวหนังสือ hero ขนาดคงที่เป็นขั้น (ไม่โตตาม vw) 2) hero สูงไม่เกินจอ ลบแถบหมวดธุรกิจ (114px) → เห็นแถบหมวดทุกจอ 3) จอเตี้ย (โน้ตบุ๊ก/ซูม 125–150%) ใช้ชุดกะทัดรัด · มือถือ (≤700px) ใช้กฎเดิม ============================================================ */ @media(min-width:701px){ .jl-hero{height:auto!important;min-height:min(790px,calc(100svh - 114px))!important;padding-top:calc(var(--site-header-height,72px) + 16px)!important;padding-bottom:64px!important;align-items:center!important} .jl-hero h1{font-size:48px} .jl-hero__lead{font-size:16px} } @media(min-width:1261px){ .jl-hero{min-height:min(710px,calc(100svh - 114px))!important} .jl-hero h1{font-size:54px} .jl-hero__stats strong{font-size:29px} } @media(min-width:1261px) and (max-height:860px){ .jl-hero h1{font-size:50px;margin-bottom:14px} .jl-hero__eyebrow{margin-bottom:12px} .jl-hero__lead{margin-bottom:20px} .jl-hero .c-pop{margin:14px 0 18px} .jl-hero__stats strong{font-size:28px} } @media(min-width:701px) and (max-height:720px){ .jl-hero{padding-top:calc(var(--site-header-height,72px) + 8px)!important;padding-bottom:58px!important} .jl-hero h1{font-size:42px;margin-bottom:10px} .jl-hero__eyebrow{margin-bottom:8px} .jl-hero__lead{font-size:15px;margin-bottom:16px} .jl-hero .c-pop{margin:10px 0 12px} .jl-hero__stats strong{font-size:24px} } @media(min-width:701px) and (max-height:640px){ .jl-hero{padding-bottom:66px!important} .jl-hero h1{font-size:36px} .jl-hero__lead{font-size:14px;margin-bottom:12px} .jl-hero__stats strong{font-size:22px} } /* แอดมินมีแถบ WordPress 32px ด้านบน → หักออกด้วย ให้แถบหมวดยังโผล่ (ท่านคิวเช็คเว็บจริง 29 ต.ค.) */ @media(min-width:701px){.admin-bar .jl-hero,html:has(#wpadminbar) .jl-hero{min-height:min(710px,calc(100svh - 146px))!important}} /* Header กะทัดรัดขึ้น (ท่านคิว 29 ต.ค. "Header ใหญ่มาก") — เฉพาะจอที่โชว์เมนูเต็ม · มือถือ/แท็บเล็ตใช้แบบเดิม */ @media(min-width:1261px){ .c-body{--site-header-height:60px} .c-body .c-hd .c-bar{padding-top:5px;padding-bottom:5px} .c-body .c-hd .c-logo img{width:128px;height:auto} .c-body .c-hd .c-nav a{font-size:14px;padding:7px 12px} } /* เส้นใต้เมนูที่เปิดอยู่: วาดด้วย CSS ติดกับตัวลิงก์เลย (ท่านคิว 29 ต.ค.: เส้นยาวเลยไปเมนูถัดไปบน Edge/ซูม) เดิมสคริปต์วัดตำแหน่ง (.c-ind) แล้วผิดเมื่อฟอนต์โหลดช้า/ซูม → ซ่อนตัวนั้น ใช้ ::after แทน ยาวพอดีเมนูทุกจอ */ .c-ind{display:none!important} .c-body .c-hd .c-nav a.on:after{content:"";position:absolute;left:20px;right:20px;bottom:2px;height:3px;border-radius:3px;background:linear-gradient(90deg,#2f6fed,#7c5cff);pointer-events:none} /* หน้าแรก (/home-page/) เล็กลง 20% (ท่านคิว 29 ต.ค. "ทุกอย่างใหญ่ไป") — เฉพาะเดสก์ท็อป · พื้นหลังยังเต็มจอ zoom อยู่ที่ #c-page ของหน้านี้อย่างเดียว (ไม่ใช่ทั้งเว็บ) · กรอบเนื้อหาหาร .8 เพื่อให้กรอบที่เห็นกว้างเท่าเดิมของที่ออกแบบไว้ */ @media(min-width:1261px){#c-page.hp-premium-page{zoom:.88;--hp-frame:1745px!important}} @media(min-width:1351px){#c-page.hp-premium-page{--hp-frame:1634px!important}} /* อัพเดทเงินเดือน · บริการของเรา · หลักสูตรอบรม (ท่านคิววงไว้ 29 ต.ค.): เล็กลง 30% บนเดสก์ท็อป — ข้อยกเว้น zoom แบบเดียวกับหน้าแรก กรอบเนื้อหาหาร .7 ให้กรอบที่เห็นเท่าเดิม · พื้นหลังยังเต็มจอ · จอ <1261px และมือถือใช้แบบเดิม */ @media(min-width:1261px){ #c-page.salary-page,#c-page.ds-page:has(.scb-hero){zoom:.7;--site-frame-max:2360px;--site-editorial-max:1830px;--site-content-max:2290px;--site-board-max:2630px} } @media(min-width:1261px){#c-page.salary-page .sl-app{min-height:0!important;height:calc((100dvh - var(--site-header-height,60px) - var(--sl-hero-h,188px)*.7 - 30px)/.7)!important}} /* ติดต่อเรา (ท่านคิว 29 ต.ค.): เล็กลง 30% บนเดสก์ท็อป — ข้อยกเว้น zoom แบบเดียวกับหน้าแรก · กรอบหาร .7 */ @media(min-width:1261px){#c-page.contact-reference{zoom:.7;--site-frame-max:2360px;--site-editorial-max:1830px;--site-content-max:2290px;--site-board-max:2630px}} /* หลักสูตรอบรม (ท่านคิว 29 ต.ค.): เพิ่มจาก 70% ขึ้น 20% = 84% · กรอบหาร .84 */ @media(min-width:1261px){#c-page[data-path="/logistics-training-courses/"]{zoom:.84;--site-frame-max:1967px;--site-editorial-max:1524px;--site-content-max:1905px;--site-board-max:2190px}} /* แผนที่บริษัท = ภาพกดไป Google Maps (29 ต.ค. 2569) */ .c-contact__map.c-maplink{position:relative;display:block;min-height:300px;overflow:hidden;border-radius:inherit} .c-maplink img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .c-maplink span{position:absolute;left:50%;top:50%;transform:translate(-50%,-110%);background:#fff;color:#0b4db8;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(10,40,110,.25);white-space:nowrap} /* Header เล็กลงอีก ~20% (ท่านคิว 29 ต.ค. 2569) — เฉพาะจอเมนูเต็ม */ @media(min-width:1261px){ .c-body{--site-header-height:48px} .c-body .c-hd .c-bar{padding-top:4px;padding-bottom:4px;gap:20px} .c-body .c-hd .c-logo img{width:102px} .c-body .c-hd .c-nav a{font-size:12.5px;padding:5px 10px} } /* ท่านคิว 29 ต.ค.: ขยายเฉพาะความสูง 55px · ตัวหนังสือ/โลโก้/ปุ่มคงขนาดรอบ +5% */ /* Header +5% และฝั่งขวาให้บาลานซ์ (ท่านคิว 29 ต.ค. 2569): ป้าย "ฟรี" อยู่แถวเดียวกับปุ่ม ไม่ล้นขอบบน · ปุ่มเข้าสู่ระบบสูงเท่ากลุ่มปุ่ม */ @media(min-width:1261px){ .c-body{--site-header-height:55px} .c-body .c-hd .c-logo img{width:107px} .c-body .c-hd .c-nav a{font-size:13.1px} .c-hd .c-hd-cta{flex-direction:row;align-items:center;gap:10px;margin-right:12px} .c-hd .c-hd-cta small{margin:0;font-size:11px;padding:3px 9px;border-radius:999px;background:#fff1f1;color:#6b1d1d} .c-hd .c-hd-cta a{padding:5px 12px;font-size:12.5px} .c-body .c-hd .c-btn.pri{height:34px;padding:0 20px;display:inline-flex;align-items:center;font-size:13px;border-radius:999px;box-shadow:0 4px 12px rgba(67,56,202,.25)} } /* ท่านคิว 29 ต.ค.: ฝั่งขวาเล็กลง · "ฟรี ไม่มีค่าใช้จ่าย" อยู่ด้านบนปุ่ม (ไม่ล้นขอบแถบ) */ @media(min-width:1261px){ .c-hd .c-hd-cta{flex-direction:column;align-items:center;gap:0;margin-right:10px} .c-hd .c-hd-cta small{margin:0 0 2px;padding:0;background:none;font-size:10px;line-height:1.1;color:#111827} .c-hd .c-hd-cta .cta-row{padding:1px} .c-hd .c-hd-cta a{padding:3px 10px;font-size:11.5px;gap:4px} .c-hd .c-hd-cta a+a:before{top:5px;bottom:5px} .c-hd .c-hd-cta .ic{width:13px;height:13px} .c-body .c-hd .c-btn.pri{height:30px;padding:0 16px;font-size:12.5px} } /* เส้นใต้เมนูที่เปิดอยู่ยาวพอดีตัวหนังสือ (ท่านคิว 29 ต.ค.) — ขอบลิงก์ซ้ายขวา 10px */ @media(min-width:1261px){.c-body .c-hd .c-nav a.on:after{left:10px;right:10px;bottom:1px;height:2px}} /* วงกลมบัญชีตอนล็อกอินเล็กลง 56→40px (ท่านคิว 29 ต.ค.) */ .c-hd .c-acct,.c-hd .c-acct__btn{width:34px!important;height:34px!important;min-width:0!important} .c-hd .c-acct__btn{padding:0!important} .c-hd .c-acct__btn img{width:31px!important;height:31px!important;max-width:none} /* หน้าหลักสูตร: ส่วนบนไม่ล็อกความสูงตามจอ — จอเตี้ย/ซูมแล้วเนื้อหาซ้อนทับกัน (ท่านคิว 29 ต.ค. "จัดวางพังมาก") */ #c-page#c-page[data-ref]>.c-x--course-reference{height:auto!important;min-height:min(900px,100svh)!important;padding-top:96px!important;padding-bottom:64px!important} @media(min-width:1041px) and (max-width:1750px){ #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero{gap:36px} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__t{font-size:clamp(30px,3vw,52px)!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 18px!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cells{flex-wrap:wrap!important;row-gap:14px} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cell{flex:1 1 30%!important;min-width:200px;padding-left:62px!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cell b{white-space:normal!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__price{font-size:clamp(28px,2.6vw,46px)!important} } /* หน้าหลักสูตร: ภาพพื้นหลังชิดขวา ให้เรืออยู่ขอบจอ ไม่ซ่อนหลังโปสเตอร์ + ไล่สีมืดบางลงให้เห็นเรือชัด (ท่านคิว 29 ต.ค.) */ @media(min-width:1041px){ #c-page#c-page .c-x--course-reference{background-image:linear-gradient(90deg,rgba(1,19,52,.26),rgba(2,26,67,.2) 50%,rgba(8,52,123,.08)),linear-gradient(0deg,rgba(2,26,68,.3),transparent 35%),url("/wp-content/themes/jobtex-child/dek/reweb/static/assets/img/css/99404a38f9.99404a38.webp");background-position:0 0,0 0,22% 100%;background-size:auto,auto,cover} } /* เนื้อหาใต้ส่วนบนของทุกหลักสูตรเล็กลง 10% แล้วอีก 20% = zoom .72 (ท่านคิว 29 ต.ค. 2569) — เฉพาะเดสก์ท็อป · ส่วนบน (.c-x--course-reference) ไม่ย่อ */ @media(min-width:1041px){ #c-page[data-ref]>section:not(.c-x--course-reference){zoom:.72} } /* หน้าหลักสูตร: ภาพรวม/อาจารย์/แกลเลอรี/ส่วนอื่น ๆ ชิดขอบเท่ากับกล่องหัวข้อบรรยาย–สิ่งที่จะได้รับ ไม่เป็นกรอบแคบกลางจอ (ท่านคิว 29 ต.ค. 2569) 36px ที่ zoom .72 + zoom ของหน้า ≈ 33px ที่เห็นจริงเท่ากับกล่องหัวข้อบรรยาย */ @media(min-width:1041px){ #c-page[data-ref]>section:not(.c-x--course-reference):not([class*="c-course-panel"])>.c-x__in{width:auto!important;max-width:none!important;margin-left:97px!important;margin-right:97px!important;padding-left:0!important;padding-right:0!important} } /* ท่านคิว 29 ต.ค.: "ชิดไปหน่อย เอาออกมา" — ขอบข้างเนื้อหาหลักสูตร ≈ 82px ที่เห็นจริง (90px ใน CSS ที่ zoom .72) ทั้งส่วนเต็มกว้างและกล่องหัวข้อบรรยาย–สิ่งที่จะได้รับ (ช่อง grid ริมซ้าย/ขวาเดิม 26px) */ @media(min-width:1041px){ #c-page[data-ref]{grid-template-columns:70px repeat(20,minmax(0,1fr)) 70px!important} } /* ส่วนล่าง (สมัครเรียน 5 ขั้นตอน · ติดต่อ) ชิดขอบเท่ากัน — กล่องสมัครเรียนเป็นตัว .c-x__in เอง จึงใช้ margin แทน padding และคง padding ในกรอบไว้ (ท่านคิว 29 ต.ค.) */ @media(min-width:1041px){ #c-page[data-ref]>section:not(.c-x--course-reference):not([class*="c-course-panel"]){padding-left:0!important;padding-right:0!important} #c-page[data-ref]>section.c-x--b:not([class*="c-course-panel"])>.c-x__in{padding-left:26px!important;padding-right:26px!important} #c-page[data-ref]>.c-contact-support{padding-left:97px!important;padding-right:97px!important} #c-page[data-ref]>.c-contact-support .c-contact-support__panel{max-width:none!important;margin-left:0!important;margin-right:0!important} } /* หน้าหลักสูตร (29 ต.ค. 2569 ท่านคิวสั่ง): ฝั่งซ้ายยกขึ้นให้ขอบบนตรงกับภาพปก · กล่องนับถอยหลังเล็กลง กว้างเท่าภาพปก (เดิมล้นคอลัมน์) */ @media (min-width:981px){ #c-page .c-x--course-reference .dekc-hero__info,#c-page[data-ref][data-ready]>.c-x--course-reference .dekc-hero__info{align-self:start!important} #c-page .c-x--course-reference .dekc-count{--u:calc(min(1px,calc(100vw / 1870)) * .84);width:100%!important;max-width:100%!important;box-sizing:border-box} } /* ติดต่อล่างสุด: ความจำเพาะต้องสูงกว่ากฎ padding:0 ของส่วนอื่น ไม่งั้นแผงติดต่อชิดขอบจอ (ท่านคิว 29 ต.ค.) */ @media(min-width:1041px){ html body #c-page[data-ref]>section.c-x.c-x--contact.c-contact-support{padding-left:97px!important;padding-right:97px!important} } /* หน้าหลักสูตร ส่วนบน: ใช้ความกว้างมากขึ้น (เดิม 80% ของกรอบ) คอลัมน์ซ้าย–ขวากว้างขึ้น แถวเตี้ยลง ย่อให้พอดีจอน้อยลง ตัวหนังสือเลยใหญ่ขึ้น (ท่านคิว 29 ต.ค. "ทำเล็กไป") */ @media(min-width:1041px){ #c-page#c-page[data-ref]>.c-x--course-reference .dekc-wrap{width:94%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important} } /* (ยกเลิกการกระชับช่องว่างภายในส่วนบนหลักสูตร — ท่านคิว 29 ต.ค. "อันนี้ใหญ่กว่า" ช่องไฟกลับเป็นแบบเดิม) */ /* "หลักสูตรอื่นๆ" ท้ายหน้าหลักสูตร (ท่านคิว 29 ต.ค. 2569) — แถวการ์ดเลื่อนข้างได้ เห็น 4 ใบ */ #c-page[data-ref] .c-other-courses{padding-top:40px;padding-bottom:56px} #c-page[data-ref] .c-other-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px} #c-page[data-ref] .c-other-head h2{margin:4px 0 6px;font-size:clamp(26px,2.3vw,34px);line-height:1.2;color:#0a2a66} #c-page[data-ref] .c-other-head p{margin:0;color:#5b6a86;font-size:15px} #c-page[data-ref] .c-other-total{color:#6b7a96;font-size:14px;white-space:nowrap} #c-page[data-ref] .c-other-rail .dekc-grid{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:thin} #c-page[data-ref] .c-other-rail .dekc-card{scroll-snap-align:start;min-width:0} #c-page[data-ref] .c-other-bottom{margin-top:10px} #c-page[data-ref] .c-other-bottom a{color:#1f5fe0;font-weight:700;font-size:15px;text-decoration:none} @media(max-width:1040px){#c-page[data-ref] .c-other-rail .dekc-grid{grid-auto-columns:calc((100% - 20px)/2)}} @media(max-width:640px){#c-page[data-ref] .c-other-head{flex-direction:column;align-items:flex-start}#c-page[data-ref] .c-other-rail .dekc-grid{grid-auto-columns:86%}} /* "หลักสูตรอื่นๆ" = ส่วนหลักสูตรของหน้าแรกโคลนมา (course-soon.js) — ขนาดเท่าหน้าแรก (zoom .88) ขอบเท่าส่วนอื่นของหน้า */ @media(min-width:1041px){ html body #c-page[data-ref]>section.hp-section.c-other-courses{zoom:.88;padding-left:0!important;padding-right:0!important;background:#fff} html body #c-page[data-ref]>section.c-other-courses>.site-container{max-width:none!important;width:auto!important;margin-left:79px!important;margin-right:79px!important;padding-left:0!important;padding-right:0!important} } /* ราคากับปุ่มสมัครเรียนส่วนบนหลักสูตรเล็กลง (ท่านคิว 29 ต.ค. 2569) */ @media(min-width:1041px){ #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__price{font-size:clamp(23px,2.1vw,37px)!important;min-height:72px!important;padding:24px 20px 10px!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero .dekc-btns .dekc-btn{min-height:58px!important;font-size:clamp(16px,1.45vw,24px)!important;padding:12px 16px!important} } /* ราคาจัดกึ่งกลางกล่อง และกล่องไม่ยาวเกินตัวเลข (ท่านคิว 29 ต.ค. 2569) */ @media(min-width:1041px){ #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__price{flex:0 1 auto!important;min-width:210px;display:flex!important;align-items:center;justify-content:center;text-align:center!important;padding:14px 36px!important;line-height:1.15!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__info>.dekc-btns{flex:1 1 0!important} } /* ส่วนบนหลักสูตร: กล่องคุณสมบัติ 4 ข้อเรียง 2x2 และแถววันที่/เวลา/รูปแบบขึ้นบรรทัดได้ ทุกความกว้างจอ — กันตัวหนังสือตัดบรรทัดแคบๆ/ชนไอคอน (ท่านคิว 29 ต.ค. 'ตัวหนังสือพัง') */ @media(min-width:1041px){ #c-page#c-page[data-ref]>.c-x--course-reference .dekc-hero__ul:has(li:nth-child(4)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 18px!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cells{flex-wrap:wrap!important;row-gap:14px} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cell{flex:1 1 30%!important;min-width:200px;padding-left:62px!important} #c-page#c-page[data-ref]>.c-x--course-reference .dekc-cell b{white-space:normal!important} } /* ส่วนบนหลักสูตรซ่อนไว้จนสคริปต์ปรับขนาดเสร็จ (course-soon.js ใส่ .dekc-fitted) · สำรอง: โผล่เองหลัง 1.2 วิ ถ้าสคริปต์ไม่ทำงาน — ไม่ให้เห็นขนาดกระโดด (ท่านคิว 30 ต.ค. 2569) */ @keyframes dekc-reveal{to{opacity:1}} @media(min-width:1041px){ #c-page[data-ref]>.c-x--course-reference .c-x__in:not(.dekc-fitted){opacity:0;animation:dekc-reveal 0s 1.2s forwards} #c-page[data-ref]>.c-x--course-reference .c-x__in.dekc-fitted{opacity:1} } /* ท้ายเว็บ (Footer) เอาออกทุกหน้า (ท่านคิว 30 ต.ค. 2569) */ footer.c-ft,.c-ft{display:none!important}