:root{--ec3-blue:#0f63b8;--ec3-navy:#123d72;--ec3-green:#22a45f;--ec3-purple:#7256c8;--ec3-orange:#f0a327;--ec3-border:#dbe6f3;--ec3-text:#17395f;--ec3-muted:#718499;--ec3-bg:#f7faff}
*{box-sizing:border-box}.ec3-student-body{margin:0;background:var(--ec3-bg);color:var(--ec3-text);overflow-x:hidden;font-family:"TH Sarabun New","TH SarabunPSK",Tahoma,sans-serif}.ec3-shell{min-height:100vh}.ec3-sidebar{position:fixed;left:0;top:0;bottom:0;width:180px;z-index:1030;padding:18px 12px;background:#fff;border-right:1px solid #e5edf6;flex-direction:column}.ec3-logo{display:block;text-decoration:none;color:#0e447e;font-size:2rem;font-weight:900;letter-spacing:-.05em;padding:0 8px 18px}.ec3-logo span{color:#efa420}.ec3-nav{display:grid;gap:5px}.ec3-nav a{display:flex;align-items:center;gap:11px;min-height:43px;padding:8px 11px;border-radius:11px;color:#425e7b;font-weight:700;text-decoration:none;font-size:1rem}.ec3-nav a i{width:22px;text-align:center;color:#2d659c}.ec3-nav a:hover,.ec3-nav a.active{background:#edf5ff;color:#0d5ca9}.ec3-sidebar-promo{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(160deg,#eff7ff,#e4f0ff);padding:16px 13px 13px;text-align:left;border:1px solid #d8e7f8}.ec3-sidebar-promo strong,.ec3-sidebar-promo span{display:block}.ec3-sidebar-promo strong{font-size:1.08rem;color:#194e82}.ec3-sidebar-promo span{font-size:.9rem;color:#637b94;line-height:1.45;margin:4px 0 62px}.ec3-promo-avatar{position:absolute;right:10px;bottom:38px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d8ecff,#fff);color:#1965ae;font-size:2rem}.ec3-sidebar-promo a{display:block;text-align:center;text-decoration:none;background:#0d63bb;color:#fff;border-radius:999px;padding:8px;font-weight:800;font-size:.87rem}.ec3-app{margin-left:180px;min-height:100vh}.ec3-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:12px;min-height:62px;padding:9px 18px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e4ebf4}.ec3-mobile-btn{border:1px solid var(--ec3-border);background:#fff;border-radius:10px;width:40px;height:40px}.ec3-search{height:40px;max-width:510px;flex:1;display:flex;border:1px solid #dbe5ef;border-radius:10px;background:#fff;overflow:hidden}.ec3-search input{flex:1;border:0;outline:0;padding:0 13px;color:#365673;background:transparent}.ec3-search button{width:44px;border:0;background:transparent;color:#245d95}.ec3-cert-top{margin-left:auto;position:relative;display:flex;align-items:center;gap:7px;text-decoration:none;color:#4a5e73;border:1px solid #e0e7ef;border-radius:10px;padding:8px 11px;background:#fff;font-weight:700;font-size:.88rem}.ec3-cert-top i{color:#efa720}.ec3-cert-top b{position:absolute;right:-5px;top:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e84c4c;color:#fff;font-size:.65rem}.ec3-user-top{border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:2px 4px}.ec3-user-face{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#183f6b,#61a8df);font-weight:900}.ec3-user-top>span:last-child{text-align:left}.ec3-user-top strong,.ec3-user-top small{display:block}.ec3-user-top strong{font-size:.9rem;color:#173b60}.ec3-user-top small{font-size:.76rem;color:#8a9aa9}.ec3-content{padding:18px}.ec3-dashboard{display:block;max-width:1500px;margin:0 auto}.ec3-main-column{width:100%;min-width:0}.ec3-main-column{min-width:0}.ec3-hero{height:230px;display:grid;grid-template-columns:1fr 1.05fr;border-radius:18px;overflow:hidden;border:1px solid #d0e2f5;background:linear-gradient(135deg,#eff8ff,#e5f1ff 58%,#eef8ff);box-shadow:0 8px 22px rgba(31,77,123,.07)}.ec3-hero-copy{padding:24px 8px 22px 25px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}.ec3-subject-chip{align-self:flex-start;background:#2b87d1;color:#fff;padding:5px 10px;border-radius:999px;font-weight:800;font-size:.8rem}.ec3-hero h1{margin:10px 0 8px;font-size:2.45rem;line-height:1.04;color:#173d6a;font-weight:900}.ec3-hero h1 span{color:#23945a}.ec3-hero p{color:#4e6c87;line-height:1.45;font-size:1rem;margin-bottom:12px}.ec3-primary-btn{align-self:flex-start;text-decoration:none;background:#0b62b9;color:#fff;border-radius:999px;padding:9px 16px;font-weight:800}.ec3-primary-btn:hover{color:#fff}.ec3-hero-art{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.ec3-hero-art img{width:100%;max-width:480px;max-height:220px;object-fit:contain;filter:drop-shadow(0 10px 13px rgba(38,84,128,.1))}.ec3-dna-float{position:absolute;color:#66a7de}.dna-a{left:8%;top:28%;font-size:2rem}.dna-b{right:9%;top:18%;font-size:1.15rem}.ec3-section-head{display:flex;justify-content:space-between;align-items:end;margin:18px 0 9px}.ec3-section-head.compact{margin-top:0}.ec3-section-head h2{font-size:1.2rem;margin:0;font-weight:900;color:#173b60}.ec3-section-head a{font-size:.82rem;color:#3970a5;text-decoration:none;font-weight:700}.ec3-learning-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ec3-learning-card{min-width:0;border:1px solid var(--ec3-border);border-radius:14px;padding:11px;background:#fff;box-shadow:0 5px 16px rgba(32,72,112,.04)}.ec3-learning-card.violet{background:linear-gradient(180deg,#f7f3ff,#fff)}.ec3-learning-card.green{background:linear-gradient(180deg,#f3fff7,#fff)}.ec3-learning-card.amber{background:linear-gradient(180deg,#fff8ec,#fff)}.ec3-learning-card.blue{background:linear-gradient(180deg,#f1f8ff,#fff)}.ec3-card-top{display:flex;justify-content:space-between;align-items:center}.ec3-status-chip{font-size:.7rem;padding:4px 7px;border-radius:999px;background:#ebe6ff;color:#6d55b8;font-weight:800}.ec3-learning-card.green .ec3-status-chip{background:#e8f9ef;color:#2b8a5e}.ec3-learning-card.amber .ec3-status-chip{background:#fff0d5;color:#c57c13}.ec3-learning-card.blue .ec3-status-chip{background:#eaf4ff;color:#2868a7}.ec3-card-visual{height:80px;display:grid;place-items:center;font-size:3.45rem;color:#6758c4}.ec3-learning-card.green .ec3-card-visual{color:#31976a}.ec3-learning-card.amber .ec3-card-visual{color:#dc9d26}.ec3-learning-card.blue .ec3-card-visual{color:#4f76c7}.ec3-learning-card h3{min-height:42px;font-size:.95rem;line-height:1.35;margin:3px 0 9px;font-weight:900;color:#173b60}.ec3-progress-line{height:6px;border-radius:99px;background:#e9eef4;overflow:hidden}.ec3-progress-line span{display:block;height:100%;border-radius:99px;background:#23a263}.ec3-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:.72rem}.ec3-card-footer span{font-weight:800;color:#536f8a}.ec3-card-footer a{text-decoration:none;background:#fff;color:#286ca9;border-radius:999px;padding:5px 9px;font-weight:800;border:1px solid #dbe6f2}.ec3-mid-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px;margin-top:18px}.ec3-recommend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ec3-recommend-card{text-decoration:none;color:#1d4268;border:1px solid var(--ec3-border);border-radius:12px;background:#fff;padding:9px;min-width:0}.ec3-rec-visual{height:68px;border-radius:9px;display:grid;place-items:center;font-size:2.4rem;margin-bottom:7px}.ec3-recommend-card.blue .ec3-rec-visual{background:#eef7ff;color:#2c72b4}.ec3-recommend-card.green .ec3-rec-visual{background:#eefaf2;color:#2f9a68}.ec3-recommend-card.purple .ec3-rec-visual{background:#f1edff;color:#7158c5}.ec3-recommend-card.pink .ec3-rec-visual{background:#fff1f4;color:#c86a85}.ec3-recommend-card strong,.ec3-recommend-card span{display:block}.ec3-recommend-card strong{font-size:.79rem;line-height:1.3}.ec3-recommend-card span{margin-top:3px;font-size:.66rem;color:#8797a6}.ec3-activity-list{display:grid;gap:7px}.ec3-activity-list a{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:8px 9px;border:1px solid var(--ec3-border);border-radius:11px;background:#fff;text-decoration:none;color:#244b70}.ec3-activity-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center}.ec3-activity-icon.amber{background:#fff4df;color:#c98a1d}.ec3-activity-icon.blue{background:#edf6ff;color:#2e70ad}.ec3-activity-icon.red{background:#fff0f0;color:#d45c5c}.ec3-activity-list strong,.ec3-activity-list small{display:block}.ec3-activity-list strong{font-size:.8rem}.ec3-activity-list small{font-size:.67rem;color:#8a99a8}.ec3-activity-list em{font-style:normal;background:#fff;border:1px solid #dce6ef;border-radius:999px;padding:5px 9px;font-size:.68rem;color:#376a9b;font-weight:800}.ec3-goal-card{display:grid;grid-template-columns:auto auto minmax(150px,1fr) minmax(120px,1.1fr) auto auto;align-items:center;gap:9px;margin-top:15px;padding:10px 12px;border:1px solid #d8e5f3;border-radius:12px;background:linear-gradient(90deg,#f7fbff,#eef6ff)}.ec3-goal-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#e8f2ff;color:#e4a326}.ec3-goal-title{font-weight:900;font-size:.82rem}.ec3-goal-desc{font-size:.72rem;color:#71859a}.ec3-goal-bar{height:7px;border-radius:99px;background:#dce7f2;overflow:hidden}.ec3-goal-bar span{display:block;height:100%;background:#3386d0;border-radius:99px}.ec3-goal-card>strong{font-size:.78rem}.ec3-goal-card>a{font-size:.7rem;text-decoration:none;border:1px solid #dbe6f2;background:#fff;border-radius:999px;padding:5px 8px;color:#2f6b9e;font-weight:800}.ec3-right-column{display:grid;gap:10px;min-width:0}.ec3-profile-panel,.ec3-guide-box,.ec3-system-box,.ec3-benefit-box,.ec3-io-card{border:1px solid var(--ec3-border);border-radius:13px;background:#fff}.ec3-profile-panel{padding:10px}.ec3-profile-row{display:flex;align-items:center;gap:8px}.ec3-profile-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#214a75,#61a5da);font-weight:900}.ec3-profile-row strong,.ec3-profile-row span{display:block}.ec3-profile-row strong{font-size:.82rem}.ec3-profile-row span{font-size:.68rem;color:#8796a5}.ec3-level-row{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem}.ec3-level-row span{color:#8795a4}.ec3-xp-bar,.ec3-green-bar{height:6px;background:#e7edf4;border-radius:99px;overflow:hidden}.ec3-xp-bar span{display:block;height:100%;background:#2d8bd6;border-radius:99px}.ec3-profile-divider{height:1px;background:#edf1f5;margin:10px 0}.ec3-small-label{display:block;color:#788a9b;font-size:.68rem}.ec3-big-progress{font-size:1.2rem;color:#155991;display:block;margin:1px 0 4px}.ec3-green-bar span{display:block;height:100%;background:#20a360;border-radius:99px}.ec3-panel-title{display:inline-block;margin:-1px 0 8px -1px;padding:6px 10px;border-radius:12px 0 9px 0;color:#fff;font-size:.8rem;font-weight:900}.ec3-panel-title.navy{background:#133e70}.ec3-panel-title.purple{background:#6650b0}.ec3-guide-step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:8px;margin:0 8px 7px;padding:8px;border-radius:10px;border:1px solid}.ec3-guide-step.blue{border-color:#d7e8f7;background:#f9fcff}.ec3-guide-step.green{border-color:#d7eddf;background:#f9fdf9}.ec3-guide-step.orange{border-color:#f0dfbf;background:#fffaf2}.ec3-guide-icon{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;font-size:1.5rem}.ec3-guide-step.blue .ec3-guide-icon{background:#eaf5ff;color:#2572b5}.ec3-guide-step.green .ec3-guide-icon{background:#eaf8ef;color:#2d9664}.ec3-guide-step.orange .ec3-guide-icon{background:#fff0d7;color:#d08a1d}.ec3-step-num{position:absolute;left:39px;top:-6px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#1764b0;color:#fff;font-size:.65rem;font-weight:900}.ec3-guide-step h3{margin:0 0 2px;font-size:.78rem;font-weight:900}.ec3-guide-step ul{margin:0;padding-left:13px;color:#6f8295;font-size:.63rem;line-height:1.45}.ec3-system-box{padding-bottom:8px}.ec3-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:3px;padding:0 8px}.ec3-flow>div{text-align:center;min-width:0}.ec3-flow>div span{display:block;margin:0 auto 3px;width:19px;height:19px;line-height:19px;border-radius:50%;background:#6a54b8;color:#fff;font-size:.62rem}.ec3-flow>div i{width:36px;height:36px;margin:0 auto 4px;display:grid;place-items:center;border-radius:9px;background:#eff5ff;color:#356fa8;font-size:1.05rem}.ec3-flow small{display:block;font-size:.56rem;color:#677b8e;line-height:1.25}.ec3-flow>b{color:#9baebe;font-size:.7rem}.ec3-io-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ec3-io-card{padding:9px}.ec3-io-card h3{font-size:.72rem;font-weight:900;margin-bottom:5px}.ec3-io-card.input h3{color:#315f9b}.ec3-io-card.output h3{color:#268a5d}.ec3-io-card ul{margin:0;padding-left:14px;color:#6f8092;font-size:.59rem;line-height:1.55}.ec3-benefit-box{padding:9px}.ec3-benefit-box h3{font-size:.75rem;color:#ce8420;font-weight:900;margin-bottom:7px}.ec3-benefits{display:grid;grid-template-columns:1fr 1fr;gap:5px}.ec3-benefits span{display:flex;gap:5px;align-items:center;font-size:.58rem;color:#64788b}.ec3-benefits i{color:#1c6bb0}.ec3-footer{padding:12px 18px;text-align:center;color:#8796a5;font-size:.72rem}.offcanvas .ec3-nav a{font-size:1rem}
@media(max-width:1280px){.ec3-learning-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:991.98px){.ec3-app{margin-left:0}.ec3-topbar{padding:8px 12px}.ec3-content{padding:13px}.ec3-learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ec3-mid-grid{grid-template-columns:1fr}.ec3-hero{height:auto;grid-template-columns:1fr}.ec3-hero-art{min-height:180px}.ec3-hero-copy{padding-bottom:0}.ec3-goal-card{grid-template-columns:auto 1fr auto}.ec3-goal-desc,.ec3-goal-bar{grid-column:2/-1}.ec3-goal-card>a{grid-column:2/-1;justify-self:start}}
@media(max-width:767.98px){.ec3-cert-top span{display:none}.ec3-user-top>span:last-child{display:none}.ec3-search{min-width:0}.ec3-learning-grid,.ec3-recommend-grid,.ec3-io-grid,.ec3-benefits{grid-template-columns:1fr}.ec3-hero h1{font-size:2.1rem}.ec3-flow{grid-template-columns:1fr}.ec3-flow>b{transform:rotate(90deg);margin:auto}.ec3-goal-card{display:flex;flex-wrap:wrap}.ec3-goal-bar{width:100%}.ec3-main-column{min-width:0}}


/* ============================================================
   Sidebar clean layout
   ลบพื้นที่กล่องโปรโมตด้านล่าง และจัดเมนูให้เรียบร้อย
   ============================================================ */
.ec3-sidebar {
    padding-bottom: 24px;
}

.ec3-nav {
    margin-bottom: auto;
}

/* เผื่อมี HTML เก่าค้างจาก cache/ไฟล์รุ่นก่อน */
.ec3-sidebar-promo {
    display: none !important;
}


/* ============================================================
   LARGE TEXT V4
   เพิ่มขนาดตัวอักษรในหน้า Dashboard ให้ใหญ่และอ่านง่ายขึ้น
   ============================================================ */

/* ภาพรวมหน้าเว็บ */
.ec3-app {
    font-size: 17px;
}

/* Sidebar */
.ec3-brand {
    font-size: 1.85rem !important;
}
.ec3-nav a {
    font-size: 1.08rem !important;
    min-height: 52px;
}
.ec3-nav a i {
    font-size: 1.22rem !important;
}

/* Topbar */
.ec3-search input {
    font-size: 1.08rem !important;
}
.ec3-user-name,
.ec3-cert-link {
    font-size: 1.02rem !important;
}

/* Hero */
.ec3-hero-kicker {
    font-size: 1rem !important;
}
.ec3-hero h1 {
    font-size: clamp(2.65rem, 4.4vw, 4.2rem) !important;
    line-height: 1.08 !important;
}
.ec3-hero p {
    font-size: 1.18rem !important;
    line-height: 1.65 !important;
}
.ec3-hero .btn {
    font-size: 1.08rem !important;
    padding: 12px 20px !important;
}

/* หัวข้อแต่ละ Section */
.ec3-section-title,
.ec3-section-head h2 {
    font-size: 1.55rem !important;
}
.ec3-section-head a {
    font-size: 1rem !important;
}

/* การ์ดบทเรียน */
.ec3-learning-card h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}
.ec3-learning-card p {
    font-size: 1.03rem !important;
    line-height: 1.58 !important;
}
.ec3-learning-card .btn {
    font-size: 1.02rem !important;
}
.ec3-learning-tag,
.ec3-learning-number {
    font-size: .98rem !important;
}

/* การ์ดแนะนำ */
.ec3-recommend-card strong {
    font-size: 1.08rem !important;
}
.ec3-recommend-card span,
.ec3-recommend-card small {
    font-size: .94rem !important;
    line-height: 1.5 !important;
}

/* กิจกรรม */
.ec3-activity-list strong {
    font-size: 1.08rem !important;
}
.ec3-activity-list small,
.ec3-activity-list span {
    font-size: .94rem !important;
}

/* เป้าหมาย / Progress */
.ec3-goal-card strong {
    font-size: 1.08rem !important;
}
.ec3-goal-card span,
.ec3-goal-card small {
    font-size: .95rem !important;
}

/* ปุ่มทั้งหมดใน Dashboard */
.ec3-app .btn {
    font-size: 1.02rem !important;
}

/* Badge */
.ec3-app .badge {
    font-size: .9rem !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .ec3-app {
        font-size: 16px;
    }

    .ec3-brand {
        font-size: 1.6rem !important;
    }

    .ec3-nav a {
        font-size: 1.02rem !important;
    }

    .ec3-hero h1 {
        font-size: 2.35rem !important;
    }

    .ec3-hero p {
        font-size: 1.05rem !important;
    }

    .ec3-section-title,
    .ec3-section-head h2 {
        font-size: 1.38rem !important;
    }

    .ec3-learning-card h3 {
        font-size: 1.16rem !important;
    }

    .ec3-learning-card p {
        font-size: .98rem !important;
    }

    .ec3-app .btn {
        font-size: .98rem !important;
    }
}


/* ============================================================
   Mascot patch - เพิ่มตัวการ์ตูนใน Sidebar และ Hero
   ============================================================ */
.ec3-sidebar-mascot{
    position:relative;
    margin-top:14px;
    padding:16px 12px 12px;
    border:1px solid #d8e7f8;
    border-radius:18px;
    background:linear-gradient(180deg,#eef7ff 0%,#e8f2ff 100%);
    overflow:hidden;
    box-shadow:0 8px 18px rgba(24,70,112,.06);
}
.ec3-sidebar-mascot-copy strong,
.ec3-sidebar-mascot-copy span{
    display:block;
}
.ec3-sidebar-mascot-copy strong{
    font-size:1.3rem;
    line-height:1.1;
    color:#164d83;
    font-weight:900;
    margin-bottom:6px;
}
.ec3-sidebar-mascot-copy span{
    font-size:1.02rem;
    line-height:1.35;
    color:#587490;
    padding-right:22px;
    margin-bottom:108px;
}
.ec3-sidebar-mascot img{
    position:absolute;
    right:4px;
    bottom:42px;
    width:118px;
    height:auto;
    filter:drop-shadow(0 10px 14px rgba(48,98,149,.15));
}
.ec3-sidebar-mascot a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:40px;
    border-radius:999px;
    text-decoration:none;
    background:#0d63bb;
    color:#fff;
    font-size:.95rem;
    font-weight:800;
}

.ec3-hero-art{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    padding-top:10px;
}
.ec3-hero-bg{
    position:absolute;
    right:12px;
    bottom:0;
    width:62%;
    max-width:360px;
    opacity:.22;
    filter:none !important;
}
.ec3-hero-character{
    position:relative;
    z-index:2;
    width:100%;
    max-width:410px;
    max-height:220px;
    object-fit:contain;
    transform:translateY(-22px);
    filter:drop-shadow(0 12px 16px rgba(32,78,122,.12));
}

@media (max-width: 991.98px){
    .ec3-sidebar-mascot{display:none;}
    .ec3-hero-character{max-width:320px;max-height:190px;transform:translateY(-16px);}
    .ec3-hero-bg{width:72%;}
}


/* ============================================================
   HERO MASCOT - FULL VISIBLE
   จัดตำแหน่งตัวการ์ตูนให้เห็นเต็มรูป ไม่ถูกตัดด้านล่าง
   ============================================================ */
.ec3-hero-art {
    position: relative !important;
    overflow: hidden !important;
    min-height: 230px;
}

/* พื้นหลัง DNA อยู่ด้านหลัง */
.ec3-hero-bg {
    position: absolute !important;
    right: 8px !important;
    bottom: 0 !important;
    width: 62% !important;
    max-width: 360px !important;
    opacity: .18 !important;
}

/* ตัวการ์ตูน: ยึดจากด้านบนแทนการยึดด้านล่าง */
.ec3-hero-character {
    position: absolute !important;
    z-index: 3 !important;
    top: 5px !important;
    right: 35px !important;
    bottom: auto !important;

    width: auto !important;
    height: 218px !important;
    max-width: 48% !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;

    filter: drop-shadow(0 12px 16px rgba(32,78,122,.14)) !important;
}

/* จอขนาดกลาง */
@media (max-width: 1200px) {
    .ec3-hero-character {
        right: 18px !important;
        height: 210px !important;
        max-width: 50% !important;
    }
}

/* Tablet / Mobile */
@media (max-width: 991.98px) {
    .ec3-hero-art {
        min-height: 215px !important;
    }

    .ec3-hero-character {
        top: 4px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        height: 205px !important;
        max-width: 85% !important;
    }
}

@media (max-width: 575.98px) {
    .ec3-hero-art {
        min-height: 195px !important;
    }

    .ec3-hero-character {
        height: 185px !important;
        max-width: 92% !important;
    }
}


/* ============================================================
   EXTRA LARGE TEXT V5
   เพิ่มขนาดตัวอักษรทั้ง Dashboard ให้ชัดเจนขึ้น
   ============================================================ */

/* ขนาดพื้นฐาน */
.ec3-student-body,
.ec3-app {
    font-size: 20px !important;
}

/* โลโก้ */
.ec3-logo {
    font-size: 2.35rem !important;
}

/* Sidebar */
.ec3-nav a {
    font-size: 1.28rem !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
}
.ec3-nav a i {
    font-size: 1.42rem !important;
    width: 26px !important;
}

/* Topbar */
.ec3-search {
    height: 46px !important;
}
.ec3-search input {
    font-size: 1.18rem !important;
    padding: 0 15px !important;
}
.ec3-search button {
    font-size: 1.22rem !important;
}
.ec3-cert-top {
    font-size: 1.05rem !important;
    padding: 10px 13px !important;
}
.ec3-user-top strong {
    font-size: 1.1rem !important;
}
.ec3-user-top small {
    font-size: .95rem !important;
}
.ec3-user-face {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
}

/* Hero */
.ec3-subject-chip {
    font-size: 1.02rem !important;
    padding: 7px 12px !important;
}
.ec3-hero h1 {
    font-size: clamp(3.25rem, 5vw, 5rem) !important;
    line-height: 1.08 !important;
}
.ec3-hero p {
    font-size: 1.34rem !important;
    line-height: 1.65 !important;
}
.ec3-primary-btn {
    font-size: 1.18rem !important;
    padding: 11px 19px !important;
}

/* หัวข้อ Section */
.ec3-section-head h2 {
    font-size: 1.85rem !important;
}
.ec3-section-head a {
    font-size: 1.12rem !important;
}

/* การ์ดบทเรียน */
.ec3-status-chip {
    font-size: .98rem !important;
    padding: 6px 10px !important;
}
.ec3-learning-card h3 {
    min-height: 58px !important;
    font-size: 1.48rem !important;
    line-height: 1.42 !important;
}
.ec3-card-footer {
    font-size: 1rem !important;
}
.ec3-card-footer span {
    font-size: 1.02rem !important;
}
.ec3-card-footer a {
    font-size: 1rem !important;
    padding: 7px 12px !important;
}

/* การ์ดแนะนำ */
.ec3-recommend-card strong {
    font-size: 1.23rem !important;
    line-height: 1.4 !important;
}
.ec3-recommend-card span {
    font-size: 1rem !important;
}

/* กิจกรรมประจำวัน */
.ec3-activity-list strong {
    font-size: 1.22rem !important;
}
.ec3-activity-list small {
    font-size: 1rem !important;
}
.ec3-activity-list em {
    font-size: .96rem !important;
    padding: 7px 11px !important;
}
.ec3-activity-list a {
    padding: 11px 12px !important;
}
.ec3-activity-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
}

/* เป้าหมายด้านล่าง */
.ec3-goal-title {
    font-size: 1.18rem !important;
}
.ec3-goal-desc {
    font-size: 1.04rem !important;
}
.ec3-goal-card > strong {
    font-size: 1.08rem !important;
}
.ec3-goal-card > a {
    font-size: .98rem !important;
    padding: 7px 11px !important;
}

/* Sidebar mascot */
.ec3-sidebar-mascot-copy strong {
    font-size: 1.42rem !important;
}
.ec3-sidebar-mascot-copy span {
    font-size: 1.12rem !important;
}
.ec3-sidebar-mascot a {
    font-size: 1.08rem !important;
}

/* Footer */
.ec3-footer {
    font-size: 1rem !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ec3-student-body,
    .ec3-app {
        font-size: 18px !important;
    }

    .ec3-hero h1 {
        font-size: 3rem !important;
    }

    .ec3-hero p {
        font-size: 1.2rem !important;
    }

    .ec3-learning-card h3 {
        font-size: 1.34rem !important;
    }

    .ec3-recommend-card strong {
        font-size: 1.14rem !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .ec3-student-body,
    .ec3-app {
        font-size: 17px !important;
    }

    .ec3-nav a {
        font-size: 1.12rem !important;
    }

    .ec3-search input {
        font-size: 1rem !important;
    }

    .ec3-hero h1 {
        font-size: 2.55rem !important;
    }

    .ec3-hero p {
        font-size: 1.08rem !important;
    }

    .ec3-section-head h2 {
        font-size: 1.5rem !important;
    }

    .ec3-learning-card h3 {
        min-height: 0 !important;
        font-size: 1.22rem !important;
    }

    .ec3-recommend-card strong {
        font-size: 1.08rem !important;
    }

    .ec3-activity-list strong {
        font-size: 1.08rem !important;
    }

    .ec3-activity-list small {
        font-size: .92rem !important;
    }
}




/* ============================================================
   Profile photo / user dropdown
   ============================================================ */
.ec3-user-face{overflow:hidden;flex:0 0 auto}
.ec3-user-face.has-photo{padding:0;background:#eef6fd;border:1px solid #d6e7f4}
.ec3-user-face.has-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.ec3-user-dropdown{min-width:245px;padding:8px}
.ec3-dropdown-profile{display:flex;align-items:center;gap:11px;padding:5px 2px}
.ec3-dropdown-avatar{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#1c4b79,#5da8dd);color:#fff;font-weight:900}
.ec3-dropdown-avatar.has-photo{background:#edf5fb;border:1px solid #d8e7f2}
.ec3-dropdown-avatar img{width:100%;height:100%;object-fit:cover}
.ec3-dropdown-profile strong,.ec3-dropdown-profile small{display:block}
.ec3-dropdown-profile strong{color:#1d456e;font-size:1rem}
.ec3-dropdown-profile small{margin-top:2px;color:#8092a3;font-size:.82rem}
.ec3-user-dropdown .dropdown-item{padding:9px 11px;border-radius:10px}
.ec3-user-dropdown .dropdown-item:hover{background:#f1f7fc}


/* ============================================================
   HOME LESSON CARDS - IMAGE STYLE
   ปรับการ์ดเรียนต่อเนื่องให้เหมือนตัวอย่างที่ผู้ใช้ส่ง
   ============================================================ */
.ec3-learning-grid{
    align-items:stretch;
}
.ec3-learning-card{
    position:relative;
    overflow:hidden;
    padding:0 0 14px !important;
    border-radius:18px !important;
    border:1px solid #dbe6f1 !important;
    background:#fff !important;
    box-shadow:0 10px 24px rgba(38,82,126,.06) !important;
}
.ec3-learning-card.violet{background:linear-gradient(180deg,#f6f0ff 0 48%,#fff 48%) !important;}
.ec3-learning-card.green{background:linear-gradient(180deg,#eefcf1 0 48%,#fff 48%) !important;}
.ec3-learning-card.amber{background:linear-gradient(180deg,#fff7e8 0 48%,#fff 48%) !important;}
.ec3-learning-card.blue{background:linear-gradient(180deg,#f0f7ff 0 48%,#fff 48%) !important;}
.ec3-learning-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(37,80,124,.11) !important;
}
.ec3-card-top{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    right:12px !important;
    z-index:4;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    margin:0 !important;
}
.ec3-status-chip{
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.9) !important;
    color:#5f6f82 !important;
    border:1px solid rgba(220,229,239,.95) !important;
    box-shadow:0 4px 10px rgba(48,79,112,.05);
    font-size:.82rem !important;
    font-weight:900 !important;
}
.ec3-learning-card.violet .ec3-status-chip{color:#7552ba !important;background:#f8f2ff !important;}
.ec3-learning-card.green .ec3-status-chip{color:#288a51 !important;background:#effcf3 !important;}
.ec3-learning-card.amber .ec3-status-chip{color:#c67a0f !important;background:#fff7e7 !important;}
.ec3-learning-card.blue .ec3-status-chip{color:#356da9 !important;background:#f0f7ff !important;}
.ec3-card-photo{
    position:relative;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    width:100% !important;
    height:175px !important;
    margin:0 0 12px !important;
    padding:28px 14px 0 !important;
    overflow:hidden !important;
    background:transparent !important;
    border-radius:0 !important;
}
.ec3-card-photo::after{
    content:'';
    position:absolute;
    left:20px;
    right:20px;
    bottom:7px;
    height:18px;
    border-radius:50%;
    background:rgba(70,95,120,.08);
    filter:blur(8px);
}
.ec3-card-photo img{
    position:relative;
    z-index:2;
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:190px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:drop-shadow(0 10px 14px rgba(29,67,106,.13));
}
.ec3-card-photo-post img{
    max-width:165px !important;
    transform:scale(.92);
}
.ec3-learning-card h3{
    min-height:58px;
    margin:0 !important;
    padding:0 14px !important;
    color:#17395f !important;
    font-size:1.12rem !important;
    line-height:1.42 !important;
    font-weight:900 !important;
}
.ec3-progress-line{
    height:7px !important;
    margin:12px 14px 8px !important;
    border-radius:999px !important;
    background:#e6edf5 !important;
    overflow:hidden !important;
}
.ec3-progress-line span{
    display:block !important;
    height:100% !important;
    border-radius:inherit !important;
    background:linear-gradient(90deg,#21a45f,#42bd72) !important;
}
.ec3-learning-card.violet .ec3-progress-line span{background:linear-gradient(90deg,#7256c8,#9479de) !important;}
.ec3-learning-card.amber .ec3-progress-line span{background:linear-gradient(90deg,#ecaa2b,#f3c04a) !important;}
.ec3-learning-card.blue .ec3-progress-line span{background:linear-gradient(90deg,#3d84c9,#64a6df) !important;}
.ec3-card-footer{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:0 14px !important;
}
.ec3-card-footer>span{
    color:#71859a !important;
    font-size:.88rem !important;
    font-weight:800 !important;
}
.ec3-card-footer>a{
    min-width:84px;
    padding:7px 11px !important;
    border-radius:999px !important;
    border:1px solid #d7e4ef !important;
    background:#fff !important;
    color:#2f6ca5 !important;
    text-align:center;
    text-decoration:none !important;
    font-size:.86rem !important;
    font-weight:900 !important;
    transition:.15s ease;
}
.ec3-card-footer>a:hover{
    background:#edf6ff !important;
    border-color:#bfd8ee !important;
}
@media(max-width:767.98px){
    .ec3-card-photo{height:190px !important;}
    .ec3-card-photo img{max-width:210px !important;}
    .ec3-learning-card h3{min-height:auto;font-size:1.08rem !important;}
}


/* ============================================================
   COLOR REFRESH THEME 2026
   ปรับโทนสีเว็บไซต์ให้สดใสขึ้น ดูทันสมัย และยังอ่านง่าย
   ============================================================ */
:root{
  --ec3-blue:#2f7cf6;
  --ec3-navy:#183c76;
  --ec3-green:#2eaf6d;
  --ec3-purple:#7c63dd;
  --ec3-orange:#f3a538;
  --ec3-border:#d7e4f6;
  --ec3-text:#183b68;
  --ec3-muted:#7488a0;
  --ec3-bg:#f4f8ff;
}

.ec3-student-body{
  background:
    radial-gradient(circle at top left, rgba(145, 193, 255, .18), transparent 24%),
    radial-gradient(circle at 92% 6%, rgba(185, 244, 215, .18), transparent 16%),
    linear-gradient(180deg, #f7fbff 0%, #f3f8ff 100%) !important;
  color:var(--ec3-text);
}

.ec3-sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border-right:1px solid #d9e7f5;
  box-shadow:12px 0 28px rgba(40,84,132,.05);
}
.ec3-logo{color:#183d74;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ec3-logo span{color:#f0a22b}

.ec3-nav a{
  border:1px solid transparent;
  transition:all .22s ease;
}
.ec3-nav a:hover,
.ec3-nav a.active{
  background:linear-gradient(135deg,#edf5ff,#e8f1ff 65%,#f4f8ff);
  color:#155ea8;
  border-color:#d8e6f8;
  box-shadow:0 6px 14px rgba(43,104,168,.08);
}
.ec3-nav a:hover i,
.ec3-nav a.active i{color:#2c7de2}

.ec3-topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid #dde9f5;
  box-shadow:0 8px 20px rgba(26,63,104,.04);
}
.ec3-mobile-btn,
.ec3-search,
.ec3-cert-top{
  border-color:#d9e6f3;
}
.ec3-search{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 5px 14px rgba(31,77,123,.04);
}
.ec3-search:focus-within{
  border-color:#99bff5;
  box-shadow:0 0 0 4px rgba(80,140,255,.10);
}
.ec3-cert-top{
  background:linear-gradient(180deg,#fffdfa,#fff6e8);
  box-shadow:0 6px 14px rgba(232,168,42,.08);
}
.ec3-cert-top i{color:#f0a327}
.ec3-user-face,
.ec3-profile-avatar,
.ec3-dropdown-avatar{
  box-shadow:0 4px 14px rgba(42,104,170,.14);
}

.ec3-hero{
  border:1px solid #d8e7f7;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.92), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(184, 241, 212, .32), transparent 18%),
    linear-gradient(135deg,#eef7ff 0%,#eaf3ff 50%,#eff9ff 100%);
  box-shadow:0 18px 38px rgba(31,77,123,.09);
}
.ec3-subject-chip{
  background:linear-gradient(135deg,#2f8fe1,#2c73cf);
  box-shadow:0 6px 14px rgba(47,124,246,.18);
}
.ec3-hero h1{color:#173f71}
.ec3-hero h1 span{color:#25a368}
.ec3-hero p{color:#537390}
.ec3-primary-btn{
  background:linear-gradient(135deg,#2c7df2,#195cc3);
  box-shadow:0 10px 18px rgba(39,103,201,.18);
}
.ec3-primary-btn:hover{background:linear-gradient(135deg,#2a74e2,#144eaa)}
.ec3-dna-float{color:#72a8e6}

.ec3-learning-card,
.ec3-recommend-card,
.ec3-activity-list a,
.ec3-goal-card,
.ec3-profile-panel,
.ec3-guide-box,
.ec3-system-box,
.ec3-benefit-box,
.ec3-io-card{
  border-color:#d8e6f3;
  box-shadow:0 10px 20px rgba(28,70,112,.05);
}
.ec3-learning-card{border-radius:18px;overflow:hidden}
.ec3-learning-card.violet{background:linear-gradient(180deg,#fbf7ff 0%,#ffffff 54%)}
.ec3-learning-card.green{background:linear-gradient(180deg,#f4fff7 0%,#ffffff 54%)}
.ec3-learning-card.amber{background:linear-gradient(180deg,#fff9ef 0%,#ffffff 54%)}
.ec3-learning-card.blue{background:linear-gradient(180deg,#f2f9ff 0%,#ffffff 54%)}
.ec3-card-photo{
  height:102px;
  border-radius:16px 16px 0 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.5);
}
.ec3-card-photo img{
  filter:drop-shadow(0 10px 12px rgba(38,84,128,.10));
}
.ec3-learning-card h3{color:#173c68}
.ec3-progress-line{height:8px;background:#e8eef6}
.ec3-learning-card.violet .ec3-progress-line span{background:linear-gradient(90deg,#8868ea,#7a5fe0)}
.ec3-learning-card.green .ec3-progress-line span{background:linear-gradient(90deg,#35ba73,#239b5d)}
.ec3-learning-card.amber .ec3-progress-line span{background:linear-gradient(90deg,#ffb349,#f09b27)}
.ec3-learning-card.blue .ec3-progress-line span{background:linear-gradient(90deg,#4b8cf0,#2e72d6)}
.ec3-status-chip{box-shadow:0 3px 8px rgba(77,109,146,.08)}
.ec3-card-footer a{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
}

.ec3-recommend-card{
  background:linear-gradient(180deg,#ffffff,#fcfdff);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ec3-recommend-card:hover{
  transform:translateY(-3px);
  border-color:#cadcf2;
  box-shadow:0 14px 24px rgba(38,80,122,.08);
}
.ec3-recommend-card.blue{background:linear-gradient(180deg,#f4faff,#ffffff)}
.ec3-recommend-card.green{background:linear-gradient(180deg,#f5fff8,#ffffff)}
.ec3-recommend-card.purple{background:linear-gradient(180deg,#f8f5ff,#ffffff)}
.ec3-recommend-card.pink{background:linear-gradient(180deg,#fff7f9,#ffffff)}
.ec3-rec-visual{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

.ec3-activity-list a{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.ec3-activity-list a:hover{
  border-color:#c9dbf0;
  box-shadow:0 12px 22px rgba(31,74,117,.08);
}
.ec3-activity-icon.amber{background:linear-gradient(180deg,#fff5e2,#ffefcf);color:#c6861c}
.ec3-activity-icon.blue{background:linear-gradient(180deg,#eef7ff,#e3f0ff);color:#2f73b2}
.ec3-activity-icon.red{background:linear-gradient(180deg,#fff1f2,#ffe6e8);color:#d15b63}
.ec3-activity-list em{background:#f7fbff}

.ec3-goal-card{
  border-color:#d5e5f4;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.8), transparent 18%),
    linear-gradient(90deg,#f9fcff,#f0f7ff 45%,#f8fcff 100%);
}
.ec3-goal-icon{background:linear-gradient(180deg,#fff3d8,#ffe9b4);color:#e4a326}
.ec3-goal-bar{background:#dfe9f4}
.ec3-goal-bar span{background:linear-gradient(90deg,#3d97ef,#2a79de)}

.ec3-sidebar-mascot{
  background:
    radial-gradient(circle at 82% 15%, rgba(184, 241, 212, .35), transparent 18%),
    linear-gradient(180deg,#f3f9ff 0%,#e9f4ff 100%);
  border-color:#d6e6f7;
  box-shadow:0 12px 24px rgba(36,79,124,.08);
}
.ec3-sidebar-mascot a{
  background:linear-gradient(135deg,#2c7df2,#1557b6);
  box-shadow:0 8px 18px rgba(35,95,186,.18);
}

.ec3-user-dropdown{
  border:1px solid #dbe7f3 !important;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 18px 40px rgba(27,68,108,.10) !important;
}
.ec3-dropdown-profile{display:flex;align-items:center;gap:10px}
.ec3-dropdown-avatar{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,#214a75,#61a5da);font-weight:900;
  overflow:hidden;
}
.ec3-dropdown-avatar img,.ec3-user-face img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ec3-user-face.has-photo,.ec3-dropdown-avatar.has-photo{background:#fff;padding:2px}
.ec3-user-dropdown .dropdown-item{
  border-radius:12px;
  margin:0 8px 4px;
  width:auto;
  color:#2b537b;
}
.ec3-user-dropdown .dropdown-item:hover{background:#eef5ff;color:#155ea8}