/* Thanh Digital - Danh mục kéo ngang 1.7.4 */

/* ============================================================
   ROOT
   ============================================================ */

.tdcc{
    /* Kích thước & màu */
    --tdcc-radius:12px;
    --tdcc-img:82px;
    --tdcc-accent:#d32f2f;

    /* Kiểu dáng */
    --tdcc-tile-radius:12px;
    --tdcc-image-radius:50%;
    --tdcc-tile-border:0px;
    --tdcc-tile-border-clr:#ececec;
    --tdcc-tile-bg:#ffffff;
    --tdcc-tile-shadow:0;
    --tdcc-tile-padding:14px;
    --tdcc-gap:0px;

    max-width:1440px;
    margin:0 auto;
    background:#fff;
    color:#222;
}

/* ============================================================
   HEADER
   ============================================================ */

.tdcc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
    min-height:48px;
    border-bottom:0;
}

.tdcc-head h2{
    margin:0;
    font-size:16px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.1px;
}

/* ============================================================
   NÚT ĐIỀU HƯỚNG
   ============================================================ */

.tdcc-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}

.tdcc-nav button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    min-width:32px;
    min-height:0;
    margin:0;
    line-height:1;
    padding:0;
    border:1px solid #dfe2e5;
    border-radius:10px;
    background:#fff;
    color:#34383d;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .12s ease;
}

.tdcc-nav button span{
    display:block;
    margin-top:-2px;
    font-family:Arial,sans-serif;
    font-size:27px;
    font-weight:400;
    line-height:1;
}

.tdcc-nav button:hover:not(:disabled){
    background:#fff5f5;
    border-color:var(--tdcc-accent, #d32f2f);
    color:var(--tdcc-accent, #d32f2f);
    box-shadow:0 3px 9px rgba(211,47,47,.12);
}

.tdcc-nav button:active:not(:disabled){
    transform:scale(.94);
}

.tdcc-nav button:focus-visible{
    outline:2px solid var(--tdcc-accent, #d32f2f);
    outline-offset:2px;
}

.tdcc-nav button:disabled{
    opacity:.38;
    cursor:not-allowed;
    box-shadow:none;
}

/* ============================================================
   TRACK — SCROLL NGANG
   ============================================================ */

.tdcc-track{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--tdcc-dr), minmax(124px, auto));
    grid-auto-columns:calc((100% - (var(--tdcc-gap) * (var(--tdcc-dc) - 1))) / var(--tdcc-dc));
    gap:var(--tdcc-gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    overscroll-behavior-x:auto;
    scroll-behavior:smooth;
    outline:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
}

.tdcc-track::-webkit-scrollbar{
    display:none;
}

.tdcc-track:focus-visible{
    outline:2px solid var(--tdcc-accent, #d32f2f);
    outline-offset:-2px;
}

.tdcc:not(.tdcc-drag) .tdcc-track{
    overflow-x:visible;
    grid-auto-flow:row;
    grid-template-columns:repeat(var(--tdcc-dc), minmax(0, 1fr));
    grid-auto-columns:auto;
    touch-action:auto;
}

/* ============================================================
   TILE
   ============================================================ */

.tdcc-tile{
    min-width:0;
    text-align:center;
    padding:clamp(6px, var(--tdcc-tile-padding), 10px);
    border:var(--tdcc-tile-border) solid var(--tdcc-tile-border-clr);
    border-radius:var(--tdcc-tile-radius);
    background:var(--tdcc-tile-bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    scroll-snap-align:start;
    color:#222!important;
    text-decoration:none!important;
    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        transform .18s ease;
    position:relative;
    /* Cho badge hiển thị đầy đủ */
    overflow:visible;
}

/* Gap = 0 → thêm grid line giữa các tile */
.tdcc[style*="--tdcc-gap:0px"] .tdcc-tile{
    border-right:1px solid var(--tdcc-tile-border-clr);
    border-bottom:1px solid var(--tdcc-tile-border-clr);
}

/* Gap > 0 → tile tách rời */
.tdcc:not([style*="--tdcc-gap:0px"]) .tdcc-tile{
    border-width:var(--tdcc-tile-border);
}

.tdcc-tile:hover{
    color:var(--tdcc-accent, #d32f2f)!important;
}

.tdcc-tile:focus-visible{
    outline:2px solid var(--tdcc-accent, #d32f2f);
    outline-offset:-2px;
    border-radius:var(--tdcc-tile-radius);
}

/* ============================================================
   IMAGE
   Ảnh được bọc trong 1 lớp con để bo tròn + giữ overflow.
   Badge nằm ngoài lớp này nên không bị cắt.
   ============================================================ */

.tdcc-image{
    width:var(--tdcc-img, 82px);
    height:var(--tdcc-img, 82px);
    flex:0 0 var(--tdcc-img, 82px);
    background:#f5f6f7;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    pointer-events:none;
    overflow:visible;
    border-radius:var(--tdcc-image-radius, 50%);
    transition:border-radius .2s ease;
}

/* Wrapper bo tròn + cắt ảnh bên trong */
.tdcc-image::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    background:transparent;
    z-index:0;
}

.tdcc-image > img,
.tdcc-image > .tdcc-fallback{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:inherit;
    overflow:hidden;
    display:block;
}

.tdcc-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
    -webkit-user-drag:none;
    user-select:none;
    display:block;
    border-radius:inherit;
    overflow:hidden;
}

/* Icon mặc định khi không có ảnh */
.tdcc-image > span:not(.tdcc-badge):not(.tdcc-fallback){
    font-size:28px;
    color:#999;
    position:relative;
    z-index:1;
}

/* Fallback ♪ khi danh mục chưa có ảnh */
.tdcc-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:28px;
    color:#bbb;
    background:linear-gradient(135deg,#f5f6f7 0%,#eaecef 100%);
    border-radius:inherit;
}

/* ============================================================
   NAME & PRODUCT COUNT
   ============================================================ */

.tdcc-name{
    max-width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:14px;
    line-height:1.4;
    font-weight:600;
    overflow-wrap:anywhere;
    pointer-events:none;
}

.tdcc-product-count{
    display:block;
    margin-top:-2px;
    font-size:12px;
    font-weight:400;
    color:#8a8f94;
    line-height:1.2;
    pointer-events:none;
}

.tdcc-tile:hover .tdcc-product-count{
    color:var(--tdcc-accent, #d32f2f);
}

/* ============================================================
   BADGE HOT / MỚI
   Nằm ở góc phải TRÊN của tile, KHÔNG bị ảnh che.
   ============================================================ */

.tdcc-badge{
    position:absolute;
    top:8px;
    right:8px;
    display:inline-block;
    padding:2px 8px;
    font-size:10px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.3px;
    color:#fff;
    white-space:nowrap;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    pointer-events:none;
    /* Nổi trên ảnh và mọi thứ trong tile */
    z-index:99;
}

.tdcc-badge-new{
    background:linear-gradient(135deg,#00c853,#00a844);
}

.tdcc-badge-hot{
    background:linear-gradient(135deg,#ff5252,#d32f2f);
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

.tdcc-hover-zoom .tdcc-tile:hover .tdcc-image img{
    transform:scale(1.12);
}

.tdcc-hover-lift .tdcc-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    z-index:1;
}

.tdcc-hover-none .tdcc-tile:hover{
    background:transparent;
    box-shadow:none;
    color:inherit!important;
}

.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
}

/* ============================================================
   PRESET STYLES
   ============================================================ */

/* -------- TRÒN -------- */
.tdcc-preset-circle .tdcc-tile{
    border-radius:var(--tdcc-tile-radius, 12px);
}
.tdcc-preset-circle .tdcc-image{
    border-radius:var(--tdcc-image-radius, 50%);
}
.tdcc-preset-circle.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
    box-shadow:inset 0 0 0 1px var(--tdcc-accent, #d32f2f);
}

/* -------- BO GÓC -------- */
.tdcc-preset-rounded .tdcc-tile{
    border-radius:var(--tdcc-tile-radius, 18px);
}
.tdcc-preset-rounded .tdcc-image{
    border-radius:var(--tdcc-image-radius, 22%);
}
.tdcc-preset-rounded.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
    box-shadow:0 6px 18px rgba(211,47,47,.12);
}

/* -------- VUÔNG -------- */
.tdcc-preset-square .tdcc-tile{
    border-radius:var(--tdcc-tile-radius, 0);
}
.tdcc-preset-square .tdcc-image{
    border-radius:var(--tdcc-image-radius, 0);
}
.tdcc-preset-square.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
    box-shadow:inset 0 0 0 1px var(--tdcc-accent, #d32f2f);
}

/* -------- TỐI GIẢN -------- */
.tdcc-preset-minimal .tdcc-tile{
    border:0;
    border-radius:var(--tdcc-tile-radius, 0);
    background:transparent;
    box-shadow:none;
}
.tdcc-preset-minimal .tdcc-image{
    border-radius:var(--tdcc-image-radius, 50%);
    background:#f0f1f3;
}
.tdcc-preset-minimal.tdcc-hover-border .tdcc-tile:hover{
    background:#fafafa;
    box-shadow:none;
}

/* -------- CHỈ VIỀN -------- */
.tdcc-preset-outline .tdcc-tile{
    border:var(--tdcc-tile-border, 2px) solid var(--tdcc-tile-border-clr, #e0e0e0);
    border-radius:var(--tdcc-tile-radius, 14px);
    background:var(--tdcc-tile-bg, transparent);
    box-shadow:none;
}
.tdcc-preset-outline .tdcc-image{
    border-radius:var(--tdcc-image-radius, 50%);
}
.tdcc-preset-outline .tdcc-tile:hover{
    border-color:var(--tdcc-accent, #d32f2f);
}
.tdcc-preset-outline.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
}

/* -------- CARD NỔI -------- */
.tdcc-preset-card .tdcc-tile{
    border:var(--tdcc-tile-border, 0) solid var(--tdcc-tile-border-clr, transparent);
    border-radius:var(--tdcc-tile-radius, 16px);
    background:var(--tdcc-tile-bg, #fff);
    box-shadow:0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
.tdcc-preset-card .tdcc-tile:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
}
.tdcc-preset-card .tdcc-image{
    border-radius:var(--tdcc-image-radius, 50%);
}
.tdcc-preset-card.tdcc-hover-border .tdcc-tile:hover{
    background:#fffafa;
}

/* ============================================================
   SHADOW LEVELS
   ============================================================ */

.tdcc[style*="--tdcc-tile-shadow:1"] .tdcc-tile{
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.tdcc[style*="--tdcc-tile-shadow:2"] .tdcc-tile{
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.tdcc[style*="--tdcc-tile-shadow:2"] .tdcc-tile:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.13);
}

/* ============================================================
   DRAG & POINTER
   ============================================================ */

.tdcc-drag .tdcc-track{
    cursor:grab;
    touch-action:pan-x pan-y;
}

.tdcc-drag .tdcc-track.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
    user-select:none;
}

/* ============================================================
   AUTOPLAY
   ============================================================ */

.tdcc[data-autoplay="1"]:hover .tdcc-track{
    scroll-behavior:auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:849px){
    .tdcc-track{
        grid-auto-columns:calc((100% - (var(--tdcc-gap) * (var(--tdcc-tc) - 1))) / var(--tdcc-tc));
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x pan-y;
    }

    .tdcc:not(.tdcc-drag) .tdcc-track{
        grid-template-columns:repeat(var(--tdcc-tc), minmax(0, 1fr));
    }
}

@media(max-width:549px){
    .tdcc-head{
        padding:6px 8px;
        min-height:44px;
        gap:10px;
    }

    .tdcc-head h2{
        font-size:14px;
    }

    .tdcc-nav{
        gap:5px;
    }

    .tdcc-nav button{
        width:32px;
        height:32px;
        border-radius:9px;
    }

    .tdcc-nav button span{
        font-size:26px;
    }

    .tdcc-track{
        grid-template-rows:repeat(var(--tdcc-mr), minmax(110px, auto));
        grid-auto-columns:calc((100% - (var(--tdcc-gap) * (min(var(--tdcc-mc), 4) - 1))) / min(var(--tdcc-mc), 4));
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x pan-y;
    }

    .tdcc:not(.tdcc-drag) .tdcc-track{
        grid-template-columns:repeat(min(var(--tdcc-mc), 4), minmax(0, 1fr));
    }

    .tdcc-image{
        width:calc(var(--tdcc-img, 82px) * .78);
        height:calc(var(--tdcc-img, 82px) * .78);
        flex-basis:calc(var(--tdcc-img, 82px) * .78);
    }

    .tdcc-name{
        font-size:13px;
        line-height:1.35;
    }

    .tdcc-product-count{
        font-size:11px;
    }

    .tdcc-tile{
        padding:6px 4px;
        gap:5px;
    }

    .tdcc-badge{
        top:6px;
        right:6px;
        font-size:9px;
        padding:2px 6px;
    }
}

/* ============================================================
   MOBILE / TOUCH DEVICE
   ============================================================ */

@media(hover:none) and (pointer:coarse){
    .tdcc-track{
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x pan-y;
    }

    .tdcc-tile{
        transition:background-color .2s ease, color .2s ease;
    }

    .tdcc-image,
    .tdcc-image img{
        transition:none;
    }

    .tdcc-hover-zoom .tdcc-tile:active .tdcc-image img{
        transform:scale(1.08);
    }
}

.tdcc-track.is-dragging .tdcc-tile,
.tdcc-track.is-dragging .tdcc-image,
.tdcc-track.is-dragging .tdcc-image img{
    transition:none!important;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media(prefers-reduced-motion:reduce){
    .tdcc-nav button,
    .tdcc-tile,
    .tdcc-image,
    .tdcc-image img{
        transition:none;
    }

    .tdcc-track{
        scroll-behavior:auto;
    }
}
/* ============================================================
   BADGE TÙY CHỈNH cho Menu tùy chỉnh
   ============================================================ */

.tdcc-badge-custom{
    position:absolute;
    top:8px;
    right:8px;
    display:inline-block;
    padding:2px 8px;
    font-size:10px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.4px;
    text-transform:uppercase;
    white-space:nowrap;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    pointer-events:none;
    z-index:99;
    /* background + color được set qua inline style */
}

@media(max-width:549px){
    .tdcc-badge-custom{
        top:6px;
        right:6px;
        font-size:9px;
        padding:2px 6px;
    }
}

/* Isolate theme button defaults. */
.tdcc .tdcc-nav button{margin:0;min-height:0;letter-spacing:0;box-shadow:none}
.tdcc-nav[hidden]{display:none}
.tdcc-head h2{color:#222}
.tdcc-image::before{display:none}