/* GENERATED from docs/design/main/{styles,components}.css by scripts/build-dcl-css.mjs — do not edit. */
/* Court Luxe — design tokens (5 themes) + base + layout.
   Single stylesheet, merged from the former styles.css…styles4.css cascade.
   Component library lives in components.css (loaded after this file). */

/* ============ Court Luxe — tokens: 5 themes ============ */
.dcl-root.dcl-root, .dcl-root.dcl-root[data-theme="midnight-volt"]{
  --bg:#0A0B0E; --surface:#121419; --surface-2:#1A1D24; --surface-3:#232732;
  --border:#262B35; --border-strong:#3A4150;
  --text:#F4F5F7; --text-2:#9AA1AE; --text-3:#5C6370;
  --accent:#C8F135; --accent-ink:#0A0B0E; --accent-soft:rgba(200,241,53,.13);
  --gold:#E8C36A; --gold-ink:#1A1406; --gold-soft:rgba(232,195,106,.14);
  --success:#4ADE80; --danger:#F87171; --warning:#FBBF24; --info:#60A5FA;
  --glow:0 0 24px rgba(200,241,53,.25);
  --scrim:rgba(0,0,0,.55); --modal-shadow:0 24px 64px rgba(0,0,0,.4);
  --img-a:#1B2030; --img-b:#0E1118; color-scheme:dark;
}
.dcl-root.dcl-root[data-theme="royal-gold"]{
  --bg:#0C0A08; --surface:#151210; --surface-2:#1E1A16; --surface-3:#28221C;
  --border:#2E2820; --border-strong:#4A3F30;
  --text:#F5F1E8; --text-2:#A99F8C; --text-3:#6B6355;
  --accent:#D9B45B; --accent-ink:#171207; --accent-soft:rgba(217,180,91,.13);
  --gold:#D9B45B; --gold-ink:#171207; --gold-soft:rgba(217,180,91,.14);
  --success:#66BB8A; --danger:#E5737B; --warning:#E5A93D; --info:#7FA6D9;
  --glow:0 0 24px rgba(217,180,91,.22);
  --scrim:rgba(0,0,0,.55); --modal-shadow:0 24px 64px rgba(0,0,0,.4);
  --img-a:#26201A; --img-b:#120E0A; color-scheme:dark;
}
.dcl-root.dcl-root[data-theme="ocean-smash"]{
  --bg:#070B14; --surface:#0D1322; --surface-2:#141C30; --surface-3:#1C2640;
  --border:#1F2A45; --border-strong:#31405F;
  --text:#EDF2FB; --text-2:#8E9BB5; --text-3:#55617A;
  --accent:#22D3EE; --accent-ink:#04252B; --accent-soft:rgba(34,211,238,.13);
  --gold:#E8C36A; --gold-ink:#1A1406; --gold-soft:rgba(232,195,106,.14);
  --success:#34D399; --danger:#FB7185; --warning:#FBBF24; --info:#818CF8;
  --glow:0 0 24px rgba(34,211,238,.25);
  --scrim:rgba(0,0,0,.55); --modal-shadow:0 24px 64px rgba(0,0,0,.4);
  --img-a:#182642; --img-b:#0A101F; color-scheme:dark;
}
.dcl-root.dcl-root[data-theme="ivory-club"]{
  --bg:#F7F4EC; --surface:#FFFFFF; --surface-2:#F1EDE2; --surface-3:#E8E2D2;
  --border:#E2DCCB; --border-strong:#C9C0A8;
  --text:#1E2318; --text-2:#6B7060; --text-3:#9DA090;
  --accent:#2F5D3E; --accent-ink:#F7F4EC; --accent-soft:rgba(47,93,62,.10);
  --gold:#B08D3E; --gold-ink:#FFFDF5; --gold-soft:rgba(176,141,62,.14);
  --success:#3E8E5A; --danger:#C4484F; --warning:#C28B1E; --info:#3B6EA8;
  --glow:0 8px 24px rgba(47,93,62,.14);
  --scrim:rgba(30,25,15,.45); --modal-shadow:0 24px 64px rgba(30,25,15,.18);
  --img-a:#E9E3D3; --img-b:#D8D0BA; color-scheme:light;
}
.dcl-root.dcl-root[data-theme="sunset-rally"]{
  --bg:#FBF7F3; --surface:#FFFFFF; --surface-2:#F5EEE7; --surface-3:#EDE3D8;
  --border:#EADFD3; --border-strong:#D4C2AE;
  --text:#231A15; --text-2:#78685C; --text-3:#A79A8E;
  --accent:#F25C3B; --accent-ink:#FFF6F2; --accent-soft:rgba(242,92,59,.11);
  --gold:#C79A3B; --gold-ink:#FFFDF5; --gold-soft:rgba(199,154,59,.14);
  --success:#3E9E6B; --danger:#D64550; --warning:#D9942B; --info:#4A7DBF;
  --glow:0 8px 24px rgba(242,92,59,.18);
  --scrim:rgba(35,26,21,.45); --modal-shadow:0 24px 64px rgba(30,25,15,.18);
  --img-a:#F1E7DA; --img-b:#E3D4C2; color-scheme:light;
}

/* ============ base ============ */
.dcl-root.dcl-root *{box-sizing:border-box;margin:0;padding:0}
.dcl-root.dcl-root{-webkit-text-size-adjust:100%}
.dcl-root.dcl-root{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.6;
  transition:background .25s ease,color .25s ease;
}
.dcl-root.dcl-root button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.dcl-root.dcl-root .display{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
.dcl-root.dcl-root .lux{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
.dcl-root.dcl-root .overline{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1.3}
.dcl-root.dcl-root .caption{font-size:13px;font-weight:500;color:var(--text-2);line-height:1.45}
.dcl-root.dcl-root .tnum{font-variant-numeric:tabular-nums}

/* ============ showcase shell ============ */
.dcl-root.dcl-root .shell{max-width:1280px;margin:0 auto;padding:32px 24px 80px}
.dcl-root.dcl-root .shell-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;margin-bottom:28px}
.dcl-root.dcl-root .shell-title{font-size:clamp(40px,6vw,72px)}
.dcl-root.dcl-root .shell-title .lux{color:var(--accent)}
.dcl-root.dcl-root .shell-sub{color:var(--text-2);max-width:520px;font-size:14px}
.dcl-root.dcl-root .theme-bar{display:flex;gap:10px;align-items:center;margin-left:auto}
.dcl-root.dcl-root .theme-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border-strong);position:relative;transition:transform .15s ease}
.dcl-root.dcl-root .theme-dot:hover{transform:scale(1.12)}
.dcl-root.dcl-root .theme-dot.active{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.dcl-root.dcl-root .screen-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.dcl-root.dcl-root .screen-nav button{
  padding:8px 16px;border-radius:999px;background:var(--surface-2);
  color:var(--text-2);font-size:13px;font-weight:500;border:1px solid transparent;
  transition:all .15s ease;
}
.dcl-root.dcl-root .screen-nav button:hover{background:var(--surface-3);color:var(--text)}
.dcl-root.dcl-root .screen-nav button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.dcl-root.dcl-root .stage{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start}
.dcl-root.dcl-root .stage-note{max-width:320px;font-size:14px;color:var(--text-2)}
.dcl-root.dcl-root .stage-note h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.dcl-root.dcl-root .stage-note ul{padding-left:18px;display:grid;gap:6px}

/* phone frame */
.dcl-root.dcl-root .phone{
  width:390px;height:800px;border-radius:44px;background:var(--bg);
  border:1px solid var(--border-strong);box-shadow:var(--modal-shadow);
  overflow:hidden;position:relative;flex-shrink:0;
}
.dcl-root.dcl-root .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:999px;background:var(--surface-3);z-index:60;opacity:.9}
.dcl-root.dcl-root .screen{position:absolute;inset:0;overflow-y:auto;display:none;scrollbar-width:none;padding-top:48px}
.dcl-root.dcl-root .screen::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .screen.active{display:block}
.dcl-root.dcl-root .screen.with-tabs{padding-bottom:88px}

/* ============ app components ============ */
.dcl-root.dcl-root .appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:8px 16px 12px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)}
.dcl-root.dcl-root .appbar h1{font-size:36px;font-weight:700;line-height:1.15}
.dcl-root.dcl-root .appbar .spacer{flex:1}
.dcl-root.dcl-root .icon-btn{width:44px;height:44px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all .15s ease;position:relative}
.dcl-root.dcl-root .icon-btn:hover{background:var(--surface-3);color:var(--text)}
.dcl-root.dcl-root .icon-btn svg{width:20px;height:20px}
/* Appbar chuẩn (chốt 2026-08): nút back LUÔN ghost (chỉ mũi tên, không nền), hành động
   chính bên phải là .btn-pill accent có nhãn — không dùng icon-btn nền accent đặc.
   Nút icon TRÊN APPBAR cỡ 38×38 / radius 12 (chuẩn lấy từ màn Đấu trường) — KHÔNG set
   width/height/border-radius inline ở từng màn nữa. */
.dcl-root.dcl-root .icon-btn.ghost{background:transparent;width:34px;height:34px;margin-left:-6px}
.dcl-root.dcl-root .appbar .icon-btn{flex:none;width:38px;height:38px;border-radius:12px}
.dcl-root.dcl-root .appbar .icon-btn svg{width:19px;height:19px}
.dcl-root.dcl-root .appbar .icon-btn.ghost{width:34px;height:34px;border-radius:12px}
.dcl-root.dcl-root .appbar .icon-btn.ghost svg{width:20px;height:20px}
/* .lux trong tiêu đề appbar LUÔN accent (global — trước đây chỉ scope trong .hsx) */
.dcl-root.dcl-root .appbar .display .lux{color:var(--accent)}
/* hành động chính trên appbar: icon 38px nền accent-soft, glyph accent (chốt 2026-08) */
.dcl-root.dcl-root .icon-btn.accent{background:var(--accent-soft);color:var(--accent)}
.dcl-root.dcl-root .icon-btn.accent:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.dcl-root.dcl-root .icon-btn.ghost:hover{background:transparent;color:var(--text)}
.dcl-root.dcl-root .icon-btn.ghost svg{width:22px;height:22px}
/* .sm — biến thể duy nhất được phép nhỏ hơn 34px: nút icon nằm TRONG một hàng chữ (vd bút
   chì sửa mốc mùa ở .now .top), nơi 34px làm vỡ hàng. Vẫn giữ radius 12 của thang DS.
   Đừng set width/height/radius inline ở từng màn — dùng class này (thêm 2026-08-28). */
.dcl-root.dcl-root .icon-btn.ghost.sm{width:30px;height:30px;border-radius:12px;margin-left:0}
.dcl-root.dcl-root .icon-btn.ghost.sm svg{width:18px;height:18px}
.dcl-root.dcl-root .btn-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;white-space:nowrap}
.dcl-root.dcl-root .btn-pill svg{width:15px;height:15px}
.dcl-root.dcl-root .btn-pill.quiet{background:var(--accent-soft);color:var(--accent)}
.dcl-root.dcl-root .icon-btn .dot-badge{position:absolute;top:8px;right:8px;min-width:16px;height:16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.dcl-root.dcl-root .pad{padding:0 16px}

.dcl-root.dcl-root .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;transition:all .15s ease;width:100%}
.dcl-root.dcl-root .btn-primary{background:var(--accent);color:var(--accent-ink)}
.dcl-root.dcl-root .btn-primary:hover{filter:brightness(1.06);box-shadow:var(--glow)}
.dcl-root.dcl-root .btn-primary:active{transform:scale(.97)}
.dcl-root.dcl-root .btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.dcl-root.dcl-root .btn-secondary:hover{background:var(--surface-2)}
.dcl-root.dcl-root .btn-ghost{color:var(--text-2)}
.dcl-root.dcl-root .btn-ghost:hover{background:var(--surface-2)}
.dcl-root.dcl-root .btn-sm{height:38px;padding:0 18px;font-size:13px;width:auto}
.dcl-root.dcl-root .sticky-cta{position:sticky;bottom:0;padding:12px 16px 24px;background:linear-gradient(transparent,var(--bg) 40%)}

.dcl-root.dcl-root .chiprow{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 4px;scrollbar-width:none}
.dcl-root.dcl-root .chiprow::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .chip{flex-shrink:0;padding:7px 15px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:13px;font-weight:500;border:1px solid transparent;transition:all .15s ease;display:flex;align-items:center;gap:6px}
.dcl-root.dcl-root .chip.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.dcl-root.dcl-root .chip-gold{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}

.dcl-root.dcl-root .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.dcl-root.dcl-root .lcard{border-radius:20px;background:var(--surface);border:1px solid var(--border);overflow:hidden;transition:all .15s ease;position:relative}
.dcl-root.dcl-root .lcard:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.dcl-root.dcl-root .limg{aspect-ratio:1;background:linear-gradient(145deg,var(--img-a),var(--img-b));display:flex;align-items:center;justify-content:center;position:relative}
.dcl-root.dcl-root .limg svg{width:56%;height:56%;color:var(--text-3);opacity:.85}
.dcl-root.dcl-root .lsave{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.dcl-root.dcl-root .lsave svg{width:16px;height:16px}
.dcl-root.dcl-root .lsave.saved{color:var(--danger)}
.dcl-root.dcl-root .lseller{position:absolute;bottom:8px;left:8px;padding:3px 8px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:700;display:flex;gap:3px;align-items:center}
.dcl-root.dcl-root .ledit{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:999px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--text)}
.dcl-root.dcl-root .ledit svg{width:15px;height:15px}
.dcl-root.dcl-root .lbody{padding:12px}
.dcl-root.dcl-root .lname{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.dcl-root.dcl-root .lprice{font-size:16px;font-weight:700;margin-top:4px}
.dcl-root.dcl-root .lmeta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--text-2)}
.dcl-root.dcl-root .lcond{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-2)}
.dcl-root.dcl-root .status-pill{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.dcl-root.dcl-root .st-live{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.dcl-root.dcl-root .st-draft{background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--warning)}
.dcl-root.dcl-root .st-sold{background:var(--surface-3);color:var(--text-3)}

.dcl-root.dcl-root .field{display:grid;gap:6px;margin-bottom:16px}
.dcl-root.dcl-root .field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.dcl-root.dcl-root .input{height:48px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);padding:0 16px;font:inherit;font-size:15px;color:var(--text);width:100%;outline:none;transition:all .15s ease}
.dcl-root.dcl-root .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Placeholder = gợi ý, KHÔNG bằng cỡ chữ người dùng nhập: nhỏ hơn 2px + màu text-3.
   Dùng chung mọi input/textarea toàn app (global, 2026-08). */
.dcl-root.dcl-root .input::placeholder,.dcl-root.dcl-root textarea.input::placeholder{font-size:13px;font-weight:400;color:var(--text-3);opacity:1}
.dcl-root.dcl-root .input.error{border-color:var(--danger)}
.dcl-root.dcl-root textarea.input{height:auto;min-height:96px;padding:12px 16px;resize:none}
.dcl-root.dcl-root .err-pill{font-size:11px;font-weight:600;color:var(--danger);display:flex;gap:4px;align-items:center}
.dcl-root.dcl-root .search-wrap{position:relative;flex:1}
.dcl-root.dcl-root .search-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-3)}
.dcl-root.dcl-root .search-wrap .input{border-radius:999px;padding-left:44px}

.dcl-root.dcl-root .pinrow{display:flex;gap:8px;justify-content:center}
.dcl-root.dcl-root .pincell{width:48px;height:56px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-size:28px;font-weight:700;transition:all .15s ease}
.dcl-root.dcl-root .pincell.filled{border-color:var(--border-strong)}
.dcl-root.dcl-root .pincell.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dcl-root.dcl-root .pincell.err{border-color:var(--danger)}

.dcl-root.dcl-root .tabbar{position:absolute;bottom:0;left:0;right:0;height:76px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:10px;z-index:50}
.dcl-root.dcl-root .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font-size:10px;font-weight:600;position:relative}
.dcl-root.dcl-root .tab svg{width:22px;height:22px}
.dcl-root.dcl-root .tab.active{color:var(--accent)}
.dcl-root.dcl-root .tab.active::before{content:'';position:absolute;top:-10px;width:4px;height:4px;border-radius:999px;background:var(--accent)}
.dcl-root.dcl-root .tab .fab{width:52px;height:52px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:var(--glow)}
.dcl-root.dcl-root .tab .fab svg{width:24px;height:24px}
.dcl-root.dcl-root .tab .badge{position:absolute;top:-4px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:999px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

.dcl-root.dcl-root .avatar{border-radius:16px;background:linear-gradient(145deg,var(--img-a),var(--img-b));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-2);flex-shrink:0}
.dcl-root.dcl-root .stars{color:var(--gold);letter-spacing:1px;font-size:13px}
.dcl-root.dcl-root .gold-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.dcl-root.dcl-root .trust-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:700}

.dcl-root.dcl-root .card{border-radius:20px;background:var(--surface);border:1px solid var(--border);padding:20px}
.dcl-root.dcl-root .row-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);transition:all .15s ease}
.dcl-root.dcl-root .row-card:hover{background:var(--surface-2)}
/* Row-card = CHIỀU CAO CỐ ĐỊNH (global, 2026-08): tiêu đề 1 dòng + phụ đề 1 dòng, dài thì
   cắt "…". Bản đầy đủ xem ở bottom sheet chi tiết khi chạm vào card — KHÔNG cho card cao
   lên theo nội dung, danh sách phải giữ nhịp đều. .row-card.tall = biến thể có capbar. */
.dcl-root.dcl-root .row-card{height:66px;box-sizing:border-box;overflow:hidden}
.dcl-root.dcl-root .row-card.tall{height:74px}
.dcl-root.dcl-root .row-card>div>b,.dcl-root.dcl-root .row-card>div>.caption{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcl-root.dcl-root .divider{height:1px;background:var(--border);margin:16px 0}

.dcl-root.dcl-root .bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5}
.dcl-root.dcl-root .bubble.in{background:var(--surface-2);border-bottom-left-radius:6px;align-self:flex-start}
.dcl-root.dcl-root .bubble.out{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-bottom-right-radius:6px;align-self:flex-end}
.dcl-root.dcl-root .msg-time{font-size:10px;color:var(--text-3);margin-top:2px}

.dcl-root.dcl-root .sheet-demo{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;background:var(--scrim);backdrop-filter:blur(4px)}
.dcl-root.dcl-root .sheet{background:var(--surface);border-radius:24px 24px 0 0;padding:8px 20px 28px;max-height:78%;overflow-y:auto}
/* QUY TẮC CHUNG (chốt 2026-08): mọi vùng cuộn TRONG khung máy (sheet, modal, list trong
   popup) KHÔNG hiện thanh cuộn thường trực — app là mobile, thanh cuộn desktop cắt ngang
   bo góc sheet trông rất kỳ. Cuộn bằng vuốt/lăn. Chỉ trang web thật (shell index, DS doc)
   mới giữ thanh cuộn hệ thống. */
.dcl-root.dcl-root .sheet,.dcl-root.dcl-root .modal,.dcl-root.dcl-root .reg-card,.dcl-root.dcl-root .reg-body,.dcl-root.dcl-root .pick-list,.dcl-root.dcl-root .dd-list,.dcl-root.dcl-root .scroll-y{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.dcl-root.dcl-root .sheet::-webkit-scrollbar,.dcl-root.dcl-root .modal::-webkit-scrollbar,.dcl-root.dcl-root .reg-card::-webkit-scrollbar,.dcl-root.dcl-root .reg-body::-webkit-scrollbar,.dcl-root.dcl-root .pick-list::-webkit-scrollbar,.dcl-root.dcl-root .dd-list::-webkit-scrollbar,.dcl-root.dcl-root .scroll-y::-webkit-scrollbar{width:0;height:0}
.dcl-root.dcl-root .sheet-handle{width:36px;height:4px;border-radius:999px;background:var(--border-strong);margin:8px auto 16px}

/* Bottom sheet MỞ ĐƯỢC — scrim mờ + panel ở đáy khung. Đóng bằng chạm nền mờ hoặc chạm handle.
   Mở = thêm class .on lên .sheetov. Xem design-system.html#popups.

   (2026-08-18) ẨN/HIỆN BẰNG `display`, KHÔNG TRANSITION — và ĐỪNG ĐẮP LẠI.
   Bản #43 để trạng thái mở phụ thuộc HOÀN TOÀN vào transition: đóng =
   `opacity:0; visibility:hidden` + panel `translateY(100%)`, mở = chờ transition chạy tới đích.
   Nhưng đồng hồ animation có thể ĐỨNG HẲN (`document.timeline.currentTime` kẹt ở 0 — cùng gốc
   với việc setTimeout không tick), khi đó computed value kẹt ở giá trị ĐẦU: sheet có class .on
   mà vẫn `visibility:hidden`, panel vẫn nằm dưới đáy khung ⇒ người dùng bấm và "không có gì
   xảy ra" (đo được 2026-08-18: `.on` = true, visibility hidden, panel top 799px trong khung cao
   800px, 5 giây sau vẫn y nguyên). Không có cách nào vừa animate vừa an toàn khi đồng hồ đứng —
   mọi transition/animation kẹt ở frame đầu đều ẩn mất panel — nên sheet nay hiện TỨC THÌ:
   mất hiệu ứng trượt từ đáy của DESIGN.md §11.5, đổi lấy việc LUÔN MỞ ĐƯỢC. App thật muốn giữ
   hiệu ứng thì thêm ở tầng app, nhưng ĐỪNG để trạng thái mở phụ thuộc vào nó.
   Kèm lợi: `display:none` khi đóng cũng gỡ nỗi lo của #43 về hàng chục lớp backdrop-filter nằm
   sẵn trong render tree. */
.dcl-root.dcl-root .sheetov{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;justify-content:flex-end;
  background:var(--scrim)}
.dcl-root.dcl-root .sheetov.on{display:flex;backdrop-filter:blur(4px)}
/* Trong doc/khung máy (.phone), sheet phải nằm trong khung chứ không phủ cả trang web */
.dcl-root.dcl-root .phone .sheetov{position:absolute;z-index:130}
.dcl-root.dcl-root .sheetov>.sheet{width:100%;max-width:480px;margin:0 auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}

.dcl-root.dcl-root .progress-dots{display:flex;gap:6px;padding:0 16px;margin-bottom:20px}
.dcl-root.dcl-root .pdot{flex:1;height:3px;border-radius:999px;background:var(--surface-3)}
.dcl-root.dcl-root .pdot.done{background:var(--text-3)}
.dcl-root.dcl-root .pdot.now{background:var(--accent)}

.dcl-root.dcl-root .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.dcl-root.dcl-root .cat-card{border-radius:20px;border:1px solid var(--border);background:var(--surface);padding:18px 16px;display:flex;flex-direction:column;gap:10px;transition:all .15s ease}
.dcl-root.dcl-root .cat-card svg{width:28px;height:28px;color:var(--text-2)}
.dcl-root.dcl-root .cat-card span{font-size:14px;font-weight:600}
.dcl-root.dcl-root .cat-card.sel{border-color:var(--accent);background:var(--accent-soft)}
.dcl-root.dcl-root .cat-card.sel svg{color:var(--accent)}

.dcl-root.dcl-root .photo-grid{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.dcl-root.dcl-root .photo-cell{width:96px;height:96px;flex-shrink:0;border-radius:14px;position:relative;background:linear-gradient(145deg,var(--img-a),var(--img-b));display:flex;align-items:center;justify-content:center}
.dcl-root.dcl-root .photo-cell svg{width:36px;height:36px;color:var(--text-3)}
.dcl-root.dcl-root .photo-add{border:1.5px dashed var(--border-strong);background:transparent;color:var(--text-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:600}
.dcl-root.dcl-root .photo-del{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

.dcl-root.dcl-root .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:64px 32px}
.dcl-root.dcl-root .empty svg{width:56px;height:56px;color:var(--text-3)}
.dcl-root.dcl-root .empty h3{font-size:16px;font-weight:600}
.dcl-root.dcl-root .empty p{font-size:14px;color:var(--text-2)}

/* MỘT component thông báo tạm cho cả app. Biến thể phân biệt bằng CLASS (.ok / .err) — tuyệt đối
   không ghi đè inline trong doc. z-index 140 để toast luôn nổi trên bottom-sheet (.sheetov z-index
   130) và popup canh giữa; trước đây chỗ nào cần thế phải tự ghi đè inline. */
.dcl-root.dcl-root .toast{position:absolute;bottom:96px;left:16px;right:16px;background:var(--surface-3);border-radius:14px;padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:13px;font-weight:500;z-index:140;box-shadow:var(--modal-shadow)}
.dcl-root.dcl-root .toast.ok svg{color:var(--success)}
/* báo lỗi: viền + icon đỏ, KHÔNG dùng dấu ✓ — icon là #i-info */
.dcl-root.dcl-root .toast.err{background:color-mix(in srgb,var(--danger) 14%,var(--surface-3));border:1px solid color-mix(in srgb,var(--danger) 45%,transparent)}
.dcl-root.dcl-root .toast.err svg{color:var(--danger)}
/* nhắc/chặn nhẹ (không phải lỗi): viền + icon vàng — icon là #i-info (thêm 2026-08-27,
   dùng cho "bạn chưa được đăng ký buổi này" ở màn Sảnh). */
.dcl-root.dcl-root .toast.warn{background:color-mix(in srgb,var(--warning) 13%,var(--surface-3));border:1px solid color-mix(in srgb,var(--warning) 45%,transparent)}
.dcl-root.dcl-root .toast.warn svg{color:var(--warning)}
.dcl-root.dcl-root .notif-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);flex-shrink:0}

.dcl-root.dcl-root .hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,var(--accent-soft),transparent 55%);pointer-events:none}
.dcl-root.dcl-root .carousel{aspect-ratio:1;background:linear-gradient(145deg,var(--img-a),var(--img-b));display:flex;align-items:center;justify-content:center;position:relative}
.dcl-root.dcl-root .carousel svg{width:52%;height:52%;color:var(--text-3)}
.dcl-root.dcl-root .car-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.dcl-root.dcl-root .car-dots i{width:6px;height:6px;border-radius:999px;background:var(--text-3);opacity:.5}
.dcl-root.dcl-root .car-dots i.on{background:var(--text);opacity:1}
.dcl-root.dcl-root .spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.dcl-root.dcl-root .spec-row span:first-child{color:var(--text-2)}
.dcl-root.dcl-root .spec-row span:last-child{font-weight:600}

@media (max-width:900px){.dcl-root.dcl-root .stage-note{max-width:390px}}
@media (prefers-reduced-motion:reduce){.dcl-root.dcl-root *{transition:none!important;animation:none!important}}

/* ============ Court Luxe — club components (dongcaulong) ============ */
.dcl-root.dcl-root .numpad{display:grid;grid-template-columns:repeat(3,64px);gap:16px;justify-content:center}
.dcl-root.dcl-root .numkey{width:64px;height:64px;border-radius:999px;background:var(--surface-2);font-family:'Barlow Condensed';font-size:26px;font-weight:600;transition:all .12s ease;display:flex;align-items:center;justify-content:center}
.dcl-root.dcl-root .numkey:active{background:var(--accent-soft);color:var(--accent);transform:scale(.94)}
.dcl-root.dcl-root .numkey.ghostkey{background:transparent;font-family:'Be Vietnam Pro';font-size:13px;font-weight:600;color:var(--text-3)}
.dcl-root.dcl-root .pindots{display:flex;gap:14px;justify-content:center}
.dcl-root.dcl-root .pindot{width:14px;height:14px;border-radius:999px;border:1.5px solid var(--border-strong);transition:all .15s ease}
.dcl-root.dcl-root .pindot.on{background:var(--accent);border-color:var(--accent)}
.dcl-root.dcl-root .pindot.bad{background:var(--danger);border-color:var(--danger)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.dcl-root.dcl-root .shake{animation:shake .3s ease}

.dcl-root.dcl-root .seg{display:flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:2px}
.dcl-root.dcl-root .seg button{flex:1;height:38px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);transition:all .2s ease}
.dcl-root.dcl-root .seg button.on{background:var(--accent);color:var(--accent-ink)}

.dcl-root.dcl-root .podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:16px}
.dcl-root.dcl-root .step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:110px}
.dcl-root.dcl-root .step .avatar{width:56px;height:56px;border-radius:999px;font-size:18px}
.dcl-root.dcl-root .step .bar{width:100%;border-radius:14px 14px 0 0;background:var(--surface-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dcl-root.dcl-root .step .pts{font-family:'Barlow Condensed';font-weight:700;font-size:24px}
.dcl-root.dcl-root .step .rank-n{font-family:'Barlow Condensed';font-weight:700;font-size:20px;color:var(--text-3)}
.dcl-root.dcl-root .step.first .avatar{border:2px solid var(--gold);box-shadow:0 0 20px var(--gold-soft)}
.dcl-root.dcl-root .step.first .bar{background:var(--gold-soft);border:1px solid var(--gold)}
.dcl-root.dcl-root .step.first .pts{color:var(--gold)}
.dcl-root.dcl-root .crown{font-size:18px;line-height:1}

.dcl-root.dcl-root .myrank{display:flex;align-items:center;gap:12px;margin:0 16px 16px;padding:14px 16px;border-radius:20px;background:var(--accent-soft);border:1px solid var(--accent)}
.dcl-root.dcl-root .delta-up{color:var(--success);font-size:12px;font-weight:700}
.dcl-root.dcl-root .delta-dn{color:var(--danger);font-size:12px;font-weight:700}
.dcl-root.dcl-root .rank-num{font-family:'Barlow Condensed';font-weight:700;font-size:22px;width:32px;text-align:center;color:var(--text-2);flex-shrink:0}
.dcl-root.dcl-root .rank-num.gold{color:var(--gold)}
.dcl-root.dcl-root .lb-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .lb-row.first{background:var(--gold-soft);border-left:3px solid var(--gold)}
.dcl-root.dcl-root .lb-pts{margin-left:auto;font-weight:700;font-size:16px}

.dcl-root.dcl-root .tier{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px}
.dcl-root.dcl-root .tier-dong{background:rgba(184,122,75,.16);color:#B87A4B}
.dcl-root.dcl-root .tier-bac{background:rgba(148,163,184,.16);color:#94A3B8}
.dcl-root.dcl-root .tier-vang{background:var(--gold-soft);color:var(--gold)}
.dcl-root.dcl-root .tier-bkim{background:rgba(94,234,212,.14);color:#5EEAD4}
.dcl-root.dcl-root .tier-kcuong{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.dcl-root.dcl-root .tier-huyen{background:rgba(167,139,250,.15);color:#A78BFA}

.dcl-root.dcl-root .stag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.dcl-root.dcl-root .stag-paid{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.dcl-root.dcl-root .stag-unpaid{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.dcl-root.dcl-root .stag-partial{background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--warning)}
.dcl-root.dcl-root .stag-guest{background:rgba(167,139,250,.15);color:#A78BFA}
.dcl-root.dcl-root .stag-reg{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.dcl-root.dcl-root .stag-full{background:var(--surface-3);color:var(--text-3)}

.dcl-root.dcl-root .capbar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dcl-root.dcl-root .capbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.dcl-root.dcl-root .capbar i.warn{background:var(--warning)}
.dcl-root.dcl-root .dateblock{width:46px;flex-shrink:0;border-radius:12px;background:var(--surface-2);text-align:center;padding:5px 0}
/* hover của row-card cũng là surface-2 -> dateblock phải đậm hơn để không bị hoà nền */
.dcl-root.dcl-root .row-card:hover .dateblock{background:var(--surface-3)}
.dcl-root.dcl-root .dateblock .dow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.dcl-root.dcl-root .dateblock .dom{font-family:'Barlow Condensed';font-weight:700;font-size:20px;line-height:1}
/* biến thể compact cho danh sách dày (sheet, popup) */
.dcl-root.dcl-root .dateblock.sm{width:38px;border-radius:9px;padding:3px 0}
.dcl-root.dcl-root .dateblock.sm .dow{font-size:8px;letter-spacing:.04em}
.dcl-root.dcl-root .dateblock.sm .dom{font-size:15px}

.dcl-root.dcl-root .livecard{border-radius:20px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--glow);padding:16px;position:relative}
@keyframes pulse{50%{opacity:.35}}
.dcl-root.dcl-root .livedot{width:8px;height:8px;border-radius:999px;background:var(--danger);animation:pulse 1.2s infinite}
/* Buổi CHƯA diễn ra: đốm xám, KHÔNG chớp (user chốt 2026-08-17). Chỉ khi buổi đang chạy mới
   dùng .livedot đỏ nhấp nháy — dùng sai làm người ta tưởng có trận đang đánh. */
.dcl-root.dcl-root .livedot.idle{background:var(--text-3);animation:none}
.dcl-root.dcl-root .scoreline{display:flex;align-items:center;justify-content:center;gap:16px}
.dcl-root.dcl-root .score-n{font-family:'Barlow Condensed';font-weight:700;font-size:44px;line-height:1}
.dcl-root.dcl-root .score-sep{color:var(--text-3);font-size:22px}
.dcl-root.dcl-root .team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.dcl-root.dcl-root .team .names{font-size:12px;font-weight:600;text-align:center;line-height:1.3}
.dcl-root.dcl-root .avastack{display:flex}
.dcl-root.dcl-root .avastack .avatar{width:34px;height:34px;border-radius:999px;font-size:12px;border:2px solid var(--surface);margin-left:-8px}
.dcl-root.dcl-root .avastack .avatar:first-child{margin-left:0}
.dcl-root.dcl-root .ptsbadge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.dcl-root.dcl-root .ptsbadge.plus{background:var(--accent-soft);color:var(--accent)}
.dcl-root.dcl-root .ptsbadge.minus{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.dcl-root.dcl-root .wl{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.dcl-root.dcl-root .wl.w{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.dcl-root.dcl-root .wl.l{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}

.dcl-root.dcl-root .badge-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:20px;background:var(--surface);border:1px solid var(--border);text-align:center}
.dcl-root.dcl-root .badge-ico{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:24px}
.dcl-root.dcl-root .badge-cell.locked{opacity:.45;filter:grayscale(1)}
.dcl-root.dcl-root .badge-cell.fresh{border-color:var(--accent);box-shadow:var(--glow)}
.dcl-root.dcl-root .badge-name{font-size:11px;font-weight:600;line-height:1.3}

.dcl-root.dcl-root .stepper{display:flex;align-items:center;gap:12px}
.dcl-root.dcl-root .stepper button{width:34px;height:34px;border-radius:10px;background:var(--surface-3);font-size:17px;font-weight:700}
.dcl-root.dcl-root .stepper b{font-size:16px;min-width:34px;text-align:center}
.dcl-root.dcl-root .tog{width:46px;height:27px;border-radius:999px;background:var(--surface-3);position:relative;transition:background .2s ease;flex-shrink:0}
.dcl-root.dcl-root .tog::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:999px;background:var(--text-3);transition:all .2s ease}
.dcl-root.dcl-root .tog.on{background:var(--accent)}
.dcl-root.dcl-root .tog.on::after{left:22px;background:var(--accent-ink)}

.dcl-root.dcl-root .fab{position:absolute;right:16px;bottom:96px;width:56px;height:56px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);z-index:48}
.dcl-root.dcl-root .fab svg{width:24px;height:24px}
.dcl-root.dcl-root .qr{width:170px;height:170px;margin:0 auto;border-radius:14px;background:
 repeating-linear-gradient(0deg,var(--text) 0 6px,transparent 6px 12px),
 repeating-linear-gradient(90deg,var(--text) 0 6px,var(--surface-2) 6px 12px);opacity:.85}
.dcl-root.dcl-root .notice{margin:0 16px 14px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--warning) 12%,transparent);border:1px solid color-mix(in srgb,var(--warning) 40%,transparent);display:flex;gap:10px;font-size:13px}
.dcl-root.dcl-root .court-add{border:1.5px dashed var(--border-strong);border-radius:20px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-3);font-size:14px;font-weight:600;padding:22px}


/* Court Luxe v2 — STADIUM EDITION. Imports v1 tokens+components, then amplifies. */

/* ===== global amplifiers ===== */
.dcl-root.dcl-root .phone{background:
  radial-gradient(120% 60% at 50% -10%, var(--accent-soft), transparent 60%),
  var(--bg)}
.dcl-root.dcl-root .screen{padding-top:44px}

/* court-line motif: thin markings like a badminton court */
.dcl-root.dcl-root .courtlines{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
   linear-gradient(var(--border) 1px,transparent 1px) 0 30%/100% 34% no-repeat,
   linear-gradient(90deg,var(--border) 1.5px,transparent 1.5px) 50% 0/2px 100% no-repeat,
   linear-gradient(var(--border) 1px,transparent 1px) 0 64%/100% 1px no-repeat}

/* giant outline type as background texture */
.dcl-root.dcl-root .bigstroke{position:absolute;font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--border-strong);
  opacity:.6;pointer-events:none;user-select:none;letter-spacing:-.01em}
.dcl-root.dcl-root .bigfill{position:absolute;font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;
  line-height:.8;color:var(--accent-soft);pointer-events:none;user-select:none}

/* broadcast ticker */
.dcl-root.dcl-root .ticker{overflow:hidden;background:var(--surface);border-block:1px solid var(--border);
  height:34px;display:flex;align-items:center;position:relative}
.dcl-root.dcl-root .ticker-label{flex-shrink:0;height:100%;display:flex;align-items:center;gap:6px;padding:0 12px;
  background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;z-index:2}
.dcl-root.dcl-root .ticker-track{display:flex;gap:34px;white-space:nowrap;animation:tick 18s linear infinite;
  font-size:12px;font-weight:600;color:var(--text-2);padding-left:12px}
.dcl-root.dcl-root .ticker-track b{color:var(--text)}
.dcl-root.dcl-root .ticker-track .up{color:var(--success)}.dcl-root.dcl-root .ticker-track .dn{color:var(--danger)}
@keyframes tick{to{transform:translateX(-50%)}}

/* diagonal hero card */
.dcl-root.dcl-root .stadium-hero{position:relative;margin:0 16px;border-radius:24px;overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2),var(--surface) 60%);
  border:1px solid var(--accent);box-shadow:var(--glow);padding:20px}
.dcl-root.dcl-root .stadium-hero::before{content:'';position:absolute;top:-30%;right:-18%;width:70%;height:160%;
  background:var(--accent-soft);transform:rotate(18deg)}
.dcl-root.dcl-root .countdown{display:flex;gap:8px;align-items:baseline}
.dcl-root.dcl-root .cd-cell{background:var(--surface-3);border-radius:12px;padding:6px 10px;text-align:center}
.dcl-root.dcl-root .cd-cell b{font-family:'Barlow Condensed';font-size:32px;font-weight:700;line-height:1;display:block}
.dcl-root.dcl-root .cd-cell span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.dcl-root.dcl-root .cd-sep{font-family:'Barlow Condensed';font-size:26px;color:var(--text-3);align-self:center}

/* snapshot pills row */
.dcl-root.dcl-root .snaprow{display:flex;gap:8px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.dcl-root.dcl-root .snaprow::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .snap{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border)}
.dcl-root.dcl-root .snap b{font-family:'Barlow Condensed';font-size:22px;font-weight:700}
.dcl-root.dcl-root .snap>span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);line-height:1.2}

/* v2 tab bar with lightning FAB */
.dcl-root.dcl-root .tabbar2{position:absolute;bottom:0;left:0;right:0;height:78px;z-index:50;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);
  border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:12px}
.dcl-root.dcl-root .tabbar2 .tab{flex:1}
.dcl-root.dcl-root .zapfab{width:58px;height:58px;border-radius:20px;rotate:45deg;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-top:-30px;box-shadow:var(--glow)}
.dcl-root.dcl-root .zapfab svg{rotate:-45deg;width:26px;height:26px;color:var(--accent-ink)}

/* spotlight champion (arena) */
.dcl-root.dcl-root .spotlight{position:relative;text-align:center;padding:28px 16px 18px;overflow:hidden}
.dcl-root.dcl-root .spotlight::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:200px;height:200px;background:radial-gradient(closest-side,var(--gold-soft),transparent);pointer-events:none}
.dcl-root.dcl-root .spot-ava{width:84px;height:84px;border-radius:999px;margin:0 auto;border:2.5px solid var(--gold);
  box-shadow:0 0 34px var(--gold-soft);position:relative}
.dcl-root.dcl-root .spot-rank{position:absolute;font-family:'Barlow Condensed';font-weight:700;font-size:120px;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--gold);opacity:.5;top:6px;left:10px;pointer-events:none}

/* ladder (ELO tiers) */
.dcl-root.dcl-root .ladder{display:grid;gap:6px;padding:0 16px}
.dcl-root.dcl-root .rung{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 14px;border:1px solid var(--border);background:var(--surface)}
.dcl-root.dcl-root .rung.me{border-color:var(--accent);box-shadow:var(--glow)}
.dcl-root.dcl-root .rung .range{margin-left:auto;font-size:11px;color:var(--text-3)}
.dcl-root.dcl-root .tierdot{width:10px;height:10px;border-radius:3px;rotate:45deg;flex-shrink:0}

/* hall of fame plaque */
.dcl-root.dcl-root .plaque{position:relative;border-radius:20px;padding:16px;overflow:hidden;border:1px solid var(--gold);
  background:linear-gradient(140deg,var(--gold-soft),var(--surface) 55%)}
.dcl-root.dcl-root .plaque .yr{position:absolute;right:10px;top:2px;font-family:'Barlow Condensed';font-weight:700;font-size:64px;
  color:transparent;-webkit-text-stroke:1px var(--gold);opacity:.45}

/* sticker wall (badges) */
.dcl-root.dcl-root .stickerwall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 18px}
.dcl-root.dcl-root .sticker{aspect-ratio:1;border-radius:22px;background:var(--surface);border:1.5px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  font-size:10px;font-weight:700;padding:8px;transition:transform .15s ease}
.dcl-root.dcl-root .sticker em{font-style:normal;font-size:30px;line-height:1}
.dcl-root.dcl-root .sticker:nth-child(3n+1){rotate:-4deg}.dcl-root.dcl-root .sticker:nth-child(3n+2){rotate:2.5deg}.dcl-root.dcl-root .sticker:nth-child(3n){rotate:-1.5deg}
.dcl-root.dcl-root .sticker:hover{transform:scale(1.07);rotate:0deg}
.dcl-root.dcl-root .sticker.gold{border-color:var(--gold);background:linear-gradient(150deg,var(--gold-soft),var(--surface))}
.dcl-root.dcl-root .sticker.fresh{border-color:var(--accent);box-shadow:var(--glow)}
.dcl-root.dcl-root .sticker.locked{opacity:.4;filter:grayscale(1);border-style:dashed}

/* broadcast scoreboard */
.dcl-root.dcl-root .scoreboard{margin:0 16px;border-radius:24px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface)}
.dcl-root.dcl-root .sb-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--surface-2);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.dcl-root.dcl-root .sb-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--border)}
.dcl-root.dcl-root .sb-row .nm{font-weight:700;font-size:15px;flex:1}
.dcl-root.dcl-root .sb-row .pt{font-family:'Barlow Condensed';font-weight:700;font-size:44px;line-height:1;min-width:56px;text-align:right}
.dcl-root.dcl-root .sb-row.win .pt{color:var(--accent)}
.dcl-root.dcl-root .sb-row.lose{opacity:.55}
.dcl-root.dcl-root .sb-serve{width:8px;height:8px;border-radius:999px;background:var(--accent);animation:pulse 1.2s infinite}

/* player card (FIFA style) */
.dcl-root.dcl-root .playercard{margin:0 16px;border-radius:26px;padding:2px;
  background:linear-gradient(160deg,var(--gold),transparent 40%,var(--gold-soft) 90%)}
.dcl-root.dcl-root .pc-in{border-radius:24px;background:linear-gradient(165deg,var(--surface-2),var(--surface) 70%);
  padding:20px;position:relative;overflow:hidden}
.dcl-root.dcl-root .pc-ovr{position:absolute;top:14px;left:18px;text-align:center}
.dcl-root.dcl-root .pc-ovr b{font-family:'Barlow Condensed';font-weight:700;font-size:52px;line-height:.9;color:var(--gold);display:block}
.dcl-root.dcl-root .pc-ovr span{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--text-3)}
.dcl-root.dcl-root .pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.dcl-root.dcl-root .pc-stat{text-align:center;border-radius:14px;background:color-mix(in srgb,var(--surface-3) 70%,transparent);padding:8px 4px}
.dcl-root.dcl-root .pc-stat b{font-family:'Barlow Condensed';font-size:24px;font-weight:700;display:block;line-height:1}
.dcl-root.dcl-root .pc-stat span{font-size:8.5px;font-weight:800;letter-spacing:.07em;color:var(--text-3);text-transform:uppercase}

/* radial gauge */
.dcl-root.dcl-root .radial{width:132px;height:132px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin:0 auto;
  background:conic-gradient(var(--accent) calc(var(--v)*1%),var(--surface-3) 0)}
.dcl-root.dcl-root .radial>div{width:104px;height:104px;border-radius:999px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dcl-root.dcl-root .radial b{font-family:'Barlow Condensed';font-size:34px;font-weight:700;line-height:1}

/* timeline history */
.dcl-root.dcl-root .tl{position:relative;padding:0 16px 0 44px}
.dcl-root.dcl-root .tl::before{content:'';position:absolute;left:26px;top:6px;bottom:6px;width:2px;background:var(--border)}
.dcl-root.dcl-root .tl-item{position:relative;margin-bottom:12px}
.dcl-root.dcl-root .tl-node{position:absolute;left:-26px;top:14px;width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;z-index:2}
.dcl-root.dcl-root .tl-node.w{background:var(--success);color:#fff}.dcl-root.dcl-root .tl-node.l{background:var(--danger);color:#fff}
.dcl-root.dcl-root .tl-date{position:sticky;top:44px;z-index:3;display:inline-block;margin:0 0 10px -28px;padding:4px 12px;border-radius:999px;
  background:var(--surface-3);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}

/* wallet */
.dcl-root.dcl-root .wallet{margin:0 16px;border-radius:26px;padding:22px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid var(--border-strong)}
.dcl-root.dcl-root .wallet::after{content:'';position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:999px;
  border:22px solid var(--accent-soft)}
.dcl-root.dcl-root .mission{border-left:3px solid var(--accent);border-radius:0 16px 16px 0}
.dcl-root.dcl-root .bigbtn{height:64px;border-radius:18px;font-family:'Barlow Condensed';font-size:22px;font-weight:700;text-transform:uppercase}

/* interactivity affordances */
.dcl-root.dcl-root .row-card,.dcl-root.dcl-root .snap,.dcl-root.dcl-root .sticker,.dcl-root.dcl-root .plaque{cursor:pointer}
/* (2026-08-18) KHÔNG animation ở đường quyết định HIỆN/ẨN — cùng luật đã ghi ở khối .sheetov
   trong styles.css. Trước đây `.toast{animation:toastin .25s ease}` với keyframe mở đầu
   `opacity:0` ⇒ khi đồng hồ animation đứng (`document.timeline.currentTime` kẹt 0), computed
   value kẹt ở frame đầu vĩnh viễn: toast có trong DOM mà VÔ HÌNH — gồm cả toast kết thúc
   luồng gỡ thông báo (#38). Giữ @keyframes để tầng app dùng lại nếu muốn, nhưng KHÔNG gắn
   vào .toast nữa. */
.dcl-root.dcl-root .toast{}
@keyframes toastin{from{transform:translateY(12px)}}


/* Court Luxe v3 — "TONIGHT'S CARD". Poster / vé / biên lai / tạp chí. */

.dcl-root.dcl-root .phone{background:var(--bg)}
.dcl-root.dcl-root .screen{padding-top:44px}
.dcl-root.dcl-root .mono{font-family:'IBM Plex Mono',monospace}

/* grain + court glow backdrop */
.dcl-root.dcl-root .backdrop{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 40% at 50% 0%,var(--accent-soft),transparent 70%)}
.dcl-root.dcl-root .grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-conic-gradient(var(--surface-2) 0 .0001%,transparent 0 .0002%);
  background-size:170px 170px}

/* ===== masthead / editorial ===== */
.dcl-root.dcl-root .masthead{display:flex;justify-content:space-between;align-items:center;padding:0 18px 10px;
  border-bottom:2px solid var(--text);margin:0 0 4px}
.dcl-root.dcl-root .masthead .mh-l{font-family:'Barlow Condensed';font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.dcl-root.dcl-root .masthead .mh-r{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);text-align:right;line-height:1.5}
.dcl-root.dcl-root .rule{height:1px;background:var(--text);opacity:.85;margin:10px 18px}
.dcl-root.dcl-root .rule.thin{opacity:.25}
.dcl-root.dcl-root .kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dcl-root.dcl-root .kicker::before{content:'';width:22px;height:2px;background:var(--accent)}
.dcl-root.dcl-root .mega{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;line-height:.88;letter-spacing:-.015em}
.dcl-root.dcl-root .byline{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600}

/* ===== floating dock (thay tab bar) ===== */
.dcl-root.dcl-root .dock{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:56;
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(20px);
  border:1px solid var(--border-strong);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.dcl-root.dcl-root .dock button{width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.dcl-root.dcl-root .dock button svg{width:20px;height:20px}
.dcl-root.dcl-root .dock button:hover{background:var(--surface-2);color:var(--text)}
.dcl-root.dcl-root .dock .zap{background:var(--accent);color:var(--accent-ink);width:52px;height:52px;box-shadow:var(--glow)}

/* ===== TOC (mục lục — nav hub) ===== */
.dcl-root.dcl-root .toc{position:absolute;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(18px);display:none;flex-direction:column;padding:56px 22px 20px;overflow-y:auto}
.dcl-root.dcl-root .toc.open{display:flex}
.dcl-root.dcl-root .toc-row{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.dcl-root.dcl-root .toc-row .no{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);width:26px}
.dcl-root.dcl-root .toc-row .ti{font-family:'Barlow Condensed';font-weight:700;font-size:30px;text-transform:uppercase;line-height:1;transition:color .15s,transform .15s}
.dcl-root.dcl-root .toc-row .meta{margin-left:auto;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.dcl-root.dcl-root .toc-row:hover .ti{color:var(--accent);transform:translateX(6px)}
.dcl-root.dcl-root .toc-row.sec{margin-top:18px;border-bottom:none;padding-bottom:2px}
.dcl-root.dcl-root .toc-row.sec .ti{font-size:13px;color:var(--text-3);letter-spacing:.14em}

/* ===== fight card (trang chủ) ===== */
.dcl-root.dcl-root .vsgrid{margin:14px 18px;border:1px solid var(--border-strong);border-radius:4px}
.dcl-root.dcl-root .vsrow{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .vsrow:last-child{border-bottom:none}
.dcl-root.dcl-root .vsrow .p{font-family:'Barlow Condensed';font-weight:700;font-size:21px;text-transform:uppercase;line-height:1}
.dcl-root.dcl-root .vsrow .p small{display:block;font-family:'Be Vietnam Pro';font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--text-3);margin-top:3px}
.dcl-root.dcl-root .vsrow .p.r{text-align:right}
.dcl-root.dcl-root .vsrow .vs{text-align:center;font-family:'Playfair Display';font-style:italic;color:var(--accent);font-size:15px}
.dcl-root.dcl-root .soldbar{margin:0 18px;display:flex;align-items:center;gap:10px}
.dcl-root.dcl-root .soldbar .track{flex:1;height:10px;border:1px solid var(--border-strong);padding:2px}
.dcl-root.dcl-root .soldbar .fill{height:100%;background:repeating-linear-gradient(-45deg,var(--accent) 0 6px,transparent 6px 10px)}
.dcl-root.dcl-root .soldbar b{font-family:'IBM Plex Mono',monospace;font-size:11px}

/* ===== ticket (vé kèo) ===== */
.dcl-root.dcl-root .ticket{margin:0 4px;position:relative;filter:drop-shadow(0 16px 28px rgba(0,0,0,.35))}
.dcl-root.dcl-root .tk-main{background:var(--surface);border-radius:14px 14px 0 0;padding:18px;position:relative;overflow:hidden}
.dcl-root.dcl-root .tk-main::after{content:'';position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:999px;background:var(--accent-soft)}
.dcl-root.dcl-root .tk-stub{background:var(--surface);border-radius:0 0 14px 14px;padding:14px 18px;position:relative;
  border-top:2px dashed var(--border-strong);transition:transform .5s ease,opacity .5s ease}
.dcl-root.dcl-root .tk-stub::before,.dcl-root.dcl-root .tk-stub::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:999px;background:var(--bg)}
.dcl-root.dcl-root .tk-stub::before{left:-9px}.dcl-root.dcl-root .tk-stub::after{right:-9px}
.dcl-root.dcl-root .tk-stub.torn{transform:translateY(26px) rotate(2.5deg);opacity:0;pointer-events:none}
.dcl-root.dcl-root .barcode{height:38px;background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 5px,var(--text) 5px 6px,transparent 6px 11px)}
.dcl-root.dcl-root .tk-kv{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:3px 0}
.dcl-root.dcl-root .tk-kv span:first-child{color:var(--text-3)}
.dcl-root.dcl-root .punch{position:absolute;left:50%;transform:translateX(-50%);top:-7px;width:52px;height:14px;border-radius:0 0 26px 26px;background:var(--bg)}

/* ===== billboard chart ===== */
.dcl-root.dcl-root .chart-no1{margin:0 18px 4px;padding:16px 18px;background:var(--gold-soft);border:1px solid var(--gold);border-radius:4px;
  display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.dcl-root.dcl-root .chart-no1 .n{font-family:'Barlow Condensed';font-weight:700;font-size:74px;line-height:.8;color:var(--gold)}
.dcl-root.dcl-root .chart-row{display:grid;grid-template-columns:34px 26px 1fr auto;gap:8px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .chart-row .n{font-family:'Barlow Condensed';font-weight:700;font-size:24px;color:var(--text-2)}
.dcl-root.dcl-root .chart-row .mv{font-size:10px;font-weight:800;text-align:center}
.dcl-root.dcl-root .mv.up{color:var(--success)}.dcl-root.dcl-root .mv.dn{color:var(--danger)}.dcl-root.dcl-root .mv.new{color:var(--accent);font-size:8px;letter-spacing:.06em}
.dcl-root.dcl-root .chart-row .pts{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700}
.dcl-root.dcl-root .chart-row.me{background:var(--accent-soft);border-left:3px solid var(--accent)}
.dcl-root.dcl-root .weeks{font-size:9px;color:var(--text-3);letter-spacing:.05em}

/* ===== receipt (biên lai) ===== */
.dcl-root.dcl-root .receipt{margin:0 26px;background:var(--surface);color:var(--text);font-family:'IBM Plex Mono',monospace;
  padding:20px 18px 26px;position:relative;filter:drop-shadow(0 14px 24px rgba(0,0,0,.3));
  -webkit-mask:linear-gradient(#000 0 0) padding-box, radial-gradient(circle 7px at 10px 100%,transparent 97%,#000) -10px 0/20px 14px repeat-x padding-box;
  mask:linear-gradient(#000 0 0), radial-gradient(circle 7px at 10px 100%,transparent 97%,#000) bottom/20px 14px repeat-x}
.dcl-root.dcl-root .rc-line{display:flex;justify-content:space-between;font-size:11px;padding:2.5px 0}
.dcl-root.dcl-root .rc-line .l{color:var(--text-2)}
.dcl-root.dcl-root .rc-dash{border-top:1px dashed var(--border-strong);margin:9px 0}
.dcl-root.dcl-root .rc-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.dcl-root.dcl-root .rc-total b{font-size:22px}
.dcl-root.dcl-root .rc-head{text-align:center;margin-bottom:10px}
.dcl-root.dcl-root .rc-head .t{font-weight:700;font-size:13px;letter-spacing:.12em}
.dcl-root.dcl-root .stamp{position:absolute;right:14px;top:38%;rotate:-14deg;border:2.5px solid var(--success);color:var(--success);
  font-weight:800;font-size:15px;letter-spacing:.2em;padding:5px 12px;border-radius:6px;opacity:.9;font-family:'Be Vietnam Pro'}
.dcl-root.dcl-root .stamp.due{border-color:var(--danger);color:var(--danger)}

/* ===== trading card (hồ sơ) ===== */
.dcl-root.dcl-root .tcard{margin:0 44px;aspect-ratio:.72;border-radius:18px;padding:3px;position:relative;
  background:linear-gradient(155deg,var(--gold) 0%,var(--surface-3) 35%,var(--gold-soft) 70%,var(--gold) 100%);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}
.dcl-root.dcl-root .tc-in{height:100%;border-radius:16px;background:linear-gradient(170deg,var(--surface-2),var(--surface) 60%);
  display:flex;flex-direction:column;padding:16px;position:relative;overflow:hidden}
.dcl-root.dcl-root .tc-in .bigno{position:absolute;right:-6px;top:6px;font-family:'Barlow Condensed';font-weight:700;font-size:110px;line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--gold);opacity:.4}
.dcl-root.dcl-root .tc-foot{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dcl-root.dcl-root .tc-stat{text-align:center;border-top:1px solid var(--border-strong);padding-top:6px}
.dcl-root.dcl-root .tc-stat b{font-family:'Barlow Condensed';font-size:22px;font-weight:700;display:block;line-height:1}
.dcl-root.dcl-root .tc-stat span{font-size:7.5px;font-weight:800;letter-spacing:.09em;color:var(--text-3);text-transform:uppercase}

/* ===== box score (kết quả báo) — (2026-08-18) TOÀN BỘ KHỐI ĐÃ XOÁ.
   Sáu rule (.boxscore · .bs-row grid · .bs-row .sc · .bs-row .pm · .pm.pos/.pm.neg · .bs-date)
   chưa từng có hiệu lực: không doc nào dùng class .boxscore/.bs-date, và ba chỗ .bs-row trong
   "main - man hoa don (bills) v1.0" là hàng roster do JS dựng, bố cục inline
   style="display:flex;align-items:center;gap:11px;padding:11px 14px;height:56px" đè lên, con số
   dùng .tnum chứ không phải .sc/.pm. .bs-row giờ chỉ còn là CLASS HOOK cho JS
   (btn.closest('.bs-row')) — bố cục nằm inline ở doc Ví, đừng dựng lại rule ở đây rồi tưởng app
   thiếu. Khi nào thật cần khối box score thì dựng lại theo cái đang chạy. */

/* ===== live bug (broadcast) ===== */
.dcl-root.dcl-root .bug{margin:0 18px;display:grid;grid-template-columns:1fr;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden}
.dcl-root.dcl-root .bug-team{display:grid;grid-template-columns:6px 1fr 70px;align-items:center;background:var(--surface)}
.dcl-root.dcl-root .bug-team+.bug-team{border-top:1px solid var(--border)}
.dcl-root.dcl-root .bug-team .bar{height:100%;background:var(--accent)}
.dcl-root.dcl-root .bug-team.lo .bar{background:var(--surface-3)}
.dcl-root.dcl-root .bug-team .nm{padding:13px 14px;font-family:'Barlow Condensed';font-weight:700;font-size:22px;text-transform:uppercase}
.dcl-root.dcl-root .bug-team .sc{font-family:'Barlow Condensed';font-weight:700;font-size:40px;text-align:center;background:var(--surface-2);padding:4px 0}
.dcl-root.dcl-root .bug-team.lo .nm,.dcl-root.dcl-root .bug-team.lo .sc{color:var(--text-3)}
.dcl-root.dcl-root .bug-foot{display:flex;justify-content:space-between;padding:7px 14px;background:var(--surface-2);
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-2);border-top:1px solid var(--border)}

/* ===== poster wall (danh vọng) ===== */
.dcl-root.dcl-root .posterwall{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px}
.dcl-root.dcl-root .poster{aspect-ratio:.75;border:1px solid var(--gold);border-radius:4px;padding:12px;display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--gold-soft),var(--surface) 65%);position:relative;overflow:hidden}
.dcl-root.dcl-root .poster .m{font-family:'Barlow Condensed';font-weight:700;font-size:44px;line-height:.85;color:var(--gold)}
.dcl-root.dcl-root .poster .who{margin-top:auto}
.dcl-root.dcl-root .poster.now{border-color:var(--accent);background:linear-gradient(165deg,var(--accent-soft),var(--surface) 65%)}
.dcl-root.dcl-root .poster.now .m{color:var(--accent)}

/* ===== console (admin) ===== */
.dcl-root.dcl-root .console{margin:0 18px;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden}
.dcl-root.dcl-root .cs-head{padding:8px 14px;background:var(--surface-2);font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:var(--text-2);display:flex;justify-content:space-between}
.dcl-root.dcl-root .cs-body{padding:14px;display:grid;gap:10px;background:var(--surface)}
.dcl-root.dcl-root .keybtn{border:1px solid var(--border-strong);border-radius:10px;padding:12px;text-align:center;
  font-family:'Barlow Condensed';font-weight:700;font-size:19px;text-transform:uppercase;
  box-shadow:0 3px 0 var(--border-strong);transition:all .1s}
.dcl-root.dcl-root .keybtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border-strong)}
.dcl-root.dcl-root .keybtn.hot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}

/* dial PIN */
.dcl-root.dcl-root .gatecode{display:flex;gap:10px;justify-content:flex-start;margin:20px 0}
.dcl-root.dcl-root .gd{width:44px;height:56px;border:1px solid var(--border-strong);border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;background:var(--surface)}
.dcl-root.dcl-root .gd.on{border-color:var(--accent);color:var(--accent)}
.dcl-root.dcl-root .ticket-edge{height:12px;margin:0 18px;background:radial-gradient(circle 6px at 8px 0,transparent 97%,var(--surface)) -8px 0/16px 12px repeat-x}

.dcl-root.dcl-root .pill-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:4px;
  background:var(--accent);color:var(--accent-ink);font-family:'Barlow Condensed';font-weight:700;font-size:20px;
  text-transform:uppercase;letter-spacing:.02em;transition:all .15s}
.dcl-root.dcl-root .pill-cta:hover{box-shadow:var(--glow)}
.dcl-root.dcl-root .pill-cta:active{transform:scale(.97)}
.dcl-root.dcl-root .pill-cta.ghosted{background:transparent;border:1px solid var(--border-strong);color:var(--text)}
.dcl-root.dcl-root .marquee-note{overflow:hidden;border-block:1px solid var(--border);margin:0 0 2px}
.dcl-root.dcl-root .marquee-note div{display:flex;gap:40px;white-space:nowrap;animation:tick 16s linear infinite;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--text-2);padding:7px 0 7px 12px;text-transform:uppercase}
@keyframes tick{to{transform:translateX(-50%)}}


/* Court Luxe v4 — "NHỊP ĐẤU" (Club Pulse). Feed thời gian + Match Day + Wrapped recap + Journey. */

.dcl-root.dcl-root .phone{background:radial-gradient(100% 44% at 50% 0%,var(--accent-soft),transparent 65%),var(--bg)}

/* ===== timeline spine feed ===== */
.dcl-root.dcl-root .pulse{position:relative;padding:0 16px 120px 46px}
.dcl-root.dcl-root .pulse::before{content:'';position:absolute;left:26px;top:8px;bottom:0;width:2px;
  background:linear-gradient(var(--accent),var(--border) 30%)}
.dcl-root.dcl-root .pnode{position:absolute;left:-27px;top:18px;width:14px;height:14px;border-radius:999px;
  background:var(--surface-3);border:2px solid var(--border-strong);z-index:2}
.dcl-root.dcl-root .pnode.hot{background:var(--accent);border-color:var(--accent);box-shadow:var(--glow);animation:pulse 1.4s infinite}
.dcl-root.dcl-root .ptime{position:absolute;left:-46px;top:40px;writing-mode:vertical-rl;font-family:'IBM Plex Mono';
  font-size:9px;letter-spacing:.1em;color:var(--text-3)}
.dcl-root.dcl-root .pcard{position:relative;border-radius:20px;background:var(--surface);border:1px solid var(--border);
  padding:16px;margin-bottom:14px}
.dcl-root.dcl-root .pcard.hot{border-color:var(--accent);box-shadow:var(--glow)}
.dcl-root.dcl-root .pcard .tag{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.dcl-root.dcl-root .pcard.hot .tag{color:var(--accent)}

/* facepile + rsvp */
.dcl-root.dcl-root .facepile{display:flex;align-items:center}
.dcl-root.dcl-root .facepile .avatar{width:30px;height:30px;border-radius:999px;font-size:10px;border:2px solid var(--surface);margin-left:-8px}
.dcl-root.dcl-root .facepile .avatar:first-child{margin-left:0}
.dcl-root.dcl-root .facepile .more{margin-left:6px;font-size:11px;color:var(--text-3);font-weight:600}
.dcl-root.dcl-root .rsvp{display:flex;gap:8px;margin-top:12px}
.dcl-root.dcl-root .rsvp .yes{flex:1;height:46px;border-radius:14px;background:var(--accent);color:var(--accent-ink);
  font-family:'Barlow Condensed';font-weight:700;font-size:19px;text-transform:uppercase;transition:all .15s}
.dcl-root.dcl-root .rsvp .yes:hover{box-shadow:var(--glow)}
.dcl-root.dcl-root .rsvp .yes.done{background:transparent;border:1.5px solid var(--success);color:var(--success)}
.dcl-root.dcl-root .rsvp .no{width:46px;height:46px;border-radius:14px;border:1px solid var(--border-strong);color:var(--text-3)}

/* rank ticker strip */
.dcl-root.dcl-root .rankstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px 0 6px}
.dcl-root.dcl-root .rankstrip::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .rk{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:var(--surface-2)}
.dcl-root.dcl-root .rk b{font-family:'Barlow Condensed';font-size:15px}

/* ===== match day ===== */
.dcl-root.dcl-root .mday-head{padding:6px 18px 12px;display:flex;align-items:center;justify-content:space-between}
.dcl-root.dcl-root .court{border-radius:18px;border:1px solid var(--border);background:var(--surface);padding:14px;position:relative;overflow:hidden}
.dcl-root.dcl-root .court.live{border-color:var(--accent);box-shadow:var(--glow)}
.dcl-root.dcl-root .court .cn{position:absolute;right:8px;top:-4px;font-family:'Barlow Condensed';font-weight:700;font-size:54px;
  color:transparent;-webkit-text-stroke:1px var(--border-strong);opacity:.7}
.dcl-root.dcl-root .court .vsline{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dcl-root.dcl-root .court .sc2{font-family:'Barlow Condensed';font-weight:700;font-size:34px}
.dcl-root.dcl-root .upnext{border-radius:18px;background:var(--accent);color:var(--accent-ink);padding:14px 16px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--glow)}
.dcl-root.dcl-root .upnext .big{font-family:'Barlow Condensed';font-weight:700;font-size:24px;text-transform:uppercase;line-height:1}

/* ===== recap stories (Wrapped) ===== */
.dcl-root.dcl-root .storybars{position:absolute;top:52px;left:16px;right:16px;display:flex;gap:5px;z-index:5}
.dcl-root.dcl-root .storybars i{flex:1;height:3px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dcl-root.dcl-root .storybars i.done::after{content:'';display:block;height:100%;background:var(--accent)}
.dcl-root.dcl-root .storystage{position:absolute;inset:0;padding-top:44px}
.dcl-root.dcl-root .story{position:absolute;inset:0;padding:80px 26px 40px;display:none;flex-direction:column}
.dcl-root.dcl-root .story.on{display:flex}
/* (2026-08-18) KHÔNG gắn animation vào .story.on — cùng luật ở khối .sheetov: trạng thái
   HIỆN không được phụ thuộc đồng hồ animation. Slide Recap chỉ được .on bật, nên khi đồng hồ
   đứng (currentTime kẹt 0) cả 4 slide kẹt ở frame đầu của storyin ⇒ đổi slide vẫn chạy mà
   người xem không thấy gì suốt cả luồng story. */

/* BẢO HIỂM CHUNG cho cả LỚP LỖI này: ba keyframe "vào" dưới đây KHÔNG ĐƯỢC có frame nào
   ẩn phần tử (không `opacity:0`, không dịch/thu ra ngoài tầm nhìn). Nhờ vậy dù sau này có ai
   gắn lại chúng vào một rule trạng thái, đồng hồ đứng cũng chỉ mất hiệu ứng, KHÔNG mất nội dung.
   (Ba chỗ từng dính: .story.on · .vepop-card/.reg-card với popin · .toast với toastin.) */
@keyframes storyin{from{transform:scale(1.03)}}
.dcl-root.dcl-root .story .huge{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;line-height:.88}
.dcl-root.dcl-root .story .n-xl{font-size:120px;color:var(--accent)}
.dcl-root.dcl-root .stat-duo{display:flex;gap:14px;margin-top:auto}
.dcl-root.dcl-root .stat-duo>div{flex:1;border-top:2px solid var(--text);padding-top:10px}
.dcl-root.dcl-root .stat-duo b{font-family:'Barlow Condensed';font-size:40px;font-weight:700;display:block;line-height:1}
.dcl-root.dcl-root .confetti{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle 3px at 20% 30%,var(--gold) 98%,transparent),
  radial-gradient(circle 2px at 70% 20%,var(--accent) 98%,transparent),
  radial-gradient(circle 2.5px at 85% 60%,var(--gold) 98%,transparent),
  radial-gradient(circle 2px at 40% 75%,var(--accent) 98%,transparent),
  radial-gradient(circle 3px at 60% 45%,var(--gold) 98%,transparent);
  background-size:220px 220px}
.dcl-root.dcl-root .tapzones{position:absolute;inset:0;display:flex;z-index:4}
.dcl-root.dcl-root .tapzones div{flex:1}

/* ===== journey (elevation) ===== */
.dcl-root.dcl-root .elevwrap{position:relative;margin:6px 0 0}
.dcl-root.dcl-root .elevwrap svg{width:100%;display:block}
.dcl-root.dcl-root .evmark{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-100%)}
.dcl-root.dcl-root .evmark .dot{width:12px;height:12px;border-radius:999px;background:var(--surface-3);border:2px solid var(--border-strong)}
.dcl-root.dcl-root .evmark.me .dot{background:var(--accent);border-color:var(--accent);box-shadow:var(--glow);animation:pulse 1.4s infinite}
.dcl-root.dcl-root .evmark .lbl{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.dcl-root.dcl-root .mstone{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .mstone .ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--surface-2);flex-shrink:0}
.dcl-root.dcl-root .mstone.gold .ico{background:var(--gold-soft)}
.dcl-root.dcl-root .mstone.next{opacity:.55}
.dcl-root.dcl-root .mstone.next .ico{border:1.5px dashed var(--border-strong);background:transparent}

/* ===== bottom nav: segmented pill + avatar ===== */
.dcl-root.dcl-root .pilldock{position:absolute;bottom:16px;left:16px;right:16px;z-index:56;display:flex;gap:10px;align-items:center}
.dcl-root.dcl-root .pd-seg{flex:1;display:flex;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(20px);border:1px solid var(--border-strong);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.dcl-root.dcl-root .pd-seg button{flex:1;height:42px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;
  font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-2)}
.dcl-root.dcl-root .pd-seg button.on{background:var(--accent);color:var(--accent-ink)}
.dcl-root.dcl-root .avabtn{width:52px;height:52px;border-radius:999px;border:2px solid var(--border-strong);flex-shrink:0;
  background:linear-gradient(145deg,var(--img-a),var(--img-b));font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;position:relative}
.dcl-root.dcl-root .avabtn .due{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:999px;
  background:var(--danger);border:2px solid var(--bg)}
.dcl-root.dcl-root .whistle{position:absolute;bottom:84px;right:16px;z-index:55;width:48px;height:48px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:20px}

/* ===== bottom sheets (két / hồ sơ) =====
   (2026-08-18) BỘ RIÊNG .vsheet / .vsheet .body ĐÃ GỠ — mọi bottom-sheet của app dùng ĐÚNG
   MỘT bộ: .sheetov > .sheet (+ .sheet-handle), mở bằng class .on. Đảo quyết định #12
   (2026-08-14 "giữ .vsheet") theo hướng "ưu tiên dùng chung" user chốt 2026-08-16, cùng tiền
   lệ .bt-toast (#18) và .bt-sheet (mục 6 cùng lượt này).
   Khác biệt khi port: .vsheet ẩn/hiện bằng display — .sheetov NAY CŨNG VẬY (xem khối comment
   của .sheetov ở trên: trạng thái mở không được phụ thuộc transition). Ruột .body → .sheet nên
   max-height 82% → 78% (do .sheet quyết, khối nội dung không tự khai max-height %).
   9 sheet đã đổi: clubSheet · pinSheet(×2) · memSheet · sesSheet · priceSheet ·
   noticeViewSheet · pubSheet · auditSheet · impSheet (doc "ca nhan") + sheet Két của
   "Nhịp Đấu - Feed" (file này đã xoá khi dọn workspace 2026-08-18 — xem #51).
   Popup canh giữa .vepop KHÔNG nằm trong lần gộp này (mở = .open). */

/* coach mode */
.dcl-root.dcl-root .moment{margin-bottom:16px}
.dcl-root.dcl-root .moment>.mh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.dcl-root.dcl-root .moment>.mh b{font-family:'Barlow Condensed';font-weight:700;font-size:22px;text-transform:uppercase}
.dcl-root.dcl-root .moment>.mh span{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.dcl-root.dcl-root .coachrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:8px}
.dcl-root.dcl-root .coachrow.urgent{border-left:3px solid var(--danger)}
.dcl-root.dcl-root .scorepad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dcl-root.dcl-root .scorepad button{height:88px;border-radius:20px;border:1px solid var(--border-strong);
  font-family:'Barlow Condensed';font-weight:700;font-size:26px;text-transform:uppercase;
  box-shadow:0 4px 0 var(--border-strong);transition:all .1s}
.dcl-root.dcl-root .scorepad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border-strong)}
.dcl-root.dcl-root .scorepad button.hot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.dcl-root.dcl-root .scorepad button small{display:block;font-family:'Be Vietnam Pro';font-size:10px;font-weight:600;text-transform:none;letter-spacing:0}

/* ===== final grafts from v3 ===== */
/* (2026-08-21) BỘ .stub-rsvp (10 rule) + @keyframes tearoff ĐÃ XOÁ — chết từ lâu: không doc nào,
   không JS nào dùng class này. Cuống vé xé được của app là .tk-stub/#stub (index.html, màn Tấm
   vé) + .stub trong doc Sảnh, cả hai tự khai bố cục; đừng dựng lại rule ở đây rồi tưởng app thiếu. */
.dcl-root.dcl-root .tcard-mini{border-radius:18px;padding:2px;background:linear-gradient(150deg,var(--gold),transparent 45%,var(--gold-soft));margin-bottom:8px}
.dcl-root.dcl-root .tcm-in{border-radius:16px;background:linear-gradient(165deg,var(--surface-2),var(--surface));padding:12px 14px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden}

/* ===== bottom nav bar 4 tab (thay pill dock theo yêu cầu) ===== */
.dcl-root.dcl-root .tabbar4{position:absolute;bottom:0;left:0;right:0;height:74px;z-index:56;
  background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(18px);
  border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:10px}
.dcl-root.dcl-root .tabbar4 .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-3);font-size:10px;font-weight:600;position:relative}
.dcl-root.dcl-root .tabbar4 .tab svg{width:22px;height:22px}
.dcl-root.dcl-root .tabbar4 .tab.active{color:var(--accent)}
.dcl-root.dcl-root .tabbar4 .tab.active::before{content:'';position:absolute;top:-10px;width:4px;height:4px;border-radius:999px;background:var(--accent)}
.dcl-root.dcl-root .miniava{width:24px;height:24px;border-radius:999px;background:linear-gradient(145deg,var(--img-a),var(--img-b));
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--text-2);position:relative;border:1.5px solid var(--border-strong)}
.dcl-root.dcl-root .tabbar4 .tab.active .miniava{border-color:var(--accent);color:var(--accent)}
.dcl-root.dcl-root .due4{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:999px;background:var(--danger);border:1.5px solid var(--surface)}
.dcl-root.dcl-root .whistle{bottom:88px}
.dcl-root.dcl-root .pulse{padding-bottom:100px}


/* ============================================================
   Court Luxe v5 — SHARED COMPONENTS
   Bổ sung các component chưa có trong chain styles(1→4):
   modal, notification banner, dropdown, multiselect, radio,
   checkbox. Tất cả dùng token --* nên tự đổi theo 5 theme.
   Component có sẵn từ chain: .btn(-primary/-secondary/-ghost/-sm/.bigbtn),
   .pill-cta(.ghosted), .icon-btn, .chip(.active), .stag-*, .tier-*,
   .tog(.on), .input, .field, .stepper, .card, .row-card, .snap,
   .avatar, .sheet/.sheet-demo, .toast, .dot-badge, .ptsbadge.
   ============================================================ */

/* ---------- Modal (popup giữa màn — confirm/alert) ---------- */
.dcl-root.dcl-root .modal-demo{position:absolute;inset:0;z-index:56;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(4px);padding:24px}
.dcl-root.dcl-root .modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:20px;
  padding:22px 20px;width:100%;max-width:320px;box-shadow:var(--modal-shadow)}
.dcl-root.dcl-root .modal h3{font-family:'Barlow Condensed';font-weight:700;font-size:22px;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:6px}
.dcl-root.dcl-root .modal p{font-size:13px;color:var(--text-2);line-height:1.5;margin-bottom:16px}
.dcl-root.dcl-root .modal .modal-acts{display:flex;gap:10px}
.dcl-root.dcl-root .modal .modal-acts .btn{flex:1}
.dcl-root.dcl-root .modal.danger{border-color:var(--danger)}
.dcl-root.dcl-root .modal.danger h3{color:var(--danger)}

/* ---------- Notification banner (inline, trong luồng nội dung) ---------- */
.dcl-root.dcl-root .notif{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;
  font-size:13px;line-height:1.45;border:1px solid var(--border);background:var(--surface-2)}
.dcl-root.dcl-root .notif .notif-ico{font-size:16px;line-height:1.3;flex-shrink:0}
.dcl-root.dcl-root .notif b{display:block;font-size:13px}
.dcl-root.dcl-root .notif .notif-sub{color:var(--text-2);font-size:12px}
.dcl-root.dcl-root .notif .notif-act{margin-left:auto;align-self:center;flex-shrink:0}
.dcl-root.dcl-root .notif.info{border-color:color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 10%,var(--surface))}
.dcl-root.dcl-root .notif.success{border-color:color-mix(in srgb,var(--success) 45%,transparent);background:color-mix(in srgb,var(--success) 10%,var(--surface))}
.dcl-root.dcl-root .notif.warning{border-color:color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 12%,var(--surface))}
.dcl-root.dcl-root .notif.danger{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}

/* ---------- Dropdown (select 1 giá trị) ---------- */
.dcl-root.dcl-root .dd{position:relative;display:inline-block;min-width:180px}
.dcl-root.dcl-root .dd-btn{width:100%;display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap}
.dcl-root.dcl-root .dd-btn::after{content:'▾';color:var(--text-3);font-size:11px;transition:transform .15s}
.dcl-root.dcl-root .dd.open .dd-btn{border-color:var(--accent)}
.dcl-root.dcl-root .dd.open .dd-btn::after{transform:rotate(180deg)}
.dcl-root.dcl-root .dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;display:none;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;
  padding:5px;box-shadow:var(--modal-shadow);max-height:220px;overflow-y:auto}
.dcl-root.dcl-root .dd.open .dd-menu{display:block}
.dcl-root.dcl-root .dd-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.dcl-root.dcl-root .dd-item:hover{background:var(--surface-3)}
.dcl-root.dcl-root .dd-item.selected{color:var(--accent);font-weight:700}
.dcl-root.dcl-root .dd-item.selected::after{content:'✓';margin-left:auto}

/* ---------- Multiselect (chọn nhiều — nền tảng là chip) ---------- */
.dcl-root.dcl-root .msel{display:flex;flex-wrap:wrap;gap:8px}
.dcl-root.dcl-root .msel .chip{cursor:pointer;user-select:none}
.dcl-root.dcl-root .msel .chip.active{outline:2px solid var(--accent);outline-offset:1px}
.dcl-root.dcl-root .msel .chip.active::before{content:'✓ ';font-weight:700}
.dcl-root.dcl-root .msel-count{font-size:11px;color:var(--text-3);align-self:center}

/* ---------- Radio ---------- */
.dcl-root.dcl-root .radio{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;cursor:pointer;user-select:none}
.dcl-root.dcl-root .radio i{width:20px;height:20px;border-radius:999px;border:2px solid var(--border-strong);
  flex-shrink:0;display:grid;place-items:center;transition:border-color .12s;font-style:normal}
.dcl-root.dcl-root .radio i::after{content:'';width:10px;height:10px;border-radius:999px;background:var(--accent);
  scale:0;transition:scale .12s}
.dcl-root.dcl-root .radio.checked i{border-color:var(--accent)}
.dcl-root.dcl-root .radio.checked i::after{scale:1}
.dcl-root.dcl-root .radio-group{display:grid;gap:12px}

/* ---------- Checkbox ---------- */
.dcl-root.dcl-root .checkbox{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;cursor:pointer;user-select:none}
.dcl-root.dcl-root .checkbox i{width:20px;height:20px;border-radius:6px;border:2px solid var(--border-strong);
  flex-shrink:0;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;
  color:transparent;transition:all .12s}
.dcl-root.dcl-root .checkbox.checked i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dcl-root.dcl-root .checkbox.checked i::after{content:'✓'}

/* ---------- Label (nhãn form + nhãn trạng thái đã có .stag/.tier) ---------- */
.dcl-root.dcl-root .lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-2);margin-bottom:6px}
.dcl-root.dcl-root .lbl .req{color:var(--danger)}

/* Chip thứ tự đứng trước .mvs ("Kế"/"Sau" ở mục Sắp tới) — bề rộng cố định +
   căn giữa để tên tuyển thủ ở mọi hàng thẳng cột, bất kể chữ trong chip dài ngắn
   ('Kế' ngắn hơn 'Sau'). .next = biến thể nhấn accent cho cặp KẾ tiếp. */
.dcl-root.dcl-root .seqtag{min-width:42px;text-align:center;flex:none}
.dcl-root.dcl-root .seqtag.next{background:var(--accent-soft);color:var(--accent)}

/* Meta separator — hairline dọc, thay dấu '·' trong dòng meta/stat.
   Nguyên tắc (ref DS: luxury/editorial): whitespace-first, monochrome MUTED (không gold),
   dưới bậc hierarchy, spacing 8pt grid. Dùng: <span class="cl-sep" aria-hidden="true"></span> */
.dcl-root.dcl-root .cl-sep{display:inline-block;width:1px;height:.9em;margin:0 8px;background:currentColor;opacity:.42;vertical-align:-.08em;border-radius:1px}

/* Meta stat-bar (variant F) — số mono TRÊN, đơn vị uppercase DƯỚI, vạch ngăn dọc.
   Dùng cho dòng số liệu (chỗ/sân/giá...). Gu receipt/scoreboard Court Luxe.
   Markup: <div class="cl-meta"><span><b>14/16</b><em>chỗ</em></span>…</div> */
.dcl-root.dcl-root .cl-meta{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
.dcl-root.dcl-root .cl-meta>span{display:flex;flex-direction:column;padding:0 10px;border-right:1px solid rgba(255,255,255,.08)}
.dcl-root.dcl-root .cl-meta>span:first-child{padding-left:0}
.dcl-root.dcl-root .cl-meta>span:last-child{border-right:0}
.dcl-root.dcl-root .cl-meta b{font:600 15px 'IBM Plex Mono';color:var(--text);line-height:1.1}
.dcl-root.dcl-root .cl-meta em{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-top:2px}

/* Fillbar — nhãn + progress sĩ số (Sảnh) */
.dcl-root.dcl-root .fillbar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--text-3);margin-bottom:6px}
.dcl-root.dcl-root .fillbar-top b{color:var(--text-2);font-weight:600}
.dcl-root.dcl-root .minibar{display:flex;align-items:center;gap:8px}
.dcl-root.dcl-root .minibar .capbar{flex:1}
.dcl-root.dcl-root .capbar.full i{background:var(--text-3)}
/* notice: nền amber (semantic thông báo, khác label "Live" lime) + chữ/icon near-black cho nổi bật */
.dcl-root.dcl-root .ticker.is-notice .ticker-label{background:var(--warning,#FBBF24);color:var(--bg,#0A0B0E)}
.dcl-root.dcl-root .ticker.is-notice .ticker-label svg{width:13px;height:13px;flex-shrink:0}
/* NHÃN THEO MỨC ĐỘ (user chốt 2026-08-17): admin chọn mức độ ở màn Thông báo chung ⇒ dải ở Sảnh
   và header popup đổi cả chữ lẫn màu nhãn. Không chọn ⇒ mặc định lv-tin.
   lv-tin "Tin" xanh info · lv-chuy "Chú ý" amber · lv-gap "Gấp" đỏ danger. */
.dcl-root.dcl-root .ticker.lv-tin .ticker-label,.dcl-root.dcl-root .ticker-label.lv-tin{background:var(--info,#60A5FA);color:var(--bg,#0A0B0E)}
.dcl-root.dcl-root .ticker.lv-chuy .ticker-label,.dcl-root.dcl-root .ticker-label.lv-chuy{background:var(--warning,#FBBF24);color:var(--bg,#0A0B0E)}
.dcl-root.dcl-root .ticker.lv-gap .ticker-label,.dcl-root.dcl-root .ticker-label.lv-gap{background:var(--danger,#F87171);color:var(--bg,#0A0B0E)}

/* Vé popup modal */
.dcl-root.dcl-root .phone{position:relative}
.dcl-root.dcl-root .vepop{position:absolute;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(5,6,8,.66)}
.dcl-root.dcl-root .vepop.open{display:flex}
.dcl-root.dcl-root .vepop-card{width:100%;max-width:320px}
/* Mọi popup của app VÀO TỪ ĐÁY (đồng bộ 2026-08-16) — kể cả popup canh giữa như vé:
   trượt lên, không phóng to. Bottom-sheet chuẩn ở styles.css (.sheetov > .sheet).
   (2026-08-18) NHƯNG KHÔNG GẮN animation VÀO THẮNG .vepop-card / .reg-card nỮa — cùng luật đã
   ghi ở khối .sheetov: trạng thái HIỆN không được phụ thuộc đồng hồ animation. `popin` mở đầu
   bằng `opacity:0; translateY(38px)`, đồng hồ đứng là computed value kẹt ở đó vĩnh viễn ⇒ popup
   mở ra chỉ thấy NỀN TỐI, rỗng không (đo được: #tickerModal có nội dung 430px nhưng card
   opacity 0; #avaModal ×3, #venModal ×2 có .reg-card opacity 0 và height 0).
   @keyframes popin GIỮ LẠI để tầng app dùng khi chắc đồng hồ chạy. */
@keyframes popin{from{transform:translateY(38px)}to{transform:none}}
.dcl-root.dcl-root .ve-card{background:linear-gradient(165deg,#15171e,#0e1014);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.dcl-root.dcl-root .ve-perf{border-top:2px dashed rgba(255,255,255,.16);margin:0 14px}
.dcl-root.dcl-root .ve-qr{width:74px;height:74px;border-radius:12px;flex:none;background:conic-gradient(#0b0d10 90deg,#fff 0 180deg,#0b0d10 0 270deg,#fff 0);background-size:9px 9px;border:5px solid #fff}

/* Icon vé 'đã có suất' — tint xanh success (thay badge dot, khớp ngôn ngữ status app) */
.dcl-root.dcl-root .tk-ok svg{color:var(--accent)}
/* Nút vé ở hero (chốt 2026-08-27): giữ nguyên nền/viền .btn-secondary, chỉ đổi chữ + icon
   sang accent cho khớp icon vé .tk-ok bên thẻ kèo. */
.dcl-root.dcl-root .btn.btn-secondary.tk-ok-btn{color:var(--accent)}
.dcl-root.dcl-root .btn.btn-secondary.tk-ok-btn svg{color:inherit}
.dcl-root.dcl-root .btn.btn-secondary.tk-ok-btn:hover{color:var(--accent)}

/* ===== Ô ĐẶT NÚT VÉ — MA TRẬN TRẠNG THÁI (chốt 2026-08-15, thu hẹp 2026-08-16) =====
   Từ 2026-08-16 màn SẢNH chỉ còn trạng thái `ok`: Sảnh chỉ nói về buổi mình đã có suất,
   chưa có suất thì hiện empty state "Chưa có suất nào" chứ không hiện kèo nào.
   Trạng thái `none` CHỈ còn dùng ở màn BUỔI (`data-s="buoi"`, phía app là buổi sắp diễn ra) —
   nơi người chưa có suất VẪN vào được khi buổi đã đầy hoặc roster để công khai.
   (2026-08-16#3) Doc Sảnh đã xoá khung máy riêng “Buổi · sắp diễn ra”, nên hiện KHÔNG còn
   doc nào vẽ `.ve-none` — nhưng app còn dùng.
   ⚠️ ĐừNG xoá `.ve-none` / `.ve-note` / `.tk-none`: màn Buổi còn dùng.
   Trạng thái do suất của người đang xem quyết định, đặt ở [data-ve] trên .screen.
   Từ 2026-08-15 CLB BỎ tự đăng ký của thành viên — chỉ admin đưa người vào buổi — nên
   chỉ còn 2 trạng thái (join/full/pending/queued đã gỡ vì không thể xảy ra):
     ok   · đã được đưa vào buổi   → nút vé accent (.tk-ok), mở #veModal
     none · chưa có suất           → chỉ "Xem chi tiết" + dòng "Admin xếp người vào buổi"
                                      (hero: .ve-note · thẻ: nhãn mờ .tk-none)
   Mỗi chỗ đặt vẽ đủ 2 biến thể .ve-s, chỉ biến thể khớp [data-ve] hiện ra.
   Bản admin KHÔNG dùng: admin không có suất trong buổi, nút vé giữ nguyên như cũ. */
.dcl-root.dcl-root .ve-s{display:none;align-items:center;gap:10px}
.dcl-root.dcl-root .ve-slot .ve-s{width:100%}
.dcl-root.dcl-root [data-ve="ok"] .ve-ok,.dcl-root.dcl-root [data-ve="none"] .ve-none{display:flex}
.dcl-root.dcl-root .ve-slot .ve-none{flex-direction:column;align-items:stretch;gap:8px}
.dcl-root.dcl-root .ve-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--text-3)}
.dcl-root.dcl-root .ve-note svg{width:13px;height:13px;color:var(--text-3)}
.dcl-root.dcl-root .tk-none{font-size:11px;font-weight:600;color:var(--text-3);white-space:nowrap}

/* ===== CHƯA ĐƯỢC ĐĂNG KÝ (member) — thêm 2026-08-27 =====
   Màn Sảnh nay LUÔN hiện 2 buổi gần nhất; người chưa được xếp thì khối kèo chỉ để ĐỌC:
   .locked = bỏ con trỏ/hover, không có lối bấm nào (không data-go, không nút vé).
   CHỈ dùng cho vai member — admin tự xếp được nên không bao giờ ở trạng thái này. */
.dcl-root.dcl-root .locked{cursor:default!important}
.dcl-root.dcl-root .stadium-hero.locked{opacity:.94}
.dcl-root.dcl-root .card.locked:hover{border-color:var(--border)}
.dcl-root.dcl-root .lockbar{display:flex;align-items:center;gap:8px;margin:0 16px 12px;padding:9px 12px;
  border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface-2);
  font-size:12px;color:var(--text-2);text-wrap:pretty}
.dcl-root.dcl-root .lockbar svg{width:15px;height:15px;flex:none;color:var(--text-3)}
.dcl-root.dcl-root .lockbar b{color:var(--text)}
/* NÚT VÉ TẮT — người chưa được đăng ký (chốt 2026-08-27).
   KHÔNG tạo hình mới: dùng đúng component của DS, chỉ đổi màu + gạch chéo icon.
     · thẻ kèo: .icon-btn.tk-off  (cùng ô với .icon-btn.tk-ok)
     · hero:    .btn.btn-secondary.tk-off-btn — đúng nút "Xem vé của bạn", chữ "Bạn chưa có vé"
   Cả hai bấm ra toast "chưa được đăng ký", không bao giờ mở #veModal. */
.dcl-root.dcl-root .icon-btn.tk-off{color:var(--text-3);position:relative;cursor:pointer}
.dcl-root.dcl-root .icon-btn.tk-off:hover{color:var(--warning)}
.dcl-root.dcl-root .icon-btn.tk-off::after{content:'';position:absolute;left:50%;top:50%;width:23px;height:1.6px;
  background:currentColor;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg)}
/* nút hero: cùng NGÔN NGỮ với .icon-btn.tk-off (nền --surface-2, không viền, radius 14,
   chữ/icon --text-3, icon bị gạch chéo) — chỉ khác là full-width và có chữ. */
.dcl-root.dcl-root .btn.tk-off-btn{background:color-mix(in srgb,var(--surface-2) 35%,transparent);border:0;border-radius:14px;color:var(--text-3);font-weight:600;cursor:pointer;transition:all .15s ease}
.dcl-root.dcl-root .btn.tk-off-btn .tkico{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}
.dcl-root.dcl-root .btn.tk-off-btn .tkico svg{width:18px;height:18px;color:inherit}
.dcl-root.dcl-root .btn.tk-off-btn .tkico::after{content:'';position:absolute;left:50%;top:50%;width:23px;height:1.6px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg)}
.dcl-root.dcl-root .btn.tk-off-btn:hover{background:color-mix(in srgb,var(--surface-3) 50%,transparent);color:var(--warning)}


/* ===== SNAPROW ĐÓNG VAI BỘ LỌC (chốt 2026-08-15) =====
   CHỈ .snaprow.filterrow mới có trạng thái chọn — mọi .snaprow khác (toi · sanh · arena ·
   recap · adminvenue…) giữ nguyên y hệt hình dạng cũ. Ô chọn vẫn hiện số như thường,
   chỉ đổi nền/viền theo ngôn ngữ .chip.active. !important để thắng viền inline
   (ô "Bị chặn" có border-color:var(--danger) đặt thẳng trên thẻ). */
.dcl-root.dcl-root .snaprow.filterrow .snap{transition:background .15s ease,border-color .15s ease}
.dcl-root.dcl-root .snaprow.filterrow .snap.on{background:var(--accent-soft);border-color:var(--accent)!important}
.dcl-root.dcl-root .snaprow.filterrow .snap.on>span{color:var(--accent)}

/* Bare mode — khi v5 nhúng iframe (trang compare): ẩn shell, chỉ hiện phone */
.dcl-root.dcl-root body.bare .shell-head,.dcl-root.dcl-root body.bare .screen-nav{display:none}
.dcl-root.dcl-root body.bare .shell{padding:0}
.dcl-root.dcl-root body.bare .stage{padding:10px 0}

/* Demo 2-phone song song: không wrap/stack, căn giữa, ẩn NOTES cho gọn */
.dcl-root.dcl-root .stage{flex-wrap:nowrap;justify-content:center;gap:32px;align-items:flex-start}
.dcl-root.dcl-root .stage-note{display:none}

/* Chế độ "1 khung = 1 điện thoại" — bật bằng `?only=member` / `?only=admin`.
   Dùng cho trang chi tiết `screen.html`: mỗi khung nhúng chính `index.html` nhưng
   chỉ hiện ĐÚNG MỘT máy, để bản thành viên và bản admin đứng thành 2 màn rõ ràng.
   Không có `?only=` thì mấy rule này nằm im, bản gốc 2 máy giữ nguyên. */
/* Ghi đè cả rule mobile ở cuối file (khung hẹp nên nó bóp phone còn 90vw): trang
   chi tiết là công cụ soi design, máy phải đúng 390px chuẩn thì mới so được. */
.dcl-root.dcl-root body.only .stage{padding:6px 0;gap:0;justify-content:center;overflow:visible}
.dcl-root.dcl-root body.only .stage>.phone{width:390px}
.dcl-root.dcl-root body.only-member .phoneR{display:none}
.dcl-root.dcl-root body.only-admin .phone:not(.phoneR){display:none}
/* Màn không có bản admin riêng: hiện lại chính bản thường thay vì khung "na" trống,
   để bên admin vẫn là một màn thật — user vẫn thấy đủ 2 màn cạnh nhau. */
.dcl-root.dcl-root body.only-admin.same-as-member .phone:not(.phoneR){display:block}
.dcl-root.dcl-root body.only-admin.same-as-member .phoneR{display:none}

/* Popup Đăng ký (admin) + dropdown */
.dcl-root.dcl-root .reg-card{width:100%;max-width:340px;max-height:86%;display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.dcl-root.dcl-root .reg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dcl-root.dcl-root .reg-body{flex:1;overflow-y:auto;scrollbar-width:none}
.dcl-root.dcl-root .reg-body::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .pick-list{display:grid;gap:8px}
.dcl-root.dcl-root .pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid transparent;transition:all .12s}
.dcl-root.dcl-root .pick b{font-size:14px}
.dcl-root.dcl-root .pick .avatar{width:36px;height:36px;border-radius:999px;font-size:12px;flex:none}
.dcl-root.dcl-root .pick.guest .avatar{background:rgba(167,139,250,.18);color:#A78BFA}
.dcl-root.dcl-root .pick-ck{width:22px;height:22px;border-radius:999px;border:2px solid var(--text-3);display:grid;place-items:center;flex:none;opacity:.55}
.dcl-root.dcl-root .pick-ck svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.dcl-root.dcl-root .pick.on{border-color:var(--accent);background:var(--accent-soft)}
.dcl-root.dcl-root .pick.on .pick-ck{background:var(--accent);border-color:var(--accent);opacity:1}
.dcl-root.dcl-root .pick.on .pick-ck svg{opacity:1;stroke:var(--accent-ink)}
.dcl-root.dcl-root .dropdown{position:relative}
.dcl-root.dcl-root .dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-size:14px}
.dcl-root.dcl-root .dd-val.muted{color:var(--text-3)}
.dcl-root.dcl-root .dd-caret{color:var(--text-3);font-size:11px;line-height:1;transition:transform .15s}
.dcl-root.dcl-root .dropdown.open .dd-caret{transform:rotate(180deg)}
.dcl-root.dcl-root .dd-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.dcl-root.dcl-root .dropdown.open .dd-menu{display:block}
.dcl-root.dcl-root .dd-search{margin-bottom:8px}
.dcl-root.dcl-root .dd-list{display:grid;gap:2px;max-height:170px;overflow-y:auto;scrollbar-width:none}
.dcl-root.dcl-root .dd-opt{text-align:left;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--text)}
.dcl-root.dcl-root .dd-opt:active{background:var(--surface-3)}

.dcl-root.dcl-root .pick-ck.order{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);opacity:1;font-size:11px;font-weight:700;line-height:1}

/* Console: paychip, court, score-entry, hàng chờ */
.dcl-root.dcl-root .paychip{flex:none;padding:6px 11px;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:600;border:1px solid transparent}
.dcl-root.dcl-root .paychip.paid{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.dcl-root.dcl-root .paychip.paid::after{content:" ✓"}
.dcl-root.dcl-root .court{background:var(--surface-2);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.dcl-root.dcl-root .court.empty{border-style:dashed;border-color:var(--border-strong);background:transparent}
.dcl-root.dcl-root .se-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.dcl-root.dcl-root .stepper{display:flex;align-items:center;gap:8px}
.dcl-root.dcl-root .stepper button{width:30px;height:30px;border-radius:8px;background:var(--surface-3);color:var(--text);font-size:16px;font-weight:700}
.dcl-root.dcl-root .stepper b{min-width:26px;text-align:center;font-size:18px}
.dcl-root.dcl-root .qrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:var(--surface-2)}
.dcl-root.dcl-root .qrow .avatar{width:32px;height:32px;border-radius:999px;font-size:11px;flex:none}
.dcl-root.dcl-root .qrow.dim{opacity:.5}.dcl-root.dcl-root .qrow.playing{opacity:.55}
.dcl-root.dcl-root .qn{width:18px;text-align:center;font-family:'Barlow Condensed';font-weight:700;color:var(--text-3);flex:none}
.dcl-root.dcl-root .qbadge{flex:none;font-size:10px;color:var(--text-3);white-space:nowrap}
.dcl-root.dcl-root .qbadge.hot{color:var(--success);font-weight:600}
.dcl-root.dcl-root .qbadge.live{color:var(--accent);font-weight:600}
.dcl-root.dcl-root .qbadge.warn{color:var(--warn);font-weight:600}

/* Popup ghi điểm — component (dùng token design system) */
.dcl-root.dcl-root .score-list{display:grid;gap:14px;margin-top:16px}
.dcl-root.dcl-root .score-team-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dcl-root.dcl-root .score-team-hd b{font-size:14px}
.dcl-root.dcl-root .score-inp{width:74px;height:48px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-align:center;font-size:24px;font-weight:800;font-family:'IBM Plex Mono';outline:none;transition:border-color .15s}
.dcl-root.dcl-root .score-inp:focus{border-color:var(--accent)}
.dcl-root.dcl-root .quick-row{display:flex;gap:8px}
.dcl-root.dcl-root .quick-row button{flex:1;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:700;transition:all .12s}
.dcl-root.dcl-root .quick-row button:active{background:var(--accent-soft);border-color:var(--accent)}
.dcl-root.dcl-root .quick-row button.qc{flex:.6;color:var(--text-3)}
/* Preview đội A vs B (popup xếp trận) */
.dcl-root.dcl-root .pair-teams{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--surface-2);border-radius:14px;padding:12px}
.dcl-root.dcl-root .pt-side{flex:1;text-align:center;min-width:0}
.dcl-root.dcl-root .pt-lbl{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:4px}
.dcl-root.dcl-root .pt-side b{font-size:14px}
.dcl-root.dcl-root .pt-vs{color:var(--text-3);font-size:12px;flex:none}

/* Kết quả trận (Đã xong) — scoreboard card */
.dcl-root.dcl-root .result-card{background:var(--surface-2);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 16px}
.dcl-root.dcl-root .rc-team{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.dcl-root.dcl-root .rc-nm{font-size:14px;font-weight:600;color:var(--text-3)}
.dcl-root.dcl-root .rc-sc{font-family:'IBM Plex Mono';font-size:22px;font-weight:700;color:var(--text-3);min-width:32px;text-align:right}
.dcl-root.dcl-root .rc-team.win .rc-nm{color:var(--text)}
.dcl-root.dcl-root .rc-team.win .rc-sc{color:var(--accent)}
.dcl-root.dcl-root .rc-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:var(--text-3)}

/* Match result scoreline (A2) — SHARED, tái dùng mọi nơi hiển thị lịch sử trận */
.dcl-root.dcl-root .matchline{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface-2);border-radius:11px}
.dcl-root.dcl-root .matchline .ml-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Barlow Condensed';font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-3)}
.dcl-root.dcl-root .matchline .ml-nm.r{text-align:right}
.dcl-root.dcl-root .matchline .ml-nm.win{color:var(--text)}
.dcl-root.dcl-root .matchline .ml-sc{flex:none;font-family:'IBM Plex Mono';font-weight:700;font-size:18px;color:var(--text-2)}
.dcl-root.dcl-root .matchline .ml-sc .w{color:var(--accent)}

/* ===== GENDER TOKENS (nam/nữ · watermark điểm danh) + WARN (cảnh báo "vừa xong") ===== */
.dcl-root.dcl-root{--nam:#5B9DF9;--nu:#F183B4;--warn:#F5A524;}

/* pick (xếp trận): đề xuất 4 người đầu · cảnh báo người vừa xong (đừng chọn) */
.dcl-root.dcl-root .pick .pk-rec{color:var(--accent);font-weight:600}
.dcl-root.dcl-root .pick .pk-warn{color:var(--warn);font-weight:600}
.dcl-root.dcl-root .pick.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--surface-2))}
.dcl-root.dcl-root .pick.warn .avatar{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}

/* ===== ĐIỂM DANH · card compact 1 line (console admin "Người") =====
   .af = 1 dòng: STT · avatar · tên · giờ · chip tiền. Watermark ♂/♀ mờ ở nền.
   .in = đã điểm danh (hiện giờ + STT + chip tiền). Chưa .in = mờ, không chip. */
.dcl-root.dcl-root .af{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:11px;background:var(--surface-2);border:1px solid transparent;cursor:pointer;transition:.12s}
.dcl-root.dcl-root .af:not(.in){opacity:.5}
.dcl-root.dcl-root .af.in{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.dcl-root.dcl-root .af-bg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:'IBM Plex Mono';font-weight:700;font-size:62px;line-height:1;opacity:.13;pointer-events:none;user-select:none}
.dcl-root.dcl-root .af-bg.m{color:var(--nam)} .dcl-root.dcl-root .af-bg.f{color:var(--nu)}
.dcl-root.dcl-root .af>*:not(.af-bg){position:relative;z-index:1}
/* nhãn vãng lai cạnh tên: KHÔNG có biến thể riêng cho list điểm danh nữa —
   dùng chung `.gu::after` (chốt 2026-08-26). `.af-vl` đã xoá, đừng dựng lại. */
.dcl-root.dcl-root .af-ord{width:14px;text-align:center;font-family:'Barlow Condensed';font-size:16px;font-weight:700;color:var(--text-3);flex:none}
.dcl-root.dcl-root .af.in .af-ord{color:var(--accent)}
.dcl-root.dcl-root .af .avatar{width:28px;height:28px;border-radius:999px;font-size:10px;flex:none}
.dcl-root.dcl-root .af-nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .af-when{font-family:'IBM Plex Mono';font-size:11px;color:var(--text-3);flex:none}
.dcl-root.dcl-root .af .none{display:inline} .dcl-root.dcl-root .af .when{display:none}
.dcl-root.dcl-root .af.in .none{display:none} .dcl-root.dcl-root .af.in .when{display:inline}
.dcl-root.dcl-root .af-pay{display:none;flex:none;min-width:58px;text-align:center;padding:4px 10px;border-radius:999px;background:var(--surface-3);border:1px solid transparent;color:var(--text-2);font-size:11px;font-weight:700;font-family:'IBM Plex Mono';cursor:pointer;margin-left:8px}
.dcl-root.dcl-root .af.in .af-pay{display:inline-block}
.dcl-root.dcl-root .af-pay.paid{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.dcl-root.dcl-root .af-pay.paid::before{content:'✓ '}

/* ===== ROSTER · DANH SÁCH ĐĂNG KÝ (member, buổi CHƯA bắt đầu) — chốt 2026-08-26 =====
   Dùng lại khuôn .af của list điểm danh, nhưng bọc trong .roster để BỎ nghĩa điểm danh:
   không mờ (.af:not(.in) vốn opacity .5), không con trỏ, không chip tiền.
   .af-when trong .roster là GIỜ ĐĂNG KÝ, không phải giờ điểm danh. Hàng của mình = .af.you. */
.dcl-root.dcl-root .roster .af:not(.in){opacity:1;cursor:default}
.dcl-root.dcl-root .roster .af .af-pay{display:none}
.dcl-root.dcl-root .roster .af.you{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
.dcl-root.dcl-root .af-you{font-style:normal;font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.1em;padding:1px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}

/* ===== GHI ĐIỂM · popup (stepper lớn + quick +1/+5/+10 + đổi điểm + numpad) ===== */
.dcl-root.dcl-root .sc-trow{padding:14px 2px}
.dcl-root.dcl-root .sc-top{display:flex;align-items:center;justify-content:space-between}
.dcl-root.dcl-root .sc-nm{display:flex;flex-direction:column;min-width:0}
.dcl-root.dcl-root .sc-nm .pl{font-family:'Barlow Condensed';font-weight:700;font-size:16px;text-transform:uppercase;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.dcl-root.dcl-root .sc-trow.win .sc-nm .pl{color:var(--accent)}
.dcl-root.dcl-root .sc-wtag{align-self:flex-start;margin-top:2px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:5px;padding:1px 5px;opacity:0;transition:.12s}
.dcl-root.dcl-root .sc-trow.win .sc-wtag{opacity:1}
.dcl-root.dcl-root .sc-ctrl{display:flex;align-items:center;gap:9px;flex:none}
.dcl-root.dcl-root .sc-step{width:36px;height:36px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-size:20px;line-height:1;cursor:pointer;flex:none}
.dcl-root.dcl-root .sc-step:active{background:var(--accent-soft);border-color:var(--accent)}
.dcl-root.dcl-root .sc-num{font-family:'Barlow Condensed';font-size:40px;font-weight:700;width:52px;text-align:center;line-height:1;background:transparent;border:none;color:var(--text);cursor:pointer;padding:2px 0;border-radius:10px;position:relative}
.dcl-root.dcl-root .sc-num:active{background:var(--surface-2)}
.dcl-root.dcl-root .sc-num::after{content:'✎';position:absolute;top:2px;right:2px;font-size:10px;color:var(--text-3);opacity:.5}
.dcl-root.dcl-root .sc-trow.win .sc-num{color:var(--accent)}
.dcl-root.dcl-root .sc-quick{display:flex;gap:7px;margin-top:10px}
.dcl-root.dcl-root .sc-quick button{flex:1;height:34px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-family:'IBM Plex Mono';font-size:13px;font-weight:700;cursor:pointer}
.dcl-root.dcl-root .sc-quick button:active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.dcl-root.dcl-root .sc-swap{display:flex;align-items:center;gap:10px;margin:2px 0}
.dcl-root.dcl-root .sc-swap::before,.dcl-root.dcl-root .sc-swap::after{content:'';flex:1;height:1px;background:var(--border)}
.dcl-root.dcl-root .sc-swapb{flex:none;padding:6px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.dcl-root.dcl-root .sc-swapb:active{border-color:var(--accent);color:var(--accent)}
.dcl-root.dcl-root .sc-swapb .ic{font-size:15px}
.dcl-root.dcl-root .sc-pad{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 18px 18px;padding:16px 18px 18px;transform:translateY(102%);transition:transform .18s ease;box-shadow:0 -12px 30px rgba(0,0,0,.35);z-index:5}
.dcl-root.dcl-root .sc-pad.open{transform:translateY(0)}
.dcl-root.dcl-root .sc-pad-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.dcl-root.dcl-root .sc-pad-hd .lbl{font-size:12px;color:var(--text-3);white-space:nowrap} .dcl-root.dcl-root .sc-pad-hd b{color:var(--text-2);font-size:13px}
.dcl-root.dcl-root .sc-pad-val{font-family:'Barlow Condensed';font-size:44px;font-weight:700;color:var(--accent);text-align:center;line-height:1;margin-bottom:12px}
.dcl-root.dcl-root .sc-pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dcl-root.dcl-root .sc-pad-k{height:46px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono';font-size:19px;font-weight:700;cursor:pointer}
.dcl-root.dcl-root .sc-pad-k:active{background:var(--accent-soft);border-color:var(--accent)}
.dcl-root.dcl-root .sc-pad-k.util{color:var(--text-3);font-size:15px}
.dcl-root.dcl-root .sc-pad-k.done{grid-column:1/4;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:15px}

/* ===== CHI PHÍ · dòng tính "số × giá = tổng" (tiền sân/giờ · tiền cầu/quả) ===== */
.dcl-root.dcl-root .costcalc{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.dcl-root.dcl-root .costcalc .ci{width:80px;height:38px;text-align:center;font-family:'IBM Plex Mono';font-weight:700;font-size:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;color:var(--text)}
.dcl-root.dcl-root .costcalc .ci:focus{outline:none;border-color:var(--accent)}
.dcl-root.dcl-root .costcalc .op{color:var(--text-3);font-weight:700}
.dcl-root.dcl-root .costcalc .unit{font-size:11px;color:var(--text-3)}
.dcl-root.dcl-root .costcalc .res{margin-left:auto;font-family:'Barlow Condensed';font-weight:700;font-size:16px;color:var(--text);white-space:nowrap}

/* ===== SEGMENTED CONTROL (kiểu v4 "Nhịp·Hành trình·Đường đua") — cho tab bar CỐ ĐỊNH 2–4 mục ===== */
.dcl-root.dcl-root .seg{display:flex;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border-strong)}
.dcl-root.dcl-root .seg button{flex:1;min-width:0;height:40px;border:none;background:transparent;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.dcl-root.dcl-root .seg button.on,.dcl-root.dcl-root .seg button.active{background:var(--accent);color:var(--accent-ink)}

/* ===== CHIP · active → pill ĐẶC (đồng bộ cảm giác v4, thay accent-soft+viền) =====
   Override .chip.active của styles.css (components.css nạp sau qua @import). Chip cuộn không-active giữ nguyên.
   Multi-select (.msel) & #pairPool có specificity cao hơn → không đụng. */
.dcl-root.dcl-root .chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dcl-root.dcl-root .chip-gold.active{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}

/* ===== .mvs — CARD CẶP ĐẤU 2 HÀNG (mọi nơi có tên tuyển thủ; tên 2 từ đủ chỗ) =====
   Lưới 3 cột: đội trái (a trên / b dưới) · giữa (tỉ số hoặc "vs") · đội phải (c/d).
   Đội thắng .win → vàng. Tên "Bạn" .you → vàng (highlight thay chip). Thống nhất kiểu .matchline. */
.dcl-root.dcl-root .mvs{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"a mid c" "b mid d";column-gap:12px;row-gap:3px;align-items:center;background:var(--surface-2);border-radius:12px;padding:11px 14px}
.dcl-root.dcl-root .mvs .p{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.dcl-root.dcl-root .mvs .a{grid-area:a}.dcl-root.dcl-root .mvs .b{grid-area:b}
.dcl-root.dcl-root .mvs .c{grid-area:c;text-align:right}.dcl-root.dcl-root .mvs .d{grid-area:d;text-align:right}
.dcl-root.dcl-root .mvs .win{color:var(--accent)}
.dcl-root.dcl-root .mvs .you{color:var(--accent)}
.dcl-root.dcl-root .mvs .mid{grid-area:mid;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px}
.dcl-root.dcl-root .mvs .sc{font-family:'IBM Plex Mono';font-weight:700;font-size:17px;color:var(--text-2);line-height:1.05}
.dcl-root.dcl-root .mvs .sc.lose{color:var(--text-3)} .dcl-root.dcl-root .mvs .sc.win{color:var(--accent)}
.dcl-root.dcl-root .mvs .dash{font-family:'Barlow Condensed';font-weight:700;font-size:11px;color:var(--text-3);margin:1px 0}
.dcl-root.dcl-root .mvs .vs{font-family:'Barlow Condensed';font-weight:700;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.dcl-root.dcl-root .mvs.sm{padding:8px 12px;column-gap:10px;border-radius:10px}
.dcl-root.dcl-root .mvs.sm .p{font-size:14px} .dcl-root.dcl-root .mvs.sm .sc{font-size:15px} .dcl-root.dcl-root .mvs.sm .mid{min-width:44px}
.dcl-root.dcl-root .mvs.bare{background:transparent;padding:10px 2px}
/* thời gian live ở cột giữa (card sân/trận đang đánh — thay "vs") */
.dcl-root.dcl-root .mvs .livemin{font-family:'IBM Plex Mono';font-weight:700;font-size:15px;color:var(--success);white-space:nowrap;line-height:1}

/* ===== EMPTY COURT — cả card là nút dashed (empty state mời gọi, gọn) ===== */
.dcl-root.dcl-root .ec-a{width:100%;border:1.5px dashed var(--border-strong);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:transparent;transition:.15s;font-family:inherit}
.dcl-root.dcl-root .ec-a:active{border-color:var(--accent);background:var(--accent-soft)}
.dcl-root.dcl-root .ec-a .ec-ic{width:28px;height:28px;color:var(--text-3)}
.dcl-root.dcl-root .ec-a:active .ec-ic{color:var(--accent)}
.dcl-root.dcl-root .ec-a .ec-t{font-family:'Barlow Condensed';font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-2)}

/* row-card không tương tác (chỉ hiển thị) → bỏ con trỏ + hover */
.dcl-root.dcl-root .row-card.static{cursor:default}
.dcl-root.dcl-root .row-card.static:hover .dateblock{background:var(--surface-2)}
.dcl-root.dcl-root .row-card.static:hover,.dcl-root.dcl-root .row-card.static:active,.dcl-root.dcl-root .row-card.static:focus{
  background:var(--surface);border-color:var(--border);
  transform:none;box-shadow:none;filter:none;opacity:1
}

/* ===== DATEBOX — thứ (accent) chồng trên ngày/tháng (hero Sảnh, thay countdown) ===== */
.dcl-root.dcl-root .datebox{flex:none;text-align:center;background:var(--surface-3);border-radius:12px;padding:6px 15px}
.dcl-root.dcl-root .datebox .db-dw{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);line-height:1;padding-bottom:4px;border-bottom:1px solid var(--border-strong);margin-bottom:4px}
.dcl-root.dcl-root .datebox .db-dt{font-family:'Barlow Condensed';font-weight:700;font-size:27px;line-height:1;color:var(--text)}

/* ============================================================
   LỊCH SỬ (history) — member. Scope .hsx (admin sẽ tái dùng timeline/filter/seg).
   Tên class generic (.sr/.d/.tb…) được scope dưới .hsx để không đụng global.
   ============================================================ */
.dcl-root.dcl-root .hsx .appbar .display{font-size:21px}
.dcl-root.dcl-root .hsx .appbar .display .lux{color:var(--accent)}
.dcl-root.dcl-root .hsx .appbar .caption{font-size:11px;margin-top:2px}
.dcl-root.dcl-root .hsx .hbody{padding:12px 15px 26px}
.dcl-root.dcl-root .hsx .pane[hidden]{display:none}
.dcl-root.dcl-root .hsx .chiprow{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:2px}
.dcl-root.dcl-root .hsx .chiprow::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .hsx .chiprow .chip{flex:none}
.dcl-root.dcl-root .hsx .tlx{position:relative;padding-left:2px}
.dcl-root.dcl-root .hsx .tlx-row{position:relative;display:flex;align-items:flex-start;gap:10px;padding-bottom:14px}
.dcl-root.dcl-root .hsx .tlx-row::before{content:'';position:absolute;left:19px;top:62px;bottom:-4px;width:2px;background:var(--border);z-index:0}
.dcl-root.dcl-root .hsx .tlx-row:last-child::before{display:none}
.dcl-root.dcl-root .hsx .tlx-row[hidden]{display:none}
.dcl-root.dcl-root .hsx .tlx-body{flex:1;min-width:0}
.dcl-root.dcl-root .hsx .dbx{position:relative;z-index:1;flex:none;width:38px;text-align:center;background:var(--surface-3);border-radius:11px;padding:5px 0}
.dcl-root.dcl-root .hsx .dbx .dbw{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);line-height:1;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--border-strong)}
.dcl-root.dcl-root .hsx .dbx .dbd{font-family:'Barlow Condensed';font-weight:700;font-size:20px;line-height:1;color:var(--text)}
.dcl-root.dcl-root .hsx .dbx .dbm{font-family:'Barlow Condensed';font-size:18px;font-weight:700;color:var(--text-3);line-height:1;margin-top:2px}
.dcl-root.dcl-root .hsx .mcard{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.dcl-root.dcl-root .hsx .tlx-body .mcard+.mcard{margin-top:8px}
.dcl-root.dcl-root .hsx .ov-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
.dcl-root.dcl-root .hsx .ov-when{min-width:0;z-index:60}
.dcl-root.dcl-root .hsx .ov-when .t{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums}
.dcl-root.dcl-root .hsx .ov-when .c{font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-top:2px}
.dcl-root.dcl-root .hsx .tb{display:flex;gap:6px;flex:none}
.dcl-root.dcl-root .hsx .wchip{font-family:'Barlow Condensed';font-weight:700;font-size:13px;padding:1px 9px;border-radius:7px;letter-spacing:.02em}
.dcl-root.dcl-root .hsx .wchip.w{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.dcl-root.dcl-root .hsx .wchip.l{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.dcl-root.dcl-root .hsx .wchip.mut{color:var(--text-3);background:var(--surface-3)}
.dcl-root.dcl-root .hsx .sr{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;padding:5px 0}
.dcl-root.dcl-root .hsx .sr.gen{border-top:1px solid var(--border);margin-top:1px}
.dcl-root.dcl-root .hsx .sr .k{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.03em;color:var(--text-3);width:56px;flex:none;position:relative;top:2px}
.dcl-root.dcl-root .hsx .sr .v{font-family:'IBM Plex Mono';color:var(--text-2);font-size:12.5px;line-height:1}
.dcl-root.dcl-root .hsx .sr .v .ar{color:var(--text-3);margin:0 3px}
.dcl-root.dcl-root .hsx .sr .d,.dcl-root.dcl-root .hsx .sr .lc-tier,.dcl-root.dcl-root .hsx .sr .paytag{align-self:center}
.dcl-root.dcl-root .hsx .sr .paytag{margin-left:auto;font-size:11.5px;padding:3px 9px}
.dcl-root.dcl-root .hsx .d{font-family:'Barlow Condensed';font-weight:700;font-size:12px;padding:0 7px;border-radius:6px;line-height:1.55}
.dcl-root.dcl-root .hsx .d.up{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.dcl-root.dcl-root .hsx .d.dn{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.dcl-root.dcl-root .hsx .d.flat{color:var(--text-3);background:var(--surface-3)}
.dcl-root.dcl-root .hsx .lc-tier{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:999px}
.dcl-root.dcl-root .hsx .lc-tier::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.dcl-root.dcl-root .hsx .lc-tier.gold{color:var(--t-vang);background:color-mix(in srgb,var(--t-vang) 15%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.silver{color:var(--t-bac);background:color-mix(in srgb,var(--t-bac) 14%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.bronze{color:var(--t-dong);background:color-mix(in srgb,var(--t-dong) 15%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.kcuong{color:var(--t-kc);background:color-mix(in srgb,var(--t-kc) 15%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.bkim{color:var(--t-bkim);background:color-mix(in srgb,var(--t-bkim) 15%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.tanbinh{color:var(--t-tanbinh);background:color-mix(in srgb,var(--t-tanbinh) 14%,transparent)}
.dcl-root.dcl-root .hsx .lc-tier.sm{font-size:10px;padding:1px 8px}.dcl-root.dcl-root .hsx .lc-tier.sm::before{width:6px;height:6px}
.dcl-root.dcl-root .hsx .paytag{font-family:'IBM Plex Mono';font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;margin-left:auto;flex:none}
.dcl-root.dcl-root .hsx .paytag.paid{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.dcl-root.dcl-root .hsx .paytag.paid::before{content:'✓ '}
.dcl-root.dcl-root .hsx .paytag.due{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.dcl-root.dcl-root .hsx .paytag.due::before{content:'• '}
.dcl-root.dcl-root .hsx .recap{display:flex;gap:10px;align-items:center;padding-bottom:14px;position:relative}
.dcl-root.dcl-root .hsx .recap .rc-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:18px;background:color-mix(in srgb,#E7C24B 15%,transparent);border:1px solid color-mix(in srgb,#E7C24B 40%,transparent)}
.dcl-root.dcl-root .hsx .recap b{font-size:13.5px;color:#E7C24B}
.dcl-root.dcl-root .hsx .m2t{display:flex;align-items:baseline;gap:8px;padding:2px 0;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-2)}
.dcl-root.dcl-root .hsx .m2t .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcl-root.dcl-root .hsx .m2t .sc{flex:none;font-family:'IBM Plex Mono';font-size:16px;color:var(--text-3)}
.dcl-root.dcl-root .hsx .m2t.win{color:var(--accent)}
.dcl-root.dcl-root .hsx .m2t.win .sc{color:var(--accent)}
.dcl-root.dcl-root .hsx .m2t .me{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
.dcl-root.dcl-root .hsx .mmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
.dcl-root.dcl-root .hsx .streak{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#E7C24B;border:1px solid color-mix(in srgb,#E7C24B 40%,transparent);border-radius:6px;padding:1px 6px}
.dcl-root.dcl-root .hsx .fbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dcl-root.dcl-root .hsx .fbar .lbl{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;flex:none}
.dcl-root.dcl-root .hsx .bsel{position:relative;flex:1}
.dcl-root.dcl-root .hsx .bsel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:11px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.dcl-root.dcl-root .hsx .bsel-btn::after{content:'▾';color:var(--text-3);font-size:11px;transition:transform .15s}
.dcl-root.dcl-root .hsx .bsel.open .bsel-btn::after{transform:rotate(180deg)}
.dcl-root.dcl-root .hsx .bsel-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.5);max-height:236px;overflow:auto;scrollbar-width:none}
.dcl-root.dcl-root .hsx .bsel.open .bsel-menu{display:block}
.dcl-root.dcl-root .hsx .bsel-opt{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:8px;font-size:13px;color:var(--text);background:none;border:none;cursor:pointer}
.dcl-root.dcl-root .hsx .bsel-opt:hover{background:var(--surface-3)}
.dcl-root.dcl-root .hsx .bsel-opt.sel{color:var(--accent);font-weight:700}
/* .me — gạch chân tên member (đồng bộ sang card .mvs trang Buổi chơi) */
.dcl-root.dcl-root .mvs .p.me{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
/* .pn — số trận đã đánh trong buổi (chốt 2026-08-18). HAI chỗ dùng, cùng một chip:
   [1] card .mvs — 4 người đang trên sân (bản admin màn Buổi chơi);
   [2] hàng .pick.pair-pick — popup Xếp trận #pairModal (thêm 2026-08-18).
   Admin dùng để cân lượt: .hi = đánh nhiều nhất trong danh sách đang xem (nên cho nghỉ) ·
   .lo = ít nhất (nên xếp). Ngưỡng luôn TƯƠNG ĐỐI trong đúng danh sách đó, không tuyệt đối;
   tất cả bằng nhau ⇒ không tô ai. Ở hai cột phải (.c/.d) số đứng TRƯỚC tên nên đảo lề. */
.dcl-root.dcl-root .mvs .p .pn,.dcl-root.dcl-root .pick .pn{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-size:10px;letter-spacing:0;color:var(--text-3);background:color-mix(in srgb,var(--text-3) 15%,transparent);border-radius:999px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.dcl-root.dcl-root .mvs .p.c .pn,.dcl-root.dcl-root .mvs .p.d .pn{margin:0 5px 0 0}
.dcl-root.dcl-root .mvs .p .pn.hi,.dcl-root.dcl-root .pick .pn.hi{color:var(--warning);background:color-mix(in srgb,var(--warning) 16%,transparent)}
.dcl-root.dcl-root .mvs .p .pn.lo,.dcl-root.dcl-root .pick .pn.lo{color:var(--accent);background:var(--accent-soft)}

/* ============================================================
   LỊCH SỬ ADMIN (history-admin) — bổ sung cho .hsx.
   Dùng chung với member: .tlx/.dbx/.m2t/.bsel/.fbar/.appbar/.mmeta/.chiprow/.hbody/.pane.
   ============================================================ */
/* .atag — nhãn ADMIN, luôn hiện trên tiêu đề mọi màn admin (global, không giới hạn .hsx) */
.dcl-root.dcl-root .atag{display:inline-block;font-family:'Be Vietnam Pro',sans-serif;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:5px;padding:1px 5px;vertical-align:middle;margin-left:6px;white-space:nowrap;line-height:1.5}
.dcl-root.dcl-root .hsx .filt-active[hidden]{display:none}
/* PHẠM VI MỘT NGƯỜI (thêm 2026-08-27) — lối vào từ 4 ô thống kê màn Chi tiết thành viên.
   .off-scope là lớp PHỦ LÊN bộ lọc cũ (bộ cũ dùng [hidden]) nên hai bộ không tranh nhau. */
.dcl-root.dcl-root .hsx .off-scope{display:none!important}
.dcl-root.dcl-root .hsx .whobar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dcl-root.dcl-root .hsx .whobar .whonote{font-size:10.5px;color:var(--text-3);font-family:'IBM Plex Mono',monospace}
.dcl-root.dcl-root .hsx .fbar.hares[hidden]{display:none}
.dcl-root.dcl-root .hsx .fbar.hares{gap:8px;flex-wrap:wrap}
.dcl-root.dcl-root .hsx .chiprow.sm{display:flex;gap:6px;padding:0;flex-wrap:wrap}
.dcl-root.dcl-root .hsx .chiprow.sm .chip,.dcl-root.dcl-root .hsx .strkchip{font-size:11px;padding:4px 10px}
.dcl-root.dcl-root .hsx .strkchip{margin-left:auto}
.dcl-root.dcl-root .hsx .strkchip.active{color:var(--gold);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
/* (c) tô sáng chuỗi thắng đang giữ — dùng --gold như mọi chỗ nói về chuỗi trong app */
.dcl-root.dcl-root .hsx .mc.strk{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--surface-2))}
/* card phẳng (buổi + trận admin) */
.dcl-root.dcl-root .hsx .mc{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.dcl-root.dcl-root .hsx .mc+.mc{margin-top:8px}
.dcl-root.dcl-root .hsx .mc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.dcl-root.dcl-root .hsx .swhen .t{font-size:14px;font-weight:700;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums}
.dcl-root.dcl-root .hsx .swhen .c{font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:1px}
.dcl-root.dcl-root .hsx .lk{font-size:11px;font-weight:600;color:var(--accent);flex:none;cursor:pointer;white-space:nowrap}
/* bar legend 2 đầu · 1 cặp màu */
.dcl-root.dcl-root .hsx .eb .ends{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:6px}
.dcl-root.dcl-root .hsx .eb .ends .e{font-size:9px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .hsx .eb .ends .e b{font-family:'IBM Plex Mono';font-weight:700;font-size:11.5px;color:var(--text)}
.dcl-root.dcl-root .hsx .eb .ends .e.r{text-align:right}.dcl-root.dcl-root .hsx .eb .ends .e .due{color:var(--warn,#F5A524)}
.dcl-root.dcl-root .hsx .eb .ct{height:7px;border-radius:4px;overflow:hidden;display:flex;background:var(--surface-3)}
.dcl-root.dcl-root .hsx .eb .ct i{height:100%}
.dcl-root.dcl-root .hsx .g2{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
/* thông tin chung kiểu C (số trên / label dưới) */
.dcl-root.dcl-root .hsx .cstat{display:flex}.dcl-root.dcl-root .hsx .cstat .s{text-align:center}
.dcl-root.dcl-root .hsx .cstat.strip{margin:0 0 11px;padding:9px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .hsx .cstat.strip .s{flex:1;border-right:1px solid var(--border)}.dcl-root.dcl-root .hsx .cstat.strip .s:last-child{border-right:none}
.dcl-root.dcl-root .hsx .cstat .s b{font-family:'Barlow Condensed';font-weight:700;font-size:19px;color:var(--text);display:block;line-height:1}
.dcl-root.dcl-root .hsx .cstat .s span{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:2px;display:block}
/* tap-to-filter tên + VL badge */
.dcl-root.dcl-root .hsx .pn{cursor:pointer}.dcl-root.dcl-root .hsx .pn:active{opacity:.6}
.dcl-root.dcl-root .hsx .m2t .pn.active{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.dcl-root.dcl-root .hsx .gu::after{content:'VL';display:inline-block;text-decoration:none;font-size:8px;font-weight:800;border:1px solid currentColor;border-radius:4px;padding:0 3px;margin-left:5px;vertical-align:.32em;letter-spacing:.02em;opacity:.85}
.dcl-root.dcl-root .hsx .mgchip{font-family:'Barlow Condensed';font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:1px 8px;border-radius:6px;line-height:1.5;color:var(--warn,#F5A524);background:color-mix(in srgb,var(--warn,#F5A524) 14%,transparent);cursor:pointer}
/* active-filter (icon + chip, xoá từng cái) */
.dcl-root.dcl-root .hsx .filt-active{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;padding:8px 10px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));border-radius:11px}
.dcl-root.dcl-root .hsx .filt-active .fic{width:15px;height:15px;color:var(--text-3);flex:none}
.dcl-root.dcl-root .hsx .fa-chip{font-family:'Barlow Condensed';font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:2px 6px 2px 10px;display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.dcl-root.dcl-root .hsx .fa-chip .x{font-size:10px;opacity:.7;font-weight:800}
.dcl-root.dcl-root .hsx .fa-chip.warn{background:var(--warn,#F5A524);color:#1c1508}
.dcl-root.dcl-root .hsx .fcount{font-size:11px;color:var(--text-3);margin:0 2px 11px;font-family:'IBM Plex Mono'}

/* .dropdown có .dd-caret span riêng → bỏ ::after generic (tránh 2 mũi tên) */
.dcl-root.dcl-root .dropdown .dd-btn::after{content:none}

/* pick-list card name: tên + icon giới tính (kiểu A) — nam/nữ dùng token --nam/--nu */
.dcl-root.dcl-root .pick .nmrow{display:flex;align-items:center;gap:6px;min-width:0}
.dcl-root.dcl-root .pick .nmrow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.dcl-root.dcl-root .pick .gi{flex:none;display:inline-flex;align-items:center;line-height:1}
.dcl-root.dcl-root .pick .gi svg{width:15px;height:15px;display:block}
.dcl-root.dcl-root .pick.m .gi{color:var(--nam,#5B9DF9)}
.dcl-root.dcl-root .pick.f .gi{color:var(--nu,#F183B4)}

/* pair-pick (modal xếp cặp): chữ nhỏ hơn ~20% so với pick thường */
.dcl-root.dcl-root .pair-pick b,.dcl-root.dcl-root .pair-pick .nmrow b{font-size:12.2px}
.dcl-root.dcl-root .pair-pick .caption{font-size:11px}
.dcl-root.dcl-root .pair-pick .avatar{font-size:11px}
.dcl-root.dcl-root .pair-pick .gi svg{width:13px;height:13px}

/* icon giới tính trên nút Nam/Nữ (regModal VL mới) — tách flex-item để canh giữa */
.dcl-root.dcl-root #regNewGender .g-ic{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.dcl-root.dcl-root #regNewGender .g-ic svg{width:16px;height:16px;display:block}

/* ============================================================
   MOBILE (≤820px): 2 phone không vừa → stage scroll NGANG + snap.
   Member (base) ở đầu (thấy ngay), vuốt phải xem admin. Shell bớt padding.
   ============================================================ */
@media (max-width:820px){
  .dcl-root.dcl-root .shell{padding:14px 0 56px}
  .dcl-root.dcl-root .screen-nav{padding-left:12px;padding-right:12px}
  .dcl-root.dcl-root .stage{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:16px;padding:4px 12px 8px}
  .dcl-root.dcl-root .stage>.phone{scroll-snap-align:center;width:min(390px,90vw)}
  .dcl-root.dcl-root .stage::-webkit-scrollbar{display:none}
  .dcl-root.dcl-root .stage{scrollbar-width:none}
}


/* ============================================================
   Final global overrides — merged from the former styles5.css.
   Loaded last (after tokens/base + the component library above),
   preserving the original cascade order. ============================ */
/* Court Luxe v5 — FINAL. Khung v2 Stadium + vé/biên lai/thẻ v3 + matchday/journey/recap/xếp trận v4. */

/* khôi phục nền v2 (styles3/4 override .phone) */
.dcl-root.dcl-root .phone{background:
  radial-gradient(120% 60% at 50% -10%, var(--accent-soft), transparent 60%),
  var(--bg)}

/* ticker bấm được → match day */
.dcl-root.dcl-root .ticker[data-go]{cursor:pointer}

/* Fix kế thừa từ v2: tabbar2 absolute trong scroll container sẽ trôi theo nội dung
   khi màn dài hơn khung. Chuyển sang flex + sticky: màn ngắn bar vẫn nằm đáy
   (margin-top:auto), màn dài bar ghim đáy khung và nội dung không bao giờ bị che. */
.dcl-root.dcl-root .screen.with-tabs.active{display:flex;flex-direction:column}
.dcl-root.dcl-root .screen.with-tabs>*{flex-shrink:0}
.dcl-root.dcl-root .screen.with-tabs .tabbar2{position:sticky;bottom:0;margin-top:auto;flex-shrink:0;width:auto}
/* Nav bar ghim thật vào khung máy: JS chuyển .tabbar2 ra ngoài scroll container
   (.phone > .tabbar2) nên không còn trôi theo nội dung khi màn dài. */
.dcl-root.dcl-root .phone>.tabbar2{position:absolute;left:0;right:0;bottom:0;z-index:50;margin:0}
.dcl-root.dcl-root .screen.with-tabs.pinned-tabs{padding-bottom:78px}
.dcl-root.dcl-root .screen.with-tabs>*:nth-last-child(2){margin-bottom:34px} /* chừa chỗ cho zapfab nhô lên */

/* QUY TẮC: text trong button không bao giờ wrap — nếu dài quá thì rút gọn label,
   không để xuống dòng làm hư layout (trừ xuống dòng chủ ý bằng <br>) */
.dcl-root.dcl-root .btn,.dcl-root.dcl-root .pill-cta,.dcl-root.dcl-root .chip,.dcl-root.dcl-root .keybtn,.dcl-root.dcl-root .stag,.dcl-root.dcl-root .tab{white-space:nowrap}
.dcl-root.dcl-root .btn-sm{padding-left:12px;padding-right:12px}

/* ===== ĐỒNG BỘ NGÔN NGỮ THIẾT KẾ =====
   Các màn gốc v3/v4 (vé, biên lai, thẻ tuyển thủ, match day, hành trình,
   recap, xếp trận) đưa về cùng ngôn ngữ v2 Stadium: nút pill bo tròn full,
   text phụ Be Vietnam Pro sentence-case, card bo 20px. Artifact đặc trưng
   (vé đục lỗ, biên lai nhiệt, thẻ bài, biểu đồ độ cao, story) giữ nguyên —
   chỉ đồng bộ phần "chrome" quanh chúng. */

/* Nút: .pill-cta ăn theo .btn — cùng bo tròn, cùng font, cùng cỡ */
.dcl-root.dcl-root .pill-cta{border-radius:999px;height:48px;padding:0 24px;
  font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:600;font-size:15px;
  text-transform:none;letter-spacing:0;justify-content:center}

/* Text phụ: .byline về sentence-case như .caption của v2 */
.dcl-root.dcl-root .byline{font-size:12px;font-weight:500;color:var(--text-2);
  text-transform:none;letter-spacing:0;line-height:1.45}
/* .kicker cùng nhịp .overline (giữ gạch accent đặc trưng) */
.dcl-root.dcl-root .kicker{font-size:11px;letter-spacing:.08em;font-weight:700}
/* .mega cùng nhịp .display */
.dcl-root.dcl-root .mega{line-height:.92;letter-spacing:-.01em}

/* Card v4 về cùng bo góc 20px của .card v2 */
.dcl-root.dcl-root .court,.dcl-root.dcl-root .upnext{border-radius:20px}

/* ===== TINH CHỈNH THEME (review 2026-07-07) =====
   Royal Gold gốc có --accent trùng hệt --gold (#D9B45B) → CTA và lớp
   danh vọng/tier "Vàng" không phân biệt được. Tách 2 lớp:
   accent (hành động) sáng hơn · gold (vinh danh) trầm hơn. */
.dcl-root.dcl-root[data-theme="royal-gold"]{
  --accent:#E9C76B; --accent-soft:rgba(233,199,107,.13);
  --glow:0 0 24px rgba(233,199,107,.22);
  --gold:#C0913F; --gold-ink:#171207; --gold-soft:rgba(192,145,63,.18);
}
/* Sunset Rally gốc: chữ trắng trên cam chỉ đạt 3.1:1 (dưới 4.5:1 cho chữ 15px).
   Đổi sang mực tối — vừa đủ chuẩn vừa đồng nhất pattern "mực tối trên accent
   sáng" của midnight-volt / royal-gold / ocean-smash. */
.dcl-root.dcl-root[data-theme="sunset-rally"]{--accent-ink:#2B1008}

/* xếp trận: pool chip chọn nhiều */
.dcl-root.dcl-root #pairPool .chip{cursor:pointer}
.dcl-root.dcl-root #pairPool .chip.active{outline:2px solid var(--accent);outline-offset:1px}

/* auth: rung khi sai PIN */
@keyframes v5shake{0%,100%{translate:0}20%{translate:-7px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:5px 0}}
.dcl-root.dcl-root .shake{animation:v5shake .3s ease}

/* trạng thái chờ xác nhận (thanh toán/đăng ký) */
.dcl-root.dcl-root .stag-pending{background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info)}

/* ===== REVIEW PASS (2026-07-08) =====
   Chống pan ngang toàn màn (bigstroke/confetti trang trí tràn cạnh là chủ ý
   thị giác, không được tạo scroll ngang) */
.dcl-root.dcl-root .screen{overflow-x:hidden}
/* stickerwall: cột 1fr có min-content floor → tràn khi text dài. Ép minmax(0,1fr). */
.dcl-root.dcl-root .stickerwall{grid-template-columns:repeat(3,minmax(0,1fr))}
.dcl-root.dcl-root .stickerwall .sticker{min-width:0}
/* sticky-cta nổi trên nội dung khi cuộn */
.dcl-root.dcl-root .sticky-cta{z-index:6}
/* padding-bottom:88px của base (dành cho tabbar absolute cũ) làm tabbar sticky
   pin lơ lửng trên đáy — bar sticky tự chiếm chỗ flow nên không cần padding này */
.dcl-root.dcl-root .screen.with-tabs{padding-bottom:0}
/* tier chip không gãy dòng; trong sticker chật thì thu chữ */
.dcl-root.dcl-root .tier{white-space:nowrap}
.dcl-root.dcl-root .sticker .tier{font-size:9px;padding:2px 7px}

/* =====================================================================
   BẢNG TIN · BÀI ĐĂNG (feed post) — component "sống theo data", namespace .fp*
   Layout ảnh theo SỐ LƯỢNG (CỐ ĐỊNH): 1 → .fp-img đơn · 2 → .fp-2 lưới đôi ·
   3 → .fp-3 collage · 4+ → .fp-4 filmstrip. Caption = Playfair italic (Caveat vỡ VN).
   Bài chỉ chữ = .fp-note. Admin ghim (.fp-ghim) → hiện ở trang con Kỷ niệm (.fp-mem).
   ===================================================================== */
/* Thẻ polaroid (bài CÓ ảnh) */
.dcl-root.dcl-root .fp{background:#f4f1e8;border-radius:6px;padding:8px 8px 12px;box-shadow:0 10px 26px rgba(0,0,0,.5);color:#1a1a1a;position:relative}
.dcl-root.dcl-root .fp-tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);width:64px;height:18px;background:rgba(200,241,53,.55);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.dcl-root.dcl-root .fp-cap{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.25;color:#2a2a2a;text-align:center;margin-top:9px}
.dcl-root.dcl-root .fp-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:0 3px}
.dcl-root.dcl-root .fp-sub{text-align:center;font-size:10.5px;color:#6a6a6a;font-weight:600;margin-top:4px}
.dcl-root.dcl-root .fp-bchip{display:inline-flex;align-items:center;gap:5px;background:#e7e2d3;color:#5a5230;font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px}
.dcl-root.dcl-root .fp-bchip svg{width:11px;height:11px}
/* Bài CHỈ CHỮ (thông báo) */
.dcl-root.dcl-root .fp-note{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.5}
/* Ảnh: base + badge tổng số */
.dcl-root.dcl-root .fp-img{position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--img-a),var(--img-b));border-radius:3px}
.dcl-root.dcl-root .fp-img>svg{width:26px;height:26px;color:rgba(255,255,255,.12)}
.dcl-root.dcl-root .fp-badge{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.62);color:#fff;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:99px;backdrop-filter:blur(4px);display:flex;align-items:center;gap:4px}
.dcl-root.dcl-root .fp-badge svg{width:11px;height:11px}
/* Layout ảnh theo số lượng */
.dcl-root.dcl-root .fp-2{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.dcl-root.dcl-root .fp-2 .fp-img{height:96px}
.dcl-root.dcl-root .fp-3{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:3px;height:150px}
.dcl-root.dcl-root .fp-3 .fp-big{grid-row:1/3}
.dcl-root.dcl-root .fp-4{display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:5px;overflow-x:auto;scrollbar-width:none}
.dcl-root.dcl-root .fp-4::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .fp-4 .fp-img{height:120px}
/* Nút ghim (admin) → trang Kỷ niệm; .off = chưa ghim */
.dcl-root.dcl-root .fp-ghim{position:absolute;top:-9px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--gold-ink);font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;box-shadow:0 6px 16px rgba(232,195,106,.32)}
.dcl-root.dcl-root .fp-ghim.off{background:rgba(0,0,0,.55);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.22)}
.dcl-root.dcl-root .fp-ghim svg{width:12px;height:12px}
/* Kỷ niệm: polaroid BẢN LỚN (trang con — bài admin ghim) */
.dcl-root.dcl-root .fp.fp-mem{border-radius:7px;padding:11px 11px 16px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.dcl-root.dcl-root .fp-mem .fp-tape{width:78px;height:22px;top:-10px}
.dcl-root.dcl-root .fp-mem .fp-cap{font-size:18px;line-height:1.2;margin-top:12px}
.dcl-root.dcl-root .fp-mem .fp-badge{font-size:12px;padding:4px 11px;right:9px;bottom:9px}
/* Tint ảnh placeholder (CHỈ để demo/mockup — app dùng ảnh thật) */
.dcl-root.dcl-root .fp-img.fp-t1{background:linear-gradient(135deg,#24303a,#12181c)}
.dcl-root.dcl-root .fp-img.fp-t2{background:linear-gradient(135deg,#2e2436,#161018)}
.dcl-root.dcl-root .fp-img.fp-t3{background:linear-gradient(135deg,#123028,#0c1a15)}
.dcl-root.dcl-root .fp-img.fp-t4{background:linear-gradient(135deg,#302615,#18120a)}
.dcl-root.dcl-root .fp-img.fp-t5{background:linear-gradient(135deg,#2a1c1c,#160e0e)}

/* ===== THẺ TUYỂN THỦ · .pfcard (foil card tái sử dụng) =====
   Chốt 2026-07-18. Ruy băng + 2 vùng màu chéo + watermark hạng (bám phải) + viền phát sáng +
   avatar + eyebrow tier + tên (Playfair) + điểm + gạch gradient + stat-row. Màu qua --cc/--ci.
   Biến thể: mặc định = theme accent · .you (của bạn, accent) · .gold/.silver/.bronze = hạng 1/2/3.
   Cấu trúc: .pfcard > .pf-sheen .pf-band .pf-ribbon .pf-wm .pf-av
             .pf-rt( .pf-eyebrow .pf-name .pf-pts .pf-sep .pf-stats(.s>b+span) )
   Mini (bục/podium): .pfcard-mini[.gold/.silver/.bronze][.lead]. */
.dcl-root.dcl-root .pfcard{position:relative;overflow:hidden;border-radius:22px;min-height:210px;isolation:isolate;--cc:var(--accent);--ci:var(--accent-ink);
  background:radial-gradient(120% 80% at 82% -10%,color-mix(in srgb,var(--cc) 26%,transparent),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--cc) 10%,var(--surface-2)),var(--surface));
  border:2px solid var(--cc);box-shadow:0 0 24px color-mix(in srgb,var(--cc) 38%,transparent),0 12px 40px rgba(0,0,0,.35)}
.dcl-root.dcl-root .pf-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.06) 46%,transparent 58%);pointer-events:none;z-index:5}
.dcl-root.dcl-root .pf-band{position:absolute;inset:0;width:47%;z-index:1;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 32%,var(--surface-2)),color-mix(in srgb,var(--cc) 8%,var(--surface)));clip-path:polygon(0 0,100% 0,74% 100%,0 100%)}
.dcl-root.dcl-root .pf-wm{position:absolute;right:-2px;top:50%;transform:translateY(-50%);font-family:'Barlow Condensed';font-weight:700;font-size:200px;line-height:.8;letter-spacing:-.04em;pointer-events:none;z-index:2;color:color-mix(in srgb,var(--cc) 13%,transparent)}
.dcl-root.dcl-root .pf-av{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:100px;height:100px;border-radius:999px;overflow:hidden;z-index:3;box-shadow:0 0 0 3px var(--bg),0 6px 18px rgba(0,0,0,.5);background:radial-gradient(88% 72% at 50% 120%,#e7c9a8 0 42%,rgba(231,201,168,0) 60%),radial-gradient(33% 30% at 50% 34%,#f1dabf 0 72%,rgba(241,218,191,0) 76%),linear-gradient(158deg,#55738b,#3a4a5e 55%,#28323f)}
.dcl-root.dcl-root .pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.dcl-root.dcl-root .pf-ribbon{position:absolute;top:19px;left:-30px;width:150px;transform:rotate(-38deg);background:var(--cc);color:var(--ci);font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:4px 0;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:4}
.dcl-root.dcl-root .pf-rt{position:absolute;left:44%;right:0;top:0;bottom:0;padding:15px;display:flex;flex-direction:column;justify-content:center;z-index:4}
.dcl-root.dcl-root .pf-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;background:var(--cc);color:var(--ci);font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px 2px;border-radius:999px;margin-bottom:7px;box-shadow:0 0 12px color-mix(in srgb,var(--cc) 45%,transparent)}
.dcl-root.dcl-root .pf-name{font-family:'Playfair Display';font-style:italic;font-weight:600;line-height:1.02;font-size:24px;margin:0}
.dcl-root.dcl-root .pf-pts{font-family:'Barlow Condensed';font-weight:700;color:var(--cc);line-height:.88;font-size:42px;margin-top:7px}
.dcl-root.dcl-root .pf-pts em{font-style:normal;font-size:15px;opacity:.72}
.dcl-root.dcl-root .pf-sep{margin-top:12px;height:2px;flex:none;width:64%;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 65%,#fff),color-mix(in srgb,var(--cc) 35%,transparent) 58%,transparent);box-shadow:0 0 9px color-mix(in srgb,var(--cc) 50%,transparent)}
.dcl-root.dcl-root .pf-stats{display:flex;margin-top:10px;flex:none}
.dcl-root.dcl-root .pf-stats .s{flex:1;border-right:1px solid color-mix(in srgb,var(--cc) 26%,transparent);padding-right:8px}
.dcl-root.dcl-root .pf-stats .s+.s{padding-left:10px}.dcl-root.dcl-root .pf-stats .s:last-child{border:none}
.dcl-root.dcl-root .pf-stats b{font-family:'IBM Plex Mono';font-weight:700;font-size:13.5px;display:block;color:var(--cc)}
.dcl-root.dcl-root .pf-stats span{font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);opacity:.72}
/* biến thể màu — hạng càng cao càng premium (glow/foil mạnh dần) */
.dcl-root.dcl-root .pfcard.you{--cc:var(--accent)}
.dcl-root.dcl-root .pfcard.gold{--cc:#E7C24B;--ci:#1a1408;background:radial-gradient(125% 88% at 82% -12%,color-mix(in srgb,#E7C24B 44%,transparent),transparent 60%),linear-gradient(160deg,#2c2410,#100f0a);border-color:#E7C24B;box-shadow:0 0 36px color-mix(in srgb,#E7C24B 55%,transparent),0 18px 48px rgba(0,0,0,.55)}
.dcl-root.dcl-root .pfcard.silver{--cc:#CBD1D6;--ci:#181a1e;background:radial-gradient(122% 86% at 82% -12%,color-mix(in srgb,#CBD1D6 30%,transparent),transparent 62%),linear-gradient(160deg,#24272c,#0e0f12);border-color:color-mix(in srgb,#CBD1D6 82%,transparent);box-shadow:0 0 20px color-mix(in srgb,#CBD1D6 32%,transparent),0 14px 40px rgba(0,0,0,.45)}
.dcl-root.dcl-root .pfcard.bronze{--cc:#CD8B5B;--ci:#1c1109;background:radial-gradient(120% 84% at 82% -12%,color-mix(in srgb,#CD8B5B 25%,transparent),transparent 64%),linear-gradient(160deg,#241a12,#0f0b08);border-color:color-mix(in srgb,#CD8B5B 70%,transparent);box-shadow:0 0 12px color-mix(in srgb,#CD8B5B 20%,transparent),0 11px 34px rgba(0,0,0,.4)}
.dcl-root.dcl-root .pfcard.gold .pf-sheen{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.17) 46%,transparent 60%)}
.dcl-root.dcl-root .pfcard.gold .pf-av{box-shadow:0 0 0 3px var(--bg),0 0 24px color-mix(in srgb,#E7C24B 48%,transparent)}
.dcl-root.dcl-root .pfcard.gold .pf-ribbon{box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 16px color-mix(in srgb,#E7C24B 45%,transparent)}
/* mini (bục/podium) */
.dcl-root.dcl-root .pfcard-mini{position:relative;overflow:hidden;border-radius:16px;--cc:var(--accent);text-align:center;padding:14px 8px 13px;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 15%,var(--surface-2)),var(--surface));border:1.5px solid color-mix(in srgb,var(--cc) 40%,transparent)}
.dcl-root.dcl-root .pfcard-mini.gold{--cc:#E7C24B}.dcl-root.dcl-root .pfcard-mini.silver{--cc:#CBD1D6}.dcl-root.dcl-root .pfcard-mini.bronze{--cc:#CD8B5B}
.dcl-root.dcl-root .pfcard-mini.lead{padding-top:20px;border-color:var(--cc);box-shadow:0 0 22px color-mix(in srgb,var(--cc) 30%,transparent)}
.dcl-root.dcl-root .pfcard-mini .num{position:absolute;top:6px;right:8px;font-family:'Barlow Condensed';font-weight:700;font-size:44px;line-height:1;color:color-mix(in srgb,var(--cc) 16%,transparent)}
.dcl-root.dcl-root .pfcard-mini .av{width:50px;height:50px;border-radius:999px;margin:0 auto;position:relative;z-index:1;overflow:hidden;box-shadow:0 0 0 2px var(--bg);background:radial-gradient(88% 72% at 50% 120%,#e7c9a8 0 42%,rgba(231,201,168,0) 60%),radial-gradient(33% 30% at 50% 34%,#f1dabf 0 72%,rgba(241,218,191,0) 76%),linear-gradient(158deg,#55738b,#28323f)}
.dcl-root.dcl-root .pfcard-mini.lead .av{width:62px;height:62px;box-shadow:0 0 0 2px var(--cc),0 0 18px color-mix(in srgb,var(--cc) 40%,transparent)}
.dcl-root.dcl-root .pfcard-mini .rk{font-family:'Barlow Condensed';font-weight:700;font-size:11px;color:var(--cc);text-transform:uppercase;letter-spacing:.05em;margin-top:8px;position:relative;z-index:1}
.dcl-root.dcl-root .pfcard-mini .nm{font-family:'Playfair Display';font-style:italic;font-weight:600;font-size:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.dcl-root.dcl-root .pfcard-mini .pt{font-family:'Barlow Condensed';font-weight:700;font-size:19px;color:var(--cc);margin-top:3px;position:relative;z-index:1}
.dcl-root.dcl-root .pfcard-mini .pt em{font-style:normal;font-size:10px;opacity:.7}
.dcl-root.dcl-root .pfcard-mini .sub{font-size:10px;color:var(--text-3);margin-top:2px;position:relative;z-index:1}

/* ── Link text (BẮT BUỘC dùng chung) ───────────────────────────────────────
   Link chữ inline cho hành động phụ (vd "Lịch sử →" ở Sảnh, "Cách tính điểm" ở BXH).
   Icon kèm (nếu có) = SVG MONO theo currentColor (sprite #i-* hoặc inline), cỡ 1em.
   TUYỆT ĐỐI không dùng emoji màu (ℹ️/🔥…) trong link text — ký hiệu →/↗ text là được. */
.dcl-root.dcl-root .link-text{display:inline-flex;align-items:center;gap:5px;font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-size:13px;font-weight:600;line-height:1.2;color:var(--accent);background:none;border:0;padding:0;
  cursor:pointer;white-space:nowrap;text-decoration:none}
.dcl-root.dcl-root .link-text svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor}
.dcl-root.dcl-root .link-text:hover{opacity:.75}       /* KHÔNG gạch dưới khi hover — chỉ mờ nhẹ */
.dcl-root.dcl-root .link-text.sm{font-size:12px}
.dcl-root.dcl-root .link-text.muted{color:var(--text-2)}

/* ===== ĐẤU TRƯỜNG · màn BXH (Y1 "Vòng hào quang") =====
   Chốt 2026-07-20. Toàn bộ CSS scope dưới .dcl-arena để các class generic
   (.nm/.av/.st/.wm/.pv/.ring…) KHÔNG rò ra design-system chung / màn dcl khác.
   2 tab: Điểm CLB (.rings/.tik) + Lực chiến (namespace lc*). Popup member = .msb-ov
   (dùng .sheetov bottom-sheet). Xem docs/design/refine/dau-truong/ss1-y1.html. */
.dcl-root.dcl-root .dcl-arena{padding-bottom:26px}
.dcl-root.dcl-root .dcl-arena .seg{margin:2px 16px 12px}
.dcl-root.dcl-root .dcl-arena .slblrow{display:flex;align-items:center;justify-content:space-between;margin:2px 16px 10px;gap:10px}
.dcl-root.dcl-root .dcl-arena .slbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .dz{font-family:'Barlow Condensed';font-weight:700;font-size:11px;padding:0 4px;border-radius:5px}
.dcl-root.dcl-root .dcl-arena .dz.up{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.dcl-root.dcl-root .dcl-arena .dz.dn{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.dcl-root.dcl-root .dcl-arena .dz.eq{color:var(--text-3)}

/* — Vòng hào quang (podium top-3, tab Điểm CLB) — */
.dcl-root.dcl-root .dcl-arena .rings{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:18px 16px 6px}
.dcl-root.dcl-root .dcl-arena .rcol{text-align:center;flex:1;max-width:128px}
.dcl-root.dcl-root .dcl-arena .ring{--p:70;--mc:#CBD1D6;position:relative;margin:0 auto;border-radius:50%;background:conic-gradient(var(--mc) calc(var(--p)*1%),color-mix(in srgb,var(--mc) 13%,var(--surface-2)) 0);box-shadow:0 0 22px color-mix(in srgb,var(--mc) 22%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .ring:before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
.dcl-root.dcl-root .dcl-arena .ring .in{position:absolute;inset:6px;border-radius:50%;display:grid;place-items:center}
.dcl-root.dcl-root .dcl-arena .ring .avc{border-radius:50%;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);border:1px solid color-mix(in srgb,var(--mc) 55%,transparent)}
.dcl-root.dcl-root .dcl-arena .rcol.g .ring{--mc:#E7C24B;width:118px;height:118px}
.dcl-root.dcl-root .dcl-arena .rcol.s .ring{--mc:#CBD1D6;width:88px;height:88px}
.dcl-root.dcl-root .dcl-arena .rcol.b .ring{--mc:#CD8B5B;width:88px;height:88px}
.dcl-root.dcl-root .dcl-arena .rcol.g .avc{width:74px;height:74px}
.dcl-root.dcl-root .dcl-arena .rcol.s .avc,.dcl-root.dcl-root .dcl-arena .rcol.b .avc{width:52px;height:52px}
.dcl-root.dcl-root .dcl-arena .ring .pct{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-family:'Barlow Condensed';font-size:12px;font-weight:700;background:var(--mc);border:2px solid var(--surface);color:#141312;border-radius:999px;min-width:22px;text-align:center;padding:2px 6px;white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .ring .rno{position:absolute;top:-4px;right:-4px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mc);color:#141312;font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;border:2px solid var(--surface)}
.dcl-root.dcl-root .dcl-arena .rcol .rnm,.dcl-root.dcl-root .dcl-arena .lccol .rnm{font-weight:700;font-size:13.5px;margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .rcol.g .rnm,.dcl-root.dcl-root .dcl-arena .lccol.lcg .rnm{font-size:15px}
.dcl-root.dcl-root .dcl-arena .rcol .rv,.dcl-root.dcl-root .dcl-arena .lccol .rv{font-family:'Barlow Condensed';font-weight:700;font-size:21px;color:var(--text)}
.dcl-root.dcl-root .dcl-arena .rcol.g .rv,.dcl-root.dcl-root .dcl-arena .lccol.lcg .rv{font-size:26px;color:#E7C24B}
.dcl-root.dcl-root .dcl-arena .rcol .rv em,.dcl-root.dcl-root .dcl-arena .lccol .rv em{font-style:normal;font-size:11px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .rcol .rbn,.dcl-root.dcl-root .dcl-arena .lccol .rbn{display:inline-block;margin-top:10px;font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#141312;background:var(--bc,#CBD1D6);padding:3px 15px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%,7px 50%)}
.dcl-root.dcl-root .dcl-arena .rcol.g .rbn,.dcl-root.dcl-root .dcl-arena .lccol.lcg .rbn{--bc:#E7C24B}.dcl-root.dcl-root .dcl-arena .rcol.s .rbn,.dcl-root.dcl-root .dcl-arena .lccol.lcs .rbn{--bc:#CBD1D6}.dcl-root.dcl-root .dcl-arena .rcol.b .rbn,.dcl-root.dcl-root .dcl-arena .lccol.lcb .rbn{--bc:#CD8B5B}
.dcl-root.dcl-root .dcl-arena .rcol .rbn+.rnm,.dcl-root.dcl-root .dcl-arena .lccol .rbn+.rnm{margin-top:4px}
/* .rsb — T–B + chuỗi thắng dưới điểm của podium top-1·2·3 (chốt 2026-08-18).
   Trước đó số liệu này chỉ nằm trong data-sb để popup đọc, nhìn màn không thấy.
   Cùng chữ với .sb/.lcsb của hàng 4→9; chip 🔥 chỉ vẽ khi đang có chuỗi. */
.dcl-root.dcl-root .dcl-arena .rsb{font-family:'IBM Plex Mono';font-size:10px;line-height:1.2;color:var(--text-3);margin-top:3px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .rsb .w{color:var(--accent)}
.dcl-root.dcl-root .dcl-arena .rsb .l{color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .rsb .stk{margin-left:6px;padding:0 5px;border-radius:999px;font-weight:700;color:var(--warning);background:color-mix(in srgb,var(--warning) 16%,transparent)}
/* Avatar thật trong vòng hào quang top-1·2·3 (chốt 2026-08-18): ô .avc/.lcavc nhận thêm
   class .avatar + data-avatar nên phải ghi đè nền giả (radial-gradient vàng) của chính nó.
   Selector phải đủ .ring/.lcring để cùng đọ đặc hiệu với rule nền gốc — không phụ thuộc
   thứ tự dòng (rule nền của .lcavc nằm dưới khối này, thiếu .lcring là nó thắng lại).
   Khung vẫn do .avc/.lcavc quyết định — 74px cho hạng 1, 52px cho hạng 2·3, bo tròn 50%. */
.dcl-root.dcl-root .dcl-arena .ring .avc[data-avatar],.dcl-root.dcl-root .dcl-arena .lcring .lcavc[data-avatar]{background:none;overflow:hidden}
.dcl-root.dcl-root .dcl-arena .ring .avc[data-avatar="figure"],.dcl-root.dcl-root .dcl-arena .lcring .lcavc[data-avatar="figure"]{background:#E9E3D3}
.dcl-root.dcl-root .dcl-arena .ring .avc[data-avatar="initials"],.dcl-root.dcl-root .dcl-arena .lcring .lcavc[data-avatar="initials"]{background:linear-gradient(145deg,var(--img-a),var(--img-b))}

/* — Vé đấu (hạng 4→9, tab Điểm CLB) — */
.dcl-root.dcl-root .dcl-arena .ringlist{padding:4px 16px 8px}
.dcl-root.dcl-root .dcl-arena .tik{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin:7px 0;padding:9px 0 9px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.dcl-root.dcl-root .dcl-arena .tik.you{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}
.dcl-root.dcl-root .dcl-arena .tik .wm{position:absolute;right:84px;top:50%;transform:translateY(-48%);font-family:'Barlow Condensed';font-weight:700;font-size:42px;line-height:1;color:color-mix(in srgb,var(--text-3) 15%,transparent);pointer-events:none}
.dcl-root.dcl-root .dcl-arena .tik .dn2{--p:50;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),color-mix(in srgb,var(--accent) 14%,transparent) 0)}
.dcl-root.dcl-root .dcl-arena .tik .dn2 i{width:26px;height:26px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-style:normal;font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;color:var(--text-2)}
.dcl-root.dcl-root .dcl-arena .tik .mnl{flex:1;min-width:0;position:relative;z-index:1}
.dcl-root.dcl-root .dcl-arena .tik .mnl .nm{font-family:'Be Vietnam Pro',sans-serif;font-style:normal;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .tik .mnl .sb{font-size:10.5px;color:var(--text-3);font-family:'IBM Plex Mono';margin-top:2px}
.dcl-root.dcl-root .dcl-arena .tik .mnl .sb .w{color:var(--success)}.dcl-root.dcl-root .dcl-arena .tik .mnl .sb .l{color:var(--danger)}
.dcl-root.dcl-root .dcl-arena .tik .pv{flex:none;width:76px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-left:1px dashed color-mix(in srgb,var(--text-3) 40%,transparent)}
.dcl-root.dcl-root .dcl-arena .tik .pv:before,.dcl-root.dcl-root .dcl-arena .tik .pv:after{content:'';position:absolute;left:-6px;width:11px;height:11px;border-radius:50%;background:var(--bg)}
.dcl-root.dcl-root .dcl-arena .tik .pv:before{top:-6px}.dcl-root.dcl-root .dcl-arena .tik .pv:after{bottom:-6px}
.dcl-root.dcl-root .dcl-arena .tik .pv b{font-family:'Barlow Condensed';font-weight:700;font-size:19px;color:var(--text)}
.dcl-root.dcl-root .dcl-arena .tik .pv b em{font-style:normal;font-size:10px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .tik .pv .dz{margin-top:1px}
/* .wrfill — TỈ LỆ THẮNG ĐỔ VÀO CHÍNH CON SỐ ĐIỂM (chốt 2026-08-18, mẫu 2a).
   Thay cho vạch 3px cạnh dưới card của bản D3. Chữ số chia làm ba tầng từ đáy lên:
     1. phần ĐÃ đổ   — var(--text), đúng màu số điểm vốn có
     2. MẶT MỰC     — vạch cứng 2px màu --wrc, chính nó báo mức
     3. phần CHƯA đổ — chữ bóng --text-2 42% đục
   VÍ SAO PHẢI THẾ: nếu để phần đã đổ mang luôn màu accent thì ranh giới chỉ còn là
   khác biệt MÀU. Trên sunset-rally (accent cam #F25C3B) và ivory-club (accent xanh rêu)
   accent · danger · --text-2 nằm cùng một dải độ sáng — mức mực biến mất sạch, số đọc
   ra một khối phẳng. Để var(--text) ở dưới thì ranh giới là độ SÁNG, sống được ở cả 5 theme.
   Hai biến đặt inline ở từng hàng:
     --wr  = tỉ lệ thắng, có SÀN 20% (dưới ngưỡng đó mặt mực dính đáy chữ, không còn đọc ra)
     --wrc = màu mặt mực: var(--accent) từ 50% trở lên, var(--danger) khi dưới 50%.
             KHÔNG color-mix hai màu — trên ivory-club trộn ra màu bùn #595743.
   Chữ đ/elo (em) có màu riêng nên KHÔNG bị đổ theo — phải đặt cả -webkit-text-fill-color.
   Số % vẫn nằm đầu dòng phụ (.sb), trước T–B. */
.dcl-root.dcl-root .dcl-arena .wrfill{background-image:linear-gradient(0deg,var(--text) 0 calc(var(--wr,50%) - 2px),var(--wrc,var(--accent)) calc(var(--wr,50%) - 2px) var(--wr,50%),color-mix(in srgb,var(--text-2) 42%,transparent) var(--wr,50%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dcl-root.dcl-root .dcl-arena .wrfill em{color:var(--text-3);-webkit-text-fill-color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .tik .pv .wrfill{font-size:24px;line-height:1.05}
.dcl-root.dcl-root .dcl-arena .tik .pv .wrfill em{font-size:11px}

/* ghim chiều cao hàng list = nhau ở cả 2 tab → chuyển tab không giật */
.dcl-root.dcl-root .dcl-arena .tik,.dcl-root.dcl-root .dcl-arena .lctik{min-height:70px;box-sizing:border-box}

/* — LỰC CHIẾN (namespace lc*, tách khỏi CLB) — */
.dcl-root.dcl-root .dcl-arena .lcrings{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:18px 16px 6px}
.dcl-root.dcl-root .dcl-arena .lccol{text-align:center;flex:1;max-width:128px;--mc:#CBD1D6}
.dcl-root.dcl-root .dcl-arena .lcring{--p:70;position:relative;margin:0 auto;border-radius:50%;background:conic-gradient(var(--mc) calc(var(--p)*1%),color-mix(in srgb,var(--mc) 13%,var(--surface-2)) 0);box-shadow:0 0 22px color-mix(in srgb,var(--mc) 22%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .lcring:before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
.dcl-root.dcl-root .dcl-arena .lcring .lcin{position:absolute;inset:6px;border-radius:50%;display:grid;place-items:center}
.dcl-root.dcl-root .dcl-arena .lcring .lcavc{border-radius:50%;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);border:1px solid color-mix(in srgb,var(--mc) 55%,transparent)}
.dcl-root.dcl-root .dcl-arena .lccol.lcg .lcring{width:118px;height:118px}
.dcl-root.dcl-root .dcl-arena .lccol.lcs .lcring,.dcl-root.dcl-root .dcl-arena .lccol.lcb .lcring{width:88px;height:88px}
.dcl-root.dcl-root .dcl-arena .lccol.lcg .lcavc{width:74px;height:74px}.dcl-root.dcl-root .dcl-arena .lccol.lcs .lcavc,.dcl-root.dcl-root .dcl-arena .lccol.lcb .lcavc{width:52px;height:52px}
.dcl-root.dcl-root .dcl-arena .lcring .lcrno{position:absolute;top:-4px;right:-4px;z-index:4;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mc);color:#141312;font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;border:2px solid var(--surface)}
.dcl-root.dcl-root .dcl-arena .lcring .lcpct{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);z-index:4;font-family:'Barlow Condensed';font-size:12px;font-weight:700;background:var(--mc);border:2px solid var(--surface);color:#141312;border-radius:999px;min-width:22px;text-align:center;padding:2px 6px;white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .lccol .lcrbn{display:inline-block;margin-top:10px;font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#141312;background:var(--mc);padding:3px 15px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%,7px 50%)}
.dcl-root.dcl-root .dcl-arena .lccol .lcrbn .gem{font-size:8px;margin-right:2px}
.dcl-root.dcl-root .dcl-arena .lccol .lcrnm{font-weight:700;font-size:13.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .lccol.lcg .lcrnm{font-size:15px}
.dcl-root.dcl-root .dcl-arena .lccol .lcrv{font-family:'Barlow Condensed';font-weight:700;font-size:21px;color:var(--text)}
.dcl-root.dcl-root .dcl-arena .lccol.lcg .lcrv{font-size:26px;color:var(--mc)}
.dcl-root.dcl-root .dcl-arena .lccol .lcrv em{font-style:normal;font-size:10px;color:var(--text-3);font-family:'Be Vietnam Pro'}
.dcl-root.dcl-root .dcl-arena .lclist{padding:4px 16px 8px}
.dcl-root.dcl-root .dcl-arena .lctik{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin:7px 0;padding:9px 0 9px 12px;--mc:#CBD1D6;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.dcl-root.dcl-root .dcl-arena .lctik.you{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}
.dcl-root.dcl-root .dcl-arena .lctik .lcwm{position:absolute;right:84px;top:50%;transform:translateY(-48%);font-family:'Barlow Condensed';font-weight:700;font-size:42px;line-height:1;color:color-mix(in srgb,var(--text-3) 15%,transparent);pointer-events:none}
.dcl-root.dcl-root .dcl-arena .lctik .lcdn2{--p:50;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mc) calc(var(--p)*1%),color-mix(in srgb,var(--mc) 14%,transparent) 0)}
.dcl-root.dcl-root .dcl-arena .lctik .lcdn2 i{width:26px;height:26px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-style:normal;font-family:'Barlow Condensed';font-weight:700;font-size:10px;color:var(--text-2)}
.dcl-root.dcl-root .dcl-arena .lctik .lcmnl{flex:1;min-width:0;position:relative;z-index:1}
.dcl-root.dcl-root .dcl-arena .lctik .lcrn{display:flex;align-items:center;gap:7px}
.dcl-root.dcl-root .dcl-arena .lctik .lcnm{font-family:'Be Vietnam Pro',sans-serif;font-style:normal;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .lctik .lctchip{flex:none;font-family:'Barlow Condensed';font-weight:700;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--mc) 16%,transparent);color:var(--mc)}
.dcl-root.dcl-root .dcl-arena .lctik .lcsb{font-family:'IBM Plex Mono';font-size:10px;line-height:1.25;color:var(--text-3);margin-top:1px;white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .lctik .lcsb .w{color:var(--success)}.dcl-root.dcl-root .dcl-arena .lctik .lcsb .l{color:var(--danger)}
.dcl-root.dcl-root .dcl-arena .lctik .lcpbar{height:3px;border-radius:2px;background:var(--surface-2);margin-top:3px;max-width:132px;overflow:hidden}
.dcl-root.dcl-root .dcl-arena .lctik .lcpbar i{display:block;height:100%;width:var(--w);border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 55%,transparent),var(--mc))}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv{flex:none;width:76px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-left:1px dashed color-mix(in srgb,var(--text-3) 40%,transparent)}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv:before,.dcl-root.dcl-root .dcl-arena .lctik .lcpv:after{content:'';position:absolute;left:-6px;width:11px;height:11px;border-radius:50%;background:var(--bg)}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv:before{top:-6px}.dcl-root.dcl-root .dcl-arena .lctik .lcpv:after{bottom:-6px}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv b{font-family:'Barlow Condensed';font-weight:700;font-size:19px;color:var(--text);white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv b em{font-style:normal;font-size:9px;color:var(--text-3);font-family:'Be Vietnam Pro'}
.dcl-root.dcl-root .dcl-arena .lctik .lcpv .dz{margin-top:2px}
@keyframes lctw{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
/* Màu hạng lực chiến — token dùng chung, KHÔNG viết lại mã màu ở chỗ khác
   (chip list, badge podium, popup chặng lên hạng, thang hạng trong popup cách tính). */
.dcl-root.dcl-root{--t-kc:#5B9DF0;--t-bkim:#4FE0CB;--t-vang:#EEC23A;--t-bac:#B9C2CA;--t-dong:#C57B3E;--t-tanbinh:#6B7480}
.dcl-root.dcl-root .dcl-arena .lccol.t-kc,.dcl-root.dcl-root .dcl-arena .lctik.t-kc{--mc:var(--t-kc)}.dcl-root.dcl-root .dcl-arena .lccol.t-bkim,.dcl-root.dcl-root .dcl-arena .lctik.t-bkim{--mc:var(--t-bkim)}.dcl-root.dcl-root .dcl-arena .lccol.t-vang,.dcl-root.dcl-root .dcl-arena .lctik.t-vang{--mc:var(--t-vang)}
.dcl-root.dcl-root .dcl-arena .lccol.t-bac,.dcl-root.dcl-root .dcl-arena .lctik.t-bac{--mc:var(--t-bac)}.dcl-root.dcl-root .dcl-arena .lccol.t-dong,.dcl-root.dcl-root .dcl-arena .lctik.t-dong{--mc:var(--t-dong)}.dcl-root.dcl-root .dcl-arena .lccol.t-tanbinh,.dcl-root.dcl-root .dcl-arena .lctik.t-tanbinh{--mc:var(--t-tanbinh)}
.dcl-root.dcl-root .dcl-arena .lccol.t-bac .lcring{box-shadow:0 0 12px color-mix(in srgb,#B9C2CA 48%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .lccol.t-vang .lcring{box-shadow:0 0 18px color-mix(in srgb,#EEC23A 48%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .lccol.t-bkim .lcring{box-shadow:0 0 24px color-mix(in srgb,#4FE0CB 48%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .lccol.t-bkim .lcring:before{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,#5EEAD4 60%,transparent)}
.dcl-root.dcl-root .dcl-arena .lccol.t-kc .lcring{box-shadow:0 0 32px color-mix(in srgb,#5B9DF0 48%,transparent),0 10px 24px rgba(0,0,0,.4)}
.dcl-root.dcl-root .dcl-arena .lccol.t-kc .lcring:before{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,#B98CFF 60%,transparent)}
.dcl-root.dcl-root .dcl-arena .lccol.t-kc .lcring:after{content:"\2726";position:absolute;z-index:3;top:-2px;left:0;font-size:14px;color:#DCE9FF;text-shadow:0 0 9px #8FC0FF;animation:lctw 1.8s ease-in-out infinite}
.dcl-root.dcl-root .dcl-arena .lctik.t-bkim .lcdn2{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px color-mix(in srgb,#5EEAD4 55%,transparent)}
.dcl-root.dcl-root .dcl-arena .lctik.t-kc .lcdn2{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px color-mix(in srgb,#B98CFF 55%,transparent)}
.dcl-root.dcl-root .dcl-arena .lctik.t-tanbinh .lcdn2{background:none;border:1.5px dashed color-mix(in srgb,#6B7480 60%,transparent)}
.dcl-root.dcl-root .dcl-arena .lctik.t-tanbinh .lcdn2 i{color:var(--text-3)}
.dcl-root.dcl-root .dcl-arena .lctik.t-tanbinh .lctchip{color:var(--text-3);background:var(--surface-2)}
.dcl-root.dcl-root .dcl-arena .lccol.t-kc .lcrbn{background:linear-gradient(135deg,#A7CBFF,#5B9DF0 55%,#9B7BF0);color:#0b1220}
.dcl-root.dcl-root .dcl-arena .lccol.t-bkim .lcrbn{background:linear-gradient(135deg,#8FF6E6,#2FC7B4)}
.dcl-root.dcl-root .dcl-arena .lccol.t-vang .lcrbn{background:linear-gradient(135deg,#F4D96B,#D9A82F)}
.dcl-root.dcl-root .dcl-arena .lccol.t-bac .lcrbn{background:linear-gradient(135deg,#E3E8EC,#9AA4AC)}

/* Popup member dùng bottom-sheet chuẩn DS (.sheetov + .sheet, mở = class .on),
   chỉ giới hạn trong khung máy thay vì viewport.
   (2026-08-15) Bộ từ vựng CŨ .msb/.mhead/.mav/.rankpill/.tierpill/.mbig/.stats/.prog/.sec/.brow/
   .summ/.ntb đã XOÁ — chỉ còn MỘT bản: .sheetov.msb-ov > .sheet + data-msb + .snaprow/.tierprog/
   .spec-row/.duo. Khối nội dung trong bottom-sheet KHÔNG tự khai max-height %; chiều cao do
   .sheet quyết (DESIGN.md §11.4). */
/* (2026-08-17) Popup của Đấu trường KHÔNG tự ép position:absolute nữa: ở app thật nó phải là
   .sheetov mặc định (position:fixed) để trượt từ ĐÁY VIEWPORT; absolute + tổ tiên static làm
   sheet neo theo cả trang và tràn ra ngoài màn hình. Trong doc/khung máy thì mới thu về .phone. */
.dcl-root.dcl-root .phone .dcl-arena .sheetov{position:absolute;z-index:130}

/* — Popup "Cách tính điểm" (.srow/.mnote) — */
.dcl-root.dcl-root .dcl-arena .rcol,.dcl-root.dcl-root .dcl-arena .tik,.dcl-root.dcl-root .dcl-arena .lccol,.dcl-root.dcl-root .dcl-arena .lctik{cursor:pointer}
.dcl-root.dcl-root .dcl-arena .srow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.dcl-root.dcl-root .dcl-arena .srow:last-of-type{border:none}.dcl-root.dcl-root .dcl-arena .srow b{color:var(--accent);font-family:'IBM Plex Mono';white-space:nowrap}
/* TAB "HUY HIỆU" CHƯA MỞ (chốt 2026-08-27) — chip mờ + nhãn "sắp mở" nhỏ, KHÔNG điều
   hướng được: bấm ra toast .warn. Cứ để trông thấy để gây tò mò, không ẩn. */
.dcl-root.dcl-root .dcl-arena .seg .chip.soon{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* chốt chặn: chip này không bao giờ được vào trạng thái active (nền lime nuốt mất nhãn) */
/* TUYỆT ĐỐI KHÔNG ĐỔI GÌ khi tương tác (chốt 2026-08-27): khóa cứng mọi trạng thái
   (hover/focus/active/aria-disabled) về cùng một bộ màu — bấm chỉ ra toast. */
.dcl-root.dcl-root .dcl-arena .seg .chip.soon,.dcl-root.dcl-root .dcl-arena .seg .chip.soon.active,.dcl-root.dcl-root .dcl-arena .seg .chip.soon:hover,.dcl-root.dcl-root .dcl-arena .seg .chip.soon:focus,.dcl-root.dcl-root .dcl-arena .seg .chip.soon:focus-visible,.dcl-root.dcl-root .dcl-arena .seg .chip.soon:active{
  background:var(--surface-2)!important;color:var(--text-3)!important;border-color:transparent!important;
  box-shadow:none!important;outline:none!important;transform:none!important}
.dcl-root.dcl-root .dcl-arena .seg .chip.soon .soon-b{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 5px;border-radius:5px;
  color:var(--accent);background:var(--accent-soft);white-space:nowrap}
.dcl-root.dcl-root .dcl-arena .mnote{font-size:11.5px;color:var(--text-3);margin-top:10px;line-height:1.5}

/* ---------- Appbar · lối vào Lịch sử (thay ô vuông icon trơ) ---------- */
.dcl-root.dcl-root .hist-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;border-radius:50%;background:none;border:1px solid var(--border);
  color:var(--text-3);cursor:pointer;flex:none;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.dcl-root.dcl-root .hist-btn svg{width:16px;height:16px;display:block}
.dcl-root.dcl-root .hist-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}


/* ============================================================
   POPUP LUẬT ĐIỂM (.spop) — dùng chung cho 2 nơi:
   · member: "Cách tính điểm" (đọc) — mở từ .link-text trong Đấu trường
   · admin : "Thiết lập điểm CLB" (sửa) — mở từ icon gear trên appbar
   2 tab: Điểm CLB (CLB tự đặt luật) + Lực chiến (hệ thống, KHÔNG ai sửa được).
   Class scope hết dưới .spop để không rò ra DS chung.
   ============================================================ */
.dcl-root.dcl-root .spopov{position:absolute;z-index:132}
.dcl-root.dcl-root .spop{max-height:90%;overflow-y:auto;overscroll-behavior:contain}  /* ẩn thanh cuộn: rule global .sheet trong styles.css */
.dcl-root.dcl-root .spop .sp-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.dcl-root.dcl-root .spop .sp-eyebrow{font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.dcl-root.dcl-root .spop .sp-title{font-family:'Barlow Condensed';font-weight:700;font-size:27px;line-height:1;text-transform:uppercase;margin-top:4px}
.dcl-root.dcl-root .spop .sp-title em{font-style:normal;color:var(--accent)}
.dcl-root.dcl-root .spop .seg{margin-bottom:14px}
.dcl-root.dcl-root .spop .sp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.dcl-root.dcl-root .spop .sp-tag{white-space:nowrap;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.04em;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px}
.dcl-root.dcl-root .spop .sp-lbl{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 2px 7px}
.dcl-root.dcl-root .spop .sp-lbl:after{content:'';flex:1;height:1px;background:var(--border)}
.dcl-root.dcl-root .spop .sp-grp{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:2px 14px;margin-bottom:16px}
.dcl-root.dcl-root .spop .sp-r{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;min-height:44px;box-sizing:border-box}
.dcl-root.dcl-root .spop .sp-r:last-child{border:none}
.dcl-root.dcl-root .spop .sp-r.off{opacity:.42}
.dcl-root.dcl-root .spop .sp-r .t{flex:1;min-width:0}
.dcl-root.dcl-root .spop .sp-r .t small{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px}
.dcl-root.dcl-root .spop .sp-ico{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);font-size:13px}
.dcl-root.dcl-root .spop .sp-ord{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:'Barlow Condensed';font-weight:700;font-size:12px}
.dcl-root.dcl-root .spop .sp-v{font-family:'IBM Plex Mono';font-weight:700;font-size:13px;color:var(--accent);white-space:nowrap}
.dcl-root.dcl-root .spop .sp-v.neg{color:var(--danger)}
.dcl-root.dcl-root .spop .sp-v.zero{color:var(--text-3)}
.dcl-root.dcl-root .spop .sp-ctrl{display:flex;align-items:center;gap:10px}
/* input[type=date] trong .spop: chữ căn phải nên dính sát icon lịch native → đẩy icon ra
   bằng margin-left của chính nó (padding-right của input đẩy CẢ chữ lẫn icon, vô ích). */
.dcl-root.dcl-root .spop input[type=date]::-webkit-calendar-picker-indicator{margin-left:10px;opacity:.62;cursor:pointer}
/* Validation mốc mùa (popup .sd-ov, chỉ admin) — 2 mức:
   .sd-msg.err  = đụng mùa đã chốt / mốc ngược → CHẶN lưu
   .sd-msg.warn = tràn sang mùa sau → cho lưu, nhưng nói rõ hệ quả (dời khai mạc mùa sau) */
/* .sd-fence — dòng thời gian dọc 3 hàng: mùa trước · mùa này · mùa sắp tới. Mỗi mùa MỘT
   hàng (user chốt 2026-08-28), hàng bị đụng mốc thì .hit đổi đỏ. */
.dcl-root.dcl-root .sd-fence{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;
  background:var(--surface-2);padding:2px 14px;margin-bottom:16px}
.dcl-root.dcl-root .sd-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.dcl-root.dcl-root .sd-row:last-child{border-bottom:none}
.dcl-root.dcl-root .sd-row .k{flex:none;width:54px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dcl-root.dcl-root .sd-row .n{flex:1;min-width:0;font-weight:600;color:var(--text-2)}
.dcl-root.dcl-root .sd-row .n small{display:block;font-size:10px;font-weight:500;color:var(--text-3);margin-top:1px}
.dcl-root.dcl-root .sd-row .d{flex:none;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--text-3)}
.dcl-root.dcl-root .sd-row.cur .n{color:var(--text)}
.dcl-root.dcl-root .sd-row.cur .k,.dcl-root.dcl-root .sd-row.cur .d{color:var(--accent)}
.dcl-root.dcl-root .sd-row.hit .k,.dcl-root.dcl-root .sd-row.hit .n,.dcl-root.dcl-root .sd-row.hit .n small,.dcl-root.dcl-root .sd-row.hit .d{color:var(--danger)}
/* .soft = mùa SẮP TỚI bị ảnh hưởng: vàng, không phải lỗi (mùa đó chưa chốt sổ nên vẫn
   dời được). Đỏ chỉ dành cho mùa đã chốt sổ. */
.dcl-root.dcl-root .sd-row.soft .k,.dcl-root.dcl-root .sd-row.soft .n,.dcl-root.dcl-root .sd-row.soft .n small,.dcl-root.dcl-root .sd-row.soft .d{color:var(--warning)}
.dcl-root.dcl-root .sd-msg{display:flex;gap:9px;align-items:flex-start;border-radius:14px;padding:10px 12px;margin:-4px 0 14px;
  font-size:11.5px;line-height:1.5}
/* display:flex ở trên thắng rule UA [hidden]{display:none} → phải tự khai báo, không thì ô
   báo rỗng vẫn chiếm ~64px khoảng trắng ở trạng thái mốc sạch. */
.dcl-root.dcl-root .sd-msg[hidden]{display:none}
.dcl-root.dcl-root .sd-msg .ic{width:17px;height:17px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;margin-top:1px}
.dcl-root.dcl-root .sd-msg.err{background:color-mix(in srgb,var(--danger) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}
.dcl-root.dcl-root .sd-msg.err .ic{background:var(--danger)}
.dcl-root.dcl-root .sd-msg.warn{background:color-mix(in srgb,var(--warning) 12%,transparent);border:1px solid color-mix(in srgb,var(--warning) 40%,transparent);color:var(--warning)}
.dcl-root.dcl-root .sd-msg.warn .ic{background:var(--warning)}
.dcl-root.dcl-root .sd-msg b{color:inherit}
.dcl-root.dcl-root .sd-ov .input.error{border-color:var(--danger)}
.dcl-root.dcl-root .sd-ov .input.warn{border-color:var(--warning)}
.dcl-root.dcl-root .spop input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* ví dụ cộng điểm — băng giấy nhỏ, đọc như một phép tính */
.dcl-root.dcl-root .spop .sp-eg{border:1px dashed var(--border-strong);border-radius:14px;padding:11px 13px;margin:-4px 0 16px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.dcl-root.dcl-root .spop .sp-eg .egt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:5px}
.dcl-root.dcl-root .spop .sp-eg .egcalc{display:flex;align-items:stretch;gap:4px}
.dcl-root.dcl-root .spop .sp-eg .egi{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;border-radius:11px;background:var(--surface);border:1px solid var(--border)}
.dcl-root.dcl-root .spop .sp-eg .egi .v{font-family:'Barlow Condensed';font-weight:700;font-size:19px;line-height:1;color:var(--text)}
.dcl-root.dcl-root .spop .sp-eg .egi .k{font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.dcl-root.dcl-root .spop .sp-eg .egi.tot{flex:1.2;background:var(--accent);border-color:var(--accent)}
.dcl-root.dcl-root .spop .sp-eg .egi.tot .v{font-size:24px;color:var(--accent-ink)}
.dcl-root.dcl-root .spop .sp-eg .egi.tot .k{color:var(--accent-ink);opacity:.72}
.dcl-root.dcl-root .spop .sp-eg .op{align-self:center;flex:none;font-family:'Barlow Condensed';font-weight:700;font-size:14px;color:var(--text-3)}
/* banner "hệ thống tự tính" cho tab Lực chiến */
.dcl-root.dcl-root .spop .sp-lock{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--border-strong);border-radius:16px;padding:12px 14px;margin-bottom:16px;background:var(--surface-2)}
.dcl-root.dcl-root .spop .sp-lock svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--text-2);fill:none;stroke:currentColor}
.dcl-root.dcl-root .spop .sp-lock b{display:block;font-size:13px;margin-bottom:2px}
.dcl-root.dcl-root .spop .sp-lock span{font-size:11.5px;color:var(--text-3);line-height:1.5}
/* công thức ELO */
.dcl-root.dcl-root .spop .sp-fx{border-radius:14px;padding:14px;margin-bottom:16px;text-align:center;background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border:1px solid var(--border-strong)}
.dcl-root.dcl-root .spop .sp-fx b{display:block;font-family:'IBM Plex Mono';font-weight:700;font-size:14px;color:var(--text);letter-spacing:.01em}
.dcl-root.dcl-root .spop .sp-fx b i{font-style:normal;color:var(--accent)}
.dcl-root.dcl-root .spop .sp-fx span{display:block;font-size:11px;color:var(--text-3);line-height:1.6;margin-top:7px}
/* thang tier lực chiến */
.dcl-root.dcl-root .spop .sp-tiers{display:grid;gap:6px;margin-bottom:16px}
.dcl-root.dcl-root .spop .sp-tr{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:8px 11px}
.dcl-root.dcl-root .spop .sp-tr .dot{width:10px;height:10px;flex:none;border-radius:3px;background:var(--tc,#CBD1D6);transform:rotate(45deg)}
.dcl-root.dcl-root .spop .sp-tr .tn{flex:1;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--tc,var(--text))}
.dcl-root.dcl-root .spop .sp-tr .tv{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--text-3);white-space:nowrap}
.dcl-root.dcl-root .spop .sp-cta{display:flex;gap:8px;margin-top:4px}
.dcl-root.dcl-root .spop .sp-cta .btn{flex:1}


/* ============================================================
   MÙA GIẢI (.dcl-season) — kho lịch sử mùa, vào từ icon 🏆 trên appbar Đấu trường.
   Chung cho member & admin. 3 khối: mùa đang chạy (vòng tiến độ, cùng ngôn ngữ
   "vòng hào quang" của Đấu trường) → bảng vàng (đếm cúp) → dòng thời gian mùa cũ.
   Class scope hết dưới .dcl-season.
   ============================================================ */
.dcl-root.dcl-root .dcl-season{padding-bottom:28px}
.dcl-root.dcl-root .dcl-season .slbl{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 16px 9px}
.dcl-root.dcl-root .dcl-season .slbl:after{content:'';flex:1;height:1px;background:var(--border)}

/* — mùa đang chạy — */
.dcl-root.dcl-root .dcl-season .now{position:relative;margin:2px 16px 20px;border-radius:20px;padding:15px;overflow:hidden;background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid var(--border-strong)}
.dcl-root.dcl-root .dcl-season .now:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 100% 0%,var(--accent-soft),transparent 62%)}
.dcl-root.dcl-root .dcl-season .now .top{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dcl-root.dcl-root .dcl-season .now .tag{flex:none;white-space:nowrap;font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:5px;padding:2px 7px}
.dcl-root.dcl-root .dcl-season .now .mo{position:relative;display:block;font-family:'Barlow Condensed';font-weight:700;font-size:20px;text-transform:uppercase;line-height:1.12;margin-bottom:12px;text-wrap:pretty}
.dcl-root.dcl-root .dcl-season .now .left{flex:none;margin-left:auto;white-space:nowrap;font-family:'IBM Plex Mono';font-size:10.5px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-season .now .left b{font-weight:700;color:var(--text-2)}
.dcl-root.dcl-root .dcl-season .now .body{position:relative;display:flex;align-items:center;gap:14px}
.dcl-root.dcl-root .dcl-season .nring{--p:30;position:relative;width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),color-mix(in srgb,var(--accent) 12%,var(--surface-2)) 0)}
.dcl-root.dcl-root .dcl-season .nring:before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.dcl-root.dcl-root .dcl-season .nring .av{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);font-family:'Barlow Condensed';font-weight:700;font-size:21px;color:#141312}
.dcl-root.dcl-root .dcl-season .nring .pg{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);color:var(--accent-ink);border:2px solid var(--surface);font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.04em;padding:1px 8px;border-radius:999px}
.dcl-root.dcl-root .dcl-season .now .who{flex:1;min-width:0}
.dcl-root.dcl-root .dcl-season .now .who .k{font-family:'Barlow Condensed';font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-season .now .who .k .num{color:var(--text-2)}
.dcl-root.dcl-root .dcl-season .now .who .n{font-weight:700;font-size:16px;line-height:1.2;margin:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-season .now .who .v{font-family:'Barlow Condensed';font-weight:700;font-size:26px;line-height:1;color:var(--gold)}
.dcl-root.dcl-root .dcl-season .now .who .v em{font-style:normal;font-size:11px;color:var(--text-3);font-family:'Be Vietnam Pro'}
.dcl-root.dcl-root .dcl-season .now .who .g{font-size:11px;color:var(--text-3);margin-top:3px}
/* Trong dòng phụ (xám), tên người + con số phải nhỉnh hơn phần chữ nền: sáng màu +
   đậm hơn 1 nấc. Dùng chung cho .g (hero) và .hl (plaque timeline). */
.dcl-root.dcl-root .dcl-season .now .who .g b,.dcl-root.dcl-root .dcl-season .sn .r2 .hl b{color:var(--text);font-weight:600}
.dcl-root.dcl-root .dcl-season .now .who .g .num,.dcl-root.dcl-root .dcl-season .sn .r2 .hl .num{font-family:'IBM Plex Mono';font-weight:700;color:var(--text-2);margin:0 1px}

.dcl-root.dcl-root .dcl-season .now .prog{position:relative;margin-top:14px}
.dcl-root.dcl-root .dcl-season .now .prog .bar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.dcl-root.dcl-root .dcl-season .now .prog .bar i{display:block;height:100%;width:var(--w,0%);border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent))}
.dcl-root.dcl-root .dcl-season .now .prog .lg{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-family:'IBM Plex Mono';font-size:10px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-season .now .prog .lg b{color:var(--accent);font-weight:700}

/* — bảng vàng: ai gom nhiều cúp nhất — */
.dcl-root.dcl-root .dcl-season .honour{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 16px 20px}
.dcl-root.dcl-root .dcl-season .hc{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:11px 6px;text-align:center}
.dcl-root.dcl-root .dcl-season .hc.top{border-color:#E7C24B;background:color-mix(in srgb,#E7C24B 8%,var(--surface-2))}
.dcl-root.dcl-root .dcl-season .hc .av{width:34px;height:34px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);font-family:'Barlow Condensed';font-weight:700;font-size:13px;color:#141312}
.dcl-root.dcl-root .dcl-season .hc b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* thẻ "bảng vàng": ai vô địch nhiều lần nhất — hạng 1 nổi hơn (viền vàng + hào quang),
   số lần vô địch là con số lớn chứ không phải nhãn phụ */
/* cả 3 thẻ đều lấy viền + nền theo màu hạng (vàng/bạc/đồng) như podium Đấu trường,
   không riêng hạng 1 */
.dcl-root.dcl-root .dcl-season .hc.champ{position:relative;padding:14px 8px 12px;overflow:hidden;border-color:color-mix(in srgb,var(--mc,#CBD1D6) 52%,transparent);background:color-mix(in srgb,var(--mc,#CBD1D6) 7%,var(--surface-2))}
/* số hạng dùng đúng huy hiệu tròn như podium Đấu trường (.rno): nền = màu hạng */
.dcl-root.dcl-root .dcl-season .hc.champ .no{position:absolute;top:7px;left:8px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--mc,#CBD1D6);color:#141312;font-family:'Barlow Condensed';font-weight:700;font-size:12px;line-height:1}
.dcl-root.dcl-root .dcl-season .hc.champ:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--mc,#CBD1D6) 14%,transparent),transparent 70%)}
.dcl-root.dcl-root .dcl-season .hc.champ .av{position:relative;width:42px;height:42px;font-size:15px;border:2px solid var(--mc,#CBD1D6);box-sizing:border-box}
.dcl-root.dcl-root .dcl-season .hc.champ b{position:relative;margin-top:2px}
.dcl-root.dcl-root .dcl-season .hc.champ .times{position:relative;display:block;margin-top:6px;font-family:'Barlow Condensed';font-weight:700;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);line-height:1.25}
.dcl-root.dcl-root .dcl-season .hc.champ .times i{display:block;font-style:normal;font-size:26px;letter-spacing:0;line-height:1;color:var(--mc,#CBD1D6)}

/* — dòng thời gian mùa đã khép — */
.dcl-root.dcl-root .dcl-season .tl{position:relative;margin:0 16px;padding-left:24px}
.dcl-root.dcl-root .dcl-season .tl:before{content:'';position:absolute;left:5px;top:10px;bottom:14px;width:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,transparent),var(--border))}
.dcl-root.dcl-root .dcl-season .sn{position:relative;margin-bottom:10px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);overflow:hidden}
.dcl-root.dcl-root .dcl-season .sn:before{content:'';position:absolute;left:-25px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong);box-sizing:border-box}
.dcl-root.dcl-root .dcl-season .sn.g:before{border-color:#E7C24B;box-shadow:0 0 0 3px color-mix(in srgb,#E7C24B 16%,transparent)}
.dcl-root.dcl-root .dcl-season .sn .r1{display:flex;align-items:center;gap:11px;padding:12px 13px}
.dcl-root.dcl-root .dcl-season .sn .mav{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);font-family:'Barlow Condensed';font-weight:700;font-size:14px;color:#141312}
.dcl-root.dcl-root .dcl-season .sn .t{flex:1;min-width:0}
.dcl-root.dcl-root .dcl-season .sn .t .mo{display:flex;align-items:baseline;gap:6px}
.dcl-root.dcl-root .dcl-season .sn .t .mo b{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.dcl-root.dcl-root .dcl-season .sn .t .mo span{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-season .sn .t .ch{font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-season .sn .t .ch b{color:var(--gold)}
.dcl-root.dcl-root .dcl-season .sn .pt{flex:none;text-align:right}
.dcl-root.dcl-root .dcl-season .sn .pt b{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:19px;line-height:1;color:var(--gold)}
.dcl-root.dcl-root .dcl-season .sn .pt span{font-size:9.5px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-season .sn .r2{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding:8px 13px;background:color-mix(in srgb,var(--surface) 45%,transparent)}
.dcl-root.dcl-root .dcl-season .sn .r2+.r2{border-top-style:dashed}
.dcl-root.dcl-root .dcl-season .sn .r2 .hl{flex:1;min-width:0;font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* — TỔNG KẾT MÙA (.dcl-recap) — dùng chung khung .dcl-season (now / slbl / honour /
     nring) nên 2 màn cùng họ; phần thêm: biến thể vàng cho nhà vô địch, thẻ danh hiệu
     có nhãn, khối "kết quả của bạn", bảng xếp hạng chốt sổ. */
.dcl-root.dcl-root .dcl-recap .now.gold{border-color:color-mix(in srgb,#E7C24B 55%,transparent)}
.dcl-root.dcl-root .dcl-recap .now.gold:before{background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,#E7C24B 16%,transparent),transparent 62%)}
.dcl-root.dcl-root .dcl-recap .now.gold .tag{color:#E7C24B;border-color:color-mix(in srgb,#E7C24B 45%,transparent)}
.dcl-root.dcl-root .dcl-recap .nring.gold{background:conic-gradient(#E7C24B calc(var(--p)*1%),color-mix(in srgb,#E7C24B 14%,var(--surface-2)) 0)}
.dcl-root.dcl-root .dcl-recap .nring.gold .pg{background:#E7C24B;color:#141312}
.dcl-root.dcl-root .dcl-recap .nring .crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:19px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* điểm nhà vô địch tách sang cột phải (bên phải hero còn trống) và to hơn */
.dcl-root.dcl-root .dcl-recap .now .big{flex:none;margin-left:auto;text-align:right;line-height:1}
.dcl-root.dcl-root .dcl-recap .now .big b{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:40px;line-height:.9;color:#E7C24B}
.dcl-root.dcl-root .dcl-recap .now .big em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dcl-root.dcl-root .dcl-recap .grid2{grid-template-columns:1fr 1fr}
.dcl-root.dcl-root .dcl-recap .hc .k{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.dcl-root.dcl-root .dcl-recap .hc .val{display:block;margin-top:3px;font-family:'IBM Plex Mono';font-weight:700;font-size:11px;line-height:1.35;color:var(--accent);font-variant-numeric:tabular-nums}
.dcl-root.dcl-root .dcl-recap .hc .val .dz{display:inline-block;font-family:'Barlow Condensed';font-weight:700;font-size:12px;line-height:1.15;padding:1px 5px;border-radius:5px;vertical-align:middle}
.dcl-root.dcl-root .dcl-recap .hc .val .dz.up{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.dcl-root.dcl-root .dcl-recap .hc .val .dz.dn{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.dcl-root.dcl-root .dcl-recap .hc .val.g{color:#E7C24B}
/* kết quả của bạn */
.dcl-root.dcl-root .dcl-recap .you{margin:0 16px 20px;border:1px solid var(--accent);border-radius:16px;background:var(--accent-soft);overflow:hidden}
.dcl-root.dcl-root .dcl-recap .you .r1{display:flex;align-items:center;gap:12px;padding:13px 14px}
.dcl-root.dcl-root .dcl-recap .you .rk{font-family:'Barlow Condensed';font-weight:700;font-size:30px;line-height:1;color:var(--accent)}
.dcl-root.dcl-root .dcl-recap .you .rk em{font-style:normal;font-size:12px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-recap .you .r1 .t{flex:1;min-width:0}
.dcl-root.dcl-root .dcl-recap .you .r1 .t b{display:block;font-size:14px}
.dcl-root.dcl-root .dcl-recap .you .r1 .t span{font-size:11px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-recap .you .r1 .t .dz{display:inline-block;font-family:'Barlow Condensed';font-weight:700;font-size:11px;padding:0 4px;border-radius:5px;margin-right:2px}
.dcl-root.dcl-root .dcl-recap .you .r1 .t .dz.up{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.dcl-root.dcl-root .dcl-recap .you .r1 .t .dz.dn{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.dcl-root.dcl-root .dcl-recap .you .r1 .pts{font-family:'Barlow Condensed';font-weight:700;font-size:24px;line-height:1;color:var(--accent)}
.dcl-root.dcl-root .dcl-recap .you .r2{display:flex;border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.dcl-root.dcl-root .dcl-recap .you .r2 div{flex:1;text-align:center;padding:9px 4px}
.dcl-root.dcl-root .dcl-recap .you .r2 div+div{border-left:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.dcl-root.dcl-root .dcl-recap .you .r2 b{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:18px;line-height:1;white-space:nowrap}
.dcl-root.dcl-root .dcl-recap .you .r2>div>span{display:block;margin-top:3px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
/* bảng xếp hạng chốt sổ */
.dcl-root.dcl-root .dcl-recap .lb{margin:0 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);overflow:hidden}
.dcl-root.dcl-root .dcl-recap .lbr{display:flex;align-items:center;gap:11px;padding:10px 13px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .dcl-recap .lbr:last-child{border:none}
.dcl-root.dcl-root .dcl-recap .lbr.you{margin:0;border:none;border-radius:0;background:var(--accent-soft)}
.dcl-root.dcl-root .dcl-recap .lbr .no{width:20px;flex:none;text-align:center;font-family:'Barlow Condensed';font-weight:700;font-size:16px;color:var(--text-3)}
.dcl-root.dcl-root .dcl-recap .lbr.you .no{color:var(--accent)}
.dcl-root.dcl-root .dcl-recap .lbr .av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);font-family:'Barlow Condensed';font-weight:700;font-size:12px;color:#141312}
.dcl-root.dcl-root .dcl-recap .lbr .t{flex:1;min-width:0}
.dcl-root.dcl-root .dcl-recap .lbr .t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-recap .lbr .t>span{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--text-3)}
/* con số thống kê nổi hơn phần chữ nền: mono đậm, sáng màu; dấu phân cách mờ đi */
.dcl-root.dcl-root .dcl-recap .lbr .t span b{display:inline;font-size:inherit;font-weight:700;color:var(--text-2);white-space:nowrap}
.dcl-root.dcl-root .dcl-recap .lbr .t span b.up{color:var(--success)}
.dcl-root.dcl-root .dcl-recap .lbr .t span i{font-style:normal;margin:0 5px;opacity:.45}
.dcl-root.dcl-root .dcl-recap .lbr .p{flex:none;font-family:'Barlow Condensed';font-weight:700;font-size:18px}
/* 3 hạng đầu mang màu hạng của podium (vàng/bạc/đồng) thay vì tách thành khối riêng */
.dcl-root.dcl-root .dcl-recap .lbr.top{background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 9%,transparent),transparent 55%)}
.dcl-root.dcl-root .dcl-recap .lbr.top .no{color:var(--mc)}
.dcl-root.dcl-root .dcl-recap .lbr.top .av{border:2px solid var(--mc);box-sizing:border-box}
.dcl-root.dcl-root .dcl-recap .lbr.top .p{color:var(--mc)}
.dcl-root.dcl-root .dcl-recap .lbr.you .p{color:var(--accent)}

/* popup member: 3 ô chỉ số. Bản gốc .snap xếp NGANG (số | nhãn) nên trong sheet 348px
   mỗi ô chỉ còn ~83px cho cả hai → nhãn 5 ký tự bị cắt. Ở đây xếp DỌC: nhãn được trọn
   bề ngang ô. */
.dcl-root.dcl-root .dcl-arena .msb-ov .snaprow .snap{flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 10px}
.dcl-root.dcl-root .dcl-arena .msb-ov .snaprow .snap span,.dcl-root.dcl-root .dcl-arena .msb-ov .snaprow .snap b{white-space:nowrap}

/* bản admin của Tổng kết mùa: dải "sức khoẻ mùa".
   .snap gốc xếp NGANG (số | nhãn) nên nhãn dài đẩy ô phình ra ngoài khung — ở đây
   xếp DỌC và cho co, 3 ô chia đều bề ngang. */
.dcl-root.dcl-root .dcl-recap .snaprow .snap{flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 10px}
.dcl-root.dcl-root .dcl-recap .snaprow .snap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* popup member · cặp "cạ cứng ↔ khắc tinh".
   (2026-08-17) Đổi sang MẪU C: thẻ nằm ngang, avatar bên trái, 2 dòng chữ bên phải — thẻ dọc
   canh giữa cũ chiếm gần gấp đôi chiều cao cho cùng lượng chữ. Markup KHÔNG đổi
   (.d > .k + .avs + b + .v), chỉ layout. Cùng công thức với khối "đáng chú ý · so tháng trước". */
.dcl-root.dcl-root .dcl-arena .msb-ov .duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .d{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:8px 10px;overflow:hidden;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .good{--dc:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent)}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .bad{--dc:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .k{grid-column:2;font-family:'Barlow Condensed';font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dc);line-height:1.1}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs{grid-row:1/4;display:flex;align-items:center}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3ECDB,#B9A87E);border:2px solid var(--surface-2);font-family:'Barlow Condensed';font-weight:700;font-size:10px;color:#141312;box-sizing:border-box}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a+.a{margin-left:-8px}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo b{grid-column:2;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .v{grid-column:2;font-family:'IBM Plex Mono';font-size:10.5px;color:var(--text-3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .v b{display:inline;font-family:'Barlow Condensed';font-size:13px;color:var(--dc)}

/* popup member (tab Lực chiến): chặng lên hạng — thanh tiến độ trong khoảng elo của tier */
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:11px 13px;margin-bottom:12px}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-top b{flex:none;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--mc,var(--text))}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-top span{flex:1;min-width:0;text-align:right;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-top span b{display:inline;font-family:'IBM Plex Mono';font-size:11.5px;color:var(--accent)}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-bar i{display:block;height:100%;width:var(--w,0%);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--mc,var(--accent)) 50%,transparent),var(--mc,var(--accent)))}
.dcl-root.dcl-root .dcl-arena .msb-ov .tierprog .tp-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:'IBM Plex Mono';font-size:9.5px;color:var(--text-3)}

/* Format thắng–thua CHUẨN toàn app: "10T–5B", số thắng xanh / số thua đỏ. */
.dcl-root.dcl-root .dcl-arena .w,.dcl-root.dcl-root .dcl-season .w,.dcl-root.dcl-root .dcl-recap .w{color:var(--success)}
.dcl-root.dcl-root .dcl-arena .l,.dcl-root.dcl-root .dcl-season .l,.dcl-root.dcl-root .dcl-recap .l{color:var(--danger)}

/* popup member: số trong dòng phụ + nhãn breakdown nổi hơn phần chữ nền */
.dcl-root.dcl-root .dcl-arena .msb-ov [data-msb="sub"] b{font-family:'IBM Plex Mono';font-weight:700;color:var(--text-2)}
.dcl-root.dcl-root .dcl-arena .msb-ov [data-msb="pts"] .spec-row>span b{font-family:'IBM Plex Mono';font-weight:700;color:var(--text-2)}

/* Phân bổ tier (bản admin, tab Lực chiến): 1 dải xếp chồng cho thấy hình dạng CLB,
   kèm chú giải số người từng hạng — thay 6 thẻ rời rạc. */
.dcl-root.dcl-root .dcl-arena .tdist{margin:0 16px 14px}
.dcl-root.dcl-root .dcl-arena .tdist .bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border)}
.dcl-root.dcl-root .dcl-arena .tdist .bar i{display:block;width:var(--w);background:var(--tc)}
.dcl-root.dcl-root .dcl-arena .tdist .bar i+i{border-left:1px solid var(--surface)}
.dcl-root.dcl-root .dcl-arena .tdist .lg{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:10px}
.dcl-root.dcl-root .dcl-arena .tdist .r{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:11.5px}
.dcl-root.dcl-root .dcl-arena .tdist .r .dot{width:8px;height:8px;flex:none;border-radius:2px;background:var(--tc);transform:rotate(45deg)}
.dcl-root.dcl-root .dcl-arena .tdist .r .n{flex:1;min-width:0;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dcl-arena .tdist .r .c{font-family:'Barlow Condensed';font-weight:700;font-size:15px;color:var(--tc);line-height:1}
.dcl-root.dcl-root .dcl-arena .tdist .r .p{width:30px;text-align:right;font-family:'IBM Plex Mono';font-size:10px;color:var(--text-3)}

/* Dòng ngày trên appbar Sảnh: thứ = pill accent (Barlow in hoa), ngày = mono,
   lời chào tách ra chữ nhạt — thay caption "Thứ 3 · 07/07 · Bùi" một cỡ chữ. */
.dcl-root.dcl-root .dateline{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.dcl-root.dcl-root .dateline .dw{flex:none;white-space:nowrap;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:2px 7px;line-height:1.25}
.dcl-root.dcl-root .dateline .dd{flex:none;white-space:nowrap;font-family:'IBM Plex Mono';font-weight:700;font-size:12.5px;color:var(--text)}
.dcl-root.dcl-root .dateline .dd em{font-style:normal;color:var(--text-3)}
.dcl-root.dcl-root .dateline .hi{flex:1;min-width:0;text-align:right;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .dateline .hi b{font-weight:600;color:var(--text)}

/* card buổi (Lịch sử · bản thành viên) — bảng 3 cột */
.dcl-root.dcl-root .hsx .mcard.bcard{padding:12px 0 2px}
.dcl-root.dcl-root .hsx .bcard .bc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 13px 11px}
.dcl-root.dcl-root .hsx .bcard .ov-when{flex:1;min-width:0}
.dcl-root.dcl-root .hsx .bcard .ov-when .t{white-space:nowrap}
.dcl-root.dcl-root .hsx .bcard .bc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border)}
.dcl-root.dcl-root .hsx .bcard .bc-grid.one{grid-template-columns:1fr}
.dcl-root.dcl-root .hsx .bcard .bc-c{padding:9px 12px}
.dcl-root.dcl-root .hsx .bcard .bc-c+.bc-c{border-left:1px solid var(--border)}
.dcl-root.dcl-root .hsx .bcard .bc-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.dcl-root.dcl-root .hsx .bcard .bc-v{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.dcl-root.dcl-root .hsx .bcard .bc-v b{font-family:'Barlow Condensed';font-weight:700;font-size:20px;line-height:1}
.dcl-root.dcl-root .hsx .bcard .bc-v .bc-ok{color:var(--success)}
.dcl-root.dcl-root .hsx .bcard .bc-v .bc-no{color:var(--danger)}
.dcl-root.dcl-root .hsx .bcard .bc-d{font-family:'Barlow Condensed';font-weight:700;font-size:11.5px}
.dcl-root.dcl-root .hsx .bcard .bc-d.up{color:var(--success)}
.dcl-root.dcl-root .hsx .bcard .bc-d.dn{color:var(--danger)}
.dcl-root.dcl-root .hsx .bcard .bc-d.flat{color:var(--text-3)}
.dcl-root.dcl-root .hsx .bcard .bc-ft{display:flex;align-items:center;gap:8px;padding:8px 13px 10px;border-top:1px solid var(--border)}
.dcl-root.dcl-root .hsx .bcard .bc-ft .bc-sz{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);white-space:nowrap}
.dcl-root.dcl-root .hsx .bcard .bc-ft .bc-sz b{font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--text);background:var(--surface-3);border-radius:5px;padding:0 5px;margin-right:1px}
.dcl-root.dcl-root .hsx .bcard .bc-ft .lk{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap}

/* card buổi (Lịch sử · admin) — KPI 3 ô + 3 thanh tỉ lệ */
.dcl-root.dcl-root .hsx .mc.bcard{padding:11px 0 0}
.dcl-root.dcl-root .hsx .mc.bcard .mc-hd{padding:0 13px;margin-bottom:9px}
.dcl-root.dcl-root .hsx .mc.bcard .bc-grid{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .hsx .mc.bcard .bc-c{padding:9px 9px}
.dcl-root.dcl-root .hsx .mc.bcard .bc-l{white-space:nowrap}
.dcl-root.dcl-root .hsx .mc.bcard .bc-v .bc-s{font-family:'IBM Plex Mono';font-size:11px;color:var(--text-3)}
.dcl-root.dcl-root .hsx .mc.bcard .bstack{display:grid;gap:11px;padding:11px 13px 12px}

/* thanh tỉ lệ kiểu mẫu A: nhãn nhỏ trên, số Barlow lớn, track 5px */
.dcl-root.dcl-root .hsx .eb2 .ends{align-items:baseline;margin-bottom:6px}
.dcl-root.dcl-root .hsx .eb2 .ends .e{display:flex;align-items:baseline;gap:5px;min-width:0}
.dcl-root.dcl-root .hsx .eb2 .ends .e .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);line-height:1}
.dcl-root.dcl-root .hsx .eb2 .ends .e b{font-family:'Barlow Condensed';font-weight:700;font-size:20px;line-height:1}
.dcl-root.dcl-root .hsx .eb2 .ends .e.r{flex-direction:row-reverse;text-align:right}
.dcl-root.dcl-root .hsx .eb2 .ct{height:5px;border-radius:999px}

/* nhãn VL cạnh tên — dùng chung cho mọi card hiển thị tên (thêm class "gu") */
.dcl-root.dcl-root .gu::after{content:'VL';display:inline-block;text-decoration:none;font-size:8px;font-weight:800;border:1px solid currentColor;border-radius:4px;padding:0 3px;margin-left:5px;vertical-align:.32em;letter-spacing:.02em;opacity:.85}

.dcl-root.dcl-root .hsx .recap .caption b{font-family:'Barlow Condensed';font-weight:700;font-size:14px;color:var(--text);background:var(--surface-3);border-radius:5px;padding:0 5px;letter-spacing:.01em}

/* đồng bộ font trong card buổi: nhãn & số phụ dùng Be Vietnam Pro như tên sân */
.dcl-root.dcl-root .hsx .bcard .bc-l,.dcl-root.dcl-root .hsx .mc.bcard .bc-l{font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.dcl-root.dcl-root .hsx .bcard .bc-v b,.dcl-root.dcl-root .hsx .mc.bcard .bc-v b{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em}
.dcl-root.dcl-root .hsx .bcard .bc-v .bc-s,.dcl-root.dcl-root .hsx .mc.bcard .bc-v .bc-s{font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:11.5px}
.dcl-root.dcl-root .hsx .bcard .bc-d{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:11px}
.dcl-root.dcl-root .hsx .bcard .bc-ft .bc-sz{font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.dcl-root.dcl-root .hsx .bcard .bc-ft .bc-sz b{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:12.5px}
.dcl-root.dcl-root .hsx .eb2 .ends .e .l{font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.dcl-root.dcl-root .hsx .eb2 .ends .e b{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em}

.dcl-root.dcl-root .hsx .tw-hd{display:flex;align-items:flex-start;gap:10px}
.dcl-root.dcl-root .hsx .tw-hd .ov-when{flex:1;min-width:0}
.dcl-root.dcl-root .hsx .tw-hd .lk{flex:none;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap;cursor:pointer}

.dcl-root.dcl-root .hsx .mc-hd .lk{flex:none;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap;cursor:pointer}
.dcl-root.dcl-root .hsx .mc-hd .swhen{flex:1;min-width:0}

.dcl-root.dcl-root .hsx .eb2 .ends .e b.mut{color:var(--text-3)}
.dcl-root.dcl-root .hsx .eb2 .ct{background:var(--surface-3)}

/* màn Thống kê — dùng lại card phẳng của Lịch sử */
.dcl-root.dcl-root .hsx .stx{border-top:1px solid var(--border)}
.dcl-root.dcl-root .hsx .stx-r{display:flex;align-items:center;gap:9px;padding:9px 13px}
.dcl-root.dcl-root .hsx .stx-r+.stx-r{border-top:1px solid var(--border)}
.dcl-root.dcl-root .hsx .stx-r>.bc-l{flex:none;width:66px}
.dcl-root.dcl-root .hsx .stx-r b{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .hsx .stx-v{flex:none;font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:13px;color:var(--text-2)}
.dcl-root.dcl-root .hsx .stx-v.up{color:var(--success)}
.dcl-root.dcl-root .hsx .stx-v.dn{color:var(--danger)}
.dcl-root.dcl-root .hsx .stx-r.mate .avatar{flex:none;width:26px;height:26px;border-radius:999px;font-size:10px}
.dcl-root.dcl-root .hsx .stx-r.mate>.bc-l{width:auto;flex:none}
.dcl-root.dcl-root .hsx .mrate{flex:none;width:52px;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;display:block}
.dcl-root.dcl-root .hsx .mrate i{display:block;height:100%;background:var(--accent)}

.dcl-root.dcl-root .hsx .mc.bcard .bc-c{text-align:center}
.dcl-root.dcl-root .hsx .mc.bcard .bc-v{justify-content:center}

.dcl-root.dcl-root #stSess{gap:4px}

/* ===== GLOBAL: mọi popup / sheet / vùng cuộn trong khung máy đều ẩn thanh cuộn =====
   Chốt: scrollbar hệ thống làm hỏng nhịp thị giác của sheet & modal trên mobile.
   Áp cho cả CON CHÁU của popup/sheet — vùng cuộn thật thường là div bọc bên trong.
   Cuộn vẫn hoạt động bình thường (chỉ ẩn thanh). */
.dcl-root.dcl-root .vepop,.dcl-root.dcl-root .vepop *,.dcl-root.dcl-root .sheet,.dcl-root.dcl-root .sheet *,.dcl-root.dcl-root .sheet-demo,.dcl-root.dcl-root .sheet-demo *,.dcl-root.dcl-root .vepop-card,.dcl-root.dcl-root .vepop-card *,.dcl-root.dcl-root .screen,.dcl-root.dcl-root .snaprow,.dcl-root.dcl-root .chiprow,.dcl-root.dcl-root .phone,.dcl-root.dcl-root *{
  scrollbar-width:none;-ms-overflow-style:none}
.dcl-root.dcl-root .vepop::-webkit-scrollbar,.dcl-root.dcl-root .vepop *::-webkit-scrollbar,.dcl-root.dcl-root .sheet::-webkit-scrollbar,.dcl-root.dcl-root .sheet *::-webkit-scrollbar,.dcl-root.dcl-root .sheet-demo::-webkit-scrollbar,.dcl-root.dcl-root .sheet-demo *::-webkit-scrollbar,.dcl-root.dcl-root .vepop-card::-webkit-scrollbar,.dcl-root.dcl-root .vepop-card *::-webkit-scrollbar,.dcl-root.dcl-root .screen::-webkit-scrollbar,.dcl-root.dcl-root .snaprow::-webkit-scrollbar,.dcl-root.dcl-root .chiprow::-webkit-scrollbar,.dcl-root.dcl-root .phone::-webkit-scrollbar,.dcl-root.dcl-root *::-webkit-scrollbar{display:none;width:0;height:0}

/* =====================================================================
   BẢNG TIN — MÀN CHỐT (btx) · chốt 2026-08
   Namespace .btx đặt trên chính .screen (cùng cách làm với .hsx của Lịch sử).
   4 màn: bảng tin · kỷ niệm (.bt-mem) · tạo bài (.bt-new) · xem ảnh (.bt-view)
   + sheet tuỳ chọn bài (admin) + toast. Component dùng chung của design system:
   .appbar · .display · .lux · .atag · .icon-btn · ho the bai .fp · .field ·
   .input · .dd-btn · .chip · .tog · .stepper · .btn · .avatar · .caption.
   ===================================================================== */
.dcl-root.dcl-root .btx{display:none;flex-direction:column;padding-top:44px;overflow:hidden}
.dcl-root.dcl-root .btx.active{display:flex}
.dcl-root.dcl-root .btx .bt-scr{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:26px}
.dcl-root.dcl-root .btx .bt-scr::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .btx [hidden]{display:none!important}
.dcl-root.dcl-root .btx [data-go],.dcl-root.dcl-root .btx [data-open],.dcl-root.dcl-root .btx [data-close]{cursor:pointer}
.dcl-root.dcl-root .btx .cover{position:relative;overflow:hidden;background:var(--surface-2);margin:10px 14px 0;border-radius:16px;aspect-ratio:16/10}
.dcl-root.dcl-root .btx .cover .ph-img{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 22px,transparent 22px 44px),linear-gradient(150deg,#20293a,#12161f)}
.dcl-root.dcl-root .btx .cover .plh{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-3)}
.dcl-root.dcl-root .btx .cover .plh svg{width:30px;height:30px;opacity:.7}
.dcl-root.dcl-root .btx .cover .plh span{font-size:11px;font-weight:600;letter-spacing:.03em}
.dcl-root.dcl-root .btx .cover .edit{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:600;padding:6px 11px;border-radius:99px;backdrop-filter:blur(6px)}
.dcl-root.dcl-root .btx .cover .edit svg{width:12px;height:12px}
.dcl-root.dcl-root .btx .feedpad{padding:16px 16px 6px}
.dcl-root.dcl-root .btx .tl{position:relative;padding-left:22px}
.dcl-root.dcl-root .btx .tl::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--gold),transparent)}
.dcl-root.dcl-root .btx .tn{position:relative;margin-bottom:20px}
.dcl-root.dcl-root .btx .tn::before{content:'';position:absolute;left:-20px;top:6px;width:11px;height:11px;border-radius:99px;background:var(--gold);box-shadow:0 0 0 3px var(--bg)}
.dcl-root.dcl-root .btx .tdate{font-family:'Barlow Condensed';font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);margin-bottom:8px}
.dcl-root.dcl-root .btx .fp-dots{position:absolute;top:-9px;right:8px;z-index:4;width:30px;height:22px;display:grid;place-items:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);border-radius:99px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;line-height:1;padding:0}
.dcl-root.dcl-root .btx .fp:has(.fp-dots) .fp-ghim{right:46px}
.dcl-root.dcl-root .btx .fab{position:absolute;right:18px;bottom:20px;width:52px;height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 26px rgba(232,195,106,.28),0 4px 12px rgba(0,0,0,.4);z-index:6;border:0}
.dcl-root.dcl-root .btx .fab svg{width:22px;height:22px}
.dcl-root.dcl-root .btx.bt-mem{background:radial-gradient(140% 42% at 50% 0,rgba(232,195,106,.09),transparent 62%),var(--bg)}
.dcl-root.dcl-root .btx.bt-mem .bt-scr{padding:12px 18px 28px}
.dcl-root.dcl-root .btx.bt-mem .fp{margin-bottom:30px}
.dcl-root.dcl-root .btx .memempty{margin:40px 6px 0;text-align:center;color:var(--text-3);font-size:12.5px;line-height:1.6}
.dcl-root.dcl-root .btx.bt-new .bt-scr{padding:0 16px 96px}
.dcl-root.dcl-root .btx .photo-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.dcl-root.dcl-root .btx .photo-row::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .btx .photo-cell .rm{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:99px;background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dcl-root.dcl-root .btx .photo-cell .rm svg{width:12px;height:12px}
.dcl-root.dcl-root .btx .photo-cell.add{background:transparent;border:1.5px dashed var(--border-strong);color:var(--text-3);flex-direction:column;gap:5px}
.dcl-root.dcl-root .btx .photo-cell .bia{position:absolute;left:5px;bottom:5px;font-family:'Barlow Condensed';font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:2px 8px;border-radius:99px;line-height:1.5}
.dcl-root.dcl-root .btx .photo-cell.add span{font-size:10.5px;font-weight:600}
.dcl-root.dcl-root .btx .ttiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.dcl-root.dcl-root .btx .ttile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;color:var(--text-2);transition:all .15s ease}
.dcl-root.dcl-root .btx .ttile svg{width:19px;height:19px}
.dcl-root.dcl-root .btx .ttile b{font-size:10.5px;font-weight:600;line-height:1.2;text-align:center}
.dcl-root.dcl-root .btx .ttile.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dcl-root.dcl-root .btx .cchar{font-size:10.5px;color:var(--text-3);text-align:right;margin-top:5px;font-family:'IBM Plex Mono',monospace}
.dcl-root.dcl-root .btx .fp-top{border-color:color-mix(in srgb,var(--gold) 42%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent),0 10px 26px rgba(0,0,0,.32)}
.dcl-root.dcl-root .btx .toplab{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed';font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.dcl-root.dcl-root .btx .toplab svg{width:12px;height:12px}
.dcl-root.dcl-root .btx .modes{display:flex;gap:8px;margin:2px 0 4px}
.dcl-root.dcl-root .btx .modes .chip{flex:1;justify-content:center;cursor:pointer;user-select:none}
.dcl-root.dcl-root .btx .datepick{display:flex;gap:8px;align-items:center}
.dcl-root.dcl-root .btx .datepick .input{flex:1;color-scheme:dark}
.dcl-root.dcl-root .btx .sec-div{display:flex;align-items:center;gap:10px;margin:24px 0 12px}
.dcl-root.dcl-root .btx .sec-div b{font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);flex:none}
.dcl-root.dcl-root .btx .sec-div i{flex:1;height:1px;background:var(--border)}
.dcl-root.dcl-root .btx .trow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer}
.dcl-root.dcl-root .btx .trow .ic{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:none}
.dcl-root.dcl-root .btx .trow .ic svg{width:18px;height:18px}
.dcl-root.dcl-root .btx .trow .tx{flex:1;min-width:0}
.dcl-root.dcl-root .btx .trow .tx b{display:block;font-size:13.5px;font-weight:600}
.dcl-root.dcl-root .btx .trow .tx span{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}
.dcl-root.dcl-root .btx .preview{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 20px 24px;margin-top:4px}
.dcl-root.dcl-root .btx .cta{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;gap:9px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border)}
.dcl-root.dcl-root .btx .cta .btn{min-width:0;width:auto;flex:1}
.dcl-root.dcl-root .btx .cta .btn.btn-secondary{flex:0 0 auto;width:auto;padding:0 14px}
.dcl-root.dcl-root .btx .cta svg{width:18px;height:18px}
.dcl-root.dcl-root .btx.bt-view{background:#05060a}
.dcl-root.dcl-root .btx .cbtn{width:38px;height:38px;flex:none;border:1px solid rgba(255,255,255,.16);border-radius:99px;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(8px);cursor:pointer;transition:background .15s ease}
.dcl-root.dcl-root .btx .cbtn:hover{background:rgba(0,0,0,.68)}
.dcl-root.dcl-root .btx .cbtn svg{width:18px;height:18px}
.dcl-root.dcl-root .btx .topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:14px;background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.22) 62%,transparent)}
.dcl-root.dcl-root .btx .counter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;color:#fff;letter-spacing:.14em}
.dcl-root.dcl-root .btx .vstage{flex:1;display:grid;place-items:center;padding:76px 24px 216px;position:relative;min-height:0;overflow:hidden}
.dcl-root.dcl-root .btx .vstage-in{width:100%;max-height:100%;min-height:0;position:relative}
/* (2026-08-22) BỎ aspect-ratio:4/5 CỐ ĐỊNH — đây là màn xem ảnh toàn màn hình nên khung phải co
   theo tỉ lệ ảnh thật (ảnh ngang 16:9 trước đây bị cover cắt mất 55%, không có cách xem lại).
   3 nhánh:
   · `.photo:has(>svg)` — Ô PLACEHOLDER của doc (div gradient còn <svg> shuttle): giữ 4:5 + cover,
     y nguyên như cũ, để có chiều cao và 2 nút .nav vẫn căn giữa đúng ô ảnh.
   · `<img class="photo">` — CÁCH APP NÊN DÙNG: img có kích thước nội tại nên object-fit:contain +
     max-height:100% là đủ; khung tự co đúng tỉ lệ ảnh, shadow/radius ôm sát ảnh.
   · div + background-image (không còn svg con) — div KHÔNG có kích thước nội tại, bỏ aspect-ratio
     là cao 0px, nên khi ô ảnh không còn svg thì .vstage-in được stretch cho cao bằng cả vùng
     .vstage để height:100% của div resolve được, rồi vẽ bằng background-size:contain. Hoạt
     động, nhưng radius/shadow khi đó viền theo khung chứ không ôm ảnh — ưu tiên dùng <img>.
     Lưu ý selector: `:has()` KHÔNG được lồng trong `:has()` (cả rule sẽ bị browser drop khi
     parse) — nên dùng `:not(:has(...))` một tầng như dưới.
   Điều kiện để max-height:100% có tác dụng: cả chuỗi cha phải có chiều cao XÁC ĐỊNH.
   · `.vstage` là flex item `flex:1` — thêm `min-height:0;overflow:hidden` để nó bị kẹp về khoảng
     trống còn lại, không tự phình theo ảnh (ảnh dọc từng đè xuống caption/strip rồi tràn bezel).
   · `.vstage-in` ở nhánh ảnh thật giữ `display:block` + `height:100%` — KHÔNG biến nó thành grid:
     nó có 4 con (ảnh, 2 nút .nav absolute, .dots) nên grid sẽ sinh hàng auto, grid area của ảnh
     thành indefinite và max-height:100% bị bỏ qua. Canh ngang do margin-inline:auto, canh dọc do
     place-items:center của .vstage.
   Dải thumbnail .btx .th giữ nguyên vuông + cover. */
.dcl-root.dcl-root .btx .photo{width:100%;max-width:100%;max-height:100%;margin-inline:auto;object-fit:contain;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.dcl-root.dcl-root .btx .photo:has(>svg){aspect-ratio:4/5;background-size:cover}
.dcl-root.dcl-root .btx .vstage-in:not(:has(.photo>svg)){align-self:stretch;display:block;height:100%;min-height:0}
.dcl-root.dcl-root .btx .vstage-in>div.photo:not(:has(>svg)){height:100%}
.dcl-root.dcl-root .btx .photo>svg{width:96px;height:96px;color:rgba(255,255,255,.07)}
.dcl-root.dcl-root .btx .nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:99px;display:grid;place-items:center;background:rgba(0,0,0,.38);color:rgba(255,255,255,.72);backdrop-filter:blur(6px);cursor:pointer;z-index:2}
.dcl-root.dcl-root .btx .nav svg{width:17px;height:17px}
.dcl-root.dcl-root .btx .nav.prev{left:-8px}
.dcl-root.dcl-root .btx .nav.prev svg{transform:rotate(180deg)}
.dcl-root.dcl-root .btx .nav.next{right:-8px}
.dcl-root.dcl-root .btx .dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.dcl-root.dcl-root .btx .dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);transition:all .18s ease}
.dcl-root.dcl-root .btx .dots i.on{background:var(--accent);width:16px;box-shadow:0 0 8px rgba(200,241,53,.45)}
.dcl-root.dcl-root .btx .botbar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:26px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.55) 34%,rgba(0,0,0,.82));backdrop-filter:blur(6px)}
.dcl-root.dcl-root .btx .cap{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:17px;line-height:1.3;color:#f5f3ea;text-align:center}
.dcl-root.dcl-root .btx .meta{display:flex;justify-content:center;margin-top:9px}
.dcl-root.dcl-root .btx .dchip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);color:#e9e7dd;font-size:10px;font-weight:700;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.dcl-root.dcl-root .btx .dchip svg{width:11px;height:11px}
.dcl-root.dcl-root .btx .strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:14px;padding:3px 2px}
.dcl-root.dcl-root .btx .strip::-webkit-scrollbar{display:none}
.dcl-root.dcl-root .btx .th{width:56px;height:56px;flex:none;border-radius:9px;border:2px solid transparent;padding:0;opacity:.6;cursor:pointer;transition:all .18s ease}
.dcl-root.dcl-root .btx .th.on{border-color:var(--accent);opacity:1;box-shadow:0 0 12px rgba(200,241,53,.3)}
.dcl-root.dcl-root .btx .th>svg{width:18px;height:18px}
/* (2026-08-18) BỘ RIÊNG .bt-sheet/.bt-panel/.bt-scrim/.bts-handle ĐÃ GỠ — Bảng tin dùng
   bottom-sheet CHUNG .sheetov > .sheet + .sheet-handle của styles.css, đúng tiền lệ .bt-toast
   (#18) và hướng "ưu tiên dùng chung" user chốt 2026-08-16. Scrim là nền của chính .sheetov
   (không còn div .bt-scrim), trượt lên bằng transition của .sheetov>.sheet (không còn
   @keyframes btShUp), mở/đóng vẫn là class .on nên hợp đồng JS không đổi.
   Chỉ còn .bt-ov làm NAMESPACE để những rule riêng của doc Bảng tin (nút full-width) không
   rò sang sheet của màn khác — cùng pattern .msb-ov của Đấu trường. Che kín bottom nav là
   việc của .phone .sheetov (z-index 130 > .phone>.tabbar2 50), không khai lại ở đây. */
.dcl-root.dcl-root .bts-head{display:flex;align-items:center;gap:12px;padding:2px 2px 14px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .bts-thumb{width:44px;height:44px;flex:none;border-radius:10px;background:linear-gradient(135deg,#123028,#0c1a15);display:grid;place-items:center;color:rgba(255,255,255,.14)}
.dcl-root.dcl-root .bts-thumb svg{width:20px;height:20px}
.dcl-root.dcl-root .bts-title{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.25}
.dcl-root.dcl-root .bts-sub{font-size:11px;color:var(--text-3);font-weight:600;margin-top:3px;display:flex;align-items:center;gap:5px}
.dcl-root.dcl-root .bts-sub svg{width:11px;height:11px}
.dcl-root.dcl-root .bt-opt{display:flex;align-items:center;gap:13px;width:100%;padding:13px 2px;background:none;border:0;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;border-radius:12px}
.dcl-root.dcl-root .bt-opt:active{background:var(--surface-2)}
.dcl-root.dcl-root .bt-opt-ic{width:38px;height:38px;flex:none;border-radius:12px;background:var(--surface-3);display:grid;place-items:center;color:var(--text-2)}
.dcl-root.dcl-root .bt-opt-ic svg{width:18px;height:18px}
.dcl-root.dcl-root .bt-opt-body{flex:1;min-width:0}
.dcl-root.dcl-root .bt-opt-name{font-size:14px;font-weight:600;line-height:1.2}
.dcl-root.dcl-root .bt-opt-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;display:block}
.dcl-root.dcl-root .bt-opt-chev{flex:none;color:var(--text-3)}
.dcl-root.dcl-root .bt-opt-chev svg{width:16px;height:16px}
.dcl-root.dcl-root .bt-opt.danger .bt-opt-name{color:var(--danger)}
.dcl-root.dcl-root .bt-opt.danger .bt-opt-ic{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.dcl-root.dcl-root .bt-opt-div{height:1px;background:var(--border);margin:4px 2px}
.dcl-root.dcl-root .bt-tgl{flex:none;width:44px;height:26px;border-radius:99px;background:var(--surface-3);border:1px solid var(--border-strong);position:relative;transition:background .18s ease,border-color .18s ease}
.dcl-root.dcl-root .bt-tgl::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:var(--text-3);transition:transform .18s ease,background .18s ease}
.dcl-root.dcl-root .bt-opt[aria-pressed="true"] .bt-tgl{background:var(--gold);border-color:var(--gold)}
.dcl-root.dcl-root .bt-opt[aria-pressed="true"] .bt-tgl::after{transform:translateX(18px);background:var(--gold-ink)}
.dcl-root.dcl-root .bt-opt[aria-pressed="true"] .bt-opt-ic{background:var(--gold-soft);color:var(--gold)}
.dcl-root.dcl-root .bt-opt[aria-pressed="true"] .bt-opt-sub{color:var(--gold)}
.dcl-root.dcl-root .bt-ov .btn{width:100%;margin-top:14px}
/* (2026-08-15) .bt-toast đã gỡ — Bảng tin dùng .toast chung của styles.css như mọi màn khác;
   biến thể thông báo phân biệt bằng class (.ok/.err), không class song song. */


/* =====================================================================
   INDEX · SHELL CẶP VAI (pairmode) — chốt 2026-08
   index.html không tham số = shell chọn màn + 2 khung THÀNH VIÊN | ADMIN
   nhúng lại chính index.html?only=… ⇒ nội dung không bao giờ lệch, và mỗi
   khung điều hướng ĐỘC LẬP (là 1 document riêng, bấm trong khung nào thì
   chỉ khung đó đi). Màn chưa có bản admin: khung phải hiện lại đúng bản
   thường (same-as-member) ⇒ 2 khung giống nhau.
   ===================================================================== */
.dcl-root.dcl-root body.pairmode .screen-nav,.dcl-root.dcl-root body.pairmode .stage{display:none}
.dcl-root.dcl-root .pk{display:grid;gap:14px;margin-bottom:22px}
.dcl-root.dcl-root .pk-grp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dcl-root.dcl-root .pk-lb{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.08em;color:var(--text-3);width:100%}
.dcl-root.dcl-root .pk-b{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);border:1px solid transparent;font:inherit;
  font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}
.dcl-root.dcl-root .pk-b:hover{background:var(--surface-3);color:var(--text)}
.dcl-root.dcl-root .pk-b.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.dcl-root.dcl-root .pk-b i{font-style:normal;font-size:10px;opacity:.85}
.dcl-root.dcl-root .pk-note{font-size:12px;color:var(--text-3);line-height:1.5}
.dcl-root.dcl-root .pr{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start}
.dcl-root.dcl-root .pr-pane{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.dcl-root.dcl-root .pr-h{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--border)}
.dcl-root.dcl-root .pr-role{font-size:13.5px;font-weight:600}
.dcl-root.dcl-root .pr-sub{font-size:11.5px;color:var(--text-3)}
.dcl-root.dcl-root .pr-h .lk{margin-left:auto;font-size:11.5px;color:var(--accent);text-decoration:none;font-weight:600}
.dcl-root.dcl-root .pr-frame{position:relative;background:var(--bg)}
.dcl-root.dcl-root .pr-frame iframe{border:0;display:block;width:420px;height:830px}
.dcl-root.dcl-root .pr-wide iframe{width:960px;height:830px}

/* thanh tab dưới chỉ có ở màn gốc Bảng tin (.bt-feed) — trang con không có */
.dcl-root.dcl-root .btx.bt-feed .bt-scr{padding-bottom:14px}
.dcl-root.dcl-root .btx.bt-feed .tabbar2{position:relative;flex:none;margin-top:auto}
.dcl-root.dcl-root .btx.bt-feed .fab{bottom:96px}


/* ===== HEADING 3 CẤP (chốt 2026-08-13) =====
   Tiêu đề màn (.display trong .appbar) chỉ dùng 3 cấp, theo độ sâu điều hướng:
   .h-l1 48px — 5 màn gốc của bottom nav (Sảnh · Bảng tin · Đấu trường · Ví · Tôi)
   .h-l2 31px — một bước sâu từ màn gốc (có nút back)
   .h-l3 25px — hai bước sâu (vào từ màn cấp 2)
   Sheet/modal KHÔNG phải một cấp: tiêu đề trong sheet giữ .display 24px.
   Phần .lux (Playfair nghiêng) luôn .86em của cấp đang dùng. */
.dcl-root.dcl-root .display.h-l1,.dcl-root.dcl-root .appbar .display.h-l1{font-size:48px}
.dcl-root.dcl-root .display.h-l2,.dcl-root.dcl-root .appbar .display.h-l2{font-size:31px}
.dcl-root.dcl-root .display.h-l3,.dcl-root.dcl-root .appbar .display.h-l3{font-size:25px}
.dcl-root.dcl-root .display.h-l1 .lux,.dcl-root.dcl-root .display.h-l2 .lux,.dcl-root.dcl-root .display.h-l3 .lux{font-size:.86em}

/* — Subtext của heading (chốt 2026-08-13) — CHỈ dùng ở .h-l2 / .h-l3, không dùng ở .h-l1.
   Mỗi màn chọn MỘT trong hai, không bao giờ dùng cả hai:
   .h-eyebrow (TRÊN tiêu đề) = ngữ cảnh/nhóm cha, không mang số liệu — "Điều hành CLB".
   .h-sub    (DƯỚI tiêu đề) = mô tả/số liệu của chính màn — "12 buổi · 148 trận". */
.dcl-root.dcl-root .appbar .h-eyebrow,.dcl-root.dcl-root .h-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    line-height:1.3;color:var(--text-3);margin-bottom:3px}
.dcl-root.dcl-root .appbar .h-sub,.dcl-root.dcl-root .h-sub{font-size:11px;font-weight:500;line-height:1.4;color:var(--text-3);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   KÉO ĐỂ LÀM MỚI · pull-to-refresh (.ptr) — chốt 2026-08-16
   Cử chỉ TOÀN CỤC cho MỌI màn DCL khi nội dung đang ở đỉnh (scrollTop = 0).

   HÌNH DẠNG & SỐ ĐO
   · Chỉ báo = puck tròn 40px, viền 1px, căn giữa ngang. KHÔNG đè appbar:
     nằm trong .ptr-host (vùng nội dung DƯỚI appbar), neo top:-52px nên khi kéo
     nó lộ ra ở KHE giữa appbar (đứng yên) và nội dung (bị đẩy xuống).
   · Nội dung .ptr-host trượt xuống theo quãng kéo đã GIẢM CHẤN (finger × .5),
     tối đa 96px. Ngưỡng làm mới = 64px. Lúc quay, host giữ ở 56px.
   · Thanh nav dưới (.tabbar2/.tabbar/.tabbar4) là em của .phone, KHÔNG nằm trong
     .ptr-host ⇒ đứng yên tuyệt đối suốt cử chỉ.
   · Token-only ⇒ chạy đủ 5 theme (kể cả 2 nền sáng Ivory/Sunset).

   HỢP ĐỒNG VỚI CODE (bên code gắn class + đặt biến CSS, không cần JS của doc)
   · Kéo:   set trên .ptr  --ptr-o (0→1) · --ptr-s (.6→1) · --ptr-p (0→1, vẽ cung);
            set trên .ptr-host  transform:translateY(pull)
   · Đủ ngưỡng: thêm .armed lên .ptr  (cung đầy + nền accent-soft + viền accent)
   · Đang làm mới (thả tay khi armed): thêm .on lên .ptr, .snap lên .ptr-host,
            host translateY(56) — cung khoá 3/4 + .ptr-spin quay liên tục
   · Xong:  gỡ .on → host .snap về translateY(0) + .ptr mờ dần (LẶNG, không toast)
   · TẮT cử chỉ khi có .sheetov.on / .vepop.open đang mở (sheet có cử chỉ riêng).
   ===================================================================== */
.dcl-root.dcl-root .ptr-host{position:relative;will-change:transform}
.dcl-root.dcl-root .ptr-host.snap{transition:transform .28s cubic-bezier(.32,.72,0,1)}
.dcl-root.dcl-root .ptr{position:absolute;left:50%;top:-52px;margin-left:-20px;z-index:6;
  width:40px;height:40px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:var(--ptr-o,0);transform:scale(var(--ptr-s,.6));
  transition:opacity .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}
.dcl-root.dcl-root .ptr-spin{display:flex;width:24px;height:24px}
.dcl-root.dcl-root .ptr svg{width:24px;height:24px;transform:rotate(-90deg)}
.dcl-root.dcl-root .ptr .ptr-track{fill:none;stroke:var(--border-strong);stroke-width:2.6}
.dcl-root.dcl-root .ptr .ptr-arc{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:56.5;stroke-dashoffset:calc(56.5 * (1 - var(--ptr-p,0)))}
.dcl-root.dcl-root .ptr.armed{background:var(--accent-soft);border-color:var(--accent)}
.dcl-root.dcl-root .ptr.on{--ptr-o:1;--ptr-s:1}
.dcl-root.dcl-root .ptr.on .ptr-arc{stroke-dashoffset:14.1}            /* cung ~75% cố định khi quay */
.dcl-root.dcl-root .ptr.on .ptr-spin{animation:ptr-rot .7s linear infinite}
@keyframes ptr-rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .dcl-root.dcl-root .ptr.on .ptr-spin{animation-duration:1.4s}
  .dcl-root.dcl-root .ptr-host.snap{transition:none}
}

/* =====================================================================
   KHUNG CHỜ · skeleton / greeking (.skb) — chốt 2026-08-16
   Bản XÁM của ĐÚNG viewport đầu tiên của màn thật: cùng vị trí, cùng kích
   thước khối ⇒ khi dữ liệu ập vào, KHÔNG khối nào nhảy chỗ.

   Nguyên tắc (đã xác nhận):
   · Appbar (tiêu đề + icon) + nút BACK + thanh nav dưới = VẼ THẬT, không greek
     (chrome tĩnh, có ngay ở route-level — greek thành ô xám trông như bị disable).
   · Chỉ vùng DỮ LIỆU greek bằng .skb.
   · NGOẠI LỆ tiêu đề (chốt 2026-08-18): tiêu đề nào KHÁC NHAU THEO VAI thì GREEK phần tiêu
     đề — khung chờ chỉ đọc được cookie, không hỏi DB nên chưa biết người đang mở là ai.
     Đúng một chỗ hiện có: màn Ví · route hoadon ("HOÁ ĐƠN của tôi" bản thành viên ↔
     "SỔ QUỸ CLB" bản admin). Greek đúng phần chữ, giữ nguyên chiều cao hàng appbar (46px)
     để tiêu đề thật về không nhảy chỗ; icon + nav dưới vẫn vẽ thật.
   Màu & độ mờ (token-only ⇒ đủ 5 theme, cả 2 nền sáng):
   · khối xám = --surface-2 ; vệt shimmer quét qua = --surface-3.
   · shimmer 1.4s ease-in-out, trái→phải. prefers-reduced-motion: tắt, giữ mờ tĩnh.
   Dùng: <div class="skb" style="height:..;width:..">. Modifier .card (radius 20) ·
   .round (999) · .line (radius 6, khối chữ). Bọc cả màn trong .sk để đọc như 1 cụm. */
.dcl-root.dcl-root .skb{background:var(--surface-2);border-radius:12px;position:relative;overflow:hidden;flex-shrink:0}
.dcl-root.dcl-root .skb.card{border-radius:20px}
.dcl-root.dcl-root .skb.round{border-radius:999px}
.dcl-root.dcl-root .skb.line{border-radius:6px}
.dcl-root.dcl-root .skb::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface-3) 85%,transparent),transparent);
  animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.dcl-root.dcl-root .skb::after{animation:none;opacity:.4}}
.dcl-root.dcl-root .sk-rows{display:grid;gap:8px}
.dcl-root.dcl-root .sk-row{display:flex;align-items:center;gap:12px;height:66px;padding:0 16px;
  border-radius:20px;border:1px solid var(--border);background:var(--surface)}


/* ===== ẢNH ĐẠI DIỆN · ba trạng thái ruột của .avatar (chốt 2026-08-17) =====
   App (DclAvatar) chỉ thay RUỘT, KHÔNG đụng khung: width/height/border-radius/
   flex-shrink/font-size ở ~30 chỗ gọi giữ nguyên y hệt, kể cả viền vàng top-1
   (.dcl-arena .ring .avatar) và biến thể chồng nhau margin-left:-8px.
   Ưu tiên (chốt 2026-08-19): [1] ảnh tự tải → [2] hình preset. Kiểu hai chữ cái ĐÃ BỎ HẲN —
   không ô .avatar nào còn để chữ, kể cả khách vãng lai (vãng lai luôn dùng preset theo giới).
   Khối mẫu: "main - man ca nhan (personal) v1.0" · cột "Ảnh đại diện · ba trạng thái"
   cạnh màn adminmanage. Năm hình preset là symbol #av-classic · #av-cap · #av-band ·
   #av-glasses · #av-phones (viewBox 0 0 40 40, nét currentColor).
   GIỚI TÍNH (chốt 2026-08-18): mỗi preset có HAI bản vẽ — bản nam và bản nữ hậu tố -f
   (#av-classic-f · #av-cap-f · #av-band-f · #av-glasses-f · #av-phones-f). Luật chọn:
   data-sex="f" ⇒ DÙNG BẢN -f. avatar_id vẫn chỉ có ĐÚNG 5 giá trị (classic · cap · band ·
   glasses · phones) — bản nữ KHÔNG phải giá trị thứ 6, chỉ là hình vẽ khác của cùng id.
   Bản -f: đầu nhỏ hơn (r=6 thay 6.8) + khối tóc quanh đỉnh + hai lọn tóc rơi tới vai
   (cap/phones: tóc ló ra dưới lưỡi trai / dưới tai nghe). Chỉ đổi màu là KHÔNG đủ — ở ô
   26–38px nam và nữ trông y hệt nhau. Ô figure vẫn nền sáng #E9E3D3, mực nữ #d23b6e. */
.dcl-root.dcl-root .avatar[data-avatar="photo"]{overflow:hidden;color:transparent}
.dcl-root.dcl-root .avatar[data-avatar="photo"]>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Nét line-art là hex cố định nên ô phải có nền sáng mới đọc được ở cả 5 theme —
   khác ô hai chữ cái, vẫn giữ gradient var(--img-a)/var(--img-b). */
.dcl-root.dcl-root .avatar[data-avatar="figure"]{background:#E9E3D3;overflow:hidden}
.dcl-root.dcl-root .avatar[data-avatar="figure"]>svg{display:block;width:76%;height:76%;color:#33312c}
.dcl-root.dcl-root .avatar[data-avatar="figure"][data-sex="f"]>svg{color:#d23b6e}
/* Cặp ô chồng nhau ở .duo (cạ cứng / khắc tinh, màn Đấu trường) không mang class .avatar
   nhưng vẫn là ô ảnh đại diện — giữ nền gradient vàng của .a, chỉ canh hình preset vào giữa. */
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a[data-avatar="figure"]>svg{display:block;width:76%;height:76%;color:#33312c}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a[data-avatar="figure"][data-sex="f"]>svg{color:#d23b6e}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a[data-avatar="photo"]{overflow:hidden;color:transparent}
.dcl-root.dcl-root .dcl-arena .msb-ov .duo .avs .a[data-avatar="photo"]>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Cùng ca đó ở màn Mùa giải (2026-08-21): .av (người dẫn đầu · bảng vàng · bảng chốt sổ ·
   danh hiệu mùa) và .mav (nhà vô địch từng mùa) là ô ảnh đại diện nhưng không mang class
   .avatar — 25 ô. Khung/kích thước vẫn do rule gốc của .av/.mav quyết định; ở đây chỉ canh
   hình preset vào giữa và cho ảnh thật phủ kín, giữ nền gradient vàng sẵn có của ô. */
.dcl-root.dcl-root .av[data-avatar="figure"]>svg,.dcl-root.dcl-root .mav[data-avatar="figure"]>svg{display:block;width:76%;height:76%;color:#33312c}
.dcl-root.dcl-root .av[data-avatar="figure"][data-sex="f"]>svg,.dcl-root.dcl-root .mav[data-avatar="figure"][data-sex="f"]>svg{color:#d23b6e}
.dcl-root.dcl-root .av[data-avatar="photo"],.dcl-root.dcl-root .mav[data-avatar="photo"]{overflow:hidden;color:transparent}
.dcl-root.dcl-root .av[data-avatar="photo"]>img,.dcl-root.dcl-root .mav[data-avatar="photo"]>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}


/* ============================================================================
   MDX · MÀN CHI TIẾT THÀNH VIÊN (admin only) — thêm 2026-08-27.
   Namespace đặt trên chính .screen (cùng cách làm .btx / .hsx). Màn này dựng gần
   như hoàn toàn bằng component có sẵn (.card/.spec-row/.snaprow/.row-card/.mvs/
   .chiprow/.stag) — chỉ hai khối dưới đây là chưa có sẵn ngoài popup Đấu trường:
   [1] .tierprog — bản dùng NGOÀI .dcl-arena .msb-ov (cùng markup .tp-top/.tp-bar/
       .tp-scale, cùng giá trị; không sửa bản của Đấu trường).
   [2] .cmp — dải "so với CLB": thanh accent = người này, vạch dọc = mốc CLB,
       dòng mono dưới ghi mốc CLB + phân vị. Dùng lại ở bất kỳ màn nào cần so cá
       nhân với CLB, KHÔNG tự chế biến thể khác.
   ============================================================================ */
/* Format thắng–thua CHUẨN toàn app (giống .dcl-arena/.dcl-season/.dcl-recap):
   "18T–14B", số thắng xanh / số thua đỏ. */
.dcl-root.dcl-root .mdx .w{color:var(--success)}
.dcl-root.dcl-root .mdx .l{color:var(--danger)}
/* 4 ô thống kê là LỐI VÀO Lịch sử admin (chốt 2026-08-27): affordance = nền/viền nhấc
   nhẹ khi hover + lún khi bấm, KHÔNG thêm chevron (ô chỉ ~80px, chevron ăn hết chỗ số).
   Chỉ .snap CÓ data-mdhist mới bấm được — .snap thường ở màn khác không đổi. */
.dcl-root.dcl-root .mdx .snap[data-mdhist]{cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .12s ease}
.dcl-root.dcl-root .mdx .snap[data-mdhist]:hover{background:var(--surface-3);border-color:var(--border-strong)}
.dcl-root.dcl-root .mdx .snap[data-mdhist]:active{transform:scale(.97)}
.dcl-root.dcl-root .mdx .snap[data-mdhist]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcl-root.dcl-root .mdx .tierprog{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:11px 13px}
.dcl-root.dcl-root .mdx .tierprog .tp-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.dcl-root.dcl-root .mdx .tierprog .tp-top b{flex:none;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--mc,var(--text))}
.dcl-root.dcl-root .mdx .tierprog .tp-top span{flex:1;min-width:0;text-align:right;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcl-root.dcl-root .mdx .tierprog .tp-top span b{display:inline;font-family:'IBM Plex Mono';font-size:11.5px;color:var(--accent)}
.dcl-root.dcl-root .mdx .tierprog .tp-bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.dcl-root.dcl-root .mdx .tierprog .tp-bar i{display:block;height:100%;width:var(--w,0%);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--mc,var(--accent)) 50%,transparent),var(--mc,var(--accent)))}
.dcl-root.dcl-root .mdx .tierprog .tp-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:'IBM Plex Mono';font-size:9.5px;color:var(--text-3)}
/* nhãn hạng lực chiến — cùng khuôn .lc-tier của Lịch sử (chấm + màu token --t-*),
   không dùng .tier-vang (đó là màu gold theo theme, không phải màu hạng). */
.dcl-root.dcl-root .mdx .lc-tier{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:999px}
.dcl-root.dcl-root .mdx .lc-tier::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.dcl-root.dcl-root .mdx .lc-tier.gold{color:var(--t-vang);background:color-mix(in srgb,var(--t-vang) 15%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.silver{color:var(--t-bac);background:color-mix(in srgb,var(--t-bac) 14%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.bronze{color:var(--t-dong);background:color-mix(in srgb,var(--t-dong) 15%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.plat{color:var(--t-bkim);background:color-mix(in srgb,var(--t-bkim) 14%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.diamond{color:var(--t-kc);background:color-mix(in srgb,var(--t-kc) 14%,transparent)}
/* nhãn hạng lực chiến — cùng khuôn .lc-tier của Lịch sử (chấm + màu token --t-*),
   không dùng .tier-vang (đó là màu gold theo theme, không phải màu hạng). */
.dcl-root.dcl-root .mdx .lc-tier{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:999px}
.dcl-root.dcl-root .mdx .lc-tier::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.dcl-root.dcl-root .mdx .lc-tier.gold{color:var(--t-vang);background:color-mix(in srgb,var(--t-vang) 15%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.silver{color:var(--t-bac);background:color-mix(in srgb,var(--t-bac) 14%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.bronze{color:var(--t-dong);background:color-mix(in srgb,var(--t-dong) 15%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.plat{color:var(--t-bkim);background:color-mix(in srgb,var(--t-bkim) 14%,transparent)}
.dcl-root.dcl-root .mdx .lc-tier.diamond{color:var(--t-kc);background:color-mix(in srgb,var(--t-kc) 14%,transparent)}
.dcl-root.dcl-root .mdx .cmp{display:grid;gap:14px}
.dcl-root.dcl-root .mdx .cmp .ct{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:12.5px;color:var(--text-2)}
.dcl-root.dcl-root .mdx .cmp .ct b{font-family:'Barlow Condensed';font-weight:700;font-size:19px;line-height:1;color:var(--text)}
.dcl-root.dcl-root .mdx .cmp .ct b i{font-style:normal;font-size:12px;color:var(--text-3);margin-left:3px}
.dcl-root.dcl-root .mdx .cmp .cb{position:relative;height:6px;border-radius:3px;background:var(--surface-3)}
.dcl-root.dcl-root .mdx .cmp .cb i{position:absolute;left:0;top:0;height:100%;width:var(--w,0%);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),var(--accent));transition:width .25s ease}
.dcl-root.dcl-root .mdx .cmp .cb u{position:absolute;top:-4px;left:var(--x,50%);width:2px;height:14px;border-radius:1px;background:var(--text-2);transition:left .25s ease}
.dcl-root.dcl-root .mdx .cmp .cf{margin-top:7px;font-family:'IBM Plex Mono';font-size:10px;color:var(--text-3)}
.dcl-root.dcl-root .mdx .cmp .cf b{font-family:'IBM Plex Mono';font-weight:700;color:var(--text-2)}


/* từ \3c style> của docs/design/main/main - man login register v1.0.dc.html */
/* Trang này chỉ có 1 màn nên luôn hiện — bằng CSS, không cần JS canh .active. */
  /* Ô nhập 10 số (mẫu A đã chốt): khe gạch chân đều, KHÔNG dùng dot (dot = mã PIN). */
  @keyframes cblink{0%,49%{opacity:1}50%,100%{opacity:.15}}
  .dcl-root.dcl-root .pslot{width:22px;height:34px;display:flex;align-items:flex-end;justify-content:center;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;line-height:1;font-style:normal;
    color:var(--text);border-bottom:2px solid var(--border-strong);transition:border-color .15s ease,color .15s ease}
  .dcl-root.dcl-root .pslot.on{border-bottom-color:var(--accent)}
  .dcl-root.dcl-root .pslot.cursor{border-bottom-color:var(--accent);animation:cblink 1.1s steps(1,end) infinite}
  /* Mã PIN: cùng khe gạch chân với số ĐT (đồng bộ), chỉ thay chữ số bằng dấu che. */
  .dcl-root.dcl-root .pslot.mask{align-items:center;font-size:34px}
  /* Ô tên đăng nhập: cùng ngôn ngữ gạch chân với khe số, không dùng khung input */
  .dcl-root.dcl-root .userfield input::placeholder{color:var(--text-3);font-weight:700}
  .dcl-root.dcl-root .userfield{border-bottom:2px solid var(--border-strong);transition:border-color .15s ease}
  .dcl-root.dcl-root .userfield:focus-within{border-bottom-color:var(--accent)}
  .dcl-root.dcl-root a:hover{color:var(--text)}

/* từ \3c style> của docs/design/main/main - man hoa don (bills) v1.0.dc.html — thu về .dcl-vi */
.dcl-root.dcl-root a:hover{color:var(--text)}
  .dcl-root.dcl-root #hdPick{overflow-x:hidden}
  .dcl-root.dcl-root #hdPick .pick{gap:7px;padding:6px 8px;min-width:0}
  .dcl-root.dcl-root #hdPick .pick .avatar{width:28px;height:28px;font-size:10px}
  .dcl-root.dcl-root #hdPick .pick .nmrow b{font-size:12px}
  .dcl-root.dcl-root #hdPick .pick .gi svg{width:13px;height:13px}
  .dcl-root.dcl-root #hdPick .pick-ck{width:18px;height:18px}
  .dcl-root.dcl-root #hdPick .pick-ck svg{width:10px;height:10px}

  /* ===== (2026-08-19) BẤM ĐƯỢC vs CHỈ ĐỌC — một ngôn ngữ cho cả trang =====
     Viền LIỀN + chevron '›' + nền sáng lên khi hover/nhấn = chạm mở popup chi tiết.
     Viền GẠCH, không chevron, con trỏ mặc định = chỉ để đọc (dòng tổng hợp kỳ, hàng
     bên trong popup, ô số không phải bộ lọc).
     CHỮ DÀI: hàng danh sách vẫn cắt 1 dòng "…" để giữ nhịp; bản ĐẦY ĐỦ đọc trong popup
     -> trong popup không được nowrap/ellipsis ở đâu cả. */
  .dcl-root.dcl-root.dcl-vi .row-card>div{min-width:0;flex-shrink:0}   /* thiếu min-width:0 là chữ dài đẩy tiền + icon ra khỏi card */
  .dcl-root.dcl-root.dcl-vi .row-card>b.tnum{flex:none;white-space:nowrap}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp{cursor:pointer}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp::after{content:'›';flex:none;margin:0 -3px;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;line-height:1;color:var(--text-3);transition:color .15s ease,transform .15s ease}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--accent) 42%,var(--border-strong))}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp:hover::after{color:var(--accent);transform:translateX(2px)}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp:active{background:var(--accent-soft);border-color:var(--accent)}
  .dcl-root.dcl-root.dcl-vi .row-card.tapp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .dcl-root.dcl-root.dcl-vi .row-card.static{cursor:default;background:transparent;border-style:dashed}
  /* hàng chỉ-đọc TRONG popup: cao theo nội dung, đọc đủ chữ, không cắt */
  .dcl-root.dcl-root.dcl-vi .sheet .row-card.static{height:auto;min-height:46px}
  .dcl-root.dcl-root.dcl-vi .sheet .row-card.static b,.dcl-root.dcl-root.dcl-vi .sheet .row-card.static .caption{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  /* ô số: chỉ ô LỌC mới bấm được */
  .dcl-root.dcl-root.dcl-vi .snap{cursor:default}
  .dcl-root.dcl-root.dcl-vi .snap.tapp{cursor:pointer}
  .dcl-root.dcl-root.dcl-vi .snap:not(.tapp){background:transparent;border-style:dashed}
  .dcl-root.dcl-root.dcl-vi .snap.tapp:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border-strong))}
  /* popup = nơi đọc bản đầy đủ */
  .dcl-root.dcl-root.dcl-vi .cd-title,.dcl-root.dcl-root.dcl-vi .cd-cap,.dcl-root.dcl-root.dcl-vi #mgTitle,.dcl-root.dcl-root.dcl-vi #msName,.dcl-root.dcl-root.dcl-vi #msLastMain,.dcl-root.dcl-root.dcl-vi #bsVenue,.dcl-root.dcl-root.dcl-vi #bsTime{white-space:normal;overflow-wrap:anywhere}
  .dcl-root.dcl-root.dcl-vi #bsVenue,.dcl-root.dcl-root.dcl-vi #bsTime{text-align:right}
  .dcl-root.dcl-root.dcl-vi .cd-share-list>div>span:nth-child(2),.dcl-root.dcl-root.dcl-vi #mgShareList>div>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Tailwind-collision guard — see scripts/build-dcl-css.mjs */
.dcl-root .overline { text-decoration: none; }

/* Legacy-leak guard (sinh tự động) — 47 class của design bị luật KHÔNG-scope
   trong src/app/globals.css đè. Xem leakGuard() trong scripts/build-dcl-css.mjs. */
.dcl-root .af{align-items:revert;background:revert;border:revert;border-radius:revert;cursor:revert;display:revert;font-family:revert;gap:revert;overflow:revert;padding:revert;position:revert;text-align:revert;transition:revert;width:revert}
.dcl-root .af-bg{font-family:revert;font-size:revert;font-weight:revert;left:revert;line-height:revert;opacity:revert;pointer-events:revert;position:revert;right:revert;text-align:revert;top:revert;transform:revert;user-select:revert}
.dcl-root .af-nm{color:revert;flex:revert;font-size:revert;font-weight:revert;min-width:revert;overflow:revert;text-overflow:revert;white-space:revert}
.dcl-root .af-ord{color:revert;flex:revert;font-family:revert;font-size:revert;font-weight:revert;text-align:revert;width:revert}
.dcl-root .af-pay{background:revert;border:revert;border-radius:revert;color:revert;cursor:revert;flex:revert;font-family:revert;font-size:revert;font-weight:revert;min-width:revert;padding:revert;text-align:revert}
.dcl-root .af-when{color:revert;flex:revert;font-family:revert;font-size:revert}
.dcl-root .appbar{align-items:revert;background:revert;border-bottom:revert;display:revert;gap:revert;padding:revert}
.dcl-root .avatar{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;display:revert;flex-shrink:revert;justify-content:revert}
.dcl-root .badge{border-radius:revert;display:revert;font-size:revert;font-weight:revert;letter-spacing:revert;padding:revert}
.dcl-root .bc-grid{display:revert;gap:revert;grid-template-columns:revert}
.dcl-root .capbar{background:revert;border-radius:revert;height:revert;overflow:revert}
.dcl-root .capbar i{background:revert;border-radius:revert;display:revert;height:revert}
.dcl-root .costcalc{align-items:revert;display:revert;flex-wrap:revert;gap:revert;margin-top:revert}
.dcl-root .datebox{background:revert;border-radius:revert;flex:revert;padding:revert;text-align:revert}
.dcl-root .dd{display:revert;min-width:revert;position:revert}
.dcl-root .dd-btn{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;cursor:revert;display:revert;font-family:revert;font-size:revert;font-weight:revert;gap:revert;justify-content:revert;padding:revert;white-space:revert;width:revert}
.dcl-root .dd-btn svg{color:revert;flex-shrink:revert;transition:revert}
.dcl-root .dd-item{align-items:revert;border-radius:revert;color:revert;cursor:revert;display:revert;font-size:revert;font-weight:revert;gap:revert;padding:revert;white-space:revert}
.dcl-root .dd-menu{background:revert;border:revert;border-radius:revert;box-shadow:revert;display:revert;left:revert;max-height:revert;overflow-y:revert;padding:revert;position:revert;right:revert;top:revert;z-index:revert}
.dcl-root .ec-a{align-items:revert;background:revert;border:revert;border-radius:revert;cursor:revert;display:revert;flex-direction:revert;font-family:revert;gap:revert;padding:revert;transition:revert;width:revert}
.dcl-root .fab{align-items:revert;background:revert;border:revert;border-radius:revert;box-shadow:revert;color:revert;cursor:revert;display:revert;height:revert;justify-content:revert;position:revert;transition:revert;width:revert;z-index:revert}
.dcl-root .icon-btn{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;cursor:revert;display:revert;flex-shrink:revert;height:revert;justify-content:revert;transition:revert;width:revert}
.dcl-root .mc{background:revert;border:revert;border-radius:revert;padding:revert}
.dcl-root .minibar{align-items:revert;display:revert;gap:revert}
.dcl-root .modal{background:revert;border:revert;border-radius:revert;box-shadow:revert;max-width:revert;padding:revert;width:revert}
.dcl-root .modal h3{color:revert;font-family:revert;font-size:revert;font-weight:revert;letter-spacing:revert;margin-bottom:revert;text-transform:revert}
.dcl-root .modal p{color:revert;font-size:revert;line-height:revert;margin-bottom:revert}
.dcl-root .mvs{align-items:revert;background:revert;border-radius:revert;column-gap:revert;display:revert;grid-template-areas:revert;grid-template-columns:revert;padding:revert;row-gap:revert}
.dcl-root .notif{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;display:revert;font-size:revert;gap:revert;line-height:revert;padding:revert}
.dcl-root .notif b{display:revert;font-size:revert}
.dcl-root .pick-list{display:revert;flex-direction:revert;gap:revert;margin-bottom:revert;overscroll-behavior:revert}
.dcl-root .podium{align-items:revert;display:revert;gap:revert;grid-template-columns:revert;margin-top:revert}
.dcl-root .qbadge{color:revert;flex:revert;font-size:revert;font-weight:revert;white-space:revert}
.dcl-root .qn{color:revert;flex:revert;font-family:revert;font-weight:revert;text-align:revert;width:revert}
.dcl-root .qrow{align-items:revert;background:revert;border-radius:revert;display:revert;gap:revert;padding:revert}
.dcl-root .recap{border:revert;border-radius:revert;overflow:revert}
.dcl-root .screen{display:revert;flex-direction:revert;min-height:revert}
.dcl-root .seg{background:revert;border:revert;border-radius:revert;display:revert;padding:revert}
.dcl-root .seg button{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;cursor:revert;display:revert;flex:revert;font-family:revert;font-size:revert;font-weight:revert;height:revert;justify-content:revert;letter-spacing:revert;min-width:revert;overflow:revert;padding:revert;text-overflow:revert;text-transform:revert;transition:revert;white-space:revert}
.dcl-root .sheet{animation:revert;background:revert;border-radius:revert;bottom:revert;box-shadow:revert;display:revert;flex-direction:revert;left:revert;margin:revert;max-height:revert;max-width:revert;overscroll-behavior:revert;position:revert;right:revert;z-index:revert}
.dcl-root .sheet-handle{display:revert;flex-shrink:revert;justify-content:revert;padding:revert}
.dcl-root .snap{align-items:revert;background:revert;border:revert;border-radius:revert;display:revert;flex-shrink:revert;gap:revert;padding:revert;text-decoration:revert}
.dcl-root .snap b{color:revert;font-family:revert;font-size:revert;font-variant-numeric:revert;font-weight:revert}
.dcl-root .snap span{color:revert;font-size:revert;font-weight:revert;letter-spacing:revert;line-height:revert;text-transform:revert}
.dcl-root .snaprow{display:revert;gap:revert;margin-bottom:revert;overflow-x:revert;padding:revert;scrollbar-width:revert}
.dcl-root .tk-kv{border-bottom:revert;display:revert;font-family:revert;font-size:revert;justify-content:revert;padding:revert;text-decoration:revert}
.dcl-root .tl{position:revert}

/* Anchor guard — nửa text-decoration của luật `a` trong doc; xem scripts/build-dcl-css.mjs */
.dcl-root.dcl-root a { text-decoration: none; }

/* Hiệu ứng tầng app (không có ở nguồn) — xem khối MOTION trong scripts/build-dcl-css.mjs */
@media (prefers-reduced-motion: no-preference) {
  /* 🛑 KHÔNG dùng `fill-mode` (both/forwards). Declaration của animation nằm TRÊN cả
     inline style trong cascade, nên fill-mode giữ `transform` của khung cuối lại VĨNH VIỄN
     và đè chết `style="transform:translateY(...)"` mà DclSheet đặt lúc kéo ⇒ panel đứng im
     dưới ngón tay (cử chỉ vẫn "đúng" vì logic đo bằng toạ độ con trỏ, nên audit popup vẫn
     xanh — đây là ca cổng-xanh-mà-tay-thật-sai, đã đo được 2026-08-18). Không fill-mode thì
     hết animation là property trả về giá trị nền, inline lại ăn bình thường. */
  .dcl-root.dcl-anim .sheetov.on > .sheet { animation: dcl-sheet-in .32s cubic-bezier(.22,.7,.3,1) }
  .dcl-root.dcl-anim .vepop.open .vepop-card,
  .dcl-root.dcl-anim .vepop.open .reg-card { animation: dcl-pop-in .24s cubic-bezier(.22,.7,.3,1) }
  .dcl-root.dcl-anim .toast { animation: dcl-toast-in .25s ease }
  /* Thả tay giữa chừng khi kéo-để-đóng: panel trôi về chỗ cũ thay vì SNAP. DclSheet đặt
     inline `transition:none` trong lúc ngón tay còn chạm, nên rule này chỉ ăn lúc nhả. */
  .dcl-root.dcl-anim .sheetov > .sheet { transition: transform .3s cubic-bezier(.22,.7,.3,1) }
}
@keyframes dcl-sheet-in { from { transform: translateY(100%) } to { transform: none } }
@keyframes dcl-pop-in   { from { transform: translateY(38px) }  to { transform: none } }
@keyframes dcl-toast-in { from { transform: translateY(12px) }  to { transform: none } }