/*
Theme Name: Noonny Course
Theme URI: https://course.noonnyenglish.com/
Author: NoonnyEnglish Project
Description: Custom WordPress theme for NoonnyEnglish course website, designed to work alongside Tutor LMS.
Version: 1.0.190
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: noonny-course
*/

:root{
  --nn-purple:#5525b8;
  --nn-purple-dark:#34106f;
  --nn-purple-soft:#f2ecff;
  --nn-yellow:#ffb300;
  --nn-orange:#ff8a00;
  --nn-pink:#ff6f9f;
  --nn-text:#261f35;
  --nn-muted:#756d82;
  --nn-bg:#fffdfb;
  --nn-card:#ffffff;
  --nn-border:#ece7f2;
  --nn-shadow:0 14px 40px rgba(58,29,107,.10);
  --nn-radius:24px;
  --nn-max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nn-bg);color:var(--nn-text);font-family:"Tahoma","Noto Sans Thai","Segoe UI",sans-serif;line-height:1.7}

/* Display headings only: keep body/menu/small text in the original easy-to-read font. */
.nn-hero h1,
.nn-section-title,
.nn-course-body h3,
.nn-about-copy h2,
.nn-review-quote,
.nn-cta-box h2{font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;font-weight:600;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.nn-container{width:min(var(--nn-max),calc(100% - 40px));margin:auto}
.nn-section{padding:72px 0}
.nn-section-title{text-align:center;font-size:clamp(28px,4vw,42px);line-height:1.25;margin:0 0 14px;color:var(--nn-purple-dark)}
.nn-section-lead{text-align:center;max-width:760px;margin:0 auto 38px;color:var(--nn-muted)}
.nn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;transition:.2s ease;border:2px solid transparent;cursor:pointer}
.nn-btn:hover{transform:translateY(-2px)}
.nn-btn-primary{background:linear-gradient(135deg,var(--nn-purple),#7138d4);color:#fff;box-shadow:0 10px 24px rgba(85,37,184,.24)}
.nn-btn-yellow{background:linear-gradient(135deg,var(--nn-yellow),#ffc94d);color:#422900;box-shadow:0 10px 24px rgba(255,179,0,.22)}
.nn-btn-outline{border-color:#8a63d8;color:var(--nn-purple);background:#fff}

/* Header */
.nn-site-header{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(90,52,145,.08)}
.admin-bar .nn-site-header{top:32px}
.nn-header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.nn-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.nn-brand-mark{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.nn-brand-mark img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.nn-brand-text{display:flex;flex-direction:column;line-height:1}
.nn-brand-text strong{font-size:25px;color:var(--nn-purple);letter-spacing:.2px}
.nn-brand-text span{font-size:13px;color:var(--nn-orange);font-weight:800;letter-spacing:1.2px;margin-top:3px}
.nn-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nn-nav a{font-size:15px;font-weight:600;color:#453a50}
.nn-nav a:hover{color:var(--nn-purple)}
.nn-header-actions{display:flex;gap:10px;align-items:center}

/* v1.0.147 — Logged-in user name / profile menu on the public header. */
.nn-user-menu{position:relative}
.nn-user-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:13px;background:linear-gradient(135deg,var(--nn-purple),#7138d4);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(85,37,184,.20);white-space:nowrap;user-select:none}
.nn-user-menu>summary::-webkit-details-marker{display:none}
.nn-user-menu>summary::after{content:"▾";font-size:12px;line-height:1;transition:transform .18s ease}
.nn-user-menu[open]>summary::after{transform:rotate(180deg)}
.nn-user-menu__panel{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;padding:8px;background:#fff;border:1px solid var(--nn-border);border-radius:14px;box-shadow:var(--nn-shadow);z-index:1200}
.nn-user-menu__panel a{display:block;padding:10px 12px;border-radius:10px;color:#453a50;font-size:14px;font-weight:700}
.nn-user-menu__panel a:hover{background:#f5efff;color:var(--nn-purple)}
.nn-user-menu__panel .nn-user-menu__logout{border-top:1px solid #eee7f4;margin-top:5px;padding-top:11px}
.nn-mobile-toggle{display:none;background:none;border:0;font-size:26px;color:var(--nn-purple)}

/* Hero */
.nn-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#fffaf1 0%,#fff 46%,#f5edff 100%)}
.nn-hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-140px;background:rgba(255,179,0,.12)}
.nn-hero::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;left:-170px;bottom:-180px;background:rgba(255,111,159,.10)}
.nn-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:56px;padding:58px 0 62px}
.nn-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #f0e5d2;border-radius:999px;padding:7px 12px;color:#5e4b34;font-size:14px;font-weight:700;margin-bottom:16px}
.nn-hero h1{font-size:clamp(46px,6vw,76px);line-height:1.07;margin:0 0 18px;letter-spacing:-1px;color:var(--nn-purple-dark)}
.nn-hero h1 .accent{display:block;color:var(--nn-orange)}
.nn-hero-copy>p{font-size:18px;color:#5f5768;max-width:620px;margin:0 0 24px}
.nn-hero-points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:9px}
.nn-hero-points li{position:relative;padding-left:29px;font-weight:600;color:#463d50}
.nn-hero-points li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--nn-purple);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.nn-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.nn-hero-visual{position:relative}
.nn-hero-photo-wrap{border-radius:34px;overflow:hidden;background:#f5e4b8;box-shadow:0 26px 60px rgba(70,39,104,.18);aspect-ratio:4/3}
.nn-hero-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:65% center}
.nn-hero-card{position:absolute;left:-28px;bottom:24px;background:#fff;border-radius:18px;padding:17px 20px;box-shadow:var(--nn-shadow);max-width:270px;border:1px solid #f0e8f7}
.nn-hero-card strong{display:block;color:var(--nn-purple);font-size:20px;margin-bottom:3px}
.nn-hero-card span{font-size:14px;color:var(--nn-muted)}

/* trust strip */
.nn-trust{background:linear-gradient(100deg,#3c147c,var(--nn-purple),#36116f);color:#fff}
.nn-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0}
.nn-trust-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 20px;text-align:left;border-right:1px solid rgba(255,255,255,.18)}
.nn-trust-item:last-child{border-right:0}
.nn-trust-icon{font-size:28px}
.nn-trust-item strong{display:block;font-size:18px;color:#fff}
.nn-trust-item span{font-size:12px;color:#e8dfff}

/* Course */
.nn-courses{background:#fff}
.nn-course-card{display:grid;grid-template-columns:410px 1fr;gap:0;overflow:hidden;border-radius:var(--nn-radius);background:#fff;border:1px solid var(--nn-border);box-shadow:var(--nn-shadow);max-width:1050px;margin:auto}
.nn-course-image{background:linear-gradient(135deg,#f6edff,#fff1f4);min-height:340px}
.nn-course-image img{width:100%;height:100%;object-fit:cover}
.nn-course-placeholder{height:100%;min-height:340px;display:grid;place-items:center;text-align:center;padding:30px;color:var(--nn-purple);font-weight:800;font-size:30px;background:linear-gradient(145deg,#efe6ff,#ffddec)}
.nn-course-body{padding:36px 38px;display:flex;flex-direction:column;justify-content:center}
.nn-badge{display:inline-block;width:max-content;border-radius:999px;background:#fff0f4;color:#df4d7b;padding:5px 11px;font-size:12px;font-weight:800;margin-bottom:10px}
.nn-course-body h3{font-size:30px;line-height:1.3;margin:0 0 12px;color:var(--nn-purple-dark)}
.nn-course-body p{color:var(--nn-muted);margin:0 0 18px}
.nn-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.nn-tag{background:#f8f5fb;border:1px solid #eee7f4;border-radius:999px;padding:5px 10px;font-size:12px;color:#62596d}
.nn-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.nn-price .sale{font-size:34px;color:#ef4f7d;font-weight:900}
.nn-price .sale small{font-size:15px;color:var(--nn-text)}
.nn-price .regular{text-decoration:line-through;color:#999;font-size:15px}
.nn-price .save{background:#fff1c9;color:#9b6500;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}
.nn-course-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Benefits */
.nn-benefits{background:linear-gradient(180deg,#fff,#fbf8ff)}
.nn-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nn-benefit{background:#fff;border:1px solid var(--nn-border);border-radius:19px;padding:24px 18px;text-align:center;box-shadow:0 8px 26px rgba(54,26,101,.06)}
.nn-benefit-icon{width:50px;height:50px;margin:0 auto 12px;border-radius:15px;background:var(--nn-purple-soft);display:grid;place-items:center;font-size:25px}
.nn-benefit h3{font-size:17px;margin:0 0 6px;color:var(--nn-purple-dark)}
.nn-benefit p{font-size:13px;margin:0;color:var(--nn-muted)}

/* About */
.nn-about{background:#fff}
.nn-about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center}
.nn-about-photo{border-radius:28px;overflow:hidden;box-shadow:var(--nn-shadow)}
.nn-about-copy .nn-kicker{color:var(--nn-orange);font-weight:800;margin-bottom:5px}
.nn-about-copy h2{font-size:38px;line-height:1.25;margin:0 0 16px;color:var(--nn-purple-dark)}
.nn-about-copy p{color:var(--nn-muted)}
.nn-about-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.nn-about-highlight{border:1px solid var(--nn-border);border-radius:15px;padding:14px;background:#fffdf8}
.nn-about-highlight strong{display:block;color:var(--nn-purple);margin-bottom:2px}
.nn-about-highlight span{font-size:13px;color:var(--nn-muted)}

/* Review */
.nn-review-wrap{max-width:880px;margin:auto;background:linear-gradient(135deg,#fff9e9,#fff,#f7f0ff);border:1px solid #efe5d4;border-radius:24px;padding:38px;text-align:center;box-shadow:var(--nn-shadow)}
.nn-review-stars{color:#ffb000;font-size:24px;letter-spacing:3px}
.nn-review-quote{font-size:25px;line-height:1.55;margin:14px auto 12px;color:#3e3150;max-width:700px}
.nn-review-note{font-size:13px;color:var(--nn-muted)}

/* FAQ */
.nn-faq{background:#fff}
.nn-faq-list{max-width:900px;margin:auto;display:grid;gap:10px}
.nn-faq details{border:1px solid var(--nn-border);border-radius:14px;background:#fff;padding:0 18px}
.nn-faq summary{list-style:none;cursor:pointer;font-weight:700;padding:17px 0;color:#42374e}
.nn-faq summary::-webkit-details-marker{display:none}
.nn-faq details p{margin:0;padding:0 0 17px;color:var(--nn-muted)}

/* CTA */
.nn-cta{padding:28px 0 70px}
.nn-cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(110deg,#4b1994,#6d32cf);border-radius:24px;padding:28px 38px;color:#fff;box-shadow:0 20px 45px rgba(76,28,146,.18)}
.nn-cta-box h2{font-size:25px;margin:0 0 4px;color:#fff}
.nn-cta-box p{margin:0;color:#e9ddff}
.nn-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.nn-site-footer{background:#28104f;color:#ded2ed;padding:46px 0 22px}
.nn-footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr 1.2fr;gap:36px}
.nn-footer-brand .nn-brand-text strong{color:#fff}
.nn-footer-brand p{font-size:14px;max-width:310px;color:#cfc0e3}
.nn-site-footer h4{color:#fff;margin:0 0 12px}
.nn-site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:14px}
.nn-site-footer a:hover{color:#ffd15c}
.nn-footer-bottom{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.11);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#a994c3}

/* WP content / Tutor pages */
.nn-content{width:min(1200px,calc(100% - 36px));margin:42px auto 70px}
.nn-content .entry-title{color:var(--nn-purple-dark)}
body.page-template-default .nn-content, body.single .nn-content{min-height:55vh}
body.tutor-screen-frontend-dashboard .nn-content{width:100%;max-width:none;margin:0;padding:0}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a{color:var(--nn-purple)!important}

@media(max-width:980px){
  .nn-nav{display:none;position:absolute;left:20px;right:20px;top:72px;background:#fff;border:1px solid var(--nn-border);box-shadow:var(--nn-shadow);border-radius:16px;padding:16px;flex-direction:column;align-items:flex-start}
  .nn-nav.is-open{display:flex}
  .nn-mobile-toggle{display:block}
  .nn-header-actions .nn-btn-outline{display:none}
  .nn-hero-grid{grid-template-columns:1fr;gap:32px}
  .nn-hero-copy{text-align:center}
  .nn-hero-copy>p{margin-left:auto;margin-right:auto}
  .nn-hero-points{max-width:620px;margin-left:auto;margin-right:auto;text-align:left}
  .nn-hero-actions{justify-content:center}
  .nn-hero-visual{max-width:650px;margin:auto}
  .nn-course-card{grid-template-columns:1fr}
  .nn-course-image{max-height:430px}
  .nn-benefit-grid{grid-template-columns:repeat(2,1fr)}
  .nn-about-grid{grid-template-columns:1fr}
  .nn-about-photo{max-width:620px;margin:auto}
  .nn-trust-grid{grid-template-columns:repeat(2,1fr)}
  .nn-trust-item:nth-child(2){border-right:0}
  .nn-trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:16px;margin-bottom:16px}
  .nn-footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  .admin-bar .nn-site-header{top:46px}
  .nn-container{width:min(100% - 28px,var(--nn-max))}
  .nn-section{padding:52px 0}
  .nn-header-inner{min-height:66px}
  .nn-brand-text strong{font-size:21px}
  .nn-brand-mark{width:38px;height:38px}
  .nn-header-actions .nn-btn{padding:10px 12px;font-size:13px}
  .nn-user-menu>summary{min-height:42px;padding:9px 11px;font-size:13px;max-width:138px}
  .nn-user-menu>summary .nn-user-menu__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:102px}
  .nn-user-menu__panel{min-width:190px}
  .nn-hero-grid{padding:42px 0 50px}
  .nn-hero h1{font-size:45px}
  .nn-hero-copy>p{font-size:16px}
  .nn-hero-card{position:relative;left:auto;bottom:auto;margin:-25px 14px 0}
  .nn-trust-grid{grid-template-columns:1fr 1fr}
  .nn-trust-item{padding:5px 8px;gap:8px}
  .nn-trust-icon{font-size:22px}
  .nn-trust-item strong{font-size:15px}
  .nn-course-body{padding:25px 20px}
  .nn-course-body h3{font-size:24px}
  .nn-benefit-grid{grid-template-columns:1fr 1fr;gap:10px}
  .nn-benefit{padding:18px 10px}
  .nn-about-highlights{grid-template-columns:1fr}
  .nn-review-wrap{padding:27px 20px}
  .nn-review-quote{font-size:20px}
  .nn-cta-box{padding:26px 22px;flex-direction:column;text-align:center}
  .nn-cta-actions{justify-content:center}
  .nn-footer-grid{grid-template-columns:1fr}
  .nn-footer-bottom{flex-direction:column}
}


/* =========================================================
   NoonnyEnglish Student Dashboard — v1.0.2
   Cosmetic layer only. Tutor LMS data, progress and actions
   remain native so plugin updates are safer.
   ========================================================= */
body.nn-student-dashboard{
  background:#fbf9ff!important;
  --tutor-color-primary:var(--nn-purple);
}
body.nn-student-dashboard .tutor-dashboard-layout{
  background:linear-gradient(180deg,#fff 0%,#fbf9ff 100%)!important;
  min-height:calc(100vh - 74px);
}

/* Noonny brand bar added above Tutor dashboard */
.nn-dashboard-brandbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 max(28px,calc((100vw - 1180px)/2));
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #ece7f2;
  box-shadow:0 5px 22px rgba(52,16,111,.05);
  position:sticky;
  top:0;
  z-index:1001;
}
.nn-dashboard-brandbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.nn-dashboard-brandbar__mark{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;overflow:hidden}
.nn-dashboard-brandbar__mark img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.nn-dashboard-brandbar__name{display:flex;flex-direction:column;line-height:1}
.nn-dashboard-brandbar__name strong{font-size:22px;color:var(--nn-purple);font-weight:800}
.nn-dashboard-brandbar__name span{font-size:11px;color:var(--nn-orange);font-weight:800;letter-spacing:1.2px;margin-top:3px}
.nn-dashboard-brandbar__actions{display:flex;align-items:center;gap:10px}
.nn-dashboard-user-menu>summary{min-height:40px;padding:8px 14px;font-size:14px;border-radius:11px}
.nn-dashboard-user-menu .nn-user-menu__panel{top:calc(100% + 8px)}
.nn-dashboard-brandbar__link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 15px;border-radius:11px;font-weight:700;font-size:14px;color:var(--nn-purple);border:1px solid #e1d6f4;background:#fff}
.nn-dashboard-brandbar__link:hover{background:#f6f0ff}
.nn-dashboard-brandbar__link--primary{background:linear-gradient(135deg,var(--nn-purple),#7138d4);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(85,37,184,.18)}
.nn-dashboard-brandbar__link--primary:hover{color:#fff;background:linear-gradient(135deg,#4a1fa1,#6530c5)}

/* Desktop dashboard shell */
@media(min-width:769px){
  body.nn-student-dashboard .tutor-dashboard-layout{
    max-width:1320px;
    margin:0 auto!important;
    border-left:1px solid #f0ecf5;
    border-right:1px solid #f0ecf5;
  }
  body.nn-student-dashboard .tutor-dashboard-layout > :first-child{
    background:#fff!important;
    border-color:#eee8f4!important;
  }
}

/* Replace the generic WordPress-looking dashboard branding */
body.nn-student-dashboard .nn-tutor-sidebar-brand{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple)!important;
  font-weight:600!important;
  font-size:20px!important;
}

/* Dashboard content spacing and typography */
body.nn-student-dashboard .tutor-dashboard-layout h1,
body.nn-student-dashboard .tutor-dashboard-layout h2,
body.nn-student-dashboard .tutor-dashboard-layout h3,
body.nn-student-dashboard .tutor-dashboard-layout h4{
  color:var(--nn-purple-dark);
}
body.nn-student-dashboard .nn-dashboard-greeting{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  font-weight:600!important;
  color:var(--nn-purple-dark)!important;
}

/* Tutor surfaces: make them feel like Noonny cards */
body.nn-student-dashboard .tutor-surface-l1,
body.nn-student-dashboard [class*="tutor-card"],
body.nn-student-dashboard [class*="dashboard-card"]{
  border-color:#e9e1f2!important;
}
body.nn-student-dashboard .tutor-dashboard-layout .tutor-border{
  border-color:#e9e1f2!important;
}
body.nn-student-dashboard .tutor-dashboard-layout [class*="rounded"]{
  border-radius:16px;
}

/* Primary action buttons */
body.nn-student-dashboard .tutor-btn-primary,
body.nn-student-dashboard a.tutor-btn-primary,
body.nn-student-dashboard button.tutor-btn-primary{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(85,37,184,.18)!important;
}
body.nn-student-dashboard .tutor-btn-primary:hover,
body.nn-student-dashboard a.tutor-btn-primary:hover,
body.nn-student-dashboard button.tutor-btn-primary:hover{
  background:linear-gradient(135deg,#491e9d,#6330bf)!important;
}

/* Accent active menu and progress */
body.nn-student-dashboard .tutor-dashboard-menu-item.active a,
body.nn-student-dashboard .tutor-dashboard-menu-item a:hover{
  color:var(--nn-purple)!important;
}
body.nn-student-dashboard .tutor-dashboard-menu-item.active a{
  background:#f1ebff!important;
  border-radius:12px!important;
}
body.nn-student-dashboard [class*="progress"] > [style*="width"],
body.nn-student-dashboard .tutor-progress-value{
  background:linear-gradient(90deg,var(--nn-purple),#8b54e8)!important;
}

/* Continue-learning course card: elevate it above generic stats */
body.nn-student-dashboard .nn-course-emphasis{
  border:1px solid #e5daf4!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(52,16,111,.09)!important;
  overflow:hidden!important;
  background:#fff!important;
}
body.nn-student-dashboard .nn-course-emphasis img{
  border-radius:14px!important;
}

/* Mobile: preserve Tutor's excellent bottom navigation, only rebrand it */
@media(max-width:768px){
  .nn-dashboard-brandbar{
    height:58px;
    padding:0 13px;
    gap:10px;
  }
  .nn-dashboard-brandbar__mark{width:34px;height:34px;font-size:19px}
  .nn-dashboard-brandbar__name strong{font-size:18px}
  .nn-dashboard-brandbar__name span{font-size:9px}
  .nn-dashboard-brandbar__actions{gap:6px}
  .nn-dashboard-user-menu>summary{min-height:34px;padding:6px 9px;font-size:12px;max-width:118px}
  .nn-dashboard-user-menu>summary .nn-user-menu__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:82px}
  .nn-dashboard-brandbar__link{min-height:34px;padding:6px 10px;font-size:12px}
  .nn-dashboard-brandbar__link--home-label{display:none}
  body.nn-student-dashboard .tutor-dashboard-layout{
    min-height:calc(100vh - 58px);
  }
  body.nn-student-dashboard .tutor-dashboard-layout [class*="bottom"]{
    border-top-color:#e8ddf3!important;
  }
  body.nn-student-dashboard .tutor-dashboard-layout [class*="bottom"] a,
  body.nn-student-dashboard .tutor-dashboard-layout [class*="bottom"] button{
    color:#4d4259;
  }
  body.nn-student-dashboard .tutor-dashboard-layout [class*="bottom"] .active,
  body.nn-student-dashboard .tutor-dashboard-layout [class*="bottom"] [aria-current="page"]{
    color:var(--nn-purple)!important;
  }
  body.nn-student-dashboard .nn-dashboard-greeting{font-size:16px!important}
  body.nn-student-dashboard .nn-course-emphasis{border-radius:16px!important}
}


/* =========================================================
   v1.0.3 — Login / registration polish + CookieAdmin cleanup
   ========================================================= */

/* v1.0.5: CookieAdmin's re-consent launcher is an image labelled "Re-consent".
   Hide only that small launcher image immediately; JS hides its clickable fixed wrapper.
   Do NOT hide CookieAdmin's consent banner or preference modal. */
img[alt="Re-consent"],
img[alt*="Re-consent" i],
img[src*="reconsent" i]{
  visibility:hidden!important;
}
.nn-cookieadmin-reconsent-hidden{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Front-end Softaculous/SoftWP assistant launcher is useful only to admins and can
   overlap CookieAdmin. The JS hides only its tiny fixed launcher on the public site. */

/* Unauthenticated Tutor dashboard login: keep it inside the Noonny brand. */
body.nn-student-login{
  background:linear-gradient(145deg,#fff9ef,#f5efff)!important;
}
body.nn-student-login .nn-content{
  min-height:calc(100vh - 74px);
  padding:68px 20px 84px;
  background:
    radial-gradient(circle at 15% 15%,rgba(255,179,0,.10),transparent 30%),
    radial-gradient(circle at 85% 85%,rgba(85,37,184,.10),transparent 32%);
}
body.nn-student-login .tutor-login-wrap,
body.nn-student-login .tutor-login-form-wrapper,
body.nn-student-login [class*="tutor-login"] form{
  max-width:500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.nn-student-login .tutor-login-wrap,
body.nn-student-login .tutor-login-form-wrapper{
  background:#fff!important;
  border:1px solid #e8e0f1!important;
  border-radius:24px!important;
  box-shadow:0 20px 55px rgba(52,16,111,.13)!important;
}
body.nn-student-login .tutor-form-control,
body.nn-student-login input[type="text"],
body.nn-student-login input[type="email"],
body.nn-student-login input[type="password"]{
  border-radius:11px!important;
  border-color:#ded7e8!important;
  min-height:48px!important;
}
body.nn-student-login .tutor-form-control:focus,
body.nn-student-login input:focus{
  border-color:#8c67d9!important;
  box-shadow:0 0 0 3px rgba(85,37,184,.10)!important;
}
body.nn-student-login .tutor-btn-primary,
body.nn-student-login button[type="submit"]{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  border-radius:11px!important;
  min-height:46px!important;
  color:#fff!important;
  font-weight:700!important;
  box-shadow:0 9px 22px rgba(85,37,184,.20)!important;
}

/* Never display unconfigured Loginizer social providers on student-facing pages. */
body:not(.wp-admin) a[href*="lz_social_provider"]{
  display:none!important;
}

/* Tutor student-registration page gets the same polished card treatment. */
body.nn-student-registration{
  background:linear-gradient(145deg,#fff9ef,#f5efff)!important;
}
body.nn-student-registration .nn-content{
  min-height:calc(100vh - 74px);
  padding:58px 20px 76px;
}
body.nn-student-registration .entry-title{
  text-align:center;
  max-width:720px;
  margin:0 auto 24px;
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  color:var(--nn-purple-dark);
}
body.nn-student-registration .entry-content{
  max-width:760px;
  margin:0 auto;
}
body.nn-student-registration .tutor-form-control,
body.nn-student-registration input[type="text"],
body.nn-student-registration input[type="email"],
body.nn-student-registration input[type="password"]{
  border-radius:11px!important;
  border-color:#ded7e8!important;
  min-height:48px!important;
}
body.nn-student-registration .tutor-btn-primary,
body.nn-student-registration button[type="submit"]{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  border-radius:11px!important;
  min-height:46px!important;
  color:#fff!important;
  font-weight:700!important;
}

.nn-cookie-settings-link{
  color:#d9ccef!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
  cursor:pointer;
}
.nn-cookie-settings-link:hover{color:#fff!important}

@media(max-width:600px){
  body.nn-student-login .nn-content,
  body.nn-student-registration .nn-content{
    padding:34px 14px 64px;
  }
  body.nn-student-login .tutor-login-wrap,
  body.nn-student-login .tutor-login-form-wrapper{
    border-radius:18px!important;
  }
}

/* =========================================================
   v1.0.6 — Student authentication experience
   Keep Tutor/WordPress authentication underneath, but present
   a consistent NoonnyEnglish experience to students.
   ========================================================= */

/* Tutor login shown at /dashboard/ while logged out. */
body.nn-student-login .nn-site-footer{display:none}
body.nn-student-login .nn-content{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 74px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:64px max(7vw,40px) 76px;
  overflow:hidden;
  background:linear-gradient(135deg,#fffaf1 0%,#fff 50%,#f4edff 100%)!important;
}
body.nn-student-login .nn-content::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 50% 0 0;
  background:
    linear-gradient(180deg,rgba(52,16,111,.05),rgba(52,16,111,.12)),
    url('assets/images/teacher-hero.jpg') center 36%/cover no-repeat;
}
body.nn-student-login .nn-content::after{
  content:"เรียนสนุก เข้าใจง่าย นำไปใช้ได้จริง";
  position:absolute;
  z-index:-1;
  left:max(4vw,34px);
  bottom:36px;
  max-width:520px;
  color:#fff;
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-size:clamp(22px,2.4vw,34px);
  font-weight:600;
  text-shadow:0 3px 18px rgba(0,0,0,.28);
}
body.nn-student-login .entry-content{
  width:min(500px,100%);
  margin:0 0 0 auto;
}
body.nn-student-login .tutor-login-wrap,
body.nn-student-login .tutor-login-form-wrapper,
body.nn-student-login [class*="tutor-login"] form{
  width:100%!important;
  max-width:500px!important;
}
body.nn-student-login .tutor-login-wrap,
body.nn-student-login .tutor-login-form-wrapper{
  padding:34px 34px 30px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(85,37,184,.11)!important;
  border-radius:24px!important;
  box-shadow:0 24px 64px rgba(52,16,111,.16)!important;
}
body.nn-student-login .nn-auth-eyebrow{
  margin:0 0 8px;
  color:var(--nn-orange);
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  text-align:center;
}
body.nn-student-login .nn-auth-title{
  margin:0 0 4px;
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  color:var(--nn-purple-dark);
  font-size:27px;
  line-height:1.35;
  text-align:center;
}
body.nn-student-login .nn-auth-subtitle{
  margin:0 0 24px;
  color:var(--nn-muted);
  font-size:14px;
  line-height:1.7;
  text-align:center;
}
body.nn-student-login label{
  color:#453a50!important;
  font-weight:700!important;
  font-size:14px!important;
}
body.nn-student-login input[type="text"],
body.nn-student-login input[type="email"],
body.nn-student-login input[type="password"]{
  background:#fff!important;
  border:1px solid #ded7e8!important;
  border-radius:11px!important;
  min-height:49px!important;
  font-size:15px!important;
  padding:10px 13px!important;
}
body.nn-student-login input:focus{
  border-color:#8c67d9!important;
  box-shadow:0 0 0 3px rgba(85,37,184,.10)!important;
  outline:0!important;
}
body.nn-student-login .tutor-btn-primary,
body.nn-student-login button[type="submit"]{
  width:100%!important;
  min-height:48px!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border:0!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 10px 24px rgba(85,37,184,.22)!important;
}
body.nn-student-login a{transition:.18s ease}
body.nn-student-login .nn-auth-register-note{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid #eee8f4;
  text-align:center;
  color:#6d627a;
  font-size:14px;
}
body.nn-student-login .nn-auth-register-note a{
  color:var(--nn-purple);
  font-weight:800;
}

/* Student Registration page. */
body.nn-student-registration .nn-content{
  min-height:calc(100vh - 74px);
  padding:58px 20px 76px!important;
  background:
    radial-gradient(circle at 10% 5%,rgba(255,179,0,.11),transparent 28%),
    radial-gradient(circle at 90% 90%,rgba(85,37,184,.11),transparent 30%),
    linear-gradient(145deg,#fffaf2,#f7f1ff)!important;
}
body.nn-student-registration .entry-title{
  margin-bottom:10px!important;
  font-size:clamp(29px,4vw,42px)!important;
}
body.nn-student-registration .entry-title::after{
  content:"สร้างบัญชีครั้งเดียว แล้วเข้าเรียนคอร์สของคุณได้ทุกเวลา";
  display:block;
  max-width:620px;
  margin:9px auto 26px;
  color:var(--nn-muted);
  font-family:"Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
}
body.nn-student-registration .entry-content{
  max-width:760px!important;
  padding:30px 32px 32px;
  background:#fff;
  border:1px solid #e8e0f1;
  border-radius:24px;
  box-shadow:0 20px 55px rgba(52,16,111,.12);
}
body.nn-student-registration label{
  color:#453a50!important;
  font-weight:700!important;
}
body.nn-student-registration input[type="text"],
body.nn-student-registration input[type="email"],
body.nn-student-registration input[type="password"]{
  min-height:49px!important;
  background:#fff!important;
}

/* Native wp-login forgot/reset screen gets the same display heading font. */
body.login .nn-login-welcome h2,
body.login #login h1 a::after{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-weight:600;
}

@media(max-width:900px){
  body.nn-student-login .nn-content{
    justify-content:center;
    padding:44px 18px 70px!important;
    background:linear-gradient(160deg,#fff8ee,#f5efff)!important;
  }
  body.nn-student-login .nn-content::before,
  body.nn-student-login .nn-content::after{display:none}
  body.nn-student-login .entry-content{margin:0 auto}
}
@media(max-width:600px){
  body.nn-student-login .tutor-login-wrap,
  body.nn-student-login .tutor-login-form-wrapper{
    padding:26px 20px 24px!important;
    border-radius:18px!important;
  }
  body.nn-student-login .nn-auth-title{font-size:23px}
  body.nn-student-registration .nn-content{padding:34px 13px 58px!important}
  body.nn-student-registration .entry-content{
    padding:23px 17px 25px;
    border-radius:18px;
  }
}


/* =========================================================
   v1.0.7 — Compact desktop login + remove unused social login
   Keep the mobile layout unchanged; compact only shorter PC/notebook screens.
   ========================================================= */

/* Loginizer/social-provider buttons are not configured for this site.
   Hide them on the student login screen; email/password remains available. */
body.nn-student-login a[href*="lz_social_provider"],
body.nn-student-login a[href*="social_provider"],
body.nn-student-login [onclick*="lz_social_provider"],
body.nn-student-login [data-provider="google" i],
body.nn-student-login [data-provider="github" i],
body.nn-student-login [data-provider="linkedin" i],
body.nn-student-login [data-provider="twitter" i],
body.nn-student-login [data-provider="x" i],
body.nn-student-login .loginizer-social-login,
body.nn-student-login .loginizer-social,
body.nn-student-login [class*="loginizer"][class*="social"],
body.nn-student-login [class*="social-login"]{
  display:none!important;
}

/* Most notebook screens are 700–900px tall. Keep the complete login card visible
   without making the comfortable mobile layout smaller. */
@media (min-width:901px) and (max-height:900px){
  body.nn-student-login .nn-content{
    min-height:calc(100vh - 74px);
    padding:22px max(5vw,34px) 26px!important;
  }
  body.nn-student-login .nn-content::after{
    bottom:20px;
    font-size:clamp(20px,2vw,29px);
  }
  body.nn-student-login .tutor-login-wrap,
  body.nn-student-login .tutor-login-form-wrapper{
    padding:23px 28px 21px!important;
    border-radius:20px!important;
  }
  body.nn-student-login .nn-auth-eyebrow{
    margin-bottom:3px;
    font-size:12px;
  }
  body.nn-student-login .nn-auth-title{
    margin-bottom:1px;
    font-size:24px;
    line-height:1.28;
  }
  body.nn-student-login .nn-auth-subtitle{
    margin-bottom:13px;
    font-size:13px;
    line-height:1.5;
  }
  body.nn-student-login input[type="text"],
  body.nn-student-login input[type="email"],
  body.nn-student-login input[type="password"]{
    min-height:44px!important;
    padding:8px 12px!important;
  }
  body.nn-student-login .tutor-form-group,
  body.nn-student-login [class*="tutor-mb-"]{
    margin-bottom:12px!important;
  }
  body.nn-student-login .tutor-btn-primary,
  body.nn-student-login button[type="submit"]{
    min-height:44px!important;
  }
  body.nn-student-login .nn-auth-register-note{
    margin-top:11px;
    padding-top:11px;
    font-size:13px;
  }
}


/* =========================================================
   v1.0.8 — Seamless student-login background
   Keep the soft Noonny gradient across the entire viewport so
   there is no visible horizontal cut below the login card.
   ========================================================= */
body.nn-student-login{
  min-height:100vh!important;
  background:linear-gradient(135deg,#fffaf1 0%,#fff 50%,#f4edff 100%) fixed!important;
}
body.nn-student-login .nn-content{
  min-height:calc(100dvh - 74px)!important;
  margin-bottom:0!important;
  background:transparent!important;
}

@media(max-width:900px){
  body.nn-student-login{
    background:linear-gradient(160deg,#fff8ee 0%,#faf6ff 55%,#f3edff 100%) fixed!important;
  }
  body.nn-student-login .nn-content{
    background:transparent!important;
  }
}


/* =========================================================
   v1.0.9 — Thai student password recovery
   Tutor's /dashboard/retrieve-password/ screen stays inside
   the NoonnyEnglish experience and uses Thai copy throughout.
   ========================================================= */
body.nn-student-login.nn-retrieve-password .entry-content{
  width:min(520px,100%)!important;
  margin:0 auto!important;
}
body.nn-student-login.nn-retrieve-password .entry-content > div,
body.nn-student-login.nn-retrieve-password form{
  border-radius:20px;
}
body.nn-student-login.nn-retrieve-password .nn-password-recovery-intro{
  margin:0 0 18px;
  text-align:center;
}
body.nn-student-login.nn-retrieve-password .nn-password-recovery-intro h1{
  margin:0 0 5px;
  color:var(--nn-purple-dark);
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-size:25px;
  font-weight:600;
  line-height:1.35;
}
body.nn-student-login.nn-retrieve-password .nn-password-recovery-intro p{
  margin:0;
  color:var(--nn-muted);
  font-size:14px;
  line-height:1.7;
}
body.nn-student-login.nn-retrieve-password input[type="submit"],
body.nn-student-login.nn-retrieve-password button[type="submit"]{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  color:#fff!important;
  border:0!important;
  border-radius:11px!important;
  min-height:46px!important;
  font-weight:800!important;
}


/* =========================================================
   v1.0.10 — Thai Student Registration polish
   ========================================================= */
body.nn-student-registration .nn-registration-title{
  margin:0 0 8px;
  text-align:center;
  color:var(--nn-purple-dark);
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-size:38px;
  font-weight:600;
  line-height:1.25;
}
body.nn-student-registration .nn-registration-subtitle{
  margin:0 0 28px;
  text-align:center;
  color:var(--nn-muted);
  font-size:15px;
  line-height:1.7;
}
body.nn-student-registration .tutor-form-wrap,
body.nn-student-registration form{
  border-radius:20px!important;
}
body.nn-student-registration input[type="submit"],
body.nn-student-registration button[type="submit"]{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  color:#fff!important;
  border:0!important;
  border-radius:11px!important;
  min-height:46px!important;
  font-weight:800!important;
}
@media (max-width:767px){
  body.nn-student-registration .nn-registration-title{
    font-size:30px;
  }
}


/* =========================================================
   v1.0.12 — Center student registration section more naturally
   ========================================================= */
body.nn-student-registration .nn-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.nn-student-registration .entry-content{
  margin:0 auto!important;
}
@media (min-width: 1024px){
  body.nn-student-registration .nn-content{
    min-height:calc(100vh - 74px - 220px)!important;
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
  body.nn-student-registration .nn-registration-title{
    margin-top:0!important;
  }
}
@media (max-width: 1023px){
  body.nn-student-registration .nn-content{
    display:block;
  }
}


/* =========================================================
   v1.0.13 — Registration title horizontal centering fix
   v1.0.10 accidentally replaced the original auto side margins.
   ========================================================= */
body.nn-student-registration .entry-title,
body.nn-student-registration .nn-registration-title{
  display:block!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 8px!important;
  text-align:center!important;
  align-self:center!important;
  justify-self:center!important;
}

body.nn-student-registration .nn-registration-subtitle{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 28px!important;
  text-align:center!important;
  align-self:center!important;
  justify-self:center!important;
}


/* =========================================================
   v1.0.14 — registration heading spacing refinement
   Move the registration hero section slightly upward to match
   the earlier English layout balance.
   ========================================================= */
body.nn-student-registration .nn-content{
  padding-top:34px!important;
}
body.nn-student-registration .entry-title,
body.nn-student-registration .nn-registration-title{
  margin-bottom:10px!important;
}
body.nn-student-registration .nn-registration-subtitle{
  margin-bottom:20px!important;
}

@media(max-width:600px){
  body.nn-student-registration .nn-content{
    padding-top:24px!important;
  }
}


/* =========================================================
   v1.0.15 — registration heading moved slightly higher
   Fine-tune top spacing so the Thai registration heading
   sits a bit higher, closer to the original visual balance.
   ========================================================= */
body.nn-student-registration .nn-content{
  padding-top:18px!important;
}
body.nn-student-registration .entry-title,
body.nn-student-registration .nn-registration-title{
  margin-top:0!important;
  margin-bottom:8px!important;
}
body.nn-student-registration .nn-registration-subtitle{
  margin-top:0!important;
  margin-bottom:18px!important;
}

@media(max-width:600px){
  body.nn-student-registration .nn-content{
    padding-top:12px!important;
  }
  body.nn-student-registration .entry-title,
  body.nn-student-registration .nn-registration-title{
    margin-bottom:6px!important;
  }
}


/* =========================================================
   v1.0.16 — registration background touches header
   Remove the generic 42px top margin on this page only, while
   compensating with padding so the heading itself stays in the
   balanced position approved in v1.0.15.
   ========================================================= */
body.nn-student-registration .nn-content{
  margin-top:0!important;
  margin-bottom:70px!important;
  padding-top:60px!important;
}

@media(max-width:600px){
  body.nn-student-registration .nn-content{
    margin-top:0!important;
    padding-top:54px!important;
  }
}


/* =========================================================
   v1.0.17 — Thai Tutor student onboarding tour
   ========================================================= */
.nn-thai-onboarding-text{
  font-family:"Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
}
.nn-thai-onboarding-heading{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  line-height:1.35!important;
}


/* =========================================================
   v1.0.18 — Thai empty student dashboard
   ========================================================= */
.nn-thai-dashboard-text{
  font-family:"Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  line-height:1.6!important;
}
.nn-thai-dashboard-heading{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  line-height:1.35!important;
}


/* =========================================================
   v1.0.21 — NoonnyEnglish Course Archive
   Keep Tutor LMS course data/actions native, but make /courses/
   feel like part of the NoonnyEnglish website.
   ========================================================= */
body.nn-course-archive{
  background:linear-gradient(145deg,#fffaf1 0%,#fff 46%,#f6efff 100%)!important;
  --tutor-color-primary:var(--nn-purple);
}

.nn-course-archive-hero{
  position:relative;
  overflow:hidden;
  padding:48px 20px 34px;
  text-align:center;
  background:linear-gradient(120deg,#fff9ec 0%,#fff 50%,#f5edff 100%);
  border-bottom:1px solid rgba(85,37,184,.07);
}
.nn-course-archive-hero::before,
.nn-course-archive-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.nn-course-archive-hero::before{
  width:220px;height:220px;right:-70px;top:-110px;
  background:rgba(255,179,0,.10);
}
.nn-course-archive-hero::after{
  width:180px;height:180px;left:-70px;bottom:-100px;
  background:rgba(255,111,159,.08);
}
.nn-course-archive-hero__inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.nn-course-archive-hero__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;
  background:#fff;border:1px solid #eee4d8;
  color:#6a5540;font-size:13px;font-weight:700;margin-bottom:10px;
}
.nn-course-archive-hero h1{
  margin:0 0 8px;
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif;
  font-size:clamp(32px,4vw,46px);line-height:1.25;font-weight:600;
  color:var(--nn-purple-dark);
}
.nn-course-archive-hero p{margin:0;color:var(--nn-muted);font-size:15px}

body.nn-course-archive .course-archive-page{
  max-width:1180px!important;
  padding-top:34px!important;
  padding-bottom:64px!important;
}
body.nn-course-archive .course-archive-page > .tutor-row{
  justify-content:center!important;
}
body.nn-course-archive [tutor-course-list-container] > .tutor-row,
body.nn-course-archive .tutor-course-list{
  justify-content:center!important;
}
body.nn-course-archive [tutor-course-list-container] > .tutor-row > [class*="tutor-col"],
body.nn-course-archive .tutor-course-list > [class*="tutor-col"]{
  width:min(100%,430px)!important;
  max-width:430px!important;
  flex:0 0 min(100%,430px)!important;
}

body.nn-course-archive .tutor-course-card,
body.nn-course-archive .tutor-card.tutor-course-card{
  overflow:hidden!important;
  border:1px solid #e9e2f1!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 16px 42px rgba(58,29,107,.11)!important;
  transition:transform .22s ease, box-shadow .22s ease!important;
}
body.nn-course-archive .tutor-course-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 52px rgba(58,29,107,.15)!important;
}
body.nn-course-archive .tutor-course-card img{
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}
body.nn-course-archive .tutor-course-card .tutor-card-body{
  padding:22px 20px 18px!important;
}
body.nn-course-archive .tutor-course-card .tutor-course-name,
body.nn-course-archive .tutor-course-card h3,
body.nn-course-archive .tutor-course-card h4{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  font-weight:600!important;
  line-height:1.4!important;
  color:var(--nn-purple-dark)!important;
}
body.nn-course-archive .tutor-course-card .tutor-ratings,
body.nn-course-archive .tutor-course-card .tutor-course-ratings,
body.nn-course-archive .tutor-course-card .tutor-course-loop-meta,
body.nn-course-archive .tutor-course-card .tutor-course-meta,
body.nn-course-archive .tutor-course-card .tutor-instructor,
body.nn-course-archive .tutor-course-card .tutor-course-instructors-meta{
  display:none!important;
}
body.nn-course-archive .tutor-course-card .tutor-card-footer{
  border-top:1px solid #eee8f4!important;
  padding:16px 20px!important;
  background:#fffdfb!important;
}
body.nn-course-archive .tutor-course-card .tutor-course-price,
body.nn-course-archive .tutor-course-card .tutor-price{
  color:#ef4f7d!important;
  font-weight:900!important;
  font-size:21px!important;
}
body.nn-course-archive .tutor-course-card .tutor-btn,
body.nn-course-archive .tutor-course-card a.tutor-btn,
body.nn-course-archive .tutor-course-card button.tutor-btn{
  border-radius:10px!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  color:#fff!important;
  font-weight:700!important;
  box-shadow:0 8px 18px rgba(85,37,184,.18)!important;
}
body.nn-course-archive .tutor-course-card .tutor-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 11px 24px rgba(85,37,184,.24)!important;
}

/* One course should look intentional, not like a lonely card on the far left. */
body.nn-course-archive.nn-single-course-archive [tutor-course-list-container] > .tutor-row,
body.nn-course-archive.nn-single-course-archive .tutor-course-list{
  justify-content:center!important;
}
body.nn-course-archive.nn-single-course-archive .tutor-course-filter-bar,
body.nn-course-archive.nn-single-course-archive .tutor-course-filter-bar-wrap,
body.nn-course-archive.nn-single-course-archive [class*="course-archive-filter-bar"]{
  display:none!important;
}

@media(max-width:600px){
  .nn-course-archive-hero{padding:34px 14px 24px}
  .nn-course-archive-hero h1{font-size:31px}
  .nn-course-archive-hero p{font-size:14px}
  body.nn-course-archive .course-archive-page{padding-top:24px!important;padding-bottom:48px!important}
  body.nn-course-archive [tutor-course-list-container] > .tutor-row > [class*="tutor-col"],
  body.nn-course-archive .tutor-course-list > [class*="tutor-col"]{
    width:100%!important;max-width:100%!important;flex:0 0 100%!important;
  }
  body.nn-course-archive .tutor-course-card{border-radius:18px!important}
}


/* =========================================================
   v1.0.23 — Safe compact course archive
   Restore the course grid and only compact the hero/spacing.
   ========================================================= */
.nn-course-archive-hero{
  padding:24px 20px 20px!important;
}
.nn-course-archive-hero__eyebrow{
  padding:5px 10px!important;
  margin-bottom:5px!important;
  font-size:12px!important;
}
.nn-course-archive-hero h1{
  margin-bottom:4px!important;
  font-size:clamp(30px,3.2vw,40px)!important;
}
.nn-course-archive-hero p{
  font-size:14px!important;
  line-height:1.55!important;
}
body.nn-course-archive .course-archive-page{
  padding-top:18px!important;
}
body.nn-course-archive.nn-single-course-archive .course-archive-page{
  padding-top:14px!important;
}
body.nn-course-archive.nn-single-course-archive [tutor-course-list-container],
body.nn-course-archive.nn-single-course-archive .tutor-course-list,
body.nn-course-archive.nn-single-course-archive .tutor-course-listing{
  margin-top:0!important;
  padding-top:0!important;
}

@media(max-width:600px){
  .nn-course-archive-hero{
    padding:20px 14px 16px!important;
  }
  .nn-course-archive-hero h1{
    font-size:29px!important;
  }
  .nn-course-archive-hero p{
    font-size:13px!important;
  }
  body.nn-course-archive .course-archive-page{
    padding-top:14px!important;
  }
}


/* =========================================================
   v1.0.24 — PC course card above the fold
   Goal: on normal desktop/notebook screens, show the whole
   single course card including price + enroll button without
   scrolling. Mobile keeps its natural stacked layout.
   ========================================================= */
@media (min-width: 769px){

  /* Make the archive introduction support the course card,
     not push it below the first screen. */
  .nn-course-archive-hero{
    padding:14px 20px 12px!important;
  }
  .nn-course-archive-hero__eyebrow{
    padding:4px 9px!important;
    margin-bottom:2px!important;
    font-size:11px!important;
  }
  .nn-course-archive-hero h1{
    margin:0 0 2px!important;
    font-size:34px!important;
    line-height:1.16!important;
  }
  .nn-course-archive-hero p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.4!important;
  }

  body.nn-course-archive .course-archive-page,
  body.nn-course-archive.nn-single-course-archive .course-archive-page{
    padding-top:8px!important;
    padding-bottom:34px!important;
  }

  /* A single paid course should be the visual focus. */
  body.nn-course-archive.nn-single-course-archive
  [tutor-course-list-container] > .tutor-row > [class*="tutor-col"],
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-list > [class*="tutor-col"]{
    width:380px!important;
    max-width:380px!important;
    flex:0 0 380px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.nn-course-archive.nn-single-course-archive .tutor-course-card{
    width:100%!important;
    max-width:380px!important;
    margin:0 auto!important;
    border-radius:20px!important;
  }

  body.nn-course-archive.nn-single-course-archive .tutor-course-card img{
    aspect-ratio:16/8.7!important;
  }

  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-card-body{
    padding:13px 18px 10px!important;
  }

  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-course-name,
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card h3,
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card h4{
    margin-top:0!important;
    margin-bottom:4px!important;
    line-height:1.35!important;
  }

  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-card-footer{
    padding:11px 18px!important;
  }

  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-course-price,
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-price{
    font-size:19px!important;
  }

  body.nn-course-archive.nn-single-course-archive
  .tutor-course-card .tutor-btn{
    min-height:36px!important;
    padding:7px 13px!important;
  }
}


/* =========================================================
   v1.0.26 — safe single-course centering + metadata cleanup
   Fixes the v1.0.25 desktop collapse without forcing widths.
   ========================================================= */
body.nn-course-archive .nn-course-meta-hidden{
  display:none!important;
}

@media (min-width:769px){
  body.nn-course-archive.nn-single-course-archive .nn-single-course-row{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    width:100%!important;
  }

  body.nn-course-archive.nn-single-course-archive .nn-single-course-branch{
    margin-left:auto!important;
    margin-right:auto!important;
    grid-column:1 / -1!important;
    justify-self:center!important;
  }
}


/* =========================================================
   v1.0.27 — vertical balance for single course card on PC
   Keep the course card visually centered between the compact
   archive header and the footer. Mobile layout is unchanged.
   ========================================================= */
@media (min-width: 769px){
  body.nn-course-archive.nn-single-course-archive .course-archive-page{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  body.nn-course-archive.nn-single-course-archive
  [tutor-course-list-container],
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-list,
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-listing{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
}


/* =========================================================
   v1.0.28 — mobile single-course vertical balance
   Add a little more breathing room above the course card so
   it sits more naturally between the hero and footer.
   ========================================================= */
@media (max-width: 768px){
  body.nn-course-archive.nn-single-course-archive .course-archive-page{
    padding-top:28px!important;
    padding-bottom:24px!important;
  }

  body.nn-course-archive.nn-single-course-archive
  [tutor-course-list-container],
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-list,
  body.nn-course-archive.nn-single-course-archive
  .tutor-course-listing{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
}


/* =========================================================
   v1.0.29 — polished Tutor single course detail page
   Keep Tutor LMS functionality but apply Noonny English skin.
   ========================================================= */
body.single-courses{
  background:linear-gradient(180deg,#fffdfb 0%,#fbf8ff 100%);
}

body.single-courses .tutor-course-top-info{
  background:linear-gradient(135deg,#fffaf2 0%,#ffffff 46%,#f7f1ff 100%);
}

body.single-courses .tutor-course-details-page{
  padding-top:28px!important;
  padding-bottom:64px!important;
}

body.single-courses .nn-course-detail-title{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple-dark)!important;
  font-weight:600!important;
  line-height:1.28!important;
  letter-spacing:0!important;
}

body.single-courses .nn-course-detail-category-hidden,
body.single-courses .nn-course-detail-wishlist-hidden,
body.single-courses .nn-course-detail-meta-hidden,
body.single-courses .nn-course-detail-instructor-hidden{
  display:none!important;
}

/* Main course image / preview */
body.single-courses .tutor-course-details-page main.tutor-col-xl-8 > :first-child{
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 18px 45px rgba(58,29,107,.12)!important;
}

body.single-courses .tutor-course-details-page main.tutor-col-xl-8 > :first-child img{
  width:100%!important;
  border-radius:24px!important;
}

/* Purchase box */
body.single-courses .tutor-single-course-sidebar > :first-child{
  border:1px solid var(--nn-border)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 14px 38px rgba(58,29,107,.10)!important;
}

body.single-courses .tutor-single-course-sidebar .tutor-btn,
body.single-courses .tutor-single-course-sidebar button,
body.single-courses .tutor-single-course-sidebar input[type="submit"]{
  border-radius:11px!important;
}

body.single-courses .tutor-single-course-sidebar .tutor-btn-primary,
body.single-courses .tutor-single-course-sidebar button.tutor-btn-primary,
body.single-courses .tutor-single-course-sidebar input[type="submit"]{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(85,37,184,.20)!important;
}

/* Course tabs */
body.single-courses .tutor-course-details-tab{
  margin-top:26px!important;
}

body.single-courses .tutor-course-details-tab .tutor-nav{
  border-bottom-color:#e8e0f2!important;
}

body.single-courses .tutor-course-details-tab .tutor-nav-link{
  color:#554a60!important;
  font-weight:700!important;
}

body.single-courses .tutor-course-details-tab .tutor-nav-link.is-active,
body.single-courses .tutor-course-details-tab .tutor-nav-link.active{
  color:var(--nn-purple)!important;
  border-bottom-color:var(--nn-purple)!important;
}

body.single-courses .tutor-tab{
  color:var(--nn-text)!important;
}

/* Desktop: make purchase panel feel intentional and steady while reading. */
@media (min-width:1200px){
  body.single-courses .tutor-single-course-sidebar{
    position:sticky!important;
    top:96px!important;
  }
}

/* Mobile course detail */
@media (max-width:768px){
  body.single-courses .tutor-course-details-page{
    padding-top:14px!important;
    padding-bottom:38px!important;
  }

  body.single-courses .nn-course-detail-title{
    font-size:22px!important;
    line-height:1.45!important;
  }

  body.single-courses .tutor-course-details-page main.tutor-col-xl-8 > :first-child{
    border-radius:17px!important;
    box-shadow:0 10px 28px rgba(58,29,107,.10)!important;
  }

  body.single-courses .tutor-course-details-page main.tutor-col-xl-8 > :first-child img{
    border-radius:17px!important;
  }

  body.single-courses .tutor-course-details-tab{
    margin-top:20px!important;
  }
}


/* =========================================================
   v1.0.33 — Thai + polished Tutor Native eCommerce Cart
   ========================================================= */
body.nn-cart-page{
  background:linear-gradient(180deg,#fffdfb 0%,#fbf8ff 100%);
}

body.nn-cart-page .nn-cart-root{
  padding-top:28px!important;
  padding-bottom:54px!important;
}

body.nn-cart-page .nn-cart-heading{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple-dark)!important;
  font-weight:600!important;
  line-height:1.25!important;
  font-size:34px!important;
  margin-top:0!important;
  margin-bottom:24px!important;
  letter-spacing:0!important;
}

body.nn-cart-page .nn-cart-content-row{
  margin-top:20px!important;
  padding-top:0!important;
}

body.nn-cart-page .nn-cart-count-heading,
body.nn-cart-page .nn-cart-summary-heading{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple-dark)!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:0!important;
}

body.nn-cart-page .nn-cart-count-heading{
  font-size:27px!important;
  margin-bottom:18px!important;
}

body.nn-cart-page .nn-cart-summary-heading{
  font-size:27px!important;
  margin-bottom:18px!important;
}

/* Tutor cards inside cart */
body.nn-cart-page .nn-cart-root .tutor-card,
body.nn-cart-page .nn-cart-root [class*="cart"] .tutor-card{
  border:1px solid #e8e0f2!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(58,29,107,.07)!important;
  overflow:hidden!important;
}

body.nn-cart-page .nn-cart-root .tutor-card img{
  border-radius:10px!important;
}

body.nn-cart-page .nn-cart-root .tutor-btn,
body.nn-cart-page .nn-cart-root button,
body.nn-cart-page .nn-cart-root input[type="submit"]{
  border-radius:10px!important;
}

body.nn-cart-page .nn-cart-root .tutor-btn-primary,
body.nn-cart-page .nn-cart-root button.tutor-btn-primary,
body.nn-cart-page .nn-cart-root input[type="submit"],
body.nn-cart-page .nn-cart-checkout-btn{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(85,37,184,.18)!important;
  font-weight:700!important;
}

body.nn-cart-page .nn-cart-checkout-btn:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

body.nn-cart-page .nn-cart-remove{
  color:var(--nn-purple)!important;
  font-weight:700!important;
}

/* Reduce Tutor utility spacing only inside Cart. */
body.nn-cart-page .nn-cart-root .tutor-mt-80,
body.nn-cart-page .nn-cart-root .tutor-mt-72,
body.nn-cart-page .nn-cart-root .tutor-mt-64,
body.nn-cart-page .nn-cart-root .tutor-mt-56,
body.nn-cart-page .nn-cart-root .tutor-mt-48{
  margin-top:24px!important;
}

body.nn-cart-page .nn-cart-root .tutor-p-32{
  padding:24px!important;
}

/* Single-course "View Cart" state should remain Noonny purple. */
body.single-courses .nn-view-cart-btn{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(85,37,184,.18)!important;
}

/* Mobile */
@media (max-width:768px){
  body.nn-cart-page .nn-cart-root{
    padding-top:18px!important;
    padding-bottom:34px!important;
  }

  body.nn-cart-page .nn-cart-heading{
    font-size:27px!important;
    margin-bottom:16px!important;
  }

  body.nn-cart-page .nn-cart-content-row{
    margin-top:12px!important;
  }

  body.nn-cart-page .nn-cart-count-heading,
  body.nn-cart-page .nn-cart-summary-heading{
    font-size:22px!important;
    margin-bottom:14px!important;
  }

  body.nn-cart-page .nn-cart-root .tutor-card{
    border-radius:15px!important;
  }

  body.nn-cart-page .nn-cart-root .tutor-p-32{
    padding:18px!important;
  }

  body.nn-cart-page .nn-cart-checkout-btn{
    width:100%!important;
    min-height:46px!important;
  }
}


/* v1.0.34 — Thai empty-cart state */
body.nn-cart-page .nn-empty-cart-message{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple-dark)!important;
  font-weight:500!important;
}

body.nn-cart-page .nn-empty-cart-browse{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  border-radius:10px!important;
  font-weight:700!important;
  box-shadow:0 9px 22px rgba(85,37,184,.18)!important;
}


/* =========================================================
   v1.0.35 — Empty cart vertical spacing (desktop only)
   Mobile layout intentionally unchanged.
   ========================================================= */
@media (min-width:769px){
  body.nn-cart-page .nn-empty-cart-card{
    position:relative!important;
    top:-78px!important;
    margin-bottom:-78px!important;
  }
}


/* =========================================================
   v1.0.36 — Course archive secondary "ดูรายละเอียด" action
   Primary CTA remains "สมัครเรียน"; detail button is quieter.
   ========================================================= */
body.nn-course-archive .nn-course-card-buttons{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}

body.nn-course-archive .tutor-course-card .nn-course-detail-secondary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:7px 11px!important;
  border:1px solid #d9c9f4!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--nn-purple)!important;
  font-weight:700!important;
  font-size:13px!important;
  line-height:1.2!important;
  text-decoration:none!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease!important;
}

body.nn-course-archive .tutor-course-card .nn-course-detail-secondary:hover{
  background:#f8f4ff!important;
  border-color:#bda4eb!important;
  color:var(--nn-purple-dark)!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Keep the primary enroll CTA visually dominant. */
body.nn-course-archive .tutor-course-card .nn-course-card-buttons .tutor-btn,
body.nn-course-archive .tutor-course-card .nn-course-card-buttons button{
  box-shadow:0 8px 18px rgba(85,37,184,.18)!important;
}

@media (max-width:600px){
  body.nn-course-archive .nn-course-card-buttons{
    gap:6px!important;
  }

  body.nn-course-archive .tutor-course-card .nn-course-detail-secondary{
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:12px!important;
  }
}


/* =========================================================
   v1.0.38 — Thai Checkout
   Keep the English bank-transfer instructions intact.
   ========================================================= */
body.nn-checkout-page{
  background:linear-gradient(180deg,#fffdfb 0%,#fbf8ff 100%);
}

body.nn-checkout-page .nn-checkout-root{
  padding-top:28px!important;
  padding-bottom:52px!important;
}

body.nn-checkout-page .nn-checkout-heading{
  font-family:"Mitr","Tahoma","Noto Sans Thai","Segoe UI",sans-serif!important;
  color:var(--nn-purple-dark)!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:0!important;
}

body.nn-checkout-page .nn-checkout-pay-button{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  border-radius:10px!important;
  font-weight:700!important;
  box-shadow:0 9px 22px rgba(85,37,184,.18)!important;
}

body.nn-checkout-page .nn-checkout-pay-button:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

@media (max-width:768px){
  body.nn-checkout-page .nn-checkout-root{
    padding-top:18px!important;
    padding-bottom:34px!important;
  }

  body.nn-checkout-page .nn-checkout-pay-button{
    width:100%!important;
    min-height:46px!important;
  }
}


/* =========================================================
   v1.0.48 — Thai order confirmation
   ========================================================= */
body.nn-order-success-page .nn-order-success-primary{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  border-radius:9px!important;
  font-weight:700!important;
  box-shadow:0 8px 20px rgba(85,37,184,.16)!important;
}

body.nn-order-success-page .nn-order-success-secondary{
  background:#fff!important;
  color:var(--nn-purple)!important;
  border:1px solid rgba(104,52,205,.28)!important;
  border-radius:9px!important;
  font-weight:600!important;
  box-shadow:none!important;
}

body.nn-order-success-page .nn-order-success-primary:hover,
body.nn-order-success-page .nn-order-success-secondary:hover{
  transform:translateY(-1px);
}

body.nn-order-success-page .nn-order-success-message{
  max-width:420px;
  line-height:1.65!important;
}

@media (max-width:768px){
  body.nn-order-success-page .nn-order-success-primary,
  body.nn-order-success-page .nn-order-success-secondary{
    min-height:44px!important;
  }
}


/* =========================================================
   v1.0.49 — Thai billing / order history + bank reminder
   ========================================================= */
body.nn-billing-order-history .nn-bank-transfer-reminder{
  max-width:826px;
  margin:12px auto 18px;
  padding:18px 20px;
  background:#fbfaff;
  border:1px solid rgba(104,52,205,.18);
  border-radius:12px;
  box-shadow:0 7px 20px rgba(51,20,105,.06);
}

body.nn-billing-order-history .nn-bank-transfer-reminder__title{
  margin:0 0 12px;
  color:var(--nn-purple);
  font-size:18px;
  font-weight:800;
}

body.nn-billing-order-history .nn-order-history-course{
  display:inline-flex;
  align-items:center;
  gap:10px;
  vertical-align:middle;
}

body.nn-billing-order-history .nn-order-history-thumb{
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(104,52,205,.14);
  background:#fff;
  box-shadow:0 5px 14px rgba(51,20,105,.10);
}

body.nn-billing-order-history .nn-order-history-thumb--fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  background:linear-gradient(135deg, #6f35d9 0%, #8d49f2 55%, #5d25c9 100%);
  color:#fff;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
}

body.nn-billing-order-history .nn-order-history-course__title{
  display:inline-block;
  line-height:1.45;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 18px;
  margin-bottom:10px;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__row{
  line-height:1.6;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__label{
  color:#5f6672;
  margin-right:6px;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__account{
  color:#174ea6;
  font-size:17px;
  font-weight:800;
  letter-spacing:.2px;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__amount{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid rgba(104,52,205,.12);
  font-size:15px;
}

body.nn-billing-order-history .nn-bank-transfer-reminder__note{
  margin:8px 0 0;
  color:#535967;
  line-height:1.65;
  font-size:14px;
}

body.nn-billing-order-history .nn-bank-transfer-copy{
  margin-left:8px;
  padding:5px 10px;
  border:1px solid rgba(104,52,205,.28);
  border-radius:7px;
  background:#fff;
  color:var(--nn-purple);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

body.nn-billing-order-history .nn-bank-transfer-copy:hover{
  background:#f4efff;
}

@media (max-width:768px){
  body.nn-billing-order-history .nn-order-history-thumb{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:9px;
  }

  body.nn-billing-order-history .nn-order-history-course{
    gap:9px;
  }

  body.nn-billing-order-history .nn-bank-transfer-reminder{
    margin:10px 16px 16px;
    padding:15px 16px;
  }

  body.nn-billing-order-history .nn-bank-transfer-reminder__grid{
    grid-template-columns:1fr;
    gap:6px;
  }

  body.nn-billing-order-history .nn-bank-transfer-copy{
    display:block;
    margin:7px 0 0;
  }
}


/* =========================================================
   v1.0.51 — Real course featured image in billing history
   ========================================================= */
body.nn-billing-order-history .nn-order-history-thumb{
  object-fit:cover;
  object-position:center;
}

body.nn-billing-order-history .nn-order-history-thumb--fallback{
  display:none!important;
}


/* =========================================================
   v1.0.52 — Single billing thumbnail + persistent Thai filter
   ========================================================= */
body.nn-billing-order-history .nn-order-history-course
  .nn-order-history-course .nn-order-history-thumb{
  display:none!important;
}


/* v1.0.74 — Student dashboard "ดูทั้งหมด" button */
body.nn-student-dashboard .nn-dashboard-see-all{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:30px!important;
  padding:5px 11px!important;
  border:1px solid #ded2f2!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--nn-purple)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 3px 10px rgba(69,31,137,.06)!important;
  transition:all .18s ease!important;
}
body.nn-student-dashboard .nn-dashboard-see-all::after{
  content:"→";
  font-size:13px;
  line-height:1;
  transition:transform .18s ease;
}
body.nn-student-dashboard .nn-dashboard-see-all:hover,
body.nn-student-dashboard .nn-dashboard-see-all:focus{
  background:linear-gradient(135deg,var(--nn-purple),#7138d4)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(85,37,184,.18)!important;
  transform:translateY(-1px);
}
body.nn-student-dashboard .nn-dashboard-see-all:hover::after,
body.nn-student-dashboard .nn-dashboard-see-all:focus::after{
  transform:translateX(2px);
}

/* =========================================================
   v1.0.84 — Private payment-slip upload (upload control visible immediately)
   ========================================================= */
body.nn-billing-order-history .nn-payment-slip{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e9ddfb;
}
body.nn-billing-order-history .nn-payment-slip__title{
  margin-bottom:8px;
  font-size:15px;
  font-weight:700;
  color:#3f1d87;
}
body.nn-billing-order-history .nn-payment-slip__content{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.nn-billing-order-history .nn-payment-slip__message{
  color:#5d5369;
  font-size:13px;
  line-height:1.6;
}
body.nn-billing-order-history .nn-payment-slip__message.is-error{
  color:#b42318;
  font-weight:600;
}
body.nn-billing-order-history .nn-payment-slip__success{
  color:#138a42;
  font-size:14px;
  font-weight:700;
}
body.nn-billing-order-history .nn-payment-slip__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body.nn-billing-order-history .nn-payment-slip__upload,
body.nn-billing-order-history .nn-payment-slip__view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.nn-billing-order-history .nn-payment-slip__upload{
  border:1px solid #5b2bc4;
  background:#5b2bc4;
  color:#fff;
}
body.nn-billing-order-history .nn-payment-slip__view{
  border:1px solid #cbb8ef;
  background:#fff;
  color:#4d20a7;
}
body.nn-billing-order-history .nn-payment-slip__upload:hover,
body.nn-billing-order-history .nn-payment-slip__view:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(79,39,156,.12);
}
body.nn-billing-order-history .nn-payment-slip__note{
  color:#80758d;
  font-size:12px;
  line-height:1.5;
}
body.nn-billing-order-history .nn-payment-slip.nn-slip-is-loading{
  opacity:.72;
}
@media (max-width: 640px){
  body.nn-billing-order-history .nn-payment-slip__actions{
    flex-direction:column;
  }
  body.nn-billing-order-history .nn-payment-slip__upload,
  body.nn-billing-order-history .nn-payment-slip__view{
    width:100%;
  }
}




/* =========================================================
   v1.0.89 — direct native payment-slip file control + isolated per-order status
   The click lands on the real input[type=file]; the Thai text is only a
   pointer-events:none visual layer. No synthetic picker calls are used.
   ========================================================= */
body.nn-billing-order-history .nn-payment-slip__native-wrap{
  position:relative;
  display:inline-block;
  width:225px;
  height:38px;
  border-radius:8px;
  overflow:hidden;
  background:#5b2bc4;
  box-shadow:0 1px 2px rgba(79,39,156,.08);
  cursor:pointer !important;
}
body.nn-billing-order-history .nn-payment-slip__file-direct{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:8px !important;
  opacity:.001 !important;
  cursor:pointer !important;
  font-size:0 !important;
}
body.nn-billing-order-history .nn-payment-slip__file-direct::file-selector-button,
body.nn-billing-order-history .nn-payment-slip__file-direct::-webkit-file-upload-button{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  cursor:pointer !important;
}
body.nn-billing-order-history .nn-payment-slip__native-label{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  pointer-events:none;
  user-select:none;
}
body.nn-billing-order-history .nn-payment-slip__native-wrap:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(79,39,156,.12);
}
body.nn-billing-order-history .nn-payment-slip__native-wrap.is-disabled{
  opacity:.6;
  cursor:wait !important;
}
body.nn-billing-order-history .nn-payment-slip__native-wrap.is-disabled .nn-payment-slip__file-direct{
  cursor:wait !important;
}
@media (max-width:640px){
  body.nn-billing-order-history .nn-payment-slip__native-wrap{
    width:100%;
  }
}


/* =========================================================
   v1.0.90 — persistent, visible native payment-slip picker
   No transparent overlay, synthetic click, or hidden input.
   ========================================================= */
body.nn-billing-order-history .nn-payment-slip__actions-native{
  align-items:center;
}
body.nn-billing-order-history .nn-payment-slip__file-native-visible{
  display:block !important;
  position:static !important;
  width:auto !important;
  max-width:100% !important;
  min-height:40px !important;
  margin:0 !important;
  padding:4px !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  color:#5d5369 !important;
  background:#fff !important;
  border:1px solid #cbb8ef !important;
  border-radius:8px !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
body.nn-billing-order-history .nn-payment-slip__file-native-visible::file-selector-button,
body.nn-billing-order-history .nn-payment-slip__file-native-visible::-webkit-file-upload-button{
  min-height:32px !important;
  margin:0 10px 0 0 !important;
  padding:7px 14px !important;
  border:0 !important;
  border-radius:6px !important;
  background:#5b2bc4 !important;
  color:#fff !important;
  font:inherit !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
body.nn-billing-order-history .nn-payment-slip__file-native-visible:hover::file-selector-button,
body.nn-billing-order-history .nn-payment-slip__file-native-visible:hover::-webkit-file-upload-button{
  background:#4b20a8 !important;
}
body.nn-billing-order-history .nn-payment-slip__file-native-visible:disabled{
  opacity:.6 !important;
  cursor:wait !important;
}
@media (max-width:640px){
  body.nn-billing-order-history .nn-payment-slip__file-native-visible{
    width:100% !important;
  }
}


/* v1.0.91 — permanent student payment-history navigation */
body.nn-student-dashboard .nn-dashboard-billing-menu-item a{
  cursor:pointer;
}

/* v1.0.96 — payment menu: use Tutor native flex gap only (no extra SVG margin) */
body.nn-student-dashboard .nn-dashboard-billing-menu-item > a{
  display:flex !important;
  align-items:center !important;
}
body.nn-student-dashboard .nn-dashboard-billing-menu-item .nn-payment-menu-svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  flex:0 0 20px !important;
  margin-right:0 !important;
  overflow:visible !important;
  color:inherit !important;
}


/* =========================================================
   v1.0.97 — Billing inside the normal student dashboard shell
   Tutor LMS 4.x treats account/billing as an isolated page.
   We force the regular dashboard template in PHP, then hide only
   the redundant account-page header (Back / title / Close).
   ========================================================= */
body.nn-student-dashboard.nn-billing-order-history .tutor-billing-wrapper{
  width:100%!important;
}

body.nn-student-dashboard.nn-billing-order-history .tutor-billing-wrapper > .tutor-account-header{
  display:none!important;
}

body.nn-student-dashboard.nn-billing-order-history .tutor-billing-wrapper > .tutor-account-container{
  width:100%!important;
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

body.nn-student-dashboard.nn-billing-order-history .tutor-account-billing-wrapper{
  margin-top:20px!important;
}

@media(max-width:768px){
  body.nn-student-dashboard.nn-billing-order-history .tutor-account-billing-wrapper{
    margin-top:12px!important;
  }
}


/* =========================================================
   v1.0.98 — Billing page inside dashboard shell, while preserving
   the native billing/order-history content through an embedded
   isolated billing source view.
   ========================================================= */
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe-shell{
  margin-top:20px!important;
  background:#fff!important;
  border:1px solid #e9e1f2!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe{
  width:100%!important;
  min-height:900px;
  border:0!important;
  display:block!important;
  background:transparent!important;
}
body.nn-billing-embedded-source,
body.nn-billing-embedded-source .site,
body.nn-billing-embedded-source .site-main{
  background:transparent!important;
}
body.nn-billing-embedded-source .tutor-account-header{
  display:none!important;
}
body.nn-billing-embedded-source .tutor-billing-wrapper,
body.nn-billing-embedded-source .tutor-account-billing-wrapper,
body.nn-billing-embedded-source .tutor-account-container{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  background:transparent!important;
}
body.nn-billing-embedded-source .tutor-account-billing-wrapper{
  margin-top:0!important;
}


/* =========================================================
   v1.0.100 — Billing dashboard visual polish
   1) one page scrollbar only
   2) remove the extra iframe-shell card so Tutor's native card is the surface
   3) make Payment visibly active in the sidebar
   4) let the transfer/slip panel use the available content width
   ========================================================= */
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe-shell{
  margin-top:16px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  box-shadow:none!important;
}
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe{
  width:100%!important;
  min-height:600px!important;
  border:0!important;
  display:block!important;
  background:transparent!important;
  overflow:hidden!important;
}

/* Billing is a first-class dashboard destination: show the same active-state cue. */
body.nn-student-dashboard.nn-billing-order-history .nn-dashboard-billing-menu-item > a,
body.nn-student-dashboard .nn-dashboard-billing-menu-item.active > a{
  background:#f1ebff!important;
  color:var(--nn-purple)!important;
  border-radius:12px!important;
}
body.nn-student-dashboard.nn-billing-order-history .nn-dashboard-billing-menu-item .nn-payment-menu-svg,
body.nn-student-dashboard .nn-dashboard-billing-menu-item.active .nn-payment-menu-svg{
  color:var(--nn-purple)!important;
}

/* The iframe source is same-origin and should behave as content, not as a second page. */
body.nn-billing-embedded-source{
  overflow:hidden!important;
  min-height:0!important;
}
body.nn-billing-embedded-source .tutor-account-header{
  display:none!important;
}
body.nn-billing-embedded-source .tutor-billing-wrapper,
body.nn-billing-embedded-source .tutor-account-billing-wrapper,
body.nn-billing-embedded-source .tutor-account-container{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
body.nn-billing-embedded-source .nn-bank-transfer-reminder{
  width:auto!important;
  max-width:none!important;
  margin-left:14px!important;
  margin-right:14px!important;
}

@media(max-width:768px){
  body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe-shell{
    margin-top:12px!important;
  }
  body.nn-billing-embedded-source .nn-bank-transfer-reminder{
    margin-left:8px!important;
    margin-right:8px!important;
  }
}


/* =========================================================
   v1.0.101 — Bound Billing height.
   Prevent the outer dashboard page from growing indefinitely.
   The Billing/Order History area gets its own vertical scroll.
   ========================================================= */
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe-shell{
  overflow:hidden!important;
}
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe{
  height:clamp(620px, calc(100vh - 220px), 760px)!important;
  min-height:620px!important;
  max-height:760px!important;
  overflow:auto!important;
}

@media(max-width:768px){
  body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe{
    height:clamp(520px, calc(100vh - 170px), 700px)!important;
    min-height:520px!important;
    max-height:700px!important;
  }
}

body.nn-billing-embedded-source,
body.nn-billing-embedded-source html{
  overflow-y:auto!important;
  overflow-x:hidden!important;
}


/* =========================================================
   v1.0.102 — top-document native file picker overlay.
   The visible Tutor file control stays unchanged inside Billing,
   while an invisible native input in the parent document receives
   the click. This bypasses Tutor/iframe click interception.
   ========================================================= */
.nn-payment-picker-overlay-layer{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  pointer-events:none!important;
}
.nn-payment-picker-overlay-input{
  position:fixed!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:.001!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:2147483001!important;
}


/* v1.0.103 — persistent, readable payment-slip success state */
body.nn-billing-order-history .nn-payment-slip__success{
  margin-top:4px!important;
  margin-bottom:8px!important;
  font-weight:700!important;
}


/* =========================================================
   v1.0.104 — Payment Slip state visibility fix
   Author CSS on .nn-payment-slip__view used display:inline-flex,
   which overrode the browser's [hidden] behavior.  This made
   "ดูหลักฐาน" visible even before it had a valid URL.
   ========================================================= */
body.nn-billing-order-history .nn-payment-slip__view[hidden],
body.nn-billing-order-history .nn-payment-slip__success[hidden]{
  display:none!important;
}


/* v1.0.114 — simple per-card controller overlays */
.nn-payment-simple-overlay-layer{
  position:fixed!important;
  inset:0!important;
  z-index:2147483100!important;
  pointer-events:none!important;
}
.nn-payment-simple-file-overlay,
.nn-payment-simple-view-overlay{
  position:fixed!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:.001!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:2147483101!important;
}
.nn-payment-simple-view-overlay{
  background:transparent!important;
}


/* =========================================================
   v1.0.123 — CLEAN Payment Slip viewer
   Keeps the existing Billing-card UI; only behavior is rebuilt.
   ========================================================= */
.nn-clean-slip-viewer{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.72);
}
.nn-clean-slip-viewer.is-open{display:flex;}
.nn-clean-slip-viewer__panel{
  position:relative;
  width:min(1100px,96vw);
  height:min(88vh,900px);
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
}
.nn-clean-slip-viewer__close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:26px;
  line-height:40px;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nn-clean-slip-viewer__loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-size:15px;
  color:#475569;
  background:#fff;
}
.nn-clean-slip-viewer__frame{
  width:100%;
  height:100%;
  border:0;
  background:#f8fafc;
}


/* =========================================================
   v1.0.128 — Smooth Billing iframe reveal
   SAFE approach: never hide/restructure the dashboard layout.
   Only fade the already-sized Billing iframe until its internal UI is ready.
   ========================================================= */
body.nn-student-dashboard.nn-billing-order-history .nn-billing-iframe-shell{
  position:relative!important;
}

body.nn-student-dashboard.nn-billing-order-history
.nn-billing-iframe.nn-billing-visual-pending{
  opacity:0!important;
  pointer-events:none!important;
}

body.nn-student-dashboard.nn-billing-order-history
.nn-billing-iframe.nn-billing-visual-ready{
  opacity:1!important;
  transition:opacity .14s ease!important;
}

body.nn-student-dashboard.nn-billing-order-history
.nn-billing-iframe-shell.nn-billing-visual-loading::after{
  content:'กำลังโหลดข้อมูลการชำระเงิน...';
  position:absolute;
  z-index:2;
  left:14px;
  right:14px;
  top:14px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid #eee8fb;
  border-radius:14px;
  background:#fff;
  color:#6b7280;
  font-size:14px;
  pointer-events:none;
}

@media(max-width:768px){
  body.nn-student-dashboard.nn-billing-order-history
  .nn-billing-iframe-shell.nn-billing-visual-loading::after{
    left:8px;
    right:8px;
    top:8px;
    height:100px;
  }
}


/* =========================================================
   v1.0.129 — Payment Slip viewer: fit image to viewer width
   - Images use a real <img>, not the browser's raw-image iframe view.
   - Width is always 100% of the viewer panel.
   - Height follows the image ratio; vertical scrolling is allowed.
   - No horizontal scrolling for images.
   - PDF viewing remains unchanged.
   ========================================================= */
.nn-clean-slip-viewer__image-wrap{
  position:absolute;
  inset:0;
  display:none;
  overflow-y:auto;
  overflow-x:hidden;
  background:#111827;
}
.nn-clean-slip-viewer__image-wrap.is-visible{
  display:block;
}
.nn-clean-slip-viewer__image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  object-fit:contain;
}

/* v1.0.138 — Curated homepage grid: PC 3 columns / Tablet 2 / Mobile 1. */
.nn-course-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1120px;
  margin:0 auto;
}
.nn-course-list .nn-course-card{
  grid-template-columns:1fr;
  max-width:none;
  margin:0;
  min-width:0;
}
.nn-course-list .nn-course-image{
  display:block;
  min-height:0;
  aspect-ratio:16/9;
  overflow:hidden;
}
.nn-course-list .nn-course-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.nn-course-list .nn-course-placeholder{
  min-height:0;
  height:100%;
}
.nn-course-list .nn-course-body{
  padding:26px 28px 28px;
  justify-content:flex-start;
}
.nn-course-list .nn-course-body h3{
  font-size:24px;
}
.nn-course-list .nn-course-actions{
  margin-top:auto;
}
.nn-all-courses-link{
  display:flex;
  justify-content:center;
  margin-top:26px;
}
.nn-empty-courses{
  max-width:760px;
  margin:0 auto;
  padding:32px;
  text-align:center;
  border:1px solid var(--nn-border);
  border-radius:var(--nn-radius);
  background:#fff;
  box-shadow:var(--nn-shadow);
}
.nn-empty-courses strong{display:block;color:var(--nn-purple-dark);font-size:22px;margin-bottom:6px}
.nn-empty-courses p{margin:0;color:var(--nn-muted)}
@media (max-width:1100px){
  .nn-course-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .nn-course-list{grid-template-columns:1fr}
  .nn-course-list .nn-course-card{max-width:760px;margin:0 auto;width:100%}
}


/* v1.0.139 — Homepage course cards: keep prices/buttons aligned and cleaner. */
.nn-course-list .nn-course-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.nn-course-list .nn-course-image{
  flex:0 0 auto;
}
.nn-course-list .nn-course-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1 1 auto;
}
.nn-course-list .nn-course-body h3{
  margin:0;
  line-height:1.35;
  min-height:calc(1.35em * 2);
}
.nn-course-list .nn-course-summary{
  margin:0;
  color:var(--nn-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:8;
  overflow:hidden;
}
.nn-course-list .nn-tags{
  margin-top:2px;
  min-height:38px;
}
.nn-course-list .nn-course-card-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:6px;
}
.nn-course-list .nn-course-card-footer .nn-price{
  margin:0;
  min-height:82px;
  align-content:flex-start;
}
.nn-course-list .nn-course-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:0;
}
.nn-course-list .nn-course-actions .nn-btn{
  width:100%;
  justify-content:center;
  min-height:48px;
}
@media (max-width:1100px){
  .nn-course-list .nn-course-body h3{min-height:0}
  .nn-course-list .nn-course-card-footer .nn-price{min-height:0}
}

/* v1.0.139 — Course archive cards: stable footer and visible price on every card. */
body.nn-course-archive .tutor-course-card,
body.nn-course-archive .tutor-card.tutor-course-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
}
body.nn-course-archive .tutor-course-card .tutor-card-body{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  flex:1 1 auto!important;
}
body.nn-course-archive .tutor-course-card .tutor-card-footer{
  margin-top:auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  align-items:stretch!important;
}
body.nn-course-archive .tutor-course-card .tutor-course-price,
body.nn-course-archive .tutor-course-card .tutor-price,
body.nn-course-archive .tutor-course-card .nn-archive-price{
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
body.nn-course-archive .tutor-course-card .nn-archive-price{
  color:#ef4f7d!important;
  font-weight:900!important;
  font-size:21px!important;
  line-height:1.2!important;
}
body.nn-course-archive .tutor-course-card .nn-archive-price small{
  font-size:14px!important;
  color:var(--nn-text)!important;
  font-weight:700!important;
}
body.nn-course-archive .tutor-course-card .nn-archive-price .nn-archive-regular{
  color:#9b94a8!important;
  text-decoration:line-through!important;
  font-size:14px!important;
  font-weight:600!important;
}
body.nn-course-archive .tutor-course-card .nn-archive-price .nn-archive-save{
  display:inline-flex!important;
  align-items:center!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  background:#fff1c9!important;
  color:#9b6500!important;
  font-size:12px!important;
  font-weight:700!important;
}


/* v1.0.140 — Course archive final cleanup for student view. */
/* Wishlist/bookmark is intentionally not used on Noonny English course cards. */
body.nn-course-archive .tutor-course-card .tutor-course-wishlist,
body.nn-course-archive .tutor-course-card .tutor-course-wishlist-btn,
body.nn-course-archive .tutor-course-card [class*="course-wishlist"],
body.nn-course-archive .tutor-course-card [class*="wishlist-btn"]{
  display:none!important;
}

/* Keep the archive action row compact and consistent. */
body.nn-course-archive .nn-course-card-buttons{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch!important;
}
body.nn-course-archive .tutor-course-card .nn-course-card-buttons .nn-course-detail-secondary,
body.nn-course-archive .tutor-course-card .nn-course-card-buttons .tutor-btn,
body.nn-course-archive .tutor-course-card .nn-course-card-buttons a,
body.nn-course-archive .tutor-course-card .nn-course-card-buttons button{
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  margin:0!important;
  justify-content:center!important;
  text-align:center!important;
}
@media (max-width:420px){
  body.nn-course-archive .nn-course-card-buttons{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v1.0.141 — Standard Course Card System
   One reusable card component for Homepage and /courses/.
   New published courses inherit this layout automatically.
   ========================================================= */
.nn-course-list{
  grid-template-columns:repeat(auto-fit,minmax(280px,350px));
  justify-content:center;
  align-items:stretch;
}
.nn-standard-course-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-width:0;
}
.nn-standard-course-card .nn-course-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f7f4fb;
  flex:0 0 auto;
}
.nn-standard-course-card .nn-course-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nn-standard-course-card .nn-course-body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  gap:13px;
  padding:24px 22px 24px;
}
.nn-standard-course-card .nn-badge{
  align-self:flex-start;
}
.nn-standard-course-card .nn-course-body h3{
  margin:0;
  font-size:23px;
  line-height:1.42;
  min-height:calc(1.42em * 2);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.nn-standard-course-card .nn-course-summary{
  margin:0;
  color:var(--nn-muted);
  line-height:1.75;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:7;
  overflow:hidden;
  min-height:calc(1.75em * 7);
}
.nn-standard-course-card .nn-course-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  align-items:center;
  min-height:26px;
  color:#6d6579;
  font-size:13px;
}
.nn-standard-course-card .nn-course-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nn-standard-course-card .nn-tags{
  min-height:66px;
  margin:0;
  align-content:flex-start;
}
.nn-standard-course-card .nn-course-card-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-top:3px;
}
.nn-standard-course-card .nn-price{
  margin:0;
  min-height:74px;
  align-content:flex-start;
}
.nn-standard-course-card .nn-course-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  width:100%;
  margin:0;
}
.nn-standard-course-card .nn-course-actions .nn-btn{
  width:100%;
  min-height:46px;
  justify-content:center;
  text-align:center;
  margin:0;
}
.nn-standard-course-card .nn-course-actions .nn-course-primary-action{
  order:2;
}
.nn-standard-course-card .nn-course-actions .nn-course-detail-action{
  order:1;
}

.nn-course-archive-main{
  padding:34px 16px 58px;
}
.nn-course-archive-main .nn-course-list{
  max-width:1120px;
}
.nn-course-archive-toolbar{
  max-width:1120px;
  margin:0 auto 24px;
  display:flex;
  justify-content:flex-end;
}
.nn-course-sort{
  min-width:190px;
  height:44px;
  border:1px solid #ded8e6;
  border-radius:10px;
  background:#fff;
  color:var(--nn-text);
  padding:0 38px 0 13px;
  font:inherit;
}
.nn-course-archive-empty{
  max-width:760px;
  margin:0 auto;
}
@media (max-width:760px){
  .nn-course-list{grid-template-columns:minmax(0,1fr)}
  .nn-standard-course-card{max-width:520px!important;margin:0 auto!important;width:100%}
  .nn-standard-course-card .nn-course-body h3,
  .nn-standard-course-card .nn-course-summary,
  .nn-standard-course-card .nn-tags,
  .nn-standard-course-card .nn-price{min-height:0}
  .nn-course-archive-toolbar{justify-content:stretch}
  .nn-course-sort{width:100%}
}


/* =========================================================
   v1.0.142 — Compact Standard Course Cards
   Same reusable component, reduced vertical height for Homepage and /courses/.
   New courses inherit this layout automatically.
   ========================================================= */
.nn-standard-course-card .nn-course-body{
  gap:9px!important;
  padding:18px 18px 18px!important;
}
.nn-standard-course-card .nn-badge{
  margin:0 0 2px!important;
  padding:4px 9px!important;
  font-size:11px!important;
}
.nn-standard-course-card .nn-course-body h3{
  font-size:20px!important;
  line-height:1.35!important;
  min-height:calc(1.35em * 2)!important;
  margin:0!important;
}
.nn-standard-course-card .nn-course-summary{
  font-size:13px!important;
  line-height:1.6!important;
  -webkit-line-clamp:3!important;
  min-height:calc(1.6em * 3)!important;
  margin:0!important;
}
.nn-standard-course-card .nn-course-meta{
  flex-wrap:nowrap!important;
  gap:7px!important;
  min-height:20px!important;
  font-size:12px!important;
  overflow:hidden;
  white-space:nowrap;
}
.nn-standard-course-card .nn-course-meta .nn-meta-author{
  overflow:hidden;
  text-overflow:ellipsis;
}
.nn-standard-course-card .nn-course-meta .nn-meta-separator{
  color:#b0a7bb;
  flex:0 0 auto;
}
.nn-standard-course-card .nn-tags{
  min-height:27px!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  overflow:hidden;
}
.nn-standard-course-card .nn-tag{
  padding:4px 8px!important;
  font-size:11px!important;
  white-space:nowrap;
}
.nn-standard-course-card .nn-course-card-footer{
  gap:9px!important;
  padding-top:2px!important;
}
.nn-standard-course-card .nn-price{
  gap:7px!important;
  min-height:34px!important;
  margin:0!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  overflow:visible;
}
.nn-standard-course-card .nn-price .sale{
  font-size:27px!important;
  line-height:1.1!important;
  white-space:nowrap;
}
.nn-standard-course-card .nn-price .sale small{
  font-size:12px!important;
}
.nn-standard-course-card .nn-price .regular{
  font-size:12px!important;
  white-space:nowrap;
}
.nn-standard-course-card .nn-price .save{
  margin-left:auto;
  padding:4px 7px!important;
  font-size:10px!important;
  white-space:nowrap;
}
.nn-standard-course-card .nn-course-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
}
.nn-standard-course-card .nn-course-actions .nn-btn{
  min-height:40px!important;
  padding:9px 8px!important;
  border-radius:10px!important;
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap;
}
.nn-standard-course-card .nn-course-actions .nn-course-primary-action{
  order:2!important;
}
.nn-standard-course-card .nn-course-actions .nn-course-detail-action{
  order:1!important;
}

/* Slightly tighter archive spacing now that the cards are compact. */
.nn-course-archive-main{
  padding-top:26px!important;
  padding-bottom:46px!important;
}
.nn-course-archive-toolbar{
  margin-bottom:18px!important;
}

@media (max-width:760px){
  .nn-standard-course-card .nn-course-body{
    padding:17px 16px 18px!important;
  }
  .nn-standard-course-card .nn-course-body h3,
  .nn-standard-course-card .nn-course-summary,
  .nn-standard-course-card .nn-tags,
  .nn-standard-course-card .nn-price{
    min-height:0!important;
  }
  .nn-standard-course-card .nn-course-meta{
    flex-wrap:wrap!important;
    white-space:normal;
  }
  .nn-standard-course-card .nn-tags{
    flex-wrap:wrap!important;
  }
  .nn-standard-course-card .nn-price{
    flex-wrap:wrap!important;
  }
  .nn-standard-course-card .nn-price .save{
    margin-left:0;
  }
}

@media (max-width:390px){
  .nn-standard-course-card .nn-course-actions{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   v1.0.148 — Front-end Teacher Dashboard
   ========================================================= */
.nn-user-menu__panel .nn-user-menu__teacher{background:#f3edff;color:var(--nn-purple);margin:3px 0}
.nn-teacher-wrap{min-height:calc(100vh - 76px);background:#f7f4fb;padding:28px 18px 48px;color:#342c3d}
.nn-teacher-shell{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.nn-teacher-sidebar{position:sticky;top:88px;background:#fff;border:1px solid #ebe3f5;border-radius:20px;padding:18px;box-shadow:0 12px 35px rgba(76,41,112,.07)}
.nn-teacher-sidebar-head{display:flex;gap:11px;align-items:center;padding:4px 4px 17px;border-bottom:1px solid #eee8f4;margin-bottom:12px}
.nn-teacher-sidebar-head>div:last-child{min-width:0}.nn-teacher-sidebar-head strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nn-teacher-sidebar-head span{display:block;color:#8b8194;font-size:11px;margin-top:2px}
.nn-teacher-avatar,.nn-student-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f1eaff;color:#6326cc;font-weight:900;flex:none}
.nn-teacher-avatar{width:42px;height:42px}.nn-student-avatar{width:46px;height:46px}
.nn-teacher-nav{display:grid;gap:4px}.nn-teacher-nav a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:11px;color:#4a4053;font-weight:700;font-size:14px}.nn-teacher-nav a:hover,.nn-teacher-nav a.is-active{background:#f0e8ff;color:#6424cb}.nn-teacher-nav i{font-style:normal;width:22px;text-align:center;font-size:17px}
.nn-teacher-back{display:block;margin-top:15px;padding:12px 10px 3px;color:#766c7d;font-size:13px;font-weight:700}
.nn-teacher-main{min-width:0}.nn-teacher-mobile-tabs{display:none}
.nn-teacher-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:2px 0 20px}.nn-teacher-page-head h1{font-size:29px;line-height:1.25;margin:4px 0 5px;color:#2f2737}.nn-teacher-page-head p{margin:0;color:#766c7d;line-height:1.7}.nn-teacher-eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.5px;color:#6424cb;background:#efe7ff;border-radius:999px;padding:5px 10px}
.nn-teacher-card{background:#fff;border:1px solid #e9e1f2;border-radius:18px;box-shadow:0 10px 32px rgba(73,36,105,.055)}
.nn-teacher-notice{padding:13px 16px;border-radius:13px;margin-bottom:17px;font-weight:700}.nn-teacher-notice-success{background:#eaf9ef;border:1px solid #bfe8cb;color:#176b38}.nn-teacher-notice-error{background:#fff0f0;border:1px solid #f0c2c2;color:#a12626}
.nn-teacher-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.nn-teacher-stats a{background:#fff;border:1px solid #e8e0f1;border-radius:17px;padding:18px;box-shadow:0 8px 28px rgba(76,41,112,.05);color:#3a3143}.nn-teacher-stats span{display:block;color:#766c7d;font-size:13px;font-weight:700}.nn-teacher-stats strong{display:block;font-size:32px;line-height:1.1;color:#5f25c7;margin:9px 0}.nn-teacher-stats small{color:#7e7486;font-size:11px;font-weight:700}
.nn-teacher-quick{padding:22px}.nn-teacher-quick h2,.nn-teacher-form h2{margin:0 0 16px;font-size:19px;color:#4a2a7e}.nn-teacher-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.nn-teacher-quick-grid>a{display:flex;align-items:center;gap:12px;border:1px solid #e8e0f1;border-radius:14px;padding:15px;color:#3d3346}.nn-teacher-quick-grid b{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f1e9ff;color:#6424cb;font-size:20px}.nn-teacher-quick-grid strong,.nn-teacher-quick-grid small{display:block}.nn-teacher-quick-grid small{color:#82778a;margin-top:3px;line-height:1.45}
.nn-teacher-form{padding:24px;max-width:850px}.nn-teacher-form h2:not(:first-child){margin-top:26px}.nn-teacher-field{margin-bottom:17px}.nn-teacher-field label{display:block;font-weight:800;margin:0 0 7px}.nn-teacher-field em{font-style:normal;color:#c63e3e}.nn-teacher-field input,.nn-teacher-field select,.nn-student-enroll select,.nn-home-limit select,.nn-home-order-label input{width:100%;border:1px solid #d9d0e1;border-radius:11px;background:#fff;padding:11px 13px;min-height:45px;font:inherit;color:#382f41}.nn-teacher-field input:focus,.nn-teacher-field select:focus,.nn-student-enroll select:focus{outline:none;border-color:#7a45dc;box-shadow:0 0 0 3px rgba(111,52,211,.10)}.nn-teacher-field small{display:block;color:#877d8e;line-height:1.5;margin-top:6px}.nn-teacher-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.nn-teacher-form-actions{display:flex;justify-content:flex-end;border-top:1px solid #eee8f4;margin-top:22px;padding-top:19px}
.nn-teacher-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:11px;padding:9px 15px;font-weight:800;font-size:13px;cursor:pointer;border:1px solid transparent;text-decoration:none}.nn-teacher-btn-primary{background:linear-gradient(135deg,#5c20c7,#793be0);color:#fff;border-color:#6428ca}.nn-teacher-btn-outline{background:#fff;color:#6424cb;border-color:#bba2e8}.nn-teacher-btn-success{background:#178b4b;color:#fff;border-color:#178b4b}.nn-teacher-btn-waiting{background:#fff4d7;color:#805700;border-color:#e7bd59;box-shadow:0 1px 0 rgba(128,87,0,.04)}.nn-teacher-btn-waiting:hover{background:#ffedbd;border-color:#d7a83e}
.nn-teacher-search{display:flex;gap:8px;margin-bottom:14px}.nn-teacher-search input{flex:1;min-width:0;border:1px solid #d8cfe0;border-radius:12px;padding:11px 14px;background:#fff;font:inherit}.nn-teacher-search button,.nn-student-enroll button{border:0;border-radius:11px;background:#6427cb;color:#fff;padding:10px 16px;font-weight:800;cursor:pointer}
.nn-teacher-list,.nn-teacher-orders{display:grid;gap:11px}.nn-student-row{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(260px,1.4fr) minmax(210px,.8fr);gap:16px;align-items:center;padding:16px}.nn-student-id{display:flex;align-items:center;gap:11px;min-width:0}.nn-student-id>div:last-child{min-width:0}.nn-student-id strong,.nn-student-id span,.nn-student-id small{display:block;overflow:hidden;text-overflow:ellipsis}.nn-student-id span{font-size:12px;color:#756a7c;margin-top:2px}.nn-student-id small{font-size:10px;color:#9b919f;margin-top:3px}.nn-muted-label{display:block;color:#8b8192;font-size:10px;font-weight:800;margin-bottom:5px}.nn-chip-row{display:flex;gap:5px;flex-wrap:wrap}.nn-chip{display:inline-block;border-radius:999px;background:#ede5ff;color:#5c23bc;padding:5px 8px;font-size:10px;font-weight:800;line-height:1.25}.nn-chip.is-pending{background:#fff2cf;color:#7e5b00}.nn-chip-empty{background:#f1eff3;color:#8b8290}.nn-student-enroll{display:flex;gap:7px}.nn-student-enroll select{min-height:40px;padding:8px 10px;font-size:12px}.nn-student-enroll button{white-space:nowrap;padding:8px 11px;font-size:11px}.nn-teacher-empty{padding:28px;text-align:center;color:#7e7485}
.nn-order-row{padding:17px}.nn-order-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.nn-order-top>div:first-child{min-width:0}.nn-order-number{display:block;color:#6629ca;font-size:11px;font-weight:900;margin-bottom:4px}.nn-order-top strong,.nn-order-top small{display:block}.nn-order-top small{color:#7f7587;margin-top:2px}.nn-order-amount{font-weight:900;font-size:19px;color:#392a47;white-space:nowrap}.nn-order-meta{display:flex;gap:15px;flex-wrap:wrap;margin:13px 0;padding:10px 0;border-top:1px solid #f0ebf4;border-bottom:1px solid #f0ebf4;color:#6f6476;font-size:12px}.nn-status-pill{display:inline-block;border-radius:999px;padding:4px 7px;background:#f0edf3;color:#655b6b;font-size:10px;font-weight:900}.nn-status-paid{background:#e5f8eb;color:#1b773e}.nn-status-unpaid,.nn-status-pending{background:#fff0cf;color:#855d00}.nn-order-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.nn-order-actions form{margin:0}.nn-no-slip{color:#9b919f;font-size:12px}.nn-paid-done{color:#17733e;background:#e8f8ed;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:900}
.nn-home-course-form{padding:20px}.nn-home-limit{display:flex;align-items:center;gap:12px;padding:0 0 16px;border-bottom:1px solid #eee8f4}.nn-home-limit label{font-weight:800}.nn-home-limit select{width:auto;min-width:115px}.nn-home-course-list{display:grid}.nn-home-course-item{display:grid;grid-template-columns:48px 82px minmax(0,1fr) 105px;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid #f0ebf4}.nn-home-switch{position:relative;display:inline-block;width:44px;height:24px}.nn-home-switch input{opacity:0;width:0;height:0}.nn-home-switch span{position:absolute;inset:0;border-radius:999px;background:#b9b2bf;cursor:pointer;transition:.18s}.nn-home-switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}.nn-home-switch input:checked+span{background:#692bce}.nn-home-switch input:checked+span:before{transform:translateX(20px)}.nn-home-thumb{width:82px;height:48px;border-radius:8px;overflow:hidden;background:#f0edf2}.nn-home-thumb img{width:100%;height:100%;object-fit:cover}.nn-home-title strong,.nn-home-title small{display:block}.nn-home-title small{color:#8d8393;margin-top:3px;font-size:10px}.nn-home-order-label{display:flex;align-items:center;gap:5px;color:#756a7c;font-size:10px;font-weight:800}.nn-home-order-label input{width:58px;min-height:38px;padding:6px;text-align:center}
@media(max-width:980px){.nn-teacher-shell{grid-template-columns:210px minmax(0,1fr)}.nn-teacher-stats{grid-template-columns:1fr 1fr}.nn-teacher-quick-grid{grid-template-columns:1fr}.nn-student-row{grid-template-columns:1fr}.nn-student-courses{padding-left:57px}.nn-student-enroll{padding-left:57px}}
@media(max-width:760px){.nn-teacher-wrap{padding:14px 10px 34px}.nn-teacher-shell{display:block}.nn-teacher-sidebar{display:none}.nn-teacher-mobile-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 10px;margin-bottom:10px;scrollbar-width:none}.nn-teacher-mobile-tabs::-webkit-scrollbar{display:none}.nn-teacher-mobile-tabs a{white-space:nowrap;border:1px solid #dfd3eb;background:#fff;border-radius:999px;padding:8px 11px;color:#655a6d;font-size:11px;font-weight:800}.nn-teacher-mobile-tabs a.is-active{background:#692bce;border-color:#692bce;color:#fff}.nn-teacher-page-head{align-items:flex-start;flex-direction:column;margin-bottom:15px}.nn-teacher-page-head h1{font-size:23px}.nn-teacher-page-head p{font-size:13px}.nn-teacher-stats{gap:9px}.nn-teacher-stats a{padding:14px}.nn-teacher-stats strong{font-size:25px}.nn-teacher-form{padding:17px}.nn-teacher-grid2{grid-template-columns:1fr;gap:0}.nn-teacher-search input{font-size:13px}.nn-teacher-search button{padding:9px 12px}.nn-student-row{padding:14px}.nn-student-courses,.nn-student-enroll{padding-left:0}.nn-order-top{align-items:flex-start}.nn-order-amount{font-size:16px}.nn-order-meta{display:grid;gap:6px}.nn-order-actions{align-items:stretch}.nn-order-actions>*{width:100%}.nn-order-actions .nn-teacher-btn,.nn-order-actions form button{width:100%}.nn-home-course-form{padding:14px}.nn-home-limit{align-items:flex-start;flex-direction:column}.nn-home-course-item{grid-template-columns:42px 62px minmax(0,1fr);gap:8px}.nn-home-thumb{width:62px;height:42px}.nn-home-order-label{grid-column:3;justify-content:flex-start}.nn-home-title strong{font-size:12px}}

/* v1.0.150 — Teacher payment review viewer */
html.nn-slip-viewer-open,html.nn-slip-viewer-open body{overflow:hidden}
.nn-teacher-slip-viewer{position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;background:rgba(17,24,39,.78);padding:14px;box-sizing:border-box}
.nn-teacher-slip-viewer.is-open{display:flex}
.nn-teacher-slip-viewer__panel{position:relative;width:min(1180px,97vw);height:min(94vh,980px);background:#111827;border-radius:14px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.nn-teacher-slip-viewer__close{position:absolute;z-index:8;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.96);color:#171717;font-size:30px;line-height:42px;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.24)}
.nn-teacher-slip-viewer__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111827;color:#fff;font-size:15px;z-index:2}
.nn-teacher-slip-viewer__image-wrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;overflow:hidden;background:#111827}
.nn-teacher-slip-viewer__image-wrap.is-visible{display:flex}
.nn-teacher-slip-viewer__image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0;padding:0}
.nn-teacher-slip-viewer__frame{display:none;width:100%;height:100%;border:0;background:#fff}
@media(max-width:760px){.nn-teacher-slip-viewer{padding:0}.nn-teacher-slip-viewer__panel{width:100vw;height:100dvh;max-height:none;border-radius:0}.nn-teacher-slip-viewer__close{top:9px;right:9px}}

/* v1.0.150 — clearer teacher student enrollment controls */
.nn-student-all-courses{font-size:11px;font-weight:800;color:#16824b;background:#eaf8f0;border:1px solid #cdeedb;border-radius:10px;padding:10px 12px;text-align:center}

/* v1.0.151 — separate Members from Students in Teacher Dashboard */
.nn-teacher-stats-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.nn-teacher-definition{margin:-4px 0 14px;padding:12px 14px;border:1px solid #e5d8f7;background:#fbf8ff;border-radius:14px;color:#5f5369;font-size:12px;line-height:1.65}
.nn-teacher-definition strong{color:#5f25c7}
.nn-chip-member{background:#fff4d8!important;color:#8b6300!important;border:1px solid #f4d58a}
@media(max-width:1180px){.nn-teacher-stats-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.nn-teacher-stats-five{grid-template-columns:1fr 1fr}}

/* v1.0.152 — suppress duplicate Tutor LMS default English admin new-order email */

/* v1.0.153: email deep links focus the requested Teacher Dashboard order. */
.nn-order-row.is-focused{outline:3px solid rgba(101,43,211,.24);box-shadow:0 0 0 6px rgba(101,43,211,.08),0 14px 34px rgba(72,38,114,.12)}


/* v1.0.154 — dedicated single-order review mode from teacher emails */
.nn-order-single-head{align-items:flex-end;gap:18px}
.nn-teacher-orders-single{max-width:860px}
.nn-order-single-card{border:2px solid rgba(99,52,211,.22);box-shadow:0 18px 48px rgba(77,38,151,.12)}
.nn-order-single-card .nn-order-top{padding-bottom:16px}
.nn-order-review-note{margin:16px 0 4px;padding:14px 16px;border-radius:14px;background:#fff8e8;border:1px solid #f4d58a;color:#6a4b00;font-weight:700}
.nn-order-review-note-success{background:#e9f8ee;border-color:#a9dfb9;color:#176b39}
@media (max-width:760px){.nn-order-single-head{align-items:flex-start}.nn-order-single-head>a{width:100%;justify-content:center}.nn-teacher-orders-single{max-width:none}.nn-order-single-card .nn-order-actions{align-items:stretch}.nn-order-single-card .nn-order-actions>*{width:100%}.nn-order-single-card .nn-order-actions form button{width:100%}}


/* v1.0.155 — separate payment status from confirmation action */
.nn-payment-confirm-wrap{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.nn-payment-waiting-text{display:inline-flex;align-items:center;gap:6px;color:#855d00;background:#fff0cf;border:1px solid #f1d38b;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900;line-height:1.2}
.nn-payment-waiting-text:before{content:"●";font-size:8px;color:#d99a00}
.nn-confirm-payment-btn{min-width:160px}
@media (max-width:640px){.nn-payment-confirm-wrap{width:100%;align-items:stretch}.nn-payment-waiting-text{justify-content:center}.nn-payment-confirm-wrap form,.nn-confirm-payment-btn{width:100%}}

.nn-payment-awaiting-slip{display:inline-flex;align-items:center;gap:6px;color:#7b6b38;background:#f6f2e8;border:1px solid #ded4b8;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900;line-height:1.2}
.nn-payment-awaiting-slip:before{content:"●";font-size:8px;color:#b9a36c}


/* v1.0.161 — Members: improve payment-warning readability */
.nn-member-row.has-pending-order{border-color:#ead6a1}
.nn-member-order-warning{margin-top:10px;padding:13px 14px;border-radius:12px;font-size:13px;line-height:1.55}
.nn-member-order-warning strong,.nn-member-order-warning span,.nn-member-order-warning a{display:block}
.nn-member-order-warning strong{font-size:15px;line-height:1.4;margin-bottom:4px}
.nn-member-order-warning span{color:#6f624d;font-size:13px;margin-bottom:7px}
.nn-member-order-warning a{font-size:13px;font-weight:900;text-decoration:none}
.nn-member-order-warning.is-unpaid{background:#faf7ee;border:1px solid #e5d9bc;color:#6e5a27}
.nn-member-order-warning.is-unpaid a{color:#6a4f0a}
.nn-member-order-warning.is-review{background:#fff3d6;border:1px solid #efca70;color:#775200}
.nn-member-order-warning.is-review a{color:#6424cb}
.nn-student-enroll{align-items:flex-start;flex-wrap:wrap}
.nn-student-enroll select{flex:1;min-width:135px}
.nn-member-direct-note{flex-basis:100%;display:block;color:#7b5b13;font-size:12.5px;font-weight:650;line-height:1.55;margin-top:7px;max-width:320px}
@media(max-width:980px){.nn-member-order-warning{margin-left:0}.nn-member-direct-note{padding-left:0}}

/* =========================================================
   v1.0.166 — Student billing waiting states (fixed CSS)
   Amber/yellow = waiting for an action or review.
   Green remains reserved for successfully paid orders.
   ========================================================= */
.nn-student-payment-waiting,
body .nn-student-payment-waiting {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff0cf !important;
  color: #855d00 !important;
  border: 1px solid #f0cf7a !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.nn-student-payment-waiting::before {
  content: "●";
  color: #d99a00;
  font-size: 8px;
  margin-right: 6px;
}


/* =========================================================
   v1.0.167 — Teacher Dashboard built-in usage guide
   ========================================================= */
.nn-guide-head{margin-bottom:14px}
.nn-guide-hero{display:flex;align-items:flex-start;gap:15px;padding:18px 20px;margin-bottom:14px;background:linear-gradient(135deg,#f6f0ff 0%,#fff 70%);border-color:#dfd0f7}
.nn-guide-hero-icon{flex:0 0 42px;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#e9f8ef;color:#15803d;font-size:21px;font-weight:900}
.nn-guide-hero strong{display:block;font-size:17px;color:#3d176f;margin-bottom:3px}.nn-guide-hero p{margin:0;color:#5f5369;font-size:14px;line-height:1.75}
.nn-guide-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px;padding:14px;border:1px solid #e7dbf3;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(75,42,115,.05)}
.nn-guide-flow>div{flex:1;min-width:0;text-align:center;padding:10px 8px;border-radius:14px;background:#faf7ff}.nn-guide-flow>div.is-done{background:#edf9f1}.nn-guide-flow>div span{display:flex;width:28px;height:28px;border-radius:999px;background:#6b2bd1;color:#fff;align-items:center;justify-content:center;margin:0 auto 5px;font-size:12px;font-weight:900}.nn-guide-flow>div.is-done span{background:#18864b}.nn-guide-flow b,.nn-guide-flow small{display:block}.nn-guide-flow b{font-size:12px;color:#3b2f44}.nn-guide-flow small{font-size:10px;color:#8b8092;margin-top:2px}.nn-guide-flow>i{font-style:normal;color:#b8a9c7;font-weight:900}
.nn-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.nn-guide-section{padding:20px}.nn-guide-wide{margin-bottom:14px}.nn-guide-section-title{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}.nn-guide-section-title>span{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f0e8ff;color:#6425c4;font-weight:900;font-size:17px}.nn-guide-section-title h2{margin:0;color:#2f173f;font-size:18px;line-height:1.35}.nn-guide-section-title p{margin:2px 0 0;color:#8a7f90;font-size:12px;line-height:1.5}.nn-guide-section>p{margin:7px 0;color:#62566a;font-size:14px;line-height:1.78}.nn-guide-section ul{margin:8px 0 0;padding-left:20px}.nn-guide-section li{margin:5px 0;color:#5f5369;font-size:14px;line-height:1.7}.nn-guide-section b{color:#3a2149}
.nn-guide-note{margin-top:12px;padding:12px 14px;border-radius:13px;font-size:13px;line-height:1.7;border:1px solid}.nn-guide-note.is-warning{background:#fff7df;border-color:#f3cf69;color:#755400}.nn-guide-note.is-danger{background:#fff1f1;border-color:#f0b5b5;color:#8b2d2d}.nn-guide-note.is-info{background:#f5f1ff;border-color:#d7c5f5;color:#58359a}
.nn-guide-status-table{display:grid;gap:9px;margin-top:8px}.nn-guide-status-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:center;padding:11px 12px;border:1px solid #eee7f3;border-radius:13px;background:#fff}.nn-guide-status-row p{margin:0;font-size:13px;color:#655a6d;line-height:1.65}.nn-guide-pill{display:inline-flex;width:max-content;max-width:100%;align-items:center;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:900}.nn-guide-pill.is-wait{background:#fff2cf;border:1px solid #efc254;color:#7b5800}.nn-guide-pill.is-paid{background:#e8f8ee;border:1px solid #b7e4c7;color:#13763e}
.nn-guide-steps{list-style:none;margin:5px 0 0;padding:0;display:grid;gap:9px}.nn-guide-steps li{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:13px;background:#faf8fc}.nn-guide-steps li>span{flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#6b2bd1;color:#fff;font-size:12px;font-weight:900}.nn-guide-steps b{display:block;font-size:14px}.nn-guide-steps p{margin:2px 0 0;color:#746979;font-size:13px;line-height:1.6}
.nn-guide-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.nn-guide-choice{padding:14px;border:1px solid #e9e1ef;border-radius:14px;background:#fcfbfd}.nn-guide-choice>b,.nn-guide-choice>strong,.nn-guide-choice>small{display:block}.nn-guide-choice>b{font-size:13px;color:#3b2b43}.nn-guide-choice>span{display:inline-block;margin:6px 0 4px;padding:3px 8px;border-radius:999px;background:#eee6fb;color:#6126bd;font-size:10px;font-weight:900}.nn-guide-choice>strong{font-size:14px;color:#5d22ba}.nn-guide-choice>small{margin-top:4px;color:#817587;font-size:12px;line-height:1.55}
.nn-guide-section details{border-top:1px solid #eee7f3;padding:11px 0}.nn-guide-section details:first-of-type{border-top:0}.nn-guide-section summary{cursor:pointer;font-weight:800;color:#4d2a61;font-size:14px}.nn-guide-section details p{margin:8px 0 0;padding-left:2px;color:#6d6174;font-size:13px;line-height:1.7}.nn-guide-footer{padding:16px 18px;border-color:#cbe9d4;background:#f2fbf5;margin-bottom:4px}.nn-guide-footer strong{display:block;color:#166534;font-size:15px}.nn-guide-footer p{margin:3px 0 0;color:#52665a;font-size:13px;line-height:1.7}
@media(max-width:980px){.nn-guide-grid,.nn-guide-choice-grid{grid-template-columns:1fr}.nn-guide-flow{overflow-x:auto;justify-content:flex-start}.nn-guide-flow>div{min-width:125px}.nn-guide-flow>i{flex:0 0 auto}.nn-guide-status-row{grid-template-columns:1fr;gap:7px}}
@media(max-width:760px){.nn-guide-section{padding:16px}.nn-guide-hero{padding:15px}.nn-guide-hero strong{font-size:15px}.nn-guide-status-row p,.nn-guide-section>p,.nn-guide-section li{font-size:13px}.nn-guide-section-title h2{font-size:17px}}

/* Teacher Guide v1.0.169 FINAL: two selling routes + login guidance */
.nn-guide-routes{padding-bottom:14px}.nn-guide-route{border:1px solid #e7dbf3;border-radius:16px;background:#fff;margin:10px 0;overflow:hidden}.nn-guide-route[open]{border-color:#cdb3f2;box-shadow:0 8px 22px rgba(83,42,126,.07)}.nn-guide-route>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px 16px;background:#fcfaff}.nn-guide-route>summary::-webkit-details-marker{display:none}.nn-guide-route[open]>summary{background:#f7f1ff;border-bottom:1px solid #e7dbf3}.nn-guide-route-no{display:flex;width:34px;height:34px;border-radius:999px;background:#6b2bd1;color:#fff;align-items:center;justify-content:center;font-weight:900}.nn-guide-route summary b,.nn-guide-route summary small{display:block}.nn-guide-route summary b{font-size:15px;color:#351744}.nn-guide-route summary small{font-size:12px;color:#776a7e;margin-top:3px;line-height:1.55}.nn-guide-route summary em{font-style:normal;padding:5px 9px;border-radius:999px;background:#eee6fb;color:#6126bd;font-size:10px;font-weight:900;white-space:nowrap}.nn-guide-route-body{padding:4px 16px 16px}.nn-guide-route-body .nn-guide-steps{margin-top:12px}.nn-guide-route-body .nn-guide-note{margin-top:12px}
@media(max-width:760px){.nn-guide-route>summary{grid-template-columns:38px minmax(0,1fr);padding:13px}.nn-guide-route summary em{grid-column:2;width:max-content}.nn-guide-route-body{padding:2px 12px 14px}}

/* v1.0.170 - Teacher Guide: visually distinguish the two selling workflows */
.nn-guide-route-live{border-color:#f4d38a;background:#fffdf8}.nn-guide-route-live>summary{background:#fff9eb}.nn-guide-route-live[open]{border-color:#e6a92d;box-shadow:0 8px 24px rgba(183,121,0,.12)}.nn-guide-route-live[open]>summary{background:#fff1c9;border-bottom-color:#f0cd77}.nn-guide-route-live .nn-guide-route-no{background:#c47a00}.nn-guide-route-live summary b{color:#6f4300}.nn-guide-route-live summary em{background:#fff0c2;color:#8a5700}.nn-guide-route-live[open] .nn-guide-route-body{background:#fffdf7}
.nn-guide-route-web{border-color:#bcdfe8;background:#fbfeff}.nn-guide-route-web>summary{background:#f3fbfd}.nn-guide-route-web[open]{border-color:#4aa6b8;box-shadow:0 8px 24px rgba(33,124,143,.12)}.nn-guide-route-web[open]>summary{background:#dff5f8;border-bottom-color:#9dd3dd}.nn-guide-route-web .nn-guide-route-no{background:#16869d}.nn-guide-route-web summary b{color:#07596a}.nn-guide-route-web summary em{background:#dff5f8;color:#087287}.nn-guide-route-web[open] .nn-guide-route-body{background:#fbfeff}

/* v1.0.171 - Teacher Guide: step number colors follow each workflow */
.nn-guide-route-live .nn-guide-steps li>span{background:#c47a00;color:#fff}
.nn-guide-route-web .nn-guide-steps li>span{background:#16869d;color:#fff}

/* ==========================================================
   v1.0.172 — Course Documents (separate from Tutor progress)
   ========================================================== */
.nn-course-documents-panel{
  margin:14px 14px 16px;
  border:1px solid #dce9f6;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fcff 0%,#fff 100%);
  overflow:hidden;
  box-shadow:0 5px 18px rgba(32,78,120,.07);
  color:#26364a;
}
.nn-course-documents-panel__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border-bottom:1px solid #e4eef7;
  background:#f1f8ff;
}
.nn-course-documents-panel__head-icon{font-size:20px;line-height:1}
.nn-course-documents-panel__head>div{min-width:0}
.nn-course-documents-panel__head strong{display:block;font-size:13px;line-height:1.45;color:#173b61}
.nn-course-documents-panel__head small{display:block;margin-top:2px;font-size:10px;line-height:1.4;color:#718399}
.nn-course-documents-panel__list{display:grid}
.nn-course-documents-panel__item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  padding:11px 12px;
  border-bottom:1px solid #edf2f7;
}
.nn-course-documents-panel__item:last-child{border-bottom:0}
.nn-course-documents-panel__badge{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#e9f3ff;
  color:#24669f;
  font-size:9px;
  font-weight:900;
  letter-spacing:.3px;
}
.nn-course-documents-panel__info{min-width:0}
.nn-course-documents-panel__info strong{
  display:block;
  font-size:11px;
  line-height:1.45;
  color:#27364a;
  overflow-wrap:anywhere;
}
.nn-course-documents-panel__info small{display:block;margin-top:2px;color:#8995a4;font-size:9px}
.nn-course-documents-panel__actions{
  grid-column:2;
  display:flex;
  gap:6px;
  margin-top:2px;
}
.nn-course-documents-panel__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:5px 9px;
  border-radius:8px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  text-decoration:none!important;
  transition:.18s ease;
}
.nn-course-documents-panel__open{border:1px solid #bdd8ef;color:#23618f!important;background:#fff}
.nn-course-documents-panel__download{border:1px solid #2f78b6;color:#fff!important;background:#2f78b6}
.nn-course-documents-panel__actions a:hover{transform:translateY(-1px);filter:brightness(.98)}

/* If Tutor changes the sidebar DOM, JS falls back to a main-content resource card. */
.nn-course-documents-panel--main{
  max-width:860px;
  margin:18px auto;
}
.nn-course-documents-panel--main .nn-course-documents-panel__item{
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
}
.nn-course-documents-panel--main .nn-course-documents-panel__badge{width:42px;height:42px}
.nn-course-documents-panel--main .nn-course-documents-panel__actions{grid-column:auto;margin:0}
.nn-course-documents-panel--main .nn-course-documents-panel__info strong{font-size:13px}
.nn-course-documents-panel--main .nn-course-documents-panel__info small{font-size:10px}

@media(max-width:767px){
  .nn-course-documents-panel{margin:10px 10px 14px}
  .nn-course-documents-panel--main{margin:12px 10px}
  .nn-course-documents-panel--main .nn-course-documents-panel__item{grid-template-columns:36px minmax(0,1fr)}
  .nn-course-documents-panel--main .nn-course-documents-panel__badge{width:36px;height:36px}
  .nn-course-documents-panel--main .nn-course-documents-panel__actions{grid-column:2}
}

/* =========================================================
   v1.0.173 — Lesson player > เพิ่มเติม > เอกสารประกอบการเรียน
   Course documents are a separate resource view, never lessons.
   ========================================================= */

/* Keep only our resource view visible while it is selected. */
.nn-course-documents-host--active > :not(.nn-course-documents-view){
  display:none!important;
}

.nn-course-documents-host--active > .nn-course-documents-view{
  display:block!important;
}

.nn-course-documents-view{
  display:none!important;
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:28px 30px 36px;
  background:#fff;
  border:1px solid #e8edf4;
  border-radius:14px;
  box-shadow:0 5px 22px rgba(26,50,82,.055);
  outline:none;
}

.nn-course-documents-view__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid #edf1f6;
}

.nn-course-documents-view__title-wrap{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.nn-course-documents-view__icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:12px;
  background:#f0f6ff;
  font-size:24px;
  line-height:1;
}

.nn-course-documents-view__title-wrap h2{
  margin:0!important;
  font-size:21px!important;
  line-height:1.35!important;
  color:#18283c!important;
  font-weight:700!important;
}

.nn-course-documents-view__title-wrap p{
  margin:4px 0 0!important;
  font-size:13px!important;
  line-height:1.55!important;
  color:#6d7d90!important;
}

.nn-course-documents-view__back{
  flex:0 0 auto;
  border:1px solid #d8e0ea;
  border-radius:9px;
  padding:9px 13px;
  background:#fff;
  color:#41546b;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.nn-course-documents-view__back:hover{background:#f7f9fc}

.nn-course-documents-view__summary{
  margin:18px 0 12px;
  padding:10px 13px;
  border-radius:9px;
  background:#f8fafc;
  color:#718096;
  font-size:11px;
  line-height:1.5;
}

.nn-course-documents-view__list{
  display:grid;
  gap:12px;
}

.nn-course-documents-view__item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:13px 14px;
  border:1px solid #e3e9f1;
  border-radius:12px;
  background:#fff;
}

.nn-course-documents-view__badge{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  background:#fff2f2;
  color:#d73c3c;
  border:1px solid #ffdada;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
}

.nn-course-documents-view__info{min-width:0}
.nn-course-documents-view__info strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#24364c;
  font-size:14px;
  line-height:1.45;
  font-weight:650;
}
.nn-course-documents-view__info small{
  display:block;
  margin-top:4px;
  color:#8a98a9;
  font-size:11px;
}

.nn-course-documents-view__actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

.nn-course-documents-view__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 13px;
  border-radius:9px;
  text-decoration:none!important;
  font-size:12px;
  font-weight:600;
  line-height:1;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.nn-course-documents-view__actions a:hover{transform:translateY(-1px)}
.nn-course-documents-view__open{
  border:1px solid #cad9ea;
  background:#fff;
  color:#315f90!important;
}
.nn-course-documents-view__download{
  border:1px solid #315f90;
  background:#315f90;
  color:#fff!important;
  box-shadow:0 3px 8px rgba(49,95,144,.16);
}

@media(max-width:780px){
  .nn-course-documents-view{padding:20px 16px 26px;border-radius:10px}
  .nn-course-documents-view__top{align-items:flex-start;flex-direction:column}
  .nn-course-documents-view__back{align-self:flex-start}
  .nn-course-documents-view__item{grid-template-columns:44px minmax(0,1fr)}
  .nn-course-documents-view__badge{width:42px;height:42px}
  .nn-course-documents-view__actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
}


/* =========================================================
   v1.0.175 — Course documents as a native Tutor Learning Area subpage
   ========================================================= */
.nn-course-documents-subpage{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:8px 0 32px;
}
.nn-course-documents-subpage__header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 18px;
}
.nn-course-documents-subpage__icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f1f6ff;
  font-size:25px;
}
.nn-course-documents-subpage__header h2{
  margin:0 0 4px;
  font-size:24px;
  line-height:1.35;
  color:#17233c;
}
.nn-course-documents-subpage__header p{
  margin:0;
  color:#68758a;
  font-size:14px;
  line-height:1.65;
}
.nn-course-documents-subpage__summary{
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid #e5eaf1;
  border-radius:10px;
  background:#fafbfd;
  color:#5e6b7f;
  font-size:13px;
}
.nn-course-documents-subpage__list{
  display:grid;
  gap:12px;
}
.nn-course-documents-subpage__item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid #e5eaf1;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(22,39,66,.045);
}
.nn-course-documents-subpage__badge{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f7f1ff;
  color:#6a35c5;
  font-weight:800;
  font-size:12px;
}
.nn-course-documents-subpage__info{min-width:0}
.nn-course-documents-subpage__info strong{
  display:block;
  color:#1d2a3f;
  font-size:15px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.nn-course-documents-subpage__info small{
  display:block;
  margin-top:4px;
  color:#8792a4;
  font-size:12px;
}
.nn-course-documents-subpage__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nn-course-documents-subpage__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px 13px;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
  text-decoration:none!important;
  transition:transform .15s ease,filter .15s ease;
}
.nn-course-documents-subpage__actions a:hover{transform:translateY(-1px)}
.nn-course-documents-subpage__open{
  border:1px solid #cbd7e6;
  background:#fff;
  color:#385777!important;
}
.nn-course-documents-subpage__download{
  border:1px solid #5c36c6;
  background:#5c36c6;
  color:#fff!important;
}
.nn-course-documents-subpage__empty{
  padding:28px 18px;
  border:1px dashed #ccd5e1;
  border-radius:12px;
  text-align:center;
  color:#718096;
  background:#fbfcfe;
}
@media(max-width:767px){
  .nn-course-documents-subpage{padding:4px 0 24px}
  .nn-course-documents-subpage__header h2{font-size:20px}
  .nn-course-documents-subpage__item{grid-template-columns:44px minmax(0,1fr);padding:13px;gap:11px}
  .nn-course-documents-subpage__badge{width:44px;height:44px}
  .nn-course-documents-subpage__actions{grid-column:2;justify-content:flex-start}
}

/* =========================================================
   v1.0.177 — Course documents desktop balance tuning
   Visual-only: center the document panel more comfortably
   inside the Tutor Learning Area on desktop. Mobile unchanged.
   ========================================================= */
@media (min-width: 992px){
  .nn-course-documents-subpage{
    width:min(860px, calc(100% - 64px));
    max-width:860px;
    margin:clamp(82px, 12vh, 118px) auto 0;
    padding:0 0 36px;
  }
}

/* =========================================================
   v1.0.179 — Lesson video desktop vertical balance
   Visual-only: move video lessons substantially lower on desktop
   so the player sits more comfortably in the main learning area.
   Mobile/tablet and Course Documents layout remain unchanged.
   ========================================================= */
@media (min-width: 992px){
  .tutor-learning-area-container .tutor-lesson-content:has(.tutor-lesson-video-wrapper){
    margin-top:clamp(105px, 14vh, 138px);
  }
}



/* =========================================================
   v1.0.181 — Video Lesson Theater Mode
   Visual-only. Applies ONLY when the current Tutor LMS lesson
   actually contains a video player. The learning content area
   becomes black on desktop and mobile so the video is viewed
   in a darker, theater-like environment.
   Sidebar/header and all non-video pages stay unchanged.
   ========================================================= */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper),
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) > .tutor-learning-area-container,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content-tab,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer{
  background:#111318 !important;
}

/* Keep the whole main viewing canvas dark around the player. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper){
  color:#f5f5f5;
}

/* Navigation actions remain readable against the black theater area. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer > a,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer .tutor-btn-ghost{
  color:#fff !important;
}

/* If a video lesson also contains lesson text/tabs, keep it legible. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content p,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content li,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h1,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h2,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h3,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h4,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h5,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content h6{
  color:#f5f5f5;
}


/* =========================================================
   v1.0.182 — Video Theater navigation polish
   Visual-only. Video lessons only.
   - Keep the entire viewing canvas black, including mobile tab/content gaps.
   - Move "Mark as Complete" to the left side of the footer.
   - Render Previous/Next as clear navigation buttons instead of plain text.
   ========================================================= */

/* Some Tutor tab/content children carry their own light background.
   Make those layers inherit the theater black only on lessons with video. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content-tab,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content-tab > *,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content > *,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tab,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tab-item{
  background-color:#111318 !important;
}

/* Footer layout: completion action starts from the left,
   lesson navigation stays grouped on the right. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson]{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > form{
  order:1 !important;
  margin:0 auto 0 0 !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > a:first-of-type{
  order:2 !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > a:last-of-type{
  order:3 !important;
}

/* Make Previous / Next unmistakably clickable while keeping them secondary
   to the lesson-complete action. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > a{
  min-height:40px !important;
  padding:8px 14px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-decoration:none !important;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > a:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:#fff !important;
  transform:translateY(-1px);
}

/* Keep the completion control compact and clearly anchored to the left. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
  margin:0 !important;
}

@media (max-width:767px){
  /* Remove the remaining white content block seen below the video on mobile. */
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content,
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-lesson-content-tab,
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content,
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-tabs-content > *{
    background:#111318 !important;
  }

  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson]{
    gap:8px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper) .tutor-learning-area-footer[data-lesson] > a{
    min-height:38px !important;
    padding:7px 10px !important;
    border-radius:9px !important;
    font-size:13px !important;
  }
}


/* =========================================================
   v1.0.183 — Video Theater full-canvas mobile gap fix
   Visual-only. Video lessons only.
   Tutor LMS keeps the Learning Area body as a separate surface;
   on mobile that parent surface can remain white between the
   video content and the fixed lesson footer. Darken that parent
   canvas too, while explicitly preserving the header/sidebar.
   ========================================================= */
.tutor-learning-area:has(.tutor-lesson-video-wrapper),
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-area-body,
.tutor-learning-area-body:has(.tutor-lesson-video-wrapper),
.tutor-learning-area-body:has(.tutor-lesson-video-wrapper) > .tutor-learning-area-content,
.tutor-learning-area-body:has(.tutor-lesson-video-wrapper) .tutor-learning-area-container{
  background-color:#111318 !important;
}

/* Keep navigation surfaces light/readable; only the viewing stage is dark. */
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-header,
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-header-inner,
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-sidebar,
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-sidebar-curriculum,
.tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-sidebar-pages{
  background-color:#fff !important;
}

@media (max-width:767px){
  /* The empty vertical space belongs to the Learning Area body rather than
     the lesson tab itself. Ensure the whole viewport stage stays black. */
  .tutor-learning-area:has(.tutor-lesson-video-wrapper) .tutor-learning-area-body,
  .tutor-learning-area-body:has(.tutor-lesson-video-wrapper),
  .tutor-learning-area-body:has(.tutor-lesson-video-wrapper) > .tutor-learning-area-content,
  .tutor-learning-area-body:has(.tutor-lesson-video-wrapper) .tutor-learning-area-container,
  .tutor-learning-area-body:has(.tutor-lesson-video-wrapper) .tutor-lesson-content{
    background:#111318 !important;
  }
}

/* =========================================================
   v1.0.185 — Video Theater navigation priority swap
   Visual-only. Video lessons only.
   - Previous / Next become the primary light navigation buttons.
   - Mark as Complete becomes a secondary dark outline action.
   - Keeps the v1.0.184 charcoal theater canvas and layout unchanged.
   ========================================================= */

/* Primary navigation: brighter, easier to scan and tap. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] > a{
  background:#eef3ff !important;
  border-color:#d8e2ff !important;
  color:#3f5bd8 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.12) !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] > a:hover{
  background:#dfe8ff !important;
  border-color:#c6d4ff !important;
  color:#2f49c4 !important;
}

/* Secondary completion action: quieter outline button on the theater canvas. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  color:#f5f7fb !important;
  box-shadow:none !important;
  font-weight:600 !important;
}
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button:hover{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.85) !important;
  color:#fff !important;
}

/* Keep icons/check marks readable inside the secondary completion button. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button i,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button svg{
  color:inherit !important;
  fill:currentColor !important;
}


/* =========================================================
   v1.0.186 — Clear check mark for "Mark as Complete"
   Visual-only. Video lessons only.
   - Replaces Tutor LMS' ambiguous completion icon with a clear ✓.
   - Keeps button behavior and all lesson logic unchanged.
   ========================================================= */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button > i,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button > svg{
  display:none !important;
}

.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button::after{
  content:"\2713" !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:currentColor !important;
  transform:none !important;
}


/* =========================================================
   v1.0.187 — Complete button state + alignment fix
   Visual-only. Video lessons only.
   - Centers the label and check mark as one visual group.
   - Gives the completed/disabled state a subtle success treatment.
   - Keeps lesson navigation visually primary.
   ========================================================= */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:144px !important;
  text-align:center !important;
}

/* Tutor gives the label span full width; make it size to its text so the
   label + check are centered together instead of the icon sitting off-axis. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button > span{
  width:auto !important;
  flex:0 0 auto !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1.2 !important;
}

.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button::after{
  margin-left:0 !important;
  flex:0 0 auto !important;
}

/* Tutor LMS adds .completed and disabled after the lesson is completed.
   Use a calm success state: clearly different, but still quieter than
   Previous/Next navigation. */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button.completed,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button[disabled].completed{
  background:rgba(34,197,94,.11) !important;
  border-color:rgba(74,222,128,.72) !important;
  color:#bbf7d0 !important;
  opacity:1 !important;
  cursor:default !important;
}

.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button.completed:hover,
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button[disabled].completed:hover{
  background:rgba(34,197,94,.11) !important;
  border-color:rgba(74,222,128,.72) !important;
  color:#bbf7d0 !important;
  transform:none !important;
}

@media (max-width:767px){
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
    min-width:138px !important;
  }
}

/* =========================================================
   v1.0.188 — Complete button inner-content centering
   Visual-only. Video lessons only.
   - Keeps the button itself in the exact same footer position.
   - Centers the label + ✓ as a single group inside the button.
   - Uses balanced outer grid tracks so the icon cannot pull the
     visual group toward either side.
   ========================================================= */
.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr) !important;
  column-gap:8px !important;
  align-items:center !important;
  justify-items:center !important;
  text-align:center !important;
}

.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button > span{
  grid-column:2 !important;
  justify-self:center !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  text-align:center !important;
}

.tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
.tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button::after{
  grid-column:3 !important;
  justify-self:center !important;
  margin:0 !important;
}



/* =========================================================
   v1.0.190 — Mobile video lesson actions: two-row layout
   Visual-only. Video lessons only, mobile only.
   - Gives the long completion action its own centered row.
   - Places Previous / Next on a second row so they do not squeeze together.
   - Keeps desktop layout unchanged and does not alter Tutor LMS behavior.
   ========================================================= */
@media (max-width:767px){
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson]{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-rows:auto !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:10px !important;
    padding:10px 12px !important;
  }

  /* Completion action gets a full row of its own. */
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] > form{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    width:100% !important;
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
  }

  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] .tutor-mark-as-complete-button{
    width:min(230px, 100%) !important;
    min-width:0 !important;
    max-width:230px !important;
    min-height:40px !important;
    padding:8px 14px !important;
    white-space:nowrap !important;
  }

  /* Previous / Next sit on their own navigation row. */
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] > a{
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] > a:first-of-type{
    grid-column:1 !important;
  }

  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] > a:last-of-type{
    grid-column:2 !important;
  }

  /* If a lesson exposes only one navigation button, keep it compact and centered. */
  .tutor-learning-area-content:has(.tutor-lesson-video-wrapper)
  .tutor-learning-area-footer[data-lesson] > a:only-of-type{
    grid-column:1 / -1 !important;
    justify-self:center !important;
    width:min(150px, 100%) !important;
  }
}