/* cho-acc.css - Chợ ACC + Gian hàng CTV (10/10/2026). Dùng cho /cho-acc, /gian-hang-ctv, /gian-hang/<slug>, /cho-acc/ho-so. */
.ca-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid rgba(255,122,61,.3); background: linear-gradient(120deg, rgba(255,122,61,.14), rgba(55,214,200,.08)); }
.ca-hero h1 { margin: 0 0 6px; font-size: 1.5rem; }
.ca-hero p { margin: 0; color: var(--ink-300); font-size: .92rem; max-width: 720px; }
.ca-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-h2 { font-size: 1.1rem; margin: 22px 0 12px; }

.ca-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ca-plan { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.ca-plan:hover { border-color: rgba(255,122,61,.5); }
.ca-plan-name { font-weight: 800; font-size: 1.05rem; color: var(--ink-100); }
.ca-plan-price { color: var(--ink-400); font-size: .9rem; }
.ca-plan-price .num { font-family: 'Chakra Petch', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--gold); }
.ca-plan ul { margin: 4px 0 8px; padding-left: 18px; color: var(--ink-300); font-size: .86rem; display: grid; gap: 4px; }
.ca-plan .btn { margin-top: auto; text-align: center; }

.ca-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ca-shop { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--ink-100); text-decoration: none; }
.ca-shop:hover { border-color: rgba(55,214,200,.5); }
.ca-shop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-shop-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-shop-meta { font-size: .78rem; color: var(--ink-400); }
.ca-ava { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--ember), #c43d7a); border: 2px solid rgba(255,255,255,.12); }
.ca-ava-lg { width: 84px; height: 84px; font-size: 2rem; }
.ca-user { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan); font-weight: 700; font-size: .84rem; }

/* Thẻ acc */
.ca-card-game { font-size: .72rem; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.ca-seller .ca-user { padding: 4px 10px; border-radius: 999px; font-size: .74rem; background: rgba(55,214,200,.12); border: 1px solid rgba(55,214,200,.3); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.ca-seller .ca-user svg { flex-shrink: 0; }

/* Hồ sơ */
.ca-me-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.ca-me-id { flex: 1 1 220px; min-width: 0; }
.ca-me-id h1 { margin: 0 0 2px; font-size: 1.4rem; overflow-wrap: anywhere; }
.ca-me-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ca-me-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--ink-300); background: var(--panel-hi); border: 1px solid var(--line); }
.ca-st { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; margin-left: 4px; }
.ca-st-on { background: rgba(53,196,106,.15); color: #7fe3a3; border: 1px solid rgba(53,196,106,.35); }
.ca-st-off { background: rgba(229,32,46,.15); color: #ff9aa3; border: 1px solid rgba(229,32,46,.35); }
.ca-st-wait { background: rgba(247,207,125,.12); color: #f7cf7d; border: 1px solid rgba(247,207,125,.3); }
.ca-btn-zalo { background: #0068ff; color: #fff; border: 0; }
.ca-btn-fb { background: #1877f2; color: #fff; border: 0; }
.ca-bio { margin-top: 12px; color: var(--ink-300); font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }

.ca-slots { margin-top: 14px; }
.ca-slots-txt { font-size: .86rem; color: var(--ink-300); margin-bottom: 6px; }
.ca-bar { height: 8px; border-radius: 99px; background: var(--panel-hi); border: 1px solid var(--line); overflow: hidden; }
.ca-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); }

.ca-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.ca-stat { padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ca-stat .l { font-size: .74rem; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; }
.ca-stat .v { font-family: 'Chakra Petch', sans-serif; font-size: 1.35rem; font-weight: 700; margin-top: 4px; color: var(--ink-100); overflow-wrap: anywhere; }
.ca-stat .s { font-size: .78rem; color: var(--ink-400); margin-top: 2px; }

.ca-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ca-box { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ca-box h2 { font-size: 1.05rem; margin: 0 0 12px; }
.ca-check { display: flex !important; align-items: center; gap: 6px; font-weight: 400 !important; font-size: .8rem; margin-top: 6px; }
.ca-check input { width: auto !important; margin: 0; }
.ca-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ca-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ca-plan-row .btn { padding: 8px 14px; }
.ca-plan-row .btn[disabled] { opacity: .4; cursor: not-allowed; }
.ca-mini > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: .86rem; color: var(--ink-300); border-bottom: 1px dashed var(--line); }
.ca-mini > div:last-child { border-bottom: 0; }
.ca-mini > div > span:first-child { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 860px) {
    .ca-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ca-hero { padding: 16px; }
    .ca-hero h1 { font-size: 1.25rem; }
    .ca-hero-btns, .ca-me-btns { width: 100%; }
    .ca-hero-btns .btn, .ca-me-btns .btn { flex: 1 1 auto; text-align: center; }
    .ca-row2 { grid-template-columns: 1fr; }
    .ca-stats { grid-template-columns: 1fr 1fr; }
    .ca-ava-lg { width: 66px; height: 66px; font-size: 1.6rem; }
    .ca-me-id h1 { font-size: 1.2rem; }
}
/* Quy định / cảnh báo phạt (sửa 10/10/2026) */
.ca-warn { border-color: rgba(247,207,125,.4); background: linear-gradient(120deg, rgba(247,207,125,.07), var(--panel)); }
.ca-warn h2 { color: #f7cf7d; }
.ca-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-300); font-size: .9rem; line-height: 1.5; }
.ca-rules b { color: var(--ink-100); }

/* Nhãn hình thức bàn giao FF trên thẻ acc Chợ ACC (10/10/2026) - views/partials/handover_chip.php */
.ho-chip { margin-top: 6px; padding: 4px 8px; border-radius: 8px; font-size: .74rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ho-chip-safe { color: #7fe3a3; background: rgba(53,196,106,.12); border: 1px solid rgba(53,196,106,.4); }
.ho-chip-full { color: #f7cf7d; background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.4); }

/* Tên gian hàng trên thẻ acc (bấm mở profile gian hàng) - 10/10/2026 */
.ca-shop-link { margin: 0; padding: 0 12px 10px; text-decoration: none; }
.ca-shop-link:hover .ca-user { background: rgba(55,214,200,.22); }
@media (max-width: 640px) { .ca-shop-link { padding: 0 9px 8px; } }