/* ============================================================
   tool-layout.css — Layout 2 cột dùng chung (image + video)
   Đặt tại /assets/vendor/tool-layout.css, link SAU tool.css
   Kế thừa biến màu --bg/--card/--acc/--line/--mut/--txt từ tool.css
   ============================================================ */

/* container rộng hơn khi có layout 2 cột */
.wrap:has(.t2) { }
.title_tool{ text-align:center; }
.option_title{font-size: 21px;
    font-weight: bold;
    text-align: center;}
.t2 { display:flex; gap:20px; align-items:flex-start; margin-top:14px; }

/* cột trái: preview lớn / lưới ảnh — co giãn */
.t2-left { flex:1 1 auto; min-width:0; text-align: center;}

/* cột phải: bảng công cụ — cố định 360px */
.t2-right { flex:0 0 360px; }

/* desktop: cột phải dính theo cuộn, tự cuộn nếu dài */
@media (min-width:861px){
  .t2-right { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; padding-right:2px; }
}

/* nút chọn / thêm file đặt trên cùng cột trái */
.t2-left .file-row { margin-bottom:12px; }

/* preview lớn trong cột trái không tràn */
.t2-left canvas, .t2-left video, .t2-left img.preview { max-width:100%; max-height:74vh; }

/* gợi ý khi chưa có ảnh (lưới rỗng) */
.t2-left .thumbs:empty::after{
  content:"The selected image will be displayed here";
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:220px;
  border:1.5px dashed var(--line); border-radius:12px;
  color:var(--mut); font-size:13px; text-align:center;
}

/* mobile: xếp dọc, cột phải xuống dưới preview */
@media (max-width:860px){
  .t2 { flex-direction:column; }
  .t2-right { flex-basis:auto; width:100%; position:static; max-height:none; }
}