/* Giao diện theo kiểu bảng quản trị quen thuộc: thanh bên tối 250px, thanh trên trắng 70px, nền xám nhạt. */
:root {
  --nen: #f8f8fb; --the: #fff; --vien: #eff2f7; --vien-o: #ced4da; --chu: #212529; --chu-mo: #868e96;
  --ben: #2a3042; --ben-chu: #a6b0cf; --ben-mo: #6a7187; --ben-dam: #0f1729; --tren-lam: #fff;
  --lam-nhat: color-mix(in srgb, var(--lam) 14%, #fff); --lam-vua: color-mix(in srgb, var(--lam) 55%, #fff); --lam-dam: color-mix(in srgb, var(--lam) 82%, #000);
  --ben-o: color-mix(in srgb, var(--ben-dam) 88%, #fff); --ben-vien: color-mix(in srgb, var(--ben-dam) 80%, #fff);
  --xanh: #34bfa3; --lam: #3b50df; --troi: #36a3f7; --do: #ff2c2c; --vang: #ffb822; --cam: #f7931e;
}
/* 5 giao diện màu: mỗi người tự chọn, chỉ đổi 3 màu gốc (màu chủ đạo, thanh bên, nền tối), mọi chỗ khác tự theo. */
:root[data-giao-dien="xanh-la"] { --lam: #1f9d6b; --ben: #1f3a30; --ben-dam: #0d1f18; }
:root[data-giao-dien="tim"] { --lam: #7048d8; --ben: #2f2a48; --ben-dam: #181430; }
:root[data-giao-dien="do-ruou"] { --lam: #b3294a; --ben: #3d2230; --ben-dam: #240f1a; }
:root[data-giao-dien="cam-nau"] { --lam: #c2620a; --ben: #3a2c20; --ben-dam: #21170f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.5 Poppins, "Segoe UI", Roboto, Arial, sans-serif; color: var(--chu); background: var(--nen); }
a { color: var(--lam); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
svg.bt { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Thanh bên ---- */
#ung-dung { display: flex; min-height: 100%; }
.thanh-ben { width: 250px; flex: none; background: var(--ben); color: var(--ben-chu); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; box-shadow: 0 12px 24px rgba(18, 38, 63, .03); z-index: 6; }
.thanh-ben .ten-tiem { height: 70px; flex: none; padding: 0 24px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--vang); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 70px; }
.thanh-ben .ten-tiem:hover { color: #ffd27a; }
.thanh-ben .nhom { padding: 12px 20px; font-size: 11px; font-weight: 600; letter-spacing: .55px; text-transform: uppercase; color: var(--ben-mo); }
.thanh-ben a, .thanh-ben .cha { display: flex; align-items: center; gap: 12px; width: calc(100% - 20px); margin: 2px 10px; min-height: 42px; padding: 9px 14px; border-radius: 6px; color: #eef1ff; font: inherit; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); cursor: pointer; text-align: left; transition: color .15s, background .15s, border-color .15s; }
.thanh-ben a:hover, .thanh-ben .cha:hover, .thanh-ben a.chon, .thanh-ben .cha.mo { color: #fff; }
.thanh-ben a:hover, .thanh-ben .cha:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .40); }
.thanh-ben a.chon { background: rgba(241, 214, 138, .30); border-color: #f1d68a; font-weight: 600; }
.thanh-ben a.ten-tiem, .thanh-ben a.ten-tiem:hover { width: auto; margin: 0; background: transparent; border: 0; border-radius: 0; }
.thanh-ben a.chon svg, .thanh-ben .cha.mo svg, .thanh-ben a:hover svg, .thanh-ben .cha:hover svg { color: #fff; }
.thanh-ben svg.bt { color: #f1d68a; }
.thanh-ben .cha::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.thanh-ben .cha.mo::after { transform: rotate(45deg); }
.thanh-ben .con { display: none; }
.thanh-ben .cha.mo + .con { display: block; }
.thanh-ben .con a { min-height: 0; padding: 7px 12px 7px 44px; }
.thanh-ben .chan { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.thanh-ben .chan h6 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .5); text-transform: uppercase; }
.thanh-ben .chan div { color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.thanh-ben .chan svg.bt { color: #fff; }

/* ---- Thanh trên ---- */
.than { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dau-trang { background: var(--the); height: 70px; flex: none; padding: 0 12px; display: flex; align-items: center; gap: 4px; box-shadow: 0 12px 24px rgba(18, 38, 63, .03); position: sticky; top: 0; z-index: 5; }
.dau-trang .gian { flex: 1; }
.nut-dau { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 70px; padding: 0 12px; border: 0; background: none; font: inherit; color: #555b6d; cursor: pointer; }
.anh-dd { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nut-dau:hover { color: var(--chu); }
.nut-dau.chinh { color: var(--lam); font-weight: 500; }
.nut-dau.chinh span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nut-dau svg.bt { width: 22px; height: 22px; }
.nut-dau.bao svg.bt { color: var(--lam); }
.nut-dau .so { position: absolute; top: 12px; left: 22px; background: var(--do); color: #fff; font-size: 9.75px; font-weight: 500; line-height: 1; padding: 2.5px 6px; border-radius: 800px; }
.chuong.rung svg { animation: rung-chuong .3s ease-in-out 5; transform-origin: 50% 0; color: var(--do); }
@keyframes rung-chuong { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
.xo { position: relative; }
.xo-ra { display: none; position: absolute; top: 100%; right: 0; min-width: 190px; background: #fff; border-radius: 4px; box-shadow: 0 12px 24px rgba(18, 38, 63, .12); padding: 6px 0; z-index: 30; }
.xo-ra.trai { right: auto; left: 0; min-width: 320px; padding: 14px; }
.xo.mo > .xo-ra { display: block; }
.xo-ra h5 { text-align: center; font-size: 15px; margin-bottom: 12px; }
.xo-ra button, .xo-ra a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 18px; border: 0; background: none; font: inherit; color: var(--chu); cursor: pointer; text-align: left; white-space: nowrap; }
.xo-ra button:hover, .xo-ra a:hover { background: #f8f9fa; }
.xo-ra:not(.trai):not(.viec) { padding: 8px; }
.xo-ra:not(.trai):not(.viec) button:not(:disabled), .xo-ra:not(.trai):not(.viec) a { margin: 0 0 5px; padding: 8px 12px; border: 1px solid #edf0f6; border-radius: 6px; background: #f8f9fc; font-weight: 500; transition: background .12s, border-color .12s, color .12s; }
.xo-ra:not(.trai):not(.viec) button:not(:disabled):last-child, .xo-ra:not(.trai):not(.viec) a:last-child { margin-bottom: 0; }
.xo-ra:not(.trai):not(.viec) button:not(:disabled):hover, .xo-ra:not(.trai):not(.viec) a:hover { background: var(--lam-nhat); border-color: var(--lam); color: var(--lam); }
.xo-ra:not(.trai):not(.viec) .do-chu { background: #fff5f5; border-color: #ffe1e1; }
.xo-ra:not(.trai):not(.viec) .do-chu:hover { background: #ffdede; border-color: var(--do); color: var(--do); }
.xo-ra:not(.trai):not(.viec) hr { margin: 3px 0 8px; }
.xo-ra .tiem { border: 1px solid #edf0f6; background: #f8f9fc; margin-bottom: 5px; transition: background .12s, border-color .12s; }
.xo-ra .tiem:hover { background: var(--lam-nhat); border-color: var(--lam); }
.xo-ra .do-chu { color: var(--do); }
/* Menu việc của hợp đồng: mỗi mục nằm trong một ô mờ có biểu tượng, rê chuột tới mục nào thì ô đó đậm màu lên. */
.xo-ra.viec { min-width: 216px; padding: 8px; }
.xo-ra.viec button, .xo-ra.viec a { gap: 10px; margin: 0 0 5px; padding: 8px 12px; border: 1px solid #edf0f6; border-radius: 6px; background: #f8f9fc; font-weight: 500; transition: background .12s, border-color .12s, color .12s; }
.xo-ra.viec button:last-child, .xo-ra.viec a:last-child { margin-bottom: 0; }
.xo-ra.viec svg.bt { width: 18px; height: 18px; color: #8a93a6; transition: color .12s; }
.xo-ra.viec button:hover, .xo-ra.viec a:hover { background: var(--lam-nhat); border-color: var(--lam); color: var(--lam); }
.xo-ra.viec button:hover svg.bt, .xo-ra.viec a:hover svg.bt { color: var(--lam); }
.xo-ra.viec hr { margin: 3px 0 8px; }
.xo-ra.viec .do-chu { background: #fff5f5; border-color: #ffe1e1; }
.xo-ra.viec .do-chu svg.bt { color: var(--do); }
.xo-ra.viec .do-chu:hover { background: #ffdede; border-color: var(--do); color: var(--do); }
.xo-ra.viec .do-chu:hover svg.bt { color: var(--do); }
.xo-ra hr { border: 0; border-top: 1px solid var(--vien); margin: 6px 0; }
.xo-ra .tiem { border-radius: 6px; padding: 8px; font-weight: 600; font-size: 14px; }
.xo-ra .tiem.chon { background: var(--lam-nhat); color: var(--lam); }
.xo-ra .tiem i { width: 32px; height: 32px; border-radius: 50%; background: #f1f3f5; color: var(--lam); display: inline-flex; align-items: center; justify-content: center; }
.xo-ra .tiem.chon i { background: var(--lam); color: var(--tren-lam); }

/* ---- Nội dung trang ---- */
#noi-dung { padding: 24px; }
.tieu-de { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.tieu-de h2 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin-right: auto; }
.the { background: var(--the); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); padding: 20px; margin-bottom: 24px; }
.the > h3 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

/* Dải số liệu tóm tắt nằm ngang, giữa trang */
.dai-so { background: var(--the); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); padding: 6px 12px; margin-bottom: 4px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 6px 16px; text-align: center; }
.dai-so div { padding: 0 16px; }
.dai-so p { margin: 0 0 4px; color: var(--chu-mo); text-transform: uppercase; white-space: nowrap; }
.dai-so b { display: block; font-size: 16.25px; font-weight: 600; color: var(--lam); }
.dai-so .do b { color: var(--do); }
/* Ô số liệu kiểu thẻ có biểu tượng tròn (trang chủ, báo cáo) */
.luoi-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; margin-bottom: 24px; }
.o-so { background: var(--the); border-radius: 4px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); position: relative; }
.o-so .ten { font-weight: 500; color: var(--chu-mo); }
.o-so .so { font-size: 19px; font-weight: 600; color: var(--chu); margin-top: 6px; }
.o-so.do .so { color: var(--do); }
.o-so.co-bt { padding-right: 78px; }
.o-so .tron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--lam); color: var(--tren-lam); display: flex; align-items: center; justify-content: center; }
.o-so .tron svg.bt { width: 24px; height: 24px; }

/* Các thẻ xếp cạnh nhau, biểu đồ tròn và bảng thông tin hai cột */
.luoi-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.bieu-do { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chu-thich { flex: 1; min-width: 150px; }
.chu-thich div { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.chu-thich i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chu-thich b { margin-left: auto; font-weight: 600; white-space: nowrap; }
.chu-thich span { width: 38px; text-align: right; color: var(--chu-mo); }
.bang-chi-tiet td { padding: 10px 4px; }

/* Dòng thời gian giao dịch trong ngày */
.dong-thoi-gian { list-style: none; margin: 0; padding: 0 0 0 4px; }
.dong-thoi-gian li { display: flex; gap: 14px; padding: 0 0 18px 18px; border-left: 2px dashed #ced4da; position: relative; margin-left: 4px; }
.dong-thoi-gian li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--lam); background: #fff; }
.dong-thoi-gian .gio { width: 44px; flex: none; font-weight: 600; }
.dong-thoi-gian small { display: block; color: var(--chu-mo); }

/* ---- Bảng ---- */
.bang-cuon { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: #f8f9fa; color: var(--chu-ro, #000); text-align: center; font-weight: 600; }
th, td { padding: 12px 6.4px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
td.phai, th.phai { text-align: right; }
td.giua { text-align: center; }
td.trong { text-align: center; color: var(--chu-mo); padding: 28px; }
td small { color: var(--chu-mo); display: block; font-size: 12px; }
td small.do-chu { color: var(--do); }
tr.tong td { font-weight: 700; background: #f8f9fa; }
.thu { color: #1a9c7f; font-weight: 600; }
.chi { color: var(--do); font-weight: 600; }
.xanh-duong { color: var(--lam); }
.ma-hd { color: var(--lam); font-weight: 500; cursor: pointer; white-space: nowrap; }
td.dinh-phai { position: sticky; right: 0; background: #fff; box-shadow: -1px 0 0 0 #dee2e6; white-space: nowrap; text-align: center; }
/* Ô đang có menu xổ ra phải nằm trên các dòng khác và trên các nút chuyển trang, kẻo menu bị đè. */
td.dinh-phai:has(.xo.mo) { z-index: 60; }
.xo.mo { position: relative; z-index: 60; }
th.dinh-phai { position: sticky; right: 0; box-shadow: -1px 0 0 0 #dee2e6; }

/* ---- Nút, nhãn, ô nhập ---- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 4px; padding: 7.5px 12px; font: inherit; cursor: pointer; background: #eff2f7; color: var(--chu); white-space: nowrap; line-height: 1.5; }
.nut:hover { filter: brightness(.95); }
.nut:disabled { opacity: .5; cursor: default; }
.nut.xanh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut.lam { background: var(--lam); border-color: var(--lam); color: var(--tren-lam); }
.nut.do { background: var(--do); border-color: var(--do); color: #fff; }
.nut.vien { background: none; border-color: var(--lam); color: var(--lam); }
.nut.vien:hover { background: var(--lam); color: var(--tren-lam); filter: none; }
.nut.vang { background: rgba(255, 184, 34, .1); color: var(--vang); }
.nut.nho { padding: 4px 8px; font-size: 11.4px; border-radius: 3.2px; }
.nut.vuong { width: 32px; height: 32px; padding: 0; border-radius: 3.2px; }
.nut.vuong.xam { background: rgba(134, 142, 150, .1); color: #868e96; }
.nut.vuong svg.bt { width: 16px; height: 16px; }
.nhan { display: inline-block; padding: 8px; border-radius: 4px; color: #fff; font-size: 9.75px; font-weight: 500; line-height: 1; background: var(--troi); white-space: nowrap; }
.nhan.cham_lai, .nhan.den_ngay { background: var(--cam); }
.nhan.qua_han, .nhan.da_xoa { background: var(--do); }
.nhan.da_chuoc { background: var(--xanh); }
.nhan.thanh_ly { background: #74788d; }
input, select, textarea { font: inherit; padding: 7.5px 12px; border: 1px solid var(--vien-o); border-radius: 4px; background: #fff; color: var(--chu-ro, #343a40); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--lam-vua); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lam) 15%, transparent); }
input:disabled, select:disabled { background: #f5f6f8; }
textarea { width: 100%; min-height: 60px; resize: vertical; }
.o-tien { text-align: right; }
.loc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.loc .gian { flex: 1; }

/* ---- Form ---- */
.form { display: grid; grid-template-columns: 170px 1fr; gap: 12px 14px; align-items: center; }
.form > label { font-weight: 500; }
.form > label b { color: var(--do); }
.form input:not([type=checkbox]):not([type=radio]), .form select { width: 100%; }
.form .hang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form .hang input:not([type=checkbox]):not([type=radio]) { width: auto; flex: 1; min-width: 80px; }
.form .muc { grid-column: 1 / -1; font-weight: 600; color: var(--lam); border-bottom: 1px solid var(--vien); padding: 8px 0 4px; margin-top: 6px; }
.form .ca-hang { grid-column: 1 / -1; }
.ghi-chu { color: var(--chu-mo); font-size: 12px; }
.canh-bao-lai { color: var(--do); font-size: 12px; }
.goi-y { border: 1px solid var(--vien); border-radius: 4px; max-height: 180px; overflow-y: auto; }
.goi-y div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--vien); }
.goi-y div:hover { background: var(--lam-nhat); }
.chan-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Ô nhập có nhãn đơn vị dính bên phải (Ngày, VNĐ) */
.kem-don-vi { display: flex; }
.kem-don-vi input { flex: 1; min-width: 0; border-radius: 4px 0 0 4px; }
.kem-don-vi span { display: flex; align-items: center; padding: 0 12px; background: #f5f6f8; border: 1px solid var(--vien-o); border-left: 0; border-radius: 0 4px 4px 0; color: #495057; }

/* ---- Hộp thoại ---- */
.nen-hop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 20; overflow-y: auto; padding: 28px 12px; }
.hop { background: var(--the); border-radius: 6px; max-width: 620px; margin: 0 auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.hop.rong { max-width: 1140px; }
.hop > header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--vien); }
.hop > header h3 { font-size: 15px; font-weight: 500; flex: 1; }
.hop > header h3 b { font-weight: 700; }
.hop > header button { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #555; }
.hop > .ruot { padding: 20px; }
.thong-tin { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 20px; margin-bottom: 14px; }
.thong-tin div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--vien); padding: 4px 0; }
.thong-tin div span { color: var(--chu-mo); }
.thong-tin div b { text-align: right; }
/* Đầu hợp đồng: hai bảng kẻ ô nằm cạnh nhau */
.dau-hop-dong { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.dau-hop-dong table { border: 1px solid var(--vien); }
.dau-hop-dong td { border: 1px solid var(--vien); padding: 9px 10px; color: var(--chu-mo); }
.dau-hop-dong td:last-child { text-align: right; color: var(--chu); font-weight: 600; }
.dau-hop-dong .ten-khach { color: var(--do); font-weight: 600; font-size: 14px; text-transform: uppercase; }
.dau-hop-dong .no td { color: var(--do); font-weight: 600; }
.the-tab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; clear: both; }
.the-tab button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #edf0f6; border-radius: 6px; background: #f8f9fc; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer; color: var(--chu); transition: background .12s, border-color .12s, color .12s; }
.the-tab button svg.bt { width: 17px; height: 17px; color: #8a93a6; transition: color .12s; }
.the-tab button:hover { background: var(--lam-nhat); border-color: var(--lam); color: var(--lam); }
.the-tab button:hover svg.bt { color: var(--lam); }
.the-tab button.chon, .the-tab button.chon:hover { background: var(--lam); border-color: var(--lam); color: var(--tren-lam); }
.the-tab button.chon svg.bt, .the-tab button.chon:hover svg.bt { color: var(--tren-lam); }
.tong-tien { font-size: 13px; font-weight: 600; color: var(--do); }
/* Form trong các thẻ của hợp đồng: nhãn canh phải, ô nhập ở giữa */
.khung-tab { border: 1px solid var(--vien); border-radius: 4px; padding: 20px 0; margin-bottom: 20px; }
#tab .form { grid-template-columns: 25% minmax(0, 34%); gap: 16px 20px; }
#tab .form > label { text-align: right; font-weight: 400; }
#tab .form .ca-hang, #tab .form .muc { grid-column: 1 / -1; margin: 0 20px; }
#tab .form .chan-form { grid-column: 2; justify-content: flex-start; margin: 0; }
/* Dòng chú thích nằm bên phải ô nhập, ngoài cột */
.co-ben-canh { position: relative; }
.ben-canh { position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--chu-mo); }
.ben-canh b { color: var(--xanh); }
.mo-rong { background: none; border: 0; padding: 0; color: var(--lam); text-decoration: underline; cursor: pointer; font: inherit; margin-bottom: 8px; }
.muc-hop { font-size: 14px; font-weight: 600; margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; }
.muc-hop .gian { flex: 1; }

/* ---- Thông báo nổi ---- */
#thong-bao { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
#thong-bao div { background: #1a9c7f; color: #fff; padding: 10px 16px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); max-width: 360px; }
#thong-bao div.loi { background: var(--do); }

/* ---- Thương hiệu NEXFIN: nền xanh đen, chữ M vàng ---- */
.thanh-ben .ten-tiem { gap: 10px; color: #fff; font-size: 19px; letter-spacing: 1px; background: transparent; }
.thanh-ben .ten-tiem:hover { color: #fff; }
.dau-ong-ba { background: var(--ben-dam); color: #fff; padding: 0 20px; gap: 10px; }
.dau-ong-ba b { font-size: 19px; letter-spacing: 1px; }
.dau-ong-ba .phu { color: #d9b765; margin-left: 6px; }
.dau-ong-ba .nut.nho { background: rgba(255, 255, 255, .12); color: #fff; }
.dau-ong-ba > span:not(.phu):not(.gian) { color: #c9d1e5; }

/* ---- Đăng nhập ---- */
body.trang-dang-nhap { background: var(--ben-dam); }
.dang-nhap { margin: auto; width: 360px; max-width: 92vw; padding: 20px; }
.dn-logo { text-align: center; margin-bottom: 26px; }
.dn-ten { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: 1px; margin-top: 10px; }
.dn-phu { color: #d9b765; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; margin-top: 2px; }
.dang-nhap input { width: 100%; margin-bottom: 12px; padding: 11px 12px; background: var(--ben-o); border-color: var(--ben-vien); color: #fff; }
.dang-nhap input::placeholder { color: #7f8aa8; }
.dang-nhap .dn-quen { margin: 16px 0 0; font-size: 12px; color: #7f8aa8; }
.dang-nhap .dn-loi-dan { margin: 0 0 14px; color: #a9b3cc; font-size: 13px; text-align: center; line-height: 1.5; }
.dang-nhap .nut.dn-phu-nut { margin-top: 10px; background: none; border: 1px solid var(--ben-vien); color: #a9b3cc; font-weight: 400; }
.o-mat-khau { position: relative; }
.o-mat-khau input { padding-right: 44px; }
.o-mat-khau .mat-xem { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: #7f8aa8; cursor: pointer; }
.o-mat-khau .mat-xem:hover { color: #f1d68a; background: rgba(255, 255, 255, .06); }
.o-mat-khau.nho input { width: 100%; padding-right: 38px; }
.o-mat-khau.nho .mat-xem { top: 50%; right: 3px; width: 30px; height: 30px; transform: translateY(-50%); color: #8a93a6; }
.o-mat-khau.nho .mat-xem:hover { color: var(--lam); background: color-mix(in srgb, var(--lam) 8%, transparent); }
.dang-nhap input:focus { border-color: #d9b765; box-shadow: 0 0 0 2px rgba(217, 183, 101, .25); }
.dang-nhap .nut { width: 100%; padding: 11px; background: linear-gradient(180deg, #f1d68a, #c8963a); border: 0; color: #1c1505; font-weight: 600; }

/* ---- Phân trang ---- */
.phan-trang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; color: var(--chu-mo); }
.phan-trang .gian { flex: 1; }
.phan-trang select { padding: 4px 8px; }
.phan-trang .so-trang { display: flex; gap: 6px; align-items: center; }
.phan-trang .so-trang button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dee2e6; background: #fff; font: inherit; font-size: 12.8px; color: var(--chu-mo); cursor: pointer; }
.phan-trang .so-trang button:hover:not(:disabled) { background: #f1f3f5; }
.phan-trang .so-trang button.chon { background: var(--lam); border-color: var(--lam); color: var(--tren-lam); font-weight: 600; box-shadow: 0 0 0 2.4px color-mix(in srgb, var(--lam) 25%, transparent); }
.phan-trang .so-trang button:disabled { opacity: .5; cursor: default; }

/* ---- Hỏi trợ lý AI ---- */
/* Khung trò chuyện với AI chiếm gần hết chiều cao màn hình, chữ to hơn cho dễ đọc. Phần còn lại (ô gõ, câu hỏi mẫu, số liệu) nằm gọn bên dưới. */
#ai-khung { height: calc(100vh - 320px); min-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px; background: #fbfcfe; border: 1px solid var(--vien); border-radius: 8px; font-size: 15.5px; line-height: 1.6; }
.the-ai .loc input[name="cau_hoi"] { font-size: 15px; padding: 10px 12px; }
.ai-so-nho { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--vien); font-size: 12px; color: var(--chu-mo); }
.ai-so-nho b { color: #343a40; font-weight: 600; }
.ai-tin { max-width: 92%; padding: 11px 15px; border-radius: 12px; }
.ai-tin.chu { align-self: flex-end; background: var(--lam-nhat); }
.ai-tin.ai { align-self: flex-start; background: #f4f6f8; border: 1px solid var(--vien); }
.ai-tin.dang-nghi { color: var(--chu-mo); font-style: italic; }
.ai-chu { white-space: pre-line; }
.ai-tin details { margin-top: 8px; font-size: 12px; }
.ai-tin summary { cursor: pointer; color: var(--lam); }
.sl-bao-cao { background: #fff; border: 1px solid var(--vien); border-radius: 6px; padding: 8px; margin-top: 8px; overflow-x: auto; }
.sl-ten { font-weight: 700; text-transform: capitalize; margin-bottom: 4px; }
.sl-muc { margin-top: 6px; }
.sl-muc > b { text-transform: capitalize; }

/* ---- Cảnh báo khách có hợp đồng quá hạn ---- */
.canh-bao-qh { border: 2px solid var(--do); border-radius: 6px; background: #fff5f5; margin: 6px 0 14px; overflow: hidden; clear: both; }
.qh-dau { background: var(--do); color: #fff; font-weight: 700; padding: 7px 12px; }
.qh-dong { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid #ffd0d0; }
.qh-dong:first-of-type { border-top: 0; }
.qh-o { flex: none; width: 96px; background: var(--do); color: #fff; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.25; padding: 6px 4px; }
.qh-o b { display: block; font-size: 24px; line-height: 1.1; }
.qh-than { min-width: 0; line-height: 1.55; }
.qh-tiem { display: inline-block; background: var(--ben); color: #fff; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; margin: 0 4px; }

/* ---- Ảnh khách hàng ---- */
.luoi-anh { display: flex; flex-wrap: wrap; gap: 12px; }
.o-anh { width: 150px; text-align: center; font-size: 12px; }
.o-anh img { width: 150px; height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vien); display: block; margin-bottom: 4px; }
.anh-khach { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vien); vertical-align: middle; margin-right: 10px; }

.thu-qr { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.thu-qr > div { text-align: center; max-width: 230px; }

/* ---- Danh sách thông báo ---- */
.thong-bao { border: 1px solid var(--vien); border-left: 4px solid var(--vien); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.thong-bao.moi { border-left-color: var(--xanh); background: #f3fbf9; }
.tb-dau { display: flex; justify-content: space-between; gap: 10px; }
.tb-dau span { color: var(--chu-mo); white-space: nowrap; font-size: 12px; }
.tb-than { white-space: pre-line; margin: 6px 0; }

/* ---- Biên nhận ---- */
#vung-in { display: none; }
.bien-nhan { color: #000; font-size: 13px; max-width: 520px; margin: 0 auto; }
.bn-dau { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 8px; }
.bn-tiem { font-size: 16px; font-weight: 700; }
.bn-ma { text-align: right; white-space: nowrap; }
.bn-ten { text-align: center; font-size: 18px; font-weight: 700; margin: 12px 0 8px; }
.bn-bang td { border: 0; border-bottom: 1px dotted #999; padding: 5px 4px; }
.bn-bang td:first-child { width: 150px; color: #333; }
.bn-chan { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.bn-qr { width: 200px; flex: none; text-align: center; font-size: 11px; line-height: 1.35; }
/* Hướng dẫn kết nối Zalo in cạnh mã QR: dòng mã để khách soạn tin được in to, đậm. */
.huong-dan-qr { text-align: left; }
.huong-dan-qr > b { display: block; text-align: center; font-size: 1.6em; letter-spacing: 1px; margin: 3px 0; font-family: Arial, sans-serif; }
.bn-qr .huong-dan-qr { margin-top: 4px; }
.bn-ky { flex: 1; display: flex; justify-content: space-around; text-align: center; min-height: 110px; }
.bn-ky i { display: block; font-size: 11px; }
.bn-luu-y { margin-top: 10px; font-size: 11px; font-style: italic; text-align: center; }

/* Thu gọn thanh bên bằng nút ba gạch */
body.thu-gon .thanh-ben { display: none; }

@media (max-width: 900px) {
  .thanh-ben { position: fixed; left: 0; top: 0; display: none; }
  body.thu-gon .thanh-ben { display: flex; }
  .form, #tab .form { grid-template-columns: 1fr; }
  #tab .form > label { text-align: left; }
  #tab .form > *, #tab .form .chan-form, #tab .form .ben-canh { grid-column: 1 !important; }
  .dau-hop-dong { grid-template-columns: 1fr; }
  #noi-dung { padding: 12px; }
  .nut-dau.an-nho { display: none; }
}
@page { margin: 10mm; }
@media print {
  .thanh-ben, .dau-trang, .loc, .nut, .phan-trang { display: none !important; }
  #noi-dung { padding: 0; }
  /* Khi in biên nhận thì chỉ in đúng tờ biên nhận. */
  body.dang-in { background: #fff; }
  body.dang-in > *:not(#vung-in) { display: none !important; }
  body.dang-in #vung-in { display: block; }
}

/* Trang phân quyền nhân viên: cây ô tích theo nhóm chức năng */
.cay-quyen { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vien); }
.cay-quyen h4 { margin: 0 0 10px; font-size: 14px; }
.cay-quyen label { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.cay-quyen label.mo { color: var(--chu-mo); cursor: not-allowed; }
.cay-quyen label i { font-size: 12px; color: var(--chu-mo); }
.cay-quyen .con { margin: 0 0 6px 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); column-gap: 20px; }
.cay-quyen input[type=checkbox] { width: 16px; height: 16px; flex: none; }

/* Hợp đồng khổ A4 nằm ngang, hai liên cạnh nhau */
.hop-dong-a4 { display: flex; gap: var(--hd-khe, 12mm); color: #000; font-family: "Times New Roman", Times, serif; font-size: calc(12.5px * var(--hd-ti-le, 1)); line-height: var(--hd-gian-dong, 1.32); text-align: left; }
.hop-dong-a4 .lien { flex: 1; min-width: 0; }
.hop-dong-a4 p { margin: 0; }
.hop-dong-a4 .hd-cach { margin-top: 9px; }
.hop-dong-a4 .hd-dau { display: flex; justify-content: space-between; gap: 12px; text-align: center; margin-bottom: 8px; font-size: 1.06em; }
.hop-dong-a4 .hd-hai-cot, .hop-dong-a4 .hd-ba-cot { display: flex; justify-content: space-between; gap: 10px; padding-left: 0; }
.hop-dong-a4 .hd-ba-cot span { flex: 1; }
.hop-dong-a4 .hd-thuoc-tinh { text-align: right; padding-right: 22%; }
.hop-dong-a4 .hd-dieu-khoan p { text-align: justify; }
.hop-dong-a4 .hd-chan { display: flex; align-items: stretch; gap: 10px; margin-top: 8px; }
/* Bước 1 trên mã QR, bước 2 bên phải mã QR (căn giữa), bước 3 và lời cuối dưới mã QR. Hai ô ký tên cao bằng cả khối bên trái. */
.hop-dong-a4 .hd-qr-khoi { width: var(--hd-khoi-qr, 55%); font-size: .8em; line-height: 1.25; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: center; }
.hop-dong-a4 .hd-qr-khoi .b1, .hop-dong-a4 .hd-qr-khoi .b3, .hop-dong-a4 .hd-qr-khoi .b4 { grid-column: 1 / -1; }
.hop-dong-a4 .hd-qr-khoi svg { width: var(--hd-qr, 92px); height: var(--hd-qr, 92px); }
.hop-dong-a4 .hd-qr-khoi .b-qr { line-height: 0; width: var(--hd-qr, 92px); }
.hop-dong-a4 .hd-qr-khoi .b2 { text-align: center; }
.hop-dong-a4 .hd-qr-khoi .b2 b { display: block; font-size: 1.7em; letter-spacing: 1px; margin-top: 2px; font-family: Arial, sans-serif; }
.hop-dong-a4 .hd-qr-khoi .b3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hop-dong-a4 .hd-4so { flex: none; border: 2px solid #000; border-radius: 9px; padding: 1px 14px; font: bold 1.6em Arial, sans-serif; letter-spacing: 2px; }
.hop-dong-a4 .hd-ky { flex: 1; display: flex; gap: 8px; align-items: stretch; text-align: center; font-size: .92em; }
.hop-dong-a4 .hd-ky-o { flex: 1; border: 1.5px solid #000; border-radius: 4px; padding: 6px 4px; min-height: var(--hd-ky-cao, 150px); }
.hop-dong-a4 .hd-ky i { display: block; font-style: normal; }
@media print { #vung-in .hop-dong-a4 { font-size: calc(10pt * var(--hd-ti-le, 1)); flex-direction: row; } }
/* Bảng căn chỉnh bản in hợp đồng */
.can-chinh { border: 1px solid var(--vien, #d6dae3); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: #f7f8fb; }
.can-chinh[hidden] { display: none; }
.can-chinh-luoi { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(120px, 2fr) 90px; gap: 6px 12px; align-items: center; }
.can-chinh-luoi label { margin: 0; font-weight: 500; }
.can-chinh-luoi input[type=number] { width: 90px; }
@media (max-width: 900px) { .hop-dong-a4 { flex-direction: column; } }

/* Tùy chọn riêng của từng tiệm trong màn hình ông bà */
.luoi-tuy-chon { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 16px; }
.luoi-tuy-chon label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }

/* Tiêu đề cột sắp xếp được: có hai mũi tên mờ, đang xếp theo cột nào thì mũi tên của cột đó đậm lên */
th.sap { cursor: pointer; user-select: none; white-space: nowrap; }
th.sap:hover { color: var(--lam); }
th.sap i { display: inline-block; width: 8px; height: 12px; margin-left: 6px; vertical-align: middle; background:
  linear-gradient(to top right, transparent 50%, #c3c8d4 50%) 0 0 / 4px 5px no-repeat, linear-gradient(to top left, transparent 50%, #c3c8d4 50%) 4px 0 / 4px 5px no-repeat,
  linear-gradient(to bottom right, transparent 50%, #c3c8d4 50%) 0 7px / 4px 5px no-repeat, linear-gradient(to bottom left, transparent 50%, #c3c8d4 50%) 4px 7px / 4px 5px no-repeat; }
th.sap.len i { background:
  linear-gradient(to top right, transparent 50%, var(--lam) 50%) 0 0 / 4px 5px no-repeat, linear-gradient(to top left, transparent 50%, var(--lam) 50%) 4px 0 / 4px 5px no-repeat,
  linear-gradient(to bottom right, transparent 50%, #e3e6ee 50%) 0 7px / 4px 5px no-repeat, linear-gradient(to bottom left, transparent 50%, #e3e6ee 50%) 4px 7px / 4px 5px no-repeat; }
th.sap.xuong i { background:
  linear-gradient(to top right, transparent 50%, #e3e6ee 50%) 0 0 / 4px 5px no-repeat, linear-gradient(to top left, transparent 50%, #e3e6ee 50%) 4px 0 / 4px 5px no-repeat,
  linear-gradient(to bottom right, transparent 50%, var(--lam) 50%) 0 7px / 4px 5px no-repeat, linear-gradient(to bottom left, transparent 50%, var(--lam) 50%) 4px 7px / 4px 5px no-repeat; }
th.sap.len, th.sap.xuong { color: var(--lam); }
/* Khung chọn khoảng ngày của nút Lọc */
.xo-ra.o-loc { min-width: 260px; }
.xo-ra.o-loc h5 { text-align: left; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--vien); }
.xo-ra.o-loc label { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--chu-mo); }
.xo-ra.o-loc input { width: 100%; }
.xo-ra.o-loc .hang { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.xo-ra.o-loc .hang button { width: auto; }
.nut.vien.dang-loc { background: var(--lam); color: var(--tren-lam); }

/* Tiêu đề cột của bảng: mỗi tên cột nằm trong một ô chữ nhật mờ. Cột sắp xếp được thì rê chuột ô đậm lên, đang xếp theo cột nào thì ô đó tô xanh. */
th .o-cot { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #e3e7f0; border-radius: 6px; background: #fff; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
th.sap:hover .o-cot { background: var(--lam-nhat); border-color: var(--lam); color: var(--lam); }
th.sap.len .o-cot, th.sap.xuong .o-cot { background: var(--lam); border-color: var(--lam); color: var(--tren-lam); }
th.sap.len i { background:
  linear-gradient(to top right, transparent 50%, #fff 50%) 0 0 / 4px 5px no-repeat, linear-gradient(to top left, transparent 50%, #fff 50%) 4px 0 / 4px 5px no-repeat,
  linear-gradient(to bottom right, transparent 50%, rgba(255, 255, 255, .35) 50%) 0 7px / 4px 5px no-repeat, linear-gradient(to bottom left, transparent 50%, rgba(255, 255, 255, .35) 50%) 4px 7px / 4px 5px no-repeat; }
th.sap.xuong i { background:
  linear-gradient(to top right, transparent 50%, rgba(255, 255, 255, .35) 50%) 0 0 / 4px 5px no-repeat, linear-gradient(to top left, transparent 50%, rgba(255, 255, 255, .35) 50%) 4px 0 / 4px 5px no-repeat,
  linear-gradient(to bottom right, transparent 50%, #fff 50%) 0 7px / 4px 5px no-repeat, linear-gradient(to bottom left, transparent 50%, #fff 50%) 4px 7px / 4px 5px no-repeat; }
@media print { th .o-cot { border: 0; padding: 0; background: none; color: inherit; } th.sap i { display: none; } }

/* Dải số đầu trang danh sách hợp đồng: mỗi số liệu một ô, mỗi ô một màu để dễ phân biệt.
   Thứ tự: quỹ tiền mặt (xanh lá), tiền cho vay (xanh dương), tiền nợ (đỏ), lãi phí dự kiến (cam), lãi phí đã thu (tím). */
.dai-so { background: none; box-shadow: none; padding: 0; margin-bottom: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.dai-so div { padding: 10px 14px; border-radius: 8px; border: 1px solid; border-left-width: 5px; transition: transform .12s, box-shadow .12s; }
.dai-so div:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(18, 38, 63, .12); }
.dai-so p { font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.dai-so b { font-size: 19px; }
.dai-so div:nth-child(1) { background: #eaf8f2; border-color: #34bfa3; }
.dai-so div:nth-child(1) p { color: #1f8f78; }
.dai-so div:nth-child(1) b { color: #178a70; }
.dai-so div:nth-child(2) { background: var(--lam-nhat); border-color: var(--lam); }
.dai-so div:nth-child(2) p, .dai-so div:nth-child(2) b { color: var(--lam-dam); }
.dai-so div:nth-child(3) { background: #ffecec; border-color: #ff2c2c; }
.dai-so div:nth-child(3) p, .dai-so div:nth-child(3) b { color: #d92222; }
.dai-so div:nth-child(4) { background: #fff5e0; border-color: #ffb822; }
.dai-so div:nth-child(4) p, .dai-so div:nth-child(4) b { color: #b97700; }
.dai-so div:nth-child(5) { background: #f3ecff; border-color: #8e5fd6; }
.dai-so div:nth-child(5) p, .dai-so div:nth-child(5) b { color: #6f42c1; }
/* Quỹ tiền mặt bị âm thì số chuyển đỏ để báo động, ô vẫn giữ màu xanh lá. */
.dai-so div.am b { color: var(--do); }
@media print { .dai-so div { border-left-width: 1px; background: none !important; } }

/* Ô logo trên thanh bên: tên phần mềm và câu khẩu hiệu màu vàng bên dưới */
.thanh-ben a.ten-tiem { padding: 0 14px; }
.thanh-ben .ten-va-khau-hieu { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; line-height: 1.1; }
.thanh-ben .ten-va-khau-hieu small { font-size: 9.5px; font-weight: 500; letter-spacing: .1px; color: #f7e3a3; white-space: nowrap; }

/* Chân thanh bên: hạn dùng, số hỗ trợ, nút góp ý. Hai mục bấm được nằm trong ô, rê chuột thì sáng lên như các mục menu. */
.thanh-ben .chan .muc-chan { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 8px 10px; min-height: 0; border-radius: 6px; color: #fff; font: inherit; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; transition: background .15s, border-color .15s; }
.thanh-ben .chan .muc-chan:hover { background: rgba(255, 255, 255, .16); border-color: rgba(247, 227, 163, .55); }
.thanh-ben .chan .muc-chan b { color: #f7e3a3; letter-spacing: .3px; }
.thanh-ben .chan .ma-tiem { display: block; margin-top: 4px; color: rgba(255, 255, 255, .45); font-size: 11px; }
/* Trang ông bà: góp ý chưa đọc in đậm trên nền vàng nhạt */
#the-gop-y h3 { display: flex; align-items: center; gap: 10px; }
tr.chua-doc td { background: #fffbea; font-weight: 600; }

/* Khung lãi theo mức tiền */
.khung-lai .hang { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.khung-lai .hang .o-tien { width: 140px; }
.khung-lai .so-khung { width: 22px; height: 22px; border-radius: 50%; background: var(--lam-nhat); color: var(--lam); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.dong-khung { white-space: nowrap; font-size: 12.5px; }
input.o-khoa, select.o-khoa { background: #f5f6f8; pointer-events: none; }

/* Ô mật khẩu dạng chữ thường được che bằng chấm tròn, để trình duyệt không tự lưu, tự điền. */
input[data-bi-mat="che"] { -webkit-text-security: disc; }

/* Số tiền cầm: số to đậm, kèm dòng bằng chữ to đậm */
.o-tien-lon .o-tien { font-size: 22px; font-weight: 700; width: 230px; color: var(--chu-ro, #1a2338); padding-top: 6px; padding-bottom: 6px; }
.o-tien-lon > b { font-size: 16px; }
.tien-bang-chu { margin-top: 6px; font-size: 18px; font-weight: 700; color: #c0392b; line-height: 1.35; }
.tien-bang-chu:empty { display: none; }

/* Trang hợp đồng và các hộp hợp đồng (lập, sửa, chi tiết): chữ và số to hơn, đậm hơn một chút cho dễ đọc */
.chu-lon, .hop.rong .ruot { font-size: 14.5px; color: var(--chu-ro, #1b2432); }
.chu-lon td, .hop.rong td { font-weight: 500; }
.chu-lon td.phai, .hop.rong td.phai, .chu-lon td b, .hop.rong td b, .chu-lon .ma-hd, .hop.rong .ma-hd { font-weight: 700; }
.chu-lon th, .hop.rong th { font-weight: 700; }
.chu-lon td small, .hop.rong td small { font-size: 13px; }
.hop.rong .form > label, .hop.rong .luoi-form > label { font-weight: 600; color: var(--chu-ro, #1b2432); }
.hop.rong input, .hop.rong select, .hop.rong textarea { font-weight: 500; color: var(--chu-ro, #1b2432); }
.chu-lon .nhan, .hop.rong .nhan { font-size: 12.5px; font-weight: 600; }

/* Ba ô theo dõi AI: token đã gửi, token đã nhận, tiền bị tính */
.ba-o-ai { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.ba-o-ai .o-so .ghi-chu { margin-top: 4px; font-size: 12px; }
@media (max-width: 700px) { .ba-o-ai { grid-template-columns: 1fr; } }

/* Bảng nhập giá AI của tài khoản A */
.bang-gia-ai { width: auto; min-width: 520px; }
.bang-gia-ai th, .bang-gia-ai td { padding: 6px 10px; }
.bang-gia-ai input { width: 130px; text-align: right; }
.bang-gia-ai tr.dang-dung td { background: #f1fbf6; }

/* Khung cài đặt AI của tài khoản A: hai cột đặt ngang (cài đặt bên trái, bảng giá bên phải), ba ô số liệu nằm ngang bên dưới */
.ai-hai-cot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 32px; align-items: start; }
.ai-hai-cot .ai-duoi, .ai-hai-cot .ai-chan { grid-column: 1 / -1; }
.ai-hai-cot .form { grid-template-columns: 150px 1fr; }
.ai-hai-cot .ai-cot h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ai-hai-cot .bang-gia-ai { min-width: 0; width: 100%; }
.ai-hai-cot .bang-gia-ai input { width: 100%; max-width: 140px; }
.ai-hai-cot .ai-chan { text-align: right; }
.ai-hai-cot .ba-o-ai { margin-bottom: 6px; }
@media (max-width: 1100px) { .ai-hai-cot { grid-template-columns: 1fr; } }

/* Thanh báo có bản mới, nằm giữa mép trên màn hình */
#bao-ban-moi { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff8e1; border: 1px solid #f0c36d; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: 13.5px; font-weight: 600; color: #5c4400; }
@media print { #bao-ban-moi { display: none; } }

/* Khung cài đặt AI của tài khoản A: thu gọn thành một dòng ở cuối trang, bấm mới mở. Khi mở thì chữ và ô nhỏ hơn bình thường cho gọn. */
.ai-thu-gon { padding: 0; }
.ai-thu-gon > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; cursor: pointer; list-style: none; font-size: 13px; }
.ai-thu-gon > summary::-webkit-details-marker { display: none; }
.ai-thu-gon > summary::before { content: '▸'; color: var(--chu-mo); }
.ai-thu-gon[open] > summary::before { content: '▾'; }
.ai-thu-gon > summary span { color: var(--chu-mo); font-size: 12.5px; }
.ai-thu-gon > summary i { margin-left: auto; color: var(--lam); font-size: 12px; font-style: normal; }
.ai-thu-gon[open] > summary i { display: none; }
.ai-thu-gon[open] > summary { border-bottom: 1px solid var(--vien); }
.ai-thu-gon .ai-hai-cot { padding: 12px 16px 14px; gap: 10px 24px; font-size: 12.5px; }
.ai-thu-gon .ai-hai-cot .form { gap: 8px 10px; grid-template-columns: 130px 1fr; }
.ai-thu-gon input, .ai-thu-gon select { padding: 5px 9px; font-size: 12.5px; }
.ai-thu-gon .bang-gia-ai th, .ai-thu-gon .bang-gia-ai td { padding: 3px 8px; font-size: 12.5px; }
.ai-thu-gon .bang-gia-ai input { max-width: 110px; }
.ai-thu-gon .ghi-chu { font-size: 11.5px; line-height: 1.4; }
.ai-thu-gon .o-so { padding: 8px 12px; }
.ai-thu-gon .o-so .so { font-size: 16px; }
.ai-thu-gon .nut { padding: 5px 12px; font-size: 12.5px; }

/* Chọn giao diện màu trong menu tài khoản */
.chon-giao-dien { padding: 6px 18px 8px; }
.chon-giao-dien > span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--chu-mo); }
.chon-giao-dien > div { display: flex; gap: 8px; }
.chon-giao-dien i { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--vien-o); }
.chon-giao-dien i:hover { transform: scale(1.1); }
.chon-giao-dien i.chon { box-shadow: 0 0 0 2px var(--chu); }
.chon-giao-dien i.phoi { background: conic-gradient(#e5484d, #f5a623, #46c37b, #3b9be5, #8e5fd6, #e5484d); }
.phoi-mau { padding: 2px 18px 8px; display: none; }
.phoi-mau.mo { display: block; }
.phoi-mau label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 12.5px; }
.phoi-mau input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--vien-o); border-radius: 4px; background: none; cursor: pointer; }
.phoi-mau .nut { width: 100%; margin-top: 4px; }
.canh-anh { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.canh-khung { position: relative; width: 260px; height: 260px; overflow: hidden; cursor: grab; touch-action: none; background: #222; border-radius: 4px; }
.canh-khung canvas { display: block; }
.canh-tron { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 400px rgba(0, 0, 0, .55); border: 2px solid #fff; pointer-events: none; }
.canh-anh input[type=range] { width: 260px; }
.xem-anh { text-align: center; }
.xem-anh img { max-width: 100%; max-height: 75vh; }

/* ===== Hiệu ứng phóng to kiểu macOS ===== */
:root { --lo-xo: cubic-bezier(.34, 1.56, .64, 1); }
button:not(:disabled), select, summary, [onclick]:not(tr):not(td):not(th):not(.nen-hop):not(.hop):not(body),
.nut, .nut-dau, .the-tab button, .thanh-ben a, .thanh-ben .cha, label:has(input[type=checkbox]), label:has(input[type=radio]) {
  transition: transform .22s var(--lo-xo), box-shadow .22s ease, background .15s, border-color .15s, color .15s, filter .15s;
  transform-origin: center;
}
button:not(:disabled):hover, select:hover, summary:hover, [onclick]:not(tr):not(td):not(th):not(.nen-hop):not(.hop):not(body):hover {
  transform: scale(1.06); position: relative; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.nut:hover, .the-tab button:hover { transform: scale(1.1); }
.nut-dau:hover { transform: scale(1.22) translateY(-2px); box-shadow: none; }
.nut-dau:hover svg { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.thanh-ben a:hover, .thanh-ben .cha:hover { transform: scale(1.06); z-index: 3; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.thanh-ben a:hover svg, .thanh-ben .cha:hover svg { transform: scale(1.25); transition: transform .22s var(--lo-xo); }
.thanh-ben a.ten-tiem:hover { transform: none; box-shadow: none; }
.thanh-ben { padding: 4px 6px; }
.hop > header button:hover { transform: scale(1.35); box-shadow: none; }
button:not(:disabled):active, [onclick]:not(tr):not(td):not(th):not(.nen-hop):not(.hop):active, .nut:active, .nut-dau:active,
.thanh-ben a:active, .thanh-ben .cha:active { transform: scale(.95); transition-duration: .08s; }


/* Mở / đóng hộp thoại kiểu Windows 11 (đổi chức năng trong hộp thì giữ nguyên, không chạy lại) */
.nen-hop:not(.doi-noi-dung) { animation: nen-hien .25s ease both; }
.nen-hop:not(.doi-noi-dung) .hop { animation: hop-mo .28s cubic-bezier(.1, .9, .2, 1) both; transform-origin: 50% 40%; }
.nen-hop.dang-dong { pointer-events: none; animation: nen-tat .18s ease forwards; }
.nen-hop.dang-dong .hop { animation: hop-co .18s ease-in forwards; transform-origin: 50% 40%; }
@keyframes nen-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes nen-tat { to { opacity: 0; } }
@keyframes hop-mo { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hop-co { to { opacity: 0; transform: scale(.95) translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01s !important; }
  *:hover, *:active { transform: none !important; }
}

/* Sửa giật menu trái + mở menu con khi rê chuột */
.thanh-ben { overflow-x: hidden; }
.thanh-ben a:hover, .thanh-ben .cha:hover { transform: scale(1.035); }
.thanh-ben .cha:active, .thanh-ben a:active { transform: scale(.985); }


/* Form hợp đồng: xếp ô theo hàng ngang (lưới 12 cột) */
.luoi-ngang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.luoi-ngang > .ca-hang, .luoi-ngang > .muc { grid-column: 1 / -1; }
.luoi-ngang > .o { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span 12; }
.luoi-ngang > .o > label { font-weight: 500; text-align: left; }
.luoi-ngang > .c2 { grid-column: span 2; } .luoi-ngang > .c3 { grid-column: span 3; } .luoi-ngang > .c4 { grid-column: span 4; } .luoi-ngang > .c5 { grid-column: span 5; }
.luoi-ngang > .c6 { grid-column: span 6; } .luoi-ngang > .c7 { grid-column: span 7; } .luoi-ngang > .c8 { grid-column: span 8; }
.luoi-ngang > .o > .hang { flex-wrap: wrap; }
@media (max-width: 760px) { .luoi-ngang > .o { grid-column: span 12 !important; } }

/* Trang đăng nhập có thẻ Dùng thử, thanh báo dùng thử */
.dang-nhap .dn-the { display: flex; gap: 6px; margin-bottom: 14px; }
.dang-nhap .dn-the button { flex: 1; padding: 9px 6px; background: none; border: 1px solid var(--ben-vien); color: #a9b3cc; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dang-nhap .dn-the button.chon { border-color: #d9b765; color: #f1d68a; background: rgba(217, 183, 101, .12); }
.thanh-dung-thu { background: #f1d68a; color: #3b2a05; padding: 7px 14px; font-size: 13px; text-align: center; line-height: 1.5; }

/* Nút con mắt ở ô mật khẩu đứng yên khi rê chuột (không bị phóng to, không nhảy chỗ như các nút khác) */
.o-mat-khau .mat-xem:hover, .o-mat-khau .mat-xem:active { position: absolute !important; transform: none !important; box-shadow: none !important; }
.o-mat-khau.nho .mat-xem:hover, .o-mat-khau.nho .mat-xem:active { transform: translateY(-50%) !important; }

/* Logo FINBAY lớn trên thanh bên, khẩu hiệu nằm bên dưới và xuống dòng đủ chữ */
.thanh-ben a.ten-tiem { flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 0; padding: 14px 6px 10px; gap: 2px; white-space: nowrap; text-align: center; overflow: visible; }
.thanh-ben .ten-va-khau-hieu { align-items: center; }
.thanh-ben .ten-va-khau-hieu small { white-space: nowrap; font-size: 10px; line-height: 1.2; }

/* Kéo chuột sắp xếp phần chân hợp đồng: viền nét đứt quanh các khối kéo được, chấm xanh ở góc để đổi cỡ. Không có trên bản in. */
.hop-dong-a4.dang-keo [data-k] { outline: 2px dashed #2f6fed; outline-offset: 2px; cursor: move; touch-action: none; user-select: none; }
.hop-dong-a4.dang-keo [data-k]:not(.hd-them) { position: relative; }
.hop-dong-a4.dang-keo .keo-da-chon { outline: 3px solid #e8590c; background: rgba(232, 89, 12, .08); }
.hop-dong-a4.dang-keo [data-k]:hover { background: rgba(47, 111, 237, .08); z-index: 3; }
.keo-tay { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #2f6fed; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.hop-dong-a4:not(.dang-keo) .keo-tay, #vung-in .keo-tay { display: none; }

/* Chữ thêm vào chân hợp đồng, thanh công cụ kéo chuột */
.hop-dong-a4 .hd-chan { position: relative; }
.hop-dong-a4 .hd-them { position: absolute; left: 0; top: 100%; max-width: 70%; font-size: .85em; line-height: 1.25; }
.keo-thanh { position: sticky; top: 0; z-index: 20; }
.keo-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.keo-cach { width: 1px; height: 22px; background: #c9ced9; margin: 0 4px; }
#keo-sua { margin-top: 8px; }