/* 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:11px; color: var(--ink-3); font-weight: var(--fw-medium); 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: 13px; }
.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: 13px; width: 138px; }
.calsel select { height: 30px; font-size: 13px; }
.seg2 a { display: inline-flex; gap: 4px; align-items: center; padding: 5px 11px; font-size: 13px; font-weight: var(--fw-semi); 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: 13px; 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:11px; 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: var(--fw-semi); 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: 11px; line-height: 1.25; color: var(--ink); }
.ap b { display: block; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap small { display: block; color: var(--ink-3); font-size:11px; 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: 11px; }
.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:11px; }
.opsact form { display: inline; margin: 0; }
.opsact .btn { height: 28px; font-size: 11px; 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: 11px; }
.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: 13px; 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: var(--fw-semi); 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: 13px; 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: 13px; display: flex; gap: 5px; align-items: center; }
.opsremind p { margin: 0; font-size: 13px; 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: 13px; }
.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: 13px; 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: 13px; 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) {
  .acct.ops .dside { display: none !important; } /* thắng luật .acct .dside!important của p-mobile.css: vận hành dùng thanh dưới đáy (.opsbar) */
  .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:11px; 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:11px; font-weight: var(--fw-semi); 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: var(--fw-semi); }
.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: var(--fw-semi); 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: 13px; 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: var(--fw-semi); 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: var(--fw-medium) !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: var(--fw-semi); }
.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:11px; color: var(--ink-3); }
.tooth b { font-size:11px; }
.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: 13px; }
.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: 11px; 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:11px; 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: 13px; }
.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: var(--fw-semi); }
.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: var(--fw-semi); }
.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: var(--fw-semi); }
.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: var(--fw-semi); }
.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: var(--fw-semi); 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: var(--fw-semi); 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; }

/* Tab hồ sơ công khai (có .in) tự vẽ gạch cam bằng ::after — bỏ gạch xanh của tab vận hành để khỏi chồng 2 gạch */
.ptabs .in a, .ptabs .in a.on { border-bottom: 0; }
.ptabs .in a.on { color: var(--ink); }
.ptabs .in { overflow-x: auto; }

/* khung dịch vụ tính thêm: phân quyền chi nhánh độc lập */
.indepbox .indepl{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.indepbox .indepl li{display:flex;gap:7px;align-items:flex-start}
.indepbox .indepl i{color:var(--mint);margin-top:2px}

/* tab Website: chọn mẫu giao diện (thẻ xem trước), chọn banner */
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tplc{position:relative;display:grid;gap:8px;padding:10px;border:2px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.tplc:hover{border-color:var(--c)}
.tplc:has(input:checked){border-color:var(--c);box-shadow:0 0 0 3px var(--cs)}
.tplc input{position:absolute;opacity:0;pointer-events:none}
.tplc .mock{display:grid;grid-template-rows:12px 62px 22px;gap:4px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);padding:5px}
.tplc .mh{display:flex;gap:3px;align-items:center}.tplc .mh u{height:4px;width:16px;border-radius:2px;background:#cfd6e2}.tplc .mh u:first-child{background:var(--c);width:20px}
.tplc .mb{display:grid;grid-template-columns:1.1fr .9fr;gap:5px;border-radius:6px;padding:6px;background:var(--cs)}
.tplc .mb b{display:block;height:6px;border-radius:3px;background:var(--ink);opacity:.8}.tplc .mb b+b{width:70%;opacity:.35}
.tplc .mb em{grid-column:2;grid-row:1/3;border-radius:7px;background:var(--c)}
.tplc .ml{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.tplc .ml b{border-radius:4px;background:var(--cs);border:1px solid var(--line)}
.tplc.lay-split .mb{grid-template-columns:1fr 1fr;padding:0}.tplc.lay-split .mb em{border-radius:0;grid-row:1/3}
.tplc.lay-modern .mb{background:var(--c);position:relative}.tplc.lay-modern .mb em{display:none}.tplc.lay-modern .mb b{background:#fff}
.tplc.lay-lux .mock{background:#0f0d08;border-color:#2a2518}.tplc.lay-lux .mb{background:#17140c}.tplc.lay-lux .mb b{background:#f6f0dc}.tplc.lay-lux .ml b{background:#17140c;border-color:#2a2518}
.tplc.lay-friendly .mb em{border-radius:50%}.tplc.lay-elegant .mb em{border-radius:30px 30px 4px 4px}
.tplc .tn{display:grid;gap:1px}.tplc .tn b{font-size:13px}.tplc .tn small{font-size:11px;color:var(--ink-3);line-height:1.35}
.bnrpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bp{position:relative;display:grid;gap:4px;padding:8px;border:2px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.bp:has(input:checked){border-color:var(--mint,#0c9c79);box-shadow:0 0 0 3px var(--mint-s,#e2f4ee)}
.bp input{position:absolute;opacity:0;pointer-events:none}
.bp .bpv{height:74px;border-radius:7px;background:#e8edf3 center/cover no-repeat}
.bp .bpv.bd{display:grid;place-items:center;background:linear-gradient(145deg,#0c9c79,#065c49);color:#fff;font-size:34px}
.bp b{font-size:13px}.bp small{font-size:11px;color:var(--ink-3);line-height:1.3}

/* Labo / Kho / Nhắc tái khám */
.opssearch select{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 8px;font:inherit;font-size:13px}
.opsdl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 12px;font-size:13px}
.opsdl dt{color:var(--ink-3);font-weight:var(--fw-semi)}.opsdl dd{margin:0}
.opstbl small{display:block;color:var(--ink-3);font-size:11px}
.opstbl td form.inl{display:inline}
.phfile{display:grid;gap:4px;align-content:start;font-size:12px}
.phfile img,.phfile .pdf{display:grid;place-items:center;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#0f1722;border:1px solid var(--line);color:#fff;font-size:42px}
.phfile small{color:var(--ink-3)}
/* SEO tự động (tab Website) */
.seoscore{display:inline-flex;align-items:baseline;gap:4px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:var(--fw-semi);background:var(--bg-2);border:1px solid var(--line)}
.seoscore b{font-size:18px}
.seoscore.sc-a{background:var(--mint-s);color:var(--mint)}
.seoscore.sc-b{background:#eef6ff;color:var(--blue)}
.seoscore.sc-c{background:#fff6e5;color:#b7791f}
.seoscore.sc-d{background:#fdecee;color:var(--rose)}
.seochk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 18px}
.seochk li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}
.seochk li i{font-size:18px;flex:none;margin-top:1px}
.seochk li.ok i{color:var(--mint)}.seochk li.no i{color:#d98a1c}
.seochk small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}

/* Thanh dưới đáy của vận hành trên điện thoại: 14 mục → cuộn ngang, nhãn một dòng (không bóp hẹp rồi xuống dòng từng chữ) */
@media (max-width: 760px) {
  .opsbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .opsbar::-webkit-scrollbar { display: none; }
  .opsbar a { flex: 0 0 auto; min-width: 66px; padding: 6px 8px; white-space: nowrap; scroll-snap-align: center; }
  .opsbar a span { font-size:11px; }
  .opsbar a em { right: 8px; }
}
@media (max-width: 760px) {
  /* bảng rộng (nhân sự, thu tiền, báo cáo…): cuộn ngang trong thẻ thay vì bị cắt mất cột bên phải */
  .ops .card table, .ops .opstbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ops .hsearch { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* T2-004: bảng vận hành trên điện thoại bị ép min-width 520px (luật .pnk .tscroll .tbl) nên cột "Công nợ", "Trạng thái" nằm ngoài màn hình dù đã ẩn bớt cột phụ (.hm).
   Bỏ ép ở bảng thường; bảng có ô nhập vẫn giữ rộng để thao tác được. */
@media (max-width: 640px) {
  .ops .tscroll .tbl.opstbl:not(:has(input)):not(:has(select)) { min-width: 0; }
  .ops .opstbl th, .ops .opstbl td { padding-left: 6px; padding-right: 6px; }
  .ops .opstbl td { font-size: 13px; }
  .ops .opstbl td:first-child, .ops .opstbl th:first-child { padding-left: 10px; }
  .ops .opstbl td b { font-size: 13px; }
  .ops .opstbl td small.sm { margin-top: 2px; }
  .ops .opstbl td small.sm .st { white-space: normal; font-size:11px; padding: 1px 5px; line-height: 1.25; max-width: 72px; display: inline-block; }
}

/* T2-005: ô tìm/lọc của vận hành trên điện thoại — Kho (tìm + nhóm + "chỉ sắp hết" + Lọc) bị nén, ô tìm chỉ còn biểu tượng; nút Tìm tràn mép */
@media (max-width: 640px) {
  .opssearch { height: auto; min-height: 40px; flex-wrap: wrap; padding: 4px 6px 4px 10px; row-gap: 6px; max-width: 100%; box-sizing: border-box; }
  .opssearch input:not([type=checkbox]):not([type=hidden]) { flex: 1 1 150px; min-height: 30px; }
  .opssearch select { flex: 1 1 130px; min-height: 36px; }
  .opssearch label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 36px; }
  .opssearch .btn { flex: none; min-height: 34px; }
}

/* ===== Khung "phần mềm" vận hành: thanh ứng dụng tối + thanh chức năng + vùng làm việc xám nhạt (KHÁC bảng quản lý hồ sơ) ===== */
:root { --oa-bar: #0f1c2e; --oa-bar-2: #17283f; --oa-nav: #f4f6fa; --oa-gold: #f3c969; --oa-work: #eaeef4; }
body.is-ops { background: var(--oa-work); }
body.is-ops footer, body.is-ops .app-promo-bar { display: none; }
.opsapp { display: flex; flex-direction: column; min-height: 100dvh; max-width: none; padding: 0; margin: 0; width: 100%; }
.oapp-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px; background: var(--oa-bar); color: #e8edf6; border-bottom: 2px solid var(--oa-gold); }
.oapp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; flex: 0 1 270px; }
.oapp-brand .lg { width: 34px; height: 34px; border-radius: 9px; background: #17140c; color: var(--oa-gold); display: grid; place-items: center; font-size: 19px; flex: none; box-shadow: 0 0 0 2px var(--oa-gold); }
.oapp-brand b { display: block; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 205px; }
.oapp-brand small { display: block; font-size: 11px; color: #9fb0c8; line-height: 1.2; }
.oapp-ctx { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.oapp-bar .brsw, .oapp-bar .opsdate, .oapp-clinic select { background: var(--oa-bar-2); border: 1px solid #2b4263; color: #e8edf6; border-radius: 8px; font-size: 13px; height: 32px; }
.oapp-bar .brsw summary, .oapp-bar .brsw.one { color: #e8edf6; }
.oapp-bar .brsw.one { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.oapp-bar .opsdate { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.oapp-clinic { margin: 0; } .oapp-clinic select { padding: 0 8px; }
.oapp-end { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.oapp-exit { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; color: #c9d5e8; font-size: 13px; text-decoration: none; }
.oapp-exit:hover { background: var(--oa-bar-2); color: #fff; }
.oapp-exit i { font-size: 16px; color: var(--oa-gold); }
.oapp-bar .me, .oapp-bar .me * { color: #e8edf6; }
.oapp-bar .me .mrole { color: #9fb0c8; }
.oapp-bar .me .av { background: var(--oa-gold); color: #17140c; }
.oapp-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.oapp-nav { flex: 0 0 188px; position: sticky; top: 54px; align-self: flex-start; height: calc(100dvh - 54px); overflow-y: auto; scrollbar-width: none; background: var(--oa-nav); border-right: 1px solid #d8dfea; padding: 10px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.oapp-nav::-webkit-scrollbar { display: none; }
.oapp-nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; color: #3a4a63; font-size: 13px; font-weight: var(--fw-semi); text-decoration: none; position: relative; transition: background .15s, color .15s; }
.oapp-nav a i { font-size: 18px; color: #6b7d99; flex: none; }
.oapp-nav a:hover { background: #e4e9f2; color: #0f1c2e; }
.oapp-nav a.on { background: var(--oa-bar); color: #fff; }
.oapp-nav a.on i { color: var(--oa-gold); }
.oapp-nav a em { margin-left: auto; background: var(--rose); color: #fff; font-style: normal; font-size: 11px; font-weight: var(--fw-semi); border-radius: 9px; padding: 0 6px; line-height: 17px; }
.oapp-foot { margin-top: auto; padding-top: 12px; }
.oapp-foot .care { display: grid; gap: 3px; background: #fff; border: 1px solid #d8dfea; border-radius: 10px; padding: 10px; font-size: 12px; color: #3a4a63; }
.oapp-foot .care a { height: auto; padding: 2px 0; font-size: 13px; color: var(--mint); font-weight: var(--fw-semi); }
.oapp-main { flex: 1; min-width: 0; }
.oapp-title { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; }
.oapp-title h1 { margin: 0; font-size: 20px; font-weight: var(--fw-semi); letter-spacing: -.4px; display: flex; align-items: center; gap: 8px; color: #0f1c2e; }
.oapp-title h1 i { color: var(--mint); font-size: 20px; }
.opsapp .dbody { padding: 12px 20px 60px; }
/* vùng làm việc dày hơn, giống phần mềm: thẻ phẳng viền mảnh, bảng gọn, KPI nhỏ */
.opsapp .card { border-radius: 10px; box-shadow: none; border: 1px solid #d8dfea; }
.opsapp .tbl th { background: #f1f4f9; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5a6b86; }
.opsapp .tbl td, .opsapp .tbl th { padding-top: 7px; padding-bottom: 7px; }
.opsapp .tbl tbody tr:hover td { background: #f6f9fd; }
@media (max-width: 960px) { .oapp-nav { flex-basis: 60px; } .oapp-nav a span { display: none; } .oapp-nav a { justify-content: center; padding: 0; } .oapp-nav a em { position: absolute; top: 2px; right: 2px; margin: 0; } .oapp-foot { display: none; } .oapp-exit span, .oapp-brand small { display: none; } }
@media (max-width: 760px) {
  .oapp-bar { height: auto; min-height: 50px; flex-wrap: wrap; padding: 6px 12px; gap: 6px 8px; }
  .oapp-brand { flex: 1 1 auto; } .oapp-ctx { order: 3; flex: 1 1 100%; flex-wrap: wrap; } .oapp-bar .opsdate { display: none; } .oapp-exit { display: none; }
  .oapp-nav { display: none; }
  .oapp-title { padding: 12px 12px 0; } .opsapp .dbody { padding: 10px 12px 96px; }
}
@media print { .oapp-bar, .oapp-nav, .oapp-title, .opsbar { display: none !important; } .opsapp .dbody { padding: 0 !important; } body.is-ops { background: #fff; } }
.opsapp { --lv: #0c9c79; --lv-d: #077a5f; }
.opsapp .btn-mint { background: #0c9c79; border-color: #0c9c79; color: #fff; }
.opsapp .btn-mint:hover { background: #077a5f; }
.oapp-bar .brsw summary { background: none; color: #e8edf6; padding: 0 10px; height: 30px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.oapp-bar .brsw summary b, .oapp-bar .brsw summary i { color: #e8edf6; }
.oapp-bar .brsw { position: relative; }
.oapp-bar .brpop { background: #fff; } .oapp-bar .brpop a, .oapp-bar .brpop a * { color: #1b2a41; }
.oapp-bar .me { display: inline-flex; align-items: center; gap: 8px; }
.oapp-bar .me > span:last-child { display: grid; line-height: 1.2; font-size: 13px; font-weight: var(--fw-semi); }
.oapp-bar .me .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-semi); }
body.is-ops .hdr-toggle { display: none !important; } /* thanh ứng dụng vận hành đã có đủ lối đi; nút mở lại đầu trang website không cần */
body.is-ops .focus-foot { left: 188px; }
/* Nhân sự – lương: tiêu đề phụ trong biểu mẫu hồ sơ */
.hrsub { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; font-size: 14px; font-weight: var(--fw-semi); color: var(--ink); }
.hrsub i { color: var(--mint-d, #0a7); font-size: 18px; }