/* thumbnail.css — tab Thiết kế thumbnail (3 cột, preview, lớp chữ) */
/* ---------- Tab Thumbnail: 3 cột, khung giữa đứng yên ---------- */
#tab1 .wrap{padding-bottom:16px}
.ed-wrap{display:grid;grid-template-columns:330px minmax(0,1fr) 340px;gap:16px;align-items:stretch}
@media(max-width:1280px){.ed-wrap{grid-template-columns:300px minmax(0,1fr) 310px}}
@media(max-width:1020px){.ed-wrap{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.ed-wrap{grid-template-columns:1fr}}
/* Desktop: tab1 vừa khít viewport — trang không cuộn, chỉ 2 panel 2 bên cuộn riêng
   (menu chính đã chuyển sang sidebar trái nên không còn topbar chiếm chỗ) */
@media(min-width:1025px){
  #tab1 .wrap{padding-bottom:0}
  /* Trang thumbnail khít viewport: ẩn footer để không còn dải trống dưới cùng */
  body.page-1 .pagefoot{display:none}
  #tab1 .ed-wrap{height:calc(100vh - 16px);min-height:480px}
  #tab1 .ed-wrap>*{min-height:0;min-width:0}
  #tab1 .ed-panel{align-self:stretch;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  #tab1 .ed-panel::-webkit-scrollbar{width:8px}
  #tab1 .ed-panel::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  #tab1 .preview{overflow:hidden;align-self:stretch}
  #tab1 .preview-body{overflow:hidden;min-height:0}
}
@media(max-width:1020px){
  #tab1 .ed-wrap{height:auto}
  #tab1 .ed-panel{overflow:visible}
}
.ed-panel{padding:18px}
.ed-sec{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-strong);
  margin:18px 0 10px;font-weight:800;display:flex;align-items:center;gap:8px}
.ed-sec:first-child{margin-top:0}
.ed-sec::after{content:"";flex:1;height:1px;background:var(--line)}
label.check{display:flex;align-items:center;gap:9px;margin:4px 0 14px;
  font-size:13px;color:var(--txt-2);text-transform:none;letter-spacing:0;font-weight:500;
  cursor:pointer;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:9px 12px}
label.check input[type=checkbox]{width:16px;height:16px;padding:0;margin:0;accent-color:var(--accent);cursor:pointer}

/* Preview giữa */
.preview{padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:#0f172a;border:1px solid #1e293b;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);min-height:480px}
.preview-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:22px;background:
  repeating-conic-gradient(#151f33 0% 25%,#0e1526 0% 50%) 50%/24px 24px;min-height:420px}
.preview .hint{color:#8ea0b8}
#stage{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
  object-fit:contain;border-radius:8px;touch-action:none;cursor:grab;background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
#stage.grabbing{cursor:grabbing}
.preview-tip{font-size:12px;color:#7d8aa0;background:rgba(255,255,255,.04);
  border:1px solid #1e293b;border-radius:8px;padding:7px 12px}
.preview-tip b{color:#cbd5e1}

/* Lớp chữ */
.layer{border:1.5px solid var(--line);border-radius:var(--radius-s);background:#fff;
  padding:12px;margin-bottom:10px;transition:border-color .12s,box-shadow .12s}
.layer.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,148,136,.13)}
.layer h3{margin:0 0 8px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.layer h3 .dot{width:10px;height:10px;border-radius:99px;background:var(--line-strong);flex:none}
.layer.sel h3 .dot{background:var(--accent)}
.layer h3 .acts{margin-left:auto;display:flex;gap:4px}
.layer h3 .acts button{width:auto;padding:3px 9px;font-size:12px;font-weight:700;
  background:#fff;color:var(--txt-2);border:1px solid var(--line);border-radius:7px;box-shadow:none}
.layer h3 .acts button:hover{border-color:var(--danger);color:var(--danger);filter:none}
.lrow{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);background:#fff;margin-bottom:7px;cursor:pointer;font-size:13px;
  font-weight:500;transition:border-color .12s}
.lrow:hover{border-color:var(--line-strong)}
.lrow.sel{border-color:var(--accent);background:var(--accent-soft)}
.lrow .dot{width:10px;height:10px;border-radius:99px;background:var(--line-strong);flex:none}
.lrow.sel .dot{background:var(--accent)}
.lrow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .acts{display:flex;gap:4px;flex:none}
.lrow .acts button{width:auto;padding:2px 8px;font-size:12px;font-weight:700;
  background:#fff;color:var(--txt-2);border:1px solid var(--line);border-radius:7px;box-shadow:none}
.lrow .acts button:hover{border-color:var(--accent);color:var(--accent-strong);filter:none}
.lrow .acts button.del:hover{color:var(--danger);border-color:var(--danger)}
.ed-right{padding:18px}
#layerForm .layer{padding:12px;margin-bottom:8px;background:var(--panel-2)}
#layerForm .layer textarea{min-height:40px}
#layerForm details.adv{margin:8px 0;background:#fff}
.layer textarea{min-height:54px;resize:vertical;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media(max-width:520px){.grid3{grid-template-columns:1fr 1fr}}
.layer .field{margin-bottom:9px}
.layer input[type=range]{width:100%}
.adv{margin:4px 0 14px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--panel-2);padding:0 12px}
.adv summary{cursor:pointer;padding:10px 0;font-size:13px;font-weight:600;color:var(--txt-2);
  user-select:none;list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"▸ ";color:var(--accent)}
.adv[open] summary::before{content:"▾ "}
.adv .field{margin:10px 0 4px}
.tipbox{font-size:12.5px;color:var(--txt-2);background:var(--warn-soft);
  border:1px solid #fde68a;border-radius:var(--radius-s);padding:9px 12px;margin-top:10px;line-height:1.6}
.tipbox b{color:var(--warn)}
/* Popup đặt tên mẫu — dùng chung .modal với tab Danh sách */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:99;padding:16px}
.modal.open{display:flex}
.modal .box{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;width:460px;max-width:100%;box-shadow:var(--shadow)}
.modal .box h3{margin:0 0 14px;font-size:16px;font-weight:800}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.modal .foot button{width:auto;padding:9px 20px;font-size:13.5px}
.modal .foot .ghost{margin:0}
.modal .foot .addbtn{margin:0}