/* I-Port Learn hub, lessons and quiz */
.lr-page{padding-bottom:110px}
.lr-hero h2{margin:4px 0 10px}
.lr-progress{height:6px;border-radius:6px;background:#ffffff26;overflow:hidden}
.lr-progress i{display:block;height:100%;background:var(--ip-accent);border-radius:6px;transition:width .3s}
.lr-hero-btn{margin-top:14px;height:44px;padding:0 18px;border:0;border-radius:12px;background:#fff;color:#0a2e22;font:600 15px 'Investmin Thai',sans-serif}
.lr-section{margin:22px 0}
.lr-section>h2{font-size:17px;font-weight:700;margin:0 0 10px}
.lr-cards{display:grid;gap:8px}
.lr-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-radius:16px;background:var(--mj-card);color:var(--mj-text);text-align:left;font:inherit}
.lr-num{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--ip-accent) 16%,transparent);color:var(--ip-accent);font-weight:700}
.lr-card.is-done .lr-num{background:var(--ip-accent);color:var(--ip-accent-ink)}
.lr-txt{display:grid;gap:2px;min-width:0}
.lr-txt b{font-size:15px;font-weight:600}
.lr-txt small{font-size:12px;color:var(--mj-muted)}
.lr-quiz-card{display:flex;align-items:center;justify-content:space-between;width:100%;margin:16px 0;padding:16px;border:1px solid var(--ip-accent);border-radius:16px;background:transparent;color:var(--mj-text);text-align:left;font:inherit}
.lr-quiz-card span{display:grid;gap:2px}.lr-quiz-card small{font-size:12px;color:var(--mj-muted)}
.lr-quiz-card em{font-style:normal;font-weight:600;padding:8px 14px;border-radius:10px;background:var(--ip-accent);color:var(--ip-accent-ink)}
.lr-faq{border-radius:16px;background:var(--mj-card);overflow:hidden}
.lr-faq details{border-bottom:1px solid var(--mj-border)}.lr-faq details:last-child{border:0}
.lr-faq summary{list-style:none;padding:14px 40px 14px 14px;font-size:15px;font-weight:500;position:relative;cursor:pointer}
.lr-faq summary::-webkit-details-marker{display:none}
.lr-faq summary::after{content:'+';position:absolute;right:16px;top:12px;font-size:20px;color:var(--mj-muted)}
.lr-faq details[open] summary::after{content:'−'}
.lr-faq p{margin:0;padding:0 14px 14px;font-size:14px;line-height:1.65;color:var(--mj-muted)}
.lr-note{font-size:11px;color:var(--mj-muted);text-align:center;margin:18px 8px;line-height:1.5}
.lr-article{font-size:15.5px;line-height:1.75}
.lr-kicker{font-size:12px;color:var(--ip-accent);font-weight:600}
.lr-article h1{font-size:26px;line-height:1.3;font-weight:700;margin:4px 0 14px;letter-spacing:-.2px}
.lr-article h3{font-size:16px;font-weight:700;margin:22px 0 6px}
.lr-article p{margin:0 0 12px}
.lr-article blockquote{margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--mj-card);font-size:16px}
.lr-article cite{display:block;margin-top:6px;font-size:12px;font-style:normal;color:var(--mj-muted)}
.lr-list{margin:0 0 12px;padding-left:20px}.lr-list li{margin:4px 0}
.lr-steps{list-style:none;counter-reset:s;margin:0 0 14px;padding:0}
.lr-steps li{counter-increment:s;position:relative;padding:0 0 14px 44px}
.lr-steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ip-accent);color:var(--ip-accent-ink);font-weight:700;font-size:14px}
.lr-steps b,.lr-steps span{display:block}.lr-steps span{font-size:14px;color:var(--mj-muted)}
.lr-key{padding:12px 14px;border-left:3px solid var(--ip-accent);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--ip-accent) 10%,transparent)}
.lr-formula{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--mj-card);font-weight:600}
.lr-table{overflow-x:auto;margin:0 0 14px;border-radius:14px;background:var(--mj-card)}
.lr-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.lr-table th,.lr-table td{padding:10px;text-align:left;border-bottom:1px solid var(--mj-border)}
.lr-table tr:last-child td{border:0}.lr-table th{font-size:12px;color:var(--mj-muted);font-weight:600}
.lr-table .ok{color:var(--ip-accent);font-weight:600}.lr-table .no{color:#f0556b;font-weight:600}
.lr-links{list-style:none;padding:0;margin:0 0 12px}
.lr-links li{padding:10px 0;border-bottom:1px solid var(--mj-border)}
.lr-links a{color:var(--ip-accent);font-weight:600;text-decoration:none}
.lr-links span{display:block;font-size:13px;color:var(--mj-muted)}
.lr-cta{display:block;width:100%;height:48px;margin:18px 0 4px;border:0;border-radius:14px;background:var(--mj-card);color:var(--ip-accent);font:600 15px 'Investmin Thai',sans-serif}
.lr-pager{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.lr-pager button{padding:12px;border:0;border-radius:14px;background:var(--mj-card);color:var(--mj-text);text-align:left;font:500 14px 'Investmin Thai',sans-serif}
.lr-pager button.next{text-align:right;grid-column:2}
.lr-pager small{display:block;font-size:11px;color:var(--mj-muted)}
.lr-qhead small{font-size:12px;color:var(--mj-muted)}
.lr-qhead .lr-progress{margin-top:6px;background:var(--mj-card)}
.lr-q{font-size:21px;line-height:1.45;font-weight:700;margin:18px 0}
.lr-opts{display:grid;gap:10px}
.lr-opt{min-height:52px;padding:12px 16px;border:1.5px solid var(--mj-border);border-radius:14px;background:var(--mj-card);color:var(--mj-text);text-align:left;font:500 15px 'Investmin Thai',sans-serif}
.lr-opt.is-right{border-color:var(--ip-accent);background:color-mix(in srgb,var(--ip-accent) 14%,var(--mj-card))}
.lr-opt.is-wrong{border-color:#f0556b;background:color-mix(in srgb,#f0556b 12%,var(--mj-card))}
.lr-opt.is-dim{opacity:.5}
.lr-explain{margin:16px 0;padding:14px;border-radius:14px;background:var(--mj-card)}
.lr-explain.ok b{color:var(--ip-accent)}.lr-explain.no b{color:#f0556b}
.lr-explain p{margin:4px 0 0;font-size:14px;color:var(--mj-muted)}
.lr-score{text-align:center}.lr-score h2{font-size:44px}.lr-score p{margin:0;color:#dff3e9}
.lr-ghost{display:block;width:100%;height:48px;margin-top:10px;border:0;background:none;color:var(--mj-muted);font:500 15px 'Investmin Thai',sans-serif}
/* onboarding */
#dialog.ob-dialog .dialog-head{display:none}
.ob{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 4px 4px}
.ob-art{display:grid;place-items:center;width:120px;height:120px;margin:8px 0 18px;border-radius:32px;background:var(--ip-hero)}
.ob-art svg{width:64px;height:64px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ob-kicker{font-size:12px;font-weight:600;color:var(--ip-accent)}
.ob h2{font-size:24px;line-height:1.3;margin:6px 0 8px;font-weight:700}
.ob p{font-size:15px;line-height:1.6;color:var(--mj-muted);margin:0 0 16px}
.ob-dots{display:flex;gap:6px;margin:4px 0 18px}.ob-dots i{width:7px;height:7px;border-radius:7px;background:var(--mj-border)}.ob-dots i.on{width:22px;background:var(--ip-accent)}
.ob-consent{display:flex;gap:10px;text-align:left;font-size:13px;line-height:1.55;color:var(--mj-muted);margin:0 0 14px}
.ob-consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--ip-accent)}
.ob-consent a{color:var(--ip-accent)}
.ob-skip{margin-top:8px;height:40px;border:0;background:none;color:var(--mj-muted);font:500 14px 'Investmin Thai',sans-serif}
.ob-links{margin:12px 0;border-radius:16px;background:var(--mj-card);overflow:hidden}
.ob-links button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 16px;border:0;border-bottom:1px solid var(--mj-border);background:none;color:var(--mj-text);font:500 15px 'Investmin Thai',sans-serif;text-align:left}
.ob-links button:last-child{border:0}.ob-links i{font-style:normal;color:var(--mj-muted)}
.ob-guide-link{display:block;margin:-4px 0 14px;font-size:14px;font-weight:600;color:var(--ip-accent);text-decoration:none}
/* backup */
.bk-card{margin:12px 0;padding:16px;border-radius:16px;background:var(--mj-card)}
.bk-head{display:flex;align-items:center;justify-content:space-between}
.bk-head strong{font-size:16px}
.bk-dot{width:10px;height:10px;border-radius:50%}.bk-dot.ok{background:var(--ip-accent)}.bk-dot.warn{background:#f5b041}
.bk-card p{margin:6px 0 12px;font-size:13.5px;line-height:1.55;color:var(--mj-muted)}
.bk-card em{color:#f0556b;font-style:normal}
.bk-card small{display:block;margin-top:10px;font-size:12px;color:var(--mj-muted)}
.bk-actions{display:flex;flex-wrap:wrap;gap:8px}
.bk-actions button{height:38px;padding:0 14px;border:0;border-radius:10px;background:color-mix(in srgb,var(--ip-accent) 14%,transparent);color:var(--ip-accent);font:600 14px 'Investmin Thai',sans-serif}
.bk-actions button.primary{background:var(--ip-accent);color:var(--ip-accent-ink)}
.bk-banner{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 10px 10px 14px;border-radius:14px;background:color-mix(in srgb,#f5b041 16%,var(--mj-card));font-size:14px}
.bk-banner span{flex:1}
.bk-banner button{height:32px;padding:0 12px;border:0;border-radius:9px;background:#f5b041;color:#2a1a00;font:600 13px 'Investmin Thai',sans-serif}
.bk-banner button[data-bk=snooze]{background:none;color:var(--mj-muted);padding:0 6px}
.mobile-journal #page .ob-links{display:block;position:relative;margin:12px 0;padding:0;border-radius:16px;background:var(--mj-card);overflow:hidden}
.mobile-journal #page .ob-links button{display:flex!important;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0 16px!important;margin:0;border:0;border-bottom:1px solid var(--mj-border);border-radius:0!important;background:transparent!important;color:var(--mj-text)!important;text-align:left}
.mobile-journal #page .ob-links button:last-child{border-bottom:0}
.mobile-journal #page .bk-actions button{min-height:38px;height:38px;padding:0 14px!important;border-radius:10px!important;background:color-mix(in srgb,var(--ip-accent) 14%,transparent)!important;color:var(--ip-accent)!important;font-weight:600}
.mobile-journal #page .bk-actions button.primary{background:var(--ip-accent)!important;color:var(--ip-accent-ink)!important}
.mobile-journal #page .bk-banner button{min-height:32px;height:32px;padding:0 12px!important;border-radius:9px!important;background:#f5b041!important;color:#2a1a00!important;font-weight:600}
.mobile-journal #page .bk-banner button[data-bk=snooze]{background:transparent!important;color:var(--mj-muted)!important;padding:0 6px!important}
#dialog.ob-dialog .dialog-head{display:none!important}
#dialog.ob-dialog #dialog-content{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.ob-art{width:96px;height:96px;margin:4px 0 14px}.ob-art svg{width:52px;height:52px}
.ob .za-primary{position:static!important;margin-top:10px}
.st-note{display:flex;align-items:center;gap:10px;margin:12px 0;padding:12px 12px 12px 14px;border-radius:14px;background:var(--mj-card);font-size:13px;line-height:1.5}
.st-note div{flex:1;display:grid;gap:2px}.st-note strong{font-size:13.5px}.st-note span{color:var(--mj-muted)}
.st-note.is-old{background:color-mix(in srgb,#f5b041 14%,var(--mj-card))}
.mobile-journal #page .st-note button{flex:none;min-height:34px;height:34px;padding:0 14px!important;border-radius:10px!important;background:#f5b041!important;color:#2a1a00!important;font-weight:600}