/* linkshelf.css — ชั้นไม้ปุ่มลิงก์ (banner position = link) แนวเดียวกับ E-Book
   ใช้ร่วมกัน: หน้าแรก (index2.php: .lk-shelf.cols3) และหน้าจัดการ (admin/ManageBanners.php: .lk-shelf.cols4 .lk-adm)
   แสดงทุกรายการ ไม่มีปุ่ม "ดูทั้งหมด" — ชั้นยาวต่อลงไปตามจำนวนรายการ */
.lk-shelf { --gap: 22px; --pad: 26px; --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 26px var(--gap);
  margin: 0; padding: var(--pad) var(--pad) 14px; list-style: none; border: 9px solid #a9803f; border-radius: 12px;
  background:
    repeating-linear-gradient(97deg, rgba(120,80,25,.10) 0 1px, rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, rgba(255,255,255,0) 3px 60px),
    linear-gradient(180deg, #dcb877 0%, #c9a263 100%);
  box-shadow: inset 0 10px 22px rgba(110,70,20,.38), inset 0 -4px 10px rgba(110,70,20,.2), 0 10px 24px rgba(120,85,35,.3); }
.lk-shelf.cols4 { --cols: 4; }
.lk-shelf li { min-width: 0; margin: 0; }
.lk-tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; position: relative; }
.lk-tile:hover { text-decoration: none; }
/* แผ่นไม้ใต้ปุ่ม */
.lk-tile::before, .lk-shelf .slot::after { content: ""; order: 1; display: block; height: 16px; margin-inline: calc(var(--gap) / -2);
  background: linear-gradient(180deg, #efd7a6 0 5px, #d3ab68 5px 9px, #a9803f 9px 100%); box-shadow: 0 8px 12px rgba(90,60,20,.4); }
.lk-shelf:not(.cols4) li:nth-child(3n+1) .lk-tile::before, .lk-shelf:not(.cols4) li.slot:nth-child(3n+1)::after { margin-left: calc(var(--pad) * -1); }
.lk-shelf:not(.cols4) li:nth-child(3n) .lk-tile::before, .lk-shelf:not(.cols4) li.slot:nth-child(3n)::after { margin-right: calc(var(--pad) * -1); }
.lk-shelf.cols4 li:nth-child(4n+1) .lk-tile::before, .lk-shelf.cols4 li.slot:nth-child(4n+1)::after { margin-left: calc(var(--pad) * -1); }
.lk-shelf.cols4 li:nth-child(4n) .lk-tile::before, .lk-shelf.cols4 li.slot:nth-child(4n)::after { margin-right: calc(var(--pad) * -1); }
.lk-shelf .slot { display: flex; flex-direction: column; }
.lk-shelf .slot .lk-face { visibility: hidden; }
/* ป้ายปุ่ม (แทนปกหนังสือ) */
.lk-face { --k1: #e0561f; --k2: #b8350a; position: relative; order: 0; margin-bottom: -1px; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 108px;
  padding: 16px 14px 16px 20px; border-radius: 4px 10px 10px 4px; color: #fff; text-align: center; text-decoration: none; overflow-wrap: anywhere;
  font: 700 1.02rem/1.4 var(--font-head, 'Prompt', 'Sarabun', sans-serif); text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: linear-gradient(160deg, var(--k1), var(--k2));
  box-shadow: 8px 0 14px rgba(90,60,20,.35), inset 7px 0 8px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .25s, box-shadow .25s; }
.lk-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 4px 0 0 4px; background: rgba(0,0,0,.22); }
.lk-face::after { content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.5); box-shadow: 0 6px 0 rgba(255,255,255,.3); }
.lk-face img { width: 44px; height: 44px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px; }
.lk-face .lk-t { display: block; }
.lk-face .lk-go { font: 600 .74rem/1 var(--font, 'Sarabun', sans-serif); opacity: .85; letter-spacing: .02em; }
a.lk-tile:hover .lk-face, a.lk-tile:focus-visible .lk-face, .lk-adm .lk-face:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: 10px 0 20px rgba(90,60,20,.45), inset 7px 0 8px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28); }
a.lk-tile:focus-visible { outline: 3px solid #1b3f9a; outline-offset: 4px; }
.k1 { --k1: #e0561f; --k2: #b8350a; } .k2 { --k1: #1596c4; --k2: #00678f; } .k3 { --k1: #14a672; --k2: #047a50; } .k4 { --k1: #a455cc; --k2: #74309c; }
.lk-empty { margin: 12px 0 0; text-align: center; color: #6d4d24; font-size: .92rem; }

/* หน้าจัดการ (admin): ป้ายข้อมูลใต้ชั้น */
.lk-adm .lk-meta { order: 2; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255,251,240,.94); color: #3b2a12; font-size: .78rem; line-height: 1.45; box-shadow: 0 2px 6px rgba(90,60,20,.25); }
.lk-adm .lk-meta .lk-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.lk-adm .lk-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: #6d4d24; color: #fff; font-weight: 700; font-size: .78rem; }
.lk-adm .lk-url { display: block; margin-top: 4px; color: #1b3f9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-adm .lk-date { margin-top: 2px; color: #6d4d24; }
.lk-adm .lk-tools { display: flex; gap: 4px; margin-top: 6px; }
.lk-adm .lk-tools form { margin: 0; }
.lk-adm .lk-tools .btn-mis-ghost { padding: .3rem .6rem; font-size: .8rem; background: #efe2c6; color: #4a2f12; }
.lk-adm .lk-tools .btn-mis-ghost:hover { background: #e2cfa4; }
.lk-adm li.is-off .lk-face { filter: grayscale(.85) brightness(.9); opacity: .65; }
.lk-adm li.is-off .lk-face:hover { filter: none; opacity: 1; }
.lk-adm .lk-miss { color: #b3432b; font-weight: 600; }

@media (max-width: 1100px) { .lk-shelf.cols4 { --cols: 3; }
  .lk-shelf.cols4 li:nth-child(4n+1) .lk-tile::before, .lk-shelf.cols4 li:nth-child(4n) .lk-tile::before { margin-inline: calc(var(--gap) / -2); }
  .lk-shelf.cols4 li:nth-child(3n+1) .lk-tile::before { margin-left: calc(var(--pad) * -1); }
  .lk-shelf.cols4 li:nth-child(3n) .lk-tile::before { margin-right: calc(var(--pad) * -1); }
  .lk-shelf.cols4 .slot { display: none; }
  .lk-shelf.cols4 li.end .lk-tile::before { margin-right: calc(var(--pad) * -1); } }
@media (max-width: 560px) {
  .lk-shelf, .lk-shelf.cols4 { --cols: 2; --gap: 16px; --pad: 14px; border-width: 7px; row-gap: 22px; }
  .lk-shelf .slot { display: none; }
  .lk-face { min-height: 96px; font-size: .95rem; padding: 14px 10px 14px 16px; }
  .lk-shelf li .lk-tile::before, .lk-shelf.cols4 li .lk-tile::before { margin-inline: calc(var(--gap) / -2) !important; }
  .lk-shelf li:nth-child(2n+1) .lk-tile::before, .lk-shelf.cols4 li:nth-child(2n+1) .lk-tile::before { margin-left: calc(var(--pad) * -1) !important; }
  .lk-shelf li:nth-child(2n) .lk-tile::before, .lk-shelf.cols4 li:nth-child(2n) .lk-tile::before, .lk-shelf li.end .lk-tile::before, .lk-shelf.cols4 li.end .lk-tile::before { margin-right: calc(var(--pad) * -1) !important; }
}
@media (prefers-reduced-motion: reduce) { .lk-face { transition: none; } a.lk-tile:hover .lk-face { transform: none; } }

/* รูปแบนเนอร์บนป้าย (หน่วยงานภายนอก/ปุ่มลิงก์ หน้า pd8) + ชั้น 1 คอลัมน์ (เมนูขวา) */
.lk-face img.lk-bn { width: 100%; height: auto; max-height: 84px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.lk-face.lk-bnr .lk-t { font-size: .85rem; font-weight: 600; }
.lk-shelf.cols1 { --cols: 1; --gap: 18px; --pad: 16px; border-width: 7px; row-gap: 22px; }
.lk-shelf.cols1 .lk-face { min-height: 72px; font-size: .95rem; padding: 12px 12px 12px 18px; }
.lk-shelf.cols1 li .lk-tile::before, .lk-shelf.cols1 li:nth-child(n) .lk-tile::before { margin-inline: calc(var(--pad) * -1) !important; }

/* เมนูขวา (cols1): การ์ดล้วน — ไม่มีพื้นลายไม้/กรอบ/แผ่นไม้ */
.lk-shelf.cols1 { --gap: 0px; --pad: 0px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 14px; }
.lk-shelf.cols1 .lk-tile::before { display: none; }
.lk-shelf.cols1 .lk-face { margin-bottom: 0; box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 7px 0 8px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28); }
.lk-shelf.cols1 a.lk-tile:hover .lk-face { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 7px 0 8px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28); }

/* ป้ายที่มีรูปแบนเนอร์: แสดงเฉพาะรูป (ไม่มีพื้นสี/พื้นขาว/ข้อความ) */
.lk-face.lk-bnr { background: none; padding: 0; min-height: 0; gap: 0; border-radius: 10px; box-shadow: none; text-shadow: none; overflow: visible; }
.lk-face.lk-bnr::before, .lk-face.lk-bnr::after { display: none; }
.lk-face.lk-bnr img.lk-bn { display: block; width: 100%; max-height: none; height: auto; padding: 0; background: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.lk-shelf:not(.lk-adm) .lk-face.lk-bnr .lk-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lk-adm .lk-face.lk-bnr .lk-t { display: none; }
.lk-shelf.cols1 a.lk-tile:hover .lk-face.lk-bnr { box-shadow: none; }