:root { --brand: #1800ad; --brand2: #13008c; --brand-50: #f1efff; --brand-100: #e3dfff; --accent: #e85a00; --accent-d: #cf4f00; --accent-50: #fff3ea; --ink: #16133d; --text: #2b2a3d; --muted: #6b6a80; --line: #e6e5f0; --input: #d3d1e3; --bg: #f7f7fc; --ok: #14804a; --ok-50: #dcfce7; --bad: #c02626; --bad-50: #fee2e2; --shadow: 0 1px 3px rgba(22,19,61,.06), 0 8px 24px rgba(22,19,61,.06); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.55 "Be Vietnam Pro", system-ui, sans-serif; }
h1, h2, h3, p { margin: 0; color: inherit; }
h1, h2, h3 { color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
input[type="checkbox"] { width: 18px; min-height: 0; accent-color: var(--brand); }
input[type="color"] { padding: 3px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn--pri { border-color: var(--brand); background: var(--brand); color: #fff; }
.btn--pri:hover { background: var(--brand2); color: #fff; }
.btn--lg { min-height: 50px; padding: 0 24px; }
.btn--del { margin-top: 16px; color: var(--bad); }
.boot { padding: 40px; text-align: center; color: var(--muted); }
#app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; height: 100vh; padding: 16px 12px; overflow-y: auto; background: linear-gradient(180deg, #120082, #0a0350); color: #dcd9fb; }
.side__logo { padding: 6px 10px 14px; color: #fff; font-size: 16px; text-decoration: none; }
.side__logo b { font-weight: 800; }
.side nav, .side__p { display: grid; gap: 2px; }
.side button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; font-weight: 500; cursor: pointer; }
.side button:hover { background: rgba(255,255,255,.08); }
.side button[aria-current] { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.side__p i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.side__h { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 12px; color: #a9a4e6; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.side__h button { width: 28px; min-height: 28px; padding: 0; justify-content: center; }
.side__me { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; }
.side__me span { flex: 1; min-width: 0; color: #fff; overflow-wrap: anywhere; }
.side__me small { display: block; color: #a9a4e6; }
.side__me a { color: #dcd9fb; font-size: 11px; }
.av { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 11px; font-weight: 800; }
.av--no { background: #f1f0f6; color: var(--muted); }
.main { min-width: 0; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: rgba(246,245,252,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top input { flex: 1 1 240px; max-width: 360px; }
.top select { flex: 0 1 200px; }
.top .btn--pri { margin-left: auto; }
.top__menu { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.bell { position: relative; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; }
.bell em { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; }
.view { padding: 22px; }
.view h1 { font-size: 22px; margin-bottom: 4px; }
.sub { margin-bottom: 14px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0 22px; }
.stat { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); border-left: 4px solid var(--brand); }
.stat b { display: block; color: var(--ink); font-size: 26px; line-height: 1.15; }
.stat span { color: var(--muted); font-size: 12px; }
.stat--b { border-left-color: var(--accent); } .stat--c { border-left-color: var(--bad); } .stat--d { border-left-color: var(--ok); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cols2 h2 { margin-bottom: 10px; font-size: 15px; }
.stack { display: grid; gap: 10px; }
.empty { padding: 18px; border: 1px dashed #d5d3e8; border-radius: 12px; color: var(--muted); text-align: center; }
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; overflow-x: auto; padding-bottom: 8px; }
.col { min-width: 0; padding: 10px; border-radius: 16px; background: #ecebf6; }
.col header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; color: var(--ink); }
.col header em { padding: 0 9px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
.col__b { display: grid; gap: 10px; min-height: 80px; align-content: start; }
.tk { padding: 12px 13px; border: 1px solid #ecebf6; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px rgba(24,0,173,.05); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tk:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tk.is-late { border-color: #ffd3c8; }
.tk h3 { margin-top: 6px; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.tk__top { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tag { max-width: 100%; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pri { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pri--high { background: var(--accent-50); color: #b84800; } .pri--urgent { background: var(--bad-50); color: var(--bad); }
.bar { height: 5px; margin-top: 9px; border-radius: 3px; background: #eeedf6; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.tk__ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; }
.tk__m { display: flex; align-items: center; gap: 8px; }
.tk__m em { color: var(--muted); font-size: 11px; font-style: normal; }
.due { color: var(--muted); font-size: 11px; font-weight: 600; }
.due.is-late, td.is-late { color: var(--bad); font-weight: 700; }
.tbl { margin-top: 14px; overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
table { width: 100%; min-width: 620px; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid #f1f0f8; text-align: left; }
th { color: var(--muted); font-size: 11px; }
tbody tr[data-id] { cursor: pointer; }
tbody tr[data-id]:hover { background: #fbfbfe; }
.st { padding: 2px 9px; border-radius: 999px; background: #f1f0f6; font-size: 11px; font-weight: 600; }
.st--doing { background: var(--brand-50); color: var(--brand); } .st--review { background: var(--accent-50); color: #b84800; } .st--done { background: var(--ok-50); color: var(--ok); }
.cal__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cal { margin-top: 14px; overflow-x: auto; }
.cal__g { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 6px; }
.cal__g > i { padding: 4px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; text-align: center; }
.cal__c { min-height: 104px; padding: 7px; border-radius: 11px; background: #fff; }
.cal__c.is-off { background: transparent; }
.cal__c.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal__c b { font-size: 11px; }
.cal__t { display: block; width: 100%; margin-top: 3px; padding: 2px 6px; border: 0; border-radius: 6px; background: var(--brand-50); color: var(--brand); font-size: 11px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cal__t.is-late { background: var(--bad-50); color: var(--bad); }
.cal__c small { color: var(--muted); }
.dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 70px rgba(12,5,97,.3); }
.dlg::backdrop { background: rgba(12,5,97,.45); }
.f, .td { display: grid; gap: 12px; padding: 22px; }
.f label, .td__g label { display: grid; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 600; }
.f input, .f select, .f textarea, .td select, .td input { font-weight: 400; }
.f2, .td__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f__a { display: flex; justify-content: flex-end; gap: 8px; }
.td header { display: flex; justify-content: space-between; align-items: center; }
.td__x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f1f0f9; font-size: 16px; cursor: pointer; }
.td h2 { font-size: 18px; overflow-wrap: anywhere; }
.td h3 { margin-top: 6px; font-size: 13px; }
.td__d { white-space: pre-wrap; }
.note { padding: 9px 12px; border-radius: 10px; background: var(--brand-50); color: var(--ink); font-size: 12px; }
.chk { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.chk li { display: flex; justify-content: space-between; gap: 8px; }
.chk label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.chk input:checked + span { color: var(--muted); text-decoration: line-through; }
.chk button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.add { display: flex; gap: 8px; }
.cm { display: grid; gap: 10px; }
.cm > div { display: flex; gap: 9px; }
.cm p { font-size: 12px; overflow-wrap: anywhere; }
.cm small { color: var(--muted); }
.log { color: var(--muted); font-size: 11.5px; }
.nt { display: grid; gap: 4px; max-height: 60vh; margin: 0; padding: 0; overflow: auto; list-style: none; }
.nt button { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: #fbfbfe; text-align: left; cursor: pointer; }
.nt .is-new button { background: var(--brand-50); }
.nt small { display: block; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 99; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; transform: translateX(-50%); }
@media (max-width: 900px) {
	#app { grid-template-columns: minmax(0, 1fr); }
	.side { position: fixed; z-index: 20; left: 0; top: 0; width: 248px; transform: translateX(-100%); transition: transform .2s; }
	#app.nav-open .side { transform: none; }
	.top__menu { display: block; }
	.top { flex-wrap: wrap; padding: 10px 14px; }
	.top input { order: 5; flex-basis: 100%; max-width: none; }
	.top select { display: none; }
	.view { padding: 14px; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cols2 { grid-template-columns: minmax(0, 1fr); }
	.board { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x proximity; }
	.col { scroll-snap-align: start; }
	input, select, textarea { font-size: 16px; }
}
@media (max-width: 560px) { .f2, .td__g { grid-template-columns: minmax(0, 1fr); } .f, .td { padding: 16px; } }

/* Trang giới thiệu */
.lp { background: #fff; font-size: 15px; }
.lp-top { display: flex; justify-content: space-between; align-items: center; max-width: 1120px; margin: 0 auto; padding: 16px 20px; }
.lp-logo { color: var(--brand); font-size: 19px; text-decoration: none; }
.lp-logo b { font-weight: 800; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 44px 20px 60px; }
.lp-k { margin-bottom: 10px; color: var(--accent); font-weight: 700; }
.lp-hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.18; }
.lp-lead { margin: 14px 0 22px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.lp-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(145deg, var(--brand), #0a0350); box-shadow: 0 24px 60px rgba(24,0,173,.3); }
.lp-col { display: grid; gap: 7px; align-content: start; min-height: 190px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.12); }
.lp-col b { color: #fff; font-size: 13.5px; }
.lp-col span { padding: 8px 9px; border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.lp-sec { padding: 52px 20px; background: var(--bg); }
.lp-sec h2 { margin-bottom: 22px; font-size: 28px; text-align: center; }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
.lp-grid article { padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.lp-grid h3 { margin-bottom: 5px; font-size: 17px; }
.lp-grid p { color: var(--muted); font-size: 15px; }
.lp-ft { padding: 20px; color: var(--muted); font-size: 14px; text-align: center; }
@media (max-width: 860px) { .lp-hero { grid-template-columns: minmax(0, 1fr); padding-top: 22px; } .lp-grid { grid-template-columns: minmax(0, 1fr); } }


/* Giao việc và bảng ngang */
.hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stat { transition: transform .15s; }
.free, .lane, .band { border: 1px solid #ecebf6; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgba(24,0,173,.05); transition: border-color .15s, box-shadow .15s; }
.free { margin-bottom: 14px; padding: 12px 14px; background: linear-gradient(120deg, #fff8f2, #fff); border-color: #ffe3cf; }
.free header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.free h2 { font-size: 14px; }
.free em, .band header em { min-width: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent-50); color: #b84800; font-size: 11px; font-style: normal; font-weight: 800; text-align: center; }
.lanes { display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: stretch; overflow: hidden; }
.lane.is-over, .band.is-over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.lane__who { display: flex; gap: 10px; padding: 12px 14px; border-right: 1px solid #f1f0f8; background: #fbfbfe; }
.lane__who > div { flex: 1; min-width: 0; }
.lane__who strong { display: block; color: var(--ink); font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.lane__who small { color: var(--muted); font-size: 11px; }
.av--lg { width: 38px; height: 38px; font-size: 13px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; }
.load { height: 6px; margin: 6px 0 3px; border-radius: 3px; background: #eeedf6; overflow: hidden; }
.load i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ok), #36b37e); }
.load.is-full i { background: linear-gradient(90deg, var(--accent), var(--bad)); }
.is-bad { color: var(--bad); font-weight: 700; }
.lane__b { display: flex; gap: 10px; align-items: stretch; padding: 10px 12px; overflow-x: auto; scrollbar-width: thin; }
.lane__b .tk { flex: 0 0 280px; display: flex; flex-direction: column; }
.lane__b .tk h3 { flex: 1; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lane__b .empty { flex: 1; margin: 0; padding: 12px; }
.lane__e { flex: 1; align-self: center; padding: 12px; border: 1px dashed #d5d3e8; border-radius: 11px; color: var(--muted); font-size: 11.5px; text-align: center; }
.tk__q { min-height: 34px; margin-top: 8px; padding: 2px 8px; border-radius: 8px; background: #fbfbfe; font-size: 11px; }
.bands { display: grid; gap: 12px; margin-top: 14px; }
.band { display: grid; grid-template-columns: 170px minmax(0, 1fr); overflow: hidden; }
.band header { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px; background: linear-gradient(135deg, var(--brand-50), #fff); border-right: 1px solid #f1f0f8; }
.band header b { color: var(--ink); font-size: 13.5px; }
.band header em { align-self: flex-start; background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1px var(--line); }
.band--doing header { background: linear-gradient(135deg, #e9e6ff, #fff); }
.band--review header { background: linear-gradient(135deg, var(--accent-50), #fff); }
.band--done header { background: linear-gradient(135deg, var(--ok-50), #fff); }
.band__b { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 12px; min-height: 76px; align-content: start; }
.tk { position: relative; }
.tk.is-late::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bad); }
.tk[draggable="true"] { cursor: grab; }
@media (max-width: 900px) {
	.lane, .band { grid-template-columns: minmax(0, 1fr); }
	.lane__who { border-right: 0; border-bottom: 1px solid #f1f0f8; }
	.lane__b .tk { flex-basis: 78vw; }
	.band header { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 14px; border-right: 0; }
	.band header em { align-self: center; }
	.band__b { grid-template-columns: minmax(0, 1fr); }
}


/* Nút dùng chung */
.btn { min-height: 36px; padding: 0 14px; border-radius: 9px; box-shadow: 0 1px 2px rgba(22,19,61,.06); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.btn:hover { background: var(--brand-50); box-shadow: 0 3px 10px rgba(24,0,173,.1); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--pri { border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 4px 12px rgba(24,0,173,.25); }
.btn--pri:hover { background: linear-gradient(135deg, var(--brand2), var(--brand)); box-shadow: 0 6px 16px rgba(24,0,173,.32); }
.btn--del, .btn--danger { border-color: #ffd3c8; background: var(--bad-50); color: var(--bad); }
.btn--del:hover, .btn--danger:hover { border-color: var(--bad); background: var(--bad); color: #fff; }
.btn--confirm-danger { border-color: transparent; background: linear-gradient(135deg, #d9472a, var(--bad)); color: #fff; box-shadow: 0 4px 12px rgba(194,58,26,.28); }
.btn--confirm-danger:hover { background: var(--bad); color: #fff; }
.bell, .top__menu, .td__x { border-radius: 9px; transition: background .15s, border-color .15s, color .15s; }
.bell { min-height: 36px; box-shadow: 0 1px 2px rgba(22,19,61,.06); }
.bell:hover, .top__menu:hover, .td__x:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.chk button { width: 26px; height: 26px; border-radius: 7px; }
.chk button:hover { background: var(--bad-50); color: var(--bad); }
.add .btn { flex: none; }
.top input, .top select { min-height: 36px; }
.tk__q { min-height: 30px; cursor: pointer; }
.cfm { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 70px rgba(12,5,97,.35); }
.cfm::backdrop { background: rgba(12,5,97,.5); }
.cfm__b { display: grid; gap: 8px; padding: 20px; }
.cfm__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-50); color: var(--brand); font-size: 18px; font-weight: 800; }
.cfm.is-danger .cfm__ic { background: var(--bad-50); color: var(--bad); }
.cfm h2 { font-size: 15px; }
.cfm p { color: var(--muted); overflow-wrap: anywhere; }
.cfm__a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 900px) { .btn, .bell { min-height: 40px; } .tk__q { min-height: 40px; } .chk button { width: 36px; height: 36px; } }
.side small { font-size: 11px; }

/* Tab báo cáo */
.seg { display: inline-flex; gap: 4px; margin: 12px 0 2px; padding: 4px; border-radius: 12px; background: #eceaf6; }
.seg button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.seg button:hover { color: var(--brand); }
.seg button.is-on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(22,19,61,.14); }
.mbar { min-width: 120px; }
.mbar i { display: block; height: 5px; min-width: 2px; margin-top: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.tbl tfoot th { border-top: 2px solid var(--line); background: var(--brand-50); color: var(--text); font-size: 13px; text-transform: none; }
@media (max-width: 900px) { .seg button { min-height: 40px; } }

/* Tiếp nhận đơn */
[hidden] { display: none !important; }
.ik-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ik-h .sub { margin: 2px 0 0; }
.seg em { min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(24,0,173,.08); font-size: 11px; font-style: normal; }
.ik-list { display: grid; gap: 12px; margin-top: 14px; }
.ik { display: grid; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.ik__t { display: flex; justify-content: space-between; gap: 14px; }
.ik__t > div:first-child { min-width: 0; }
.ik__t h3 { font-size: 14px; overflow-wrap: anywhere; }
.ik__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.ik__k b { color: var(--brand); }
.ik__k span { padding: 0 7px; border-radius: 999px; background: #f1f0f8; }
.ik__c { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ik__s { display: grid; flex: none; justify-items: end; align-content: start; gap: 6px; }
.ik__s strong { color: var(--ink); font-size: 15px; white-space: nowrap; }
.ik__fb { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--accent-50); color: #8a3c00; font-size: 12px; }
.ik__a { display: flex; flex-wrap: wrap; gap: 8px; }
.ik__a .btn, .f__a--w .btn { text-decoration: none; }
.f__a--w { flex-wrap: wrap; }
.pill { padding: 2px 10px; border-radius: 999px; background: #f1f0f8; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pill--act { background: var(--accent-50); color: #b34700; }
.pill--wait { background: var(--brand-50); color: var(--brand); }
.pill--run { background: var(--brand); color: #fff; }
.pill--end { background: var(--ok-50); color: var(--ok); }
.ik.is-closed .pill { background: #f1f0f8; color: var(--muted); }
.ik.is-closed { opacity: .72; }
.stp { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stp li { position: relative; display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: 11px; text-align: center; }
.stp li::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.stp li:first-child::before { display: none; }
.stp i { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eceaf6; font-style: normal; font-weight: 700; }
.stp .is-done i { background: var(--brand); color: #fff; }
.stp .is-done::before, .stp .is-cur::before { background: var(--brand); }
.stp .is-cur { color: var(--accent); font-weight: 700; }
.stp .is-cur i { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-50); }
.ik-f { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 16px; margin-top: 14px; }
.ik-m { display: grid; gap: 14px; min-width: 0; }
.ik-sec { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.ik-sec h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.ik-sec h2 b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--brand-50); color: var(--brand); font-size: 12px; }
.ik-sec h2 small { color: var(--muted); font-size: 11px; font-weight: 400; }
.ik-f label:not(.ik-c):not(.ik-k) { display: grid; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 600; }
.ik-f label small { color: var(--muted); font-weight: 400; }
.ik-f input, .ik-f select, .ik-f textarea { font-weight: 400; }
.ik-cs { display: grid; gap: 8px; }
.ik-cs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ik-cs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ik-c { position: relative; cursor: pointer; }
.ik-c input { position: absolute; width: 1px; min-height: 0; height: 1px; opacity: 0; }
.ik-c > span { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.ik-c b { display: block; color: var(--ink); font-size: 12px; }
.ik-c small { display: block; color: var(--muted); font-size: 11px; }
.ik-c:hover > span { border-color: var(--brand2); }
.ik-c input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand); }
.ik-c input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ik-k { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.ik-k input { flex: none; margin: 1px 0 0; }
.ik-ks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ik-g { display: grid; gap: 6px; }
.ik-g > span { color: var(--ink); font-size: 12px; font-weight: 600; }
.ik-tl { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--brand-50); }
.ik-note { align-self: end; color: var(--muted); font-size: 11px; }
.ik-d summary { color: var(--brand); font-weight: 600; cursor: pointer; }
.ik-d[open] summary { margin-bottom: 10px; }
.ik-d > *:not(summary) + * { margin-top: 12px; }
.ik-it { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 60px 70px 110px 30px; gap: 6px; margin-bottom: 6px; }
.ik-x { border: 0; border-radius: 8px; background: var(--bad-50); color: var(--bad); font-size: 16px; cursor: pointer; }
.ik-its { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.ik-its label { width: 130px; }
.ik-s { position: sticky; top: 72px; min-width: 0; }
.ik-sum { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.ik-sum h2 { font-size: 14px; }
.ik-sum dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 12px; }
.ik-sum dt { color: var(--muted); }
.ik-sum dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.ik-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ik-total strong { color: var(--accent); font-size: 18px; }
.ik-sa { display: grid; gap: 8px; }
@media (max-width: 1100px) { .ik-f { grid-template-columns: minmax(0, 1fr); } .ik-s { position: static; } }
@media (max-width: 900px) { .ik-cs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ik-it { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .ik-it [data-i="name"], .ik-it [data-i="desc"] { grid-column: 1 / -1; } .ik-x { height: 40px; } .ik__t { display: grid; } .ik__s { justify-items: start; } .stp { overflow-x: auto; grid-template-columns: repeat(8, 62px); padding: 4px 0; } }
@media (max-width: 560px) { .ik-cs--2 { grid-template-columns: minmax(0, 1fr); } }

/* Mã đơn hàng */
.tk__w { margin-top: 2px; color: var(--muted); font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ik-pre { display: flex; align-items: stretch; }
.ik-pre i { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; background: var(--brand-50); color: var(--brand); font-style: normal; font-weight: 700; white-space: nowrap; }
.ik-pre input { min-width: 0; border-radius: 0 10px 10px 0; }
.ik-code { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--accent-50); }
.ik-code span { color: var(--muted); font-size: 11px; }
.ik-code b { color: var(--ink); overflow-wrap: anywhere; }
.f .ik-c { display: block; font-weight: 400; }

/* Đồng bộ với cổng trên website: màu, nút, thẻ, nhãn, bảng theo portal.css */
input, select, textarea { border: 1.5px solid var(--input); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(24,0,173,.12); }
:focus-visible { outline: 3px solid rgba(255,102,0,.5); }
.btn { border-radius: 10px; box-shadow: none; }
.btn:hover { border-color: var(--brand); background: #fff; color: var(--brand); box-shadow: none; }
.btn--pri { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
.btn--pri:hover { border-color: var(--accent-d); background: var(--accent-d); color: #fff; box-shadow: 0 8px 18px rgba(255,102,0,.25); }
.btn--del, .btn--danger { border-color: #fecaca; background: #fff; color: var(--bad); }
.btn--confirm-danger { background: var(--bad); box-shadow: none; }
.btn--confirm-danger:hover { background: #a11f1f; }
.side { background: linear-gradient(180deg, #0c0561, #070339); color: #d8d6f5; }
.side__logo { display: flex; align-items: center; gap: 9px; }
.side__logo img { flex: none; border-radius: 8px; background: #fff; }
.side button:hover { background: rgba(255,255,255,.08); color: #fff; }
.side nav button[aria-current] { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(255,102,0,.3); }
.side .ic { flex: none; }
.side__p button[aria-current] { background: rgba(255,255,255,.14); color: #fff; }
.side__h { color: #b9b6dc; }
.side__me small { color: #b9b6dc; }
.side__me a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.side__me a:hover { color: #fff; }
.top { background: #fff; backdrop-filter: none; }
.bell { display: inline-flex; align-items: center; gap: 6px; }
.bell em, .free em, .band header em { background: var(--accent); }
.view h1 { color: var(--ink); }
.stat, .tbl, .ik, .ik-sec, .ik-sum, .cal__c:not(.is-off) { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.stat { position: relative; overflow: hidden; border-left: 1px solid var(--line); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.stat--b::before { background: var(--accent); } .stat--c::before { background: var(--bad); } .stat--d::before { background: var(--ok); }
.ik:hover, .tk:hover { box-shadow: var(--shadow); }
.tk { border-color: var(--line); box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.col { background: #f1f0f8; border-radius: 14px; }
th { background: var(--bg); color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; white-space: nowrap; }
td { border-bottom-color: var(--line); }
tbody tr:hover td { background: #fbfbfe; }
.st, .pill { padding: 2px 9px; border-radius: 999px; background: #eeedf6; color: #3b3a50; font-size: 11px; font-weight: 600; }
.st--doing, .pill--wait { background: var(--brand-50); color: var(--brand); }
.st--review { background: #f3e8ff; color: #6b21a8; }
.st--done, .pill--end { background: #dcfce7; color: #166534; }
.pill--act { background: #fff1e6; color: #9a3412; }
.pill--run { background: var(--brand-50); color: var(--brand); }
.pri--high { background: #fff1e6; color: #9a3412; } .pri--urgent { background: #fee2e2; color: #991b1b; }
.seg { gap: 8px; flex-wrap: wrap; padding: 0; background: none; }
.seg button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-weight: 500; }
.seg button:hover { border-color: var(--brand); color: var(--brand); }
.seg button.is-on { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
.seg button.is-on em { background: rgba(255,255,255,.25); }
.stp .is-done i { background: var(--brand); }
.ik-sec h2 b { border-radius: 50%; background: var(--brand); color: #fff; }
.ik-c > span { border: 1.5px solid var(--line); }
.ik-c input:checked + span { border-color: var(--accent); background: var(--accent-50); box-shadow: none; }
.ik-total strong { color: var(--accent); }
.mbar i { background: var(--brand); }
.bar i { background: var(--accent); }
.note, .ik-tl { background: var(--brand-50); }
.toast { border-radius: 10px; background: var(--brand-900, #0c0561); }
.dlg, .cfm { border-radius: 14px; box-shadow: 0 30px 70px rgba(12,5,97,.3); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Logo và ô chọn người */
.side__logo { gap: 10px; padding: 4px 8px 16px; font-size: 16px; letter-spacing: -.01em; }
.side__logo img { width: 36px; height: 36px; padding: 4px; border-radius: 10px; object-fit: contain; }
.side__logo b { font-weight: 800; }
.side__logo i { color: var(--accent); font-style: normal; }
.side__logo span { color: #fff; font-weight: 500; }
.ae-fsel { font-size: 13px; }
.ae-fsel__btn { min-height: 42px; padding: 5px 10px 5px 7px; border-radius: 10px; font-size: 13px; }
.ae-fsel__bic { width: 26px; height: 26px; border-radius: 50%; }
.ae-fsel__bic svg { width: 15px; height: 15px; }
.ae-fsel__v { font-weight: 500; }
.ae-fsel__panel { min-width: 240px; max-height: 300px; font-size: 13px; }
.ae-fsel.is-filled .ae-fsel__bic { background: var(--brand); }
.top .ae-fsel { flex: 0 1 220px; width: auto; }
.top .ae-fsel__btn { min-height: 36px; }
.tk .ae-fsel { margin-top: 8px; }
.tk .ae-fsel__btn { min-height: 34px; padding: 3px 8px 3px 5px; background: #fbfbfe; font-size: 12px; }
.tk .ae-fsel__bic { width: 22px; height: 22px; }
.tk .ae-fsel__panel { position: fixed; right: auto; min-width: 0; z-index: 90; }
.tk:hover { transform: none; }
.ik-info { padding: 10px 12px; border-radius: 10px; background: var(--brand-50); color: var(--ink); font-size: 12px; }
.ik-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ik-docs .ik-note { grid-column: 1 / -1; }
.ik-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--brand); text-decoration: none; transition: border-color .15s; }
.ik-doc:hover { border-color: var(--brand); }
.ik-doc .ic { flex: none; }
.ik-doc b { display: block; color: var(--ink); font-size: 12px; }
.ik-doc small { color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .top .ae-fsel { display: none; } .ae-fsel__btn, .tk .ae-fsel__btn { min-height: 40px; font-size: 16px; } .ik-docs { grid-template-columns: minmax(0, 1fr); } }

/* Thẻ chọn có tích, thời gian xử lý, tải tệp */
.ik-l { display: block; }
.ik-c__b { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.ik-c > span.ik-c__b { padding: 10px 12px; }
.ik-c__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-style: normal; transition: background .15s, color .15s; }
.ik-c__t { flex: 1; min-width: 0; height: auto !important; }
.ik-c__k { flex: none; position: relative; width: 20px; height: 20px; border: 1.5px solid var(--input); border-radius: 50%; background: #fff; transition: background .15s, border-color .15s; }
.ik-c__k::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg); }
.ik-c:hover .ik-c__b { border-color: var(--brand); box-shadow: 0 4px 12px rgba(24,0,173,.08); }
.ik-c input:checked + .ik-c__b { border-color: var(--accent); background: var(--accent-50); box-shadow: 0 0 0 1px var(--accent); }
.ik-c input:checked + .ik-c__b .ik-c__k { border-color: var(--accent); background: var(--accent); }
.ik-c input:checked + .ik-c__b .ik-c__k::after { opacity: 1; }
.ik-c input:checked + .ik-c__b .ik-c__ic { background: var(--accent); color: #fff; }
.ik-c input:focus-visible + .ik-c__b { outline: 3px solid rgba(255,102,0,.5); outline-offset: 2px; }
.ik-due { display: block; margin-top: 3px; color: var(--ink); font-size: 11px; font-weight: 600; }
.ik-fee { display: inline-block; margin-top: 4px; padding: 0 7px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 11px; font-style: normal; font-weight: 600; }
.ik-c input:checked + .ik-c__b .ik-fee { background: #fff; color: #9a3412; }
.ik-drop { position: relative; display: grid; justify-items: center; gap: 3px; padding: 20px 14px; border: 1.5px dashed var(--input); border-radius: 12px; background: var(--bg); color: var(--brand); text-align: center; transition: border-color .15s, background .15s; }
.ik-drop:hover, .ik-drop:focus-within { border-color: var(--brand); background: var(--brand-50); }
.ik-drop > span { color: var(--text); }
.ik-drop > span b { color: var(--brand); }
.ik-drop small { color: var(--muted); font-size: 11px; }
.ik-drop input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.ik-drop output { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ik-drop output span { padding: 1px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
/* Cảnh báo hạn */
.warn { display: flex; align-items: center; gap: 8px; width: calc(100% - 44px); margin: 14px 22px 0; padding: 9px 14px; border: 1px solid #fed7aa; border-radius: 12px; background: var(--accent-50); color: #9a3412; text-align: left; cursor: pointer; transition: box-shadow .15s; }
.warn:hover { box-shadow: 0 4px 12px rgba(255,102,0,.15); }
.warn.is-late { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.warn .ic { flex: none; }
.warn span { flex: 1; min-width: 0; }
.warn em { flex: none; font-style: normal; font-weight: 600; text-decoration: underline; }
.due.is-soon { color: #c2410c; font-weight: 700; }
.tk.is-soon { border-color: #fed7aa; }
.tk.is-soon::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.tk { position: relative; }
.nt .is-late button { background: #fef2f2; }
.nt .is-soon button { background: var(--accent-50); }
@media (max-width: 900px) { .warn { width: calc(100% - 28px); margin: 10px 14px 0; } .warn em { display: none; } }

.ik-cs--t .ik-c__b { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; }
.ik-cs--t .ik-c__t { width: 100%; }
.ik-cs--t .ik-c__k { position: absolute; top: 10px; right: 10px; }

/* Giao việc theo Job */
.f .warn { width: 100%; margin: 0; cursor: default; }
.f .warn .btn { min-height: 32px; }
.ik-code small { color: var(--ok); font-size: 11px; font-weight: 600; }
.btn:disabled:hover { border-color: var(--line); }

/* Thẻ chọn đang chọn màu xanh thương hiệu */
.ik-c input:checked + .ik-c__b { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand); }
.ik-c input:checked + .ik-c__b .ik-c__k { border-color: var(--brand); background: var(--brand); }
.ik-c input:checked + .ik-c__b .ik-c__ic { background: var(--brand); color: #fff; }
.ik-c input:checked + .ik-c__b .ik-fee { background: #fff; color: var(--brand); }
.ik-c [data-tdays] { color: var(--muted); font-weight: 500; }
.ik-due { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px dashed var(--brand); border-radius: 8px; background: #fff; color: var(--brand); white-space: nowrap; }
.ik-fee { display: table; }
.ik-cp { display: flex; gap: 6px; }
.ik-cp input { flex: 1; min-width: 0; }
.ik-cp .btn { flex: none; min-height: 42px; padding: 0 12px; }
.ik-cpm { font-size: 11px; font-weight: 600; }
.ik-cpm.is-ok { color: var(--ok); }
.ik-cpm.is-bad { color: var(--bad); }

/* Ô chọn: chữ và biểu tượng gọn hơn 1px */
.ae-fsel, .ae-fsel__btn { font-size: 12px; }
.ae-fsel__o { gap: 9px; padding: 7px 9px 7px 10px; font-size: 13px; }
.ae-fsel__ic { width: 25px; height: 25px; }
.ae-fsel__ic svg { width: 14px; height: 14px; }
.ae-fsel__bic { width: 25px; height: 25px; }
.ae-fsel__bic svg { width: 14px; height: 14px; }
.ae-fsel__ck svg { width: 15px; height: 15px; }
.ae-fsel__sic svg { width: 15px; height: 15px; }
.ae-fsel__search input { height: 36px; font-size: 12px; }
.ae-fsel__ic.ae-fsel__av, .ae-fsel__bic.ae-fsel__av { font-size: 10px; }
.ae-fsel.is-short .ae-fsel__search { display: none; }
.ae-fsel.is-short .ae-fsel__panel { min-width: 0; }
.ik-f .ae-fsel__btn, .f .ae-fsel__btn, .td .ae-fsel__btn { font-weight: 400; color: var(--text); }
@media (max-width: 900px) { .ae-fsel__search input { font-size: 16px; } }

/* Danh sách Tiếp nhận đơn dạng đóng mở */
.ik { display: block; padding: 0; overflow: hidden; }
.ik__h { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ik__h:hover { background: #fbfbfe; }
.ik.is-open .ik__h { background: var(--brand-50); }
.ik__m { display: grid; flex: 1; min-width: 0; gap: 1px; }
.ik__k { margin-bottom: 0; }
.ik__ti { color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik.is-open .ik__ti { white-space: normal; }
.ik__h .ik__c { color: var(--muted); font-size: 12px; }
.ik__h .ik__s { display: grid; flex: none; justify-items: end; gap: 3px; }
.ik__h .ik__s strong { font-size: 13px; }
.ik__ch { flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.ik.is-open .ik__ch { transform: rotate(-135deg); }
.ik__b { display: grid; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
/* Tạp chí và bên đặt hàng */
.ik-jp { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.ae-party { display: grid; gap: 12px; font-size: 12px; }
.ae-party p { margin: 0; }
.ae-party label, .ae-addr legend, .ae-addr__f > span { color: var(--ink); font-size: 12px; font-weight: 600; }
.ae-party input[type="radio"] { width: 1px; min-height: 0; }
.ae-addr { min-width: 0; margin: 0; padding: 0; border: 0; }
.ae-pf-msg { display: block; min-height: 15px; margin-top: 3px; font-size: 11px; font-weight: 500; }
.ae-pf-msg.is-ok { color: var(--ok); }
.ae-pf-msg.is-err { color: var(--bad); }
.ae-grid-2, .ae-grid-3 { min-width: 0; }
@media (max-width: 560px) { .ik__h { flex-wrap: wrap; } .ik__h .ik__s { justify-items: start; order: 3; } .ik__ch { order: 2; } }

/* Cây tháng trên menu và thẻ số liệu bấm được */
.side__p { gap: 2px; }
.side__p button em { margin-left: auto; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; font-style: normal; font-weight: 600; }
.tree__m { font-weight: 600 !important; }
.tree__m::before { content: ""; flex: none; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.tree__m.is-open::before { transform: rotate(45deg); }
.tree__c { display: grid; gap: 2px; margin: 0 0 4px 12px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.14); }
.tree__c button { min-height: 34px; font-size: 12px; }
.side__p .tree__d { width: 8px; height: 8px; border-radius: 50%; background: #8f86ff; }
.side__p .tree__d--job { background: var(--accent); }
.side__p button[aria-current] { background: var(--accent); color: #fff; }
#fchip:empty { display: none; }
#fchip { padding: 12px 22px 0; }
.fchip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 6px 5px 12px; border: 1px solid var(--brand-100); border-radius: 999px; background: var(--brand-50); color: var(--ink); font-size: 12px; }
.fchip button { padding: 2px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
button.stat { display: block; width: 100%; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; }
button.stat:hover { border-color: var(--brand); box-shadow: var(--shadow); }
button.stat:active { transform: translateY(1px); }
@media (max-width: 900px) { #fchip { padding: 10px 14px 0; } }

/* Trạng thái văn bản */
.ik-doc > span { flex: 1; min-width: 0; }
.ik-doc.is-signed { border-color: #a7e3c0; background: #effbf4; color: var(--ok); }
.ik-doc.is-signed small { color: var(--ok); font-weight: 600; }
.ik-doc.is-signed:hover { border-color: var(--ok); }
.ik-doc.is-draft small { color: #9a3412; font-weight: 600; }
.ik-doc.is-none { border-style: dashed; color: var(--muted); }
.ik-doc__ok { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); }
.ik-doc__ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Cây tháng gọn hơn 1px */
.tree__m { font-size: 12px; }
.tree__c button { font-size: 11px; }
.side__p button > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__p button em { font-size: 10px; }
/* Thu gọn menu trái */
#app { transition: grid-template-columns .2s ease; }
.side__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.side__logo { flex: 1; min-width: 0; padding: 4px 4px 10px; }
.side__logo span { white-space: nowrap; }
.side button.side__tg, .side button.side__mi { flex: none; display: grid; place-items: center; width: 34px; min-height: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); color: #d8d6f5; transition: background .15s, border-color .15s, color .15s; }
.side button.side__tg { margin-bottom: 6px; }
.side button.side__tg:hover, .side button.side__mi:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.side__mi { display: none !important; }
@media (min-width: 901px) {
	#app.side-mini { grid-template-columns: 68px minmax(0, 1fr); }
	.side-mini .side { align-items: center; padding: 14px 10px; }
	.side-mini .side__top { flex-direction: column; margin: 0; }
	.side-mini .side__logo { flex: none; padding: 0 0 6px; }
	.side-mini .side__t, .side-mini .side__h, .side-mini #tree, .side-mini .side__me > span { display: none; }
	.side-mini .side nav { width: 100%; }
	.side-mini .side nav button { justify-content: center; padding: 0; }
	.side-mini .side__mi { display: grid !important; margin-top: 8px; }
	.side-mini .side__me { flex-direction: column; justify-content: center; width: 100%; padding: 12px 0 4px; }
}
@media (max-width: 900px) { .side button.side__tg { display: none; } }

/* Số đếm trên bảng công việc */
.free em { background: var(--accent); color: #fff; }
.band { border-color: var(--line); box-shadow: 0 1px 2px rgba(22,19,61,.04); --b: #6b6a80; --bs: #eeedf6; }
.band--doing { --b: var(--brand); --bs: var(--brand-50); }
.band--review { --b: #6b21a8; --bs: #f3e8ff; }
.band--done { --b: var(--ok); --bs: #dcfce7; }
.band header, .band--doing header, .band--review header, .band--done header { position: relative; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 12px 18px; background: #fbfbfe; border-right: 1px solid var(--line); }
.band header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--b); }
.band header b { font-size: 13px; }
.band header em { align-self: center; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--bs); color: var(--b); box-shadow: none; font-size: 12px; font-weight: 700; line-height: 1; }
/* Thẻ yêu cầu */
.ik { position: relative; --k: #6b6a80; transition: border-color .15s, box-shadow .15s; }
.ik--act { --k: var(--accent); } .ik--wait { --k: #2563eb; } .ik--run { --k: var(--brand); } .ik--end { --k: var(--ok); }
.ik::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); }
.ik.is-open { border-color: var(--brand); box-shadow: var(--shadow); }
.ik__h { gap: 14px; padding: 14px 16px 14px 18px; }
.ik.is-open .ik__h { background: #fff; }
.ik__av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand); font-size: 15px; font-weight: 800; }
.ik__m { gap: 2px; }
.ik__ti { font-size: 13.5px; line-height: 1.4; }
.ik__h .ik__c { color: var(--text); font-weight: 500; }
.ik__k { gap: 5px 10px; margin-top: 4px; }
.ik__k b, .ik__k .ik__o { padding: 1px 7px; border-radius: 6px; background: var(--brand-50); color: var(--brand); font-weight: 700; }
.ik__k .ik__o { background: var(--accent-50); color: #9a3412; }
.ik__k .ik__v, .ik__k time { display: inline-flex; align-items: center; gap: 4px; padding: 0; border-radius: 0; background: none; color: var(--muted); }
.ik__h .ik__s { min-width: 150px; gap: 5px; }
.ik__h .ik__s strong { color: var(--ink); font-size: 15px; font-weight: 800; }
.ik__p { display: block; width: 110px; height: 4px; border-radius: 999px; background: #eeedf6; overflow: hidden; }
.ik__p i { display: block; height: 100%; border-radius: 999px; background: var(--k); }
.ik__ch { position: relative; flex: none; width: 30px; height: 30px; margin: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; transition: border-color .15s, background .15s; transform: none; }
.ik__ch::after { content: ""; position: absolute; left: 10px; top: 8px; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.ik.is-open .ik__ch { transform: none; border-color: var(--brand); background: var(--brand-50); }
.ik.is-open .ik__ch::after { top: 11px; border-color: var(--brand); transform: rotate(-135deg); }
.ik__h:hover .ik__ch { border-color: var(--brand); }
.ik__b { padding: 12px 18px 16px; }
@media (max-width: 560px) { .ik__av { width: 36px; height: 36px; } .ik__m { flex-basis: calc(100% - 100px); } .ik__h .ik__s { min-width: 0; flex: 1; order: 3; } .ik__ch { order: 2; } .ik__ti { white-space: normal; } }

/* Khối bên đặt hàng cân đối, nhãn một dòng */
.ae-req { margin-left: 1px; color: var(--bad); font-weight: 700; }
.ae-party label:not(.ae-party__opt):not(.ae-addr__f) { display: block; min-height: 17px; margin-bottom: 4px; line-height: 17px; white-space: nowrap; }
.ae-party .ae-grid-2, .ae-party .ae-grid-3 { display: grid; gap: 12px 14px; align-items: start; }
.ae-party .ae-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-party .ae-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ae-party .ae-pf-place { display: block; min-width: 0; }
.ae-party input:not([type="radio"]), .ae-party select { width: 100%; min-height: 42px; }
.ae-party small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.ae-pf-msg { min-height: 0; }
.ae-addr { display: grid; gap: 8px; }
.ae-addr legend { display: flex; align-items: center; gap: 6px; float: left; width: 100%; margin-bottom: 8px; padding: 0; line-height: 1.4; }
.ae-addr legend + * { clear: both; }
.ae-addr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
.ae-addr__f { display: grid; gap: 4px; min-width: 0; }
.ae-addr__f--street { grid-column: 1 / -1; }
@media (max-width: 700px) { .ae-party .ae-grid-2, .ae-party .ae-grid-3, .ae-addr__grid { grid-template-columns: minmax(0, 1fr); } }
.ae-addr legend { display: block; }
.ae-addr legend .ae-itip { margin-left: 4px; vertical-align: middle; }
.ae-pf-place label .ae-itip i { width: 15px; height: 15px; font-size: 10px; }
@media (max-width: 700px) {
	.ae-party label:not(.ae-party__opt):not(.ae-addr__f) { white-space: normal; }
	.ae-party__opts { grid-template-columns: minmax(0, 1fr); }
	.ae-addr legend { white-space: normal; }
	.ae-party, .ae-party * { min-width: 0; max-width: 100%; }
}

/* Danh sách công việc */
.ls__h { display: flex; align-items: baseline; gap: 10px; }
.ls__h span { color: var(--muted); font-size: 12px; }
.ls { margin-top: 12px; }
.ls th { padding: 10px 16px; }
.ls td { padding: 11px 16px; vertical-align: middle; }
.ls tbody tr { transition: background .12s; }
.ls tbody tr:last-child td { border-bottom: 0; }
.ls__t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ls__t strong { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.ls__t small, .ls__d small { display: block; color: var(--muted); font-size: 11px; }
.ls__i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-50); color: var(--brand); }
.ls__i--job { background: var(--accent-50); color: var(--accent-d); }
.ls__w { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.av { position: relative; overflow: hidden; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls__none { color: var(--muted); }
.ls__d b { display: block; color: var(--ink); font-weight: 600; white-space: nowrap; }
.ls__d.is-late b, .ls__d.is-late small { color: var(--bad); }
.ls__d.is-soon small { color: #c2410c; font-weight: 600; }
.st { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Chi tiết công việc */
.td { gap: 14px; padding: 20px 22px 22px; }
.td header { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-right: 44px; position: relative; }
.td__x { position: absolute; right: 0; top: -4px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); }
.td h2 { font-size: 17px; line-height: 1.35; }
.td__w { margin-top: -10px; color: var(--muted); font-size: 12px; }
.td__f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 14px; border: 1px solid var(--brand-100); border-radius: 12px; background: var(--brand-50); }
.td__f span { display: grid; min-width: 0; }
.td__f small { color: var(--muted); font-size: 11px; }
.td__f b, .td__f a:not(.btn) { color: var(--ink); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.td__f a:not(.btn) { color: var(--brand); }
.td__o { margin-left: auto; min-height: 32px; padding: 0 12px; font-size: 12px; }
.td__r { flex-basis: 100%; }
.td__h { margin-top: -8px; color: var(--muted); font-size: 11px; }
.td__b { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.td__b input:disabled { background: #f6f6fa; color: var(--muted); }
.td__s { display: grid; gap: 8px; }
.td__s h3 { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.td__s h3 .ic { color: var(--brand); }
.td__s h3 em { margin-left: 2px; padding: 0 7px; border-radius: 999px; background: #eeedf6; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.td__e { color: var(--muted); font-size: 12px; }
.chk:empty { display: none; }
.chk li { align-items: center; padding: 4px 8px; border-radius: 8px; }
.chk li:hover { background: var(--bg); }
.add { align-items: center; }
.add .av { flex: none; }
.add input { min-height: 38px; }
.add .btn { min-height: 38px; }
.cm > div { padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.log { padding-top: 10px; border-top: 1px solid var(--line); }
.log summary { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; list-style: none; }
.log summary::-webkit-details-marker { display: none; }
.log summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.log[open] summary::after { transform: rotate(-135deg); }
.log ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.log li { display: flex; gap: 10px; }
.log time { flex: none; color: var(--ink); font-weight: 600; }
.td .btn--del { justify-self: start; margin-top: 2px; }
@media (max-width: 700px) { .ls table { min-width: 640px; } .td { padding: 16px; } .td__o { margin-left: 0; } }

/* Ô giải thích chữ i */
.ae-itip__box { display: block; width: 300px; max-width: 80vw; white-space: normal; font-weight: 400; text-align: left; line-height: 1.5; }
.ae-itip__box > span { display: block; }
.ae-pf-place .ae-itip__box { left: auto; right: -10px; transform: translate(0, 4px); }
.ae-pf-place .ae-itip__box::after { left: auto; right: 12px; }
.ae-pf-place .ae-itip:hover .ae-itip__box, .ae-pf-place .ae-itip:focus .ae-itip__box, .ae-pf-place .ae-itip:focus-within .ae-itip__box { transform: translate(0, 0); }
.ik-sec:has(.ae-itip:hover), .ik-sec:has(.ae-itip:focus-within) { position: relative; z-index: 20; }
/* Xem văn bản theo thông tin đang nhập */
button.ik-doc { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ik-doc.is-on { border-color: var(--brand); background: var(--brand-50); }
.ik-dv { display: grid; gap: 6px; }
.ik-dv p { color: var(--muted); font-size: 11px; }
.ik-dv iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #e8e7ef; }
@media (max-width: 700px) { .ik-dv iframe { height: 420px; } }

/* Giao việc theo tháng */
.mos { display: grid; gap: 10px; margin-top: 14px; }
.mo { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); transition: border-color .15s, box-shadow .15s; }
.mo.is-open { border-color: var(--brand); box-shadow: var(--shadow); }
.mo__h { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px 16px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.mo__h:hover { background: #fbfbfe; }
.mo__n { flex: none; display: grid; min-width: 130px; }
.mo__n b { color: var(--ink); font-size: 14px; }
.mo__n small { color: var(--muted); font-size: 11px; }
.mo__k { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0; }
.mo__k > span { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 11px; }
.mo__k b { color: var(--ink); font-size: 14px; }
.mo__k .is-warn b { color: var(--accent-d); }
.mo__k .is-bad b { color: var(--bad); }
.mo__k .is-ok b { color: var(--ok); }
.mo__p { flex: none; width: 90px; height: 5px; border-radius: 999px; background: #eeedf6; overflow: hidden; }
.mo__p i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.mo.is-open .ik__ch { border-color: var(--brand); background: var(--brand-50); }
.mo.is-open .ik__ch::after { top: 11px; border-color: var(--brand); transform: rotate(-135deg); }
.mo__b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.mo__c { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border-radius: 12px; background: var(--bg); }
.mo__c > h3 { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 3px solid var(--brand); color: var(--ink); font-size: 12.5px; }
.mo__c--job > h3 { border-left-color: var(--accent); }
.mo__c > h3 em { padding: 0 7px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
.mo__c .lane__e { background: #fff; }
@media (max-width: 900px) { .mo__h { flex-wrap: wrap; gap: 8px 12px; } .mo__k { order: 3; flex-basis: 100%; } .mo__p { display: none; } .ik__ch { margin-left: auto; } .mo__b { grid-template-columns: minmax(0, 1fr); padding: 10px; } }

/* Thẻ yêu cầu: tên đơn, khách, tiến độ */
.ik__ti { color: var(--brand); font-size: 12.5px; }
.ik__u { display: inline-flex; align-items: center; gap: 5px; justify-self: start; max-width: 100%; margin-top: 2px; padding: 2px 9px 2px 6px; border-radius: 999px; background: #f4f3fa; color: var(--ink); font-size: 12px; font-weight: 600; }
.ik__u .ic { flex: none; color: var(--brand); }
.ik__p { display: flex; align-items: center; gap: 7px; width: auto; height: auto; background: none; overflow: visible; }
.ik__ps { display: flex; gap: 3px; }
.ik__ps i { display: block; width: 11px; height: 6px; border-radius: 3px; background: #e6e5f0; }
.ik__ps .is-done { background: var(--brand); }
.ik__ps .is-cur { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-50); }
.ik--end .ik__ps .is-cur { background: var(--ok); box-shadow: 0 0 0 2px #dcfce7; }
.ik__p small { color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }

/* Bảng lương */
.pay__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pay__h .sub { margin: 2px 0 0; }
.pay__f { display: flex; gap: 10px; flex-wrap: wrap; }
.pay__f label { display: grid; gap: 4px; min-width: 220px; color: var(--ink); font-size: 12px; font-weight: 600; }
.pay__s { font-size: 13px; }
.pay__j { display: grid; gap: 10px; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.pay__j header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay__j h2 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pay__j h2 .ic { color: var(--brand); }
.pay__j header strong { color: var(--ink); font-size: 15px; }
.pay__j ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pay__j li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--bg); cursor: pointer; }
.pay__j li > span:first-child { flex: 1; min-width: 0; }
.pay__j li b { display: block; color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere; }
.pay__j li small { color: var(--muted); font-size: 11px; }
.pay__j li strong { flex: none; color: var(--ink); }
.pay__j .btn { justify-self: start; }
@media (max-width: 700px) { .pay__f label { min-width: 0; flex: 1 1 100%; } .pay__j li { flex-wrap: wrap; } }
.pay__s table { min-width: 0; width: 100%; }
.pay__s th, .pay__s td { background: none; font-size: 12px; white-space: normal; }
.ae-pr-facts b { font-size: 16px; }
@media (max-width: 700px) {
	.ae-pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ae-pr-cols { grid-template-columns: minmax(0, 1fr); }
	.pay__s, .pay__s * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
	.ae-pr-hero { flex-wrap: wrap; }
}
@media (max-width: 700px) { .pay__s .ae-table { display: block; overflow-x: auto; } }

/* Danh sách chia nhóm */
.lg { margin-top: 18px; --g: var(--brand); }
.lg--mentor { --g: #6b21a8; } .lg--other { --g: #2563eb; } .lg--job { --g: var(--accent); } .lg--task { --g: var(--muted); }
.lg h2 { display: flex; align-items: center; gap: 7px; padding-left: 10px; border-left: 4px solid var(--g); color: var(--ink); font-size: 14px; }
.lg h2 .ic { color: var(--g); }
.lg h2 em { padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
.lg .ls { margin-top: 8px; }
.lg table { table-layout: fixed; }
.lg .c-w { width: 200px; } .lg .c-s { width: 130px; } .lg .c-d { width: 120px; }
/* Ngày ký và ngày giao trên thẻ */
.ik__ds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ik__d { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px dashed #c9c4ee; border-radius: 8px; background: #fff; color: var(--brand); font-size: 11px; }
.ik__d small { color: var(--muted); font-size: 11px; }
.ik__d b { color: var(--ink); font-size: 11.5px; font-weight: 700; }
.ik__d em { color: var(--brand); font-style: normal; font-weight: 600; }
.ik__d.is-soon { border-color: #fdba74; background: var(--accent-50); color: #c2410c; }
.ik__d.is-soon em { color: #c2410c; }
.ik__d.is-late { border-color: #fca5a5; background: #fef2f2; color: var(--bad); }
.ik__d.is-late em { color: var(--bad); }
.ik__d.is-ok { border-color: #a7e3c0; background: #effbf4; color: var(--ok); }
/* Thông báo trên trang giới thiệu */
.lp-note { display: grid; gap: 2px; max-width: 1080px; margin: 4px auto 0; padding: 12px 16px; border: 1px solid #fed7aa; border-left: 4px solid var(--accent); border-radius: 12px; background: var(--accent-50); color: #7c2d12; font-size: 14px; }
.lp-note b { color: #7c2d12; }
@media (max-width: 1160px) { .lp-note { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 700px) { .lg table { table-layout: auto; min-width: 560px; } }

/* Thanh Excel, In */
.hd + .lx, .ik-h + .lx, .ls__h + .lx, h1 + .lx, .pay__j .lx { margin-top: 2px; }
.lg .lx { margin: -24px 0 6px; }
/* Gợi ý tên và mô tả báo giá */
.ik-sg { display: flex; align-items: flex-start; gap: 6px; margin-top: -6px; min-width: 0; }
.ik-sg__l { flex: none; padding-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.ik-sg__c { flex: 1; display: flex; gap: 5px; min-width: 0; height: 26px; overflow: hidden; }
.ik-sg.is-open .ik-sg__c { flex-wrap: wrap; height: auto; }
.ik-sg__c button { flex: none; max-width: 100%; height: 26px; padding: 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; }
.ik-sg__c button:hover { border-color: var(--brand); color: var(--brand); }
.ik-sg__c button.is-on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); font-weight: 600; }
[data-sg-d] .ik-sg__c button { flex: 0 1 auto; }
[data-sg-d].is-open .ik-sg__c button { height: auto; min-height: 26px; padding: 4px 10px; border-radius: 10px; text-align: left; white-space: normal; }
.ik-sg__m { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--brand); border-radius: 50%; background: var(--brand-50); color: var(--brand); font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; }

/* Thẻ tháng có icon */
.mo__i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand); }
.mo.is-open .mo__i { background: var(--brand); color: #fff; }
.mo__h { gap: 14px; }
.mo__n { min-width: 112px; }
.mo__k { gap: 8px 18px; }
.mo__k > span { font-size: 11px; }
.mo__s { display: inline-flex; align-items: center; gap: 7px; --s: var(--brand); --sb: var(--brand-50); min-width: 92px; }
.mo__s.is-warn { --s: #c2410c; --sb: var(--accent-50); }
.mo__s.is-bad { --s: var(--bad); --sb: #fee2e2; }
.mo__s.is-ok { --s: var(--ok); --sb: #dcfce7; }
.mo__s:not(.is-open):not(.is-warn):not(.is-bad):not(.is-ok) { --s: var(--muted); --sb: #f1f0f8; }
.mo__s > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--sb); color: var(--s); font-style: normal; }
.mo__s > span { display: grid; }
.mo__s b { color: var(--s); font-size: 14px; line-height: 1.15; }
.mo__s small { color: var(--muted); font-size: 10.5px; line-height: 1.2; white-space: nowrap; }
.mo__pw { flex: none; display: grid; justify-items: end; gap: 3px; width: 80px; }
.mo__pw small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.mo__p { width: 100%; }
.ik-sec > .ik-sg[data-sg-i] { margin-top: 0; }
[data-sg-o] { margin-top: -6px; }
@media (max-width: 900px) { .mo__pw { display: none; } .mo__s { min-width: 0; } }

/* Cặp số ngày và ngày */
.ik-dp { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ik-f .ik-dp label:not(.ik-c):not(.ik-k), .f .ik-dp label { display: flex; align-items: center; gap: 6px; min-height: 42px; margin: 0; padding: 0 10px; border: 1.5px solid var(--input); border-radius: 10px; background: #fff; color: var(--brand); font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.ik-f .ik-dp label:not(.ik-c):not(.ik-k):focus-within, .f .ik-dp label:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(24,0,173,.12); }
.ik-dp label .ic { flex: none; }
.ik-dp input { min-height: 38px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.ik-dp input:focus { box-shadow: none; }
.ik-dp__n { flex: 0 0 104px; }
.ik-dp__n input { width: 100%; min-width: 0; -moz-appearance: textfield; }
.ik-dp__n input::-webkit-outer-spin-button, .ik-dp__n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ik-dp__n em { flex: none; color: var(--muted); font-size: 11px; font-style: normal; }
.ik-dp__d { flex: 1 1 150px; min-width: 0; }
.ik-dp__e { flex: none; position: relative; width: 14px; height: 2px; background: var(--line); }
.ik-its { align-items: flex-end; }
.ik-its .ik-g { flex: 0 1 310px; min-width: 0; }
.ik-sum .ik-dp { flex-wrap: wrap; }
.ik-sum .ik-dp__e { display: none; }
.ik-sum .ik-dp__n, .ik-sum .ik-dp__d { flex: 1 1 100%; }
@media (max-width: 560px) { .ik-its { flex-wrap: wrap; } .ik-dp { flex-wrap: wrap; } .ik-dp__e { display: none; } .ik-dp__n, .ik-dp__d { flex: 1 1 100%; } }

/* Thẻ việc có icon */
.tag { display: inline-flex; align-items: center; gap: 4px; }
.tk__w { display: flex; align-items: flex-start; gap: 5px; -webkit-line-clamp: unset; overflow: visible; }
.tk__w .ic { flex: none; margin-top: 2px; color: var(--brand); }
.tk__w span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.due { display: inline-flex; align-items: center; gap: 4px; }
.due.is-late { color: var(--bad); }
/* Danh sách trong hộp thoại */
.nt { gap: 6px; }
.nl button { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.nl button:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(24,0,173,.08); }
.nl__i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-style: normal; }
.nl__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.nl__t b { color: var(--ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.nl__t > small { color: var(--muted); font-size: 11px; }
.nl__m { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.nl__m em { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-style: normal; }
.nl.is-new button { background: var(--brand-50); }
.nl.is-new .nl__i { background: #fff; }
.nl.is-soon button { border-color: #fed7aa; background: var(--accent-50); }
.nl.is-soon .nl__i { background: #fff; color: #c2410c; }
.nl.is-soon .nl__d { color: #c2410c; font-weight: 600; }
.nl.is-late button { border-color: #fecaca; background: #fef2f2; }
.nl.is-late .nl__i { background: #fee2e2; color: var(--bad); }
.nl.is-late b, .nl.is-late .nl__d { color: var(--bad); }
.nl.is-late .nl__d { font-weight: 700; }
/* Quá hạn luôn màu đỏ */
.mo__s.is-bad small { color: var(--bad); font-weight: 600; }
.stat--c b, .stat--c span { color: var(--bad); }
th.is-late, .ls__d.is-late b { color: var(--bad); }
/* Hộp xác nhận: đồng bộ với website (confirm.css). */
.cfm { width: min(440px, calc(100vw - 32px)); border-radius: 16px; }
.cfm__b { gap: 12px; padding: 22px 22px 18px; }
.cfm__h { display: flex; align-items: center; gap: 12px; }
.cfm__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff1e6; color: var(--accent); box-shadow: 0 0 0 5px #fff8f2; }
.cfm.is-danger .cfm__ic { background: var(--bad-50); color: var(--bad); box-shadow: 0 0 0 5px #fff6f3; }
.cfm h2 { margin: 0; font-size: 16px; line-height: 1.35; }
.cfm p { margin: 0; font-size: 13px; line-height: 1.6; }
.cfm__f { display: grid; gap: 7px; margin: 2px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafaff; list-style: none; }
.cfm__f li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.cfm__f .ic { flex: none; margin-top: 2px; color: var(--brand); }
.cfm__l { display: grid; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 600; }
.cfm__l[hidden] { display: none; }
.cfm__l select, .cfm__l textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; }
.cfm__a { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.cfm__a .btn { gap: 7px; min-height: 40px; }
.cfm__a .btn:first-child { min-width: 76px; }
/* Thanh thao tác của báo giá. */
.ik__a { align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ik__a .btn { gap: 7px; min-height: 38px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.ik__a .btn .ic { flex: none; color: var(--brand); }
.ik__a .btn--pri .ic { color: #fff; }
.ik__a .btn:hover { border-color: var(--brand); background: var(--brand-50); }
.ik__a .btn--pri:hover { background: var(--accent-d); }
.ik__a .btn--del { margin: 0 0 0 auto; border-color: #ffd3c8; background: #fff; color: var(--bad); }
.ik__a .btn--del .ic { color: var(--bad); }
.ik__a .btn--del:hover { border-color: var(--bad); background: var(--bad); color: #fff; }
.ik__a .btn--del:hover .ic { color: #fff; }
.ik__fb--x { border-color: #ffd3c8; background: var(--bad-50); }
/* Gợi ý lời nhắn, mức thanh toán khoá. */
.ik-nt { display: grid; gap: 6px; }
.ik-nt small { color: var(--muted); font-size: 11px; font-weight: 600; }
.ik-nt div { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-nt button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--brand); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.ik-nt button:hover { border-color: var(--brand); background: var(--brand-50); }
.ik-sa .btn { gap: 7px; }
.ik-c.is-off { opacity: .45; pointer-events: none; }
@media (max-width: 560px) { .ik__a .btn { flex: 1 1 100%; } .ik__a .btn--del { margin-left: 0; } .cfm__a .btn { flex: 1; } }
.stat.is-0 b, .stat.is-0 span { color: var(--muted); }
.stat.is-0::before { background: var(--line); }
.lg .ik-list { margin-top: 10px; }
.ik__a .btn--del + .btn--del { margin-left: 0; }
.td__i h3 { color: var(--ink); }
.td__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.td__c span { display: grid; min-width: 0; }
.td__c small { color: var(--muted); font-size: 11px; }
.td__c b { color: var(--ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.td__t { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.td__t table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12px; }
.td__t th { padding: 8px 12px; background: #f6f5fc; color: var(--muted); font-size: 11px; text-align: left; }
.td__t td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.td__t td small { display: block; color: var(--muted); }
.td__t th:last-child, .td__t td:last-child { text-align: right; white-space: nowrap; }
.td__l { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 12.5px; }
.td .stp { margin: 0; }
@media (max-width: 560px) { .td__c { grid-template-columns: minmax(0, 1fr); } }
/* Thống kê */
.sx-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.sx-h .seg { margin: 0; }
.sx-ks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sx-k { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.sx-k > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-50); color: var(--brand); font-style: normal; }
.sx-k.is-warn > i { background: var(--bad-50); color: var(--bad); }
.sx-k span { display: grid; gap: 1px; min-width: 0; }
.sx-k small { color: var(--muted); font-size: 11.5px; }
.sx-k b { color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sx-k em { color: var(--muted); font-size: 11px; font-style: normal; }
.sx-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-c { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.sx-c.is-wide { grid-column: 1 / -1; }
.sx-c header h2 { margin: 0; color: var(--ink); font-size: 14px; }
.sx-c header p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.sx-e { margin: 0; padding: 30px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.sx-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; color: var(--text); font-size: 11.5px; list-style: none; }
.sx-lg li { display: inline-flex; align-items: center; gap: 6px; }
.sx-lg i, .sx-dl i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.sx-pl { position: relative; height: 230px; padding-left: 42px; }
.sx-gr { position: absolute; inset: 0 0 24px 42px; }
.sx-gr i { position: absolute; left: 0; right: 0; height: 1px; background: #eeedf5; }
.sx-gr span { position: absolute; right: calc(100% + 8px); top: -7px; color: var(--muted); font-size: 10.5px; font-style: normal; white-space: nowrap; }
.sx-cs { position: relative; display: flex; height: 100%; }
.sx-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 8px; outline-offset: -2px; cursor: default; }
.sx-col:hover { background: linear-gradient(transparent, rgba(24,0,173,.04)); }
.sx-st { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; min-height: 0; }
.sx-st i { flex: none; width: min(26px, 62%); border-radius: 2px; }
.sx-st i:last-child { border-radius: 4px 4px 2px 2px; }
.sx-st.is-side { flex-direction: row; align-items: flex-end; justify-content: center; }
.sx-st.is-side i { width: min(13px, 34%); border-radius: 4px 4px 0 0; }
.sx-col small { flex: none; height: 24px; color: var(--muted); font-size: 10.5px; line-height: 28px; text-align: center; white-space: nowrap; }
.sx-pk { position: absolute; left: 0; right: 0; color: var(--ink); font-size: 10.5px; font-weight: 700; text-align: center; white-space: nowrap; }
.sx-hb { display: grid; gap: 4px; }
.sx-hr { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; }
.sx-hr:hover { background: #f8f7fd; }
.sx-hn { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sx-ht { display: flex; gap: 2px; min-width: 0; height: 12px; }
.sx-ht i { min-width: 3px; height: 100%; border-radius: 2px; }
.sx-ht i:last-child { border-radius: 2px 4px 4px 2px; }
.sx-hr b { color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sx-dn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; padding: 6px 0; }
.sx-dw { position: relative; width: 150px; height: 150px; }
.sx-dw circle { cursor: default; }
.sx-dw span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.sx-dw b { color: var(--ink); font-size: 24px; line-height: 1.1; }
.sx-dw small { color: var(--muted); font-size: 11px; }
.sx-dl { display: grid; gap: 7px; min-width: 150px; margin: 0; padding: 0; list-style: none; }
.sx-dl li { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; }
.sx-dl b { margin-left: auto; color: var(--ink); }
.sx-tb summary { color: var(--brand); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sx-tb .tbl { margin-top: 8px; overflow-x: auto; }
.sx-tb table { min-width: 0; font-size: 12px; }
.sx-tip { position: fixed; z-index: 90; max-width: 240px; padding: 8px 11px; border-radius: 9px; background: #16133d; color: #fff; font-size: 11.5px; line-height: 1.5; white-space: pre-line; pointer-events: none; box-shadow: 0 8px 22px rgba(12,5,97,.28); }
.sx-tip[hidden] { display: none; }
@media (max-width: 900px) { .sx-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .sx-pl { height: 200px; padding-left: 34px; } .sx-gr { left: 34px; } .sx-col small { font-size: 9px; } .sx-pk { display: none; } }
/* Bảng lương */
.pay__h { align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.pay__h h1 { margin: 0; font-size: 20px; }
.pay__f label { min-width: 230px; color: var(--muted); font-size: 11.5px; }
.pay__h + .sx-ks { margin-bottom: 10px; }
.pay__s { display: block; color: var(--text); }
.pay__s .ae-pr-slip { gap: 14px; }
.pay__s .ae-card { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.pay__s .ae-pr-box h3, .pay__s .ae-pr-slip .ae-card > h3 { margin: 0 0 10px; color: var(--ink); font-size: 14px; }
.pay__s .ae-small { font-size: 11.5px; }
.pay__s .ae-pr-hero { margin: 0; padding: 22px 24px; border-radius: 16px; background: linear-gradient(120deg, #0c0561, var(--brand) 62%, #3d2fd6); box-shadow: 0 10px 26px rgba(24,0,173,.2); }
.pay__s .ae-pr-av--lg { width: 52px; height: 52px; font-size: 20px; }
.pay__s .ae-pr-hero__k { color: #ffc299; font-size: 11px; }
.pay__s .ae-pr-hero h2 { margin: 2px 0 1px; font-size: 18px; }
.pay__s .ae-pr-hero p { font-size: 12.5px; }
.pay__s .ae-pr-hero__net { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.2); }
.pay__s .ae-pr-hero__net small { font-size: 12px; }
.pay__s .ae-pr-hero__net strong { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.pay__s .ae-pr-hero__net em { max-width: 300px; font-size: 11.5px; }
.pay__s .ae-pr-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.pay__s .ae-pr-facts > div { padding: 12px 14px; border-radius: 12px; }
.pay__s .ae-pr-facts small { font-size: 11.5px; }
.pay__s .ae-pr-facts b { font-size: 17px; font-weight: 700; }
.pay__s .ae-pr-facts em { font-size: 11px; }
.pay__s .ae-pr-bigprog { height: 34px; margin: 0; background: none; overflow: visible; }
.pay__s .ae-pr-bigprog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 99px; background: #ebeaf4; }
.pay__s .ae-pr-bigprog span { inset: auto auto 0 0; height: 10px; background: var(--ok); }
.pay__s .ae-pr-bigprog em { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: left; text-shadow: none; }
.pay__s .ae-pr-frac, .pay__s .ae-pr-draft { margin: 0; font-size: 12.5px; }
.pay__s .ae-pr-adj { margin: 0; }
.pay__s .ae-pr-adj li { border-style: solid; border-color: var(--line); font-size: 12.5px; }
.pay__s .ae-pr-cols { gap: 14px; }
.pay__s .ae-pr-lines th, .pay__s .ae-pr-lines td { padding: 9px 0; border-bottom: 1px solid #f0eff6; font-size: 13px; }
.pay__s .ae-pr-lines th { color: var(--text); font-weight: 500; }
.pay__s .ae-pr-lines th small { font-size: 11px; }
.pay__s .ae-pr-lines td { color: var(--ink); font-weight: 600; }
.pay__s .ae-pr-lines tr.is-total th, .pay__s .ae-pr-lines tr.is-total td { padding-top: 11px; border-top: 1px solid var(--ink); font-weight: 700; }
.pay__s .ae-pr-netline { margin-top: 12px; padding: 11px 14px; background: var(--ok-50); color: #0f5132; font-size: 13px; }
.pay__s .ae-pr-netline b { font-size: 17px; }
.pay__s .ae-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pay__s .ae-table { width: 100%; border-collapse: collapse; }
.pay__s .ae-table th { padding: 9px 12px; background: #f6f5fc; color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; white-space: nowrap; }
.pay__s .ae-table td { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.pay__s .ae-table tbody tr:hover td { background: #fbfbfe; }
.pay__s .ae-pr-svc { font-size: 12.5px; }
.pay__s .ae-pr-t { font-size: 11px; }
.pay__s .ae-badge { padding: 2px 9px; font-size: 11px; }
.pay__s .ae-pr-ack textarea { width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid var(--input); border-radius: 10px; font: inherit; font-size: 13px; }
.pay__s .ae-pr-ack .ae-btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.pay__s .ae-pr-ack blockquote { font-size: 12.5px; }
.pay__j { gap: 12px; margin-top: 14px; padding: 18px; }
.pay__j h2 { margin: 0; color: var(--ink); }
.pay__t { display: grid; text-align: right; }
.pay__t small { color: var(--muted); font-size: 11px; }
.pay__j ul { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pay__j li { gap: 11px; padding: 10px 12px; border-radius: 0; background: #fff; transition: background .15s; }
.pay__j li + li { border-top: 1px solid var(--line); }
.pay__j li:hover { background: var(--brand-50); }
.pay__i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-50); color: var(--accent-d); font-style: normal; }
.pay__j li > span:first-of-type { flex: 1; min-width: 0; }
.pay__j .btn { gap: 7px; }
@media (max-width: 700px) { .pay__s .ae-pr-hero__net { padding-left: 0; border-left: 0; text-align: left; } .pay__s .ae-pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Đầu việc */
.sjs { gap: 10px; }
.sjs__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sjs__h h3 { padding-top: 0; border-top: 0; }
.sjs__h .btn { gap: 6px; min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.sjs__p { display: flex; align-items: center; gap: 10px; }
.sjs__p span { flex: 1; height: 8px; border-radius: 99px; background: #ebeaf4; overflow: hidden; }
.sjs__p i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.sjs__p small { flex: none; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.sjs__t { display: flex; flex-wrap: wrap; gap: 6px; }
.sjs__t button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sjs__t button.is-on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.sjs__t em { font-style: normal; opacity: .75; }
.sjs__e { margin: 0; padding: 14px; color: var(--muted); font-size: 12.5px; text-align: center; }
.sjl { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; list-style: none; }
.sj + .sj { border-top: 1px solid var(--line); }
.sj[hidden] { display: none; }
.sj summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; list-style: none; cursor: pointer; }
.sj summary::-webkit-details-marker { display: none; }
.sj summary:hover { background: #fbfbfe; }
.sj input[type=checkbox] { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--ok); }
.sj__m { flex: 1; display: grid; gap: 3px; min-width: 0; }
.sj__m b { color: var(--ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.sj.is-done .sj__m b { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.sj__k { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.sj__k:empty { display: none; }
.sj__k em { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-style: normal; }
.sj.is-late .sj__d { color: var(--bad); font-weight: 600; }
.sj.is-soon .sj__d { color: var(--accent-d); font-weight: 600; }
.sj__a { flex: none; display: flex; align-items: center; gap: 2px; }
.sj__a button, .sj__f button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sj__a button:hover { background: var(--brand-50); color: var(--brand); }
.sj__a [data-cdel]:hover, .sj__f button:hover { background: var(--bad-50); color: var(--bad); }
.sj__c { width: 8px; height: 8px; margin: 0 6px 0 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.sj details[open] .sj__c { transform: rotate(225deg) translate(-2px, -2px); }
.sj__b { display: grid; gap: 10px; padding: 2px 12px 12px 39px; }
.sj__b small, .sjf__g > span small { color: var(--muted); font-size: 11px; font-weight: 400; }
.sj__b p { margin: 2px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sj__f { display: grid; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; }
.sj__f li { display: flex; align-items: center; gap: 4px; }
.sj__f a { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--brand); font-size: 12px; text-decoration: none; }
.sj__f a:hover { border-color: var(--brand); background: var(--brand-50); }
.sj__f a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj__f a small { flex: none; color: var(--muted); font-size: 11px; }
.sjf { display: grid; gap: 12px; padding: 20px 22px; }
.sjf__h { position: relative; padding-right: 40px; }
.sjf__h h2 { margin: 0; font-size: 16px; }
.sjf textarea, .sjf input:not([type=file]) { width: 100%; }
.sjf__g { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 600; }
.sjf__g .sjf__d { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px; border: 1px dashed var(--input); border-radius: 12px; background: #fbfbfe; color: var(--muted); font-weight: 400; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sjf__g .sjf__d:hover { border-color: var(--brand); background: var(--brand-50); }
.sjf__d b { color: var(--brand); }
.sjf__d small { font-size: 11px; }
.sjf__d input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sjf__n { display: flex; flex-wrap: wrap; gap: 5px; }
.sjf__n:empty { display: none; }
.sjf__n span { padding: 3px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 11px; font-weight: 500; }
.sjf__a { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sjf__a .btn { gap: 7px; min-height: 40px; }
@media (max-width: 560px) { .sjs__h { flex-wrap: wrap; } .sj__b { padding-left: 12px; } .sjf { padding: 16px; } .sj__a button { width: 34px; height: 34px; } }
/* Ô tích xếp theo lưới, thẳng hàng giữa các nhóm */
.ik-ks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; }
.ik-ks .ik-k { align-items: center; min-width: 0; }
.ik-ks .ik-k input { margin: 0; }
/* Đơn đang nhập dở */
.ik-dr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 12px 0 2px; padding: 12px 14px; border: 1px solid #ffd9bf; border-radius: 12px; background: var(--accent-50); color: var(--accent-d); }
.ik-dr span { flex: 1 1 220px; display: grid; min-width: 0; }
.ik-dr b { color: var(--ink); font-size: 13px; }
.ik-dr small { color: var(--muted); font-size: 11.5px; }
.ik-dr .btn { min-height: 36px; }
/* Popup chi tiết, biểu mẫu: khung cố định, nội dung cuộn bên trong */
.dlg { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 16px; background: #fff; }
.dlg[open] { display: flex; flex-direction: column; }
.dlg > .td, .dlg > .f { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfcde0 transparent; }
.dlg > .td::-webkit-scrollbar, .dlg > .f::-webkit-scrollbar { width: 8px; }
.dlg > .td::-webkit-scrollbar-thumb, .dlg > .f::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: #cfcde0; }
.dlg > .td { padding: 0 22px 22px; }
.td > header { position: sticky; top: 0; z-index: 4; min-height: 54px; margin: 0 -22px; padding: 12px 58px 12px 22px; align-items: center; border-bottom: 1px solid var(--line); background: #fff; }
.td > header .td__x { right: 16px; top: 11px; display: grid; place-items: center; }
.td > h2 { margin-top: 4px; }
.td__c, .td__t { background-clip: padding-box; }
@media (max-width: 560px) { .dlg { width: 100vw; max-height: 100vh; border-radius: 0; } .dlg > .td { padding: 0 16px 16px; } .td > header { margin: 0 -16px; padding: 12px 54px 12px 16px; } }
/* Popup đóng báo giá */
.cfm--close { width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
.cfm__r { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; }
.cfm__r legend { margin-bottom: 6px; padding: 0; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.cfm__r label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.cfm__r label:hover { border-color: #ff9d8c; background: #fff8f6; }
.cfm__r label:has(input:checked) { border-color: var(--bad); background: var(--bad-50); color: var(--ink); font-weight: 600; }
.cfm__r input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--bad); }
.cfm__n { color: var(--muted); font-size: 11.5px !important; }
.cfm .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Tổng lương toàn công ty */
.pc { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); overflow: hidden; }
.pc__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 24px; background: linear-gradient(120deg, #0c0561, var(--brand) 62%, #3d2fd6); color: #fff; }
.pc__h small { color: #d9d6fb; font-size: 12px; }
.pc__h h2 { display: inline; margin: 0; color: #fff; font-size: 18px; }
.pc__h > div:first-child small { display: block; color: #ffc299; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pc__st { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 11px; font-weight: 600; vertical-align: 2px; }
.pc__n { display: grid; text-align: right; }
.pc__n strong { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.pc > .lx { margin: 10px 18px 0; }
.pc__k { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-bottom: 1px solid var(--line); }
.pc__k > div { display: grid; gap: 2px; padding: 13px 18px; border-right: 1px solid var(--line); }
.pc__k > div:last-child { border-right: 0; }
.pc__k small { color: var(--muted); font-size: 11.5px; }
.pc__k b { color: var(--ink); font-size: 16px; font-weight: 700; }
.pc__t { overflow-x: auto; }
.pc__t table { width: 100%; min-width: 620px; border-collapse: collapse; }
.pc__t th { padding: 9px 12px; background: #f6f5fc; color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; white-space: nowrap; }
.pc__t th:first-child, .pc__t td:first-child { padding-left: 18px; }
.pc__t td { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--text); font-size: 12.5px; white-space: nowrap; }
.pc__t .r { text-align: right; }
.pc__t tbody tr { cursor: pointer; transition: background .15s; }
.pc__t tbody tr:hover { background: #fbfbfe; }
.pc__t tr.is-on { background: var(--brand-50); }
.pc__t tr.is-more { display: none; }
.pc__u { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; }
.pc__b { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: #ebeaf4; overflow: hidden; }
.pc__b i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.pc__ch { width: 40px; color: var(--muted); text-align: center; }
.pc__m { display: block; width: 100%; min-height: 42px; border: 0; border-top: 1px solid var(--line); background: #fff; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pc__m:hover { background: var(--brand-50); }
@media (max-width: 700px) { .pc__h { padding: 16px; } .pc__n { text-align: left; } .pc__k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc__k > div { border-bottom: 1px solid var(--line); } }
/* Báo lỗi hệ thống */
.bell--bug { display: inline-flex; align-items: center; gap: 6px; color: var(--bad); }
.bell--bug:hover { border-color: var(--bad); background: var(--bad-50); color: var(--bad); }
.bg { gap: 12px; }
.bg__t { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 700; }
.bg__t .ic { color: var(--bad); }
.bg__f { display: grid; gap: 12px; }
.bg__f > label, .bg__l legend { display: grid; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 600; }
.bg__f textarea, .bg__f input[name=title] { width: 100%; }
.bg__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.bg__l legend { margin-bottom: 6px; padding: 0; }
.bg__l label { display: flex; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.bg__l label:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.bg__l label.is-high:has(input:checked) { border-color: var(--bad); background: var(--bad-50); }
.bg__l input { flex: none; margin: 2px 0 0; accent-color: var(--brand); }
.bg__l span { display: grid; min-width: 0; }
.bg__l b { color: var(--ink); font-size: 12.5px; }
.bg__l small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.bg__n { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-50); color: var(--text); font-size: 11.5px; line-height: 1.5; }
.bg__n .ic { flex: none; margin-top: 2px; color: var(--accent-d); }
.bgl { display: grid; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; list-style: none; }
.bgi + .bgi { border-top: 1px solid var(--line); }
.bgi summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; list-style: none; cursor: pointer; }
.bgi summary::-webkit-details-marker { display: none; }
.bgi summary:hover { background: #fbfbfe; }
.bgi__m { flex: 1; display: grid; min-width: 0; }
.bgi__m b { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.bgi__m small { color: var(--muted); font-size: 11px; }
.bgi__l, .bgi__s { flex: none; padding: 2px 9px; border-radius: 999px; background: #f1f0f8; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.bgi.is-high .bgi__l { background: var(--bad-50); color: var(--bad); }
.bgi__s.is-new { background: var(--accent-50); color: var(--accent-d); }
.bgi__s.is-doing { background: var(--brand-50); color: var(--brand); }
.bgi__s.is-fixed { background: var(--ok-50); color: var(--ok); }
.bgi__b { display: grid; gap: 10px; padding: 2px 12px 12px; }
.bgi__b > p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.bgi__b > .bgi__t { color: var(--muted); font-size: 11px; }
.bgi__p { padding: 9px 12px; border-radius: 10px; background: var(--brand-50); }
.bgi__a { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.bgi__a textarea { width: 100%; }
.bgi__r { display: flex; justify-content: space-between; gap: 8px; }
.bgi__r .btn { gap: 6px; min-height: 34px; margin: 0; }
@media (max-width: 560px) { .bg__l { grid-template-columns: minmax(0, 1fr); } .bell--bug span { display: none; } .bgi summary { flex-wrap: wrap; } .bgi__m { flex-basis: 100%; } }
/* Gợi ý nội dung Job, ưu tiên Bình thường trên thẻ */
.f .ik-sg { margin-top: -6px; }
.pri--high { background: #fff1e6; color: #c2410c; }
.pri--urgent { background: #fee2e2; color: #c02626; }
/* Dòng mô tả việc */
.wl { display: flex; align-items: center; gap: 4px 10px; min-width: 0; overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.wl > span { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.wl > span:last-child { flex: 0 1 auto; }
.wl em { overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.wl .ic { flex: none; margin: 0; color: var(--brand); }
.tk__w.wl { display: flex; }
.tk__w.wl span { display: inline-flex; -webkit-line-clamp: unset; }
.td__w.wl { margin-top: -8px; gap: 4px 14px; font-size: 12px; }
/* Ô thông tin có biểu tượng */
.td__f, .td__c { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; padding: 12px 14px; }
.td__f .tf, .td__c .tf { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tf > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--brand); font-style: normal; box-shadow: 0 0 0 1px var(--brand-100); }
.td__c .tf > i { background: var(--brand-50); box-shadow: none; }
.tf > span { display: grid; min-width: 0; }
.tf small { color: var(--muted); font-size: 11px; }
.tf b { color: var(--ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.td__f .td__o { justify-self: end; margin: 0; }
.td__f .td__r { grid-column: 1 / -1; }
html:has(dialog[open]) { overflow: hidden; }
/* Ô chọn tròn trong popup: không nhận kiểu ô nhập chung */
.cfm__r input[type=radio], .bg__l input[type=radio] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; box-shadow: none; accent-color: var(--brand); }
.cfm__r input[type=radio] { accent-color: var(--bad); }
/* Popup đóng báo giá gọn, nút luôn hiện */
.cfm--close { overflow: hidden; }
.cfm--close[open] { display: flex; flex-direction: column; }
.cfm--close .cfm__b { flex: 1; min-height: 0; gap: 10px; overflow-y: auto; padding: 20px 22px 0; scrollbar-width: thin; }
.cfm--close .cfm__f { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 9px 12px; }
.cfm--close .cfm__f li { font-size: 12.5px; }
.cfm__r { gap: 5px; }
.cfm__r legend { margin-bottom: 5px; }
.cfm__r label { min-height: 36px; padding: 6px 11px; font-size: 12.5px; }
.cfm--close .cfm__a { position: sticky; bottom: 0; margin: 2px -22px 0; padding: 12px 22px 16px; background: #fff; }
/* Popup báo lỗi */
.dlg > .td { overflow-x: hidden; }
.bg > .sjs__t { margin-top: 2px; }
.bg__f { gap: 13px; }
.bg__f > label { gap: 5px; }
.bg__l { align-items: stretch; }
.bg__l label { align-items: flex-start; min-width: 0; padding: 10px 11px; }
.bg__l input[type=radio] { margin-top: 1px; }
.bg__l label.is-high input[type=radio] { accent-color: var(--bad); }
.bg__l b { line-height: 1.3; }
.bg__l small { margin-top: 1px; }
.bg__f .sjf__d { padding: 14px; }
.bg__f .sjf__d .ic { color: var(--brand); }
.bg .sjf__a { position: sticky; bottom: -22px; z-index: 3; margin: 0 -22px -22px; padding: 12px 22px 16px; background: #fff; }
@media (max-width: 560px) { .bg .sjf__a { bottom: -16px; margin: 0 -16px -16px; padding: 12px 16px; } .cfm--close .cfm__a { margin: 2px -16px 0; padding: 12px 16px; } .cfm--close .cfm__b { padding: 16px 16px 0; } }
/* Popup cuộn: mỗi hàng giữ đúng chiều cao nội dung, không bị ép thấp xuống */
.dlg > .td, .dlg > .f, .cfm--close .cfm__b { grid-auto-rows: max-content; align-content: start; }
.td__w.wl { flex: none; min-height: 20px; margin-top: -6px; line-height: 20px; }
/* Việc đang chờ nhận */
[data-pool] { cursor: pointer; }
.ls__h .seg { margin: 0 0 0 auto; }
.ls__h { flex-wrap: wrap; }
/* Trao đổi */
.cht { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; margin-top: 14px; min-height: 480px; }
.cht__s { display: grid; align-content: start; gap: 6px; max-height: 70vh; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cht__s button { display: grid; gap: 1px; width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cht__s button:hover { background: #fbfbfe; }
.cht__s button.is-on { border-color: var(--brand-100); background: var(--brand-50); }
.cht__s b { display: flex; justify-content: space-between; gap: 6px; color: var(--ink); font-size: 12.5px; }
.cht__s b em { padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-style: normal; }
.cht__s span, .cht__s small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht__s span { font-size: 12px; }
.cht__s small { color: var(--muted); font-size: 11px; }
.cht .cht__t { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cht__t { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cht__l { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.cht .cht__l { max-height: 56vh; }
.cht__m { justify-self: start; display: grid; gap: 3px; max-width: 86%; padding: 8px 11px; border-radius: 12px; background: #f4f3fa; }
.cht__m.is-mine { justify-self: end; background: var(--brand-50); }
.cht__m.is-int { background: var(--accent-50); }
.cht__m small { color: var(--muted); font-size: 10.5px; }
.cht__m small b { color: var(--ink); }
.cht__m p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cht__m a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: 12px; }
.cht__f { display: grid; gap: 7px; }
.cht__f textarea { width: 100%; }
.cht__a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cht__a .btn { gap: 6px; min-height: 36px; }
@media (max-width: 800px) { .cht { grid-template-columns: minmax(0, 1fr); } .cht__s { max-height: 220px; } }
/* Nộp bài */
.td__s[data-sub]:empty { display: none; }
.sub { display: grid; gap: 10px; }
.sub textarea { width: 100%; }
.sub .sjf__a { padding-top: 0; border-top: 0; }
/* Cổng nộp bài */
.rvs { display: grid; gap: 14px; margin-top: 14px; }
.rv { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.rv > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rv > header b { color: var(--brand); font-size: 12px; }
.rv h2 { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.rv .td__c { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.rv__l { display: grid; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; list-style: none; }
.rv__l li + li { border-top: 1px solid var(--line); }
.rv__l label { padding: 9px 12px; font-size: 12.5px; line-height: 1.45; }
.rv__l label:has(input:checked) { background: #f3fbf6; }
.rv .ik__a .btn--del { margin: 0 0 0 auto; }
.rv .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Thông báo */
.nt__h { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 44px; }
.nt__h h2 { margin: 0; flex: 1; }
.nt__h .td__x { top: -2px; display: grid; place-items: center; }
.nt__h .btn { gap: 6px; min-height: 34px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 560px) { .nt__h { flex-wrap: wrap; } }
/* Tiến độ đầu việc trên thẻ */
.tk__p { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tk__p .bar { flex: 1; margin: 0; }
.tk__p small { flex: none; color: var(--muted); font-size: 10.5px; }
[data-asg-all] { margin-top: 12px; }
/* Dòng thông tin có biểu tượng */
.ik__w.wl { margin: 1px 0 2px; }
.ik__c.wl { flex-wrap: wrap; font-size: 12px; white-space: normal; }
.pay__w.wl { margin-top: 1px; }
.rv > header h2 + .wl { margin-top: 3px; }
.btn .ic { flex: none; }
.btn { gap: 6px; }
/* Khung chứa thẻ: cột theo bề rộng khung, dòng dài rút gọn thay vì đẩy thẻ tràn ra ngoài */
.mo__c, .lg .ik-list, .rvs, .rv, .stack, .band__b, .lane__b { grid-template-columns: minmax(0, 1fr); }
.band__b { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.lane__b { grid-template-columns: none; }
.tk, .ik, .ik__m { min-width: 0; max-width: 100%; }
.wl { max-width: 100%; }
/* Rà soát giao diện điện thoại */
.sx-c { grid-template-columns: minmax(0, 1fr); }
.sx-tb .tbl table { min-width: 0; }
@media (max-width: 700px) {
	.cal__g { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
	.cal__c { min-height: 64px; padding: 3px; border-radius: 8px; }
	.cal__t { overflow: hidden; padding: 1px 3px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
	.cal__g > i { padding: 2px 0; font-size: 10px; }
	.stp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 0; }
	.stp li::before { display: none; }
}
@media (max-width: 560px) {
	.sx-col small { font-size: 10px; }
	.sx-col:nth-child(even) small { visibility: hidden; }
}
/* Nộp bài */
.ik__sd { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 12.5px; font-weight: 600; }
.spin { flex: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sj__st { flex: none; display: grid; place-items: center; width: 17px; height: 20px; color: var(--muted); font-style: normal; }
.sj__st.is-ok { color: var(--ok); }
/* Ô tìm đơn hàng */
.fnd { position: relative; display: flex; align-items: center; max-width: 560px; margin: 12px 0 0; }
.fnd > .ic { position: absolute; left: 13px; color: var(--brand); pointer-events: none; }
.fnd input { width: 100%; min-height: 42px; padding: 8px 38px 8px 40px; border-radius: 12px; background: #fff; font-size: 13px; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.fnd input::-webkit-search-cancel-button { display: none; }
.fnd button { position: absolute; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #f1f0f8; color: var(--muted); cursor: pointer; }
.fnd button[hidden] { display: none; }
.fnd button:hover { background: var(--bad-50); color: var(--bad); }
.fnd small { position: absolute; left: calc(100% + 12px); color: var(--muted); font-size: 12px; white-space: nowrap; }
.fnd + [data-fnd-res], .fnd + [data-ls-body] { margin-top: 2px; }
/* Danh sách kiểm duyệt */
.rv__p { display: flex; align-items: center; gap: 10px; }
.rv__p span { flex: 1; height: 8px; border-radius: 99px; background: #ebeaf4; overflow: hidden; }
.rv__p i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--ok); transition: width .2s; }
.rv__p small { flex: none; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.rv__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rv__c section, .rv__g { display: grid; gap: 6px; min-width: 0; }
.rv__c h3, .rv__g h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 13px; }
.rv__c h3 .ic { color: var(--brand); }
.rvi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 9px 12px; }
.rv__l .rvi + .rvi { border-top: 1px solid var(--line); }
.rvi.is-ok { background: #f3fbf6; }
.rvi.is-no { background: #fff5f3; }
.rvi__t { color: var(--text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.rvi__a { display: flex; align-items: center; gap: 5px; }
.rvi__a button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.rvi__a [data-ok]:hover { border-color: var(--ok); color: var(--ok); }
.rvi__a [data-no]:hover, .rvi__a [data-rm]:hover { border-color: var(--bad); color: var(--bad); }
.rvi.is-ok [data-ok] { border-color: var(--ok); background: var(--ok); color: #fff; }
.rvi.is-no [data-no] { border-color: var(--bad); background: var(--bad); color: #fff; }
.rvi__w { grid-column: 1 / -1; width: 100%; min-height: 36px; font-size: 12.5px; }
.rvi__w[hidden] { display: none; }
.rv__add { display: flex; gap: 8px; }
.rv__add input { flex: 1; min-width: 0; min-height: 38px; font-size: 12.5px; }
.rv__add .btn { flex: none; gap: 6px; min-height: 38px; }
@media (max-width: 760px) { .rv__c { grid-template-columns: minmax(0, 1fr); } .rvi { grid-template-columns: minmax(0, 1fr); } .fnd small { position: static; margin-left: 8px; } .fnd { flex-wrap: wrap; max-width: none; } }
/* Tổng quan */
.hm-h { margin-bottom: 14px; }
.hm-k { display: grid; min-width: 0; cursor: pointer; }
.hm-k .sx-k { transition: border-color .15s, box-shadow .15s; }
.hm-k:hover .sx-k { border-color: var(--brand-100); box-shadow: var(--shadow); }
.hm-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hm-p { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22,19,61,.04); }
.hm-p.is-wide { grid-column: 1 / -1; }
.hm-p h2 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink); font-size: 14px; }
.hm-p h2 .ic { color: var(--brand); }
.hm-e { margin: 0; padding: 16px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.hm-a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.hm-a:hover { border-color: var(--brand); background: var(--brand-50); }
.hm-a i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); color: var(--brand); font-style: normal; }
.hm-a.is-warn i { background: var(--accent-50); color: var(--accent-d); }
.hm-a.is-bad i { background: var(--bad-50); color: var(--bad); }
.hm-a span { flex: 1; min-width: 0; }
.hm-a b { color: var(--ink); font-size: 14px; }
.hm-a > .ic { flex: none; color: var(--muted); }
@media (max-width: 900px) { .hm-g { grid-template-columns: minmax(0, 1fr); } }
/* Bài nộp */
.sbl { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sbl > li { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sbl > li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sbl b { color: var(--ink); font-size: 12.5px; }
.sbl small { color: var(--muted); font-size: 11px; }
.sbl p { margin: 0; font-size: 12.5px; }
/* Đính kèm trong trao đổi */
.cht__c { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; }
.cht__c:hover { border-color: var(--brand); background: var(--brand-50); }
.cht__c input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cht__a .ik-k { flex: 1; min-width: 180px; }
/* Đầu trang Giao việc/Đơn hàng gọn */
.asg-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.asg-t .hd { margin: 0; }
.asg-t .sub { margin: 2px 0 0; }
.asg-t .lx { margin: 0; }
.stats.asg-s { gap: 10px; margin: 0 0 12px; }
.asg-s .stat { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; }
.asg-s .stat i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-style: normal; }
.asg-s .stat--b i { background: var(--accent-50); color: var(--accent-d); }
.asg-s .stat--c i { background: var(--bad-50); color: var(--bad); }
.asg-s .stat--d i { background: var(--ok-50); color: var(--ok); }
.asg-s .stat.is-0 i { background: #f1f0f8; color: var(--muted); }
.asg-s .stat b { font-size: 20px; line-height: 1; }
.asg-s .stat span { font-size: 12px; line-height: 1.3; }
.asg-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.asg-b .seg { margin: 0; }
.asg-b .fnd { flex: 1 1 300px; max-width: 420px; margin: 0; }
.asg-b .fnd input { min-height: 38px; box-shadow: none; }
.asg-b .fnd small { left: auto; right: 42px; }
.asg-b .fnd input { padding-right: 104px; }
@media (max-width: 760px) { .asg-b .fnd { flex-basis: 100%; max-width: none; } .asg-b .fnd small { position: absolute; margin: 0; } .stats.asg-s { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ô số tiền: luôn một dòng */
.sx-k.is-money b { font-size: 16px; white-space: nowrap; overflow-wrap: normal; }
.sx-k.is-good > i { background: var(--ok-50); color: var(--ok); }
.sx-k.is-good b { color: var(--ok); }
.cm__f { display: inline-flex; align-items: center; gap: 4px; margin: 3px 8px 0 0; color: var(--brand); font-size: 12px; }
.cht__f textarea { width: 100%; }
.cht__a .cht__c { margin-right: auto; }

/* Mã JOB-NG cùng kiểu mã đơn */
.jc { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--accent-50); color: #9a3412; font-size: .85em; font-weight: 700; }
.tk .ik__k { display: flex; margin: 4px 0; }

/* Form Tạo Job dùng cùng khối với Đơn báo giá */
.dlg--wide { width: min(880px, calc(100vw - 24px)); }
.ik-jf .ik-sec { min-width: 0; box-shadow: none; }
.ik-jf .ik-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.ik-jf .ik-total strong { color: var(--accent, #e85a00); font-size: 18px; }
.ae-party .ae-addr { gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ae-party .ae-addr legend { margin: 0 0 10px; padding: 0; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 17px; }
.ae-party .ae-addr__f > span:first-child { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ae-party .ae-addr__f input:not([type="radio"]), .ae-party .ae-addr__f .ae-fsel__btn { min-height: 42px; }
.ae-party .ae-grid-3 > *, .ae-party .ae-grid-2 > * { min-width: 0; }
.ae-party .ae-pf-place label:not(.ae-party__opt):not(.ae-addr__f) { display: flex; align-items: center; gap: 5px; height: 17px; }
.ae-party .ae-pf-place label .ae-itip { margin-left: 0; }
.f .ik-k { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-weight: 400; }
.ik-jf .ae-fsel__btn { min-height: 46px; }
.ae-fsel:has(select[name="job_type"]) .ae-fsel__search { display: none; }
.ae-fsel:has(select[name="job_type"]) .ae-fsel__panel { max-height: 400px; }
.ae-fsel:has(select[name="job_type"]) .ae-fsel__t { white-space: normal; line-height: 1.4; }
.ae-fsel:has(select[name="job_type"]) .ae-fsel__v { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ik-jf .ik-sec:has(.ae-fsel__panel:not([hidden])) { position: relative; z-index: 30; }
.ik-cf { display: grid; gap: 4px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 600; }
.ik-cf b { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; background: var(--accent-50); color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
[data-job-oth] { display: grid; }
[data-job-oth][hidden] { display: none; }
.ik-jh { position: sticky; top: -22px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -22px -22px 0; padding: 14px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.ik-jh h2 { margin: 0; }
.ik-jh { padding-right: 22px; }
.ik-jh .td__x { position: static; flex: none; display: grid; place-items: center; }
.ik-jf [data-job-it] { margin-top: 2px; }
.ik-jf [data-job-it] .ik-sg__l { white-space: nowrap; }
.ik-over { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bad-50); color: var(--bad); font-size: 12px; font-weight: 600; }
.ik-over[hidden] { display: none; }
.ik-docs--1 { grid-template-columns: minmax(0, 1fr); }
.ik-docs--1 .ik-doc { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.ik-jf .ik-note { margin: -6px 0 0; }
.dlg:has(.ik-jf) .btn--pri:disabled { opacity: .5; cursor: not-allowed; }
.ik-cl { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.ik-cl__h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ik-cl__h:hover { background: #fbfbfe; }
.ik-cl__h:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ik-cl__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f1f0f9; color: var(--muted); }
.ik-cl__t { flex: 1; display: grid; min-width: 0; }
.ik-cl__t b { font-size: 14px; }
.ik-cl__t small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.ik-cl__h em { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #f1f0f9; color: var(--text); font-size: 12px; font-style: normal; font-weight: 700; text-align: center; }
.ik-cl__ch { flex: none; width: 9px; height: 9px; margin: 0 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.ik-cl.is-open .ik-cl__ch { transform: rotate(-135deg) translate(-2px, -2px); }
.ik-cl__b { display: grid; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: #fbfbfe; }
.ik-cl__q { position: relative; display: block; }
.ik-cl__q .ic { position: absolute; left: 12px; top: 50%; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.ik-cl__q input { width: 100%; min-height: 42px; padding: 0 12px 0 36px; font-weight: 400; }
.ik-cl .ik-list { margin-top: 0; }
.ik-cl__more { justify-self: center; }
@media (prefers-reduced-motion: reduce) { .ik-cl__ch, .ik-cl__h { transition: none; } }
.trs { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding: 10px 13px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; background: #fff; color: var(--text); font-size: 12px; line-height: 1.5; }
.trs .ic { flex: none; margin-top: 1px; color: var(--brand); }
.trs b { display: block; color: var(--ink); }
.trs a { color: var(--brand); font-weight: 600; white-space: nowrap; }
.trs--c { margin: 0; border-left-width: 1px; background: var(--brand-50); border-color: transparent; }
@media (max-width: 700px) { .trs a { white-space: normal; } }
.trs--rf { margin-top: 10px; border-left-color: #c2410c; }
.trs--rf .ic, .trs--rf a { color: #c2410c; }
.rfl { display: grid; gap: 12px; margin-top: 14px; }
.rfc { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.rfc header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rfc h3 { font-size: 14px; }
.rfc p { margin: 0; }
.rfc__m { color: var(--muted); font-size: 12.5px; }
.rfc__f { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 6px; }
.rfc__f label { display: grid; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 600; }
@media (max-width: 700px) { .rfc__f { grid-template-columns: minmax(0, 1fr); } }
.ik-docs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ik-docs--2 .ik-doc { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.ik-crq { display: grid; gap: 8px; background: #fff7ed; }
.ik-crq p { margin: 0; }
.ik-crq__a { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .ik-docs--2 { grid-template-columns: minmax(0, 1fr); } }
.stp .is-stop { color: var(--bad); font-weight: 700; }
.stp .is-stop i { background: var(--bad); color: #fff; box-shadow: 0 0 0 4px var(--bad-50); }
.stp .is-stop::before { background: var(--bad); }
[data-qj] { display: grid; gap: 10px; }
[data-qj][hidden], [data-qjf][hidden] { display: none; }
.ik-sg.is-open .ik-sg__c button { flex: 0 1 auto; height: auto; min-height: 26px; padding: 4px 10px; border-radius: 10px; text-align: left; white-space: normal; }
[data-sg-n] .ik-sg__c button { max-width: min(320px, 100%); }
.ik-sg[data-sg-n], .ik-sg[data-sg-n] + .ik-nt { margin-top: 6px; }
.ik-sg[data-sg-n].is-open .ik-sg__c button { max-width: 100%; }
.ik-asg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px 4px 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-50); }
.ik-asg > span { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ik-asg .tk__q, .ik-asg .fsel { min-width: 220px; margin: 0; }
@media (max-width: 640px) { .ik-asg { width: 100%; } .ik-asg .tk__q, .ik-asg .fsel { flex: 1; min-width: 0; } }
.ik-cu { margin-top: 8px; padding: 9px 12px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-50); }
.ik__cu { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 13px; font-weight: 600; }

/* ---------- Popup trên điện thoại: luôn thấy đủ nội dung và nút ---------- */
.dlg { max-height: calc(100dvh - 40px); }
.dlg > .td, .dlg > .f { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cfm, .cfm--close { max-height: calc(100dvh - 40px); }
@media (max-width: 560px) {
	.dlg { max-height: 100vh; max-height: 100dvh; }
	.dlg > .td, .dlg > .f { max-height: 100vh; max-height: 100dvh; }
	.dlg > .f { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ---------- Trang giới thiệu App: thanh trên cùng, logo thương hiệu, người đăng nhập, chân trang ---------- */
.lp-bar { background: linear-gradient(180deg, #120082, #0a0350); box-shadow: 0 6px 24px rgba(12,5,97,.18); }
.lp-bar .lp-top { gap: 12px; padding: 12px 20px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: #fff; font-size: 18px; text-decoration: none; letter-spacing: -.01em; }
.lp-brand img { flex: none; width: 38px; height: 38px; padding: 4px; border-radius: 10px; background: #fff; object-fit: contain; }
.lp-brand b { font-weight: 800; }
.lp-brand i { color: var(--accent); font-style: normal; }
.lp-brand span { font-weight: 500; white-space: nowrap; }
.lp-acts { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lp-me { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 12px 4px 4px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; }
.lp-me__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 12.5px; font-weight: 800; }
.lp-me__t { display: grid; min-width: 0; line-height: 1.25; }
.lp-me__t b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.lp-me__t small { display: inline-flex; align-items: center; gap: 4px; color: #c9c5f5; font-size: 11.5px; }
.lp-out { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; }
.lp-out:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.lp-bar .btn--pri { gap: 7px; }
.lp-ft { display: grid; gap: 10px; justify-items: center; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13.5px; text-align: center; }
.lp-ft__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.lp-ft__brand img { width: 26px; height: 26px; }
.lp-ft__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.lp-ft__links a, .lp-ft__links span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.lp-ft__links a:hover { color: var(--brand); }
.lp-ft__links .ic { color: var(--brand); }
.lp-ft__c { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.lp-ft__c .ic { color: var(--accent); }
@media (max-width: 560px) {
	.lp-brand { font-size: 16px; } .lp-brand img { width: 34px; height: 34px; }
	.lp-me { gap: 7px; padding-right: 10px; } .lp-me__av { width: 28px; height: 28px; font-size: 11.5px; } .lp-me__t b { max-width: 92px; font-size: 12.5px; } .lp-me__t small { display: none; }
	.lp-brand span { font-size: 15px; } .lp-acts { gap: 6px; } .lp-out { width: 36px; height: 36px; }
	.lp-bar .btn--pri { min-height: 40px; padding: 0 12px; }
	.lp-bar .btn--pri span { display: none; }
}
.lp-hi { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; color: var(--ink); font-size: 16px; }
.lp-hi .ic { color: var(--brand); }
.lp-hero .btn--lg { gap: 8px; }
.lp-ft__brand { text-decoration: none; }
.lp-ft__brand:hover { color: var(--brand); }
.lp-ft__c span { display: inline-flex; align-items: center; gap: 6px; }
.lp-ft__c span + span::before { content: ""; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: #c9c5f5; }
@media (max-width: 560px) { .lp-ft__c span + span::before { display: none; } }

/* Chân trang trong App (trang Giao việc), đồng bộ với chân trang trang giới thiệu App */
.main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.main > .view { flex: 1 0 auto; }
.aft { margin-top: 28px; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; }
.aft__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px 12px; }
.aft__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.aft__brand img { width: 34px; height: 34px; flex: none; }
.aft__brand span { display: grid; line-height: 1.3; }
.aft__brand b { font-size: 15px; font-weight: 800; }
.aft__brand i { font-style: normal; color: var(--accent); }
.aft__brand small { color: var(--muted); font-size: 12px; }
.aft__go, .aft__ln { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.aft__go button, .aft__ln a, .aft__ln button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.aft__go button { border: 1px solid var(--line); background: #fafaff; color: var(--ink); font-weight: 600; }
.aft__go button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.aft__ln a:hover, .aft__ln button:hover { color: var(--brand); background: var(--brand-50); }
.aft .ic { flex: none; color: var(--brand); }
.aft__ln button .ic { color: #c2410c; }
.aft__c { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; padding: 10px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px dashed var(--line); font-size: 12.5px; }
.aft__c span { display: inline-flex; align-items: center; gap: 6px; }
.aft__c .ic { color: var(--accent); }
.side__av { flex: none; display: inline-grid; border-radius: 50%; }
.side__av:hover .av { box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 900px) {
	.aft__in { padding: 16px 14px 10px; }
	.aft__go { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.aft__go button { justify-content: center; min-height: 40px; }
	.aft__ln { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
	.aft__ln a, .aft__ln button { padding: 0 6px; font-size: 12.5px; }
	.aft__ln a, .aft__ln button { min-height: 40px; }
	.aft__c { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
}
.lp-me__av { position: relative; overflow: hidden; }
.lp-me__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Sản phẩm bàn giao, Mô tả yêu cầu: mỗi dòng một mục có dấu tích xanh */
.td__ok { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.td__ok li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border: 1px solid #d5f0e0; border-radius: 10px; background: #f3fbf6; color: var(--ink); line-height: 1.5; }
.td__ok li .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: #16a34a; color: #fff; stroke-width: 3; box-sizing: border-box; }
.td__ok li span { min-width: 0; overflow-wrap: anywhere; }

/* Ảnh đại diện của chính mình: cùng kiểu với website (chữ viết tắt trên nền cam, ảnh tròn phủ kín) */
.lp-me__av, .side__me .av { background: linear-gradient(135deg, #e85a00, #c44700); color: #fff; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.side__me .av { width: 32px; height: 32px; font-size: 12px; }
.lp-me__av img, .av img { background: #fff; }
.av--img { background: #fff; }

/* Khung Trách nhiệm bảo mật / duyệt hoàn tiền: cùng lề với nội dung bên trên */
.main > .trs { margin: 0 22px 10px; }
.main > .trs:last-of-type { margin-bottom: 0; }
@media (max-width: 900px) { .main > .trs { margin: 0 14px 10px; } }

/* Chân trang: nền tím nhạt dịu mắt, tách khỏi nội dung trắng (App và trang giới thiệu App) */
.aft, .lp-ft { border-top: 1px solid var(--brand-100); background: linear-gradient(180deg, #f7f5ff 0%, #efecff 100%); }
.aft { margin-top: 24px; }
.aft__c, .lp-ft__c { border-top-color: #dcd7fb; color: #5d5a86; }
.aft__go button { background: #fff; border-color: #dcd7fb; }
.aft__ln a:hover, .aft__ln button:hover { background: #fff; }
.aft__brand small { color: #5d5a86; }

/* Nút sao chép cạnh mã đơn / mã báo giá / mã Job */
.cpy { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 5px; vertical-align: middle; border: 1px solid #e3e1f0; border-radius: 6px; background: #fff; color: #8a88a3; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.cpy:hover { color: var(--brand); border-color: var(--brand-100); background: #f8f7ff; }
.cpy:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cpy.is-ok { color: #047857; border-color: #a7e3c8; background: #ecfdf3; }
.cpy .ic { width: 13px; height: 13px; }
.ik__k b .cpy { width: 20px; height: 20px; margin: -2px -3px 0 6px; }
.td h2 .cpy { width: 26px; height: 26px; margin-left: 8px; }
@media (max-width: 900px) { .cpy { width: 28px; height: 28px; } .ik__k b .cpy { width: 26px; height: 26px; } }

/* Chip mã (BG, MSHD, JOB) có nút sao chép gắn liền: cùng chiều cao, ngăn bằng vạch mảnh, cùng màu chip */
.ik__k b, .ik__k .ik__o { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; line-height: 1; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(24,0,173,.12); }
.ik__k .ik__o { box-shadow: inset 0 0 0 1px rgba(154,52,18,.16); }
.ik__k b .cpy { display: inline-grid; place-items: center; width: 26px; height: 24px; margin: 0 -9px 0 8px; padding: 0; border: 0; border-left: 1px solid rgba(24,0,173,.16); border-radius: 0 7px 7px 0; background: transparent; color: inherit; opacity: .62; transition: opacity .15s, background .15s; }
.ik__k .ik__o .cpy { border-left-color: rgba(154,52,18,.2); }
.ik__k b .cpy:hover, .ik__k b .cpy:focus-visible { opacity: 1; background: rgba(24,0,173,.08); }
.ik__k .ik__o .cpy:hover, .ik__k .ik__o .cpy:focus-visible { background: rgba(154,52,18,.1); }
.ik__k b .cpy.is-ok { opacity: 1; color: #047857; background: #ecfdf3; border-left-color: #a7e3c8; }
.ik__k b .cpy .ic { width: 13px; height: 13px; }
@media (max-width: 900px) { .ik__k b, .ik__k .ik__o { height: 30px; } .ik__k b .cpy { width: 32px; height: 30px; } }

/* Kênh tiếp nhận: màu nhận diện từng kênh, ô mã CTV giới thiệu */
.ik-cs--via .ik-c__b { min-height: 52px; }
.ik-cs--via .ik-c:has(input[value="zalo"]) .ik-c__ic { background: #e8f1ff; color: #0068ff; }
.ik-cs--via .ik-c:has(input[value="messenger"]) .ik-c__ic { background: #eef0ff; color: #6a3cf5; }
.ik-cs--via .ik-c:has(input[value="whatsapp"]) .ik-c__ic { background: #e6f9ee; color: #128c4a; }
.ik-cs--via .ik-c:has(input[value="ctv"]) .ik-c__ic { background: #fff3ea; color: var(--accent); }
.ik-cs--via .ik-c:has(input[value="web"]) .ik-c__ic { background: var(--brand-50); color: var(--brand); }
.ik-cs--via .ik-c input:checked + .ik-c__b .ik-c__ic { background: var(--brand); color: #fff; }
.ik-cs--via .ik-c input:checked + .ik-c__b { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 1px var(--brand); }
.ik-cs--via .ik-c input:checked + .ik-c__b .ik-c__k { border-color: var(--brand); background: var(--brand); }
.ik-ctv { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 10px 14px; align-items: end; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #ffd9bf; border-radius: 12px; background: linear-gradient(135deg, #fff8f2, #fff); }
.ik-ctv[hidden] { display: none; }
.ik-ctv__f label { margin: 0; }
.ik-ctv__f input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.ik-ctv__f input::placeholder { font-family: "Be Vietnam Pro", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.ik-ctv__r { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ik-ctv__r .ic { flex: none; }
.ik-ctv__r.is-ok { background: #fff; border: 1px solid var(--line); color: var(--text); }
.ik-ctv__r.is-ok b { display: block; color: var(--ink); font-size: 13.5px; }
.ik-ctv__r.is-ok small { color: var(--muted); }
.ik-ctv__r code, .ik__v code { padding: 1px 6px; border-radius: 6px; background: var(--brand-50); color: var(--brand); font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.ik-ctv__r.is-bad { background: var(--bad-50); color: var(--bad); }
.ik-ctv__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.ik__v--ctv { color: var(--accent-d) !important; }
@media (max-width: 640px) {
	.ik-ctv { grid-template-columns: 1fr; }
	.ik-cs--via { gap: 8px; }
	.ik-cs--via .ik-c__b, .ik-cs--via .ik-c > span.ik-c__b { gap: 8px; min-height: 46px; padding: 8px 10px; }
	.ik-cs--via .ik-c__ic { width: 28px; height: 28px; border-radius: 8px; }
	.ik-cs--via .ik-c__t b { font-size: 12.5px; white-space: nowrap; }
	.ik-cs--via .ik-c__k { display: none; } /* Kênh đang chọn đã nổi bật bằng viền và biểu tượng màu. */
}

/* Cổng nộp bài: Check List gửi khách (ghi chú từng mục, lời nhắn, tệp đính kèm thêm) - đồng bộ cổng quản trị */
.rvi__n { grid-column: 1 / -1; width: 100%; min-height: 30px; padding: 4px 10px; border: 1px dashed #b7e4c7; border-radius: 8px; background: #fff; font-size: 12px; }
.rvi__n:focus { border-style: solid; border-color: var(--ok); outline: none; }
.rv__x { border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.rv__x > summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.rv__x > summary::-webkit-details-marker { display: none; }
.rv__x > summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.rv__x[open] > summary { border-bottom: 1px solid var(--line); }
.rv__x > :not(summary) { margin: 10px 12px 0; }
.rv__x > :last-child { margin-bottom: 10px; }
.rv__msg { display: block; width: calc(100% - 24px); min-height: 56px; resize: vertical; font-size: 12.5px; }
.rv__att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv__f { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; }
.rv__f a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--ink); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.rv__f small { color: var(--muted); }
.rv__f button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.rv__f button:hover { background: var(--bad-50); color: var(--bad); }
.rv__up { cursor: pointer; }
.rv__hint { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
@media (max-width: 640px) {
	.rv__x > summary small { display: none; }
	.rv .ik__a .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
}

.rvi__n[hidden], .rv__x [hidden] { display: none; }
.rv__x .btn--sm { min-height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; }

/* Báo giá Mentor hướng dẫn (1:1), bảo mật thông tin cá nhân của khách */
.ik-cs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 1101px) { .ik-cs--t:has(> .ik-c:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ik-mt { display: grid; gap: 12px; }
.ik-mt .ik-note { margin: -4px 0 0; }
.ik-mt .ik-info { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.ik-mt .ik-info .ic { flex: none; margin-top: 2px; color: var(--brand); }
.ik-priv { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #c9e9d6; border-radius: 12px; background: #f3fbf6; }
.ik-priv > .ic { flex: none; margin-top: 2px; color: var(--ok); }
.ik-priv b { display: block; color: var(--ink); font-size: 13px; }
.ik-priv p { margin: 3px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) { .ik-cs--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mentor 1:1 trong Đơn báo giá: lịch học, cam kết liêm chính, văn bản (đồng bộ bước 6 và bước 9 trên website). */
.ik-ps { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-p { position: relative; cursor: pointer; }
.ik-p input { position: absolute; opacity: 0; pointer-events: none; }
.ik-p span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.ik-p span em { padding: 1px 6px; border-radius: 6px; background: #fff3ea; color: var(--accent); font-size: 10.5px; font-style: normal; font-weight: 700; }
.ik-p:hover span { border-color: var(--brand); }
.ik-p input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.ik-p input:checked + span em { background: rgba(255,255,255,.2); color: #fff; }
.ik-p input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ik-p.is-full span { opacity: .5; }
.ik-ps--seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--brand-50); }
.ik-ps--seg .ik-p span { min-height: 34px; border-color: transparent; background: transparent; }
.ik-ps--seg .ik-p input:checked + span { border-color: transparent; background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(24,0,173,.15); }
.ik-ps--day .ik-p span { justify-content: center; min-width: 44px; padding: 0 8px; }
.ik-g small[data-mt-dh] { color: var(--muted); font-weight: 500; }
.ik-g small[data-mt-dh].is-bad { color: var(--accent); }
.ik-mt-int { padding: 12px 14px; border: 1px solid #e3e0fb; border-radius: 12px; background: #f7f6ff; }
.ik-mt-int__h, .ik-mt-ag__h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.ik-mt-int__h a { color: var(--brand); text-decoration: underline; }
.ik-mt-int ul, .ik-mt-ag ol { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--text); font-size: 12px; line-height: 1.5; }
.ik-mt-ag { padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.ik-mt-doc { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid #c8ecd8; border-radius: 12px; background: #effaf4; color: var(--ink); font-size: 12px; line-height: 1.55; }
.ik-mt-doc > .ic { flex: none; margin-top: 2px; color: #0e7a4a; }
.ik-mt-doc a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.ik-mt-ok { padding: 10px 12px; border-radius: 10px; background: #fff8f1; }
@media (max-width: 640px) {
	.ik-ps--seg { display: flex; width: 100%; }
	.ik-ps--seg .ik-p { flex: 1 1 0; }
	.ik-ps--seg .ik-p span { justify-content: center; width: 100%; padding: 0 6px; }
	.ik-ps--day { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.ik-ps--day .ik-p span { min-width: 0; width: 100%; }
}

/* Cổng nộp bài 2: khung tệp (loại tệp, dung lượng, ngày giờ gửi, tải, xoá) và Check List dạng popup. */
.rv__c { align-items: start; }
.rv__c--1 { grid-template-columns: minmax(0, 1fr); }
.rvp { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe; }
.rvp h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 13px; }
.rvp h3 .ic { color: var(--brand); }
.rvp__n { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--brand-50); color: var(--brand); font-size: 11px; font-weight: 700; }
.rvp__e { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.rvp__note { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--brand-50); color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.rvf { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rvf__i { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.rvf__i:hover { border-color: #c9c5f3; box-shadow: 0 2px 8px rgba(24,0,173,.06); }
.rvf__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #eef0f6; color: #5b6075; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.rvf__ic--doc { background: #e8f0fe; color: #1a56db; }
.rvf__ic--pdf { background: #fdecec; color: #c81e1e; }
.rvf__ic--xls { background: #e7f6ee; color: #0e7a4a; }
.rvf__ic--ppt { background: #fff1e8; color: #c2410c; }
.rvf__ic--zip { background: #f3eefe; color: #6b3fd4; }
.rvf__t { display: grid; gap: 2px; min-width: 0; }
.rvf__n { overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.rvf__n:hover { color: var(--brand); text-decoration: underline; }
.rvf__m { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 11px; }
.rvf__m span { display: inline-flex; align-items: center; gap: 3px; }
.rvf__a { display: flex; gap: 4px; }
.rvf__a a, .rvf__a button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--brand); cursor: pointer; }
.rvf__a a:hover { border-color: var(--brand); background: var(--brand-50); }
.rvf__a .rvf__x { color: #c81e1e; }
.rvf__a .rvf__x:hover { border-color: #f3b4b4; background: #fdecec; }
.rv__ft { justify-content: flex-end; }
.rv__ft .btn--pri { gap: 8px; }
.rv__ob { padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: 11px; }
.rv.is-done > header .pill { background: #e7f6ee; color: #0e7a4a; }
.rv small[data-rvs].is-no { color: #c81e1e; }
.rv__dlg { width: min(860px, calc(100vw - 24px)); }
.rv__dlg[open] { display: flex; flex-direction: column; }
.rvd { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.rvd__h { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px 10px; }
.rvd__h > div { flex: 1; min-width: 0; }
.rvd__h b { color: var(--brand); font-size: 11.5px; }
.rvd__h h3 { margin: 2px 0 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.rvd > .rv__p { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.rvd__b { display: grid; gap: 12px; flex: 1; min-height: 0; padding: 14px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rvd__f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fbfbfe; }
.rvd__f .btn--del { margin-right: auto; }
.rvd__f .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
	.rv__c { grid-template-columns: minmax(0, 1fr); }
	.rv__dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.rvd { height: 100dvh; max-height: 100dvh; }
	.rvd__h, .rvd__b, .rvd__f { padding-left: 14px; padding-right: 14px; }
	.rvd > .rv__p { padding: 0 14px 10px; }
	.rvd__f .btn { flex: 1 1 auto; justify-content: center; }
	.rvd__f .btn--del { margin-right: 0; }
	.rv__ft .btn { flex: 1 1 auto; justify-content: center; }
}
.rvd__h .td__x { position: static; flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -4px -6px 0 0; border-radius: 9px; font-size: 22px; line-height: 1; }
.rvd__h .pill { flex: none; margin-top: 2px; }

/* 3.90: Khách cần hỗ trợ gì? - thẻ chọn cân đối, biểu tượng theo màu từng nhu cầu. */
.ik-cs--need { gap: 10px; }
.ik-cs--need .ik-c__b { min-height: 116px; padding: 14px 14px 12px; gap: 10px; border-radius: 14px; }
.ik-cs--need .ik-c__ic { width: 36px; height: 36px; border-radius: 11px; }
.ik-cs--need .ik-c__t b { padding-right: 24px; font-size: 13px; line-height: 1.35; }
.ik-cs--need .ik-c__t small { margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
.ik-cs--need .ik-c__k { top: 12px; right: 12px; }
.ik-cs--need .ik-c:has(input[value="vn"]) .ik-c__ic { background: #fdecec; color: #c81e1e; }
.ik-cs--need .ik-c:has(input[value="idx"]) .ik-c__ic { background: #e8f0fe; color: #1a56db; }
.ik-cs--need .ik-c:has(input[value="unrank"]) .ik-c__ic { background: #f3eefe; color: #6b3fd4; }
.ik-cs--need .ik-c:has(input[value="other"]) .ik-c__ic { background: #fff1e8; color: #c2410c; }
.ik-cs--need .ik-c:has(input[value="mentor"]) .ik-c__ic { background: #e7f6ee; color: #0e7a4a; }
.ik-cs--need .ik-c input:checked + .ik-c__b .ik-c__ic { background: var(--brand); color: #fff; }
.ik-cs--need .ik-c input:checked + .ik-c__b { box-shadow: 0 0 0 1px var(--brand), 0 6px 16px rgba(24,0,173,.1); }
@media (max-width: 1100px) and (min-width: 641px) {
	.ik-cs--need { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ik-cs--need .ik-c { grid-column: span 2; }
	.ik-cs--need .ik-c:nth-child(n+4):nth-last-child(-n+2) { grid-column: span 3; }
	.ik-cs--need .ik-c__b { min-height: 96px; }
}
@media (max-width: 640px) {
	.ik-cs--need { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ik-cs--need .ik-c:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ik-cs--need .ik-c__b { min-height: 104px; }
}
/* Ô chọn nhỏ (khung giờ, ngày học, hình thức): cỡ chữ gọn, đồng bộ website. */
.ik-p span { min-height: 32px; padding: 0 11px; font-size: 12px; }
.ik-ps--seg .ik-p span { min-height: 30px; }
/* Cổng nộp bài: ba nút cuối popup Check List cân đối. */
.rvd__f { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.rvd__f .btn { justify-content: center; width: 100%; min-height: 42px; margin: 0; padding: 0 14px; border-radius: 11px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rvd__f .btn--del { margin: 0; }
@media (max-width: 720px) {
	.rvd__f { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rvd__f .btn--pri { grid-column: 1 / -1; order: -1; }
	.rvd__f .btn { flex: none; font-size: 12.5px; }
	.rvd__f .btn--del:first-child:nth-last-child(2) { grid-column: 1 / -1; }
}
/* Chuyển nhanh sang website và Track Changes trong menu App. */
.side__go { display: grid; gap: 2px; padding: 0 10px 8px; }
.side__go:empty { display: none; }
.side__gl { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; color: inherit; font-size: 13px; text-decoration: none; opacity: .9; }
.side__gl:hover { background: rgba(255,255,255,.08); opacity: 1; }
.side__gl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__gl > .ic:last-child { opacity: .5; }
@media (min-width: 901px) {
	.side-mini .side__go { width: 100%; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.1); }
	.side-mini .side__gl { justify-content: center; padding: 9px 0; }
	.side-mini .side__gl span, .side-mini .side__gl > .ic:last-child { display: none; }
}

/* Lời nhắn gửi khách đã lưu: hiển thị, bấm Sửa mới sửa (đồng bộ website). */
.rv__mv { margin: 0 0 8px; padding: 10px 12px; border: 1px solid #e3e0fb; border-radius: 10px; background: #f7f6ff; }
.rv__mv[hidden] { display: none; }
.rv__mv > span { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12.5px; }
.rv__mv > span .ic { color: var(--brand); }
.rv__mv > span .btn { margin-left: auto; }
.rv__mv p { margin: 6px 0 0; color: var(--ink); font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }

/* Giao việc/Đơn hàng > Tất cả đơn hàng (toàn bộ đơn của trang quản trị). */
.ao { display: grid; gap: 12px; }
.ao__f { display: grid; gap: 10px; }
.ao__cs { display: flex; flex-wrap: wrap; gap: 6px; }
.ao__c { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ao__c em { padding: 1px 7px; border-radius: 99px; background: var(--brand-50); color: var(--brand); font-size: 11px; font-style: normal; }
.ao__c.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.ao__c.is-on em { background: rgba(255,255,255,.22); color: #fff; }
.ao__r { display: flex; flex-wrap: wrap; gap: 8px; }
.ao__r input { flex: 1 1 240px; min-height: 38px; }
.ao__r select { flex: 0 1 220px; min-height: 38px; }
.ao__t { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.ao__h, .ao__i { display: grid; grid-template-columns: 1.1fr 2fr 1.1fr 1fr .9fr 1fr .9fr 64px; gap: 10px; align-items: center; padding: 10px 14px; }
.ao__h { background: #f7f6ff; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ao__i { border-top: 1px solid var(--line); font-size: 12.5px; }
.ao__i:hover { background: #fbfbfe; }
.ao__i > span { display: grid; gap: 2px; min-width: 0; }
.ao__i small { color: var(--muted); font-size: 11px; }
.ao__code b { color: var(--brand); font-size: 12px; overflow-wrap: anywhere; }
.ao__who b { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.ao__who small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ao__m { font-weight: 700; color: var(--ink); }
.ao__i .pill { justify-self: start; }
.ao__w { color: #c2410c !important; font-weight: 600; }
.ao__ok { color: #0e7a4a !important; font-weight: 600; }
.ao__p { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 12px; }
.ao__n { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
@media (max-width: 1100px) {
	.ao__h { display: none; }
	.ao__i { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; }
	.ao__i .ao__who { grid-column: 1 / -1; order: -1; }
	.ao__i > span:last-child { grid-column: 1 / -1; }
	.ao__i > span:last-child .btn { justify-content: center; width: 100%; }
}
.ao .pill { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.ao .pill--ok { background: #e7f6ee; color: #0e7a4a; }
.ao .pill--warn { background: #fff4e5; color: #b45309; }
.ao .pill--bad { background: #fdecec; color: #b42318; }
.ao .pill--mute { background: #f1f1f6; color: #5b5a70; }
.ao .pill--brand { background: var(--brand-50); color: var(--brand); }

/* Nút "i" cạnh tiêu đề trang: mô tả trang hiện khi di chuột hoặc chạm. */
#v h1 { display: flex; align-items: center; gap: 8px; }
.h-i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--brand); font: italic 700 13px/1 Georgia, 'Times New Roman', serif; cursor: help; transition: border-color .15s, background .15s; }
.h-i:hover, .h-i:focus-visible { border-color: var(--brand); background: var(--brand-50); outline: none; }
.sx-tip { max-width: min(340px, calc(100vw - 16px)); }

/* Tiêu đề trang: Tải Excel, In danh sách và nút chính trên cùng một hàng. */
.hd, .ik-h, .ls__h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.h-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.h-acts .lx { margin: 0; }
@media (max-width: 640px) {
	.h-acts { width: 100%; justify-content: flex-start; margin-left: 0; }
}