/* ============================================================ BILL KMEDIA — Quản lý & tạo hoá đơn điện tử Override theo page (chỉ dùng token trong ../assets/css/kauto.css). Áp dụng cho: index, tao-hoa-don, danh-sach, chi-tiet, hoa-don (link công khai), dang-nhap (biến tấu). ============================================================ */ /* ---------- Font riêng của Bill: Inter (load 400/500/600/700 trong ) ---------- Ghi đè token --font của kauto.css; weight 800 của DS sẽ hiển thị bằng 700. */ :root{--font:'Inter',system-ui,-apple-system,sans-serif} body{font-family:var(--font)} /* ---------- Layout chung: main 1 cột dọc ---------- */ .main.page-bill{display:flex;flex-direction:column;gap:16px} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap} .page-head h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px} .page-head p{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:4px} /* 2 cột: nội dung + panel thanh toán bên phải */ .bill-cols{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:20px;align-items:start} .bill-cols-half{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .card-body{padding:20px 22px} /* ---------- Chips lọc trạng thái (giống don-hang) ---------- */ .chip-row{display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px 0} .f-chip{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:var(--radius-full); background:var(--surface);border:1px solid var(--border); font-size:13px;font-weight:700;color:var(--ink-soft); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } .f-chip:hover{background:var(--surface-tint);color:var(--ink)} .f-chip.on{background:var(--primary-100);border-color:rgba(2,119,244,.35);color:var(--primary)} .f-chip .n{font-size:11.5px;font-weight:700;color:var(--ink-mute);font-variant-numeric:tabular-nums} .f-chip.on .n{color:inherit;opacity:.75} /* ---------- Step indicator (wizard 4 bước) ---------- */ .steps{display:flex;align-items:flex-start;list-style:none;margin:0;padding:18px 22px 2px} .step{ flex:1;position:relative;text-align:center; display:flex;flex-direction:column;align-items:center;gap:7px; } .step::before{ content:"";position:absolute;top:15px; left:calc(-50% + 24px);right:calc(50% + 24px); height:2px;border-radius:99px;background:var(--border); transition:background var(--dur) var(--ease); } .step:first-child::before{display:none} .step.done::before{background:var(--primary)} .step-dot{ width:31px;height:31px;border-radius:50%;display:grid;place-items:center; font-size:13px;font-weight:700; background:var(--surface-tint);border:1.5px solid var(--border);color:var(--ink-mute); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .step-dot .ck{display:none} .step.current .step-dot{ background:var(--primary-50);border-color:var(--primary);color:var(--primary); box-shadow:0 0 0 4px rgba(2,119,244,.12); } .step.done .step-dot{background:var(--grad-primary);border-color:transparent;color:#fff} .step.done .step-dot .n{display:none} .step.done .step-dot .ck{display:block} .step-label{font-size:11px;font-weight:700;color:var(--ink-mute);letter-spacing:.2px} .step.current .step-label{color:var(--primary)} .step.done .step-label{color:var(--ink-soft)} /* ---------- Wizard ---------- */ .wiz-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px} .wiz-step{display:flex;flex-direction:column;gap:16px} .wiz-step[hidden]{display:none} .wiz-step.in{animation:wizIn .25s var(--ease)} @keyframes wizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .wiz-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.1px} .wiz-note{font-size:12.5px;color:var(--ink-mute);line-height:1.55;margin-top:-10px} .wiz-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px} .wiz-actions .btn{min-height:44px} .wiz-actions > .btn:only-child{margin-left:auto} .type-row{display:flex;gap:22px;flex-wrap:wrap} /* Input có icon dẫn đầu (giống ảnh tham khảo) */ .input-ico{position:relative} .input-ico > svg{ position:absolute;left:14px;top:50%;transform:translateY(-50%); color:var(--ink-mute);pointer-events:none; } .input-ico .input{padding-left:42px} /* Tóm tắt tiền (bước 2) */ .sum{ border:1.5px dashed var(--border);border-radius:var(--radius); padding:4px 16px;background:var(--surface-tint); } .sum-row{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:9px 0;border-bottom:1px dashed var(--border-soft); font-size:13.5px; } .sum-row:last-child{border-bottom:none} .sum-row .lb{color:var(--ink-soft);font-weight:600} .sum-row .vl{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)} .sum-row.total .lb{font-weight:800;color:var(--ink)} .sum-row.total .vl{font-size:19px;font-weight:800;color:var(--primary)} /* Kênh nhận thông báo (bước 3) */ .notify-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .notify-grid .choice{align-items:center;text-align:center;padding:16px 12px} .notify-grid .choice-ico{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--surface-tint);color:var(--ink-soft); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); } .notify-grid .choice:has(input:checked) .choice-ico{background:var(--grad-primary);color:#fff;box-shadow:0 4px 10px rgba(2,119,244,.28)} .notify-grid .choice-sub{font-size:11.5px;color:var(--ink-mute)} .notify-inputs{display:flex;flex-direction:column;gap:14px} .notify-inputs .field[hidden]{display:none} /* ---------- Panel thanh toán / QR (cột phải) ---------- */ .pay-panel .card-body{display:flex;flex-direction:column;text-align:center;padding:26px 22px 22px} .pay-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.2px;color:var(--ink)} .pay-title.ok{color:var(--primary)} .pay-sub{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55;margin-top:5px;max-width:34ch;align-self:center} .qr-wrap{ position:relative;width:min(228px,72%);margin:20px auto 0; padding:13px;background:#fff; border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-md); } .qr-wrap svg{width:100%;height:auto;display:block;color:var(--ink)} .qr-wrap.locked svg{filter:blur(5px);opacity:.5;transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease)} .qr-note{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:max-content;max-width:86%; background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:9px 13px;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.45; } .qr-wrap:not(.locked) .qr-note{display:none} .qr-bank{ display:flex;align-items:center;justify-content:center;gap:7px; margin-top:12px;font-size:12px;font-weight:800;letter-spacing:1.5px;color:#e11d48; } .qr-bank svg{color:#e11d48} /* Đường xé + hàng thông tin chuyển khoản */ .tear{position:relative;border-top:2px dashed var(--border);margin:22px -22px 6px} .tear::before,.tear::after{ content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%; background:var(--bg);border:1px solid var(--border); } .tear::before{left:-10px} .tear::after{right:-10px} .pay-rows{display:flex;flex-direction:column;text-align:left} .pay-row{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:8px 0;font-size:13.5px; } .pay-row .lb{color:var(--ink-soft);font-weight:600;flex-shrink:0} .pay-row .vl{font-weight:700;color:var(--ink);text-align:right;word-break:break-word} .pay-row .vl.money{font-size:20px;font-weight:800;color:var(--primary)} .pay-row .vl.code{color:var(--primary);letter-spacing:1.2px} .pay-row.sep{border-top:1px dashed var(--border-soft);margin-top:4px;padding-top:12px} /* Nút sao chép nhỏ */ .copy-btn{ display:inline-flex;align-items:center;gap:5px;vertical-align:middle; margin-left:7px;padding:3px 9px;border-radius:var(--radius-full); font-size:11px;font-weight:700;color:var(--ink-soft); background:var(--surface-tint);border:1px solid var(--border); transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } .copy-btn:hover{color:var(--primary);border-color:rgba(2,119,244,.35)} .copy-btn.ok{color:var(--success);border-color:rgba(5,150,105,.35)} /* Cạnh dưới răng cưa kiểu biên lai */ .scallop{ --sc:8px; -webkit-mask-image: linear-gradient(#000,#000), radial-gradient(circle var(--sc) at 50% 100%,transparent calc(var(--sc) - .5px),#000 var(--sc)); -webkit-mask-size:100% calc(100% - var(--sc)),22px calc(var(--sc) * 2 + 1px); -webkit-mask-position:top,bottom; -webkit-mask-repeat:no-repeat,repeat-x; mask-image: linear-gradient(#000,#000), radial-gradient(circle var(--sc) at 50% 100%,transparent calc(var(--sc) - .5px),#000 var(--sc)); mask-size:100% calc(100% - var(--sc)),22px calc(var(--sc) * 2 + 1px); mask-position:top,bottom; mask-repeat:no-repeat,repeat-x; padding-bottom:calc(var(--sc) + 14px); } /* Lưu ý trước khi thanh toán */ .pay-hints{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0} .pay-hints li{ display:flex;align-items:flex-start;gap:9px; font-size:13px;color:var(--ink-soft);line-height:1.55; } .pay-hints li svg{color:var(--primary);margin-top:3px} .pay-hints a{color:var(--primary);font-weight:700} .pay-hints a:hover{text-decoration:underline} /* Hàng meta gói (ID + thông số) trên đầu form */ .meta-box{ display:grid;grid-template-columns:1fr 1fr;gap:10px 16px; border:1px solid var(--border);border-radius:var(--radius); padding:14px 16px;background:var(--surface-tint); } .meta-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft)} .meta-item svg{color:var(--ink-mute)} .meta-item b{color:var(--ink);font-weight:700;letter-spacing:.3px} .meta-item b.hl{color:var(--primary)} /* ---------- Trang chi tiết ---------- */ .detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 24px;padding:6px 22px 18px} .d-item{padding:10px 0;border-bottom:1px dashed var(--border-soft)} .d-item .lb{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-mute)} .d-item .vl{font-size:14px;font-weight:600;color:var(--ink);margin-top:3px;word-break:break-word} .d-item .vl a{color:var(--primary);font-weight:700} .d-item .vl a:hover{text-decoration:underline} .d-item.full{grid-column:1 / -1} .detail-actions{display:flex;gap:10px;flex-wrap:wrap;padding:16px 22px 20px} .detail-actions .btn{padding:11px 18px} /* Timeline trạng thái */ .tl{list-style:none;margin:0;padding:14px 22px 20px;display:flex;flex-direction:column} .tl li{position:relative;padding:0 0 18px 26px} .tl li:last-child{padding-bottom:2px} .tl li::before{ content:"";position:absolute;left:7px;top:16px;bottom:-2px;width:2px; background:var(--border-soft);border-radius:99px; } .tl li:last-child::before{display:none} .tl .tl-dot{ position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%; background:var(--surface);border:2px solid var(--border); } .tl li.done .tl-dot{background:var(--grad-primary);border-color:transparent;box-shadow:0 2px 6px rgba(2,119,244,.3)} .tl li.wait .tl-dot{border-color:var(--warning);background:rgba(217,119,6,.12)} .tl .tl-t{font-size:13.5px;font-weight:700;color:var(--ink)} .tl .tl-d{font-size:12px;color:var(--ink-mute);margin-top:1px;font-variant-numeric:tabular-nums} /* ---------- Trang hoá đơn công khai (hoa-don.html) ---------- */ .inv-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:34px 16px 40px;gap:16px} .inv-brandbar{display:flex;align-items:center;gap:10px} .inv-brandbar .brand-img{height:32px} .inv-card{ width:min(780px,100%); background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-md); padding:32px 36px 26px;position:relative; } .inv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .inv-top h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.5px;line-height:1.15} .inv-top .inv-meta{font-size:13px;color:var(--ink-soft);margin-top:7px;line-height:1.7} .inv-top .inv-meta b{color:var(--ink);font-variant-numeric:tabular-nums} .inv-stamp{ align-self:flex-start;transform:rotate(6deg); border:2.5px solid var(--success);color:var(--success); font-size:14px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase; padding:7px 16px;border-radius:10px;white-space:nowrap; opacity:.9; } .inv-stamp.pending{border-color:var(--warning);color:var(--warning)} .inv-stamp.canceled{border-color:var(--danger);color:var(--danger)} .inv-sec{ margin-top:24px;padding-top:18px;border-top:2px dashed var(--border); } .inv-sec-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px} .inv-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px} .inv-kv{font-size:13.5px;display:flex;justify-content:space-between;gap:14px;padding:5px 0} .inv-kv .lb{color:var(--ink-soft)} .inv-kv .vl{font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;word-break:break-word} .inv-kv .vl.money{color:var(--primary);font-size:17px;font-weight:800} .inv-table{width:100%;border-collapse:collapse;font-size:13.5px} .inv-table th{ text-align:left;padding:10px 12px; font-size:10.5px;font-weight:800;letter-spacing:.55px;text-transform:uppercase; color:var(--ink-mute);background:var(--surface-tint); border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft); } .inv-table td{padding:11px 12px;border-bottom:1px solid var(--border-soft);font-variant-numeric:tabular-nums} .inv-table .r{text-align:right} .inv-table tfoot td{font-weight:800;border-bottom:none;background:var(--primary-50)} .inv-table tfoot .grand{color:var(--primary);font-size:16px} .inv-paybox{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:center} .inv-paybox .qr-wrap{width:170px;margin:0} .inv-foot{ width:min(780px,100%);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; font-size:12.5px;color:var(--ink-mute); } .inv-foot .btn{padding:10px 18px} .inv-foot-actions{display:flex;gap:10px;flex-wrap:wrap} @media print{ body{background:#fff} .no-print{display:none!important} .inv-page{padding:0} .inv-card{border:none;box-shadow:none;width:100%} } /* ---------- Trang đăng nhập (biến tấu: card giữa màn) ---------- */ .blogin{ min-height:100dvh;display:grid;place-items:center; padding:28px 16px;position:relative;overflow:hidden; } .blogin-deco{position:absolute;inset:0;pointer-events:none} .blogin-deco span{ position:absolute;border-radius:50%; background:radial-gradient(circle,rgba(2,119,244,.08),transparent 68%); } .blogin-deco span:nth-child(1){width:520px;height:520px;top:-180px;right:-120px} .blogin-deco span:nth-child(2){width:420px;height:420px;bottom:-160px;left:-110px;background:radial-gradient(circle,rgba(56,189,248,.07),transparent 68%)} .blogin-inner{width:min(432px,100%);position:relative;display:flex;flex-direction:column;gap:14px} .blogin-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:32px 30px 28px;position:relative;overflow:hidden; } .blogin-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--grad-primary); } .blogin-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:20px} .blogin-head .brand-img{height:30px;margin-bottom:14px} .blogin-ico{ width:56px;height:56px;border-radius:17px;margin-bottom:12px; background:var(--grad-primary);color:#fff;display:grid;place-items:center; box-shadow:var(--shadow-primary); } .blogin-head h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px} .blogin-head p{font-size:var(--fs-sm);color:var(--ink-soft)} .blogin-form{display:flex;flex-direction:column;gap:16px} .blogin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .blogin-link{color:var(--primary);font-weight:700;font-size:13.5px} .blogin-link:hover{text-decoration:underline} .blogin-div{ display:flex;align-items:center;gap:12px;margin:18px 0 12px; color:var(--ink-mute);font-size:12.5px;font-weight:600; } .blogin-div::before,.blogin-div::after{content:"";flex:1;height:1px;background:var(--border-soft)} .blogin-foot{text-align:center;font-size:12.5px;color:var(--ink-mute)} .blogin-foot a{color:var(--ink-soft);font-weight:700} .blogin-foot a:hover{color:var(--primary);text-decoration:underline} .blogin-badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} .blogin-badges span{ display:inline-flex;align-items:center;gap:6px; font-size:11.5px;font-weight:700;color:var(--ink-soft); background:rgba(255,255,255,.75);border:1px solid var(--border-soft); padding:5px 12px;border-radius:var(--radius-full); } .blogin-badges svg{color:var(--success)} /* Toggle hiện/ẩn mật khẩu (bill tự khai, không link kauto-auth.css) */ .pw-wrap{position:relative} .pw-wrap .input{padding-right:48px} .pw-toggle{ position:absolute;right:6px;top:50%;transform:translateY(-50%); width:36px;height:36px;border-radius:9px;display:grid;place-items:center; color:var(--ink-mute); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); } .pw-toggle:hover{background:var(--surface-tint);color:var(--ink-soft)} .pw-toggle .ico-off{display:none} .pw-toggle.showing .ico-on{display:none} .pw-toggle.showing .ico-off{display:block} /* Nút loading */ .btn .spin{animation:bSpin .7s linear infinite} .btn .spin[hidden]{display:none} @keyframes bSpin{to{transform:rotate(360deg)}} .btn.is-loading{pointer-events:none} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none} /* ---------- Responsive ---------- */ @media (max-width:1240px){ .bill-cols{grid-template-columns:1fr} .pay-panel{order:-1} } @media (max-width:900px){ .bill-cols-half{grid-template-columns:1fr} .inv-paybox{grid-template-columns:1fr;justify-items:center;text-align:left} } @media (max-width:640px){ .chip-row{padding:14px 14px 0} .page-head .btn{width:100%} .steps{padding:16px 10px 0} .step-label{font-size:10px} .notify-grid{grid-template-columns:1fr} .detail-grid{grid-template-columns:1fr;padding:6px 16px 16px} .meta-box{grid-template-columns:1fr} .inv-card{padding:24px 18px 20px} .inv-2col{grid-template-columns:1fr} .wiz-actions{flex-direction:column-reverse} .wiz-actions .btn{width:100%} } /* ---------- Giảm tông đậm (Inter dày hơn Be Vietnam Pro) ---------- Đặt CUỐI file để thắng mọi rule cùng specificity phía trên. Quy đổi so với DS gốc: 800 → 700 (chỉ heading chính) · 700 → 600 · 600 → 500. */ /* Heading chính giữ 700 */ .page-head h1,.stat-value,.pay-title,.wiz-title,.inv-top h1,.blogin-head h1, .sum-row.total .vl,.pay-row .vl.money,.inv-stamp,.inv-table tfoot .grand{font-weight:700} /* Nhãn/tiêu đề phụ/nút: 700–800 → 600 */ .card-head,.field-label,.btn,.nav-section,.nav-item.active,.check, .segmented .seg,.choice-title,.f-chip,.step-label,.step-dot, .sum-row.total .lb,.sum-row .vl,.pay-row .vl,.meta-item b, .d-item .lb,.tl .tl-t,.copy-btn,.qr-note,.qr-bank, .kt-table th,.kt-code,.kt-badge,.kt-money,.kt-page,.kt-sort,.kt-info b, .inv-sec-title,.inv-kv .vl,.inv-table th,.inv-table tfoot td, .user-name,.user-balance,.wallet-amount,.tier,.count,.blogin-link,.blogin-foot a, .pay-hints b,.field-error,.header-nav .tip{font-weight:600} /* Chữ nội dung/menu thường: 600 → 500 */ .nav-item,.user-item,.meta-item,.sum-row .lb,.pay-row .lb, .d-item .vl,.kt-cell-main,.choice-sub,.bottom-nav a, .blogin-badges span,.input::placeholder,.textarea::placeholder{font-weight:500}