/* Hệ thống vận hành nha khoa (Super VIP) — dùng khung .acct .pnk của bảng quản lý; token màu/phông của dental.css. */
.ops .dside .dbrand .lg { box-shadow: 0 0 0 2px #f3c969; }
.ops .dtop .me .mrole { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 500; line-height: 1.2; }
.ops .dtop .me > span:last-child { display: grid; line-height: 1.2; }
.ops .opsdate { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 9px; }
.ops .dbody { padding-bottom: 96px; }
.opsday { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.opsday b { font-size: 16px; }
.opsday span { color: var(--ink-3); font-size: 12.5px; }
.ops-kpis { grid-template-columns: repeat(4, 1fr); }

/* lịch */
.calbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.calnav, .calopt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.caltitle { font-size: 15px; margin: 0 6px; }
.caljump input { height: 30px; font-size: 12.5px; width: 138px; }
.calsel select { height: 30px; font-size: 12.5px; }
.seg2 a { display: inline-flex; gap: 4px; align-items: center; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-radius: var(--r-s); }
.seg2 a.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.seg2 { display: inline-flex; background: var(--bg-3); border-radius: var(--r); padding: 2px; }
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-scroll { overflow-x: auto; }
.cal-head, .cal-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(52px + var(--cols) * 150px); }
.cal-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.cal-head .chd { padding: 8px 10px; border-left: 1px solid var(--line); display: grid; gap: 1px; align-content: center; min-height: 46px; }
.cal-head .chd b { font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.cal-head .chd small { color: var(--ink-3); font-size: 11px; }
.cal-head .chd.today { background: var(--mint-s); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.cal-body { position: relative; }
.cal-body .tcol { position: relative; background: var(--bg-2); }
.cal-body .tl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.cal-body .tl.hr { border-top: 1px solid var(--line); }
.cal-body .tl:first-child span { top: 2px; }
.cal-body .tl span { position: absolute; top: -7px; right: 6px; background: var(--bg-2); padding: 0 2px; font-size: 10.5px; color: var(--ink-3); }
.cal-body .ccol { position: relative; border-left: 1px solid var(--line); }
.cal-body .ccol.today { background: #fbfffd; }
.cal-body .ccol.none { background: repeating-linear-gradient(135deg, #fff, #fff 8px, #fafbfc 8px, #fafbfc 16px); }
.cal-body .slot { position: absolute; left: 0; right: 0; border-top: 1px dashed #eef1f4; display: block; }
.cal-body .slot.hr { border-top-color: var(--line); }
.cal-body a.slot:hover { background: rgba(12, 156, 121, .09); }
.cal-body a.slot:hover::after { content: '+'; position: absolute; left: 6px; top: 1px; font-size: 14px; color: var(--mint); font-weight: 800; line-height: 1; }
.nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--rose); z-index: 2; pointer-events: none; }
.nowline i { position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.ap { position: absolute; z-index: 1; display: block; overflow: hidden; padding: 3px 6px 3px 8px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--mint)); box-shadow: var(--sh-1); font-size: 11.5px; line-height: 1.25; color: var(--ink); }
.ap b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap small { display: block; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap:hover { z-index: 4; box-shadow: var(--sh-2); }
.ap.st-pending { background: #fff8e8; border-style: dashed; border-left-style: solid; }
.ap.st-arrived { background: #e9f3ff; }
.ap.st-in_treatment { background: #e7f8f2; }
.ap.st-done { background: #f3f5f7; opacity: .8; }
.ap.st-noshow, .ap.st-cancelled { background: #fdf0f1; opacity: .6; text-decoration: line-through; }
.callegend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); background: var(--bg-2); }
.callegend span { display: inline-flex; gap: 5px; align-items: center; }
.callegend .lg { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); background: #fff; }
.callegend .lg.st-pending { background: #fff8e8; } .callegend .lg.st-arrived { background: #e9f3ff; } .callegend .lg.st-in_treatment { background: #e7f8f2; } .callegend .lg.st-done { background: #f3f5f7; } .callegend .lg.st-noshow, .callegend .lg.st-cancelled { background: #fdf0f1; }

/* hộp lịch online */
.opsinbox-list { display: grid; }
.ibx { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); }
.ibx small { display: block; color: var(--ink-3); font-size: 11.5px; }
.ibx .when { font-size: 12px; color: var(--ink-2); display: inline-flex; gap: 4px; align-items: center; }

/* bảng / trạng thái */
.opstbl td small { display: block; color: var(--ink-3); font-size: 11px; }
.opstbl .tm b { display: block; font-size: 13px; }
.opstbl .tm small { font-size: 10.5px; }
.opsact form { display: inline; margin: 0; }
.opsact .btn { height: 28px; font-size: 11.5px; padding: 0 9px; }
.acct .st-run { background: #e8f0fd; color: var(--blue); }
.acct .st-info { background: #eef3fb; color: #3a5a99; }
.acct .st-fin { background: var(--bg-3); color: var(--ink-2); }
.opsrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 960px) { .opsrow2 { grid-template-columns: 1fr; } }
.opsmini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opsmini b { font-size: 20px; display: block; }
.opsmini small { color: var(--ink-3); font-size: 11.5px; }
.opsempty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 16px; color: var(--ink-2); }
.opsempty i { font-size: 34px; color: var(--ink-4); }
.opsempty b { color: var(--ink); font-size: 14px; }
.opsempty span { font-size: 12.5px; max-width: 460px; }

/* biểu mẫu */
.opsform .cb { display: grid; gap: 12px; }
.ofg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.of { display: grid; gap: 4px; align-content: start; }
.of.full { grid-column: 1 / -1; }
.of label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.of label em { color: var(--rose); font-style: normal; }
.of input, .of select, .of textarea { width: 100%; }
.of small { color: var(--ink-3); font-size: 11px; }
.ofa { display: flex; gap: 8px; flex-wrap: wrap; }
.opsnote { display: flex; gap: 8px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; font-size: 12.5px; color: var(--ink-2); }
.opsnote i { color: var(--blue); font-size: 16px; flex: none; margin-top: 1px; }
.opsfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.opsfacts small { display: block; color: var(--ink-3); font-size: 11px; }
.opsfacts b { font-size: 13px; }
.opsacts, .opscontact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.opsacts form { margin: 0; }
.opsremind { border: 1px dashed var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; background: #fcfdfd; }
.opsremind b { font-size: 12.5px; display: flex; gap: 5px; align-items: center; }
.opsremind p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.opsremind small { color: var(--ink-3); font-size: 11px; }
.opsdetail { align-items: start; }
.opslist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; }
.opslist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.opslist li:first-child { border-top: 0; }
.opslist li span { display: inline-flex; gap: 7px; align-items: center; }
.opslist small { color: var(--ink-3); margin-left: 6px; }
.opsadd { display: flex; gap: 8px; flex-wrap: wrap; }
.opsadd input { flex: 1 1 150px; min-width: 0; }
.opslog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.opslog li { display: grid; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.opslog li small { color: var(--ink-3); }

/* cổng (nâng cấp / khoá / bật) */
.opsgate { padding-bottom: 40px; }
.opshero { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: center; border-radius: var(--r); padding: 28px; margin: 14px 0; color: #f4efe0; background: linear-gradient(135deg, #17140c 0%, #2b2410 100%); border: 1px solid #3a2f10; }
.opshero .eyebrow { color: #f3c969; }
.opshero h1 { font-size: 26px; line-height: 1.25; margin: 6px 0 10px; color: #fff; letter-spacing: -.4px; }
.opshero p { color: #d8d0b8; font-size: 14px; line-height: 1.6; margin: 0 0 14px; max-width: 560px; }
.opshero small { display: block; margin-top: 10px; color: #bdb394; font-size: 12px; }
.opshero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.opshero-cta .btn-ghost { color: #f3c969; border-color: #5a4a1d; background: transparent; }
.opshero-art { display: grid; place-items: center; font-size: 110px; color: #f3c969; opacity: .9; }
.opsfeats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.opsfeat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 6px; align-content: start; }
.opsfeat .ic { width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center; font-size: 20px; }
.opsfeat b { font-size: 14px; }
.opsfeat p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.opsnotice { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin: 14px 0; }
.opsnotice.on { border-color: #bfe6da; background: #f6fcfa; }
.opsnotice .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; }
.opsnotice h1 { font-size: 20px; margin: 0 0 6px; }
.opsnotice p { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.opsgate-sw { margin: 10px 0; max-width: 360px; }

/* thanh điều hướng dưới (điện thoại) */
.opsbar { display: none; }
@media (max-width: 960px) {
  .ops-kpis { grid-template-columns: 1fr 1fr; }
  .opshero { grid-template-columns: 1fr; padding: 22px 18px; }
  .opshero-art { display: none; }
  .opsfeats { grid-template-columns: 1fr; }
  .ofg { grid-template-columns: 1fr; }
  .ibx { grid-template-columns: 1fr auto; }
  .ibx .when { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 760px) {
  .ops .dside { display: none; }
  .ops .dtop { height: auto; min-height: 52px; padding: 8px 14px; flex-wrap: wrap; }
  .ops .dtop .opsdate { display: none; }
  .ops .dbody { padding: 14px 12px 96px; }
  .opsbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #17140c; border-top: 1px solid #3a2f10; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .opsbar a { flex: 1; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; font-size: 10.5px; color: #bdb394; position: relative; border-radius: var(--r-s); min-height: 44px; }
  .opsbar a i { font-size: 20px; }
  .opsbar a.on { color: #f3c969; background: rgba(243, 201, 105, .1); }
  .opsbar a em { position: absolute; top: 2px; right: calc(50% - 20px); background: var(--rose); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 800; border-radius: 8px; padding: 0 5px; line-height: 15px; }
  .calbar { align-items: flex-start; }
  .caltitle { width: 100%; order: 5; margin: 2px 0 0; }
  .opstbl .opsact span { display: none; }
  .opsfacts { grid-template-columns: 1fr 1fr; }
}

/* thanh điều hướng của site (mnav) nhường chỗ cho thanh vận hành; cột phụ ẩn trên điện thoại */
.opstbl .sm { display: none; }
@media (max-width: 760px) {
  body.is-ops .mnav { display: none !important; }
  .opstbl .hm { display: none; }
  .opstbl .sm { display: block; }
}

/* bệnh nhân */
.opssearch { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 0 6px 0 10px; height: 36px; flex: 1 1 320px; max-width: 520px; }
.opssearch i { color: var(--ink-3); font-size: 16px; }
.opssearch input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 13px; background: transparent; height: 100%; }
.opstbl small.allergy { color: var(--rose); font-weight: 600; }
.opstbl small.allergy i { margin-right: 3px; }
.opspager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.ptop { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; flex-wrap: wrap; }
.ptop .pav { width: 52px; height: 52px; border-radius: 50%; background: var(--mint-s); color: var(--mint); font-weight: 800; font-size: 17px; display: grid; place-items: center; flex: none; }
.ptop .pinfo { flex: 1 1 240px; min-width: 0; }
.ptop h2 { margin: 0 0 4px; font-size: 18px; }
.ptop .pmeta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.ptop .pmeta span { display: inline-flex; gap: 4px; align-items: center; }
.ptop .pmeta i { color: var(--ink-3); }
.ptop .ptags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.ptop .ptags span { background: var(--bg-3); color: var(--ink-2); font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.ptop .pact { display: flex; gap: 6px; flex-wrap: wrap; }
.opsalert { display: flex; gap: 8px; align-items: flex-start; background: #fdf0f1; border: 1px solid #f5c6cb; color: #8a1c2b; border-radius: var(--r); padding: 9px 12px; font-size: 13px; }
.opsalert i { font-size: 18px; flex: none; }
.opsalert.debt { background: #fff7e8; border-color: #f1d9a6; color: #8a5a00; }
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ptabs a { display: inline-flex; gap: 5px; align-items: center; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.ptabs a.on { color: var(--mint); border-bottom-color: var(--mint); }
.pre { white-space: pre-line; font-weight: 500 !important; }
.teethlegend { display: flex; gap: 6px; flex-wrap: wrap; }
.teethlegend button { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--line); background: #fff; border-radius: 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
.teethlegend button.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); font-weight: 700; }
.teethlegend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); display: inline-block; }
.teethrow { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; position: relative; }
.teethrow::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--line); pointer-events: none; }
.tooth { display: grid; justify-items: center; gap: 2px; cursor: pointer; position: relative; font-size: 10.5px; color: var(--ink-3); }
.tooth b { font-size: 10.5px; }
.tooth .tshape { width: 100%; max-width: 34px; aspect-ratio: 3 / 4; border-radius: 40% 40% 50% 50%; border: 1.5px solid #8a94a6; background: var(--tc, #fff); transition: transform .08s; }
.teethrow.low .tooth .tshape { border-radius: 50% 50% 40% 40%; }
.tooth:hover .tshape { transform: scale(1.1); }
.tooth select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tooth.js select { pointer-events: none; }
.teethnote { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 760px) { .teethrow { grid-template-columns: repeat(8, minmax(0, 1fr)); } .teethrow::after { display: none; } .ptop .pact { width: 100%; } }

/* điều trị / hoá đơn */
.ttotals { display: flex; gap: 8px 22px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-2); }
.ttotals small { display: block; color: var(--ink-3); font-size: 11px; }
.ttotals b { font-size: 15px; }
.titems tr.billed td { opacity: .65; }
.opsinv { display: grid; gap: 8px; border-top: 1px solid var(--line); }
.invlines input, .invlines select { width: 100%; margin: 0 0 4px; }
.noprint { }
.printdoc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px; max-width: 820px; margin: 0 auto; font-size: 13px; line-height: 1.5; color: #111; }
.pd-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; }
.pd-clinic { font-size: 17px; text-transform: uppercase; }
.pd-no { text-align: right; }
.pd-patient { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.pd-patient small { display: block; color: #666; font-size: 11px; }
.pd-tbl { width: 100%; border-collapse: collapse; margin: 6px 0; }
.pd-tbl th, .pd-tbl td { border: 1px solid #999; padding: 5px 8px; text-align: left; font-size: 12.5px; }
.pd-tbl th { background: #f1f1f1; }
.pd-sum { text-align: right; margin: 8px 0; display: grid; gap: 2px; }
.pd-sum .big { font-size: 15px; }
.pd-pay { font-size: 12px; margin: 8px 0; }
.pd-sign { display: flex; justify-content: space-around; text-align: center; margin: 24px 0 8px; min-height: 90px; }
.pd-foot { font-size: 11.5px; color: #555; text-align: center; margin: 6px 0 0; }
@media print {
  body.is-ops .util, body.is-ops header.main, body.is-ops footer, body.is-ops .mnav, body.is-ops .opsbar, body.is-ops .dside, body.is-ops .dtop, body.is-ops .noprint, body.is-ops .flashmsg, body.is-ops #chat-fab, body.is-ops .app-promo-bar, body.is-ops .ptop, body.is-ops .ptabs { display: none !important; }
  body.is-ops .dsh { display: block !important; border: 0 !important; }
  body.is-ops .dbody { padding: 0 !important; }
  .printdoc { border: 0; padding: 0; max-width: none; }
}
@media (max-width: 760px) { .ofg[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; } .ofg[style*="200px 1fr auto"] { grid-template-columns: 1fr !important; } }

/* ô nhập của vận hành: cùng một kiểu */
.of input:not([type=checkbox]):not([type=radio]), .of select, .of textarea, .opsadd input, .invlines input, .invlines select, .caljump input, .calsel select { border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); min-height: 36px; }
.of textarea { min-height: 64px; resize: vertical; }
.of input:focus, .of select:focus, .of textarea:focus, .opsadd input:focus { outline: 2px solid rgba(12, 156, 121, .35); border-color: var(--mint); }

/* nhân sự & báo cáo */
.credbox { display: flex; gap: 12px; align-items: flex-start; background: #f1faf7; border: 1px solid #bfe6da; border-radius: var(--r); padding: 14px 16px; margin-bottom: 4px; }
.credbox > i { font-size: 26px; color: var(--mint); flex: none; }
.credbox p { margin: 4px 0 8px; font-size: 13px; color: var(--ink-2); }
.credgrid { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.credgrid small { display: block; color: var(--ink-3); font-size: 11px; }
.credgrid b { font-size: 15px; }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; user-select: all; }
.shifttbl td input[type=time] { width: 112px; min-height: 34px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 6px; font: inherit; font-size: 13px; }
.chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.rng a { white-space: nowrap; }
.rchart { display: flex; gap: 3px; align-items: flex-end; height: 160px; padding-top: 6px; }
.rchart > div { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; }
.rchart .rb { display: block; background: var(--mint); border-radius: 2px 2px 0 0; opacity: .88; }
.rchart > div:hover .rb { opacity: 1; background: var(--blue); }
.rchart small { font-size: 9.5px; color: var(--ink-3); text-align: center; line-height: 1; }
.hbars { display: grid; gap: 8px; }
.hb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 12.5px; }
.hb .hl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .hv { grid-column: 1 / -1; order: 3; }
.hb .hl small { color: var(--ink-3); margin-left: 5px; }
.hb .hv { background: var(--bg-3); border-radius: 4px; height: 10px; overflow: hidden; }
.hb .hv i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
@media (max-width: 760px) { .rchart { height: 120px; } .rchart small { display: none; } }

/* lối vào Hệ thống vận hành từ bảng quản lý hồ sơ */
.pnk .dside a.opslink { color: #f3c969; background: rgba(243, 201, 105, .08); border: 1px solid rgba(243, 201, 105, .25); margin: 4px 0; }
.pnk .dside a.opslink:hover { background: rgba(243, 201, 105, .16); color: #ffe39a; }

.opsentry { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #17140c, #2b2410); color: #f4efe0; border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; border: 1px solid #3a2f10; }
.opsentry > i:first-child { font-size: 28px; color: #f3c969; }
.opsentry > span { flex: 1; min-width: 0; }
.opsentry b { display: block; font-size: 14px; color: #fff; }
.opsentry small { color: #cfc6a8; font-size: 12px; }
.opsentry > i:last-child { color: #f3c969; font-size: 18px; }

/* ---- nhiều cơ sở: bộ chọn, form cơ sở, ô chọn cơ sở của nhân viên ---- */
.brsw { position: relative; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; }
.brsw.one { gap: 6px; padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); }
.brsw > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); max-width: 240px; }
.brsw > summary::-webkit-details-marker { display: none; }
.brsw > summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brsw > summary i { color: var(--mint); font-size: 16px; flex: none; }
.brsw > summary i:last-child { color: var(--ink-3); font-size: 12px; }
.brsw[open] > summary { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-s); }
.brpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px; display: grid; gap: 2px; }
.brpop a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); color: var(--ink); font-weight: 600; }
.brpop a:hover { background: var(--bg-2); }
.brpop a.on { background: var(--mint-s); color: var(--mint-d); }
.brpop a small { margin-left: auto; color: var(--ink-3); font-weight: 600; }
.brpop a i { color: var(--ink-3); }
.brchecks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.brchecks .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.brform { display: grid; gap: 6px; padding: 8px 0; min-width: 220px; }
.brform .two { display: flex; gap: 6px; }
.brform input { width: 100%; }
@media (max-width: 760px) { .brpop { right: auto; left: 0; } .brsw > summary { max-width: 180px; } }
.opsadd select { flex: 0 1 190px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; font: inherit; font-size: 13px; }

/* ---- tab Website ---- */
.opsform .of .tplpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.opsform .of label.tpl, .opsform .of label.chk { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; width: auto; }
.opsform .of label.tpl { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; cursor: pointer; background: #fff; }
.opsform .of label.tpl:has(input:checked) { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-s); }
.opsform .of label.tpl input, .opsform .of label.chk input[type=checkbox] { width: auto; flex: none; margin: 0; }
.tpl span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tpl span i { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.opsurl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; }
.opsurl a { color: var(--blue); font-weight: 600; word-break: break-all; }
.opsurl i { color: var(--ink-3); }
.dnsstep { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13px; }
.dnsstep code { background: var(--bg-3); padding: 1px 6px; border-radius: 4px; word-break: break-all; font-size: 12px; }