.dc-partners-grid,
.dc-partners-grid *,
.dc-partners-grid *::before,
.dc-partners-grid *::after {
    box-sizing: border-box;
}

.dc-partners-grid {
    --dc-pg-max-width: 1280px;
    --dc-pg-columns: 6;
    --dc-pg-row-height: 185px;
    --dc-pg-overscan: 17px;
    --dc-pg-logo-size: 120px;
    --dc-pg-cell-pt: 0px;
    --dc-pg-cell-pr: 0px;
    --dc-pg-cell-pb: 0px;
    --dc-pg-cell-pl: 0px;
    --dc-pg-bg: #fff;
    --dc-pg-divider: #dfdfdf;
    --dc-pg-divider-w: 1px;
    --dc-pg-gray: 100%;
    --dc-pg-opacity: .72;
    --dc-pg-hover-gray: 0%;
    --dc-pg-hover-opacity: 1;
    --dc-pg-hover-scale: 1;
    --dc-pg-hover-duration: 280ms;
    --dc-pg-reveal-distance: 18px;
    --dc-pg-reveal-duration: 560ms;
    --dc-pg-reveal-stagger: 35ms;
    --dc-pg-reveal-easing: cubic-bezier(.22,1,.36,1);

    width: 100%;
    margin: 0;
    overflow: clip;
    background: var(--dc-pg-bg);
}

.dc-partners-grid__viewport {
    width: min(100%, var(--dc-pg-max-width));
    margin: 0 auto;
    overflow: hidden;
}

.dc-partners-grid__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--dc-pg-columns), minmax(0, 1fr));
    width: calc(100% + var(--dc-pg-overscan) + var(--dc-pg-overscan));
    margin-inline: calc(0px - var(--dc-pg-overscan));
    min-width: 0;
    background: var(--dc-pg-bg);
}

/* Che đường viền ngoài cùng; SVG chỉ có đường kẻ nội bộ. */
.dc-partners-grid__grid::before,
.dc-partners-grid__grid::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background: var(--dc-pg-bg);
}

.dc-partners-grid__grid::before {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--dc-pg-divider-w);
}

.dc-partners-grid__grid::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--dc-pg-divider-w);
}

.dc-partners-grid__cell,
.dc-partners-grid__cell:visited {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: var(--dc-pg-row-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dc-pg-cell-pt) var(--dc-pg-cell-pr) var(--dc-pg-cell-pb) var(--dc-pg-cell-pl);
    overflow: hidden;
    color: inherit;
    background: var(--dc-pg-bg);
    border: 0;
    border-right: var(--dc-pg-divider-w) solid var(--dc-pg-divider);
    border-bottom: var(--dc-pg-divider-w) solid var(--dc-pg-divider);
    text-decoration: none;
}

.dc-partners-grid__logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dc-pg-logo-size);
    height: var(--dc-pg-logo-size);
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
}

.dc-partners-grid__logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: var(--dc-pg-opacity);
    filter: grayscale(var(--dc-pg-gray));
    transform: translateZ(0) scale(1);
    transition:
        filter var(--dc-pg-hover-duration) ease,
        opacity var(--dc-pg-hover-duration) ease,
        transform var(--dc-pg-hover-duration) cubic-bezier(.22,1,.36,1);
}

.dc-partners-grid__cell:focus-visible {
    outline: 3px solid rgba(255,150,0,.55);
    outline-offset: -4px;
}

@media (hover:hover) and (pointer:fine) {
    .dc-partners-grid__cell:hover .dc-partners-grid__logo {
        opacity: var(--dc-pg-hover-opacity);
        filter: grayscale(var(--dc-pg-hover-gray));
        transform: translateZ(0) scale(var(--dc-pg-hover-scale));
    }
}

/*
 * Touch/pen parity với hover desktop.
 * :active là fallback CSS; class được JS gắn từ pointerdown để state màu xuất hiện
 * ngay khi chạm và còn giữ ngắn sau pointerup mà không chặn click/link mặc định.
 */
.dc-partners-grid__cell:active .dc-partners-grid__logo,
.dc-partners-grid__cell.dc-pg-touch-active .dc-partners-grid__logo,
.dc-partners-grid__cell:focus-visible .dc-partners-grid__logo {
    opacity: var(--dc-pg-hover-opacity);
    filter: grayscale(var(--dc-pg-hover-gray));
    transform: translateZ(0) scale(var(--dc-pg-hover-scale));
}

/*
 * Progressive enhancement:
 * mặc định mọi nội dung LUÔN hiển thị. Chỉ khi JS đã khởi tạo observer thành công
 * mới thêm .dc-pg-animate-ready và áp trạng thái trước animation.
 */
.dc-partners-grid.dc-pg-animate-ready:not(.dc-pg-visible) .dc-partners-grid__reveal {
    opacity: 0;
    transform: translate3d(0, var(--dc-pg-reveal-distance), 0);
}

.dc-partners-grid.dc-pg-animate-ready .dc-partners-grid__reveal {
    transition:
        opacity var(--dc-pg-reveal-duration) var(--dc-pg-reveal-easing),
        transform var(--dc-pg-reveal-duration) var(--dc-pg-reveal-easing);
    transition-delay: calc(var(--dc-pg-order, 0) * var(--dc-pg-reveal-stagger));
}

.dc-partners-grid.dc-pg-visible .dc-partners-grid__reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 1024px) {
    .dc-partners-grid__grid {
        width: calc(100% + var(--dc-pg-overscan) + var(--dc-pg-overscan));
        margin-inline: calc(0px - var(--dc-pg-overscan));
    }
}

@media (max-width: 767px) {
    .dc-partners-grid__viewport {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-partners-grid *,
    .dc-partners-grid *::before,
    .dc-partners-grid *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }

    .dc-partners-grid__reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Chống theme/Elementor Global Link Styles ám màu hoặc background vào ô logo. */
.dc-partners-grid a.dc-partners-grid__cell:hover,
.dc-partners-grid a.dc-partners-grid__cell:focus,
.dc-partners-grid a.dc-partners-grid__cell:active,
.dc-partners-grid a.dc-partners-grid__cell:visited {
    color: inherit;
    background-color: var(--dc-pg-bg);
    background-image: none;
    text-decoration: none;
    box-shadow: none;
}