/* PKL design system — token ngữ nghĩa + thành phần dùng chung (docs/04-ux-ui/design-system-audit.md).
   Nạp sau site.css. Màu ngữ nghĩa đều đạt tương phản ≥ 4.5:1 (đã tính). */
:root {
  --pkl-success: #2E9E5B; --pkl-success-soft: #EAF7EE; --pkl-success-ink: #1B5E20;
  --pkl-info: #2B72B8;    --pkl-info-soft: #DCEBFA;    --pkl-info-ink: #124A7C;
  --pkl-danger: #C73A3A;  --pkl-danger-soft: #FDECEC;  --pkl-danger-ink: #8A1C1C;
  --pkl-neutral-soft: #E9EEEB; --pkl-neutral-ink: #3F4F46;
}

/* Trạng thái giải: một component, bảy trạng thái. Nghĩa màu: xám = nháp, xanh dương = mở, vàng = chờ,
   xanh sân đậm = đang diễn ra, xanh lá = xong, xám đậm = đã chốt (khoá), đỏ = huỷ. */
.st { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; font-weight: 500; }
.st::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }
.st-draft { background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); }
.st-registrationopen { background: var(--pkl-info-soft); color: var(--pkl-info-ink); }
.st-registrationclosed { background: var(--pkl-warn-bg); color: var(--pkl-warn-ink); }
.st-inprogress { background: var(--pkl-brand); color: #fff; }
.st-finished { background: #D6F0D8; color: var(--pkl-success-ink); }
.st-locked { background: #3C4A43; color: #fff; }
.st-cancelled { background: #FBDADA; color: var(--pkl-danger-ink); }

/* Thông báo: lỗi (role=alert) đỏ, kết quả (role=status) xanh lá, còn lại giữ kiểu trung tính. Có biểu tượng để không chỉ dựa vào màu. */
.alert-light { position: relative; padding-left: 2.6rem; }
.alert-light::before { position: absolute; left: .9rem; top: .75rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: .75rem; line-height: 1.15rem;
  text-align: center; font-weight: 700; color: #fff; background: var(--pkl-info); content: "i"; }
.alert-light[role="status"] { background: var(--pkl-success-soft); border-left-color: var(--pkl-success); }
.alert-light[role="status"]::before { content: "\2713"; background: var(--pkl-success); }
.alert-light[role="alert"] { background: var(--pkl-danger-soft); border-left-color: var(--pkl-danger); }
.alert-light[role="alert"]::before { content: "!"; background: var(--pkl-danger); }
.alert-light[data-testid="warning"], .alert-light[data-testid="blockers"] { background: var(--pkl-warn-bg); border-left-color: #E0A100; }
.alert-light[data-testid="warning"]::before, .alert-light[data-testid="blockers"]::before { content: "!"; background: #B07A00; }

/* Hành động nguy hiểm: viền/chữ đỏ, nền đỏ khi rê chuột */
.btn-danger-soft { --bs-btn-color: var(--pkl-danger-ink); --bs-btn-border-color: #E3A3A3; --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--pkl-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--pkl-danger);
  --bs-btn-active-bg: #A82E2E; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #A82E2E; }

/* Hộp thoại xác nhận chuẩn (dialog gốc): thẻ trắng bo 14px như các thẻ khác, nền mờ xanh đen */
dialog.pkl-confirm { border: 1px solid var(--pkl-line); border-radius: 14px; padding: 1.5rem; max-width: min(460px, 92vw); width: 100%; color: var(--pkl-ink);
  background: var(--pkl-card); box-shadow: 0 24px 60px rgba(16, 38, 27, .28); }
dialog.pkl-confirm::backdrop { background: rgba(16, 38, 27, .5); backdrop-filter: blur(2px); }
dialog.pkl-confirm h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .4rem; padding-left: 2.4rem; position: relative; line-height: 1.8rem; }
dialog.pkl-confirm h2::before { content: "!"; position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; text-align: center; font-weight: 700;
  background: var(--pkl-info-soft); color: var(--pkl-info-ink); }
dialog.pkl-confirm.pc-danger h2::before { background: var(--pkl-danger-soft); color: var(--pkl-danger-ink); }
dialog.pkl-confirm p { margin: 0 0 1rem; padding-left: 2.4rem; font-size: .9rem; line-height: 1.45; }
dialog.pkl-confirm .pc-fields { margin: 0 0 .25rem; }
dialog.pkl-confirm .pc-fields .form-control, dialog.pkl-confirm .pc-fields .form-select { width: 100%; min-height: 44px; font-size: .95rem; }
dialog.pkl-confirm .pc-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--pkl-line); }
dialog.pkl-confirm .pc-actions .btn { min-width: 92px; font-weight: 500; }

/* Khung Quản trị: thanh trên đậm để nhận ra ngay đang ở khu làm việc */
.pkl-header-admin { background: var(--pkl-ink); }
.pkl-header-admin .admin-tag { margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: var(--pkl-accent); color: var(--pkl-on-accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* Ảnh đại diện: ảnh tròn, hoặc chữ cái tên trên nền màu cố định theo người */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; font-weight: 600; line-height: 1; vertical-align: middle; user-select: none; }
.avatar-c0 { background: #CDEBD8; color: #0B5A38; }
.avatar-c1 { background: #D4E4F7; color: #124A7C; }
.avatar-c2 { background: #F6E3B8; color: #6B4A00; }
.avatar-c3 { background: #E9D6F0; color: #5B2A7A; }
.avatar-c4 { background: #F6D3D3; color: #8A1C1C; }
.avatar-c5 { background: #D5E8E8; color: #1D5757; }
.name-with-avatar { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }

/* Menu tài khoản ở góc phải thanh trên */
.user-menu-btn { display: inline-flex; align-items: center; gap: .5rem; padding: 3px 10px 3px 3px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent; color: #fff; font-weight: 500; font-size: .9rem; cursor: pointer; }
.user-menu-btn:hover, .user-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); border-color: #fff; }
.user-menu-btn:focus-visible { outline: 2px solid var(--pkl-accent); outline-offset: 2px; }
.user-menu-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .user-menu-btn { padding: 3px; } }
.user-menu-list { min-width: 230px; border-color: var(--pkl-line); border-radius: 12px; padding: .4rem; box-shadow: 0 12px 32px rgba(16, 38, 27, .18); }
.user-menu-list .dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .92rem; }
.user-menu-list .dropdown-item:hover { background: var(--pkl-brand-soft); color: var(--pkl-ink); }
.user-menu-list .dropdown-item.text-danger:hover { background: var(--pkl-danger-soft); color: var(--pkl-danger-ink) !important; }
.user-menu-head { padding: .5rem .75rem .6rem; border-bottom: 1px solid var(--pkl-line); margin-bottom: .3rem; }
.rank-no { min-width: 1.4rem; text-align: right; }
.min-w-0 { min-width: 0; }

/* ===== Trang chi tiết giải (/giai/{slug}) ===== */
.page-wide { max-width: 1080px; }
.btn-accent { background: var(--pkl-accent); color: var(--pkl-on-accent); border: 0; font-weight: 600; border-radius: 12px; padding: .65rem 1.4rem; }
.btn-accent:hover, .btn-accent:focus { background: #D8F76A; color: var(--pkl-on-accent); }
.t-back { display: inline-block; margin-bottom: .5rem; }

.t-hero { position: relative; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0B5A38 0%, #0F7B4F 55%, #19935F 100%); box-shadow: 0 10px 30px rgba(15, 123, 79, .22); }
.t-hero-bg { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(circle at 92% 12%, rgba(200, 240, 60, .35) 0, rgba(200, 240, 60, 0) 38%), radial-gradient(circle at 80% 110%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 45%); }
.t-hero-bg::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .07); }
.t-hero-body { position: relative; padding: 1.4rem 1.25rem 1.5rem; }
.t-hero-cancelled, .t-hero-draft { background: linear-gradient(135deg, #3C4A43, #56655D); box-shadow: none; }
.t-hero-finished, .t-hero-locked { background: linear-gradient(135deg, #123F2C, #1B6C47); }
.t-hero-hint { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.t-title { font-size: clamp(1.45rem, 4.5vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: .7rem 0 .8rem; color: #fff; }
.t-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .95rem; color: rgba(255, 255, 255, .92); }
.t-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.t-meta svg { width: 18px; height: 18px; fill: none; stroke: var(--pkl-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.t-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.t-deadline { font-size: .9rem; color: rgba(255, 255, 255, .9); }
.t-deadline-urgent { color: var(--pkl-accent); }
.t-hero .badge { font-size: .8rem; }
.t-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pkl-accent); }
.t-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF5A4F; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(255, 90, 79, .6); animation: t-pulse 1.6s infinite; }
.t-live .t-live-dot { margin-right: 0; }
@keyframes t-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 79, 0); } }
@media (prefers-reduced-motion: reduce) { .t-live-dot { animation: none; } }

/* Dải thông tin chính: 2x2 trên điện thoại, 4 cột từ 768px */
.t-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1rem 0 1.25rem; }
@media (min-width: 768px) { .t-facts { grid-template-columns: repeat(4, 1fr); gap: .85rem; } }
.t-fact { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .8rem 1rem; min-width: 0; }
.t-fact-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 600; }
.t-fact-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--pkl-brand-dark); line-height: 1.25; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.t-fact-value small { font-size: .85rem; font-weight: 500; color: var(--pkl-ink-2); letter-spacing: 0; }
.t-fact-text { font-size: 1.05rem; line-height: 1.35; }
.t-fact-sub { font-size: .8rem; color: var(--pkl-ink-2); margin-top: .1rem; }
.t-fact-urgent { border-color: #E0A100; background: #FFF8E1; }
.t-fact-urgent .t-fact-value { color: #8A5A00; }

/* Bố cục: nội dung chính + cột phụ dính khi cuộn (≥992px) */
.t-layout { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .t-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .t-side { position: sticky; top: 1rem; } }
.t-side { display: grid; gap: .85rem; }
.t-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: 1rem; }
.t-card-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 600; margin-bottom: .6rem; }
.t-contact { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--pkl-line); font-size: .9rem; }
.t-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.t-stats b { display: block; font-size: 1.6rem; color: var(--pkl-brand-dark); line-height: 1.2; }
.t-stats span { font-size: .78rem; color: var(--pkl-ink-2); }

.t-tabs { border-bottom: 1px solid var(--pkl-line); margin-bottom: 1rem; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.t-tabs .nav-link { white-space: nowrap; font-weight: 600; color: var(--pkl-ink-2); padding: .7rem .9rem; }
.t-tabs .nav-link.active { color: var(--pkl-brand-dark); }
.t-count { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); font-size: .75rem; text-align: center; margin-left: .25rem; }
.t-panes { min-height: 8rem; }

/* Thẻ nội dung thi đấu: 1 cột điện thoại, 2 cột từ 768px */
.t-events { display: grid; gap: .85rem; }
@media (min-width: 768px) { .t-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-event { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; transition: box-shadow .15s, border-color .15s; }
.t-event:hover { border-color: #B9D6C6; box-shadow: 0 6px 18px rgba(16, 38, 27, .08); }
.t-event-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.t-event-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3; }
.t-event-title a { text-decoration: none; color: var(--pkl-ink); }
.t-event-title a:hover { color: var(--pkl-brand); }
.t-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.t-chips span { font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); }
.t-slot-bar { height: 8px; border-radius: 4px; background: var(--pkl-line); overflow: hidden; }
.t-slot-bar span { display: block; height: 100%; background: var(--pkl-brand); border-radius: 4px; }
.t-slot-bar .t-slot-full { background: #E0A100; }
.t-slot-text { font-size: .85rem; color: var(--pkl-ink-2); margin-top: .35rem; }
.t-slot-text b { color: var(--pkl-ink); }
.t-event-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .2rem; }
.t-event-foot .btn { min-width: 110px; }
.t-link { font-weight: 600; font-size: .9rem; text-decoration: none; }

.t-info { margin: 0; display: grid; gap: .1rem; }
.t-info dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 600; margin-top: .9rem; }
.t-info dt:first-child { margin-top: 0; }
.t-info dd { margin: 0; font-size: 1rem; }
.t-court { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-left: 4px solid var(--pkl-brand); border-radius: 12px; padding: .8rem 1rem; height: 100%; }
.t-court-idle { border-left-color: var(--pkl-line); background: #FAFCFA; }
.t-court-time { font-size: .78rem; font-weight: 600; color: var(--pkl-brand-dark); background: var(--pkl-brand-soft); padding: .15rem .6rem; border-radius: 999px; }
.t-court-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; margin-top: .4rem; font-weight: 600; }
.t-court-vs i { font-style: normal; font-size: .75rem; color: var(--pkl-ink-2); text-transform: uppercase; }
.t-court-vs span:last-child { text-align: right; }

/* ===== Trang nội dung thi đấu (/giai/{slug}/noi-dung/{id}) ===== */
.t-hero-compact .t-hero-body { padding: 1.2rem 1.25rem 1.3rem; }
.t-hero-compact .t-title { margin-bottom: .6rem; }
.t-chips-light span { background: rgba(255, 255, 255, .16); color: #fff; }
.t-progress { margin-top: 1rem; max-width: 420px; }
.t-progress-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.t-progress-bar span { display: block; height: 100%; background: var(--pkl-accent); border-radius: 4px; }
.t-progress-text { font-size: .85rem; margin-top: .35rem; color: rgba(255, 255, 255, .92); }
.avatar-stack { display: inline-flex; flex: none; }
.avatar-stack .avatar { border: 2px solid #fff; }
.avatar-stack .avatar + .avatar { margin-left: -10px; }

/* Bục vinh danh */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-top: 1rem; }
.podium-item { position: relative; text-align: center; padding: 1.4rem .75rem 1rem; border-radius: 14px; background: var(--pkl-card); border: 1px solid var(--pkl-line); }
.podium-1 { background: linear-gradient(180deg, #FFF6D6, #fff 70%); border-color: #EBCB62; }
.podium-2 { background: linear-gradient(180deg, #EEF2F5, #fff 70%); border-color: #C4CDD4; }
.podium-3 { background: linear-gradient(180deg, #F8E7D8, #fff 70%); border-color: #D9AE87; }
.podium-medal { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: #B0B8BE; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.podium-1 .podium-medal { background: #D9A400; width: 32px; height: 32px; }
.podium-2 .podium-medal { background: #8E99A2; }
.podium-3 .podium-medal { background: #B8743E; }
.podium-item .avatar-stack { margin-bottom: .5rem; }
.podium-name { font-weight: 700; line-height: 1.3; }
.podium-label { font-size: .78rem; color: var(--pkl-ink-2); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }

/* Bảng vòng tròn */
.t-groups { display: grid; gap: 1rem; }
@media (min-width: 992px) { .t-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gt { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; overflow: hidden; }
.gt-head { padding: .7rem 1rem; font-weight: 700; background: #F3F7F3; border-bottom: 1px solid var(--pkl-line); }
.gt-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gt-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pkl-ink-2); font-weight: 600; padding: .55rem .75rem; text-align: left; }
.gt-table td { padding: .6rem .75rem; border-top: 1px solid var(--pkl-line); font-variant-numeric: tabular-nums; }
.gt-table .gt-rank { width: 2.5rem; }
.gt-first td { background: #F6FBF7; }
.gt-pos { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; font-weight: 700; background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); }
.gt-pos-1 { background: #D9A400; color: #fff; }
.gt-pos-2 { background: #8E99A2; color: #fff; }
.gt-pos-3 { background: #B8743E; color: #fff; }
.gt-plus { color: var(--pkl-success-ink); font-weight: 600; }
.gt-minus { color: var(--pkl-danger-ink); }

/* Nhánh đấu: các cột theo vòng, cuộn ngang khi hẹp */
.br-rounds { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: stretch; scroll-snap-type: x proximity; }
.br-round { flex: 0 0 min(280px, 82vw); display: flex; flex-direction: column; scroll-snap-align: start; }
.br-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pkl-ink-2); margin-bottom: .6rem; }
.br-list { display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; flex: 1; }
.br-match { margin: 0 !important; box-shadow: 0 1px 3px rgba(16, 38, 27, .06); }
.br-match > div { align-items: center; }
.br-live { border-color: var(--pkl-brand); box-shadow: 0 0 0 2px rgba(15, 123, 79, .18); }
.br-score { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--pkl-ink-2); white-space: nowrap; }

/* Thẻ trận */
.mt-list { display: grid; gap: .75rem; }
@media (min-width: 992px) { .mt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .8rem 1rem; }
.mt-live { border-color: var(--pkl-brand); box-shadow: 0 0 0 2px rgba(15, 123, 79, .15); }
.mt-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--pkl-ink-2); }
.mt-status { font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); white-space: nowrap; }
.mt-status-inplay { background: var(--pkl-brand); color: #fff; }
.mt-status-completed, .mt-status-walkover, .mt-status-retired { background: #D6F0D8; color: var(--pkl-success-ink); }
.mt-status-ready { background: var(--pkl-info-soft); color: var(--pkl-info-ink); }
.mt-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin-top: .6rem; }
.mt-team { font-weight: 500; min-width: 0; }
.mt-team-r { text-align: right; }
.mt-team-r .name-with-avatar { flex-direction: row-reverse; text-align: right; }
.mt-won { font-weight: 700; color: var(--pkl-brand-dark); }
.mt-score { font-weight: 700; font-size: .95rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--pkl-ink); min-width: 3.2rem; }
.mt-planned { margin-top: .5rem; font-size: .8rem; color: var(--pkl-ink-2); }

/* Đơn vị */
.un-grid { display: grid; gap: .65rem; }
@media (min-width: 768px) { .un-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.un-card { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .7rem 1rem; }
.un-members { display: grid; gap: .45rem; min-width: 0; }
.un-seed { text-align: center; flex: none; padding: .3rem .7rem; border-radius: 10px; background: var(--pkl-brand-soft); }
.un-seed b { display: block; font-size: 1.05rem; color: var(--pkl-brand-dark); font-variant-numeric: tabular-nums; }
.un-seed span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pkl-ink-2); }
@media (max-width: 575.98px) { .podium-1 { grid-column: 1 / -1; } }

/* Tab Trận đấu: nhóm theo bảng → lượt */
.mt-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mt-filter button { border: 1px solid var(--pkl-line); background: var(--pkl-card); color: var(--pkl-ink-2); border-radius: 999px; padding: .35rem .95rem; font-size: .88rem; font-weight: 600; cursor: pointer; }
.mt-filter button.active { background: var(--pkl-brand); border-color: var(--pkl-brand); color: #fff; }
.mt-group + .mt-group { margin-top: 1.75rem; }
.mt-group-title { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--pkl-brand); }
.mt-group-title span { font-size: .8rem; font-weight: 500; color: var(--pkl-ink-2); }
.mt-round + .mt-round { margin-top: 1rem; }
.mt-round-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pkl-ink-2); margin-bottom: .5rem; display: flex; align-items: center; gap: .6rem; }
.mt-round-title::after { content: ""; flex: 1; height: 1px; background: var(--pkl-line); }
.mt-round-title small { order: 2; font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mt-top:has(span:first-child:empty) { justify-content: flex-end; }
@media (max-width: 575.98px) {
  .mt-teams { grid-template-columns: 1fr auto; grid-template-areas: "t1 sc" "t2 sc"; gap: .45rem .75rem; }
  .mt-teams > :nth-child(1) { grid-area: t1; }
  .mt-teams > :nth-child(2) { grid-area: sc; align-self: center; text-align: right; font-size: .9rem; max-width: 7.5rem; }
  .mt-teams > :nth-child(3) { grid-area: t2; text-align: left; }
  .mt-team-r .name-with-avatar { flex-direction: row; text-align: left; }
}


/* ===== Thương hiệu pickclub, thanh trên, chân trang ===== */
.brand-word { font-weight: 700; letter-spacing: -.02em; font-size: 1.25rem; color: #fff; }
.brand-word b { font-weight: 700; color: var(--pkl-accent); }
.brand-word-dark { color: var(--pkl-brand-dark); font-size: 1.1rem; }
.brand-word-dark b { color: var(--pkl-brand); }
.pkl-header .navbar-brand { gap: .55rem; }
.pkl-header .nav-links a { position: relative; padding: .3rem 0; }
.pkl-header .nav-links a.active { color: #fff; font-weight: 600; }
.pkl-header .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--pkl-accent); }
.site-footer { margin-top: 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--pkl-line); font-size: .85rem; color: var(--pkl-ink-2); }
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; }
.site-footer a { color: var(--pkl-ink-2); }
@media (min-width: 768px) { .site-footer { padding-bottom: 1.5rem; } }
body.no-bottomnav .site-footer { padding-bottom: 1.5rem; }

/* ===== Nền tảng giao diện dùng chung (đồng bộ mọi trang) ===== */
main h1.h5 { font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
main .h6, main h2.h6 { font-weight: 700; }
.form-label { font-weight: 600; font-size: .85rem; color: var(--pkl-ink); margin-bottom: .3rem; }
.form-control, .form-select { border-radius: 12px; }
.btn { border-radius: 12px; }
.btn-primary { box-shadow: 0 1px 2px rgba(11, 90, 56, .25); }
.btn-lg { font-size: 1.05rem; }
.card { border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 38, 27, .04); }
.list-group-item { padding: .85rem 1rem; }

/* Bộ lọc dạng viên thuốc: chữ xám trên nền trắng, mục đang chọn xanh sân */
.nav-pills .nav-link { background: var(--pkl-card); border: 1px solid var(--pkl-line); padding: .4rem 1rem; font-size: .9rem; }
.nav-pills .nav-link:hover { border-color: #B9D6C6; color: var(--pkl-brand-dark); }
.nav-pills .nav-link.active { background: var(--pkl-brand); border-color: var(--pkl-brand); color: #fff; }
.nav-pills .nav-item + .nav-item { margin-left: 0; }

/* Tab gạch chân (nav-tabs, nav-underline) cùng kiểu với trang giải */
.nav-tabs { border-bottom: 1px solid var(--pkl-line); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-weight: 600; color: var(--pkl-ink-2); padding: .7rem .9rem; margin-bottom: -1px; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--pkl-brand-dark); border-bottom-color: #B9D6C6; }
.nav-tabs .nav-link.active { color: var(--pkl-brand-dark); background: transparent; border-bottom-color: var(--pkl-brand); }
.nav-underline .nav-link { font-size: .95rem; font-weight: 600; padding: .6rem .8rem; }

/* Tiêu đề trang + hành động */
.pg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .25rem 0 1rem; flex-wrap: wrap; }
.pg-head h1 { margin: 0; }
.pg-sub { color: var(--pkl-ink-2); font-size: .95rem; margin-top: .15rem; }

/* Banner đầu trang danh sách */
.pg-hero { position: relative; overflow: hidden; border-radius: 18px; color: #fff; padding: 1.4rem 1.25rem 1.3rem; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, #0B5A38 0%, #0F7B4F 55%, #19935F 100%); box-shadow: 0 10px 30px rgba(15, 123, 79, .2); }
.pg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 92% 10%, rgba(200, 240, 60, .35) 0, rgba(200, 240, 60, 0) 38%), radial-gradient(circle at 78% 115%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 45%); }
.pg-hero::after { content: ""; position: absolute; right: -50px; top: -50px; width: 230px; height: 230px; border-radius: 50%; border: 24px solid rgba(255, 255, 255, .07); pointer-events: none; }
.pg-hero > * { position: relative; z-index: 1; }
.pg-hero h1 { color: #fff; margin: 0 0 .25rem; font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
.pg-hero p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 34rem; }
.pg-hero .form-select, .pg-hero .form-control { background-color: #fff; border: 0; }
.pg-hero-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.pg-hero-tools > * { flex: 1 1 180px; max-width: 320px; }

/* Thẻ giải đấu ở danh sách */
.tc-grid { display: grid; gap: .85rem; }
@media (min-width: 768px) { .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc { display: flex; gap: .9rem; background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 16px; padding: 1rem; text-decoration: none; color: var(--pkl-ink); transition: box-shadow .15s, border-color .15s, transform .15s; }
.tc:hover { border-color: #B9D6C6; box-shadow: 0 8px 22px rgba(16, 38, 27, .1); transform: translateY(-1px); color: var(--pkl-ink); }
.tc-date { flex: none; width: 58px; text-align: center; border-radius: 12px; background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); padding: .45rem 0 .4rem; align-self: flex-start; }
.tc-date b { display: block; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tc-date span { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.tc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.tc-name { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.01em; }
.tc-meta { font-size: .86rem; color: var(--pkl-ink-2); display: flex; flex-direction: column; gap: .15rem; }
.tc-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: .3rem; }
.tc-foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .2rem; }
.tc-foot span { font-size: .78rem; padding: .18rem .6rem; border-radius: 999px; background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); }
.tc-foot .tc-hot { background: #FFF1CC; color: var(--pkl-warn-ink); font-weight: 600; }
.tc-foot .tc-live { background: #FDECEC; color: var(--pkl-danger-ink); font-weight: 600; }

/* Trạng thái trống */
.empty { text-align: center; padding: 2.2rem 1rem; border: 1px dashed #B9D6C6; border-radius: 16px; background: #FAFCFA; color: var(--pkl-ink-2); }
.empty b { display: block; color: var(--pkl-ink); font-size: 1.05rem; margin-bottom: .25rem; }
.empty a { font-weight: 600; }

/* Banner hồ sơ (CLB, VĐV): ảnh lớn + tên + thông tin + hành động */
.ph { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.3rem 1.25rem; }
.ph-avatar { flex: none; border-radius: 50%; padding: 4px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); line-height: 0; }
.ph-avatar .avatar, .ph-avatar img { border-radius: 50%; }
.ph-main { flex: 1 1 220px; min-width: 0; }
.ph-main h1 { margin: 0 0 .15rem !important; }
.ph-meta { font-size: .92rem; color: rgba(255, 255, 255, .9); display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.ph-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ph-tags a, .ph-tags span { font-size: .8rem; font-weight: 600; padding: .22rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.ph-tags a:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.ph-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ph-actions form { margin: 0; }
.btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .6); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--pkl-brand-dark); --bs-btn-hover-border-color: #fff; }
.ph-note { font-size: .88rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 241, 204, .95); color: var(--pkl-warn-ink); font-weight: 600; }

/* Thẻ người (thành viên CLB…) */
.pc-grid { display: grid; gap: .7rem; }
@media (min-width: 768px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc { display: flex; align-items: center; gap: .8rem; background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .8rem 1rem; }
.pc-main { min-width: 0; flex: 1; }
.pc-name { font-weight: 700; text-decoration: none; color: var(--pkl-ink); display: block; line-height: 1.3; }
.pc-name:hover { color: var(--pkl-brand); }
.pc-sub { font-size: .8rem; color: var(--pkl-ink-2); }
.pc-rate { display: flex; gap: .35rem; margin-top: .3rem; flex-wrap: wrap; }
.pc-rate span { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-rate span.dim { background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); font-weight: 500; }

/* Thẻ số liệu lớn (điểm trình) */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.stat { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-top: 4px solid var(--pkl-accent); border-radius: 14px; padding: 1rem; text-align: center; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 600; }
.stat-value { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; color: var(--pkl-brand-dark); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-note { font-size: .82rem; color: var(--pkl-ink-2); }

/* Bảng xếp hạng */
.lb-row { display: flex; align-items: center; gap: .8rem; background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .65rem 1rem; text-decoration: none; color: var(--pkl-ink); transition: border-color .15s, box-shadow .15s; }
.lb-row:hover { border-color: #B9D6C6; box-shadow: 0 4px 14px rgba(16, 38, 27, .08); color: var(--pkl-ink); }
.lb-row + .lb-row { margin-top: .5rem; }
.lb-rank { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--pkl-neutral-soft); color: var(--pkl-neutral-ink); font-variant-numeric: tabular-nums; }
.lb-rank-1 { background: #D9A400; color: #fff; } .lb-rank-2 { background: #8E99A2; color: #fff; } .lb-rank-3 { background: #B8743E; color: #fff; }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-weight: 600; line-height: 1.3; }
.lb-sub { font-size: .8rem; color: var(--pkl-ink-2); }
.lb-score { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--pkl-brand-dark); font-variant-numeric: tabular-nums; }
.lb-me { border-color: var(--pkl-brand); background: #F3FBF6; }
.lb-me-bar { margin-top: .9rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.filter-row > * { flex: 1 1 160px; max-width: 260px; }

/* Lịch sử trận trong hồ sơ */
.hs { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; margin-bottom: .55rem; padding: .7rem 1rem; }
.hs summary { cursor: pointer; list-style: none; }
.hs summary::-webkit-details-marker { display: none; }
.hs-line { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.hs-res { font-weight: 700; font-size: .78rem; padding: .1rem .55rem; border-radius: 999px; margin-right: .4rem; }
.hs-win { background: #D6F0D8; color: var(--pkl-success-ink); } .hs-loss { background: #FBDADA; color: var(--pkl-danger-ink); }
.hs-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-up { color: var(--pkl-success-ink); } .hs-down { color: var(--pkl-danger-ink); }
.hs-detail { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--pkl-line); font-size: .85rem; color: var(--pkl-ink-2); }
.chart-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: .75rem; margin-bottom: .8rem; }

/* Trang đăng nhập, đăng ký… */
.auth-shell { max-width: 440px; margin: 1rem auto 0; }
.auth-brand { text-align: center; margin-bottom: .6rem; }
.auth-brand .brand-word { font-size: 1.6rem; }
.auth-shell h1 { text-align: center; }
.auth-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 18px; padding: 1.4rem; box-shadow: 0 10px 30px rgba(16, 38, 27, .07); }
.auth-card .btn-primary { min-height: 48px; font-weight: 600; }

/* Khối trắng bo góc dùng khắp nơi (form, panel) */
main .bg-white.border.rounded, main .bg-white.border.rounded-3 { border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16, 38, 27, .04); }
.card > .card-body.p-2 { padding: .9rem 1rem !important; }
.list-group { border-radius: 14px; overflow: hidden; }

/* Thông báo */
.nt { display: flex; gap: .8rem; padding: .9rem 1rem; background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; text-decoration: none; color: var(--pkl-ink); margin-bottom: .55rem; transition: border-color .15s; }
.nt:hover { border-color: #B9D6C6; color: var(--pkl-ink); }
.nt-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: transparent; margin-top: .45rem; }
.nt-unread { background: #F6FBF7; border-color: #B9D6C6; box-shadow: none; }
.nt-unread .nt-dot { background: var(--pkl-brand); }
.nt-main { flex: 1; min-width: 0; display: block; }
.nt-title { font-weight: 500; }
.nt-unread .nt-title { font-weight: 700; }
.nt-time { font-size: .78rem; color: var(--pkl-ink-2); white-space: nowrap; }
.nt-body { display: block; font-size: .88rem; color: var(--pkl-ink-2); margin-top: .1rem; }

/* ===== Quản trị: thanh bên theo nhóm, huy hiệu việc chờ, tiêu đề trang ===== */
.adm-title { margin: 0 0 1rem !important; }
.adm-group { display: none; }
.adm-count { display: inline-block; margin-left: .45rem; min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #E0A100; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.35rem; vertical-align: 1px; }
.adm-nav .nav-link.active .adm-count { background: #fff; color: #8A5A00; }
@media (min-width: 992px) {
  .adm-nav .nav-pills .nav-link { background: transparent; border-color: transparent; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
  .adm-nav .nav-pills .nav-link:hover { background: var(--pkl-brand-soft); }
  .adm-nav .nav-pills .nav-link.active { background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); box-shadow: inset 4px 0 0 var(--pkl-brand); }
  .adm-group { display: block; list-style: none; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pkl-ink-2); padding: .9rem .75rem .25rem; }
}

/* ===== Quản lý giải: banner tên giải + tab ===== */
.mn { background: var(--pkl-card); margin: -1rem -12px 1rem; border-bottom: 1px solid var(--pkl-line); box-shadow: 0 6px 18px rgba(16, 38, 27, .06); }
.mn-head { padding: .9rem 1rem 1rem; color: #fff; background: linear-gradient(135deg, #0B5A38, #0F7B4F 60%, #19935F); position: relative; overflow: hidden; }
.mn-head::after { content: ""; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .08); pointer-events: none; }
.mn-back { color: rgba(255, 255, 255, .85); font-size: .85rem; text-decoration: none; }
.mn-back:hover { color: #fff; }
.mn-name { font-size: 1.25rem !important; font-weight: 700; color: #fff; margin: .35rem 0 .5rem; line-height: 1.25; }
.mn-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.mn-public { color: var(--pkl-accent); font-size: .85rem; font-weight: 600; text-decoration: none; }
.mn-public:hover { color: #fff; }
.mn-tabs { padding: 0 .5rem; background: var(--pkl-card); }
.mn-tabs .nav-link { padding: .8rem .75rem; }
.ov-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 14px; padding: 1rem .5rem .8rem; }
.ov-next { border-left: 5px solid var(--pkl-accent); }
.ov-next-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pkl-ink-2); }
@media (min-width: 992px) {
  main.manage-wide:has(> .manage-nav.mn) > .mn { margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 16px; }
  .mn-name { font-size: 1.1rem !important; }
  .mn-tabs { padding: .5rem; }
  .mn .mn-tabs .nav-link { padding: .55rem .8rem; border-radius: 10px; border-bottom: 0 !important; }
  .mn .mn-tabs .nav-link.active { background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); box-shadow: inset 4px 0 0 var(--pkl-brand); }
}

/* Danh sách trận (quản lý): mỗi trận một thẻ */
[data-testid="match-list"] { display: grid; gap: .55rem; border-radius: 0; overflow: visible; }
[data-testid="match-list"] .list-group-item { border: 1px solid var(--pkl-line) !important; border-radius: 12px !important; }
.t-main, .t-side { min-width: 0; }
.t-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .t-layout { grid-template-columns: minmax(0, 1fr) 300px; } }

/* ===== Chi tiết người dùng (Admin) ===== */
.ph-tag-warn { background: rgba(255, 241, 204, .95) !important; color: var(--pkl-warn-ink) !important; }
.ud-layout { display: grid; gap: 1rem; }
@media (min-width: 992px) { .ud-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .ud-side { position: sticky; top: 1rem; } }
.ud-main, .ud-side { display: grid; gap: 1rem; min-width: 0; }
.ud-card { background: var(--pkl-card); border: 1px solid var(--pkl-line); border-radius: 16px; padding: 1.1rem 1.2rem; }
.ud-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .8rem; }
.ud-card-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ud-dl { display: grid; gap: .1rem 1.5rem; margin: 0 0 1rem; }
@media (min-width: 576px) { .ud-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ud-dl dt, .ud-mini dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pkl-ink-2); font-weight: 600; }
.ud-dl dd { margin: 0 0 .6rem; font-weight: 500; }
.ud-ratings { display: grid; gap: .8rem; }
@media (min-width: 640px) { .ud-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ud-rating { border: 1px solid var(--pkl-line); border-top: 4px solid var(--pkl-accent); border-radius: 14px; padding: .9rem 1rem; text-align: center; }
.ud-rating .stat-value { font-size: 2.2rem; }
.ud-rating-meta { margin: .3rem 0 .6rem; }
.ud-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: 0 0 .8rem; padding-top: .6rem; border-top: 1px dashed var(--pkl-line); }
.ud-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ud-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pkl-ink-2); font-weight: 700; margin-bottom: .4rem; }
.ud-line { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--pkl-line); }
.ud-sub + .ud-line { border-top: 0; }
.ud-actions { display: grid; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pkl-line); }
.ud-history { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--pkl-line); display: grid; gap: 1rem; }
.ud-history li { position: relative; }
.ud-history li::before { content: ""; position: absolute; left: calc(-1.1rem - 6px); top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--pkl-brand); box-shadow: 0 0 0 3px var(--pkl-card); }
.ud-h-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem .75rem; }
.ud-h-change { margin-top: .25rem; padding: .35rem .7rem; border-radius: 8px; background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ud-h-reason { margin-top: .3rem; font-size: .88rem; color: var(--pkl-ink-2); }
dialog.pkl-confirm .pc-fields .form-label { margin-top: .6rem; display: block; }
dialog.pkl-confirm .pc-fields .form-label:first-child { margin-top: 0; }
.ug-name { font-weight: 700; color: var(--pkl-ink); text-decoration: none; display: block; line-height: 1.3; }
.ug-name:hover { color: var(--pkl-brand); }
.ug-rate { margin-top: .5rem; }
.ug-actions { margin-top: .6rem; }
@media (min-width: 1200px) { .ug-rate { margin-top: 0; } .ug-actions { margin-top: 0; } .user-head > :nth-child(7) { text-align: right; } .ug-actions { justify-content: flex-end; } }
.adm-title-row { align-items: center; }
.adm-title-row .adm-title { margin: 0 !important; }

/* Thanh trên khu Quản trị gọn một hàng, kể cả điện thoại */
.pkl-header-admin .container { flex-wrap: nowrap; gap: .5rem; }
.pkl-header-admin .navbar-brand { margin-right: 0; flex: none; }
.pkl-header-admin .admin-tag { font-size: .66rem; padding: .08rem .45rem; }
.admin-exit-short { display: none; }
@media (max-width: 575.98px) { .admin-exit-long { display: none; } .admin-exit-short { display: inline; } .pkl-header-admin .btn { padding: .3rem .6rem; } }
.pkl-header-admin .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .pkl-header-admin .btn { font-size: .8rem; } .pkl-header-admin .brand-word { font-size: 1.1rem; } }
dialog.pkl-confirm { text-align: left; }

/* ===== Biểu mẫu tài khoản ===== */
.auth-card .form-label { margin-bottom: .3rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg-opt { position: relative; margin: 0; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span { display: block; text-align: center; padding: .6rem 1rem; min-height: 44px; border: 1px solid #C9DACF; border-radius: 12px; background: #fff; font-weight: 600; color: var(--pkl-ink-2); transition: border-color .15s, background .15s, color .15s; }
.seg-opt input:checked + span { border-color: var(--pkl-brand); background: var(--pkl-brand-soft); color: var(--pkl-brand-dark); box-shadow: 0 0 0 2px rgba(15, 123, 79, .15); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--pkl-brand); outline-offset: 2px; }
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 4.2rem; }
.pw-toggle { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--pkl-brand); font-weight: 600; font-size: .85rem; padding: .35rem .6rem; border-radius: 8px; cursor: pointer; }
.pw-toggle:hover { background: var(--pkl-brand-soft); }
.pw-rules { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding: 0; margin: .45rem 0 .4rem; font-size: .8rem; color: var(--pkl-ink-2); }
.pw-rules li::before { content: "○"; margin-right: .3rem; color: #9DB8AA; }
.pw-rules li.ok { color: var(--pkl-success-ink); font-weight: 600; }
.pw-rules li.ok::before { content: "✓"; color: var(--pkl-success); }
.terms-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; margin: 0; cursor: pointer; }
.terms-check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; accent-color: var(--pkl-brand); }
.auth-sent { text-align: center; }
.auth-sent-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--pkl-brand-soft); color: var(--pkl-brand); }
.auth-sent-icon svg { width: 30px; height: 30px; }
.auth-steps { text-align: left; counter-reset: s; list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.auth-steps li { counter-increment: s; display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.auth-steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--pkl-brand); color: #fff; }
.legal { max-width: 720px; margin: 0 auto; }
.legal h2 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.legal p, .legal li { line-height: 1.6; }
.seg-opt input:checked + span { border-color: var(--pkl-brand); background: var(--pkl-brand); color: #fff; }