/* Teka Maps — trang quản trị: màu thương hiệu trên nền Metronic + thành phần riêng (toast, hộp thoại, ngăn kéo, thả xuống, biểu đồ).
   Tông sáng cố định (chủ dự án: không theo chế độ tối của máy). Lớp tiện ích Tailwind chỉ dùng loại có sẵn trong metronic/css/styles.css. */
:root {
  --tk-cam: #FF6037; --tk-navy: #082E5E;
  --primary: #F2552C; --primary-foreground: #fff;
}
.tk-logo { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; }
.tk-logo-chu { font-size: 1.25rem; letter-spacing: -.02em; color: var(--tk-navy); font-weight: 500; }
.tk-logo-chu b { color: var(--tk-cam); font-weight: 800; }
.tk-logo-phu { font-size: .75rem; color: var(--muted-foreground); font-weight: 500; }
.kt-sidebar-collapse .tk-logo-phu { display: none; }

.tk-avatar { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary); flex-shrink: 0; }
.tk-tim-nut kbd { font: 500 .7rem/1 ui-sans-serif, system-ui; border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; color: var(--muted-foreground); }
.tk-cham { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--tk-cam); box-shadow: 0 0 0 2px var(--background); }

/* thả xuống */
.tk-tha { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 380px; max-width: calc(100vw - 24px); background: var(--background); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 12px 32px rgba(8, 46, 94, .12); overflow: hidden; }
.tk-tha-phai { width: 240px; }
.tk-tha-muc { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem 1rem; font-size: .875rem; text-align: left; color: var(--foreground); }
.tk-tha-muc:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.tk-tha-muc.text-destructive { color: var(--destructive); }
.tk-tb-ds { max-height: 380px; overflow-y: auto; }
.tk-tb-muc { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-bottom: 1px solid var(--border); }
.tk-tb-muc:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.tk-tb-muc.moi { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.tk-tb-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* toast */
.tk-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.tk-toast { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .9rem; border-radius: .6rem; background: var(--background); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(8, 46, 94, .14); font-size: .875rem; animation: tk-vao .18s ease-out; }
.tk-toast > i { font-size: 1.1rem; margin-top: 1px; }
.tk-toast.ok > i { color: var(--color-green-600, #16a34a); }
.tk-toast.loi { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); }
.tk-toast.loi > i { color: var(--destructive); }
.tk-toast-nd { flex: 1; }
.tk-toast button { color: var(--muted-foreground); }
.tk-toast.di { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes tk-vao { from { opacity: 0; transform: translateY(8px); } }

/* hộp thoại + ngăn kéo */
.tk-khoa-cuon { overflow: hidden; }
.tk-lop { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.tk-lop-nen { position: absolute; inset: 0; background: rgba(8, 20, 40, .45); opacity: 0; transition: opacity .18s; }
.tk-lop.mo .tk-lop-nen { opacity: 1; }
.tk-hop { position: relative; width: 640px; max-width: 100%; max-height: 84vh; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: .18s; box-shadow: 0 24px 60px rgba(8, 46, 94, .2); }
.tk-hop-nho { width: 480px; }
.tk-hop-rong { width: 920px; }
.tk-hop-tim { width: 600px; }
.tk-lop.mo .tk-hop { opacity: 1; transform: none; }
.tk-lop-than { overflow-y: auto; }
.tk-lop-ngan { padding: 0; justify-content: flex-end; align-items: stretch; }
.tk-ngan { position: relative; width: 560px; max-width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; transform: translateX(24px); opacity: 0; transition: .2s; }
.tk-ngan.tk-ngan-rong { width: 760px; }
.tk-lop.mo .tk-ngan { transform: none; opacity: 1; }
.tk-lop.di { opacity: 0; transition: opacity .18s; }
.tk-xn-ic { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary); }
.tk-xn-ic.nguy { background: color-mix(in srgb, var(--destructive) 12%, white); color: var(--destructive); }
.tk-tim-kq { max-height: 52vh; overflow-y: auto; }
.tk-tim-muc { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: .5rem; font-size: .875rem; }
.tk-tim-muc:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.tk-tim-muc b { display: block; font-weight: 500; }
.tk-tim-muc small { display: block; color: var(--secondary-foreground); font-size: .75rem; }

/* bảng, ô số, KPI */
.tk-so { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-phai { text-align: right; }
.tk-mo { color: var(--muted-foreground); }
.tk-ma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.kt-table td, .kt-table th { vertical-align: middle; }
.tk-dong-mo { cursor: pointer; }
.tk-dong-mo:hover td { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tk-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; }
.tk-kpi-the { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.tk-kpi-the .tk-kpi-so { font-size: 1.5rem; font-weight: 600; color: var(--mono, var(--foreground)); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tk-kpi-the .tk-kpi-ten { font-size: .8125rem; color: var(--secondary-foreground); display: flex; align-items: center; gap: .4rem; }
.tk-kpi-the .tk-kpi-phu { font-size: .75rem; color: var(--muted-foreground); }
.tk-luoi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.25rem; }
.tk-luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.tk-bd { min-height: 260px; }
.tk-thanh { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.tk-thanh > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.tk-dang { opacity: .6; pointer-events: none; }
.tk-pre { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--muted); border-radius: .5rem; padding: .75rem; max-height: 360px; overflow: auto; }
.tk-dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .45rem 1rem; font-size: .875rem; }
.tk-dl dt { color: var(--secondary-foreground); }
.tk-dl dd { margin: 0; word-break: break-word; }
.tk-loc { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tk-loc .kt-input, .tk-loc .kt-select { width: auto; min-width: 150px; }
.tk-o-tim { min-width: 240px; }
@media (max-width: 640px) { .tk-luoi-2 { grid-template-columns: 1fr; } .tk-o-tim { min-width: 0; width: 100%; } }
.tk-dn-nen { background: linear-gradient(135deg, color-mix(in srgb, var(--tk-cam) 10%, white), color-mix(in srgb, var(--tk-navy) 8%, white)); }

/* KPI + màu nhấn */
.tk-kpi-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.tk-mau-primary { background: color-mix(in srgb, #FF6037 12%, white); color: #E8492A; }
.tk-mau-success { background: color-mix(in srgb, #17C653 12%, white); color: #0F9C40; }
.tk-mau-info { background: color-mix(in srgb, #1B84FF 12%, white); color: #1B6FD6; }
.tk-mau-violet { background: color-mix(in srgb, #7239EA 12%, white); color: #6127D6; }
.tk-mau-warning { background: color-mix(in srgb, #F6B100 16%, white); color: #B27F00; }
.tk-mau-destructive { background: color-mix(in srgb, #F8285A 12%, white); color: #D81A48; }
.tk-mau-secondary { background: var(--muted); color: var(--secondary-foreground); }
.tk-spark { width: 96px; height: 36px; }
/* bản đồ nhiệt */
.tk-khung-bd { position: relative; height: 380px; border-radius: .6rem; overflow: hidden; background: #F6F4EE; }
.tk-bd-map { position: absolute; inset: 0; }
.tk-bd-tip { position: absolute; z-index: 5; transform: translate(12px, -28px); background: var(--background); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: .75rem; pointer-events: none; white-space: nowrap; }
.tk-bd-rong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, .7); z-index: 4; }
.tk-chu-nhiet { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-foreground); }
.tk-day { display: inline-flex; } .tk-day i { width: 16px; height: 8px; }
.tk-day i:nth-child(1) { background: #FFE3D6; } .tk-day i:nth-child(2) { background: #FFB899; } .tk-day i:nth-child(3) { background: #FF8A5C; } .tk-day i:nth-child(4) { background: #F2552C; } .tk-day i:nth-child(5) { background: #B8300F; }
/* hoạt động trực tiếp */
.tk-nt { display: flex; flex-direction: column; max-height: 430px; overflow-y: auto; }
.tk-nt li { display: grid; grid-template-columns: 28px 1fr auto; gap: .6rem; align-items: start; padding: .5rem 0; border-bottom: 1px dashed var(--border); font-size: .8125rem; }
.tk-nt li.moi { animation: tk-sang 1.6s ease-out; }
@keyframes tk-sang { from { background: color-mix(in srgb, var(--primary) 10%, transparent); } }
.tk-nt .tk-nt-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--muted); }
.tk-nt li.chan .tk-nt-ic { color: var(--destructive); } .tk-nt li.don .tk-nt-ic { color: #0F9C40; } .tk-nt li.fb .tk-nt-ic { color: #B27F00; } .tk-nt li.tra .tk-nt-ic, .tk-nt li.tim .tk-nt-ic { color: #E8492A; }
.tk-nt .ip { display: inline-block; margin-inline-start: .4rem; font-size: .7rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; }
.tk-nt time { font-size: .72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tk-song { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #17C653; margin-inline-start: .35rem; box-shadow: 0 0 0 3px color-mix(in srgb, #17C653 25%, transparent); vertical-align: middle; }
.tk-song.tat { background: var(--muted-foreground); box-shadow: none; }
/* bảng dùng chung */
.tk-bang tbody tr.tk-chon td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.tk-sap { display: inline-flex; align-items: center; gap: .3rem; color: inherit; }
.tk-sap i { opacity: .35; } .tk-sap.asc i, .tk-sap.desc i { opacity: 1; color: var(--primary); }
.tk-hl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.tk-o-tim { display: inline-flex; align-items: center; gap: .4rem; }
.tk-o-tim input { border: 0; outline: 0; background: transparent; width: 100%; }
.tk-hl.hidden, .tk-tha.hidden { display: none; }
.tk-luoi-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.tk-luoi-anh img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.kt-tab-toggle { border-bottom: 2px solid transparent; padding-inline: .25rem; margin-inline-end: 1rem; color: var(--secondary-foreground); }
.kt-tab-toggle.active { border-color: var(--primary); color: var(--primary); font-weight: 500; }
.tk-luoi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 640px) { .tk-luoi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tk-avatar-to { width: 56px; height: 56px; font-size: 1.1rem; }

/* ---- bù lớp tiện ích không có trong Tailwind đã biên dịch của Metronic (soát: api/tests/kiem_lop_admin.py) ---- */
.kt-btn-group { display: inline-flex; flex-wrap: wrap; }
.kt-btn-group > .kt-btn { border-radius: 0; margin-inline-start: -1px; }
.kt-btn-group > .kt-btn:first-child { border-start-start-radius: .5rem; border-end-start-radius: .5rem; margin-inline-start: 0; }
.kt-btn-group > .kt-btn:last-child { border-start-end-radius: .5rem; border-end-end-radius: .5rem; }
.kt-btn-xs { height: 1.5rem; padding-inline: .375rem; font-size: .75rem; }
.kt-footer, .tk-seg-ky, .tk-tha-dong, .mau { }
.\!grid-cols-1 { grid-template-columns: 1fr !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.align-top { vertical-align: top; }
.gap-x-8 { column-gap: 2rem; }
.last\:border-0:last-child { border-width: 0; }
.list-decimal { list-style-type: decimal; } .max-h-\[480px\] { max-height: 480px; } .w-\[260px\] { width: 260px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
@media (min-width: 768px) { .md\:col-span-2 { grid-column: span 2 / span 2; } }
.mt-auto { margin-top: auto; } .ms-3 { margin-inline-start: .75rem; } .opacity-70 { opacity: .7; }
.grid-cols-\[24px_1fr_auto_auto\] { grid-template-columns: 24px 1fr auto auto; }
.-mt-4 { margin-top: -1rem; } .mt-1\.5 { margin-top: .375rem; } .ms-0\.5 { margin-inline-start: .125rem; } .me-auto { margin-inline-end: auto; }
.p-6 { padding: 1.5rem; } .py-12 { padding-block: 3rem; } .py-14 { padding-block: 3.5rem; } .py-16 { padding-block: 4rem; }
.max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .w-\[1\%\] { width: 1%; } .w-\[140px\] { width: 140px; }
.leading-tight { line-height: 1.25; } .whitespace-pre-wrap { white-space: pre-wrap; } .list-disc { list-style: disc; }
.opacity-60 { opacity: .6; } .hover\:opacity-100:hover { opacity: 1; } .hover\:underline:hover { text-decoration: underline; }
.text-success { color: #0F9C40; } .text-info { color: #1B6FD6; }
.kt-wrapper, .kt-container-fixed { min-width: 0; }
body.demo1 > .flex.grow { min-width: 0; }
.mt-0\.5 { margin-top: .125rem; }
.gap-y-1 { row-gap: .25rem; }
.tk-cuon-cao { max-height: 520px; overflow-y: auto; }
.tk-khung-bd-cao { height: 520px; }
.-mt-2 { margin-top: -.5rem; }
.tk-cd-ds { max-height: 640px; overflow-y: auto; }
.tk-cd-muc { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.tk-cd-muc:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.tk-cd-muc.on { background: color-mix(in srgb, var(--primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--primary); }
.break-all { word-break: break-all; }
/* chú thích ApexCharts ở trên / dưới: một hàng, xuống dòng khi hẹp (styles.css của Metronic để flex-direction:column) */
.apexcharts-legend.apx-legend-position-top, .apexcharts-legend.apx-legend-position-bottom { flex-direction: row; flex-wrap: wrap; }
.apexcharts-legend.apx-legend-position-top.apexcharts-align-right { justify-content: flex-end; }

/* ---- Cảnh báo nghi ngờ + Nhật ký tài khoản (nk_tk.js, nk_tk_helper.php) ---- */
.tk-nk-av { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .6875rem; font-weight: 600; background: var(--muted); color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
.tk-nk-av.lon { width: 44px; height: 44px; font-size: .8125rem; }
.tk-nk-av.cao { background: color-mix(in srgb, #F8285A 14%, white); color: #D81A48; }
.tk-nk-av.vua { background: color-mix(in srgb, #F6B100 18%, white); color: #B27F00; }
.tk-nk-av.thap { background: color-mix(in srgb, #1B84FF 12%, white); color: #1B6FD6; }
.tk-nk-the { display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: .75rem; border-inline-start-width: 4px; background: var(--card, var(--background)); }
.tk-nk-the.cao { border-inline-start-color: #F8285A; } .tk-nk-the.vua { border-inline-start-color: #F6B100; } .tk-nk-the.thap { border-inline-start-color: #1B84FF; }
.tk-nk-thanh { display: block; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.tk-nk-thanh i { display: block; height: 100%; border-radius: inherit; background: #1B84FF; }
.tk-nk-thanh.cao i { background: #F8285A; } .tk-nk-thanh.vua i { background: #F6B100; }
.tk-nk-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; border: 1px solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer; transition: border-color .15s, background .15s; }
.tk-nk-chip b { font-weight: 500; } .tk-nk-chip span { color: var(--secondary-foreground); }
.tk-nk-chip .ki-filled { font-size: .9rem; }
.tk-nk-chip.cao .ki-filled { color: #D81A48; } .tk-nk-chip.vua .ki-filled { color: #B27F00; } .tk-nk-chip.thap .ki-filled { color: #1B6FD6; }
.tk-nk-chip:hover, .tk-nk-chip.on { border-color: var(--primary); background: color-mix(in srgb, var(--tk-cam) 6%, white); }
.tk-nk-chip.da { opacity: .6; }
.tk-nk-hop { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; padding: .35rem .7rem; border-radius: .5rem; }
.tk-nk-hop span { color: var(--secondary-foreground); font-size: .75rem; }
.tk-nk-hop.ok { background: color-mix(in srgb, #17C653 10%, white); color: #0F9C40; }
.tk-nk-hop.gay { background: color-mix(in srgb, #F8285A 10%, white); color: #D81A48; }
.tk-nk-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; background: var(--muted); color: var(--secondary-foreground); }
.tk-nk-ic.cam { background: color-mix(in srgb, #FF6037 12%, white); color: #E8492A; } .tk-nk-ic.lam { background: color-mix(in srgb, #1B84FF 12%, white); color: #1B6FD6; }
.tk-nk-ic.do { background: color-mix(in srgb, #F8285A 12%, white); color: #D81A48; } .tk-nk-ic.xanh { background: color-mix(in srgb, #17C653 12%, white); color: #0F9C40; }
.tk-nk-ic.vang { background: color-mix(in srgb, #F6B100 16%, white); color: #B27F00; }
.tk-nk-h { font-size: .8125rem; font-weight: 600; margin-bottom: .6rem; color: var(--foreground); }
.tk-nk-top { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .7rem .4rem .45rem; border: 1px solid var(--border); border-radius: .6rem; font-size: .8125rem; transition: border-color .15s; }
.tk-nk-top:hover { border-color: var(--primary); }
.tk-nk-top em { font-style: normal; font-weight: 600; margin-inline-start: .35rem; font-variant-numeric: tabular-nums; }
.tk-nk-bc-dau { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: .75rem; background: var(--muted); }
.tk-nk-vong .nen { fill: none; stroke: var(--border); stroke-width: 6; }
.tk-nk-vong .cung { fill: none; stroke: #1B84FF; stroke-width: 6; stroke-linecap: round; }
.tk-nk-vong.cao .cung { stroke: #F8285A; } .tk-nk-vong.vua .cung { stroke: #F6B100; }
.tk-nk-vong text { font-size: 15px; font-weight: 700; fill: var(--foreground); }
.tk-nk-nhiet, .tk-nk-luot { width: 100%; height: auto; display: block; }
.tk-nk-nhiet text, .tk-nk-luot text { font-size: 10px; fill: #78829D; }
.tk-nk-nhiet .dem { fill: #F1F1F4; }
.tk-nk-nhiet .o.m0 { fill: #F9F9F9; stroke: #F1F1F4; } .tk-nk-nhiet .o.m1 { fill: #FFE3D9; } .tk-nk-nhiet .o.m2 { fill: #FFB59E; } .tk-nk-nhiet .o.m3 { fill: #FF8762; } .tk-nk-nhiet .o.m4 { fill: #E8492A; }
.tk-nk-cg { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; font-size: .6875rem; color: var(--secondary-foreground); }
.tk-nk-cg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tk-nk-cg i.m0 { background: #F9F9F9; border: 1px solid #F1F1F4; } .tk-nk-cg i.m1 { background: #FFE3D9; } .tk-nk-cg i.m2 { background: #FFB59E; } .tk-nk-cg i.m3 { background: #FF8762; } .tk-nk-cg i.m4 { background: #E8492A; }
.tk-nk-cg-dem { margin-inline-start: .8rem; display: inline-flex; align-items: center; gap: .3rem; } .tk-nk-cg-dem i { background: #F1F1F4; }
.tk-nk-luot rect.cam { fill: #FF8762; } .tk-nk-luot rect.do { fill: #F8285A; }
.tk-nk-luot .tran { stroke: #F8285A; stroke-dasharray: 4 3; } .tk-nk-luot .tran-chu { fill: #D81A48; }
.tk-nk-luot .truc { stroke: #DBDFE9; }
.tk-nk-tg { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--border); margin-inline-start: 46px; }
.tk-nk-tg-ngay { font-size: .75rem; font-weight: 600; color: var(--secondary-foreground); margin: .8rem 0 .4rem -48px; }
.tk-nk-tg-m { display: flex; align-items: flex-start; gap: .6rem; position: relative; padding: .3rem 0 .3rem 0; margin-inline-start: -14px; font-size: .8125rem; }
.tk-nk-tg-m time { position: absolute; inset-inline-start: -46px; top: .55rem; font-size: .6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; width: 40px; text-align: end; }
.tk-nk-tg-m small { display: block; font-size: .6875rem; color: var(--muted-foreground); }