/* ==========================================================================
   Nailmaker Online — giao diện trình chỉnh ảnh
   Nạp sau style.css: dùng lại token màu, header, footer của trang chính.
   ========================================================================== */

.tool-body{overflow:hidden}          /* khung công cụ tự cuộn, không để cả trang trôi */

:root{--foot:58px; --head:66px}

/* Thanh dưới luôn dính đáy màn hình, không trôi theo trang; phần còn lại của
   khung công cụ trừ sẵn đúng chiều cao ấy nên không có gì bị che. */
.tool{display:grid; grid-template-columns:1fr 372px; grid-template-rows:minmax(0,1fr); gap:0;
  height:calc(100dvh - var(--head) - var(--foot)); background:var(--paper)}

/* ---------- khung ảnh ---------- */
.stage{position:relative; display:grid; place-items:center; padding:18px;
  background:
    linear-gradient(45deg, color-mix(in srgb,var(--ink) 4%,transparent) 25%, transparent 25%) 0 0/22px 22px,
    linear-gradient(-45deg, color-mix(in srgb,var(--ink) 4%,transparent) 25%, transparent 25%) 0 11px/22px 22px,
    var(--paper-2);
  overflow:hidden}
.stage.over{outline:2px dashed var(--purple); outline-offset:-12px}
#view{display:block; border-radius:6px; touch-action:none; cursor:default;
  box-shadow:0 26px 60px -30px rgba(60,20,90,.55)}
.stage.crop #view{cursor:crosshair}
.dragtip{margin:16px 0 0; font-size:.8rem; color:var(--ink-soft); opacity:.72}

/* ---------- lớp phủ khi đang kéo tệp ---------- */
/* pointer-events:none là bắt buộc: lớp phủ nằm dưới con trỏ sẽ bắn thêm một
   cặp dragenter/dragleave, bộ đếm độ sâu lệch và khung nét đứt nhấp nháy. */
.drop{position:absolute; inset:0; z-index:6; display:none; place-items:center;
  pointer-events:none; background:color-mix(in srgb, var(--purple) 12%, transparent);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.stage.over .drop{display:grid}
.drop span{background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:.9rem; font-weight:600; color:var(--ink);
  box-shadow:0 18px 40px -22px rgba(60,20,90,.7)}


/* Màn mở đầu: một câu, hai nút, bốn bước. Bản trước có cả một đoạn ba dòng
   giải thích chuyện "không tải lên" — điều đó đã nằm sẵn ở thanh trên và thanh
   dưới, nhắc lần thứ ba chỉ làm người ta phải đọc trước khi được bấm. */
.empty{text-align:center; max-width:40ch; color:var(--ink-soft)}
.empty h2{font-family:var(--serif); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.1rem);
  line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin:0; text-wrap:balance}
.empty .lead{margin:12px 0 0; font-size:.95rem}
.empty .btn{cursor:pointer; border:0; font-family:inherit}

/* ---------- bảng điều khiển ---------- */
.side{display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--card); min-height:0}
#tabs{display:flex; gap:2px; padding:10px 10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tab{border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:.78rem; font-weight:600;
  line-height:1.25; padding:8px 9px; border-radius:9px 9px 0 0; cursor:pointer;
  border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); border-bottom-color:var(--rose); background:color-mix(in srgb,var(--rose) 8%,transparent)}

/* min-height:0 là BẮT BUỘC cho thẻ con flex có overflow. Thiếu nó thì #panel
   nở ra theo nội dung thay vì tự cuộn — phần cuối nhóm "Tinh chỉnh" bị cắt cụt
   và không có cách nào kéo tới. Cùng họ với cái bẫy min-width:0 ở thanh thẻ. */
#panel{flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:13px 14px; display:flex; flex-direction:column; gap:10px}
/* Thẻ con KHÔNG được co lại. Mặc định flex item co được, mà `min-height:auto`
   lại bị vô hiệu khi phần tử có `overflow` khác visible — đúng trường hợp của
   nhóm "Tinh chỉnh" (`.adv{overflow:hidden}`): nó co còn 2px trong khi ruột cao
   hơn 800px, phần cuối bị cắt và không cách nào kéo tới. */
#panel > *{flex:none}
#panel::-webkit-scrollbar{width:10px}
#panel::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}

.row{display:flex; flex-direction:column; gap:6px}
.row > label{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
.hint{margin:0; font-size:.82rem; color:var(--ink-soft); line-height:1.5}

/* Nút trong bảng công cụ KHÔNG dùng cỡ của trang giới thiệu: ở đây chúng nằm
   chen chúc hàng chục cái trong một cột hẹp, để cỡ quảng cáo thì đẩy phần tinh
   chỉnh xuống dưới nếp gấp và người dùng phải cuộn cho mọi việc vặt. */
.chips{display:flex; flex-wrap:wrap; gap:5px}
/* `line-height` phải ghi rõ: `font:inherit` kéo theo cả 1.6 của trang chữ, và
   một con số nhân cho chiều cao dòng đội thêm 6–8px cho MỖI nút — cộng hết
   trong một cột hẹp là đúng một màn hình phải cuộn thêm. */
.chip{border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-size:.78rem;
  line-height:1.2; padding:6px 11px; border-radius:999px; cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.chip:hover{border-color:var(--purple)}
.chip.on{background:var(--grad); border-color:transparent; color:#fff}
.chip.danger{color:#d6336c; border-color:color-mix(in srgb,#d6336c 35%,transparent)}
.chip.danger:hover{background:#d6336c; color:#fff; border-color:transparent}

.btn.wide{width:100%; justify-content:center; border:0; font-family:inherit; cursor:pointer;
  padding:9px 16px; font-size:.86rem; font-weight:600; line-height:1.25; gap:7px;
  box-shadow:0 8px 18px -12px rgba(139,52,212,.6)}
.btn.wide:hover{transform:none; filter:brightness(1.06)}
.btn.ghost.wide{background:none}

.slider{display:flex; flex-direction:column; gap:4px}
.shead{display:flex; justify-content:space-between; align-items:baseline; font-size:.78rem; color:var(--ink-soft)}
.shead b{color:var(--ink); font-variant-numeric:tabular-nums; font-size:.76rem}
.slider input[type=range]{width:100%; accent-color:var(--rose)}

.text{width:100%; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  color:var(--ink); font:inherit; font-size:.92rem; padding:9px 11px}
.text:focus{outline:2px solid var(--rose); outline-offset:-1px; border-color:transparent}

.swatches{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.sw{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); cursor:pointer; padding:0}
.sw.on{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--rose)}
.sw.custom{background:none; padding:0; overflow:hidden}

.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px}
.thumb{position:relative; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--paper-2); cursor:pointer; aspect-ratio:1; display:grid; place-items:center}
.thumb canvas{width:100%; height:100%; object-fit:cover; display:block}
.thumb.on{border-color:var(--rose); box-shadow:0 0 0 2px color-mix(in srgb,var(--rose) 35%,transparent)}
.thumb .rm{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:11px; display:grid; place-items:center}
.thumb .rm:hover{background:#d6336c}
.thumb .vtag{position:absolute; left:4px; bottom:4px; display:flex; align-items:center;
  gap:3px; background:rgba(0,0,0,.62); color:#fff; border-radius:5px; padding:2px 5px;
  font-size:.64rem; font-weight:700; letter-spacing:.02em}
.thumb .vtag b{font-weight:700}
.thumb.vid{border-color:color-mix(in srgb,var(--purple) 45%,var(--line))}

/* hai nút mở nằm một hàng: "Thêm ảnh" là việc chính nên rộng gấp đôi */
.pickrow{display:flex; gap:8px}
.pickrow .btn{flex:1 1 0; justify-content:center; min-width:0; padding:9px 10px;
  cursor:pointer; border:0; font-family:inherit; font-size:.84rem; font-weight:600; line-height:1.25}
.pickrow .btn:hover{transform:none}
.pickrow .btn.pick{flex:1.6 1 0}
.pickrow .btn[disabled]{opacity:.45; cursor:not-allowed}
.vinfo{font-variant-numeric:tabular-nums}

.cells{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px}
.cell{display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; padding:7px 9px}
.cell span{font-size:.74rem; font-weight:700; color:var(--ink-soft); flex:none}
.cell select{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.82rem}

/* ---------- thanh dưới ---------- */
.tool-foot{position:fixed; left:0; right:0; bottom:0; z-index:30;
  min-height:var(--foot); display:flex; align-items:center; gap:10px;
  padding:8px clamp(12px,2vw,20px);
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.tool-foot .sp{flex:1}
.iconbtn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-size:1rem; cursor:pointer; display:grid; place-items:center}
.iconbtn:disabled{opacity:.35; cursor:default}
.iconbtn:not(:disabled):hover{border-color:var(--purple); color:var(--purple)}
/* Không để nhãn rớt xuống dòng — trước đó nút cao gấp đôi và đội cả thanh lên. */
#compare{width:auto; padding:0 14px; gap:7px; font:inherit; font-size:.84rem; user-select:none;
  display:inline-flex; flex-direction:row; align-items:center; white-space:nowrap}
.ico{flex:none; display:block}
#save{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.tool-foot select{border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
  font:inherit; font-size:.84rem; padding:9px 10px}
#save{border:0; cursor:pointer; font-family:inherit}

.privacy-note{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--ink-soft);
  white-space:nowrap}
.privacy-note .ico{color:var(--purple)}
.privacy-note b{color:var(--ink); font-weight:600}

.nogl{max-width:40ch; text-align:center; color:var(--ink-soft); padding:40px}

/* ==========================================================================
   Màn hẹp — dựng như một ứng dụng, không phải một trang để cuộn

   Ảnh nằm yên ở nửa trên, bảng điều khiển tự cuộn ở nửa dưới, thanh lệnh dính
   đáy. Để cả trang cuộn thì vừa kéo thanh trượt vừa mất hút khung ảnh — không
   thấy mình đang chỉnh cái gì.
   ========================================================================== */
@media (max-width:900px){
  .tool{grid-template-columns:1fr; grid-template-rows:minmax(0,47dvh) minmax(0,1fr);
    height:calc(100dvh - var(--head) - var(--foot)); padding-bottom:0}
  .stage{min-height:0; padding:6px}
  /* header trang công cụ không có nút CTA nên co lại được, nhường chỗ cho ảnh */
  .tool-body header.site .wrap{height:52px}
  .side{border-left:0; border-top:1px solid var(--line); min-height:0}
  .tool-body{overflow:hidden}
  /* Dòng "ảnh không rời khỏi máy" ở header luôn thắng .hide-sm vì hai lớp
     chọi một — phải ẩn bằng luật riêng, nếu không nó đẩy header tràn ngang. */
  header.site .privacy-note{display:none}
  header.site .wrap{gap:10px}
  nav.main{gap:12px}
  /* vùng chạm tối thiểu cho ngón tay — bảng hẹp lại nhưng ngón tay thì không */
  .chip{padding:9px 13px; font-size:.85rem}
  .lookrow .chip{padding:9px 6px; font-size:.82rem}
  .morechip{width:38px; height:38px}
  .btn.wide, .pickrow .btn{padding:12px 14px; font-size:.9rem}
  .slotbtn{padding:9px 10px}
  .tab{padding:11px 10px; font-size:.82rem}
  /* Sáu thẻ phải nằm MỘT hàng: tràn xuống hàng hai là ăn mất ~40px của bảng
     điều khiển, vốn đã chật. Máy hẹp quá thì cho trượt ngang thay vì xuống dòng. */
  /* min-width:0 là bắt buộc: thiếu nó thì thẻ con flex nở theo nội dung và
     đẩy CẢ TRANG cuộn ngang, thay vì tự cuộn trong lòng nó. */
  .side{min-width:0}
  #tabs{flex-wrap:nowrap; overflow-x:auto; min-width:0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  #tabs::-webkit-scrollbar{height:0}
  .tab{flex:none}
  .slider input[type=range]{height:26px}
  .sw{width:32px; height:32px}
  #panel{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
}
@media (max-width:400px){
  .tab{padding:11px 7px; font-size:.78rem}
}
@media (max-width:560px){
  :root{--head:52px}
  /* Chỗ hẹp thì bỏ bớt chữ, KHÔNG cho xuống dòng: thanh dính đáy mà cao hai
     hàng sẽ nuốt mất khung ảnh. Mọi thứ phải lọt trong 360px. */
  .tool-foot{gap:5px; padding-inline:8px}
  .tool-foot .privacy-note{display:none}
  .tool-foot .sp{flex:0 0 2px}
  #compare span{display:none}
  #compare{padding:0 10px; width:auto}
  .iconbtn{width:34px; height:34px}
  .tool-foot select{padding:7px 2px 7px 6px; font-size:.76rem; max-width:74px}
  #save{flex:1; min-width:0; justify-content:center; padding:11px 12px; font-size:.9rem}
  .tool{grid-template-rows:minmax(0,45dvh) minmax(0,1fr)}
}
/* máy rất thấp (hoặc đã mở bàn phím): nhường chỗ cho bảng điều khiển */
@media (max-height:620px) and (max-width:900px){
  .tool{grid-template-rows:minmax(0,34dvh) minmax(0,1fr)}
}

/* nhãn nhóm trong bảng điều khiển */
.group{margin:4px 0 -4px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--purple); font-weight:700; border-top:1px solid var(--line); padding-top:10px}
textarea.text{resize:vertical; min-height:52px; line-height:1.4; font-family:inherit}

/* nút sáng/tối của trang công cụ dùng icon vector, không dùng ký tự ☀/☾ */
.theme-toggle .ico{display:block}
.thumb .rm svg{display:block}

/* thanh dưới đổi vai khi làm video: ô định dạng bị giấu đi */
.tool-foot select[hidden]{display:none}
#save .lbl{display:inline-flex; gap:0}

/* thông báo trong trang — thay cho hộp thoại alert() vốn đóng băng cả trang */
.notice{position:fixed; left:50%; bottom:calc(var(--foot) + 14px); transform:translateX(-50%);
  z-index:40; margin:0; max-width:min(92vw,460px); text-align:center;
  padding:11px 18px; border-radius:12px; font-size:.88rem; line-height:1.45;
  background:#d6336c; color:#fff; box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.notice.ok{background:var(--grad)}

/* thư viện khung */
.frames{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.fthumb{padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
  cursor:pointer; display:flex; flex-direction:column; gap:6px; align-items:stretch}
.fthumb canvas{display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.7)}
.fthumb span{font-size:.74rem; color:var(--ink-soft); text-align:center}
.fthumb:hover{border-color:var(--purple)}
.fthumb.on{border-color:var(--rose); box-shadow:0 0 0 2px color-mix(in srgb,var(--rose) 32%,transparent)}
.fthumb.on span{color:var(--ink); font-weight:600}

/* ---------- nhóm "Tinh chỉnh" gập lại ---------- */
.adv{border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden}
.adv > summary{list-style:none; cursor:pointer; padding:9px 12px; font-size:.76rem; font-weight:700; line-height:1.25;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.adv > summary::-webkit-details-marker{display:none}
.adv > summary::before{content:"›"; font-size:1.15rem; line-height:1; transition:transform .2s; color:var(--purple)}
.adv[open] > summary::before{transform:rotate(90deg)}
.adv > summary:hover{color:var(--ink)}
.advbody{display:flex; flex-direction:column; gap:11px; padding:3px 12px 12px}

/* ---------- màn hình mở đầu ---------- */
.start{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.start .btn{cursor:pointer; border:0; font-family:inherit}
.start .btn.ghost{border:1.5px solid color-mix(in srgb,var(--purple) 40%,transparent)}
/* Bốn bước: dựng thành một TRÌNH TỰ có đường nối, không phải bốn viên rời.
   Bốn viên rời trông như bốn lựa chọn ngang hàng — người đọc không thấy được
   là phải đi từ 1 tới 4. */
.steps4{list-style:none; display:flex; justify-content:center; align-items:flex-start;
  gap:0; margin:clamp(34px,6vh,54px) auto 0; padding:0; max-width:460px; counter-reset:step}
.steps4 li{position:relative; flex:1 1 0; display:flex; flex-direction:column;
  align-items:center; gap:9px; text-align:center; font-size:.78rem; color:var(--ink-soft)}
/* đường nối chạy từ vòng tròn trước sang vòng tròn này */
.steps4 li::before{content:""; position:absolute; z-index:0; top:14px; left:-50%;
  width:100%; height:2px; background:var(--line)}
.steps4 li:first-child::before{display:none}
.steps4 b{position:relative; z-index:1; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff;
  font-size:.82rem; font-weight:700; box-shadow:0 0 0 4px var(--paper-2)}

@media (max-width:560px){
  /* Màn hẹp thì dựng dọc: bốn viên xuống hai hàng so le còn khó đọc hơn nữa. */
  .steps4{flex-direction:column; align-items:stretch; max-width:220px; gap:0}
  .steps4 li{flex-direction:row; align-items:center; gap:12px; text-align:left; padding:7px 0}
  .steps4 li::before{top:-50%; left:14px; width:2px; height:100%}
}
  background:var(--grad); color:#fff; font-size:.68rem}

/* Máy không có WebGL2: giấu hết phần chỉnh sửa, chỉ còn lời nhắc */
html.no-gl .side, html.no-gl .tool-foot{display:none}
html.no-gl .tool{grid-template-columns:1fr; height:calc(100dvh - var(--head))}
html.no-gl .nogl{display:grid; place-items:center; height:100%}

/* ---------- chưa mở ảnh: màn mở đầu chiếm trọn khung ---------- */
html.nm-empty .side{display:none}
html.nm-empty .tool{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr)}
html.nm-empty .stage{overflow:auto; align-content:center; padding:22px 16px}
html.nm-empty .tool-foot{opacity:.45; pointer-events:none}

/* ---------- màn chờ khi đang đọc ảnh ---------- */
.busy{position:absolute; inset:0; z-index:5; display:grid; place-items:center; gap:14px;
  align-content:center; background:color-mix(in srgb, var(--paper-2) 82%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-size:.9rem; color:var(--ink-soft); text-align:center; padding:20px}
.busy .spin{width:34px; height:34px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--purple) 22%, transparent);
  border-top-color:var(--purple); animation:nmspin .8s linear infinite}
@keyframes nmspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .busy .spin{animation-duration:2.4s} }

/* ---------- hàng chip một dòng (bộ look) ---------- */
.chips.oneline{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:2px; margin-inline:-2px; padding-inline:2px}
.chips.oneline::-webkit-scrollbar{height:0}
.chips.oneline .chip{flex:none; padding:8px 12px; font-size:.8rem}

/* ---------- thanh gạt nhiều đoạn (mức độ) ---------- */
.segwrap{display:flex; align-items:center; gap:10px}
.seglabel{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; flex:none}
.seg{display:flex; flex:1; min-width:0; padding:3px; gap:2px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px}
.segbtn{flex:1; min-width:0; border:0; background:transparent; color:var(--ink-soft); line-height:1.25;
  font:inherit; font-size:.8rem; padding:7px 4px; border-radius:7px; cursor:pointer;
  transition:background .18s, color .18s}
.segbtn:hover{color:var(--ink)}
.segbtn.on{background:var(--card); color:var(--ink); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.segbtn:focus-visible{outline:2px solid var(--rose); outline-offset:-2px}

/* ---------- thanh "đang dùng khung nào" ---------- */
.framenow{display:flex; align-items:center; gap:11px; padding:8px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper-2)}
.framenow .mini{width:38px; height:auto; border-radius:5px; display:block; flex:none;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.8)}
.framename{flex:1; min-width:0; font-size:.9rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.framenow .chip{flex:none}

/* Thuộc tính `hidden` chỉ là display:none của TRÌNH DUYỆT — bất kỳ luật display
   nào của mình cũng thắng nó. `.busy{display:grid}` và `#view{display:block}`
   khiến `el.hidden = true` không giấu được gì: màn chờ đứng mãi trên khung ảnh.
   Một luật chặn hết, đặt cuối tệp. */
.tool-body [hidden]{display:none !important}

/* ---------- ô ảnh đang chờ giải mã ---------- */
.thumb.pending{cursor:default; border-style:dashed}
.thumb .skel{position:absolute; inset:0; border-radius:9px;
  background:linear-gradient(100deg,
    var(--paper-2) 28%,
    color-mix(in srgb, var(--purple) 16%, var(--paper-2)) 50%,
    var(--paper-2) 72%);
  background-size:220% 100%; animation:nmskel 1.15s linear infinite}
@keyframes nmskel{from{background-position:120% 0} to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){ .thumb .skel{animation-duration:3s} }

/* ---------- hàng look: 3 cái + nút mở bảng chọn ---------- */
.lookrow{flex-wrap:nowrap; align-items:center}
.lookrow .chip{flex:1 1 0; min-width:0; text-align:center; padding:7px 6px; font-size:.78rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.morechip{flex:none !important; width:32px; height:32px; padding:0 !important;
  display:grid; place-items:center; border-radius:50%}
.morechip svg{display:block}

/* ---------- bảng chọn nổi ---------- */
.sheet-back{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:18px;
  background:rgba(10,5,18,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.sheet{width:min(520px,100%); max-height:min(78dvh,700px); display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line)}
.sheet-head strong{font-size:.95rem; font-weight:700; color:var(--ink)}
.sheet-x{width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.sheet-x:hover{border-color:var(--purple); color:var(--purple)}
.sheet-body{overflow-y:auto; padding:16px}
.lookgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
.lookcell{padding:7px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
  cursor:pointer; display:flex; flex-direction:column; gap:7px}
.lookcell canvas{display:block; width:100%; height:auto; border-radius:7px}
.lookcell span{font-size:.8rem; color:var(--ink-soft); text-align:center}
.lookcell:hover{border-color:var(--purple)}
.lookcell.on{border-color:var(--rose); box-shadow:0 0 0 2px color-mix(in srgb,var(--rose) 32%,transparent)}
.lookcell.on span{color:var(--ink); font-weight:600}
@media (max-width:560px){
  .sheet-back{padding:0; place-items:end stretch}
  .sheet{width:100%; max-height:82dvh; border-radius:18px 18px 0 0; border-bottom:0}
}

/* ---------- ô ảnh của khung: bấm mở bảng chọn có ảnh ---------- */
.slotbtn{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 9px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); font:inherit; cursor:pointer}
.slotbtn:hover{border-color:var(--purple)}
.slotno{flex:none; font-size:.72rem; font-weight:700; color:var(--ink-soft)}
.slotmini{flex:none; width:30px; height:30px; border-radius:6px; object-fit:cover; display:block}
canvas.slotmini{width:30px; height:auto; max-height:40px}
.slotempty{background:repeating-linear-gradient(45deg,
  color-mix(in srgb,var(--ink) 8%,transparent) 0 5px, transparent 5px 10px);
  border:1px dashed var(--line); border-radius:6px; display:block}
.slotempty.big{width:100%; aspect-ratio:1; border-radius:7px}
.slotname{flex:1; min-width:0; font-size:.82rem; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slotswap{flex:none; display:grid; place-items:center; width:26px; height:26px;
  border-radius:7px; color:var(--purple);
  background:color-mix(in srgb, var(--purple) 12%, transparent);
  transition:background .18s, color .18s}
.slotswap svg{display:block}
.slotbtn:hover .slotswap{background:var(--grad); color:#fff}

/* mỗi dòng chữ của khung: ô nhập + thanh cỡ riêng, gom thành một khối */
.textitem{display:flex; flex-direction:column; gap:8px; padding:11px 12px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper)}
.textitem .slider .shead{font-size:.74rem}

/* dòng nhắc thao tác ngay trên khung ảnh */
.hint.onstage{border-left:2px solid var(--purple); padding-left:10px; margin:2px 0 6px}

/* ---------- ô "thêm tệp" và ô video trong bảng chọn ảnh ---------- */
.lookcell.addcell{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; border-style:dashed; color:var(--purple); min-height:120px}
.lookcell.addcell:hover{background:color-mix(in srgb,var(--purple) 10%,transparent)}
.plusbox{display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:color-mix(in srgb,var(--purple) 14%,transparent)}
.plusbox svg{display:block}
.lookcell{position:relative}
.cellvtag{position:absolute; left:8px; top:8px; font-size:.66rem; font-weight:700}

/* ---------- nhạc nền cho clip ---------- */
/* Dùng lại dáng hàng .slotbtn nhưng đây là một DÒNG THÔNG TIN, không bấm được
   cả dòng — chỉ nút × bên phải là bấm được. */
.slotbtn.nhac{cursor:default}
.slotbtn.nhac:hover{border-color:var(--line)}
.nhacico{flex:none; display:grid; place-items:center; width:30px; height:30px;
  border-radius:7px; color:var(--purple);
  background:color-mix(in srgb,var(--purple) 13%,transparent)}
.nhacico svg{display:block}
.slotbtn.nhac .slotswap{border:0; cursor:pointer; color:var(--ink-soft);
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.slotbtn.nhac .slotswap:hover{background:#d6336c; color:#fff}