/* =====================================================================
   2007 Studio — Thư viện ảnh (thu-vien.html · sales-kit/kho-anh.html · quantri)
   Pinterest trên nền design system giấy–mực của site (không thêm màu mới).
   ===================================================================== */

/* ---------- tiện ích ---------- */
.tv-an{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* khung tràn viền: lề 8px mobile → 16px desktop, luôn né tai thỏ */
.tv-tran{padding-left:max(8px,var(--sa-left));padding-right:max(8px,var(--sa-right))}
@media(min-width:720px){.tv-tran{padding-left:max(12px,var(--sa-left));padding-right:max(12px,var(--sa-right))}}
@media(min-width:900px){.tv-tran{padding-left:max(16px,var(--sa-left));padding-right:max(16px,var(--sa-right))}}

/* trang thư viện không còn .pagehead nên phải tự chừa chỗ cho header cố định */
body[data-page=thu-vien] main{padding-top:var(--tv-top,64px)}
.tv-tran .tv-mas{margin-top:8px}

/* ---------- thanh dính: hàng tab kiểu Pinterest ---------- */
.tv-bar{position:sticky;top:var(--tv-top,64px);z-index:60;background:rgba(246,242,235,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);display:flex;align-items:stretch;gap:4px}
.tv-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;padding:0 2px;scroll-padding-inline:12px}
.tv-tabs::-webkit-scrollbar{display:none}
.tv-tabs .tab{flex:none;border:0;background:transparent;color:var(--ink-3);font-size:.86rem;font-weight:600;padding:0 10px;height:48px;line-height:48px;white-space:nowrap;position:relative;font-family:var(--sans)}
.tv-tabs .tab.on{color:var(--ink);font-weight:700}
.tv-tabs .tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--ink);border-radius:2px}
.tv-bar .hanh{display:flex;align-items:center;gap:6px;flex:none;padding-right:max(6px,var(--sa-right));padding-left:6px;background:linear-gradient(90deg,rgba(246,242,235,0),rgba(246,242,235,.96) 22%)}
.tv-tron{position:relative;border:0;background:transparent;color:var(--ink);width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:none}
.tv-tron:hover{background:rgba(23,20,15,.06)}
.tv-tron svg{width:19px;height:19px;display:block}
.tv-tron .sodem{position:absolute;top:-1px;right:-2px;background:var(--ink);color:var(--paper);font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.tv-dem{font-size:.75rem;color:var(--label);padding:8px max(8px,var(--sa-left)) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-dem:empty{display:none}

/* nút cũ (bảng lọc, quantri) — giữ nguyên */
.tv-iconbtn{display:inline-flex;align-items:center;gap:.45em;border:1px solid var(--hair-3);background:transparent;border-radius:999px;padding:.5em 1em;font-size:.82rem;font-weight:600;color:var(--ink);min-height:38px;position:relative}
.tv-iconbtn .sodem{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--paper);font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.tv-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 12px;scrollbar-width:none;-ms-overflow-style:none}
.tv-chips::-webkit-scrollbar{display:none}
.tv-chips .chip{flex:none;white-space:nowrap}

/* ---------- lưới card bộ ảnh (kiểu Flickr) ---------- */

/* ---------- masonry (kiểu Pinterest) ---------- */
.tv-mas{display:flex;gap:var(--tv-gap,8px);align-items:flex-start;margin-top:16px}
.tv-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--tv-gap,8px)}
.tv-cell{min-width:0}
.tv-anh{position:relative;display:block;width:100%;border:0;padding:0;background:#E9E2D4;border-radius:12px;overflow:hidden;cursor:zoom-in}
@media(min-width:720px){.tv-anh{border-radius:14px}}
.tv-anh img{width:100%;height:auto;display:block}
.tv-trong{border:1px dashed var(--hair-3);border-radius:14px;padding:44px 20px;text-align:center;margin-top:20px}
.tv-trong b{font-family:var(--serif);font-weight:500;font-size:1.2rem;display:block}
.tv-trong span{font-size:.85rem;color:var(--ink-3);display:block;margin-top:6px}

/* ô ảnh kẹp tỉ lệ (chỉ trang thư viện) — bo 16px, ảnh cover, fade khi tải xong */
.tv-anh.kep{border-radius:16px}
@media(min-width:900px){.tv-anh.kep{border-radius:18px}}
.tv-anh.kep img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .tv-anh.kep img{opacity:0;transition:opacity .32s var(--ease)}
  .tv-anh.kep img.da-tai{opacity:1}
}
@media(hover:hover){
  .tv-anh.kep::before{content:"";position:absolute;inset:0;background:rgba(23,20,15,.14);opacity:0;transition:opacity .2s var(--ease);z-index:1}
  .tv-anh.kep:hover::before{opacity:1}
  .tv-anh.kep:hover .tv-luunut{opacity:1;transform:none}
}
.tv-luunut{position:absolute;top:8px;right:8px;z-index:2;background:var(--ink);color:var(--paper);border-radius:999px;font-size:.76rem;font-weight:700;padding:.5em 1em;line-height:1;opacity:0;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease);cursor:pointer;display:none}
@media(hover:hover){.tv-luunut{display:block}}
.tv-danhan{position:absolute;top:8px;right:8px;z-index:3;background:rgba(23,20,15,.72);color:var(--paper);border-radius:999px;font-size:.68rem;font-weight:700;padding:.42em .8em;line-height:1;opacity:.92;display:none}
.tv-anh.da-luu .tv-danhan{display:block}
.tv-anh.da-luu .tv-luunut{display:none}
/* nút ✕ bỏ lưu trong màn Đã lưu */
.tv-bonut{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:999px;background:rgba(23,20,15,.68);color:var(--paper);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;line-height:1}

/* ---------- bảng lọc (bottom sheet mobile / panel desktop) ---------- */
#tvLoc{position:fixed;inset:0;z-index:210;display:none}
#tvLoc[data-open]{display:block}
#tvLoc .nen{position:absolute;inset:0;background:rgba(23,20,15,.45);backdrop-filter:blur(2px)}
#tvLoc .hop{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:18px 18px 0 0;max-height:86dvh;display:flex;flex-direction:column;box-shadow:0 -18px 60px rgba(23,20,15,.3);animation:tvLen .32s var(--ease)}
@keyframes tvLen{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:900px){#tvLoc .hop{left:auto;right:max(16px,var(--sa-right));bottom:auto;top:130px;width:430px;border-radius:16px;max-height:min(74vh,720px);animation:none}}
#tvLoc .dau{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px;border-bottom:1px solid var(--hair)}
#tvLoc .dau b{font-family:var(--serif);font-weight:500;font-size:1.15rem}
#tvLoc .than{overflow-y:auto;padding:6px 20px 16px;-webkit-overflow-scrolling:touch}
#tvLoc .nhom{padding:13px 0;border-bottom:1px solid var(--hair)}
#tvLoc .nhom:last-child{border-bottom:0}
#tvLoc .nhom .ten{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:9px}
/* số ảnh còn lại nếu bấm chip này; chip ra 0 thì mờ đi và không bấm được */
#tvLoc .chip .dem{font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink-3);margin-left:.15em;font-variant-numeric:tabular-nums}
#tvLoc .chip.on .dem{color:inherit;opacity:.72}
#tvLoc .chip.cut{opacity:.34;cursor:default;border-style:dashed}
@media(hover:hover){#tvLoc .chip.cut:hover{background:transparent;border-color:var(--hair-3);color:var(--ink-2)}}
#tvLoc .chan{display:flex;gap:10px;padding:12px 20px calc(14px + var(--sa-bottom));border-top:1px solid var(--hair)}
#tvLoc .chan .btn{flex:1;white-space:nowrap;font-size:.82rem;padding:.7em .6em}
#tvTha{border:1.5px dashed var(--hair-3);border-radius:12px;padding:16px;text-align:center;cursor:pointer;display:block;transition:all .2s var(--ease)}
#tvTha:hover,#tvTha.keo{border-color:var(--ink);background:rgba(255,255,255,.6)}
#tvTha b{font-size:.88rem;display:block}
#tvTha span{font-size:.74rem;color:var(--ink-3);display:block;margin-top:3px}
#tvTha input{display:none}

/* ---------- màn xem (overlay cuộn được) ---------- */
.tv-xem{position:fixed;inset:0;z-index:220;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;overscroll-behavior:contain}
.tv-xem[data-open]{display:block}
.tv-xem[data-mo]{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tv-xem{transition:opacity .2s var(--ease)}
}
/* hai nút tròn nổi trên ảnh, dính theo cuộn */
.xa-top{position:sticky;top:0;z-index:8;height:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(8px + var(--sa-top)) max(8px,var(--sa-right)) 0 max(8px,var(--sa-left));pointer-events:none}
.tv-noi{pointer-events:auto;width:40px;height:40px;border-radius:999px;border:0;background:rgba(23,20,15,.55);color:#F8F5EF;font-size:1.05rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex:none}
.tv-noi:hover{background:rgba(23,20,15,.72)}
/* trên nền giấy (màn Đã lưu / màn bộ) thì nút viền mảnh, không phải nút nổi trên ảnh */
#xemLuu .tv-noi{background:transparent;border:1px solid var(--hair-3);color:var(--ink);backdrop-filter:none}
#xemLuu .tv-noi:hover{background:rgba(23,20,15,.06);border-color:var(--ink)}
.xa-anhbox{position:relative;padding:0 max(8px,var(--sa-left)) 0 max(8px,var(--sa-right));transform-origin:50% 30%}
.tv-anhto{border-radius:20px;overflow:hidden;background:#E9E2D4;display:flex;justify-content:center;align-items:center;max-width:980px;margin:0 auto}
.tv-anhto img{max-width:100%;max-height:78vh;max-height:78dvh;width:auto;height:auto;display:block;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.tv-anhto img.doi{opacity:0;transform:scale(.98)}
.xa-giongnut{position:absolute;right:calc(max(8px,var(--sa-right)) + 10px);bottom:10px;z-index:4;width:40px;height:40px;border-radius:999px;border:0;background:rgba(23,20,15,.55);color:#F8F5EF;font-size:1rem;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.xa-than{max-width:980px;margin:0 auto;padding:0 max(8px,var(--sa-left)) 4px max(8px,var(--sa-right))}
@media (prefers-reduced-motion:no-preference){
  .tv-xem[data-vao] .xa-than,.tv-xem[data-vao] .tv-tuongtu{animation:tvDuoiLen .28s var(--ease) both}
  @keyframes tvDuoiLen{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
.xa-hanh{display:flex;align-items:center;gap:6px;padding:12px 4px 4px}
.xa-hanh .nut{border:0;background:transparent;color:var(--ink);font-size:1.05rem;width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:.25em;flex:none}
.xa-hanh .nut:hover{background:rgba(23,20,15,.06)}
.xa-hanh .nut b{font-size:.78rem;font-weight:700}
.xa-hanh .nut.on{color:var(--ink)}
.xa-hanh .day{flex:1}
.tv-dam{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:999px;padding:.6em 1.25em;font-size:.85rem;font-weight:700;min-height:40px;display:inline-flex;align-items:center;gap:.4em;text-decoration:none;flex:none}
.tv-dam[data-on]{background:var(--hair);color:var(--ink);border-color:var(--hair)}
.xa-boten{font-size:.95rem;font-weight:600;margin-top:10px;padding:0 4px}
.tv-meta{margin-top:12px;padding:0 4px}
.tv-meta .tagrow{display:flex;flex-wrap:wrap;gap:7px}
.tv-meta .tagrow .chip{font-size:.78rem;padding:.42em .9em;min-height:32px}
.tv-hanhdong{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.tv-tuongtu{margin-top:26px;padding:0 max(8px,var(--sa-left)) 40px max(8px,var(--sa-right))}
.tv-tuongtu>.ten{display:block;font-size:.95rem;font-weight:700;padding:0 4px}
.tv-tuongtu>.eyebrow{display:block;margin-bottom:2px}
.tv-tuongtu .tv-mas{margin-top:10px}

/* sheet ⋯ */
#xaSheet{position:fixed;inset:0;z-index:240;display:none}
#xaSheet[data-open]{display:block}
#xaSheet .nen{position:absolute;inset:0;background:rgba(23,20,15,.42)}
#xaSheet .hop{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--sa-bottom));background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 -14px 50px rgba(23,20,15,.3);animation:tvLen .26s var(--ease)}
@media(min-width:720px){#xaSheet .hop{left:auto;right:16px;width:300px;bottom:auto;top:70px}}
#xaSheet button,#xaSheet a{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);font-size:.92rem;font-weight:600;padding:15px 18px;text-decoration:none;font-family:var(--sans)}
#xaSheet .hop>*:last-child{border-bottom:0}

/* ảnh bay (FLIP) */
.tv-bay{position:fixed;z-index:260;object-fit:cover;pointer-events:none;transform-origin:0 0;will-change:transform;box-shadow:0 18px 50px rgba(23,20,15,.18)}

/* ---------- màn Đã lưu ---------- */
.xl-dau{padding:calc(10px + var(--sa-top)) max(8px,var(--sa-left)) 10px max(8px,var(--sa-right));display:flex;align-items:center;gap:10px}
.xl-dau h2{font-size:1.15rem;flex:1;min-width:0}
.xl-nut{display:flex;gap:8px;flex-wrap:wrap;padding:0 max(8px,var(--sa-left)) 12px;border-bottom:1px solid var(--hair)}
.xl-nut:empty{display:none}
.xl-nut .tv-dam,.xl-nut .tv-ghost{font-size:.8rem;padding:.5em 1em;min-height:38px}
.xl-trong{padding:56px 24px;text-align:center}
.xl-trong b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem}
.xl-trong p{color:var(--ink-3);font-size:.88rem;margin-top:6px}
.xl-trong .btn{margin-top:16px}

/* ---------- trang bộ (?bo=) ---------- */
.tv-bohero{display:none}

/* ---------- khối concept đang lọc ---------- */
.tv-concept{border:1px solid var(--hair);border-left:3px solid var(--ink);border-radius:10px;background:rgba(255,255,255,.5);padding:14px 16px;margin-top:16px;font-size:.86rem}
.tv-concept b{font-family:var(--serif);font-weight:500;font-size:1.05rem}
.tv-concept p{color:var(--ink-2);margin-top:4px}
.tv-concept .meta{color:var(--ink-3);font-size:.76rem;margin-top:6px}

/* ---------- nút chia sẻ / viền mảnh ---------- */
.tv-share{border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:.6em 1.2em;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;gap:.5em;min-height:40px}
.tv-ghost{border:1px solid var(--hair-3);background:transparent;color:var(--ink);border-radius:999px;padding:.6em 1.2em;font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;gap:.5em;min-height:40px;text-decoration:none}
.xa-hanh .tv-ghost{font-size:.82rem;padding:.55em 1em;min-height:40px;white-space:nowrap}

/* trong màn xem thì ẩn CTA dưới cùng (đã có nút Lưu / Zalo trong màn) */
body[data-xem] .mcta,body[data-xem] #c7Btn,body[data-xem] #c7Teaser{display:none}

/* =====================================================================
   MÁY TÍNH ≥900px — bám sát Pinterest web (mobile <900px giữ nguyên)
   Số đo: cột 236px, rãnh 16px, lưới căn giữa; --tv-luoi / --tv-le do JS đo.
   ===================================================================== */
/* phần tử chỉ hiện ở máy tính / chỉ hiện ở điện thoại */
.chi-may{display:none !important}
.tv-ogoc{display:none}
.xa-nut2{display:none}
/* hàng hành động trong màn xem: giữ đúng thứ tự cũ của mobile (♡ 💬 ↗ … Zalo Lưu)
   dù DOM đã đổi để máy tính xếp được [↗ ⋯ ♡] … [Lưu] */
.xa-hanh #xaTim{order:1}
.xa-hanh #xaChat{order:2}
.xa-hanh #xaShare{order:3}
.xa-hanh .day{order:4}
.xa-hanh #xaZalo{order:5}
.xa-hanh #xaLuu{order:6}

@media(min-width:900px){
  .chi-may{display:inline-flex !important}
  .chi-dt{display:none !important}

  /* ---- A · lưới: tab và ảnh thẳng lề ---- */
  .tv-bar{padding-left:max(var(--tv-le,16px),var(--sa-left));padding-right:max(var(--tv-le,16px),var(--sa-right))}
  .tv-bar .hanh{padding-right:0;padding-left:40px}
  .tv-dem{padding-left:var(--tv-le,16px);padding-right:var(--tv-le,16px)}
  .tv-anh.kep{border-radius:16px}
  .tv-tran .tv-mas{margin-top:12px}
}

/* ---- A · hover ô (chỉ máy có chuột thật) ---- */
@media(min-width:900px) and (hover:hover){
  .tv-anh.kep::before{background:rgba(23,20,15,.25);transition:opacity .15s var(--ease)}
  .tv-luunut{top:10px;right:10px;height:40px;padding:0 16px;border:0;font-size:.84rem;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
  .tv-anh.kep:hover .tv-luunut{opacity:1;transform:none}
  /* đã lưu: pill nền hair chữ mực, hiện luôn (Pinterest cũng vậy) */
  .tv-anh.da-luu .tv-luunut{display:inline-flex;opacity:1;transform:none;background:var(--hair);color:var(--ink)}
  .tv-anh.da-luu .tv-danhan{display:none}
  .tv-ogoc{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:8px;
    opacity:0;transform:translateY(4px);transition:opacity .15s var(--ease),transform .15s var(--ease)}
  .tv-anh.kep:hover .tv-ogoc{opacity:1;transform:none}
  .tv-otron{width:32px;height:32px;border-radius:999px;border:0;background:var(--paper-on);color:var(--ink);
    font-size:.95rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 2px 8px rgba(23,20,15,.22)}
  .tv-otron:hover{background:var(--paper)}
}

/* ---- B · màn xem một ảnh = "closeup card" ---- */
@media(min-width:900px){
  .tv-xem{scrollbar-gutter:stable}
  /* ← nổi trái trên: hàng cao 0 để thẻ vẫn cách mép trên đúng 16px */
  #xemAnh .xa-top{top:16px;padding:0 0 0 16px}
  #xemAnh .xa-top #xaMore{display:none}
  #xemAnh .xa-giongnut{display:none}

  .xa-the{display:grid;grid-template-columns:minmax(0,1fr) 508px;align-items:stretch;
    max-width:1016px;margin:16px auto 0;background:var(--paper-on);border-radius:32px;overflow:hidden;
    box-shadow:0 4px 26px rgba(23,20,15,.12)}
  #xemAnh .xa-anhbox{padding:0;min-width:0;background:#E9E2D4;display:flex;align-items:center;justify-content:center}
  #xemAnh .tv-anhto{max-width:none;width:100%;height:100%;margin:0;border-radius:0;background:transparent}
  /* ảnh ngang phủ hết bề rộng cột 508; ảnh cao thì 90vh chặn lại (contain, nền E9E2D4) */
  #xemAnh .tv-anhto img{width:100%;max-width:100%;height:auto;max-height:90vh;object-fit:contain}

  /* margin:auto (kế thừa từ mobile) làm ô lưới co lại vừa nội dung — phải bỏ */
  #xemAnh .xa-than{max-width:none;margin:0;max-height:90vh;overflow-y:auto;scrollbar-gutter:stable;
    padding:20px 26px 26px;display:flex;flex-direction:column}
  #xemAnh .xa-hanh{padding:0 0 2px}
  #xemAnh .xa-hanh #xaShare{order:1}
  #xemAnh .xa-hanh #xaMore2{order:2}
  #xemAnh .xa-hanh #xaTim{order:3}
  #xemAnh .xa-hanh #xaChat{display:none}
  #xemAnh .xa-boten{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:var(--lh-h);margin-top:16px;padding:0}
  #xemAnh .tv-meta{margin-top:14px;padding:0}
  .xa-nut2{display:flex;flex-direction:column;gap:9px;margin-top:18px;align-items:stretch}
  .xa-nut2 .tv-ghost{justify-content:center;text-align:center}

  /* lưới con tự căn giữa (sauKhung đã chốt max-width) — để padding 0 thì thẻ,
     tiêu đề và lưới cùng căn giữa trong overlay, không lệch vì scrollbar-gutter */
  #xemAnh .tv-tuongtu{margin-top:30px;padding-left:0;padding-right:0}
  #xemAnh .tv-tuongtu>.ten{text-align:center;font-family:var(--serif);font-weight:500;font-size:1.25rem;padding:0}
  #xemAnh .tv-tuongtu .tv-mas{margin-top:16px}
}

/* ---- C · màn Đã lưu / bộ được gửi / ?bo= : tiêu đề + nút thẳng lề lưới ---- */
@media(min-width:900px){
  #xemLuu .xl-dau,#xemLuu .xl-nut{
    max-width:var(--tv-luoi,1016px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
  #xemLuu .xl-dau{padding-top:26px}
  #xemLuu .xl-nut{padding-bottom:16px}
  #xemLuu .tv-tuongtu{padding-left:0;padding-right:0}
  #xemLuu .xl-dau h2{font-size:1.6rem}
}