/* =====================================================================================================
   HCL ONE — module ĐĂNG KÝ TẠI ĐIỂM (bản 0.7). Lớp riêng .dk-* — chỉ dùng mã màu của hệ thiết kế (giao_dien.css).
   Phần 1 = màn điện thoại / văn phòng · Phần 2 = GIẤY A4 (hợp đồng HCL-KOK-03, phiếu xác nhận, biên bản mốc, giấy đề nghị)
   Giấy luôn nền trắng chữ chàm đậm (kể cả chế độ tối) và in đúng khổ A4 qua trang in có tên "dkA4".
   ===================================================================================================== */

/* =============== 1 · khối trên màn điểm bán */
.dk-khoi{margin-top:4px}
.dk-khoi .dk-nut{margin:0 0 8px}
.dk-mo-nhe{opacity:.72}
.dk-anh-dem{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:99px;font:700 12px/1 var(--noi-dung);font-variant-numeric:tabular-nums;background:var(--vien);color:var(--mo);white-space:nowrap}
.dk-anh-dem.xanh{background:var(--xanh-nhat);color:var(--xanh)} .dk-anh-dem.cam{background:var(--cam-nhat);color:var(--cam-dam)}
.dk-nut .dk-anh-dem{margin-left:4px}
.dk-nhan:not(td){font:700 11.5px/1.3 var(--tieu-de);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);overflow-wrap:anywhere}
.dk-kok .hc-gian{align-items:flex-start}
.dk-kok-so{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.dk-kok-so b{font:800 30px/1 var(--tieu-de);font-variant-numeric:tabular-nums;color:var(--chu)}
.dk-kok-so span{font-size:14px;color:var(--mo);font-variant-numeric:tabular-nums}
/* thanh tiến độ tích luỹ + chấm mốc 25/50/75/100% */
.dk-moc-thanh{position:relative;height:10px;border-radius:99px;background:var(--vien);margin:14px 8px 10px}
.dk-moc-thanh>i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--vang);max-width:100%;transition:width .4s ease}
.dk-moc-thanh>span{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--the);border:2.5px solid var(--vien);box-sizing:border-box}
.dk-moc-thanh>span.dat{background:var(--vang);border-color:var(--vang-dam)}
/* hạng Đối tác Chiến lược (mốc 25/50/75/100% = Bạc · Vàng · Bạch Kim · Kim Cương — tên là cấu hình dk_vip_hang).
   Màu theo nhận diện, càng lên hạng càng đậm: kem → chàm nhạt → vàng → chàm → chàm đậm viền vàng. Không dùng xanh/cam/đỏ (màu trạng thái). */
.dk-hang{display:inline-flex;align-items:center;gap:5px;flex:none;height:28px;padding:0 11px 0 9px;border-radius:99px;border:1.5px solid var(--vien);background:var(--nen-2);color:var(--chu-2);font:800 12.5px/1 var(--tieu-de);white-space:nowrap}
.dk-hang svg{flex:none}
.dk-hang:not(.dk-hang-0) svg,.dk-hang-o.dat svg{fill:currentColor}
.dk-hang.dk-hang-1,.dk-hang-o.dat.dk-hang-1{background:var(--chinh-nhat);color:var(--chinh);border-color:var(--chinh-nhat)}
.dk-hang.dk-hang-2,.dk-hang-o.dat.dk-hang-2{background:var(--vang-nhat);color:var(--vang-chu);border-color:var(--vang)}
.dk-hang.dk-hang-3,.dk-hang-o.dat.dk-hang-3{background:var(--cham);color:#fff;border-color:var(--chinh)}
.dk-hang.dk-hang-4,.dk-hang-o.dat.dk-hang-4{background:var(--cham-dam);color:var(--vang);border-color:var(--vang)}
.dk-dong-hang{margin:0;font-size:14px;line-height:1.45;color:var(--chu-2)}
.dk-dong-hang b{color:var(--chu);font-variant-numeric:tabular-nums}
.dk-kok .dk-nhan{flex:1;min-width:0;padding-top:6px}
/* thang 4 hạng: đã lên = màu của hạng, hạng kế tiếp = viền đứt chàm, hạng sau = mờ */
.dk-hang-day{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:12px 0 6px;padding:0;list-style:none}
.dk-hang-o{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:9px 0 8px;border-radius:12px;border:1.5px solid var(--vien-2);background:var(--nen-2);color:var(--mo);text-align:center}
.dk-hang-o svg{margin-bottom:3px;opacity:.7}
.dk-hang-o b{max-width:100%;font:800 clamp(12px,3.35vw,13px)/1.2 var(--tieu-de);letter-spacing:-.01em;color:var(--chu-2);overflow-wrap:anywhere}   /* "Kim Cương" một dòng từ 360 px */
.dk-hang-o span{font-size:11px;line-height:1.35;font-variant-numeric:tabular-nums}
.dk-hang-o.dat svg{opacity:1}
.dk-hang-o.dat b,.dk-hang-o.dat span{color:inherit}
.dk-hang-o.tiep{border-style:dashed;border-color:var(--chinh);background:var(--the)}
.dk-hang-o.tiep b,.dk-hang-o.tiep svg{color:var(--chinh);opacity:1}
.dk-chu-nho{margin:6px 0 0;font-size:12.5px}
/* form: giới thiệu chương trình */
.dk-gioi-thieu{background:var(--vang-nhat)}
.dk-gioi-thieu>svg{color:var(--vang-chu);fill:currentColor}

/* =============== 2 · bảng tính KOK sống (y như Excel) */
.dk-tinh{background:var(--the);border:1px solid var(--vien-2);border-left:4px solid var(--xanh);border-radius:var(--r-lon);box-shadow:var(--bong-1);padding:12px 14px;margin:0 0 12px}
.dk-tinh.loi{border-left-color:var(--do)}
.dk-tinh-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 15px/1.2 var(--tieu-de)}
.dk-tinh-dau>span:first-child{display:inline-flex;align-items:center;gap:6px}
.dk-tinh-dau svg{color:var(--chinh);flex:none}
.dk-bang-cuon{margin:10px 0;box-shadow:none}
.dk-bang-moc{font-size:13.5px}
.hc-bang.dk-bang-moc th{text-transform:none;letter-spacing:0}          /* tiêu đề thường, gọn: bảng mốc vừa màn 360 px không cuộn ngang */
.hc-bang.dk-bang-moc th,.hc-bang.dk-bang-moc td{padding:8px 5px}
.hc-bang.dk-bang-moc th:first-child,.hc-bang.dk-bang-moc td:first-child{white-space:nowrap;padding-left:9px}
.hc-bang.dk-bang-moc th:last-child,.hc-bang.dk-bang-moc td:last-child{padding-right:9px}
.dk-bang-moc td b{font-weight:800}
.dk-pt{display:block;font-size:11.5px;color:var(--mo);font-weight:600;margin-top:1px}
.dk-bang-moc .dk-chip-link{display:flex;width:max-content;margin:4px 0 0 auto}
.dk-tinh-so{margin:10px 0}
.dk-tinh-so .hc-so,.dk-kok-tom .hc-so{padding:10px 4px}
.dk-tinh-so .hc-so b,.dk-kok-tom .hc-so b{font-size:18px;letter-spacing:-.01em}
.dk-tinh-duyet{display:flex;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:12px;font:600 14px/1.4 var(--noi-dung);background:var(--xanh-nhat);color:var(--xanh-dam)}
.dk-tinh-duyet svg{flex:none;margin-top:1px}
.dk-tinh-duyet>span{flex:1;min-width:0}
.dk-tinh.loi .dk-tinh-duyet{background:var(--do-nhat);color:var(--do-dam)}
.dk-loi{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.45;color:var(--do)}

/* =============== 3 · form đăng ký */
.dk-dau-form{display:flex;align-items:center;gap:12px;margin:0 2px 12px}
.dk-dau-form>div{min-width:0;flex:1}
.dk-dau-form b{display:block;font:800 17px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.dk-dau-form .hc-phu{display:block}
.dk-tuy{font-style:normal;font-weight:400;font-size:12px;color:var(--mo)}
.dk-kok-vao .hc-truong:last-of-type{margin-bottom:10px}
.dk-dong-buoc{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.dk-dong-buoc .hc-so-buoc input{width:72px}
.dk-dong-buoc .hc-phu{margin:0;font-size:14px}
.dk-dong-buoc .hc-phu b{color:var(--chu);font-variant-numeric:tabular-nums}
.dk-han{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:10px 0 0;border-top:1px dashed var(--vien-2)}
.dk-han>span:first-child{color:var(--mo);font-size:13.5px;font-weight:600}
.dk-han b{font:800 16px var(--tieu-de)}
.dk-han .hc-phu{margin:0}
.dk-o-dv{position:relative}
.dk-o-dv input{padding-right:36px;font-variant-numeric:tabular-nums}
.dk-o-dv>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--mo);font-weight:600;pointer-events:none}
.dk-chon-sp>button{flex:1 1 auto}
.dk-tb{margin-bottom:0}
.dk-anh{position:relative}
.dk-anh img{display:block}
.dk-anh-xoa{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:50%;border:0;padding:0;background:var(--cham-dam);color:#fff;opacity:.85;font:700 20px/34px var(--noi-dung);text-align:center;cursor:pointer}
.dk-anh-xoa::after{content:"";position:absolute;inset:-7px}                /* vùng bấm 48 px */
/* chân form: tổng tiền + lỗi đầu tiên + nút gửi */
.dk-chan-tom{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6px;font-size:13.5px;color:var(--mo)}
.dk-chan-tom b{font:800 20px var(--tieu-de);color:var(--chu);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-chan-tom:has(b:empty){display:none}
.dk-chan-loi{font:600 13px/1.35 var(--noi-dung);color:var(--do);margin:0 0 8px}
.dk-chan-loi:empty{display:none}
.dk-sheet-phu{margin:-4px 0 12px}

/* =============== 4 · hồ sơ pháp lý, khoá – giá trị */
.dk-h3{margin:0;font:800 16px/1.3 var(--tieu-de)}
.dk-kv{grid-template-columns:minmax(96px,42%) 1fr;margin-top:6px}
.dk-kv dd{font-variant-numeric:tabular-nums}

/* =============== 5 · hàng chờ duyệt */
.dk-duyet .hc-the-dau>div:first-child{min-width:0;flex:1}
.dk-tien-to{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.dk-tien-to b{font:800 18px/1.15 var(--tieu-de);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-tien-to span{font-size:12px;color:var(--mo);margin-top:2px}
.dk-dau-hieu{margin:10px 0 0;gap:6px}
.dk-dau-hieu .hc-chip{height:auto;min-height:24px;padding:4px 9px;white-space:normal;line-height:1.25}
.dk-kok-tom{margin:6px 0 4px}
.dk-kok-tom .hc-so-luoi{margin:8px 0}
.dk-noi-bo{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1.5px dashed var(--vien);background:var(--nen-2);font-size:13.5px;line-height:1.45;color:var(--chu-2);margin:4px 0 8px}
.dk-noi-bo svg{flex:none;margin-top:2px;color:var(--chinh)}
.dk-ghi-chu{margin:10px 0;padding:8px 12px;border-left:3px solid var(--vien);font-size:14px;line-height:1.45;font-style:italic;color:var(--chu-2);overflow-wrap:anywhere}
.dk-anh-nho{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));margin:8px 0}
.dk-nut-duyet{margin:12px 0 4px}
.dk-nut-duyet>.hc-nut{padding:0 10px}
.dk-nut-duyet>.hc-nut.chinh{flex:1.4}
.dk-khong-duyet{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0}
.dk-khong-duyet svg{flex:none;margin-top:3px}
.dk-xem{display:flex;width:100%;min-height:48px;margin-top:2px}
.dk-cach-tren{margin-top:12px}
.dk-hero h2{font-size:24px}

/* =============== 6 · chi tiết một đăng ký */
.dk-dau-ct .hc-the-dau>div:first-child{min-width:0;flex:1}
.dk-lien{color:inherit;text-decoration:none;border-bottom:2px solid var(--cham-nhat)}
.dk-tien-dong{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--vien-2)}
.dk-tien-dong span{font-size:13.5px;color:var(--mo)}
.dk-tien-dong b{font:800 22px var(--tieu-de);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-dau-ct>.hc-phu{display:flex;align-items:center;gap:6px;margin-top:8px}
.dk-chip-link{height:30px;padding:0 10px;text-decoration:none;cursor:pointer}
.dk-nhom-phu{flex-wrap:wrap}
.dk-nhom-phu>*{flex:1 1 150px}
.dk-nhom-phu>.hc-nut{min-height:48px}
.dk-nw{white-space:nowrap}

/* =============== 7 · thẻ trang chủ, sales admin, kế toán */
.dk-tc .hc-the-dau{align-items:center}
.dk-tc-giua{flex:1;min-width:0}
.dk-tc-giua h3{margin:0;font:800 17px/1.3 var(--tieu-de)}
.dk-tc .hc-the-dau>svg:last-child{color:var(--mo);flex:none}
.dk-chi .hc-the-dau>div:first-child{min-width:0;flex:1}
.dk-chi .hc-nhom-nut{flex-wrap:wrap}
.dk-chi .hc-nhom-nut>*{flex:1 1 140px;min-height:48px}
.dk-nguon{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:10px 0 4px;padding:8px 10px;border-radius:10px;background:var(--nen-2);font-size:13px;line-height:1.4;color:var(--chu-2)}
.dk-nguon>span:first-child{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--tieu-de);letter-spacing:.06em;text-transform:uppercase;color:var(--chinh)}
.dk-nguon b{color:var(--chu);font-variant-numeric:tabular-nums}
.dk-nguon i{font-style:normal;color:var(--mo)}

/* =============== 8 · khung văn bản: thanh công cụ (không in) + tờ giấy */
.dk-thanh-cong-cu{background:var(--the);border:1px solid var(--vien-2);border-radius:var(--r-lon);box-shadow:var(--bong-1);padding:12px 14px 2px;margin:0 auto 12px;max-width:210mm}
.dk-tt-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dk-tt-hd>div{min-width:0;flex:1}
.dk-tt-hd b{display:block;font:800 18px/1.25 var(--tieu-de);overflow-wrap:anywhere;margin-top:2px}
.dk-tt-hd .hc-phu{display:block}
.dk-nhom-in{flex-wrap:wrap;align-items:flex-end}
.dk-nhom-in>*{flex:1 1 190px}
.dk-nhom-in>.hc-nut{white-space:nowrap}
.dk-nhom-in>.nut-vuong{flex:0 0 56px}
.dk-nhom-in.dk-mot-hang{flex-wrap:nowrap}
.dk-nhom-in.dk-mot-hang>.hc-nut.chinh{flex:1 1 auto}
.dk-thanh-cong-cu>.hc-nut.khoi{margin:0 0 10px}
.dk-ve{display:flex;width:100%;min-height:48px;margin:0 0 4px}
.dk-ngay-hd{margin:0}
.dk-ngay-hd input{min-height:52px}
body.dk-in main>.hc-bao{max-width:210mm;margin-left:auto;margin-right:auto}
.dk-giay{margin:0 auto}

/* =====================================================================================================
   PHẦN 2 — GIẤY A4. Cỡ chữ gốc 13pt (Times New Roman như tệp Word); các lớp cỡ/giãn dòng tính theo em để thu nhỏ đúng tỉ lệ trên điện thoại.
   ===================================================================================================== */
.dk-a4{--dk-nen:#fff; --dk-chu:var(--cham-dam); --dk-vien:var(--cham); --dk-nhan:var(--cham-nhat); --dk-vang:color-mix(in srgb,var(--vang) 22%,#fff);
  background:var(--dk-nen);color:var(--dk-chu);font:13pt/1.28 "Times New Roman",Times,"Liberation Serif","Nimbus Roman",serif;text-align:left;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;overflow-wrap:break-word}
.dk-a4 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dk-a4 p{margin:0 0 .231em}
.dk-a4 b{font-weight:700}
.dk-trang{display:block}
.dk-giua{text-align:center} .dk-phai{text-align:right} .dk-trai{text-align:left} .dk-deu{text-align:justify}
.dk-dam{font-weight:700} .dk-nghieng{font-style:italic} .dk-thuong{font-weight:400;font-style:italic}
.dk-nho{font-size:.85em}
.dk-c12{font-size:.923em} .dk-c13{font-size:1em} .dk-c14{font-size:1.077em} .dk-c15{font-size:1.154em}
.dk-a4 .dk-sau0{margin-bottom:0} .dk-a4 .dk-sau2{margin-bottom:.154em} .dk-a4 .dk-sau3{margin-bottom:.231em} .dk-a4 .dk-sau4{margin-bottom:.308em}
.dk-a4 .dk-sau6{margin-bottom:.462em} .dk-a4 .dk-sau8{margin-bottom:.615em} .dk-a4 .dk-sau12{margin-bottom:.923em}
.dk-a4 .dk-dieu{font-weight:700;margin:.62em 0 .23em;break-after:avoid;page-break-after:avoid}
.dk-a4 .dk-khoan{text-align:justify;margin:0 0 .231em}
.dk-a4 .dk-gach{text-align:justify;margin:0 0 .154em;padding-left:1.4em;text-indent:-.6em}
/* bảng trong văn bản: đầu cột chàm chữ trắng · ô nhãn chàm nhạt · ô số vàng nhạt · dòng tổng chàm đậm số vàng */
.dk-bang{width:100%;border-collapse:collapse;table-layout:fixed;margin:.3em 0 .6em;font-size:.923em;line-height:1.25}
.dk-bang th,.dk-bang td{border:1px solid var(--dk-vien);padding:.3em .4em;vertical-align:middle}
.dk-bang th{background:var(--dk-vien);color:#fff;font-weight:700;text-align:center;padding-left:.25em;padding-right:.25em}
.dk-a4 td.dk-nhan{background:var(--dk-nhan);color:var(--dk-chu);font-weight:700}
.dk-nen-vang{background:var(--dk-vang)}
.dk-tong-nhan{background:var(--dk-chu);color:#fff;font-weight:700;text-align:right}
.dk-tong-nhan.dk-trai{text-align:left}
.dk-tong-so{background:var(--dk-chu);color:var(--vang);font-weight:700;text-align:center;white-space:nowrap}
.dk-bang tr{break-inside:avoid;page-break-inside:avoid}
/* chữ ký */
.dk-ky{width:100%;border-collapse:collapse;table-layout:fixed;margin:1em 0 0;break-inside:avoid;page-break-inside:avoid}
.dk-ky td{text-align:center;vertical-align:top;font-weight:700;padding:0 .3em 6.5em;font-size:.923em;line-height:1.3}
/* đầu giấy đề nghị thanh toán */
.dk-dau-cty{width:100%;border-collapse:collapse;margin:0 0 .9em;font-size:.846em;line-height:1.3}
.dk-dau-cty td{vertical-align:top;padding:0}
.dk-dau-cty td:first-child{width:62%}

/* ---- trên màn hình: máy tính = tờ A4 thật (210 × 297 mm, lề như tệp Word); điện thoại = giấy chảy theo bề ngang */
@media screen{
  .dk-giay{background:var(--nen-2);border-radius:var(--r-lon);padding:16px;overflow-x:auto}
  .dk-a4{width:210mm;min-height:297mm;margin:0 auto;padding:17.6mm 19.05mm;box-shadow:var(--bong-2);border-radius:2px}
  .dk-trang-moi{margin-top:16mm;padding-top:12mm;border-top:1px dashed var(--vien)}
  .dk-a4>.dk-trang-moi:first-child{margin-top:0;padding-top:0;border-top:0}
}
@media screen and (max-width:840px){
  .dk-giay{background:none;padding:0;border-radius:0;overflow:visible}
  .dk-a4{width:auto;min-height:0;padding:18px 14px 22px;font-size:15px;line-height:1.4;border:1px solid var(--vien-2);border-radius:var(--r-vua);box-shadow:var(--bong-1)}
  .dk-trang-moi{margin-top:26px;padding-top:22px}
  .dk-a4>.dk-trang-moi:first-child{margin-top:0;padding-top:0}
  .dk-bang{font-size:.8em}
  .dk-bang th,.dk-bang td{padding:.3em .25em}
  .dk-ky td{padding-bottom:4em;font-size:.8em}
  .dk-a4 .dk-gach{padding-left:1em;text-indent:-.5em}
}

/* ---- in / lưu PDF: trang có tên dkA4 (khổ A4 đứng, lề như tệp Word) — không đụng trang in nhãn QR của module khác.
   !important: module kỹ thuật đặt @page{margin:0} (không tên) nạp SAU tệp này; Chrome xét thứ tự chứ không ưu tiên trang có tên. */
@page dkA4{size:A4 portrait!important;margin:17.6mm 19.05mm!important}
@media print{
  html:has(body.dk-in),body.dk-in{background:#fff!important}
  body.dk-in{page:dkA4}
  body.dk-in main{padding:0!important;margin:0!important;max-width:none!important}
  body.dk-in main>.hc-bao,body.dk-in .dk-thanh-cong-cu{display:none!important}
  .dk-giay{background:none;padding:0;margin:0;overflow:visible}
  .dk-a4{page:dkA4;width:auto;min-height:0;margin:0;padding:0;box-shadow:none;border:0;border-radius:0;font-size:13pt;line-height:1.28}
  .dk-trang-moi{break-before:page;page-break-before:always;margin:0;padding:0;border:0}
  .dk-a4>.dk-trang-moi:first-child{break-before:auto;page-break-before:auto}
}
/* trình duyệt cũ không hỗ trợ trang có tên: giữ lề bằng đệm của chính tờ giấy */
@supports not (page:dkA4){ @media print{ .dk-a4{padding:0 19.05mm} } }