.elementor-kit-5{--e-global-color-primary:#021341;--e-global-color-secondary:#6EC1E4;--e-global-color-text:#000000;--e-global-color-accent:#6EC1E4;--e-global-color-a083e0b:#E8F6FF;--e-global-color-4ad04a3:#D6E6F2;--e-global-typography-primary-font-family:"Noto Sans Thai";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Noto Sans Thai";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Noto Sans Thai";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Noto Sans Thai";--e-global-typography-accent-font-weight:500;font-size:17px;font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{font-size:16px;font-weight:500;}.elementor-kit-5 h1{font-size:50px;font-weight:600;}.elementor-kit-5 h2{font-size:38px;font-weight:600;}.elementor-kit-5 h3{font-size:28px;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   VASTU (vastu69.com) – Custom CSS ฉบับสมบูรณ์
   วางที่: Elementor > Site Settings > Custom CSS
   แทนที่ CSS เดิมทั้งหมด
   อัปเดต: แก้ .vs-banner บังด้วย Background Slideshow เก่า (ปัญหาเดิมที่เคยแก้ hero หน้าแรก)
   ========================================================= */

/* ---------- 0) ซ่อน/แสดง Header คอม-มือถือ ---------- */
@media (max-width: 1024px) {
    #desktop-header {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    #mobile-header {
        display: none !important;
    }
}

/* ---------- 1) Header ใสทับแบนเนอร์ ทุกหน้าที่มีแบนเนอร์ ---------- */
:root { --vs-header-h: 90px; }
@media (max-width: 1024px) { :root { --vs-header-h: 72px; } }

/* ค่าเริ่มต้นทุกหน้า: Header สีกรมท่า (เช่น หน้าบทความ) */
.elementor-location-header {
    background-color: #021341;
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* ล้างสีพื้นกล่องด้านใน ให้เห็นสีจากกรอบนอกอย่างเดียว */
#desktop-header,
#mobile-header,
.elementor-location-header > .e-con,
.elementor-location-header > .e-flexbox,
.elementor-location-header > .elementor-element {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* แก้ Header เต็มขอบจอ: ตัด padding ซ้าย-ขวาที่ container Elementor ดันเข้ามา 10px */
.elementor-location-header > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* โลโก้และเมนูชั้นบนเป็นสีขาว */
.elementor-location-header img { filter: brightness(0) invert(1); }
.elementor-location-header .elementor-item,
.elementor-location-header .elementor-item:hover,
.elementor-location-header .elementor-item.elementor-item-active,
.elementor-location-header .elementor-menu-toggle,
.elementor-location-header .elementor-menu-toggle i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.elementor-location-header .elementor-item:after { background-color: #6EC1E4 !important; }

/* หน้าที่มีแบนเนอร์ (หน้าแรก + 7 หน้าจากเทมเพลต): Header ใสลอยทับแบนเนอร์ */
body:has(.vs-hero, .vs-crumb) .elementor-location-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background-color: transparent;
}
body.admin-bar:has(.vs-hero, .vs-crumb) .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar:has(.vs-hero, .vs-crumb) .elementor-location-header { top: 46px; }
}

/* เลื่อนลงแล้วเปลี่ยนเป็นสีกรมท่า (ไม่ต้องใช้สคริปต์) */
@supports (animation-timeline: scroll()) {
    @keyframes vsHeaderFill {
        from { background-color: rgba(2,19,65,0); box-shadow: 0 0 0 rgba(2,19,65,0); }
        to   { background-color: #021341; box-shadow: 0 6px 24px rgba(2,19,65,.25); }
    }
    body:has(.vs-hero, .vs-crumb) .elementor-location-header {
        animation: vsHeaderFill linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
}
/* สำรองสำหรับเบราว์เซอร์รุ่นเก่า (ใช้คู่กับสคริปต์ใน Custom Code) */
body.vs-scrolled .elementor-location-header {
    background-color: #021341;
    box-shadow: 0 6px 24px rgba(2,19,65,.25);
}

/* แบนเนอร์หน้าอื่นยืดขึ้นไปใต้ Header โดยพื้นที่ที่มองเห็นยังเท่าเดิม */
[data-elementor-type="wp-page"] > .e-con:has(.vs-crumb) {
    padding-top: calc(56px + var(--vs-header-h)) !important;
    min-height: calc(260px + var(--vs-header-h)) !important;
}
@media (max-width: 767px) {
    [data-elementor-type="wp-page"] > .e-con:has(.vs-crumb) {
        padding-top: calc(40px + var(--vs-header-h)) !important;
        min-height: calc(220px + var(--vs-header-h)) !important;
    }
}

/* แถบปุ่มหมวดที่ติดด้านบน ให้อยู่ใต้ Header ไม่ถูกบัง */
.elementor-sticky--active:has(.vs-jumpnav) { top: var(--vs-header-h) !important; }
body.admin-bar .elementor-sticky--active:has(.vs-jumpnav) { top: calc(var(--vs-header-h) + 32px) !important; }

/* ---------- 1.2) รูปพื้นหลัง Hero หน้าแรก ---------- */

/* ปิด Background Slideshow เก่าที่ค้างอยู่ใน container */
.vs-hero > .elementor-background-slideshow { display: none !important; }

.vs-hero {
    position: relative;
    isolation: isolate;
    background-image: url('https://www.vastu69.com/wp-content/uploads/2026/09/vastu-hero-desktop.webp') !important;
    background-size: cover !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/*
   ฟิล์มเดียว ไล่เฉดแบบ "eased" (โค้งแบบ ease-out จริง ไม่ใช่เส้นตรงหลายท่อน)
   วิธีนี้แก้ปัญหาเห็นเป็นขั้น/เป็นก้อน เพราะ browser จะไล่สีเป็นเส้นตรงระหว่างจุดสี 2 จุดเสมอ
   ถ้าจุดสีน้อยหรือระยะห่างไม่ลื่น จะเห็นรอยหักมุมของความชัน (Mach band) ตรงรอยต่อแต่ละช่วง
   ที่นี่ใช้ 11 จุดสีตามเส้นโค้ง cubic ease-out จึงไล่เนียนจนตาแทบมองไม่เห็นรอยต่อ
   และใช้ "ฟิล์มเดียว" ครอบมุมบนซ้าย (บริเวณ Header + ข้อความ) แทนการซ้อน 2 ฟิล์ม
   (แนวตั้ง + แนวทแยง) แบบเดิม ซึ่งเป็นสาเหตุหลักที่ทำให้เห็นเป็น "ก้อน" ตรงมุมบนซ้าย
   เพราะสองฟิล์มซ้อนทับกันเข้มขึ้นเฉพาะจุดนั้น ส่วนพื้นที่อื่นของภาพนอกวงนี้จะสว่างชัดเจน
   ไม่มืดลงเลย ทำให้ยังเห็นรูปภาพได้เต็มที่
*/
.vs-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: radial-gradient(62% 68% at 20% 0%,
        rgba(2,19,65,.48)  0%,
        rgba(2,19,65,.354) 10%,
        rgba(2,19,65,.26)  20%,
        rgba(2,19,65,.183) 30%,
        rgba(2,19,65,.133) 40%,
        rgba(2,19,65,.093) 50%,
        rgba(2,19,65,.06)  60%,
        rgba(2,19,65,.036) 70%,
        rgba(2,19,65,.018) 80%,
        rgba(2,19,65,.006) 90%,
        rgba(2,19,65,0)    100%) !important;
}

/* แท็บเล็ต: ข้อความแคบลง วงไล่สีเล็กลงตาม แต่ใช้โค้งเดียวกัน */
@media (max-width: 1024px) {
    .vs-hero {
        background-image: url('https://www.vastu69.com/wp-content/uploads/2026/09/vastu-hero-tablet.webp') !important;
        background-position: 42% center;
    }
    .vs-hero::before {
        background: radial-gradient(78% 62% at 26% 0%,
            rgba(2,19,65,.50)  0%,
            rgba(2,19,65,.369) 10%,
            rgba(2,19,65,.271) 20%,
            rgba(2,19,65,.191) 30%,
            rgba(2,19,65,.139) 40%,
            rgba(2,19,65,.097) 50%,
            rgba(2,19,65,.063) 60%,
            rgba(2,19,65,.038) 70%,
            rgba(2,19,65,.019) 80%,
            rgba(2,19,65,.006) 90%,
            rgba(2,19,65,0)    100%) !important;
    }
}

/* มือถือ: ข้อความอยู่กึ่งกลางด้านบน วงไล่สีจึงอยู่กึ่งกลางด้านบนแทน */
@media (max-width: 767px) {
    .vs-hero {
        background-image: url('https://www.vastu69.com/wp-content/uploads/2026/09/vastu-hero-mobile.webp') !important;
        background-position: center center;
    }
    .vs-hero::before {
        background: radial-gradient(95% 46% at 50% 0%,
            rgba(2,19,65,.46)  0%,
            rgba(2,19,65,.339) 10%,
            rgba(2,19,65,.249) 20%,
            rgba(2,19,65,.176) 30%,
            rgba(2,19,65,.128) 40%,
            rgba(2,19,65,.089) 50%,
            rgba(2,19,65,.058) 60%,
            rgba(2,19,65,.035) 70%,
            rgba(2,19,65,.017) 80%,
            rgba(2,19,65,.006) 90%,
            rgba(2,19,65,0)    100%) !important;
    }
}

/* จอความละเอียดสูง: กันภาพแตกเวลาซูม */
@media (min-width: 1600px) {
    .vs-hero { background-position: center 40%; }
}

/* ---------- 1.3) แบนเนอร์หน้าสินค้า (ใช้ร่วมกันทุกหน้า) ---------- */
/*
   วิธีใช้: ไปที่ Container ที่เป็นแบนเนอร์ของหน้าสินค้าแต่ละหน้า (ตัวเดียวกับที่มี .vs-crumb อยู่ข้างใน)
   1) แท็บ Advanced > CSS Classes > พิมพ์ "vs-banner" เพิ่มเข้าไป
   2) แท็บ Style > Background > เลือก Image > อัปโหลด/เลือกรูปของหน้านั้นๆ
   ไม่ต้องตั้ง Background Size / Overlay เอง เพราะ CSS นี้จัดการให้อัตโนมัติแล้ว
   รูปพื้นหลังจะต่างกันได้ทุกหน้า แต่ได้ "ฟิล์มสีทับ + ขนาดเต็มพื้นที่" แบบเดียวกันหมด
*/

/* ปิด Background Slideshow เก่าที่ค้างอยู่ใน container (ปัญหาเดิมที่เคยแก้ .vs-hero หน้าแรก) */
.vs-banner > .elementor-background-slideshow { display: none !important; }

.vs-banner {
    position: relative;
    isolation: isolate;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}
.vs-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(2,19,65,.52) 0%,
        rgba(2,19,65,.41) 10%,
        rgba(2,19,65,.29) 25%,
        rgba(2,19,65,.20) 35%,
        rgba(2,19,65,.13) 50%,
        rgba(2,19,65,.07) 64%,
        rgba(2,19,65,.04) 76%,
        rgba(2,19,65,.02) 88%,
        rgba(2,19,65,0)   100%);
}
@media (min-width: 1600px) {
    .vs-banner { background-position: center 40% !important; }
}

/* ---------- 1.3.1) รูปพื้นหลังเฉพาะหน้า: แผ่นโพลีคาร์บอเนต แผ่นตัน ---------- */
/*
   วิธีใช้: ที่ Container แบนเนอร์ของหน้านี้ แท็บ Advanced > CSS Classes
   ใส่ 2 คลาสคั่นด้วยเว้นวรรค: "vs-banner vs-banner--solid-pc"
   ไม่ต้องตั้ง Background Image ใน Elementor แล้ว เพราะ CSS นี้ล็อกรูปไว้ให้เลย
*/
.vs-banner--solid-pc {
    background-image: url('https://www.vastu69.com/wp-content/uploads/2026/10/polycarbonate-solid-sheet-skylight-modern.webp') !important;
}

/* ---------- 2) พื้นฐาน ---------- */
html { scroll-behavior: smooth; }
#flagship, #roofing, #decor, #accessories, #compare, #quote {
    scroll-margin-top: calc(var(--vs-header-h) + 80px);
}
.elementor-button:focus-visible,
.vs-links a:focus-visible,
.vs-crumb a:focus-visible {
    outline: 3px solid #6EC1E4;
    outline-offset: 3px;
}

/* ---------- 3) ป้ายกำกับ ---------- */
.vs-badge {
    display: inline-block;
    background: #6EC1E4;
    color: #021341;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
}
.vs-badge--dark {
    background: rgba(110,193,228,.14);
    color: #6EC1E4;
    border: 1px solid rgba(110,193,228,.5);
}

/* ---------- 4) ตารางสเปก ---------- */
.vs-spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
}
.vs-spec th, .vs-spec td {
    padding: 12px 14px;
    border-bottom: 1px solid #D6E6F2;
    text-align: left;
    vertical-align: top;
}
.vs-spec th {
    width: 34%;
    color: #021341;
    font-weight: 600;
    background: #E8F6FF;
}
.vs-spec--dark th {
    background: rgba(110,193,228,.12);
    color: #6EC1E4;
    border-bottom-color: rgba(232,246,255,.18);
}
.vs-spec--dark td {
    color: #FFFFFF;
    border-bottom-color: rgba(232,246,255,.18);
}
.vs-note { font-size: 13px; color: #3A5A80; margin: 8px 0 0; }
.vs-note--dark { color: #9FC9E6; }

/* ---------- 5) แผงหมวดหมู่ (หน้าแรก) ---------- */
.vs-links { list-style: none; margin: 0; padding: 0; }
.vs-links li a {
    display: block;
    padding: 10px 0;
    color: #FFFFFF;
    font-size: 16px;
    border-bottom: 1px solid rgba(232,246,255,.22);
    text-decoration: none;
}
.vs-links li a:hover { color: #6EC1E4; }

/* ---------- 6) การ์ดสินค้า ---------- */
.vs-card {
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vs-card:hover {
    border-color: #6EC1E4 !important;
    box-shadow: 0 12px 28px rgba(2,19,65,.10);
}
.vs-card .elementor-widget-image img,
.vs-tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.vs-tile img { border-radius: 12px; }
.vs-btn--sm .elementor-button { padding: 10px 18px !important; }

/* ---------- 7) ขั้นตอน ---------- */
.vs-steps .vs-step { border-top: 3px solid #6EC1E4; padding-top: 24px; }
.vs-step-num {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #021341;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

/* ---------- 8) แถบปุ่มหน้าสินค้า ---------- */
.vs-pill .elementor-button { border-radius: 999px !important; padding: 10px 20px !important; }
@media (max-width: 767px) {
    .vs-jumpnav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .vs-jumpnav::-webkit-scrollbar { display: none; }
    .vs-jumpnav > .elementor-element { flex: 0 0 auto; }
}

/* ---------- 9) ตารางเปรียบเทียบ ---------- */
.vs-compare {
    overflow-x: auto;
    border: 1px solid #D6E6F2;
    border-radius: 12px;
    background: #FFFFFF;
}
.vs-compare table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
}
.vs-compare thead th {
    background: #021341;
    color: #FFFFFF;
    padding: 14px 16px;
    font-weight: 600;
    text-align: center;
}
.vs-compare thead th:first-child { text-align: left; }
.vs-compare thead th:nth-child(2) { background: #6EC1E4; color: #021341; }
.vs-compare tbody th {
    text-align: left;
    color: #021341;
    font-weight: 600;
    padding: 14px 16px;
    border-top: 1px solid #D6E6F2;
}
.vs-compare tbody td {
    text-align: center;
    padding: 14px 16px;
    border-top: 1px solid #D6E6F2;
}
.vs-compare tbody td:first-of-type {
    background: #E8F6FF;
    font-weight: 600;
    color: #021341;
}

/* ---------- 10) อื่นๆ ---------- */
.vs-crumb { font-size: 15px; color: #E8F6FF; }
.vs-crumb a { color: #6EC1E4; text-decoration: none; }
.vs-form .elementor-field-subgroup .elementor-field-option {
    margin: 0 18px 8px 0;
}
.vs-posts .elementor-post {
    border: 1px solid #D6E6F2;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}
.vs-posts .elementor-post__text { padding: 0 20px 22px; }
.vs-posts .elementor-post__thumbnail__link { margin-bottom: 16px !important; }
.vs-faq .elementor-accordion-item {
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* ---------- 10.1) ส่วนเพิ่มสำหรับ 6 หน้าที่เหลือ ---------- */
#carport, #awning, #commercial, #skylight, #wall, #technical-data, #map, #spec, #kit { scroll-margin-top: calc(var(--vs-header-h) + 80px); }
.vs-tip {
    background: #E8F6FF;
    border-left: 4px solid #6EC1E4;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    color: #021341;
    font-size: 15px;
    margin: 0;
}
.vs-meta { color: #3A5A80; font-size: 14px; font-weight: 600; margin: 0; }
.vs-docs td:last-child { text-align: center; }
.vs-dl {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #021341;
    border-radius: 8px;
    color: #021341;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.vs-dl:hover { background: #021341; color: #FFFFFF; }
.vs-cats .elementor-icon-box-wrapper,
.vs-contact-cards .elementor-icon-box-wrapper {
    background: #FFFFFF;
    border: 1px solid #D6E6F2;
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    transition: border-color .2s ease;
}
.vs-cats .elementor-icon-box-wrapper:hover,
.vs-contact-cards .elementor-icon-box-wrapper:hover { border-color: #6EC1E4; }
.vs-member img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.vs-gallery .elementor-gallery-title { margin: 0 8px 12px; }
.vs-map iframe { border-radius: 16px; display: block; }

/* ---------- 11) ลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .vs-card, .elementor-location-header { transition: none; }
}/* End custom CSS */