/* =========================================================
   Lertchai Master Learning (LML) Design System – Clean UX/UI Pass 2026-06-02
   Scope: final visual authority loaded after style.css.
   Intent: clean button system, premium hover affordance, cards, course images,
           admin previews, certificate sticky preview, responsive rhythm.
   ========================================================= */

:root {
  /* Brand palette */
  --lml-primary-950: #061a38;
  --lml-primary-900: #08244d;
  --lml-primary-800: #0b3f73;
  --lml-primary-700: #0b579f;
  --lml-primary-600: #2563eb;
  --lml-primary-100: #eaf2ff;
  --lml-primary-50: #f5f9ff;
  --lml-gold-700: #9a6b00;
  --lml-gold-600: #d7a437;
  --lml-gold-500: #f4c542;
  --lml-gold-100: #fff3d1;
  --lml-success-700: #0f7a5c;
  --lml-success-100: #e9fbf5;
  --lml-danger-700: #c81e42;
  --lml-danger-100: #fff1f4;
  --lml-warning-100: #fff7e6;
  --lml-info-700: #087da4;
  --lml-info-100: #eafaff;
  --lml-purple-700: #5b35a5;
  --lml-purple-100: #f4f0ff;

  /* Neutral system */
  --lml-bg: #f4f7fb;
  --lml-bg-soft: #f8fbff;
  --lml-surface: #ffffff;
  --lml-surface-muted: #f6f9fd;
  --lml-text: #172033;
  --lml-text-soft: #475467;
  --lml-muted: #667085;
  --lml-border: rgba(7, 36, 77, .10);
  --lml-border-strong: rgba(7, 36, 77, .16);

  /* Radius, shadow, motion */
  --lml-radius-sm: 12px;
  --lml-radius-md: 18px;
  --lml-radius-lg: 26px;
  --lml-radius-xl: 32px;
  --lml-pill: 999px;
  --lml-shadow-xs: 0 5px 14px rgba(7, 36, 77, .045);
  --lml-shadow-sm: 0 10px 26px rgba(7, 36, 77, .065);
  --lml-shadow-md: 0 16px 36px rgba(7, 36, 77, .095);
  --lml-shadow-lg: 0 26px 68px rgba(7, 36, 77, .14);
  --lml-shadow-blue: 0 6px 14px rgba(7, 53, 111, .16);
  --lml-shadow-blue-hover: 0 10px 20px rgba(7, 53, 111, .22);
  --lml-shadow-soft-button: 0 4px 10px rgba(15, 23, 42, .045);
  --lml-shadow-soft-button-hover: 0 8px 16px rgba(15, 23, 42, .07);
  --lml-motion-fast: .16s cubic-bezier(.2,.8,.2,1);
  --lml-motion-normal: .22s cubic-bezier(.2,.8,.2,1);

  /* Component sizing */
  --lml-control-height: 46px;
  --lml-control-height-sm: 38px;
  --lml-control-height-lg: 52px;
  --lml-card-padding: 24px;
  --lml-card-padding-compact: 18px;
}

/* 1) Base experience */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  color: var(--lml-text);
  background: linear-gradient(180deg, #f9fbff 0%, var(--lml-bg) 52%, #f7f9fc 100%);
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(244, 197, 66, .30); color: var(--lml-primary-950); }
a { text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 3px;
}

/* 2) Layout rhythm */
.container { width: min(var(--container, 1180px), calc(100% - 48px)); }
.section {
  padding-top: clamp(26px, 3.2vw, 44px) !important;
  padding-bottom: clamp(30px, 3.8vw, 52px) !important;
}
main > .section:first-child,
.section.my-learning-page,
.section.mycert-page,
.section.profile-page-modern,
.section.quiz-page,
.section.result-page,
.section.lesson-page,
.section.course-detail-page,
.section.course-market-page,
.section.admin-report-page,
.section.admin-users-page,
.section.admin-cert-template-page,
.lms-catalog-page,
.lms-detail-page,
.lms-admin-courses-page,
.lms-course-builder-page,
.admin-cert-template-page,
.profile-page,
.my-courses-page,
.my-certificates-page {
  padding-top: clamp(12px, 1.5vw, 22px) !important;
}
.breadcrumb { margin-bottom: 8px !important; }
.breadcrumb + .panel,
.breadcrumb + .card,
.breadcrumb + .mycert-hero,
.breadcrumb + .profile-hero-modern,
.breadcrumb + .quiz-intro-panel,
.breadcrumb + .result-card,
.breadcrumb + .report-hero,
.breadcrumb + .market-hero,
.breadcrumb + .admin-page-head { margin-top: 0 !important; }
.section-head,
.section-head-center,
.compact-section-head,
.admin-page-head,
.premium-cert-head,
.market-section-head,
.premium-course-heading,
.feature-section-head {
  gap: 16px !important;
}
.section-head-center,
.premium-course-heading,
.feature-section-head {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.section-title {
  color: var(--lml-primary-950);
  letter-spacing: -.025em;
  line-height: 1.22;
}
.section-head-center p,
.premium-course-heading p,
.feature-section-head p,
.hero p { color: var(--lml-muted); line-height: 1.72; }

/* 3) Premium buttons: motivating but not foggy */
.btn,
button.btn,
a.btn,
input[type="submit"].btn {
  position: relative;
  min-height: var(--lml-control-height);
  border-radius: var(--lml-pill);
  padding-inline: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.1;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform var(--lml-motion-fast),
    box-shadow var(--lml-motion-fast),
    background var(--lml-motion-fast),
    border-color var(--lml-motion-fast),
    color var(--lml-motion-fast),
    opacity var(--lml-motion-fast) !important;
  will-change: transform;
}
.btn::after,
button.btn::after,
a.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.20) 42%, rgba(255,255,255,.05) 54%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
input[type="submit"].btn:hover {
  transform: translateY(-2px) !important;
}
.btn:hover::after,
button.btn:hover::after,
a.btn:hover::after { transform: translateX(120%); }
.btn:active,
button.btn:active,
a.btn:active,
input[type="submit"].btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.btn-sm { min-height: var(--lml-control-height-sm); padding: 8px 14px; font-size: .88rem; }
.btn-lg { min-height: var(--lml-control-height-lg); padding: 13px 24px; font-size: 1.06rem; }
.btn-full { width: 100%; }

.btn-primary,
.btn-main,
.button-primary,
.resource-main-action.btn-primary,
.resource-actions-row .btn-primary,
.lesson-nav-actions-pro .btn-next-lesson,
.lesson-posttest-cta .btn-primary,
.market-course-card .market-course-actions .btn-primary,
.quiz-entry-actions .btn-primary,
.result-actions .btn-primary,
.mycert-table .btn-primary,
.mycert-mobile-card .btn-primary,
.admin-report-page .report-actions .btn-primary,
.admin-course-actions-managed .btn-primary,
.admin-page .btn-primary,
.admin-main .btn-primary,
.admin-shell .btn-primary,
.topbar .nav-links .btn-primary,
.header-actions .btn-primary {
  background: linear-gradient(135deg, var(--lml-primary-900) 0%, var(--lml-primary-700) 58%, var(--lml-primary-600) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow: var(--lml-shadow-blue) !important;
}
.btn-primary:hover,
.btn-main:hover,
.button-primary:hover,
.resource-main-action.btn-primary:hover,
.resource-actions-row .btn-primary:hover,
.lesson-nav-actions-pro .btn-next-lesson:hover,
.lesson-posttest-cta .btn-primary:hover,
.market-course-card .market-course-actions .btn-primary:hover,
.quiz-entry-actions .btn-primary:hover,
.result-actions .btn-primary:hover,
.mycert-table .btn-primary:hover,
.mycert-mobile-card .btn-primary:hover,
.admin-report-page .report-actions .btn-primary:hover,
.admin-course-actions-managed .btn-primary:hover,
.admin-page .btn-primary:hover,
.admin-main .btn-primary:hover,
.admin-shell .btn-primary:hover,
.topbar .nav-links .btn-primary:hover,
.header-actions .btn-primary:hover {
  background: linear-gradient(135deg, var(--lml-primary-950) 0%, var(--lml-primary-800) 52%, var(--lml-primary-600) 100%) !important;
  box-shadow: var(--lml-shadow-blue-hover) !important;
}
.btn-outline {
  background: #fff !important;
  color: var(--lml-primary-950) !important;
  border: 1px solid var(--lml-border-strong) !important;
  box-shadow: var(--lml-shadow-soft-button) !important;
}
.btn-outline:hover { background: var(--lml-primary-100) !important; color: var(--lml-primary-800) !important; box-shadow: var(--lml-shadow-soft-button-hover) !important; }
.btn-soft,
.btn-muted,
.btn-preview {
  background: var(--lml-surface-muted) !important;
  color: #283b58 !important;
  border: 1px solid var(--lml-border) !important;
  box-shadow: var(--lml-shadow-soft-button) !important;
}
.btn-soft:hover,
.btn-muted:hover,
.btn-preview:hover { box-shadow: var(--lml-shadow-soft-button-hover) !important; background: #fff !important; }
.btn-gold,
.btn-warning,
.btn-certificate {
  background: linear-gradient(135deg, var(--lml-gold-500) 0%, #ffe08a 100%) !important;
  color: #2d2105 !important;
  border: 1px solid rgba(154,107,0,.12) !important;
  box-shadow: 0 6px 14px rgba(180, 122, 14, .15) !important;
}
.btn-gold:hover,
.btn-warning:hover,
.btn-certificate:hover { box-shadow: 0 10px 20px rgba(180, 122, 14, .20) !important; }
.btn-success { background: var(--lml-success-100) !important; color: var(--lml-success-700) !important; border: 1px solid rgba(15,122,92,.14) !important; box-shadow: var(--lml-shadow-soft-button) !important; }
.btn-info { background: var(--lml-info-100) !important; color: var(--lml-info-700) !important; border: 1px solid rgba(8,125,164,.14) !important; box-shadow: var(--lml-shadow-soft-button) !important; }
.btn-purple { background: var(--lml-purple-100) !important; color: var(--lml-purple-700) !important; border: 1px solid rgba(91,53,165,.14) !important; box-shadow: var(--lml-shadow-soft-button) !important; }
.btn-danger,
.btn-danger-soft { background: var(--lml-danger-100) !important; color: var(--lml-danger-700) !important; border: 1px solid rgba(200,30,66,.14) !important; box-shadow: 0 4px 10px rgba(200, 30, 66, .08) !important; }
.btn-locked { opacity: .78; cursor: not-allowed; transform: none !important; }

/* 4) Cards and panels */
.card,
.panel,
.course-card,
.market-course-card,
.target-card,
.feature-card,
.report-card,
.report-center-card,
.admin-card,
.admin-welcome,
.table-wrap,
.admin-course-compact-card,
.profile-stat-card,
.learner-summary-card,
.cert-studio-stat-card,
.report-kpi,
.member-kpi,
.mycert-stat,
.admin-mini-stats > div {
  border-color: var(--lml-border) !important;
  box-shadow: var(--lml-shadow-sm) !important;
}
.card,
.panel,
.report-card,
.table-wrap { border-radius: var(--lml-radius-lg); }
.card:hover,
.course-card:hover,
.market-course-card:hover,
.target-card:hover,
.feature-card:hover,
.report-center-card:hover,
.admin-course-compact-card:hover {
  box-shadow: var(--lml-shadow-md) !important;
}
.card h2,
.card h3,
.panel h1,
.panel h2,
.panel h3,
.course-card h3,
.target-card h3,
.feature-card h3,
.report-card h2 {
  color: var(--lml-primary-950);
  letter-spacing: -.015em;
}
.learner-summary-card::before,
.learner-summary-card::after,
.home-outcome-card::before,
.home-outcome-card::after,
.report-kpi::before,
.report-kpi::after,
.member-kpi::before,
.member-kpi::after,
.profile-stat-card::before,
.profile-stat-card::after,
.cert-studio-stat-card::before,
.cert-studio-stat-card::after,
.market-hero-stats div::before,
.market-hero-stats div::after,
.result-score-board div::before,
.result-score-board div::after,
.quiz-summary-box div::before,
.quiz-summary-box div::after,
.mycert-stat::before,
.mycert-stat::after,
.admin-mini-stats > div::before,
.admin-mini-stats > div::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.learner-summary-card { overflow: hidden !important; background: linear-gradient(145deg, #fff 0%, #f8fbff 100%) !important; }
.learner-summary-card strong,
.learner-summary-card span { position: relative !important; z-index: 1 !important; }

/* 5) Forms and filter bars */
.input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"] {
  min-height: var(--lml-control-height);
  border-radius: var(--lml-radius-md) !important;
  border-color: #dce5f0 !important;
  background: #fff !important;
  color: var(--lml-text);
}
.field label,
.form-group label,
label { color: #13223a; font-weight: 900; }
.input:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: rgba(11, 87, 159, .44) !important;
  box-shadow: 0 0 0 4px rgba(11, 87, 159, .085) !important;
}
.help,
.form-help,
small,
.muted { color: var(--lml-muted); }
.course-market-toolbar,
.mycert-search-form,
.admin-filter-bar,
.admin-user-search-bar,
.cert-course-picker-tools { align-items: end !important; }
.course-market-toolbar .market-search-box,
.course-market-toolbar .market-filter-select,
.mycert-search-field,
.admin-filter-bar .field,
.admin-user-search-bar .field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}
.course-market-toolbar label,
.mycert-search-form label,
.admin-filter-bar label,
.admin-user-search-bar label {
  min-height: 20px !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
.course-market-toolbar .input,
.course-market-toolbar select,
.mycert-search-form .input,
.mycert-search-form select,
.admin-filter-bar .input,
.admin-filter-bar select,
.admin-user-search-bar .input,
.admin-user-search-bar select {
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 17px !important;
}
.market-toolbar-actions,
.mycert-search-actions,
.filter-actions,
.admin-filter-bar .filter-actions,
.admin-user-search-bar .filter-actions,
.cert-course-picker-actions {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-self: end !important;
}
.market-toolbar-actions .btn,
.mycert-search-actions .btn,
.filter-actions .btn,
.admin-filter-bar .filter-actions .btn,
.admin-user-search-bar .filter-actions .btn,
.cert-course-picker-actions .btn {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 21px !important;
  border-radius: 17px !important;
  white-space: nowrap !important;
}

/* 6) Badges */
.badge {
  border: 1px solid rgba(7,36,77,.08);
  min-height: 28px;
  line-height: 1.15;
  white-space: normal;
}
.badge-student { background: var(--lml-purple-100) !important; color: var(--lml-purple-700) !important; }
.badge-teacher { background: var(--lml-primary-100) !important; color: var(--lml-primary-700) !important; }
.badge-general { background: var(--lml-success-100) !important; color: var(--lml-success-700) !important; }
.badge-gold,
.badge-certificate { background: var(--lml-gold-100) !important; color: #6a4a05 !important; border-color: rgba(215,164,55,.24) !important; }
.badge-red { background: var(--lml-danger-100) !important; color: var(--lml-danger-700) !important; }
.badge-cyan { background: var(--lml-info-100) !important; color: var(--lml-info-700) !important; }

/* 7) Tables */
.table-wrap { overflow: auto; background: #fff; }
table { font-size: .96rem; }
th {
  background: linear-gradient(180deg, #f9fbff, #f2f6fb) !important;
  color: #52627a !important;
  font-weight: 900;
}
th, td { border-bottom-color: rgba(7,36,77,.075) !important; }
tbody tr:hover td { background: rgba(234,242,255,.30); }

/* 8) Course cards and 16:9 image clarity */
.course-card,
.market-course-card { border-radius: 30px; overflow: hidden; }
.course-cover,
.course-cover-large,
.lms-course-cover,
.lms-detail-cover,
.lms-admin-course-cover,
.lms-cover-preview,
.market-course-cover,
.admin-course-cover,
.course-cover-preview,
.admin-course-thumb,
.lms-admin-courses-page .admin-course-thumb,
.admin-course-compact-list .admin-course-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #eef6ff 0%, #ffffff 58%, #fff7e8 100%) !important;
  isolation: isolate;
}
.lms-cover-preview,
.course-cover-preview { border-radius: 20px !important; border: 1px solid var(--lml-border) !important; }
.admin-course-thumb,
.lms-admin-courses-page .admin-course-thumb,
.admin-course-compact-list .admin-course-thumb {
  border-radius: 18px !important;
  border: 1px solid rgba(7, 36, 77, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55) !important;
}
.course-cover img,
.course-cover-large img,
.lms-course-cover img,
.lms-detail-cover img,
.lms-admin-course-cover img,
.lms-cover-preview img,
.market-course-cover img,
.admin-course-cover img,
.course-cover-preview img,
.admin-course-thumb img,
.lms-admin-courses-page .admin-course-thumb img,
.admin-course-compact-list .admin-course-thumb img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  opacity: 1 !important;
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .22s ease;
}
.course-card:hover .course-cover img,
.market-course-card:hover .market-course-cover img { transform: translateZ(0) scale(1.025); }
.course-cover .cover-placeholder,
.course-cover-large .cover-placeholder,
.lms-course-cover .cover-placeholder,
.lms-detail-cover .cover-placeholder,
.lms-admin-course-cover .cover-placeholder,
.lms-cover-preview .cover-placeholder,
.market-course-cover .cover-placeholder,
.admin-course-cover .cover-placeholder,
.course-cover-preview .cover-placeholder,
.admin-course-thumb .cover-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px !important;
  text-align: center !important;
}
.course-body h3,
.market-course-body h2 { line-height: 1.36; }
.course-actions,
.admin-course-actions,
.action-row,
.market-course-actions { gap: 10px; }
.market-course-card:hover { border-color: rgba(215, 164, 55, .24) !important; }

/* 9) Admin course list: clear cover and balanced actions */
.lms-admin-courses-page .admin-course-compact-card,
.admin-course-compact-list .admin-course-compact-card {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(280px, 380px) !important;
  gap: 18px !important;
  align-items: center !important;
}
.lms-admin-courses-page .admin-course-thumb,
.admin-course-compact-list .admin-course-thumb { min-height: 124px !important; }
.admin-course-actions-managed { gap: 9px !important; }
@media (max-width: 1180px) {
  .lms-admin-courses-page .admin-course-compact-card,
  .admin-course-compact-list .admin-course-compact-card { grid-template-columns: minmax(172px, 200px) minmax(0, 1fr) !important; }
  .lms-admin-courses-page .admin-course-actions-managed,
  .admin-course-compact-list .admin-course-actions-managed { grid-column: 1 / -1 !important; }
}
@media (max-width: 760px) {
  .lms-admin-courses-page .admin-course-compact-card,
  .admin-course-compact-list .admin-course-compact-card { grid-template-columns: 1fr !important; }
  .lms-admin-courses-page .admin-course-thumb,
  .admin-course-compact-list .admin-course-thumb { min-height: 0 !important; }
}

/* 10) Certificate template preview: real sticky on desktop */
.admin-cert-template-page,
.admin-cert-template-page .container,
.admin-cert-template-page .cert-template-dashboard,
.admin-cert-template-page .cert-template-main,
.admin-cert-template-page .cert-template-editor,
.admin-cert-template-page #certificateTemplateForm,
.admin-cert-template-page .cert-editor-grid,
.admin-cert-template-page .cert-editor-fields,
.admin-cert-template-page .cert-preview-sticky {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}
.admin-cert-template-page .cert-editor-grid.cert-editor-grid-wide { align-items: start !important; }
@media (min-width: 1101px) {
  .admin-cert-template-page .cert-editor-grid.cert-editor-grid-wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 500px) !important;
    gap: 24px !important;
  }
  .admin-cert-template-page .cert-preview-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    height: fit-content !important;
    z-index: 30 !important;
  }
  .admin-cert-template-page .cert-preview-card {
    max-width: 500px !important;
    max-height: none !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 1100px) {
  .admin-cert-template-page .cert-editor-grid.cert-editor-grid-wide { grid-template-columns: 1fr !important; }
  .admin-cert-template-page .cert-preview-sticky { position: static !important; top: auto !important; }
  .admin-cert-template-page .cert-preview-card { max-width: 920px !important; margin-inline: auto !important; }
}
.admin-preview-alert,
.admin-preview-result,
.lms-preview-alert,
.lesson-preview-alert,
.satisfaction-preview-alert {
  border-radius: 22px !important;
  border: 1px solid var(--lml-border) !important;
  box-shadow: var(--lml-shadow-sm) !important;
}
.admin-preview-alert { background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%) !important; }
.admin-preview-result.is-pass { background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important; border-color: rgba(15, 122, 92, .20) !important; }
.admin-preview-result.is-fail { background: linear-gradient(135deg, #fff1f4 0%, #ffffff 100%) !important; border-color: rgba(200, 30, 66, .18) !important; }

/* 11) Lesson/resource and quiz interactions */
.lesson-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--lml-muted);
  font-size: .86rem;
  font-weight: 800;
}
.lesson-list-card.is-current { border-color: rgba(37, 99, 235, .24); box-shadow: 0 18px 38px rgba(37, 99, 235, .10); }
.lesson-admin-actions,
.resource-row-actions,
.report-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lesson-admin-actions form { margin: 0; }
.lesson-admin-progress-note { display: block; margin-top: 6px; font-size: .78rem; }
.resource-admin-row {
  position: relative;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
  margin-bottom: 14px;
}
.resource-admin-row.is-confirmed { border-color: rgba(22, 163, 74, .38); background: linear-gradient(180deg, #f0fdf4, #fff); }
.lesson-resource-item::before { width: 5px !important; opacity: .78 !important; border-radius: 999px !important; }
.lesson-resource-item.resource-type-youtube::before { background: linear-gradient(180deg, #f2a6a1 0%, #ffd6c2 100%) !important; }
.lesson-resource-item.resource-type-document::before,
.lesson-resource-item.resource-type-file::before { background: linear-gradient(180deg, #6aa6df 0%, #bddfff 100%) !important; }
.lesson-resource-item.resource-type-text::before { background: linear-gradient(180deg, #b8a3f8 0%, #e7ddff 100%) !important; }
.lesson-resource-item.resource-type-image::before { background: linear-gradient(180deg, #6ddfb2 0%, #d2f8e4 100%) !important; }
.lesson-resource-item.resource-type-external::before { background: linear-gradient(180deg, #f0c95c 0%, #f9e7a9 100%) !important; }
.quiz-choice-card,
.choice-card,
.quiz-choice {
  border-radius: var(--lml-radius-md);
  transition: border-color var(--lml-motion-fast), background var(--lml-motion-fast), box-shadow var(--lml-motion-fast), transform var(--lml-motion-fast);
}
.quiz-choice-card:hover,
.choice-card:hover,
.quiz-choice:hover {
  border-color: rgba(37,99,235,.34) !important;
  background: #f8fbff !important;
  transform: translateY(-1px);
}
.quiz-choice-card:has(input:checked),
.choice-card:has(input:checked),
.quiz-choice:has(input:checked) {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .14) !important;
  color: #1e3a8a !important;
}

/* 12) Admin/report visual standard */
.admin-welcome {
  border-radius: var(--lml-radius-xl);
  background: radial-gradient(circle at 90% 0%, rgba(244,197,66,.18), transparent 32%), linear-gradient(135deg, #fff, #f8fbff);
  border: 1px solid var(--lml-border);
}
.admin-actions,
.report-actions,
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stat,
.report-kpi {
  border-radius: var(--lml-radius-lg) !important;
  border: 1px solid var(--lml-border) !important;
  background: linear-gradient(135deg, #fff, #f8fbff) !important;
}
.admin-report-page .report-hero,
.admin-report-page .report-subpage-hero,
.print-report-head {
  border-radius: var(--lml-radius-xl) !important;
  background: radial-gradient(circle at 90% 10%, rgba(244,197,66,.20), transparent 28%), linear-gradient(135deg, var(--lml-primary-950), #0b3f73) !important;
  color: #fff !important;
  border: 1px solid rgba(244,197,66,.18) !important;
}
.admin-report-page .report-hero .muted,
.admin-report-page .report-subpage-hero .muted,
.print-report-head .muted { color: rgba(255,255,255,.78) !important; }
.admin-report-page .section-title,
.admin-report-page .report-hero h1,
.admin-report-page .report-subpage-hero h1 { color: inherit; }
.report-center-card { border-radius: var(--lml-radius-lg); background: linear-gradient(135deg, #fff, #f8fbff); }
.report-kpi-grid { gap: 16px; }
.report-bar { background: #e8eef7 !important; border-radius: 999px; overflow: hidden; }
.report-bar i { background: linear-gradient(90deg, var(--lml-primary-700), #38bdf8) !important; }
.report-page-actions { justify-content: flex-end; margin: 14px 0 18px; }
.report-subpage-hero,
.report-hero.panel { break-inside: avoid; }

/* 13) Auth and footer */
.auth-single-card,
.auth-card,
.auth-panel,
.auth-side { border-radius: var(--lml-radius-xl); }
.login-page .auth-card,
.auth-login .auth-card,
.auth-login-card { max-width: 760px; margin-inline: auto; }
.footer-social-icon {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .10) !important;
}
.footer-social-icon img { width: 31px !important; height: 31px !important; }

/* 14) Responsive */
@media (max-width: 960px) {
  .container { width: min(100% - 32px, var(--container, 1180px)); }
  .section { padding-top: 28px !important; padding-bottom: 34px !important; }
  .grid-2,
  .grid-3,
  .grid-4,
  .target-grid,
  .feature-grid,
  .featured-course-grid,
  .report-grid-two { grid-template-columns: 1fr !important; }
  .btn { width: auto; }
}
@media (max-width: 760px) {
  .section { padding-top: 24px !important; padding-bottom: 32px !important; }
  .section-head,
  .compact-section-head,
  .admin-page-head,
  .premium-cert-head,
  .market-section-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .card,
  .panel,
  .cert-template-editor,
  .cert-template-sidebar { border-radius: 22px !important; }
  .course-market-toolbar,
  .mycert-search-form,
  .admin-filter-bar,
  .admin-user-search-bar { grid-template-columns: 1fr !important; align-items: stretch !important; }
  .market-toolbar-actions,
  .mycert-search-actions,
  .filter-actions,
  .admin-filter-bar .filter-actions,
  .admin-user-search-bar .filter-actions,
  .cert-course-picker-actions { width: 100% !important; justify-content: stretch !important; }
  .market-toolbar-actions .btn,
  .mycert-search-actions .btn,
  .filter-actions .btn,
  .admin-filter-bar .filter-actions .btn,
  .admin-user-search-bar .filter-actions .btn,
  .cert-course-picker-actions .btn {
    min-height: 48px !important;
    flex: 1 1 0 !important;
  }
  .lesson-admin-actions,
  .resource-row-actions,
  .report-page-actions { align-items: stretch; }
  .lesson-admin-actions .btn,
  .lesson-admin-actions form,
  .resource-row-actions .btn,
  .report-page-actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 24px, var(--container, 1180px)); }
  .card,
  .panel { padding: 18px; }
  .btn { width: 100%; }
  .admin-actions .btn,
  .report-actions .btn,
  .course-actions .btn { flex: 1 1 100%; }
  .form-row,
  .resource-form-grid { grid-template-columns: 1fr !important; }
  .section-title { font-size: clamp(1.45rem, 7vw, 1.85rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* 15) Print/PDF: admin reports portrait; certificate page remains handled by certificate CSS */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; color: #111827 !important; font-size: 12pt; }
  .site-header,
  .topbar,
  .no-print,
  .flash-container,
  .btn,
  .nav-links,
  .admin-sidebar,
  .main-menu-band,
  .nav,
  .breadcrumb.no-print,
  .admin-filter-bar.no-print,
  .report-actions.no-print,
  .report-page-actions { display: none !important; }
  .container { width: 100% !important; max-width: none !important; }
  .admin-report-page { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .admin-report-page .panel,
  .admin-report-page .card,
  .admin-report-page .report-kpi {
    box-shadow: none !important;
    border: 1px solid #d8dee8 !important;
    background: #fff !important;
    color: #111827 !important;
    break-inside: avoid;
  }
  .admin-report-page .report-hero,
  .admin-report-page .report-subpage-hero,
  .print-report-head {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #d8dee8 !important;
  }
  .admin-report-page .report-hero .muted,
  .admin-report-page .report-subpage-hero .muted,
  .print-report-head .muted { color: #475467 !important; }
  table { font-size: 10.5pt !important; }
  th { background: #eef2f7 !important; color: #111827 !important; }
}

/* 16) Certificate preview sticky fallback: follow page scroll reliably on desktop */
.admin-cert-template-page.cert-sticky-js-ready .cert-preview-sticky {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  overflow: visible !important;
  min-height: var(--lml-cert-preview-height, 0px) !important;
}

.admin-cert-template-page.cert-sticky-js-ready .cert-preview-card {
  will-change: transform, top, left, width !important;
}

@media (min-width: 1101px) {
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-fixed {
    position: fixed !important;
    top: var(--lml-cert-sticky-top, 88px) !important;
    left: var(--lml-cert-sticky-left, auto) !important;
    width: var(--lml-cert-sticky-width, 500px) !important;
    max-width: var(--lml-cert-sticky-width, 500px) !important;
    margin: 0 !important;
    z-index: 90 !important;
  }

  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-bottom {
    position: absolute !important;
    top: var(--lml-cert-bottom-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    z-index: 5 !important;
  }
}

@media (max-width: 1100px) {
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-sticky {
    min-height: 0 !important;
  }

  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card,
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-fixed,
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-bottom {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   LML Admin Alignment Hotfix 2026-06-02
   Scope: admin/courses.php and admin/quizzes.php.
   Purpose: make the first admin section sit closer to the top menu,
            normalize heading weight, and keep course cover-status chips
            aligned predictably at the far right of the top line.
   ========================================================= */

/* 1) Reduce top whitespace after the admin topbar for these two admin pages */
body:not(.certificate-page) main > .container > .section.admin-courses-page,
body:not(.certificate-page) main > .container > .section.admin-quizzes-page,
body:not(.certificate-page) main > .container > .section.admin-compact-page {
  padding-top: clamp(8px, 1.05vw, 14px) !important;
  padding-bottom: clamp(28px, 3vw, 44px) !important;
}

body:not(.certificate-page) main > .container > .section.admin-courses-page > .breadcrumb,
body:not(.certificate-page) main > .container > .section.admin-quizzes-page > .breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* 2) Normalize the premium admin hero/head used by Courses and Quizzes */
.admin-courses-page .admin-page-head.compact-admin-head,
.admin-quizzes-page .admin-welcome.compact-admin-hero {
  width: 100% !important;
  min-height: 172px !important;
  padding: clamp(22px, 2.4vw, 28px) !important;
  margin-bottom: 16px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(7, 36, 77, .105) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(244, 197, 66, .18), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 14px 34px rgba(7, 36, 77, .06) !important;
}

.admin-courses-page .admin-page-head.compact-admin-head,
.admin-quizzes-page .admin-welcome.compact-admin-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
}

.admin-courses-page .compact-admin-head h1,
.admin-quizzes-page .compact-admin-hero h1 {
  margin: 8px 0 8px !important;
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(1.72rem, 2.15vw, 2.18rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: -.035em !important;
}

.admin-courses-page .compact-admin-head p,
.admin-quizzes-page .compact-admin-hero p {
  margin: 0 !important;
  color: var(--lml-text-soft, #475467) !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
  max-width: 760px !important;
}

.admin-courses-page .section-eyebrow,
.admin-quizzes-page .section-eyebrow {
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

.admin-courses-page .admin-head-actions,
.admin-quizzes-page .admin-actions {
  align-self: center !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* 3) Course cover status: keep the chip on the right, but not floating awkwardly */
.admin-courses-page .admin-course-topline,
.admin-course-compact-list .admin-course-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  margin-bottom: 8px !important;
}

.admin-courses-page .admin-course-topline .course-badges,
.admin-course-compact-list .admin-course-topline .course-badges {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.admin-courses-page .cover-status,
.admin-course-compact-list .cover-status {
  justify-self: end !important;
  white-space: nowrap !important;
  margin-left: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.admin-courses-page .cover-status.has-cover,
.admin-course-compact-list .cover-status.has-cover {
  background: #dff8ec !important;
  color: #047857 !important;
  border: 1px solid #c6f1dc !important;
}

.admin-courses-page .cover-status.no-cover,
.admin-course-compact-list .cover-status.no-cover {
  background: #fff2cd !important;
  color: #7a5300 !important;
  border: 1px solid #f6d98c !important;
}

/* 4) Keep statistics and quiz nav closer to the hero */
.admin-courses-page .admin-mini-stats {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.admin-quizzes-page .quiz-admin-list,
.admin-courses-page .admin-course-compact-list {
  margin-top: 12px !important;
}

/* 5) Responsive: stack actions naturally and let cover status return under badges */
@media (max-width: 960px) {
  .admin-courses-page .admin-page-head.compact-admin-head,
  .admin-quizzes-page .admin-welcome.compact-admin-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  .admin-courses-page .admin-head-actions,
  .admin-quizzes-page .admin-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  body:not(.certificate-page) main > .container > .section.admin-courses-page,
  body:not(.certificate-page) main > .container > .section.admin-quizzes-page,
  body:not(.certificate-page) main > .container > .section.admin-compact-page {
    padding-top: 10px !important;
  }
  .admin-courses-page .admin-course-topline,
  .admin-course-compact-list .admin-course-topline {
    grid-template-columns: 1fr !important;
  }
  .admin-courses-page .cover-status,
  .admin-course-compact-list .cover-status {
    justify-self: start !important;
  }
}

/* =========================================================
   LML Final QA Polish Pass 2026-06-02
   Scope: learner/admin page rhythm, breadcrumb standardization,
          heading hierarchy, course cover-status chips, mobile flow.
   Loaded last to be the visual authority for the pre-production build.
   ========================================================= */

/* A) Standard page rhythm under the main menus */
main > .section:first-child,
main > .container > .section:first-child,
.site-header + main > .section:first-child,
.topbar + main > .container > .section:first-child {
  padding-top: clamp(12px, 1.35vw, 20px) !important;
}

/* Learner breadcrumbs must live above hero cards, not inside them */
.learner-page-breadcrumb,
.course-market-page > .container > .breadcrumb,
.my-learning-page > .container > .breadcrumb,
.profile-page-modern > .container > .breadcrumb,
.course-detail-page > .container > .breadcrumb,
.lesson-page > .container > .breadcrumb,
.quiz-page > .container > .breadcrumb,
.result-page > .container > .breadcrumb,
.satisfaction-page > .container > .breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  min-height: 24px !important;
  color: #64748b !important;
  font-size: .92rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.learner-page-breadcrumb a,
.course-market-page > .container > .breadcrumb a,
.my-learning-page > .container > .breadcrumb a,
.profile-page-modern > .container > .breadcrumb a,
.course-detail-page > .container > .breadcrumb a,
.lesson-page > .container > .breadcrumb a,
.quiz-page > .container > .breadcrumb a,
.result-page > .container > .breadcrumb a,
.satisfaction-page > .container > .breadcrumb a {
  color: var(--lml-primary-700, #0b579f) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Hero cards: same visual language across learner pages */
.market-hero,
.mycert-hero,
.profile-hero-modern,
.lml-section-head-pro.learner-room-head,
.course-detail-hero,
.quiz-intro-panel,
.result-card,
.satisfaction-card,
.lesson-hero-pro {
  border: 1px solid rgba(7, 36, 77, .105) !important;
  border-radius: clamp(24px, 2vw, 32px) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(244, 197, 66, .16), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%) !important;
  box-shadow: 0 16px 38px rgba(7, 36, 77, .065) !important;
}

.market-hero,
.mycert-hero {
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 2vw, 26px) !important;
}

/* Harmonize learner title scale */
.market-hero h1,
.mycert-hero h1,
.profile-hero-modern h1,
.lml-section-head-pro.learner-room-head .section-title,
.course-detail-hero h1,
.quiz-intro-panel h1,
.result-card h1,
.satisfaction-card h1,
.lesson-hero-pro h1 {
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(2.05rem, 4.2vw, 3.15rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  line-height: 1.08 !important;
  margin: 6px 0 12px !important;
}

.market-hero p,
.mycert-hero p,
.profile-hero-modern p,
.lml-section-head-pro.learner-room-head p,
.course-detail-hero p,
.quiz-intro-panel p,
.result-card p,
.satisfaction-card p,
.lesson-hero-pro p {
  color: #667085 !important;
  font-size: clamp(.98rem, 1.2vw, 1.05rem) !important;
  line-height: 1.72 !important;
  margin-bottom: 0 !important;
}

/* B) Admin top spacing and heading hierarchy */
.topbar + main > .container {
  padding-top: 0 !important;
}

.topbar + main > .container > .section,
.admin-courses-page,
.admin-quizzes-page,
.admin-lessons-page,
.admin-report-page,
.admin-users-page,
.admin-cert-template-page,
.admin-compact-page {
  padding-top: clamp(10px, 1.1vw, 16px) !important;
  padding-bottom: clamp(28px, 3vw, 44px) !important;
}

.topbar + main .breadcrumb,
.admin-courses-page > .breadcrumb,
.admin-quizzes-page > .breadcrumb,
.admin-lessons-page > .breadcrumb,
.admin-report-page > .breadcrumb,
.admin-users-page > .breadcrumb,
.admin-cert-template-page > .breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  min-height: 24px !important;
  color: #64748b !important;
  font-size: .92rem !important;
  font-weight: 650 !important;
}

.topbar + main .breadcrumb a,
.admin-courses-page > .breadcrumb a,
.admin-quizzes-page > .breadcrumb a,
.admin-lessons-page > .breadcrumb a,
.admin-report-page > .breadcrumb a,
.admin-users-page > .breadcrumb a,
.admin-cert-template-page > .breadcrumb a {
  color: var(--lml-primary-700, #0b579f) !important;
  font-weight: 900 !important;
}

.admin-page-head.compact-admin-head,
.admin-welcome.compact-admin-hero,
.admin-welcome.admin-welcome-compact,
.admin-page-head.premium-cert-head,
.admin-page-head.member-detail-head,
.report-hero,
.report-subpage-hero,
.admin-users-page .admin-page-head,
.admin-cert-template-page .admin-page-head {
  min-height: 0 !important;
  padding: clamp(20px, 2.15vw, 26px) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 1.5vw, 20px) !important;
  border-radius: clamp(24px, 2vw, 30px) !important;
  border: 1px solid rgba(7, 36, 77, .105) !important;
  background:
    radial-gradient(circle at 93% 8%, rgba(244, 197, 66, .14), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%) !important;
  box-shadow: 0 13px 32px rgba(7, 36, 77, .055) !important;
}

.admin-page-head.compact-admin-head,
.admin-welcome.compact-admin-hero,
.admin-welcome.admin-welcome-compact,
.report-hero,
.admin-page-head.premium-cert-head,
.admin-users-page .admin-page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
}

.admin-page-head h1,
.admin-welcome h1,
.report-hero h1,
.report-subpage-hero h1,
.member-detail-head h1,
.admin-users-page h1,
.admin-cert-template-page h1,
.admin-courses-page .compact-admin-head h1,
.admin-quizzes-page .compact-admin-hero h1,
.admin-lessons-page .admin-welcome-compact h1 {
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(1.68rem, 2.12vw, 2.18rem) !important;
  font-weight: 950 !important;
  line-height: 1.14 !important;
  letter-spacing: -.038em !important;
  margin: 7px 0 8px !important;
}

.admin-page-head p,
.admin-welcome p,
.report-hero p,
.report-subpage-hero p,
.admin-users-page .admin-page-head p,
.admin-cert-template-page .admin-page-head p {
  max-width: 760px !important;
  color: #667085 !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

.admin-head-actions,
.admin-actions,
.report-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Compact admin statistics: less empty air, clearer rhythm */
.admin-mini-stats,
.report-kpi-grid,
.learner-summary-grid,
.mycert-summary,
.profile-stat-grid {
  gap: 12px !important;
}

.admin-mini-stats {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.admin-mini-stats > div,
.report-kpi,
.learner-summary-card,
.mycert-stat,
.profile-stat-card {
  border-radius: 18px !important;
  border: 1px solid rgba(7, 36, 77, .09) !important;
  box-shadow: 0 9px 22px rgba(7, 36, 77, .045) !important;
}

/* C) Course cover status chip: visible but no longer dominates the card */
.admin-course-compact-card {
  position: relative !important;
  overflow: hidden !important;
}

.admin-course-compact-card .admin-course-main {
  min-width: 0 !important;
  padding-right: clamp(6px, 2.5vw, 88px) !important;
}

.admin-courses-page .admin-course-topline,
.admin-course-compact-list .admin-course-topline {
  display: block !important;
  margin-bottom: 8px !important;
}

.admin-courses-page .admin-course-topline .course-badges,
.admin-course-compact-list .admin-course-topline .course-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-right: 0 !important;
}

.admin-course-compact-card .cover-status,
.admin-courses-page .cover-status,
.admin-course-compact-list .cover-status {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  opacity: .92 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.admin-course-compact-card:hover .cover-status {
  opacity: 1 !important;
}

/* D) Lists and cards: reduce over-open spaces before production */
.admin-course-compact-list,
.quiz-admin-list,
.table-wrap,
.compact-table-wrap,
.report-center-grid,
.report-kpi-grid,
.mycert-toolbar,
.mycert-list-card,
.course-market-toolbar,
.market-filter-toolbar {
  margin-top: 12px !important;
}

.admin-course-compact-card,
.quiz-admin-card-v2,
.card,
.panel,
.market-course-card,
.learner-course-card,
.mycert-list-card,
.mycert-toolbar {
  border-color: rgba(7, 36, 77, .10) !important;
}

.quiz-admin-title h2,
.admin-course-compact-card h2,
.lesson-title-cell strong,
.report-center-card strong,
.mycert-list-head h2 {
  color: var(--lml-primary-950, #061a38) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

/* E) Mobile QA: all core learner flows must remain usable */
@media (max-width: 1100px) {
  .admin-page-head.compact-admin-head,
  .admin-welcome.compact-admin-hero,
  .admin-welcome.admin-welcome-compact,
  .report-hero,
  .admin-page-head.premium-cert-head,
  .admin-users-page .admin-page-head {
    grid-template-columns: 1fr !important;
  }
  .admin-head-actions,
  .admin-actions,
  .report-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 860px) {
  .container {
    width: min(var(--container, 1180px), calc(100% - 28px)) !important;
  }
  .market-hero,
  .mycert-hero,
  .profile-hero-modern,
  .lml-section-head-pro.learner-room-head,
  .course-detail-hero,
  .quiz-intro-panel,
  .result-card,
  .satisfaction-card,
  .lesson-hero-pro,
  .admin-page-head.compact-admin-head,
  .admin-welcome.compact-admin-hero,
  .admin-welcome.admin-welcome-compact,
  .report-hero {
    padding: 20px !important;
    border-radius: 24px !important;
  }
  .market-hero h1,
  .mycert-hero h1,
  .profile-hero-modern h1,
  .lml-section-head-pro.learner-room-head .section-title,
  .course-detail-hero h1,
  .quiz-intro-panel h1,
  .result-card h1,
  .satisfaction-card h1,
  .lesson-hero-pro h1 {
    font-size: clamp(1.8rem, 8.2vw, 2.35rem) !important;
  }
  .admin-page-head h1,
  .admin-welcome h1,
  .report-hero h1,
  .report-subpage-hero h1 {
    font-size: clamp(1.48rem, 6.8vw, 1.95rem) !important;
  }
  .btn,
  a.btn,
  button.btn {
    min-height: 44px !important;
  }
  .market-hero-actions,
  .lml-section-title-row,
  .profile-actions,
  .result-actions,
  .quiz-entry-actions,
  .lesson-nav-actions-pro,
  .course-detail-actions,
  .mycert-toolbar-actions,
  .admin-head-actions,
  .admin-actions,
  .report-actions {
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  main > .section:first-child,
  main > .container > .section:first-child,
  .topbar + main > .container > .section,
  .section.my-learning-page,
  .section.mycert-page,
  .section.profile-page-modern,
  .section.course-market-page,
  .admin-courses-page,
  .admin-quizzes-page,
  .admin-lessons-page,
  .admin-report-page {
    padding-top: 10px !important;
  }

  .learner-page-breadcrumb,
  .course-market-page > .container > .breadcrumb,
  .my-learning-page > .container > .breadcrumb,
  .profile-page-modern > .container > .breadcrumb,
  .topbar + main .breadcrumb {
    font-size: .86rem !important;
    margin-bottom: 8px !important;
  }

  .market-hero-actions .btn,
  .lml-section-title-row .btn,
  .continue-learning-action .btn,
  .result-actions .btn,
  .quiz-entry-actions .btn,
  .satisfaction-card .btn,
  .mycert-toolbar-actions .btn,
  .admin-head-actions .btn,
  .admin-actions .btn,
  .report-actions .btn {
    width: 100% !important;
  }

  .lml-section-title-row,
  .mycert-toolbar-actions,
  .admin-head-actions,
  .admin-actions,
  .report-actions {
    align-items: stretch !important;
  }

  .admin-course-compact-card .admin-course-main {
    padding-right: 0 !important;
  }

  .admin-course-compact-card .cover-status,
  .admin-courses-page .cover-status,
  .admin-course-compact-list .cover-status {
    position: static !important;
    display: inline-flex !important;
    margin-top: 7px !important;
  }

  .admin-courses-page .admin-course-topline,
  .admin-course-compact-list .admin-course-topline {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   LML Learner Hero Consistency Fix 2026-06-02
   Scope: make My Learning Room and My Certificates use the same hero grammar.
   ========================================================= */
.my-learning-page .learner-room-head.learner-hero-card,
.mycert-page .mycert-hero.learner-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 420px) !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 36px) !important;
  padding: clamp(26px, 3vw, 34px) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.my-learning-page .learner-hero-content,
.mycert-page .learner-hero-content {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.my-learning-page .learner-room-head .section-title,
.mycert-page .mycert-hero .section-title {
  margin: 6px 0 12px !important;
}

.my-learning-page .learner-room-head .muted,
.mycert-page .mycert-hero .muted {
  max-width: 720px !important;
}

.learner-hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: clamp(16px, 2vw, 22px) !important;
}

.my-learning-page .learner-hero-stats,
.mycert-page .learner-hero-stats {
  justify-self: end !important;
  width: 100% !important;
  display: grid !important;
  gap: 12px !important;
}

.my-learning-page .learner-room-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 420px !important;
}

.mycert-page .mycert-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 420px !important;
}

.my-learning-page .learner-room-stats .learner-summary-card,
.mycert-page .mycert-hero-stats .mycert-stat {
  min-height: 86px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.mycert-page .mycert-hero-stats .mycert-stat {
  align-items: center !important;
  text-align: center !important;
}

.my-learning-page .learner-room-stats .learner-summary-card strong,
.mycert-page .mycert-hero-stats .mycert-stat strong {
  font-size: clamp(1.42rem, 2vw, 1.85rem) !important;
  line-height: 1 !important;
  color: var(--lml-primary-950, #061a38) !important;
}

.my-learning-page .learner-room-stats .learner-summary-card span,
.mycert-page .mycert-hero-stats .mycert-stat span {
  margin-top: 8px !important;
  color: #667085 !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

@media (max-width: 1020px) {
  .my-learning-page .learner-room-head.learner-hero-card,
  .mycert-page .mycert-hero.learner-hero-card {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .my-learning-page .learner-hero-stats,
  .mycert-page .learner-hero-stats {
    justify-self: stretch !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .my-learning-page .learner-room-head.learner-hero-card,
  .mycert-page .mycert-hero.learner-hero-card {
    padding: 20px !important;
    gap: 16px !important;
  }

  .my-learning-page .learner-room-stats,
  .mycert-page .mycert-hero-stats {
    grid-template-columns: 1fr !important;
  }

  .learner-hero-actions,
  .learner-hero-actions .btn {
    width: 100% !important;
  }
}

/* =========================================================
   LML Certificate Hero Date Stat Fit Fix 2026-06-02
   Scope: fix long date value inside My Certificates hero stat card only.
   ========================================================= */
.mycert-page .mycert-hero-stats .mycert-stat-date {
  min-width: 0 !important;
  padding-inline: 12px !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date strong {
  font-size: clamp(1.05rem, 1.35vw, 1.32rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

@media (max-width: 1180px) and (min-width: 1021px) {
  .mycert-page .mycert-hero-stats {
    max-width: 450px !important;
  }

  .mycert-page .mycert-hero-stats .mycert-stat-date strong {
    font-size: clamp(1rem, 1.18vw, 1.22rem) !important;
  }
}

@media (max-width: 640px) {
  .mycert-page .mycert-hero-stats .mycert-stat-date strong {
    font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
  }
}

/* =========================================================
   LML Final Hero Typography Lock 2026-06-02
   Scope: lock only hero heading typography on learner-facing pages.
   Do not change home page, layout, learning flow, or database.
   ========================================================= */
.course-market-page .market-hero h1,
.my-learning-page .learner-room-head .section-title,
.mycert-page .mycert-hero .section-title,
.profile-page-modern .profile-hero-modern h1,
.course-detail-page .course-detail-hero h1 {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(2.18rem, 3.95vw, 3.18rem) !important;
  font-weight: 850 !important;
  line-height: 1.13 !important;
  letter-spacing: -0.024em !important;
  word-spacing: 0.015em !important;
  margin: 6px 0 12px !important;
  max-width: 100% !important;
  text-wrap: balance;
}

/* Registration page: keep the long headline inside the card without feeling compressed. */
.auth-page-section .auth-intro-card h1 {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(1.9rem, 3.15vw, 2.75rem) !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.018em !important;
  word-spacing: 0.015em !important;
  max-width: 100% !important;
  text-wrap: balance;
}

.auth-page-section .auth-card-pro h1 {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--lml-primary-950, #061a38) !important;
  font-size: clamp(1.55rem, 2.55vw, 2.15rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 960px) {
  .course-market-page .market-hero h1,
  .my-learning-page .learner-room-head .section-title,
  .mycert-page .mycert-hero .section-title,
  .profile-page-modern .profile-hero-modern h1,
  .course-detail-page .course-detail-hero h1 {
    font-size: clamp(1.95rem, 7.4vw, 2.55rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.016em !important;
  }

  .auth-page-section .auth-intro-card h1 {
    font-size: clamp(1.72rem, 6.6vw, 2.28rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.012em !important;
  }
}

@media (max-width: 560px) {
  .course-market-page .market-hero h1,
  .my-learning-page .learner-room-head .section-title,
  .mycert-page .mycert-hero .section-title,
  .profile-page-modern .profile-hero-modern h1,
  .course-detail-page .course-detail-hero h1 {
    font-size: clamp(1.78rem, 9vw, 2.22rem) !important;
    line-height: 1.19 !important;
    letter-spacing: -0.01em !important;
  }
}

/* =========================================================
   LML Learner Hero Spacing Alignment 2026-06-02
   Base: learn30_lml_hero_typography_lock_20260602.zip
   Scope: align My Learning Room and My Certificates hero rhythm
          with the already-approved Course Marketplace hero.
   Do not change home page, learning flow, layout logic, or database.
   ========================================================= */
.my-learning-page .learner-room-head.learner-hero-card,
.mycert-page .mycert-hero.learner-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .42fr) !important;
  align-items: stretch !important;
  gap: 32px !important;
  padding: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  min-height: 0 !important;
}

.my-learning-page .learner-hero-content,
.mycert-page .learner-hero-content {
  align-self: center !important;
  min-width: 0 !important;
  display: block !important;
}

.my-learning-page .learner-room-head .section-eyebrow,
.mycert-page .mycert-hero .section-eyebrow {
  margin-bottom: 18px !important;
}

.my-learning-page .learner-room-head .section-title,
.mycert-page .mycert-hero .section-title {
  margin: 0 0 12px !important;
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: clamp(2.18rem, 3.95vw, 3.18rem) !important;
  font-weight: 850 !important;
  line-height: 1.13 !important;
  letter-spacing: -0.024em !important;
  word-spacing: 0.015em !important;
  color: var(--lml-primary-950, #061a38) !important;
  text-wrap: balance;
}

.my-learning-page .learner-room-head .muted,
.mycert-page .mycert-hero .muted,
.mycert-page .mycert-intro {
  max-width: 780px !important;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 1.01rem !important;
  line-height: 1.80 !important;
}

.my-learning-page .learner-hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.my-learning-page .learner-hero-stats,
.mycert-page .learner-hero-stats,
.my-learning-page .learner-room-stats,
.mycert-page .mycert-hero-stats {
  justify-self: end !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 420px !important;
  display: grid !important;
  gap: 12px !important;
  align-content: center !important;
  padding: 14px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(248,251,255,.92) 0%, rgba(255,255,255,.72) 100%) !important;
  border: 1px solid rgba(7,36,77,.08) !important;
  box-shadow: 0 18px 46px rgba(7,36,77,.09), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.my-learning-page .learner-room-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mycert-page .mycert-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 430px !important;
}

.my-learning-page .learner-room-stats .learner-summary-card,
.mycert-page .mycert-hero-stats .mycert-stat {
  position: relative !important;
  overflow: hidden !important;
  min-height: 96px !important;
  padding: 17px 18px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f6f9fc 100%) !important;
  border: 1px solid rgba(100,116,139,.16) !important;
  box-shadow: 0 14px 30px rgba(7,36,77,.075), inset 0 1px 0 rgba(255,255,255,.88) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.my-learning-page .learner-room-stats .learner-summary-card {
  align-items: flex-start !important;
  text-align: left !important;
}

.mycert-page .mycert-hero-stats .mycert-stat {
  align-items: center !important;
  text-align: center !important;
}

.my-learning-page .learner-room-stats .learner-summary-card::after,
.mycert-page .mycert-hero-stats .mycert-stat::after {
  content: "" !important;
  position: absolute !important;
  right: -23px !important;
  bottom: -26px !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 50% !important;
  background: rgba(148,163,184,.13) !important;
  pointer-events: none !important;
}

.my-learning-page .learner-room-stats .learner-summary-card strong,
.mycert-page .mycert-hero-stats .mycert-stat strong {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  color: var(--lml-primary-950, #061a38) !important;
  font-size: 1.82rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.my-learning-page .learner-room-stats .learner-summary-card span,
.mycert-page .mycert-hero-stats .mycert-stat span {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 8px !important;
  color: #667085 !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date {
  padding-inline: 10px !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date strong {
  font-size: clamp(.98rem, 1.18vw, 1.18rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  letter-spacing: -0.018em !important;
  max-width: 100% !important;
  overflow: visible !important;
}

@media (max-width: 1020px) {
  .my-learning-page .learner-room-head.learner-hero-card,
  .mycert-page .mycert-hero.learner-hero-card {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .my-learning-page .learner-hero-stats,
  .mycert-page .learner-hero-stats,
  .my-learning-page .learner-room-stats,
  .mycert-page .mycert-hero-stats {
    justify-self: stretch !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .my-learning-page .learner-room-head.learner-hero-card,
  .mycert-page .mycert-hero.learner-hero-card {
    padding: 20px !important;
    gap: 16px !important;
  }

  .my-learning-page .learner-room-head .section-eyebrow,
  .mycert-page .mycert-hero .section-eyebrow {
    margin-bottom: 14px !important;
  }

  .my-learning-page .learner-room-head .section-title,
  .mycert-page .mycert-hero .section-title {
    font-size: clamp(1.78rem, 9vw, 2.22rem) !important;
    line-height: 1.19 !important;
    letter-spacing: -0.01em !important;
  }

  .my-learning-page .learner-room-stats,
  .mycert-page .mycert-hero-stats {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .my-learning-page .learner-hero-actions,
  .my-learning-page .learner-hero-actions .btn {
    width: 100% !important;
  }

  .mycert-page .mycert-hero-stats .mycert-stat-date strong {
    font-size: clamp(1.18rem, 6vw, 1.45rem) !important;
  }
}

/* =========================================================
   FINAL TARGETED VISUAL FIX 2026-06-03
   Scope: only fix remaining visual issues discussed with user
   - Admin report subpage hero headings too dark
   - Learner hero spacing consistency (courses / my learning / certificates)
   - Profile page minor compact refinement
   ========================================================= */

/* 1) Admin report subpage hero headings must stay readable on dark blue backgrounds */
.admin-report-page .report-subpage-hero {
  color: #ffffff !important;
}
.admin-report-page .report-subpage-hero .section-title,
.admin-report-page .report-subpage-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.14) !important;
}
.admin-report-page .report-subpage-hero p,
.admin-report-page .report-subpage-hero .muted,
.admin-report-page .report-subpage-hero label {
  color: rgba(255,255,255,.88) !important;
}
.admin-report-page .report-subpage-hero select,
.admin-report-page .report-subpage-hero input[type="text"],
.admin-report-page .report-subpage-hero input[type="search"] {
  background: rgba(255,255,255,.98) !important;
  color: #0b1f3a !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* 2) Learner hero spacing: use Courses page as the visual master */
.my-learning-page .learner-room-head.learner-hero-card,
.mycert-page .mycert-hero.learner-hero-card {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  padding: clamp(24px, 2.4vw, 30px) !important;
  min-height: auto !important;
}
.my-learning-page .learner-hero-content,
.mycert-page .learner-hero-content {
  justify-content: center !important;
}
.my-learning-page .learner-room-head .section-title,
.mycert-page .mycert-hero .section-title {
  margin: 8px 0 10px !important;
}
.my-learning-page .learner-room-head .muted,
.mycert-page .mycert-hero .muted {
  max-width: 660px !important;
  line-height: 1.64 !important;
}
.my-learning-page .learner-room-head .section-eyebrow,
.mycert-page .mycert-hero .section-eyebrow,
.market-hero .section-eyebrow {
  margin-bottom: 4px !important;
}
.my-learning-page .learner-hero-actions,
.mycert-page .learner-hero-actions,
.market-hero-actions {
  margin-top: 16px !important;
}
.my-learning-page .learner-hero-stats,
.mycert-page .learner-hero-stats {
  align-self: center !important;
  gap: 12px !important;
}
.my-learning-page .learner-room-stats,
.mycert-page .mycert-hero-stats {
  max-width: 380px !important;
}
.my-learning-page .learner-room-stats .learner-summary-card,
.mycert-page .mycert-hero-stats .mycert-stat {
  min-height: 94px !important;
  padding: 15px 16px !important;
}
.my-learning-page .learner-room-stats .learner-summary-card strong,
.mycert-page .mycert-hero-stats .mycert-stat strong,
.market-hero-stats strong {
  line-height: 1 !important;
}

/* 3) Profile page: keep the layout, just compact it slightly */
.profile-hero-modern {
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr) !important;
  gap: 24px !important;
  padding: 26px !important;
}
.profile-hero-modern h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  line-height: 1.08 !important;
  margin: 4px 0 10px !important;
}
.profile-identity-block {
  gap: 20px !important;
}
.profile-avatar-xl {
  width: 108px !important;
  height: 108px !important;
}
.profile-actions.process-nav {
  margin-top: 14px !important;
}
.profile-overview-panel {
  padding: 20px !important;
}
.profile-stat-card {
  min-height: 88px !important;
  padding: 14px 15px !important;
}
.profile-content-layout {
  margin-top: 20px !important;
}
.profile-page .profile-info-grid {
  gap: 14px !important;
  margin-top: 18px !important;
}
.profile-page .profile-info-card {
  padding: 16px 18px !important;
  border-radius: 22px !important;
  min-height: 0 !important;
}
.profile-page .profile-info-card strong {
  line-height: 1.5 !important;
}
.profile-side-panel {
  padding: 22px !important;
}

@media (max-width: 980px) {
  .my-learning-page .learner-room-head.learner-hero-card,
  .mycert-page .mycert-hero.learner-hero-card,
  .profile-hero-modern {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ADMIN DASHBOARD SPACING FIX 2026-06-03
   Scope: admin/index.php only
   Goal: balance vertical rhythm between Hero, statistics, and feature cards.
   ========================================================= */
.admin-dashboard-hero-section {
  padding-top: clamp(14px, 1.3vw, 20px) !important;
  padding-bottom: 0 !important;
}
.admin-dashboard-hero-section .admin-welcome {
  margin-bottom: 0 !important;
}
.admin-dashboard-stats-section {
  padding-top: clamp(22px, 2.2vw, 28px) !important;
  padding-bottom: 0 !important;
}
.admin-dashboard-feature-section {
  padding-top: clamp(22px, 2.2vw, 28px) !important;
  padding-bottom: clamp(28px, 3vw, 40px) !important;
}
.admin-dashboard-stat-grid,
.admin-dashboard-feature-grid {
  margin-top: 0 !important;
}
.admin-dashboard-feature-grid {
  gap: clamp(18px, 2.2vw, 26px) !important;
}
.admin-dashboard-feature-section .target-card {
  min-height: clamp(250px, 25vw, 282px) !important;
}
@media (max-width: 760px) {
  .admin-dashboard-hero-section {
    padding-top: 14px !important;
  }
  .admin-dashboard-stats-section,
  .admin-dashboard-feature-section {
    padding-top: 18px !important;
  }
}


/* =========================================================
   QUIZ HERO + COURSE DETAIL SPACING PATCH 2026-06-03
   Scope only:
   - quiz.php visual compactness and attempt status display
   - course-detail.php middle learning flow spacing
   Does not change learning/quiz/survey/certificate logic.
   ========================================================= */

/* 1) Quiz hero: compact visual rhythm, keep structure unchanged */
.quiz-page .quiz-intro-panel {
  padding: clamp(22px, 2.4vw, 30px) !important;
  gap: clamp(18px, 2.6vw, 34px) !important;
  margin-bottom: 18px !important;
}
.quiz-page .quiz-intro-panel .section-title {
  margin: 8px 0 10px !important;
  line-height: 1.08 !important;
}
.quiz-page .quiz-intro-panel .muted {
  margin-top: 0 !important;
  line-height: 1.58 !important;
}
.quiz-page .quiz-summary-box {
  grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
}
.quiz-page .quiz-summary-box > div {
  min-height: 84px !important;
  padding: 12px 10px !important;
}

/* Timer row: show attempt status close to the clock with clear spacing */
.quiz-page .quiz-timer-panel {
  margin: 12px 0 18px !important;
  padding: 13px 18px !important;
  gap: 18px !important;
}
.quiz-timer-side {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
}
.quiz-attempt-status {
  min-width: 150px !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.quiz-attempt-status strong {
  color: #ffffff !important;
  font-size: .96rem !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
.quiz-attempt-status span {
  color: rgba(255,255,255,.72) !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
}

/* 2) Course detail: tighten the learning flow sections as one continuous path */
.course-detail-page + .learning-flow-section,
.learning-flow-section,
.learning-sequence-section,
.assessment-stage-section {
  padding-top: clamp(20px, 2.3vw, 30px) !important;
  padding-bottom: clamp(18px, 2.2vw, 28px) !important;
}
.learning-flow-section .section-head,
.learning-sequence-section .section-head,
.assessment-stage-section .section-head {
  margin-bottom: 14px !important;
}
.learning-flow-section .section-title,
.learning-sequence-section .section-title,
.assessment-stage-section .section-title {
  margin-bottom: 8px !important;
}
.learning-flow-section .section-head .muted,
.learning-sequence-section .section-head .muted,
.assessment-stage-section .section-head .muted {
  line-height: 1.62 !important;
}
.learning-path-pro {
  gap: 12px !important;
}
.path-step-card {
  min-height: 124px !important;
  padding: 16px !important;
  border-radius: 22px !important;
}
.path-step-card small {
  line-height: 1.45 !important;
}
.lesson-list-grid,
.quiz-entry-grid {
  gap: 12px !important;
}
.lesson-list-card,
.quiz-entry-card {
  padding: 16px !important;
  border-radius: 22px !important;
}
.lesson-completion-note {
  margin: 0 0 12px !important;
}

@media (max-width: 980px) {
  .quiz-page .quiz-summary-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .quiz-page .quiz-timer-panel {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .quiz-timer-side {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 640px) {
  .quiz-page .quiz-intro-panel {
    padding: 20px !important;
  }
  .quiz-page .quiz-summary-box {
    grid-template-columns: 1fr 1fr !important;
  }
  .quiz-timer-side {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .quiz-attempt-status,
  .quiz-countdown {
    width: 100% !important;
  }
}


/* =========================================================
   MY CERTIFICATES HERO STAT EQUAL HEIGHT FIX 2026-06-03
   Scope: only the 3 summary boxes on my-certificates.php hero
   Purpose: equal visual height/alignment when labels wrap to 2 lines.
   ========================================================= */

.mycert-page .mycert-hero-stats {
  align-items: stretch !important;
}

.mycert-page .mycert-hero-stats .mycert-stat {
  min-height: 100px !important;
  height: 100% !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
}

.mycert-page .mycert-hero-stats .mycert-stat strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.mycert-page .mycert-hero-stats .mycert-stat span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-align: center !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date strong {
  font-size: clamp(1rem, 1.35vw, 1.35rem) !important;
  letter-spacing: -.01em !important;
}


/* =========================================================
   PROFILE STAT WIDTH + MY CERT DATE FIT FIX 2026-06-03
   Scope:
   - profile.php hero right statistic panel width only
   - my-certificates.php date value inside certificate stat box only
   ========================================================= */

/* Profile: reduce right summary panel width to give long full names more room */
.profile-page-modern .profile-hero-modern {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) !important;
}

.profile-page-modern .profile-overview-panel {
  max-width: 440px !important;
  width: 100% !important;
  justify-self: end !important;
}

.profile-page-modern .profile-hero-content h1,
.profile-page-modern .profile-hero-modern h1 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* My certificates: reduce date size so it does not sit too close to the stat card edge */
.mycert-page .mycert-hero-stats .mycert-stat-date strong {
  font-size: clamp(.88rem, 1.05vw, 1.12rem) !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

@media (max-width: 980px) {
  .profile-page-modern .profile-hero-modern {
    grid-template-columns: 1fr !important;
  }

  .profile-page-modern .profile-overview-panel {
    max-width: none !important;
    justify-self: stretch !important;
  }
}


/* =========================================================
   MY CERTIFICATES HERO STAT ALIGNMENT REFINE 2026-06-03
   Scope: only align date/value row and Thai label row consistently.
   ========================================================= */
.mycert-page .mycert-hero-stats .mycert-stat {
  display: grid !important;
  grid-template-rows: minmax(30px, auto) minmax(36px, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 8px !important;
}

.mycert-page .mycert-hero-stats .mycert-stat strong {
  width: 100% !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.mycert-page .mycert-hero-stats .mycert-stat span {
  width: 100% !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.22 !important;
}

.mycert-page .mycert-hero-stats .mycert-stat-date strong {
  min-height: 30px !important;
  font-size: clamp(.86rem, 1vw, 1.05rem) !important;
}


/* =========================================================
   LERTCHAI MASTER LEARNING — PREMIUM MASTER RENOVATION 2026-06-03
   Design intent:
   - Premium Thai LMS look: calm, clear, modern, blue-white-gold identity
   - Higher visual consistency across learner/admin pages
   - Better focus states, motion, card rhythm, table/forms, responsive polish
   - CSS-only visual renovation; no database or core flow logic changes
   ========================================================= */

:root {
  --lml-ink: #071a38;
  --lml-ink-2: #10284d;
  --lml-soft-ink: #42526b;
  --lml-cloud: #f5f8fc;
  --lml-cloud-2: #eef4fb;
  --lml-surface: rgba(255,255,255,.88);
  --lml-surface-solid: #ffffff;
  --lml-navy: #08244b;
  --lml-blue: #0b579f;
  --lml-blue-2: #1d6fe6;
  --lml-gold: #f4c542;
  --lml-gold-2: #d7a437;
  --lml-glow: 0 24px 70px rgba(7,36,77,.10);
  --lml-glow-soft: 0 16px 44px rgba(7,36,77,.07);
  --lml-line-soft: rgba(7,36,77,.10);
  --lml-radius-premium: 30px;
  --lml-radius-soft: 22px;
  --lml-ease: cubic-bezier(.2,.8,.2,1);
}

/* Global premium surface */
html {
  scroll-behavior: smooth;
}

body.lml-premium-ui,
body {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 5% 8%, rgba(11,87,159,.055), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(244,197,66,.075), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7fc 48%, #f7f9fc 100%) !important;
}

body.lml-premium-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(7,36,77,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,36,77,.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.32), transparent 70%);
}

/* Better page rhythm */
main > .section:first-child,
.section.course-market-page,
.section.course-detail-page,
.section.my-learning-page,
.section.mycert-page,
.section.profile-page-modern,
.section.quiz-page,
.section.result-page,
.section.lesson-page {
  padding-top: clamp(16px, 2vw, 26px) !important;
}

/* Premium card grammar */
.card,
.panel,
.course-card,
.market-course-card,
.lesson-list-card,
.quiz-entry-card,
.quiz-question-card,
.cert-card,
.profile-info-card,
.admin-course-compact-card,
.admin-report-page .report-card,
.auth-card,
.auth-panel {
  border-color: rgba(7,36,77,.095) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.89)) !important;
  box-shadow: 0 18px 48px rgba(7,36,77,.065) !important;
  backdrop-filter: saturate(1.2) blur(8px);
}

.card:hover,
.panel:hover,
.course-card:hover,
.market-course-card:hover,
.lesson-list-card:hover,
.quiz-entry-card:hover,
.cert-card:hover,
.admin-course-compact-card:hover {
  box-shadow: 0 24px 62px rgba(7,36,77,.095) !important;
}

/* Premium hero polish - keep identity but add refined depth */
.hero-card,
.market-hero,
.mycert-hero,
.profile-hero-modern,
.lml-section-head-pro.learner-room-head,
.course-detail-hero,
.quiz-intro-panel,
.result-card,
.satisfaction-card,
.lesson-hero-pro,
.admin-welcome,
.compact-admin-hero,
.form-hero-panel {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(7,36,77,.10) !important;
  box-shadow: 0 22px 64px rgba(7,36,77,.085) !important;
}

.hero-card::before,
.market-hero::before,
.mycert-hero::before,
.profile-hero-modern::before,
.lml-section-head-pro.learner-room-head::before,
.course-detail-hero::before,
.quiz-intro-panel::before,
.result-card::before,
.satisfaction-card::before,
.lesson-hero-pro::before,
.admin-welcome::before,
.compact-admin-hero::before,
.form-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 92% 8%, rgba(244,197,66,.12), transparent 28%);
  opacity: .84;
}

.hero-card > *,
.market-hero > *,
.mycert-hero > *,
.profile-hero-modern > *,
.lml-section-head-pro.learner-room-head > *,
.course-detail-hero > *,
.quiz-intro-panel > *,
.result-card > *,
.satisfaction-card > *,
.lesson-hero-pro > *,
.admin-welcome > *,
.compact-admin-hero > *,
.form-hero-panel > * {
  position: relative;
  z-index: 1;
}

/* Heading system */
.section-title,
.market-hero h1,
.mycert-hero h1,
.profile-hero-modern h1,
.lml-section-head-pro.learner-room-head .section-title,
.course-detail-hero h1,
.quiz-intro-panel h1,
.result-card h1,
.satisfaction-card h1,
.lesson-hero-pro h1,
.compact-admin-hero h1,
.admin-page-head h1 {
  color: var(--lml-ink) !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.section-eyebrow,
.badge,
.cert-pill,
.status-pill {
  letter-spacing: .08em !important;
}

/* Buttons: premium tactile system */
.btn,
button,
input[type="submit"] {
  transition:
    transform .18s var(--lml-ease),
    box-shadow .18s var(--lml-ease),
    background .18s var(--lml-ease),
    border-color .18s var(--lml-ease),
    color .18s var(--lml-ease) !important;
}

.btn-primary,
button.btn-primary,
.btn.active,
.process-nav a.active,
.main-nav a.active,
.nav-links a.active {
  box-shadow: 0 12px 28px rgba(11,87,159,.18) !important;
}

.btn-primary:hover,
.btn-gold:hover,
.btn-outline:hover,
.btn-soft:hover,
.btn-success:hover,
.btn-danger:hover,
.process-nav a:hover,
.course-actions .btn:hover,
.quiz-entry-actions .btn:hover,
.lesson-list-action .btn:hover {
  transform: translateY(-2px) !important;
}

.btn-primary:active,
.btn-gold:active,
.btn-outline:active,
.btn-soft:active {
  transform: translateY(0) scale(.99) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #0a4a8d 0%, #1d6fe6 100%) !important;
}

.btn-gold {
  background: linear-gradient(135deg, #f4c542 0%, #f0b82e 100%) !important;
  color: #111827 !important;
}

/* Accessible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.quiz-choice:focus-within,
.check-card:focus-within {
  outline: 3px solid rgba(244,197,66,.55) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(11,87,159,.10) !important;
}

/* Header polish without structural change */
.site-header,
.topbar {
  box-shadow: 0 8px 24px rgba(7,36,77,.05) !important;
}

body.is-scrolled .site-header,
body.is-scrolled .topbar {
  box-shadow: 0 12px 34px rgba(7,36,77,.12) !important;
}

.header-strip,
.main-menu-band {
  background:
    linear-gradient(90deg, #061a38 0%, #0b579f 54%, #08244b 100%) !important;
}

.main-nav a,
.nav-links a {
  position: relative;
}

.main-nav a::after,
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: var(--lml-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s var(--lml-ease);
}

.main-nav a:hover::after,
.main-nav a.active::after,
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Forms and search bars */
input,
select,
textarea,
.input,
.form-control {
  transition: border-color .18s var(--lml-ease), box-shadow .18s var(--lml-ease), background .18s var(--lml-ease) !important;
}

input:hover,
select:hover,
textarea:hover,
.input:hover {
  border-color: rgba(11,87,159,.22) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus {
  border-color: rgba(11,87,159,.42) !important;
  box-shadow: 0 0 0 5px rgba(11,87,159,.095) !important;
}

/* Tables: cleaner admin/report reading */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  color: #42526b !important;
  font-weight: 950 !important;
  letter-spacing: .015em !important;
}

td,
th {
  vertical-align: middle !important;
}

tbody tr {
  transition: background .14s ease;
}

tbody tr:hover {
  background: rgba(11,87,159,.035) !important;
}

/* Course and learning cards */
.market-course-card,
.course-card,
.learner-course-card {
  transform: translateZ(0);
}

.market-course-card:hover,
.course-card:hover,
.learner-course-card:hover {
  transform: translateY(-4px) !important;
}

.course-thumb img,
.market-course-cover img,
.lms-detail-cover img,
.admin-course-thumb img {
  transition: transform .35s var(--lml-ease), filter .35s var(--lml-ease);
}

.course-card:hover .course-thumb img,
.market-course-card:hover .market-course-cover img,
.admin-course-compact-card:hover .admin-course-thumb img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

/* Learning path premium continuity */
.learning-path-pro {
  align-items: stretch !important;
}

.path-step-card {
  transition: transform .18s var(--lml-ease), box-shadow .18s var(--lml-ease), border-color .18s var(--lml-ease) !important;
}

.path-step-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 46px rgba(7,36,77,.09) !important;
}

.path-step-card.is-active {
  background:
    radial-gradient(circle at 94% 10%, rgba(244,197,66,.16), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

/* Quiz interface */
.quiz-choice {
  cursor: pointer;
}

.quiz-choice:hover {
  transform: translateY(-1px) !important;
}

.quiz-choice.is-selected,
.quiz-choice:has(input:checked) {
  box-shadow: 0 14px 36px rgba(11,87,159,.13) !important;
}

.quiz-timer-panel {
  backdrop-filter: blur(10px) saturate(1.2);
}

/* Certificate cards */
.mycert-stat,
.cert-card,
.certificate-card {
  transition: transform .18s var(--lml-ease), box-shadow .18s var(--lml-ease) !important;
}

.cert-card:hover {
  transform: translateY(-3px) !important;
}

/* Admin dashboard premium spacing and modules */
.admin-dashboard-page .admin-stat-grid,
.admin-stat-grid,
.stats-grid {
  align-items: stretch !important;
}

.admin-dashboard-page .stat,
.admin-dashboard-page .admin-stat-card {
  min-height: 104px !important;
}

/* Reduce noisy decorative circles if any remain */
.stat-card::before,
.stat-card::after,
.admin-mini-stat::before,
.admin-mini-stat::after,
.learner-summary-card::before,
.learner-summary-card::after {
  opacity: .08 !important;
}

/* Premium micro reveal */
.lml-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--lml-ease), transform .45s var(--lml-ease);
}

.lml-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle progress strip for course pages */
.progress-track,
.report-bar,
.lms-progress-box .progress-track {
  position: relative;
  overflow: hidden;
}

.progress-track span,
.report-bar i,
.lms-progress-box .progress-track span {
  background: linear-gradient(90deg, var(--lml-blue), var(--lml-gold)) !important;
}

/* Footer premium */
.footer-main,
.footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(244,197,66,.12), transparent 24%),
    linear-gradient(135deg, #061a38, #08244b) !important;
  color: rgba(255,255,255,.88) !important;
}

.footer a,
.footer-main a {
  color: #ffffff !important;
}

.back-to-top {
  box-shadow: 0 16px 36px rgba(7,36,77,.22) !important;
}

/* Performance-friendly rendering hints */
.market-course-card,
.course-card,
.learner-course-card,
.lesson-list-card,
.quiz-question-card,
.quiz-entry-card,
.cert-card,
.profile-info-card,
.report-card {
  contain: layout paint;
}

/* Mobile refinement */
@media (max-width: 980px) {
  .main-nav,
  .nav-links {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .main-nav a,
  .nav-links a {
    white-space: nowrap;
  }

  .hero-card,
  .market-hero,
  .mycert-hero,
  .profile-hero-modern,
  .lml-section-head-pro.learner-room-head,
  .course-detail-hero,
  .quiz-intro-panel {
    border-radius: 24px !important;
  }
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(11,87,159,.06), transparent 28%),
      #f7f9fc !important;
  }

  .container {
    width: min(100% - 22px, var(--container, 1180px)) !important;
  }

  .section-title,
  .market-hero h1,
  .mycert-hero h1,
  .profile-hero-modern h1,
  .lml-section-head-pro.learner-room-head .section-title,
  .course-detail-hero h1,
  .quiz-intro-panel h1 {
    letter-spacing: -.026em !important;
  }

  .btn {
    min-height: 46px !important;
  }

  .card,
  .panel {
    border-radius: 20px !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lml-reveal,
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   FINAL TWO-POINT POLISH 2026-06-03
   1) Certificate template preview must follow scroll reliably.
   2) Course cards must not show duplicate "ขั้นตอนถัดไป:" prefix.
   ========================================================= */

/* Certificate preview: isolate from premium reveal/contain/transform so JS fixed fallback works */
.admin-cert-template-page .cert-preview-sticky,
.admin-cert-template-page .cert-preview-sticky-host,
.admin-cert-template-page .cert-preview-card,
.admin-cert-template-page .cert-preview-card.no-reveal {
  transform: none !important;
  contain: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.admin-cert-template-page .cert-preview-card.no-reveal,
.admin-cert-template-page .cert-preview-card.no-reveal.lml-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition-property: box-shadow, border-color, background !important;
}

.admin-cert-template-page.cert-sticky-js-ready .cert-preview-sticky {
  position: relative !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}

@media (min-width: 1101px) {
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-fixed {
    position: fixed !important;
    top: var(--lml-cert-sticky-top, 88px) !important;
    left: var(--lml-cert-sticky-left, auto) !important;
    width: var(--lml-cert-sticky-width, 500px) !important;
    max-width: var(--lml-cert-sticky-width, 500px) !important;
    z-index: 160 !important;
    margin: 0 !important;
  }

  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-bottom {
    position: absolute !important;
    top: var(--lml-cert-bottom-top, 0px) !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    z-index: 20 !important;
  }
}

/* Course next-step boxes: keep label + action visually clear after removing duplicated prefix */
.next-step-box > span {
  color: #667085 !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
}

.next-step-box > strong {
  color: var(--lml-ink, #071a38) !important;
  line-height: 1.42 !important;
}


/* =========================================================
   FINAL SCROLL PREVIEW + ORIGINAL MENU TONE 2026-06-03
   Scope:
   1) Restore calmer original-style blue menu bars.
   2) Make certificate preview follow scroll reliably on desktop.
   ========================================================= */

/* Restore menu/header bands to a calmer original-style blue instead of broad premium gradient */
.header-strip {
  background: #061f43 !important;
}

.main-menu-band {
  background: #0b579f !important;
}

.topbar {
  background: #ffffff !important;
}

.header-strip,
.main-menu-band,
.topbar {
  background-image: none !important;
}

.main-nav a.active,
.main-nav a:hover {
  background: rgba(5, 38, 79, .18) !important;
}

.nav-links a.active:not(.btn),
.nav-links a:hover:not(.btn) {
  background: rgba(11, 87, 159, .10) !important;
}

/* Stronger certificate preview follow-scroll behavior */
.admin-cert-template-page.cert-sticky-js-ready .cert-preview-sticky {
  position: relative !important;
  min-height: var(--lml-cert-preview-height, 0px) !important;
  overflow: visible !important;
}

.admin-cert-template-page.cert-sticky-js-ready .cert-preview-card {
  transform: none !important;
  contain: none !important;
  opacity: 1 !important;
}

@media (min-width: 1101px) {
  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-fixed {
    position: fixed !important;
    top: var(--lml-cert-sticky-top, 88px) !important;
    left: var(--lml-cert-sticky-left, 0px) !important;
    width: var(--lml-cert-sticky-width, 500px) !important;
    max-width: var(--lml-cert-sticky-width, 500px) !important;
    z-index: 999 !important;
    margin: 0 !important;
  }

  .admin-cert-template-page.cert-sticky-js-ready .cert-preview-card.is-lml-bottom {
    position: absolute !important;
    top: var(--lml-cert-bottom-top, 0px) !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    z-index: 30 !important;
  }
}


/* =========================================================
   CERTIFICATE PREVIEW TRUE FLOATING PANEL FINAL FIX 2026-06-03
   Scope: admin/certificates.php preview only.
   Purpose: make the certificate preview follow the viewport reliably.
   ========================================================= */

.admin-cert-template-page.cert-floating-js-ready .cert-preview-sticky {
  position: relative !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}

.admin-cert-template-page.cert-floating-js-ready .cert-preview-card {
  opacity: 1 !important;
  transform: none !important;
  contain: none !important;
  filter: none !important;
}

.admin-cert-template-page.cert-floating-js-ready .cert-preview-card.is-lml-floating {
  position: fixed !important;
  top: 88px !important;
  z-index: 10000 !important;
  transform: none !important;
  contain: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 26px 72px rgba(7, 36, 77, .20) !important;
}

@media (max-width: 1100px) {
  .admin-cert-template-page.cert-floating-js-ready .cert-preview-card.is-lml-floating {
    position: static !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important;
  }
}


/* =========================================================
   CERT FULL PREVIEW OVERLAP FIX 2026-06-03
   Scope: hide small floating preview while full-size preview modal is open.
   ========================================================= */

body.cert-full-preview-open .admin-cert-template-page .cert-preview-card,
body.cert-full-preview-open .cert-preview-card.is-lml-floating {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.cert-full-preview-open .cert-full-preview-modal,
body.cert-full-preview-open #certPreviewModal {
  z-index: 20000 !important;
}


/* =========================================================
   CERT PREVIEW COLLAPSE CONTROL 2026-06-03
   Scope: admin/certificates.php preview panel only.
   Adds ย่อพรีวิว / เปิดพรีวิว control to avoid blocking lower form areas.
   ========================================================= */

.admin-cert-template-page .cert-preview-card.is-preview-collapsed {
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

.admin-cert-template-page .cert-preview-card.is-preview-collapsed .cert-live-preview,
.admin-cert-template-page .cert-preview-card.is-preview-collapsed .form-actions,
.admin-cert-template-page .cert-preview-card.is-preview-collapsed .compact-actions {
  display: none !important;
}

.admin-cert-template-page .cert-preview-card.is-preview-collapsed .cert-preview-head {
  margin-bottom: 0 !important;
}

.admin-cert-template-page .cert-preview-card.is-preview-collapsed .cert-preview-head h3::after {
  content: "ย่ออยู่";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11,87,159,.09);
  color: #0b579f;
  font-size: .72rem;
  font-weight: 950;
}

.admin-cert-template-page .cert-preview-card.is-lml-floating.is-preview-collapsed {
  width: min(260px, var(--lml-cert-sticky-width, 260px)) !important;
  max-width: 260px !important;
}

.admin-cert-template-page .cert-preview-card.is-lml-floating.is-preview-collapsed .cert-preview-actions {
  gap: 6px !important;
}

.admin-cert-template-page .cert-preview-card.is-lml-floating.is-preview-collapsed .cert-preview-actions .btn:not([data-toggle-cert-preview]) {
  display: none !important;
}

@media (max-width: 1100px) {
  .admin-cert-template-page .cert-preview-card.is-preview-collapsed .cert-live-preview,
  .admin-cert-template-page .cert-preview-card.is-preview-collapsed .form-actions,
  .admin-cert-template-page .cert-preview-card.is-preview-collapsed .compact-actions {
    display: block !important;
  }

  .admin-cert-template-page .cert-preview-card.is-preview-collapsed .cert-preview-head h3::after {
    display: none !important;
  }
}


/* =========================================================
   CERT PREVIEW FORCE COLLAPSE FIX 2026-06-03
   Scope: make ย่อพรีวิว work even when the preview card is moved to body.
   ========================================================= */

.cert-preview-card.is-preview-collapsed {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.cert-preview-card.is-preview-collapsed .cert-live-preview,
.cert-preview-card.is-preview-collapsed .form-actions,
.cert-preview-card.is-preview-collapsed .compact-actions {
  display: none !important;
}

.cert-preview-card.is-preview-collapsed .cert-preview-actions .btn:not([data-toggle-cert-preview]) {
  display: none !important;
}

.cert-preview-card.is-lml-floating.is-preview-collapsed {
  width: 260px !important;
  max-width: 260px !important;
}

.cert-preview-card.is-preview-collapsed [data-toggle-cert-preview] {
  display: inline-flex !important;
}


/* =========================================================
   COURSE RECOMMENDATION + DISPLAY ORDER 2026-06-03
   Scope: course cards, admin course list, and course form display controls.
   ========================================================= */

.market-course-cover,
.admin-course-thumb,
.course-thumb {
  position: relative !important;
  overflow: hidden !important;
}

.course-recommended-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe89a 0%, #f4c542 52%, #d99b22 100%);
  color: #172033;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(122, 88, 0, .22);
  border: 1px solid rgba(255,255,255,.72);
}

.course-recommended-ribbon::before {
  content: "★";
  font-size: .82rem;
}

.badge-recommended-admin {
  background: #fff7db !important;
  color: #7a5800 !important;
  border: 1px solid rgba(244,197,66,.46) !important;
}

.course-presentation-card {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(244,197,66,.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(244,197,66,.13), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #fffdf5 100%);
  box-shadow: 0 14px 34px rgba(7,36,77,.055);
}

.course-presentation-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.course-presentation-head strong {
  color: var(--lml-ink, #071a38);
  font-weight: 950;
  font-size: 1.05rem;
}

.course-presentation-head small {
  color: #667085;
  font-weight: 700;
  line-height: 1.55;
}

.recommended-course-toggle {
  margin: 0 !important;
  height: 100%;
}

.admin-course-thumb .course-recommended-ribbon {
  top: 9px;
  left: 9px;
  font-size: .68rem;
  padding: 6px 9px;
}

@media (max-width: 640px) {
  .course-recommended-ribbon {
    top: 10px;
    left: 10px;
    font-size: .72rem;
    padding: 6px 10px;
  }
}


/* =========================================================
   RECOMMENDED COURSE TOGGLE CLICK/VISUAL FIX 2026-06-03
   Scope: admin/course-form.php "ปักหมุดเป็นหลักสูตรแนะนำ" card.
   Purpose: make the whole card clickable and show checked state clearly.
   ========================================================= */

.recommended-course-toggle {
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

.recommended-course-toggle input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: .001 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

.recommended-course-toggle .check-card-mark,
.recommended-course-toggle > span:not(.check-card-mark) {
  position: relative !important;
  z-index: 1 !important;
}

.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark {
  background: linear-gradient(135deg, #f4c542, #d99b22) !important;
  color: #0b1f3d !important;
  border-color: rgba(244,197,66,.64) !important;
  box-shadow: 0 10px 24px rgba(122,88,0,.20) !important;
}

.recommended-course-toggle:has(input[type="checkbox"]:checked) {
  background:
    radial-gradient(circle at 92% 8%, rgba(244,197,66,.20), transparent 32%),
    linear-gradient(135deg, #fffdf3, #ffffff 72%) !important;
  border-color: rgba(244,197,66,.62) !important;
  box-shadow: 0 16px 38px rgba(122,88,0,.11) !important;
}

.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark::before {
  content: "★";
  color: #0b1f3d !important;
  font-size: 1.05rem;
  line-height: 1;
}

.recommended-course-toggle:hover {
  border-color: rgba(244,197,66,.58) !important;
  box-shadow: 0 14px 34px rgba(7,36,77,.08) !important;
}

.recommended-course-toggle input[type="checkbox"]:focus-visible + .check-card-mark {
  outline: 3px solid rgba(244,197,66,.60) !important;
  outline-offset: 3px !important;
}


/* =========================================================
   RECOMMENDED COURSE PREMIUM TONE REFINEMENT 2026-06-03
   Scope: soften "หลักสูตรแนะนำ" from strong yellow/black to premium ivory-gold/navy.
   ========================================================= */

.course-recommended-ribbon {
  background:
    linear-gradient(135deg, rgba(255, 252, 240, .98) 0%, rgba(255, 245, 212, .98) 52%, rgba(245, 224, 166, .96) 100%) !important;
  color: #0b2f5b !important;
  border: 1px solid rgba(212, 167, 44, .42) !important;
  box-shadow: 0 12px 28px rgba(7, 36, 77, .12) !important;
}

.course-recommended-ribbon::before {
  color: #c8911f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}

.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark {
  background:
    linear-gradient(135deg, #fff8df 0%, #f4dd95 100%) !important;
  color: #0b2f5b !important;
  border-color: rgba(212, 167, 44, .48) !important;
  box-shadow: 0 10px 24px rgba(7,36,77,.11) !important;
}

.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark::before {
  color: #0b2f5b !important;
}

.recommended-course-toggle:has(input[type="checkbox"]:checked) {
  background:
    radial-gradient(circle at 92% 8%, rgba(244,197,66,.13), transparent 32%),
    linear-gradient(135deg, #fffdf6 0%, #ffffff 72%) !important;
  border-color: rgba(212, 167, 44, .42) !important;
  box-shadow: 0 16px 38px rgba(7,36,77,.08) !important;
}

.badge-recommended-admin {
  background: #fff8e5 !important;
  color: #0b2f5b !important;
  border: 1px solid rgba(212, 167, 44, .38) !important;
}


/* =========================================================
   RECOMMENDED COURSE WHITE-GOLD FINAL TONE 2026-06-03
   Scope: final visual tone for "หลักสูตรแนะนำ".
   Style: white/ivory background, soft gold border, navy text, golden star.
   ========================================================= */

.course-recommended-ribbon {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,252,243,.98) 100%) !important;
  color: #0a2d5c !important;
  border: 1px solid rgba(214, 168, 48, .58) !important;
  box-shadow:
    0 10px 26px rgba(7, 36, 77, .12),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.course-recommended-ribbon::before {
  color: #f2bd28 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85) !important;
}

.badge-recommended-admin {
  background: #ffffff !important;
  color: #0a2d5c !important;
  border: 1px solid rgba(214, 168, 48, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Admin selected state follows the same white-gold premium language */
.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark {
  background:
    linear-gradient(180deg, #ffffff 0%, #fff8df 100%) !important;
  color: #0a2d5c !important;
  border-color: rgba(214, 168, 48, .60) !important;
  box-shadow: 0 10px 24px rgba(7,36,77,.10) !important;
}

.recommended-course-toggle input[type="checkbox"]:checked + .check-card-mark::before {
  color: #f2bd28 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85) !important;
}

.recommended-course-toggle:has(input[type="checkbox"]:checked) {
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
  border-color: rgba(214, 168, 48, .54) !important;
  box-shadow: 0 16px 38px rgba(7,36,77,.08) !important;
}


/* =========================================================
   HOME HERO TITLE TYPOGRAPHY POLISH 2026-06-03
   Scope: homepage hero title only.
   Purpose: make "เรียนรู้ออนไลน์ / ที่ง่ายและใช้ได้จริง" more open, balanced, and premium.
   ========================================================= */

.home-hero-premium .home-hero-content h1 {
  letter-spacing: -0.018em !important;
  line-height: 1.13 !important;
  font-weight: 850 !important;
  text-wrap: balance !important;
}

.home-hero-premium .home-hero-content h1 strong {
  letter-spacing: -0.012em !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
}

.home-hero-premium .home-hero-content h1 br {
  display: block !important;
  content: "" !important;
  margin-bottom: .04em !important;
}

@media (max-width: 768px) {
  .home-hero-premium .home-hero-content h1 {
    letter-spacing: -0.012em !important;
    line-height: 1.16 !important;
  }

  .home-hero-premium .home-hero-content h1 strong {
    letter-spacing: -0.008em !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 480px) {
  .home-hero-premium .home-hero-content h1 {
    letter-spacing: -0.006em !important;
    line-height: 1.18 !important;
  }
}


/* =========================================================
   HOME HERO TITLE LINE-HEIGHT REFINE 2026-06-03
   Scope: homepage hero headline only.
   Purpose: add a little more breathing room between:
   "เรียนรู้ออนไลน์" and "ที่ง่ายและใช้ได้จริง".
   ========================================================= */

.home-hero-premium .home-hero-content h1 {
  letter-spacing: -0.016em !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
}

.home-hero-premium .home-hero-content h1 strong {
  letter-spacing: -0.010em !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}

.home-hero-premium .home-hero-content h1 br {
  display: block !important;
  content: "" !important;
  margin-bottom: .075em !important;
}

@media (max-width: 768px) {
  .home-hero-premium .home-hero-content h1 {
    letter-spacing: -0.010em !important;
    line-height: 1.20 !important;
  }

  .home-hero-premium .home-hero-content h1 strong {
    letter-spacing: -0.006em !important;
    line-height: 1.14 !important;
  }
}

@media (max-width: 480px) {
  .home-hero-premium .home-hero-content h1 {
    letter-spacing: -0.004em !important;
    line-height: 1.22 !important;
  }
}

/* =========================================================
   LML Header + Mobile Lesson + Statistic Cards Polish 2026-06-06
   Scope: header text/color/mobile logo, mobile lesson visibility,
          lesson render performance, and statistic card alignment.
   ========================================================= */

/* Header strip: brand name gold, Thai tagline separated and readable */
.header-strip-inner .header-brand-name,
.header-strip-inner .header-brand-name strong {
  color: var(--lml-gold-500, #f4c542) !important;
  font-weight: 950 !important;
}

.header-strip-inner .header-brand-tagline {
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 800 !important;
}

.header-strip-inner .header-brand-meta {
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 750 !important;
}

/* Statistic cards: center numeric summaries consistently */
.home-hero-kpis > div,
.home-outcome-card,
.market-hero-stats > div,
.learner-summary-card,
.profile-stat-card {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-hero-kpis > div strong,
.home-hero-kpis > div span,
.home-outcome-card strong,
.home-outcome-card small,
.market-hero-stats > div strong,
.market-hero-stats > div span,
.learner-summary-card strong,
.learner-summary-card span,
.profile-stat-card strong,
.profile-stat-card span {
  width: 100% !important;
  text-align: center !important;
}

.learner-summary-card,
.profile-stat-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Lesson page: reduce reveal/performance effects so learning content appears immediately */
.lesson-page .lml-reveal,
.lesson-page .lesson-resource-item,
.lesson-page .lesson-list-card,
.lesson-page .panel,
.lesson-page .card {
  opacity: 1 !important;
  transform: none !important;
  transition-duration: .08s !important;
}

.lesson-page .lesson-resource-item,
.lesson-page .lesson-list-card {
  backdrop-filter: none !important;
}

/* Mobile header and logo alignment */
@media (max-width: 720px) {
  .header-strip {
    min-height: auto !important;
    padding: 8px 0 9px !important;
  }

  .header-strip-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  .header-strip-inner span {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .header-brand-name {
    color: var(--lml-gold-500, #f4c542) !important;
    font-size: .90rem !important;
    line-height: 1.25 !important;
  }

  .header-brand-tagline {
    font-size: .82rem !important;
    line-height: 1.3 !important;
  }

  .header-brand-meta {
    font-size: .76rem !important;
    line-height: 1.25 !important;
  }

  .brand-band-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }

  .brand {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  .brand-logo-img {
    width: min(245px, 82vw) !important;
    height: 62px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  .brand-logo-img img {
    margin-inline: auto !important;
    object-position: center center !important;
  }

  .header-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Mobile lesson: do not hide the whole side panel; hide only lesson TOC/nav cards */
@media (max-width: 760px) {
  .lesson-page .lesson-side-panel {
    display: block !important;
    width: 100% !important;
  }

  .lesson-page .lesson-nav-card,
  .lesson-page .lesson-nav-card-pro {
    display: none !important;
  }

  .lesson-page .lesson-layout,
  .lesson-page .lesson-layout-pro {
    grid-template-columns: 1fr !important;
  }

  .home-hero-kpis > div,
  .home-outcome-card,
  .market-hero-stats > div,
  .learner-summary-card,
  .profile-stat-card {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =========================================================
   LML Lesson Order Badge Mobile Fix 2026-06-06
   Scope: course-detail lesson list only.
   Purpose: prevent lesson number badges from collapsing into a thin vertical pill on mobile.
   ========================================================= */
.lesson-list-card .lesson-order-badge {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  align-self: start !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .lesson-list-card .lesson-order-badge {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    margin: 0 0 2px 0 !important;
  }
}

/* =========================================================
   LML Footer Master Layout 2026-06-06
   Purpose: keep the public footer in the Lertchai Master
            left-right layout and preserve the platform version.
   ========================================================= */
.site-footer.footer-main {
  text-align: initial !important;
  overflow-x: clip !important;
}

.site-footer.footer-main .footer-main-inner,
.site-footer.footer-main > .container {
  width: min(var(--container, 1180px), calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  text-align: initial !important;
}

.site-footer.footer-main .footer-top {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 18px !important;
  padding: 0 0 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 28px !important;
  text-align: initial !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

.site-footer.footer-main .footer-brand-block {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  justify-self: start !important;
}

.site-footer.footer-main .footer-developer {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  justify-self: end !important;
}

.site-footer.footer-main .footer-brand-name,
.site-footer.footer-main .footer-brand-desc {
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main .footer-developer span,
.site-footer.footer-main .footer-developer strong {
  text-align: right !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main .footer-social {
  width: 100% !important;
  margin: 2px auto 18px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.site-footer.footer-main .footer-social-item {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main .footer-social-label,
.site-footer.footer-main .footer-social-item span:last-child {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
}

.site-footer.footer-main .footer-line {
  width: 100% !important;
  margin: 0 auto 18px !important;
}

.site-footer.footer-main .footer-copy {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 8px !important;
  color: rgba(150, 172, 210, .88) !important;
  font-size: clamp(11.8px, 3.45vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main .footer-copy-main,
.site-footer.footer-main .footer-copy-separator,
.site-footer.footer-main .footer-copy-version {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.site-footer.footer-main .footer-copy-version {
  letter-spacing: -.015em !important;
}

@media (max-width: 420px) {
  .site-footer.footer-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer.footer-main .footer-main-inner,
  .site-footer.footer-main > .container {
    width: calc(100% - 24px) !important;
  }

  .site-footer.footer-main .footer-top {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .site-footer.footer-main .footer-brand-block,
  .site-footer.footer-main .footer-developer,
  .site-footer.footer-main .footer-brand-name,
  .site-footer.footer-main .footer-brand-desc,
  .site-footer.footer-main .footer-developer span,
  .site-footer.footer-main .footer-developer strong {
    width: 100% !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .site-footer.footer-main .footer-copy {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    font-size: clamp(11px, 3.15vw, 13px) !important;
  }

  .site-footer.footer-main .footer-copy-separator {
    display: none !important;
  }

  .site-footer.footer-main .footer-copy-version {
    font-size: clamp(10.8px, 3.05vw, 12.6px) !important;
    letter-spacing: -.03em !important;
  }
}

@media (max-width: 340px) {
  .site-footer.footer-main .footer-copy {
    font-size: 10.6px !important;
  }

  .site-footer.footer-main .footer-copy-version {
    font-size: 10.2px !important;
    letter-spacing: -.045em !important;
  }
}


/* =========================================================
   LML Footer Final Layout Fix 2026-06-06
   Scope: public footer only.
   Fixes:
   1) Restore desktop footer top to left-right layout.
   2) Keep both grey divider lines exactly the same width.
   3) Keep system version text, with safe mobile wrapping.
   ========================================================= */
.site-footer.footer-main.lml-footer-master-layout {
  text-align: initial !important;
  overflow-x: clip !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-main-inner,
.site-footer.footer-main.lml-footer-master-layout > .container {
  width: min(var(--container, 1180px), calc(100% - 48px)) !important;
  max-width: var(--container, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  text-align: initial !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-top {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 18px !important;
  padding: 0 0 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
  align-items: center !important;
  justify-content: space-between !important;
  justify-items: stretch !important;
  gap: 28px !important;
  text-align: initial !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-brand-block {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  justify-self: start !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-developer {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  justify-self: end !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-brand-name,
.site-footer.footer-main.lml-footer-master-layout .footer-brand-desc {
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-developer span,
.site-footer.footer-main.lml-footer-master-layout .footer-developer strong {
  display: block !important;
  text-align: right !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-social {
  width: 100% !important;
  margin: 2px auto 18px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-social-item {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-social-label,
.site-footer.footer-main.lml-footer-master-layout .footer-social-item span:last-child {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-line {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 1px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 0 !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-copy {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 8px !important;
  color: rgba(150, 172, 210, .88) !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-copy-main,
.site-footer.footer-main.lml-footer-master-layout .footer-copy-separator,
.site-footer.footer-main.lml-footer-master-layout .footer-copy-version {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.site-footer.footer-main.lml-footer-master-layout .footer-copy-version {
  letter-spacing: -.012em !important;
}

@media (max-width: 720px) {
  .site-footer.footer-main.lml-footer-master-layout {
    padding-bottom: 82px !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-main-inner,
  .site-footer.footer-main.lml-footer-master-layout > .container {
    width: calc(100% - 24px) !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-top {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-brand-block,
  .site-footer.footer-main.lml-footer-master-layout .footer-developer,
  .site-footer.footer-main.lml-footer-master-layout .footer-brand-name,
  .site-footer.footer-main.lml-footer-master-layout .footer-brand-desc,
  .site-footer.footer-main.lml-footer-master-layout .footer-developer span,
  .site-footer.footer-main.lml-footer-master-layout .footer-developer strong {
    width: 100% !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-copy {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    font-size: clamp(11.2px, 3.35vw, 13px) !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-copy-separator {
    display: none !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-copy-version {
    font-size: clamp(10.6px, 3.1vw, 12.6px) !important;
    letter-spacing: -.03em !important;
  }
}

@media (max-width: 340px) {
  .site-footer.footer-main.lml-footer-master-layout .footer-copy {
    font-size: 10.6px !important;
  }

  .site-footer.footer-main.lml-footer-master-layout .footer-copy-version {
    font-size: 10.1px !important;
    letter-spacing: -.045em !important;
  }
}