/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CHIA PHÒNG TRỰC — lớp giao diện v4 (17/10/2026) · phủ lên các lớp rd3-* sẵn có trong admin.css
   + khối "Lưu ý từ sheet" (rd3-gc-*) · mọi luật nằm dưới .rd3 ⇒ không đụng trang khác
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.rd3 {
  --rd-vien: #e6e9f2; --rd-nen: #fff; --rd-nen2: #f8fafc; --rd-chu: #0f172a; --rd-chu2: #475569; --rd-chu3: #94a3b8;
  --rd-tim: #6366f1; --rd-vang: #d97706; --rd-vang-nen: #fffbeb; --rd-vang-vien: #fde68a;
}
[data-theme="dark"] .rd3 {
  --rd-vien: #263043; --rd-nen: #1c2230; --rd-nen2: #161b26; --rd-chu: #e2e8f0; --rd-chu2: #cbd5e1; --rd-chu3: #7c8aa3;
  --rd-tim: #818cf8; --rd-vang: #fbbf24; --rd-vang-nen: rgba(245,158,11,.08); --rd-vang-vien: rgba(245,158,11,.3);
}

/* ── Thanh lệnh: viền nhấn gradient bên trái + bóng nhiều lớp ── */
.rd3 .rd3-bar { position: relative; overflow: hidden; border-color: var(--rd-vien);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -22px rgba(79,70,229,.35); }
.rd3 .rd3-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #6366f1, #8b5cf6 60%, #ec4899); }

/* ── Thẻ chỉ số: mỗi thẻ một màu, biểu tượng nền gradient, số to ── */
.rd3 .rd3-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rd3 .rd3-kpi { position: relative; overflow: hidden; padding: 14px 16px; border-radius: 16px; border-color: var(--rd-vien); background: var(--rd-nen);
  box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease; --k1: #6366f1; --k2: #8b5cf6; }
.rd3 .rd3-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--k1), var(--k2)); opacity: .9; }
.rd3 .rd3-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(15,23,42,.35); border-color: color-mix(in srgb, var(--k1) 35%, var(--rd-vien)); }
.rd3 .rd3-kpi-ic { flex: 0 0 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--k1), var(--k2)) !important; color: #fff !important;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--k1) 70%, transparent); font-size: 1rem; }
.rd3 .rd3-kpi-tx b { font-size: 1.45rem; letter-spacing: -.02em; color: var(--rd-chu); }
.rd3 .rd3-kpi-tx span { color: var(--rd-chu2); }
.rd3 .rd3-kpi:nth-child(2) { --k1: #0ea5e9; --k2: #6366f1; }
.rd3 .rd3-kpi:nth-child(3) { --k1: #8b5cf6; --k2: #d946ef; }
.rd3 .rd3-kpi.ok { --k1: #10b981; --k2: #059669; }
.rd3 .rd3-kpi.warn { --k1: #f59e0b; --k2: #d97706; background: linear-gradient(180deg, var(--rd-nen), var(--rd-vang-nen)); }
.rd3 .rd3-kpi.bad { --k1: #ef4444; --k2: #e11d48; background: linear-gradient(180deg, var(--rd-nen), rgba(239,68,68,.05)); }
.rd3 .rd3-kpi.note { --k1: #f59e0b; --k2: #ea580c; }
.rd3 .rd3-kpi:not(.ok):not(.warn):not(.bad):not(.note):nth-child(4),
.rd3 .rd3-kpi:not(.ok):not(.warn):not(.bad):not(.note):nth-child(5) { --k1: #94a3b8; --k2: #64748b; }

/* ── Thanh tab con: nền kính mờ, tab đang chọn có vạch nhấn ── */
.rd3 .rd3-tabs { background: color-mix(in srgb, var(--rd-nen2) 85%, transparent); border: 1px solid var(--rd-vien); padding: 5px; border-radius: 14px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.rd3 .rd3-tab { position: relative; font-weight: 700; color: var(--rd-chu2); }
.rd3 .rd3-tab i { color: var(--rd-chu3); transition: color .15s ease; }
.rd3 .rd3-tab:hover i { color: var(--rd-tim); }
.rd3 .rd3-tab.on { color: #4338ca; }
.rd3 .rd3-tab.on i { color: var(--rd-tim); }
.rd3 .rd3-tab.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
[data-theme="dark"] .rd3 .rd3-tab.on { background: #252c3d; color: #c7d2fe; }

/* ── Thẻ nội dung ── */
.rd3 .rd3-card { border-color: var(--rd-vien); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -24px rgba(15,23,42,.4); }
.rd3 .rd3-card-h > i { background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
[data-theme="dark"] .rd3 .rd3-card-h > i { background: rgba(99,102,241,.16); color: #a5b4fc; }

/* ══ LƯU Ý TỪ SHEET ══ */
.rd3 .rd3-gc { border-color: var(--rd-vang-vien); background: linear-gradient(180deg, var(--rd-vang-nen), var(--rd-nen) 120px); }
.rd3 .rd3-gc > summary { flex-wrap: wrap; row-gap: 2px; }
.rd3 .rd3-gc > summary > i { width: 30px; height: 30px; border-radius: 10px; display: inline-grid; place-items: center; color: #fff; font-size: .8rem;
  background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 6px 14px -6px rgba(234,88,12,.55); }
.rd3 .rd3-gc > summary small { flex-basis: 100%; margin-left: 39px; font-size: .72rem; font-weight: 500; color: var(--rd-chu3); }
.rd3 .rd3-gc-n { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; }
[data-theme="dark"] .rd3 .rd3-gc-n { background: rgba(245,158,11,.18); color: #fcd34d; }
.rd3 .rd3-gc-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.rd3 .rd3-gc-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rd3 .rd3-gc-search { flex: 1 1 220px; max-width: 360px; }
.rd3 .rd3-gc-tools .rd3-seg b { font-weight: 800; margin-left: 3px; opacity: .75; }
.rd3 .rd3-gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rd3 .rd3-gc-room { min-width: 0; background: var(--rd-nen); border: 1px solid var(--rd-vien); border-radius: 14px; padding: 10px 12px 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.rd3 .rd3-gc-room:hover { border-color: var(--rd-vang-vien); box-shadow: 0 10px 22px -18px rgba(217,119,6,.55); transform: translateY(-1px); }
.rd3 .rd3-gc-room header { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 6px; }
.rd3 .rd3-gc-room header b { flex: 1; min-width: 0; font-size: .8rem; font-weight: 800; color: var(--rd-chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd3 .rd3-gc-num { flex: none; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 7px; display: inline-grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.rd3 .rd3-gc-sec { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #4338ca; }
[data-theme="dark"] .rd3 .rd3-gc-sec { background: rgba(99,102,241,.18); color: #c7d2fe; }
.rd3 .rd3-gc-room ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rd3 .rd3-gc-room li { display: flex; align-items: flex-start; gap: 7px; padding: 6px 8px; border-radius: 9px; background: var(--rd-vang-nen);
  border-left: 3px solid #f59e0b; font-size: .76rem; line-height: 1.45; color: var(--rd-chu); }
.rd3 .rd3-gc-room li > i { flex: none; margin-top: 3px; font-size: .68rem; color: var(--rd-vang); }
.rd3 .rd3-gc-tx { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rd3 .rd3-gc-room li small { flex: none; margin-top: 2px; font-size: .6rem; font-weight: 700; color: var(--rd-chu3); font-variant-numeric: tabular-nums; }
.rd3 .rd3-gc-room li.dung { background: rgba(99,102,241,.06); border-left-color: #818cf8; }
.rd3 .rd3-gc-room li.dung > i { color: var(--rd-tim); }
.rd3 .rd3-gc-tag { flex: none; font-style: normal; font-size: .6rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-top: 1px;
  background: #e0e7ff; color: #4338ca; white-space: nowrap; }
[data-theme="dark"] .rd3 .rd3-gc-tag { background: rgba(99,102,241,.22); color: #c7d2fe; }
.rd3 .rd3-gc-empty { padding: 22px; text-align: center; color: var(--rd-chu3); font-size: .78rem; }
.rd3 .rd3-gc-empty i { display: block; font-size: 1.6rem; color: #cbd5e1; margin-bottom: 6px; }
/* dấu lưu ý cạnh tên phòng ở danh sách khung chưa có người */
.rd3-gc-dau { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 800;
  background: #fef3c7; color: #92400e; cursor: help; vertical-align: middle; }
[data-theme="dark"] .rd3-gc-dau { background: rgba(245,158,11,.18); color: #fcd34d; }

/* ── Đáp ứng ── */
@media (max-width: 1279px) { .rd3 .rd3-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .rd3 .rd3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .rd3 .rd3-gc-body { padding: 0 12px 14px; }
  .rd3 .rd3-gc-search { max-width: none; flex-basis: 100%; }
  .rd3 .rd3-gc-tools .rd3-seg { width: 100%; overflow-x: auto; }
  .rd3 .rd3-gc-grid { grid-template-columns: minmax(0, 1fr); }
  .rd3 .rd3-gc > summary small { margin-left: 0; }
  .rd3 .rd3-tab.on::after { display: none; }
}
@media (max-width: 480px) {
  .rd3 .rd3-kpi { padding: 12px; gap: 10px; }
  .rd3 .rd3-kpi-ic { flex-basis: 36px; height: 36px; }
  .rd3 .rd3-kpi-tx b { font-size: 1.2rem; }
}

/* ══ Popup Cảnh báo phân trực (gắn ở body, ngoài .rd3) — 17/10 b ══ */
.rd3-os-slot .rd3-os-goc { font-size: .66rem; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.rd3-wpop-meo { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a !important; }
.rd3-wpop-meo i { color: #2563eb; margin-top: 2px; }
.rd3-unk-boqua { margin-left: auto; flex: none; min-height: 32px !important; padding: 0 11px !important; font-size: .74rem !important; }
.rd3-unk-boqua:hover { background: #f1f5f9 !important; color: #334155 !important; }
[data-theme="dark"] .rd3-wpop-meo { background: rgba(37,99,235,.12); border-color: rgba(96,165,250,.3); color: #bfdbfe !important; }
[data-theme="dark"] .rd3-wpop-meo i { color: #93c5fd; }
[data-theme="dark"] .rd3-unk-boqua:hover { background: #263043 !important; color: #e2e8f0 !important; }
@media (max-width: 480px) { .rd3-unk-boqua { padding: 0 9px !important; } }

/* ── MỞ SỚM THEO PHIÊN — AIR TEASING (17/10 c) ───────────────────────────── */
.rd3-ts .rd3-card-h .rd3-ts-n:not(:empty) { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fce7f3; color: #be185d; font-size: .68rem; font-weight: 800; }
.rd3-ts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rd3-ts-trong { padding: 12px 14px; border: 1.5px dashed #e2e8f0; border-radius: 12px; color: #64748b; font-size: .78rem; display: flex; gap: 8px; align-items: center; }
.rd3-ts-trong i { color: #ec4899; }
.rd3-ts-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 116px minmax(180px, 2fr) 36px; gap: 8px 10px; align-items: end;
  padding: 10px 12px; border: 1px solid #fbcfe8; border-left: 4px solid #ec4899; border-radius: 12px; background: linear-gradient(90deg, #fdf2f8, #fff 55%); }
.rd3-ts-o { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.rd3-ts-o > span:first-child { font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #9d174d; }
.rd3-ts-o .ss-input { width: 100%; min-width: 0; height: 34px; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 0 10px; font-size: .8rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.rd3-ts-o .ss-input:focus { outline: 0; border-color: #f472b6; box-shadow: 0 0 0 3px rgba(236,72,153,.14); }
.rd3-ts-num { position: relative; display: block; }
.rd3-ts-num .ss-input { padding-right: 42px; }
.rd3-ts-num em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .7rem; color: #94a3b8; pointer-events: none; }
.rd3-ts-xoa { width: 34px; height: 34px; border: 1px solid #fecaca; border-radius: 10px; background: #fff; color: #dc2626; cursor: pointer; transition: all .15s ease; }
.rd3-ts-xoa:hover { background: #fef2f2; transform: translateY(-1px); }
.rd3-ts-xoa:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.rd3-ts-khop { grid-column: 1 / -1; font-size: .72rem; color: #94a3b8; line-height: 1.45; }
.rd3-ts-khop.ok { color: #047857; }
.rd3-ts-khop.ok i { color: #10b981; }
.rd3-ts-khop.none { color: #b45309; }
.rd3-ts-khop b { color: #0f172a; }
.rd3-ts-goiy:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.rd3-ts-gy-t { font-size: .72rem; font-weight: 700; color: #7c3aed; }
.rd3-ts-gy { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; padding: 3px 10px; border: 1px solid #ddd6fe; border-radius: 999px; background: #f5f3ff; color: #5b21b6; font-size: .74rem; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.rd3-ts-gy small { font-weight: 600; color: #7c3aed; opacity: .85; }
.rd3-ts-gy:hover { background: #ede9fe; transform: translateY(-1px); }
.rd3-ts-gy:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
/* nhãn PHIÊN trên khung chưa có người + loại ca mới */
.ss-rd-unf-pick .ss-rd-unf-live { font-size: .66rem; font-weight: 800; padding: 0 6px; border-radius: 5px; background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.ss-rd-unf-pick .ss-rd-unf-tag.t-moTeasing { background: #fce7f3; color: #be185d; }
.ss-rd-unf-pick .ss-rd-unf-tag.t-chuyenLive { background: #ede9fe; color: #6d28d9; }
[data-theme="dark"] .rd3-ts-row { background: linear-gradient(90deg, rgba(236,72,153,.1), transparent 60%); border-color: rgba(236,72,153,.3); }
[data-theme="dark"] .rd3-ts-o > span:first-child { color: #f9a8d4; }
[data-theme="dark"] .rd3-ts-o .ss-input, [data-theme="dark"] .rd3-ts-xoa { background: var(--th-surface, #1e293b); border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .rd3-ts-xoa { color: #fca5a5; }
[data-theme="dark"] .rd3-ts-khop b { color: #e2e8f0; }
[data-theme="dark"] .rd3-ts-khop.ok { color: #6ee7b7; }
[data-theme="dark"] .rd3-ts-trong { border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .rd3-ts-gy { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); color: #ddd6fe; }
[data-theme="dark"] .rd3-ts-gy small { color: #c4b5fd; }
[data-theme="dark"] .rd3-ts .rd3-card-h .rd3-ts-n:not(:empty) { background: rgba(236,72,153,.2); color: #f9a8d4; }
[data-theme="dark"] .ss-rd-unf-pick .ss-rd-unf-live { background: rgba(8,145,178,.18); border-color: rgba(34,211,238,.3); color: #67e8f9; }
[data-theme="dark"] .ss-rd-unf-pick .ss-rd-unf-tag.t-moTeasing { background: rgba(236,72,153,.2); color: #f9a8d4; }
[data-theme="dark"] .ss-rd-unf-pick .ss-rd-unf-tag.t-chuyenLive { background: rgba(139,92,246,.22); color: #c4b5fd; }
@media (max-width: 767px) {
  .rd3-ts-row { grid-template-columns: 104px minmax(0, 1fr) 36px; }
  .rd3-ts-ten { grid-column: 1 / 3; grid-row: 1; }
  .rd3-ts-xoa { grid-column: 3; grid-row: 1; }
  .rd3-ts-ph { grid-column: 1; grid-row: 2; }
  .rd3-ts-note { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .rd3-ts-row { grid-template-columns: 92px minmax(0, 1fr) 34px; padding: 9px 10px; gap: 8px; }
  .rd3-ts-o .ss-input { font-size: 16px; }
}
/* chọn grade cho luật air teasing (17/10 d) */
.rd3-ts-gr { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.rd3-ts-gr-t { font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #9d174d; }
.rd3-ts-gr-t small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #94a3b8; margin-left: 4px; }
.rd3-ts-gr-hint { font-size: .72rem; color: #94a3b8; }
.rd3-ts-gr-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.rd3-ts-gr-c, .rd3-ts-gr-bo { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.rd3-ts-gr-c i { font-size: .6rem; color: #94a3b8; }
.rd3-ts-gr-c b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #be185d; font-size: .62rem; }
.rd3-ts-gr-c:hover, .rd3-ts-gr-bo:hover { border-color: #f9a8d4; transform: translateY(-1px); }
.rd3-ts-gr-c.on { background: linear-gradient(135deg, #ec4899, #db2777); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(219,39,119,.25); }
.rd3-ts-gr-bo { border-style: dashed; color: #64748b; }
.rd3-ts-gr-c:focus-visible, .rd3-ts-gr-bo:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(236,72,153,.18); }
[data-theme="dark"] .rd3-ts-gr-t { color: #f9a8d4; }
[data-theme="dark"] .rd3-ts-gr-c, [data-theme="dark"] .rd3-ts-gr-bo { background: var(--th-surface, #1e293b); border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .rd3-ts-gr-c.on { background: linear-gradient(135deg, #db2777, #be185d); color: #fff; }
@media (max-width: 767px) { .rd3-ts-gr { grid-row: 3; } }
@media (max-width: 480px) { .rd3-ts-gr-c, .rd3-ts-gr-bo { min-height: 32px; } }