.elementor-23 .elementor-element.elementor-element-bbbcb28:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-bbbcb28 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#36404F;}.elementor-23 .elementor-element.elementor-element-bbbcb28{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:70px 0px 70px 0px;}.elementor-23 .elementor-element.elementor-element-bbbcb28 > .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-23 .elementor-element.elementor-element-df26500{text-align:center;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-df26500 .elementor-heading-title{font-family:"Prompt", Sans-serif;font-size:40px;font-weight:500;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs{text-align:center;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li span.ha-breadcrumbs-text{color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li span.ha-breadcrumbs-text:hover{color:#FFFFFF;font-weight:500;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-start span.ha-breadcrumbs-text{color:#FFFFFF;font-family:"Prompt", Sans-serif;font-size:16px;font-weight:400;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-start span.ha-breadcrumbs-text .ha-breadcrumbs-home-icon{color:#FFFFFF;-webkit-transition:all .4s;transition:all .4s;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-start span.ha-breadcrumbs-text:hover{color:#FFFFFF;font-weight:500;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-start span.ha-breadcrumbs-text:hover .ha-breadcrumbs-home-icon{color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-separator span.ha-breadcrumbs-separator-icon{color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-separator span.ha-breadcrumbs-separator-text{color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-separator span.ha-breadcrumbs-separator-icon, .elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-separator span.ha-breadcrumbs-separator-text{font-family:"Prompt", Sans-serif;font-size:13px;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs li.ha-breadcrumbs-item.ha-breadcrumbs-end span.ha-breadcrumbs-text{color:#FFFFFF;font-family:"Prompt", Sans-serif;font-size:16px;font-weight:400;}.elementor-23 .elementor-element.elementor-element-e4dc487{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-61c419a > .elementor-container{max-width:900px;}.elementor-23 .elementor-element.elementor-element-61c419a:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-61c419a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-61c419a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:70px 0px 70px 0px;}.elementor-23 .elementor-element.elementor-element-61c419a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23 .elementor-element.elementor-element-503f7ac.elementor-column > .elementor-widget-wrap{justify-content:center;}@media(max-width:1024px){.elementor-23 .elementor-element.elementor-element-bbbcb28{padding:60px 20px 60px 20px;}.elementor-23 .elementor-element.elementor-element-df26500{text-align:center;}.elementor-23 .elementor-element.elementor-element-df26500 .elementor-heading-title{font-size:35px;}.elementor-23 .elementor-element.elementor-element-61c419a{padding:60px 20px 60px 20px;}}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-bbbcb28{padding:50px 10px 50px 10px;}.elementor-23 .elementor-element.elementor-element-df26500{text-align:center;}.elementor-23 .elementor-element.elementor-element-df26500 .elementor-heading-title{font-size:30px;}.elementor-23 .elementor-element.elementor-element-e4dc487 .ha-breadcrumbs{text-align:center;}.elementor-23 .elementor-element.elementor-element-61c419a{padding:50px 10px 50px 10px;}}/* Start custom CSS for shortcode, class: .elementor-element-a3c001d *//* =========================================================
   ตกแต่งหน้า My Account ของ Paid Member Subscriptions
   (เวอร์ชัน 3 - แก้ไขปัญหาขอบตารางแตก)
========================================================= */

/* 1. จัดเมนู Tab ให้อยู่กึ่งกลาง */
.pms-account-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 1px;
    border-bottom: none !important;
    
}

.pms-account-navigation-link a {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f1f5f9;
    color: #36404f !important;
    text-decoration: none !important;
    border-radius: 99px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}
@media (max-width: 480px) {
.pms-account-navigation-link a {
    display: inline-block;
    padding: 5px 20px;
    font-size:15px;
    font-weight: 400px;
    }
}

.pms-account-navigation-link a:hover,
.pms-account-navigation-link a.pms-account-navigation-link--active {
    background-color: #36404f !important; 
    color: #ffffff !important;
}

/* =========================================================
   2. สร้างกล่อง Body ด้านล่าง (แยกตั้งค่า ฟอร์ม กับ ตาราง)
========================================================= */

/* ก. หน้าที่เป็น ฟอร์ม และ ข้อความ (Profile, Payments) */
.pms-account-navigation ~ form,
.pms-account-navigation ~ div.pms-subscription-plan,
.pms-account-navigation ~ p {
    display: block !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(200, 211, 223, 0.5) !important;
    border-radius: 10px !important;
    padding: 30px !important;
    min-height: 450px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    margin-top: 30px;
}

/* ข. หน้าที่เป็น 'ตาราง' (Subscriptions) - ห้ามใช้ padding ทับตารางตรงๆ */
.pms-account-navigation ~ table {
    display: table !important; /* บังคับให้เป็นตารางเหมือนเดิม */
    background-color: #ffffff !important;
    border: 1px solid rgba(200, 211, 223, 0.5) !important;
    border-radius: 10px !important;
    padding: 0 !important; /* ลบ padding ออกเพื่อไม่ให้เส้นขอบด้านในแตก */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important; /* ตัดมุมมนให้เนียน */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    margin-top: 30px !important;
}

/* จัดข้อความกลางกล่อง (สำหรับ No payments found) */
.pms-account-navigation ~ p {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #64748b !important;
    font-size: 16px !important;
}

/* =========================================================
   3. ตกแต่งรายละเอียดตารางด้านในให้ดูคลีน
========================================================= */
/* เราจะเพิ่มช่องว่าง "ด้านในเซลล์" แทน เพื่อให้ดูมี Padding 30px ภายนอกตามที่คุณต้องการ */
table.pms-account-subscription-details-table td,
table.pms-account-payments-table td,
table.pms-account-payments-table th {
    padding: 20px 30px !important; /* ดันข้อความให้ห่างจากขอบซ้าย-ขวา 30px */
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle;
    color: #334155;
}

table.pms-account-subscription-details-table tr:last-child td,
table.pms-account-payments-table tr:last-child td {
    border-bottom: none !important;
}

/* ไฮไลท์สีพื้นหลังให้คอลัมน์ซ้ายสุดของตาราง */
table.pms-account-subscription-details-table td:first-child {
    font-weight: 600;
    color: #39475a;
    background-color: #f8fafc;
    width: 35%;
}

/* =========================================================
   4. ตกแต่งปุ่ม Actions
========================================================= */
.pms-account-subscription-action-link {
    display: inline-block;
    padding: 8px 18px;
    margin-right: 8px;
    margin-bottom: 5px;
    background-color: #39475a !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.pms-account-subscription-action-link:hover { opacity: 0.8; }
.pms-account-subscription-action-link.pms-account-subscription-action-link__abandon {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* สีสถานะ */
.status-canceled { color: #ef4444 !important; font-weight: bold; }
.status-active { color: #10b981 !important; font-weight: bold; }


.woocommerce-js input.button {
    background: #36404f ;
    color: #fff;
    border-radius: 50px;
    padding: 10px 50px;
    
}

/* =========================================================
   แก้ไขเมนู Tab ให้เรียงแนวนอนและปัดบรรทัด (โดยเฉพาะในมือถือ)
========================================================= */
.pms-account-navigation ul {
    display: flex !important;
    flex-direction: row !important; /* บังคับให้เรียงแนวนอนเสมอ */
    flex-wrap: wrap !important; /* ถ้าพื้นที่ไม่พอ ให้ปัดลงบรรทัดใหม่ */
    justify-content: center !important; /* จัดให้อยู่กึ่งกลาง */
    gap: 10px !important; /* ระยะห่างระหว่างปุ่ม 10px */
}

/* ล็อกขนาดกล่องของแต่ละปุ่มไม่ให้ขยายเต็มจอในมือถือ */
.pms-account-navigation ul li {
    display: block !important;
    width: auto !important; /* ป้องกันการโดนบังคับกว้าง 100% */
    margin: 0 !important; /* เคลียร์ระยะห่างเดิมทิ้ง เพื่อใช้ gap แทน */
}

.woocommerce-page input[type=text] ,.pms-form input[type=password]{
    border-radius: 5px;
}

#pms_edit-profile-form > ul > li:nth-child(7) > input[type=submit]{
    background: #36404f;
    color: #fff;
    border-radius: 50px;
}/* End custom CSS */