* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}
body { background-color: #f8fafc; color: #333; } 

.dashboard-container { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px; background-color: #15803d; color: white; 
    display: flex; flex-direction: column; padding: 20px 0;
    position: fixed; height: 100vh; z-index: 100;
}
.sidebar-logo { text-align: center; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
.school-img-logo { width: 85px; height: auto; margin-bottom: 15px; object-fit: contain; background-color: transparent; border: none; }
.sidebar-logo h2 { font-size: 20px; }
.sidebar-logo p { font-size: 12px; color: #dcfce7; margin-top: 5px; }

.sidebar-nav { display: flex; flex-direction: column; flex: 1; }
.sidebar-nav a {
    color: white; text-decoration: none; padding: 15px 30px; font-size: 15px;
    transition: 0.3s; border-left: 4px solid transparent;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    background-color: rgba(255,255,255,0.1); border-left: 4px solid #86efac; font-weight: 600; 
}
.logout-btn { color: white; text-decoration: none; padding: 15px 30px; margin-top: auto; }

.main-content { flex: 1; margin-left: 260px; padding: 30px 40px; }
.top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.top-header h1 { font-size: 24px; color: #1e293b; }
.subtitle { color: #64748b; font-size: 14px; margin-top: 5px; }

.user-profile {
    display: flex; align-items: center; gap: 15px; background: white;
    padding: 10px 20px; border-radius: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); font-weight: 600;
}
.avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.welcome-banner {
    background-color: #dcfce7; border-radius: 20px; padding: 40px; height: 250px;
    background-size: cover; background-position: center; margin-bottom: 30px;
    display: flex; align-items: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.banner-text h2 { font-size: 32px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); text-align: center; }
.stat-card h3 { font-size: 14px; color: #64748b; margin-bottom: 10px; }
.stat-value { font-size: 32px; font-weight: 700; color: #1e293b; margin-bottom: 5px; }
.stat-value span { font-size: 16px; font-weight: 400; }
.text-green { color: #22c55e; } 
.text-orange { color: #f59e0b; }
.text-blue { color: #3b82f6; }

.page-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.active-page { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Login */
.auth-container {
    height: 100vh; display: flex; align-items: center; justify-content: center;
    background-image: linear-gradient(135deg, #16a34a, #22c55e);
}
.auth-box {
    background: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    width: 100%; max-width: 500px; text-align: center;
}
.auth-logo { width: 120px; margin-bottom: 15px; object-fit: contain; }
.auth-box h2 { margin-bottom: 20px; color: #1e293b; }
.auth-box input, .auth-box select {
    width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #cbd5e1;
    border-radius: 8px; font-family: 'Prompt', sans-serif; font-size: 14px; background: white; color: #333;
}
.input-row { display: flex; gap: 10px; }
.btn-primary {
    width: 100%; padding: 15px; background: #22c55e; color: white; border: none;
    border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s;
}
.btn-primary:hover { background: #16a34a; }
.btn-danger {
    padding: 12px 15px; background: #ef4444; color: white; border: none;
    border-radius: 8px; font-weight: bold; font-size: 14px; cursor: pointer; transition: 0.3s; width: 100%;
}
.btn-danger:hover { background: #dc2626; }
.btn-blue {
    padding: 8px 12px; background: #059669; color: white; border: none;
    border-radius: 5px; font-weight: bold; font-size: 13px; cursor: pointer; transition: 0.3s;
}
.btn-blue:hover { background: #047857; }
.btn-small-danger {
    padding: 8px 12px; background: #ef4444; color: white; border: none;
    border-radius: 5px; font-weight: bold; font-size: 13px; cursor: pointer; transition: 0.3s;
}
.btn-small-danger:hover { background: #dc2626; }
.auth-box p { margin-top: 15px; }
.auth-box a { color: #16a34a; text-decoration: none; font-weight: 600; }
.remember-me-container { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; text-align: left; font-size: 14px; color: #475569; }
.remember-me-container input { width: auto !important; margin-bottom: 0 !important; cursor: pointer; }
.remember-me-container label { cursor: pointer; user-select: none; }

/* ตาราง */
.leaderboard-section { margin-top: 10px; }
.section-title { font-size: 20px; color: #1e293b; margin-bottom: 15px; font-weight: 700; }
.leaderboard-card { background: white; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); overflow: hidden; padding: 10px 20px 20px 20px; }
.leaderboard-table { width: 100%; border-collapse: collapse; text-align: center; }
.leaderboard-table th { color: #64748b; font-size: 14px; padding: 15px 10px; border-bottom: 2px solid #f1f5f9; font-weight: 600; white-space: nowrap; }
.leaderboard-table td { padding: 15px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; font-size: 15px; vertical-align: middle; white-space: nowrap; }
.leaderboard-table tr:last-child td { border-bottom: none; }
.table-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 15px; }
.name-cell { text-align: left; display: flex; align-items: center; font-weight: 600; }
.rank-badge { display: inline-block; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; font-weight: bold; color: white; }
.rank-1 { background-color: #fbbf24; box-shadow: 0 2px 5px rgba(251,191,36,0.5); }
.rank-2 { background-color: #94a3b8; box-shadow: 0 2px 5px rgba(148,163,184,0.5); }
.rank-3 { background-color: #b45309; box-shadow: 0 2px 5px rgba(180,83,9,0.5); }
/* นำโค้ดชุดนี้ไปวางทับคลาส .rank-other เดิม */
.rank-other { 
    background-color: #f1f5f9; 
    color: #475569; 
    font-weight: 700; 
}
body.dark-theme .rank-other { 
    background-color: #334155; 
    color: #cbd5e1; 
}
.my-rank-row { background-color: #f0fdf4; } 

/* Profile */
.profile-settings-wrapper { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; }
.profile-edit-box { background: white; padding: 30px; border-radius: 15px; text-align: center; flex: 1; min-width: 280px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.avatar-img-large { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #16a34a; margin-bottom: 15px;}
.profile-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: 'Prompt', sans-serif; font-size: 14px; background: white; color: #333; }
.theme-text { color: #1e293b; }
.theme-subtext { color: #64748b; }

.theme-btn-fixed {
    position: fixed; bottom: 25px; right: 25px; background-color: white; border: none;
    border-radius: 50%; width: 50px; height: 50px; font-size: 22px; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.theme-btn-fixed:hover { transform: scale(1.1); }

.admin-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 2000; justify-content: center; align-items: center;
    backdrop-filter: blur(3px);
}
.admin-modal-content {
    background: white; padding: 30px; border-radius: 15px; width: 90%; max-width: 550px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto; text-align: center;
}
.watched-checkbox-container {
    max-height: 150px; overflow-y: auto; background: #f1f5f9; padding: 10px; 
    border-radius: 8px; font-size: 13px; border: 1px solid #cbd5e1;
}
.admin-check-lbl { display: block; margin-bottom: 6px; cursor: pointer; color: #333; }
.admin-check-lbl input { margin-right: 5px; cursor: pointer; }

/* Video */
.category-filters { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
.cat-btn {
    padding: 8px 20px; border: 1px solid #cbd5e1; border-radius: 20px; background: white;
    color: #475569; font-weight: 600; cursor: pointer; transition: 0.3s; font-size: 14px;
}
.cat-btn.active, .cat-btn:hover { background: #16a34a; color: white; border-color: #16a34a; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.video-card {
    background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s; cursor: pointer; display: flex; flex-direction: column; position: relative;
}
.video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.video-thumb {
    height: 140px; background: #e2e8f0; display: flex; align-items: center; justify-content: center;
    font-size: 40px; position: relative; color: white;
}
.video-thumb.has-vid { background: linear-gradient(135deg, #22c55e, #16a34a); }
.video-thumb.no-vid { background: #cbd5e1; cursor: not-allowed; }
.video-info { padding: 15px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.video-cat-tag { font-size: 11px; color: #64748b; margin-bottom: 5px; font-weight: bold; }
.video-title { font-size: 14px; color: #1e293b; font-weight: 600; line-height: 1.4; }
.video-status { font-size: 12px; margin-top: 10px; font-weight: bold; }
.status-ready { color: #22c55e; }
.status-wait { color: #ef4444; }
.watched-badge {
    position: absolute; top: 10px; right: 10px; background: #f59e0b; color: white; 
    font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: bold; z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.draggable-row { transition: background-color 0.2s; }
.drag-handle { cursor: grab; font-size: 24px; color: #94a3b8; user-select: none; }
.drag-handle:active { cursor: grabbing; color: #16a34a; }
.dragging { opacity: 0.5; background-color: #f1f5f9; }
.drag-over { border-top: 3px solid #16a34a; background-color: rgba(22, 163, 74, 0.1); }
.order-input {
    width: 50px; text-align: center; padding: 5px; border: 1px solid #cbd5e1;
    border-radius: 5px; font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: bold;
}

/* --- ระบบหน้าเกียรติบัตร (Certificate) รุ่นปรับปรุงภาพ 100% --- */
.cert-req-box { background: #f1f5f9; }

.cert-template {
    width: 800px;
    height: 565px;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: white;
    overflow: hidden; 
}

/* ล็อคขนาดรูปพื้นหลังให้คงที่ */
.cert-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 565px;
    z-index: 1;
    object-fit: cover;
}

.cert-content-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* style.css: บรรทัดที่ 215 (โดยประมาณ) */

.cert-number {
    position: absolute;
    top: 3.5%;
    right: 20%;
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1px;
}

/* ชื่ออยู่ตรงกลางเป๊ะ */
.cert-name {
    position: absolute;
    top: 42%; 
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0B2464; /* สีน้ำเงินตามที่ระบุ */
}

/* หลักสูตร อย.น้อย */
.cert-course {
    position: absolute;
    top: 50.5%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #0B2464; /* สีน้ำเงินตามที่ระบุ */
}

/* วันที่ */
.cert-date {
    position: absolute;
    top: 66%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #0B2464; /* สีน้ำเงินตามที่ระบุ */
    padding-left: 20px;
}


/* =======================================================
   DARK MODE (โหมดมืด)
   ======================================================= */
body.dark-theme { background-color: #0f172a; color: #f8fafc; }
body.dark-theme .dashboard-container, body.dark-theme .main-content { background-color: #0f172a; }
body.dark-theme .sidebar { background-color: #020617; border-right: 1px solid #1e293b; }
body.dark-theme .user-profile, body.dark-theme .stat-card, body.dark-theme .leaderboard-card,
body.dark-theme .auth-box, body.dark-theme .profile-edit-box, body.dark-theme .theme-btn-fixed,
body.dark-theme .admin-modal-content, body.dark-theme .video-card {
    background-color: #1e293b; box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
body.dark-theme .top-header h1, body.dark-theme .section-title, body.dark-theme .stat-card h3,
body.dark-theme .stat-value, body.dark-theme .auth-box h2, body.dark-theme .leaderboard-table td,
body.dark-theme .user-profile, body.dark-theme .video-title { color: #f8fafc; }
body.dark-theme .subtitle, body.dark-theme .stat-card p, body.dark-theme .leaderboard-table th,
body.dark-theme .remember-me-container, body.dark-theme .video-cat-tag { color: #94a3b8; }
body.dark-theme .leaderboard-table th, body.dark-theme .leaderboard-table td { border-bottom: 1px solid #334155; }
body.dark-theme .auth-box input, body.dark-theme .auth-box select, body.dark-theme .profile-input,
body.dark-theme .order-input {
    background-color: #334155; border-color: #475569; color: white;
}
body.dark-theme .my-rank-row { background-color: #1e3a8a; }
body.dark-theme .theme-text { color: #f8fafc; }
body.dark-theme .theme-subtext { color: #94a3b8; }
body.dark-theme .cat-btn { background: #334155; color: #cbd5e1; border-color: #475569; }
body.dark-theme .cat-btn.active, body.dark-theme .cat-btn:hover { background: #3b82f6; color: white; border-color: #3b82f6; }
body.dark-theme .watched-checkbox-container, body.dark-theme .cert-req-box { background: #334155; border-color: #475569; }
body.dark-theme .admin-check-lbl { color: #f8fafc; }

/* ==========================================
   GAME STYLES (นำเข้าจากไฟล์เกม)
   ========================================== */
:root {
  --g-green: #007A4C; --g-dark: #005435; --g-light: #E6F4EE;
  --g-gold: #F5A623; --g-red: #D0021B; --g-border: #C8E0D5; --g-muted: #6B8F7A;
}
.game-wrap { max-width: 640px; margin: 0 auto; padding: 10px 0 40px; }
.game-header { background: linear-gradient(135deg, var(--g-dark), var(--g-green)); color: #fff; padding: 20px; text-align: center; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,122,76,0.2); }
.game-badge { display: inline-block; background: var(--g-gold); color: var(--g-dark); font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; }
.game-header h2 { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.game-header h2 span { color: var(--g-gold); }
.game-header p { font-size: 13px; opacity: .9; color: #fff; }
.score-bar { background: linear-gradient(135deg, var(--g-dark), var(--g-green)); color: #fff; border-radius: 14px; padding: 16px 20px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.score-bar .lbl { font-size: 12px; opacity: .8; color: #fff; }
.score-bar .num { font-size: 26px; font-weight: 800; color: #fff; }
.score-bar .st { font-size: 20px; color: var(--g-gold); }
.sec-lbl { font-size: 15px; font-weight: 700; color: var(--g-dark); margin-bottom: 15px; }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-card { background: #ffffff; border: 2px solid var(--g-border); border-radius: 14px; padding: 18px 14px 16px; cursor: pointer; position: relative; transition: 0.15s; }
.ch-card:hover { transform: translateY(-2px); border-color: var(--g-green); box-shadow: 0 6px 20px rgba(0,122,76,.12); }
.ch-card.done { border-color: var(--g-green); background: var(--g-light); }
.ch-icon { font-size: 34px; display: block; margin-bottom: 8px; }
.ch-num { font-size: 11px; font-weight: 700; color: var(--g-muted); margin-bottom: 3px; }
.ch-title { font-size: 16px; font-weight: 700; color: #1A2E22; }
.ch-status { position: absolute; top: 10px; right: 10px; font-size: 16px; }
.ch-score { display: inline-block; margin-top: 7px; background: var(--g-green); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.screen { display: none; } .screen.on { display: block; animation: fadeIn 0.3s ease; }
.qhdr { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.back { background: #fff; border: 2px solid var(--g-border); border-radius: 10px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1A2E22; }
.qmeta .qname { font-size: 15px; font-weight: 700; color: #1A2E22; }
.qmeta .qprog { font-size: 12px; color: var(--g-muted); }
.pbar-wrap { background: var(--g-border); border-radius: 99px; height: 7px; margin-bottom: 16px; overflow: hidden; }
.pbar { height: 100%; background: linear-gradient(90deg, var(--g-green), var(--g-gold)); border-radius: 99px; transition: width .3s; }
.qcard { background: #fff; border: 2px solid var(--g-border); border-radius: 16px; padding: 20px 18px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.qno { font-size: 12px; font-weight: 700; color: var(--g-green); margin-bottom: 6px; }
.qtxt { font-size: 17px; font-weight: 600; line-height: 1.55; color: #1A2E22; }
.choices { display: flex; flex-direction: column; gap: 9px; }
.cbtn { background: #fff; border: 2px solid var(--g-border); border-radius: 11px; padding: 13px 16px; text-align: left; cursor: pointer; font-size: 15px; font-weight: 500; color: #1A2E22; display: flex; align-items: center; gap: 10px; line-height: 1.4; transition: 0.2s;}
.cbtn:hover:not(:disabled) { border-color: var(--g-green); background: var(--g-light); }
.cbtn.correct { border-color: var(--g-green); background: #E6F4EE !important; font-weight: 700; color: var(--g-dark); }
.cbtn.wrong { border-color: var(--g-red); background: #FDE8EB !important; color: var(--g-red); }
.clbl { width: 26px; height: 26px; border-radius: 50%; background: #F0F6F2; border: 2px solid var(--g-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; color: #1A2E22; }
.cbtn.correct .clbl { background: var(--g-green); border-color: var(--g-green); color: #fff; }
.cbtn.wrong .clbl { background: var(--g-red); border-color: var(--g-red); color: #fff; }
.fb { border-radius: 12px; padding: 14px 16px; margin-top: 12px; display: none; border: 2px solid; }
.fb.show { display: block; animation: fadeIn 0.3s ease; }
.fb.ok { background: #E6F4EE; border-color: var(--g-green); color: var(--g-dark); }
.fb.ng { background: #FDE8EB; border-color: var(--g-red); color: var(--g-red); }
.fb-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.fb-txt { font-size: 13.5px; line-height: 1.55; }
.nxt { display: none; width: 100%; margin-top: 14px; background: linear-gradient(135deg, var(--g-dark), var(--g-green)); color: #fff; border: none; border-radius: 13px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s;}
.nxt:hover { opacity: 0.9; }
.nxt.show { display: block; }
.rcard { background: #fff; border-radius: 18px; padding: 28px 20px; border: 2px solid var(--g-border); text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.remoji { font-size: 56px; display: block; margin-bottom: 14px; }
.rtitle { font-size: 22px; font-weight: 800; color: var(--g-dark); margin-bottom: 6px; }
.rsub { font-size: 14px; color: var(--g-muted); margin-bottom: 20px; }
.rbig { font-size: 52px; font-weight: 800; color: var(--g-green); }
.rlbl { font-size: 13px; color: var(--g-muted); margin-top: 2px; margin-bottom: 18px; }
.rstars { font-size: 28px; letter-spacing: 3px; margin-bottom: 18px; color: var(--g-gold); }
.rmsg { background: var(--g-light); border: 2px solid var(--g-border); border-radius: 11px; padding: 13px 15px; font-size: 14px; line-height: 1.6; color: var(--g-dark); margin-bottom: 20px; text-align: left; }
.rbtns { display: flex; gap: 10px; }
.btn-r { flex: 1; background: #fff; border: 2px solid var(--g-green); color: var(--g-green); border-radius: 11px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-h { flex: 1; background: linear-gradient(135deg, var(--g-dark), var(--g-green)); color: #fff; border: none; border-radius: 11px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; }

/* โหมดมืดสำหรับเกม */
body.dark-theme .ch-card, body.dark-theme .qcard, body.dark-theme .cbtn, body.dark-theme .back, body.dark-theme .rcard { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
body.dark-theme .ch-title, body.dark-theme .qtxt, body.dark-theme .clbl { color: #f8fafc !important; }
body.dark-theme .cbtn.correct { background: #064e3b !important; color: #a7f3d0 !important; }
body.dark-theme .cbtn.wrong { background: #7f1d1d !important; color: #fecaca !important; }
body.dark-theme .clbl { background: #334155 !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-theme .fb.ok { background: #064e3b !important; color: #a7f3d0 !important; }
body.dark-theme .fb.ng { background: #7f1d1d !important; color: #fecaca !important; }

@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .main-content { padding: 20px; }
}

@media (max-width: 768px) {
    .dashboard-container { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: relative; padding: 10px 0; flex-direction: column; align-items: center; z-index: 100; }
    .sidebar-logo { padding: 10px; margin-bottom: 0; border-bottom: none; }
    .school-img-logo { width: 60px; height: 60px; margin-bottom: 5px; }
    .sidebar-nav { flex-direction: row; width: 100%; overflow-x: auto; white-space: nowrap; padding: 0 10px 10px 10px; }
    .sidebar-nav a { padding: 10px 15px; font-size: 14px; border-left: none; border-bottom: 3px solid transparent; }
    .sidebar-nav a:hover, .sidebar-nav a.active { border-left: none; border-bottom: 3px solid #64b5f6; }
    .logout-btn { margin-top: 10px; padding: 10px; }
    .main-content { margin-left: 0; padding: 15px; }
    .top-header { flex-direction: column; text-align: center; gap: 15px; }
    .user-profile { width: 100%; justify-content: center; }
    .welcome-banner { height: auto; padding: 30px 20px; text-align: center; }
    .banner-text h2 { font-size: 24px; }
    .stats-grid { grid-template-columns: 1fr; gap: 15px; }
    .leaderboard-card { overflow-x: auto; padding: 10px; }
    .auth-box { padding: 30px 20px; margin: 20px; }
    .input-row { flex-direction: column; gap: 0; }
    .theme-btn-fixed { bottom: 15px; right: 15px; width: 45px; height: 45px; font-size: 20px; }
}

/* แก้ไขให้กล่องแจ้งเตือนคงที่และไม่ออกนอกจอ */
.notif-dropdown {
    position: absolute !important;
    top: 60px !important; /* ปรับให้ลงมาพอดีใต้กระดิ่ง */
    right: 10px !important; /* บังคับให้ห่างจากขอบขวาเล็กน้อย */
    left: auto !important;
    width: 300px !important;
    max-width: 90vw !important; /* ไม่เกิน 90% ของหน้าจอ */
    background-color: white !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 9999 !important;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
}

.notif-dropdown.show { display: block !important; }

/* เพิ่ม Media Query สำหรับมือถือ */
@media (max-width: 480px) {
    .notif-dropdown {
        right: 5% !important;
        width: 90vw !important;
    }
}

/* เพิ่มให้มั่นใจว่ากล่องข้อความข้างในไม่ล้น */
.notif-item { 
    border-bottom: 1px solid #e2e8f0; 
    padding: 12px; 
    font-size: 13px; 
    text-align: left; 
    transition: 0.2s; 
    word-wrap: break-word; /* ตัดคำหากข้อความยาวเกิน */
}
.notif-item:hover { background: #f8fafc; }
.notif-reply-box { margin-top: 5px; padding: 8px; background: #f0fdf4; border-left: 3px solid #22c55e; border-radius: 4px; }

/* โหมดมืดสำหรับกระดิ่ง */
body.dark-theme #notification-bell { background-color: #1e293b !important; border: 1px solid #334155; }
body.dark-theme .notif-dropdown { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc; }
body.dark-theme .notif-item { border-bottom-color: #334155; }
body.dark-theme .notif-item:hover { background-color: #0f172a; }
body.dark-theme .notif-reply-box { background: #064e3b; border-color: #10b981; color: #f8fafc; }

@media (max-width: 480px) {
    .notif-dropdown {
        position: fixed !important; /* เปลี่ยนเป็น fixed ให้เต็มจอ */
        top: 70px !important;
        left: 5% !important;
        width: 90% !important;
        max-width: none !important;
    }
}

/* ==========================================
   ตกแต่ง Modal ประวัติการรายงาน (โหมดสว่าง)
   ========================================== */
.notif-item-box {
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    margin-bottom: 10px; 
    padding: 15px;
    background-color: white;
}
.notif-date { font-size: 12px; color: gray; margin-bottom: 5px; }
.notif-msg { color: #475569; }
.notif-reply-box { 
    margin-top: 10px; padding: 10px; 
    background-color: #f0fdf4; 
    border-left: 4px solid #22c55e; 
    border-radius: 4px; 
    color: #1e293b; 
}
.notif-pending { margin-top: 10px; color: #f59e0b; font-size: 12px; font-weight: bold; }

/* ==========================================
   ตกแต่ง Modal ประวัติการรายงาน (โหมดมืด)
   ========================================== */
body.dark-theme .notif-item-box { 
    border-color: #334155; 
    background-color: #1e293b; 
    color: #f8fafc; 
}
body.dark-theme .notif-date { color: #94a3b8; }
body.dark-theme .notif-msg { color: #cbd5e1; }
body.dark-theme .notif-reply-box { 
    background-color: #064e3b; /* เปลี่ยนพื้นหลังเป็นสีเขียวเข้ม */
    border-left-color: #10b981; 
    color: #ecfdf5; /* เปลี่ยนตัวหนังสือเป็นสีขาวสว่าง */
}

/* Styling สำหรับกล่องที่ถูก Admin ปฏิเสธ */
.notif-reject-box { 
    margin-top: 10px; 
    padding: 10px; 
    background-color: #fef2f2; 
    border-left: 4px solid #ef4444; 
    border-radius: 4px; 
    color: #ef4444; 
}

/* โหมดมืดสำหรับกล่องที่ถูกปฏิเสธ */
body.dark-theme .notif-reject-box { 
    background-color: #450a0a; 
    border-left-color: #ef4444; 
    color: #fecaca; 
}