/* ==========================================================================
   M12 หน้าบ้าน E-Learning — Hero/Carousel · จัดหน้าแรก · ข้อความเว็บไซต์ (prefix .m12c-)
   Tokens only (assets/css/tokens.css). The learner-site mock itself is styled by admin-kit.css (.rv-sp-*).
   ========================================================================== */

/* ---------------------------------------------------------------- shared: split layout + preview box */
.m12c-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); gap: var(--rv-space-4); align-items: start; min-width: 0; }
.m12c-split__main, .m12c-split__aside { min-width: 0; }
.m12c-split__aside { position: sticky; top: calc(var(--rv-header-height) + var(--rv-space-3)); }
.m12c-pvcard .rv-sp__site { max-height: max(320px, calc(100vh - 300px)); max-height: max(320px, calc(100dvh - 300px)); }
.m12c-pvbtn { display: none; }
@media (min-width: 1280px) { .m12c-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); } }
@media (max-width: 1023px) {
  .m12c-split { grid-template-columns: minmax(0, 1fr); }
  .m12c-split__aside { display: none; }
  .m12c-pvbtn { display: inline-flex; }
}

.m12c-pv { display: flex; flex-direction: column; gap: var(--rv-space-3); min-width: 0; }
.m12c-pv__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rv-space-3); min-width: 0; }
.m12c-pv__ctl { display: flex; flex-direction: column; gap: var(--rv-space-1); min-width: 0; max-width: 100%; }
.m12c-pv__lbl { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.m12c-pv__timerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); }
.m12c-pv__timerow .rv-input { width: auto; max-width: 230px; }
.m12c-pv__member { max-width: 280px; }
.m12c-pv__nav { display: inline-flex; align-items: center; gap: var(--rv-space-2); }
.m12c-pv__idx { min-width: 44px; text-align: center; font-size: var(--rv-fs-small); }
.m12c-pv__note:empty { display: none; }
.m12c-pv__line { margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m12c-pv__slides { margin: var(--rv-space-1) 0 0; padding-left: var(--rv-space-5); display: flex; flex-wrap: wrap; gap: 2px var(--rv-space-4); }
.m12c-pv__slides li { overflow-wrap: anywhere; }
.m12c-pv__slides li.is-on { color: var(--rv-primary-800); font-weight: 600; }
.m12c-pv__frame { min-width: 0; }
.m12c-pvdrawer { min-width: 0; }

.m12c-tag { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--rv-radius-pill); background: var(--rv-neutral-100); color: var(--rv-text-secondary);
  font-size: var(--rv-fs-small); line-height: 18px; font-weight: 400; white-space: nowrap; vertical-align: baseline; }
.m12c-note { display: flex; align-items: flex-start; gap: var(--rv-space-1); margin: 0; color: var(--rv-text-secondary); }
.m12c-note .rv-icon { flex: 0 0 auto; margin-top: 3px; color: var(--rv-info); }
.m12c-subhead { margin: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 600; color: var(--rv-text-primary); }
.m12c-kv .rv-kv__row { grid-template-columns: 128px minmax(0, 1fr); }
.m12c-form { min-width: 0; }
.m12c-form .rv-field.is-locked .rv-input, .m12c-form .rv-field.is-locked .rv-textarea { background-color: var(--rv-surface-subtle); color: var(--rv-text-secondary); }

/* sticky action bar (desktop); on phones it sits above the bottom navigation */
.m12c-actions { position: sticky; bottom: 0; z-index: var(--rv-z-sticky); margin-top: 0; padding: var(--rv-space-3) 0; background: var(--rv-surface); }
.m12c-actions__note { margin-right: auto; color: var(--rv-warning); font-weight: 500; }
.m12c-actions--ro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); position: static; border-top: 1px solid var(--rv-divider); }
.m12c-actions--ro .rv-alert { flex: 1 1 240px; }
@media (max-width: 767px) {
  .m12c-actions { bottom: calc(var(--rv-mobile-nav-height) + env(safe-area-inset-bottom)); padding: var(--rv-space-2) 0; }
  .m12c-actions > .rv-btn { flex: 1 1 auto; }
  .m12c-actions__note { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- CMS-01 list */
.m12c-sum .rv-stat.is-selected { border-color: var(--rv-primary-700); background: var(--rv-primary-50); box-shadow: inset 0 0 0 1px var(--rv-primary-700); }
.m12c-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); }
.m12c-cover { display: inline-flex; align-items: flex-end; gap: var(--rv-space-2); }
.m12c-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m12c-name__row { display: flex; align-items: center; gap: var(--rv-space-1); min-width: 0; }
.m12c-name__link, .m12c-name__text { font-weight: 500; overflow-wrap: anywhere; }
.m12c-name__sub { overflow-wrap: anywhere; }
.m12c-warnicon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--rv-radius-pill); color: var(--rv-warning); background: var(--rv-warning-bg); cursor: help; }
.m12c-warnicon:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
@media (pointer: coarse) { .m12c-warnicon { position: relative; } .m12c-warnicon::after { content: ""; position: absolute; inset: -11px; } }
.m12c-target { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.m12c-url { font-size: var(--rv-fs-small); overflow-wrap: anywhere; word-break: break-word; }
.m12c-switch { white-space: nowrap; }
.m12c-type { display: inline-flex; align-items: flex-start; gap: var(--rv-space-1); color: var(--rv-text-secondary); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m12c-type .rv-icon { flex: 0 0 auto; margin-top: 3px; color: var(--rv-primary-700); }
.m12c-stcap { min-width: 96px; }

.m12c-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rv-space-2); }
.m12c-order__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--rv-space-3); padding: var(--rv-space-2) var(--rv-space-3);
  border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); background: var(--rv-surface); }
.m12c-order__item.is-moved { border-color: var(--rv-primary-200); background: var(--rv-primary-50); }
.m12c-order__n { min-width: 24px; text-align: right; font-weight: 600; color: var(--rv-text-secondary); }
.m12c-order__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m12c-order__name { font-weight: 500; overflow-wrap: anywhere; }
.m12c-order__btns { display: inline-flex; gap: var(--rv-space-1); }
.m12c-order__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rv-space-2); width: 100%; }
@media (max-width: 767px) {
  .m12c-order__item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--rv-space-1); }
  .m12c-order__thumb { display: none; }
  .m12c-order__st { grid-column: 2; grid-row: 2; }
  .m12c-order__btns { grid-column: 3; grid-row: 1 / span 2; }
  .m12c-order__foot > .rv-btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- CMS-02/03 form */
.m12c-typecards .rv-options, .m12c-selcards .rv-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-space-2); }
.m12c-selcards .rv-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m12c-typecards .rv-radio, .m12c-selcards .rv-radio { height: 100%; padding: var(--rv-space-3); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-card); background: var(--rv-surface); }
.m12c-typecards .rv-radio > span, .m12c-selcards .rv-radio > span { font-weight: 500; }
.m12c-typecards .rv-option__help, .m12c-selcards .rv-option__help { margin-top: 2px; font-weight: 400; line-height: 18px; }
.m12c-typecards .rv-radio:hover, .m12c-selcards .rv-radio:hover { border-color: var(--rv-neutral-700); }
.m12c-typecards .rv-radio:has(input:checked), .m12c-selcards .rv-radio:has(input:checked) { border-color: var(--rv-primary-700); background: var(--rv-primary-50); box-shadow: inset 0 0 0 1px var(--rv-primary-700); }
.m12c-typecards .rv-radio:has(input:disabled), .m12c-selcards .rv-radio:has(input:disabled) { background: var(--rv-surface-subtle); }
@media (max-width: 767px) { .m12c-typecards .rv-options, .m12c-selcards .rv-options { grid-template-columns: minmax(0, 1fr); } }
.m12c-courseinfo { display: flex; flex-direction: column; gap: var(--rv-space-3); padding: var(--rv-space-3); border: 1px dashed var(--rv-border); border-radius: var(--rv-radius-card); background: var(--rv-surface-subtle); min-width: 0; }
.m12c-statusline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-1) var(--rv-space-2); padding: var(--rv-space-2) var(--rv-space-3); border-radius: var(--rv-radius-card); background: var(--rv-surface-subtle); }

/* ---------------------------------------------------------------- CMS-04 จัดหน้าแรก */
.m12c-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--rv-space-2); }
.m12c-flow__item { min-width: 0; }
.m12c-flow__btn { display: flex; align-items: flex-start; gap: var(--rv-space-2); width: 100%; height: 100%; min-height: 44px; margin: 0; padding: var(--rv-space-2); border: 1px solid var(--rv-divider);
  border-radius: var(--rv-radius-card); background: var(--rv-surface); color: var(--rv-text-primary); font: inherit; text-align: left; text-decoration: none; }
button.m12c-flow__btn, a.m12c-flow__btn { cursor: pointer; }
button.m12c-flow__btn:hover, a.m12c-flow__btn:hover { border-color: var(--rv-primary-700); text-decoration: none; }
.m12c-flow__btn:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.m12c-flow__item.is-here .m12c-flow__btn { border-color: var(--rv-primary-200); background: var(--rv-primary-50); }
.m12c-flow__item.is-ad .m12c-flow__btn { border-style: dashed; }
.m12c-flow__item.is-fixed .m12c-flow__btn { background: var(--rv-surface-subtle); }
.m12c-flow__n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--rv-radius-pill);
  background: var(--rv-neutral-100); color: var(--rv-text-secondary); font-size: var(--rv-fs-small); font-weight: 600; }
.m12c-flow__item.is-here .m12c-flow__n { background: var(--rv-primary-500); color: var(--rv-on-primary); }
.m12c-flow__txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); overflow-wrap: anywhere; }

.m12c-sec { scroll-margin-top: calc(var(--rv-header-height) + var(--rv-space-3)); }
.m12c-sec__vis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-2); }
.m12c-sec__vis .rv-field { gap: 0; }
.m12c-sec__vis .rv-field__meta, .m12c-sec__vis .rv-field__error:empty { display: none; }
.m12c-score { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rv-space-2) var(--rv-space-4); padding: var(--rv-space-2) var(--rv-space-3);
  border-radius: var(--rv-radius-card); background: var(--rv-surface-subtle); }
.m12c-score p { margin: 0; flex: 1 1 260px; }
.m12c-inline { flex: 0 1 300px; min-width: 0; }

.m12c-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); }
.m12c-clist__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--rv-space-2) var(--rv-space-3); padding: var(--rv-space-2) var(--rv-space-3); min-width: 0; }
.m12c-clist__item + .m12c-clist__item { border-top: 1px solid var(--rv-divider); }
.m12c-clist__item.is-warn { background: var(--rv-warning-bg); }
.m12c-clist__item.is-off .m12c-clist__cell { opacity: .7; }
.m12c-clist__n { min-width: 22px; text-align: right; font-weight: 600; color: var(--rv-text-secondary); font-size: var(--rv-fs-small); }
.m12c-clist__cell { min-width: 0; }
.m12c-clist__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rv-space-1) var(--rv-space-2); min-width: 0; text-align: right; }
.m12c-clist__meta .rv-text-warning { display: inline-flex; align-items: center; gap: 4px; text-align: left; }
.m12c-clist__btns { display: inline-flex; gap: var(--rv-space-1); }
.m12c-clist__empty { margin: 0; padding: var(--rv-space-3); border: 1px dashed var(--rv-border); border-radius: var(--rv-radius-card); }
.m12c-why { color: var(--rv-violet); }
@media (max-width: 767px) {
  .m12c-clist__item { grid-template-columns: auto minmax(0, 1fr); }
  .m12c-clist__meta { grid-column: 2; justify-content: flex-start; text-align: left; }
  .m12c-clist__btns { grid-column: 2; }
}
.m12c-catlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rv-space-2); }
.m12c-catlist > li { display: flex; align-items: center; gap: var(--rv-space-2); padding: var(--rv-space-2); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); min-width: 0; }
.m12c-catlist__ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--rv-radius-control); background: var(--rv-primary-50); color: var(--rv-primary-700); }
.m12c-catlist__txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.m12c-whyinfo { display: flex; flex-direction: column; gap: var(--rv-space-2); }
.m12c-whyinfo > p { margin: 0; display: flex; align-items: flex-start; gap: var(--rv-space-1); }
.m12c-pkg { display: flex; flex-direction: column; gap: var(--rv-space-2); }
.m12c-pkg > p { margin: 0; }
.m12c-pkg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rv-space-2); }
.m12c-pkg__list > li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--rv-space-2) var(--rv-space-3); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); background: var(--rv-surface-subtle); }
.m12c-pkg__name { font-weight: 500; }
.m12c-pkg__price { color: var(--rv-primary-800); font-weight: 600; }
.m12c-rules { margin: 0; padding-left: var(--rv-space-5); display: flex; flex-direction: column; gap: 2px; }
.m12c-priority { display: flex; align-items: flex-start; gap: var(--rv-space-1); margin: 0; padding: var(--rv-space-2) var(--rv-space-3); border-radius: var(--rv-radius-card); background: var(--rv-info-bg); color: var(--rv-text-primary); }
.m12c-priority .rv-icon { flex: 0 0 auto; margin-top: 3px; color: var(--rv-info); }
.m12c-badgecard { margin-top: var(--rv-space-4); }

/* ---------------------------------------------------------------- CMS-08 ข้อความเว็บไซต์ */
.m12c-tabbody { margin-top: var(--rv-space-4); min-width: 0; }
.m12c-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rv-space-3); }
.m12c-row { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); background: var(--rv-surface); min-width: 0; }
.m12c-row__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rv-space-2); }
.m12c-row__title { display: inline-flex; align-items: center; gap: var(--rv-space-1); font-weight: 600; color: var(--rv-text-secondary); font-size: var(--rv-fs-small); }
.m12c-row__btns, .m12c-link__btns { display: inline-flex; flex-wrap: wrap; gap: var(--rv-space-1); }
.m12c-group { background: var(--rv-surface-subtle); }
.m12c-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rv-space-2); }
.m12c-link { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: var(--rv-space-2); min-width: 0; }
.m12c-rows--compact { gap: var(--rv-space-2); }
.m12c-rows--compact .m12c-link { padding: var(--rv-space-2); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-card); }
.m12c-link__n { align-self: center; min-width: 20px; text-align: right; font-weight: 600; color: var(--rv-text-secondary); font-size: var(--rv-fs-small); }
.m12c-link__btns { align-self: end; padding-bottom: 2px; }
@media (max-width: 767px) {
  .m12c-link { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .m12c-link > .rv-field { grid-column: 2; }
  .m12c-link__btns { grid-column: 2; }
}
.m12c-owner { display: flex; align-items: flex-start; gap: var(--rv-space-1); margin: var(--rv-space-2) 0 0; color: var(--rv-text-secondary); }
.m12c-owner .rv-icon { flex: 0 0 auto; margin-top: 3px; }