*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.55 Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:#f4f7fc;color:#10203b}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}:root{--bg:#f4f7fc;--panel:#fff;--ink:#10203b;--muted:#8290a6;--line:#e6ebf3;--blue:#1666f5;--nav:#0a1729;--shadow:0 10px 35px #182b5210}body.dark{--bg:#0d1421;--panel:#172337;--ink:#edf3ff;--muted:#9caec7;--line:#2b3a50;--nav:#07101f;--shadow:0 10px 35px #0003;background:var(--bg);color:var(--ink)}.sidebar{position:fixed;top:0;bottom:0;left:0;width:246px;background:var(--nav);color:#c3d0e5;z-index:30;overflow:auto;padding:24px 14px}.brand{font-size:19px;font-weight:900;display:block;color:#fff;padding:0 12px 25px;letter-spacing:-.5px}.brand b,.topbrand b{color:#4395ff}.navgroup{padding:8px 0 14px}.navgroup small{display:block;color:#6f88aa;font-size:10px;letter-spacing:1.5px;font-weight:800;padding:9px 14px}.navgroup a{display:block;padding:12px 14px;border-radius:10px;font-weight:650;margin:3px 0}.navgroup a:hover{background:#1666f5;color:white}.shell{margin-left:246px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--line);padding:0 26px;position:sticky;top:0;z-index:20}.topbrand{font-weight:900;font-size:17px}.topactions{display:flex;gap:12px;align-items:center}.iconbtn,.hamburger{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:10px 14px}.hamburger{display:none}.walletpill{background:#e9f8f1;color:#078750;padding:9px 13px;border-radius:11px;font-weight:850}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:linear-gradient(130deg,#23a6f4,#6556e8);font-weight:800}.content{width:100%;max-width:1560px;margin:0 auto;padding:28px 30px 50px;flex:1}footer{color:var(--muted);padding:18px 30px;text-align:center;border-top:1px solid var(--line)}h1,h2,h3{line-height:1.22;letter-spacing:-.5px}h1{font-size:29px}h2{font-size:20px}h3{font-size:16px}p{color:var(--muted)}.heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.heading h1,.heading h2{margin:0 0 5px}.heading p{margin:0}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.panel{padding:22px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.category{padding:24px;transition:transform .2s}.category:hover,.service:hover{transform:translateY(-3px)}.category p{min-height:44px}.category span{color:var(--blue);font-weight:750}.cat-icon{font-size:29px;background:#edf4ff;display:grid;place-items:center;width:60px;height:60px;border-radius:16px}.hero{background:radial-gradient(circle at 77% 34%,#2256a8,#0b1d37 52%,#071526);border-radius:23px;color:white;padding:56px 48px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;min-height:350px;overflow:hidden;margin-bottom:30px}.hero h1{font-size:clamp(29px,3.3vw,52px);max-width:700px;margin:12px 0}.hero h1 em{font-style:normal;color:#4db0ff}.hero p{color:#b8c9e1;max-width:650px;font-size:15px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:1.2px;color:#8fc5ff}.eyebrow.blue{color:#1766ed}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:19px}.btn{background:#1666f5;color:white;border:0;padding:11px 18px;border-radius:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}.btn:hover{background:#0756e5}.btn.ghost{background:#eaf2ff;color:#1766e5}.btn.ghostlight{background:#ffffff24;color:white;border:1px solid #ffffff40}.btn.secondary{background:#eaf1fa;color:#255081}.btn.green{background:#17c866}.btn.mini{padding:6px 10px;font-size:12px}.btn.wide{width:100%}.heroart{display:flex;align-items:center;justify-content:center;position:relative}.orb{font-size:100px;color:#58b5ff;text-shadow:0 0 70px #32a7ff}.hero-card{position:absolute;bottom:12px;right:0;background:#ffffffee;color:#153055;border-radius:15px;padding:18px;box-shadow:0 15px 45px #0005;transform:rotate(-3deg);min-width:260px}.hero-card strong,.hero-card span{display:block;margin-top:8px}.hero-card span{font-size:11px;color:#64809f}.section{margin-top:32px}.banner{background:linear-gradient(110deg,#edf5ff,#f7fbff);border:1px solid #dbe9ff;border-radius:17px;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 0 25px;color:#0e2950}.banner h2,.banner h3{margin:0 0 5px}.banner p{margin:0;color:#6e84a2}.balance-hero{position:relative;background:linear-gradient(120deg,#112e51,#071a30);border-radius:19px;color:white;padding:27px 30px;margin:12px 0 16px;min-height:130px}.balance-hero h1{font-size:34px;margin:6px 0}.balance-hero small{color:#8fb4dd;font-weight:850;letter-spacing:1px}.balance-hero .btn{position:absolute;right:24px;top:45px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:15px 0 25px}.stat{padding:22px}.stat small{display:block;color:var(--muted);font-weight:750}.stat strong{font-size:27px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.chip{border:1px solid var(--line);border-radius:30px;background:var(--panel);padding:9px 14px;font-weight:700}.chip:hover{color:#1666f5}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service{padding:22px;display:flex;flex-direction:column;gap:8px}.service h3{margin:4px 0}.service p{min-height:58px;margin:0}.price{font-size:24px;font-weight:900;color:#0d9d60;margin:10px 0}.price small{font-size:13px;color:var(--muted);font-weight:500}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;margin:13px 0}.field span{font-size:12px;font-weight:800;color:var(--muted)}input,select,textarea{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:11px 12px;outline:none;width:100%;min-width:0}input:focus,select:focus,textarea:focus{border-color:#3588ff;box-shadow:0 0 0 3px #1a72ff20}.check{display:flex;gap:8px;align-items:center;margin:12px 0}.check input{width:auto}.auth{max-width:450px;margin:55px auto;padding:32px}.auth h1{margin:0}.auth .btn{margin-top:10px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:620px}th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;background:var(--bg)}td,th{padding:13px;border-bottom:1px solid var(--line)}td{font-size:12px}td form{display:flex;gap:6px;align-items:center}td input,td select{width:auto;max-width:150px;padding:7px}.badge{display:inline-block;border-radius:30px;padding:4px 9px;font-size:10px;font-weight:850;background:#e8eef7;color:#567}.badge-completed,.badge-approved,.badge-running,.badge-connected,.badge-closed{background:#def8e9;color:#00834b}.badge-pending,.badge-processing,.badge-awaiting_connection{background:#fff2d8;color:#a86a00}.badge-cancelled,.badge-rejected,.badge-expired,.badge-error{background:#ffe3e8;color:#cb3152}.line{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);gap:10px}.line small{display:block;color:var(--muted)}.bank{background:var(--bg);border-radius:12px;padding:16px;line-height:2}.ticket{padding:15px 0;border-bottom:1px solid var(--line)}.reply{background:var(--bg);padding:12px;border-radius:9px}.qr-placeholder{min-height:260px;border:2px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:50px;color:var(--muted);text-align:center;padding:25px}.qr-placeholder strong{font-size:15px;color:var(--ink)}.qr-placeholder span{font-size:12px;max-width:300px}.muted{font-size:12px}.empty{padding:35px}.alert{padding:13px 18px;background:#dff7eb;color:#086a43;border-radius:12px;margin-bottom:16px}.alert.error{background:#ffe6e9;color:#a5223d}.modal{position:fixed;inset:0;background:#0411249e;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modalbox{background:var(--panel);border-radius:20px;padding:28px;width:min(100%,490px);max-height:92vh;overflow:auto;position:relative;box-shadow:0 30px 90px #0004}.modalbox h2{margin:0}.closemodal{position:absolute;top:15px;right:15px;background:var(--bg);border:0;border-radius:10px;font-size:22px;width:36px;height:36px;color:var(--ink)}.total{display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-weight:800}.total strong{color:#0ca25e}.overlay{display:none}.inline{display:inline-flex;margin:3px}@media(max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:transform .25s}.sidebar.open{transform:translateX(0)}.overlay.show{display:block;position:fixed;inset:0;background:#0615298c;z-index:25}.shell{margin-left:0}.hamburger{display:block}.topbar{padding:0 15px}.content{padding:18px 15px 40px}.hero{grid-template-columns:1fr;padding:36px 26px}.heroart{display:none}.twocol{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.topbrand{font-size:13px}.walletpill{font-size:11px;padding:8px}.topactions{gap:5px}.topactions .btn.ghost{display:none}.cards,.service-grid{grid-template-columns:1fr}.hero h1{font-size:30px}.hero{padding:30px 22px}.balance-hero .btn{position:static;margin-top:8px}.balance-hero h1{font-size:28px}.banner{flex-direction:column;align-items:stretch}.stat{padding:16px}.stat strong{font-size:23px}.heading h1{font-size:23px}.modalbox{padding:24px 18px}}
/* Điện thoại: không tự zoom khi nhập dữ liệu */
@media (max-width: 850px) {
    input,
    select,
    textarea,
    td input,
    td select,
    .field input,
    .field select,
    .field textarea,
    .modalbox input,
    .modalbox select,
    .modalbox textarea {
        font-size: 16px !important;
        line-height: 1.5;
    }

    input,
    select {
        min-height: 44px;
    }

    textarea {
        min-height: 100px;
    }
}