/* HMD Gallery Filter v1.7.1 | hoanmydecor.vn */

:root {
    --hmd-c:  #e8622a;
    --hmd-cd: #c4511f;
    --hmd-cl: #fdf0eb;
    --hmd-gray: #f5f5f3;
    --hmd-border: #e8e8e4;
}

.hmd-gallery-wrap { margin: 2rem 0; font-family: inherit; box-sizing: border-box; }
.hmd-gallery-wrap *, .hmd-gallery-wrap *::before, .hmd-gallery-wrap *::after { box-sizing: inherit; }

/* ── Filter bar ── */
.hmd-filter-bar { background: var(--hmd-gray); border: 1px solid var(--hmd-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; overflow: hidden; }
.hmd-filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hmd-filter-group:last-of-type { margin-bottom: 0; }
.hmd-filter-group + .hmd-filter-group { padding-top: 8px; border-top: 1px solid var(--hmd-border); }
.hmd-filter-label { font-size: 10px; font-weight: 500; color: #aaa; text-transform: uppercase; letter-spacing: .5px; min-width: 68px; flex-shrink: 0; }
.hmd-filter-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.hmd-gallery-wrap .hmd-btn {
    display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px;
    font-family: inherit; font-weight: 400; line-height: 1.4;
    border: 1px solid var(--hmd-border); background: #fff; color: #555;
    cursor: pointer; transition: all .13s; text-transform: none; letter-spacing: 0;
    box-shadow: none; text-decoration: none; margin: 0; white-space: nowrap;
}
.hmd-gallery-wrap .hmd-btn:hover { border-color: #aaa; color: #222; background: #f8f8f6; }
.hmd-gallery-wrap .hmd-btn.active { background: var(--hmd-c); border-color: var(--hmd-c); color: #fff; font-weight: 600; }
.hmd-gallery-wrap .hmd-btn[data-val="all"].active { background: transparent; border-color: var(--hmd-c); color: var(--hmd-c); }
.hmd-gallery-wrap .hmd-btn[data-val="all"].active:hover { background: var(--hmd-cl); }
.hmd-gallery-wrap .hmd-btn:focus-visible { outline: 2px solid var(--hmd-c); outline-offset: 2px; }

/* Reset row */
.hmd-reset-row { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .28s ease, opacity .22s ease, margin-top .22s ease; margin-top: 0; }
.hmd-reset-row.hmd-visible { max-height: 60px; opacity: 1; margin-top: 8px; }
.hmd-reset-inner { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hmd-border); flex-wrap: wrap; }
.hmd-active-tags { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.hmd-active-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--hmd-c); color: #fff; font-size: 11px; padding: 3px 8px 3px 10px; border-radius: 10px; font-weight: 600; }
.hmd-active-tag button { background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer; padding: 0 0 0 2px; font-size: 12px; line-height: 1; display: flex; align-items: center; }
.hmd-active-tag button:hover { color: #fff; }
.hmd-reset-btn { flex-shrink: 0; font-size: 11px; color: var(--hmd-c); background: #fff; border: 1px solid var(--hmd-c); border-radius: 20px; cursor: pointer; font-family: inherit; padding: 3px 10px; font-weight: 600; white-space: nowrap; transition: all .13s; text-transform: none; letter-spacing: 0; box-shadow: none; }
.hmd-reset-btn:hover { background: var(--hmd-c); color: #fff; }

/* Result bar */
.hmd-result-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: #888; flex-wrap: wrap; gap: 4px; }
.hmd-result-bar strong { color: #222; }

/* ── Grid — Desktop: dùng class từ PHP ── */
.hmd-grid { display: grid; gap: 10px; margin: 0; padding: 0; }
.hmd-cols-1 { grid-template-columns: 1fr; }
.hmd-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmd-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmd-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Mobile: ghi đè bằng CSS variable được inject từ PHP ──
   PHP inject style tag với --hmd-mob-cols dựa trên Settings mobile
   CSS này dùng variable đó để override grid columns trên mobile */
@media (max-width: 768px) {
    .hmd-grid { grid-template-columns: repeat(var(--hmd-mob-cols, 2), 1fr) !important; gap: 8px; }
}
@media (max-width: 360px) {
    .hmd-grid { grid-template-columns: repeat(var(--hmd-mob-cols-xs, 1), 1fr) !important; }
}

/* Gallery item */
.hmd-item {
    border-radius: 8px; overflow: hidden; border: 1.5px solid transparent; background: #fff;
    cursor: pointer; transition: border-color .15s, transform .18s;
    display: block; text-decoration: none; color: inherit;
    touch-action: manipulation; -webkit-tap-highlight-color: rgba(232,98,42,.08);
}
.hmd-item:hover { border-color: var(--hmd-c); transform: translateY(-3px); text-decoration: none; color: inherit; }
.hmd-item.hmd-hidden, .hmd-item.hmd-page-hidden { display: none; }

.hmd-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
.hmd-thumb .hmd-img, .hmd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .32s ease; opacity: 1; padding: 0; margin: 0; border: none; border-radius: 0; max-width: 100%; }
.hmd-item:hover .hmd-thumb img { transform: scale(1.05); }

.hmd-overlay { position: absolute; inset: 0; background: rgba(232,98,42,0); display: flex; align-items: center; justify-content: center; transition: background .18s; pointer-events: none; }
.hmd-item:hover .hmd-overlay { background: rgba(232,98,42,.22); }
.hmd-overlay svg { opacity: 0; transition: opacity .18s; background: #fff; border-radius: 50%; padding: 6px; width: 32px; height: 32px; color: var(--hmd-c); box-sizing: content-box; }
.hmd-item:hover .hmd-overlay svg { opacity: 1; }

.hmd-meta { padding: 7px 8px 8px; background: #fff; }
.hmd-caption { font-size: 12px; font-weight: 600; color: #222; margin: 0 0 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hmd-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.hmd-tag { font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 500; display: inline-block; }
.hmd-tag-0 { background: var(--hmd-cl); color: var(--hmd-cd); }
.hmd-tag-1 { background: #edf5e8; color: #3a6b10; }
.hmd-tag-2 { background: #eef0fe; color: #4040a0; }

.hmd-empty { text-align: center; padding: 2rem 1rem; color: #888; font-size: 13px; border: 1px dashed var(--hmd-border); border-radius: 8px; margin: 0; }
.hmd-empty a { color: var(--hmd-c); font-weight: 600; }

/* Pagination */
.hmd-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
.hmd-pgn-info { font-size: 11px; color: #aaa; text-align: center; width: 100%; margin-bottom: 2px; }
.hmd-pgn-btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--hmd-border); background: #fff; font-size: 12px; font-family: inherit; cursor: pointer; transition: all .13s; display: inline-flex; align-items: center; justify-content: center; color: #555; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; white-space: nowrap; }
.hmd-pgn-btn:hover:not(:disabled) { border-color: var(--hmd-c); color: var(--hmd-c); background: var(--hmd-cl); }
.hmd-pgn-btn.hmd-cur { background: var(--hmd-c); border-color: var(--hmd-c); color: #fff; font-weight: 700; }
.hmd-pgn-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   LIGHTBOX NAV BUTTONS — via CSS classes
   Không dùng inline style để tránh escape bug
   ══════════════════════════════════════════════ */

/* Nút nav chung */
.hmd-lb-nav {
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, transform .12s;
    z-index: 20;
    flex-shrink: 0;
    /* Kích thước mặc định — tăng cho dễ tap mobile */
    width: 44px;
    height: 44px;
}
.hmd-lb-nav svg { display: block; pointer-events: none; }

/* Style: circle (default) */
.hmd-lb-nav-circle { border-radius: 50%; background: rgba(255,255,255,.2); }
.hmd-lb-nav-circle:hover { background: rgba(255,255,255,.38); transform: scale(1.08); }

/* Style: pill */
.hmd-lb-nav-pill { width: 56px; height: 38px; border-radius: 20px; background: rgba(255,255,255,.2); }
.hmd-lb-nav-pill:hover { background: rgba(255,255,255,.38); }

/* Style: square */
.hmd-lb-nav-square { border-radius: 8px; background: rgba(255,255,255,.2); }
.hmd-lb-nav-square:hover { background: rgba(255,255,255,.38); }

/* Style: minimal */
.hmd-lb-nav-minimal { border-radius: 4px; background: transparent; border: 1.5px solid rgba(255,255,255,.55); }
.hmd-lb-nav-minimal:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Position: inside — chồng lên ảnh */
.hmd-lb-nav-inside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.hmd-lb-nav-inside#hmd-lb-prev { left: 10px; }
.hmd-lb-nav-inside#hmd-lb-next { right: 10px; }
.hmd-lb-nav-inside:hover { transform: translateY(-50%) scale(1.08); }

/* Position: outside — dưới ảnh trong row riêng */
.hmd-lb-nav-outside {
    background: rgba(0,0,0,.07);
    color: #333;
    border-radius: 8px;
    width: auto;
    padding: 0 14px;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.hmd-lb-nav-outside svg { stroke: #333; }
.hmd-lb-nav-outside:hover { background: rgba(0,0,0,.14); }

/* Position: edge — ngoài lightbox box */
.hmd-lb-nav-edge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#hmd-lb-prev.hmd-lb-nav-edge { left: -58px; }
#hmd-lb-next.hmd-lb-nav-edge { right: -58px; }
.hmd-lb-nav-edge:hover { transform: translateY(-50%) scale(1.1); }

/* Nav row (dùng cho position: outside) */
.hmd-lb-nav-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 2px; flex-shrink: 0; }
.hmd-lb-nav-row .hmd-lb-counter-inline { font-size: 12px; color: #888; }

/* Animations */
@keyframes hmdItemIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes hmdTagIn  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

.hmd-item { animation: hmdItemIn .22s ease; }

@media (prefers-reduced-motion: reduce) {
    .hmd-item, .hmd-thumb img, .hmd-reset-row { animation: none; transition: none; }
}

/* Nav hidden (single image) */
.hmd-nav-hidden { display: none !important; }

/* Mobile: luôn hiện nút nav trừ khi bị ẩn do 1 ảnh */
@media (max-width: 768px) {
    #hmd-lb-prev:not(.hmd-nav-hidden),
    #hmd-lb-next:not(.hmd-nav-hidden) { display: flex !important; }


    /* Nav inside: tăng size hit area cho mobile */
    .hmd-lb-nav-inside { width: 48px; height: 48px; }
    .hmd-lb-nav-inside#hmd-lb-prev { left: 6px; }
    .hmd-lb-nav-inside#hmd-lb-next { right: 6px; }

    /* Nav edge: không khả dụng trên mobile — fallback về inside */
    .hmd-lb-nav-edge {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    #hmd-lb-prev.hmd-lb-nav-edge { left: 6px; right: auto; }
    #hmd-lb-next.hmd-lb-nav-edge { right: 6px; left: auto; }
}