/* ECO Learning - Apple-style: clean, minimal, rounded cards, soft shadow
   Tokens: ink #1d1d1f / paper #f5f5f7 / surface #ffffff / line #e5e5ea / accent #1f7a5a / warn #9a5b00 */
:root {
  --eco-ink: #1d1d1f;
  --eco-muted: #6e6e73;
  --eco-paper: #f5f5f7;
  --eco-surface: #ffffff;
  --eco-line: #e5e5ea;
  --eco-accent: #1f7a5a;
  --eco-accent-dark: #186349;
  --eco-accent-soft: #e7f3ed;
  --eco-warn: #9a5b00;
  --eco-warn-soft: #fff4e0;
  --eco-hover: #fafafc;
  --eco-track: #e9e9ee;
  --eco-nav-bg: rgba(255, 255, 255, .86);
  --eco-bad-soft: #fdecea;
  --eco-on-accent: #ffffff;
  --eco-accent-darker: #145340;
  --eco-radius: 18px;
  --eco-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);

  --bs-body-font-family: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--eco-ink);
  --bs-body-bg: var(--eco-paper);
  --bs-primary: #1f7a5a;
  --bs-primary-rgb: 31, 122, 90;
  --bs-link-color: #1f7a5a;
  --bs-link-color-rgb: 31, 122, 90;
  --bs-link-hover-color: #186349;
  --bs-link-hover-color-rgb: 24, 99, 73;
  --bs-border-color: var(--eco-line);
}

body { line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { letter-spacing: -0.01em; line-height: 1.35; }
:focus-visible { outline: 3px solid rgba(31, 122, 90, .45); outline-offset: 2px; }

/* buttons */
.btn { border-radius: 999px; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--eco-accent); --bs-btn-border-color: var(--eco-accent);
  --bs-btn-hover-bg: var(--eco-accent-dark); --bs-btn-hover-border-color: var(--eco-accent-dark);
  --bs-btn-active-bg: var(--eco-accent-darker); --bs-btn-active-border-color: var(--eco-accent-darker);
  --bs-btn-disabled-bg: var(--eco-accent); --bs-btn-disabled-border-color: var(--eco-accent);
  --bs-btn-focus-shadow-rgb: 31, 122, 90;
}
.btn-outline-primary {
  --bs-btn-color: var(--eco-accent); --bs-btn-border-color: var(--eco-accent);
  --bs-btn-hover-bg: var(--eco-accent); --bs-btn-hover-border-color: var(--eco-accent);
  --bs-btn-active-bg: var(--eco-accent-dark); --bs-btn-active-border-color: var(--eco-accent-dark);
}
.form-control, .form-select { border-radius: 12px; border-color: #d2d2d7; }
.form-control:focus, .form-select:focus { border-color: var(--eco-accent); box-shadow: 0 0 0 .2rem rgba(31, 122, 90, .18); }
.form-check-input:checked { background-color: var(--eco-accent); border-color: var(--eco-accent); }

/* nav */
.site-nav {
  position: sticky; top: 0; z-index: 1020;
  background: var(--eco-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--eco-line);
}
.navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: var(--eco-ink); }
.navbar .nav-link { color: var(--eco-muted); font-weight: 500; }
@media (min-width: 992px) and (max-width: 1199.98px) { .navbar .nav-link { padding-left: .45rem; padding-right: .45rem; font-size: .9rem; } .navbar .btn-sm { font-size: .8rem; } }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--eco-ink); }

/* surfaces */
.card-soft { background: var(--eco-surface); border-radius: var(--eco-radius); box-shadow: var(--eco-shadow); }
.card-soft.flat { box-shadow: none; border: 1px solid var(--eco-line); }
.badge-soft { background: var(--eco-accent-soft); color: var(--eco-accent-dark); font-weight: 500; }
.progress { height: 8px; border-radius: 999px; background: var(--eco-track); }
.progress-bar { background: var(--eco-accent); }
.alert { border-radius: 14px; border: 0; }

/* hero */
.hero { padding: 4rem 0 2.5rem; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 700; max-width: 18ch; }
.hero p.lead { color: var(--eco-muted); max-width: 46ch; }

/* course / lesson lists */
.course-card { display: flex; flex-direction: column; height: 100%; padding: 1.4rem; color: inherit; text-decoration: none; }
.course-card:hover { color: inherit; }
.course-card h3 { font-size: 1.15rem; }
.lesson-row { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid var(--eco-line); color: inherit; text-decoration: none; }
.lesson-row:first-child { border-top: 0; }
.lesson-row:hover { background: var(--eco-hover); color: inherit; }
.lesson-num { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--eco-paper); color: var(--eco-muted); font-size: .85rem; font-weight: 600; }
.lesson-num.done { background: var(--eco-accent); color: var(--eco-on-accent); }

/* lesson content */
.prose { max-width: 70ch; }
.prose p, .prose li { line-height: 1.85; }
.block { margin-bottom: 1.5rem; }
.block-case { border-left: 4px solid var(--eco-warn); background: var(--eco-warn-soft); border-radius: 0 var(--eco-radius) var(--eco-radius) 0; padding: 1.25rem 1.5rem; }
.block-case .case-tag { color: var(--eco-warn); font-weight: 600; font-size: .85rem; }
.download-card { display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--eco-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.download-card:hover { border-color: var(--eco-accent); color: inherit; }

/* checklist */
.check-item { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem 0; border-top: 1px solid var(--eco-line); }
.check-item:first-child { border-top: 0; }
.check-item .form-check-input { margin-top: .4rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.check-item.done label { color: var(--eco-muted); text-decoration: line-through; }

/* recommendation panel: the one memorable element */
.rec-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.rec-heading { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
.rec-prerequisite .rec-heading { color: var(--eco-warn); }
.rec-remedial .rec-heading { color: var(--eco-warn); }
.rec-next .rec-heading { color: var(--eco-accent-dark); }
.rec-item { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; margin-bottom: .5rem; border: 1px solid var(--eco-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.rec-item:hover { border-color: var(--eco-accent); color: inherit; }
.rec-next .rec-item { border-color: var(--eco-accent); background: var(--eco-accent-soft); }
.rec-title { font-weight: 600; }
.rec-meta, .rec-note { font-size: .82rem; color: var(--eco-muted); }
.aside-sticky { position: sticky; top: 5.5rem; }

/* quiz */
.q-card { padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
.q-option { display: block; padding: .6rem .9rem; border: 1px solid var(--eco-line); border-radius: 12px; margin-bottom: .45rem; cursor: pointer; }
.q-option:hover { border-color: var(--eco-accent); }
.q-option.correct { border-color: var(--eco-accent); background: var(--eco-accent-soft); }
.q-option.wrong { border-color: #c0392b; background: var(--eco-bad-soft); }
.score-ring { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; }

/* admin: layout แยกจากฝั่งผู้เรียน (Sidebar สีเข้ม) */
.admin-body .table { --bs-table-bg: transparent; }
.admin-body .form-label { font-weight: 500; font-size: .9rem; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  flex: 0 0 248px; width: 248px; background: var(--eco-ink); color: #d2d2d7;
  padding: 1.5rem 1rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-brand { display: block; color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; margin: 0 .5rem 1.25rem; }
.admin-brand:hover { color: #fff; }
.admin-brand small { display: block; font-weight: 500; font-size: .78rem; color: #98989d; letter-spacing: 0; }
.admin-group-label { font-size: .78rem; font-weight: 600; color: #98989d; margin: 1.1rem .75rem .3rem; }
.admin-link { display: block; padding: .45rem .75rem; border-radius: 10px; color: #e5e5ea; text-decoration: none; font-weight: 500; font-size: .95rem; }
.admin-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.admin-link.active { background: var(--eco-accent); color: var(--eco-on-accent); }
.admin-side-foot { margin-top: auto; padding: 1rem .75rem 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; color: #e5e5ea; }
.admin-role { color: #98989d; font-size: .8rem; margin-bottom: .5rem; }
.admin-foot-link { display: block; color: #d2d2d7; text-decoration: none; padding: .2rem 0; }
.admin-foot-link:hover { color: #fff; text-decoration: underline; }
.btn-reset { background: none; border: 0; padding: .2rem 0; font: inherit; cursor: pointer; text-align: left; }
.admin-role-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 12px; color: inherit; text-decoration: none; }
.admin-role-item:hover { background: var(--eco-paper); color: inherit; }
.admin-role-item.active { background: var(--eco-accent-soft); }
.admin-main { flex: 1 1 auto; min-width: 0; }
.admin-main .container { max-width: 1180px; }
.admin-bare { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.admin-login-card { width: 100%; max-width: 420px; }

.tab-pills .nav-link { border-radius: 999px; color: var(--eco-muted); }
.tab-pills .nav-link.active { background: var(--eco-ink); color: #fff; }
.mini-row { border-top: 1px solid var(--eco-line); padding: .9rem 0; }
.mini-row:first-child { border-top: 0; }

/* community / ranking / ads / cookie consent */
.thread-row { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid var(--eco-line); color: inherit; text-decoration: none; }
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: var(--eco-hover); color: inherit; }
.thread-main { flex: 1 1 auto; min-width: 0; }
.thread-title { font-weight: 600; overflow-wrap: anywhere; }
.thread-stat { flex: 0 0 3.2rem; }
.post-accepted { border: 2px solid var(--eco-accent); }
.report-box summary { list-style: none; cursor: pointer; }
.report-box summary::-webkit-details-marker { display: none; }
.rank-row { display: flex; gap: .9rem; align-items: center; padding: .8rem 1.1rem; border-top: 1px solid var(--eco-line); }
.rank-row:first-child { border-top: 0; }
.rank-row.me { background: var(--eco-accent-soft); }
.rank-no { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: var(--eco-paper); color: var(--eco-muted); }
.rank-1 { background: #f5c542; color: #4a3600; }
.rank-2 { background: #cfd3d9; color: #2c2f33; }
.rank-3 { background: #d9a577; color: #4a2a0c; }
.week-chart { display: flex; gap: .5rem; align-items: flex-end; }
.week-col { flex: 1 1 0; text-align: center; min-width: 0; }
.week-bar-wrap { height: 120px; display: flex; align-items: flex-end; background: var(--eco-paper); border-radius: 10px; overflow: hidden; }
.week-bar { width: 100%; background: var(--eco-accent); min-height: 2px; border-radius: 10px 10px 0 0; }
.ad-slot { margin: 1rem 0; text-align: center; }
.ad-slot img { max-width: 100%; }
.ad-label { font-size: .7rem; color: var(--eco-muted); margin-top: .25rem; }
.ad-text { display: block; padding: 1rem; border: 1px solid var(--eco-line); border-radius: 14px; background: var(--eco-surface); color: inherit; text-decoration: none; text-align: left; }
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2000; max-width: 720px; margin: 0 auto; background: var(--eco-surface); color: var(--eco-ink); border-radius: var(--eco-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); padding: 1.1rem 1.25rem; border: 1px solid var(--eco-line); }
.cookie-banner h2 { font-size: 1rem; margin-bottom: .35rem; }
.cookie-banner p { font-size: .875rem; color: var(--eco-muted); margin-bottom: .75rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-panel { border-top: 1px solid var(--eco-line); margin-top: .75rem; padding-top: .75rem; }

.job-card { display: block; padding: 1.1rem 1.25rem; margin-bottom: .85rem; color: inherit; text-decoration: none; }
.job-card:hover { color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.09); }
.job-title { font-weight: 700; font-size: 1.05rem; }
.news-card { display: block; padding: 1rem 1.25rem; margin-bottom: .85rem; color: inherit; text-decoration: none; }
.news-card:hover { color: inherit; }
.announce-bar { background: var(--eco-accent); color: var(--eco-on-accent); padding: .45rem 0; font-size: .9rem; }
.announce-bar a { color: var(--eco-on-accent); text-decoration: underline; }
.announce-close { background: none; border: 0; color: var(--eco-on-accent); opacity: .85; font-size: .85rem; cursor: pointer; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c0392b; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.bell-menu { min-width: 320px; max-width: 92vw; border-radius: 16px; overflow: hidden; }
.notif-row { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 1rem; border-top: 1px solid var(--eco-line); color: inherit; text-decoration: none; }
.notif-row:first-child { border-top: 0; }
.notif-row:hover { background: var(--eco-hover); color: inherit; }
.notif-row.unread { background: var(--eco-accent-soft); }
.notif-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: .5rem; }
.notif-row.unread .notif-dot { background: var(--eco-accent); }
.notif-foot { display: block; text-align: center; padding: .6rem; border-top: 1px solid var(--eco-line); font-size: .85rem; }

/* ประกาศนียบัตร (A4 แนวนอน) */
.cert-wrap { max-width: 1123px; margin: 0 auto; }
.cert-sheet { container-type: inline-size; position: relative; background: #fff; aspect-ratio: 297 / 210; padding: 2.4%; border-radius: 8px; box-shadow: var(--eco-shadow); }
.cert-frame { position: relative; height: 100%; border: 3px solid var(--eco-accent); padding: 1.8% 4%; display: flex; flex-direction: column; justify-content: space-between; text-align: center; overflow: hidden; }
.cert-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--eco-accent); opacity: .45; pointer-events: none; }
.cert-issuer { font-size: 1rem; font-size: 1.7cqw; font-weight: 600; color: var(--eco-accent-dark); letter-spacing: .04em; }
.cert-title { font-size: 2.4rem; font-size: 5.6cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-top: .3rem; }
.cert-en { font-size: .7rem; font-size: 1.25cqw; letter-spacing: .32em; color: var(--eco-muted); }
.cert-lead { font-size: .95rem; font-size: 1.75cqw; color: var(--eco-muted); }
.cert-name { font-size: 2rem; font-size: 4.6cqw; font-weight: 700; color: var(--eco-accent-dark); line-height: 1.25; margin: .25rem auto; padding: 0 3%; border-bottom: 1px solid var(--eco-line); display: inline-block; min-width: 45%; }
.cert-course { font-size: 1.3rem; font-size: 3cqw; font-weight: 600; line-height: 1.3; margin-top: .2rem; }
.cert-meta { font-size: .85rem; font-size: 1.6cqw; color: var(--eco-muted); margin-top: .6rem; display: flex; justify-content: center; gap: 2.2cqw; flex-wrap: wrap; }
.cert-bottom { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 2rem; }
.cert-sig { min-width: 26%; text-align: center; font-size: .9rem; font-size: 1.6cqw; }
.cert-sigline { border-top: 1px solid var(--eco-ink); margin-bottom: .35rem; margin-top: 3.2cqw; }
.cert-info { text-align: right; font-size: .85rem; font-size: 1.5cqw; line-height: 1.6; }
.cert-small { font-size: .72rem; font-size: 1.25cqw; color: var(--eco-muted); }
.cert-disclaimer { font-size: .65rem; font-size: 1.1cqw; color: var(--eco-muted); border-top: 1px solid var(--eco-line); padding-top: .5rem; margin-top: .6rem; }
.cert-revoked { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12cqw; font-weight: 700; color: rgba(192, 57, 43, .22); transform: rotate(-18deg); pointer-events: none; }

/* ใบแสดงผลคะแนน (A4 แนวตั้ง) */
.sc-sheet { background: #fff; border-radius: var(--eco-radius); box-shadow: var(--eco-shadow); padding: 2rem 2.25rem; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--eco-accent); padding-bottom: .9rem; }
.sc-brand { font-weight: 700; font-size: 1.25rem; color: var(--eco-accent-dark); letter-spacing: -0.02em; }
.sc-doc { font-size: .95rem; color: var(--eco-muted); }
.sc-holder { padding: 1rem 0 .5rem; }
.sc-name { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.sc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1rem 0 1.25rem; }
.sc-kpi { break-inside: avoid; border: 1px solid var(--eco-line); border-radius: 14px; padding: .75rem .9rem; }
.sc-kpi-n { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.sc-kpi-of { font-size: 1rem; color: var(--eco-muted); font-weight: 500; }
.sc-kpi-l { font-size: .82rem; color: var(--eco-muted); }
.sc-kpi-s { font-size: .78rem; color: var(--eco-accent-dark); }
.sc-h { break-after: avoid; font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .5rem; padding-left: .6rem; border-left: 4px solid var(--eco-accent); }
.sc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sc-table th { text-align: left; font-size: .78rem; color: var(--eco-muted); font-weight: 600; border-bottom: 1px solid var(--eco-line); padding: .4rem .5rem; }
.sc-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--eco-line); vertical-align: top; }
.sc-table tr { break-inside: avoid; }
.sc-bar { height: 6px; background: var(--eco-track); border-radius: 99px; overflow: hidden; margin-top: .3rem; }
.sc-bar > div { height: 100%; background: var(--eco-accent); }
.sc-bar-lg { height: 9px; margin-top: .2rem; }
.sc-bar.weak > div { background: #d98a1f; }
.sc-topics { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.sc-topic { break-inside: avoid; }
.sc-foot { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--eco-line); font-size: .75rem; color: var(--eco-muted); }
@media (max-width: 767.98px) { .sc-kpis { grid-template-columns: repeat(2, 1fr); } .sc-topics { grid-template-columns: 1fr; } .sc-sheet { padding: 1.25rem; } }

/* พิมพ์: ซ่อนเมนู/ปุ่ม/แถบต่าง ๆ เหลือเฉพาะเอกสาร */
@media print {
  body { background: #fff !important; }
  .site-nav, .site-footer, .announce-bar, .cookie-banner, .no-print, .admin-sidebar, .alert { display: none !important; }
  main .container, .cert-page, .sc-page { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cert-sheet { width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; padding: 8mm; }
  .cert-wrap { max-width: none; }
  .sc-sheet { box-shadow: none; border-radius: 0; padding: 0; }
}

/* ===== เรซูเม่ ===== */
.rs-paper { background: #fff; box-shadow: var(--eco-shadow); border-radius: 6px; max-width: 794px; margin: 0 auto; min-height: 1123px; overflow: hidden; }
.rs { font-size: .92rem; line-height: 1.55; color: #1d1d1f; --rs-accent: #1f7a5a; }
.rs a { color: inherit; text-decoration: none; }
.rs-name { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.rs-headline { color: var(--rs-accent); font-weight: 600; font-size: 1.02rem; margin-top: .15rem; }
.rs-h { font-size: .84rem; letter-spacing: .04em; font-weight: 700; color: var(--rs-accent); margin: 0 0 .5rem; }
.rs-sec { margin-bottom: 1.1rem; }
.rs-item { margin-bottom: .75rem; break-inside: avoid; }
.rs-item-head { display: flex; justify-content: space-between; gap: 1rem; }
.rs-item-title { font-weight: 600; }
.rs-item-sub { font-weight: 400; color: #555; }
.rs-item-date { font-size: .82rem; color: #666; white-space: nowrap; }
.rs-item-place { color: #555; font-size: .88rem; }
.rs-desc p, .rs-desc ul { margin: .25rem 0 0; }
.rs-desc ul { padding-left: 1.2rem; }
.rs-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.rs-chip { border: 1px solid #d9d9de; border-radius: 999px; padding: .08rem .6rem; font-size: .82rem; }
.rs-note, .rs-muted { font-size: .78rem; color: #777; }
.rs-sub { font-weight: 600; font-size: .85rem; margin: .55rem 0 .25rem; }
.rs-line { font-size: .88rem; }
.rs-list { margin: 0 0 .3rem; padding-left: 1.2rem; font-size: .88rem; }
.rs-skillcat { font-size: .78rem; color: #777; margin: .45rem 0 .2rem; }
.rs-skill { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; margin-bottom: .2rem; gap: .5rem; }
.rs-dots { white-space: nowrap; }
.rs-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d9d9de; margin-left: 3px; }
.rs-dots i.on { background: var(--rs-accent); }
.rs-photo { width: 110px; height: 130px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.rs-contacts { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin-top: .45rem; font-size: .86rem; }
.rs-contact-l { color: #777; font-size: .78rem; margin-right: .2rem; }
/* classic */
.rs-classic { padding: 2.2rem 2.4rem; }
.rs-classic .rs-head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--rs-accent); padding-bottom: .9rem; margin-bottom: 1.1rem; }
.rs-classic .rs-h { border-bottom: 1px solid #e5e5ea; padding-bottom: .25rem; }
/* modern (แถบด้านข้าง) */
.rs-modern { display: grid; grid-template-columns: 32% 1fr; min-height: 1123px; }
.rs-modern .rs-side { background: var(--rs-accent); color: #fff; padding: 2rem 1.3rem; }
.rs-modern .rs-side .rs-h { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: .25rem; }
.rs-modern .rs-side .rs-contact { font-size: .84rem; margin-bottom: .3rem; overflow-wrap: anywhere; }
.rs-modern .rs-side .rs-contact-l, .rs-modern .rs-side .rs-skillcat { color: rgba(255, 255, 255, .75); display: block; }
.rs-modern .rs-side .rs-dots i { background: rgba(255, 255, 255, .35); }
.rs-modern .rs-side .rs-dots i.on { background: #fff; }
.rs-modern .rs-photo-wrap { text-align: center; margin-bottom: 1.2rem; }
.rs-modern .rs-photo { width: 130px; height: 130px; border-radius: 50%; }
.rs-modern .rs-main { padding: 2rem 1.8rem; }
.rs-modern .rs-main .rs-head { margin-bottom: 1.2rem; }
/* fresh (เด็กจบใหม่) */
.rs-fresh { padding: 2rem 2.2rem; }
.rs-fresh .rs-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #f1f5f3; padding: 1.2rem 1.4rem; border-radius: 14px; margin-bottom: 1.2rem; }
.rs-fresh .rs-h { border-left: 4px solid var(--rs-accent); padding-left: .55rem; }
/* professional (เน้นประสบการณ์) */
.rs-professional { padding-bottom: 1.6rem; }
.rs-professional .rs-head { background: var(--rs-accent); color: #fff; padding: 1.7rem 2.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1.3rem; }
.rs-professional .rs-headline { color: #fff; opacity: .92; }
.rs-professional .rs-contacts { flex: 0 0 auto; flex-direction: column; margin-top: 0; text-align: right; gap: 0; white-space: nowrap; }
.rs-professional .rs-head > div:first-child { flex: 1 1 auto; }
.rs-professional .rs-contact-l { color: rgba(255, 255, 255, .75); }
.rs-professional .rs-sec { padding: 0 2.2rem; }
.rs-professional .rs-h { border-bottom: 2px solid var(--rs-accent); padding-bottom: .25rem; }
/* minimal (ATS) */
.rs-minimal { padding: 2.2rem 2.4rem; --rs-accent: #111; }
.rs-minimal .rs-head { text-align: center; margin-bottom: 1.1rem; }
.rs-minimal .rs-headline { color: #333; }
.rs-minimal .rs-contacts { justify-content: center; }
.rs-minimal .rs-h { color: #111; border-bottom: 1px solid #111; padding-bottom: .15rem; }
.rs-minimal .rs-chip { border: 0; padding: 0 .1rem; }
.rs-minimal .rs-chip::after { content: ' \2022'; color: #999; }
.rs-minimal .rs-chips { gap: 0 .35rem; }
/* ตัวอย่างย่อในแกลเลอรี */
.rs-thumb { display: block; height: 440px; overflow: hidden; position: relative; border: 1px solid var(--eco-line); border-radius: 12px; background: #fff; pointer-events: auto; }
.rs-scale { width: 794px; transform: scale(.38); transform-origin: top left; }
/* ตัวแก้ไข */
.tpl-option { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid var(--eco-line); border-radius: 12px; cursor: pointer; }
.tpl-option:has(input:checked) { border-color: var(--eco-accent); background: var(--eco-accent-soft); }
.tpl-option input { margin-top: .3rem; }
.swatch { display: flex; align-items: center; gap: .4rem; cursor: pointer; position: relative; }
.swatch input { position: absolute; opacity: 0; }
.swatch-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #ccc; }
.swatch input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--eco-ink); }
.swatch input:focus-visible + .swatch-dot { outline: 3px solid rgba(31, 122, 90, .45); outline-offset: 2px; }
.swatch-link { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc; }
.swatch-link.on { box-shadow: 0 0 0 2px var(--eco-ink); }
.rs-photo-thumb { width: 72px; height: 86px; object-fit: cover; border-radius: 8px; }
@media (max-width: 767.98px) { .rs-modern { grid-template-columns: 1fr; min-height: 0; } .rs-classic, .rs-fresh, .rs-minimal { padding: 1.4rem; } .rs-professional .rs-sec { padding: 0 1.4rem; } .rs-professional .rs-head { padding: 1.3rem 1.4rem; flex-direction: column; align-items: flex-start; } .rs-professional .rs-contacts { text-align: left; } }
@media print {
  .rs-paper { box-shadow: none; border-radius: 0; max-width: none; min-height: 0; }
  .rs-page { max-width: none !important; }
  .rs-modern { min-height: 277mm; }
}

.site-footer { border-top: 1px solid var(--eco-line); margin-top: 3rem; }

@media (max-width: 991.98px) {
  .aside-sticky { position: static; }
  .admin-shell { display: block; }
  .admin-sidebar { position: static; width: auto; height: auto; padding: .75rem 1rem; }
  .admin-brand { margin-bottom: .5rem; }
  .admin-nav { display: flex; gap: .25rem; overflow-x: auto; }
  .admin-group { display: contents; }
  .admin-group-label { display: none; }
  .admin-link { white-space: nowrap; }
  .admin-side-foot { margin-top: .5rem; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
  .admin-role { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ===== รูปแบบหน้าจอ (theme) ===== */
[data-theme="ocean"] {
  --eco-accent: #2b5fab; --eco-accent-dark: #1f4a8a; --eco-accent-darker: #183b70; --eco-accent-soft: #e8effa;
  --bs-primary: #2b5fab; --bs-primary-rgb: 43, 95, 171; --bs-link-color: #2b5fab; --bs-link-color-rgb: 43, 95, 171; --bs-link-hover-color: #1f4a8a; --bs-link-hover-color-rgb: 31, 74, 138;
}
[data-theme="dark"] {
  --eco-ink: #f2f2f4; --eco-muted: #a3a3ab; --eco-paper: #121214; --eco-surface: #1c1c1f; --eco-line: #2f2f35;
  --eco-accent: #3fb98a; --eco-accent-dark: #52c99a; --eco-accent-darker: #2f9e73; --eco-accent-soft: #16352a; --eco-on-accent: #06140e;
  --eco-warn: #f0b35a; --eco-warn-soft: #3a2a0e; --eco-hover: #26262b; --eco-track: #34343a; --eco-nav-bg: rgba(18, 18, 20, .88); --eco-bad-soft: #3b1a17;
  --eco-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .4);
  --bs-primary: #3fb98a; --bs-primary-rgb: 63, 185, 138; --bs-link-color: #52c99a; --bs-link-color-rgb: 82, 201, 154; --bs-link-hover-color: #7fdab5; --bs-link-hover-color-rgb: 127, 218, 181;
}
[data-theme="dark"] .btn-primary { --bs-btn-color: #06140e; --bs-btn-hover-color: #06140e; --bs-btn-active-color: #06140e; --bs-btn-disabled-color: #06140e; }
[data-theme="dark"] .btn-light { --bs-btn-bg: #2a2a30; --bs-btn-border-color: #2a2a30; --bs-btn-color: #f2f2f4; --bs-btn-hover-bg: #34343b; --bs-btn-hover-border-color: #34343b; --bs-btn-hover-color: #fff; }
[data-theme="dark"] .card-soft, [data-theme="dark"] .navbar { color: var(--eco-ink); }
[data-theme="dark"] .badge.badge-soft { background: var(--eco-accent-soft) !important; color: var(--eco-accent-dark) !important; }
[data-theme="dark"] .text-bg-light { background: #2a2a30 !important; color: #f2f2f4 !important; }
[data-theme="easy"] {
  --eco-ink: #000; --eco-muted: #333; --eco-line: #767676; --eco-accent: #0b5b3f; --eco-accent-dark: #084430; --eco-accent-darker: #063325; --eco-accent-soft: #dff1e8;
  --bs-primary: #0b5b3f; --bs-primary-rgb: 11, 91, 63; --bs-link-color: #084430; --bs-link-color-rgb: 8, 68, 48;
}
html[data-theme="easy"] { font-size: 118%; }
[data-theme="easy"] body { line-height: 1.85; }
[data-theme="easy"] a { text-decoration: underline; }
[data-theme="easy"] .btn { border-width: 2px; font-weight: 600; }
[data-theme="easy"] .card-soft { border: 2px solid var(--eco-line); box-shadow: none; }
[data-theme="easy"] :focus-visible { outline: 4px solid #ffbf00; outline-offset: 2px; }
.theme-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .5); flex: 0 0 auto; }
/* เอกสารที่พิมพ์ (ประกาศนียบัตร ใบแสดงผล เรซูเม่) ใช้สีสว่างเสมอ ไม่ว่าใช้รูปแบบไหน */
.cert-sheet, .sc-sheet, .rs-paper, .rs-thumb { --eco-ink: #1d1d1f; --eco-muted: #6e6e73; --eco-line: #e5e5ea; --eco-accent: #1f7a5a; --eco-accent-dark: #186349; --eco-accent-soft: #e7f3ed; --eco-track: #e9e9ee; color: #1d1d1f; background: #fff; }