/*
Theme Name: Suksawad
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Fresh Digital
Author URI: https://freshdigital.co.th/
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1793585058
Updated: 2026-11-02 02:04:18

*/

/* ===== BEGIN Suksawad (Fresh Digital) =====
   เฉพาะสิ่งที่ Elementor ตั้งเองไม่ได้ สี / ฟอนต์ / ขนาด ของ widget อยู่ใน Kit และ global variables / classes ของ Elementor */

/* ฟอนต์ self-host (ตาม Mockup: Prompt 300 ถึง 900, Noto Sans Thai 400 ถึง 700) จาก Google Fonts ไฟล์อยู่ใน fonts/
   ประกาศทีละน้ำหนัก ไม่ใช่ช่วง variable | เฉพาะชุดอักษร thai, latin, latin-ext (เบราว์เซอร์โหลดเฉพาะที่หน้าใช้) */
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-thai-var-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-thai-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-thai-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-thai-var-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-thai-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-thai-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-thai-var-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-thai-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-thai-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-thai-var-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-thai-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-thai-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/prompt-300-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/prompt-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/prompt-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/prompt-500-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/prompt-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/prompt-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/prompt-700-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/prompt-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/prompt-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/prompt-800-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/prompt-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/prompt-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/prompt-900-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/prompt-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/prompt-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ความกว้างเนื้อหาของ container แบบ Boxed ตาม Mockup (.container 1400 / 1280 / 1150 / 1060 รวม padding ข้างละ 40)
   ค่าใน Site Settings > Layout: 1320 (desktop) และ 980 (laptop ลงไป) ส่วนขั้น 1760 / 1500 / 1300 ไม่ตรงกับ breakpoint ของ Elementor จึงตั้งตรงนี้
   (ช่วง 1181px ขึ้นไปเท่านั้น ไม่ทับค่า laptop ของ Site Settings, container ที่ตั้ง Content Width เองยังใช้ค่าของตัวเอง) */
@media (min-width:1181px) and (max-width:1760px){:root .e-con{--container-max-width:1200px}}
@media (min-width:1181px) and (max-width:1500px){:root .e-con{--container-max-width:1070px}}
@media (min-width:1181px) and (max-width:1300px){:root .e-con{--container-max-width:980px}}

/* ลิงก์ใช้สีของข้อความรอบข้าง ไม่ขีดเส้นใต้ (ตาม Mockup) แทนสีชมพู / ม่วงของ Hello reset.css สีเฉพาะจุดตั้งใน widget */
a,a:hover,a:active{color:inherit}

/* GTM noscript (แทน inline style ของโค้ด Google) */
.gtm-ns{display:none;visibility:hidden}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- ข้อความโผล่ตอนเลื่อน (Mockup .reveal) ใส่ class sks-reveal ที่ element, js/site.js ใส่ .in ---------- */
.sks-js .sks-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.sks-js .sks-reveal.in,body.elementor-editor-active .sks-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sks-js .sks-reveal{opacity:1;transform:none;transition:none}}

/* ---------- ปุ่มที่ลอยขึ้นตอน hover (Mockup .btn-outline / .header-cta: translateY(-2px)) ---------- */
.sks-lift-2 .elementor-button{transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .3s,color .3s,border-color .3s}
.sks-lift-2 .elementor-button:hover{transform:translateY(-2px)}

/* ---------- Header (Theme Builder) ---------- */
.sks-brands{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sks-brands,.sks-navbar{transition:padding .3s cubic-bezier(.22,.61,.36,1)}
.sks-header{transition:box-shadow .3s cubic-bezier(.22,.61,.36,1)}
.sks-logo-main img,.sks-logo-sub img{transition:height .3s cubic-bezier(.22,.61,.36,1)}
/* เลื่อนลงเกิน 10px (Sticky > Effects Offset) = Mockup .site-header.scrolled */
.sks-header.elementor-sticky--effects{box-shadow:0 8px 26px -18px rgba(0,0,0,.35)}
@media (min-width:1025px){
	body .sks-header.elementor-sticky--effects .sks-brands,
	body .sks-header.elementor-sticky--effects .sks-navbar{--padding-top:10px;--padding-bottom:10px}
	body .sks-header.elementor-sticky--effects .sks-logo-main img{height:42px}
	body .sks-header.elementor-sticky--effects .sks-logo-sub img{height:22px}
}
/* แถบโลโก้ / แถบเมนู กว้างเท่า .container ของ Mockup รวม padding (1400 / 1280 / 1150 / 1060) เพราะ Mockup ตั้ง padding ข้างของ header เป็น 0 */
body .sks-brands,body .sks-navbar{--content-width:min(100%,calc(var(--container-max-width) + 80px))}
/* ช่องค้นหา (JetSearch Ajax Search, ตั้งกรอบแคปซูล / ปุ่มแดงใน widget) ส่วนที่ widget ไม่มี control: สีตัวอย่างข้อความ, วงแสงตอนโฟกัส, ซ่อนที่ 1500px ลงไป (ไม่ตรง breakpoint ของ Elementor) */
.sks-search .jet-ajax-search__field::placeholder{color:var(--e-global-color-sksmuted);opacity:1}
.sks-search .jet-ajax-search__field:focus{outline:0}
.sks-search .jet-ajax-search__field{-webkit-appearance:none;appearance:none}
.sks-search .jet-ajax-search__field::-webkit-search-decoration,.sks-search .jet-ajax-search__field::-webkit-search-cancel-button{-webkit-appearance:none}
.sks-search .jet-ajax-search__form{transition:box-shadow .25s cubic-bezier(.22,.61,.36,1)}
.sks-search .jet-ajax-search__form:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
@media (max-width:1500px){body .sks-search{display:none}}
/* เมนูมือถือ (<= 1024): ปุ่มสามขีดกล่อง 38px และแผงเมนูมีเส้นล่าง + padding บนล่าง 8px ตาม Mockup */
.sks-brands .elementor-menu-toggle{padding:6px}
.sks-brands nav.elementor-nav-menu--dropdown{padding:8px 0;border-bottom:1px solid var(--e-global-color-sksline)}

/* ไอคอน SVG ของ Mockup: กล่องไอคอนไม่ต้องมีบรรทัดตัวอักษรรอบตัว (ไม่งั้นสูงเกินไอคอน) */
.elementor-widget-icon .elementor-icon-wrapper{line-height:0}

/* ---------- Footer ---------- */
/* Icon List ระบายสีไอคอนด้วย fill อย่างเดียว ไอคอนเส้นของ Mockup ใช้สีตัวอักษร (currentColor) จึงตั้งสีขาวตรงนี้ */
.sks-foot-contact .elementor-icon-list-icon svg{color:var(--e-global-color-skswhite)}
/* Elementor เว้นข้อความห่างไอคอนเพิ่มจาก Text Indent อีก 2 ที่ (padding-inline-start 5px ของข้อความ + margin 1/4 ของขนาดไอคอน) ระยะของ Mockup คือ 18px พอดี */
.sks-foot-contact{--e-icon-list-icon-margin:0}
body .sks-foot-contact .elementor-icon-list-icon+.elementor-icon-list-text{padding-inline-start:0}
.sks-foot-links .elementor-item{transition:color .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
.sks-foot-links .elementor-item:hover{transform:translateX(4px)}
/* "Powered by Fresh Digital." ลิงก์ใช้สีเดียวกับข้อความ ขีดเส้นใต้ตอน hover */
.sks-powered a{transition:color .2s}
.sks-powered a:hover{color:var(--e-global-color-skswhite);text-decoration:underline}
.sks-fsoc{transition:opacity .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1)}
.sks-fsoc:hover{transform:translateY(-3px)}
.sks-fsoc .elementor-icon,.sks-fsoc .elementor-icon svg{transition:background-color .2s,color .2s,fill .2s}
/* hover ทั้งก้อน: วงกลมเป็นสีขาว ไอคอนเป็นสีแดง (Elementor ตั้งสีวงกลมตามก้อนไม่ได้) */
.sks-fsoc:hover .elementor-icon{background-color:var(--e-global-color-skswhite)!important;color:var(--e-global-color-primary)!important}
.sks-fsoc:hover .elementor-icon svg{fill:var(--e-global-color-primary)!important}

/* ---------- ปุ่มลอย: ช่องทางติดต่อ = Floating Element "Floating Contact" (Contact Buttons) ตาม Mockup .social-rail ----------
   widget มีแต่ไอคอนตามแพลตฟอร์ม (ปุ่ม "Url" = ลูกโลก) จึงใช้ไอคอนของ Mockup จาก icons/ แทนด้วย mask และแยกสีปุ่มตามลิงก์ (สลับลำดับในหน้าแก้ไขได้)
   ปุ่มหลัก 56px (มือถือ 52) ปุ่มย่อย 52px (มือถือ 46) ห่างกัน 14px (มือถือ 10) วงชีพจรรอบปุ่มหลัก ปุ่มย่อยโผล่ไล่กันจากบนลงล่าง */
body .e-contact-buttons.sks-float{z-index:80;gap:14px;align-items:center}
body .sks-float .e-contact-buttons__contact-links{--e-contact-buttons-size-medium:52px;gap:14px;align-items:center}
body .sks-float .e-contact-buttons__chat-button-container{--e-contact-buttons-size-medium:56px;--e-contact-buttons-icon-medium:26px}
body .sks-float .e-contact-buttons__contact-icon-link{--sks-bg:var(--e-global-color-primary);--sks-ic-size:26px;transition:transform .3s cubic-bezier(.22,.61,.36,1),filter .25s cubic-bezier(.22,.61,.36,1)}
body .sks-float .e-contact-buttons__contact-icon-link:hover{transform:translateY(-3px) scale(1.06);filter:brightness(1.05)}
/* ชื่อปุ่ม (Tooltip) ไม่แสดงบนจอเหมือน Mockup แต่โปรแกรมอ่านหน้าจอยังอ่านได้ (เป็นชื่อของลิงก์) */
body .sks-float .e-contact-buttons__contact-tooltip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body .sks-float .e-contact-buttons__contact-icon-container,
body .sks-float .e-contact-buttons__contact-icon-link:hover .e-contact-buttons__contact-icon-container{background-color:var(--sks-bg);color:var(--e-global-color-skswhite)}
body .sks-float .e-contact-buttons__contact-icon-container svg{display:none}
body .sks-float .e-contact-buttons__contact-icon-container::before,
body .sks-float .e-contact-buttons__close-button::before{content:"";display:block;width:var(--sks-ic-size,26px);height:var(--sks-ic-size,26px);background-color:currentColor;-webkit-mask:var(--sks-ic) center/contain no-repeat;mask:var(--sks-ic) center/contain no-repeat}
.sks-float a[href*="youtube."]{--sks-bg:#FF0000;--sks-ic:url(icons/youtube.svg)}
.sks-float a[href*="facebook."]{--sks-bg:var(--e-global-color-sksfacebook);--sks-ic:url(icons/facebook.svg)}
.sks-float a[href*="line.me"],.sks-float a[href*="lin.ee"]{--sks-bg:var(--e-global-color-skslinegreen);--sks-ic:url(icons/line.svg);--sks-ic-size:34px}
.sks-float a[href^="mailto:"]{--sks-bg:#3A3F47;--sks-ic:url(icons/rail-mail.svg)}
.sks-float a[href^="tel:"]{--sks-bg:var(--e-global-color-primary);--sks-ic:url(icons/rail-phone.svg)}
/* ปุ่มหลัก (เปิด = ไอคอนข้อความ, ปิด = กากบาทพื้นสีเข้ม ตั้งสีใน widget) */
body .sks-float .e-contact-buttons__chat-button,
body .sks-float .e-contact-buttons__close-button{position:relative;transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .25s cubic-bezier(.22,.61,.36,1)}
body .sks-float .e-contact-buttons__chat-button:hover,
body .sks-float .e-contact-buttons__close-button:hover{transform:scale(1.06)}
body .sks-float .e-contact-buttons__close-button{--sks-ic:url(icons/close.svg)}
body .sks-float .e-contact-buttons__close-button::before{position:absolute;inset:0;margin:auto}
body .sks-float .e-contact-buttons__close-button i{display:none}
body .sks-float .e-contact-buttons__chat-button::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--e-global-color-primary);animation:sks-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes sks-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.sks-float .e-contact-buttons__content-wrapper:not(.hidden) .e-contact-buttons__contact-icon-link{animation:sks-pop .3s cubic-bezier(.22,.61,.36,1) backwards}
.sks-float .e-contact-buttons__contact-icon-link:nth-child(1){animation-delay:.04s}
.sks-float .e-contact-buttons__contact-icon-link:nth-child(2){animation-delay:.08s}
.sks-float .e-contact-buttons__contact-icon-link:nth-child(3){animation-delay:.12s}
.sks-float .e-contact-buttons__contact-icon-link:nth-child(4){animation-delay:.16s}
.sks-float .e-contact-buttons__contact-icon-link:nth-child(5){animation-delay:.2s}
@keyframes sks-pop{from{opacity:0;transform:translateY(14px) scale(.5)}}
/* <= 560: ปุ่มหลัก 52px ไอคอน 22px, ปุ่มย่อย 46px ห่างกัน 10px และห่างปุ่มหลัก 18px (Mockup .sr-items อยู่สูงจากก้นปุ่ม 70px เท่าเดิม) */
@media (max-width:560px){
	body .e-contact-buttons.sks-float{gap:18px}
	body .sks-float .e-contact-buttons__contact-links{--e-contact-buttons-size-medium:46px;gap:10px}
	body .sks-float .e-contact-buttons__chat-button-container{--e-contact-buttons-size-medium:52px;--e-contact-buttons-icon-medium:22px}
	body .sks-float .e-contact-buttons__contact-icon-link,body .sks-float .e-contact-buttons__close-button{--sks-ic-size:22px}
	.sks-float a[href*="line.me"],.sks-float a[href*="lin.ee"]{--sks-ic-size:30px}
}
@media (prefers-reduced-motion:reduce){
	body .sks-float .e-contact-buttons__chat-button::after{animation:none}
	.sks-float .e-contact-buttons__content-wrapper:not(.hidden) .e-contact-buttons__contact-icon-link{animation:none}
}

/* ---------- ปุ่มกลับขึ้นบน (Mockup .to-top: โผล่เมื่อเลื่อนลงเกิน 220px) class อยู่ที่ container ที่ fixed ---------- */
.sks-to-top{opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1)}
.sks-to-top.show,body.elementor-editor-active .sks-to-top{opacity:1;pointer-events:auto;transform:none}
.sks-to-top.show:hover{transform:translateY(-3px)}

/* ---------- รูป / วิดีโอเต็มกรอบแทนรูปพื้นหลัง (คำตอบประตู A ข้อ 10): Image / Video / Featured Image widget ตั้ง Position absolute, Object Fit cover
   ในตัว widget ที่นี่แค่ให้ widget สูงเต็มกรอบ (Elementor ไม่มีช่องความสูง 100% ของ widget) container ใช้ class เดียวกันได้ (กล่องสีทับรูป) ---------- */
.elementor-element.sks-fill{inset:0;height:100%}
.sks-fill>.elementor-widget-container,.sks-fill img,.sks-fill .elementor-wrapper,.sks-fill video{width:100%;height:100%}
.sks-fill img,.sks-fill video{object-fit:cover;max-width:none}
.sks-fill .elementor-wrapper{aspect-ratio:auto}

/* ---------- ปุ่มแดง / ปุ่มเส้น (Mockup .btn-red / .btn-ghost): ลอยขึ้น 3px ตอน hover ปุ่มแดงมีเงาแดง | ลูกศร → ขยับ 4px (.arw) ---------- */
.sks-btn-red .elementor-button,.sks-btn-ghost .elementor-button{transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.sks-btn-red .elementor-button:hover,.sks-btn-ghost .elementor-button:hover{transform:translateY(-3px)}
.sks-btn-red .elementor-button:hover{box-shadow:0 12px 24px -10px rgba(141,25,27,.6)}
.sks-arw{display:inline-block;margin-left:3px;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.elementor-button:hover .sks-arw,.sks-link-arw a:hover .sks-arw{transform:translateX(4px)}

/* ---------- หน้าแรก: hero (Nested Carousel) ---------- */
/* สไลด์ 1: ไล่สีจางทางขวาให้อ่านข้อความได้ (3 จุดสี Elementor ทำได้ 2) <= 900 ไล่จากบนลงล่าง | สไลด์ 2, 3 (ข้อความอยู่ในรูป) <= 900 เลื่อนรูปไปทางขวา */
.sks-hero-ov::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(233,231,236,0) 40%,rgba(238,236,240,.6) 62%,rgba(240,239,242,.9) 78%)}
@media (max-width:900px){
	.sks-hero-ov::before{background:linear-gradient(180deg,rgba(240,239,242,.1),rgba(240,239,242,.75))}
	.sks-hero-slide2 .sks-fill img{object-position:78% center}
}
/* ปุ่มลูกศรขยาย 1.08 ตอน hover | จุดเลือกสไลด์อยู่ในแคปซูลโปร่งแสง จุดที่เลือกเป็นสีแดงและใหญ่ขึ้น (Mockup .hero-dots) */
.sks-hero .elementor-swiper-button{transition:background-color .25s cubic-bezier(.22,.61,.36,1),scale .25s cubic-bezier(.22,.61,.36,1)}
.sks-hero .elementor-swiper-button:hover{scale:1.08}
.sks-hero .swiper-pagination{display:flex;align-items:center;gap:10px;width:auto;padding:9px 14px;border-radius:999px;background:rgba(20,17,15,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sks-hero .swiper-pagination .swiper-pagination-bullet{margin:0;transition:background-color .25s,transform .25s}
.sks-hero .swiper-pagination .swiper-pagination-bullet-active{background:var(--e-global-color-primary);transform:scale(1.3)}

/* ---------- หน้าแรก: about / quote (รูปหรือวิดีโอเต็มความสูงด้านข้าง section) | services (รูปขวา มีสีแดงจางทับขอบซ้าย) ----------
   Position ของ container ตั้งแยกตามขนาดจอไม่ได้ จึงทำที่นี่: > 1024 (about / quote) และ > 900 (services) วางข้าง section เต็มความสูง จอเล็กกว่าเป็นกล่องปกติ */
@media (min-width:1025px){.e-con.sks-side{position:absolute;top:0;bottom:0}.e-con.sks-side-r{right:0}.e-con.sks-side-l{left:0}}
@media (min-width:901px){.e-con.sks-svc-photo{position:absolute;top:0;right:0;bottom:0}}
.sks-svc-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--e-global-color-sksreddeep) 0%,rgba(95,16,18,0) 22%)}
@media (max-width:900px){.sks-svc-photo::before{background:linear-gradient(0deg,var(--e-global-color-sksreddeep) 0%,rgba(95,16,18,0) 30%)}}
.sks-svc-row{transition:padding-left .3s cubic-bezier(.22,.61,.36,1)}
.sks-svc-row:hover{padding-left:10px}
.sks-svc-row .elementor-widget-heading:first-child .elementor-heading-title{transition:color .3s cubic-bezier(.22,.61,.36,1),-webkit-text-stroke-color .3s cubic-bezier(.22,.61,.36,1)}
.sks-svc-row:hover .elementor-widget-heading:first-child .elementor-heading-title{color:var(--e-global-color-skswhite);-webkit-text-stroke-color:var(--e-global-color-skswhite)}

/* ---------- การ์ด: กลุ่มสินค้าลอยขึ้น 8px + เงา รูปขยาย 1.06 (Mockup ตั้งใจไว้ แต่ .reveal.in ทับ transform จนไม่ลอย ที่นี่แก้ให้ลอยจริง จดใน NOTES)
   | ข่าว รูปขยาย 1.05 | Instagram รูปขยาย 1.04 + มืดลงเล็กน้อย ---------- */
.sks-pcard,.sks-js .sks-pcard.sks-reveal.in{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1),opacity .8s cubic-bezier(.22,.61,.36,1)}
.sks-pcard:hover,.sks-js .sks-pcard.sks-reveal.in:hover{transform:translateY(-8px);box-shadow:0 22px 48px -20px rgba(30,20,15,.4);z-index:3}
.sks-pcard .sks-fill img,.sks-ncard .sks-fill img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.sks-pcard:hover .sks-fill img{transform:scale(1.06)}
.sks-ncard:hover .sks-fill img{transform:scale(1.05)}
.sks-ig .e-gallery-image{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s cubic-bezier(.22,.61,.36,1)}
.sks-ig .e-gallery-item:hover .e-gallery-image{transform:scale(1.04);filter:brightness(.92)}
/* ===== END Suksawad ===== */