/* ============ Admin CMS — friendly UI ============ */
.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.admin-overlay.on{opacity:1;pointer-events:auto}

.admin-panel{
  position:fixed;top:0;right:0;height:100%;width:440px;max-width:94vw;z-index:100;
  background:#161618;border-left:1px solid var(--line-d);
  transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;font-family:var(--f-thai);
}
.admin-panel.on{transform:none}

.admin-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 18px;flex:none}
.admin-head h3{font-family:var(--f-thai);font-weight:700;font-size:19px;color:#fff}
.admin-head .sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--red);margin-top:4px}
.admin-x{width:36px;height:36px;border:1px solid var(--line-d);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;transition:.2s;flex:none}
.admin-x:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg)}

/* language switch */
.admin-langsw{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 22px 6px;padding:12px 14px;background:#0f0f11;border:1px solid #26262a;border-radius:11px}
.alsw-cap{font-size:12.5px;color:#cfcfd2;font-weight:500}
.alsw-btns{display:flex;background:#1d1d20;border-radius:8px;padding:3px}
.alsw-btns button{font-family:var(--f-thai);font-size:13px;font-weight:600;color:var(--muted-d);padding:7px 18px;border-radius:6px;transition:.2s}
.alsw-btns button.on{background:var(--red);color:#fff}

.admin-body{flex:1;overflow-y:auto;padding:8px 16px 28px;scroll-behavior:smooth}
.admin-body::-webkit-scrollbar{width:8px}
.admin-body::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

/* quick nav */
.anav{display:flex;flex-wrap:wrap;gap:7px;padding:10px 4px 16px}
.anav button{font-size:11.5px;font-family:var(--f-thai);color:#bdbdc1;background:#1d1d20;border:1px solid #2a2a2f;border-radius:30px;padding:6px 13px;transition:.2s}
.anav button:hover{border-color:var(--red);color:#fff}

/* sections */
.asec{background:#1a1a1d;border:1px solid #26262a;border-radius:12px;margin-bottom:10px;overflow:hidden}
.asec[open]{border-color:#34343a}
.asec summary{display:flex;align-items:center;gap:12px;font-family:var(--f-thai);font-size:15px;font-weight:600;color:#fff;padding:16px 18px;cursor:pointer;list-style:none;position:relative}
.asec summary::-webkit-details-marker{display:none}
.asec summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-65%) rotate(45deg);transition:.25s}
.asec[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.asec summary:hover{color:var(--red)}
.asec-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;background:#0f0f11;border-radius:9px;color:var(--red)}
.asec-ic svg{width:18px;height:18px}
.asec-body{padding:4px 18px 20px}

/* fields */
.af{margin-bottom:15px}
.af-label{display:block;font-size:13px;color:#e6e6e8;font-weight:500;margin-bottom:7px}
.af input,.af textarea,.af select{
  width:100%;background:#0f0f11;border:1px solid #2c2c30;border-radius:8px;
  color:#fff;font-family:var(--f-thai);font-size:14px;padding:11px 12px;transition:.15s;
}
.af textarea{resize:vertical;line-height:1.55;min-height:48px}
.af input:focus,.af textarea:focus,.af select:focus{outline:none;border-color:var(--red);background:#141416}
.af select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ED1C24' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.af-hint{display:block;font-size:11px;color:var(--muted-d);margin-top:5px}

/* image field */
.af-img{display:flex;gap:12px;align-items:flex-start}
.af-thumb{width:96px;height:66px;flex:none;object-fit:cover;border-radius:8px;background:#0c0c0e;filter:grayscale(.4)}
.af-img-c{flex:1;display:flex;flex-direction:column;gap:8px}
.af-up{background:#26262a;border:1px solid #3a3a40;border-radius:8px;color:#fff;font-size:12.5px;padding:10px;font-family:var(--f-thai);font-weight:600;transition:.2s}
.af-up:hover{background:var(--red);border-color:var(--red)}
.af-img-c input{font-size:12px;padding:8px 11px}

/* language visibility — driven by body class */
.admin-body.lang-th [data-lang="en"]{display:none}
.admin-body.lang-en [data-lang="th"]{display:none}

/* list editor */
.list-ed{margin-top:16px;border-top:1px dashed rgba(255,255,255,.12);padding-top:16px}
.list-h{font-family:var(--f-thai);font-size:13px;font-weight:600;color:#fff;margin-bottom:13px;display:flex;align-items:center;gap:9px}
.list-h .cnt{background:var(--red);color:#fff;border-radius:20px;font-size:10px;font-family:var(--f-mono);padding:2px 9px}
.ai{background:#0f0f11;border:1px solid #28282c;border-radius:10px;padding:13px;margin-bottom:11px}
.ai-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.ai-n{font-family:var(--f-thai);font-size:12.5px;font-weight:600;color:var(--red)}
.ai-acts{display:flex;gap:5px}
.ai-mv,.ai-del{font-size:11.5px;font-family:var(--f-thai);border-radius:6px;padding:5px 10px;transition:.18s;border:1px solid #333;line-height:1}
.ai-mv{background:#26262a;color:#bbb;font-size:13px;padding:5px 9px}
.ai-mv:hover{background:#34343a;color:#fff}
.ai-del{background:transparent;color:#e0726e;border-color:rgba(224,114,110,.4)}
.ai-del:hover{background:#d9534f;color:#fff;border-color:#d9534f}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ai-grid .af{margin-bottom:0}
.ai-grid .af:has(textarea),.ai-grid .af:has(.af-img){grid-column:1/-1}
.ai-add{width:100%;background:transparent;border:1.5px dashed #3a3a40;border-radius:9px;color:#9a9a9e;font-family:var(--f-thai);font-size:13px;font-weight:600;padding:11px;transition:.2s;margin-top:3px}
.ai-add:hover{border-color:var(--red);color:var(--red);background:rgba(237,28,36,.05)}
.sublist{margin-top:12px;padding-left:12px;border-left:2px solid #2c2c30}
.sub-h{font-size:11.5px;color:var(--muted-d);margin-bottom:9px}
.sub-ai{padding:11px;background:#161618}

/* footer actions */
.admin-foot{flex:none;padding:14px 18px;border-top:1px solid var(--line-d);display:flex;gap:8px}
.admin-foot button{flex:1;font-family:var(--f-thai);font-size:12.5px;font-weight:600;padding:11px 6px;border-radius:8px;transition:.2s;border:1px solid #2c2c30;background:#1d1d20;color:#ddd}
.admin-foot button:hover{border-color:var(--red);color:#fff}
#adminReset:hover{background:#d9534f;border-color:#d9534f}

/* save toast */
.admin-toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%) translateY(10px);
  background:#1f8a5b;color:#fff;font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:30px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:5}
.admin-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

body.admin-open .admin-btn{opacity:0;pointer-events:none}

/* full-screen dashboard link inside drawer */
.admin-fulllink{display:flex;align-items:center;gap:9px;margin:0 22px 8px;padding:12px 14px;background:rgba(237,28,36,.08);border:1px solid rgba(237,28,36,.3);border-radius:11px;color:#fff;font-family:var(--f-thai);font-size:13px;font-weight:600;transition:.2s}
.admin-fulllink:hover{background:rgba(237,28,36,.18);border-color:var(--red)}
.admin-fulllink svg{width:17px;height:17px;color:var(--red);flex:none}

@media(max-width:640px){
  .admin-panel{width:100%}
  .ai-grid{grid-template-columns:1fr}
  .af-img{flex-direction:column}
  .af-thumb{width:100%;height:120px}
}