/* ============================================================
   MRTA e-Learning — หน้าแรก (modules/home)
   ขนาดทั้งหมดอิงแบบดีไซน์ที่ความกว้าง 1440px (เนื้อหากว้าง 1302px)
   ============================================================ */

.el-home {
    --el-navy: #002777;
    --el-navy-2: #2f4a85; /* เดิม #405d99 (6.1:1) - WCAG AAA 7:1 บนพื้น --el-bg และพื้นชิป */
    --el-muted: #384c7d; /* เดิม #576eae - 8:1 บนพื้น --el-bg */
    --el-blue: #1a47a0; /* เดิม #2963ff (4.6:1) - 8.1:1 บนพื้น --el-bg */
    --el-red: #a8151c; /* เดิม #d82028 (5:1) - ตัวหนังสือแดง / ตัวขาวบนแดง 7.5:1 (WCAG AAA) */
    --el-green: #10ae64;
    --el-bg: #f6f9fd;
    --el-track: #dfe9f8;
    --el-chip: #dfe9f7;
    --el-line: #d7dbe0;
    --el-tag-border: #bfc9dd;
    --el-shadow: 0 3px 18px rgba(0, 39, 119, 0.08);
    --el-font-head: 'Prompt', sans-serif;
    --el-font-body: 'IBM Plex Sans Thai', 'Prompt', sans-serif;

    background: var(--el-bg);
    color: var(--el-navy);
    font-family: var(--el-font-body);
    font-size: 16.5px;
    line-height: 1.45;
    text-align: left;
    padding-bottom: 72px;
}
.el-home *,
.el-home *::before,
.el-home *::after { box-sizing: border-box; }
.el-home p { margin: 0; }
/* ธีมเก่ามี p { font-family: Roboto } (main-styles.css) - ให้ <p> ในหน้านี้ใช้ฟอนต์ของหน้า
   ใช้ :where() ให้ specificity เท่าคลาสเดียว คลาสที่กำหนดฟอนต์เองด้านล่าง (เช่น Prompt) จึงยังชนะ */
.el-home :where(p) { font-family: inherit; }
.el-home a { color: inherit; text-decoration: none; }
/* ธีมเก่า (main-styles.css / curriculum.css ...) ใส่เส้นใต้สีส้มให้ลิงก์ที่อยู่ใน <p> และพื้นส้มตัวขาวตอน hover
   หน้านี้ไม่ใช้สไตล์นั้น - ล้างทิ้งแล้วให้ hover เป็นสีฟ้าแทน */
.el-home p a {
    border-bottom: 0;
    background: transparent;
    transition: color .15s;
}
.el-home p a:hover,
.el-home p a:focus,
.el-home p a:active {
    background: transparent;
    color: var(--el-blue);
}
.el-home button { font-family: inherit; }
.el-home [hidden] { display: none !important; }

.el-home .el-container {
    max-width: 1332px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- ปุ่มจาก <x-button> - ปรับขนาด/สีกรมท่าตามแบบ ---------- */
.el-home .btn-app {
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 2px;
    font-family: var(--el-font-head);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.2;
}
/* ต้องใส่ color ซ้ำทุก variant เพราะ .el-home a { color: inherit } แรงกว่า .btn-app-fill ของ component
   (ปุ่มที่มี href เป็น <a> จะได้ตัวหนังสือกรมท่าทับพื้นกรมท่า) */
.el-home .btn-app-fill { background: var(--el-navy); border-color: var(--el-navy); color: #fff; }
.el-home .btn-app-fill:hover,
.el-home .btn-app-fill:focus-visible { background: var(--el-blue); border-color: var(--el-blue); color: #fff; }
.el-home .btn-app-fill:active { background: var(--el-navy-2); border-color: var(--el-navy-2); color: #fff; }

.el-home .btn-app-outline { color: var(--el-navy); }
.el-home .btn-app-outline:hover,
.el-home .btn-app-outline:focus-visible { background: var(--el-navy); border-color: var(--el-navy); color: #fff; }

.el-home .btn-app-success { background: #d9f1e8; border-color: transparent; color: #0b7242; } /* ตัวเขียวบนพื้นเขียวอ่อนต้องเข้มขึ้นให้ผ่าน 4.5:1 */
.el-home .btn-app-success:hover,
.el-home .btn-app-success:focus-visible { background: var(--el-green); border-color: var(--el-green); color: #fff; }

/* ลูกศรเส้นบาง → ตามแบบ (ไม่มีใน font awesome 5) */
.el-home .el-arrow {
    position: relative;
    display: inline-block;
    width: 19.5px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.el-home .el-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8.5px;
    height: 8.5px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
    margin-right: 1px;
}

/* <x-see-more> ในหน้านี้เป็นลิงก์ตัวหนังสือสีฟ้า ไม่ใช่ปุ่มแคปซูล */
.el-home .btn-app.el-link-more {
    gap: 9px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--el-blue);
    font-family: var(--el-font-head);
    font-weight: 500;
    font-size: 18px;
    white-space: nowrap;
}
.el-home .el-link-more .el-arrow { top: 3px; }
.el-home .btn-app.el-link-more:hover { background: none; color: var(--el-navy); }

.el-home .el-chip {
    display: inline-flex;
    align-items: center;
    height: 28.5px;
    padding: 0 12px;
    background: var(--el-chip);
    border-radius: 6px;
    color: var(--el-navy);
    font-size: 16.5px;
    white-space: nowrap;
}

.el-home .el-progress-bar {
    flex: 1;
    height: 7.5px;
    background: var(--el-track);
    border-radius: 4px;
    overflow: hidden;
}
.el-home .el-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--el-blue);
    border-radius: 4px;
}

/* ---------- หัวข้อ section (ตัวหนา + เส้นใต้เทา มีขีดแดงตรงกลาง) ---------- */
.el-home .el-sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.el-home .el-sec-title {
    margin: 0;
    color: var(--el-navy);
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 28.5px;
    line-height: 37px;
}
.el-home .el-sec-head::after {
    content: '';
    width: 249px;
    height: 3px;
    margin-top: 7.5px;
    background:
        linear-gradient(var(--el-red), var(--el-red)) center top / 56.5px 3px no-repeat,
        linear-gradient(#b3bcd0, #b3bcd0) center bottom / 100% 1px no-repeat;
}

/* ============================================================
   HERO
   (breadcrumb ย้ายไปเป็นตัวกลางของทุกหน้า: includes/breadcrumbs + components.css)
   ============================================================ */
/* <x-hero variant="banner"> เต็มจอ ไม่มีมุมโค้ง/ไม่มีไล่สีทับ (ภาพ 1920x450 ฝั่งซ้ายเป็นฟ้าอ่อนว่างไว้วางข้อความ - ตัวหนังสือกรมท่า)
   ตำแหน่ง/ขนาดชุดเดียวกับ hero ของ mrta-news (.nw-hero) - แก้ที่ใดให้แก้ทุกระบบให้ตรงกัน:
   กรอบกว้างสุด 1920 / ข้อความเยื้องซ้าย 8.5vw / หัวเรื่อง 3.7vw / คำโปรย 1.1vw / จัดกลางแนวตั้ง
   ความสูงตามสัดส่วนภาพ (23.4vw) ไม่ใช่ค่าคงที่ - ของเดิมตรึง 337.5px ภาพจึงถูกครอบบน-ล่างทิ้ง */
.el-home .el-hero.fe-hero-banner {
    display: flex;
    align-items: center;
    min-height: clamp(220px, 23.4vw, 450px);
    padding: 0;
    border-radius: 0;
    background: #eef5fd;   /* ฟ้าอ่อนตามฝั่งซ้ายของรูป - กรมท่า 13:1 / แดง 5:1 (ตัวอักษรใหญ่) */
}
.el-home .el-hero .fe-hero-bg { background-position: right center; }
.el-home .el-hero.fe-hero-banner::before { display: none; }
.el-home .el-hero .fe-hero-text {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 8.5vw, 10.25rem) clamp(2rem, 4vw, 4.5rem);
    /* หัวเรื่องเยื้องเข้ามาจากตัวหนังสือของ breadcrumb ("หน้าหลัก" = หมุด 15px + ช่อง 8px = 23px) อีก 2vw */
    padding-left: calc(clamp(1rem, 8.5vw, 10.25rem) + 23px + 2vw);
}
.el-home .el-hero .fe-hero-text h1 {
    margin: 0;
    color: #002777;
    font-family: var(--el-font-head);
    font-weight: 700;
    font-size: clamp(2rem, 3.7vw, 4.5rem);
    line-height: 1.2;
}
.el-home .el-hero .fe-hero-text p {
    margin: clamp(.6rem, 1.2vw, 1.4rem) 0 0;
    max-width: 36em;
    color: #002777;
    font-family: var(--el-font-head);
    font-size: clamp(.9rem, 1.1vw, 1.35rem);
    line-height: 1.95;
}
/* "e" ของ e-Learning สีแดงตามแบบ (prop accent ของ x-hero) */
.el-home .el-hero .fe-hero-accent { color: #c8102e; }
/* บรรทัดรองใต้หัวเรื่อง (ระบบอื่นไม่มี) - ชิดหัวเรื่อง แล้วคำโปรยเว้นระยะเท่าของ news */
.el-home .el-hero .fe-hero-text p.fe-hero-sub {
    margin-top: clamp(.2rem, .4vw, .5rem);
    font-weight: 500;
    font-size: clamp(1rem, 1.35vw, 1.6rem);
    line-height: 1.5;
}

/* ============================================================
   STATS
   ============================================================ */
/* z-index: การ์ดซ้อนขึ้นไปบนขอบล่างของ hero - ไล่สี/ข้อความของ hero (z-index 1) ต้องไม่ทับการ์ด */
.el-stats { position: relative; z-index: 3; margin-top: -22.5px; }
.el-stats-card {
    display: flex;
    align-items: stretch;
    height: 121.5px;
    padding: 15px 0;
    background: #fff;
    border-radius: 7.5px;
    box-shadow: var(--el-shadow);
}
.el-stat {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
    min-width: 0;
}
.el-stat + .el-stat { border-left: 1px solid #e1e3e4; }
.el-stat-icon {
    flex: none;
    width: 48px;
    display: flex;
    justify-content: center;
    color: var(--el-navy);
}
.el-stat-icon svg { width: 48px; height: 42px; fill: currentColor; }
.el-stat-body { min-width: 0; }
.el-stat-label,
.el-stat-unit {
    font-family: var(--el-font-head);
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}
.el-stat-unit { line-height: 27px; }
.el-stat-value {
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 31px;
    line-height: 31.5px;
    white-space: nowrap;
}
.el-stat-text {
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

/* ============================================================
   SEARCH
   ============================================================ */
.el-search { padding-top: 45px; }
.el-search-form {
    display: flex;
    width: 636px;
    max-width: 100%;
    height: 45px;
    margin: 0 auto;
}
.el-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 15px 0 24px;
    background: #fff;
    border: 1px solid var(--el-muted);
    border-right: 0;
    border-radius: 4.5px 0 0 4.5px;
    color: var(--el-navy-2);
    cursor: text;
}
.el-search-input i { font-size: 13px; }
.el-search-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--el-navy);
    font-family: var(--el-font-body);
    font-size: 16.5px;
}
.el-search-input input::placeholder { color: var(--el-navy-2); opacity: 1; }
.el-home .btn-app.el-search-btn {
    width: 96px;
    padding: 0;
    border-radius: 0 4.5px 4.5px 0;
    font-family: var(--el-font-body);
    font-weight: 400;
    font-size: 16.5px;
}

.el-search-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}
/* <x-button variant="outline"> ทรงแท็ก - ขอบเทาอ่อนตามแบบ ชี้แล้วเป็นกรมท่าทึบตาม component */
.el-home .btn-app.el-tag {
    height: 43.5px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid var(--el-tag-border);
    border-radius: 4.5px;
    color: var(--el-navy);
    font-family: var(--el-font-body);
    font-weight: 400;
    font-size: 16.5px;
}
.el-home .btn-app.el-tag:hover,
.el-home .btn-app.el-tag:focus { background: var(--el-navy); border-color: var(--el-navy); color: #fff; }

/* ============================================================
   SECTION: เส้นทางการเรียนรู้ของฉัน
   ============================================================ */
.el-path { padding-top: 52.5px; }
.el-path-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1037.5px;
    margin: 46px auto 0;
}
.el-path-card {
    display: flex;
    flex-direction: column;
    height: 435px;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--el-shadow);
    overflow: hidden;
}
.el-path-head {
    flex: none;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-navy);
    color: #fff;
    font-family: var(--el-font-head);
    font-weight: 500;
    font-size: 21px;
}
.el-path-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
}
.el-path-total {
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 28.5px;
    line-height: 33px;
}
.el-path-sub { margin-top: 2.5px !important; line-height: 24px; }

.el-split-bar {
    display: flex;
    gap: 4.5px;
    height: 6px;
    margin-top: 24px;
}
.el-split-bar > span { flex-basis: 0; min-width: 0; }
.el-split-bar > span[style*="flex-grow: 0;"] { display: none; }
.el-split-bar.is-empty { background: var(--el-track); }
.el-split-bar.is-empty > span { display: none; }

.el-home .is-green { background: var(--el-green); }
.el-home .is-red { background: var(--el-red); }
.el-home .is-blue { background: var(--el-blue); }

.el-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}
.el-legend-label { line-height: 24px; }
.el-legend-value {
    display: flex;
    align-items: center;
    gap: 10.5px;
    margin-top: 2.5px !important;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 16px;
    line-height: 22.5px;
}
.el-legend .text-end .el-legend-value { justify-content: flex-start; }
.el-legend-value i {
    width: 16.5px;
    height: 16.5px;
    border-radius: 3px;
}
.el-home .el-path-btn {
    display: flex;
    height: 46.5px;
    margin-top: auto;
}

.el-last-cover {
    display: block;
    flex: none;
    height: 135px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--el-track);
}
.el-last-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-home .el-last-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 24px;
}

/* <x-empty-state> ในหน้านี้ */
.el-home .empty-state { color: var(--el-navy-2); }
.el-home .empty-state i { font-size: 42px; color: var(--el-muted); margin-bottom: 12px; }
.el-home .empty-state p { font-size: 16.5px; font-weight: 500; }
/* ปุ่มในสถานะว่าง (เข้าสู่ระบบ / เลือกคอร์สเรียน) - .el-home .btn-app ไม่มีความสูง ต้องกำหนดเองเหมือน .el-cc-btn */
.el-home .empty-state-action { margin-top: 18px; }
.el-home .empty-state-action .btn-app { height: 40px; min-width: 168px; padding: 0 28px; font-size: 18px; }

.el-last-title {
    margin-top: 9px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
}
.el-progress-label {
    margin-top: 13.5px !important;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 16px;
    line-height: 19.5px;
}
.el-progress {
    display: flex;
    align-items: center;
    gap: 7.5px;
    margin-top: 2px;
}
.el-progress .el-progress-bar { height: 8.5px; border-radius: 4.5px; }
.el-progress-pct {
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1;
    padding-top: 9px;
}
/* เส้นทางการเรียนรู้: บรรทัดเสริมใต้ legend / บทเรียนล่าสุด / กำหนดเรียนข้างป้ายความคืบหน้า */
.el-path-note {
    margin-top: 12px !important;
    color: var(--el-muted);
    font-size: 14.5px;
    line-height: 21px;
}
.el-last-lesson {
    margin-top: 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--el-navy-2);
    font-size: 14.5px;
    line-height: 22px;
}
.el-last-lesson i { margin-right: 4px; }
.el-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.el-last-deadline {
    color: var(--el-muted);
    font-family: var(--el-font-body);
    font-weight: 400;
    font-size: 13.5px;
    white-space: nowrap;
}

/* ============================================================
   SECTION: หลักสูตร (แท็บ + ตัวกรอง + carousel)
   ============================================================ */
.el-courses { padding-top: 52.5px; }

.el-tabs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--el-line);
}
.el-home .el-tabs.app-tabs {
    flex-wrap: nowrap;
    gap: 0 60px;
    margin: 0;
    border-bottom: 0;
}
.el-home .app-tab {
    padding: 0 0 15px;
    color: var(--el-navy-2);
    font-family: var(--el-font-head);
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    white-space: nowrap;
}
.el-home .app-tab:hover { color: var(--el-navy); }
.el-home .app-tab.on { color: var(--el-navy); font-weight: 600; }
.el-home .app-tab.on::after {
    bottom: 1px;
    height: 3px;
    background: var(--el-red);
}
.el-home .el-tabs-head .btn-app.el-link-more { padding-bottom: 12px; }

.el-filters {
    display: flex;
    gap: 16px;
    margin-top: 38.5px;
}
.el-filter {
    position: relative;
    display: flex;
    align-items: center;
    width: 337px;
    height: 46px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--el-muted);
    border-radius: 4.5px;
}
.el-filter-label {
    flex: none;
    padding: 0 15px;
    border-right: 1px solid #ebeced;
    line-height: 28.5px;
    white-space: nowrap;
}
.el-filter .app-dd {
    flex: 1;
    min-width: 0;
    height: 100%;
}
.el-filter .app-dd-toggle {
    height: 100%;
    padding: 0 45px 0 12px;
    background-color: #fff; /* พื้นทึบใต้ตัวหนังสือ (ลูกศรเป็น background-image) - กรอบก็เป็นขาวอยู่แล้ว */
    background-position: right 18px center;
    background-size: 13px;
    border: 0;
    border-radius: 0 4.5px 4.5px 0;
    color: var(--el-navy);
    text-align: center;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 15px;
}
.el-filter .app-dd-menu { width: 100%; }
.el-filter .app-dd-menu .dropdown-item {
    white-space: normal;
    font-family: var(--el-font-body);
    font-size: 15px;
}

.el-carousel {
    position: relative;
    margin-top: 38.5px;
}
/* เผื่อที่ให้เงาการ์ดไม่โดนตัด (swiper หัก padding ออกตอนคำนวณความกว้าง slide) */
.el-carousel .swiper {
    padding: 15px;
    margin: -15px;
}
.el-carousel .swiper-slide { height: auto; }
.el-home .el-course-empty { padding: 45px 0; }

.el-carousel-nav {
    position: absolute;
    top: 128.5px;
    z-index: 5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 3px 15px rgba(0, 39, 119, 0.14);
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.el-carousel-nav.is-prev { left: -2px; }
.el-carousel-nav.is-next { left: calc(100% + 2px); }
.el-carousel-nav svg {
    width: 16.5px;
    height: 30px;
    fill: none;
    stroke: var(--el-navy);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.el-carousel-nav.is-prev svg { margin-left: -3px; }
.el-carousel-nav.is-next svg { margin-right: -3px; }
.el-carousel-nav.swiper-button-disabled { opacity: .45; cursor: default; }
.el-carousel-nav.swiper-button-lock { display: none; }

/* <x-course-carousel> วางได้ทุกหน้า - root มี .el-home ให้สไตล์การ์ด/ปุ่มทำงาน แต่ไม่เอาพื้นหลัง/ระยะล่างของหน้า */
.el-home.el-cc-carousel { background: transparent; padding-bottom: 0; }

.el-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--el-shadow);
    overflow: hidden;
}
.el-cc-cover { display: block; height: 187.5px; background: var(--el-track); }
.el-cc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-cc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 30px;
}
.el-cc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}
.el-cc-top .el-chip { max-width: 70%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 28.5px; }
.el-cc-rating { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.el-cc-rating i { color: #ffde24; font-size: 15px; }
.el-cc-title {
    height: 60px;
    margin: 9px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--el-navy);
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
}
.el-cc-meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11.5px;
    border-top: 2px solid #eceef2;
    line-height: 24px;
}
.el-cc-meta > span:not(.el-cc-meta-br) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.el-cc-meta > span:nth-child(1)::after,
.el-cc-meta > span:nth-child(2)::after {
    content: '';
    width: 1px;
    height: 15px;
    margin: 0 6px 0 -4.5px;
    background: #cfd5e1;
}
.el-cc-meta i { font-size: 13px; width: 13.5px; text-align: center; }
.el-cc-meta-br { flex-basis: 100%; height: 0; }
.el-cc-desc {
    height: 48px;
    margin-top: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
}
.el-cc-progress {
    display: flex;
    align-items: center;
    gap: 7.5px;
    margin-top: 18px;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 22.5px;
}
.el-home .el-cc-btn {
    display: flex;
    height: 37.5px;
    margin-top: 10.5px;
}

/* ============================================================
   SECTION: ปฏิทินการเรียนของฉัน
   ============================================================ */
/* ย่อลงจากแบบ ~25% (แบบเดิมปฏิทินสูงเกือบ 500px ใหญ่เกินเมื่อเทียบกับส่วนอื่น) */
.el-calendar { padding-top: 52.5px; }
.el-cal-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 36px;
    margin-top: 44px;
    align-items: start;
}
.el-cal-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--el-shadow);
    overflow: hidden;
    padding-bottom: 10px;
}
.el-cal-card .ec-cal-head {
    height: 48px;
    margin: 0;
    justify-content: center;
    gap: 14px;
    background: var(--el-navy);
}
.el-cal-card .ec-cal-title {
    min-width: 130px;
    text-align: center;
    color: #fff;
    font-family: var(--el-font-head);
    font-weight: 500;
    font-size: 18px;
}
.el-cal-card .ec-cal-nav { width: 28px; height: 28px; color: #fff; font-size: 13px; }
.el-cal-card .ec-cal-nav:hover { background: rgba(255, 255, 255, .12); }
.el-cal-card .ec-cal-grid {
    row-gap: 0;
    padding: 8px 8px 0;
    font-size: 15px;
}
.el-cal-card .ec-cal-dow {
    padding: 0;
    line-height: 42px;
    color: var(--el-navy);
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 14.5px;
}
.el-cal-card .ec-cal-day {
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 7px auto;
    color: var(--el-navy);
    font-family: var(--el-font-body);
    font-size: 15px;
}
.el-cal-card .ec-cal-day:hover { background: var(--el-chip); }
.el-cal-card .ec-cal-day.muted { color: #8093bb; } /* ช่องวันนอกเดือน = disabled จางได้ (ดู event-calendar) */
/* แบบไม่เน้นวันนี้ เน้นเฉพาะวันที่มีรายการ */
.el-cal-card .ec-cal-day.today { background: none; color: var(--el-navy); font-weight: 400; }
.el-cal-card .ec-cal-day.has-event { background: var(--el-red); color: #fff; }
.el-cal-card .ec-cal-day.has-event::after { display: none; }

/* สูงพอดี 3 รายการ และจบใกล้ ๆ ขอบล่างปฏิทิน */
.el-cal-list {
    height: 253px;
    margin-top: 22px;
    padding-right: 18px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--el-navy) transparent;
}
.el-cal-list::-webkit-scrollbar { width: 6px; }
.el-cal-list::-webkit-scrollbar-track {
    background: linear-gradient(var(--el-line), var(--el-line)) center / 2px 100% no-repeat;
}
.el-cal-list::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--el-navy), var(--el-navy)) center / 3px 100% no-repeat;
}
.el-cal-item {
    display: flex;
    gap: 20px;
    min-height: 72px;
    padding: 4px 4.5px 0;
}
.el-cal-item + .el-cal-item { margin-top: 18px; }
.el-datebox {
    flex: none;
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 7.5px;
    box-shadow: var(--el-shadow);
    overflow: hidden;
    font-family: var(--el-font-head);
    font-weight: 600;
    text-align: center;
}
.el-datebox-m {
    height: 25px;
    line-height: 25px;
    background: var(--el-navy);
    color: #fff;
    font-size: 15px;
}
.el-datebox-d {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}
.el-cal-item-body { min-width: 0; }
.el-cal-item-body .el-chip { height: 24px; padding: 0 10px; font-size: 14px; }
.el-cal-item-title {
    color: var(--el-navy);
    margin-top: 6px !important;
    font-family: var(--el-font-head);
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
}
.el-cal-item-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px !important;
    font-size: 14.5px;
    line-height: 22px;
}
.el-cal-item-time i { font-size: 12.5px; }

/* แท็บคอร์สเรียนของฉัน - แถบความคืบหน้า + สีป้ายตามสถานะ
   (เดือนที่คอร์สไม่มีวันสำคัญ กล่องวันที่เป็นไอคอน "กำลังเรียน" แทน) */
.el-datebox-icon {
    align-items: center;
    justify-content: center;
    background: var(--el-chip);
    color: var(--el-navy);
    font-size: 24px;
}
/* แถบยาวเท่ากันทุกแถว: กล่อง % กว้างคงที่พอสำหรับ "100%" (เดิมกว้างตามตัวเลข แถบแต่ละแถวจึงยาวไม่เท่ากัน) */
.el-cal-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 340px);
    margin-top: 8px;
}
.el-cal-progress-pct {
    flex: 0 0 48px;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}
.el-cal-course .el-cal-item-body { flex: 1; }
.el-cal-course.is-done .el-chip { background: #d9f1e8; color: #0b7242; }
.el-cal-course.is-done .el-progress-bar > span { background: var(--el-green); }
.el-cal-course.is-overdue .el-chip { background: #fbe3e4; color: var(--el-red); }
.el-cal-course.is-overdue .el-cal-item-time { color: var(--el-red); }
/* ============================================================
   RESPONSIVE — แบบดีไซน์เป็นจอเดสก์ท็อป ตรงนี้แค่กันไม่ให้แตกในจอเล็ก
   ============================================================ */
@media (max-width: 1199.98px) {
    .el-stats-card { height: auto; flex-wrap: wrap; row-gap: 15px; }
    .el-stat { flex: 1 1 30%; }
    .el-stat:nth-child(4) { border-left: 0; }
    /* การ์ดเรียงลงมาทีละใบ - สูงตามเนื้อหา ไม่ต้องยืดเท่ากัน */
    .el-path-grid { grid-template-columns: 1fr; max-width: 460px; }
    .el-path-card { height: auto; }
    .el-home .el-path-btn { margin-top: 24px; }
    .el-filter { width: auto; flex: 1; }
    .el-cal-grid { grid-template-columns: 1fr; }
    /* ปฏิทินกับรายการอยู่คนละแถวแล้ว รายการโชว์ทั้งหมดไม่ต้องมีกรอบเลื่อน */
    .el-cal-list { height: auto; padding-right: 0; overflow: visible; }
}
/* จอ < 992: ภาพประกอบของแบนเนอร์เลื่อนมาอยู่หลังตัวหนังสือ - ไล่สีฟ้าอ่อนทับให้อ่านตัวหนังสือกรมท่าออก (แบบเดียวกับ news) */
@media (max-width: 991.98px) {
    .el-home .el-hero.fe-hero-banner::before {
        display: block;
        background: linear-gradient(90deg, rgba(238, 245, 253, .94) 0%, rgba(238, 245, 253, .8) 60%, rgba(238, 245, 253, 0) 100%);
    }
}
/* ---------- มือถือ (< 768px) ---------- */
@media (max-width: 767.98px) {
    .el-home { font-size: 15px; }
    .el-home .el-container { padding: 0 16px; }

    /* hero: ขนาดตัวหนังสือลดตาม clamp เอง ที่นี่แค่ขยับภาพ + ลดระยะเยื้อง แบบเดียวกับ news */
    .el-home .el-hero.fe-hero-banner { min-height: clamp(220px, 23.4vw, 450px); }
    .el-home .el-hero .fe-hero-bg { background-position: 72% center; }
    /* จอแคบข้อความยาวเลยไปทับรถไฟฟ้า - ไล่สีคลุมถึงขอบขวา */
    .el-home .el-hero.fe-hero-banner::before {
        background: linear-gradient(90deg, rgba(238, 245, 253, .94) 0%, rgba(238, 245, 253, .86) 70%, rgba(238, 245, 253, .5) 100%);
    }
    .el-home .el-hero .fe-hero-text { padding-inline: clamp(1rem, 4.7vw, 5.75rem); padding-left: calc(clamp(1rem, 4.7vw, 5.75rem) + 23px); }
    .el-home .el-hero .fe-hero-text p br { display: none; }

    /* สถิติ: ตาราง 2 คอลัมน์ ไอคอนซ้าย-ตัวเลขขวาเหมือนจอใหญ่ แต่ย่อไอคอนและให้ป้ายตัดบรรทัดได้ */
    .el-stats-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
        padding: 2px 0;
    }
    .el-stat {
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-left: 0;
    }
    .el-stat:nth-child(even) { border-left: 1px solid #e1e3e4; }
    .el-stat:nth-child(n+3) { border-top: 1px solid #e1e3e4; }
    .el-stat-icon { width: 30px; }
    .el-stat-icon svg { width: 30px; height: 26px; }
    .el-stat-label { white-space: normal; font-size: 13.5px; line-height: 18px; }
    .el-stat-unit { font-size: 13.5px; line-height: 18px; }
    .el-stat-value { font-size: 22px; line-height: 26px; }
    .el-stat-text { max-width: 100%; font-size: 14px; line-height: 20px; }

    .el-search { padding-top: 32px; }
    .el-search-tags { gap: 8px; margin-top: 20px; }
    .el-home .btn-app.el-tag { height: 38px; padding: 0 12px; font-size: 15px; }

    .el-sec-title { font-size: 22px; line-height: 32px; }
    .el-sec-head::after { width: 200px; }

    /* เส้นทางการเรียนรู้: การ์ดสูงตามเนื้อหา ไม่ต้องยืดเท่ากันเพราะเรียงลงมา */
    .el-path { padding-top: 40px; }
    .el-path-grid { gap: 14px; margin-top: 28px; }
    .el-path-card { height: auto; }
    .el-path-head { height: 42px; font-size: 19px; }
    .el-path-body { padding: 20px; }
    .el-path-total { font-size: 25px; line-height: 30px; }
    .el-split-bar,
    .el-legend { margin-top: 16px; }
    .el-home .el-path-btn { margin-top: 22px; height: 44px; }
    .el-home .el-last-empty { padding: 16px 0 4px; }
    .el-home .empty-state i { font-size: 36px; margin-bottom: 8px; }

    /* หลักสูตร: แท็บอยู่แถวเดียว (ย่อฟอนต์ให้พอดี 4 แท็บ จอแคบกว่านั้นเลื่อนซ้ายขวาได้ ไม่โชว์ scrollbar)
       ซ่อนปุ่มลูกศรของ carousel ใช้ปัดแทน (เห็นขอบการ์ดถัดไปเป็นคำใบ้) */
    .el-courses { padding-top: 40px; }
    .el-home .el-tabs.app-tabs { flex-wrap: nowrap; gap: 0 14px; overflow-x: auto; scrollbar-width: none; }
    .el-home .el-tabs.app-tabs::-webkit-scrollbar { display: none; }
    .el-home .app-tab { padding-bottom: 10px; font-size: 14px; line-height: 24px; }
    .el-home .el-tabs-head .el-link-more { display: none; }
    /* ตัวกรอง 3 ตัวอยู่แถวเดียว: ป้ายชื่อเป็นข้อความเล็กเหนือกล่อง แทนที่จะเป็นแถบยาวเต็มจอ 3 แถบ */
    .el-filters { gap: 8px; margin-top: 18px; }
    .el-filter {
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .el-filter-label {
        padding: 0 0 4px 2px;
        border-right: 0;
        color: var(--el-navy-2);
        font-size: 13px;
        line-height: 18px;
    }
    .el-filter .app-dd {
        height: 40px;
        background: #fff;
        border: 1px solid var(--el-muted);
        border-radius: 4.5px;
    }
    .el-filter .app-dd-toggle {
        padding: 0 26px 0 10px;
        background-position: right 9px center;
        background-size: 11px;
        border-radius: 4.5px;
        font-size: 14px;
        text-align: left;
    }
    .el-carousel { margin-top: 24px; }
    .el-carousel-nav { display: none; }
    .el-cc-cover { height: 170px; }

    /* ปฏิทิน: รายการโชว์ทั้งหมด ไม่ต้องมีกรอบเลื่อน */
    .el-calendar { padding-top: 40px; }
    .el-cal-list { height: auto; padding-right: 0; overflow: visible; }
    .el-cal-item { gap: 14px; }
    .el-datebox { width: 64px; height: 64px; }
    .el-datebox-m { height: 24px; line-height: 24px; font-size: 14px; }
    .el-datebox-d { font-size: 22px; }
    .el-cal-item-title { font-size: 16px; line-height: 24px; }
    .el-cal-card .ec-cal-dow { line-height: 40px; }
    .el-cal-card .ec-cal-day { margin: 6px auto; }
}