/* public.css — หน้า Frontend สาธารณะ */
@import url('https://fonts.googleapis.com/css2?family=Trirong:ital,wght@0,400;0,600;0,700;1,400&family=Sarabun:wght@300;400;500;600;700&display=swap');
:root{
  --bd:#3d1f0d;--bm:#6b3a1f;--bw:#9c5a2e;--bp:#e8c9a8;--bc:#f5ece0;--bparch:#fdf6ed;
  --gold:#c9a227;--goldl:#e8c96a;--goldp:#f7e9b5;
  --td:#1a0e07;--tl:#7a4a28;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Sarabun',sans-serif;background:var(--bparch);color:var(--td);font-size:15px;line-height:1.7}
a{text-decoration:none;color:inherit}

/* NAV */
.topnav{background:linear-gradient(135deg,var(--td) 0%,var(--bd) 100%);padding:0 32px;height:62px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.35)}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo .icon{width:38px;height:38px;background:radial-gradient(circle,var(--gold) 0%,#8b6914 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.nav-logo h1{font-family:'Trirong',serif;font-size:13px;color:var(--goldl);line-height:1.5}
.nav-logo p{font-size:10px;color:rgba(201,162,39,.55)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:7px 13px;color:rgba(232,201,168,.75);font-size:13px;border-radius:6px;transition:.2s;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--goldl);background:rgba(201,162,39,.12)}
.btn-login-nav{padding:7px 16px;background:var(--gold);color:var(--td);border-radius:6px;font-weight:700;font-size:13px;transition:.2s}
.btn-login-nav:hover{background:var(--goldl)}
.nav-user{display:flex;align-items:center;gap:8px;color:var(--goldl);font-size:13px}
.nav-user .avatar-sm{width:30px;height:30px;background:rgba(201,162,39,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid rgba(201,162,39,.3)}

/* HERO MINI */
.hero-mini{background:linear-gradient(135deg,var(--td) 0%,var(--bd) 60%,var(--bm) 100%);padding:36px 32px;position:relative;overflow:hidden}
.hero-mini::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a227' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.hero-mini-inner{max-width:1100px;margin:0 auto;position:relative}
.hero-mini h1{font-family:'Trirong',serif;font-size:26px;color:white;font-weight:700}
.hero-mini p{font-size:13px;color:rgba(232,201,168,.8);margin-top:5px}
.breadcrumb{font-size:12px;color:rgba(201,162,39,.6);margin-bottom:8px}
.breadcrumb a{color:rgba(201,162,39,.7)}
.breadcrumb a:hover{color:var(--gold)}

/* CONTAINER */
.container{max-width:1100px;margin:0 auto;padding:36px 32px}

/* FILTER BAR */
.filter-bar{background:white;border-radius:10px;padding:16px 20px;margin-bottom:24px;border:1px solid rgba(107,58,31,.1);display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 2px 8px rgba(107,58,31,.06)}
.filter-bar input,.filter-bar select{padding:8px 12px;border:1px solid rgba(107,58,31,.2);border-radius:7px;font-family:'Sarabun',sans-serif;font-size:13px;outline:none;transition:.2s;background:white}
.filter-bar input{min-width:220px}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--bw)}
.filter-bar .btn-search{padding:8px 18px;background:var(--bm);color:var(--goldp);border:none;border-radius:7px;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;cursor:pointer}

/* CARDS GRID */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr}.container{padding:24px 16px}.topnav{padding:0 16px}.hero-mini{padding:28px 16px}}

/* POST CARD */
.post-card{background:white;border-radius:10px;overflow:hidden;border:1px solid rgba(107,58,31,.1);transition:.25s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(107,58,31,.12)}
.post-thumb{height:140px;background:linear-gradient(135deg,var(--bp),var(--bc));display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;flex-shrink:0}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-body{padding:15px;flex:1;display:flex;flex-direction:column}
.post-cat-tag{display:inline-block;font-size:10px;color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.post-title{font-family:'Trirong',serif;font-size:14px;font-weight:600;color:var(--bd);line-height:1.45;flex:1}
.post-excerpt{font-size:12px;color:var(--tl);margin-top:6px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-footer{padding:10px 15px;border-top:1px solid rgba(107,58,31,.06);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--tl)}
.post-footer .read-more{color:var(--bw);font-weight:600;font-size:12px}

/* COURSE CARD */
.course-card{background:white;border-radius:12px;overflow:hidden;border:1px solid rgba(107,58,31,.1);box-shadow:0 3px 12px rgba(107,58,31,.07);transition:.25s;display:flex;flex-direction:column}
.course-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(107,58,31,.14)}
.course-thumb{height:130px;background:linear-gradient(135deg,var(--bd),var(--bm));display:flex;align-items:center;justify-content:center;font-size:38px;position:relative}
.course-status-badge{position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:12px;font-size:10px;font-weight:700}
.status-open{background:#d4edda;color:#155724}
.status-closed{background:#f8d7da;color:#721c24}
.status-draft{background:var(--goldp);color:#856404}
.course-body{padding:15px;flex:1}
.course-cat-tag{font-size:10px;color:var(--tl);letter-spacing:1px;text-transform:uppercase}
.course-title{font-family:'Trirong',serif;font-size:14px;font-weight:600;color:var(--bd);margin-top:5px;line-height:1.4}
.course-desc{font-size:12px;color:var(--tl);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-meta{display:flex;gap:12px;margin-top:10px;font-size:11px;color:var(--tl);flex-wrap:wrap}
.course-meta span{display:flex;align-items:center;gap:3px}
.course-footer{padding:12px 15px;border-top:1px solid rgba(107,58,31,.06)}
.btn-enroll{display:block;width:100%;padding:9px;background:var(--bm);color:var(--goldp);border:none;border-radius:7px;font-family:'Sarabun',sans-serif;font-weight:600;font-size:13px;text-align:center;cursor:pointer;transition:.2s}
.btn-enroll:hover{background:var(--bd)}
.btn-enroll.enrolled{background:#d4edda;color:#155724;cursor:default}
.btn-enroll.closed{background:#e9ecef;color:#6c757d;cursor:default}
.prog-bar{height:4px;background:rgba(107,58,31,.1);border-radius:2px;overflow:hidden;margin-top:8px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--bm),var(--gold));border-radius:2px}

/* NEWS LIST */
.news-item{background:white;border-radius:10px;padding:18px 20px;border:1px solid rgba(107,58,31,.1);display:flex;gap:16px;transition:.2s;margin-bottom:12px}
.news-item:hover{box-shadow:0 4px 16px rgba(107,58,31,.1);border-color:rgba(107,58,31,.2)}
.news-date-col{text-align:center;min-width:52px;flex-shrink:0}
.news-date-day{font-family:'Trirong',serif;font-size:24px;font-weight:700;color:var(--bd);line-height:1}
.news-date-mon{font-size:11px;color:var(--tl);font-weight:600}
.news-date-yr{font-size:10px;color:var(--tl)}
.news-divider{width:1px;background:rgba(107,58,31,.1);flex-shrink:0}
.news-content{flex:1;min-width:0}
.news-cat-tag{font-size:10px;color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.news-title{font-family:'Trirong',serif;font-size:15px;font-weight:600;color:var(--bd);line-height:1.4}
.news-title:hover{color:var(--bw)}
.news-excerpt{font-size:13px;color:var(--tl);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-meta{display:flex;gap:14px;margin-top:8px;font-size:11px;color:var(--tl)}
.pinned-badge{background:var(--goldp);color:#856404;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}

/* PAGINATION */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pagination a,.pagination span{padding:7px 13px;border-radius:7px;font-size:13px;border:1px solid rgba(107,58,31,.2);background:white;color:var(--bm);transition:.15s}
.pagination a:hover{background:var(--bc)}
.pagination .current{background:var(--bm);color:white;border-color:var(--bm)}

/* LOGIN PAGE */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--td) 0%,var(--bd) 50%,#2d1507 100%)}
.login-card{background:rgba(253,246,237,.97);border-radius:16px;padding:40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-emblem{width:64px;height:64px;background:radial-gradient(circle,var(--gold) 0%,#8b6914 100%);border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 0 24px rgba(201,162,39,.4)}
.login-title{font-family:'Trirong',serif;font-size:21px;color:var(--bd);text-align:center;margin-bottom:4px}
.login-sub{font-size:12px;color:var(--tl);text-align:center;margin-bottom:28px;line-height:1.6}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--bm);margin-bottom:6px}
.form-group{margin-bottom:16px}
.inp-wrap{position:relative}
.inp-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.form-control{width:100%;padding:10px 14px 10px 38px;border:1px solid rgba(107,58,31,.25);border-radius:8px;font-family:'Sarabun',sans-serif;font-size:14px;outline:none;background:white;transition:.2s}
.form-control:focus{border-color:var(--bm);box-shadow:0 0 0 3px rgba(107,58,31,.1)}
.form-control.no-icon{padding-left:14px}
.btn-submit{width:100%;padding:12px;background:var(--bm);color:var(--goldp);border:none;border-radius:8px;font-family:'Sarabun',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;margin-top:4px}
.btn-submit:hover{background:var(--bd);transform:translateY(-1px)}
.alert-error{background:#f8d7da;color:#721c24;padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.alert-success{background:#d4edda;color:#155724;padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.login-footer{font-size:11px;color:rgba(107,58,31,.5);text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(107,58,31,.1)}
.login-footer a{color:var(--bw);font-weight:600}

/* TEACHER DASHBOARD */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
@media(max-width:900px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
.dash-card{background:white;border-radius:12px;padding:18px;border:1px solid rgba(107,58,31,.1);box-shadow:0 2px 8px rgba(107,58,31,.06);text-align:center}
.dash-icon{font-size:28px;margin-bottom:8px}
.dash-val{font-family:'Trirong',serif;font-size:26px;font-weight:700;color:var(--bd)}
.dash-label{font-size:12px;color:var(--tl);margin-top:3px}

/* CONTENT VIEW */
.content-view{background:white;border-radius:12px;border:1px solid rgba(107,58,31,.1);overflow:hidden;margin-bottom:16px}
.content-view-head{padding:14px 18px;background:var(--bc);display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(107,58,31,.08)}
.content-type-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.content-type-video{background:#fce4e4}
.content-type-file{background:#e4ecff}
.content-type-link{background:#e4f5e9}
.content-type-text{background:var(--goldp)}
.content-view-body{padding:16px 18px;font-size:13px;color:var(--tl)}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;margin-top:10px}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* FOOTER */
.site-footer{background:linear-gradient(135deg,var(--td),var(--bd));padding:36px 32px 20px;margin-top:40px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:24px}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr}}
.footer-brand h3{font-family:'Trirong',serif;font-size:15px;color:var(--goldl);margin-bottom:8px}
.footer-brand p{font-size:12px;color:rgba(232,201,168,.6);line-height:1.8}
.footer-col h4{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}
.footer-col a{display:block;font-size:12px;color:rgba(232,201,168,.6);margin-bottom:6px;transition:.2s}
.footer-col a:hover{color:var(--bp)}
.footer-bottom{padding-top:16px;border-top:1px solid rgba(201,162,39,.12);text-align:center;font-size:11px;color:rgba(201,162,39,.4)}

/* BADGE */
.badge{display:inline-block;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600}
.badge-green{background:#d4edda;color:#155724}
.badge-gold{background:var(--goldp);color:#856404}
.badge-red{background:#f8d7da;color:#721c24}
.badge-blue{background:#d1ecf1;color:#0c5460}
.badge-gray{background:#e2e3e5;color:#383d41}

/* EMPTY STATE */
.empty-state{text-align:center;padding:50px 20px;color:var(--tl)}
.empty-state .ei{font-size:44px;margin-bottom:12px;opacity:.35}

/* SIDEBAR LAYOUT (for course view) */
.two-col-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:900px){.two-col-layout{grid-template-columns:1fr}}
.sticky-sidebar{position:sticky;top:80px}
.sidebar-card{background:white;border-radius:12px;border:1px solid rgba(107,58,31,.1);overflow:hidden;box-shadow:0 2px 8px rgba(107,58,31,.06)}
.sidebar-card-head{padding:14px 18px;background:var(--bc);border-bottom:1px solid rgba(107,58,31,.08);font-family:'Trirong',serif;font-size:15px;font-weight:600;color:var(--bd)}
.sidebar-card-body{padding:16px 18px}

/* === PROFILE DROPDOWN NAV === */
.nav-profile-wrap{position:relative}
.nav-profile-btn{display:flex;align-items:center;gap:7px;padding:6px 12px;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.25);border-radius:8px;color:var(--goldl);font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.nav-profile-btn:hover,.nav-profile-wrap.open .nav-profile-btn{background:rgba(201,162,39,.22);border-color:rgba(201,162,39,.5)}
.nav-profile-avatar{font-size:15px;line-height:1}
.nav-profile-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-profile-arrow{font-size:10px;opacity:.7;transition:transform .2s}
.nav-profile-wrap.open .nav-profile-arrow{transform:rotate(180deg)}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:220px;background:white;border-radius:10px;box-shadow:0 8px 32px rgba(61,31,13,.18);border:1px solid rgba(107,58,31,.12);z-index:200;overflow:hidden}
.nav-profile-wrap.open .nav-dropdown{display:block}
.nav-dropdown-header{padding:14px 16px;background:linear-gradient(135deg,var(--bc),white);border-bottom:1px solid rgba(107,58,31,.08)}
.nav-dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:13px;color:var(--bm);text-decoration:none;transition:.15s;border-bottom:1px solid rgba(107,58,31,.05)}
.nav-dropdown-item:last-child{border-bottom:none}
.nav-dropdown-item:hover{background:var(--bc);color:var(--bd)}
.nav-dropdown-divider{height:1px;background:rgba(107,58,31,.1);margin:4px 0}
.nav-dropdown-logout{color:#c0392b!important}
.nav-dropdown-logout:hover{background:#fff5f5!important;color:#a93226!important}

/* ============================================================
   RESPONSIVE — Mobile & Tablet (Standard Level)
   Breakpoints: 1024px (tablet) · 768px (tablet-sm) · 480px (mobile)
   ============================================================ */

/* ---- NAV HAMBURGER ---- */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--goldl);border-radius:2px;transition:.25s}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98}
.nav-overlay.show{display:block}

/* ---- TABLET 1024px ---- */
@media(max-width:1024px){
  .container{padding:28px 20px}
  .hero-mini{padding:30px 20px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .two-col-layout{grid-template-columns:1fr 280px}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .nav-profile-name{max-width:90px}
}

/* ---- TABLET SMALL 768px ---- */
@media(max-width:768px){
  /* Nav → hamburger */
  .topnav{padding:0 16px;height:56px}
  .nav-links{
    display:none;
    position:fixed;top:56px;left:0;right:0;bottom:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(180deg,var(--td),var(--bd));
    z-index:99;overflow-y:auto;padding:8px 0 24px;
  }
  .nav-links.open{display:flex}
  .nav-hamburger{display:flex}
  .nav-link{padding:13px 20px;font-size:14px;border-radius:0;border-bottom:1px solid rgba(201,162,39,.08)}
  .nav-link:hover,.nav-link.active{background:rgba(201,162,39,.12);border-radius:0}
  .nav-profile-wrap{margin:8px 16px 0}
  .nav-profile-btn{width:100%;justify-content:flex-start;border-radius:8px}
  .nav-dropdown{position:static;box-shadow:none;border:1px solid rgba(201,162,39,.15);border-radius:8px;margin-top:4px;background:rgba(255,255,255,.97)}
  .nav-profile-wrap.open .nav-dropdown{display:block}
  .btn-login-nav{margin:8px 16px 0;display:block;text-align:center;padding:11px}

  /* Layout */
  .two-col-layout{grid-template-columns:1fr}
  .sticky-sidebar{position:static;top:auto;margin-top:20px}
  .grid-3{grid-template-columns:repeat(2,1fr);gap:14px}
  .grid-2{grid-template-columns:1fr}
  .container{padding:20px 16px}
  .hero-mini{padding:24px 16px}
  .hero-mini h1{font-size:20px}
  .dash-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .footer-grid{grid-template-columns:1fr}

  /* Filter bar */
  .filter-bar{flex-direction:column;align-items:stretch;gap:8px}
  .filter-bar input{min-width:0;width:100%}
  .filter-bar select,.filter-bar .btn-search{width:100%}

  /* News */
  .news-item{padding:14px 16px;gap:12px}
  .news-date-col{min-width:44px}
  .news-date-day{font-size:20px}
}

/* ---- MOBILE 480px ---- */
@media(max-width:480px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .container{padding:16px 12px}
  .hero-mini{padding:20px 12px}
  .hero-mini h1{font-size:18px;line-height:1.4}
  .hero-mini p{font-size:12px}

  .dash-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .dash-card{padding:14px 10px}
  .dash-val{font-size:22px}
  .dash-icon{font-size:22px}

  .course-card{border-radius:10px}
  .course-thumb{height:110px}

  /* Login */
  .login-card{padding:28px 20px}
  .login-title{font-size:18px}

  /* Teacher course row */
  .teacher-course-row{flex-direction:column;gap:10px}
  .teacher-course-row .btn-enter{width:100%;text-align:center}

  /* Profile form */
  .profile-form-grid{grid-template-columns:1fr!important}

  /* Pagination */
  .pagination a,.pagination span{padding:6px 10px;font-size:12px}

  /* News */
  .news-date-col{display:none}
  .news-divider{display:none}

  /* Footer */
  .site-footer{padding:28px 12px 16px}
  .footer-bottom{font-size:10px}
}

/* ---- FIX inline grids ใน teacher/index.php ---- */
@media(max-width:768px){
  /* dashboard main+sidebar */
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 320px"]{
    display:block!important
  }
  /* course enrollment row */
  div[style*="display:flex"][style*="gap:16px"][style*="align-items:center"]{
    flex-wrap:wrap
  }
}