.elementor-39 .elementor-element.elementor-element-05b634c:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-05b634c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEF3FB;background-image:url("https://learn.phorbantutor.com/wp-content/uploads/2026/05/banner-01-scaled-1.jpg");background-position:center center;background-size:cover;}.elementor-39 .elementor-element.elementor-element-05b634c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:70px 0px 70px 0px;}.elementor-39 .elementor-element.elementor-element-05b634c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-8f30d01{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-39 .elementor-element.elementor-element-8f30d01 .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;font-size:30px;font-weight:700;line-height:1.2em;color:#55C2FF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-25d135c{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:18px;font-weight:400;color:#333333;}.elementor-39 .elementor-element.elementor-element-5d34a4b:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-5d34a4b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-39 .elementor-element.elementor-element-5d34a4b > .elementor-container{max-width:1200px;}.elementor-39 .elementor-element.elementor-element-5d34a4b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-5px;margin-bottom:0px;padding:70px 0px 70px 0px;z-index:2;}.elementor-39 .elementor-element.elementor-element-5d34a4b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-39 .elementor-element.elementor-element-ddc9448 > .elementor-widget-container{margin:2px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-pagination{justify-content:center;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-list{column-gap:20px;row-gap:20px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card{background-color:#FFFFFF;border-style:solid;border-width:0px 0px 0px 0px;border-color:#C8D3DF80;border-radius:20px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card:hover{border-radius:8px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-card-footer{border-top-color:#C8D3DF80;background-color:#FFFFFF;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-avatar{width:25px !important;height:25px !important;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-course-name, .elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-course-name a{color:#333333;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-course-name{font-family:"Noto Sans Thai", Sans-serif;font-size:16px;font-weight:600;line-height:1.2em;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-author-meta.tutor-meta-key{color:#939393;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-author-meta.tutor-meta-value{color:#000000;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-author-meta{font-family:"Noto Sans Thai", Sans-serif;font-size:14px;font-weight:400;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-category-meta.tutor-meta-key{color:#939393;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-category-meta.tutor-meta-value{color:#000000;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .etlms-course-category-meta{font-family:"Noto Sans Thai", Sans-serif;font-size:14px;font-weight:400;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-ratings .tutor-ratings-stars{color:#FFC400;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-ratings .tutor-ratings-average, .elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-ratings .tutor-ratings-count{font-family:"Noto Sans Thai", Sans-serif;font-size:16px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .etlms-course-list-pagination-wrap{font-family:"Prompt", Sans-serif;font-size:16px;font-weight:400;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .etlms-course-list-pagination-wrap .etlms-pagination .page-numbers{color:#FFFFFF;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .etlms-course-list-pagination-wrap .etlms-pagination{gap:10px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-course-price{font-family:"Noto Sans Thai", Sans-serif;font-size:16px;font-weight:400;color:#000000;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-card-footer .tutor-btn-outline-primary{font-family:"Prompt", Sans-serif;font-size:12px;font-weight:500;border-color:#55C2FF;color:#FFFFFF;border-style:solid;border-width:0px 0px 0px 0px;border-radius:5px 5px 5px 5px;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-card-footer .tutor-btn-outline-primary [class^="tutor-icon-"]{color:#FFFFFF !important;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-card-footer .tutor-btn-outline-primary:hover{border-color:#F687B3;background-color:#F687B3;color:#FFFFFF;}.elementor-39 .elementor-element.elementor-element-ddc9448 .etlms-course-list-main-wrap .tutor-course-card .tutor-card-footer .tutor-btn-outline-primary:hover [class^="tutor-icon-"]{color:#FFFFFF !important;}@media(max-width:1024px){.elementor-39 .elementor-element.elementor-element-05b634c{padding:60px 20px 60px 20px;}.elementor-39 .elementor-element.elementor-element-8f30d01 .elementor-heading-title{font-size:35px;}.elementor-39 .elementor-element.elementor-element-25d135c{text-align:center;}.elementor-39 .elementor-element.elementor-element-5d34a4b{padding:60px 20px 60px 20px;}.elementor-39 .elementor-element.elementor-element-ddc9448 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-39 .elementor-element.elementor-element-05b634c{padding:50px 10px 50px 10px;}.elementor-39 .elementor-element.elementor-element-8f30d01 .elementor-heading-title{font-size:27px;}.elementor-39 .elementor-element.elementor-element-25d135c{font-size:16px;}.elementor-39 .elementor-element.elementor-element-5d34a4b{padding:50px 10px 50px 10px;}}/* Start custom CSS for etlms-course-list, class: .elementor-element-ddc9448 *//* ==========================================================================
   1. ปรับแต่งลูกศร ซ้าย-ขวา (Arrows) และระยะห่างจากการ์ด
   ========================================================================== */
/* เพิ่มพื้นที่ข้างกล่องหลัก เพื่อดึงให้ลูกศรขยับห่างออกจากตัวการ์ดเพิ่มขึ้น */
.etlms-carousel-main-wrap {
    padding: 0 10px !important; /* ปรับเพิ่มจากเดิมเพื่อดันลูกศรออกไป */
    overflow: visible !important;
    position: relative !important;
}

.etlms-carousel-arrow {
    background-color: #55c2ff !important; /* สีพื้นหลังตอนปกติ (สีฟ้าตามบรีฟ) */
    color: #ffffff !important;            /* สีของไอคอนลูกศร */
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    z-index: 10;
}

/* ดันตำแหน่งลูกศรฝั่งซ้ายออกไป */
.etlms-carousel-arrow-prev {
    left:15px !important;
}

/* ดันตำแหน่งลูกศรฝั่งขวาออกไป */
.etlms-carousel-arrow-next {
    right: 15px !important;
}

/* ลูกศรตอนโดนเมาส์ชี้ (Hover) และตอนกดคลิก (Active) */
.etlms-carousel-arrow:hover,
.etlms-carousel-arrow:active {
    background-color: #f687b3 !important; /* เปลี่ยนเป็นสีชมพูตามบรีฟ */
    color: #ffffff !important;
    transform: scale(1.05);
}


/* ==========================================================================
   2. ปรับแต่งจุดเลื่อนสไลด์ (Dots) ระยะห่าง และโทนสีใหม่
   ========================================================================== */
/* เพิ่มระยะห่างระหว่างกลุ่มจุด Dot กับตัวการ์ดด้านบน 20px */
.slick-dots {
    margin-top: 20px !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
}

.slick-dots li {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 6px !important;
    transition: width 0.3s ease !important;
}

/* จุดสถานะปกติ (Normal Dot) */
.slick-dots li button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: #e1e1e1 !important;       /* สีจุดตอนปกติ (สีเข้ม 333333) */
    border-radius: 50% !important;
    font-size: 0 !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.3s ease !important;
}

.slick-dots li button:before {
    display: none !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ที่จุดปกติ (Hover Dot) */
.slick-dots li:hover button {
    background: #f687b3 !important;       /* สีตอน Hover เป็นสีชมพู */
}

/* จุดที่กำลังแสดงผลอยู่ (Active Dot) */
.slick-dots li.slick-active {
    width: 28px !important;               /* ยืดความยาวแคปซูลเท่าเดิม */
}

.slick-dots li.slick-active button {
    background: #f687b3 !important;       /* สีจุดตอน Active เป็นสีชมพู */
    border-radius: 9999px !important;
}

.elementor-80 .elementor-element.elementor-element-27f9a97 .etlms-carousel-main-wrap .slick-dots {
    bottom: -30px;
}

.tutor-course-list-btn,.tutor-btn-outline-primary{
    background: #55c2ff;
    border-radius: 8px;
}


/* ==========================================================================
   แก้ปัญหาเงาโดนตัดขอบ (Clipped Shadow) และเซ็ตเงาให้เนียนเท่ากัน
   ========================================================================== */

/* 1. ปรับเหลือเฉพาะพื้นที่ บน-ล่าง เพื่อไม่ให้การ์ดข้างๆ โผล่ล้นเข้ามา */
#etlms-slick-responsive .slick-list {
    padding: 20px 0 !important;  /* เปลี่ยน ซ้าย-ขวา เป็น 0px */
    margin: -20px 0 !important;  /* เปลี่ยน ซ้าย-ขวา เป็น 0px */
}

/* 2. กำหนดเงาของการ์ดใหม่ให้ฟุ้งละมุนและเท่ากันเป๊ะทุกด้าน */
.tutor-card.tutor-course-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; 
    border: none !important; 
    transition: all 0.3s ease !important;
}

/* 3. เอฟเฟกต์ตอนเอาเมาส์ชี้ (Hover) ให้การ์ดดูลอยขึ้นอย่างมีมิติ */
.tutor-card.tutor-course-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important; 
    transform: translateY(-2px) !important; 
}

/* ==========================================================================
   1. ปลดล็อกความกว้างของ Tutor LMS ให้ขยายเต็ม 100% เท่าแนวข้อความด้านบน
   ========================================================================== */
.tutor-wrap.tutor-container.etlms-carousel-main-wrap {
    max-width: 100% !important;  /* สั่งพังกำแพงความกว้างเดิมของ Tutor LMS */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   2. ตั้งค่าระยะห่างของการ์ดเป็น 10px พอดี
   ========================================================================== */
/* แบ่งพื้นที่ช่องว่างเป็น ซ้าย 5px + ขวา 5px = รวมกันได้ 10px ระหว่างการ์ดพอดี */
#etlms-slick-responsive .slick-slide {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* ==========================================================================
   3. ดึงขอบการ์ดตัวริมสุดให้ขยับออกไปชนแนวเส้นดำเป๊ะๆ (หักลบช่องว่าง 5px)
   ========================================================================== */
#etlms-slick-responsive .slick-list {
    padding-top: 20px !important;    /* เหลือพื้นที่ บน-ล่าง ให้เงาการ์ดฟุ้งสวย */
    padding-bottom: 20px !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    margin-top: -20px !important;
    margin-bottom: -20px !important;
    margin-left: -5px !important;    /* ดึงขอบการ์ดซ้ายสุดให้ไปแปะตรงเส้นดำ */
    margin-right: -5px !important;   /* ดึงขอบการ์ดขวาสุดให้ไปแปะตรงเส้นดำ */
}

.tutor-card.tutor-course-card {
    border-radius: 15px !important; /* ปรับเพิ่มความมนของการ์ด (สามารถเปลี่ยนเป็น 20px ถ้าอยากให้มนขึ้นอีก) */
    overflow: hidden !important;    /* สำคัญมาก: ช่วยตัดขอบรูปภาพด้านบนให้โค้งมนตามทรงของการ์ด ไม่ล้นทะลุออกมา */
}/* End custom CSS */