/*!
 * IDL Hospital — Custom CSS
 * File: idl-custom.css
 * Purpose: เก็บ CSS ที่เขียนขึ้นเองสำหรับเว็บไซต์หลักและแคมเปญต่าง ๆ
 * Version: 1.0.0
 * Updated: 2026-08-04
 *
 * แนวทางการใช้งาน
 * - ใช้ class prefix ที่สื่อถึงงาน เช่น .idl-, .sw-, .promo-
 * - แยกโค้ดตามหัวข้อด้านล่าง
 * - หลีกเลี่ยง @import และ !important หากไม่จำเป็น
 */


/* =========================================================
   TABLE OF CONTENTS
   01. Global Utilities
   02. Shared Components
   03. Header & Footer
   04. Homepage
   05. Service Pages
   06. Promotions
   07. Reviews & Cases
   08. Surgery Wars
   09. Other Campaigns
   10. Responsive
   ========================================================= */


/* =========================================================
   01. GLOBAL UTILITIES
   CSS กลางที่ใช้ซ้ำได้หลายหน้า
   ========================================================= */

/* วาง CSS ที่ใช้ร่วมกันทั้งเว็บไซต์ตรงนี้ */


/* =========================================================
   02. SHARED COMPONENTS
   ปุ่ม, การ์ด, CTA, Slider, Sticky, Tabs ฯลฯ
   ========================================================= */

/* วาง CSS ของ Component ที่ใช้ซ้ำตรงนี้ */


/* Section ที่ครอบคอลัมน์ซ้ายและขวา */
.sw-scroll-section {
    align-items: stretch !important;
    overflow: visible !important;
}


/* คอลัมน์ด้านขวา */
.sw-scroll-right {
    position: relative;
    align-self: stretch !important;
    overflow: visible !important;
}


/* เนื้อหาที่ต้องการให้ Sticky */
.sw-scroll-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
    align-self: flex-start;
    width: 100%;
}


/* ปิด Sticky บน Mobile */
@media (max-width: 767px) {
    .sw-scroll-sticky {
        position: relative;
        top: auto;
    }
}


/* =========================================================
   03. HEADER & FOOTER
   ========================================================= */

/* วาง CSS ของ Header และ Footer ตรงนี้ */


/* =========================================================
   04. HOMEPAGE
   ========================================================= */

/* วาง CSS เฉพาะหน้าแรกตรงนี้ */


/* =========================================================
   05. SERVICE PAGES
   หน้าหมวดบริการ, Service Group, Service Detail,
   Treatment Landing Page
   ========================================================= */

/* วาง CSS ของหน้าบริการตรงนี้ */


/* =========================================================
   06. PROMOTIONS
   ========================================================= */

/* วาง CSS ของหน้าและ Component โปรโมชันตรงนี้ */


/* =========================================================
   07. REVIEWS & CASES
   ========================================================= */

/* วาง CSS ของรีวิวและ Before & After ตรงนี้ */


/* =========================================================
   08. SURGERY WARS
   แนะนำ prefix: .sw-
   ========================================================= */

/* วาง CSS ของแคมเปญ Surgery Wars ตรงนี้ */

#surgery-wars p {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.8em;
    color: #3a3a3a;
    font-weight: 300;
    margin-bottom: 0;
}

#surgery-wars .font-size16 p {
    font-size: 16px;
}
#cta-bottom a {
    color: #fff;
}
#cta-bottom a:hover {
    color: #fff;
}

/*-----Heading & Title --------*/
.title-v1 {
	margin-bottom: 0rem;
	font-family: "Noto Sans Thai", Sans-serif !important;
}
.title-v1 h2{
	margin-bottom: 0rem;
}
.title-v2 p {
    font-family: "Cormorant Garamond", serif !important;  
    font-style: italic;
    font-weight: 600;
    font-size: inherit !important;
    margin-bottom: 6px;
}
.title-v3 {
     font-family: "Cormorant Garamond", serif !important;
     display: inline-block !important;
    background: linear-gradient(100deg, #2BA8DA 0%, #5FC7F4 40%, #E23B5A 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
   font-size: 38px !important;
    line-height: normal !important;
    font-weight: 700 !IMPORTANT;
}
@media only screen and (max-width: 767px) { 
    .title-v3 {
    font-size: 30px !important;
}}
.title-v4 {
    font-style: italic;
    font-size: 70px;
    font-weight: 600;
    line-height: normal !important;
    color: rgba(95, 199, 244, 0.5);
    font-family: 'Cormorant Garamond', serif;
}
.title-v4.color2 {
        color: rgba(13, 112, 183, 0.3);
}
.title-v4.color3 {
        color: rgba(9, 70, 131, 0.4);
}

/*----------Sub Title------*/

.sub-title-v2 p {
    font-family: Inter !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    line-height: normal;
    color: rgb(127, 168, 204);
}


/*--------Text-Gradient---------*/
.text-gradient-v1 {
    background: linear-gradient(120deg, rgb(95, 199, 244), rgb(43, 168, 218)) text;
      color: transparent !important;
    display: inline-block !important;
     font-family: "Noto Sans Thai", Sans-serif !important;
     font-weight: 600 !important;
    font-size: inherit !important;
    line-height: normal !important;
}

.text-gradient-v2 {
   background: linear-gradient(120deg, #9AD9F7, #5FC7F4 45%, #2BA8DA);
   -webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
    color: transparent !important;
      display: inline-block !important;
     font-family: "Noto Sans Thai", Sans-serif !important;
     font-weight: 700 !important;
    font-size: inherit !important;
    line-height: normal !important;
    margin-bottom: 0px !important;
}

.text-gradient-v3 {
    background: linear-gradient(176deg, #FFFFFF 0%, #DCEAF8 34%, #93B0CE 66%, #D2E2F2 100%);

    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)) drop-shadow(0 0 22px rgba(95, 199, 244, .4));
   -webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
    color: transparent !important;
      display: inline-block !important;
     font-family: "Noto Sans Thai", Sans-serif !important;
     font-weight: 700 !important;
    font-size: inherit !important;
    line-height: normal !important;
}

.text-gradient-metal {
    background: linear-gradient(176deg, #FFFFFF 0%, #DCEAF8 34%, #93B0CE 66%, #D2E2F2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)) drop-shadow(0 0 22px rgba(95, 199, 244, .4));
}


/*--------BG-Gradient---------*/
.bg-gradient-v1{
    background: radial-gradient(1000px 620px at 82% 14%, rgba(95, 199, 244, 0.3), rgba(95, 199, 244, 0) 58%), radial-gradient(820px 560px at 10% 96%, rgba(43, 168, 218, 0.2), rgba(43, 168, 218, 0) 55%), linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgb(244, 250, 253) 52%, rgb(228, 242, 251) 100%);

}
.bg-gradient-v2{
    background: radial-gradient(1000px 600px at 8% 4%, rgba(43, 168, 218, 0.2), transparent 55%), linear-gradient(158deg, rgb(227, 236, 246) 0%, rgb(219, 230, 242) 60%, rgb(224, 233, 244) 100%);
}

.bg-gradient-v3 {
    background: radial-gradient(900px 620px at 8% 8%, rgba(43, 120, 220, 0.62), transparent 55%), radial-gradient(900px 620px at 94% 92%, rgba(226, 59, 90, 0.52), transparent 55%), linear-gradient(rgb(15, 43, 82), rgb(11, 30, 58));
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bg-gradient-v4 {

    background: radial-gradient(1000px 620px at 88% 40%, rgba(43, 168, 218, 0.24), rgba(43, 168, 218, 0) 56%), linear-gradient(rgb(11, 33, 64) 0%, rgb(10, 29, 56) 100%);
    border-top: 1px solid rgba(95, 199, 244, 0.1);
}

.bg-gradient-v5  {
    background: radial-gradient(1050px 660px at 50% -12%, rgba(66, 128, 214, 0.55), rgba(40, 84, 158, 0) 58%), radial-gradient(760px 520px at 92% 108%, rgba(95, 199, 244, 0.22), rgba(95, 199, 244, 0) 55%), linear-gradient(163deg, rgb(20, 61, 120) 0%, rgb(15, 39, 64) 54%, rgb(11, 31, 53) 100%);
}

.bg-gradient-v6  {
    width: 100%;
    background: radial-gradient(1000px 540px at 50% -12%, rgba(95, 199, 244, 0.3), rgba(95, 199, 244, 0) 62%), linear-gradient(rgb(233, 244, 251) 0%, rgb(214, 233, 245) 100%);
}
.bg-gradient-v7 {
    background: radial-gradient(1000px 620px at 50% -10%, rgba(95, 199, 244, 0.28), transparent 56%), linear-gradient(rgb(228, 241, 250) 0%, rgb(215, 233, 247) 100%);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, rgb(226, 59, 90), rgb(95, 199, 244), rgb(43, 168, 218)) 1 / 1 / 0 stretch;
}

.bg-gradient-v8{
    width: 100%;
    background: radial-gradient(920px 480px at 100% 0%, rgba(95, 199, 244, 0.16), rgba(95, 199, 244, 0) 55%), linear-gradient(rgb(225, 239, 249) 0%, rgb(234, 243, 251) 100%);
}


.bg-gradient-v9 {
    width: 100%;
    background: radial-gradient(120% 130% at 50% -20%, rgb(21, 63, 116) 0%, rgb(13, 39, 72) 38%, rgb(5, 15, 30) 100%);
}

/*--------Box Shadow---------*/
.box-shadow-img-v1 img {
    box-shadow: rgba(0, 0, 0, 0.9) 0px 24px 54px -26px, rgba(95, 199, 244, 0.14) 0px 0px 0px 1px;
}

.box-shadow-img-v2 img {
    box-shadow: rgba(43, 168, 218, 0.5) 0px 14px 34px -10px;
}

/* -------- Tagline & Pre-heading--------------------------------  */
.idl-gradient-subtitle .elementor-widget-container {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 50px 10px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 90, 140, 0.3);
  z-index: 1;
}
/* แถบฟ้าไล่จาง */
.idl-gradient-subtitle .elementor-widget-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(95, 199, 244, 0.35) 12%,
    rgba(0, 160, 220, 0.95) 32%,
    rgba(0, 135, 205, 1) 50%,
    rgba(0, 160, 220, 0.95) 68%,
    rgba(95, 199, 244, 0.35) 88%,
    rgba(255, 255, 255, 0) 100%
  );
}


/* ========================================
   SURGERY WARS STICKY CTA
======================================== */


/* Container ชั้นนอก กว้าง 100% */
.surgery-sticky {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 99999;
    width: 100%;
    /* ซ่อนตอนเปิดหน้าเว็บ */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
    /* ป้องกันพื้นที่ว่างของ Container บังการคลิกหน้าเว็บ */
    pointer-events: none;
}

/* แสดง Sticky CTA */
.surgery-sticky.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0s;
}

/* กล่อง CTA ด้านใน */
.surgery-sticky-box {
    position: relative;
    /* ทำให้ปุ่มและลิงก์ด้านในกดได้ */
    pointer-events: auto;
}

/* เส้นแสงด้านบนของกล่อง CTA */
.surgery-sticky-box::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 180px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        #5fc7f4,
        transparent
    );
    box-shadow:
        0 0 14px rgba(95, 199, 244, 0.8);
    pointer-events: none;
}


/* Mobile */
@media (max-width: 767px) {

    .surgery-sticky {
        bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .surgery-sticky-box::before {
        width: 120px;
    }

}







/* =========================================================
   09. OTHER CAMPAIGNS
   สร้างหัวข้อย่อยและ prefix แยกตามชื่อแคมเปญ
   ========================================================= */

/*
 * Campaign: ชื่อแคมเปญ
 * Prefix: .campaign-
 */


/* =========================================================
   10. RESPONSIVE
   เรียงจากหน้าจอใหญ่ลงมาหน้าจอเล็ก
   ========================================================= */

@media (max-width: 1200px) {
    /* Laptop */
}

@media (max-width: 1024px) {
    /* Tablet Landscape */
}

@media (max-width: 767px) {
    /* Mobile */
}