/* ===== หน้าเว็บสาธารณะ + ตัวอย่างในหน้า admin ===== */
body{font-family:Tahoma,sans-serif;background:#f4f7fb;margin:0;color:#222}
.wrap{max-width:1100px;margin:auto;padding:20px}
h1{text-align:center;color:#003399}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.tabs a{padding:6px 14px;border-radius:20px;background:#fff;border:1px solid #003399;color:#003399;text-decoration:none;font-size:14px}
.tabs a.on{background:#003399;color:#fff}
h2{border-left:5px solid var(--nc,#006600);padding-left:10px;color:var(--nc,#006600);margin-top:36px}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin:18px 0}
.card{width:200px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0002;text-align:center;padding:16px 10px}
.name{color:var(--nc,#006600);font-weight:bold;margin-top:12px}
.pos{color:var(--pc,#003399);font-size:14px}
.duty{font-size:12.5px;color:#555;margin-top:6px}

/* ===== กรอบรูป (ขนาดรูป 140x180) ===== */
.photo{width:140px;height:180px;margin:0 auto;overflow:hidden;background:#e5e9f0;box-sizing:border-box}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.frame-simple{border:var(--fw) solid var(--fc)}
.frame-double{border:3px solid var(--fc);box-shadow:0 0 0 4px #fff,0 0 0 calc(4px + var(--fw)) var(--fc)}
.frame-gold{border:calc(var(--fw) + 2px) solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
  linear-gradient(135deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c) border-box}
.frame-shadow{border:calc(var(--fw) + 2px) solid #fff;border-radius:8px;box-shadow:0 4px 14px #0005}
.frame-oval{border:var(--fw) solid var(--fc);border-radius:50%}