@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";:root{font-family:IBM Plex Sans,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#15243a;background:#f5f8fc;font-synthesis:none;text-rendering:optimizeLegibility;--blue: #2563eb;--blue-dark: #1747b6;--ink: #15243a;--muted: #728198;--line: #dce5f1;--panel-surface-alpha: .66;--nested-surface-alpha: .58;--preview-surface-alpha: .52;--code-surface-alpha: .54;--soft-blue: #f2f7ff;--shadow: 0 16px 45px rgba(33, 59, 98, .06), 0 2px 8px rgba(33, 59, 98, .035)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:#edf3f9;background-image:linear-gradient(rgba(245,248,252,var(--nature-overlay-top-alpha, .76)),rgba(245,248,252,var(--nature-overlay-bottom-alpha, .87))),linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px),var(--nature-background, url(/nature-bg.jpg));background-size:cover,34px 34px,34px 34px,cover;background-position:center top,0 0,0 0,center 38%;background-repeat:no-repeat,repeat,repeat,no-repeat;background-attachment:fixed,scroll,scroll,fixed}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(37,99,235,.23);outline-offset:2px}.topbar{height:72px;padding:0 clamp(20px,5.6vw,84px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(200,214,233,.78);background:#ffffffd4;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{color:var(--ink);display:inline-flex;gap:10px;align-items:center;text-decoration:none}.brand img{display:block}.brand-copy{display:flex;flex-direction:column;gap:0;line-height:1}.brand-copy strong{font-size:21px;font-weight:700;letter-spacing:-.9px}.brand-copy strong span,.footer-plus{color:var(--blue)}.brand-copy small{font-size:8px;letter-spacing:1.45px;font-weight:600;color:#8090a6;margin-top:5px}.topbar-right{display:flex;align-items:center;gap:20px}.privacy-note{display:flex;align-items:center;gap:8px;color:#566981;font-size:12px}.privacy-dot,.count-pulse{width:7px;height:7px;background:#2bb88a;display:inline-block;border-radius:50%;box-shadow:0 0 0 3px #2bb88a1f}.version-chip{font-size:9px;font-weight:700;letter-spacing:1px;color:#718199;padding:8px 11px;border:1px solid #e1e8f1;border-radius:6px;background:#fff}.page-shell{width:min(1120px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:0 20px;align-items:start}.intro{padding:54px 0 28px;position:relative}.intro,.footer{grid-column:1 / -1}.eyebrow,.step-tag,.panel-kicker{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:1.45px}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow-line{display:inline-block;width:23px;height:2px;background:var(--blue)}h1{margin:15px 0 11px;font-size:clamp(38px,5.1vw,57px);letter-spacing:-2.8px;line-height:1.04;font-weight:600}h1 span{color:#7183a0;font-weight:400}.intro-copy{margin:0;color:#64748b;font-size:14px;line-height:1.65;max-width:570px}.background-adjust{width:min(340px,100%);margin-top:16px;padding:10px 13px 9px;border:1px solid rgba(218,228,241,.9);border-radius:9px;background:#ffffffb8;box-shadow:0 5px 18px #213b620a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.background-adjust-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.background-adjust-heading label{color:#4c6079;font-size:10px;font-weight:600}.background-adjust-heading output{color:var(--blue);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}.background-adjust input[type=range]{display:block;width:100%;height:16px;margin:7px 0 2px;accent-color:var(--blue);cursor:pointer}.background-adjust-scale{display:flex;justify-content:space-between;color:#8a98ab;font-size:8px}.background-adjust>p{margin:5px 0 0;color:#96a2b2;font-size:8px;line-height:1.4}.panel{background:rgba(255,255,255,var(--panel-surface-alpha));border:1px solid rgba(225,232,241,.82);border-radius:12px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.builder{grid-column:1;padding:25px 22px 18px;position:relative;overflow:hidden}.builder:before{content:"";height:3px;background:linear-gradient(90deg,var(--blue) 0 18%,#8bb4ff 18% 19%,transparent 19%);position:absolute;inset:0 0 auto}.section-heading,.workspace-heading,.live-panel-top,.list-panel-top{display:flex;align-items:center;justify-content:space-between}.section-heading{margin-bottom:24px}.section-heading h2,.workspace-heading h2{margin:6px 0 0;font-size:19px;letter-spacing:-.35px;font-weight:600}.local-badge{color:#728198;font-size:10px;background:#f7f9fc;border:1px solid #ebeff5;border-radius:30px;padding:7px 10px;display:flex;gap:5px;align-items:center}.local-badge svg{width:13px;height:13px;fill:#368b75}.builder-form{display:flex;flex-direction:column;gap:19px}.form-field{min-width:0;margin:0;padding:0;border:0}.field-label{display:block;margin-bottom:8px;color:#485b74;font-size:11px;font-weight:600;letter-spacing:.15px}.required-mark{color:var(--blue)}.source-wrap,.quantity-wrap,.search-input-wrap{display:flex;align-items:center;height:44px;border:1px solid #dce5f1;border-radius:7px;background:#fff;transition:border .18s,box-shadow .18s}.source-wrap:focus-within,.quantity-wrap:focus-within,.search-input-wrap:focus-within{border-color:#77a0f8;box-shadow:0 0 0 3px #2563eb14}.source-wrap{max-width:510px}.input-prefix{color:#8ba0bd;font-size:16px;margin:0 12px}.source-wrap input,.quantity-wrap input,.search-input-wrap input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink)}.source-wrap input{font-family:IBM Plex Sans,monospace;font-size:14px;letter-spacing:.3px;font-weight:600}.input-live{display:flex;align-items:center;gap:6px;margin:0 12px;color:#7890ad;font-size:8px;font-weight:700;letter-spacing:1px}.input-live i{width:6px;height:6px;border-radius:50%;background:#30b98a}.field-hint{margin:7px 0 0;font-size:10px;color:#91a0b3}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}.quantity-field{grid-column:1 / -1;max-width:none}.segmented-control{display:flex;align-items:center;height:42px;padding:3px;border:1px solid #e1e8f1;background:#f7f9fc;border-radius:7px;gap:3px}.segment{height:34px;flex:1;display:flex;justify-content:center;align-items:center;gap:7px;white-space:nowrap;color:#74839a;background:transparent;border:1px solid transparent;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;transition:color .18s,background .18s,box-shadow .18s}.segment:hover{color:var(--blue)}.segment.is-selected{color:#194dbd;background:#fff;border-color:#e5ebf3;box-shadow:0 1px 3px #142b4e0f;font-weight:600}.segment[data-direction=down].is-selected{color:#8b5b14}.qr-mini{width:11px;height:11px;border:2px solid currentColor;position:relative;border-radius:1px}.qr-mini:before,.qr-mini:after{content:"";position:absolute;background:currentColor}.qr-mini:before{width:3px;height:3px;top:2px;left:2px;box-shadow:5px 0 currentColor,0 5px currentColor}.qr-mini:after{width:2px;height:2px;right:1px;bottom:1px}.barcode-mini{display:inline-block;width:15px;height:12px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 2px,currentColor 2px 4px,transparent 4px 6px)}.quantity-wrap{height:42px;padding-left:12px}.quantity-wrap input{font-size:13px;font-weight:600}.quantity-wrap input::-webkit-inner-spin-button,.quantity-wrap input::-webkit-outer-spin-button{opacity:.6}.quantity-wrap span{color:#8391a5;font-size:10px;padding:0 11px}.form-bottom{display:flex;flex-direction:column;align-items:stretch;gap:13px;border-top:1px solid #edf1f6;padding-top:17px;margin-top:2px}.unlimited-note{display:flex;align-items:center;gap:8px;color:#7b899c;font-size:10px;margin:0}.infinity-mark{color:var(--blue);font-size:19px;line-height:1}.primary-button{display:flex;width:100%;justify-content:center;align-items:center;gap:9px;border:0;border-radius:7px;background:var(--blue);color:#fff;height:42px;padding:0 14px;font-size:11px;font-weight:600;box-shadow:0 5px 14px #2563eb2b;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}.primary-button:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 8px 18px #2563eb38}.button-icon{font-size:18px;font-weight:400;line-height:0}.button-arrow{opacity:.75;margin-left:3px}.form-message{min-height:14px;margin:-12px 0 0;color:#8391a4;font-size:10px}.form-message.is-error,.search-meta .is-error{color:#c34545}.form-message.is-success{color:#16815d}.history-section{margin-top:9px;padding-top:18px;border-top:1px solid #edf1f6}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-heading h3{margin:4px 0 0;color:var(--ink);font-size:15px;letter-spacing:-.2px}.history-clear{padding:6px 8px;border:1px solid #e5ebf3;border-radius:5px;background:#fff;color:#7b899c;font-size:9px;cursor:pointer}.history-clear:hover{color:#b34b4b;border-color:#eccccc;background:snow}.history-note{margin:8px 0 12px;color:#91a0b3;font-size:9px;line-height:1.5}.history-list{display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto;padding-right:3px;scrollbar-color:#ccd9eb #f6f8fb;scrollbar-width:thin}.history-item{min-width:0;display:flex;align-items:stretch;gap:5px;padding:5px;border:1px solid rgba(231,237,245,.82);border-radius:7px;background:rgba(251,252,254,var(--nested-surface-alpha));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border .15s,background .15s}.history-item:hover{border-color:#c5d6f2;background:rgba(247,250,255,calc(var(--nested-surface-alpha) + .12))}.history-restore{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:5px 7px;overflow:hidden;border:0;background:transparent;text-align:left;cursor:pointer}.history-range{width:100%;overflow:hidden;color:#294b79;font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.history-details,.history-created{color:#8291a5;font-size:8px;line-height:1.35}.history-delete{align-self:center;flex:0 0 28px;width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#93a1b3;font-size:18px;cursor:pointer}.history-delete:hover{background:#fff0f0;color:#b34b4b}.history-empty{min-height:72px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #e1e8f1;border-radius:7px;color:#99a7b8}.history-empty[hidden]{display:none}.history-empty>span{font-size:17px;color:#9bb6e1}.history-empty p{margin:0;font-size:9px}.workspace{grid-column:2;padding-top:0}.workspace-heading{margin-bottom:16px}.workspace-heading h2{font-size:20px}.generated-count{display:flex;gap:8px;align-items:center;color:#8795a8;border:1px solid #e3e9f1;border-radius:20px;background:#ffffffb3;padding:7px 10px;font-size:10px}.generated-count.is-ready{color:#247558;border-color:#cfe9de;background:#f4fbf7}.count-pulse{width:6px;height:6px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px}.live-panel,.list-panel{min-width:0;padding:20px}.live-panel{display:flex;flex-direction:column}.panel-kicker{font-size:8px;letter-spacing:1.35px;color:#8a9bb3}.live-panel-top h3,.list-panel-top h3{margin:4px 0 0;font-size:15px;letter-spacing:-.2px}.live-status{display:flex;align-items:center;gap:6px;border:1px solid #cfeadf;background:#f5fbf7;border-radius:30px;padding:5px 8px;color:#208460;font-size:8px;font-weight:700;letter-spacing:.6px}.live-status span{width:5px;height:5px;border-radius:50%;background:#2bb88a}.preview-stage{height:244px;position:relative;margin:17px 0 0;border:1px dashed #d7e3f3;border-radius:9px;display:grid;place-items:center;overflow:hidden;background-color:rgba(251,253,255,var(--preview-surface-alpha));background-image:radial-gradient(rgba(215,227,243,.8) .75px,transparent .75px);background-size:13px 13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.preview-stage:after{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid rgba(80,119,178,.07);pointer-events:none}.preview-corner{position:absolute;width:12px;height:12px;border-color:#8aaff4;border-style:solid;opacity:.68}.corner-tl{inset:9px auto auto 9px;border-width:1px 0 0 1px}.corner-tr{inset:9px 9px auto auto;border-width:1px 1px 0 0}.corner-bl{inset:auto auto 9px 9px;border-width:0 0 1px 1px}.corner-br{inset:auto 9px 9px auto;border-width:0 1px 1px 0}.live-graphic{position:relative;z-index:1;max-width:calc(100% - 48px);max-height:205px;background:#fff;border:8px solid #fff;border-radius:4px;box-shadow:0 7px 24px #20385d1a}#live-qr{width:190px;height:190px}.barcode-graphic{width:min(86%,390px);height:auto;padding:20px}.preview-empty{z-index:1;display:flex;align-items:center;flex-direction:column;gap:9px;color:#9caabd;font-size:11px}.preview-empty-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;color:#7395cb;background:#eef4fc;font-size:19px}.preview-stage.has-error{border-color:#e8c2c2}.is-hidden{display:none!important}.live-code-line{display:flex;min-height:46px;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f6;gap:8px}.live-code-line code{color:#1d3d72;font-size:12px;font-weight:600;letter-spacing:.25px;overflow-wrap:anywhere;cursor:copy}.active-position{color:#90a0b4;font-size:8px;font-weight:600;letter-spacing:.6px;white-space:nowrap}.search-block{margin-top:17px}.search-controls{display:flex;gap:8px}.search-input-wrap{height:39px;flex:1;min-width:0;background:#fbfcfe}.search-input-wrap svg{width:16px;height:16px;margin-left:11px;fill:none;stroke:#8da0b8;stroke-width:1.7}.search-input-wrap input{padding:0 9px;font-size:10px}.search-input-wrap input::placeholder{color:#a0adbd}.clear-search{border:0;background:transparent;color:#8594a9;font-size:18px;padding:0 9px;cursor:pointer}.nav-arrows{display:flex;gap:5px}.nav-button{display:grid;place-items:center;width:39px;border:1px solid #dce5f1;border-radius:6px;background:#fff;color:#506c95;font-size:17px;cursor:pointer;transition:background .15s,color .15s,border .15s}.nav-button:hover:not(:disabled){color:#fff;border-color:var(--blue);background:var(--blue)}.nav-button:disabled{opacity:.42;cursor:not-allowed}.search-meta{min-height:18px;display:flex;justify-content:space-between;align-items:end;gap:10px;color:#93a1b3;font-size:9px;margin-top:7px}#match-position{color:var(--blue);font-weight:600}.list-panel{display:flex;flex-direction:column}.rows-select-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#8a98aa;font-size:8px}.rows-select-wrap select{cursor:pointer;border:1px solid #dde6f1;border-radius:6px;background:#fff;color:#3c5475;padding:6px 9px;font-size:10px;font-weight:600}.list-summary{display:flex;justify-content:space-between;align-items:center;padding:13px 0 9px;margin-top:13px;border-top:1px solid #edf1f6;color:#8a98aa;font-size:9px}.list-index-label{font-size:7px;letter-spacing:.7px}.code-list{display:grid;gap:8px;max-height:443px;overflow:auto;padding:1px 2px 3px 0;scrollbar-color:#ccd9eb #f6f8fb;scrollbar-width:thin}.code-list.columns-1{grid-template-columns:minmax(0,1fr)}.code-list.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.code-list.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.code-list.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.code-card{min-width:0;min-height:122px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:9px 6px 8px;border:1px solid rgba(230,236,244,.82);border-radius:7px;background:rgba(251,252,254,var(--code-surface-alpha));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:border .15s,background .15s,transform .15s}.code-card:hover{transform:translateY(-1px);border-color:#adc5f0;background:rgba(247,250,255,calc(var(--code-surface-alpha) + .12))}.code-card.is-active{border-color:#6e98ef;background:rgba(244,248,255,calc(var(--code-surface-alpha) + .2));box-shadow:0 0 0 2px #2563eb14}.code-card.is-search-match:not(.is-active){border-color:#c5d6f2}.card-graphic{height:77px;width:100%;display:grid;place-items:center;overflow:hidden}.card-graphic canvas{width:73px;height:73px;object-fit:contain}.card-graphic svg{max-width:92%;max-height:70px}.columns-3 .card-graphic canvas,.columns-4 .card-graphic canvas{width:60px;height:60px}.columns-3 .card-graphic{height:65px}.columns-4 .card-graphic{height:64px}.card-graphic.graphic-error:after{content:"Không hỗ trợ";font-size:9px;color:#b45f5f}.card-number{position:absolute;top:7px;left:7px;color:#a0adc0;font-size:7px}.card-code{max-width:100%;color:#395273;font-size:9px;font-weight:600;letter-spacing:.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.columns-3 .card-code,.columns-4 .card-code{font-size:8px}.list-empty{min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #dce5f1;border-radius:8px;color:#8a98aa;text-align:center}.list-empty[hidden]{display:none}.empty-grid{font-size:23px;color:#9bb6e1}.list-empty strong{color:#536681;font-size:11px}.list-empty span:last-child{font-size:9px}.load-more{min-height:36px;display:flex;align-items:center;justify-content:center;gap:8px;margin:11px 0 0;border:1px solid #dce6f3;border-radius:6px;background:#f8faff;color:#3f67a7;font-size:10px;font-weight:600;cursor:pointer}.load-more:hover{background:#f0f5ff;border-color:#b9cdef}.load-more span:nth-child(2){color:#91a0b3;font-size:9px;font-weight:400}.load-more[hidden]{display:none}.footer{min-height:78px;display:flex;justify-content:space-between;align-items:center;color:#8c9aae;font-size:9px;margin-top:14px}.footer>span:first-child{color:#536680;font-weight:600}.footer>span:first-child i{color:#b0bdce;font-style:normal;font-weight:400;margin:0 5px}.footer>span:last-child{font-size:8px;letter-spacing:.7px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:10px 15px;border-radius:7px;background:#172b49;color:#fff;font-size:11px;box-shadow:0 7px 22px #10223d33;transition:opacity .2s,transform .2s;z-index:10}.toast.is-visible{transform:translate(-50%);opacity:1}@media(max-width:900px){.page-shell{display:block}.workspace{padding-top:38px}.form-row{grid-template-columns:1fr 1fr}.quantity-field{grid-column:1 / -1;max-width:200px}.workspace-grid{grid-template-columns:minmax(275px,.85fr) minmax(340px,1.15fr);gap:12px}.live-panel,.list-panel{padding:16px}.code-list.columns-4{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:680px){.topbar{height:62px;padding:0 18px}.privacy-note{display:none}.page-shell{width:min(100% - 32px,520px)}.intro{padding:40px 0 22px}h1{font-size:clamp(39px,10vw,51px);letter-spacing:-2px}.intro-copy{font-size:12px}.builder{padding:21px 17px 14px}.local-badge{font-size:0;padding:7px}.local-badge svg{width:15px;height:15px}.form-row{grid-template-columns:1fr;gap:15px}.quantity-field{grid-column:auto;max-width:none}.source-wrap{max-width:none}.form-bottom{align-items:flex-start;flex-direction:column;gap:13px}.primary-button{width:100%;justify-content:center}.workspace{padding-top:30px}.workspace-heading{align-items:flex-end}.workspace-heading h2{font-size:18px}.generated-count{font-size:8px;padding:6px 8px}.workspace-grid{grid-template-columns:1fr}.live-panel,.list-panel{padding:17px}.preview-stage{height:235px}.code-list{max-height:430px}.code-list.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{align-items:flex-start;justify-content:center;flex-direction:column;gap:7px;min-height:70px}}@media(max-width:380px){.version-chip{display:none}.page-shell{width:calc(100% - 24px)}.builder{padding-inline:13px}.live-panel,.list-panel{padding:13px}.search-controls{gap:5px}.nav-button{width:34px}.active-position{font-size:7px}}