/* Bống Work — mockup dự án V3: HTML/CSS thuần, ẩn danh, palette navy/teal. Không ảnh. */
.mk { font-size: 12px; color: var(--gray-900); line-height: 1.4; }
.mk-desktop { border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px rgba(8,32,84,.6); }
.mk-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); font: 500 11px/1 var(--font-mono); color: var(--gray-500); }
.mk-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.mk-top span { margin-left: 8px; }
.mk-shell { display: grid; grid-template-columns: 124px 1fr; min-height: 250px; }
.mk-side { background: var(--navy-900); color: var(--navy-200); padding: 12px 10px; font-size: 11px; display: grid; align-content: start; gap: 4px; }
.mk-side b { color: #fff; font-size: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.mk-side b::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--teal-500); }
.mk-side span { display: flex; justify-content: space-between; padding: 5px 7px; border-radius: 6px; }
.mk-side span.on { background: rgba(255,255,255,.1); color: #fff; }
.mk-side span em { font-style: normal; background: var(--teal-500); color: var(--navy-950); border-radius: 999px; padding: 0 6px; font-weight: 700; }
.mk-main { padding: 12px; display: grid; gap: 10px; align-content: start; }
.mk-h { font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.mk-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-kpi div { border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size: 10.5px; color: var(--gray-500); }
.mk-kpi b { display: block; color: var(--navy-900); font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mk-kpi em { font-style: normal; color: #1d6b3f; }
.mk-bar { height: 7px; background: var(--navy-100); border-radius: 5px; overflow: hidden; }
.mk-bar i { display: block; height: 100%; width: 0; background: var(--teal-500); border-radius: 5px; }
.mk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.mk-card b { display: block; font-size: 11.5px; color: var(--navy-900); margin-bottom: 6px; }
.mk-bars { display: flex; gap: 5px; align-items: flex-end; height: 56px; }
.mk-bars i { flex: 1; height: 0; background: var(--navy-200); border-radius: 3px 3px 0 0; }
.mk-bars i:nth-child(even) { background: var(--teal-500); }
.mk-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.mk-row:last-child { border-bottom: 0; }
.mk-st { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 600 10px/1.4 var(--font-sans); background: var(--teal-100); color: var(--teal-800); white-space: nowrap; }
.mk-st.a { background: #fff4d6; color: #8a5a00; }
.mk-st.g { background: #e2f5ea; color: #1d6b3f; }
.mk-st.n { background: var(--navy-100); color: var(--navy-700); }
.mk-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mk-table th, .mk-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.mk-table th { font: 600 10px/1.4 var(--font-mono); color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; }
.mk-phone { width: min(100%, 250px); margin-inline: auto; border: 7px solid var(--navy-950); border-radius: 26px; background: var(--gray-50); padding: 10px; box-shadow: 0 30px 60px -36px rgba(8,32,84,.7); }
.mk-phone .mk-h { text-align: center; margin-bottom: 6px; }
.mk-phone .chat { gap: 6px; }
.mk-phone .bubble { font-size: 12px; padding: 8px 10px; max-width: 96%; }
.mk-day { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.mk-day small { display: block; color: var(--gray-500); font: 500 10px/1.2 var(--font-mono); }
.mk-msg { margin-top: 8px; background: var(--navy-900); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 11px; }
.mk-tabnav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; font-size: 9.5px; color: var(--gray-500); text-align: center; }
.mk-tabnav span.on { color: var(--teal-700); font-weight: 600; }
.mk-progress { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: var(--gray-500); }
.mk-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.mk-tabs button { border: 1.5px solid var(--navy-200); background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 13px/1 var(--font-sans); color: var(--navy-800); cursor: pointer; }
.mk-tabs button[aria-selected="true"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.project-mk { display: grid; gap: 0; }
.project-mk [data-tilt] { transform-style: preserve-3d; }
.mk-caption { font-size: 12.5px; color: var(--gray-500); margin-top: 8px; }
.pmini .mk { margin-top: 6px; pointer-events: none; }
.pmini .mk-phone { width: 100%; padding: 8px; border-width: 5px; border-radius: 18px; }
.pmini .mk-desktop { box-shadow: none; }
.pmini .mk-shell { min-height: 0; grid-template-columns: 1fr; }
.pmini .mk-side { display: none; }
@media (max-width: 767px) { .mk-shell { grid-template-columns: 1fr; } .mk-side { display: none; } .mk-kpi { grid-template-columns: repeat(2, 1fr); } .mk-2 { grid-template-columns: 1fr; } }