/* App Review Core Styles */
:root {
    --arc-primary: #534AB7;
    --arc-primary-light: #EEEDFE;
    --arc-danger: #E24B4A;
    --arc-danger-light: #FCEBEB;
    --arc-success: #639922;
    --arc-success-light: #EAF3DE;
    --arc-warning: #BA7517;
    --arc-warning-light: #FAEEDA;
    --arc-info: #378ADD;
    --arc-info-light: #E6F1FB;
    --arc-text: #1a1a1a;
    --arc-text-secondary: #666;
    --arc-text-tertiary: #999;
    --arc-border: #e5e5e5;
    --arc-bg: #fff;
    --arc-bg-secondary: #f7f7f7;
    --arc-radius: 12px;
    --arc-radius-sm: 8px;
}

/* === Layout === */
.arc-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* === App Header === */
.arc-app-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 20px 0 0;
}
.arc-app-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--arc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 22px;
    flex-shrink: 0;
}
.arc-app-header__info {
    flex: 1;
}
.arc-app-header__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--arc-text);
}
.arc-app-header__meta {
    font-size: 14px;
    color: var(--arc-text-secondary);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* gap=0: spacing được điều khiển bằng .arc-meta-sep và margin
       của .arc-star-rating. Trước đây gap:2px gây khoảng cách
       không đều giữa stars/score/count vs separator. */
    gap: 0;
}
/* Star rating cluster — flex inline để stars + score + count nằm
   trên 1 baseline với view count + comment count. Trước đây span
   default inline → các spans con line-height/font-size khác nhau
   → mỗi item rớt ở baseline khác nhau, mắt thấy lệch. */
.arc-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.arc-meta-sep {
    color: var(--arc-text-tertiary);
    margin: 0 4px;
    font-size: 13px;
    line-height: 1;
}
.arc-app-header__rating {
    text-align: right;
}
.arc-app-header__score {
    font-size: 28px;
    font-weight: 700;
}
.arc-app-header__max {
    font-size: 14px;
    color: var(--arc-text-tertiary);
}
/* Author byline — right side of app header */
.arc-app-author {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-left: 14px;
    border-left: 1px solid var(--arc-border, #e5e5e5);
    text-decoration: none;
    cursor: pointer;
}
.arc-app-author:hover .arc-app-author__name {
    text-decoration: underline;
}
.arc-app-author__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.arc-app-author__label {
    /* Label "Đăng bởi" — text nhỏ màu xám đặt trên tên user. SEO
       benefit: explicit "posted by {name}" pattern giúp Google
       hiểu role của tên là author, không phải brand/title. */
    font-size: 10px;
    color: #888;
    line-height: 1;
    margin: 0;
    font-weight: 400;
}
.arc-app-author__name {
    font-size: 11px;
    font-weight: 600;
    color: #534AB7;
    margin: 0;
}
.arc-app-author__time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: var(--arc-text-tertiary, #999);
}
.arc-app-author__time time {
    font-size: inherit;
    color: inherit;
}

/* === Breadcrumb (SEO) === */
/* (Old breadcrumb rules removed — superseded by the XenForo-style
   block further down; kept consolidated in one place to make future
   tweaks obvious.) */

/* === Featured Section (SEO) === */
.arc-featured {
    margin-bottom: 28px;
}
.arc-featured__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--arc-text);
}
.arc-featured__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.arc-featured__item {
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 14px 16px;
}
.arc-featured__item--scam {
    border-left: 3px solid var(--arc-danger);
    border-radius: 0 var(--arc-radius) var(--arc-radius) 0;
}
.arc-featured__item--faq {
    border-left: 3px solid var(--arc-info);
    border-radius: 0 var(--arc-radius) var(--arc-radius) 0;
}

/* === Tabs === */
.arc-tabs {
    display: flex;
    background: #EEEDFE;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 20px;
}
.arc-tabs::-webkit-scrollbar {
    display: none;
}
.arc-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 9px;
    color: #3C3489;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.arc-tab--vtc {
    flex: 1.3;
}
.arc-tab--scam {
    flex: 0.7;
}
.arc-tab:hover {
    background: rgba(83,74,183,0.08);
}
.arc-tab--active {
    background: #534AB7;
    color: #fff;
}
.arc-tab--active:hover {
    background: #534AB7;
}
.arc-tab__icon {
    font-size: 16px;
    line-height: 1;
}
.arc-tab__label {
    font-size: 12px;
    line-height: 1.2;
}
.arc-tab__count {
    font-size: 10px;
    opacity: 0.6;
}
.arc-tab--active .arc-tab__count {
    opacity: 0.85;
}

@media (min-width: 641px) {
    .arc-tab {
        flex-direction: row;
        gap: 4px;
        padding: 10px 12px;
        font-size: 14px;
    }
    .arc-tab__icon {
        font-size: 16px;
    }
    .arc-tab__label {
        font-size: 14px;
    }
    .arc-tab__count {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .arc-tab {
        padding: 8px 3px;
    }
    .arc-tab__label {
        font-size: 11px;
    }
}

/* === Comment Box === */
.arc-comment-box {
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.arc-comment-box__inner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.arc-comment-box textarea {
    flex: 1;
    border: none;
    background: var(--arc-bg-secondary);
    border-radius: var(--arc-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    resize: none;
    min-height: 44px;
    max-height: 200px;
    font-family: inherit;
    color: var(--arc-text);
    outline: none;
    transition: min-height .2s;
}
.arc-comment-box textarea:focus {
    min-height: 80px;
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
}
.arc-comment-box__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-left: 46px;
}
.arc-comment-box__upload {
    font-size: 13px;
    color: var(--arc-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
}
.arc-comment-box__upload:hover {
    color: var(--arc-text);
}
.arc-comment-box__submit {
    margin-left: auto;
    background: var(--arc-primary);
    color: #fff;
    border: none;
    border-radius: var(--arc-radius-sm);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}
.arc-comment-box__submit:hover {
    opacity: .9;
}
.arc-comment-box__submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.arc-comment-box__previews {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-left: 46px;
    flex-wrap: wrap;
}
.arc-comment-box__preview {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--arc-radius-sm);
    overflow: hidden;
}
.arc-comment-box__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-comment-box__preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Guest Info === */
.arc-guest-info {
    display: none;
    gap: 8px;
    margin-top: 8px;
    padding-left: 46px;
}
.arc-guest-info.visible {
    display: flex;
}
.arc-guest-info input {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    outline: none;
    font-family: inherit;
}

/* === Avatar === */
.arc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--arc-primary-light);
    color: var(--arc-primary);
}
.arc-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* === Comment === */
.arc-comment {
    margin-bottom: 16px;
}
.arc-comment__pinned {
    font-size: 12px;
    color: var(--arc-primary);
    font-weight: 600;
    margin-bottom: 4px;
    padding-left: 46px;
}
.arc-comment__inner {
    background: var(--arc-bg);
    border: 1.5px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 16px 18px;
    transition: border-color .15s;
}

/* ═══════════════════════════════════════════════════════════════════
   Variant B — rotating pastel border + subtle gradient per root comment.
   Each comment card gets a distinct color tint so long comment threads
   don't look like one continuous white blob. Cycles through 5 colors
   based on nth-child(5n+N).
   ═══════════════════════════════════════════════════════════════════ */
.arc-comment:nth-child(5n+1) > .arc-comment__inner {
    border-color: #C9A8E8;
    background: linear-gradient(to bottom, #fcfaff 0%, #fff 80px);
}
.arc-comment:nth-child(5n+2) > .arc-comment__inner {
    border-color: #AAD4E8;
    background: linear-gradient(to bottom, #f7fcfe 0%, #fff 80px);
}
.arc-comment:nth-child(5n+3) > .arc-comment__inner {
    border-color: #A8DBC1;
    background: linear-gradient(to bottom, #f7fdfa 0%, #fff 80px);
}
.arc-comment:nth-child(5n+4) > .arc-comment__inner {
    border-color: #F0C878;
    background: linear-gradient(to bottom, #fefaf0 0%, #fff 80px);
}
.arc-comment:nth-child(5n+5) > .arc-comment__inner {
    border-color: #E8A8B8;
    background: linear-gradient(to bottom, #fef8fa 0%, #fff 80px);
}

/* Tab-specific colors override the rotation for tabs that have strong
   semantic meaning (danger alerts, success stories). Keeps the signal
   clear — a scam warning should ALWAYS look red, not randomly pink. */
.arc-comment[data-tab="canh-bao-scam"] > .arc-comment__inner,
.arc-tab-panel[data-tab="canh-bao-scam"] .arc-comment > .arc-comment__inner {
    border-color: #E8A8A8 !important;
    background: linear-gradient(to bottom, #fef5f5 0%, #fff 80px) !important;
}
.arc-comment[data-tab="giai-dap-nhanh"] > .arc-comment__inner,
.arc-tab-panel[data-tab="giai-dap-nhanh"] .arc-comment > .arc-comment__inner {
    border-color: #A8DBC1 !important;
    background: linear-gradient(to bottom, #f5fcf8 0%, #fff 80px) !important;
}

/* Subtle hover lift to make cards feel "tappable" */
.arc-comment__inner:hover {
    border-color: #8078c8;
}
.arc-comment:nth-child(5n+2) > .arc-comment__inner:hover { border-color: #6BA8D4; }
.arc-comment:nth-child(5n+3) > .arc-comment__inner:hover { border-color: #5FB594; }
.arc-comment:nth-child(5n+4) > .arc-comment__inner:hover { border-color: #D49F42; }
.arc-comment:nth-child(5n+5) > .arc-comment__inner:hover { border-color: #D17A92; }
.arc-comment__header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.arc-comment__body {
    min-width: 0;
    overflow: visible;
    word-break: break-word;
}
.arc-comment__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.arc-comment__author {
    font-size: 15px;
    font-weight: 700;
    color: var(--arc-text);
    text-decoration: none;
}
.arc-comment__author:hover {
    text-decoration: underline;
}
.arc-comment__in {
    font-size: 12px;
    color: var(--arc-text-tertiary);
}
.arc-comment__app-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--arc-info);
    text-decoration: none;
}
.arc-comment__app-link:hover {
    text-decoration: underline;
}
.arc-comment__time {
    font-size: 12px;
    color: var(--arc-text-tertiary);
}
.arc-comment__content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--arc-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    margin-bottom: 4px;
}
.arc-comment__content--truncated {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}
.arc-comment__content--truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--arc-bg, #fff));
}
.arc-comment__content--expanded {
    max-height: none;
    overflow: visible;
}
.arc-comment__content--expanded::after {
    display: none;
}
.arc-content-toggle {
    background: none;
    border: none;
    color: var(--arc-info, #185FA5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 6px;
    font-family: inherit;
}
.arc-content-toggle:hover {
    text-decoration: underline;
}
.arc-comment__content p {
    margin: 0 0 8px;
}
.arc-comment__content p:last-child {
    margin-bottom: 0;
}

/* === Comment Images ===
 * Each image lives inside an .arc-comment__image-link wrapper that
 * reserves a fixed aspect-ratio box BEFORE the image data arrives.
 * Without this, browsers don't know how tall the image will be
 * until decode finishes, and the comment text gets pushed down on
 * load — that jump is a Cumulative Layout Shift (CLS) hit, which
 * Google penalises in Core Web Vitals.
 *
 * The wrapper is the layout anchor; the <img> inside fills it
 * with object-fit:cover so portrait/landscape both look right.
 */
.arc-comment__images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.arc-comment__image-link {
    display: block;
    width: 200px;
    aspect-ratio: 4 / 3;
    border-radius: var(--arc-radius-sm, 8px);
    overflow: hidden;
    background: #f0f0f0; /* placeholder color while loading */
    flex-shrink: 0;
}
.arc-comment__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity .2s;
    display: block;
}
.arc-comment__images img:hover { opacity: .85; }
.arc-comment__images--sm .arc-comment__image-link {
    width: 120px;
}

/* === Comment Actions === */
.arc-comment__actions {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--arc-border, #e5e5e5);
    align-items: center;
}
.arc-btn-like,
.arc-btn-reply {
    font-size: 13px;
    font-weight: 600;
    color: var(--arc-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}
.arc-btn-like:hover,
.arc-btn-reply:hover {
    color: var(--arc-text);
}
.arc-btn-like--active {
    color: var(--arc-primary);
}
.arc-btn-view {
    font-size: 12px;
    color: var(--arc-info);
    text-decoration: none;
    margin-left: auto;
}
.arc-btn-view:hover {
    text-decoration: underline;
}

/* === Replies === */
.arc-replies {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--arc-border);
}
.arc-reply {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.arc-reply__body {
    flex: 1;
    min-width: 0;
    overflow: visible;
    word-break: break-word;
}
.arc-btn-more-replies {
    font-size: 13px;
    color: var(--arc-info);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}

/* === Reply Box === */
.arc-reply-box {
    contain: inline-size;
    margin-top: 8px;
}
.arc-reply-box__inner {
}
.arc-reply-box__wrap {
    background: #f0f0f0;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    padding: 10px 14px 6px;
    contain: inline-size;
}
.arc-reply-input {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    color: var(--arc-text);
    resize: none;
    line-height: 1.5;
    min-height: 21px;
    max-height: 160px;
    box-sizing: border-box;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
.arc-reply-input:focus {
    outline: none;
}
.arc-reply-input::placeholder {
    color: #999;
}
.arc-reply-box__icons {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    margin-top: 4px;
}
.arc-reply-icon-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    line-height: 1;
    color: #666;
    transition: background .15s;
}
.arc-reply-icon-btn:hover {
    background: #e0e0e0;
}
.arc-reply-submit {
    background: none;
    border: none;
    color: #534AB7;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
    white-space: nowrap;
}
.arc-reply-submit:hover {
    text-decoration: underline;
}
.arc-reply-previews {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
    cursor: pointer;
    font-family: inherit;
}

/* === Badges === */
.arc-badge {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: var(--arc-radius-sm);
    font-weight: 500;
    white-space: nowrap;
}
.arc-badge--info {
    background: var(--arc-info-light);
    color: var(--arc-info);
}
.arc-badge--danger {
    background: var(--arc-danger-light);
    color: var(--arc-danger);
}
.arc-badge--success {
    background: var(--arc-success-light);
    color: var(--arc-success);
}
.arc-badge--warning {
    background: var(--arc-warning-light);
    color: var(--arc-warning);
}

/* === Load More === */
.arc-load-more {
    text-align: center;
    padding: 16px 0;
}
.arc-load-more button {
    font-size: 14px;
    color: var(--arc-info);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* === Spinner === */
.arc-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--arc-border);
    border-top-color: var(--arc-primary);
    border-radius: 50%;
    animation: arc-spin .6s linear infinite;
}
@keyframes arc-spin {
    to { transform: rotate(360deg); }
}

/* === No Reply Prompt === */
.arc-no-reply {
    background: var(--arc-bg-secondary);
    border-radius: var(--arc-radius-sm);
    padding: 8px 12px;
    margin-top: 8px;
    border-left: 3px solid var(--arc-warning);
    border-radius: 0;
}
.arc-no-reply p {
    font-size: 13px;
    color: var(--arc-warning);
    margin: 0;
}

/* === Optimistic Comment (sending) === */
.arc-comment--sending {
    opacity: .6;
}
.arc-comment--failed {
    border-color: var(--arc-danger);
}
.arc-comment--failed .arc-comment__inner {
    border-color: var(--arc-danger);
}

/* === Homepage === */
.arc-homepage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 16px 0;
}
.arc-homepage-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--arc-text);
}
.arc-homepage-header p {
    font-size: 13px;
    color: var(--arc-text-secondary);
    margin: 4px 0 0;
}

/* === Quick Stats === */
.arc-quick-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.arc-stat-card {
    flex-shrink: 0;
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s;
}
.arc-stat-card:hover {
    border-color: var(--arc-primary);
}

/* === App List === */
.arc-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--arc-text);
}
.arc-app-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--arc-border);
    border-radius: 8px;
    padding: 14px 12px;
    margin: 0;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.arc-app-card:last-child {
    border-bottom: 0;
}
.arc-app-card:hover {
    background: #faf9ff;
}
/* Pull the list flush against the section padding so the hover
   highlight extends edge-to-edge of the rows even though we keep
   horizontal padding on each row. */
#arc-app-list {
    margin: 0 -12px;
}
.arc-app-card__icon-wrap {
    flex-shrink: 0;
}
.arc-app-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--arc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.arc-app-card__info {
    flex: 1;
    min-width: 0;
}
.arc-app-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.arc-app-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--arc-text);
    line-height: 1.3;
}

/* Inline badges next to the app name. The base class supplies pill
   geometry; modifier classes layer on the color theme. */
.arc-app-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.arc-app-card__badge svg,
.arc-app-card__badge i {
    flex-shrink: 0;
}
.arc-app-card__badge--hot {
    background: #FAECE7;
    color: #993C1D;
}
.arc-app-card__badge--hot svg,
.arc-app-card__badge--hot i {
    color: #D85A30;
}

.arc-app-card__tagline {
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.45;
    margin: 4px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-app-card__metrics {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--arc-text-tertiary);
}
.arc-app-card__metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1;
}
.arc-app-card__metric svg,
.arc-app-card__metric i {
    color: var(--arc-text-tertiary);
    flex-shrink: 0;
}

.arc-app-card__rating-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}
.arc-app-card__rating-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}
.arc-app-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
}
.arc-app-card__stars--empty {
    font-size: 11px;
    color: var(--arc-text-tertiary);
    font-weight: normal;
}
.arc-app-card__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.arc-app-card__star--on {
    color: #BA7517;
}
.arc-app-card__star--off {
    color: #D3D1C7;
}
.arc-app-card__review-count {
    font-size: 11px;
    color: var(--arc-text-tertiary);
    margin-top: 4px;
}

@media (max-width: 600px) {
    .arc-app-card {
        padding: 12px 0;
        gap: 10px;
    }
    .arc-app-card__icon {
        width: 42px;
        height: 42px;
    }
    .arc-app-card__name {
        font-size: 14px;
    }
    .arc-app-card__badge {
        font-size: 10px;
        padding: 1px 6px;
    }
    .arc-app-card__tagline {
        font-size: 12px;
        margin: 3px 0 5px;
    }
    .arc-app-card__metrics {
        gap: 10px;
    }
    .arc-app-card__metric {
        font-size: 11px;
    }
    .arc-app-card__rating-num {
        font-size: 17px;
    }
    .arc-app-card__rating-block {
        min-width: 56px;
    }
    .arc-app-card__review-count {
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   APPS SECTION — outer wrapper for the homepage app list
   White card with header (title + count + search) on top, filter
   chips below, list of cards inside, "Xem thêm app" footer. Sits
   below the homepage hero / search widgets.
   ═══════════════════════════════════════════════════════════════════ */
.arc-apps-section {
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 24px 0 28px;
}
.arc-apps-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.arc-apps-section__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--arc-text);
    line-height: 1.2;
}
.arc-apps-section__sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--arc-text-tertiary);
}
.arc-apps-section__search {
    width: 220px;
    margin: 0;
}
.arc-apps-section__search input {
    padding: 8px 14px;
    font-size: 13px;
}
.arc-apps-section .arc-filters {
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    /* Full-bleed handling for .arc-apps-section is in the shared
       mobile selector list near line 2200 — same rules as
       .arc-topic-list, .arc-feed, etc. Don't duplicate the negative-
       margin / border-x rules here or they'll race against the
       shared rule's !important specificity. */
    .arc-apps-section__header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .arc-apps-section__search {
        width: 100%;
    }
    .arc-apps-section__title {
        font-size: 15px;
    }
}

/* === Search === */
.arc-search {
    position: relative;
    margin-bottom: 16px;
}
.arc-search input {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--arc-text);
}
.arc-search input:focus {
    border-color: var(--arc-primary);
}

/* === Filter Tags === */
.arc-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.arc-filter-tag {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--arc-border);
    background: var(--arc-bg);
    color: var(--arc-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.arc-filter-tag:hover,
.arc-filter-tag--active {
    background: var(--arc-primary);
    color: #fff;
    border-color: var(--arc-primary);
}

/* === Modal === */
.arc-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.arc-modal-overlay.visible {
    display: flex;
}
.arc-modal {
    background: var(--arc-bg);
    border-radius: var(--arc-radius);
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}
.arc-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.arc-modal__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.arc-modal__close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--arc-text-tertiary);
    cursor: pointer;
    padding: 4px 8px;
}
.arc-modal label {
    font-size: 13px;
    color: var(--arc-text-secondary);
    display: block;
    margin-bottom: 6px;
}
.arc-modal input[type="text"],
.arc-modal textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--arc-text);
}
.arc-modal textarea {
    resize: none;
    height: 80px;
}

/* === Alert boxes in modal === */
.arc-alert {
    border-radius: var(--arc-radius-sm);
    padding: 12px 14px;
    margin: 10px 0 14px;
}
.arc-alert--warning {
    background: var(--arc-warning-light);
}
.arc-alert--warning p {
    color: #854F0B;
}
.arc-alert--success {
    background: var(--arc-success-light);
}
.arc-alert--success p {
    color: #27500A;
}
.arc-alert p {
    margin: 0;
    font-size: 13px;
}
.arc-alert p strong {
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

/* === Responsive === */
@media (max-width: 640px) {
    .arc-app-header {
        flex-wrap: wrap;
    }
    .arc-tabs {
        gap: 2px;
        overflow-x: hidden;
        flex-wrap: nowrap;
    }
    .arc-tab {
        font-size: 12px;
        padding: 8px 4px;
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .arc-tab--vtc { flex: 1.2 1 0; }
    .arc-tab--scam { flex: 0.8 1 0; }
    .arc-tab--intro { flex: 0.9 1 0; }
    .arc-tab__icon { font-size: 13px; }
    .arc-tab__label { font-size: 11px; }
    .arc-comment__image-link {
        width: 140px;
    }
    .arc-comment__images--sm .arc-comment__image-link {
        width: 100px;
    }
    .arc-quick-stats {
        gap: 8px;
    }
    .arc-homepage-header {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* === Post Topic Button === */
.arc-btn-post-topic {
    background: #0F6E56;
    color: #fff;
    border: none;
    border-radius: var(--arc-radius-sm);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.arc-btn-post-topic:hover {
    opacity: .9;
}

/* === Topic Modal === */
.arc-topic-app-item:hover {
    background: var(--arc-bg-secondary);
}
/* (Old pill-style .arc-topic-tab rules removed — superseded by the
   underline-tab rules in the BREADCRUMB / topic-modal block further
   down. Kept the rest of the create-topic helpers below.) */
#arc-topic-app-dropdown {
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    max-height: 200px;
    overflow-y: auto;
}
#arc-topic-previews {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* === @Tag Name === */
.arc-tag {
    color: #534AB7;
    font-weight: 600;
    background: #EEEDFE;
    padding: 1px 4px;
    border-radius: 4px;
    cursor: pointer;
}
.arc-tag:hover {
    background: #CECBF6;
}

/* === Show More Replies Button === */
.arc-btn-show-replies {
    font-size: 13px;
    color: var(--arc-info);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    font-family: inherit;
    font-weight: 600;
}
.arc-btn-show-replies:hover {
    text-decoration: underline;
}
.arc-btn-load-replies {
    font-size: 13px;
    color: var(--arc-info);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    font-family: inherit;
    font-weight: 600;
}
.arc-btn-load-replies:hover {
    text-decoration: underline;
}

/* === Image Lightbox === */
.arc-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 20px;
}
.arc-lightbox img {
    max-width: 95%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
}
.arc-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.arc-lightbox__close:hover {
    background: rgba(255,255,255,0.35);
}

/* === Header Notifications === */
.arc-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.arc-header-icon {
    position: relative;
    cursor: pointer;
    padding: 4px;
}
.arc-header-icon svg {
    width: 20px;
    height: 20px;
}
.arc-header-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #E24B4A;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-header-badge--msg {
    background: #534AB7;
}
.arc-header-badge:empty {
    display: none;
}
.arc-user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.arc-user-menu__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--arc-text);
}

/* === Notification Dropdown === */
.arc-notif-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 440px;
    overflow-y: auto;
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 9999;
}
.arc-notif-dropdown.visible {
    display: block;
}
.arc-notif-dropdown__header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--arc-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.arc-notif-dropdown__header span:first-child {
    font-size: 16px;
    font-weight: 600;
}
.arc-notif-dropdown__header span:last-child {
    font-size: 12px;
    color: var(--arc-primary);
    cursor: pointer;
}

/* === Notification Item === */
.arc-notif {
    border-bottom: 1px solid var(--arc-border);
    position: relative;
}
.arc-notif:last-child {
    border-bottom: none;
}
.arc-notif--unread {
    background: #EEEDFE;
}
.arc-notif__link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.arc-notif__inner {
    padding: 10px 38px 10px 16px;   /* extra right padding for × button */
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.arc-notif__body {
    flex: 1;
    min-width: 0;
}
.arc-notif__text {
    font-size: 13px;
    color: var(--arc-text);
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}
.arc-notif__time {
    font-size: 11px;
    color: var(--arc-text-tertiary);
    margin: 3px 0 0;
}
.arc-notif__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #534AB7;
    flex-shrink: 0;
    margin-top: 14px;   /* shifted down so × button doesn't overlap */
}

/* Dismiss × button — always visible (faded) so users can mute the
   thread of any notification (read or unread). Click × removes the
   notif from the list and silences future notifs from the same thread. */
.arc-notif__dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity .12s, background .12s, color .12s;
    z-index: 2;
}
.arc-notif:hover .arc-notif__dismiss,
.arc-notif__dismiss:focus-visible {
    opacity: 1;
}
.arc-notif__dismiss:hover {
    background: #fcebeb;
    color: #A32D2D;
}

/* Touch devices: keep × visible at 60% so users see it without hover */
@media (hover: none) {
    .arc-notif__dismiss {
        opacity: 0.6;
    }
    .arc-notif__dismiss:active {
        opacity: 1;
        background: #fcebeb;
        color: #A32D2D;
    }
}

/* Empty state shown when all notifications have been dismissed */
.arc-notif-empty {
    text-align: center;
    padding: 32px 16px;
    color: #999;
    font-size: 13px;
    margin: 0;
}

/* === Dashboard === */
.arc-dashboard {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px;
}
.arc-dashboard__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 0;
}
.arc-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.arc-stat {
    background: var(--arc-bg-secondary);
    border-radius: var(--arc-radius-sm);
    padding: 14px;
}
.arc-stat--clickable {
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .12s;
}
.arc-stat--clickable:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 153, 34, 0.12);
}
.arc-stat--clickable:focus-visible {
    outline: 2px solid #639922;
    outline-offset: 2px;
}
.arc-stat__label {
    font-size: 12px;
    color: var(--arc-text-tertiary);
    margin: 0;
}
.arc-stat__value {
    font-size: 24px;
    font-weight: 600;
    margin: 4px 0 0;
}
.arc-dashboard__section {
    margin-bottom: 28px;
}
.arc-dashboard__section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--arc-text);
    margin: 0 0 12px;
}

/* === Dashboard Tabs === */
.arc-dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--arc-border);
    margin-bottom: 20px;
}
.arc-dash-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--arc-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.arc-dash-tab--active {
    font-weight: 600;
    color: var(--arc-text);
    border-bottom-color: var(--arc-primary);
}

/* === Pending App Card (admin) === */
.arc-pending-app {
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.arc-pending-app__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.arc-btn-approve {
    padding: 6px 14px;
    background: #0F6E56;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.arc-btn-reject {
    padding: 6px 14px;
    background: none;
    border: 1px solid #E24B4A;
    color: #E24B4A;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

/* === Messages === */
.arc-msg-container {
    display: flex;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    min-height: 400px;
}
.arc-msg-list {
    width: 280px;
    border-right: 1px solid var(--arc-border);
    overflow-y: auto;
    flex-shrink: 0;
}
.arc-msg-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.arc-msg-chat__header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--arc-border);
    font-weight: 600;
    font-size: 15px;
}
.arc-msg-chat__body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    max-height: 340px;
}
.arc-msg-chat__input {
    padding: 12px 16px;
    border-top: 1px solid var(--arc-border);
    display: flex;
    gap: 8px;
}
.arc-msg-chat__input input {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid var(--arc-border);
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}
.arc-msg-chat__input button {
    background: #534AB7;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .arc-notif-dropdown {
        width: 300px;
    }
    .arc-msg-container {
        flex-direction: column;
    }
    .arc-msg-list {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--arc-border);
        max-height: 200px;
    }
    .arc-dashboard__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === Quick Dashboard Bar === */
.arc-quickdash {
    background: var(--arc-bg);
    border-bottom: 1px solid var(--arc-border);
    padding: 0;
}
.arc-quickdash__inner {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
}
.arc-qd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    border-radius: 8px;
    transition: background .15s;
}
.arc-qd-item:hover {
    background: var(--arc-bg-secondary);
}
.arc-qd-item--link {
    font-size: 13px;
    color: var(--arc-primary);
    font-weight: 600;
    margin-left: auto;
}
.arc-qd-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.arc-qd-label {
    font-size: 12px;
    color: var(--arc-text-secondary);
}
.arc-qd-sep {
    width: 1px;
    height: 20px;
    background: var(--arc-border);
    flex-shrink: 0;
    margin: 0 4px;
}

@media (max-width: 640px) {
    .arc-qd-label {
        display: none;
    }
    .arc-qd-item {
        padding: 4px 8px;
    }
}

/* === User Profile === */
.arc-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--arc-border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.arc-profile-avatar {
    position: relative;
    flex-shrink: 0;
}
.arc-profile-online {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #639922;
    border: 2px solid var(--arc-bg);
    border-radius: 50%;
}
.arc-profile-info {
    flex: 1;
    min-width: 0;
}
.arc-profile-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--arc-text);
}
.arc-profile-meta {
    font-size: 13px;
    color: var(--arc-text-secondary);
    margin: 4px 0 0;
}
.arc-profile-status--online {
    color: #639922;
    font-weight: 600;
}
.arc-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.arc-profile-section {
    margin-bottom: 28px;
}
.arc-profile-section__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--arc-text);
    margin: 0 0 12px;
}
.arc-btn-send-msg {
    background: #534AB7;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* === Activity Item === */
/* Activity feed (Topic system) — compact timeline.
   Single-line headlines, mini tags, optional one-line excerpt.
   Replaces the older card-style .arc-activity-item layout. */
.arc-activity-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.arc-activity-filter__chip {
    padding: 3px 10px;
    border: 1px solid var(--arc-border);
    border-radius: 14px;
    font-size: 11px;
    cursor: pointer;
    background: #fff;
    color: var(--arc-text-secondary);
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.arc-activity-filter__chip:hover {
    border-color: var(--arc-primary);
    color: var(--arc-primary);
}
.arc-activity-filter__chip--active {
    background: var(--arc-primary);
    color: #fff;
    border-color: var(--arc-primary);
}
.arc-activity-list {
    display: flex;
    flex-direction: column;
}
.arc-activity-row {
    /* Grid puts the icon, body, and time in fixed columns so the
       time stays right-aligned and never wraps under the body —
       compact rhythm regardless of headline length. */
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--arc-border);
    align-items: start;
}
.arc-activity-row:first-child { padding-top: 0; }
.arc-activity-row:last-child { border-bottom: 0; padding-bottom: 0; }
.arc-activity-row__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.arc-activity-row__icon--topic { background: #EEEDFE; color: #534AB7; }
.arc-activity-row__icon--reply { background: #E0F5EE; color: #0F6E56; }
.arc-activity-row__icon--app   { background: #FAEEDA; color: #854F0B; }
.arc-activity-row__body {
    min-width: 0;
}
.arc-activity-row__head {
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.45;
}
.arc-activity-row__head strong {
    color: var(--arc-text);
    font-weight: 500;
}
.arc-activity-row__head a {
    color: var(--arc-primary);
    text-decoration: none;
    font-weight: 500;
}
.arc-activity-row__head a:hover {
    text-decoration: underline;
}
.arc-activity-row__time {
    /* Pulled out of the headline into its own grid column —
       always right-aligned, never wraps. Compact "5 giờ" /
       "3 ngày" form (without "trước") since the column header
       implies recency. */
    color: var(--arc-text-tertiary);
    font-size: 11px;
    white-space: nowrap;
    padding-top: 3px;
}
.arc-activity-row__excerpt {
    color: var(--arc-text-tertiary);
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-activity-row__tag {
    /* Inline mini-pill — sits next to the link in the headline
       without breaking the line. 10px font + 1px vertical
       offset so it visually centers with surrounding text. */
    display: inline-block;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 3px;
    line-height: 14px;
    vertical-align: 1px;
}
.arc-activity-row__tag--discuss { background: #EEEDFE; color: #534AB7; }
.arc-activity-row__tag--vtc     { background: #E0F5EE; color: #0F6E56; }
.arc-activity-row__tag--scam    { background: #FBEAF0; color: #993556; }
.arc-activity-row__tag--pending { background: #FAEEDA; color: #854F0B; }

@media (max-width: 540px) {
    /* Mobile: collapse the time column into the body so headlines
       have full width to wrap. Time falls under headline as a
       muted sub-line. Icon stays in the left rail. */
    .arc-activity-row {
        grid-template-columns: 24px 1fr;
    }
    .arc-activity-row__icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    .arc-activity-row__time {
        display: block;
        padding-top: 2px;
    }
    .arc-activity-row__head {
        font-size: 12px;
    }
    .arc-activity-row__excerpt {
        font-size: 11px;
    }
}

/* Legacy .arc-activity-item rules removed — they styled card-shaped
   entries with footer like-counts, but the activity feed is now a
   compact timeline. */

/* ==================================
   MOBILE RESPONSIVE FIX (COMPLETE)
   ================================== */
@media (max-width: 768px) {
    /* iOS-native pattern: gray page background, white cards
       full-bleed to the viewport edge. Cards stand out by
       background contrast (white on gray) instead of borders. */
    body {
        background: #F2F2F7 !important;
    }

    /* Container keeps 12px horizontal padding for inline content
       (headings, breadcrumbs, buttons). Cards below use NEGATIVE
       MARGIN to bleed back out — simpler and more reliable than
       100vw+transform, which broke layouts that nested cards
       inside flex/grid parents (transform doesn't compose with
       flex item placement). */
    .arc-container {
        padding: 0 12px;
    }

    /* Override `overflow: hidden` on layout wrappers so child cards
       can bleed past the wrapper edge. Without this, .arc-app-main
       clips the negative-margin breakout below and cards still look
       inset. Wrappers don't actually need overflow:hidden on mobile —
       it was a desktop-only safety against very wide images. */
    .arc-app-main,
    .arc-app-layout,
    .arc-app-sidebar,
    .arc-app-info-panel,
    .arc-app-content,
    .art-main,
    .arc-pub-card,
    .arc-sidebar-card,
    .arc-pub-card-wrap {
        overflow: visible !important;
    }

    /* Zero parent paddings on mobile so inner sections that use
       negative-margin breakout can actually reach the viewport
       edge. arc-pub-card had padding via its sub-elements; we
       reset the wrapper itself to 0 here. */
    .arc-pub-card,
    .arc-sidebar-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Full-bleed via negative margin: -12px on each side cancels
       the container's 12px padding, putting the element at the
       viewport edge. Internal padding restores breathing room
       for content. Border + radius removed for the iOS-card look. */
    .arc-topic-list,
    .arc-feed,
    .arc-app-card,
    .arc-feed-card,
    .arc-info-card,
    .arc-faq-section,
    .arc-comments-section,
    .arc-related-apps,
    .arc-banga-promo,
    .arc-mod-card,
    .arc-app-search,
    .arc-vtc-section,
    .arc-topic-detail__header,
    .arc-topic-replies,
    .arc-topic-related,
    .arc-hero__stats,
    .arc-topic-section,
    .arc-detail-info,
    .arc-app-info-panel,
    .arc-apps-section,
    .arc-app-sidebar {
        margin-left: -12px !important;
        margin-right: -12px !important;
        /* Width:auto needed because some of these wrappers have
           explicit width:100% from desktop; that pins their
           content-box width regardless of the negative margin,
           so the element doesn't actually grow past parent edge.
           Setting width:auto lets the negative margins expand
           the element to truly hit the viewport edge. */
        width: auto !important;
        max-width: none !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
        background: #fff;
    }

    /* Tab panels stay transparent — they're invisible wrappers,
       not visual cards. Their inner content (topic list etc.)
       does the bleed. */
    .arc-tab-content,
    .arc-tab-panel {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* ── Sidebar / pub-card nested-bleed cleanup ──────────────
       The sidebar markup nests 6 layers deep:

         .arc-app-info-panel        ← OUTER bleed layer
           > .arc-pub-card-wrap     ← passthrough
             > .arc-pub-card        ← passthrough
               > .arc-pub-card__head           ← bleeds + pads
               > .arc-pub-card__section        ← bleeds + pads
               > .arc-pub-card__section--apps  ← bleeds + pads

       Wrappers (.arc-pub-card-wrap, .arc-pub-card) are
       transparent passthroughs with NO margin/padding so they
       don't fight nested negative margins. Leaf sections each
       carry their own bleed (-12px margin) so they reach the
       viewport edge from wherever they sit, then restore
       horizontal padding for content. */
    .arc-pub-card-wrap,
    .arc-pub-card,
    .arc-sidebar-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Leaf sections — each bleeds to viewport edge. width:auto
       lets negative margins actually expand width past parent. */
    .arc-pub-card__head,
    .arc-pub-card__section,
    .arc-pub-card__section--apps {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: auto !important;
        max-width: none !important;
        background: #fff !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Reset any desktop margin-trick on nested topic lists so
       only the outer rule applies on mobile. */
    .arc-topic-section .arc-topic-list {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    /* Heading + filter row inside section sit at the container
       inset, not the bled-out card. */
    .arc-topic-section__header {
        padding: 16px 0 12px !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    .arc-topic-toolbar {
        padding: 8px 0 !important;
    }

    /* Drop list-wrapper border so only the row separators show. */
    .arc-topic-list,
    .arc-feed {
        border: none !important;
    }

    /* 8px gray gap between successive full-bleed cards so they
       read as separate panels rather than one giant card. */
    .arc-topic-list,
    .arc-feed,
    .arc-app-card,
    .arc-feed-card,
    .arc-info-card,
    .arc-faq-section,
    .arc-comments-section,
    .arc-related-apps,
    .arc-banga-promo,
    .arc-mod-card,
    .arc-app-search,
    .arc-vtc-section,
    .arc-topic-detail__header,
    .arc-topic-replies,
    .arc-topic-related,
    .arc-hero__stats,
    .arc-topic-section,
    .arc-detail-info,
    .arc-app-info-panel,
    .arc-apps-section,
    .arc-app-sidebar {
        margin-bottom: 8px !important;
    }

    /* Internal padding so card content doesn't touch the
       viewport edge. */
    .arc-topic-row,
    .arc-app-card,
    .arc-feed-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Card internals on mobile — restore breathing room. */
    .arc-info-card,
    .arc-faq-section,
    .arc-comments-section,
    .arc-app-search,
    .arc-vtc-section,
    .arc-banga-promo,
    .arc-related-apps,
    .arc-topic-detail__header,
    .arc-topic-replies,
    .arc-topic-related,
    .arc-hero__stats,
    .arc-topic-section,
    .arc-detail-info,
    .arc-app-info-panel,
    .arc-apps-section,
    .arc-app-sidebar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header */
    .art-header__inner {
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: center;
        /* Break out of .arc-container's 12px padding so the logo
           hugs the viewport edge (mobile-app pattern). The 8px
           inner padding keeps a minimum gutter — logo isn't
           literally flush against the screen edge which would
           look broken. */
        margin: 0 -12px;
        padding: 10px 8px;
    }
    .art-logo {
        flex-shrink: 1;
        min-width: 0;
        max-width: 60%;
        overflow: hidden;
        padding-left: 0;
    }
    .art-logo__img {
        height: 28px !important;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }
    .art-nav {
        order: 99;
        flex: 1 0 100%;
    }
    .art-nav ul {
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .arc-header-actions {
        gap: 10px;
        margin-left: auto;
    }
    .arc-user-menu__name {
        display: none;
    }

    /* Quick Dashboard */
    .arc-quickdash__inner {
        gap: 0;
        padding: 6px 0;
    }
    .arc-qd-label {
        display: none;
    }
    .arc-qd-item {
        padding: 4px 6px;
    }
    .arc-qd-item--link {
        font-size: 12px;
    }

    /* Homepage */
    .arc-homepage-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .arc-homepage-header h1 {
        font-size: 20px;
    }
    .arc-quick-stats {
        gap: 6px;
    }
    .arc-stat-card {
        padding: 8px 12px;
    }

    /* App Header */
    .arc-app-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .arc-app-header__title {
        font-size: 20px;
    }
    .arc-app-header__rating {
        margin-left: auto;
    }

    /* Tabs */
    .arc-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .arc-tab {
        font-size: 12px;
        padding: 10px 6px;
        white-space: nowrap;
    }
    .arc-tab__count {
        display: none;
    }

    /* Comments */
    .arc-comment__inner {
        padding: 12px;
    }
    .arc-comment__meta {
        gap: 4px;
    }
    .arc-comment__author {
        font-size: 13px;
    }
    .arc-comment__time {
        font-size: 11px;
    }
    .arc-comment__content {
        font-size: 13px;
    }
    .arc-comment__images img {
        max-width: 120px;
        max-height: 90px;
    }
    .arc-comment__images--sm img {
        max-width: 80px;
        max-height: 60px;
    }
    .arc-btn-view {
        display: none;
    }
    .arc-replies {
        padding-left: 8px;
    }

    /* Comment box */
    .arc-comment-box {
        padding: 10px 12px;
    }
    .arc-comment-box__footer {
        padding-left: 36px;
    }

    /* App Cards */
    .arc-app-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .arc-app-card__icon {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    .arc-app-card__name {
        font-size: 13px;
    }

    /* Filters */
    .arc-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .arc-filter-tag {
        flex-shrink: 0;
    }

    /* Search */
    .arc-search {
        margin-bottom: 12px;
    }
    .arc-search input {
        font-size: 13px;
    }

    /* Modals */
    .arc-modal-overlay {
        padding: 10px;
    }
    .arc-modal {
        padding: 18px 16px;
        max-width: 100%;
        border-radius: 12px;
    }
    .arc-modal__title {
        font-size: 18px;
    }

    /* Notification dropdown */
    .arc-notif-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
    }

    /* Profile */
    .arc-profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .arc-profile-name {
        font-size: 18px;
    }
    .arc-profile-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .arc-stat {
        padding: 10px;
    }
    .arc-stat__value {
        font-size: 20px;
    }
    .arc-btn-send-msg {
        width: 100%;
    }

    /* Activity items */
    .arc-activity-item {
        padding: 10px 12px;
    }
    .arc-activity-item__header {
        gap: 4px;
    }

    /* Dashboard */
    .arc-dashboard__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .arc-dash-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .arc-dash-tab {
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    .arc-pending-app {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .arc-pending-app__actions {
        width: 100%;
        display: flex;
    }
    .arc-btn-approve, .arc-btn-reject {
        flex: 1;
        text-align: center;
    }

    /* Messages */
    .arc-msg-container {
        flex-direction: column;
        min-height: 300px;
    }
    .arc-msg-list {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--arc-border);
        max-height: 180px;
        overflow-y: auto;
    }
    .arc-msg-chat__body {
        max-height: 250px;
    }

    /* Breadcrumb (Variant L) on mobile — same accent line, just
       tighter font + padding. No background to bleed, so no
       negative margins needed. The accent stays visible inside
       the container's natural padding. */
    .arc-breadcrumb {
        font-size: 12px;
        padding: 5px 10px;
        gap: 3px 6px;
        margin-bottom: 12px;
        border-left-width: 3px;
    }

    /* Featured */
    .arc-featured__item {
        padding: 10px 12px;
    }

    /* Lightbox */
    .arc-lightbox {
        padding: 10px;
    }
    .arc-lightbox img {
        max-width: 100%;
    }

    /* Login modal */
    #arc-login-modal > div {
        margin: 10px;
        padding: 20px 16px;
    }
}

@media (max-width: 400px) {
    .arc-profile-stats {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .arc-stat__value {
        font-size: 18px;
    }
    .arc-homepage-header h1 {
        font-size: 18px;
    }
    .arc-tab {
        font-size: 11px;
        padding: 8px 4px;
    }
}

/* === Author Link === */
a.arc-comment__author {
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-text);
    text-decoration: none;
}
a.arc-comment__author:hover {
    color: var(--arc-primary);
    text-decoration: underline;
}

/* === App Screenshot Gallery === */
.arc-app-gallery {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}
.arc-app-gallery::-webkit-scrollbar {
    display: none;
}
.arc-app-gallery__item {
    flex: 0 0 auto;
    width: 180px;
    aspect-ratio: 9/16;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    scroll-snap-align: start;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--arc-border, #e5e5e5);
}
.arc-app-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.arc-app-gallery__item:hover img {
    transform: scale(1.03);
}

@media (max-width: 640px) {
    .arc-app-gallery__item {
        width: 130px;
    }
}

/* === Prevent mobile zoom (comprehensive) === */
html {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}
input, textarea, select {
    font-size: 16px !important;
}

/* === Emoji & GIF Buttons === */
.arc-emoji-btn, .arc-gif-btn, .arc-reply-upload-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px !important;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--arc-text-secondary);
    font-family: inherit;
}
.arc-gif-btn {
    font-size: 12px !important;
    font-weight: 700;
    background: var(--arc-bg-secondary);
    border-radius: 4px;
    padding: 2px 6px;
}
.arc-emoji-btn:hover, .arc-gif-btn:hover, .arc-reply-upload-btn:hover {
    background: var(--arc-bg-secondary);
}

/* === Reply Box Updated === */
.arc-reply-previews .arc-comment-box__preview {
    width: 60px;
    height: 60px;
}

/* === Emoji Picker === */
.arc-emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 12px;
    padding: 10px;
    width: 280px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.arc-emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.arc-emoji-picker__item {
    font-size: 20px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.2;
}
.arc-emoji-picker__item:hover {
    background: var(--arc-bg-secondary);
}
.arc-emoji-picker__cats {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.arc-emoji-picker__cat {
    font-size: 16px;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}
.arc-emoji-picker__cat:hover, .arc-emoji-picker__cat--active {
    background: var(--arc-bg-secondary);
}

/* === GIF Picker === */
.arc-gif-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 12px;
    padding: 10px;
    width: 320px;
    max-height: 340px;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.arc-gif-picker__search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--arc-border);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
    outline: none;
}
.arc-gif-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.arc-gif-picker__item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.arc-gif-picker__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-gif-picker__item:hover {
    opacity: 0.8;
}

@media (max-width: 640px) {
    .arc-emoji-picker, .arc-gif-picker {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
        z-index: 9999;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }
    .arc-gif-picker {
        display: flex;
        flex-direction: column;
        padding: 12px 12px 0;
        max-height: 55vh;
    }
    .arc-gif-picker__search {
        flex-shrink: 0;
        margin-bottom: 10px;
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 10px;
    }
    .arc-gif-picker__grid {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 16px;
    }
    .arc-gif-picker__item {
        aspect-ratio: auto;
        border-radius: 12px;
        overflow: hidden;
    }
    .arc-gif-picker__item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* === Inline GIF in comments ===
 * Reserve a fixed-aspect-ratio box for inline GIFs so the
 * comment's text doesn't jump when the GIF finishes loading.
 * GIFs from Tenor/Giphy come in many ratios but 4:3 is a fair
 * average — object-fit:contain keeps everything visible without
 * cropping if the actual ratio differs.
 */
.arc-gif-inline {
    margin: 8px 0;
    width: 280px;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}
.arc-gif-inline img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 640px) {
    .arc-gif-inline {
        width: 200px;
    }
}

/* === Star Rating === */
/* Block khai báo chính nằm bên dưới (cùng tên class). Block này
   trước đây trùng tên và bị override; đã được loại bỏ để code
   sạch hơn — xem block "Star Rating" tiếp theo cho rule thực tế. */

/* === Star Rating === */
/* Header meta row: stars + score + count + view + comment phải nhìn
   cân xứng. Trước đây score 20px còn count/view/comment 13px nên
   dòng nhìn mất cân — giờ score giảm xuống 15px, mọi text giữ 13px,
   stars 18px (đủ rõ nhưng không lấn). */
.arc-star-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.arc-stars {
    display: flex;
    gap: 2px;
    line-height: 1;
}
.arc-star {
    font-size: 18px;
    color: #ddd;
    cursor: pointer;
    transition: color .15s, transform .15s;
    line-height: 1;
    user-select: none;
}
.arc-star--active {
    color: #F5A623;
}
.arc-star--hover {
    color: #F5A623;
    transform: scale(1.15);
}
.arc-star--voted {
    color: #F5A623;
}
.arc-star-score {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.arc-star-count {
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.2;
}
/* Legacy "Bạn: X★" badge — giờ không render nữa nhưng giữ rule
   phòng trường hợp markup cũ còn cache lại ở đâu đó. */
.arc-star-your {
    display: none;
}

@media (max-width: 640px) {
    .arc-star {
        font-size: 16px;
    }
    .arc-star-score {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   VAY THÀNH CÔNG SECTION — homepage hero podium card
   Single rounded panel: header (icon + title + count + CTA), 3-cell
   podium (gold/silver/bronze), footer (personal stats + see-all).
   ═══════════════════════════════════════════════════════════════════ */
.arc-vtc-section {
    margin-bottom: 28px;
}
.arc-vtc-card {
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    overflow: hidden;
}

/* Header row */
.arc-vtc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--arc-border);
}
.arc-vtc-card__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.arc-vtc-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EAF3DE;
    color: #3B6D11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-vtc-card__icon svg { display: block; }
.arc-vtc-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--arc-text);
    line-height: 1.2;
}
.arc-vtc-card__sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--arc-text-tertiary);
}
.arc-vtc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #534AB7;
    color: #534AB7;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.arc-vtc-card__cta:hover {
    background: #534AB7;
    color: #fff;
    opacity: 1;
}
.arc-vtc-card__cta svg { display: block; }

/* Podium — 3 equal cells */
.arc-vtc-card__podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
}
.arc-vtc-podium__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s;
}
a.arc-vtc-podium__cell:hover {
    transform: translateY(-1px);
}
.arc-vtc-podium__cell--empty {
    opacity: 0.55;
    cursor: default;
}
.arc-vtc-podium__cell--empty:hover {
    transform: none;
}

/* Tiered colors — gold tier brightest, bronze tier muted, all
   restricted to legible text-on-fill stops from the project ramp. */
.arc-vtc-podium__cell--gold {
    background: #FAEEDA;
}
.arc-vtc-podium__cell--gold .arc-vtc-podium__rank,
.arc-vtc-podium__cell--gold .arc-vtc-podium__name {
    color: #633806;
}
.arc-vtc-podium__cell--gold .arc-vtc-podium__count {
    color: #854F0B;
}
.arc-vtc-podium__cell--gold .arc-vtc-podium__avatar {
    border-color: #BA7517;
}

.arc-vtc-podium__cell--silver {
    background: #F1EFE8;
}
.arc-vtc-podium__cell--silver .arc-vtc-podium__rank,
.arc-vtc-podium__cell--silver .arc-vtc-podium__name {
    color: #2C2C2A;
}
.arc-vtc-podium__cell--silver .arc-vtc-podium__count {
    color: #5F5E5A;
}
.arc-vtc-podium__cell--silver .arc-vtc-podium__avatar {
    border-color: #888780;
}

.arc-vtc-podium__cell--bronze {
    background: #FAECE7;
}
.arc-vtc-podium__cell--bronze .arc-vtc-podium__rank,
.arc-vtc-podium__cell--bronze .arc-vtc-podium__name {
    color: #4A1B0C;
}
.arc-vtc-podium__cell--bronze .arc-vtc-podium__count {
    color: #993C1D;
}
.arc-vtc-podium__cell--bronze .arc-vtc-podium__avatar {
    border-color: #D85A30;
}

.arc-vtc-podium__rank {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.arc-vtc-podium__rank svg { display: block; }
.arc-vtc-podium__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.arc-vtc-podium__avatar img,
.arc-vtc-podium__avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.arc-vtc-podium__avatar--empty {
    color: #B4B2A9;
    font-size: 18px;
    font-weight: 500;
    border-color: #D3D1C7;
    border-style: dashed;
}
.arc-vtc-podium__name {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arc-vtc-podium__count {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 500;
}

/* Footer — personal stats + see-all link, both small + muted */
.arc-vtc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--arc-border);
    flex-wrap: wrap;
}
.arc-vtc-card__personal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.4;
}
.arc-vtc-card__personal svg {
    color: #BA7517;
    flex-shrink: 0;
}
.arc-vtc-card__personal strong {
    color: var(--arc-text);
    font-weight: 600;
}
.arc-vtc-card__personal a {
    color: #534AB7;
    text-decoration: none;
    font-weight: 500;
}
.arc-vtc-card__personal a:hover { text-decoration: underline; }
.arc-vtc-card__total {
    font-size: 13px;
    color: var(--arc-text-secondary);
}
.arc-vtc-card__total strong {
    color: var(--arc-text);
    font-weight: 600;
}

/* Mobile — podium cells stay in one row but compress; header stacks
   if the CTA wraps tight. */
@media (max-width: 640px) {
    .arc-vtc-card__header {
        padding: 14px 16px;
    }
    .arc-vtc-card__title {
        font-size: 15px;
    }
    .arc-vtc-card__sub {
        font-size: 11px;
    }
    .arc-vtc-card__cta {
        padding: 7px 12px;
        font-size: 12px;
    }
    .arc-vtc-card__podium {
        padding: 12px;
        gap: 8px;
    }
    .arc-vtc-podium__cell {
        padding: 12px 6px 10px;
    }
    .arc-vtc-podium__avatar {
        width: 40px;
        height: 40px;
    }
    .arc-vtc-podium__name {
        font-size: 12px;
    }
    .arc-vtc-podium__count {
        font-size: 11px;
    }
    .arc-vtc-podium__rank {
        top: 6px;
        right: 8px;
    }
    .arc-vtc-card__footer {
        padding: 10px 16px 12px;
        font-size: 12px;
    }
    .arc-vtc-card__personal,
    .arc-vtc-card__total {
        font-size: 12px;
    }
}
.arc-comment--pending {
    opacity: 0.55;
    border: 1px dashed #BA7517;
    background: #FFFBF0;
}
.arc-comment--pending .arc-comment__content {
    color: #666;
}
.arc-comment__pending-notice {
    font-size: 13px;
    color: #BA7517;
    background: #FAEEDA;
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 8px;
    font-weight: 500;
}
.arc-pending-comment-admin {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* === VTC Posts on User Profile === */
.arc-vtc-post {
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 3px solid #639922;
}
.arc-vtc-post__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}
.arc-vtc-post__app {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--arc-text);
    font-weight: 600;
    font-size: 14px;
}
.arc-vtc-post__app:hover {
    color: var(--arc-primary);
}
.arc-vtc-post__time {
    font-size: 12px;
    color: var(--arc-text-tertiary);
}
.arc-vtc-post__content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--arc-text);
}
.arc-vtc-post__content p {
    margin: 0 0 4px;
}
.arc-vtc-post__images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.arc-vtc-post__images img {
    max-width: 180px;
    max-height: 240px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}
.arc-vtc-post__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;
    color: var(--arc-text-tertiary);
}
.arc-vtc-post__footer a {
    color: var(--arc-info);
    text-decoration: none;
    font-weight: 500;
}
.arc-vtc-post__footer a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .arc-vtc-post__images img {
        max-width: 120px;
        max-height: 160px;
    }
    .arc-profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === Comment 3-dot Menu (Facebook style) === */
.arc-comment-menu {
    position: relative;
    margin-left: auto;
}
.arc-comment-menu__btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--arc-text-tertiary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
    letter-spacing: 1px;
}
.arc-comment-menu__btn:hover {
    background: var(--arc-bg-secondary);
    color: var(--arc-text);
}
.arc-comment-menu__dropdown {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 99999;
    min-width: 180px;
    max-height: 70vh;
    overflow-y: auto;
}
.arc-comment-menu__dropdown.visible {
    display: block;
}
.arc-menu-action {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--arc-text);
    cursor: pointer;
    font-family: inherit;
}
.arc-menu-action:hover {
    background: var(--arc-bg-secondary);
}
.arc-menu-action[data-action="delete"],
.arc-menu-action[data-action="hide"] {
    color: #E24B4A;
}
.arc-menu-action[data-action="report"] {
    color: #BA7517;
}

/* === Edit Comment Inline === */
.arc-edit-box {
    margin-top: 8px;
}
.arc-edit-box textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--arc-border);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
    min-height: 60px;
}
.arc-edit-box__actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}
.arc-edit-box__actions button {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

/* === Report Modal === */
.arc-report-modal textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .arc-comment-menu__dropdown {
        min-width: 160px;
    }
}

/* === Avatar Upload Overlay === */
.arc-profile-avatar {
    position: relative;
}
.arc-avatar-upload-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity .2s;
}
.arc-profile-avatar:hover .arc-avatar-upload-overlay {
    opacity: 1;
}

/* Always-visible variant — used on the profile edit form where
   the camera button needs to be discoverable without requiring
   the user to hover. Hover-reveal works for compact widgets but
   not for a primary "upload your photo" affordance. */
.arc-avatar-upload-overlay--always {
    opacity: 1;
}
.arc-avatar-upload-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #534AB7;
    border: 2px solid #fff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(83, 74, 183, 0.3);
}
.arc-avatar-upload-btn:hover {
    background: #3C3489;
    transform: scale(1.05);
}
.arc-avatar-uploading {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 640px) {
    .arc-avatar-upload-overlay {
        opacity: 1;
    }
}

/* === Community Photo Gallery === */
.arc-community-gallery {
    margin-bottom: 24px;
}
.arc-community-gallery__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--arc-text);
}
.arc-community-gallery__count {
    font-size: 14px;
    font-weight: 400;
    color: var(--arc-text-tertiary);
}
.arc-community-gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.arc-community-gallery__item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.arc-community-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.arc-community-gallery__item:hover img {
    transform: scale(1.05);
}
.arc-community-gallery__more {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--arc-bg-secondary);
    border: 1px dashed var(--arc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--arc-primary);
    cursor: pointer;
}
.arc-community-gallery__more:hover {
    background: #EEEDFE;
}
.arc-community-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border-radius: inherit;
    pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════
   COMMUNITY GALLERY — collapsible button in the topic toolbar
   ═════════════════════════════════════════════════════════════════

   Layout: sort dropdown (left) + trigger button (right) on toolbar.
   Trigger click toggles the panel below the toolbar.
*/
.arc-topic-toolbar--sort {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.arc-topic-toolbar--sort .arc-topic-sort {
    flex-shrink: 0;
}

/* Trigger button — pill with icon + count, sits on right of toolbar */
.arc-community-gallery__trigger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    font-family: inherit;
    line-height: 1.4;
}
.arc-community-gallery__trigger:hover {
    background: #F8F7FE;
    border-color: #BCB6F5;
    color: #534AB7;
}
.arc-community-gallery__trigger.is-expanded {
    background: #F4F3FE;
    border-color: #534AB7;
    color: #534AB7;
}
.arc-community-gallery__trigger svg {
    flex-shrink: 0;
    color: #534AB7;
}
.arc-community-gallery__trigger-label {
    white-space: nowrap;
}
.arc-community-gallery__trigger-count {
    background: #EEEDFE;
    color: #534AB7;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.5;
}
.arc-community-gallery__trigger.is-expanded .arc-community-gallery__trigger-count {
    background: #534AB7;
    color: #fff;
}
.arc-community-gallery__trigger-caret {
    margin-left: 2px;
    transition: transform .15s;
    font-size: 11px;
    opacity: 0.6;
}
.arc-community-gallery__trigger.is-expanded .arc-community-gallery__trigger-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* Panel — hidden by default, expands below toolbar when triggered */
.arc-community-gallery--collapsible {
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 14px;
    margin: 8px 0 16px;
}
.arc-community-gallery--collapsible[hidden] {
    display: none;
}
.arc-community-gallery--collapsible .arc-community-gallery__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.arc-community-gallery--collapsible .arc-community-gallery__item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    background: #F5F5F5;
    text-decoration: none;
}
.arc-community-gallery--collapsible .arc-community-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .15s;
}
.arc-community-gallery--collapsible .arc-community-gallery__item:hover img {
    transform: scale(1.06);
}

/* Source badge ("Topic" / "Trả lời") — top-right corner of thumbnail.
   High-contrast: dark fill + backdrop blur so readable on any image
   (white app screenshots, dark UI screenshots, colorful posters). */
.arc-community-gallery__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.arc-community-gallery__badge--topic {
    background: rgba(83, 74, 183, 0.85);
}
.arc-community-gallery__badge--reply {
    background: rgba(186, 117, 23, 0.85);
}

/* "Xem thêm ảnh (N)" — outlined pill centered below grid */
.arc-community-gallery__loadmore-wrap {
    text-align: center;
    margin-top: 12px;
}
.arc-community-gallery__loadmore {
    background: transparent;
    border: 1px solid #BCB6F5;
    color: #534AB7;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arc-community-gallery__loadmore:hover {
    background: #F4F3FE;
}
.arc-community-gallery__loadmore:disabled {
    opacity: 0.6;
    cursor: wait;
}
.arc-community-gallery__loadmore-num {
    color: #888;
    font-weight: 400;
}

@media (max-width: 640px) {
    .arc-community-gallery--collapsible .arc-community-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .arc-community-gallery__trigger-label {
        display: none; /* keep only icon + count on small screens */
    }
}


/* Gallery load more button */
.arc-gallery-loadmore-wrap {
    text-align: center;
    margin-top: 10px;
}
.arc-gallery-loadmore {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #534AB7;
    background: none;
    border: 1px solid #534AB7;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.arc-gallery-loadmore:hover {
    background: #EEEDFE;
}

/* Gallery Lightbox */
.arc-gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.arc-gallery-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 2;
}
.arc-gallery-lightbox__img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}
.arc-gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-gallery-lightbox__nav:hover {
    background: rgba(255,255,255,0.3);
}
.arc-gallery-lightbox__nav--prev { left: 16px; }
.arc-gallery-lightbox__nav--next { right: 16px; }
.arc-gallery-lightbox__info {
    color: #fff;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
}
.arc-gallery-lightbox__info a {
    color: #A9A3F0;
    text-decoration: none;
    font-weight: 500;
}
.arc-gallery-lightbox__info a:hover {
    text-decoration: underline;
}
.arc-gallery-lightbox__counter {
    position: absolute;
    top: 20px;
    left: 20px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

@media (max-width: 640px) {
    .arc-community-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .arc-gallery-lightbox__nav {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}
#arc-gallery-panel .arc-community-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
}

/* === Gallery Filter Tabs === */
.arc-community-gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.arc-community-gallery__filters {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.arc-gallery-filter {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: #f5f4f0;
    color: #888;
    border: 0.5px solid #e5e5e5;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.arc-gallery-filter:hover {
    background: #EEEDFE;
    color: #534AB7;
}
.arc-gallery-filter--active {
    background: #534AB7;
    color: #fff;
    border-color: #534AB7;
}
.arc-gallery-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    z-index: 1;
}
.arc-gallery-badge--vtc {
    background: #0F6E56;
    color: #fff;
}
.arc-gallery-badge--scam {
    background: #A32D2D;
    color: #fff;
}

/* === App Card Photo Count === */
.arc-app-card__photos {
    font-size: 12px;
    color: var(--arc-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* === Like App === */
.arc-app-like {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--arc-border);
    border-bottom: 1px solid var(--arc-border);
    flex-wrap: wrap;
}
.arc-app-like__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--arc-border);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    color: var(--arc-text);
}
.arc-app-like__btn:hover {
    border-color: #E24B4A;
    background: #FFF5F5;
}
.arc-app-like__btn--active {
    border-color: #E24B4A;
    background: #FFF5F5;
    color: #E24B4A;
}
.arc-app-like__icon {
    font-size: 16px;
    line-height: 1;
}
.arc-app-like__count {
    background: #f5f4f0;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--arc-text-secondary);
}
.arc-app-like__btn--active .arc-app-like__count {
    background: #FCE4E4;
    color: #A32D2D;
}
.arc-app-like__members {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.arc-app-like__member {
    display: block;
    text-decoration: none;
    margin-left: -6px;
}
.arc-app-like__member:first-child {
    margin-left: 0;
}
.arc-app-like__member .arc-avatar {
    border: 2px solid #fff;
}
.arc-app-like__more {
    font-size: 12px;
    color: var(--arc-text-tertiary);
    margin-left: 4px;
}

/* === Action Bar (Like + Gallery + Rating) === */
.arc-action-bar {
    margin-bottom: 16px;
}
.arc-action-bar__buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.arc-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--arc-border);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    color: var(--arc-text);
    white-space: nowrap;
    justify-content: center;
}
.arc-action-pill:hover {
    border-color: var(--arc-primary);
    background: #EEEDFE;
}
.arc-action-pill--liked {
    border-color: #E24B4A;
    background: #FFF5F5;
    color: #E24B4A;
}
.arc-action-pill--liked:hover {
    background: #FCE4E4;
    border-color: #E24B4A;
}
.arc-action-pill__badge {
    background: #f5f4f0;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--arc-text-secondary);
}
.arc-action-pill--liked .arc-action-pill__badge {
    background: #FCE4E4;
    color: #A32D2D;
}
.arc-action-panel {
    margin-top: 10px;
    padding: 14px;
    background: var(--arc-bg-secondary, #f9f8f6);
    border-radius: var(--arc-radius);
    border: 1px solid var(--arc-border);
}
/* Like list */
.arc-like-list__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--arc-text-secondary);
    margin: 0 0 10px;
}
.arc-like-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    text-decoration: none;
    color: var(--arc-text);
    font-size: 13px;
    font-weight: 500;
}
.arc-like-list__item:hover {
    color: var(--arc-primary);
}

/* === Download Panel === */
.arc-action-pill--download {
    background: #0F6E56;
    color: #fff;
    border-color: #0F6E56;
}
.arc-action-pill--download:hover {
    background: #085041;
    border-color: #085041;
}
.arc-download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.arc-download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0.5px solid var(--arc-border);
    text-decoration: none;
    color: var(--arc-text);
    transition: background .15s;
    background: var(--arc-bg);
}
.arc-download-btn:hover {
    background: #E1F5EE;
}
.arc-download-btn--empty {
    border-style: dashed;
    opacity: 0.5;
    pointer-events: none;
}
.arc-download-btn__name {
    font-size: 13px;
    font-weight: 600;
}
.arc-download-btn__sub {
    font-size: 11px;
    color: var(--arc-text-tertiary);
}
.arc-pending-dl-card {
    padding: 10px 12px;
    background: #FFFBF0;
    border: 1px dashed #BA7517;
    border-radius: 8px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .arc-download-grid {
        grid-template-columns: 1fr;
    }
}

/* === App Description Collapse (no CLS) === */
.arc-app-desc {
    margin-bottom: 16px;
    position: relative;
}
.arc-app-desc__text {
    font-size: 14px;
    line-height: 1.75;
    color: #555;
    max-height: 4.2em;
    overflow: hidden;
    transition: max-height .3s ease;
    position: relative;
}
.arc-app-desc__text p {
    margin: 0 0 6px;
}
.arc-app-desc--expanded .arc-app-desc__text {
    max-height: 2000px;
}
.arc-app-desc__fade {
    display: none;
}
.arc-app-desc__toggle {
    display: inline;
    margin: 0;
    background: none;
    border: none;
    color: #534AB7;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.arc-app-desc__toggle:hover {
    text-decoration: underline;
}

/* === Action Bar Mobile - 3 buttons always 1 row === */
@media (max-width: 640px) {
    .arc-action-pill {
        flex: 1;
    }
}
@media (max-width: 480px) {
    .arc-action-pill {
        font-size: 12px;
        padding: 6px 10px;
        gap: 3px;
    }
    .arc-action-pill svg {
        width: 12px;
        height: 12px;
    }
    .arc-action-pill__badge {
        font-size: 10px;
        padding: 0 5px;
    }
}

/* === Image Upload Progress === */
.arc-preview--uploading img {
    opacity: 0.4;
    filter: blur(1px);
}
.arc-preview__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e5e5;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.arc-preview__bar {
    height: 100%;
    width: 0;
    background: #534AB7;
    border-radius: 0 0 6px 6px;
    transition: width .15s linear;
}
.arc-comment-box__preview {
    position: relative;
}

/* === Sort Comments === */
.arc-sort-wrap {
    position: relative;
    margin-bottom: 12px;
    z-index: 10;
}
.arc-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-text);
    cursor: pointer;
    padding: 6px 0;
    font-family: inherit;
}
.arc-sort-btn:hover {
    color: var(--arc-primary);
}
.arc-sort-btn__arrow {
    font-size: 12px;
    color: var(--arc-text-secondary);
    transition: transform .2s;
}
.arc-sort-wrap--open .arc-sort-btn__arrow {
    transform: rotate(180deg);
}
.arc-sort-dropdown {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.arc-sort-wrap--open .arc-sort-dropdown {
    display: block;
}
.arc-sort-option {
    padding: 10px 16px;
    cursor: pointer;
    transition: background .1s;
}
.arc-sort-option:hover {
    background: var(--arc-bg-secondary);
}
.arc-sort-option--active {
    background: var(--arc-bg-secondary);
}
.arc-sort-option strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-text);
    margin-bottom: 2px;
}
.arc-sort-option span {
    font-size: 12px;
    color: var(--arc-text-secondary);
}

/* === Picker overlay on mobile === */
.arc-picker-overlay {
    display: none;
}
@media (max-width: 640px) {
    .arc-picker-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 9998;
    }
}

/* === Download Empty Notice === */
.arc-download-empty {
    text-align: center;
    padding: 24px 16px;
}
.arc-download-empty__icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.arc-download-empty__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--arc-text);
    margin-bottom: 4px;
}
.arc-download-empty__sub {
    font-size: 13px;
    color: var(--arc-text-secondary);
}

/* === Menu Divider & Move Tab === */
.arc-menu-divider {
    height: 1px;
    background: var(--arc-border);
    margin: 4px 0;
}
.arc-menu-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--arc-text-tertiary);
    padding: 6px 16px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.arc-menu-action--move {
    font-size: 13px;
    padding: 8px 16px;
}

/* === Move App Popup === */
.arc-move-app-popup {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.arc-move-app-item:hover {
    background: var(--arc-bg-secondary);
}

/* === Moderation Page === */
.arc-mod-section {
    margin-bottom: 28px;
}
.arc-mod-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--arc-border);
}
.arc-mod-card {
    background: #fff;
    border: 1px solid var(--arc-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    transition: opacity .3s;
}
.arc-mod-card--done {
    background: #FAFAF8;
}
.arc-mod-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--arc-border);
    background: #fff;
    color: var(--arc-text);
    font-family: inherit;
    white-space: nowrap;
}
.arc-mod-btn--approve {
    background: #0F6E56;
    color: #fff;
    border-color: #0F6E56;
}
.arc-mod-btn--reject {
    border-color: #E24B4A;
    color: #E24B4A;
}
@media (max-width: 640px) {
    .arc-mod-card {
        padding: 10px 12px;
    }
    .arc-mod-card > div {
        flex-wrap: wrap;
    }
    .arc-mod-btn {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* === Feature Cards Carousel === */
.arc-features-carousel {
    position: relative;
    overflow: hidden;
}
.arc-features-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}
.arc-features-track::-webkit-scrollbar {
    display: none;
}
.arc-feature-card {
    flex: 0 0 190px;
    scroll-snap-align: start;
    background: var(--arc-bg);
    border: 1.5px solid #0F6E56;
    border-radius: 14px;
    padding: 22px 16px 18px;
    text-align: center;
}
.arc-feature-card__icon {
    font-size: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E1F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.arc-feature-card__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--arc-text);
    line-height: 1.3;
}
.arc-feature-card__desc {
    font-size: 12px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .arc-feature-card {
        flex: 0 0 160px;
        padding: 18px 12px 14px;
    }
    .arc-feature-card__icon {
        font-size: 20px;
        width: 42px;
        height: 42px;
    }
    .arc-feature-card__title {
        font-size: 13px;
    }
}

/* === 2-Column App Layout === */
/* Loan info section (inside intro card) */
.arc-loan-section {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--arc-border, #e5e5e5);
}
.arc-loan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.arc-loan-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.arc-loan-label {
    font-size: 11px;
    color: #888;
    font-weight: 400;
}
.arc-loan-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-text, #1a1a1a);
}
.arc-loan-reqs {
    border-top: 1px solid var(--arc-border, #e5e5e5);
    margin-top: 12px;
    padding-top: 12px;
}
.arc-loan-req-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.arc-loan-req-list li {
    font-size: 12px;
    color: #444;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

/* Intro card — line clamp on mobile */
.arc-intro-card {
    position: relative;
    padding: 16px;
}
/* Intro text — reads like a real WordPress post:
   paragraphs have clear spacing, headings stand out, lists/quotes/
   images styled consistently. Applied to both the view (.arc-intro-text)
   and any TinyMCE output. */
.arc-intro-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--arc-text);
}
.arc-intro-text > *:first-child { margin-top: 0; }
.arc-intro-text > *:last-child  { margin-bottom: 0; }
.arc-intro-text--empty {
    color: #999;
    font-style: italic;
}

.arc-intro-text p {
    margin: 0 0 1em; /* clear gap between paragraphs */
}
.arc-intro-text h1,
.arc-intro-text h2,
.arc-intro-text h3,
.arc-intro-text h4,
.arc-intro-text h5,
.arc-intro-text h6 {
    margin: 1.4em 0 0.6em;
    line-height: 1.3;
    font-weight: 700;
    color: var(--arc-text);
}
.arc-intro-text h1 { font-size: 1.6em; }
.arc-intro-text h2 { font-size: 1.4em; }
.arc-intro-text h3 { font-size: 1.2em; }
.arc-intro-text h4 { font-size: 1.08em; }
.arc-intro-text h5 { font-size: 1em; }
.arc-intro-text h6 { font-size: 0.95em; color: #666; }

.arc-intro-text ul,
.arc-intro-text ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}
.arc-intro-text li {
    margin-bottom: 0.3em;
}
.arc-intro-text li > ul,
.arc-intro-text li > ol {
    margin: 0.3em 0;
}

.arc-intro-text blockquote {
    margin: 1em 0;
    padding: 8px 14px;
    border-left: 3px solid #534AB7;
    background: #f7f6fb;
    color: #555;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}
.arc-intro-text blockquote p:last-child { margin-bottom: 0; }

.arc-intro-text a {
    color: #185FA5;
    text-decoration: underline;
}
.arc-intro-text a:hover { color: #0C447C; }

.arc-intro-text img,
.arc-intro-text figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.6em 0;
}
.arc-intro-text figure {
    margin: 1em 0;
}
.arc-intro-text figcaption {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 4px;
}

.arc-intro-text hr {
    border: none;
    border-top: 1px solid var(--arc-border, #e5e5e5);
    margin: 1.4em 0;
}

.arc-intro-text code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.92em;
}
.arc-intro-text pre {
    background: #f4f4f4;
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    font-size: 13px;
    line-height: 1.5;
}
.arc-intro-text pre code {
    background: none;
    padding: 0;
}

.arc-intro-text strong { font-weight: 700; }
.arc-intro-text em { font-style: italic; }

.arc-intro-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 14px;
}
.arc-intro-text table th,
.arc-intro-text table td {
    border: 1px solid var(--arc-border, #e5e5e5);
    padding: 6px 10px;
    text-align: left;
}
.arc-intro-text table th {
    background: var(--arc-bg-secondary, #f9f9f7);
    font-weight: 600;
}
.arc-intro-toggle {
    display: none; /* hidden on desktop */
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE-APP 2-COLUMN LAYOUT — IMPORTANT NOTES FOR MAINTAINERS / AI
   ═══════════════════════════════════════════════════════════════════
   The .arc-app-sidebar class is a LEGACY name. It is NOT a traditional
   sidebar that appears after content. Its actual visual behavior:

     • DESKTOP (>900px): RIGHT column — via `order: 2`
     • MOBILE  (≤900px): TOP of page — via `order: -1` (below)

   The .arc-app-main (comments + tabs) uses `order: 1` on desktop so
   it renders LEFT even though it comes AFTER the info panel in HTML.

   HTML order is intentional: info panel FIRST for mobile-first visual
   order AND for SEO (app intro indexed before comment thread).

   Prefer the new alias class .arc-app-info-panel for new code.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   SINGLE-APP LAYOUT — UNIFIED 1-COLUMN for both desktop and mobile
   ═══════════════════════════════════════════════════════════════════
   Simple stacked layout: info panel (intro + like/download + gallery)
   on TOP, then comments/tabs BELOW. Same on phone and desktop.
   No sidebar, no sticky, no 2-column complexity.

   The .arc-app-sidebar class is LEGACY but kept as alias for the
   info panel block. It just stacks normally above main content.
   ═══════════════════════════════════════════════════════════════════ */
.arc-app-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.arc-app-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
    overflow: hidden;
    order: 2; /* BELOW info panel on mobile */
}
/* .arc-app-sidebar / .arc-app-info-panel
   Mobile: stacks ABOVE main (order: 1)
   Desktop: 2-column, sidebar on right */
.arc-app-sidebar,
.arc-app-info-panel {
    width: 100%;
    box-sizing: border-box;
    order: 1; /* TOP on mobile */
    position: relative;
    margin-bottom: 16px;
}
/* Inner wrapper — block by default; sticky kicks in on desktop. */
.arc-app-sidebar__sticky {
    position: static;
    max-height: none;
    overflow: visible;
}

/* Desktop layout: switch flex container to row, give main and
   sidebar explicit widths, and make the right rail sticky.
   Without this rule the layout collapsed to a single column at
   every viewport, which produced the "full-width on PC" bug. */
@media (min-width: 901px) {
    .arc-app-layout {
        flex-direction: row;
        gap: 20px;
        /* No align-items override here — defaults to `stretch`.
           That's the critical bit: the sidebar flex item then
           grows tall enough to match the main column. The sticky
           publisher wrap inside has the full main-column height
           as its travel scope. With align-items: flex-start the
           sidebar would collapse to its own content (~500px)
           and sticky would only be able to move ~16px before
           hitting the bottom — making it look broken. */
    }
    .arc-app-main {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .arc-app-sidebar,
    .arc-app-info-panel {
        order: 2;
        flex: 0 0 320px;
        max-width: 320px;
        margin-bottom: 0;
        position: relative;
        /* Explicit stretch — defensive in case some parent rule
           overrides the layout's default. */
        align-self: stretch;
    }
    .arc-pub-card-wrap {
        position: sticky;
        top: 80px;
        margin-bottom: 16px;
        z-index: 10;
    }
    .arc-app-sidebar__sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.arc-sidebar-card {
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.arc-sidebar-card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--arc-border);
    color: var(--arc-text);
}
/* Hide/show helpers */
.arc-hide-mobile { display: block; }
.arc-hide-desktop { display: none; }
/* Desktop now uses the same unified UI as mobile — show mobile-only elements. */
@media (min-width: 901px) {
    /* Intentionally empty — layout is unified with mobile */
}
@media (max-width: 900px) {
    /* Mobile-specific: intro text truncation. CSS-only clamp that
       preserves inline formatting (bold, italic, links) in both the
       collapsed and expanded states. A gradient fade masks the cut
       edge so the text feels naturally faded before the toggle. */
    .arc-intro-text--clamped {
        position: relative;
        /* max-height set inline by JS to match line-height × lines */
        -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    }
    .arc-intro-toggle {
        display: inline-block;
        margin-top: 4px;
        font-size: 13px;
        color: #185FA5;
        cursor: pointer;
        font-weight: 600;
        border: none;
        background: none;
        padding: 0;
    }
    .arc-intro-toggle:hover {
        text-decoration: underline;
    }
    .arc-hide-mobile { display: none !important; }
    .arc-hide-desktop { display: block; }
    .arc-tab.arc-show-mobile-only { display: flex !important; }
    .arc-container,
    .arc-app-main,
    .arc-app-layout {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* === Contact / Company Info — compact list === */
.arc-contact-section {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--arc-bg-secondary, #f9f9f7);
    border: 1px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
}
.arc-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.arc-contact-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--arc-text, #1a1a1a);
    letter-spacing: .1px;
}
.arc-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 6px;
}
.arc-contact-row {
    display: grid;
    grid-template-columns: 18px 84px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    padding: 3px 0;
    min-width: 0;
}
.arc-contact-row--wide {
    grid-column: 1 / -1;
}
.arc-contact-ico {
    width: 16px;
    height: 16px;
    color: #0F6E56;
    flex-shrink: 0;
}
.arc-contact-label {
    font-size: 12.5px;
    color: #7a7a7a;
    font-weight: 500;
}
.arc-contact-val {
    color: var(--arc-text, #1a1a1a);
    font-weight: 500;
    word-break: break-word;
    min-width: 0;
}

/* Editor (admin only) */
.arc-contact-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.arc-contact-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.arc-contact-edit-field--wide {
    grid-column: 1 / -1;
}
.arc-contact-edit-field label {
    font-size: 12px;
    font-weight: 500;
    color: #555;
}
.arc-contact-edit-field input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 13px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.arc-contact-edit-field input:focus {
    outline: none;
    border-color: #0F6E56;
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
@media (max-width: 640px) {
    .arc-contact-list,
    .arc-contact-edit-grid {
        grid-template-columns: 1fr;
    }
    .arc-contact-row--wide,
    .arc-contact-edit-field--wide {
        grid-column: 1;
    }
    .arc-contact-row {
        grid-template-columns: 18px 78px 1fr;
    }
}

/* === FAQ Section === */
.arc-faq-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--arc-border, #e5e5e5);
}
.arc-faq-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--arc-text, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 8px;
}
.arc-faq-title::before {
    content: '❓';
    font-size: 18px;
}
.arc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.arc-faq-item {
    background: var(--arc-bg, #fff);
    border: 1px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.arc-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.arc-faq-item:last-child {
    border-bottom: 1px solid var(--arc-border, #e5e5e5);
}
.arc-faq-question {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--arc-text, #1a1a1a);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background .15s;
}
.arc-faq-question:hover {
    background: var(--arc-bg-secondary, #f9f9f7);
}
.arc-faq-question::-webkit-details-marker {
    display: none;
}
.arc-faq-question::before {
    display: none;
}
.arc-faq-question::after {
    content: '›';
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0F6E56;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s;
    transform: rotate(90deg);
}
.arc-faq-item[open] .arc-faq-question::after {
    transform: rotate(-90deg);
}
.arc-faq-item[open] .arc-faq-question {
    background: var(--arc-bg-secondary, #f9f9f7);
}
.arc-faq-answer {
    padding: 0 20px 18px 20px;
    font-size: 14px;
    color: var(--arc-text-secondary, #555);
    line-height: 1.8;
}
.arc-faq-answer p {
    margin: 0 0 8px;
}
.arc-faq-answer p:last-child {
    margin-bottom: 0;
}
@media (max-width: 640px) {
    .arc-faq-question {
        padding: 14px 16px;
        font-size: 14px;
    }
    .arc-faq-question::after {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    .arc-faq-answer {
        padding: 0 16px 14px 16px;
        font-size: 13px;
    }
}

/* === Inline Edit (Admin only) === */
.arc-inline-edit-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
/* TinyMCE editor wrapper — give it room and prevent theme CSS from
   collapsing the toolbar */
.arc-inline-edit-editor {
    margin-top: 8px;
}
.arc-inline-edit-editor .wp-editor-wrap,
.arc-inline-edit-editor .wp-editor-container {
    box-sizing: border-box;
}
.arc-inline-edit-editor .mce-toolbar-grp,
.arc-inline-edit-editor .mce-statusbar,
.arc-inline-edit-editor .mce-menubar {
    box-sizing: border-box;
}
.arc-inline-edit-editor .quicktags-toolbar input {
    font-family: inherit;
}
.arc-inline-edit-editor textarea.wp-editor-area {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.6;
}
.arc-inline-edit-btn {
    font-size: 12px;
    color: #534AB7;
    background: none;
    border: 1px solid #534AB7;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all .15s;
}
.arc-inline-edit-btn:hover {
    background: #EEEDFE;
}
.arc-inline-save {
    font-size: 13px;
    color: #fff;
    background: #534AB7;
    border: none;
    border-radius: 8px;
    padding: 6px 18px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}
.arc-inline-save:hover {
    background: #3C3489;
}
.arc-inline-cancel {
    font-size: 13px;
    color: #666;
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 18px;
    cursor: pointer;
    font-family: inherit;
}
.arc-inline-cancel:hover {
    background: #f5f5f5;
}

/* === FAQ Inline Edit === */
.arc-faq-edit-row {
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fafafa;
}
.arc-faq-edit-row:last-child {
    margin-bottom: 0;
}

/* === Gallery Delete Button (Admin) === */
.arc-gallery-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    display: none;
}
.arc-app-gallery__item:hover .arc-gallery-delete-btn {
    display: block;
}
.arc-gallery-delete-btn:hover {
    background: #A32D2D;
}

/* === Unified Gallery Card — inline, collapsible ===
   Hidden by default. Opens as an inline card (right below the action
   bar) when user clicks the "📸 Ảnh cộng đồng" toggle button. Shows
   a 3×3 grid of 9 thumbnails with a "Xem thêm" load-more button.
   Clicking any thumbnail opens the lightbox (arc-gallery-lightbox)
   which shows the full image with next/prev navigation. */
/* Gallery toggle button — nhỏ gọn inline cạnh dropdown "Mới
   nhất". Click để expand/collapse body. Style giống các pill/
   button nhỏ trong UI: padding nhẹ, border mảnh, hover xanh. */
.arc-gallery-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.arc-gallery-inline-toggle:hover {
    border-color: #534AB7;
    color: #534AB7;
    background: #faf9ff;
}
.arc-gallery-inline-toggle--open {
    border-color: #534AB7;
    color: #534AB7;
    background: #f5f4ff;
}
.arc-gallery-inline-toggle__arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
    color: #888;
}
.arc-gallery-inline-toggle--open .arc-gallery-inline-toggle__arrow {
    transform: rotate(180deg);
    color: #534AB7;
}

/* Gallery body khi expand. Card style như cũ, nhưng default ẩn
   qua `[hidden]` attribute (browser tự xử lý). */
.arc-gallery-inline {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: arc-gallery-fade 0.2s ease-out;
}
@keyframes arc-gallery-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Legacy ID selectors — giữ cho compat với JS dùng #arc-gallery-card */
#arc-gallery-card[hidden] {
    display: none !important;
}
#arc-gallery-card .arc-gallery-filters-unified {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
#arc-gallery-card .arc-sidebar-card__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Unified gallery grid — responsive thumbnail sizes */
.arc-community-gallery__grid--unified {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
@media (min-width: 600px) {
    .arc-community-gallery__grid--unified {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
}
@media (min-width: 900px) {
    .arc-community-gallery__grid--unified {
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
    }
}
@media (min-width: 1200px) {
    .arc-community-gallery__grid--unified {
        grid-template-columns: repeat(9, 1fr);
        gap: 6px;
    }
}
.arc-gallery-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #888;
    padding: 0 4px;
    line-height: 1;
}
.arc-gallery-close-btn:hover {
    color: #333;
}

/* === Loan Pills on Gallery === */
.arc-loan-pills {
    position: absolute;
    top: 8px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
    pointer-events: none;
}
.arc-loan-pill {
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    animation: arcPillFloat 3s ease-in-out infinite;
    transition: transform .2s, box-shadow .2s;
    pointer-events: auto;
    margin-left: auto;
}
.arc-loan-pill:nth-child(1) { animation-delay: 0s; }
.arc-loan-pill:nth-child(2) { animation-delay: 0.4s; }
.arc-loan-pill:nth-child(3) { animation-delay: 0.8s; }
.arc-loan-pill:nth-child(4) { animation-delay: 1.2s; }
.arc-loan-pill:hover {
    transform: translateX(-4px) scale(1.03);
    box-shadow: 0 3px 10px rgba(83,74,183,0.15);
}
@keyframes arcPillFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.arc-loan-pill__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.arc-loan-pill__label {
    display: block;
    font-size: 9px;
    color: #888;
    line-height: 1.2;
}
.arc-loan-pill__value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #534AB7;
    line-height: 1.3;
}
.arc-loan-reqs-float {
    position: absolute;
    bottom: 10px;
    left: 8px;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    line-height: 1.5;
    max-width: 50%;
    z-index: 2;
}
@media (max-width: 640px) {
    .arc-loan-pills {
        top: 6px;
        right: 6px;
        gap: 4px;
    }
    .arc-loan-pill {
        padding: 4px 10px;
        gap: 6px;
    }
    .arc-loan-pill__icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .arc-loan-pill__value {
        font-size: 11px;
    }
    .arc-loan-pill__label {
        font-size: 8px;
    }
    .arc-loan-reqs-float {
        bottom: 6px;
        left: 6px;
        font-size: 10px;
    }
}
.arc-gallery-wrapper {
    overflow: visible;
}

/* === Featured/Pinned Comments === */
.arc-featured {
    border: 1px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.arc-featured__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}
.arc-featured__title {
    font-size: 14px;
    font-weight: 600;
}
.arc-featured__badge {
    font-size: 11px;
    color: #534AB7;
    background: #EEEDFE;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.arc-featured__arrow {
    font-size: 14px;
    color: #888;
    transition: transform .2s;
}
.arc-featured__body {
    position: relative;
    padding: 0 14px 14px;
}
.arc-featured__cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px;
}
.arc-featured__cards::-webkit-scrollbar { display: none; }
.arc-featured__card {
    min-width: 240px;
    max-width: 280px;
    flex-shrink: 0;
    border: 1px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .15s;
}
.arc-featured__card:hover {
    border-color: #534AB7;
}
.arc-featured__card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.arc-featured__card-name {
    font-size: 13px;
    font-weight: 600;
}
.arc-featured__tab {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
}
.arc-featured__tab--vtc { background: #E1F5EE; color: #0F6E56; }
.arc-featured__tab--scam { background: #FCEBEB; color: #A32D2D; }
.arc-featured__tab--discuss { background: #E6F1FB; color: #0C447C; }
.arc-featured__card-time {
    font-size: 11px;
    color: #999;
    margin-left: auto;
}
.arc-featured__card-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.arc-featured__card-img {
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    height: 80px;
}
.arc-featured__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-featured__card-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #999;
}
.arc-featured__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--arc-border, #e5e5e5);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    color: #333;
}
.arc-featured__nav:hover {
    background: #f5f5f5;
}
.arc-featured__nav--prev { left: 4px; }
.arc-featured__nav--next { right: 4px; }
@media (min-width: 641px) {
    .arc-featured__nav { display: flex; }
}
@media (max-width: 640px) {
    .arc-featured__card { min-width: 200px; }
}

/* === Featured Unpin Button === */
.arc-featured__card {
    position: relative;
}
.arc-featured__unpin {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .15s, color .15s;
}
.arc-featured__unpin:hover {
    background: #FCEBEB;
    color: #A32D2D;
}

/* === Follow Button === */
.arc-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 16px;
    border: 1px solid #534AB7;
    background: #534AB7;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.arc-follow-btn:hover {
    background: #3C3489;
    border-color: #3C3489;
}
.arc-follow-btn--active {
    background: #fff;
    color: #534AB7;
    border-color: #534AB7;
}
.arc-follow-btn--active:hover {
    background: #FCEBEB;
    color: #A32D2D;
    border-color: #A32D2D;
}
.arc-follow-btn__count {
    font-size: 11px;
    opacity: 0.8;
}
@media (max-width: 640px) {
    .arc-follow-btn {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* === FAQ Related (Pinned to FAQ) === */
.arc-faq-related {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--arc-border, #e5e5e5);
}

/* === Icon Upload Overlay === */
.arc-app-icon {
    position: relative;
    overflow: hidden;
}
.arc-icon-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
    border-radius: inherit;
    font-size: 20px;
}
.arc-app-icon:hover .arc-icon-upload-overlay {
    opacity: 1;
}

/* === Focus Modal === */
.arc-focus-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.arc-focus-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    animation: arcModalFade 0.2s ease;
    touch-action: none;
}
.arc-focus-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 92vh;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: arcModalSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.arc-focus-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--arc-border, #e5e5e5);
    flex: 0 0 auto;
    background: #fff;
}
.arc-focus-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--arc-text, #1a1a1a);
}
.arc-focus-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--arc-bg-secondary, #f0f2f5);
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--arc-text-secondary, #555);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0;
}
.arc-focus-modal__close:hover {
    background: var(--arc-border, #e5e5e5);
    color: var(--arc-text, #1a1a1a);
}
.arc-focus-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
}
.arc-focus-modal__body .arc-comment {
    margin: 16px 20px;
}
.arc-focus-modal__body .arc-comment__inner {
    border: none;
    padding: 0;
}
.arc-focus-modal__footer {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid var(--arc-border, #e5e5e5);
    padding: 10px 16px;
    display: flex;
    /* Stack previews on top, input-row on bottom. Previous value
       was a single horizontal flex which pushed the preview tile
       onto the same row as the input — breaking the layout when
       there were uploaded images. */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.arc-focus-modal__footer-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.arc-focus-modal__footer-input {
    flex: 1;
    background: var(--arc-bg-secondary, #f0f2f5);
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    min-width: 0;
    resize: none;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.arc-focus-modal__footer-input:focus {
    background: #fff;
    box-shadow: 0 0 0 2px #534AB7;
}
.arc-focus-modal__footer-submit {
    background: #534AB7;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.arc-focus-modal__footer-submit:disabled {
    background: #bbb;
    cursor: not-allowed;
}
.arc-focus-modal__footer-icon {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    color: var(--arc-text-secondary, #555);
    flex-shrink: 0;
}
.arc-focus-modal--open {
    display: flex !important;
}
body.arc-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}
@keyframes arcModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes arcModalSlide {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .arc-focus-modal {
        align-items: stretch;
        padding: 0;
    }
    .arc-focus-modal__dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: 100%;
        min-height: 0;
        border-radius: 0;
    }
    .arc-focus-modal__header {
        padding: 10px 14px;
        padding-top: calc(10px + env(safe-area-inset-top, 0));
    }
    .arc-focus-modal__close {
        width: 40px;
        height: 40px;
    }
    .arc-focus-modal__footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE FEED — Facebook-style activity feed of parent comments
   Card is a <div role=link> with data-href. JS handles navigation.
   Inner real <a.arc-feed-card__innerlink> anchors have their own URLs
   (user profile, app page) — stopPropagation prevents bubbling.
   ═══════════════════════════════════════════════════════════════════ */
.arc-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arc-feed-card {
    display: block;
    background: var(--arc-bg, #fff);
    border: 1.5px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    padding: 14px 16px;
    transition: box-shadow .15s, border-color .15s, transform .12s;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

/* Variant B rotation — matches .arc-comment to keep visual rhythm
   consistent between home feed and single-app comments */
#arc-activity-feed .arc-feed-card:nth-child(5n+1) {
    border-color: #C9A8E8;
    background: linear-gradient(to bottom, #fcfaff 0%, #fff 70px);
}
#arc-activity-feed .arc-feed-card:nth-child(5n+2) {
    border-color: #AAD4E8;
    background: linear-gradient(to bottom, #f7fcfe 0%, #fff 70px);
}
#arc-activity-feed .arc-feed-card:nth-child(5n+3) {
    border-color: #A8DBC1;
    background: linear-gradient(to bottom, #f7fdfa 0%, #fff 70px);
}
#arc-activity-feed .arc-feed-card:nth-child(5n+4) {
    border-color: #F0C878;
    background: linear-gradient(to bottom, #fefaf0 0%, #fff 70px);
}
#arc-activity-feed .arc-feed-card:nth-child(5n+5) {
    border-color: #E8A8B8;
    background: linear-gradient(to bottom, #fef8fa 0%, #fff 70px);
}

/* Tab-specific colors override rotation for semantic tabs */
.arc-feed-card[data-tab="canh-bao-scam"] {
    border-color: #E8A8A8 !important;
    background: linear-gradient(to bottom, #fef5f5 0%, #fff 70px) !important;
}
.arc-feed-card[data-tab="giai-dap-nhanh"] {
    border-color: #A8DBC1 !important;
    background: linear-gradient(to bottom, #f5fcf8 0%, #fff 70px) !important;
}

.arc-feed-card:hover {
    box-shadow: 0 4px 16px rgba(83, 74, 183, 0.08);
}
.arc-feed-card:active {
    transform: translateY(1px);
}

/* Inner anchors inherit card's text color so they don't look
   out-of-place unless they have their own coloring class */
.arc-feed-card__innerlink {
    text-decoration: none;
    color: inherit;
}
.arc-feed-card__innerlink:hover {
    text-decoration: none;
}

.arc-feed-card__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.arc-feed-card__avatar-link {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
}
.arc-feed-card__avatar-link:hover {
    opacity: 0.85;
}
.arc-feed-card__meta {
    flex: 1;
    min-width: 0;
}
.arc-feed-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.arc-feed-card__topline-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.arc-feed-card__topline-right {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}
.arc-feed-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-text, #1a1a1a);
}
.arc-feed-card__name--link {
    cursor: pointer;
}
.arc-feed-card__name--link:hover {
    text-decoration: underline;
}
.arc-feed-card__badge {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 10px;
    line-height: 1.5;
    white-space: nowrap;
}
.arc-feed-card__app-link {
    color: #534AB7;
    font-weight: 500;
    cursor: pointer;
}
.arc-feed-card__app-link:hover {
    text-decoration: underline;
}
.arc-feed-card__dot {
    color: #ccc;
}

/* ──────────────────────────────────────────────────────────────────
   Topic feed row (homepage "Thảo Luận Mới Nhất")
   Forum-style horizontal layout: avatar | title+meta | replies |
   views | last-reply. Designed to fit 6-12 rows on a single screen
   so users can scan the latest activity at a glance without
   scrolling past large card bodies.
   ────────────────────────────────────────────────────────────── */
.arc-topic-list {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.arc-topic-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 80px 90px 170px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background 0.15s ease;
}
.arc-topic-row:hover {
    background: #FAFAFB;
}
.arc-topic-row:last-child {
    border-bottom: none;
}
.arc-topic-row__avatar .arc-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.arc-topic-row__avatar-link {
    display: block;
    line-height: 0;
}
.arc-topic-row__main {
    min-width: 0; /* allow ellipsis on title */
}
.arc-topic-row__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--arc-primary, #534AB7);
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.arc-topic-row__title-link {
    color: inherit;
    text-decoration: none;
}
.arc-topic-row__title-link:hover {
    text-decoration: underline;
}
.arc-topic-row__meta {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arc-topic-row__author,
.arc-topic-row__app {
    color: #555;
    text-decoration: none;
}
.arc-topic-row__author:hover,
.arc-topic-row__app:hover {
    color: var(--arc-primary, #534AB7);
    text-decoration: underline;
}
.arc-topic-row__sep {
    margin: 0 4px;
    color: #ccc;
}
/* Colored tag pill — matches the in-app filter chips for visual
   consistency. Background color comes from inline style (set by PHP
   based on tag slug), so a single rule covers all three tags. */
.arc-topic-row__tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.arc-topic-row__tag-pill i {
    font-size: 11px;
    line-height: 1;
}
.arc-topic-row__stat {
    text-align: center;
    font-size: 12px;
    color: #888;
}
.arc-topic-row__stat-label {
    margin-bottom: 2px;
}
.arc-topic-row__stat-num {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}
.arc-topic-row__last {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.arc-topic-row__last-info {
    text-align: right;
    min-width: 0;
}
.arc-topic-row__last-time {
    font-size: 13px;
    color: var(--arc-primary, #534AB7);
    font-weight: 500;
    white-space: nowrap;
}
.arc-topic-row__last-name {
    font-size: 12px;
    color: #777;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.arc-topic-row__last-name:hover {
    color: var(--arc-primary, #534AB7);
    text-decoration: underline;
}
.arc-topic-row__last-avatar .arc-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
    flex-shrink: 0;
}

/* Mobile-only stats are hidden on desktop where the table columns
   already show this info. Shown via @media (max-width:720px). */
.arc-topic-row__mobile-stats {
    display: none;
}

/* Mobile: collapse the table-like layout into a stacked card.
   Replies/views become a single inline footer; last-reply moves
   under the meta line. */
@media (max-width: 720px) {
    .arc-topic-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px;
    }
    .arc-topic-row__main {
        grid-column: 2 / 3;
    }
    .arc-topic-row__stat,
    .arc-topic-row__last {
        display: none;
    }
    .arc-topic-row__main::after {
        content: '';
        display: block;
    }
    /* Inline mobile stats injected via the meta line — handled in HTML */
    .arc-topic-row__mobile-stats {
        display: flex;
        gap: 12px;
        margin-top: 6px;
        font-size: 12px;
        color: #888;
    }
    .arc-topic-row__mobile-stats strong {
        color: #333;
        font-weight: 700;
    }
}

/* Body with truncation support */
.arc-feed-card__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--arc-text, #1a1a1a);
    word-break: break-word;
    margin-bottom: 10px;
    position: relative;
}
.arc-feed-card__body-inner p {
    margin: 0 0 0.8em;
}
.arc-feed-card__body-inner p:last-child {
    margin-bottom: 0;
}
.arc-feed-card__body-inner a {
    color: #185FA5;
}

/* Truncated state: clamp to ~4 lines (~200 chars) with fade-out bottom */
.arc-feed-card__body--truncated .arc-feed-card__body-inner {
    max-height: 6.4em; /* ~4 lines @ 1.6 line-height */
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

.arc-feed-card__expand-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #534AB7;
}
.arc-feed-card:hover .arc-feed-card__expand-link {
    text-decoration: underline;
}

/* Image grid — small thumbnails like mobile */
.arc-feed-card__images {
    display: grid;
    gap: 3px;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    max-width: 380px; /* cap on desktop so images stay compact */
}
.arc-feed-card__images--count1 {
    grid-template-columns: 1fr;
    max-width: 240px;
}
.arc-feed-card__images--count2 {
    grid-template-columns: 1fr 1fr;
    max-width: 320px;
}
.arc-feed-card__images--count3 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 360px;
}
.arc-feed-card__images--count4 {
    grid-template-columns: 1fr 1fr;
    max-width: 320px;
}
.arc-feed-card__image-wrap {
    position: relative;
    aspect-ratio: 1; /* square thumbs */
    overflow: hidden;
    background: #f0f0f0;
}
.arc-feed-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-feed-card__images-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.arc-feed-card__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--arc-border, #f0f0f0);
    font-size: 13px;
    color: #666;
}
.arc-feed-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arc-feed-card__stat--reply {
    color: #534AB7;
    font-weight: 500;
}
.arc-feed-card__cta {
    margin-left: auto;
    color: #534AB7;
    font-weight: 500;
    font-size: 13px;
}

/* Load more button */
.arc-load-more {
    text-align: center;
    margin: 20px 0;
}
.arc-feed-load-more {
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--arc-border, #e5e5e5);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #534AB7;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.arc-feed-load-more:hover:not(:disabled) {
    background: #EEEDFE;
    border-color: #534AB7;
}
.arc-feed-load-more:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 600px) {
    .arc-feed-card {
        padding: 12px;
        border-radius: 10px;
    }
    .arc-feed-card__body {
        font-size: 14px;
    }
    .arc-feed-card__footer {
        gap: 12px;
        font-size: 12.5px;
    }
    .arc-feed-card__cta {
        font-size: 12.5px;
    }
    .arc-feed-card__images,
    .arc-feed-card__images--count1,
    .arc-feed-card__images--count2,
    .arc-feed-card__images--count3,
    .arc-feed-card__images--count4 {
        max-width: 260px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   TOAST — small bottom-center notification shown after actions
   like toggling thread follow. Auto-dismisses after ~2.5s.
   ═══════════════════════════════════════════════════════════════════ */
.arc-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30, 30, 30, 0.94);
    color: #fff;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 500;
    max-width: 90vw;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 99999;
    pointer-events: none;
    text-align: center;
}
.arc-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
    .arc-toast {
        bottom: 20px;
        font-size: 13px;
        padding: 9px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NOTIFICATION "Xem thêm" BUTTON — loads older notifications in batches
   Appears at the bottom of the notification dropdown list.
   ═══════════════════════════════════════════════════════════════════ */
.arc-notif-load-more {
    display: block;
    width: calc(100% - 20px);
    margin: 8px 10px;
    padding: 8px;
    background: #F6F5FC;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #534AB7;
    cursor: pointer;
    transition: background .12s;
}
.arc-notif-load-more:hover {
    background: #EEEDFE;
}

/* ═══════════════════════════════════════════════════════════════════
   LIKE LIST MODAL — replaces the inline expand panel.
   Opens on click of "Đã thích" badge. Content cap + scroll so the
   list never pushes the main layout down (prevents CLS).
   Uses aria-hidden for visibility state.
   ═══════════════════════════════════════════════════════════════════ */
.arc-like-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}
.arc-like-modal[aria-hidden="false"] {
    display: flex;
}
.arc-like-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.arc-like-modal__dialog {
    position: relative;
    background: #fff;
    width: min(92vw, 420px);
    max-height: min(80vh, 560px);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: arcLikeModalIn .18s ease-out;
}
@keyframes arcLikeModalIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.arc-like-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
}
.arc-like-modal__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #222;
}
.arc-like-modal__close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    transition: color .12s;
}
.arc-like-modal__close:hover {
    color: #222;
}
.arc-like-modal__body {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
}
.arc-like-modal__body .arc-like-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}
.arc-like-modal__body .arc-like-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s;
}
.arc-like-modal__body .arc-like-list__item:hover {
    background: #F6F5FC;
    color: #534AB7;
}
.arc-like-modal__empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 13.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN DIRECT-EDIT for download links — inline form inside the
   download panel. Admin-only; users see suggest/report forms instead.
   ═══════════════════════════════════════════════════════════════════ */
.arc-admin-dl-edit {
    border-top: 0.5px solid var(--color-border-tertiary, #e5e5e5);
    margin-top: 12px;
    padding-top: 10px;
}
.arc-admin-dl-edit__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.arc-admin-dl-edit__title {
    font-size: 13px;
    font-weight: 600;
    color: #534AB7;
}
.arc-admin-dl-edit__toggle {
    background: #F6F5FC;
    border: none;
    color: #534AB7;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}
.arc-admin-dl-edit__toggle:hover {
    background: #EEEDFE;
}
.arc-admin-dl-edit__body {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-background-primary, #fafafa);
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary, #e5e5e5);
}
.arc-admin-dl-edit__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.arc-admin-dl-edit__label {
    flex: 0 0 130px;
    font-size: 12.5px;
    font-weight: 500;
    padding-left: 8px;
    color: #333;
}
.arc-admin-dl-edit__input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 0.5px solid #e5e5e5;
    font-size: 12.5px;
    background: #fff;
    font-family: inherit;
}
.arc-admin-dl-edit__input:focus {
    outline: none;
    border-color: #534AB7;
}
.arc-admin-dl-edit__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.arc-admin-dl-edit__save {
    padding: 7px 18px;
    border-radius: 6px;
    background: #534AB7;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.arc-admin-dl-edit__save:hover {
    background: #3f379a;
}
.arc-admin-dl-edit__save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.arc-admin-dl-edit__hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: #888;
    line-height: 1.4;
}
.arc-admin-dl-edit__hint code {
    background: #eee;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}
@media (max-width: 600px) {
    .arc-admin-dl-edit__row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .arc-admin-dl-edit__label {
        flex: 1;
        padding-left: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG POST TEMPLATE — single.php
   Reading-optimized typography, centered column, breadcrumb, related
   posts. Kept visually distinct from app pages.
   ═══════════════════════════════════════════════════════════════════ */
.arc-post-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* ═══════════════════════════════════════════════════════════════════
   BREADCRUMB — Variant L (inline with left brand accent)
   ───────────────────────────────────────────────────────────────────
   No background frame, no enclosing border — instead a 3px purple
   accent on the left visually anchors the breadcrumb to the brand
   without competing with the topic/content card below it.

   Sits inline above the page H1 with tight vertical rhythm. Wraps
   to multi-line on narrow viewports (mobile) instead of ellipsing.

   Used everywhere via the .arc-breadcrumb class. Templates emit
   "<a>link</a><span>›</span>..." — pure CSS reskin, no HTML changes.
   ═══════════════════════════════════════════════════════════════════ */
.arc-breadcrumb {
    font-size: 13px;
    color: #5f5e5a;
    margin: 0 0 14px;
    padding: 6px 12px;
    border-left: 3px solid #534AB7;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    line-height: 1.45;
}
.arc-breadcrumb a {
    color: #534AB7;
    text-decoration: none;
    transition: color .12s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.arc-breadcrumb a:hover {
    color: #3C3489;
    text-decoration: underline;
}
/* Icon home prefix on the first link only ("Trang chủ"). */
.arc-breadcrumb a:first-of-type::before {
    content: "\f015"; /* fa-home, FontAwesome 6 Free Solid */
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    font-size: 13px;
    color: inherit;
}
.arc-breadcrumb__sep,
.arc-breadcrumb > span {
    color: #b4b2a9;
    font-size: 12px;
    user-select: none;
    margin: 0;
}
.arc-breadcrumb__current,
.arc-breadcrumb > strong {
    color: #2c2c2a;
    font-weight: 500;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Post header */
.arc-post__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.arc-post__cat {
    font-size: 12px;
    font-weight: 600;
    color: #534AB7;
    background: #EEEDFE;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background .12s;
}
.arc-post__cat:hover {
    background: #E2DFFA;
}
.arc-post__title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px;
    color: #1a1a1a;
    letter-spacing: -0.015em;
}
.arc-post__excerpt {
    font-size: 17px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 22px;
    font-weight: 400;
}
.arc-post__meta {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}
.arc-post__author {
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 12px;
}
.arc-post__author > span {
    display: flex;
    flex-direction: column;
}
.arc-post__author-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
}
.arc-post__author-name:hover {
    color: #534AB7;
}
.arc-post__meta-row {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}
.arc-post__meta-dot { color: #ccc; }

/* Featured image */
.arc-post__featured {
    margin: 0 0 32px;
    border-radius: 12px;
    overflow: hidden;
}
.arc-post__featured img {
    width: 100%;
    height: auto;
    display: block;
}

/* Content typography — reading-optimized */
.arc-post__content {
    font-size: 17px;
    line-height: 1.75;
    color: #2a2a2a;
}
.arc-post__content > *:first-child { margin-top: 0; }
.arc-post__content > *:last-child  { margin-bottom: 0; }

.arc-post__content p {
    margin: 0 0 1.25em;
}
.arc-post__content h2,
.arc-post__content h3,
.arc-post__content h4 {
    line-height: 1.3;
    margin: 1.8em 0 0.6em;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.arc-post__content h2 { font-size: 1.55em; }
.arc-post__content h3 { font-size: 1.25em; }
.arc-post__content h4 { font-size: 1.1em; }

.arc-post__content a {
    color: #534AB7;
    text-decoration: underline;
    text-decoration-color: rgba(83,74,183,0.35);
    text-underline-offset: 3px;
    transition: color .12s;
}
.arc-post__content a:hover {
    color: #3f379a;
    text-decoration-color: #3f379a;
}

.arc-post__content ul,
.arc-post__content ol {
    padding-left: 1.6em;
    margin: 0 0 1.25em;
}
.arc-post__content li {
    margin-bottom: 0.5em;
}
.arc-post__content li::marker {
    color: #534AB7;
}

.arc-post__content blockquote {
    border-left: 4px solid #534AB7;
    padding: 4px 0 4px 20px;
    margin: 1.5em 0;
    color: #555;
    font-style: italic;
    background: #FAFAFE;
    border-radius: 0 6px 6px 0;
}

.arc-post__content code {
    background: #f4f2fc;
    color: #534AB7;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, monospace;
}
.arc-post__content pre {
    background: #1e1e2e;
    color: #e8e8ee;
    padding: 16px 18px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.5;
    margin: 1.5em 0;
}
.arc-post__content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.arc-post__content img,
.arc-post__content figure {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.5em auto;
    display: block;
}
.arc-post__content figure {
    margin: 1.8em 0;
}
.arc-post__content figcaption {
    text-align: center;
    font-size: 13.5px;
    color: #888;
    margin-top: 6px;
    font-style: italic;
}

.arc-post__content hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 2em 0;
}

.arc-post__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 15px;
}
.arc-post__content th,
.arc-post__content td {
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    text-align: left;
}
.arc-post__content th {
    background: #FAFAFE;
    font-weight: 600;
}

/* Tags footer */
.arc-post__tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.arc-post__tags-label {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}
.arc-post__tag {
    font-size: 13px;
    color: #534AB7;
    background: #F6F5FC;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background .12s;
}
.arc-post__tag:hover {
    background: #EEEDFE;
}

/* Related posts */
.arc-related-posts {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}
.arc-related-posts__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1a1a1a;
}
.arc-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.arc-related-post {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.arc-related-post:hover {
    border-color: #534AB7;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(83,74,183,0.08);
}
.arc-related-post__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f5f5f5;
}
.arc-related-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-related-post__body {
    padding: 12px 14px;
}
.arc-related-post__title {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.arc-related-post__date {
    font-size: 12px;
    color: #888;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE TEMPLATE — category / tag / date list
   ═══════════════════════════════════════════════════════════════════ */
.arc-archive-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.arc-archive__header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.arc-archive__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
}
.arc-archive__desc {
    color: #666;
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}
.arc-archive__empty {
    padding: 60px 20px;
    text-align: center;
    color: #888;
}
.arc-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.arc-post-card {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.arc-post-card:hover {
    border-color: #534AB7;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(83,74,183,0.08);
}
.arc-post-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.arc-post-card__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f5f5f5;
}
.arc-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.arc-post-card:hover .arc-post-card__thumb img {
    transform: scale(1.05);
}
.arc-post-card__body {
    padding: 16px 18px;
}
.arc-post-card__cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #534AB7;
    background: #EEEDFE;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}
.arc-post-card__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.arc-post-card__excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.arc-post-card__meta {
    font-size: 12.5px;
    color: #888;
}

/* Pagination */
.arc-archive__pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}
.arc-archive__pagination .nav-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.arc-archive__pagination .page-numbers {
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    background: #F6F5FC;
    transition: background .12s, color .12s;
}
.arc-archive__pagination .page-numbers:hover {
    background: #EEEDFE;
    color: #534AB7;
}
.arc-archive__pagination .page-numbers.current {
    background: #534AB7;
    color: #fff;
}

@media (max-width: 600px) {
    .arc-post-container {
        padding: 14px 14px 40px;
    }
    .arc-post__content {
        font-size: 16px;
        line-height: 1.7;
    }
    .arc-post__content h2 { font-size: 1.4em; }
    .arc-post__content h3 { font-size: 1.18em; }
    .arc-related-posts__grid {
        grid-template-columns: 1fr;
    }
    .arc-breadcrumb__current,
    .arc-breadcrumb > strong {
        /* Mobile: let the title wrap to multi-line instead of
           hiding behind ellipsis. User explicitly opted in to
           multi-line wrap behavior to keep full context visible. */
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE — "Xem thêm" AJAX load-more button (replaces pagination)
   ═══════════════════════════════════════════════════════════════════ */
.arc-archive__loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.arc-archive-loadmore {
    background: #fff;
    color: #534AB7;
    border: 1.5px solid #534AB7;
    padding: 11px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    min-width: 200px;
}
.arc-archive-loadmore:hover:not(:disabled) {
    background: #534AB7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(83, 74, 183, 0.25);
}
.arc-archive-loadmore:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TEMPLATE — page.php
   Static pages (Contact, About, Privacy, Terms).
   Typography reuses .arc-post__content from single.php for
   consistency. This section only adds page-specific overrides.
   ═══════════════════════════════════════════════════════════════════ */
.arc-page-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.arc-page__header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}
.arc-page__title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
    color: #1a1a1a;
    letter-spacing: -0.015em;
}
.arc-page__excerpt {
    font-size: 17px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-weight: 400;
}
.arc-page__featured {
    margin: 20px 0 0;
    border-radius: 12px;
    overflow: hidden;
}
.arc-page__featured img {
    width: 100%;
    height: auto;
    display: block;
}

/* Last updated footer — useful signal for legal/policy pages */
.arc-page__footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.arc-page__updated {
    font-size: 13px;
    color: #888;
    margin: 0;
    font-style: italic;
}
.arc-page__updated time {
    color: #555;
    font-weight: 500;
    font-style: normal;
}

/* Child pages list — renders when this page has nested children */
.arc-page__children {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}
.arc-page__children-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1a1a1a;
}
.arc-page__children-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.arc-page__children-list li {
    margin: 0;
}
.arc-page__children-list a {
    display: block;
    padding: 14px 18px;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.arc-page__children-list a:hover {
    border-color: #534AB7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 74, 183, 0.06);
}
.arc-page__children-list strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}
.arc-page__children-list a:hover strong {
    color: #534AB7;
}
.arc-page__child-desc {
    display: block;
    font-size: 13.5px;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .arc-page-container {
        padding: 14px 14px 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   APPS "Xem thêm app" — AJAX load-more button for the app lists
   (used on homepage and /app/ archive). Same visual language as
   .arc-archive-loadmore but scoped to apps so both can evolve
   independently if needed later.
   ═══════════════════════════════════════════════════════════════════ */
.arc-apps-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.arc-apps-loadmore {
    background: #fff;
    color: #534AB7;
    border: 1.5px solid #534AB7;
    padding: 10px 28px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    min-width: 180px;
    font-family: inherit;
}
.arc-apps-loadmore:hover:not(:disabled) {
    background: #534AB7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(83, 74, 183, 0.25);
}
.arc-apps-loadmore:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Anchor variant — links out to /app/ archive instead of paging in
   place. Uses an <a> so right-click → "Open in new tab" works
   normally and the URL is crawlable. */
.arc-apps-loadmore-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #534AB7;
    border: 1.5px solid #534AB7;
    padding: 10px 28px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s, gap .15s;
    min-width: 180px;
    justify-content: center;
}
.arc-apps-loadmore-link:hover {
    background: #534AB7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(83, 74, 183, 0.25);
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   APP LIÊN QUAN — 5-column grid of thumbnail cards below FAQ.
   Shows apps sharing the same trust tier as the current app so users
   can compare similar-category alternatives (Verified → other
   Verified, Scam → other Scam, etc).
   ═══════════════════════════════════════════════════════════════════ */
.arc-related-apps {
    background: #fff;
    border: 0.5px solid var(--color-border-tertiary, #e5e5e5);
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 24px;
}
.arc-related-apps__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.arc-related-apps__icon {
    font-size: 18px;
}
.arc-related-apps__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #222;
}
.arc-related-apps__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.arc-related-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fafafa;
    text-decoration: none;
    color: inherit;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.arc-related-app:hover {
    background: #f1f0fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(83, 74, 183, 0.08);
}
.arc-related-app__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
    flex-shrink: 0;
    background: #f0f0f0;
}
.arc-related-app__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-related-app__icon span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
}
.arc-related-app__name {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin-bottom: 3px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.arc-related-app__rating {
    font-size: 12px;
    font-weight: 600;
}

/* Mobile: 3 cols then 2 cols on narrower screens */
@media (max-width: 720px) {
    .arc-related-apps__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 420px) {
    .arc-related-apps__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .arc-related-apps {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE INTRO CONTENT — admin-editable WYSIWYG block on /app/
   page between the header and the filter bar. Shows the current
   content with an "✏️ Sửa nội dung" button next to it.
   ═══════════════════════════════════════════════════════════════════ */
.arc-archive-intro {
    background: #fff;
    border: 0.5px solid #e5e5e5;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 18px;
    position: relative;
}
.arc-archive-intro__content {
    font-size: 14px;
    line-height: 1.65;
    color: #333;
}
.arc-archive-intro__content p {
    margin: 0 0 10px;
}
.arc-archive-intro__content p:last-child {
    margin-bottom: 0;
}
.arc-archive-intro__content ul,
.arc-archive-intro__content ol {
    margin: 0 0 10px;
    padding-left: 24px;
}
.arc-archive-intro__content a {
    color: #534AB7;
    text-decoration: underline;
}
.arc-archive-intro #arc-edit-intro-btn {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN INLINE MODAL — shared shell for SEO + intro edit dialogs
   ═══════════════════════════════════════════════════════════════════ */
.arc-admin-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-admin-modal__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 20, 30, 0.55);
    backdrop-filter: blur(2px);
}
.arc-admin-modal__box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.arc-admin-modal__box--wide {
    max-width: 760px;
}
.arc-admin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.arc-admin-modal__header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #222;
}
.arc-admin-modal__close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
    transition: background .15s;
}
.arc-admin-modal__close:hover {
    background: #f5f5f5;
    color: #222;
}
.arc-admin-modal__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.arc-admin-modal__footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

/* Form field styling for SEO modal inputs */
.arc-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.arc-field-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.arc-field-input:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.15);
}
.arc-field-hint {
    font-size: 11.5px;
    color: #999;
    margin-top: 4px;
}

/* Header row in /app/ accommodates the SEO button on the right */
.arc-homepage-header {
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   APP SEARCH WIDGET — tìm app vay tiền từ external DB (apkloanth).
   Logged-in users can search; guests see a login CTA. Results
   render inline below the input as a dropdown panel.
   ═══════════════════════════════════════════════════════════════════ */
.arc-app-search {
    background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
    border: 1px solid #E8E5F7;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 0 0 24px;
    position: relative;
    box-shadow: 0 4px 20px rgba(83, 74, 183, 0.06);
    /* `contain: layout` was removed intentionally — it trapped the
       absolutely-positioned results dropdown inside this card's
       bounding box, causing it to clip awkwardly at the bottom edge
       and leaving the next section (Vay Thành Công) visible through
       the gap. Position-relative + z-index on the results panel is
       enough to keep stacking correct. */
}
.arc-app-search__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.arc-app-search__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #534AB7, #7F77DD);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(83, 74, 183, 0.25);
}
.arc-app-search__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1a1a2e;
}
.arc-app-search__subtitle {
    font-size: 13px;
    color: #6b6880;
    margin: 0;
}

/* Input with left icon, pill-shaped. The outer wrap is the
   positioning context for the absolute results dropdown; the
   inner wrap is only around the input itself, so the search
   icon stays glued to the input even when a CTA button stacks
   below on mobile. */
/* 3-level structure for correct positioning:
     .__input-wrap   → anchor for absolute results dropdown
     .__field        → flex row containing icon+input AND cta (desktop)
                       becomes flex column on mobile so cta stacks below
     .__icon-shell   → wraps only [svg + input] so icon's top:50% always
                       aligns with input height, not the whole field.  */
.arc-app-search__input-wrap {
    position: relative;
}
.arc-app-search__field {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.arc-app-search__icon-shell {
    position: relative;
    flex: 1;
    min-width: 0;
}
.arc-app-search__input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9994a8;
    pointer-events: none;
    z-index: 2;
}
.arc-app-search__input {
    width: 100%;
    padding: 14px 18px 14px 44px;
    font-size: 15px;
    border: 1.5px solid #E0DCF0;
    border-radius: 14px;
    background: #fff;
    color: #1a1a2e;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-sizing: border-box;
}
.arc-app-search__input::placeholder {
    color: #a8a5b8;
}
.arc-app-search__input:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12);
}
.arc-app-search__input[readonly] {
    cursor: pointer;
    background: #f7f5fd;
}
.arc-app-search__input[readonly]:hover {
    border-color: #8078c8;
    background: #f1eefa;
}
.arc-app-search__login-cta {
    background: #534AB7;
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.arc-app-search__login-cta:hover {
    background: #3C3489;
}

/* Results dropdown — absolute-positioned below the input to avoid
   Cumulative Layout Shift. When results appear/disappear, the
   tips list below stays put. */
.arc-app-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #E8E5F7;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(20, 20, 40, 0.14);
    max-height: 440px;
    overflow-y: auto;
    padding: 8px;
}

/* Custom scrollbar for results */
.arc-app-search__results::-webkit-scrollbar {
    width: 8px;
}
.arc-app-search__results::-webkit-scrollbar-track {
    background: transparent;
}
.arc-app-search__results::-webkit-scrollbar-thumb {
    background: #d8d4ee;
    border-radius: 4px;
}
.arc-app-search__results::-webkit-scrollbar-thumb:hover {
    background: #534AB7;
}



/* ═══════════════════════════════════════════════════════════════════
   SEARCH RESULTS — app cards built from API response.
   Each item is rendered by JS with these exact classes, so CSS is
   simple and predictable.
   ═══════════════════════════════════════════════════════════════════ */
.arc-search-raw {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

/* Card: grid [icon | content]. min-width:0 on the content column
   is required or long names wrap character-by-character. */
.arc-search-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #E8E5F7;
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.arc-search-item:hover {
    border-color: #8078c8;
    box-shadow: 0 4px 12px rgba(83, 74, 183, 0.08);
}

/* Icon spans all rows on the left */
.arc-search-item > img,
.arc-search-item > .arc-search-item__icon-ph {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: cover;
    background: #f0f0f0;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.arc-search-item__icon-ph {
    background: linear-gradient(135deg, #EEEDFE, #CECBF6);
    color: #534AB7;
    font-weight: 700;
    font-size: 18px;
}

/* Name row */
.arc-search-item__name {
    grid-row: 1;
    grid-column: 2;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Meta label ("Download") */
.arc-search-item__text {
    grid-row: 2;
    grid-column: 2;
    font-size: 11px;
    color: #a0a0a8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 1;
    margin: 2px 0 4px;
}

/* Actions row — equal-width button grid, same size regardless of label */
.arc-search-item__actions {
    grid-row: 3;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
}
.arc-search-item__actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    background: #EEEDFE;
    color: #534AB7;
    border: 1px solid rgba(83, 74, 183, 0.18);
    transition: transform .12s, box-shadow .12s, background .12s;
    line-height: 1.2;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-search-item__actions a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(83, 74, 183, 0.2);
    background: #534AB7;
    color: #fff;
    border-color: #534AB7;
}

/* APK / Android → green */
.arc-search-item__actions a[href$=".apk"],
.arc-search-item__actions a[href*=".apk?"],
.arc-search-item__actions a[href*="/apk/"],
.arc-search-item__actions a[href*="android"] {
    background: #E0F5EE;
    color: #0F6E56;
    border-color: rgba(15, 110, 86, 0.22);
}
.arc-search-item__actions a[href$=".apk"]:hover,
.arc-search-item__actions a[href*=".apk?"]:hover,
.arc-search-item__actions a[href*="/apk/"]:hover,
.arc-search-item__actions a[href*="android"]:hover {
    background: #0F6E56;
    color: #fff;
    border-color: #0F6E56;
}

/* iOS → blue */
.arc-search-item__actions a[href*="ios"],
.arc-search-item__actions a[href*="apple.com"],
.arc-search-item__actions a[href*="apps.apple"],
.arc-search-item__actions a[href*="iphone"] {
    background: #E6F1FB;
    color: #185FA5;
    border-color: rgba(24, 95, 165, 0.22);
}
.arc-search-item__actions a[href*="ios"]:hover,
.arc-search-item__actions a[href*="apple.com"]:hover,
.arc-search-item__actions a[href*="apps.apple"]:hover,
.arc-search-item__actions a[href*="iphone"]:hover {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}

/* Mobile: smaller icon & compact paddings */
@media (max-width: 480px) {
    .arc-search-item {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 10px;
        padding: 10px 12px;
    }
    .arc-search-item > img,
    .arc-search-item > .arc-search-item__icon-ph {
        width: 40px;
        height: 40px;
        border-radius: 9px;
    }
    .arc-search-item__name {
        font-size: 13px;
    }
    .arc-search-item__actions a {
        font-size: 11.5px;
        padding: 7px 8px;
    }
}

.arc-app-search__no-result {
    text-align: center;
    padding: 28px 16px;
}
.arc-app-search__no-result-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.arc-app-search__no-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}
.arc-app-search__no-result-hint {
    font-size: 13px;
    color: #888;
}
.arc-app-search__no-result-hint strong {
    color: #534AB7;
}

/* Tips list — numbered circles for structure */
.arc-app-search__tips {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #E0DCF0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.arc-app-search__tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.55;
    color: #444;
}
.arc-app-search__tip em {
    font-style: normal;
    color: #534AB7;
    font-weight: 500;
}
.arc-app-search__tip-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EEEDFE;
    color: #534AB7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.arc-app-search__tip-hl {
    color: #A32D2D;
    font-weight: 700;
}
.arc-app-search__tip--warn .arc-app-search__tip-num--warn {
    background: #FEF3C7;
    color: #BA7517;
}
.arc-app-search__tip--warn {
    color: #7a5108;
}
.arc-app-search__tip--danger .arc-app-search__tip-num--danger {
    background: #FCEBEB;
    color: #A32D2D;
}
.arc-app-search__tip--danger {
    color: #7a1818;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .arc-app-search {
        padding: 18px 16px;
    }
    .arc-app-search__title {
        font-size: 15px;
    }
    .arc-app-search__input {
        font-size: 14px;
        padding: 12px 14px 12px 40px;
    }
    /* Stack icon-shell and CTA vertically. Icon-shell still
       contains only [icon + input], so the icon stays centered
       inside the input regardless. */
    .arc-app-search__field {
        flex-direction: column;
    }
    .arc-app-search__login-cta {
        width: 100%;
        padding: 12px 16px;
    }
    .arc-app-search__tip {
        font-size: 12.5px;
    }
    .arc-app-search__tip span:last-child {
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   APP SEARCH — TABS (external API vs in-system)
   ═══════════════════════════════════════════════════════════════════ */
.arc-app-search__tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-bottom: 14px;
    padding: 4px;
    background: #f1eefa;
    border-radius: 12px;
    position: relative;
}
.arc-app-search__tab {
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #6b6880;
    cursor: pointer;
    border-radius: 9px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .15s;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-app-search__tab:hover:not(.arc-app-search__tab--active) {
    color: #534AB7;
}
.arc-app-search__tab--active {
    background: #fff;
    color: #534AB7;
    box-shadow: 0 2px 6px rgba(83, 74, 183, 0.12);
}
.arc-app-search__tab-icon {
    font-size: 14px;
}

/* Panel visibility */
.arc-app-search__panel {
    display: none;
}
.arc-app-search__panel--active {
    display: block;
}

/* Hint under in-system panel */
.arc-app-search__panel-hint {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f6f5fc;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE APP RESULT ITEM — clickable card for in-system matches
   ═══════════════════════════════════════════════════════════════════ */
.arc-site-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}
.arc-site-item .arc-search-item__name {
    grid-row: 1;
    grid-column: 2;
}
.arc-site-item__meta {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}
.arc-site-item__rating {
    color: #639922;
    font-weight: 600;
}
.arc-site-item__status {
    font-weight: 600;
    font-size: 11.5px;
}
.arc-site-item__count {
    color: #888;
}
.arc-site-item__arrow {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
    font-size: 18px;
    color: #534AB7;
    font-weight: 600;
    padding: 0 8px;
    transition: transform .15s;
}
.arc-site-item:hover {
    border-color: #534AB7;
    background: #faf9ff;
}
.arc-site-item:hover .arc-site-item__arrow {
    transform: translateX(4px);
}

/* Mobile: tabs still 2-col but smaller; arrow hides on very narrow */
@media (max-width: 480px) {
    .arc-app-search__tab {
        font-size: 12px;
        padding: 9px 8px;
    }
    .arc-app-search__tab-icon {
        font-size: 12px;
    }
    .arc-site-item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }
    .arc-site-item__arrow {
        padding: 0 4px;
        font-size: 16px;
    }
    .arc-site-item__meta {
        gap: 6px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   APP ARCHIVE — tier sections (5 nhóm: Mới, Đã xác minh, Đáng tin cậy,
   Chưa xác minh, Cảnh báo scam). Each section renders 5 apps initially
   and has its own "Xem thêm" button that paginates via AJAX.
   ═══════════════════════════════════════════════════════════════════ */
.arc-tier-section {
    margin-bottom: 28px;
}
.arc-tier-section:last-child {
    margin-bottom: 0;
}

/* Section header = full-width colored banner, more prominent than
   before. Makes each group instantly distinguishable when scrolling. */
.arc-tier-section__header {
    margin-bottom: 14px;
    padding: 14px 18px;
    background: #f6f5fc;
    border-left: 4px solid #534AB7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.arc-tier-section__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    min-width: 0;
    flex: 1;
    letter-spacing: -0.2px;
}
.arc-tier-section__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-tier-section__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #EEEDFE;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(83, 74, 183, 0.12);
}
.arc-tier-section__count {
    background: #fff;
    color: #6b6880;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    flex-shrink: 0;
    border: 1px solid #E8E5F7;
}

/* Tier-specific accents — colored left border + icon + count badge. */
.arc-tier-section--moi .arc-tier-section__header {
    background: linear-gradient(90deg, #f4f0ff 0%, #fafafe 100%);
    border-left-color: #534AB7;
}
.arc-tier-section--moi .arc-tier-section__icon {
    background: linear-gradient(135deg, #EEEDFE, #CECBF6);
    color: #534AB7;
}
.arc-tier-section--moi .arc-tier-section__count {
    color: #534AB7;
    border-color: #D7D2F0;
}

.arc-tier-section--da-xac-minh .arc-tier-section__header {
    background: linear-gradient(90deg, #ebf8f3 0%, #fafefc 100%);
    border-left-color: #0F6E56;
}
.arc-tier-section--da-xac-minh .arc-tier-section__icon {
    background: #E0F5EE;
    color: #0F6E56;
}
.arc-tier-section--da-xac-minh .arc-tier-section__count {
    color: #0F6E56;
    border-color: #B8E0D1;
}

.arc-tier-section--dang-tin-cay .arc-tier-section__header {
    background: linear-gradient(90deg, #ecf3fc 0%, #fafcfe 100%);
    border-left-color: #185FA5;
}
.arc-tier-section--dang-tin-cay .arc-tier-section__icon {
    background: #E6F1FB;
    color: #185FA5;
}
.arc-tier-section--dang-tin-cay .arc-tier-section__count {
    color: #185FA5;
    border-color: #C3DAF0;
}

.arc-tier-section--chua-xac-minh .arc-tier-section__header {
    background: linear-gradient(90deg, #fef7ea 0%, #fefdfa 100%);
    border-left-color: #BA7517;
}
.arc-tier-section--chua-xac-minh .arc-tier-section__icon {
    background: #FEF4E4;
    color: #BA7517;
}
.arc-tier-section--chua-xac-minh .arc-tier-section__count {
    color: #BA7517;
    border-color: #F0D9A8;
}

.arc-tier-section--canh-bao-scam .arc-tier-section__header {
    background: linear-gradient(90deg, #fceeee 0%, #fefafa 100%);
    border-left-color: #A32D2D;
}
.arc-tier-section--canh-bao-scam .arc-tier-section__icon {
    background: #FBE8E8;
    color: #A32D2D;
}
.arc-tier-section--canh-bao-scam .arc-tier-section__count {
    color: #A32D2D;
    border-color: #F0C3C3;
}

/* Apps list inside section — reuses .arc-app-card styles */
.arc-tier-section__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Load-more button row */
.arc-tier-section__loadmore {
    text-align: center;
    margin-top: 12px;
}
.arc-tier-section__loadmore-btn {
    background: #fff;
    border: 1.5px solid #E0DCF0;
    color: #534AB7;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 24px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, background .15s, transform .12s;
}
.arc-tier-section__loadmore-btn:hover:not(:disabled) {
    border-color: #534AB7;
    background: #faf9ff;
    transform: translateY(-1px);
}
.arc-tier-section__loadmore-btn:disabled {
    color: #888;
    cursor: default;
    border-color: #eae7f3;
    background: #fafafa;
}
.arc-tier-section__loadmore-count {
    font-weight: 400;
    color: #999;
    margin-left: 4px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .arc-tier-section {
        margin-bottom: 24px;
    }
    .arc-tier-section__header {
        padding: 11px 14px;
        border-left-width: 3px;
    }
    .arc-tier-section__title {
        font-size: 15.5px;
        gap: 9px;
    }
    .arc-tier-section__icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .arc-tier-section__count {
        font-size: 11px;
        padding: 3px 8px;
    }
    .arc-tier-section__loadmore-btn {
        padding: 9px 18px;
        font-size: 12.5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AD SLOTS — custom HTML/ad code injection points. Admin pastes
   content via Apps → 📣 Quảng cáo. Content is rendered as-is inside
   .arc-ad-slot container. CSS only provides spacing & safety (max-width).
   ═══════════════════════════════════════════════════════════════════ */
.arc-ad-slot {
    margin: 20px 0;
    max-width: 100%;
    overflow: hidden;
    /* Reserve a tiny min-height so slots don't cause CLS if content
       loads async (AdSense, lazy images). Admin content overrides. */
    min-height: 1px;
}

/* Common layout for banner images pasted directly */
.arc-ad-slot img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* AdSense ins element — force responsive width */
.arc-ad-slot ins.adsbygoogle {
    display: block !important;
    max-width: 100%;
}

/* Optional "Quảng cáo" label above slots for FTC compliance.
   Admin can add this via HTML in each slot if desired. */
.arc-ad-slot__label {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Visual variants per location — tighter margins for single-app top
   (right under breadcrumb) so it doesn't look like a huge gap. */
.arc-ad-slot--single_app_top {
    margin: 12px 0 18px;
}
.arc-ad-slot--single_app_after_comments {
    margin: 24px 0;
}
.arc-ad-slot--home_before_apps {
    margin: 20px 0 24px;
}

/* Mobile: slightly tighter */
@media (max-width: 600px) {
    .arc-ad-slot {
        margin: 16px 0;
    }
}


/* ═══════════════════════════════════════════════════════════
 * TOAST — error variant for min-length & similar validation
 * Uses the existing .arc-toast base styles defined earlier in
 * this file. Only the color + icon differ for the error state.
 * ═══════════════════════════════════════════════════════════ */
.arc-toast--error {
    background: #DC2626 !important;
    color: #fff !important;
    font-weight: 500;
}
.arc-toast--error::before {
    content: "⚠️ ";
    margin-right: 4px;
}
.arc-toast--success {
    background: #059669 !important;
    color: #fff !important;
}
.arc-toast--success::before {
    content: "✓ ";
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════
 * ADMIN LINK IN COMMENT
 * Clickable URLs in admin comments. Regular users' URLs stay
 * as plain escaped text.
 * ═══════════════════════════════════════════════════════════ */
.arc-comment__content .arc-link,
.arc-reply__body    .arc-link {
    color: #534AB7;
    text-decoration: underline;
    word-break: break-word;
    transition: color .15s ease;
}
.arc-comment__content .arc-link:hover,
.arc-reply__body    .arc-link:hover {
    color: #3F38A0;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
 * META EXTRAS (App cùng ổ + Lịch sử tên)
 * Inline admin-editable rows placed right after Contact card.
 * ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
 * (DEPRECATED — kept as a breadcrumb)
 * Prior to gộp-into-contact-card refactor, these rules styled a
 * separate panel for "App cùng ổ" + "Lịch sử tên". The panel was
 * merged into .arc-contact-section, so everything below is dead
 * CSS and the declarations have been stripped. The empty
 * selectors remain only to avoid churn in line numbers for any
 * diff tool pointed at older versions of this file.
 * ═══════════════════════════════════════════════════════════ */

/* Related app chips (clickable) */
.arc-related-app-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.arc-related-app-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F5F5FA;
    border: 1px solid #e0e0e8;
    border-radius: 20px;
    padding: 4px 12px 4px 4px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: all .15s ease;
}
.arc-related-app-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.arc-related-app-chip:hover {
    background: #EDE9FE;
    border-color: #534AB7;
    color: #534AB7;
    transform: translateY(-1px);
}

/* Name history lines */
.arc-history-line {
    font-size: 14px;
    color: #333;
    margin: 4px 0;
    line-height: 1.6;
}
.arc-history-label {
    color: #666;
    font-size: 13px;
    margin-right: 4px;
}
.arc-history-link {
    color: #534AB7;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #534AB7;
}
.arc-history-link:hover {
    color: #3F38A0;
    border-bottom-style: solid;
}
.arc-history-name {
    color: #333;
    font-weight: 600;
}

/* App picker (autocomplete dropdown) */
.arc-app-picker {
    position: relative;
    margin-bottom: 10px;
}
.arc-app-picker__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.arc-app-picker__input:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83,74,183,.1);
}
.arc-app-picker__results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.arc-app-picker__results.is-open { display: block; }
.arc-app-picker__result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    color: #333;
    transition: background .1s;
}
.arc-app-picker__result:last-child { border-bottom: none; }
.arc-app-picker__result:hover,
.arc-app-picker__result.is-active {
    background: #F5F5FA;
    color: #534AB7;
}
.arc-app-picker__result img {
    width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.arc-app-picker__result--empty {
    color: #aaa;
    font-style: italic;
    padding: 12px;
    text-align: center;
}

/* Selected apps list (inside editor) */
.arc-app-picker__selected {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.arc-app-picker__selected li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EDE9FE;
    border: 1px solid #C4B5FD;
    border-radius: 16px;
    padding: 3px 6px 3px 4px;
    font-size: 13px;
}
.arc-app-picker__selected img {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
}
.arc-app-picker__selected span { color: #3F38A0; font-weight: 500; }
.arc-app-picker__remove {
    background: none;
    border: none;
    color: #7C3AED;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 2px;
}
.arc-app-picker__remove:hover { color: #C82333; }

/* Single-selection variants (name history prev/next) */
.arc-app-picker__selected--single { margin-top: 6px; }
.arc-app-picker__selected--single li { background: #FFF7ED; border-color: #FDBA74; }
.arc-app-picker__selected--single span { color: #9A3412; }
.arc-app-picker__selected--single .arc-app-picker__remove { color: #EA580C; }

/* History slot (previous / next name) */
.arc-history-slot {
    background: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.arc-history-slot__label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}
.arc-history-slot input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 8px;
    background: #fff;
}
.arc-history-slot input[type="text"]:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83,74,183,.1);
}

@media (max-width: 560px) {
    .arc-related-app-chip { font-size: 12px; padding: 3px 10px 3px 4px; }
}

/* ═══════════════════════════════════════════════════════════
 * CONTACT EXTRAS (App cùng ổ + Lịch sử tên) — inside the
 * contact card so the whole ownership block is one container.
 * Kept borderless so the card reads as ONE unified panel;
 * rows are separated by vertical spacing only.
 * ═══════════════════════════════════════════════════════════ */
.arc-contact-extras {
    margin-top: 14px;
}
.arc-contact-extras__row {
    padding: 10px 0 4px;
}
.arc-contact-extras__row:first-child { padding-top: 0; }
.arc-contact-extras__row:last-child  { padding-bottom: 0; }
.arc-contact-extras__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.arc-contact-extras__label {
    font-weight: 600;
    font-size: 13px;
    color: #555;
}
.arc-contact-extras__empty {
    color: #aaa;
    font-size: 13px;
    font-style: italic;
}
.arc-contact-extras__hint {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.arc-contact-extras__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Nuke the old standalone .arc-meta-extras styling — markup no
   longer uses that class, but any cached AJAX fragment that
   accidentally references it should render transparently now. */
.arc-meta-extras {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
 * SEARCH — header icon, overlay, results page
 * ═══════════════════════════════════════════════════════════ */
.arc-search-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Overlay modal */
.arc-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
    display: none;
    padding-top: 60px;
    overflow-y: auto;
}
.arc-search-overlay.is-open { display: block; }
.arc-search-overlay__inner {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: arcSearchIn .2s ease-out;
}
@keyframes arcSearchIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.arc-search-overlay__form {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.arc-search-overlay__icon {
    width: 22px; height: 22px;
    color: #888;
    flex-shrink: 0;
}
.arc-search-overlay__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 6px 0;
    background: transparent;
    color: #1a1a1a;
    min-width: 0;
}
.arc-search-overlay__input::placeholder { color: #aaa; }
.arc-search-overlay__close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}
.arc-search-overlay__close:hover { color: #333; }

.arc-search-overlay__results {
    margin-top: 12px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.arc-search-overlay__hint,
.arc-search-overlay__loading,
.arc-search-overlay__empty {
    color: #888;
    font-size: 14px;
    text-align: center;
    padding: 20px 10px;
    margin: 0;
}
.arc-search-overlay__loading::after {
    content: '…';
    display: inline-block;
    animation: arcSearchDots 1.4s infinite;
}
@keyframes arcSearchDots {
    0%,20% { content: '.'; }
    40%    { content: '..'; }
    60%,100%{ content: '...'; }
}

.arc-search-preview-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.arc-search-preview-item {
    padding: 10px 4px;
    border-bottom: 1px solid #f0f0f0;
}
.arc-search-preview-item:last-child { border-bottom: none; }
.arc-search-preview-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background .1s;
}
.arc-search-preview-item a:hover { background: #F5F5FA; }
.arc-search-preview-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #888;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.arc-search-preview-item__meta img {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}
.arc-search-preview-item__author { color: #333; font-weight: 600; }
.arc-search-preview-item__app    { color: #534AB7; }
.arc-search-preview-item__snippet {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.arc-search-preview-item__snippet mark {
    background: #FEF08A;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* ── Two-section search preview (Topics + Replies) ── */
.arc-search-preview-group + .arc-search-preview-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ECECEC;
}
.arc-search-preview-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.arc-search-preview-group__label {
    color: #777;
    font-weight: 700;
}
.arc-search-preview-group__count {
    background: #F2F2F7;
    color: #534AB7;
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 10.5px;
}

/* Topic items have a prominent title */
.arc-search-preview-item__title {
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1.35;
}
.arc-search-preview-item__title mark {
    background: #FEF08A;
    padding: 0 2px;
    border-radius: 2px;
}
.arc-search-preview-item--topic a:hover .arc-search-preview-item__title {
    color: #534AB7;
}

/* Reply items show parent topic context */
.arc-search-preview-item--reply .arc-search-preview-item__meta em {
    color: #534AB7;
    font-style: normal;
    font-weight: 500;
}

.arc-search-preview-more {
    padding: 12px;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 4px;
}
.arc-search-preview-more a {
    color: #534AB7;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}
.arc-search-preview-more a:hover { text-decoration: underline; }

/* ─── Full results page ─── */
.arc-search-page { padding-top: 20px; }
.arc-search-header {
    background: linear-gradient(135deg, #F5F5FA 0%, #EDE9FE 100%);
    border-radius: 12px;
    padding: 24px 20px;
    margin-bottom: 20px;
}
.arc-search-header h1 {
    font-size: 24px;
    margin: 0 0 6px;
    color: #222;
}
.arc-search-header__meta {
    color: #555;
    font-size: 14px;
    margin: 0 0 14px;
}
.arc-search-header__meta em { font-style: normal; color: #222; }
.arc-search-form {
    display: flex;
    max-width: 500px;
    gap: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 4px;
}
.arc-search-form__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 15px;
    outline: none;
    min-width: 0;
}
.arc-search-form__btn {
    background: #534AB7;
    color: #fff;
    border: none;
    padding: 0 22px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.arc-search-form__btn:hover { background: #3F38A0; }

.arc-search-empty {
    text-align: center;
    padding: 50px 20px;
    color: #666;
}

.arc-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}
.arc-search-result {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all .15s;
}
.arc-search-result:hover {
    border-color: #534AB7;
    box-shadow: 0 2px 8px rgba(83,74,183,.08);
}
.arc-search-result__link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 14px 16px;
}
.arc-search-result__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.arc-search-result__avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.arc-search-result__meta {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.arc-search-result__meta strong { color: #222; }
.arc-search-result__meta em { font-style: normal; color: #534AB7; font-weight: 600; }
.arc-search-result__sep { color: #bbb; }
.arc-search-result__snippet {
    font-size: 14.5px;
    line-height: 1.6;
    color: #333;
}
.arc-search-result__snippet mark {
    background: #FEF08A;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 600;
    color: #1a1a1a;
}

.arc-search-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
    padding-bottom: 20px;
}
.arc-search-pager a {
    color: #534AB7;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all .15s;
}
.arc-search-pager a:hover {
    border-color: #534AB7;
    background: #F5F5FA;
}
.arc-search-pager__info {
    color: #666;
    font-size: 14px;
}

/* Jump-to-comment highlight animation */
.arc-comment--jump-highlight {
    animation: arcJumpHighlight 3s ease-out;
}
@keyframes arcJumpHighlight {
    0%, 10%  { background: #FEF08A; }
    100%     { background: transparent; }
}

@media (max-width: 640px) {
    .arc-search-overlay { padding-top: 20px; }
    .arc-search-overlay__inner { margin: 0 10px; padding: 12px; }
    .arc-search-overlay__input { font-size: 16px; }
    .arc-search-header { padding: 18px 14px; }
    .arc-search-header h1 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════
 * Focus modal footer — image previews
 * Uploaded thumbnails sit above the input row with a remove
 * button overlay. Layout is enforced with !important because
 * older cached theme CSS may set footer to `flex-direction: row`
 * which would push the previews off to the side instead of
 * stacking them above the input — users saw the preview tile
 * floating to the right of the input, breaking the layout.
 * ═══════════════════════════════════════════════════════════ */
.arc-focus-modal__footer {
    flex-direction: column !important;
    align-items: stretch !important;
}
.arc-focus-modal__footer-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}
.arc-focus-modal__previews {
    display: none; /* toggled via JS when list non-empty */
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 0;
    width: 100%;
}
.arc-focus-modal__preview {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #f5f5f5;
    flex-shrink: 0;
}
.arc-focus-modal__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-focus-modal__preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-focus-modal__preview-remove:hover { background: rgba(220, 38, 38, 0.9); }

/* ════════════════════════════════════════════════════════════════
   HERO SECTION — Stats grid + CTA banner (replaces old gallery
   + loan pills horizontal row)
   ─────────────────────────────────────────────────────────────────
   Layout intent:
   - Desktop (≥901px): 2 columns at 1:1 ratio. Stats on the left,
     uploadable banner on the right.
   - Mobile (≤900px): Stack with stats first (info before action).
     The banner falls below so visitors who scrolled past the icon
     header still get the loan terms before being asked to download.
   ════════════════════════════════════════════════════════════════ */
.arc-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 900px) {
    .arc-hero {
        grid-template-columns: 1fr;
    }
}

/* ── LEFT: stats grid ─────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   Stats grid — Phương án A: Card unified
   ─────────────────────────────────────────────────────────────────
   6 stats nằm trong 1 card chung (background trắng), divider mảnh
   giữa các tile thay vì tile rời nhau trên nền xám. Lý do thay đổi:
   - Background xám #f4f5f9 cũ làm grid bị "tách" khỏi page → trông
     rời rạc với layout chính (page bg cũng xám/trắng).
   - 6 tile riêng biệt với border 1.5px → visual noise nhiều, 6
     đường viền cùng nổi → không có hierarchy.
   - Sau: 1 card trắng + divider 1px mảnh giữa tile → block đồng
     nhất, gọn gàng, không còn cảm giác tile rời nhau.
   ════════════════════════════════════════════════════════════════ */
.arc-hero__stats {
    /* Container giờ là 1 card trắng duy nhất, không phải khung
       chứa các tile rời. Border mảnh 0.5px thay vì rgba border tile. */
    background: #fff;
    border: 0.5px solid #ececec;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Gap = 0 để dùng border như divider, không phải khoảng trống. */
    gap: 0;
    position: relative;
    align-content: stretch;
    overflow: hidden;
}
/* Tile mới: minimal — không border riêng, chỉ divider mảnh ở phải/dưới
   để chia ô. Tile cuối row/col bỏ divider để khung trông đồng đều. */
.arc-hero__stats .arc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
    background: transparent;
    border: 0;
    /* Divider 1px mảnh cho tile bên phải + dưới */
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    padding: 16px 12px;
    transition: background .15s ease;
    cursor: default;
}
/* Bỏ divider phải cho tile cuối mỗi row (col 3, 6) */
.arc-hero__stats .arc-stat:nth-child(3n) {
    border-right: 0;
}
/* Bỏ divider dưới cho 3 tile row cuối (5, 6, 7 — vì tile 1 là edit btn?
   thực tế tile 1-6 là 6 stats → bỏ border-bottom cho 3 tile cuối) */
.arc-hero__stats .arc-stat:nth-last-child(-n+3) {
    border-bottom: 0;
}
/* Hover: subtle background mint, không lift transform mạnh như cũ.
   Card unified style không cần hover dramatic — user thường không
   click vào stats nên không cần affordance mạnh. */
.arc-hero__stats .arc-stat:hover,
.arc-hero__stats .arc-stat.is-active {
    background: #f6fdfa;
}
.arc-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    background: #E1F5EE;
    color: #0F6E56;
    transition: background-color .15s ease;
}
.arc-stat-icon i,
.arc-stat-icon svg {
    color: #0F6E56;
}
.arc-stat-body {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}
.arc-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
}
.arc-stat-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    word-break: break-word;
    padding: 0 4px;
}
.arc-stat-value--empty {
    color: #b8b8b8;
    font-weight: 500;
    font-size: 12px;
    font-style: normal;
}

/* Mobile (≤600px): 2-col grid, tile compact. */
@media (max-width: 600px) {
    .arc-hero__stats {
        grid-template-columns: 1fr 1fr;
        border-radius: 12px;
    }
    .arc-hero__stats .arc-stat {
        padding: 14px 8px;
        gap: 6px;
        /* Mobile reset divider: chỉ giữa cột (1n+1 không right border) */
        border-right: 1px solid #f0f0f0;
    }
    /* Bỏ border-right cho col 2 (tile 2,4,6 ở mobile 2-col) */
    .arc-hero__stats .arc-stat:nth-child(2n) {
        border-right: 0;
    }
    /* Reset border-right cho col 3 vì giờ là 2-col */
    .arc-hero__stats .arc-stat:nth-child(3n) {
        border-right: 1px solid #f0f0f0;
    }
    .arc-hero__stats .arc-stat:nth-child(2n) {
        border-right: 0 !important;
    }
    /* Bottom border: chỉ 2 tile cuối (5, 6) bỏ */
    .arc-hero__stats .arc-stat:nth-last-child(-n+3) {
        border-bottom: 1px solid #f0f0f0;
    }
    .arc-hero__stats .arc-stat:nth-last-child(-n+2) {
        border-bottom: 0;
    }
    .arc-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
        border-radius: 9px;
    }
    .arc-stat-value {
        font-size: 12px;
    }
    .arc-stat-label {
        font-size: 9px;
    }
}

/* Admin: small edit affordance in the corner of the stats card. */
.arc-hero__edit-stats {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(83, 74, 183, 0.1);
    color: #534AB7;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
}
.arc-hero__edit-stats:hover {
    background: rgba(83, 74, 183, 0.2);
}

/* ── RIGHT: CTA banner ─────────────────────────────────────── */
.arc-hero__cta {
    border-radius: 12px;
    color: #fff;
    /* Desktop: banner stretch fill chiều cao của row (= cao bằng
       stats column bên trái) → layout 2 cột cân đối, không có
       khoảng trắng dưới banner. Grid item default đã stretch nên
       chỉ cần height: 100% và min-height fallback.
       Mobile (<900px): hero chuyển 1 cột → banner đứng một mình,
       không có gì để align → dùng aspect-ratio 16/9 cho responsive
       size đẹp. */
    height: 100%;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    /* Gradient fallback khi admin chưa upload banner. Khi có ảnh
       (object-fit:cover) gradient bị che hoàn toàn, không lộ. */
    background: linear-gradient(135deg, #4A90E2 0%, #5DCAA5 100%);
}
@media (max-width: 900px) {
    .arc-hero__cta {
        /* Mobile: 1 cột, banner đứng riêng → dùng aspect-ratio cho
           size cân đối với chiều rộng container. */
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 180px;
    }
}
/* Banner image — full bề ngang container, fill chiều cao via
   object-fit cover. Render là <img> thật (không background-image)
   nên SEO đọc được alt + image lazyload work.
   Note: cover crop nhẹ ảnh để fill khung — chấp nhận trade-off
   để layout đẹp gọn không có dải trống. Admin nên upload ảnh
   với phần content quan trọng ở center vì 2 bên có thể bị cắt. */
.arc-hero__cta-img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
}
/* Strip trắng MỜ trong suốt đè lên cạnh dưới ảnh — đúng pattern
   vayplus. Nền rgba(255,255,255,0.55) để vẫn nhìn xuyên thấy ảnh
   phía sau (pattern glass-morphism). Position absolute bottom: 0
   → strip dính cạnh dưới banner, không đẩy ảnh lên trên. */
.arc-hero__cta-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px 20px;
    z-index: 2;
}
@media (max-width: 900px) {
    .arc-hero__cta-actions {
        padding: 12px 14px;
        gap: 8px;
    }
}
/* arc-hero__cta-text bỏ — không còn text "Ứng dụng vay đáng tin cậy"
   nữa. Giữ rule rỗng để legacy data nếu có vẫn không broken. */
.arc-hero__cta-text { display: none; }
.arc-hero__btn {
    border: none;
    border-radius: 22px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.1s, opacity 0.15s;
}
.arc-hero__btn:active {
    transform: scale(0.97);
}
.arc-hero__btn--primary {
    background: #1D9E75;
    color: #fff;
    /* Bold text — CTA chính cần nổi bật rõ rệt so với "Tìm hiểu
       thêm" (secondary) → user mắt đi thẳng vào "Link Vay" trước. */
    font-weight: 700;
}
.arc-hero__btn--primary:hover {
    background: #168760;
}
.arc-hero__btn--secondary {
    background: #fff;
    color: #185FA5;
}
.arc-hero__btn--secondary:hover {
    background: #f0f0f0;
}
@media (max-width: 900px) {
    .arc-hero__btn {
        flex: 1;
        justify-content: center;
        padding: 9px 14px;
        font-size: 12px;
    }
}


/* Admin: discreet "edit banner image" link in the corner. */
.arc-hero__edit-banner {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
}
.arc-hero__edit-banner:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

/* ────────────────────────────────────────────────────────────
   App header — publisher subtitle + stat pills (views, comments)
   ────────────────────────────────────────────────────────────
   Sits between the title and the rating row. Styled subtly so it
   doesn't compete visually with the title or the rating block,
   but provides enough information density that visitors landing
   on the page get an at-a-glance read of who publishes the app
   and how active the community discussion is.
   ──────────────────────────────────────────────────────────── */
.arc-app-header__publisher {
    font-size: 13px;
    color: #666;
    margin: 4px 0 6px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.arc-app-header__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--arc-text-secondary);
    font-size: 13px;
    line-height: 1.2;
}
/* SVG icons trong stat — center vertical bằng flex (parent đã
   align-items: center) thay vì vertical-align:-2px inline. Bỏ
   margin-right cũ vì đã có gap ở parent. */
.arc-app-header__stat svg {
    flex-shrink: 0;
}
/* Bình luận button: giữ chức năng click jump-to-comments nhưng
   không dùng màu tím nổi bật nữa — đồng tông với view count.
   Hover/active vẫn có affordance nhẹ để báo đây là button. */
.arc-app-header__stat--btn {
    background: none;
    border: none;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: var(--arc-text-secondary);
    transition: background 0.15s, color 0.15s;
}
.arc-app-header__stat--btn:hover {
    background: rgba(15, 110, 86, 0.08);
    color: #0F6E56;
}
.arc-app-header__stat--btn:active {
    transform: scale(0.97);
}

/* ════════════════════════════════════════════════════════════════
   App info / download gate page (/app/{slug}/info/)
   ─────────────────────────────────────────────────────────────────
   2-column layout: app summary + why-trust copy on the left,
   action panel (login wall OR platform picker) on the right.
   Mobile collapses to single column.
   ════════════════════════════════════════════════════════════════ */
.arc-info-page {
    padding-top: 16px;
    padding-bottom: 40px;
}
.arc-info-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .arc-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.arc-info-card {
    background: #fff;
    border: 0.5px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    padding: 24px;
}
@media (max-width: 600px) {
    .arc-info-card {
        padding: 18px;
    }
}

/* ── Left column: summary + why-trust ────────────────────── */
.arc-info-headline {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 18px;
}
.arc-info-headline__app {
    color: #534AB7;
}
@media (max-width: 600px) {
    .arc-info-headline {
        font-size: 22px;
    }
}

.arc-info-app {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #f7f7f7;
    border-radius: 10px;
    margin-bottom: 20px;
}
.arc-info-app__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    overflow: hidden;
}
.arc-info-app__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.arc-info-app__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
}
.arc-info-app__rating .arc-stars {
    font-size: 16px;
}
.arc-info-app__count {
    color: #888;
    font-size: 12px;
}
.arc-info-app__stat {
    font-size: 13px;
    color: #555;
}
.arc-info-app__stat-label {
    color: #888;
    margin-right: 4px;
}
.arc-info-app__stat-value {
    color: #1a1a1a;
    font-weight: 500;
}
/* Empty state khi app chưa có data loan_info — hint nhẹ. */
.arc-info-app__stat-empty {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin-top: 4px;
}
.arc-info-app__stat-empty a {
    color: #534AB7;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.arc-info-disclaimer {
    background: #FFF8E1;
    border-left: 3px solid #FAC775;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #5C3F0B;
    margin-bottom: 22px;
}
.arc-info-disclaimer strong {
    color: #4A2F00;
}

.arc-info-why__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
}
.arc-info-why__list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.arc-info-why__list li {
    padding: 8px 0 8px 26px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.arc-info-why__list li:last-child { border-bottom: none; }
.arc-info-why__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    color: #1D9E75;
    font-weight: 600;
}
.arc-info-why__back {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: #534AB7;
    text-decoration: none;
    font-weight: 500;
}
.arc-info-why__back:hover { text-decoration: underline; }

/* ── Right column: action panel ──────────────────────────── */
.arc-info-card--action {
    align-self: start;
    position: sticky;
    top: 80px;
}
@media (max-width: 900px) {
    .arc-info-card--action {
        position: static;
    }
}

.arc-info-gate {
    text-align: center;
    padding: 12px 0;
}
.arc-info-gate__icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.arc-info-gate__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #1a1a1a;
}
.arc-info-gate__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 18px;
}
.arc-info-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.arc-info-gate__note {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin: 0;
}

.arc-info-form__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1a1a1a;
}
.arc-info-form__desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 16px;
}
.arc-info-form__warn {
    font-size: 11.5px;
    color: #888;
    line-height: 1.5;
    margin: 12px 0 0;
    text-align: center;
}

.arc-info-platforms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.arc-info-platform {
    display: block;
    cursor: pointer;
    position: relative;
}
.arc-info-platform input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.arc-info-platform__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.arc-info-platform input:checked + .arc-info-platform__inner {
    border-color: var(--platform-color, #534AB7);
    background: rgba(83, 74, 183, 0.04);
}
.arc-info-platform__icon {
    font-size: 22px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-info-platform__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.arc-info-platform__text strong {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.3;
}
.arc-info-platform__text small {
    font-size: 11.5px;
    color: #888;
    line-height: 1.4;
    margin-top: 1px;
}
.arc-info-platform__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--platform-color, #534AB7);
    color: #fff;
    font-size: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-info-platform input:checked + .arc-info-platform__inner .arc-info-platform__check {
    display: flex;
}

/* Link variant — direct <a> không qua radio. Dùng khi platform
   picker là click-to-navigate thẳng (SEO-friendly) thay vì form
   submit. Hover state mạnh hơn radio variant vì link tương tác
   nhanh hơn select+submit 2 step. */
.arc-info-platforms--links {
    gap: 10px;
}
.arc-info-platform-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease;
}
.arc-info-platform-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-1px);
}
.arc-info-platform-link:hover .arc-info-platform__inner {
    border-color: var(--platform-color, #534AB7);
    background: rgba(83, 74, 183, 0.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.arc-info-platform-link:active {
    transform: translateY(0);
}
.arc-info-platform__arrow {
    font-size: 18px;
    color: var(--platform-color, #534AB7);
    flex-shrink: 0;
    font-weight: 600;
    transition: transform 0.15s ease;
}
.arc-info-platform-link:hover .arc-info-platform__arrow {
    transform: translateX(3px);
}

.arc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}
.arc-info-btn:active { transform: scale(0.98); }
.arc-info-btn--primary {
    background: #DC1A1A;
    color: #fff;
}
.arc-info-btn--primary:hover { background: #BE1414; }
.arc-info-btn--secondary {
    background: transparent;
    color: #534AB7;
    border: 1.5px solid #534AB7;
}
.arc-info-btn--secondary:hover {
    background: rgba(83, 74, 183, 0.05);
}
.arc-info-btn--continue {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
}
.arc-info-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   Detail info table (vayplus-style qualifying criteria)
   ─────────────────────────────────────────────────────────────────
   Sits between the hero card and the 2-column intro/comments
   layout. Renders as a 2-column tabular list — label on the left,
   value on the right — like the standard "Thông tin" panel on
   competitor sites (vayplus, redbag, etc).
   Mobile collapses each row to a stacked label-over-value layout
   so the value text doesn't get squashed into a tiny column.
   ════════════════════════════════════════════════════════════════ */
.arc-detail-info {
    background: #fff;
    border: 0.5px solid var(--arc-border, #e5e5e5);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
}
@media (max-width: 600px) {
    .arc-detail-info {
        padding: 16px 18px;
    }
}
.arc-detail-info__title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.arc-detail-info__table {
    display: flex;
    flex-direction: column;
}
.arc-detail-info__row {
    display: grid;
    /* Cột label CỐ ĐỊNH 240px → mọi row có value bắt đầu ở cùng
       vị trí X → tạo cảm giác bảng đều như trong template chuẩn
       (vayplus, redbag). Không dùng max-content/auto vì sẽ làm
       value cell bắt đầu ở X khác nhau theo từng row → lộn xộn. */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    /* align-items: center cho cả label + value: text 2 cột nằm
       ở giữa row theo trục dọc. Trước có align-items: center với
       align-self: center forced → đã ổn cho row label 1 dòng.
       Còn label wrap 2 dòng → tự center theo chiều cao label.
       Giữ center vì là common case đẹp nhất. */
    align-items: center;
}
.arc-detail-info__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    /* Label được phép wrap khi text quá dài (240px). Hiếm xảy ra
       với labels của plugin (đa số <30 ký tự) nhưng để fallback. */
}
.arc-detail-info__value {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.55;
    /* Preserve line breaks pasted by admin so multi-line copy
       (e.g. "Yêu cầu thu nhập:\n- Có nguồn thu ổn định\n- ...")
       renders as written without manual <br> tags. */
    white-space: pre-line;
    text-align: left;
    /* Min-height = icon size (28px) để cell value cao bằng cell
       label → khi grid align-items: center, text 2 cell sẽ nằm
       trên cùng đường ngang (cùng vertical center). Trước đây
       cell value chỉ cao bằng text (~22px) nên center của 2
       cell khác nhau → text label và text value lệch nhau dù
       cùng align-items: center. */
    min-height: 28px;
    display: flex;
    align-items: center;
}
.arc-detail-info__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #f0f0f5;
    color: #534AB7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-detail-info__icon i {
    font-size: 14px;
}
.arc-detail-info__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
@media (max-width: 600px) {
    .arc-detail-info__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }
}

/* ── Sub-section "Đánh giá chi tiết" gộp trong card detail ──
   Phương án 3: nội dung post (the_content()) render dưới bảng
   thông số, ngăn cách bằng border-top dày tạo cảm giác 2 phần
   tách biệt rõ trong cùng 1 card. */
.arc-detail-info__content {
    /* Border dày phân khúc — cùng style với .arc-pub-card__section
       để 2 sub-section trong card đồng nhất visual rhythm. */
    margin-top: 24px;
    padding-top: 24px;
    border-top: 4px solid #f6f6f9;
}
.arc-detail-info__content-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}
.arc-detail-info__content-title svg {
    color: #534AB7;
    flex-shrink: 0;
}
/* Overrides cho .arc-intro-text khi nó nằm trong card detail
   (parent đã có padding/border riêng, không cần margin riêng). */
.arc-detail-info__content .arc-intro-text {
    margin: 0;
}

/* ── Loan process — 4 bước đăng ký vay ──────────────────────
   Design copy từ plugin mar-cards module process_steps:
   - Horizontal layout: 4 step trên 1 hàng (desktop)
   - Vòng tròn lớn 96px chứa số (default) hoặc icon (active)
   - Đường kẻ chấm nối các vòng tròn
   - Auto-rotate: step active đổi mỗi 4s
   - Step active: ring vàng + icon + title xanh BungApp
   - Mobile: stack dọc, vòng tròn bên trái + nội dung phải
   - Dot indicators ở dưới */

.arc-loan-process {
    /* Override default content section padding for full-width
       layout (timeline + dots cần chiều ngang). */
    text-align: center;
}

.arc-loan-process__steps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    counter-reset: process-step;
    gap: 0;
}

.arc-loan-process__step {
    flex: 1;
    max-width: 250px;
    position: relative;
    padding: 0 8px;
    cursor: pointer;
    text-align: center;
}

/* Đường kẻ chấm nối các vòng tròn — vẽ bằng pseudo-element trên
   step, đặt absolute ở vị trí trung tâm vòng tròn (top: 48px =
   nửa chiều cao circle 96px). */
.arc-loan-process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48px;
    left: calc(50% + 56px);
    right: calc(-50% + 56px);
    height: 0;
    border-top: 2px dashed #c5d0dc;
    z-index: 0;
}

.arc-loan-process__circle-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    width: 96px;
    height: 96px;
    z-index: 1;
}

/* Active ring — render bằng ::before, hiện ra khi .is-active.
   Ring rộng hơn circle 18px → tạo viền 9px xung quanh circle. */
.arc-loan-process__circle-wrap::before {
    content: '';
    position: absolute;
    top: -9px;
    left: -9px;
    right: -9px;
    bottom: -9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a017 0%, #f0c040 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.arc-loan-process__circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #E1F5EE;
    color: #0F6E56;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
    position: relative;
    z-index: 1;
}

.arc-loan-process__num {
    font-size: 36px;
    font-weight: 700;
    color: #0F6E56;
    line-height: 1;
    transition: opacity 0.3s ease;
}

.arc-loan-process__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    color: #0F6E56;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Active state: ring xuất hiện, circle trắng, số ẩn, icon hiện */
.arc-loan-process__step.is-active .arc-loan-process__circle-wrap::before {
    opacity: 1;
}
.arc-loan-process__step.is-active .arc-loan-process__circle {
    background: #ffffff;
}
.arc-loan-process__step.is-active .arc-loan-process__num {
    opacity: 0;
}
.arc-loan-process__step.is-active .arc-loan-process__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.arc-loan-process__step.is-active .arc-loan-process__title {
    color: #0F6E56;
}

.arc-loan-process__title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.arc-loan-process__desc {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.55;
}

/* Dot indicators — 4 chấm dưới timeline, chấm tương ứng với
   step active được fill xanh BungApp + scale lớn hơn. */
.arc-loan-process__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.arc-loan-process__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d5dd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.arc-loan-process__dot.is-active {
    background: #0F6E56;
    transform: scale(1.2);
}

/* Mobile: stack dọc, mỗi step thành horizontal layout
   (circle bên trái, nội dung bên phải). Đường kẻ chấm chuyển
   thành dọc nối các circle. */
@media (max-width: 700px) {
    .arc-loan-process__steps {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .arc-loan-process__step {
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
        padding: 12px 0;
    }
    .arc-loan-process__step:not(:last-child)::after {
        /* Đổi đường kẻ chấm sang dọc trên mobile */
        top: 80px;
        left: 35px;
        right: auto;
        bottom: -12px;
        width: 0;
        height: auto;
        border-top: none;
        border-left: 2px dashed #c5d0dc;
    }
    .arc-loan-process__circle-wrap {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        margin: 0;
    }
    .arc-loan-process__circle-wrap::before {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
    }
    .arc-loan-process__circle {
        width: 64px;
        height: 64px;
    }
    .arc-loan-process__num {
        font-size: 26px;
    }
    .arc-loan-process__icon svg {
        width: 22px;
        height: 22px;
    }
    .arc-loan-process__body {
        flex: 1;
        padding-top: 8px;
    }
    .arc-loan-process__title {
        font-size: 14px;
    }
    .arc-loan-process__desc {
        font-size: 12.5px;
    }
}

/* ── Monthly rate row — special inline layout ──────────────
   Lãi suất tháng: render 2 chỉ số (năm + tháng) cạnh nhau
   với separator "·" và icon "?" tooltip cảnh báo.
   
   Critical: KHÔNG dùng transform translateY trên bất kỳ child
   nào. .arc-detail-info__value parent có line-height 1.6 nên
   .arc-mr-val cần INHERIT mà không override — như vậy bên
   trong tự align baseline với label cột trái không bị lệch.
   align-items: baseline cho span text, icon position bằng
   margin tự nhiên thay vì transform. */
.arc-mr-val {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    /* Override pre-line của parent vì content inline không cần. */
    white-space: normal;
    /* line-height + font-size INHERIT từ .arc-detail-info__value
       (14px / 1.6) — không set lại để mọi span con cùng baseline. */
}
.arc-mr-year {
    color: #0F6E56;
    font-weight: 700;
}
.arc-mr-sep {
    color: #b8b8b8;
    font-weight: 400;
    /* Không transform — dấu "·" tự nằm đúng baseline với text. */
}
.arc-mr-month {
    color: #555;
    font-weight: 500;
}
.arc-mr-info {
    /* align-self: center cần thiết vì baseline alignment trong
       parent flex sẽ kéo button lên (baseline = chỗ đáy chữ),
       còn icon SVG là block element không có baseline rõ ràng. */
    align-self: center;
    background: rgba(15, 110, 86, 0.08);
    border: none;
    color: #0F6E56;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    padding: 0;
    margin-left: 2px;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.arc-mr-info:hover,
.arc-mr-info:focus {
    background: #0F6E56;
    color: #fff;
    outline: none;
}
.arc-mr-info svg {
    width: 12px;
    height: 12px;
}
/* Tooltip dùng pseudo-element ::after — không cần JS. Hover/focus/
   tap đều hiện. Position absolute relative to button. */
.arc-mr-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #2d3a4f;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 6px;
    width: max-content;
    max-width: 280px;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 100;
}
/* Mũi tên nhỏ chỉ xuống button */
.arc-mr-info::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #2d3a4f;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 101;
}
.arc-mr-info:hover::after,
.arc-mr-info:hover::before,
.arc-mr-info:focus::after,
.arc-mr-info:focus::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Mobile: tooltip đặt full-width tránh tràn màn hình */
@media (max-width: 600px) {
    .arc-mr-info::after {
        max-width: 240px;
        font-size: 11px;
    }
}
.arc-detail-info__edit {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 12px;
    background: rgba(83, 74, 183, 0.08);
    color: #534AB7;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.arc-detail-info__edit:hover {
    background: rgba(83, 74, 183, 0.15);
    color: #534AB7;
}

/* ────────────────────────────────────────────────────────────
   Detail info — row icon (Font Awesome inline before label text)
   Plus title icon alignment on the section heading.
   ──────────────────────────────────────────────────────────── */
.arc-detail-info__title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.arc-detail-info__title i {
    color: #534AB7;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .arc-detail-info__icon { width: 26px; height: 26px; }
    .arc-detail-info__icon i { font-size: 13px; }
}

/* ────────────────────────────────────────────────────────────
   Hero stat icon — FA <i> tag rendering inside each tile.
   Color picks up the icon library's currentColor cascade.
   Khi tile hover/active, icon vẫn giữ xanh đậm (icon nằm trên
   nền trắng nên tương phản tốt). Default: xanh BungApp.
   ──────────────────────────────────────────────────────────── */
.arc-stat-icon i {
    font-size: 18px;
    color: #0F6E56;
}
.arc-hero__stats .arc-stat:hover .arc-stat-icon i,
.arc-hero__stats .arc-stat.is-active .arc-stat-icon i,
.arc-hero__stats .arc-stat:focus-within .arc-stat-icon i {
    color: #0F6E56;
}

/* ────────────────────────────────────────────────────────────
   Single admin "Edit app" button — replaces all the inline
   ✏️ Sửa pencils that used to clutter the public page. Click
   takes admin straight to wp-admin/post.php for the canonical
   edit experience.
   ──────────────────────────────────────────────────────────── */
.arc-app-header { position: relative; }
.arc-admin-edit-app {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    color: #534AB7;
    border: 1.5px solid #534AB7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    z-index: 5;
}
.arc-admin-edit-app:hover {
    background: #534AB7;
    color: #fff;
}
.arc-admin-edit-app i {
    font-size: 12px;
}
@media (max-width: 600px) {
    .arc-admin-edit-app {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Publisher card — refined design with sectioned layout, FA row
   icons, dividers between rows, and vertically-centered alignment.
   Replaces the previous flat 2-column label/value list which felt
   too plain for a primary identity card.
   ────────────────────────────────────────────────────────────── */
.arc-pub-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 0;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* ── Header (logo + app name + rating stars) ──────────────── */
.arc-pub-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    /* Subtle accent gradient distinguishes the identity block from
       the data sections below without being loud. */
    background: linear-gradient(180deg, #fafaff 0%, #ffffff 100%);
    border-bottom: 1px solid #f0f0f0;
}
.arc-pub-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.arc-pub-card__id {
    flex: 1;
    min-width: 0;
}
.arc-pub-card__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.arc-pub-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.arc-pub-card__rating i {
    font-size: 12px;
    color: #FFA800;
}
.arc-pub-card__star--off {
    color: #e0e0e0 !important;
}
.arc-pub-card__score {
    margin-left: 6px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ── Section (heading + rows) ─────────────────────────────── */
.arc-pub-card__section {
    padding: 0 18px;
}
.arc-pub-card__section + .arc-pub-card__section {
    /* Stronger separator between the contact section and the
       Google Play section so they read as two distinct blocks. */
    border-top: 4px solid #f6f6f9;
    padding-top: 6px;
}
.arc-pub-card__section:last-child {
    padding-bottom: 14px;
}
.arc-pub-card__section-title {
    margin: 14px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #534AB7;
}

/* ── Rows (icon + label + value) ──────────────────────────── */
.arc-pub-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.arc-pub-card__row {
    display: grid;
    /* 3 columns: icon (28px) + label (90px) + value (flex).
       Centre-aligned vertically so single-line values sit on the
       same baseline as their icon, while multi-line values stay
       balanced within the row. */
    grid-template-columns: 28px 90px 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    font-size: 13px;
    line-height: 1.45;
}
.arc-pub-card__row:last-child {
    border-bottom: none;
}
.arc-pub-card__row-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f0f0fa;
    color: #534AB7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.arc-pub-card__row-icon i {
    font-size: 12px;
}
.arc-pub-card__label {
    color: #888;
    font-size: 12px;
    font-weight: 500;
}
.arc-pub-card__value {
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Dual platform table (Phương án 3 — semantic HTML5) ────
   <table> chuẩn semantic với <thead>, <tbody>, <th scope>, <td>,
   <caption> cho SEO + accessibility. Layout grid được giữ qua
   `display: grid` trên <table>, các <tr> contents qua
   `display: contents` (cho phép cell con grid trực tiếp dưới
   table grid container).
   - Google hiểu rõ row/column header relationship
   - Screen reader đọc "Phiên bản, Android: 2.9" thay vì lủng củng
   - Caption visually-hidden cho screen reader
   Section apps bỏ padding 18px của parent .arc-pub-card__section
   để bảng chiếm full chiều rộng card. Reclaim được 36px chiều
   rộng cho cell value. */
.arc-pub-card__section--apps {
    padding: 0 !important;
}
.arc-apps-table {
    /* Reset default table styling — chỉ dùng table cho semantic. */
    border-collapse: collapse;
    border-spacing: 0;
    /* Layout: grid 3 cột để giữ visual hiện tại. */
    display: grid;
    grid-template-columns: minmax(82px, 95px) minmax(0, 1fr) minmax(0, 1fr);
    border-top: 0.5px solid #e5e5e5;
    border-bottom: 0.5px solid #e5e5e5;
    background: #fff;
    font-size: 12.5px;
    width: 100%;
    box-sizing: border-box;
}
/* Caption visually hidden cho screen reader. Vẫn được Google index
   như text content (cải thiện ngữ cảnh bảng). */
.arc-apps-table__caption-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* <thead>, <tbody>, <tr> dùng display: contents để các cell con
   (<th>, <td>) trở thành grid items trực tiếp dưới table grid
   container. Trick HTML chuẩn cho table-as-grid. */
.arc-apps-table thead,
.arc-apps-table tbody,
.arc-apps-table tr {
    display: contents;
}
.arc-apps-table__head {
    padding: 9px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 0.5px solid #e5e5e5;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
    /* Reset default <th> alignment */
    text-align: left;
}
.arc-apps-table__head--title {
    background: #fafafa;
    color: #1a1a1a;
    border-right: 0.5px solid #ececec;
    font-size: 10.5px;
    letter-spacing: 0.4px;
}
.arc-apps-table__head--android {
    background: #E1F5EE;
    color: #0F6E56;
}
.arc-apps-table__head--ios {
    background: #f0f0f3;
    color: #444;
}
.arc-apps-table__head .arc-apps-table__icon {
    flex-shrink: 0;
}
.arc-apps-table__cell {
    padding: 9px 10px;
    border-bottom: 0.5px solid #ececec;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
    /* Cho phép wrap để giá trị dài như "Android 5.0 trở lên" hiện
       đầy đủ (xuống 2 dòng). Ngày tháng + dung lượng đủ ngắn để
       luôn 1 dòng trong sidebar full-width. */
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Reset default <td>/<th> alignment */
    text-align: left;
}
.arc-apps-table__cell--label {
    color: #666;
    font-weight: 500;
    font-size: 11.5px;
    background: #fafafa;
    border-right: 0.5px solid #ececec;
}
.arc-apps-table__cell--empty {
    color: #b8b8b8;
    font-weight: 400;
    text-align: center;
}
/* Row cuối: bỏ border-bottom của 3 cell trong row đó. Vì đây là
   grid không phải table, ta dùng :nth-last-child trick — 3 cell
   cuối cùng (label + android + ios của row last) đều cần bỏ. */
.arc-apps-table .arc-apps-table__cell:nth-last-child(-n+3) {
    border-bottom: none;
}

/* Solo mode: chỉ 1 platform — tận dụng không gian rộng để làm
   text to đẹp, padding thoáng, value căn giữa cột cho cảm giác
   thoải mái thay vì compact 2 cột. Label cột đầu vẫn căn trái
   để admin scan nhanh tên trường. */
.arc-apps-table--solo-android,
.arc-apps-table--solo-ios {
    /* Tăng width cột label nhẹ để cân với value lớn hơn. */
    grid-template-columns: minmax(100px, 110px) minmax(0, 1fr);
    font-size: 14px;
}
.arc-apps-table--solo-android .arc-apps-cell-ios,
.arc-apps-table--solo-android .arc-apps-table__head--ios {
    display: none;
}
.arc-apps-table--solo-ios .arc-apps-cell-android,
.arc-apps-table--solo-ios .arc-apps-table__head--android {
    display: none;
}
/* Header row solo: padding to + căn giữa platform + font lớn hơn. */
.arc-apps-table--solo-android .arc-apps-table__head,
.arc-apps-table--solo-ios .arc-apps-table__head {
    padding: 14px 14px;
    font-size: 12.5px;
    letter-spacing: 0.6px;
}
.arc-apps-table--solo-android .arc-apps-table__head--title,
.arc-apps-table--solo-ios .arc-apps-table__head--title {
    /* Title cell solo: 1 dòng đủ chỗ rồi nên không cần line-height
       2-line. Font tăng nhẹ. */
    font-size: 12px;
    line-height: 1.4;
}
.arc-apps-table--solo-android .arc-apps-table__head--android,
.arc-apps-table--solo-ios .arc-apps-table__head--ios {
    /* Header platform căn giữa + icon to hơn. */
    justify-content: center;
}
.arc-apps-table--solo-android .arc-apps-table__icon,
.arc-apps-table--solo-ios .arc-apps-table__icon {
    width: 16px;
    height: 16px;
}
/* Body cell solo: padding lớn + value căn giữa cột. */
.arc-apps-table--solo-android .arc-apps-table__cell,
.arc-apps-table--solo-ios .arc-apps-table__cell {
    padding: 13px 14px;
    font-size: 14px;
    line-height: 1.45;
}
.arc-apps-table--solo-android .arc-apps-table__cell--label,
.arc-apps-table--solo-ios .arc-apps-table__cell--label {
    /* Label vẫn căn trái cho dễ scan nhưng font tăng. */
    font-size: 13px;
    text-align: left;
}
.arc-apps-table--solo-android .arc-apps-cell-android,
.arc-apps-table--solo-ios .arc-apps-cell-ios {
    /* Value cột chính căn giữa cho thoáng. */
    text-align: center;
    font-weight: 600;
}

/* Mobile (≤500px): font hơi nhỏ thêm cho khít với sidebar full-width */
@media (max-width: 500px) {
    .arc-apps-table {
        font-size: 12px;
    }
    .arc-apps-table__cell {
        padding: 8px;
    }
    .arc-apps-table__cell--label {
        font-size: 11px;
    }
    .arc-apps-table__head {
        padding: 8px;
        font-size: 10px;
    }
    .arc-apps-table__head--title {
        font-size: 10px;
    }
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 600px) {
    .arc-pub-card__head {
        padding: 16px 14px 14px;
    }
    .arc-pub-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .arc-pub-card__name {
        font-size: 15px;
    }
    .arc-pub-card__section {
        padding: 0 14px;
    }
    .arc-pub-card__row {
        /* On narrow viewports the 90px label column gets cramped —
           collapse to icon + (label-stack-value) so the value gets
           the full remaining width. */
        grid-template-columns: 28px 1fr;
        grid-template-areas:
            "icon label"
            "icon value";
        gap: 2px 8px;
        padding: 12px 0;
    }
    .arc-pub-card__row-icon { grid-area: icon; align-self: center; }
    .arc-pub-card__label    { grid-area: label; }
    .arc-pub-card__value    { grid-area: value; }
}

/* ── Online users widget — XenForo-style "Members online" ────
   Full-width section render ở footer trang chủ. Compact layout:
   heading inline với list, total count gọn ở dưới — tránh chiều
   cao to khi ít user. */
.arc-online-users {
    /* Khớp với .arc-container của site (1100px + 16px padding mỗi
       bên = 1132px outer width). Trước đây đặt 1200px làm widget
       rộng hơn các section trên trang chủ → fix về đúng 1100px. */
    max-width: 1100px;
    margin: 32px auto 24px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.arc-online-users__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.arc-online-users__title svg {
    color: #0F6E56;
    flex-shrink: 0;
}
.arc-online-users__list {
    font-size: 13px;
    color: #444;
    line-height: 1.65;
    word-spacing: 1px;
}
.arc-online-users__name {
    color: #0F6E56;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.arc-online-users__name:hover {
    color: #084c3a;
    text-decoration: underline;
}
.arc-online-users__empty {
    margin: 0;
    color: #999;
    font-size: 13px;
    font-style: italic;
}
.arc-online-users__total {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #888;
}
.arc-online-users__total strong {
    color: #0F6E56;
    font-weight: 600;
}

/* "và X thành viên khác" button — render inline với danh sách
   tên, style giống link nhưng có hover state khác để nhận biết là
   action mở modal chứ không phải link đến profile. */
.arc-online-users__more {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: #0F6E56;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.arc-online-users__more:hover {
    color: #084c3a;
    text-decoration-style: solid;
}

/* ── Modal "Xem tất cả thành viên" ──────────────────────────
   Full-screen overlay + center panel. Search input filter
   client-side (không AJAX) — khi tap vào item, navigate sang
   /user/{login}/. Esc + click backdrop → đóng. */
.arc-online-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-online-modal[hidden] {
    display: none;
}
.arc-online-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.arc-online-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(560px, 92vw);
    max-height: min(72vh, 700px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.arc-online-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
}
.arc-online-modal__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.arc-online-modal__heading svg {
    color: #0F6E56;
    flex-shrink: 0;
}
.arc-online-modal__close {
    background: none;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.arc-online-modal__close:hover {
    background: #f0f0f0;
    color: #000;
}
.arc-online-modal__search {
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.arc-online-modal__search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.arc-online-modal__search input:focus {
    border-color: #0F6E56;
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
.arc-online-modal__body {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
    /* Grid 2-3 cột tùy width modal — list nhiều tên fit nhanh */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.arc-online-modal__item {
    display: block;
    padding: 8px 18px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #f6f6f6;
    transition: background 0.1s;
}
.arc-online-modal__item:hover {
    background: #f6fdfa;
    color: #0F6E56;
}
.arc-online-modal__login {
    display: block;
    color: #888;
    font-size: 11px;
    margin-top: 1px;
}
.arc-online-modal__foot {
    padding: 10px 18px;
    margin: 0;
    background: #fafafa;
    border-top: 1px solid #ececec;
    font-size: 12px;
    color: #666;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .arc-online-modal__panel {
        width: 100vw;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
        align-self: flex-end;
        margin-top: auto;
    }
    .arc-online-modal {
        align-items: flex-end;
    }
    .arc-online-modal__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .arc-online-users {
        margin: 20px 12px;
        padding: 12px 14px;
    }
    .arc-online-users__title {
        font-size: 14px;
    }
    .arc-online-users__list,
    .arc-online-users__total {
        font-size: 12px;
    }
}


/* ════════════════════════════════════════════════════════════════
   Catfish CTA — Sticky bottom popup mời gọi xem bình luận
   ─────────────────────────────────────────────────────────────────
   Pattern catfish (như VnExpress): popup fixed bottom, bám theo
   khi scroll, social proof variant với avatar stack + tên user
   thật. Show sau khi user scroll 200px, ẩn khi đã đến comments
   section, dismiss qua nút × lưu sessionStorage.
   ════════════════════════════════════════════════════════════════ */
.arc-catfish {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    /* Hidden by default → JS add --visible khi scroll */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* Center horizontally khi container max-width */
    max-width: 540px;
    margin: 0 auto;
}
.arc-catfish--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.arc-catfish--hidden-near {
    /* Khi user đã scroll vào comments → ẩn xuống dưới */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
.arc-catfish--dismissed {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.arc-catfish__link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.arc-catfish__link:hover {
    text-decoration: none;
    color: inherit;
}

.arc-catfish__avatars {
    display: flex;
    flex-shrink: 0;
}
.arc-catfish__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}
.arc-catfish__avatar:first-child {
    margin-left: 0;
}
.arc-catfish__avatar--img {
    background: #f0f0f0;
    padding: 0;
}
.arc-catfish__avatar--img img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.arc-catfish__avatar--more {
    background: #f0f0f0 !important;
    color: #666 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.arc-catfish__content {
    flex: 1;
    min-width: 0;
}
.arc-catfish__title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-catfish__title strong {
    color: #534AB7;
    font-weight: 700;
}
.arc-catfish__sub {
    font-size: 11px;
    color: #888;
    margin: 2px 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arc-catfish__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: #534AB7;
    color: #fff;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.arc-catfish__link:hover .arc-catfish__cta {
    background: #3C3489;
}

.arc-catfish__close {
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.arc-catfish__close:hover {
    background: #f5f5f5;
    color: #333;
}

/* Mobile compact */
@media (max-width: 480px) {
    .arc-catfish {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
    .arc-catfish__link {
        padding: 10px 10px 10px 12px;
        gap: 10px;
    }
    .arc-catfish__avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .arc-catfish__title {
        font-size: 12.5px;
    }
    .arc-catfish__sub {
        font-size: 10.5px;
    }
    .arc-catfish__cta {
        padding: 6px 10px;
        font-size: 12px;
    }
    .arc-catfish__cta {
        /* Trên màn hẹp, ẩn text "Xem" chỉ hiện mũi tên */
        font-size: 0;
        padding: 6px 8px;
    }
    .arc-catfish__cta svg {
        width: 14px;
        height: 14px;
    }
    .arc-catfish__close {
        width: 32px;
        height: 32px;
        margin-right: 2px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Topic system — CPT 'topic' for app discussion
   ─────────────────────────────────────────────────────────────────
   2 main UI surfaces:
     1. Topic list section trên single-app.php (form create + list)
     2. Topic detail page (single-topic.php)
   ════════════════════════════════════════════════════════════════ */

/* ─── Section trên single-app ──────────────────────────────── */
.arc-topic-section {
    margin-top: 32px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px 24px;
}
/* Topic list inside the app forum: negate parent padding so rows
   sit flush with the section's outer border. The header / form /
   filter stay centred (they keep the parent's padding). Each row
   keeps its own internal padding (set on .arc-topic-item) so
   content doesn't touch the edge — only the row container does.
   On mobile the negative margin shrinks because the parent
   padding does too. */
.arc-topic-section .arc-topic-list {
    margin-left: -24px;
    margin-right: -24px;
}
.arc-topic-section__header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.arc-topic-section__title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
}
.arc-topic-section__count {
    font-weight: 400;
    color: #888;
    font-size: 16px;
}
.arc-topic-section__sub {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Form create */
.arc-topic-create {
    background: #f8f9fc;
    border: 1px solid #e8eaf3;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.arc-topic-create__title,
.arc-topic-create__content {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    margin-bottom: 8px;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .15s;
}
.arc-topic-create__title:focus,
.arc-topic-create__content:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.12);
}
.arc-topic-create__content {
    min-height: 70px;
    resize: vertical;
}
.arc-topic-create__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.arc-topic-create__hint {
    font-size: 11px;
    color: #888;
}
.arc-topic-create__submit {
    background: #534AB7;
    color: #fff;
    border: 0;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.arc-topic-create__submit:hover {
    background: #3C3489;
}
.arc-topic-create--guest {
    background: #f5f5f5;
    text-align: center;
    padding: 14px;
}
.arc-topic-create__guest-msg {
    font-size: 13px;
    color: #555;
    margin: 0;
}
.arc-topic-create__guest-msg a {
    color: #534AB7;
    font-weight: 600;
    text-decoration: none;
}

/* Topic list */
.arc-topic-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #f0f0f0;
}
.arc-topic-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /* 14px vertical, 24px horizontal — the 24px matches the
       parent .arc-topic-section padding we negated on the list,
       restoring breathing room on the row content while the row
       background/hover/border-bottom now reach the section edge. */
    padding: 14px 24px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.arc-topic-item:last-child {
    border-bottom: 0;
}
.arc-topic-item:hover {
    background: #fafafa;
    text-decoration: none;
    color: inherit;
}
.arc-topic-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* clip <img> child for art_user_avatar */
}
.arc-topic-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.arc-topic-item__body {
    flex: 1;
    min-width: 0;
}
.arc-topic-item__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
    line-height: 1.35;
}
.arc-topic-item__excerpt {
    font-size: 12.5px;
    color: #666;
    margin: 0 0 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.arc-topic-item__meta {
    font-size: 11px;
    color: #999;
    margin: 0;
}
.arc-topic-item__stats {
    text-align: center;
    flex-shrink: 0;
    min-width: 50px;
}
.arc-topic-item__replies {
    font-size: 16px;
    font-weight: 700;
    color: #534AB7;
    line-height: 1;
    display: block;
}
.arc-topic-item__replies-lbl {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.arc-topic-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 30px 16px;
    margin: 0;
}

/* ─── Topic detail page ────────────────────────────────────── */
.arc-topic-page {
    max-width: 900px;
    margin: 0 auto;
    /* Top padding intentionally 0 — the breadcrumb sits flush
       against the site header so there's no awkward gap between
       the .arc-quickdash bar and the breadcrumb. The breadcrumb's
       own margin-bottom handles the spacing to the topic card
       below.
       Bottom padding: tight 30px so when "Topics liên quan" is
       absent (no related topics for this app), the gap to the
       site footer doesn't look like an unintentional empty white
       box. Used to be 60px which felt sparse on short topics. */
    padding: 0 16px 30px;
}
.arc-topic-detail {
    margin-top: 16px;
}
.arc-topic-detail__header {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 18px;
}
.arc-topic-detail__title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px;
    line-height: 1.3;
}
.arc-topic-detail__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.arc-topic-detail__author {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.arc-topic-detail__author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* keeps the <img> child clipped to the circle */
}
.arc-topic-detail__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.arc-topic-detail__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.arc-topic-detail__author-info strong {
    color: #1a1a1a;
}
.arc-topic-detail__date {
    font-size: 11px;
    color: #888;
}
.arc-topic-detail__stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #888;
}
.arc-topic-detail__content {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}
.arc-topic-detail__content p {
    margin: 0 0 12px;
}

/* Replies */
.arc-topic-replies {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px 24px;
}
.arc-topic-replies__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.arc-topic-replies__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.arc-topic-replies__list .children {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0 0 0 32px; /* indent dưới avatar 28px + gap */
    /* Bỏ border-left ở root level — children sẽ có connector cong */
}
/* ─── Topic reply — Facebook-style bubble ─────────────────── */
.arc-topic-reply {
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    position: relative;
}
.arc-topic-reply:last-child {
    margin-bottom: 0;
}
.arc-topic-reply--child {
    margin-bottom: 6px;
}

/* Connector line: cong từ avatar parent xuống child reply (FB style).
   Gắn vào .children, vẽ qua ::before của từng reply child. */
.arc-topic-replies__list .children > .arc-topic-reply::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -20px;
    width: 18px;
    height: 22px;
    border-left: 2px solid #e4e6eb;
    border-bottom: 2px solid #e4e6eb;
    border-bottom-left-radius: 12px;
}
/* Vertical extension cho replies giữa (không phải cuối) — tạo line liên tục */
.arc-topic-replies__list .children > .arc-topic-reply:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: -8px;
    border-left: 2px solid #e4e6eb;
}

.arc-topic-reply__row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: transparent;
    padding: 0;
}
.arc-topic-reply--child .arc-topic-reply__row {
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
}

/* Avatar nhỏ hơn 28px cho bubble tight (FB dùng ~32px nhưng compact hơn) */
.arc-topic-reply__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-topic-reply__row > img,
.arc-topic-reply__row > .arc-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Child reply: avatar nhỏ hơn 28px */
.arc-topic-reply--child .arc-topic-reply__avatar,
.arc-topic-reply--child .arc-topic-reply__row > img,
.arc-topic-reply--child .arc-topic-reply__row > .arc-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px;
}

.arc-topic-reply__body {
    flex: 1;
    min-width: 0;
}

/* ─── Bubble: bg xám tròn quanh name + content ───────────── */
.arc-topic-reply__bubble {
    display: inline-block;
    max-width: 100%;
    background: #f0f2f5; /* Facebook bubble color */
    border-radius: 16px;
    padding: 8px 12px;
    position: relative;
}
.arc-topic-reply__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.arc-topic-reply__name {
    font-size: 13px;
    font-weight: 600;
    color: #050505;
}
.arc-topic-reply__name a {
    color: inherit;
    text-decoration: none;
}
.arc-topic-reply__name a:hover {
    text-decoration: underline;
}
.arc-topic-reply__content {
    font-size: 14px;
    line-height: 1.4;
    color: #050505;
    word-wrap: break-word;
}
.arc-topic-reply__content p {
    margin: 0;
}
.arc-topic-reply__content p + p {
    margin-top: 4px;
}

/* ─── Meta row dưới bubble (time + actions) ──────────────── */
.arc-topic-reply__meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 0;
    font-size: 12px;
    color: #65676b;
}
.arc-topic-reply__time {
    font-size: 12px;
    color: #65676b;
}
.arc-topic-reply__action {
    background: transparent;
    border: 0;
    padding: 0;
    color: #65676b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color .1s;
}
.arc-topic-reply__action:hover {
    text-decoration: underline;
}
.arc-topic-reply__action.is-liked {
    color: #534AB7;
}
.arc-topic-reply-like-count {
    font-weight: 600;
}

/* Images: render BÊN NGOÀI bubble (không nằm trong nền xám) */
.arc-topic-reply__images {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-left: 0;
}
.arc-topic-reply__image-link {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    max-width: 200px;
}
.arc-topic-reply__image-link img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3-dot menu: position absolute trên góc phải bubble.
   Z-index strategy: each .arc-topic-reply <li> creates its own
   stacking context (because of position + opacity in some browsers
   on hover), so a dropdown rendered inside one reply gets clipped
   under the next reply unless we lift the whole row when the menu
   is in use. We do that by adding .arc-topic-reply--menu-open via
   JS while the dropdown is visible. */
.arc-topic-reply {
    position: relative;
}
.arc-topic-reply--menu-open {
    z-index: 100;
}
.arc-topic-reply__menu {
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
    z-index: 5;
}
.arc-topic-reply__row:hover .arc-topic-reply__menu,
.arc-topic-reply--menu-open .arc-topic-reply__menu {
    opacity: 1;
}

.arc-topic-reply__menu-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    color: #65676b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.arc-topic-reply__menu-btn:hover {
    background: #f0f0f0;
    color: #555;
}
.arc-topic-reply__menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 130px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px 0;
    z-index: 200;
}
.arc-topic-reply__menu-dropdown[hidden] {
    display: none !important;
}
.arc-topic-reply__menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
}
.arc-topic-reply__menu-item:hover {
    background: #f5f5f5;
}
.arc-topic-reply__menu-item--danger {
    color: #C92B2B;
}
.arc-topic-reply__menu-item--danger:hover {
    background: #fff5f5;
}

/* Reply form */
.arc-topic-reply-form {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.arc-topic-reply-form__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #444;
}
.arc-topic-reply-form #comment {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.arc-topic-reply-form #comment:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.12);
}
.arc-topic-reply-form__submit {
    background: #534AB7;
    color: #fff;
    border: 0;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: background .15s;
}
.arc-topic-reply-form__submit:hover {
    background: #3C3489;
}
.arc-topic-reply-form__guest {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: #555;
    margin: 16px 0 0;
}
.arc-topic-reply-form__guest a {
    color: #534AB7;
    font-weight: 600;
}

/* Back to app link */
.arc-topic-detail__back {
    margin: 20px 0 0;
    text-align: center;
}
.arc-topic-detail__back a {
    color: #534AB7;
    text-decoration: none;
    font-size: 13px;
}
.arc-topic-detail__back a:hover {
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .arc-topic-section {
        padding: 16px 14px;
    }
    /* Match the negative bleed + row padding to the new 14px
       parent padding so rows stay flush with the section edge
       on mobile too. */
    .arc-topic-section .arc-topic-list {
        margin-left: -14px;
        margin-right: -14px;
    }
    .arc-topic-item {
        padding-left: 14px;
        padding-right: 14px;
    }
    .arc-topic-detail__header {
        padding: 18px 16px;
    }
    .arc-topic-detail__title {
        font-size: 20px;
    }
    .arc-topic-replies {
        padding: 16px 14px;
    }
    .arc-topic-replies__list .children {
        margin-left: 14px;
    }
    .arc-topic-create__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .arc-topic-create__submit {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   Phase 2: Topic system extensions
   ════════════════════════════════════════════════════════════════ */

/* Sort dropdown — FB style với panel custom */
.arc-topic-sort {
    position: relative;
    display: flex !important;
    visibility: visible !important;
    justify-content: flex-start;
    margin: 12px 0 8px;
    padding: 4px 0;
}
.arc-topic-sort * {
    visibility: visible !important;
}
.arc-topic-sort__trigger {
    background: transparent;
    border: 0;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #534AB7;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}
.arc-topic-sort__trigger:hover {
    color: #3C3489;
}
.arc-topic-sort__caret {
    font-size: 12px;
    line-height: 1;
}
.arc-topic-sort__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-width: calc(100vw - 32px); /* không tràn viewport */
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    z-index: 100;
}
/* Sort dropdown trong topic detail (replies header): align phải vì
   trigger nằm bên phải title. Trên mobile cần giữ trong viewport. */
.arc-topic-sort--replies .arc-topic-sort__panel {
    left: auto;
    right: 0;
}
@media (max-width: 600px) {
    /* Mobile: panel full-width có gap 16px viewport, align với trigger */
    .arc-topic-sort__panel {
        min-width: 0;
        width: calc(100vw - 32px);
        max-width: 320px;
        left: 0;
        right: auto;
    }
    .arc-topic-sort--replies .arc-topic-sort__panel {
        /* Replies sort: trigger ở phải nhưng panel vẫn align theo trigger.
           Dùng right: 0 để không tràn phải, transform về trái nếu cần. */
        left: auto;
        right: 0;
    }
}
.arc-topic-sort__panel[hidden] {
    display: none !important;
}
.arc-topic-sort__option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s;
}
.arc-topic-sort__option:hover {
    background: #f5f5f5;
}
.arc-topic-sort__option strong {
    display: block;
    font-size: 14px;
    color: #050505;
    font-weight: 600;
    margin-bottom: 2px;
}
.arc-topic-sort__option span {
    display: block;
    font-size: 12px;
    color: #65676b;
}
.arc-topic-sort__option.is-active strong {
    color: #534AB7;
}
.arc-topic-sort__option.is-active::after {
    content: ' ✓';
    color: #534AB7;
}

/* Load more button */
.arc-topic-loadmore {
    text-align: center;
    padding: 16px 0 4px;
}
.arc-topic-loadmore button {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.arc-topic-loadmore button:hover {
    border-color: #534AB7;
    color: #534AB7;
    background: #faf9ff;
}
.arc-topic-loadmore button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Archive link variant (replaces the loadmore button when total
   exceeds the in-page cap of 30). Brand-purple pill so it visually
   reads as a navigation action, not a load-more. */
.arc-topic-loadmore__archive-link {
    display: inline-block;
    background: #534AB7;
    color: #fff !important;
    padding: 9px 26px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s, transform .1s;
    border: 1px solid #534AB7;
}
.arc-topic-loadmore__archive-link:hover {
    background: #3C3489;
    color: #fff !important;
    transform: translateX(2px);
}
.arc-topic-loadmore__archive-link span {
    margin-left: 4px;
    display: inline-block;
}

/* ── Footer actions row: side-by-side "Xem thêm topic" + "Lưu trữ Topic"
      under the inline topic list on /app/{slug}/. The archive CTA is
      always visible whenever the section has at least one topic — the
      load-more button only appears in the 11–30 topic window where
      AJAX paging still adds value. Mobile stacks them vertically with
      the archive CTA on top so the primary navigation action stays
      one tap away. ── */
.arc-topic-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0 4px;
}
.arc-topic-footer-actions .arc-topic-loadmore {
    /* Override the standalone padding when nested inside the footer
       row — the row already provides vertical rhythm. */
    padding: 0;
    text-align: center;
}

/* Brand-purple pill linking to /app/{slug}/topics/. Visually distinct
   from the white outline "Xem thêm topic" so users know it's a route
   change, not a load-more action. Icon + label + arrow grouped in a
   single inline-flex so the gap between icon and arrow stays even
   when text wraps on tiny screens (rare). */
.arc-topic-archive-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #534AB7;
    color: #fff !important;
    padding: 9px 22px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s, transform .12s;
    border: 1px solid #534AB7;
    line-height: 1.2;
}
.arc-topic-archive-cta:hover {
    background: #3C3489;
    border-color: #3C3489;
    color: #fff !important;
    transform: translateY(-1px);
}
.arc-topic-archive-cta svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.arc-topic-archive-cta__arrow {
    display: inline-block;
    margin-left: 2px;
    transition: transform .15s;
}
.arc-topic-archive-cta:hover .arc-topic-archive-cta__arrow {
    transform: translateX(3px);
}
@media (max-width: 600px) {
    .arc-topic-footer-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .arc-topic-archive-cta {
        width: 100%;
        justify-content: center;
    }
    .arc-topic-footer-actions .arc-topic-loadmore button {
        width: 100%;
    }
}

/* Owner actions (edit/delete) */
.arc-topic-detail__owner-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}
.arc-topic-detail__btn-edit,
.arc-topic-detail__btn-delete {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}
.arc-topic-detail__btn-edit:hover {
    border-color: #534AB7;
    color: #534AB7;
    background: #faf9ff;
}
.arc-topic-detail__btn-delete:hover {
    border-color: #C92B2B;
    color: #C92B2B;
    background: #fff5f5;
}
.arc-topic-detail__btn-edit:disabled,
.arc-topic-detail__btn-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Edit pane */
.arc-topic-detail__edit {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fc;
    border: 1px solid #e8eaf3;
    border-radius: 8px;
}
.arc-topic-edit__title {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.arc-topic-edit__content {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}
.arc-topic-edit__title:focus,
.arc-topic-edit__content:focus {
    outline: none;
    border-color: #534AB7;
    box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.12);
}
.arc-topic-edit__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}
.arc-topic-edit__cancel {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.arc-topic-edit__save {
    background: #534AB7;
    color: #fff;
    border: 0;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.arc-topic-edit__save:hover {
    background: #3C3489;
}

/* Inline reply form (nested) — wrapper chỉ cần margin/animation,
   pill style nằm ở .arc-topic-reply-box bên trong (giống form chính). */
.arc-topic-reply-inline {
    margin: 8px 0 12px 0;
    /* Reset bg/border/padding cũ — design pill ở element con */
    background: transparent;
    border: 0;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════════
   Phase 3: Tier 1 + Tier 2 — Like, Pin, Report, Follow, Truncation
   ════════════════════════════════════════════════════════════════ */

/* ─── Pinned topic badge in list ───────────────────────────── */
.arc-topic-item--pinned {
    background: linear-gradient(90deg, #FFFCF0 0%, transparent 100%);
}
.arc-topic-item__pinned-badge {
    display: inline-block;
    margin-right: 4px;
    font-size: 13px;
    line-height: 1;
}

/* ─── Pinned badge in topic detail ─────────────────────────── */
.arc-topic-detail__pinned-badge {
    background: #FFF3E0;
    color: #B36F00;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 12px;
}

/* ─── Title row + 3-dot menu ───────────────────────────────── */
.arc-topic-detail__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.arc-topic-detail__title {
    margin: 0 !important;
    flex: 1;
}

/* Standalone follow button next to the title. Pill-shaped with two
   visual states: outlined when not following (call-to-action), filled
   when following (current-state indicator the user can click to
   unfollow). Sits between the title and the 3-dot menu. */
.arc-topic-detail__follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #534AB7;
    color: #534AB7;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all .15s;
}
.arc-topic-detail__follow-btn:hover {
    background: #faf9ff;
}
.arc-topic-detail__follow-btn.is-following {
    background: #534AB7;
    color: #fff;
    border-color: #534AB7;
}
.arc-topic-detail__follow-btn.is-following:hover {
    background: #3C3489;
    border-color: #3C3489;
}
.arc-topic-detail__follow-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
@media (max-width: 600px) {
    .arc-topic-detail__follow-btn {
        padding: 5px 11px;
        font-size: 12px;
    }
}

.arc-topic-detail__menu {
    position: relative;
    flex-shrink: 0;
}
.arc-topic-detail__menu-btn {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .15s;
}
.arc-topic-detail__menu-btn:hover {
    border-color: #534AB7;
    background: #faf9ff;
    color: #534AB7;
}
.arc-topic-detail__menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    z-index: 100;
}
.arc-topic-detail__menu-dropdown[hidden] {
    display: none !important;
}
.arc-topic-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 9px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background .1s;
    font-family: inherit;
}
.arc-topic-menu-item:hover {
    background: #f5f5f5;
}
.arc-topic-menu-item--danger {
    color: #C92B2B;
}
.arc-topic-menu-item--danger:hover {
    background: #fff5f5;
}
.arc-topic-menu-item--disabled {
    color: #999;
    cursor: default;
}
.arc-topic-menu-item--disabled:hover {
    background: transparent;
}
.arc-topic-menu-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Truncation: topic content ────────────────────────────── */
.arc-topic-detail__content--truncated {
    max-height: 280px;
    overflow: hidden;
    position: relative;
}
.arc-topic-detail__content--truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #fff 90%);
    pointer-events: none;
}
.arc-topic-detail__content--expanded {
    max-height: none;
}
.arc-topic-detail__content--expanded::after {
    display: none;
}
.arc-topic-detail__expand,
.arc-topic-reply__expand {
    background: transparent;
    border: 0;
    color: #534AB7;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.arc-topic-detail__expand:hover,
.arc-topic-reply__expand:hover {
    color: #3C3489;
}

/* Reply truncation (smaller) */
.arc-topic-reply__content--truncated {
    max-height: 110px;
    overflow: hidden;
    position: relative;
}
.arc-topic-reply__content--truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fafafa 90%);
    pointer-events: none;
}
.arc-topic-reply--child .arc-topic-reply__content--truncated::after {
    background: linear-gradient(to bottom, transparent, #fff 90%);
}
.arc-topic-reply__content--expanded {
    max-height: none;
}
.arc-topic-reply__content--expanded::after {
    display: none;
}

/* ─── Topic detail actions — text style giống comment cũ ─── */
.arc-topic-detail__actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}
.arc-topic-detail__action {
    background: transparent;
    border: 0;
    padding: 0;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color .1s;
}
.arc-topic-detail__action:hover {
    color: #534AB7;
}
.arc-topic-detail__action.is-liked {
    color: #534AB7;
    font-weight: 600;
}
.arc-topic-detail__reply-count {
    color: #888;
    cursor: default;
}
.arc-topic-detail__reply-count:hover {
    color: #888;
}
.arc-topic-like-count {
    font-weight: 600;
}
.arc-topic-detail__action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .arc-topic-detail__menu-dropdown {
        right: -8px;
        min-width: 200px;
    }
    .arc-topic-detail__title-row {
        gap: 8px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Phase 3 fixes: tags, header counts, reply form, images
   ════════════════════════════════════════════════════════════════ */

/* ─── Tag picker trong form tạo topic ──────────────────────── */
.arc-topic-create__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 4px 0;
}
.arc-topic-create__tags-label {
    font-size: 12px;
    color: #666;
    margin-right: 4px;
}
.arc-topic-tag {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.arc-topic-tag input {
    /* Hide native radio, show styled label instead */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.arc-topic-tag span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    transition: all .15s;
}
.arc-topic-tag input:checked + span {
    border-width: 1.5px;
    font-weight: 600;
}
.arc-topic-tag--hoi-dap input:checked + span {
    background: #FFF3E0;
    border-color: #B36F00;
    color: #B36F00;
}
.arc-topic-tag--vtc input:checked + span {
    background: #E8F8F0;
    border-color: #1F8A56;
    color: #1F8A56;
}
.arc-topic-tag--scam input:checked + span {
    background: #FFEAEA;
    border-color: #C92B2B;
    color: #C92B2B;
}
.arc-topic-tag:hover span {
    border-color: #999;
}

/* ─── Tag badge in topic list item ─────────────────────────── */
.arc-topic-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
    vertical-align: 1px;
    line-height: 1.4;
}
.arc-topic-badge--hoi-dap { background: #FFF3E0; color: #B36F00; }
.arc-topic-badge--vtc     { background: #E8F8F0; color: #1F8A56; }
.arc-topic-badge--scam    { background: #FFEAEA; color: #C92B2B; }

/* ─── Reply form: structured giống comment cũ ──────────────── */
.arc-topic-reply-box {
    border: 1px solid #ddd;
    border-radius: 22px;
    background: #fff;
    transition: border-color .15s;
}
.arc-topic-reply-box:focus-within {
    border-color: #534AB7;
    box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.1);
}
.arc-topic-reply-box__inner {
    padding: 4px 6px 4px 16px;
}
.arc-topic-reply-box__wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.arc-topic-reply-box__input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.5;
    background: transparent;
    resize: none;
    font-family: inherit;
    min-height: 40px;
    max-height: 200px;
    color: #1a1a1a;
}
.arc-topic-reply-box__input::placeholder {
    color: #888;
}
.arc-topic-reply-box__icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.arc-topic-reply-box__icon-btn {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #888;
    padding: 0;
    transition: all .1s;
}
.arc-topic-reply-box__icon-btn:hover {
    background: #f0f0f0;
    color: #534AB7;
}
.arc-topic-reply-box__submit {
    background: #534AB7;
    color: #fff;
    border: 0;
    padding: 7px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    margin-left: 4px;
}
.arc-topic-reply-box__submit:hover {
    background: #3C3489;
}
.arc-topic-reply-box__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Image previews in reply form ─────────────────────────── */
.arc-topic-reply-form__previews {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.arc-topic-preview {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}
.arc-topic-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-topic-preview__loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #999;
}
.arc-topic-preview__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-topic-preview__remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ─── Reply images display ─────────────────────────────────── */
.arc-topic-reply__images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.arc-topic-reply__image-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    max-width: 200px;
    text-decoration: none;
}
.arc-topic-reply__image-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .15s;
}
.arc-topic-reply__image-link:hover img {
    transform: scale(1.02);
}

/* ─── Reply count clickable on topic header ────────────────── */
.arc-topic-detail__reply-count {
    cursor: pointer !important;
    transition: color .1s;
}
.arc-topic-detail__reply-count:hover {
    color: #534AB7 !important;
}

/* Override WP comment_form leftover styles trong topic context */
.arc-topic-reply-form .comment-form-comment,
.arc-topic-reply-form #comment-form-submit,
.arc-topic-reply-form .comment-notes,
.arc-topic-reply-form .form-allowed-tags {
    display: none !important;
}

/* ─── Inline reply form (under each reply) ─────────────────── */
.arc-topic-reply-inline {
    margin: 8px 0 12px 42px; /* indent dưới avatar 32px + gap */
    animation: arc-slide-down 0.2s ease;
}
@keyframes arc-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.arc-topic-reply-inline .arc-topic-reply-box {
    background: #fff;
}
/* Mobile: bỏ indent vì không gian hẹp */
@media (max-width: 600px) {
    .arc-topic-reply-inline {
        margin-left: 0;
    }
}

/* ─── Topic detail: replies header với sort filter ─────── */
.arc-topic-replies__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.arc-topic-replies__header .arc-topic-replies__title {
    margin: 0;
}
.arc-topic-sort--replies {
    margin: 0;
}

/* ─── Emoji picker (đơn giản, grid 8 cột) ─────────────── */
.arc-topic-emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    max-width: 280px;
}
.arc-topic-emoji-item {
    background: transparent;
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: background .1s;
}
.arc-topic-emoji-item:hover {
    background: #f0f0f0;
}
/* Đảm bảo emoji button parent có position relative để picker absolute đúng vị trí */
.arc-topic-reply-box__icons {
    position: relative;
}

/* ─── Load more replies button ────────────────────────── */
.arc-topic-replies__load-more-wrapper {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    /* Tạo thêm 1 li trống → bị border-left của .children render từ trên xuống */
}
.arc-topic-replies__load-more-wrapper::before,
.arc-topic-replies__load-more-wrapper::after {
    display: none !important; /* tắt connector cong, button không cần */
}
.arc-topic-load-more-replies {
    background: transparent;
    border: 0;
    color: #65676b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .1s, color .1s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.arc-topic-load-more-replies:hover {
    background: #f0f2f5;
    color: #534AB7;
}
.arc-topic-load-more-replies:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.arc-topic-load-more-replies__icon {
    font-size: 14px;
    color: #65676b;
}
.arc-topic-load-more-replies:hover .arc-topic-load-more-replies__icon {
    color: #534AB7;
}

/* ─── Load more ROOT replies button (cuối list) ───────── */
.arc-topic-replies__load-more-root {
    text-align: center;
    margin-top: 16px;
    padding: 8px 0;
}
.arc-topic-load-more-root {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.arc-topic-load-more-root:hover {
    border-color: #534AB7;
    color: #534AB7;
    background: #faf9ff;
}
.arc-topic-load-more-root:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Topic toolbar: sort dropdown + nút "Tạo topic mới" ─── */
.arc-topic-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 4px 0;
}
/* Sort row sits on its own line, left-aligned, just above the topic list.
   Tighter top/bottom spacing since it's sandwiched between filter chips
   above and the list below. */
.arc-topic-toolbar--sort {
    margin-top: -4px;
    margin-bottom: 8px;
    padding: 0 0 4px;
}
.arc-topic-toolbar .arc-topic-sort {
    margin: 0;
}
.arc-topic-create__open-btn {
    background: #534AB7;
    color: #fff;
    border: 0;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background .15s;
    font-family: inherit;
}
.arc-topic-create__open-btn:hover {
    background: #3C3489;
    color: #fff;
}
.arc-topic-create__open-btn span {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

/* Cancel button trong form tạo topic */
.arc-topic-create__cancel {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 8px;
    font-family: inherit;
}
.arc-topic-create__cancel:hover {
    border-color: #999;
    color: #333;
}

/* Upload section trong form tạo topic */
.arc-topic-create__upload {
    margin: 8px 0;
    padding: 8px 0;
}
.arc-topic-create__upload-btn {
    background: #fff;
    border: 1px dashed #ccc;
    color: #666;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
    font-family: inherit;
}
.arc-topic-create__upload-btn:hover {
    border-color: #534AB7;
    color: #534AB7;
    border-style: solid;
}

/* Topic detail images — proper gallery grid.
   Replaces the old flex+max-width approach that produced ragged
   rows with mixed aspect ratios. Now uses CSS Grid with square
   tiles (object-fit: cover) so the gallery reads as a clean
   composition regardless of source dimensions, similar to
   Facebook/Instagram album thumbnails. The browser picks the
   layout via :has() based on tile count:
     - 1 image  → single tile, taller (max 480px), keeps aspect
     - 2 images → 2 equal columns
     - 3-9      → 3 column grid, each tile square
   This keeps the grid predictable and avoids needing JS to add
   count-aware classes. */
/* ─── Topic detail image gallery ───────────────────────────
   Uniform thumbnail row. Old layout reused .arc-topic-reply__image-link
   which has max-width:200px + height:auto, making images uneven and
   oversized in the topic detail. Switched to a dedicated class
   (.arc-topic-detail__image) and fixed-size square thumbs so 1-10
   images line up tidily. Click → fullscreen lightbox (JS handler).
   ─────────────────────────────────────────────────────────── */
.arc-topic-detail__images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.arc-topic-detail__image {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: zoom-in;
    display: block;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    border: 1px solid #ececec;
}
.arc-topic-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.arc-topic-detail__image:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.arc-topic-detail__image:hover img {
    transform: scale(1.05);
}

/* Mobile: slightly smaller to fit more per row */
@media (max-width: 600px) {
    .arc-topic-detail__images { gap: 6px; }
    .arc-topic-detail__image { width: 80px; height: 80px; }
}

/* ─── Lightbox modal (click-to-zoom) ─────────────────────── */
.arc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.arc-lightbox__img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5);
    user-select: none;
}
.arc-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.arc-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.7);
}
.arc-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    user-select: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.arc-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.06);
    border-color: rgba(255, 255, 255, 0.7);
}
.arc-lightbox__nav--prev { left: 20px; }
.arc-lightbox__nav--next { right: 20px; }
.arc-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 7px 16px;
    border-radius: 14px;
    user-select: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.arc-lightbox__topic-link {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.55);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    max-width: calc(100vw - 140px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    transition: background .15s, transform .15s;
    z-index: 2;
}
.arc-lightbox__topic-link:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateX(-50%) scale(1.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
.arc-lightbox__topic-link span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .arc-lightbox__nav { width: 40px; height: 40px; font-size: 18px; }
    .arc-lightbox__nav--prev { left: 8px; }
    .arc-lightbox__nav--next { right: 8px; }
    .arc-lightbox__close { top: 8px; right: 10px; }
    .arc-lightbox__topic-link {
        top: 60px;
        font-size: 12px;
        padding: 6px 14px;
        max-width: calc(100vw - 32px);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   COMMUNITY GALLERY — single-app /app/{slug}/ page
   Aggregated photo strip pulled from every topic + reply on this app.
   Sits inside .arc-detail-info as one of its content blocks, so it
   shares the same outer card chrome as Process / Đánh giá chi tiết.
   ═══════════════════════════════════════════════════════════════════ */
.arc-community-gallery__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #f0eef9;
    color: #534AB7;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    vertical-align: middle;
}
.arc-community-gallery__sub {
    margin: -6px 0 14px;
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.5;
}
.arc-community-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.arc-community-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.arc-community-gallery__item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.arc-community-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arc-community-gallery__overlay {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    border-radius: 4px;
    font-weight: 500;
    line-height: 1;
    backdrop-filter: blur(2px);
}
.arc-community-gallery__overlay svg {
    color: #fff;
}
.arc-community-gallery__more {
    margin-top: 14px;
    text-align: center;
}
.arc-community-gallery__more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    color: #534AB7;
    border: 1px solid #d4d2eb;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
}
.arc-community-gallery__more-link:hover {
    background: #faf9ff;
    border-color: #534AB7;
}

@media (max-width: 600px) {
    .arc-community-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .arc-community-gallery__overlay {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* Old grid + :has() rules below are no longer used — superseded
   by the flex thumbnail row above. Keeping the section anchor
   here for future cleanups. */

/* Mobile responsive toolbar */
@media (max-width: 600px) {
    .arc-topic-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .arc-topic-create__open-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ─── Related topics section dưới topic detail ────────── */
.arc-topic-related {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.arc-topic-related__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.arc-topic-related__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Reuse style từ .arc-topic-list (item layout giống nhau) */
}
.arc-topic-related__list .arc-topic-item {
    border-bottom: 1px solid #f5f5f5;
    padding: 14px 0;
}
.arc-topic-related__list .arc-topic-item:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}
.arc-topic-related__list .arc-topic-item:first-child {
    padding-top: 4px;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .arc-topic-related {
        padding: 16px;
        border-radius: 8px;
    }
    .arc-topic-related__title {
        font-size: 15px;
    }
}

/* ─── Inline CTA giữa replies (Idea #9) ────────────────── */
.arc-topic-cta-inline {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}
.arc-topic-cta-inline__inner {
    background: linear-gradient(90deg, #E1F5EE 0%, #fff 100%);
    border: 1px dashed #0F6E56;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.arc-topic-cta-inline__msg {
    font-size: 13.5px;
    font-weight: 500;
    color: #0F6E56;
    flex: 1;
    min-width: 0;
}
.arc-topic-cta-inline__btn {
    background: #0F6E56;
    color: #fff !important;
    border: 0;
    padding: 8px 18px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, transform .1s;
    flex-shrink: 0;
    font-family: inherit;
}
.arc-topic-cta-inline__btn:hover {
    background: #085041;
    color: #fff !important;
    transform: translateX(2px);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .arc-topic-cta-inline__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 12px;
    }
    .arc-topic-cta-inline__btn {
        justify-content: center;
    }
}

/* ─── Tag filter chips trong toolbar ──────────────────── */
.arc-topic-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.arc-topic-tag-filter__chip {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    white-space: nowrap;
}
.arc-topic-tag-filter__chip:hover {
    border-color: #999;
    color: #333;
}
.arc-topic-tag-filter__chip.is-active {
    background: #534AB7;
    color: #fff;
    border-color: #534AB7;
    font-weight: 600;
}
/* Active state riêng cho từng tag (match màu badge) */
.arc-topic-tag-filter__chip--hoi-dap.is-active {
    background: #B36F00;
    border-color: #B36F00;
}
.arc-topic-tag-filter__chip--vtc.is-active {
    background: #1F8A56;
    border-color: #1F8A56;
}
.arc-topic-tag-filter__chip--scam.is-active {
    background: #C92B2B;
    border-color: #C92B2B;
}

/* Toolbar layout: filter chips on row 1, sort dropdown on row 2 below
   (sort moved out of the top toolbar so users see filter options first
   and the sort sits just above the list it controls). */
.arc-topic-toolbar {
    flex-wrap: wrap;
    align-items: center;
}

/* Mobile: chips scroll horizontally if they overflow; sort row stays
   left-aligned on its own line. No special order/width needed now that
   the two are already on separate rows. */
@media (max-width: 600px) {
    .arc-topic-tag-filter {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .arc-topic-tag-filter__chip {
        flex-shrink: 0;
    }
}

/* ─── Section header layout (title + button) ──────────── */
.arc-topic-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.arc-topic-section__header-text {
    flex: 1;
    min-width: 0;
}
.arc-topic-section__header .arc-topic-create__open-btn {
    flex-shrink: 0;
    /* Align với title — không bị stretch */
    align-self: center;
}

@media (max-width: 600px) {
    .arc-topic-section__header {
        gap: 8px;
    }
    .arc-topic-section__header .arc-topic-create__open-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPIC ARCHIVE PAGE — /app/{slug}/topics/
   Standalone page that lists every topic for an app with classic
   pagination. Reuses .arc-topic-* item styles from single-app so
   the visual rhythm stays consistent; only the surrounding chrome
   (header card, breadcrumb, pagination) is page-specific.
   ═══════════════════════════════════════════════════════════════════ */
.arc-topic-archive {
    padding: 24px 0 48px;
}
.arc-topic-archive .arc-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header card */
.arc-topic-archive__header {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.arc-topic-archive__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    line-height: 1.3;
}
.arc-topic-archive__count {
    color: #888;
    font-weight: 500;
    font-size: 18px;
}
.arc-topic-archive__sub {
    font-size: 14px;
    color: #666;
    margin: 0 0 14px;
    line-height: 1.55;
}
/* Header actions row — back-link + create button side by side. On
   mobile they wrap to 2 lines so the create button stays full width
   and tappable. */
.arc-topic-archive__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.arc-topic-archive__back {
    display: inline-block;
    font-size: 13px;
    color: #534AB7;
    text-decoration: none;
    font-weight: 500;
}
.arc-topic-archive__back:hover { text-decoration: underline; }

/* Topic list wrapper on archive — same items, just on white card */
.arc-topic-list--archive {
    background: #fff;
    border-radius: 12px;
    padding: 8px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 600px) {
    .arc-topic-archive { padding: 16px 0 32px; }
    .arc-topic-archive__header {
        padding: 18px 16px;
        border-radius: 8px;
    }
    .arc-topic-archive__title { font-size: 18px; }
    .arc-topic-archive__count { font-size: 16px; }
    .arc-topic-archive__header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .arc-topic-archive__header-actions .arc-topic-create__open-btn {
        width: 100%;
        justify-content: center;
    }
    .arc-topic-list--archive {
        padding: 4px 12px;
        border-radius: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   /VAY-THANH-CONG/ — community-wide VTC archive
   Cross-app feed of every Vay Thành Công topic. Same outer chrome
   as .arc-topic-archive (so the page feels like a sibling of the
   per-app archive) but with a distinctive green-tinted header that
   signals the success/community angle, plus a purple "Khoe Vay" CTA
   matching the homepage podium card's CTA style.
   ═══════════════════════════════════════════════════════════════════ */
.arc-vtc-archive {
    padding: 24px 0 48px;
}
.arc-vtc-archive .arc-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header — icon + title block + CTA. Flex row, wraps on narrow
   screens so CTA can drop under the title block instead of squeezing
   into a too-narrow column. */
.arc-vtc-archive__header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.arc-vtc-archive__header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #EAF3DE;
    color: #3B6D11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.arc-vtc-archive__header-icon svg { display: block; }
.arc-vtc-archive__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
    line-height: 1.25;
}
.arc-vtc-archive__sub {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}
.arc-vtc-archive__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 9px 18px;
    border: 1px solid #534AB7;
    color: #534AB7;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.arc-vtc-archive__cta:hover {
    background: #534AB7;
    color: #fff;
    opacity: 1;
}
.arc-vtc-archive__cta svg { display: block; }

/* List wrapper — white card holding the rendered topic feed items.
   Items themselves use existing .arc-feed-card markup from
   render_topic_feed_item (which provides its own row styling), so
   we just need to give them a card backdrop + padding. */
.arc-vtc-archive__list {
    background: #fff;
    border-radius: 12px;
    padding: 8px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

/* Load-more — center-aligned button below the list, same style as
   the homepage feed's load-more so users recognize the affordance. */
.arc-vtc-archive__loadmore {
    display: flex;
    justify-content: center;
    margin: 16px 0 0;
}
.arc-vtc-archive__loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #fff;
    border: 1px solid #d4d2eb;
    color: #534AB7;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.arc-vtc-archive__loadmore-btn:hover {
    background: #faf9ff;
    border-color: #534AB7;
}
.arc-vtc-archive__loadmore-btn:disabled {
    cursor: wait;
    opacity: .7;
}

@media (max-width: 600px) {
    .arc-vtc-archive { padding: 16px 0 32px; }
    .arc-vtc-archive__header {
        padding: 16px;
        border-radius: 8px;
        gap: 10px;
    }
    .arc-vtc-archive__header-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .arc-vtc-archive__title { font-size: 18px; }
    .arc-vtc-archive__sub { font-size: 13px; }
    .arc-vtc-archive__cta {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
    .arc-vtc-archive__list {
        padding: 4px 10px;
        border-radius: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOVE-TAB SUBMENU + PENDING-REVIEW UI
   Submenu inside the 3-dot dropdown for admins to move a topic
   between tabs (Thảo Luận / VTC / Scam). Pending banner appears
   above the topic header when a VTC topic is awaiting review.
   ═══════════════════════════════════════════════════════════════════ */
.arc-topic-menu-submenu {
    position: relative;
}
.arc-topic-menu-item--has-sub {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.arc-topic-menu-caret {
    color: #999;
    font-size: 14px;
    margin-left: 8px;
}
.arc-topic-menu-submenu__panel {
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 4px 0;
}
.arc-topic-menu-submenu__panel[hidden] {
    display: none;
}
.arc-topic-menu-item--sub {
    padding-left: 28px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.arc-topic-menu-item--sub.is-current {
    color: #0F6E56;
    font-weight: 600;
    cursor: default;
    background: transparent !important;
}
.arc-topic-menu-current-mark {
    color: #0F6E56;
    font-weight: 700;
}

/* Pending-review banner on single-topic.php */
.arc-topic-pending-banner {
    background: #FEF7E0;
    border: 1px solid #F5C84B;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.arc-topic-pending-banner__icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
.arc-topic-pending-banner__body {
    flex: 1;
    min-width: 220px;
}
.arc-topic-pending-banner__body strong {
    color: #7A4F00;
    font-size: 14.5px;
    display: block;
    margin-bottom: 4px;
}
.arc-topic-pending-banner__body p {
    margin: 0;
    font-size: 13px;
    color: #6B4500;
    line-height: 1.5;
}
.arc-topic-pending-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.arc-topic-pending-banner__btn {
    padding: 7px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    transition: opacity .15s;
}
.arc-topic-pending-banner__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.arc-topic-pending-banner__btn--approve {
    background: #0F6E56;
    color: #fff;
}
.arc-topic-pending-banner__btn--approve:hover { background: #0A5040; }
.arc-topic-pending-banner__btn--reject {
    background: #fff;
    color: #A32D2D;
    border: 1px solid #DDA;
}
.arc-topic-pending-banner__btn--reject:hover {
    background: #FCEBEB;
    border-color: #A32D2D;
}

/* Inline flash on single-app.php (after pending VTC submit) */
.arc-topic-pending-flash {
    background: #FEF7E0;
    border: 1px solid #F5C84B;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #6B4500;
    line-height: 1.5;
}
.arc-topic-pending-flash strong {
    color: #7A4F00;
}

/* Hint text inside VTC tag option in create form */
.arc-topic-tag__hint {
    font-size: 11px;
    color: #888;
    margin-left: 4px;
    font-weight: 400;
}

/* Mobile */
@media (max-width: 600px) {
    .arc-topic-pending-banner {
        padding: 14px 16px;
        gap: 10px;
    }
    .arc-topic-pending-banner__icon { font-size: 20px; }
    .arc-topic-pending-banner__actions {
        width: 100%;
    }
    .arc-topic-pending-banner__btn {
        flex: 1;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE UPLOAD UI (create + edit topic)
   Hint text + required asterisk on the create form, plus a tighter
   upload row in the edit pane that includes both the picker button
   and the existing previews managed inline.
   ═══════════════════════════════════════════════════════════════════ */
.arc-topic-upload-required {
    color: #C92B2B;
    font-weight: 700;
    margin-left: 2px;
}
.arc-topic-upload-hint {
    font-size: 12px;
    color: #888;
    margin-left: 8px;
    align-self: center;
}

/* Edit pane upload row */
.arc-topic-edit__upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.arc-topic-edit__upload-row .arc-topic-create__upload-btn {
    font-size: 13px;
    padding: 6px 12px;
}
.arc-topic-edit__image-count {
    font-size: 12px;
    color: #888;
}

/* Edit pane should leave room for previews underneath */
.arc-topic-edit-form .arc-topic-reply-form__previews {
    margin-top: 10px;
    margin-bottom: 8px;
}

/* When upload area in topic-create wraps to a second line on mobile */
.arc-topic-create__upload {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .arc-topic-upload-hint {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   UPLOAD-IN-FLIGHT FORM STATE
   .arc-form-uploading is toggled on a form while it has any image
   uploads pending (managed by arcMarkUploadStart/End). The submit
   button gets a busy label + disabled state from JS; this CSS adds
   a subtle visual hint so the cause is obvious to the user.
   ═══════════════════════════════════════════════════════════════════ */
.arc-form-uploading {
    position: relative;
}
.arc-form-uploading button[type="submit"]:disabled,
.arc-form-uploading .arc-topic-create__submit:disabled,
.arc-form-uploading .arc-topic-edit__save:disabled,
.arc-form-uploading .arc-topic-reply-form__submit:disabled,
.arc-form-uploading .arc-topic-reply-inline__submit:disabled {
    background: #B0AAD9 !important;
    cursor: progress !important;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   TIME ELEMENT — UNIFIED FORMAT
   <time> elements rendered by arc_format_time() show relative time
   under 7 days ("2 giờ trước"), absolute date over 7 days
   ("6/5/2026 14:30"), and always carry a title="..." tooltip with the
   full datetime + day-of-week. The dotted underline + help cursor
   signal hoverability without being noisy.
   ═══════════════════════════════════════════════════════════════════ */
.arc-comment__time[title],
.arc-topic-reply__time[title],
.arc-topic-detail__date[title] {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color .15s;
}
.arc-comment__time[title]:hover,
.arc-topic-reply__time[title]:hover,
.arc-topic-detail__date[title]:hover {
    border-bottom-color: currentColor;
    opacity: 0.85;
}
/* Mobile: tooltips don't show on tap, so make the underline always
   visible as a hint that the field carries info. */
@media (hover: none) {
    .arc-comment__time[title],
    .arc-topic-reply__time[title],
    .arc-topic-detail__date[title] {
        border-bottom-color: rgba(0,0,0,0.15);
        cursor: default;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FLASH HIGHLIGHT for #comment-{id} navigation
   When admin clicks a "X reported Y" notification, the link includes
   a hash anchor — we scroll the target into view (handled in JS) and
   add this class for a couple of seconds to make the location obvious.
   The pulse draws the eye without being aggressive enough to look
   like a bug.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes arc-flash-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.7), 0 0 0 6px rgba(83, 74, 183, 0);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(83, 74, 183, 1), 0 0 0 12px rgba(83, 74, 183, 0.18);
    }
}
.arc-flash-highlight {
    animation: arc-flash-pulse 1.4s ease-in-out 2;
    border-radius: 12px;
}

/* =============================================================
   FLAT DESIGN OVERRIDE (v2)

   Approach: explicit class list rather than [class*=...] attribute
   selectors. v1 used wildcard matchers which over-reached and
   stripped radius from child elements that needed it (icon tiles,
   stat cells), causing tiny artifact squares to appear at the
   top-left of cards on single-app pages.

   Rules: container/card/section components → border-radius 0.
   Avatars stay round, buttons + tags stay pill-shaped, hero CTA
   keeps subtle rounding, modals keep popup feel.
   ============================================================= */

/* 1. Containers, cards, sections, lists, panels — go flat */
.arc-container,
.arc-app-card,
.arc-feed,
.arc-feed-card,
.arc-topic-list,
.arc-topic-list--archive,
.arc-topic-row,
.arc-topic-item,
.arc-topic-item--pinned,
.arc-comment,
.arc-comments-list,
.arc-reply,
.arc-tab-bar,
.arc-tab-content,
.arc-tab-panel,
.arc-form-wrap,
.arc-mod-card,
.arc-info-card,
.arc-info-app,
.arc-search-result,
.arc-search-preview,
.arc-search-preview-item,
.arc-newsfeed,
.arc-newsfeed-item,
.arc-settings-card,
.arc-settings-card__head,
.arc-settings-card__body,
.arc-topic-archive__header,
.arc-topic-archive__filter,
.arc-faq-item,
.arc-loan-process,
.arc-loan-process__steps,
.arc-loan-process__body,
.arc-detail-info,
.arc-detail-info__content,
.arc-hero,
.arc-hero__stats,
.arc-fields,
.arc-form,
.arc-app-list,
.arc-mod-pending-section,
.arc-related-apps,
.arc-related-posts,
.arc-banga-promo,
.arc-comment__inner,
.arc-comment__body,
.arc-image-modal__inner,
.arc-suggestion-card,
.arc-empty-state,
.arc-section {
    border-radius: 0 !important;
}

/* 2. Buttons — keep pill */
.arc-btn,
button.arc-btn,
.arc-btn-primary,
.arc-btn-secondary,
.arc-btn-post-topic,
.arc-btn-approve,
.arc-btn-reject,
.arc-btn-approve-comment,
.arc-btn-reject-comment,
.arc-feed-load-more,
.arc-load-more button,
.arc-topic-create__submit,
.arc-modal__close,
.arc-tag-filter__chip,
.arc-topic-tag-filter__chip,
.arc-filter-tag,
/* .arc-topic-tab intentionally NOT here — the create-topic modal
   uses underline-style tabs (XenForo-style), and a pill border-radius
   would round the underlines and break the design. */
.arc-topic-sort__trigger,
.arc-tab,
.arc-stat-pill {
    border-radius: 999px !important;
}

/* 3. Tags / pills / badges — keep pill */
.arc-tag,
.arc-pill,
.arc-badge,
.arc-topic-badge,
.arc-topic-row__tag-pill,
.arc-feed-card__badge,
.arc-comment__tag,
.arc-app-card__tier,
.arc-status-badge,
.arc-gallery-badge,
.arc-topic-tag,
.arc-tab__count {
    border-radius: 999px !important;
}

/* 4. Avatars — must be circular */
.arc-avatar,
.arc-avatar--xs,
.arc-avatar--sm,
.arc-avatar--md,
.arc-avatar--lg,
.arc-avatar img,
.arc-comment__avatar,
.arc-feed-card__avatar,
.arc-search-result__avatar,
.arc-app-picker__result img,
.arc-app-picker__selected img,
.arc-search-preview-item__meta img,
.arc-topic-row__avatar img,
.arc-topic-row__last-avatar img,
img.avatar,
img.gravatar,
.art-avatar {
    border-radius: 50% !important;
}

/* 5. Logo / image thumbs — subtle rounding */
.arc-app-card__icon,
.arc-app-card__icon img,
.arc-app-icon,
.arc-app-icon img,
.arc-info-app__icon,
.arc-stat-icon,
.arc-comment__images img,
.arc-feed-card__images img,
.arc-topic-images img,
.arc-image-thumb,
.arc-image-thumb img,
.arc-thumbnail {
    border-radius: 8px !important;
}

/* 6. Inputs — soft rounding for legibility */
.arc-input,
.arc-textarea,
.arc-select,
.arc-search input[type="text"],
input.arc-input,
textarea.arc-textarea {
    border-radius: 6px !important;
}

/* 7. Hero / CTA banner — slight rounding (per spec) */
.arc-hero__cta,
.arc-cta,
.arc-banner,
.arc-banner img,
.arc-promo,
.arc-promo img,
.arc-banga-promo__banner,
.arc-banga-promo__banner img {
    border-radius: 12px !important;
}

/* 8. Modals + dropdowns — popup feel */
.arc-modal,
.arc-modal__inner,
.arc-popup,
.arc-dropdown,
.arc-dropdown-menu,
.arc-tooltip,
.arc-topic-menu__dropdown,
.arc-comment-menu__dropdown,
.arc-move-app-popup__inner,
.arc-toast,
#arc-topic-move-app-modal .arc-modal {
    border-radius: 10px !important;
}

/* 9. Native form controls — leave to browser */
input[type="checkbox"],
input[type="radio"] {
    border-radius: revert !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOPIC CREATE MODAL — Variant 2 (tag-first layout)
   ───────────────────────────────────────────────────────────────────
   Replaces the legacy comment-style "Đăng chủ đề" modal. Tabs at
   the top set the topic category; the rest of the form (app picker,
   title, content, images) sits below in a clean linear stack.

   Inherits .arc-modal-overlay / .arc-modal positioning + show/hide
   (.visible class) from the existing modal CSS — we only style the
   inner contents here.
   ═══════════════════════════════════════════════════════════════════ */
.arc-topic-modal {
    max-width: 520px;
    width: 100%;
}
.arc-topic-modal .arc-modal__header {
    align-items: flex-start;
    border-bottom: 1px solid #f0eee8;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.arc-topic-modal__sub {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0;
}
.arc-topic-modal__body {
    /* Constrained height so very long forms (multiple image rows)
       still scroll inside the modal instead of pushing the footer
       off-screen. ~60vh leaves room for header + footer on phones. */
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 2px;
}

/* Tag tabs — XenForo-style underline tabs, not pills. The active
   tab gets a 2px purple underline that ties into the brand color. */
.arc-topic-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8e6e0;
    margin-bottom: 16px;
}
.arc-topic-tab {
    background: none;
    border: 0;
    padding: 9px 14px;
    font-size: 13px;
    color: #888780;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    transition: color .12s, border-color .12s;
}
.arc-topic-tab:hover {
    color: #534AB7;
}
.arc-topic-tab--active {
    color: #534AB7;
    border-bottom-color: #534AB7;
    font-weight: 500;
}
.arc-topic-tab__icon {
    font-size: 14px;
    line-height: 1;
}

/* VTC notice banner — only shown when "Vay Thành Công" tab is
   active. Subtle teal background to differentiate from errors. */
.arc-topic-modal__notice {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.arc-topic-modal__notice--vtc {
    background: #E1F5EE;
    color: #0F6E56;
}
.arc-topic-modal__notice-icon {
    flex-shrink: 0;
    line-height: 1;
}

/* Field group — consistent vertical rhythm between all 4 fields */
.arc-topic-modal__field {
    margin-bottom: 14px;
}
.arc-topic-modal__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2c2c2a;
    margin-bottom: 6px;
}
.arc-topic-modal__required {
    color: #E24B4A;
    font-size: 13px;
}
.arc-topic-modal__hint {
    font-size: 11px;
    color: #b4b2a9;
    font-weight: 400;
    margin-left: auto;
}
.arc-topic-modal__input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #d1d1c7;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
    background: #fff;
}
.arc-topic-modal__input:focus {
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83, 74, 183, .12);
}
.arc-topic-modal__textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* App picker dropdown — uses the existing search backend, just
   reskinned. Selected state hides the search and shows a card. */
.arc-topic-modal__app-dropdown {
    border: 1px solid #d1d1c7;
    border-radius: 8px;
    overflow: hidden;
}
.arc-topic-modal__app-dropdown .arc-topic-modal__input {
    border: 0;
    border-bottom: 1px solid #f0eee8;
    border-radius: 8px 8px 0 0;
}
.arc-topic-modal__app-list {
    max-height: 220px;
    overflow-y: auto;
}
.arc-topic-modal__selected-app {
    /* Filled in by JS when user picks an app — see existing
       app-pick logic in app-review.js. */
    margin-bottom: 4px;
}

/* Image preview row */
.arc-topic-modal__media {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.arc-topic-modal__previews {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.arc-topic-modal__upload-btn {
    background: #fff;
    border: 1px solid #d1d1c7;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12px;
    color: #5f5e5a;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.arc-topic-modal__upload-btn:hover {
    background: #fafaf6;
    border-color: #534AB7;
    color: #534AB7;
}

/* Footer buttons */
.arc-topic-modal__footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0eee8;
}
.arc-topic-modal__btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #d1d1c7;
    background: #fff;
    transition: background .12s, transform .04s;
}
.arc-topic-modal__btn:active {
    transform: scale(.98);
}
.arc-topic-modal__btn--ghost {
    color: #5f5e5a;
}
.arc-topic-modal__btn--ghost:hover {
    background: #fafaf6;
}
.arc-topic-modal__btn--primary {
    background: #534AB7;
    color: #fff;
    border-color: #534AB7;
}
.arc-topic-modal__btn--primary:hover {
    background: #3C3489;
    border-color: #3C3489;
}
.arc-topic-modal__btn--primary:disabled {
    background: #AFA9EC;
    border-color: #AFA9EC;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   APP PICKER MODAL — step 1 of topic creation (XenForo-style)
   Lets user choose which app to post in BEFORE the compose form.
   ═══════════════════════════════════════════════════════════════════ */
.arc-app-picker {
    max-width: 560px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.arc-app-picker__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    background: #fff;
}
.arc-app-picker__search-wrap {
    position: sticky;
    top: 0;
    padding: 16px 20px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 2;
}
.arc-app-picker__search {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
}
.arc-app-picker__search:focus {
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83,74,183,0.12);
}
.arc-app-picker__list {
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    max-height: 60vh;
    padding: 8px 0;
}
.arc-app-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f7f7fb;
}
.arc-app-picker-item:hover {
    background: #f4f4f7;
}
.arc-app-picker-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #534AB7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}
.arc-app-picker-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-app-picker-item__info {
    flex: 1;
    min-width: 0;
}
.arc-app-picker-item__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-app-picker-item__meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.arc-app-picker-item__count {
    font-size: 12px;
    color: #534AB7;
    font-weight: 600;
    background: #EEEDFE;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.arc-app-picker__empty {
    /* Legacy class kept for older markup if cached. New markup
       uses .arc-app-picker__empty-cta below. */
    text-align: center;
    padding: 32px 20px;
    color: #666;
}

/* New empty-state CTA — sits directly below the search input so
   the action ("create app + topic") is right where the user's eye
   already is when they realize there's no match. */
.arc-app-picker__empty-cta {
    margin-top: 10px;
    padding: 12px 14px;
    background: #F4F2FF;
    border: 1px solid #d4cef5;
    border-radius: 10px;
}
.arc-app-picker__empty-cta-text {
    font-size: 12.5px;
    color: #534AB7;
    margin-bottom: 8px;
    line-height: 1.4;
}
.arc-app-picker__empty-cta-text span {
    font-weight: 600;
}
.arc-app-picker__empty-cta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #534AB7;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
}
.arc-app-picker__empty-cta-btn:hover {
    background: #3C3489;
}
.arc-app-picker__empty-cta-btn:active {
    transform: scale(0.985);
}
.arc-app-picker__empty-cta-btn strong {
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   TOPIC MODAL — locked app card + back arrow
   ═══════════════════════════════════════════════════════════════════ */
.arc-topic-modal__back {
    background: none;
    border: none;
    font-size: 22px;
    color: #534AB7;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.12s;
}
.arc-topic-modal__back:hover {
    background: #EEEDFE;
}
.arc-topic-modal__locked-app {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 0 0 16px;
    background: #F4F4F7;
    border: 1px solid #e8e8ee;
    border-radius: 10px;
}
.arc-topic-modal__locked-app-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #534AB7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}
.arc-topic-modal__locked-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-topic-modal__locked-app-info {
    flex: 1;
    min-width: 0;
}
.arc-topic-modal__locked-app-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}
.arc-topic-modal__locked-app-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.arc-topic-modal__locked-app-change {
    background: #fff;
    border: 1px solid #d4d4dc;
    color: #534AB7;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.arc-topic-modal__locked-app-change:hover {
    background: #EEEDFE;
}

@media (max-width: 600px) {
    /* Picker — fullscreen on mobile. Eliminates the strip of
       background visible around a centered modal that read as
       "still on main page" and pulled attention away. */
    #arc-app-picker-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }
    .arc-app-picker {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh; /* iOS Safari URL-bar aware */
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .arc-app-picker__body {
        flex: 1;
        min-height: 0;
    }
    .arc-app-picker__list {
        max-height: none;
        flex: 1;
    }
    /* Beef up the X — small target on touch is fiddly */
    #arc-app-picker-modal .arc-modal__close {
        font-size: 28px;
        padding: 6px 12px;
        min-width: 44px;
        min-height: 44px;
    }
    .arc-app-picker__search-wrap { padding: 12px 14px 10px; }
    .arc-app-picker-item { padding: 12px 14px; }
    .arc-app-picker-item__icon { width: 36px; height: 36px; }
    .arc-topic-modal__locked-app { padding: 10px 12px; gap: 10px; }
    .arc-topic-modal__locked-app-icon { width: 32px; height: 32px; }
    .arc-topic-modal__locked-app-title { font-size: 13px; }
}

/* Mobile — tighter padding, smaller tabs that wrap if needed */
@media (max-width: 600px) {
    /* Compose modal also fullscreen on mobile — same reason as
       picker: needs full attention, the form is multi-field. */
    #arc-topic-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }
    .arc-topic-modal {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    #arc-topic-modal .arc-modal__close {
        font-size: 28px;
        padding: 6px 12px;
        min-width: 44px;
        min-height: 44px;
    }
    .arc-topic-tabs {
        gap: 0;
        flex-wrap: wrap;
    }
    .arc-topic-tab {
        padding: 8px 10px;
        font-size: 12px;
    }
    .arc-topic-modal__body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   /app/ ARCHIVE — 2-column card grid, newest first, 12/page.
   Replaces the tier-split layout. Each card is an <article> wrapping
   an <a> with SoftwareApplication microdata so SERP rich snippets
   work; the grid wrapper carries ItemList.
   ═══════════════════════════════════════════════════════════════════ */
.arc-archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 24px;
}
.arc-archive-card {
    margin: 0;
}
.arc-archive-card__link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
    height: 100%;
}
.arc-archive-card__link:hover {
    border-color: #534AB7;
    box-shadow: 0 2px 8px rgba(83, 74, 183, 0.1);
}
.arc-archive-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.arc-archive-card__icon-wrap {
    flex-shrink: 0;
}
.arc-archive-card__head-text {
    flex: 1;
    min-width: 0;
}
.arc-archive-card__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f1f1f;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-archive-card__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #999;
    margin-top: 3px;
}
.arc-archive-card__date svg,
.arc-archive-card__date i {
    color: #aaa;
    flex-shrink: 0;
}
.arc-archive-card__rating-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}
.arc-archive-card__rating-num {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}
.arc-archive-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-top: 3px;
}
.arc-archive-card__star {
    display: inline-flex;
    line-height: 1;
}
.arc-archive-card__star--on { color: #BA7517; }
.arc-archive-card__star--off { color: #D3D1C7; }
.arc-archive-card__tagline {
    font-size: 13px;
    color: #666;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.9em;
}
.arc-archive-card__metrics {
    display: flex;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    color: #999;
}
.arc-archive-card__metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1;
}
.arc-archive-card__metric svg,
.arc-archive-card__metric i {
    color: #aaa;
    flex-shrink: 0;
}

/* Pagination — numbered page links + prev/next */
.arc-pagi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 28px 0 16px;
}
.arc-pagi__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d4d2eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #534AB7;
    text-decoration: none;
    background: #fff;
    transition: background .12s, border-color .12s, color .12s;
}
.arc-pagi__item:hover {
    background: #f6f5fc;
    border-color: #534AB7;
}
.arc-pagi__item.current {
    background: #534AB7;
    border-color: #534AB7;
    color: #fff;
    cursor: default;
}
.arc-pagi__item.dots {
    border: none;
    color: #888;
    background: transparent;
    pointer-events: none;
    min-width: 22px;
    padding: 0 4px;
}
.arc-pagi__item.prev,
.arc-pagi__item.next {
    gap: 6px;
    padding: 0 14px;
}
.arc-pagi__nav-icon {
    font-size: 16px;
    line-height: 1;
}
.arc-pagi__nav-label {
    font-size: 13px;
}

@media (max-width: 700px) {
    .arc-archive-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .arc-archive-card__name {
        font-size: 14px;
    }
    .arc-archive-card__tagline {
        font-size: 12px;
        min-height: 2.7em;
    }
    .arc-archive-card__metric {
        font-size: 10px;
        gap: 3px;
    }
    .arc-archive-card__metrics {
        gap: 10px;
    }
    .arc-pagi__item {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }
    .arc-pagi__nav-label {
        display: none;
    }
}