/* =========================================
   STYLE CHO HỆ THỐNG TAB
   ========================================= */

/* Wrapper chính */
.acnm-unified-wrapper {
    width: 100%;
}

/* Container chứa các nút tab */
.acnm-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #ededed;
    padding-bottom: 10px;
}

/* Style nút tab */
.acnm-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #504f57;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.acnm-tab-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #000;
}

/* Nút active */
.acnm-tab-btn.active {
    background: #3c4148;
    color: #fff;
}

/* Nội dung tab */
.acnm-tab-content {
    display: none;
    animation: acnmFadeIn 0.4s ease;
}

.acnm-tab-content.active {
    display: block;
}

/* Hiệu ứng Fade In */
@keyframes acnmFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab dạng link (chuyển trang) */
.acnm-tab-btn.acnm-tab-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #504f57;
}

.acnm-tab-btn.acnm-tab-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #000;
    text-decoration: none;
}

/* =========================================
   SHARED NAV HEADER & BUTTONS 
   ========================================= */

/* Bắt đầu css dùng chung cho menu nav-header */
.acnm-unified-wrapper .category-nav-header {
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
}

.acnm-unified-wrapper .category-nav-header-container {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 0rem 0.5rem 0rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.acnm-unified-wrapper .category-nav-header .icon-grid,
.acnm-unified-wrapper .category-nav-header .icon-refresh {
    width: 0.75rem;
    height: 0.75rem;
}

.acnm-unified-wrapper .category-nav-header .icon-flame {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.125rem;
    color: #ef4444;
    fill: currentColor;
}

.acnm-unified-wrapper .category-nav-header .btn-emoji {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.acnm-unified-wrapper .category-nav-header .nav-btn-label {
    font-weight: 500;
}


.acnm-unified-wrapper .category-nav-header a {
    text-decoration: inherit;
}

.acnm-unified-wrapper *,
.acnm-unified-wrapper *::before,
.acnm-unified-wrapper *::after {
    box-sizing: border-box;
}

/* Chống tự động phóng to trên iOS khi bấm nhanh (double-tap) */
.acnm-unified-wrapper a,
.acnm-unified-wrapper button,
.acnm-unified-wrapper .symbol-box-wide,
.acnm-unified-wrapper .symbol-box-square {
    touch-action: manipulation;
}

.acnm-unified-wrapper .category-nav-header * {
    border: 0 solid #f2f2f2;
    --tw-content: "";
}

.acnm-unified-wrapper .category-nav-header button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

.acnm-unified-wrapper .category-nav-header svg {
    display: block;
    vertical-align: middle;
}

.acnm-unified-wrapper .category-nav-header .nav-btn-primary {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    background: #4242f5;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: white;
    font-weight: 500;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.acnm-unified-wrapper .category-nav-header .nav-btn-primary:hover {
    background: #0000ff;
}


.acnm-unified-wrapper .category-nav-header .nav-btn-outline {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
    color: rgb(17 24 39);
    position: relative;
    background-color: white;
    border: 1px solid #f2f2f2;
    transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.acnm-unified-wrapper .category-nav-header .nav-btn-outline:hover {
    border-color: #d1d5db;
    background-color: #f3f4f6;
}


.acnm-unified-wrapper .category-nav-header a.nav-btn-active {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    background-image: linear-gradient(to right, white, #f9fafb);
    border: 1px solid #0000ff !important;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #1d4ed8;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}


.acnm-unified-wrapper .category-nav-header .nav-btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #f3f4f6;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
    color: rgb(17 24 39);
    position: relative;
    background-color: #f3f4f6;
    transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.acnm-unified-wrapper .category-nav-header .nav-btn-secondary:hover {
    border-color: #d1d5db;
    background-color: #f3f4f6;
}

/* Kết thúc css dùng chung cho menu nav-header */

/* =========================================
   SHARED BUTTON STYLES (View All Symbols & Load More)
   ========================================= */
.acnm-unified-wrapper .btn-view-all-symbols,
.acnm-unified-wrapper .acnm-load-more-btn {
    display: block;
    width: 100%;
    text-align: center;
    gap: 2px;
    padding: 10px 8px;
    margin-top: 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    color: #fff;
    position: relative;
    background-color: #2c3436;
    border: 1px solid #2c3436;
    cursor: pointer;
    transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.acnm-unified-wrapper .btn-view-all-symbols:hover,
.acnm-unified-wrapper .acnm-load-more-btn:hover:not(:disabled) {
    color: #fff;
    background: #0000ff;
    border: 1px solid #0000ff;
}

.acnm-unified-wrapper .acnm-load-more-btn:disabled,
.acnm-unified-wrapper .acnm-load-more-btn.acnm-loading {
    opacity: 0.55;
    cursor: not-allowed;
}