:root{
  --app-primary:#1f4e79;
  --app-bg:#f3f5f8;
  --app-border:#e3e7ee;
  --font-body:'Sarabun',system-ui,sans-serif;
  --font-head:'Kanit','Sarabun',sans-serif;
  --bs-body-font-family:var(--font-body);
  --bs-body-font-size:.95rem;
}
body{background:var(--app-bg);color:#1e2633}
h1,h2,h3,h4,h5,.page-title,.stat-value,.sidebar-brand{font-family:var(--font-head);font-weight:500}
.fw-semibold{font-weight:600!important}

/* ---------- โครงหน้า ---------- */
.app-shell{display:flex;min-height:100vh}
.app-sidebar,.app-sidebar.offcanvas-lg{width:248px;background:var(--app-primary)!important;color:#fff;display:flex;flex-direction:column}
@media (min-width:992px){.app-sidebar{position:sticky;top:0;height:100vh;flex-shrink:0}}
@media (max-width:991.98px){.app-sidebar.offcanvas-lg{background:var(--app-primary);width:270px}}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.1rem;font-size:1.05rem;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-brand .bi{font-size:1.5rem}
.sidebar-nav{flex:1;overflow-y:auto;padding:.5rem .6rem}
.sidebar-nav .nav-group{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:.9rem .7rem .3rem}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.85);padding:.5rem .75rem;border-radius:.5rem;margin-bottom:2px}
.sidebar-nav .nav-link .bi{font-size:1.05rem;width:1.2rem;text-align:center}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar-nav .nav-link.active{background:#fff;color:var(--app-primary);font-weight:600}
.sidebar-user{padding:1rem 1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.app-main{flex:1;min-width:0}
.app-topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:#fff;border-bottom:1px solid var(--app-border);position:sticky;top:0;z-index:10}
.app-content{padding:1.5rem;max-width:1400px}
@media (max-width:575.98px){.app-content{padding:1rem}}
.app-content-guest{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}

/* ---------- ส่วนประกอบ ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.page-head .page-title{font-size:1.45rem;margin:0}
.page-head .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.5rem}
.card{border:1px solid var(--app-border);border-radius:.75rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--app-border);font-weight:600;padding:.8rem 1rem}
.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--app-primary) 85%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--app-primary) 85%,#000);--bs-btn-active-bg:color-mix(in srgb,var(--app-primary) 75%,#000)}
.btn-outline-primary{--bs-btn-color:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary);--bs-btn-active-bg:var(--app-primary)}
.text-primary-app{color:var(--app-primary)!important}
a{color:var(--app-primary)}

.stat-card{padding:1rem 1.1rem;height:100%}
.stat-card .stat-label{color:#5b6576;font-size:.88rem}
.stat-card .stat-value{font-size:1.65rem;line-height:1.2;margin-top:.15rem}
.stat-card .stat-icon{width:42px;height:42px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
a.stat-link{text-decoration:none;color:inherit;display:block;height:100%}
a.stat-link .card{transition:transform .12s,box-shadow .12s}
a.stat-link:hover .card{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.08)}

.table{--bs-table-bg:transparent;margin-bottom:0}
.table thead th{background:#f7f9fc;color:#4a5466;font-weight:600;font-size:.85rem;white-space:nowrap;border-bottom-width:1px}
.table td{vertical-align:middle}
.table-hover tbody tr:hover{--bs-table-hover-bg:#f4f7fb}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nowrap{white-space:nowrap}
.muted-sm{color:#6b7484;font-size:.84rem}
.form-label{font-weight:600;font-size:.88rem;margin-bottom:.3rem}
.req::after{content:" *";color:#dc3545}
.filter-bar{background:#fff;border:1px solid var(--app-border);border-radius:.75rem;padding:.8rem 1rem;margin-bottom:1rem}
.section-title{font-family:var(--font-head);font-weight:500;font-size:1.05rem;margin:0 0 .75rem;color:var(--app-primary)}
.kv dt{color:#6b7484;font-weight:400;font-size:.86rem}
.kv dd{margin-bottom:.6rem}

.login-card{width:100%;max-width:400px}

/* ---------- พิมพ์ ---------- */
@media print{
  .app-sidebar,.app-topbar,.no-print,.btn,.alert,.filter-bar{display:none!important}
  .app-content{padding:0;max-width:none}
  body{background:#fff;font-size:12pt}
  .card{border:none;box-shadow:none}
  a{color:#000;text-decoration:none}
}

/* แถบเมนูยาวเต็มหน้าแม้หน้าเนื้อหายาว */
@media (min-width:992px){.app-shell{background:linear-gradient(to right,var(--app-primary) 248px,var(--app-bg) 248px)}}
.btn-outline-primary{--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-active-border-color:var(--app-primary)}
.date-th{font-size:.78rem;color:#6b7484;margin-top:.15rem;min-height:1em}

/* ---------- หลังบ้าน: รูป / ไฟล์ ---------- */
.thumb{width:64px;height:48px;object-fit:cover;border-radius:.4rem;background:#eef1f6;border:1px solid var(--app-border)}
.thumb-ph{width:64px;height:48px;border-radius:.4rem;background:#eef1f6;display:flex;align-items:center;justify-content:center;color:#9aa3b2;font-size:1.3rem}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#eef1f6}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.img-tile{position:relative;border:1px solid var(--app-border);border-radius:.5rem;overflow:hidden;background:#fff}
.img-tile img{width:100%;height:96px;object-fit:cover;display:block}
.img-tile .del{position:absolute;top:.25rem;right:.25rem}
.file-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--app-border);border-radius:.5rem;margin-bottom:.4rem;background:#fff}
.file-row .bi{font-size:1.3rem}
.preview-img{max-width:100%;max-height:220px;border-radius:.5rem;border:1px solid var(--app-border)}
.msg-body{white-space:pre-wrap;background:#f7f9fc;border:1px solid var(--app-border);border-radius:.5rem;padding:.8rem 1rem}
.drop-zone{display:flex;align-items:center;gap:.9rem;border:2px dashed #b9c3d3;border-radius:.6rem;padding:.9rem 1rem;background:#fff;cursor:pointer;width:100%;margin:0;color:#4a5466;position:relative}
.drop-zone:hover,.drop-zone.over{border-color:var(--app-primary);background:#eef3fa}
.drop-zone>.bi{font-size:1.9rem;color:var(--app-primary)}
.drop-zone small{display:block;color:#6b7484;font-size:.8rem}
.drop-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.drop-zone:focus-within{outline:3px solid color-mix(in srgb,var(--app-primary) 35%,transparent)}
.drop-list{margin-top:.4rem}
.drop-item{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;border-bottom:1px solid #f0f2f6;font-size:.88rem}
.drop-item small{color:#6b7484;white-space:nowrap;margin-left:auto}
.pub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ปุ่มกลับขึ้นด้านบน (ทุกหน้า) */
.to-top{position:fixed;right:1rem;bottom:1rem;z-index:1040;width:46px;height:46px;border-radius:50%;border:0;background:var(--app-primary);color:#fff;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff,0 6px 18px rgba(16,24,40,.3);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:color-mix(in srgb,var(--app-primary) 82%,#000)}
.to-top:focus-visible{outline:3px solid color-mix(in srgb,var(--app-primary) 40%,transparent);outline-offset:2px}
#main:focus{outline:none}
@media (min-width:768px){.to-top{right:1.5rem;bottom:1.5rem}}
@media print{.to-top{display:none!important}}

/* ตั้งค่า: เลือกฟอนต์ */
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.font-opt{position:relative;margin:0;cursor:pointer}
.font-opt input{position:absolute;opacity:0}
.font-opt span{display:block;border:1.5px solid var(--app-border);border-radius:.6rem;padding:.55rem .75rem;background:#fff;height:100%;transition:border-color .12s,background .12s}
.font-opt b{display:block;font-size:1.05rem;line-height:1.45;font-weight:400;color:#1e2633}
.font-opt small{color:#6b7484;font-size:.76rem}
.font-opt input:checked + span{border-color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 7%,#fff);box-shadow:0 0 0 1px var(--app-primary)}
.font-opt input:focus-visible + span{outline:3px solid color-mix(in srgb,var(--app-primary) 35%,transparent)}

/* ---------- QR Code (admin/qrcode.php) ---------- */
.qr-preview{background:repeating-conic-gradient(#f1f3f6 0% 25%,#fff 0% 50%) 50%/16px 16px;border:1px solid var(--app-border,#e3e7ee);border-radius:.6rem;padding:.75rem;display:inline-block;max-width:100%}
.qr-preview canvas{width:260px;max-width:100%;height:auto;display:block}
.qr-thumb{width:56px;height:56px;border:1px solid #e3e7ee;border-radius:.3rem;flex:none}
.qr-list{max-height:70vh;overflow:auto}
.qr-list .active-qr{background:color-mix(in srgb,var(--app-primary) 8%,#fff)}
.min-w-0{min-width:0}

/* ---------- สไลด์หน้าแรก (admin/slides.php) ---------- */
.slide-pv{width:100%;aspect-ratio:8/3;object-fit:cover;border-radius:.5rem;border:1px solid var(--app-border,#e3e7ee)}

/* ---------- ลากวางเรียงลำดับ ---------- */
.drag-handle{cursor:grab;color:#9aa4b2;width:2rem;text-align:center;touch-action:none;user-select:none}
.drag-handle:hover{color:var(--app-primary)}
.drag-ghost{opacity:.45;background:color-mix(in srgb,var(--app-primary) 10%,#fff)!important}
.sort-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);background:#1f2937;color:#fff;padding:.5rem 1rem;border-radius:99px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2000}
.sort-toast.show{opacity:1;transform:translate(-50%,0)}
.sort-toast.bad{background:#b91c1c}

/* ---------- คู่มือการใช้งาน (admin/manual.php) ---------- */
.manual-toc{position:sticky;top:1rem}
.manual-toc .nav-link{padding:.3rem .5rem;border-radius:.4rem;color:inherit}
.manual-toc .nav-link:hover{background:color-mix(in srgb,var(--app-primary) 8%,#fff);color:var(--app-primary)}
.manual-steps{padding-left:1.2rem;margin-bottom:.6rem}
.manual-steps li{margin-bottom:.25rem}
.manual-tips{background:#fffbea;border:1px solid #f5e6a8;border-radius:.6rem;padding:.6rem .8rem;font-size:.92rem}
.manual-tips ul{padding-left:1.1rem}
.manual-sec{scroll-margin-top:1rem;transition:box-shadow .3s}
.manual-hl{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-primary) 45%,transparent)}
.btn-manual{background:#ffc107;color:#1f2937;border:0;font-weight:600}
.btn-manual:hover{background:#ffcd38;color:#111}
@media print{.app-sidebar,.app-topbar{display:none!important}.manual-sec{break-inside:avoid;border:1px solid #ccc}}

/* ---------- 2FA (profile.php) ---------- */
.tfa-qr{width:180px;background:#fff;padding:.4rem;border:1px solid var(--app-border,#e3e7ee);border-radius:.5rem}
.tfa-qr svg{width:100%;height:auto;display:block}