/* ############################################################
   CSS เพิ่มเติมสำหรับ UI แบบใหม่ (รูปที่ 2)
   นำไปวางต่อท้ายไฟล์ custom-style.css เดิม
   ############################################################ */

/* ---------- ส่วนหัว: ชื่อกองทุน + วงกลมความเสี่ยง ---------- */
.fund-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fund-name-row .fundName {
    margin-bottom: 0;
}

.risk-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #40525D;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.icw .box-item .fundNameTh {
    color: #666;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ---------- ตารางผลการดำเนินการ ---------- */
.perf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    margin-bottom: 12px;
}
.perf-table thead th:nth-child(1) {
    width: 25%;
}
.perf-table thead th:nth-child(2) {
    width: 40%;
}
.perf-table thead th:nth-child(3) {
    width: 40%;
}

.perf-table th,
.perf-table td {
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
}
.perf-table .row-fund td {
    padding: 0 12px;
}
.perf-table .row-fund td:not(:first-child),
.perf-table .row-benchmark td:not(:first-child) {
    font-size: 16px;
}

.perf-table th:not(:first-child) {
    color: #333333;
    font-weight: 400;
    padding-top: 0;
}

.perf-table th:first-child,
.perf-table td:first-child {
    text-align: center;
    color: #333;
    font-weight: 600;
    /* width: 30%; */
}

.perf-table th:nth-child(2),
.perf-table td:nth-child(2){
    border-right: 1px solid #CCCCCC;
}

/* แถว "กองทุน" พื้นหลังเขียวอ่อน */
.perf-table .row-fund td {
    background: #E7F5ED !important;
}

.perf-table .row-fund td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.perf-table .row-fund td:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.row-benchmark td:first-child {
    font-weight: 500;
}

.text-red {
    color: #E02020 !important;
}

/* badge K WEALTH Top Picks (ใช้ .risk .b-green เดิม แค่เว้นระยะ) */
.top-picks-badge {
    margin-top: 8px;
    margin-bottom: 16px !important;
}
.icw .top-picks-badge.b-green {
    background: #08554D;
    padding: 4px 12px;
    border-radius: 24px;
}

/* ---------- กล่องไฮไลต์ Top Performing Funds ---------- */
.highlight-box {
    background: #EAFCF1;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.highlight-box ul,
.highlight-box ul li,
.promo-section ul,
.promo-section ul li,
.fund-highlight ul,
.fund-highlight ul li,
#sc-fyi ul,
#sc-fyi ul li {
    list-style: disc;
}
.highlight-box ul,
.icw .fund-highlight ul {
    font-size: 13px;
    margin: 0;
}
.highlight-box ul,
.promo-section ul,
.icw .fund-highlight ul,
#sc-fyi ul {
    padding-left: 16px;
}
.highlight-box ul li::marker,
.promo-section ul li::marker,
.fund-highlight ul li::marker,
#sc-fyi ul li::marker {
    font-size: 10px;
}
.fund-highlight ul li {
    margin-bottom: 8px;
}

#sc-fyi ul {
    font-size: 16px;
    line-height: 1.5;
}

.highlight-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.highlight-box-title p {
    color: #08554D;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

.highlight-list {
    margin: 0 0 0 4px;
    padding-left: 20px;
}

.highlight-list li {
    color: #333;
    font-size: 13px;
    line-height: 20px;
}

/* ---------- bullet จุดเด่นทั่วไป ---------- */
.fund-desc-list {
    margin: 0 0 12px 4px;
    padding-left: 20px;
}

.fund-desc-list li {
    color: #333;
    font-size: 13px;
    line-height: 1.8;
}

/* ---------- ส่วนโปรโมชั่น ---------- */
.promo-section {
    margin-bottom: 8px;
}

.promo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.promo-title p {
    font-size: 13px;
}

.icw .box-item .promo-list {
    margin: 0 0 0 20px;
    padding-left: 20px;
}

.promo-list li {
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- ปุ่ม: เว้นระยะระหว่างปุ่ม K+ กับ KMyFunds ---------- */
/* .content-btn เดิมใช้ gap: 16px อยู่แล้ว ถ้าอยากให้ชิดขึ้นตามรูป
   ปรับ gap ตรงนี้ได้ */
.box-item .content-btn {
    gap: 16px;
}
/* ############################################################
   CSS เพิ่มเติม (v2) — mobile แสดงบางส่วนตอนยุบ ตามรูปที่ 1
   นำไปวางต่อท้าย custom-style.css
   (ใช้ร่วมกับ custom-style-additions.css ชุดแรก)
   ############################################################ */

@media screen and (max-width: 767px) {

    /* เดิม .box-more ถูกซ่อนทั้งก้อนบน mobile
       เปลี่ยนเป็นแสดงตลอด แล้วไปซ่อนเฉพาะรายการที่ติด .mb-collapse แทน */
    .icw .box-item .box-more {
        display: block;
    }

    /* ตอนที่ card ยังไม่ถูก expand ให้ซ่อนเฉพาะส่วนที่ติด .mb-collapse */
    .box-item:not(.expanded) .mb-collapse {
        display: none !important;
    }

    /* ปุ่ม "แสดงเพิ่มเติม" ตามรูปที่ 1 ไม่มีเส้นคั่นด้านบน */
    .btn-more-mb {
        /* border-top: 0; */
        padding-top: 16px;
    }
}

/* ปุ่มแสดงเพิ่มเติม + ลูกศร chevron */
.btn-more-mb .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00A94F;
    font-weight: 600;
    cursor: pointer;
}

.btn-more-mb .chev {
    position: relative;
    top: 1px;
}

.g-txt {
    display: block;
}

.text-date {
    color: #666666;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

ul.promo-list li {
    list-style: disc;
}


.btn-more-mb .label-less {
    display: none;
}
 
.box-item.expanded .btn-more-mb .label-more {
    display: none;
}
 
.box-item.expanded .btn-more-mb .label-less {
    display: inline;
}

a.btn3.btn-radius-wealth {
    background-color: #0A6A60;
}

.promotion-list .content .c-g {
    height: 5.5em;
}


.promotion-list .content h3 {
    height: 2.9em;
}